diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 74cae7dd16..cf089b9f19 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -4,7 +4,6 @@
     "yzhang.markdown-all-in-one", // nicer markdown support
     "esbenp.prettier-vscode", // prettier plugin
     "dbaeumer.vscode-eslint", // eslint plugin
-    "bradlc.vscode-tailwindcss", // hinting / autocompletion for tailwind
     "ban.spellright", // Spell check for docs
     "stripe.vscode-stripe", // stripe VSCode extension
     "Prisma.prisma", // syntax|format|completion for prisma
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 43ae1c6a83..f1a8fd8ccd 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -8,5 +8,5 @@
   "typescript.preferences.importModuleSpecifier": "non-relative",
   "spellright.language": ["en"],
   "spellright.documentTypes": ["markdown", "typescript", "typescriptreact"],
-  "tailwindCSS.experimental.classRegex": [["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]]
+  "tailwindCSS.classFunctions": ["cva"]
 }
diff --git a/apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx b/apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx
index 80ec7dbca3..32cbe46cd5 100644
--- a/apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx
+++ b/apps/web/app/(use-page-wrapper)/(main-nav)/ShellMainAppDir.tsx
@@ -46,7 +46,7 @@ export function ShellMainAppDir(props: LayoutProps) {
                     props.backPath
                       ? "relative"
                       : "pwa:bottom-[max(7rem,_calc(5rem_+_env(safe-area-inset-bottom)))] fixed bottom-32 z-40 ltr:right-4 rtl:left-4 md:z-auto md:ltr:right-0 md:rtl:left-0",
-                    "flex-shrink-0 [-webkit-app-region:no-drag] md:relative md:bottom-auto md:right-auto"
+                    "shrink-0 [-webkit-app-region:no-drag] md:relative md:bottom-auto md:right-auto"
                   )}>
                   {props.CTA}
                 </div>
diff --git a/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/FormEdit.tsx b/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/FormEdit.tsx
index c193242b71..f273010764 100644
--- a/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/FormEdit.tsx
+++ b/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/FormEdit.tsx
@@ -97,7 +97,7 @@ function Field({
               data-testid={`${hookFieldNamespace}.label`}
               disabled={!!router}
               label="Label"
-              className="flex-grow"
+              className="grow"
               placeholder={t("this_is_what_your_users_would_see")}
               defaultValue={label || routerField?.label || "Field"}
               required
@@ -189,7 +189,7 @@ function Field({
             />
           </div>
           {["select", "multiselect"].includes(fieldType) ? (
-            <div className="bg-muted w-full rounded-[10px] p-2">
+            <div className="bg-cal-muted w-full rounded-[10px] p-2">
               <Label className="text-subtle">{t("options")}</Label>
               <MultiOptionInput
                 fieldArrayName={`${hookFieldNamespace}.options`}
@@ -319,7 +319,7 @@ const FormEdit = ({
   ) : (
     <div className="w-full py-4 lg:py-8">
       {/* TODO: remake empty screen for V3 */}
-      <div className="border-sublte bg-muted flex flex-col items-center gap-6 rounded-xl border p-11">
+      <div className="border-sublte bg-cal-muted flex flex-col items-center gap-6 rounded-xl border p-11">
         <div className="mb-3 grid">
           {/* Icon card - Top */}
           <div className="bg-default border-subtle z-30 col-start-1 col-end-1 row-start-1 row-end-1 h-10 w-10 transform rounded-md border shadow-sm">
diff --git a/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/IncompleteBooking.tsx b/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/IncompleteBooking.tsx
index 8af8bfc8ea..11c3f15e23 100644
--- a/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/IncompleteBooking.tsx
+++ b/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/IncompleteBooking.tsx
@@ -122,7 +122,7 @@ function Page({ form }: { form: RoutingFormWithResponseCount }) {
             />
           </div>
           {salesforceActionEnabled ? (
-            <div className="bg-muted mt-1 rounded-xl p-2">
+            <div className="bg-cal-muted mt-1 rounded-xl p-2">
               {form.team && (
                 <>
                   <div className="bg-default mt-2 rounded-xl px-2 py-2">
diff --git a/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/RouteBuilder.tsx b/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/RouteBuilder.tsx
index d1cbfdc813..cbcee2e923 100644
--- a/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/RouteBuilder.tsx
+++ b/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/RouteBuilder.tsx
@@ -307,7 +307,7 @@ const WeightedAttributesSelector = ({
             }}
           />
         </div>
-        <div className="bg-muted mt-1 rounded-xl p-2">
+        <div className="bg-cal-muted mt-1 rounded-xl p-2">
           {attributeIdForWeights ? (
             <SelectField
               size="sm"
@@ -652,21 +652,21 @@ const Route = ({
       <div
         className={classNames(
           "cal-query-builder-card w-full gap-2 p-2",
-          route.isFallback && "bg-muted border-subtle rounded-xl  border"
+          route.isFallback && "bg-cal-muted border-subtle rounded-xl  border"
         )}>
         <div className="cal-query-builder w-full ">
           {formFieldsQueryBuilder}
           <div>
             {route.isFallback ? (
               <div className="flex w-full flex-col gap-2 text-sm lg:flex-row">
-                <div className="flex flex-grow items-center gap-2">
-                  {/* <div className="flex flex-grow-0 whitespace-nowrap">
+                <div className="flex grow items-center gap-2">
+                  {/* <div className="flex grow-0 whitespace-nowrap">
                       <span>{t("send_booker_to")}</span>
                     </div> */}
                   <Select
                     size="sm"
                     isDisabled={disabled}
-                    className="data-testid-select-routing-action block w-full flex-grow"
+                    className="data-testid-select-routing-action block w-full grow"
                     required
                     value={RoutingPages.find((page) => page.value === route.action?.type)}
                     onChange={(item) => {
@@ -695,7 +695,7 @@ const Route = ({
                       required
                       disabled={disabled}
                       name="customPageMessage"
-                      className="border-default flex flex-grow lg:w-fit"
+                      className="border-default flex grow lg:w-fit"
                       style={{
                         minHeight: "38px",
                       }}
@@ -708,8 +708,8 @@ const Route = ({
                     <TextField
                       disabled={disabled}
                       name="externalRedirectUrl"
-                      className="border-default flex flex-grow text-sm"
-                      containerClassName="flex-grow"
+                      className="border-default flex grow text-sm"
+                      containerClassName="grow"
                       type="url"
                       required
                       labelSrOnly
@@ -720,7 +720,7 @@ const Route = ({
                       placeholder="https://example.com"
                     />
                   ) : (
-                    <div className="flex-grow">
+                    <div className="grow">
                       <Select
                         size="sm"
                         required
@@ -758,8 +758,8 @@ const Route = ({
                         <>
                           <TextField
                             disabled={disabled}
-                            className="border-default flex w-full flex-grow text-sm"
-                            containerClassName="flex-grow mt-2"
+                            className="border-default flex w-full grow text-sm"
+                            containerClassName="grow mt-2"
                             addOnLeading={eventTypePrefix}
                             required
                             value={customEventTypeSlug}
@@ -796,12 +796,12 @@ const Route = ({
                   </div>
                   <span className="text-emphasis ml-2 text-sm font-medium">Send booker to</span>
                 </div>
-                <div className="bg-muted flex w-full flex-col gap-2 rounded-xl p-2 text-sm lg:flex-row">
-                  <div className="flex flex-grow items-center gap-2">
+                <div className="bg-cal-muted flex w-full flex-col gap-2 rounded-xl p-2 text-sm lg:flex-row">
+                  <div className="flex grow items-center gap-2">
                     <Select
                       size="sm"
                       isDisabled={disabled}
-                      className="data-testid-select-routing-action block w-full flex-grow"
+                      className="data-testid-select-routing-action block w-full grow"
                       required
                       value={RoutingPages.find((page) => page.value === route.action?.type)}
                       onChange={(item) => {
@@ -830,7 +830,7 @@ const Route = ({
                         required
                         disabled={disabled}
                         name="customPageMessage"
-                        className="border-default flex flex-grow lg:w-fit"
+                        className="border-default flex grow lg:w-fit"
                         style={{
                           minHeight: "38px",
                         }}
@@ -844,8 +844,8 @@ const Route = ({
                         size="sm"
                         disabled={disabled}
                         name="externalRedirectUrl"
-                        className="border-default flex flex-grow text-sm"
-                        containerClassName="flex-grow"
+                        className="border-default flex grow text-sm"
+                        containerClassName="grow"
                         type="url"
                         required
                         labelSrOnly
@@ -856,7 +856,7 @@ const Route = ({
                         placeholder="https://example.com"
                       />
                     ) : (
-                      <div className="flex-grow">
+                      <div className="grow">
                         <Select
                           size="sm"
                           required
@@ -894,8 +894,8 @@ const Route = ({
                           <>
                             <TextField
                               disabled={disabled}
-                              className="border-default flex w-full flex-grow text-sm"
-                              containerClassName="flex-grow mt-2"
+                              className="border-default flex w-full grow text-sm"
+                              containerClassName="grow mt-2"
                               addOnLeading={eventTypePrefix}
                               required
                               value={customEventTypeSlug}
diff --git a/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/RoutingLink.tsx b/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/RoutingLink.tsx
index c81cf7c2c4..f85228ebd5 100644
--- a/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/RoutingLink.tsx
+++ b/apps/web/app/(use-page-wrapper)/apps/routing-forms/[...pages]/RoutingLink.tsx
@@ -177,7 +177,7 @@ function RoutingForm({ form, profile, ...restProps }: Props) {
           <>
             <div className={classNames("mx-auto my-0 max-w-3xl", isEmbed ? "" : "md:my-24")}>
               <div className="w-full max-w-4xl ltr:mr-2 rtl:ml-2">
-                <div className="main border-booker md:border-booker-width dark:bg-muted bg-default mx-0 rounded-md p-4 py-6 sm:-mx-4 sm:px-8 ">
+                <div className="main border-booker md:border-booker-width dark:bg-cal-muted bg-default mx-0 rounded-md p-4 py-6 sm:-mx-4 sm:px-8 ">
                   <Toaster position="bottom-right" />
 
                   <form onSubmit={handleOnSubmit}>
diff --git a/apps/web/app/(use-page-wrapper)/apps/routing-forms/forms/[[...pages]]/Forms.tsx b/apps/web/app/(use-page-wrapper)/apps/routing-forms/forms/[[...pages]]/Forms.tsx
index 08f949f681..b08a18f8ae 100644
--- a/apps/web/app/(use-page-wrapper)/apps/routing-forms/forms/[[...pages]]/Forms.tsx
+++ b/apps/web/app/(use-page-wrapper)/apps/routing-forms/forms/[[...pages]]/Forms.tsx
@@ -160,7 +160,7 @@ export default function RoutingForms({ appUrl }: { appUrl: string }) {
           background="/tips/routing-forms"
           isParentLoading={<SkeletonLoaderTeamList />}
           buttons={
-            <div className="space-y-2 rtl:space-x-reverse sm:space-x-2">
+            <div className="stack-y-2 rtl:space-x-reverse sm:space-x-2">
               <ButtonGroup>
                 <Button color="primary" href={`${WEBAPP_URL}/settings/teams/new`}>
                   {t("upgrade")}
@@ -278,7 +278,7 @@ export default function RoutingForms({ appUrl }: { appUrl: string }) {
                                       action="edit"
                                       routingForm={form}
                                       color="minimal"
-                                      className="!flex"
+                                      className="flex!"
                                       StartIcon="pencil">
                                       {t("edit")}
                                     </FormAction>
diff --git a/apps/web/app/(use-page-wrapper)/availability/[schedule]/skeleton.tsx b/apps/web/app/(use-page-wrapper)/availability/[schedule]/skeleton.tsx
index 06ecc6cbc3..e49bbde887 100644
--- a/apps/web/app/(use-page-wrapper)/availability/[schedule]/skeleton.tsx
+++ b/apps/web/app/(use-page-wrapper)/availability/[schedule]/skeleton.tsx
@@ -24,7 +24,7 @@ export function AvailabilityScheduleSkeleton() {
               </div>
 
               {/* Action buttons */}
-              <div className="relative flex-shrink-0 md:relative md:bottom-auto md:right-auto">
+              <div className="relative shrink-0 md:relative md:bottom-auto md:right-auto">
                 {/* Desktop buttons - Set to Default, Delete, and Save */}
                 <div className="flex items-center justify-end">
                   {/* Set to Default - desktop only */}
@@ -99,14 +99,14 @@ export function AvailabilityScheduleSkeleton() {
                     <SkeletonText className="ml-2 h-4 w-4 rounded-full" /> {/* Info icon */}
                   </div>
                   <SkeletonText className="mb-4 mt-1 h-4 w-full max-w-md text-sm" /> {/* Description */}
-                  <div className="space-y-2">
+                  <div className="stack-y-2">
                     <SkeletonButton className="h-9 w-36 rounded-md" /> {/* Add an override button */}
                   </div>
                 </div>
               </div>
 
               {/* Sidebar - only visible on desktop */}
-              <div className="min-w-40 col-span-3 hidden space-y-2 md:block lg:col-span-1 xl:w-[25%]">
+              <div className="min-w-40 col-span-3 hidden stack-y-2 md:block lg:col-span-1 xl:w-[25%]">
                 <div className="xl:max-w-80 w-full pr-4 sm:ml-0 sm:mr-36 sm:p-0">
                   <div>
                     <SkeletonText className="mb-1 h-4 w-24 text-sm" /> {/* Timezone */}
diff --git a/apps/web/app/(use-page-wrapper)/availability/troubleshoot/layout.tsx b/apps/web/app/(use-page-wrapper)/availability/troubleshoot/layout.tsx
index 84d2e2c794..f7231895f5 100644
--- a/apps/web/app/(use-page-wrapper)/availability/troubleshoot/layout.tsx
+++ b/apps/web/app/(use-page-wrapper)/availability/troubleshoot/layout.tsx
@@ -8,7 +8,7 @@ import { Icon } from "@calcom/ui/components/icon";
 export default function TroubleshooterLayout({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <div className="flex flex-1 [&>*]:flex-1">
+      <div className="flex flex-1 *:flex-1">
         <ErrorBoundary>
           <Suspense fallback={<Icon name="loader" />}>{children}</Suspense>
         </ErrorBoundary>
diff --git a/apps/web/app/(use-page-wrapper)/event-types/[type]/skeleton.tsx b/apps/web/app/(use-page-wrapper)/event-types/[type]/skeleton.tsx
index 2f95b6ac84..57e7f4304f 100644
--- a/apps/web/app/(use-page-wrapper)/event-types/[type]/skeleton.tsx
+++ b/apps/web/app/(use-page-wrapper)/event-types/[type]/skeleton.tsx
@@ -32,8 +32,8 @@ export const EventTypeEditPageSkeleton = () => {
     <Shell subtitle={<SkeletonText className="hidden h-4 w-24" />} afterHeading={backButtonSkeleton}>
       <div className="flex flex-col xl:flex-row xl:space-x-6">
         <div className="hidden xl:block">
-          <div className="primary-navigation w-64 flex-shrink-0">
-            <div className="flex flex-col space-y-1">
+          <div className="primary-navigation w-64 shrink-0">
+            <div className="flex flex-col stack-y-1">
               {/* Tab navigation items */}
               {Array.from({ length: 8 }).map((_, index) => (
                 <div
@@ -58,14 +58,14 @@ export const EventTypeEditPageSkeleton = () => {
                 <SkeletonText className="h-8 w-full max-w-md" />
               </div>
 
-              <div className="mb-6 space-y-6">
+              <div className="mb-6 stack-y-6">
                 {/* Form fields */}
-                <div className="flex flex-col space-y-2">
+                <div className="flex flex-col stack-y-2">
                   <SkeletonText className="h-4 w-32" />
                   <SkeletonText className="h-10 w-full" />
                 </div>
 
-                <div className="flex flex-col space-y-2">
+                <div className="flex flex-col stack-y-2">
                   <SkeletonText className="h-4 w-40" />
                   <div className="flex items-center">
                     <SkeletonText className="h-10 w-full" />
@@ -73,12 +73,12 @@ export const EventTypeEditPageSkeleton = () => {
                   </div>
                 </div>
 
-                <div className="flex flex-col space-y-2">
+                <div className="flex flex-col stack-y-2">
                   <SkeletonText className="h-4 w-36" />
                   <SkeletonText className="h-24 w-full" />
                 </div>
 
-                <div className="flex flex-col space-y-2">
+                <div className="flex flex-col stack-y-2">
                   <SkeletonText className="h-4 w-28" />
                   <div className="flex items-center">
                     <SkeletonText className="h-10 w-full" />
@@ -86,7 +86,7 @@ export const EventTypeEditPageSkeleton = () => {
                   </div>
                 </div>
 
-                <div className="flex flex-col space-y-2">
+                <div className="flex flex-col stack-y-2">
                   <SkeletonText className="h-4 w-32" />
                   <SkeletonText className="h-10 w-full" />
                 </div>
diff --git a/apps/web/app/(use-page-wrapper)/insights/UpgradeTipWrapper.tsx b/apps/web/app/(use-page-wrapper)/insights/UpgradeTipWrapper.tsx
index b592580992..dec69eb3c0 100644
--- a/apps/web/app/(use-page-wrapper)/insights/UpgradeTipWrapper.tsx
+++ b/apps/web/app/(use-page-wrapper)/insights/UpgradeTipWrapper.tsx
@@ -38,7 +38,7 @@ export default function UpgradeTipWrapper({ children }: { children: React.ReactN
       features={features}
       background="/tips/insights"
       buttons={
-        <div className="space-y-2 rtl:space-x-reverse sm:space-x-2">
+        <div className="stack-y-2 rtl:space-x-reverse sm:space-x-2">
           <ButtonGroup>
             <Button color="primary" href={`${WEBAPP_URL}/settings/teams/new`}>
               {t("create_team")}
diff --git a/apps/web/app/(use-page-wrapper)/payment/[uid]/PaymentPage.tsx b/apps/web/app/(use-page-wrapper)/payment/[uid]/PaymentPage.tsx
index fa00d6efc7..d4af324163 100644
--- a/apps/web/app/(use-page-wrapper)/payment/[uid]/PaymentPage.tsx
+++ b/apps/web/app/(use-page-wrapper)/payment/[uid]/PaymentPage.tsx
@@ -109,7 +109,7 @@ const PaymentPage: FC<PaymentPageProps> = (props) => {
                 aria-modal="true"
                 aria-labelledby="modal-headline">
                 <div>
-                  <div className="bg-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
+                  <div className="bg-cal-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
                     <PayIcon currency={paymentAppData.currency} className="h-8 w-8 text-green-600" />
                   </div>
 
diff --git a/apps/web/app/(use-page-wrapper)/refer/loading.tsx b/apps/web/app/(use-page-wrapper)/refer/loading.tsx
index a05ce1f0d7..1bbd4685a0 100644
--- a/apps/web/app/(use-page-wrapper)/refer/loading.tsx
+++ b/apps/web/app/(use-page-wrapper)/refer/loading.tsx
@@ -15,7 +15,7 @@ export default function Loading() {
           <SkeletonText className="h-5 w-32" />
         </div>
 
-        <div className="mb-6 space-y-2">
+        <div className="mb-6 stack-y-2">
           <SkeletonText className="h-7 w-3/4" />
           <SkeletonText className="h-7 w-1/2" />
         </div>
diff --git a/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/AdminLayoutAppDirClient.tsx b/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/AdminLayoutAppDirClient.tsx
index ddb31c52a5..8a652a29e8 100644
--- a/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/AdminLayoutAppDirClient.tsx
+++ b/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/AdminLayoutAppDirClient.tsx
@@ -18,7 +18,7 @@ export default function AdminLayoutAppDirClient({ children }: AdminLayoutProps)
   const isAppsPage = pathname?.startsWith("/settings/admin/apps");
   return (
     <div className="divide-subtle bg-default mx-auto flex max-w-4xl flex-row divide-y">
-      <div className={isAppsPage ? "min-w-0" : "flex flex-1 [&>*]:flex-1"}>
+      <div className={isAppsPage ? "min-w-0" : "flex flex-1 *:flex-1"}>
         <ErrorBoundary>{children}</ErrorBoundary>
       </div>
     </div>
diff --git a/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/bookings-by-hour/page.tsx b/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/bookings-by-hour/page.tsx
index c0b7bc8093..5a2db6f7fb 100644
--- a/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/bookings-by-hour/page.tsx
+++ b/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/bookings-by-hour/page.tsx
@@ -35,7 +35,7 @@ const sampleBookingsByHourStats = [
 export default function BookingsByHourPlayground() {
   const { t } = useLocale();
   return (
-    <div className="space-y-6 p-6">
+    <div className="stack-y-6 p-6">
       <div className="mb-6">
         <h1 className="text-3xl font-bold">Bookings by Hour Playground</h1>
         <p className="mt-2 text-gray-600">
diff --git a/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/routing-funnel/page.tsx b/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/routing-funnel/page.tsx
index ba92702cf1..e48bb20ddb 100644
--- a/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/routing-funnel/page.tsx
+++ b/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/routing-funnel/page.tsx
@@ -56,7 +56,7 @@ const sampleRoutingFunnelData = [
 export default function RoutingFunnelPlayground() {
   const { t } = useLocale();
   return (
-    <div className="space-y-6 p-6">
+    <div className="stack-y-6 p-6">
       <div className="mb-6">
         <h1 className="text-3xl font-bold">Routing Funnel Playground</h1>
         <p className="mt-2 text-gray-600">
diff --git a/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/weekly-calendar/page.tsx b/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/weekly-calendar/page.tsx
index 9e3b3f08a8..2a2ac73062 100644
--- a/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/weekly-calendar/page.tsx
+++ b/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/playground/weekly-calendar/page.tsx
@@ -512,7 +512,7 @@ function ScenarioCard({ scenario }: { scenario: Scenario }) {
 
 export default function WeeklyCalendarPlayground() {
   return (
-    <div className="space-y-8 p-6">
+    <div className="stack-y-8 p-6">
       <div>
         <h1 className="text-3xl font-bold">Weekly Calendar Playground</h1>
         <p className="text-subtle mt-2">
@@ -522,7 +522,7 @@ export default function WeeklyCalendarPlayground() {
       </div>
 
       {/* Grid View of All Scenarios */}
-      <div className="space-y-8">
+      <div className="stack-y-8">
         <h2 className="mb-4 text-2xl font-bold">All Scenarios (Side-by-Side)</h2>
         {scenarios.map((scenario, index) => (
           <ScenarioCard key={index} scenario={scenario} />
@@ -532,7 +532,7 @@ export default function WeeklyCalendarPlayground() {
       {/* Testing Checklist */}
       <div className="border-subtle rounded-lg border p-6">
         <h2 className="mb-4 text-xl font-bold">Testing Checklist</h2>
-        <ul className="text-subtle space-y-2 text-sm">
+        <ul className="text-subtle stack-y-2 text-sm">
           <li>✓ Visual appearance matches expectations (80% width with 8% cascading offsets)</li>
           <li>✓ Hover behavior works smoothly - hovered event appears topmost</li>
           <li>✓ No visual glitches with 3+ overlapping events</li>
diff --git a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx
index a719de6010..674fa89970 100644
--- a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx
+++ b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/SettingsLayoutAppDirClient.tsx
@@ -446,13 +446,13 @@ const TeamListCollapsible = ({ teamFeatures }: { teamFeatures?: Record<number, T
                     )}
                   </button>
                 </CollapsibleTrigger>
-                <CollapsibleContent className="space-y-0.5" id={`team-content-${team.id}`}>
+                <CollapsibleContent className="stack-y-0.5" id={`team-content-${team.id}`}>
                   {team.accepted && (
                     <VerticalTabItem
                       name={t("profile")}
                       href={`/settings/teams/${team.id}/profile`}
                       textClassNames="px-3 text-emphasis font-medium text-sm"
-                      className="me-5 h-7 w-auto !px-2"
+                      className="me-5 h-7 w-auto px-2!"
                       disableChevron
                     />
                   )}
@@ -460,7 +460,7 @@ const TeamListCollapsible = ({ teamFeatures }: { teamFeatures?: Record<number, T
                     name={t("members")}
                     href={`/settings/teams/${team.id}/members`}
                     textClassNames="px-3 text-emphasis font-medium text-sm"
-                    className="me-5 h-7 w-auto !px-2"
+                    className="me-5 h-7 w-auto px-2!"
                     disableChevron
                   />
                   {/* Show roles only for sub-teams with PBAC-enabled parent */}
@@ -481,7 +481,7 @@ const TeamListCollapsible = ({ teamFeatures }: { teamFeatures?: Record<number, T
                         name={t("appearance")}
                         href={`/settings/teams/${team.id}/appearance`}
                         textClassNames="px-3 text-emphasis font-medium text-sm"
-                        className="me-5 h-7 w-auto !px-2"
+                        className="me-5 h-7 w-auto px-2!"
                         disableChevron
                       />
                       {/* Hide if there is a parent ID */}
@@ -491,7 +491,7 @@ const TeamListCollapsible = ({ teamFeatures }: { teamFeatures?: Record<number, T
                             name={t("billing")}
                             href={`/settings/teams/${team.id}/billing`}
                             textClassNames="px-3 text-emphasis font-medium text-sm"
-                            className="me-5 h-7 w-auto !px-2"
+                            className="me-5 h-7 w-auto px-2!"
                             disableChevron
                           />
                         </>
@@ -500,7 +500,7 @@ const TeamListCollapsible = ({ teamFeatures }: { teamFeatures?: Record<number, T
                         name={t("settings")}
                         href={`/settings/teams/${team.id}/settings`}
                         textClassNames="px-3 text-emphasis font-medium text-sm"
-                        className="me-5 h-7 w-auto !px-2"
+                        className="me-5 h-7 w-auto px-2!"
                         disableChevron
                       />
                     </>
@@ -578,7 +578,7 @@ const SettingsSidebarContainer = ({
     <nav
       style={{ maxHeight: `calc(100vh - ${bannersHeight}px)`, top: `${bannersHeight}px` }}
       className={classNames(
-        "no-scrollbar bg-muted fixed bottom-0 left-0 top-0 z-20 flex max-h-screen w-56 flex-col space-y-1 overflow-x-hidden overflow-y-scroll px-2 pb-3 transition-transform max-lg:z-10 lg:sticky lg:flex",
+        "no-scrollbar bg-cal-muted fixed bottom-0 left-0 top-0 z-20 flex max-h-screen w-56 flex-col stack-y-1 overflow-x-hidden overflow-y-scroll px-2 pb-3 transition-transform max-lg:z-10 lg:sticky lg:flex",
         className,
         navigationIsOpenedOnMobile
           ? "translate-x-0 opacity-100"
@@ -592,7 +592,7 @@ const SettingsSidebarContainer = ({
             <React.Fragment key={tab.href}>
               {!["teams", "other_teams"].includes(tab.name) && (
                 <React.Fragment key={tab.href}>
-                  <div className={`${!tab.children?.length ? "!mb-3" : ""}`}>
+                  <div className={`${!tab.children?.length ? "mb-3!" : ""}`}>
                     <div className="[&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis text-default group flex h-7 w-full flex-row items-center rounded-md px-2 text-sm font-medium leading-none">
                       {tab && tab.icon && (
                         <Icon
@@ -618,7 +618,7 @@ const SettingsSidebarContainer = ({
                       </Skeleton>
                     </div>
                   </div>
-                  <div className="my-3 space-y-px">
+                  <div className="stack-y-px">
                     {tab.children?.map((child, index) => (
                       <div key={child.href} className="flex items-start gap-2">
                         <VerticalTabItem
@@ -626,8 +626,8 @@ const SettingsSidebarContainer = ({
                           isExternalLink={child.isExternalLink}
                           href={child.href || "/"}
                           textClassNames="text-emphasis font-medium text-sm"
-                          className={`h-7 w-fit !px-2 ${
-                            tab.children && index === tab.children?.length - 1 && "!mb-3"
+                          className={`h-7 w-fit px-2! ${
+                            tab.children && index === tab.children?.length - 1 && "mb-3!"
                           }`}
                           disableChevron
                         />
@@ -668,7 +668,7 @@ const SettingsSidebarContainer = ({
                         name={t("add_a_team")}
                         href={`${WEBAPP_URL}/settings/teams/new`}
                         textClassNames="px-3 items-center mt-2 text-emphasis font-medium text-sm"
-                        className="me-5 h-7 w-auto !px-2"
+                        className="me-5 h-7 w-auto px-2!"
                         icon="plus"
                         disableChevron
                       />
@@ -766,20 +766,20 @@ const SettingsSidebarContainer = ({
                                 </button>
                               </CollapsibleTrigger>
                               <CollapsibleContent
-                                className="space-y-0.5"
+                                className="stack-y-0.5"
                                 id={`other-team-content-${otherTeam.id}`}>
                                 <VerticalTabItem
                                   name={t("profile")}
                                   href={`/settings/organizations/teams/other/${otherTeam.id}/profile`}
                                   textClassNames="px-3 text-emphasis font-medium text-sm"
-                                  className="me-5 h-7 w-auto !px-2"
+                                  className="me-5 h-7 w-auto px-2!"
                                   disableChevron
                                 />
                                 <VerticalTabItem
                                   name={t("members")}
                                   href={`/settings/organizations/teams/other/${otherTeam.id}/members`}
                                   textClassNames="px-3 text-emphasis font-medium text-sm"
-                                  className="me-5 h-7 w-auto !px-2"
+                                  className="me-5 h-7 w-auto px-2!"
                                   disableChevron
                                 />
                                 <>
@@ -812,7 +812,7 @@ const MobileSettingsContainer = (props: { onSideContainerOpen?: () => void }) =>
 
   return (
     <>
-      <nav className="bg-muted border-muted sticky top-0 z-20 flex w-full items-center justify-between border-b px-2 py-2 sm:relative lg:hidden">
+      <nav className="bg-cal-muted border-muted sticky top-0 z-20 flex w-full items-center justify-between border-b px-2 py-2 sm:relative lg:hidden">
         <div className="flex items-center space-x-3">
           <Button StartIcon="menu" color="minimal" variant="icon" onClick={props.onSideContainerOpen}>
             <span className="sr-only">{t("show_navigation")}</span>
@@ -881,7 +881,7 @@ export default function SettingsLayoutAppDirClient({
       TopNavContainer={
         <MobileSettingsContainer onSideContainerOpen={() => setSideContainerOpen(!sideContainerOpen)} />
       }>
-      <div className="flex flex-1 [&>*]:flex-1">
+      <div className="flex flex-1 *:flex-1">
         <div
           className={classNames("mx-auto max-w-full justify-center lg:max-w-3xl", rest.containerClassName)}>
           <ErrorBoundary>{children}</ErrorBoundary>
diff --git a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/AdvancedPermissionGroup.tsx b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/AdvancedPermissionGroup.tsx
index 7ff65fc084..2c7851d068 100644
--- a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/AdvancedPermissionGroup.tsx
+++ b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/AdvancedPermissionGroup.tsx
@@ -87,7 +87,7 @@ export function AdvancedPermissionGroup({
   };
 
   return (
-    <div className="bg-muted border-subtle mb-2 rounded-xl border">
+    <div className="bg-cal-muted border-subtle mb-2 rounded-xl border">
       <button
         type="button"
         className="flex cursor-pointer items-center justify-between gap-1.5 p-4"
diff --git a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/PbacOptInModal.tsx b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/PbacOptInModal.tsx
index efaea77903..373a9de136 100644
--- a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/PbacOptInModal.tsx
+++ b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/PbacOptInModal.tsx
@@ -56,7 +56,7 @@ export function PbacOptInModal({ open, onOpenChange, revalidateRolesPath }: Pbac
             </div>
           </div>
 
-          <div className="bg-subtle w-full space-y-px overflow-hidden rounded-xl border border-gray-200">
+          <div className="bg-subtle border-subtle w-full stack-y-px overflow-hidden rounded-xl border">
             <div className="bg-default flex gap-3 p-3">
               <div className="bg-subtle flex h-8 w-8 shrink-0 items-center justify-center rounded-md">
                 <Icon name="shield-check" className="text-subtle h-5 w-5" />
diff --git a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/RoleColorPicker.tsx b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/RoleColorPicker.tsx
index 20e6a72aba..9f8daada10 100644
--- a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/RoleColorPicker.tsx
+++ b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/RoleColorPicker.tsx
@@ -33,7 +33,7 @@ export default function RoleColorPicker({ value, onChange, disabled }: RoleColor
         type="button"
         onClick={handleColorSquareClick}
         disabled={disabled}
-        className="bg-default text-default border-default hover:bg-muted hover:text-emphasis focus:bg-subtle focus-visible:shadow-outline-gray-focused shadow-outline-gray-rested enabled:hover:shadow-outline-gray-hover enabled:active:shadow-outline-gray-active flex h-8 w-8 items-center justify-center gap-2 rounded-[10px] border text-sm transition-shadow duration-200 focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50">
+        className="bg-default text-default border-default hover:bg-cal-muted hover:text-emphasis focus:bg-subtle focus-visible:shadow-outline-gray-focused shadow-outline-gray-rested enabled:hover:shadow-outline-gray-hover enabled:active:shadow-outline-gray-active flex h-8 w-8 items-center justify-center gap-2 rounded-[10px] border text-sm transition-shadow duration-200 focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50">
         <div
           className="h-5 w-5 rounded border shadow-sm"
           style={{ backgroundColor: value }}
diff --git a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/RoleSheet.tsx b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/RoleSheet.tsx
index f40754dd16..7d530280a8 100644
--- a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/RoleSheet.tsx
+++ b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/RoleSheet.tsx
@@ -183,7 +183,7 @@ export function RoleSheet({
           </SheetTitle>
         </SheetHeader>
         <Form form={form} handleSubmit={onSubmit}>
-          <div className="space-y-4 py-5">
+          <div className="stack-y-4 py-5">
             <div className="flex items-end justify-end gap-2">
               <div className="flex-1">
                 <TextField
@@ -203,7 +203,7 @@ export function RoleSheet({
 
             <div className="">
               {isAdvancedMode ? (
-                <div className="space-y-4">
+                <div className="stack-y-4">
                   <div>
                     <div className="mb-2 flex items-center justify-between">
                       <Label className="mb-0">{t("permissions")}</Label>
@@ -239,7 +239,7 @@ export function RoleSheet({
                   ))}{" "}
                 </div>
               ) : (
-                <div className="bg-muted rounded-xl p-1">
+                <div className="bg-cal-muted rounded-xl p-1">
                   <div className="flex items-center justify-between px-3 py-2">
                     <Label>{t("permissions")}</Label>
                     <div className="flex items-center gap-2">
diff --git a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/RolesList.tsx b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/RolesList.tsx
index 8ebde70433..df3a8d2eaf 100644
--- a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/RolesList.tsx
+++ b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/RolesList.tsx
@@ -71,7 +71,7 @@ export function RolesList({
   return (
     <>
       <div className="mt-4">
-        <div className="bg-muted border-muted flex flex-col rounded-xl border p-[1px]">
+        <div className="bg-cal-muted border-muted flex flex-col rounded-xl border p-px">
           {/* Roles list header */}
           <div className="px-5 py-4">
             <h2 className="text-default text-sm font-semibold leading-none">{t("role")}</h2>
diff --git a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/RolesSkeletonLoader.tsx b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/RolesSkeletonLoader.tsx
index fd2ca2028b..b7c06810c8 100644
--- a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/RolesSkeletonLoader.tsx
+++ b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/roles/_components/RolesSkeletonLoader.tsx
@@ -7,7 +7,7 @@ export const SkeletonLoader = () => {
   const { t } = useLocale();
   return (
     <div className="mt-4">
-      <div className="bg-muted border-muted flex flex-col rounded-xl border p-[1px]">
+      <div className="bg-cal-muted border-muted flex flex-col rounded-xl border p-px">
         {/* Roles list header */}
         <div className="px-5 py-4">
           <h2 className="text-default text-sm font-semibold leading-none">{t("role")}</h2>
diff --git a/apps/web/app/(use-page-wrapper)/settings/organizations/(org-user-only)/members/layout.tsx b/apps/web/app/(use-page-wrapper)/settings/organizations/(org-user-only)/members/layout.tsx
index deb88ac86d..a0b47de93f 100644
--- a/apps/web/app/(use-page-wrapper)/settings/organizations/(org-user-only)/members/layout.tsx
+++ b/apps/web/app/(use-page-wrapper)/settings/organizations/(org-user-only)/members/layout.tsx
@@ -8,7 +8,7 @@ export default async function Layout({ children }: { children: React.ReactNode }
   const t = await getTranslate();
 
   return (
-    <SettingsLayoutAppDirClient containerClassName="lg:max-w-screen-2xl">
+    <SettingsLayoutAppDirClient containerClassName="lg:max-w-(--breakpoint-2xl)">
       <SettingsHeader
         title={t("organization_members")}
         description={t("organization_description")}
diff --git a/apps/web/app/icons/page.tsx b/apps/web/app/icons/page.tsx
index affa5915e7..b15b850488 100644
--- a/apps/web/app/icons/page.tsx
+++ b/apps/web/app/icons/page.tsx
@@ -15,7 +15,7 @@ export async function generateMetadata(): Promise<Metadata> {
   return await _generateMetadataForStaticPage("Icons Showcase", "", undefined, undefined, "/icons");
 }
 
-const interFont = Inter({ subsets: ["latin"], variable: "--font-inter", preload: true, display: "swap" });
+const interFont = Inter({ subsets: ["latin"], variable: "--font-sans", preload: true, display: "swap" });
 const calFont = localFont({
   src: "../../fonts/CalSans-SemiBold.woff2",
   variable: "--font-cal",
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 3683e26aa8..98a85314a8 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -15,7 +15,7 @@ import { AppRouterI18nProvider } from "./AppRouterI18nProvider";
 import { SpeculationRules } from "./SpeculationRules";
 import { Providers } from "./providers";
 
-const interFont = Inter({ subsets: ["latin"], variable: "--font-inter", preload: true, display: "swap" });
+const interFont = Inter({ subsets: ["latin"], variable: "--font-sans", preload: true, display: "swap" });
 const calFont = localFont({
   src: "../fonts/CalSans-SemiBold.woff2",
   variable: "--font-cal",
@@ -115,8 +115,8 @@ export default async function RootLayout({ children }: { children: React.ReactNo
       <head nonce={nonce}>
         <style>{`
           :root {
-            --font-inter: ${interFont.style.fontFamily.replace(/'/g, "")};
-            --font-cal: ${calFont.style.fontFamily.replace(/'/g, "")};
+            --font-sans: ${interFont.style.fontFamily.replace(/\'/g, "")};
+            --font-cal: ${calFont.style.fontFamily.replace(/\'/g, "")};
           }
         `}</style>
       </head>
@@ -125,19 +125,19 @@ export default async function RootLayout({ children }: { children: React.ReactNo
         style={
           isEmbed
             ? {
-              background: "transparent",
-              // Keep the embed hidden till parent initializes and
-              // - gives it the appropriate styles if UI instruction is there.
-              // - gives iframe the appropriate height(equal to document height) which can only be known after loading the page once in browser.
-              // - Tells iframe which mode it should be in (dark/light) - if there is a a UI instruction for that
-              visibility: "hidden",
-              // This in addition to visibility: hidden is to ensure that elements with specific opacity set are not visible
-              opacity: 0,
-            }
+                background: "transparent",
+                // Keep the embed hidden till parent initializes and
+                // - gives it the appropriate styles if UI instruction is there.
+                // - gives iframe the appropriate height(equal to document height) which can only be known after loading the page once in browser.
+                // - Tells iframe which mode it should be in (dark/light) - if there is a a UI instruction for that
+                visibility: "hidden",
+                // This in addition to visibility: hidden is to ensure that elements with specific opacity set are not visible
+                opacity: 0,
+              }
             : {
-              visibility: "visible",
-              opacity: 1,
-            }
+                visibility: "visible",
+                opacity: 1,
+              }
         }>
         <IconSprites />
         <SpeculationRules
diff --git a/apps/web/app/notFoundClient.tsx b/apps/web/app/notFoundClient.tsx
index 0b7173ba09..7e3d44875a 100644
--- a/apps/web/app/notFoundClient.tsx
+++ b/apps/web/app/notFoundClient.tsx
@@ -145,7 +145,7 @@ export function NotFound({ host }: { host: string }) {
                   target="_blank"
                   className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse"
                   rel="noreferrer">
-                  <div className="flex-shrink-0">
+                  <div className="shrink-0">
                     <span className="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50">
                       <Icon name="check" className="h-6 w-6 text-green-500" aria-hidden="true" />
                     </span>
@@ -164,7 +164,7 @@ export function NotFound({ host }: { host: string }) {
                     </h3>
                     <p className="text-subtle text-base">{t(`404_claim_entity_${pageType.toLowerCase()}`)}</p>
                   </div>
-                  <div className="flex-shrink-0 self-center">
+                  <div className="shrink-0 self-center">
                     <Icon name="chevron-right" className="text-muted h-5 w-5" aria-hidden="true" />
                   </div>
                 </a>
@@ -180,8 +180,8 @@ export function NotFound({ host }: { host: string }) {
                   <a
                     href={link.href}
                     className="relative flex items-start space-x-4 py-6 rtl:space-x-reverse">
-                    <div className="flex-shrink-0">
-                      <span className="bg-muted flex h-12 w-12 items-center justify-center rounded-lg">
+                    <div className="shrink-0">
+                      <span className="bg-cal-muted flex h-12 w-12 items-center justify-center rounded-lg">
                         <Icon name={link.icon} className="text-default h-6 w-6" aria-hidden="true" />
                       </span>
                     </div>
@@ -194,7 +194,7 @@ export function NotFound({ host }: { host: string }) {
                       </h3>
                       <p className="text-subtle text-base">{link.description}</p>
                     </div>
-                    <div className="flex-shrink-0 self-center">
+                    <div className="shrink-0 self-center">
                       <Icon name="chevron-right" className="text-muted h-5 w-5" aria-hidden="true" />
                     </div>
                   </a>
diff --git a/apps/web/components/AddToHomescreen.tsx b/apps/web/components/AddToHomescreen.tsx
index 6a52582190..e3020c4e35 100644
--- a/apps/web/components/AddToHomescreen.tsx
+++ b/apps/web/components/AddToHomescreen.tsx
@@ -18,7 +18,7 @@ export default function AddToHomescreen() {
         <div className="rounded-lg p-2 shadow-lg sm:p-3" style={{ background: "#2F333D" }}>
           <div className="flex flex-wrap items-center justify-between">
             <div className="flex w-0 flex-1 items-center">
-              <span className="bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast flex rounded-lg bg-opacity-30 p-2">
+              <span className="bg-brand/30 text-brandcontrast dark:bg-darkmodebrand/30 dark:text-darkmodebrandcontrast flex rounded-lg p-2">
                 <svg
                   className="h-7 w-7 fill-current text-[#5B93F9]"
                   xmlns="http://www.w3.org/2000/svg"
@@ -34,7 +34,7 @@ export default function AddToHomescreen() {
               </p>
             </div>
 
-            <div className="order-2 flex-shrink-0 sm:order-3">
+            <div className="order-2 shrink-0 sm:order-3">
               <button
                 onClick={() => setCloseBanner(true)}
                 type="button"
diff --git a/apps/web/components/EnterprisePage.tsx b/apps/web/components/EnterprisePage.tsx
index 933640cbbf..13bd152779 100644
--- a/apps/web/components/EnterprisePage.tsx
+++ b/apps/web/components/EnterprisePage.tsx
@@ -52,7 +52,7 @@ export default function EnterprisePage() {
           features={features}
           background="/tips/enterprise"
           buttons={
-            <div className="space-y-2 rtl:space-x-reverse sm:space-x-2">
+            <div className="stack-y-2 rtl:space-x-reverse sm:space-x-2">
               <ButtonGroup>
                 <Button color="primary" href="https://go.cal.com/quote" target="_blank">
                   {t("contact_sales")}
diff --git a/apps/web/components/PageWrapper.tsx b/apps/web/components/PageWrapper.tsx
index 238d2f982f..027ff2bc73 100644
--- a/apps/web/components/PageWrapper.tsx
+++ b/apps/web/components/PageWrapper.tsx
@@ -24,7 +24,7 @@ export interface CalPageWrapper {
   PageWrapper?: AppProps["Component"]["PageWrapper"];
 }
 
-const interFont = Inter({ subsets: ["latin"], variable: "--font-inter", preload: true, display: "swap" });
+const interFont = Inter({ subsets: ["latin"], variable: "--font-sans", preload: true, display: "swap" });
 const calFont = localFont({
   src: "../fonts/CalSans-SemiBold.woff2",
   variable: "--font-cal",
@@ -80,7 +80,7 @@ function PageWrapper(props: AppProps) {
 
       <style jsx global>{`
         :root {
-          --font-inter: ${interFont.style.fontFamily};
+          --font-sans: ${interFont.style.fontFamily};
           --font-cal: ${calFont.style.fontFamily};
         }
       `}</style>
diff --git a/apps/web/components/apps/AppPage.tsx b/apps/web/components/apps/AppPage.tsx
index b86c14b9d4..b8f35d09ba 100644
--- a/apps/web/components/apps/AppPage.tsx
+++ b/apps/web/components/apps/AppPage.tsx
@@ -497,7 +497,7 @@ export const AppPage = ({
           )}
         </ul>
         <hr className="border-subtle my-8 border" />
-        <span className="leading-1 text-subtle block text-xs">
+        <span className="text-subtle block text-xs">
           {t("every_app_published", { appName: APP_NAME, companyName: COMPANY_NAME })}
         </span>
         <a className="mt-2 block text-xs text-red-500" href={`mailto:${SUPPORT_MAIL_ADDRESS}`}>
diff --git a/apps/web/components/apps/applecalendar/Setup.tsx b/apps/web/components/apps/applecalendar/Setup.tsx
index 5b56842eaf..c59481f96f 100644
--- a/apps/web/components/apps/applecalendar/Setup.tsx
+++ b/apps/web/components/apps/applecalendar/Setup.tsx
@@ -25,8 +25,8 @@ export default function AppleCalendarSetup() {
 
   return (
     <div className="bg-emphasis flex h-screen dark:bg-inherit">
-      <div className="bg-default dark:bg-muted border-subtle m-auto rounded p-5 dark:border md:w-[560px] md:p-10">
-        <div className="flex flex-col space-y-5 md:flex-row md:space-x-5 md:space-y-0">
+      <div className="bg-default dark:bg-cal-muted border-subtle m-auto rounded p-5 dark:border md:w-[560px] md:p-10">
+        <div className="flex flex-col stack-y-5 md:flex-row md:space-x-5 md:stack-y-0">
           <div>
             {/* eslint-disable @next/next/no-img-element */}
             <img
@@ -75,7 +75,7 @@ export default function AppleCalendarSetup() {
                   }
                 }}>
                 <fieldset
-                  className="space-y-4"
+                  className="stack-y-4"
                   disabled={form.formState.isSubmitting}
                   data-testid="apple-calendar-form">
                   <TextField
diff --git a/apps/web/components/apps/btcpayserver/Setup.tsx b/apps/web/components/apps/btcpayserver/Setup.tsx
index b084cea686..3ebc2f0f6c 100644
--- a/apps/web/components/apps/btcpayserver/Setup.tsx
+++ b/apps/web/components/apps/btcpayserver/Setup.tsx
@@ -249,13 +249,13 @@ function BTCPaySetupPage(props: IBTCPaySetupProps) {
     <>
       <div className="bg-default flex h-screen items-center justify-center">
         {showContent ? (
-          <div className="flex w-full w-full max-w-[43em] flex-col items-center justify-center space-y-4 p-4 lg:space-y-5">
-            <form className="w-full space-y-4" onSubmit={onSubmit}>
+          <div className="flex w-full w-full max-w-[43em] flex-col items-center justify-center stack-y-4 p-4 lg:stack-y-5">
+            <form className="w-full stack-y-4" onSubmit={onSubmit}>
               <div className="bg-default border-subtle overflow-auto rounded border">
-                <div className="border-subtle flex items-center justify-between border-b-[1px] p-4 md:p-5">
+                <div className="border-subtle flex items-center justify-between border-b p-4 md:p-5">
                   <h2 className="text-2xl font-semibold">BTCPay Server Information</h2>
                 </div>
-                <div className="w-full space-y-4 p-4 md:p-5">
+                <div className="w-full stack-y-4 p-4 md:p-5">
                   <div className="w-full">
                     <KeyField
                       {...register("serverUrl", { required: true })}
diff --git a/apps/web/components/apps/caldavcalendar/Setup.tsx b/apps/web/components/apps/caldavcalendar/Setup.tsx
index b1f855ffe4..6b1c3a1ccb 100644
--- a/apps/web/components/apps/caldavcalendar/Setup.tsx
+++ b/apps/web/components/apps/caldavcalendar/Setup.tsx
@@ -26,7 +26,7 @@ export default function CalDavCalendarSetup() {
   return (
     <div className="bg-emphasis flex h-screen">
       <div className="bg-default m-auto rounded p-5 md:w-[560px] md:p-10">
-        <div className="flex flex-col space-y-5 md:flex-row md:space-x-5 md:space-y-0">
+        <div className="flex flex-col stack-y-5 md:flex-row md:space-x-5 md:stack-y-0">
           <div>
             {/* eslint-disable @next/next/no-img-element */}
             <img
@@ -60,7 +60,7 @@ export default function CalDavCalendarSetup() {
                     router.push(json.url);
                   }
                 }}>
-                <fieldset className="space-y-2" disabled={form.formState.isSubmitting}>
+                <fieldset className="stack-y-2" disabled={form.formState.isSubmitting}>
                   <TextField
                     required
                     type="text"
@@ -95,7 +95,7 @@ export default function CalDavCalendarSetup() {
                           href={errorActionUrl}
                           color="secondary"
                           target="_blank"
-                          className="ml-5 w-32 !p-5">
+                          className="ml-5 w-32 p-5!">
                           Go to Admin
                         </Button>
                       ) : undefined
diff --git a/apps/web/components/apps/exchange2013calendar/Setup.tsx b/apps/web/components/apps/exchange2013calendar/Setup.tsx
index ae5a24f67e..2300b67c81 100644
--- a/apps/web/components/apps/exchange2013calendar/Setup.tsx
+++ b/apps/web/components/apps/exchange2013calendar/Setup.tsx
@@ -54,7 +54,7 @@ export default function Exchange2013CalendarSetup() {
                   router.push(json.url);
                 }
               }}>
-              <fieldset className="space-y-2" disabled={form.formState.isSubmitting}>
+              <fieldset className="stack-y-2" disabled={form.formState.isSubmitting}>
                 <TextField
                   required
                   type="text"
diff --git a/apps/web/components/apps/exchange2016calendar/Setup.tsx b/apps/web/components/apps/exchange2016calendar/Setup.tsx
index 4b37e06767..3290edbb46 100644
--- a/apps/web/components/apps/exchange2016calendar/Setup.tsx
+++ b/apps/web/components/apps/exchange2016calendar/Setup.tsx
@@ -54,7 +54,7 @@ export default function Exchange2016CalendarSetup() {
                   router.push(json.url);
                 }
               }}>
-              <fieldset className="space-y-2" disabled={form.formState.isSubmitting}>
+              <fieldset className="stack-y-2" disabled={form.formState.isSubmitting}>
                 <TextField
                   required
                   type="text"
diff --git a/apps/web/components/apps/exchangecalendar/Setup.tsx b/apps/web/components/apps/exchangecalendar/Setup.tsx
index e9d2cb2076..f8e3b24e24 100644
--- a/apps/web/components/apps/exchangecalendar/Setup.tsx
+++ b/apps/web/components/apps/exchangecalendar/Setup.tsx
@@ -67,7 +67,7 @@ export default function ExchangeSetup() {
     <>
       <div className="bg-emphasis flex h-screen">
         <div className="bg-default m-auto rounded p-5 md:w-[560px] md:p-10">
-          <div className="flex flex-col space-y-5 md:flex-row md:space-x-5 md:space-y-0">
+          <div className="flex flex-col stack-y-5 md:flex-row md:space-x-5 md:stack-y-0">
             <div>
               {/* eslint-disable @next/next/no-img-element */}
               <img
@@ -98,7 +98,7 @@ export default function ExchangeSetup() {
                       router.push(json.url);
                     }
                   }}>
-                  <fieldset className="space-y-4" disabled={form.formState.isSubmitting}>
+                  <fieldset className="stack-y-4" disabled={form.formState.isSubmitting}>
                     <TextField
                       required
                       type="url"
diff --git a/apps/web/components/apps/hitpay/Setup.tsx b/apps/web/components/apps/hitpay/Setup.tsx
index 7d3a0b2e40..ae12d39dcc 100644
--- a/apps/web/components/apps/hitpay/Setup.tsx
+++ b/apps/web/components/apps/hitpay/Setup.tsx
@@ -203,15 +203,15 @@ function HitPaySetupPage(props: IHitPaySetupProps) {
     <>
       <div className="bg-default flex h-screen items-center justify-center">
         {showContent ? (
-          <div className="flex w-full w-full max-w-[43em] flex-col items-center justify-center space-y-4 p-4 lg:space-y-5">
+          <div className="flex w-full w-full max-w-[43em] flex-col items-center justify-center stack-y-4 p-4 lg:stack-y-5">
             <div className="rounded bg-blue-50 p-3 text-sm text-blue-700 dark:bg-blue-950 dark:text-blue-300">
               <Icon name="info" className="mb-0.5 inline-flex h-4 w-4" /> Create or connect to an existing
               HitPay account to receive payments for your paid bookings.
             </div>
 
-            <form className="w-full space-y-4" onSubmit={onSubmit}>
+            <form className="w-full stack-y-4" onSubmit={onSubmit}>
               <div className="bg-default border-subtle overflow-auto rounded border">
-                <div className="border-subtle flex items-center justify-between border-b-[1px] p-4 md:p-5">
+                <div className="border-subtle flex items-center justify-between border-b p-4 md:p-5">
                   <h2 className="text-2xl font-semibold">Account Information</h2>
                   <div className="ml-auto flex items-center">
                     <Switch
@@ -221,7 +221,7 @@ function HitPaySetupPage(props: IHitPaySetupProps) {
                     />
                   </div>
                 </div>
-                <div className="w-full space-y-4 p-4 md:p-5">
+                <div className="w-full stack-y-4 p-4 md:p-5">
                   <div className="w-full">
                     <KeyField
                       {...register("apiKey", {
diff --git a/apps/web/components/apps/ics-feedcalendar/Setup.tsx b/apps/web/components/apps/ics-feedcalendar/Setup.tsx
index 3990b3b24b..74c950c2ea 100644
--- a/apps/web/components/apps/ics-feedcalendar/Setup.tsx
+++ b/apps/web/components/apps/ics-feedcalendar/Setup.tsx
@@ -24,7 +24,7 @@ export default function ICSFeedSetup() {
   return (
     <div className="bg-emphasis flex h-screen">
       <div className="bg-default m-auto rounded p-5 md:w-[560px] md:p-10">
-        <div className="flex flex-col space-y-5 md:flex-row md:space-x-5 md:space-y-0">
+        <div className="flex flex-col stack-y-5 md:flex-row md:space-x-5 md:stack-y-0">
           <div>
             {/* eslint-disable @next/next/no-img-element */}
             <img
@@ -58,7 +58,7 @@ export default function ICSFeedSetup() {
                     router.push(json.url);
                   }
                 }}>
-                <fieldset className="space-y-2" disabled={form.formState.isSubmitting}>
+                <fieldset className="stack-y-2" disabled={form.formState.isSubmitting}>
                   {urls.map((url, i) => (
                     <div key={i} className="flex w-full items-center gap-2">
                       <TextField
@@ -104,7 +104,7 @@ export default function ICSFeedSetup() {
                           href={errorActionUrl}
                           color="secondary"
                           target="_blank"
-                          className="ml-5 w-32 !p-5">
+                          className="ml-5 w-32 p-5!">
                           Go to Admin
                         </Button>
                       ) : undefined
diff --git a/apps/web/components/apps/installation/AccountsStepCard.tsx b/apps/web/components/apps/installation/AccountsStepCard.tsx
index 59eeddb1a6..9948d8a354 100644
--- a/apps/web/components/apps/installation/AccountsStepCard.tsx
+++ b/apps/web/components/apps/installation/AccountsStepCard.tsx
@@ -42,9 +42,9 @@ const AccountSelector: FC<AccountSelectorProps> = ({
   return (
     <div
       className={classNames(
-        "hover:bg-muted flex cursor-pointer flex-row items-center gap-2 p-1",
+        "hover:bg-cal-muted flex cursor-pointer flex-row items-center gap-2 p-1",
         (alreadyInstalled || loading) && "cursor-not-allowed",
-        selected && loading && "bg-muted animate-pulse"
+        selected && loading && "bg-cal-muted animate-pulse"
       )}
       data-testid={testId}
       onClick={() => {
diff --git a/apps/web/components/apps/installation/ConfigureStepCard.tsx b/apps/web/components/apps/installation/ConfigureStepCard.tsx
index 21dea8b9c3..bddc23e965 100644
--- a/apps/web/components/apps/installation/ConfigureStepCard.tsx
+++ b/apps/web/components/apps/installation/ConfigureStepCard.tsx
@@ -139,7 +139,7 @@ const EventTypeGroup = ({
     keyName: "fieldId",
   });
   return (
-    <div className="ml-2 flex flex-col space-y-6">
+    <div className="ml-2 flex flex-col stack-y-6">
       {fields.map(
         (field, index) =>
           field.selected && (
diff --git a/apps/web/components/apps/installation/EventTypesStepCard.tsx b/apps/web/components/apps/installation/EventTypesStepCard.tsx
index 39824a47c7..1089b77c52 100644
--- a/apps/web/components/apps/installation/EventTypesStepCard.tsx
+++ b/apps/web/components/apps/installation/EventTypesStepCard.tsx
@@ -45,7 +45,7 @@ const EventTypeCard: FC<EventTypeCardProps> = ({
   return (
     <div
       data-testid={`select-event-type-${id}`}
-      className="hover:bg-muted min-h-20 box-border flex w-full cursor-pointer select-none items-center space-x-4 px-4 py-3"
+      className="hover:bg-cal-muted min-h-20 box-border flex w-full cursor-pointer select-none items-center space-x-4 px-4 py-3"
       onClick={() => handleSelect()}>
       <input
         id={`${id}`}
@@ -63,7 +63,7 @@ const EventTypeCard: FC<EventTypeCardProps> = ({
           </div>
           {Boolean(description) && (
             <div
-              className="text-subtle line-clamp-4 break-words text-sm sm:max-w-[650px] [&>*:not(:first-child)]:hidden [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+              className="text-subtle line-clamp-4 wrap-break-word text-sm sm:max-w-[650px] [&>*:not(:first-child)]:hidden [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
               // eslint-disable-next-line react/no-danger
               dangerouslySetInnerHTML={{
                 __html: markdownToSafeHTML(description),
@@ -105,7 +105,7 @@ const EventTypeGroup: FC<EventTypeGroupProps> = ({ groupIndex, userName, ...prop
 
       <div className="sm:border-subtle bg-default  border dark:bg-black sm:rounded-md">
         <ScrollableArea className="rounded-md">
-          <ul className="border-subtle max-h-97 !static w-full divide-y">
+          <ul className="border-subtle max-h-97 static! w-full divide-y">
             {fields.length > 0 ? (
               fields.map((field, index) => (
                 <EventTypeCard
@@ -118,7 +118,7 @@ const EventTypeGroup: FC<EventTypeGroupProps> = ({ groupIndex, userName, ...prop
                 />
               ))
             ) : (
-              <div className="text-subtle bg-muted w-full p-2  text-center text-sm">Team has no Events</div>
+              <div className="text-subtle bg-cal-muted w-full p-2  text-center text-sm">Team has no Events</div>
             )}
           </ul>
         </ScrollableArea>
diff --git a/apps/web/components/apps/routing-forms/FormActions.tsx b/apps/web/components/apps/routing-forms/FormActions.tsx
index 1424d79c7c..cb4ae284f4 100644
--- a/apps/web/components/apps/routing-forms/FormActions.tsx
+++ b/apps/web/components/apps/routing-forms/FormActions.tsx
@@ -95,9 +95,7 @@ function NewFormDialog({
     <Dialog open={newFormDialogState !== null} onOpenChange={(open) => !open && setNewFormDialogState(null)}>
       <DialogContent className="overflow-y-auto">
         <div className="mb-1">
-          <h3
-            className="text-emphasis !font-cal text-semibold leading-20 text-xl font-medium"
-            id="modal-title">
+          <h3 className="text-emphasis !font-cal text-semibold text-xl font-medium" id="modal-title">
             {teamId ? t("add_new_team_form") : t("add_new_form")}
           </h3>
           <div>
@@ -117,7 +115,7 @@ function NewFormDialog({
               duplicateFrom: formToDuplicate,
             });
           }}>
-          <div className="mt-3 space-y-5">
+          <div className="mt-3 stack-y-5">
             <TextField label={t("title")} required placeholder={t("a_routing_form")} {...register("name")} />
             <div className="mb-5">
               <TextAreaField
@@ -175,7 +173,10 @@ export const FormActionsDropdown = ({
             type="button"
             variant="icon"
             color="secondary"
-            className={classNames(disabled && "opacity-30")}
+            className={classNames(
+              disabled && "opacity-30",
+              "ltr:radix-state-open:rounded-r-(--btn-group-radius) rtl:radix-state-open:rounded-l-(--btn-group-radius)"
+            )}
             StartIcon="ellipsis"
           />
         </DropdownMenuTrigger>
@@ -272,16 +273,14 @@ function Dialogs({
 
 const actionsCtx = createContext({
   appUrl: "",
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
+
   setNewFormDialogState: null as SetNewFormDialogState | null,
   newFormDialogState: null as NewFormDialogState,
   _delete: {
-    // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
     onAction: (_arg: { routingForm: RoutingForm | null }) => {},
     isPending: false,
   },
   toggle: {
-    // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
     onAction: (_arg: { routingForm: RoutingForm | null; checked: boolean }) => {},
     isPending: false,
   },
diff --git a/apps/web/components/apps/routing-forms/FormSettingsSlideover.tsx b/apps/web/components/apps/routing-forms/FormSettingsSlideover.tsx
index 4fd453fff9..7ee40ad35e 100644
--- a/apps/web/components/apps/routing-forms/FormSettingsSlideover.tsx
+++ b/apps/web/components/apps/routing-forms/FormSettingsSlideover.tsx
@@ -191,7 +191,7 @@ export const FormSettingsSlideover = ({
             )}
           </div>
         </div>
-        <SheetFooter className="flex-shrink-0 ">
+        <SheetFooter className="shrink-0 ">
           <Button color="minimal" onClick={handleCancel} data-testid="settings-slider-over-cancel">
             {t("cancel")}
           </Button>
diff --git a/apps/web/components/apps/routing-forms/Header.tsx b/apps/web/components/apps/routing-forms/Header.tsx
index 3540a5057f..e927ababc9 100644
--- a/apps/web/components/apps/routing-forms/Header.tsx
+++ b/apps/web/components/apps/routing-forms/Header.tsx
@@ -289,7 +289,7 @@ export function Header({
           ) : (
             <div className="group flex items-center gap-1">
               <span
-                className="text-default hover:bg-muted min-w-[100px] cursor-pointer truncate whitespace-nowrap rounded px-1 text-sm font-semibold leading-none"
+                className="text-default hover:bg-cal-muted min-w-[100px] cursor-pointer truncate whitespace-nowrap rounded px-1 text-sm font-semibold leading-none"
                 onClick={() => setIsEditing(true)}>
                 {watchedName || "Loading..."}
               </span>
diff --git a/apps/web/components/apps/routing-forms/SingleForm.tsx b/apps/web/components/apps/routing-forms/SingleForm.tsx
index 20556ba348..8755fe8eec 100644
--- a/apps/web/components/apps/routing-forms/SingleForm.tsx
+++ b/apps/web/components/apps/routing-forms/SingleForm.tsx
@@ -183,7 +183,7 @@ function SingleForm({
               className={classNames(
                 "bg-default flex-1",
                 isDesktop && "grid gap-8",
-                isDesktop && isTestPreviewOpen && "grid-cols-[1fr,400px]",
+                isDesktop && isTestPreviewOpen && "grid-cols-[1fr_400px]",
                 isDesktop && !isTestPreviewOpen && "grid-cols-1",
                 !isDesktop && "flex flex-col"
               )}>
diff --git a/apps/web/components/apps/routing-forms/TestForm.tsx b/apps/web/components/apps/routing-forms/TestForm.tsx
index 40da5ac92f..e203beff5e 100644
--- a/apps/web/components/apps/routing-forms/TestForm.tsx
+++ b/apps/web/components/apps/routing-forms/TestForm.tsx
@@ -335,7 +335,7 @@ export const TestFormRenderer = ({
   if (!isMobile) {
     if (isTestPreviewOpen) {
       return (
-        <div className="border-muted bg-muted h-full border-l p-6">
+        <div className="border-muted bg-cal-muted h-full border-l p-6">
           <TestForm
             form={testForm}
             supportsTeamMembersMatchingLogic={isSubTeamForm}
diff --git a/apps/web/components/apps/sendgrid/Setup.tsx b/apps/web/components/apps/sendgrid/Setup.tsx
index 4496af75d2..dbf4fad9a8 100644
--- a/apps/web/components/apps/sendgrid/Setup.tsx
+++ b/apps/web/components/apps/sendgrid/Setup.tsx
@@ -39,7 +39,7 @@ export default function SendgridSetup() {
   return (
     <div className="bg-emphasis flex h-screen">
       <div className="bg-default m-auto rounded p-5 md:w-[520px] md:p-10">
-        <div className="flex flex-col space-y-5 md:flex-row md:space-x-5 md:space-y-0">
+        <div className="flex flex-col stack-y-5 md:flex-row md:space-x-5 md:stack-y-0">
           <div>
             <img src="/api/app-store/sendgrid/logo.png" alt="Sendgrid" className="h-12 w-12 max-w-2xl" />
           </div>
@@ -76,7 +76,7 @@ export default function SendgridSetup() {
                     showToast(json.message, "error");
                   }
                 }}>
-                <fieldset className="space-y-2" disabled={form.formState.isSubmitting}>
+                <fieldset className="stack-y-2" disabled={form.formState.isSubmitting}>
                   <Controller
                     name="api_key"
                     control={form.control}
@@ -108,8 +108,8 @@ export default function SendgridSetup() {
                     className={
                       testPassed !== undefined
                         ? testPassed
-                          ? " !bg-success hover:bg-success !text-green-700"
-                          : "bg-error hover:bg-error !border-red-700 !text-red-700"
+                          ? " bg-cal-success! hover:bg-cal-success text-green-700!"
+                          : "bg-error hover:bg-error border-red-700! text-red-700!"
                         : "secondary"
                     }
                     color={testPassed === true ? "minimal" : "secondary"}
diff --git a/apps/web/components/apps/wipemycalother/confirmDialog.tsx b/apps/web/components/apps/wipemycalother/confirmDialog.tsx
index d29ad6634b..f179edee33 100644
--- a/apps/web/components/apps/wipemycalother/confirmDialog.tsx
+++ b/apps/web/components/apps/wipemycalother/confirmDialog.tsx
@@ -82,7 +82,7 @@ export const ConfirmDialog = (props: IConfirmDialogWipe) => {
     <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
       <DialogContent onOpenAutoFocus={(e) => e.preventDefault()}>
         <div className="flex flex-row space-x-3">
-          <div className="flex h-10 w-10 flex-shrink-0 justify-center rounded-full bg-[#FAFAFA]">
+          <div className="flex h-10 w-10 shrink-0 justify-center rounded-full bg-[#FAFAFA]">
             <Icon name="clock" className="m-auto h-5 w-5" />
           </div>
           <div className="pt-1">
diff --git a/apps/web/components/auth/BackupCode.tsx b/apps/web/components/auth/BackupCode.tsx
index ad51a9d9ad..68a3d0c41b 100644
--- a/apps/web/components/auth/BackupCode.tsx
+++ b/apps/web/components/auth/BackupCode.tsx
@@ -9,7 +9,7 @@ export default function TwoFactor({ center = true }) {
   const methods = useFormContext();
 
   return (
-    <div className={center ? "mx-auto !mt-0 max-w-sm" : "!mt-0 max-w-sm"}>
+    <div className={center ? "mx-auto mt-0! max-w-sm" : "mt-0! max-w-sm"}>
       <Label className="mt-4">{t("backup_code")}</Label>
 
       <p className="text-subtle mb-4 text-sm">{t("backup_code_instructions")}</p>
diff --git a/apps/web/components/auth/TwoFactor.tsx b/apps/web/components/auth/TwoFactor.tsx
index a6570739a5..096145a99b 100644
--- a/apps/web/components/auth/TwoFactor.tsx
+++ b/apps/web/components/auth/TwoFactor.tsx
@@ -22,10 +22,10 @@ export default function TwoFactor({ center = true, autoFocus = true }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
 
-  const className = "h-12 w-12 !text-xl text-center";
+  const className = "h-12 w-12 text-xl! text-center";
 
   return (
-    <div className={center ? "mx-auto !mt-0 max-w-sm" : "!mt-0 max-w-sm"}>
+    <div className={center ? "mx-auto mt-0! max-w-sm" : "mt-0! max-w-sm"}>
       <Label className="mt-4">{t("2fa_code")}</Label>
 
       <p className="text-subtle mb-4 text-sm">{t("2fa_enabled_instructions")}</p>
diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
index be269b44fd..9184d419a4 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@@ -354,9 +354,9 @@ function BookingListItem(booking: BookingItemProps) {
       <div
         data-testid="booking-item"
         data-today={String(booking.isToday)}
-        className="hover:bg-muted group w-full">
+        className="hover:bg-cal-muted group w-full">
         <div className="flex flex-col sm:flex-row">
-          <div className="hidden align-top ltr:pl-3 rtl:pr-6 sm:table-cell sm:min-w-[12rem]">
+          <div className="hidden align-top ltr:pl-3 rtl:pr-6 sm:table-cell sm:min-w-48">
             <div className="flex h-full items-center">
               {eventTypeColor && (
                 <div className="h-[70%] w-0.5" style={{ backgroundColor: eventTypeColor }} />
@@ -497,7 +497,7 @@ function BookingListItem(booking: BookingItemProps) {
               </div>
             </ConditionalLink>
           </div>
-          <div className="flex w-full flex-col flex-wrap items-end justify-end space-x-2 space-y-2 py-4 pl-4 text-right text-sm font-medium ltr:pr-4 rtl:pl-4 sm:flex-row sm:flex-nowrap sm:items-start sm:space-y-0 sm:pl-0">
+          <div className="flex w-full flex-col flex-wrap items-end justify-end space-x-2 stack-y-2 py-4 pl-4 text-right text-sm font-medium ltr:pr-4 rtl:pl-4 sm:flex-row sm:flex-nowrap sm:items-start sm:stack-y-0 sm:pl-0">
             {shouldShowPendingActions(actionContext) && <TableActions actions={pendingActions} />}
             <BookingActionsDropdown booking={booking} context="list" />
             {shouldShowRecurringCancelAction(actionContext) && <TableActions actions={[cancelEventAction]} />}
diff --git a/apps/web/components/booking/SkeletonLoader.tsx b/apps/web/components/booking/SkeletonLoader.tsx
index c61a3ab460..732409b874 100644
--- a/apps/web/components/booking/SkeletonLoader.tsx
+++ b/apps/web/components/booking/SkeletonLoader.tsx
@@ -29,7 +29,7 @@ function SkeletonItem() {
   return (
     <li className="group flex w-full items-start justify-between px-4 py-4 sm:px-6">
       {/* Left side - Date and time info */}
-      <div className="flex min-w-0 flex-shrink-0 flex-col gap-2 pr-4">
+      <div className="flex min-w-0 shrink-0 flex-col gap-2 pr-4">
         <SkeletonText className="h-4 w-24" />
         <SkeletonText className="h-4 w-28" />
         <div className="mt-1 flex items-center gap-2">
@@ -43,7 +43,7 @@ function SkeletonItem() {
       </div>
 
       {/* Right side - Event details */}
-      <div className="flex min-w-0 flex-1 flex-col space-y-2">
+      <div className="flex min-w-0 flex-1 flex-col stack-y-2">
         {/* Event title */}
         <SkeletonText className="h-5 w-36" />
         {/* Event description */}
@@ -53,14 +53,14 @@ function SkeletonItem() {
       </div>
 
       {/* Action buttons - only visible on larger screens */}
-      <div className="ml-4 hidden flex-shrink-0 gap-2 sm:flex">
+      <div className="ml-4 hidden shrink-0 gap-2 sm:flex">
         <SkeletonText className="h-9 w-20 rounded-md" />
         <SkeletonText className="h-9 w-20 rounded-md" />
         <SkeletonText className="h-9 w-9 rounded-md" />
       </div>
 
       {/* Mobile menu button */}
-      <div className="ml-4 flex flex-shrink-0 sm:hidden">
+      <div className="ml-4 flex shrink-0 sm:hidden">
         <SkeletonText className="h-9 w-9 rounded-md" />
       </div>
     </li>
diff --git a/apps/web/components/booking/actions/BookingActionsDropdown.tsx b/apps/web/components/booking/actions/BookingActionsDropdown.tsx
index fc252992f1..f88aaaac81 100644
--- a/apps/web/components/booking/actions/BookingActionsDropdown.tsx
+++ b/apps/web/components/booking/actions/BookingActionsDropdown.tsx
@@ -369,7 +369,7 @@ export function BookingActionsDropdown({
     return (
       <Dialog open={isOpen} onOpenChange={setIsOpen}>
         <DialogContent title={t("mark_as_no_show")} enableOverflow>
-          <div className="space-y-2">
+          <div className="stack-y-2">
             {attendees.map((attendee, index) => (
               <label key={attendee.email} className="flex items-center space-x-2">
                 <input
diff --git a/apps/web/components/dialog/AddGuestsDialog.tsx b/apps/web/components/dialog/AddGuestsDialog.tsx
index 7f4538426e..3ef7f7b8be 100644
--- a/apps/web/components/dialog/AddGuestsDialog.tsx
+++ b/apps/web/components/dialog/AddGuestsDialog.tsx
@@ -58,7 +58,7 @@ export const AddGuestsDialog = (props: IAddGuestsDialog) => {
     <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
       <DialogContent enableOverflow>
         <div className="flex flex-row md:space-x-3">
-          <div className="bg-subtle hidden h-10 w-10 flex-shrink-0 justify-center rounded-full md:flex">
+          <div className="bg-subtle hidden h-10 w-10 shrink-0 justify-center rounded-full md:flex">
             <Icon name="user-plus" className="m-auto h-6 w-6" />
           </div>
           <div className="w-full md:pt-1">
@@ -74,7 +74,7 @@ export const AddGuestsDialog = (props: IAddGuestsDialog) => {
 
             {isInvalidEmail && (
               <div className="my-4 flex text-sm text-red-700">
-                <div className="flex-shrink-0">
+                <div className="shrink-0">
                   <Icon name="triangle-alert" className="h-5 w-5" />
                 </div>
                 <div className="ml-3">
diff --git a/apps/web/components/dialog/ChargeCardDialog.tsx b/apps/web/components/dialog/ChargeCardDialog.tsx
index 1de62f399e..4ce3de8e4d 100644
--- a/apps/web/components/dialog/ChargeCardDialog.tsx
+++ b/apps/web/components/dialog/ChargeCardDialog.tsx
@@ -44,7 +44,7 @@ export const ChargeCardDialog = (props: IRescheduleDialog) => {
     <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
       <DialogContent>
         <div className="flex flex-row space-x-3">
-          <div className=" bg-subtle flex h-10 w-10 flex-shrink-0 justify-center rounded-full">
+          <div className=" bg-subtle flex h-10 w-10 shrink-0 justify-center rounded-full">
             <Icon name="credit-card" className="m-auto h-6 w-6" />
           </div>
           <div className="pt-1">
diff --git a/apps/web/components/dialog/EditLocationDialog.tsx b/apps/web/components/dialog/EditLocationDialog.tsx
index 2d6eb7d0ff..d194de71f6 100644
--- a/apps/web/components/dialog/EditLocationDialog.tsx
+++ b/apps/web/components/dialog/EditLocationDialog.tsx
@@ -257,7 +257,7 @@ export const EditLocationDialog = (props: ISetLocationDialog) => {
             }
           }}>
           <div className="flex flex-row md:space-x-3">
-            <div className="bg-subtle mx-auto hidden h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10 md:flex">
+            <div className="bg-subtle mx-auto hidden h-12 w-12 shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10 md:flex">
               <Icon name="map-pin" className="text-emphasis h-6 w-6" />
             </div>
             <div className="w-full md:pt-1">
diff --git a/apps/web/components/dialog/ReassignDialog.tsx b/apps/web/components/dialog/ReassignDialog.tsx
index 328e104ffb..d6d1e2d1b2 100644
--- a/apps/web/components/dialog/ReassignDialog.tsx
+++ b/apps/web/components/dialog/ReassignDialog.tsx
@@ -244,7 +244,7 @@ export const ReassignDialog = ({
                           />
                           <div
                             className={classNames(
-                              "h-3 w-3 flex-shrink-0 rounded-full",
+                              "h-3 w-3 shrink-0 rounded-full",
                               member.status === "unavailable" ? "bg-red-500" : "bg-green-500"
                             )}
                           />
diff --git a/apps/web/components/dialog/RerouteDialog.tsx b/apps/web/components/dialog/RerouteDialog.tsx
index e7ef6f9d87..837db6f9a3 100644
--- a/apps/web/components/dialog/RerouteDialog.tsx
+++ b/apps/web/components/dialog/RerouteDialog.tsx
@@ -373,9 +373,9 @@ const NewRoutingManager = ({
     reroutingState.value?.type === "reschedule_to_different_event_new_tab";
 
   return (
-    <div className="bg-muted flex flex-col space-y-3 rounded-md p-4 text-sm">
+    <div className="bg-cal-muted flex flex-col stack-y-3 rounded-md p-4 text-sm">
       <h2 className="text-emphasis font-medium">{t("new_routing_status")}</h2>
-      <div className="flex flex-col space-y-2">
+      <div className="flex flex-col stack-y-2">
         {reroutingState.status === ReroutingStatusEnum.REROUTING_NOT_INITIATED && reroutingPreview()}
         {(reroutingState.status === ReroutingStatusEnum.REROUTING_NOT_INITIATED || !isReroutingInNewTab) &&
           reroutingCTAs()}
@@ -567,7 +567,7 @@ const NewRoutingManager = ({
         throw new Error(t("something_went_wrong"));
       }
       return (
-        <div className="flex flex-col space-y-2">
+        <div className="flex flex-col stack-y-2">
           <span className="text-default" data-testid="reroute-preview-event-type">
             <span className="font-semibold">{t("event_type")}:</span>{" "}
             <a
@@ -666,9 +666,9 @@ const CurrentRoutingStatus = ({
   const bookerUrl = useBookerUrl();
   if (!fullSlug) return null;
   return (
-    <div className="bg-muted flex flex-col space-y-3 rounded-md p-4 text-sm">
+    <div className="bg-cal-muted flex flex-col stack-y-3 rounded-md p-4 text-sm">
       <h2 className="text-emphasis font-medium">{t("current_routing_status")}</h2>
-      <div className="flex flex-col space-y-2">
+      <div className="flex flex-col stack-y-2">
         <span className="text-default" data-testid="current-routing-status-event-type">
           <span className="font-semibold">{t("event_type")}:</span>{" "}
           <a
diff --git a/apps/web/components/dialog/RescheduleDialog.tsx b/apps/web/components/dialog/RescheduleDialog.tsx
index ea41eda458..092ba0fab8 100644
--- a/apps/web/components/dialog/RescheduleDialog.tsx
+++ b/apps/web/components/dialog/RescheduleDialog.tsx
@@ -38,7 +38,7 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
     <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
       <DialogContent enableOverflow data-testid="reschedule-dialog">
         <div className="flex flex-row md:space-x-3">
-          <div className="bg-subtle hidden h-10 w-10 flex-shrink-0 justify-center rounded-full md:flex">
+          <div className="bg-subtle hidden h-10 w-10 shrink-0 justify-center rounded-full md:flex">
             <Icon name="clock" className="m-auto h-6 w-6" />
           </div>
           <div className="w-full md:pt-1">
diff --git a/apps/web/components/error/error-page.tsx b/apps/web/components/error/error-page.tsx
index e6773da325..1519df6357 100644
--- a/apps/web/components/error/error-page.tsx
+++ b/apps/web/components/error/error-page.tsx
@@ -76,7 +76,7 @@ export const ErrorPage: React.FC<Props> = (props) => {
             <p className="text-default mb-4 max-w-2xl text-sm">
               Please provide the following text when contacting support to better help you:
             </p>
-            <pre className="bg-emphasis text-emphasis w-full max-w-2xl whitespace-normal break-words rounded-md p-4">
+            <pre className="bg-emphasis text-emphasis w-full max-w-2xl whitespace-normal wrap-break-word rounded-md p-4">
               {message}
             </pre>
           </div>
diff --git a/apps/web/components/getting-started/components/ConnectedCalendarItem.tsx b/apps/web/components/getting-started/components/ConnectedCalendarItem.tsx
index 288c6ea9c7..e41883bdcd 100644
--- a/apps/web/components/getting-started/components/ConnectedCalendarItem.tsx
+++ b/apps/web/components/getting-started/components/ConnectedCalendarItem.tsx
@@ -29,7 +29,7 @@ const ConnectedCalendarItem = (prop: IConnectedCalendarItem) => {
           <p className="font-sans text-sm font-bold leading-5">
             {name}
             {/* Temporarily removed till we use it on another place */}
-            {/* <span className="mx-1 rounded-[4px] bg-success py-[2px] px-[6px] font-sans text-xs font-medium text-green-600">
+            {/* <span className="mx-1 rounded-[4px] bg-cal-success py-[2px] px-[6px] font-sans text-xs font-medium text-green-600">
               {t("default")}
             </span> */}
           </p>
@@ -49,7 +49,7 @@ const ConnectedCalendarItem = (prop: IConnectedCalendarItem) => {
           {t("edit")}
         </Button> */}
       </div>
-      <div className="border-subtle h-[1px] w-full border-b" />
+      <div className="border-subtle h-px w-full border-b" />
       <div>
         <ul className="p-4">
           {calendars?.map((calendar, i) => (
diff --git a/apps/web/components/getting-started/steps-views/ConnectedVideoStep.tsx b/apps/web/components/getting-started/steps-views/ConnectedVideoStep.tsx
index 153875e902..202571e270 100644
--- a/apps/web/components/getting-started/steps-views/ConnectedVideoStep.tsx
+++ b/apps/web/components/getting-started/steps-views/ConnectedVideoStep.tsx
@@ -59,7 +59,7 @@ const ConnectedVideoStepInner = ({
   const { data: metadata } = result;
   const defaultConferencingApp = metadata?.defaultConferencingApp?.appSlug;
   return (
-    <List className="bg-default  border-subtle divide-subtle scroll-bar mx-1 max-h-[45vh] divide-y !overflow-y-scroll rounded-md border p-0 sm:mx-0">
+    <List className="bg-default  border-subtle divide-subtle scroll-bar mx-1 max-h-[45vh] divide-y overflow-y-scroll! rounded-md border p-0 sm:mx-0">
       {queryConnectedVideoApps?.items &&
         queryConnectedVideoApps?.items.map((item) => {
           if (item.slug === "daily-video") return null; // we dont want to show daily here as it is installed by default
diff --git a/apps/web/components/getting-started/steps-views/SetupAvailability.tsx b/apps/web/components/getting-started/steps-views/SetupAvailability.tsx
index 4acaca287f..55e2bf14ac 100644
--- a/apps/web/components/getting-started/steps-views/SetupAvailability.tsx
+++ b/apps/web/components/getting-started/steps-views/SetupAvailability.tsx
@@ -69,7 +69,7 @@ const SetupAvailability = (props: ISetupAvailabilityProps) => {
           }
         }
       }}>
-      <div className="bg-default dark:text-inverted text-emphasis border-subtle w-full rounded-md border dark:bg-opacity-5">
+      <div className="bg-default dark:text-inverted text-emphasis border-subtle w-full rounded-md border">
         <Schedule control={availabilityForm.control} name="schedule" weekStart={1} />
       </div>
 
diff --git a/apps/web/components/getting-started/steps-views/UserSettings.tsx b/apps/web/components/getting-started/steps-views/UserSettings.tsx
index 684e7d4f74..2d09370d8b 100644
--- a/apps/web/components/getting-started/steps-views/UserSettings.tsx
+++ b/apps/web/components/getting-started/steps-views/UserSettings.tsx
@@ -68,7 +68,7 @@ const UserSettings = (props: IUserSettingsProps) => {
 
   return (
     <form onSubmit={onSubmit}>
-      <div className="space-y-6">
+      <div className="stack-y-6">
         {/* Username textfield: when not coming from signup */}
         {!props.hideUsername && <UsernameAvailabilityField />}
 
diff --git a/apps/web/components/security/TwoFactorModalHeader.tsx b/apps/web/components/security/TwoFactorModalHeader.tsx
index 60ed8e1241..0fbad2a581 100644
--- a/apps/web/components/security/TwoFactorModalHeader.tsx
+++ b/apps/web/components/security/TwoFactorModalHeader.tsx
@@ -3,7 +3,7 @@ import { Icon } from "@calcom/ui/components/icon";
 const TwoFactorModalHeader = ({ title, description }: { title: string; description: string }) => {
   return (
     <div className="mb-4 sm:flex sm:items-start">
-      <div className="bg-brand text-brandcontrast dark:bg-darkmodebrand dark:text-darkmodebrandcontrast mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-opacity-5 sm:mx-0 sm:h-10 sm:w-10">
+      <div className="bg-brand/5 text-brandcontrast dark:bg-darkmodebrand/5 dark:text-darkmodebrandcontrast mx-auto flex h-12 w-12 shrink-0 items-center justify-center rounded-full sm:mx-0 sm:h-10 sm:w-10">
         <Icon name="shield" className="text-inverted h-6 w-6" />
       </div>
       <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
diff --git a/apps/web/components/settings/CustomEmailTextField.tsx b/apps/web/components/settings/CustomEmailTextField.tsx
index bd498a514f..e4311af294 100644
--- a/apps/web/components/settings/CustomEmailTextField.tsx
+++ b/apps/web/components/settings/CustomEmailTextField.tsx
@@ -11,7 +11,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from "@calcom/ui/components/dropdown";
-import { InputError } from "@calcom/ui/components/form";
+import { InputError, Input } from "@calcom/ui/components/form";
 
 import type { FormValues } from "~/settings/my-account/profile-view";
 
@@ -47,9 +47,9 @@ const CustomEmailTextField = ({
         className={`border-default mt-2 flex w-full items-center rounded-[10px] border ${
           inputFocus ? "ring-brand-default border-neutral-300 ring-2" : ""
         }`}>
-        <input
+        <Input
           {...formMethods.register(formMethodFieldName)}
-          className="flex-1 bg-transparent px-3 py-1.5 text-sm outline-none"
+          className="focus:ring-none! focus:shadow-none! flex-1 border-none bg-transparent px-3 py-1.5 text-sm outline-none"
           data-testid={dataTestId}
           onFocus={() => setInputFocus(true)}
           onBlur={() => setInputFocus(false)}
diff --git a/apps/web/components/settings/platform/oauth-clients/oauth-client-form/index.tsx b/apps/web/components/settings/platform/oauth-clients/oauth-client-form/index.tsx
index 882a34c2fe..6c35a246f4 100644
--- a/apps/web/components/settings/platform/oauth-clients/oauth-client-form/index.tsx
+++ b/apps/web/components/settings/platform/oauth-clients/oauth-client-form/index.tsx
@@ -124,7 +124,7 @@ export const OAuthClientForm = ({
                   <TextField
                     type="url"
                     required={index === 0}
-                    className="w-[100%]"
+                    className="w-full"
                     label=""
                     disabled={isFormDisabled}
                     {...register(`redirectUris.${index}.uri` as const)}
@@ -197,7 +197,7 @@ export const OAuthClientForm = ({
             <TextField
               type="url"
               label="Booking redirect uri"
-              className="w-[100%]"
+              className="w-full"
               {...register("bookingRedirectUri")}
               disabled={isFormDisabled}
             />
@@ -208,7 +208,7 @@ export const OAuthClientForm = ({
             <TextField
               type="url"
               label="Booking cancel redirect uri"
-              className="w-[100%]"
+              className="w-full"
               {...register("bookingCancelRedirectUri")}
               disabled={isFormDisabled}
             />
@@ -219,7 +219,7 @@ export const OAuthClientForm = ({
             <TextField
               type="url"
               label="Booking reschedule redirect uri"
-              className="w-[100%]"
+              className="w-full"
               {...register("bookingRescheduleRedirectUri")}
               disabled={isFormDisabled}
             />
diff --git a/apps/web/components/settings/platform/pricing/billing-card/index.tsx b/apps/web/components/settings/platform/pricing/billing-card/index.tsx
index 930b677f84..2d2931bf32 100644
--- a/apps/web/components/settings/platform/pricing/billing-card/index.tsx
+++ b/apps/web/components/settings/platform/pricing/billing-card/index.tsx
@@ -24,7 +24,7 @@ export const PlatformBillingCard = ({
   return (
     <div className="border-subtle max-w-[450px] rounded-2xl border p-5 md:mx-4">
       <div className="pb-5">
-        <h1 className="border-b-[1px] pb-2 pt-1 text-center text-2xl font-bold">
+        <h1 className="border-b pb-2 pt-1 text-center text-2xl font-bold">
           {plan}
           {currentPlan && (
             <>
@@ -51,7 +51,7 @@ export const PlatformBillingCard = ({
           <Button
             loading={isLoading}
             onClick={handleSubscribe}
-            className="flex w-[100%] items-center justify-center">
+            className="flex w-full items-center justify-center">
             {pricing !== undefined ? t("subscribe") : t("schedule_a_time")}
           </Button>
         </div>
diff --git a/apps/web/components/settings/platform/pricing/platform-pricing/index.tsx b/apps/web/components/settings/platform/pricing/platform-pricing/index.tsx
index 4804f1b64e..0fe960d639 100644
--- a/apps/web/components/settings/platform/pricing/platform-pricing/index.tsx
+++ b/apps/web/components/settings/platform/pricing/platform-pricing/index.tsx
@@ -63,7 +63,7 @@ export const PlatformPricing = ({ teamId, teamPlan, heading }: PlatformPricingPr
   }
 
   return (
-    <div className="flex h-auto flex-col items-center justify-center px-5 py-10 md:px-10 lg:h-[100%]">
+    <div className="flex h-auto flex-col items-center justify-center px-5 py-10 md:px-10 lg:h-full">
       {heading}
       <div>
         <div className="grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-4">
diff --git a/apps/web/components/setup/AdminUser.tsx b/apps/web/components/setup/AdminUser.tsx
index fe9624863f..797cb96d77 100644
--- a/apps/web/components/setup/AdminUser.tsx
+++ b/apps/web/components/setup/AdminUser.tsx
@@ -20,7 +20,7 @@ export const AdminUserContainer = (props: React.ComponentProps<typeof AdminUser>
       <form
         id="wizard-step-1"
         name="wizard-step-1"
-        className="space-y-4"
+        className="stack-y-4"
         onSubmit={(e) => {
           e.preventDefault();
           props.onSuccess();
@@ -106,7 +106,7 @@ export const AdminUser = (props: {
 
   return (
     <FormProvider {...formMethods}>
-      <form id="wizard-step-1" name="wizard-step-1" className="space-y-4" onSubmit={onSubmit}>
+      <form id="wizard-step-1" name="wizard-step-1" className="stack-y-4" onSubmit={onSubmit}>
         <div>
           <Controller
             name="username"
diff --git a/apps/web/components/setup/ChooseLicense.tsx b/apps/web/components/setup/ChooseLicense.tsx
index 7c08e2d5f5..e7168fb46e 100644
--- a/apps/web/components/setup/ChooseLicense.tsx
+++ b/apps/web/components/setup/ChooseLicense.tsx
@@ -19,7 +19,7 @@ const ChooseLicense = (
   return (
     <form
       {...rest}
-      className="space-y-4"
+      className="stack-y-4"
       onSubmit={(e) => {
         e.preventDefault();
         onSubmit(value);
@@ -36,7 +36,7 @@ const ChooseLicense = (
         <RadioGroup.Item value="FREE">
           <div
             className={classNames(
-              "bg-default cursor-pointer space-y-2 rounded-md border p-4 hover:border-black",
+              "bg-default cursor-pointer stack-y-2 rounded-md border p-4 hover:border-black",
               value === "FREE" && "ring-2 ring-black"
             )}>
             <h2 className="font-cal text-emphasis text-xl">{t("agplv3_license")}</h2>
@@ -51,7 +51,7 @@ const ChooseLicense = (
         </RadioGroup.Item>
         <RadioGroup.Item value="EE" disabled>
           <Link href="https://cal.com/sales" target="_blank">
-            <div className={classNames("bg-default h-full cursor-pointer space-y-2 rounded-md border p-4")}>
+            <div className={classNames("bg-default h-full cursor-pointer stack-y-2 rounded-md border p-4")}>
               <h2 className="font-cal text-emphasis text-xl">{t("custom_plan")}</h2>
               <p className="font-medium text-green-800">{t("contact_sales")}</p>
               <p className="text-subtle">Build on top of Cal.com</p>
diff --git a/apps/web/components/setup/EnterpriseLicense.tsx b/apps/web/components/setup/EnterpriseLicense.tsx
index 0f937ba385..717751c4d8 100644
--- a/apps/web/components/setup/EnterpriseLicense.tsx
+++ b/apps/web/components/setup/EnterpriseLicense.tsx
@@ -89,7 +89,7 @@ const EnterpriseLicense = (
 
   return (
     <FormProvider {...formMethods}>
-      <form {...rest} className="bg-default space-y-4 rounded-md px-8 py-10" onSubmit={handleSubmit}>
+      <form {...rest} className="bg-default stack-y-4 rounded-md px-8 py-10" onSubmit={handleSubmit}>
         <div>
           <Button
             className="w-full justify-center text-lg"
diff --git a/apps/web/components/setup/LicenseSelection.tsx b/apps/web/components/setup/LicenseSelection.tsx
index b7714e55a8..5250018464 100644
--- a/apps/web/components/setup/LicenseSelection.tsx
+++ b/apps/web/components/setup/LicenseSelection.tsx
@@ -101,7 +101,7 @@ const LicenseSelection = (
   return (
     <form
       {...rest}
-      className="space-y-6"
+      className="stack-y-6"
       onSubmit={(e) => {
         e.preventDefault();
         if (value === "FREE") {
@@ -119,7 +119,7 @@ const LicenseSelection = (
         <RadioGroup.Item value="FREE" className="h-full">
           <div
             className={classNames(
-              "bg-default h-full cursor-pointer space-y-2 rounded-md border p-4 hover:border-black",
+              "bg-default h-full cursor-pointer stack-y-2 rounded-md border p-4 hover:border-black",
               value === "FREE" && "ring-2 ring-black"
             )}>
             <h2 className="font-cal text-emphasis text-xl">{t("agplv3_license")}</h2>
@@ -136,7 +136,7 @@ const LicenseSelection = (
         <RadioGroup.Item value="EXISTING" className="h-full">
           <div
             className={classNames(
-              "bg-default h-full cursor-pointer space-y-2 rounded-md border p-4 hover:border-black",
+              "bg-default h-full cursor-pointer stack-y-2 rounded-md border p-4 hover:border-black",
               value === "EXISTING" && "ring-2 ring-black"
             )}>
             <h2 className="font-cal text-emphasis text-xl">{t("enter_license_key")}</h2>
@@ -158,8 +158,8 @@ const LicenseSelection = (
 
       {value === "EXISTING" && (
         <FormProvider {...formMethods}>
-          <div className="bg-muted space-y-4 rounded-md px-4 py-3">
-            <div className="space-y-4">
+          <div className="bg-cal-muted stack-y-4 rounded-md px-4 py-3">
+            <div className="stack-y-4">
               <div>
                 <Controller
                   name="licenseKey"
diff --git a/apps/web/components/setup/StepDone.tsx b/apps/web/components/setup/StepDone.tsx
index 068c6d5714..aa174a80f9 100644
--- a/apps/web/components/setup/StepDone.tsx
+++ b/apps/web/components/setup/StepDone.tsx
@@ -16,7 +16,7 @@ const StepDone = (props: {
     <form
       id={`wizard-step-${props.currentStep}`}
       name={`wizard-step-${props.currentStep}`}
-      className="flex justify-center space-y-4"
+      className="flex justify-center stack-y-4"
       onSubmit={(e) => {
         props.setIsPending(true);
         e.preventDefault();
diff --git a/apps/web/components/team/screens/Team.tsx b/apps/web/components/team/screens/Team.tsx
index d15e943d29..e6ece1ba73 100644
--- a/apps/web/components/team/screens/Team.tsx
+++ b/apps/web/components/team/screens/Team.tsx
@@ -30,15 +30,15 @@ const Member = ({ member, teamName }: { member: MemberType; teamName: string | n
     <Link
       key={member.id}
       href={{ pathname: `${member.bookerUrl}/${member.username}`, query: queryParamsToForward }}>
-      <div className="bg-default hover:bg-muted border-subtle group flex min-h-full flex-col space-y-2 rounded-md border p-4 transition hover:cursor-pointer sm:w-80">
+      <div className="bg-default hover:bg-cal-muted border-subtle group flex min-h-full flex-col stack-y-2 rounded-md border p-4 transition hover:cursor-pointer sm:w-80">
         <UserAvatar noOrganizationIndicator size="md" user={member} />
-        <section className="mt-2 line-clamp-4 w-full space-y-1">
+        <section className="mt-2 line-clamp-4 w-full stack-y-1">
           <p className="text-default font-medium">{member.name}</p>
-          <div className="text-subtle line-clamp-3 overflow-ellipsis text-sm font-normal">
+          <div className="text-subtle line-clamp-3 text-ellipsis text-sm font-normal">
             {!isBioEmpty ? (
               <>
                 <div
-                  className="  text-subtle break-words text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+                  className="  text-subtle wrap-break-word text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
                   // eslint-disable-next-line react/no-danger
                   dangerouslySetInnerHTML={{ __html: markdownToSafeHTML(member.bio) }}
                 />
diff --git a/apps/web/components/ui/AuthContainer.tsx b/apps/web/components/ui/AuthContainer.tsx
index 0fd2f6f5be..3846d94447 100644
--- a/apps/web/components/ui/AuthContainer.tsx
+++ b/apps/web/components/ui/AuthContainer.tsx
@@ -20,12 +20,12 @@ export default function AuthContainer(props: React.PropsWithChildren<Props>) {
         {props.heading && <h2 className="font-cal text-emphasis text-center text-3xl">{props.heading}</h2>}
       </div>
       {props.loading && (
-        <div className="bg-muted absolute z-50 flex h-screen w-full items-center">
+        <div className="bg-cal-muted absolute z-50 flex h-screen w-full items-center">
           <Loader />
         </div>
       )}
       <div className="mb-auto mt-8 sm:mx-auto sm:w-full sm:max-w-md">
-        <div className="bg-default dark:bg-muted border-subtle mx-2 rounded-md border px-4 py-10 sm:px-10">
+        <div className="bg-default dark:bg-cal-muted border-subtle mx-2 rounded-md border px-4 py-10 sm:px-10">
           {props.children}
         </div>
         <div className="text-default mt-8 text-center text-sm">{props.footerText}</div>
diff --git a/apps/web/components/ui/ModalContainer.tsx b/apps/web/components/ui/ModalContainer.tsx
index 1e8f2a495b..fd0f6a6970 100644
--- a/apps/web/components/ui/ModalContainer.tsx
+++ b/apps/web/components/ui/ModalContainer.tsx
@@ -25,7 +25,7 @@ export default function ModalContainer(
                 "sm:w-full sm:max-w-lg ": !props.wide,
                 "sm:w-4xl sm:max-w-4xl": props.wide,
                 "overflow-auto": props.scroll,
-                "!p-0": props.noPadding,
+                "p-0!": props.noPadding,
               }
             )}>
             {props.children}
diff --git a/apps/web/components/ui/SettingInputContainer.tsx b/apps/web/components/ui/SettingInputContainer.tsx
index 0b0bd518cc..8e8b62ecab 100644
--- a/apps/web/components/ui/SettingInputContainer.tsx
+++ b/apps/web/components/ui/SettingInputContainer.tsx
@@ -10,7 +10,7 @@ export default function SettingInputContainer({
   htmlFor?: string;
 }) {
   return (
-    <div className="space-y-3">
+    <div className="stack-y-3">
       <div className="block sm:flex">
         <div className="min-w-48 mb-4 sm:mb-0">
           <label htmlFor={htmlFor} className="text-default mt-1 flex text-sm font-medium">
@@ -18,7 +18,7 @@ export default function SettingInputContainer({
             {label}
           </label>
         </div>
-        <div className="w-full flex-grow">{Input}</div>
+        <div className="w-full grow">{Input}</div>
       </div>
     </div>
   );
diff --git a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
index f61d1e5d71..2c05494511 100644
--- a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
@@ -202,7 +202,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
         <span
           className={classNames(
             isInputUsernamePremium ? "border border-orange-400 " : "",
-            "border-default bg-muted text-subtle hidden h-8 items-center rounded-l-md border border-r-0 px-3 text-sm md:inline-flex"
+            "border-default bg-cal-muted text-subtle hidden h-8 items-center rounded-l-md border border-r-0 px-3 text-sm md:inline-flex"
           )}>
           {process.env.NEXT_PUBLIC_WEBSITE_URL.replace("https://", "").replace("http://", "")}/
         </span>
@@ -216,7 +216,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
             autoCorrect="none"
             disabled={disabled}
             className={classNames(
-              "border-l-1 my-0 rounded-md font-sans text-sm leading-4 focus:!ring-0 sm:rounded-l-none",
+              "border-l my-0 rounded-md font-sans text-sm leading-4 focus:ring-0! sm:rounded-l-none",
               isInputUsernamePremium
                 ? "border border-orange-400 focus:border focus:border-orange-400"
                 : "border focus:border",
diff --git a/apps/web/modules/apps/apps-view.tsx b/apps/web/modules/apps/apps-view.tsx
index f5356b2024..c467d35f68 100644
--- a/apps/web/modules/apps/apps-view.tsx
+++ b/apps/web/modules/apps/apps-view.tsx
@@ -41,7 +41,7 @@ function AppsSearch({
     <TextField
       addOnLeading={<Icon name="search" className="text-subtle h-4 w-4" />}
       addOnClassname="!border-muted"
-      containerClassName={classNames("focus:!ring-offset-0 m-1", className)}
+      containerClassName={classNames("focus:ring-offset-0! m-1", className)}
       type="search"
       autoComplete="false"
       onChange={onChange}
diff --git a/apps/web/modules/apps/installation/[[...step]]/step-view.tsx b/apps/web/modules/apps/installation/[[...step]]/step-view.tsx
index 48a2bb2bf6..480cc7f574 100644
--- a/apps/web/modules/apps/installation/[[...step]]/step-view.tsx
+++ b/apps/web/modules/apps/installation/[[...step]]/step-view.tsx
@@ -233,7 +233,7 @@ const OnboardingPage = ({
   return (
     <div
       key={pathname}
-      className="dark:bg-brand dark:text-brand-contrast text-emphasis min-h-screen px-4"
+      className="text-emphasis min-h-screen px-4"
       data-testid="onboarding">
       <div className="mx-auto py-6 sm:px-4 md:py-24">
         <div className="relative">
diff --git a/apps/web/modules/auth/forgot-password/[id]/forgot-password-single-view.tsx b/apps/web/modules/auth/forgot-password/[id]/forgot-password-single-view.tsx
index 6266131dc0..acd1397da7 100644
--- a/apps/web/modules/auth/forgot-password/[id]/forgot-password-single-view.tsx
+++ b/apps/web/modules/auth/forgot-password/[id]/forgot-password-single-view.tsx
@@ -21,7 +21,7 @@ function Success() {
   const { t } = useLocale();
   return (
     <>
-      <div className="space-y-6">
+      <div className="stack-y-6">
         <div>
           <h2 className="font-cal text-emphasis mt-6 text-center text-3xl font-extrabold">
             {t("password_updated")}
@@ -39,7 +39,7 @@ function Expired() {
   const { t } = useLocale();
   return (
     <>
-      <div className="space-y-6">
+      <div className="stack-y-6">
         <div>
           <h2 className="font-cal text-emphasis mt-6 text-center text-3xl font-extrabold">{t("whoops")}</h2>
           <h2 className="text-emphasis text-center text-3xl font-extrabold">{t("request_is_expired")}</h2>
@@ -114,7 +114,7 @@ function PasswordResetForm({
 
   return (
     <Form
-      className="space-y-6"
+      className="stack-y-6"
       form={formMethods}
       style={
         {
diff --git a/apps/web/modules/auth/forgot-password/forgot-password-view.tsx b/apps/web/modules/auth/forgot-password/forgot-password-view.tsx
index 634a6976e7..3e7ce1ab96 100644
--- a/apps/web/modules/auth/forgot-password/forgot-password-view.tsx
+++ b/apps/web/modules/auth/forgot-password/forgot-password-view.tsx
@@ -76,7 +76,7 @@ export default function ForgotPassword(props: PageProps) {
 
   const Success = () => {
     return (
-      <div className="space-y-6 text-sm leading-normal ">
+      <div className="stack-y-6 text-sm leading-normal ">
         <p className="">{t("password_reset_email", { email })}</p>
         <p className="">{t("password_reset_leading")}</p>
         {error && <p className="text-center text-red-600">{error.message}</p>}
@@ -103,9 +103,9 @@ export default function ForgotPassword(props: PageProps) {
       {success && <Success />}
       {!success && (
         <>
-          <div className="space-y-6">{error && <p className="text-red-600">{error.message}</p>}</div>
+          <div className="stack-y-6">{error && <p className="text-red-600">{error.message}</p>}</div>
           <form
-            className="space-y-6"
+            className="stack-y-6"
             onSubmit={handleSubmit}
             action="#"
             style={
@@ -125,7 +125,7 @@ export default function ForgotPassword(props: PageProps) {
               placeholder="john.doe@example.com"
               required
             />
-            <div className="space-y-2">
+            <div className="stack-y-2">
               <Button
                 className="w-full justify-center bg-white hover:bg-black hover:text-white"
                 type="submit"
diff --git a/apps/web/modules/auth/login-view.tsx b/apps/web/modules/auth/login-view.tsx
index 893ed6747c..3912ee0418 100644
--- a/apps/web/modules/auth/login-view.tsx
+++ b/apps/web/modules/auth/login-view.tsx
@@ -177,7 +177,7 @@ export default function Login({
     : isSAMLLoginEnabled && !isPending && data?.connectionExists;
 
   return (
-    <div className="dark:bg-brand dark:text-brand-contrast text-emphasis min-h-screen [--cal-brand-emphasis:#101010] [--cal-brand-subtle:#9CA3AF] [--cal-brand-text:white] [--cal-brand:#111827] dark:[--cal-brand-emphasis:#e1e1e1] dark:[--cal-brand-text:black] dark:[--cal-brand:white]">
+    <div className="text-emphasis min-h-screen [--cal-brand-emphasis:#101010] [--cal-brand-subtle:#9CA3AF] [--cal-brand-text:white] [--cal-brand:#111827] dark:[--cal-brand-emphasis:#e1e1e1] dark:[--cal-brand-text:black] dark:[--cal-brand:white]">
       <AuthContainer
         showLogo
         heading={twoFactorRequired ? t("2fa_code") : t("welcome_back")}
@@ -193,7 +193,7 @@ export default function Login({
         <FormProvider {...methods}>
           {!twoFactorRequired && (
             <>
-              <div className="space-y-3">
+              <div className="stack-y-3">
                 {isGoogleLoginEnabled && (
                   <Button
                     color="primary"
@@ -224,11 +224,11 @@ export default function Login({
               {(isGoogleLoginEnabled || displaySSOLogin) && (
                 <div className="my-8">
                   <div className="relative flex items-center">
-                    <div className="border-subtle flex-grow border-t" />
-                    <span className="text-subtle mx-2 flex-shrink text-sm font-normal leading-none">
+                    <div className="border-subtle grow border-t" />
+                    <span className="text-subtle mx-2 shrink text-sm font-normal leading-none">
                       {t("or").toLocaleLowerCase()}
                     </span>
-                    <div className="border-subtle flex-grow border-t" />
+                    <div className="border-subtle grow border-t" />
                   </div>
                 </div>
               )}
@@ -239,8 +239,8 @@ export default function Login({
             <div>
               <input defaultValue={csrfToken || undefined} type="hidden" hidden {...register("csrfToken")} />
             </div>
-            <div className="space-y-6">
-              <div className={classNames("space-y-6", { hidden: twoFactorRequired })}>
+            <div className="stack-y-6">
+              <div className={classNames("stack-y-6", { hidden: twoFactorRequired })}>
                 <EmailField
                   id="email"
                   label={t("email_address")}
diff --git a/apps/web/modules/auth/logout-view.tsx b/apps/web/modules/auth/logout-view.tsx
index 7664ffdf3c..2faa0a7ca1 100644
--- a/apps/web/modules/auth/logout-view.tsx
+++ b/apps/web/modules/auth/logout-view.tsx
@@ -43,7 +43,7 @@ export function Logout(props: PageProps) {
   return (
     <AuthContainer showLogo>
       <div className="mb-4">
-        <div className="bg-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
+        <div className="bg-cal-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
           <Icon name="check" className="h-6 w-6 text-green-600" />
         </div>
         <div className="mt-3 text-center sm:mt-5">
diff --git a/apps/web/modules/auth/oauth2/authorize-view.tsx b/apps/web/modules/auth/oauth2/authorize-view.tsx
index a7734d215c..bcc7554c8e 100644
--- a/apps/web/modules/auth/oauth2/authorize-view.tsx
+++ b/apps/web/modules/auth/oauth2/authorize-view.tsx
@@ -116,7 +116,7 @@ export default function Authorize() {
           options={mappedProfiles}
         />
         <div className="mb-4 mt-5 font-medium">{t("allow_client_to", { clientName: client.name })}</div>
-        <ul className="space-y-4 text-sm">
+        <ul className="stack-y-4 text-sm">
           <li className="relative pl-5">
             <span className="absolute left-0">&#10003;</span>{" "}
             {t("associate_with_cal_account", { clientName: client.name })}
diff --git a/apps/web/modules/auth/platform/authorize-view.tsx b/apps/web/modules/auth/platform/authorize-view.tsx
index 241647befc..3b3e5bedd5 100644
--- a/apps/web/modules/auth/platform/authorize-view.tsx
+++ b/apps/web/modules/auth/platform/authorize-view.tsx
@@ -95,7 +95,7 @@ export default function Authorize() {
         <div className="mb-4 mt-5 font-medium text-black">
           {t("allow_client_to", { clientName: client.name })}
         </div>
-        <ul className="space-y-4 text-sm text-black">{permissions}</ul>
+        <ul className="stack-y-4 text-sm text-black">{permissions}</ul>
         <div className="bg-subtle mb-8 mt-8 flex rounded-md p-3">
           <div>
             <Icon name="info" className="mr-1 mt-0.5 h-4 w-4" />
@@ -110,7 +110,7 @@ export default function Authorize() {
         <div className="border-subtle border- -mx-9 mb-4 border-b" />
         <div className="flex justify-end">
           <Button
-            className="bg-primary mr-2 text-black"
+            className="bg-primary-default mr-2 text-black"
             onClick={() => {
               router.back();
             }}>
diff --git a/apps/web/modules/auth/setup-view.tsx b/apps/web/modules/auth/setup-view.tsx
index 2cf52db3b1..a3069ca856 100644
--- a/apps/web/modules/auth/setup-view.tsx
+++ b/apps/web/modules/auth/setup-view.tsx
@@ -103,7 +103,7 @@ export function Setup(props: PageProps) {
   steps.push({
     title: t("enable_apps"),
     description: t("enable_apps_description", { appName: APP_NAME }),
-    contentClassname: "!pb-0 mb-[-1px]",
+    contentClassname: "pb-0! -mb-px",
     customActions: true,
     content: (setIsPending, nav) => {
       return (
@@ -113,7 +113,7 @@ export function Setup(props: PageProps) {
           classNames={{
             form: "mb-4 rounded-md bg-default px-0 pt-0 md:max-w-full",
             appCategoryNavigationContainer: "max-h-[400px] overflow-y-auto md:p-4",
-            verticalTabsItem: "!w-48 md:p-4",
+            verticalTabsItem: "w-48! md:p-4",
           }}
           baseURL={`/auth/setup?step=${steps.length}`}
           useQueryParam={true}
diff --git a/apps/web/modules/auth/signin-view.tsx b/apps/web/modules/auth/signin-view.tsx
index dd16087a8c..486bb461df 100644
--- a/apps/web/modules/auth/signin-view.tsx
+++ b/apps/web/modules/auth/signin-view.tsx
@@ -14,7 +14,7 @@ function Signin({ providers }: PageProps) {
   }
 
   return (
-    <div className="center mt-10 justify-between space-y-5 text-center align-baseline">
+    <div className="center mt-10 justify-between stack-y-5 text-center align-baseline">
       {Object.values(providers).map((provider) => {
         return (
           <div key={provider.name}>
diff --git a/apps/web/modules/auth/verify-email-view.tsx b/apps/web/modules/auth/verify-email-view.tsx
index a78ca6c41c..88716677e6 100644
--- a/apps/web/modules/auth/verify-email-view.tsx
+++ b/apps/web/modules/auth/verify-email-view.tsx
@@ -32,7 +32,7 @@ function VerifyEmailPage() {
     return null;
   }
   return (
-    <div className="h-[100vh] w-full ">
+    <div className="h-screen w-full ">
       <div className="flex h-full w-full flex-col items-center justify-center">
         <div className="max-w-3xl">
           <EmptyScreen
diff --git a/apps/web/modules/auth/verify-view.tsx b/apps/web/modules/auth/verify-view.tsx
index f9a07aafd2..36ab3dca21 100644
--- a/apps/web/modules/auth/verify-view.tsx
+++ b/apps/web/modules/auth/verify-view.tsx
@@ -59,7 +59,7 @@ const querySchema = z.object({
 
 const PaymentFailedIcon = () => (
   <div className="rounded-full bg-orange-900 p-3">
-    <Icon name="triangle-alert" className="h-6 w-6 flex-shrink-0 p-0.5 font-extralight text-orange-100" />
+    <Icon name="triangle-alert" className="h-6 w-6 shrink-0 p-0.5 font-extralight text-orange-100" />
   </div>
 );
 
@@ -108,7 +108,7 @@ const PaymentSuccess = () => (
 
 const MailOpenIcon = () => (
   <div className="bg-default rounded-full p-3">
-    <Icon name="mail-open" className="text-emphasis h-12 w-12 flex-shrink-0 p-0.5 font-extralight" />
+    <Icon name="mail-open" className="text-emphasis h-12 w-12 shrink-0 p-0.5 font-extralight" />
   </div>
 );
 
@@ -162,7 +162,7 @@ export default function Verify({ EMAIL_FROM }: { EMAIL_FROM?: string }) {
   }
 
   return (
-    <div className="text-default bg-muted bg-opacity-90 backdrop-blur-md backdrop-grayscale backdrop-filter">
+    <div className="text-default bg-cal-muted/90 backdrop-blur-md backdrop-grayscale backdrop-filter">
       <div className="flex min-h-screen flex-col items-center justify-center px-6">
         <div className="border-subtle bg-default m-10 flex max-w-2xl flex-col items-center rounded-xl border px-8 py-14 text-left">
           {hasPaymentFailed ? (
diff --git a/apps/web/modules/bookings/components/BookingDetailsSheet.tsx b/apps/web/modules/bookings/components/BookingDetailsSheet.tsx
index fa1f36961b..5df998b233 100644
--- a/apps/web/modules/bookings/components/BookingDetailsSheet.tsx
+++ b/apps/web/modules/bookings/components/BookingDetailsSheet.tsx
@@ -191,9 +191,9 @@ function BookingDetailsSheetInner({
           </div>
         </SheetHeader>
 
-        <SheetBody className="space-y-6">
-          <div className="space-y-6">
-            <div className="space-y-1">
+        <SheetBody className="stack-y-6">
+          <div className="stack-y-6">
+            <div className="stack-y-1">
               <SheetTitle className="text-2xl font-semibold">{booking.title}</SheetTitle>
               <p className="text-subtle text-sm">
                 {startTime.format("dddd, MMMM D, YYYY h:mma")} - {endTime.format("h:mma")} (
@@ -277,7 +277,7 @@ function WhoSection({ booking }: { booking: BookingOutput }) {
   const { t } = useLocale();
   return (
     <Section title={t("who")}>
-      <div className="space-y-4">
+      <div className="stack-y-4">
         {booking.user && (
           <div className="flex items-center gap-4">
             <Avatar
@@ -340,12 +340,12 @@ function WhereSection({ booking, meta }: { booking: BookingOutput; meta: Booking
           // eslint-disable-next-line @next/next/no-img-element
           <img
             src={provider.iconUrl}
-            className="h-4 w-4 flex-shrink-0 rounded-sm"
+            className="h-4 w-4 shrink-0 rounded-sm"
             alt={`${provider?.label} logo`}
           />
         )}
         <div className="flex min-w-0 items-baseline gap-1">
-          <span className="text-default flex-shrink-0">{provider?.label}:</span>
+          <span className="text-default shrink-0">{provider?.label}:</span>
           <a
             href={locationToDisplay}
             target="_blank"
@@ -502,7 +502,7 @@ function Section({
   children: React.ReactNode;
 }) {
   return (
-    <div className={classNames("space-y-1", className)}>
+    <div className={classNames("stack-y-1", className)}>
       <h3 className="text-subtle text-xs font-semibold">{title}</h3>
       {children}
     </div>
diff --git a/apps/web/modules/bookings/views/booking-dry-run-success-view.tsx b/apps/web/modules/bookings/views/booking-dry-run-success-view.tsx
index bdc83e922e..83e5d1799d 100644
--- a/apps/web/modules/bookings/views/booking-dry-run-success-view.tsx
+++ b/apps/web/modules/bookings/views/booking-dry-run-success-view.tsx
@@ -39,7 +39,7 @@ export default function DryRunSuccessful() {
   return (
     <div className="flex h-screen">
       <div className="bg-default m-auto rounded-md p-10 text-center">
-        <div className="bg-success mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full">
+        <div className="bg-cal-success mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full">
           <Icon name="check" className="h-6 w-6 text-green-600 dark:text-green-400" />
         </div>
         <h1 className="text-emphasis mb-4 text-2xl font-medium" data-testid="dry-run-success-msg">
diff --git a/apps/web/modules/bookings/views/bookings-single-view.tsx b/apps/web/modules/bookings/views/bookings-single-view.tsx
index 22acceb5cf..f501a23af6 100644
--- a/apps/web/modules/bookings/views/bookings-single-view.tsx
+++ b/apps/web/modules/bookings/views/bookings-single-view.tsx
@@ -462,7 +462,7 @@ export default function Success(props: PageProps) {
               <div
                 className={classNames(
                   "inline-block transform overflow-hidden rounded-lg border sm:my-8 sm:max-w-xl",
-                  !isBackgroundTransparent && " bg-default dark:bg-muted border-booker border-booker-width",
+                  !isBackgroundTransparent && " bg-default dark:bg-cal-muted border-booker border-booker-width",
                   "px-8 pb-4 pt-5 text-left align-bottom transition-all sm:w-full sm:py-8 sm:align-middle"
                 )}
                 role="dialog"
@@ -490,7 +490,7 @@ export default function Success(props: PageProps) {
                           isRoundRobin &&
                             "border-cal-bg dark:border-cal-bg-muted absolute bottom-0 right-0 z-10 h-12 w-12 border-8",
                           !giphyImage && isReschedulable && !needsConfirmation && !isAwaitingPayment
-                            ? "bg-success"
+                            ? "bg-cal-success"
                             : "",
                           !giphyImage && isReschedulable && (needsConfirmation || isAwaitingPayment)
                             ? "bg-subtle"
@@ -568,7 +568,7 @@ export default function Success(props: PageProps) {
                               {isCancelled ? t("reason") : t("reschedule_reason")}
                             </div>
                             <div className="col-span-2 mb-6 last:mb-0">
-                              <p className="break-words">{cancellationReason}</p>
+                              <p className="wrap-break-word">{cancellationReason}</p>
                             </div>
                           </>
                         )}
@@ -578,7 +578,7 @@ export default function Success(props: PageProps) {
                             <>
                               <div className="font-medium">{t("cancelled_by")}</div>
                               <div className="col-span-2 mb-6 last:mb-0">
-                                <p className="break-words">{bookingInfo?.cancelledBy}</p>
+                                <p className="wrap-break-word">{bookingInfo?.cancelledBy}</p>
                               </div>
                             </>
                           )}
@@ -586,7 +586,7 @@ export default function Success(props: PageProps) {
                           <>
                             <div className="font-medium">{t("rescheduled_by")}</div>
                             <div className="col-span-2 mb-6 last:mb-0">
-                              <p className="break-words">{previousBooking?.rescheduledBy}</p>
+                              <p className="wrap-break-word">{previousBooking?.rescheduledBy}</p>
                               <Link className="text-sm underline" href={`/booking/${previousBooking?.uid}`}>
                                 {t("original_booking")}
                               </Link>
@@ -711,7 +711,7 @@ export default function Success(props: PageProps) {
                           <>
                             <div className="mt-9 font-medium">{t("additional_notes")}</div>
                             <div className="col-span-2 mb-2 mt-9">
-                              <p className="whitespace-pre-line break-words">{bookingInfo.description}</p>
+                              <p className="whitespace-pre-line wrap-break-word">{bookingInfo.description}</p>
                             </div>
                           </>
                         )}
@@ -738,7 +738,7 @@ export default function Success(props: PageProps) {
                                 <div className="col-span-2 mb-2 mt-2">
                                   {Object.entries(utmParams).filter(([_, value]) => Boolean(value)).length >
                                   0 ? (
-                                    <ul className="list-disc space-y-1 p-1 pl-5 sm:w-80">
+                                    <ul className="list-disc stack-y-1 p-1 pl-5 sm:w-80">
                                       {Object.entries(utmParams)
                                         .filter(([_, value]) => Boolean(value))
                                         .map(([key, value]) => (
@@ -783,7 +783,7 @@ export default function Success(props: PageProps) {
                                 }}
                               />
                               <p
-                                className="text-default break-words"
+                                className="text-default wrap-break-word"
                                 data-testid="field-response"
                                 data-fob-field={field.name}>
                                 {field.type === "boolean"
@@ -1053,7 +1053,7 @@ export default function Success(props: PageProps) {
                           </button>
                         ))}
                       </div>
-                      <div className="my-4 space-y-1 text-center">
+                      <div className="my-4 stack-y-1 text-center">
                         <h2 className="font-cal text-lg">{t("submitted_feedback")}</h2>
                         <p className="text-sm">{rateValue < 4 ? t("how_can_we_improve") : t("most_liked")}</p>
                       </div>
diff --git a/apps/web/modules/event-types/views/event-types-listing-view.tsx b/apps/web/modules/event-types/views/event-types-listing-view.tsx
index 4beb30e0d6..8be96061c7 100644
--- a/apps/web/modules/event-types/views/event-types-listing-view.tsx
+++ b/apps/web/modules/event-types/views/event-types-listing-view.tsx
@@ -125,7 +125,7 @@ const InfiniteTeamsTab: FC<InfiniteTeamsTabProps> = (props) => {
       <TextField
         className="max-w-64"
         addOnLeading={<Icon name="search" className="text-subtle h-4 w-4" />}
-        containerClassName="max-w-64 focus:!ring-offset-0 mb-4"
+        containerClassName="max-w-64 focus:ring-offset-0! mb-4"
         type="search"
         value={searchTerm}
         autoComplete="false"
@@ -483,7 +483,7 @@ export const InfiniteEventTypeList = ({
 
   return (
     <div className="bg-default border-subtle flex flex-col overflow-hidden rounded-md border">
-      <ul ref={parent} className="divide-subtle !static w-full divide-y" data-testid="event-types">
+      <ul ref={parent} className="divide-subtle static! w-full divide-y" data-testid="event-types">
         {pages.map((page, pageIdx) => {
           return page?.eventTypes?.map((type, index) => {
             const embedLink = `${group.profile.slug}/${type.slug}`;
@@ -505,7 +505,7 @@ export const InfiniteEventTypeList = ({
               type.schedulingType !== SchedulingType.MANAGED;
             return (
               <li key={type.id}>
-                <div className="hover:bg-muted flex w-full items-center justify-between transition">
+                <div className="hover:bg-cal-muted flex w-full items-center justify-between transition">
                   <div className="group flex w-full max-w-full items-center justify-between overflow-hidden px-4 py-4 sm:px-6">
                     {!(firstItem && firstItem.id === type.id) && (
                       <ArrowButton
@@ -617,7 +617,7 @@ export const InfiniteEventTypeList = ({
                                   color="secondary"
                                   StartIcon="ellipsis"
                                   // Unusual practice to use radix state open but for some reason this dropdown and only this dropdown clears the border radius of this button.
-                                  className="ltr:radix-state-open:rounded-r-[--btn-group-radius] rtl:radix-state-open:rounded-l-[--btn-group-radius]"
+                                  className="ltr:radix-state-open:rounded-r-(--btn-group-radius) rtl:radix-state-open:rounded-l-(--btn-group-radius)"
                                 />
                               </DropdownMenuTrigger>
                               <DropdownMenuContent>
diff --git a/apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx b/apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx
index 29d41e709e..aef2a4e7ec 100644
--- a/apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx
+++ b/apps/web/modules/getting-started/[[...step]]/onboarding-view.tsx
@@ -143,7 +143,7 @@ const OnboardingPage = (props: PageProps) => {
   return (
     <div
       className={classNames(
-        "dark:bg-brand dark:text-brand-contrast text-emphasis min-h-screen [--cal-brand:#111827] dark:[--cal-brand:#FFFFFF]",
+        "text-emphasis min-h-screen [--cal-brand:#111827] dark:[--cal-brand:#FFFFFF]",
         "[--cal-brand-emphasis:#101010] dark:[--cal-brand-emphasis:#e1e1e1]",
         "[--cal-brand-subtle:#9CA3AF]",
         "[--cal-brand-text:#FFFFFF]  dark:[--cal-brand-text:#000000]",
diff --git a/apps/web/modules/insights/insights-routing-view.tsx b/apps/web/modules/insights/insights-routing-view.tsx
index 9e8b23aa6a..92aadadb61 100644
--- a/apps/web/modules/insights/insights-routing-view.tsx
+++ b/apps/web/modules/insights/insights-routing-view.tsx
@@ -22,7 +22,7 @@ export default function InsightsRoutingFormResponsesPage({ timeZone }: { timeZon
   return (
     <DataTableProvider tableIdentifier={pathname} useSegments={useSegments} timeZone={timeZone}>
       <InsightsOrgTeamsProvider>
-        <div className="mb-4 space-y-4">
+        <div className="mb-4 stack-y-4">
           <RoutingFormResponsesTable />
 
           <RoutingFunnel />
diff --git a/apps/web/modules/insights/insights-view.tsx b/apps/web/modules/insights/insights-view.tsx
index 5c2003fe82..cab0603825 100644
--- a/apps/web/modules/insights/insights-view.tsx
+++ b/apps/web/modules/insights/insights-view.tsx
@@ -100,7 +100,7 @@ function InsightsPageContent() {
         <TimezoneBadge />
       </div>
 
-      <div className="my-4 space-y-4">
+      <div className="my-4 stack-y-4">
         <BookingKPICards />
 
         <EventTrendsChart />
diff --git a/apps/web/modules/more/more-page-view.tsx b/apps/web/modules/more/more-page-view.tsx
index b5ef19be69..e2978e8af4 100644
--- a/apps/web/modules/more/more-page-view.tsx
+++ b/apps/web/modules/more/more-page-view.tsx
@@ -8,7 +8,7 @@ export default function MorePage() {
   const { t } = useLocale();
   return (
     <Shell>
-      <div className="max-w-screen-lg">
+      <div className="max-w-(--breakpoint-lg)">
         <MobileNavigationMoreItems />
         <p className="text-subtle mt-6 text-xs leading-tight md:hidden">{t("more_page_footer")}</p>
       </div>
diff --git a/apps/web/modules/settings/billing/billing-view.tsx b/apps/web/modules/settings/billing/billing-view.tsx
index 1e324a34da..5db170580c 100644
--- a/apps/web/modules/settings/billing/billing-view.tsx
+++ b/apps/web/modules/settings/billing/billing-view.tsx
@@ -34,7 +34,7 @@ export const CtaRow = ({ title, description, className, children }: CtaRowProps)
           <h2 className="text-base font-semibold">{title}</h2>
           <p>{description}</p>
         </div>
-        <div className="flex-shrink-0 pt-3 sm:ml-auto sm:pl-3 sm:pt-0">{children}</div>
+        <div className="shrink-0 pt-3 sm:ml-auto sm:pl-3 sm:pt-0">{children}</div>
       </section>
     </>
   );
@@ -77,7 +77,7 @@ const BillingView = () => {
 
   return (
     <>
-      <div className="bg-muted border-muted mt-5 rounded-xl border p-1">
+      <div className="bg-cal-muted border-muted mt-5 rounded-xl border p-1">
         <div className="bg-default border-muted flex rounded-[10px] border px-5 py-4">
           <div className="flex w-full flex-col gap-1">
             <h3 className="text-emphasis text-sm font-semibold leading-none">{t("manage_billing")}</h3>
diff --git a/apps/web/modules/settings/billing/components/BillingCredits.tsx b/apps/web/modules/settings/billing/components/BillingCredits.tsx
index 18bb117fb0..99befa80df 100644
--- a/apps/web/modules/settings/billing/components/BillingCredits.tsx
+++ b/apps/web/modules/settings/billing/components/BillingCredits.tsx
@@ -179,7 +179,7 @@ export default function BillingCredits() {
 
   return (
     <>
-      <div className="bg-muted border-muted mt-5 rounded-xl border p-1">
+      <div className="bg-cal-muted border-muted mt-5 rounded-xl border p-1">
         <div className="flex flex-col gap-1 px-4 py-5">
           <h2 className="text-default text-base font-semibold leading-none">{t("credits")}</h2>
           <p className="text-subtle text-sm font-medium leading-tight">{t("view_and_manage_credits")}</p>
diff --git a/apps/web/modules/settings/billing/components/BillingCreditsSkeleton.tsx b/apps/web/modules/settings/billing/components/BillingCreditsSkeleton.tsx
index 6de0b9576b..3d3f5546d6 100644
--- a/apps/web/modules/settings/billing/components/BillingCreditsSkeleton.tsx
+++ b/apps/web/modules/settings/billing/components/BillingCreditsSkeleton.tsx
@@ -3,7 +3,7 @@ import { SkeletonText, SkeletonContainer, SkeletonButton } from "@calcom/ui/comp
 export function BillingCreditsSkeleton() {
   return (
     <SkeletonContainer>
-      <div className="bg-muted border-muted mt-5 rounded-xl p-1">
+      <div className="bg-cal-muted border-muted mt-5 rounded-xl p-1">
         <div className="flex flex-col gap-1 px-4 py-5">
           <SkeletonText className="h-4 w-20" /> {/* Credits title */}
           <SkeletonText className="h-4 w-48" /> {/* View and manage credits description */}
diff --git a/apps/web/modules/settings/developer/api-keys-skeleton.tsx b/apps/web/modules/settings/developer/api-keys-skeleton.tsx
index 5b9a5a5b2c..62f5837020 100644
--- a/apps/web/modules/settings/developer/api-keys-skeleton.tsx
+++ b/apps/web/modules/settings/developer/api-keys-skeleton.tsx
@@ -14,7 +14,7 @@ export const SkeletonLoader = () => {
       description={t("create_first_api_key_description", { appName: APP_NAME })}
       borderInShellHeader={true}>
       <SkeletonContainer>
-        <div className="divide-subtle border-subtle space-y-6 rounded-b-lg border border-t-0 px-6 py-4">
+        <div className="divide-subtle border-subtle stack-y-6 rounded-b-lg border border-t-0 px-6 py-4">
           <SkeletonText className="h-8 w-full" />
           <SkeletonText className="h-8 w-full" />
         </div>
diff --git a/apps/web/modules/settings/my-account/appearance-skeleton.tsx b/apps/web/modules/settings/my-account/appearance-skeleton.tsx
index 07e9e59cab..f2ebd0a365 100644
--- a/apps/web/modules/settings/my-account/appearance-skeleton.tsx
+++ b/apps/web/modules/settings/my-account/appearance-skeleton.tsx
@@ -13,8 +13,8 @@ export const SkeletonLoader = () => {
         <div className="border-subtle mt-6 flex items-center rounded-t-xl border p-6 text-sm">
           <SkeletonText className="h-8 w-1/3" />
         </div>
-        <div className="border-subtle space-y-6 border-x px-4 py-6 sm:px-6">
-          <div className="[&>*]:bg-emphasis flex w-full items-center justify-center gap-x-2 [&>*]:animate-pulse">
+        <div className="border-subtle stack-y-6 border-x px-4 py-6 sm:px-6">
+          <div className="[&>*]:bg-emphasis flex w-full items-center justify-center gap-x-2 *:animate-pulse">
             <div className="h-32 flex-1 rounded-md p-5" />
             <div className="h-32 flex-1 rounded-md p-5" />
             <div className="h-32 flex-1 rounded-md p-5" />
diff --git a/apps/web/modules/settings/my-account/general-skeleton.tsx b/apps/web/modules/settings/my-account/general-skeleton.tsx
index 7ca42e5d5d..f3400a4602 100644
--- a/apps/web/modules/settings/my-account/general-skeleton.tsx
+++ b/apps/web/modules/settings/my-account/general-skeleton.tsx
@@ -9,7 +9,7 @@ export const SkeletonLoader = () => {
   return (
     <SettingsHeader title={t("general")} description={t("general_description")} borderInShellHeader={true}>
       <SkeletonContainer>
-        <div className="border-subtle space-y-6 rounded-b-xl border border-t-0 px-4 py-8 sm:px-6">
+        <div className="border-subtle stack-y-6 rounded-b-xl border border-t-0 px-4 py-8 sm:px-6">
           <SkeletonText className="h-8 w-full" />
           <SkeletonText className="h-8 w-full" />
           <SkeletonText className="h-8 w-full" />
diff --git a/apps/web/modules/settings/my-account/general-view.tsx b/apps/web/modules/settings/my-account/general-view.tsx
index 4ad664fedf..7b0e458b9c 100644
--- a/apps/web/modules/settings/my-account/general-view.tsx
+++ b/apps/web/modules/settings/my-account/general-view.tsx
@@ -211,7 +211,7 @@ const GeneralView = ({ user, travelSchedules }: GeneralViewProps) => {
                 {t("schedule_timezone_change")}
               </Button>
             ) : (
-              <div className="bg-muted border-subtle mt-2 rounded-md border p-4">
+              <div className="bg-cal-muted border-subtle mt-2 rounded-md border p-4">
                 <Label>{t("travel_schedule")}</Label>
                 <div className="border-subtle bg-default mt-4 rounded-md border text-sm">
                   {watchedTzSchedules.map((schedule, index) => {
diff --git a/apps/web/modules/settings/my-account/profile-skeleton.tsx b/apps/web/modules/settings/my-account/profile-skeleton.tsx
index a135c5a779..a2a1ab4f4c 100644
--- a/apps/web/modules/settings/my-account/profile-skeleton.tsx
+++ b/apps/web/modules/settings/my-account/profile-skeleton.tsx
@@ -18,7 +18,7 @@ export const SkeletonLoader = () => {
       description={t("profile_description", { appName: APP_NAME })}
       borderInShellHeader={true}>
       <SkeletonContainer>
-        <div className="border-subtle space-y-6 rounded-b-lg border border-t-0 px-4 py-8">
+        <div className="border-subtle stack-y-6 rounded-b-lg border border-t-0 px-4 py-8">
           <div className="flex items-center">
             <SkeletonAvatar className="me-4 mt-0 h-16 w-16 px-4" />
             <SkeletonButton className="h-6 w-32 rounded-md p-5" />
diff --git a/apps/web/modules/settings/my-account/profile-view.tsx b/apps/web/modules/settings/my-account/profile-view.tsx
index bed68499b3..d588896a89 100644
--- a/apps/web/modules/settings/my-account/profile-view.tsx
+++ b/apps/web/modules/settings/my-account/profile-view.tsx
@@ -658,7 +658,7 @@ const ProfileForm = ({
         </div>
         {extraField}
         <p className="text-subtle mt-1 flex gap-1 text-sm">
-          <Icon name="info" className="mt-0.5 flex-shrink-0" />
+          <Icon name="info" className="mt-0.5 shrink-0" />
           <span className="flex-1">{t("tip_username_plus")}</span>
         </p>
         <div className="mt-6">
@@ -719,7 +719,7 @@ const ProfileForm = ({
         {usersAttributes && usersAttributes?.length > 0 && (
           <div className="mt-6 flex flex-col">
             <Label>{t("attributes")}</Label>
-            <div className="flex flex-col space-y-4">
+            <div className="flex flex-col stack-y-4">
               {usersAttributes.map((attribute, index) => (
                 <>
                   <DisplayInfo
diff --git a/apps/web/modules/settings/organizations/new/_components/AddNewTeamsForm.tsx b/apps/web/modules/settings/organizations/new/_components/AddNewTeamsForm.tsx
index 3dbec49cc6..b5f2e7ed0c 100644
--- a/apps/web/modules/settings/organizations/new/_components/AddNewTeamsForm.tsx
+++ b/apps/web/modules/settings/organizations/new/_components/AddNewTeamsForm.tsx
@@ -37,10 +37,10 @@ export const AddNewTeamsForm = () => {
 
   if (isLoading) {
     return (
-      <SkeletonContainer as="div" className="space-y-6">
-        <div className="space-y-4">
+      <SkeletonContainer as="div" className="stack-y-6">
+        <div className="stack-y-4">
           <SkeletonText className="h-4 w-32" />
-          <div className="space-y-2">
+          <div className="stack-y-2">
             {[...Array(2)].map((_, i) => (
               <div key={i} className="flex items-center space-x-2">
                 <SkeletonText className="h-5 w-5" />
@@ -49,9 +49,9 @@ export const AddNewTeamsForm = () => {
             ))}
           </div>
         </div>
-        <div className="space-y-4">
+        <div className="stack-y-4">
           <SkeletonText className="h-4 w-32" />
-          <div className="space-y-2">
+          <div className="stack-y-2">
             {[...Array(3)].map((_, i) => (
               <SkeletonText key={i} className="h-10 w-full" />
             ))}
@@ -160,7 +160,7 @@ const AddNewTeamsFormChild = ({ teams }: { teams: { id: number; name: string; sl
             <label className="text-emphasis mb-2 block text-sm font-medium leading-none">
               Move existing teams
             </label>
-            <ul className="mb-8 space-y-4">
+            <ul className="mb-8 stack-y-4">
               {moveTeams.map((team, index) => {
                 const currentTeam = teams.find((t) => t.id === team.id);
                 // If the team slug conflicts with the org slug, this team must be moved
diff --git a/apps/web/modules/settings/organizations/new/_components/OnboardMembersView.tsx b/apps/web/modules/settings/organizations/new/_components/OnboardMembersView.tsx
index 42c421d2c8..a1141a2256 100644
--- a/apps/web/modules/settings/organizations/new/_components/OnboardMembersView.tsx
+++ b/apps/web/modules/settings/organizations/new/_components/OnboardMembersView.tsx
@@ -136,7 +136,7 @@ export const AddNewTeamMembersForm = () => {
 
   if (isLoading) {
     return (
-      <SkeletonContainer as="div" className="space-y-6">
+      <SkeletonContainer as="div" className="stack-y-6">
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
         <SkeletonButton className="mr-6 h-8 w-20 rounded-md p-5" />
@@ -151,10 +151,10 @@ export const AddNewTeamMembersForm = () => {
           <Alert severity="error" message={orgCreation.errorMessage} />
         </div>
       )}
-      <div className="space-y-6">
+      <div className="stack-y-6">
         <div className="flex space-x-3">
           <form onSubmit={onSubmit} className="flex w-full items-end space-x-2">
-            <div className="flex-grow">
+            <div className="grow">
               <TextField
                 label={t("email")}
                 type="email"
diff --git a/apps/web/modules/settings/organizations/new/_components/PaymentStatusView.tsx b/apps/web/modules/settings/organizations/new/_components/PaymentStatusView.tsx
index 52092ae2dd..972e4bb7df 100644
--- a/apps/web/modules/settings/organizations/new/_components/PaymentStatusView.tsx
+++ b/apps/web/modules/settings/organizations/new/_components/PaymentStatusView.tsx
@@ -34,7 +34,7 @@ const PaymentStatusView = () => {
 
   if (paymentStatus === "failed" || paymentError) {
     return (
-      <div className="flex min-h-[500px] flex-col items-center justify-center space-y-6 px-4 sm:px-6">
+      <div className="flex min-h-[500px] flex-col items-center justify-center stack-y-6 px-4 sm:px-6">
         <div className="flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
           <Icon name="x" className="h-6 w-6 text-red-600" />
         </div>
@@ -50,7 +50,7 @@ const PaymentStatusView = () => {
   }
 
   return (
-    <div className="flex min-h-[500px] flex-col items-center justify-center space-y-6 px-4 sm:px-6">
+    <div className="flex min-h-[500px] flex-col items-center justify-center stack-y-6 px-4 sm:px-6">
       <div className="flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
         <Icon name="check" className="h-6 w-6 text-green-600 dark:text-green-400" />
       </div>
diff --git a/apps/web/modules/settings/organizations/new/resume-view.tsx b/apps/web/modules/settings/organizations/new/resume-view.tsx
index f692b878cd..ce201863b4 100644
--- a/apps/web/modules/settings/organizations/new/resume-view.tsx
+++ b/apps/web/modules/settings/organizations/new/resume-view.tsx
@@ -63,7 +63,7 @@ const ResumeOnboardingView = () => {
 
   if (isLoadingOrgOnboarding) {
     return (
-      <SkeletonContainer className="space-y-4">
+      <SkeletonContainer className="stack-y-4">
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-4 w-3/4" />
         <SkeletonText className="h-4 w-1/2" />
@@ -101,7 +101,7 @@ const ResumeOnboardingView = () => {
 
   // Loading state while redirecting
   return (
-    <SkeletonContainer className="space-y-4">
+    <SkeletonContainer className="stack-y-4">
       <SkeletonText className="h-8 w-full" />
       <SkeletonText className="h-4 w-3/4" />
     </SkeletonContainer>
diff --git a/apps/web/modules/settings/organizations/privacy/components/blocklist-entry-details-sheet.tsx b/apps/web/modules/settings/organizations/privacy/components/blocklist-entry-details-sheet.tsx
index 1120d1ed0e..cbef51cc0d 100644
--- a/apps/web/modules/settings/organizations/privacy/components/blocklist-entry-details-sheet.tsx
+++ b/apps/web/modules/settings/organizations/privacy/components/blocklist-entry-details-sheet.tsx
@@ -55,16 +55,16 @@ export function BlocklistEntryDetailsSheet({
 
         <SheetBody className="px-6">
           {isLoading ? (
-            <div className="mt-3 space-y-3">
+            <div className="mt-3 stack-y-3">
               <SkeletonText className="h-6 w-32" />
               <SkeletonText className="h-40 w-full" />
             </div>
           ) : data?.entry ? (
-            <div className="mt-3 space-y-6">
+            <div className="mt-3 stack-y-6">
               <div className="bg-subtle rounded-xl p-1">
                 <h2 className="text-default p-5 text-sm font-semibold">{t("details")}</h2>
 
-                <div className="bg-default space-y-3 rounded-xl p-5">
+                <div className="bg-default stack-y-3 rounded-xl p-5">
                   <div>
                     <label className="text-default block text-sm font-semibold">
                       {data.entry.type === "EMAIL" ? t("email") : t("domain")}
@@ -115,7 +115,7 @@ export function BlocklistEntryDetailsSheet({
               <div className="bg-subtle rounded-xl p-1">
                 <h2 className="text-default p-5 text-sm font-semibold">{t("history")}</h2>
                 {data.auditHistory.length > 0 ? (
-                  <div className="space-y-3">
+                  <div className="stack-y-3">
                     {data.auditHistory.map((audit) => (
                       <div key={audit.id} className="bg-default border-subtle rounded-xl border p-4">
                         <div className="flex items-start justify-between">
diff --git a/apps/web/modules/settings/organizations/privacy/components/booking-report-entry-details-modal.tsx b/apps/web/modules/settings/organizations/privacy/components/booking-report-entry-details-modal.tsx
index 5d0858fd3d..2d71e0611a 100644
--- a/apps/web/modules/settings/organizations/privacy/components/booking-report-entry-details-modal.tsx
+++ b/apps/web/modules/settings/organizations/privacy/components/booking-report-entry-details-modal.tsx
@@ -104,10 +104,10 @@ export function BookingReportEntryDetailsModal({
       <DialogContent enableOverflow>
         <DialogHeader title={t("review_report") + ` - ${entry.bookerEmail}`} />
         <form onSubmit={handleSubmit(onSubmit)}>
-          <div className="space-y-5">
+          <div className="stack-y-5">
             <div className="bg-subtle rounded-xl p-1">
               <h2 className="text-emphasis px-5 py-4 text-base font-semibold">{t("details")}</h2>
-              <div className="bg-default space-y-4 rounded-xl p-5">
+              <div className="bg-default stack-y-4 rounded-xl p-5">
                 <div>
                   <label className="text-emphasis mb-1 block text-sm font-semibold">{t("email")}</label>
                   <p className="text-subtle text-sm">{entry.bookerEmail}</p>
diff --git a/apps/web/modules/settings/organizations/privacy/components/create-blocklist-entry-modal.tsx b/apps/web/modules/settings/organizations/privacy/components/create-blocklist-entry-modal.tsx
index 75645eb05f..3fe4ab7257 100644
--- a/apps/web/modules/settings/organizations/privacy/components/create-blocklist-entry-modal.tsx
+++ b/apps/web/modules/settings/organizations/privacy/components/create-blocklist-entry-modal.tsx
@@ -90,7 +90,7 @@ export function CreateBlocklistEntryModal({ isOpen, onClose }: CreateBlocklistEn
       <DialogContent enableOverflow>
         <DialogHeader title={t("add_to_blocklist")} />
         <form onSubmit={handleSubmit(onSubmit)}>
-          <div className="space-y-4">
+          <div className="stack-y-4">
             <div>
               <Label htmlFor="type" className="text-emphasis mb-2 block text-sm font-medium">
                 {t("what_would_you_like_to_block")}
diff --git a/apps/web/modules/settings/platform/billing/billing-view.tsx b/apps/web/modules/settings/platform/billing/billing-view.tsx
index 5d589f3949..4cf4ff062a 100644
--- a/apps/web/modules/settings/platform/billing/billing-view.tsx
+++ b/apps/web/modules/settings/platform/billing/billing-view.tsx
@@ -89,7 +89,7 @@ export default function PlatformBillingUpgrade() {
         subtitle={t("manage_billing_description")}
         isPlatformUser={true}>
         <>
-          <div className="border-subtle space-y-6 rounded-lg border px-6 py-8 text-sm sm:space-y-8">
+          <div className="border-subtle stack-y-6 rounded-lg border px-6 py-8 text-sm sm:stack-y-8">
             <CtaRow
               title={t("view_and_manage_billing_details")}
               description={t("view_and_edit_billing_details")}>
diff --git a/apps/web/modules/settings/security/impersonation-view.tsx b/apps/web/modules/settings/security/impersonation-view.tsx
index d8035aac5e..2f4cb8a0f6 100644
--- a/apps/web/modules/settings/security/impersonation-view.tsx
+++ b/apps/web/modules/settings/security/impersonation-view.tsx
@@ -12,7 +12,7 @@ import { showToast } from "@calcom/ui/components/toast";
 const SkeletonLoader = () => {
   return (
     <SkeletonContainer>
-      <div className="border-subtle space-y-6 border border-t-0 px-4 py-8 sm:px-6">
+      <div className="border-subtle stack-y-6 border border-t-0 px-4 py-8 sm:px-6">
         <SkeletonText className="h-8 w-full" />
       </div>
     </SkeletonContainer>
diff --git a/apps/web/modules/settings/security/password-view.tsx b/apps/web/modules/settings/security/password-view.tsx
index 68274643a0..cff4b55c7c 100644
--- a/apps/web/modules/settings/security/password-view.tsx
+++ b/apps/web/modules/settings/security/password-view.tsx
@@ -34,7 +34,7 @@ interface PasswordViewProps {
 const SkeletonLoader = () => {
   return (
     <SkeletonContainer>
-      <div className="border-subtle space-y-6 border-x px-4 py-8 sm:px-6">
+      <div className="border-subtle stack-y-6 border-x px-4 py-8 sm:px-6">
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
@@ -265,7 +265,7 @@ const PasswordView = ({ user }: PasswordViewProps) => {
                           : timeoutOptions[1]
                       }
                       isSearchable={false}
-                      className="block h-[36px] !w-auto min-w-0 flex-none rounded-md text-sm"
+                      className="block h-[36px] w-auto! min-w-0 flex-none rounded-md text-sm"
                       onChange={(event) => {
                         setSessionTimeout(event?.value);
                       }}
diff --git a/apps/web/modules/settings/security/two-factor-auth-view.tsx b/apps/web/modules/settings/security/two-factor-auth-view.tsx
index b579a6408f..1159a658aa 100644
--- a/apps/web/modules/settings/security/two-factor-auth-view.tsx
+++ b/apps/web/modules/settings/security/two-factor-auth-view.tsx
@@ -15,7 +15,7 @@ import EnableTwoFactorModal from "@components/settings/EnableTwoFactorModal";
 const SkeletonLoader = () => {
   return (
     <SkeletonContainer>
-      <div className="mb-8 mt-6 space-y-6">
+      <div className="mb-8 mt-6 stack-y-6">
         <div className="flex items-center">
           <SkeletonButton className="mr-6 h-8 w-20 rounded-md p-5" />
           <SkeletonText className="h-8 w-full" />
diff --git a/apps/web/modules/signup-view.tsx b/apps/web/modules/signup-view.tsx
index c0e180ddba..d4d8d05603 100644
--- a/apps/web/modules/signup-view.tsx
+++ b/apps/web/modules/signup-view.tsx
@@ -340,12 +340,12 @@ export default function Signup({
       ) : null}
       <div
         className={classNames(
-          "light bg-muted 2xl:bg-default flex min-h-screen w-full flex-col items-center justify-center [--cal-brand:#111827] dark:[--cal-brand:#FFFFFF]",
+          "light bg-cal-muted 2xl:bg-default flex min-h-screen w-full flex-col items-center justify-center [--cal-brand:#111827] dark:[--cal-brand:#FFFFFF]",
           "[--cal-brand-subtle:#9CA3AF]",
           "[--cal-brand-text:#FFFFFF] dark:[--cal-brand-text:#000000]",
           "[--cal-brand-emphasis:#101010] dark:[--cal-brand-emphasis:#e1e1e1] "
         )}>
-        <div className="bg-muted 2xl:border-subtle grid w-full max-w-[1440px] grid-cols-1 grid-rows-1 overflow-hidden lg:grid-cols-2 2xl:rounded-[20px] 2xl:border 2xl:py-6">
+        <div className="bg-cal-muted 2xl:border-subtle grid w-full max-w-[1440px] grid-cols-1 grid-rows-1 overflow-hidden lg:grid-cols-2 2xl:rounded-[20px] 2xl:border 2xl:py-6">
           {/* Left side */}
           <div className="ml-auto mr-auto mt-0 flex w-full max-w-xl flex-col px-4 pt-6 sm:px-16 md:px-20 lg:mt-24 2xl:px-28">
             {displayBackButton && (
@@ -575,11 +575,11 @@ export default function Signup({
                 {isGoogleLoginEnabled && (
                   <div className="mt-6">
                     <div className="relative flex items-center">
-                      <div className="border-subtle flex-grow border-t" />
-                      <span className="text-subtle mx-2 flex-shrink text-sm font-normal leading-none">
+                      <div className="border-subtle grow border-t" />
+                      <span className="text-subtle mx-2 shrink text-sm font-normal leading-none">
                         {t("or").toLocaleLowerCase()}
                       </span>
-                      <div className="border-subtle flex-grow border-t" />
+                      <div className="border-subtle grow border-t" />
                     </div>
                   </div>
                 )}
@@ -699,7 +699,7 @@ export default function Signup({
                 </div>
               </>
             )}
-            <div className="border-default hidden rounded-bl-2xl rounded-br-none rounded-tl-2xl border border-r-0 border-dashed bg-black/[3%] dark:bg-white/5 lg:block lg:py-[6px] lg:pl-[6px]">
+            <div className="border-default hidden rounded-bl-2xl rounded-br-none rounded-tl-2xl border border-r-0 border-dashed bg-black/3 dark:bg-white/5 lg:block lg:py-[6px] lg:pl-[6px]">
               <img className="block dark:hidden" src="/mock-event-type-list.svg" alt="Cal.com Booking Page" />
               <img
                 className="hidden dark:block"
diff --git a/apps/web/modules/team/team-view.tsx b/apps/web/modules/team/team-view.tsx
index 3bc9b1ee45..93a0816b43 100644
--- a/apps/web/modules/team/team-view.tsx
+++ b/apps/web/modules/team/team-view.tsx
@@ -65,7 +65,7 @@ function TeamPage({ team, considerUnpublished, isValidOrgDomain }: PageProps) {
         <li
           key={index}
           className={classNames(
-            "bg-default hover:bg-muted border-subtle group relative border-b transition first:rounded-t-md last:rounded-b-md last:border-b-0",
+            "bg-default hover:bg-cal-muted border-subtle group relative border-b transition first:rounded-t-md last:rounded-b-md last:border-b-0",
             !isEmbed && "bg-default"
           )}>
           <div className="px-6 py-4 ">
@@ -81,19 +81,14 @@ function TeamPage({ team, considerUnpublished, isValidOrgDomain }: PageProps) {
               }}
               data-testid="event-type-link"
               className="flex justify-between">
-              <div className="flex-shrink">
+              <div className="shrink">
                 <div className="flex flex-wrap items-center space-x-2 rtl:space-x-reverse">
                   <h2 className=" text-default text-sm font-semibold">{type.title}</h2>
                 </div>
                 <EventTypeDescription className="text-sm" eventType={type} />
               </div>
               <div className="mt-1 self-center">
-                <UserAvatarGroup
-                  truncateAfter={4}
-                  className="flex flex-shrink-0"
-                  size="sm"
-                  users={type.users}
-                />
+                <UserAvatarGroup truncateAfter={4} className="flex shrink-0" size="sm" users={type.users} />
               </div>
             </Link>
           </div>
@@ -104,13 +99,13 @@ function TeamPage({ team, considerUnpublished, isValidOrgDomain }: PageProps) {
 
   const SubTeams = () =>
     team.children.length ? (
-      <ul className="divide-subtle border-subtle bg-default !static w-full divide-y rounded-md border">
+      <ul className="divide-subtle border-subtle bg-default static! w-full divide-y rounded-md border">
         {team.children.map((ch, i) => {
           const memberCount = team.members.filter(
             (mem) => mem.subteams?.includes(ch.slug) && mem.accepted
           ).length;
           return (
-            <li key={i} className="hover:bg-muted w-full rounded-md transition">
+            <li key={i} className="hover:bg-cal-muted w-full rounded-md transition">
               <Link href={`/${ch.slug}`} className="flex items-center justify-between">
                 <div className="flex items-center px-5 py-5">
                   <div className="ms-3 inline-block truncate">
@@ -134,7 +129,7 @@ function TeamPage({ team, considerUnpublished, isValidOrgDomain }: PageProps) {
         })}
       </ul>
     ) : (
-      <div className="space-y-6" data-testid="event-types">
+      <div className="stack-y-6" data-testid="event-types">
         <div className="overflow-hidden rounded-sm border dark:border-gray-900">
           <div className="text-muted p-8 text-center">
             <h2 className="font-cal text-emphasis mb-2 text-3xl">{` ${t("org_no_teams_yet")}`}</h2>
@@ -160,8 +155,7 @@ function TeamPage({ team, considerUnpublished, isValidOrgDomain }: PageProps) {
           {!isBioEmpty && (
             <>
               <div
-                className="  text-subtle break-words text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
-                 
+                className="  text-subtle wrap-break-word text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
                 dangerouslySetInnerHTML={{ __html: team.safeBio }}
               />
             </>
diff --git a/apps/web/modules/upgrade/upgrade-view.tsx b/apps/web/modules/upgrade/upgrade-view.tsx
index ed4fa824d8..e6d2745d43 100644
--- a/apps/web/modules/upgrade/upgrade-view.tsx
+++ b/apps/web/modules/upgrade/upgrade-view.tsx
@@ -31,7 +31,7 @@ export default function UpgradePage() {
 
   return (
     <Shell>
-      <div className="max-w-screen-lg">
+      <div className="max-w-(--breakpoint-lg)">
         {doesUserHaveOrgToUpgrade.data ? (
           <EmptyScreen
             headline={t("your_upgrade_is_here")}
diff --git a/apps/web/modules/users/views/users-public-view.tsx b/apps/web/modules/users/views/users-public-view.tsx
index 81762c998d..3bb4e82c3c 100644
--- a/apps/web/modules/users/views/users-public-view.tsx
+++ b/apps/web/modules/users/views/users-public-view.tsx
@@ -90,8 +90,7 @@ export function UserPage(props: PageProps) {
             {!isBioEmpty && (
               <>
                 <div
-                  className="text-default break-words text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
-                   
+                  className="text-default wrap-break-word text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
                   dangerouslySetInnerHTML={{ __html: props.safeBio }}
                 />
               </>
@@ -116,7 +115,7 @@ export function UserPage(props: PageProps) {
                     eventType: type,
                   });
                 }}
-                className="bg-default border-subtle dark:bg-muted dark:hover:bg-emphasis hover:bg-muted group relative border-b transition first:rounded-t-md last:rounded-b-md last:border-b-0"
+                className="bg-default border-subtle dark:bg-cal-muted dark:hover:bg-emphasis hover:bg-cal-muted group relative border-b transition first:rounded-t-md last:rounded-b-md last:border-b-0"
                 data-testid="event-type-link">
                 <Icon
                   name="arrow-right"
diff --git a/apps/web/modules/videos/views/videos-single-view.tsx b/apps/web/modules/videos/views/videos-single-view.tsx
index 8e9f7e310a..63d18d7398 100644
--- a/apps/web/modules/videos/views/videos-single-view.tsx
+++ b/apps/web/modules/videos/views/videos-single-view.tsx
@@ -447,7 +447,7 @@ export function LogInOverlay(props: LogInOverlayProps) {
         description={t("choose_how_you_d_like_to_appear_on_the_call")}
         className="bg-black/80 p-6 sm:max-w-lg">
         <div className="mt-2 pb-4">
-          <div className="space-y-4">
+          <div className="stack-y-4">
             <div>
               <div className="font-semibold">{t("join_as_guest")}</div>
               <p className="text-subtle text-sm">{t("ideal_for_one_time_calls")}</p>
@@ -516,7 +516,7 @@ export function LogInOverlay(props: LogInOverlayProps) {
           {/* Divider */}
           <hr className="my-6 h-0.5 border-t-0 bg-neutral-100 dark:bg-white/10" />
 
-          <div className="mt-5 space-y-4">
+          <div className="mt-5 stack-y-4">
             <div>
               <h4 className="text-base font-semibold text-black dark:text-white">
                 {t("sign_in_to_cal_com")}
@@ -568,7 +568,7 @@ export function VideoMeetingInfo(props: VideoMeetingInfo) {
           "no-scrollbar fixed left-0 top-0 z-30 flex h-full w-64 transform justify-between overflow-x-hidden overflow-y-scroll transition-all duration-300 ease-in-out",
           open ? "translate-x-0" : "-translate-x-[232px]"
         )}>
-        <main className="prose-sm prose max-w-64 prose-a:text-white prose-h3:text-white prose-h3:font-cal scroll-bar scrollbar-track-w-20 w-full overflow-scroll overflow-x-hidden border-r border-gray-300/20 bg-black/80 p-4 text-white shadow-sm backdrop-blur-lg">
+        <main className="prose-sm prose max-w-64 prose-a:text-white prose-h3:text-white prose-h3:font-cal scroll-bar scrollbar-track-w-20 w-full overflow-scroll overflow-x-hidden! border-r border-gray-300/20 bg-black/80 p-4 text-white shadow-sm backdrop-blur-lg">
           <h3>{t("what")}:</h3>
           <p>{booking.title}</p>
           <h3>{t("invitee_timezone")}:</h3>
diff --git a/apps/web/package.json b/apps/web/package.json
index 1c1c7f1080..181129ae80 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -46,6 +46,7 @@
     "@calcom/trpc": "workspace:*",
     "@calcom/tsconfig": "workspace:*",
     "@calcom/ui": "workspace:*",
+    "@coss/ui": "workspace:*",
     "@daily-co/daily-js": "^0.83.1",
     "@daily-co/daily-react": "^0.23.2",
     "@dub/analytics": "^0.0.27",
@@ -151,7 +152,6 @@
     "sonner": "^1.7.4",
     "stripe": "^9.16.0",
     "superjson": "1.9.1",
-    "tailwindcss-radix": "^2.6.0",
     "turndown": "^7.1.3",
     "uuid": "^8.3.2",
     "zod": "^3.22.4"
@@ -163,6 +163,7 @@
     "@calcom/types": "workspace:*",
     "@microsoft/microsoft-graph-types-beta": "0.15.0-preview",
     "@playwright/test": "^1.45.3",
+    "@tailwindcss/postcss": "^4.0.0",
     "@testing-library/react": "^13.3.0",
     "@types/accept-language-parser": "1.5.2",
     "@types/async": "^3.2.15",
@@ -197,8 +198,7 @@
     "node-html-parser": "^6.1.10",
     "node-mocks-http": "^1.11.0",
     "postcss": "^8.4.18",
-    "tailwindcss": "^3.3.3",
-    "tailwindcss-animate": "^1.0.6",
+    "tailwindcss": "^4",
     "ts-node": "^10.9.1",
     "turbo": "^2.5.5",
     "typescript": "^5.9.0-beta"
diff --git a/apps/web/postcss.config.js b/apps/web/postcss.config.js
deleted file mode 100644
index 1b7eb34f09..0000000000
--- a/apps/web/postcss.config.js
+++ /dev/null
@@ -1,11 +0,0 @@
-const config = {
-  plugins: {
-    tailwindcss: {},
-  },
-};
-
-if (process.env.NODE_ENV === "production") {
-  config.plugins.autoprefixer = {};
-}
-
-module.exports = config;
diff --git a/apps/web/postcss.config.mjs b/apps/web/postcss.config.mjs
new file mode 100644
index 0000000000..b776c62238
--- /dev/null
+++ b/apps/web/postcss.config.mjs
@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  }
+}
\ No newline at end of file
diff --git a/apps/web/styles/globals.css b/apps/web/styles/globals.css
index 171d72fed5..2c3c171c86 100644
--- a/apps/web/styles/globals.css
+++ b/apps/web/styles/globals.css
@@ -1,265 +1,9 @@
-/* @import rules must precede all rules aside from @charset and @layer statements. */
+@import "tailwindcss";
+@import "../../../packages/coss-ui/styles.css";
+@import "../../../packages/config/theme/shared-sources.css";
+@import "../../../packages/config/theme/tokens.css";
 @import "./raqb.css";
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-/**
-* Add css variables here as well for light mode in addition to tailwind.config to avoid FOUC
-*/
-:root {
-  /* Spacing Scale */
-  --cal-spacing-0: 0px;
-  --cal-spacing-px: 1px;
-  --cal-spacing-0_5: 0.125rem; /* 2px */
-  --cal-spacing-1: 0.25rem; /* 4px */
-  --cal-spacing-1_5: 0.375rem; /* 6px */
-  --cal-spacing-2: 0.5rem; /* 8px */
-  --cal-spacing-2_5: 0.625rem; /* 10px */
-  --cal-spacing-3: 0.75rem; /* 12px */
-  --cal-spacing-3_5: 0.875rem; /* 14px */
-  --cal-spacing-4: 1rem; /* 16px */
-  --cal-spacing-5: 1.25rem; /* 20px */
-  --cal-spacing-6: 1.5rem; /* 24px */
-  --cal-spacing-7: 1.75rem; /* 28px */
-  --cal-spacing-8: 2rem; /* 32px */
-  --cal-spacing-9: 2.25rem; /* 36px */
-  --cal-spacing-10: 2.5rem; /* 40px */
-  --cal-spacing-11: 2.75rem; /* 44px */
-  --cal-spacing-12: 3rem; /* 48px */
-  --cal-spacing-14: 3.5rem; /* 56px */
-  --cal-spacing-16: 4rem; /* 64px */
-  --cal-spacing-20: 5rem; /* 80px */
-  --cal-spacing-24: 6rem; /* 96px */
-  --cal-spacing-28: 7rem; /* 112px */
-  --cal-spacing-32: 8rem; /* 128px */
-  --cal-spacing-36: 9rem; /* 144px */
-  --cal-spacing-40: 10rem; /* 160px */
-  --cal-spacing-44: 11rem; /* 176px */
-  --cal-spacing-48: 12rem; /* 192px */
-  --cal-spacing-52: 13rem; /* 208px */
-  --cal-spacing-56: 14rem; /* 224px */
-  --cal-spacing-60: 15rem; /* 240px */
-  --cal-spacing-64: 16rem; /* 256px */
-  --cal-spacing-72: 18rem; /* 288px */
-  --cal-spacing-80: 20rem; /* 320px */
-  --cal-spacing-96: 24rem; /* 384px */
-
-  /* Border Radius */
-  --cal-radius-none: 0px;
-  --cal-radius-sm: 0.125rem; /* 2px */
-  --cal-radius: 0.25rem; /* 4px */
-  --cal-radius-md: 0.375rem; /* 6px */
-  --cal-radius-lg: 0.5rem; /* 8px */
-  --cal-radius-xl: 0.75rem; /* 12px */
-  --cal-radius-2xl: 1rem; /* 16px */
-  --cal-radius-3xl: 1.5rem; /* 24px */
-  --cal-radius-full: 9999px;
-
-  /* Background Standard */
-  --cal-bg-emphasis: hsla(220, 13%, 91%, 1); /* gray.200 - active items and emphasising */
-  --cal-bg: hsla(0, 0%, 100%, 1); /* white - default background */
-  --cal-bg-subtle: hsla(220, 14%, 94%, 1); /* gray.100 - hovering on items, subtle raising */
-  --cal-bg-muted: hsla(210, 20%, 97%, 1); /* gray.50 - large items, sidebar, sections */
-  --cal-bg-inverted: hsla(210, 30%, 4%, 1); /* gray.900 - tooltips */
-
-  /* Background Primary */
-  --cal-bg-primary: hsla(214, 30%, 16%, 1); /* stone-100 */
-  --cal-bg-primary-emphasis: hsla(220, 6%, 25%, 1); /* stone-800 */
-  --cal-bg-primary-muted: hsla(220, 14%, 94%, 1); /* stone-400 */
-
-  /* Background Brand */
-  --cal-bg-brand: hsla(214, 30%, 16%, 1); /* gray-50 */
-  --cal-bg-brand-emphasis: hsla(220, 6%, 25%, 1); /* stone-100 */
-  --cal-bg-brand-muted: hsla(220, 14%, 94%, 1); /* stone-100 */
-
-  /* Background Semantic */
-  --cal-bg-semantic-info-subtle: hsla(212, 88%, 97%, 1); /* blue-100 */
-  --cal-bg-semantic-info-emphasis: hsla(236, 80%, 25%, 1); /* blue-500 */
-  --cal-bg-semantic-success-subtle: hsla(167, 54%, 93%, 1); /* green-100 */
-  --cal-bg-semantic-success-emphasis: hsla(158, 74%, 38%, 1); /* green-500 */
-  --cal-bg-semantic-attention-subtle: hsla(34, 100%, 92%, 1); /* orange-100 */
-  --cal-bg-semantic-attention-emphasis: hsla(15, 79%, 34%, 1); /* orange-500 */
-  --cal-bg-semantic-error-subtle: hsla(0, 93%, 94%, 1); /* red-100 */
-  --cal-bg-semantic-error-emphasis: hsla(0, 63%, 24%, 1); /* red-500 */
-
-  /* Background Visualization */
-  --cal-bg-visualization-1-subtle: hsla(326, 78%, 95%, 1); /* pink-100 */
-  --cal-bg-visualization-1-emphasis: hsla(330, 81%, 60%, 1); /* pink-500 */
-  --cal-bg-visualization-2-subtle: hsla(256, 86%, 91%, 1); /* purple-100 */
-  --cal-bg-visualization-2-emphasis: hsla(256, 85%, 57%, 1); /* purple-500 */
-  --cal-bg-visualization-3-subtle: hsla(217, 87%, 91%, 1); /* blue-100 */
-  --cal-bg-visualization-3-emphasis: hsla(235, 100%, 63%, 1); /* blue-500 */
-  --cal-bg-visualization-4-subtle: hsla(167, 54%, 93%, 1); /* green-100 */
-  --cal-bg-visualization-4-emphasis: hsla(158, 74%, 38%, 1); /* green-500 */
-  --cal-bg-visualization-5-subtle: hsla(55, 97%, 88%, 1); /* yellow-100 */
-  --cal-bg-visualization-5-emphasis: hsla(45, 93%, 47%, 1); /* yellow-500 */
-  --cal-bg-visualization-6-subtle: hsla(34, 100%, 92%, 1); /* orange-100 */
-  --cal-bg-visualization-6-emphasis: hsla(25, 95%, 53%, 1); /* orange-500 */
-  --cal-bg-visualization-7-subtle: hsla(0, 96%, 89%, 1); /* red-100 */
-  --cal-bg-visualization-7-emphasis: hsla(0, 84%, 60%, 1); /* red-500 */
-
-  /* Legacy Background Components - Consider deprecating */
-  --cal-bg-info: hsla(221, 91%, 93%, 1); /* #dee9fc - info backgrounds */
-  --cal-bg-success: hsla(142, 76%, 94%, 1); /* #e2fbe8 - success backgrounds */
-  --cal-bg-attention: hsla(33, 100%, 92%, 1); /* #fceed8 - attention backgrounds */
-  --cal-bg-error: hsla(3, 66%, 93%, 1); /* #f9e3e2 - error backgrounds */
-  --cal-bg-dark-error: hsla(2, 55%, 30%, 1); /* Keeping existing dark error */
-
-  --cal-bg-launch-dark: hsla(242, 53%, 10%, 1); /* #0D0C27 - Launch card dark background */
-
-  /* Borders */
-  --cal-border-emphasis: hsla(218, 11%, 65%, 1); /* gray.400 - input:hover */
-  --cal-border: hsla(216, 12%, 84%, 1); /* gray.300 - inputs */
-  --cal-border-subtle: hsla(220, 13%, 91%, 1); /* gray.200 - container borders */
-  --cal-border-muted: hsla(220, 14%, 94%, 1); /* gray.100 */
-  --cal-border-error: hsla(0, 96%, 89%, 1); /* Keeping existing error border */
-  --cal-border-semantic-error: hsla(0, 96%, 89%, 1);
-  --cal-border-booker: var(--cal-border-subtle);
-
-  /* Content/Text Standard */
-  --cal-text-emphasis: hsla(210, 30%, 4%, 1); /* gray-900 */
-  --cal-text: hsla(220, 6%, 25%, 1); /* gray-700 */
-  --cal-text-subtle: hsla(220, 9%, 46%, 1); /* gray-500 */
-  --cal-text-muted: hsla(218, 11%, 65%, 1); /* gray-400 */
-  --cal-text-inverted: hsla(0, 0%, 100%, 1); /* white */
-
-  /* Content/Text Semantic */
-  --cal-text-semantic-info: hsla(236, 80%, 25%, 1); /* blue-800 */
-  --cal-text-semantic-success: hsla(150, 84%, 22%, 1); /* green-800 */
-  --cal-text-semantic-attention: hsla(15, 79%, 34%, 1); /* orange-800 */
-  --cal-text-semantic-error: hsla(0, 63%, 24%, 1); /* red-800 */
-
-  /* Content/Text Visualization */
-  --cal-text-visualization-1: hsla(332, 79%, 25%, 1); /* pink-800 */
-  --cal-text-visualization-2: hsla(270, 91%, 25%, 1); /* purple-800 */
-  --cal-text-visualization-3: hsla(217, 91%, 25%, 1); /* blue-800 */
-  --cal-text-visualization-4: hsla(142, 71%, 25%, 1); /* green-800 */
-  --cal-text-visualization-5: hsla(45, 93%, 25%, 1); /* yellow-800 */
-  --cal-text-visualization-6: hsla(24, 95%, 25%, 1); /* orange-800 */
-  --cal-text-visualization-7: hsla(0, 84%, 25%, 1); /* red-800 */
-
-  /* Border/Semantic Subtle */
-  --cal-border-semantic-attention-subtle: hsla(32, 98%, 83%, 1);
-  --cal-border-semantic-error-subtle: hsla(0, 96%, 89%, 1);
-
-  /* Legacy Content/Text Components - Consider deprecating */
-  --cal-text-info: hsla(225, 57%, 33%, 1); /* #253985 - interactive text/icons */
-  --cal-text-success: hsla(144, 34%, 24%, 1); /* #285231 */
-  --cal-text-attention: hsla(16, 62%, 28%, 1); /* Keeping existing attention text */
-  --cal-text-error: hsla(0, 63%, 31%, 1); /* Keeping existing error text */
-
-  /* Brand */
-  --cal-brand: hsla(221, 39%, 11%, 1); /* Keeping existing brand color */
-  --cal-brand-emphasis: hsla(0, 0%, 6%, 1); /* Keeping existing brand emphasis */
-  --cal-brand-text: hsla(0, 0%, 100%, 1); /* white */
-}
-.dark {
-  /* Background Standard */
-  --cal-bg-emphasis: hsla(0, 0%, 25%, 1); /* stone-700 */
-  --cal-bg: hsla(0, 0%, 6%, 1); /* stone-950 */
-  --cal-bg-subtle: hsla(0, 0%, 15%, 1); /* stone-800 */
-  --cal-bg-muted: hsla(0, 0%, 9%, 1); /* stone-900 */
-  --cal-bg-inverted: hsla(0, 0%, 98%, 1); /* stone-50 */
-
-  /* Background Primary */
-  --cal-bg-primary: hsla(0, 0%, 96%, 1); /* stone-100 */
-  --cal-bg-primary-emphasis: hsla(0, 0%, 64%, 1); /* stone-800 */
-  --cal-bg-primary-muted: hsla(0, 0%, 15%, 1); /* stone-400 */
-
-  /* Background Brand */
-  --cal-bg-brand: hsla(0, 0%, 98%, 1); /* gray-50 */
-  --cal-bg-brand-emphasis: hsla(0, 0%, 96%, 1); /* stone-100 */
-  --cal-bg-brand-muted: hsla(0, 0%, 96%, 1); /* stone-100 */
-
-  /* Background Semantic */
-  --cal-bg-semantic-info-subtle: hsla(236, 80%, 8%, 1); /* blue-800 */
-  --cal-bg-semantic-info-emphasis: hsla(229, 90%, 74%, 1); /* blue-500 */
-  --cal-bg-semantic-success-subtle: hsla(148, 88%, 16%, 1); /* green-800 */
-  --cal-bg-semantic-success-emphasis: hsla(158, 74%, 38%, 1); /* green-500 */
-  --cal-bg-semantic-attention-subtle: hsla(21, 86%, 8%, 1); /* orange-800 */
-  --cal-bg-semantic-attention-emphasis: hsla(27, 96%, 61%, 1); /* orange-500 */
-  --cal-bg-semantic-error-subtle: hsla(0, 70%, 8%, 1); /* red-800 */
-  --cal-bg-semantic-error-emphasis: hsla(0, 91%, 71%, 1); /* red-500 */
-
-  /* Background Visualization */
-  --cal-bg-visualization-1-subtle: hsla(336, 74%, 35%, 1); /* pink-200 */
-  --cal-bg-visualization-1-emphasis: hsla(330, 81%, 60%, 1); /* pink-500 */
-  --cal-bg-visualization-2-subtle: hsla(252, 83%, 23%, 1); /* purple-200 */
-  --cal-bg-visualization-2-emphasis: hsla(256, 85%, 57%, 1); /* purple-500 */
-  --cal-bg-visualization-3-subtle: hsla(236, 74%, 35%, 1); /* blue-200 */
-  --cal-bg-visualization-3-emphasis: hsla(235, 100%, 63%, 1); /* blue-500 */
-  --cal-bg-visualization-4-subtle: hsla(150, 84%, 22%, 1); /* green-200 */
-  --cal-bg-visualization-4-emphasis: hsla(158, 74%, 38%, 1); /* green-500 */
-  --cal-bg-visualization-5-subtle: hsla(28, 73%, 26%, 1); /* yellow-200 */
-  --cal-bg-visualization-5-emphasis: hsla(45, 93%, 47%, 1); /* yellow-500 */
-  --cal-bg-visualization-6-subtle: hsla(15, 75%, 23%, 1); /* orange-200 */
-  --cal-bg-visualization-6-emphasis: hsla(25, 95%, 53%, 1); /* orange-500 */
-  --cal-bg-visualization-7-subtle: hsla(0, 70%, 35%, 1); /* red-200 */
-  --cal-bg-visualization-7-emphasis: hsla(0, 84%, 60%, 1); /* red-500 */
-
-  --cal-bg-launch-dark: hsla(242, 53%, 10%, 1); /* #0D0C27 - Launch card dark background */
-
-  /* Legacy Background Components - Consider deprecating */
-  --cal-bg-info: hsla(228, 56%, 33%, 1); /* Keeping existing info background */
-  --cal-bg-success: hsla(133, 34%, 24%, 1); /* Keeping existing success background */
-  --cal-bg-attention: hsla(16, 62%, 28%, 1); /* Keeping existing attention background */
-  --cal-bg-error: hsla(2, 55%, 30%, 1); /* Keeping existing error background */
-  --cal-bg-dark-error: hsla(2, 55%, 30%, 1); /* Keeping existing dark error */
-
-  /* Border Standard */
-  --cal-border: hsla(0, 0%, 30%, 1); /* stone-600 */
-  --cal-border-muted: hsla(0, 0%, 9%, 1); /* stone-500 */
-  --cal-border-subtle: hsla(0, 0%, 15%, 1); /* stone-700 */
-  --cal-border-emphasis: hsla(0, 0%, 45%, 1); /* stone-800 */
-  --cal-border-booker: var(--cal-border-subtle);
-  /* Border Semantic */
-  --cal-border-semantic-error: hsla(0, 63%, 24%, 1); /* red-800 */
-
-  /* Border/Semantic Subtle */
-  --cal-border-semantic-attention-subtle: hsla(15, 75%, 23%, 1);
-  --cal-border-semantic-error-subtle: hsla(0, 63%, 24%, 1);
-
-  /* Legacy Border - Consider deprecating */
-  --cal-border-error: hsla(0, 63%, 24%, 1); /* Keeping existing error border */
-
-  /* Content/Text Standard */
-  --cal-text-emphasis: hsla(0, 0%, 98%, 1); /* stone-50 */
-  --cal-text: hsla(0, 0%, 83%, 1); /* stone-300 */
-  --cal-text-subtle: hsla(0, 0%, 64%, 1); /* stone-400 */
-  --cal-text-muted: hsla(0, 0%, 64%, 1); /* stone-400 */
-  --cal-text-inverted: hsla(0, 0%, 0%, 1); /* black */
-
-  /* Content/Text Semantic */
-  --cal-text-semantic-info: hsla(229, 90%, 74%, 1); /* blue-100 */
-  --cal-text-semantic-success: hsla(161, 49%, 54%, 1); /* green-100 */
-  --cal-text-semantic-attention: hsla(27, 96%, 61%, 1); /* orange-100 */
-  --cal-text-semantic-error: hsla(0, 91%, 71%, 1); /* red-100 */
-
-  /* Content/Text Semantic Emphasis */
-  --cal-text-semantic-info-emphasis: hsla(217, 91%, 25%, 1); /* blue-800 */
-  --cal-text-semantic-success-emphasis: hsla(142, 71%, 25%, 1); /* green-800 */
-  --cal-text-semantic-attention-emphasis: hsla(24, 95%, 25%, 1); /* orange-800 */
-  --cal-text-semantic-error-emphasis: hsla(0, 84%, 25%, 1); /* red-800 */
-
-  /* Legacy Content/Text Components - Consider deprecating */
-  --cal-text-info: hsla(218, 83%, 93%, 1); /* Keeping existing info text */
-  --cal-text-success: hsla(134, 76%, 94%, 1); /* Keeping existing success text */
-  --cal-text-attention: hsla(37, 86%, 92%, 1); /* Keeping existing attention text */
-  --cal-text-error: hsla(3, 66%, 93%, 1); /* Keeping existing error text */
-
-  /* Brand */
-  --cal-brand: hsla(0, 0%, 100%, 1); /* white */
-  --cal-brand-emphasis: hsla(218, 11%, 65%, 1); /* Keeping existing brand emphasis */
-  --cal-brand-text: hsla(0, 0%, 0%, 1); /* black */
-}
-
-@layer base {
-  * {
-    @apply border-default;
-  }
-}
-
 ::-moz-selection {
   color: var(--cal-brand-text);
   background: var(--cal-brand);
@@ -270,7 +14,7 @@
   background: var(--cal-brand);
 }
 
-body  {
+body {
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
 }
@@ -351,6 +95,34 @@ html.todesktop.dark {
   }
 }
 
+/**
+ * Legacy space-y-* utilities for Tailwind v4 compatibility
+ *
+ * Tailwind v4 changed the selector used by space-x-* and space-y-* utilities to address
+ * performance issues on large pages. The selector changed from:
+ *
+ *   .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
+ *
+ * to:
+ *
+ *   .space-y-4 > :not(:last-child) { margin-bottom: 1rem; }
+ *
+ * These `.stack-y-*` utilities recreate the pre-v4 behavior using the old selector pattern
+ * (`:not([hidden]) ~ :not([hidden])` with `margin-top`) for cases where the new behavior
+ * causes layout issues.
+ *
+ * Usage: <div class="stack-y-4"> or <div class="lg:stack-y-6">
+ * Supports all spacing values: stack-y-0, stack-y-0.5, stack-y-1, stack-y-1.5, stack-y-2, etc.
+ *
+ * Reference: https://tailwindcss.com/docs/upgrade-guide#space-between-selector
+ */
+@utility stack-y-* {
+  & > :not([hidden]) ~ :not([hidden]) {
+    margin-top: --spacing(--value(integer));
+    margin-top: --value([length]);
+  }
+}
+
 /*
  * Override the default tailwindcss-forms styling (default is: 'colors.blue.600')
  * @see: https://github.com/tailwindlabs/tailwindcss-forms/issues/14#issuecomment-1005376006
@@ -394,7 +166,7 @@ select:focus {
   }
 
   .slider > .slider-track {
-    @apply relative h-1 flex-grow rounded-md bg-gray-400;
+    @apply relative h-1 grow rounded-md bg-gray-400;
   }
 
   .slider .slider-range {
@@ -447,7 +219,7 @@ select:focus {
   font-size: inherit !important;
   font-weight: inherit !important;
   color: #000;
-  padding: 11px ​11px 9px !important;
+  padding: 11px 11px 9px !important;
   line-height: 16px !important;
 }
 
@@ -455,7 +227,7 @@ select:focus {
   border: 2px solid #000 !important;
   border-radius: 2px !important;
   box-shadow: none !important;
-  padding: 10px ​10px 9px !important;
+  padding: 10px 10px 9px !important;
 }
 
 .DateRangePickerInput_arrow {
@@ -628,16 +400,16 @@ select:focus {
 
 .react-tel-input .country-list .country:hover,
 .react-tel-input .country-list .country.highlight {
-  @apply !bg-emphasis;
+  @apply bg-emphasis!;
 }
 
 .react-tel-input .flag-dropdown .selected-flag,
 .react-tel-input .flag-dropdown.open .selected-flag {
-  @apply !bg-default;
+  @apply bg-default!;
 }
 
 .react-tel-input .flag-dropdown {
-  @apply !border-r-default left-0.5 !border-y-0 !border-l-0;
+  @apply border-r-default! left-0.5 border-y-0! border-l-0!;
 }
 
 [data-radix-popper-content-wrapper] {
diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js
deleted file mode 100644
index 542bfcb663..0000000000
--- a/apps/web/tailwind.config.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const base = require("@calcom/config/tailwind-preset");
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  ...base,
-  content: [...base.content, "../../packages/app-store/routing-forms/**/*.{js,ts,jsx,tsx}"],
-  plugins: [...base.plugins, require("tailwindcss-animate")],
-};
diff --git a/docs/platform/atoms/booker.mdx b/docs/platform/atoms/booker.mdx
index caaeaf8b6f..8b93e946d5 100644
--- a/docs/platform/atoms/booker.mdx
+++ b/docs/platform/atoms/booker.mdx
@@ -148,9 +148,9 @@ export default function Booker( props : BookerProps ) {
       <Booker
         ...
         customClassNames={{
-          bookerContainer: "!bg-[#F5F2FE] [&_button:!rounded-full] border-subtle border",
+          bookerContainer: "bg-[#F5F2FE]! [&_button:!rounded-full] border-subtle border",
           datePickerCustomClassNames: {
-            datePickerDatesActive: "!bg-[#D7CEF5]",
+            datePickerDatesActive: "bg-[#D7CEF5]!",
           },
         }}
       />
@@ -214,20 +214,20 @@ export default function Booker( props : BookerProps ) {
       <Booker
         ...
         customClassNames={{
-          bookerContainer: "!bg-[#F5F2FE] [&_button:!rounded-full] border-subtle border",
+          bookerContainer: "bg-[#F5F2FE]! [&_button:!rounded-full] border-subtle border",
           datePickerCustomClassNames: {
-            datePickerDatesActive: "!bg-[#D7CEF5]",
+            datePickerDatesActive: "bg-[#D7CEF5]!",
           },
           eventMetaCustomClassNames: {
             eventMetaTitle: "text-[#7151DC]",
           },
           availableTimeSlotsCustomClassNames: {
-            availableTimeSlotsHeaderContainer: "!bg-[#F5F2FE]",
-            availableTimes: "!bg-[#D7CEF5]",
+            availableTimeSlotsHeaderContainer: "bg-[#F5F2FE]!",
+            availableTimes: "bg-[#D7CEF5]!",
           },
           confirmStep: {
-            confirmButton: "!bg-purple-700",
-            backButton: "text-purple-700 hover:!bg-purple-700 hover:!text-white"
+            confirmButton: "bg-purple-700!",
+            backButton: "text-purple-700 hover:bg-purple-700! hover:text-white!"
           }
         }}
       />
diff --git a/docs/platform/atoms/create-schedule.mdx b/docs/platform/atoms/create-schedule.mdx
index f780889bdf..a15f4a7c03 100644
--- a/docs/platform/atoms/create-schedule.mdx
+++ b/docs/platform/atoms/create-schedule.mdx
@@ -53,7 +53,7 @@ export default function CreateScheduleForm() {
     <>
       <CreateScheduleForm
         customClassNames={{
-          atomsWrapper: "border-black border-[1px] w-[500px] my-10 mx-5 rounded-md px-5 py-5",
+          atomsWrapper: "border-black border w-[500px] my-10 mx-5 rounded-md px-5 py-5",
           buttons: {
             continue: "bg-red-400 border-none",
             container: "justify-start",
diff --git a/docs/platform/atoms/event-type.mdx b/docs/platform/atoms/event-type.mdx
index 536b035e6c..92eb1b0efd 100644
--- a/docs/platform/atoms/event-type.mdx
+++ b/docs/platform/atoms/event-type.mdx
@@ -136,7 +136,7 @@ export function EventTypeTabs(eventTypeId: number) {
           console.log("Form state changed:", formState);
           // Access form data: formState.isDirty, formState.dirtyFields, formState.values
         }}
-        customClassNames={{ atomsWrapper: "!w-[70vw] !m-auto" }}
+        customClassNames={{ atomsWrapper: "w-[70vw]! m-auto!" }}
       />
     </>
   );
diff --git a/packages/app-store/AppDependencyComponent.tsx b/packages/app-store/AppDependencyComponent.tsx
index 4976143d66..c1bc7084fd 100644
--- a/packages/app-store/AppDependencyComponent.tsx
+++ b/packages/app-store/AppDependencyComponent.tsx
@@ -20,7 +20,7 @@ export const AppDependencyComponent = ({
     <div
       className={classNames(
         "rounded-md px-4 py-3",
-        dependencyData && dependencyData.some((dependency) => !dependency.installed) ? "bg-info" : "bg-subtle"
+        dependencyData && dependencyData.some((dependency) => !dependency.installed) ? "bg-cal-info" : "bg-subtle"
       )}>
       {dependencyData &&
         dependencyData.map((dependency) => {
diff --git a/packages/app-store/btcpayserver/components/KeyInput.tsx b/packages/app-store/btcpayserver/components/KeyInput.tsx
index e280849950..470bd2d958 100644
--- a/packages/app-store/btcpayserver/components/KeyInput.tsx
+++ b/packages/app-store/btcpayserver/components/KeyInput.tsx
@@ -145,7 +145,7 @@ export const KeyField: React.FC<InputFieldProps & { defaultValue: string }> = fo
             addOnLeading && "rounded-l-none border-l-0",
             isPasswordVisible && "inline-block",
             !isPasswordVisible && "hidden",
-            "!my-0 !ring-0"
+            "my-0! ring-0!"
           )}
           {...passThrough}
           ref={ref}
@@ -160,7 +160,7 @@ export const KeyField: React.FC<InputFieldProps & { defaultValue: string }> = fo
             addOnLeading && "rounded-l-none border-l-0",
             !isPasswordVisible && "inline-block",
             isPasswordVisible && "hidden",
-            "!my-0 !ring-0"
+            "my-0! ring-0!"
           )}
           disabled
           value={getHiddenKey()}
diff --git a/packages/app-store/giphy/components/SearchDialog.tsx b/packages/app-store/giphy/components/SearchDialog.tsx
index 1992c223c5..bb4ec2b57a 100644
--- a/packages/app-store/giphy/components/SearchDialog.tsx
+++ b/packages/app-store/giphy/components/SearchDialog.tsx
@@ -118,7 +118,7 @@ export const SearchDialog = (props: ISearchDialog) => {
   return (
     <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
       <DialogContent>
-        <h3 className="leading-16 font-cal text-emphasis text-xl" id="modal-title">
+        <h3 className="font-cal text-emphasis text-xl" id="modal-title">
           {t("add_gif_to_confirmation")}
         </h3>
         <p className="text-subtle mb-3 text-sm font-light">{t("find_gif_spice_confirmation")}</p>
@@ -127,7 +127,7 @@ export const SearchDialog = (props: ISearchDialog) => {
           {renderTab("link", t("add_link_from_giphy"), MODE_URL)}
         </div>
         <form
-          className="flex w-full justify-center space-x-2 space-y-2 rtl:space-x-reverse"
+          className="flex w-full justify-center space-x-2 stack-y-2 rtl:space-x-reverse"
           onSubmit={handleFormSubmit}>
           <div className="relative block w-full pt-2">
             <Input
@@ -148,7 +148,7 @@ export const SearchDialog = (props: ISearchDialog) => {
           </Button>
         </form>
         {gifImage && (
-          <div className="flex flex-col items-center space-x-2 space-y-2 pt-3 rtl:space-x-reverse">
+          <div className="flex flex-col items-center space-x-2 stack-y-2 pt-3 rtl:space-x-reverse">
             <div className="bg-subtle flex w-full items-center justify-center">
               {isPending ? (
                 <div className="flex h-[200px] w-full items-center justify-center bg-gray-400 pb-3 pt-3">
diff --git a/packages/app-store/giphy/components/SelectGifInput.tsx b/packages/app-store/giphy/components/SelectGifInput.tsx
index 0290c746ce..886202e9ab 100644
--- a/packages/app-store/giphy/components/SelectGifInput.tsx
+++ b/packages/app-store/giphy/components/SelectGifInput.tsx
@@ -16,7 +16,7 @@ export default function SelectGifInput(props: ISelectGifInput) {
   const [showDialog, setShowDialog] = useState(false);
 
   return (
-    <div className="flex flex-col items-start space-x-2 space-y-2 rtl:space-x-reverse">
+    <div className="flex flex-col items-start space-x-2 stack-y-2 rtl:space-x-reverse">
       {selectedGif && (
         <div className="min-h-[200px]">
           <img alt="Selected Gif Image" src={selectedGif} />
diff --git a/packages/app-store/hitpay/components/KeyInput.tsx b/packages/app-store/hitpay/components/KeyInput.tsx
index eb732ccfdd..749a141fd8 100644
--- a/packages/app-store/hitpay/components/KeyInput.tsx
+++ b/packages/app-store/hitpay/components/KeyInput.tsx
@@ -145,7 +145,7 @@ export const KeyField: React.FC<InputFieldProps & { defaultValue: string }> = fo
             addOnLeading && "rounded-l-none border-l-0",
             isPasswordVisible && "inline-block",
             !isPasswordVisible && "hidden",
-            "!my-0 !ring-0"
+            "my-0! ring-0!"
           )}
           {...passThrough}
           ref={ref}
@@ -160,7 +160,7 @@ export const KeyField: React.FC<InputFieldProps & { defaultValue: string }> = fo
             addOnLeading && "rounded-l-none border-l-0",
             !isPasswordVisible && "inline-block",
             isPasswordVisible && "hidden",
-            "!my-0 !ring-0"
+            "my-0! ring-0!"
           )}
           disabled
           value={getHiddenKey()}
diff --git a/packages/app-store/insihts/components/EventTypeAppCardInterface.tsx b/packages/app-store/insihts/components/EventTypeAppCardInterface.tsx
index 70ce5e6892..96d820fec0 100644
--- a/packages/app-store/insihts/components/EventTypeAppCardInterface.tsx
+++ b/packages/app-store/insihts/components/EventTypeAppCardInterface.tsx
@@ -20,7 +20,7 @@ const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({
       }}
       switchChecked={enabled}
       teamId={eventType.team?.id || undefined}>
-      <fieldset className="space-y-2" disabled={disabled}>
+      <fieldset className="stack-y-2" disabled={disabled}>
         <TextField
           disabled={disabled}
           name="Site ID"
diff --git a/packages/app-store/qr_code/components/EventTypeAppSettingsInterface.tsx b/packages/app-store/qr_code/components/EventTypeAppSettingsInterface.tsx
index c01bf3182d..42d7ed44a8 100644
--- a/packages/app-store/qr_code/components/EventTypeAppSettingsInterface.tsx
+++ b/packages/app-store/qr_code/components/EventTypeAppSettingsInterface.tsx
@@ -19,7 +19,7 @@ const EventTypeAppSettingsInterface: EventTypeAppSettingsComponent = ({ eventTyp
         <a download href={QR_URL} target="_blank" rel="noreferrer">
           <img
             className={classNames(
-              "hover:bg-muted border-default border transition hover:shadow-sm",
+              "hover:bg-cal-muted border-default border transition hover:shadow-sm",
               size >= 256 && "min-h-32"
             )}
             style={{ padding: size / 16, borderRadius: size / 20 }}
diff --git a/packages/app-store/routing-forms/components/FormInputFields.tsx b/packages/app-store/routing-forms/components/FormInputFields.tsx
index 117232151e..5abc483f6c 100644
--- a/packages/app-store/routing-forms/components/FormInputFields.tsx
+++ b/packages/app-store/routing-forms/components/FormInputFields.tsx
@@ -54,7 +54,7 @@ export default function FormInputFields(props: FormInputFieldsProps) {
         const fieldIdentifier = getFieldIdentifier(field);
         return (
           <div key={field.id} className="block flex-col sm:flex ">
-            <div className="min-w-48 mb-2 flex-grow">
+            <div className="min-w-48 mb-2 grow">
               <label id="slug-label" htmlFor="slug" className="text-default flex text-sm font-medium">
                 {field.label}
               </label>
diff --git a/packages/app-store/routing-forms/components/_components/EmptyState.tsx b/packages/app-store/routing-forms/components/_components/EmptyState.tsx
index d37f2911ff..2ac17627a5 100644
--- a/packages/app-store/routing-forms/components/_components/EmptyState.tsx
+++ b/packages/app-store/routing-forms/components/_components/EmptyState.tsx
@@ -23,7 +23,7 @@ export const EmptyState = ({
   buttonDataTestId,
 }: EmptyStateProps) => {
   return (
-    <div className="border-sublte bg-muted flex flex-col items-center gap-6 rounded-xl border p-11">
+    <div className="border-sublte bg-cal-muted flex flex-col items-center gap-6 rounded-xl border p-11">
       <div className="mb-3 grid">
         {/* Icon card - Top */}
         <div className="bg-default border-subtle z-30 col-start-1 col-end-1 row-start-1 row-end-1 h-10 w-10 transform rounded-md border shadow-sm">
diff --git a/packages/app-store/routing-forms/components/_components/ResultSection.tsx b/packages/app-store/routing-forms/components/_components/ResultSection.tsx
index 3d16160484..a7cc4dab1a 100644
--- a/packages/app-store/routing-forms/components/_components/ResultSection.tsx
+++ b/packages/app-store/routing-forms/components/_components/ResultSection.tsx
@@ -84,7 +84,7 @@ export const ResultsView = ({
         animate={{ opacity: 1, x: 0 }}
         exit={{ opacity: 0, x: -20 }}
         transition={{ duration: 0.2 }}
-        className="space-y-4">
+        className="stack-y-4">
         <div className="bg-default border-muted mb-0.5 flex flex-col gap-0.5 rounded-2xl border p-1">
           <div className="flex items-center gap-2 px-2 py-1">
             <div className="border-subtle rounded-lg border p-1">
@@ -112,7 +112,7 @@ export const ResultsView = ({
                 <div className="h-4 w-24 animate-pulse rounded bg-gray-200" />
               </div>
               <div className="border-subtle rounded-xl border px-3 py-2">
-                <div className="space-y-3">
+                <div className="stack-y-3">
                   {[1, 2, 3].map((i) => (
                     <div key={i} className="flex items-center justify-between">
                       <div className="h-4 w-32 animate-pulse rounded bg-gray-200" />
@@ -134,7 +134,7 @@ export const ResultsView = ({
                 <div className="divide-subtle divide-y">
                   {[1, 2, 3].map((i) => (
                     <div key={i} className="flex items-center justify-between py-3 first:pt-0 last:pb-0">
-                      <div className="space-y-2">
+                      <div className="stack-y-2">
                         <div className="h-4 w-32 animate-pulse rounded bg-gray-200" />
                         <div className="h-4 w-24 animate-pulse rounded bg-gray-200" />
                       </div>
@@ -158,7 +158,7 @@ export const ResultsView = ({
       animate={{ opacity: 1, x: 0 }}
       exit={{ opacity: 0, x: -20 }}
       transition={{ duration: 0.2 }}
-      className="space-y-4">
+      className="stack-y-4">
       {chosenRoute.action.type === "externalRedirectUrl" && (
         <ResultsSection title={chosenRoute.name ?? "External Redirect"} icon="zap">
           <div className="flex items-center gap-2">
@@ -211,7 +211,7 @@ export const ResultsView = ({
             <ResultsSection title="Matching" icon="atom">
               <div className="relative flex flex-col gap-3">
                 {/* Seperator */}
-                <div className="absolute bottom-3 left-[0.75rem] top-3 w-[1px] bg-gray-200" />
+                <div className="absolute bottom-3 left-3 top-3 w-px bg-gray-200" />
 
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-1">
@@ -296,7 +296,7 @@ export const ResultsView = ({
 
             {membersMatchResult.mainWarnings && membersMatchResult.mainWarnings.length > 0 && (
               <ResultsSection title="Warnings" icon="triangle-alert">
-                <div className="space-y-2">
+                <div className="stack-y-2">
                   {membersMatchResult.mainWarnings.map((warning, index) => (
                     <div data-testid="alert" key={index} className="text-warning">
                       {warning}
@@ -308,7 +308,7 @@ export const ResultsView = ({
 
             {membersMatchResult.fallbackWarnings && membersMatchResult.fallbackWarnings.length > 0 && (
               <ResultsSection title="Fallback Warnings" icon="triangle-alert">
-                <div className="space-y-2">
+                <div className="stack-y-2">
                   {membersMatchResult.fallbackWarnings.map((warning, index) => (
                     <div data-testid="alert" key={index} className="text-warning">
                       {warning}
diff --git a/packages/app-store/routing-forms/components/_components/RoutingSkeleton.tsx b/packages/app-store/routing-forms/components/_components/RoutingSkeleton.tsx
index 93fa104da6..9c97ea9283 100644
--- a/packages/app-store/routing-forms/components/_components/RoutingSkeleton.tsx
+++ b/packages/app-store/routing-forms/components/_components/RoutingSkeleton.tsx
@@ -2,7 +2,7 @@ export function RoutingSkeleton() {
   return (
     <div className="w-full py-4 lg:py-8">
       <div className="flex w-full flex-col rounded-md">
-        <div className="bg-muted border-muted rounded-2xl border p-2.5">
+        <div className="bg-cal-muted border-muted rounded-2xl border p-2.5">
           {[1, 2, 3].map((index) => (
             <div key={index}>
               {/* Title */}
@@ -25,14 +25,14 @@ export function RoutingSkeleton() {
                   <div className="bg-subtle h-4 w-32 animate-pulse rounded" />
                 </div>
 
-                <div className="bg-muted rounded-xl p-0.5">
+                <div className="bg-cal-muted rounded-xl p-0.5">
                   <div className="flex items-center gap-2 py-1 pl-3">
                     {/* If booker selects */}
                     <div className="bg-subtle h-4 w-32 animate-pulse rounded" />
                     <div className="bg-subtle h-4 w-16 animate-pulse rounded" />
                   </div>
                   <div className="bg-default rounded-[10px] px-3 py-2 ">
-                    <div className="space-y-3">
+                    <div className="stack-y-3">
                       {/* Label Field */}
                       <div className="flex items-center justify-between gap-[10px]">
                         <div className="bg-subtle h-4 w-full animate-pulse rounded" />
diff --git a/packages/app-store/routing-forms/components/_components/TeamMemberSelect.tsx b/packages/app-store/routing-forms/components/_components/TeamMemberSelect.tsx
index 257fa761e7..fd95e477b2 100644
--- a/packages/app-store/routing-forms/components/_components/TeamMemberSelect.tsx
+++ b/packages/app-store/routing-forms/components/_components/TeamMemberSelect.tsx
@@ -82,7 +82,7 @@ export const TeamMemberSelect = ({
   return (
     <div>
       <Label htmlFor="routing-form-select-members">{t("routing_form_select_members_to_email")}</Label>
-      <div className="space-y-4">
+      <div className="stack-y-4">
         <Select
           id="routing-form-select-members"
           data-testid="routing-form-select-members"
diff --git a/packages/app-store/routing-forms/components/_components/TeamMembersMatchResult.tsx b/packages/app-store/routing-forms/components/_components/TeamMembersMatchResult.tsx
index ccc3c9ebc0..a2fe6f490f 100644
--- a/packages/app-store/routing-forms/components/_components/TeamMembersMatchResult.tsx
+++ b/packages/app-store/routing-forms/components/_components/TeamMembersMatchResult.tsx
@@ -83,7 +83,7 @@ export const TeamMembersMatchResult = ({
   };
 
   return (
-    <div className="text-default mt-2 space-y-2">
+    <div className="text-default mt-2 stack-y-2">
       <div className="mt-4">
         {membersMatchResult.contactOwnerEmail ? (
           <div data-testid="contact-owner-email">
diff --git a/packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx b/packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx
index 3ca2f2e961..be0de821ea 100644
--- a/packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx
+++ b/packages/app-store/routing-forms/components/react-awesome-query-builder/widgets.tsx
@@ -309,7 +309,7 @@ function Conjs({ not, setNot, config, conjunctionOptions, setConjunction, disabl
     const selectValue = options.find((option) => option.value === value);
     const summary = !config.operators.__calReporting ? "If booker selects" : "Query where";
     return (
-      <div className="mb-[1px] flex items-center text-sm">
+      <div className="mb-px flex items-center text-sm">
         <span>{summary}</span>
         <Select
           className="flex px-2"
diff --git a/packages/app-store/stripepayment/components/EventTypeAppSettingsInterface.tsx b/packages/app-store/stripepayment/components/EventTypeAppSettingsInterface.tsx
index ff048ed45c..c6db80854e 100644
--- a/packages/app-store/stripepayment/components/EventTypeAppSettingsInterface.tsx
+++ b/packages/app-store/stripepayment/components/EventTypeAppSettingsInterface.tsx
@@ -170,7 +170,7 @@ const EventTypeAppSettingsInterface: EventTypeAppSettingsComponent = ({
               <RadioGroup.Root
                 disabled={disabled || paymentOption === "HOLD"}
                 defaultValue="never"
-                className="flex flex-col space-y-2"
+                className="flex flex-col stack-y-2"
                 value={getAppData("refundPolicy")}
                 onValueChange={(val) => {
                   setAppData("refundPolicy", val);
diff --git a/packages/app-store/templates/general-app-settings/components/AppSettingsInterface.tsx b/packages/app-store/templates/general-app-settings/components/AppSettingsInterface.tsx
index 6a3361aa5b..79c7167925 100644
--- a/packages/app-store/templates/general-app-settings/components/AppSettingsInterface.tsx
+++ b/packages/app-store/templates/general-app-settings/components/AppSettingsInterface.tsx
@@ -9,7 +9,7 @@ export default function AppSettings() {
   const [input, setInput] = useState("");
 
   return (
-    <div className="space-y-4 px-4 pb-4 pt-4 text-sm">
+    <div className="stack-y-4 px-4 pb-4 pt-4 text-sm">
       <TextField
         placeholder="Some Input"
         value={input}
diff --git a/packages/app-store/umami/components/EventTypeAppCardInterface.tsx b/packages/app-store/umami/components/EventTypeAppCardInterface.tsx
index 167b50f628..9af6bb7b3e 100644
--- a/packages/app-store/umami/components/EventTypeAppCardInterface.tsx
+++ b/packages/app-store/umami/components/EventTypeAppCardInterface.tsx
@@ -25,7 +25,7 @@ const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({
       }}
       switchChecked={enabled}
       teamId={eventType.team?.id || undefined}>
-      <fieldset className="space-y-2" disabled={disabled}>
+      <fieldset className="stack-y-2" disabled={disabled}>
         <TextField
           disabled={disabled}
           name="Script URL"
diff --git a/packages/app-store/weather_in_your_calendar/components/AppSettingsInterface.tsx b/packages/app-store/weather_in_your_calendar/components/AppSettingsInterface.tsx
index 8363267536..2dab74fbcb 100644
--- a/packages/app-store/weather_in_your_calendar/components/AppSettingsInterface.tsx
+++ b/packages/app-store/weather_in_your_calendar/components/AppSettingsInterface.tsx
@@ -10,7 +10,7 @@ export default function AppSettings() {
   const [location, setLocation] = useState("");
 
   return (
-    <div className="space-y-4 text-sm">
+    <div className="stack-y-4 text-sm">
       <TextField
         placeholder="San Francisco"
         value={location}
diff --git a/packages/config/package.json b/packages/config/package.json
index a132c0ff7a..2df355f2a9 100644
--- a/packages/config/package.json
+++ b/packages/config/package.json
@@ -11,25 +11,24 @@
   ],
   "dependencies": {
     "@calcom/eslint-plugin-eslint": "workspace:*",
+    "@tailwindcss/forms": "^0.5.10",
     "@todesktop/tailwind-variants": "^1.0.0",
     "eslint-config-next": "^13.2.1",
     "eslint-config-prettier": "^8.6.0",
     "eslint-config-turbo": "^0.0.7",
     "eslint-plugin-playwright": "^0.12.0",
-    "eslint-plugin-prettier": "^4.2.1"
+    "eslint-plugin-prettier": "^4.2.1",
+    "tailwind-scrollbar": "^4.0.2",
+    "tailwindcss-radix": "^4.0.2",
+    "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
-    "@savvywombat/tailwindcss-grid-areas": "^3.0.0",
-    "@tailwindcss/forms": "^0.5.2",
-    "@tailwindcss/line-clamp": "^0.4.0",
     "@tailwindcss/typography": "^0.5.4",
     "@trivago/prettier-plugin-sort-imports": "4.1.1",
     "@typescript-eslint/eslint-plugin": "^5.52.0",
     "@typescript-eslint/parser": "^5.52.0",
     "prettier": "^2.8.6",
     "prettier-plugin-tailwindcss": "^0.2.5",
-    "tailwind-scrollbar": "^2.0.1",
-    "tailwindcss": "^3.3.3",
     "typescript": "^5.9.0-beta"
   }
 }
diff --git a/packages/config/tailwind-preset.js b/packages/config/tailwind-preset.js
deleted file mode 100644
index 3d192c3958..0000000000
--- a/packages/config/tailwind-preset.js
+++ /dev/null
@@ -1,348 +0,0 @@
-const plugin = require("tailwindcss/plugin");
-const { fontFamily } = require("tailwindcss/defaultTheme");
-const colors = require("tailwindcss/colors");
-
-/** @type {import('tailwindcss').Config} */
-const subtleColor = "#E5E7EB";
-module.exports = {
-  content: [
-    "../../apps/web/pages/**/*.{js,ts,jsx,tsx}",
-    "../../apps/web/app/**/*.{js,ts,jsx,tsx}",
-    "../../apps/web/modules/**/*.{js,ts,jsx,tsx}",
-    "../../apps/web/components/**/*.{js,ts,jsx,tsx}",
-    "../../packages/app-store/!(node_modules)/**/*{components,pages}/**/*.{js,ts,jsx,tsx}",
-    "../../packages/features/!(node_modules)/**/*.{js,ts,jsx,tsx}",
-    "../../packages/ui/!(node_modules)/**/*.{js,ts,jsx,tsx}",
-    "../../packages/platform/atoms/!(node_modules)/**/*.{js,ts,jsx,tsx}",
-  ],
-  darkMode: "class",
-  theme: {
-    spacing: {
-      0: "var(--cal-spacing-0)",
-      px: "var(--cal-spacing-px)",
-      0.5: "var(--cal-spacing-0_5)",
-      1: "var(--cal-spacing-1)",
-      1.5: "var(--cal-spacing-1_5)",
-      2: "var(--cal-spacing-2)",
-      2.5: "var(--cal-spacing-2_5)",
-      3: "var(--cal-spacing-3)",
-      3.5: "var(--cal-spacing-3_5)",
-      4: "var(--cal-spacing-4)",
-      5: "var(--cal-spacing-5)",
-      6: "var(--cal-spacing-6)",
-      7: "var(--cal-spacing-7)",
-      8: "var(--cal-spacing-8)",
-      9: "var(--cal-spacing-9)",
-      10: "var(--cal-spacing-10)",
-      11: "var(--cal-spacing-11)",
-      12: "var(--cal-spacing-12)",
-      14: "var(--cal-spacing-14)",
-      16: "var(--cal-spacing-16)",
-      20: "var(--cal-spacing-20)",
-      24: "var(--cal-spacing-24)",
-      28: "var(--cal-spacing-28)",
-      32: "var(--cal-spacing-32)",
-      36: "var(--cal-spacing-36)",
-      40: "var(--cal-spacing-40)",
-      44: "var(--cal-spacing-44)",
-      48: "var(--cal-spacing-48)",
-      52: "var(--cal-spacing-52)",
-      56: "var(--cal-spacing-56)",
-      60: "var(--cal-spacing-60)",
-      64: "var(--cal-spacing-64)",
-      72: "var(--cal-spacing-72)",
-      80: "var(--cal-spacing-80)",
-      96: "var(--cal-spacing-96)",
-    },
-    borderRadius: {
-      none: "var(--cal-radius-none)",
-      sm: "var(--cal-radius-sm)",
-      DEFAULT: "var(--cal-radius)",
-      md: "var(--cal-radius-md)",
-      lg: "var(--cal-radius-lg)",
-      xl: "var(--cal-radius-xl)",
-      "2xl": "var(--cal-radius-2xl)",
-      "3xl": "var(--cal-radius-3xl)",
-      full: "var(--cal-radius-full)",
-    },
-    extend: {
-      colors: {
-        // Standard Background
-        emphasis: "var(--cal-bg-emphasis)",
-        default: "var(--cal-bg, white)",
-        subtle: "var(--cal-bg-subtle)",
-        muted: "var(--cal-bg-muted)",
-        inverted: "var(--cal-bg-inverted)",
-
-        // Primary Background
-        primary: {
-          default: "var(--cal-bg-primary)",
-          emphasis: "var(--cal-bg-primary-emphasis)",
-          muted: "var(--cal-bg-primary-muted)",
-        },
-
-        // Brand
-        brand: {
-          default: "var(--cal-brand,#111827)",
-          emphasis: "var(--cal-brand-emphasis,#101010)",
-          subtle: "var(--cal-brand-subtle,#9CA3AF)",
-          accent: "var(--cal-brand-accent,white)",
-        },
-
-        // Semantic Background
-        semantic: {
-          info: {
-            subtle: "var(--cal-bg-semantic-info-subtle)",
-            emphasis: "var(--cal-bg-semantic-info-emphasis)",
-          },
-          success: {
-            subtle: "var(--cal-bg-semantic-success-subtle)",
-            emphasis: "var(--cal-bg-semantic-success-emphasis)",
-          },
-          attention: {
-            subtle: "var(--cal-bg-semantic-attention-subtle)",
-            emphasis: "var(--cal-bg-semantic-attention-emphasis)",
-          },
-          error: {
-            subtle: "var(--cal-bg-semantic-error-subtle)",
-            emphasis: "var(--cal-bg-semantic-error-emphasis)",
-          },
-        },
-
-        // Visualization Background
-        visualization: {
-          1: {
-            subtle: "var(--cal-bg-visualization-1-subtle)",
-            emphasis: "var(--cal-bg-visualization-1-emphasis)",
-          },
-          2: {
-            subtle: "var(--cal-bg-visualization-2-subtle)",
-            emphasis: "var(--cal-bg-visualization-2-emphasis)",
-          },
-          3: {
-            subtle: "var(--cal-bg-visualization-3-subtle)",
-            emphasis: "var(--cal-bg-visualization-3-emphasis)",
-          },
-          4: {
-            subtle: "var(--cal-bg-visualization-4-subtle)",
-            emphasis: "var(--cal-bg-visualization-4-emphasis)",
-          },
-          5: {
-            subtle: "var(--cal-bg-visualization-5-subtle)",
-            emphasis: "var(--cal-bg-visualization-5-emphasis)",
-          },
-          6: {
-            subtle: "var(--cal-bg-visualization-6-subtle)",
-            emphasis: "var(--cal-bg-visualization-6-emphasis)",
-          },
-          7: {
-            subtle: "var(--cal-bg-visualization-7-subtle)",
-            emphasis: "var(--cal-bg-visualization-7-emphasis)",
-          },
-        },
-
-        // Legacy - Consider deprecating
-        info: "var(--cal-bg-info)",
-        success: "var(--cal-bg-success)",
-        attention: "var(--cal-bg-attention)",
-        error: "var(--cal-bg-error)",
-        darkerror: "var(--cal-bg-dark-error)",
-
-        // Launch colors
-        "launch-dark": "var(--cal-bg-launch-dark)",
-
-        // Base colors
-        black: "#111111",
-        gray: colors.gray,
-        darkgray: colors.slate,
-      },
-      borderColor: {
-        // Standard Borders
-        emphasis: "var(--cal-border-emphasis)",
-        default: "var(--cal-border)",
-        subtle: "var(--cal-border-subtle)",
-        muted: "var(--cal-border-muted)",
-
-        // Semantic Borders
-        semantic: {
-          error: "var(--cal-border-semantic-error)",
-          "attention-subtle": "var(--cal-border-semantic-attention-subtle)",
-          "error-subtle": "var(--cal-border-semantic-error-subtle)",
-        },
-
-        // Used in booker embed customization
-        booker: `var(--cal-border-booker, ${subtleColor})`,
-        // Legacy - Consider deprecating
-        error: "var(--cal-border-error)",
-        "cal-bg": "var(--cal-bg)",
-        "cal-bg-muted": "var(--cal-bg-muted)",
-      },
-      textColor: {
-        // Standard Text
-        emphasis: "var(--cal-text-emphasis)",
-        default: "var(--cal-text)",
-        subtle: "var(--cal-text-subtle)",
-        muted: "var(--cal-text-muted)",
-        inverted: "var(--cal-text-inverted)",
-
-        // Semantic Text
-        semantic: {
-          info: "var(--cal-text-semantic-info)",
-          success: "var(--cal-text-semantic-success)",
-          attention: "var(--cal-text-semantic-attention)",
-          error: "var(--cal-text-semantic-error)",
-        },
-
-        // Semantic Text Emphasis
-        "semantic-info-emphasis": "var(--cal-text-semantic-info-emphasis)",
-        "semantic-success-emphasis": "var(--cal-text-semantic-success-emphasis)",
-        "semantic-attention-emphasis": "var(--cal-text-semantic-attention-emphasis)",
-        "semantic-error-emphasis": "var(--cal-text-semantic-error-emphasis)",
-
-        // Legacy - Consider deprecating
-        info: "var(--cal-text-info)",
-        success: "var(--cal-text-success)",
-        attention: "var(--cal-text-attention)",
-        error: "var(--cal-text-error)",
-        brand: "var(--cal-brand-text)",
-      },
-      fill: {
-        emphasis: "var(--cal-text-emphasis, #111827)",
-        default: "var(--cal-text, #374151)",
-        subtle: "var(--cal-text-subtle, #6B7280)",
-        muted: "var(--cal-text-muted, #9CA3AF)",
-        inverted: "var(--cal-text-inverted, white)",
-        info: "var(--cal-text-info, #253985)",
-        success: "var(--cal-text-success, #285231)",
-        attention: "var(--cal-text-attention, #73321B)",
-        error: "var(--cal-text-error, #752522)",
-        brand: "var(--cal-brand-text)",
-      },
-      screens: {
-        pwa: { raw: "(display-mode: standalone)" },
-        "3xl": "1920px",
-        "4xl": "2560px",
-      },
-      keyframes: {
-        "fade-in-up": {
-          from: { opacity: 0, transform: "translateY(10px)" },
-          to: { opacity: 1, transform: "none" },
-        },
-        spinning: {
-          "100%": { transform: "rotate(360deg)" },
-        },
-        drawerSlideLeftAndFade: {
-          from: { opacity: "0", transform: "translateX(100%)" },
-          to: { opacity: "1", transform: "translateX(0)" },
-        },
-        drawerSlideRightAndFade: {
-          from: { opacity: "1", transform: "translateX(0)" },
-          to: { opacity: "0", transform: "translateX(100%)" },
-        },
-      },
-      animation: {
-        "fade-in-up": "fade-in-up 600ms var(--animation-delay, 0ms) cubic-bezier(.21,1.02,.73,1) forwards",
-        "fade-in-bottom": "fade-in-bottom cubic-bezier(.21,1.02,.73,1) forwards",
-        spinning: "spinning 0.75s linear infinite",
-        drawerSlideLeftAndFade: "drawerSlideLeftAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1)",
-        drawerSlideRightAndFade: "drawerSlideRightAndFade 150ms ease-in",
-      },
-      borderWidth: {
-        "booker-width": "var(--cal-border-booker-width, 1px)",
-      },
-      fontFamily: {
-        cal: ["var(--font-cal)", ...fontFamily.serif],
-        sans: ["var(--font-inter)", ...fontFamily.sans],
-        mono: ["Roboto Mono", "monospace"],
-      },
-      maxHeight: (theme) => ({
-        0: "0",
-        97: "25rem",
-        ...theme("spacing"),
-        full: "100%",
-        screen: "100vh",
-      }),
-      minHeight: (theme) => ({
-        0: "0",
-        ...theme("spacing"),
-        full: "100%",
-        screen: "100vh",
-      }),
-      minWidth: (theme) => ({
-        0: "0",
-        ...theme("spacing"),
-        full: "100%",
-        screen: "100vw",
-      }),
-      maxWidth: (theme, { breakpoints }) => ({
-        0: "0",
-        ...theme("spacing"),
-        ...breakpoints(theme("screens")),
-        full: "100%",
-        screen: "100vw",
-      }),
-      backgroundImage: {
-        "gradient-primary": "radial-gradient(162.05% 170% at 109.58% 35%, #667593 0%, #E3E3E3 100%)",
-      },
-      boxShadow: {
-        dropdown: "0px 5px 20px 0px rgba(0, 0, 0, 0.10), 0px 10px 40px 0px rgba(0, 0, 0, 0.03)",
-        "switch-thumb": "0px 0.8px 0.8px 0px rgba(0, 0, 0, 0.10), 0px 0.8px 3.2px 0px rgba(0, 0, 0, 0.08)",
-        "solid-gray-rested":
-          "0px 2px 3px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.08), 1px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 2px 0.4px 0px rgba(255, 255, 255, 0.16) inset, 0px -1.5px 2px 0px rgba(0, 0, 0, 0.40) inset",
-        "solid-gray-hover":
-          "0px 2px 3px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.08), 1px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 2px 0.4px 0px rgba(255, 255, 255, 0.16) inset, 0px -2px 2px 0px rgba(0, 0, 0, 0.40) inset",
-        "solid-gray-active":
-          "0px 2px 3px 0px rgba(0, 0, 0, 0.40) inset, 0px 0px 2px 1px rgba(0, 0, 0, 0.40) inset",
-        "outline-gray-rested": "0px 2px 3px 0px rgba(0, 0, 0, 0.03), 0px 2px 2px -1px rgba(0, 0, 0, 0.03)",
-        "outline-gray-hover": "0px 2px 3px 0px rgba(0, 0, 0, 0.03), 0px 2px 2px -1px rgba(0, 0, 0, 0.03)",
-        "outline-gray-active": "0px 2px 1px 0px rgba(0, 0, 0, 0.05) inset",
-        "outline-gray-focused":
-          "0px 0px 0px 1px rgba(255, 255, 255, 0.20), 0px 0px 0px 2px rgba(0, 0, 0, 0.10)",
-        "outline-red-rested": "0px 2px 3px 0px rgba(0, 0, 0, 0.03), 0px 2px 2px -1px rgba(0, 0, 0, 0.03)",
-        "outline-red-hover": "0px 1px 1px 0px rgba(0, 0, 0, 0.06), 0px 2px 3px 0px rgba(0, 0, 0, 0.08)",
-        "outline-red-active":
-          "0px 1px 1px 0px rgba(127, 29, 29, 0.06), 0px 0px 3px 0px rgba(127, 29, 29, 0.08), 0px 2px 2px 1px rgba(127, 29, 29, 0.06) inset",
-        "elevation-low":
-          "0px 1px 1px 0px rgba(0, 0, 0, 0.07), 0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0px 2px 2px 0px rgba(0, 0, 0, 0.10), 0px 0px 8px 0px rgba(0, 0, 0, 0.05)",
-        // Brand
-        "button-solid-brand-default":
-          " 0px 2px 3px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.08), 1px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 2px 0.4px 0px rgba(255, 255, 255, 0.12) inset, 0px -3px 2px 0px rgba(0, 0, 0, 0.04) inset;",
-        "button-solid-brand-hover":
-          "0px 1px 1px 0px rgba(0, 0, 0, 0.10), 0px 2px 3px 0px rgba(0, 0, 0, 0.08), 1px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px -3px 2px 0px rgba(0, 0, 0, 0.10) inset, 0px 2px 0.4px 0px rgba(255, 255, 255, 0.24) inset",
-        "button-solid-brand-active":
-          "0px 3px 1px 0px rgba(0, 0, 0, 0.10) inset, 0px 0px 2px 0px rgba(0, 0, 0, 0.10) inset",
-        "button-solid-brand-focused":
-          "0px 0px 0px 1px rgba(255, 255, 255, 0.40), 0px 0px 0px 2px rgba(0, 0, 0, 0.20), 0px 1px 1px 0px rgba(0, 0, 0, 0.10), 0px 2px 3px 0px rgba(0, 0, 0, 0.08), 1px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px -3px 2px 0px rgba(0, 0, 0, 0.10) inset, 0px 2px 0.4px 0px rgba(255, 255, 255, 0.24) inset",
-        // Outline - red
-        "button-outline-red-focused":
-          "0px 0px 0px 1px rgba(255, 255, 255, 0.32), 0px 0px 0px 2px rgba(220, 38, 38, 0.15)",
-      },
-    },
-  },
-  plugins: [
-    require("@todesktop/tailwind-variants"),
-    require("@tailwindcss/forms"),
-    require("@tailwindcss/typography"),
-    require("tailwind-scrollbar")({ nocompatible: true }),
-    require("tailwindcss-radix")(),
-    require("@savvywombat/tailwindcss-grid-areas"),
-    plugin(({ addVariant }) => {
-      addVariant("mac", ".mac &");
-      addVariant("windows", ".windows &");
-      addVariant("ios", ".ios &");
-    }),
-    plugin(({ addBase, theme }) => {
-      addBase({
-        hr: {
-          borderColor: theme("subtle"),
-        },
-      });
-    }),
-    plugin(function ({ addVariant }) {
-      addVariant("enabled", "&:not(:disabled)");
-    }),
-  ],
-  variants: {
-    scrollbar: ["dark"],
-  },
-};
diff --git a/packages/config/theme/colors.css b/packages/config/theme/colors.css
deleted file mode 100644
index 3444160864..0000000000
--- a/packages/config/theme/colors.css
+++ /dev/null
@@ -1,85 +0,0 @@
-:root {
-  /* background */
-
-  --cal-bg-emphasis: #e5e7eb;
-  --cal-bg: white;
-  --cal-bg-subtle: #f3f4f6;
-  --cal-bg-muted: #f9fafb;
-  --cal-bg-inverted: #111827;
-
-  /* background -> components*/
-  --cal-bg-info: #dee9fc;
-  --cal-bg-success: #e2fbe8;
-  --cal-bg-attention: #fceed8;
-  --cal-bg-error: #f9e3e2;
-  --cal-bg-dark-error: #752522;
-
-  /* Borders */
-  --cal-border-emphasis: #9ca3af;
-  --cal-border: #d1d5db;
-  --cal-border-subtle: #e5e7eb;
-  --cal-border-muted: #f3f4f6;
-  --cal-border-error: #aa2e26;
-
-  /* Content/Text */
-  --cal-text-emphasis: #111827;
-  --cal-text: #374151;
-  --cal-text-subtle: #6b7280;
-  --cal-text-muted: #9ca3af;
-  --cal-text-inverted: white;
-
-  /* Content/Text -> components */
-  --cal-text-info: #253985;
-  --cal-text-success: #285231;
-  --cal-text-attention: #73321b;
-  --cal-text-error: hsla(0, 63%, 31%, 1);
-  /* Brand shenanigans
-    -> These will be computed for the users theme at runtime.
-  */
-  --cal-brand: #111827;
-  --cal-brand-emphasis: #101010;
-}
-
-/* Darkmode Colors  -- TODO: WIP*/
-.dark {
-  /* background */
-
-  --cal-bg-emphasis: #2b2b2b;
-  --cal-bg: #111111;
-  --cal-bg-subtle: #1c1c1c;
-  --cal-bg-muted: #101010;
-  --cal-bg-inverted: #f3f4f6;
-
-  /* background -> components*/
-  --cal-bg-info: #dee9fc;
-  --cal-bg-success: #e2fbe8;
-  --cal-bg-attention: #fceed8;
-  --cal-bg-error: #f9e3e2;
-  --cal-bg-dark-error: #752522;
-
-  /* Borders */
-  --cal-border-emphasis: #575757;
-  --cal-border: #444444;
-  --cal-border-subtle: #2b2b2b;
-  --cal-border-muted: #1c1c1c;
-  --cal-border-error: #aa2e26;
-
-  /* Content/Text */
-  --cal-text-emphasis: #f3f4f6;
-  --cal-text: #d6d6d6;
-  --cal-text-subtle: #767676;
-  --cal-text-muted: #575757;
-  --cal-text-inverted: white;
-
-  /* Content/Text -> components */
-  --cal-text-info: #253985;
-  --cal-text-success: #285231;
-  --cal-text-attention: #73321b;
-  --cal-text-error: #752522;
-
-  /* Brand shenanigans
-    -> These will be computed for the users theme at runtime.
-  */
-  --cal-brand: #111827;
-  --cal-brand-emphasis: #101010;
-}
diff --git a/packages/config/theme/shared-sources.css b/packages/config/theme/shared-sources.css
new file mode 100644
index 0000000000..3ae814980f
--- /dev/null
+++ b/packages/config/theme/shared-sources.css
@@ -0,0 +1,8 @@
+@source "../../../apps/web/pages/**/*.{js,ts,jsx,tsx}";
+@source "../../../apps/web/app/**/*.{js,ts,jsx,tsx}";
+@source "../../../apps/web/modules/**/*.{js,ts,jsx,tsx}";  
+@source "../../../apps/web/components/**/*.{js,ts,jsx,tsx}";
+@source "../../../packages/app-store/**/*{components,pages}/**/*.{js,ts,jsx,tsx}";
+@source "../../../packages/features/**/*.{js,ts,jsx,tsx}";
+@source "../../../packages/ui/**/*.{js,ts,jsx,tsx}";
+@source "../../../packages/platform/atoms/**/*.{js,ts,jsx,tsx}";
\ No newline at end of file
diff --git a/packages/config/theme/tokens.css b/packages/config/theme/tokens.css
new file mode 100644
index 0000000000..645d382e4b
--- /dev/null
+++ b/packages/config/theme/tokens.css
@@ -0,0 +1,472 @@
+/** This file is used in webapp as well as inside shadow DOM of embed elements. **/
+@import "tw-animate-css";
+@plugin "@tailwindcss/typography";
+@plugin "@tailwindcss/forms";
+@plugin "tailwindcss-radix";
+
+@plugin 'tailwind-scrollbar' {
+  nocompatible: true;
+}
+
+@variant pwa (@media (display-mode: standalone));
+@variant todesktop (html.todesktop &);
+@variant mac (html.todesktop-platform-darwin &);
+@variant windows (html.todesktop-platform-win32 &);
+@variant linux (html.todesktop-platform-linux &);
+
+@theme inline {
+  --font-sans: var(--font-sans);
+  --font-cal: var(--font-cal);
+
+  /* Resets the preference from coss-ui which was to "use single --radius variable for all radius values" */
+  --radius: var(--radius);
+  --radius-sm: var(--radius-sm);
+  --radius-md: var(--radius-md);
+  --radius-lg: var(--radius-lg);
+  --radius-xl: var(--radius-xl);
+  --radius-2xl: var(--radius-2xl);
+  --radius-3xl: var(--radius-3xl);
+
+  /* Cal.com Border Radius */
+  --radius-cal-none: 0px;
+  --radius-cal-sm: 0.125rem;
+  --radius-cal: 0.25rem;
+  --radius-cal-md: 0.375rem;
+  --radius-cal-lg: 0.5rem;
+  --radius-cal-xl: 0.75rem;
+  --radius-cal-2xl: 1rem;
+  --radius-cal-3xl: 1.5rem;
+  --radius-cal-full: 9999px;
+
+  --color-emphasis: var(--cal-bg-emphasis);
+  --color-default: var(--cal-bg);
+  --color-subtle: var(--cal-bg-subtle);
+  --color-cal-muted: var(--cal-bg-muted);
+  --color-inverted: var(--cal-bg-inverted);
+  --color-primary-default: var(--cal-bg-primary);
+  --color-primary-emphasis: var(--cal-bg-primary-emphasis);
+  --color-primary-muted: var(--cal-bg-primary-muted);
+  --color-brand: var(--cal-brand);
+  --color-brand-default: var(--cal-brand);
+  --color-brand-emphasis: var(--cal-brand-emphasis);
+  --color-brand-muted: var(--cal-brand-muted);
+  --color-brand-subtle: var(--cal-brand-subtle, #9CA3AF);
+  --color-brand-accent: var(--cal-brand-accent, white);
+  --color-semantic-info-subtle: var(--cal-bg-semantic-info-subtle);
+  --color-semantic-info-emphasis: var(--cal-bg-semantic-info-emphasis);
+  --color-semantic-success-subtle: var(--cal-bg-semantic-success-subtle);
+  --color-semantic-success-emphasis: var(--cal-bg-semantic-success-emphasis);
+  --color-semantic-attention-subtle: var(--cal-bg-semantic-attention-subtle);
+  --color-semantic-attention-emphasis: var(--cal-bg-semantic-attention-emphasis);
+  --color-semantic-error-subtle: var(--cal-bg-semantic-error-subtle);
+  --color-semantic-error-emphasis: var(--cal-bg-semantic-error-emphasis);
+  --color-visualization-1-subtle: var(--cal-bg-visualization-1-subtle);
+  --color-visualization-1-emphasis: var(--cal-bg-visualization-1-emphasis);
+  --color-visualization-2-subtle: var(--cal-bg-visualization-2-subtle);
+  --color-visualization-2-emphasis: var(--cal-bg-visualization-2-emphasis);
+  --color-visualization-3-subtle: var(--cal-bg-visualization-3-subtle);
+  --color-visualization-3-emphasis: var(--cal-bg-visualization-3-emphasis);
+  --color-visualization-4-subtle: var(--cal-bg-visualization-4-subtle);
+  --color-visualization-4-emphasis: var(--cal-bg-visualization-4-emphasis);
+  --color-visualization-5-subtle: var(--cal-bg-visualization-5-subtle);
+  --color-visualization-5-emphasis: var(--cal-bg-visualization-5-emphasis);
+  --color-visualization-6-subtle: var(--cal-bg-visualization-6-subtle);
+  --color-visualization-6-emphasis: var(--cal-bg-visualization-6-emphasis);
+  --color-visualization-7-subtle: var(--cal-bg-visualization-7-subtle);
+  --color-visualization-7-emphasis: var(--cal-bg-visualization-7-emphasis);
+  --color-cal-info: var(--cal-bg-info);
+  --color-cal-success: var(--cal-bg-success);
+  --color-attention: var(--cal-bg-attention);
+  --color-error: var(--cal-bg-error);
+  --color-dark-error: var(--cal-bg-dark-error);
+  --color-launch-dark: var(--cal-bg-launch-dark);
+  --color-black: #111111;
+  --color-darkgray-50: var(--color-gray-50);
+  --color-darkgray-100: var(--color-gray-100);
+  --color-darkgray-200: var(--color-gray-200);
+  --color-darkgray-300: var(--color-gray-300);
+  --color-darkgray-400: var(--color-gray-400);
+  --color-darkgray-500: var(--color-gray-500);
+  --color-darkgray-600: var(--color-gray-600);
+  --color-darkgray-700: var(--color-gray-700);
+  --color-darkgray-800: var(--color-gray-800);
+  --color-darkgray-900: var(--color-gray-900);
+  --color-darkgray-950: var(--color-gray-950);
+
+  /* Cal.com Border Colors */
+  --border-color-emphasis: var(--cal-border-emphasis);
+  --border-color-default: var(--cal-border);
+  --border-color-subtle: var(--cal-border-subtle);
+  --border-color-muted: var(--cal-border-muted);
+  --border-color-error: var(--cal-border-error);
+  --border-color-semantic-error: var(--cal-border-semantic-error);
+  --border-color-semantic-attention-subtle: var(--cal-border-semantic-attention-subtle);
+  --border-color-semantic-error-subtle: var(--cal-border-semantic-error-subtle);
+  --border-color-booker: var(--cal-border-booker);
+
+  /* Cal.com Border Widths */
+  --border-width-booker-width: var(--cal-border-booker-width, 1px);
+
+  /* Cal.com Text Colors */
+  --text-color-emphasis: var(--cal-text-emphasis);
+  --text-color-default: var(--cal-text);
+  --text-color-subtle: var(--cal-text-subtle);
+  --text-color-muted: var(--cal-text-muted);
+  --text-color-inverted: var(--cal-text-inverted);
+  --text-color-semantic-info: var(--cal-text-semantic-info);
+  --text-color-semantic-success: var(--cal-text-semantic-success);
+  --text-color-semantic-attention: var(--cal-text-semantic-attention);
+  --text-color-semantic-error: var(--cal-text-semantic-error);
+  --text-color-semantic-info-emphasis: var(--cal-text-semantic-info-emphasis);
+  --text-color-semantic-success-emphasis: var(--cal-text-semantic-success-emphasis);
+  --text-color-semantic-attention-emphasis: var(--cal-text-semantic-attention-emphasis);
+  --text-color-semantic-error-emphasis: var(--cal-text-semantic-error-emphasis);
+  --text-color-visualization-1: var(--cal-text-visualization-1);
+  --text-color-visualization-2: var(--cal-text-visualization-2);
+  --text-color-visualization-3: var(--cal-text-visualization-3);
+  --text-color-visualization-4: var(--cal-text-visualization-4);
+  --text-color-visualization-5: var(--cal-text-visualization-5);
+  --text-color-visualization-6: var(--cal-text-visualization-6);
+  --text-color-visualization-7: var(--cal-text-visualization-7);
+  --text-color-info: var(--cal-text-info);
+  --text-color-success: var(--cal-text-success);
+  --text-color-attention: var(--cal-text-attention);
+  --text-color-error: var(--cal-text-error);
+  --text-color-brand: var(--cal-brand-text);
+
+  /* Default Ring Color */
+  --default-ring-color: rgb(59 130 246 / 0.5);
+
+  /* Cal.com Box Shadows */
+  --shadow-dropdown: var(--shadow-dropdown);
+  --shadow-switch-thumb: var(--shadow-switch-thumb);
+  --shadow-solid-gray-rested: var(--shadow-solid-gray-rested);
+  --shadow-solid-gray-hover: var(--shadow-solid-gray-hover);
+  --shadow-solid-gray-active: var(--shadow-solid-gray-active);
+  --shadow-outline-gray-rested: var(--shadow-outline-gray-rested);
+  --shadow-outline-gray-hover: var(--shadow-outline-gray-hover);
+  --shadow-outline-gray-active: var(--shadow-outline-gray-active);
+  --shadow-outline-gray-focused: var(--shadow-outline-gray-focused);
+  --shadow-outline-red-rested: var(--shadow-outline-red-rested);
+  --shadow-outline-red-hover: var(--shadow-outline-red-hover);
+  --shadow-outline-red-active: var(--shadow-outline-red-active);
+  --shadow-elevation-low: var(--shadow-elevation-low);
+  --shadow-button-solid-brand-default: var(--shadow-button-solid-brand-default);
+  --shadow-button-solid-brand-hover: var(--shadow-button-solid-brand-hover);
+  --shadow-button-solid-brand-active: var(--shadow-button-solid-brand-active);
+  --shadow-button-solid-brand-focused: var(--shadow-button-solid-brand-focused);
+  --shadow-button-outline-red-focused: var(--shadow-button-outline-red-focused);
+
+  /* Cal.com Fill Colors */
+  --fill-emphasis: var(--fill-emphasis);
+  --fill-default: var(--fill-default);
+  --fill-subtle: var(--fill-subtle);
+  --fill-muted: var(--fill-muted);
+  --fill-inverted: var(--fill-inverted);
+  --fill-info: var(--fill-info);
+  --fill-success: var(--fill-success);
+  --fill-attention: var(--fill-attention);
+  --fill-error: var(--fill-error);
+  --fill-brand: var(--fill-brand);
+
+  /* Cal.com Animations */
+  --animate-fade-in-up: fade-in-up 600ms var(--animation-delay, 0ms) cubic-bezier(.21, 1.02, .73, 1) forwards;
+  --animate-fade-in-bottom: fade-in-bottom cubic-bezier(.21, 1.02, .73, 1) forwards;
+  --animate-spinning: spinning 0.75s linear infinite;
+  --animate-drawer-slide-left-and-fade: drawerSlideLeftAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-drawer-slide-right-and-fade: drawerSlideRightAndFade 150ms ease-in;
+
+  @keyframes fade-in-up {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+
+    to {
+      opacity: 1;
+      transform: none;
+    }
+  }
+
+  @keyframes spinning {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes drawerSlideLeftAndFade {
+    from {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes drawerSlideRightAndFade {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateX(100%);
+    }
+  }
+}
+
+:root,
+:host {
+  /* 4px */
+  --radius: 0.25rem;
+
+  /* 2px */
+  --radius-sm: 0.125rem;
+  /* 6px */
+  --radius-md: 0.375rem;
+  /* 8px */
+  --radius-lg: 0.5rem;
+  /* 12px */
+  --radius-xl: 0.75rem;
+  /* 16px */
+  --radius-2xl: 1rem;
+  /* 24px */
+  --radius-3xl: 1.5rem;
+
+  --radius-none: 0px;
+
+  /* Background Standard */
+  --cal-bg-emphasis: hsla(220, 13%, 91%, 1);
+  --cal-bg: hsla(0, 0%, 100%, 1);
+  --cal-bg-subtle: hsla(220, 14%, 94%, 1);
+  --cal-bg-muted: hsla(210, 20%, 97%, 1);
+  --cal-bg-inverted: hsla(210, 30%, 4%, 1);
+
+  /* Background Primary */
+  --cal-bg-primary: hsla(214, 30%, 16%, 1);
+  --cal-bg-primary-emphasis: hsla(220, 6%, 25%, 1);
+  --cal-bg-primary-muted: hsla(220, 14%, 94%, 1);
+
+  /* Background Brand */
+  --cal-bg-brand: hsla(214, 30%, 16%, 1);
+  --cal-bg-brand-emphasis: hsla(220, 6%, 25%, 1);
+  --cal-bg-brand-muted: hsla(220, 14%, 94%, 1);
+
+  /* Background Semantic */
+  --cal-bg-semantic-info-subtle: hsla(212, 88%, 97%, 1);
+  --cal-bg-semantic-info-emphasis: hsla(236, 80%, 25%, 1);
+  --cal-bg-semantic-success-subtle: hsla(167, 54%, 93%, 1);
+  --cal-bg-semantic-success-emphasis: hsla(158, 74%, 38%, 1);
+  --cal-bg-semantic-attention-subtle: hsla(34, 100%, 92%, 1);
+  --cal-bg-semantic-attention-emphasis: hsla(15, 79%, 34%, 1);
+  --cal-bg-semantic-error-subtle: hsla(0, 93%, 94%, 1);
+  --cal-bg-semantic-error-emphasis: hsla(0, 63%, 24%, 1);
+
+  /* Background Visualization */
+  --cal-bg-visualization-1-subtle: hsla(326, 78%, 95%, 1);
+  --cal-bg-visualization-1-emphasis: hsla(330, 81%, 60%, 1);
+  --cal-bg-visualization-2-subtle: hsla(256, 86%, 91%, 1);
+  --cal-bg-visualization-2-emphasis: hsla(256, 85%, 57%, 1);
+  --cal-bg-visualization-3-subtle: hsla(217, 87%, 91%, 1);
+  --cal-bg-visualization-3-emphasis: hsla(235, 100%, 63%, 1);
+  --cal-bg-visualization-4-subtle: hsla(167, 54%, 93%, 1);
+  --cal-bg-visualization-4-emphasis: hsla(158, 74%, 38%, 1);
+  --cal-bg-visualization-5-subtle: hsla(55, 97%, 88%, 1);
+  --cal-bg-visualization-5-emphasis: hsla(45, 93%, 47%, 1);
+  --cal-bg-visualization-6-subtle: hsla(34, 100%, 92%, 1);
+  --cal-bg-visualization-6-emphasis: hsla(25, 95%, 53%, 1);
+  --cal-bg-visualization-7-subtle: hsla(0, 96%, 89%, 1);
+  --cal-bg-visualization-7-emphasis: hsla(0, 84%, 60%, 1);
+
+  /* Legacy Background Components */
+  --cal-bg-info: hsla(221, 91%, 93%, 1);
+  --cal-bg-success: hsla(142, 76%, 94%, 1);
+  --cal-bg-attention: hsla(33, 100%, 92%, 1);
+  --cal-bg-error: hsla(3, 66%, 93%, 1);
+  --cal-bg-dark-error: hsla(2, 55%, 30%, 1);
+  --cal-bg-launch-dark: hsla(242, 53%, 10%, 1);
+
+  /* Borders */
+  --cal-border-emphasis: hsla(218, 11%, 65%, 1);
+  --cal-border: hsla(216, 12%, 84%, 1);
+  --cal-border-subtle: hsla(220, 13%, 91%, 1);
+  --cal-border-muted: hsla(220, 14%, 94%, 1);
+  --cal-border-error: hsla(0, 96%, 89%, 1);
+  --cal-border-semantic-error: hsla(0, 96%, 89%, 1);
+  --cal-border-semantic-attention-subtle: hsla(32, 98%, 83%, 1);
+  --cal-border-semantic-error-subtle: hsla(0, 96%, 89%, 1);
+  --cal-border-booker: var(--cal-border-subtle);
+
+  /* Content/Text Standard */
+  --cal-text-emphasis: hsla(210, 30%, 4%, 1);
+  --cal-text: hsla(220, 6%, 25%, 1);
+  --cal-text-subtle: hsla(220, 9%, 46%, 1);
+  --cal-text-muted: hsla(218, 11%, 65%, 1);
+  --cal-text-inverted: hsla(0, 0%, 100%, 1);
+
+  /* Content/Text Semantic */
+  --cal-text-semantic-info: hsla(236, 80%, 25%, 1);
+  --cal-text-semantic-success: hsla(150, 84%, 22%, 1);
+  --cal-text-semantic-attention: hsla(15, 79%, 34%, 1);
+  --cal-text-semantic-error: hsla(0, 63%, 24%, 1);
+
+  /* Content/Text Visualization */
+  --cal-text-visualization-1: hsla(332, 79%, 25%, 1);
+  --cal-text-visualization-2: hsla(270, 91%, 25%, 1);
+  --cal-text-visualization-3: hsla(217, 91%, 25%, 1);
+  --cal-text-visualization-4: hsla(142, 71%, 25%, 1);
+  --cal-text-visualization-5: hsla(45, 93%, 25%, 1);
+  --cal-text-visualization-6: hsla(24, 95%, 25%, 1);
+  --cal-text-visualization-7: hsla(0, 84%, 25%, 1);
+
+  /* Legacy Content/Text Components */
+  --cal-text-info: hsla(225, 57%, 33%, 1);
+  --cal-text-success: hsla(144, 34%, 24%, 1);
+  --cal-text-attention: hsla(16, 62%, 28%, 1);
+  --cal-text-error: hsla(0, 63%, 31%, 1);
+
+  /* Brand */
+  --cal-brand: hsla(221, 39%, 11%, 1);
+  --cal-brand-emphasis: hsla(0, 0%, 6%, 1);
+  --cal-brand-text: hsla(0, 0%, 100%, 1);
+
+  /* Box Shadows */
+  --shadow-dropdown: 0px 5px 20px 0px rgba(0, 0, 0, 0.10), 0px 10px 40px 0px rgba(0, 0, 0, 0.03);
+  --shadow-switch-thumb: 0px 0.8px 0.8px 0px rgba(0, 0, 0, 0.10), 0px 0.8px 3.2px 0px rgba(0, 0, 0, 0.08);
+  --shadow-solid-gray-rested: 0px 2px 3px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.08), 1px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 2px 0.4px 0px rgba(255, 255, 255, 0.16) inset, 0px -1.5px 2px 0px rgba(0, 0, 0, 0.40) inset;
+  --shadow-solid-gray-hover: 0px 2px 3px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.08), 1px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 2px 0.4px 0px rgba(255, 255, 255, 0.16) inset, 0px -2px 2px 0px rgba(0, 0, 0, 0.40) inset;
+  --shadow-solid-gray-active: 0px 2px 3px 0px rgba(0, 0, 0, 0.40) inset, 0px 0px 2px 1px rgba(0, 0, 0, 0.40) inset;
+  --shadow-outline-gray-rested: 0px 2px 3px 0px rgba(0, 0, 0, 0.03), 0px 2px 2px -1px rgba(0, 0, 0, 0.03);
+  --shadow-outline-gray-hover: 0px 2px 3px 0px rgba(0, 0, 0, 0.03), 0px 2px 2px -1px rgba(0, 0, 0, 0.03);
+  --shadow-outline-gray-active: 0px 2px 1px 0px rgba(0, 0, 0, 0.05) inset;
+  --shadow-outline-gray-focused: 0px 0px 0px 1px rgba(255, 255, 255, 0.20), 0px 0px 0px 2px rgba(0, 0, 0, 0.10);
+  --shadow-outline-red-rested: 0px 2px 3px 0px rgba(0, 0, 0, 0.03), 0px 2px 2px -1px rgba(0, 0, 0, 0.03);
+  --shadow-outline-red-hover: 0px 1px 1px 0px rgba(0, 0, 0, 0.06), 0px 2px 3px 0px rgba(0, 0, 0, 0.08);
+  --shadow-outline-red-active: 0px 1px 1px 0px rgba(127, 29, 29, 0.06), 0px 0px 3px 0px rgba(127, 29, 29, 0.08), 0px 2px 2px 1px rgba(127, 29, 29, 0.06) inset;
+  --shadow-elevation-low: 0px 1px 1px 0px rgba(0, 0, 0, 0.07), 0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0px 2px 2px 0px rgba(0, 0, 0, 0.10), 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
+  --shadow-button-solid-brand-default: 0px 2px 3px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.08), 1px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 2px 0.4px 0px rgba(255, 255, 255, 0.12) inset, 0px -3px 2px 0px rgba(0, 0, 0, 0.04) inset;
+  --shadow-button-solid-brand-hover: 0px 1px 1px 0px rgba(0, 0, 0, 0.10), 0px 2px 3px 0px rgba(0, 0, 0, 0.08), 1px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px -3px 2px 0px rgba(0, 0, 0, 0.10) inset, 0px 2px 0.4px 0px rgba(255, 255, 255, 0.24) inset;
+  --shadow-button-solid-brand-active: 0px 3px 1px 0px rgba(0, 0, 0, 0.10) inset, 0px 0px 2px 0px rgba(0, 0, 0, 0.10) inset;
+  --shadow-button-solid-brand-focused: 0px 0px 0px 1px rgba(255, 255, 255, 0.40), 0px 0px 0px 2px rgba(0, 0, 0, 0.20), 0px 1px 1px 0px rgba(0, 0, 0, 0.10), 0px 2px 3px 0px rgba(0, 0, 0, 0.08), 1px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px -3px 2px 0px rgba(0, 0, 0, 0.10) inset, 0px 2px 0.4px 0px rgba(255, 255, 255, 0.24) inset;
+  --shadow-button-outline-red-focused: 0px 0px 0px 1px rgba(255, 255, 255, 0.32), 0px 0px 0px 2px rgba(220, 38, 38, 0.15);
+
+  /* Fill Colors */
+  --fill-emphasis: var(--cal-text-emphasis, #111827);
+  --fill-default: var(--cal-text, #374151);
+  --fill-subtle: var(--cal-text-subtle, #6B7280);
+  --fill-muted: var(--cal-text-muted, #9CA3AF);
+  --fill-inverted: var(--cal-text-inverted, white);
+  --fill-info: var(--cal-text-info, #253985);
+  --fill-success: var(--cal-text-success, #285231);
+  --fill-attention: var(--cal-text-attention, #73321B);
+  --fill-error: var(--cal-text-error, #752522);
+  --fill-brand: var(--cal-brand-text);
+}
+
+.dark {
+  /* Background Standard */
+  --cal-bg-emphasis: hsla(0, 0%, 25%, 1);
+  --cal-bg: hsla(0, 0%, 6%, 1);
+  --cal-bg-subtle: hsla(0, 0%, 15%, 1);
+  --cal-bg-muted: hsla(0, 0%, 9%, 1);
+  --cal-bg-inverted: hsla(0, 0%, 98%, 1);
+
+  /* Background Primary */
+  --cal-bg-primary: hsla(0, 0%, 96%, 1);
+  --cal-bg-primary-emphasis: hsla(0, 0%, 64%, 1);
+  --cal-bg-primary-muted: hsla(0, 0%, 15%, 1);
+
+  /* Background Brand */
+  --cal-bg-brand: hsla(0, 0%, 98%, 1);
+  --cal-bg-brand-emphasis: hsla(0, 0%, 96%, 1);
+  --cal-bg-brand-muted: hsla(0, 0%, 96%, 1);
+
+  /* Background Semantic */
+  --cal-bg-semantic-info-subtle: hsla(236, 80%, 8%, 1);
+  --cal-bg-semantic-info-emphasis: hsla(229, 90%, 74%, 1);
+  --cal-bg-semantic-success-subtle: hsla(148, 88%, 16%, 1);
+  --cal-bg-semantic-success-emphasis: hsla(158, 74%, 38%, 1);
+  --cal-bg-semantic-attention-subtle: hsla(21, 86%, 8%, 1);
+  --cal-bg-semantic-attention-emphasis: hsla(27, 96%, 61%, 1);
+  --cal-bg-semantic-error-subtle: hsla(0, 70%, 8%, 1);
+  --cal-bg-semantic-error-emphasis: hsla(0, 91%, 71%, 1);
+
+  /* Background Visualization */
+  --cal-bg-visualization-1-subtle: hsla(336, 74%, 35%, 1);
+  --cal-bg-visualization-1-emphasis: hsla(330, 81%, 60%, 1);
+  --cal-bg-visualization-2-subtle: hsla(252, 83%, 23%, 1);
+  --cal-bg-visualization-2-emphasis: hsla(256, 85%, 57%, 1);
+  --cal-bg-visualization-3-subtle: hsla(236, 74%, 35%, 1);
+  --cal-bg-visualization-3-emphasis: hsla(235, 100%, 63%, 1);
+  --cal-bg-visualization-4-subtle: hsla(150, 84%, 22%, 1);
+  --cal-bg-visualization-4-emphasis: hsla(158, 74%, 38%, 1);
+  --cal-bg-visualization-5-subtle: hsla(28, 73%, 26%, 1);
+  --cal-bg-visualization-5-emphasis: hsla(45, 93%, 47%, 1);
+  --cal-bg-visualization-6-subtle: hsla(15, 75%, 23%, 1);
+  --cal-bg-visualization-6-emphasis: hsla(25, 95%, 53%, 1);
+  --cal-bg-visualization-7-subtle: hsla(0, 70%, 35%, 1);
+  --cal-bg-visualization-7-emphasis: hsla(0, 84%, 60%, 1);
+
+  /* Legacy Background Components */
+  --cal-bg-info: hsla(228, 56%, 33%, 1);
+  --cal-bg-success: hsla(133, 34%, 24%, 1);
+  --cal-bg-attention: hsla(16, 62%, 28%, 1);
+  --cal-bg-error: hsla(2, 55%, 30%, 1);
+  --cal-bg-dark-error: hsla(2, 55%, 30%, 1);
+  --cal-bg-launch-dark: hsla(242, 53%, 10%, 1);
+
+  /* Border Standard */
+  --cal-border: hsla(0, 0%, 30%, 1);
+  --cal-border-muted: hsla(0, 0%, 9%, 1);
+  --cal-border-subtle: hsla(0, 0%, 15%, 1);
+  --cal-border-emphasis: hsla(0, 0%, 45%, 1);
+  --cal-border-semantic-error: hsla(0, 63%, 24%, 1);
+  --cal-border-semantic-attention-subtle: hsla(15, 75%, 23%, 1);
+  --cal-border-semantic-error-subtle: hsla(0, 63%, 24%, 1);
+  --cal-border-error: hsla(0, 63%, 24%, 1);
+  --cal-border-booker: var(--cal-border-subtle);
+
+  /* Content/Text Standard */
+  --cal-text-emphasis: hsla(0, 0%, 98%, 1);
+  --cal-text: hsla(0, 0%, 83%, 1);
+  --cal-text-subtle: hsla(0, 0%, 64%, 1);
+  --cal-text-muted: hsla(0, 0%, 64%, 1);
+  --cal-text-inverted: hsla(0, 0%, 0%, 1);
+
+  /* Content/Text Semantic */
+  --cal-text-semantic-info: hsla(229, 90%, 74%, 1);
+  --cal-text-semantic-success: hsla(161, 49%, 54%, 1);
+  --cal-text-semantic-attention: hsla(27, 96%, 61%, 1);
+  --cal-text-semantic-error: hsla(0, 91%, 71%, 1);
+  --cal-text-semantic-info-emphasis: hsla(217, 91%, 25%, 1);
+  --cal-text-semantic-success-emphasis: hsla(142, 71%, 25%, 1);
+  --cal-text-semantic-attention-emphasis: hsla(24, 95%, 25%, 1);
+  --cal-text-semantic-error-emphasis: hsla(0, 84%, 25%, 1);
+
+  /* Legacy Content/Text Components */
+  --cal-text-info: hsla(218, 83%, 93%, 1);
+  --cal-text-success: hsla(134, 76%, 94%, 1);
+  --cal-text-attention: hsla(37, 86%, 92%, 1);
+  --cal-text-error: hsla(3, 66%, 93%, 1);
+
+  /* Brand */
+  --cal-brand: hsla(0, 0%, 100%, 1);
+  --cal-brand-emphasis: hsla(218, 11%, 65%, 1);
+  --cal-brand-text: hsla(0, 0%, 0%, 1);
+
+  /* Fill Colors */
+  --fill-emphasis: var(--cal-text-emphasis);
+  --fill-default: var(--cal-text);
+  --fill-subtle: var(--cal-text-subtle);
+  --fill-muted: var(--cal-text-muted);
+  --fill-inverted: var(--cal-text-inverted);
+  --fill-info: var(--cal-text-info);
+  --fill-success: var(--cal-text-success);
+  --fill-attention: var(--cal-text-attention);
+  --fill-error: var(--cal-text-error);
+  --fill-brand: var(--cal-brand-text);
+}
\ No newline at end of file
diff --git a/packages/coss-ui/components.json b/packages/coss-ui/components.json
new file mode 100644
index 0000000000..06c704d2c8
--- /dev/null
+++ b/packages/coss-ui/components.json
@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "css": "./styles.css",
+    "baseColor": "zinc",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@coss/ui/components",
+    "utils": "@coss/ui/lib/utils",
+    "hooks": "@coss/ui/hooks",
+    "lib": "@coss/ui/lib",
+    "ui": "@coss/ui/components"
+  }
+}
diff --git a/packages/coss-ui/components/button.tsx b/packages/coss-ui/components/button.tsx
new file mode 100644
index 0000000000..148aa606a9
--- /dev/null
+++ b/packages/coss-ui/components/button.tsx
@@ -0,0 +1,67 @@
+import * as React from "react"
+import { mergeProps } from "@base-ui-components/react/merge-props"
+import { useRender } from "@base-ui-components/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@coss/ui/lib/utils"
+
+const buttonVariants = cva(
+  "relative inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-lg border bg-clip-padding text-sm font-medium whitespace-nowrap transition-shadow outline-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-primary bg-primary text-primary-foreground shadow-xs shadow-primary/24 not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] hover:bg-primary/90 [&:is(:active,[data-pressed])]:inset-shadow-[0_1px_--theme(--color-black/8%)] [&:is(:disabled,:active,[data-pressed])]:shadow-none",
+        outline:
+          "border-border bg-background shadow-xs not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:not-in-data-[slot=group]:bg-clip-border dark:not-disabled:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/4%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/8%)] [&:is(:disabled,:active,[data-pressed])]:shadow-none [&:is(:hover,[data-pressed])]:bg-accent/50 dark:[&:is(:hover,[data-pressed])]:bg-input/64",
+        secondary:
+          "border-secondary bg-secondary text-secondary-foreground hover:bg-secondary/90 data-pressed:bg-secondary/90",
+        destructive:
+          "border-destructive bg-destructive text-white shadow-xs shadow-destructive/24 not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] hover:bg-destructive/90 [&:is(:active,[data-pressed])]:inset-shadow-[0_1px_--theme(--color-black/8%)] [&:is(:disabled,:active,[data-pressed])]:shadow-none",
+        "destructive-outline":
+          "border-border bg-transparent text-destructive-foreground shadow-xs not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:not-in-data-[slot=group]:bg-clip-border dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/4%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/8%)] [&:is(:disabled,:active,[data-pressed])]:shadow-none [&:is(:hover,[data-pressed])]:border-destructive/32 [&:is(:hover,[data-pressed])]:bg-destructive/4",
+        ghost: "border-transparent hover:bg-accent data-pressed:bg-accent",
+        link: "border-transparent underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "min-h-8 px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)]",
+        xs: "min-h-6 gap-1 rounded-md px-[calc(--spacing(2)-1px)] py-[calc(--spacing(1)-1px)] text-xs before:rounded-[calc(var(--radius-md)-1px)] [&_svg:not([class*='size-'])]:size-3",
+        sm: "min-h-7 gap-1.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)]",
+        lg: "min-h-9 px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(2)-1px)]",
+        xl: "min-h-10 px-[calc(--spacing(4)-1px)] py-[calc(--spacing(2)-1px)] text-base [&_svg:not([class*='size-'])]:size-4.5",
+        icon: "size-8",
+        "icon-sm": "size-7",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+interface ButtonProps extends useRender.ComponentProps<"button"> {
+  variant?: VariantProps<typeof buttonVariants>["variant"]
+  size?: VariantProps<typeof buttonVariants>["size"]
+}
+
+function Button({ className, variant, size, render, ...props }: ButtonProps) {
+  const typeValue: React.ButtonHTMLAttributes<HTMLButtonElement>["type"] =
+    render ? undefined : "button"
+
+  const defaultProps = {
+    "data-slot": "button",
+    className: cn(buttonVariants({ variant, size, className })),
+    type: typeValue,
+  }
+
+  return useRender({
+    defaultTagName: "button",
+    render,
+    props: mergeProps<"button">(defaultProps, props),
+  })
+}
+
+export { Button, buttonVariants }
\ No newline at end of file
diff --git a/packages/coss-ui/components/input.tsx b/packages/coss-ui/components/input.tsx
new file mode 100644
index 0000000000..bafa4b4fd6
--- /dev/null
+++ b/packages/coss-ui/components/input.tsx
@@ -0,0 +1,41 @@
+"use client"
+
+import { Input as InputPrimitive } from "@base-ui-components/react/input"
+
+import { cn } from "@coss/ui/lib/utils"
+
+function Input({
+  className,
+  size = "default",
+  ...props
+}: Omit<InputPrimitive.Props, "size"> & {
+  size?: "sm" | "default" | "lg" | number
+}) {
+  return (
+    <span
+      data-slot="input-control"
+      className={cn(
+        "relative inline-flex w-full rounded-lg border border-input bg-background bg-clip-padding text-base/5 shadow-xs ring-ring/24 transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] has-focus-visible:border-ring has-focus-visible:ring-[3px] has-disabled:opacity-64 has-aria-invalid:border-destructive/36 has-focus-visible:has-aria-invalid:border-destructive/64 has-focus-visible:has-aria-invalid:ring-destructive/16 sm:text-sm dark:bg-input/32 dark:not-in-data-[slot=group]:bg-clip-border dark:not-has-disabled:has-not-focus-visible:not-has-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/8%)] dark:has-aria-invalid:ring-destructive/24 [&:has(:disabled,:focus-visible,[aria-invalid])]:shadow-none",
+        className
+      )}
+    >
+      <InputPrimitive
+        data-slot="input"
+        className={cn(
+          "w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none placeholder:text-muted-foreground/64",
+          size === "sm" &&
+            "px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)]",
+          size === "lg" && "py-[calc(--spacing(2)-1px)]",
+          props.type === "search" &&
+            "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none",
+          props.type === "file" &&
+            "text-muted-foreground file:me-3 file:bg-transparent file:text-sm file:font-medium file:text-foreground"
+        )}
+        size={typeof size === "number" ? size : undefined}
+        {...props}
+      />
+    </span>
+  )
+}
+
+export { Input }
diff --git a/packages/coss-ui/lib/utils.ts b/packages/coss-ui/lib/utils.ts
new file mode 100644
index 0000000000..bd0c391ddd
--- /dev/null
+++ b/packages/coss-ui/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
diff --git a/packages/coss-ui/package.json b/packages/coss-ui/package.json
new file mode 100644
index 0000000000..45c8913aa3
--- /dev/null
+++ b/packages/coss-ui/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "@coss/ui",
+  "private": true,
+  "version": "0.0.0",
+  "exports": {
+    "./styles.css": "./styles.css",
+    "./components/*": "./components/*.tsx",
+    "./lib/*": "./lib/*.ts"
+  },
+  "dependencies": {
+    "@base-ui-components/react": "^1.0.0-beta.4",
+    "class-variance-authority": "^0.4.0",
+    "clsx": "^2.0.0",
+    "tailwind-merge": "^2.0.0"
+  }
+}
diff --git a/packages/coss-ui/styles.css b/packages/coss-ui/styles.css
new file mode 100644
index 0000000000..3f571a9317
--- /dev/null
+++ b/packages/coss-ui/styles.css
@@ -0,0 +1,156 @@
+@source "./components/**/*.tsx";
+@source "./lib/**/*.ts";
+
+@custom-variant dark (&:is(.dark *));
+
+@custom-variant fixed (&:is(.layout-fixed *));
+
+@theme inline {
+  --breakpoint-3xl: 1600px;
+  --breakpoint-4xl: 2000px;  
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-sans);
+  --font-heading: var(--font-heading);
+  --font-mono:
+    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+    "Courier New", monospace;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card); 
+  --color-code: var(--code);
+  --color-code-foreground: var(--code-foreground);
+  --color-code-highlight: var(--code-highlight);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.21 0.006 285.885);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.21 0.006 285.885);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.21 0.006 285.885);
+  --primary: oklch(0.274 0.006 286.033);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0 0 0 / 4%);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0 0 0 / 4%);
+  --muted-foreground: oklch(0.442 0.017 285.786);
+  --accent: oklch(0 0 0 / 4%);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.637 0.237 25.331);
+  --destructive-foreground: oklch(0.505 0.213 27.518);
+  --info: oklch(0.623 0.214 259.815);
+  --info-foreground: oklch(0.488 0.243 264.376);
+  --success: oklch(0.696 0.17 162.48);
+  --success-foreground: oklch(0.508 0.118 165.612);
+  --warning: oklch(0.769 0.188 70.08);
+  --warning-foreground: oklch(0.555 0.163 48.998);
+  --border: oklch(0 0 0 / 10%);
+  --input: oklch(0 0 0 / 10%);
+  --ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-primary: oklch(0.274 0.006 286.033);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0 0 0 / 4%);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0 0 0 / 10%);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+  --code: oklch(1 0 0);
+  --code-foreground: var(--foreground);
+  --code-highlight: oklch(0 0 0 / 4%);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.967 0.001 286.375);
+  --card: color-mix(in srgb, oklch(0.21 0.006 285.885) 80%, oklch(0.141 0.005 285.823));
+  --card-foreground: oklch(0.967 0.001 286.375);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.967 0.001 286.375);
+  --primary: oklch(0.967 0.001 286.375);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(1 0 0 / 8%);
+  --secondary-foreground: oklch(0.967 0.001 286.375);
+  --muted: oklch(1 0 0 / 8%);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(1 0 0 / 8%);
+  --accent-foreground: oklch(0.967 0.001 286.375);
+  --destructive: oklch(0.637 0.237 25.331);
+  --destructive-foreground: oklch(0.704 0.191 22.216);
+  --info: oklch(0.623 0.214 259.815);
+  --info-foreground: oklch(0.707 0.165 254.624);
+  --success: oklch(0.696 0.17 162.48);
+  --success-foreground: oklch(0.765 0.177 163.223);
+  --warning: oklch(0.769 0.188 70.08);
+  --warning-foreground: oklch(0.828 0.189 84.429);  
+  --border: oklch(1 0 0 / 12%);
+  --input: oklch(1 0 0 / 12%);
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: color-mix(in srgb, oklch(0.21 0.006 285.885) 32%, oklch(0.141 0.005 285.823));
+  --sidebar-foreground: oklch(0.967 0.001 286.375);
+  --sidebar-primary: oklch(0.967 0.001 286.375);
+  --sidebar-primary-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-accent: oklch(1 0 0 / 8%);
+  --sidebar-accent-foreground: oklch(0.967 0.001 286.375);
+  --sidebar-border: oklch(1 0 0 / 12%);
+  --sidebar-ring: oklch(0.705 0.015 286.067);  
+  --code: color-mix(in srgb, oklch(0.21 0.006 285.885) 80%, oklch(0.141 0.005 285.823));
+  --code-foreground: var(--foreground);
+  --code-highlight: oklch(1 0 0 / 8%);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+}
\ No newline at end of file
diff --git a/packages/emails/tailwind.config.js b/packages/emails/tailwind.config.js
deleted file mode 100644
index 471894731e..0000000000
--- a/packages/emails/tailwind.config.js
+++ /dev/null
@@ -1,143 +0,0 @@
-module.exports = {
-  mode: "jit",
-  theme: {
-    screens: {
-      sm: { max: "600px" },
-    },
-    extend: {
-      spacing: {
-        screen: "100vw",
-        full: "100%",
-        px: "1px",
-        0: "0",
-        2: "2px",
-        3: "3px",
-        4: "4px",
-        5: "5px",
-        6: "6px",
-        7: "7px",
-        8: "8px",
-        9: "9px",
-        10: "10px",
-        11: "11px",
-        12: "12px",
-        14: "14px",
-        16: "16px",
-        20: "20px",
-        24: "24px",
-        28: "28px",
-        32: "32px",
-        36: "36px",
-        40: "40px",
-        44: "44px",
-        48: "48px",
-        52: "52px",
-        56: "56px",
-        60: "60px",
-        64: "64px",
-        72: "72px",
-        80: "80px",
-        96: "96px",
-        600: "600px",
-        "1/2": "50%",
-        "1/3": "33.333333%",
-        "2/3": "66.666667%",
-        "1/4": "25%",
-        "2/4": "50%",
-        "3/4": "75%",
-        "1/5": "20%",
-        "2/5": "40%",
-        "3/5": "60%",
-        "4/5": "80%",
-        "1/6": "16.666667%",
-        "2/6": "33.333333%",
-        "3/6": "50%",
-        "4/6": "66.666667%",
-        "5/6": "83.333333%",
-        "1/12": "8.333333%",
-        "2/12": "16.666667%",
-        "3/12": "25%",
-        "4/12": "33.333333%",
-        "5/12": "41.666667%",
-        "6/12": "50%",
-        "7/12": "58.333333%",
-        "8/12": "66.666667%",
-        "9/12": "75%",
-        "10/12": "83.333333%",
-        "11/12": "91.666667%",
-      },
-      borderRadius: {
-        none: "0px",
-        sm: "2px",
-        DEFAULT: "4px",
-        md: "6px",
-        lg: "8px",
-        xl: "12px",
-        "2xl": "16px",
-        "3xl": "24px",
-        full: "9999px",
-      },
-      fontFamily: {
-        sans: ["ui-sans-serif", "system-ui", "-apple-system", '"Segoe UI"', "sans-serif"],
-        serif: ["ui-serif", "Georgia", "Cambria", '"Times New Roman"', "Times", "serif"],
-        mono: ["ui-monospace", "Menlo", "Consolas", "monospace"],
-      },
-      fontSize: {
-        0: "0",
-        xs: "12px",
-        sm: "14px",
-        base: "16px",
-        lg: "18px",
-        xl: "20px",
-        "2xl": "24px",
-        "3xl": "30px",
-        "4xl": "36px",
-        "5xl": "48px",
-        "6xl": "60px",
-        "7xl": "72px",
-        "8xl": "96px",
-        "9xl": "128px",
-      },
-      inset: (theme) => ({
-        ...theme("spacing"),
-      }),
-      letterSpacing: (theme) => ({
-        ...theme("spacing"),
-      }),
-      lineHeight: (theme) => ({
-        ...theme("spacing"),
-      }),
-      maxHeight: (theme) => ({
-        ...theme("spacing"),
-      }),
-      maxWidth: (theme) => ({
-        ...theme("spacing"),
-        xs: "160px",
-        sm: "192px",
-        md: "224px",
-        lg: "256px",
-        xl: "288px",
-        "2xl": "336px",
-        "3xl": "384px",
-        "4xl": "448px",
-        "5xl": "512px",
-        "6xl": "576px",
-        "7xl": "640px",
-      }),
-      minHeight: (theme) => ({
-        ...theme("spacing"),
-      }),
-      minWidth: (theme) => ({
-        ...theme("spacing"),
-      }),
-    },
-  },
-  corePlugins: {
-    animation: false,
-    backgroundOpacity: false,
-    borderOpacity: false,
-    divideOpacity: false,
-    placeholderOpacity: false,
-    textOpacity: false,
-  },
-};
diff --git a/packages/embeds/embed-core/index.html b/packages/embeds/embed-core/index.html
index d59bdad44d..4da78e367a 100644
--- a/packages/embeds/embed-core/index.html
+++ b/packages/embeds/embed-core/index.html
@@ -1,239 +1,243 @@
 <html>
-  <head>
-    <title>Embed Playground</title>
-    <style>
-      html.grid-row-gap body {
-        grid-row-gap: 10rem;
-        flex-flow: column;
-        display: flex;
-      }
-    </style>
-     <script type="text/javascript" src="./playground/lib/playground-init.ts"></script>
-    <script>
-      let popupRescheduleUid = null;
-      let popupCancelUid = null;
-      let calLink = null;
-      const initialNamespace = (url.searchParams.get("only") || "").split("ns:")[1] || "";
-      (function defineVariables() {
-        const searchParams = new URL(document.URL).searchParams;
-        popupRescheduleUid = searchParams.get("popupRescheduleUid") || "qm3kwt3aTnVD7vmP9tiT2f";
-        popupCancelUid = searchParams.get("popupCancelUid") || "qm3kwt3aTnVD7vmP9tiT2f";
-        calLink = searchParams.get("calLink");
-      })()
-      
-      if (!location.search.includes("nonResponsive")) {
-        document.write('<meta name="viewport" content="width=device-width"/>');
-      }
 
-      if (location.search.includes("grid-row-gap")) {
-        document.documentElement.classList.add("grid-row-gap");
-      }
-     
-      function addInlineEmbedInNewNamespaceWithoutReload(selector) {
-        Cal("init", "withoutReloadNamespace", {
-          debug: true,
-          calOrigin: window.calOrigin,
-        });
+<head>
+  <title>Embed Playground</title>
+  <style>
+    html.grid-row-gap body {
+      grid-row-gap: 10rem;
+      flex-flow: column;
+      display: flex;
+    }
+  </style>
+  <script type="text/javascript" src="./playground/lib/playground-init.ts"></script>
+  <script>
+    let popupRescheduleUid = null;
+    let popupCancelUid = null;
+    let calLink = null;
+    const initialNamespace = (url.searchParams.get("only") || "").split("ns:")[1] || "";
+    (function defineVariables() {
+      const searchParams = new URL(document.URL).searchParams;
+      popupRescheduleUid = searchParams.get("popupRescheduleUid") || "qm3kwt3aTnVD7vmP9tiT2f";
+      popupCancelUid = searchParams.get("popupCancelUid") || "qm3kwt3aTnVD7vmP9tiT2f";
+      calLink = searchParams.get("calLink");
+    })()
 
-        Cal.ns.withoutReloadNamespace("inline", {
-          elementOrSelector: selector,
-          calLink: "pro?case=addInlineEmbedInANewNamespaceWithoutReload",
-          config: {
-            "flag.coep":"true"
-          }
-        });
-      };
-    </script>
-    <script>
-      // Put the snippet in a function so that it can be re-executed for scenario testing
-      // TODO: How to reuse embed-snippet export here?
-      function embedSnippet() {
-        (function (C, A, L) {
+    if (!location.search.includes("nonResponsive")) {
+      document.write('<meta name="viewport" content="width=device-width"/>');
+    }
+
+    if (location.search.includes("grid-row-gap")) {
+      document.documentElement.classList.add("grid-row-gap");
+    }
+
+    function addInlineEmbedInNewNamespaceWithoutReload(selector) {
+      Cal("init", "withoutReloadNamespace", {
+        debug: true,
+        calOrigin: window.calOrigin,
+      });
+
+      Cal.ns.withoutReloadNamespace("inline", {
+        elementOrSelector: selector,
+        calLink: "pro?case=addInlineEmbedInANewNamespaceWithoutReload",
+        config: {
+          "flag.coep": "true"
+        }
+      });
+    };
+  </script>
+  <script>
+    // Put the snippet in a function so that it can be re-executed for scenario testing
+    // TODO: How to reuse embed-snippet export here?
+    function embedSnippet() {
+      (function (C, A, L) {
         let p = function (a, ar) {
           a.q.push(ar);
         };
         let d = C.document;
-          C.Cal =
-            C.Cal ||
-            function () {
-              let cal = C.Cal;
-              let ar = arguments;
-              if (!cal.loaded) {
-                cal.ns = {};
-                cal.q = cal.q || [];
-                d.head.appendChild(d.createElement("script")).src = A;
-                cal.loaded = true;
-              }
-              if (ar[0] === L) {
-                const api = function () {
-                  p(api, arguments);
-                };
-                const namespace = ar[1];
-                api.q = api.q || [];
-                if (typeof namespace === "string"){
-                  // Make sure that even after re-execution of the snippet, the namespace is not overridden
-                  cal.ns[namespace] = cal.ns[namespace] || api; 
-                  p(cal.ns[namespace], ar); 
-                  p(cal, ['initNamespace', namespace])
-                } else p(cal, ar);
-                return;
-              }
-              p(cal, ar);
-            };
-        })(window, window.calOrigin + "/embed/embed.js", "init");
-      }
+        C.Cal =
+          C.Cal ||
+          function () {
+            let cal = C.Cal;
+            let ar = arguments;
+            if (!cal.loaded) {
+              cal.ns = {};
+              cal.q = cal.q || [];
+              d.head.appendChild(d.createElement("script")).src = A;
+              cal.loaded = true;
+            }
+            if (ar[0] === L) {
+              const api = function () {
+                p(api, arguments);
+              };
+              const namespace = ar[1];
+              api.q = api.q || [];
+              if (typeof namespace === "string") {
+                // Make sure that even after re-execution of the snippet, the namespace is not overridden
+                cal.ns[namespace] = cal.ns[namespace] || api;
+                p(cal.ns[namespace], ar);
+                p(cal, ['initNamespace', namespace])
+              } else p(cal, ar);
+              return;
+            }
+            p(cal, ar);
+          };
+      })(window, window.calOrigin + "/embed/embed.js", "init");
+    }
+    embedSnippet();
+  </script>
+  <script>
+    function doubleInstallSnippetWithInlineEmbedWithNonDefaultNamespace(selector) {
+      Cal("init", "doubleInstall", {
+        debug: true,
+        calOrigin: window.calOrigin,
+      });
+      Cal.ns.doubleInstall("inline", {
+        elementOrSelector: selector,
+        calLink: "pro?case=doubleInstallSnippetWithInlineEmbedWithNonDefaultNamespace",
+        config: {
+          "flag.coep": "true"
+        }
+      });
       embedSnippet();
-      </script>
-      <script>
-        function doubleInstallSnippetWithInlineEmbedWithNonDefaultNamespace(selector) {
-          Cal("init", "doubleInstall", {
-            debug: true,
-            calOrigin: window.calOrigin,
-          });
-          Cal.ns.doubleInstall("inline", {
-            elementOrSelector: selector,
-            calLink: "pro?case=doubleInstallSnippetWithInlineEmbedWithNonDefaultNamespace",
-            config: {
-              "flag.coep":"true"
-            }
-          });
-          embedSnippet();
-          Cal("init", "doubleInstall", {
-            debug: true,
-            calOrigin: window.calOrigin,
-          });
-          Cal.ns.doubleInstall("inline", {
-            elementOrSelector: selector,
-            calLink: "pro",
-            config: {
-              "flag.coep":"true"
-            }
-          });
+      Cal("init", "doubleInstall", {
+        debug: true,
+        calOrigin: window.calOrigin,
+      });
+      Cal.ns.doubleInstall("inline", {
+        elementOrSelector: selector,
+        calLink: "pro",
+        config: {
+          "flag.coep": "true"
         }
+      });
+    }
 
 
-        function doubleInstallSnippetWithInlineEmbed(selector) {
-          Cal("init", {
-            debug: true,
-            calOrigin: window.calOrigin,
-          });
-          Cal("inline", {
-            elementOrSelector: selector,
-            calLink: "pro?case=doubleInstallSnippetWithInlineEmbed",
-            config: {
-              "flag.coep":"true"
-            }
-          });
-          embedSnippet();
-          Cal("init", {
-            debug: true,
-            calOrigin: window.calOrigin,
-          });
-          Cal("inline", {
-            elementOrSelector: selector,
-            calLink: "pro",
-            config: {
-              "flag.coep":"true"
-            }
-          });
+    function doubleInstallSnippetWithInlineEmbed(selector) {
+      Cal("init", {
+        debug: true,
+        calOrigin: window.calOrigin,
+      });
+      Cal("inline", {
+        elementOrSelector: selector,
+        calLink: "pro?case=doubleInstallSnippetWithInlineEmbed",
+        config: {
+          "flag.coep": "true"
         }
+      });
+      embedSnippet();
+      Cal("init", {
+        debug: true,
+        calOrigin: window.calOrigin,
+      });
+      Cal("inline", {
+        elementOrSelector: selector,
+        calLink: "pro",
+        config: {
+          "flag.coep": "true"
+        }
+      });
+    }
 
-        function addTwoInlineEmbedWithTwoDifferentNamespacesWithDifferentInitConfig() {
-          Cal("init", "namespace-init-test-1", {
-            debug: true,
-            calOrigin: window.calOrigin,
-          });
-          Cal("init", "namespace-init-test-2", {
-            debug: true,
-            calOrigin: "http://127.0.0.1:3000",
-          });
-          Cal.ns['namespace-init-test-2']("inline", {
-            elementOrSelector: '#two-different-namespace-with-different-init-config-content-2',
-            calLink: "pro",
-            config: {
-              "flag.coep":"true"
-            }
-          });
-          Cal.ns['namespace-init-test-1']("inline", {
-            elementOrSelector: '#two-different-namespace-with-different-init-config-content-1',
-            calLink: "pro",
-            config: {
-              "flag.coep":"true"
-            }
-          });
+    function addTwoInlineEmbedWithTwoDifferentNamespacesWithDifferentInitConfig() {
+      Cal("init", "namespace-init-test-1", {
+        debug: true,
+        calOrigin: window.calOrigin,
+      });
+      Cal("init", "namespace-init-test-2", {
+        debug: true,
+        calOrigin: "http://127.0.0.1:3000",
+      });
+      Cal.ns['namespace-init-test-2']("inline", {
+        elementOrSelector: '#two-different-namespace-with-different-init-config-content-2',
+        calLink: "pro",
+        config: {
+          "flag.coep": "true"
         }
-      </script>
-  
-    <style>
-      body {
-        background: linear-gradient(
-          90deg,
+      });
+      Cal.ns['namespace-init-test-1']("inline", {
+        elementOrSelector: '#two-different-namespace-with-different-init-config-content-1',
+        calLink: "pro",
+        config: {
+          "flag.coep": "true"
+        }
+      });
+    }
+  </script>
+
+  <style>
+    body {
+      background: linear-gradient(90deg,
           rgba(120, 116, 186, 1) 0%,
           rgba(221, 221, 255, 1) 41%,
-          rgba(148, 232, 249, 1) 100%
-        );
-      }
-      .inline-embed-container {
-        /* border: 1px solid black; */
-        margin-bottom: 5px;
-        border-bottom: 1px solid;
-      }
+          rgba(148, 232, 249, 1) 100%);
+    }
 
-      .loader {
-        color: green;
-      }
-      * {
-        --cal-brand-color: gray;
-      }
-    </style>
-  </head>
-  <body>
-    <div style="margin-bottom: 20px;">
-      <h2>Different variations of the page</h2>
-      <div style="display: flex; flex-flow: row; gap: 10px;"> 
-        <span style="display: block"><a href="?color-scheme=dark">With Dark Color Scheme for the Page</a></span>
-        <span style="display: block"><a href="?nonResponsive">Non responsive version of this page here</a></span>
-        <span style="display: block"><a href="?grid-row-gap">Grid row gap version of this page here</a></span>
+    .inline-embed-container {
+      /* border: 1px solid black; */
+      margin-bottom: 5px;
+      border-bottom: 1px solid;
+    }
+
+    .loader {
+      color: green;
+    }
+  </style>
+</head>
+
+<body>
+  <div style="margin-bottom: 20px;">
+    <h2>Different variations of the page</h2>
+    <div style="display: flex; flex-flow: row; gap: 10px;">
+      <span style="display: block"><a href="?color-scheme=dark">With Dark Color Scheme for the Page</a></span>
+      <span style="display: block"><a href="?nonResponsive">Non responsive version of this page here</a></span>
+      <span style="display: block"><a href="?grid-row-gap">Grid row gap version of this page here</a></span>
     </div>
+  </div>
+  <div id="misc-embeds">
+    <h2>Misc Embeds</h2>
+    <div>
+      <button id="add-inline-embed-in-a-new-namespace-without-reload-button"
+        onclick="addInlineEmbedInNewNamespaceWithoutReload('#add-inline-embed-in-a-new-namespace-without-reload-button-content')">Add
+        Inline Embed in a new namespace without reload</button>
+      <div id="add-inline-embed-in-a-new-namespace-without-reload-button-content"></div>
     </div>
-    <div id="misc-embeds">
-      <h2>Misc Embeds</h2>
-      <div>
-        <button id="add-inline-embed-in-a-new-namespace-without-reload-button" onclick="addInlineEmbedInNewNamespaceWithoutReload('#add-inline-embed-in-a-new-namespace-without-reload-button-content')">Add Inline Embed in a new namespace without reload</button>
-        <div id="add-inline-embed-in-a-new-namespace-without-reload-button-content"></div>
+    <div>
+      <button id="double-install-snippet-with-inline-embed-default-namespace-button"
+        onclick="doubleInstallSnippetWithInlineEmbed('#double-install-snippet-with-inline-embed-default-namespace-content')">Double
+        Install Embed Snippet with inline embed - Default Namespace</button>
+      <div id="double-install-snippet-with-inline-embed-default-namespace-content"></div>
+    </div>
+    <div>
+      <button id="double-install-snippet-with-inline-embed-non-default-namespace-button"
+        onclick="doubleInstallSnippetWithInlineEmbedWithNonDefaultNamespace('#double-install-snippet-with-inline-embed-non-default-namespace-content')">Double
+        Install Embed Snippet with inline embed - Non Default Namespace</button>
+      <div id="double-install-snippet-with-inline-embed-non-default-namespace-content"></div>
+    </div>
+    <div>
+      <button id="two-different-namespace-with-different-init-config"
+        onclick="addTwoInlineEmbedWithTwoDifferentNamespacesWithDifferentInitConfig()">Two different namespace with two
+        different config</button>
+      <div id="two-different-namespace-with-different-init-config-area">
+        <div id="two-different-namespace-with-different-init-config-content-1"></div>
+        <div id="two-different-namespace-with-different-init-config-content-2"></div>
       </div>
-      <div>
-        <button id="double-install-snippet-with-inline-embed-default-namespace-button" onclick="doubleInstallSnippetWithInlineEmbed('#double-install-snippet-with-inline-embed-default-namespace-content')">Double Install Embed Snippet with inline embed - Default Namespace</button>
-        <div id="double-install-snippet-with-inline-embed-default-namespace-content"></div>
-      </div>
-      <div>
-        <button id="double-install-snippet-with-inline-embed-non-default-namespace-button" onclick="doubleInstallSnippetWithInlineEmbedWithNonDefaultNamespace('#double-install-snippet-with-inline-embed-non-default-namespace-content')">Double Install Embed Snippet with inline embed - Non Default Namespace</button>
-        <div id="double-install-snippet-with-inline-embed-non-default-namespace-content"></div>
-      </div>
-      <div>
-        <button id="two-different-namespace-with-different-init-config" onclick="addTwoInlineEmbedWithTwoDifferentNamespacesWithDifferentInitConfig()">Two different namespace with two different config</button>
-        <div id="two-different-namespace-with-different-init-config-area">
-          <div id="two-different-namespace-with-different-init-config-content-1"></div>
-          <div id="two-different-namespace-with-different-init-config-content-2"></div>
-        </div>
-      </div>
-      <span style="display: block">
-        <a href="?name=john&email=email&guests=abc&guests=def&notes=NOTES&location=%7B%22optionValue%22%3A%22%2B919999999999%22%2C%22value%22%3A%22phone%22%7D&only=ns%3ApageParamsForwarding">
-          Page Params Forwarding(Prefills various fields by auto-forwarding query params)
-        </a>
-      </span>
-      <span style="display: block"
-        ><a href="?only=prerender-test">Go to Prerender test page only</a><small></small
-      ></span>
-      <span style="display: block"
-      ><a href="?only=preload-test">Go to Preload test page only</a><small></small
-    ></span>
-      <button onclick="document.documentElement.style.colorScheme='dark'">Toggle Dark Scheme(For Embedding Page)</button>
-      <button onclick="document.documentElement.style.colorScheme='light'">Toggle Light Scheme(For Embedding Page)</button>
-      <div>
-        <script>
-          if (only === "all" || only === "prerender-test") {
-            document.write(`
+    </div>
+    <span style="display: block">
+      <a
+        href="?name=john&email=email&guests=abc&guests=def&notes=NOTES&location=%7B%22optionValue%22%3A%22%2B919999999999%22%2C%22value%22%3A%22phone%22%7D&only=ns%3ApageParamsForwarding">
+        Page Params Forwarding(Prefills various fields by auto-forwarding query params)
+      </a>
+    </span>
+    <span style="display: block"><a href="?only=prerender-test">Go to Prerender test page only</a><small></small></span>
+    <span style="display: block"><a href="?only=preload-test">Go to Preload test page only</a><small></small></span>
+    <button onclick="document.documentElement.style.colorScheme='dark'">Toggle Dark Scheme(For Embedding Page)</button>
+    <button onclick="document.documentElement.style.colorScheme='light'">Toggle Light Scheme(For Embedding
+      Page)</button>
+    <div>
+      <script>
+        if (only === "all" || only === "prerender-test") {
+          document.write(`
             <button data-cal-namespace="e2ePrerenderLightTheme"  data-cal-config='{"theme":"dark", "email":"preloaded-prefilled@example.com", "name": "Preloaded Prefilled", "flag.coep": "true"}' data-cal-link="free/30min">Book with Free User[Dark Theme]</button>
             <i
               >Corresponding Cal Link is being prerendered. Assuming that it would take you some time to click this
@@ -241,104 +245,105 @@
               local]. Try switching to slow 3G or create a custom Network configuration which is impossibly
               slow. This should be used if you know beforehand which type of embed is going to be opened.</i
             >`);
-          }
-          if (only === "all" || only === "preload-test") {
-            document.write(`
+        }
+        if (only === "all" || only === "preload-test") {
+          document.write(`
             <button data-cal-namespace="preloadTest" data-cal-config='{"theme":"dark", "email":"preloaded-prefilled@example.com", "name": "Preloaded Prefilled", "flag.coep": "true"}' data-cal-link="free/30min">Book with Free User[Dark Theme]</button>
             <i
               >Corresponding Cal Link is being preloaded. That means that all the resources would be preloaded. This could be useful in preloading possible resources if you don't know before hand which type of embed you want to show</i
             >`);
-          }
-        </script>
-      </div>
-      <span style="display: block"
-        ><a href="?only=all">Render All embeds together</a><small> - It would be slow to load</small></span
-      >
-      <div>
-        <a href="?only=ns:floatingButton">Floating Popup</a>
+        }
+      </script>
+    </div>
+    <span style="display: block"><a href="?only=all">Render All embeds together</a><small> - It would be slow to
+        load</small></span>
+    <a href="?only=ns:floatingButton">Floating Popup</a>
+    <h2>Popup Examples - Theme Tests</h2>
+    <button data-cal-namespace="e2ePopupLightTheme" data-cal-link="free"
+      data-cal-config='{"theme":"light", "flag.coep": "true"}'>Book an event with Free[Light Theme]</button>
+    <button data-cal-namespace="popupAutoTheme" data-cal-link="free" data-cal-config='{"flag.coep": "true"}'>
+      Book with Free User[Auto Theme]
+    </button>
+    <button data-cal-namespace="popupDarkTheme" data-cal-config='{"theme":"dark", "flag.coep": "true"}'
+      data-cal-link="free">
+      Book with Free User[Dark Theme]
+    </button>
+    <button data-cal-namespace="popupTeamLinkLightTheme" data-cal-config='{"theme":"light", "flag.coep": "true"}'
+      data-cal-link="team/seeded-team/collective-seeded-team-event">
+      Book with Test Team[Light Theme]
+    </button>
+    <button data-cal-namespace="popupTeamLinkDarkTheme" data-cal-config='{"theme":"dark", "flag.coep": "true"}'
+      data-cal-link="team/seeded-team/collective-seeded-team-event">
+      Book with Test Team[Dark Theme]
+    </button>
+    <button data-cal-namespace="popupTeamLinksList" data-cal-link="team/seeded-team/"
+      data-cal-config='{"flag.coep": "true"}'>
+      See Team Links [Auto Theme]
+    </button>
+    <button data-cal-namespace="popupPaidEvent" data-cal-link="pro/paid" data-cal-config='{"flag.coep": "true"}'>
+      Book Paid Event [Auto Theme]
+    </button>
+    <h2>Popup Examples - Reschedule Tests</h2>
+    <script>
+      document.write(
+        `<button data-cal-namespace="popupRescheduleWithReschedulePath" data-cal-config='{"flag.coep":"true"}' data-cal-link="reschedule/${popupRescheduleUid}">Reschedule Event(with /reschedule) - Needs popupRescheduleUid param</button>`
+      );
+    </script>
+    <script>
+      document.write(
+        `<button data-cal-namespace="popupRescheduleWithRescheduleUidParam" data-cal-config='{"flag.coep":"true", "rescheduleUid": "${popupRescheduleUid}"}' data-cal-link="${calLink}">Reschedule Event(with rescheduleUid param) - Needs popupRescheduleUid and calLink param</button>`
+      );
+    </script>
+    <h2>Popup Examples - Cancel Tests</h2>
+    <script>
+      document.write(
+        `<button data-cal-namespace="popupCancelBooking" data-cal-config='{"flag.coep":"true"}' data-cal-link="booking/${popupCancelUid}?cancel=true">Cancel Booking - Needs popupCancelUid param</button>`
+      );
+    </script>
+    <h2>Popup Examples - Different Configurations</h2>
+    <button data-cal-namespace="popupHideEventTypeDetails" data-cal-link="free/30min"
+      data-cal-config='{"flag.coep": "true"}'>
+      Book Free Event [Auto Theme][uiConfig.hideEventTypeDetails=true]
+    </button>
+    <button data-cal-namespace="popupPaidEvent" data-cal-config='{"layout":"week_view", "flag.coep": "true"}'
+      data-cal-link="pro/paid">
+      Book Paid Event - weekly view
+    </button>
+    <button data-cal-namespace="popupPaidEvent" data-cal-config='{"layout":"column_view", "flag.coep": "true"}'
+      data-cal-link="pro/paid">
+      Book Paid Event - column view
+    </button>
+    <h2>Popup Examples - Routing Form Tests</h2>
+    <button data-cal-namespace="routingFormAuto" data-cal-link="forms/948ae412-d995-4865-875a-48302588de03"
+      data-cal-config='{"flag.coep": "true"}'>
+      Book through Routing Form [Auto Theme] - Test for 'routed' event
+    </button>
+    <button data-cal-namespace="routingFormDark" data-cal-config='{"theme":"dark", "flag.coep": "true"}'
+      data-cal-link="forms/948ae412-d995-4865-875a-48302588de03">
+      Book through Routing Form [Dark Theme]
+    </button>
+    <button data-cal-namespace="routingFormHeadlessRouter"
+      data-cal-link="router?form=948ae412-d995-4865-875a-48302588de03&Test field=event-routing"
+      data-cal-config='{"flag.coep": "true"}'>
+      Book through Headless Router
+    </button>
+    <h2>Popup Examples - Child Element Target Tests</h2>
+    <a style="display: block;" data-cal-namespace="childElementTarget" href="javascript:void(0)"
+      data-cal-link="free/30min" data-cal-config='{"flag.coep": "true"}'>
+      I am Anchor
+      <b>[I am Bold inside anchor]</b>
+      <span>
+        I am span inside anchor
+      </span>
+    </a>
+
 
-        <h2>Popup Examples - Theme Tests</h2>
-        <button data-cal-namespace="e2ePopupLightTheme" data-cal-link="free" data-cal-config='{"theme":"light", "flag.coep": "true"}'>Book an event with Free[Light Theme]</button>
-        <button data-cal-namespace="popupAutoTheme" data-cal-link="free" data-cal-config='{"flag.coep": "true"}'>
-          Book with Free User[Auto Theme]
-        </button>
-        <button data-cal-namespace="popupDarkTheme" data-cal-config='{"theme":"dark", "flag.coep": "true"}' data-cal-link="free">
-          Book with Free User[Dark Theme]
-        </button>
-        <button
-          data-cal-namespace="popupTeamLinkLightTheme"
-          data-cal-config='{"theme":"light", "flag.coep": "true"}'
-          data-cal-link="team/seeded-team/collective-seeded-team-event">
-          Book with Test Team[Light Theme]
-        </button>
-        <button
-          data-cal-namespace="popupTeamLinkDarkTheme"
-          data-cal-config='{"theme":"dark", "flag.coep": "true"}'
-          data-cal-link="team/seeded-team/collective-seeded-team-event">
-          Book with Test Team[Dark Theme]
-        </button>
-        <button data-cal-namespace="popupTeamLinksList" data-cal-link="team/seeded-team/" data-cal-config='{"flag.coep": "true"}'>
-          See Team Links [Auto Theme]
-        </button>
-        <button data-cal-namespace="popupPaidEvent" data-cal-link="pro/paid" data-cal-config='{"flag.coep": "true"}'>
-          Book Paid Event [Auto Theme]
-        </button>
-        <h2>Popup Examples - Reschedule Tests</h2>
-        <script>
-          document.write(
-            `<button data-cal-namespace="popupRescheduleWithReschedulePath" data-cal-config='{"flag.coep":"true"}' data-cal-link="reschedule/${popupRescheduleUid}">Reschedule Event(with /reschedule) - Needs popupRescheduleUid param</button>`
-          );
-        </script>
-        <script>
-          document.write(
-      `<button data-cal-namespace="popupRescheduleWithRescheduleUidParam" data-cal-config='{"flag.coep":"true", "rescheduleUid": "${popupRescheduleUid}"}' data-cal-link="${calLink}">Reschedule Event(with rescheduleUid param) - Needs popupRescheduleUid and calLink param</button>`
-          );
-        </script>
-        <h2>Popup Examples - Cancel Tests</h2>
-        <script>
-          document.write(
-            `<button data-cal-namespace="popupCancelBooking" data-cal-config='{"flag.coep":"true"}' data-cal-link="booking/${popupCancelUid}?cancel=true">Cancel Booking - Needs popupCancelUid param</button>`
-          );
-        </script>
-        <h2>Popup Examples - Different Configurations</h2>
-        <button data-cal-namespace="popupHideEventTypeDetails" data-cal-link="free/30min" data-cal-config='{"flag.coep": "true"}'>
-          Book Free Event [Auto Theme][uiConfig.hideEventTypeDetails=true]
-        </button>
-        <button data-cal-namespace="popupPaidEvent" data-cal-config='{"layout":"week_view", "flag.coep": "true"}' data-cal-link="pro/paid">
-          Book Paid Event - weekly view
-        </button>
-        <button data-cal-namespace="popupPaidEvent" data-cal-config='{"layout":"column_view", "flag.coep": "true"}' data-cal-link="pro/paid">
-          Book Paid Event - column view
-        </button>
-        <h2>Popup Examples - Routing Form Tests</h2>
-        <button data-cal-namespace="routingFormAuto" data-cal-link="forms/948ae412-d995-4865-875a-48302588de03" data-cal-config='{"flag.coep": "true"}'>
-          Book through Routing Form [Auto Theme] - Test for 'routed' event
-        </button>
-        <button
-          data-cal-namespace="routingFormDark"
-          data-cal-config='{"theme":"dark", "flag.coep": "true"}'
-          data-cal-link="forms/948ae412-d995-4865-875a-48302588de03">
-          Book through Routing Form [Dark Theme]
-        </button>
-        <button data-cal-namespace="routingFormHeadlessRouter" data-cal-link="router?form=948ae412-d995-4865-875a-48302588de03&Test field=event-routing" data-cal-config='{"flag.coep": "true"}'>
-          Book through Headless Router
-        </button>
-        <h2>Popup Examples - Child Element Target Tests</h2>
-        <a style="display: block;" data-cal-namespace="childElementTarget" href="javascript:void(0)" data-cal-link="free/30min" data-cal-config='{"flag.coep": "true"}'>
-          I am Anchor
-          <b>[I am Bold inside anchor]</b>
-          <span>
-            I am span inside anchor
-          </span>
-        </a>
-      
-      </div>
-    
     <h2>Inline Embed Examples</h2>
     <div id="namespaces-test">
       <div class="inline-embed-container" id="cal-booking-place-default">
         <h3>
-          <a href="?only=ns:default">[Dark Theme][Guests(janedoe@example.com and test@example.com)](Default Namespace)</a>
+          <a href="?only=ns:default">[Dark Theme][Guests(janedoe@example.com and test@example.com)](Default
+            Namespace)</a>
         </h3>
         <button onclick="Cal('ui',{theme:'light'})">Toggle to Light</button>
         <button onclick="Cal('ui',{layout:'week_view'})">Toggle to Week View</button>
@@ -357,34 +362,36 @@
             If you render booking embed in me, I won't restrict you. The entire page is yours. Content is by
             default aligned center
           </div>
+          <button onclick="heavilyCustomizeUi({ namespace: 'second' })">
+            Heavily customize UI
+          </button>
           <button
             onclick="(function () {Cal.ns.second('ui', {cssVarsPerTheme:{light:{'cal-border-booker':'green', 'cal-border-booker-width':'20px'},dark:{'cal-border-booker':'red', 'cal-border-booker-width':'5px'}}})})()">
             Change booker border for dark and light themes
           </button>
+          <button onclick="fakeErrorScenario({ namespace: 'second' })">
+            Create error scenario
+          </button>
           <button
-          onclick="(function () {Cal.ns.second('ui', {cssVarsPerTheme:{light:{'cal-brand':'green'},dark:{'cal-brand':'red'}}})})()">
-          Change Brand color for dark and light theme
-        </button>
+            onclick="(function () {Cal.ns.second('ui', {cssVarsPerTheme:{light:{'cal-brand':'green'},dark:{'cal-brand':'red'}}})})()">
+            Change Brand color for dark and light theme
+          </button>
           <button
             onclick="(function () {Cal.ns.second('ui', {styles:{eventTypeListItem:{backgroundColor:'blue'}}})})()">
             Change <code>eventTypeListItem</code> bg color[Deprecated]
           </button>
-          <button onclick="(function () {Cal.ns.second('ui', {styles:{body:{background:'red'}}})})()">
-            Change <code>body</code> bg color[Deprecated]
-          </button>
           <button onclick="(function () {Cal.ns.second('ui', {styles:{align:'left'}})})()">
             Align left[Deprecated]
           </button>
           <button onclick="(function () {Cal.ns.second('ui', {styles:{align:'center'}})})()">
             Align Center[Deprecated]
           </button>
-          <button
-            onclick="(function () {Cal.ns.second('ui', {styles:{enabledDateButton: {
-            backgroundColor: window.generateRandomHexColor(),
-          },
-          disabledDateButton: {
-            backgroundColor: window.generateRandomHexColor(),
-          },}})})()">
+          <button onclick="(function () {Cal.ns.second('ui', {styles:{enabledDateButton: {
+              backgroundColor: window.generateRandomHexColor(),
+            },
+            disabledDateButton: {
+              backgroundColor: window.generateRandomHexColor(),
+            },}})})()">
             Change 'enabledDateButton` and `disabledDateButton` background Color[Deprecated]
           </button>
         </div>
@@ -429,20 +436,27 @@
       <div class="place"></div>
     </div>
 
-    <div class="inline-embed-container" style="width: 500px; overflow-y: scroll;" id="cal-booking-place-windowScrollToTimeslot">
-      <h3><a href="?only=ns:windowScrollToTimeslot">Scroll to Timeslot Test - Selecting a date would scroll the window to the timeslot</a></h3>
+    <div class="inline-embed-container" style="width: 500px; overflow-y: scroll;"
+      id="cal-booking-place-windowScrollToTimeslot">
+      <h3><a href="?only=ns:windowScrollToTimeslot">Scroll to Timeslot Test - Selecting a date would scroll the window
+          to
+          the timeslot</a></h3>
       <div class="place"></div>
     </div>
-    <div class="inline-embed-container" style="height: 500px; width: 500px; overflow-y: scroll;" id="cal-booking-place-containerScrollToTimeslot">
-      <h3><a href="?only=ns:containerScrollToTimeslot">Container Scroll Test - Selecting a date would scroll the element to the timeslot</a></h3>
+    <div class="inline-embed-container" style="height: 500px; width: 500px; overflow-y: scroll;"
+      id="cal-booking-place-containerScrollToTimeslot">
+      <h3><a href="?only=ns:containerScrollToTimeslot">Container Scroll Test - Selecting a date would scroll the element
+          to the timeslot</a></h3>
       <div class="place"></div>
     </div>
     <div class="inline-embed-container" id="cal-booking-place-conflicting-theme">
-      <h3><a href="?only=conflicting-theme">You would be able to test out conflicting themes for the same namespace here.</a></h3>
+      <h3><a href="?only=conflicting-theme">You would be able to test out conflicting themes for the same namespace
+          here.</a></h3>
       <div class="light"></div>
       <div class="dark"></div>
-      <i>Note that one of the embeds would stay in loading state as they are using the same namespace and it is not supported to have more than 1 embeds using same namespace</i>
-      </div>
+      <i>Note that one of the embeds would stay in loading state as they are using the same namespace and it is not
+        supported to have more than 1 embeds using same namespace</i>
+    </div>
     <div class="inline-embed-container" id="cal-booking-place-monthView">
       <h3><a href="?only=ns:monthView">Test Month View</a></h3>
       <div class="place" style="width: 100%"></div>
@@ -469,28 +483,32 @@
       <div class="place" style="width: 100%"></div>
     </div>
   </div>
-    <div id="cal-booking-place-skeletonDemo">
-      <h3><a href="?only=ns:skeletonDemo">Skeleton Loader INLINE Demo</a></h3>
-      <div class="inline-embed-container">
-        <div id="cal-booking-place-skeletonDemo">
-          <div class="place"></div>
-        </div>
+
+  <div id="cal-booking-place-skeletonDemo">
+    <h3><a href="?only=ns:skeletonDemo">Skeleton Loader INLINE Demo</a></h3>
+    <div class="inline-embed-container">
+      <div id="cal-booking-place-skeletonDemo">
+        <div class="place"></div>
       </div>
     </div>
-    <div id="cal-booking-place-skeletonDemoElementClick">
-      <a href="?only=ns:skeletonDemoElementClick">Skeleton Loader MODAL Demo</a>
-      <h3><button data-cal-namespace="skeletonDemoElementClick" data-cal-link="team/seeded-team/collective-seeded-team-event" data-cal-config='{"cal.embed.pageType":"team.event.booking.slots"}'>Skeleton Loader MODAL Demo</button></h3>
-      <div class="inline-embed-container">
-        <div id="cal-booking-place-skeletonDemoElementClick">
-          <div class="place"></div>
-        </div>
+  </div>
+  <div id="cal-booking-place-skeletonDemoElementClick">
+    <a href="?only=ns:skeletonDemoElementClick">Skeleton Loader MODAL Demo</a>
+    <h3><button data-cal-namespace="skeletonDemoElementClick"
+        data-cal-link="team/seeded-team/collective-seeded-team-event"
+        data-cal-config='{"cal.embed.pageType":"team.event.booking.slots"}'>Skeleton Loader MODAL Demo</button></h3>
+    <div class="inline-embed-container">
+      <div id="cal-booking-place-skeletonDemoElementClick">
+        <div class="place"></div>
       </div>
     </div>
-    <script type="module" src="./playground/lib/playground.ts"></script>
-    <script>
-      if (initialNamespace.startsWith("skeletonDemo")) {
-        document.getElementById("misc-embeds").style.display = "none";
-      }
-    </script>
-  </body>
-</html>
+  </div>
+  <script type="module" src="./playground/lib/playground.ts"></script>
+  <script>
+    if (initialNamespace.startsWith("skeletonDemo")) {
+      document.getElementById("misc-embeds").style.display = "none";
+    }
+  </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/packages/embeds/embed-core/package.json b/packages/embeds/embed-core/package.json
index 4daed851ee..756f2e0114 100644
--- a/packages/embeds/embed-core/package.json
+++ b/packages/embeds/embed-core/package.json
@@ -18,7 +18,7 @@
     "build": "rm -rf dist && NEXT_PUBLIC_EMBED_FINGER_PRINT=$(git rev-parse --short HEAD) NEXT_PUBLIC_EMBED_VERSION=$(node -p 'require(\"./package.json\").version') yarn __build",
     "build-preview": "PREVIEW_BUILD=1 yarn __build ",
     "vite": "vite",
-    "tailwind": "yarn tailwindcss -i ./src/styles.css -o ./src/tailwind.generated.css",
+    "tailwind": "tailwindcss --input ./src/styles.css --output ./src/tailwind.generated.css",
     "buildWatchAndServer": "run-p '__dev' 'vite --port 3100 --strict-port --host --open'",
     "buildWatchAndServer-https": "run-p '__dev' 'vite --port 3100 --strict-port --host --open --https'",
     "dev": "yarn tailwind && run-p 'tailwind --watch' 'buildWatchAndServer'",
@@ -40,20 +40,15 @@
   "files": [
     "dist"
   ],
-  "postcss": {
-    "map": false,
-    "plugins": {
-      "tailwindcss": {},
-      "autoprefixer": {}
-    }
-  },
   "devDependencies": {
     "@playwright/test": "^1.45.3",
+    "@tailwindcss/cli": "^4.0.0",
+    "@tailwindcss/postcss": "^4.0.0",
     "@vitejs/plugin-basic-ssl": "^1.1.0",
     "autoprefixer": "^10.4.12",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.18",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "^4",
     "typescript": "^5.9.0-beta",
     "vite": "^4.1.2",
     "vite-plugin-environment": "^1.1.3"
diff --git a/packages/embeds/embed-core/playground/lib/playground.ts b/packages/embeds/embed-core/playground/lib/playground.ts
index 93daeb5c6e..720dd1ed2f 100644
--- a/packages/embeds/embed-core/playground/lib/playground.ts
+++ b/packages/embeds/embed-core/playground/lib/playground.ts
@@ -46,6 +46,63 @@ if (themeInParam && !theme) {
 
 const calLink = searchParams.get("cal-link");
 
+function fakeEvent({
+  namespace,
+  eventType,
+  data
+}) {
+  window.postMessage({
+    fullType: `CAL:${namespace}:${eventType}`,
+    namespace,
+    originator: "CAL",
+    type: eventType,
+    data,
+  })
+}
+
+window.heavilyCustomizeUi = function ({ namespace }) {
+  Cal.ns[namespace]("ui", {
+    theme: "light",
+    cssVarsPerTheme: {
+      light: {
+        "cal-brand": "#6F61C0",
+        "cal-text": "#6F61C0",
+        "cal-text-emphasis": "#4D408D",
+        "cal-border-emphasis": "#4D408D",
+        "cal-text-error": "pink",
+        "cal-border": "#A090E0",
+        "cal-border-default": "#A090E0",
+        "cal-border-subtle": "#A090E0",
+        "cal-border-booker": "red",
+        "cal-text-muted": "#C0B8FF",
+        "cal-bg-emphasis": "#E1DFFF",
+        "cal-border-booker-width": "3px",
+        "cal-radius": "1px",
+        "cal-radius-md": "2px",
+        "cal-radius-lg": "3px",
+        "cal-radius-xl": "4px",
+        "cal-radius-2xl": "5px",
+        "cal-radius-3xl": "6px",
+        "cal-radius-full": "7px",
+        "cal-spacing-px": "5px",
+        // More CSS variables are defined here
+        // https://github.com/calcom/cal.com/blob/main/packages/config/tailwind-preset.js
+      },
+      dark: {
+        // Set the similar variables as in light theme but for dark mode.
+      },
+    },
+  });
+};
+
+window.fakeErrorScenario = function ({ namespace }) {
+  fakeEvent({
+    namespace,
+    eventType: "linkFailed",
+    data: { code: 500 }
+  });
+};
+
 if (only === "all" || only === "ns:default") {
   Cal("init", {
     debug: true,
diff --git a/packages/embeds/embed-core/postcss.config.mjs b/packages/embeds/embed-core/postcss.config.mjs
new file mode 100644
index 0000000000..60f073f4f0
--- /dev/null
+++ b/packages/embeds/embed-core/postcss.config.mjs
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  }
+}
+
diff --git a/packages/embeds/embed-core/routing-playground.html b/packages/embeds/embed-core/routing-playground.html
index e1e97a6006..9b7de5b483 100644
--- a/packages/embeds/embed-core/routing-playground.html
+++ b/packages/embeds/embed-core/routing-playground.html
@@ -90,7 +90,7 @@
     }
 
     * {
-      --cal-brand-color: gray;
+      --cal-brand: gray;
     }
   </style>
 </head>
diff --git a/packages/embeds/embed-core/src/EmbedElement.test.ts b/packages/embeds/embed-core/src/EmbedElement.test.ts
index 1c2760b878..d41f15eacc 100644
--- a/packages/embeds/embed-core/src/EmbedElement.test.ts
+++ b/packages/embeds/embed-core/src/EmbedElement.test.ts
@@ -78,6 +78,7 @@ function createTestEmbedElement(data: {
   element.innerHTML = inlineHTML({
     layout: dataset?.layout,
     pageType: dataset?.pageType as EmbedPageType | null,
+    externalThemeClass: dataset?.theme === "dark" ? EMBED_DARK_THEME_CLASS : EMBED_LIGHT_THEME_CLASS,
   });
 
   document.body.appendChild(element);
@@ -132,7 +133,6 @@ function mockGetComputedStyle() {
 
 describe("EmbedElement", () => {
   let element: EmbedElement;
-  let mockGetSkeletonData: Mock;
 
   beforeEach(() => {
     // Register the custom element
diff --git a/packages/embeds/embed-core/src/EmbedElement.ts b/packages/embeds/embed-core/src/EmbedElement.ts
index f5463037c8..e84f625038 100644
--- a/packages/embeds/embed-core/src/EmbedElement.ts
+++ b/packages/embeds/embed-core/src/EmbedElement.ts
@@ -8,7 +8,7 @@ import {
   addDarkColorSchemeChangeListener,
   getMaxHeightForModal,
 } from "./ui-utils";
-
+import type { ExternalThemeClass } from "./ui/themeClass";
 type ShadowRootWithStyle = ShadowRoot & {
   host: HTMLElement & { style: CSSStyleDeclaration };
 };
@@ -19,7 +19,7 @@ export class EmbedElement extends HTMLElement {
   public isModal!: boolean;
   public skeletonContainerHeightTimer: number | null = null;
   // Theme Class is derived from `this.theme` as well as system color scheme preference
-  public themeClass!: string;
+  public themeClass!: ExternalThemeClass;
   public layout!: AllPossibleLayouts;
   public getSkeletonData!: (_args: { layout: AllPossibleLayouts; pageType: EmbedPageType | null }) => {
     skeletonContent: string;
diff --git a/packages/embeds/embed-core/src/FloatingButton/FloatingButtonHtml.ts b/packages/embeds/embed-core/src/FloatingButton/FloatingButtonHtml.ts
index 0d794cc6d8..e13a7135ae 100644
--- a/packages/embeds/embed-core/src/FloatingButton/FloatingButtonHtml.ts
+++ b/packages/embeds/embed-core/src/FloatingButton/FloatingButtonHtml.ts
@@ -11,7 +11,7 @@ const getHtml = ({
 }) => {
   // IT IS A REQUIREMENT THAT ALL POSSIBLE CLASSES ARE HERE OTHERWISE TAILWIND WONT GENERATE THE CSS FOR CONDITIONAL CLASSES
   // To not let all these classes apply and visible, keep it hidden initially
-  return `<button class="z-[999999999999] hidden fixed md:bottom-6 bottom-4 md:right-10 right-4 md:left-10 left-4 ${buttonClasses.join(
+  return `<button class="z-999999999999 hidden fixed md:bottom-6 bottom-4 md:right-10 right-4 md:left-10 left-4 ${buttonClasses.join(
     " "
   )} flex h-16 origin-center bg-red-50 transform cursor-pointer items-center
 rounded-full py-4 px-6 text-base outline-none drop-shadow-md transition focus:outline-none fo
diff --git a/packages/embeds/embed-core/src/Inline/inline.ts b/packages/embeds/embed-core/src/Inline/inline.ts
index aef52ef5b4..91ad4196f8 100644
--- a/packages/embeds/embed-core/src/Inline/inline.ts
+++ b/packages/embeds/embed-core/src/Inline/inline.ts
@@ -2,7 +2,6 @@ import { EmbedElement } from "../EmbedElement";
 import { getErrorString } from "../lib/utils";
 import loaderCss from "../loader.css?inline";
 import inlineHtml, { getSkeletonData } from "./inlineHtml";
-
 export class Inline extends EmbedElement {
   static get observedAttributes() {
     return ["loading"];
@@ -38,6 +37,7 @@ export class Inline extends EmbedElement {
     this.shadowRoot.innerHTML = `<style>${window.Cal.__css}</style><style>${loaderCss}</style>${inlineHtml({
       layout: this.layout,
       pageType: this.getPageType() ?? null,
+      externalThemeClass: this.themeClass
     })}`;
   }
 }
diff --git a/packages/embeds/embed-core/src/Inline/inlineHtml.ts b/packages/embeds/embed-core/src/Inline/inlineHtml.ts
index 453f457a37..ebd447d924 100644
--- a/packages/embeds/embed-core/src/Inline/inlineHtml.ts
+++ b/packages/embeds/embed-core/src/Inline/inlineHtml.ts
@@ -1,20 +1,23 @@
 import type { AllPossibleLayouts, EmbedPageType } from "../types";
 import { generateSkeleton } from "../ui/skeleton";
-
+import { type ExternalThemeClass, getInternalThemeClass } from "../ui/themeClass";
 const html = ({
   layout = "month_view",
   pageType,
+  externalThemeClass,
 }: {
   layout?: AllPossibleLayouts;
   pageType: EmbedPageType | null;
+  externalThemeClass: ExternalThemeClass;
 }) => {
   const { skeletonContent, skeletonContainerStyle, skeletonStyle } = getSkeletonData({
     layout,
     pageType,
   });
 
+  const themeClass = getInternalThemeClass(externalThemeClass);
   return `
-<div id="skeleton-container" style="${skeletonContainerStyle}">
+<div id="skeleton-container" style="${skeletonContainerStyle}" ${themeClass ? `class="${themeClass}"` : ""}>
   <div id="skeleton" style="${skeletonStyle}" class="absolute z-highest">
     ${skeletonContent}
   </div>
diff --git a/packages/embeds/embed-core/src/ModalBox/ModalBox.ts b/packages/embeds/embed-core/src/ModalBox/ModalBox.ts
index 901cd22541..abb607c390 100644
--- a/packages/embeds/embed-core/src/ModalBox/ModalBox.ts
+++ b/packages/embeds/embed-core/src/ModalBox/ModalBox.ts
@@ -175,9 +175,9 @@ export class ModalBox extends EmbedElement {
     const message = this.dataset.message;
     const errorMessage = this.dataset.errorCode
       ? getErrorString({
-          errorCode: this.dataset.errorCode,
-          errorMessage: message,
-        })
+        errorCode: this.dataset.errorCode,
+        errorMessage: message,
+      })
       : null;
     const messageToShow = errorMessage || message;
     if (messageToShow) {
@@ -250,6 +250,7 @@ export class ModalBox extends EmbedElement {
     const modalHtml = `<style>${window.Cal.__css}</style><style>${loaderCss}</style>${modalBoxHtml({
       layout: this.getLayout(),
       pageType: this.getPageType() ?? null,
+      externalThemeClass: this.themeClass
     })}`;
     this.attachShadow({ mode: "open" });
     ModalBox.htmlOverflow = document.body.style.overflow;
diff --git a/packages/embeds/embed-core/src/ModalBox/ModalBoxHtml.ts b/packages/embeds/embed-core/src/ModalBox/ModalBoxHtml.ts
index a7f283ceb9..5f49710e5d 100644
--- a/packages/embeds/embed-core/src/ModalBox/ModalBoxHtml.ts
+++ b/packages/embeds/embed-core/src/ModalBox/ModalBoxHtml.ts
@@ -1,5 +1,6 @@
 import type { AllPossibleLayouts, EmbedPageType } from "../types";
 import { generateSkeleton } from "../ui/skeleton";
+import { type ExternalThemeClass, getInternalThemeClass } from "../ui/themeClass";
 
 function getStyle() {
   return `
@@ -56,7 +57,7 @@ function getStyle() {
     }
     /*Modal background is black only, so hardcode white */
     .loader {
-      --cal-brand-color:white;
+      --cal-brand:white;
     }
   </style>
       `;
@@ -65,15 +66,19 @@ function getStyle() {
 const html = ({
   layout = "month_view",
   pageType,
+  externalThemeClass,
 }: {
   layout?: AllPossibleLayouts;
   pageType: EmbedPageType | null;
+  externalThemeClass: ExternalThemeClass;
 }) => {
   const { skeletonContent, skeletonContainerStyle, skeletonStyle } = getSkeletonData({
     layout,
     pageType,
   });
 
+  const themeClass = getInternalThemeClass(externalThemeClass);
+
   // Keep message-container outside modal-box as that restricts the content to be shown through its overflow:auto unnecessarily
   return `
 ${getStyle()}
@@ -81,12 +86,12 @@ ${getStyle()}
   <div class="header">
     <button type="button" class="close" aria-label="Close">&times;</button>
   </div>
-  <div id="message-container" style="left: 50%; top: 50%; transform: translate(-50%, -50%);" class="message-container flex items-center p-24 justify-center dark:bg-muted rounded-md border-subtle border bg-default text-default  absolute z-highest">
+  <div id="message-container" style="left: 50%; top: 50%; transform: translate(-50%, -50%);" class="message-container flex items-center p-24 justify-center dark:bg-cal-muted rounded-md border-subtle border bg-default text-default  absolute z-highest">
     <div id="message"></div>
   </div>
   <div class="modal-box">
-    <div class="body" id="skeleton-container" style="${skeletonContainerStyle}">
-      <div id="wrapper" class="z-[999999999999] absolute flex w-full items-center">
+    <div class="body${themeClass ? " " + themeClass : ""}" id="skeleton-container" style="${skeletonContainerStyle}">
+      <div id="wrapper" class="z-999999999999 absolute flex w-full items-center">
         <div class="loader modal-loader border-brand-default dark:border-darkmodebrand">
           <span class="loader-inner bg-brand dark:bg-darkmodebrand"></span>
         </div>
diff --git a/packages/embeds/embed-core/src/addAppCssVars.ts b/packages/embeds/embed-core/src/addAppCssVars.ts
deleted file mode 100644
index 3259a77b76..0000000000
--- a/packages/embeds/embed-core/src/addAppCssVars.ts
+++ /dev/null
@@ -1,260 +0,0 @@
-import { EMBED_DARK_THEME_CLASS } from "./constants";
-
-export const addAppCssVars = () => {
-  const calElements = ["cal-floating-button", "cal-modal-box", "cal-inline"];
-  try {
-    const cssVarsStyle = `
-    ${calElements.join(",")} {
-    /* Spacing Scale */
-    --cal-spacing-0: 0px;
-    --cal-spacing-px: 1px;
-    --cal-spacing-0_5: 0.125rem; /* 2px */
-    --cal-spacing-1: 0.25rem;   /* 4px */
-    --cal-spacing-1_5: 0.375rem; /* 6px */
-    --cal-spacing-2: 0.5rem;    /* 8px */
-    --cal-spacing-2_5: 0.625rem; /* 10px */
-    --cal-spacing-3: 0.75rem;   /* 12px */
-    --cal-spacing-3_5: 0.875rem; /* 14px */
-    --cal-spacing-4: 1rem;      /* 16px */
-    --cal-spacing-5: 1.25rem;   /* 20px */
-    --cal-spacing-6: 1.5rem;    /* 24px */
-    --cal-spacing-7: 1.75rem;   /* 28px */
-    --cal-spacing-8: 2rem;      /* 32px */
-    --cal-spacing-9: 2.25rem;   /* 36px */
-    --cal-spacing-10: 2.5rem;   /* 40px */
-    --cal-spacing-11: 2.75rem;  /* 44px */
-    --cal-spacing-12: 3rem;     /* 48px */
-    --cal-spacing-14: 3.5rem;   /* 56px */
-    --cal-spacing-16: 4rem;     /* 64px */
-    --cal-spacing-20: 5rem;     /* 80px */
-    --cal-spacing-24: 6rem;     /* 96px */
-    --cal-spacing-28: 7rem;     /* 112px */
-    --cal-spacing-32: 8rem;     /* 128px */
-    --cal-spacing-36: 9rem;     /* 144px */
-    --cal-spacing-40: 10rem;    /* 160px */
-    --cal-spacing-44: 11rem;    /* 176px */
-    --cal-spacing-48: 12rem;    /* 192px */
-    --cal-spacing-52: 13rem;    /* 208px */
-    --cal-spacing-56: 14rem;    /* 224px */
-    --cal-spacing-60: 15rem;    /* 240px */
-    --cal-spacing-64: 16rem;    /* 256px */
-    --cal-spacing-72: 18rem;    /* 288px */
-    --cal-spacing-80: 20rem;    /* 320px */
-    --cal-spacing-96: 24rem;    /* 384px */
-  
-    /* Border Radius */
-    --cal-radius-none: 0px;
-    --cal-radius-sm: 0.125rem;  /* 2px */
-    --cal-radius: 0.25rem;      /* 4px */
-    --cal-radius-md: 0.375rem;  /* 6px */
-    --cal-radius-lg: 0.5rem;    /* 8px */
-    --cal-radius-xl: 0.75rem;   /* 12px */
-    --cal-radius-2xl: 1rem;     /* 16px */
-    --cal-radius-3xl: 1.5rem;   /* 24px */
-    --cal-radius-full: 9999px;
-  
-    /* Background Standard */
-    --cal-bg-emphasis: hsla(220, 13%, 91%, 1); /* gray.200 - active items and emphasising */
-    --cal-bg: hsla(0, 0%, 100%, 1); /* white - default background */
-    --cal-bg-subtle: hsla(220, 14%, 94%, 1); /* gray.100 - hovering on items, subtle raising */
-    --cal-bg-muted: hsla(210, 20%, 97%, 1); /* gray.50 - large items, sidebar, sections */
-    --cal-bg-inverted: hsla(210, 30%, 4%, 1); /* gray.900 - tooltips */
-  
-    /* Background Primary */
-    --cal-bg-primary: hsla(214, 30%, 16%, 1); /* stone-100 */
-    --cal-bg-primary-emphasis: hsla(220, 6%, 25%, 1); /* stone-800 */
-    --cal-bg-primary-muted: hsla(220, 14%, 94%, 1); /* stone-400 */
-  
-    /* Background Brand */
-    --cal-bg-brand: hsla(214, 30%, 16%, 1); /* gray-50 */
-    --cal-bg-brand-emphasis: hsla(220, 6%, 25%, 1); /* stone-100 */
-    --cal-bg-brand-muted: hsla(220, 14%, 94%, 1); /* stone-100 */
-    
-    /* Background Semantic */
-    --cal-bg-semantic-info-subtle: hsla(212, 88%, 97%, 1); /* blue-100 */
-    --cal-bg-semantic-info-emphasis: hsla(236, 80%, 25%, 1); /* blue-500 */
-    --cal-bg-semantic-success-subtle: hsla(167, 54%, 93%, 1); /* green-100 */
-    --cal-bg-semantic-success-emphasis: hsla(158, 74%, 38%, 1); /* green-500 */
-    --cal-bg-semantic-attention-subtle: hsla(34, 100%, 92%, 1); /* orange-100 */
-    --cal-bg-semantic-attention-emphasis: hsla(15, 79%, 34%, 1); /* orange-500 */
-    --cal-bg-semantic-error-subtle: hsla(0, 93%, 94%, 1); /* red-100 */
-    --cal-bg-semantic-error-emphasis: hsla(0, 63%, 24%, 1); /* red-500 */
-  
-    /* Background Visualization */
-    --cal-bg-visualization-1-subtle: hsla(326, 78%, 95%, 1); /* pink-100 */
-    --cal-bg-visualization-1-emphasis: hsla(330, 81%, 60%, 1); /* pink-500 */
-    --cal-bg-visualization-2-subtle: hsla(256, 86%, 91%, 1); /* purple-100 */
-    --cal-bg-visualization-2-emphasis: hsla(256, 85%, 57%, 1); /* purple-500 */
-    --cal-bg-visualization-3-subtle: hsla(217, 87%, 91%, 1); /* blue-100 */
-    --cal-bg-visualization-3-emphasis: hsla(235, 100%, 63%, 1); /* blue-500 */
-    --cal-bg-visualization-4-subtle: hsla(167, 54%, 93%, 1); /* green-100 */
-    --cal-bg-visualization-4-emphasis: hsla(158, 74%, 38%, 1); /* green-500 */
-    --cal-bg-visualization-5-subtle: hsla(55, 97%, 88%, 1); /* yellow-100 */
-    --cal-bg-visualization-5-emphasis: hsla(45, 93%, 47%, 1); /* yellow-500 */
-    --cal-bg-visualization-6-subtle: hsla(34, 100%, 92%, 1); /* orange-100 */
-    --cal-bg-visualization-6-emphasis: hsla(25, 95%, 53%, 1); /* orange-500 */
-    --cal-bg-visualization-7-subtle: hsla(0, 96%, 89%, 1); /* red-100 */
-    --cal-bg-visualization-7-emphasis: hsla(0, 84%, 60%, 1); /* red-500 */
-  
-    /* Legacy Background Components - Consider deprecating */
-    --cal-bg-info: hsla(221, 91%, 93%, 1); /* #dee9fc - info backgrounds */
-    --cal-bg-success: hsla(142, 76%, 94%, 1); /* #e2fbe8 - success backgrounds */
-    --cal-bg-attention: hsla(33, 100%, 92%, 1); /* #fceed8 - attention backgrounds */
-    --cal-bg-error: hsla(3, 66%, 93%, 1); /* #f9e3e2 - error backgrounds */
-    --cal-bg-dark-error: hsla(2, 55%, 30%, 1); /* Keeping existing dark error */
-  
-    /* Borders */
-    --cal-border-emphasis: hsla(218, 11%, 65%, 1); /* gray.400 - input:hover */
-    --cal-border: hsla(216, 12%, 84%, 1); /* gray.300 - inputs */
-    --cal-border-subtle: hsla(220, 13%, 91%, 1); /* gray.200 - container borders */
-    --cal-border-muted: hsla(220, 14%, 94%, 1); /* gray.100 */
-    --cal-border-error: hsla(0, 96%, 89%, 1); /* Keeping existing error border */
-    --cal-border-semantic-error: hsla(0, 96%, 89%, 1);
-    --cal-border-booker: var(--cal-border-subtle);
-  
-    /* Content/Text Standard */
-    --cal-text-emphasis: hsla(210, 30%, 4%, 1); /* gray-900 */
-    --cal-text: hsla(220, 6%, 25%, 1); /* gray-700 */
-    --cal-text-subtle: hsla(220, 9%, 46%, 1); /* gray-500 */
-    --cal-text-muted: hsla(218, 11%, 65%, 1); /* gray-400 */
-    --cal-text-inverted: hsla(0, 0%, 100%, 1); /* white */
-  
-    /* Content/Text Semantic */
-    --cal-text-semantic-info: hsla(236, 80%, 25%, 1); /* blue-800 */
-    --cal-text-semantic-success: hsla(150, 84%, 22%, 1); /* green-800 */
-    --cal-text-semantic-attention: hsla(15, 79%, 34%, 1); /* orange-800 */
-    --cal-text-semantic-error: hsla(0, 63%, 24%, 1); /* red-800 */
-  
-    /* Content/Text Visualization */
-    --cal-text-visualization-1: hsla(332, 79%, 25%, 1); /* pink-800 */
-    --cal-text-visualization-2: hsla(270, 91%, 25%, 1); /* purple-800 */
-    --cal-text-visualization-3: hsla(217, 91%, 25%, 1); /* blue-800 */
-    --cal-text-visualization-4: hsla(142, 71%, 25%, 1); /* green-800 */
-    --cal-text-visualization-5: hsla(45, 93%, 25%, 1); /* yellow-800 */
-    --cal-text-visualization-6: hsla(24, 95%, 25%, 1); /* orange-800 */
-    --cal-text-visualization-7: hsla(0, 84%, 25%, 1); /* red-800 */
-  
-    /* Border/Semantic Subtle */
-    --cal-border-semantic-attention-subtle: hsla(32, 98%, 83%, 1); 
-    --cal-border-semantic-error-subtle: hsla(0, 96%, 89%, 1); 
-  
-    /* Legacy Content/Text Components - Consider deprecating */
-    --cal-text-info: hsla(225, 57%, 33%, 1); /* #253985 - interactive text/icons */
-    --cal-text-success: hsla(144, 34%, 24%, 1); /* #285231 */
-    --cal-text-attention: hsla(16, 62%, 28%, 1); /* Keeping existing attention text */
-    --cal-text-error: hsla(0, 63%, 31%, 1); /* Keeping existing error text */
-  
-    /* Brand */
-    --cal-brand: hsla(221, 39%, 11%, 1); /* Keeping existing brand color */
-    --cal-brand-emphasis: hsla(0, 0%, 6%, 1); /* Keeping existing brand emphasis */
-    --cal-brand-text: hsla(0, 0%, 100%, 1); /* white */
-  }
-  
-  ${calElements.map((element) => `${element}.${EMBED_DARK_THEME_CLASS}`).join(",")} {
-  /* Background Standard */
-  --cal-bg-emphasis: hsla(0, 0%, 25%, 1); /* stone-700 */
-  --cal-bg: hsla(0, 0%, 6%, 1); /* stone-950 */
-  --cal-bg-subtle: hsla(0, 0%, 15%, 1); /* stone-800 */
-  --cal-bg-muted: hsla(0, 0%, 9%, 1); /* stone-900 */
-  --cal-bg-inverted: hsla(0, 0%, 98%, 1); /* stone-50 */
-
-  /* Background Primary */
-  --cal-bg-primary: hsla(0, 0%, 96%, 1); /* stone-100 */
-  --cal-bg-primary-emphasis: hsla(0, 0%, 64%, 1); /* stone-800 */
-  --cal-bg-primary-muted: hsla(0, 0%, 15%, 1); /* stone-400 */
-
-  /* Background Brand */
-  --cal-bg-brand: hsla(0, 0%, 98%, 1); /* gray-50 */
-  --cal-bg-brand-emphasis: hsla(0, 0%, 96%, 1); /* stone-100 */
-  --cal-bg-brand-muted: hsla(0, 0%, 96%, 1); /* stone-100 */
-
-  /* Background Semantic */
-  --cal-bg-semantic-info-subtle: hsla(236, 80%, 8%, 1); /* blue-800 */
-  --cal-bg-semantic-info-emphasis: hsla(229, 90%, 74%, 1); /* blue-500 */
-  --cal-bg-semantic-success-subtle: hsla(148, 88%, 16%, 1); /* green-800 */
-  --cal-bg-semantic-success-emphasis: hsla(158, 74%, 38%, 1); /* green-500 */
-  --cal-bg-semantic-attention-subtle: hsla(21, 86%, 8%, 1); /* orange-800 */
-  --cal-bg-semantic-attention-emphasis: hsla(27, 96%, 61%, 1); /* orange-500 */
-  --cal-bg-semantic-error-subtle: hsla(0, 70%, 8%, 1); /* red-800 */
-  --cal-bg-semantic-error-emphasis: hsla(0, 91%, 71%, 1); /* red-500 */
-
-  /* Background Visualization */
-  --cal-bg-visualization-1-subtle: hsla(336, 74%, 35%, 1); /* pink-200 */
-  --cal-bg-visualization-1-emphasis: hsla(330, 81%, 60%, 1); /* pink-500 */
-  --cal-bg-visualization-2-subtle: hsla(252, 83%, 23%, 1); /* purple-200 */
-  --cal-bg-visualization-2-emphasis: hsla(256, 85%, 57%, 1); /* purple-500 */
-  --cal-bg-visualization-3-subtle: hsla(236, 74%, 35%, 1); /* blue-200 */
-  --cal-bg-visualization-3-emphasis: hsla(235, 100%, 63%, 1); /* blue-500 */
-  --cal-bg-visualization-4-subtle: hsla(150, 84%, 22%, 1); /* green-200 */
-  --cal-bg-visualization-4-emphasis: hsla(158, 74%, 38%, 1); /* green-500 */
-  --cal-bg-visualization-5-subtle: hsla(28, 73%, 26%, 1); /* yellow-200 */
-  --cal-bg-visualization-5-emphasis: hsla(45, 93%, 47%, 1); /* yellow-500 */
-  --cal-bg-visualization-6-subtle: hsla(15, 75%, 23%, 1); /* orange-200 */
-  --cal-bg-visualization-6-emphasis: hsla(25, 95%, 53%, 1); /* orange-500 */
-  --cal-bg-visualization-7-subtle: hsla(0, 70%, 35%, 1); /* red-200 */
-  --cal-bg-visualization-7-emphasis: hsla(0, 84%, 60%, 1); /* red-500 */
-
-  /* Legacy Background Components - Consider deprecating */
-  --cal-bg-info: hsla(228, 56%, 33%, 1); /* Keeping existing info background */
-  --cal-bg-success: hsla(133, 34%, 24%, 1); /* Keeping existing success background */
-  --cal-bg-attention: hsla(16, 62%, 28%, 1); /* Keeping existing attention background */
-  --cal-bg-error: hsla(2, 55%, 30%, 1); /* Keeping existing error background */
-  --cal-bg-dark-error: hsla(2, 55%, 30%, 1); /* Keeping existing dark error */
-
-  /* Border Standard */
-  --cal-border: hsla(0, 0%, 30%, 1); /* stone-600 */
-  --cal-border-muted: hsla(0, 0%, 9%, 1); /* stone-500 */
-  --cal-border-subtle: hsla(0, 0%, 15%, 1); /* stone-700 */
-  --cal-border-emphasis: hsla(0, 0%, 45%, 1); /* stone-800 */
-  --cal-border-booker: var(--cal-border-subtle);
-  /* Border Semantic */
-  --cal-border-semantic-error: hsla(0, 63%, 24%, 1); /* red-800 */
-
-  /* Border/Semantic Subtle */
-  --cal-border-semantic-attention-subtle: hsla(15, 75%, 23%, 1);
-  --cal-border-semantic-error-subtle: hsla(0, 63%, 24%, 1);
-
-  /* Legacy Border - Consider deprecating */
-  --cal-border-error: hsla(0, 63%, 24%, 1); /* Keeping existing error border */
-
-  /* Content/Text Standard */
-  --cal-text-emphasis: hsla(0, 0%, 98%, 1); /* stone-50 */
-  --cal-text: hsla(0, 0%, 83%, 1); /* stone-300 */
-  --cal-text-subtle: hsla(0, 0%, 64%, 1); /* stone-400 */
-  --cal-text-muted: hsla(0, 0%, 64%, 1); /* stone-400 */
-  --cal-text-inverted: hsla(0, 0%, 0%, 1); /* black */
-
-  /* Content/Text Semantic */
-  --cal-text-semantic-info: hsla(229, 90%, 74%, 1); /* blue-100 */
-  --cal-text-semantic-success: hsla(161, 49%, 54%, 1); /* green-100 */
-  --cal-text-semantic-attention: hsla(27, 96%, 61%, 1); /* orange-100 */
-  --cal-text-semantic-error: hsla(0, 91%, 71%, 1); /* red-100 */
-
-  /* Content/Text Semantic Emphasis */
-  --cal-text-semantic-info-emphasis: hsla(217, 91%, 25%, 1); /* blue-800 */
-  --cal-text-semantic-success-emphasis: hsla(142, 71%, 25%, 1); /* green-800 */
-  --cal-text-semantic-attention-emphasis: hsla(24, 95%, 25%, 1); /* orange-800 */
-  --cal-text-semantic-error-emphasis: hsla(0, 84%, 25%, 1); /* red-800 */
-
-  /* Legacy Content/Text Components - Consider deprecating */
-  --cal-text-info: hsla(218, 83%, 93%, 1); /* Keeping existing info text */
-  --cal-text-success: hsla(134, 76%, 94%, 1); /* Keeping existing success text */
-  --cal-text-attention: hsla(37, 86%, 92%, 1); /* Keeping existing attention text */
-  --cal-text-error: hsla(3, 66%, 93%, 1); /* Keeping existing error text */
-
-  /* Brand */
-  --cal-brand: hsla(0, 0%, 100%, 1); /* white */
-  --cal-brand-emphasis: hsla(218, 11%, 65%, 1); /* Keeping existing brand emphasis */
-  --cal-brand-text: hsla(0, 0%, 0%, 1); /* black */
-}  
-  `;
-
-    // Create a style rule for above css
-    const style = document.createElement("style");
-    style.id = "cal-css-vars";
-    style.textContent = cssVarsStyle;
-    document.head.appendChild(style);
-  } catch (error) {
-    console.error("Error adding app css vars - Report this issue to support", error);
-  }
-};
diff --git a/packages/embeds/embed-core/src/embed-iframe.ts b/packages/embeds/embed-core/src/embed-iframe.ts
index 2758bf5f1a..b27e736acc 100644
--- a/packages/embeds/embed-core/src/embed-iframe.ts
+++ b/packages/embeds/embed-core/src/embed-iframe.ts
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useRef, useState, useCallback } from "react";
-
+import { mapOldToNewCssVars } from "./ui/cssVarsMap";
 import type { Message } from "./embed";
 import { embedStore, EMBED_IFRAME_STATE } from "./embed-iframe/lib/embedStore";
 import {
@@ -348,6 +348,7 @@ async function waitForRenderStateToBeCompleted() {
   });
 }
 
+
 // It is a map of methods that can be called by parent using doInIframe({method: "methodName", arg: "argument"})
 export const methods = {
   ui: function style(uiConfig: UiConfig) {
@@ -374,13 +375,36 @@ export const methods = {
     }
 
     // Merge new values over the old values
+    // For cssVarsPerTheme, we need to merge at the theme level to preserve variables from both old and new configs
+    const oldCssVarsPerTheme = embedStore.uiConfig?.cssVarsPerTheme;
+    const newCssVarsPerTheme = uiConfig.cssVarsPerTheme;
+    let mergedCssVarsPerTheme: UiConfig["cssVarsPerTheme"] | undefined;
+
+    if (oldCssVarsPerTheme || newCssVarsPerTheme) {
+      mergedCssVarsPerTheme = {} as Record<"light" | "dark", Record<string, string>>;
+      const themeKeys = [
+        ...(oldCssVarsPerTheme ? Object.keys(oldCssVarsPerTheme) : []),
+        ...(newCssVarsPerTheme ? Object.keys(newCssVarsPerTheme) : []),
+      ];
+      const themes = Array.from(new Set(themeKeys)) as Array<"light" | "dark">;
+
+      for (const theme of themes) {
+        mergedCssVarsPerTheme[theme] = {
+          ...oldCssVarsPerTheme?.[theme],
+          ...newCssVarsPerTheme?.[theme],
+        };
+      }
+    }
+
     uiConfig = {
       ...embedStore.uiConfig,
       ...uiConfig,
+      ...(mergedCssVarsPerTheme ? { cssVarsPerTheme: mergedCssVarsPerTheme } : {}),
     };
 
     if (uiConfig.cssVarsPerTheme) {
-      window.CalEmbed.applyCssVars(uiConfig.cssVarsPerTheme);
+      const mappedCssVarsPerTheme = mapOldToNewCssVars(uiConfig.cssVarsPerTheme);
+      window.CalEmbed.applyCssVars(mappedCssVarsPerTheme);
     }
 
     if (uiConfig.colorScheme) {
diff --git a/packages/embeds/embed-core/src/embed.ts b/packages/embeds/embed-core/src/embed.ts
index d8056f3715..c9255a1dfd 100644
--- a/packages/embeds/embed-core/src/embed.ts
+++ b/packages/embeds/embed-core/src/embed.ts
@@ -2,7 +2,6 @@
 import { FloatingButton } from "./FloatingButton/FloatingButton";
 import { Inline } from "./Inline/inline";
 import { ModalBox } from "./ModalBox/ModalBox";
-import { addAppCssVars } from "./addAppCssVars";
 import {
   EMBED_MODAL_IFRAME_FORCE_RELOAD_THRESHOLD_MS,
   EMBED_MODAL_IFRAME_SLOT_STALE_TIME,
@@ -39,8 +38,6 @@ export type Message = {
 // HACK: Redefine and don't import WEBAPP_URL as it causes import statement to be present in built file.
 // This is happening because we are not able to generate an App and a lib using single Vite Config.
 const WEBAPP_URL = process.env.EMBED_PUBLIC_WEBAPP_URL || `https://${process.env.EMBED_PUBLIC_VERCEL_URL}`;
-// Add App CSS Vars as soon as possible so that tailwind classes can work instantly.
-addAppCssVars();
 
 customElements.define("cal-modal-box", ModalBox);
 customElements.define("cal-floating-button", FloatingButton);
@@ -180,8 +177,8 @@ type SingleInstructionMap = {
   off: ["off", allPossibleCallbacksAndActions];
 } & {
   [K in Exclude<keyof CalApi, "on" | "off">]: CalApi[K] extends (...args: never[]) => void
-    ? [K, ...Parameters<CalApi[K]>]
-    : never;
+  ? [K, ...Parameters<CalApi[K]>]
+  : never;
 };
 
 type SingleInstruction = SingleInstructionMap[keyof SingleInstructionMap];
@@ -602,7 +599,7 @@ export class Cal {
       : 0;
     const crossedReloadThreshold = previousEmbedRenderStartTime
       ? timeSinceLastRender >
-        (prerenderOptions?.iframeForceReloadThresholdMs ?? EMBED_MODAL_IFRAME_FORCE_RELOAD_THRESHOLD_MS)
+      (prerenderOptions?.iframeForceReloadThresholdMs ?? EMBED_MODAL_IFRAME_FORCE_RELOAD_THRESHOLD_MS)
       : false;
 
     const areSlotsStale = previousEmbedRenderStartTime
@@ -948,10 +945,10 @@ class CalApi {
 
     template.innerHTML = `<cal-inline 
       ${generateDataAttributes({
-        pageType,
-        theme,
-        layout,
-      })}
+      pageType,
+      theme,
+      layout,
+    })}
       style="max-height:inherit;height:inherit;min-height:inherit;display:flex;position:relative;flex-wrap:wrap;width:100%">
     </cal-inline>
     <style>.cal-inline-container::-webkit-scrollbar{display:none}.cal-inline-container{scrollbar-width:none}</style>`;
@@ -1191,8 +1188,8 @@ class CalApi {
               ...enrichedConfig,
               ...(actionToTake === "connect-no-slots-fetch"
                 ? {
-                    "cal.embed.noSlotsFetchOnConnect": "true",
-                  }
+                  "cal.embed.noSlotsFetchOnConnect": "true",
+                }
                 : {}),
             },
             params: paramsToAdd,
@@ -1234,10 +1231,10 @@ class CalApi {
 
     template.innerHTML = `<cal-modal-box 
       ${generateDataAttributes({
-        pageType,
-        theme,
-        layout,
-      })}
+      pageType,
+      theme,
+      layout,
+    })}
       uid="${uid}">
     </cal-modal-box>`;
     this.cal.modalBox = template.content.children[0];
diff --git a/packages/embeds/embed-core/src/styles.css b/packages/embeds/embed-core/src/styles.css
index 029ca24b69..c1ad77eef2 100644
--- a/packages/embeds/embed-core/src/styles.css
+++ b/packages/embeds/embed-core/src/styles.css
@@ -1,6 +1,7 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+@import "@coss/ui/styles.css";
+@import "../../../config/theme/tokens.css";
+
 @font-face {
   font-family: "Cal Sans";
   src: url("https://cal.com/cal.ttf");
@@ -22,4 +23,14 @@ body,
 :host {
   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue,
     Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
+  /** Tailwind defines this as @property and these are completely ignored if defined inside shadow DOM. - https://stackoverflow.com/questions/78717295/property-not-recognized-in-shadow-dom */
+  /** We avoid loading tailwind outside the shadow DOM as it could potentially affect the user's webpage. So define --tw prefixed properties here as and when used for now */
+  --tw-border-style: solid;
 }
+
+@utility stack-y-* {
+  &> :not([hidden])~ :not([hidden]) {
+    margin-top: --spacing(--value(integer));
+    margin-top: --value([length]);
+  }
+}
\ No newline at end of file
diff --git a/packages/embeds/embed-core/src/ui/cssVarsMap.ts b/packages/embeds/embed-core/src/ui/cssVarsMap.ts
new file mode 100644
index 0000000000..0e4a3f1e23
--- /dev/null
+++ b/packages/embeds/embed-core/src/ui/cssVarsMap.ts
@@ -0,0 +1,61 @@
+import { UiConfig } from "../types";
+
+/**
+ * Maps old CSS variable names to new Tailwind v4 variable names.
+ * This maintains backward compatibility by allowing users to use old variable names
+ * while the webapp uses the new Tailwind v4 format.
+ * 
+ * This is only applicable as long as fundamentally the purpose of the variable is the same.
+ * In some cases, we have special classes designed to target specific elements e.g. border-booker class which is configured to use variable --cal-border-booker. 
+ * In those special cases, we need to ensure that we don't remove those special css variables. Renaming them is fine and in which case we would need to map them here.
+ * 
+ */
+const OLD_TO_NEW_CSS_VAR_MAP: Record<string, string> = {
+    // Border radius variables: --cal-radius-* -> --radius-*
+    "cal-radius": "radius",
+    "cal-radius-sm": "radius-sm",
+    "cal-radius-md": "radius-md",
+    "cal-radius-lg": "radius-lg",
+    "cal-radius-xl": "radius-xl",
+    "cal-radius-2xl": "radius-2xl",
+    "cal-radius-3xl": "radius-3xl",
+    "cal-radius-full": "radius-full",
+    "cal-radius-none": "radius-none",
+    // We don't intentionally want to support all spacing variables, from just one variable our design system derives all the rest.
+    "cal-spacing-px": "spacing",
+    // No need to map the following
+    // Colors - Still using the old variable names --cal-bg-* and --cal-brand-*
+    // Border colors - Still using the old variable names --cal-border-*
+    // text colors - Still using the old variable names --cal-text-*
+    // fill colors - Still using the old variable names --cal-fill-*
+};
+
+/**
+ * Transforms cssVarsPerTheme by mapping old CSS variable names to new Tailwind v4 names.
+ * This ensures backward compatibility while the webapp uses the new variable format.
+ */
+export function mapOldToNewCssVars(
+    cssVarsPerTheme: UiConfig["cssVarsPerTheme"]
+): UiConfig["cssVarsPerTheme"] {
+    if (!cssVarsPerTheme) {
+        return cssVarsPerTheme;
+    }
+
+    const mapped: Record<string, Record<string, string>> = {};
+
+    for (const [theme, cssVars] of Object.entries(cssVarsPerTheme)) {
+        mapped[theme] = {};
+        for (const [varName, value] of Object.entries(cssVars)) {
+            // If the variable name exists in the mapping, use the new name; otherwise keep the original
+            const newVarName = OLD_TO_NEW_CSS_VAR_MAP[varName];
+            if (!newVarName) {
+                mapped[theme][varName] = value
+                continue;
+            }
+            console.log("Mapped variable:", varName, "to", newVarName);
+            mapped[theme][newVarName] = value;
+        }
+    }
+
+    return mapped as UiConfig["cssVarsPerTheme"];
+}
\ No newline at end of file
diff --git a/packages/embeds/embed-core/src/ui/skeleton.ts b/packages/embeds/embed-core/src/ui/skeleton.ts
index b8da0f3405..aebfb425f8 100644
--- a/packages/embeds/embed-core/src/ui/skeleton.ts
+++ b/packages/embeds/embed-core/src/ui/skeleton.ts
@@ -28,7 +28,7 @@ const generateEventMetaSkeleton = () => {
             <h1 data-testid="event-title" class="text-text text-xl font-semibold my-2 mb-4">
               <div class="animate-pulse bg-emphasis h-6 w-20 rounded-sm"></div>
             </h1>
-            <div class="space-y-3 font-medium">
+            <div class="stack-y-3 font-medium">
               ${eventMetaOptions}
             </div>
           </div>
@@ -73,7 +73,7 @@ const generateDatePickerSkeleton = () => {
   for (let i = 1; i <= daysInMonth; i++) {
     dates += `
   <div class="relative w-full pt-[100%]">
-    <button class="bg-muted text-muted absolute bottom-0 left-0 right-0 top-0 mx-auto flex w-full items-center justify-center rounded-sm border-transparent text-center font-medium opacity-90 transition" disabled="">
+    <button class="bg-cal-muted text-muted absolute bottom-0 left-0 right-0 top-0 mx-auto flex w-full items-center justify-center rounded-sm border-transparent text-center font-medium opacity-90 transition" disabled="">
       <span class="font-size-0 bg-emphasis inline-block animate-pulse rounded-md empty:before:inline-block empty:before:content-[''] h-9 w-9"></span>
     </button>
   </div>`;
@@ -101,13 +101,13 @@ const generateDatePickerSkeleton = () => {
               </span>
               <div class="text-emphasis">
                 <div class="flex">
-                  <button class="group whitespace-nowrap items-center font-medium relative rounded-[10px] disabled:cursor-not-allowed gap-1 flex justify-center text-subtle border border-transparent enabled:hover:bg-subtle enabled:hover:text-emphasis enabled:hover:border-subtle hover:border disabled:opacity-30 focus-visible:bg-subtle focus-visible:outline-none focus-visible:ring-0 focus-visible:border-subtle focus-visible:shadow-button-outline-gray-focused enabled:active:shadow-outline-gray-active duration-200 text-sm leading-none min-h-[36px] min-w-[36px] !p-2 hover:border-default group p-1 opacity-70 transition hover:opacity-100 rtl:rotate-180" data-testid="decrementMonth" aria-label="View previous month" type="button" disabled>
+                  <button class="group whitespace-nowrap items-center font-medium relative rounded-[10px] disabled:cursor-not-allowed gap-1 flex justify-center text-subtle border border-transparent enabled:hover:bg-subtle enabled:hover:text-emphasis enabled:hover:border-subtle hover:border disabled:opacity-30 focus-visible:bg-subtle focus-visible:outline-none focus-visible:ring-0 focus-visible:border-subtle focus-visible:shadow-button-outline-gray-focused enabled:active:shadow-outline-gray-active duration-200 text-sm leading-none min-h-[36px] min-w-[36px] p-2! hover:border-default group p-1 opacity-70 transition hover:opacity-100 rtl:rotate-180" data-testid="decrementMonth" aria-label="View previous month" type="button" disabled>
                     <svg height="16" width="16" class="fill-transparent visible button-icon group-active:translate-y-[0.5px] h-4 w-4" data-name="start-icon" aria-hidden="true">
                       <use href="#chevron-left"></use>
                     </svg>
                     <div class="contents visible group-active:translate-y-[0.5px]"></div>
                   </button>
-                  <button class="group whitespace-nowrap items-center font-medium relative rounded-[10px] disabled:cursor-not-allowed gap-1 flex justify-center text-subtle border border-transparent enabled:hover:bg-subtle enabled:hover:text-emphasis enabled:hover:border-subtle hover:border disabled:opacity-30 focus-visible:bg-subtle focus-visible:outline-none focus-visible:ring-0 focus-visible:border-subtle focus-visible:shadow-button-outline-gray-focused enabled:active:shadow-outline-gray-active duration-200 text-sm leading-none min-h-[36px] min-w-[36px] !p-2 hover:border-default group p-1 opacity-70 transition hover:opacity-100 rtl:rotate-180 undefined" data-testid="incrementMonth" aria-label="View next month" type="button">
+                  <button class="group whitespace-nowrap items-center font-medium relative rounded-[10px] disabled:cursor-not-allowed gap-1 flex justify-center text-subtle border border-transparent enabled:hover:bg-subtle enabled:hover:text-emphasis enabled:hover:border-subtle hover:border disabled:opacity-30 focus-visible:bg-subtle focus-visible:outline-none focus-visible:ring-0 focus-visible:border-subtle focus-visible:shadow-button-outline-gray-focused enabled:active:shadow-outline-gray-active duration-200 text-sm leading-none min-h-[36px] min-w-[36px] p-2! hover:border-default group p-1 opacity-70 transition hover:opacity-100 rtl:rotate-180 undefined" data-testid="incrementMonth" aria-label="View next month" type="button">
                     <svg height="16" width="16" class="fill-transparent visible button-icon group-active:translate-y-[0.5px] h-4 w-4" data-name="start-icon" aria-hidden="true">
                       <use href="#chevron-right"></use>
                     </svg>
@@ -130,18 +130,18 @@ const generateBookingSlotsPageSkeleton = ({ layout }: { layout: AllPossibleLayou
     return `
   <div 
     data-testid="booker-container" 
-    class="[--booker-timeslots-width:240px] lg:[--booker-timeslots-width:280px] [--booker-main-width:480px] [--booker-meta-width:340px] lg:[--booker-meta-width:424px] bg-default dark:bg-muted grid max-w-full items-start dark:[color-scheme:dark] sm:transition-[width] sm:duration-300 sm:motion-reduce:transition-none md:flex-row border-subtle rounded-md" 
+    class="[--booker-timeslots-width:240px] lg:[--booker-timeslots-width:280px] [--booker-main-width:480px] [--booker-meta-width:340px] lg:[--booker-meta-width:424px] bg-default dark:bg-cal-muted grid max-w-full items-start dark:scheme-dark sm:transition-[width] sm:duration-300 sm:motion-reduce:transition-none md:flex-row border-subtle rounded-md" 
     style="grid-template-areas: &quot;meta&quot; &quot;header&quot; &quot;main&quot; &quot;timeslots&quot;; width: 100%; grid-template-columns: 100%; grid-template-rows: minmax(min-content, max-content) 1fr; min-height: 0px; height: auto;">
      <div 
         class="relative z-10 flex [grid-area:meta]">
-        <div class="[grid-area:meta] max-w-screen flex w-full flex-col md:w-[var(--booker-meta-width)]">
+        <div class="[grid-area:meta] max-w-screen flex w-full flex-col md:w-(--booker-meta-width)">
         ${generateEventMetaSkeleton()}
         <div class="mt-auto px-5 py-3">
         ${generateDatePickerSkeleton()}
         </div>
         </div>
       </div>
-      <div class="[grid-area:main] md:border-subtle ml-[-1px] h-full flex-shrink px-5 py-3 md:border-l lg:w-[var(--booker-main-width)]" style="opacity: 1; transform: none;">
+      <div class="[grid-area:main] md:border-subtle -ml-px h-full shrink px-5 py-3 md:border-l lg:w-(--booker-main-width)" style="opacity: 1; transform: none;">
       </div>
   </div>
 `;
@@ -150,14 +150,14 @@ const generateBookingSlotsPageSkeleton = ({ layout }: { layout: AllPossibleLayou
   return `
   <div 
     data-testid="booker-container" 
-    class="[--booker-timeslots-width:240px] lg:[--booker-timeslots-width:280px] [--booker-meta-width:240px] [--booker-main-width:480px] lg:[--booker-meta-width:280px] bg-default dark:bg-muted grid max-w-full items-start dark:[color-scheme:dark] sm:motion-reduce:transition-none md:flex-row rounded-md sm:transition-[width] sm:duration-300 border-subtle border undefined" 
+    class="[--booker-timeslots-width:240px] lg:[--booker-timeslots-width:280px] [--booker-meta-width:240px] [--booker-main-width:480px] lg:[--booker-meta-width:280px] bg-default grid max-w-full items-start dark:scheme-dark sm:motion-reduce:transition-none md:flex-row rounded-md sm:transition-[width] sm:duration-300 border-subtle border undefined" 
     style="grid-template-areas: &quot;meta main main&quot; &quot;meta main main&quot;; width: calc(var(--booker-meta-width) + var(--booker-main-width)); grid-template-columns: var(--booker-meta-width) var(--booker-main-width); grid-template-rows: 1fr 0fr; min-height: 450px; height: auto;">
      <div 
         class="relative z-10 flex [grid-area:meta]" 
         style="position: sticky; top: 0px;">
         ${generateEventMetaSkeleton()}
       </div>
-      <div class="[grid-area:main] md:border-subtle ml-[-1px] h-full flex-shrink px-5 py-3 md:border-l lg:w-[var(--booker-main-width)]" style="opacity: 1; transform: none;">
+      <div class="[grid-area:main] md:border-subtle -ml-px h-full shrink px-5 py-3 md:border-l lg:w-(--booker-main-width)" style="opacity: 1; transform: none;">
         ${generateDatePickerSkeleton()}
       </div>
   </div>
diff --git a/packages/embeds/embed-core/src/ui/themeClass.ts b/packages/embeds/embed-core/src/ui/themeClass.ts
new file mode 100644
index 0000000000..56e1c5e73d
--- /dev/null
+++ b/packages/embeds/embed-core/src/ui/themeClass.ts
@@ -0,0 +1,8 @@
+import { EMBED_DARK_THEME_CLASS, EMBED_LIGHT_THEME_CLASS } from "../constants";
+
+export type ExternalThemeClass = typeof EMBED_DARK_THEME_CLASS | typeof EMBED_LIGHT_THEME_CLASS
+export type InternalThemeClass = "dark" | "light"
+
+export function getInternalThemeClass(externalThemeClass: ExternalThemeClass): InternalThemeClass {
+    return externalThemeClass === EMBED_DARK_THEME_CLASS ? "dark" : "light";
+}
\ No newline at end of file
diff --git a/packages/embeds/embed-core/tailwind.config.js b/packages/embeds/embed-core/tailwind.config.js
deleted file mode 100644
index 5ded59ec4e..0000000000
--- a/packages/embeds/embed-core/tailwind.config.js
+++ /dev/null
@@ -1,17 +0,0 @@
-const base = require("@calcom/config/tailwind-preset");
-
-module.exports = {
-  ...base,
-  content: ["**/*Html.ts", "**/ui/**/*.ts*"],
-  theme: {
-    ...base.theme,
-    extend: {
-      ...base.theme.extend,
-      colors: {
-        ...base.theme.extend.colors,
-        // Set default as black
-        brand: "var(--cal-brand-color, black)",
-      },
-    },
-  },
-};
diff --git a/packages/features/Segment.tsx b/packages/features/Segment.tsx
index 65491ba444..910a5ca3a6 100644
--- a/packages/features/Segment.tsx
+++ b/packages/features/Segment.tsx
@@ -127,7 +127,7 @@ function MatchingTeamMembers({
 
   if (!hasValidValue) {
     return (
-      <div className="border-subtle bg-muted mt-4 space-y-3 rounded-md border p-4">
+      <div className="border-subtle bg-cal-muted mt-4 stack-y-3 rounded-md border p-4">
         <div className="text-subtle flex items-center text-sm font-medium">
           <span>{t("no_filter_set")}</span>
         </div>
@@ -138,7 +138,7 @@ function MatchingTeamMembers({
   if (isPending) {
     return (
       <div
-        className="border-subtle bg-muted mt-4 space-y-3 rounded-md border p-4"
+        className="border-subtle bg-cal-muted mt-4 stack-y-3 rounded-md border p-4"
         data-testid="segment_loading_state">
         <div className="text-emphasis flex items-center text-sm font-medium">
           <div className="bg-subtle h-4 w-32 animate-pulse rounded" />
@@ -161,7 +161,7 @@ function MatchingTeamMembers({
   const { result: matchingTeamMembers } = matchingTeamMembersWithResult;
 
   return (
-    <div className="border-subtle bg-muted mt-4 space-y-3 rounded-md border p-4">
+    <div className="border-subtle bg-cal-muted mt-4 stack-y-3 rounded-md border p-4">
       <div className="text-emphasis flex items-center text-sm font-medium">
         <span>{t("x_matching_members", { x: matchingTeamMembers?.length ?? 0 })}</span>
       </div>
diff --git a/packages/features/apps/AdminAppsList.tsx b/packages/features/apps/AdminAppsList.tsx
index 515162c7ff..73fb63a4b0 100644
--- a/packages/features/apps/AdminAppsList.tsx
+++ b/packages/features/apps/AdminAppsList.tsx
@@ -348,8 +348,8 @@ export default AdminAppsList;
 
 const SkeletonLoader = () => {
   return (
-    <SkeletonContainer className="w-[30rem] pr-10">
-      <div className="mb-8 mt-6 space-y-6">
+    <SkeletonContainer className="w-120 pr-10">
+      <div className="mb-8 mt-6 stack-y-6">
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
diff --git a/packages/features/apps/components/AllApps.tsx b/packages/features/apps/components/AllApps.tsx
index 5f1af6ebd5..61d1426d4a 100644
--- a/packages/features/apps/components/AllApps.tsx
+++ b/packages/features/apps/components/AllApps.tsx
@@ -92,7 +92,7 @@ function CategoryTab({ selectedCategory, categories, searchText, onCategoryChang
           <div className="bg-default flex h-12 w-5 items-center justify-end">
             <Icon name="chevron-left" className="text-subtle h-4 w-4" />
           </div>
-          <div className="to-default flex h-12 w-5 bg-gradient-to-l from-transparent" />
+          <div className="to-default flex h-12 w-5 bg-linear-to-l from-transparent" />
         </button>
       )}
       <ul
@@ -104,7 +104,7 @@ function CategoryTab({ selectedCategory, categories, searchText, onCategoryChang
             onCategoryChange(null);
           }}
           className={classNames(
-            selectedCategory === null ? "bg-emphasis text-default" : "bg-muted text-emphasis",
+            selectedCategory === null ? "bg-emphasis text-default" : "bg-cal-muted text-emphasis",
             "hover:bg-emphasis min-w-max rounded-md px-4 py-2.5 text-sm font-medium transition hover:cursor-pointer"
           )}>
           {t("all")}
@@ -120,7 +120,7 @@ function CategoryTab({ selectedCategory, categories, searchText, onCategoryChang
               }
             }}
             className={classNames(
-              selectedCategory === cat ? "bg-emphasis text-default" : "bg-muted text-emphasis",
+              selectedCategory === cat ? "bg-emphasis text-default" : "bg-cal-muted text-emphasis",
               "hover:bg-emphasis rounded-md px-4 py-2.5 text-sm font-medium transition hover:cursor-pointer"
             )}>
             {cat === "crm" ? cat.toUpperCase() : cat[0].toUpperCase() + cat.slice(1)}
@@ -129,7 +129,7 @@ function CategoryTab({ selectedCategory, categories, searchText, onCategoryChang
       </ul>
       {rightVisible && (
         <button onClick={handleRight} className="absolute bottom-0 right-0 flex ">
-          <div className="to-default flex h-12 w-5 bg-gradient-to-r from-transparent" />
+          <div className="to-default flex h-12 w-5 bg-linear-to-r from-transparent" />
           <div className="bg-default flex h-12 w-5 items-center justify-end">
             <Icon name="chevron-right" className="text-subtle h-4 w-4" />
           </div>
diff --git a/packages/features/apps/components/AppCard.tsx b/packages/features/apps/components/AppCard.tsx
index 9aa9fb1c1e..cc74c61d6a 100644
--- a/packages/features/apps/components/AppCard.tsx
+++ b/packages/features/apps/components/AppCard.tsx
@@ -120,7 +120,7 @@ export function AppCard({ app, credentials, searchText, userAdminTeams }: AppCar
             <span className="pl-1 text-subtle">{props.reviews} reviews</span>
           </div> */}
       <p
-        className="text-default mt-2 flex-grow text-sm"
+        className="text-default mt-2 grow text-sm"
         dangerouslySetInnerHTML={{ __html: markdownToSafeHTML(app.description) }}
         style={{
           overflow: "hidden",
@@ -133,7 +133,7 @@ export function AppCard({ app, credentials, searchText, userAdminTeams }: AppCar
       <div className="mt-5 flex max-w-full flex-row justify-between gap-2">
         <Button
           color="secondary"
-          className="flex w-32 flex-grow justify-center"
+          className="flex w-32 grow justify-center"
           href={`/apps/${app.slug}`}
           data-testid={`app-store-app-card-${app.slug}`}>
           {t("details")}
diff --git a/packages/features/apps/components/Categories.tsx b/packages/features/apps/components/Categories.tsx
index 98abfab021..153df2489f 100644
--- a/packages/features/apps/components/Categories.tsx
+++ b/packages/features/apps/components/Categories.tsx
@@ -37,7 +37,7 @@ export function AppStoreCategories({
             data-testid={`app-store-category-${category.name}`}
             className="relative flex rounded-md"
             style={{ background: "radial-gradient(farthest-side at top right, #a2abbe 0%, #E3E3E3 100%)" }}>
-            <div className="dark:bg-muted light:bg-[url('/noise.svg')] dark:from-subtle dark:to-muted w-full self-center bg-cover bg-center bg-no-repeat px-6 py-4 dark:bg-gradient-to-tr">
+            <div className="dark:bg-cal-muted light:bg-[url('/noise.svg')] dark:from-subtle dark:to-muted w-full self-center bg-cover bg-center bg-no-repeat px-6 py-4 dark:bg-linear-to-tr">
               <Image
                 src={`/app-categories/${category.name}.svg`}
                 width={100}
diff --git a/packages/features/apps/components/SkeletonLoader.tsx b/packages/features/apps/components/SkeletonLoader.tsx
index 1e96563257..df0acdd378 100644
--- a/packages/features/apps/components/SkeletonLoader.tsx
+++ b/packages/features/apps/components/SkeletonLoader.tsx
@@ -17,10 +17,10 @@ export function SkeletonLoader({ className }: { className?: string }) {
 function SkeletonItem() {
   return (
     <li className="group flex w-full items-center justify-between p-3">
-      <div className="flex-grow truncate text-sm">
+      <div className="grow truncate text-sm">
         <div className="flex justify-start space-x-2 rtl:space-x-reverse">
           <SkeletonText className="h-10 w-10" />
-          <div className="space-y-1">
+          <div className="stack-y-1">
             <div>
               <SkeletonText className="h-4 w-16" />
             </div>
@@ -30,7 +30,7 @@ function SkeletonItem() {
           </div>
         </div>
       </div>
-      <div className="mt-4 hidden flex-shrink-0 sm:ml-5 sm:mt-0 lg:flex">
+      <div className="mt-4 hidden shrink-0 sm:ml-5 sm:mt-0 lg:flex">
         <div className="flex justify-between space-x-2 rtl:space-x-reverse">
           <SkeletonText className="h-11 w-32" />
         </div>
diff --git a/packages/features/availability/components/SkeletonLoader.tsx b/packages/features/availability/components/SkeletonLoader.tsx
index 45c87e2a1f..2138ff3d0d 100644
--- a/packages/features/availability/components/SkeletonLoader.tsx
+++ b/packages/features/availability/components/SkeletonLoader.tsx
@@ -45,7 +45,7 @@ export const SelectSkeletonLoader = ({ className }: { className?: string }) => {
         "border-subtle group flex w-full items-center justify-between rounded-sm border px-[10px] py-3",
         className
       )}>
-      <div className="flex-grow truncate text-sm">
+      <div className="grow truncate text-sm">
         <div className="flex justify-between">
           <SkeletonText className="h-4 w-32" />
           <SkeletonText className="h-4 w-4" />
diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx
index 821a54e00c..2ab6c3bab5 100644
--- a/packages/features/bookings/Booker/Booker.tsx
+++ b/packages/features/bookings/Booker/Booker.tsx
@@ -351,7 +351,7 @@ const BookerComponent = ({
           data-testid="booker-container"
           className={classNames(
             ...getBookerSizeClassNames(layout, bookerState, hideEventTypeDetails),
-            `bg-default dark:bg-muted grid max-w-full items-start dark:[color-scheme:dark] sm:transition-[width] sm:duration-300 sm:motion-reduce:transition-none md:flex-row`,
+            `bg-default dark:bg-cal-muted grid max-w-full items-start dark:scheme-dark sm:transition-[width] sm:duration-300 sm:motion-reduce:transition-none md:flex-row`,
             // We remove border only when the content covers entire viewport. Because in embed, it can almost never be the case that it covers entire viewport, we show the border there
             (layout === BookerLayouts.MONTH_VIEW || isEmbed) && "border-subtle rounded-md",
             !isEmbed && "sm:transition-[width] sm:duration-300",
@@ -366,7 +366,7 @@ const BookerComponent = ({
                 className={classNames(
                   layout === BookerLayouts.MONTH_VIEW && "fixed top-4 z-10 ltr:right-4 rtl:left-4",
                   (layout === BookerLayouts.COLUMN_VIEW || layout === BookerLayouts.WEEK_VIEW) &&
-                    "bg-default dark:bg-muted sticky top-0 z-10"
+                    "bg-default dark:bg-cal-muted sticky top-0 z-10"
                 )}>
                 {isPlatform && layout === BookerLayouts.MONTH_VIEW ? (
                   <></>
@@ -406,7 +406,7 @@ const BookerComponent = ({
             <StickyOnDesktop key="meta" className={classNames("relative z-10 flex [grid-area:meta]")}>
               <BookerSection
                 area="meta"
-                className="max-w-screen flex w-full flex-col md:w-[var(--booker-meta-width)]">
+                className="max-w-screen flex w-full flex-col md:w-(--booker-meta-width)">
                 {!hideEventTypeDetails && orgBannerUrl && (
                   <img
                     loading="eager"
@@ -453,7 +453,7 @@ const BookerComponent = ({
             <BookerSection
               key="book-event-form"
               area="main"
-              className="sticky top-0 ml-[-1px] h-full p-6 md:w-[var(--booker-main-width)] md:border-l"
+              className="sticky top-0 -ml-px h-full p-6 md:w-(--booker-main-width) md:border-l"
               {...fadeInLeft}
               visible={bookerState === "booking" && !shouldShowFormInDialog}>
               {EventBooker}
@@ -465,7 +465,7 @@ const BookerComponent = ({
               visible={bookerState !== "booking" && layout === BookerLayouts.MONTH_VIEW}
               {...fadeInLeft}
               initial="visible"
-              className="md:border-subtle ml-[-1px] h-full flex-shrink px-5 py-3 md:border-l lg:w-[var(--booker-main-width)]">
+              className="md:border-subtle -ml-px h-full shrink px-5 py-3 md:border-l lg:w-(--booker-main-width)">
               <DatePicker
                 classNames={customClassNames?.datePickerCustomClassNames}
                 event={event}
@@ -480,7 +480,7 @@ const BookerComponent = ({
               key="large-calendar"
               area="main"
               visible={layout === BookerLayouts.WEEK_VIEW}
-              className="border-subtle sticky top-0 ml-[-1px] h-full md:border-l"
+              className="border-subtle sticky top-0 -ml-px h-full md:border-l"
               {...fadeInLeft}>
               <LargeCalendar
                 extraDays={extraDays}
@@ -499,7 +499,7 @@ const BookerComponent = ({
               className={classNames(
                 "border-subtle rtl:border-default flex h-full w-full flex-col overflow-x-auto px-5 py-3 pb-0 rtl:border-r ltr:md:border-l",
                 layout === BookerLayouts.MONTH_VIEW &&
-                  "h-full overflow-hidden md:w-[var(--booker-timeslots-width)]",
+                  "h-full overflow-hidden md:w-(--booker-timeslots-width)",
                 layout !== BookerLayouts.MONTH_VIEW && "sticky top-0"
               )}
               ref={timeslotsRef}
diff --git a/packages/features/bookings/Booker/components/AvailableTimeSlots.tsx b/packages/features/bookings/Booker/components/AvailableTimeSlots.tsx
index 2fccf7e04f..4555f17ca3 100644
--- a/packages/features/bookings/Booker/components/AvailableTimeSlots.tsx
+++ b/packages/features/bookings/Booker/components/AvailableTimeSlots.tsx
@@ -214,7 +214,7 @@ export const AvailableTimeSlots = ({
       <div
         ref={containerRef}
         className={classNames(
-          limitHeight && "scroll-bar flex-grow overflow-auto md:h-[400px]",
+          limitHeight && "scroll-bar grow overflow-auto md:h-[400px]",
           !limitHeight && "flex h-full w-full flex-row gap-4",
           `${customClassNames?.availableTimeSlotsContainer}`
         )}>
@@ -223,7 +223,7 @@ export const AvailableTimeSlots = ({
         {!isLoading &&
           slotsPerDay.length > 0 &&
           slotsPerDay.map((slots) => (
-            <div key={slots.date} className="scroll-bar h-full w-full overflow-y-auto overflow-x-hidden">
+            <div key={slots.date} className="scroll-bar h-full w-full overflow-y-auto overflow-x-hidden!">
               <AvailableTimes
                 className={customClassNames?.availableTimeSlotsContainer}
                 customClassNames={customClassNames?.availableTimes}
diff --git a/packages/features/bookings/Booker/components/DecoyBookingSuccessCard.tsx b/packages/features/bookings/Booker/components/DecoyBookingSuccessCard.tsx
index 417025b021..1f6cfb7527 100644
--- a/packages/features/bookings/Booker/components/DecoyBookingSuccessCard.tsx
+++ b/packages/features/bookings/Booker/components/DecoyBookingSuccessCard.tsx
@@ -36,12 +36,12 @@ export function DecoyBookingSuccessCard({
           <div className="flex items-end justify-center px-4 pb-20 pt-4 text-center sm:flex sm:p-0">
             <div className="main inset-0 my-4 flex flex-col transition-opacity sm:my-0" aria-hidden="true">
               <div
-                className="bg-default dark:bg-muted border-booker border-booker-width inline-block transform overflow-hidden rounded-lg px-8 pb-4 pt-5 text-left align-bottom transition-all sm:my-8 sm:w-full sm:max-w-xl sm:py-8 sm:align-middle"
+                className="bg-default dark:bg-cal-muted border-booker border-booker-width inline-block transform overflow-hidden rounded-lg px-8 pb-4 pt-5 text-left align-bottom transition-all sm:my-8 sm:w-full sm:max-w-xl sm:py-8 sm:align-middle"
                 role="dialog"
                 aria-modal="true"
                 aria-labelledby="modal-headline">
                 <div>
-                  <div className="bg-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
+                  <div className="bg-cal-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
                     <Icon name="check" className="h-5 w-5 text-green-600 dark:text-green-400" />
                   </div>
                 </div>
diff --git a/packages/features/bookings/Booker/components/EventMeta.tsx b/packages/features/bookings/Booker/components/EventMeta.tsx
index 4caf9ddc61..e2f2907014 100644
--- a/packages/features/bookings/Booker/components/EventMeta.tsx
+++ b/packages/features/bookings/Booker/components/EventMeta.tsx
@@ -178,7 +178,7 @@ export const EventMeta = ({
           {(event.description || translatedDescription) && (
             <EventMetaBlock
               data-testid="event-meta-description"
-              contentClassName="mb-8 break-words max-w-full max-h-[180px] scroll-bar pr-4">
+              contentClassName="mb-8 wrap-break-word max-w-full max-h-[180px] scroll-bar pr-4">
               <div
                 // eslint-disable-next-line react/no-danger
                 dangerouslySetInnerHTML={{
@@ -187,7 +187,7 @@ export const EventMeta = ({
               />
             </EventMetaBlock>
           )}
-          <div className="space-y-4 font-medium rtl:-mr-2">
+          <div className="stack-y-4 font-medium rtl:-mr-2">
             {rescheduleUid && bookingData && (
               <EventMetaBlock icon="calendar">
                 {t("former_time")}
@@ -223,7 +223,7 @@ export const EventMeta = ({
                 <>{timezone}</>
               ) : (
                 <span
-                  className={`current-timezone before:bg-subtle min-w-32 -mt-[2px] flex h-6 max-w-full items-center justify-start before:absolute before:inset-0 before:bottom-[-3px] before:left-[-30px] before:top-[-3px] before:w-[calc(100%_+_35px)] before:rounded-md before:py-3 before:opacity-0 before:transition-opacity ${
+                  className={`current-timezone before:bg-subtle min-w-32 -mt-[2px] flex h-6 max-w-full items-center justify-start before:absolute before:inset-0 before:bottom-[-3px] before:left-[-30px] before:top-[-3px] before:w-[calc(100%+35px)] before:rounded-md before:py-3 before:opacity-0 before:transition-opacity ${
                     event.lockTimeZoneToggleOnBookingPage ? "cursor-not-allowed" : ""
                   }`}
                   data-testid="event-meta-current-timezone">
@@ -233,8 +233,8 @@ export const EventMeta = ({
                     timezoneSelectCustomClassname={classNames?.eventMetaTimezoneSelect}
                     classNames={{
                       control: () =>
-                        "!min-h-0 p-0 w-full border-0 bg-transparent focus-within:ring-0 shadow-none!",
-                      menu: () => "!w-64 max-w-[90vw] mb-1 ",
+                        "min-h-0! p-0 w-full border-0 bg-transparent focus-within:ring-0 shadow-none!",
+                      menu: () => "w-64! max-w-[90vw] mb-1 ",
                       singleValue: () => "text-text py-1",
                       indicatorsContainer: () => "ml-auto",
                       container: () => "max-w-full",
diff --git a/packages/features/bookings/Booker/components/Header.tsx b/packages/features/bookings/Booker/components/Header.tsx
index 1d9799d4bc..0c121dadd1 100644
--- a/packages/features/bookings/Booker/components/Header.tsx
+++ b/packages/features/bookings/Booker/components/Header.tsx
@@ -113,7 +113,7 @@ export function Header({
 
   return (
     <div className="border-default relative z-10 flex border-b px-5 py-4 ltr:border-l rtl:border-r">
-      <div className="flex items-center gap-5 rtl:flex-grow">
+      <div className="flex items-center gap-5 rtl:grow">
         <FormattedSelectedDateRange />
         <ButtonGroup>
           <Button
diff --git a/packages/features/bookings/Booker/components/OutOfOfficeInSlots.tsx b/packages/features/bookings/Booker/components/OutOfOfficeInSlots.tsx
index 6a7d90dd12..0ad8c7b05d 100644
--- a/packages/features/bookings/Booker/components/OutOfOfficeInSlots.tsx
+++ b/packages/features/bookings/Booker/components/OutOfOfficeInSlots.tsx
@@ -35,7 +35,7 @@ export const OutOfOfficeInSlots = (props: IOutOfOfficeInSlotsProps) => {
         <div className="bg-emphasis flex h-14 w-14 flex-col items-center justify-center rounded-full">
           <span className="m-auto text-center text-lg">{emoji}</span>
         </div>
-        <div className="space-y-2 text-center">
+        <div className="stack-y-2 text-center">
           <p className="mt-2 text-base font-bold">
             {t("ooo_user_is_ooo", { displayName: fromUser.displayName })}
           </p>
diff --git a/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarSettingsModal.tsx b/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarSettingsModal.tsx
index 1689aaba91..d88f4be868 100644
--- a/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarSettingsModal.tsx
+++ b/packages/features/bookings/Booker/components/OverlayCalendar/OverlayCalendarSettingsModal.tsx
@@ -28,7 +28,7 @@ interface IOverlayCalendarSettingsModalProps {
 const SkeletonLoader = () => {
   return (
     <SkeletonContainer>
-      <div className="border-subtle mt-3 space-y-4 rounded-xl border px-4 py-4 ">
+      <div className="border-subtle mt-3 stack-y-4 rounded-xl border px-4 py-4 ">
         <SkeletonText className="h-4 w-full" />
         <SkeletonText className="h-4 w-full" />
         <SkeletonText className="h-4 w-full" />
@@ -99,7 +99,7 @@ export function OverlayCalendarSettingsModal({
                                   />
                                 )
                               }
-                              <div className="flex-grow truncate pl-2">
+                              <div className="grow truncate pl-2">
                                 <ListItemTitle component="h3" className="space-x-2 rtl:space-x-reverse">
                                   <Link href={`/apps/${item.integration.slug}`}>
                                     {item.integration.name || item.integration.title}
@@ -109,7 +109,7 @@ export function OverlayCalendarSettingsModal({
                               </div>
                             </div>
                             <div className="border-subtle w-full border-t pt-4">
-                              <ul className="space-y-4">
+                              <ul className="stack-y-4">
                                 {item.calendars.map((cal, index) => {
                                   const id = cal.integrationTitle ?? `calendar-switch-${index}`;
                                   return (
diff --git a/packages/features/bookings/Booker/components/Unavailable.tsx b/packages/features/bookings/Booker/components/Unavailable.tsx
index 1b88e86901..59df75a065 100644
--- a/packages/features/bookings/Booker/components/Unavailable.tsx
+++ b/packages/features/bookings/Booker/components/Unavailable.tsx
@@ -2,7 +2,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 
 const UnAvailableMessage = ({ children, title }: { children: React.ReactNode; title: string }) => (
   <div className="mx-auto w-full max-w-2xl">
-    <div className="border-subtle bg-default dark:bg-muted overflow-hidden rounded-lg border p-10">
+    <div className="border-subtle bg-default dark:bg-cal-muted overflow-hidden rounded-lg border p-10">
       <h2 className="font-cal mb-4 text-3xl">{title}</h2>
       {children}
     </div>
diff --git a/packages/features/bookings/components/AvailableTimes.tsx b/packages/features/bookings/components/AvailableTimes.tsx
index 3d2094da45..bf7ed5360f 100644
--- a/packages/features/bookings/components/AvailableTimes.tsx
+++ b/packages/features/bookings/components/AvailableTimes.tsx
@@ -169,7 +169,7 @@ const SlotItem = ({
           data-time={slot.time}
           onClick={onButtonClick}
           className={classNames(
-            `hover:border-brand-default min-h-9 mb-2 flex h-auto w-full flex-grow flex-col justify-center py-2`,
+            `hover:border-brand-default min-h-9 mb-2 flex h-auto w-full grow flex-col justify-center py-2`,
             selectedSlots?.includes(slot.time) && "border-brand-default",
             `${customClassNames}`
           )}
@@ -242,7 +242,7 @@ const SlotItem = ({
             {isOverlapping && (
               <HoverCard.Portal>
                 <HoverCard.Content side="top" align="end" sideOffset={2}>
-                  <div className="text-emphasis bg-inverted w-[var(--booker-timeslots-width)] rounded-md p-3">
+                  <div className="text-emphasis bg-inverted w-(--booker-timeslots-width) rounded-md p-3">
                     <div className="flex items-center gap-2">
                       <p>Busy</p>
                     </div>
diff --git a/packages/features/bookings/components/AvailableTimesHeader.tsx b/packages/features/bookings/components/AvailableTimesHeader.tsx
index c422a4c3ae..cdbcd34fb3 100644
--- a/packages/features/bookings/components/AvailableTimesHeader.tsx
+++ b/packages/features/bookings/components/AvailableTimesHeader.tsx
@@ -36,7 +36,7 @@ export const AvailableTimesHeader = ({
   return (
     <header
       className={classNames(
-        `dark:bg-muted dark:before:bg-muted mb-3 flex w-full flex-row items-center font-medium`,
+        `dark:bg-cal-muted dark:before:bg-cal-muted mb-3 flex w-full flex-row items-center font-medium`,
         "bg-default before:bg-default",
         customClassNames?.availableTimeSlotsHeaderContainer
       )}>
diff --git a/packages/features/bookings/components/BookingSuccessCard.tsx b/packages/features/bookings/components/BookingSuccessCard.tsx
index 1e14079b48..557bee1f74 100644
--- a/packages/features/bookings/components/BookingSuccessCard.tsx
+++ b/packages/features/bookings/components/BookingSuccessCard.tsx
@@ -36,12 +36,12 @@ export function BookingSuccessCard({
           <div className="flex items-end justify-center px-4 pb-20 pt-4 text-center sm:flex sm:p-0">
             <div className="main inset-0 my-4 flex flex-col transition-opacity sm:my-0" aria-hidden="true">
               <div
-                className="bg-default dark:bg-muted border-booker border-booker-width inline-block transform overflow-hidden rounded-lg px-8 pb-4 pt-5 text-left align-bottom transition-all sm:my-8 sm:w-full sm:max-w-xl sm:py-8 sm:align-middle"
+                className="bg-default dark:bg-cal-muted border-booker border-booker-width inline-block transform overflow-hidden rounded-lg px-8 pb-4 pt-5 text-left align-bottom transition-all sm:my-8 sm:w-full sm:max-w-xl sm:py-8 sm:align-middle"
                 role="dialog"
                 aria-modal="true"
                 aria-labelledby="modal-headline">
                 <div>
-                  <div className="bg-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
+                  <div className="bg-cal-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
                     <Icon name="check" className="h-5 w-5 text-green-600 dark:text-green-400" />
                   </div>
                 </div>
diff --git a/packages/features/bookings/components/VerifyCodeDialog.tsx b/packages/features/bookings/components/VerifyCodeDialog.tsx
index 5527be00ff..95b08af483 100644
--- a/packages/features/bookings/components/VerifyCodeDialog.tsx
+++ b/packages/features/bookings/components/VerifyCodeDialog.tsx
@@ -83,7 +83,7 @@ export const VerifyCodeDialog = ({
 
   useEffect(() => setValue(""), [isOpenDialog]);
 
-  const digitClassName = "h-12 w-12 !text-xl text-center";
+  const digitClassName = "h-12 w-12 text-xl! text-center";
 
   return (
     <Dialog
diff --git a/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx b/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx
index 1295d0edb1..c7f6af874b 100644
--- a/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx
+++ b/packages/features/bookings/components/event-meta/AvailableEventLocations.tsx
@@ -35,7 +35,7 @@ function RenderLocationTooltip({ locations }: { locations: LocationObject[] }) {
   const { t } = useLocale();
 
   return (
-    <div className="my-2 me-2 flex w-full flex-col space-y-3 break-words">
+    <div className="my-2 me-2 flex w-full flex-col stack-y-3 wrap-break-word">
       <p>{t("select_on_next_step")}</p>
       {locations.map(
         (
@@ -115,7 +115,7 @@ export function AvailableEventLocations({ locations }: { locations: LocationObje
       </Tooltip>
     </div>
   ) : filteredLocations.length === 1 ? (
-    <div className="text-default mr-6 flex w-full flex-col space-y-4 break-words text-sm rtl:mr-2">
+    <div className="text-default mr-6 flex w-full flex-col stack-y-4 wrap-break-word text-sm rtl:mr-2">
       {filteredLocations}
     </div>
   ) : null;
diff --git a/packages/features/bookings/components/event-meta/Details.tsx b/packages/features/bookings/components/event-meta/Details.tsx
index ccce8cc9c0..7f8fd6c2ab 100644
--- a/packages/features/bookings/components/event-meta/Details.tsx
+++ b/packages/features/bookings/components/event-meta/Details.tsx
@@ -96,20 +96,20 @@ export const EventMetaBlock = ({
           alt=""
           // @TODO: Use SVG's instead of images, so we can get rid of the filter.
           className={classNames(
-            "mr-2 mt-[2px] h-4 w-4 flex-shrink-0",
-            isDark === undefined && "[filter:invert(0.5)_brightness(0.5)]",
-            (isDark === undefined || isDark) && "dark:[filter:invert(0.65)_brightness(0.9)]"
+            "mr-2 mt-[2px] h-4 w-4 shrink-0",
+            isDark === undefined && "filter-[invert(0.5)_brightness(0.5)]",
+            (isDark === undefined || isDark) && "dark:filter-[invert(0.65)_brightness(0.9)]"
           )}
         />
       ) : (
         <>
           {customIcon ||
             (!!icon && (
-              <Icon name={icon} className="relative z-20 mr-2 mt-[2px] h-4 w-4 flex-shrink-0 rtl:ml-2" />
+              <Icon name={icon} className="relative z-20 mr-2 mt-[2px] h-4 w-4 shrink-0 rtl:ml-2" />
             ))}
         </>
       )}
-      <div className={classNames("relative z-10 max-w-full break-words", contentClassName)}>{children}</div>
+      <div className={classNames("relative z-10 max-w-full wrap-break-word", contentClassName)}>{children}</div>
     </div>
   );
 };
@@ -183,7 +183,7 @@ export const EventDetails = ({ event, blocks = defaultEventDetailsBlocks }: Even
                 key={block}
                 customIcon={
                   <PriceIcon
-                    className="relative z-20 mr-2 mt-[2px] h-4 w-4 flex-shrink-0 rtl:ml-2"
+                    className="relative z-20 mr-2 mt-[2px] h-4 w-4 shrink-0 rtl:ml-2"
                     currency={event.currency}
                   />
                 }>
diff --git a/packages/features/bookings/components/event-meta/Duration.tsx b/packages/features/bookings/components/event-meta/Duration.tsx
index 4d2c8698a4..cbdd5136d2 100644
--- a/packages/features/bookings/components/event-meta/Duration.tsx
+++ b/packages/features/bookings/components/event-meta/Duration.tsx
@@ -101,7 +101,7 @@ export const EventDuration = ({
           <div className="bg-default flex h-9 w-5 items-center justify-end rounded-md">
             <Icon name="chevron-left" className="text-subtle h-4 w-4" />
           </div>
-          <div className="to-default flex h-9 w-5 bg-gradient-to-l from-transparent" />
+          <div className="to-default flex h-9 w-5 bg-linear-to-l from-transparent" />
         </button>
       )}
       <ul
@@ -127,7 +127,7 @@ export const EventDuration = ({
       </ul>
       {rightVisible && (
         <button onClick={handleRight} className="absolute bottom-0 right-0 flex">
-          <div className="to-default flex h-9 w-5 bg-gradient-to-r from-transparent" />
+          <div className="to-default flex h-9 w-5 bg-linear-to-r from-transparent" />
           <div className="bg-default flex h-9 w-5 items-center justify-end rounded-md">
             <Icon name="chevron-right" className="text-subtle h-4 w-4" />
           </div>
diff --git a/packages/features/bookings/components/event-meta/Locations.tsx b/packages/features/bookings/components/event-meta/Locations.tsx
index aa4c8b44ee..3c344a4b7e 100644
--- a/packages/features/bookings/components/event-meta/Locations.tsx
+++ b/packages/features/bookings/components/event-meta/Locations.tsx
@@ -34,7 +34,7 @@ export const EventLocations = ({ event }: { event: BookerEvent }) => {
       {locations.length > 1 && (
         <div
           key={locations[0].type}
-          className="before:bg-subtle relative before:pointer-events-none before:absolute before:inset-0 before:bottom-[-5px] before:left-[-30px] before:top-[-5px] before:w-[calc(100%_+_35px)] before:rounded-md before:py-3 before:opacity-0 before:transition-opacity hover:before:opacity-100">
+          className="before:bg-subtle relative before:pointer-events-none before:absolute before:inset-0 before:bottom-[-5px] before:left-[-30px] before:top-[-5px] before:w-[calc(100%+35px)] before:rounded-md before:py-3 before:opacity-0 before:transition-opacity hover:before:opacity-100">
           <Tooltip
             content={
               <>
@@ -60,7 +60,7 @@ export const EventLocations = ({ event }: { event: BookerEvent }) => {
                 </ul>
               </>
             }>
-            <span className="relative z-[2] py-2">{t("num_locations", { num: locations.length })}</span>
+            <span className="relative z-2 py-2">{t("num_locations", { num: locations.length })}</span>
           </Tooltip>
         </div>
       )}
diff --git a/packages/features/calendars/DatePicker.tsx b/packages/features/calendars/DatePicker.tsx
index f68fa64d31..6b393baec9 100644
--- a/packages/features/calendars/DatePicker.tsx
+++ b/packages/features/calendars/DatePicker.tsx
@@ -322,7 +322,7 @@ const Days = ({
             <div key={`e-${idx}`} />
           ) : props.isLoading ? (
             <button
-              className="bg-muted text-muted absolute bottom-0 left-0 right-0 top-0 mx-auto flex w-full items-center justify-center rounded-sm border-transparent text-center font-medium opacity-90 transition"
+              className="bg-cal-muted text-muted absolute bottom-0 left-0 right-0 top-0 mx-auto flex w-full items-center justify-center rounded-sm border-transparent text-center font-medium opacity-90 transition"
               key={`e-${idx}`}
               disabled>
               <SkeletonText className="h-8 w-9" />
diff --git a/packages/features/calendars/weeklyview/components/Calendar.tsx b/packages/features/calendars/weeklyview/components/Calendar.tsx
index 450e47e53b..86dc7e93a3 100644
--- a/packages/features/calendars/weeklyview/components/Calendar.tsx
+++ b/packages/features/calendars/weeklyview/components/Calendar.tsx
@@ -64,7 +64,7 @@ function CalendarInner(props: CalendarComponentProps) {
         {props.isPending && <Spinner />}
         <div
           ref={container}
-          className="bg-default dark:bg-muted relative isolate flex h-full flex-auto flex-col">
+          className="bg-default dark:bg-cal-muted relative isolate flex h-full flex-auto flex-col">
           <div
             style={{ width: "165%" }}
             className="flex h-full max-w-full flex-none flex-col sm:max-w-none md:max-w-full">
@@ -78,7 +78,7 @@ function CalendarInner(props: CalendarComponentProps) {
               <CurrentTime timezone={timezone} scrollToCurrentTime={scrollToCurrentTime} />
               <div
                 className={classNames(
-                  "bg-default dark:bg-muted ring-muted sticky left-0 z-10 w-16 flex-none ring-1",
+                  "bg-default dark:bg-cal-muted ring-muted sticky left-0 z-10 w-16 flex-none ring-1",
                   showBorder &&
                     (borderColor === "subtle"
                       ? "border-subtle border-l border-r"
diff --git a/packages/features/calendars/weeklyview/components/DateValues/index.tsx b/packages/features/calendars/weeklyview/components/DateValues/index.tsx
index 3cd232f13f..4a9d742cb8 100644
--- a/packages/features/calendars/weeklyview/components/DateValues/index.tsx
+++ b/packages/features/calendars/weeklyview/components/DateValues/index.tsx
@@ -52,7 +52,7 @@ export function DateValues({ showBorder, borderColor, days, containerNavRef }: P
     <div
       ref={containerNavRef}
       className={classNames(
-        "bg-default dark:bg-default sticky top-[var(--calendar-dates-sticky-offset,0px)] z-[80] flex-none border-b",
+        "bg-default dark:bg-cal-muted sticky top-(--calendar-dates-sticky-offset,0px) z-80 flex-none border-b",
         borderColor === "subtle" ? "border-b-subtle" : "border-b-default",
         showBorder && (borderColor === "subtle" ? "border-r-subtle border-r" : "border-r-default border-r")
       )}>
diff --git a/packages/features/calendars/weeklyview/components/event/Empty.tsx b/packages/features/calendars/weeklyview/components/event/Empty.tsx
index 6ec98b2cad..e67f99c9b0 100644
--- a/packages/features/calendars/weeklyview/components/event/Empty.tsx
+++ b/packages/features/calendars/weeklyview/components/event/Empty.tsx
@@ -151,7 +151,7 @@ function Cell({ isDisabled, topOffsetMinutes, timeSlot }: CellProps) {
       className={classNames(
         "group flex w-[calc(100%-1px)] items-center justify-center",
         isDisabled && "pointer-events-none",
-        !isDisabled && "bg-default dark:bg-muted",
+        !isDisabled && "bg-default dark:bg-cal-muted",
         topOffsetMinutes && "absolute"
       )}
       data-disabled={isDisabled}
@@ -168,7 +168,7 @@ function Cell({ isDisabled, topOffsetMinutes, timeSlot }: CellProps) {
       {!isDisabled && hoverEventDuration !== 0 && (
         <div
           className={classNames(
-            "opacity-4 bg-brand-default hover:bg-brand-default text-brand dark:border-emphasis absolute hidden rounded-[4px] p-[6px] text-xs font-semibold leading-5 group-hover:flex group-hover:cursor-pointer",
+            "bg-brand-default hover:bg-brand-default text-brand dark:border-emphasis absolute hidden rounded-[4px] p-[6px] text-xs font-semibold leading-5 group-hover:flex group-hover:cursor-pointer",
             hoverEventDuration && hoverEventDuration > 15 && "items-start pt-3",
             hoverEventDuration && hoverEventDuration < 15 && "items-center"
           )}
@@ -179,7 +179,7 @@ function Cell({ isDisabled, topOffsetMinutes, timeSlot }: CellProps) {
             // multiple events are stacked next to each other. We might need to add this back later.
             width: "calc(100% - 2px)",
           }}>
-          <div className="overflow-ellipsis leading-[0]">{timeSlot.format(timeFormat)}</div>
+          <div className="text-ellipsis leading-0">{timeSlot.format(timeFormat)}</div>
         </div>
       )}
     </div>
@@ -195,7 +195,7 @@ function CustomCell({
   return (
     <div
       className={classNames(
-        "bg-default dark:bg-muted group absolute z-[65] flex w-[calc(100%-1px)] items-center justify-center"
+        "bg-default dark:bg-cal-muted group absolute z-65 flex w-[calc(100%-1px)] items-center justify-center"
       )}
       data-slot={timeSlot.toISOString()}
       style={{
@@ -204,7 +204,7 @@ function CustomCell({
       }}>
       <div
         className={classNames(
-          "dark:border-emphasis bg-default dark:bg-muted cursor-pointer rounded-[4px] p-[6px] text-xs font-semibold dark:text-white"
+          "dark:border-emphasis bg-default dark:bg-cal-muted cursor-pointer rounded-[4px] p-[6px] text-xs font-semibold dark:text-white"
         )}
         style={{
           height: `calc(${startEndTimeDuration}*var(--one-minute-height) - 2px)`,
diff --git a/packages/features/calendars/weeklyview/components/event/Event.tsx b/packages/features/calendars/weeklyview/components/event/Event.tsx
index ee7ae70ee1..0bb88902f9 100644
--- a/packages/features/calendars/weeklyview/components/event/Event.tsx
+++ b/packages/features/calendars/weeklyview/components/event/Event.tsx
@@ -31,7 +31,7 @@ const eventClasses = cva(
         false: "hover:cursor-pointer",
       },
       selected: {
-        true: "bg-inverted text-inverted border-[1px] border-transparent",
+        true: "bg-inverted text-inverted border border-transparent",
         false: "",
       },
     },
@@ -107,7 +107,7 @@ export function Event({
           {displayType === "single-line" && (
             <div
               className={classNames(
-                "flex w-full shrink-0 gap-2 overflow-hidden overflow-ellipsis whitespace-nowrap text-left leading-4",
+                "flex w-full shrink-0 gap-2 overflow-hidden text-ellipsis whitespace-nowrap text-left leading-4",
                 "items-center"
               )}>
               <span>{event.title}</span>
diff --git a/packages/features/calendars/weeklyview/components/horizontalLines/index.tsx b/packages/features/calendars/weeklyview/components/horizontalLines/index.tsx
index 852eac14ce..59e53dc61d 100644
--- a/packages/features/calendars/weeklyview/components/horizontalLines/index.tsx
+++ b/packages/features/calendars/weeklyview/components/horizontalLines/index.tsx
@@ -24,13 +24,13 @@ export const HorizontalLines = ({
   return (
     <div
       className={classNames(
-        "pointer-events-none relative z-[60] col-start-1 col-end-2 row-start-1 grid divide-y",
+        "pointer-events-none relative z-60 col-start-1 col-end-2 row-start-1 grid divide-y",
         borderColor === "subtle" ? "divide-subtle" : "divide-default"
       )}
       style={{
         gridTemplateRows: `repeat(${hours.length}, minmax(var(--gridDefaultSize),1fr)`,
       }}>
-      <div className="row-end-1 h-[--calendar-offset-top] " ref={containerOffsetRef} />
+      <div className="row-end-1 h-(--calendar-offset-top) " ref={containerOffsetRef} />
       {hours.map((hour) => (
         <div key={`${id}-${hour.get("hour")}`}>
           <div className="text-muted sticky left-0 z-20 -ml-14 -mt-2.5 w-14 pr-2 text-right text-xs leading-5 rtl:-mr-14">
diff --git a/packages/features/calendars/weeklyview/components/spinner/Spinner.tsx b/packages/features/calendars/weeklyview/components/spinner/Spinner.tsx
index 138e10b8c3..65a7ef22bb 100644
--- a/packages/features/calendars/weeklyview/components/spinner/Spinner.tsx
+++ b/packages/features/calendars/weeklyview/components/spinner/Spinner.tsx
@@ -3,7 +3,7 @@ import classNames from "@calcom/ui/classNames";
 export const Spinner = ({ className }: { className?: string }) => (
   <div
     className={classNames(
-      "fixed left-[calc(50%+calc(var(--booker-meta-width,0px)/2))] top-1/2 z-[80] h-10 w-10 -translate-x-1/2 -translate-y-1/2",
+      "fixed left-[calc(50%+calc(var(--booker-meta-width,0px)/2))] top-1/2 z-80 h-10 w-10 -translate-x-1/2 -translate-y-1/2",
       className
     )}>
     <svg className="h-10 w-10" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
diff --git a/packages/features/calendars/weeklyview/components/verticalLines/index.tsx b/packages/features/calendars/weeklyview/components/verticalLines/index.tsx
index 8bc5577655..5ae47657f1 100644
--- a/packages/features/calendars/weeklyview/components/verticalLines/index.tsx
+++ b/packages/features/calendars/weeklyview/components/verticalLines/index.tsx
@@ -19,7 +19,7 @@ export const VerticalLines = ({ days, borderColor }: { days: dayjs.Dayjs[]; bord
   return (
     <div
       className={classNames(
-        "pointer-events-none relative z-[60] col-start-1 col-end-2 row-start-1 grid auto-cols-auto grid-rows-1 divide-x",
+        "pointer-events-none relative z-60 col-start-1 col-end-2 row-start-1 grid auto-cols-auto grid-rows-1 divide-x",
         borderColor === "subtle" ? "divide-subtle" : "divide-default"
       )}
       dir={direction}
diff --git a/packages/features/components/timezone-select/TimezoneSelect.tsx b/packages/features/components/timezone-select/TimezoneSelect.tsx
index 6c0a29c632..8ff0f9f488 100644
--- a/packages/features/components/timezone-select/TimezoneSelect.tsx
+++ b/packages/features/components/timezone-select/TimezoneSelect.tsx
@@ -161,7 +161,7 @@ export function TimezoneSelectComponent({
           classNames(
             "bg-default py-2.5 px-3 rounded-md text-default ",
             state.isFocused && "bg-subtle",
-            state.isDisabled && "bg-muted",
+            state.isDisabled && "bg-cal-muted",
             state.isSelected && "bg-emphasis text-default",
             timezoneClassNames?.option && timezoneClassNames.option(state)
           ),
diff --git a/packages/features/data-table/components/DataTable.tsx b/packages/features/data-table/components/DataTable.tsx
index 98680df8dd..a1197a09a7 100644
--- a/packages/features/data-table/components/DataTable.tsx
+++ b/packages/features/data-table/components/DataTable.tsx
@@ -118,7 +118,7 @@ export function DataTable<TData>({
   return (
     <div
       className={classNames(
-        !hasWrapperContext ? "grid" : "bg-muted grid rounded-xl px-0.5 pb-0.5",
+        !hasWrapperContext ? "grid" : "bg-cal-muted grid rounded-xl px-0.5 pb-0.5",
         className
       )}
       style={{
@@ -153,7 +153,7 @@ export function DataTable<TData>({
         <TableNew
           className={classNames(
             "data-table grid border-0",
-            !hasWrapperContext && "bg-muted rounded-xl px-0.5 pb-0.5"
+            !hasWrapperContext && "bg-cal-muted rounded-xl px-0.5 pb-0.5"
           )}
           style={{
             ...columnSizingVars,
@@ -174,7 +174,7 @@ export function DataTable<TData>({
                       }}
                       className={classNames(
                         "relative flex shrink-0 items-center",
-                        "bg-muted",
+                        "bg-cal-muted",
                         column.getIsPinned() && "top-0 z-20 sm:sticky"
                       )}>
                       <TableHeadLabel header={header} />
@@ -184,9 +184,9 @@ export function DataTable<TData>({
                           onTouchStart={header.getResizeHandler()}
                           className={classNames(
                             "group absolute right-0 top-0 h-full w-[5px] cursor-col-resize touch-none select-none opacity-0 hover:opacity-50",
-                            header.column.getIsResizing() && "!opacity-75"
+                            header.column.getIsResizing() && "opacity-75!"
                           )}>
-                          <div className="bg-inverted mx-auto h-full w-[1px]" />
+                          <div className="bg-inverted mx-auto h-full w-px" />
                         </div>
                       )}
                     </TableHead>
@@ -287,7 +287,7 @@ function SeparatorRowRenderer({ separator, className }: { separator: SeparatorRo
   return (
     <div
       className={classNames(
-        "bg-muted text-emphasis w-full px-3 py-2 font-semibold",
+        "bg-cal-muted text-emphasis w-full px-3 py-2 font-semibold",
         separator.className,
         className
       )}>
@@ -429,10 +429,10 @@ function DataTableBody<TData>({
                     width: `var(--col-${kebabCase(cell.column.id)}-size)`,
                   }}
                   className={classNames(
-                    "bg-default group-hover:!bg-muted group-data-[state=selected]:bg-subtle flex shrink-0 items-center overflow-hidden",
+                    "bg-default group-hover:!bg-cal-muted group-data-[state=selected]:bg-subtle flex shrink-0 items-center overflow-hidden",
                     variant === "compact" && "p-0",
                     column.getIsPinned() &&
-                      "bg-default group-hover:!bg-muted group-data-[state=selected]:bg-subtle sm:sticky"
+                      "bg-default group-hover:!bg-cal-muted group-data-[state=selected]:bg-subtle sm:sticky"
                   )}>
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
                 </TableCell>
@@ -471,7 +471,7 @@ const TableHeadLabel = <TData,>({ header }: { header: Header<TData, unknown> })
           type="button"
           className={classNames(
             "group mr-1 flex w-full items-center gap-2 rounded-md px-2 py-1",
-            open && "bg-muted"
+            open && "bg-cal-muted"
           )}>
           <div
             className="text-default truncate text-sm leading-none"
diff --git a/packages/features/data-table/components/filters/AddFilterButton.tsx b/packages/features/data-table/components/filters/AddFilterButton.tsx
index d7399c63c8..cd0807aacb 100644
--- a/packages/features/data-table/components/filters/AddFilterButton.tsx
+++ b/packages/features/data-table/components/filters/AddFilterButton.tsx
@@ -78,7 +78,7 @@ function AddFilterButtonComponent<TData>(
                       addFilter(column.id);
                       setOpen(false);
                     }}
-                    className="flex items-center justify-between px-4 py-2"
+                    className="flex items-center justify-between px-4 py-2 rounded-none"
                     data-testid={`add-filter-item-${column.id}`}>
                     <span>{startCase(column.title)}</span>
                     {showHiddenIndicator && <Icon name="eye-off" className="h-4 w-4 opacity-50" />}
diff --git a/packages/features/data-table/components/filters/BaseSelectFilterOptions.tsx b/packages/features/data-table/components/filters/BaseSelectFilterOptions.tsx
index 2f274206fc..776350f748 100644
--- a/packages/features/data-table/components/filters/BaseSelectFilterOptions.tsx
+++ b/packages/features/data-table/components/filters/BaseSelectFilterOptions.tsx
@@ -142,8 +142,8 @@ export function BaseSelectFilterOptions<
                 onSelect={() => onOptionSelect(column, filterValue, optionValue)}>
                 <div
                   className={classNames(
-                    "border-subtle mr-2 flex h-4 w-4 items-center justify-center rounded-sm border",
-                    isOptionSelected(filterValue, optionValue) ? "bg-primary" : "opacity-50"
+                    "border-subtle mr-2 flex h-4 w-4 items-center justify-center rounded-sm",
+                    isOptionSelected(filterValue, optionValue) ? "bg-primary-default" : "border opacity-50"
                   )}>
                   {isOptionSelected(filterValue, optionValue) && (
                     <Icon name="check" className="text-primary-foreground h-4 w-4" />
diff --git a/packages/features/data-table/components/filters/DateRangeFilter.tsx b/packages/features/data-table/components/filters/DateRangeFilter.tsx
index 96e6464c5d..aa0c6b8d29 100644
--- a/packages/features/data-table/components/filters/DateRangeFilter.tsx
+++ b/packages/features/data-table/components/filters/DateRangeFilter.tsx
@@ -220,7 +220,7 @@ export const DateRangeFilter = ({
                   key={option.value}
                   data-testid={`date-range-options-${option.value}`}
                   className={classNames(
-                    "cursor-pointer justify-between px-3 py-2",
+                    "cursor-pointer justify-between px-3 py-2 rounded-none",
                     selectedPreset.value === option.value && "bg-emphasis"
                   )}
                   onSelect={() => {
diff --git a/packages/features/data-table/components/segment/DuplicateSegmentDialog.tsx b/packages/features/data-table/components/segment/DuplicateSegmentDialog.tsx
index c238f2d5a5..548dd96c7f 100644
--- a/packages/features/data-table/components/segment/DuplicateSegmentDialog.tsx
+++ b/packages/features/data-table/components/segment/DuplicateSegmentDialog.tsx
@@ -87,7 +87,7 @@ export function DuplicateSegmentDialog({
       <DialogContent>
         <DialogHeader title={t("duplicate_segment")} />
         <Form form={form} handleSubmit={handleSubmit}>
-          <div className="space-y-4">
+          <div className="stack-y-4">
             <TextField
               required
               data-testid="duplicate-segment-name"
diff --git a/packages/features/data-table/components/segment/RenameSegmentDialog.tsx b/packages/features/data-table/components/segment/RenameSegmentDialog.tsx
index 7ea1c8e416..0b2707068d 100644
--- a/packages/features/data-table/components/segment/RenameSegmentDialog.tsx
+++ b/packages/features/data-table/components/segment/RenameSegmentDialog.tsx
@@ -70,7 +70,7 @@ export function RenameSegmentDialog({
       <DialogContent>
         <DialogHeader title={t("rename_segment")} />
         <Form form={form} handleSubmit={handleSubmit}>
-          <div className="space-y-4">
+          <div className="stack-y-4">
             <TextField
               required
               data-testid="rename-segment-name"
diff --git a/packages/features/data-table/components/segment/SaveFilterSegmentButton.tsx b/packages/features/data-table/components/segment/SaveFilterSegmentButton.tsx
index 02afafdfc6..4fcd641f3e 100644
--- a/packages/features/data-table/components/segment/SaveFilterSegmentButton.tsx
+++ b/packages/features/data-table/components/segment/SaveFilterSegmentButton.tsx
@@ -184,7 +184,7 @@ export function SaveFilterSegmentButton() {
               <RadioGroup
                 defaultValue="update"
                 onValueChange={(value: string) => setSaveMode(value as "create" | "update")}
-                className="space-y-2">
+                className="stack-y-2">
                 <RadioField
                   id="update_segment"
                   label={t("override_segment", { name: selectedSegment.name })}
@@ -216,7 +216,7 @@ export function SaveFilterSegmentButton() {
                 </div>
 
                 {isTeamSegment && teams && teams.length > 0 && (
-                  <div>
+                  <div className="mt-1.5">
                     <Select<{ value: string; label: string }>
                       options={teams.map((team) => ({
                         value: team.id.toString(),
diff --git a/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx b/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
index 5c367e3196..faaf834cd5 100644
--- a/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
+++ b/packages/features/ee/api-keys/components/ApiKeyDialogForm.tsx
@@ -151,7 +151,7 @@ export default function ApiKeyDialogForm({
               setSuccessfulNewApiKeyModal(true);
             }
           }}
-          className="space-y-4">
+          className="stack-y-4">
           <div className="mb-4 mt-1">
             <h2 className="font-semi-bold font-cal text-emphasis text-xl tracking-wide">
               {defaultValues ? t("edit_api_key") : t("create_api_key")}
diff --git a/packages/features/ee/components/CommonSkeletonLoaders.tsx b/packages/features/ee/components/CommonSkeletonLoaders.tsx
index 0899b7cdf5..0c7c3bc7ad 100644
--- a/packages/features/ee/components/CommonSkeletonLoaders.tsx
+++ b/packages/features/ee/components/CommonSkeletonLoaders.tsx
@@ -7,7 +7,7 @@ export const AppearanceSkeletonLoader = () => {
       <div className="border-subtle mt-6 flex items-center rounded-t-xl border p-6 text-sm">
         <SkeletonText className="h-8 w-1/3" />
       </div>
-      <div className="border-subtle space-y-6 border-x px-4 py-6 sm:px-6">
+      <div className="border-subtle stack-y-6 border-x px-4 py-6 sm:px-6">
         <div className="flex w-full items-center justify-center gap-6">
           <div className="bg-emphasis h-32 flex-1 animate-pulse rounded-md p-5" />
           <div className="bg-emphasis h-32 flex-1 animate-pulse rounded-md p-5" />
diff --git a/packages/features/ee/deployment/licensekey/CreateLicenseKeyForm.tsx b/packages/features/ee/deployment/licensekey/CreateLicenseKeyForm.tsx
index 4d88123934..c712c28d6c 100644
--- a/packages/features/ee/deployment/licensekey/CreateLicenseKeyForm.tsx
+++ b/packages/features/ee/deployment/licensekey/CreateLicenseKeyForm.tsx
@@ -85,7 +85,7 @@ const CreateANewLicenseKeyFormChild = ({ session }: { session: Ensure<SessionCon
       {!stripeCheckoutUrl ? (
         <Form
           form={newLicenseKeyFormMethods}
-          className="space-y-5"
+          className="stack-y-5"
           id="createOrg"
           handleSubmit={(values) => {
             mutation.mutate(values);
@@ -177,7 +177,7 @@ const CreateANewLicenseKeyFormChild = ({ session }: { session: Ensure<SessionCon
             />
           </div>
 
-          <div className="flex flex-wrap gap-2 [&>*]:flex-1">
+          <div className="flex flex-wrap gap-2 *:flex-1">
             <Controller
               name="entityCount"
               control={newLicenseKeyFormMethods.control}
@@ -257,7 +257,7 @@ const CreateANewLicenseKeyFormChild = ({ session }: { session: Ensure<SessionCon
             <TextField className="flex-1" disabled value={stripeCheckoutUrl} />
           </div>
 
-          <div className="mt-4 flex gap-2 [&>*]:flex-1 [&>*]:justify-center">
+          <div className="mt-4 flex gap-2 *:flex-1 *:justify-center">
             <Button
               color="secondary"
               onClick={() => {
diff --git a/packages/features/ee/dsync/components/CreateDirectory.tsx b/packages/features/ee/dsync/components/CreateDirectory.tsx
index 8a85fad203..87c69fa920 100644
--- a/packages/features/ee/dsync/components/CreateDirectory.tsx
+++ b/packages/features/ee/dsync/components/CreateDirectory.tsx
@@ -38,7 +38,7 @@ const CreateDirectory = ({ orgId }: { orgId: number | null }) => {
             {t("directory_sync_title")}
           </p>
         </div>
-        <div className="flex-shrink-0 pt-3 sm:ml-auto sm:pl-3 sm:pt-0">
+        <div className="shrink-0 pt-3 sm:ml-auto sm:pl-3 sm:pt-0">
           <Button color="primary" onClick={() => setOpenModal(true)}>
             {t("configure")}
           </Button>
@@ -61,7 +61,7 @@ const CreateDirectory = ({ orgId }: { orgId: number | null }) => {
               </h2>
               <p className="mt-1 text-sm text-gray-500">{t("directory_sync_configure_description")}</p>
             </div>
-            <fieldset className="space-y-6 py-2">
+            <fieldset className="stack-y-6 py-2">
               <Controller
                 control={form.control}
                 name="name"
diff --git a/packages/features/ee/dsync/components/DirectoryInfo.tsx b/packages/features/ee/dsync/components/DirectoryInfo.tsx
index a4b05b1a69..473c0ad6ce 100644
--- a/packages/features/ee/dsync/components/DirectoryInfo.tsx
+++ b/packages/features/ee/dsync/components/DirectoryInfo.tsx
@@ -10,7 +10,7 @@ const DirectoryInfo = ({ directory }: { directory: Directory }) => {
   const { t } = useLocale();
 
   return (
-    <div className="space-y-8">
+    <div className="stack-y-8">
       <p className="text-default text-sm font-normal leading-6 dark:text-gray-300">
         {t("directory_sync_info_description")}
       </p>
diff --git a/packages/features/ee/dsync/components/GroupNameCell.tsx b/packages/features/ee/dsync/components/GroupNameCell.tsx
index bcd4eccde9..ff1cd860de 100644
--- a/packages/features/ee/dsync/components/GroupNameCell.tsx
+++ b/packages/features/ee/dsync/components/GroupNameCell.tsx
@@ -76,7 +76,7 @@ const GroupNameCell = ({ groupNames, teamId, directoryId }: GroupNameCellProps)
       {groupNames.map((name) => (
         <Badge variant="gray" size="lg" key={name} className="min-h-8 h-auto py-2">
           <div className="flex min-w-0 items-center gap-2">
-            <p className="min-w-0 break-words">{name}</p>
+            <p className="min-w-0 wrap-break-word">{name}</p>
             <div className="hover:bg-emphasis shrink-0 rounded p-1">
               <Icon name="x" className="h-4 w-4 stroke-[3px]" onClick={() => removeGroupName(name)} />
             </div>
diff --git a/packages/features/ee/organizations/components/AboutOrganizationForm.tsx b/packages/features/ee/organizations/components/AboutOrganizationForm.tsx
index f3caa77a44..edd294f5af 100644
--- a/packages/features/ee/organizations/components/AboutOrganizationForm.tsx
+++ b/packages/features/ee/organizations/components/AboutOrganizationForm.tsx
@@ -34,7 +34,7 @@ export const AboutOrganizationForm = () => {
     <>
       <Form
         form={aboutOrganizationFormMethods}
-        className="space-y-5"
+        className="stack-y-5"
         handleSubmit={(values) => {
           setLogo(values.logo);
           setBio(values.bio);
diff --git a/packages/features/ee/organizations/components/AdminOnboardingHandover.tsx b/packages/features/ee/organizations/components/AdminOnboardingHandover.tsx
index cc5152d168..5e1266d059 100644
--- a/packages/features/ee/organizations/components/AdminOnboardingHandover.tsx
+++ b/packages/features/ee/organizations/components/AdminOnboardingHandover.tsx
@@ -31,7 +31,7 @@ export const AdminOnboardingHandover = () => {
   const onboardingUrl = `${WEBAPP_URL}/settings/organizations/new/resume?onboardingId=${onboardingId}`;
 
   return (
-    <div className="space-y-6">
+    <div className="stack-y-6">
       {/* Instructions Card */}
       <div className="bg-subtle rounded-lg p-6">
         <h3 className="text-emphasis mb-2 text-lg font-medium">{t("next_steps")}</h3>
@@ -40,7 +40,7 @@ export const AdminOnboardingHandover = () => {
           setup:
         </p>
 
-        <div className="space-y-3">
+        <div className="stack-y-3">
           <div className="bg-default flex items-center gap-2 rounded-md border p-3">
             <code className="text-default flex-1 truncate font-mono text-sm" data-testid="onboarding-url">
               {onboardingUrl}
diff --git a/packages/features/ee/organizations/components/CreateANewOrganizationForm.tsx b/packages/features/ee/organizations/components/CreateANewOrganizationForm.tsx
index 0d4fb27f01..d7516ada8c 100644
--- a/packages/features/ee/organizations/components/CreateANewOrganizationForm.tsx
+++ b/packages/features/ee/organizations/components/CreateANewOrganizationForm.tsx
@@ -115,7 +115,7 @@ const CreateANewOrganizationFormChild = ({ session }: { session: Ensure<SessionC
     <>
       <Form
         form={newOrganizationFormMethods}
-        className="space-y-5"
+        className="stack-y-5"
         id="createOrg"
         handleSubmit={async (v) => {
           if (!needToCreateOnboarding) {
@@ -325,7 +325,7 @@ const CreateANewOrganizationFormChild = ({ session }: { session: Ensure<SessionC
         {/* This radio group does nothing - its just for visual purposes */}
         {isBillingEnabled && !isAdmin && (
           <>
-            <div className="bg-subtle space-y-5  rounded-lg p-5">
+            <div className="bg-subtle stack-y-5  rounded-lg p-5">
               <h3 className="font-cal text-default text-lg font-semibold leading-4">
                 Upgrade to Organizations
               </h3>
diff --git a/packages/features/ee/organizations/components/TeamInviteFromOrg.tsx b/packages/features/ee/organizations/components/TeamInviteFromOrg.tsx
index 48ee050c49..da3a19a67d 100644
--- a/packages/features/ee/organizations/components/TeamInviteFromOrg.tsx
+++ b/packages/features/ee/organizations/components/TeamInviteFromOrg.tsx
@@ -29,12 +29,12 @@ export default function TeamInviteFromOrg({
   });
 
   return (
-    <div className="bg-muted border-subtle flex flex-col rounded-md border p-4">
+    <div className="bg-cal-muted border-subtle flex flex-col rounded-md border p-4">
       <div className="-my-1">
         <TextField placeholder="Search..." onChange={(e) => setSearchQuery(e.target.value)} />
       </div>
       <hr className="border-subtle -mx-4 mt-2" />
-      <div className="scrollbar min-h-48 flex max-h-48 flex-col space-y-0.5 overflow-y-scroll pt-2">
+      <div className="scrollbar min-h-48 flex max-h-48 flex-col stack-y-0.5 overflow-y-scroll pt-2">
         <>
           {filteredMembers &&
             filteredMembers.map((member) => {
diff --git a/packages/features/ee/organizations/components/WelcomeToOrganizationsModal.tsx b/packages/features/ee/organizations/components/WelcomeToOrganizationsModal.tsx
index eebb1c27a1..9600dd6646 100644
--- a/packages/features/ee/organizations/components/WelcomeToOrganizationsModal.tsx
+++ b/packages/features/ee/organizations/components/WelcomeToOrganizationsModal.tsx
@@ -31,7 +31,7 @@ export function WelcomeToOrganizationsModal() {
 
   return (
     <Dialog open={isOpen} onOpenChange={(open) => !open && closeModal()}>
-      <DialogContent size="default" className="!p-0 flex flex-col max-h-[95vh]" enableOverflow>
+      <DialogContent size="default" className="flex max-h-[95vh] flex-col !p-0" enableOverflow>
         <div className="flex flex-1 flex-col overflow-y-auto">
           <div className="flex flex-col gap-4 p-6">
             <div className="flex flex-col items-center gap-1">
@@ -136,14 +136,16 @@ export function WelcomeToOrganizationsModal() {
             </div>
 
             <div className="mb-2 flex flex-col gap-2 text-center">
-              <h2 className="font-cal text-emphasis text-2xl leading-none">{t("welcome_to_organizations")}</h2>
+              <h2 className="font-cal text-emphasis text-2xl leading-none">
+                {t("welcome_to_organizations")}
+              </h2>
               <p className="text-default text-sm leading-normal">{t("organizations_welcome_description")}</p>
             </div>
 
             <div className="mb-2 flex flex-col gap-3">
               {features.map((feature) => (
                 <div key={feature} className="flex items-start gap-2">
-                  <Icon name="check" className="text-muted mt-0.5 h-4 w-4 flex-shrink-0" />
+                  <Icon name="check" className="text-muted mt-0.5 h-4 w-4 shrink-0" />
                   <span className="text-default text-sm font-medium leading-tight">{t(feature)}</span>
                 </div>
               ))}
diff --git a/packages/features/ee/organizations/pages/components/OtherTeamListItem.tsx b/packages/features/ee/organizations/pages/components/OtherTeamListItem.tsx
index 43cb8873e2..d92c59c5eb 100644
--- a/packages/features/ee/organizations/pages/components/OtherTeamListItem.tsx
+++ b/packages/features/ee/organizations/pages/components/OtherTeamListItem.tsx
@@ -61,7 +61,7 @@ export default function OtherTeamListItem(props: Props) {
 
   return (
     <li>
-      <div className="hover:bg-muted group flex items-center justify-between transition">
+      <div className="hover:bg-cal-muted group flex items-center justify-between transition">
         {teamInfo}
         <div className="px-5 py-5">
           <div className="flex space-x-2 rtl:space-x-reverse">
@@ -88,7 +88,7 @@ export default function OtherTeamListItem(props: Props) {
               <Dropdown>
                 <DropdownMenuTrigger asChild>
                   <Button
-                    className="radix-state-open:rounded-r-md"
+                    className="ltr:radix-state-open:rounded-r-(--btn-group-radius) rtl:radix-state-open:rounded-l-(--btn-group-radius)"
                     type="button"
                     color="secondary"
                     variant="icon"
diff --git a/packages/features/ee/organizations/pages/settings/admin-api.tsx b/packages/features/ee/organizations/pages/settings/admin-api.tsx
index 6da5ea437f..43ae635c55 100644
--- a/packages/features/ee/organizations/pages/settings/admin-api.tsx
+++ b/packages/features/ee/organizations/pages/settings/admin-api.tsx
@@ -37,7 +37,7 @@ export const AdminAPIView = () => {
           features={features}
           background="/tips/enterprise"
           buttons={
-            <div className="space-y-2 rtl:space-x-reverse sm:space-x-2">
+            <div className="stack-y-2 rtl:space-x-reverse sm:space-x-2">
               <ButtonGroup>
                 <Button color="primary" href="https://cal.com/sales" target="_blank">
                   {t("contact_sales")}
diff --git a/packages/features/ee/organizations/pages/settings/admin/AdminOrgEditPage.tsx b/packages/features/ee/organizations/pages/settings/admin/AdminOrgEditPage.tsx
index 00bdb158a6..e43559d63a 100644
--- a/packages/features/ee/organizations/pages/settings/admin/AdminOrgEditPage.tsx
+++ b/packages/features/ee/organizations/pages/settings/admin/AdminOrgEditPage.tsx
@@ -61,7 +61,7 @@ export const OrgForm = ({
   };
 
   return (
-    <Form form={form} className="space-y-4" handleSubmit={onSubmit}>
+    <Form form={form} className="stack-y-4" handleSubmit={onSubmit}>
       <TextField label="Name" placeholder="example" required {...form.register("name")} />
       <TextField label="Slug" placeholder="example" required {...form.register("slug")} />
       <p className="text-default mt-2 text-sm">
diff --git a/packages/features/ee/organizations/pages/settings/admin/AdminOrgPage.tsx b/packages/features/ee/organizations/pages/settings/admin/AdminOrgPage.tsx
index d13d059f1f..5b98a031c7 100644
--- a/packages/features/ee/organizations/pages/settings/admin/AdminOrgPage.tsx
+++ b/packages/features/ee/organizations/pages/settings/admin/AdminOrgPage.tsx
@@ -251,7 +251,7 @@ const DeleteOrgDialog = ({
         cancelBtnText={t("cancel")}
         variety="danger"
         onConfirm={onConfirm}>
-        <ul className="ml-4 mt-5 list-disc space-y-2">
+        <ul className="ml-4 mt-5 list-disc stack-y-2">
           <li>{t("admin_delete_organization_description_1")}</li>
           <li>{t("admin_delete_organization_description_2")}</li>
           <li>{t("admin_delete_organization_description_3")}</li>
diff --git a/packages/features/ee/organizations/pages/settings/admin/WorkspacePlatformPage.tsx b/packages/features/ee/organizations/pages/settings/admin/WorkspacePlatformPage.tsx
index 92bb6ab3d4..8e7aa1cc16 100644
--- a/packages/features/ee/organizations/pages/settings/admin/WorkspacePlatformPage.tsx
+++ b/packages/features/ee/organizations/pages/settings/admin/WorkspacePlatformPage.tsx
@@ -137,7 +137,7 @@ function EmptyState({ onAdd }: Pick<Props, "onAdd">) {
   const { t } = useLocale();
 
   return (
-    <div className="flex flex-col items-center justify-center space-y-4 py-10">
+    <div className="flex flex-col items-center justify-center stack-y-4 py-10">
       <p className="text-gray-500">{t("no_workspace_platforms")}</p>
       <Button color="secondary" onClick={onAdd}>
         {t("add")}
@@ -185,7 +185,7 @@ function ServiceAccountFields() {
   const form = useFormContext();
 
   return (
-    <div className="space-y-4">
+    <div className="stack-y-4">
       <TextAreaField
         required
         label={t("service_account_key")}
@@ -421,7 +421,7 @@ function PlatformFormFields({ isCreate }: Pick<Props, "isCreate">) {
   const form = useFormContext();
 
   return (
-    <div className="space-y-4">
+    <div className="stack-y-4">
       <TextField required label={t("name")} {...form.register("name")} />
       <TextAreaField required label={t("description")} {...form.register("description")} />
       {isCreate && <TextField required label={t("slug")} {...form.register("slug")} />}
diff --git a/packages/features/ee/organizations/pages/settings/attributes/AttributesForm.tsx b/packages/features/ee/organizations/pages/settings/attributes/AttributesForm.tsx
index d42834c2b1..33b703a32c 100644
--- a/packages/features/ee/organizations/pages/settings/attributes/AttributesForm.tsx
+++ b/packages/features/ee/organizations/pages/settings/attributes/AttributesForm.tsx
@@ -212,7 +212,7 @@ const GroupOption = ({
     <div key={option.id}>
       <div className="mb-2 flex items-center gap-2" key={option.id}>
         <div className="flex w-full items-center justify-between gap-2">
-          <Input {...form.register(`options.${index}.value`)} className="!mb-0 w-36" />
+          <Input {...form.register(`options.${index}.value`)} className="mb-0! w-36" />
           <SelectField
             isMulti
             placeholder={t("choose_an_option")}
@@ -362,7 +362,7 @@ export function AttributeForm({ initialValues, onSubmit, header }: AttributeForm
   return (
     <Form
       form={form}
-      className="flex flex-col space-y-4 lg:space-y-6"
+      className="flex flex-col stack-y-4 lg:stack-y-6"
       handleSubmit={(values) => {
         onSubmit({
           ...values,
@@ -423,7 +423,7 @@ export function AttributeForm({ initialValues, onSubmit, header }: AttributeForm
         )}
       />
       {["SINGLE_SELECT", "MULTI_SELECT"].includes(watchedType) && (
-        <div className="bg-muted border-muted mt-6 rounded-lg border p-6">
+        <div className="bg-cal-muted border-muted mt-6 rounded-lg border p-6">
           <div className="flex flex-col gap-2">
             <div>
               <Label>{t("options")}</Label>
diff --git a/packages/features/ee/organizations/pages/settings/attributes/attributes-create-view.tsx b/packages/features/ee/organizations/pages/settings/attributes/attributes-create-view.tsx
index faaff41451..06f9b166cc 100644
--- a/packages/features/ee/organizations/pages/settings/attributes/attributes-create-view.tsx
+++ b/packages/features/ee/organizations/pages/settings/attributes/attributes-create-view.tsx
@@ -61,7 +61,7 @@ function CreateAttributeHeader(props: { isPending: boolean }) {
 
   return (
     <>
-      <div className="mb-6 mt-6 flex flex-grow items-center justify-between lg:mt-12">
+      <div className="mb-6 mt-6 flex grow items-center justify-between lg:mt-12">
         <div className="-ml-12 flex items-center gap-4">
           <Button
             variant="icon"
diff --git a/packages/features/ee/organizations/pages/settings/attributes/attributes-edit-view.tsx b/packages/features/ee/organizations/pages/settings/attributes/attributes-edit-view.tsx
index 76f6a2d061..6605b2aa23 100644
--- a/packages/features/ee/organizations/pages/settings/attributes/attributes-edit-view.tsx
+++ b/packages/features/ee/organizations/pages/settings/attributes/attributes-edit-view.tsx
@@ -83,7 +83,7 @@ function EditAttributeHeader(props: { isPending: boolean }) {
 
   return (
     <>
-      <div className="mb-6 mt-6 flex flex-grow items-center justify-between lg:mt-12">
+      <div className="mb-6 mt-6 flex grow items-center justify-between lg:mt-12">
         <div className="-ml-12 flex items-center gap-4">
           <Button
             variant="icon"
diff --git a/packages/features/ee/organizations/pages/settings/delegationCredential.tsx b/packages/features/ee/organizations/pages/settings/delegationCredential.tsx
index c448b2e810..b384e1a3b6 100644
--- a/packages/features/ee/organizations/pages/settings/delegationCredential.tsx
+++ b/packages/features/ee/organizations/pages/settings/delegationCredential.tsx
@@ -54,7 +54,7 @@ function getWorkspacePlatformOptions(workspacePlatforms: WorkspacePlatform[]) {
 const SkeletonLoader = () => {
   return (
     <SkeletonContainer>
-      <div className="divide-subtle border-subtle space-y-6 rounded-b-lg border border-t-0 px-6 py-4">
+      <div className="divide-subtle border-subtle stack-y-6 rounded-b-lg border border-t-0 px-6 py-4">
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
       </div>
@@ -247,7 +247,7 @@ function DelegationFormFields({
   const { t } = useLocale();
   const form = useFormContext();
   return (
-    <div className="space-y-4">
+    <div className="stack-y-4">
       <TextField label={t("domain")} {...form.register("domain")} />
       <Controller
         name="workspacePlatformSlug"
@@ -405,7 +405,7 @@ function DelegationCredentialList() {
     <div>
       {!!delegations?.length ? (
         <>
-          <ul className="space-y-2 [&>*:last-child]:rounded-b-xl">
+          <ul className="stack-y-2 [&>*:last-child]:rounded-b-xl">
             {delegations.map(
               (delegation) =>
                 delegation && (
@@ -474,7 +474,7 @@ function MembersThatWillBeAffectedOnDisablingDelegationCredential({
         <div>{t("loading")}</div>
       ) : affectedMembers?.length ? (
         <>
-          <ul className="list-disc space-y-1 p-1 pl-5 sm:w-80">
+          <ul className="list-disc stack-y-1 p-1 pl-5 sm:w-80">
             {affectedMembers.slice(0, 5).map((m) => (
               <li className="text-muted text-sm" key={m.email}>
                 {m.name ? `${m.name} (${m.email})` : m.email}
diff --git a/packages/features/ee/organizations/pages/settings/general.tsx b/packages/features/ee/organizations/pages/settings/general.tsx
index 2161d8e6dc..7de1e1418d 100644
--- a/packages/features/ee/organizations/pages/settings/general.tsx
+++ b/packages/features/ee/organizations/pages/settings/general.tsx
@@ -28,7 +28,7 @@ import { NoSlotsNotificationSwitch } from "../components/NoSlotsNotificationSwit
 const SkeletonLoader = () => {
   return (
     <SkeletonContainer>
-      <div className="mb-8 mt-6 space-y-6">
+      <div className="mb-8 mt-6 stack-y-6">
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
diff --git a/packages/features/ee/organizations/pages/settings/other-team-profile-view.tsx b/packages/features/ee/organizations/pages/settings/other-team-profile-view.tsx
index 0f754af683..16e45dda7d 100644
--- a/packages/features/ee/organizations/pages/settings/other-team-profile-view.tsx
+++ b/packages/features/ee/organizations/pages/settings/other-team-profile-view.tsx
@@ -257,7 +257,7 @@ const OtherTeamProfileView = () => {
             </Form>
           ) : (
             <div className="flex">
-              <div className="flex-grow">
+              <div className="grow">
                 <div>
                   <Label className="text-emphasis">{t("team_name")}</Label>
                   <p className="text-default text-sm">{team?.name}</p>
@@ -266,7 +266,8 @@ const OtherTeamProfileView = () => {
                   <>
                     <Label className="text-emphasis mt-5">{t("about")}</Label>
                     <div
-                      className="  text-subtle break-words text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+                      className="  text-subtle wrap-break-word text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+                      // eslint-disable-next-line react/no-danger
                       dangerouslySetInnerHTML={{ __html: markdownToSafeHTML(team.bio) }}
                     />
                   </>
diff --git a/packages/features/ee/organizations/pages/settings/privacy.tsx b/packages/features/ee/organizations/pages/settings/privacy.tsx
index 447d4ac8e3..ca029baab2 100644
--- a/packages/features/ee/organizations/pages/settings/privacy.tsx
+++ b/packages/features/ee/organizations/pages/settings/privacy.tsx
@@ -36,7 +36,7 @@ const PrivacyView = ({
 
   return (
     <LicenseRequired>
-      <div className="space-y-8">
+      <div className="stack-y-8">
         <MakeTeamPrivateSwitch
           isOrg={true}
           teamId={currentOrg.id}
diff --git a/packages/features/ee/organizations/pages/settings/profile.tsx b/packages/features/ee/organizations/pages/settings/profile.tsx
index a88100a1c7..ec84ac03d0 100644
--- a/packages/features/ee/organizations/pages/settings/profile.tsx
+++ b/packages/features/ee/organizations/pages/settings/profile.tsx
@@ -60,7 +60,7 @@ type FormValues = {
 const SkeletonLoader = () => {
   return (
     <SkeletonContainer>
-      <div className="border-subtle space-y-6 rounded-b-xl border border-t-0 px-4 py-8">
+      <div className="border-subtle stack-y-6 rounded-b-xl border border-t-0 px-4 py-8">
         <div className="flex items-center">
           <SkeletonAvatar className="me-4 mt-0 h-16 w-16 px-4" />
           <SkeletonButton className="h-6 w-32 rounded-md p-5" />
@@ -140,7 +140,7 @@ const OrgProfileView = ({
           </>
         ) : (
           <div className="border-subtle flex rounded-b-md border border-t-0 px-4 py-8 sm:px-6">
-            <div className="flex-grow">
+            <div className="grow">
               <div>
                 <Label className="text-emphasis">{t("organization_name")}</Label>
                 <p className="text-default text-sm">{currentOrganisation?.name}</p>
@@ -149,7 +149,7 @@ const OrgProfileView = ({
                 <>
                   <Label className="text-emphasis mt-5">{t("about")}</Label>
                   <div
-                    className="  text-subtle break-words text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+                    className="  text-subtle wrap-break-word text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
                     // eslint-disable-next-line react/no-danger
                     dangerouslySetInnerHTML={{
                       __html: markdownToSafeHTML(currentOrganisation.bio || ""),
diff --git a/packages/features/ee/payments/components/Payment.tsx b/packages/features/ee/payments/components/Payment.tsx
index bb07084262..f019ae8b7c 100644
--- a/packages/features/ee/payments/components/Payment.tsx
+++ b/packages/features/ee/payments/components/Payment.tsx
@@ -80,7 +80,7 @@ export const PaymentFormComponent = (
         <PaymentElement options={paymentElementOptions} onChange={(_) => onPaymentElementChange()} />
       </div>
       {paymentOption === "HOLD" && (
-        <div className="bg-info mb-5 mt-2 rounded-md p-3">
+        <div className="bg-cal-info mb-5 mt-2 rounded-md p-3">
           <CheckboxField
             description={t("acknowledge_booking_no_show_fee", {
               amount: props.payment.amount / 100,
diff --git a/packages/features/ee/platform/components/CreateANewPlatformForm.tsx b/packages/features/ee/platform/components/CreateANewPlatformForm.tsx
index 1be82191fa..48344baa89 100644
--- a/packages/features/ee/platform/components/CreateANewPlatformForm.tsx
+++ b/packages/features/ee/platform/components/CreateANewPlatformForm.tsx
@@ -85,7 +85,7 @@ const CreateANewPlatformFormChild = ({ session }: { session: Ensure<SessionConte
     <>
       <Form
         form={newOrganizationFormMethods}
-        className="space-y-5"
+        className="stack-y-5"
         id="createOrg"
         handleSubmit={(v) => {
           if (!createOrganizationMutation.isPending) {
diff --git a/packages/features/ee/sso/components/ConnectionInfo.tsx b/packages/features/ee/sso/components/ConnectionInfo.tsx
index 5daca906e4..687b0e474b 100644
--- a/packages/features/ee/sso/components/ConnectionInfo.tsx
+++ b/packages/features/ee/sso/components/ConnectionInfo.tsx
@@ -49,7 +49,7 @@ export default function ConnectionInfo({
         <OIDCInfo callbackUrl={connection.callbackUrl} />
       )}
       <hr className="border-subtle my-6" />
-      <div className="flex flex-col space-y-3">
+      <div className="flex flex-col stack-y-3">
         <Label>{t("danger_zone")}</Label>
         <Dialog>
           <div>
@@ -83,7 +83,7 @@ const SAMLInfo = ({ acsUrl, entityId }: { acsUrl: string | null; entityId: strin
   }
 
   return (
-    <div className="space-y-6">
+    <div className="stack-y-6">
       <div className="flex flex-col">
         <div className="flex">
           <Label>ACS URL</Label>
diff --git a/packages/features/ee/sso/components/OIDCConnection.tsx b/packages/features/ee/sso/components/OIDCConnection.tsx
index 87855acd67..0e78a65fc2 100644
--- a/packages/features/ee/sso/components/OIDCConnection.tsx
+++ b/packages/features/ee/sso/components/OIDCConnection.tsx
@@ -37,7 +37,7 @@ export default function OIDCConnection({
           </p>
         </div>
         {!connection && (
-          <div className="flex-shrink-0 pt-3 sm:ml-auto sm:pl-3 sm:pt-0">
+          <div className="shrink-0 pt-3 sm:ml-auto sm:pl-3 sm:pt-0">
             <Button data-testid="sso-oidc-configure" color="secondary" onClick={() => setOpenModal(true)}>
               {t("configure")}
             </Button>
@@ -97,7 +97,7 @@ const CreateConnectionDialog = ({
             {t("sso_oidc_configuration_title")}
           </h2>
           <p className="text-subtle mb-4 mt-1 text-sm">{t("sso_oidc_configuration_description")}</p>
-          <div className="space-y-5">
+          <div className="stack-y-5">
             <Controller
               control={form.control}
               name="clientId"
diff --git a/packages/features/ee/sso/components/SAMLConnection.tsx b/packages/features/ee/sso/components/SAMLConnection.tsx
index d55522a64e..6e233f41c6 100644
--- a/packages/features/ee/sso/components/SAMLConnection.tsx
+++ b/packages/features/ee/sso/components/SAMLConnection.tsx
@@ -35,7 +35,7 @@ export default function SAMLConnection({
           </p>
         </div>
         {!connection && (
-          <div className="flex-shrink-0 pt-3 sm:ml-auto sm:pl-3 sm:pt-0">
+          <div className="shrink-0 pt-3 sm:ml-auto sm:pl-3 sm:pt-0">
             <Button color="secondary" onClick={() => setOpenModal(true)}>
               Configure
             </Button>
diff --git a/packages/features/ee/sso/components/SSOConfiguration.tsx b/packages/features/ee/sso/components/SSOConfiguration.tsx
index 0835b54cec..f893518f0c 100644
--- a/packages/features/ee/sso/components/SSOConfiguration.tsx
+++ b/packages/features/ee/sso/components/SSOConfiguration.tsx
@@ -10,7 +10,7 @@ import { SkeletonText, SkeletonContainer } from "@calcom/ui/components/skeleton"
 const SkeletonLoader = () => {
   return (
     <SkeletonContainer>
-      <div className="divide-subtle border-subtle space-y-6 rounded-b-xl border border-t-0 px-6 py-4">
+      <div className="divide-subtle border-subtle stack-y-6 rounded-b-xl border border-t-0 px-6 py-4">
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
@@ -40,7 +40,7 @@ export default function SSOConfiguration({ teamId }: { teamId: number | null })
   if (!connection) {
     return (
       <LicenseRequired>
-        <div className="[&>*]:border-subtle flex flex-col [&>*:last-child]:rounded-b-xl [&>*]:border [&>*]:border-t-0 [&>*]:px-4 [&>*]:py-6 [&>*]:sm:px-6">
+        <div className="[&>*]:border-subtle flex flex-col [&>*:last-child]:rounded-b-xl *:border *:border-t-0 *:px-4 *:py-6 *:sm:px-6">
           <SAMLConnection teamId={teamId} connection={null} />
           <OIDCConnection teamId={teamId} connection={null} />
         </div>
@@ -50,7 +50,7 @@ export default function SSOConfiguration({ teamId }: { teamId: number | null })
 
   return (
     <LicenseRequired>
-      <div className="[&>*]:border-subtle flex flex-col [&>*:last-child]:rounded-b-xl [&>*]:border [&>*]:border-t-0 [&>*]:px-4 [&>*]:py-6 [&>*]:sm:px-6">
+      <div className="[&>*]:border-subtle flex flex-col [&>*:last-child]:rounded-b-xl *:border *:border-t-0 *:px-4 *:py-6 *:sm:px-6">
         {connection.type === "saml" ? (
           <SAMLConnection teamId={teamId} connection={connection} />
         ) : (
diff --git a/packages/features/ee/support/components/ContactMenuItem.tsx b/packages/features/ee/support/components/ContactMenuItem.tsx
index 66e25f924f..02c7e83a22 100644
--- a/packages/features/ee/support/components/ContactMenuItem.tsx
+++ b/packages/features/ee/support/components/ContactMenuItem.tsx
@@ -37,7 +37,7 @@ export default function ContactMenuItem(props: ContactMenuItem) {
         {t("community_support")}{" "}
         <Icon
           name="external-link"
-          className="group-hover:text-subtle text-muted ml-1 mt-px h-4 w-4 flex-shrink-0 ltr:mr-3"
+          className="group-hover:text-subtle text-muted ml-1 mt-px h-4 w-4 shrink-0 ltr:mr-3"
         />
       </a>
     </>
diff --git a/packages/features/ee/support/components/IntercomContactForm.tsx b/packages/features/ee/support/components/IntercomContactForm.tsx
index 92a86145ad..46a2da72b8 100644
--- a/packages/features/ee/support/components/IntercomContactForm.tsx
+++ b/packages/features/ee/support/components/IntercomContactForm.tsx
@@ -110,11 +110,11 @@ export const IntercomContactForm = () => {
   };
 
   return (
-    <div className="fixed bottom-[1rem] right-[1rem] z-50 [&_[data-radix-popper-content-wrapper]]:!bottom-[1rem]">
+    <div className="fixed bottom-4 right-4 z-50 **:data-radix-popper-content-wrapper:bottom-4!">
       <Popover open={isOpen} onOpenChange={setIsOpen}>
         <PopoverTrigger
           asChild
-          className={classNames("enabled:hover:bg-subtle bg-subtle shadow-none", !showTrigger && "!hidden")}>
+          className={classNames("enabled:hover:bg-subtle bg-subtle shadow-none", !showTrigger && "hidden!")}>
           <Button
             onClick={() => setIsOpen(true)}
             className="bg-subtle text-emphasis flex h-12 w-12 items-center justify-center rounded-full border-none">
@@ -126,7 +126,7 @@ export const IntercomContactForm = () => {
           ref={contentRef}
           style={{ maxWidth: "450px", maxHeight: "650px" }}
           className={classNames(
-            "!bg-muted no-scrollbar mb-2 w-screen overflow-hidden overflow-y-scroll px-6 py-4 md:w-[450px]",
+            "!bg-cal-muted no-scrollbar mb-2 w-screen overflow-hidden overflow-y-scroll px-6 py-4 md:w-[450px]",
             showTrigger ? "mr-8" : "mr-0"
           )}>
           <div className="flex w-full justify-between">
diff --git a/packages/features/ee/teams/components/EditMemberSheet.tsx b/packages/features/ee/teams/components/EditMemberSheet.tsx
index b5bcbb1f75..61bbb6693c 100644
--- a/packages/features/ee/teams/components/EditMemberSheet.tsx
+++ b/packages/features/ee/teams/components/EditMemberSheet.tsx
@@ -189,7 +189,7 @@ export function EditMemberSheet({
         setEditMode(false);
         dispatch({ type: "CLOSE_MODAL" });
       }}>
-      <SheetContent className="bg-muted">
+      <SheetContent className="bg-cal-muted">
         {!isPending && !isLoadingRoles ? (
           <Form form={form} handleSubmit={changeRole} className="flex h-full flex-col">
             <SheetHeader showCloseButton={false} className="w-full">
@@ -216,8 +216,8 @@ export function EditMemberSheet({
                 </Skeleton>
               </div>
             </SheetHeader>
-            <SheetBody className="flex flex-col space-y-4 p-4">
-              <div className="mb-4 flex flex-col space-y-4">
+            <SheetBody className="flex flex-col stack-y-4 p-4">
+              <div className="mb-4 flex flex-col stack-y-4">
                 <h3 className="text-emphasis mb-1 text-base font-semibold">{t("profile")}</h3>
                 <DisplayInfo label="Cal" value={bookingLink} icon="external-link" />
                 <DisplayInfo label={t("email")} value={selectedUser.email} icon="at-sign" />
diff --git a/packages/features/ee/teams/components/InternalNotePresetsView.tsx b/packages/features/ee/teams/components/InternalNotePresetsView.tsx
index 8bb4e4ae07..f01c4543f0 100644
--- a/packages/features/ee/teams/components/InternalNotePresetsView.tsx
+++ b/packages/features/ee/teams/components/InternalNotePresetsView.tsx
@@ -119,9 +119,9 @@ const InternalNotePresetsView = ({ team }: ProfileViewProps) => {
                 isChecked && "rounded-b-none"
               )}>
               <div className="border-subtle border border-y-0 p-6">
-                <div className="flex flex-col space-y-4" ref={animateRef}>
+                <div className="flex flex-col stack-y-4" ref={animateRef}>
                   {fields.map((field, index) => (
-                    <div key={field.id} className="space-y-2">
+                    <div key={field.id} className="stack-y-2">
                       <div className="flex items-center space-x-2">
                         <Controller
                           name={`presets.${index}.name`}
@@ -131,7 +131,7 @@ const InternalNotePresetsView = ({ team }: ProfileViewProps) => {
                               type="text"
                               {...field}
                               placeholder={t("internal_booking_note")}
-                              className="!mb-0"
+                              className="mb-0!"
                             />
                           )}
                         />
@@ -154,7 +154,7 @@ const InternalNotePresetsView = ({ team }: ProfileViewProps) => {
                               type="text"
                               {...field}
                               placeholder={t("internal_note_cancellation_reason")}
-                              className="!mb-0"
+                              className="mb-0!"
                             />
                           )}
                         />
diff --git a/packages/features/ee/teams/components/MemberChangeRoleModal.tsx b/packages/features/ee/teams/components/MemberChangeRoleModal.tsx
index d4119338e7..8b8411201f 100644
--- a/packages/features/ee/teams/components/MemberChangeRoleModal.tsx
+++ b/packages/features/ee/teams/components/MemberChangeRoleModal.tsx
@@ -159,7 +159,7 @@ export default function MemberChangeRoleModal(props: {
           <div className="mb-4 sm:flex sm:items-start">
             <div className="text-center sm:text-left">
               <h3
-                className="text-emphasis !font-cal text-semibold leading-20 text-xl font-medium"
+                className="text-emphasis !font-cal text-semibold text-xl font-medium"
                 id="modal-title">
                 {t("change_member_role")}
               </h3>
diff --git a/packages/features/ee/teams/components/MemberInvitationModal.tsx b/packages/features/ee/teams/components/MemberInvitationModal.tsx
index cca733f845..edcc24edd8 100644
--- a/packages/features/ee/teams/components/MemberInvitationModal.tsx
+++ b/packages/features/ee/teams/components/MemberInvitationModal.tsx
@@ -236,7 +236,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
         </div>
 
         <Form form={newMemberFormMethods} handleSubmit={(values) => props.onSubmit(values, resetFields)}>
-          <div className="mb-10 mt-6 space-y-6">
+          <div className="mb-10 mt-6 stack-y-6">
             {/* Individual Invite */}
             {modalImportMode === "INDIVIDUAL" && (
               <Controller
@@ -270,7 +270,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
             )}
             {/* Bulk Invite */}
             {modalImportMode === "BULK" && (
-              <div className="bg-muted flex flex-col rounded-md p-4">
+              <div className="bg-cal-muted flex flex-col rounded-md p-4">
                 <Controller
                   name="emailOrUsername"
                   control={newMemberFormMethods.control}
@@ -399,7 +399,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
           </div>
           <DialogFooter showDivider>
             {!disableCopyLink && (
-              <div className="flex-grow">
+              <div className="grow">
                 <Button
                   type="button"
                   color="minimal"
diff --git a/packages/features/ee/teams/components/MemberList.tsx b/packages/features/ee/teams/components/MemberList.tsx
index 557d629a7d..4b65a33653 100644
--- a/packages/features/ee/teams/components/MemberList.tsx
+++ b/packages/features/ee/teams/components/MemberList.tsx
@@ -490,7 +490,7 @@ function MemberListContent(props: Props) {
                       <Dropdown>
                         <DropdownMenuTrigger asChild>
                           <Button
-                            className="radix-state-open:rounded-r-md"
+                            className="ltr:radix-state-open:rounded-r-(--btn-group-radius) rtl:radix-state-open:rounded-l-(--btn-group-radius)"
                             color="secondary"
                             variant="icon"
                             StartIcon="ellipsis"
@@ -734,12 +734,12 @@ function MemberListContent(props: Props) {
           </>
         }>
         {numberOfSelectedRows >= 2 && dynamicLinkVisible && (
-          <DataTableSelectionBar.Root className="!bottom-[7.3rem] md:!bottom-32">
+          <DataTableSelectionBar.Root className="bottom-[7.3rem]! md:bottom-32!">
             <DynamicLink table={table} domain={domain} />
           </DataTableSelectionBar.Root>
         )}
         {numberOfSelectedRows > 0 && (
-          <DataTableSelectionBar.Root className="!bottom-16 justify-center md:w-max">
+          <DataTableSelectionBar.Root className="bottom-16! justify-center md:w-max">
             <p className="text-brand-subtle px-2 text-center text-xs leading-none sm:text-sm sm:font-medium">
               {t("number_selected", { count: numberOfSelectedRows })}
             </p>
diff --git a/packages/features/ee/teams/components/SkeletonloaderTeamList.tsx b/packages/features/ee/teams/components/SkeletonloaderTeamList.tsx
index f4a96a7726..cc9a9f7ce4 100644
--- a/packages/features/ee/teams/components/SkeletonloaderTeamList.tsx
+++ b/packages/features/ee/teams/components/SkeletonloaderTeamList.tsx
@@ -21,7 +21,7 @@ function SkeletonItem() {
     <li className="flex w-full items-center justify-between">
       <div className="flex items-center space-x-3 p-5 rtl:space-x-reverse">
         <SkeletonText className="h-8 w-8 rounded-full" />
-        <div className="flex flex-col space-y-2">
+        <div className="flex flex-col stack-y-2">
           <SkeletonText className="h-4 w-32" />
           <SkeletonText className="h-3 w-24" />
         </div>
diff --git a/packages/features/ee/teams/components/TeamAvailabilityTimes.tsx b/packages/features/ee/teams/components/TeamAvailabilityTimes.tsx
index 8b829b7ff4..765341a099 100644
--- a/packages/features/ee/teams/components/TeamAvailabilityTimes.tsx
+++ b/packages/features/ee/teams/components/TeamAvailabilityTimes.tsx
@@ -54,7 +54,7 @@ export default function TeamAvailabilityTimes(props: Props) {
     : [];
 
   return (
-    <div className={classNames("min-w-60 flex-grow pl-0", props.className)}>
+    <div className={classNames("min-w-60 grow pl-0", props.className)}>
       {props.HeaderComponent}
       {isPending && slots.length === 0 && <SkeletonLoader />}
       {!isPending && slots.length === 0 ? (
@@ -68,7 +68,7 @@ export default function TeamAvailabilityTimes(props: Props) {
         {slots.map((slot) => (
           <div key={slot.time.format()} className="flex flex-row items-center ">
             <a
-              className="min-w-48 border-brand-default text-bookingdarker  bg-default mb-2 mr-3 block flex-grow rounded-md border py-2 text-center font-medium dark:border-transparent dark:bg-gray-600 "
+              className="min-w-48 border-brand-default text-bookingdarker  bg-default mb-2 mr-3 block grow rounded-md border py-2 text-center font-medium dark:border-transparent dark:bg-gray-600 "
               data-testid="time">
               {slot.time.tz(props.selectedTimeZone.toString()).format("HH:mm")}
             </a>
diff --git a/packages/features/ee/teams/components/TeamEventTypeForm.tsx b/packages/features/ee/teams/components/TeamEventTypeForm.tsx
index f1b002bffb..38247e0df5 100644
--- a/packages/features/ee/teams/components/TeamEventTypeForm.tsx
+++ b/packages/features/ee/teams/components/TeamEventTypeForm.tsx
@@ -46,7 +46,7 @@ export const TeamEventTypeForm = ({
 
   return (
     <Form form={form} handleSubmit={handleSubmit}>
-      <div className="mb-6 mt-1 space-y-6">
+      <div className="mb-6 mt-1 stack-y-6">
         <TextField
           type="hidden"
           labelProps={{ style: { display: "none" } }}
diff --git a/packages/features/ee/teams/components/TeamListItem.tsx b/packages/features/ee/teams/components/TeamListItem.tsx
index 251b782867..b67e216ef6 100644
--- a/packages/features/ee/teams/components/TeamListItem.tsx
+++ b/packages/features/ee/teams/components/TeamListItem.tsx
@@ -134,13 +134,13 @@ export default function TeamListItem(props: Props) {
           }}
         />
       )}
-      <div className={classNames("flex items-center  justify-between", !isInvitee && "hover:bg-muted group")}>
+      <div className={classNames("flex items-center  justify-between", !isInvitee && "hover:bg-cal-muted group")}>
         {!isInvitee ? (
           team.slug ? (
             <Link
               data-testid="team-list-item-link"
               href={`/settings/teams/${team.id}/profile`}
-              className="flex-grow cursor-pointer truncate text-sm"
+              className="grow cursor-pointer truncate text-sm"
               title={`${team.name}`}>
               {teamInfo}
             </Link>
@@ -218,7 +218,7 @@ export default function TeamListItem(props: Props) {
                 <Dropdown>
                   <DropdownMenuTrigger asChild>
                     <Button
-                      className="radix-state-open:rounded-r-md"
+                      className="ltr:radix-state-open:rounded-r-(--btn-group-radius) rtl:radix-state-open:rounded-l-(--btn-group-radius)"
                       type="button"
                       color="secondary"
                       variant="icon"
@@ -367,7 +367,7 @@ const TeamPublishSection = ({ children, teamId }: { children: React.ReactNode; t
 
   return (
     <button
-      className="block flex-grow cursor-pointer truncate text-left text-sm"
+      className="block grow cursor-pointer truncate text-left text-sm"
       type="button"
       onClick={() => {
         publishTeamMutation.mutate({ teamId });
diff --git a/packages/features/ee/teams/components/TeamPill.tsx b/packages/features/ee/teams/components/TeamPill.tsx
index 8f6f96de3d..5520e919df 100644
--- a/packages/features/ee/teams/components/TeamPill.tsx
+++ b/packages/features/ee/teams/components/TeamPill.tsx
@@ -16,7 +16,7 @@ export default function TeamPill(props: Props) {
     <div
       className={classNames("text-medium self-center rounded-md px-1.5 py-1 text-xs ltr:mr-1 rtl:ml-1", {
         " bg-subtle text-emphasis": !color,
-        " bg-info text-info": color === "blue",
+        " bg-cal-info text-info": color === "blue",
         " bg-error text-error ": color === "red",
         " bg-attention text-attention": color === "orange",
       })}
diff --git a/packages/features/ee/teams/components/TeamsListing.tsx b/packages/features/ee/teams/components/TeamsListing.tsx
index dc969d64c0..cb09138825 100644
--- a/packages/features/ee/teams/components/TeamsListing.tsx
+++ b/packages/features/ee/teams/components/TeamsListing.tsx
@@ -138,7 +138,7 @@ export function TeamsListing({
           background="/tips/teams"
           buttons={
             !orgId || permissions.canCreateTeam ? (
-              <div className="space-y-2 rtl:space-x-reverse sm:space-x-2">
+              <div className="stack-y-2 rtl:space-x-reverse sm:space-x-2">
                 <ButtonGroup>
                   <Button color="primary" href={`${WEBAPP_URL}/settings/teams/new`}>
                     {t("create_team")}
diff --git a/packages/features/ee/teams/pages/team-profile-view.tsx b/packages/features/ee/teams/pages/team-profile-view.tsx
index 81249a24cd..84096a44e2 100644
--- a/packages/features/ee/teams/pages/team-profile-view.tsx
+++ b/packages/features/ee/teams/pages/team-profile-view.tsx
@@ -66,7 +66,7 @@ type FormValues = z.infer<typeof teamProfileFormSchema>;
 const SkeletonLoader = () => {
   return (
     <SkeletonContainer>
-      <div className="border-subtle space-y-6 rounded-b-xl border border-t-0 px-4 py-8">
+      <div className="border-subtle stack-y-6 rounded-b-xl border border-t-0 px-4 py-8">
         <div className="flex items-center">
           <SkeletonAvatar className="me-4 mt-0 h-16 w-16 px-4" />
           <SkeletonButton className="h-6 w-32 rounded-md p-5" />
@@ -174,7 +174,7 @@ const ProfileView = () => {
         <TeamProfileForm team={team} teamId={teamId} />
       ) : (
         <div className="border-subtle flex rounded-b-xl border border-t-0 px-4 py-8 sm:px-6">
-          <div className="flex-grow">
+          <div className="grow">
             <div>
               <Label className="text-emphasis">{t("team_name")}</Label>
               <p className="text-default text-sm">{team?.name}</p>
@@ -183,7 +183,7 @@ const ProfileView = () => {
               <>
                 <Label className="text-emphasis mt-5">{t("about")}</Label>
                 <div
-                  className="  text-subtle break-words text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
+                  className="  text-subtle wrap-break-word text-sm [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
                   // eslint-disable-next-line react/no-danger
                   dangerouslySetInnerHTML={{ __html: markdownToSafeHTML(team.bio ?? null) }}
                 />
diff --git a/packages/features/ee/users/components/UserForm.tsx b/packages/features/ee/users/components/UserForm.tsx
index 023ad16ebf..5451941639 100644
--- a/packages/features/ee/users/components/UserForm.tsx
+++ b/packages/features/ee/users/components/UserForm.tsx
@@ -118,7 +118,7 @@ export const UserForm = ({
   });
 
   return (
-    <Form form={form} className="space-y-4" handleSubmit={onSubmit}>
+    <Form form={form} className="stack-y-4" handleSubmit={onSubmit}>
       <div className="flex items-center">
         <Controller
           control={form.control}
diff --git a/packages/features/ee/video/MeetingSessionDetailsDialog.tsx b/packages/features/ee/video/MeetingSessionDetailsDialog.tsx
index 681eacb56c..8adf4eca7d 100644
--- a/packages/features/ee/video/MeetingSessionDetailsDialog.tsx
+++ b/packages/features/ee/video/MeetingSessionDetailsDialog.tsx
@@ -41,7 +41,7 @@ const MeetingSessionDetailsSkeleton = () => {
           </div>
           <div className="mt-4">
             <SkeletonText className="mb-2 h-5 w-20" />
-            <div className="space-y-2">
+            <div className="stack-y-2">
               {[...Array(2)].map((_, i) => (
                 <div key={i} className="border-subtle rounded border p-2 text-sm">
                   <div className="flex justify-between">
@@ -138,7 +138,7 @@ const MeetingSessionDetailsList = ({ roomName }: { roomName: string }) => {
           {session.participants && session.participants.length > 0 && (
             <div className="mt-4">
               <h4 className="mb-2 text-sm font-medium">{t("participants")}:</h4>
-              <div className="space-y-2">
+              <div className="stack-y-2">
                 {session.participants.map((participant: Participant) => (
                   <div key={participant.participant_id} className="border-subtle rounded border p-2 text-sm">
                     <div className="flex justify-between">
diff --git a/packages/features/ee/workflows/components/AddActionDialog.tsx b/packages/features/ee/workflows/components/AddActionDialog.tsx
index e3318ccfd7..f4f75b0cfe 100644
--- a/packages/features/ee/workflows/components/AddActionDialog.tsx
+++ b/packages/features/ee/workflows/components/AddActionDialog.tsx
@@ -158,7 +158,7 @@ export const AddActionDialog = (props: IAddActionDialog) => {
               setIsEmailAddressNeeded(false);
               setIsSenderIdNeeded(false);
             }}>
-            <div className="space-y-1">
+            <div className="stack-y-1">
               <Label htmlFor="label">{t("action")}:</Label>
               <Controller
                 name="action"
@@ -190,7 +190,7 @@ export const AddActionDialog = (props: IAddActionDialog) => {
               )}
             </div>
             {isPhoneNumberNeeded && (
-              <div className="mt-5 space-y-1">
+              <div className="mt-5 stack-y-1">
                 <Label htmlFor="sendTo">{t("phone_number")}</Label>
                 <div className="mb-5 mt-1">
                   <Controller
diff --git a/packages/features/ee/workflows/components/CallDetailsSheet.tsx b/packages/features/ee/workflows/components/CallDetailsSheet.tsx
index 3746533560..45ae6b5718 100644
--- a/packages/features/ee/workflows/components/CallDetailsSheet.tsx
+++ b/packages/features/ee/workflows/components/CallDetailsSheet.tsx
@@ -59,9 +59,9 @@ export function CallDetailsSheet({ state, dispatch }: CallDetailsSheetProps) {
           </div>
         </SheetHeader>
 
-        <SheetBody className="flex flex-col space-y-6 p-4">
+        <SheetBody className="flex flex-col stack-y-6 p-4">
           {/* Call Information */}
-          <div className="space-y-3">
+          <div className="stack-y-3">
             <h3 className="text-emphasis text-base font-semibold">{t("call_information")}</h3>
             <div className="grid grid-cols-2 gap-4">
               <div>
@@ -106,14 +106,14 @@ export function CallDetailsSheet({ state, dispatch }: CallDetailsSheetProps) {
 
           {/* Call Summary */}
           {selectedCall.call_analysis?.call_summary && (
-            <div className="space-y-3">
+            <div className="stack-y-3">
               <h3 className="text-emphasis text-base font-semibold">{t("call_summary")}</h3>
               <p className="text-default text-sm">{selectedCall.call_analysis.call_summary}</p>
             </div>
           )}
 
           {/* Recording Section */}
-          <div className="space-y-3">
+          <div className="stack-y-3">
             <h3 className="text-emphasis text-base font-semibold">{t("recording")}</h3>
             <div className="flex items-center gap-3">
               <audio controls className="h-11 w-[258px]" src={selectedCall.recording_url}>
@@ -126,9 +126,9 @@ export function CallDetailsSheet({ state, dispatch }: CallDetailsSheetProps) {
           </div>
 
           {/* Transcription */}
-          <div className="space-y-3">
+          <div className="stack-y-3">
             <h3 className="text-emphasis text-base font-semibold">{t("transcription")}</h3>
-            <div className="border-subtle max-h-96 space-y-3 overflow-y-auto rounded-md border p-4">
+            <div className="border-subtle max-h-96 stack-y-3 overflow-y-auto rounded-md border p-4">
               {selectedCall.transcript ? (
                 selectedCall.transcript
                   .split("\n")
@@ -141,7 +141,7 @@ export function CallDetailsSheet({ state, dispatch }: CallDetailsSheetProps) {
                     if (!isAgent && !isUser) return null;
 
                     return (
-                      <div key={index} className="space-y-1">
+                      <div key={index} className="stack-y-1">
                         <div className="flex items-center gap-2">
                           <Icon name="user" className={isAgent ? "text-info" : "text-success"} />
                           <span className={`text-sm font-medium ${isAgent ? "text-info" : "text-success"}`}>
@@ -160,9 +160,9 @@ export function CallDetailsSheet({ state, dispatch }: CallDetailsSheetProps) {
 
           {/* Event Details */}
           {selectedCall.retell_llm_dynamic_variables && (
-            <div className="space-y-3">
+            <div className="stack-y-3">
               <h3 className="text-emphasis text-base font-semibold">{t("event_details")}</h3>
-              <div className="border-subtle bg-muted rounded-md border p-4">
+              <div className="border-subtle bg-cal-muted rounded-md border p-4">
                 <pre className="text-default overflow-x-auto text-xs">
                   {JSON.stringify(selectedCall.retell_llm_dynamic_variables, null, 2)}
                 </pre>
diff --git a/packages/features/ee/workflows/components/EmptyScreen.tsx b/packages/features/ee/workflows/components/EmptyScreen.tsx
index 0121e82249..3a4fdd0222 100644
--- a/packages/features/ee/workflows/components/EmptyScreen.tsx
+++ b/packages/features/ee/workflows/components/EmptyScreen.tsx
@@ -40,7 +40,7 @@ function WorkflowExample(props: WorkflowExampleType) {
             )}
           </div>
         </div>
-        <div className="m-auto w-full flex-grow items-center justify-center ">
+        <div className="m-auto w-full grow items-center justify-center ">
           <div className="text-semibold text-emphasis line-clamp-2 w-full text-sm font-semibold">{title}</div>
           <div className="text-default text-sm font-normal leading-none">{description}</div>
         </div>
@@ -146,7 +146,7 @@ export default function EmptyScreen(props: { isFilteredView: boolean }) {
 const TemplateSection = ({ title, examples }: { title: string; examples: WorkflowExampleType[] }) => {
   return (
     <div className="flex items-center justify-center">
-      <div className="bg-muted flex max-w-5xl flex-col rounded-md p-2">
+      <div className="bg-cal-muted flex max-w-5xl flex-col rounded-md p-2">
         <h2 className="text-emphasis mb-2 text-base font-semibold">{title}</h2>
         <div className="grid grid-cols-1 items-center gap-2 lg:grid-cols-3">
           {examples.map((example: WorkflowExampleType, index: number) => (
diff --git a/packages/features/ee/workflows/components/SkeletonLoaderEventWorkflowsTab.tsx b/packages/features/ee/workflows/components/SkeletonLoaderEventWorkflowsTab.tsx
index 2e594a615a..c780fda4bc 100644
--- a/packages/features/ee/workflows/components/SkeletonLoaderEventWorkflowsTab.tsx
+++ b/packages/features/ee/workflows/components/SkeletonLoaderEventWorkflowsTab.tsx
@@ -14,11 +14,11 @@ export default SkeletonLoader;
 function SkeletonItem() {
   return (
     <li className="border-subtle group mb-4 flex h-[90px] w-full items-center justify-between rounded-md border px-4 py-4 sm:px-6">
-      <div className="flex-grow truncate text-sm">
+      <div className="grow truncate text-sm">
         <div className="flex">
           <SkeletonAvatar className="h-10 w-10" />
 
-          <div className="ml-4 mt-1 flex flex-col space-y-1">
+          <div className="ml-4 mt-1 flex flex-col stack-y-1">
             <SkeletonText className="h-5 w-20 sm:w-24" />
             <div className="flex">
               <SkeletonText className="h-4 w-16 ltr:mr-2 rtl:ml-2 sm:w-28" />
@@ -26,7 +26,7 @@ function SkeletonItem() {
           </div>
         </div>
       </div>
-      <div className="mt-0 flex flex-shrink-0 sm:ml-5">
+      <div className="mt-0 flex shrink-0 sm:ml-5">
         <div className="flex justify-between space-x-2 rtl:space-x-reverse">
           <SkeletonText className="h-8 w-8 sm:w-16" />
           <SkeletonText className="h-8 w-8 sm:w-16" />
diff --git a/packages/features/ee/workflows/components/SkeletonLoaderList.tsx b/packages/features/ee/workflows/components/SkeletonLoaderList.tsx
index 921bb904b1..41acf38caf 100644
--- a/packages/features/ee/workflows/components/SkeletonLoaderList.tsx
+++ b/packages/features/ee/workflows/components/SkeletonLoaderList.tsx
@@ -16,9 +16,9 @@ export default SkeletonLoader;
 function SkeletonItem() {
   return (
     <li className="group flex w-full items-center justify-between px-4 py-4 sm:px-6">
-      <div className="flex-grow truncate text-sm">
+      <div className="grow truncate text-sm">
         <div className="flex">
-          <div className="flex flex-col space-y-2">
+          <div className="flex flex-col stack-y-2">
             <SkeletonText className="h-4 w-16 sm:w-24" />
             <div className="flex">
               <Icon name="bell" className="mr-1.5 mt-0.5 inline h-4 w-4 text-gray-200" />
@@ -29,7 +29,7 @@ function SkeletonItem() {
           </div>
         </div>
       </div>
-      <div className="mt-0 flex flex-shrink-0 sm:ml-5">
+      <div className="mt-0 flex shrink-0 sm:ml-5">
         <div className="flex justify-between space-x-2 rtl:space-x-reverse">
           <SkeletonText className="h-8 w-8 sm:w-16" />
         </div>
diff --git a/packages/features/ee/workflows/components/WebCallDialog.tsx b/packages/features/ee/workflows/components/WebCallDialog.tsx
index 8e8acc4f0c..9f96e0f6c1 100644
--- a/packages/features/ee/workflows/components/WebCallDialog.tsx
+++ b/packages/features/ee/workflows/components/WebCallDialog.tsx
@@ -402,7 +402,7 @@ export function WebCallDialog({
             )}
           </div>
 
-          <div className="h-60 space-y-3 overflow-y-auto p-2">
+          <div className="h-60 stack-y-3 overflow-y-auto p-2">
             {transcript.length === 0 ? (
               <div className="flex h-40 items-center justify-center text-center">
                 <div>
diff --git a/packages/features/ee/workflows/components/WorkflowCreationDialog.tsx b/packages/features/ee/workflows/components/WorkflowCreationDialog.tsx
index 8649a32a09..7209a03b08 100644
--- a/packages/features/ee/workflows/components/WorkflowCreationDialog.tsx
+++ b/packages/features/ee/workflows/components/WorkflowCreationDialog.tsx
@@ -143,7 +143,7 @@ export function WorkflowCreationDialog({
               icon="circle-plus"
               isSelected={selectedOption === "scratch"}
               onClick={() => setSelectedOption("scratch")}
-              iconWrapperClassName="bg-muted"
+              iconWrapperClassName="bg-cal-muted"
               value="scratch"
             />
             <WorkflowOptionCard
diff --git a/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx b/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx
index 9c9976d7d5..3844c1d3f4 100644
--- a/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx
+++ b/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx
@@ -212,7 +212,7 @@ export default function WorkflowDetailsPage(props: Props) {
           </FormCardBody>
         </FormCard>
 
-        <div className="!mt-0 ml-7 h-3 w-2 border-l" />
+        <div className="mt-0! ml-7 h-3 w-2 border-l" />
         {form.getValues("steps") && (
           <div className="">
             {form.getValues("steps")?.map((step, index) => {
@@ -225,7 +225,7 @@ export default function WorkflowDetailsPage(props: Props) {
                 <div key={index}>
                   <FormCard
                     key={step.id}
-                    className="mb-0 bg-muted border-muted"
+                    className="mb-0 bg-cal-muted border-muted"
                     collapsible={false}
                     label={
                       <div className="flex gap-2 items-center pt-1 pb-2">
@@ -293,7 +293,7 @@ export default function WorkflowDetailsPage(props: Props) {
                     </FormCardBody>
                   </FormCard>
                   {index !== form.getValues("steps").length - 1 && (
-                    <div className="border-default !mt-0 ml-7 h-3 w-2 border-l" />
+                    <div className="border-default mt-0! ml-7 h-3 w-2 border-l" />
                   )}
                 </div>
               );
@@ -302,7 +302,7 @@ export default function WorkflowDetailsPage(props: Props) {
         )}
         {!permissions.readOnly && (
           <>
-            <div className="border-default !mt-0 ml-7 h-3 w-2 border-l" />
+            <div className="border-default mt-0! ml-7 h-3 w-2 border-l" />
             <Button
               type="button"
               onClick={() => setIsAddActionDialogOpen(true)}
diff --git a/packages/features/ee/workflows/components/WorkflowListPage.tsx b/packages/features/ee/workflows/components/WorkflowListPage.tsx
index 8349f11ade..63d93d9609 100644
--- a/packages/features/ee/workflows/components/WorkflowListPage.tsx
+++ b/packages/features/ee/workflows/components/WorkflowListPage.tsx
@@ -102,7 +102,7 @@ export default function WorkflowListPage({ workflows }: Props) {
     <>
       {workflows && workflows.length > 0 ? (
         <div className="bg-default border-subtle overflow-hidden rounded-md border sm:mx-0">
-          <ul className="divide-subtle !static w-full divide-y" data-testid="workflow-list" ref={parent}>
+          <ul className="divide-subtle static! w-full divide-y" data-testid="workflow-list" ref={parent}>
             {workflows.map((workflow, index) => {
               const firstItem = workflows[0];
               const lastItem = workflows[workflows.length - 1];
@@ -118,8 +118,8 @@ export default function WorkflowListPage({ workflows }: Props) {
                   {!(lastItem && lastItem.id === workflow.id) && (
                     <ArrowButton onClick={() => moveWorkflow(index, 1)} arrowDirection="down" />
                   )}
-                  <div className="first-line:group hover:bg-muted flex w-full items-center justify-between p-4 transition sm:px-6">
-                    <Link href={`/workflows/${workflow.id}`} className="flex-grow cursor-pointer">
+                  <div className="first-line:group hover:bg-cal-muted flex w-full items-center justify-between p-4 transition sm:px-6">
+                    <Link href={`/workflows/${workflow.id}`} className="grow cursor-pointer">
                       <div className="rtl:space-x-reverse">
                         <div className="flex">
                           <div
@@ -229,7 +229,7 @@ export default function WorkflowListPage({ workflows }: Props) {
                     <div>
                       <div className="hidden md:block">
                         {workflow.team?.name && (
-                          <Badge className="mb-2 mr-4 mt-1 p-[1px] px-2" variant="gray">
+                          <Badge className="mb-2 mr-4 mt-1 p-px px-2" variant="gray">
                             <Avatar
                               alt={workflow.team?.name || ""}
                               href={
@@ -250,7 +250,7 @@ export default function WorkflowListPage({ workflows }: Props) {
                       </div>
                     </div>
 
-                    <div className="flex flex-shrink-0">
+                    <div className="flex shrink-0">
                       <div className="hidden sm:block">
                         <ButtonGroup combined>
                           <Tooltip content={t("edit") as string}>
diff --git a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
index d41eb01db2..22f43ba67a 100644
--- a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
@@ -123,7 +123,7 @@ const getTimeSectionText = (trigger: WorkflowTriggerEvents, t: TFunction) => {
 
 const CalAIAgentDataSkeleton = () => {
   return (
-    <div className="bg-muted mt-4 rounded-lg p-4">
+    <div className="bg-cal-muted mt-4 rounded-lg p-4">
       <div className="flex items-center justify-between">
         <div>
           <SkeletonText className="h-5 w-28" />
@@ -848,7 +848,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
               </div>
             )}
           {isCalAIAction(form.getValues(`steps.${step.stepNumber - 1}.action`)) && !stepAgentId && (
-            <div className="bg-muted border-muted mt-2 rounded-2xl border p-3">
+            <div className="bg-cal-muted border-muted mt-2 rounded-2xl border p-3">
               <div className="flex flex-col justify-between gap-4 sm:flex-row sm:items-center sm:gap-0">
                 <div>
                   <h2 className="text-emphasis text-sm font-medium leading-none">
@@ -875,7 +875,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
 
           {stepAgentId && isAgentLoading && <CalAIAgentDataSkeleton />}
           {stepAgentId && agentData && (
-            <div className="bg-muted mt-4 rounded-lg p-4">
+            <div className="bg-cal-muted mt-4 rounded-lg p-4">
               <div
                 className="flex cursor-pointer items-center justify-between"
                 onClick={(e) => {
@@ -1019,7 +1019,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
             </div>
           )}
           {isPhoneNumberNeeded && (
-            <div className="bg-muted mt-2 rounded-md p-4 pt-0">
+            <div className="bg-cal-muted mt-2 rounded-md p-4 pt-0">
               <Label className="pt-4">{t("custom_phone_number")}</Label>
               <div className="block sm:flex">
                 <Controller
@@ -1132,7 +1132,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
               </div>
             )}
           {isEmailAddressNeeded && !isCalAIAction(form.getValues(`steps.${step.stepNumber - 1}.action`)) && (
-            <div className="bg-muted border-muted mt-5 rounded-2xl border p-4">
+            <div className="bg-cal-muted border-muted mt-5 rounded-2xl border p-4">
               <Label>{t("email_address")}</Label>
               <div className="block items-center gap-2 sm:flex">
                 <Controller
@@ -1304,7 +1304,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
             </div>
           )}
           {!isCalAIAction(form.getValues(`steps.${step.stepNumber - 1}.action`)) && (
-            <div className="bg-muted border-muted mt-3 rounded-2xl border p-3">
+            <div className="bg-cal-muted border-muted mt-3 rounded-2xl border p-3">
               {isEmailSubjectNeeded && (
                 <div className="mb-6">
                   <div className="flex items-center">
@@ -1316,7 +1316,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                       {t("email_subject")}
                     </Label>
                     {!props.readOnly && !isFormTrigger(trigger) && (
-                      <div className="flex-grow text-right">
+                      <div className="grow text-right">
                         <AddVariablesDropdown
                           addVariable={addVariableEmailSubject}
                           variables={DYNAMIC_TEXT_VARIABLES}
@@ -1520,7 +1520,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                   ? t("how_form_responses_as_variables")
                   : t("how_booking_questions_as_variables")}
               </h1>
-              <div className="bg-muted-3 mb-6 rounded-md sm:p-4">
+              <div className="mb-6 rounded-md sm:p-4">
                 <p className="test-sm font-medium">{t("format")}</p>
                 <ul className="text-emphasis ml-5 mt-2 list-disc">
                   <li>{t("uppercase_for_letters")}</li>
@@ -1540,7 +1540,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                     <div className="test-sm text-emphasis col-span-7">{t("company_size")}</div>
                     <div className="test-sm text-default col-span-5 w-full">{t("variable")}</div>
 
-                    <div className="test-sm text-emphasis col-span-7 break-words">
+                    <div className="test-sm text-emphasis col-span-7 wrap-break-word">
                       {" "}
                       {`{${t("company_size")
                         .replace(/[^a-zA-Z0-9 ]/g, "")
@@ -1558,7 +1558,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                     </div>
                     <div className="test-sm text-emphasis col-span-7">{t("what_help_needed")}</div>
                     <div className="test-sm text-default col-span-5">{t("variable")}</div>
-                    <div className="test-sm text-emphasis col-span-7 break-words">
+                    <div className="test-sm text-emphasis col-span-7 wrap-break-word">
                       {" "}
                       {`{${t("what_help_needed")
                         .replace(/[^a-zA-Z0-9 ]/g, "")
@@ -1631,7 +1631,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
         {/* Unsubscribe Confirmation Dialog */}
         <Dialog open={isUnsubscribeDialogOpen} onOpenChange={setIsUnsubscribeDialogOpen}>
           <DialogContent type="creation" title={t("unsubscribe_phone_number")}>
-            <div className="space-y-4">
+            <div className="stack-y-4">
               <p className="text-default text-sm">{t("do_you_still_want_to_unsubscribe")}</p>
               {getActivePhoneNumbers(
                 agentData?.outboundPhoneNumbers?.map((phone) => ({
@@ -1639,7 +1639,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                   subscriptionStatus: phone.subscriptionStatus ?? undefined,
                 }))
               ).length > 0 && (
-                <div className="bg-muted rounded-lg p-3">
+                <div className="bg-cal-muted rounded-lg p-3">
                   <div className="flex items-center gap-2">
                     <Icon name="phone" className="text-emphasis h-4 w-4" />
                     <span className="text-emphasis text-sm font-medium">
@@ -1689,7 +1689,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
         {/* Delete Step Confirmation Dialog */}
         <Dialog open={isDeleteStepDialogOpen} onOpenChange={setIsDeleteStepDialogOpen}>
           <DialogContent type="confirmation" title={t("delete_workflow_step")}>
-            <div className="space-y-4">
+            <div className="stack-y-4">
               <p className="text-default text-sm">{t("are_you_sure_you_want_to_delete_workflow_step")}</p>
               {(() => {
                 const relevantPhoneNumbers =
@@ -1703,9 +1703,9 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                       <div className="bg-attention rounded-lg p-3">
                         <div className="flex items-start gap-2">
                           <Icon name="info" className="text-attention mt-0.5 h-4 w-4" />
-                          <div className="space-y-2">
+                          <div className="stack-y-2">
                             <p className="text-attention text-sm font-medium">{t("this_action_will_also")}</p>
-                            <ul className="text-attention list-inside list-disc space-y-1 text-sm">
+                            <ul className="text-attention list-inside list-disc stack-y-1 text-sm">
                               {relevantPhoneNumbers.some(
                                 (phone) => phone.subscriptionStatus === PhoneNumberSubscriptionStatus.ACTIVE
                               ) && <li>{t("cancel_your_phone_number_subscription")}</li>}
@@ -1715,10 +1715,10 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                         </div>
                       </div>
                       {relevantPhoneNumbers.map((phone) => (
-                        <div key={phone.phoneNumber} className="bg-muted rounded-lg p-3">
-                          <div className="flex items-center gap-2">
-                            <Icon name="phone" className="text-emphasis h-4 w-4" />
-                            <span className="text-emphasis text-sm font-medium">
+                        <div key={phone.phoneNumber} className="p-3 rounded-lg bg-cal-muted">
+                          <div className="flex gap-2 items-center">
+                            <Icon name="phone" className="w-4 h-4 text-emphasis" />
+                            <span className="text-sm font-medium text-emphasis">
                               {formatPhoneNumber(phone.phoneNumber)}
                             </span>
                             {phone.subscriptionStatus === PhoneNumberSubscriptionStatus.ACTIVE && (
diff --git a/packages/features/ee/workflows/components/agent-configuration/components/dialogs/ImportNumberDialog.tsx b/packages/features/ee/workflows/components/agent-configuration/components/dialogs/ImportNumberDialog.tsx
index b3a9486581..0dac114a03 100644
--- a/packages/features/ee/workflows/components/agent-configuration/components/dialogs/ImportNumberDialog.tsx
+++ b/packages/features/ee/workflows/components/agent-configuration/components/dialogs/ImportNumberDialog.tsx
@@ -73,7 +73,7 @@ export function ImportNumberDialog({
         <DialogHeader title={t("import_phone_number")} subtitle={t("import_phone_number_description")} />
 
         <Form form={phoneNumberForm} handleSubmit={(values) => handleImportPhoneNumber(values)}>
-          <div className="space-y-6">
+          <div className="stack-y-6">
             <Controller
               name="phoneNumber"
               control={phoneNumberForm.control}
@@ -124,14 +124,14 @@ export function ImportNumberDialog({
               )}
             />
 
-            <div className="bg-muted rounded-xl p-1">
+            <div className="bg-cal-muted rounded-xl p-1">
               <div className="flex items-center justify-between p-2">
                 <Label className="text-emphasis mb-0 text-sm font-medium leading-none">{t("advanced")}</Label>
                 <Switch size="sm" checked={showAdvancedFields} onCheckedChange={setShowAdvancedFields} />
               </div>
 
               {showAdvancedFields && (
-                <div className="bg-default space-y-5 rounded-lg p-4">
+                <div className="bg-default stack-y-5 rounded-lg p-4">
                   <Controller
                     name="sipTrunkAuthUsername"
                     control={phoneNumberForm.control}
@@ -211,7 +211,7 @@ export function ImportNumberDialog({
             {/* Having trouble importing section */}
             <div className="rounded-lg border p-2">
               <div className="flex items-start gap-3">
-                <Icon name="info" className="text-subtle mt-0.5 h-5 w-5 flex-shrink-0" />
+                <Icon name="info" className="text-subtle mt-0.5 h-5 w-5 shrink-0" />
                 <div className="flex-1">
                   <p className="text-emphasis text-sm font-medium">{t("having_trouble_importing")}</p>
                   <p className="text-subtle mt-1 text-sm leading-tight">
diff --git a/packages/features/ee/workflows/components/agent-configuration/components/forms/AgentConfigForm.tsx b/packages/features/ee/workflows/components/agent-configuration/components/forms/AgentConfigForm.tsx
index 2f9b323754..b20155db14 100644
--- a/packages/features/ee/workflows/components/agent-configuration/components/forms/AgentConfigForm.tsx
+++ b/packages/features/ee/workflows/components/agent-configuration/components/forms/AgentConfigForm.tsx
@@ -51,7 +51,7 @@ export function AgentConfigForm({
   };
 
   return (
-    <div className="space-y-4">
+    <div className="stack-y-4">
       <LanguageSelector control={form.control} name="language" disabled={readOnly} />
 
       <VoiceSelector
@@ -118,11 +118,11 @@ export function AgentConfigForm({
             {t("Add Function")}
           </Button>
         </div>
-        <div className="space-y-3">
+        <div className="stack-y-3">
           {toolFields.map((tool, idx) => (
             <div
               key={tool.id}
-              className="flex justify-between items-center p-4 rounded-lg border transition-colors border-subtle bg-muted hover:bg-default">
+              className="flex justify-between items-center p-4 rounded-lg border transition-colors border-subtle bg-cal-muted hover:bg-default">
               <div className="flex gap-3">
                 <div className="flex justify-center items-center w-8 h-8 rounded-md border bg-default border-subtle">
                   <Icon name="zap" className="w-4 h-4 text-emphasis" />
@@ -161,7 +161,7 @@ export function AgentConfigForm({
             </div>
           ))}
           {toolFields.length === 0 && (
-            <div className="flex flex-col justify-center items-center p-6 text-center rounded-lg border border-subtle bg-muted">
+            <div className="flex flex-col justify-center items-center p-6 text-center rounded-lg border border-subtle bg-cal-muted">
               <Icon name="zap" className="w-6 h-6 text-subtle" />
               <p className="mt-2 text-sm text-subtle">{t("No functions configured yet")}</p>
               <p className="text-xs text-subtle">
diff --git a/packages/features/ee/workflows/components/agent-configuration/components/tabs/IncomingCallsTab.tsx b/packages/features/ee/workflows/components/agent-configuration/components/tabs/IncomingCallsTab.tsx
index 97b8569b9f..11d0e2a5d2 100644
--- a/packages/features/ee/workflows/components/agent-configuration/components/tabs/IncomingCallsTab.tsx
+++ b/packages/features/ee/workflows/components/agent-configuration/components/tabs/IncomingCallsTab.tsx
@@ -87,11 +87,11 @@ export function IncomingCallsTab({
   if (!hasActivePhoneNumbers) {
     return (
       <div className="p-8 rounded-xl border border-subtle">
-        <div className="flex flex-col items-center space-y-6 text-center">
-          <div className="flex justify-center items-center w-16 h-16 rounded-lg bg-muted">
+        <div className="flex flex-col items-center stack-y-6 text-center">
+          <div className="flex justify-center items-center w-16 h-16 rounded-lg bg-cal-muted">
             <Icon name="info" className="w-8 h-8 text-subtle" />
           </div>
-          <div className="space-y-2">
+          <div className="stack-y-2">
             <h3 className="text-lg font-semibold text-emphasis">{t("setup_incoming_agent")}</h3>
             <p className="text-sm text-subtle">{t("connect_a_phone_number_first")}</p>
           </div>
@@ -103,11 +103,11 @@ export function IncomingCallsTab({
   if (!inboundAgentId) {
     return (
       <div className="p-8 rounded-xl border border-subtle">
-        <div className="flex flex-col items-center space-y-6 text-center">
-          <div className="flex justify-center items-center w-16 h-16 rounded-lg bg-muted">
+        <div className="flex flex-col items-center stack-y-6 text-center">
+          <div className="flex justify-center items-center w-16 h-16 rounded-lg bg-cal-muted">
             <Icon name="phone-incoming" className="w-8 h-8 text-subtle" />
           </div>
-          <div className="space-y-2">
+          <div className="stack-y-2">
             <h3 className="text-lg font-semibold text-emphasis">{t("setup_inbound_agent")}</h3>
             <p className="text-sm text-subtle">{t("setup_inbound_agent_for_incoming_calls")}</p>
           </div>
@@ -145,7 +145,7 @@ export function IncomingCallsTab({
   }
 
   return (
-    <div className="space-y-4">
+    <div className="stack-y-4">
       <div>
         <Label className="block mb-1 text-sm font-medium text-emphasis">{t("event_type")}</Label>
         <p className="text-subtle mb-1.5 text-xs">{t("select_event_type_for_inbound_calls")}</p>
diff --git a/packages/features/ee/workflows/components/agent-configuration/components/tabs/PhoneNumberTab.tsx b/packages/features/ee/workflows/components/agent-configuration/components/tabs/PhoneNumberTab.tsx
index d7c2862c5c..57b0dcdc0a 100644
--- a/packages/features/ee/workflows/components/agent-configuration/components/tabs/PhoneNumberTab.tsx
+++ b/packages/features/ee/workflows/components/agent-configuration/components/tabs/PhoneNumberTab.tsx
@@ -124,7 +124,7 @@ export function PhoneNumberTab({
 
     return (
       <>
-        <div className="relative space-y-2">
+        <div className="relative stack-y-2">
           {updateAgentMutation.isPending && (
             <div className="absolute inset-0 z-10 flex items-center justify-center rounded-lg bg-white/50">
               <div className="flex items-center gap-2 text-sm text-gray-600">
@@ -274,11 +274,11 @@ export function PhoneNumberTab({
   return (
     <>
       <div className="border-subtle rounded-xl border p-8">
-        <div className="flex flex-col items-center space-y-6 text-center">
-          <div className="bg-muted flex h-16 w-16 items-center justify-center rounded-lg">
+        <div className="flex flex-col items-center stack-y-6 text-center">
+          <div className="bg-cal-muted flex h-16 w-16 items-center justify-center rounded-lg">
             <Icon name="phone" className="text-subtle h-8 w-8" />
           </div>
-          <div className="space-y-2">
+          <div className="stack-y-2">
             <h3 className="text-emphasis text-lg font-semibold">{t("no_phone_numbers")}</h3>
             <p className="text-subtle text-sm">{t("buy_a_phone_number_or_import_one_you_already_have")}</p>
           </div>
diff --git a/packages/features/ee/workflows/pages/index.tsx b/packages/features/ee/workflows/pages/index.tsx
index ed42b8726d..9150a97959 100644
--- a/packages/features/ee/workflows/pages/index.tsx
+++ b/packages/features/ee/workflows/pages/index.tsx
@@ -138,7 +138,7 @@ const Filter = (props: {
   return (
     <div className={classNames("-mb-2", noFilter ? "w-16" : "w-[100px]")}>
       <AnimatedPopover text={noFilter ? "All" : "Filtered"}>
-        <div className="item-center focus-within:bg-subtle hover:bg-muted flex px-4 py-[6px] transition hover:cursor-pointer">
+        <div className="item-center focus-within:bg-subtle hover:bg-cal-muted flex px-4 py-[6px] transition hover:cursor-pointer">
           <Avatar
             imageSrc={userAvatar || ""}
             size="sm"
@@ -173,7 +173,7 @@ const Filter = (props: {
         </div>
         {teams.map((profile) => (
           <div
-            className="item-center focus-within:bg-subtle hover:bg-muted flex px-4 py-[6px] transition hover:cursor-pointer"
+            className="item-center focus-within:bg-subtle hover:bg-cal-muted flex px-4 py-[6px] transition hover:cursor-pointer"
             key={`${profile.teamId || 0}`}>
             <Avatar
               imageSrc={profile.image || ""}
diff --git a/packages/features/ee/workflows/pages/workflow.tsx b/packages/features/ee/workflows/pages/workflow.tsx
index dfcd769ef8..25a838d41c 100644
--- a/packages/features/ee/workflows/pages/workflow.tsx
+++ b/packages/features/ee/workflows/pages/workflow.tsx
@@ -473,7 +473,7 @@ function WorkflowPage({
                 ) : (
                   <div className="group flex items-center gap-1">
                     <span
-                      className="text-default hover:bg-muted min-w-[100px] cursor-pointer truncate whitespace-nowrap rounded p-1 text-sm font-semibold leading-none"
+                      className="text-default hover:bg-cal-muted min-w-[100px] cursor-pointer truncate whitespace-nowrap rounded p-1 text-sm font-semibold leading-none"
                       onClick={() => setIsEditingName(true)}>
                       {watchedName ? watchedName : isPending ? t("loading") : t("untitled")}
                     </span>
diff --git a/packages/features/embed/Embed.tsx b/packages/features/embed/Embed.tsx
index 3bc3908246..2d11fae57b 100644
--- a/packages/features/embed/Embed.tsx
+++ b/packages/features/embed/Embed.tsx
@@ -205,10 +205,10 @@ const ChooseEmbedTypesDialogContent = ({
           <p className="text-subtle text-sm">{t("choose_ways_put_cal_site", { appName: APP_NAME })}</p>
         </div>
       </div>
-      <div className="items-start space-y-2 md:flex md:space-y-0">
+      <div className="items-start stack-y-2 md:flex md:stack-y-0">
         {types.map((embed, index) => (
           <button
-            className="hover:bg-subtle bg-muted	w-full self-stretch rounded-md border border-transparent p-6 text-left transition hover:rounded-md ltr:mr-4 ltr:last:mr-0 rtl:ml-4 rtl:last:ml-0 lg:w-1/3"
+            className="hover:bg-subtle bg-cal-muted	w-full self-stretch rounded-md border border-transparent p-6 text-left transition hover:rounded-md ltr:mr-4 ltr:last:mr-0 rtl:ml-4 rtl:last:ml-0 lg:w-1/3"
             key={index}
             data-testid={embed.type}
             onClick={() => {
@@ -220,7 +220,7 @@ const ChooseEmbedTypesDialogContent = ({
                 });
               }
             }}>
-            <div className="bg-default order-none box-border flex-none rounded-md border border-solid transition dark:bg-transparent dark:invert">
+            <div className="bg-default order-0 box-border flex-none rounded-md border border-solid transition dark:bg-transparent dark:invert">
               {embed.illustration}
             </div>
             <div className="text-emphasis mt-4 font-semibold">{embed.title}</div>
@@ -714,7 +714,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
   );
   const { data: userSettings } = trpc.viewer.me.get.useQuery();
 
-  const teamSlug = !!eventTypeData?.team ? eventTypeData.team.slug : null;
+  const teamSlug = eventTypeData?.team ? eventTypeData.team.slug : null;
 
   const s = (href: string) => {
     const _searchParams = new URLSearchParams(searchParams.toString());
@@ -921,10 +921,10 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
     <DialogContent
       enableOverflow
       ref={dialogContentRef}
-      className="rounded-lg p-0.5 sm:max-w-[80rem]"
+      className="rounded-lg p-0.5 sm:max-w-7xl!"
       type="creation">
       <div className="flex">
-        <div className="bg-muted flex h-[95vh] w-1/3 flex-col overflow-y-auto p-8">
+        <div className="bg-cal-muted flex h-[95vh] w-1/3 flex-col overflow-y-auto p-8">
           <h3
             className="text-emphasis mb-2.5 flex items-center text-xl font-semibold leading-5"
             id="modal-title">
@@ -956,7 +956,7 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                       <div>
                         {/*TODO: Add Auto/Fixed toggle from Figma */}
                         <div className="text-default mb-[9px] text-sm">Window sizing</div>
-                        <div className="justify-left mb-6 flex items-center !font-normal ">
+                        <div className="justify-left mb-6 flex items-center font-normal! ">
                           <div className="mr-[9px]">
                             <TextField
                               labelProps={{ className: "hidden" }}
@@ -1300,8 +1300,8 @@ const EmbedTypeCodeAndPreviewDialogContent = ({
                 if (embedType === "email" && (tab.name !== "Preview" || !eventTypeData?.eventType)) return;
 
                 return (
-                  <div key={tab.href} className={classNames("flex flex-grow flex-col")}>
-                    <div className="flex h-[55vh] flex-grow flex-col">
+                  <div key={tab.href} className={classNames("flex grow flex-col")}>
+                    <div className="flex h-[55vh] grow flex-col">
                       <EmailEmbedPreview
                         selectedDuration={selectedDuration}
                         calLink={calLink}
diff --git a/packages/features/eventtypes/components/BulkEditDefaultForEventsModal.tsx b/packages/features/eventtypes/components/BulkEditDefaultForEventsModal.tsx
index bbd462b566..05716e0aab 100644
--- a/packages/features/eventtypes/components/BulkEditDefaultForEventsModal.tsx
+++ b/packages/features/eventtypes/components/BulkEditDefaultForEventsModal.tsx
@@ -59,7 +59,7 @@ export function BulkEditDefaultForEventsModal({
               callback: () => props.setOpen(false),
             });
           }}>
-          <div className="flex flex-col space-y-2">
+          <div className="flex flex-col stack-y-2">
             {eventTypes.length > 0 && (
               <div className="flex items-center space-x-2 rounded-md px-3 pb-2.5 pt-1">
                 <CheckboxField
@@ -73,7 +73,7 @@ export function BulkEditDefaultForEventsModal({
               </div>
             )}
             {eventTypes.map((eventType) => (
-              <div key={eventType.id} className="bg-muted flex items-center space-x-2 rounded-md px-3 py-2.5">
+              <div key={eventType.id} className="bg-cal-muted flex items-center space-x-2 rounded-md px-3 py-2.5">
                 <CheckboxField
                   description={eventType.title}
                   descriptionAsLabel
diff --git a/packages/features/eventtypes/components/CreateEventTypeForm.tsx b/packages/features/eventtypes/components/CreateEventTypeForm.tsx
index 52e2f98d59..102013470e 100644
--- a/packages/features/eventtypes/components/CreateEventTypeForm.tsx
+++ b/packages/features/eventtypes/components/CreateEventTypeForm.tsx
@@ -43,7 +43,7 @@ export default function CreateEventTypeForm({
       handleSubmit={(values) => {
         handleSubmit(values);
       }}>
-      <div className="mt-3 space-y-6 pb-11">
+      <div className="mt-3 stack-y-6 pb-11">
         <TextField
           label={t("title")}
           placeholder={t("quick_chat")}
diff --git a/packages/features/eventtypes/components/DuplicateDialog.tsx b/packages/features/eventtypes/components/DuplicateDialog.tsx
index 01d6494118..f411308f23 100644
--- a/packages/features/eventtypes/components/DuplicateDialog.tsx
+++ b/packages/features/eventtypes/components/DuplicateDialog.tsx
@@ -124,7 +124,7 @@ const DuplicateDialog = () => {
           handleSubmit={(values) => {
             duplicateMutation.mutate(values);
           }}>
-          <div className="-mt-2 space-y-5">
+          <div className="-mt-2 stack-y-5">
             <TextField
               label={t("title")}
               placeholder={t("quick_chat")}
diff --git a/packages/features/eventtypes/components/EditWeightsForAllTeamMembers.tsx b/packages/features/eventtypes/components/EditWeightsForAllTeamMembers.tsx
index 1e3f05e194..9c026030ef 100644
--- a/packages/features/eventtypes/components/EditWeightsForAllTeamMembers.tsx
+++ b/packages/features/eventtypes/components/EditWeightsForAllTeamMembers.tsx
@@ -48,7 +48,7 @@ const TeamMemberItem = ({ member, onWeightChange }: TeamMemberItemProps) => {
   return (
     <div className="border-subtle flex h-12 items-center border-b px-3 py-1 last:border-b-0">
       <Avatar size="sm" imageSrc={member.avatar} alt={member.label} className="min-w-10" />
-      <span className="text-emphasis ml-3 flex-grow text-sm">{member.label}</span>
+      <span className="text-emphasis ml-3 grow text-sm">{member.label}</span>
       <div className="ml-auto flex h-full items-center">
         {isEditing ? (
           <div className="flex h-full items-center">
@@ -58,7 +58,7 @@ const TeamMemberItem = ({ member, onWeightChange }: TeamMemberItemProps) => {
                 type="number"
                 min="0"
                 inputMode="numeric"
-                className="bg-muted border-default text-emphasis h-7 w-12 rounded-l-sm border px-2 text-sm [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+                className="bg-cal-muted border-default text-emphasis h-7 w-12 rounded-l-sm border px-2 text-sm [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
                 defaultValue={member.weight ?? 100}
                 onBlur={(e) => {
                   const newWeight = parseInt(e.target.value);
@@ -81,7 +81,7 @@ const TeamMemberItem = ({ member, onWeightChange }: TeamMemberItemProps) => {
                   }
                 }}
               />
-              <span className="text-default border-default bg-muted flex h-7 items-center rounded-r-sm border border-l-0 px-2 text-sm">
+              <span className="text-default border-default bg-cal-muted flex h-7 items-center rounded-r-sm border border-l-0 px-2 text-sm">
                 %
               </span>
             </div>
@@ -280,7 +280,7 @@ export const EditWeightsForAllTeamMembers = ({
               </div>
             </SheetHeader>
 
-            <SheetBody className="mt-4 flex h-full flex-col space-y-6 p-1">
+            <SheetBody className="mt-4 flex h-full flex-col stack-y-6 p-1">
               <div className="flex justify-start gap-2">
                 <label className={buttonClasses({ color: "secondary" })}>
                   <Icon name="upload" className="mr-2 h-4 w-4" />
@@ -321,7 +321,7 @@ export const EditWeightsForAllTeamMembers = ({
                     <Icon name="chevron-down" className="h-4 w-4" />
                   </button>
                   {isErrorsExpanded && (
-                    <div className="mt-2 space-y-2">
+                    <div className="mt-2 stack-y-2">
                       {uploadErrors.map((error, index) => (
                         <div
                           key={index}
diff --git a/packages/features/eventtypes/components/EventTypeDescription.tsx b/packages/features/eventtypes/components/EventTypeDescription.tsx
index 1e64591740..023021f926 100644
--- a/packages/features/eventtypes/components/EventTypeDescription.tsx
+++ b/packages/features/eventtypes/components/EventTypeDescription.tsx
@@ -54,7 +54,7 @@ export const EventTypeDescription = ({
         {eventType.descriptionAsSafeHTML && (
           <div
             className={classNames(
-              "text-subtle line-clamp-3 break-words py-1 text-sm sm:max-w-[650px] [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600",
+              "text-subtle line-clamp-3 wrap-break-word py-1 text-sm sm:max-w-[650px] [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600",
               shortenDescription ? "line-clamp-4 [&>*:not(:first-child)]:hidden" : ""
             )}
             // eslint-disable-next-line react/no-danger
diff --git a/packages/features/eventtypes/components/EventTypeLayout.tsx b/packages/features/eventtypes/components/EventTypeLayout.tsx
index 363c403303..82d6e02534 100644
--- a/packages/features/eventtypes/components/EventTypeLayout.tsx
+++ b/packages/features/eventtypes/components/EventTypeLayout.tsx
@@ -109,7 +109,7 @@ function EventTypeSingleLayout({
             <>
               <div
                 className={classNames(
-                  "sm:hover:bg-muted hidden cursor-pointer items-center rounded-md transition",
+                  "sm:hover:bg-cal-muted hidden cursor-pointer items-center rounded-md transition",
                   formMethods.watch("hidden") ? "pl-2" : "",
                   "lg:flex"
                 )}>
diff --git a/packages/features/eventtypes/components/MultiplePrivateLinksController.tsx b/packages/features/eventtypes/components/MultiplePrivateLinksController.tsx
index 9a9a775f0e..dddb2d6f1a 100644
--- a/packages/features/eventtypes/components/MultiplePrivateLinksController.tsx
+++ b/packages/features/eventtypes/components/MultiplePrivateLinksController.tsx
@@ -348,9 +348,9 @@ export const MultiplePrivateLinksController = ({
 
       <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
         <DialogContent title={t("link_settings")} type="creation">
-          <div className="mb-4 space-y-4">
+          <div className="mb-4 stack-y-4">
             <RadioArea.Group
-              className="space-y-2"
+              className="stack-y-2"
               value={selectedType}
               data-testid="private-link-radio-group"
               onValueChange={(value: "time" | "usage") => {
diff --git a/packages/features/eventtypes/components/SkeletonLoader.tsx b/packages/features/eventtypes/components/SkeletonLoader.tsx
index 2a0643b979..6a1bd26748 100644
--- a/packages/features/eventtypes/components/SkeletonLoader.tsx
+++ b/packages/features/eventtypes/components/SkeletonLoader.tsx
@@ -6,7 +6,7 @@ function SkeletonLoader() {
     <SkeletonContainer>
       <div className="mb-4 flex items-center">
         <SkeletonAvatar className="h-8 w-8" />
-        <div className="flex flex-col space-y-1">
+        <div className="flex flex-col stack-y-1">
           <SkeletonText className="h-4 w-16" />
           <SkeletonText className="h-4 w-24" />
         </div>
@@ -81,7 +81,7 @@ export function EventTypesSkeletonLoader() {
 function SkeletonItem() {
   return (
     <li className="group flex w-full items-center justify-between px-4 py-4 sm:px-6">
-      <div className="flex-grow truncate text-sm">
+      <div className="grow truncate text-sm">
         <div>
           <SkeletonText className="h-5 w-32" />
         </div>
diff --git a/packages/features/eventtypes/components/locations/CalVideoSettings.tsx b/packages/features/eventtypes/components/locations/CalVideoSettings.tsx
index 6583127bd5..49d01b0fb5 100644
--- a/packages/features/eventtypes/components/locations/CalVideoSettings.tsx
+++ b/packages/features/eventtypes/components/locations/CalVideoSettings.tsx
@@ -49,7 +49,7 @@ const CalVideoSettings = ({ calVideoSettings }: { calVideoSettings?: CalVideoSet
                 return (
                   <SettingsToggle
                     title={t("disable_recording_for_guests")}
-                    labelClassName="text-sm leading-6 whitespace-normal break-words"
+                    labelClassName="text-sm leading-6 whitespace-normal wrap-break-word"
                     checked={value}
                     onCheckedChange={onChange}
                     Badge={<UpgradeTeamsBadge checkForActiveStatus />}
@@ -65,7 +65,7 @@ const CalVideoSettings = ({ calVideoSettings }: { calVideoSettings?: CalVideoSet
                 return (
                   <SettingsToggle
                     title={t("disable_recording_for_organizer")}
-                    labelClassName="text-sm leading-6 whitespace-normal break-words"
+                    labelClassName="text-sm leading-6 whitespace-normal wrap-break-word"
                     checked={value}
                     onCheckedChange={onChange}
                     Badge={<UpgradeTeamsBadge checkForActiveStatus />}
@@ -99,7 +99,7 @@ const CalVideoSettings = ({ calVideoSettings }: { calVideoSettings?: CalVideoSet
                 return (
                   <SettingsToggle
                     title={t("enable_automatic_transcription")}
-                    labelClassName="text-sm leading-6 whitespace-normal break-words"
+                    labelClassName="text-sm leading-6 whitespace-normal wrap-break-word"
                     checked={value}
                     onCheckedChange={onChange}
                     Badge={<UpgradeTeamsBadge checkForActiveStatus />}
@@ -116,7 +116,7 @@ const CalVideoSettings = ({ calVideoSettings }: { calVideoSettings?: CalVideoSet
                   return (
                     <SettingsToggle
                       title={t("disable_transcription_for_guests")}
-                      labelClassName="text-sm leading-6 whitespace-normal break-words"
+                      labelClassName="text-sm leading-6 whitespace-normal wrap-break-word"
                       checked={value}
                       onCheckedChange={onChange}
                       Badge={<UpgradeTeamsBadge checkForActiveStatus />}
@@ -133,7 +133,7 @@ const CalVideoSettings = ({ calVideoSettings }: { calVideoSettings?: CalVideoSet
                   return (
                     <SettingsToggle
                       title={t("disable_transcription_for_organizer")}
-                      labelClassName="text-sm leading-6 whitespace-normal break-words"
+                      labelClassName="text-sm leading-6 whitespace-normal wrap-break-word"
                       checked={value}
                       onCheckedChange={onChange}
                       Badge={<UpgradeTeamsBadge checkForActiveStatus />}
diff --git a/packages/features/eventtypes/components/locations/LocationSettingsContainer.tsx b/packages/features/eventtypes/components/locations/LocationSettingsContainer.tsx
index a62359245f..bc6347600f 100644
--- a/packages/features/eventtypes/components/locations/LocationSettingsContainer.tsx
+++ b/packages/features/eventtypes/components/locations/LocationSettingsContainer.tsx
@@ -1,6 +1,6 @@
 const LocationSettingsContainer = ({ children }: { children: React.ReactNode }) => {
   return (
-    <div className="bg-muted mt-2 space-y-2 rounded-lg p-4">
+    <div className="bg-cal-muted mt-2 stack-y-2 rounded-lg p-4">
       <div className="w-full">
         <div className="flex flex-col gap-4">{children}</div>
       </div>
diff --git a/packages/features/eventtypes/components/locations/Locations.tsx b/packages/features/eventtypes/components/locations/Locations.tsx
index 15644f4eba..5779b02685 100644
--- a/packages/features/eventtypes/components/locations/Locations.tsx
+++ b/packages/features/eventtypes/components/locations/Locations.tsx
@@ -167,7 +167,7 @@ const Locations: React.FC<LocationsProps> = ({
 
   return (
     <div className={classNames("w-full", customClassNames?.container)}>
-      <ul ref={animationRef} className={classNames("space-y-2")}>
+      <ul ref={animationRef} className={classNames("stack-y-2")}>
         {locationFields.map((field, index) => {
           const eventLocationType = getEventLocationType(field.type);
           const defaultLocation = field;
@@ -245,7 +245,7 @@ const Locations: React.FC<LocationsProps> = ({
                       <Icon
                         name="x"
                         className={classNames(
-                          "border-l-1 hover:text-emphasis text-subtle h-4 w-4",
+                          "border-l hover:text-emphasis text-subtle h-4 w-4",
                           customClassNames?.removeLocationIcon
                         )}
                       />
@@ -264,7 +264,7 @@ const Locations: React.FC<LocationsProps> = ({
                   customClassNames={customClassNames}
                 />
               ) : eventLocationType?.organizerInputType ? (
-                <div className="mt-2 space-y-2">
+                <div className="mt-2 stack-y-2">
                   <div className="w-full">
                     <div className="flex gap-2">
                       <div className="flex items-center justify-center">
diff --git a/packages/features/eventtypes/components/tabs/advanced/CustomEventTypeModal.tsx b/packages/features/eventtypes/components/tabs/advanced/CustomEventTypeModal.tsx
index 84d7334bde..5d55fd32d5 100644
--- a/packages/features/eventtypes/components/tabs/advanced/CustomEventTypeModal.tsx
+++ b/packages/features/eventtypes/components/tabs/advanced/CustomEventTypeModal.tsx
@@ -121,7 +121,7 @@ const CustomEventTypeModalForm: FC<CustomEventTypeModalFormProps> = (props) => {
               )}>
               <p
                 className={classNames(
-                  "text-subtle ml-1 mr-5 w-40 flex-shrink-0",
+                  "text-subtle ml-1 mr-5 w-40 shrink-0",
                   customClassNames?.availableVariables?.variableItem?.variableName
                 )}>
                 {`{Event type title}`}
@@ -141,7 +141,7 @@ const CustomEventTypeModalForm: FC<CustomEventTypeModalFormProps> = (props) => {
               )}>
               <p
                 className={classNames(
-                  "text-subtle ml-1 mr-5 w-40 flex-shrink-0",
+                  "text-subtle ml-1 mr-5 w-40 shrink-0",
                   customClassNames?.availableVariables?.variableItem?.variableName
                 )}>
                 {`{Event duration}`}
@@ -161,7 +161,7 @@ const CustomEventTypeModalForm: FC<CustomEventTypeModalFormProps> = (props) => {
               )}>
               <p
                 className={classNames(
-                  "text-subtle ml-1 mr-5 w-40 flex-shrink-0",
+                  "text-subtle ml-1 mr-5 w-40 shrink-0",
                   customClassNames?.availableVariables?.variableItem?.variableName
                 )}>
                 {`{Organiser}`}
@@ -181,7 +181,7 @@ const CustomEventTypeModalForm: FC<CustomEventTypeModalFormProps> = (props) => {
               )}>
               <p
                 className={classNames(
-                  "text-subtle ml-1 mr-5 w-40 flex-shrink-0",
+                  "text-subtle ml-1 mr-5 w-40 shrink-0",
                   customClassNames?.availableVariables?.variableItem?.variableName
                 )}>
                 {`{Organiser first name}`}
@@ -201,7 +201,7 @@ const CustomEventTypeModalForm: FC<CustomEventTypeModalFormProps> = (props) => {
               )}>
               <p
                 className={classNames(
-                  "text-subtle ml-1 mr-5 w-40 flex-shrink-0",
+                  "text-subtle ml-1 mr-5 w-40 shrink-0",
                   customClassNames?.availableVariables?.variableItem?.variableName
                 )}>
                 {`{Scheduler}`}
@@ -221,7 +221,7 @@ const CustomEventTypeModalForm: FC<CustomEventTypeModalFormProps> = (props) => {
               )}>
               <p
                 className={classNames(
-                  "text-subtle ml-1 mr-5 w-40 flex-shrink-0",
+                  "text-subtle ml-1 mr-5 w-40 shrink-0",
                   customClassNames?.availableVariables?.variableItem?.variableName
                 )}>
                 {`{Scheduler first name}`}
@@ -242,7 +242,7 @@ const CustomEventTypeModalForm: FC<CustomEventTypeModalFormProps> = (props) => {
                 )}>
                 <p
                   className={classNames(
-                    "text-subtle ml-1 mr-5 w-40 flex-shrink-0",
+                    "text-subtle ml-1 mr-5 w-40 shrink-0",
                     customClassNames?.availableVariables?.variableItem?.variableName
                   )}>
                   {`{Scheduler last name}`}
@@ -263,7 +263,7 @@ const CustomEventTypeModalForm: FC<CustomEventTypeModalFormProps> = (props) => {
               )}>
               <p
                 className={classNames(
-                  "text-subtle ml-1 mr-5 w-40 flex-shrink-0",
+                  "text-subtle ml-1 mr-5 w-40 shrink-0",
                   customClassNames?.availableVariables?.variableItem?.variableName
                 )}>
                 {`{Location}`}
@@ -296,7 +296,7 @@ const CustomEventTypeModalForm: FC<CustomEventTypeModalFormProps> = (props) => {
                   )}>
                   <p
                     className={classNames(
-                      "text-subtle ml-1 mr-5 w-40 flex-shrink-0",
+                      "text-subtle ml-1 mr-5 w-40 shrink-0",
                       customClassNames?.availableVariables?.bookingFieldItem?.fieldName
                     )}>
                     {`{${bookingfield}}`}
diff --git a/packages/features/eventtypes/components/tabs/advanced/EventAdvancedTab.tsx b/packages/features/eventtypes/components/tabs/advanced/EventAdvancedTab.tsx
index 35db19416f..3d002d2368 100644
--- a/packages/features/eventtypes/components/tabs/advanced/EventAdvancedTab.tsx
+++ b/packages/features/eventtypes/components/tabs/advanced/EventAdvancedTab.tsx
@@ -176,8 +176,8 @@ const destinationCalendarComponents = {
     );
     const selectedSecondaryEmailId = formMethods.getValues("secondaryEmailId") || -1;
     return (
-      <div className="border-subtle space-y-6 rounded-lg border p-6">
-        <div className="flex flex-col space-y-4 lg:flex-row lg:space-x-4 lg:space-y-0">
+      <div className="border-subtle stack-y-6 rounded-lg border p-6">
+        <div className="flex flex-col stack-y-4 lg:flex-row lg:space-x-4 lg:stack-y-0">
           {showConnectedCalendarSettings && (
             <div
               className={classNames(
@@ -222,7 +222,7 @@ const destinationCalendarComponents = {
                   color="minimal"
                   size="sm"
                   aria-label="edit custom name"
-                  className="hover:stroke-3 hover:text-emphasis min-w-fit !py-0 px-0 hover:bg-transparent"
+                  className="hover:stroke-3 hover:text-emphasis min-w-fit py-0! px-0 hover:bg-transparent"
                   onClick={() => setShowEventNameTip((old) => !old)}>
                   <Icon name="pencil" className="h-4 w-4" />
                 </Button>
@@ -230,7 +230,7 @@ const destinationCalendarComponents = {
             />
           </div>
         </div>
-        <div className="space-y-2">
+        <div className="stack-y-2">
           {showConnectedCalendarSettings && (
             <div className={classNames("w-full", customClassNames?.addToCalendarEmailOrganizer?.container)}>
               <Switch
@@ -300,8 +300,8 @@ const destinationCalendarComponents = {
   },
   DestinationCalendarSettingsSkeleton() {
     return (
-      <div className="border-subtle space-y-6 rounded-lg border p-6">
-        <div className="flex flex-col space-y-4 lg:flex-row lg:space-x-4 lg:space-y-0">
+      <div className="border-subtle stack-y-6 rounded-lg border p-6">
+        <div className="flex flex-col stack-y-4 lg:flex-row lg:space-x-4 lg:stack-y-0">
           <div className="flex w-full flex-col">
             <div className="bg-emphasis h-4 w-32 animate-pulse rounded-md" />
             <div className="bg-emphasis mt-2 h-10 w-full animate-pulse rounded-md" />
@@ -312,7 +312,7 @@ const destinationCalendarComponents = {
             <div className="bg-emphasis mt-2 h-10 w-full animate-pulse rounded-md" />
           </div>
         </div>
-        <div className="space-y-2">
+        <div className="stack-y-2">
           <div className="bg-emphasis h-6 w-64 animate-pulse rounded-md" />
           <div className="bg-emphasis h-10 w-full animate-pulse rounded-md" />
           <div className="bg-emphasis h-4 w-48 animate-pulse rounded-md" />
@@ -614,7 +614,7 @@ export const EventAdvancedTab = ({
   }, [isPlatform]);
 
   return (
-    <div className="flex flex-col space-y-4">
+    <div className="flex flex-col stack-y-4">
       <calendarComponents.CalendarSettings
         verifiedSecondaryEmails={verifiedSecondaryEmails}
         userEmail={userEmail}
@@ -638,12 +638,12 @@ export const EventAdvancedTab = ({
         />
       )}
 
-      <div className="border-subtle bg-muted rounded-lg border p-1">
+      <div className="border-subtle bg-cal-muted rounded-lg border p-1">
         <div className="p-5">
           <div className="text-default text-sm font-semibold leading-none ltr:mr-1 rtl:ml-1">
             {t("booking_questions_title")}
           </div>
-          <p className="text-subtle mt-1 max-w-[280px] break-words text-sm sm:max-w-[500px]">
+          <p className="text-subtle mt-1 max-w-[280px] wrap-break-word text-sm sm:max-w-[500px]">
             <LearnMoreLink
               t={t}
               i18nKey="booking_questions_description"
diff --git a/packages/features/eventtypes/components/tabs/advanced/RequiresConfirmationController.tsx b/packages/features/eventtypes/components/tabs/advanced/RequiresConfirmationController.tsx
index c72c691528..b94195073e 100644
--- a/packages/features/eventtypes/components/tabs/advanced/RequiresConfirmationController.tsx
+++ b/packages/features/eventtypes/components/tabs/advanced/RequiresConfirmationController.tsx
@@ -203,7 +203,7 @@ export default function RequiresConfirmationController({
                                         );
                                       }}
                                       className={classNames(
-                                        "border-default h-9! !m-0 block w-16 rounded-r-none border-r-0 text-sm [appearance:textfield] focus:z-10 focus:border-r",
+                                        "border-default m-0! block w-16 rounded-r-none border-r-0 text-sm [appearance:textfield] focus:z-10 focus:border-r",
                                         customClassNames?.conditionalConfirmationRadio?.timeInput
                                       )}
                                       defaultValue={metadata?.requiresConfirmationThreshold?.time || 30}
@@ -247,7 +247,7 @@ export default function RequiresConfirmationController({
                           id="notice"
                           value="notice"
                         />
-                        <div className="-ml-1 space-y-2">
+                        <div className="-ml-1 stack-y-2">
                           <CheckboxField
                             checked={requiresConfirmationWillBlockSlot}
                             descriptionAsLabel
diff --git a/packages/features/eventtypes/components/tabs/ai/AIEventController.tsx b/packages/features/eventtypes/components/tabs/ai/AIEventController.tsx
index 3c6596f91a..36f5f5b604 100644
--- a/packages/features/eventtypes/components/tabs/ai/AIEventController.tsx
+++ b/packages/features/eventtypes/components/tabs/ai/AIEventController.tsx
@@ -105,7 +105,7 @@ const TemplateFields = () => {
   const fields = templateFieldsMap[templateType as TemplateType];
 
   return (
-    <div className="space-y-4">
+    <div className="stack-y-4">
       {fields?.map((field) => (
         <div key={field.name}>
           <Controller
@@ -199,7 +199,7 @@ const AISettings = ({ eventType }: { eventType: EventTypeSetup }) => {
 
   return (
     <div>
-      <div className="space-y-4">
+      <div className="stack-y-4">
         <>
           <Label>{t("your_phone_number")}</Label>
           <Controller
diff --git a/packages/features/eventtypes/components/tabs/apps/EventAppsTab.tsx b/packages/features/eventtypes/components/tabs/apps/EventAppsTab.tsx
index 8d6ee1cb7d..3145642f26 100644
--- a/packages/features/eventtypes/components/tabs/apps/EventAppsTab.tsx
+++ b/packages/features/eventtypes/components/tabs/apps/EventAppsTab.tsx
@@ -171,7 +171,7 @@ export const EventAppsTab = ({
       </div>
       {/* TODO: Add back after salesforce v3 dev */}
       {!appsDisableProps.disabled && (
-        <div className="bg-muted mt-4 rounded-2xl p-4">
+        <div className="bg-cal-muted mt-4 rounded-2xl p-4">
           {!isPendingApps && notInstalledApps?.length ? (
             <div className="mb-4 flex flex-col">
               <Section.Title>{t("available_apps_lower_case")}</Section.Title>
diff --git a/packages/features/eventtypes/components/tabs/assignment/EventTeamAssignmentTab.tsx b/packages/features/eventtypes/components/tabs/assignment/EventTeamAssignmentTab.tsx
index b0296fb919..70b393c773 100644
--- a/packages/features/eventtypes/components/tabs/assignment/EventTeamAssignmentTab.tsx
+++ b/packages/features/eventtypes/components/tabs/assignment/EventTeamAssignmentTab.tsx
@@ -96,7 +96,7 @@ const ChildrenEventTypesList = ({
 } & Omit<Partial<ComponentProps<typeof ChildrenEventTypeSelect>>, "onChange" | "value">) => {
   const { t } = useLocale();
   return (
-    <div className={classNames("flex flex-col space-y-5", customClassNames?.assignToSelect?.container)}>
+    <div className={classNames("flex flex-col stack-y-5", customClassNames?.assignToSelect?.container)}>
       <div>
         <Label className={customClassNames?.assignToSelect?.label}>{t("assign_to")}</Label>
         <ChildrenEventTypeSelect
@@ -213,7 +213,7 @@ const FixedHosts = ({
             </Label>
             <p
               className={classNames(
-                "text-subtle max-w-full break-words text-sm leading-tight",
+                "text-subtle max-w-full wrap-break-word text-sm leading-tight",
                 customClassNames?.description
               )}>
               <FixedHostHelper t={t} />
@@ -475,7 +475,7 @@ const RoundRobinHosts = ({
             </Label>
             <p
               className={classNames(
-                "text-subtle max-w-full break-words text-sm leading-tight",
+                "text-subtle max-w-full wrap-break-word text-sm leading-tight",
                 customClassNames?.description
               )}>
               <LearnMoreLink
@@ -578,7 +578,7 @@ const ChildrenEventTypes = ({
   return (
     <div
       className={classNames(
-        "border-subtle mt-6 space-y-5 rounded-lg border px-4 py-6 sm:px-6",
+        "border-subtle mt-6 stack-y-5 rounded-lg border px-4 py-6 sm:px-6",
         customClassNames?.container
       )}>
       <div className="flex flex-col gap-4">
@@ -830,7 +830,7 @@ export const EventTeamAssignmentTab = ({
               </Label>
               <p
                 className={classNames(
-                  "text-subtle max-w-full break-words text-sm leading-tight",
+                  "text-subtle max-w-full wrap-break-word text-sm leading-tight",
                   customClassNames?.assignmentType?.description
                 )}>
                 {t("assignment_description")}
@@ -865,7 +865,7 @@ export const EventTeamAssignmentTab = ({
             <div className="border-subtle mt-4 flex flex-col rounded-md">
               <div className="border-subtle rounded-t-md border p-6 pb-5">
                 <Label className="mb-1 text-sm font-semibold">{t("rr_distribution_method")}</Label>
-                <p className="text-subtle max-w-full break-words text-sm leading-tight">
+                <p className="text-subtle max-w-full wrap-break-word text-sm leading-tight">
                   {t("rr_distribution_method_description")}
                 </p>
               </div>
diff --git a/packages/features/eventtypes/components/tabs/availability/EventAvailabilityTab.tsx b/packages/features/eventtypes/components/tabs/availability/EventAvailabilityTab.tsx
index 98bc0502ba..2cf1b62c99 100644
--- a/packages/features/eventtypes/components/tabs/availability/EventAvailabilityTab.tsx
+++ b/packages/features/eventtypes/components/tabs/availability/EventAvailabilityTab.tsx
@@ -202,7 +202,7 @@ const EventTypeScheduleDetails = memo(
 
     return (
       <div>
-        <div className={classNames("border-subtle space-y-4 border-x p-6", customClassNames?.tableContainer)}>
+        <div className={classNames("border-subtle stack-y-4 border-x p-6", customClassNames?.tableContainer)}>
           <ol className={classNames("table border-collapse text-sm", customClassNames?.table)}>
             {weekdayNames(i18n.language, weekStart, "long").map((day, index) => {
               const isAvailable = !!filterDays(index).length;
@@ -224,7 +224,7 @@ const EventTypeScheduleDetails = memo(
                   {isSchedulePending ? (
                     <SkeletonText className="block h-5 w-60" />
                   ) : isAvailable ? (
-                    <div className="space-y-3 text-right">
+                    <div className="stack-y-3 text-right">
                       {filterDays(index).map((dayRange, i) => (
                         <div
                           key={i}
@@ -259,7 +259,7 @@ const EventTypeScheduleDetails = memo(
             })}
           </ol>
         </div>
-        <div className="bg-muted border-subtle flex flex-col items-center gap-2 rounded-b-md border p-6 sm:flex-row sm:items-center sm:justify-between">
+        <div className="bg-cal-muted border-subtle flex flex-col items-center gap-2 rounded-b-md border p-6 sm:flex-row sm:items-center sm:justify-between">
           <div className="flex flex-col gap-2">
             <span className="text-default flex items-center justify-center text-center text-sm sm:justify-start">
               <Icon name="globe" className="h-3.5 w-3.5 ltr:mr-2 rtl:ml-2" />
@@ -328,7 +328,7 @@ const EventTypeRestrictionScheduleDetails = memo(
 
     return (
       <div>
-        <div className={classNames("border-subtle space-y-4 border-x p-6", customClassNames?.tableContainer)}>
+        <div className={classNames("border-subtle stack-y-4 border-x p-6", customClassNames?.tableContainer)}>
           <ol className={classNames("table border-collapse text-sm", customClassNames?.table)}>
             {weekdayNames(i18n.language, weekStart, "long").map((day, index) => {
               const isAvailable = !!filterDays(index).length;
@@ -350,7 +350,7 @@ const EventTypeRestrictionScheduleDetails = memo(
                   {isSchedulePending ? (
                     <SkeletonText className="block h-5 w-60" />
                   ) : isAvailable ? (
-                    <div className="space-y-3 text-right">
+                    <div className="stack-y-3 text-right">
                       {filterDays(index).map((dayRange, i) => (
                         <div
                           key={i}
@@ -385,7 +385,7 @@ const EventTypeRestrictionScheduleDetails = memo(
             })}
           </ol>
         </div>
-        <div className="bg-muted border-subtle flex flex-col justify-center gap-2 rounded-b-md border p-6 sm:flex-row sm:justify-between">
+        <div className="bg-cal-muted border-subtle flex flex-col justify-center gap-2 rounded-b-md border p-6 sm:flex-row sm:justify-between">
           <div className="flex flex-col gap-2">
             <span
               className={classNames(
@@ -609,7 +609,7 @@ const EventTypeSchedule = ({
       ) : (
         isManagedEventType &&
         fieldName === "schedule" && (
-          <p className="!mt-2 ml-1 text-sm text-gray-600">{t("members_default_schedule_description")}</p>
+          <p className="mt-2! ml-1 text-sm text-gray-600">{t("members_default_schedule_description")}</p>
         )
       )}
     </div>
@@ -730,7 +730,7 @@ const TeamAvailability = ({
           </Label>
           <p
             className={classNames(
-              "text-subtle max-w-full break-words text-sm leading-tight",
+              "text-subtle max-w-full wrap-break-word text-sm leading-tight",
               customClassNames?.chooseHostSchedulesLabelDescription
             )}>
             {t("hosts_schedule_description")}
@@ -759,7 +759,7 @@ const TeamAvailability = ({
               ))}
             </ul>
           ) : (
-            <p className="text-subtle max-w-full break-words text-sm leading-tight">
+            <p className="text-subtle max-w-full wrap-break-word text-sm leading-tight">
               {t("no_hosts_description")}
             </p>
           )}
@@ -821,8 +821,8 @@ const UseTeamEventScheduleSettingsToggle = ({
   );
 
   return (
-    <div className="space-y-4">
-      <div className="border-subtle space-y-6 rounded-lg border p-6">
+    <div className="stack-y-4">
+      <div className="border-subtle stack-y-6 rounded-lg border p-6">
         <SettingsToggle
           checked={!useHostSchedulesForTeamEvent}
           onCheckedChange={toggleScheduleState}
@@ -846,7 +846,7 @@ const UseTeamEventScheduleSettingsToggle = ({
         )}
       </div>
       {!isPlatform && isRestrictionScheduleEnabled ? (
-        <div className="border-subtle space-y-6 rounded-lg border p-6">
+        <div className="border-subtle stack-y-6 rounded-lg border p-6">
           <SettingsToggle
             checked={restrictScheduleForHosts}
             onCheckedChange={toggleRestrictScheduleState}
diff --git a/packages/features/eventtypes/components/tabs/instant/InstantEventController.tsx b/packages/features/eventtypes/components/tabs/instant/InstantEventController.tsx
index d0c8c76a7b..4d6674e441 100644
--- a/packages/features/eventtypes/components/tabs/instant/InstantEventController.tsx
+++ b/packages/features/eventtypes/components/tabs/instant/InstantEventController.tsx
@@ -175,7 +175,7 @@ export default function InstantEventController({
                         />
                         <div>
                           <Label>{t("only_show_if_parameter_set")}</Label>
-                          <div className="space-y-2">
+                          <div className="stack-y-2">
                             {parameters.map((parameter, index) => (
                               <div key={index} className="flex gap-2">
                                 <TextField
diff --git a/packages/features/eventtypes/components/tabs/limits/EventLimitsTab.tsx b/packages/features/eventtypes/components/tabs/limits/EventLimitsTab.tsx
index cff38b7c45..84b5d8e40b 100644
--- a/packages/features/eventtypes/components/tabs/limits/EventLimitsTab.tsx
+++ b/packages/features/eventtypes/components/tabs/limits/EventLimitsTab.tsx
@@ -145,7 +145,7 @@ function RangeLimitRadioItem({
       <div>
         <div
           className={classNames(
-            "me-2 ms-0 mt-2 w-full sm:ms-2 sm:mt-0 sm:w-auto",
+            "mr-2 ml-0 mt-2 w-full sm:ml-2 sm:mt-0 sm:w-auto",
             customClassNames?.datePickerWraper
           )}>
           <Controller
@@ -243,7 +243,7 @@ function RollingLimitRadioItem({
             value={getSelectedOption()}
             defaultValue={getSelectedOption()}
             className={classNames(
-              "!mt-0 ml-2 w-28 shrink sm:w-36",
+              "mt-0! ml-2 w-28 shrink sm:w-36",
               customClassNames?.periodTypeSelect?.select
             )}
             innerClassNames={customClassNames?.periodTypeSelect?.innerClassNames}
@@ -356,7 +356,7 @@ const MinimumBookingNoticeInput = React.forwardRef<
           label={t("minimum_booking_notice")}
           type="number"
           placeholder="0"
-          className={classNames("mb-0 h-9 ltr:mr-2 rtl:ml-2", customClassNames?.input)}
+          className={classNames("mb-0 h-8 ltr:mr-2 rtl:ml-2", customClassNames?.input)}
           min={0}
         />
         <input type="hidden" ref={ref} {...passThroughProps} />
@@ -365,7 +365,7 @@ const MinimumBookingNoticeInput = React.forwardRef<
         isSearchable={false}
         isDisabled={passThroughProps.disabled}
         className={classNames(
-          "mb-0 ml-2 h-9 w-full capitalize md:min-w-[150px] md:max-w-[200px]",
+          "mb-0 ml-2 w-full capitalize md:min-w-[150px] md:max-w-[200px]",
           customClassNames?.select
         )}
         innerClassNames={customClassNames?.innerClassNames}
@@ -420,10 +420,10 @@ export const EventLimitsTab = ({ eventType, customClassNames }: EventLimitsTabPr
     <div>
       <div
         className={classNames(
-          "border-subtle space-y-6 rounded-lg border p-6",
+          "border-subtle stack-y-6 rounded-lg border p-6",
           customClassNames?.bufferAndNoticeSection?.container
         )}>
-        <div className="flex flex-col space-y-4  lg:flex-row lg:space-x-4 lg:space-y-0">
+        <div className="flex flex-col stack-y-4  lg:flex-row lg:space-x-4 lg:stack-y-0">
           <div
             className={classNames(
               "w-full",
@@ -517,7 +517,7 @@ export const EventLimitsTab = ({ eventType, customClassNames }: EventLimitsTabPr
             />
           </div>
         </div>
-        <div className="flex flex-col space-y-4 lg:flex-row lg:space-x-4 lg:space-y-0">
+        <div className="flex flex-col stack-y-4 lg:flex-row lg:space-x-4 lg:stack-y-0">
           <div
             className={classNames(
               "w-full",
diff --git a/packages/features/eventtypes/components/tabs/setup/EventSetupTab.tsx b/packages/features/eventtypes/components/tabs/setup/EventSetupTab.tsx
index 830e4005eb..2f842d39f1 100644
--- a/packages/features/eventtypes/components/tabs/setup/EventSetupTab.tsx
+++ b/packages/features/eventtypes/components/tabs/setup/EventSetupTab.tsx
@@ -106,10 +106,10 @@ export const EventSetupTab = (
 
   return (
     <div>
-      <div className={classNames("space-y-4", customClassNames?.wrapper)}>
+      <div className={classNames("stack-y-4", customClassNames?.wrapper)}>
         <div
           className={classNames(
-            "border-subtle space-y-6 rounded-lg border p-6",
+            "border-subtle stack-y-6 rounded-lg border p-6",
             customClassNames?.titleSection?.container
           )}>
           <TextField
@@ -193,7 +193,7 @@ export const EventSetupTab = (
           {multipleDuration ? (
             <div
               className={classNames(
-                "space-y-6",
+                "stack-y-6",
                 customClassNames?.durationSection?.multipleDuration?.availableDurationsSelect?.container
               )}>
               <div>
@@ -212,7 +212,7 @@ export const EventSetupTab = (
                   isSearchable={false}
                   isDisabled={lengthLockedProps.disabled}
                   className={classNames(
-                    "h-auto !min-h-[36px] text-sm",
+                    "h-auto min-h-[36px]! text-sm",
                     customClassNames?.durationSection?.multipleDuration?.availableDurationsSelect?.select
                   )}
                   innerClassNames={
@@ -312,7 +312,7 @@ export const EventSetupTab = (
             />
           )}
           {!lengthLockedProps.disabled && (
-            <div className="!mt-4 [&_label]:my-1 [&_label]:font-normal">
+            <div className="mt-4! [&_label]:my-1 [&_label]:font-normal">
               <SettingsToggle
                 title={t("allow_multiple_durations")}
                 checked={multipleDuration !== undefined}
diff --git a/packages/features/eventtypes/components/tabs/webhooks/EventWebhooksTab.tsx b/packages/features/eventtypes/components/tabs/webhooks/EventWebhooksTab.tsx
index 9a1cc5d409..cb9b671864 100644
--- a/packages/features/eventtypes/components/tabs/webhooks/EventWebhooksTab.tsx
+++ b/packages/features/eventtypes/components/tabs/webhooks/EventWebhooksTab.tsx
@@ -150,7 +150,7 @@ export const EventWebhooksTab = ({ eventType }: Pick<EventTypeSetupProps, "event
                       <div className="flex justify-between">
                         <div>
                           <div className="text-default text-sm font-semibold">{t("webhooks")}</div>
-                          <p className="text-subtle max-w-[280px] break-words text-sm sm:max-w-[500px]">
+                          <p className="text-subtle max-w-[280px] wrap-break-word text-sm sm:max-w-[500px]">
                             {t("add_webhook_description", { appName: APP_NAME })}
                           </p>
                         </div>
diff --git a/packages/features/eventtypes/components/tabs/workflows/EventWorkfowsTab.tsx b/packages/features/eventtypes/components/tabs/workflows/EventWorkfowsTab.tsx
index 12591e8ac0..7741d31fa0 100644
--- a/packages/features/eventtypes/components/tabs/workflows/EventWorkfowsTab.tsx
+++ b/packages/features/eventtypes/components/tabs/workflows/EventWorkfowsTab.tsx
@@ -268,7 +268,7 @@ function EventWorkflowsTab(props: Props) {
           )}
           {data?.workflows && sortedWorkflows.length > 0 ? (
             <div>
-              <div className="space-y-4">
+              <div className="stack-y-4">
                 {sortedWorkflows.map((workflow) => {
                   return (
                     <WorkflowListItem
diff --git a/packages/features/filters/components/TeamsFilter.tsx b/packages/features/filters/components/TeamsFilter.tsx
index 7d6311a447..674da6853e 100644
--- a/packages/features/filters/components/TeamsFilter.tsx
+++ b/packages/features/filters/components/TeamsFilter.tsx
@@ -157,7 +157,7 @@ export const FilterCheckboxField = forwardRef<HTMLInputElement, Props>(
     return (
       <div
         data-testid={testId}
-        className="hover:bg-muted flex items-center py-2 pl-3 pr-2.5 transition hover:cursor-pointer">
+        className="hover:bg-cal-muted flex items-center py-2 pl-3 pr-2.5 transition hover:cursor-pointer">
         <label className="flex w-full max-w-full items-center justify-between hover:cursor-pointer">
           <div className="flex items-center truncate">
             {icon && (
@@ -178,7 +178,7 @@ export const FilterCheckboxField = forwardRef<HTMLInputElement, Props>(
               {...rest}
               ref={ref}
               type="checkbox"
-              className="text-emphasis dark:text-muted focus:ring-emphasis border-default bg-default h-4 w-4 rounded transition hover:cursor-pointer"
+              className="text-emphasis dark:text-muted focus:ring-emphasis border-default bg-default checked:border-transparent! checked:bg-gray-800! h-4 w-4 rounded-[4px] transition hover:cursor-pointer"
             />
           </div>
         </label>
diff --git a/packages/features/flags/components/AssignFeatureSheet.tsx b/packages/features/flags/components/AssignFeatureSheet.tsx
index cae631010d..f0e9868109 100644
--- a/packages/features/flags/components/AssignFeatureSheet.tsx
+++ b/packages/features/flags/components/AssignFeatureSheet.tsx
@@ -97,7 +97,7 @@ export function AssignFeatureSheet({ flag, open, onOpenChange }: AssignFeatureSh
 
   return (
     <Sheet open={open} onOpenChange={handleClose}>
-      <SheetContent className="bg-muted">
+      <SheetContent className="bg-cal-muted">
         <SheetHeader>
           <SheetTitle>Assign: {flag.slug}</SheetTitle>
         </SheetHeader>
@@ -112,7 +112,7 @@ export function AssignFeatureSheet({ flag, open, onOpenChange }: AssignFeatureSh
           </div>
           {isPending ? (
             <SkeletonContainer>
-              <div className="space-y-3">
+              <div className="stack-y-3">
                 {[...Array(5)].map((_, i) => (
                   <SkeletonText key={i} className="h-16 w-full" />
                 ))}
@@ -120,14 +120,14 @@ export function AssignFeatureSheet({ flag, open, onOpenChange }: AssignFeatureSh
             </SkeletonContainer>
           ) : teams && teams.length > 0 ? (
             <>
-              <div className="space-y-2">
+              <div className="stack-y-2">
                 {teams.map((team) => (
                   <button
                     key={team.id}
                     type="button"
                     onClick={() => handleToggleTeam(team.id, team.hasFeature)}
                     disabled={isLoading}
-                    className="bg-default border-subtle hover:bg-muted flex w-full items-center justify-between rounded-lg border p-4 text-left transition-colors disabled:cursor-not-allowed disabled:opacity-50">
+                    className="bg-default border-subtle hover:bg-cal-muted flex w-full items-center justify-between rounded-lg border p-4 text-left transition-colors disabled:cursor-not-allowed disabled:opacity-50">
                     <div className="flex items-center gap-3">
                       <div className="relative">
                         {team.isOrganization ? (
diff --git a/packages/features/flags/components/FlagAdminList.tsx b/packages/features/flags/components/FlagAdminList.tsx
index 86339e89dc..1a7962dbf5 100644
--- a/packages/features/flags/components/FlagAdminList.tsx
+++ b/packages/features/flags/components/FlagAdminList.tsx
@@ -35,7 +35,7 @@ export const FlagAdminList = () => {
 
   return (
     <>
-      <div className="space-y-4">
+      <div className="stack-y-4">
         {sortedTypes.map((type) => (
           <PanelCard key={type} title={type.replace(/_/g, " ")} collapsible defaultCollapsed={false}>
             <List roundContainer noBorderTreatment>
diff --git a/packages/features/flags/pages/flag-listing-view.tsx b/packages/features/flags/pages/flag-listing-view.tsx
index 06ffcdb5f4..0ba4de2508 100644
--- a/packages/features/flags/pages/flag-listing-view.tsx
+++ b/packages/features/flags/pages/flag-listing-view.tsx
@@ -10,7 +10,7 @@ import { FlagAdminList } from "../components/FlagAdminList";
 const SkeletonLoader = () => {
   return (
     <SkeletonContainer>
-      <div className="divide-subtle mb-8 mt-6 space-y-6">
+      <div className="divide-subtle mb-8 mt-6 stack-y-6">
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
       </div>
diff --git a/packages/features/form-builder/Components.tsx b/packages/features/form-builder/Components.tsx
index 09ac0f2d3f..4ebbbc1b1c 100644
--- a/packages/features/form-builder/Components.tsx
+++ b/packages/features/form-builder/Components.tsx
@@ -164,7 +164,7 @@ export const Components: Record<FieldType, Component> = {
           {variant.fields.map((variantField) => (
             <InputField
               // Because the container is flex(and thus margin is being computed towards container height), I need to explicitly ensure that margin-bottom for the input becomes 0, which is mb-2 otherwise
-              className="!mb-0"
+              className="mb-0!"
               showAsteriskIndicator={true}
               key={variantField.name}
               name={variantField.name}
@@ -452,7 +452,7 @@ export const Components: Record<FieldType, Component> = {
                         type="radio"
                         disabled={readOnly}
                         name={name}
-                        className="bg-default after:bg-default border-emphasis focus:ring-brand-default hover:bg-subtle hover:after:bg-subtle dark:checked:after:bg-brand-accent flex h-4 w-4 cursor-pointer items-center justify-center text-[--cal-brand] transition after:h-[6px] after:w-[6px] after:rounded-full after:content-[''] after:hover:block focus:ring-2 focus:ring-offset-0 ltr:mr-2 rtl:ml-2 dark:checked:hover:text-[--cal-brand]"
+                        className="bg-default after:bg-default border-emphasis focus:ring-brand-default hover:bg-subtle hover:after:bg-subtle dark:checked:after:bg-brand-accent flex h-4 w-4 cursor-pointer items-center justify-center text-(--cal-brand) transition after:h-[6px] after:w-[6px] after:rounded-full after:content-[''] after:hover:block focus:ring-2 focus:ring-offset-0 ltr:mr-2 rtl:ml-2 dark:checked:hover:text-(--cal-brand)"
                         value={option.value}
                         onChange={(e) => {
                           setValue({
diff --git a/packages/features/form-builder/FormBuilder.tsx b/packages/features/form-builder/FormBuilder.tsx
index e133ff1f78..4d732d1263 100644
--- a/packages/features/form-builder/FormBuilder.tsx
+++ b/packages/features/form-builder/FormBuilder.tsx
@@ -152,7 +152,7 @@ export const FormBuilder = function FormBuilder({
           {LockedIcon}
         </div>
         <div className="flex items-start justify-between">
-          <p className="text-subtle mt-1 max-w-[280px] break-words text-sm sm:max-w-[500px]">{description}</p>
+          <p className="text-subtle mt-1 max-w-[280px] wrap-break-word text-sm sm:max-w-[500px]">{description}</p>
           {showPhoneAndEmailToggle && (
             <ToggleGroup
               value={(() => {
@@ -210,7 +210,7 @@ export const FormBuilder = function FormBuilder({
         <p className="text-default mt-5 text-sm font-semibold leading-none ltr:mr-1 rtl:ml-1">
           {t("questions")}
         </p>
-        <p className="text-subtle mt-1 max-w-[280px] break-words text-sm sm:max-w-[500px]">
+        <p className="text-subtle mt-1 max-w-[280px] wrap-break-word text-sm sm:max-w-[500px]">
           {t("all_info_your_booker_provide")}
         </p>
         <ul ref={parent} className="border-subtle divide-subtle mt-4 divide-y rounded-md border">
@@ -270,7 +270,7 @@ export const FormBuilder = function FormBuilder({
               <li
                 key={field.name}
                 data-testid={`field-${field.name}`}
-                className="hover:bg-muted group relative flex items-center justify-between p-4 transition">
+                className="hover:bg-cal-muted group relative flex items-center justify-between p-4 transition">
                 {!disabled && (
                   <>
                     {index >= 1 && (
@@ -313,7 +313,7 @@ export const FormBuilder = function FormBuilder({
                       ))}
                     </div>
                   </div>
-                  <p className="text-subtle max-w-[280px] break-words pt-1 text-sm sm:max-w-[500px]">
+                  <p className="text-subtle max-w-[280px] wrap-break-word pt-1 text-sm sm:max-w-[500px]">
                     {fieldType.label}
                   </p>
                 </div>
@@ -460,12 +460,12 @@ function Options({
   return (
     <div className={className}>
       <Label>{label}</Label>
-      <div className="bg-muted rounded-md p-4" data-testid="options-container">
+      <div className="bg-cal-muted rounded-md p-4" data-testid="options-container">
         <ul ref={animationRef} className="flex flex-col gap-3">
           {value?.map((option, index) => (
             <li key={index}>
               <div className="flex items-center gap-2">
-                <div className="relative flex-grow">
+                <div className="relative grow">
                   <Input
                     required
                     value={option.label}
@@ -486,7 +486,7 @@ function Options({
                   {value.length > 2 && !readOnly && (
                     <Button
                       type="button"
-                      className="absolute right-1 top-1/2 -translate-y-1/2 hover:!bg-transparent focus:!bg-transparent focus:!outline-none focus:!ring-0"
+                      className="absolute right-1 top-1/2 -translate-y-1/2 hover:bg-transparent! focus:bg-transparent! focus:outline-none! focus:ring-0!"
                       size="sm"
                       color="minimal"
                       StartIcon="x"
diff --git a/packages/features/form-builder/FormBuilderField.tsx b/packages/features/form-builder/FormBuilderField.tsx
index 0558246b89..3288772d61 100644
--- a/packages/features/form-builder/FormBuilderField.tsx
+++ b/packages/features/form-builder/FormBuilderField.tsx
@@ -172,7 +172,7 @@ const WithLabel = ({
           field.type !== "multiemail" &&
           field.label && (
             <div className="mb-2 flex items-center">
-              <Label className="!mb-0 flex items-center" htmlFor={htmlFor}>
+              <Label className="mb-0! flex items-center" htmlFor={htmlFor}>
                 {renderLabel(field)}
                 <span className="text-emphasis -mb-1 ml-1 text-sm font-medium leading-none">
                   {!readOnly && field.required ? "*" : ""}
diff --git a/packages/features/form/components/CheckboxField.tsx b/packages/features/form/components/CheckboxField.tsx
index 1dbcbbc2e4..9b7da470da 100644
--- a/packages/features/form/components/CheckboxField.tsx
+++ b/packages/features/form/components/CheckboxField.tsx
@@ -1,8 +1,8 @@
 import type { InputHTMLAttributes } from "react";
 import React, { forwardRef } from "react";
 
-import { InfoBadge } from "@calcom/ui/components/badge";
 import classNames from "@calcom/ui/classNames";
+import { InfoBadge } from "@calcom/ui/components/badge";
 
 type Props = InputHTMLAttributes<HTMLInputElement> & {
   label?: React.ReactNode;
@@ -48,7 +48,7 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
                     {...rest}
                     ref={ref}
                     type="checkbox"
-                    className="text-emphasis focus:ring-emphasis dark:text-muted border-default bg-default h-4 w-4 rounded transition"
+                    className="text-emphasis focus:ring-emphasis dark:text-muted border-default bg-default checked:border-transparent! checked:bg-gray-800! h-4 w-4 rounded-[4px] transition"
                   />
                 </div>
                 <span className="ms-2 text-sm">{description}</span>
diff --git a/packages/features/insights/components/BookedByCell.tsx b/packages/features/insights/components/BookedByCell.tsx
index f5f2eb371d..ab713702d2 100644
--- a/packages/features/insights/components/BookedByCell.tsx
+++ b/packages/features/insights/components/BookedByCell.tsx
@@ -22,7 +22,7 @@ export function BookedByCell({
     <div className="flex min-w-[200px] flex-wrap gap-1">
       {attendees.map((attendee) => {
         const tooltipContent = (
-          <div className="space-y-1">
+          <div className="stack-y-1">
             <div>
               {t("email")}: {attendee.email}
             </div>
diff --git a/packages/features/insights/components/CellWithOverflowX.tsx b/packages/features/insights/components/CellWithOverflowX.tsx
index ac269fb8c9..c48238e8fd 100644
--- a/packages/features/insights/components/CellWithOverflowX.tsx
+++ b/packages/features/insights/components/CellWithOverflowX.tsx
@@ -25,7 +25,7 @@ export function CellWithOverflowX({
         }}>
         {children}
       </div>
-      <div className="from-default absolute right-0 top-0 hidden h-full w-8 bg-gradient-to-l to-transparent " />
+      <div className="from-default absolute right-0 top-0 hidden h-full w-8 bg-linear-to-l to-transparent " />
     </div>
   );
 }
diff --git a/packages/features/insights/components/ChartCard.tsx b/packages/features/insights/components/ChartCard.tsx
index 58175d5d31..f39be19c08 100644
--- a/packages/features/insights/components/ChartCard.tsx
+++ b/packages/features/insights/components/ChartCard.tsx
@@ -115,7 +115,7 @@ function Legend({
                 </span>
               </Tooltip>
             </button>
-            {index < items.length - 1 && <div className="bg-muted h-5 w-[1px]" />}
+            {index < items.length - 1 && <div className="bg-cal-muted h-5 w-px" />}
           </Fragment>
         );
       })}
diff --git a/packages/features/insights/components/booking/BookingKPICards.tsx b/packages/features/insights/components/booking/BookingKPICards.tsx
index 3bfcd174b3..0fb7b45009 100644
--- a/packages/features/insights/components/booking/BookingKPICards.tsx
+++ b/packages/features/insights/components/booking/BookingKPICards.tsx
@@ -77,7 +77,7 @@ export const BookingKPICards = () => {
   if (!isSuccess || !data) return null;
 
   return (
-    <div className="space-y-4">
+    <div className="stack-y-4">
       <ChartCard title={t("events")}>
         <StatContainer>
           {eventCategories.map((item, index) => (
@@ -117,7 +117,7 @@ const LoadingKPICards = (props: {
   const { t } = useLocale();
 
   return (
-    <div className="space-y-4">
+    <div className="stack-y-4">
       <ChartCard title={t("events")}>
         <StatContainer>
           {eventCategories.map((item, index) => (
diff --git a/packages/features/insights/components/booking/RecentNoShowGuestsChart.tsx b/packages/features/insights/components/booking/RecentNoShowGuestsChart.tsx
index 4017520ae7..7a9fcc3ac6 100644
--- a/packages/features/insights/components/booking/RecentNoShowGuestsChart.tsx
+++ b/packages/features/insights/components/booking/RecentNoShowGuestsChart.tsx
@@ -48,7 +48,7 @@ export const RecentNoShowGuestsChart = () => {
               <div className="flex w-full items-center justify-between">
                 <div className="flex gap-2">
                   <div className="bg-subtle h-16 w-[2px] shrink-0 rounded-sm" />
-                  <div className="flex flex-col space-y-1">
+                  <div className="flex flex-col stack-y-1">
                     <p className="text-sm font-medium">{item.guestName}</p>
                     <div className="text-subtle text-sm leading-tight">
                       <p>{item.eventTypeName}</p>
diff --git a/packages/features/insights/filters/DateTargetSelector.tsx b/packages/features/insights/filters/DateTargetSelector.tsx
index f559e660dd..369d85b71e 100644
--- a/packages/features/insights/filters/DateTargetSelector.tsx
+++ b/packages/features/insights/filters/DateTargetSelector.tsx
@@ -60,7 +60,7 @@ export const DateTargetSelector = ({ value, onChange }: DateTargetSelectorProps)
                   onChange(option.value);
                   setOpen(false);
                 }}
-                className="flex items-center gap-2 px-4 py-3">
+                className="flex items-center gap-2 px-4 py-3 rounded-none">
                 <div>
                   <div className="font-medium">{option.label}</div>
                   <div className="text-muted-foreground text-sm">{option.description}</div>
diff --git a/packages/features/kbar/Kbar.tsx b/packages/features/kbar/Kbar.tsx
index f541ddf6b8..e4aa2c7dcd 100644
--- a/packages/features/kbar/Kbar.tsx
+++ b/packages/features/kbar/Kbar.tsx
@@ -255,12 +255,12 @@ export const KBarContent = () => {
   return (
     <KBarPortal>
       <KBarPositioner className="overflow-scroll">
-        <KBarAnimator className="bg-default z-10 w-full max-w-screen-sm overflow-hidden rounded-md shadow-lg">
+        <KBarAnimator className="bg-default z-10 w-full max-w-(--breakpoint-sm) overflow-hidden rounded-md shadow-lg">
           <div className="border-subtle flex items-center justify-center border-b">
             <Icon name="search" className="text-default mx-3 h-4 w-4" />
             <KBarSearch
               defaultPlaceholder={t("kbar_search_placeholder")}
-              className="bg-default placeholder:text-subtle text-default w-full rounded-sm py-2.5 focus-visible:outline-none"
+              className="bg-default placeholder:text-subtle text-default w-full rounded-sm py-2.5 focus-visible:outline-none px-0 border-0 focus:ring-0"
               value={inputText}
               onChange={(e) => {
                 setInputText(e.currentTarget.value.trim());
@@ -282,7 +282,7 @@ export const KBarContent = () => {
             <span className="pr-2">{t("close")}</span>
           </div>
         </KBarAnimator>
-        <div className="z-1 fixed inset-0 bg-neutral-800 bg-opacity-70" />
+        <div className="z-1 fixed inset-0 bg-neutral-800/70" />
       </KBarPositioner>
     </KBarPortal>
   );
@@ -297,7 +297,7 @@ export const KBarTrigger = () => {
           color="minimal"
           onClick={query.toggle}
           className="text-default hover:bg-subtle todesktop:hover:!bg-transparent lg:hover:bg-emphasis lg:hover:text-emphasis group flex rounded-md px-3 py-2 text-sm font-medium transition lg:px-2">
-          <Icon name="search" className="h-4 w-4 flex-shrink-0 text-inherit" />
+          <Icon name="search" className="h-4 w-4 shrink-0 text-inherit" />
         </button>
       </Tooltip>
     </>
diff --git a/packages/features/schedules/components/DateOverrideInputDialog.tsx b/packages/features/schedules/components/DateOverrideInputDialog.tsx
index 84d9035729..493a8fd0e5 100644
--- a/packages/features/schedules/components/DateOverrideInputDialog.tsx
+++ b/packages/features/schedules/components/DateOverrideInputDialog.tsx
@@ -164,7 +164,7 @@ const DateOverrideForm = ({
       <div className="relative mt-8 flex w-full flex-col sm:mt-0 sm:p-4 md:p-8">
         {selectedDates[0] ? (
           <>
-            <div className="mb-4 flex-grow space-y-4">
+            <div className="mb-4 grow stack-y-4">
               <p className="text-medium text-emphasis text-sm">{t("date_overrides_dialog_which_hours")}</p>
               <div>
                 {datesUnavailable ? (
diff --git a/packages/features/schedules/components/Schedule.tsx b/packages/features/schedules/components/Schedule.tsx
index 9a6ad2a8d0..9031e0895e 100644
--- a/packages/features/schedules/components/Schedule.tsx
+++ b/packages/features/schedules/components/Schedule.tsx
@@ -609,10 +609,10 @@ const CopyTimes = ({
   };
 
   return (
-    <div className="space-y-2 py-2">
+    <div className="stack-y-2 py-2">
       <div className="p-2">
         <p className="h6 text-emphasis pb-3 pl-1 text-xs font-medium uppercase">{t("copy_times_to")}</p>
-        <ol className="space-y-2">
+        <ol className="stack-y-2">
           <li key="select all">
             <CheckboxField
               description={t("select_all")}
diff --git a/packages/features/schedules/components/ScheduleListItem.tsx b/packages/features/schedules/components/ScheduleListItem.tsx
index d8e6cafd0d..2163c82142 100644
--- a/packages/features/schedules/components/ScheduleListItem.tsx
+++ b/packages/features/schedules/components/ScheduleListItem.tsx
@@ -44,9 +44,9 @@ export function ScheduleListItem({
 
   return (
     <li key={schedule.id}>
-      <div className="hover:bg-muted flex items-center justify-between px-3 py-5 transition sm:px-4">
+      <div className="hover:bg-cal-muted flex items-center justify-between px-3 py-5 transition sm:px-4">
         <div className="group flex w-full items-center justify-between ">
-          <Link href={redirectUrl} className="flex-grow truncate text-sm" title={schedule.name}>
+          <Link href={redirectUrl} className="grow truncate text-sm" title={schedule.name}>
             <div className="space-x-2 rtl:space-x-reverse">
               <span className="text-emphasis truncate font-medium">{schedule.name}</span>
               {schedule.isDefault && (
diff --git a/packages/features/settings/BookerLayoutSelector.tsx b/packages/features/settings/BookerLayoutSelector.tsx
index af01891798..ed491a806b 100644
--- a/packages/features/settings/BookerLayoutSelector.tsx
+++ b/packages/features/settings/BookerLayoutSelector.tsx
@@ -65,7 +65,7 @@ export const BookerLayoutSelector = ({
         <Label className={classNames("mb-1 font-semibold", isOuterBorder ? "text-sm" : "text-base")}>
           {title ? title : t("layout")}
         </Label>
-        <p className="text-subtle max-w-full break-words text-sm leading-tight">
+        <p className="text-subtle max-w-full wrap-break-word text-sm leading-tight">
           {description ? description : t("bookerlayout_description")}
         </p>
       </div>
@@ -176,7 +176,7 @@ const BookerLayoutFields = ({
     if (user?.defaultBookerLayouts) onChange(user.defaultBookerLayouts);
   };
   return (
-    <div className={classNames("space-y-5", !isOuterBorder && "border-subtle border-x px-6 py-8")}>
+    <div className={classNames("stack-y-5", !isOuterBorder && "border-subtle border-x px-6 py-8")}>
       <div
         className={classNames(
           "flex flex-col gap-5 transition-opacity sm:flex-row sm:gap-3",
diff --git a/packages/features/settings/SectionBottomActions.tsx b/packages/features/settings/SectionBottomActions.tsx
index e128ce235f..c2a2bf7fb0 100644
--- a/packages/features/settings/SectionBottomActions.tsx
+++ b/packages/features/settings/SectionBottomActions.tsx
@@ -14,7 +14,7 @@ const SectionBottomActions = ({
   return (
     <div
       className={classNames(
-        "border-subtle bg-muted flex rounded-b-lg border px-6 py-4",
+        "border-subtle bg-cal-muted flex rounded-b-lg border px-6 py-4",
         align === "end" && "justify-end",
         className
       )}>
diff --git a/packages/features/settings/appDir/SettingsHeader.tsx b/packages/features/settings/appDir/SettingsHeader.tsx
index 6121107937..9d6944cfa7 100644
--- a/packages/features/settings/appDir/SettingsHeader.tsx
+++ b/packages/features/settings/appDir/SettingsHeader.tsx
@@ -76,7 +76,7 @@ export default function Header({
               )}
             </div>
           </div>
-          <div className={classNames("flex-shrink-0", ctaClassName)}>{CTA}</div>
+          <div className={classNames("shrink-0", ctaClassName)}>{CTA}</div>
         </div>
       </header>
       <Suspense fallback={<Icon name="loader" className="mx-auto my-5 animate-spin" />}>{children}</Suspense>
diff --git a/packages/features/settings/outOfOffice/CreateOrEditOutOfOfficeModal.tsx b/packages/features/settings/outOfOffice/CreateOrEditOutOfOfficeModal.tsx
index 6f71a862c0..7ab2fba6b8 100644
--- a/packages/features/settings/outOfOffice/CreateOrEditOutOfOfficeModal.tsx
+++ b/packages/features/settings/outOfOffice/CreateOrEditOutOfOfficeModal.tsx
@@ -348,7 +348,7 @@ export const CreateOrEditOutOfOfficeEntryModal = ({
               />
             </div>
 
-            <div className="bg-muted my-4 rounded-xl p-5">
+            <div className="bg-cal-muted my-4 rounded-xl p-5">
               <div className="flex flex-row">
                 <Switch
                   disabled={!hasTeamPlan}
diff --git a/packages/features/settings/outOfOffice/OutOfOfficeEntriesList.tsx b/packages/features/settings/outOfOffice/OutOfOfficeEntriesList.tsx
index d62c62b218..2e447f2b3f 100644
--- a/packages/features/settings/outOfOffice/OutOfOfficeEntriesList.tsx
+++ b/packages/features/settings/outOfOffice/OutOfOfficeEntriesList.tsx
@@ -397,15 +397,15 @@ function OutOfOfficeEntriesListContent({
               <div className="mt-4 h-[102px]">
                 <div className="flex h-full flex-col items-center justify-center p-2 md:mt-0 md:p-0">
                   <div className="relative">
-                    <div className="dark:bg-darkgray-50 absolute -left-3 -top-3 -z-20 h-[70px] w-[70px] -rotate-[24deg] rounded-3xl border-2 border-[#e5e7eb] p-8 opacity-40 dark:opacity-80">
+                    <div className="dark:bg-darkgray-50 absolute -left-3 -top-3 -z-20 h-[70px] w-[70px] -rotate-24 rounded-3xl border-2 border-[#e5e7eb] p-8 opacity-40 dark:opacity-80">
                       <div className="w-12" />
                     </div>
-                    <div className="dark:bg-darkgray-50 absolute -top-3 left-3 -z-10 h-[70px] w-[70px] rotate-[24deg] rounded-3xl border-2 border-[#e5e7eb] p-8 opacity-60 dark:opacity-90">
+                    <div className="dark:bg-darkgray-50 absolute -top-3 left-3 -z-10 h-[70px] w-[70px] rotate-24 rounded-3xl border-2 border-[#e5e7eb] p-8 opacity-60 dark:opacity-90">
                       <div className="w-12" />
                     </div>
                     <div className="dark:bg-darkgray-50 text-inverted relative z-0 flex h-[70px] w-[70px] items-center justify-center rounded-3xl border-2 border-[#e5e7eb] bg-white">
                       <Icon name="clock" size={28} className="text-black" />
-                      <div className="dark:bg-darkgray-50 absolute right-4 top-5 h-[12px] w-[12px] rotate-[56deg] bg-white text-lg font-bold" />
+                      <div className="dark:bg-darkgray-50 absolute right-4 top-5 h-[12px] w-[12px] rotate-56 bg-white text-lg font-bold" />
                       <span className="absolute right-4 top-3 font-sans text-sm font-extrabold text-black">
                         z
                       </span>
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index 7daa51bc71..f05a62ea1c 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -175,7 +175,7 @@ export function ShellMain(props: LayoutProps) {
                     props.backPath
                       ? "relative"
                       : "pwa:bottom-[max(7rem,_calc(5rem_+_env(safe-area-inset-bottom)))] fixed bottom-20 z-40 ltr:right-4 rtl:left-4 md:z-auto md:ltr:right-0 md:rtl:left-0",
-                    "flex-shrink-0 [-webkit-app-region:no-drag] md:relative md:bottom-auto md:right-auto"
+                    "shrink-0 [-webkit-app-region:no-drag] md:relative md:bottom-auto md:right-auto"
                   )}>
                   {isLocaleReady && props.CTA}
                 </div>
diff --git a/packages/features/shell/SideBar.tsx b/packages/features/shell/SideBar.tsx
index 9e5483d9fb..586e9405f8 100644
--- a/packages/features/shell/SideBar.tsx
+++ b/packages/features/shell/SideBar.tsx
@@ -75,7 +75,7 @@ export function SideBar({ bannersHeight, user }: SideBarProps) {
       <aside
         style={!isPlatformPages ? sidebarStylingAttributes : {}}
         className={classNames(
-          "bg-muted border-muted fixed left-0 hidden h-full w-14 flex-col overflow-y-auto overflow-x-hidden border-r md:sticky md:flex lg:w-56 lg:px-3",
+          "bg-cal-muted border-muted fixed left-0 hidden h-full w-14 flex-col overflow-y-auto overflow-x-hidden border-r md:sticky md:flex lg:w-56 lg:px-3",
           !isPlatformPages && "max-h-screen"
         )}>
         <div className="flex h-full flex-col justify-between py-3 lg:pt-4">
@@ -114,7 +114,7 @@ export function SideBar({ bannersHeight, user }: SideBarProps) {
                 className="todesktop:block hover:text-emphasis text-subtle group hidden text-sm font-medium">
                 <Icon
                   name="arrow-left"
-                  className="group-hover:text-emphasis text-subtle h-4 w-4 flex-shrink-0"
+                  className="group-hover:text-emphasis text-subtle h-4 w-4 shrink-0"
                 />
               </button>
               <button
@@ -123,7 +123,7 @@ export function SideBar({ bannersHeight, user }: SideBarProps) {
                 className="todesktop:block hover:text-emphasis text-subtle group hidden text-sm font-medium">
                 <Icon
                   name="arrow-right"
-                  className="group-hover:text-emphasis text-subtle h-4 w-4 flex-shrink-0"
+                  className="group-hover:text-emphasis text-subtle h-4 w-4 shrink-0"
                 />
               </button>
               {!!user?.org && (
@@ -165,8 +165,8 @@ export function SideBar({ bannersHeight, user }: SideBarProps) {
                     <Icon
                       name={item.isLoading ? "rotate-cw" : item.icon}
                       className={classNames(
-                        "h-4 w-4 flex-shrink-0 [&[aria-current='page']]:text-inherit",
-                        "me-3 md:mx-auto lg:ltr:mr-2 lg:rtl:ml-2",
+                        "h-4 w-4 shrink-0 aria-[aria-current='page']:text-inherit",
+                        "ml-3 md:mx-auto lg:ltr:mr-2 lg:rtl:ml-2",
                         item.isLoading && "animate-spin"
                       )}
                       aria-hidden="true"
diff --git a/packages/features/shell/TopNav.tsx b/packages/features/shell/TopNav.tsx
index 360a41c38a..53fff2e424 100644
--- a/packages/features/shell/TopNav.tsx
+++ b/packages/features/shell/TopNav.tsx
@@ -22,15 +22,15 @@ function TopNav() {
     <>
       <nav
         style={isEmbed ? { display: "none" } : {}}
-        className="bg-muted border-subtle sticky top-0 z-40 flex w-full items-center justify-between border-b bg-opacity-50 px-4 py-1.5 backdrop-blur-lg sm:p-4 md:hidden">
+        className="bg-cal-muted/50 border-subtle sticky top-0 z-40 flex w-full items-center justify-between border-b px-4 py-1.5 backdrop-blur-lg sm:p-4 md:hidden">
         <Link href="/event-types">
           <Logo />
         </Link>
         <div className="flex items-center gap-2 self-center">
-          <span className="hover:bg-muted hover:text-emphasis text-default group flex items-center rounded-full text-sm font-medium transition lg:hidden">
+          <span className="hover:bg-cal-muted hover:text-emphasis text-default group flex items-center rounded-full text-sm font-medium transition lg:hidden">
             <KBarTrigger />
           </span>
-          <button className="hover:bg-muted hover:text-subtle text-muted rounded-full p-1 transition focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2">
+          <button className="hover:bg-cal-muted hover:text-subtle text-muted rounded-full p-1 transition focus:outline-none focus:ring-2 focus:ring-black focus:ring-offset-2">
             <span className="sr-only">{t("settings")}</span>
             <Link href="/settings/my-account/profile">
               <Icon name="settings" className="text-default h-4 w-4" aria-hidden="true" />
diff --git a/packages/features/shell/components/WelcomeToCalcomModal.tsx b/packages/features/shell/components/WelcomeToCalcomModal.tsx
index 2491a3785d..07fed314ee 100644
--- a/packages/features/shell/components/WelcomeToCalcomModal.tsx
+++ b/packages/features/shell/components/WelcomeToCalcomModal.tsx
@@ -83,7 +83,7 @@ export function WelcomeToCalcomModal() {
           <div className="mb-2 flex flex-col gap-3">
             {features.map((feature) => (
               <div key={feature} className="flex items-start gap-2">
-                <Icon name="check" className="text-muted mt-0.5 h-4 w-4 flex-shrink-0" />
+                <Icon name="check" className="text-muted mt-0.5 h-4 w-4 shrink-0" />
                 <span className="text-default text-sm font-medium leading-tight">{t(feature)}</span>
               </div>
             ))}
diff --git a/packages/features/shell/navigation/Navigation.tsx b/packages/features/shell/navigation/Navigation.tsx
index 5a1c809ca9..d7f11a0aa7 100644
--- a/packages/features/shell/navigation/Navigation.tsx
+++ b/packages/features/shell/navigation/Navigation.tsx
@@ -272,7 +272,7 @@ const MobileNavigation = ({ isPlatformNavigation = false }: { isPlatformNavigati
     <>
       <nav
         className={classNames(
-          "pwa:pb-[max(0.25rem,env(safe-area-inset-bottom))] pwa:-mx-2 bg-muted border-subtle fixed bottom-0 left-0 z-30 flex w-full border-t bg-opacity-40 px-1 shadow backdrop-blur-md md:hidden",
+          "pwa:pb-[max(0.25rem,env(safe-area-inset-bottom))] pwa:-mx-2 bg-cal-muted/40 border-subtle fixed bottom-0 left-0 z-30 flex w-full border-t px-1 shadow backdrop-blur-md md:hidden",
           isEmbed && "hidden"
         )}>
         {mobileNavigationBottomItems.map((item) => (
diff --git a/packages/features/shell/navigation/NavigationItem.tsx b/packages/features/shell/navigation/NavigationItem.tsx
index 34a93b2f67..553e2e4aad 100644
--- a/packages/features/shell/navigation/NavigationItem.tsx
+++ b/packages/features/shell/navigation/NavigationItem.tsx
@@ -118,7 +118,7 @@ export const NavigationItem: React.FC<{
           open={isTooltipOpen}
           content={
             hasChildren ? (
-              <div className="pointer-events-auto flex flex-col space-y-1 p-1">
+              <div className="pointer-events-auto flex flex-col stack-y-1 p-1">
                 <span className="text-subtle px-2 text-xs font-semibold uppercase tracking-wide">
                   {t(item.name)}
                 </span>
@@ -164,7 +164,7 @@ export const NavigationItem: React.FC<{
             }}
             className={classNames(
               "todesktop:py-[7px] text-default group flex w-full items-center rounded-md px-2 py-1.5 text-sm font-medium transition",
-              "[&[aria-current='page']]:!bg-transparent",
+              "aria-[aria-current='page']:bg-transparent!",
               "[&[aria-current='page']]:text-emphasis mt-0.5 text-sm",
               isLocaleReady
                 ? "hover:bg-subtle todesktop:[&[aria-current='page']]:bg-emphasis todesktop:hover:bg-transparent hover:text-emphasis"
@@ -174,7 +174,7 @@ export const NavigationItem: React.FC<{
               <Icon
                 name={item.isLoading ? "rotate-cw" : item.icon}
                 className={classNames(
-                  "todesktop:!text-blue-500 mr-2 h-4 w-4 flex-shrink-0 rtl:ml-2 md:ltr:mx-auto lg:ltr:mr-2",
+                  "todesktop:!text-blue-500 mr-2 h-4 w-4 shrink-0 rtl:ml-2 md:ltr:mx-auto lg:ltr:mr-2",
                   item.isLoading && "animate-spin"
                 )}
                 aria-hidden="true"
@@ -205,7 +205,7 @@ export const NavigationItem: React.FC<{
             className={classNames(
               "todesktop:py-[7px] text-default group flex items-center rounded-md px-2 py-1.5 text-sm font-medium transition",
               item.child
-                ? `[&[aria-current='page']]:!bg-transparent`
+                ? `aria-[aria-current='page']:bg-transparent!`
                 : `[&[aria-current='page']]:bg-emphasis`,
               isChild
                 ? `[&[aria-current='page']]:text-emphasis [&[aria-current='page']]:bg-emphasis hidden h-8 pl-16 lg:flex lg:pl-11 ${
@@ -221,7 +221,7 @@ export const NavigationItem: React.FC<{
               <Icon
                 name={item.isLoading ? "rotate-cw" : item.icon}
                 className={classNames(
-                  "todesktop:!text-blue-500 mr-2 h-4 w-4 flex-shrink-0 rtl:ml-2 md:ltr:mx-auto lg:ltr:mr-2 [&[aria-current='page']]:text-inherit",
+                  "todesktop:!text-blue-500 mr-2 h-4 w-4 shrink-0 rtl:ml-2 md:ltr:mx-auto lg:ltr:mr-2 aria-[aria-current='page']:text-inherit",
                   item.isLoading && "animate-spin"
                 )}
                 aria-hidden="true"
@@ -270,13 +270,13 @@ export const MobileNavigationItem: React.FC<{
       key={item.name}
       href={item.href}
       target={item.target}
-      className="[&[aria-current='page']]:text-emphasis hover:text-default text-muted relative my-2 min-w-0 flex-1 overflow-hidden rounded-md !bg-transparent p-1 text-center text-xs font-medium focus:z-10 sm:text-sm"
+      className="[&[aria-current='page']]:text-emphasis hover:text-default text-muted relative my-2 min-w-0 flex-1 overflow-hidden rounded-md bg-transparent! p-1 text-center text-xs font-medium focus:z-10 sm:text-sm"
       aria-current={current ? "page" : undefined}>
       {item.badge && <div className="absolute right-1 top-1">{item.badge}</div>}
       {item.icon && (
         <Icon
           name={item.icon}
-          className="[&[aria-current='page']]:text-emphasis  mx-auto mb-1 block h-5 w-5 flex-shrink-0 text-center text-inherit"
+          className="[&[aria-current='page']]:text-emphasis  mx-auto mb-1 block h-5 w-5 shrink-0 text-center text-inherit"
           aria-hidden="true"
           aria-current={current ? "page" : undefined}
         />
@@ -311,7 +311,7 @@ export const MobileNavigationMoreItem: React.FC<{
               {item.icon && (
                 <Icon
                   name={item.icon}
-                  className="h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3"
+                  className="h-5 w-5 shrink-0 ltr:mr-3 rtl:ml-3"
                   aria-hidden="true"
                 />
               )}
@@ -325,7 +325,7 @@ export const MobileNavigationMoreItem: React.FC<{
                 <li key={childItem.name} className="border-subtle border-t">
                   <Link
                     href={buildHref(childItem)}
-                    className="hover:bg-muted flex items-center p-4 pl-12 transition">
+                    className="hover:bg-cal-muted flex items-center p-4 pl-12 transition">
                     <span className="text-default font-medium">
                       {isLocaleReady ? t(childItem.name) : <SkeletonText />}
                     </span>
@@ -339,7 +339,7 @@ export const MobileNavigationMoreItem: React.FC<{
         <Link href={item.href} className="hover:bg-subtle flex items-center justify-between p-5 transition">
           <span className="text-default flex items-center font-semibold ">
             {item.icon && (
-              <Icon name={item.icon} className="h-5 w-5 flex-shrink-0 ltr:mr-3 rtl:ml-3" aria-hidden="true" />
+              <Icon name={item.icon} className="h-5 w-5 shrink-0 ltr:mr-3 rtl:ml-3" aria-hidden="true" />
             )}
             {isLocaleReady ? t(item.name) : <SkeletonText />}
           </span>
diff --git a/packages/features/shell/user-dropdown/ProfileDropdown.tsx b/packages/features/shell/user-dropdown/ProfileDropdown.tsx
index f5f2e4de02..e665ddc31f 100644
--- a/packages/features/shell/user-dropdown/ProfileDropdown.tsx
+++ b/packages/features/shell/user-dropdown/ProfileDropdown.tsx
@@ -49,14 +49,14 @@ export function ProfileDropdown() {
           className={classNames(
             "hover:bg-emphasis todesktop:!bg-transparent group mx-0 flex w-full cursor-pointer appearance-none items-center rounded-full px-2 py-1.5 text-left outline-none transition focus:outline-none focus:ring-0 md:rounded-none lg:rounded"
           )}>
-          <span className="flex w-full flex-grow items-center justify-around gap-2 text-sm font-medium leading-none">
+          <span className="flex w-full grow items-center justify-around gap-2 text-sm font-medium leading-none">
             <Avatar alt={currentOption.label || ""} size="xsm" />
-            <span className="block w-20 overflow-hidden overflow-ellipsis whitespace-nowrap">
+            <span className="block w-20 overflow-hidden text-ellipsis whitespace-nowrap">
               {currentOption.label}
             </span>
             <Icon
               name="chevron-down"
-              className="group-hover:text-subtle text-muted h-4 w-4 flex-shrink-0 transition rtl:mr-4"
+              className="group-hover:text-subtle text-muted h-4 w-4 shrink-0 transition rtl:mr-4"
               aria-hidden="true"
             />
           </span>
diff --git a/packages/features/shell/user-dropdown/UserDropdown.tsx b/packages/features/shell/user-dropdown/UserDropdown.tsx
index aaf25d4151..a2debbf6c6 100644
--- a/packages/features/shell/user-dropdown/UserDropdown.tsx
+++ b/packages/features/shell/user-dropdown/UserDropdown.tsx
@@ -93,7 +93,7 @@ export function UserDropdown({ small }: UserDropdownProps) {
           <span
             className={classNames(
               small ? "h-4 w-4" : "h-5 w-5 ltr:mr-2 rtl:ml-2",
-              "relative flex-shrink-0 rounded-full"
+              "relative shrink-0 rounded-full"
             )}>
             <Avatar
               size={small ? "xs" : "xsm"}
@@ -104,20 +104,20 @@ export function UserDropdown({ small }: UserDropdownProps) {
             <span
               className={classNames(
                 "border-muted absolute -bottom-1 -right-1 rounded-full border bg-green-500",
-                small ? "-bottom-0.5 -right-0.5 h-2.5 w-2.5" : "-bottom-0.5 -right-0 h-2 w-2"
+                small ? "-bottom-0.5 -right-0.5 h-2.5 w-2.5" : "-bottom-0.5 right-0 h-2 w-2"
               )}
             />
           </span>
           {!small && (
-            <span className="flex flex-grow items-center gap-2">
-              <span className="w-24 flex-shrink-0 text-sm leading-none">
+            <span className="flex grow items-center gap-2">
+              <span className="w-24 shrink-0 text-sm leading-none">
                 <span className="text-emphasis block truncate py-0.5 font-medium leading-normal">
                   {isPending ? "Loading..." : user?.name ?? "Nameless User"}
                 </span>
               </span>
               <Icon
                 name="chevron-down"
-                className="group-hover:text-subtle text-muted h-4 w-4 flex-shrink-0 transition rtl:mr-4"
+                className="group-hover:text-subtle text-muted h-4 w-4 shrink-0 transition rtl:mr-4"
                 aria-hidden="true"
               />
             </span>
diff --git a/packages/features/tailwind.config.js b/packages/features/tailwind.config.js
deleted file mode 100644
index 825b805357..0000000000
--- a/packages/features/tailwind.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const base = require("@calcom/config/tailwind-preset");
-
-module.exports = {
-  ...base,
-  content: [...base.content, "/**/*.{js,ts,jsx,tsx}"],
-};
diff --git a/packages/features/timezone-buddy/components/AvailabilityEditSheet.tsx b/packages/features/timezone-buddy/components/AvailabilityEditSheet.tsx
index 7f11448229..4a0c2541ef 100644
--- a/packages/features/timezone-buddy/components/AvailabilityEditSheet.tsx
+++ b/packages/features/timezone-buddy/components/AvailabilityEditSheet.tsx
@@ -74,7 +74,7 @@ const DateOverride = ({
   return (
     <div className="">
       <Label>{t("date_overrides")}</Label>
-      <div className="space-y-2">
+      <div className="stack-y-2">
         <DateOverrideList
           excludedDates={excludedDates}
           replace={replace}
@@ -195,7 +195,7 @@ export function AvailabilityEditSheetForm(props: Props & { data: Data; isPending
             </div>
           )}
 
-          <SheetBody className="mt-4 flex flex-col space-y-4">
+          <SheetBody className="mt-4 flex flex-col stack-y-4">
             <div>
               <Label className="text-emphasis">
                 <>{t("timezone")}</>
@@ -213,7 +213,7 @@ export function AvailabilityEditSheetForm(props: Props & { data: Data; isPending
             <div className="mt-4">
               <Label className="text-emphasis">{t("members_default_schedule")}</Label>
               {/* Remove padding from schedule without touching the component */}
-              <div className="[&>*:first-child]:!p-0">
+              <div className="[&>*:first-child]:p-0!">
                 <Schedule
                   control={form.control}
                   name="schedule"
diff --git a/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx b/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx
index e976c55906..db9a02af74 100644
--- a/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx
+++ b/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx
@@ -52,7 +52,7 @@ function UpgradeTeamTip() {
       background="/tips/teams"
       features={[]}
       buttons={
-        <div className="space-y-2 rtl:space-x-reverse sm:space-x-2">
+        <div className="stack-y-2 rtl:space-x-reverse sm:space-x-2">
           <ButtonGroup>
             <Button color="primary" href={`${WEBAPP_URL}/settings/teams/new`}>
               {t("create_team")}
@@ -111,7 +111,7 @@ function AvailabilitySliderTableContent(props: { isOrg: boolean }) {
         cell: ({ row }) => {
           const { username, email, timeZone, name, avatarUrl, profile } = row.original;
           return (
-            <div className="max-w-64 flex flex-shrink-0 items-center gap-2 overflow-hidden">
+            <div className="max-w-64 flex shrink-0 items-center gap-2 overflow-hidden">
               <UserAvatar
                 size="sm"
                 user={{
diff --git a/packages/features/timezone-buddy/components/TimeDial.tsx b/packages/features/timezone-buddy/components/TimeDial.tsx
index e9f26d1073..0df2b66447 100644
--- a/packages/features/timezone-buddy/components/TimeDial.tsx
+++ b/packages/features/timezone-buddy/components/TimeDial.tsx
@@ -184,7 +184,7 @@ export function TimeDial({ timezone, dateRanges }: TimeDialProps) {
                       className={classNames(
                         "flex h-8 flex-col items-center justify-center",
                         isInRange ? "text-emphasis" : "",
-                        isInRange && !rangeOverlap ? "bg-success" : "",
+                        isInRange && !rangeOverlap ? "bg-cal-success" : "",
                         hours ? "" : "bg-subtle font-medium"
                       )}
                       onMouseEnter={handleMouseEnter}
diff --git a/packages/features/tips/UpgradeTip.tsx b/packages/features/tips/UpgradeTip.tsx
index 18d7be8699..25bbd69048 100644
--- a/packages/features/tips/UpgradeTip.tsx
+++ b/packages/features/tips/UpgradeTip.tsx
@@ -63,7 +63,7 @@ export function UpgradeTip({
 
       <div className="mt-4 grid-cols-3 md:grid md:gap-4">
         {features.map((feature) => (
-          <div key={feature.title} className="bg-muted mb-4 min-h-[180px] w-full rounded-md  p-8 md:mb-0">
+          <div key={feature.title} className="bg-cal-muted mb-4 min-h-[180px] w-full rounded-md  p-8 md:mb-0">
             {feature.icon}
             <h2 className="font-cal text-emphasis mt-4 text-lg">{feature.title}</h2>
             <p className="text-default">{feature.description}</p>
diff --git a/packages/features/troubleshooter/Troubleshooter.tsx b/packages/features/troubleshooter/Troubleshooter.tsx
index e9c060908a..3c96fd2a45 100644
--- a/packages/features/troubleshooter/Troubleshooter.tsx
+++ b/packages/features/troubleshooter/Troubleshooter.tsx
@@ -45,9 +45,9 @@ const TroubleshooterComponent = ({ month }: TroubleshooterProps) => {
             gridTemplateRows: "70px auto",
           }}
           className={classNames(
-            "bg-default dark:bg-muted text-default flex min-h-full w-full flex-col items-center sm:transition-[width] sm:duration-300"
+            "bg-default dark:bg-cal-muted text-default flex min-h-full w-full flex-col items-center sm:transition-[width] sm:duration-300"
           )}>
-          <div className="bg-default dark:bg-muted sticky top-0 z-10 [grid-area:header]">
+          <div className="bg-default dark:bg-cal-muted sticky top-0 z-10 [grid-area:header]">
             <TroubleshooterHeader extraDays={extraDays} isMobile={isMobile} />
           </div>
           <div className="sticky top-0 z-10 ps-6">
diff --git a/packages/features/troubleshooter/components/AvailabilitySchedulesContainer.tsx b/packages/features/troubleshooter/components/AvailabilitySchedulesContainer.tsx
index 451ab5b3b6..173e655838 100644
--- a/packages/features/troubleshooter/components/AvailabilitySchedulesContainer.tsx
+++ b/packages/features/troubleshooter/components/AvailabilitySchedulesContainer.tsx
@@ -29,7 +29,7 @@ function AvailabiltyItem() {
 export function AvailabiltySchedulesContainer() {
   const { t } = useLocale();
   return (
-    <div className="flex flex-col space-y-3">
+    <div className="flex flex-col stack-y-3">
       <p className="text-sm font-medium leading-none">{t("availabilty_schedules")}</p>
       <AvailabiltyItem />
       <Button color="secondary" className="justify-center gap-2">
diff --git a/packages/features/troubleshooter/components/CalendarToggleContainer.tsx b/packages/features/troubleshooter/components/CalendarToggleContainer.tsx
index 0c7230363c..67fc3fd153 100644
--- a/packages/features/troubleshooter/components/CalendarToggleContainer.tsx
+++ b/packages/features/troubleshooter/components/CalendarToggleContainer.tsx
@@ -86,7 +86,7 @@ export function CalendarToggleContainer() {
   const hasConnectedCalendars = data && data?.connectedCalendars.length > 0;
 
   return (
-    <div className="flex flex-col space-y-3">
+    <div className="flex flex-col stack-y-3">
       <p className="text-sm font-medium leading-none">{t("calendars_were_checking_for_conflicts")}</p>
       {hasConnectedCalendars && !isLoading ? (
         <>
diff --git a/packages/features/troubleshooter/components/ConnectedAppsContainer.tsx b/packages/features/troubleshooter/components/ConnectedAppsContainer.tsx
index 520408924f..00fe4898fc 100644
--- a/packages/features/troubleshooter/components/ConnectedAppsContainer.tsx
+++ b/packages/features/troubleshooter/components/ConnectedAppsContainer.tsx
@@ -27,7 +27,7 @@ function ConnectedAppsItem() {
 export function ConnectedAppsContainer() {
   const { t } = useLocale();
   return (
-    <div className="flex flex-col space-y-3">
+    <div className="flex flex-col stack-y-3">
       <p className="text-sm font-medium leading-none">{t("other_apps")}</p>
       <div className="[&>*:first-child]:rounded-t-md  [&>*:last-child]:rounded-b-md [&>*:last-child]:border-b">
         <ConnectedAppsItem />
diff --git a/packages/features/troubleshooter/components/TroubleshooterHeader.tsx b/packages/features/troubleshooter/components/TroubleshooterHeader.tsx
index 4240a5e593..b899447160 100644
--- a/packages/features/troubleshooter/components/TroubleshooterHeader.tsx
+++ b/packages/features/troubleshooter/components/TroubleshooterHeader.tsx
@@ -46,7 +46,7 @@ export function TroubleshooterHeader({ extraDays, isMobile }: { extraDays: numbe
 
   return (
     <div className="border-default relative z-10 flex border-b px-5 py-4 ltr:border-l rtl:border-r">
-      <div className="flex items-center gap-5 rtl:flex-grow">
+      <div className="flex items-center gap-5 rtl:grow">
         <FormattedSelectedDateRange />
         <ButtonGroup>
           <Button
diff --git a/packages/features/troubleshooter/components/TroubleshooterListItemContainer.tsx b/packages/features/troubleshooter/components/TroubleshooterListItemContainer.tsx
index 81a51c7328..fc5808f1be 100644
--- a/packages/features/troubleshooter/components/TroubleshooterListItemContainer.tsx
+++ b/packages/features/troubleshooter/components/TroubleshooterListItemContainer.tsx
@@ -36,7 +36,7 @@ export function TroubleshooterListItemContainer({
   return (
     <div className="[&>*:first-child]:rounded-t-md ">
       <TroubleshooterListItemHeader {...rest} />
-      <div className="border-subtle flex flex-col space-y-3 rounded-b-md border p-4">{children}</div>
+      <div className="border-subtle flex flex-col stack-y-3 rounded-b-md border p-4">{children}</div>
     </div>
   );
 }
diff --git a/packages/features/users/components/UserTable/EditSheet/DisplayInfo.tsx b/packages/features/users/components/UserTable/EditSheet/DisplayInfo.tsx
index 8745cf5844..3eeba29266 100644
--- a/packages/features/users/components/UserTable/EditSheet/DisplayInfo.tsx
+++ b/packages/features/users/components/UserTable/EditSheet/DisplayInfo.tsx
@@ -74,10 +74,10 @@ export function DisplayInfo({
                 </div>
               </Tooltip>
               {showLeftGradient && (
-                <div className="from-default pointer-events-none absolute left-0 top-0 h-full w-8 bg-gradient-to-r to-transparent" />
+                <div className="from-default pointer-events-none absolute left-0 top-0 h-full w-8 bg-linear-to-r to-transparent" />
               )}
               {showRightGradient && (
-                <div className="from-default pointer-events-none absolute right-0 top-0 h-full w-8 bg-gradient-to-l to-transparent" />
+                <div className="from-default pointer-events-none absolute right-0 top-0 h-full w-8 bg-linear-to-l to-transparent" />
               )}
             </div>
           </div>
diff --git a/packages/features/users/components/UserTable/EditSheet/EditUserForm.tsx b/packages/features/users/components/UserTable/EditSheet/EditUserForm.tsx
index d953dc61f4..0be79ca710 100644
--- a/packages/features/users/components/UserTable/EditSheet/EditUserForm.tsx
+++ b/packages/features/users/components/UserTable/EditSheet/EditUserForm.tsx
@@ -190,7 +190,7 @@ export function EditForm({
         <SheetHeader>
           <SheetTitle>{t("update_profile")}</SheetTitle>
         </SheetHeader>
-        <SheetBody className="bg-muted border-subtle mt-6 gap-4 rounded-xl border p-4">
+        <SheetBody className="bg-cal-muted border-subtle mt-6 gap-4 rounded-xl border p-4">
           <div className="">
             <Controller
               control={form.control}
@@ -419,7 +419,7 @@ function AttributesList(props: { selectedUserId: number }) {
                         }}
                       />
                       {attr.isWeightsEnabled && fieldValue?.options && (
-                        <div className="mt-3 space-y-2">
+                        <div className="mt-3 stack-y-2">
                           <Label>Weights</Label>
                           <div className="">
                             {fieldValue.options.map((option, idx) => {
diff --git a/packages/features/users/components/UserTable/EditSheet/EditUserSheet.tsx b/packages/features/users/components/UserTable/EditSheet/EditUserSheet.tsx
index 647ae72485..6feec7111e 100644
--- a/packages/features/users/components/UserTable/EditSheet/EditUserSheet.tsx
+++ b/packages/features/users/components/UserTable/EditSheet/EditUserSheet.tsx
@@ -83,8 +83,8 @@ export function EditUserSheet({
                     </p>
                   </div>
                 </SheetHeader>
-                <SheetBody className="flex flex-col space-y-4 p-4">
-                  <div className="mb-4 flex flex-col space-y-4">
+                <SheetBody className="flex flex-col stack-y-4 p-4">
+                  <div className="mb-4 flex flex-col stack-y-4">
                     <h3 className="text-emphasis mb-1 text-base font-semibold">{t("profile")}</h3>
                     <DisplayInfo
                       label="Cal"
@@ -111,7 +111,7 @@ export function EditUserSheet({
                   {usersAttributes && usersAttributes?.length > 0 && (
                     <div className="mt-4 flex flex-col">
                       <h3 className="text-emphasis mb-5 text-base font-semibold">{t("attributes")}</h3>
-                      <div className="flex flex-col space-y-4">
+                      <div className="flex flex-col stack-y-4">
                         {usersAttributes.map((attribute, index) => (
                           <>
                             <DisplayInfo
diff --git a/packages/features/users/components/UserTable/PlatformManagedUsersTable.tsx b/packages/features/users/components/UserTable/PlatformManagedUsersTable.tsx
index 9c6a0a1615..2226938173 100644
--- a/packages/features/users/components/UserTable/PlatformManagedUsersTable.tsx
+++ b/packages/features/users/components/UserTable/PlatformManagedUsersTable.tsx
@@ -304,7 +304,7 @@ function UserListTableContent({ oAuthClientId }: PlatformManagedUsersTableProps)
           </>
         }>
         {numberOfSelectedRows > 0 && (
-          <DataTableSelectionBar.Root className="!bottom-16 justify-center md:w-max">
+          <DataTableSelectionBar.Root className="bottom-16! justify-center md:w-max">
             <p className="text-brand-subtle px-2 text-center text-xs leading-none sm:text-sm sm:font-medium">
               {t("number_selected", { count: numberOfSelectedRows })}
             </p>
diff --git a/packages/features/users/components/UserTable/UserListTable.tsx b/packages/features/users/components/UserTable/UserListTable.tsx
index 1cee724620..a9a424a892 100644
--- a/packages/features/users/components/UserTable/UserListTable.tsx
+++ b/packages/features/users/components/UserTable/UserListTable.tsx
@@ -613,12 +613,12 @@ function UserListTableContent({
           </>
         }>
         {numberOfSelectedRows >= 2 && dynamicLinkVisible && (
-          <DataTableSelectionBar.Root className="!bottom-[7.3rem] md:!bottom-32">
+          <DataTableSelectionBar.Root className="bottom-[7.3rem]! md:bottom-32!">
             <DynamicLink table={table} domain={domain} />
           </DataTableSelectionBar.Root>
         )}
         {numberOfSelectedRows > 0 && (
-          <DataTableSelectionBar.Root className="!bottom-16 justify-center md:w-max">
+          <DataTableSelectionBar.Root className="bottom-16! justify-center md:w-max">
             <p className="text-brand-subtle shrink-0 px-2 text-center text-xs leading-none sm:text-sm sm:font-medium">
               {t("number_selected", { count: numberOfSelectedRows })}
             </p>
diff --git a/packages/features/users/components/UserTable/UserTableActions.tsx b/packages/features/users/components/UserTable/UserTableActions.tsx
index 062201a85c..cab769adfe 100644
--- a/packages/features/users/components/UserTable/UserTableActions.tsx
+++ b/packages/features/users/components/UserTable/UserTableActions.tsx
@@ -69,7 +69,7 @@ export function TableActions({
           <Dropdown>
             <DropdownMenuTrigger asChild>
               <Button
-                className="radix-state-open:rounded-r-md"
+                className="ltr:radix-state-open:rounded-r-(--btn-group-radius) rtl:radix-state-open:rounded-l-(--btn-group-radius)"
                 color="secondary"
                 variant="icon"
                 StartIcon="ellipsis"
diff --git a/packages/features/webhooks/components/WebhookForm.tsx b/packages/features/webhooks/components/WebhookForm.tsx
index c4a02e60be..67dd469add 100644
--- a/packages/features/webhooks/components/WebhookForm.tsx
+++ b/packages/features/webhooks/components/WebhookForm.tsx
@@ -459,7 +459,7 @@ const WebhookForm = (props: {
               {!!hasSecretKey && !changeSecret && (
                 <>
                   <Label className="font-sm text-emphasis font-medium">Secret</Label>
-                  <div className="bg-default space-y-0 rounded-md border-0 border-neutral-200 sm:mx-0 md:border">
+                  <div className="bg-default stack-y-0 rounded-md border-0 border-neutral-200 sm:mx-0 md:border">
                     <div className="text-emphasis rounded-sm border-b p-2 text-sm">
                       {t("forgotten_secret_description")}
                     </div>
@@ -541,7 +541,7 @@ const WebhookForm = (props: {
                 />
               </div>
               {useCustomTemplate && (
-                <div className="space-y-3">
+                <div className="stack-y-3">
                   <TextArea
                     name="customPayloadTemplate"
                     rows={8}
@@ -561,11 +561,11 @@ const WebhookForm = (props: {
                       {webhookVariables.map(({ category, variables }) => (
                         <div key={category} className="mb-4">
                           <h4 className="mb-2 text-sm font-medium">{category}</h4>
-                          <div className="space-y-2">
+                          <div className="stack-y-2">
                             {variables.map(({ name, variable, description }) => (
                               <div
                                 key={name}
-                                className="hover:bg-muted  cursor-pointer rounded p-2 text-sm transition-colors"
+                                className="hover:bg-cal-muted  cursor-pointer rounded p-2 text-sm transition-colors"
                                 onClick={() => {
                                   const currentValue = formMethods.getValues("payloadTemplate") || "{}";
                                   const updatedValue = insertVariableIntoTemplate(
diff --git a/packages/features/webhooks/components/WebhookTestDisclosure.tsx b/packages/features/webhooks/components/WebhookTestDisclosure.tsx
index c4e9683c7c..f224844475 100644
--- a/packages/features/webhooks/components/WebhookTestDisclosure.tsx
+++ b/packages/features/webhooks/components/WebhookTestDisclosure.tsx
@@ -54,7 +54,7 @@ export default function WebhookTestDisclosure() {
           {t("ping_test")}
         </Button>
       </div>
-      <div className="border-subtle space-y-0 rounded-b-lg border border-t-0 px-6 py-8 sm:mx-0">
+      <div className="border-subtle stack-y-0 rounded-b-lg border border-t-0 px-6 py-8 sm:mx-0">
         <div className="border-subtle flex justify-between rounded-t-lg border p-4">
           <div className="flex items-center space-x-1">
             <h3 className="text-emphasis self-center text-sm font-semibold leading-4">
@@ -67,10 +67,10 @@ export default function WebhookTestDisclosure() {
             )}
           </div>
         </div>
-        <div className="bg-muted border-subtle rounded-b-lg border border-t-0 p-4 font-mono text-[13px] leading-4">
+        <div className="bg-cal-muted border-subtle rounded-b-lg border border-t-0 p-4 font-mono text-[13px] leading-4">
           {!mutation.data && <p>{t("no_data_yet")}</p>}
           {mutation.status === "success" && mutation.data && (
-            <div className="space-y-2">
+            <div className="stack-y-2">
               <div>
                 <span className="text-subtle">{t("status")}:</span> <span className="text-emphasis">{mutation.data.status}</span>
               </div>
diff --git a/packages/features/webhooks/pages/webhook-new-skeleton.tsx b/packages/features/webhooks/pages/webhook-new-skeleton.tsx
index e45ada88bd..d08852ff3b 100644
--- a/packages/features/webhooks/pages/webhook-new-skeleton.tsx
+++ b/packages/features/webhooks/pages/webhook-new-skeleton.tsx
@@ -14,7 +14,7 @@ export const SkeletonLoader = () => {
       description={t("add_webhook_description", { appName: APP_NAME })}
       borderInShellHeader={true}>
       <SkeletonContainer>
-        <div className="divide-subtle border-subtle space-y-6 rounded-b-lg border border-t-0 px-6 py-4">
+        <div className="divide-subtle border-subtle stack-y-6 rounded-b-lg border border-t-0 px-6 py-4">
           <SkeletonText className="h-8 w-full" />
           <SkeletonText className="h-8 w-full" />
         </div>
diff --git a/packages/features/webhooks/pages/webhooks-skeleton.tsx b/packages/features/webhooks/pages/webhooks-skeleton.tsx
index 961e731d61..6b6fb5643b 100644
--- a/packages/features/webhooks/pages/webhooks-skeleton.tsx
+++ b/packages/features/webhooks/pages/webhooks-skeleton.tsx
@@ -14,7 +14,7 @@ export const SkeletonLoader = () => {
       borderInShellHeader={false}
       CTA={null}>
       <SkeletonContainer>
-        <div className="divide-subtle border-subtle mt-6 space-y-6 rounded-lg border px-6 py-4">
+        <div className="divide-subtle border-subtle mt-6 stack-y-6 rounded-lg border px-6 py-4">
           <SkeletonText className="h-8 w-full" />
           <SkeletonText className="h-8 w-full" />
         </div>
diff --git a/packages/features/webhooks/pages/webhooks-view.tsx b/packages/features/webhooks/pages/webhooks-view.tsx
index d6c3460e06..f1457c8fbb 100644
--- a/packages/features/webhooks/pages/webhooks-view.tsx
+++ b/packages/features/webhooks/pages/webhooks-view.tsx
@@ -53,7 +53,7 @@ const WebhooksList = ({ webhooksByViewer }: { webhooksByViewer: WebhooksByViewer
                     size="md"
                     className="inline-flex justify-center"
                   />
-                  <div className="text-emphasis ml-2 flex flex-grow items-center font-bold">
+                  <div className="text-emphasis ml-2 flex grow items-center font-bold">
                     {group.profile.name || ""}
                   </div>
                 </div>
diff --git a/packages/platform/atoms/availability/AvailabilitySettings.tsx b/packages/platform/atoms/availability/AvailabilitySettings.tsx
index 888a77c34f..92f2848910 100644
--- a/packages/platform/atoms/availability/AvailabilitySettings.tsx
+++ b/packages/platform/atoms/availability/AvailabilitySettings.tsx
@@ -234,7 +234,7 @@ const DateOverride = ({
       <p className={cn("text-subtle mb-4 text-sm", classNames?.description)}>
         {t("date_overrides_subtitle")}
       </p>
-      <div className="space-y-2">
+      <div className="stack-y-2">
         <DateOverrideList
           excludedDates={excludedDates}
           replace={replace}
@@ -279,12 +279,12 @@ const SmallScreenSideBar = ({ open, children }: { open: boolean; children: JSX.E
     <div
       className={classNames(
         open
-          ? "fadeIn fixed inset-0 z-50 bg-neutral-800 bg-opacity-70 transition-opacity dark:bg-opacity-70 sm:hidden"
+          ? "fadeIn fixed inset-0 z-50 bg-neutral-800/70 transition-opacity sm:hidden"
           : ""
       )}>
       <div
         className={classNames(
-          "bg-default fixed right-0 z-20 flex h-screen w-80 flex-col space-y-2 overflow-x-hidden rounded-md px-2 pb-3 transition-transform",
+          "bg-default fixed right-0 z-20 flex h-screen w-80 flex-col stack-y-2 overflow-x-hidden rounded-md px-2 pb-3 transition-transform",
           open ? "translate-x-0 opacity-100" : "translate-x-full opacity-0"
         )}>
         {open ? children : null}
@@ -429,7 +429,7 @@ export const AvailabilitySettings = forwardRef<AvailabilitySettingsFormRef, Avai
         }
         CTA={
           <div className={cn(customClassNames?.ctaClassName, "flex items-center justify-end")}>
-            <div className="sm:hover:bg-muted hidden items-center rounded-md px-2 transition sm:flex">
+            <div className="sm:hover:bg-cal-muted hidden items-center rounded-md px-2 transition sm:flex">
               {!openSidebar && allowSetToDefault ? (
                 <>
                   <Skeleton
@@ -493,12 +493,12 @@ export const AvailabilitySettings = forwardRef<AvailabilitySettingsFormRef, Avai
                 <div
                   className={classNames(
                     openSidebar
-                      ? "fadeIn fixed inset-0 z-50 bg-neutral-800 bg-opacity-70 transition-opacity dark:bg-opacity-70 sm:hidden"
+                      ? "fadeIn fixed inset-0 z-50 bg-neutral-800/70 transition-opacity sm:hidden"
                       : ""
                   )}>
                   <div
                     className={classNames(
-                      "bg-default fixed right-0 z-20 flex h-screen w-80 flex-col space-y-2 overflow-x-hidden rounded-md px-2 pb-3 transition-transform",
+                      "bg-default fixed right-0 z-20 flex h-screen w-80 flex-col stack-y-2 overflow-x-hidden rounded-md px-2 pb-3 transition-transform",
                       openSidebar ? "translate-x-0 opacity-100" : "translate-x-full opacity-0"
                     )}>
                     <div className="flex flex-row items-center pt-16">
@@ -561,7 +561,7 @@ export const AvailabilitySettings = forwardRef<AvailabilitySettingsFormRef, Avai
                       )}
                     </div>
 
-                    <div className="min-w-40 col-span-3 space-y-2 px-2 py-4 lg:col-span-1">
+                    <div className="min-w-40 col-span-3 stack-y-2 px-2 py-4 lg:col-span-1">
                       <div className="xl:max-w-80 w-full pr-4 sm:ml-0 sm:mr-36 sm:p-0">
                         <div>
                           <Skeleton
@@ -699,7 +699,7 @@ export const AvailabilitySettings = forwardRef<AvailabilitySettingsFormRef, Avai
                 </BookerStoreProvider>
               )}
             </div>
-            <div className="min-w-40 col-span-3 hidden space-y-2 md:block lg:col-span-1">
+            <div className="min-w-40 col-span-3 hidden stack-y-2 md:block lg:col-span-1">
               <div className="xl:max-w-80 w-full pr-4 sm:ml-0 sm:mr-36 sm:p-0">
                 <div>
                   <Skeleton
diff --git a/packages/platform/atoms/calendar-view/wrappers/CalendarViewPlatformWrapper.tsx b/packages/platform/atoms/calendar-view/wrappers/CalendarViewPlatformWrapper.tsx
index fc73fc72e3..c914a80d01 100644
--- a/packages/platform/atoms/calendar-view/wrappers/CalendarViewPlatformWrapper.tsx
+++ b/packages/platform/atoms/calendar-view/wrappers/CalendarViewPlatformWrapper.tsx
@@ -134,7 +134,7 @@ const CalendarViewPlatformWrapperComponent = (
 
   return (
     <AtomsWrapper>
-      <BookerSection area="header" className="bg-default dark:bg-muted sticky top-0 z-10">
+      <BookerSection area="header" className="bg-default dark:bg-cal-muted sticky top-0 z-10">
         <Header
           isCalendarView={true}
           isMyLink={true}
@@ -149,7 +149,7 @@ const CalendarViewPlatformWrapperComponent = (
         key="large-calendar"
         area="main"
         visible={true}
-        className="border-subtle sticky top-0 ml-[-1px] h-full md:border-l">
+        className="border-subtle sticky top-0 -ml-px h-full md:border-l">
         <LargeCalendar extraDays={7} schedule={schedule.data} isLoading={schedule.isPending} event={event} />
       </BookerSection>
     </AtomsWrapper>
diff --git a/packages/platform/atoms/connect/apple/AppleConnect.tsx b/packages/platform/atoms/connect/apple/AppleConnect.tsx
index 2384f92148..c395678cd2 100644
--- a/packages/platform/atoms/connect/apple/AppleConnect.tsx
+++ b/packages/platform/atoms/connect/apple/AppleConnect.tsx
@@ -86,7 +86,7 @@ export const AppleConnect: FC<Partial<Omit<OAuthConnectProps, "redir">>> = ({
 
   return (
     <AtomsWrapper>
-      <Dialog open={isDialogOpen}>
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
         <DialogTrigger asChild>
           <>
             {isMultiCalendar && (
@@ -147,7 +147,7 @@ export const AppleConnect: FC<Partial<Omit<OAuthConnectProps, "redir">>> = ({
               }
             }}>
             <fieldset
-              className="space-y-4"
+              className="stack-y-4"
               disabled={form.formState.isSubmitting}
               data-testid="apple-calendar-form">
               <TextField
diff --git a/packages/platform/atoms/connect/conferencing-apps/ConferencingAppsViewPlatformWrapper.tsx b/packages/platform/atoms/connect/conferencing-apps/ConferencingAppsViewPlatformWrapper.tsx
index 6c1c132e0d..a556ddb69e 100644
--- a/packages/platform/atoms/connect/conferencing-apps/ConferencingAppsViewPlatformWrapper.tsx
+++ b/packages/platform/atoms/connect/conferencing-apps/ConferencingAppsViewPlatformWrapper.tsx
@@ -58,7 +58,7 @@ type RemoveAppParams = { callback: () => void; app?: App["slug"] };
 const SkeletonLoader = () => {
   return (
     <SkeletonContainer>
-      <div className="divide-subtle border-subtle space-y-6 rounded-b-lg border border-t-0 px-6 py-4">
+      <div className="divide-subtle border-subtle stack-y-6 rounded-b-lg border border-t-0 px-6 py-4">
         <SkeletonText className="h-8 w-full" />
         <SkeletonText className="h-8 w-full" />
       </div>
diff --git a/packages/platform/atoms/connect/conferencing-apps/ConferencingAppsViewWebWrapper.tsx b/packages/platform/atoms/connect/conferencing-apps/ConferencingAppsViewWebWrapper.tsx
index 6f78be2c89..838f4c6165 100644
--- a/packages/platform/atoms/connect/conferencing-apps/ConferencingAppsViewWebWrapper.tsx
+++ b/packages/platform/atoms/connect/conferencing-apps/ConferencingAppsViewWebWrapper.tsx
@@ -32,7 +32,7 @@ export const SkeletonLoader = () => {
       CTA={<AddConferencingButton />}
       borderInShellHeader={true}>
       <SkeletonContainer>
-        <div className="divide-subtle border-subtle space-y-6 rounded-b-lg border border-t-0 px-6 py-4">
+        <div className="divide-subtle border-subtle stack-y-6 rounded-b-lg border border-t-0 px-6 py-4">
           <SkeletonText className="h-8 w-full" />
           <SkeletonText className="h-8 w-full" />
         </div>
diff --git a/packages/platform/atoms/destination-calendar/DestinationCalendar.tsx b/packages/platform/atoms/destination-calendar/DestinationCalendar.tsx
index 00907c8da3..e7a69f493c 100644
--- a/packages/platform/atoms/destination-calendar/DestinationCalendar.tsx
+++ b/packages/platform/atoms/destination-calendar/DestinationCalendar.tsx
@@ -29,7 +29,7 @@ export const DestinationCalendarSettings = (
       )}>
       <DestinationCalendarSettingsHeading classNames={props.classNamesObject?.header} />
       <div className="border-t">
-        <div className="border-subtle flex w-full flex-col space-y-3 border-y-0 p-6">
+        <div className="border-subtle flex w-full flex-col stack-y-3 border-y-0 p-6">
           <div>
             <Label className="text-default mb-0 font-medium">{t("add_events_to")}</Label>
             <DestinationCalendarSelector {...props} />
diff --git a/packages/platform/atoms/event-types/payments/PaymentForm.tsx b/packages/platform/atoms/event-types/payments/PaymentForm.tsx
index 78fb19f265..cc2fb45ff2 100644
--- a/packages/platform/atoms/event-types/payments/PaymentForm.tsx
+++ b/packages/platform/atoms/event-types/payments/PaymentForm.tsx
@@ -69,7 +69,7 @@ export const PaymentForm = ({
                     aria-modal="true"
                     aria-labelledby="modal-headline">
                     <div>
-                      <div className="bg-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
+                      <div className="bg-cal-success mx-auto flex h-12 w-12 items-center justify-center rounded-full">
                         <PayIcon currency={paymentAppData.currency} className="h-8 w-8 text-green-600" />
                       </div>
                       <div className="mt-3 text-center sm:mt-5">
diff --git a/packages/platform/atoms/globals.css b/packages/platform/atoms/globals.css
index a16ba56bf2..980d0396e2 100644
--- a/packages/platform/atoms/globals.css
+++ b/packages/platform/atoms/globals.css
@@ -1,195 +1,10246 @@
-/*!******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
-  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[2].use[1]!../../node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[12].oneOf[2].use[2]!../../node_modules/next/font/google/target.css?{"path":"app/layout.tsx","import":"Inter","arguments":[{"subsets":["latin"],"variable":"--font-inter","preload":true,"display":"swap"}],"variableName":"interFont"} ***!
-  \******************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
-/* cyrillic-ext */
-@font-face {
-  font-family: '__Inter_d65c78';
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url(./fonts/55c55f0601d81cf3-s.woff2) format('woff2');
-  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+/*! tailwindcss v4.1.15 | MIT License | https://tailwindcss.com */
+@layer properties {
+  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or
+    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
+    *,
+    :before,
+    :after,
+    ::backdrop {
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
+      --tw-scroll-snap-strictness: proximity;
+      --tw-space-y-reverse: 0;
+      --tw-space-x-reverse: 0;
+      --tw-divide-x-reverse: 0;
+      --tw-border-style: solid;
+      --tw-divide-y-reverse: 0;
+      --tw-gradient-position: initial;
+      --tw-gradient-from: #0000;
+      --tw-gradient-via: #0000;
+      --tw-gradient-to: #0000;
+      --tw-gradient-stops: initial;
+      --tw-gradient-via-stops: initial;
+      --tw-gradient-from-position: 0%;
+      --tw-gradient-via-position: 50%;
+      --tw-gradient-to-position: 100%;
+      --tw-leading: initial;
+      --tw-font-weight: initial;
+      --tw-tracking: initial;
+      --tw-ordinal: initial;
+      --tw-slashed-zero: initial;
+      --tw-numeric-figure: initial;
+      --tw-numeric-spacing: initial;
+      --tw-numeric-fraction: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-outline-style: solid;
+      --tw-blur: initial;
+      --tw-brightness: initial;
+      --tw-contrast: initial;
+      --tw-grayscale: initial;
+      --tw-hue-rotate: initial;
+      --tw-invert: initial;
+      --tw-opacity: initial;
+      --tw-saturate: initial;
+      --tw-sepia: initial;
+      --tw-drop-shadow: initial;
+      --tw-drop-shadow-color: initial;
+      --tw-drop-shadow-alpha: 100%;
+      --tw-drop-shadow-size: initial;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
+      --tw-duration: initial;
+      --tw-ease: initial;
+      --tw-content: "";
+      --tw-animation-delay: 0s;
+      --tw-animation-direction: normal;
+      --tw-animation-duration: initial;
+      --tw-animation-fill-mode: none;
+      --tw-animation-iteration-count: 1;
+      --tw-enter-blur: 0;
+      --tw-enter-opacity: 1;
+      --tw-enter-rotate: 0;
+      --tw-enter-scale: 1;
+      --tw-enter-translate-x: 0;
+      --tw-enter-translate-y: 0;
+      --tw-exit-blur: 0;
+      --tw-exit-opacity: 1;
+      --tw-exit-rotate: 0;
+      --tw-exit-scale: 1;
+      --tw-exit-translate-x: 0;
+      --tw-exit-translate-y: 0;
+    }
+  }
 }
-
-/* cyrillic */
-@font-face {
-  font-family: '__Inter_d65c78';
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url(./fonts/26a46d62cd723877-s.woff2) format('woff2');
-  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+@layer theme {
+  :root,
+  :host {
+    --font-sans: var(--font-inter);
+    --color-red-50: oklch(97.1% 0.013 17.38);
+    --color-red-100: oklch(93.6% 0.032 17.717);
+    --color-red-200: oklch(88.5% 0.062 18.334);
+    --color-red-300: oklch(80.8% 0.114 19.571);
+    --color-red-400: oklch(70.4% 0.191 22.216);
+    --color-red-500: oklch(63.7% 0.237 25.331);
+    --color-red-600: oklch(57.7% 0.245 27.325);
+    --color-red-700: oklch(50.5% 0.213 27.518);
+    --color-red-800: oklch(44.4% 0.177 26.899);
+    --color-red-900: oklch(39.6% 0.141 25.723);
+    --color-orange-100: oklch(95.4% 0.038 75.164);
+    --color-orange-200: oklch(90.1% 0.076 70.697);
+    --color-orange-400: oklch(75% 0.183 55.934);
+    --color-orange-500: oklch(70.5% 0.213 47.604);
+    --color-orange-600: oklch(64.6% 0.222 41.116);
+    --color-orange-700: oklch(55.3% 0.195 38.402);
+    --color-orange-800: oklch(47% 0.157 37.304);
+    --color-orange-900: oklch(40.8% 0.123 38.172);
+    --color-yellow-100: oklch(97.3% 0.071 103.193);
+    --color-yellow-300: oklch(90.5% 0.182 98.111);
+    --color-yellow-500: oklch(79.5% 0.184 86.047);
+    --color-yellow-600: oklch(68.1% 0.162 75.834);
+    --color-lime-500: oklch(76.8% 0.233 130.85);
+    --color-green-50: oklch(98.2% 0.018 155.826);
+    --color-green-100: oklch(96.2% 0.044 156.743);
+    --color-green-400: oklch(79.2% 0.209 151.711);
+    --color-green-500: oklch(72.3% 0.219 149.579);
+    --color-green-600: oklch(62.7% 0.194 149.214);
+    --color-green-700: oklch(52.7% 0.154 150.069);
+    --color-green-800: oklch(44.8% 0.119 151.328);
+    --color-emerald-400: oklch(76.5% 0.177 163.223);
+    --color-teal-500: oklch(70.4% 0.14 182.503);
+    --color-blue-50: oklch(97% 0.014 254.604);
+    --color-blue-300: oklch(80.9% 0.105 251.813);
+    --color-blue-400: oklch(70.7% 0.165 254.624);
+    --color-blue-500: oklch(62.3% 0.214 259.815);
+    --color-blue-600: oklch(54.6% 0.245 262.881);
+    --color-blue-700: oklch(48.8% 0.243 264.376);
+    --color-blue-950: oklch(28.2% 0.091 267.935);
+    --color-indigo-400: oklch(67.3% 0.182 276.935);
+    --color-indigo-500: oklch(58.5% 0.233 277.117);
+    --color-violet-500: oklch(60.6% 0.25 292.717);
+    --color-purple-50: oklch(97.7% 0.014 308.299);
+    --color-purple-500: oklch(62.7% 0.265 303.9);
+    --color-purple-700: oklch(49.6% 0.265 301.924);
+    --color-purple-800: oklch(43.8% 0.218 303.724);
+    --color-pink-500: oklch(65.6% 0.241 354.308);
+    --color-rose-600: oklch(58.6% 0.253 17.585);
+    --color-slate-300: oklch(86.9% 0.022 252.894);
+    --color-gray-50: oklch(98.5% 0.002 247.839);
+    --color-gray-100: oklch(96.7% 0.003 264.542);
+    --color-gray-200: oklch(92.8% 0.006 264.531);
+    --color-gray-300: oklch(87.2% 0.01 258.338);
+    --color-gray-400: oklch(70.7% 0.022 261.325);
+    --color-gray-500: oklch(55.1% 0.027 264.364);
+    --color-gray-600: oklch(44.6% 0.03 256.802);
+    --color-gray-700: oklch(37.3% 0.034 259.733);
+    --color-gray-800: oklch(27.8% 0.033 256.848);
+    --color-gray-900: oklch(21% 0.034 264.665);
+    --color-neutral-50: oklch(98.5% 0 0);
+    --color-neutral-100: oklch(97% 0 0);
+    --color-neutral-200: oklch(92.2% 0 0);
+    --color-neutral-300: oklch(87% 0 0);
+    --color-neutral-500: oklch(55.6% 0 0);
+    --color-neutral-600: oklch(43.9% 0 0);
+    --color-neutral-800: oklch(26.9% 0 0);
+    --color-neutral-900: oklch(20.5% 0 0);
+    --color-black: #111;
+    --color-white: #fff;
+    --spacing: 0.25rem;
+    --breakpoint-sm: 40rem;
+    --breakpoint-lg: 64rem;
+    --breakpoint-2xl: 96rem;
+    --container-sm: 24rem;
+    --container-md: 28rem;
+    --container-lg: 32rem;
+    --container-xl: 36rem;
+    --container-2xl: 42rem;
+    --container-3xl: 48rem;
+    --container-4xl: 56rem;
+    --container-5xl: 64rem;
+    --container-7xl: 80rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
+    --text-4xl: 2.25rem;
+    --text-4xl--line-height: calc(2.5 / 2.25);
+    --text-5xl: 3rem;
+    --text-5xl--line-height: 1;
+    --text-6xl: 3.75rem;
+    --text-6xl--line-height: 1;
+    --font-weight-extralight: 200;
+    --font-weight-light: 300;
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --font-weight-extrabold: 800;
+    --tracking-tight: -0.025em;
+    --tracking-normal: 0em;
+    --tracking-wide: 0.025em;
+    --tracking-wider: 0.05em;
+    --tracking-widest: 0.1em;
+    --leading-tight: 1.25;
+    --leading-snug: 1.375;
+    --leading-normal: 1.5;
+    --radius-sm: var(--radius-sm);
+    --radius-md: var(--radius-md);
+    --radius-lg: var(--radius-lg);
+    --radius-xl: var(--radius-xl);
+    --radius-2xl: var(--radius-2xl);
+    --radius-3xl: var(--radius-3xl);
+    --ease-in: cubic-bezier(0.4, 0, 1, 1);
+    --ease-out: cubic-bezier(0, 0, 0.2, 1);
+    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --animate-spin: spin 1s linear infinite;
+    --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    --blur-md: 12px;
+    --blur-lg: 16px;
+    --aspect-video: 16/9;
+    --default-transition-duration: 0.15s;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --default-font-family: var(--font-inter);
+    --default-mono-font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+      "Courier New", monospace;
+    --radius: var(--radius);
+    --font-heading: var(--font-heading);
+    --font-cal: var(--font-cal);
+    --shadow-dropdown: var(--shadow-dropdown);
+    --shadow-switch-thumb: var(--shadow-switch-thumb);
+    --shadow-solid-gray-rested: var(--shadow-solid-gray-rested);
+    --shadow-solid-gray-hover: var(--shadow-solid-gray-hover);
+    --shadow-solid-gray-active: var(--shadow-solid-gray-active);
+    --shadow-outline-gray-rested: var(--shadow-outline-gray-rested);
+    --shadow-outline-gray-hover: var(--shadow-outline-gray-hover);
+    --shadow-outline-gray-active: var(--shadow-outline-gray-active);
+    --shadow-outline-gray-focused: var(--shadow-outline-gray-focused);
+    --shadow-outline-red-rested: var(--shadow-outline-red-rested);
+    --shadow-outline-red-hover: var(--shadow-outline-red-hover);
+    --shadow-outline-red-active: var(--shadow-outline-red-active);
+    --shadow-elevation-low: var(--shadow-elevation-low);
+    --shadow-button-solid-brand-default: var(--shadow-button-solid-brand-default);
+    --shadow-button-solid-brand-hover: var(--shadow-button-solid-brand-hover);
+    --shadow-button-solid-brand-active: var(--shadow-button-solid-brand-active);
+    --shadow-button-solid-brand-focused: var(--shadow-button-solid-brand-focused);
+    --shadow-button-outline-red-focused: var(--shadow-button-outline-red-focused);
+    --fill-emphasis: var(--fill-emphasis);
+    --fill-default: var(--fill-default);
+    --fill-subtle: var(--fill-subtle);
+    --fill-muted: var(--fill-muted);
+    --fill-inverted: var(--fill-inverted);
+    --fill-info: var(--fill-info);
+    --fill-success: var(--fill-success);
+    --fill-attention: var(--fill-attention);
+    --fill-error: var(--fill-error);
+    --fill-brand: var(--fill-brand);
+  }
 }
-
-/* greek-ext */
-@font-face {
-  font-family: '__Inter_d65c78';
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url(./fonts/97e0cb1ae144a2a9-s.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
+@layer base {
+  *,
+  :after,
+  :before,
+  ::backdrop {
+    box-sizing: border-box;
+    border: 0 solid;
+    margin: 0;
+    padding: 0;
+  }
+  ::file-selector-button {
+    box-sizing: border-box;
+    border: 0 solid;
+    margin: 0;
+    padding: 0;
+  }
+  html,
+  :host {
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    line-height: 1.5;
+    font-family: var(
+      --default-font-family,
+      ui-sans-serif,
+      system-ui,
+      sans-serif,
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
+      "Noto Color Emoji"
+    );
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var(--default-font-variation-settings, normal);
+    -webkit-tap-highlight-color: transparent;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    -webkit-text-decoration: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+  b,
+  strong {
+    font-weight: bolder;
+  }
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: var(
+      --default-mono-font-family,
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      Consolas,
+      "Liberation Mono",
+      "Courier New",
+      monospace
+    );
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub,
+  sup {
+    vertical-align: baseline;
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ol,
+  ul,
+  menu {
+    list-style: none;
+  }
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    vertical-align: middle;
+    display: block;
+  }
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+  button,
+  input,
+  select,
+  optgroup,
+  textarea {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    opacity: 1;
+    background-color: #0000;
+    border-radius: 0;
+  }
+  ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    opacity: 1;
+    background-color: #0000;
+    border-radius: 0;
+  }
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+  ::placeholder {
+    opacity: 1;
+  }
+  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: currentColor;
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      ::placeholder {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+  }
+  textarea {
+    resize: vertical;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+  ::-webkit-datetime-edit {
+    padding-block: 0;
+  }
+  ::-webkit-datetime-edit-year-field {
+    padding-block: 0;
+  }
+  ::-webkit-datetime-edit-month-field {
+    padding-block: 0;
+  }
+  ::-webkit-datetime-edit-day-field {
+    padding-block: 0;
+  }
+  ::-webkit-datetime-edit-hour-field {
+    padding-block: 0;
+  }
+  ::-webkit-datetime-edit-minute-field {
+    padding-block: 0;
+  }
+  ::-webkit-datetime-edit-second-field {
+    padding-block: 0;
+  }
+  ::-webkit-datetime-edit-millisecond-field {
+    padding-block: 0;
+  }
+  ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button,
+  input:where([type="button"], [type="reset"], [type="submit"]) {
+    appearance: button;
+  }
+  ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button {
+    height: auto;
+  }
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+  * {
+    border-color: var(--border);
+    outline-color: var(--ring);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    * {
+      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
+    }
+  }
+  [type="text"],
+  input:where(:not([type])),
+  [type="email"],
+  [type="url"],
+  [type="password"],
+  [type="number"],
+  [type="date"],
+  [type="datetime-local"],
+  [type="month"],
+  [type="search"],
+  [type="tel"],
+  [type="time"],
+  [type="week"],
+  [multiple],
+  textarea,
+  select {
+    appearance: none;
+    --tw-shadow: 0 0 #0000;
+    background-color: #fff;
+    border-width: 1px;
+    border-color: oklch(55.1% 0.027 264.364);
+    border-radius: 0;
+    padding: 0.5rem 0.75rem;
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+  :is(
+      [type="text"],
+      input:where(:not([type])),
+      [type="email"],
+      [type="url"],
+      [type="password"],
+      [type="number"],
+      [type="date"],
+      [type="datetime-local"],
+      [type="month"],
+      [type="search"],
+      [type="tel"],
+      [type="time"],
+      [type="week"],
+      [multiple],
+      textarea,
+      select
+    ):focus {
+    outline-offset: 2px;
+    --tw-ring-inset: var(--tw-empty);
+    --tw-ring-offset-width: 0px;
+    --tw-ring-offset-color: #fff;
+    --tw-ring-color: oklch(54.6% 0.245 262.881);
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
+      var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    border-color: oklch(54.6% 0.245 262.881);
+    outline: 2px solid #0000;
+  }
+  input::placeholder,
+  textarea::placeholder {
+    color: oklch(55.1% 0.027 264.364);
+    opacity: 1;
+  }
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+  ::-webkit-date-and-time-value {
+    min-height: 1.5em;
+  }
+  ::-webkit-date-and-time-value {
+    text-align: inherit;
+  }
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+  ::-webkit-datetime-edit {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  ::-webkit-datetime-edit-year-field {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  ::-webkit-datetime-edit-month-field {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  ::-webkit-datetime-edit-day-field {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  ::-webkit-datetime-edit-hour-field {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  ::-webkit-datetime-edit-minute-field {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  ::-webkit-datetime-edit-second-field {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  ::-webkit-datetime-edit-millisecond-field {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  ::-webkit-datetime-edit-meridiem-field {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  select {
+    print-color-adjust: exact;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='oklch(55.1%25 0.027 264.364)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+    background-position: right 0.5rem center;
+    background-repeat: no-repeat;
+    background-size: 1.5em 1.5em;
+    padding-right: 2.5rem;
+  }
+  [multiple],
+  [size]:where(select:not([size="1"])) {
+    background-image: initial;
+    background-position: initial;
+    background-repeat: unset;
+    background-size: initial;
+    print-color-adjust: unset;
+    padding-right: 0.75rem;
+  }
+  [type="checkbox"],
+  [type="radio"] {
+    appearance: none;
+    print-color-adjust: exact;
+    vertical-align: middle;
+    -webkit-user-select: none;
+    user-select: none;
+    color: oklch(54.6% 0.245 262.881);
+    --tw-shadow: 0 0 #0000;
+    background-color: #fff;
+    background-origin: border-box;
+    border-width: 1px;
+    border-color: oklch(55.1% 0.027 264.364);
+    flex-shrink: 0;
+    width: 1rem;
+    height: 1rem;
+    padding: 0;
+    display: inline-block;
+  }
+  [type="checkbox"] {
+    border-radius: 0;
+  }
+  [type="radio"] {
+    border-radius: 100%;
+  }
+  [type="checkbox"]:focus,
+  [type="radio"]:focus {
+    outline-offset: 2px;
+    --tw-ring-inset: var(--tw-empty);
+    --tw-ring-offset-width: 2px;
+    --tw-ring-offset-color: #fff;
+    --tw-ring-color: oklch(54.6% 0.245 262.881);
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
+      var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    outline: 2px solid #0000;
+  }
+  [type="checkbox"]:checked,
+  [type="radio"]:checked {
+    background-color: currentColor;
+    background-position: 50%;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    border-color: #0000;
+  }
+  [type="checkbox"]:checked {
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+  }
+  @media (forced-colors: active) {
+    [type="checkbox"]:checked {
+      appearance: auto;
+    }
+  }
+  [type="radio"]:checked {
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+  }
+  @media (forced-colors: active) {
+    [type="radio"]:checked {
+      appearance: auto;
+    }
+  }
+  [type="checkbox"]:checked:hover,
+  [type="checkbox"]:checked:focus,
+  [type="radio"]:checked:hover,
+  [type="radio"]:checked:focus {
+    background-color: currentColor;
+    border-color: #0000;
+  }
+  [type="checkbox"]:indeterminate {
+    background-color: currentColor;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
+    background-position: 50%;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    border-color: #0000;
+  }
+  @media (forced-colors: active) {
+    [type="checkbox"]:indeterminate {
+      appearance: auto;
+    }
+  }
+  [type="checkbox"]:indeterminate:hover,
+  [type="checkbox"]:indeterminate:focus {
+    background-color: currentColor;
+    border-color: #0000;
+  }
+  [type="file"] {
+    background: unset;
+    border-color: inherit;
+    font-size: unset;
+    line-height: inherit;
+    border-width: 0;
+    border-radius: 0;
+    padding: 0;
+  }
+  [type="file"]:focus {
+    outline: 1px solid buttontext;
+    outline: 1px auto -webkit-focus-ring-color;
+  }
+  * {
+    scrollbar-color: initial;
+    scrollbar-width: initial;
+  }
 }
-
-/* greek */
-@font-face {
-  font-family: '__Inter_d65c78';
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url(./fonts/581909926a08bbc8-s.woff2) format('woff2');
-  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
+@layer components {
+  .scroll-bar::-webkit-scrollbar-track {
+    background-color: var(--scrollbar-track);
+    border-radius: var(--scrollbar-track-radius);
+  }
+  .scroll-bar::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb);
+    border-radius: var(--scrollbar-thumb-radius);
+  }
+  .scroll-bar::-webkit-scrollbar-corner {
+    background-color: var(--scrollbar-corner);
+    border-radius: var(--scrollbar-corner-radius);
+  }
+  .scroll-bar {
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
+  }
+  .scroll-bar::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+    display: block;
+  }
+  .scroll-bar {
+    --scrollbar-thumb: oklch(87.2% 0.01 258.338);
+    --scrollbar-thumb-radius: var(--radius-md);
+    --scrollbar-track: transparent;
+  }
+  .scroll-bar:is(.dark *) {
+    --scrollbar-thumb: var(--color-gray-300);
+  }
+  .slider {
+    height: calc(var(--spacing) * 4);
+    width: calc(var(--spacing) * 40);
+    -webkit-user-select: none;
+    user-select: none;
+    align-items: center;
+    display: flex;
+    position: relative;
+  }
+  .slider > .slider-track {
+    height: calc(var(--spacing) * 1);
+    border-radius: var(--radius-md);
+    background-color: var(--color-gray-400);
+    flex-grow: 1;
+    position: relative;
+  }
+  .slider .slider-range {
+    background-color: var(--color-gray-700);
+    border-radius: 3.40282e38px;
+    height: 100%;
+    position: absolute;
+  }
+  .slider .slider-thumb {
+    height: calc(var(--spacing) * 3);
+    width: calc(var(--spacing) * 3);
+    cursor: pointer;
+    background-color: var(--color-gray-700);
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    border-radius: 3.40282e38px;
+    display: block;
+  }
+  .slider .slider-thumb:hover {
+    background-color: var(--color-gray-600);
+  }
+  .slider .slider-thumb:focus {
+    box-shadow: 0 0 0 4px #0003;
+  }
 }
-
-/* vietnamese */
-@font-face {
-  font-family: '__Inter_d65c78';
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url(./fonts/df0a9ae256c0569c-s.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+@layer utilities {
+  .pointer-events-auto {
+    pointer-events: auto;
+  }
+  .pointer-events-none {
+    pointer-events: none;
+  }
+  .collapse {
+    visibility: collapse;
+  }
+  .invisible {
+    visibility: hidden;
+  }
+  .visible {
+    visibility: visible;
+  }
+  .sr-only {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+  }
+  .absolute {
+    position: absolute;
+  }
+  .fixed {
+    position: fixed;
+  }
+  .relative {
+    position: relative;
+  }
+  .static {
+    position: static;
+  }
+  .static\! {
+    position: static !important;
+  }
+  .sticky {
+    position: sticky;
+  }
+  .inset-0 {
+    inset: calc(var(--spacing) * 0);
+  }
+  .inset-x-0 {
+    inset-inline: calc(var(--spacing) * 0);
+  }
+  .inset-y-0 {
+    inset-block: calc(var(--spacing) * 0);
+  }
+  .inset-y-4 {
+    inset-block: calc(var(--spacing) * 4);
+  }
+  .-top-3 {
+    top: calc(var(--spacing) * -3);
+  }
+  .-top-\[2px\] {
+    top: -2px;
+  }
+  .top-\(--calendar-dates-sticky-offset\,0px\) {
+    top: var(--calendar-dates-sticky-offset, 0px);
+  }
+  .top-0 {
+    top: calc(var(--spacing) * 0);
+  }
+  .top-1 {
+    top: calc(var(--spacing) * 1);
+  }
+  .top-1\/2 {
+    top: 50%;
+  }
+  .top-2 {
+    top: calc(var(--spacing) * 2);
+  }
+  .top-2\.5 {
+    top: calc(var(--spacing) * 2.5);
+  }
+  .top-3 {
+    top: calc(var(--spacing) * 3);
+  }
+  .top-4 {
+    top: calc(var(--spacing) * 4);
+  }
+  .top-5 {
+    top: calc(var(--spacing) * 5);
+  }
+  .top-6 {
+    top: calc(var(--spacing) * 6);
+  }
+  .top-8 {
+    top: calc(var(--spacing) * 8);
+  }
+  .top-\[0\.9rem\] {
+    top: 0.9rem;
+  }
+  .top-\[50\%\] {
+    top: 50%;
+  }
+  .top-px {
+    top: 1px;
+  }
+  .-right-0\.5 {
+    right: calc(var(--spacing) * -0.5);
+  }
+  .-right-1 {
+    right: calc(var(--spacing) * -1);
+  }
+  .right-0 {
+    right: calc(var(--spacing) * 0);
+  }
+  .right-1 {
+    right: calc(var(--spacing) * 1);
+  }
+  .right-2 {
+    right: calc(var(--spacing) * 2);
+  }
+  .right-3 {
+    right: calc(var(--spacing) * 3);
+  }
+  .right-4 {
+    right: calc(var(--spacing) * 4);
+  }
+  .right-8 {
+    right: calc(var(--spacing) * 8);
+  }
+  .right-\[2px\] {
+    right: 2px;
+  }
+  .-bottom-0\.5 {
+    bottom: calc(var(--spacing) * -0.5);
+  }
+  .-bottom-1 {
+    bottom: calc(var(--spacing) * -1);
+  }
+  .bottom-0 {
+    bottom: calc(var(--spacing) * 0);
+  }
+  .bottom-2 {
+    bottom: calc(var(--spacing) * 2);
+  }
+  .bottom-3 {
+    bottom: calc(var(--spacing) * 3);
+  }
+  .bottom-4 {
+    bottom: calc(var(--spacing) * 4);
+  }
+  .bottom-7 {
+    bottom: calc(var(--spacing) * 7);
+  }
+  .bottom-16\! {
+    bottom: calc(var(--spacing) * 16) !important;
+  }
+  .bottom-20 {
+    bottom: calc(var(--spacing) * 20);
+  }
+  .bottom-32 {
+    bottom: calc(var(--spacing) * 32);
+  }
+  .bottom-\[6px\] {
+    bottom: 6px;
+  }
+  .bottom-\[7\.3rem\]\! {
+    bottom: 7.3rem !important;
+  }
+  .-left-3 {
+    left: calc(var(--spacing) * -3);
+  }
+  .-left-\[12px\] {
+    left: -12px;
+  }
+  .left-0 {
+    left: calc(var(--spacing) * 0);
+  }
+  .left-0\.5 {
+    left: calc(var(--spacing) * 0.5);
+  }
+  .left-1 {
+    left: calc(var(--spacing) * 1);
+  }
+  .left-1\/2 {
+    left: 50%;
+  }
+  .left-3 {
+    left: calc(var(--spacing) * 3);
+  }
+  .left-8 {
+    left: calc(var(--spacing) * 8);
+  }
+  .left-\[50\%\] {
+    left: 50%;
+  }
+  .left-\[calc\(50\%\+calc\(var\(--booker-meta-width\,0px\)\/2\)\)\] {
+    left: calc(50% + calc(var(--booker-meta-width, 0px) / 2));
+  }
+  .isolate {
+    isolation: isolate;
+  }
+  .-z-10 {
+    z-index: calc(10 * -1);
+  }
+  .-z-20 {
+    z-index: calc(20 * -1);
+  }
+  .z-0 {
+    z-index: 0;
+  }
+  .z-1 {
+    z-index: 1;
+  }
+  .z-2 {
+    z-index: 2;
+  }
+  .z-10 {
+    z-index: 10;
+  }
+  .z-20 {
+    z-index: 20;
+  }
+  .z-30 {
+    z-index: 30;
+  }
+  .z-40 {
+    z-index: 40;
+  }
+  .z-50 {
+    z-index: 50;
+  }
+  .z-60 {
+    z-index: 60;
+  }
+  .z-65 {
+    z-index: 65;
+  }
+  .z-80 {
+    z-index: 80;
+  }
+  .z-100 {
+    z-index: 100;
+  }
+  .order-0 {
+    order: 0;
+  }
+  .order-2 {
+    order: 2;
+  }
+  .col-span-1 {
+    grid-column: span 1 / span 1;
+  }
+  .col-span-2 {
+    grid-column: span 2 / span 2;
+  }
+  .col-span-3 {
+    grid-column: span 3 / span 3;
+  }
+  .col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+  .col-span-7 {
+    grid-column: span 7 / span 7;
+  }
+  .col-start-1 {
+    grid-column-start: 1;
+  }
+  .col-end-1 {
+    grid-column-end: 1;
+  }
+  .col-end-2 {
+    grid-column-end: 2;
+  }
+  .row-span-full {
+    grid-row: 1/-1;
+  }
+  .row-start-1 {
+    grid-row-start: 1;
+  }
+  .row-end-1 {
+    grid-row-end: 1;
+  }
+  .float-left {
+    float: left;
+  }
+  .float-right {
+    float: right;
+  }
+  .container {
+    width: 100%;
+  }
+  @media (min-width: 1600px) {
+    .container {
+      max-width: 1600px;
+    }
+  }
+  @media (min-width: 2000px) {
+    .container {
+      max-width: 2000px;
+    }
+  }
+  @media (min-width: 40rem) {
+    .container {
+      max-width: 40rem;
+    }
+  }
+  @media (min-width: 48rem) {
+    .container {
+      max-width: 48rem;
+    }
+  }
+  @media (min-width: 64rem) {
+    .container {
+      max-width: 64rem;
+    }
+  }
+  @media (min-width: 80rem) {
+    .container {
+      max-width: 80rem;
+    }
+  }
+  @media (min-width: 96rem) {
+    .container {
+      max-width: 96rem;
+    }
+  }
+  .-m-4 {
+    margin: calc(var(--spacing) * -4);
+  }
+  .m-0 {
+    margin: calc(var(--spacing) * 0);
+  }
+  .m-0\! {
+    margin: calc(var(--spacing) * 0) !important;
+  }
+  .m-1 {
+    margin: calc(var(--spacing) * 1);
+  }
+  .m-2 {
+    margin: calc(var(--spacing) * 2);
+  }
+  .m-5 {
+    margin: calc(var(--spacing) * 5);
+  }
+  .m-8 {
+    margin: calc(var(--spacing) * 8);
+  }
+  .m-10 {
+    margin: calc(var(--spacing) * 10);
+  }
+  .m-auto {
+    margin: auto;
+  }
+  .-mx-1 {
+    margin-inline: calc(var(--spacing) * -1);
+  }
+  .-mx-2 {
+    margin-inline: calc(var(--spacing) * -2);
+  }
+  .-mx-3 {
+    margin-inline: calc(var(--spacing) * -3);
+  }
+  .-mx-4 {
+    margin-inline: calc(var(--spacing) * -4);
+  }
+  .-mx-5 {
+    margin-inline: calc(var(--spacing) * -5);
+  }
+  .-mx-8 {
+    margin-inline: calc(var(--spacing) * -8);
+  }
+  .-mx-9 {
+    margin-inline: calc(var(--spacing) * -9);
+  }
+  .mx-0 {
+    margin-inline: calc(var(--spacing) * 0);
+  }
+  .mx-1 {
+    margin-inline: calc(var(--spacing) * 1);
+  }
+  .mx-2 {
+    margin-inline: calc(var(--spacing) * 2);
+  }
+  .mx-3 {
+    margin-inline: calc(var(--spacing) * 3);
+  }
+  .mx-4 {
+    margin-inline: calc(var(--spacing) * 4);
+  }
+  .mx-5 {
+    margin-inline: calc(var(--spacing) * 5);
+  }
+  .mx-6 {
+    margin-inline: calc(var(--spacing) * 6);
+  }
+  .mx-8 {
+    margin-inline: calc(var(--spacing) * 8);
+  }
+  .mx-10 {
+    margin-inline: calc(var(--spacing) * 10);
+  }
+  .mx-auto {
+    margin-inline: auto;
+  }
+  .-my-1 {
+    margin-block: calc(var(--spacing) * -1);
+  }
+  .my-0 {
+    margin-block: calc(var(--spacing) * 0);
+  }
+  .my-0\! {
+    margin-block: calc(var(--spacing) * 0) !important;
+  }
+  .my-1 {
+    margin-block: calc(var(--spacing) * 1);
+  }
+  .my-1\.5 {
+    margin-block: calc(var(--spacing) * 1.5);
+  }
+  .my-2 {
+    margin-block: calc(var(--spacing) * 2);
+  }
+  .my-2\.5 {
+    margin-block: calc(var(--spacing) * 2.5);
+  }
+  .my-3 {
+    margin-block: calc(var(--spacing) * 3);
+  }
+  .my-4 {
+    margin-block: calc(var(--spacing) * 4);
+  }
+  .my-5 {
+    margin-block: calc(var(--spacing) * 5);
+  }
+  .my-6 {
+    margin-block: calc(var(--spacing) * 6);
+  }
+  .my-7 {
+    margin-block: calc(var(--spacing) * 7);
+  }
+  .my-8 {
+    margin-block: calc(var(--spacing) * 8);
+  }
+  .my-20 {
+    margin-block: calc(var(--spacing) * 20);
+  }
+  .my-24 {
+    margin-block: calc(var(--spacing) * 24);
+  }
+  .my-auto {
+    margin-block: auto;
+  }
+  .ms-1 {
+    margin-inline-start: calc(var(--spacing) * 1);
+  }
+  .ms-2 {
+    margin-inline-start: calc(var(--spacing) * 2);
+  }
+  .ms-3 {
+    margin-inline-start: calc(var(--spacing) * 3);
+  }
+  .ms-4 {
+    margin-inline-start: calc(var(--spacing) * 4);
+  }
+  .me-1 {
+    margin-inline-end: calc(var(--spacing) * 1);
+  }
+  .me-1\.5 {
+    margin-inline-end: calc(var(--spacing) * 1.5);
+  }
+  .me-2 {
+    margin-inline-end: calc(var(--spacing) * 2);
+  }
+  .me-3 {
+    margin-inline-end: calc(var(--spacing) * 3);
+  }
+  .me-4 {
+    margin-inline-end: calc(var(--spacing) * 4);
+  }
+  .me-5 {
+    margin-inline-end: calc(var(--spacing) * 5);
+  }
+  .me-\[10px\] {
+    margin-inline-end: 10px;
+  }
+  .prose {
+    color: var(--tw-prose-body);
+    max-width: 65ch;
+  }
+  .prose :where([class~="lead"]):not(:where([class~="not-prose"] *)) {
+    color: var(--tw-prose-lead);
+    margin-top: 1.2em;
+    margin-bottom: 1.2em;
+    font-size: 1.25em;
+    line-height: 1.6;
+  }
+  .prose :where(a):not(:where([class~="not-prose"] *)) {
+    color: var(--tw-prose-links);
+    font-weight: 500;
+    text-decoration: underline;
+  }
+  .prose :where(strong):not(:where([class~="not-prose"] *)) {
+    color: var(--tw-prose-bold);
+    font-weight: 600;
+  }
+  .prose :where(a strong):not(:where([class~="not-prose"] *)),
+  .prose :where(blockquote strong):not(:where([class~="not-prose"] *)),
+  .prose :where(thead th strong):not(:where([class~="not-prose"] *)) {
+    color: inherit;
+  }
+  .prose :where(ol):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.25em;
+    margin-bottom: 1.25em;
+    padding-left: 1.625em;
+    list-style-type: decimal;
+  }
+  .prose :where(ol[type="A"]):not(:where([class~="not-prose"] *)) {
+    list-style-type: upper-alpha;
+  }
+  .prose :where(ol[type="a"]):not(:where([class~="not-prose"] *)) {
+    list-style-type: lower-alpha;
+  }
+  .prose :where(ol[type="A s"]):not(:where([class~="not-prose"] *)) {
+    list-style-type: upper-alpha;
+  }
+  .prose :where(ol[type="a s"]):not(:where([class~="not-prose"] *)) {
+    list-style-type: lower-alpha;
+  }
+  .prose :where(ol[type="I"]):not(:where([class~="not-prose"] *)) {
+    list-style-type: upper-roman;
+  }
+  .prose :where(ol[type="i"]):not(:where([class~="not-prose"] *)) {
+    list-style-type: lower-roman;
+  }
+  .prose :where(ol[type="I s"]):not(:where([class~="not-prose"] *)) {
+    list-style-type: upper-roman;
+  }
+  .prose :where(ol[type="i s"]):not(:where([class~="not-prose"] *)) {
+    list-style-type: lower-roman;
+  }
+  .prose :where(ol[type="1"]):not(:where([class~="not-prose"] *)) {
+    list-style-type: decimal;
+  }
+  .prose :where(ul):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.25em;
+    margin-bottom: 1.25em;
+    padding-left: 1.625em;
+    list-style-type: disc;
+  }
+  .prose :where(ol > li):not(:where([class~="not-prose"] *))::marker {
+    color: var(--tw-prose-counters);
+    font-weight: 400;
+  }
+  .prose :where(ul > li):not(:where([class~="not-prose"] *))::marker {
+    color: var(--tw-prose-bullets);
+  }
+  .prose :where(hr):not(:where([class~="not-prose"] *)) {
+    border-color: var(--tw-prose-hr);
+    border-top-width: 1px;
+    margin-top: 3em;
+    margin-bottom: 3em;
+  }
+  .prose :where(blockquote):not(:where([class~="not-prose"] *)) {
+    color: var(--tw-prose-quotes);
+    border-left-width: 0.25rem;
+    border-left-color: var(--tw-prose-quote-borders);
+    quotes: "“" "”" "‘" "’";
+    margin-top: 1.6em;
+    margin-bottom: 1.6em;
+    padding-left: 1em;
+    font-style: italic;
+    font-weight: 500;
+  }
+  .prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"] *)):before {
+    content: open-quote;
+  }
+  .prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"] *)):after {
+    content: close-quote;
+  }
+  .prose :where(h1):not(:where([class~="not-prose"] *)) {
+    color: var(--tw-prose-headings);
+    margin-top: 0;
+    margin-bottom: 0.888889em;
+    font-size: 2.25em;
+    font-weight: 800;
+    line-height: 1.11111;
+  }
+  .prose :where(h1 strong):not(:where([class~="not-prose"] *)) {
+    color: inherit;
+    font-weight: 900;
+  }
+  .prose :where(h2):not(:where([class~="not-prose"] *)) {
+    color: var(--tw-prose-headings);
+    margin-top: 2em;
+    margin-bottom: 1em;
+    font-size: 1.5em;
+    font-weight: 700;
+    line-height: 1.33333;
+  }
+  .prose :where(h2 strong):not(:where([class~="not-prose"] *)) {
+    color: inherit;
+    font-weight: 800;
+  }
+  .prose :where(h3):not(:where([class~="not-prose"] *)) {
+    color: var(--tw-prose-headings);
+    margin-top: 1.6em;
+    margin-bottom: 0.6em;
+    font-size: 1.25em;
+    font-weight: 600;
+    line-height: 1.6;
+  }
+  .prose :where(h3 strong):not(:where([class~="not-prose"] *)) {
+    color: inherit;
+    font-weight: 700;
+  }
+  .prose :where(h4):not(:where([class~="not-prose"] *)) {
+    color: var(--tw-prose-headings);
+    margin-top: 1.5em;
+    margin-bottom: 0.5em;
+    font-weight: 600;
+    line-height: 1.5;
+  }
+  .prose :where(h4 strong):not(:where([class~="not-prose"] *)) {
+    color: inherit;
+    font-weight: 700;
+  }
+  .prose :where(img):not(:where([class~="not-prose"] *)) {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+  .prose :where(figure > *):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  .prose :where(figcaption):not(:where([class~="not-prose"] *)) {
+    color: var(--tw-prose-captions);
+    margin-top: 0.857143em;
+    font-size: 0.875em;
+    line-height: 1.42857;
+  }
+  .prose :where(code):not(:where([class~="not-prose"] *)) {
+    color: var(--tw-prose-code);
+    font-size: 0.875em;
+    font-weight: 600;
+  }
+  .prose :where(code):not(:where([class~="not-prose"] *)):before,
+  .prose :where(code):not(:where([class~="not-prose"] *)):after {
+    content: "`";
+  }
+  .prose :where(a code):not(:where([class~="not-prose"] *)),
+  .prose :where(h1 code):not(:where([class~="not-prose"] *)) {
+    color: inherit;
+  }
+  .prose :where(h2 code):not(:where([class~="not-prose"] *)) {
+    color: inherit;
+    font-size: 0.875em;
+  }
+  .prose :where(h3 code):not(:where([class~="not-prose"] *)) {
+    color: inherit;
+    font-size: 0.9em;
+  }
+  .prose :where(h4 code):not(:where([class~="not-prose"] *)),
+  .prose :where(blockquote code):not(:where([class~="not-prose"] *)),
+  .prose :where(thead th code):not(:where([class~="not-prose"] *)) {
+    color: inherit;
+  }
+  .prose :where(pre):not(:where([class~="not-prose"] *)) {
+    color: var(--tw-prose-pre-code);
+    background-color: var(--tw-prose-pre-bg);
+    border-radius: 0.375rem;
+    margin-top: 1.71429em;
+    margin-bottom: 1.71429em;
+    padding: 0.857143em 1.14286em;
+    font-size: 0.875em;
+    font-weight: 400;
+    line-height: 1.71429;
+    overflow-x: auto;
+  }
+  .prose :where(pre code):not(:where([class~="not-prose"] *)) {
+    font-weight: inherit;
+    color: inherit;
+    font-size: inherit;
+    font-family: inherit;
+    line-height: inherit;
+    background-color: #0000;
+    border-width: 0;
+    border-radius: 0;
+    padding: 0;
+  }
+  .prose :where(pre code):not(:where([class~="not-prose"] *)):before,
+  .prose :where(pre code):not(:where([class~="not-prose"] *)):after {
+    content: none;
+  }
+  .prose :where(table):not(:where([class~="not-prose"] *)) {
+    table-layout: auto;
+    text-align: left;
+    width: 100%;
+    margin-top: 2em;
+    margin-bottom: 2em;
+    font-size: 0.875em;
+    line-height: 1.71429;
+  }
+  .prose :where(thead):not(:where([class~="not-prose"] *)) {
+    border-bottom-width: 1px;
+    border-bottom-color: var(--tw-prose-th-borders);
+  }
+  .prose :where(thead th):not(:where([class~="not-prose"] *)) {
+    color: var(--tw-prose-headings);
+    vertical-align: bottom;
+    padding-bottom: 0.571429em;
+    padding-left: 0.571429em;
+    padding-right: 0.571429em;
+    font-weight: 600;
+  }
+  .prose :where(tbody tr):not(:where([class~="not-prose"] *)) {
+    border-bottom-width: 1px;
+    border-bottom-color: var(--tw-prose-td-borders);
+  }
+  .prose :where(tbody tr:last-child):not(:where([class~="not-prose"] *)) {
+    border-bottom-width: 0;
+  }
+  .prose :where(tbody td):not(:where([class~="not-prose"] *)) {
+    vertical-align: baseline;
+  }
+  .prose :where(tfoot):not(:where([class~="not-prose"] *)) {
+    border-top-width: 1px;
+    border-top-color: var(--tw-prose-th-borders);
+  }
+  .prose :where(tfoot td):not(:where([class~="not-prose"] *)) {
+    vertical-align: top;
+  }
+  .prose {
+    --tw-prose-body: oklch(37.3% 0.034 259.733);
+    --tw-prose-headings: oklch(21% 0.034 264.665);
+    --tw-prose-lead: oklch(44.6% 0.03 256.802);
+    --tw-prose-links: oklch(21% 0.034 264.665);
+    --tw-prose-bold: oklch(21% 0.034 264.665);
+    --tw-prose-counters: oklch(55.1% 0.027 264.364);
+    --tw-prose-bullets: oklch(87.2% 0.01 258.338);
+    --tw-prose-hr: oklch(92.8% 0.006 264.531);
+    --tw-prose-quotes: oklch(21% 0.034 264.665);
+    --tw-prose-quote-borders: oklch(92.8% 0.006 264.531);
+    --tw-prose-captions: oklch(55.1% 0.027 264.364);
+    --tw-prose-code: oklch(21% 0.034 264.665);
+    --tw-prose-pre-code: oklch(92.8% 0.006 264.531);
+    --tw-prose-pre-bg: oklch(27.8% 0.033 256.848);
+    --tw-prose-th-borders: oklch(87.2% 0.01 258.338);
+    --tw-prose-td-borders: oklch(92.8% 0.006 264.531);
+    --tw-prose-invert-body: oklch(87.2% 0.01 258.338);
+    --tw-prose-invert-headings: #fff;
+    --tw-prose-invert-lead: oklch(70.7% 0.022 261.325);
+    --tw-prose-invert-links: #fff;
+    --tw-prose-invert-bold: #fff;
+    --tw-prose-invert-counters: oklch(70.7% 0.022 261.325);
+    --tw-prose-invert-bullets: oklch(44.6% 0.03 256.802);
+    --tw-prose-invert-hr: oklch(37.3% 0.034 259.733);
+    --tw-prose-invert-quotes: oklch(96.7% 0.003 264.542);
+    --tw-prose-invert-quote-borders: oklch(37.3% 0.034 259.733);
+    --tw-prose-invert-captions: oklch(70.7% 0.022 261.325);
+    --tw-prose-invert-code: #fff;
+    --tw-prose-invert-pre-code: oklch(87.2% 0.01 258.338);
+    --tw-prose-invert-pre-bg: #00000080;
+    --tw-prose-invert-th-borders: oklch(44.6% 0.03 256.802);
+    --tw-prose-invert-td-borders: oklch(37.3% 0.034 259.733);
+    font-size: 1rem;
+    line-height: 1.75;
+  }
+  .prose :where(p):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.25em;
+    margin-bottom: 1.25em;
+  }
+  .prose :where(video):not(:where([class~="not-prose"] *)),
+  .prose :where(figure):not(:where([class~="not-prose"] *)) {
+    margin-top: 2em;
+    margin-bottom: 2em;
+  }
+  .prose :where(li):not(:where([class~="not-prose"] *)) {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+  }
+  .prose :where(ol > li):not(:where([class~="not-prose"] *)),
+  .prose :where(ul > li):not(:where([class~="not-prose"] *)) {
+    padding-left: 0.375em;
+  }
+  .prose :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
+    margin-top: 0.75em;
+    margin-bottom: 0.75em;
+  }
+  .prose :where(.prose > ul > li > :first-child):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.25em;
+  }
+  .prose :where(.prose > ul > li > :last-child):not(:where([class~="not-prose"] *)) {
+    margin-bottom: 1.25em;
+  }
+  .prose :where(.prose > ol > li > :first-child):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.25em;
+  }
+  .prose :where(.prose > ol > li > :last-child):not(:where([class~="not-prose"] *)) {
+    margin-bottom: 1.25em;
+  }
+  .prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) {
+    margin-top: 0.75em;
+    margin-bottom: 0.75em;
+  }
+  .prose :where(hr + *):not(:where([class~="not-prose"] *)),
+  .prose :where(h2 + *):not(:where([class~="not-prose"] *)),
+  .prose :where(h3 + *):not(:where([class~="not-prose"] *)),
+  .prose :where(h4 + *):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+  }
+  .prose :where(thead th:first-child):not(:where([class~="not-prose"] *)) {
+    padding-left: 0;
+  }
+  .prose :where(thead th:last-child):not(:where([class~="not-prose"] *)) {
+    padding-right: 0;
+  }
+  .prose :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) {
+    padding: 0.571429em;
+  }
+  .prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) {
+    padding-left: 0;
+  }
+  .prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) {
+    padding-right: 0;
+  }
+  .prose :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+  }
+  .prose :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
+    margin-bottom: 0;
+  }
+  .prose-sm {
+    font-size: 0.875rem;
+    line-height: 1.71429;
+  }
+  .prose-sm :where(p):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.14286em;
+    margin-bottom: 1.14286em;
+  }
+  .prose-sm :where([class~="lead"]):not(:where([class~="not-prose"] *)) {
+    margin-top: 0.888889em;
+    margin-bottom: 0.888889em;
+    font-size: 1.28571em;
+    line-height: 1.55556;
+  }
+  .prose-sm :where(blockquote):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.33333em;
+    margin-bottom: 1.33333em;
+    padding-left: 1.11111em;
+  }
+  .prose-sm :where(h1):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+    margin-bottom: 0.8em;
+    font-size: 2.14286em;
+    line-height: 1.2;
+  }
+  .prose-sm :where(h2):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.6em;
+    margin-bottom: 0.8em;
+    font-size: 1.42857em;
+    line-height: 1.4;
+  }
+  .prose-sm :where(h3):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.55556em;
+    margin-bottom: 0.444444em;
+    font-size: 1.28571em;
+    line-height: 1.55556;
+  }
+  .prose-sm :where(h4):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.42857em;
+    margin-bottom: 0.571429em;
+    line-height: 1.42857;
+  }
+  .prose-sm :where(img):not(:where([class~="not-prose"] *)),
+  .prose-sm :where(video):not(:where([class~="not-prose"] *)),
+  .prose-sm :where(figure):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.71429em;
+    margin-bottom: 1.71429em;
+  }
+  .prose-sm :where(figure > *):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+  .prose-sm :where(figcaption):not(:where([class~="not-prose"] *)) {
+    margin-top: 0.666667em;
+    font-size: 0.857143em;
+    line-height: 1.33333;
+  }
+  .prose-sm :where(code):not(:where([class~="not-prose"] *)) {
+    font-size: 0.857143em;
+  }
+  .prose-sm :where(h2 code):not(:where([class~="not-prose"] *)) {
+    font-size: 0.9em;
+  }
+  .prose-sm :where(h3 code):not(:where([class~="not-prose"] *)) {
+    font-size: 0.888889em;
+  }
+  .prose-sm :where(pre):not(:where([class~="not-prose"] *)) {
+    border-radius: 0.25rem;
+    margin-top: 1.66667em;
+    margin-bottom: 1.66667em;
+    padding: 0.666667em 1em;
+    font-size: 0.857143em;
+    line-height: 1.66667;
+  }
+  .prose-sm :where(ol):not(:where([class~="not-prose"] *)),
+  .prose-sm :where(ul):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.14286em;
+    margin-bottom: 1.14286em;
+    padding-left: 1.57143em;
+  }
+  .prose-sm :where(li):not(:where([class~="not-prose"] *)) {
+    margin-top: 0.285714em;
+    margin-bottom: 0.285714em;
+  }
+  .prose-sm :where(ol > li):not(:where([class~="not-prose"] *)),
+  .prose-sm :where(ul > li):not(:where([class~="not-prose"] *)) {
+    padding-left: 0.428571em;
+  }
+  .prose-sm :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
+    margin-top: 0.571429em;
+    margin-bottom: 0.571429em;
+  }
+  .prose-sm :where(.prose > ul > li > :first-child):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.14286em;
+  }
+  .prose-sm :where(.prose > ul > li > :last-child):not(:where([class~="not-prose"] *)) {
+    margin-bottom: 1.14286em;
+  }
+  .prose-sm :where(.prose > ol > li > :first-child):not(:where([class~="not-prose"] *)) {
+    margin-top: 1.14286em;
+  }
+  .prose-sm :where(.prose > ol > li > :last-child):not(:where([class~="not-prose"] *)) {
+    margin-bottom: 1.14286em;
+  }
+  .prose-sm :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) {
+    margin-top: 0.571429em;
+    margin-bottom: 0.571429em;
+  }
+  .prose-sm :where(hr):not(:where([class~="not-prose"] *)) {
+    margin-top: 2.85714em;
+    margin-bottom: 2.85714em;
+  }
+  .prose-sm :where(hr + *):not(:where([class~="not-prose"] *)),
+  .prose-sm :where(h2 + *):not(:where([class~="not-prose"] *)),
+  .prose-sm :where(h3 + *):not(:where([class~="not-prose"] *)),
+  .prose-sm :where(h4 + *):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+  }
+  .prose-sm :where(table):not(:where([class~="not-prose"] *)) {
+    font-size: 0.857143em;
+    line-height: 1.5;
+  }
+  .prose-sm :where(thead th):not(:where([class~="not-prose"] *)) {
+    padding-bottom: 0.666667em;
+    padding-left: 1em;
+    padding-right: 1em;
+  }
+  .prose-sm :where(thead th:first-child):not(:where([class~="not-prose"] *)) {
+    padding-left: 0;
+  }
+  .prose-sm :where(thead th:last-child):not(:where([class~="not-prose"] *)) {
+    padding-right: 0;
+  }
+  .prose-sm :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) {
+    padding: 0.666667em 1em;
+  }
+  .prose-sm :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) {
+    padding-left: 0;
+  }
+  .prose-sm :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) {
+    padding-right: 0;
+  }
+  .prose-sm :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
+    margin-top: 0;
+  }
+  .prose-sm :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
+    margin-bottom: 0;
+  }
+  .-mt-1 {
+    margin-top: calc(var(--spacing) * -1);
+  }
+  .-mt-1\.5 {
+    margin-top: calc(var(--spacing) * -1.5);
+  }
+  .-mt-2 {
+    margin-top: calc(var(--spacing) * -2);
+  }
+  .-mt-2\.5 {
+    margin-top: calc(var(--spacing) * -2.5);
+  }
+  .-mt-3 {
+    margin-top: calc(var(--spacing) * -3);
+  }
+  .-mt-4 {
+    margin-top: calc(var(--spacing) * -4);
+  }
+  .-mt-7 {
+    margin-top: calc(var(--spacing) * -7);
+  }
+  .-mt-10 {
+    margin-top: calc(var(--spacing) * -10);
+  }
+  .-mt-11 {
+    margin-top: calc(var(--spacing) * -11);
+  }
+  .-mt-\[2px\] {
+    margin-top: -2px;
+  }
+  .-mt-px {
+    margin-top: -1px;
+  }
+  .mt-0 {
+    margin-top: calc(var(--spacing) * 0);
+  }
+  .mt-0\! {
+    margin-top: calc(var(--spacing) * 0) !important;
+  }
+  .mt-0\.5 {
+    margin-top: calc(var(--spacing) * 0.5);
+  }
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
+  .mt-1\.5 {
+    margin-top: calc(var(--spacing) * 1.5);
+  }
+  .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
+  }
+  .mt-2\! {
+    margin-top: calc(var(--spacing) * 2) !important;
+  }
+  .mt-2\.5 {
+    margin-top: calc(var(--spacing) * 2.5);
+  }
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
+  .mt-4 {
+    margin-top: calc(var(--spacing) * 4);
+  }
+  .mt-4\! {
+    margin-top: calc(var(--spacing) * 4) !important;
+  }
+  .mt-5 {
+    margin-top: calc(var(--spacing) * 5);
+  }
+  .mt-6 {
+    margin-top: calc(var(--spacing) * 6);
+  }
+  .mt-7 {
+    margin-top: calc(var(--spacing) * 7);
+  }
+  .mt-8 {
+    margin-top: calc(var(--spacing) * 8);
+  }
+  .mt-9 {
+    margin-top: calc(var(--spacing) * 9);
+  }
+  .mt-10 {
+    margin-top: calc(var(--spacing) * 10);
+  }
+  .mt-12 {
+    margin-top: calc(var(--spacing) * 12);
+  }
+  .mt-24 {
+    margin-top: calc(var(--spacing) * 24);
+  }
+  .mt-\[2px\] {
+    margin-top: 2px;
+  }
+  .mt-\[3px\] {
+    margin-top: 3px;
+  }
+  .mt-\[9px\] {
+    margin-top: 9px;
+  }
+  .mt-\[22px\] {
+    margin-top: 22px;
+  }
+  .mt-auto {
+    margin-top: auto;
+  }
+  .mt-px {
+    margin-top: 1px;
+  }
+  .-mr-1 {
+    margin-right: calc(var(--spacing) * -1);
+  }
+  .-mr-4 {
+    margin-right: calc(var(--spacing) * -4);
+  }
+  .-mr-px {
+    margin-right: -1px;
+  }
+  .mr-0 {
+    margin-right: calc(var(--spacing) * 0);
+  }
+  .mr-1 {
+    margin-right: calc(var(--spacing) * 1);
+  }
+  .mr-1\.5 {
+    margin-right: calc(var(--spacing) * 1.5);
+  }
+  .mr-2 {
+    margin-right: calc(var(--spacing) * 2);
+  }
+  .mr-3 {
+    margin-right: calc(var(--spacing) * 3);
+  }
+  .mr-4 {
+    margin-right: calc(var(--spacing) * 4);
+  }
+  .mr-5 {
+    margin-right: calc(var(--spacing) * 5);
+  }
+  .mr-6 {
+    margin-right: calc(var(--spacing) * 6);
+  }
+  .mr-8 {
+    margin-right: calc(var(--spacing) * 8);
+  }
+  .mr-12 {
+    margin-right: calc(var(--spacing) * 12);
+  }
+  .mr-\[9px\] {
+    margin-right: 9px;
+  }
+  .mr-auto {
+    margin-right: auto;
+  }
+  .-mb-1 {
+    margin-bottom: calc(var(--spacing) * -1);
+  }
+  .-mb-2 {
+    margin-bottom: calc(var(--spacing) * -2);
+  }
+  .-mb-4 {
+    margin-bottom: calc(var(--spacing) * -4);
+  }
+  .-mb-9 {
+    margin-bottom: calc(var(--spacing) * -9);
+  }
+  .-mb-20 {
+    margin-bottom: calc(var(--spacing) * -20);
+  }
+  .-mb-px {
+    margin-bottom: -1px;
+  }
+  .mb-0 {
+    margin-bottom: calc(var(--spacing) * 0);
+  }
+  .mb-0\! {
+    margin-bottom: calc(var(--spacing) * 0) !important;
+  }
+  .mb-0\.5 {
+    margin-bottom: calc(var(--spacing) * 0.5);
+  }
+  .mb-1 {
+    margin-bottom: calc(var(--spacing) * 1);
+  }
+  .mb-1\.5 {
+    margin-bottom: calc(var(--spacing) * 1.5);
+  }
+  .mb-2 {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+  .mb-2\.5 {
+    margin-bottom: calc(var(--spacing) * 2.5);
+  }
+  .mb-3 {
+    margin-bottom: calc(var(--spacing) * 3);
+  }
+  .mb-3\! {
+    margin-bottom: calc(var(--spacing) * 3) !important;
+  }
+  .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
+  .mb-5 {
+    margin-bottom: calc(var(--spacing) * 5);
+  }
+  .mb-6 {
+    margin-bottom: calc(var(--spacing) * 6);
+  }
+  .mb-8 {
+    margin-bottom: calc(var(--spacing) * 8);
+  }
+  .mb-10 {
+    margin-bottom: calc(var(--spacing) * 10);
+  }
+  .mb-11 {
+    margin-bottom: calc(var(--spacing) * 11);
+  }
+  .mb-16 {
+    margin-bottom: calc(var(--spacing) * 16);
+  }
+  .mb-\[9px\] {
+    margin-bottom: 9px;
+  }
+  .mb-\[60px\] {
+    margin-bottom: 60px;
+  }
+  .mb-auto {
+    margin-bottom: auto;
+  }
+  .mb-px {
+    margin-bottom: 1px;
+  }
+  .-ml-0\.5 {
+    margin-left: calc(var(--spacing) * -0.5);
+  }
+  .-ml-1 {
+    margin-left: calc(var(--spacing) * -1);
+  }
+  .-ml-1\.5 {
+    margin-left: calc(var(--spacing) * -1.5);
+  }
+  .-ml-2 {
+    margin-left: calc(var(--spacing) * -2);
+  }
+  .-ml-3 {
+    margin-left: calc(var(--spacing) * -3);
+  }
+  .-ml-4 {
+    margin-left: calc(var(--spacing) * -4);
+  }
+  .-ml-6 {
+    margin-left: calc(var(--spacing) * -6);
+  }
+  .-ml-12 {
+    margin-left: calc(var(--spacing) * -12);
+  }
+  .-ml-14 {
+    margin-left: calc(var(--spacing) * -14);
+  }
+  .-ml-\[3px\] {
+    margin-left: -3px;
+  }
+  .-ml-\[13px\] {
+    margin-left: -13px;
+  }
+  .-ml-px {
+    margin-left: -1px;
+  }
+  .ml-0 {
+    margin-left: calc(var(--spacing) * 0);
+  }
+  .ml-1 {
+    margin-left: calc(var(--spacing) * 1);
+  }
+  .ml-1\.5 {
+    margin-left: calc(var(--spacing) * 1.5);
+  }
+  .ml-2 {
+    margin-left: calc(var(--spacing) * 2);
+  }
+  .ml-3 {
+    margin-left: calc(var(--spacing) * 3);
+  }
+  .ml-4 {
+    margin-left: calc(var(--spacing) * 4);
+  }
+  .ml-5 {
+    margin-left: calc(var(--spacing) * 5);
+  }
+  .ml-6 {
+    margin-left: calc(var(--spacing) * 6);
+  }
+  .ml-7 {
+    margin-left: calc(var(--spacing) * 7);
+  }
+  .ml-8 {
+    margin-left: calc(var(--spacing) * 8);
+  }
+  .ml-9 {
+    margin-left: calc(var(--spacing) * 9);
+  }
+  .ml-11 {
+    margin-left: calc(var(--spacing) * 11);
+  }
+  .ml-16 {
+    margin-left: calc(var(--spacing) * 16);
+  }
+  .ml-\[-4px\] {
+    margin-left: -4px;
+  }
+  .ml-auto {
+    margin-left: auto;
+  }
+  .box-border {
+    box-sizing: border-box;
+  }
+  .scrollbar::-webkit-scrollbar-track {
+    background-color: var(--scrollbar-track);
+    border-radius: var(--scrollbar-track-radius);
+  }
+  .scrollbar::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb);
+    border-radius: var(--scrollbar-thumb-radius);
+  }
+  .scrollbar::-webkit-scrollbar-corner {
+    background-color: var(--scrollbar-corner);
+    border-radius: var(--scrollbar-corner-radius);
+  }
+  .scrollbar {
+    scrollbar-width: auto;
+    scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
+  }
+  .scrollbar::-webkit-scrollbar {
+    width: var(--scrollbar-width, 16px);
+    height: var(--scrollbar-height, 16px);
+    display: block;
+  }
+  .scrollbar-thin::-webkit-scrollbar-track {
+    background-color: var(--scrollbar-track);
+    border-radius: var(--scrollbar-track-radius);
+  }
+  .scrollbar-thin::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb);
+    border-radius: var(--scrollbar-thumb-radius);
+  }
+  .scrollbar-thin::-webkit-scrollbar-corner {
+    background-color: var(--scrollbar-corner);
+    border-radius: var(--scrollbar-corner-radius);
+  }
+  .scrollbar-thin {
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-thumb, initial) var(--scrollbar-track, initial);
+  }
+  .scrollbar-thin::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+    display: block;
+  }
+  .line-clamp-1 {
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+  .line-clamp-2 {
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+  .line-clamp-3 {
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+  .line-clamp-4 {
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+  .block {
+    display: block;
+  }
+  .contents {
+    display: contents;
+  }
+  .flex {
+    display: flex;
+  }
+  .flex\! {
+    display: flex !important;
+  }
+  .grid {
+    display: grid;
+  }
+  .hidden {
+    display: none;
+  }
+  .hidden\! {
+    display: none !important;
+  }
+  .inline {
+    display: inline;
+  }
+  .inline-block {
+    display: inline-block;
+  }
+  .inline-flex {
+    display: inline-flex;
+  }
+  .list-item {
+    display: list-item;
+  }
+  .table {
+    display: table;
+  }
+  .aspect-square {
+    aspect-ratio: 1;
+  }
+  .aspect-video {
+    aspect-ratio: var(--aspect-video);
+  }
+  .size-4 {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+  }
+  .size-5 {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+  }
+  .size-7 {
+    width: calc(var(--spacing) * 7);
+    height: calc(var(--spacing) * 7);
+  }
+  .size-8 {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+  }
+  .size-9 {
+    width: calc(var(--spacing) * 9);
+    height: calc(var(--spacing) * 9);
+  }
+  .size-12 {
+    width: calc(var(--spacing) * 12);
+    height: calc(var(--spacing) * 12);
+  }
+  .size-32 {
+    width: calc(var(--spacing) * 32);
+    height: calc(var(--spacing) * 32);
+  }
+  .\!h-32 {
+    height: calc(var(--spacing) * 32) !important;
+  }
+  .h-\(--calendar-offset-top\) {
+    height: var(--calendar-offset-top);
+  }
+  .h-0\.5 {
+    height: calc(var(--spacing) * 0.5);
+  }
+  .h-1 {
+    height: calc(var(--spacing) * 1);
+  }
+  .h-1\.5 {
+    height: calc(var(--spacing) * 1.5);
+  }
+  .h-2 {
+    height: calc(var(--spacing) * 2);
+  }
+  .h-2\.5 {
+    height: calc(var(--spacing) * 2.5);
+  }
+  .h-3 {
+    height: calc(var(--spacing) * 3);
+  }
+  .h-3\.5 {
+    height: calc(var(--spacing) * 3.5);
+  }
+  .h-4 {
+    height: calc(var(--spacing) * 4);
+  }
+  .h-5 {
+    height: calc(var(--spacing) * 5);
+  }
+  .h-6 {
+    height: calc(var(--spacing) * 6);
+  }
+  .h-7 {
+    height: calc(var(--spacing) * 7);
+  }
+  .h-8 {
+    height: calc(var(--spacing) * 8);
+  }
+  .h-9 {
+    height: calc(var(--spacing) * 9);
+  }
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
+  .h-11 {
+    height: calc(var(--spacing) * 11);
+  }
+  .h-12 {
+    height: calc(var(--spacing) * 12);
+  }
+  .h-14 {
+    height: calc(var(--spacing) * 14);
+  }
+  .h-16 {
+    height: calc(var(--spacing) * 16);
+  }
+  .h-20 {
+    height: calc(var(--spacing) * 20);
+  }
+  .h-24 {
+    height: calc(var(--spacing) * 24);
+  }
+  .h-32 {
+    height: calc(var(--spacing) * 32);
+  }
+  .h-32\! {
+    height: calc(var(--spacing) * 32) !important;
+  }
+  .h-40 {
+    height: calc(var(--spacing) * 40);
+  }
+  .h-48 {
+    height: calc(var(--spacing) * 48);
+  }
+  .h-52 {
+    height: calc(var(--spacing) * 52);
+  }
+  .h-60 {
+    height: calc(var(--spacing) * 60);
+  }
+  .h-64 {
+    height: calc(var(--spacing) * 64);
+  }
+  .h-80 {
+    height: calc(var(--spacing) * 80);
+  }
+  .h-\[5px\] {
+    height: 5px;
+  }
+  .h-\[10px\] {
+    height: 10px;
+  }
+  .h-\[12px\] {
+    height: 12px;
+  }
+  .h-\[16px\] {
+    height: 16px;
+  }
+  .h-\[20px\] {
+    height: 20px;
+  }
+  .h-\[24px\] {
+    height: 24px;
+  }
+  .h-\[26px\] {
+    height: 26px;
+  }
+  .h-\[28px\] {
+    height: 28px;
+  }
+  .h-\[34px\] {
+    height: 34px;
+  }
+  .h-\[36px\] {
+    height: 36px;
+  }
+  .h-\[38px\] {
+    height: 38px;
+  }
+  .h-\[40\.5px\] {
+    height: 40.5px;
+  }
+  .h-\[40px\] {
+    height: 40px;
+  }
+  .h-\[45px\] {
+    height: 45px;
+  }
+  .h-\[54px\] {
+    height: 54px;
+  }
+  .h-\[55vh\] {
+    height: 55vh;
+  }
+  .h-\[70\%\] {
+    height: 70%;
+  }
+  .h-\[70px\] {
+    height: 70px;
+  }
+  .h-\[72px\] {
+    height: 72px;
+  }
+  .h-\[75dvh\] {
+    height: 75dvh;
+  }
+  .h-\[80dvh\] {
+    height: 80dvh;
+  }
+  .h-\[80px\] {
+    height: 80px;
+  }
+  .h-\[80vh\] {
+    height: 80vh;
+  }
+  .h-\[90px\] {
+    height: 90px;
+  }
+  .h-\[92px\] {
+    height: 92px;
+  }
+  .h-\[95vh\] {
+    height: 95vh;
+  }
+  .h-\[102px\] {
+    height: 102px;
+  }
+  .h-\[110px\] {
+    height: 110px;
+  }
+  .h-\[150px\] {
+    height: 150px;
+  }
+  .h-\[200px\] {
+    height: 200px;
+  }
+  .h-\[212px\] {
+    height: 212px;
+  }
+  .h-\[216px\] {
+    height: 216px;
+  }
+  .h-\[220px\] {
+    height: 220px;
+  }
+  .h-\[300px\] {
+    height: 300px;
+  }
+  .h-\[400px\] {
+    height: 400px;
+  }
+  .h-\[414px\] {
+    height: 414px;
+  }
+  .h-\[465px\] {
+    height: 465px;
+  }
+  .h-\[600px\] {
+    height: 600px;
+  }
+  .h-\[1000px\] {
+    height: 1000px;
+  }
+  .h-\[calc\(100\%-50px\)\] {
+    height: calc(100% - 50px);
+  }
+  .h-\[calc\(100vh-260px\)\] {
+    height: calc(100vh - 260px);
+  }
+  .h-auto {
+    height: auto;
+  }
+  .h-fit {
+    height: fit-content;
+  }
+  .h-full {
+    height: 100%;
+  }
+  .h-min {
+    height: min-content;
+  }
+  .h-px {
+    height: 1px;
+  }
+  .h-screen {
+    height: 100vh;
+  }
+  .max-h-4 {
+    max-height: calc(var(--spacing) * 4);
+  }
+  .max-h-6 {
+    max-height: calc(var(--spacing) * 6);
+  }
+  .max-h-20 {
+    max-height: calc(var(--spacing) * 20);
+  }
+  .max-h-24 {
+    max-height: calc(var(--spacing) * 24);
+  }
+  .max-h-40 {
+    max-height: calc(var(--spacing) * 40);
+  }
+  .max-h-48 {
+    max-height: calc(var(--spacing) * 48);
+  }
+  .max-h-60 {
+    max-height: calc(var(--spacing) * 60);
+  }
+  .max-h-64 {
+    max-height: calc(var(--spacing) * 64);
+  }
+  .max-h-72 {
+    max-height: calc(var(--spacing) * 72);
+  }
+  .max-h-80 {
+    max-height: calc(var(--spacing) * 80);
+  }
+  .max-h-96 {
+    max-height: calc(var(--spacing) * 96);
+  }
+  .max-h-97 {
+    max-height: calc(var(--spacing) * 97);
+  }
+  .max-h-\[3em\] {
+    max-height: 3em;
+  }
+  .max-h-\[45vh\] {
+    max-height: 45vh;
+  }
+  .max-h-\[80dvh\] {
+    max-height: 80dvh;
+  }
+  .max-h-\[80vh\] {
+    max-height: 80vh;
+  }
+  .max-h-\[85vh\] {
+    max-height: 85vh;
+  }
+  .max-h-\[95vh\] {
+    max-height: 95vh;
+  }
+  .max-h-\[180px\] {
+    max-height: 180px;
+  }
+  .max-h-\[300px\] {
+    max-height: 300px;
+  }
+  .max-h-\[390px\] {
+    max-height: 390px;
+  }
+  .max-h-\[400px\] {
+    max-height: 400px;
+  }
+  .max-h-\[500px\] {
+    max-height: 500px;
+  }
+  .max-h-full {
+    max-height: 100%;
+  }
+  .max-h-none {
+    max-height: none;
+  }
+  .max-h-screen {
+    max-height: 100vh;
+  }
+  .min-h-0 {
+    min-height: calc(var(--spacing) * 0);
+  }
+  .min-h-0\! {
+    min-height: calc(var(--spacing) * 0) !important;
+  }
+  .min-h-4 {
+    min-height: calc(var(--spacing) * 4);
+  }
+  .min-h-5 {
+    min-height: calc(var(--spacing) * 5);
+  }
+  .min-h-6 {
+    min-height: calc(var(--spacing) * 6);
+  }
+  .min-h-7 {
+    min-height: calc(var(--spacing) * 7);
+  }
+  .min-h-8 {
+    min-height: calc(var(--spacing) * 8);
+  }
+  .min-h-9 {
+    min-height: calc(var(--spacing) * 9);
+  }
+  .min-h-10 {
+    min-height: calc(var(--spacing) * 10);
+  }
+  .min-h-14 {
+    min-height: calc(var(--spacing) * 14);
+  }
+  .min-h-16 {
+    min-height: calc(var(--spacing) * 16);
+  }
+  .min-h-20 {
+    min-height: calc(var(--spacing) * 20);
+  }
+  .min-h-24 {
+    min-height: calc(var(--spacing) * 24);
+  }
+  .min-h-32 {
+    min-height: calc(var(--spacing) * 32);
+  }
+  .min-h-36 {
+    min-height: calc(var(--spacing) * 36);
+  }
+  .min-h-48 {
+    min-height: calc(var(--spacing) * 48);
+  }
+  .min-h-80 {
+    min-height: calc(var(--spacing) * 80);
+  }
+  .min-h-\[34px\] {
+    min-height: 34px;
+  }
+  .min-h-\[36px\] {
+    min-height: 36px;
+  }
+  .min-h-\[36px\]\! {
+    min-height: 36px !important;
+  }
+  .min-h-\[80px\] {
+    min-height: 80px;
+  }
+  .min-h-\[108px\] {
+    min-height: 108px;
+  }
+  .min-h-\[150px\] {
+    min-height: 150px;
+  }
+  .min-h-\[180px\] {
+    min-height: 180px;
+  }
+  .min-h-\[200px\] {
+    min-height: 200px;
+  }
+  .min-h-\[295px\] {
+    min-height: 295px;
+  }
+  .min-h-\[315px\] {
+    min-height: 315px;
+  }
+  .min-h-\[450px\] {
+    min-height: 450px;
+  }
+  .min-h-\[500px\] {
+    min-height: 500px;
+  }
+  .min-h-\[600px\] {
+    min-height: 600px;
+  }
+  .min-h-\[calc\(100dvh\)\] {
+    min-height: 100dvh;
+  }
+  .min-h-full {
+    min-height: 100%;
+  }
+  .min-h-screen {
+    min-height: 100vh;
+  }
+  .\!w-32 {
+    width: calc(var(--spacing) * 32) !important;
+  }
+  .w-\(--booker-timeslots-width\) {
+    width: var(--booker-timeslots-width);
+  }
+  .w-0 {
+    width: calc(var(--spacing) * 0);
+  }
+  .w-0\.5 {
+    width: calc(var(--spacing) * 0.5);
+  }
+  .w-1 {
+    width: calc(var(--spacing) * 1);
+  }
+  .w-1\.5 {
+    width: calc(var(--spacing) * 1.5);
+  }
+  .w-1\/2 {
+    width: 50%;
+  }
+  .w-1\/3 {
+    width: 33.3333%;
+  }
+  .w-1\/4 {
+    width: 25%;
+  }
+  .w-1\/5 {
+    width: 20%;
+  }
+  .w-1\/6 {
+    width: 16.6667%;
+  }
+  .w-1\/12 {
+    width: 8.33333%;
+  }
+  .w-2 {
+    width: calc(var(--spacing) * 2);
+  }
+  .w-2\.5 {
+    width: calc(var(--spacing) * 2.5);
+  }
+  .w-2\/3 {
+    width: 66.6667%;
+  }
+  .w-3 {
+    width: calc(var(--spacing) * 3);
+  }
+  .w-3\.5 {
+    width: calc(var(--spacing) * 3.5);
+  }
+  .w-3\/4 {
+    width: 75%;
+  }
+  .w-3\/5 {
+    width: 60%;
+  }
+  .w-4 {
+    width: calc(var(--spacing) * 4);
+  }
+  .w-4\/5 {
+    width: 80%;
+  }
+  .w-5 {
+    width: calc(var(--spacing) * 5);
+  }
+  .w-6 {
+    width: calc(var(--spacing) * 6);
+  }
+  .w-7 {
+    width: calc(var(--spacing) * 7);
+  }
+  .w-8 {
+    width: calc(var(--spacing) * 8);
+  }
+  .w-9 {
+    width: calc(var(--spacing) * 9);
+  }
+  .w-10 {
+    width: calc(var(--spacing) * 10);
+  }
+  .w-10\/12 {
+    width: 83.3333%;
+  }
+  .w-11 {
+    width: calc(var(--spacing) * 11);
+  }
+  .w-12 {
+    width: calc(var(--spacing) * 12);
+  }
+  .w-14 {
+    width: calc(var(--spacing) * 14);
+  }
+  .w-16 {
+    width: calc(var(--spacing) * 16);
+  }
+  .w-18 {
+    width: calc(var(--spacing) * 18);
+  }
+  .w-20 {
+    width: calc(var(--spacing) * 20);
+  }
+  .w-24 {
+    width: calc(var(--spacing) * 24);
+  }
+  .w-26 {
+    width: calc(var(--spacing) * 26);
+  }
+  .w-28 {
+    width: calc(var(--spacing) * 28);
+  }
+  .w-32 {
+    width: calc(var(--spacing) * 32);
+  }
+  .w-32\! {
+    width: calc(var(--spacing) * 32) !important;
+  }
+  .w-36 {
+    width: calc(var(--spacing) * 36);
+  }
+  .w-40 {
+    width: calc(var(--spacing) * 40);
+  }
+  .w-48 {
+    width: calc(var(--spacing) * 48);
+  }
+  .w-48\! {
+    width: calc(var(--spacing) * 48) !important;
+  }
+  .w-52 {
+    width: calc(var(--spacing) * 52);
+  }
+  .w-56 {
+    width: calc(var(--spacing) * 56);
+  }
+  .w-60 {
+    width: calc(var(--spacing) * 60);
+  }
+  .w-64 {
+    width: calc(var(--spacing) * 64);
+  }
+  .w-64\! {
+    width: calc(var(--spacing) * 64) !important;
+  }
+  .w-72 {
+    width: calc(var(--spacing) * 72);
+  }
+  .w-80 {
+    width: calc(var(--spacing) * 80);
+  }
+  .w-100 {
+    width: calc(var(--spacing) * 100);
+  }
+  .w-120 {
+    width: calc(var(--spacing) * 120);
+  }
+  .w-160 {
+    width: calc(var(--spacing) * 160);
+  }
+  .w-\[2px\] {
+    width: 2px;
+  }
+  .w-\[3px\] {
+    width: 3px;
+  }
+  .w-\[5px\] {
+    width: 5px;
+  }
+  .w-\[12px\] {
+    width: 12px;
+  }
+  .w-\[16px\] {
+    width: 16px;
+  }
+  .w-\[20\%\] {
+    width: 20%;
+  }
+  .w-\[20px\] {
+    width: 20px;
+  }
+  .w-\[28px\] {
+    width: 28px;
+  }
+  .w-\[36px\] {
+    width: 36px;
+  }
+  .w-\[40\%\] {
+    width: 40%;
+  }
+  .w-\[40\.5px\] {
+    width: 40.5px;
+  }
+  .w-\[46px\] {
+    width: 46px;
+  }
+  .w-\[49px\] {
+    width: 49px;
+  }
+  .w-\[70px\] {
+    width: 70px;
+  }
+  .w-\[72px\] {
+    width: 72px;
+  }
+  .w-\[80px\] {
+    width: 80px;
+  }
+  .w-\[80vw\] {
+    width: 80vw;
+  }
+  .w-\[90\%\] {
+    width: 90%;
+  }
+  .w-\[90px\] {
+    width: 90px;
+  }
+  .w-\[95vw\] {
+    width: 95vw;
+  }
+  .w-\[98px\] {
+    width: 98px;
+  }
+  .w-\[100px\] {
+    width: 100px;
+  }
+  .w-\[106px\] {
+    width: 106px;
+  }
+  .w-\[110px\] {
+    width: 110px;
+  }
+  .w-\[120px\] {
+    width: 120px;
+  }
+  .w-\[130px\] {
+    width: 130px;
+  }
+  .w-\[180px\] {
+    width: 180px;
+  }
+  .w-\[200px\] {
+    width: 200px;
+  }
+  .w-\[220px\] {
+    width: 220px;
+  }
+  .w-\[250px\] {
+    width: 250px;
+  }
+  .w-\[258px\] {
+    width: 258px;
+  }
+  .w-\[276px\] {
+    width: 276px;
+  }
+  .w-\[360px\] {
+    width: 360px;
+  }
+  .w-\[465px\] {
+    width: 465px;
+  }
+  .w-\[calc\(100\%\+16px\)\] {
+    width: calc(100% + 16px);
+  }
+  .w-\[calc\(100\%-1px\)\] {
+    width: calc(100% - 1px);
+  }
+  .w-auto {
+    width: auto;
+  }
+  .w-auto\! {
+    width: auto !important;
+  }
+  .w-fit {
+    width: fit-content;
+  }
+  .w-full {
+    width: 100%;
+  }
+  .w-max {
+    width: max-content;
+  }
+  .w-px {
+    width: 1px;
+  }
+  .w-screen {
+    width: 100vw;
+  }
+  .max-w-\(--breakpoint-lg\) {
+    max-width: var(--breakpoint-lg);
+  }
+  .max-w-\(--breakpoint-sm\) {
+    max-width: var(--breakpoint-sm);
+  }
+  .max-w-2xl {
+    max-width: var(--container-2xl);
+  }
+  .max-w-3xl {
+    max-width: var(--container-3xl);
+  }
+  .max-w-4xl {
+    max-width: var(--container-4xl);
+  }
+  .max-w-5xl {
+    max-width: var(--container-5xl);
+  }
+  .max-w-7xl {
+    max-width: var(--container-7xl);
+  }
+  .max-w-10\/12 {
+    max-width: 83.3333%;
+  }
+  .max-w-24 {
+    max-width: calc(var(--spacing) * 24);
+  }
+  .max-w-28 {
+    max-width: calc(var(--spacing) * 28);
+  }
+  .max-w-32 {
+    max-width: calc(var(--spacing) * 32);
+  }
+  .max-w-36 {
+    max-width: calc(var(--spacing) * 36);
+  }
+  .max-w-44 {
+    max-width: calc(var(--spacing) * 44);
+  }
+  .max-w-48 {
+    max-width: calc(var(--spacing) * 48);
+  }
+  .max-w-52 {
+    max-width: calc(var(--spacing) * 52);
+  }
+  .max-w-56 {
+    max-width: calc(var(--spacing) * 56);
+  }
+  .max-w-60 {
+    max-width: calc(var(--spacing) * 60);
+  }
+  .max-w-64 {
+    max-width: calc(var(--spacing) * 64);
+  }
+  .max-w-80 {
+    max-width: calc(var(--spacing) * 80);
+  }
+  .max-w-\[43em\] {
+    max-width: 43em;
+  }
+  .max-w-\[50ch\] {
+    max-width: 50ch;
+  }
+  .max-w-\[80\%\] {
+    max-width: 80%;
+  }
+  .max-w-\[90\%\] {
+    max-width: 90%;
+  }
+  .max-w-\[90vw\] {
+    max-width: 90vw;
+  }
+  .max-w-\[200px\] {
+    max-width: 200px;
+  }
+  .max-w-\[250px\] {
+    max-width: 250px;
+  }
+  .max-w-\[280px\] {
+    max-width: 280px;
+  }
+  .max-w-\[300px\] {
+    max-width: 300px;
+  }
+  .max-w-\[400px\] {
+    max-width: 400px;
+  }
+  .max-w-\[420px\] {
+    max-width: 420px;
+  }
+  .max-w-\[450px\] {
+    max-width: 450px;
+  }
+  .max-w-\[468px\] {
+    max-width: 468px;
+  }
+  .max-w-\[500px\] {
+    max-width: 500px;
+  }
+  .max-w-\[600px\] {
+    max-width: 600px;
+  }
+  .max-w-\[1130px\] {
+    max-width: 1130px;
+  }
+  .max-w-\[1200px\] {
+    max-width: 1200px;
+  }
+  .max-w-\[1440px\] {
+    max-width: 1440px;
+  }
+  .max-w-full {
+    max-width: 100%;
+  }
+  .max-w-lg {
+    max-width: var(--container-lg);
+  }
+  .max-w-md {
+    max-width: var(--container-md);
+  }
+  .max-w-none {
+    max-width: none;
+  }
+  .max-w-screen {
+    max-width: 100vw;
+  }
+  .max-w-sm {
+    max-width: var(--container-sm);
+  }
+  .max-w-xl {
+    max-width: var(--container-xl);
+  }
+  .min-w-0 {
+    min-width: calc(var(--spacing) * 0);
+  }
+  .min-w-4 {
+    min-width: calc(var(--spacing) * 4);
+  }
+  .min-w-5 {
+    min-width: calc(var(--spacing) * 5);
+  }
+  .min-w-6 {
+    min-width: calc(var(--spacing) * 6);
+  }
+  .min-w-8 {
+    min-width: calc(var(--spacing) * 8);
+  }
+  .min-w-9 {
+    min-width: calc(var(--spacing) * 9);
+  }
+  .min-w-10 {
+    min-width: calc(var(--spacing) * 10);
+  }
+  .min-w-14 {
+    min-width: calc(var(--spacing) * 14);
+  }
+  .min-w-16 {
+    min-width: calc(var(--spacing) * 16);
+  }
+  .min-w-24 {
+    min-width: calc(var(--spacing) * 24);
+  }
+  .min-w-32 {
+    min-width: calc(var(--spacing) * 32);
+  }
+  .min-w-40 {
+    min-width: calc(var(--spacing) * 40);
+  }
+  .min-w-48 {
+    min-width: calc(var(--spacing) * 48);
+  }
+  .min-w-56 {
+    min-width: calc(var(--spacing) * 56);
+  }
+  .min-w-60 {
+    min-width: calc(var(--spacing) * 60);
+  }
+  .min-w-\[34px\] {
+    min-width: 34px;
+  }
+  .min-w-\[36px\] {
+    min-width: 36px;
+  }
+  .min-w-\[88px\] {
+    min-width: 88px;
+  }
+  .min-w-\[90\%\] {
+    min-width: 90%;
+  }
+  .min-w-\[100px\] {
+    min-width: 100px;
+  }
+  .min-w-\[150px\] {
+    min-width: 150px;
+  }
+  .min-w-\[180px\] {
+    min-width: 180px;
+  }
+  .min-w-\[200px\] {
+    min-width: 200px;
+  }
+  .min-w-fit {
+    min-width: fit-content;
+  }
+  .min-w-full {
+    min-width: 100%;
+  }
+  .min-w-max {
+    min-width: max-content;
+  }
+  .flex-1 {
+    flex: 1;
+  }
+  .flex-auto {
+    flex: auto;
+  }
+  .flex-none {
+    flex: none;
+  }
+  .flex-shrink-0 {
+    flex-shrink: 0;
+  }
+  .shrink {
+    flex-shrink: 1;
+  }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
+  .grow {
+    flex-grow: 1;
+  }
+  .grow-0 {
+    flex-grow: 0;
+  }
+  .basis-1\/3 {
+    flex-basis: 33.3333%;
+  }
+  .basis-1\/5 {
+    flex-basis: 20%;
+  }
+  .basis-2\/3 {
+    flex-basis: 66.6667%;
+  }
+  .basis-2\/5 {
+    flex-basis: 40%;
+  }
+  .basis-3\/5 {
+    flex-basis: 60%;
+  }
+  .table-fixed {
+    table-layout: fixed;
+  }
+  .caption-bottom {
+    caption-side: bottom;
+  }
+  .border-collapse {
+    border-collapse: collapse;
+  }
+  .origin-center {
+    transform-origin: 50%;
+  }
+  .origin-top-right {
+    transform-origin: 100% 0;
+  }
+  .-translate-x-0\.5 {
+    --tw-translate-x: calc(var(--spacing) * -0.5);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .-translate-x-1\/2 {
+    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .-translate-x-\[228px\] {
+    --tw-translate-x: calc(228px * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .-translate-x-\[232px\] {
+    --tw-translate-x: calc(232px * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .-translate-x-full {
+    --tw-translate-x: -100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-x-0 {
+    --tw-translate-x: calc(var(--spacing) * 0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-x-\[-50\%\] {
+    --tw-translate-x: -50%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-x-full {
+    --tw-translate-x: 100%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .-translate-y-1\/2 {
+    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-y-\[-50\%\] {
+    --tw-translate-y: -50%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-y-\[2px\] {
+    --tw-translate-y: 2px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-y-\[8px\] {
+    --tw-translate-y: 8px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .scale-0 {
+    --tw-scale-x: 0%;
+    --tw-scale-y: 0%;
+    --tw-scale-z: 0%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+  .-rotate-24 {
+    rotate: -24deg;
+  }
+  .rotate-24 {
+    rotate: 24deg;
+  }
+  .rotate-45 {
+    rotate: 45deg;
+  }
+  .rotate-56 {
+    rotate: 56deg;
+  }
+  .rotate-90 {
+    rotate: 90deg;
+  }
+  .rotate-180 {
+    rotate: 180deg;
+  }
+  .transform {
+    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
+  }
+  .animate-fade-in-up {
+    animation: fade-in-up 0.6s var(--animation-delay, 0s) cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
+  }
+  .animate-pulse {
+    animation: var(--animate-pulse);
+  }
+  .animate-spin {
+    animation: var(--animate-spin);
+  }
+  .animate-spinning {
+    animation: 0.75s linear infinite spinning;
+  }
+  .cursor-col-resize {
+    cursor: col-resize;
+  }
+  .cursor-default {
+    cursor: default;
+  }
+  .cursor-none {
+    cursor: none;
+  }
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .cursor-wait {
+    cursor: wait;
+  }
+  .touch-none {
+    touch-action: none;
+  }
+  .resize {
+    resize: both;
+  }
+  .snap-x {
+    scroll-snap-type: x var(--tw-scroll-snap-strictness);
+  }
+  .snap-mandatory {
+    --tw-scroll-snap-strictness: mandatory;
+  }
+  .snap-center {
+    scroll-snap-align: center;
+  }
+  .list-inside {
+    list-style-position: inside;
+  }
+  .list-decimal {
+    list-style-type: decimal;
+  }
+  .list-disc {
+    list-style-type: disc;
+  }
+  .list-none {
+    list-style-type: none;
+  }
+  .\[appearance\:textfield\] {
+    appearance: textfield;
+  }
+  .appearance-none {
+    appearance: none;
+  }
+  .columns-3 {
+    columns: 3;
+  }
+  .auto-cols-auto {
+    grid-auto-columns: auto;
+  }
+  .auto-cols-fr {
+    grid-auto-columns: minmax(0, 1fr);
+  }
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .grid-cols-5 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .grid-cols-7 {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  .grid-cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+  .grid-cols-\[1fr_400px\] {
+    grid-template-columns: 1fr 400px;
+  }
+  .grid-rows-1 {
+    grid-template-rows: repeat(1, minmax(0, 1fr));
+  }
+  .grid-rows-2 {
+    grid-template-rows: repeat(2, minmax(0, 1fr));
+  }
+  .grid-rows-6 {
+    grid-template-rows: repeat(6, minmax(0, 1fr));
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .flex-col-reverse {
+    flex-direction: column-reverse;
+  }
+  .flex-row {
+    flex-direction: row;
+  }
+  .flex-row-reverse {
+    flex-direction: row-reverse;
+  }
+  .flex-nowrap {
+    flex-wrap: nowrap;
+  }
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+  .place-items-center {
+    place-items: center;
+  }
+  .content-center {
+    align-content: center;
+  }
+  .items-baseline {
+    align-items: baseline;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .items-end {
+    align-items: flex-end;
+  }
+  .items-start {
+    align-items: flex-start;
+  }
+  .items-start\! {
+    align-items: flex-start !important;
+  }
+  .justify-around {
+    justify-content: space-around;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .justify-end {
+    justify-content: flex-end;
+  }
+  .justify-start {
+    justify-content: flex-start;
+  }
+  .justify-items-center {
+    justify-items: center;
+  }
+  .gap-0\.5 {
+    gap: calc(var(--spacing) * 0.5);
+  }
+  .gap-1 {
+    gap: calc(var(--spacing) * 1);
+  }
+  .gap-1\.5 {
+    gap: calc(var(--spacing) * 1.5);
+  }
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
+  .gap-2\.5 {
+    gap: calc(var(--spacing) * 2.5);
+  }
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
+  .gap-4 {
+    gap: calc(var(--spacing) * 4);
+  }
+  .gap-5 {
+    gap: calc(var(--spacing) * 5);
+  }
+  .gap-6 {
+    gap: calc(var(--spacing) * 6);
+  }
+  .gap-8 {
+    gap: calc(var(--spacing) * 8);
+  }
+  .gap-\[10px\] {
+    gap: 10px;
+  }
+  :where(.space-y-0 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
+  }
+  :where(.space-y-0\.5 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));
+  }
+  :where(.space-y-1 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
+  }
+  :where(.space-y-1\.5 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
+  }
+  :where(.space-y-2 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
+  }
+  :where(.space-y-3 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
+  }
+  :where(.space-y-4 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
+  }
+  :where(.space-y-5 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
+  }
+  :where(.space-y-6 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
+  }
+  :where(.space-y-8 > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
+    margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
+  }
+  :where(.space-y-px > :not(:last-child)) {
+    --tw-space-y-reverse: 0;
+    margin-block-start: calc(1px * var(--tw-space-y-reverse));
+    margin-block-end: calc(1px * calc(1 - var(--tw-space-y-reverse)));
+  }
+  .gap-x-1 {
+    column-gap: calc(var(--spacing) * 1);
+  }
+  .gap-x-2 {
+    column-gap: calc(var(--spacing) * 2);
+  }
+  .gap-x-3 {
+    column-gap: calc(var(--spacing) * 3);
+  }
+  .gap-x-4 {
+    column-gap: calc(var(--spacing) * 4);
+  }
+  .gap-x-5 {
+    column-gap: calc(var(--spacing) * 5);
+  }
+  .gap-x-8 {
+    column-gap: calc(var(--spacing) * 8);
+  }
+  :where(.space-x-0 > :not(:last-child)) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(calc(var(--spacing) * 0) * var(--tw-space-x-reverse));
+    margin-inline-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-x-reverse)));
+  }
+  :where(.space-x-0\.5 > :not(:last-child)) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-x-reverse));
+    margin-inline-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-x-reverse)));
+  }
+  :where(.space-x-1 > :not(:last-child)) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(calc(var(--spacing) * 1) * var(--tw-space-x-reverse));
+    margin-inline-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-x-reverse)));
+  }
+  :where(.space-x-1\.5 > :not(:last-child)) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-x-reverse));
+    margin-inline-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-x-reverse)));
+  }
+  :where(.space-x-2 > :not(:last-child)) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
+    margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
+  }
+  :where(.space-x-2\.5 > :not(:last-child)) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(calc(var(--spacing) * 2.5) * var(--tw-space-x-reverse));
+    margin-inline-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-x-reverse)));
+  }
+  :where(.space-x-3 > :not(:last-child)) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
+    margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
+  }
+  :where(.space-x-3\.5 > :not(:last-child)) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(calc(var(--spacing) * 3.5) * var(--tw-space-x-reverse));
+    margin-inline-end: calc(calc(var(--spacing) * 3.5) * calc(1 - var(--tw-space-x-reverse)));
+  }
+  :where(.space-x-4 > :not(:last-child)) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
+    margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
+  }
+  :where(.space-x-5 > :not(:last-child)) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(calc(var(--spacing) * 5) * var(--tw-space-x-reverse));
+    margin-inline-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-x-reverse)));
+  }
+  :where(.space-x-11 > :not(:last-child)) {
+    --tw-space-x-reverse: 0;
+    margin-inline-start: calc(calc(var(--spacing) * 11) * var(--tw-space-x-reverse));
+    margin-inline-end: calc(calc(var(--spacing) * 11) * calc(1 - var(--tw-space-x-reverse)));
+  }
+  .gap-y-1 {
+    row-gap: calc(var(--spacing) * 1);
+  }
+  .gap-y-2 {
+    row-gap: calc(var(--spacing) * 2);
+  }
+  .gap-y-3 {
+    row-gap: calc(var(--spacing) * 3);
+  }
+  .gap-y-8 {
+    row-gap: calc(var(--spacing) * 8);
+  }
+  :where(.divide-x > :not(:last-child)) {
+    --tw-divide-x-reverse: 0;
+    border-inline-style: var(--tw-border-style);
+    border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
+    border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
+  }
+  :where(.divide-y > :not(:last-child)) {
+    --tw-divide-y-reverse: 0;
+    border-bottom-style: var(--tw-border-style);
+    border-top-style: var(--tw-border-style);
+    border-top-width: calc(1px * var(--tw-divide-y-reverse));
+    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  }
+  :where(.divide-y-2 > :not(:last-child)) {
+    --tw-divide-y-reverse: 0;
+    border-bottom-style: var(--tw-border-style);
+    border-top-style: var(--tw-border-style);
+    border-top-width: calc(2px * var(--tw-divide-y-reverse));
+    border-bottom-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
+  }
+  :where(.divide-black > :not(:last-child)) {
+    border-color: #111;
+  }
+  :where(.divide-default > :not(:last-child)) {
+    border-color: var(--cal-border);
+  }
+  :where(.divide-muted > :not(:last-child)) {
+    border-color: var(--cal-border-muted);
+  }
+  :where(.divide-subtle > :not(:last-child)) {
+    border-color: var(--cal-border-subtle);
+  }
+  .place-self-center {
+    place-self: center;
+  }
+  .place-self-end {
+    place-self: end;
+  }
+  .self-center {
+    align-self: center;
+  }
+  .self-end {
+    align-self: flex-end;
+  }
+  .self-start {
+    align-self: flex-start;
+  }
+  .self-stretch {
+    align-self: stretch;
+  }
+  .justify-self-end {
+    justify-self: flex-end;
+  }
+  .truncate {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  .overflow-auto {
+    overflow: auto;
+  }
+  .overflow-clip {
+    overflow: clip;
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .overflow-scroll {
+    overflow: scroll;
+  }
+  .overflow-visible {
+    overflow: visible;
+  }
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
+  .overflow-x-hidden {
+    overflow-x: hidden;
+  }
+  .overflow-x-hidden\! {
+    overflow-x: hidden !important;
+  }
+  .overflow-x-scroll {
+    overflow-x: scroll;
+  }
+  .overflow-y-auto {
+    overflow-y: auto;
+  }
+  .overflow-y-hidden {
+    overflow-y: hidden;
+  }
+  .overflow-y-scroll {
+    overflow-y: scroll;
+  }
+  .overflow-y-scroll\! {
+    overflow-y: scroll !important;
+  }
+  .scroll-auto {
+    scroll-behavior: auto;
+  }
+  .rounded {
+    border-radius: var(--radius);
+  }
+  .rounded-2xl {
+    border-radius: var(--radius-2xl);
+  }
+  .rounded-3xl {
+    border-radius: var(--radius-3xl);
+  }
+  .rounded-\[1px\] {
+    border-radius: 1px;
+  }
+  .rounded-\[4px\] {
+    border-radius: 4px;
+  }
+  .rounded-\[5px\] {
+    border-radius: 5px;
+  }
+  .rounded-\[6px\] {
+    border-radius: 6px;
+  }
+  .rounded-\[10px\] {
+    border-radius: 10px;
+  }
+  .rounded-\[12px\] {
+    border-radius: 12px;
+  }
+  .rounded-\[32px\] {
+    border-radius: 32px;
+  }
+  .rounded-\[inherit\] {
+    border-radius: inherit;
+  }
+  .rounded-full {
+    border-radius: 3.40282e38px;
+  }
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
+  .rounded-lg\! {
+    border-radius: var(--radius-lg) !important;
+  }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
+  .rounded-none {
+    border-radius: 0;
+  }
+  .rounded-sm {
+    border-radius: var(--radius-sm);
+  }
+  .rounded-xl {
+    border-radius: var(--radius-xl);
+  }
+  .rounded-t {
+    border-top-left-radius: var(--radius);
+    border-top-right-radius: var(--radius);
+  }
+  .rounded-t-2xl {
+    border-top-left-radius: var(--radius-2xl);
+    border-top-right-radius: var(--radius-2xl);
+  }
+  .rounded-t-lg {
+    border-top-left-radius: var(--radius-lg);
+    border-top-right-radius: var(--radius-lg);
+  }
+  .rounded-t-md {
+    border-top-left-radius: var(--radius-md);
+    border-top-right-radius: var(--radius-md);
+  }
+  .rounded-t-none {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+  .rounded-t-xl {
+    border-top-left-radius: var(--radius-xl);
+    border-top-right-radius: var(--radius-xl);
+  }
+  .rounded-l-2xl {
+    border-top-left-radius: var(--radius-2xl);
+    border-bottom-left-radius: var(--radius-2xl);
+  }
+  .rounded-l-md {
+    border-top-left-radius: var(--radius-md);
+    border-bottom-left-radius: var(--radius-md);
+  }
+  .rounded-l-none {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .rounded-l-sm {
+    border-top-left-radius: var(--radius-sm);
+    border-bottom-left-radius: var(--radius-sm);
+  }
+  .rounded-tl-2xl {
+    border-top-left-radius: var(--radius-2xl);
+  }
+  .rounded-r-md {
+    border-top-right-radius: var(--radius-md);
+    border-bottom-right-radius: var(--radius-md);
+  }
+  .rounded-r-none {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .rounded-r-sm {
+    border-top-right-radius: var(--radius-sm);
+    border-bottom-right-radius: var(--radius-sm);
+  }
+  .rounded-b {
+    border-bottom-right-radius: var(--radius);
+    border-bottom-left-radius: var(--radius);
+  }
+  .rounded-b-2xl {
+    border-bottom-right-radius: var(--radius-2xl);
+    border-bottom-left-radius: var(--radius-2xl);
+  }
+  .rounded-b-lg {
+    border-bottom-right-radius: var(--radius-lg);
+    border-bottom-left-radius: var(--radius-lg);
+  }
+  .rounded-b-md {
+    border-bottom-right-radius: var(--radius-md);
+    border-bottom-left-radius: var(--radius-md);
+  }
+  .rounded-b-none {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .rounded-b-xl {
+    border-bottom-right-radius: var(--radius-xl);
+    border-bottom-left-radius: var(--radius-xl);
+  }
+  .rounded-br-md {
+    border-bottom-right-radius: var(--radius-md);
+  }
+  .rounded-br-none {
+    border-bottom-right-radius: 0;
+  }
+  .rounded-bl-2xl {
+    border-bottom-left-radius: var(--radius-2xl);
+  }
+  .rounded-bl-md {
+    border-bottom-left-radius: var(--radius-md);
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0;
+  }
+  .border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
+  .border-5 {
+    border-style: var(--tw-border-style);
+    border-width: 5px;
+  }
+  .border-8 {
+    border-style: var(--tw-border-style);
+    border-width: 8px;
+  }
+  .border-\[1\.5px\] {
+    border-style: var(--tw-border-style);
+    border-width: 1.5px;
+  }
+  .border-\[1px\] {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-booker-width {
+    border-style: var(--tw-border-style);
+    border-width: var(--cal-border-booker-width, 1px);
+  }
+  .border-x {
+    border-inline-style: var(--tw-border-style);
+    border-inline-width: 1px;
+  }
+  .border-y {
+    border-block-style: var(--tw-border-style);
+    border-block-width: 1px;
+  }
+  .border-y-0 {
+    border-block-style: var(--tw-border-style);
+    border-block-width: 0;
+  }
+  .border-t {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+  }
+  .border-t-0 {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 0;
+  }
+  .border-r {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+  }
+  .border-r-0 {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 0;
+  }
+  .border-r-2 {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 2px;
+  }
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+  .border-b-0 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 0;
+  }
+  .border-b-2 {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 2px;
+  }
+  .border-l {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 1px;
+  }
+  .border-l-0 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 0;
+  }
+  .border-l-2 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 2px;
+  }
+  .border-dashed {
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
+  .border-none {
+    --tw-border-style: none;
+    border-style: none;
+  }
+  .border-solid {
+    --tw-border-style: solid;
+    border-style: solid;
+  }
+  .\!border-muted {
+    border-color: var(--cal-border-muted) !important;
+  }
+  .border-\[\#e5e7eb\] {
+    border-color: #e5e7eb;
+  }
+  .border-black {
+    border-color: #111;
+  }
+  .border-booker {
+    border-color: var(--cal-border-booker);
+  }
+  .border-border {
+    border-color: var(--border);
+  }
+  .border-brand,
+  .border-brand-default {
+    border-color: var(--cal-brand);
+  }
+  .border-default {
+    border-color: var(--cal-border);
+  }
+  .border-destructive {
+    border-color: var(--destructive);
+  }
+  .border-emphasis {
+    border-color: var(--cal-border-emphasis);
+  }
+  .border-error {
+    border-color: var(--cal-border-error);
+  }
+  .border-gray-200 {
+    border-color: var(--color-gray-200);
+  }
+  .border-gray-300 {
+    border-color: var(--color-gray-300);
+  }
+  .border-gray-300\/20 {
+    border-color: #d1d5dc33;
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .border-gray-300\/20 {
+      border-color: color-mix(in oklab, var(--color-gray-300) 20%, transparent);
+    }
+  }
+  .border-green-500 {
+    border-color: var(--color-green-500);
+  }
+  .border-input {
+    border-color: var(--input);
+  }
+  .border-inverted {
+    border-color: var(--cal-bg-inverted);
+  }
+  .border-muted {
+    border-color: var(--cal-border-muted);
+  }
+  .border-neutral-200 {
+    border-color: var(--color-neutral-200);
+  }
+  .border-neutral-300 {
+    border-color: var(--color-neutral-300);
+  }
+  .border-orange-400 {
+    border-color: var(--color-orange-400);
+  }
+  .border-primary {
+    border-color: var(--primary);
+  }
+  .border-red-100 {
+    border-color: var(--color-red-100);
+  }
+  .border-red-500 {
+    border-color: var(--color-red-500);
+  }
+  .border-red-700\! {
+    border-color: var(--color-red-700) !important;
+  }
+  .border-secondary {
+    border-color: var(--secondary);
+  }
+  .border-semantic-attention-subtle {
+    border-color: var(--cal-border-semantic-attention-subtle);
+  }
+  .border-semantic-error-subtle {
+    border-color: var(--cal-border-semantic-error-subtle);
+  }
+  .border-subtle {
+    border-color: var(--cal-border-subtle);
+  }
+  .border-transparent {
+    border-color: #0000;
+  }
+  .border-white {
+    border-color: var(--color-white);
+  }
+  .border-r-default {
+    border-right-color: var(--cal-border);
+  }
+  .border-r-subtle {
+    border-right-color: var(--cal-border-subtle);
+  }
+  .border-b-black {
+    border-bottom-color: #111;
+  }
+  .border-b-default {
+    border-bottom-color: var(--cal-border);
+  }
+  .border-b-subtle {
+    border-bottom-color: var(--cal-border-subtle);
+  }
+  .border-l-default {
+    border-left-color: var(--cal-border);
+  }
+  .border-l-subtle {
+    border-left-color: var(--cal-border-subtle);
+  }
+  .\!bg-cal-muted {
+    background-color: var(--cal-bg-muted) !important;
+  }
+  .\!bg-default {
+    background-color: var(--cal-bg) !important;
+  }
+  .\!bg-subtle {
+    background-color: var(--cal-bg-subtle) !important;
+  }
+  .bg-\[\#2A2947\] {
+    background-color: #2a2947;
+  }
+  .bg-\[\#82ca9d\] {
+    background-color: #82ca9d;
+  }
+  .bg-\[\#83a6ed\] {
+    background-color: #83a6ed;
+  }
+  .bg-\[\#8884d8\] {
+    background-color: #8884d8;
+  }
+  .bg-\[\#FAFAFA\] {
+    background-color: #fafafa;
+  }
+  .bg-\[\#ffc439\] {
+    background-color: #ffc439;
+  }
+  .bg-attention {
+    background-color: var(--cal-bg-attention);
+  }
+  .bg-background {
+    background-color: var(--background);
+  }
+  .bg-black {
+    background-color: #111;
+  }
+  .bg-black\/3 {
+    background-color: oklab(17.7638% -2.23517e-8 0/0.03);
+  }
+  .bg-black\/30 {
+    background-color: oklab(17.7638% -2.23517e-8 0/0.3);
+  }
+  .bg-black\/50 {
+    background-color: oklab(17.7638% -2.23517e-8 0/0.5);
+  }
+  .bg-black\/60 {
+    background-color: oklab(17.7638% -2.23517e-8 0/0.6);
+  }
+  .bg-black\/80 {
+    background-color: oklab(17.7638% -2.23517e-8 0/0.8);
+  }
+  .bg-blue-50 {
+    background-color: var(--color-blue-50);
+  }
+  .bg-blue-500 {
+    background-color: var(--color-blue-500);
+  }
+  .bg-brand {
+    background-color: var(--cal-brand);
+  }
+  .bg-brand-accent {
+    background-color: var(--cal-brand-accent, white);
+  }
+  .bg-brand-default,
+  .bg-brand\/5 {
+    background-color: var(--cal-brand);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-brand\/5 {
+      background-color: color-mix(in oklab, var(--cal-brand) 5%, transparent);
+    }
+  }
+  .bg-brand\/10 {
+    background-color: var(--cal-brand);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-brand\/10 {
+      background-color: color-mix(in oklab, var(--cal-brand) 10%, transparent);
+    }
+  }
+  .bg-brand\/30 {
+    background-color: var(--cal-brand);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-brand\/30 {
+      background-color: color-mix(in oklab, var(--cal-brand) 30%, transparent);
+    }
+  }
+  .bg-cal-info {
+    background-color: var(--cal-bg-info);
+  }
+  .bg-cal-muted,
+  .bg-cal-muted\/40 {
+    background-color: var(--cal-bg-muted);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-cal-muted\/40 {
+      background-color: color-mix(in oklab, var(--cal-bg-muted) 40%, transparent);
+    }
+  }
+  .bg-cal-muted\/50 {
+    background-color: var(--cal-bg-muted);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-cal-muted\/50 {
+      background-color: color-mix(in oklab, var(--cal-bg-muted) 50%, transparent);
+    }
+  }
+  .bg-cal-muted\/90 {
+    background-color: var(--cal-bg-muted);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-cal-muted\/90 {
+      background-color: color-mix(in oklab, var(--cal-bg-muted) 90%, transparent);
+    }
+  }
+  .bg-cal-success {
+    background-color: var(--cal-bg-success);
+  }
+  .bg-cal-success\! {
+    background-color: var(--cal-bg-success) !important;
+  }
+  .bg-default,
+  .bg-default\/80 {
+    background-color: var(--cal-bg);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-default\/80 {
+      background-color: color-mix(in oklab, var(--cal-bg) 80%, transparent);
+    }
+  }
+  .bg-destructive {
+    background-color: var(--destructive);
+  }
+  .bg-emerald-400 {
+    background-color: var(--color-emerald-400);
+  }
+  .bg-emphasis {
+    background-color: var(--cal-bg-emphasis);
+  }
+  .bg-error,
+  .bg-error\/10 {
+    background-color: var(--cal-bg-error);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-error\/10 {
+      background-color: color-mix(in oklab, var(--cal-bg-error) 10%, transparent);
+    }
+  }
+  .bg-gray-50 {
+    background-color: var(--color-gray-50);
+  }
+  .bg-gray-100 {
+    background-color: var(--color-gray-100);
+  }
+  .bg-gray-200 {
+    background-color: var(--color-gray-200);
+  }
+  .bg-gray-300 {
+    background-color: var(--color-gray-300);
+  }
+  .bg-gray-400 {
+    background-color: var(--color-gray-400);
+  }
+  .bg-gray-500 {
+    background-color: var(--color-gray-500);
+  }
+  .bg-gray-500\/10 {
+    background-color: #6a72821a;
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-gray-500\/10 {
+      background-color: color-mix(in oklab, var(--color-gray-500) 10%, transparent);
+    }
+  }
+  .bg-gray-600 {
+    background-color: var(--color-gray-600);
+  }
+  .bg-green-50 {
+    background-color: var(--color-green-50);
+  }
+  .bg-green-100 {
+    background-color: var(--color-green-100);
+  }
+  .bg-green-500 {
+    background-color: var(--color-green-500);
+  }
+  .bg-inherit {
+    background-color: inherit;
+  }
+  .bg-inverted {
+    background-color: var(--cal-bg-inverted);
+  }
+  .bg-launch-dark {
+    background-color: var(--cal-bg-launch-dark);
+  }
+  .bg-muted {
+    background-color: var(--muted);
+  }
+  .bg-neutral-100 {
+    background-color: var(--color-neutral-100);
+  }
+  .bg-neutral-800\/70 {
+    background-color: #262626b3;
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-neutral-800\/70 {
+      background-color: color-mix(in oklab, var(--color-neutral-800) 70%, transparent);
+    }
+  }
+  .bg-orange-400 {
+    background-color: var(--color-orange-400);
+  }
+  .bg-orange-900 {
+    background-color: var(--color-orange-900);
+  }
+  .bg-popover {
+    background-color: var(--popover);
+  }
+  .bg-primary {
+    background-color: var(--primary);
+  }
+  .bg-primary-default {
+    background-color: var(--cal-bg-primary);
+  }
+  .bg-purple-50 {
+    background-color: var(--color-purple-50);
+  }
+  .bg-red-50 {
+    background-color: var(--color-red-50);
+  }
+  .bg-red-100 {
+    background-color: var(--color-red-100);
+  }
+  .bg-red-400 {
+    background-color: var(--color-red-400);
+  }
+  .bg-red-500 {
+    background-color: var(--color-red-500);
+  }
+  .bg-rose-600 {
+    background-color: var(--color-rose-600);
+  }
+  .bg-secondary {
+    background-color: var(--secondary);
+  }
+  .bg-semantic-attention-subtle {
+    background-color: var(--cal-bg-semantic-attention-subtle);
+  }
+  .bg-semantic-error-subtle {
+    background-color: var(--cal-bg-semantic-error-subtle);
+  }
+  .bg-semantic-info-subtle {
+    background-color: var(--cal-bg-semantic-info-subtle);
+  }
+  .bg-subtle {
+    background-color: var(--cal-bg-subtle);
+  }
+  .bg-subtle\! {
+    background-color: var(--cal-bg-subtle) !important;
+  }
+  .bg-success {
+    background-color: var(--success);
+  }
+  .bg-transparent {
+    background-color: #0000;
+  }
+  .bg-transparent\! {
+    background-color: #0000 !important;
+  }
+  .bg-white {
+    background-color: var(--color-white);
+  }
+  .bg-white\/50 {
+    background-color: #ffffff80;
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-white\/50 {
+      background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
+    }
+  }
+  .bg-yellow-100 {
+    background-color: var(--color-yellow-100);
+  }
+  .bg-yellow-300 {
+    background-color: var(--color-yellow-300);
+  }
+  .bg-yellow-500 {
+    background-color: var(--color-yellow-500);
+  }
+  .bg-linear-to-l {
+    --tw-gradient-position: to left;
+  }
+  @supports (background-image: linear-gradient(in lab, red, red)) {
+    .bg-linear-to-l {
+      --tw-gradient-position: to left in oklab;
+    }
+  }
+  .bg-linear-to-l {
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+  .bg-linear-to-r {
+    --tw-gradient-position: to right;
+  }
+  @supports (background-image: linear-gradient(in lab, red, red)) {
+    .bg-linear-to-r {
+      --tw-gradient-position: to right in oklab;
+    }
+  }
+  .bg-linear-to-r {
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+  .bg-gradient-to-b {
+    --tw-gradient-position: to bottom in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+  .bg-gradient-to-br {
+    --tw-gradient-position: to bottom right in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+  .bg-gradient-to-r {
+    --tw-gradient-position: to right in oklab;
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+  .\[background-image\:radial-gradient\(162\.05\%_170\%_at_109\.58\%_35\%\,_\#667593_0\%\,_\#E3E3E3_100\%\)\] {
+    background-image: radial-gradient(162.05% 170% at 109.58% 35%, #667593 0%, #e3e3e3 100%);
+  }
+  .from-default {
+    --tw-gradient-from: var(--cal-bg);
+    --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)
+    );
+  }
+  .from-muted {
+    --tw-gradient-from: var(--muted);
+    --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)
+    );
+  }
+  .from-transparent {
+    --tw-gradient-from: transparent;
+    --tw-gradient-stops: var(
+      --tw-gradient-via-stops,
+      var(--tw-gradient-position),
+      var(--tw-gradient-from) var(--tw-gradient-from-position),
+      var(--tw-gradient-to) var(--tw-gradient-to-position)
+    );
+  }
+  .to-default {
+    --tw-gradient-to: var(--cal-bg);
+    --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)
+    );
+  }
+  .to-muted {
+    --tw-gradient-to: var(--muted);
+    --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)
+    );
+  }
+  .to-transparent {
+    --tw-gradient-to: transparent;
+    --tw-gradient-stops: var(
+      --tw-gradient-via-stops,
+      var(--tw-gradient-position),
+      var(--tw-gradient-from) var(--tw-gradient-from-position),
+      var(--tw-gradient-to) var(--tw-gradient-to-position)
+    );
+  }
+  .bg-cover {
+    background-size: cover;
+  }
+  .bg-clip-padding {
+    background-clip: padding-box;
+  }
+  .bg-clip-text {
+    -webkit-background-clip: text;
+    background-clip: text;
+  }
+  .bg-center {
+    background-position: 50%;
+  }
+  .bg-no-repeat {
+    background-repeat: no-repeat;
+  }
+  .fill-blue-500 {
+    fill: var(--color-blue-500);
+  }
+  .fill-current {
+    fill: currentColor;
+  }
+  .fill-default {
+    fill: var(--fill-default);
+  }
+  .fill-emphasis {
+    fill: var(--fill-emphasis);
+  }
+  .fill-gray-400 {
+    fill: var(--color-gray-400);
+  }
+  .fill-orange-400 {
+    fill: var(--color-orange-400);
+  }
+  .fill-transparent {
+    fill: #0000;
+  }
+  .fill-yellow-500 {
+    fill: var(--color-yellow-500);
+  }
+  .stroke-2 {
+    stroke-width: 2px;
+  }
+  .stroke-\[1\.3px\] {
+    stroke-width: 1.3px;
+  }
+  .stroke-\[1\.5px\] {
+    stroke-width: 1.5px;
+  }
+  .stroke-\[2\.5px\] {
+    stroke-width: 2.5px;
+  }
+  .stroke-\[2px\] {
+    stroke-width: 2px;
+  }
+  .stroke-\[3px\] {
+    stroke-width: 3px;
+  }
+  .object-contain {
+    object-fit: contain;
+  }
+  .object-cover {
+    object-fit: cover;
+  }
+  .object-left {
+    object-position: left;
+  }
+  .object-top {
+    object-position: top;
+  }
+  .\!p-0 {
+    padding: calc(var(--spacing) * 0) !important;
+  }
+  .p-0 {
+    padding: calc(var(--spacing) * 0);
+  }
+  .p-0\! {
+    padding: calc(var(--spacing) * 0) !important;
+  }
+  .p-0\.5 {
+    padding: calc(var(--spacing) * 0.5);
+  }
+  .p-1 {
+    padding: calc(var(--spacing) * 1);
+  }
+  .p-1\! {
+    padding: calc(var(--spacing) * 1) !important;
+  }
+  .p-1\.5 {
+    padding: calc(var(--spacing) * 1.5);
+  }
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
+  .p-2\! {
+    padding: calc(var(--spacing) * 2) !important;
+  }
+  .p-2\.5 {
+    padding: calc(var(--spacing) * 2.5);
+  }
+  .p-3 {
+    padding: calc(var(--spacing) * 3);
+  }
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
+  .p-5 {
+    padding: calc(var(--spacing) * 5);
+  }
+  .p-5\! {
+    padding: calc(var(--spacing) * 5) !important;
+  }
+  .p-6 {
+    padding: calc(var(--spacing) * 6);
+  }
+  .p-7 {
+    padding: calc(var(--spacing) * 7);
+  }
+  .p-8 {
+    padding: calc(var(--spacing) * 8);
+  }
+  .p-10 {
+    padding: calc(var(--spacing) * 10);
+  }
+  .p-11 {
+    padding: calc(var(--spacing) * 11);
+  }
+  .p-14 {
+    padding: calc(var(--spacing) * 14);
+  }
+  .p-\[6px\] {
+    padding: 6px;
+  }
+  .p-px {
+    padding: 1px;
+  }
+  .px-0 {
+    padding-inline: calc(var(--spacing) * 0);
+  }
+  .px-0\! {
+    padding-inline: calc(var(--spacing) * 0) !important;
+  }
+  .px-0\.5 {
+    padding-inline: calc(var(--spacing) * 0.5);
+  }
+  .px-1 {
+    padding-inline: calc(var(--spacing) * 1);
+  }
+  .px-1\.5 {
+    padding-inline: calc(var(--spacing) * 1.5);
+  }
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+  .px-2\! {
+    padding-inline: calc(var(--spacing) * 2) !important;
+  }
+  .px-2\.5 {
+    padding-inline: calc(var(--spacing) * 2.5);
+  }
+  .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+  .px-3\.5 {
+    padding-inline: calc(var(--spacing) * 3.5);
+  }
+  .px-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+  .px-5 {
+    padding-inline: calc(var(--spacing) * 5);
+  }
+  .px-6 {
+    padding-inline: calc(var(--spacing) * 6);
+  }
+  .px-8 {
+    padding-inline: calc(var(--spacing) * 8);
+  }
+  .px-9 {
+    padding-inline: calc(var(--spacing) * 9);
+  }
+  .px-10 {
+    padding-inline: calc(var(--spacing) * 10);
+  }
+  .px-12 {
+    padding-inline: calc(var(--spacing) * 12);
+  }
+  .px-\[6px\] {
+    padding-inline: 6px;
+  }
+  .px-\[10px\] {
+    padding-inline: 10px;
+  }
+  .px-\[calc\(--spacing\(2\)-1px\)\] {
+    padding-inline: calc(calc(var(--spacing) * 2) - 1px);
+  }
+  .px-\[calc\(--spacing\(2\.5\)-1px\)\] {
+    padding-inline: calc(calc(var(--spacing) * 2.5) - 1px);
+  }
+  .px-\[calc\(--spacing\(3\)-1px\)\] {
+    padding-inline: calc(calc(var(--spacing) * 3) - 1px);
+  }
+  .px-\[calc\(--spacing\(3\.5\)-1px\)\] {
+    padding-inline: calc(calc(var(--spacing) * 3.5) - 1px);
+  }
+  .px-\[calc\(--spacing\(4\)-1px\)\] {
+    padding-inline: calc(calc(var(--spacing) * 4) - 1px);
+  }
+  .py-0 {
+    padding-block: calc(var(--spacing) * 0);
+  }
+  .py-0\! {
+    padding-block: calc(var(--spacing) * 0) !important;
+  }
+  .py-0\.5 {
+    padding-block: calc(var(--spacing) * 0.5);
+  }
+  .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
+  .py-1\.5 {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
+  .py-2 {
+    padding-block: calc(var(--spacing) * 2);
+  }
+  .py-2\.5 {
+    padding-block: calc(var(--spacing) * 2.5);
+  }
+  .py-3 {
+    padding-block: calc(var(--spacing) * 3);
+  }
+  .py-3\.5 {
+    padding-block: calc(var(--spacing) * 3.5);
+  }
+  .py-4 {
+    padding-block: calc(var(--spacing) * 4);
+  }
+  .py-5 {
+    padding-block: calc(var(--spacing) * 5);
+  }
+  .py-6 {
+    padding-block: calc(var(--spacing) * 6);
+  }
+  .py-8 {
+    padding-block: calc(var(--spacing) * 8);
+  }
+  .py-10 {
+    padding-block: calc(var(--spacing) * 10);
+  }
+  .py-12 {
+    padding-block: calc(var(--spacing) * 12);
+  }
+  .py-14 {
+    padding-block: calc(var(--spacing) * 14);
+  }
+  .py-24 {
+    padding-block: calc(var(--spacing) * 24);
+  }
+  .py-\[2px\] {
+    padding-block: 2px;
+  }
+  .py-\[5px\] {
+    padding-block: 5px;
+  }
+  .py-\[6px\] {
+    padding-block: 6px;
+  }
+  .py-\[10px\] {
+    padding-block: 10px;
+  }
+  .py-\[10x\] {
+    padding-block: 10x;
+  }
+  .py-\[19px\] {
+    padding-block: 19px;
+  }
+  .py-\[calc\(--spacing\(1\)-1px\)\] {
+    padding-block: calc(calc(var(--spacing) * 1) - 1px);
+  }
+  .py-\[calc\(--spacing\(1\.5\)-1px\)\] {
+    padding-block: calc(calc(var(--spacing) * 1.5) - 1px);
+  }
+  .py-\[calc\(--spacing\(2\)-1px\)\] {
+    padding-block: calc(calc(var(--spacing) * 2) - 1px);
+  }
+  .py-px {
+    padding-block: 1px;
+  }
+  .ps-1 {
+    padding-inline-start: calc(var(--spacing) * 1);
+  }
+  .ps-6 {
+    padding-inline-start: calc(var(--spacing) * 6);
+  }
+  .pe-2 {
+    padding-inline-end: calc(var(--spacing) * 2);
+  }
+  .pt-0 {
+    padding-top: calc(var(--spacing) * 0);
+  }
+  .pt-0\.5 {
+    padding-top: calc(var(--spacing) * 0.5);
+  }
+  .pt-1 {
+    padding-top: calc(var(--spacing) * 1);
+  }
+  .pt-1\.5 {
+    padding-top: calc(var(--spacing) * 1.5);
+  }
+  .pt-2 {
+    padding-top: calc(var(--spacing) * 2);
+  }
+  .pt-3 {
+    padding-top: calc(var(--spacing) * 3);
+  }
+  .pt-4 {
+    padding-top: calc(var(--spacing) * 4);
+  }
+  .pt-5 {
+    padding-top: calc(var(--spacing) * 5);
+  }
+  .pt-6 {
+    padding-top: calc(var(--spacing) * 6);
+  }
+  .pt-8 {
+    padding-top: calc(var(--spacing) * 8);
+  }
+  .pt-9 {
+    padding-top: calc(var(--spacing) * 9);
+  }
+  .pt-11 {
+    padding-top: calc(var(--spacing) * 11);
+  }
+  .pt-12 {
+    padding-top: calc(var(--spacing) * 12);
+  }
+  .pt-16 {
+    padding-top: calc(var(--spacing) * 16);
+  }
+  .pt-\[6px\] {
+    padding-top: 6px;
+  }
+  .pt-\[100\%\] {
+    padding-top: 100%;
+  }
+  .pr-0 {
+    padding-right: calc(var(--spacing) * 0);
+  }
+  .pr-1 {
+    padding-right: calc(var(--spacing) * 1);
+  }
+  .pr-2 {
+    padding-right: calc(var(--spacing) * 2);
+  }
+  .pr-2\.5 {
+    padding-right: calc(var(--spacing) * 2.5);
+  }
+  .pr-3 {
+    padding-right: calc(var(--spacing) * 3);
+  }
+  .pr-4 {
+    padding-right: calc(var(--spacing) * 4);
+  }
+  .pr-6 {
+    padding-right: calc(var(--spacing) * 6);
+  }
+  .pr-8 {
+    padding-right: calc(var(--spacing) * 8);
+  }
+  .pr-10 {
+    padding-right: calc(var(--spacing) * 10);
+  }
+  .pr-12 {
+    padding-right: calc(var(--spacing) * 12);
+  }
+  .pb-0 {
+    padding-bottom: calc(var(--spacing) * 0);
+  }
+  .pb-0\! {
+    padding-bottom: calc(var(--spacing) * 0) !important;
+  }
+  .pb-0\.5 {
+    padding-bottom: calc(var(--spacing) * 0.5);
+  }
+  .pb-1 {
+    padding-bottom: calc(var(--spacing) * 1);
+  }
+  .pb-2 {
+    padding-bottom: calc(var(--spacing) * 2);
+  }
+  .pb-2\.5 {
+    padding-bottom: calc(var(--spacing) * 2.5);
+  }
+  .pb-3 {
+    padding-bottom: calc(var(--spacing) * 3);
+  }
+  .pb-4 {
+    padding-bottom: calc(var(--spacing) * 4);
+  }
+  .pb-5 {
+    padding-bottom: calc(var(--spacing) * 5);
+  }
+  .pb-6 {
+    padding-bottom: calc(var(--spacing) * 6);
+  }
+  .pb-8 {
+    padding-bottom: calc(var(--spacing) * 8);
+  }
+  .pb-10 {
+    padding-bottom: calc(var(--spacing) * 10);
+  }
+  .pb-11 {
+    padding-bottom: calc(var(--spacing) * 11);
+  }
+  .pb-12 {
+    padding-bottom: calc(var(--spacing) * 12);
+  }
+  .pb-20 {
+    padding-bottom: calc(var(--spacing) * 20);
+  }
+  .pl-0 {
+    padding-left: calc(var(--spacing) * 0);
+  }
+  .pl-0\.5 {
+    padding-left: calc(var(--spacing) * 0.5);
+  }
+  .pl-1 {
+    padding-left: calc(var(--spacing) * 1);
+  }
+  .pl-2 {
+    padding-left: calc(var(--spacing) * 2);
+  }
+  .pl-2\.5 {
+    padding-left: calc(var(--spacing) * 2.5);
+  }
+  .pl-3 {
+    padding-left: calc(var(--spacing) * 3);
+  }
+  .pl-4 {
+    padding-left: calc(var(--spacing) * 4);
+  }
+  .pl-5 {
+    padding-left: calc(var(--spacing) * 5);
+  }
+  .pl-6 {
+    padding-left: calc(var(--spacing) * 6);
+  }
+  .pl-8 {
+    padding-left: calc(var(--spacing) * 8);
+  }
+  .pl-10 {
+    padding-left: calc(var(--spacing) * 10);
+  }
+  .pl-11 {
+    padding-left: calc(var(--spacing) * 11);
+  }
+  .pl-12 {
+    padding-left: calc(var(--spacing) * 12);
+  }
+  .pl-16 {
+    padding-left: calc(var(--spacing) * 16);
+  }
+  .text-center {
+    text-align: center;
+  }
+  .text-left {
+    text-align: left;
+  }
+  .text-right {
+    text-align: right;
+  }
+  .align-baseline {
+    vertical-align: baseline;
+  }
+  .align-bottom {
+    vertical-align: bottom;
+  }
+  .align-middle {
+    vertical-align: middle;
+  }
+  .align-text-top {
+    vertical-align: text-top;
+  }
+  .align-top {
+    vertical-align: top;
+  }
+  .\!font-cal {
+    font-family: var(--font-cal) !important;
+  }
+  .font-\(family-name\:--font-sans\) {
+    font-family: var(--font-sans);
+  }
+  .font-cal {
+    font-family: var(--font-cal);
+  }
+  .font-mono {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New,
+      monospace;
+  }
+  .font-sans {
+    font-family: var(--font-inter);
+  }
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
+  .text-3xl {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+  }
+  .text-4xl {
+    font-size: var(--text-4xl);
+    line-height: var(--tw-leading, var(--text-4xl--line-height));
+  }
+  .text-6xl {
+    font-size: var(--text-6xl);
+    line-height: var(--tw-leading, var(--text-6xl--line-height));
+  }
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
+  .text-base\/5 {
+    font-size: var(--text-base);
+    line-height: calc(var(--spacing) * 5);
+  }
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+  .text-xl\! {
+    font-size: var(--text-xl) !important;
+    line-height: var(--tw-leading, var(--text-xl--line-height)) !important;
+  }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .text-\[\.5rem\],
+  .text-\[0\.5rem\] {
+    font-size: 0.5rem;
+  }
+  .text-\[0px\] {
+    font-size: 0;
+  }
+  .text-\[8px\] {
+    font-size: 8px;
+  }
+  .text-\[10px\] {
+    font-size: 10px;
+  }
+  .text-\[12px\] {
+    font-size: 12px;
+  }
+  .text-\[13px\] {
+    font-size: 13px;
+  }
+  .text-\[14px\] {
+    font-size: 14px;
+  }
+  .text-\[28px\] {
+    font-size: 28px;
+  }
+  .leading-0 {
+    --tw-leading: calc(var(--spacing) * 0);
+    line-height: calc(var(--spacing) * 0);
+  }
+  .leading-3 {
+    --tw-leading: calc(var(--spacing) * 3);
+    line-height: calc(var(--spacing) * 3);
+  }
+  .leading-4 {
+    --tw-leading: calc(var(--spacing) * 4);
+    line-height: calc(var(--spacing) * 4);
+  }
+  .leading-5 {
+    --tw-leading: calc(var(--spacing) * 5);
+    line-height: calc(var(--spacing) * 5);
+  }
+  .leading-6 {
+    --tw-leading: calc(var(--spacing) * 6);
+    line-height: calc(var(--spacing) * 6);
+  }
+  .leading-7 {
+    --tw-leading: calc(var(--spacing) * 7);
+    line-height: calc(var(--spacing) * 7);
+  }
+  .leading-\[1\.25\] {
+    --tw-leading: 1.25;
+    line-height: 1.25;
+  }
+  .leading-\[18px\] {
+    --tw-leading: 18px;
+    line-height: 18px;
+  }
+  .leading-none {
+    --tw-leading: 1;
+    line-height: 1;
+  }
+  .leading-normal {
+    --tw-leading: var(--leading-normal);
+    line-height: var(--leading-normal);
+  }
+  .leading-snug {
+    --tw-leading: var(--leading-snug);
+    line-height: var(--leading-snug);
+  }
+  .leading-tight {
+    --tw-leading: var(--leading-tight);
+    line-height: var(--leading-tight);
+  }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+  .font-extrabold {
+    --tw-font-weight: var(--font-weight-extrabold);
+    font-weight: var(--font-weight-extrabold);
+  }
+  .font-extralight {
+    --tw-font-weight: var(--font-weight-extralight);
+    font-weight: var(--font-weight-extralight);
+  }
+  .font-light {
+    --tw-font-weight: var(--font-weight-light);
+    font-weight: var(--font-weight-light);
+  }
+  .font-medium {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+  .font-normal {
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
+  .font-normal\! {
+    --tw-font-weight: var(--font-weight-normal) !important;
+    font-weight: var(--font-weight-normal) !important;
+  }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .tracking-\[0\.01em\] {
+    --tw-tracking: 0.01em;
+    letter-spacing: 0.01em;
+  }
+  .tracking-normal {
+    --tw-tracking: var(--tracking-normal);
+    letter-spacing: var(--tracking-normal);
+  }
+  .tracking-tight {
+    --tw-tracking: var(--tracking-tight);
+    letter-spacing: var(--tracking-tight);
+  }
+  .tracking-wide {
+    --tw-tracking: var(--tracking-wide);
+    letter-spacing: var(--tracking-wide);
+  }
+  .tracking-wider {
+    --tw-tracking: var(--tracking-wider);
+    letter-spacing: var(--tracking-wider);
+  }
+  .tracking-widest {
+    --tw-tracking: var(--tracking-widest);
+    letter-spacing: var(--tracking-widest);
+  }
+  .break-words,
+  .wrap-break-word {
+    overflow-wrap: break-word;
+  }
+  .break-all {
+    word-break: break-all;
+  }
+  .text-ellipsis {
+    text-overflow: ellipsis;
+  }
+  .whitespace-normal {
+    white-space: normal;
+  }
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
+  .whitespace-pre {
+    white-space: pre;
+  }
+  .whitespace-pre-line {
+    white-space: pre-line;
+  }
+  .whitespace-pre-wrap {
+    white-space: pre-wrap;
+  }
+  .\!text-default {
+    color: var(--cal-text) !important;
+  }
+  .text-\(--cal-brand\) {
+    color: var(--cal-brand);
+  }
+  .text-\[\#5B93F9\] {
+    color: #5b93f9;
+  }
+  .text-\[\#6B7280\] {
+    color: #6b7280;
+  }
+  .text-attention {
+    color: var(--cal-text-attention);
+  }
+  .text-black {
+    color: #111;
+  }
+  .text-blue-500 {
+    color: var(--color-blue-500);
+  }
+  .text-blue-600 {
+    color: var(--color-blue-600);
+  }
+  .text-blue-700 {
+    color: var(--color-blue-700);
+  }
+  .text-brand {
+    color: var(--cal-brand-text);
+  }
+  .text-brand-emphasis {
+    color: var(--cal-brand-emphasis);
+  }
+  .text-brand-subtle {
+    color: var(--cal-brand-subtle, #9ca3af);
+  }
+  .text-current {
+    color: currentColor;
+  }
+  .text-default {
+    color: var(--cal-text);
+  }
+  .text-destructive {
+    color: var(--destructive);
+  }
+  .text-destructive-foreground {
+    color: var(--destructive-foreground);
+  }
+  .text-emphasis,
+  .text-emphasis\/30 {
+    color: var(--cal-text-emphasis);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-emphasis\/30 {
+      color: color-mix(in oklab, var(--cal-text-emphasis) 30%, transparent);
+    }
+  }
+  .text-emphasis\/80 {
+    color: var(--cal-text-emphasis);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-emphasis\/80 {
+      color: color-mix(in oklab, var(--cal-text-emphasis) 80%, transparent);
+    }
+  }
+  .text-error {
+    color: var(--cal-text-error);
+  }
+  .text-foreground,
+  .text-foreground\/50 {
+    color: var(--foreground);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-foreground\/50 {
+      color: color-mix(in oklab, var(--foreground) 50%, transparent);
+    }
+  }
+  .text-gray-200 {
+    color: var(--color-gray-200);
+  }
+  .text-gray-300 {
+    color: var(--color-gray-300);
+  }
+  .text-gray-400 {
+    color: var(--color-gray-400);
+  }
+  .text-gray-500 {
+    color: var(--color-gray-500);
+  }
+  .text-gray-600 {
+    color: var(--color-gray-600);
+  }
+  .text-gray-700 {
+    color: var(--color-gray-700);
+  }
+  .text-gray-800 {
+    color: var(--color-gray-800);
+  }
+  .text-gray-900 {
+    color: var(--color-gray-900);
+  }
+  .text-green-500 {
+    color: var(--color-green-500);
+  }
+  .text-green-600 {
+    color: var(--color-green-600);
+  }
+  .text-green-700 {
+    color: var(--color-green-700);
+  }
+  .text-green-700\! {
+    color: var(--color-green-700) !important;
+  }
+  .text-green-800 {
+    color: var(--color-green-800);
+  }
+  .text-indigo-400 {
+    color: var(--color-indigo-400);
+  }
+  .text-indigo-500 {
+    color: var(--color-indigo-500);
+  }
+  .text-info {
+    color: var(--cal-text-info);
+  }
+  .text-inherit {
+    color: inherit;
+  }
+  .text-inverted {
+    color: var(--cal-text-inverted);
+  }
+  .text-lime-500 {
+    color: var(--color-lime-500);
+  }
+  .text-muted {
+    color: var(--cal-text-muted);
+  }
+  .text-muted-foreground {
+    color: var(--muted-foreground);
+  }
+  .text-neutral-600 {
+    color: var(--color-neutral-600);
+  }
+  .text-orange-100 {
+    color: var(--color-orange-100);
+  }
+  .text-orange-400 {
+    color: var(--color-orange-400);
+  }
+  .text-orange-500 {
+    color: var(--color-orange-500);
+  }
+  .text-orange-600 {
+    color: var(--color-orange-600);
+  }
+  .text-orange-700 {
+    color: var(--color-orange-700);
+  }
+  .text-pink-500 {
+    color: var(--color-pink-500);
+  }
+  .text-primary {
+    color: var(--primary);
+  }
+  .text-primary-foreground {
+    color: var(--primary-foreground);
+  }
+  .text-purple-500 {
+    color: var(--color-purple-500);
+  }
+  .text-purple-700 {
+    color: var(--color-purple-700);
+  }
+  .text-purple-800 {
+    color: var(--color-purple-800);
+  }
+  .text-red-500 {
+    color: var(--color-red-500);
+  }
+  .text-red-600 {
+    color: var(--color-red-600);
+  }
+  .text-red-700 {
+    color: var(--color-red-700);
+  }
+  .text-red-700\! {
+    color: var(--color-red-700) !important;
+  }
+  .text-red-700\/30 {
+    color: #bf000f4d;
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .text-red-700\/30 {
+      color: color-mix(in oklab, var(--color-red-700) 30%, transparent);
+    }
+  }
+  .text-red-800 {
+    color: var(--color-red-800);
+  }
+  .text-red-900 {
+    color: var(--color-red-900);
+  }
+  .text-rose-600 {
+    color: var(--color-rose-600);
+  }
+  .text-secondary-foreground {
+    color: var(--secondary-foreground);
+  }
+  .text-semantic-attention {
+    color: var(--cal-text-semantic-attention);
+  }
+  .text-semantic-error {
+    color: var(--cal-text-semantic-error);
+  }
+  .text-semantic-info {
+    color: var(--cal-text-semantic-info);
+  }
+  .text-subtle {
+    color: var(--cal-text-subtle);
+  }
+  .text-success {
+    color: var(--cal-text-success);
+  }
+  .text-teal-500 {
+    color: var(--color-teal-500);
+  }
+  .text-transparent {
+    color: #0000;
+  }
+  .text-violet-500 {
+    color: var(--color-violet-500);
+  }
+  .text-warning {
+    color: var(--warning);
+  }
+  .text-white {
+    color: var(--color-white);
+  }
+  .text-yellow-500 {
+    color: var(--color-yellow-500);
+  }
+  .text-yellow-600 {
+    color: var(--color-yellow-600);
+  }
+  .capitalize {
+    text-transform: capitalize;
+  }
+  .lowercase {
+    text-transform: lowercase;
+  }
+  .uppercase {
+    text-transform: uppercase;
+  }
+  .italic {
+    font-style: italic;
+  }
+  .tabular-nums {
+    --tw-numeric-spacing: tabular-nums;
+    font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure)
+      var(--tw-numeric-spacing) var(--tw-numeric-fraction);
+  }
+  .normal-nums {
+    font-variant-numeric: normal;
+  }
+  .line-through {
+    text-decoration-line: line-through;
+  }
+  .no-underline {
+    text-decoration-line: none;
+  }
+  .underline {
+    text-decoration-line: underline;
+  }
+  .decoration-emphasis {
+    -webkit-text-decoration-color: var(--cal-bg-emphasis);
+    -webkit-text-decoration-color: var(--cal-bg-emphasis);
+    text-decoration-color: var(--cal-bg-emphasis);
+  }
+  .decoration-gray-400 {
+    -webkit-text-decoration-color: var(--color-gray-400);
+    -webkit-text-decoration-color: var(--color-gray-400);
+    text-decoration-color: var(--color-gray-400);
+  }
+  .decoration-dashed {
+    text-decoration-style: dashed;
+  }
+  .underline-offset-2 {
+    text-underline-offset: 2px;
+  }
+  .underline-offset-4 {
+    text-underline-offset: 4px;
+  }
+  .antialiased {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  .opacity-0 {
+    opacity: 0;
+  }
+  .opacity-20 {
+    opacity: 0.2;
+  }
+  .opacity-25 {
+    opacity: 0.25;
+  }
+  .opacity-30 {
+    opacity: 0.3;
+  }
+  .opacity-30\! {
+    opacity: 0.3 !important;
+  }
+  .opacity-40 {
+    opacity: 0.4;
+  }
+  .opacity-50 {
+    opacity: 0.5;
+  }
+  .opacity-60 {
+    opacity: 0.6;
+  }
+  .opacity-70 {
+    opacity: 0.7;
+  }
+  .opacity-75 {
+    opacity: 0.75;
+  }
+  .opacity-75\! {
+    opacity: 0.75 !important;
+  }
+  .opacity-80 {
+    opacity: 0.8;
+  }
+  .opacity-90 {
+    opacity: 0.9;
+  }
+  .opacity-100 {
+    opacity: 1;
+  }
+  .shadow {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a),
+      0 1px 2px -1px var(--tw-shadow-color, #0000001a);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[0px_2\.075px_4\.15px_0px_rgba\(34\,42\,53\,0\.05\)\,0px_0px_0px_0\.519px_rgba\(34\,42\,53\,0\.08\)\,0px_0\.519px_2\.594px_-2\.075px_rgba\(19\,19\,22\,0\.7\)\] {
+    --tw-shadow: 0px 2.075px 4.15px 0px var(--tw-shadow-color, #222a350d),
+      0px 0px 0px 0.519px var(--tw-shadow-color, #222a3514),
+      0px 0.519px 2.594px -2.075px var(--tw-shadow-color, #131316b3);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-\[0px_2px_3px_0px_rgba\(0\,0\,0\,0\.03\)\,0px_2px_2px_-1px_rgba\(0\,0\,0\,0\.03\)\] {
+    --tw-shadow: 0px 2px 3px 0px var(--tw-shadow-color, #00000008),
+      0px 2px 2px -1px var(--tw-shadow-color, #00000008);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-button-solid-brand-default {
+    --tw-shadow: var(--shadow-button-solid-brand-default);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-dropdown {
+    --tw-shadow: var(--shadow-dropdown);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-elevation-low {
+    --tw-shadow: var(--shadow-elevation-low);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-inner {
+    --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, #0000000d);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-lg {
+    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a),
+      0 4px 6px -4px var(--tw-shadow-color, #0000001a);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-md {
+    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a),
+      0 2px 4px -2px var(--tw-shadow-color, #0000001a);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-none {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-none\! {
+    --tw-shadow: 0 0 #0000 !important;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow) !important;
+  }
+  .shadow-outline-gray-rested {
+    --tw-shadow: var(--shadow-outline-gray-rested);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-outline-red-rested {
+    --tw-shadow: var(--shadow-outline-red-rested);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-sm {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a),
+      0 1px 2px -1px var(--tw-shadow-color, #0000001a);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-switch-thumb {
+    --tw-shadow: var(--shadow-switch-thumb);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-xl {
+    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a),
+      0 8px 10px -6px var(--tw-shadow-color, #0000001a);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-xs {
+    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .ring {
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width))
+      var(--tw-ring-color, #3b82f680);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .ring-0 {
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width))
+      var(--tw-ring-color, #3b82f680);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .ring-0\! {
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width))
+      var(--tw-ring-color, #3b82f680) !important;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow) !important;
+  }
+  .ring-1 {
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width))
+      var(--tw-ring-color, #3b82f680);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .ring-2 {
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width))
+      var(--tw-ring-color, #3b82f680);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-default {
+    --tw-shadow-color: var(--cal-bg);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .shadow-default {
+      --tw-shadow-color: color-mix(in oklab, var(--cal-bg) var(--tw-shadow-alpha), transparent);
+    }
+  }
+  .shadow-destructive\/24 {
+    --tw-shadow-color: var(--destructive);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .shadow-destructive\/24 {
+      --tw-shadow-color: color-mix(
+        in oklab,
+        color-mix(in oklab, var(--destructive) 24%, transparent) var(--tw-shadow-alpha),
+        transparent
+      );
+    }
+  }
+  .shadow-primary\/24 {
+    --tw-shadow-color: var(--primary);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .shadow-primary\/24 {
+      --tw-shadow-color: color-mix(
+        in oklab,
+        color-mix(in oklab, var(--primary) 24%, transparent) var(--tw-shadow-alpha),
+        transparent
+      );
+    }
+  }
+  .ring-\[\#0000000F\] {
+    --tw-ring-color: #0000000f;
+  }
+  .ring-black {
+    --tw-ring-color: #111;
+  }
+  .ring-brand-default {
+    --tw-ring-color: var(--cal-brand);
+  }
+  .ring-inverted {
+    --tw-ring-color: var(--cal-bg-inverted);
+  }
+  .ring-muted {
+    --tw-ring-color: var(--muted);
+  }
+  .ring-ring\/24 {
+    --tw-ring-color: var(--ring);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .ring-ring\/24 {
+      --tw-ring-color: color-mix(in oklab, var(--ring) 24%, transparent);
+    }
+  }
+  .ring-offset-0 {
+    --tw-ring-offset-width: 0px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
+      var(--tw-ring-offset-color);
+  }
+  .ring-offset-1 {
+    --tw-ring-offset-width: 1px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
+      var(--tw-ring-offset-color);
+  }
+  .ring-offset-2 {
+    --tw-ring-offset-width: 2px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
+      var(--tw-ring-offset-color);
+  }
+  .ring-offset-background {
+    --tw-ring-offset-color: var(--background);
+  }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+  .blur {
+    --tw-blur: blur(8px);
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate)
+      var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+  }
+  .blur-\[3px\] {
+    --tw-blur: blur(3px);
+    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);
+  }
+  .invert {
+    --tw-invert: invert(100%);
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate)
+      var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+  }
+  .filter {
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate)
+      var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+  }
+  .filter-\[invert\(0\.5\)_brightness\(0\.5\)\] {
+    filter: invert(0.5) brightness(0.5);
+  }
+  .backdrop-blur-lg {
+    --tw-backdrop-blur: blur(var(--blur-lg));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
+      var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
+      var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
+      var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
+      var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  }
+  .backdrop-blur-md {
+    --tw-backdrop-blur: blur(var(--blur-md));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
+      var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
+      var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
+      var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
+      var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  }
+  .backdrop-grayscale {
+    --tw-backdrop-grayscale: grayscale(100%);
+    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
+      var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
+      var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
+      var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
+      var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  }
+  .backdrop-filter {
+    -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
+      var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
+      var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+    backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast)
+      var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
+      var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+  }
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill,
+      stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform,
+      translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility,
+      overlay, pointer-events;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill,
+      stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-shadow {
+    transition-property: box-shadow;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-transform {
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-none {
+    transition-property: none;
+  }
+  .delay-1000 {
+    transition-delay: 1s;
+  }
+  .duration-100 {
+    --tw-duration: 0.1s;
+    transition-duration: 0.1s;
+  }
+  .duration-150 {
+    --tw-duration: 0.15s;
+    transition-duration: 0.15s;
+  }
+  .duration-200 {
+    --tw-duration: 0.2s;
+    transition-duration: 0.2s;
+  }
+  .duration-300 {
+    --tw-duration: 0.3s;
+    transition-duration: 0.3s;
+  }
+  .ease-in {
+    --tw-ease: var(--ease-in);
+    transition-timing-function: var(--ease-in);
+  }
+  .ease-in-out {
+    --tw-ease: var(--ease-in-out);
+    transition-timing-function: var(--ease-in-out);
+  }
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
+  .prose-invert {
+    --tw-prose-body: var(--tw-prose-invert-body);
+    --tw-prose-headings: var(--tw-prose-invert-headings);
+    --tw-prose-lead: var(--tw-prose-invert-lead);
+    --tw-prose-links: var(--tw-prose-invert-links);
+    --tw-prose-bold: var(--tw-prose-invert-bold);
+    --tw-prose-counters: var(--tw-prose-invert-counters);
+    --tw-prose-bullets: var(--tw-prose-invert-bullets);
+    --tw-prose-hr: var(--tw-prose-invert-hr);
+    --tw-prose-quotes: var(--tw-prose-invert-quotes);
+    --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
+    --tw-prose-captions: var(--tw-prose-invert-captions);
+    --tw-prose-code: var(--tw-prose-invert-code);
+    --tw-prose-pre-code: var(--tw-prose-invert-pre-code);
+    --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
+    --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
+    --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
+  }
+  .delay-1000 {
+    --tw-animation-delay: 1s;
+    animation-delay: 1s;
+  }
+  .outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  .select-none {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+  .\[--booker-main-width\:420px\] {
+    --booker-main-width: 420px;
+  }
+  .\[--booker-main-width\:480px\] {
+    --booker-main-width: 480px;
+  }
+  .\[--booker-meta-width\:240px\] {
+    --booker-meta-width: 240px;
+  }
+  .\[--booker-meta-width\:340px\] {
+    --booker-meta-width: 340px;
+  }
+  .\[--booker-timeslots-width\:240px\] {
+    --booker-timeslots-width: 240px;
+  }
+  .\[--cal-brand-accent\:\#FFFFFF\] {
+    --cal-brand-accent: #fff;
+  }
+  .\[--cal-brand-emphasis\:\#101010\] {
+    --cal-brand-emphasis: #101010;
+  }
+  .\[--cal-brand-subtle\:\#9CA3AF\] {
+    --cal-brand-subtle: #9ca3af;
+  }
+  .\[--cal-brand-text\:\#FFFFFF\] {
+    --cal-brand-text: #fff;
+  }
+  .\[--cal-brand-text\:white\] {
+    --cal-brand-text: white;
+  }
+  .\[--cal-brand\:\#111827\] {
+    --cal-brand: #111827;
+  }
+  .\[--calendar-dates-sticky-offset\:66px\] {
+    --calendar-dates-sticky-offset: 66px;
+  }
+  .\[--disabled-gradient-background\:\#E5E7EB\] {
+    --disabled-gradient-background: #e5e7eb;
+  }
+  .\[--disabled-gradient-background\:\#F8F9FB\] {
+    --disabled-gradient-background: #f8f9fb;
+  }
+  .\[--disabled-gradient-foreground\:\#D1D5DB\] {
+    --disabled-gradient-foreground: #d1d5db;
+  }
+  .\[--disabled-gradient-foreground\:\#E6E7EB\] {
+    --disabled-gradient-foreground: #e6e7eb;
+  }
+  .\[--troublehooster-meta-width\:0px\] {
+    --troublehooster-meta-width: 0px;
+  }
+  .\[--troublehooster-meta-width\:250px\] {
+    --troublehooster-meta-width: 250px;
+  }
+  .\[-webkit-app-region\:no-drag\] {
+    -webkit-app-region: no-drag;
+  }
+  .\[grid-area\:calendar\] {
+    grid-area: calendar;
+  }
+  .\[grid-area\:header\] {
+    grid-area: header;
+  }
+  .\[grid-area\:main\] {
+    grid-area: main;
+  }
+  .\[grid-area\:meta\] {
+    grid-area: meta;
+  }
+  .\[grid-area\:timeslots\] {
+    grid-area: timeslots;
+  }
+  .paused {
+    animation-play-state: paused;
+  }
+  .ring-inset {
+    --tw-ring-inset: inset;
+  }
+  .running {
+    animation-play-state: running;
+  }
+  :is(.\*\:flex-1 > *) {
+    flex: 1;
+  }
+  :is(.\*\:animate-pulse > *) {
+    animation: var(--animate-pulse);
+  }
+  :is(.\*\:justify-center > *) {
+    justify-content: center;
+  }
+  :is(.\*\:rounded-none > *) {
+    border-radius: 0;
+  }
+  :is(.\*\:border > *) {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  :is(.\*\:border-t-0 > *) {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 0;
+  }
+  :is(.\*\:px-4 > *) {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+  :is(.\*\:py-6 > *) {
+    padding-block: calc(var(--spacing) * 6);
+  }
+  .not-disabled\:inset-shadow-\[0_1px_--theme\(--color-white\/16\%\)\]:not(:disabled) {
+    --tw-inset-shadow: inset 0 1px var(--tw-inset-shadow-color, #ffffff29);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .not-disabled\:inset-shadow-\[0_1px_--theme\(--color-white\/16\%\)\]:not(:disabled) {
+      --tw-inset-shadow: inset 0 1px
+        var(--tw-inset-shadow-color, color-mix(in oklab, var(--color-white) 16%, transparent));
+    }
+  }
+  .not-disabled\:inset-shadow-\[0_1px_--theme\(--color-white\/16\%\)\]:not(:disabled) {
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  @media (hover: hover) {
+    .group-hover\:visible:is(:where(.group):hover *) {
+      visibility: visible;
+    }
+    .group-hover\:flex:is(:where(.group):hover *) {
+      display: flex;
+    }
+    .group-hover\:inline-flex:is(:where(.group):hover *) {
+      display: inline-flex;
+    }
+    .group-hover\:scale-100:is(:where(.group):hover *) {
+      --tw-scale-x: 100%;
+      --tw-scale-y: 100%;
+      --tw-scale-z: 100%;
+      scale: var(--tw-scale-x) var(--tw-scale-y);
+    }
+    .group-hover\:cursor-pointer:is(:where(.group):hover *) {
+      cursor: pointer;
+    }
+    .group-hover\:border-emphasis:is(:where(.group):hover *) {
+      border-color: var(--cal-border-emphasis);
+    }
+    .group-hover\:\!bg-cal-muted:is(:where(.group):hover *) {
+      background-color: var(--cal-bg-muted) !important;
+    }
+    .group-hover\:bg-black\/40:is(:where(.group):hover *) {
+      background-color: oklab(17.7638% -2.23517e-8 0/0.4);
+    }
+    .group-hover\:text-default:is(:where(.group):hover *) {
+      color: var(--cal-text);
+    }
+    .group-hover\:text-emphasis:is(:where(.group):hover *) {
+      color: var(--cal-text-emphasis);
+    }
+    .group-hover\:text-subtle:is(:where(.group):hover *) {
+      color: var(--cal-text-subtle);
+    }
+    .group-hover\:opacity-100:is(:where(.group):hover *) {
+      opacity: 1;
+    }
+    .group-hover\/booking_status_email\:visible:is(:where(.group\/booking_status_email):hover *) {
+      visibility: visible;
+    }
+    .group-hover\/remove\:bg-inverted:is(:where(.group\/remove):hover *) {
+      background-color: var(--cal-bg-inverted);
+    }
+    .group-hover\/remove\:text-inverted:is(:where(.group\/remove):hover *) {
+      color: var(--cal-text-inverted);
+    }
+  }
+  .group-active\:translate-y-\[0\.5px\]:is(:where(.group):active *) {
+    --tw-translate-y: 0.5px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .group-data-\[state\=selected\]\:bg-subtle:is(:where(.group)[data-state="selected"] *) {
+    background-color: var(--cal-bg-subtle);
+  }
+  .group-\[\.destructive\]\:border-muted\/40:is(:where(.group).destructive *) {
+    border-color: var(--cal-border-muted);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .group-\[\.destructive\]\:border-muted\/40:is(:where(.group).destructive *) {
+      border-color: color-mix(in oklab, var(--cal-border-muted) 40%, transparent);
+    }
+  }
+  .group-\[\.destructive\]\:text-red-300:is(:where(.group).destructive *) {
+    color: var(--color-red-300);
+  }
+  .peer-checked\:text-emphasis:is(:where(.peer):checked ~ *) {
+    color: var(--cal-text-emphasis);
+  }
+  .peer-checked\:ring-2:is(:where(.peer):checked ~ *) {
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width))
+      var(--tw-ring-color, #3b82f680);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .peer-disabled\:opacity-50:is(:where(.peer):disabled ~ *) {
+    opacity: 0.5;
+  }
+  .first-letter\:text-xs:first-letter {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .file\:me-3::file-selector-button {
+    margin-inline-end: calc(var(--spacing) * 3);
+  }
+  .file\:bg-transparent::file-selector-button {
+    background-color: #0000;
+  }
+  .file\:text-sm::file-selector-button {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .file\:font-medium::file-selector-button {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+  .file\:text-foreground::file-selector-button {
+    color: var(--foreground);
+  }
+  .placeholder\:min-h-\[300px\]::placeholder {
+    min-height: 300px;
+  }
+  .placeholder\:text-muted::placeholder {
+    color: var(--cal-text-muted);
+  }
+  .placeholder\:text-muted-foreground\/64::placeholder {
+    color: var(--muted-foreground);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .placeholder\:text-muted-foreground\/64::placeholder {
+      color: color-mix(in oklab, var(--muted-foreground) 64%, transparent);
+    }
+  }
+  .placeholder\:text-subtle::placeholder {
+    color: var(--cal-text-subtle);
+  }
+  .before\:pointer-events-none:before {
+    content: var(--tw-content);
+    pointer-events: none;
+  }
+  .before\:absolute:before {
+    content: var(--tw-content);
+    position: absolute;
+  }
+  .before\:-inset-2:before {
+    content: var(--tw-content);
+    inset: calc(var(--spacing) * -2);
+  }
+  .before\:inset-0:before {
+    content: var(--tw-content);
+    inset: calc(var(--spacing) * 0);
+  }
+  .before\:-top-2:before {
+    content: var(--tw-content);
+    top: calc(var(--spacing) * -2);
+  }
+  .before\:top-\[-3px\]:before {
+    content: var(--tw-content);
+    top: -3px;
+  }
+  .before\:top-\[-5px\]:before {
+    content: var(--tw-content);
+    top: -5px;
+  }
+  .before\:bottom-\[-3px\]:before {
+    content: var(--tw-content);
+    bottom: -3px;
+  }
+  .before\:bottom-\[-5px\]:before {
+    content: var(--tw-content);
+    bottom: -5px;
+  }
+  .before\:left-\[-24px\]:before {
+    content: var(--tw-content);
+    left: -24px;
+  }
+  .before\:left-\[-30px\]:before {
+    content: var(--tw-content);
+    left: -30px;
+  }
+  .before\:h-\[calc\(100\%\+0\.5rem\)\]:before {
+    content: var(--tw-content);
+    height: calc(100% + 0.5rem);
+  }
+  .before\:w-0\.5:before {
+    content: var(--tw-content);
+    width: calc(var(--spacing) * 0.5);
+  }
+  .before\:w-\[calc\(100\%\+35px\)\]:before {
+    content: var(--tw-content);
+    width: calc(100% + 35px);
+  }
+  .before\:rounded-\[calc\(var\(--radius-lg\)-1px\)\]:before {
+    content: var(--tw-content);
+    border-radius: calc(var(--radius-lg) - 1px);
+  }
+  .before\:rounded-\[calc\(var\(--radius-md\)-1px\)\]:before {
+    content: var(--tw-content);
+    border-radius: calc(var(--radius-md) - 1px);
+  }
+  .before\:rounded-full:before {
+    content: var(--tw-content);
+    border-radius: 3.40282e38px;
+  }
+  .before\:rounded-md:before {
+    content: var(--tw-content);
+    border-radius: var(--radius-md);
+  }
+  .before\:border:before {
+    content: var(--tw-content);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .before\:border-0:before {
+    content: var(--tw-content);
+    border-style: var(--tw-border-style);
+    border-width: 0;
+  }
+  .before\:bg-default:before {
+    content: var(--tw-content);
+    background-color: var(--cal-bg);
+  }
+  .before\:bg-subtle:before {
+    content: var(--tw-content);
+    background-color: var(--cal-bg-subtle);
+  }
+  .before\:py-3:before {
+    content: var(--tw-content);
+    padding-block: calc(var(--spacing) * 3);
+  }
+  .before\:opacity-0:before {
+    content: var(--tw-content);
+    opacity: 0;
+  }
+  .before\:transition-opacity:before {
+    content: var(--tw-content);
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .before\:content-\[\'\'\]:before {
+    --tw-content: "";
+    content: var(--tw-content);
+  }
+  .not-disabled\:not-active\:not-data-pressed\:before\:shadow-\[0_1px_--theme\(--color-black\/4\%\)\]:not(
+      :disabled
+    ):not(:active):not([data-pressed]):before {
+    content: var(--tw-content);
+    --tw-shadow: 0 1px var(--tw-shadow-color, oklab(17.7638% -2.23517e-8 0/0.04));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .after\:absolute:after {
+    content: var(--tw-content);
+    position: absolute;
+  }
+  .after\:top-6:after {
+    content: var(--tw-content);
+    top: calc(var(--spacing) * 6);
+  }
+  .after\:left-\[-24px\]:after {
+    content: var(--tw-content);
+    left: -24px;
+  }
+  .after\:block:after {
+    content: var(--tw-content);
+    display: block;
+  }
+  .after\:h-2:after {
+    content: var(--tw-content);
+    height: calc(var(--spacing) * 2);
+  }
+  .after\:h-\[6px\]:after {
+    content: var(--tw-content);
+    height: 6px;
+  }
+  .after\:h-\[calc\(100\%-1\.5rem\)\]:after {
+    content: var(--tw-content);
+    height: calc(100% - 1.5rem);
+  }
+  .after\:w-0\.5:after {
+    content: var(--tw-content);
+    width: calc(var(--spacing) * 0.5);
+  }
+  .after\:w-2:after {
+    content: var(--tw-content);
+    width: calc(var(--spacing) * 2);
+  }
+  .after\:w-\[6px\]:after {
+    content: var(--tw-content);
+    width: 6px;
+  }
+  .after\:rounded-full:after {
+    content: var(--tw-content);
+    border-radius: 3.40282e38px;
+  }
+  .after\:bg-cal-muted:after {
+    content: var(--tw-content);
+    background-color: var(--cal-bg-muted);
+  }
+  .after\:bg-default:after {
+    content: var(--tw-content);
+    background-color: var(--cal-bg);
+  }
+  .after\:bg-inverted:after {
+    content: var(--tw-content);
+    background-color: var(--cal-bg-inverted);
+  }
+  .after\:bg-subtle:after {
+    content: var(--tw-content);
+    background-color: var(--cal-bg-subtle);
+  }
+  .after\:content-\[\'\'\]:after {
+    --tw-content: "";
+    content: var(--tw-content);
+  }
+  .first\:mt-0:first-child {
+    margin-top: calc(var(--spacing) * 0);
+  }
+  .first\:rounded-t-md:first-child {
+    border-top-left-radius: var(--radius-md);
+    border-top-right-radius: var(--radius-md);
+  }
+  .first\:pt-0:first-child {
+    padding-top: calc(var(--spacing) * 0);
+  }
+  .first\:before\:rounded-t-full:first-child:before,
+  .first\:after\:rounded-t-full:first-child:after {
+    content: var(--tw-content);
+    border-top-left-radius: 3.40282e38px;
+    border-top-right-radius: 3.40282e38px;
+  }
+  .last\:mr-0:last-child {
+    margin-right: calc(var(--spacing) * 0);
+  }
+  .last\:mb-0:last-child {
+    margin-bottom: calc(var(--spacing) * 0);
+  }
+  .last\:mb-2:last-child {
+    margin-bottom: calc(var(--spacing) * 2);
+  }
+  .last\:rounded-b-md:last-child {
+    border-bottom-right-radius: var(--radius-md);
+    border-bottom-left-radius: var(--radius-md);
+  }
+  .last\:border-b-0:last-child {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 0;
+  }
+  .last\:pb-0:last-child {
+    padding-bottom: calc(var(--spacing) * 0);
+  }
+  .last\:font-medium:last-child {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+  .last\:before\:rounded-b-full:last-child:before,
+  .last\:after\:rounded-b-full:last-child:after {
+    content: var(--tw-content);
+    border-bottom-right-radius: 3.40282e38px;
+    border-bottom-left-radius: 3.40282e38px;
+  }
+  .only\:w-full:only-child {
+    width: 100%;
+  }
+  .first-of-type\:rounded-t-\[inherit\]:first-of-type {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+  .last-of-type\:rounded-b-\[inherit\]:last-of-type {
+    border-bottom-right-radius: inherit;
+    border-bottom-left-radius: inherit;
+  }
+  .checked\:border-transparent\!:checked {
+    border-color: #0000 !important;
+  }
+  .checked\:bg-gray-300:checked {
+    background-color: var(--color-gray-300);
+  }
+  .checked\:bg-gray-800:checked {
+    background-color: var(--color-gray-800);
+  }
+  .checked\:bg-gray-800\!:checked {
+    background-color: var(--color-gray-800) !important;
+  }
+  .empty\:before\:inline-block:empty:before {
+    content: var(--tw-content);
+    display: inline-block;
+  }
+  .empty\:before\:content-\[\'\'\]:empty:before {
+    --tw-content: "";
+    content: var(--tw-content);
+  }
+  .focus-within\:relative:focus-within {
+    position: relative;
+  }
+  .focus-within\:z-20:focus-within {
+    z-index: 20;
+  }
+  .focus-within\:border-emphasis:focus-within {
+    border-color: var(--cal-border-emphasis);
+  }
+  .focus-within\:bg-subtle:focus-within {
+    background-color: var(--cal-bg-subtle);
+  }
+  .focus-within\:ring-0:focus-within {
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width))
+      var(--tw-ring-color, #3b82f680);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .focus-within\:ring-2:focus-within {
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width))
+      var(--tw-ring-color, #3b82f680);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .focus-within\:ring-brand-default:focus-within {
+    --tw-ring-color: var(--cal-brand);
+  }
+  .focus-within\:ring-offset-0:focus-within {
+    --tw-ring-offset-width: 0px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
+      var(--tw-ring-offset-color);
+  }
+  .focus-within\:ring-offset-2:focus-within {
+    --tw-ring-offset-width: 2px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
+      var(--tw-ring-offset-color);
+  }
+  .focus-within\:outline-none:focus-within {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  @media (hover: hover) {
+    .hover\:-mt-px:hover {
+      margin-top: -1px;
+    }
+    .hover\:line-clamp-none:hover {
+      -webkit-line-clamp: unset;
+      -webkit-box-orient: horizontal;
+      display: block;
+      overflow: visible;
+    }
+    .hover\:cursor-default:hover {
+      cursor: default;
+    }
+    .hover\:cursor-not-allowed:hover {
+      cursor: not-allowed;
+    }
+    .hover\:cursor-pointer:hover {
+      cursor: pointer;
+    }
+    .hover\:rounded-md:hover {
+      border-radius: var(--radius-md);
+    }
+    .hover\:border:hover {
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+    }
+    .hover\:border-black:hover {
+      border-color: #111;
+    }
+    .hover\:border-brand-default:hover {
+      border-color: var(--cal-brand);
+    }
+    .hover\:border-default:hover {
+      border-color: var(--cal-border);
+    }
+    .hover\:border-emphasis:hover {
+      border-color: var(--cal-border-emphasis);
+    }
+    .hover\:border-error:hover {
+      border-color: var(--cal-border-error);
+    }
+    .hover\:border-semantic-error:hover {
+      border-color: var(--cal-border-semantic-error);
+    }
+    .hover\:border-transparent:hover {
+      border-color: #0000;
+    }
+    .hover\:\!bg-emphasis:hover {
+      background-color: var(--cal-bg-emphasis) !important;
+    }
+    .hover\:\!bg-inverted:hover {
+      background-color: var(--cal-bg-inverted) !important;
+    }
+    .hover\:bg-\[initial\]:hover {
+      background-color: initial;
+    }
+    .hover\:bg-accent:hover {
+      background-color: var(--accent);
+    }
+    .hover\:bg-attention:hover {
+      background-color: var(--cal-bg-attention);
+    }
+    .hover\:bg-background:hover {
+      background-color: var(--background);
+    }
+    .hover\:bg-black:hover {
+      background-color: #111;
+    }
+    .hover\:bg-brand-default:hover {
+      background-color: var(--cal-brand);
+    }
+    .hover\:bg-cal-muted:hover {
+      background-color: var(--cal-bg-muted);
+    }
+    .hover\:bg-cal-success:hover {
+      background-color: var(--cal-bg-success);
+    }
+    .hover\:bg-default:hover {
+      background-color: var(--cal-bg);
+    }
+    .hover\:bg-destructive\/90:hover {
+      background-color: var(--destructive);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-destructive\/90:hover {
+        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
+      }
+    }
+    .hover\:bg-emphasis:hover {
+      background-color: var(--cal-bg-emphasis);
+    }
+    .hover\:bg-error:hover {
+      background-color: var(--cal-bg-error);
+    }
+    .hover\:bg-gray-100:hover {
+      background-color: var(--color-gray-100);
+    }
+    .hover\:bg-gray-200:hover {
+      background-color: var(--color-gray-200);
+    }
+    .hover\:bg-gray-300:hover {
+      background-color: var(--color-gray-300);
+    }
+    .hover\:bg-gray-400:hover {
+      background-color: var(--color-gray-400);
+    }
+    .hover\:bg-gray-800:hover {
+      background-color: var(--color-gray-800);
+    }
+    .hover\:bg-inverted:hover {
+      background-color: var(--cal-bg-inverted);
+    }
+    .hover\:bg-neutral-50:hover {
+      background-color: var(--color-neutral-50);
+    }
+    .hover\:bg-orange-800:hover {
+      background-color: var(--color-orange-800);
+    }
+    .hover\:bg-primary-default\/90:hover {
+      background-color: var(--cal-bg-primary);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-primary-default\/90:hover {
+        background-color: color-mix(in oklab, var(--cal-bg-primary) 90%, transparent);
+      }
+    }
+    .hover\:bg-primary\/90:hover {
+      background-color: var(--primary);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-primary\/90:hover {
+        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
+      }
+    }
+    .hover\:bg-secondary:hover,
+    .hover\:bg-secondary\/80:hover {
+      background-color: var(--secondary);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-secondary\/80:hover {
+        background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
+      }
+    }
+    .hover\:bg-secondary\/90:hover {
+      background-color: var(--secondary);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-secondary\/90:hover {
+        background-color: color-mix(in oklab, var(--secondary) 90%, transparent);
+      }
+    }
+    .hover\:bg-slate-300:hover {
+      background-color: var(--color-slate-300);
+    }
+    .hover\:bg-subtle:hover {
+      background-color: var(--cal-bg-subtle);
+    }
+    .hover\:bg-transparent:hover {
+      background-color: #0000;
+    }
+    .hover\:bg-transparent\!:hover {
+      background-color: #0000 !important;
+    }
+    .hover\:stroke-3:hover {
+      stroke-width: 3px;
+    }
+    .hover\:font-normal:hover {
+      --tw-font-weight: var(--font-weight-normal);
+      font-weight: var(--font-weight-normal);
+    }
+    .hover\:\!text-inverted:hover {
+      color: var(--cal-text-inverted) !important;
+    }
+    .hover\:text-accent-foreground:hover {
+      color: var(--accent-foreground);
+    }
+    .hover\:text-attention:hover {
+      color: var(--cal-text-attention);
+    }
+    .hover\:text-black:hover {
+      color: #111;
+    }
+    .hover\:text-blue-500:hover {
+      color: var(--color-blue-500);
+    }
+    .hover\:text-default:hover {
+      color: var(--cal-text);
+    }
+    .hover\:text-emphasis:hover {
+      color: var(--cal-text-emphasis);
+    }
+    .hover\:text-error:hover {
+      color: var(--cal-text-error);
+    }
+    .hover\:text-foreground:hover {
+      color: var(--foreground);
+    }
+    .hover\:text-gray-500:hover {
+      color: var(--color-gray-500);
+    }
+    .hover\:text-orange-100:hover {
+      color: var(--color-orange-100);
+    }
+    .hover\:text-red-700\/30:hover {
+      color: #bf000f4d;
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:text-red-700\/30:hover {
+        color: color-mix(in oklab, var(--color-red-700) 30%, transparent);
+      }
+    }
+    .hover\:text-subtle:hover {
+      color: var(--cal-text-subtle);
+    }
+    .hover\:text-white:hover {
+      color: var(--color-white);
+    }
+    .hover\:no-underline:hover {
+      text-decoration-line: none;
+    }
+    .hover\:underline:hover {
+      text-decoration-line: underline;
+    }
+    .hover\:opacity-50:hover {
+      opacity: 0.5;
+    }
+    .hover\:opacity-70:hover {
+      opacity: 0.7;
+    }
+    .hover\:opacity-80:hover {
+      opacity: 0.8;
+    }
+    .hover\:opacity-100:hover {
+      opacity: 1;
+    }
+    .hover\:shadow:hover,
+    .hover\:shadow-sm:hover {
+      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a),
+        0 1px 2px -1px var(--tw-shadow-color, #0000001a);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+        var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    .hover\:ring-0:hover {
+      --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width))
+        var(--tw-ring-color, #3b82f680);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+        var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    .hover\:brightness-90:hover {
+      --tw-brightness: brightness(90%);
+      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);
+    }
+    .hover\:brightness-95:hover {
+      --tw-brightness: brightness(95%);
+      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);
+    }
+    .hover\:outline-none:hover {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+    :is(.hover\:\*\:z-1:hover > *) {
+      z-index: 1;
+    }
+    .not-disabled\:hover\:border-subtle:not(:disabled):hover {
+      border-color: var(--cal-border-subtle);
+    }
+    .not-disabled\:hover\:bg-brand-emphasis:not(:disabled):hover {
+      background-color: var(--cal-brand-emphasis);
+    }
+    .not-disabled\:hover\:bg-cal-muted:not(:disabled):hover {
+      background-color: var(--cal-bg-muted);
+    }
+    .not-disabled\:hover\:bg-subtle:not(:disabled):hover {
+      background-color: var(--cal-bg-subtle);
+    }
+    .not-disabled\:hover\:text-emphasis:not(:disabled):hover {
+      color: var(--cal-text-emphasis);
+    }
+    .not-disabled\:hover\:shadow-button-solid-brand-hover:not(:disabled):hover {
+      --tw-shadow: var(--shadow-button-solid-brand-hover);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+        var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    .not-disabled\:hover\:shadow-outline-gray-hover:not(:disabled):hover {
+      --tw-shadow: var(--shadow-outline-gray-hover);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+        var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    .not-disabled\:hover\:shadow-outline-red-hover:not(:disabled):hover {
+      --tw-shadow: var(--shadow-outline-red-hover);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+        var(--tw-ring-shadow), var(--tw-shadow);
+    }
+    .group-\[\.destructive\]\:hover\:border-destructive\/30:is(:where(.group).destructive *):hover {
+      border-color: var(--destructive);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .group-\[\.destructive\]\:hover\:border-destructive\/30:is(:where(.group).destructive *):hover {
+        border-color: color-mix(in oklab, var(--destructive) 30%, transparent);
+      }
+    }
+    .group-\[\.destructive\]\:hover\:bg-destructive:is(:where(.group).destructive *):hover {
+      background-color: var(--destructive);
+    }
+    .group-\[\.destructive\]\:hover\:text-destructive-foreground:is(:where(.group).destructive *):hover {
+      color: var(--destructive-foreground);
+    }
+    .group-\[\.destructive\]\:hover\:text-red-50:is(:where(.group).destructive *):hover {
+      color: var(--color-red-50);
+    }
+    .hover\:before\:opacity-100:hover:before {
+      content: var(--tw-content);
+      opacity: 1;
+    }
+  }
+  .after\:hover\:block:after {
+    content: var(--tw-content);
+  }
+  @media (hover: hover) {
+    .after\:hover\:block:after:hover {
+      display: block;
+    }
+    .hover\:after\:bg-subtle:hover:after {
+      content: var(--tw-content);
+      background-color: var(--cal-bg-subtle);
+    }
+    .checked\:hover\:border-error:checked:hover {
+      border-color: var(--cal-border-error);
+    }
+    .hover\:checked\:bg-gray-300:hover:checked {
+      background-color: var(--color-gray-300);
+    }
+  }
+  .focus\:z-10:focus {
+    z-index: 10;
+  }
+  .focus\:border:focus {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .focus\:border-0:focus {
+    border-style: var(--tw-border-style);
+    border-width: 0;
+  }
+  .focus\:border-2:focus {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
+  .focus\:border-r:focus {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+  }
+  .focus\:border-black:focus {
+    border-color: #111;
+  }
+  .focus\:border-brand-default:focus {
+    border-color: var(--cal-brand);
+  }
+  .focus\:border-emphasis:focus {
+    border-color: var(--cal-border-emphasis);
+  }
+  .focus\:border-gray-800:focus {
+    border-color: var(--color-gray-800);
+  }
+  .focus\:border-neutral-500:focus {
+    border-color: var(--color-neutral-500);
+  }
+  .focus\:border-neutral-800:focus {
+    border-color: var(--color-neutral-800);
+  }
+  .focus\:border-neutral-900:focus {
+    border-color: var(--color-neutral-900);
+  }
+  .focus\:border-orange-400:focus {
+    border-color: var(--color-orange-400);
+  }
+  .focus\:border-red-500:focus {
+    border-color: var(--color-red-500);
+  }
+  .focus\:border-subtle:focus {
+    border-color: var(--cal-border-subtle);
+  }
+  .focus\:border-subtle\!:focus {
+    border-color: var(--cal-border-subtle) !important;
+  }
+  .focus\:bg-cal-muted:focus {
+    background-color: var(--cal-bg-muted);
+  }
+  .focus\:bg-default:focus {
+    background-color: var(--cal-bg);
+  }
+  .focus\:bg-emphasis:focus {
+    background-color: var(--cal-bg-emphasis);
+  }
+  .focus\:bg-subtle:focus {
+    background-color: var(--cal-bg-subtle);
+  }
+  .focus\:bg-transparent\!:focus {
+    background-color: #0000 !important;
+  }
+  .focus\:text-emphasis:focus {
+    color: var(--cal-text-emphasis);
+  }
+  .focus\:opacity-100:focus {
+    opacity: 1;
+  }
+  .focus\:shadow-none\!:focus {
+    --tw-shadow: 0 0 #0000 !important;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow) !important;
+  }
+  .focus\:shadow-outline-gray-focused:focus {
+    --tw-shadow: var(--shadow-outline-gray-focused);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .focus\:ring:focus {
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width))
+      var(--tw-ring-color, #3b82f680);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .focus\:ring-0:focus {
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width))
+      var(--tw-ring-color, #3b82f680);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .focus\:ring-0\!:focus {
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width))
+      var(--tw-ring-color, #3b82f680) !important;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow) !important;
+  }
+  .focus\:ring-1:focus {
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width))
+      var(--tw-ring-color, #3b82f680);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .focus\:ring-2:focus {
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width))
+      var(--tw-ring-color, #3b82f680);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .focus\:ring-black:focus {
+    --tw-ring-color: #111;
+  }
+  .focus\:ring-blue-500:focus {
+    --tw-ring-color: var(--color-blue-500);
+  }
+  .focus\:ring-brand-default:focus {
+    --tw-ring-color: var(--cal-brand);
+  }
+  .focus\:ring-brand-default\!:focus {
+    --tw-ring-color: var(--cal-brand) !important;
+  }
+  .focus\:ring-emphasis:focus {
+    --tw-ring-color: var(--cal-bg-emphasis);
+  }
+  .focus\:ring-muted:focus {
+    --tw-ring-color: var(--muted);
+  }
+  .focus\:ring-neutral-500:focus {
+    --tw-ring-color: var(--color-neutral-500);
+  }
+  .focus\:ring-neutral-800:focus {
+    --tw-ring-color: var(--color-neutral-800);
+  }
+  .focus\:ring-neutral-900:focus {
+    --tw-ring-color: var(--color-neutral-900);
+  }
+  .focus\:ring-ring:focus {
+    --tw-ring-color: var(--ring);
+  }
+  .focus\:ring-transparent:focus {
+    --tw-ring-color: transparent;
+  }
+  .focus\:ring-white:focus {
+    --tw-ring-color: var(--color-white);
+  }
+  .focus\:ring-offset-0:focus {
+    --tw-ring-offset-width: 0px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
+      var(--tw-ring-offset-color);
+  }
+  .focus\:ring-offset-0\!:focus {
+    --tw-ring-offset-width: 0px !important;
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
+      var(--tw-ring-offset-color) !important;
+  }
+  .focus\:ring-offset-1:focus {
+    --tw-ring-offset-width: 1px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
+      var(--tw-ring-offset-color);
+  }
+  .focus\:ring-offset-2:focus {
+    --tw-ring-offset-width: 2px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
+      var(--tw-ring-offset-color);
+  }
+  .focus\:outline-none:focus {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  .focus\:outline-none\!:focus {
+    --tw-outline-style: none !important;
+    outline-style: none !important;
+  }
+  .group-\[\.destructive\]\:focus\:ring-destructive:is(:where(.group).destructive *):focus {
+    --tw-ring-color: var(--destructive);
+  }
+  .group-\[\.destructive\]\:focus\:ring-red-400:is(:where(.group).destructive *):focus {
+    --tw-ring-color: var(--color-red-400);
+  }
+  .group-\[\.destructive\]\:focus\:ring-offset-red-600:is(:where(.group).destructive *):focus {
+    --tw-ring-offset-color: var(--color-red-600);
+  }
+  .focus-visible\:border-subtle:focus-visible {
+    border-color: var(--cal-border-subtle);
+  }
+  .focus-visible\:bg-error:focus-visible {
+    background-color: var(--cal-bg-error);
+  }
+  .focus-visible\:bg-subtle:focus-visible {
+    background-color: var(--cal-bg-subtle);
+  }
+  .focus-visible\:bg-transparent:focus-visible {
+    background-color: #0000;
+  }
+  .focus-visible\:text-red-700:focus-visible {
+    color: var(--color-red-700);
+  }
+  .focus-visible\:shadow-button-outline-red-focused:focus-visible {
+    --tw-shadow: var(--shadow-button-outline-red-focused);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .focus-visible\:shadow-button-solid-brand-focused:focus-visible {
+    --tw-shadow: var(--shadow-button-solid-brand-focused);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .focus-visible\:shadow-outline-gray-focused:focus-visible {
+    --tw-shadow: var(--shadow-outline-gray-focused);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .focus-visible\:ring-0:focus-visible {
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width))
+      var(--tw-ring-color, #3b82f680);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .focus-visible\:ring-2:focus-visible {
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width))
+      var(--tw-ring-color, #3b82f680);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .focus-visible\:ring-ring:focus-visible {
+    --tw-ring-color: var(--ring);
+  }
+  .focus-visible\:ring-offset-1:focus-visible {
+    --tw-ring-offset-width: 1px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
+      var(--tw-ring-offset-color);
+  }
+  .focus-visible\:ring-offset-2:focus-visible {
+    --tw-ring-offset-width: 2px;
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
+      var(--tw-ring-offset-color);
+  }
+  .focus-visible\:ring-offset-background:focus-visible {
+    --tw-ring-offset-color: var(--background);
+  }
+  .focus-visible\:outline-none:focus-visible {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  .active\:scale-95:active {
+    --tw-scale-x: 95%;
+    --tw-scale-y: 95%;
+    --tw-scale-z: 95%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+  .active\:bg-default:active {
+    background-color: var(--cal-bg);
+  }
+  .not-disabled\:active\:shadow-button-solid-brand-active:not(:disabled):active {
+    --tw-shadow: var(--shadow-button-solid-brand-active);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .not-disabled\:active\:shadow-outline-gray-active:not(:disabled):active {
+    --tw-shadow: var(--shadow-outline-gray-active);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .not-disabled\:active\:shadow-outline-red-active:not(:disabled):active {
+    --tw-shadow: var(--shadow-outline-red-active);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  @media (hover: hover) {
+    .enabled\:hover\:bg-subtle:enabled:hover {
+      background-color: var(--cal-bg-subtle);
+    }
+    .enabled\:hover\:shadow-outline-gray-hover:enabled:hover {
+      --tw-shadow: var(--shadow-outline-gray-hover);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+        var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .enabled\:active\:shadow-outline-gray-active:enabled:active {
+    --tw-shadow: var(--shadow-outline-gray-active);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .disabled\:pointer-events-none:disabled {
+    pointer-events: none;
+  }
+  .disabled\:cursor-default:disabled {
+    cursor: default;
+  }
+  .disabled\:cursor-not-allowed:disabled {
+    cursor: not-allowed;
+  }
+  .disabled\:border-red-200:disabled {
+    border-color: var(--color-red-200);
+  }
+  .disabled\:border-transparent:disabled {
+    border-color: #0000;
+  }
+  .disabled\:bg-emphasis:disabled {
+    background-color: var(--cal-bg-emphasis);
+  }
+  .disabled\:bg-red-100:disabled {
+    background-color: var(--color-red-100);
+  }
+  .disabled\:bg-subtle:disabled {
+    background-color: var(--cal-bg-subtle);
+  }
+  .disabled\:bg-transparent:disabled {
+    background-color: #0000;
+  }
+  .disabled\:font-light:disabled {
+    --tw-font-weight: var(--font-weight-light);
+    font-weight: var(--font-weight-light);
+  }
+  .disabled\:text-red-700:disabled {
+    color: var(--color-red-700);
+  }
+  .disabled\:opacity-30:disabled {
+    opacity: 0.3;
+  }
+  .disabled\:opacity-40:disabled {
+    opacity: 0.4;
+  }
+  .disabled\:opacity-50:disabled {
+    opacity: 0.5;
+  }
+  .disabled\:opacity-64:disabled {
+    opacity: 0.64;
+  }
+  @media (hover: hover) {
+    .disabled\:hover\:cursor-not-allowed:disabled:hover {
+      cursor: not-allowed;
+    }
+    .disabled\:hover\:border-default:disabled:hover {
+      border-color: var(--cal-border);
+    }
+    .disabled\:hover\:border-inherit:disabled:hover {
+      border-color: inherit;
+    }
+    .disabled\:hover\:border-red-200:disabled:hover {
+      border-color: var(--color-red-200);
+    }
+    .disabled\:hover\:border-subtle:disabled:hover {
+      border-color: var(--cal-border-subtle);
+    }
+    .disabled\:hover\:bg-default:disabled:hover {
+      background-color: var(--cal-bg);
+    }
+    .disabled\:hover\:text-muted:disabled:hover {
+      color: var(--cal-text-muted);
+    }
+    .disabled\:hover\:shadow-none:disabled:hover {
+      --tw-shadow: 0 0 #0000;
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+        var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .not-has-disabled\:has-not-focus-visible\:not-has-aria-invalid\:before\:shadow-\[0_1px_--theme\(--color-black\/4\%\)\]:not(
+      :has(:disabled)
+    ):has(:not(:focus-visible)):not(:has([aria-invalid="true"])):before {
+    content: var(--tw-content);
+    --tw-shadow: 0 1px var(--tw-shadow-color, oklab(17.7638% -2.23517e-8 0/0.04));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .has-focus-visible\:border-ring:has(:focus-visible) {
+    border-color: var(--ring);
+  }
+  .has-focus-visible\:ring-\[3px\]:has(:focus-visible) {
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width))
+      var(--tw-ring-color, #3b82f680);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .has-disabled\:opacity-64:has(:disabled) {
+    opacity: 0.64;
+  }
+  .has-aria-invalid\:border-destructive\/36:has([aria-invalid="true"]) {
+    border-color: var(--destructive);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .has-aria-invalid\:border-destructive\/36:has([aria-invalid="true"]) {
+      border-color: color-mix(in oklab, var(--destructive) 36%, transparent);
+    }
+  }
+  .has-focus-visible\:has-aria-invalid\:border-destructive\/64:has(:focus-visible):has(
+      [aria-invalid="true"]
+    ) {
+    border-color: var(--destructive);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .has-focus-visible\:has-aria-invalid\:border-destructive\/64:has(:focus-visible):has(
+        [aria-invalid="true"]
+      ) {
+      border-color: color-mix(in oklab, var(--destructive) 64%, transparent);
+    }
+  }
+  .has-focus-visible\:has-aria-invalid\:ring-destructive\/16:has(:focus-visible):has([aria-invalid="true"]) {
+    --tw-ring-color: var(--destructive);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .has-focus-visible\:has-aria-invalid\:ring-destructive\/16:has(:focus-visible):has(
+        [aria-invalid="true"]
+      ) {
+      --tw-ring-color: color-mix(in oklab, var(--destructive) 16%, transparent);
+    }
+  }
+  .aria-checked\:border-subtle[aria-checked="true"] {
+    border-color: var(--cal-border-subtle);
+  }
+  .aria-checked\:bg-default[aria-checked="true"] {
+    background-color: var(--cal-bg);
+  }
+  .aria-checked\:bg-emphasis[aria-checked="true"] {
+    background-color: var(--cal-bg-emphasis);
+  }
+  .aria-checked\:shadow-\[0px_2px_3px_0px_rgba\(0\,0\,0\,0\.03\)\,0px_2px_2px_-1px_rgba\(0\,0\,0\,0\.03\)\][aria-checked="true"] {
+    --tw-shadow: 0px 2px 3px 0px var(--tw-shadow-color, #00000008),
+      0px 2px 2px -1px var(--tw-shadow-color, #00000008);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .aria-selected\:bg-cal-muted[aria-selected="true"] {
+    background-color: var(--cal-bg-muted);
+  }
+  .aria-selected\:bg-emphasis[aria-selected="true"] {
+    background-color: var(--cal-bg-emphasis);
+  }
+  .aria-selected\:bg-subtle[aria-selected="true"] {
+    background-color: var(--cal-bg-subtle);
+  }
+  .aria-selected\:text-emphasis[aria-selected="true"] {
+    color: var(--cal-text-emphasis);
+  }
+  .aria-selected\:opacity-100[aria-selected="true"] {
+    opacity: 1;
+  }
+  .aria-\[aria-current\=\'page\'\]\:bg-transparent\![aria-aria-current="page"] {
+    background-color: #0000 !important;
+  }
+  .aria-\[aria-current\=\'page\'\]\:text-inherit[aria-aria-current="page"] {
+    color: inherit;
+  }
+  .data-disabled\:pointer-events-none[data-disabled] {
+    pointer-events: none;
+  }
+  .data-disabled\:opacity-50[data-disabled] {
+    opacity: 0.5;
+  }
+  .data-pressed\:bg-accent[data-pressed] {
+    background-color: var(--accent);
+  }
+  .data-pressed\:bg-secondary\/90[data-pressed] {
+    background-color: var(--secondary);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .data-pressed\:bg-secondary\/90[data-pressed] {
+      background-color: color-mix(in oklab, var(--secondary) 90%, transparent);
+    }
+  }
+  :is(.\*\*\:data-radix-popper-content-wrapper\:bottom-4\! *)[data-radix-popper-content-wrapper] {
+    bottom: calc(var(--spacing) * 4) !important;
+  }
+  .data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
+    --tw-enter-translate-y: calc(2 * var(--spacing) * -1);
+  }
+  .data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
+    --tw-enter-translate-x: calc(2 * var(--spacing));
+  }
+  .data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
+    --tw-enter-translate-x: calc(2 * var(--spacing) * -1);
+  }
+  .data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
+    --tw-enter-translate-y: calc(2 * var(--spacing));
+  }
+  .data-\[state\=checked\]\:translate-x-3[data-state="checked"] {
+    --tw-translate-x: calc(var(--spacing) * 3);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .data-\[state\=checked\]\:translate-x-5[data-state="checked"] {
+    --tw-translate-x: calc(var(--spacing) * 5);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .data-\[state\=checked\]\:border-brand-default[data-state="checked"] {
+    border-color: var(--cal-brand);
+  }
+  .data-\[state\=checked\]\:bg-brand-accent[data-state="checked"] {
+    background-color: var(--cal-brand-accent, white);
+  }
+  .data-\[state\=checked\]\:bg-brand-default[data-state="checked"] {
+    background-color: var(--cal-brand);
+  }
+  .data-\[state\=checked\]\:bg-primary-default[data-state="checked"] {
+    background-color: var(--cal-bg-primary);
+  }
+  .data-\[state\=checked\]\:text-brand[data-state="checked"] {
+    color: var(--cal-brand-text);
+  }
+  .data-\[state\=closed\]\:animate-out[data-state="closed"] {
+    animation: exit var(--tw-animation-duration, var(--tw-duration, 0.15s)) var(--tw-ease, ease)
+      var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1)
+      var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none);
+  }
+  .data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
+    --tw-exit-opacity: 0;
+  }
+  .data-\[state\=closed\]\:fade-out-80[data-state="closed"] {
+    --tw-exit-opacity: 0.8;
+  }
+  .data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
+    --tw-exit-scale: 0.95;
+  }
+  .data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"] {
+    --tw-exit-translate-x: calc(1 / 2 * -100%);
+  }
+  .data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
+    --tw-exit-translate-x: 100%;
+  }
+  .data-\[state\=closed\]\:slide-out-to-right-full[data-state="closed"] {
+    --tw-exit-translate-x: calc(1 * 100%);
+  }
+  .data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"] {
+    --tw-exit-translate-y: calc(48% * -1);
+  }
+  .data-\[state\=open\]\:animate-in[data-state="open"] {
+    animation: enter var(--tw-animation-duration, var(--tw-duration, 0.15s)) var(--tw-ease, ease)
+      var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1)
+      var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none);
+  }
+  .data-\[state\=open\]\:bg-accent[data-state="open"] {
+    background-color: var(--accent);
+  }
+  .data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
+    color: var(--muted-foreground);
+  }
+  .data-\[state\=open\]\:fade-in-0[data-state="open"] {
+    --tw-enter-opacity: 0;
+  }
+  .data-\[state\=open\]\:zoom-in-95[data-state="open"] {
+    --tw-enter-scale: 0.95;
+  }
+  .data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"] {
+    --tw-enter-translate-x: calc(1 / 2 * -100%);
+  }
+  .data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
+    --tw-enter-translate-x: 100%;
+  }
+  .data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
+    --tw-enter-translate-y: calc(48% * -1);
+  }
+  .data-\[state\=open\]\:slide-in-from-top-full[data-state="open"] {
+    --tw-enter-translate-y: calc(1 * -100%);
+  }
+  .data-\[state\=selected\]\:bg-subtle[data-state="selected"] {
+    background-color: var(--cal-bg-subtle);
+  }
+  .data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
+    --tw-translate-x: calc(var(--spacing) * 0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .data-\[state\=unchecked\]\:bg-emphasis[data-state="unchecked"] {
+    background-color: var(--cal-bg-emphasis);
+  }
+  .data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
+    background-color: var(--input);
+  }
+  .data-\[swipe\=cancel\]\:translate-x-0[data-swipe="cancel"] {
+    --tw-translate-x: calc(var(--spacing) * 0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .data-\[swipe\=end\]\:translate-x-\(--radix-toast-swipe-end-x\)[data-swipe="end"] {
+    --tw-translate-x: var(--radix-toast-swipe-end-x);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .data-\[swipe\=end\]\:animate-out[data-swipe="end"] {
+    animation: exit var(--tw-animation-duration, var(--tw-duration, 0.15s)) var(--tw-ease, ease)
+      var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1)
+      var(--tw-animation-direction, normal) var(--tw-animation-fill-mode, none);
+  }
+  .data-\[swipe\=move\]\:translate-x-\(--radix-toast-swipe-move-x\)[data-swipe="move"] {
+    --tw-translate-x: var(--radix-toast-swipe-move-x);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .data-\[swipe\=move\]\:transition-none[data-swipe="move"] {
+    transition-property: none;
+  }
+  @media not all and (min-width: 64rem) {
+    .max-lg\:z-10 {
+      z-index: 10;
+    }
+  }
+  @media (min-width: 40rem) {
+    .sm\:absolute {
+      position: absolute;
+    }
+    .sm\:relative {
+      position: relative;
+    }
+    .sm\:sticky {
+      position: sticky;
+    }
+    .sm\:top-auto {
+      top: auto;
+    }
+    .sm\:right-0 {
+      right: calc(var(--spacing) * 0);
+    }
+    .sm\:right-2 {
+      right: calc(var(--spacing) * 2);
+    }
+    .sm\:bottom-0 {
+      bottom: calc(var(--spacing) * 0);
+    }
+    .sm\:order-3 {
+      order: 3;
+    }
+    .sm\:col-span-2 {
+      grid-column: span 2 / span 2;
+    }
+    .sm\:-mx-4 {
+      margin-inline: calc(var(--spacing) * -4);
+    }
+    .sm\:-mx-6 {
+      margin-inline: calc(var(--spacing) * -6);
+    }
+    .sm\:mx-0 {
+      margin-inline: calc(var(--spacing) * 0);
+    }
+    .sm\:mx-auto {
+      margin-inline: auto;
+    }
+    .sm\:my-0 {
+      margin-block: calc(var(--spacing) * 0);
+    }
+    .sm\:my-8 {
+      margin-block: calc(var(--spacing) * 8);
+    }
+    .sm\:-mt-4 {
+      margin-top: calc(var(--spacing) * -4);
+    }
+    .sm\:-mt-6 {
+      margin-top: calc(var(--spacing) * -6);
+    }
+    .sm\:mt-0 {
+      margin-top: calc(var(--spacing) * 0);
+    }
+    .sm\:mt-4 {
+      margin-top: calc(var(--spacing) * 4);
+    }
+    .sm\:mt-5 {
+      margin-top: calc(var(--spacing) * 5);
+    }
+    .sm\:mt-6 {
+      margin-top: calc(var(--spacing) * 6);
+    }
+    .sm\:mt-8 {
+      margin-top: calc(var(--spacing) * 8);
+    }
+    .sm\:mr-4 {
+      margin-right: calc(var(--spacing) * 4);
+    }
+    .sm\:mr-36 {
+      margin-right: calc(var(--spacing) * 36);
+    }
+    .sm\:mb-0 {
+      margin-bottom: calc(var(--spacing) * 0);
+    }
+    .sm\:mb-4 {
+      margin-bottom: calc(var(--spacing) * 4);
+    }
+    .sm\:mb-6 {
+      margin-bottom: calc(var(--spacing) * 6);
+    }
+    .sm\:ml-0 {
+      margin-left: calc(var(--spacing) * 0);
+    }
+    .sm\:ml-2 {
+      margin-left: calc(var(--spacing) * 2);
+    }
+    .sm\:ml-4 {
+      margin-left: calc(var(--spacing) * 4);
+    }
+    .sm\:ml-5 {
+      margin-left: calc(var(--spacing) * 5);
+    }
+    .sm\:ml-16 {
+      margin-left: calc(var(--spacing) * 16);
+    }
+    .sm\:ml-auto {
+      margin-left: auto;
+    }
+    .sm\:block {
+      display: block;
+    }
+    .sm\:flex {
+      display: flex;
+    }
+    .sm\:grid {
+      display: grid;
+    }
+    .sm\:hidden {
+      display: none;
+    }
+    .sm\:inline {
+      display: inline;
+    }
+    .sm\:inline-block {
+      display: inline-block;
+    }
+    .sm\:inline-flex {
+      display: inline-flex;
+    }
+    .sm\:table-cell {
+      display: table-cell;
+    }
+    .sm\:h-4 {
+      height: calc(var(--spacing) * 4);
+    }
+    .sm\:h-10 {
+      height: calc(var(--spacing) * 10);
+    }
+    .sm\:h-auto {
+      height: auto;
+    }
+    .sm\:h-screen {
+      height: 100vh;
+    }
+    .sm\:max-h-9 {
+      max-height: calc(var(--spacing) * 9);
+    }
+    .sm\:max-h-\[30\.6rem\] {
+      max-height: 30.6rem;
+    }
+    .sm\:min-h-\[200px\] {
+      min-height: 200px;
+    }
+    .sm\:w-1\/4 {
+      width: 25%;
+    }
+    .sm\:w-3\/4 {
+      width: 75%;
+    }
+    .sm\:w-4 {
+      width: calc(var(--spacing) * 4);
+    }
+    .sm\:w-4xl {
+      width: var(--container-4xl);
+    }
+    .sm\:w-10 {
+      width: calc(var(--spacing) * 10);
+    }
+    .sm\:w-16 {
+      width: calc(var(--spacing) * 16);
+    }
+    .sm\:w-24 {
+      width: calc(var(--spacing) * 24);
+    }
+    .sm\:w-28 {
+      width: calc(var(--spacing) * 28);
+    }
+    .sm\:w-32 {
+      width: calc(var(--spacing) * 32);
+    }
+    .sm\:w-36 {
+      width: calc(var(--spacing) * 36);
+    }
+    .sm\:w-44 {
+      width: calc(var(--spacing) * 44);
+    }
+    .sm\:w-80 {
+      width: calc(var(--spacing) * 80);
+    }
+    .sm\:w-180 {
+      width: calc(var(--spacing) * 180);
+    }
+    .sm\:w-\[100px\] {
+      width: 100px;
+    }
+    .sm\:w-auto {
+      width: auto;
+    }
+    .sm\:w-full {
+      width: 100%;
+    }
+    .sm\:max-w-3xl {
+      max-width: var(--container-3xl);
+    }
+    .sm\:max-w-4xl {
+      max-width: var(--container-4xl);
+    }
+    .sm\:max-w-7xl {
+      max-width: var(--container-7xl);
+    }
+    .sm\:max-w-7xl\! {
+      max-width: var(--container-7xl) !important;
+    }
+    .sm\:max-w-32 {
+      max-width: calc(var(--spacing) * 32);
+    }
+    .sm\:max-w-56 {
+      max-width: calc(var(--spacing) * 56);
+    }
+    .sm\:max-w-64 {
+      max-width: calc(var(--spacing) * 64);
+    }
+    .sm\:max-w-72 {
+      max-width: calc(var(--spacing) * 72);
+    }
+    .sm\:max-w-140 {
+      max-width: calc(var(--spacing) * 140);
+    }
+    .sm\:max-w-180 {
+      max-width: calc(var(--spacing) * 180);
+    }
+    .sm\:max-w-280 {
+      max-width: calc(var(--spacing) * 280);
+    }
+    .sm\:max-w-360 {
+      max-width: calc(var(--spacing) * 360);
+    }
+    .sm\:max-w-\[500px\] {
+      max-width: 500px;
+    }
+    .sm\:max-w-\[520px\] {
+      max-width: 520px;
+    }
+    .sm\:max-w-\[600px\] {
+      max-width: 600px;
+    }
+    .sm\:max-w-\[610px\] {
+      max-width: 610px;
+    }
+    .sm\:max-w-\[650px\] {
+      max-width: 650px;
+    }
+    .sm\:max-w-lg {
+      max-width: var(--container-lg);
+    }
+    .sm\:max-w-md {
+      max-width: var(--container-md);
+    }
+    .sm\:max-w-none {
+      max-width: none;
+    }
+    .sm\:max-w-sm {
+      max-width: var(--container-sm);
+    }
+    .sm\:max-w-xl {
+      max-width: var(--container-xl);
+    }
+    .sm\:min-w-48 {
+      min-width: calc(var(--spacing) * 48);
+    }
+    .sm\:flex-none {
+      flex: none;
+    }
+    .sm\:translate-y-\[12px\] {
+      --tw-translate-y: 12px;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+    .sm\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    .sm\:grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    .sm\:flex-col {
+      flex-direction: column;
+    }
+    .sm\:flex-row {
+      flex-direction: row;
+    }
+    .sm\:flex-row-reverse {
+      flex-direction: row-reverse;
+    }
+    .sm\:flex-nowrap {
+      flex-wrap: nowrap;
+    }
+    .sm\:items-center {
+      align-items: center;
+    }
+    .sm\:items-start {
+      align-items: flex-start;
+    }
+    .sm\:justify-between {
+      justify-content: space-between;
+    }
+    .sm\:justify-end {
+      justify-content: flex-end;
+    }
+    .sm\:justify-start {
+      justify-content: flex-start;
+    }
+    .sm\:gap-0 {
+      gap: calc(var(--spacing) * 0);
+    }
+    .sm\:gap-2 {
+      gap: calc(var(--spacing) * 2);
+    }
+    .sm\:gap-3 {
+      gap: calc(var(--spacing) * 3);
+    }
+    .sm\:gap-4 {
+      gap: calc(var(--spacing) * 4);
+    }
+    .sm\:gap-6 {
+      gap: calc(var(--spacing) * 6);
+    }
+    :where(.sm\:space-y-0 > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
+    }
+    :where(.sm\:space-y-8 > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
+    }
+    .sm\:gap-x-0 {
+      column-gap: calc(var(--spacing) * 0);
+    }
+    .sm\:gap-x-6 {
+      column-gap: calc(var(--spacing) * 6);
+    }
+    :where(.sm\:space-x-2 > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing) * 2) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse)));
+    }
+    :where(.sm\:space-x-4 > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
+    }
+    :where(.sm\:divide-y > :not(:last-child)) {
+      --tw-divide-y-reverse: 0;
+      border-bottom-style: var(--tw-border-style);
+      border-top-style: var(--tw-border-style);
+      border-top-width: calc(1px * var(--tw-divide-y-reverse));
+      border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+    }
+    :where(.sm\:divide-subtle > :not(:last-child)) {
+      border-color: var(--cal-border-subtle);
+    }
+    .sm\:self-baseline {
+      align-self: baseline;
+    }
+    .sm\:self-center {
+      align-self: center;
+    }
+    .sm\:overflow-hidden {
+      overflow: hidden;
+    }
+    .sm\:overflow-y-auto {
+      overflow-y: auto;
+    }
+    .sm\:rounded-lg {
+      border-radius: var(--radius-lg);
+    }
+    .sm\:rounded-md {
+      border-radius: var(--radius-md);
+    }
+    .sm\:rounded-l-none {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+    .sm\:rounded-tl-md {
+      border-top-left-radius: var(--radius-md);
+    }
+    .sm\:rounded-tl-none {
+      border-top-left-radius: 0;
+    }
+    .sm\:rounded-r-none {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    .sm\:rounded-bl-md {
+      border-bottom-left-radius: var(--radius-md);
+    }
+    .sm\:rounded-bl-none {
+      border-bottom-left-radius: 0;
+    }
+    .sm\:border-booker-width {
+      border-style: var(--tw-border-style);
+      border-width: var(--cal-border-booker-width, 1px);
+    }
+    .sm\:border-r {
+      border-right-style: var(--tw-border-style);
+      border-right-width: 1px;
+    }
+    .sm\:border-r-0 {
+      border-right-style: var(--tw-border-style);
+      border-right-width: 0;
+    }
+    .sm\:border-b-0 {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 0;
+    }
+    .sm\:border-subtle {
+      border-color: var(--cal-border-subtle);
+    }
+    .sm\:p-0 {
+      padding: calc(var(--spacing) * 0);
+    }
+    .sm\:p-3 {
+      padding: calc(var(--spacing) * 3);
+    }
+    .sm\:p-4 {
+      padding: calc(var(--spacing) * 4);
+    }
+    .sm\:p-6 {
+      padding: calc(var(--spacing) * 6);
+    }
+    .sm\:p-8 {
+      padding: calc(var(--spacing) * 8);
+    }
+    .sm\:px-0 {
+      padding-inline: calc(var(--spacing) * 0);
+    }
+    .sm\:px-4 {
+      padding-inline: calc(var(--spacing) * 4);
+    }
+    .sm\:px-6 {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+    .sm\:px-8 {
+      padding-inline: calc(var(--spacing) * 8);
+    }
+    .sm\:px-10 {
+      padding-inline: calc(var(--spacing) * 10);
+    }
+    .sm\:px-14 {
+      padding-inline: calc(var(--spacing) * 14);
+    }
+    .sm\:px-16 {
+      padding-inline: calc(var(--spacing) * 16);
+    }
+    .sm\:py-4 {
+      padding-block: calc(var(--spacing) * 4);
+    }
+    .sm\:py-5 {
+      padding-block: calc(var(--spacing) * 5);
+    }
+    .sm\:py-6 {
+      padding-block: calc(var(--spacing) * 6);
+    }
+    .sm\:py-8 {
+      padding-block: calc(var(--spacing) * 8);
+    }
+    .sm\:pt-0 {
+      padding-top: calc(var(--spacing) * 0);
+    }
+    .sm\:pt-24 {
+      padding-top: calc(var(--spacing) * 24);
+    }
+    .sm\:pr-0 {
+      padding-right: calc(var(--spacing) * 0);
+    }
+    .sm\:pr-5 {
+      padding-right: calc(var(--spacing) * 5);
+    }
+    .sm\:pr-6 {
+      padding-right: calc(var(--spacing) * 6);
+    }
+    .sm\:pr-8 {
+      padding-right: calc(var(--spacing) * 8);
+    }
+    .sm\:pb-0 {
+      padding-bottom: calc(var(--spacing) * 0);
+    }
+    .sm\:pb-5 {
+      padding-bottom: calc(var(--spacing) * 5);
+    }
+    .sm\:pl-0 {
+      padding-left: calc(var(--spacing) * 0);
+    }
+    .sm\:pl-3 {
+      padding-left: calc(var(--spacing) * 3);
+    }
+    .sm\:text-left {
+      text-align: left;
+    }
+    .sm\:align-middle {
+      vertical-align: middle;
+    }
+    .sm\:text-5xl {
+      font-size: var(--text-5xl);
+      line-height: var(--tw-leading, var(--text-5xl--line-height));
+    }
+    .sm\:text-sm {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+    }
+    .sm\:text-xl {
+      font-size: var(--text-xl);
+      line-height: var(--tw-leading, var(--text-xl--line-height));
+    }
+    .sm\:text-xs {
+      font-size: var(--text-xs);
+      line-height: var(--tw-leading, var(--text-xs--line-height));
+    }
+    .sm\:leading-4 {
+      --tw-leading: calc(var(--spacing) * 4);
+      line-height: calc(var(--spacing) * 4);
+    }
+    .sm\:font-medium {
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+    }
+    .sm\:transition-\[width\] {
+      transition-property: width;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+    }
+    .sm\:duration-300 {
+      --tw-duration: 0.3s;
+      transition-duration: 0.3s;
+    }
+    :is(.\*\:sm\:px-6 > *) {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+    .sm\:last\:border-r-0:last-child {
+      border-right-style: var(--tw-border-style);
+      border-right-width: 0;
+    }
+    @media (hover: hover) {
+      .sm\:hover\:bg-cal-muted:hover {
+        background-color: var(--cal-bg-muted);
+      }
+      .sm\:hover\:bg-subtle:hover {
+        background-color: var(--cal-bg-subtle);
+      }
+    }
+    .data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state="open"] {
+      --tw-enter-translate-y: calc(1 * 100%);
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .sm\:motion-reduce\:transition-none {
+        transition-property: none;
+      }
+    }
+  }
+  @media (min-width: 48rem) {
+    .md\:visible {
+      visibility: visible;
+    }
+    .md\:not-sr-only {
+      clip-path: none;
+      white-space: normal;
+      width: auto;
+      height: auto;
+      margin: 0;
+      padding: 0;
+      position: static;
+      overflow: visible;
+    }
+    .md\:relative {
+      position: relative;
+    }
+    .md\:sticky {
+      position: sticky;
+    }
+    .md\:right-auto {
+      right: auto;
+    }
+    .md\:bottom-32\! {
+      bottom: calc(var(--spacing) * 32) !important;
+    }
+    .md\:bottom-auto {
+      bottom: auto;
+    }
+    .md\:left-1\/2 {
+      left: 50%;
+    }
+    .md\:z-10 {
+      z-index: 10;
+    }
+    .md\:z-auto {
+      z-index: auto;
+    }
+    .md\:mx-0 {
+      margin-inline: calc(var(--spacing) * 0);
+    }
+    .md\:mx-4 {
+      margin-inline: calc(var(--spacing) * 4);
+    }
+    .md\:mx-5 {
+      margin-inline: calc(var(--spacing) * 5);
+    }
+    .md\:mx-14 {
+      margin-inline: calc(var(--spacing) * 14);
+    }
+    .md\:mx-auto {
+      margin-inline: auto;
+    }
+    .md\:my-0 {
+      margin-block: calc(var(--spacing) * 0);
+    }
+    .md\:my-24 {
+      margin-block: calc(var(--spacing) * 24);
+    }
+    .md\:-mt-4 {
+      margin-top: calc(var(--spacing) * -4);
+    }
+    .md\:mt-0 {
+      margin-top: calc(var(--spacing) * 0);
+    }
+    .md\:mt-7 {
+      margin-top: calc(var(--spacing) * 7);
+    }
+    .md\:-mr-8 {
+      margin-right: calc(var(--spacing) * -8);
+    }
+    .md\:mb-0 {
+      margin-bottom: calc(var(--spacing) * 0);
+    }
+    .md\:mb-2 {
+      margin-bottom: calc(var(--spacing) * 2);
+    }
+    .md\:mb-6 {
+      margin-bottom: calc(var(--spacing) * 6);
+    }
+    .md\:mb-8 {
+      margin-bottom: calc(var(--spacing) * 8);
+    }
+    .md\:mb-9 {
+      margin-bottom: calc(var(--spacing) * 9);
+    }
+    .md\:mb-10 {
+      margin-bottom: calc(var(--spacing) * 10);
+    }
+    .md\:-ml-8 {
+      margin-left: calc(var(--spacing) * -8);
+    }
+    .md\:ml-5 {
+      margin-left: calc(var(--spacing) * 5);
+    }
+    .md\:block {
+      display: block;
+    }
+    .md\:contents {
+      display: contents;
+    }
+    .md\:flex {
+      display: flex;
+    }
+    .md\:grid {
+      display: grid;
+    }
+    .md\:hidden {
+      display: none;
+    }
+    .md\:inline {
+      display: inline;
+    }
+    .md\:inline-flex {
+      display: inline-flex;
+    }
+    .md\:h-11 {
+      height: calc(var(--spacing) * 11);
+    }
+    .md\:h-24 {
+      height: calc(var(--spacing) * 24);
+    }
+    .md\:h-\[400px\] {
+      height: 400px;
+    }
+    .md\:h-screen {
+      height: 100vh;
+    }
+    .md\:max-h-80 {
+      max-height: calc(var(--spacing) * 80);
+    }
+    .md\:max-h-min {
+      max-height: min-content;
+    }
+    .md\:min-h-min {
+      min-height: min-content;
+    }
+    .md\:w-\(--booker-main-width\) {
+      width: var(--booker-main-width);
+    }
+    .md\:w-\(--booker-meta-width\) {
+      width: var(--booker-meta-width);
+    }
+    .md\:w-\(--booker-timeslots-width\) {
+      width: var(--booker-timeslots-width);
+    }
+    .md\:w-1\/5 {
+      width: 20%;
+    }
+    .md\:w-11 {
+      width: calc(var(--spacing) * 11);
+    }
+    .md\:w-24 {
+      width: calc(var(--spacing) * 24);
+    }
+    .md\:w-\[450px\] {
+      width: 450px;
+    }
+    .md\:w-\[520px\] {
+      width: 520px;
+    }
+    .md\:w-\[560px\] {
+      width: 560px;
+    }
+    .md\:w-\[700px\] {
+      width: 700px;
+    }
+    .md\:w-fit {
+      width: fit-content;
+    }
+    .md\:w-full {
+      width: 100%;
+    }
+    .md\:w-max {
+      width: max-content;
+    }
+    .md\:max-w-52 {
+      max-width: calc(var(--spacing) * 52);
+    }
+    .md\:max-w-56 {
+      max-width: calc(var(--spacing) * 56);
+    }
+    .md\:max-w-80 {
+      max-width: calc(var(--spacing) * 80);
+    }
+    .md\:max-w-\[145px\] {
+      max-width: 145px;
+    }
+    .md\:max-w-\[200px\] {
+      max-width: 200px;
+    }
+    .md\:max-w-\[300px\] {
+      max-width: 300px;
+    }
+    .md\:max-w-\[420px\] {
+      max-width: 420px;
+    }
+    .md\:max-w-full {
+      max-width: 100%;
+    }
+    .md\:max-w-max {
+      max-width: max-content;
+    }
+    .md\:max-w-sm {
+      max-width: var(--container-sm);
+    }
+    .md\:min-w-\[120px\] {
+      min-width: 120px;
+    }
+    .md\:min-w-\[150px\] {
+      min-width: 150px;
+    }
+    .md\:min-w-min {
+      min-width: min-content;
+    }
+    .md\:-translate-x-1\/2 {
+      --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+    .md\:transform {
+      transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
+    }
+    .md\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    .md\:grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    .md\:grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+    .md\:grid-rows-1 {
+      grid-template-rows: repeat(1, minmax(0, 1fr));
+    }
+    .md\:flex-row {
+      flex-direction: row;
+    }
+    .md\:items-center {
+      align-items: center;
+    }
+    .md\:justify-between {
+      justify-content: space-between;
+    }
+    .md\:justify-center {
+      justify-content: center;
+    }
+    .md\:justify-start {
+      justify-content: flex-start;
+    }
+    .md\:gap-4 {
+      gap: calc(var(--spacing) * 4);
+    }
+    :where(.md\:space-y-0 > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
+    }
+    :where(.md\:space-x-3 > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
+    }
+    :where(.md\:space-x-5 > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing) * 5) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-x-reverse)));
+    }
+    .md\:overflow-x-hidden {
+      overflow-x: hidden;
+    }
+    .md\:rounded-\[10px\] {
+      border-radius: 10px;
+    }
+    .md\:rounded-lg {
+      border-radius: var(--radius-lg);
+    }
+    .md\:rounded-md {
+      border-radius: var(--radius-md);
+    }
+    .md\:rounded-none {
+      border-radius: 0;
+    }
+    .md\:border {
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+    }
+    .md\:border-0 {
+      border-style: var(--tw-border-style);
+      border-width: 0;
+    }
+    .md\:border-booker-width {
+      border-style: var(--tw-border-style);
+      border-width: var(--cal-border-booker-width, 1px);
+    }
+    .md\:border-r {
+      border-right-style: var(--tw-border-style);
+      border-right-width: 1px;
+    }
+    .md\:border-b-0 {
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 0;
+    }
+    .md\:border-l {
+      border-left-style: var(--tw-border-style);
+      border-left-width: 1px;
+    }
+    .md\:border-subtle {
+      border-color: var(--cal-border-subtle);
+    }
+    .md\:object-center {
+      object-position: center;
+    }
+    .md\:p-0 {
+      padding: calc(var(--spacing) * 0);
+    }
+    .md\:p-4 {
+      padding: calc(var(--spacing) * 4);
+    }
+    .md\:p-5 {
+      padding: calc(var(--spacing) * 5);
+    }
+    .md\:p-6 {
+      padding: calc(var(--spacing) * 6);
+    }
+    .md\:p-8 {
+      padding: calc(var(--spacing) * 8);
+    }
+    .md\:p-10 {
+      padding: calc(var(--spacing) * 10);
+    }
+    .md\:px-2 {
+      padding-inline: calc(var(--spacing) * 2);
+    }
+    .md\:px-4 {
+      padding-inline: calc(var(--spacing) * 4);
+    }
+    .md\:px-8 {
+      padding-inline: calc(var(--spacing) * 8);
+    }
+    .md\:px-10 {
+      padding-inline: calc(var(--spacing) * 10);
+    }
+    .md\:px-20 {
+      padding-inline: calc(var(--spacing) * 20);
+    }
+    .md\:py-2\.5 {
+      padding-block: calc(var(--spacing) * 2.5);
+    }
+    .md\:py-24 {
+      padding-block: calc(var(--spacing) * 24);
+    }
+    .md\:pt-0 {
+      padding-top: calc(var(--spacing) * 0);
+    }
+    .md\:pt-10 {
+      padding-top: calc(var(--spacing) * 10);
+    }
+    .md\:pr-10 {
+      padding-right: calc(var(--spacing) * 10);
+    }
+    .md\:pl-0 {
+      padding-left: calc(var(--spacing) * 0);
+    }
+    .md\:pl-10 {
+      padding-left: calc(var(--spacing) * 10);
+    }
+    .md\:text-center {
+      text-align: center;
+    }
+    .md\:text-left {
+      text-align: left;
+    }
+    .md\:text-2xl {
+      font-size: var(--text-2xl);
+      line-height: var(--tw-leading, var(--text-2xl--line-height));
+    }
+  }
+  @media (min-width: 64rem) {
+    .lg\:sticky {
+      position: sticky;
+    }
+    .lg\:left-1\/2 {
+      left: 50%;
+    }
+    .lg\:left-3 {
+      left: calc(var(--spacing) * 3);
+    }
+    .lg\:col-span-1 {
+      grid-column: span 1 / span 1;
+    }
+    .lg\:-mx-6 {
+      margin-inline: calc(var(--spacing) * -6);
+    }
+    .lg\:mx-0 {
+      margin-inline: calc(var(--spacing) * 0);
+    }
+    .lg\:-mt-12 {
+      margin-top: calc(var(--spacing) * -12);
+    }
+    .lg\:mt-0 {
+      margin-top: calc(var(--spacing) * 0);
+    }
+    .lg\:mt-4 {
+      margin-top: calc(var(--spacing) * 4);
+    }
+    .lg\:mt-12 {
+      margin-top: calc(var(--spacing) * 12);
+    }
+    .lg\:mt-24 {
+      margin-top: calc(var(--spacing) * 24);
+    }
+    .lg\:mr-0 {
+      margin-right: calc(var(--spacing) * 0);
+    }
+    .lg\:mb-0 {
+      margin-bottom: calc(var(--spacing) * 0);
+    }
+    .lg\:mb-4 {
+      margin-bottom: calc(var(--spacing) * 4);
+    }
+    .lg\:mb-5 {
+      margin-bottom: calc(var(--spacing) * 5);
+    }
+    .lg\:mb-7 {
+      margin-bottom: calc(var(--spacing) * 7);
+    }
+    .lg\:mb-8 {
+      margin-bottom: calc(var(--spacing) * 8);
+    }
+    .lg\:mb-9 {
+      margin-bottom: calc(var(--spacing) * 9);
+    }
+    .lg\:ml-0 {
+      margin-left: calc(var(--spacing) * 0);
+    }
+    .lg\:ml-8 {
+      margin-left: calc(var(--spacing) * 8);
+    }
+    .lg\:ml-10 {
+      margin-left: calc(var(--spacing) * 10);
+    }
+    .lg\:ml-14 {
+      margin-left: calc(var(--spacing) * 14);
+    }
+    .lg\:block {
+      display: block;
+    }
+    .lg\:flex {
+      display: flex;
+    }
+    .lg\:grid {
+      display: grid;
+    }
+    .lg\:hidden {
+      display: none;
+    }
+    .lg\:inline {
+      display: inline;
+    }
+    .lg\:inline-flex {
+      display: inline-flex;
+    }
+    .lg\:h-full {
+      height: 100%;
+    }
+    .lg\:w-\(--booker-main-width\) {
+      width: var(--booker-main-width);
+    }
+    .lg\:w-1\/3 {
+      width: 33.3333%;
+    }
+    .lg\:w-56 {
+      width: calc(var(--spacing) * 56);
+    }
+    .lg\:w-\[calc\(100\%\+48px\)\] {
+      width: calc(100% + 48px);
+    }
+    .lg\:w-auto {
+      width: auto;
+    }
+    .lg\:w-fit {
+      width: fit-content;
+    }
+    .lg\:max-w-\(--breakpoint-2xl\) {
+      max-width: var(--breakpoint-2xl);
+    }
+    .lg\:max-w-2xl {
+      max-width: var(--container-2xl);
+    }
+    .lg\:max-w-3xl {
+      max-width: var(--container-3xl);
+    }
+    .lg\:max-w-\[50\%\] {
+      max-width: 50%;
+    }
+    .lg\:max-w-full {
+      max-width: 100%;
+    }
+    .lg\:translate-x-0 {
+      --tw-translate-x: calc(var(--spacing) * 0);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+    .lg\:grid-cols-2 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+    .lg\:grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+    .lg\:grid-cols-4 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+    .lg\:grid-cols-5 {
+      grid-template-columns: repeat(5, minmax(0, 1fr));
+    }
+    .lg\:grid-cols-6 {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+    .lg\:grid-cols-\[1fr_auto\] {
+      grid-template-columns: 1fr auto;
+    }
+    .lg\:flex-col {
+      flex-direction: column;
+    }
+    .lg\:flex-row {
+      flex-direction: row;
+    }
+    .lg\:items-center {
+      align-items: center;
+    }
+    .lg\:justify-center {
+      justify-content: center;
+    }
+    :where(.lg\:space-y-0 > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));
+    }
+    :where(.lg\:space-y-5 > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
+    }
+    :where(.lg\:space-y-6 > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
+    }
+    :where(.lg\:space-x-4 > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
+    }
+    .lg\:rounded {
+      border-radius: var(--radius);
+    }
+    .lg\:rounded-md {
+      border-radius: var(--radius-md);
+    }
+    .lg\:border {
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+    }
+    .lg\:bg-subtle {
+      background-color: var(--cal-bg-subtle);
+    }
+    .lg\:p-20 {
+      padding: calc(var(--spacing) * 20);
+    }
+    .lg\:px-0 {
+      padding-inline: calc(var(--spacing) * 0);
+    }
+    .lg\:px-2 {
+      padding-inline: calc(var(--spacing) * 2);
+    }
+    .lg\:px-3 {
+      padding-inline: calc(var(--spacing) * 3);
+    }
+    .lg\:px-4 {
+      padding-inline: calc(var(--spacing) * 4);
+    }
+    .lg\:px-6 {
+      padding-inline: calc(var(--spacing) * 6);
+    }
+    .lg\:px-8 {
+      padding-inline: calc(var(--spacing) * 8);
+    }
+    .lg\:py-8 {
+      padding-block: calc(var(--spacing) * 8);
+    }
+    .lg\:py-12 {
+      padding-block: calc(var(--spacing) * 12);
+    }
+    .lg\:py-\[6px\] {
+      padding-block: 6px;
+    }
+    .lg\:pt-0 {
+      padding-top: calc(var(--spacing) * 0);
+    }
+    .lg\:pt-4 {
+      padding-top: calc(var(--spacing) * 4);
+    }
+    .lg\:pb-0 {
+      padding-bottom: calc(var(--spacing) * 0);
+    }
+    .lg\:pl-11 {
+      padding-left: calc(var(--spacing) * 11);
+    }
+    .lg\:pl-12 {
+      padding-left: calc(var(--spacing) * 12);
+    }
+    .lg\:pl-\[6px\] {
+      padding-left: 6px;
+    }
+    .lg\:opacity-100 {
+      opacity: 1;
+    }
+    .lg\:\[--booker-meta-width\:280px\] {
+      --booker-meta-width: 280px;
+    }
+    .lg\:\[--booker-meta-width\:340px\] {
+      --booker-meta-width: 340px;
+    }
+    .lg\:\[--booker-meta-width\:424px\] {
+      --booker-meta-width: 424px;
+    }
+    .lg\:\[--booker-timeslots-width\:280px\] {
+      --booker-timeslots-width: 280px;
+    }
+    .lg\:\[--troubleshooter-meta-width\:430px\] {
+      --troubleshooter-meta-width: 430px;
+    }
+    @media (hover: hover) {
+      .lg\:hover\:bg-emphasis:hover {
+        background-color: var(--cal-bg-emphasis);
+      }
+      .lg\:hover\:text-emphasis:hover {
+        color: var(--cal-text-emphasis);
+      }
+    }
+  }
+  @media (min-width: 80rem) {
+    .xl\:mt-0 {
+      margin-top: calc(var(--spacing) * 0);
+    }
+    .xl\:mr-0 {
+      margin-right: calc(var(--spacing) * 0);
+    }
+    .xl\:block {
+      display: block;
+    }
+    .xl\:flex {
+      display: flex;
+    }
+    .xl\:hidden {
+      display: none;
+    }
+    .xl\:h-\[690px\] {
+      height: 690px;
+    }
+    .xl\:w-\[25\%\] {
+      width: 25%;
+    }
+    .xl\:w-\[75\%\] {
+      width: 75%;
+    }
+    .xl\:w-full {
+      width: 100%;
+    }
+    .xl\:max-w-80 {
+      max-width: calc(var(--spacing) * 80);
+    }
+    .xl\:max-w-full {
+      max-width: 100%;
+    }
+    .xl\:grid-cols-\[40\%_1fr\] {
+      grid-template-columns: 40% 1fr;
+    }
+    .xl\:flex-row {
+      flex-direction: row;
+    }
+    .xl\:items-center {
+      align-items: center;
+    }
+    .xl\:justify-between {
+      justify-content: space-between;
+    }
+    .xl\:justify-center {
+      justify-content: center;
+    }
+    :where(.xl\:space-x-5 > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing) * 5) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-x-reverse)));
+    }
+    :where(.xl\:space-x-6 > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)));
+    }
+    .xl\:px-0 {
+      padding-inline: calc(var(--spacing) * 0);
+    }
+    .xl\:pt-0 {
+      padding-top: calc(var(--spacing) * 0);
+    }
+    .xl\:pr-0 {
+      padding-right: calc(var(--spacing) * 0);
+    }
+    .xl\:pl-10 {
+      padding-left: calc(var(--spacing) * 10);
+    }
+  }
+  @media (min-width: 96rem) {
+    .\32 xl\:rounded-\[20px\] {
+      border-radius: 20px;
+    }
+    .\32 xl\:border {
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+    }
+    .\32 xl\:border-subtle {
+      border-color: var(--cal-border-subtle);
+    }
+    .\32 xl\:bg-default {
+      background-color: var(--cal-bg);
+    }
+    .\32 xl\:px-28 {
+      padding-inline: calc(var(--spacing) * 28);
+    }
+    .\32 xl\:py-6 {
+      padding-block: calc(var(--spacing) * 6);
+    }
+  }
+  .ltr\:right-0:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+    right: calc(var(--spacing) * 0);
+  }
+  .ltr\:right-2:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+    right: calc(var(--spacing) * 2);
+  }
+  .ltr\:right-4:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+    right: calc(var(--spacing) * 4);
+  }
+  .ltr\:mr-1:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+    margin-right: calc(var(--spacing) * 1);
+  }
+  .ltr\:mr-2:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+    margin-right: calc(var(--spacing) * 2);
+  }
+  .ltr\:mr-3:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+    margin-right: calc(var(--spacing) * 3);
+  }
+  .ltr\:mr-4:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+    margin-right: calc(var(--spacing) * 4);
+  }
+  .ltr\:mr-5:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+    margin-right: calc(var(--spacing) * 5);
+  }
+  .ltr\:mr-\[10px\]:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+    margin-right: 10px;
+  }
+  .ltr\:ml-1:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+    margin-left: calc(var(--spacing) * 1);
+  }
+  .ltr\:ml-2:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+    margin-left: calc(var(--spacing) * 2);
+  }
+  .ltr\:ml-3:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+    margin-left: calc(var(--spacing) * 3);
+  }
+  .ltr\:rounded-l-md:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+    border-top-left-radius: var(--radius-md);
+    border-bottom-left-radius: var(--radius-md);
+  }
+  .ltr\:rounded-tl-md:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+    border-top-left-radius: var(--radius-md);
+  }
+  .ltr\:rounded-r-md:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+    border-top-right-radius: var(--radius-md);
+    border-bottom-right-radius: var(--radius-md);
+  }
+  .ltr\:border-r-0:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 0;
+  }
+  .ltr\:border-l:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 1px;
+  }
+  .ltr\:pr-4:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+    padding-right: calc(var(--spacing) * 4);
+  }
+  .ltr\:pr-10:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+    padding-right: calc(var(--spacing) * 10);
+  }
+  .ltr\:pl-3:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+    padding-left: calc(var(--spacing) * 3);
+  }
+  .ltr\:pl-4:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+    padding-left: calc(var(--spacing) * 4);
+  }
+  .ltr\:text-left:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+    text-align: left;
+  }
+  .ltr\:last\:mr-0:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *):last-child {
+    margin-right: calc(var(--spacing) * 0);
+  }
+  @media (min-width: 40rem) {
+    .sm\:ltr\:pl-0:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+      padding-left: calc(var(--spacing) * 0);
+    }
+  }
+  @media (min-width: 48rem) {
+    .md\:ltr\:right-0:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+      right: calc(var(--spacing) * 0);
+    }
+    .md\:ltr\:mx-auto:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+      margin-inline: auto;
+    }
+    .ltr\:md\:border-l:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+      border-left-style: var(--tw-border-style);
+      border-left-width: 1px;
+    }
+  }
+  @media (min-width: 64rem) {
+    .lg\:ltr\:mr-2:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *) {
+      margin-right: calc(var(--spacing) * 2);
+    }
+  }
+  .rtl\:left-0:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    left: calc(var(--spacing) * 0);
+  }
+  .rtl\:left-2:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    left: calc(var(--spacing) * 2);
+  }
+  .rtl\:left-4:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    left: calc(var(--spacing) * 4);
+  }
+  .rtl\:-mr-2:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    margin-right: calc(var(--spacing) * -2);
+  }
+  .rtl\:-mr-14:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    margin-right: calc(var(--spacing) * -14);
+  }
+  .rtl\:mr-1:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    margin-right: calc(var(--spacing) * 1);
+  }
+  .rtl\:mr-2:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    margin-right: calc(var(--spacing) * 2);
+  }
+  .rtl\:mr-3:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    margin-right: calc(var(--spacing) * 3);
+  }
+  .rtl\:mr-4:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    margin-right: calc(var(--spacing) * 4);
+  }
+  .rtl\:mr-auto:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    margin-right: auto;
+  }
+  .rtl\:ml-1:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    margin-left: calc(var(--spacing) * 1);
+  }
+  .rtl\:ml-2:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    margin-left: calc(var(--spacing) * 2);
+  }
+  .rtl\:ml-3:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    margin-left: calc(var(--spacing) * 3);
+  }
+  .rtl\:ml-4:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    margin-left: calc(var(--spacing) * 4);
+  }
+  .rtl\:ml-5:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    margin-left: calc(var(--spacing) * 5);
+  }
+  .rtl\:ml-\[10px\]:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    margin-left: 10px;
+  }
+  .rtl\:grow:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    flex-grow: 1;
+  }
+  .rtl\:rotate-180:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    rotate: 180deg;
+  }
+  .rtl\:flex-row-reverse:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    flex-direction: row-reverse;
+  }
+  .rtl\:justify-end:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    justify-content: flex-end;
+  }
+  :where(.rtl\:space-x-reverse:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) > :not(:last-child)) {
+    --tw-space-x-reverse: 1;
+  }
+  .rtl\:rounded-l-md:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    border-top-left-radius: var(--radius-md);
+    border-bottom-left-radius: var(--radius-md);
+  }
+  .rtl\:rounded-r-md:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    border-top-right-radius: var(--radius-md);
+    border-bottom-right-radius: var(--radius-md);
+  }
+  .rtl\:rounded-tr-md:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    border-top-right-radius: var(--radius-md);
+  }
+  .rtl\:border-r:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+  }
+  .rtl\:border-l-0:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 0;
+  }
+  .rtl\:border-default:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    border-color: var(--cal-border);
+  }
+  .rtl\:pr-4:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    padding-right: calc(var(--spacing) * 4);
+  }
+  .rtl\:pr-6:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    padding-right: calc(var(--spacing) * 6);
+  }
+  .rtl\:pl-4:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    padding-left: calc(var(--spacing) * 4);
+  }
+  .rtl\:pl-10:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    padding-left: calc(var(--spacing) * 10);
+  }
+  .rtl\:text-right:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    text-align: right;
+  }
+  .rtl\:last\:ml-0:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *):last-child {
+    margin-left: calc(var(--spacing) * 0);
+  }
+  .rtl\:data-\[state\=checked\]\:-translate-x-3:where(
+      :dir(rtl),
+      [dir="rtl"],
+      [dir="rtl"] *
+    )[data-state="checked"] {
+    --tw-translate-x: calc(var(--spacing) * -3);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .rtl\:data-\[state\=checked\]\:-translate-x-5:where(
+      :dir(rtl),
+      [dir="rtl"],
+      [dir="rtl"] *
+    )[data-state="checked"] {
+    --tw-translate-x: calc(var(--spacing) * -5);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  @media (min-width: 40rem) {
+    .sm\:rtl\:pr-0:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+      padding-right: calc(var(--spacing) * 0);
+    }
+  }
+  @media (min-width: 48rem) {
+    .md\:rtl\:left-0:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+      left: calc(var(--spacing) * 0);
+    }
+  }
+  @media (min-width: 64rem) {
+    .lg\:rtl\:ml-2:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+      margin-left: calc(var(--spacing) * 2);
+    }
+  }
+  .dark\:block:is(.dark *) {
+    display: block;
+  }
+  .dark\:hidden:is(.dark *) {
+    display: none;
+  }
+  .dark\:border:is(.dark *) {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .dark\:border-darkgray-200:is(.dark *) {
+    border-color: var(--color-gray-200);
+  }
+  .dark\:border-emphasis:is(.dark *) {
+    border-color: var(--cal-border-emphasis);
+  }
+  .dark\:border-gray-900:is(.dark *) {
+    border-color: var(--color-gray-900);
+  }
+  .dark\:border-transparent:is(.dark *) {
+    border-color: #0000;
+  }
+  .dark\:border-white\/10:is(.dark *) {
+    border-color: #ffffff1a;
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:border-white\/10:is(.dark *) {
+      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+    }
+  }
+  .dark\:bg-\[\#292929\]:is(.dark *) {
+    background-color: #292929;
+  }
+  .dark\:bg-black:is(.dark *) {
+    background-color: #111;
+  }
+  .dark\:bg-blue-950:is(.dark *) {
+    background-color: var(--color-blue-950);
+  }
+  .dark\:bg-cal-muted:is(.dark *) {
+    background-color: var(--cal-bg-muted);
+  }
+  .dark\:bg-darkgray-50:is(.dark *) {
+    background-color: var(--color-gray-50);
+  }
+  .dark\:bg-darkgray-200:is(.dark *) {
+    background-color: var(--color-gray-200);
+  }
+  .dark\:bg-default:is(.dark *) {
+    background-color: var(--cal-bg);
+  }
+  .dark\:bg-gray-600:is(.dark *) {
+    background-color: var(--color-gray-600);
+  }
+  .dark\:bg-gray-800:is(.dark *) {
+    background-color: var(--color-gray-800);
+  }
+  .dark\:bg-inherit:is(.dark *) {
+    background-color: inherit;
+  }
+  .dark\:bg-input\/32:is(.dark *) {
+    background-color: var(--input);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-input\/32:is(.dark *) {
+      background-color: color-mix(in oklab, var(--input) 32%, transparent);
+    }
+  }
+  .dark\:bg-inverted:is(.dark *) {
+    background-color: var(--cal-bg-inverted);
+  }
+  .dark\:bg-neutral-800\/80:is(.dark *) {
+    background-color: #262626cc;
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-neutral-800\/80:is(.dark *) {
+      background-color: color-mix(in oklab, var(--color-neutral-800) 80%, transparent);
+    }
+  }
+  .dark\:bg-red-900\/20:is(.dark *) {
+    background-color: #82181a33;
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-red-900\/20:is(.dark *) {
+      background-color: color-mix(in oklab, var(--color-red-900) 20%, transparent);
+    }
+  }
+  .dark\:bg-transparent:is(.dark *) {
+    background-color: #0000;
+  }
+  .dark\:bg-white\/5:is(.dark *) {
+    background-color: #ffffff0d;
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-white\/5:is(.dark *) {
+      background-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+    }
+  }
+  .dark\:bg-white\/10:is(.dark *) {
+    background-color: #ffffff1a;
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:bg-white\/10:is(.dark *) {
+      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
+    }
+  }
+  .dark\:bg-linear-to-tr:is(.dark *) {
+    --tw-gradient-position: to top right;
+  }
+  @supports (background-image: linear-gradient(in lab, red, red)) {
+    .dark\:bg-linear-to-tr:is(.dark *) {
+      --tw-gradient-position: to top right in oklab;
+    }
+  }
+  .dark\:bg-linear-to-tr:is(.dark *) {
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+  .dark\:bg-none:is(.dark *) {
+    background-image: none;
+  }
+  .dark\:from-subtle:is(.dark *) {
+    --tw-gradient-from: var(--cal-bg-subtle);
+    --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)
+    );
+  }
+  .dark\:to-muted:is(.dark *) {
+    --tw-gradient-to: var(--muted);
+    --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)
+    );
+  }
+  .dark\:text-black:is(.dark *) {
+    color: #111;
+  }
+  .dark\:text-blue-300:is(.dark *) {
+    color: var(--color-blue-300);
+  }
+  .dark\:text-blue-400:is(.dark *) {
+    color: var(--color-blue-400);
+  }
+  .dark\:text-darkgray-800:is(.dark *) {
+    color: var(--color-gray-800);
+  }
+  .dark\:text-default:is(.dark *) {
+    color: var(--cal-text);
+  }
+  .dark\:text-emphasis:is(.dark *) {
+    color: var(--cal-text-emphasis);
+  }
+  .dark\:text-gray-300:is(.dark *) {
+    color: var(--color-gray-300);
+  }
+  .dark\:text-green-400:is(.dark *) {
+    color: var(--color-green-400);
+  }
+  .dark\:text-inverted:is(.dark *) {
+    color: var(--cal-text-inverted);
+  }
+  .dark\:text-muted:is(.dark *) {
+    color: var(--cal-text-muted);
+  }
+  .dark\:text-orange-200:is(.dark *) {
+    color: var(--color-orange-200);
+  }
+  .dark\:text-red-100:is(.dark *) {
+    color: var(--color-red-100);
+  }
+  .dark\:text-red-200:is(.dark *) {
+    color: var(--color-red-200);
+  }
+  .dark\:text-red-700\/30:is(.dark *) {
+    color: #bf000f4d;
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:text-red-700\/30:is(.dark *) {
+      color: color-mix(in oklab, var(--color-red-700) 30%, transparent);
+    }
+  }
+  .dark\:text-subtle:is(.dark *) {
+    color: var(--cal-text-subtle);
+  }
+  .dark\:text-white:is(.dark *) {
+    color: var(--color-white);
+  }
+  .dark\:text-white\!:is(.dark *) {
+    color: var(--color-white) !important;
+  }
+  .dark\:scheme-dark:is(.dark *) {
+    color-scheme: dark;
+  }
+  .dark\:opacity-80:is(.dark *) {
+    opacity: 0.8;
+  }
+  .dark\:opacity-90:is(.dark *) {
+    opacity: 0.9;
+  }
+  .dark\:opacity-100:is(.dark *) {
+    opacity: 1;
+  }
+  .dark\:invert:is(.dark *) {
+    --tw-invert: invert(100%);
+    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);
+  }
+  .dark\:invert-\[\.65\]:is(.dark *) {
+    --tw-invert: invert(0.65);
+    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);
+  }
+  .dark\:filter-\[invert\(0\.65\)_brightness\(0\.9\)\]:is(.dark *) {
+    filter: invert(0.65) brightness(0.9);
+  }
+  .dark\:\[--cal-brand-accent\:\#000000\]:is(.dark *) {
+    --cal-brand-accent: #000;
+  }
+  .dark\:\[--cal-brand-emphasis\:\#e1e1e1\]:is(.dark *) {
+    --cal-brand-emphasis: #e1e1e1;
+  }
+  .dark\:\[--cal-brand-text\:\#000000\]:is(.dark *) {
+    --cal-brand-text: #000;
+  }
+  .dark\:\[--cal-brand-text\:black\]:is(.dark *) {
+    --cal-brand-text: black;
+  }
+  .dark\:\[--cal-brand\:\#FFFFFF\]:is(.dark *) {
+    --cal-brand: #fff;
+  }
+  .dark\:\[--cal-brand\:white\]:is(.dark *) {
+    --cal-brand: white;
+  }
+  .dark\:\[--disabled-gradient-background\:\#262626\]:is(.dark *) {
+    --disabled-gradient-background: #262626;
+  }
+  .dark\:\[--disabled-gradient-foreground\:\#393939\]:is(.dark *) {
+    --disabled-gradient-foreground: #393939;
+  }
+  .dark\:not-in-data-\[slot\=group\]\:bg-clip-border:is(.dark *):not(:where([data-slot="group"]) *) {
+    background-clip: border-box;
+  }
+  .dark\:selection\:bg-green-500:is(.dark *) ::selection {
+    background-color: var(--color-green-500);
+  }
+  .dark\:selection\:bg-green-500:is(.dark *)::selection {
+    background-color: var(--color-green-500);
+  }
+  .dark\:placeholder\:text-muted:is(.dark *)::placeholder {
+    color: var(--cal-text-muted);
+  }
+  .dark\:before\:border-white\/5:is(.dark *):before {
+    content: var(--tw-content);
+    border-color: #ffffff0d;
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:before\:border-white\/5:is(.dark *):before {
+      border-color: color-mix(in oklab, var(--color-white) 5%, transparent);
+    }
+  }
+  .dark\:before\:bg-cal-muted:is(.dark *):before {
+    content: var(--tw-content);
+    background-color: var(--cal-bg-muted);
+  }
+  .dark\:not-disabled\:before\:shadow-\[0_-1px_--theme\(--color-white\/4\%\)\]:is(.dark *):not(
+      :disabled
+    ):before {
+    content: var(--tw-content);
+    --tw-shadow: 0 -1px var(--tw-shadow-color, #ffffff0a);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:not-disabled\:before\:shadow-\[0_-1px_--theme\(--color-white\/4\%\)\]:is(.dark *):not(
+        :disabled
+      ):before {
+      --tw-shadow: 0 -1px var(--tw-shadow-color, color-mix(in oklab, var(--color-white) 4%, transparent));
+    }
+  }
+  .dark\:not-disabled\:before\:shadow-\[0_-1px_--theme\(--color-white\/4\%\)\]:is(.dark *):not(
+      :disabled
+    ):before {
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .dark\:not-disabled\:not-data-pressed\:before\:shadow-\[0_-1px_--theme\(--color-white\/4\%\)\]:is(
+      .dark *
+    ):not(:disabled):not([data-pressed]):before {
+    content: var(--tw-content);
+    --tw-shadow: 0 -1px var(--tw-shadow-color, #ffffff0a);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:not-disabled\:not-data-pressed\:before\:shadow-\[0_-1px_--theme\(--color-white\/4\%\)\]:is(
+        .dark *
+      ):not(:disabled):not([data-pressed]):before {
+      --tw-shadow: 0 -1px var(--tw-shadow-color, color-mix(in oklab, var(--color-white) 4%, transparent));
+    }
+  }
+  .dark\:not-disabled\:not-data-pressed\:before\:shadow-\[0_-1px_--theme\(--color-white\/4\%\)\]:is(
+      .dark *
+    ):not(:disabled):not([data-pressed]):before {
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .dark\:not-disabled\:not-active\:not-data-pressed\:before\:shadow-\[0_-1px_--theme\(--color-white\/8\%\)\]:is(
+      .dark *
+    ):not(:disabled):not(:active):not([data-pressed]):before {
+    content: var(--tw-content);
+    --tw-shadow: 0 -1px var(--tw-shadow-color, #ffffff14);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:not-disabled\:not-active\:not-data-pressed\:before\:shadow-\[0_-1px_--theme\(--color-white\/8\%\)\]:is(
+        .dark *
+      ):not(:disabled):not(:active):not([data-pressed]):before {
+      --tw-shadow: 0 -1px var(--tw-shadow-color, color-mix(in oklab, var(--color-white) 8%, transparent));
+    }
+  }
+  .dark\:not-disabled\:not-active\:not-data-pressed\:before\:shadow-\[0_-1px_--theme\(--color-white\/8\%\)\]:is(
+      .dark *
+    ):not(:disabled):not(:active):not([data-pressed]):before {
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .dark\:after\:bg-brand-accent:is(.dark *):after {
+    content: var(--tw-content);
+    background-color: var(--cal-brand-accent, white);
+  }
+  .dark\:after\:bg-inverted:is(.dark *):after {
+    content: var(--tw-content);
+    background-color: var(--cal-bg-inverted);
+  }
+  .dark\:checked\:bg-brand-default:is(.dark *):checked {
+    background-color: var(--cal-brand);
+  }
+  .dark\:checked\:after\:bg-brand-accent:is(.dark *):checked:after {
+    content: var(--tw-content);
+    background-color: var(--cal-brand-accent, white);
+  }
+  @media (hover: hover) {
+    .dark\:hover\:bg-darkgray-200:is(.dark *):hover {
+      background-color: var(--color-gray-200);
+    }
+    .dark\:hover\:bg-emphasis:is(.dark *):hover {
+      background-color: var(--cal-bg-emphasis);
+    }
+    .dark\:hover\:bg-gray-700:is(.dark *):hover {
+      background-color: var(--color-gray-700);
+    }
+    .dark\:hover\:bg-subtle:is(.dark *):hover {
+      background-color: var(--cal-bg-subtle);
+    }
+    .dark\:hover\:bg-transparent:is(.dark *):hover {
+      background-color: #0000;
+    }
+    .dark\:hover\:text-red-100:is(.dark *):hover {
+      color: var(--color-red-100);
+    }
+    .dark\:checked\:hover\:bg-brand-default:is(.dark *):checked:hover {
+      background-color: var(--cal-brand);
+    }
+    .dark\:checked\:hover\:text-\(--cal-brand\):is(.dark *):checked:hover {
+      color: var(--cal-brand);
+    }
+  }
+  .dark\:focus\:border-emphasis:is(.dark *):focus {
+    border-color: var(--cal-border-emphasis);
+  }
+  .disabled\:dark\:text-subtle:disabled:is(.dark *) {
+    color: var(--cal-text-subtle);
+  }
+  .dark\:not-has-disabled\:has-not-focus-visible\:not-has-aria-invalid\:before\:shadow-\[0_-1px_--theme\(--color-white\/8\%\)\]:is(
+      .dark *
+    ):not(:has(:disabled)):has(:not(:focus-visible)):not(:has([aria-invalid="true"])):before {
+    content: var(--tw-content);
+    --tw-shadow: 0 -1px var(--tw-shadow-color, #ffffff14);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:not-has-disabled\:has-not-focus-visible\:not-has-aria-invalid\:before\:shadow-\[0_-1px_--theme\(--color-white\/8\%\)\]:is(
+        .dark *
+      ):not(:has(:disabled)):has(:not(:focus-visible)):not(:has([aria-invalid="true"])):before {
+      --tw-shadow: 0 -1px var(--tw-shadow-color, color-mix(in oklab, var(--color-white) 8%, transparent));
+    }
+  }
+  .dark\:not-has-disabled\:has-not-focus-visible\:not-has-aria-invalid\:before\:shadow-\[0_-1px_--theme\(--color-white\/8\%\)\]:is(
+      .dark *
+    ):not(:has(:disabled)):has(:not(:focus-visible)):not(:has([aria-invalid="true"])):before {
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .dark\:has-aria-invalid\:ring-destructive\/24:is(.dark *):has([aria-invalid="true"]) {
+    --tw-ring-color: var(--destructive);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:has-aria-invalid\:ring-destructive\/24:is(.dark *):has([aria-invalid="true"]) {
+      --tw-ring-color: color-mix(in oklab, var(--destructive) 24%, transparent);
+    }
+  }
+  .dark\:data-\[state\=checked\]\:bg-brand-emphasis:is(.dark *)[data-state="checked"] {
+    background-color: var(--cal-brand-emphasis);
+  }
+  @media print {
+    .print\:hidden {
+      display: none;
+    }
+    .print\:h-full {
+      height: 100%;
+    }
+    .print\:w-full {
+      width: 100%;
+    }
+  }
+  @media (pointer: coarse) {
+    .pointer-coarse\:after\:absolute:after {
+      content: var(--tw-content);
+      position: absolute;
+    }
+    .pointer-coarse\:after\:size-full:after {
+      content: var(--tw-content);
+      width: 100%;
+      height: 100%;
+    }
+    .pointer-coarse\:after\:min-h-11:after {
+      content: var(--tw-content);
+      min-height: calc(var(--spacing) * 11);
+    }
+    .pointer-coarse\:after\:min-w-11:after {
+      content: var(--tw-content);
+      min-width: calc(var(--spacing) * 11);
+    }
+  }
+  .prose-headings\:text-emphasis :where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"] *)) {
+    color: var(--cal-text-emphasis);
+  }
+  .prose-h3\:font-cal :where(h3):not(:where([class~="not-prose"] *)) {
+    font-family: var(--font-cal);
+  }
+  .prose-h3\:text-white :where(h3):not(:where([class~="not-prose"] *)) {
+    color: var(--color-white);
+  }
+  .prose-a\:text-default :where(a):not(:where([class~="not-prose"] *)) {
+    color: var(--cal-text);
+  }
+  .prose-a\:text-white :where(a):not(:where([class~="not-prose"] *)) {
+    color: var(--color-white);
+  }
+  .prose-strong\:text-default :where(strong):not(:where([class~="not-prose"] *)),
+  .prose-code\:text-default :where(code):not(:where([class~="not-prose"] *)) {
+    color: var(--cal-text);
+  }
+  .radix-state-open\:rotate-45[data-state="open"] {
+    rotate: 45deg;
+  }
+  .radix-state-open\:rounded-r-md[data-state="open"] {
+    border-top-right-radius: var(--radius-md);
+    border-bottom-right-radius: var(--radius-md);
+  }
+  .radix-state-open\:text-blue-500[data-state="open"] {
+    color: var(--color-blue-500);
+  }
+  .radix-state-open\:ring-0[data-state="open"] {
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width))
+      var(--tw-ring-color, #3b82f680);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  @media (min-width: 48rem) {
+    .md\:radix-state-open\:rotate-0[data-state="open"] {
+      rotate: none;
+    }
+  }
+  .ltr\:radix-state-open\:rounded-r-\[--btn-group-radius\]:where(
+      :dir(ltr),
+      [dir="ltr"],
+      [dir="ltr"] *
+    )[data-state="open"] {
+    border-top-right-radius: --btn-group-radius;
+    border-bottom-right-radius: --btn-group-radius;
+  }
+  .ltr\:radix-state-open\:rounded-r-md:where(:dir(ltr), [dir="ltr"], [dir="ltr"] *)[data-state="open"] {
+    border-top-right-radius: var(--radius-md);
+    border-bottom-right-radius: var(--radius-md);
+  }
+  .rtl\:radix-state-open\:rounded-l-\[--btn-group-radius\]:where(
+      :dir(rtl),
+      [dir="rtl"],
+      [dir="rtl"] *
+    )[data-state="open"] {
+    border-top-left-radius: --btn-group-radius;
+    border-bottom-left-radius: --btn-group-radius;
+  }
+  .rtl\:radix-state-open\:rounded-l-md:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)[data-state="open"] {
+    border-top-left-radius: var(--radius-md);
+    border-bottom-left-radius: var(--radius-md);
+  }
+  @media (display-mode: standalone) {
+    .pwa\:bottom-\[max\(7rem\,_calc\(5rem_\+_env\(safe-area-inset-bottom\)\)\)\] {
+      bottom: max(7rem, calc(5rem + env(safe-area-inset-bottom)));
+    }
+    .pwa\:-mx-2 {
+      margin-inline: calc(var(--spacing) * -2);
+    }
+    .pwa\:pb-\[max\(0\.25rem\,env\(safe-area-inset-bottom\)\)\] {
+      padding-bottom: max(0.25rem, env(safe-area-inset-bottom));
+    }
+  }
+  html.todesktop .todesktop\:-mt-3 {
+    margin-top: calc(var(--spacing) * -3);
+  }
+  html.todesktop .todesktop\:mt-4 {
+    margin-top: calc(var(--spacing) * 4);
+  }
+  html.todesktop .todesktop\:mt-10 {
+    margin-top: calc(var(--spacing) * 10);
+  }
+  html.todesktop .todesktop\:block {
+    display: block;
+  }
+  html.todesktop .todesktop\:hidden {
+    display: none;
+  }
+  html.todesktop .todesktop\:flex-col-reverse {
+    flex-direction: column-reverse;
+  }
+  html.todesktop .todesktop\:\!bg-transparent {
+    background-color: #0000 !important;
+  }
+  html.todesktop .todesktop\:py-\[7px\] {
+    padding-block: 7px;
+  }
+  html.todesktop .todesktop\:\!text-blue-500 {
+    color: var(--color-blue-500) !important;
+  }
+  html.todesktop .todesktop\:\[-webkit-app-region\:drag\] {
+    -webkit-app-region: drag;
+  }
+  @media (hover: hover) {
+    html.todesktop .todesktop\:hover\:\!bg-transparent:hover {
+      background-color: #0000 !important;
+    }
+    html.todesktop .todesktop\:hover\:bg-transparent:hover {
+      background-color: #0000;
+    }
+  }
+  .\[\&_\.current-timezone\:before\]\:focus-within\:opacity-100 .current-timezone:before:focus-within {
+    opacity: 1;
+  }
+  @media (hover: hover) {
+    .\[\&_\.current-timezone\:before\]\:hover\:opacity-100 .current-timezone:before:hover {
+      opacity: 1;
+    }
+  }
+  .\[\&_\.modalsticky\]\:sticky .modalsticky {
+    position: sticky;
+  }
+  .\[\&_\.modalsticky\]\:right-0 .modalsticky {
+    right: calc(var(--spacing) * 0);
+  }
+  .\[\&_\.modalsticky\]\:bottom-0 .modalsticky {
+    bottom: calc(var(--spacing) * 0);
+  }
+  .\[\&_\.modalsticky\]\:left-0 .modalsticky {
+    left: calc(var(--spacing) * 0);
+  }
+  .\[\&_\.modalsticky\]\:-mx-8 .modalsticky {
+    margin-inline: calc(var(--spacing) * -8);
+  }
+  .\[\&_\.modalsticky\]\:border-t .modalsticky {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+  }
+  .\[\&_\.modalsticky\]\:border-t-subtle .modalsticky {
+    border-top-color: var(--cal-border-subtle);
+  }
+  .\[\&_\.modalsticky\]\:bg-default .modalsticky {
+    background-color: var(--cal-bg);
+  }
+  .\[\&_\.modalsticky\]\:px-8 .modalsticky {
+    padding-inline: calc(var(--spacing) * 8);
+  }
+  .\[\&_\.modalsticky\]\:py-4 .modalsticky {
+    padding-block: calc(var(--spacing) * 4);
+  }
+  .\[\&_\[cmdk-group-heading\]\]\:text-muted [cmdk-group-heading] {
+    color: var(--cal-text-muted);
+  }
+  :is(.\*\*\:\[\&_\[cmdk-group-heading\]\]\:px-2 *) [cmdk-group-heading] {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+  :is(.\*\*\:\[\&_\[cmdk-group-heading\]\]\:py-1\.5 *) [cmdk-group-heading] {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
+  :is(.\*\*\:\[\&_\[cmdk-group-heading\]\]\:text-xs *) [cmdk-group-heading] {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  :is(.\*\*\:\[\&_\[cmdk-group-heading\]\]\:font-medium *) [cmdk-group-heading] {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+  :is(.\*\*\:\[\&_\[cmdk-group\]\]\:px-2 *) [cmdk-group] {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+  .\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~ [cmdk-group] {
+    padding-top: calc(var(--spacing) * 0);
+  }
+  .\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
+    height: calc(var(--spacing) * 5);
+  }
+  .\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
+    width: calc(var(--spacing) * 5);
+  }
+  :is(.\*\*\:\[\&_\[cmdk-input\]\]\:h-12 *) [cmdk-input] {
+    height: calc(var(--spacing) * 12);
+  }
+  :is(.\*\*\:\[\&_\[cmdk-item\]\]\:px-2 *) [cmdk-item] {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+  :is(.\*\*\:\[\&_\[cmdk-item\]\]\:py-3 *) [cmdk-item] {
+    padding-block: calc(var(--spacing) * 3);
+  }
+  .\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
+    height: calc(var(--spacing) * 5);
+  }
+  .\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
+    width: calc(var(--spacing) * 5);
+  }
+  .\[\&_a\]\:text-blue-500 a {
+    color: var(--color-blue-500);
+  }
+  .\[\&_a\]\:underline a {
+    text-decoration-line: underline;
+  }
+  @media (hover: hover) {
+    .\[\&_a\]\:hover\:text-blue-600 a:hover {
+      color: var(--color-blue-600);
+    }
+  }
+  .\[\&_iframe\]\:h-full iframe {
+    height: 100%;
+  }
+  .\[\&_iframe\]\:min-h-\[315px\] iframe {
+    min-height: 315px;
+  }
+  .\[\&_iframe\]\:w-full iframe {
+    width: 100%;
+  }
+  .\[\&_img\]\:h-\[15px\] img {
+    height: 15px;
+  }
+  .\[\&_input\]\:mb-0 input {
+    margin-bottom: calc(var(--spacing) * 0);
+  }
+  .\[\&_input\]\:leading-4 input {
+    --tw-leading: calc(var(--spacing) * 4);
+    line-height: calc(var(--spacing) * 4);
+  }
+  .\[\&_label\]\:my-1 label {
+    margin-block: calc(var(--spacing) * 1);
+  }
+  .\[\&_label\]\:font-normal label {
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
+  .\[\&_svg\]\:pointer-events-none svg {
+    pointer-events: none;
+  }
+  .\[\&_svg\]\:invisible svg {
+    visibility: hidden;
+  }
+  .\[\&_svg\]\:shrink-0 svg {
+    flex-shrink: 0;
+  }
+  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3 svg:not([class*="size-"]) {
+    width: calc(var(--spacing) * 3);
+    height: calc(var(--spacing) * 3);
+  }
+  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*="size-"]) {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+  }
+  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4\.5 svg:not([class*="size-"]) {
+    width: calc(var(--spacing) * 4.5);
+    height: calc(var(--spacing) * 4.5);
+  }
+  .\[\&_tr\:last-child\]\:border-0 tr:last-child {
+    border-style: var(--tw-border-style);
+    border-width: 0;
+  }
+  .\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button {
+    appearance: none;
+  }
+  .\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button {
+    appearance: none;
+  }
+  .\[\&\:\:-webkit-search-cancel-button\]\:appearance-none::-webkit-search-cancel-button {
+    appearance: none;
+  }
+  .\[\&\:\:-webkit-search-decoration\]\:appearance-none::-webkit-search-decoration {
+    appearance: none;
+  }
+  .\[\&\:\:-webkit-search-results-button\]\:appearance-none::-webkit-search-results-button {
+    appearance: none;
+  }
+  .\[\&\:\:-webkit-search-results-decoration\]\:appearance-none::-webkit-search-results-decoration {
+    appearance: none;
+  }
+  .\[\&\:focus-within\]\:border-emphasis:focus-within {
+    border-color: var(--cal-border-emphasis);
+  }
+  .\[\&\:focus-within\]\:border-subtle:focus-within {
+    border-color: var(--cal-border-subtle);
+  }
+  .\[\&\:focus-within\]\:shadow-outline-gray-focused:focus-within {
+    --tw-shadow: var(--shadow-outline-gray-focused);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .\[\&\:focus-within\]\:ring-brand-default:focus-within {
+    --tw-ring-color: var(--cal-brand);
+  }
+  .\[\&\:has\(\+_input\:hover\)\]\:border-emphasis:has(+ input:hover) {
+    border-color: var(--cal-border-emphasis);
+  }
+  .\[\&\:has\(\+_input\:hover\)\]\:border-r-default:has(+ input:hover) {
+    border-right-color: var(--cal-border);
+  }
+  .\[\&\:has\(\:disabled\)\]\:cursor-not-allowed:has(:disabled) {
+    cursor: not-allowed;
+  }
+  .\[\&\:has\(\:disabled\)\]\:bg-subtle:has(:disabled) {
+    background-color: var(--cal-bg-subtle);
+  }
+  @media (hover: hover) {
+    .\[\&\:has\(\:disabled\)\]\:hover\:border-default:has(:disabled):hover {
+      border-color: var(--cal-border);
+    }
+  }
+  .\[\&\:has\(\:disabled\,\:focus-visible\,\[aria-invalid\]\)\]\:shadow-none:has(
+      :disabled,
+      :focus-visible,
+      [aria-invalid]
+    ) {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role="checkbox"]) {
+    padding-right: calc(var(--spacing) * 0);
+  }
+  .\[\&\:has\(input\:checked\)\]\:border-emphasis:has(input:checked) {
+    border-color: var(--cal-border-emphasis);
+  }
+  .\[\&\:has\(input\:checked\)\]\:border-error:has(input:checked) {
+    border-color: var(--cal-border-error);
+  }
+  .\[\&\:is\(\:active\,\[data-pressed\]\)\]\:inset-shadow-\[0_1px_--theme\(--color-black\/8\%\)\]:is(
+      :active,
+      [data-pressed]
+    ) {
+    --tw-inset-shadow: inset 0 1px var(--tw-inset-shadow-color, oklab(17.7638% -2.23517e-8 0/0.08));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .\[\&\:is\(\:disabled\,\:active\,\[data-pressed\]\)\]\:shadow-none:is(:disabled, :active, [data-pressed]) {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow),
+      var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .\[\&\:is\(\:hover\,\[data-pressed\]\)\]\:border-destructive\/32:is(:hover, [data-pressed]) {
+    border-color: var(--destructive);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .\[\&\:is\(\:hover\,\[data-pressed\]\)\]\:border-destructive\/32:is(:hover, [data-pressed]) {
+      border-color: color-mix(in oklab, var(--destructive) 32%, transparent);
+    }
+  }
+  .\[\&\:is\(\:hover\,\[data-pressed\]\)\]\:bg-accent\/50:is(:hover, [data-pressed]) {
+    background-color: var(--accent);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .\[\&\:is\(\:hover\,\[data-pressed\]\)\]\:bg-accent\/50:is(:hover, [data-pressed]) {
+      background-color: color-mix(in oklab, var(--accent) 50%, transparent);
+    }
+  }
+  .\[\&\:is\(\:hover\,\[data-pressed\]\)\]\:bg-destructive\/4:is(:hover, [data-pressed]) {
+    background-color: var(--destructive);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .\[\&\:is\(\:hover\,\[data-pressed\]\)\]\:bg-destructive\/4:is(:hover, [data-pressed]) {
+      background-color: color-mix(in oklab, var(--destructive) 4%, transparent);
+    }
+  }
+  .dark\:\[\&\:is\(\:hover\,\[data-pressed\]\)\]\:bg-input\/64:is(.dark *):is(:hover, [data-pressed]) {
+    background-color: var(--input);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .dark\:\[\&\:is\(\:hover\,\[data-pressed\]\)\]\:bg-input\/64:is(.dark *):is(:hover, [data-pressed]) {
+      background-color: color-mix(in oklab, var(--input) 64%, transparent);
+    }
+  }
+  :is(.\*\*\:\[input\]\:leading-none *):is(input) {
+    --tw-leading: 1;
+    line-height: 1;
+  }
+  @media (hover: hover) {
+    .hover\:\[\&\:not\(\:disabled\)\]\:bg-subtle:hover:not(:disabled) {
+      background-color: var(--cal-bg-subtle);
+    }
+  }
+  .focus\:\[\&\:not\(\:disabled\)\]\:bg-subtle:focus:not(:disabled) {
+    background-color: var(--cal-bg-subtle);
+  }
+  .\[\&\>\*\]\:border-subtle > * {
+    border-color: var(--cal-border-subtle);
+  }
+  .\[\&\>\*\]\:bg-emphasis > * {
+    background-color: var(--cal-bg-emphasis);
+  }
+  .\[\&\>\*\]\:text-emphasis > * {
+    color: var(--cal-text-emphasis);
+  }
+  .\[\&\>\*\:first-child\]\:mt-1 > :first-child {
+    margin-top: calc(var(--spacing) * 1);
+  }
+  .\[\&\>\*\:first-child\]\:rounded-t-md > :first-child {
+    border-top-left-radius: var(--radius-md);
+    border-top-right-radius: var(--radius-md);
+  }
+  .\[\&\>\*\:first-child\]\:rounded-l-\(--btn-group-radius\) > :first-child {
+    border-top-left-radius: var(--btn-group-radius);
+    border-bottom-left-radius: var(--btn-group-radius);
+  }
+  .\[\&\>\*\:first-child\]\:p-0\! > :first-child {
+    padding: calc(var(--spacing) * 0) !important;
+  }
+  .rtl\:\[\&\>\*\:first-child\]\:rounded-l-none:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) > :first-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .rtl\:\[\&\>\*\:first-child\]\:rounded-r-\(--btn-group-radius\):where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)
+    > :first-child {
+    border-top-right-radius: var(--btn-group-radius);
+    border-bottom-right-radius: var(--btn-group-radius);
+  }
+  .\[\&\>\*\:last-child\]\:mb-1 > :last-child {
+    margin-bottom: calc(var(--spacing) * 1);
+  }
+  .\[\&\>\*\:last-child\]\:h-4 > :last-child {
+    height: calc(var(--spacing) * 4);
+  }
+  .\[\&\>\*\:last-child\]\:w-4 > :last-child {
+    width: calc(var(--spacing) * 4);
+  }
+  .\[\&\>\*\:last-child\]\:rotate-180 > :last-child {
+    rotate: 180deg;
+  }
+  .\[\&\>\*\:last-child\]\:rounded-r-\(--btn-group-radius\) > :last-child {
+    border-top-right-radius: var(--btn-group-radius);
+    border-bottom-right-radius: var(--btn-group-radius);
+  }
+  .\[\&\>\*\:last-child\]\:rounded-b-md > :last-child {
+    border-bottom-right-radius: var(--radius-md);
+    border-bottom-left-radius: var(--radius-md);
+  }
+  .\[\&\>\*\:last-child\]\:rounded-b-xl > :last-child {
+    border-bottom-right-radius: var(--radius-xl);
+    border-bottom-left-radius: var(--radius-xl);
+  }
+  .\[\&\>\*\:last-child\]\:border-b > :last-child {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+  .\[\&\>\*\:last-child\]\:transition-transform > :last-child {
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .rtl\:\[\&\>\*\:last-child\]\:rounded-l-\(--btn-group-radius\):where(:dir(rtl), [dir="rtl"], [dir="rtl"] *)
+    > :last-child {
+    border-top-left-radius: var(--btn-group-radius);
+    border-bottom-left-radius: var(--btn-group-radius);
+  }
+  .rtl\:\[\&\>\*\:last-child\]\:rounded-r-none:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) > :last-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .\[\&\>\*\:not\(\:first-child\)\]\:-ml-px > :not(:first-child) {
+    margin-left: -1px;
+  }
+  .\[\&\>\*\:not\(\:first-child\)\]\:hidden > :not(:first-child) {
+    display: none;
+  }
+  .\[\&\>button\]\:right-6 > button {
+    right: calc(var(--spacing) * 6);
+  }
+  .\[\&\>button\]\:left-auto > button {
+    left: auto;
+  }
+  .\[\&\>button\]\:mt-0 > button {
+    margin-top: calc(var(--spacing) * 0);
+  }
+  .\[\&\>button\]\:transform > button {
+    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
+  }
+  .\[\&\>div\]\:gap-0 > div {
+    gap: calc(var(--spacing) * 0);
+  }
+  @media (hover: hover) {
+    .\[\&\[aria-checked\=\'false\'\]\]\:hover\:text-emphasis[aria-checked="false"]:hover {
+      color: var(--cal-text-emphasis);
+    }
+  }
+  .\[\&\[aria-current\=\'page\'\]\]\:\!bg-transparent[aria-current="page"] {
+    background-color: #0000 !important;
+  }
+  .\[\&\[aria-current\=\'page\'\]\]\:bg-emphasis[aria-current="page"] {
+    background-color: var(--cal-bg-emphasis);
+  }
+  .\[\&\[aria-current\=\'page\'\]\]\:bg-subtle[aria-current="page"] {
+    background-color: var(--cal-bg-subtle);
+  }
+  .\[\&\[aria-current\=\'page\'\]\]\:text-emphasis[aria-current="page"] {
+    color: var(--cal-text-emphasis);
+  }
+  html.todesktop .todesktop\:\[\&\[aria-current\=\'page\'\]\]\:bg-emphasis[aria-current="page"] {
+    background-color: var(--cal-bg-emphasis);
+  }
+  @media (max-width: 1270px) {
+    .\[\@media\(max-width\:1270px\)\]\:grid-cols-3 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+  @media (max-width: 260px) {
+    .\[\@media\(max-width\:260px\)\]\:w-full {
+      width: 100%;
+    }
+    .\[\@media\(max-width\:260px\)\]\:justify-center {
+      justify-content: center;
+    }
+  }
+  @media (max-width: 500px) {
+    .\[\@media\(max-width\:500px\)\]\:grid-cols-1 {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+  }
+  @media (max-width: 730px) {
+    .\[\@media\(max-width\:730px\)\]\:grid-cols-1 {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+  }
+  input:hover + .\[input\:hover_\+_\&\]\:border-emphasis {
+    border-color: var(--cal-border-emphasis);
+  }
+  input:hover + .\[input\:hover_\+_\&\]\:border-l-default {
+    border-left-color: var(--cal-border);
+  }
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  .transition-max-width {
+    transition-property: max-width;
+  }
 }
-
-/* latin-ext */
-@font-face {
-  font-family: '__Inter_d65c78';
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url(./fonts/6d93bde91c0c2823-s.woff2) format('woff2');
-  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+:root {
+  --radius: 0.625rem;
+  --background: oklch(100% 0 0);
+  --foreground: oklch(21% 0.006 285.885);
+  --card: oklch(100% 0 0);
+  --card-foreground: oklch(21% 0.006 285.885);
+  --popover: oklch(100% 0 0);
+  --popover-foreground: oklch(21% 0.006 285.885);
+  --primary: oklch(27.4% 0.006 286.033);
+  --primary-foreground: oklch(98.5% 0 0);
+  --secondary: oklch(0% 0 0/0.04);
+  --secondary-foreground: oklch(21% 0.006 285.885);
+  --muted: oklch(0% 0 0/0.04);
+  --muted-foreground: oklch(44.2% 0.017 285.786);
+  --accent: oklch(0% 0 0/0.04);
+  --accent-foreground: oklch(21% 0.006 285.885);
+  --destructive: oklch(63.7% 0.237 25.331);
+  --destructive-foreground: oklch(50.5% 0.213 27.518);
+  --info: oklch(62.3% 0.214 259.815);
+  --info-foreground: oklch(48.8% 0.243 264.376);
+  --success: oklch(69.6% 0.17 162.48);
+  --success-foreground: oklch(50.8% 0.118 165.612);
+  --warning: oklch(76.9% 0.188 70.08);
+  --warning-foreground: oklch(55.5% 0.163 48.998);
+  --border: oklch(0% 0 0/0.1);
+  --input: oklch(0% 0 0/0.1);
+  --ring: oklch(70.5% 0.015 286.067);
+  --chart-1: oklch(64.6% 0.222 41.116);
+  --chart-2: oklch(60% 0.118 184.704);
+  --chart-3: oklch(39.8% 0.07 227.392);
+  --chart-4: oklch(82.8% 0.189 84.429);
+  --chart-5: oklch(76.9% 0.188 70.08);
+  --sidebar: oklch(98.5% 0 0);
+  --sidebar-foreground: oklch(21% 0.006 285.885);
+  --sidebar-primary: oklch(27.4% 0.006 286.033);
+  --sidebar-primary-foreground: oklch(98.5% 0 0);
+  --sidebar-accent: oklch(0% 0 0/0.04);
+  --sidebar-accent-foreground: oklch(21% 0.006 285.885);
+  --sidebar-border: oklch(0% 0 0/0.1);
+  --sidebar-ring: oklch(70.5% 0.015 286.067);
+  --code: oklch(100% 0 0);
+  --code-foreground: var(--foreground);
+  --code-highlight: oklch(0% 0 0/0.04);
 }
-
-/* latin */
-@font-face {
-  font-family: '__Inter_d65c78';
-  font-style: normal;
-  font-weight: 100 900;
-  font-display: swap;
-  src: url(./fonts/a34f9d1faa5f3315-s.p.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+.dark {
+  --background: oklch(14.1% 0.005 285.823);
+  --foreground: oklch(96.7% 0.001 286.375);
+  --card: #151518;
+  --card-foreground: oklch(96.7% 0.001 286.375);
+  --popover: oklch(21% 0.006 285.885);
+  --popover-foreground: oklch(96.7% 0.001 286.375);
+  --primary: oklch(96.7% 0.001 286.375);
+  --primary-foreground: oklch(21% 0.006 285.885);
+  --secondary: oklch(100% 0 0/0.08);
+  --secondary-foreground: oklch(96.7% 0.001 286.375);
+  --muted: oklch(100% 0 0/0.08);
+  --muted-foreground: oklch(70.5% 0.015 286.067);
+  --accent: oklch(100% 0 0/0.08);
+  --accent-foreground: oklch(96.7% 0.001 286.375);
+  --destructive: oklch(63.7% 0.237 25.331);
+  --destructive-foreground: oklch(70.4% 0.191 22.216);
+  --info: oklch(62.3% 0.214 259.815);
+  --info-foreground: oklch(70.7% 0.165 254.624);
+  --success: oklch(69.6% 0.17 162.48);
+  --success-foreground: oklch(76.5% 0.177 163.223);
+  --warning: oklch(76.9% 0.188 70.08);
+  --warning-foreground: oklch(82.8% 0.189 84.429);
+  --border: oklch(100% 0 0/0.12);
+  --input: oklch(100% 0 0/0.12);
+  --ring: oklch(55.2% 0.016 285.938);
+  --chart-1: oklch(48.8% 0.243 264.376);
+  --chart-2: oklch(69.6% 0.17 162.48);
+  --chart-3: oklch(76.9% 0.188 70.08);
+  --chart-4: oklch(62.7% 0.265 303.9);
+  --chart-5: oklch(64.5% 0.246 16.439);
+  --sidebar: #0e0e10;
+  --sidebar-foreground: oklch(96.7% 0.001 286.375);
+  --sidebar-primary: oklch(96.7% 0.001 286.375);
+  --sidebar-primary-foreground: oklch(21% 0.006 285.885);
+  --sidebar-accent: oklch(100% 0 0/0.08);
+  --sidebar-accent-foreground: oklch(96.7% 0.001 286.375);
+  --sidebar-border: oklch(100% 0 0/0.12);
+  --sidebar-ring: oklch(70.5% 0.015 286.067);
+  --code: #151518;
+  --code-foreground: var(--foreground);
+  --code-highlight: oklch(100% 0 0/0.08);
 }
-
-@font-face {
-  font-family: '__Inter_Fallback_d65c78';
-  src: local("Arial");
-  ascent-override: 90.20%;
-  descent-override: 22.48%;
-  line-gap-override: 0.00%;
-  size-adjust: 107.40%
+@property --tw-animation-delay {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0s;
 }
-
-.__className_d65c78 {
-  font-family: '__Inter_d65c78', '__Inter_Fallback_d65c78';
-  font-style: normal
+@property --tw-animation-direction {
+  syntax: "*";
+  inherits: false;
+  initial-value: normal;
 }
-
-.__variable_d65c78 {
-  --font-inter: '__Inter_d65c78', '__Inter_Fallback_d65c78'
+@property --tw-animation-duration {
+  syntax: "*";
+  inherits: false;
 }
-
-/*!********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
-  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[3].use[1]!../../node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[12].oneOf[3].use[2]!../../node_modules/next/font/local/target.css?{"path":"app/layout.tsx","import":"","arguments":[{"src":"../fonts/CalSans-SemiBold.woff2","variable":"--font-cal","preload":true,"display":"block","weight":"600"}],"variableName":"calFont"} ***!
-  \********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
-@font-face {
-  font-family: '__calFont_a90182';
-  src: url(./fonts/90475aac776488b6-s.p.woff2) format('woff2');
-  font-display: block;
-  font-weight: 600;
+@property --tw-animation-fill-mode {
+  syntax: "*";
+  inherits: false;
+  initial-value: none;
 }
-
-@font-face {
-  font-family: '__calFont_Fallback_a90182';
-  src: local("Arial");
-  ascent-override: 98.60%;
-  descent-override: 19.72%;
-  line-gap-override: 0.00%;
-  size-adjust: 101.42%
+@property --tw-animation-iteration-count {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
 }
-
-.__className_a90182 {
-  font-family: '__calFont_a90182', '__calFont_Fallback_a90182';
-  font-weight: 600
+@property --tw-enter-blur {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
 }
-
-.__variable_a90182 {
-  --font-cal: '__calFont_a90182', '__calFont_Fallback_a90182'
+@property --tw-enter-opacity {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-enter-rotate {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-enter-scale {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-enter-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-enter-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-exit-blur {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-exit-opacity {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-exit-rotate {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-exit-scale {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-exit-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-exit-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+:root,
+:host {
+  --radius: 0.625rem;
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-none: 0px;
+  --cal-bg-emphasis: #e5e7eb;
+  --cal-bg: #fff;
+  --cal-bg-subtle: #eeeff2;
+  --cal-bg-muted: #f6f7f9;
+  --cal-bg-inverted: #070a0d;
+  --cal-bg-primary: #1d2735;
+  --cal-bg-primary-emphasis: #3c3e44;
+  --cal-bg-primary-muted: #eeeff2;
+  --cal-bg-brand: #1d2735;
+  --cal-bg-brand-emphasis: #3c3e44;
+  --cal-bg-brand-muted: #eeeff2;
+  --cal-bg-semantic-info-subtle: #f1f7fe;
+  --cal-bg-semantic-info-emphasis: #0d1473;
+  --cal-bg-semantic-success-subtle: #e4f7f3;
+  --cal-bg-semantic-success-emphasis: #19a974;
+  --cal-bg-semantic-attention-subtle: #ffedd6;
+  --cal-bg-semantic-attention-emphasis: #9b3412;
+  --cal-bg-semantic-error-subtle: #fee1e1;
+  --cal-bg-semantic-error-emphasis: #641717;
+  --cal-bg-visualization-1-subtle: #fce8f4;
+  --cal-bg-visualization-1-emphasis: #ec4699;
+  --cal-bg-visualization-2-subtle: #dfd4fc;
+  --cal-bg-visualization-2-emphasis: #6634ef;
+  --cal-bg-visualization-3-subtle: #d4e3fc;
+  --cal-bg-visualization-3-emphasis: #4252ff;
+  --cal-bg-visualization-4-subtle: #e4f7f3;
+  --cal-bg-visualization-4-emphasis: #19a974;
+  --cal-bg-visualization-5-subtle: #fef9c3;
+  --cal-bg-visualization-5-emphasis: #e7b008;
+  --cal-bg-visualization-6-subtle: #ffedd6;
+  --cal-bg-visualization-6-emphasis: #f97415;
+  --cal-bg-visualization-7-subtle: #fec8c8;
+  --cal-bg-visualization-7-emphasis: #ef4343;
+  --cal-bg-info: #dde7fd;
+  --cal-bg-success: #e4fbed;
+  --cal-bg-attention: #ffedd6;
+  --cal-bg-error: #f9e3e1;
+  --cal-bg-dark-error: #772522;
+  --cal-bg-launch-dark: #0d0c27;
+  --cal-border-emphasis: #9ca3b0;
+  --cal-border: #d1d5db;
+  --cal-border-subtle: #e5e7eb;
+  --cal-border-muted: #eeeff2;
+  --cal-border-error: #fec8c8;
+  --cal-border-semantic-error: #fec8c8;
+  --cal-border-semantic-attention-subtle: #fed6a9;
+  --cal-border-semantic-error-subtle: #fec8c8;
+  --cal-border-booker: var(--cal-border-subtle);
+  --cal-text-emphasis: #070a0d;
+  --cal-text: #3c3e44;
+  --cal-text-subtle: #6b7280;
+  --cal-text-muted: #9ca3b0;
+  --cal-text-inverted: #fff;
+  --cal-text-semantic-info: #0d1473;
+  --cal-text-semantic-success: #096738;
+  --cal-text-semantic-attention: #9b3412;
+  --cal-text-semantic-error: #641717;
+  --cal-text-visualization-1: #720d3c;
+  --cal-text-visualization-2: #40067a;
+  --cal-text-visualization-3: #06327a;
+  --cal-text-visualization-4: #126d34;
+  --cal-text-visualization-5: #7b5d04;
+  --cal-text-visualization-6: #7c3403;
+  --cal-text-visualization-7: #750a0a;
+  --cal-text-info: #243c84;
+  --cal-text-success: #285239;
+  --cal-text-attention: #74331b;
+  --cal-text-error: #811d1d;
+  --cal-brand: #111827;
+  --cal-brand-emphasis: #0f0f0f;
+  --cal-brand-text: #fff;
+  --shadow-dropdown: 0px 5px 20px 0px #0000001a, 0px 10px 40px 0px #00000008;
+  --shadow-switch-thumb: 0px 0.8px 0.8px 0px #0000001a, 0px 0.8px 3.2px 0px #00000014;
+  --shadow-solid-gray-rested: 0px 2px 3px 0px #0000000f, 0px 1px 1px 0px #00000014, 1px 4px 8px 0px #0000001f,
+    0px 2px 0.4px 0px #ffffff29 inset, 0px -1.5px 2px 0px #0006 inset;
+  --shadow-solid-gray-hover: 0px 2px 3px 0px #0000000f, 0px 1px 1px 0px #00000014, 1px 4px 8px 0px #0000001f,
+    0px 2px 0.4px 0px #ffffff29 inset, 0px -2px 2px 0px #0006 inset;
+  --shadow-solid-gray-active: 0px 2px 3px 0px #0006 inset, 0px 0px 2px 1px #0006 inset;
+  --shadow-outline-gray-rested: 0px 2px 3px 0px #00000008, 0px 2px 2px -1px #00000008;
+  --shadow-outline-gray-hover: 0px 2px 3px 0px #00000008, 0px 2px 2px -1px #00000008;
+  --shadow-outline-gray-active: 0px 2px 1px 0px #0000000d inset;
+  --shadow-outline-gray-focused: 0px 0px 0px 1px #fff3, 0px 0px 0px 2px #0000001a;
+  --shadow-outline-red-rested: 0px 2px 3px 0px #00000008, 0px 2px 2px -1px #00000008;
+  --shadow-outline-red-hover: 0px 1px 1px 0px #0000000f, 0px 2px 3px 0px #00000014;
+  --shadow-outline-red-active: 0px 1px 1px 0px #7f1d1d0f, 0px 0px 3px 0px #7f1d1d14,
+    0px 2px 2px 1px #7f1d1d0f inset;
+  --shadow-elevation-low: 0px 1px 1px 0px #00000012, 0px 1px 2px 0px #00000014, 0px 2px 2px 0px #0000001a,
+    0px 0px 8px 0px #0000000d;
+  --shadow-button-solid-brand-default: 0px 2px 3px 0px #0000000f, 0px 1px 1px 0px #00000014,
+    1px 4px 8px 0px #0000001f, 0px 2px 0.4px 0px #ffffff1f inset, 0px -3px 2px 0px #0000000a inset;
+  --shadow-button-solid-brand-hover: 0px 1px 1px 0px #0000001a, 0px 2px 3px 0px #00000014,
+    1px 4px 8px 0px #0000001f, 0px -3px 2px 0px #0000001a inset, 0px 2px 0.4px 0px #ffffff3d inset;
+  --shadow-button-solid-brand-active: 0px 3px 1px 0px #0000001a inset, 0px 0px 2px 0px #0000001a inset;
+  --shadow-button-solid-brand-focused: 0px 0px 0px 1px #fff6, 0px 0px 0px 2px #0003, 0px 1px 1px 0px #0000001a,
+    0px 2px 3px 0px #00000014, 1px 4px 8px 0px #0000001f, 0px -3px 2px 0px #0000001a inset,
+    0px 2px 0.4px 0px #ffffff3d inset;
+  --shadow-button-outline-red-focused: 0px 0px 0px 1px #ffffff52, 0px 0px 0px 2px #dc262626;
+  --fill-emphasis: var(--cal-text-emphasis, #111827);
+  --fill-default: var(--cal-text, #374151);
+  --fill-subtle: var(--cal-text-subtle, #6b7280);
+  --fill-muted: var(--cal-text-muted, #9ca3af);
+  --fill-inverted: var(--cal-text-inverted, white);
+  --fill-info: var(--cal-text-info, #253985);
+  --fill-success: var(--cal-text-success, #285231);
+  --fill-attention: var(--cal-text-attention, #73321b);
+  --fill-error: var(--cal-text-error, #752522);
+  --fill-brand: var(--cal-brand-text);
+}
+.dark {
+  --cal-bg-emphasis: #404040;
+  --cal-bg: #0f0f0f;
+  --cal-bg-subtle: #262626;
+  --cal-bg-muted: #171717;
+  --cal-bg-inverted: #fafafa;
+  --cal-bg-primary: #f5f5f5;
+  --cal-bg-primary-emphasis: #a3a3a3;
+  --cal-bg-primary-muted: #262626;
+  --cal-bg-brand: #fafafa;
+  --cal-bg-brand-emphasis: #f5f5f5;
+  --cal-bg-brand-muted: #f5f5f5;
+  --cal-bg-semantic-info-subtle: #040625;
+  --cal-bg-semantic-info-emphasis: #8197f8;
+  --cal-bg-semantic-success-subtle: #054d26;
+  --cal-bg-semantic-success-emphasis: #19a974;
+  --cal-bg-semantic-attention-subtle: #260f03;
+  --cal-bg-semantic-attention-emphasis: #fb923c;
+  --cal-bg-semantic-error-subtle: #230606;
+  --cal-bg-semantic-error-emphasis: #f87272;
+  --cal-bg-visualization-1-subtle: #9b174c;
+  --cal-bg-visualization-1-emphasis: #ec4699;
+  --cal-bg-visualization-2-subtle: #1d0a6b;
+  --cal-bg-visualization-2-emphasis: #6634ef;
+  --cal-bg-visualization-3-subtle: #17209b;
+  --cal-bg-visualization-3-emphasis: #4252ff;
+  --cal-bg-visualization-4-subtle: #096738;
+  --cal-bg-visualization-4-emphasis: #19a974;
+  --cal-bg-visualization-5-subtle: #733f12;
+  --cal-bg-visualization-5-emphasis: #e7b008;
+  --cal-bg-visualization-6-subtle: #67250f;
+  --cal-bg-visualization-6-emphasis: #f97415;
+  --cal-bg-visualization-7-subtle: #981b1b;
+  --cal-bg-visualization-7-emphasis: #ef4343;
+  --cal-bg-info: #253883;
+  --cal-bg-success: #285231;
+  --cal-bg-attention: #74331b;
+  --cal-bg-error: #772522;
+  --cal-bg-dark-error: #772522;
+  --cal-bg-launch-dark: #0d0c27;
+  --cal-border: #4d4d4d;
+  --cal-border-muted: #171717;
+  --cal-border-subtle: #262626;
+  --cal-border-emphasis: #737373;
+  --cal-border-semantic-error: #641717;
+  --cal-border-semantic-attention-subtle: #67250f;
+  --cal-border-semantic-error-subtle: #641717;
+  --cal-border-error: #641717;
+  --cal-border-booker: var(--cal-border-subtle);
+  --cal-text-emphasis: #fafafa;
+  --cal-text: #d4d4d4;
+  --cal-text-subtle: #a3a3a3;
+  --cal-text-muted: #a3a3a3;
+  --cal-text-inverted: #000;
+  --cal-text-semantic-info: #8197f8;
+  --cal-text-semantic-success: #50c39f;
+  --cal-text-semantic-attention: #fb923c;
+  --cal-text-semantic-error: #f87272;
+  --cal-text-semantic-info-emphasis: #06327a;
+  --cal-text-semantic-success-emphasis: #126d34;
+  --cal-text-semantic-attention-emphasis: #7c3403;
+  --cal-text-semantic-error-emphasis: #750a0a;
+  --cal-text-info: #dee9fc;
+  --cal-text-success: #e4fbe9;
+  --cal-text-attention: #fcefd9;
+  --cal-text-error: #f9e3e1;
+  --cal-brand: #fff;
+  --cal-brand-emphasis: #9ca3b0;
+  --cal-brand-text: #000;
+  --fill-emphasis: var(--cal-text-emphasis);
+  --fill-default: var(--cal-text);
+  --fill-subtle: var(--cal-text-subtle);
+  --fill-muted: var(--cal-text-muted);
+  --fill-inverted: var(--cal-text-inverted);
+  --fill-info: var(--cal-text-info);
+  --fill-success: var(--cal-text-success);
+  --fill-attention: var(--cal-text-attention);
+  --fill-error: var(--cal-text-error);
+  --fill-brand: var(--cal-brand-text);
 }
-
-/*!*********************************************************************************************************************************************************************************************************************************************************************!*\
-  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[3]!./styles/raqb.css ***!
-  \*********************************************************************************************************************************************************************************************************************************************************************/
 .cal-query-builder .query-builder,
 .cal-query-builder .qb-draggable,
 .cal-query-builder .qb-drag-handler {
   -webkit-user-select: none;
-  -moz-user-select: none;
   user-select: none;
+  -khtml-user-select: none;
 }
-
-/* hide connectors */
-.cal-query-builder .group-or-rule::before,
-.cal-query-builder .group-or-rule::after {
-  /* !important to ensure that styles added by react-query-awesome-builder are overridden */
+.cal-query-builder .group-container {
+  border: 1px solid var(--cal-border-muted);
+  background-color: var(--cal-bg);
+  border-radius: 16px;
+  padding: 8px !important;
+}
+.cal-query-builder .group--children:not(:empty) {
+  background-color: var(--cal-bg);
+  border: 1px solid var(--cal-border-muted);
+  border-radius: 10px;
+  padding: 8px;
+}
+.cal-query-builder .cal-query-builder-container .group-container {
+  border: none;
+  padding: 0;
+}
+.cal-query-builder .group .group--header {
+  margin-left: 8px;
+}
+.cal-query-builder
+  .group.group-or-rule:has(.group--header, :not(.group--header)):has(.group--children):has(.group--footer) {
+  background-color: var(--cal-bg-muted);
+  border-radius: 12px;
+  padding: 2px;
+}
+.cal-query-builder .group-or-rule:before,
+.cal-query-builder .group-or-rule:after {
   content: unset !important;
 }
-
-.cal-query-builder .group--children {
-  /* !important to ensure that styles added by react-query-awesome-builder are overridden */
-  padding-left: 0 !important;
-}
-
-/* Hide "and" for between numbers */
 .cal-query-builder .widget--sep {
-  /* !important to ensure that styles added by react-query-awesome-builder are overridden */
   display: none !important;
 }
-
-/* Layout of all fields-  Distance b/w them, positioning, width */
 .cal-query-builder .rule--body--wrapper {
+  flex-direction: column;
   flex: 1;
   display: flex;
-  flex-direction: column;
 }
-
 .cal-query-builder .rule--body {
-  display: flex;
-  align-items: center;
+  grid-template-columns: 40% 20% 40%;
+  width: 100%;
+  display: grid;
 }
-
-.cal-query-builder .rule--field,
-.cal-query-builder .rule--operator,
-.cal-query-builder .rule--value {
-  display: flex;
-  flex-grow: 1;
-}
-
 .cal-query-builder .rule--widget {
   display: "inline-block";
   width: 100%;
 }
-
 .cal-query-builder .widget--widget,
 .cal-query-builder .widget--widget,
-.cal-query-builder .widget--widget>* {
+.cal-query-builder .widget--widget > * {
   width: 100%;
 }
-
 .cal-query-builder .rule--drag-handler,
 .cal-query-builder .rule--header {
-  display: flex;
   align-items: center;
   margin-right: 8px;
-  /* !important to ensure that styles added by react-query-awesome-builder are overridden */
+  display: flex;
   opacity: 1 !important;
 }
-
-/* Disable Reordering of rules - It is not required with the current functionality plus it's not working correctly even if someone wants to re-order */
 .cal-query-builder .rule--drag-handler {
   display: none;
 }
-
 .cal-query-builder .rule--func--wrapper,
 .cal-query-builder .rule--func,
 .cal-query-builder .rule--func--args,
@@ -199,10 +10250,7 @@
 .cal-query-builder .rule--func--bracket-after,
 .cal-query-builder .rule--func--arg-sep,
 .cal-query-builder .rule--func--arg-label,
-.cal-query-builder .rule--func--arg-label-sep {
-  display: inline-block;
-}
-
+.cal-query-builder .rule--func--arg-label-sep,
 .cal-query-builder .rule--field,
 .cal-query-builder .group--field,
 .cal-query-builder .rule--operator,
@@ -215,14559 +10263,77 @@
 .cal-query-builder .rule--after-widget {
   display: inline-block;
 }
-
 .cal-query-builder .rule--operator,
 .cal-query-builder .widget--widget,
 .cal-query-builder .widget--valuesrc,
 .cal-query-builder .widget--sep {
   padding-left: 10px;
 }
-
 .cal-query-builder .widget--valuesrc {
   margin-right: -8px;
 }
-
-.cal-query-builder .group--header,
-.cal-query-builder .group--footer {
-  padding-left: 10px;
-  padding-right: 10px;
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-
-.cal-query-builder .group-or-rule-container {
-  margin-top: 10px;
-  margin-bottom: 10px;
-}
-
 .cal-query-builder .rule {
-  border: 1px solid transparent;
-  padding: 10px;
   flex: 1;
   display: flex;
 }
-
 @media (max-width: 1024px) {
   .rule--body {
     flex-direction: column;
   }
-
-
   .cal-query-builder .rule--field,
   .cal-query-builder .rule--operator,
   .cal-query-builder .rule--value {
     width: 100%;
   }
 }
-
-/*!************************************************************************************************************************************************************************************************************************************************************************!*\
-  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[12].oneOf[12].use[3]!./styles/globals.css ***!
-  \************************************************************************************************************************************************************************************************************************************************************************/
-/*
-! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com
-*/
-/*
-1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
-2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
-*/
-
-*,
-::before,
-::after {
-  box-sizing: border-box;
-  /* 1 */
-  border-width: 0;
-  /* 2 */
-  border-style: solid;
-  /* 2 */
-  border-color: #e5e7eb;
-  /* 2 */
-}
-
-::before,
-::after {
-  --tw-content: '';
-}
-
-/*
-1. Use a consistent sensible line-height in all browsers.
-2. Prevent adjustments of font size after orientation changes in iOS.
-3. Use a more readable tab size.
-4. Use the user's configured `sans` font-family by default.
-5. Use the user's configured `sans` font-feature-settings by default.
-6. Use the user's configured `sans` font-variation-settings by default.
-*/
-
-html {
-  line-height: 1.5;
-  /* 1 */
-  -webkit-text-size-adjust: 100%;
-  /* 2 */
-  -moz-tab-size: 4;
-  /* 3 */
-  -o-tab-size: 4;
-  tab-size: 4;
-  /* 3 */
-  font-family: var(--font-inter), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  /* 4 */
-  font-feature-settings: normal;
-  /* 5 */
-  font-variation-settings: normal;
-  /* 6 */
-}
-
-/*
-1. Remove the margin in all browsers.
-2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
-*/
-
-body {
-  margin: 0;
-  /* 1 */
-  line-height: inherit;
-  /* 2 */
-}
-
-/*
-1. Add the correct height in Firefox.
-2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
-3. Ensure horizontal rules are visible by default.
-*/
-
-hr {
-  height: 0;
-  /* 1 */
-  color: inherit;
-  /* 2 */
-  border-top-width: 1px;
-  /* 3 */
-}
-
-/*
-Add the correct text decoration in Chrome, Edge, and Safari.
-*/
-
-abbr:where([title]) {
-  -webkit-text-decoration: underline dotted;
-  text-decoration: underline dotted;
-}
-
-/*
-Remove the default font size and weight for headings.
-*/
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-/*
-Reset links to optimize for opt-in styling instead of opt-out.
-*/
-
-a {
-  color: inherit;
-  text-decoration: inherit;
-}
-
-/*
-Add the correct font weight in Edge and Safari.
-*/
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/*
-1. Use the user's configured `mono` font family by default.
-2. Correct the odd `em` font sizing in all browsers.
-*/
-
-code,
-kbd,
-samp,
-pre {
-  font-family: Roboto Mono, monospace;
-  /* 1 */
-  font-size: 1em;
-  /* 2 */
-}
-
-/*
-Add the correct font size in all browsers.
-*/
-
-small {
-  font-size: 80%;
-}
-
-/*
-Prevent `sub` and `sup` elements from affecting the line height in all browsers.
-*/
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/*
-1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
-2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
-3. Remove gaps between table borders by default.
-*/
-
-table {
-  text-indent: 0;
-  /* 1 */
-  border-color: inherit;
-  /* 2 */
-  border-collapse: collapse;
-  /* 3 */
-}
-
-/*
-1. Change the font styles in all browsers.
-2. Remove the margin in Firefox and Safari.
-3. Remove default padding in all browsers.
-*/
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit;
-  /* 1 */
-  font-feature-settings: inherit;
-  /* 1 */
-  font-variation-settings: inherit;
-  /* 1 */
-  font-size: 100%;
-  /* 1 */
-  font-weight: inherit;
-  /* 1 */
-  line-height: inherit;
-  /* 1 */
-  color: inherit;
-  /* 1 */
-  margin: 0;
-  /* 2 */
-  padding: 0;
-  /* 3 */
-}
-
-/*
-Remove the inheritance of text transform in Edge and Firefox.
-*/
-
-button,
-select {
-  text-transform: none;
-}
-
-/*
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Remove default button styles.
-*/
-
-button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
-  -webkit-appearance: button;
-  /* 1 */
-  background-color: transparent;
-  /* 2 */
-  background-image: none;
-  /* 2 */
-}
-
-/*
-Use the modern Firefox focus style for all focusable elements.
-*/
-
-:-moz-focusring {
-  outline: auto;
-}
-
-/*
-Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
-*/
-
-:-moz-ui-invalid {
-  box-shadow: none;
-}
-
-/*
-Add the correct vertical alignment in Chrome and Firefox.
-*/
-
-progress {
-  vertical-align: baseline;
-}
-
-/*
-Correct the cursor style of increment and decrement buttons in Safari.
-*/
-
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/*
-1. Correct the odd appearance in Chrome and Safari.
-2. Correct the outline style in Safari.
-*/
-
-[type='search'] {
-  -webkit-appearance: textfield;
-  /* 1 */
-  outline-offset: -2px;
-  /* 2 */
-}
-
-/*
-Remove the inner padding in Chrome and Safari on macOS.
-*/
-
-::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/*
-1. Correct the inability to style clickable types in iOS and Safari.
-2. Change font properties to `inherit` in Safari.
-*/
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  /* 1 */
-  font: inherit;
-  /* 2 */
-}
-
-/*
-Add the correct display in Chrome and Safari.
-*/
-
-summary {
-  display: list-item;
-}
-
-/*
-Removes the default spacing and border for appropriate elements.
-*/
-
-blockquote,
-dl,
-dd,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
-figure,
-p,
-pre {
-  margin: 0;
-}
-
-fieldset {
-  margin: 0;
-  padding: 0;
-}
-
-legend {
-  padding: 0;
-}
-
-ol,
-ul,
-menu {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-/*
-Reset default styling for dialogs.
-*/
-dialog {
-  padding: 0;
-}
-
-/*
-Prevent resizing textareas horizontally by default.
-*/
-
-textarea {
-  resize: vertical;
-}
-
-/*
-1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
-2. Set the default placeholder color to the user's configured gray 400 color.
-*/
-
-input::-moz-placeholder,
-textarea::-moz-placeholder {
-  opacity: 1;
-  /* 1 */
-  color: #9ca3af;
-  /* 2 */
-}
-
-input::placeholder,
-textarea::placeholder {
-  opacity: 1;
-  /* 1 */
-  color: #9ca3af;
-  /* 2 */
-}
-
-/*
-Set the default cursor for buttons.
-*/
-
-button,
-[role="button"] {
-  cursor: pointer;
-}
-
-/*
-Make sure disabled buttons don't get the pointer cursor.
-*/
-:disabled {
-  cursor: default;
-}
-
-/*
-1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
-2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
-   This can trigger a poorly considered lint error in some tools but is included by design.
-*/
-
-img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
-  display: block;
-  /* 1 */
-  vertical-align: middle;
-  /* 2 */
-}
-
-/*
-Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
-*/
-
-img,
-video {
-  max-width: 100%;
-  height: auto;
-}
-
-/* Make elements with the HTML hidden attribute stay hidden by default */
-[hidden] {
-  display: none;
-}
-
-[type='text'],
-[type='email'],
-[type='url'],
-[type='password'],
-[type='number'],
-[type='date'],
-[type='datetime-local'],
-[type='month'],
-[type='search'],
-[type='tel'],
-[type='time'],
-[type='week'],
-[multiple],
-textarea,
-select {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background-color: #fff;
-  border-color: #6b7280;
-  border-width: 1px;
-  border-radius: 0px;
-  padding-top: 0.5rem;
-  padding-right: 0.75rem;
-  padding-bottom: 0.5rem;
-  padding-left: 0.75rem;
-  font-size: 1rem;
-  line-height: 1.5rem;
-  --tw-shadow: 0 0 #0000;
-}
-
-[type='text']:focus,
-[type='email']:focus,
-[type='url']:focus,
-[type='password']:focus,
-[type='number']:focus,
-[type='date']:focus,
-[type='datetime-local']:focus,
-[type='month']:focus,
-[type='search']:focus,
-[type='tel']:focus,
-[type='time']:focus,
-[type='week']:focus,
-[multiple]:focus,
-textarea:focus,
-select:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  --tw-ring-inset: var(--tw-empty,
-      /*!*/
-      /*!*/
-    );
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: #2563eb;
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  border-color: #2563eb;
-}
-
-input::-moz-placeholder,
-textarea::-moz-placeholder {
-  color: #6b7280;
-  opacity: 1;
-}
-
-input::placeholder,
-textarea::placeholder {
-  color: #6b7280;
-  opacity: 1;
-}
-
-::-webkit-datetime-edit-fields-wrapper {
-  padding: 0;
-}
-
-::-webkit-date-and-time-value {
-  min-height: 1.5em;
-}
-
-::-webkit-datetime-edit,
-::-webkit-datetime-edit-year-field,
-::-webkit-datetime-edit-month-field,
-::-webkit-datetime-edit-day-field,
-::-webkit-datetime-edit-hour-field,
-::-webkit-datetime-edit-minute-field,
-::-webkit-datetime-edit-second-field,
-::-webkit-datetime-edit-millisecond-field,
-::-webkit-datetime-edit-meridiem-field {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-select {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
-  background-position: right 0.5rem center;
-  background-repeat: no-repeat;
-  background-size: 1.5em 1.5em;
-  padding-right: 2.5rem;
-  -webkit-print-color-adjust: exact;
-  print-color-adjust: exact;
-}
-
-[multiple] {
-  background-image: initial;
-  background-position: initial;
-  background-repeat: unset;
-  background-size: initial;
-  padding-right: 0.75rem;
-  -webkit-print-color-adjust: unset;
-  print-color-adjust: unset;
-}
-
-[type='checkbox'],
-[type='radio'] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  padding: 0;
-  -webkit-print-color-adjust: exact;
-  print-color-adjust: exact;
-  display: inline-block;
-  vertical-align: middle;
-  background-origin: border-box;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-  flex-shrink: 0;
-  height: 1rem;
-  width: 1rem;
-  color: #2563eb;
-  background-color: #fff;
-  border-color: #6b7280;
-  border-width: 1px;
-  --tw-shadow: 0 0 #0000;
-}
-
-[type='checkbox'] {
-  border-radius: 0px;
-}
-
-[type='radio'] {
-  border-radius: 100%;
-}
-
-[type='checkbox']:focus,
-[type='radio']:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-  --tw-ring-inset: var(--tw-empty,
-      /*!*/
-      /*!*/
-    );
-  --tw-ring-offset-width: 2px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: #2563eb;
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-}
-
-[type='checkbox']:checked,
-[type='radio']:checked {
-  border-color: transparent;
-  background-color: currentColor;
-  background-size: 100% 100%;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-[type='checkbox']:checked {
-  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
-}
-
-[type='radio']:checked {
-  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
-}
-
-[type='checkbox']:checked:hover,
-[type='checkbox']:checked:focus,
-[type='radio']:checked:hover,
-[type='radio']:checked:focus {
-  border-color: transparent;
-  background-color: currentColor;
-}
-
-[type='checkbox']:indeterminate {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
-  border-color: transparent;
-  background-color: currentColor;
-  background-size: 100% 100%;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-[type='checkbox']:indeterminate:hover,
-[type='checkbox']:indeterminate:focus {
-  border-color: transparent;
-  background-color: currentColor;
-}
-
-[type='file'] {
-  background: unset;
-  border-color: inherit;
-  border-width: 0;
-  border-radius: 0;
-  padding: 0;
-  font-size: unset;
-  line-height: inherit;
-}
-
-[type='file']:focus {
-  outline: 1px solid ButtonText;
-  outline: 1px auto -webkit-focus-ring-color;
-}
-
-* {
-  scrollbar-color: initial;
-  scrollbar-width: initial;
-}
-
-hr {}
-
-* {
-  border-color: var(--cal-border);
-}
-
-*,
-::before,
-::after {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x: ;
-  --tw-pan-y: ;
-  --tw-pinch-zoom: ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position: ;
-  --tw-gradient-via-position: ;
-  --tw-gradient-to-position: ;
-  --tw-ordinal: ;
-  --tw-slashed-zero: ;
-  --tw-numeric-figure: ;
-  --tw-numeric-spacing: ;
-  --tw-numeric-fraction: ;
-  --tw-ring-inset: ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur: ;
-  --tw-brightness: ;
-  --tw-contrast: ;
-  --tw-grayscale: ;
-  --tw-hue-rotate: ;
-  --tw-invert: ;
-  --tw-saturate: ;
-  --tw-sepia: ;
-  --tw-drop-shadow: ;
-  --tw-backdrop-blur: ;
-  --tw-backdrop-brightness: ;
-  --tw-backdrop-contrast: ;
-  --tw-backdrop-grayscale: ;
-  --tw-backdrop-hue-rotate: ;
-  --tw-backdrop-invert: ;
-  --tw-backdrop-opacity: ;
-  --tw-backdrop-saturate: ;
-  --tw-backdrop-sepia: ;
-}
-
-::backdrop {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x: ;
-  --tw-pan-y: ;
-  --tw-pinch-zoom: ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position: ;
-  --tw-gradient-via-position: ;
-  --tw-gradient-to-position: ;
-  --tw-ordinal: ;
-  --tw-slashed-zero: ;
-  --tw-numeric-figure: ;
-  --tw-numeric-spacing: ;
-  --tw-numeric-fraction: ;
-  --tw-ring-inset: ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(59 130 246 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur: ;
-  --tw-brightness: ;
-  --tw-contrast: ;
-  --tw-grayscale: ;
-  --tw-hue-rotate: ;
-  --tw-invert: ;
-  --tw-saturate: ;
-  --tw-sepia: ;
-  --tw-drop-shadow: ;
-  --tw-backdrop-blur: ;
-  --tw-backdrop-brightness: ;
-  --tw-backdrop-contrast: ;
-  --tw-backdrop-grayscale: ;
-  --tw-backdrop-hue-rotate: ;
-  --tw-backdrop-invert: ;
-  --tw-backdrop-opacity: ;
-  --tw-backdrop-saturate: ;
-  --tw-backdrop-sepia: ;
-}
-
-.container {
-  width: 100%;
-}
-
-@media (min-width: 640px) {
-
-  .container {
-    max-width: 640px;
-  }
-}
-
-@media (min-width: 768px) {
-
-  .container {
-    max-width: 768px;
-  }
-}
-
-@media (min-width: 1024px) {
-
-  .container {
-    max-width: 1024px;
-  }
-}
-
-@media (min-width: 1280px) {
-
-  .container {
-    max-width: 1280px;
-  }
-}
-
-@media (min-width: 1536px) {
-
-  .container {
-    max-width: 1536px;
-  }
-}
-
-.prose {
-  color: var(--tw-prose-body);
-  max-width: 65ch;
-}
-
-.prose :where([class~="lead"]):not(:where([class~="not-prose"] *)) {
-  color: var(--tw-prose-lead);
-  font-size: 1.25em;
-  line-height: 1.6;
-  margin-top: 1.2em;
-  margin-bottom: 1.2em;
-}
-
-.prose :where(a):not(:where([class~="not-prose"] *)) {
-  color: var(--tw-prose-links);
-  text-decoration: underline;
-  font-weight: 500;
-}
-
-.prose :where(strong):not(:where([class~="not-prose"] *)) {
-  color: var(--tw-prose-bold);
-  font-weight: 600;
-}
-
-.prose :where(a strong):not(:where([class~="not-prose"] *)) {
-  color: inherit;
-}
-
-.prose :where(blockquote strong):not(:where([class~="not-prose"] *)) {
-  color: inherit;
-}
-
-.prose :where(thead th strong):not(:where([class~="not-prose"] *)) {
-  color: inherit;
-}
-
-.prose :where(ol):not(:where([class~="not-prose"] *)) {
-  list-style-type: decimal;
-  margin-top: 1.25em;
-  margin-bottom: 1.25em;
-  padding-left: 1.625em;
-}
-
-.prose :where(ol[type="A"]):not(:where([class~="not-prose"] *)) {
-  list-style-type: upper-alpha;
-}
-
-.prose :where(ol[type="a"]):not(:where([class~="not-prose"] *)) {
-  list-style-type: lower-alpha;
-}
-
-.prose :where(ol[type="A" s]):not(:where([class~="not-prose"] *)) {
-  list-style-type: upper-alpha;
-}
-
-.prose :where(ol[type="a" s]):not(:where([class~="not-prose"] *)) {
-  list-style-type: lower-alpha;
-}
-
-.prose :where(ol[type="I"]):not(:where([class~="not-prose"] *)) {
-  list-style-type: upper-roman;
-}
-
-.prose :where(ol[type="i"]):not(:where([class~="not-prose"] *)) {
-  list-style-type: lower-roman;
-}
-
-.prose :where(ol[type="I" s]):not(:where([class~="not-prose"] *)) {
-  list-style-type: upper-roman;
-}
-
-.prose :where(ol[type="i" s]):not(:where([class~="not-prose"] *)) {
-  list-style-type: lower-roman;
-}
-
-.prose :where(ol[type="1"]):not(:where([class~="not-prose"] *)) {
-  list-style-type: decimal;
-}
-
-.prose :where(ul):not(:where([class~="not-prose"] *)) {
-  list-style-type: disc;
-  margin-top: 1.25em;
-  margin-bottom: 1.25em;
-  padding-left: 1.625em;
-}
-
-.prose :where(ol > li):not(:where([class~="not-prose"] *))::marker {
-  font-weight: 400;
-  color: var(--tw-prose-counters);
-}
-
-.prose :where(ul > li):not(:where([class~="not-prose"] *))::marker {
-  color: var(--tw-prose-bullets);
-}
-
-.prose :where(hr):not(:where([class~="not-prose"] *)) {
-  border-color: var(--tw-prose-hr);
-  border-top-width: 1px;
-  margin-top: 3em;
-  margin-bottom: 3em;
-}
-
-.prose :where(blockquote):not(:where([class~="not-prose"] *)) {
-  font-weight: 500;
-  font-style: italic;
-  color: var(--tw-prose-quotes);
-  border-left-width: 0.25rem;
-  border-left-color: var(--tw-prose-quote-borders);
-  quotes: "\201C" "\201D" "\2018" "\2019";
-  margin-top: 1.6em;
-  margin-bottom: 1.6em;
-  padding-left: 1em;
-}
-
-.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"] *))::before {
-  content: open-quote;
-}
-
-.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"] *))::after {
-  content: close-quote;
-}
-
-.prose :where(h1):not(:where([class~="not-prose"] *)) {
-  color: var(--tw-prose-headings);
-  font-weight: 800;
-  font-size: 2.25em;
-  margin-top: 0;
-  margin-bottom: 0.8888889em;
-  line-height: 1.1111111;
-}
-
-.prose :where(h1 strong):not(:where([class~="not-prose"] *)) {
-  font-weight: 900;
-  color: inherit;
-}
-
-.prose :where(h2):not(:where([class~="not-prose"] *)) {
-  color: var(--tw-prose-headings);
-  font-weight: 700;
-  font-size: 1.5em;
-  margin-top: 2em;
-  margin-bottom: 1em;
-  line-height: 1.3333333;
-}
-
-.prose :where(h2 strong):not(:where([class~="not-prose"] *)) {
-  font-weight: 800;
-  color: inherit;
-}
-
-.prose :where(h3):not(:where([class~="not-prose"] *)) {
-  color: var(--tw-prose-headings);
-  font-weight: 600;
-  font-size: 1.25em;
-  margin-top: 1.6em;
-  margin-bottom: 0.6em;
-  line-height: 1.6;
-}
-
-.prose :where(h3 strong):not(:where([class~="not-prose"] *)) {
-  font-weight: 700;
-  color: inherit;
-}
-
-.prose :where(h4):not(:where([class~="not-prose"] *)) {
-  color: var(--tw-prose-headings);
-  font-weight: 600;
-  margin-top: 1.5em;
-  margin-bottom: 0.5em;
-  line-height: 1.5;
-}
-
-.prose :where(h4 strong):not(:where([class~="not-prose"] *)) {
-  font-weight: 700;
-  color: inherit;
-}
-
-.prose :where(img):not(:where([class~="not-prose"] *)) {
-  margin-top: 2em;
-  margin-bottom: 2em;
-}
-
-.prose :where(figure > *):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.prose :where(figcaption):not(:where([class~="not-prose"] *)) {
-  color: var(--tw-prose-captions);
-  font-size: 0.875em;
-  line-height: 1.4285714;
-  margin-top: 0.8571429em;
-}
-
-.prose :where(code):not(:where([class~="not-prose"] *)) {
-  color: var(--tw-prose-code);
-  font-weight: 600;
-  font-size: 0.875em;
-}
-
-.prose :where(code):not(:where([class~="not-prose"] *))::before {
-  content: "`";
-}
-
-.prose :where(code):not(:where([class~="not-prose"] *))::after {
-  content: "`";
-}
-
-.prose :where(a code):not(:where([class~="not-prose"] *)) {
-  color: inherit;
-}
-
-.prose :where(h1 code):not(:where([class~="not-prose"] *)) {
-  color: inherit;
-}
-
-.prose :where(h2 code):not(:where([class~="not-prose"] *)) {
-  color: inherit;
-  font-size: 0.875em;
-}
-
-.prose :where(h3 code):not(:where([class~="not-prose"] *)) {
-  color: inherit;
-  font-size: 0.9em;
-}
-
-.prose :where(h4 code):not(:where([class~="not-prose"] *)) {
-  color: inherit;
-}
-
-.prose :where(blockquote code):not(:where([class~="not-prose"] *)) {
-  color: inherit;
-}
-
-.prose :where(thead th code):not(:where([class~="not-prose"] *)) {
-  color: inherit;
-}
-
-.prose :where(pre):not(:where([class~="not-prose"] *)) {
-  color: var(--tw-prose-pre-code);
-  background-color: var(--tw-prose-pre-bg);
-  overflow-x: auto;
-  font-weight: 400;
-  font-size: 0.875em;
-  line-height: 1.7142857;
-  margin-top: 1.7142857em;
-  margin-bottom: 1.7142857em;
-  border-radius: 0.375rem;
-  padding-top: 0.8571429em;
-  padding-right: 1.1428571em;
-  padding-bottom: 0.8571429em;
-  padding-left: 1.1428571em;
-}
-
-.prose :where(pre code):not(:where([class~="not-prose"] *)) {
-  background-color: transparent;
-  border-width: 0;
-  border-radius: 0;
-  padding: 0;
-  font-weight: inherit;
-  color: inherit;
-  font-size: inherit;
-  font-family: inherit;
-  line-height: inherit;
-}
-
-.prose :where(pre code):not(:where([class~="not-prose"] *))::before {
-  content: none;
-}
-
-.prose :where(pre code):not(:where([class~="not-prose"] *))::after {
-  content: none;
-}
-
-.prose :where(table):not(:where([class~="not-prose"] *)) {
-  width: 100%;
-  table-layout: auto;
-  text-align: left;
-  margin-top: 2em;
-  margin-bottom: 2em;
-  font-size: 0.875em;
-  line-height: 1.7142857;
-}
-
-.prose :where(thead):not(:where([class~="not-prose"] *)) {
-  border-bottom-width: 1px;
-  border-bottom-color: var(--tw-prose-th-borders);
-}
-
-.prose :where(thead th):not(:where([class~="not-prose"] *)) {
-  color: var(--tw-prose-headings);
-  font-weight: 600;
-  vertical-align: bottom;
-  padding-right: 0.5714286em;
-  padding-bottom: 0.5714286em;
-  padding-left: 0.5714286em;
-}
-
-.prose :where(tbody tr):not(:where([class~="not-prose"] *)) {
-  border-bottom-width: 1px;
-  border-bottom-color: var(--tw-prose-td-borders);
-}
-
-.prose :where(tbody tr:last-child):not(:where([class~="not-prose"] *)) {
-  border-bottom-width: 0;
-}
-
-.prose :where(tbody td):not(:where([class~="not-prose"] *)) {
-  vertical-align: baseline;
-}
-
-.prose :where(tfoot):not(:where([class~="not-prose"] *)) {
-  border-top-width: 1px;
-  border-top-color: var(--tw-prose-th-borders);
-}
-
-.prose :where(tfoot td):not(:where([class~="not-prose"] *)) {
-  vertical-align: top;
-}
-
-.prose {
-  --tw-prose-body: #374151;
-  --tw-prose-headings: #111827;
-  --tw-prose-lead: #4b5563;
-  --tw-prose-links: #111827;
-  --tw-prose-bold: #111827;
-  --tw-prose-counters: #6b7280;
-  --tw-prose-bullets: #d1d5db;
-  --tw-prose-hr: #e5e7eb;
-  --tw-prose-quotes: #111827;
-  --tw-prose-quote-borders: #e5e7eb;
-  --tw-prose-captions: #6b7280;
-  --tw-prose-code: #111827;
-  --tw-prose-pre-code: #e5e7eb;
-  --tw-prose-pre-bg: #1f2937;
-  --tw-prose-th-borders: #d1d5db;
-  --tw-prose-td-borders: #e5e7eb;
-  --tw-prose-invert-body: #d1d5db;
-  --tw-prose-invert-headings: #fff;
-  --tw-prose-invert-lead: #9ca3af;
-  --tw-prose-invert-links: #fff;
-  --tw-prose-invert-bold: #fff;
-  --tw-prose-invert-counters: #9ca3af;
-  --tw-prose-invert-bullets: #4b5563;
-  --tw-prose-invert-hr: #374151;
-  --tw-prose-invert-quotes: #f3f4f6;
-  --tw-prose-invert-quote-borders: #374151;
-  --tw-prose-invert-captions: #9ca3af;
-  --tw-prose-invert-code: #fff;
-  --tw-prose-invert-pre-code: #d1d5db;
-  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
-  --tw-prose-invert-th-borders: #4b5563;
-  --tw-prose-invert-td-borders: #374151;
-  font-size: 1rem;
-  line-height: 1.75;
-}
-
-.prose :where(p):not(:where([class~="not-prose"] *)) {
-  margin-top: 1.25em;
-  margin-bottom: 1.25em;
-}
-
-.prose :where(video):not(:where([class~="not-prose"] *)) {
-  margin-top: 2em;
-  margin-bottom: 2em;
-}
-
-.prose :where(figure):not(:where([class~="not-prose"] *)) {
-  margin-top: 2em;
-  margin-bottom: 2em;
-}
-
-.prose :where(li):not(:where([class~="not-prose"] *)) {
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
-}
-
-.prose :where(ol > li):not(:where([class~="not-prose"] *)) {
-  padding-left: 0.375em;
-}
-
-.prose :where(ul > li):not(:where([class~="not-prose"] *)) {
-  padding-left: 0.375em;
-}
-
-.prose :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
-  margin-top: 0.75em;
-  margin-bottom: 0.75em;
-}
-
-.prose :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) {
-  margin-top: 1.25em;
-}
-
-.prose :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) {
-  margin-bottom: 1.25em;
-}
-
-.prose :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) {
-  margin-top: 1.25em;
-}
-
-.prose :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) {
-  margin-bottom: 1.25em;
-}
-
-.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) {
-  margin-top: 0.75em;
-  margin-bottom: 0.75em;
-}
-
-.prose :where(hr + *):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
-}
-
-.prose :where(h2 + *):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
-}
-
-.prose :where(h3 + *):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
-}
-
-.prose :where(h4 + *):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
-}
-
-.prose :where(thead th:first-child):not(:where([class~="not-prose"] *)) {
-  padding-left: 0;
-}
-
-.prose :where(thead th:last-child):not(:where([class~="not-prose"] *)) {
-  padding-right: 0;
-}
-
-.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) {
-  padding-top: 0.5714286em;
-  padding-right: 0.5714286em;
-  padding-bottom: 0.5714286em;
-  padding-left: 0.5714286em;
-}
-
-.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) {
-  padding-left: 0;
-}
-
-.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) {
-  padding-right: 0;
-}
-
-.prose :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
-}
-
-.prose :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
-  margin-bottom: 0;
-}
-
-.prose-sm {
-  font-size: 0.875rem;
-  line-height: 1.7142857;
-}
-
-.prose-sm :where(p):not(:where([class~="not-prose"] *)) {
-  margin-top: 1.1428571em;
-  margin-bottom: 1.1428571em;
-}
-
-.prose-sm :where([class~="lead"]):not(:where([class~="not-prose"] *)) {
-  font-size: 1.2857143em;
-  line-height: 1.5555556;
-  margin-top: 0.8888889em;
-  margin-bottom: 0.8888889em;
-}
-
-.prose-sm :where(blockquote):not(:where([class~="not-prose"] *)) {
-  margin-top: 1.3333333em;
-  margin-bottom: 1.3333333em;
-  padding-left: 1.1111111em;
-}
-
-.prose-sm :where(h1):not(:where([class~="not-prose"] *)) {
-  font-size: 2.1428571em;
-  margin-top: 0;
-  margin-bottom: 0.8em;
-  line-height: 1.2;
-}
-
-.prose-sm :where(h2):not(:where([class~="not-prose"] *)) {
-  font-size: 1.4285714em;
-  margin-top: 1.6em;
-  margin-bottom: 0.8em;
-  line-height: 1.4;
-}
-
-.prose-sm :where(h3):not(:where([class~="not-prose"] *)) {
-  font-size: 1.2857143em;
-  margin-top: 1.5555556em;
-  margin-bottom: 0.4444444em;
-  line-height: 1.5555556;
-}
-
-.prose-sm :where(h4):not(:where([class~="not-prose"] *)) {
-  margin-top: 1.4285714em;
-  margin-bottom: 0.5714286em;
-  line-height: 1.4285714;
-}
-
-.prose-sm :where(img):not(:where([class~="not-prose"] *)) {
-  margin-top: 1.7142857em;
-  margin-bottom: 1.7142857em;
-}
-
-.prose-sm :where(video):not(:where([class~="not-prose"] *)) {
-  margin-top: 1.7142857em;
-  margin-bottom: 1.7142857em;
-}
-
-.prose-sm :where(figure):not(:where([class~="not-prose"] *)) {
-  margin-top: 1.7142857em;
-  margin-bottom: 1.7142857em;
-}
-
-.prose-sm :where(figure > *):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-.prose-sm :where(figcaption):not(:where([class~="not-prose"] *)) {
-  font-size: 0.8571429em;
-  line-height: 1.3333333;
-  margin-top: 0.6666667em;
-}
-
-.prose-sm :where(code):not(:where([class~="not-prose"] *)) {
-  font-size: 0.8571429em;
-}
-
-.prose-sm :where(h2 code):not(:where([class~="not-prose"] *)) {
-  font-size: 0.9em;
-}
-
-.prose-sm :where(h3 code):not(:where([class~="not-prose"] *)) {
-  font-size: 0.8888889em;
-}
-
-.prose-sm :where(pre):not(:where([class~="not-prose"] *)) {
-  font-size: 0.8571429em;
-  line-height: 1.6666667;
-  margin-top: 1.6666667em;
-  margin-bottom: 1.6666667em;
-  border-radius: 0.25rem;
-  padding-top: 0.6666667em;
-  padding-right: 1em;
-  padding-bottom: 0.6666667em;
-  padding-left: 1em;
-}
-
-.prose-sm :where(ol):not(:where([class~="not-prose"] *)) {
-  margin-top: 1.1428571em;
-  margin-bottom: 1.1428571em;
-  padding-left: 1.5714286em;
-}
-
-.prose-sm :where(ul):not(:where([class~="not-prose"] *)) {
-  margin-top: 1.1428571em;
-  margin-bottom: 1.1428571em;
-  padding-left: 1.5714286em;
-}
-
-.prose-sm :where(li):not(:where([class~="not-prose"] *)) {
-  margin-top: 0.2857143em;
-  margin-bottom: 0.2857143em;
-}
-
-.prose-sm :where(ol > li):not(:where([class~="not-prose"] *)) {
-  padding-left: 0.4285714em;
-}
-
-.prose-sm :where(ul > li):not(:where([class~="not-prose"] *)) {
-  padding-left: 0.4285714em;
-}
-
-.prose-sm :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
-  margin-top: 0.5714286em;
-  margin-bottom: 0.5714286em;
-}
-
-.prose-sm :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) {
-  margin-top: 1.1428571em;
-}
-
-.prose-sm :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) {
-  margin-bottom: 1.1428571em;
-}
-
-.prose-sm :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) {
-  margin-top: 1.1428571em;
-}
-
-.prose-sm :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) {
-  margin-bottom: 1.1428571em;
-}
-
-.prose-sm :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) {
-  margin-top: 0.5714286em;
-  margin-bottom: 0.5714286em;
-}
-
-.prose-sm :where(hr):not(:where([class~="not-prose"] *)) {
-  margin-top: 2.8571429em;
-  margin-bottom: 2.8571429em;
-}
-
-.prose-sm :where(hr + *):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
-}
-
-.prose-sm :where(h2 + *):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
-}
-
-.prose-sm :where(h3 + *):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
-}
-
-.prose-sm :where(h4 + *):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
-}
-
-.prose-sm :where(table):not(:where([class~="not-prose"] *)) {
-  font-size: 0.8571429em;
-  line-height: 1.5;
-}
-
-.prose-sm :where(thead th):not(:where([class~="not-prose"] *)) {
-  padding-right: 1em;
-  padding-bottom: 0.6666667em;
-  padding-left: 1em;
-}
-
-.prose-sm :where(thead th:first-child):not(:where([class~="not-prose"] *)) {
-  padding-left: 0;
-}
-
-.prose-sm :where(thead th:last-child):not(:where([class~="not-prose"] *)) {
-  padding-right: 0;
-}
-
-.prose-sm :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) {
-  padding-top: 0.6666667em;
-  padding-right: 1em;
-  padding-bottom: 0.6666667em;
-  padding-left: 1em;
-}
-
-.prose-sm :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) {
-  padding-left: 0;
-}
-
-.prose-sm :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) {
-  padding-right: 0;
-}
-
-.prose-sm :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
-}
-
-.prose-sm :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
-  margin-bottom: 0;
-}
-
-.prose-base :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
-  margin-top: 0.75em;
-  margin-bottom: 0.75em;
-}
-
-.prose-base :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) {
-  margin-top: 1.25em;
-}
-
-.prose-base :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) {
-  margin-bottom: 1.25em;
-}
-
-.prose-base :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) {
-  margin-top: 1.25em;
-}
-
-.prose-base :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) {
-  margin-bottom: 1.25em;
-}
-
-.prose-base :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
-}
-
-.prose-base :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
-  margin-bottom: 0;
-}
-
-.prose-lg :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
-  margin-top: 0.8888889em;
-  margin-bottom: 0.8888889em;
-}
-
-.prose-lg :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) {
-  margin-top: 1.3333333em;
-}
-
-.prose-lg :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) {
-  margin-bottom: 1.3333333em;
-}
-
-.prose-lg :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) {
-  margin-top: 1.3333333em;
-}
-
-.prose-lg :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) {
-  margin-bottom: 1.3333333em;
-}
-
-.prose-lg :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
-}
-
-.prose-lg :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
-  margin-bottom: 0;
-}
-
-.prose-xl :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
-  margin-top: 0.8em;
-  margin-bottom: 0.8em;
-}
-
-.prose-xl :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) {
-  margin-top: 1.2em;
-}
-
-.prose-xl :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) {
-  margin-bottom: 1.2em;
-}
-
-.prose-xl :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) {
-  margin-top: 1.2em;
-}
-
-.prose-xl :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) {
-  margin-bottom: 1.2em;
-}
-
-.prose-xl :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
-}
-
-.prose-xl :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
-  margin-bottom: 0;
-}
-
-.prose-2xl :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
-  margin-top: 0.8333333em;
-  margin-bottom: 0.8333333em;
-}
-
-.prose-2xl :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"] *)) {
-  margin-top: 1.3333333em;
-}
-
-.prose-2xl :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"] *)) {
-  margin-bottom: 1.3333333em;
-}
-
-.prose-2xl :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"] *)) {
-  margin-top: 1.3333333em;
-}
-
-.prose-2xl :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"] *)) {
-  margin-bottom: 1.3333333em;
-}
-
-.prose-2xl :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
-  margin-top: 0;
-}
-
-.prose-2xl :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
-  margin-bottom: 0;
-}
-
-.prose-invert {
-  --tw-prose-body: var(--tw-prose-invert-body);
-  --tw-prose-headings: var(--tw-prose-invert-headings);
-  --tw-prose-lead: var(--tw-prose-invert-lead);
-  --tw-prose-links: var(--tw-prose-invert-links);
-  --tw-prose-bold: var(--tw-prose-invert-bold);
-  --tw-prose-counters: var(--tw-prose-invert-counters);
-  --tw-prose-bullets: var(--tw-prose-invert-bullets);
-  --tw-prose-hr: var(--tw-prose-invert-hr);
-  --tw-prose-quotes: var(--tw-prose-invert-quotes);
-  --tw-prose-quote-borders: var(--tw-prose-invert-quote-borders);
-  --tw-prose-captions: var(--tw-prose-invert-captions);
-  --tw-prose-code: var(--tw-prose-invert-code);
-  --tw-prose-pre-code: var(--tw-prose-invert-pre-code);
-  --tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
-  --tw-prose-th-borders: var(--tw-prose-invert-th-borders);
-  --tw-prose-td-borders: var(--tw-prose-invert-td-borders);
-}
-
-.scroll-bar {
-  --scrollbar-track: initial;
-  --scrollbar-thumb: initial;
-  --scrollbar-corner: initial;
-  --scrollbar-track-hover: var(--scrollbar-track);
-  --scrollbar-thumb-hover: var(--scrollbar-thumb);
-  --scrollbar-corner-hover: var(--scrollbar-corner);
-  --scrollbar-track-active: var(--scrollbar-track-hover);
-  --scrollbar-thumb-active: var(--scrollbar-thumb-hover);
-  --scrollbar-corner-active: var(--scrollbar-corner-hover);
-  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
-  overflow: overlay;
-}
-
-.scroll-bar.overflow-x-hidden {
-  overflow-x: hidden;
-}
-
-.scroll-bar.overflow-y-hidden {
-  overflow-y: hidden;
-}
-
-.scroll-bar::-webkit-scrollbar-track {
-  background-color: var(--scrollbar-track);
-}
-
-.scroll-bar::-webkit-scrollbar-thumb {
-  background-color: var(--scrollbar-thumb);
-}
-
-.scroll-bar::-webkit-scrollbar-corner {
-  background-color: var(--scrollbar-corner);
-}
-
-.scroll-bar::-webkit-scrollbar-track:hover {
-  background-color: var(--scrollbar-track-hover);
-}
-
-.scroll-bar::-webkit-scrollbar-thumb:hover {
-  background-color: var(--scrollbar-thumb-hover);
-}
-
-.scroll-bar::-webkit-scrollbar-corner:hover {
-  background-color: var(--scrollbar-corner-hover);
-}
-
-.scroll-bar::-webkit-scrollbar-track:active {
-  background-color: var(--scrollbar-track-active);
-}
-
-.scroll-bar::-webkit-scrollbar-thumb:active {
-  background-color: var(--scrollbar-thumb-active);
-}
-
-.scroll-bar::-webkit-scrollbar-corner:active {
-  background-color: var(--scrollbar-corner-active);
-}
-
-.scroll-bar {
-  scrollbar-width: thin;
-}
-
-.scroll-bar::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-.scroll-bar {
-  --scrollbar-track: transparent;
-  --scrollbar-thumb: #d1d5db;
-}
-
-.scroll-bar::-webkit-scrollbar-thumb {
-  border-radius: var(--cal-radius-md);
-}
-
-:is(.dark .scroll-bar) {
-  --scrollbar-thumb: #cbd5e1;
-}
-
-/* slider */
-.slider {
-  position: relative;
-  display: flex;
-  height: var(--cal-spacing-4);
-  width: var(--cal-spacing-40);
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-  align-items: center;
-}
-
-.slider>.slider-track {
-  position: relative;
-  height: var(--cal-spacing-1);
-  flex-grow: 1;
-  border-radius: var(--cal-radius-md);
-  --tw-bg-opacity: 1;
-  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
-}
-
-.slider .slider-range {
-  position: absolute;
-  height: 100%;
-  border-radius: var(--cal-radius-full);
-  --tw-bg-opacity: 1;
-  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-}
-
-.slider .slider-thumb {
-  display: block;
-  height: var(--cal-spacing-3);
-  width: var(--cal-spacing-3);
-  cursor: pointer;
-  border-radius: var(--cal-radius-full);
-  --tw-bg-opacity: 1;
-  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.slider .slider-thumb:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
-}
-
-.slider .slider-thumb:focus {
-  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.2);
-}
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.not-sr-only {
-  position: static;
-  width: auto;
-  height: auto;
-  padding: 0;
-  margin: 0;
-  overflow: visible;
-  clip: auto;
-  white-space: normal;
-}
-
-.pointer-events-none {
-  pointer-events: none;
-}
-
-.pointer-events-auto {
-  pointer-events: auto;
-}
-
-.\!visible {
-  visibility: visible !important;
-}
-
-.visible {
-  visibility: visible;
-}
-
-.invisible {
-  visibility: hidden;
-}
-
-.collapse {
-  visibility: collapse;
-}
-
-.\!static {
-  position: static !important;
-}
-
-.static {
-  position: static;
-}
-
-.fixed {
-  position: fixed;
-}
-
-.absolute {
-  position: absolute;
-}
-
-.relative {
-  position: relative;
-}
-
-.sticky {
-  position: sticky;
-}
-
-.-inset-1 {
-  inset: calc(var(--cal-spacing-1) * -1);
-}
-
-.inset-0 {
-  inset: var(--cal-spacing-0);
-}
-
-.inset-x-0 {
-  left: var(--cal-spacing-0);
-  right: var(--cal-spacing-0);
-}
-
-.inset-x-1 {
-  left: var(--cal-spacing-1);
-  right: var(--cal-spacing-1);
-}
-
-.inset-y-0 {
-  top: var(--cal-spacing-0);
-  bottom: var(--cal-spacing-0);
-}
-
-.inset-y-2 {
-  top: var(--cal-spacing-2);
-  bottom: var(--cal-spacing-2);
-}
-
-.\!bottom-16 {
-  bottom: var(--cal-spacing-16) !important;
-}
-
-.-bottom-0 {
-  bottom: calc(var(--cal-spacing-0) * -1);
-}
-
-.-bottom-0\.5 {
-  bottom: calc(var(--cal-spacing-0_5) * -1);
-}
-
-.-bottom-1 {
-  bottom: calc(var(--cal-spacing-1) * -1);
-}
-
-.-left-3 {
-  left: calc(var(--cal-spacing-3) * -1);
-}
-
-.-left-\[12px\] {
-  left: -12px;
-}
-
-.-right-0 {
-  right: calc(var(--cal-spacing-0) * -1);
-}
-
-.-right-0\.5 {
-  right: calc(var(--cal-spacing-0_5) * -1);
-}
-
-.-right-1 {
-  right: calc(var(--cal-spacing-1) * -1);
-}
-
-.-top-3 {
-  top: calc(var(--cal-spacing-3) * -1);
-}
-
-.-top-\[2px\] {
-  top: -2px;
-}
-
-.bottom-0 {
-  bottom: var(--cal-spacing-0);
-}
-
-.bottom-1 {
-  bottom: var(--cal-spacing-1);
-}
-
-.bottom-2 {
-  bottom: var(--cal-spacing-2);
-}
-
-.bottom-20 {
-  bottom: var(--cal-spacing-20);
-}
-
-.bottom-3 {
-  bottom: var(--cal-spacing-3);
-}
-
-.bottom-4 {
-  bottom: var(--cal-spacing-4);
-}
-
-.bottom-6 {
-  bottom: var(--cal-spacing-6);
-}
-
-.bottom-7 {
-  bottom: var(--cal-spacing-7);
-}
-
-.bottom-\[6px\] {
-  bottom: 6px;
-}
-
-.bottom-px {
-  bottom: var(--cal-spacing-px);
-}
-
-.left-0 {
-  left: var(--cal-spacing-0);
-}
-
-.left-0\.5 {
-  left: var(--cal-spacing-0_5);
-}
-
-.left-1 {
-  left: var(--cal-spacing-1);
-}
-
-.left-1\/2 {
-  left: 50%;
-}
-
-.left-2 {
-  left: var(--cal-spacing-2);
-}
-
-.left-3 {
-  left: var(--cal-spacing-3);
-}
-
-.left-4 {
-  left: var(--cal-spacing-4);
-}
-
-.left-6 {
-  left: var(--cal-spacing-6);
-}
-
-.left-8 {
-  left: var(--cal-spacing-8);
-}
-
-.left-\[50\%\] {
-  left: 50%;
-}
-
-.left-\[calc\(50\%\+calc\(var\(--booker-meta-width\2c 0px\)\/2\)\)\] {
-  left: calc(50% + calc(var(--booker-meta-width, 0px) / 2));
-}
-
-.left-px {
-  left: var(--cal-spacing-px);
-}
-
-.right-0 {
-  right: var(--cal-spacing-0);
-}
-
-.right-1 {
-  right: var(--cal-spacing-1);
-}
-
-.right-1\/2 {
-  right: 50%;
-}
-
-.right-2 {
-  right: var(--cal-spacing-2);
-}
-
-.right-3 {
-  right: var(--cal-spacing-3);
-}
-
-.right-4 {
-  right: var(--cal-spacing-4);
-}
-
-.right-6 {
-  right: var(--cal-spacing-6);
-}
-
-.right-8 {
-  right: var(--cal-spacing-8);
-}
-
-.right-\[2px\] {
-  right: 2px;
-}
-
-.right-px {
-  right: var(--cal-spacing-px);
-}
-
-.top-0 {
-  top: var(--cal-spacing-0);
-}
-
-.top-1 {
-  top: var(--cal-spacing-1);
-}
-
-.top-1\/2 {
-  top: 50%;
-}
-
-.top-2 {
-  top: var(--cal-spacing-2);
-}
-
-.top-2\.5 {
-  top: var(--cal-spacing-2_5);
-}
-
-.top-3 {
-  top: var(--cal-spacing-3);
-}
-
-.top-4 {
-  top: var(--cal-spacing-4);
-}
-
-.top-40 {
-  top: var(--cal-spacing-40);
-}
-
-.top-5 {
-  top: var(--cal-spacing-5);
-}
-
-.top-6 {
-  top: var(--cal-spacing-6);
-}
-
-.top-8 {
-  top: var(--cal-spacing-8);
-}
-
-.top-\[0\.9rem\] {
-  top: 0.9rem;
-}
-
-.top-\[50\%\] {
-  top: 50%;
-}
-
-.top-\[var\(--calendar-dates-sticky-offset\2c 0px\)\] {
-  top: var(--calendar-dates-sticky-offset, 0px);
-}
-
-.top-px {
-  top: var(--cal-spacing-px);
-}
-
-.isolate {
-  isolation: isolate;
-}
-
-.isolation-auto {
-  isolation: auto;
-}
-
-.-z-10 {
-  z-index: -10;
-}
-
-.-z-20 {
-  z-index: -20;
-}
-
-.z-0 {
-  z-index: 0;
-}
-
-.z-10 {
-  z-index: 10;
-}
-
-.z-20 {
-  z-index: 20;
-}
-
-.z-30 {
-  z-index: 30;
-}
-
-.z-40 {
-  z-index: 40;
-}
-
-.z-50 {
-  z-index: 50;
-}
-
-.z-\[100\] {
-  z-index: 100;
-}
-
-.z-\[2\] {
-  z-index: 2;
-}
-
-.z-\[60\] {
-  z-index: 60;
-}
-
-.z-\[65\] {
-  z-index: 65;
-}
-
-.z-\[80\] {
-  z-index: 80;
-}
-
-.order-2 {
-  order: 2;
-}
-
-.order-none {
-  order: 0;
-}
-
-.col-span-1 {
-  grid-column: span 1 / span 1;
-}
-
-.col-span-10 {
-  grid-column: span 10 / span 10;
-}
-
-.col-span-11 {
-  grid-column: span 11 / span 11;
-}
-
-.col-span-12 {
-  grid-column: span 12 / span 12;
-}
-
-.col-span-2 {
-  grid-column: span 2 / span 2;
-}
-
-.col-span-3 {
-  grid-column: span 3 / span 3;
-}
-
-.col-span-4 {
-  grid-column: span 4 / span 4;
-}
-
-.col-span-5 {
-  grid-column: span 5 / span 5;
-}
-
-.col-span-6 {
-  grid-column: span 6 / span 6;
-}
-
-.col-span-7 {
-  grid-column: span 7 / span 7;
-}
-
-.col-span-8 {
-  grid-column: span 8 / span 8;
-}
-
-.col-span-9 {
-  grid-column: span 9 / span 9;
-}
-
-.col-start-1 {
-  grid-column-start: 1;
-}
-
-.col-start-2 {
-  grid-column-start: 2;
-}
-
-.col-start-3 {
-  grid-column-start: 3;
-}
-
-.col-start-4 {
-  grid-column-start: 4;
-}
-
-.col-start-5 {
-  grid-column-start: 5;
-}
-
-.col-start-6 {
-  grid-column-start: 6;
-}
-
-.col-start-7 {
-  grid-column-start: 7;
-}
-
-.col-end-1 {
-  grid-column-end: 1;
-}
-
-.col-end-2 {
-  grid-column-end: 2;
-}
-
-.row-span-full {
-  grid-row: 1 / -1;
-}
-
-.row-start-1 {
-  grid-row-start: 1;
-}
-
-.row-end-1 {
-  grid-row-end: 1;
-}
-
-.float-right {
-  float: right;
-}
-
-.float-left {
-  float: left;
-}
-
-.\!-m-0 {
-  margin: calc(var(--cal-spacing-0) * -1) !important;
-}
-
-.\!m-0 {
-  margin: var(--cal-spacing-0) !important;
-}
-
-.m-0 {
-  margin: var(--cal-spacing-0);
-}
-
-.m-1 {
-  margin: var(--cal-spacing-1);
-}
-
-.m-10 {
-  margin: var(--cal-spacing-10);
-}
-
-.m-2 {
-  margin: var(--cal-spacing-2);
-}
-
-.m-5 {
-  margin: var(--cal-spacing-5);
-}
-
-.m-8 {
-  margin: var(--cal-spacing-8);
-}
-
-.m-auto {
-  margin: auto;
-}
-
-.\!my-0 {
-  margin-top: var(--cal-spacing-0) !important;
-  margin-bottom: var(--cal-spacing-0) !important;
-}
-
-.-mx-1 {
-  margin-left: calc(var(--cal-spacing-1) * -1);
-  margin-right: calc(var(--cal-spacing-1) * -1);
-}
-
-.-mx-2 {
-  margin-left: calc(var(--cal-spacing-2) * -1);
-  margin-right: calc(var(--cal-spacing-2) * -1);
-}
-
-.-mx-3 {
-  margin-left: calc(var(--cal-spacing-3) * -1);
-  margin-right: calc(var(--cal-spacing-3) * -1);
-}
-
-.-mx-4 {
-  margin-left: calc(var(--cal-spacing-4) * -1);
-  margin-right: calc(var(--cal-spacing-4) * -1);
-}
-
-.-mx-8 {
-  margin-left: calc(var(--cal-spacing-8) * -1);
-  margin-right: calc(var(--cal-spacing-8) * -1);
-}
-
-.-mx-9 {
-  margin-left: calc(var(--cal-spacing-9) * -1);
-  margin-right: calc(var(--cal-spacing-9) * -1);
-}
-
-.-my-1 {
-  margin-top: calc(var(--cal-spacing-1) * -1);
-  margin-bottom: calc(var(--cal-spacing-1) * -1);
-}
-
-.mx-0 {
-  margin-left: var(--cal-spacing-0);
-  margin-right: var(--cal-spacing-0);
-}
-
-.mx-1 {
-  margin-left: var(--cal-spacing-1);
-  margin-right: var(--cal-spacing-1);
-}
-
-.mx-10 {
-  margin-left: var(--cal-spacing-10);
-  margin-right: var(--cal-spacing-10);
-}
-
-.mx-2 {
-  margin-left: var(--cal-spacing-2);
-  margin-right: var(--cal-spacing-2);
-}
-
-.mx-3 {
-  margin-left: var(--cal-spacing-3);
-  margin-right: var(--cal-spacing-3);
-}
-
-.mx-4 {
-  margin-left: var(--cal-spacing-4);
-  margin-right: var(--cal-spacing-4);
-}
-
-.mx-5 {
-  margin-left: var(--cal-spacing-5);
-  margin-right: var(--cal-spacing-5);
-}
-
-.mx-6 {
-  margin-left: var(--cal-spacing-6);
-  margin-right: var(--cal-spacing-6);
-}
-
-.mx-8 {
-  margin-left: var(--cal-spacing-8);
-  margin-right: var(--cal-spacing-8);
-}
-
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.my-0 {
-  margin-top: var(--cal-spacing-0);
-  margin-bottom: var(--cal-spacing-0);
-}
-
-.my-1 {
-  margin-top: var(--cal-spacing-1);
-  margin-bottom: var(--cal-spacing-1);
-}
-
-.my-1\.5 {
-  margin-top: var(--cal-spacing-1_5);
-  margin-bottom: var(--cal-spacing-1_5);
-}
-
-.my-2 {
-  margin-top: var(--cal-spacing-2);
-  margin-bottom: var(--cal-spacing-2);
-}
-
-.my-2\.5 {
-  margin-top: var(--cal-spacing-2_5);
-  margin-bottom: var(--cal-spacing-2_5);
-}
-
-.my-24 {
-  margin-top: var(--cal-spacing-24);
-  margin-bottom: var(--cal-spacing-24);
-}
-
-.my-3 {
-  margin-top: var(--cal-spacing-3);
-  margin-bottom: var(--cal-spacing-3);
-}
-
-.my-4 {
-  margin-top: var(--cal-spacing-4);
-  margin-bottom: var(--cal-spacing-4);
-}
-
-.my-5 {
-  margin-top: var(--cal-spacing-5);
-  margin-bottom: var(--cal-spacing-5);
-}
-
-.my-6 {
-  margin-top: var(--cal-spacing-6);
-  margin-bottom: var(--cal-spacing-6);
-}
-
-.my-7 {
-  margin-top: var(--cal-spacing-7);
-  margin-bottom: var(--cal-spacing-7);
-}
-
-.my-8 {
-  margin-top: var(--cal-spacing-8);
-  margin-bottom: var(--cal-spacing-8);
-}
-
-.my-auto {
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
-.\!mb-0 {
-  margin-bottom: var(--cal-spacing-0) !important;
-}
-
-.\!mb-3 {
-  margin-bottom: var(--cal-spacing-3) !important;
-}
-
-.\!mt-0 {
-  margin-top: var(--cal-spacing-0) !important;
-}
-
-.\!mt-2 {
-  margin-top: var(--cal-spacing-2) !important;
-}
-
-.\!mt-4 {
-  margin-top: var(--cal-spacing-4) !important;
-}
-
-.-mb-0 {
-  margin-bottom: calc(var(--cal-spacing-0) * -1);
-}
-
-.-mb-1 {
-  margin-bottom: calc(var(--cal-spacing-1) * -1);
-}
-
-.-mb-2 {
-  margin-bottom: calc(var(--cal-spacing-2) * -1);
-}
-
-.-mb-20 {
-  margin-bottom: calc(var(--cal-spacing-20) * -1);
-}
-
-.-mb-3 {
-  margin-bottom: calc(var(--cal-spacing-3) * -1);
-}
-
-.-mb-4 {
-  margin-bottom: calc(var(--cal-spacing-4) * -1);
-}
-
-.-mb-6 {
-  margin-bottom: calc(var(--cal-spacing-6) * -1);
-}
-
-.-mb-9 {
-  margin-bottom: calc(var(--cal-spacing-9) * -1);
-}
-
-.-mb-px {
-  margin-bottom: calc(var(--cal-spacing-px) * -1);
-}
-
-.-ml-0 {
-  margin-left: calc(var(--cal-spacing-0) * -1);
-}
-
-.-ml-0\.5 {
-  margin-left: calc(var(--cal-spacing-0_5) * -1);
-}
-
-.-ml-1 {
-  margin-left: calc(var(--cal-spacing-1) * -1);
-}
-
-.-ml-12 {
-  margin-left: calc(var(--cal-spacing-12) * -1);
-}
-
-.-ml-14 {
-  margin-left: calc(var(--cal-spacing-14) * -1);
-}
-
-.-ml-2 {
-  margin-left: calc(var(--cal-spacing-2) * -1);
-}
-
-.-ml-3 {
-  margin-left: calc(var(--cal-spacing-3) * -1);
-}
-
-.-ml-4 {
-  margin-left: calc(var(--cal-spacing-4) * -1);
-}
-
-.-ml-6 {
-  margin-left: calc(var(--cal-spacing-6) * -1);
-}
-
-.-ml-8 {
-  margin-left: calc(var(--cal-spacing-8) * -1);
-}
-
-.-ml-\[13px\] {
-  margin-left: -13px;
-}
-
-.-ml-\[3px\] {
-  margin-left: -3px;
-}
-
-.-ml-px {
-  margin-left: calc(var(--cal-spacing-px) * -1);
-}
-
-.-mr-0 {
-  margin-right: calc(var(--cal-spacing-0) * -1);
-}
-
-.-mr-1 {
-  margin-right: calc(var(--cal-spacing-1) * -1);
-}
-
-.-mr-2 {
-  margin-right: calc(var(--cal-spacing-2) * -1);
-}
-
-.-mr-3 {
-  margin-right: calc(var(--cal-spacing-3) * -1);
-}
-
-.-mr-4 {
-  margin-right: calc(var(--cal-spacing-4) * -1);
-}
-
-.-mr-6 {
-  margin-right: calc(var(--cal-spacing-6) * -1);
-}
-
-.-mr-px {
-  margin-right: calc(var(--cal-spacing-px) * -1);
-}
-
-.-mt-0 {
-  margin-top: calc(var(--cal-spacing-0) * -1);
-}
-
-.-mt-0\.5 {
-  margin-top: calc(var(--cal-spacing-0_5) * -1);
-}
-
-.-mt-1 {
-  margin-top: calc(var(--cal-spacing-1) * -1);
-}
-
-.-mt-1\.5 {
-  margin-top: calc(var(--cal-spacing-1_5) * -1);
-}
-
-.-mt-10 {
-  margin-top: calc(var(--cal-spacing-10) * -1);
-}
-
-.-mt-11 {
-  margin-top: calc(var(--cal-spacing-11) * -1);
-}
-
-.-mt-2 {
-  margin-top: calc(var(--cal-spacing-2) * -1);
-}
-
-.-mt-2\.5 {
-  margin-top: calc(var(--cal-spacing-2_5) * -1);
-}
-
-.-mt-3 {
-  margin-top: calc(var(--cal-spacing-3) * -1);
-}
-
-.-mt-4 {
-  margin-top: calc(var(--cal-spacing-4) * -1);
-}
-
-.-mt-6 {
-  margin-top: calc(var(--cal-spacing-6) * -1);
-}
-
-.-mt-7 {
-  margin-top: calc(var(--cal-spacing-7) * -1);
-}
-
-.-mt-\[2px\] {
-  margin-top: -2px;
-}
-
-.-mt-px {
-  margin-top: calc(var(--cal-spacing-px) * -1);
-}
-
-.mb-0 {
-  margin-bottom: var(--cal-spacing-0);
-}
-
-.mb-0\.5 {
-  margin-bottom: var(--cal-spacing-0_5);
-}
-
-.mb-1 {
-  margin-bottom: var(--cal-spacing-1);
-}
-
-.mb-1\.5 {
-  margin-bottom: var(--cal-spacing-1_5);
-}
-
-.mb-10 {
-  margin-bottom: var(--cal-spacing-10);
-}
-
-.mb-11 {
-  margin-bottom: var(--cal-spacing-11);
-}
-
-.mb-16 {
-  margin-bottom: var(--cal-spacing-16);
-}
-
-.mb-2 {
-  margin-bottom: var(--cal-spacing-2);
-}
-
-.mb-2\.5 {
-  margin-bottom: var(--cal-spacing-2_5);
-}
-
-.mb-3 {
-  margin-bottom: var(--cal-spacing-3);
-}
-
-.mb-4 {
-  margin-bottom: var(--cal-spacing-4);
-}
-
-.mb-5 {
-  margin-bottom: var(--cal-spacing-5);
-}
-
-.mb-6 {
-  margin-bottom: var(--cal-spacing-6);
-}
-
-.mb-8 {
-  margin-bottom: var(--cal-spacing-8);
-}
-
-.mb-\[-1px\] {
-  margin-bottom: -1px;
-}
-
-.mb-\[9px\] {
-  margin-bottom: 9px;
-}
-
-.mb-auto {
-  margin-bottom: auto;
-}
-
-.mb-px {
-  margin-bottom: var(--cal-spacing-px);
-}
-
-.me-1 {
-  -webkit-margin-end: var(--cal-spacing-1);
-  margin-inline-end: var(--cal-spacing-1);
-}
-
-.me-1\.5 {
-  -webkit-margin-end: var(--cal-spacing-1_5);
-  margin-inline-end: var(--cal-spacing-1_5);
-}
-
-.me-2 {
-  -webkit-margin-end: var(--cal-spacing-2);
-  margin-inline-end: var(--cal-spacing-2);
-}
-
-.me-3 {
-  -webkit-margin-end: var(--cal-spacing-3);
-  margin-inline-end: var(--cal-spacing-3);
-}
-
-.me-4 {
-  -webkit-margin-end: var(--cal-spacing-4);
-  margin-inline-end: var(--cal-spacing-4);
-}
-
-.me-5 {
-  -webkit-margin-end: var(--cal-spacing-5);
-  margin-inline-end: var(--cal-spacing-5);
-}
-
-.me-\[10px\] {
-  -webkit-margin-end: 10px;
-  margin-inline-end: 10px;
-}
-
-.ml-0 {
-  margin-left: var(--cal-spacing-0);
-}
-
-.ml-1 {
-  margin-left: var(--cal-spacing-1);
-}
-
-.ml-1\.5 {
-  margin-left: var(--cal-spacing-1_5);
-}
-
-.ml-11 {
-  margin-left: var(--cal-spacing-11);
-}
-
-.ml-16 {
-  margin-left: var(--cal-spacing-16);
-}
-
-.ml-2 {
-  margin-left: var(--cal-spacing-2);
-}
-
-.ml-3 {
-  margin-left: var(--cal-spacing-3);
-}
-
-.ml-4 {
-  margin-left: var(--cal-spacing-4);
-}
-
-.ml-5 {
-  margin-left: var(--cal-spacing-5);
-}
-
-.ml-6 {
-  margin-left: var(--cal-spacing-6);
-}
-
-.ml-7 {
-  margin-left: var(--cal-spacing-7);
-}
-
-.ml-8 {
-  margin-left: var(--cal-spacing-8);
-}
-
-.ml-\[-1px\] {
-  margin-left: -1px;
-}
-
-.ml-\[-4px\] {
-  margin-left: -4px;
-}
-
-.ml-auto {
-  margin-left: auto;
-}
-
-.ml-px {
-  margin-left: var(--cal-spacing-px);
-}
-
-.mr-0 {
-  margin-right: var(--cal-spacing-0);
-}
-
-.mr-1 {
-  margin-right: var(--cal-spacing-1);
-}
-
-.mr-1\.5 {
-  margin-right: var(--cal-spacing-1_5);
-}
-
-.mr-12 {
-  margin-right: var(--cal-spacing-12);
-}
-
-.mr-2 {
-  margin-right: var(--cal-spacing-2);
-}
-
-.mr-3 {
-  margin-right: var(--cal-spacing-3);
-}
-
-.mr-4 {
-  margin-right: var(--cal-spacing-4);
-}
-
-.mr-5 {
-  margin-right: var(--cal-spacing-5);
-}
-
-.mr-6 {
-  margin-right: var(--cal-spacing-6);
-}
-
-.mr-7 {
-  margin-right: var(--cal-spacing-7);
-}
-
-.mr-8 {
-  margin-right: var(--cal-spacing-8);
-}
-
-.mr-\[11px\] {
-  margin-right: 11px;
-}
-
-.mr-\[9px\] {
-  margin-right: 9px;
-}
-
-.mr-auto {
-  margin-right: auto;
-}
-
-.mr-px {
-  margin-right: var(--cal-spacing-px);
-}
-
-.ms-1 {
-  -webkit-margin-start: var(--cal-spacing-1);
-  margin-inline-start: var(--cal-spacing-1);
-}
-
-.ms-2 {
-  -webkit-margin-start: var(--cal-spacing-2);
-  margin-inline-start: var(--cal-spacing-2);
-}
-
-.ms-3 {
-  -webkit-margin-start: var(--cal-spacing-3);
-  margin-inline-start: var(--cal-spacing-3);
-}
-
-.ms-4 {
-  -webkit-margin-start: var(--cal-spacing-4);
-  margin-inline-start: var(--cal-spacing-4);
-}
-
-.ms-auto {
-  -webkit-margin-start: auto;
-  margin-inline-start: auto;
-}
-
-.mt-0 {
-  margin-top: var(--cal-spacing-0);
-}
-
-.mt-0\.5 {
-  margin-top: var(--cal-spacing-0_5);
-}
-
-.mt-1 {
-  margin-top: var(--cal-spacing-1);
-}
-
-.mt-1\.5 {
-  margin-top: var(--cal-spacing-1_5);
-}
-
-.mt-10 {
-  margin-top: var(--cal-spacing-10);
-}
-
-.mt-12 {
-  margin-top: var(--cal-spacing-12);
-}
-
-.mt-2 {
-  margin-top: var(--cal-spacing-2);
-}
-
-.mt-2\.5 {
-  margin-top: var(--cal-spacing-2_5);
-}
-
-.mt-24 {
-  margin-top: var(--cal-spacing-24);
-}
-
-.mt-3 {
-  margin-top: var(--cal-spacing-3);
-}
-
-.mt-4 {
-  margin-top: var(--cal-spacing-4);
-}
-
-.mt-5 {
-  margin-top: var(--cal-spacing-5);
-}
-
-.mt-6 {
-  margin-top: var(--cal-spacing-6);
-}
-
-.mt-7 {
-  margin-top: var(--cal-spacing-7);
-}
-
-.mt-8 {
-  margin-top: var(--cal-spacing-8);
-}
-
-.mt-9 {
-  margin-top: var(--cal-spacing-9);
-}
-
-.mt-\[22px\] {
-  margin-top: 22px;
-}
-
-.mt-\[2px\] {
-  margin-top: 2px;
-}
-
-.mt-\[3px\] {
-  margin-top: 3px;
-}
-
-.mt-\[9px\] {
-  margin-top: 9px;
-}
-
-.mt-auto {
-  margin-top: auto;
-}
-
-.mt-px {
-  margin-top: var(--cal-spacing-px);
-}
-
-.box-border {
-  box-sizing: border-box;
-}
-
-.line-clamp-1 {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
-}
-
-.line-clamp-2 {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-}
-
-.line-clamp-3 {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 3;
-}
-
-.line-clamp-4 {
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 4;
-}
-
-.block {
-  display: block;
-}
-
-.inline-block {
-  display: inline-block;
-}
-
-.inline {
-  display: inline;
-}
-
-.\!flex {
-  display: flex !important;
-}
-
-.flex {
-  display: flex;
-}
-
-.inline-flex {
-  display: inline-flex;
-}
-
-.table {
-  display: table;
-}
-
-.inline-table {
-  display: inline-table;
-}
-
-.table-caption {
-  display: table-caption;
-}
-
-.table-cell {
-  display: table-cell;
-}
-
-.table-column {
-  display: table-column;
-}
-
-.table-column-group {
-  display: table-column-group;
-}
-
-.table-footer-group {
-  display: table-footer-group;
-}
-
-.table-header-group {
-  display: table-header-group;
-}
-
-.table-row-group {
-  display: table-row-group;
-}
-
-.table-row {
-  display: table-row;
-}
-
-.flow-root {
-  display: flow-root;
-}
-
-.grid {
-  display: grid;
-}
-
-.inline-grid {
-  display: inline-grid;
-}
-
-.contents {
-  display: contents;
-}
-
-.list-item {
-  display: list-item;
-}
-
-.\!hidden {
-  display: none !important;
-}
-
-.hidden {
-  display: none;
-}
-
-.aspect-square {
-  aspect-ratio: 1 / 1;
-}
-
-.aspect-video {
-  aspect-ratio: 16 / 9;
-}
-
-.\!h-32 {
-  height: var(--cal-spacing-32) !important;
-}
-
-.h-0 {
-  height: var(--cal-spacing-0);
-}
-
-.h-0\.5 {
-  height: var(--cal-spacing-0_5);
-}
-
-.h-1 {
-  height: var(--cal-spacing-1);
-}
-
-.h-10 {
-  height: var(--cal-spacing-10);
-}
-
-.h-11 {
-  height: var(--cal-spacing-11);
-}
-
-.h-12 {
-  height: var(--cal-spacing-12);
-}
-
-.h-14 {
-  height: var(--cal-spacing-14);
-}
-
-.h-16 {
-  height: var(--cal-spacing-16);
-}
-
-.h-2 {
-  height: var(--cal-spacing-2);
-}
-
-.h-2\.5 {
-  height: var(--cal-spacing-2_5);
-}
-
-.h-20 {
-  height: var(--cal-spacing-20);
-}
-
-.h-24 {
-  height: var(--cal-spacing-24);
-}
-
-.h-3 {
-  height: var(--cal-spacing-3);
-}
-
-.h-3\.5 {
-  height: var(--cal-spacing-3_5);
-}
-
-.h-32 {
-  height: var(--cal-spacing-32);
-}
-
-.h-4 {
-  height: var(--cal-spacing-4);
-}
-
-.h-40 {
-  height: var(--cal-spacing-40);
-}
-
-.h-44 {
-  height: var(--cal-spacing-44);
-}
-
-.h-5 {
-  height: var(--cal-spacing-5);
-}
-
-.h-52 {
-  height: var(--cal-spacing-52);
-}
-
-.h-6 {
-  height: var(--cal-spacing-6);
-}
-
-.h-60 {
-  height: var(--cal-spacing-60);
-}
-
-.h-64 {
-  height: var(--cal-spacing-64);
-}
-
-.h-7 {
-  height: var(--cal-spacing-7);
-}
-
-.h-8 {
-  height: var(--cal-spacing-8);
-}
-
-.h-80 {
-  height: var(--cal-spacing-80);
-}
-
-.h-9 {
-  height: var(--cal-spacing-9);
-}
-
-.h-\[--calendar-offset-top\] {
-  height: var(--calendar-offset-top);
-}
-
-.h-\[100vh\] {
-  height: 100vh;
-}
-
-.h-\[102px\] {
-  height: 102px;
-}
-
-.h-\[10px\] {
-  height: 10px;
-}
-
-.h-\[110px\] {
-  height: 110px;
-}
-
-.h-\[12px\] {
-  height: 12px;
-}
-
-.h-\[14px\] {
-  height: 14px;
-}
-
-.h-\[150px\] {
-  height: 150px;
-}
-
-.h-\[16px\] {
-  height: 16px;
-}
-
-.h-\[1px\] {
-  height: 1px;
-}
-
-.h-\[200px\] {
-  height: 200px;
-}
-
-.h-\[20px\] {
-  height: 20px;
-}
-
-.h-\[212px\] {
-  height: 212px;
-}
-
-.h-\[216px\] {
-  height: 216px;
-}
-
-.h-\[26px\] {
-  height: 26px;
-}
-
-.h-\[28px\] {
-  height: 28px;
-}
-
-.h-\[34px\] {
-  height: 34px;
-}
-
-.h-\[36px\] {
-  height: 36px;
-}
-
-.h-\[38px\] {
-  height: 38px;
-}
-
-.h-\[400px\] {
-  height: 400px;
-}
-
-.h-\[40px\] {
-  height: 40px;
-}
-
-.h-\[414px\] {
-  height: 414px;
-}
-
-.h-\[54px\] {
-  height: 54px;
-}
-
-.h-\[55vh\] {
-  height: 55vh;
-}
-
-.h-\[5px\] {
-  height: 5px;
-}
-
-.h-\[70\%\] {
-  height: 70%;
-}
-
-.h-\[70px\] {
-  height: 70px;
-}
-
-.h-\[72px\] {
-  height: 72px;
-}
-
-.h-\[75dvh\] {
-  height: 75dvh;
-}
-
-.h-\[80dvh\] {
-  height: 80dvh;
-}
-
-.h-\[90px\] {
-  height: 90px;
-}
-
-.h-\[95vh\] {
-  height: 95vh;
-}
-
-.h-\[calc\(100\%-50px\)\] {
-  height: calc(100% - 50px);
-}
-
-.h-auto {
-  height: auto;
-}
-
-.h-fit {
-  height: -moz-fit-content;
-  height: fit-content;
-}
-
-.h-full {
-  height: 100%;
-}
-
-.h-min {
-  height: -moz-min-content;
-  height: min-content;
-}
-
-.h-px {
-  height: var(--cal-spacing-px);
-}
-
-.h-screen {
-  height: 100vh;
-}
-
-.max-h-20 {
-  max-height: var(--cal-spacing-20);
-}
-
-.max-h-24 {
-  max-height: var(--cal-spacing-24);
-}
-
-.max-h-4 {
-  max-height: var(--cal-spacing-4);
-}
-
-.max-h-40 {
-  max-height: var(--cal-spacing-40);
-}
-
-.max-h-48 {
-  max-height: var(--cal-spacing-48);
-}
-
-.max-h-6 {
-  max-height: var(--cal-spacing-6);
-}
-
-.max-h-64 {
-  max-height: var(--cal-spacing-64);
-}
-
-.max-h-72 {
-  max-height: var(--cal-spacing-72);
-}
-
-.max-h-80 {
-  max-height: var(--cal-spacing-80);
-}
-
-.max-h-9 {
-  max-height: var(--cal-spacing-9);
-}
-
-.max-h-97 {
-  max-height: 25rem;
-}
-
-.max-h-\[180px\] {
-  max-height: 180px;
-}
-
-.max-h-\[300px\] {
-  max-height: 300px;
-}
-
-.max-h-\[390px\] {
-  max-height: 390px;
-}
-
-.max-h-\[3em\] {
-  max-height: 3em;
-}
-
-.max-h-\[400px\] {
-  max-height: 400px;
-}
-
-.max-h-\[45vh\] {
-  max-height: 45vh;
-}
-
-.max-h-\[500px\] {
-  max-height: 500px;
-}
-
-.max-h-\[80dvh\] {
-  max-height: 80dvh;
-}
-
-.max-h-\[80vh\] {
-  max-height: 80vh;
-}
-
-.max-h-\[85vh\] {
-  max-height: 85vh;
-}
-
-.max-h-\[95vh\] {
-  max-height: 95vh;
-}
-
-.max-h-fit {
-  max-height: -moz-fit-content;
-  max-height: fit-content;
-}
-
-.max-h-full {
-  max-height: 100%;
-}
-
-.max-h-none {
-  max-height: none;
-}
-
-.max-h-screen {
-  max-height: 100vh;
-}
-
-.\!min-h-0 {
-  min-height: var(--cal-spacing-0) !important;
-}
-
-.\!min-h-9 {
-  min-height: var(--cal-spacing-9) !important;
-}
-
-.\!min-h-\[36px\] {
-  min-height: 36px !important;
-}
-
-.min-h-10 {
-  min-height: var(--cal-spacing-10);
-}
-
-.min-h-14 {
-  min-height: var(--cal-spacing-14);
-}
-
-.min-h-16 {
-  min-height: var(--cal-spacing-16);
-}
-
-.min-h-20 {
-  min-height: var(--cal-spacing-20);
-}
-
-.min-h-24 {
-  min-height: var(--cal-spacing-24);
-}
-
-.min-h-3 {
-  min-height: var(--cal-spacing-3);
-}
-
-.min-h-3\.5 {
-  min-height: var(--cal-spacing-3_5);
-}
-
-.min-h-32 {
-  min-height: var(--cal-spacing-32);
-}
-
-.min-h-36 {
-  min-height: var(--cal-spacing-36);
-}
-
-.min-h-4 {
-  min-height: var(--cal-spacing-4);
-}
-
-.min-h-48 {
-  min-height: var(--cal-spacing-48);
-}
-
-.min-h-5 {
-  min-height: var(--cal-spacing-5);
-}
-
-.min-h-6 {
-  min-height: var(--cal-spacing-6);
-}
-
-.min-h-7 {
-  min-height: var(--cal-spacing-7);
-}
-
-.min-h-8 {
-  min-height: var(--cal-spacing-8);
-}
-
-.min-h-80 {
-  min-height: var(--cal-spacing-80);
-}
-
-.min-h-9 {
-  min-height: var(--cal-spacing-9);
-}
-
-.min-h-\[150px\] {
-  min-height: 150px;
-}
-
-.min-h-\[180px\] {
-  min-height: 180px;
-}
-
-.min-h-\[200px\] {
-  min-height: 200px;
-}
-
-.min-h-\[295px\] {
-  min-height: 295px;
-}
-
-.min-h-\[315px\] {
-  min-height: 315px;
-}
-
-.min-h-\[36px\] {
-  min-height: 36px;
-}
-
-.min-h-\[450px\] {
-  min-height: 450px;
-}
-
-.min-h-\[80px\] {
-  min-height: 80px;
-}
-
-.min-h-\[calc\(100dvh\)\] {
-  min-height: calc(100dvh);
-}
-
-.min-h-full {
-  min-height: 100%;
-}
-
-.min-h-screen {
-  min-height: 100vh;
-}
-
-.\!w-32 {
-  width: var(--cal-spacing-32) !important;
-}
-
-.\!w-48 {
-  width: var(--cal-spacing-48) !important;
-}
-
-.\!w-64 {
-  width: var(--cal-spacing-64) !important;
-}
-
-.\!w-auto {
-  width: auto !important;
-}
-
-.w-0 {
-  width: var(--cal-spacing-0);
-}
-
-.w-0\.5 {
-  width: var(--cal-spacing-0_5);
-}
-
-.w-1 {
-  width: var(--cal-spacing-1);
-}
-
-.w-1\/12 {
-  width: 8.333333%;
-}
-
-.w-1\/2 {
-  width: 50%;
-}
-
-.w-1\/3 {
-  width: 33.333333%;
-}
-
-.w-1\/4 {
-  width: 25%;
-}
-
-.w-1\/5 {
-  width: 20%;
-}
-
-.w-1\/6 {
-  width: 16.666667%;
-}
-
-.w-10 {
-  width: var(--cal-spacing-10);
-}
-
-.w-10\/12 {
-  width: 83.333333%;
-}
-
-.w-11 {
-  width: var(--cal-spacing-11);
-}
-
-.w-12 {
-  width: var(--cal-spacing-12);
-}
-
-.w-14 {
-  width: var(--cal-spacing-14);
-}
-
-.w-16 {
-  width: var(--cal-spacing-16);
-}
-
-.w-2 {
-  width: var(--cal-spacing-2);
-}
-
-.w-2\.5 {
-  width: var(--cal-spacing-2_5);
-}
-
-.w-2\/3 {
-  width: 66.666667%;
-}
-
-.w-20 {
-  width: var(--cal-spacing-20);
-}
-
-.w-24 {
-  width: var(--cal-spacing-24);
-}
-
-.w-28 {
-  width: var(--cal-spacing-28);
-}
-
-.w-3 {
-  width: var(--cal-spacing-3);
-}
-
-.w-3\.5 {
-  width: var(--cal-spacing-3_5);
-}
-
-.w-3\/4 {
-  width: 75%;
-}
-
-.w-3\/5 {
-  width: 60%;
-}
-
-.w-32 {
-  width: var(--cal-spacing-32);
-}
-
-.w-36 {
-  width: var(--cal-spacing-36);
-}
-
-.w-4 {
-  width: var(--cal-spacing-4);
-}
-
-.w-4\/5 {
-  width: 80%;
-}
-
-.w-40 {
-  width: var(--cal-spacing-40);
-}
-
-.w-44 {
-  width: var(--cal-spacing-44);
-}
-
-.w-48 {
-  width: var(--cal-spacing-48);
-}
-
-.w-5 {
-  width: var(--cal-spacing-5);
-}
-
-.w-52 {
-  width: var(--cal-spacing-52);
-}
-
-.w-56 {
-  width: var(--cal-spacing-56);
-}
-
-.w-6 {
-  width: var(--cal-spacing-6);
-}
-
-.w-60 {
-  width: var(--cal-spacing-60);
-}
-
-.w-64 {
-  width: var(--cal-spacing-64);
-}
-
-.w-7 {
-  width: var(--cal-spacing-7);
-}
-
-.w-72 {
-  width: var(--cal-spacing-72);
-}
-
-.w-8 {
-  width: var(--cal-spacing-8);
-}
-
-.w-80 {
-  width: var(--cal-spacing-80);
-}
-
-.w-9 {
-  width: var(--cal-spacing-9);
-}
-
-.w-\[100\%\] {
-  width: 100%;
-}
-
-.w-\[100px\] {
-  width: 100px;
-}
-
-.w-\[106px\] {
-  width: 106px;
-}
-
-.w-\[10px\] {
-  width: 10px;
-}
-
-.w-\[110px\] {
-  width: 110px;
-}
-
-.w-\[120px\] {
-  width: 120px;
-}
-
-.w-\[12px\] {
-  width: 12px;
-}
-
-.w-\[130px\] {
-  width: 130px;
-}
-
-.w-\[14px\] {
-  width: 14px;
-}
-
-.w-\[16px\] {
-  width: 16px;
-}
-
-.w-\[1px\] {
-  width: 1px;
-}
-
-.w-\[20\%\] {
-  width: 20%;
-}
-
-.w-\[200px\] {
-  width: 200px;
-}
-
-.w-\[20px\] {
-  width: 20px;
-}
-
-.w-\[220px\] {
-  width: 220px;
-}
-
-.w-\[250px\] {
-  width: 250px;
-}
-
-.w-\[276px\] {
-  width: 276px;
-}
-
-.w-\[27px\] {
-  width: 27px;
-}
-
-.w-\[28px\] {
-  width: 28px;
-}
-
-.w-\[30rem\] {
-  width: 30rem;
-}
-
-.w-\[34px\] {
-  width: 34px;
-}
-
-.w-\[36px\] {
-  width: 36px;
-}
-
-.w-\[40rem\] {
-  width: 40rem;
-}
-
-.w-\[42px\] {
-  width: 42px;
-}
-
-.w-\[46px\] {
-  width: 46px;
-}
-
-.w-\[49px\] {
-  width: 49px;
-}
-
-.w-\[5px\] {
-  width: 5px;
-}
-
-.w-\[70px\] {
-  width: 70px;
-}
-
-.w-\[72px\] {
-  width: 72px;
-}
-
-.w-\[80vw\] {
-  width: 80vw;
-}
-
-.w-\[90\%\] {
-  width: 90%;
-}
-
-.w-\[90px\] {
-  width: 90px;
-}
-
-.w-\[95vw\] {
-  width: 95vw;
-}
-
-.w-\[calc\(100\%\+16px\)\] {
-  width: calc(100% + 16px);
-}
-
-.w-\[calc\(100\%-1px\)\] {
-  width: calc(100% - 1px);
-}
-
-.w-\[var\(--booker-timeslots-width\)\] {
-  width: var(--booker-timeslots-width);
-}
-
-.w-auto {
-  width: auto;
-}
-
-.w-fit {
-  width: -moz-fit-content;
-  width: fit-content;
-}
-
-.w-full {
-  width: 100%;
-}
-
-.w-max {
-  width: -moz-max-content;
-  width: max-content;
-}
-
-.w-px {
-  width: var(--cal-spacing-px);
-}
-
-.w-screen {
-  width: 100vw;
-}
-
-.min-w-0 {
-  min-width: var(--cal-spacing-0);
-}
-
-.min-w-10 {
-  min-width: var(--cal-spacing-10);
-}
-
-.min-w-16 {
-  min-width: var(--cal-spacing-16);
-}
-
-.min-w-24 {
-  min-width: var(--cal-spacing-24);
-}
-
-.min-w-3 {
-  min-width: var(--cal-spacing-3);
-}
-
-.min-w-3\.5 {
-  min-width: var(--cal-spacing-3_5);
-}
-
-.min-w-32 {
-  min-width: var(--cal-spacing-32);
-}
-
-.min-w-4 {
-  min-width: var(--cal-spacing-4);
-}
-
-.min-w-40 {
-  min-width: var(--cal-spacing-40);
-}
-
-.min-w-48 {
-  min-width: var(--cal-spacing-48);
-}
-
-.min-w-5 {
-  min-width: var(--cal-spacing-5);
-}
-
-.min-w-56 {
-  min-width: var(--cal-spacing-56);
-}
-
-.min-w-6 {
-  min-width: var(--cal-spacing-6);
-}
-
-.min-w-60 {
-  min-width: var(--cal-spacing-60);
-}
-
-.min-w-8 {
-  min-width: var(--cal-spacing-8);
-}
-
-.min-w-80 {
-  min-width: var(--cal-spacing-80);
-}
-
-.min-w-9 {
-  min-width: var(--cal-spacing-9);
-}
-
-.min-w-\[10rem\] {
-  min-width: 10rem;
-}
-
-.min-w-\[150px\] {
-  min-width: 150px;
-}
-
-.min-w-\[180px\] {
-  min-width: 180px;
-}
-
-.min-w-\[200px\] {
-  min-width: 200px;
-}
-
-.min-w-\[36px\] {
-  min-width: 36px;
-}
-
-.min-w-\[40px\] {
-  min-width: 40px;
-}
-
-.min-w-\[42px\] {
-  min-width: 42px;
-}
-
-.min-w-\[88px\] {
-  min-width: 88px;
-}
-
-.min-w-\[90\%\] {
-  min-width: 90%;
-}
-
-.min-w-fit {
-  min-width: -moz-fit-content;
-  min-width: fit-content;
-}
-
-.min-w-full {
-  min-width: 100%;
-}
-
-.min-w-max {
-  min-width: -moz-max-content;
-  min-width: max-content;
-}
-
-.min-w-min {
-  min-width: -moz-min-content;
-  min-width: min-content;
-}
-
-.max-w-24 {
-  max-width: var(--cal-spacing-24);
-}
-
-.max-w-28 {
-  max-width: var(--cal-spacing-28);
-}
-
-.max-w-2xl {
-  max-width: 42rem;
-}
-
-.max-w-36 {
-  max-width: var(--cal-spacing-36);
-}
-
-.max-w-3xl {
-  max-width: 48rem;
-}
-
-.max-w-44 {
-  max-width: var(--cal-spacing-44);
-}
-
-.max-w-4xl {
-  max-width: 56rem;
-}
-
-.max-w-52 {
-  max-width: var(--cal-spacing-52);
-}
-
-.max-w-56 {
-  max-width: var(--cal-spacing-56);
-}
-
-.max-w-5xl {
-  max-width: 64rem;
-}
-
-.max-w-60 {
-  max-width: var(--cal-spacing-60);
-}
-
-.max-w-64 {
-  max-width: var(--cal-spacing-64);
-}
-
-.max-w-7xl {
-  max-width: 80rem;
-}
-
-.max-w-80 {
-  max-width: var(--cal-spacing-80);
-}
-
-.max-w-\[1440px\] {
-  max-width: 1440px;
-}
-
-.max-w-\[2000px\] {
-  max-width: 2000px;
-}
-
-.max-w-\[200px\] {
-  max-width: 200px;
-}
-
-.max-w-\[22rem\] {
-  max-width: 22rem;
-}
-
-.max-w-\[250px\] {
-  max-width: 250px;
-}
-
-.max-w-\[280px\] {
-  max-width: 280px;
-}
-
-.max-w-\[420px\] {
-  max-width: 420px;
-}
-
-.max-w-\[43em\] {
-  max-width: 43em;
-}
-
-.max-w-\[450px\] {
-  max-width: 450px;
-}
-
-.max-w-\[500px\] {
-  max-width: 500px;
-}
-
-.max-w-\[50ch\] {
-  max-width: 50ch;
-}
-
-.max-w-\[600px\] {
-  max-width: 600px;
-}
-
-.max-w-\[90\%\] {
-  max-width: 90%;
-}
-
-.max-w-\[90vw\] {
-  max-width: 90vw;
-}
-
-.max-w-full {
-  max-width: 100%;
-}
-
-.max-w-lg {
-  max-width: 32rem;
-}
-
-.max-w-md {
-  max-width: 28rem;
-}
-
-.max-w-none {
-  max-width: none;
-}
-
-.max-w-screen {
-  max-width: 100vw;
-}
-
-.max-w-screen-lg {
-  max-width: 1024px;
-}
-
-.max-w-screen-sm {
-  max-width: 640px;
-}
-
-.max-w-sm {
-  max-width: 24rem;
-}
-
-.max-w-xl {
-  max-width: 36rem;
-}
-
-.max-w-xs {
-  max-width: 20rem;
-}
-
-.flex-1 {
-  flex: 1 1 0%;
-}
-
-.flex-auto {
-  flex: 1 1 auto;
-}
-
-.flex-none {
-  flex: none;
-}
-
-.flex-shrink {
-  flex-shrink: 1;
-}
-
-.flex-shrink-0 {
-  flex-shrink: 0;
-}
-
-.shrink {
-  flex-shrink: 1;
-}
-
-.shrink-0 {
-  flex-shrink: 0;
-}
-
-.flex-grow {
-  flex-grow: 1;
-}
-
-.flex-grow-0 {
-  flex-grow: 0;
-}
-
-.grow {
-  flex-grow: 1;
-}
-
-.basis-1\/3 {
-  flex-basis: 33.333333%;
-}
-
-.basis-1\/5 {
-  flex-basis: 20%;
-}
-
-.basis-2\/3 {
-  flex-basis: 66.666667%;
-}
-
-.basis-2\/5 {
-  flex-basis: 40%;
-}
-
-.basis-3\/5 {
-  flex-basis: 60%;
-}
-
-.table-fixed {
-  table-layout: fixed;
-}
-
-.caption-bottom {
-  caption-side: bottom;
-}
-
-.border-collapse {
-  border-collapse: collapse;
-}
-
-.border-separate {
-  border-collapse: separate;
-}
-
-.border-spacing-0 {
-  --tw-border-spacing-x: var(--cal-spacing-0);
-  --tw-border-spacing-y: var(--cal-spacing-0);
-  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
-}
-
-.origin-center {
-  transform-origin: center;
-}
-
-.origin-top-right {
-  transform-origin: top right;
-}
-
-.-translate-x-0 {
-  --tw-translate-x: calc(var(--cal-spacing-0) * -1);
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.-translate-x-0\.5 {
-  --tw-translate-x: calc(var(--cal-spacing-0_5) * -1);
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.-translate-x-1\/2 {
-  --tw-translate-x: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.-translate-x-\[228px\] {
-  --tw-translate-x: -228px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.-translate-x-\[232px\] {
-  --tw-translate-x: -232px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.-translate-x-full {
-  --tw-translate-x: -100%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.-translate-y-1\/2 {
-  --tw-translate-y: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.translate-x-0 {
-  --tw-translate-x: var(--cal-spacing-0);
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.translate-x-1\/2 {
-  --tw-translate-x: 50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.translate-x-\[-50\%\] {
-  --tw-translate-x: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.translate-x-full {
-  --tw-translate-x: 100%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.translate-y-\[-50\%\] {
-  --tw-translate-y: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.translate-y-\[2px\] {
-  --tw-translate-y: 2px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.translate-y-\[8px\] {
-  --tw-translate-y: 8px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.-rotate-180 {
-  --tw-rotate: -180deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.-rotate-\[24deg\] {
-  --tw-rotate: -24deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.rotate-180 {
-  --tw-rotate: 180deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.rotate-45 {
-  --tw-rotate: 45deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.rotate-\[24deg\] {
-  --tw-rotate: 24deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.rotate-\[56deg\] {
-  --tw-rotate: 56deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.scale-0 {
-  --tw-scale-x: 0;
-  --tw-scale-y: 0;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.transform {
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-@keyframes fade-in-up {
-
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-
-  to {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-.animate-fade-in-up {
-  animation: fade-in-up 600ms var(--animation-delay, 0ms) cubic-bezier(.21, 1.02, .73, 1) forwards;
-}
-
-@keyframes pulse {
-
-  50% {
-    opacity: .5;
-  }
-}
-
-.animate-pulse {
-  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-@keyframes spin {
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.animate-spin {
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spinning {
-
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.animate-spinning {
-  animation: spinning 0.75s linear infinite;
-}
-
-.\!cursor-pointer {
-  cursor: pointer !important;
-}
-
-.cursor-col-resize {
-  cursor: col-resize;
-}
-
-.cursor-default {
-  cursor: default;
-}
-
-.cursor-none {
-  cursor: none;
-}
-
-.cursor-not-allowed {
-  cursor: not-allowed;
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.cursor-text {
-  cursor: text;
-}
-
-.cursor-wait {
-  cursor: wait;
-}
-
-.touch-none {
-  touch-action: none;
-}
-
-.select-none {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-}
-
-.resize {
-  resize: both;
-}
-
-.snap-x {
-  scroll-snap-type: x var(--tw-scroll-snap-strictness);
-}
-
-.snap-mandatory {
-  --tw-scroll-snap-strictness: mandatory;
-}
-
-.snap-center {
-  scroll-snap-align: center;
-}
-
-.list-decimal {
-  list-style-type: decimal;
-}
-
-.list-disc {
-  list-style-type: disc;
-}
-
-.list-none {
-  list-style-type: none;
-}
-
-.appearance-none {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-}
-
-.columns-3 {
-  -moz-columns: 3;
-  columns: 3;
-}
-
-.auto-cols-auto {
-  grid-auto-columns: auto;
-}
-
-.auto-cols-fr {
-  grid-auto-columns: minmax(0, 1fr);
-}
-
-.grid-cols-1 {
-  grid-template-columns: repeat(1, minmax(0, 1fr));
-}
-
-.grid-cols-10 {
-  grid-template-columns: repeat(10, minmax(0, 1fr));
-}
-
-.grid-cols-11 {
-  grid-template-columns: repeat(11, minmax(0, 1fr));
-}
-
-.grid-cols-12 {
-  grid-template-columns: repeat(12, minmax(0, 1fr));
-}
-
-.grid-cols-2 {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
-.grid-cols-3 {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-.grid-cols-4 {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-}
-
-.grid-cols-5 {
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-}
-
-.grid-cols-6 {
-  grid-template-columns: repeat(6, minmax(0, 1fr));
-}
-
-.grid-cols-7 {
-  grid-template-columns: repeat(7, minmax(0, 1fr));
-}
-
-.grid-cols-8 {
-  grid-template-columns: repeat(8, minmax(0, 1fr));
-}
-
-.grid-cols-9 {
-  grid-template-columns: repeat(9, minmax(0, 1fr));
-}
-
-.grid-cols-none {
-  grid-template-columns: none;
-}
-
-.grid-rows-1 {
-  grid-template-rows: repeat(1, minmax(0, 1fr));
-}
-
-.grid-rows-2 {
-  grid-template-rows: repeat(2, minmax(0, 1fr));
-}
-
-.grid-rows-6 {
-  grid-template-rows: repeat(6, minmax(0, 1fr));
-}
-
-.flex-row {
-  flex-direction: row;
-}
-
-.flex-row-reverse {
-  flex-direction: row-reverse;
-}
-
-.flex-col {
-  flex-direction: column;
-}
-
-.flex-col-reverse {
-  flex-direction: column-reverse;
-}
-
-.flex-wrap {
-  flex-wrap: wrap;
-}
-
-.flex-nowrap {
-  flex-wrap: nowrap;
-}
-
-.place-items-center {
-  place-items: center;
-}
-
-.content-center {
-  align-content: center;
-}
-
-.items-start {
-  align-items: flex-start;
-}
-
-.items-end {
-  align-items: flex-end;
-}
-
-.items-center {
-  align-items: center;
-}
-
-.items-baseline {
-  align-items: baseline;
-}
-
-.items-stretch {
-  align-items: stretch;
-}
-
-.justify-start {
-  justify-content: flex-start;
-}
-
-.justify-end {
-  justify-content: flex-end;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-.justify-between {
-  justify-content: space-between;
-}
-
-.justify-around {
-  justify-content: space-around;
-}
-
-.justify-evenly {
-  justify-content: space-evenly;
-}
-
-.justify-items-center {
-  justify-items: center;
-}
-
-.gap-0 {
-  gap: var(--cal-spacing-0);
-}
-
-.gap-0\.5 {
-  gap: var(--cal-spacing-0_5);
-}
-
-.gap-1 {
-  gap: var(--cal-spacing-1);
-}
-
-.gap-1\.5 {
-  gap: var(--cal-spacing-1_5);
-}
-
-.gap-2 {
-  gap: var(--cal-spacing-2);
-}
-
-.gap-3 {
-  gap: var(--cal-spacing-3);
-}
-
-.gap-4 {
-  gap: var(--cal-spacing-4);
-}
-
-.gap-5 {
-  gap: var(--cal-spacing-5);
-}
-
-.gap-6 {
-  gap: var(--cal-spacing-6);
-}
-
-.gap-8 {
-  gap: var(--cal-spacing-8);
-}
-
-.gap-x-1 {
-  -moz-column-gap: var(--cal-spacing-1);
-  column-gap: var(--cal-spacing-1);
-}
-
-.gap-x-2 {
-  -moz-column-gap: var(--cal-spacing-2);
-  column-gap: var(--cal-spacing-2);
-}
-
-.gap-x-3 {
-  -moz-column-gap: var(--cal-spacing-3);
-  column-gap: var(--cal-spacing-3);
-}
-
-.gap-x-4 {
-  -moz-column-gap: var(--cal-spacing-4);
-  column-gap: var(--cal-spacing-4);
-}
-
-.gap-x-5 {
-  -moz-column-gap: var(--cal-spacing-5);
-  column-gap: var(--cal-spacing-5);
-}
-
-.gap-x-6 {
-  -moz-column-gap: var(--cal-spacing-6);
-  column-gap: var(--cal-spacing-6);
-}
-
-.gap-y-1 {
-  row-gap: var(--cal-spacing-1);
-}
-
-.gap-y-2 {
-  row-gap: var(--cal-spacing-2);
-}
-
-.gap-y-3 {
-  row-gap: var(--cal-spacing-3);
-}
-
-.gap-y-4 {
-  row-gap: var(--cal-spacing-4);
-}
-
-.gap-y-6 {
-  row-gap: var(--cal-spacing-6);
-}
-
-.gap-y-8 {
-  row-gap: var(--cal-spacing-8);
-}
-
-.space-x-0> :not([hidden])~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(var(--cal-spacing-0) * var(--tw-space-x-reverse));
-  margin-left: calc(var(--cal-spacing-0) * calc(1 - var(--tw-space-x-reverse)));
-}
-
-.space-x-0\.5> :not([hidden])~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(var(--cal-spacing-0_5) * var(--tw-space-x-reverse));
-  margin-left: calc(var(--cal-spacing-0_5) * calc(1 - var(--tw-space-x-reverse)));
-}
-
-.space-x-1> :not([hidden])~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(var(--cal-spacing-1) * var(--tw-space-x-reverse));
-  margin-left: calc(var(--cal-spacing-1) * calc(1 - var(--tw-space-x-reverse)));
-}
-
-.space-x-1\.5> :not([hidden])~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(var(--cal-spacing-1_5) * var(--tw-space-x-reverse));
-  margin-left: calc(var(--cal-spacing-1_5) * calc(1 - var(--tw-space-x-reverse)));
-}
-
-.space-x-11> :not([hidden])~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(var(--cal-spacing-11) * var(--tw-space-x-reverse));
-  margin-left: calc(var(--cal-spacing-11) * calc(1 - var(--tw-space-x-reverse)));
-}
-
-.space-x-2> :not([hidden])~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(var(--cal-spacing-2) * var(--tw-space-x-reverse));
-  margin-left: calc(var(--cal-spacing-2) * calc(1 - var(--tw-space-x-reverse)));
-}
-
-.space-x-2\.5> :not([hidden])~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(var(--cal-spacing-2_5) * var(--tw-space-x-reverse));
-  margin-left: calc(var(--cal-spacing-2_5) * calc(1 - var(--tw-space-x-reverse)));
-}
-
-.space-x-3> :not([hidden])~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(var(--cal-spacing-3) * var(--tw-space-x-reverse));
-  margin-left: calc(var(--cal-spacing-3) * calc(1 - var(--tw-space-x-reverse)));
-}
-
-.space-x-3\.5> :not([hidden])~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(var(--cal-spacing-3_5) * var(--tw-space-x-reverse));
-  margin-left: calc(var(--cal-spacing-3_5) * calc(1 - var(--tw-space-x-reverse)));
-}
-
-.space-x-4> :not([hidden])~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(var(--cal-spacing-4) * var(--tw-space-x-reverse));
-  margin-left: calc(var(--cal-spacing-4) * calc(1 - var(--tw-space-x-reverse)));
-}
-
-.space-x-5> :not([hidden])~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(var(--cal-spacing-5) * var(--tw-space-x-reverse));
-  margin-left: calc(var(--cal-spacing-5) * calc(1 - var(--tw-space-x-reverse)));
-}
-
-.space-x-6> :not([hidden])~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(var(--cal-spacing-6) * var(--tw-space-x-reverse));
-  margin-left: calc(var(--cal-spacing-6) * calc(1 - var(--tw-space-x-reverse)));
-}
-
-.space-x-8> :not([hidden])~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(var(--cal-spacing-8) * var(--tw-space-x-reverse));
-  margin-left: calc(var(--cal-spacing-8) * calc(1 - var(--tw-space-x-reverse)));
-}
-
-.space-x-px> :not([hidden])~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(var(--cal-spacing-px) * var(--tw-space-x-reverse));
-  margin-left: calc(var(--cal-spacing-px) * calc(1 - var(--tw-space-x-reverse)));
-}
-
-.space-y-0> :not([hidden])~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(var(--cal-spacing-0) * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(var(--cal-spacing-0) * var(--tw-space-y-reverse));
-}
-
-.space-y-0\.5> :not([hidden])~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(var(--cal-spacing-0_5) * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(var(--cal-spacing-0_5) * var(--tw-space-y-reverse));
-}
-
-.space-y-1> :not([hidden])~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(var(--cal-spacing-1) * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(var(--cal-spacing-1) * var(--tw-space-y-reverse));
-}
-
-.space-y-1\.5> :not([hidden])~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(var(--cal-spacing-1_5) * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(var(--cal-spacing-1_5) * var(--tw-space-y-reverse));
-}
-
-.space-y-2> :not([hidden])~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(var(--cal-spacing-2) * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(var(--cal-spacing-2) * var(--tw-space-y-reverse));
-}
-
-.space-y-3> :not([hidden])~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(var(--cal-spacing-3) * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(var(--cal-spacing-3) * var(--tw-space-y-reverse));
-}
-
-.space-y-4> :not([hidden])~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(var(--cal-spacing-4) * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(var(--cal-spacing-4) * var(--tw-space-y-reverse));
-}
-
-.space-y-5> :not([hidden])~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(var(--cal-spacing-5) * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(var(--cal-spacing-5) * var(--tw-space-y-reverse));
-}
-
-.space-y-6> :not([hidden])~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(var(--cal-spacing-6) * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(var(--cal-spacing-6) * var(--tw-space-y-reverse));
-}
-
-.space-y-8> :not([hidden])~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(var(--cal-spacing-8) * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(var(--cal-spacing-8) * var(--tw-space-y-reverse));
-}
-
-.space-y-\[1px\]> :not([hidden])~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(1px * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(1px * var(--tw-space-y-reverse));
-}
-
-.space-y-px> :not([hidden])~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(var(--cal-spacing-px) * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(var(--cal-spacing-px) * var(--tw-space-y-reverse));
-}
-
-.space-y-reverse> :not([hidden])~ :not([hidden]) {
-  --tw-space-y-reverse: 1;
-}
-
-.space-x-reverse> :not([hidden])~ :not([hidden]) {
-  --tw-space-x-reverse: 1;
-}
-
-.divide-x> :not([hidden])~ :not([hidden]) {
-  --tw-divide-x-reverse: 0;
-  border-right-width: calc(1px * var(--tw-divide-x-reverse));
-  border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
-}
-
-.divide-y> :not([hidden])~ :not([hidden]) {
-  --tw-divide-y-reverse: 0;
-  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
-  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
-}
-
-.divide-y-2> :not([hidden])~ :not([hidden]) {
-  --tw-divide-y-reverse: 0;
-  border-top-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
-  border-bottom-width: calc(2px * var(--tw-divide-y-reverse));
-}
-
-.divide-y-reverse> :not([hidden])~ :not([hidden]) {
-  --tw-divide-y-reverse: 1;
-}
-
-.divide-x-reverse> :not([hidden])~ :not([hidden]) {
-  --tw-divide-x-reverse: 1;
-}
-
-.divide-amber-100> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(254 243 199 / var(--tw-divide-opacity));
-}
-
-.divide-amber-200> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(253 230 138 / var(--tw-divide-opacity));
-}
-
-.divide-amber-300> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(252 211 77 / var(--tw-divide-opacity));
-}
-
-.divide-amber-400> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(251 191 36 / var(--tw-divide-opacity));
-}
-
-.divide-amber-50> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(255 251 235 / var(--tw-divide-opacity));
-}
-
-.divide-amber-500> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(245 158 11 / var(--tw-divide-opacity));
-}
-
-.divide-amber-600> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(217 119 6 / var(--tw-divide-opacity));
-}
-
-.divide-amber-700> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(180 83 9 / var(--tw-divide-opacity));
-}
-
-.divide-amber-800> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(146 64 14 / var(--tw-divide-opacity));
-}
-
-.divide-amber-900> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(120 53 15 / var(--tw-divide-opacity));
-}
-
-.divide-black> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(17 17 17 / var(--tw-divide-opacity));
-}
-
-.divide-blue-100> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(219 234 254 / var(--tw-divide-opacity));
-}
-
-.divide-blue-200> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(191 219 254 / var(--tw-divide-opacity));
-}
-
-.divide-blue-300> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(147 197 253 / var(--tw-divide-opacity));
-}
-
-.divide-blue-400> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(96 165 250 / var(--tw-divide-opacity));
-}
-
-.divide-blue-50> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(239 246 255 / var(--tw-divide-opacity));
-}
-
-.divide-blue-500> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(59 130 246 / var(--tw-divide-opacity));
-}
-
-.divide-blue-600> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(37 99 235 / var(--tw-divide-opacity));
-}
-
-.divide-blue-700> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(29 78 216 / var(--tw-divide-opacity));
-}
-
-.divide-blue-800> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(30 64 175 / var(--tw-divide-opacity));
-}
-
-.divide-blue-900> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(30 58 138 / var(--tw-divide-opacity));
-}
-
-.divide-cyan-100> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(207 250 254 / var(--tw-divide-opacity));
-}
-
-.divide-cyan-200> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(165 243 252 / var(--tw-divide-opacity));
-}
-
-.divide-cyan-300> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(103 232 249 / var(--tw-divide-opacity));
-}
-
-.divide-cyan-400> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(34 211 238 / var(--tw-divide-opacity));
-}
-
-.divide-cyan-50> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(236 254 255 / var(--tw-divide-opacity));
-}
-
-.divide-cyan-500> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(6 182 212 / var(--tw-divide-opacity));
-}
-
-.divide-cyan-600> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(8 145 178 / var(--tw-divide-opacity));
-}
-
-.divide-cyan-700> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(14 116 144 / var(--tw-divide-opacity));
-}
-
-.divide-cyan-800> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(21 94 117 / var(--tw-divide-opacity));
-}
-
-.divide-cyan-900> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(22 78 99 / var(--tw-divide-opacity));
-}
-
-.divide-default> :not([hidden])~ :not([hidden]) {
-  border-color: var(--cal-border);
-}
-
-.divide-emerald-100> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(209 250 229 / var(--tw-divide-opacity));
-}
-
-.divide-emerald-200> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(167 243 208 / var(--tw-divide-opacity));
-}
-
-.divide-emerald-300> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(110 231 183 / var(--tw-divide-opacity));
-}
-
-.divide-emerald-400> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(52 211 153 / var(--tw-divide-opacity));
-}
-
-.divide-emerald-50> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(236 253 245 / var(--tw-divide-opacity));
-}
-
-.divide-emerald-500> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(16 185 129 / var(--tw-divide-opacity));
-}
-
-.divide-emerald-600> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(5 150 105 / var(--tw-divide-opacity));
-}
-
-.divide-emerald-700> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(4 120 87 / var(--tw-divide-opacity));
-}
-
-.divide-emerald-800> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(6 95 70 / var(--tw-divide-opacity));
-}
-
-.divide-emerald-900> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(6 78 59 / var(--tw-divide-opacity));
-}
-
-.divide-fuchsia-100> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(250 232 255 / var(--tw-divide-opacity));
-}
-
-.divide-fuchsia-200> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(245 208 254 / var(--tw-divide-opacity));
-}
-
-.divide-fuchsia-300> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(240 171 252 / var(--tw-divide-opacity));
-}
-
-.divide-fuchsia-400> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(232 121 249 / var(--tw-divide-opacity));
-}
-
-.divide-fuchsia-50> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(253 244 255 / var(--tw-divide-opacity));
-}
-
-.divide-fuchsia-500> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(217 70 239 / var(--tw-divide-opacity));
-}
-
-.divide-fuchsia-600> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(192 38 211 / var(--tw-divide-opacity));
-}
-
-.divide-fuchsia-700> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(162 28 175 / var(--tw-divide-opacity));
-}
-
-.divide-fuchsia-800> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(134 25 143 / var(--tw-divide-opacity));
-}
-
-.divide-fuchsia-900> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(112 26 117 / var(--tw-divide-opacity));
-}
-
-.divide-gray-100> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(243 244 246 / var(--tw-divide-opacity));
-}
-
-.divide-gray-200> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(229 231 235 / var(--tw-divide-opacity));
-}
-
-.divide-gray-300> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(209 213 219 / var(--tw-divide-opacity));
-}
-
-.divide-gray-400> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(156 163 175 / var(--tw-divide-opacity));
-}
-
-.divide-gray-50> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(249 250 251 / var(--tw-divide-opacity));
-}
-
-.divide-gray-500> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(107 114 128 / var(--tw-divide-opacity));
-}
-
-.divide-gray-600> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(75 85 99 / var(--tw-divide-opacity));
-}
-
-.divide-gray-700> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(55 65 81 / var(--tw-divide-opacity));
-}
-
-.divide-gray-800> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(31 41 55 / var(--tw-divide-opacity));
-}
-
-.divide-gray-900> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(17 24 39 / var(--tw-divide-opacity));
-}
-
-.divide-green-100> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(220 252 231 / var(--tw-divide-opacity));
-}
-
-.divide-green-200> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(187 247 208 / var(--tw-divide-opacity));
-}
-
-.divide-green-300> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(134 239 172 / var(--tw-divide-opacity));
-}
-
-.divide-green-400> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(74 222 128 / var(--tw-divide-opacity));
-}
-
-.divide-green-50> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(240 253 244 / var(--tw-divide-opacity));
-}
-
-.divide-green-500> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(34 197 94 / var(--tw-divide-opacity));
-}
-
-.divide-green-600> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(22 163 74 / var(--tw-divide-opacity));
-}
-
-.divide-green-700> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(21 128 61 / var(--tw-divide-opacity));
-}
-
-.divide-green-800> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(22 101 52 / var(--tw-divide-opacity));
-}
-
-.divide-green-900> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(20 83 45 / var(--tw-divide-opacity));
-}
-
-.divide-indigo-100> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(224 231 255 / var(--tw-divide-opacity));
-}
-
-.divide-indigo-200> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(199 210 254 / var(--tw-divide-opacity));
-}
-
-.divide-indigo-300> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(165 180 252 / var(--tw-divide-opacity));
-}
-
-.divide-indigo-400> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(129 140 248 / var(--tw-divide-opacity));
-}
-
-.divide-indigo-50> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(238 242 255 / var(--tw-divide-opacity));
-}
-
-.divide-indigo-500> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(99 102 241 / var(--tw-divide-opacity));
-}
-
-.divide-indigo-600> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(79 70 229 / var(--tw-divide-opacity));
-}
-
-.divide-indigo-700> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(67 56 202 / var(--tw-divide-opacity));
-}
-
-.divide-indigo-800> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(55 48 163 / var(--tw-divide-opacity));
-}
-
-.divide-indigo-900> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(49 46 129 / var(--tw-divide-opacity));
-}
-
-.divide-lime-100> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(236 252 203 / var(--tw-divide-opacity));
-}
-
-.divide-lime-200> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(217 249 157 / var(--tw-divide-opacity));
-}
-
-.divide-lime-300> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(190 242 100 / var(--tw-divide-opacity));
-}
-
-.divide-lime-400> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(163 230 53 / var(--tw-divide-opacity));
-}
-
-.divide-lime-50> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(247 254 231 / var(--tw-divide-opacity));
-}
-
-.divide-lime-500> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(132 204 22 / var(--tw-divide-opacity));
-}
-
-.divide-lime-600> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(101 163 13 / var(--tw-divide-opacity));
-}
-
-.divide-lime-700> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(77 124 15 / var(--tw-divide-opacity));
-}
-
-.divide-lime-800> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(63 98 18 / var(--tw-divide-opacity));
-}
-
-.divide-lime-900> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(54 83 20 / var(--tw-divide-opacity));
-}
-
-.divide-muted> :not([hidden])~ :not([hidden]) {
-  border-color: var(--cal-border-muted);
-}
-
-.divide-neutral-100> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(245 245 245 / var(--tw-divide-opacity));
-}
-
-.divide-neutral-200> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(229 229 229 / var(--tw-divide-opacity));
-}
-
-.divide-neutral-300> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(212 212 212 / var(--tw-divide-opacity));
-}
-
-.divide-neutral-400> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(163 163 163 / var(--tw-divide-opacity));
-}
-
-.divide-neutral-50> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(250 250 250 / var(--tw-divide-opacity));
-}
-
-.divide-neutral-500> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(115 115 115 / var(--tw-divide-opacity));
-}
-
-.divide-neutral-600> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(82 82 82 / var(--tw-divide-opacity));
-}
-
-.divide-neutral-700> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(64 64 64 / var(--tw-divide-opacity));
-}
-
-.divide-neutral-800> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(38 38 38 / var(--tw-divide-opacity));
-}
-
-.divide-neutral-900> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(23 23 23 / var(--tw-divide-opacity));
-}
-
-.divide-orange-100> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(255 237 213 / var(--tw-divide-opacity));
-}
-
-.divide-orange-200> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(254 215 170 / var(--tw-divide-opacity));
-}
-
-.divide-orange-300> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(253 186 116 / var(--tw-divide-opacity));
-}
-
-.divide-orange-400> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(251 146 60 / var(--tw-divide-opacity));
-}
-
-.divide-orange-50> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(255 247 237 / var(--tw-divide-opacity));
-}
-
-.divide-orange-500> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(249 115 22 / var(--tw-divide-opacity));
-}
-
-.divide-orange-600> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(234 88 12 / var(--tw-divide-opacity));
-}
-
-.divide-orange-700> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(194 65 12 / var(--tw-divide-opacity));
-}
-
-.divide-orange-800> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(154 52 18 / var(--tw-divide-opacity));
-}
-
-.divide-orange-900> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(124 45 18 / var(--tw-divide-opacity));
-}
-
-.divide-pink-100> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(252 231 243 / var(--tw-divide-opacity));
-}
-
-.divide-pink-200> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(251 207 232 / var(--tw-divide-opacity));
-}
-
-.divide-pink-300> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(249 168 212 / var(--tw-divide-opacity));
-}
-
-.divide-pink-400> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(244 114 182 / var(--tw-divide-opacity));
-}
-
-.divide-pink-50> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(253 242 248 / var(--tw-divide-opacity));
-}
-
-.divide-pink-500> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(236 72 153 / var(--tw-divide-opacity));
-}
-
-.divide-pink-600> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(219 39 119 / var(--tw-divide-opacity));
-}
-
-.divide-pink-700> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(190 24 93 / var(--tw-divide-opacity));
-}
-
-.divide-pink-900> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(131 24 67 / var(--tw-divide-opacity));
-}
-
-.divide-purple-100> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(243 232 255 / var(--tw-divide-opacity));
-}
-
-.divide-purple-200> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(233 213 255 / var(--tw-divide-opacity));
-}
-
-.divide-purple-300> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(216 180 254 / var(--tw-divide-opacity));
-}
-
-.divide-purple-400> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(192 132 252 / var(--tw-divide-opacity));
-}
-
-.divide-purple-50> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(250 245 255 / var(--tw-divide-opacity));
-}
-
-.divide-purple-500> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(168 85 247 / var(--tw-divide-opacity));
-}
-
-.divide-purple-600> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(147 51 234 / var(--tw-divide-opacity));
-}
-
-.divide-purple-700> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(126 34 206 / var(--tw-divide-opacity));
-}
-
-.divide-purple-800> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(107 33 168 / var(--tw-divide-opacity));
-}
-
-.divide-purple-900> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(88 28 135 / var(--tw-divide-opacity));
-}
-
-.divide-red-100> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(254 226 226 / var(--tw-divide-opacity));
-}
-
-.divide-red-200> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(254 202 202 / var(--tw-divide-opacity));
-}
-
-.divide-red-300> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(252 165 165 / var(--tw-divide-opacity));
-}
-
-.divide-red-400> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(248 113 113 / var(--tw-divide-opacity));
-}
-
-.divide-red-50> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(254 242 242 / var(--tw-divide-opacity));
-}
-
-.divide-red-500> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(239 68 68 / var(--tw-divide-opacity));
-}
-
-.divide-red-600> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(220 38 38 / var(--tw-divide-opacity));
-}
-
-.divide-red-700> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(185 28 28 / var(--tw-divide-opacity));
-}
-
-.divide-red-800> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(153 27 27 / var(--tw-divide-opacity));
-}
-
-.divide-red-900> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(127 29 29 / var(--tw-divide-opacity));
-}
-
-.divide-rose-100> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(255 228 230 / var(--tw-divide-opacity));
-}
-
-.divide-rose-200> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(254 205 211 / var(--tw-divide-opacity));
-}
-
-.divide-rose-300> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(253 164 175 / var(--tw-divide-opacity));
-}
-
-.divide-rose-400> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(251 113 133 / var(--tw-divide-opacity));
-}
-
-.divide-rose-50> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(255 241 242 / var(--tw-divide-opacity));
-}
-
-.divide-rose-500> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(244 63 94 / var(--tw-divide-opacity));
-}
-
-.divide-rose-600> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(225 29 72 / var(--tw-divide-opacity));
-}
-
-.divide-rose-700> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(190 18 60 / var(--tw-divide-opacity));
-}
-
-.divide-rose-800> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(159 18 57 / var(--tw-divide-opacity));
-}
-
-.divide-rose-900> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(136 19 55 / var(--tw-divide-opacity));
-}
-
-.divide-sky-100> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(224 242 254 / var(--tw-divide-opacity));
-}
-
-.divide-sky-200> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(186 230 253 / var(--tw-divide-opacity));
-}
-
-.divide-sky-300> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(125 211 252 / var(--tw-divide-opacity));
-}
-
-.divide-sky-400> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(56 189 248 / var(--tw-divide-opacity));
-}
-
-.divide-sky-50> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(240 249 255 / var(--tw-divide-opacity));
-}
-
-.divide-sky-500> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(14 165 233 / var(--tw-divide-opacity));
-}
-
-.divide-sky-600> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(2 132 199 / var(--tw-divide-opacity));
-}
-
-.divide-sky-700> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(3 105 161 / var(--tw-divide-opacity));
-}
-
-.divide-sky-800> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(7 89 133 / var(--tw-divide-opacity));
-}
-
-.divide-sky-900> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(12 74 110 / var(--tw-divide-opacity));
-}
-
-.divide-slate-100> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(241 245 249 / var(--tw-divide-opacity));
-}
-
-.divide-slate-200> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(226 232 240 / var(--tw-divide-opacity));
-}
-
-.divide-slate-300> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(203 213 225 / var(--tw-divide-opacity));
-}
-
-.divide-slate-400> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(148 163 184 / var(--tw-divide-opacity));
-}
-
-.divide-slate-50> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(248 250 252 / var(--tw-divide-opacity));
-}
-
-.divide-slate-500> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(100 116 139 / var(--tw-divide-opacity));
-}
-
-.divide-slate-600> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(71 85 105 / var(--tw-divide-opacity));
-}
-
-.divide-slate-700> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(51 65 85 / var(--tw-divide-opacity));
-}
-
-.divide-slate-800> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(30 41 59 / var(--tw-divide-opacity));
-}
-
-.divide-slate-900> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(15 23 42 / var(--tw-divide-opacity));
-}
-
-.divide-stone-100> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(245 245 244 / var(--tw-divide-opacity));
-}
-
-.divide-stone-200> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(231 229 228 / var(--tw-divide-opacity));
-}
-
-.divide-stone-300> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(214 211 209 / var(--tw-divide-opacity));
-}
-
-.divide-stone-400> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(168 162 158 / var(--tw-divide-opacity));
-}
-
-.divide-stone-50> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(250 250 249 / var(--tw-divide-opacity));
-}
-
-.divide-stone-500> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(120 113 108 / var(--tw-divide-opacity));
-}
-
-.divide-stone-600> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(87 83 78 / var(--tw-divide-opacity));
-}
-
-.divide-stone-700> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(68 64 60 / var(--tw-divide-opacity));
-}
-
-.divide-stone-800> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(41 37 36 / var(--tw-divide-opacity));
-}
-
-.divide-stone-900> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(28 25 23 / var(--tw-divide-opacity));
-}
-
-.divide-subtle> :not([hidden])~ :not([hidden]) {
-  border-color: var(--cal-border-subtle);
-}
-
-.divide-teal-100> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(204 251 241 / var(--tw-divide-opacity));
-}
-
-.divide-teal-200> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(153 246 228 / var(--tw-divide-opacity));
-}
-
-.divide-teal-300> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(94 234 212 / var(--tw-divide-opacity));
-}
-
-.divide-teal-400> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(45 212 191 / var(--tw-divide-opacity));
-}
-
-.divide-teal-50> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(240 253 250 / var(--tw-divide-opacity));
-}
-
-.divide-teal-500> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(20 184 166 / var(--tw-divide-opacity));
-}
-
-.divide-teal-600> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(13 148 136 / var(--tw-divide-opacity));
-}
-
-.divide-teal-700> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(15 118 110 / var(--tw-divide-opacity));
-}
-
-.divide-teal-800> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(17 94 89 / var(--tw-divide-opacity));
-}
-
-.divide-teal-900> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(19 78 74 / var(--tw-divide-opacity));
-}
-
-.divide-transparent> :not([hidden])~ :not([hidden]) {
-  border-color: transparent;
-}
-
-.divide-violet-100> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(237 233 254 / var(--tw-divide-opacity));
-}
-
-.divide-violet-200> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(221 214 254 / var(--tw-divide-opacity));
-}
-
-.divide-violet-300> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(196 181 253 / var(--tw-divide-opacity));
-}
-
-.divide-violet-400> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(167 139 250 / var(--tw-divide-opacity));
-}
-
-.divide-violet-50> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(245 243 255 / var(--tw-divide-opacity));
-}
-
-.divide-violet-500> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(139 92 246 / var(--tw-divide-opacity));
-}
-
-.divide-violet-600> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(124 58 237 / var(--tw-divide-opacity));
-}
-
-.divide-violet-700> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(109 40 217 / var(--tw-divide-opacity));
-}
-
-.divide-violet-800> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(91 33 182 / var(--tw-divide-opacity));
-}
-
-.divide-violet-900> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(76 29 149 / var(--tw-divide-opacity));
-}
-
-.divide-white> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(255 255 255 / var(--tw-divide-opacity));
-}
-
-.divide-yellow-100> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(254 249 195 / var(--tw-divide-opacity));
-}
-
-.divide-yellow-200> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(254 240 138 / var(--tw-divide-opacity));
-}
-
-.divide-yellow-300> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(253 224 71 / var(--tw-divide-opacity));
-}
-
-.divide-yellow-400> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(250 204 21 / var(--tw-divide-opacity));
-}
-
-.divide-yellow-50> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(254 252 232 / var(--tw-divide-opacity));
-}
-
-.divide-yellow-500> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(234 179 8 / var(--tw-divide-opacity));
-}
-
-.divide-yellow-600> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(202 138 4 / var(--tw-divide-opacity));
-}
-
-.divide-yellow-700> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(161 98 7 / var(--tw-divide-opacity));
-}
-
-.divide-yellow-800> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(133 77 14 / var(--tw-divide-opacity));
-}
-
-.divide-yellow-900> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(113 63 18 / var(--tw-divide-opacity));
-}
-
-.divide-zinc-100> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(244 244 245 / var(--tw-divide-opacity));
-}
-
-.divide-zinc-200> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(228 228 231 / var(--tw-divide-opacity));
-}
-
-.divide-zinc-300> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(212 212 216 / var(--tw-divide-opacity));
-}
-
-.divide-zinc-400> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(161 161 170 / var(--tw-divide-opacity));
-}
-
-.divide-zinc-50> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(250 250 250 / var(--tw-divide-opacity));
-}
-
-.divide-zinc-500> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(113 113 122 / var(--tw-divide-opacity));
-}
-
-.divide-zinc-600> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(82 82 91 / var(--tw-divide-opacity));
-}
-
-.divide-zinc-700> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(63 63 70 / var(--tw-divide-opacity));
-}
-
-.divide-zinc-800> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(39 39 42 / var(--tw-divide-opacity));
-}
-
-.divide-zinc-900> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(24 24 27 / var(--tw-divide-opacity));
-}
-
-.place-self-end {
-  place-self: end;
-}
-
-.place-self-center {
-  place-self: center;
-}
-
-.self-start {
-  align-self: flex-start;
-}
-
-.self-end {
-  align-self: flex-end;
-}
-
-.self-center {
-  align-self: center;
-}
-
-.self-stretch {
-  align-self: stretch;
-}
-
-.justify-self-start {
-  justify-self: start;
-}
-
-.justify-self-end {
-  justify-self: end;
-}
-
-.overflow-auto {
-  overflow: auto;
-}
-
-.overflow-hidden {
-  overflow: hidden;
-}
-
-.overflow-clip {
-  overflow: clip;
-}
-
-.overflow-visible {
-  overflow: visible;
-}
-
-.overflow-scroll {
-  overflow: scroll;
-}
-
-.overflow-x-auto {
-  overflow-x: auto;
-}
-
-.overflow-y-auto {
-  overflow-y: auto;
-}
-
-.overflow-x-hidden {
-  overflow-x: hidden;
-}
-
-.overflow-y-hidden {
-  overflow-y: hidden;
-}
-
-.overflow-x-clip {
-  overflow-x: clip;
-}
-
-.overflow-x-scroll {
-  overflow-x: scroll;
-}
-
-.\!overflow-y-scroll {
-  overflow-y: scroll !important;
-}
-
-.overflow-y-scroll {
-  overflow-y: scroll;
-}
-
-.scroll-auto {
-  scroll-behavior: auto;
-}
-
-.truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.overflow-ellipsis {
-  text-overflow: ellipsis;
-}
-
-.text-ellipsis {
-  text-overflow: ellipsis;
-}
-
-.text-clip {
-  text-overflow: clip;
-}
-
-.whitespace-normal {
-  white-space: normal;
-}
-
-.whitespace-nowrap {
-  white-space: nowrap;
-}
-
-.whitespace-pre {
-  white-space: pre;
-}
-
-.whitespace-pre-line {
-  white-space: pre-line;
-}
-
-.whitespace-pre-wrap {
-  white-space: pre-wrap;
-}
-
-.break-words {
-  overflow-wrap: break-word;
-}
-
-.break-all {
-  word-break: break-all;
-}
-
-.rounded {
-  border-radius: var(--cal-radius);
-}
-
-.rounded-2xl {
-  border-radius: var(--cal-radius-2xl);
-}
-
-.rounded-3xl {
-  border-radius: var(--cal-radius-3xl);
-}
-
-.rounded-\[10px\] {
-  border-radius: 10px;
-}
-
-.rounded-\[1px\] {
-  border-radius: 1px;
-}
-
-.rounded-\[32px\] {
-  border-radius: 32px;
-}
-
-.rounded-\[4px\] {
-  border-radius: 4px;
-}
-
-.rounded-\[5px\] {
-  border-radius: 5px;
-}
-
-.rounded-\[6px\] {
-  border-radius: 6px;
-}
-
-.rounded-full {
-  border-radius: var(--cal-radius-full);
-}
-
-.rounded-lg {
-  border-radius: var(--cal-radius-lg);
-}
-
-.rounded-md {
-  border-radius: var(--cal-radius-md);
-}
-
-.rounded-none {
-  border-radius: var(--cal-radius-none);
-}
-
-.rounded-sm {
-  border-radius: var(--cal-radius-sm);
-}
-
-.rounded-xl {
-  border-radius: var(--cal-radius-xl);
-}
-
-.rounded-b {
-  border-bottom-right-radius: var(--cal-radius);
-  border-bottom-left-radius: var(--cal-radius);
-}
-
-.rounded-b-2xl {
-  border-bottom-right-radius: var(--cal-radius-2xl);
-  border-bottom-left-radius: var(--cal-radius-2xl);
-}
-
-.rounded-b-full {
-  border-bottom-right-radius: var(--cal-radius-full);
-  border-bottom-left-radius: var(--cal-radius-full);
-}
-
-.rounded-b-lg {
-  border-bottom-right-radius: var(--cal-radius-lg);
-  border-bottom-left-radius: var(--cal-radius-lg);
-}
-
-.rounded-b-md {
-  border-bottom-right-radius: var(--cal-radius-md);
-  border-bottom-left-radius: var(--cal-radius-md);
-}
-
-.rounded-b-none {
-  border-bottom-right-radius: var(--cal-radius-none);
-  border-bottom-left-radius: var(--cal-radius-none);
-}
-
-.rounded-b-xl {
-  border-bottom-right-radius: var(--cal-radius-xl);
-  border-bottom-left-radius: var(--cal-radius-xl);
-}
-
-.rounded-e {
-  border-start-end-radius: var(--cal-radius);
-  border-end-end-radius: var(--cal-radius);
-}
-
-.rounded-l {
-  border-top-left-radius: var(--cal-radius);
-  border-bottom-left-radius: var(--cal-radius);
-}
-
-.rounded-l-2xl {
-  border-top-left-radius: var(--cal-radius-2xl);
-  border-bottom-left-radius: var(--cal-radius-2xl);
-}
-
-.rounded-l-full {
-  border-top-left-radius: var(--cal-radius-full);
-  border-bottom-left-radius: var(--cal-radius-full);
-}
-
-.rounded-l-lg {
-  border-top-left-radius: var(--cal-radius-lg);
-  border-bottom-left-radius: var(--cal-radius-lg);
-}
-
-.rounded-l-md {
-  border-top-left-radius: var(--cal-radius-md);
-  border-bottom-left-radius: var(--cal-radius-md);
-}
-
-.rounded-l-none {
-  border-top-left-radius: var(--cal-radius-none);
-  border-bottom-left-radius: var(--cal-radius-none);
-}
-
-.rounded-l-sm {
-  border-top-left-radius: var(--cal-radius-sm);
-  border-bottom-left-radius: var(--cal-radius-sm);
-}
-
-.rounded-r {
-  border-top-right-radius: var(--cal-radius);
-  border-bottom-right-radius: var(--cal-radius);
-}
-
-.rounded-r-full {
-  border-top-right-radius: var(--cal-radius-full);
-  border-bottom-right-radius: var(--cal-radius-full);
-}
-
-.rounded-r-lg {
-  border-top-right-radius: var(--cal-radius-lg);
-  border-bottom-right-radius: var(--cal-radius-lg);
-}
-
-.rounded-r-md {
-  border-top-right-radius: var(--cal-radius-md);
-  border-bottom-right-radius: var(--cal-radius-md);
-}
-
-.rounded-r-none {
-  border-top-right-radius: var(--cal-radius-none);
-  border-bottom-right-radius: var(--cal-radius-none);
-}
-
-.rounded-r-sm {
-  border-top-right-radius: var(--cal-radius-sm);
-  border-bottom-right-radius: var(--cal-radius-sm);
-}
-
-.rounded-s {
-  border-start-start-radius: var(--cal-radius);
-  border-end-start-radius: var(--cal-radius);
-}
-
-.rounded-t {
-  border-top-left-radius: var(--cal-radius);
-  border-top-right-radius: var(--cal-radius);
-}
-
-.rounded-t-full {
-  border-top-left-radius: var(--cal-radius-full);
-  border-top-right-radius: var(--cal-radius-full);
-}
-
-.rounded-t-lg {
-  border-top-left-radius: var(--cal-radius-lg);
-  border-top-right-radius: var(--cal-radius-lg);
-}
-
-.rounded-t-md {
-  border-top-left-radius: var(--cal-radius-md);
-  border-top-right-radius: var(--cal-radius-md);
-}
-
-.rounded-t-none {
-  border-top-left-radius: var(--cal-radius-none);
-  border-top-right-radius: var(--cal-radius-none);
-}
-
-.rounded-t-xl {
-  border-top-left-radius: var(--cal-radius-xl);
-  border-top-right-radius: var(--cal-radius-xl);
-}
-
-.rounded-bl {
-  border-bottom-left-radius: var(--cal-radius);
-}
-
-.rounded-bl-2xl {
-  border-bottom-left-radius: var(--cal-radius-2xl);
-}
-
-.rounded-bl-md {
-  border-bottom-left-radius: var(--cal-radius-md);
-}
-
-.rounded-br {
-  border-bottom-right-radius: var(--cal-radius);
-}
-
-.rounded-br-md {
-  border-bottom-right-radius: var(--cal-radius-md);
-}
-
-.rounded-br-none {
-  border-bottom-right-radius: var(--cal-radius-none);
-}
-
-.rounded-ee {
-  border-end-end-radius: var(--cal-radius);
-}
-
-.rounded-es {
-  border-end-start-radius: var(--cal-radius);
-}
-
-.rounded-se {
-  border-start-end-radius: var(--cal-radius);
-}
-
-.rounded-ss {
-  border-start-start-radius: var(--cal-radius);
-}
-
-.rounded-tl {
-  border-top-left-radius: var(--cal-radius);
-}
-
-.rounded-tl-2xl {
-  border-top-left-radius: var(--cal-radius-2xl);
-}
-
-.rounded-tr {
-  border-top-right-radius: var(--cal-radius);
-}
-
-.border {
-  border-width: 1px;
-}
-
-.border-0 {
-  border-width: 0px;
-}
-
-.border-2 {
-  border-width: 2px;
-}
-
-.border-4 {
-  border-width: 4px;
-}
-
-.border-8 {
-  border-width: 8px;
-}
-
-.border-\[1\.5px\] {
-  border-width: 1.5px;
-}
-
-.border-\[1px\] {
-  border-width: 1px;
-}
-
-.border-booker-width {
-  border-width: var(--cal-border-booker-width, 1px);
-}
-
-.border-x {
-  border-left-width: 1px;
-  border-right-width: 1px;
-}
-
-.border-y {
-  border-top-width: 1px;
-  border-bottom-width: 1px;
-}
-
-.border-y-0 {
-  border-top-width: 0px;
-  border-bottom-width: 0px;
-}
-
-.border-b {
-  border-bottom-width: 1px;
-}
-
-.border-b-0 {
-  border-bottom-width: 0px;
-}
-
-.border-b-2 {
-  border-bottom-width: 2px;
-}
-
-.border-b-4 {
-  border-bottom-width: 4px;
-}
-
-.border-b-\[1px\] {
-  border-bottom-width: 1px;
-}
-
-.border-e {
-  border-inline-end-width: 1px;
-}
-
-.border-l {
-  border-left-width: 1px;
-}
-
-.border-l-0 {
-  border-left-width: 0px;
-}
-
-.border-l-2 {
-  border-left-width: 2px;
-}
-
-.border-l-4 {
-  border-left-width: 4px;
-}
-
-.border-r {
-  border-right-width: 1px;
-}
-
-.border-r-0 {
-  border-right-width: 0px;
-}
-
-.border-r-2 {
-  border-right-width: 2px;
-}
-
-.border-r-4 {
-  border-right-width: 4px;
-}
-
-.border-s {
-  border-inline-start-width: 1px;
-}
-
-.border-t {
-  border-top-width: 1px;
-}
-
-.border-t-0 {
-  border-top-width: 0px;
-}
-
-.border-t-2 {
-  border-top-width: 2px;
-}
-
-.border-t-4 {
-  border-top-width: 4px;
-}
-
-.border-solid {
-  border-style: solid;
-}
-
-.border-dashed {
-  border-style: dashed;
-}
-
-.border-none {
-  border-style: none;
-}
-
-.\!border-muted {
-  border-color: var(--cal-border-muted) !important;
-}
-
-.\!border-red-700 {
-  --tw-border-opacity: 1 !important;
-  border-color: rgb(185 28 28 / var(--tw-border-opacity)) !important;
-}
-
-.border-\[\#e5e7eb\] {
-  --tw-border-opacity: 1;
-  border-color: rgb(229 231 235 / var(--tw-border-opacity));
-}
-
-.border-amber-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(254 243 199 / var(--tw-border-opacity));
-}
-
-.border-amber-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(253 230 138 / var(--tw-border-opacity));
-}
-
-.border-amber-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(252 211 77 / var(--tw-border-opacity));
-}
-
-.border-amber-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(251 191 36 / var(--tw-border-opacity));
-}
-
-.border-amber-50 {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 251 235 / var(--tw-border-opacity));
-}
-
-.border-amber-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(245 158 11 / var(--tw-border-opacity));
-}
-
-.border-amber-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(217 119 6 / var(--tw-border-opacity));
-}
-
-.border-amber-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(180 83 9 / var(--tw-border-opacity));
-}
-
-.border-amber-800 {
-  --tw-border-opacity: 1;
-  border-color: rgb(146 64 14 / var(--tw-border-opacity));
-}
-
-.border-amber-900 {
-  --tw-border-opacity: 1;
-  border-color: rgb(120 53 15 / var(--tw-border-opacity));
-}
-
-.border-black {
-  --tw-border-opacity: 1;
-  border-color: rgb(17 17 17 / var(--tw-border-opacity));
-}
-
-.border-blue-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(219 234 254 / var(--tw-border-opacity));
-}
-
-.border-blue-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(191 219 254 / var(--tw-border-opacity));
-}
-
-.border-blue-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(147 197 253 / var(--tw-border-opacity));
-}
-
-.border-blue-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(96 165 250 / var(--tw-border-opacity));
-}
-
-.border-blue-50 {
-  --tw-border-opacity: 1;
-  border-color: rgb(239 246 255 / var(--tw-border-opacity));
-}
-
-.border-blue-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(59 130 246 / var(--tw-border-opacity));
-}
-
-.border-blue-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(37 99 235 / var(--tw-border-opacity));
-}
-
-.border-blue-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(29 78 216 / var(--tw-border-opacity));
-}
-
-.border-blue-800 {
-  --tw-border-opacity: 1;
-  border-color: rgb(30 64 175 / var(--tw-border-opacity));
-}
-
-.border-blue-900 {
-  --tw-border-opacity: 1;
-  border-color: rgb(30 58 138 / var(--tw-border-opacity));
-}
-
-.border-booker {
-  border-color: var(--cal-border-booker, #E5E7EB);
-}
-
-.border-brand-default {
-  border-color: var(--cal-brand, #111827);
-}
-
-.border-cal-bg {
-  border-color: var(--cal-bg);
-}
-
-.border-cyan-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(207 250 254 / var(--tw-border-opacity));
-}
-
-.border-cyan-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(165 243 252 / var(--tw-border-opacity));
-}
-
-.border-cyan-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(103 232 249 / var(--tw-border-opacity));
-}
-
-.border-cyan-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(34 211 238 / var(--tw-border-opacity));
-}
-
-.border-cyan-50 {
-  --tw-border-opacity: 1;
-  border-color: rgb(236 254 255 / var(--tw-border-opacity));
-}
-
-.border-cyan-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(6 182 212 / var(--tw-border-opacity));
-}
-
-.border-cyan-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(8 145 178 / var(--tw-border-opacity));
-}
-
-.border-cyan-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(14 116 144 / var(--tw-border-opacity));
-}
-
-.border-cyan-800 {
-  --tw-border-opacity: 1;
-  border-color: rgb(21 94 117 / var(--tw-border-opacity));
-}
-
-.border-cyan-900 {
-  --tw-border-opacity: 1;
-  border-color: rgb(22 78 99 / var(--tw-border-opacity));
-}
-
-.border-default {
-  border-color: var(--cal-border);
-}
-
-.border-emerald-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(209 250 229 / var(--tw-border-opacity));
-}
-
-.border-emerald-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(167 243 208 / var(--tw-border-opacity));
-}
-
-.border-emerald-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(110 231 183 / var(--tw-border-opacity));
-}
-
-.border-emerald-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(52 211 153 / var(--tw-border-opacity));
-}
-
-.border-emerald-50 {
-  --tw-border-opacity: 1;
-  border-color: rgb(236 253 245 / var(--tw-border-opacity));
-}
-
-.border-emerald-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(16 185 129 / var(--tw-border-opacity));
-}
-
-.border-emerald-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(5 150 105 / var(--tw-border-opacity));
-}
-
-.border-emerald-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(4 120 87 / var(--tw-border-opacity));
-}
-
-.border-emerald-800 {
-  --tw-border-opacity: 1;
-  border-color: rgb(6 95 70 / var(--tw-border-opacity));
-}
-
-.border-emerald-900 {
-  --tw-border-opacity: 1;
-  border-color: rgb(6 78 59 / var(--tw-border-opacity));
-}
-
-.border-emphasis {
-  border-color: var(--cal-border-emphasis);
-}
-
-.border-error {
-  border-color: var(--cal-border-error);
-}
-
-.border-fuchsia-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(250 232 255 / var(--tw-border-opacity));
-}
-
-.border-fuchsia-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(245 208 254 / var(--tw-border-opacity));
-}
-
-.border-fuchsia-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(240 171 252 / var(--tw-border-opacity));
-}
-
-.border-fuchsia-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(232 121 249 / var(--tw-border-opacity));
-}
-
-.border-fuchsia-50 {
-  --tw-border-opacity: 1;
-  border-color: rgb(253 244 255 / var(--tw-border-opacity));
-}
-
-.border-fuchsia-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(217 70 239 / var(--tw-border-opacity));
-}
-
-.border-fuchsia-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(192 38 211 / var(--tw-border-opacity));
-}
-
-.border-fuchsia-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(162 28 175 / var(--tw-border-opacity));
-}
-
-.border-fuchsia-800 {
-  --tw-border-opacity: 1;
-  border-color: rgb(134 25 143 / var(--tw-border-opacity));
-}
-
-.border-fuchsia-900 {
-  --tw-border-opacity: 1;
-  border-color: rgb(112 26 117 / var(--tw-border-opacity));
-}
-
-.border-gray-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(243 244 246 / var(--tw-border-opacity));
-}
-
-.border-gray-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(229 231 235 / var(--tw-border-opacity));
-}
-
-.border-gray-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(209 213 219 / var(--tw-border-opacity));
-}
-
-.border-gray-300\/20 {
-  border-color: rgb(209 213 219 / 0.2);
-}
-
-.border-gray-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(156 163 175 / var(--tw-border-opacity));
-}
-
-.border-gray-50 {
-  --tw-border-opacity: 1;
-  border-color: rgb(249 250 251 / var(--tw-border-opacity));
-}
-
-.border-gray-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(107 114 128 / var(--tw-border-opacity));
-}
-
-.border-gray-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(75 85 99 / var(--tw-border-opacity));
-}
-
-.border-gray-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(55 65 81 / var(--tw-border-opacity));
-}
-
-.border-gray-800 {
-  --tw-border-opacity: 1;
-  border-color: rgb(31 41 55 / var(--tw-border-opacity));
-}
-
-.border-gray-900 {
-  --tw-border-opacity: 1;
-  border-color: rgb(17 24 39 / var(--tw-border-opacity));
-}
-
-.border-green-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(220 252 231 / var(--tw-border-opacity));
-}
-
-.border-green-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(187 247 208 / var(--tw-border-opacity));
-}
-
-.border-green-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(134 239 172 / var(--tw-border-opacity));
-}
-
-.border-green-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(74 222 128 / var(--tw-border-opacity));
-}
-
-.border-green-50 {
-  --tw-border-opacity: 1;
-  border-color: rgb(240 253 244 / var(--tw-border-opacity));
-}
-
-.border-green-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(34 197 94 / var(--tw-border-opacity));
-}
-
-.border-green-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(22 163 74 / var(--tw-border-opacity));
-}
-
-.border-green-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(21 128 61 / var(--tw-border-opacity));
-}
-
-.border-green-800 {
-  --tw-border-opacity: 1;
-  border-color: rgb(22 101 52 / var(--tw-border-opacity));
-}
-
-.border-green-900 {
-  --tw-border-opacity: 1;
-  border-color: rgb(20 83 45 / var(--tw-border-opacity));
-}
-
-.border-indigo-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(224 231 255 / var(--tw-border-opacity));
-}
-
-.border-indigo-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(199 210 254 / var(--tw-border-opacity));
-}
-
-.border-indigo-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(165 180 252 / var(--tw-border-opacity));
-}
-
-.border-indigo-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(129 140 248 / var(--tw-border-opacity));
-}
-
-.border-indigo-50 {
-  --tw-border-opacity: 1;
-  border-color: rgb(238 242 255 / var(--tw-border-opacity));
-}
-
-.border-indigo-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(99 102 241 / var(--tw-border-opacity));
-}
-
-.border-indigo-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(79 70 229 / var(--tw-border-opacity));
-}
-
-.border-indigo-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(67 56 202 / var(--tw-border-opacity));
-}
-
-.border-indigo-800 {
-  --tw-border-opacity: 1;
-  border-color: rgb(55 48 163 / var(--tw-border-opacity));
-}
-
-.border-indigo-900 {
-  --tw-border-opacity: 1;
-  border-color: rgb(49 46 129 / var(--tw-border-opacity));
-}
-
-.border-inverted {
-  border-color: var(--cal-bg-inverted);
-}
-
-.border-lime-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(236 252 203 / var(--tw-border-opacity));
-}
-
-.border-lime-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(217 249 157 / var(--tw-border-opacity));
-}
-
-.border-lime-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(190 242 100 / var(--tw-border-opacity));
-}
-
-.border-lime-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(163 230 53 / var(--tw-border-opacity));
-}
-
-.border-lime-50 {
-  --tw-border-opacity: 1;
-  border-color: rgb(247 254 231 / var(--tw-border-opacity));
-}
-
-.border-lime-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(132 204 22 / var(--tw-border-opacity));
-}
-
-.border-lime-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(101 163 13 / var(--tw-border-opacity));
-}
-
-.border-lime-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(77 124 15 / var(--tw-border-opacity));
-}
-
-.border-lime-800 {
-  --tw-border-opacity: 1;
-  border-color: rgb(63 98 18 / var(--tw-border-opacity));
-}
-
-.border-lime-900 {
-  --tw-border-opacity: 1;
-  border-color: rgb(54 83 20 / var(--tw-border-opacity));
-}
-
-.border-muted {
-  border-color: var(--cal-border-muted);
-}
-
-.border-neutral-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(245 245 245 / var(--tw-border-opacity));
-}
-
-.border-neutral-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(229 229 229 / var(--tw-border-opacity));
-}
-
-.border-neutral-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(212 212 212 / var(--tw-border-opacity));
-}
-
-.border-neutral-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(163 163 163 / var(--tw-border-opacity));
-}
-
-.border-neutral-50 {
-  --tw-border-opacity: 1;
-  border-color: rgb(250 250 250 / var(--tw-border-opacity));
-}
-
-.border-neutral-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(115 115 115 / var(--tw-border-opacity));
-}
-
-.border-neutral-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(82 82 82 / var(--tw-border-opacity));
-}
-
-.border-neutral-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(64 64 64 / var(--tw-border-opacity));
-}
-
-.border-neutral-800 {
-  --tw-border-opacity: 1;
-  border-color: rgb(38 38 38 / var(--tw-border-opacity));
-}
-
-.border-neutral-900 {
-  --tw-border-opacity: 1;
-  border-color: rgb(23 23 23 / var(--tw-border-opacity));
-}
-
-.border-orange-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 237 213 / var(--tw-border-opacity));
-}
-
-.border-orange-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(254 215 170 / var(--tw-border-opacity));
-}
-
-.border-orange-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(253 186 116 / var(--tw-border-opacity));
-}
-
-.border-orange-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(251 146 60 / var(--tw-border-opacity));
-}
-
-.border-orange-50 {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 247 237 / var(--tw-border-opacity));
-}
-
-.border-orange-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(249 115 22 / var(--tw-border-opacity));
-}
-
-.border-orange-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(234 88 12 / var(--tw-border-opacity));
-}
-
-.border-orange-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(194 65 12 / var(--tw-border-opacity));
-}
-
-.border-orange-800 {
-  --tw-border-opacity: 1;
-  border-color: rgb(154 52 18 / var(--tw-border-opacity));
-}
-
-.border-orange-900 {
-  --tw-border-opacity: 1;
-  border-color: rgb(124 45 18 / var(--tw-border-opacity));
-}
-
-.border-pink-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(252 231 243 / var(--tw-border-opacity));
-}
-
-.border-pink-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(251 207 232 / var(--tw-border-opacity));
-}
-
-.border-pink-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(249 168 212 / var(--tw-border-opacity));
-}
-
-.border-pink-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(244 114 182 / var(--tw-border-opacity));
-}
-
-.border-pink-50 {
-  --tw-border-opacity: 1;
-  border-color: rgb(253 242 248 / var(--tw-border-opacity));
-}
-
-.border-pink-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(236 72 153 / var(--tw-border-opacity));
-}
-
-.border-pink-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(219 39 119 / var(--tw-border-opacity));
-}
-
-.border-pink-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(190 24 93 / var(--tw-border-opacity));
-}
-
-.border-pink-900 {
-  --tw-border-opacity: 1;
-  border-color: rgb(131 24 67 / var(--tw-border-opacity));
-}
-
-.border-purple-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(243 232 255 / var(--tw-border-opacity));
-}
-
-.border-purple-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(233 213 255 / var(--tw-border-opacity));
-}
-
-.border-purple-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(216 180 254 / var(--tw-border-opacity));
-}
-
-.border-purple-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(192 132 252 / var(--tw-border-opacity));
-}
-
-.border-purple-50 {
-  --tw-border-opacity: 1;
-  border-color: rgb(250 245 255 / var(--tw-border-opacity));
-}
-
-.border-purple-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(168 85 247 / var(--tw-border-opacity));
-}
-
-.border-purple-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(147 51 234 / var(--tw-border-opacity));
-}
-
-.border-purple-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(126 34 206 / var(--tw-border-opacity));
-}
-
-.border-purple-800 {
-  --tw-border-opacity: 1;
-  border-color: rgb(107 33 168 / var(--tw-border-opacity));
-}
-
-.border-purple-900 {
-  --tw-border-opacity: 1;
-  border-color: rgb(88 28 135 / var(--tw-border-opacity));
-}
-
-.border-red-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(254 226 226 / var(--tw-border-opacity));
-}
-
-.border-red-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(254 202 202 / var(--tw-border-opacity));
-}
-
-.border-red-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(252 165 165 / var(--tw-border-opacity));
-}
-
-.border-red-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(248 113 113 / var(--tw-border-opacity));
-}
-
-.border-red-50 {
-  --tw-border-opacity: 1;
-  border-color: rgb(254 242 242 / var(--tw-border-opacity));
-}
-
-.border-red-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(239 68 68 / var(--tw-border-opacity));
-}
-
-.border-red-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(220 38 38 / var(--tw-border-opacity));
-}
-
-.border-red-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(185 28 28 / var(--tw-border-opacity));
-}
-
-.border-red-800 {
-  --tw-border-opacity: 1;
-  border-color: rgb(153 27 27 / var(--tw-border-opacity));
-}
-
-.border-red-900 {
-  --tw-border-opacity: 1;
-  border-color: rgb(127 29 29 / var(--tw-border-opacity));
-}
-
-.border-rose-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 228 230 / var(--tw-border-opacity));
-}
-
-.border-rose-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(254 205 211 / var(--tw-border-opacity));
-}
-
-.border-rose-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(253 164 175 / var(--tw-border-opacity));
-}
-
-.border-rose-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(251 113 133 / var(--tw-border-opacity));
-}
-
-.border-rose-50 {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 241 242 / var(--tw-border-opacity));
-}
-
-.border-rose-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(244 63 94 / var(--tw-border-opacity));
-}
-
-.border-rose-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(225 29 72 / var(--tw-border-opacity));
-}
-
-.border-rose-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(190 18 60 / var(--tw-border-opacity));
-}
-
-.border-rose-800 {
-  --tw-border-opacity: 1;
-  border-color: rgb(159 18 57 / var(--tw-border-opacity));
-}
-
-.border-rose-900 {
-  --tw-border-opacity: 1;
-  border-color: rgb(136 19 55 / var(--tw-border-opacity));
-}
-
-.border-semantic-attention-subtle {
-  border-color: var(--cal-border-semantic-attention-subtle);
-}
-
-.border-semantic-error-subtle {
-  border-color: var(--cal-border-semantic-error-subtle);
-}
-
-.border-sky-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(224 242 254 / var(--tw-border-opacity));
-}
-
-.border-sky-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(186 230 253 / var(--tw-border-opacity));
-}
-
-.border-sky-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(125 211 252 / var(--tw-border-opacity));
-}
-
-.border-sky-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(56 189 248 / var(--tw-border-opacity));
-}
-
-.border-sky-50 {
-  --tw-border-opacity: 1;
-  border-color: rgb(240 249 255 / var(--tw-border-opacity));
-}
-
-.border-sky-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(14 165 233 / var(--tw-border-opacity));
-}
-
-.border-sky-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(2 132 199 / var(--tw-border-opacity));
-}
-
-.border-sky-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(3 105 161 / var(--tw-border-opacity));
-}
-
-.border-sky-800 {
-  --tw-border-opacity: 1;
-  border-color: rgb(7 89 133 / var(--tw-border-opacity));
-}
-
-.border-sky-900 {
-  --tw-border-opacity: 1;
-  border-color: rgb(12 74 110 / var(--tw-border-opacity));
-}
-
-.border-slate-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(241 245 249 / var(--tw-border-opacity));
-}
-
-.border-slate-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(226 232 240 / var(--tw-border-opacity));
-}
-
-.border-slate-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(203 213 225 / var(--tw-border-opacity));
-}
-
-.border-slate-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(148 163 184 / var(--tw-border-opacity));
-}
-
-.border-slate-50 {
-  --tw-border-opacity: 1;
-  border-color: rgb(248 250 252 / var(--tw-border-opacity));
-}
-
-.border-slate-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(100 116 139 / var(--tw-border-opacity));
-}
-
-.border-slate-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(71 85 105 / var(--tw-border-opacity));
-}
-
-.border-slate-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(51 65 85 / var(--tw-border-opacity));
-}
-
-.border-slate-800 {
-  --tw-border-opacity: 1;
-  border-color: rgb(30 41 59 / var(--tw-border-opacity));
-}
-
-.border-slate-900 {
-  --tw-border-opacity: 1;
-  border-color: rgb(15 23 42 / var(--tw-border-opacity));
-}
-
-.border-stone-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(245 245 244 / var(--tw-border-opacity));
-}
-
-.border-stone-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(231 229 228 / var(--tw-border-opacity));
-}
-
-.border-stone-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(214 211 209 / var(--tw-border-opacity));
-}
-
-.border-stone-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(168 162 158 / var(--tw-border-opacity));
-}
-
-.border-stone-50 {
-  --tw-border-opacity: 1;
-  border-color: rgb(250 250 249 / var(--tw-border-opacity));
-}
-
-.border-stone-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(120 113 108 / var(--tw-border-opacity));
-}
-
-.border-stone-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(87 83 78 / var(--tw-border-opacity));
-}
-
-.border-stone-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(68 64 60 / var(--tw-border-opacity));
-}
-
-.border-stone-800 {
-  --tw-border-opacity: 1;
-  border-color: rgb(41 37 36 / var(--tw-border-opacity));
-}
-
-.border-stone-900 {
-  --tw-border-opacity: 1;
-  border-color: rgb(28 25 23 / var(--tw-border-opacity));
-}
-
-.border-subtle {
-  border-color: var(--cal-border-subtle);
-}
-
-.border-teal-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(204 251 241 / var(--tw-border-opacity));
-}
-
-.border-teal-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(153 246 228 / var(--tw-border-opacity));
-}
-
-.border-teal-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(94 234 212 / var(--tw-border-opacity));
-}
-
-.border-teal-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(45 212 191 / var(--tw-border-opacity));
-}
-
-.border-teal-50 {
-  --tw-border-opacity: 1;
-  border-color: rgb(240 253 250 / var(--tw-border-opacity));
-}
-
-.border-teal-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(20 184 166 / var(--tw-border-opacity));
-}
-
-.border-teal-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(13 148 136 / var(--tw-border-opacity));
-}
-
-.border-teal-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(15 118 110 / var(--tw-border-opacity));
-}
-
-.border-teal-800 {
-  --tw-border-opacity: 1;
-  border-color: rgb(17 94 89 / var(--tw-border-opacity));
-}
-
-.border-teal-900 {
-  --tw-border-opacity: 1;
-  border-color: rgb(19 78 74 / var(--tw-border-opacity));
-}
-
-.border-transparent {
-  border-color: transparent;
-}
-
-.border-violet-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(237 233 254 / var(--tw-border-opacity));
-}
-
-.border-violet-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(221 214 254 / var(--tw-border-opacity));
-}
-
-.border-violet-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(196 181 253 / var(--tw-border-opacity));
-}
-
-.border-violet-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(167 139 250 / var(--tw-border-opacity));
-}
-
-.border-violet-50 {
-  --tw-border-opacity: 1;
-  border-color: rgb(245 243 255 / var(--tw-border-opacity));
-}
-
-.border-violet-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(139 92 246 / var(--tw-border-opacity));
-}
-
-.border-violet-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(124 58 237 / var(--tw-border-opacity));
-}
-
-.border-violet-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(109 40 217 / var(--tw-border-opacity));
-}
-
-.border-violet-800 {
-  --tw-border-opacity: 1;
-  border-color: rgb(91 33 182 / var(--tw-border-opacity));
-}
-
-.border-violet-900 {
-  --tw-border-opacity: 1;
-  border-color: rgb(76 29 149 / var(--tw-border-opacity));
-}
-
-.border-white {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 255 255 / var(--tw-border-opacity));
-}
-
-.border-yellow-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(254 249 195 / var(--tw-border-opacity));
-}
-
-.border-yellow-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(254 240 138 / var(--tw-border-opacity));
-}
-
-.border-yellow-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(253 224 71 / var(--tw-border-opacity));
-}
-
-.border-yellow-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(250 204 21 / var(--tw-border-opacity));
-}
-
-.border-yellow-50 {
-  --tw-border-opacity: 1;
-  border-color: rgb(254 252 232 / var(--tw-border-opacity));
-}
-
-.border-yellow-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(234 179 8 / var(--tw-border-opacity));
-}
-
-.border-yellow-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(202 138 4 / var(--tw-border-opacity));
-}
-
-.border-yellow-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(161 98 7 / var(--tw-border-opacity));
-}
-
-.border-yellow-800 {
-  --tw-border-opacity: 1;
-  border-color: rgb(133 77 14 / var(--tw-border-opacity));
-}
-
-.border-yellow-900 {
-  --tw-border-opacity: 1;
-  border-color: rgb(113 63 18 / var(--tw-border-opacity));
-}
-
-.border-zinc-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(244 244 245 / var(--tw-border-opacity));
-}
-
-.border-zinc-200 {
-  --tw-border-opacity: 1;
-  border-color: rgb(228 228 231 / var(--tw-border-opacity));
-}
-
-.border-zinc-300 {
-  --tw-border-opacity: 1;
-  border-color: rgb(212 212 216 / var(--tw-border-opacity));
-}
-
-.border-zinc-400 {
-  --tw-border-opacity: 1;
-  border-color: rgb(161 161 170 / var(--tw-border-opacity));
-}
-
-.border-zinc-50 {
-  --tw-border-opacity: 1;
-  border-color: rgb(250 250 250 / var(--tw-border-opacity));
-}
-
-.border-zinc-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(113 113 122 / var(--tw-border-opacity));
-}
-
-.border-zinc-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(82 82 91 / var(--tw-border-opacity));
-}
-
-.border-zinc-700 {
-  --tw-border-opacity: 1;
-  border-color: rgb(63 63 70 / var(--tw-border-opacity));
-}
-
-.border-zinc-800 {
-  --tw-border-opacity: 1;
-  border-color: rgb(39 39 42 / var(--tw-border-opacity));
-}
-
-.border-zinc-900 {
-  --tw-border-opacity: 1;
-  border-color: rgb(24 24 27 / var(--tw-border-opacity));
-}
-
-.border-b-black {
-  --tw-border-opacity: 1;
-  border-bottom-color: rgb(17 17 17 / var(--tw-border-opacity));
-}
-
-.border-b-subtle {
-  border-bottom-color: var(--cal-border-subtle);
-}
-
-.border-l-default {
-  border-left-color: var(--cal-border);
-}
-
-.border-r-transparent {
-  border-right-color: transparent;
-}
-
-.\!bg-default {
-  background-color: var(--cal-bg, white) !important;
-}
-
-.\!bg-orange-100 {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgb(255 237 213 / var(--tw-bg-opacity)) !important;
-}
-
-.\!bg-subtle {
-  background-color: var(--cal-bg-subtle) !important;
-}
-
-.\!bg-success {
-  background-color: var(--cal-bg-success) !important;
-}
-
-.\!bg-transparent {
-  background-color: transparent !important;
-}
-
-.bg-\[\#FAFAFA\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
-}
-
-.bg-\[\#ffc439\] {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 196 57 / var(--tw-bg-opacity));
-}
-
-.bg-amber-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 243 199 / var(--tw-bg-opacity));
-}
-
-.bg-amber-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(253 230 138 / var(--tw-bg-opacity));
-}
-
-.bg-amber-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(252 211 77 / var(--tw-bg-opacity));
-}
-
-.bg-amber-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(251 191 36 / var(--tw-bg-opacity));
-}
-
-.bg-amber-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 251 235 / var(--tw-bg-opacity));
-}
-
-.bg-amber-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(245 158 11 / var(--tw-bg-opacity));
-}
-
-.bg-amber-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(217 119 6 / var(--tw-bg-opacity));
-}
-
-.bg-amber-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(180 83 9 / var(--tw-bg-opacity));
-}
-
-.bg-amber-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(146 64 14 / var(--tw-bg-opacity));
-}
-
-.bg-amber-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(120 53 15 / var(--tw-bg-opacity));
-}
-
-.bg-attention {
-  background-color: var(--cal-bg-attention);
-}
-
-.bg-black {
-  --tw-bg-opacity: 1;
-  background-color: rgb(17 17 17 / var(--tw-bg-opacity));
-}
-
-.bg-black\/30 {
-  background-color: rgb(17 17 17 / 0.3);
-}
-
-.bg-black\/50 {
-  background-color: rgb(17 17 17 / 0.5);
-}
-
-.bg-black\/60 {
-  background-color: rgb(17 17 17 / 0.6);
-}
-
-.bg-black\/80 {
-  background-color: rgb(17 17 17 / 0.8);
-}
-
-.bg-black\/\[3\%\] {
-  background-color: rgb(17 17 17 / 3%);
-}
-
-.bg-blue-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
-}
-
-.bg-blue-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
-}
-
-.bg-blue-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
-}
-
-.bg-blue-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
-}
-
-.bg-blue-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
-}
-
-.bg-blue-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
-}
-
-.bg-blue-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
-}
-
-.bg-blue-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
-}
-
-.bg-blue-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(30 64 175 / var(--tw-bg-opacity));
-}
-
-.bg-blue-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(30 58 138 / var(--tw-bg-opacity));
-}
-
-.bg-brand-accent {
-  background-color: var(--cal-brand-accent, white);
-}
-
-.bg-brand-default {
-  background-color: var(--cal-brand, #111827);
-}
-
-.bg-brand-subtle {
-  background-color: var(--cal-brand-subtle, #9CA3AF);
-}
-
-.bg-cyan-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(207 250 254 / var(--tw-bg-opacity));
-}
-
-.bg-cyan-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(165 243 252 / var(--tw-bg-opacity));
-}
-
-.bg-cyan-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(103 232 249 / var(--tw-bg-opacity));
-}
-
-.bg-cyan-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(34 211 238 / var(--tw-bg-opacity));
-}
-
-.bg-cyan-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(236 254 255 / var(--tw-bg-opacity));
-}
-
-.bg-cyan-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(6 182 212 / var(--tw-bg-opacity));
-}
-
-.bg-cyan-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(8 145 178 / var(--tw-bg-opacity));
-}
-
-.bg-cyan-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(14 116 144 / var(--tw-bg-opacity));
-}
-
-.bg-cyan-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(21 94 117 / var(--tw-bg-opacity));
-}
-
-.bg-cyan-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(22 78 99 / var(--tw-bg-opacity));
-}
-
-.bg-darkgray-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
-}
-
-.bg-default {
-  background-color: var(--cal-bg, white);
-}
-
-.bg-emerald-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(209 250 229 / var(--tw-bg-opacity));
-}
-
-.bg-emerald-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(167 243 208 / var(--tw-bg-opacity));
-}
-
-.bg-emerald-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(110 231 183 / var(--tw-bg-opacity));
-}
-
-.bg-emerald-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(52 211 153 / var(--tw-bg-opacity));
-}
-
-.bg-emerald-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(236 253 245 / var(--tw-bg-opacity));
-}
-
-.bg-emerald-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(16 185 129 / var(--tw-bg-opacity));
-}
-
-.bg-emerald-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(5 150 105 / var(--tw-bg-opacity));
-}
-
-.bg-emerald-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(4 120 87 / var(--tw-bg-opacity));
-}
-
-.bg-emerald-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(6 95 70 / var(--tw-bg-opacity));
-}
-
-.bg-emerald-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(6 78 59 / var(--tw-bg-opacity));
-}
-
-.bg-emphasis {
-  background-color: var(--cal-bg-emphasis);
-}
-
-.bg-error {
-  background-color: var(--cal-bg-error);
-}
-
-.bg-fuchsia-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(250 232 255 / var(--tw-bg-opacity));
-}
-
-.bg-fuchsia-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(245 208 254 / var(--tw-bg-opacity));
-}
-
-.bg-fuchsia-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(240 171 252 / var(--tw-bg-opacity));
-}
-
-.bg-fuchsia-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(232 121 249 / var(--tw-bg-opacity));
-}
-
-.bg-fuchsia-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(253 244 255 / var(--tw-bg-opacity));
-}
-
-.bg-fuchsia-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(217 70 239 / var(--tw-bg-opacity));
-}
-
-.bg-fuchsia-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(192 38 211 / var(--tw-bg-opacity));
-}
-
-.bg-fuchsia-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(162 28 175 / var(--tw-bg-opacity));
-}
-
-.bg-fuchsia-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(134 25 143 / var(--tw-bg-opacity));
-}
-
-.bg-fuchsia-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(112 26 117 / var(--tw-bg-opacity));
-}
-
-.bg-gray-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-}
-
-.bg-gray-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-}
-
-.bg-gray-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
-}
-
-.bg-gray-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
-}
-
-.bg-gray-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
-}
-
-.bg-gray-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
-}
-
-.bg-gray-500\/10 {
-  background-color: rgb(107 114 128 / 0.1);
-}
-
-.bg-gray-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
-}
-
-.bg-gray-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-}
-
-.bg-gray-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-}
-
-.bg-gray-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
-}
-
-.bg-green-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
-}
-
-.bg-green-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(187 247 208 / var(--tw-bg-opacity));
-}
-
-.bg-green-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(134 239 172 / var(--tw-bg-opacity));
-}
-
-.bg-green-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(74 222 128 / var(--tw-bg-opacity));
-}
-
-.bg-green-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(240 253 244 / var(--tw-bg-opacity));
-}
-
-.bg-green-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
-}
-
-.bg-green-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
-}
-
-.bg-green-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(21 128 61 / var(--tw-bg-opacity));
-}
-
-.bg-green-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(22 101 52 / var(--tw-bg-opacity));
-}
-
-.bg-green-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(20 83 45 / var(--tw-bg-opacity));
-}
-
-.bg-indigo-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(224 231 255 / var(--tw-bg-opacity));
-}
-
-.bg-indigo-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(199 210 254 / var(--tw-bg-opacity));
-}
-
-.bg-indigo-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(165 180 252 / var(--tw-bg-opacity));
-}
-
-.bg-indigo-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(129 140 248 / var(--tw-bg-opacity));
-}
-
-.bg-indigo-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(238 242 255 / var(--tw-bg-opacity));
-}
-
-.bg-indigo-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(99 102 241 / var(--tw-bg-opacity));
-}
-
-.bg-indigo-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
-}
-
-.bg-indigo-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(67 56 202 / var(--tw-bg-opacity));
-}
-
-.bg-indigo-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(55 48 163 / var(--tw-bg-opacity));
-}
-
-.bg-indigo-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(49 46 129 / var(--tw-bg-opacity));
-}
-
-.bg-info {
-  background-color: var(--cal-bg-info);
-}
-
-.bg-inherit {
-  background-color: inherit;
-}
-
-.bg-inverted {
-  background-color: var(--cal-bg-inverted);
-}
-
-.bg-lime-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(236 252 203 / var(--tw-bg-opacity));
-}
-
-.bg-lime-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(217 249 157 / var(--tw-bg-opacity));
-}
-
-.bg-lime-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(190 242 100 / var(--tw-bg-opacity));
-}
-
-.bg-lime-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(163 230 53 / var(--tw-bg-opacity));
-}
-
-.bg-lime-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(247 254 231 / var(--tw-bg-opacity));
-}
-
-.bg-lime-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(132 204 22 / var(--tw-bg-opacity));
-}
-
-.bg-lime-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(101 163 13 / var(--tw-bg-opacity));
-}
-
-.bg-lime-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(77 124 15 / var(--tw-bg-opacity));
-}
-
-.bg-lime-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(63 98 18 / var(--tw-bg-opacity));
-}
-
-.bg-lime-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(54 83 20 / var(--tw-bg-opacity));
-}
-
-.bg-muted {
-  background-color: var(--cal-bg-muted);
-}
-
-.bg-neutral-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
-}
-
-.bg-neutral-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 229 229 / var(--tw-bg-opacity));
-}
-
-.bg-neutral-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(212 212 212 / var(--tw-bg-opacity));
-}
-
-.bg-neutral-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(163 163 163 / var(--tw-bg-opacity));
-}
-
-.bg-neutral-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
-}
-
-.bg-neutral-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(115 115 115 / var(--tw-bg-opacity));
-}
-
-.bg-neutral-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(82 82 82 / var(--tw-bg-opacity));
-}
-
-.bg-neutral-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(64 64 64 / var(--tw-bg-opacity));
-}
-
-.bg-neutral-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
-}
-
-.bg-neutral-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(23 23 23 / var(--tw-bg-opacity));
-}
-
-.bg-orange-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 237 213 / var(--tw-bg-opacity));
-}
-
-.bg-orange-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 215 170 / var(--tw-bg-opacity));
-}
-
-.bg-orange-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(253 186 116 / var(--tw-bg-opacity));
-}
-
-.bg-orange-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(251 146 60 / var(--tw-bg-opacity));
-}
-
-.bg-orange-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 247 237 / var(--tw-bg-opacity));
-}
-
-.bg-orange-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 115 22 / var(--tw-bg-opacity));
-}
-
-.bg-orange-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(234 88 12 / var(--tw-bg-opacity));
-}
-
-.bg-orange-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(194 65 12 / var(--tw-bg-opacity));
-}
-
-.bg-orange-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(154 52 18 / var(--tw-bg-opacity));
-}
-
-.bg-orange-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(124 45 18 / var(--tw-bg-opacity));
-}
-
-.bg-pink-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(252 231 243 / var(--tw-bg-opacity));
-}
-
-.bg-pink-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(251 207 232 / var(--tw-bg-opacity));
-}
-
-.bg-pink-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 168 212 / var(--tw-bg-opacity));
-}
-
-.bg-pink-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(244 114 182 / var(--tw-bg-opacity));
-}
-
-.bg-pink-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(253 242 248 / var(--tw-bg-opacity));
-}
-
-.bg-pink-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(236 72 153 / var(--tw-bg-opacity));
-}
-
-.bg-pink-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(219 39 119 / var(--tw-bg-opacity));
-}
-
-.bg-pink-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(190 24 93 / var(--tw-bg-opacity));
-}
-
-.bg-pink-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(131 24 67 / var(--tw-bg-opacity));
-}
-
-.bg-purple-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 232 255 / var(--tw-bg-opacity));
-}
-
-.bg-purple-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(233 213 255 / var(--tw-bg-opacity));
-}
-
-.bg-purple-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(216 180 254 / var(--tw-bg-opacity));
-}
-
-.bg-purple-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(192 132 252 / var(--tw-bg-opacity));
-}
-
-.bg-purple-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(250 245 255 / var(--tw-bg-opacity));
-}
-
-.bg-purple-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(168 85 247 / var(--tw-bg-opacity));
-}
-
-.bg-purple-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(147 51 234 / var(--tw-bg-opacity));
-}
-
-.bg-purple-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(126 34 206 / var(--tw-bg-opacity));
-}
-
-.bg-purple-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(107 33 168 / var(--tw-bg-opacity));
-}
-
-.bg-purple-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(88 28 135 / var(--tw-bg-opacity));
-}
-
-.bg-red-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
-}
-
-.bg-red-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
-}
-
-.bg-red-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
-}
-
-.bg-red-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
-}
-
-.bg-red-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
-}
-
-.bg-red-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
-}
-
-.bg-red-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
-}
-
-.bg-red-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
-}
-
-.bg-red-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(153 27 27 / var(--tw-bg-opacity));
-}
-
-.bg-red-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(127 29 29 / var(--tw-bg-opacity));
-}
-
-.bg-rose-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 228 230 / var(--tw-bg-opacity));
-}
-
-.bg-rose-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 205 211 / var(--tw-bg-opacity));
-}
-
-.bg-rose-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(253 164 175 / var(--tw-bg-opacity));
-}
-
-.bg-rose-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(251 113 133 / var(--tw-bg-opacity));
-}
-
-.bg-rose-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 241 242 / var(--tw-bg-opacity));
-}
-
-.bg-rose-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(244 63 94 / var(--tw-bg-opacity));
-}
-
-.bg-rose-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(225 29 72 / var(--tw-bg-opacity));
-}
-
-.bg-rose-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(190 18 60 / var(--tw-bg-opacity));
-}
-
-.bg-rose-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(159 18 57 / var(--tw-bg-opacity));
-}
-
-.bg-rose-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(136 19 55 / var(--tw-bg-opacity));
-}
-
-.bg-semantic-attention-subtle {
-  background-color: var(--cal-bg-semantic-attention-subtle);
-}
-
-.bg-semantic-error-subtle {
-  background-color: var(--cal-bg-semantic-error-subtle);
-}
-
-.bg-semantic-info-subtle {
-  background-color: var(--cal-bg-semantic-info-subtle);
-}
-
-.bg-sky-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(224 242 254 / var(--tw-bg-opacity));
-}
-
-.bg-sky-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(186 230 253 / var(--tw-bg-opacity));
-}
-
-.bg-sky-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(125 211 252 / var(--tw-bg-opacity));
-}
-
-.bg-sky-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(56 189 248 / var(--tw-bg-opacity));
-}
-
-.bg-sky-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(240 249 255 / var(--tw-bg-opacity));
-}
-
-.bg-sky-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(14 165 233 / var(--tw-bg-opacity));
-}
-
-.bg-sky-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(2 132 199 / var(--tw-bg-opacity));
-}
-
-.bg-sky-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(3 105 161 / var(--tw-bg-opacity));
-}
-
-.bg-sky-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(7 89 133 / var(--tw-bg-opacity));
-}
-
-.bg-sky-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(12 74 110 / var(--tw-bg-opacity));
-}
-
-.bg-slate-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
-}
-
-.bg-slate-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(226 232 240 / var(--tw-bg-opacity));
-}
-
-.bg-slate-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(203 213 225 / var(--tw-bg-opacity));
-}
-
-.bg-slate-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(148 163 184 / var(--tw-bg-opacity));
-}
-
-.bg-slate-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
-}
-
-.bg-slate-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(100 116 139 / var(--tw-bg-opacity));
-}
-
-.bg-slate-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(71 85 105 / var(--tw-bg-opacity));
-}
-
-.bg-slate-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(51 65 85 / var(--tw-bg-opacity));
-}
-
-.bg-slate-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(30 41 59 / var(--tw-bg-opacity));
-}
-
-.bg-slate-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(15 23 42 / var(--tw-bg-opacity));
-}
-
-.bg-stone-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(245 245 244 / var(--tw-bg-opacity));
-}
-
-.bg-stone-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(231 229 228 / var(--tw-bg-opacity));
-}
-
-.bg-stone-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(214 211 209 / var(--tw-bg-opacity));
-}
-
-.bg-stone-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(168 162 158 / var(--tw-bg-opacity));
-}
-
-.bg-stone-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(250 250 249 / var(--tw-bg-opacity));
-}
-
-.bg-stone-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(120 113 108 / var(--tw-bg-opacity));
-}
-
-.bg-stone-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(87 83 78 / var(--tw-bg-opacity));
-}
-
-.bg-stone-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(68 64 60 / var(--tw-bg-opacity));
-}
-
-.bg-stone-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(41 37 36 / var(--tw-bg-opacity));
-}
-
-.bg-stone-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(28 25 23 / var(--tw-bg-opacity));
-}
-
-.bg-subtle {
-  background-color: var(--cal-bg-subtle);
-}
-
-.bg-success {
-  background-color: var(--cal-bg-success);
-}
-
-.bg-teal-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(204 251 241 / var(--tw-bg-opacity));
-}
-
-.bg-teal-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(153 246 228 / var(--tw-bg-opacity));
-}
-
-.bg-teal-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(94 234 212 / var(--tw-bg-opacity));
-}
-
-.bg-teal-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(45 212 191 / var(--tw-bg-opacity));
-}
-
-.bg-teal-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(240 253 250 / var(--tw-bg-opacity));
-}
-
-.bg-teal-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(20 184 166 / var(--tw-bg-opacity));
-}
-
-.bg-teal-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(13 148 136 / var(--tw-bg-opacity));
-}
-
-.bg-teal-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(15 118 110 / var(--tw-bg-opacity));
-}
-
-.bg-teal-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(17 94 89 / var(--tw-bg-opacity));
-}
-
-.bg-teal-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(19 78 74 / var(--tw-bg-opacity));
-}
-
-.bg-transparent {
-  background-color: transparent;
-}
-
-.bg-violet-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(237 233 254 / var(--tw-bg-opacity));
-}
-
-.bg-violet-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(221 214 254 / var(--tw-bg-opacity));
-}
-
-.bg-violet-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(196 181 253 / var(--tw-bg-opacity));
-}
-
-.bg-violet-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(167 139 250 / var(--tw-bg-opacity));
-}
-
-.bg-violet-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(245 243 255 / var(--tw-bg-opacity));
-}
-
-.bg-violet-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(139 92 246 / var(--tw-bg-opacity));
-}
-
-.bg-violet-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(124 58 237 / var(--tw-bg-opacity));
-}
-
-.bg-violet-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(109 40 217 / var(--tw-bg-opacity));
-}
-
-.bg-violet-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(91 33 182 / var(--tw-bg-opacity));
-}
-
-.bg-violet-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(76 29 149 / var(--tw-bg-opacity));
-}
-
-.bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
-.bg-yellow-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
-}
-
-.bg-yellow-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 240 138 / var(--tw-bg-opacity));
-}
-
-.bg-yellow-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(253 224 71 / var(--tw-bg-opacity));
-}
-
-.bg-yellow-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(250 204 21 / var(--tw-bg-opacity));
-}
-
-.bg-yellow-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 252 232 / var(--tw-bg-opacity));
-}
-
-.bg-yellow-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
-}
-
-.bg-yellow-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(202 138 4 / var(--tw-bg-opacity));
-}
-
-.bg-yellow-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(161 98 7 / var(--tw-bg-opacity));
-}
-
-.bg-yellow-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(133 77 14 / var(--tw-bg-opacity));
-}
-
-.bg-yellow-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(113 63 18 / var(--tw-bg-opacity));
-}
-
-.bg-zinc-100 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(244 244 245 / var(--tw-bg-opacity));
-}
-
-.bg-zinc-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(228 228 231 / var(--tw-bg-opacity));
-}
-
-.bg-zinc-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(212 212 216 / var(--tw-bg-opacity));
-}
-
-.bg-zinc-400 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(161 161 170 / var(--tw-bg-opacity));
-}
-
-.bg-zinc-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
-}
-
-.bg-zinc-500 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(113 113 122 / var(--tw-bg-opacity));
-}
-
-.bg-zinc-600 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(82 82 91 / var(--tw-bg-opacity));
-}
-
-.bg-zinc-700 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(63 63 70 / var(--tw-bg-opacity));
-}
-
-.bg-zinc-800 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(39 39 42 / var(--tw-bg-opacity));
-}
-
-.bg-zinc-900 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(24 24 27 / var(--tw-bg-opacity));
-}
-
-.bg-opacity-30 {
-  --tw-bg-opacity: 0.3;
-}
-
-.bg-opacity-40 {
-  --tw-bg-opacity: 0.4;
-}
-
-.bg-opacity-5 {
-  --tw-bg-opacity: 0.05;
-}
-
-.bg-opacity-50 {
-  --tw-bg-opacity: 0.5;
-}
-
-.bg-opacity-70 {
-  --tw-bg-opacity: 0.7;
-}
-
-.bg-opacity-90 {
-  --tw-bg-opacity: 0.9;
-}
-
-.bg-gradient-primary {
-  background-image: radial-gradient(162.05% 170% at 109.58% 35%, #667593 0%, #E3E3E3 100%);
-}
-
-.bg-gradient-to-l {
-  background-image: linear-gradient(to left, var(--tw-gradient-stops));
-}
-
-.bg-gradient-to-r {
-  background-image: linear-gradient(to right, var(--tw-gradient-stops));
-}
-
-.from-default {
-  --tw-gradient-from: var(--cal-bg, white) var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-.from-transparent {
-  --tw-gradient-from: transparent var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-.to-default {
-  --tw-gradient-to: var(--cal-bg, white) var(--tw-gradient-to-position);
-}
-
-.to-transparent {
-  --tw-gradient-to: transparent var(--tw-gradient-to-position);
-}
-
-.bg-cover {
-  background-size: cover;
-}
-
-.bg-clip-text {
-  -webkit-background-clip: text;
-  background-clip: text;
-}
-
-.bg-center {
-  background-position: center;
-}
-
-.bg-repeat {
-  background-repeat: repeat;
-}
-
-.bg-no-repeat {
-  background-repeat: no-repeat;
-}
-
-.fill-blue-500 {
-  fill: #3b82f6;
-}
-
-.fill-current {
-  fill: currentColor;
-}
-
-.fill-default {
-  fill: var(--cal-text, #374151);
-}
-
-.fill-emphasis {
-  fill: var(--cal-text-emphasis, #111827);
-}
-
-.fill-muted {
-  fill: var(--cal-text-muted, #9CA3AF);
-}
-
-.fill-orange-400 {
-  fill: #fb923c;
-}
-
-.fill-transparent {
-  fill: transparent;
-}
-
-.fill-yellow-500 {
-  fill: #eab308;
-}
-
-.stroke-2 {
-  stroke-width: 2;
-}
-
-.stroke-\[1\.3px\] {
-  stroke-width: 1.3px;
-}
-
-.stroke-\[1\.5px\] {
-  stroke-width: 1.5px;
-}
-
-.stroke-\[2\.5px\] {
-  stroke-width: 2.5px;
-}
-
-.stroke-\[2px\] {
-  stroke-width: 2px;
-}
-
-.stroke-\[3px\] {
-  stroke-width: 3px;
-}
-
-.object-contain {
-  -o-object-fit: contain;
-  object-fit: contain;
-}
-
-.object-cover {
-  -o-object-fit: cover;
-  object-fit: cover;
-}
-
-.object-left {
-  -o-object-position: left;
-  object-position: left;
-}
-
-.object-top {
-  -o-object-position: top;
-  object-position: top;
-}
-
-.\!p-0 {
-  padding: var(--cal-spacing-0) !important;
-}
-
-.\!p-1 {
-  padding: var(--cal-spacing-1) !important;
-}
-
-.\!p-2 {
-  padding: var(--cal-spacing-2) !important;
-}
-
-.\!p-5 {
-  padding: var(--cal-spacing-5) !important;
-}
-
-.p-0 {
-  padding: var(--cal-spacing-0);
-}
-
-.p-0\.5 {
-  padding: var(--cal-spacing-0_5);
-}
-
-.p-1 {
-  padding: var(--cal-spacing-1);
-}
-
-.p-1\.5 {
-  padding: var(--cal-spacing-1_5);
-}
-
-.p-10 {
-  padding: var(--cal-spacing-10);
-}
-
-.p-14 {
-  padding: var(--cal-spacing-14);
-}
-
-.p-2 {
-  padding: var(--cal-spacing-2);
-}
-
-.p-2\.5 {
-  padding: var(--cal-spacing-2_5);
-}
-
-.p-3 {
-  padding: var(--cal-spacing-3);
-}
-
-.p-4 {
-  padding: var(--cal-spacing-4);
-}
-
-.p-5 {
-  padding: var(--cal-spacing-5);
-}
-
-.p-6 {
-  padding: var(--cal-spacing-6);
-}
-
-.p-7 {
-  padding: var(--cal-spacing-7);
-}
-
-.p-8 {
-  padding: var(--cal-spacing-8);
-}
-
-.p-\[1px\] {
-  padding: 1px;
-}
-
-.p-\[6px\] {
-  padding: 6px;
-}
-
-.p-px {
-  padding: var(--cal-spacing-px);
-}
-
-.\!px-0 {
-  padding-left: var(--cal-spacing-0) !important;
-  padding-right: var(--cal-spacing-0) !important;
-}
-
-.\!px-2 {
-  padding-left: var(--cal-spacing-2) !important;
-  padding-right: var(--cal-spacing-2) !important;
-}
-
-.\!py-0 {
-  padding-top: var(--cal-spacing-0) !important;
-  padding-bottom: var(--cal-spacing-0) !important;
-}
-
-.px-0 {
-  padding-left: var(--cal-spacing-0);
-  padding-right: var(--cal-spacing-0);
-}
-
-.px-1 {
-  padding-left: var(--cal-spacing-1);
-  padding-right: var(--cal-spacing-1);
-}
-
-.px-1\.5 {
-  padding-left: var(--cal-spacing-1_5);
-  padding-right: var(--cal-spacing-1_5);
-}
-
-.px-10 {
-  padding-left: var(--cal-spacing-10);
-  padding-right: var(--cal-spacing-10);
-}
-
-.px-12 {
-  padding-left: var(--cal-spacing-12);
-  padding-right: var(--cal-spacing-12);
-}
-
-.px-2 {
-  padding-left: var(--cal-spacing-2);
-  padding-right: var(--cal-spacing-2);
-}
-
-.px-2\.5 {
-  padding-left: var(--cal-spacing-2_5);
-  padding-right: var(--cal-spacing-2_5);
-}
-
-.px-3 {
-  padding-left: var(--cal-spacing-3);
-  padding-right: var(--cal-spacing-3);
-}
-
-.px-3\.5 {
-  padding-left: var(--cal-spacing-3_5);
-  padding-right: var(--cal-spacing-3_5);
-}
-
-.px-4 {
-  padding-left: var(--cal-spacing-4);
-  padding-right: var(--cal-spacing-4);
-}
-
-.px-5 {
-  padding-left: var(--cal-spacing-5);
-  padding-right: var(--cal-spacing-5);
-}
-
-.px-6 {
-  padding-left: var(--cal-spacing-6);
-  padding-right: var(--cal-spacing-6);
-}
-
-.px-8 {
-  padding-left: var(--cal-spacing-8);
-  padding-right: var(--cal-spacing-8);
-}
-
-.px-9 {
-  padding-left: var(--cal-spacing-9);
-  padding-right: var(--cal-spacing-9);
-}
-
-.px-\[10px\] {
-  padding-left: 10px;
-  padding-right: 10px;
-}
-
-.px-\[6px\] {
-  padding-left: 6px;
-  padding-right: 6px;
-}
-
-.px-px {
-  padding-left: var(--cal-spacing-px);
-  padding-right: var(--cal-spacing-px);
-}
-
-.py-0 {
-  padding-top: var(--cal-spacing-0);
-  padding-bottom: var(--cal-spacing-0);
-}
-
-.py-0\.5 {
-  padding-top: var(--cal-spacing-0_5);
-  padding-bottom: var(--cal-spacing-0_5);
-}
-
-.py-1 {
-  padding-top: var(--cal-spacing-1);
-  padding-bottom: var(--cal-spacing-1);
-}
-
-.py-1\.5 {
-  padding-top: var(--cal-spacing-1_5);
-  padding-bottom: var(--cal-spacing-1_5);
-}
-
-.py-10 {
-  padding-top: var(--cal-spacing-10);
-  padding-bottom: var(--cal-spacing-10);
-}
-
-.py-12 {
-  padding-top: var(--cal-spacing-12);
-  padding-bottom: var(--cal-spacing-12);
-}
-
-.py-14 {
-  padding-top: var(--cal-spacing-14);
-  padding-bottom: var(--cal-spacing-14);
-}
-
-.py-2 {
-  padding-top: var(--cal-spacing-2);
-  padding-bottom: var(--cal-spacing-2);
-}
-
-.py-2\.5 {
-  padding-top: var(--cal-spacing-2_5);
-  padding-bottom: var(--cal-spacing-2_5);
-}
-
-.py-24 {
-  padding-top: var(--cal-spacing-24);
-  padding-bottom: var(--cal-spacing-24);
-}
-
-.py-3 {
-  padding-top: var(--cal-spacing-3);
-  padding-bottom: var(--cal-spacing-3);
-}
-
-.py-4 {
-  padding-top: var(--cal-spacing-4);
-  padding-bottom: var(--cal-spacing-4);
-}
-
-.py-5 {
-  padding-top: var(--cal-spacing-5);
-  padding-bottom: var(--cal-spacing-5);
-}
-
-.py-6 {
-  padding-top: var(--cal-spacing-6);
-  padding-bottom: var(--cal-spacing-6);
-}
-
-.py-8 {
-  padding-top: var(--cal-spacing-8);
-  padding-bottom: var(--cal-spacing-8);
-}
-
-.py-\[10px\] {
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
-.py-\[10x\] {
-  padding-top: 10x;
-  padding-bottom: 10x;
-}
-
-.py-\[19px\] {
-  padding-top: 19px;
-  padding-bottom: 19px;
-}
-
-.py-\[1px\] {
-  padding-top: 1px;
-  padding-bottom: 1px;
-}
-
-.py-\[2px\] {
-  padding-top: 2px;
-  padding-bottom: 2px;
-}
-
-.py-\[5px\] {
-  padding-top: 5px;
-  padding-bottom: 5px;
-}
-
-.py-\[6px\] {
-  padding-top: 6px;
-  padding-bottom: 6px;
-}
-
-.py-px {
-  padding-top: var(--cal-spacing-px);
-  padding-bottom: var(--cal-spacing-px);
-}
-
-.\!pb-0 {
-  padding-bottom: var(--cal-spacing-0) !important;
-}
-
-.\!pl-0 {
-  padding-left: var(--cal-spacing-0) !important;
-}
-
-.\!pt-0 {
-  padding-top: var(--cal-spacing-0) !important;
-}
-
-.pb-0 {
-  padding-bottom: var(--cal-spacing-0);
-}
-
-.pb-1 {
-  padding-bottom: var(--cal-spacing-1);
-}
-
-.pb-10 {
-  padding-bottom: var(--cal-spacing-10);
-}
-
-.pb-11 {
-  padding-bottom: var(--cal-spacing-11);
-}
-
-.pb-12 {
-  padding-bottom: var(--cal-spacing-12);
-}
-
-.pb-2 {
-  padding-bottom: var(--cal-spacing-2);
-}
-
-.pb-2\.5 {
-  padding-bottom: var(--cal-spacing-2_5);
-}
-
-.pb-20 {
-  padding-bottom: var(--cal-spacing-20);
-}
-
-.pb-3 {
-  padding-bottom: var(--cal-spacing-3);
-}
-
-.pb-4 {
-  padding-bottom: var(--cal-spacing-4);
-}
-
-.pb-5 {
-  padding-bottom: var(--cal-spacing-5);
-}
-
-.pb-6 {
-  padding-bottom: var(--cal-spacing-6);
-}
-
-.pb-7 {
-  padding-bottom: var(--cal-spacing-7);
-}
-
-.pb-8 {
-  padding-bottom: var(--cal-spacing-8);
-}
-
-.pb-px {
-  padding-bottom: var(--cal-spacing-px);
-}
-
-.pe-2 {
-  -webkit-padding-end: var(--cal-spacing-2);
-  padding-inline-end: var(--cal-spacing-2);
-}
-
-.pe-3 {
-  -webkit-padding-end: var(--cal-spacing-3);
-  padding-inline-end: var(--cal-spacing-3);
-}
-
-.pl-0 {
-  padding-left: var(--cal-spacing-0);
-}
-
-.pl-0\.5 {
-  padding-left: var(--cal-spacing-0_5);
-}
-
-.pl-1 {
-  padding-left: var(--cal-spacing-1);
-}
-
-.pl-10 {
-  padding-left: var(--cal-spacing-10);
-}
-
-.pl-11 {
-  padding-left: var(--cal-spacing-11);
-}
-
-.pl-16 {
-  padding-left: var(--cal-spacing-16);
-}
-
-.pl-2 {
-  padding-left: var(--cal-spacing-2);
-}
-
-.pl-2\.5 {
-  padding-left: var(--cal-spacing-2_5);
-}
-
-.pl-3 {
-  padding-left: var(--cal-spacing-3);
-}
-
-.pl-4 {
-  padding-left: var(--cal-spacing-4);
-}
-
-.pl-5 {
-  padding-left: var(--cal-spacing-5);
-}
-
-.pl-6 {
-  padding-left: var(--cal-spacing-6);
-}
-
-.pl-px {
-  padding-left: var(--cal-spacing-px);
-}
-
-.pr-0 {
-  padding-right: var(--cal-spacing-0);
-}
-
-.pr-1 {
-  padding-right: var(--cal-spacing-1);
-}
-
-.pr-10 {
-  padding-right: var(--cal-spacing-10);
-}
-
-.pr-12 {
-  padding-right: var(--cal-spacing-12);
-}
-
-.pr-2 {
-  padding-right: var(--cal-spacing-2);
-}
-
-.pr-2\.5 {
-  padding-right: var(--cal-spacing-2_5);
-}
-
-.pr-3 {
-  padding-right: var(--cal-spacing-3);
-}
-
-.pr-4 {
-  padding-right: var(--cal-spacing-4);
-}
-
-.pr-6 {
-  padding-right: var(--cal-spacing-6);
-}
-
-.pr-8 {
-  padding-right: var(--cal-spacing-8);
-}
-
-.pr-px {
-  padding-right: var(--cal-spacing-px);
-}
-
-.ps-1 {
-  -webkit-padding-start: var(--cal-spacing-1);
-  padding-inline-start: var(--cal-spacing-1);
-}
-
-.ps-6 {
-  -webkit-padding-start: var(--cal-spacing-6);
-  padding-inline-start: var(--cal-spacing-6);
-}
-
-.pt-0 {
-  padding-top: var(--cal-spacing-0);
-}
-
-.pt-0\.5 {
-  padding-top: var(--cal-spacing-0_5);
-}
-
-.pt-1 {
-  padding-top: var(--cal-spacing-1);
-}
-
-.pt-1\.5 {
-  padding-top: var(--cal-spacing-1_5);
-}
-
-.pt-12 {
-  padding-top: var(--cal-spacing-12);
-}
-
-.pt-16 {
-  padding-top: var(--cal-spacing-16);
-}
-
-.pt-2 {
-  padding-top: var(--cal-spacing-2);
-}
-
-.pt-3 {
-  padding-top: var(--cal-spacing-3);
-}
-
-.pt-4 {
-  padding-top: var(--cal-spacing-4);
-}
-
-.pt-5 {
-  padding-top: var(--cal-spacing-5);
-}
-
-.pt-6 {
-  padding-top: var(--cal-spacing-6);
-}
-
-.pt-8 {
-  padding-top: var(--cal-spacing-8);
-}
-
-.pt-9 {
-  padding-top: var(--cal-spacing-9);
-}
-
-.pt-\[100\%\] {
-  padding-top: 100%;
-}
-
-.pt-\[6px\] {
-  padding-top: 6px;
-}
-
-.pt-px {
-  padding-top: var(--cal-spacing-px);
-}
-
-.text-left {
-  text-align: left;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.text-right {
-  text-align: right;
-}
-
-.align-baseline {
-  vertical-align: baseline;
-}
-
-.align-top {
-  vertical-align: top;
-}
-
-.align-middle {
-  vertical-align: middle;
-}
-
-.align-bottom {
-  vertical-align: bottom;
-}
-
-.align-text-top {
-  vertical-align: text-top;
-}
-
-.\!font-cal {
-  font-family: var(--font-cal), ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !important;
-}
-
-.font-\[family-name\:var\(--font-inter\)\] {
-  font-family: var(--font-inter);
-}
-
-.font-cal {
-  font-family: var(--font-cal), ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-}
-
-.font-mono {
-  font-family: Roboto Mono, monospace;
-}
-
-.font-sans {
-  font-family: var(--font-inter), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-}
-
-.\!text-xl {
-  font-size: 1.25rem !important;
-  line-height: 1.75rem !important;
-}
-
-.text-2xl {
-  font-size: 1.5rem;
-  line-height: 2rem;
-}
-
-.text-3xl {
-  font-size: 1.875rem;
-  line-height: 2.25rem;
-}
-
-.text-4xl {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
-}
-
-.text-6xl {
-  font-size: 3.75rem;
-  line-height: 1;
-}
-
-.text-\[\.5rem\] {
-  font-size: .5rem;
-}
-
-.text-\[0\.5rem\] {
-  font-size: 0.5rem;
-}
-
-.text-\[0px\] {
-  font-size: 0px;
-}
-
-.text-\[10px\] {
-  font-size: 10px;
-}
-
-.text-\[12px\] {
-  font-size: 12px;
-}
-
-.text-\[13px\] {
-  font-size: 13px;
-}
-
-.text-\[14px\] {
-  font-size: 14px;
-}
-
-.text-\[28px\] {
-  font-size: 28px;
-}
-
-.text-base {
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
-
-.text-lg {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-}
-
-.text-sm {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-
-.text-xl {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-}
-
-.text-xs {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-
-.\!font-normal {
-  font-weight: 400 !important;
-}
-
-.font-bold {
-  font-weight: 700;
-}
-
-.font-extrabold {
-  font-weight: 800;
-}
-
-.font-extralight {
-  font-weight: 200;
-}
-
-.font-light {
-  font-weight: 300;
-}
-
-.font-medium {
-  font-weight: 500;
-}
-
-.font-normal {
-  font-weight: 400;
-}
-
-.font-semibold {
-  font-weight: 600;
-}
-
-.uppercase {
-  text-transform: uppercase;
-}
-
-.lowercase {
-  text-transform: lowercase;
-}
-
-.capitalize {
-  text-transform: capitalize;
-}
-
-.normal-case {
-  text-transform: none;
-}
-
-.italic {
-  font-style: italic;
-}
-
-.not-italic {
-  font-style: normal;
-}
-
-.normal-nums {
-  font-variant-numeric: normal;
-}
-
-.ordinal {
-  --tw-ordinal: ordinal;
-  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
-}
-
-.slashed-zero {
-  --tw-slashed-zero: slashed-zero;
-  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
-}
-
-.lining-nums {
-  --tw-numeric-figure: lining-nums;
-  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
-}
-
-.oldstyle-nums {
-  --tw-numeric-figure: oldstyle-nums;
-  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
-}
-
-.proportional-nums {
-  --tw-numeric-spacing: proportional-nums;
-  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
-}
-
-.tabular-nums {
-  --tw-numeric-spacing: tabular-nums;
-  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
-}
-
-.diagonal-fractions {
-  --tw-numeric-fraction: diagonal-fractions;
-  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
-}
-
-.leading-3 {
-  line-height: .75rem;
-}
-
-.leading-4 {
-  line-height: 1rem;
-}
-
-.leading-5 {
-  line-height: 1.25rem;
-}
-
-.leading-6 {
-  line-height: 1.5rem;
-}
-
-.leading-7 {
-  line-height: 1.75rem;
-}
-
-.leading-\[0\] {
-  line-height: 0;
-}
-
-.leading-\[18px\] {
-  line-height: 18px;
-}
-
-.leading-none {
-  line-height: 1;
-}
-
-.leading-normal {
-  line-height: 1.5;
-}
-
-.leading-tight {
-  line-height: 1.25;
-}
-
-.tracking-\[0\.01em\] {
-  letter-spacing: 0.01em;
-}
-
-.tracking-normal {
-  letter-spacing: 0em;
-}
-
-.tracking-tight {
-  letter-spacing: -0.025em;
-}
-
-.tracking-wide {
-  letter-spacing: 0.025em;
-}
-
-.tracking-wider {
-  letter-spacing: 0.05em;
-}
-
-.tracking-widest {
-  letter-spacing: 0.1em;
-}
-
-.\!text-default {
-  color: var(--cal-text) !important;
-}
-
-.\!text-emphasis {
-  color: var(--cal-text-emphasis) !important;
-}
-
-.\!text-green-700 {
-  --tw-text-opacity: 1 !important;
-  color: rgb(21 128 61 / var(--tw-text-opacity)) !important;
-}
-
-.\!text-orange-900 {
-  --tw-text-opacity: 1 !important;
-  color: rgb(124 45 18 / var(--tw-text-opacity)) !important;
-}
-
-.\!text-red-700 {
-  --tw-text-opacity: 1 !important;
-  color: rgb(185 28 28 / var(--tw-text-opacity)) !important;
-}
-
-.text-\[\#5B93F9\] {
-  --tw-text-opacity: 1;
-  color: rgb(91 147 249 / var(--tw-text-opacity));
-}
-
-.text-\[--cal-brand\] {
-  color: var(--cal-brand);
-}
-
-.text-amber-100 {
-  --tw-text-opacity: 1;
-  color: rgb(254 243 199 / var(--tw-text-opacity));
-}
-
-.text-amber-200 {
-  --tw-text-opacity: 1;
-  color: rgb(253 230 138 / var(--tw-text-opacity));
-}
-
-.text-amber-300 {
-  --tw-text-opacity: 1;
-  color: rgb(252 211 77 / var(--tw-text-opacity));
-}
-
-.text-amber-400 {
-  --tw-text-opacity: 1;
-  color: rgb(251 191 36 / var(--tw-text-opacity));
-}
-
-.text-amber-50 {
-  --tw-text-opacity: 1;
-  color: rgb(255 251 235 / var(--tw-text-opacity));
-}
-
-.text-amber-500 {
-  --tw-text-opacity: 1;
-  color: rgb(245 158 11 / var(--tw-text-opacity));
-}
-
-.text-amber-600 {
-  --tw-text-opacity: 1;
-  color: rgb(217 119 6 / var(--tw-text-opacity));
-}
-
-.text-amber-700 {
-  --tw-text-opacity: 1;
-  color: rgb(180 83 9 / var(--tw-text-opacity));
-}
-
-.text-amber-800 {
-  --tw-text-opacity: 1;
-  color: rgb(146 64 14 / var(--tw-text-opacity));
-}
-
-.text-amber-900 {
-  --tw-text-opacity: 1;
-  color: rgb(120 53 15 / var(--tw-text-opacity));
-}
-
-.text-attention {
-  color: var(--cal-text-attention);
-}
-
-.text-black {
-  --tw-text-opacity: 1;
-  color: rgb(17 17 17 / var(--tw-text-opacity));
-}
-
-.text-blue-100 {
-  --tw-text-opacity: 1;
-  color: rgb(219 234 254 / var(--tw-text-opacity));
-}
-
-.text-blue-200 {
-  --tw-text-opacity: 1;
-  color: rgb(191 219 254 / var(--tw-text-opacity));
-}
-
-.text-blue-300 {
-  --tw-text-opacity: 1;
-  color: rgb(147 197 253 / var(--tw-text-opacity));
-}
-
-.text-blue-400 {
-  --tw-text-opacity: 1;
-  color: rgb(96 165 250 / var(--tw-text-opacity));
-}
-
-.text-blue-50 {
-  --tw-text-opacity: 1;
-  color: rgb(239 246 255 / var(--tw-text-opacity));
-}
-
-.text-blue-500 {
-  --tw-text-opacity: 1;
-  color: rgb(59 130 246 / var(--tw-text-opacity));
-}
-
-.text-blue-600 {
-  --tw-text-opacity: 1;
-  color: rgb(37 99 235 / var(--tw-text-opacity));
-}
-
-.text-blue-700 {
-  --tw-text-opacity: 1;
-  color: rgb(29 78 216 / var(--tw-text-opacity));
-}
-
-.text-blue-800 {
-  --tw-text-opacity: 1;
-  color: rgb(30 64 175 / var(--tw-text-opacity));
-}
-
-.text-blue-900 {
-  --tw-text-opacity: 1;
-  color: rgb(30 58 138 / var(--tw-text-opacity));
-}
-
-.text-brand {
-  color: var(--cal-brand-text);
-}
-
-.text-current {
-  color: currentColor;
-}
-
-.text-cyan-100 {
-  --tw-text-opacity: 1;
-  color: rgb(207 250 254 / var(--tw-text-opacity));
-}
-
-.text-cyan-200 {
-  --tw-text-opacity: 1;
-  color: rgb(165 243 252 / var(--tw-text-opacity));
-}
-
-.text-cyan-300 {
-  --tw-text-opacity: 1;
-  color: rgb(103 232 249 / var(--tw-text-opacity));
-}
-
-.text-cyan-400 {
-  --tw-text-opacity: 1;
-  color: rgb(34 211 238 / var(--tw-text-opacity));
-}
-
-.text-cyan-50 {
-  --tw-text-opacity: 1;
-  color: rgb(236 254 255 / var(--tw-text-opacity));
-}
-
-.text-cyan-500 {
-  --tw-text-opacity: 1;
-  color: rgb(6 182 212 / var(--tw-text-opacity));
-}
-
-.text-cyan-600 {
-  --tw-text-opacity: 1;
-  color: rgb(8 145 178 / var(--tw-text-opacity));
-}
-
-.text-cyan-700 {
-  --tw-text-opacity: 1;
-  color: rgb(14 116 144 / var(--tw-text-opacity));
-}
-
-.text-cyan-800 {
-  --tw-text-opacity: 1;
-  color: rgb(21 94 117 / var(--tw-text-opacity));
-}
-
-.text-cyan-900 {
-  --tw-text-opacity: 1;
-  color: rgb(22 78 99 / var(--tw-text-opacity));
-}
-
-.text-default {
-  color: var(--cal-text);
-}
-
-.text-emerald-100 {
-  --tw-text-opacity: 1;
-  color: rgb(209 250 229 / var(--tw-text-opacity));
-}
-
-.text-emerald-200 {
-  --tw-text-opacity: 1;
-  color: rgb(167 243 208 / var(--tw-text-opacity));
-}
-
-.text-emerald-300 {
-  --tw-text-opacity: 1;
-  color: rgb(110 231 183 / var(--tw-text-opacity));
-}
-
-.text-emerald-400 {
-  --tw-text-opacity: 1;
-  color: rgb(52 211 153 / var(--tw-text-opacity));
-}
-
-.text-emerald-50 {
-  --tw-text-opacity: 1;
-  color: rgb(236 253 245 / var(--tw-text-opacity));
-}
-
-.text-emerald-500 {
-  --tw-text-opacity: 1;
-  color: rgb(16 185 129 / var(--tw-text-opacity));
-}
-
-.text-emerald-600 {
-  --tw-text-opacity: 1;
-  color: rgb(5 150 105 / var(--tw-text-opacity));
-}
-
-.text-emerald-700 {
-  --tw-text-opacity: 1;
-  color: rgb(4 120 87 / var(--tw-text-opacity));
-}
-
-.text-emerald-800 {
-  --tw-text-opacity: 1;
-  color: rgb(6 95 70 / var(--tw-text-opacity));
-}
-
-.text-emerald-900 {
-  --tw-text-opacity: 1;
-  color: rgb(6 78 59 / var(--tw-text-opacity));
-}
-
-.text-emphasis {
-  color: var(--cal-text-emphasis);
-}
-
-.text-error {
-  color: var(--cal-text-error);
-}
-
-.text-fuchsia-100 {
-  --tw-text-opacity: 1;
-  color: rgb(250 232 255 / var(--tw-text-opacity));
-}
-
-.text-fuchsia-200 {
-  --tw-text-opacity: 1;
-  color: rgb(245 208 254 / var(--tw-text-opacity));
-}
-
-.text-fuchsia-300 {
-  --tw-text-opacity: 1;
-  color: rgb(240 171 252 / var(--tw-text-opacity));
-}
-
-.text-fuchsia-400 {
-  --tw-text-opacity: 1;
-  color: rgb(232 121 249 / var(--tw-text-opacity));
-}
-
-.text-fuchsia-50 {
-  --tw-text-opacity: 1;
-  color: rgb(253 244 255 / var(--tw-text-opacity));
-}
-
-.text-fuchsia-500 {
-  --tw-text-opacity: 1;
-  color: rgb(217 70 239 / var(--tw-text-opacity));
-}
-
-.text-fuchsia-600 {
-  --tw-text-opacity: 1;
-  color: rgb(192 38 211 / var(--tw-text-opacity));
-}
-
-.text-fuchsia-700 {
-  --tw-text-opacity: 1;
-  color: rgb(162 28 175 / var(--tw-text-opacity));
-}
-
-.text-fuchsia-800 {
-  --tw-text-opacity: 1;
-  color: rgb(134 25 143 / var(--tw-text-opacity));
-}
-
-.text-fuchsia-900 {
-  --tw-text-opacity: 1;
-  color: rgb(112 26 117 / var(--tw-text-opacity));
-}
-
-.text-gray-100 {
-  --tw-text-opacity: 1;
-  color: rgb(243 244 246 / var(--tw-text-opacity));
-}
-
-.text-gray-200 {
-  --tw-text-opacity: 1;
-  color: rgb(229 231 235 / var(--tw-text-opacity));
-}
-
-.text-gray-300 {
-  --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity));
-}
-
-.text-gray-400 {
-  --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity));
-}
-
-.text-gray-50 {
-  --tw-text-opacity: 1;
-  color: rgb(249 250 251 / var(--tw-text-opacity));
-}
-
-.text-gray-500 {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-}
-
-.text-gray-600 {
-  --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity));
-}
-
-.text-gray-700 {
-  --tw-text-opacity: 1;
-  color: rgb(55 65 81 / var(--tw-text-opacity));
-}
-
-.text-gray-800 {
-  --tw-text-opacity: 1;
-  color: rgb(31 41 55 / var(--tw-text-opacity));
-}
-
-.text-gray-900 {
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity));
-}
-
-.text-green-100 {
-  --tw-text-opacity: 1;
-  color: rgb(220 252 231 / var(--tw-text-opacity));
-}
-
-.text-green-200 {
-  --tw-text-opacity: 1;
-  color: rgb(187 247 208 / var(--tw-text-opacity));
-}
-
-.text-green-300 {
-  --tw-text-opacity: 1;
-  color: rgb(134 239 172 / var(--tw-text-opacity));
-}
-
-.text-green-400 {
-  --tw-text-opacity: 1;
-  color: rgb(74 222 128 / var(--tw-text-opacity));
-}
-
-.text-green-50 {
-  --tw-text-opacity: 1;
-  color: rgb(240 253 244 / var(--tw-text-opacity));
-}
-
-.text-green-500 {
-  --tw-text-opacity: 1;
-  color: rgb(34 197 94 / var(--tw-text-opacity));
-}
-
-.text-green-600 {
-  --tw-text-opacity: 1;
-  color: rgb(22 163 74 / var(--tw-text-opacity));
-}
-
-.text-green-700 {
-  --tw-text-opacity: 1;
-  color: rgb(21 128 61 / var(--tw-text-opacity));
-}
-
-.text-green-800 {
-  --tw-text-opacity: 1;
-  color: rgb(22 101 52 / var(--tw-text-opacity));
-}
-
-.text-green-900 {
-  --tw-text-opacity: 1;
-  color: rgb(20 83 45 / var(--tw-text-opacity));
-}
-
-.text-indigo-100 {
-  --tw-text-opacity: 1;
-  color: rgb(224 231 255 / var(--tw-text-opacity));
-}
-
-.text-indigo-200 {
-  --tw-text-opacity: 1;
-  color: rgb(199 210 254 / var(--tw-text-opacity));
-}
-
-.text-indigo-300 {
-  --tw-text-opacity: 1;
-  color: rgb(165 180 252 / var(--tw-text-opacity));
-}
-
-.text-indigo-400 {
-  --tw-text-opacity: 1;
-  color: rgb(129 140 248 / var(--tw-text-opacity));
-}
-
-.text-indigo-50 {
-  --tw-text-opacity: 1;
-  color: rgb(238 242 255 / var(--tw-text-opacity));
-}
-
-.text-indigo-500 {
-  --tw-text-opacity: 1;
-  color: rgb(99 102 241 / var(--tw-text-opacity));
-}
-
-.text-indigo-600 {
-  --tw-text-opacity: 1;
-  color: rgb(79 70 229 / var(--tw-text-opacity));
-}
-
-.text-indigo-700 {
-  --tw-text-opacity: 1;
-  color: rgb(67 56 202 / var(--tw-text-opacity));
-}
-
-.text-indigo-800 {
-  --tw-text-opacity: 1;
-  color: rgb(55 48 163 / var(--tw-text-opacity));
-}
-
-.text-indigo-900 {
-  --tw-text-opacity: 1;
-  color: rgb(49 46 129 / var(--tw-text-opacity));
-}
-
-.text-info {
-  color: var(--cal-text-info);
-}
-
-.text-inherit {
-  color: inherit;
-}
-
-.text-inverted {
-  color: var(--cal-text-inverted);
-}
-
-.text-lime-100 {
-  --tw-text-opacity: 1;
-  color: rgb(236 252 203 / var(--tw-text-opacity));
-}
-
-.text-lime-200 {
-  --tw-text-opacity: 1;
-  color: rgb(217 249 157 / var(--tw-text-opacity));
-}
-
-.text-lime-300 {
-  --tw-text-opacity: 1;
-  color: rgb(190 242 100 / var(--tw-text-opacity));
-}
-
-.text-lime-400 {
-  --tw-text-opacity: 1;
-  color: rgb(163 230 53 / var(--tw-text-opacity));
-}
-
-.text-lime-50 {
-  --tw-text-opacity: 1;
-  color: rgb(247 254 231 / var(--tw-text-opacity));
-}
-
-.text-lime-500 {
-  --tw-text-opacity: 1;
-  color: rgb(132 204 22 / var(--tw-text-opacity));
-}
-
-.text-lime-600 {
-  --tw-text-opacity: 1;
-  color: rgb(101 163 13 / var(--tw-text-opacity));
-}
-
-.text-lime-700 {
-  --tw-text-opacity: 1;
-  color: rgb(77 124 15 / var(--tw-text-opacity));
-}
-
-.text-lime-800 {
-  --tw-text-opacity: 1;
-  color: rgb(63 98 18 / var(--tw-text-opacity));
-}
-
-.text-lime-900 {
-  --tw-text-opacity: 1;
-  color: rgb(54 83 20 / var(--tw-text-opacity));
-}
-
-.text-muted {
-  color: var(--cal-text-muted);
-}
-
-.text-neutral-100 {
-  --tw-text-opacity: 1;
-  color: rgb(245 245 245 / var(--tw-text-opacity));
-}
-
-.text-neutral-200 {
-  --tw-text-opacity: 1;
-  color: rgb(229 229 229 / var(--tw-text-opacity));
-}
-
-.text-neutral-300 {
-  --tw-text-opacity: 1;
-  color: rgb(212 212 212 / var(--tw-text-opacity));
-}
-
-.text-neutral-400 {
-  --tw-text-opacity: 1;
-  color: rgb(163 163 163 / var(--tw-text-opacity));
-}
-
-.text-neutral-50 {
-  --tw-text-opacity: 1;
-  color: rgb(250 250 250 / var(--tw-text-opacity));
-}
-
-.text-neutral-500 {
-  --tw-text-opacity: 1;
-  color: rgb(115 115 115 / var(--tw-text-opacity));
-}
-
-.text-neutral-600 {
-  --tw-text-opacity: 1;
-  color: rgb(82 82 82 / var(--tw-text-opacity));
-}
-
-.text-neutral-700 {
-  --tw-text-opacity: 1;
-  color: rgb(64 64 64 / var(--tw-text-opacity));
-}
-
-.text-neutral-800 {
-  --tw-text-opacity: 1;
-  color: rgb(38 38 38 / var(--tw-text-opacity));
-}
-
-.text-neutral-900 {
-  --tw-text-opacity: 1;
-  color: rgb(23 23 23 / var(--tw-text-opacity));
-}
-
-.text-orange-100 {
-  --tw-text-opacity: 1;
-  color: rgb(255 237 213 / var(--tw-text-opacity));
-}
-
-.text-orange-200 {
-  --tw-text-opacity: 1;
-  color: rgb(254 215 170 / var(--tw-text-opacity));
-}
-
-.text-orange-300 {
-  --tw-text-opacity: 1;
-  color: rgb(253 186 116 / var(--tw-text-opacity));
-}
-
-.text-orange-400 {
-  --tw-text-opacity: 1;
-  color: rgb(251 146 60 / var(--tw-text-opacity));
-}
-
-.text-orange-50 {
-  --tw-text-opacity: 1;
-  color: rgb(255 247 237 / var(--tw-text-opacity));
-}
-
-.text-orange-500 {
-  --tw-text-opacity: 1;
-  color: rgb(249 115 22 / var(--tw-text-opacity));
-}
-
-.text-orange-600 {
-  --tw-text-opacity: 1;
-  color: rgb(234 88 12 / var(--tw-text-opacity));
-}
-
-.text-orange-700 {
-  --tw-text-opacity: 1;
-  color: rgb(194 65 12 / var(--tw-text-opacity));
-}
-
-.text-orange-800 {
-  --tw-text-opacity: 1;
-  color: rgb(154 52 18 / var(--tw-text-opacity));
-}
-
-.text-orange-900 {
-  --tw-text-opacity: 1;
-  color: rgb(124 45 18 / var(--tw-text-opacity));
-}
-
-.text-pink-100 {
-  --tw-text-opacity: 1;
-  color: rgb(252 231 243 / var(--tw-text-opacity));
-}
-
-.text-pink-200 {
-  --tw-text-opacity: 1;
-  color: rgb(251 207 232 / var(--tw-text-opacity));
-}
-
-.text-pink-300 {
-  --tw-text-opacity: 1;
-  color: rgb(249 168 212 / var(--tw-text-opacity));
-}
-
-.text-pink-400 {
-  --tw-text-opacity: 1;
-  color: rgb(244 114 182 / var(--tw-text-opacity));
-}
-
-.text-pink-50 {
-  --tw-text-opacity: 1;
-  color: rgb(253 242 248 / var(--tw-text-opacity));
-}
-
-.text-pink-500 {
-  --tw-text-opacity: 1;
-  color: rgb(236 72 153 / var(--tw-text-opacity));
-}
-
-.text-pink-600 {
-  --tw-text-opacity: 1;
-  color: rgb(219 39 119 / var(--tw-text-opacity));
-}
-
-.text-pink-700 {
-  --tw-text-opacity: 1;
-  color: rgb(190 24 93 / var(--tw-text-opacity));
-}
-
-.text-pink-900 {
-  --tw-text-opacity: 1;
-  color: rgb(131 24 67 / var(--tw-text-opacity));
-}
-
-.text-purple-100 {
-  --tw-text-opacity: 1;
-  color: rgb(243 232 255 / var(--tw-text-opacity));
-}
-
-.text-purple-200 {
-  --tw-text-opacity: 1;
-  color: rgb(233 213 255 / var(--tw-text-opacity));
-}
-
-.text-purple-300 {
-  --tw-text-opacity: 1;
-  color: rgb(216 180 254 / var(--tw-text-opacity));
-}
-
-.text-purple-400 {
-  --tw-text-opacity: 1;
-  color: rgb(192 132 252 / var(--tw-text-opacity));
-}
-
-.text-purple-50 {
-  --tw-text-opacity: 1;
-  color: rgb(250 245 255 / var(--tw-text-opacity));
-}
-
-.text-purple-500 {
-  --tw-text-opacity: 1;
-  color: rgb(168 85 247 / var(--tw-text-opacity));
-}
-
-.text-purple-600 {
-  --tw-text-opacity: 1;
-  color: rgb(147 51 234 / var(--tw-text-opacity));
-}
-
-.text-purple-700 {
-  --tw-text-opacity: 1;
-  color: rgb(126 34 206 / var(--tw-text-opacity));
-}
-
-.text-purple-800 {
-  --tw-text-opacity: 1;
-  color: rgb(107 33 168 / var(--tw-text-opacity));
-}
-
-.text-purple-900 {
-  --tw-text-opacity: 1;
-  color: rgb(88 28 135 / var(--tw-text-opacity));
-}
-
-.text-red-100 {
-  --tw-text-opacity: 1;
-  color: rgb(254 226 226 / var(--tw-text-opacity));
-}
-
-.text-red-200 {
-  --tw-text-opacity: 1;
-  color: rgb(254 202 202 / var(--tw-text-opacity));
-}
-
-.text-red-300 {
-  --tw-text-opacity: 1;
-  color: rgb(252 165 165 / var(--tw-text-opacity));
-}
-
-.text-red-400 {
-  --tw-text-opacity: 1;
-  color: rgb(248 113 113 / var(--tw-text-opacity));
-}
-
-.text-red-50 {
-  --tw-text-opacity: 1;
-  color: rgb(254 242 242 / var(--tw-text-opacity));
-}
-
-.text-red-500 {
-  --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity));
-}
-
-.text-red-600 {
-  --tw-text-opacity: 1;
-  color: rgb(220 38 38 / var(--tw-text-opacity));
-}
-
-.text-red-700 {
-  --tw-text-opacity: 1;
-  color: rgb(185 28 28 / var(--tw-text-opacity));
-}
-
-.text-red-700\/30 {
-  color: rgb(185 28 28 / 0.3);
-}
-
-.text-red-800 {
-  --tw-text-opacity: 1;
-  color: rgb(153 27 27 / var(--tw-text-opacity));
-}
-
-.text-red-900 {
-  --tw-text-opacity: 1;
-  color: rgb(127 29 29 / var(--tw-text-opacity));
-}
-
-.text-rose-100 {
-  --tw-text-opacity: 1;
-  color: rgb(255 228 230 / var(--tw-text-opacity));
-}
-
-.text-rose-200 {
-  --tw-text-opacity: 1;
-  color: rgb(254 205 211 / var(--tw-text-opacity));
-}
-
-.text-rose-300 {
-  --tw-text-opacity: 1;
-  color: rgb(253 164 175 / var(--tw-text-opacity));
-}
-
-.text-rose-400 {
-  --tw-text-opacity: 1;
-  color: rgb(251 113 133 / var(--tw-text-opacity));
-}
-
-.text-rose-50 {
-  --tw-text-opacity: 1;
-  color: rgb(255 241 242 / var(--tw-text-opacity));
-}
-
-.text-rose-500 {
-  --tw-text-opacity: 1;
-  color: rgb(244 63 94 / var(--tw-text-opacity));
-}
-
-.text-rose-600 {
-  --tw-text-opacity: 1;
-  color: rgb(225 29 72 / var(--tw-text-opacity));
-}
-
-.text-rose-700 {
-  --tw-text-opacity: 1;
-  color: rgb(190 18 60 / var(--tw-text-opacity));
-}
-
-.text-rose-800 {
-  --tw-text-opacity: 1;
-  color: rgb(159 18 57 / var(--tw-text-opacity));
-}
-
-.text-rose-900 {
-  --tw-text-opacity: 1;
-  color: rgb(136 19 55 / var(--tw-text-opacity));
-}
-
-.text-semantic-attention {
-  color: var(--cal-text-semantic-attention);
-}
-
-.text-semantic-error {
-  color: var(--cal-text-semantic-error);
-}
-
-.text-semantic-info {
-  color: var(--cal-text-semantic-info);
-}
-
-.text-sky-100 {
-  --tw-text-opacity: 1;
-  color: rgb(224 242 254 / var(--tw-text-opacity));
-}
-
-.text-sky-200 {
-  --tw-text-opacity: 1;
-  color: rgb(186 230 253 / var(--tw-text-opacity));
-}
-
-.text-sky-300 {
-  --tw-text-opacity: 1;
-  color: rgb(125 211 252 / var(--tw-text-opacity));
-}
-
-.text-sky-400 {
-  --tw-text-opacity: 1;
-  color: rgb(56 189 248 / var(--tw-text-opacity));
-}
-
-.text-sky-50 {
-  --tw-text-opacity: 1;
-  color: rgb(240 249 255 / var(--tw-text-opacity));
-}
-
-.text-sky-500 {
-  --tw-text-opacity: 1;
-  color: rgb(14 165 233 / var(--tw-text-opacity));
-}
-
-.text-sky-600 {
-  --tw-text-opacity: 1;
-  color: rgb(2 132 199 / var(--tw-text-opacity));
-}
-
-.text-sky-700 {
-  --tw-text-opacity: 1;
-  color: rgb(3 105 161 / var(--tw-text-opacity));
-}
-
-.text-sky-800 {
-  --tw-text-opacity: 1;
-  color: rgb(7 89 133 / var(--tw-text-opacity));
-}
-
-.text-sky-900 {
-  --tw-text-opacity: 1;
-  color: rgb(12 74 110 / var(--tw-text-opacity));
-}
-
-.text-slate-100 {
-  --tw-text-opacity: 1;
-  color: rgb(241 245 249 / var(--tw-text-opacity));
-}
-
-.text-slate-200 {
-  --tw-text-opacity: 1;
-  color: rgb(226 232 240 / var(--tw-text-opacity));
-}
-
-.text-slate-300 {
-  --tw-text-opacity: 1;
-  color: rgb(203 213 225 / var(--tw-text-opacity));
-}
-
-.text-slate-400 {
-  --tw-text-opacity: 1;
-  color: rgb(148 163 184 / var(--tw-text-opacity));
-}
-
-.text-slate-50 {
-  --tw-text-opacity: 1;
-  color: rgb(248 250 252 / var(--tw-text-opacity));
-}
-
-.text-slate-500 {
-  --tw-text-opacity: 1;
-  color: rgb(100 116 139 / var(--tw-text-opacity));
-}
-
-.text-slate-600 {
-  --tw-text-opacity: 1;
-  color: rgb(71 85 105 / var(--tw-text-opacity));
-}
-
-.text-slate-700 {
-  --tw-text-opacity: 1;
-  color: rgb(51 65 85 / var(--tw-text-opacity));
-}
-
-.text-slate-800 {
-  --tw-text-opacity: 1;
-  color: rgb(30 41 59 / var(--tw-text-opacity));
-}
-
-.text-slate-900 {
-  --tw-text-opacity: 1;
-  color: rgb(15 23 42 / var(--tw-text-opacity));
-}
-
-.text-stone-100 {
-  --tw-text-opacity: 1;
-  color: rgb(245 245 244 / var(--tw-text-opacity));
-}
-
-.text-stone-200 {
-  --tw-text-opacity: 1;
-  color: rgb(231 229 228 / var(--tw-text-opacity));
-}
-
-.text-stone-300 {
-  --tw-text-opacity: 1;
-  color: rgb(214 211 209 / var(--tw-text-opacity));
-}
-
-.text-stone-400 {
-  --tw-text-opacity: 1;
-  color: rgb(168 162 158 / var(--tw-text-opacity));
-}
-
-.text-stone-50 {
-  --tw-text-opacity: 1;
-  color: rgb(250 250 249 / var(--tw-text-opacity));
-}
-
-.text-stone-500 {
-  --tw-text-opacity: 1;
-  color: rgb(120 113 108 / var(--tw-text-opacity));
-}
-
-.text-stone-600 {
-  --tw-text-opacity: 1;
-  color: rgb(87 83 78 / var(--tw-text-opacity));
-}
-
-.text-stone-700 {
-  --tw-text-opacity: 1;
-  color: rgb(68 64 60 / var(--tw-text-opacity));
-}
-
-.text-stone-800 {
-  --tw-text-opacity: 1;
-  color: rgb(41 37 36 / var(--tw-text-opacity));
-}
-
-.text-stone-900 {
-  --tw-text-opacity: 1;
-  color: rgb(28 25 23 / var(--tw-text-opacity));
-}
-
-.text-subtle {
-  color: var(--cal-text-subtle);
-}
-
-.text-success {
-  color: var(--cal-text-success);
-}
-
-.text-teal-100 {
-  --tw-text-opacity: 1;
-  color: rgb(204 251 241 / var(--tw-text-opacity));
-}
-
-.text-teal-200 {
-  --tw-text-opacity: 1;
-  color: rgb(153 246 228 / var(--tw-text-opacity));
-}
-
-.text-teal-300 {
-  --tw-text-opacity: 1;
-  color: rgb(94 234 212 / var(--tw-text-opacity));
-}
-
-.text-teal-400 {
-  --tw-text-opacity: 1;
-  color: rgb(45 212 191 / var(--tw-text-opacity));
-}
-
-.text-teal-50 {
-  --tw-text-opacity: 1;
-  color: rgb(240 253 250 / var(--tw-text-opacity));
-}
-
-.text-teal-500 {
-  --tw-text-opacity: 1;
-  color: rgb(20 184 166 / var(--tw-text-opacity));
-}
-
-.text-teal-600 {
-  --tw-text-opacity: 1;
-  color: rgb(13 148 136 / var(--tw-text-opacity));
-}
-
-.text-teal-700 {
-  --tw-text-opacity: 1;
-  color: rgb(15 118 110 / var(--tw-text-opacity));
-}
-
-.text-teal-800 {
-  --tw-text-opacity: 1;
-  color: rgb(17 94 89 / var(--tw-text-opacity));
-}
-
-.text-teal-900 {
-  --tw-text-opacity: 1;
-  color: rgb(19 78 74 / var(--tw-text-opacity));
-}
-
-.text-transparent {
-  color: transparent;
-}
-
-.text-violet-100 {
-  --tw-text-opacity: 1;
-  color: rgb(237 233 254 / var(--tw-text-opacity));
-}
-
-.text-violet-200 {
-  --tw-text-opacity: 1;
-  color: rgb(221 214 254 / var(--tw-text-opacity));
-}
-
-.text-violet-300 {
-  --tw-text-opacity: 1;
-  color: rgb(196 181 253 / var(--tw-text-opacity));
-}
-
-.text-violet-400 {
-  --tw-text-opacity: 1;
-  color: rgb(167 139 250 / var(--tw-text-opacity));
-}
-
-.text-violet-50 {
-  --tw-text-opacity: 1;
-  color: rgb(245 243 255 / var(--tw-text-opacity));
-}
-
-.text-violet-500 {
-  --tw-text-opacity: 1;
-  color: rgb(139 92 246 / var(--tw-text-opacity));
-}
-
-.text-violet-600 {
-  --tw-text-opacity: 1;
-  color: rgb(124 58 237 / var(--tw-text-opacity));
-}
-
-.text-violet-700 {
-  --tw-text-opacity: 1;
-  color: rgb(109 40 217 / var(--tw-text-opacity));
-}
-
-.text-violet-800 {
-  --tw-text-opacity: 1;
-  color: rgb(91 33 182 / var(--tw-text-opacity));
-}
-
-.text-violet-900 {
-  --tw-text-opacity: 1;
-  color: rgb(76 29 149 / var(--tw-text-opacity));
-}
-
-.text-white {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
-.text-yellow-100 {
-  --tw-text-opacity: 1;
-  color: rgb(254 249 195 / var(--tw-text-opacity));
-}
-
-.text-yellow-200 {
-  --tw-text-opacity: 1;
-  color: rgb(254 240 138 / var(--tw-text-opacity));
-}
-
-.text-yellow-300 {
-  --tw-text-opacity: 1;
-  color: rgb(253 224 71 / var(--tw-text-opacity));
-}
-
-.text-yellow-400 {
-  --tw-text-opacity: 1;
-  color: rgb(250 204 21 / var(--tw-text-opacity));
-}
-
-.text-yellow-50 {
-  --tw-text-opacity: 1;
-  color: rgb(254 252 232 / var(--tw-text-opacity));
-}
-
-.text-yellow-500 {
-  --tw-text-opacity: 1;
-  color: rgb(234 179 8 / var(--tw-text-opacity));
-}
-
-.text-yellow-600 {
-  --tw-text-opacity: 1;
-  color: rgb(202 138 4 / var(--tw-text-opacity));
-}
-
-.text-yellow-700 {
-  --tw-text-opacity: 1;
-  color: rgb(161 98 7 / var(--tw-text-opacity));
-}
-
-.text-yellow-800 {
-  --tw-text-opacity: 1;
-  color: rgb(133 77 14 / var(--tw-text-opacity));
-}
-
-.text-yellow-900 {
-  --tw-text-opacity: 1;
-  color: rgb(113 63 18 / var(--tw-text-opacity));
-}
-
-.text-zinc-100 {
-  --tw-text-opacity: 1;
-  color: rgb(244 244 245 / var(--tw-text-opacity));
-}
-
-.text-zinc-200 {
-  --tw-text-opacity: 1;
-  color: rgb(228 228 231 / var(--tw-text-opacity));
-}
-
-.text-zinc-300 {
-  --tw-text-opacity: 1;
-  color: rgb(212 212 216 / var(--tw-text-opacity));
-}
-
-.text-zinc-400 {
-  --tw-text-opacity: 1;
-  color: rgb(161 161 170 / var(--tw-text-opacity));
-}
-
-.text-zinc-50 {
-  --tw-text-opacity: 1;
-  color: rgb(250 250 250 / var(--tw-text-opacity));
-}
-
-.text-zinc-500 {
-  --tw-text-opacity: 1;
-  color: rgb(113 113 122 / var(--tw-text-opacity));
-}
-
-.text-zinc-600 {
-  --tw-text-opacity: 1;
-  color: rgb(82 82 91 / var(--tw-text-opacity));
-}
-
-.text-zinc-700 {
-  --tw-text-opacity: 1;
-  color: rgb(63 63 70 / var(--tw-text-opacity));
-}
-
-.text-zinc-800 {
-  --tw-text-opacity: 1;
-  color: rgb(39 39 42 / var(--tw-text-opacity));
-}
-
-.text-zinc-900 {
-  --tw-text-opacity: 1;
-  color: rgb(24 24 27 / var(--tw-text-opacity));
-}
-
-.underline {
-  text-decoration-line: underline;
-}
-
-.overline {
-  text-decoration-line: overline;
-}
-
-.line-through {
-  text-decoration-line: line-through;
-}
-
-.no-underline {
-  text-decoration-line: none;
-}
-
-.decoration-emphasis {
-  text-decoration-color: var(--cal-bg-emphasis);
-}
-
-.decoration-gray-400 {
-  text-decoration-color: #9ca3af;
-}
-
-.decoration-dashed {
-  text-decoration-style: dashed;
-}
-
-.underline-offset-2 {
-  text-underline-offset: 2px;
-}
-
-.underline-offset-4 {
-  text-underline-offset: 4px;
-}
-
-.antialiased {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.subpixel-antialiased {
-  -webkit-font-smoothing: auto;
-  -moz-osx-font-smoothing: auto;
-}
-
-.\!opacity-30 {
-  opacity: 0.3 !important;
-}
-
-.\!opacity-75 {
-  opacity: 0.75 !important;
-}
-
-.opacity-0 {
-  opacity: 0;
-}
-
-.opacity-100 {
-  opacity: 1;
-}
-
-.opacity-20 {
-  opacity: 0.2;
-}
-
-.opacity-25 {
-  opacity: 0.25;
-}
-
-.opacity-30 {
-  opacity: 0.3;
-}
-
-.opacity-40 {
-  opacity: 0.4;
-}
-
-.opacity-50 {
-  opacity: 0.5;
-}
-
-.opacity-60 {
-  opacity: 0.6;
-}
-
-.opacity-70 {
-  opacity: 0.7;
-}
-
-.opacity-75 {
-  opacity: 0.75;
-}
-
-.opacity-80 {
-  opacity: 0.8;
-}
-
-.opacity-90 {
-  opacity: 0.9;
-}
-
-.opacity-\[0\.1\] {
-  opacity: 0.1;
-}
-
-.\!shadow-none {
-  --tw-shadow: 0 0 #0000 !important;
-  --tw-shadow-colored: 0 0 #0000 !important;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
-}
-
-.shadow {
-  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-dropdown {
-  --tw-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.10), 0px 10px 40px 0px rgba(0, 0, 0, 0.03);
-  --tw-shadow-colored: 0px 5px 20px 0px var(--tw-shadow-color), 0px 10px 40px 0px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-elevation-low {
-  --tw-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.07), 0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0px 2px 2px 0px rgba(0, 0, 0, 0.10), 0px 0px 8px 0px rgba(0, 0, 0, 0.05);
-  --tw-shadow-colored: 0px 1px 1px 0px var(--tw-shadow-color), 0px 1px 2px 0px var(--tw-shadow-color), 0px 2px 2px 0px var(--tw-shadow-color), 0px 0px 8px 0px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-inner {
-  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
-  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-lg {
-  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-md {
-  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-none {
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-outline-gray-rested {
-  --tw-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.03), 0px 2px 2px -1px rgba(0, 0, 0, 0.03);
-  --tw-shadow-colored: 0px 2px 3px 0px var(--tw-shadow-color), 0px 2px 2px -1px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-outline-red-rested {
-  --tw-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.03), 0px 2px 2px -1px rgba(0, 0, 0, 0.03);
-  --tw-shadow-colored: 0px 2px 3px 0px var(--tw-shadow-color), 0px 2px 2px -1px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-sm {
-  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-solid-gray-rested {
-  --tw-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.08), 1px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 2px 0.4px 0px rgba(255, 255, 255, 0.16) inset, 0px -1.5px 2px 0px rgba(0, 0, 0, 0.40) inset;
-  --tw-shadow-colored: 0px 2px 3px 0px var(--tw-shadow-color), 0px 1px 1px 0px var(--tw-shadow-color), 1px 4px 8px 0px var(--tw-shadow-color), inset 0px 2px 0.4px 0px var(--tw-shadow-color), inset 0px -1.5px 2px 0px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-switch-thumb {
-  --tw-shadow: 0px 0.8px 0.8px 0px rgba(0, 0, 0, 0.10), 0px 0.8px 3.2px 0px rgba(0, 0, 0, 0.08);
-  --tw-shadow-colored: 0px 0.8px 0.8px 0px var(--tw-shadow-color), 0px 0.8px 3.2px 0px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.shadow-xl {
-  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.outline-none {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-
-.outline {
-  outline-style: solid;
-}
-
-.outline-0 {
-  outline-width: 0px;
-}
-
-.outline-offset-2 {
-  outline-offset: 2px;
-}
-
-.outline-amber-100 {
-  outline-color: #fef3c7;
-}
-
-.outline-amber-200 {
-  outline-color: #fde68a;
-}
-
-.outline-amber-300 {
-  outline-color: #fcd34d;
-}
-
-.outline-amber-400 {
-  outline-color: #fbbf24;
-}
-
-.outline-amber-50 {
-  outline-color: #fffbeb;
-}
-
-.outline-amber-500 {
-  outline-color: #f59e0b;
-}
-
-.outline-amber-600 {
-  outline-color: #d97706;
-}
-
-.outline-amber-700 {
-  outline-color: #b45309;
-}
-
-.outline-amber-800 {
-  outline-color: #92400e;
-}
-
-.outline-amber-900 {
-  outline-color: #78350f;
-}
-
-.outline-black {
-  outline-color: #111111;
-}
-
-.outline-blue-100 {
-  outline-color: #dbeafe;
-}
-
-.outline-blue-200 {
-  outline-color: #bfdbfe;
-}
-
-.outline-blue-300 {
-  outline-color: #93c5fd;
-}
-
-.outline-blue-400 {
-  outline-color: #60a5fa;
-}
-
-.outline-blue-50 {
-  outline-color: #eff6ff;
-}
-
-.outline-blue-500 {
-  outline-color: #3b82f6;
-}
-
-.outline-blue-600 {
-  outline-color: #2563eb;
-}
-
-.outline-blue-700 {
-  outline-color: #1d4ed8;
-}
-
-.outline-blue-800 {
-  outline-color: #1e40af;
-}
-
-.outline-blue-900 {
-  outline-color: #1e3a8a;
-}
-
-.outline-cyan-100 {
-  outline-color: #cffafe;
-}
-
-.outline-cyan-200 {
-  outline-color: #a5f3fc;
-}
-
-.outline-cyan-300 {
-  outline-color: #67e8f9;
-}
-
-.outline-cyan-400 {
-  outline-color: #22d3ee;
-}
-
-.outline-cyan-50 {
-  outline-color: #ecfeff;
-}
-
-.outline-cyan-500 {
-  outline-color: #06b6d4;
-}
-
-.outline-cyan-600 {
-  outline-color: #0891b2;
-}
-
-.outline-cyan-700 {
-  outline-color: #0e7490;
-}
-
-.outline-cyan-800 {
-  outline-color: #155e75;
-}
-
-.outline-cyan-900 {
-  outline-color: #164e63;
-}
-
-.outline-emerald-100 {
-  outline-color: #d1fae5;
-}
-
-.outline-emerald-200 {
-  outline-color: #a7f3d0;
-}
-
-.outline-emerald-300 {
-  outline-color: #6ee7b7;
-}
-
-.outline-emerald-400 {
-  outline-color: #34d399;
-}
-
-.outline-emerald-50 {
-  outline-color: #ecfdf5;
-}
-
-.outline-emerald-500 {
-  outline-color: #10b981;
-}
-
-.outline-emerald-600 {
-  outline-color: #059669;
-}
-
-.outline-emerald-700 {
-  outline-color: #047857;
-}
-
-.outline-emerald-800 {
-  outline-color: #065f46;
-}
-
-.outline-emerald-900 {
-  outline-color: #064e3b;
-}
-
-.outline-fuchsia-100 {
-  outline-color: #fae8ff;
-}
-
-.outline-fuchsia-200 {
-  outline-color: #f5d0fe;
-}
-
-.outline-fuchsia-300 {
-  outline-color: #f0abfc;
-}
-
-.outline-fuchsia-400 {
-  outline-color: #e879f9;
-}
-
-.outline-fuchsia-50 {
-  outline-color: #fdf4ff;
-}
-
-.outline-fuchsia-500 {
-  outline-color: #d946ef;
-}
-
-.outline-fuchsia-600 {
-  outline-color: #c026d3;
-}
-
-.outline-fuchsia-700 {
-  outline-color: #a21caf;
-}
-
-.outline-fuchsia-800 {
-  outline-color: #86198f;
-}
-
-.outline-fuchsia-900 {
-  outline-color: #701a75;
-}
-
-.outline-gray-100 {
-  outline-color: #f3f4f6;
-}
-
-.outline-gray-200 {
-  outline-color: #e5e7eb;
-}
-
-.outline-gray-300 {
-  outline-color: #d1d5db;
-}
-
-.outline-gray-400 {
-  outline-color: #9ca3af;
-}
-
-.outline-gray-50 {
-  outline-color: #f9fafb;
-}
-
-.outline-gray-500 {
-  outline-color: #6b7280;
-}
-
-.outline-gray-600 {
-  outline-color: #4b5563;
-}
-
-.outline-gray-700 {
-  outline-color: #374151;
-}
-
-.outline-gray-800 {
-  outline-color: #1f2937;
-}
-
-.outline-gray-900 {
-  outline-color: #111827;
-}
-
-.outline-green-100 {
-  outline-color: #dcfce7;
-}
-
-.outline-green-200 {
-  outline-color: #bbf7d0;
-}
-
-.outline-green-300 {
-  outline-color: #86efac;
-}
-
-.outline-green-400 {
-  outline-color: #4ade80;
-}
-
-.outline-green-50 {
-  outline-color: #f0fdf4;
-}
-
-.outline-green-500 {
-  outline-color: #22c55e;
-}
-
-.outline-green-600 {
-  outline-color: #16a34a;
-}
-
-.outline-green-700 {
-  outline-color: #15803d;
-}
-
-.outline-green-800 {
-  outline-color: #166534;
-}
-
-.outline-green-900 {
-  outline-color: #14532d;
-}
-
-.outline-indigo-100 {
-  outline-color: #e0e7ff;
-}
-
-.outline-indigo-200 {
-  outline-color: #c7d2fe;
-}
-
-.outline-indigo-300 {
-  outline-color: #a5b4fc;
-}
-
-.outline-indigo-400 {
-  outline-color: #818cf8;
-}
-
-.outline-indigo-50 {
-  outline-color: #eef2ff;
-}
-
-.outline-indigo-500 {
-  outline-color: #6366f1;
-}
-
-.outline-indigo-600 {
-  outline-color: #4f46e5;
-}
-
-.outline-indigo-700 {
-  outline-color: #4338ca;
-}
-
-.outline-indigo-800 {
-  outline-color: #3730a3;
-}
-
-.outline-indigo-900 {
-  outline-color: #312e81;
-}
-
-.outline-lime-100 {
-  outline-color: #ecfccb;
-}
-
-.outline-lime-200 {
-  outline-color: #d9f99d;
-}
-
-.outline-lime-300 {
-  outline-color: #bef264;
-}
-
-.outline-lime-400 {
-  outline-color: #a3e635;
-}
-
-.outline-lime-50 {
-  outline-color: #f7fee7;
-}
-
-.outline-lime-500 {
-  outline-color: #84cc16;
-}
-
-.outline-lime-600 {
-  outline-color: #65a30d;
-}
-
-.outline-lime-700 {
-  outline-color: #4d7c0f;
-}
-
-.outline-lime-800 {
-  outline-color: #3f6212;
-}
-
-.outline-lime-900 {
-  outline-color: #365314;
-}
-
-.outline-neutral-100 {
-  outline-color: #f5f5f5;
-}
-
-.outline-neutral-200 {
-  outline-color: #e5e5e5;
-}
-
-.outline-neutral-300 {
-  outline-color: #d4d4d4;
-}
-
-.outline-neutral-400 {
-  outline-color: #a3a3a3;
-}
-
-.outline-neutral-50 {
-  outline-color: #fafafa;
-}
-
-.outline-neutral-500 {
-  outline-color: #737373;
-}
-
-.outline-neutral-600 {
-  outline-color: #525252;
-}
-
-.outline-neutral-700 {
-  outline-color: #404040;
-}
-
-.outline-neutral-800 {
-  outline-color: #262626;
-}
-
-.outline-neutral-900 {
-  outline-color: #171717;
-}
-
-.outline-orange-100 {
-  outline-color: #ffedd5;
-}
-
-.outline-orange-200 {
-  outline-color: #fed7aa;
-}
-
-.outline-orange-300 {
-  outline-color: #fdba74;
-}
-
-.outline-orange-400 {
-  outline-color: #fb923c;
-}
-
-.outline-orange-50 {
-  outline-color: #fff7ed;
-}
-
-.outline-orange-500 {
-  outline-color: #f97316;
-}
-
-.outline-orange-600 {
-  outline-color: #ea580c;
-}
-
-.outline-orange-700 {
-  outline-color: #c2410c;
-}
-
-.outline-orange-800 {
-  outline-color: #9a3412;
-}
-
-.outline-orange-900 {
-  outline-color: #7c2d12;
-}
-
-.outline-pink-100 {
-  outline-color: #fce7f3;
-}
-
-.outline-pink-200 {
-  outline-color: #fbcfe8;
-}
-
-.outline-pink-300 {
-  outline-color: #f9a8d4;
-}
-
-.outline-pink-400 {
-  outline-color: #f472b6;
-}
-
-.outline-pink-50 {
-  outline-color: #fdf2f8;
-}
-
-.outline-pink-500 {
-  outline-color: #ec4899;
-}
-
-.outline-pink-600 {
-  outline-color: #db2777;
-}
-
-.outline-pink-700 {
-  outline-color: #be185d;
-}
-
-.outline-pink-900 {
-  outline-color: #831843;
-}
-
-.outline-purple-100 {
-  outline-color: #f3e8ff;
-}
-
-.outline-purple-200 {
-  outline-color: #e9d5ff;
-}
-
-.outline-purple-300 {
-  outline-color: #d8b4fe;
-}
-
-.outline-purple-400 {
-  outline-color: #c084fc;
-}
-
-.outline-purple-50 {
-  outline-color: #faf5ff;
-}
-
-.outline-purple-500 {
-  outline-color: #a855f7;
-}
-
-.outline-purple-600 {
-  outline-color: #9333ea;
-}
-
-.outline-purple-700 {
-  outline-color: #7e22ce;
-}
-
-.outline-purple-800 {
-  outline-color: #6b21a8;
-}
-
-.outline-purple-900 {
-  outline-color: #581c87;
-}
-
-.outline-red-100 {
-  outline-color: #fee2e2;
-}
-
-.outline-red-200 {
-  outline-color: #fecaca;
-}
-
-.outline-red-300 {
-  outline-color: #fca5a5;
-}
-
-.outline-red-400 {
-  outline-color: #f87171;
-}
-
-.outline-red-50 {
-  outline-color: #fef2f2;
-}
-
-.outline-red-500 {
-  outline-color: #ef4444;
-}
-
-.outline-red-600 {
-  outline-color: #dc2626;
-}
-
-.outline-red-700 {
-  outline-color: #b91c1c;
-}
-
-.outline-red-800 {
-  outline-color: #991b1b;
-}
-
-.outline-red-900 {
-  outline-color: #7f1d1d;
-}
-
-.outline-rose-100 {
-  outline-color: #ffe4e6;
-}
-
-.outline-rose-200 {
-  outline-color: #fecdd3;
-}
-
-.outline-rose-300 {
-  outline-color: #fda4af;
-}
-
-.outline-rose-400 {
-  outline-color: #fb7185;
-}
-
-.outline-rose-50 {
-  outline-color: #fff1f2;
-}
-
-.outline-rose-500 {
-  outline-color: #f43f5e;
-}
-
-.outline-rose-600 {
-  outline-color: #e11d48;
-}
-
-.outline-rose-700 {
-  outline-color: #be123c;
-}
-
-.outline-rose-800 {
-  outline-color: #9f1239;
-}
-
-.outline-rose-900 {
-  outline-color: #881337;
-}
-
-.outline-sky-100 {
-  outline-color: #e0f2fe;
-}
-
-.outline-sky-200 {
-  outline-color: #bae6fd;
-}
-
-.outline-sky-300 {
-  outline-color: #7dd3fc;
-}
-
-.outline-sky-400 {
-  outline-color: #38bdf8;
-}
-
-.outline-sky-50 {
-  outline-color: #f0f9ff;
-}
-
-.outline-sky-500 {
-  outline-color: #0ea5e9;
-}
-
-.outline-sky-600 {
-  outline-color: #0284c7;
-}
-
-.outline-sky-700 {
-  outline-color: #0369a1;
-}
-
-.outline-sky-800 {
-  outline-color: #075985;
-}
-
-.outline-sky-900 {
-  outline-color: #0c4a6e;
-}
-
-.outline-slate-100 {
-  outline-color: #f1f5f9;
-}
-
-.outline-slate-200 {
-  outline-color: #e2e8f0;
-}
-
-.outline-slate-300 {
-  outline-color: #cbd5e1;
-}
-
-.outline-slate-400 {
-  outline-color: #94a3b8;
-}
-
-.outline-slate-50 {
-  outline-color: #f8fafc;
-}
-
-.outline-slate-500 {
-  outline-color: #64748b;
-}
-
-.outline-slate-600 {
-  outline-color: #475569;
-}
-
-.outline-slate-700 {
-  outline-color: #334155;
-}
-
-.outline-slate-800 {
-  outline-color: #1e293b;
-}
-
-.outline-slate-900 {
-  outline-color: #0f172a;
-}
-
-.outline-stone-100 {
-  outline-color: #f5f5f4;
-}
-
-.outline-stone-200 {
-  outline-color: #e7e5e4;
-}
-
-.outline-stone-300 {
-  outline-color: #d6d3d1;
-}
-
-.outline-stone-400 {
-  outline-color: #a8a29e;
-}
-
-.outline-stone-50 {
-  outline-color: #fafaf9;
-}
-
-.outline-stone-500 {
-  outline-color: #78716c;
-}
-
-.outline-stone-600 {
-  outline-color: #57534e;
-}
-
-.outline-stone-700 {
-  outline-color: #44403c;
-}
-
-.outline-stone-800 {
-  outline-color: #292524;
-}
-
-.outline-stone-900 {
-  outline-color: #1c1917;
-}
-
-.outline-teal-100 {
-  outline-color: #ccfbf1;
-}
-
-.outline-teal-200 {
-  outline-color: #99f6e4;
-}
-
-.outline-teal-300 {
-  outline-color: #5eead4;
-}
-
-.outline-teal-400 {
-  outline-color: #2dd4bf;
-}
-
-.outline-teal-50 {
-  outline-color: #f0fdfa;
-}
-
-.outline-teal-500 {
-  outline-color: #14b8a6;
-}
-
-.outline-teal-600 {
-  outline-color: #0d9488;
-}
-
-.outline-teal-700 {
-  outline-color: #0f766e;
-}
-
-.outline-teal-800 {
-  outline-color: #115e59;
-}
-
-.outline-teal-900 {
-  outline-color: #134e4a;
-}
-
-.outline-transparent {
-  outline-color: transparent;
-}
-
-.outline-violet-100 {
-  outline-color: #ede9fe;
-}
-
-.outline-violet-200 {
-  outline-color: #ddd6fe;
-}
-
-.outline-violet-300 {
-  outline-color: #c4b5fd;
-}
-
-.outline-violet-400 {
-  outline-color: #a78bfa;
-}
-
-.outline-violet-50 {
-  outline-color: #f5f3ff;
-}
-
-.outline-violet-500 {
-  outline-color: #8b5cf6;
-}
-
-.outline-violet-600 {
-  outline-color: #7c3aed;
-}
-
-.outline-violet-700 {
-  outline-color: #6d28d9;
-}
-
-.outline-violet-800 {
-  outline-color: #5b21b6;
-}
-
-.outline-violet-900 {
-  outline-color: #4c1d95;
-}
-
-.outline-white {
-  outline-color: #fff;
-}
-
-.outline-yellow-100 {
-  outline-color: #fef9c3;
-}
-
-.outline-yellow-200 {
-  outline-color: #fef08a;
-}
-
-.outline-yellow-300 {
-  outline-color: #fde047;
-}
-
-.outline-yellow-400 {
-  outline-color: #facc15;
-}
-
-.outline-yellow-50 {
-  outline-color: #fefce8;
-}
-
-.outline-yellow-500 {
-  outline-color: #eab308;
-}
-
-.outline-yellow-600 {
-  outline-color: #ca8a04;
-}
-
-.outline-yellow-700 {
-  outline-color: #a16207;
-}
-
-.outline-yellow-800 {
-  outline-color: #854d0e;
-}
-
-.outline-yellow-900 {
-  outline-color: #713f12;
-}
-
-.outline-zinc-100 {
-  outline-color: #f4f4f5;
-}
-
-.outline-zinc-200 {
-  outline-color: #e4e4e7;
-}
-
-.outline-zinc-300 {
-  outline-color: #d4d4d8;
-}
-
-.outline-zinc-400 {
-  outline-color: #a1a1aa;
-}
-
-.outline-zinc-50 {
-  outline-color: #fafafa;
-}
-
-.outline-zinc-500 {
-  outline-color: #71717a;
-}
-
-.outline-zinc-600 {
-  outline-color: #52525b;
-}
-
-.outline-zinc-700 {
-  outline-color: #3f3f46;
-}
-
-.outline-zinc-800 {
-  outline-color: #27272a;
-}
-
-.outline-zinc-900 {
-  outline-color: #18181b;
-}
-
-.\!ring-0 {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
-}
-
-.ring {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-.ring-0 {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-.ring-1 {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-.ring-2 {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-.ring-inset {
-  --tw-ring-inset: inset;
-}
-
-.ring-\[\#0000000F\] {
-  --tw-ring-color: #0000000F;
-}
-
-.ring-amber-100 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(254 243 199 / var(--tw-ring-opacity));
-}
-
-.ring-amber-200 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(253 230 138 / var(--tw-ring-opacity));
-}
-
-.ring-amber-300 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(252 211 77 / var(--tw-ring-opacity));
-}
-
-.ring-amber-400 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(251 191 36 / var(--tw-ring-opacity));
-}
-
-.ring-amber-50 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(255 251 235 / var(--tw-ring-opacity));
-}
-
-.ring-amber-500 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(245 158 11 / var(--tw-ring-opacity));
-}
-
-.ring-amber-600 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(217 119 6 / var(--tw-ring-opacity));
-}
-
-.ring-amber-700 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(180 83 9 / var(--tw-ring-opacity));
-}
-
-.ring-amber-800 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(146 64 14 / var(--tw-ring-opacity));
-}
-
-.ring-amber-900 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(120 53 15 / var(--tw-ring-opacity));
-}
-
-.ring-black {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(17 17 17 / var(--tw-ring-opacity));
-}
-
-.ring-blue-100 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(219 234 254 / var(--tw-ring-opacity));
-}
-
-.ring-blue-200 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity));
-}
-
-.ring-blue-300 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
-}
-
-.ring-blue-400 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
-}
-
-.ring-blue-50 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(239 246 255 / var(--tw-ring-opacity));
-}
-
-.ring-blue-500 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
-}
-
-.ring-blue-600 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity));
-}
-
-.ring-blue-700 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(29 78 216 / var(--tw-ring-opacity));
-}
-
-.ring-blue-800 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));
-}
-
-.ring-blue-900 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(30 58 138 / var(--tw-ring-opacity));
-}
-
-.ring-brand-default {
-  --tw-ring-color: var(--cal-brand, #111827);
-}
-
-.ring-cyan-100 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(207 250 254 / var(--tw-ring-opacity));
-}
-
-.ring-cyan-200 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(165 243 252 / var(--tw-ring-opacity));
-}
-
-.ring-cyan-300 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(103 232 249 / var(--tw-ring-opacity));
-}
-
-.ring-cyan-400 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(34 211 238 / var(--tw-ring-opacity));
-}
-
-.ring-cyan-50 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(236 254 255 / var(--tw-ring-opacity));
-}
-
-.ring-cyan-500 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(6 182 212 / var(--tw-ring-opacity));
-}
-
-.ring-cyan-600 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(8 145 178 / var(--tw-ring-opacity));
-}
-
-.ring-cyan-700 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(14 116 144 / var(--tw-ring-opacity));
-}
-
-.ring-cyan-800 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(21 94 117 / var(--tw-ring-opacity));
-}
-
-.ring-cyan-900 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(22 78 99 / var(--tw-ring-opacity));
-}
-
-.ring-emerald-100 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(209 250 229 / var(--tw-ring-opacity));
-}
-
-.ring-emerald-200 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(167 243 208 / var(--tw-ring-opacity));
-}
-
-.ring-emerald-300 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(110 231 183 / var(--tw-ring-opacity));
-}
-
-.ring-emerald-400 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(52 211 153 / var(--tw-ring-opacity));
-}
-
-.ring-emerald-50 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(236 253 245 / var(--tw-ring-opacity));
-}
-
-.ring-emerald-500 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity));
-}
-
-.ring-emerald-600 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(5 150 105 / var(--tw-ring-opacity));
-}
-
-.ring-emerald-700 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(4 120 87 / var(--tw-ring-opacity));
-}
-
-.ring-emerald-800 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(6 95 70 / var(--tw-ring-opacity));
-}
-
-.ring-emerald-900 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(6 78 59 / var(--tw-ring-opacity));
-}
-
-.ring-fuchsia-100 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(250 232 255 / var(--tw-ring-opacity));
-}
-
-.ring-fuchsia-200 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(245 208 254 / var(--tw-ring-opacity));
-}
-
-.ring-fuchsia-300 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(240 171 252 / var(--tw-ring-opacity));
-}
-
-.ring-fuchsia-400 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(232 121 249 / var(--tw-ring-opacity));
-}
-
-.ring-fuchsia-50 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(253 244 255 / var(--tw-ring-opacity));
-}
-
-.ring-fuchsia-500 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(217 70 239 / var(--tw-ring-opacity));
-}
-
-.ring-fuchsia-600 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(192 38 211 / var(--tw-ring-opacity));
-}
-
-.ring-fuchsia-700 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(162 28 175 / var(--tw-ring-opacity));
-}
-
-.ring-fuchsia-800 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(134 25 143 / var(--tw-ring-opacity));
-}
-
-.ring-fuchsia-900 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(112 26 117 / var(--tw-ring-opacity));
-}
-
-.ring-gray-100 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(243 244 246 / var(--tw-ring-opacity));
-}
-
-.ring-gray-200 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
-}
-
-.ring-gray-300 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
-}
-
-.ring-gray-400 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
-}
-
-.ring-gray-50 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(249 250 251 / var(--tw-ring-opacity));
-}
-
-.ring-gray-500 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity));
-}
-
-.ring-gray-600 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity));
-}
-
-.ring-gray-700 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity));
-}
-
-.ring-gray-800 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity));
-}
-
-.ring-gray-900 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
-}
-
-.ring-green-100 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(220 252 231 / var(--tw-ring-opacity));
-}
-
-.ring-green-200 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(187 247 208 / var(--tw-ring-opacity));
-}
-
-.ring-green-300 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(134 239 172 / var(--tw-ring-opacity));
-}
-
-.ring-green-400 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(74 222 128 / var(--tw-ring-opacity));
-}
-
-.ring-green-50 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(240 253 244 / var(--tw-ring-opacity));
-}
-
-.ring-green-500 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity));
-}
-
-.ring-green-600 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(22 163 74 / var(--tw-ring-opacity));
-}
-
-.ring-green-700 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(21 128 61 / var(--tw-ring-opacity));
-}
-
-.ring-green-800 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(22 101 52 / var(--tw-ring-opacity));
-}
-
-.ring-green-900 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(20 83 45 / var(--tw-ring-opacity));
-}
-
-.ring-indigo-100 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(224 231 255 / var(--tw-ring-opacity));
-}
-
-.ring-indigo-200 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(199 210 254 / var(--tw-ring-opacity));
-}
-
-.ring-indigo-300 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(165 180 252 / var(--tw-ring-opacity));
-}
-
-.ring-indigo-400 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(129 140 248 / var(--tw-ring-opacity));
-}
-
-.ring-indigo-50 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(238 242 255 / var(--tw-ring-opacity));
-}
-
-.ring-indigo-500 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
-}
-
-.ring-indigo-600 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity));
-}
-
-.ring-indigo-700 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(67 56 202 / var(--tw-ring-opacity));
-}
-
-.ring-indigo-800 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(55 48 163 / var(--tw-ring-opacity));
-}
-
-.ring-indigo-900 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(49 46 129 / var(--tw-ring-opacity));
-}
-
-.ring-inverted {
-  --tw-ring-color: var(--cal-bg-inverted);
-}
-
-.ring-lime-100 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(236 252 203 / var(--tw-ring-opacity));
-}
-
-.ring-lime-200 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(217 249 157 / var(--tw-ring-opacity));
-}
-
-.ring-lime-300 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(190 242 100 / var(--tw-ring-opacity));
-}
-
-.ring-lime-400 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(163 230 53 / var(--tw-ring-opacity));
-}
-
-.ring-lime-50 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(247 254 231 / var(--tw-ring-opacity));
-}
-
-.ring-lime-500 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(132 204 22 / var(--tw-ring-opacity));
-}
-
-.ring-lime-600 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(101 163 13 / var(--tw-ring-opacity));
-}
-
-.ring-lime-700 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(77 124 15 / var(--tw-ring-opacity));
-}
-
-.ring-lime-800 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(63 98 18 / var(--tw-ring-opacity));
-}
-
-.ring-lime-900 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(54 83 20 / var(--tw-ring-opacity));
-}
-
-.ring-muted {
-  --tw-ring-color: var(--cal-bg-muted);
-}
-
-.ring-neutral-100 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(245 245 245 / var(--tw-ring-opacity));
-}
-
-.ring-neutral-200 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(229 229 229 / var(--tw-ring-opacity));
-}
-
-.ring-neutral-300 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(212 212 212 / var(--tw-ring-opacity));
-}
-
-.ring-neutral-400 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(163 163 163 / var(--tw-ring-opacity));
-}
-
-.ring-neutral-50 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(250 250 250 / var(--tw-ring-opacity));
-}
-
-.ring-neutral-500 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(115 115 115 / var(--tw-ring-opacity));
-}
-
-.ring-neutral-600 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(82 82 82 / var(--tw-ring-opacity));
-}
-
-.ring-neutral-700 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(64 64 64 / var(--tw-ring-opacity));
-}
-
-.ring-neutral-800 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(38 38 38 / var(--tw-ring-opacity));
-}
-
-.ring-neutral-900 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(23 23 23 / var(--tw-ring-opacity));
-}
-
-.ring-orange-100 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(255 237 213 / var(--tw-ring-opacity));
-}
-
-.ring-orange-200 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(254 215 170 / var(--tw-ring-opacity));
-}
-
-.ring-orange-300 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(253 186 116 / var(--tw-ring-opacity));
-}
-
-.ring-orange-400 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(251 146 60 / var(--tw-ring-opacity));
-}
-
-.ring-orange-50 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(255 247 237 / var(--tw-ring-opacity));
-}
-
-.ring-orange-500 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(249 115 22 / var(--tw-ring-opacity));
-}
-
-.ring-orange-600 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(234 88 12 / var(--tw-ring-opacity));
-}
-
-.ring-orange-700 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(194 65 12 / var(--tw-ring-opacity));
-}
-
-.ring-orange-800 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(154 52 18 / var(--tw-ring-opacity));
-}
-
-.ring-orange-900 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(124 45 18 / var(--tw-ring-opacity));
-}
-
-.ring-pink-100 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(252 231 243 / var(--tw-ring-opacity));
-}
-
-.ring-pink-200 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(251 207 232 / var(--tw-ring-opacity));
-}
-
-.ring-pink-300 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(249 168 212 / var(--tw-ring-opacity));
-}
-
-.ring-pink-400 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(244 114 182 / var(--tw-ring-opacity));
-}
-
-.ring-pink-50 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(253 242 248 / var(--tw-ring-opacity));
-}
-
-.ring-pink-500 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(236 72 153 / var(--tw-ring-opacity));
-}
-
-.ring-pink-600 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(219 39 119 / var(--tw-ring-opacity));
-}
-
-.ring-pink-700 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(190 24 93 / var(--tw-ring-opacity));
-}
-
-.ring-pink-900 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(131 24 67 / var(--tw-ring-opacity));
-}
-
-.ring-purple-100 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(243 232 255 / var(--tw-ring-opacity));
-}
-
-.ring-purple-200 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(233 213 255 / var(--tw-ring-opacity));
-}
-
-.ring-purple-300 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(216 180 254 / var(--tw-ring-opacity));
-}
-
-.ring-purple-400 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(192 132 252 / var(--tw-ring-opacity));
-}
-
-.ring-purple-50 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(250 245 255 / var(--tw-ring-opacity));
-}
-
-.ring-purple-500 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity));
-}
-
-.ring-purple-600 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(147 51 234 / var(--tw-ring-opacity));
-}
-
-.ring-purple-700 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(126 34 206 / var(--tw-ring-opacity));
-}
-
-.ring-purple-800 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(107 33 168 / var(--tw-ring-opacity));
-}
-
-.ring-purple-900 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(88 28 135 / var(--tw-ring-opacity));
-}
-
-.ring-red-100 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(254 226 226 / var(--tw-ring-opacity));
-}
-
-.ring-red-200 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(254 202 202 / var(--tw-ring-opacity));
-}
-
-.ring-red-300 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity));
-}
-
-.ring-red-400 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
-}
-
-.ring-red-50 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(254 242 242 / var(--tw-ring-opacity));
-}
-
-.ring-red-500 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
-}
-
-.ring-red-600 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(220 38 38 / var(--tw-ring-opacity));
-}
-
-.ring-red-700 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(185 28 28 / var(--tw-ring-opacity));
-}
-
-.ring-red-800 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(153 27 27 / var(--tw-ring-opacity));
-}
-
-.ring-red-900 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(127 29 29 / var(--tw-ring-opacity));
-}
-
-.ring-rose-100 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(255 228 230 / var(--tw-ring-opacity));
-}
-
-.ring-rose-200 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(254 205 211 / var(--tw-ring-opacity));
-}
-
-.ring-rose-300 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(253 164 175 / var(--tw-ring-opacity));
-}
-
-.ring-rose-400 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(251 113 133 / var(--tw-ring-opacity));
-}
-
-.ring-rose-50 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(255 241 242 / var(--tw-ring-opacity));
-}
-
-.ring-rose-500 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(244 63 94 / var(--tw-ring-opacity));
-}
-
-.ring-rose-600 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(225 29 72 / var(--tw-ring-opacity));
-}
-
-.ring-rose-700 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(190 18 60 / var(--tw-ring-opacity));
-}
-
-.ring-rose-800 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(159 18 57 / var(--tw-ring-opacity));
-}
-
-.ring-rose-900 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(136 19 55 / var(--tw-ring-opacity));
-}
-
-.ring-sky-100 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(224 242 254 / var(--tw-ring-opacity));
-}
-
-.ring-sky-200 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(186 230 253 / var(--tw-ring-opacity));
-}
-
-.ring-sky-300 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(125 211 252 / var(--tw-ring-opacity));
-}
-
-.ring-sky-400 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(56 189 248 / var(--tw-ring-opacity));
-}
-
-.ring-sky-50 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(240 249 255 / var(--tw-ring-opacity));
-}
-
-.ring-sky-500 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(14 165 233 / var(--tw-ring-opacity));
-}
-
-.ring-sky-600 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(2 132 199 / var(--tw-ring-opacity));
-}
-
-.ring-sky-700 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(3 105 161 / var(--tw-ring-opacity));
-}
-
-.ring-sky-800 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(7 89 133 / var(--tw-ring-opacity));
-}
-
-.ring-sky-900 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(12 74 110 / var(--tw-ring-opacity));
-}
-
-.ring-slate-100 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(241 245 249 / var(--tw-ring-opacity));
-}
-
-.ring-slate-200 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(226 232 240 / var(--tw-ring-opacity));
-}
-
-.ring-slate-300 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(203 213 225 / var(--tw-ring-opacity));
-}
-
-.ring-slate-400 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(148 163 184 / var(--tw-ring-opacity));
-}
-
-.ring-slate-50 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(248 250 252 / var(--tw-ring-opacity));
-}
-
-.ring-slate-500 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(100 116 139 / var(--tw-ring-opacity));
-}
-
-.ring-slate-600 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(71 85 105 / var(--tw-ring-opacity));
-}
-
-.ring-slate-700 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(51 65 85 / var(--tw-ring-opacity));
-}
-
-.ring-slate-800 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(30 41 59 / var(--tw-ring-opacity));
-}
-
-.ring-slate-900 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(15 23 42 / var(--tw-ring-opacity));
-}
-
-.ring-stone-100 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(245 245 244 / var(--tw-ring-opacity));
-}
-
-.ring-stone-200 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(231 229 228 / var(--tw-ring-opacity));
-}
-
-.ring-stone-300 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(214 211 209 / var(--tw-ring-opacity));
-}
-
-.ring-stone-400 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(168 162 158 / var(--tw-ring-opacity));
-}
-
-.ring-stone-50 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(250 250 249 / var(--tw-ring-opacity));
-}
-
-.ring-stone-500 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(120 113 108 / var(--tw-ring-opacity));
-}
-
-.ring-stone-600 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(87 83 78 / var(--tw-ring-opacity));
-}
-
-.ring-stone-700 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(68 64 60 / var(--tw-ring-opacity));
-}
-
-.ring-stone-800 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(41 37 36 / var(--tw-ring-opacity));
-}
-
-.ring-stone-900 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(28 25 23 / var(--tw-ring-opacity));
-}
-
-.ring-subtle {
-  --tw-ring-color: var(--cal-bg-subtle);
-}
-
-.ring-teal-100 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(204 251 241 / var(--tw-ring-opacity));
-}
-
-.ring-teal-200 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(153 246 228 / var(--tw-ring-opacity));
-}
-
-.ring-teal-300 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(94 234 212 / var(--tw-ring-opacity));
-}
-
-.ring-teal-400 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(45 212 191 / var(--tw-ring-opacity));
-}
-
-.ring-teal-50 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(240 253 250 / var(--tw-ring-opacity));
-}
-
-.ring-teal-500 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(20 184 166 / var(--tw-ring-opacity));
-}
-
-.ring-teal-600 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(13 148 136 / var(--tw-ring-opacity));
-}
-
-.ring-teal-700 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(15 118 110 / var(--tw-ring-opacity));
-}
-
-.ring-teal-800 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(17 94 89 / var(--tw-ring-opacity));
-}
-
-.ring-teal-900 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(19 78 74 / var(--tw-ring-opacity));
-}
-
-.ring-transparent {
-  --tw-ring-color: transparent;
-}
-
-.ring-violet-100 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(237 233 254 / var(--tw-ring-opacity));
-}
-
-.ring-violet-200 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(221 214 254 / var(--tw-ring-opacity));
-}
-
-.ring-violet-300 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(196 181 253 / var(--tw-ring-opacity));
-}
-
-.ring-violet-400 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(167 139 250 / var(--tw-ring-opacity));
-}
-
-.ring-violet-50 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(245 243 255 / var(--tw-ring-opacity));
-}
-
-.ring-violet-500 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(139 92 246 / var(--tw-ring-opacity));
-}
-
-.ring-violet-600 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(124 58 237 / var(--tw-ring-opacity));
-}
-
-.ring-violet-700 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(109 40 217 / var(--tw-ring-opacity));
-}
-
-.ring-violet-800 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(91 33 182 / var(--tw-ring-opacity));
-}
-
-.ring-violet-900 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(76 29 149 / var(--tw-ring-opacity));
-}
-
-.ring-white {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
-}
-
-.ring-yellow-100 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(254 249 195 / var(--tw-ring-opacity));
-}
-
-.ring-yellow-200 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(254 240 138 / var(--tw-ring-opacity));
-}
-
-.ring-yellow-300 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(253 224 71 / var(--tw-ring-opacity));
-}
-
-.ring-yellow-400 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(250 204 21 / var(--tw-ring-opacity));
-}
-
-.ring-yellow-50 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(254 252 232 / var(--tw-ring-opacity));
-}
-
-.ring-yellow-500 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(234 179 8 / var(--tw-ring-opacity));
-}
-
-.ring-yellow-600 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(202 138 4 / var(--tw-ring-opacity));
-}
-
-.ring-yellow-700 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(161 98 7 / var(--tw-ring-opacity));
-}
-
-.ring-yellow-800 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(133 77 14 / var(--tw-ring-opacity));
-}
-
-.ring-yellow-900 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(113 63 18 / var(--tw-ring-opacity));
-}
-
-.ring-zinc-100 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(244 244 245 / var(--tw-ring-opacity));
-}
-
-.ring-zinc-200 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(228 228 231 / var(--tw-ring-opacity));
-}
-
-.ring-zinc-300 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(212 212 216 / var(--tw-ring-opacity));
-}
-
-.ring-zinc-400 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(161 161 170 / var(--tw-ring-opacity));
-}
-
-.ring-zinc-50 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(250 250 250 / var(--tw-ring-opacity));
-}
-
-.ring-zinc-500 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(113 113 122 / var(--tw-ring-opacity));
-}
-
-.ring-zinc-600 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(82 82 91 / var(--tw-ring-opacity));
-}
-
-.ring-zinc-700 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(63 63 70 / var(--tw-ring-opacity));
-}
-
-.ring-zinc-800 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(39 39 42 / var(--tw-ring-opacity));
-}
-
-.ring-zinc-900 {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(24 24 27 / var(--tw-ring-opacity));
-}
-
-.ring-offset-1 {
-  --tw-ring-offset-width: 1px;
-}
-
-.ring-offset-2 {
-  --tw-ring-offset-width: 2px;
-}
-
-.blur {
-  --tw-blur: blur(8px);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.blur-\[3px\] {
-  --tw-blur: blur(3px);
-  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);
-}
-
-.drop-shadow {
-  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
-  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);
-}
-
-.grayscale {
-  --tw-grayscale: grayscale(100%);
-  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);
-}
-
-.invert {
-  --tw-invert: invert(100%);
-  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);
-}
-
-.sepia {
-  --tw-sepia: sepia(100%);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.\!filter {
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow) !important;
-}
-
-.filter {
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.backdrop-blur {
-  --tw-backdrop-blur: blur(8px);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-}
-
-.backdrop-blur-lg {
-  --tw-backdrop-blur: blur(16px);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-}
-
-.backdrop-blur-md {
-  --tw-backdrop-blur: blur(12px);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-}
-
-.backdrop-grayscale {
-  --tw-backdrop-grayscale: grayscale(100%);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-}
-
-.backdrop-invert {
-  --tw-backdrop-invert: invert(100%);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-}
-
-.backdrop-sepia {
-  --tw-backdrop-sepia: sepia(100%);
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-}
-
-.backdrop-filter {
-  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
-}
-
-.transition {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.transition-all {
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.transition-colors {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.transition-none {
-  transition-property: none;
-}
-
-.transition-opacity {
-  transition-property: opacity;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.transition-shadow {
-  transition-property: box-shadow;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.transition-transform {
-  transition-property: transform;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.delay-1000 {
-  transition-delay: 1000ms;
-}
-
-.duration-100 {
-  transition-duration: 100ms;
-}
-
-.duration-150 {
-  transition-duration: 150ms;
-}
-
-.duration-200 {
-  transition-duration: 200ms;
-}
-
-.duration-300 {
-  transition-duration: 300ms;
-}
-
-.ease-in {
-  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
-}
-
-.ease-in-out {
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.ease-out {
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-}
-
-.will-change-transform {
-  will-change: transform;
-}
-
-.scrollbar {
-  --scrollbar-track: initial;
-  --scrollbar-thumb: initial;
-  --scrollbar-corner: initial;
-  --scrollbar-track-hover: var(--scrollbar-track);
-  --scrollbar-thumb-hover: var(--scrollbar-thumb);
-  --scrollbar-corner-hover: var(--scrollbar-corner);
-  --scrollbar-track-active: var(--scrollbar-track-hover);
-  --scrollbar-thumb-active: var(--scrollbar-thumb-hover);
-  --scrollbar-corner-active: var(--scrollbar-corner-hover);
-  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
-  overflow: overlay;
-}
-
-.scrollbar.overflow-x-hidden {
-  overflow-x: hidden;
-}
-
-.scrollbar.overflow-y-hidden {
-  overflow-y: hidden;
-}
-
-.scrollbar::-webkit-scrollbar-track {
-  background-color: var(--scrollbar-track);
-}
-
-.scrollbar::-webkit-scrollbar-thumb {
-  background-color: var(--scrollbar-thumb);
-}
-
-.scrollbar::-webkit-scrollbar-corner {
-  background-color: var(--scrollbar-corner);
-}
-
-.scrollbar::-webkit-scrollbar-track:hover {
-  background-color: var(--scrollbar-track-hover);
-}
-
-.scrollbar::-webkit-scrollbar-thumb:hover {
-  background-color: var(--scrollbar-thumb-hover);
-}
-
-.scrollbar::-webkit-scrollbar-corner:hover {
-  background-color: var(--scrollbar-corner-hover);
-}
-
-.scrollbar::-webkit-scrollbar-track:active {
-  background-color: var(--scrollbar-track-active);
-}
-
-.scrollbar::-webkit-scrollbar-thumb:active {
-  background-color: var(--scrollbar-thumb-active);
-}
-
-.scrollbar::-webkit-scrollbar-corner:active {
-  background-color: var(--scrollbar-corner-active);
-}
-
-.scrollbar {
-  scrollbar-width: auto;
-}
-
-.scrollbar::-webkit-scrollbar {
-  width: 16px;
-  height: 16px;
-}
-
-.scrollbar-thin {
-  --scrollbar-track: initial;
-  --scrollbar-thumb: initial;
-  --scrollbar-corner: initial;
-  --scrollbar-track-hover: var(--scrollbar-track);
-  --scrollbar-thumb-hover: var(--scrollbar-thumb);
-  --scrollbar-corner-hover: var(--scrollbar-corner);
-  --scrollbar-track-active: var(--scrollbar-track-hover);
-  --scrollbar-thumb-active: var(--scrollbar-thumb-hover);
-  --scrollbar-corner-active: var(--scrollbar-corner-hover);
-  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
-  overflow: overlay;
-}
-
-.scrollbar-thin.overflow-x-hidden {
-  overflow-x: hidden;
-}
-
-.scrollbar-thin.overflow-y-hidden {
-  overflow-y: hidden;
-}
-
-.scrollbar-thin::-webkit-scrollbar-track {
-  background-color: var(--scrollbar-track);
-}
-
-.scrollbar-thin::-webkit-scrollbar-thumb {
-  background-color: var(--scrollbar-thumb);
-}
-
-.scrollbar-thin::-webkit-scrollbar-corner {
-  background-color: var(--scrollbar-corner);
-}
-
-.scrollbar-thin::-webkit-scrollbar-track:hover {
-  background-color: var(--scrollbar-track-hover);
-}
-
-.scrollbar-thin::-webkit-scrollbar-thumb:hover {
-  background-color: var(--scrollbar-thumb-hover);
-}
-
-.scrollbar-thin::-webkit-scrollbar-corner:hover {
-  background-color: var(--scrollbar-corner-hover);
-}
-
-.scrollbar-thin::-webkit-scrollbar-track:active {
-  background-color: var(--scrollbar-track-active);
-}
-
-.scrollbar-thin::-webkit-scrollbar-thumb:active {
-  background-color: var(--scrollbar-thumb-active);
-}
-
-.scrollbar-thin::-webkit-scrollbar-corner:active {
-  background-color: var(--scrollbar-corner-active);
-}
-
-.scrollbar-thin {
-  scrollbar-width: thin;
-}
-
-.scrollbar-thin::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-@keyframes enter {
-
-  from {
-    opacity: var(--tw-enter-opacity, 1);
-    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
-  }
-}
-
-@keyframes exit {
-
-  to {
-    opacity: var(--tw-exit-opacity, 1);
-    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
-  }
-}
-
-.zoom-in {
-  --tw-enter-scale: 0;
-}
-
-.zoom-out {
-  --tw-exit-scale: 0;
-}
-
-.duration-100 {
-  animation-duration: 100ms;
-}
-
-.duration-150 {
-  animation-duration: 150ms;
-}
-
-.duration-200 {
-  animation-duration: 200ms;
-}
-
-.duration-300 {
-  animation-duration: 300ms;
-}
-
-.delay-1000 {
-  animation-delay: 1000ms;
-}
-
-.ease-in {
-  animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
-}
-
-.ease-in-out {
-  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.ease-out {
-  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
-}
-
-.running {
-  animation-play-state: running;
-}
-
-.paused {
-  animation-play-state: paused;
-}
-
-/* Chrome, Safari and Opera */
-.no-scrollbar::-webkit-scrollbar {
-  display: none;
-}
-
-.no-scrollbar {
-  -ms-overflow-style: none;
-  /* IE and Edge */
-  scrollbar-width: none;
-  /* Firefox */
-}
-
-.\[--booker-main-width\:420px\] {
-  --booker-main-width: 420px;
-}
-
-.\[--booker-main-width\:480px\] {
-  --booker-main-width: 480px;
-}
-
-.\[--booker-meta-width\:240px\] {
-  --booker-meta-width: 240px;
-}
-
-.\[--booker-meta-width\:340px\] {
-  --booker-meta-width: 340px;
-}
-
-.\[--booker-timeslots-width\:240px\] {
-  --booker-timeslots-width: 240px;
-}
-
-.\[--cal-brand-emphasis\:\#101010\] {
-  --cal-brand-emphasis: #101010;
-}
-
-.\[--cal-brand-subtle\:\#9CA3AF\] {
-  --cal-brand-subtle: #9CA3AF;
-}
-
-.\[--cal-brand-text\:\#FFFFFF\] {
-  --cal-brand-text: #FFFFFF;
-}
-
-.\[--cal-brand-text\:white\] {
-  --cal-brand-text: white;
-}
-
-.\[--cal-brand\:\#111827\] {
-  --cal-brand: #111827;
-}
-
-.\[--calendar-dates-sticky-offset\:66px\] {
-  --calendar-dates-sticky-offset: 66px;
-}
-
-.\[--disabled-gradient-background\:\#E5E7EB\] {
-  --disabled-gradient-background: #E5E7EB;
-}
-
-.\[--disabled-gradient-background\:\#F8F9FB\] {
-  --disabled-gradient-background: #F8F9FB;
-}
-
-.\[--disabled-gradient-foreground\:\#D1D5DB\] {
-  --disabled-gradient-foreground: #D1D5DB;
-}
-
-.\[--disabled-gradient-foreground\:\#E6E7EB\] {
-  --disabled-gradient-foreground: #E6E7EB;
-}
-
-.\[--troublehooster-meta-width\:0px\] {
-  --troublehooster-meta-width: 0px;
-}
-
-.\[--troublehooster-meta-width\:250px\] {
-  --troublehooster-meta-width: 250px;
-}
-
-.\[-webkit-app-region\:no-drag\] {
-  -webkit-app-region: no-drag;
-}
-
-.\[a-zA-Z\:_\] {
-  a-z-a--z: ;
-}
-
-.\[appearance\:textfield\] {
-  -webkit-appearance: textfield;
-  -moz-appearance: textfield;
-  appearance: textfield;
-}
-
-.\[filter\:invert\(0\.5\)_brightness\(0\.5\)\] {
-  filter: invert(0.5) brightness(0.5);
-}
-
-.\[grid-area\:calendar\] {
-  grid-area: calendar;
-}
-
-.\[grid-area\:header\] {
-  grid-area: header;
-}
-
-.\[grid-area\:main\] {
-  grid-area: main;
-}
-
-.\[grid-area\:meta\] {
-  grid-area: meta;
-}
-
-.\[grid-area\:timeslots\] {
-  grid-area: timeslots;
-}
-
-/**
-* Add css variables here as well for light mode in addition to tailwind.config to avoid FOUC
-* Must update them here as well: packages/embeds/embed-core/src/addAppCssVars.ts
-*/
-:root {
-  /* Spacing Scale */
-  --cal-spacing-0: 0px;
-  --cal-spacing-px: 1px;
-  --cal-spacing-0_5: 0.125rem;
-  /* 2px */
-  --cal-spacing-1: 0.25rem;
-  /* 4px */
-  --cal-spacing-1_5: 0.375rem;
-  /* 6px */
-  --cal-spacing-2: 0.5rem;
-  /* 8px */
-  --cal-spacing-2_5: 0.625rem;
-  /* 10px */
-  --cal-spacing-3: 0.75rem;
-  /* 12px */
-  --cal-spacing-3_5: 0.875rem;
-  /* 14px */
-  --cal-spacing-4: 1rem;
-  /* 16px */
-  --cal-spacing-5: 1.25rem;
-  /* 20px */
-  --cal-spacing-6: 1.5rem;
-  /* 24px */
-  --cal-spacing-7: 1.75rem;
-  /* 28px */
-  --cal-spacing-8: 2rem;
-  /* 32px */
-  --cal-spacing-9: 2.25rem;
-  /* 36px */
-  --cal-spacing-10: 2.5rem;
-  /* 40px */
-  --cal-spacing-11: 2.75rem;
-  /* 44px */
-  --cal-spacing-12: 3rem;
-  /* 48px */
-  --cal-spacing-14: 3.5rem;
-  /* 56px */
-  --cal-spacing-16: 4rem;
-  /* 64px */
-  --cal-spacing-20: 5rem;
-  /* 80px */
-  --cal-spacing-24: 6rem;
-  /* 96px */
-  --cal-spacing-28: 7rem;
-  /* 112px */
-  --cal-spacing-32: 8rem;
-  /* 128px */
-  --cal-spacing-36: 9rem;
-  /* 144px */
-  --cal-spacing-40: 10rem;
-  /* 160px */
-  --cal-spacing-44: 11rem;
-  /* 176px */
-  --cal-spacing-48: 12rem;
-  /* 192px */
-  --cal-spacing-52: 13rem;
-  /* 208px */
-  --cal-spacing-56: 14rem;
-  /* 224px */
-  --cal-spacing-60: 15rem;
-  /* 240px */
-  --cal-spacing-64: 16rem;
-  /* 256px */
-  --cal-spacing-72: 18rem;
-  /* 288px */
-  --cal-spacing-80: 20rem;
-  /* 320px */
-  --cal-spacing-96: 24rem;
-  /* 384px */
-
-  /* Border Radius */
-  --cal-radius-none: 0px;
-  --cal-radius-sm: 0.125rem;
-  /* 2px */
-  --cal-radius: 0.25rem;
-  /* 4px */
-  --cal-radius-md: 0.375rem;
-  /* 6px */
-  --cal-radius-lg: 0.5rem;
-  /* 8px */
-  --cal-radius-xl: 0.75rem;
-  /* 12px */
-  --cal-radius-2xl: 1rem;
-  /* 16px */
-  --cal-radius-3xl: 1.5rem;
-  /* 24px */
-  --cal-radius-full: 9999px;
-
-  /* Background Standard */
-  --cal-bg-emphasis: hsla(220, 13%, 91%, 1);
-  /* gray.200 - active items and emphasising */
-  --cal-bg: hsla(0, 0%, 100%, 1);
-  /* white - default background */
-  --cal-bg-subtle: hsla(220, 14%, 94%, 1);
-  /* gray.100 - hovering on items, subtle raising */
-  --cal-bg-muted: hsla(210, 20%, 97%, 1);
-  /* gray.50 - large items, sidebar, sections */
-  --cal-bg-inverted: hsla(210, 30%, 4%, 1);
-  /* gray.900 - tooltips */
-
-  /* Background Primary */
-  --cal-bg-primary: hsla(214, 30%, 16%, 1);
-  /* stone-100 */
-  --cal-bg-primary-emphasis: hsla(220, 6%, 25%, 1);
-  /* stone-800 */
-  --cal-bg-primary-muted: hsla(220, 14%, 94%, 1);
-  /* stone-400 */
-
-  /* Background Brand */
-  --cal-bg-brand: hsla(214, 30%, 16%, 1);
-  /* gray-50 */
-  --cal-bg-brand-emphasis: hsla(220, 6%, 25%, 1);
-  /* stone-100 */
-  --cal-bg-brand-muted: hsla(220, 14%, 94%, 1);
-  /* stone-100 */
-
-  /* Background Semantic */
-  --cal-bg-semantic-info-subtle: hsla(212, 88%, 97%, 1);
-  /* blue-100 */
-  --cal-bg-semantic-info-emphasis: hsla(236, 80%, 25%, 1);
-  /* blue-500 */
-  --cal-bg-semantic-success-subtle: hsla(167, 54%, 93%, 1);
-  /* green-100 */
-  --cal-bg-semantic-success-emphasis: hsla(158, 74%, 38%, 1);
-  /* green-500 */
-  --cal-bg-semantic-attention-subtle: hsla(34, 100%, 92%, 1);
-  /* orange-100 */
-  --cal-bg-semantic-attention-emphasis: hsla(15, 79%, 34%, 1);
-  /* orange-500 */
-  --cal-bg-semantic-error-subtle: hsla(0, 93%, 94%, 1);
-  /* red-100 */
-  --cal-bg-semantic-error-emphasis: hsla(0, 63%, 24%, 1);
-  /* red-500 */
-
-  /* Background Visualization */
-  --cal-bg-visualization-1-subtle: hsla(326, 78%, 95%, 1);
-  /* pink-100 */
-  --cal-bg-visualization-1-emphasis: hsla(330, 81%, 60%, 1);
-  /* pink-500 */
-  --cal-bg-visualization-2-subtle: hsla(256, 86%, 91%, 1);
-  /* purple-100 */
-  --cal-bg-visualization-2-emphasis: hsla(256, 85%, 57%, 1);
-  /* purple-500 */
-  --cal-bg-visualization-3-subtle: hsla(217, 87%, 91%, 1);
-  /* blue-100 */
-  --cal-bg-visualization-3-emphasis: hsla(235, 100%, 63%, 1);
-  /* blue-500 */
-  --cal-bg-visualization-4-subtle: hsla(167, 54%, 93%, 1);
-  /* green-100 */
-  --cal-bg-visualization-4-emphasis: hsla(158, 74%, 38%, 1);
-  /* green-500 */
-  --cal-bg-visualization-5-subtle: hsla(55, 97%, 88%, 1);
-  /* yellow-100 */
-  --cal-bg-visualization-5-emphasis: hsla(45, 93%, 47%, 1);
-  /* yellow-500 */
-  --cal-bg-visualization-6-subtle: hsla(34, 100%, 92%, 1);
-  /* orange-100 */
-  --cal-bg-visualization-6-emphasis: hsla(25, 95%, 53%, 1);
-  /* orange-500 */
-  --cal-bg-visualization-7-subtle: hsla(0, 96%, 89%, 1);
-  /* red-100 */
-  --cal-bg-visualization-7-emphasis: hsla(0, 84%, 60%, 1);
-  /* red-500 */
-
-  /* Legacy Background Components - Consider deprecating */
-  --cal-bg-info: hsla(221, 91%, 93%, 1);
-  /* #dee9fc - info backgrounds */
-  --cal-bg-success: hsla(142, 76%, 94%, 1);
-  /* #e2fbe8 - success backgrounds */
-  --cal-bg-attention: hsla(33, 100%, 92%, 1);
-  /* #fceed8 - attention backgrounds */
-  --cal-bg-error: hsla(3, 66%, 93%, 1);
-  /* #f9e3e2 - error backgrounds */
-  --cal-bg-dark-error: hsla(2, 55%, 30%, 1);
-  /* Keeping existing dark error */
-
-  /* Borders */
-  --cal-border-emphasis: hsla(218, 11%, 65%, 1);
-  /* gray.400 - input:hover */
-  --cal-border: hsla(216, 12%, 84%, 1);
-  /* gray.300 - inputs */
-  --cal-border-subtle: hsla(220, 13%, 91%, 1);
-  /* gray.200 - container borders */
-  --cal-border-muted: hsla(220, 14%, 94%, 1);
-  /* gray.100 */
-  --cal-border-error: hsla(0, 96%, 89%, 1);
-  /* Keeping existing error border */
-  --cal-border-semantic-error: hsla(0, 96%, 89%, 1);
-
-  /* Content/Text Standard */
-  --cal-text-emphasis: hsla(210, 30%, 4%, 1);
-  /* gray-900 */
-  --cal-text: hsla(220, 6%, 25%, 1);
-  /* gray-700 */
-  --cal-text-subtle: hsla(220, 9%, 46%, 1);
-  /* gray-500 */
-  --cal-text-muted: hsla(218, 11%, 65%, 1);
-  /* gray-400 */
-  --cal-text-inverted: hsla(0, 0%, 100%, 1);
-  /* white */
-
-  /* Content/Text Semantic */
-  --cal-text-semantic-info: hsla(236, 80%, 25%, 1);
-  /* blue-800 */
-  --cal-text-semantic-success: hsla(150, 84%, 22%, 1);
-  /* green-800 */
-  --cal-text-semantic-attention: hsla(15, 79%, 34%, 1);
-  /* orange-800 */
-  --cal-text-semantic-error: hsla(0, 63%, 24%, 1);
-  /* red-800 */
-
-  /* Content/Text Visualization */
-  --cal-text-visualization-1: hsla(332, 79%, 25%, 1);
-  /* pink-800 */
-  --cal-text-visualization-2: hsla(270, 91%, 25%, 1);
-  /* purple-800 */
-  --cal-text-visualization-3: hsla(217, 91%, 25%, 1);
-  /* blue-800 */
-  --cal-text-visualization-4: hsla(142, 71%, 25%, 1);
-  /* green-800 */
-  --cal-text-visualization-5: hsla(45, 93%, 25%, 1);
-  /* yellow-800 */
-  --cal-text-visualization-6: hsla(24, 95%, 25%, 1);
-  /* orange-800 */
-  --cal-text-visualization-7: hsla(0, 84%, 25%, 1);
-  /* red-800 */
-
-  /* Border/Semantic Subtle */
-  --cal-border-semantic-attention-subtle: hsla(32, 98%, 83%, 1);
-  --cal-border-semantic-error-subtle: hsla(0, 96%, 89%, 1);
-
-  /* Legacy Content/Text Components - Consider deprecating */
-  --cal-text-info: hsla(225, 57%, 33%, 1);
-  /* #253985 - interactive text/icons */
-  --cal-text-success: hsla(144, 34%, 24%, 1);
-  /* #285231 */
-  --cal-text-attention: hsla(16, 62%, 28%, 1);
-  /* Keeping existing attention text */
-  --cal-text-error: hsla(0, 63%, 31%, 1);
-  /* Keeping existing error text */
-
-  /* Brand */
-  --cal-brand: hsla(221, 39%, 11%, 1);
-  /* Keeping existing brand color */
-  --cal-brand-emphasis: hsla(0, 0%, 6%, 1);
-  /* Keeping existing brand emphasis */
-  --cal-brand-text: hsla(0, 0%, 100%, 1);
-  /* white */
-}
-
-.dark {
-  /* Background Standard */
-  --cal-bg-emphasis: hsla(0, 0%, 25%, 1);
-  /* stone-700 */
-  --cal-bg: hsla(0, 0%, 6%, 1);
-  /* stone-950 */
-  --cal-bg-subtle: hsla(0, 0%, 15%, 1);
-  /* stone-800 */
-  --cal-bg-muted: hsla(0, 0%, 9%, 1);
-  /* stone-900 */
-  --cal-bg-inverted: hsla(0, 0%, 98%, 1);
-  /* stone-50 */
-
-  /* Background Primary */
-  --cal-bg-primary: hsla(0, 0%, 96%, 1);
-  /* stone-100 */
-  --cal-bg-primary-emphasis: hsla(0, 0%, 64%, 1);
-  /* stone-800 */
-  --cal-bg-primary-muted: hsla(0, 0%, 15%, 1);
-  /* stone-400 */
-
-  /* Background Brand */
-  --cal-bg-brand: hsla(0, 0%, 98%, 1);
-  /* gray-50 */
-  --cal-bg-brand-emphasis: hsla(0, 0%, 96%, 1);
-  /* stone-100 */
-  --cal-bg-brand-muted: hsla(0, 0%, 96%, 1);
-  /* stone-100 */
-
-  /* Background Semantic */
-  --cal-bg-semantic-info-subtle: hsla(236, 80%, 8%, 1);
-  /* blue-800 */
-  --cal-bg-semantic-info-emphasis: hsla(229, 90%, 74%, 1);
-  /* blue-500 */
-  --cal-bg-semantic-success-subtle: hsla(148, 88%, 16%, 1);
-  /* green-800 */
-  --cal-bg-semantic-success-emphasis: hsla(158, 74%, 38%, 1);
-  /* green-500 */
-  --cal-bg-semantic-attention-subtle: hsla(21, 86%, 8%, 1);
-  /* orange-800 */
-  --cal-bg-semantic-attention-emphasis: hsla(27, 96%, 61%, 1);
-  /* orange-500 */
-  --cal-bg-semantic-error-subtle: hsla(0, 70%, 8%, 1);
-  /* red-800 */
-  --cal-bg-semantic-error-emphasis: hsla(0, 91%, 71%, 1);
-  /* red-500 */
-
-  /* Background Visualization */
-  --cal-bg-visualization-1-subtle: hsla(336, 74%, 35%, 1);
-  /* pink-200 */
-  --cal-bg-visualization-1-emphasis: hsla(330, 81%, 60%, 1);
-  /* pink-500 */
-  --cal-bg-visualization-2-subtle: hsla(252, 83%, 23%, 1);
-  /* purple-200 */
-  --cal-bg-visualization-2-emphasis: hsla(256, 85%, 57%, 1);
-  /* purple-500 */
-  --cal-bg-visualization-3-subtle: hsla(236, 74%, 35%, 1);
-  /* blue-200 */
-  --cal-bg-visualization-3-emphasis: hsla(235, 100%, 63%, 1);
-  /* blue-500 */
-  --cal-bg-visualization-4-subtle: hsla(150, 84%, 22%, 1);
-  /* green-200 */
-  --cal-bg-visualization-4-emphasis: hsla(158, 74%, 38%, 1);
-  /* green-500 */
-  --cal-bg-visualization-5-subtle: hsla(28, 73%, 26%, 1);
-  /* yellow-200 */
-  --cal-bg-visualization-5-emphasis: hsla(45, 93%, 47%, 1);
-  /* yellow-500 */
-  --cal-bg-visualization-6-subtle: hsla(15, 75%, 23%, 1);
-  /* orange-200 */
-  --cal-bg-visualization-6-emphasis: hsla(25, 95%, 53%, 1);
-  /* orange-500 */
-  --cal-bg-visualization-7-subtle: hsla(0, 70%, 35%, 1);
-  /* red-200 */
-  --cal-bg-visualization-7-emphasis: hsla(0, 84%, 60%, 1);
-  /* red-500 */
-
-  /* Legacy Background Components - Consider deprecating */
-  --cal-bg-info: hsla(228, 56%, 33%, 1);
-  /* Keeping existing info background */
-  --cal-bg-success: hsla(133, 34%, 24%, 1);
-  /* Keeping existing success background */
-  --cal-bg-attention: hsla(16, 62%, 28%, 1);
-  /* Keeping existing attention background */
-  --cal-bg-error: hsla(2, 55%, 30%, 1);
-  /* Keeping existing error background */
-  --cal-bg-dark-error: hsla(2, 55%, 30%, 1);
-  /* Keeping existing dark error */
-
-  /* Border Standard */
-  --cal-border: hsla(0, 0%, 30%, 1);
-  /* stone-600 */
-  --cal-border-muted: hsla(0, 0%, 9%, 1);
-  /* stone-500 */
-  --cal-border-subtle: hsla(0, 0%, 15%, 1);
-  /* stone-700 */
-  --cal-border-emphasis: hsla(0, 0%, 45%, 1);
-  /* stone-800 */
-  /* Border Semantic */
-  --cal-border-semantic-error: hsla(0, 63%, 24%, 1);
-  /* red-800 */
-
-
-  /* Border/Semantic Subtle */
-  --cal-border-semantic-attention-subtle: hsla(15, 75%, 23%, 1);
-  --cal-border-semantic-error-subtle: hsla(0, 63%, 24%, 1);
-
-
-  /* Legacy Border - Consider deprecating */
-  --cal-border-error: hsla(0, 63%, 24%, 1);
-  /* Keeping existing error border */
-
-  /* Content/Text Standard */
-  --cal-text-emphasis: hsla(0, 0%, 98%, 1);
-  /* stone-50 */
-  --cal-text: hsla(0, 0%, 83%, 1);
-  /* stone-300 */
-  --cal-text-subtle: hsla(0, 0%, 64%, 1);
-  /* stone-400 */
-  --cal-text-muted: hsla(0, 0%, 64%, 1);
-  /* stone-400 */
-  --cal-text-inverted: hsla(0, 0%, 0%, 1);
-  /* black */
-
-  /* Content/Text Semantic */
-  --cal-text-semantic-info: hsla(229, 90%, 74%, 1);
-  /* blue-100 */
-  --cal-text-semantic-success: hsla(161, 49%, 54%, 1);
-  /* green-100 */
-  --cal-text-semantic-attention: hsla(27, 96%, 61%, 1);
-  /* orange-100 */
-  --cal-text-semantic-error: hsla(0, 91%, 71%, 1);
-  /* red-100 */
-
-  /* Content/Text Semantic Emphasis */
-  --cal-text-semantic-info-emphasis: hsla(217, 91%, 25%, 1);
-  /* blue-800 */
-  --cal-text-semantic-success-emphasis: hsla(142, 71%, 25%, 1);
-  /* green-800 */
-  --cal-text-semantic-attention-emphasis: hsla(24, 95%, 25%, 1);
-  /* orange-800 */
-  --cal-text-semantic-error-emphasis: hsla(0, 84%, 25%, 1);
-  /* red-800 */
-
-  /* Legacy Content/Text Components - Consider deprecating */
-  --cal-text-info: hsla(218, 83%, 93%, 1);
-  /* Keeping existing info text */
-  --cal-text-success: hsla(134, 76%, 94%, 1);
-  /* Keeping existing success text */
-  --cal-text-attention: hsla(37, 86%, 92%, 1);
-  /* Keeping existing attention text */
-  --cal-text-error: hsla(3, 66%, 93%, 1);
-  /* Keeping existing error text */
-
-  /* Brand */
-  --cal-brand: hsla(0, 0%, 100%, 1);
-  /* white */
-  --cal-brand-emphasis: hsla(218, 11%, 65%, 1);
-  /* Keeping existing brand emphasis */
-  --cal-brand-text: hsla(0, 0%, 0%, 1);
-  /* black */
-}
-
-::-moz-selection {
-  color: var(--cal-brand-text);
-  background: var(--cal-brand);
-}
-
 ::selection {
   color: var(--cal-brand-text);
   background: var(--cal-brand);
 }
-
 body {
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
 }
-
-/*
-  Desktop App specific CSS
-    https://docs.todesktop.com/
-*/
-
 html.todesktop-platform-win32 .todesktop\:\!bg-transparent {
   background: inherit !important;
 }
-
-/* disable user selection on buttons, links and images on desktop app */
 html.todesktop button,
 html.todesktop a,
 html.todesktop img,
 html.todesktop header {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
-  -moz-user-select: none;
   user-select: none;
+  -khtml-user-select: none;
   cursor: default !important;
 }
-
 html.todesktop,
 html.todesktop div {
   cursor: default !important;
 }
-
-/* make header draggable on desktop app */
 html.todesktop header {
   -webkit-app-region: drag;
 }
-
 html.todesktop header button,
 html.todesktop header a {
   -webkit-app-region: no-drag;
 }
-
 html.todesktop-platform-darwin body,
 html.todesktop-platform-darwin aside {
-  background: transparent !important;
+  background: 0 0 !important;
 }
-
 html.todesktop-platform-darwin.dark main.bg-default {
-  background: rgba(0, 0, 0, 0.6) !important;
+  background: #0009 !important;
 }
-
 html.todesktop-platform-darwin.light main.bg-default {
-  background: rgba(255, 255, 255, 0.8) !important;
+  background: #fffc !important;
 }
-
 html.todesktop.light {
-  --cal-bg-emphasis: hsla(0, 0%, 11%, 0.1);
+  --cal-bg-emphasis: #1c1c1c1a;
 }
-
 html.todesktop.dark {
-  --cal-bg-emphasis: hsla(220, 2%, 26%, 0.3);
+  --cal-bg-emphasis: #4142444d;
 }
-
-/*
-  Adds Utility to hide scrollbar to tailwind
-    https://github.com/tailwindlabs/tailwindcss/discussions/2394
-    https://github.com/tailwindlabs/tailwindcss/pull/5732
-*/
-
-/*
- * Override the default tailwindcss-forms styling (default is: 'colors.blue.600')
- * @see: https://github.com/tailwindlabs/tailwindcss-forms/issues/14#issuecomment-1005376006
- */
 [type="text"]:focus,
 [type="email"]:focus,
 [type="url"]:focus,
@@ -14788,11649 +10354,553 @@ select:focus {
   --tw-ring-color: var(--brand-color);
   border-color: var(--brand-color);
 }
-
-/* TODO: avoid global specific css */
-/* button[role="switch"][data-state="checked"] span {
-  transform: translateX(16px);
-} */
-
-/* hide chat bubble on mobile */
 @media only screen and (max-width: 768px) {
-
-  /* Intercom FAB*/
-  #launcher {
+  #launcher,
+  div[role="presentation"] > iframe {
     display: none !important;
   }
-
-  /* Zendesk FAB*/
-  div[role="presentation"]>iframe {
-    display: none !important;
-  }
-
-  /* Helpscout FAB*/
   .BeaconFabButtonFrame {
     margin-left: -30px;
     left: 50%;
-    bottom: 28px !important;
     z-index: 1058 !important;
+    bottom: 28px !important;
   }
 }
-
-/* TODO: implement styling for react-multi-email */
-
-/* !important to override react-dates */
 .DateRangePickerInput__withBorder {
   border: 0 !important;
 }
-
 .DateInput_input {
-  border: 1px solid #d1d5db !important;
-  border-radius: 2px !important;
+  color: #000;
   font-size: inherit !important;
   font-weight: inherit !important;
-  color: #000;
-  padding: 11px ​11px 9px !important;
+  border: 1px solid #d1d5db !important;
+  border-radius: 2px !important;
+  padding: 11px 11px 9px !important;
   line-height: 16px !important;
 }
-
 .DateInput_input__focused {
+  box-shadow: none !important;
   border: 2px solid #000 !important;
   border-radius: 2px !important;
-  box-shadow: none !important;
-  padding: 10px ​10px 9px !important;
+  padding: 10px 10px 9px !important;
 }
-
 .DateRangePickerInput_arrow {
-  padding: 0px 10px;
+  padding: 0 10px;
 }
-
 .loader {
-  display: block;
+  border-style: solid;
+  border-width: 4px;
   width: 30px;
   height: 30px;
   margin: 60px auto;
+  animation: 2s infinite loader;
+  display: block;
   position: relative;
-  border-width: 4px;
-  border-style: solid;
-  animation: loader 2s infinite ease;
 }
-
 .loader-inner {
   vertical-align: top;
-  display: inline-block;
   width: 100%;
-  animation: loader-inner 2s infinite ease-in;
+  animation: 2s ease-in infinite loader-inner;
+  display: inline-block;
 }
-
 .no-ring-inset {
   --tw-ring-inset: unset;
 }
-
 @keyframes loader {
   0% {
-    transform: rotate(0deg);
+    transform: rotate(0);
   }
-
   25% {
     transform: rotate(180deg);
   }
-
   50% {
     transform: rotate(180deg);
   }
-
   75% {
     transform: rotate(360deg);
   }
-
-  100% {
+  to {
     transform: rotate(360deg);
   }
 }
-
 @keyframes loader-inner {
   0% {
     height: 0%;
   }
-
   25% {
     height: 0%;
   }
-
   50% {
     height: 100%;
   }
-
   75% {
     height: 100%;
   }
-
-  100% {
+  to {
     height: 0%;
   }
 }
-
 .text-inverted-important {
-  color: white !important;
+  color: #fff !important;
 }
-
 #timeZone input:focus {
   box-shadow: none;
 }
-
-/* react-date-picker forces a border upon us, cast it away */
 .react-date-picker__wrapper {
   border: none !important;
 }
-
 .react-date-picker__inputGroup__input {
   padding-top: 0;
   padding-bottom: 0;
 }
-
-/* animations */
 .slideInBottom {
+  animation-name: slideInBottom;
   animation-duration: 0.3s;
   animation-fill-mode: both;
-  animation-name: slideInBottom;
 }
-
 @keyframes slideInBottom {
-  from {
+  0% {
     opacity: 0;
-    transform: translateY(30%);
     pointer-events: none;
+    transform: translateY(30%);
   }
-
   to {
     opacity: 1;
     pointer-events: auto;
   }
 }
-
-/* animations */
 .slideInTop {
+  animation-name: slideInTop;
   animation-duration: 0.3s;
   animation-fill-mode: both;
-  animation-name: slideInTop;
 }
-
 @keyframes slideInTop {
-  from {
+  0% {
     opacity: 0;
-    transform: translateY(-20%);
     pointer-events: none;
+    transform: translateY(-20%);
   }
-
   to {
     opacity: 1;
     pointer-events: auto;
     transform: translateY(0%);
   }
 }
-
 .fadeIn {
-  animation-duration: 0.3s;
-  animation-fill-mode: both;
   animation-name: fadeIn;
+  animation-duration: 0.3s;
   animation-timing-function: ease-in-out;
+  animation-fill-mode: both;
 }
-
 @keyframes fadeIn {
-  from {
+  0% {
     opacity: 0;
   }
-
   to {
     opacity: 1;
   }
 }
-
-/**
- * Makes sure h-screen works on mobile Safari. By default h-screen
- * does not take into account the height of the address bar, causing
- * weird behaviour when scrolling — sometimes the height will be correct
- * and sometimes it won't, depending on whether the address bar is
- * in 'collapsed' state or not.
- * @see: https://benborgers.com/posts/tailwind-h-screen
- */
 @supports (-webkit-touch-callout: none) {
   .h-screen {
     height: -webkit-fill-available;
   }
 }
-
 ::-webkit-search-cancel-button {
   -webkit-appearance: none;
 }
-
 .react-tel-input .country-list .country:hover,
 .react-tel-input .country-list .country.highlight {
   background-color: var(--cal-bg-emphasis) !important;
 }
-
 .react-tel-input .flag-dropdown .selected-flag,
 .react-tel-input .flag-dropdown.open .selected-flag {
-  background-color: var(--cal-bg, white) !important;
+  background-color: var(--cal-bg) !important;
 }
-
 .react-tel-input .flag-dropdown {
-  left: var(--cal-spacing-0_5);
-  border-top-width: 0px !important;
-  border-bottom-width: 0px !important;
-  border-left-width: 0px !important;
+  left: calc(var(--spacing) * 0.5);
+  border-block-style: var(--tw-border-style) !important;
+  border-block-width: 0 !important;
+  border-left-style: var(--tw-border-style) !important;
+  border-left-width: 0 !important;
   border-right-color: var(--cal-border) !important;
 }
-
-.intercom-lightweight-app {
-  z-index: 40 !important;
-}
-
 [data-radix-popper-content-wrapper] {
   border: none;
 }
-
-.first-letter\:text-xs::first-letter {
-  font-size: 0.75rem;
-  line-height: 1rem;
+html[dir="rtl"] .react-tel-input .flag-dropdown {
+  left: auto !important;
+  right: 0 !important;
+}
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-scroll-snap-strictness {
+  syntax: "*";
+  inherits: false;
+  initial-value: proximity;
+}
+@property --tw-space-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-space-x-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-divide-x-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-divide-y-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-gradient-position {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-via {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-to {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-via-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+@property --tw-gradient-via-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 50%;
+}
+@property --tw-gradient-to-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ordinal {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-slashed-zero {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-figure {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-spacing {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-fraction {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-blur {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-brightness {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-contrast {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-grayscale {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-hue-rotate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-invert {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-opacity {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-saturate {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-sepia {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-drop-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
 }
-
-.placeholder\:text-sm::-moz-placeholder {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+@property --tw-drop-shadow-size {
+  syntax: "*";
+  inherits: false;
 }
-
-.placeholder\:text-sm::placeholder {
-  font-size: 0.875rem;
-  line-height: 1.25rem;
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false;
 }
-
-.placeholder\:font-normal::-moz-placeholder {
-  font-weight: 400;
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false;
 }
-
-.placeholder\:font-normal::placeholder {
-  font-weight: 400;
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false;
 }
-
-.placeholder\:text-gray-500::-moz-placeholder {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false;
 }
-
-.placeholder\:text-gray-500::placeholder {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false;
 }
-
-.placeholder\:text-muted::-moz-placeholder {
-  color: var(--cal-text-muted);
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false;
 }
-
-.placeholder\:text-muted::placeholder {
-  color: var(--cal-text-muted);
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false;
 }
-
-.placeholder\:text-subtle::-moz-placeholder {
-  color: var(--cal-text-subtle);
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false;
 }
-
-.placeholder\:text-subtle::placeholder {
-  color: var(--cal-text-subtle);
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false;
 }
-
-.before\:pointer-events-none::before {
-  content: var(--tw-content);
-  pointer-events: none;
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
 }
-
-.before\:absolute::before {
-  content: var(--tw-content);
-  position: absolute;
+@property --tw-ease {
+  syntax: "*";
+  inherits: false;
 }
-
-.before\:inset-0::before {
-  content: var(--tw-content);
-  inset: var(--cal-spacing-0);
+@property --tw-content {
+  syntax: "*";
+  inherits: false;
+  initial-value: "";
 }
-
-.before\:bottom-\[-3px\]::before {
-  content: var(--tw-content);
-  bottom: -3px;
-}
-
-.before\:bottom-\[-5px\]::before {
-  content: var(--tw-content);
-  bottom: -5px;
-}
-
-.before\:left-\[-24px\]::before {
-  content: var(--tw-content);
-  left: -24px;
-}
-
-.before\:left-\[-30px\]::before {
-  content: var(--tw-content);
-  left: -30px;
-}
-
-.before\:top-\[-0\.5rem\]::before {
-  content: var(--tw-content);
-  top: -0.5rem;
-}
-
-.before\:top-\[-3px\]::before {
-  content: var(--tw-content);
-  top: -3px;
-}
-
-.before\:top-\[-5px\]::before {
-  content: var(--tw-content);
-  top: -5px;
-}
-
-.before\:h-\[calc\(100\%\+0\.5rem\)\]::before {
-  content: var(--tw-content);
-  height: calc(100% + 0.5rem);
-}
-
-.before\:w-0::before {
-  content: var(--tw-content);
-  width: var(--cal-spacing-0);
-}
-
-.before\:w-0\.5::before {
-  content: var(--tw-content);
-  width: var(--cal-spacing-0_5);
-}
-
-.before\:w-\[calc\(100\%_\+_35px\)\]::before {
-  content: var(--tw-content);
-  width: calc(100% + 35px);
-}
-
-.before\:rounded-md::before {
-  content: var(--tw-content);
-  border-radius: var(--cal-radius-md);
-}
-
-.before\:border-0::before {
-  content: var(--tw-content);
-  border-width: 0px;
-}
-
-.before\:bg-default::before {
-  content: var(--tw-content);
-  background-color: var(--cal-bg, white);
-}
-
-.before\:bg-subtle::before {
-  content: var(--tw-content);
-  background-color: var(--cal-bg-subtle);
-}
-
-.before\:py-3::before {
-  content: var(--tw-content);
-  padding-top: var(--cal-spacing-3);
-  padding-bottom: var(--cal-spacing-3);
-}
-
-.before\:opacity-0::before {
-  content: var(--tw-content);
-  opacity: 0;
-}
-
-.before\:transition-opacity::before {
-  content: var(--tw-content);
-  transition-property: opacity;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.before\:content-\[\'\'\]::before {
-  --tw-content: '';
-  content: var(--tw-content);
-}
-
-.after\:absolute::after {
-  content: var(--tw-content);
-  position: absolute;
-}
-
-.after\:left-\[-24px\]::after {
-  content: var(--tw-content);
-  left: -24px;
-}
-
-.after\:top-\[1\.5rem\]::after {
-  content: var(--tw-content);
-  top: 1.5rem;
-}
-
-.after\:block::after {
-  content: var(--tw-content);
-  display: block;
-}
-
-.after\:h-2::after {
-  content: var(--tw-content);
-  height: var(--cal-spacing-2);
-}
-
-.after\:h-\[6px\]::after {
-  content: var(--tw-content);
-  height: 6px;
-}
-
-.after\:h-\[calc\(100\%-1\.5rem\)\]::after {
-  content: var(--tw-content);
-  height: calc(100% - 1.5rem);
-}
-
-.after\:w-0::after {
-  content: var(--tw-content);
-  width: var(--cal-spacing-0);
-}
-
-.after\:w-0\.5::after {
-  content: var(--tw-content);
-  width: var(--cal-spacing-0_5);
-}
-
-.after\:w-2::after {
-  content: var(--tw-content);
-  width: var(--cal-spacing-2);
-}
-
-.after\:w-\[6px\]::after {
-  content: var(--tw-content);
-  width: 6px;
-}
-
-.after\:rounded-full::after {
-  content: var(--tw-content);
-  border-radius: var(--cal-radius-full);
-}
-
-.after\:bg-default::after {
-  content: var(--tw-content);
-  background-color: var(--cal-bg, white);
-}
-
-.after\:bg-inverted::after {
-  content: var(--tw-content);
-  background-color: var(--cal-bg-inverted);
-}
-
-.after\:bg-muted::after {
-  content: var(--tw-content);
-  background-color: var(--cal-bg-muted);
-}
-
-.after\:bg-subtle::after {
-  content: var(--tw-content);
-  background-color: var(--cal-bg-subtle);
-}
-
-.after\:content-\[\'\'\]::after {
-  --tw-content: '';
-  content: var(--tw-content);
-}
-
-.first\:mt-0:first-child {
-  margin-top: var(--cal-spacing-0);
-}
-
-.first\:rounded-t-md:first-child {
-  border-top-left-radius: var(--cal-radius-md);
-  border-top-right-radius: var(--cal-radius-md);
-}
-
-.last\:mb-0:last-child {
-  margin-bottom: var(--cal-spacing-0);
-}
-
-.last\:mb-2:last-child {
-  margin-bottom: var(--cal-spacing-2);
-}
-
-.last\:mr-0:last-child {
-  margin-right: var(--cal-spacing-0);
-}
-
-.last\:rounded-b-md:last-child {
-  border-bottom-right-radius: var(--cal-radius-md);
-  border-bottom-left-radius: var(--cal-radius-md);
-}
-
-.last\:border-b-0:last-child {
-  border-bottom-width: 0px;
-}
-
-.last\:pb-0:last-child {
-  padding-bottom: var(--cal-spacing-0);
-}
-
-.last\:font-medium:last-child {
-  font-weight: 500;
-}
-
-.only\:w-full:only-child {
-  width: 100%;
-}
-
-.first-of-type\:rounded-t-\[inherit\]:first-of-type {
-  border-top-left-radius: inherit;
-  border-top-right-radius: inherit;
-}
-
-.last-of-type\:rounded-b-\[inherit\]:last-of-type {
-  border-bottom-right-radius: inherit;
-  border-bottom-left-radius: inherit;
-}
-
-.visited\:text-blue-500:visited {
-  color: rgb(59 130 246);
-}
-
-.checked\:bg-brand-default:checked {
-  background-color: var(--cal-brand, #111827);
-}
-
-.checked\:bg-darkerror:checked {
-  background-color: var(--cal-bg-dark-error);
-}
-
-.checked\:bg-gray-300:checked {
-  --tw-bg-opacity: 1;
-  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
-}
-
-.checked\:bg-gray-800:checked {
-  --tw-bg-opacity: 1;
-  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-}
-
-.empty\:before\:inline-block:empty::before {
-  content: var(--tw-content);
-  display: inline-block;
-}
-
-.empty\:before\:content-\[\'\'\]:empty::before {
-  --tw-content: '';
-  content: var(--tw-content);
-}
-
-.focus-within\:relative:focus-within {
-  position: relative;
-}
-
-.focus-within\:z-20:focus-within {
-  z-index: 20;
-}
-
-.focus-within\:border-emphasis:focus-within {
-  border-color: var(--cal-border-emphasis);
-}
-
-.focus-within\:bg-subtle:focus-within {
-  background-color: var(--cal-bg-subtle);
-}
-
-.focus-within\:outline-none:focus-within {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-
-.focus-within\:ring-0:focus-within {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-.focus-within\:ring-2:focus-within {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-.focus-within\:ring-brand-default:focus-within {
-  --tw-ring-color: var(--cal-brand, #111827);
-}
-
-.focus-within\:ring-emphasis:focus-within {
-  --tw-ring-color: var(--cal-bg-emphasis);
-}
-
-.focus-within\:ring-offset-2:focus-within {
-  --tw-ring-offset-width: 2px;
-}
-
-.focus\:z-10:focus {
-  z-index: 10;
-}
-
-.focus\:border:focus {
-  border-width: 1px;
-}
-
-.focus\:border-0:focus {
-  border-width: 0px;
-}
-
-.focus\:border-2:focus {
-  border-width: 2px;
-}
-
-.focus\:border-r:focus {
-  border-right-width: 1px;
-}
-
-.focus\:border-black:focus {
-  --tw-border-opacity: 1;
-  border-color: rgb(17 17 17 / var(--tw-border-opacity));
-}
-
-.focus\:border-brand-default:focus {
-  border-color: var(--cal-brand, #111827);
-}
-
-.focus\:border-emphasis:focus {
-  border-color: var(--cal-border-emphasis);
-}
-
-.focus\:border-gray-800:focus {
-  --tw-border-opacity: 1;
-  border-color: rgb(31 41 55 / var(--tw-border-opacity));
-}
-
-.focus\:border-neutral-300:focus {
-  --tw-border-opacity: 1;
-  border-color: rgb(212 212 212 / var(--tw-border-opacity));
-}
-
-.focus\:border-neutral-500:focus {
-  --tw-border-opacity: 1;
-  border-color: rgb(115 115 115 / var(--tw-border-opacity));
-}
-
-.focus\:border-neutral-800:focus {
-  --tw-border-opacity: 1;
-  border-color: rgb(38 38 38 / var(--tw-border-opacity));
-}
-
-.focus\:border-neutral-900:focus {
-  --tw-border-opacity: 1;
-  border-color: rgb(23 23 23 / var(--tw-border-opacity));
-}
-
-.focus\:border-orange-400:focus {
-  --tw-border-opacity: 1;
-  border-color: rgb(251 146 60 / var(--tw-border-opacity));
-}
-
-.focus\:border-red-500:focus {
-  --tw-border-opacity: 1;
-  border-color: rgb(239 68 68 / var(--tw-border-opacity));
-}
-
-.focus\:border-subtle:focus {
-  border-color: var(--cal-border-subtle);
-}
-
-.focus\:\!bg-transparent:focus {
-  background-color: transparent !important;
-}
-
-.focus\:bg-default:focus {
-  background-color: var(--cal-bg, white);
-}
-
-.focus\:bg-emphasis:focus {
-  background-color: var(--cal-bg-emphasis);
-}
-
-.focus\:bg-muted:focus {
-  background-color: var(--cal-bg-muted);
-}
-
-.focus\:bg-subtle:focus {
-  background-color: var(--cal-bg-subtle);
-}
-
-.focus\:text-emphasis:focus {
-  color: var(--cal-text-emphasis);
-}
-
-.focus\:opacity-100:focus {
-  opacity: 1;
-}
-
-.focus\:\!outline-none:focus {
-  outline: 2px solid transparent !important;
-  outline-offset: 2px !important;
-}
-
-.focus\:outline-none:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-
-.focus\:\!ring-0:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color) !important;
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
-}
-
-.focus\:ring:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-.focus\:ring-0:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-.focus\:ring-1:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-.focus\:ring-2:focus {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-.focus\:ring-amber-100:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(254 243 199 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-amber-200:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(253 230 138 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-amber-300:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(252 211 77 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-amber-400:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(251 191 36 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-amber-50:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(255 251 235 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-amber-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(245 158 11 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-amber-600:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(217 119 6 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-amber-700:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(180 83 9 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-amber-800:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(146 64 14 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-amber-900:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(120 53 15 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-black:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(17 17 17 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-blue-100:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(219 234 254 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-blue-200:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-blue-300:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-blue-400:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-blue-50:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(239 246 255 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-blue-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-blue-600:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-blue-700:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(29 78 216 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-blue-800:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-blue-900:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(30 58 138 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-brand-default:focus {
-  --tw-ring-color: var(--cal-brand, #111827);
-}
-
-.focus\:ring-cyan-100:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(207 250 254 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-cyan-200:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(165 243 252 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-cyan-300:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(103 232 249 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-cyan-400:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(34 211 238 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-cyan-50:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(236 254 255 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-cyan-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(6 182 212 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-cyan-600:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(8 145 178 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-cyan-700:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(14 116 144 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-cyan-800:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(21 94 117 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-cyan-900:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(22 78 99 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-emerald-100:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(209 250 229 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-emerald-200:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(167 243 208 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-emerald-300:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(110 231 183 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-emerald-400:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(52 211 153 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-emerald-50:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(236 253 245 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-emerald-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-emerald-600:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(5 150 105 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-emerald-700:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(4 120 87 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-emerald-800:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(6 95 70 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-emerald-900:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(6 78 59 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-emphasis:focus {
-  --tw-ring-color: var(--cal-bg-emphasis);
-}
-
-.focus\:ring-fuchsia-100:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(250 232 255 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-fuchsia-200:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(245 208 254 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-fuchsia-300:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(240 171 252 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-fuchsia-400:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(232 121 249 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-fuchsia-50:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(253 244 255 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-fuchsia-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(217 70 239 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-fuchsia-600:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(192 38 211 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-fuchsia-700:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(162 28 175 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-fuchsia-800:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(134 25 143 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-fuchsia-900:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(112 26 117 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-gray-100:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(243 244 246 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-gray-200:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-gray-300:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-gray-400:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-gray-50:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(249 250 251 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-gray-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-gray-600:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-gray-700:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-gray-800:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-gray-900:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-green-100:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(220 252 231 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-green-200:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(187 247 208 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-green-300:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(134 239 172 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-green-400:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(74 222 128 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-green-50:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(240 253 244 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-green-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-green-600:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(22 163 74 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-green-700:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(21 128 61 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-green-800:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(22 101 52 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-green-900:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(20 83 45 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-indigo-100:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(224 231 255 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-indigo-200:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(199 210 254 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-indigo-300:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(165 180 252 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-indigo-400:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(129 140 248 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-indigo-50:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(238 242 255 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-indigo-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-indigo-600:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-indigo-700:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(67 56 202 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-indigo-800:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(55 48 163 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-indigo-900:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(49 46 129 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-lime-100:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(236 252 203 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-lime-200:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(217 249 157 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-lime-300:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(190 242 100 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-lime-400:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(163 230 53 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-lime-50:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(247 254 231 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-lime-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(132 204 22 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-lime-600:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(101 163 13 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-lime-700:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(77 124 15 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-lime-800:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(63 98 18 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-lime-900:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(54 83 20 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-muted:focus {
-  --tw-ring-color: var(--cal-bg-muted);
-}
-
-.focus\:ring-neutral-100:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(245 245 245 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-neutral-200:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(229 229 229 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-neutral-300:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(212 212 212 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-neutral-400:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(163 163 163 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-neutral-50:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(250 250 250 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-neutral-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(115 115 115 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-neutral-600:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(82 82 82 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-neutral-700:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(64 64 64 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-neutral-800:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(38 38 38 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-neutral-900:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(23 23 23 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-orange-100:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(255 237 213 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-orange-200:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(254 215 170 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-orange-300:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(253 186 116 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-orange-400:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(251 146 60 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-orange-50:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(255 247 237 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-orange-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(249 115 22 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-orange-600:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(234 88 12 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-orange-700:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(194 65 12 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-orange-800:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(154 52 18 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-orange-900:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(124 45 18 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-pink-100:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(252 231 243 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-pink-200:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(251 207 232 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-pink-300:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(249 168 212 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-pink-400:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(244 114 182 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-pink-50:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(253 242 248 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-pink-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(236 72 153 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-pink-600:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(219 39 119 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-pink-700:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(190 24 93 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-pink-900:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(131 24 67 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-purple-100:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(243 232 255 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-purple-200:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(233 213 255 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-purple-300:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(216 180 254 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-purple-400:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(192 132 252 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-purple-50:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(250 245 255 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-purple-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-purple-600:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(147 51 234 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-purple-700:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(126 34 206 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-purple-800:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(107 33 168 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-purple-900:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(88 28 135 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-red-100:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(254 226 226 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-red-200:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(254 202 202 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-red-300:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-red-400:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-red-50:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(254 242 242 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-red-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-red-600:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(220 38 38 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-red-700:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(185 28 28 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-red-800:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(153 27 27 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-red-900:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(127 29 29 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-rose-100:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(255 228 230 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-rose-200:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(254 205 211 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-rose-300:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(253 164 175 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-rose-400:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(251 113 133 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-rose-50:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(255 241 242 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-rose-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(244 63 94 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-rose-600:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(225 29 72 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-rose-700:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(190 18 60 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-rose-800:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(159 18 57 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-rose-900:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(136 19 55 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-sky-100:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(224 242 254 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-sky-200:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(186 230 253 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-sky-300:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(125 211 252 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-sky-400:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(56 189 248 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-sky-50:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(240 249 255 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-sky-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(14 165 233 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-sky-600:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(2 132 199 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-sky-700:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(3 105 161 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-sky-800:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(7 89 133 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-sky-900:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(12 74 110 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-slate-100:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(241 245 249 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-slate-200:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(226 232 240 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-slate-300:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(203 213 225 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-slate-400:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(148 163 184 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-slate-50:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(248 250 252 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-slate-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(100 116 139 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-slate-600:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(71 85 105 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-slate-700:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(51 65 85 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-slate-800:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(30 41 59 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-slate-900:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(15 23 42 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-stone-100:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(245 245 244 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-stone-200:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(231 229 228 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-stone-300:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(214 211 209 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-stone-400:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(168 162 158 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-stone-50:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(250 250 249 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-stone-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(120 113 108 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-stone-600:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(87 83 78 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-stone-700:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(68 64 60 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-stone-800:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(41 37 36 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-stone-900:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(28 25 23 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-teal-100:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(204 251 241 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-teal-200:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(153 246 228 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-teal-300:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(94 234 212 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-teal-400:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(45 212 191 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-teal-50:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(240 253 250 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-teal-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(20 184 166 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-teal-600:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(13 148 136 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-teal-700:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(15 118 110 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-teal-800:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(17 94 89 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-teal-900:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(19 78 74 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-transparent:focus {
-  --tw-ring-color: transparent;
-}
-
-.focus\:ring-violet-100:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(237 233 254 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-violet-200:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(221 214 254 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-violet-300:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(196 181 253 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-violet-400:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(167 139 250 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-violet-50:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(245 243 255 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-violet-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(139 92 246 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-violet-600:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(124 58 237 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-violet-700:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(109 40 217 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-violet-800:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(91 33 182 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-violet-900:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(76 29 149 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-white:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-yellow-100:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(254 249 195 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-yellow-200:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(254 240 138 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-yellow-300:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(253 224 71 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-yellow-400:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(250 204 21 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-yellow-50:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(254 252 232 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-yellow-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(234 179 8 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-yellow-600:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(202 138 4 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-yellow-700:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(161 98 7 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-yellow-800:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(133 77 14 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-yellow-900:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(113 63 18 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-zinc-100:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(244 244 245 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-zinc-200:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(228 228 231 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-zinc-300:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(212 212 216 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-zinc-400:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(161 161 170 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-zinc-50:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(250 250 250 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-zinc-500:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(113 113 122 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-zinc-600:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(82 82 91 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-zinc-700:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(63 63 70 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-zinc-800:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(39 39 42 / var(--tw-ring-opacity));
-}
-
-.focus\:ring-zinc-900:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(24 24 27 / var(--tw-ring-opacity));
-}
-
-.focus\:\!ring-offset-0:focus {
-  --tw-ring-offset-width: 0px !important;
-}
-
-.focus\:ring-offset-0:focus {
-  --tw-ring-offset-width: 0px;
-}
-
-.focus\:ring-offset-1:focus {
-  --tw-ring-offset-width: 1px;
-}
-
-.focus\:ring-offset-2:focus {
-  --tw-ring-offset-width: 2px;
-}
-
-.focus-visible\:border-red-100:focus-visible {
-  --tw-border-opacity: 1;
-  border-color: rgb(254 226 226 / var(--tw-border-opacity));
-}
-
-.focus-visible\:bg-error:focus-visible {
-  background-color: var(--cal-bg-error);
-}
-
-.focus-visible\:bg-subtle:focus-visible {
-  background-color: var(--cal-bg-subtle);
-}
-
-.focus-visible\:bg-transparent:focus-visible {
-  background-color: transparent;
-}
-
-.focus-visible\:text-red-700:focus-visible {
-  --tw-text-opacity: 1;
-  color: rgb(185 28 28 / var(--tw-text-opacity));
-}
-
-.focus-visible\:outline-none:focus-visible {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-
-.focus-visible\:outline-2:focus-visible {
-  outline-width: 2px;
-}
-
-.focus-visible\:ring-2:focus-visible {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-.focus-visible\:ring-brand-default:focus-visible {
-  --tw-ring-color: var(--cal-brand, #111827);
-}
-
-.focus-visible\:ring-red-700:focus-visible {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(185 28 28 / var(--tw-ring-opacity));
-}
-
-.focus-visible\:ring-offset-2:focus-visible {
-  --tw-ring-offset-width: 2px;
-}
-
-.disabled\:pointer-events-none:disabled {
-  pointer-events: none;
-}
-
-.disabled\:cursor-default:disabled {
-  cursor: default;
-}
-
-.disabled\:cursor-not-allowed:disabled {
-  cursor: not-allowed;
-}
-
-.disabled\:border-red-200:disabled {
-  --tw-border-opacity: 1;
-  border-color: rgb(254 202 202 / var(--tw-border-opacity));
-}
-
-.disabled\:border-subtle:disabled {
-  border-color: var(--cal-border-subtle);
-}
-
-.disabled\:border-transparent:disabled {
-  border-color: transparent;
-}
-
-.disabled\:bg-brand-subtle:disabled {
-  background-color: var(--cal-brand-subtle, #9CA3AF);
-}
-
-.disabled\:bg-emphasis:disabled {
-  background-color: var(--cal-bg-emphasis);
-}
-
-.disabled\:bg-gray-200:disabled {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-}
-
-.disabled\:bg-red-100:disabled {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
-}
-
-.disabled\:bg-subtle:disabled {
-  background-color: var(--cal-bg-subtle);
-}
-
-.disabled\:bg-transparent:disabled {
-  background-color: transparent;
-}
-
-.disabled\:bg-opacity-30:disabled {
-  --tw-bg-opacity: 0.3;
-}
-
-.disabled\:font-light:disabled {
-  font-weight: 300;
-}
-
-.disabled\:text-muted:disabled {
-  color: var(--cal-text-muted);
-}
-
-.disabled\:text-red-700:disabled {
-  --tw-text-opacity: 1;
-  color: rgb(185 28 28 / var(--tw-text-opacity));
-}
-
-.disabled\:opacity-30:disabled {
-  opacity: 0.3;
-}
-
-.disabled\:opacity-40:disabled {
-  opacity: 0.4;
-}
-
-.disabled\:opacity-50:disabled {
-  opacity: 0.5;
-}
-
-.group\/booking_status_email:hover .group-hover\/booking_status_email\:visible {
-  visibility: visible;
-}
-
-.group:hover .group-hover\:visible {
-  visibility: visible;
-}
-
-.group:hover .group-hover\:flex {
-  display: flex;
-}
-
-.group:hover .group-hover\:inline-flex {
-  display: inline-flex;
-}
-
-.group:hover .group-hover\:scale-100 {
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.group:hover .group-hover\:cursor-pointer {
-  cursor: pointer;
-}
-
-.group:hover .group-hover\:border-emphasis {
-  border-color: var(--cal-border-emphasis);
-}
-
-.group\/remove:hover .group-hover\/remove\:bg-inverted {
-  background-color: var(--cal-bg-inverted);
-}
-
-.group:hover .group-hover\:\!bg-muted {
-  background-color: var(--cal-bg-muted) !important;
-}
-
-.group:hover .group-hover\:bg-blue-300 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
-}
-
-.group:hover .group-hover\:bg-opacity-40 {
-  --tw-bg-opacity: 0.4;
-}
-
-.group\/remove:hover .group-hover\/remove\:text-inverted {
-  color: var(--cal-text-inverted);
-}
-
-.group:hover .group-hover\:text-default {
-  color: var(--cal-text);
-}
-
-.group:hover .group-hover\:text-emphasis {
-  color: var(--cal-text-emphasis);
-}
-
-.group:hover .group-hover\:text-subtle {
-  color: var(--cal-text-subtle);
-}
-
-.group:hover .group-hover\:opacity-100 {
-  opacity: 1;
-}
-
-.group:active .group-active\:translate-y-\[0\.5px\] {
-  --tw-translate-y: 0.5px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.group.destructive .group-\[\.destructive\]\:text-red-300 {
-  --tw-text-opacity: 1;
-  color: rgb(252 165 165 / var(--tw-text-opacity));
-}
-
-.group.destructive .group-\[\.destructive\]\:focus\:ring-red-400:focus {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
-}
-
-.group.destructive .group-\[\.destructive\]\:focus\:ring-offset-red-600:focus {
-  --tw-ring-offset-color: #dc2626;
-}
-
-.peer:checked~.peer-checked\:text-emphasis {
-  color: var(--cal-text-emphasis);
-}
-
-.peer:checked~.peer-checked\:ring-2 {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-.peer:disabled~.peer-disabled\:opacity-50 {
-  opacity: 0.5;
-}
-
-.aria-checked\:bg-emphasis[aria-checked="true"] {
-  background-color: var(--cal-bg-emphasis);
-}
-
-.aria-checked\:bg-default[aria-checked=true] {
-  background-color: var(--cal-bg, white);
-}
-
-.aria-selected\:bg-emphasis[aria-selected="true"] {
-  background-color: var(--cal-bg-emphasis);
-}
-
-.aria-selected\:bg-muted[aria-selected="true"] {
-  background-color: var(--cal-bg-muted);
-}
-
-.aria-selected\:bg-subtle[aria-selected="true"] {
-  background-color: var(--cal-bg-subtle);
-}
-
-.aria-selected\:text-emphasis[aria-selected="true"] {
-  color: var(--cal-text-emphasis);
-}
-
-.aria-selected\:opacity-100[aria-selected="true"] {
-  opacity: 1;
-}
-
-.data-\[disabled\]\:pointer-events-none[data-disabled] {
-  pointer-events: none;
-}
-
-.data-\[state\=checked\]\:translate-x-3[data-state=checked] {
-  --tw-translate-x: var(--cal-spacing-3);
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.data-\[state\=checked\]\:translate-x-5[data-state=checked] {
-  --tw-translate-x: var(--cal-spacing-5);
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.data-\[state\=unchecked\]\:translate-x-0[data-state=unchecked] {
-  --tw-translate-x: var(--cal-spacing-0);
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.data-\[swipe\=cancel\]\:translate-x-0[data-swipe=cancel] {
-  --tw-translate-x: var(--cal-spacing-0);
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.data-\[swipe\=end\]\:translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe=end] {
-  --tw-translate-x: var(--radix-toast-swipe-end-x);
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe=move] {
-  --tw-translate-x: var(--radix-toast-swipe-move-x);
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.data-\[state\=checked\]\:bg-brand-accent[data-state=checked] {
-  background-color: var(--cal-brand-accent, white);
-}
-
-.data-\[state\=checked\]\:bg-brand-default[data-state=checked] {
-  background-color: var(--cal-brand, #111827);
-}
-
-.data-\[state\=selected\]\:bg-subtle[data-state=selected] {
-  background-color: var(--cal-bg-subtle);
-}
-
-.data-\[state\=unchecked\]\:bg-emphasis[data-state=unchecked] {
-  background-color: var(--cal-bg-emphasis);
-}
-
-.data-\[state\=checked\]\:text-brand[data-state=checked] {
-  color: var(--cal-brand-text);
-}
-
-.data-\[disabled\]\:opacity-50[data-disabled] {
-  opacity: 0.5;
-}
-
-.data-\[swipe\=move\]\:transition-none[data-swipe=move] {
-  transition-property: none;
-}
-
-.data-\[state\=open\]\:animate-in[data-state=open] {
-  animation-name: enter;
-  animation-duration: 150ms;
-  --tw-enter-opacity: initial;
-  --tw-enter-scale: initial;
-  --tw-enter-rotate: initial;
-  --tw-enter-translate-x: initial;
-  --tw-enter-translate-y: initial;
-}
-
-.data-\[state\=closed\]\:animate-out[data-state=closed] {
-  animation-name: exit;
-  animation-duration: 150ms;
-  --tw-exit-opacity: initial;
-  --tw-exit-scale: initial;
-  --tw-exit-rotate: initial;
-  --tw-exit-translate-x: initial;
-  --tw-exit-translate-y: initial;
-}
-
-.data-\[swipe\=end\]\:animate-out[data-swipe=end] {
-  animation-name: exit;
-  animation-duration: 150ms;
-  --tw-exit-opacity: initial;
-  --tw-exit-scale: initial;
-  --tw-exit-rotate: initial;
-  --tw-exit-translate-x: initial;
-  --tw-exit-translate-y: initial;
-}
-
-.data-\[state\=closed\]\:fade-out-0[data-state=closed] {
-  --tw-exit-opacity: 0;
-}
-
-.data-\[state\=closed\]\:fade-out-80[data-state=closed] {
-  --tw-exit-opacity: 0.8;
-}
-
-.data-\[state\=open\]\:fade-in-0[data-state=open] {
-  --tw-enter-opacity: 0;
-}
-
-.data-\[state\=closed\]\:zoom-out-95[data-state=closed] {
-  --tw-exit-scale: .95;
-}
-
-.data-\[state\=open\]\:zoom-in-95[data-state=open] {
-  --tw-enter-scale: .95;
-}
-
-.data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom] {
-  --tw-enter-translate-y: -var(--cal-spacing-2);
-}
-
-.data-\[side\=left\]\:slide-in-from-right-2[data-side=left] {
-  --tw-enter-translate-x: var(--cal-spacing-2);
-}
-
-.data-\[side\=right\]\:slide-in-from-left-2[data-side=right] {
-  --tw-enter-translate-x: -var(--cal-spacing-2);
-}
-
-.data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top] {
-  --tw-enter-translate-y: var(--cal-spacing-2);
-}
-
-.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state=closed] {
-  --tw-exit-translate-x: -50%;
-}
-
-.data-\[state\=closed\]\:slide-out-to-right-full[data-state=closed] {
-  --tw-exit-translate-x: 100%;
-}
-
-.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state=closed] {
-  --tw-exit-translate-y: -48%;
-}
-
-.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state=open] {
-  --tw-enter-translate-x: -50%;
-}
-
-.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state=open] {
-  --tw-enter-translate-y: -48%;
-}
-
-.data-\[state\=open\]\:slide-in-from-top-full[data-state=open] {
-  --tw-enter-translate-y: -100%;
-}
-
-.group[data-state=selected] .group-data-\[state\=selected\]\:bg-subtle {
-  background-color: var(--cal-bg-subtle);
-}
-
-html.todesktop .todesktop\:-mt-3 {
-  margin-top: calc(var(--cal-spacing-3) * -1);
-}
-
-html.todesktop .todesktop\:mt-10 {
-  margin-top: var(--cal-spacing-10);
-}
-
-html.todesktop .todesktop\:mt-4 {
-  margin-top: var(--cal-spacing-4);
-}
-
-html.todesktop .todesktop\:block {
-  display: block;
-}
-
-html.todesktop .todesktop\:hidden {
-  display: none;
-}
-
-html.todesktop .todesktop\:flex-col-reverse {
-  flex-direction: column-reverse;
-}
-
-html.todesktop .todesktop\:\!bg-transparent {
-  background-color: transparent !important;
-}
-
-html.todesktop .todesktop\:py-\[7px\] {
-  padding-top: 7px;
-  padding-bottom: 7px;
-}
-
-html.todesktop .todesktop\:\!text-blue-500 {
-  --tw-text-opacity: 1 !important;
-  color: rgb(59 130 246 / var(--tw-text-opacity)) !important;
-}
-
-html.todesktop .todesktop\:\[-webkit-app-region\:drag\] {
-  -webkit-app-region: drag;
-}
-
-.prose-headings\:text-emphasis :is(:where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"] *))) {
-  color: var(--cal-text-emphasis);
-}
-
-.prose-h3\:font-cal :is(:where(h3):not(:where([class~="not-prose"] *))) {
-  font-family: var(--font-cal), ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
-}
-
-.prose-h3\:text-white :is(:where(h3):not(:where([class~="not-prose"] *))) {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
-.prose-a\:text-default :is(:where(a):not(:where([class~="not-prose"] *))) {
-  color: var(--cal-text);
-}
-
-.prose-a\:text-white :is(:where(a):not(:where([class~="not-prose"] *))) {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
-.prose-strong\:text-default :is(:where(strong):not(:where([class~="not-prose"] *))) {
-  color: var(--cal-text);
-}
-
-.prose-code\:text-default :is(:where(code):not(:where([class~="not-prose"] *))) {
-  color: var(--cal-text);
-}
-
-.hover\:-mt-px:hover {
-  margin-top: calc(var(--cal-spacing-px) * -1);
-}
-
-.hover\:cursor-default:hover {
-  cursor: default;
-}
-
-.hover\:cursor-not-allowed:hover {
-  cursor: not-allowed;
-}
-
-.hover\:cursor-pointer:hover {
-  cursor: pointer;
-}
-
-.hover\:rounded-md:hover {
-  border-radius: var(--cal-radius-md);
-}
-
-.hover\:border:hover {
-  border-width: 1px;
-}
-
-.hover\:border-b-2:hover {
-  border-bottom-width: 2px;
-}
-
-.hover\:border-amber-100:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(254 243 199 / var(--tw-border-opacity));
-}
-
-.hover\:border-amber-200:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(253 230 138 / var(--tw-border-opacity));
-}
-
-.hover\:border-amber-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(252 211 77 / var(--tw-border-opacity));
-}
-
-.hover\:border-amber-400:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(251 191 36 / var(--tw-border-opacity));
-}
-
-.hover\:border-amber-50:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 251 235 / var(--tw-border-opacity));
-}
-
-.hover\:border-amber-500:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(245 158 11 / var(--tw-border-opacity));
-}
-
-.hover\:border-amber-600:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(217 119 6 / var(--tw-border-opacity));
-}
-
-.hover\:border-amber-700:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(180 83 9 / var(--tw-border-opacity));
-}
-
-.hover\:border-amber-800:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(146 64 14 / var(--tw-border-opacity));
-}
-
-.hover\:border-amber-900:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(120 53 15 / var(--tw-border-opacity));
-}
-
-.hover\:border-black:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(17 17 17 / var(--tw-border-opacity));
-}
-
-.hover\:border-blue-100:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(219 234 254 / var(--tw-border-opacity));
-}
-
-.hover\:border-blue-200:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(191 219 254 / var(--tw-border-opacity));
-}
-
-.hover\:border-blue-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(147 197 253 / var(--tw-border-opacity));
-}
-
-.hover\:border-blue-400:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(96 165 250 / var(--tw-border-opacity));
-}
-
-.hover\:border-blue-50:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(239 246 255 / var(--tw-border-opacity));
-}
-
-.hover\:border-blue-500:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(59 130 246 / var(--tw-border-opacity));
-}
-
-.hover\:border-blue-600:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(37 99 235 / var(--tw-border-opacity));
-}
-
-.hover\:border-blue-700:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(29 78 216 / var(--tw-border-opacity));
-}
-
-.hover\:border-blue-800:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(30 64 175 / var(--tw-border-opacity));
-}
-
-.hover\:border-blue-900:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(30 58 138 / var(--tw-border-opacity));
-}
-
-.hover\:border-brand-default:hover {
-  border-color: var(--cal-brand, #111827);
-}
-
-.hover\:border-cyan-100:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(207 250 254 / var(--tw-border-opacity));
-}
-
-.hover\:border-cyan-200:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(165 243 252 / var(--tw-border-opacity));
-}
-
-.hover\:border-cyan-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(103 232 249 / var(--tw-border-opacity));
-}
-
-.hover\:border-cyan-400:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(34 211 238 / var(--tw-border-opacity));
-}
-
-.hover\:border-cyan-50:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(236 254 255 / var(--tw-border-opacity));
-}
-
-.hover\:border-cyan-500:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(6 182 212 / var(--tw-border-opacity));
-}
-
-.hover\:border-cyan-600:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(8 145 178 / var(--tw-border-opacity));
-}
-
-.hover\:border-cyan-700:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(14 116 144 / var(--tw-border-opacity));
-}
-
-.hover\:border-cyan-800:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(21 94 117 / var(--tw-border-opacity));
-}
-
-.hover\:border-cyan-900:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(22 78 99 / var(--tw-border-opacity));
-}
-
-.hover\:border-default:hover {
-  border-color: var(--cal-border);
-}
-
-.hover\:border-emerald-100:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(209 250 229 / var(--tw-border-opacity));
-}
-
-.hover\:border-emerald-200:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(167 243 208 / var(--tw-border-opacity));
-}
-
-.hover\:border-emerald-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(110 231 183 / var(--tw-border-opacity));
-}
-
-.hover\:border-emerald-400:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(52 211 153 / var(--tw-border-opacity));
-}
-
-.hover\:border-emerald-50:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(236 253 245 / var(--tw-border-opacity));
-}
-
-.hover\:border-emerald-500:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(16 185 129 / var(--tw-border-opacity));
-}
-
-.hover\:border-emerald-600:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(5 150 105 / var(--tw-border-opacity));
-}
-
-.hover\:border-emerald-700:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(4 120 87 / var(--tw-border-opacity));
-}
-
-.hover\:border-emerald-800:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(6 95 70 / var(--tw-border-opacity));
-}
-
-.hover\:border-emerald-900:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(6 78 59 / var(--tw-border-opacity));
-}
-
-.hover\:border-emphasis:hover {
-  border-color: var(--cal-border-emphasis);
-}
-
-.hover\:border-error:hover {
-  border-color: var(--cal-border-error);
-}
-
-.hover\:border-fuchsia-100:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(250 232 255 / var(--tw-border-opacity));
-}
-
-.hover\:border-fuchsia-200:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(245 208 254 / var(--tw-border-opacity));
-}
-
-.hover\:border-fuchsia-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(240 171 252 / var(--tw-border-opacity));
-}
-
-.hover\:border-fuchsia-400:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(232 121 249 / var(--tw-border-opacity));
-}
-
-.hover\:border-fuchsia-50:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(253 244 255 / var(--tw-border-opacity));
-}
-
-.hover\:border-fuchsia-500:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(217 70 239 / var(--tw-border-opacity));
-}
-
-.hover\:border-fuchsia-600:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(192 38 211 / var(--tw-border-opacity));
-}
-
-.hover\:border-fuchsia-700:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(162 28 175 / var(--tw-border-opacity));
-}
-
-.hover\:border-fuchsia-800:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(134 25 143 / var(--tw-border-opacity));
-}
-
-.hover\:border-fuchsia-900:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(112 26 117 / var(--tw-border-opacity));
-}
-
-.hover\:border-gray-100:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(243 244 246 / var(--tw-border-opacity));
-}
-
-.hover\:border-gray-200:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(229 231 235 / var(--tw-border-opacity));
-}
-
-.hover\:border-gray-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(209 213 219 / var(--tw-border-opacity));
-}
-
-.hover\:border-gray-400:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(156 163 175 / var(--tw-border-opacity));
-}
-
-.hover\:border-gray-50:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(249 250 251 / var(--tw-border-opacity));
-}
-
-.hover\:border-gray-500:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(107 114 128 / var(--tw-border-opacity));
-}
-
-.hover\:border-gray-600:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(75 85 99 / var(--tw-border-opacity));
-}
-
-.hover\:border-gray-700:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(55 65 81 / var(--tw-border-opacity));
-}
-
-.hover\:border-gray-800:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(31 41 55 / var(--tw-border-opacity));
-}
-
-.hover\:border-gray-900:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(17 24 39 / var(--tw-border-opacity));
-}
-
-.hover\:border-green-100:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(220 252 231 / var(--tw-border-opacity));
-}
-
-.hover\:border-green-200:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(187 247 208 / var(--tw-border-opacity));
-}
-
-.hover\:border-green-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(134 239 172 / var(--tw-border-opacity));
-}
-
-.hover\:border-green-400:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(74 222 128 / var(--tw-border-opacity));
-}
-
-.hover\:border-green-50:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(240 253 244 / var(--tw-border-opacity));
-}
-
-.hover\:border-green-500:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(34 197 94 / var(--tw-border-opacity));
-}
-
-.hover\:border-green-600:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(22 163 74 / var(--tw-border-opacity));
-}
-
-.hover\:border-green-700:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(21 128 61 / var(--tw-border-opacity));
-}
-
-.hover\:border-green-800:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(22 101 52 / var(--tw-border-opacity));
-}
-
-.hover\:border-green-900:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(20 83 45 / var(--tw-border-opacity));
-}
-
-.hover\:border-indigo-100:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(224 231 255 / var(--tw-border-opacity));
-}
-
-.hover\:border-indigo-200:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(199 210 254 / var(--tw-border-opacity));
-}
-
-.hover\:border-indigo-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(165 180 252 / var(--tw-border-opacity));
-}
-
-.hover\:border-indigo-400:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(129 140 248 / var(--tw-border-opacity));
-}
-
-.hover\:border-indigo-50:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(238 242 255 / var(--tw-border-opacity));
-}
-
-.hover\:border-indigo-500:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(99 102 241 / var(--tw-border-opacity));
-}
-
-.hover\:border-indigo-600:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(79 70 229 / var(--tw-border-opacity));
-}
-
-.hover\:border-indigo-700:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(67 56 202 / var(--tw-border-opacity));
-}
-
-.hover\:border-indigo-800:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(55 48 163 / var(--tw-border-opacity));
-}
-
-.hover\:border-indigo-900:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(49 46 129 / var(--tw-border-opacity));
-}
-
-.hover\:border-lime-100:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(236 252 203 / var(--tw-border-opacity));
-}
-
-.hover\:border-lime-200:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(217 249 157 / var(--tw-border-opacity));
-}
-
-.hover\:border-lime-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(190 242 100 / var(--tw-border-opacity));
-}
-
-.hover\:border-lime-400:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(163 230 53 / var(--tw-border-opacity));
-}
-
-.hover\:border-lime-50:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(247 254 231 / var(--tw-border-opacity));
-}
-
-.hover\:border-lime-500:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(132 204 22 / var(--tw-border-opacity));
-}
-
-.hover\:border-lime-600:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(101 163 13 / var(--tw-border-opacity));
-}
-
-.hover\:border-lime-700:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(77 124 15 / var(--tw-border-opacity));
-}
-
-.hover\:border-lime-800:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(63 98 18 / var(--tw-border-opacity));
-}
-
-.hover\:border-lime-900:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(54 83 20 / var(--tw-border-opacity));
-}
-
-.hover\:border-neutral-100:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(245 245 245 / var(--tw-border-opacity));
-}
-
-.hover\:border-neutral-200:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(229 229 229 / var(--tw-border-opacity));
-}
-
-.hover\:border-neutral-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(212 212 212 / var(--tw-border-opacity));
-}
-
-.hover\:border-neutral-400:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(163 163 163 / var(--tw-border-opacity));
-}
-
-.hover\:border-neutral-50:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(250 250 250 / var(--tw-border-opacity));
-}
-
-.hover\:border-neutral-500:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(115 115 115 / var(--tw-border-opacity));
-}
-
-.hover\:border-neutral-600:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(82 82 82 / var(--tw-border-opacity));
-}
-
-.hover\:border-neutral-700:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(64 64 64 / var(--tw-border-opacity));
-}
-
-.hover\:border-neutral-800:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(38 38 38 / var(--tw-border-opacity));
-}
-
-.hover\:border-neutral-900:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(23 23 23 / var(--tw-border-opacity));
-}
-
-.hover\:border-orange-100:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 237 213 / var(--tw-border-opacity));
-}
-
-.hover\:border-orange-200:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(254 215 170 / var(--tw-border-opacity));
-}
-
-.hover\:border-orange-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(253 186 116 / var(--tw-border-opacity));
-}
-
-.hover\:border-orange-400:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(251 146 60 / var(--tw-border-opacity));
-}
-
-.hover\:border-orange-50:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 247 237 / var(--tw-border-opacity));
-}
-
-.hover\:border-orange-500:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(249 115 22 / var(--tw-border-opacity));
-}
-
-.hover\:border-orange-600:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(234 88 12 / var(--tw-border-opacity));
-}
-
-.hover\:border-orange-700:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(194 65 12 / var(--tw-border-opacity));
-}
-
-.hover\:border-orange-800:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(154 52 18 / var(--tw-border-opacity));
-}
-
-.hover\:border-orange-900:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(124 45 18 / var(--tw-border-opacity));
-}
-
-.hover\:border-pink-100:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(252 231 243 / var(--tw-border-opacity));
-}
-
-.hover\:border-pink-200:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(251 207 232 / var(--tw-border-opacity));
-}
-
-.hover\:border-pink-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(249 168 212 / var(--tw-border-opacity));
-}
-
-.hover\:border-pink-400:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(244 114 182 / var(--tw-border-opacity));
-}
-
-.hover\:border-pink-50:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(253 242 248 / var(--tw-border-opacity));
-}
-
-.hover\:border-pink-500:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(236 72 153 / var(--tw-border-opacity));
-}
-
-.hover\:border-pink-600:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(219 39 119 / var(--tw-border-opacity));
-}
-
-.hover\:border-pink-700:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(190 24 93 / var(--tw-border-opacity));
-}
-
-.hover\:border-pink-900:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(131 24 67 / var(--tw-border-opacity));
-}
-
-.hover\:border-purple-100:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(243 232 255 / var(--tw-border-opacity));
-}
-
-.hover\:border-purple-200:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(233 213 255 / var(--tw-border-opacity));
-}
-
-.hover\:border-purple-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(216 180 254 / var(--tw-border-opacity));
-}
-
-.hover\:border-purple-400:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(192 132 252 / var(--tw-border-opacity));
-}
-
-.hover\:border-purple-50:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(250 245 255 / var(--tw-border-opacity));
-}
-
-.hover\:border-purple-500:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(168 85 247 / var(--tw-border-opacity));
-}
-
-.hover\:border-purple-600:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(147 51 234 / var(--tw-border-opacity));
-}
-
-.hover\:border-purple-700:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(126 34 206 / var(--tw-border-opacity));
-}
-
-.hover\:border-purple-800:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(107 33 168 / var(--tw-border-opacity));
-}
-
-.hover\:border-purple-900:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(88 28 135 / var(--tw-border-opacity));
-}
-
-.hover\:border-red-100:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(254 226 226 / var(--tw-border-opacity));
-}
-
-.hover\:border-red-200:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(254 202 202 / var(--tw-border-opacity));
-}
-
-.hover\:border-red-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(252 165 165 / var(--tw-border-opacity));
-}
-
-.hover\:border-red-400:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(248 113 113 / var(--tw-border-opacity));
-}
-
-.hover\:border-red-50:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(254 242 242 / var(--tw-border-opacity));
-}
-
-.hover\:border-red-500:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(239 68 68 / var(--tw-border-opacity));
-}
-
-.hover\:border-red-600:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(220 38 38 / var(--tw-border-opacity));
-}
-
-.hover\:border-red-700:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(185 28 28 / var(--tw-border-opacity));
-}
-
-.hover\:border-red-800:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(153 27 27 / var(--tw-border-opacity));
-}
-
-.hover\:border-red-900:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(127 29 29 / var(--tw-border-opacity));
-}
-
-.hover\:border-rose-100:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 228 230 / var(--tw-border-opacity));
-}
-
-.hover\:border-rose-200:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(254 205 211 / var(--tw-border-opacity));
-}
-
-.hover\:border-rose-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(253 164 175 / var(--tw-border-opacity));
-}
-
-.hover\:border-rose-400:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(251 113 133 / var(--tw-border-opacity));
-}
-
-.hover\:border-rose-50:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 241 242 / var(--tw-border-opacity));
-}
-
-.hover\:border-rose-500:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(244 63 94 / var(--tw-border-opacity));
-}
-
-.hover\:border-rose-600:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(225 29 72 / var(--tw-border-opacity));
-}
-
-.hover\:border-rose-700:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(190 18 60 / var(--tw-border-opacity));
-}
-
-.hover\:border-rose-800:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(159 18 57 / var(--tw-border-opacity));
-}
-
-.hover\:border-rose-900:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(136 19 55 / var(--tw-border-opacity));
-}
-
-.hover\:border-sky-100:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(224 242 254 / var(--tw-border-opacity));
-}
-
-.hover\:border-sky-200:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(186 230 253 / var(--tw-border-opacity));
-}
-
-.hover\:border-sky-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(125 211 252 / var(--tw-border-opacity));
-}
-
-.hover\:border-sky-400:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(56 189 248 / var(--tw-border-opacity));
-}
-
-.hover\:border-sky-50:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(240 249 255 / var(--tw-border-opacity));
-}
-
-.hover\:border-sky-500:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(14 165 233 / var(--tw-border-opacity));
-}
-
-.hover\:border-sky-600:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(2 132 199 / var(--tw-border-opacity));
-}
-
-.hover\:border-sky-700:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(3 105 161 / var(--tw-border-opacity));
-}
-
-.hover\:border-sky-800:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(7 89 133 / var(--tw-border-opacity));
-}
-
-.hover\:border-sky-900:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(12 74 110 / var(--tw-border-opacity));
-}
-
-.hover\:border-slate-100:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(241 245 249 / var(--tw-border-opacity));
-}
-
-.hover\:border-slate-200:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(226 232 240 / var(--tw-border-opacity));
-}
-
-.hover\:border-slate-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(203 213 225 / var(--tw-border-opacity));
-}
-
-.hover\:border-slate-400:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(148 163 184 / var(--tw-border-opacity));
-}
-
-.hover\:border-slate-50:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(248 250 252 / var(--tw-border-opacity));
-}
-
-.hover\:border-slate-500:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(100 116 139 / var(--tw-border-opacity));
-}
-
-.hover\:border-slate-600:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(71 85 105 / var(--tw-border-opacity));
-}
-
-.hover\:border-slate-700:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(51 65 85 / var(--tw-border-opacity));
-}
-
-.hover\:border-slate-800:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(30 41 59 / var(--tw-border-opacity));
-}
-
-.hover\:border-slate-900:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(15 23 42 / var(--tw-border-opacity));
-}
-
-.hover\:border-stone-100:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(245 245 244 / var(--tw-border-opacity));
-}
-
-.hover\:border-stone-200:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(231 229 228 / var(--tw-border-opacity));
-}
-
-.hover\:border-stone-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(214 211 209 / var(--tw-border-opacity));
-}
-
-.hover\:border-stone-400:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(168 162 158 / var(--tw-border-opacity));
-}
-
-.hover\:border-stone-50:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(250 250 249 / var(--tw-border-opacity));
-}
-
-.hover\:border-stone-500:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(120 113 108 / var(--tw-border-opacity));
-}
-
-.hover\:border-stone-600:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(87 83 78 / var(--tw-border-opacity));
-}
-
-.hover\:border-stone-700:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(68 64 60 / var(--tw-border-opacity));
-}
-
-.hover\:border-stone-800:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(41 37 36 / var(--tw-border-opacity));
-}
-
-.hover\:border-stone-900:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(28 25 23 / var(--tw-border-opacity));
-}
-
-.hover\:border-teal-100:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(204 251 241 / var(--tw-border-opacity));
-}
-
-.hover\:border-teal-200:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(153 246 228 / var(--tw-border-opacity));
-}
-
-.hover\:border-teal-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(94 234 212 / var(--tw-border-opacity));
-}
-
-.hover\:border-teal-400:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(45 212 191 / var(--tw-border-opacity));
-}
-
-.hover\:border-teal-50:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(240 253 250 / var(--tw-border-opacity));
-}
-
-.hover\:border-teal-500:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(20 184 166 / var(--tw-border-opacity));
-}
-
-.hover\:border-teal-600:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(13 148 136 / var(--tw-border-opacity));
-}
-
-.hover\:border-teal-700:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(15 118 110 / var(--tw-border-opacity));
-}
-
-.hover\:border-teal-800:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(17 94 89 / var(--tw-border-opacity));
-}
-
-.hover\:border-teal-900:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(19 78 74 / var(--tw-border-opacity));
-}
-
-.hover\:border-transparent:hover {
-  border-color: transparent;
-}
-
-.hover\:border-violet-100:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(237 233 254 / var(--tw-border-opacity));
-}
-
-.hover\:border-violet-200:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(221 214 254 / var(--tw-border-opacity));
-}
-
-.hover\:border-violet-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(196 181 253 / var(--tw-border-opacity));
-}
-
-.hover\:border-violet-400:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(167 139 250 / var(--tw-border-opacity));
-}
-
-.hover\:border-violet-50:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(245 243 255 / var(--tw-border-opacity));
-}
-
-.hover\:border-violet-500:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(139 92 246 / var(--tw-border-opacity));
-}
-
-.hover\:border-violet-600:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(124 58 237 / var(--tw-border-opacity));
-}
-
-.hover\:border-violet-700:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(109 40 217 / var(--tw-border-opacity));
-}
-
-.hover\:border-violet-800:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(91 33 182 / var(--tw-border-opacity));
-}
-
-.hover\:border-violet-900:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(76 29 149 / var(--tw-border-opacity));
-}
-
-.hover\:border-white:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 255 255 / var(--tw-border-opacity));
-}
-
-.hover\:border-yellow-100:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(254 249 195 / var(--tw-border-opacity));
-}
-
-.hover\:border-yellow-200:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(254 240 138 / var(--tw-border-opacity));
-}
-
-.hover\:border-yellow-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(253 224 71 / var(--tw-border-opacity));
-}
-
-.hover\:border-yellow-400:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(250 204 21 / var(--tw-border-opacity));
-}
-
-.hover\:border-yellow-50:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(254 252 232 / var(--tw-border-opacity));
-}
-
-.hover\:border-yellow-500:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(234 179 8 / var(--tw-border-opacity));
-}
-
-.hover\:border-yellow-600:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(202 138 4 / var(--tw-border-opacity));
-}
-
-.hover\:border-yellow-700:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(161 98 7 / var(--tw-border-opacity));
-}
-
-.hover\:border-yellow-800:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(133 77 14 / var(--tw-border-opacity));
-}
-
-.hover\:border-yellow-900:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(113 63 18 / var(--tw-border-opacity));
-}
-
-.hover\:border-zinc-100:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(244 244 245 / var(--tw-border-opacity));
-}
-
-.hover\:border-zinc-200:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(228 228 231 / var(--tw-border-opacity));
-}
-
-.hover\:border-zinc-300:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(212 212 216 / var(--tw-border-opacity));
-}
-
-.hover\:border-zinc-400:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(161 161 170 / var(--tw-border-opacity));
-}
-
-.hover\:border-zinc-50:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(250 250 250 / var(--tw-border-opacity));
-}
-
-.hover\:border-zinc-500:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(113 113 122 / var(--tw-border-opacity));
-}
-
-.hover\:border-zinc-600:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(82 82 91 / var(--tw-border-opacity));
-}
-
-.hover\:border-zinc-700:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(63 63 70 / var(--tw-border-opacity));
-}
-
-.hover\:border-zinc-800:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(39 39 42 / var(--tw-border-opacity));
-}
-
-.hover\:border-zinc-900:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(24 24 27 / var(--tw-border-opacity));
-}
-
-.hover\:\!bg-emphasis:hover {
-  background-color: var(--cal-bg-emphasis) !important;
-}
-
-.hover\:\!bg-inverted:hover {
-  background-color: var(--cal-bg-inverted) !important;
-}
-
-.hover\:\!bg-transparent:hover {
-  background-color: transparent !important;
-}
-
-.hover\:bg-amber-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 243 199 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-amber-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(253 230 138 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-amber-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(252 211 77 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-amber-400:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(251 191 36 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-amber-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 251 235 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-amber-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(245 158 11 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-amber-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(217 119 6 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-amber-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(180 83 9 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-amber-800:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(146 64 14 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-amber-900:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(120 53 15 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-attention:hover {
-  background-color: var(--cal-bg-attention);
-}
-
-.hover\:bg-black:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(17 17 17 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-blue-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-blue-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-blue-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(147 197 253 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-blue-400:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(96 165 250 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-blue-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-blue-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-blue-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-blue-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-blue-800:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(30 64 175 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-blue-900:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(30 58 138 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-brand-default:hover {
-  background-color: var(--cal-brand, #111827);
-}
-
-.hover\:bg-brand-emphasis:hover {
-  background-color: var(--cal-brand-emphasis, #101010);
-}
-
-.hover\:bg-cyan-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(207 250 254 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-cyan-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(165 243 252 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-cyan-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(103 232 249 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-cyan-400:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(34 211 238 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-cyan-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(236 254 255 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-cyan-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(6 182 212 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-cyan-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(8 145 178 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-cyan-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(14 116 144 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-cyan-800:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(21 94 117 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-cyan-900:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(22 78 99 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-default:hover {
-  background-color: var(--cal-bg, white);
-}
-
-.hover\:bg-emerald-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(209 250 229 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-emerald-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(167 243 208 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-emerald-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(110 231 183 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-emerald-400:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(52 211 153 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-emerald-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(236 253 245 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-emerald-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(16 185 129 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-emerald-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(5 150 105 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-emerald-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(4 120 87 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-emerald-800:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(6 95 70 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-emerald-900:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(6 78 59 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-emphasis:hover {
-  background-color: var(--cal-bg-emphasis);
-}
-
-.hover\:bg-error:hover {
-  background-color: var(--cal-bg-error);
-}
-
-.hover\:bg-fuchsia-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(250 232 255 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-fuchsia-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(245 208 254 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-fuchsia-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(240 171 252 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-fuchsia-400:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(232 121 249 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-fuchsia-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(253 244 255 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-fuchsia-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(217 70 239 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-fuchsia-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(192 38 211 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-fuchsia-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(162 28 175 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-fuchsia-800:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(134 25 143 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-fuchsia-900:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(112 26 117 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-gray-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-gray-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-gray-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-gray-400:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-gray-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-gray-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(107 114 128 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-gray-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-gray-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(55 65 81 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-gray-800:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-gray-900:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-green-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-green-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(187 247 208 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-green-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(134 239 172 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-green-400:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(74 222 128 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-green-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(240 253 244 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-green-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-green-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-green-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(21 128 61 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-green-800:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(22 101 52 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-green-900:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(20 83 45 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-indigo-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(224 231 255 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-indigo-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(199 210 254 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-indigo-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(165 180 252 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-indigo-400:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(129 140 248 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-indigo-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(238 242 255 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-indigo-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(99 102 241 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-indigo-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-indigo-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(67 56 202 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-indigo-800:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(55 48 163 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-indigo-900:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(49 46 129 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-inverted:hover {
-  background-color: var(--cal-bg-inverted);
-}
-
-.hover\:bg-lime-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(236 252 203 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-lime-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(217 249 157 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-lime-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(190 242 100 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-lime-400:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(163 230 53 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-lime-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(247 254 231 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-lime-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(132 204 22 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-lime-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(101 163 13 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-lime-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(77 124 15 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-lime-800:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(63 98 18 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-lime-900:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(54 83 20 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-muted:hover {
-  background-color: var(--cal-bg-muted);
-}
-
-.hover\:bg-neutral-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-neutral-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(229 229 229 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-neutral-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(212 212 212 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-neutral-400:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(163 163 163 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-neutral-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-neutral-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(115 115 115 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-neutral-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(82 82 82 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-neutral-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(64 64 64 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-neutral-800:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-neutral-900:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(23 23 23 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-orange-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 237 213 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-orange-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 215 170 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-orange-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(253 186 116 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-orange-400:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(251 146 60 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-orange-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 247 237 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-orange-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 115 22 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-orange-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(234 88 12 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-orange-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(194 65 12 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-orange-800:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(154 52 18 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-orange-900:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(124 45 18 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-pink-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(252 231 243 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-pink-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(251 207 232 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-pink-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 168 212 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-pink-400:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(244 114 182 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-pink-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(253 242 248 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-pink-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(236 72 153 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-pink-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(219 39 119 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-pink-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(190 24 93 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-pink-900:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(131 24 67 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-purple-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 232 255 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-purple-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(233 213 255 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-purple-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(216 180 254 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-purple-400:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(192 132 252 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-purple-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(250 245 255 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-purple-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(168 85 247 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-purple-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(147 51 234 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-purple-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(126 34 206 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-purple-800:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(107 33 168 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-purple-900:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(88 28 135 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-red-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-red-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-red-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(252 165 165 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-red-400:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-red-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-red-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-red-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-red-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-red-800:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(153 27 27 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-red-900:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(127 29 29 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-rose-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 228 230 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-rose-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 205 211 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-rose-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(253 164 175 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-rose-400:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(251 113 133 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-rose-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 241 242 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-rose-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(244 63 94 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-rose-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(225 29 72 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-rose-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(190 18 60 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-rose-800:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(159 18 57 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-rose-900:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(136 19 55 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-sky-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(224 242 254 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-sky-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(186 230 253 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-sky-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(125 211 252 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-sky-400:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(56 189 248 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-sky-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(240 249 255 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-sky-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(14 165 233 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-sky-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(2 132 199 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-sky-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(3 105 161 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-sky-800:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(7 89 133 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-sky-900:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(12 74 110 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-slate-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-slate-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(226 232 240 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-slate-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(203 213 225 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-slate-400:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(148 163 184 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-slate-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-slate-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(100 116 139 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-slate-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(71 85 105 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-slate-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(51 65 85 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-slate-800:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(30 41 59 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-slate-900:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(15 23 42 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-stone-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(245 245 244 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-stone-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(231 229 228 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-stone-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(214 211 209 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-stone-400:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(168 162 158 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-stone-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(250 250 249 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-stone-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(120 113 108 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-stone-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(87 83 78 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-stone-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(68 64 60 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-stone-800:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(41 37 36 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-stone-900:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(28 25 23 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-subtle:hover {
-  background-color: var(--cal-bg-subtle);
-}
-
-.hover\:bg-success:hover {
-  background-color: var(--cal-bg-success);
-}
-
-.hover\:bg-teal-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(204 251 241 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-teal-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(153 246 228 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-teal-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(94 234 212 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-teal-400:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(45 212 191 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-teal-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(240 253 250 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-teal-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(20 184 166 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-teal-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(13 148 136 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-teal-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(15 118 110 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-teal-800:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(17 94 89 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-teal-900:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(19 78 74 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-transparent:hover {
-  background-color: transparent;
-}
-
-.hover\:bg-violet-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(237 233 254 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-violet-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(221 214 254 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-violet-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(196 181 253 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-violet-400:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(167 139 250 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-violet-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(245 243 255 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-violet-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(139 92 246 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-violet-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(124 58 237 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-violet-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(109 40 217 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-violet-800:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(91 33 182 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-violet-900:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(76 29 149 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-white:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-yellow-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-yellow-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 240 138 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-yellow-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(253 224 71 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-yellow-400:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(250 204 21 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-yellow-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 252 232 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-yellow-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-yellow-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(202 138 4 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-yellow-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(161 98 7 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-yellow-800:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(133 77 14 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-yellow-900:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(113 63 18 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-zinc-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(244 244 245 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-zinc-200:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(228 228 231 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-zinc-300:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(212 212 216 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-zinc-400:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(161 161 170 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-zinc-50:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(250 250 250 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-zinc-500:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(113 113 122 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-zinc-600:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(82 82 91 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-zinc-700:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(63 63 70 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-zinc-800:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(39 39 42 / var(--tw-bg-opacity));
-}
-
-.hover\:bg-zinc-900:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(24 24 27 / var(--tw-bg-opacity));
-}
-
-.hover\:font-normal:hover {
-  font-weight: 400;
-}
-
-.hover\:\!text-inverted:hover {
-  color: var(--cal-text-inverted) !important;
-}
-
-.hover\:text-amber-100:hover {
-  --tw-text-opacity: 1;
-  color: rgb(254 243 199 / var(--tw-text-opacity));
-}
-
-.hover\:text-amber-200:hover {
-  --tw-text-opacity: 1;
-  color: rgb(253 230 138 / var(--tw-text-opacity));
-}
-
-.hover\:text-amber-300:hover {
-  --tw-text-opacity: 1;
-  color: rgb(252 211 77 / var(--tw-text-opacity));
-}
-
-.hover\:text-amber-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(251 191 36 / var(--tw-text-opacity));
-}
-
-.hover\:text-amber-50:hover {
-  --tw-text-opacity: 1;
-  color: rgb(255 251 235 / var(--tw-text-opacity));
-}
-
-.hover\:text-amber-500:hover {
-  --tw-text-opacity: 1;
-  color: rgb(245 158 11 / var(--tw-text-opacity));
-}
-
-.hover\:text-amber-600:hover {
-  --tw-text-opacity: 1;
-  color: rgb(217 119 6 / var(--tw-text-opacity));
-}
-
-.hover\:text-amber-700:hover {
-  --tw-text-opacity: 1;
-  color: rgb(180 83 9 / var(--tw-text-opacity));
-}
-
-.hover\:text-amber-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(146 64 14 / var(--tw-text-opacity));
-}
-
-.hover\:text-amber-900:hover {
-  --tw-text-opacity: 1;
-  color: rgb(120 53 15 / var(--tw-text-opacity));
-}
-
-.hover\:text-attention:hover {
-  color: var(--cal-text-attention);
-}
-
-.hover\:text-black:hover {
-  --tw-text-opacity: 1;
-  color: rgb(17 17 17 / var(--tw-text-opacity));
-}
-
-.hover\:text-blue-100:hover {
-  --tw-text-opacity: 1;
-  color: rgb(219 234 254 / var(--tw-text-opacity));
-}
-
-.hover\:text-blue-200:hover {
-  --tw-text-opacity: 1;
-  color: rgb(191 219 254 / var(--tw-text-opacity));
-}
-
-.hover\:text-blue-300:hover {
-  --tw-text-opacity: 1;
-  color: rgb(147 197 253 / var(--tw-text-opacity));
-}
-
-.hover\:text-blue-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(96 165 250 / var(--tw-text-opacity));
-}
-
-.hover\:text-blue-50:hover {
-  --tw-text-opacity: 1;
-  color: rgb(239 246 255 / var(--tw-text-opacity));
-}
-
-.hover\:text-blue-500:hover {
-  --tw-text-opacity: 1;
-  color: rgb(59 130 246 / var(--tw-text-opacity));
-}
-
-.hover\:text-blue-600:hover {
-  --tw-text-opacity: 1;
-  color: rgb(37 99 235 / var(--tw-text-opacity));
-}
-
-.hover\:text-blue-700:hover {
-  --tw-text-opacity: 1;
-  color: rgb(29 78 216 / var(--tw-text-opacity));
-}
-
-.hover\:text-blue-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(30 64 175 / var(--tw-text-opacity));
-}
-
-.hover\:text-blue-900:hover {
-  --tw-text-opacity: 1;
-  color: rgb(30 58 138 / var(--tw-text-opacity));
-}
-
-.hover\:text-cyan-100:hover {
-  --tw-text-opacity: 1;
-  color: rgb(207 250 254 / var(--tw-text-opacity));
-}
-
-.hover\:text-cyan-200:hover {
-  --tw-text-opacity: 1;
-  color: rgb(165 243 252 / var(--tw-text-opacity));
-}
-
-.hover\:text-cyan-300:hover {
-  --tw-text-opacity: 1;
-  color: rgb(103 232 249 / var(--tw-text-opacity));
-}
-
-.hover\:text-cyan-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(34 211 238 / var(--tw-text-opacity));
-}
-
-.hover\:text-cyan-50:hover {
-  --tw-text-opacity: 1;
-  color: rgb(236 254 255 / var(--tw-text-opacity));
-}
-
-.hover\:text-cyan-500:hover {
-  --tw-text-opacity: 1;
-  color: rgb(6 182 212 / var(--tw-text-opacity));
-}
-
-.hover\:text-cyan-600:hover {
-  --tw-text-opacity: 1;
-  color: rgb(8 145 178 / var(--tw-text-opacity));
-}
-
-.hover\:text-cyan-700:hover {
-  --tw-text-opacity: 1;
-  color: rgb(14 116 144 / var(--tw-text-opacity));
-}
-
-.hover\:text-cyan-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(21 94 117 / var(--tw-text-opacity));
-}
-
-.hover\:text-cyan-900:hover {
-  --tw-text-opacity: 1;
-  color: rgb(22 78 99 / var(--tw-text-opacity));
-}
-
-.hover\:text-default:hover {
-  color: var(--cal-text);
-}
-
-.hover\:text-emerald-100:hover {
-  --tw-text-opacity: 1;
-  color: rgb(209 250 229 / var(--tw-text-opacity));
-}
-
-.hover\:text-emerald-200:hover {
-  --tw-text-opacity: 1;
-  color: rgb(167 243 208 / var(--tw-text-opacity));
-}
-
-.hover\:text-emerald-300:hover {
-  --tw-text-opacity: 1;
-  color: rgb(110 231 183 / var(--tw-text-opacity));
-}
-
-.hover\:text-emerald-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(52 211 153 / var(--tw-text-opacity));
-}
-
-.hover\:text-emerald-50:hover {
-  --tw-text-opacity: 1;
-  color: rgb(236 253 245 / var(--tw-text-opacity));
-}
-
-.hover\:text-emerald-500:hover {
-  --tw-text-opacity: 1;
-  color: rgb(16 185 129 / var(--tw-text-opacity));
-}
-
-.hover\:text-emerald-600:hover {
-  --tw-text-opacity: 1;
-  color: rgb(5 150 105 / var(--tw-text-opacity));
-}
-
-.hover\:text-emerald-700:hover {
-  --tw-text-opacity: 1;
-  color: rgb(4 120 87 / var(--tw-text-opacity));
-}
-
-.hover\:text-emerald-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(6 95 70 / var(--tw-text-opacity));
-}
-
-.hover\:text-emerald-900:hover {
-  --tw-text-opacity: 1;
-  color: rgb(6 78 59 / var(--tw-text-opacity));
-}
-
-.hover\:text-emphasis:hover {
-  color: var(--cal-text-emphasis);
-}
-
-.hover\:text-error:hover {
-  color: var(--cal-text-error);
-}
-
-.hover\:text-fuchsia-100:hover {
-  --tw-text-opacity: 1;
-  color: rgb(250 232 255 / var(--tw-text-opacity));
-}
-
-.hover\:text-fuchsia-200:hover {
-  --tw-text-opacity: 1;
-  color: rgb(245 208 254 / var(--tw-text-opacity));
-}
-
-.hover\:text-fuchsia-300:hover {
-  --tw-text-opacity: 1;
-  color: rgb(240 171 252 / var(--tw-text-opacity));
-}
-
-.hover\:text-fuchsia-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(232 121 249 / var(--tw-text-opacity));
-}
-
-.hover\:text-fuchsia-50:hover {
-  --tw-text-opacity: 1;
-  color: rgb(253 244 255 / var(--tw-text-opacity));
-}
-
-.hover\:text-fuchsia-500:hover {
-  --tw-text-opacity: 1;
-  color: rgb(217 70 239 / var(--tw-text-opacity));
-}
-
-.hover\:text-fuchsia-600:hover {
-  --tw-text-opacity: 1;
-  color: rgb(192 38 211 / var(--tw-text-opacity));
-}
-
-.hover\:text-fuchsia-700:hover {
-  --tw-text-opacity: 1;
-  color: rgb(162 28 175 / var(--tw-text-opacity));
-}
-
-.hover\:text-fuchsia-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(134 25 143 / var(--tw-text-opacity));
-}
-
-.hover\:text-fuchsia-900:hover {
-  --tw-text-opacity: 1;
-  color: rgb(112 26 117 / var(--tw-text-opacity));
-}
-
-.hover\:text-gray-100:hover {
-  --tw-text-opacity: 1;
-  color: rgb(243 244 246 / var(--tw-text-opacity));
-}
-
-.hover\:text-gray-200:hover {
-  --tw-text-opacity: 1;
-  color: rgb(229 231 235 / var(--tw-text-opacity));
-}
-
-.hover\:text-gray-300:hover {
-  --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity));
-}
-
-.hover\:text-gray-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity));
-}
-
-.hover\:text-gray-50:hover {
-  --tw-text-opacity: 1;
-  color: rgb(249 250 251 / var(--tw-text-opacity));
-}
-
-.hover\:text-gray-500:hover {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-}
-
-.hover\:text-gray-600:hover {
-  --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity));
-}
-
-.hover\:text-gray-700:hover {
-  --tw-text-opacity: 1;
-  color: rgb(55 65 81 / var(--tw-text-opacity));
-}
-
-.hover\:text-gray-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(31 41 55 / var(--tw-text-opacity));
-}
-
-.hover\:text-gray-900:hover {
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity));
-}
-
-.hover\:text-green-100:hover {
-  --tw-text-opacity: 1;
-  color: rgb(220 252 231 / var(--tw-text-opacity));
-}
-
-.hover\:text-green-200:hover {
-  --tw-text-opacity: 1;
-  color: rgb(187 247 208 / var(--tw-text-opacity));
-}
-
-.hover\:text-green-300:hover {
-  --tw-text-opacity: 1;
-  color: rgb(134 239 172 / var(--tw-text-opacity));
-}
-
-.hover\:text-green-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(74 222 128 / var(--tw-text-opacity));
-}
-
-.hover\:text-green-50:hover {
-  --tw-text-opacity: 1;
-  color: rgb(240 253 244 / var(--tw-text-opacity));
-}
-
-.hover\:text-green-500:hover {
-  --tw-text-opacity: 1;
-  color: rgb(34 197 94 / var(--tw-text-opacity));
-}
-
-.hover\:text-green-600:hover {
-  --tw-text-opacity: 1;
-  color: rgb(22 163 74 / var(--tw-text-opacity));
-}
-
-.hover\:text-green-700:hover {
-  --tw-text-opacity: 1;
-  color: rgb(21 128 61 / var(--tw-text-opacity));
-}
-
-.hover\:text-green-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(22 101 52 / var(--tw-text-opacity));
-}
-
-.hover\:text-green-900:hover {
-  --tw-text-opacity: 1;
-  color: rgb(20 83 45 / var(--tw-text-opacity));
-}
-
-.hover\:text-indigo-100:hover {
-  --tw-text-opacity: 1;
-  color: rgb(224 231 255 / var(--tw-text-opacity));
-}
-
-.hover\:text-indigo-200:hover {
-  --tw-text-opacity: 1;
-  color: rgb(199 210 254 / var(--tw-text-opacity));
-}
-
-.hover\:text-indigo-300:hover {
-  --tw-text-opacity: 1;
-  color: rgb(165 180 252 / var(--tw-text-opacity));
-}
-
-.hover\:text-indigo-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(129 140 248 / var(--tw-text-opacity));
-}
-
-.hover\:text-indigo-50:hover {
-  --tw-text-opacity: 1;
-  color: rgb(238 242 255 / var(--tw-text-opacity));
-}
-
-.hover\:text-indigo-500:hover {
-  --tw-text-opacity: 1;
-  color: rgb(99 102 241 / var(--tw-text-opacity));
-}
-
-.hover\:text-indigo-600:hover {
-  --tw-text-opacity: 1;
-  color: rgb(79 70 229 / var(--tw-text-opacity));
-}
-
-.hover\:text-indigo-700:hover {
-  --tw-text-opacity: 1;
-  color: rgb(67 56 202 / var(--tw-text-opacity));
-}
-
-.hover\:text-indigo-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(55 48 163 / var(--tw-text-opacity));
-}
-
-.hover\:text-indigo-900:hover {
-  --tw-text-opacity: 1;
-  color: rgb(49 46 129 / var(--tw-text-opacity));
-}
-
-.hover\:text-lime-100:hover {
-  --tw-text-opacity: 1;
-  color: rgb(236 252 203 / var(--tw-text-opacity));
-}
-
-.hover\:text-lime-200:hover {
-  --tw-text-opacity: 1;
-  color: rgb(217 249 157 / var(--tw-text-opacity));
-}
-
-.hover\:text-lime-300:hover {
-  --tw-text-opacity: 1;
-  color: rgb(190 242 100 / var(--tw-text-opacity));
-}
-
-.hover\:text-lime-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(163 230 53 / var(--tw-text-opacity));
-}
-
-.hover\:text-lime-50:hover {
-  --tw-text-opacity: 1;
-  color: rgb(247 254 231 / var(--tw-text-opacity));
-}
-
-.hover\:text-lime-500:hover {
-  --tw-text-opacity: 1;
-  color: rgb(132 204 22 / var(--tw-text-opacity));
-}
-
-.hover\:text-lime-600:hover {
-  --tw-text-opacity: 1;
-  color: rgb(101 163 13 / var(--tw-text-opacity));
-}
-
-.hover\:text-lime-700:hover {
-  --tw-text-opacity: 1;
-  color: rgb(77 124 15 / var(--tw-text-opacity));
-}
-
-.hover\:text-lime-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(63 98 18 / var(--tw-text-opacity));
-}
-
-.hover\:text-lime-900:hover {
-  --tw-text-opacity: 1;
-  color: rgb(54 83 20 / var(--tw-text-opacity));
-}
-
-.hover\:text-neutral-100:hover {
-  --tw-text-opacity: 1;
-  color: rgb(245 245 245 / var(--tw-text-opacity));
-}
-
-.hover\:text-neutral-200:hover {
-  --tw-text-opacity: 1;
-  color: rgb(229 229 229 / var(--tw-text-opacity));
-}
-
-.hover\:text-neutral-300:hover {
-  --tw-text-opacity: 1;
-  color: rgb(212 212 212 / var(--tw-text-opacity));
-}
-
-.hover\:text-neutral-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(163 163 163 / var(--tw-text-opacity));
-}
-
-.hover\:text-neutral-50:hover {
-  --tw-text-opacity: 1;
-  color: rgb(250 250 250 / var(--tw-text-opacity));
-}
-
-.hover\:text-neutral-500:hover {
-  --tw-text-opacity: 1;
-  color: rgb(115 115 115 / var(--tw-text-opacity));
-}
-
-.hover\:text-neutral-600:hover {
-  --tw-text-opacity: 1;
-  color: rgb(82 82 82 / var(--tw-text-opacity));
-}
-
-.hover\:text-neutral-700:hover {
-  --tw-text-opacity: 1;
-  color: rgb(64 64 64 / var(--tw-text-opacity));
-}
-
-.hover\:text-neutral-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(38 38 38 / var(--tw-text-opacity));
-}
-
-.hover\:text-neutral-900:hover {
-  --tw-text-opacity: 1;
-  color: rgb(23 23 23 / var(--tw-text-opacity));
-}
-
-.hover\:text-orange-100:hover {
-  --tw-text-opacity: 1;
-  color: rgb(255 237 213 / var(--tw-text-opacity));
-}
-
-.hover\:text-orange-200:hover {
-  --tw-text-opacity: 1;
-  color: rgb(254 215 170 / var(--tw-text-opacity));
-}
-
-.hover\:text-orange-300:hover {
-  --tw-text-opacity: 1;
-  color: rgb(253 186 116 / var(--tw-text-opacity));
-}
-
-.hover\:text-orange-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(251 146 60 / var(--tw-text-opacity));
-}
-
-.hover\:text-orange-50:hover {
-  --tw-text-opacity: 1;
-  color: rgb(255 247 237 / var(--tw-text-opacity));
-}
-
-.hover\:text-orange-500:hover {
-  --tw-text-opacity: 1;
-  color: rgb(249 115 22 / var(--tw-text-opacity));
-}
-
-.hover\:text-orange-600:hover {
-  --tw-text-opacity: 1;
-  color: rgb(234 88 12 / var(--tw-text-opacity));
-}
-
-.hover\:text-orange-700:hover {
-  --tw-text-opacity: 1;
-  color: rgb(194 65 12 / var(--tw-text-opacity));
-}
-
-.hover\:text-orange-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(154 52 18 / var(--tw-text-opacity));
-}
-
-.hover\:text-orange-900:hover {
-  --tw-text-opacity: 1;
-  color: rgb(124 45 18 / var(--tw-text-opacity));
-}
-
-.hover\:text-pink-100:hover {
-  --tw-text-opacity: 1;
-  color: rgb(252 231 243 / var(--tw-text-opacity));
-}
-
-.hover\:text-pink-200:hover {
-  --tw-text-opacity: 1;
-  color: rgb(251 207 232 / var(--tw-text-opacity));
-}
-
-.hover\:text-pink-300:hover {
-  --tw-text-opacity: 1;
-  color: rgb(249 168 212 / var(--tw-text-opacity));
-}
-
-.hover\:text-pink-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(244 114 182 / var(--tw-text-opacity));
-}
-
-.hover\:text-pink-50:hover {
-  --tw-text-opacity: 1;
-  color: rgb(253 242 248 / var(--tw-text-opacity));
-}
-
-.hover\:text-pink-500:hover {
-  --tw-text-opacity: 1;
-  color: rgb(236 72 153 / var(--tw-text-opacity));
-}
-
-.hover\:text-pink-600:hover {
-  --tw-text-opacity: 1;
-  color: rgb(219 39 119 / var(--tw-text-opacity));
-}
-
-.hover\:text-pink-700:hover {
-  --tw-text-opacity: 1;
-  color: rgb(190 24 93 / var(--tw-text-opacity));
-}
-
-.hover\:text-pink-900:hover {
-  --tw-text-opacity: 1;
-  color: rgb(131 24 67 / var(--tw-text-opacity));
-}
-
-.hover\:text-purple-100:hover {
-  --tw-text-opacity: 1;
-  color: rgb(243 232 255 / var(--tw-text-opacity));
-}
-
-.hover\:text-purple-200:hover {
-  --tw-text-opacity: 1;
-  color: rgb(233 213 255 / var(--tw-text-opacity));
-}
-
-.hover\:text-purple-300:hover {
-  --tw-text-opacity: 1;
-  color: rgb(216 180 254 / var(--tw-text-opacity));
-}
-
-.hover\:text-purple-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(192 132 252 / var(--tw-text-opacity));
-}
-
-.hover\:text-purple-50:hover {
-  --tw-text-opacity: 1;
-  color: rgb(250 245 255 / var(--tw-text-opacity));
-}
-
-.hover\:text-purple-500:hover {
-  --tw-text-opacity: 1;
-  color: rgb(168 85 247 / var(--tw-text-opacity));
-}
-
-.hover\:text-purple-600:hover {
-  --tw-text-opacity: 1;
-  color: rgb(147 51 234 / var(--tw-text-opacity));
-}
-
-.hover\:text-purple-700:hover {
-  --tw-text-opacity: 1;
-  color: rgb(126 34 206 / var(--tw-text-opacity));
-}
-
-.hover\:text-purple-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(107 33 168 / var(--tw-text-opacity));
-}
-
-.hover\:text-purple-900:hover {
-  --tw-text-opacity: 1;
-  color: rgb(88 28 135 / var(--tw-text-opacity));
-}
-
-.hover\:text-red-100:hover {
-  --tw-text-opacity: 1;
-  color: rgb(254 226 226 / var(--tw-text-opacity));
-}
-
-.hover\:text-red-200:hover {
-  --tw-text-opacity: 1;
-  color: rgb(254 202 202 / var(--tw-text-opacity));
-}
-
-.hover\:text-red-300:hover {
-  --tw-text-opacity: 1;
-  color: rgb(252 165 165 / var(--tw-text-opacity));
-}
-
-.hover\:text-red-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(248 113 113 / var(--tw-text-opacity));
-}
-
-.hover\:text-red-50:hover {
-  --tw-text-opacity: 1;
-  color: rgb(254 242 242 / var(--tw-text-opacity));
-}
-
-.hover\:text-red-500:hover {
-  --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity));
-}
-
-.hover\:text-red-600:hover {
-  --tw-text-opacity: 1;
-  color: rgb(220 38 38 / var(--tw-text-opacity));
-}
-
-.hover\:text-red-700:hover {
-  --tw-text-opacity: 1;
-  color: rgb(185 28 28 / var(--tw-text-opacity));
-}
-
-.hover\:text-red-700\/30:hover {
-  color: rgb(185 28 28 / 0.3);
-}
-
-.hover\:text-red-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(153 27 27 / var(--tw-text-opacity));
-}
-
-.hover\:text-red-900:hover {
-  --tw-text-opacity: 1;
-  color: rgb(127 29 29 / var(--tw-text-opacity));
-}
-
-.hover\:text-rose-100:hover {
-  --tw-text-opacity: 1;
-  color: rgb(255 228 230 / var(--tw-text-opacity));
-}
-
-.hover\:text-rose-200:hover {
-  --tw-text-opacity: 1;
-  color: rgb(254 205 211 / var(--tw-text-opacity));
-}
-
-.hover\:text-rose-300:hover {
-  --tw-text-opacity: 1;
-  color: rgb(253 164 175 / var(--tw-text-opacity));
-}
-
-.hover\:text-rose-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(251 113 133 / var(--tw-text-opacity));
-}
-
-.hover\:text-rose-50:hover {
-  --tw-text-opacity: 1;
-  color: rgb(255 241 242 / var(--tw-text-opacity));
-}
-
-.hover\:text-rose-500:hover {
-  --tw-text-opacity: 1;
-  color: rgb(244 63 94 / var(--tw-text-opacity));
-}
-
-.hover\:text-rose-600:hover {
-  --tw-text-opacity: 1;
-  color: rgb(225 29 72 / var(--tw-text-opacity));
-}
-
-.hover\:text-rose-700:hover {
-  --tw-text-opacity: 1;
-  color: rgb(190 18 60 / var(--tw-text-opacity));
-}
-
-.hover\:text-rose-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(159 18 57 / var(--tw-text-opacity));
-}
-
-.hover\:text-rose-900:hover {
-  --tw-text-opacity: 1;
-  color: rgb(136 19 55 / var(--tw-text-opacity));
-}
-
-.hover\:text-sky-100:hover {
-  --tw-text-opacity: 1;
-  color: rgb(224 242 254 / var(--tw-text-opacity));
-}
-
-.hover\:text-sky-200:hover {
-  --tw-text-opacity: 1;
-  color: rgb(186 230 253 / var(--tw-text-opacity));
-}
-
-.hover\:text-sky-300:hover {
-  --tw-text-opacity: 1;
-  color: rgb(125 211 252 / var(--tw-text-opacity));
-}
-
-.hover\:text-sky-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(56 189 248 / var(--tw-text-opacity));
-}
-
-.hover\:text-sky-50:hover {
-  --tw-text-opacity: 1;
-  color: rgb(240 249 255 / var(--tw-text-opacity));
-}
-
-.hover\:text-sky-500:hover {
-  --tw-text-opacity: 1;
-  color: rgb(14 165 233 / var(--tw-text-opacity));
-}
-
-.hover\:text-sky-600:hover {
-  --tw-text-opacity: 1;
-  color: rgb(2 132 199 / var(--tw-text-opacity));
-}
-
-.hover\:text-sky-700:hover {
-  --tw-text-opacity: 1;
-  color: rgb(3 105 161 / var(--tw-text-opacity));
-}
-
-.hover\:text-sky-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(7 89 133 / var(--tw-text-opacity));
-}
-
-.hover\:text-sky-900:hover {
-  --tw-text-opacity: 1;
-  color: rgb(12 74 110 / var(--tw-text-opacity));
-}
-
-.hover\:text-slate-100:hover {
-  --tw-text-opacity: 1;
-  color: rgb(241 245 249 / var(--tw-text-opacity));
-}
-
-.hover\:text-slate-200:hover {
-  --tw-text-opacity: 1;
-  color: rgb(226 232 240 / var(--tw-text-opacity));
-}
-
-.hover\:text-slate-300:hover {
-  --tw-text-opacity: 1;
-  color: rgb(203 213 225 / var(--tw-text-opacity));
-}
-
-.hover\:text-slate-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(148 163 184 / var(--tw-text-opacity));
-}
-
-.hover\:text-slate-50:hover {
-  --tw-text-opacity: 1;
-  color: rgb(248 250 252 / var(--tw-text-opacity));
-}
-
-.hover\:text-slate-500:hover {
-  --tw-text-opacity: 1;
-  color: rgb(100 116 139 / var(--tw-text-opacity));
-}
-
-.hover\:text-slate-600:hover {
-  --tw-text-opacity: 1;
-  color: rgb(71 85 105 / var(--tw-text-opacity));
-}
-
-.hover\:text-slate-700:hover {
-  --tw-text-opacity: 1;
-  color: rgb(51 65 85 / var(--tw-text-opacity));
-}
-
-.hover\:text-slate-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(30 41 59 / var(--tw-text-opacity));
-}
-
-.hover\:text-slate-900:hover {
-  --tw-text-opacity: 1;
-  color: rgb(15 23 42 / var(--tw-text-opacity));
-}
-
-.hover\:text-stone-100:hover {
-  --tw-text-opacity: 1;
-  color: rgb(245 245 244 / var(--tw-text-opacity));
-}
-
-.hover\:text-stone-200:hover {
-  --tw-text-opacity: 1;
-  color: rgb(231 229 228 / var(--tw-text-opacity));
-}
-
-.hover\:text-stone-300:hover {
-  --tw-text-opacity: 1;
-  color: rgb(214 211 209 / var(--tw-text-opacity));
-}
-
-.hover\:text-stone-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(168 162 158 / var(--tw-text-opacity));
-}
-
-.hover\:text-stone-50:hover {
-  --tw-text-opacity: 1;
-  color: rgb(250 250 249 / var(--tw-text-opacity));
-}
-
-.hover\:text-stone-500:hover {
-  --tw-text-opacity: 1;
-  color: rgb(120 113 108 / var(--tw-text-opacity));
-}
-
-.hover\:text-stone-600:hover {
-  --tw-text-opacity: 1;
-  color: rgb(87 83 78 / var(--tw-text-opacity));
-}
-
-.hover\:text-stone-700:hover {
-  --tw-text-opacity: 1;
-  color: rgb(68 64 60 / var(--tw-text-opacity));
-}
-
-.hover\:text-stone-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(41 37 36 / var(--tw-text-opacity));
-}
-
-.hover\:text-stone-900:hover {
-  --tw-text-opacity: 1;
-  color: rgb(28 25 23 / var(--tw-text-opacity));
-}
-
-.hover\:text-subtle:hover {
-  color: var(--cal-text-subtle);
-}
-
-.hover\:text-teal-100:hover {
-  --tw-text-opacity: 1;
-  color: rgb(204 251 241 / var(--tw-text-opacity));
-}
-
-.hover\:text-teal-200:hover {
-  --tw-text-opacity: 1;
-  color: rgb(153 246 228 / var(--tw-text-opacity));
-}
-
-.hover\:text-teal-300:hover {
-  --tw-text-opacity: 1;
-  color: rgb(94 234 212 / var(--tw-text-opacity));
-}
-
-.hover\:text-teal-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(45 212 191 / var(--tw-text-opacity));
-}
-
-.hover\:text-teal-50:hover {
-  --tw-text-opacity: 1;
-  color: rgb(240 253 250 / var(--tw-text-opacity));
-}
-
-.hover\:text-teal-500:hover {
-  --tw-text-opacity: 1;
-  color: rgb(20 184 166 / var(--tw-text-opacity));
-}
-
-.hover\:text-teal-600:hover {
-  --tw-text-opacity: 1;
-  color: rgb(13 148 136 / var(--tw-text-opacity));
-}
-
-.hover\:text-teal-700:hover {
-  --tw-text-opacity: 1;
-  color: rgb(15 118 110 / var(--tw-text-opacity));
-}
-
-.hover\:text-teal-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(17 94 89 / var(--tw-text-opacity));
-}
-
-.hover\:text-teal-900:hover {
-  --tw-text-opacity: 1;
-  color: rgb(19 78 74 / var(--tw-text-opacity));
-}
-
-.hover\:text-transparent:hover {
-  color: transparent;
-}
-
-.hover\:text-violet-100:hover {
-  --tw-text-opacity: 1;
-  color: rgb(237 233 254 / var(--tw-text-opacity));
-}
-
-.hover\:text-violet-200:hover {
-  --tw-text-opacity: 1;
-  color: rgb(221 214 254 / var(--tw-text-opacity));
-}
-
-.hover\:text-violet-300:hover {
-  --tw-text-opacity: 1;
-  color: rgb(196 181 253 / var(--tw-text-opacity));
-}
-
-.hover\:text-violet-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(167 139 250 / var(--tw-text-opacity));
-}
-
-.hover\:text-violet-50:hover {
-  --tw-text-opacity: 1;
-  color: rgb(245 243 255 / var(--tw-text-opacity));
-}
-
-.hover\:text-violet-500:hover {
-  --tw-text-opacity: 1;
-  color: rgb(139 92 246 / var(--tw-text-opacity));
-}
-
-.hover\:text-violet-600:hover {
-  --tw-text-opacity: 1;
-  color: rgb(124 58 237 / var(--tw-text-opacity));
-}
-
-.hover\:text-violet-700:hover {
-  --tw-text-opacity: 1;
-  color: rgb(109 40 217 / var(--tw-text-opacity));
-}
-
-.hover\:text-violet-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(91 33 182 / var(--tw-text-opacity));
-}
-
-.hover\:text-violet-900:hover {
-  --tw-text-opacity: 1;
-  color: rgb(76 29 149 / var(--tw-text-opacity));
-}
-
-.hover\:text-white:hover {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
-.hover\:text-yellow-100:hover {
-  --tw-text-opacity: 1;
-  color: rgb(254 249 195 / var(--tw-text-opacity));
-}
-
-.hover\:text-yellow-200:hover {
-  --tw-text-opacity: 1;
-  color: rgb(254 240 138 / var(--tw-text-opacity));
-}
-
-.hover\:text-yellow-300:hover {
-  --tw-text-opacity: 1;
-  color: rgb(253 224 71 / var(--tw-text-opacity));
-}
-
-.hover\:text-yellow-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(250 204 21 / var(--tw-text-opacity));
-}
-
-.hover\:text-yellow-50:hover {
-  --tw-text-opacity: 1;
-  color: rgb(254 252 232 / var(--tw-text-opacity));
-}
-
-.hover\:text-yellow-500:hover {
-  --tw-text-opacity: 1;
-  color: rgb(234 179 8 / var(--tw-text-opacity));
-}
-
-.hover\:text-yellow-600:hover {
-  --tw-text-opacity: 1;
-  color: rgb(202 138 4 / var(--tw-text-opacity));
-}
-
-.hover\:text-yellow-700:hover {
-  --tw-text-opacity: 1;
-  color: rgb(161 98 7 / var(--tw-text-opacity));
-}
-
-.hover\:text-yellow-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(133 77 14 / var(--tw-text-opacity));
-}
-
-.hover\:text-yellow-900:hover {
-  --tw-text-opacity: 1;
-  color: rgb(113 63 18 / var(--tw-text-opacity));
-}
-
-.hover\:text-zinc-100:hover {
-  --tw-text-opacity: 1;
-  color: rgb(244 244 245 / var(--tw-text-opacity));
-}
-
-.hover\:text-zinc-200:hover {
-  --tw-text-opacity: 1;
-  color: rgb(228 228 231 / var(--tw-text-opacity));
-}
-
-.hover\:text-zinc-300:hover {
-  --tw-text-opacity: 1;
-  color: rgb(212 212 216 / var(--tw-text-opacity));
-}
-
-.hover\:text-zinc-400:hover {
-  --tw-text-opacity: 1;
-  color: rgb(161 161 170 / var(--tw-text-opacity));
-}
-
-.hover\:text-zinc-50:hover {
-  --tw-text-opacity: 1;
-  color: rgb(250 250 250 / var(--tw-text-opacity));
-}
-
-.hover\:text-zinc-500:hover {
-  --tw-text-opacity: 1;
-  color: rgb(113 113 122 / var(--tw-text-opacity));
-}
-
-.hover\:text-zinc-600:hover {
-  --tw-text-opacity: 1;
-  color: rgb(82 82 91 / var(--tw-text-opacity));
-}
-
-.hover\:text-zinc-700:hover {
-  --tw-text-opacity: 1;
-  color: rgb(63 63 70 / var(--tw-text-opacity));
-}
-
-.hover\:text-zinc-800:hover {
-  --tw-text-opacity: 1;
-  color: rgb(39 39 42 / var(--tw-text-opacity));
-}
-
-.hover\:text-zinc-900:hover {
-  --tw-text-opacity: 1;
-  color: rgb(24 24 27 / var(--tw-text-opacity));
-}
-
-.hover\:underline:hover {
-  text-decoration-line: underline;
-}
-
-.hover\:underline-offset-2:hover {
-  text-underline-offset: 2px;
-}
-
-.hover\:opacity-100:hover {
-  opacity: 1;
-}
-
-.hover\:opacity-50:hover {
-  opacity: 0.5;
-}
-
-.hover\:opacity-70:hover {
-  opacity: 0.7;
-}
-
-.hover\:shadow:hover {
-  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.hover\:shadow-sm:hover {
-  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.hover\:outline-none:hover {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-
-.hover\:ring-0:hover {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-.hover\:ring-amber-100:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(254 243 199 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-amber-200:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(253 230 138 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-amber-300:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(252 211 77 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-amber-400:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(251 191 36 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-amber-50:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(255 251 235 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-amber-500:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(245 158 11 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-amber-600:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(217 119 6 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-amber-700:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(180 83 9 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-amber-800:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(146 64 14 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-amber-900:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(120 53 15 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-black:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(17 17 17 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-blue-100:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(219 234 254 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-blue-200:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(191 219 254 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-blue-300:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-blue-400:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-blue-50:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(239 246 255 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-blue-500:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-blue-600:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(37 99 235 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-blue-700:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(29 78 216 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-blue-800:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(30 64 175 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-blue-900:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(30 58 138 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-cyan-100:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(207 250 254 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-cyan-200:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(165 243 252 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-cyan-300:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(103 232 249 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-cyan-400:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(34 211 238 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-cyan-50:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(236 254 255 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-cyan-500:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(6 182 212 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-cyan-600:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(8 145 178 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-cyan-700:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(14 116 144 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-cyan-800:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(21 94 117 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-cyan-900:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(22 78 99 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-emerald-100:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(209 250 229 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-emerald-200:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(167 243 208 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-emerald-300:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(110 231 183 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-emerald-400:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(52 211 153 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-emerald-50:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(236 253 245 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-emerald-500:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-emerald-600:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(5 150 105 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-emerald-700:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(4 120 87 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-emerald-800:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(6 95 70 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-emerald-900:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(6 78 59 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-fuchsia-100:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(250 232 255 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-fuchsia-200:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(245 208 254 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-fuchsia-300:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(240 171 252 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-fuchsia-400:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(232 121 249 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-fuchsia-50:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(253 244 255 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-fuchsia-500:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(217 70 239 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-fuchsia-600:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(192 38 211 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-fuchsia-700:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(162 28 175 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-fuchsia-800:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(134 25 143 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-fuchsia-900:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(112 26 117 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-gray-100:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(243 244 246 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-gray-200:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-gray-300:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-gray-400:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-gray-50:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(249 250 251 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-gray-500:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-gray-600:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(75 85 99 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-gray-700:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-gray-800:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-gray-900:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-green-100:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(220 252 231 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-green-200:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(187 247 208 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-green-300:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(134 239 172 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-green-400:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(74 222 128 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-green-50:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(240 253 244 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-green-500:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-green-600:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(22 163 74 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-green-700:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(21 128 61 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-green-800:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(22 101 52 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-green-900:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(20 83 45 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-indigo-100:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(224 231 255 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-indigo-200:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(199 210 254 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-indigo-300:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(165 180 252 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-indigo-400:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(129 140 248 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-indigo-50:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(238 242 255 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-indigo-500:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-indigo-600:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(79 70 229 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-indigo-700:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(67 56 202 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-indigo-800:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(55 48 163 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-indigo-900:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(49 46 129 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-lime-100:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(236 252 203 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-lime-200:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(217 249 157 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-lime-300:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(190 242 100 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-lime-400:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(163 230 53 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-lime-50:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(247 254 231 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-lime-500:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(132 204 22 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-lime-600:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(101 163 13 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-lime-700:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(77 124 15 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-lime-800:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(63 98 18 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-lime-900:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(54 83 20 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-neutral-100:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(245 245 245 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-neutral-200:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(229 229 229 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-neutral-300:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(212 212 212 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-neutral-400:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(163 163 163 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-neutral-50:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(250 250 250 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-neutral-500:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(115 115 115 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-neutral-600:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(82 82 82 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-neutral-700:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(64 64 64 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-neutral-800:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(38 38 38 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-neutral-900:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(23 23 23 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-orange-100:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(255 237 213 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-orange-200:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(254 215 170 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-orange-300:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(253 186 116 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-orange-400:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(251 146 60 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-orange-50:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(255 247 237 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-orange-500:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(249 115 22 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-orange-600:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(234 88 12 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-orange-700:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(194 65 12 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-orange-800:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(154 52 18 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-orange-900:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(124 45 18 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-pink-100:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(252 231 243 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-pink-200:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(251 207 232 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-pink-300:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(249 168 212 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-pink-400:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(244 114 182 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-pink-50:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(253 242 248 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-pink-500:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(236 72 153 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-pink-600:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(219 39 119 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-pink-700:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(190 24 93 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-pink-900:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(131 24 67 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-purple-100:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(243 232 255 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-purple-200:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(233 213 255 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-purple-300:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(216 180 254 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-purple-400:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(192 132 252 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-purple-50:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(250 245 255 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-purple-500:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(168 85 247 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-purple-600:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(147 51 234 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-purple-700:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(126 34 206 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-purple-800:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(107 33 168 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-purple-900:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(88 28 135 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-red-100:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(254 226 226 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-red-200:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(254 202 202 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-red-300:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-red-400:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-red-50:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(254 242 242 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-red-500:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-red-600:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(220 38 38 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-red-700:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(185 28 28 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-red-800:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(153 27 27 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-red-900:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(127 29 29 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-rose-100:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(255 228 230 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-rose-200:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(254 205 211 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-rose-300:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(253 164 175 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-rose-400:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(251 113 133 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-rose-50:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(255 241 242 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-rose-500:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(244 63 94 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-rose-600:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(225 29 72 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-rose-700:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(190 18 60 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-rose-800:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(159 18 57 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-rose-900:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(136 19 55 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-sky-100:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(224 242 254 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-sky-200:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(186 230 253 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-sky-300:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(125 211 252 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-sky-400:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(56 189 248 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-sky-50:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(240 249 255 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-sky-500:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(14 165 233 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-sky-600:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(2 132 199 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-sky-700:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(3 105 161 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-sky-800:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(7 89 133 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-sky-900:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(12 74 110 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-slate-100:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(241 245 249 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-slate-200:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(226 232 240 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-slate-300:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(203 213 225 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-slate-400:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(148 163 184 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-slate-50:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(248 250 252 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-slate-500:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(100 116 139 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-slate-600:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(71 85 105 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-slate-700:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(51 65 85 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-slate-800:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(30 41 59 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-slate-900:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(15 23 42 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-stone-100:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(245 245 244 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-stone-200:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(231 229 228 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-stone-300:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(214 211 209 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-stone-400:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(168 162 158 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-stone-50:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(250 250 249 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-stone-500:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(120 113 108 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-stone-600:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(87 83 78 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-stone-700:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(68 64 60 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-stone-800:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(41 37 36 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-stone-900:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(28 25 23 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-teal-100:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(204 251 241 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-teal-200:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(153 246 228 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-teal-300:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(94 234 212 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-teal-400:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(45 212 191 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-teal-50:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(240 253 250 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-teal-500:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(20 184 166 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-teal-600:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(13 148 136 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-teal-700:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(15 118 110 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-teal-800:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(17 94 89 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-teal-900:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(19 78 74 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-transparent:hover {
-  --tw-ring-color: transparent;
-}
-
-.hover\:ring-violet-100:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(237 233 254 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-violet-200:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(221 214 254 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-violet-300:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(196 181 253 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-violet-400:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(167 139 250 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-violet-50:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(245 243 255 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-violet-500:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(139 92 246 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-violet-600:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(124 58 237 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-violet-700:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(109 40 217 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-violet-800:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(91 33 182 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-violet-900:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(76 29 149 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-white:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-yellow-100:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(254 249 195 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-yellow-200:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(254 240 138 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-yellow-300:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(253 224 71 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-yellow-400:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(250 204 21 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-yellow-50:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(254 252 232 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-yellow-500:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(234 179 8 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-yellow-600:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(202 138 4 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-yellow-700:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(161 98 7 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-yellow-800:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(133 77 14 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-yellow-900:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(113 63 18 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-zinc-100:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(244 244 245 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-zinc-200:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(228 228 231 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-zinc-300:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(212 212 216 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-zinc-400:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(161 161 170 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-zinc-50:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(250 250 250 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-zinc-500:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(113 113 122 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-zinc-600:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(82 82 91 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-zinc-700:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(63 63 70 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-zinc-800:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(39 39 42 / var(--tw-ring-opacity));
-}
-
-.hover\:ring-zinc-900:hover {
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(24 24 27 / var(--tw-ring-opacity));
-}
-
-.hover\:brightness-90:hover {
-  --tw-brightness: brightness(.9);
-  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);
-}
-
-.hover\:brightness-95:hover {
-  --tw-brightness: brightness(.95);
-  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);
-}
-
-.hover\:before\:opacity-100:hover::before {
-  content: var(--tw-content);
-  opacity: 1;
-}
-
-.after\:hover\:block:hover::after {
-  content: var(--tw-content);
-  display: block;
-}
-
-.hover\:after\:bg-subtle:hover::after {
-  content: var(--tw-content);
-  background-color: var(--cal-bg-subtle);
-}
-
-.checked\:hover\:border-error:hover:checked {
-  border-color: var(--cal-border-error);
-}
-
-.checked\:hover\:bg-brand-default:hover:checked {
-  background-color: var(--cal-brand, #111827);
-}
-
-.checked\:hover\:bg-darkerror:hover:checked {
-  background-color: var(--cal-bg-dark-error);
-}
-
-.checked\:hover\:bg-gray-600:hover:checked {
-  --tw-bg-opacity: 1;
-  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
-}
-
-.hover\:checked\:bg-gray-300:checked:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
-}
-
-.disabled\:hover\:cursor-not-allowed:hover:disabled {
-  cursor: not-allowed;
-}
-
-.disabled\:hover\:border-default:hover:disabled {
-  border-color: var(--cal-border);
-}
-
-.disabled\:hover\:border-inherit:hover:disabled {
-  border-color: inherit;
-}
-
-.disabled\:hover\:border-red-200:hover:disabled {
-  --tw-border-opacity: 1;
-  border-color: rgb(254 202 202 / var(--tw-border-opacity));
-}
-
-.disabled\:hover\:border-subtle:hover:disabled {
-  border-color: var(--cal-border-subtle);
-}
-
-.disabled\:hover\:bg-brand-subtle:hover:disabled {
-  background-color: var(--cal-brand-subtle, #9CA3AF);
-}
-
-.disabled\:hover\:bg-default:hover:disabled {
-  background-color: var(--cal-bg, white);
-}
-
-.disabled\:hover\:bg-transparent:hover:disabled {
-  background-color: transparent;
-}
-
-.disabled\:hover\:bg-opacity-30:hover:disabled {
-  --tw-bg-opacity: 0.3;
-}
-
-.disabled\:hover\:text-muted:hover:disabled {
-  color: var(--cal-text-muted);
-}
-
-.disabled\:hover\:opacity-40:hover:disabled {
-  opacity: 0.4;
-}
-
-.disabled\:hover\:shadow-none:hover:disabled {
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.group.destructive .group-\[\.destructive\]\:hover\:text-red-50:hover {
-  --tw-text-opacity: 1;
-  color: rgb(254 242 242 / var(--tw-text-opacity));
-}
-
-html.todesktop .todesktop\:hover\:\!bg-transparent:hover {
-  background-color: transparent !important;
-}
-
-html.todesktop .todesktop\:hover\:bg-transparent:hover {
-  background-color: transparent;
-}
-
-.active\:scale-95:active {
-  --tw-scale-x: .95;
-  --tw-scale-y: .95;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.active\:bg-default:active {
-  background-color: var(--cal-bg, white);
-}
-
-.radix-state-open\:rotate-45[data-state="open"] {
-  --tw-rotate: 45deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.radix-state-open\:rounded-r-md[data-state="open"] {
-  border-top-right-radius: var(--cal-radius-md);
-  border-bottom-right-radius: var(--cal-radius-md);
-}
-
-.radix-state-open\:text-blue-500[data-state="open"] {
-  --tw-text-opacity: 1;
-  color: rgb(59 130 246 / var(--tw-text-opacity));
-}
-
-.radix-state-open\:ring-0[data-state="open"] {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-.enabled\:hover\:border-emphasis:hover:not(:disabled) {
-  border-color: var(--cal-border-emphasis);
-}
-
-.enabled\:hover\:border-subtle:hover:not(:disabled) {
-  border-color: var(--cal-border-subtle);
-}
-
-.enabled\:hover\:bg-muted:hover:not(:disabled) {
-  background-color: var(--cal-bg-muted);
-}
-
-.enabled\:hover\:bg-subtle:hover:not(:disabled) {
-  background-color: var(--cal-bg-subtle);
-}
-
-.enabled\:hover\:text-emphasis:hover:not(:disabled) {
-  color: var(--cal-text-emphasis);
-}
-
-.enabled\:hover\:shadow-outline-gray-hover:hover:not(:disabled) {
-  --tw-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.03), 0px 2px 2px -1px rgba(0, 0, 0, 0.03);
-  --tw-shadow-colored: 0px 2px 3px 0px var(--tw-shadow-color), 0px 2px 2px -1px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.enabled\:hover\:shadow-outline-red-hover:hover:not(:disabled) {
-  --tw-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.06), 0px 2px 3px 0px rgba(0, 0, 0, 0.08);
-  --tw-shadow-colored: 0px 1px 1px 0px var(--tw-shadow-color), 0px 2px 3px 0px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.enabled\:hover\:shadow-solid-gray-hover:hover:not(:disabled) {
-  --tw-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.06), 0px 1px 1px 0px rgba(0, 0, 0, 0.08), 1px 4px 8px 0px rgba(0, 0, 0, 0.12), 0px 2px 0.4px 0px rgba(255, 255, 255, 0.16) inset, 0px -2px 2px 0px rgba(0, 0, 0, 0.40) inset;
-  --tw-shadow-colored: 0px 2px 3px 0px var(--tw-shadow-color), 0px 1px 1px 0px var(--tw-shadow-color), 1px 4px 8px 0px var(--tw-shadow-color), inset 0px 2px 0.4px 0px var(--tw-shadow-color), inset 0px -2px 2px 0px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.enabled\:active\:shadow-outline-gray-active:active:not(:disabled) {
-  --tw-shadow: 0px 2px 1px 0px rgba(0, 0, 0, 0.05) inset;
-  --tw-shadow-colored: inset 0px 2px 1px 0px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.enabled\:active\:shadow-outline-red-active:active:not(:disabled) {
-  --tw-shadow: 0px 1px 1px 0px rgba(127, 29, 29, 0.06), 0px 0px 3px 0px rgba(127, 29, 29, 0.08), 0px 2px 2px 1px rgba(127, 29, 29, 0.06) inset;
-  --tw-shadow-colored: 0px 1px 1px 0px var(--tw-shadow-color), 0px 0px 3px 0px var(--tw-shadow-color), inset 0px 2px 2px 1px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.enabled\:active\:shadow-solid-gray-active:active:not(:disabled) {
-  --tw-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.40) inset, 0px 0px 2px 1px rgba(0, 0, 0, 0.40) inset;
-  --tw-shadow-colored: inset 0px 2px 3px 0px var(--tw-shadow-color), inset 0px 0px 2px 1px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-:is([dir="ltr"] .ltr\:right-0) {
-  right: var(--cal-spacing-0);
-}
-
-:is([dir="ltr"] .ltr\:right-2) {
-  right: var(--cal-spacing-2);
-}
-
-:is([dir="ltr"] .ltr\:right-4) {
-  right: var(--cal-spacing-4);
-}
-
-:is([dir="ltr"] .ltr\:-ml-1) {
-  margin-left: calc(var(--cal-spacing-1) * -1);
-}
-
-:is([dir="ltr"] .ltr\:-mr-1) {
-  margin-right: calc(var(--cal-spacing-1) * -1);
-}
-
-:is([dir="ltr"] .ltr\:ml-1) {
-  margin-left: var(--cal-spacing-1);
-}
-
-:is([dir="ltr"] .ltr\:ml-2) {
-  margin-left: var(--cal-spacing-2);
-}
-
-:is([dir="ltr"] .ltr\:ml-3) {
-  margin-left: var(--cal-spacing-3);
-}
-
-:is([dir="ltr"] .ltr\:mr-1) {
-  margin-right: var(--cal-spacing-1);
-}
-
-:is([dir="ltr"] .ltr\:mr-2) {
-  margin-right: var(--cal-spacing-2);
-}
-
-:is([dir="ltr"] .ltr\:mr-3) {
-  margin-right: var(--cal-spacing-3);
-}
-
-:is([dir="ltr"] .ltr\:mr-4) {
-  margin-right: var(--cal-spacing-4);
-}
-
-:is([dir="ltr"] .ltr\:mr-5) {
-  margin-right: var(--cal-spacing-5);
-}
-
-:is([dir="ltr"] .ltr\:mr-\[10px\]) {
-  margin-right: 10px;
-}
-
-:is([dir="ltr"] .ltr\:translate-x-\[2px\]) {
-  --tw-translate-x: 2px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-:is([dir="ltr"] .ltr\:translate-x-\[4px\]) {
-  --tw-translate-x: 4px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-:is([dir="ltr"] .ltr\:rounded-l-md) {
-  border-top-left-radius: var(--cal-radius-md);
-  border-bottom-left-radius: var(--cal-radius-md);
-}
-
-:is([dir="ltr"] .ltr\:rounded-r-md) {
-  border-top-right-radius: var(--cal-radius-md);
-  border-bottom-right-radius: var(--cal-radius-md);
-}
-
-:is([dir="ltr"] .ltr\:rounded-tl-md) {
-  border-top-left-radius: var(--cal-radius-md);
-}
-
-:is([dir="ltr"] .ltr\:border-l) {
-  border-left-width: 1px;
-}
-
-:is([dir="ltr"] .ltr\:border-r-0) {
-  border-right-width: 0px;
-}
-
-:is([dir="ltr"] .ltr\:pl-3) {
-  padding-left: var(--cal-spacing-3);
-}
-
-:is([dir="ltr"] .ltr\:pl-4) {
-  padding-left: var(--cal-spacing-4);
-}
-
-:is([dir="ltr"] .ltr\:pr-10) {
-  padding-right: var(--cal-spacing-10);
-}
-
-:is([dir="ltr"] .ltr\:pr-4) {
-  padding-right: var(--cal-spacing-4);
-}
-
-:is([dir="ltr"] .ltr\:text-left) {
-  text-align: left;
-}
-
-:is([dir="ltr"] .ltr\:last\:mr-0:last-child) {
-  margin-right: var(--cal-spacing-0);
-}
-
-:is([dir="ltr"] .ltr\:radix-state-open\:rounded-r-\[--btn-group-radius\][data-state="open"]) {
-  border-top-right-radius: var(--btn-group-radius);
-  border-bottom-right-radius: var(--btn-group-radius);
-}
-
-:is([dir="ltr"] .ltr\:radix-state-open\:rounded-r-md[data-state="open"]) {
-  border-top-right-radius: var(--cal-radius-md);
-  border-bottom-right-radius: var(--cal-radius-md);
-}
-
-:is([dir="rtl"] .rtl\:left-0) {
-  left: var(--cal-spacing-0);
-}
-
-:is([dir="rtl"] .rtl\:left-2) {
-  left: var(--cal-spacing-2);
-}
-
-:is([dir="rtl"] .rtl\:left-4) {
-  left: var(--cal-spacing-4);
-}
-
-:is([dir="rtl"] .rtl\:-ml-1) {
-  margin-left: calc(var(--cal-spacing-1) * -1);
-}
-
-:is([dir="rtl"] .rtl\:-mr-1) {
-  margin-right: calc(var(--cal-spacing-1) * -1);
-}
-
-:is([dir="rtl"] .rtl\:-mr-14) {
-  margin-right: calc(var(--cal-spacing-14) * -1);
-}
-
-:is([dir="rtl"] .rtl\:-mr-2) {
-  margin-right: calc(var(--cal-spacing-2) * -1);
-}
-
-:is([dir="rtl"] .rtl\:ml-1) {
-  margin-left: var(--cal-spacing-1);
-}
-
-:is([dir="rtl"] .rtl\:ml-2) {
-  margin-left: var(--cal-spacing-2);
-}
-
-:is([dir="rtl"] .rtl\:ml-3) {
-  margin-left: var(--cal-spacing-3);
-}
-
-:is([dir="rtl"] .rtl\:ml-4) {
-  margin-left: var(--cal-spacing-4);
-}
-
-:is([dir="rtl"] .rtl\:ml-5) {
-  margin-left: var(--cal-spacing-5);
-}
-
-:is([dir="rtl"] .rtl\:ml-\[10px\]) {
-  margin-left: 10px;
-}
-
-:is([dir="rtl"] .rtl\:mr-1) {
-  margin-right: var(--cal-spacing-1);
-}
-
-:is([dir="rtl"] .rtl\:mr-2) {
-  margin-right: var(--cal-spacing-2);
-}
-
-:is([dir="rtl"] .rtl\:mr-3) {
-  margin-right: var(--cal-spacing-3);
-}
-
-:is([dir="rtl"] .rtl\:mr-4) {
-  margin-right: var(--cal-spacing-4);
-}
-
-:is([dir="rtl"] .rtl\:mr-auto) {
-  margin-right: auto;
-}
-
-:is([dir="rtl"] .rtl\:flex-grow) {
-  flex-grow: 1;
-}
-
-:is([dir="rtl"] .rtl\:-translate-x-\[2px\]) {
-  --tw-translate-x: -2px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-:is([dir="rtl"] .rtl\:-translate-x-\[4px\]) {
-  --tw-translate-x: -4px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-:is([dir="rtl"] .rtl\:rotate-180) {
-  --tw-rotate: 180deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-:is([dir="rtl"] .rtl\:flex-row-reverse) {
-  flex-direction: row-reverse;
-}
-
-:is([dir="rtl"] .rtl\:justify-end) {
-  justify-content: flex-end;
-}
-
-:is([dir="rtl"] .rtl\:space-x-reverse)> :not([hidden])~ :not([hidden]) {
-  --tw-space-x-reverse: 1;
-}
-
-:is([dir="rtl"] .rtl\:rounded-l-md) {
-  border-top-left-radius: var(--cal-radius-md);
-  border-bottom-left-radius: var(--cal-radius-md);
-}
-
-:is([dir="rtl"] .rtl\:rounded-r-md) {
-  border-top-right-radius: var(--cal-radius-md);
-  border-bottom-right-radius: var(--cal-radius-md);
-}
-
-:is([dir="rtl"] .rtl\:rounded-tr-md) {
-  border-top-right-radius: var(--cal-radius-md);
-}
-
-:is([dir="rtl"] .rtl\:border-l-0) {
-  border-left-width: 0px;
-}
-
-:is([dir="rtl"] .rtl\:border-r) {
-  border-right-width: 1px;
-}
-
-:is([dir="rtl"] .rtl\:border-default) {
-  border-color: var(--cal-border);
-}
-
-:is([dir="rtl"] .rtl\:border-r-default) {
-  border-right-color: var(--cal-border);
-}
-
-:is([dir="rtl"] .rtl\:pl-10) {
-  padding-left: var(--cal-spacing-10);
-}
-
-:is([dir="rtl"] .rtl\:pl-4) {
-  padding-left: var(--cal-spacing-4);
-}
-
-:is([dir="rtl"] .rtl\:pr-4) {
-  padding-right: var(--cal-spacing-4);
-}
-
-:is([dir="rtl"] .rtl\:pr-6) {
-  padding-right: var(--cal-spacing-6);
-}
-
-:is([dir="rtl"] .rtl\:text-right) {
-  text-align: right;
-}
-
-:is([dir="rtl"] .rtl\:last\:ml-0:last-child) {
-  margin-left: var(--cal-spacing-0);
-}
-
-:is([dir="rtl"] .rtl\:radix-state-open\:rounded-l-\[--btn-group-radius\][data-state="open"]) {
-  border-top-left-radius: var(--btn-group-radius);
-  border-bottom-left-radius: var(--btn-group-radius);
-}
-
-:is([dir="rtl"] .rtl\:radix-state-open\:rounded-l-md[data-state="open"]) {
-  border-top-left-radius: var(--cal-radius-md);
-  border-bottom-left-radius: var(--cal-radius-md);
-}
-
-:is(.dark .dark\:block) {
-  display: block;
-}
-
-:is(.dark .dark\:hidden) {
-  display: none;
-}
-
-:is(.dark .dark\:divide-darkgray-100)> :not([hidden])~ :not([hidden]) {
-  --tw-divide-opacity: 1;
-  border-color: rgb(241 245 249 / var(--tw-divide-opacity));
-}
-
-:is(.dark .dark\:border) {
-  border-width: 1px;
-}
-
-:is(.dark .dark\:border-cal-bg-muted) {
-  border-color: var(--cal-bg-muted);
-}
-
-:is(.dark .dark\:border-darkgray-200) {
-  --tw-border-opacity: 1;
-  border-color: rgb(226 232 240 / var(--tw-border-opacity));
-}
-
-:is(.dark .dark\:border-default) {
-  border-color: var(--cal-border);
-}
-
-:is(.dark .dark\:border-emphasis) {
-  border-color: var(--cal-border-emphasis);
-}
-
-:is(.dark .dark\:border-gray-900) {
-  --tw-border-opacity: 1;
-  border-color: rgb(17 24 39 / var(--tw-border-opacity));
-}
-
-:is(.dark .dark\:border-transparent) {
-  border-color: transparent;
-}
-
-:is(.dark .dark\:bg-\[\#292929\]) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(41 41 41 / var(--tw-bg-opacity));
-}
-
-:is(.dark .dark\:bg-black) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(17 17 17 / var(--tw-bg-opacity));
-}
-
-:is(.dark .dark\:bg-blue-900) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(30 58 138 / var(--tw-bg-opacity));
-}
-
-:is(.dark .dark\:bg-blue-950) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(23 37 84 / var(--tw-bg-opacity));
-}
-
-:is(.dark .dark\:bg-brand-emphasis) {
-  background-color: var(--cal-brand-emphasis, #101010);
-}
-
-:is(.dark .dark\:bg-darkgray-100) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(241 245 249 / var(--tw-bg-opacity));
-}
-
-:is(.dark .dark\:bg-darkgray-200) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(226 232 240 / var(--tw-bg-opacity));
-}
-
-:is(.dark .dark\:bg-darkgray-400) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(148 163 184 / var(--tw-bg-opacity));
-}
-
-:is(.dark .dark\:bg-darkgray-50) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
-}
-
-:is(.dark .dark\:bg-darkgray-900) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(15 23 42 / var(--tw-bg-opacity));
-}
-
-:is(.dark .dark\:bg-default) {
-  background-color: var(--cal-bg, white);
-}
-
-:is(.dark .dark\:bg-gray-600) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(75 85 99 / var(--tw-bg-opacity));
-}
-
-:is(.dark .dark\:bg-inherit) {
-  background-color: inherit;
-}
-
-:is(.dark .dark\:bg-inverted) {
-  background-color: var(--cal-bg-inverted);
-}
-
-:is(.dark .dark\:bg-muted) {
-  background-color: var(--cal-bg-muted);
-}
-
-:is(.dark .dark\:bg-orange-900) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(124 45 18 / var(--tw-bg-opacity));
-}
-
-:is(.dark .dark\:bg-red-900) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(127 29 29 / var(--tw-bg-opacity));
-}
-
-:is(.dark .dark\:bg-transparent) {
-  background-color: transparent;
-}
-
-:is(.dark .dark\:bg-white) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
-:is(.dark .dark\:bg-white\/5) {
-  background-color: rgb(255 255 255 / 0.05);
-}
-
-:is(.dark .dark\:bg-opacity-5) {
-  --tw-bg-opacity: 0.05;
-}
-
-:is(.dark .dark\:bg-opacity-70) {
-  --tw-bg-opacity: 0.7;
-}
-
-:is(.dark .dark\:bg-gradient-to-tr) {
-  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
-}
-
-:is(.dark .dark\:bg-none) {
-  background-image: none;
-}
-
-:is(.dark .dark\:from-subtle) {
-  --tw-gradient-from: var(--cal-bg-subtle) var(--tw-gradient-from-position);
-  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
-  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
-}
-
-:is(.dark .dark\:to-muted) {
-  --tw-gradient-to: var(--cal-bg-muted) var(--tw-gradient-to-position);
-}
-
-:is(.dark .dark\:\!text-darkgray-900) {
-  --tw-text-opacity: 1 !important;
-  color: rgb(15 23 42 / var(--tw-text-opacity)) !important;
-}
-
-:is(.dark .dark\:text-black) {
-  --tw-text-opacity: 1;
-  color: rgb(17 17 17 / var(--tw-text-opacity));
-}
-
-:is(.dark .dark\:text-blue-200) {
-  --tw-text-opacity: 1;
-  color: rgb(191 219 254 / var(--tw-text-opacity));
-}
-
-:is(.dark .dark\:text-blue-300) {
-  --tw-text-opacity: 1;
-  color: rgb(147 197 253 / var(--tw-text-opacity));
-}
-
-:is(.dark .dark\:text-blue-400) {
-  --tw-text-opacity: 1;
-  color: rgb(96 165 250 / var(--tw-text-opacity));
-}
-
-:is(.dark .dark\:text-darkgray-50) {
-  --tw-text-opacity: 1;
-  color: rgb(248 250 252 / var(--tw-text-opacity));
-}
-
-:is(.dark .dark\:text-darkgray-800) {
-  --tw-text-opacity: 1;
-  color: rgb(30 41 59 / var(--tw-text-opacity));
-}
-
-:is(.dark .dark\:text-darkgray-900) {
-  --tw-text-opacity: 1;
-  color: rgb(15 23 42 / var(--tw-text-opacity));
-}
-
-:is(.dark .dark\:text-default) {
-  color: var(--cal-text);
-}
-
-:is(.dark .dark\:text-emphasis) {
-  color: var(--cal-text-emphasis);
-}
-
-:is(.dark .dark\:text-gray-300) {
-  --tw-text-opacity: 1;
-  color: rgb(209 213 219 / var(--tw-text-opacity));
-}
-
-:is(.dark .dark\:text-green-400) {
-  --tw-text-opacity: 1;
-  color: rgb(74 222 128 / var(--tw-text-opacity));
-}
-
-:is(.dark .dark\:text-inverted) {
-  color: var(--cal-text-inverted);
-}
-
-:is(.dark .dark\:text-muted) {
-  color: var(--cal-text-muted);
-}
-
-:is(.dark .dark\:text-orange-200) {
-  --tw-text-opacity: 1;
-  color: rgb(254 215 170 / var(--tw-text-opacity));
-}
-
-:is(.dark .dark\:text-red-100) {
-  --tw-text-opacity: 1;
-  color: rgb(254 226 226 / var(--tw-text-opacity));
-}
-
-:is(.dark .dark\:text-red-200) {
-  --tw-text-opacity: 1;
-  color: rgb(254 202 202 / var(--tw-text-opacity));
-}
-
-:is(.dark .dark\:text-red-700\/30) {
-  color: rgb(185 28 28 / 0.3);
-}
-
-:is(.dark .dark\:text-subtle) {
-  color: var(--cal-text-subtle);
-}
-
-:is(.dark .dark\:text-white) {
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity));
-}
-
-:is(.dark .dark\:opacity-100) {
-  opacity: 1;
-}
-
-:is(.dark .dark\:opacity-80) {
-  opacity: 0.8;
-}
-
-:is(.dark .dark\:opacity-90) {
-  opacity: 0.9;
-}
-
-:is(.dark .dark\:invert) {
-  --tw-invert: invert(100%);
-  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);
-}
-
-:is(.dark .dark\:invert-0) {
-  --tw-invert: invert(0);
-  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);
-}
-
-:is(.dark .dark\:invert-\[\.65\]) {
-  --tw-invert: invert(.65);
-  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);
-}
-
-:is(.dark .dark\:\[--cal-brand-emphasis\:\#e1e1e1\]) {
-  --cal-brand-emphasis: #e1e1e1;
-}
-
-:is(.dark .dark\:\[--cal-brand-text\:\#000000\]) {
-  --cal-brand-text: #000000;
-}
-
-:is(.dark .dark\:\[--cal-brand-text\:black\]) {
-  --cal-brand-text: black;
-}
-
-:is(.dark .dark\:\[--cal-brand\:\#FFFFFF\]) {
-  --cal-brand: #FFFFFF;
-}
-
-:is(.dark .dark\:\[--cal-brand\:white\]) {
-  --cal-brand: white;
-}
-
-:is(.dark .dark\:\[--disabled-gradient-background\:\#262626\]) {
-  --disabled-gradient-background: #262626;
-}
-
-:is(.dark .dark\:\[--disabled-gradient-foreground\:\#393939\]) {
-  --disabled-gradient-foreground: #393939;
-}
-
-:is(.dark .dark\:\[color-scheme\:dark\]) {
-  color-scheme: dark;
-}
-
-:is(.dark .dark\:\[filter\:invert\(0\.65\)_brightness\(0\.9\)\]) {
-  filter: invert(0.65) brightness(0.9);
-}
-
-:is(.dark .dark\:selection\:bg-green-500 *)::-moz-selection {
-  --tw-bg-opacity: 1;
-  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
-}
-
-:is(.dark .dark\:selection\:bg-green-500 *)::selection {
-  --tw-bg-opacity: 1;
-  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
-}
-
-:is(.dark .dark\:selection\:bg-green-500)::-moz-selection {
-  --tw-bg-opacity: 1;
-  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
-}
-
-:is(.dark .dark\:selection\:bg-green-500)::selection {
-  --tw-bg-opacity: 1;
-  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
-}
-
-:is(.dark .dark\:placeholder\:text-darkgray-600)::-moz-placeholder {
-  --tw-text-opacity: 1;
-  color: rgb(71 85 105 / var(--tw-text-opacity));
-}
-
-:is(.dark .dark\:placeholder\:text-darkgray-600)::placeholder {
-  --tw-text-opacity: 1;
-  color: rgb(71 85 105 / var(--tw-text-opacity));
-}
-
-:is(.dark .dark\:placeholder\:text-muted)::-moz-placeholder {
-  color: var(--cal-text-muted);
-}
-
-:is(.dark .dark\:placeholder\:text-muted)::placeholder {
-  color: var(--cal-text-muted);
-}
-
-:is(.dark .dark\:before\:bg-muted)::before {
-  content: var(--tw-content);
-  background-color: var(--cal-bg-muted);
-}
-
-:is(.dark .dark\:after\:bg-brand-accent)::after {
-  content: var(--tw-content);
-  background-color: var(--cal-brand-accent, white);
-}
-
-:is(.dark .dark\:after\:bg-inverted)::after {
-  content: var(--tw-content);
-  background-color: var(--cal-bg-inverted);
-}
-
-:is(.dark .dark\:checked\:bg-brand-default:checked) {
-  background-color: var(--cal-brand, #111827);
-}
-
-:is(.dark .dark\:checked\:after\:bg-brand-accent:checked)::after {
-  content: var(--tw-content);
-  background-color: var(--cal-brand-accent, white);
-}
-
-:is(.dark .dark\:focus\:border-emphasis:focus) {
-  border-color: var(--cal-border-emphasis);
-}
-
-:is(.dark .disabled\:dark\:text-gray-500):disabled {
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-}
-
-:is(.dark .disabled\:dark\:text-subtle):disabled {
-  color: var(--cal-text-subtle);
-}
-
-.group:hover :is(.dark .group-hover\:dark\:bg-blue-800) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(30 64 175 / var(--tw-bg-opacity));
-}
-
-:is(.dark .dark\:data-\[state\=checked\]\:bg-brand-emphasis[data-state=checked]) {
-  background-color: var(--cal-brand-emphasis, #101010);
-}
-
-:is(.dark .dark\:hover\:bg-darkgray-200:hover) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(226 232 240 / var(--tw-bg-opacity));
-}
-
-:is(.dark .dark\:hover\:bg-emphasis:hover) {
-  background-color: var(--cal-bg-emphasis);
-}
-
-:is(.dark .dark\:hover\:bg-subtle:hover) {
-  background-color: var(--cal-bg-subtle);
-}
-
-:is(.dark .dark\:hover\:bg-transparent:hover) {
-  background-color: transparent;
-}
-
-:is(.dark .hover\:dark\:bg-gray-900):hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
-}
-
-:is(.dark .dark\:hover\:text-red-100:hover) {
-  --tw-text-opacity: 1;
-  color: rgb(254 226 226 / var(--tw-text-opacity));
-}
-
-:is(.dark .dark\:checked\:hover\:bg-brand-default:hover:checked) {
-  background-color: var(--cal-brand, #111827);
-}
-
-:is(.dark .dark\:checked\:hover\:text-\[--cal-brand\]:hover:checked) {
-  color: var(--cal-brand);
-}
-
-@media print {
-
-  .print\:hidden {
-    display: none;
-  }
-
-  .print\:h-full {
-    height: 100%;
-  }
-
-  .print\:w-full {
-    width: 100%;
-  }
-}
-
-@media (min-width: 640px) {
-
-  .sm\:absolute {
-    position: absolute;
-  }
-
-  .sm\:relative {
-    position: relative;
-  }
-
-  .sm\:sticky {
-    position: sticky;
-  }
-
-  .sm\:inset-y-2 {
-    top: var(--cal-spacing-2);
-    bottom: var(--cal-spacing-2);
-  }
-
-  .sm\:bottom-0 {
-    bottom: var(--cal-spacing-0);
-  }
-
-  .sm\:right-0 {
-    right: var(--cal-spacing-0);
-  }
-
-  .sm\:right-2 {
-    right: var(--cal-spacing-2);
-  }
-
-  .sm\:top-auto {
-    top: auto;
-  }
-
-  .sm\:order-3 {
-    order: 3;
-  }
-
-  .sm\:col-span-1 {
-    grid-column: span 1 / span 1;
-  }
-
-  .sm\:col-span-10 {
-    grid-column: span 10 / span 10;
-  }
-
-  .sm\:col-span-11 {
-    grid-column: span 11 / span 11;
-  }
-
-  .sm\:col-span-12 {
-    grid-column: span 12 / span 12;
-  }
-
-  .sm\:col-span-2 {
-    grid-column: span 2 / span 2;
-  }
-
-  .sm\:col-span-3 {
-    grid-column: span 3 / span 3;
-  }
-
-  .sm\:col-span-4 {
-    grid-column: span 4 / span 4;
-  }
-
-  .sm\:col-span-5 {
-    grid-column: span 5 / span 5;
-  }
-
-  .sm\:col-span-6 {
-    grid-column: span 6 / span 6;
-  }
-
-  .sm\:col-span-7 {
-    grid-column: span 7 / span 7;
-  }
-
-  .sm\:col-span-8 {
-    grid-column: span 8 / span 8;
-  }
-
-  .sm\:col-span-9 {
-    grid-column: span 9 / span 9;
-  }
-
-  .sm\:-mx-4 {
-    margin-left: calc(var(--cal-spacing-4) * -1);
-    margin-right: calc(var(--cal-spacing-4) * -1);
-  }
-
-  .sm\:mx-0 {
-    margin-left: var(--cal-spacing-0);
-    margin-right: var(--cal-spacing-0);
-  }
-
-  .sm\:mx-auto {
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .sm\:my-0 {
-    margin-top: var(--cal-spacing-0);
-    margin-bottom: var(--cal-spacing-0);
-  }
-
-  .sm\:my-8 {
-    margin-top: var(--cal-spacing-8);
-    margin-bottom: var(--cal-spacing-8);
-  }
-
-  .sm\:-mt-4 {
-    margin-top: calc(var(--cal-spacing-4) * -1);
-  }
-
-  .sm\:mb-0 {
-    margin-bottom: var(--cal-spacing-0);
-  }
-
-  .sm\:mb-4 {
-    margin-bottom: var(--cal-spacing-4);
-  }
-
-  .sm\:mb-6 {
-    margin-bottom: var(--cal-spacing-6);
-  }
-
-  .sm\:ml-0 {
-    margin-left: var(--cal-spacing-0);
-  }
-
-  .sm\:ml-16 {
-    margin-left: var(--cal-spacing-16);
-  }
-
-  .sm\:ml-4 {
-    margin-left: var(--cal-spacing-4);
-  }
-
-  .sm\:ml-5 {
-    margin-left: var(--cal-spacing-5);
-  }
-
-  .sm\:ml-auto {
-    margin-left: auto;
-  }
-
-  .sm\:mr-36 {
-    margin-right: var(--cal-spacing-36);
-  }
-
-  .sm\:mr-4 {
-    margin-right: var(--cal-spacing-4);
-  }
-
-  .sm\:mt-0 {
-    margin-top: var(--cal-spacing-0);
-  }
-
-  .sm\:mt-4 {
-    margin-top: var(--cal-spacing-4);
-  }
-
-  .sm\:mt-5 {
-    margin-top: var(--cal-spacing-5);
-  }
-
-  .sm\:mt-6 {
-    margin-top: var(--cal-spacing-6);
-  }
-
-  .sm\:mt-8 {
-    margin-top: var(--cal-spacing-8);
-  }
-
-  .sm\:block {
-    display: block;
-  }
-
-  .sm\:inline-block {
-    display: inline-block;
-  }
-
-  .sm\:inline {
-    display: inline;
-  }
-
-  .sm\:flex {
-    display: flex;
-  }
-
-  .sm\:inline-flex {
-    display: inline-flex;
-  }
-
-  .sm\:table-cell {
-    display: table-cell;
-  }
-
-  .sm\:grid {
-    display: grid;
-  }
-
-  .sm\:hidden {
-    display: none;
-  }
-
-  .sm\:h-10 {
-    height: var(--cal-spacing-10);
-  }
-
-  .sm\:h-4 {
-    height: var(--cal-spacing-4);
-  }
-
-  .sm\:h-auto {
-    height: auto;
-  }
-
-  .sm\:h-screen {
-    height: 100vh;
-  }
-
-  .sm\:max-h-9 {
-    max-height: var(--cal-spacing-9);
-  }
-
-  .sm\:min-h-\[200px\] {
-    min-height: 200px;
-  }
-
-  .sm\:w-1\/2 {
-    width: 50%;
-  }
-
-  .sm\:w-10 {
-    width: var(--cal-spacing-10);
-  }
-
-  .sm\:w-16 {
-    width: var(--cal-spacing-16);
-  }
-
-  .sm\:w-24 {
-    width: var(--cal-spacing-24);
-  }
-
-  .sm\:w-28 {
-    width: var(--cal-spacing-28);
-  }
-
-  .sm\:w-32 {
-    width: var(--cal-spacing-32);
-  }
-
-  .sm\:w-36 {
-    width: var(--cal-spacing-36);
-  }
-
-  .sm\:w-4 {
-    width: var(--cal-spacing-4);
-  }
-
-  .sm\:w-\[100px\] {
-    width: 100px;
-  }
-
-  .sm\:w-\[45rem\] {
-    width: 45rem;
-  }
-
-  .sm\:w-auto {
-    width: auto;
-  }
-
-  .sm\:w-full {
-    width: 100%;
-  }
-
-  .sm\:min-w-80 {
-    min-width: var(--cal-spacing-80);
-  }
-
-  .sm\:min-w-\[12rem\] {
-    min-width: 12rem;
-  }
-
-  .sm\:min-w-\[200px\] {
-    min-width: 200px;
-  }
-
-  .sm\:max-w-32 {
-    max-width: var(--cal-spacing-32);
-  }
-
-  .sm\:max-w-4xl {
-    max-width: 56rem;
-  }
-
-  .sm\:max-w-56 {
-    max-width: var(--cal-spacing-56);
-  }
-
-  .sm\:max-w-64 {
-    max-width: var(--cal-spacing-64);
-  }
-
-  .sm\:max-w-72 {
-    max-width: var(--cal-spacing-72);
-  }
-
-  .sm\:max-w-80 {
-    max-width: var(--cal-spacing-80);
-  }
-
-  .sm\:max-w-\[35rem\] {
-    max-width: 35rem;
-  }
-
-  .sm\:max-w-\[45rem\] {
-    max-width: 45rem;
-  }
-
-  .sm\:max-w-\[48rem\] {
-    max-width: 48rem;
-  }
-
-  .sm\:max-w-\[500px\] {
-    max-width: 500px;
-  }
-
-  .sm\:max-w-\[520px\] {
-    max-width: 520px;
-  }
-
-  .sm\:max-w-\[600px\] {
-    max-width: 600px;
-  }
-
-  .sm\:max-w-\[610px\] {
-    max-width: 610px;
-  }
-
-  .sm\:max-w-\[650px\] {
-    max-width: 650px;
-  }
-
-  .sm\:max-w-\[70rem\] {
-    max-width: 70rem;
-  }
-
-  .sm\:max-w-\[80rem\] {
-    max-width: 80rem;
-  }
-
-  .sm\:max-w-\[90rem\] {
-    max-width: 90rem;
-  }
-
-  .sm\:max-w-lg {
-    max-width: 32rem;
-  }
-
-  .sm\:max-w-md {
-    max-width: 28rem;
-  }
-
-  .sm\:max-w-none {
-    max-width: none;
-  }
-
-  .sm\:max-w-sm {
-    max-width: 24rem;
-  }
-
-  .sm\:max-w-xl {
-    max-width: 36rem;
-  }
-
-  .sm\:flex-1 {
-    flex: 1 1 0%;
-  }
-
-  .sm\:flex-none {
-    flex: none;
-  }
-
-  .sm\:translate-y-\[12px\] {
-    --tw-translate-y: 12px;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-
-  .sm\:grid-cols-1 {
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-  }
-
-  .sm\:grid-cols-10 {
-    grid-template-columns: repeat(10, minmax(0, 1fr));
-  }
-
-  .sm\:grid-cols-11 {
-    grid-template-columns: repeat(11, minmax(0, 1fr));
-  }
-
-  .sm\:grid-cols-12 {
-    grid-template-columns: repeat(12, minmax(0, 1fr));
-  }
-
-  .sm\:grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .sm\:grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
-  .sm\:grid-cols-4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-
-  .sm\:grid-cols-5 {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-  }
-
-  .sm\:grid-cols-6 {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-  }
-
-  .sm\:grid-cols-7 {
-    grid-template-columns: repeat(7, minmax(0, 1fr));
-  }
-
-  .sm\:grid-cols-8 {
-    grid-template-columns: repeat(8, minmax(0, 1fr));
-  }
-
-  .sm\:grid-cols-9 {
-    grid-template-columns: repeat(9, minmax(0, 1fr));
-  }
-
-  .sm\:grid-cols-none {
-    grid-template-columns: none;
-  }
-
-  .sm\:flex-row {
-    flex-direction: row;
-  }
-
-  .sm\:flex-row-reverse {
-    flex-direction: row-reverse;
-  }
-
-  .sm\:flex-col {
-    flex-direction: column;
-  }
-
-  .sm\:flex-wrap {
-    flex-wrap: wrap;
-  }
-
-  .sm\:flex-nowrap {
-    flex-wrap: nowrap;
-  }
-
-  .sm\:items-start {
-    align-items: flex-start;
-  }
-
-  .sm\:items-center {
-    align-items: center;
-  }
-
-  .sm\:justify-start {
-    justify-content: flex-start;
-  }
-
-  .sm\:justify-end {
-    justify-content: flex-end;
-  }
-
-  .sm\:justify-between {
-    justify-content: space-between;
-  }
-
-  .sm\:gap-0 {
-    gap: var(--cal-spacing-0);
-  }
-
-  .sm\:gap-2 {
-    gap: var(--cal-spacing-2);
-  }
-
-  .sm\:gap-3 {
-    gap: var(--cal-spacing-3);
-  }
-
-  .sm\:gap-4 {
-    gap: var(--cal-spacing-4);
-  }
-
-  .sm\:gap-6 {
-    gap: var(--cal-spacing-6);
-  }
-
-  .sm\:gap-x-6 {
-    -moz-column-gap: var(--cal-spacing-6);
-    column-gap: var(--cal-spacing-6);
-  }
-
-  .sm\:space-x-2> :not([hidden])~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(var(--cal-spacing-2) * var(--tw-space-x-reverse));
-    margin-left: calc(var(--cal-spacing-2) * calc(1 - var(--tw-space-x-reverse)));
-  }
-
-  .sm\:space-x-4> :not([hidden])~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(var(--cal-spacing-4) * var(--tw-space-x-reverse));
-    margin-left: calc(var(--cal-spacing-4) * calc(1 - var(--tw-space-x-reverse)));
-  }
-
-  .sm\:space-y-0> :not([hidden])~ :not([hidden]) {
-    --tw-space-y-reverse: 0;
-    margin-top: calc(var(--cal-spacing-0) * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(var(--cal-spacing-0) * var(--tw-space-y-reverse));
-  }
-
-  .sm\:space-y-8> :not([hidden])~ :not([hidden]) {
-    --tw-space-y-reverse: 0;
-    margin-top: calc(var(--cal-spacing-8) * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(var(--cal-spacing-8) * var(--tw-space-y-reverse));
-  }
-
-  .sm\:divide-y> :not([hidden])~ :not([hidden]) {
-    --tw-divide-y-reverse: 0;
-    border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
-    border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
-  }
-
-  .sm\:divide-subtle> :not([hidden])~ :not([hidden]) {
-    border-color: var(--cal-border-subtle);
-  }
-
-  .sm\:self-center {
-    align-self: center;
-  }
-
-  .sm\:self-baseline {
-    align-self: baseline;
-  }
-
-  .sm\:overflow-hidden {
-    overflow: hidden;
-  }
-
-  .sm\:rounded-lg {
-    border-radius: var(--cal-radius-lg);
-  }
-
-  .sm\:rounded-md {
-    border-radius: var(--cal-radius-md);
-  }
-
-  .sm\:rounded-l-none {
-    border-top-left-radius: var(--cal-radius-none);
-    border-bottom-left-radius: var(--cal-radius-none);
-  }
-
-  .sm\:rounded-r-none {
-    border-top-right-radius: var(--cal-radius-none);
-    border-bottom-right-radius: var(--cal-radius-none);
-  }
-
-  .sm\:rounded-bl-md {
-    border-bottom-left-radius: var(--cal-radius-md);
-  }
-
-  .sm\:rounded-bl-none {
-    border-bottom-left-radius: var(--cal-radius-none);
-  }
-
-  .sm\:rounded-tl-md {
-    border-top-left-radius: var(--cal-radius-md);
-  }
-
-  .sm\:rounded-tl-none {
-    border-top-left-radius: var(--cal-radius-none);
-  }
-
-  .sm\:border-booker-width {
-    border-width: var(--cal-border-booker-width, 1px);
-  }
-
-  .sm\:border-r {
-    border-right-width: 1px;
-  }
-
-  .sm\:border-subtle {
-    border-color: var(--cal-border-subtle);
-  }
-
-  .sm\:p-0 {
-    padding: var(--cal-spacing-0);
-  }
-
-  .sm\:p-3 {
-    padding: var(--cal-spacing-3);
-  }
-
-  .sm\:p-4 {
-    padding: var(--cal-spacing-4);
-  }
-
-  .sm\:p-6 {
-    padding: var(--cal-spacing-6);
-  }
-
-  .sm\:p-8 {
-    padding: var(--cal-spacing-8);
-  }
-
-  .sm\:px-0 {
-    padding-left: var(--cal-spacing-0);
-    padding-right: var(--cal-spacing-0);
-  }
-
-  .sm\:px-10 {
-    padding-left: var(--cal-spacing-10);
-    padding-right: var(--cal-spacing-10);
-  }
-
-  .sm\:px-14 {
-    padding-left: var(--cal-spacing-14);
-    padding-right: var(--cal-spacing-14);
-  }
-
-  .sm\:px-16 {
-    padding-left: var(--cal-spacing-16);
-    padding-right: var(--cal-spacing-16);
-  }
-
-  .sm\:px-4 {
-    padding-left: var(--cal-spacing-4);
-    padding-right: var(--cal-spacing-4);
-  }
-
-  .sm\:px-5 {
-    padding-left: var(--cal-spacing-5);
-    padding-right: var(--cal-spacing-5);
-  }
-
-  .sm\:px-6 {
-    padding-left: var(--cal-spacing-6);
-    padding-right: var(--cal-spacing-6);
-  }
-
-  .sm\:px-8 {
-    padding-left: var(--cal-spacing-8);
-    padding-right: var(--cal-spacing-8);
-  }
-
-  .sm\:py-4 {
-    padding-top: var(--cal-spacing-4);
-    padding-bottom: var(--cal-spacing-4);
-  }
-
-  .sm\:py-5 {
-    padding-top: var(--cal-spacing-5);
-    padding-bottom: var(--cal-spacing-5);
-  }
-
-  .sm\:py-6 {
-    padding-top: var(--cal-spacing-6);
-    padding-bottom: var(--cal-spacing-6);
-  }
-
-  .sm\:py-8 {
-    padding-top: var(--cal-spacing-8);
-    padding-bottom: var(--cal-spacing-8);
-  }
-
-  .sm\:pb-5 {
-    padding-bottom: var(--cal-spacing-5);
-  }
-
-  .sm\:pl-0 {
-    padding-left: var(--cal-spacing-0);
-  }
-
-  .sm\:pl-3 {
-    padding-left: var(--cal-spacing-3);
-  }
-
-  .sm\:pr-5 {
-    padding-right: var(--cal-spacing-5);
-  }
-
-  .sm\:pr-6 {
-    padding-right: var(--cal-spacing-6);
-  }
-
-  .sm\:pr-8 {
-    padding-right: var(--cal-spacing-8);
-  }
-
-  .sm\:pt-0 {
-    padding-top: var(--cal-spacing-0);
-  }
-
-  .sm\:pt-24 {
-    padding-top: var(--cal-spacing-24);
-  }
-
-  .sm\:text-left {
-    text-align: left;
-  }
-
-  .sm\:text-right {
-    text-align: right;
-  }
-
-  .sm\:align-middle {
-    vertical-align: middle;
-  }
-
-  .sm\:text-5xl {
-    font-size: 3rem;
-    line-height: 1;
-  }
-
-  .sm\:text-sm {
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-  }
-
-  .sm\:text-xl {
-    font-size: 1.25rem;
-    line-height: 1.75rem;
-  }
-
-  .sm\:text-xs {
-    font-size: 0.75rem;
-    line-height: 1rem;
-  }
-
-  .sm\:font-medium {
-    font-weight: 500;
-  }
-
-  .sm\:leading-4 {
-    line-height: 1rem;
-  }
-
-  .sm\:transition-\[width\] {
-    transition-property: width;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-  }
-
-  .sm\:duration-300 {
-    transition-duration: 300ms;
-    animation-duration: 300ms;
-  }
-
-  .data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state=open] {
-    --tw-enter-translate-y: 100%;
-  }
-
-  .sm\:hover\:bg-muted:hover {
-    background-color: var(--cal-bg-muted);
-  }
-
-  .sm\:hover\:bg-subtle:hover {
-    background-color: var(--cal-bg-subtle);
-  }
-
-  :is([dir="ltr"] .sm\:ltr\:pl-0) {
-    padding-left: var(--cal-spacing-0);
-  }
-
-  :is([dir="rtl"] .sm\:rtl\:pr-0) {
-    padding-right: var(--cal-spacing-0);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-
-    .sm\:motion-reduce\:transition-none {
-      transition-property: none;
-    }
-  }
-}
-
-@media (min-width: 768px) {
-
-  .md\:not-sr-only {
-    position: static;
-    width: auto;
-    height: auto;
-    padding: 0;
-    margin: 0;
-    overflow: visible;
-    clip: auto;
-    white-space: normal;
-  }
-
-  .md\:visible {
-    visibility: visible;
-  }
-
-  .md\:relative {
-    position: relative;
-  }
-
-  .md\:sticky {
-    position: sticky;
-  }
-
-  .md\:\!bottom-20 {
-    bottom: var(--cal-spacing-20) !important;
-  }
-
-  .md\:bottom-4 {
-    bottom: var(--cal-spacing-4);
-  }
-
-  .md\:bottom-auto {
-    bottom: auto;
-  }
-
-  .md\:left-1\/2 {
-    left: 50%;
-  }
-
-  .md\:right-auto {
-    right: auto;
-  }
-
-  .md\:top-6 {
-    top: var(--cal-spacing-6);
-  }
-
-  .md\:z-10 {
-    z-index: 10;
-  }
-
-  .md\:z-auto {
-    z-index: auto;
-  }
-
-  .md\:col-span-1 {
-    grid-column: span 1 / span 1;
-  }
-
-  .md\:col-span-10 {
-    grid-column: span 10 / span 10;
-  }
-
-  .md\:col-span-11 {
-    grid-column: span 11 / span 11;
-  }
-
-  .md\:col-span-12 {
-    grid-column: span 12 / span 12;
-  }
-
-  .md\:col-span-2 {
-    grid-column: span 2 / span 2;
-  }
-
-  .md\:col-span-3 {
-    grid-column: span 3 / span 3;
-  }
-
-  .md\:col-span-4 {
-    grid-column: span 4 / span 4;
-  }
-
-  .md\:col-span-5 {
-    grid-column: span 5 / span 5;
-  }
-
-  .md\:col-span-6 {
-    grid-column: span 6 / span 6;
-  }
-
-  .md\:col-span-7 {
-    grid-column: span 7 / span 7;
-  }
-
-  .md\:col-span-8 {
-    grid-column: span 8 / span 8;
-  }
-
-  .md\:col-span-9 {
-    grid-column: span 9 / span 9;
-  }
-
-  .md\:-mx-8 {
-    margin-left: calc(var(--cal-spacing-8) * -1);
-    margin-right: calc(var(--cal-spacing-8) * -1);
-  }
-
-  .md\:mx-0 {
-    margin-left: var(--cal-spacing-0);
-    margin-right: var(--cal-spacing-0);
-  }
-
-  .md\:mx-14 {
-    margin-left: var(--cal-spacing-14);
-    margin-right: var(--cal-spacing-14);
-  }
-
-  .md\:mx-4 {
-    margin-left: var(--cal-spacing-4);
-    margin-right: var(--cal-spacing-4);
-  }
-
-  .md\:mx-5 {
-    margin-left: var(--cal-spacing-5);
-    margin-right: var(--cal-spacing-5);
-  }
-
-  .md\:mx-auto {
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .md\:my-0 {
-    margin-top: var(--cal-spacing-0);
-    margin-bottom: var(--cal-spacing-0);
-  }
-
-  .md\:my-24 {
-    margin-top: var(--cal-spacing-24);
-    margin-bottom: var(--cal-spacing-24);
-  }
-
-  .md\:-ml-8 {
-    margin-left: calc(var(--cal-spacing-8) * -1);
-  }
-
-  .md\:-mr-8 {
-    margin-right: calc(var(--cal-spacing-8) * -1);
-  }
-
-  .md\:mb-0 {
-    margin-bottom: var(--cal-spacing-0);
-  }
-
-  .md\:mb-2 {
-    margin-bottom: var(--cal-spacing-2);
-  }
-
-  .md\:mb-6 {
-    margin-bottom: var(--cal-spacing-6);
-  }
-
-  .md\:mb-8 {
-    margin-bottom: var(--cal-spacing-8);
-  }
-
-  .md\:ml-3 {
-    margin-left: var(--cal-spacing-3);
-  }
-
-  .md\:ml-5 {
-    margin-left: var(--cal-spacing-5);
-  }
-
-  .md\:mr-6 {
-    margin-right: var(--cal-spacing-6);
-  }
-
-  .md\:mt-0 {
-    margin-top: var(--cal-spacing-0);
-  }
-
-  .md\:block {
-    display: block;
-  }
-
-  .md\:inline {
-    display: inline;
-  }
-
-  .md\:flex {
-    display: flex;
-  }
-
-  .md\:inline-flex {
-    display: inline-flex;
-  }
-
-  .md\:grid {
-    display: grid;
-  }
-
-  .md\:hidden {
-    display: none;
-  }
-
-  .md\:h-0 {
-    height: var(--cal-spacing-0);
-  }
-
-  .md\:h-11 {
-    height: var(--cal-spacing-11);
-  }
-
-  .md\:h-80 {
-    height: var(--cal-spacing-80);
-  }
-
-  .md\:h-9 {
-    height: var(--cal-spacing-9);
-  }
-
-  .md\:h-\[400px\] {
-    height: 400px;
-  }
-
-  .md\:h-screen {
-    height: 100vh;
-  }
-
-  .md\:max-h-80 {
-    max-height: var(--cal-spacing-80);
-  }
-
-  .md\:max-h-min {
-    max-height: -moz-min-content;
-    max-height: min-content;
-  }
-
-  .md\:min-h-9 {
-    min-height: var(--cal-spacing-9);
-  }
-
-  .md\:w-1\/5 {
-    width: 20%;
-  }
-
-  .md\:w-11 {
-    width: var(--cal-spacing-11);
-  }
-
-  .md\:w-64 {
-    width: var(--cal-spacing-64);
-  }
-
-  .md\:w-\[520px\] {
-    width: 520px;
-  }
-
-  .md\:w-\[560px\] {
-    width: 560px;
-  }
-
-  .md\:w-\[700px\] {
-    width: 700px;
-  }
-
-  .md\:w-\[var\(--booker-main-width\)\] {
-    width: var(--booker-main-width);
-  }
-
-  .md\:w-\[var\(--booker-meta-width\)\] {
-    width: var(--booker-meta-width);
-  }
-
-  .md\:w-\[var\(--booker-timeslots-width\)\] {
-    width: var(--booker-timeslots-width);
-  }
-
-  .md\:w-auto {
-    width: auto;
-  }
-
-  .md\:w-fit {
-    width: -moz-fit-content;
-    width: fit-content;
-  }
-
-  .md\:w-full {
-    width: 100%;
-  }
-
-  .md\:min-w-\[120px\] {
-    min-width: 120px;
-  }
-
-  .md\:min-w-\[150px\] {
-    min-width: 150px;
-  }
-
-  .md\:max-w-52 {
-    max-width: var(--cal-spacing-52);
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
   }
-
-  .md\:max-w-56 {
-    max-width: var(--cal-spacing-56);
-  }
-
-  .md\:max-w-80 {
-    max-width: var(--cal-spacing-80);
-  }
-
-  .md\:max-w-\[145px\] {
-    max-width: 145px;
-  }
-
-  .md\:max-w-\[200px\] {
-    max-width: 200px;
-  }
-
-  .md\:max-w-\[300px\] {
-    max-width: 300px;
-  }
-
-  .md\:max-w-\[420px\] {
-    max-width: 420px;
-  }
-
-  .md\:max-w-full {
-    max-width: 100%;
-  }
-
-  .md\:max-w-max {
-    max-width: -moz-max-content;
-    max-width: max-content;
-  }
-
-  .md\:max-w-sm {
-    max-width: 24rem;
-  }
-
-  .md\:flex-none {
-    flex: none;
-  }
-
-  .md\:-translate-x-1\/2 {
-    --tw-translate-x: -50%;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-
-  .md\:transform {
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-
-  .md\:grid-cols-1 {
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-  }
-
-  .md\:grid-cols-10 {
-    grid-template-columns: repeat(10, minmax(0, 1fr));
-  }
-
-  .md\:grid-cols-11 {
-    grid-template-columns: repeat(11, minmax(0, 1fr));
-  }
-
-  .md\:grid-cols-12 {
-    grid-template-columns: repeat(12, minmax(0, 1fr));
-  }
-
-  .md\:grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .md\:grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
-  .md\:grid-cols-4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-
-  .md\:grid-cols-5 {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-  }
-
-  .md\:grid-cols-6 {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-  }
-
-  .md\:grid-cols-7 {
-    grid-template-columns: repeat(7, minmax(0, 1fr));
-  }
-
-  .md\:grid-cols-8 {
-    grid-template-columns: repeat(8, minmax(0, 1fr));
-  }
-
-  .md\:grid-cols-9 {
-    grid-template-columns: repeat(9, minmax(0, 1fr));
-  }
-
-  .md\:grid-cols-none {
-    grid-template-columns: none;
-  }
-
-  .md\:grid-rows-1 {
-    grid-template-rows: repeat(1, minmax(0, 1fr));
-  }
-
-  .md\:flex-row {
-    flex-direction: row;
-  }
-
-  .md\:items-start {
-    align-items: flex-start;
-  }
-
-  .md\:justify-start {
-    justify-content: flex-start;
-  }
-
-  .md\:justify-between {
-    justify-content: space-between;
-  }
-
-  .md\:gap-4 {
-    gap: var(--cal-spacing-4);
-  }
-
-  .md\:space-x-3> :not([hidden])~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(var(--cal-spacing-3) * var(--tw-space-x-reverse));
-    margin-left: calc(var(--cal-spacing-3) * calc(1 - var(--tw-space-x-reverse)));
-  }
-
-  .md\:space-x-5> :not([hidden])~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(var(--cal-spacing-5) * var(--tw-space-x-reverse));
-    margin-left: calc(var(--cal-spacing-5) * calc(1 - var(--tw-space-x-reverse)));
-  }
-
-  .md\:space-y-0> :not([hidden])~ :not([hidden]) {
-    --tw-space-y-reverse: 0;
-    margin-top: calc(var(--cal-spacing-0) * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(var(--cal-spacing-0) * var(--tw-space-y-reverse));
-  }
-
-  .md\:overflow-x-hidden {
-    overflow-x: hidden;
-  }
-
-  .md\:rounded-\[10px\] {
-    border-radius: 10px;
-  }
-
-  .md\:rounded-lg {
-    border-radius: var(--cal-radius-lg);
-  }
-
-  .md\:rounded-md {
-    border-radius: var(--cal-radius-md);
-  }
-
-  .md\:rounded-none {
-    border-radius: var(--cal-radius-none);
-  }
-
-  .md\:border {
-    border-width: 1px;
-  }
-
-  .md\:border-0 {
-    border-width: 0px;
-  }
-
-  .md\:border-booker-width {
-    border-width: var(--cal-border-booker-width, 1px);
-  }
-
-  .md\:border-l {
-    border-left-width: 1px;
-  }
-
-  .md\:border-t {
-    border-top-width: 1px;
-  }
-
-  .md\:border-none {
-    border-style: none;
-  }
-
-  .md\:border-subtle {
-    border-color: var(--cal-border-subtle);
-  }
-
-  .md\:object-center {
-    -o-object-position: center;
-    object-position: center;
-  }
-
-  .md\:p-0 {
-    padding: var(--cal-spacing-0);
-  }
-
-  .md\:p-10 {
-    padding: var(--cal-spacing-10);
-  }
-
-  .md\:p-4 {
-    padding: var(--cal-spacing-4);
-  }
-
-  .md\:p-5 {
-    padding: var(--cal-spacing-5);
-  }
-
-  .md\:p-6 {
-    padding: var(--cal-spacing-6);
-  }
-
-  .md\:p-8 {
-    padding: var(--cal-spacing-8);
-  }
-
-  .md\:px-10 {
-    padding-left: var(--cal-spacing-10);
-    padding-right: var(--cal-spacing-10);
-  }
-
-  .md\:px-2 {
-    padding-left: var(--cal-spacing-2);
-    padding-right: var(--cal-spacing-2);
-  }
-
-  .md\:px-20 {
-    padding-left: var(--cal-spacing-20);
-    padding-right: var(--cal-spacing-20);
-  }
-
-  .md\:px-4 {
-    padding-left: var(--cal-spacing-4);
-    padding-right: var(--cal-spacing-4);
-  }
-
-  .md\:px-8 {
-    padding-left: var(--cal-spacing-8);
-    padding-right: var(--cal-spacing-8);
-  }
-
-  .md\:py-2 {
-    padding-top: var(--cal-spacing-2);
-    padding-bottom: var(--cal-spacing-2);
-  }
-
-  .md\:py-2\.5 {
-    padding-top: var(--cal-spacing-2_5);
-    padding-bottom: var(--cal-spacing-2_5);
-  }
-
-  .md\:py-24 {
-    padding-top: var(--cal-spacing-24);
-    padding-bottom: var(--cal-spacing-24);
-  }
-
-  .md\:pl-0 {
-    padding-left: var(--cal-spacing-0);
-  }
-
-  .md\:pl-10 {
-    padding-left: var(--cal-spacing-10);
-  }
-
-  .md\:pr-10 {
-    padding-right: var(--cal-spacing-10);
-  }
-
-  .md\:pt-0 {
-    padding-top: var(--cal-spacing-0);
-  }
-
-  .md\:pt-10 {
-    padding-top: var(--cal-spacing-10);
-  }
-
-  .md\:pt-4 {
-    padding-top: var(--cal-spacing-4);
-  }
-
-  .md\:text-left {
-    text-align: left;
-  }
-
-  .md\:text-2xl {
-    font-size: 1.5rem;
-    line-height: 2rem;
-  }
-
-  .md\:overflow-x-hidden.scrollbar {
-    overflow-x: hidden;
-  }
-
-  .md\:overflow-x-hidden.scrollbar-thin {
-    overflow-x: hidden;
-  }
-
-  .md\:radix-state-open\:rotate-0[data-state="open"] {
-    --tw-rotate: 0deg;
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-
-  :is([dir="ltr"] .md\:ltr\:right-0) {
-    right: var(--cal-spacing-0);
-  }
-
-  :is([dir="ltr"] .md\:ltr\:mx-auto) {
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  :is([dir="ltr"] .ltr\:md\:border-l) {
-    border-left-width: 1px;
-  }
-
-  :is([dir="rtl"] .md\:rtl\:left-0) {
-    left: var(--cal-spacing-0);
-  }
-}
-
-@media (min-width: 1024px) {
-
-  .lg\:sticky {
-    position: sticky;
-  }
-
-  .lg\:left-1\/2 {
-    left: 50%;
-  }
-
-  .lg\:left-3 {
-    left: var(--cal-spacing-3);
-  }
-
-  .lg\:col-span-1 {
-    grid-column: span 1 / span 1;
-  }
-
-  .lg\:col-span-10 {
-    grid-column: span 10 / span 10;
-  }
-
-  .lg\:col-span-11 {
-    grid-column: span 11 / span 11;
-  }
-
-  .lg\:col-span-12 {
-    grid-column: span 12 / span 12;
-  }
-
-  .lg\:col-span-2 {
-    grid-column: span 2 / span 2;
-  }
-
-  .lg\:col-span-3 {
-    grid-column: span 3 / span 3;
-  }
-
-  .lg\:col-span-4 {
-    grid-column: span 4 / span 4;
-  }
-
-  .lg\:col-span-5 {
-    grid-column: span 5 / span 5;
-  }
-
-  .lg\:col-span-6 {
-    grid-column: span 6 / span 6;
-  }
-
-  .lg\:col-span-7 {
-    grid-column: span 7 / span 7;
-  }
-
-  .lg\:col-span-8 {
-    grid-column: span 8 / span 8;
-  }
-
-  .lg\:col-span-9 {
-    grid-column: span 9 / span 9;
-  }
-
-  .lg\:-mx-6 {
-    margin-left: calc(var(--cal-spacing-6) * -1);
-    margin-right: calc(var(--cal-spacing-6) * -1);
-  }
-
-  .lg\:mx-0 {
-    margin-left: var(--cal-spacing-0);
-    margin-right: var(--cal-spacing-0);
-  }
-
-  .lg\:-mt-12 {
-    margin-top: calc(var(--cal-spacing-12) * -1);
-  }
-
-  .lg\:mb-0 {
-    margin-bottom: var(--cal-spacing-0);
-  }
-
-  .lg\:mb-4 {
-    margin-bottom: var(--cal-spacing-4);
-  }
-
-  .lg\:mb-5 {
-    margin-bottom: var(--cal-spacing-5);
-  }
-
-  .lg\:mb-7 {
-    margin-bottom: var(--cal-spacing-7);
-  }
-
-  .lg\:mb-8 {
-    margin-bottom: var(--cal-spacing-8);
-  }
-
-  .lg\:ml-0 {
-    margin-left: var(--cal-spacing-0);
-  }
-
-  .lg\:ml-10 {
-    margin-left: var(--cal-spacing-10);
-  }
-
-  .lg\:ml-14 {
-    margin-left: var(--cal-spacing-14);
-  }
-
-  .lg\:ml-8 {
-    margin-left: var(--cal-spacing-8);
-  }
-
-  .lg\:mr-0 {
-    margin-right: var(--cal-spacing-0);
-  }
-
-  .lg\:mt-0 {
-    margin-top: var(--cal-spacing-0);
-  }
-
-  .lg\:mt-12 {
-    margin-top: var(--cal-spacing-12);
-  }
-
-  .lg\:mt-24 {
-    margin-top: var(--cal-spacing-24);
-  }
-
-  .lg\:mt-4 {
-    margin-top: var(--cal-spacing-4);
-  }
-
-  .lg\:block {
-    display: block;
-  }
-
-  .lg\:inline {
-    display: inline;
-  }
-
-  .lg\:flex {
-    display: flex;
-  }
-
-  .lg\:inline-flex {
-    display: inline-flex;
-  }
-
-  .lg\:grid {
-    display: grid;
-  }
-
-  .lg\:hidden {
-    display: none;
-  }
-
-  .lg\:h-\[100\%\] {
-    height: 100%;
-  }
-
-  .lg\:w-1\/3 {
-    width: 33.333333%;
-  }
-
-  .lg\:w-56 {
-    width: var(--cal-spacing-56);
-  }
-
-  .lg\:w-\[calc\(100\%\+48px\)\] {
-    width: calc(100% + 48px);
-  }
-
-  .lg\:w-\[var\(--booker-main-width\)\] {
-    width: var(--booker-main-width);
-  }
-
-  .lg\:w-auto {
-    width: auto;
-  }
-
-  .lg\:w-fit {
-    width: -moz-fit-content;
-    width: fit-content;
-  }
-
-  .lg\:min-w-72 {
-    min-width: var(--cal-spacing-72);
-  }
-
-  .lg\:max-w-2xl {
-    max-width: 42rem;
-  }
-
-  .lg\:max-w-3xl {
-    max-width: 48rem;
-  }
-
-  .lg\:max-w-72 {
-    max-width: var(--cal-spacing-72);
-  }
-
-  .lg\:max-w-\[50\%\] {
-    max-width: 50%;
-  }
-
-  .lg\:max-w-full {
-    max-width: 100%;
-  }
-
-  .lg\:max-w-screen-2xl {
-    max-width: 1536px;
-  }
-
-  .lg\:translate-x-0 {
-    --tw-translate-x: var(--cal-spacing-0);
-    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-  }
-
-  .lg\:grid-cols-1 {
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-  }
-
-  .lg\:grid-cols-10 {
-    grid-template-columns: repeat(10, minmax(0, 1fr));
-  }
-
-  .lg\:grid-cols-11 {
-    grid-template-columns: repeat(11, minmax(0, 1fr));
-  }
-
-  .lg\:grid-cols-12 {
-    grid-template-columns: repeat(12, minmax(0, 1fr));
-  }
-
-  .lg\:grid-cols-2 {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .lg\:grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
-  .lg\:grid-cols-4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-
-  .lg\:grid-cols-5 {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-  }
-
-  .lg\:grid-cols-6 {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-  }
-
-  .lg\:grid-cols-7 {
-    grid-template-columns: repeat(7, minmax(0, 1fr));
-  }
-
-  .lg\:grid-cols-8 {
-    grid-template-columns: repeat(8, minmax(0, 1fr));
-  }
-
-  .lg\:grid-cols-9 {
-    grid-template-columns: repeat(9, minmax(0, 1fr));
-  }
-
-  .lg\:grid-cols-none {
-    grid-template-columns: none;
-  }
-
-  .lg\:flex-row {
-    flex-direction: row;
-  }
-
-  .lg\:flex-col {
-    flex-direction: column;
-  }
-
-  .lg\:items-center {
-    align-items: center;
-  }
-
-  .lg\:justify-center {
-    justify-content: center;
-  }
-
-  .lg\:space-x-4> :not([hidden])~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(var(--cal-spacing-4) * var(--tw-space-x-reverse));
-    margin-left: calc(var(--cal-spacing-4) * calc(1 - var(--tw-space-x-reverse)));
-  }
-
-  .lg\:space-y-0> :not([hidden])~ :not([hidden]) {
-    --tw-space-y-reverse: 0;
-    margin-top: calc(var(--cal-spacing-0) * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(var(--cal-spacing-0) * var(--tw-space-y-reverse));
-  }
-
-  .lg\:space-y-5> :not([hidden])~ :not([hidden]) {
-    --tw-space-y-reverse: 0;
-    margin-top: calc(var(--cal-spacing-5) * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(var(--cal-spacing-5) * var(--tw-space-y-reverse));
-  }
-
-  .lg\:space-y-6> :not([hidden])~ :not([hidden]) {
-    --tw-space-y-reverse: 0;
-    margin-top: calc(var(--cal-spacing-6) * calc(1 - var(--tw-space-y-reverse)));
-    margin-bottom: calc(var(--cal-spacing-6) * var(--tw-space-y-reverse));
-  }
-
-  .lg\:rounded {
-    border-radius: var(--cal-radius);
-  }
-
-  .lg\:rounded-md {
-    border-radius: var(--cal-radius-md);
-  }
-
-  .lg\:border {
-    border-width: 1px;
-  }
-
-  .lg\:bg-subtle {
-    background-color: var(--cal-bg-subtle);
-  }
-
-  .lg\:p-20 {
-    padding: var(--cal-spacing-20);
-  }
-
-  .lg\:px-0 {
-    padding-left: var(--cal-spacing-0);
-    padding-right: var(--cal-spacing-0);
-  }
-
-  .lg\:px-2 {
-    padding-left: var(--cal-spacing-2);
-    padding-right: var(--cal-spacing-2);
-  }
-
-  .lg\:px-3 {
-    padding-left: var(--cal-spacing-3);
-    padding-right: var(--cal-spacing-3);
-  }
-
-  .lg\:px-6 {
-    padding-left: var(--cal-spacing-6);
-    padding-right: var(--cal-spacing-6);
-  }
-
-  .lg\:px-8 {
-    padding-left: var(--cal-spacing-8);
-    padding-right: var(--cal-spacing-8);
-  }
-
-  .lg\:py-12 {
-    padding-top: var(--cal-spacing-12);
-    padding-bottom: var(--cal-spacing-12);
-  }
-
-  .lg\:py-\[6px\] {
-    padding-top: 6px;
-    padding-bottom: 6px;
-  }
-
-  .lg\:pb-0 {
-    padding-bottom: var(--cal-spacing-0);
-  }
-
-  .lg\:pb-5 {
-    padding-bottom: var(--cal-spacing-5);
-  }
-
-  .lg\:pl-11 {
-    padding-left: var(--cal-spacing-11);
-  }
-
-  .lg\:pl-12 {
-    padding-left: var(--cal-spacing-12);
-  }
-
-  .lg\:pl-\[6px\] {
-    padding-left: 6px;
-  }
-
-  .lg\:pt-0 {
-    padding-top: var(--cal-spacing-0);
-  }
-
-  .lg\:pt-4 {
-    padding-top: var(--cal-spacing-4);
-  }
-
-  .lg\:opacity-100 {
-    opacity: 1;
-  }
-
-  .lg\:\[--booker-meta-width\:280px\] {
-    --booker-meta-width: 280px;
-  }
-
-  .lg\:\[--booker-meta-width\:340px\] {
-    --booker-meta-width: 340px;
-  }
-
-  .lg\:\[--booker-meta-width\:424px\] {
-    --booker-meta-width: 424px;
-  }
-
-  .lg\:\[--booker-timeslots-width\:280px\] {
-    --booker-timeslots-width: 280px;
-  }
-
-  .lg\:\[--troubleshooter-meta-width\:430px\] {
-    --troubleshooter-meta-width: 430px;
-  }
-
-  .lg\:hover\:bg-emphasis:hover {
-    background-color: var(--cal-bg-emphasis);
-  }
-
-  .lg\:hover\:text-emphasis:hover {
-    color: var(--cal-text-emphasis);
-  }
-
-  :is([dir="ltr"] .lg\:ltr\:mr-2) {
-    margin-right: var(--cal-spacing-2);
-  }
-
-  :is([dir="rtl"] .lg\:rtl\:ml-2) {
-    margin-left: var(--cal-spacing-2);
-  }
-}
-
-@media (min-width: 1280px) {
-
-  .xl\:mx-20 {
-    margin-left: var(--cal-spacing-20);
-    margin-right: var(--cal-spacing-20);
-  }
-
-  .xl\:mr-0 {
-    margin-right: var(--cal-spacing-0);
-  }
-
-  .xl\:mt-0 {
-    margin-top: var(--cal-spacing-0);
-  }
-
-  .xl\:block {
-    display: block;
-  }
-
-  .xl\:flex {
-    display: flex;
-  }
-
-  .xl\:hidden {
-    display: none;
-  }
-
-  .xl\:w-full {
-    width: 100%;
-  }
-
-  .xl\:max-w-80 {
-    max-width: var(--cal-spacing-80);
-  }
-
-  .xl\:max-w-full {
-    max-width: 100%;
-  }
-
-  .xl\:flex-row {
-    flex-direction: row;
-  }
-
-  .xl\:justify-between {
-    justify-content: space-between;
-  }
-
-  .xl\:space-x-5> :not([hidden])~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(var(--cal-spacing-5) * var(--tw-space-x-reverse));
-    margin-left: calc(var(--cal-spacing-5) * calc(1 - var(--tw-space-x-reverse)));
-  }
-
-  .xl\:space-x-6> :not([hidden])~ :not([hidden]) {
-    --tw-space-x-reverse: 0;
-    margin-right: calc(var(--cal-spacing-6) * var(--tw-space-x-reverse));
-    margin-left: calc(var(--cal-spacing-6) * calc(1 - var(--tw-space-x-reverse)));
-  }
-
-  .xl\:pt-0 {
-    padding-top: var(--cal-spacing-0);
-  }
-}
-
-@media (min-width: 1536px) {
-
-  .\32xl\:rounded-\[20px\] {
-    border-radius: 20px;
-  }
-
-  .\32xl\:border {
-    border-width: 1px;
-  }
-
-  .\32xl\:border-subtle {
-    border-color: var(--cal-border-subtle);
-  }
-
-  .\32xl\:bg-default {
-    background-color: var(--cal-bg, white);
-  }
-
-  .\32xl\:px-28 {
-    padding-left: var(--cal-spacing-28);
-    padding-right: var(--cal-spacing-28);
-  }
-
-  .\32xl\:py-6 {
-    padding-top: var(--cal-spacing-6);
-    padding-bottom: var(--cal-spacing-6);
-  }
-}
-
-@media (display-mode: standalone) {
-
-  .pwa\:bottom-\[max\(7rem\2c _calc\(5rem_\+_env\(safe-area-inset-bottom\)\)\)\] {
-    bottom: max(7rem, calc(5rem + env(safe-area-inset-bottom)));
-  }
-
-  .pwa\:-mx-2 {
-    margin-left: calc(var(--cal-spacing-2) * -1);
-    margin-right: calc(var(--cal-spacing-2) * -1);
-  }
-
-  .pwa\:pb-\[max\(0\.25rem\2c env\(safe-area-inset-bottom\)\)\] {
-    padding-bottom: max(0.25rem, env(safe-area-inset-bottom));
-  }
-}
-
-.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  appearance: none;
-}
-
-.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  appearance: none;
-}
-
-.\[\&\:first-child\]\:before\:rounded-t-full:first-child::before {
-  content: var(--tw-content);
-  border-top-left-radius: var(--cal-radius-full);
-  border-top-right-radius: var(--cal-radius-full);
-}
-
-.\[\&\:first-child\]\:after\:rounded-t-full:first-child::after {
-  content: var(--tw-content);
-  border-top-left-radius: var(--cal-radius-full);
-  border-top-right-radius: var(--cal-radius-full);
-}
-
-.\[\&\:focus-within\]\:border-subtle:focus-within {
-  border-color: var(--cal-border-subtle);
-}
-
-.\[\&\:focus-within\]\:ring-2:focus-within {
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-
-.\[\&\:focus-within\]\:ring-brand-default:focus-within {
-  --tw-ring-color: var(--cal-brand, #111827);
-}
-
-.\[\&\:has\(\+_input\:hover\)\]\:border-emphasis:has(+ input:hover) {
-  border-color: var(--cal-border-emphasis);
-}
-
-.\[\&\:has\(\+_input\:hover\)\]\:border-r-default:has(+ input:hover) {
-  border-right-color: var(--cal-border);
-}
-
-.\[\&\:has\(\:disabled\)\]\:cursor-not-allowed:has(:disabled) {
-  cursor: not-allowed;
-}
-
-.\[\&\:has\(\:disabled\)\]\:bg-subtle:has(:disabled) {
-  background-color: var(--cal-bg-subtle);
-}
-
-.\[\&\:has\(\:disabled\)\]\:hover\:border-default:hover:has(:disabled) {
-  border-color: var(--cal-border);
-}
-
-.first\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-l-md:has([aria-selected]):first-child {
-  border-top-left-radius: var(--cal-radius-md);
-  border-bottom-left-radius: var(--cal-radius-md);
-}
-
-.last\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-r-md:has([aria-selected]):last-child {
-  border-top-right-radius: var(--cal-radius-md);
-  border-bottom-right-radius: var(--cal-radius-md);
-}
-
-.\[\&\:has\(\[aria-selected\]\.day-range-end\)\]\:rounded-r-md:has([aria-selected].day-range-end) {
-  border-top-right-radius: var(--cal-radius-md);
-  border-bottom-right-radius: var(--cal-radius-md);
-}
-
-.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
-  padding-right: var(--cal-spacing-0);
-}
-
-.\[\&\:has\(input\:checked\)\]\:border-emphasis:has(input:checked) {
-  border-color: var(--cal-border-emphasis);
-}
-
-.\[\&\:has\(input\:checked\)\]\:border-error:has(input:checked) {
-  border-color: var(--cal-border-error);
-}
-
-.\[\&\:last-child\]\:before\:rounded-b-full:last-child::before {
-  content: var(--tw-content);
-  border-bottom-right-radius: var(--cal-radius-full);
-  border-bottom-left-radius: var(--cal-radius-full);
-}
-
-.\[\&\:last-child\]\:after\:rounded-b-full:last-child::after {
-  content: var(--tw-content);
-  border-bottom-right-radius: var(--cal-radius-full);
-  border-bottom-left-radius: var(--cal-radius-full);
-}
-
-.focus\:\[\&\:not\(\:disabled\)\]\:bg-subtle:not(:disabled):focus {
-  background-color: var(--cal-bg-subtle);
-}
-
-.hover\:\[\&\:not\(\:disabled\)\]\:bg-subtle:not(:disabled):hover {
-  background-color: var(--cal-bg-subtle);
-}
-
-.\[\&\>\*\:first-child\]\:mt-1>*:first-child {
-  margin-top: var(--cal-spacing-1);
-}
-
-.\[\&\>\*\:first-child\]\:rounded-l-\[var\(--btn-group-radius\)\]>*:first-child {
-  border-top-left-radius: var(--btn-group-radius);
-  border-bottom-left-radius: var(--btn-group-radius);
-}
-
-.\[\&\>\*\:first-child\]\:rounded-t-md>*:first-child {
-  border-top-left-radius: var(--cal-radius-md);
-  border-top-right-radius: var(--cal-radius-md);
-}
-
-.\[\&\>\*\:first-child\]\:border>*:first-child {
-  border-width: 1px;
-}
-
-.\[\&\>\*\:first-child\]\:border-default>*:first-child {
-  border-color: var(--cal-border);
-}
-
-.\[\&\>\*\:first-child\]\:\!p-0>*:first-child {
-  padding: var(--cal-spacing-0) !important;
-}
-
-.hover\:\[\&\>\*\:first-child\]\:border-gray-400>*:first-child:hover {
-  --tw-border-opacity: 1;
-  border-color: rgb(156 163 175 / var(--tw-border-opacity));
-}
-
-:is([dir="ltr"] .ltr\:\[\&\>\*\:first-child\]\:ml-0>*:first-child) {
-  margin-left: var(--cal-spacing-0);
-}
-
-:is([dir="ltr"] .ltr\:\[\&\>\*\:first-child\]\:rounded-l-md>*:first-child) {
-  border-top-left-radius: var(--cal-radius-md);
-  border-bottom-left-radius: var(--cal-radius-md);
-}
-
-:is([dir="ltr"] .ltr\:\[\&\>\*\:first-child\]\:border-l>*:first-child) {
-  border-left-width: 1px;
-}
-
-:is([dir="rtl"] .rtl\:\[\&\>\*\:first-child\]\:rounded-l-none>*:first-child) {
-  border-top-left-radius: var(--cal-radius-none);
-  border-bottom-left-radius: var(--cal-radius-none);
-}
-
-:is([dir="rtl"] .rtl\:\[\&\>\*\:first-child\]\:rounded-r-\[var\(--btn-group-radius\)\]>*:first-child) {
-  border-top-right-radius: var(--btn-group-radius);
-  border-bottom-right-radius: var(--btn-group-radius);
-}
-
-:is([dir="rtl"] .rtl\:\[\&\>\*\:first-child\]\:rounded-r-md>*:first-child) {
-  border-top-right-radius: var(--cal-radius-md);
-  border-bottom-right-radius: var(--cal-radius-md);
-}
-
-:is([dir="rtl"] .rtl\:\[\&\>\*\:first-child\]\:border-r>*:first-child) {
-  border-right-width: 1px;
-}
-
-.\[\&\>\*\:last-child\]\:mb-1>*:last-child {
-  margin-bottom: var(--cal-spacing-1);
-}
-
-.\[\&\>\*\:last-child\]\:rotate-180>*:last-child {
-  --tw-rotate: 180deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.\[\&\>\*\:last-child\]\:rounded-b-md>*:last-child {
-  border-bottom-right-radius: var(--cal-radius-md);
-  border-bottom-left-radius: var(--cal-radius-md);
-}
-
-.\[\&\>\*\:last-child\]\:rounded-b-xl>*:last-child {
-  border-bottom-right-radius: var(--cal-radius-xl);
-  border-bottom-left-radius: var(--cal-radius-xl);
-}
-
-.\[\&\>\*\:last-child\]\:rounded-r-\[var\(--btn-group-radius\)\]>*:last-child {
-  border-top-right-radius: var(--btn-group-radius);
-  border-bottom-right-radius: var(--btn-group-radius);
-}
-
-.\[\&\>\*\:last-child\]\:border-b>*:last-child {
-  border-bottom-width: 1px;
-}
-
-.\[\&\>\*\:last-child\]\:transition-transform>*:last-child {
-  transition-property: transform;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-:is([dir="ltr"] .ltr\:\[\&\>\*\:last-child\]\:rounded-r-md>*:last-child) {
-  border-top-right-radius: var(--cal-radius-md);
-  border-bottom-right-radius: var(--cal-radius-md);
-}
-
-:is([dir="rtl"] .rtl\:\[\&\>\*\:last-child\]\:rounded-l-\[var\(--btn-group-radius\)\]>*:last-child) {
-  border-top-left-radius: var(--btn-group-radius);
-  border-bottom-left-radius: var(--btn-group-radius);
-}
-
-:is([dir="rtl"] .rtl\:\[\&\>\*\:last-child\]\:rounded-l-md>*:last-child) {
-  border-top-left-radius: var(--cal-radius-md);
-  border-bottom-left-radius: var(--cal-radius-md);
-}
-
-:is([dir="rtl"] .rtl\:\[\&\>\*\:last-child\]\:rounded-r-none>*:last-child) {
-  border-top-right-radius: var(--cal-radius-none);
-  border-bottom-right-radius: var(--cal-radius-none);
-}
-
-.\[\&\>\*\:not\(\:first-child\)\]\:-ml-\[1px\]>*:not(:first-child) {
-  margin-left: -1px;
-}
-
-.\[\&\>\*\:not\(\:first-child\)\]\:hidden>*:not(:first-child) {
-  display: none;
-}
-
-.\[\&\>\*\]\:flex-1>* {
-  flex: 1 1 0%;
 }
-
 @keyframes pulse {
-
   50% {
-    opacity: .5;
+    opacity: 0.5;
   }
 }
-
-.\[\&\>\*\]\:animate-pulse>* {
-  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-.\[\&\>\*\]\:justify-center>* {
-  justify-content: center;
-}
-
-.\[\&\>\*\]\:rounded-none>* {
-  border-radius: var(--cal-radius-none);
-}
-
-.\[\&\>\*\]\:border>* {
-  border-width: 1px;
-}
-
-.\[\&\>\*\]\:border-t-0>* {
-  border-top-width: 0px;
-}
-
-.\[\&\>\*\]\:border-subtle>* {
-  border-color: var(--cal-border-subtle);
-}
-
-.\[\&\>\*\]\:bg-emphasis>* {
-  background-color: var(--cal-bg-emphasis);
-}
-
-.\[\&\>\*\]\:px-4>* {
-  padding-left: var(--cal-spacing-4);
-  padding-right: var(--cal-spacing-4);
-}
-
-.\[\&\>\*\]\:py-6>* {
-  padding-top: var(--cal-spacing-6);
-  padding-bottom: var(--cal-spacing-6);
-}
-
-.\[\&\>\*\]\:text-emphasis>* {
-  color: var(--cal-text-emphasis);
-}
-
-.hover\:\[\&\>\*\]\:z-\[1\]>*:hover {
-  z-index: 1;
-}
-
-@media (min-width: 640px) {
-
-  .\[\&\>\*\]\:sm\:px-6>* {
-    padding-left: var(--cal-spacing-6);
-    padding-right: var(--cal-spacing-6);
+@keyframes enter {
+  0% {
+    opacity: var(--tw-enter-opacity, 1);
+    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0)
+      scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1))
+      rotate(var(--tw-enter-rotate, 0));
+    filter: blur(var(--tw-enter-blur, 0));
   }
 }
-
-.\[\&\>a\]\:-ml-\[1px\]>a {
-  margin-left: -1px;
-}
-
-.hover\:\[\&\>a\]\:z-\[1\]>a:hover {
-  z-index: 1;
-}
-
-.\[\&\>button\]\:-ml-\[1px\]>button {
-  margin-left: -1px;
-}
-
-.hover\:\[\&\>button\]\:z-\[1\]>button:hover {
-  z-index: 1;
-}
-
-.\[\&\[aria-checked\=\'false\'\]\]\:hover\:text-emphasis:hover[aria-checked='false'] {
-  color: var(--cal-text-emphasis);
-}
-
-.\[\&\[aria-current\=\'page\'\]\]\:\!bg-transparent[aria-current='page'] {
-  background-color: transparent !important;
-}
-
-.\[\&\[aria-current\=\'page\'\]\]\:bg-emphasis[aria-current='page'] {
-  background-color: var(--cal-bg-emphasis);
-}
-
-.\[\&\[aria-current\=\'page\'\]\]\:bg-subtle[aria-current='page'] {
-  background-color: var(--cal-bg-subtle);
-}
-
-.\[\&\[aria-current\=\'page\'\]\]\:text-emphasis[aria-current='page'] {
-  color: var(--cal-text-emphasis);
-}
-
-.\[\&\[aria-current\=\'page\'\]\]\:text-inherit[aria-current='page'] {
-  color: inherit;
-}
-
-html.todesktop .todesktop\:\[\&\[aria-current\=\'page\'\]\]\:bg-emphasis[aria-current='page'] {
-  background-color: var(--cal-bg-emphasis);
-}
-
-:is([dir="ltr"] .ltr\:\[\&\[data-state\=\'checked\'\]\]\:translate-x-\[13px\][data-state='checked']) {
-  --tw-translate-x: 13px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-:is([dir="ltr"] .ltr\:\[\&\[data-state\=\'checked\'\]\]\:translate-x-\[17px\][data-state='checked']) {
-  --tw-translate-x: 17px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-:is([dir="rtl"] .rtl\:\[\&\[data-state\=\'checked\'\]\]\:-translate-x-\[13px\][data-state='checked']) {
-  --tw-translate-x: -13px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-:is([dir="rtl"] .rtl\:\[\&\[data-state\=\'checked\'\]\]\:-translate-x-\[17px\][data-state='checked']) {
-  --tw-translate-x: -17px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.\[\&_\.current-timezone\:before\]\:focus-within\:opacity-100:focus-within .current-timezone:before {
-  opacity: 1;
-}
-
-.\[\&_\.current-timezone\:before\]\:hover\:opacity-100:hover .current-timezone:before {
-  opacity: 1;
-}
-
-.\[\&_\.modalsticky\]\:sticky .modalsticky {
-  position: sticky;
-}
-
-.\[\&_\.modalsticky\]\:bottom-0 .modalsticky {
-  bottom: var(--cal-spacing-0);
-}
-
-.\[\&_\.modalsticky\]\:left-0 .modalsticky {
-  left: var(--cal-spacing-0);
-}
-
-.\[\&_\.modalsticky\]\:right-0 .modalsticky {
-  right: var(--cal-spacing-0);
-}
-
-.\[\&_\.modalsticky\]\:-mx-8 .modalsticky {
-  margin-left: calc(var(--cal-spacing-8) * -1);
-  margin-right: calc(var(--cal-spacing-8) * -1);
-}
-
-.\[\&_\.modalsticky\]\:border-t .modalsticky {
-  border-top-width: 1px;
-}
-
-.\[\&_\.modalsticky\]\:border-t-subtle .modalsticky {
-  border-top-color: var(--cal-border-subtle);
-}
-
-.\[\&_\.modalsticky\]\:bg-default .modalsticky {
-  background-color: var(--cal-bg, white);
-}
-
-.\[\&_\.modalsticky\]\:px-8 .modalsticky {
-  padding-left: var(--cal-spacing-8);
-  padding-right: var(--cal-spacing-8);
-}
-
-.\[\&_\.modalsticky\]\:py-4 .modalsticky {
-  padding-top: var(--cal-spacing-4);
-  padding-bottom: var(--cal-spacing-4);
-}
-
-.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
-  padding-left: var(--cal-spacing-2);
-  padding-right: var(--cal-spacing-2);
-}
-
-.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
-  padding-top: var(--cal-spacing-1_5);
-  padding-bottom: var(--cal-spacing-1_5);
-}
-
-.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
-  font-size: 0.75rem;
-  line-height: 1rem;
-}
-
-.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
-  font-weight: 500;
-}
-
-.\[\&_\[cmdk-group-heading\]\]\:text-muted [cmdk-group-heading] {
-  color: var(--cal-text-muted);
-}
-
-.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden])~[cmdk-group] {
-  padding-top: var(--cal-spacing-0);
-}
-
-.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
-  padding-left: var(--cal-spacing-2);
-  padding-right: var(--cal-spacing-2);
-}
-
-.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
-  height: var(--cal-spacing-5);
-}
-
-.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
-  width: var(--cal-spacing-5);
-}
-
-.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
-  height: var(--cal-spacing-12);
-}
-
-.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
-  padding-left: var(--cal-spacing-2);
-  padding-right: var(--cal-spacing-2);
-}
-
-.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
-  padding-top: var(--cal-spacing-3);
-  padding-bottom: var(--cal-spacing-3);
-}
-
-.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
-  height: var(--cal-spacing-5);
-}
-
-.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
-  width: var(--cal-spacing-5);
-}
-
-.\[\&_a\]\:rounded-none a {
-  border-radius: var(--cal-radius-none);
-}
-
-.\[\&_a\]\:text-blue-500 a {
-  --tw-text-opacity: 1;
-  color: rgb(59 130 246 / var(--tw-text-opacity));
-}
-
-.\[\&_a\]\:underline a {
-  text-decoration-line: underline;
-}
-
-.\[\&_a\]\:hover\:text-blue-600:hover a {
-  --tw-text-opacity: 1;
-  color: rgb(37 99 235 / var(--tw-text-opacity));
-}
-
-.\[\&_button\]\:rounded-none button {
-  border-radius: var(--cal-radius-none);
-}
-
-.\[\&_iframe\]\:h-full iframe {
-  height: 100%;
-}
-
-.\[\&_iframe\]\:min-h-\[315px\] iframe {
-  min-height: 315px;
-}
-
-.\[\&_iframe\]\:w-full iframe {
-  width: 100%;
-}
-
-.\[\&_img\]\:h-\[15px\] img {
-  height: 15px;
-}
-
-.\[\&_input\]\:mb-0 input {
-  margin-bottom: var(--cal-spacing-0);
-}
-
-.\[\&_input\]\:leading-4 input {
-  line-height: 1rem;
-}
-
-.\[\&_label\]\:my-1 label {
-  margin-top: var(--cal-spacing-1);
-  margin-bottom: var(--cal-spacing-1);
-}
-
-.\[\&_label\]\:font-normal label {
-  font-weight: 400;
-}
-
-.\[\&_svg\]\:invisible svg {
-  visibility: hidden;
-}
-
-.\[\&_tr\:last-child\]\:border-0 tr:last-child {
-  border-width: 0px;
-}
-
-.\[\&_tr\]\:border-b tr {
-  border-bottom-width: 1px;
-}
-
-.\[\&_tr\]\:bg-subtle tr {
-  background-color: var(--cal-bg-subtle);
-}
-
-@media(max-width:1270px) {
-
-  .\[\@media\(max-width\:1270px\)\]\:grid-cols-3 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+@keyframes exit {
+  to {
+    opacity: var(--tw-exit-opacity, 1);
+    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0)
+      scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1))
+      rotate(var(--tw-exit-rotate, 0));
+    filter: blur(var(--tw-exit-blur, 0));
   }
 }
-
-@media(max-width:260px) {
-
-  .\[\@media\(max-width\:260px\)\]\:w-full {
-    width: 100%;
+@keyframes fade-in-up {
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
   }
-
-  .\[\@media\(max-width\:260px\)\]\:justify-center {
-    justify-content: center;
+  to {
+    opacity: 1;
+    transform: none;
   }
 }
-
-@media(max-width:500px) {
-
-  .\[\@media\(max-width\:500px\)\]\:grid-cols-1 {
-    grid-template-columns: repeat(1, minmax(0, 1fr));
+@keyframes spinning {
+  to {
+    transform: rotate(360deg);
   }
 }
 
-@media(max-width:730px) {
-
-  .\[\@media\(max-width\:730px\)\]\:grid-cols-1 {
-    grid-template-columns: repeat(1, minmax(0, 1fr));
-  }
-}
-
-input:hover+.\[input\:hover_\+_\&\]\:border-emphasis {
-  border-color: var(--cal-border-emphasis);
-}
-
-input:hover+.\[input\:hover_\+_\&\]\:border-l-default {
-  border-left-color: var(--cal-border);
-}
-
-
-.react-tel-input {
-  font-family: 'Roboto', sans-serif;
-  font-size: 15px;
-  position: relative;
-  width: 100%
-}
-
-.react-tel-input :disabled {
-  cursor: not-allowed
-}
-
-.react-tel-input .flag {
-  width: 16px;
-  height: 11px;
-  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAACmCAMAAAACnqETAAADAFBMVEUAAAD30gQCKn0GJJ4MP4kMlD43WGf9/f329vcBAQHhAADx8vHvAwL8AQL7UlL4RUUzqDP2MjLp6un2Jyj0Ghn2PTr9fHvi5OJYuln7Xl75+UPpNzXUAQH29jH6cXC+AAIAJwBNtE/23Ff5aGdDr0TJAQHsZV3qR0IAOQB3x3fdRD/Z2NvuWFLkcG7fVlH4kI4AAlXO0M8BATsdS6MCagIBfQEASgPoKSc4VKL442q4xeQAigD46eetAABYd9jvf3nZMiwAAoD30zz55X5ng9tPbKZnwGXz8x77+lY7OTjzzikABGsenh72pKNPldEAWgHgGBgAACH88/Gqt95JR0OWAwP3uLd/qdr53kMBBJJ3d3XMPTpWer8NnAwABKPH1O1VVFIuLSz13NtZnlf2kEh9keLn7vfZ4vNkZGHzvwJIXZRfZLuDwfv4y8tvk79LlUblzsxorGcCBusFKuYCCcdmfq5jqvlxt/tzktEABLb8/HL2tlTAw8SLlMFpj/ZlpNhBZ81BYbQcGxuToN9SYdjXY2Lz7lD0dCQ6S9Dm0EUCYPdDlvWWvd2AnviXqc11eMZTqPc3cPMCRev16ZrRUE0Hf/tNT7HIJyTptDVTffSsTkvhtgQ0T4jigoFUx/g+hsX9/QUHzQY1dbJ7sHV02Pduvd0leiK1XmaTrfpCQPgELrrdsrY1NamgyPrh03iPxosvX92ysbCgoZzk5kP1YD7t6AILnu+45LykNS40qvXDdHnR6tBennz6u3TSxU1Or9Swz6wqzCsPZKzglJbIqEY8hDhyAgFzbJxuOC+Li4d9sJLFsnhwbvH2d1A3kzAqPZQITsN76nq2dzaZdKJf4F6RJkb078YFiM+tnWZGh2F+dDibykYoMcsnekdI1UhCAwWb25qVkEq43km9yBrclQMGwfyZ3/zZ2QK9gJxsJWCBUk32QwqOSYKRxh6Xdm3B4oMW22EPZzawnR72kgZltCqPxrdH1dkBkqDdWwwMwMO9O2sqKXHvipPGJkzlRVLhJjVIs9KrAAAAB3RSTlMA/v3+/Pn9Fk05qAAAUU9JREFUeNp0nAlYVNcVxzHazoroGBkXhAgCCjMsroDoKIgKdFABBwQUnSAoCqLRFBfcCBIM4kbqShO1hlSrCJqQQmNssVFqjBarsdjFJWlMTOLXJDZt8/X7+j/n3pk3vNq/bb8+3nbP79137/+dd954qTVt8uTJL73OMhqNer03ady4cWOhWbNmjV+0FfKGjMb36Y9/1fXUst9cb2y8/lpb797z5k2dOjXVD9Ljn59fcHBwQEDAgGch3l9on6feeeedn0r9kvT222+/sErRgvcDArwV8f5tN/rcvPnMZ22pqVFRSVGjR38k9Rsp9fLql/MXLj20VGjt2rVeak2Og/auI/kHBQ3We/tCo0ZNhwYNGj58/NaWlpbOyMhIX1//2/jTrICvckhXruQsWbJw4cL3tzhPORynSk5lZWVtglL9IkmdDQ05NqvVGhLwbKSUL+Tvb9yH/2sj+eN0IZZ3fvq3Hnp71ZtCOyofdnTYSzq9xX7UtsF9+/Y1FpeZT54sc2aUlq6Jy89YM/qj2oZaoeOkMR8dV/Tee++NWb04rrA5MRYKDAyc/NKCpwDIyKhE9LEzZ/r4DLQAAE6EyEeM6AcNH7m1pTMnB+fHX7tG9Bs0Xt+GwM/frqm5tz950aKDk6rsiA0xbUrbRAii/BDeV9bGhQsPRlyOCAuZ9GykZwT++n2RHPnVYQU+oaFDPQD8jEQAPiDdaLPaHGVXbn/O7YHQuIH9B/gYgzts1iqrtSopKWlNRkzS6I8arFaOFvTfew8AfiYil/rN6sWTKwtbArOzExISUl7+vwCuQNt8Bg71AQCcTwNpWeFbW3IIQEmJr08XgIzX2xDcvZrs7Jru5EWXwwKSwh2RkQ77w7Q0bXp6YRoDaKO+kZl8MCwsYpJ3pEf8liAAoPhDhqUMQ/wAkF+oqKiosJYA7HxotdnTtVe6Pr/S0h+AI90QffU3T9obGuwdD5PqkmJiMtbM+ajWI/60TX0COhoarAAE1dfXV80FgMmLi1oSKP7/B6ASAGyBV4YM7D/Bx8/bF7g5fgmgEwCCSiJtJQRgxEi9zZqVdYUu9pW0tLCIgOvxdR0dpxx5aWl7EzV7CYDV+tXnCzMzkzMvE4AFlTuhZaSf/OQny1L32RC+JcHikzJ06NAJoe+YNKRbsbG3xPlWZTxssNmdOP/J27ffudLJ60V7DAaT1lxRVvfwYe3Jlrq4uJiKjAwAcIWP+BkAhV/i7HA0uAG8BAIUf8qfzvwvgJcQf+XMK4GWi8OGTpgQ6uftzwC0LIM2WgcASwaXOBwlA7v6/YgAhFRt2pRGeu0/UyImbal77eHDo2kVAJAeKwE0fl6P63/5nSlTAKBCiR8AovbZEL9lf8I5AMD5booAE7OzY8X5fhGJi0/nTzTcMh+80iIBaF0APqvIu3EjqfRGcV3S4aSKYk8AaW4ADU4gOFlfn8sAXnoJBDpTCMDL87zU2kwATl+x1Nw+P2HChKHBBMDHFT8DwGjX11FSYu/f/aMf9XtOjwAacf2hmxRg7ywXDrr30kb7NVhDquo/z0y+nJs7ZUoYA5DxM4BFmcnJyV93PzjbvQhK3urqAYF7xflWVT5ssDaU4Ox7T9+6Ei4BaN0AUkvXJEExMTGHD9cdFgA2yfgZQAP1f0dJw0lrfS4BmIb4z5yZBgL/H8DibbehGROenQ0AQRhvZPwQAGDQ8wlqsFkmdP9ofr/n/OgK2ml1xxQECAAy/tdee++91wCA1mfWJy/KXUTr536T+O67764X2r9//T+3JkPdDx50f7qItDXfff+zeAxY1lYV0VCmPV1Ts5fGAGUYDbHpo0qT6vKTignAtWvXiuf0StwGZZPQybMPAYC8/xF/bj0AUPwvvzytKCdl6dMAvJxRuXjxkCHnL86YMXs2A8B4m4yWQTrdIp0uByMajcATJrwzXwCIiIjAFSrbJwGI+FlH00YH8/rQy5enQPsYgBK/BLCI1c0Afonhn/XjH8MNLP9o1Y4Pfg795N9hYQ23bt1q4fb07z+A/ITR2J8AFJnqOP7iuj7Fc35TK+9/bkPaM+NGiSnsB6wRIwGA4n/5T5Pzc5aeeAqAP1VCM4niWRqVgr1p1sEYlskNJQC4BQZbLJi0MAgCgBUKqYo3VEVEhIWFTZqXtYmVxiIAtB4QeDUAvMuSFBgAJCkwAKHlLAKw4wMIFG5URVgdLdwedEq6BuCgj1qzpi4uiVScYa6I0fWKJQVC2aRDY0eNWrlyECwMMIDDc2vZ6UF0F7z8tB5w4kTvtZ+ygklGkk4lvZ6sne45SDg8aJIQ2z+4Mmg0qcfauXPnfvPNN9XV/1S0VSWyf1Ls4FZ5aIHu/blGKb2UOM0ckq4PmsZ2b8yYMb2l4FbhX8ePHwmhuSPXkhaQ5q0tXzBvntdUUq9eSyFu9njXxpA74Leg198yktRWVI4OkAkymw2Q3WO90+nnN3u2H0QkHI6JpHHj2GvTYdsupd68GfVZ4yTJqJeUaNKhQ+rzCUvOMXEr//4vD3333XdLe+rRJx4iqumDnT2O5zW1HII1hPLy8pJGjz9GWgk9D61Al4fWkWay9VRbUa1GEVCYDRoonu0dr++n0ZQ0dMCNdDRYHVrtuImjWHQ80lvfl4WfhJetw1CFm6h+rkazd28iJHvyIe/IHt7ZOBY7o4GPH4smPqf7nRwz/sH6bmmi2HtvYiBUYPxEcZakt701PdsPAIhb3DBbYmIIAOK+F9HXJ6z7t799AwDI48+cOQRi66m2ogoAYVwIQEkQb8DrJza1azRWq9NpjUjXtg+aNXHU9EEQHW/YsGFD3toHMFZbgzUsDNPkPgAgpScG1vA4TgB8PZATAAoc6IasWPHhhwCQkyNCdwMIJCVqDabA8+cAAJFLYVD92dvpjvQe7ZcA7p0/350dEzNmy+iRAHBPrO9+AwB41Of4h2HoFdZYhsfL7ej7QmbSBdED/GkDXv+ju9Pv4i9mM+g09Rs1duKoQSQR/4whb7msbFhufHy8M2xup6AZ3sHzWOChaveIWQCtn00A7s/84MDuD4bd+fBDcYEukrVna5fwMQPAsqnQZOqqLtBzezysvHd6z/YLANndUELMGAmgXqzPfeON3+IE8PHbuL2YegYCAO+/fz/io2VMM+5HpR/BGXIPGCzix3oAaBo13aApK9Mahg8fNAo9ANsPGi7iB4BLZRUPH9advJGb6zx+3Jk7FwFtCNekNzQUabW3cAv0Ek9uUA0U+PGsY4NmzrxQVBS3e82wGQDA7bvI8SsAsgNP7y26HV4GALyeJzGaY5J18fZ4GT+3DwBK8/K2ZF/s7v46ZYwEsMJHrJ/gApBJ8QPAs9gh2BYBnT077OwUnvcBwB0/nCEAQPFBdADefv5dPEu3p2u18e39Bg2aPou2h9wNmP3wi7bGL9qsuVOcizoBgM/X0BBtamggK2wGABn+WSLw8awm9P4Du3ecys+aMWPGt6J9medF/EsBIBbxJxSFm4vM5moJAOGL+AHAO90jfglgy5bshO7uFAIQM2fkyhUr6sX6fW+MJQDYX1wvWI/+uOIc79mziJec4ESxDPGy6AF9RfzYHgBw02s7yswNhf1GDJ8+lvcfPgKrxfoAa0S9uP9HTV95LHdur8TzuF7W5OSqDdEGAFiaiIjk9U8hAMdw+1Ts3r37VPOMGR/K9l3k+CUA9P9b4c6y8LKC6upqAiDj3wpxD1Dix/m9Uku3KAD6xMx5DgC6xfrLYwnAEuw/jOJnAMHjpnvECwA8aK5YseK3EA2aogf0pQNIAIOaXI8S0/sBAPaHaLUEIOJHPmjUsWACACN7/qLVmoz2Zjabv3x8X+oBdP/DWeih94d9sHv3BzO+fOOND6l9C93xL00BgOy97dHo/ZHm6EcAwM8OHlZ+YLpFtF9eQAGA9+81pg8DQCzdU3D9Ef/YN3AC8OP4Z5D1DBg7XYmfAKitqYl7AA8AvDxxVLtGW1VVVhYRZjC0jhg/Tuzv3j6gCuEjfghGYd/cXrFk5BNqai4K633k938h/Zp15C8Tx68E7X7Dtm2b8QZEAH743j8gYQQwC8TGlp08Z7ZWC+k/4eFf6pc//Sje3+TZ/pFeqXkQ7hoIhhoAnve8ogRgCQZBMQsgTgBgXykpAoDKmpoIuJP/wMvzwaOKHkisVfUnDYZZ2J/k3n4ST/94UiHt2/d+Lx7yttFAXnP+60W6+X9ggQFzGDdeOJT791fQNAgAv/qHFFMAAJou7AWQBCAkKXzknW71bD96APnWQ4c+hthRsv1Ty2WNA4InwYYpzhJSW1MT+lmkxx9awyfNhQVmvf9+c9M4kVt1by8tsmuLub3I/in6er7URGkh1SZ1znfk/xR9o2oP7F8Pax1vbO8RgJcwhYp8BvpMcD1t+0GffPJ7xUo+CA54Yc+DPXv2vGA0vkBavfqIW+xeH3kr8iJ9QxJegQNpu/TMzZupnzXOkQ7+OkumeCCOU+Si2Sr7kR6RkQZ/iA0y62PWVKlUiLy8fsz1MSd6s+YhLz1vu0t7ILS4T1Rqn2cU9fF6YQdpMZIAG6dNmzZ5bX+7PZKGsXi0CM9xwZ+0DmuVnejxsHMDJu3Zu24vkrT+QTtYq4/8nvWHPzyeCa2HUySRbzMKAO9CGhZ15Pku67uGlaS7frzoeFat26uY2CpzijiIrbKfLdH2buy7eKLkR8oAaXWhQNLH8+qEKirKy0tLS6O8bXVZQpvg8dPmbV/O+jH0IvRClLY06hkPAcBGqLa19ckBzC0HVg+0R9rQFpqFtWER1oBPhr3+eutPocevPzIaBwTseTORAu/rQ7sd2AgA4g69T1PlfmGVsX9fn8ESALk4ER5Gsb/Mny2tbzGkPQwASH1s2iTDBwC2yhYeVdgq+yXODAwpCCzAozT7Dml12fqR8VGcOMtk9A0pkUvsI7YvR+DQrl2vQLtWpdbFPAVAq8lgMrcygKEEoKQsJKTMYQgLDQn4ZN3r60T43ngSrH5g1rBcWaINAoCMX1plXq8GoBUAXNYX4RcfPqzVXa8tqk3bpATAVtnCVpytsp8tsCBifcJVil8BoFhfu7OE5RCyGn0HWxweQLYvf/HF2tp1T568IgD0Gf2MJilKBSCrPf5Cc3h76e4zuwmAv8ZqQ5cLMwwNA4DWn+IfwoeqX3/8kQvAQC2rGQCU+NkqywuiAqAVACa6rO/hYsR/uBi3wKZd7wGA1gPAcEvfhAQAmEEA4DwLEgo4/tmzwyYdYqurWF+9zWKxhCKlTjnV2WEBxkhHX5/G8jSZEZoKALWJWbuyYgWBVRgA6vqk9hgDNh54YtI2t2jbn5wBgAl2m1XTYAmxhFoNU5DG/uRnHuG/d/yjEa0X7kID+99tgu6OxTytxK8A0KoAaCGexz+rWHPpUtKaG4e1hwnAhhNZlLtMhwyG+HhDGVvl0PXZ2fv7w3oMe8vPijuf4of2AQCyutDmzWdI1zcv0Psr8SOFF2As0Th8Qr84CiEzcjSKni09b4l5C+al4r9uAcCBA1nthuYKc3spA4i0hWgNdFazgbK8n3iEjzct380S1rd/f+mkAECJH87O21/2v76eALQM4MiRX0+MKqXsFXSYAei8/d3WXLHaoQNTUga4AYSGiesPTSEASvwEwCrin4D4GYAv4m9MS5M5yalGX1uixccntCDwKqf5n5FSboGNBw4caG03m1tbz5zZs3v1bAAAKvtJDAuzAeD1c0r4DEBY4f4DKH4C8AclfgYQxFl0etRWAAj+RwjA6DUyfuoC3xt02F6JnwDQ8UNpeQAB+DTY6op/HxJLU+au3jj5JYRPwvR5ZoFN3v12oVxjkE+oXbG+4o71WH5dJa9VALD7wBPMArvP7AEAfaTVgm3NZkzcszHoBCvhM4BvhTcfMOCB8OZH/sDxp0hrCwA8PvKjNqkaAPaL80sAyvU3fF+sU1tptspDaRkA3gKAEIoforwaAPhZ3f2de4RWeUvAARqDKH65ZDKE7/nxriexm17ZtO0JxvhXX1n1Q5UAYCMQTCsvn7ybEuYL9JE2q9jfZJoSBgADEP5xt757MJM0xMcHUUOfzr9Pywlua+vtThhJAOvdPYDc/LjRayC+CxiDTm2l2SpbeJmPHywzyhLDXH1ICI96wEAcAlIr4ABKSThuXt4c75ByyJ2Zj9qDWbD2SSJmAdaqBSp5CdPoB5frx9LDdEVDG6C5cKnB/xz1kdB3rAcP2Bb7+X0q9GtOXirWU7HGEgBSwI/CoehosrIT2f7pFKmtNFvlYF4W/jvAI6kMoX2y1kBIZKBHu1PDwfNI7A1ZbP+UIgPMAn08hFnAIOROal3P6pnlzSQlK8pHf4F2s+AwjSRNvDsCadl76bQif9tbqDBdNvzPfxcy8+nCw1OULDDrOukEi7PXnngo+IDLY8UZZMmGOmsMn09yPTI8VwjhWEUkXIY4mYVu2/7qq9tJXuqsLoxJj+XMZqEWUmdnskabf8olWOI9Rl9Ik07vqeh1id/EpqZRUGKOhksqxveuZGm0Idx3g//+BPrd734n793wXnuFEoUOXc+ClJcrC4wiI8rv0On4GNUbbh8TBRtwDOPVWerxv2P9SuiPukKcBwd0xRPusuLSH+/xUmd1r9dm5XsuZzZ35kBLxCt+ANBoihA5CY6YAODEmnS8KRpIr7cBgJp2uyDkahcmi+EAUE7SpvPQFRrw9yfcvk5nPHUyApDokQWPBQCOXN7DafPo+ABH1RN8fL0t6OrVq1X3eC7C8dVZ6vHu2P/4xz//WQDAQ44rnmhXFlrYYxeAW+mJ6bcSEyUAEFCyqJdPfkX6HLp8+fJXBEBTyAR2uAD0tWjSfbh9BGAUxX/1zi8HVXcpAHZq03m9BNBptXY4ET8DUOKXANJk/AxAFETYbO/ayJ3aACAwcH3gep/Qru4PUZ8w/nW8X9gWOMSdZR7bRG81jkOU1XjeDUArFOey4i++WFW1vr4NAMTLaFjLvekuAJvylYKIXIcvFcQItzLB9o5G44CzylcA+Pe1+GjS+fojwGDO4hbcOfuXX35bnZ0deIgB7Nyp1QqrygB+1Wb9lbOBAUQTAOV1XuwhdRZXI7Q3UVplfSKS45aEc0MH9p/yTveKkQCw7WrIXneWmYDMrD3++Mnx47x8Iqt8GiTs4+bJ8y6V3Xj4sOLkjV27qjA9AYCBvGJsQkLgXraKBAAEOsCdZPfLdbjjRwQAUOJvxy7t/BK+NKuPhqVYTX6PEHJ101+qq8MWLcrUqdf/ne5Pa+OvMLPRPB3dBw+ychaDSkers7gaFiAliv31sSHr14euv0o8n322XoeAHXhwOyuydsMYwJDax0+ePD5OywCA8NM4fAIwdWfdtIqKvKyMXbuKDPWFRS8wAG3r3lvtF0RBAveANuqv7K2Dc+3K9Z/g7gGtlKRja9sjPjSQF6/eqc7+9ttztKz3Z6uarl22BcqL+jvdo1URvyqzGbSUpOTX6XlkW0mvpaqzuBLA6dOxOD4DKMA7koRzaMyUf3+xczUCvlVgic+m+CWAIUNqjz95vEkBwJdfAniVhj6+/xuRjGyTAO42XRjVxJMfACjxE4CuveRlC2SO7d13NJD59yJFSQD0QRj+tPHu7flhpqv6y+pv/9lF7wn0QexZ4g1bBIBZBCAnIsJaEm+QAJT4f/Naqrmndd2wCFMPhuHTp3OWQDk6vS1hfcL+6v6I/iU8vgPAkAs1+5vPIn62zt6+56AsdNChjx49OqcvwsEQPx2OjwcAIv5d+YW5hfkSgNZ814wNGADHP0HEo58Q8PXe2Fjx/JkCxd7T8uXn+CUA3P4AILcPFu8NuqrDziF+lND4hfCjigAQsywKozQN0Esc8eJ89LTHLk8+7ZmV+LnBnJX2KNAA8KvVQ//9xWTYkDNnJq9VW2m5XF8vl2lSx/X3AMDhU35kee7yXS94mfh8St78RNZDOetAEwBAmaRjoS6t4a7M0TKFcWxNtfE+cvvgsWKCjs3U8jwFAGxd0w150DIAkHO0QSjaSPM3Pa6BI+RnVtojAPAErBRo6AeHtN1YDP8uRra1aiutXgYALTZ1H287pn+SxAAA0pFB0aQT7wuzKbOQwV93kfC/Qt13j/TI0k5kg2Yqox1YY0VBwlKdWXgx6VvLzKlRrPEjRU53Q7QQdpenE/bW7G7JBpZOpUmfLVi9arXQWkhtpdXLZP8WzFsQFx3Hh2vm/CjrBZaX9UbvmzenotZWWmpZ3AOJUgvCtkq/2u2Vy0lmbiOfZhxLqSWuyC/FpS5qbCyiW/6LUm/om2rv6mrvR9VGyCRkNErs6uOprS2bcpaZ91Bbd0CTmsTiPd/i8gtuzxGVPpoIebTY61qJ+aT9pJOytEnQ6NfiSBlxcbWsMTRG7LBtdFvJ8nxI9FAyKEhgkJRa4jqHpigjQxMZqamry/fV1Hk3eWRx198zmjTpmEZovSbe7tRGq4+ntraGnlY9nJfT47Wu5YAGVIKSZIEF7y8KOrg9R5C++r2iI6/W9myvF2p3/YNwyqQYcl/Fc14TkcNAk+r60AkPhBzg0wkA4GNi2fyDCMAg5VURKkfz4uwOzWJN0GBNuR0Qrnk3jTrrqlh68O1wvDlyNCBp6R+k0Tqq7ACgOp7K2koA6b7xSgFGeuTgvkElWBYAEDgidxVY8P5c0DGMrbLTgx908tVTPdo73uumw+4baW94WByTlp+fFuMCkJGhBqD1ACCeFP2pTg/WVzkgTpiXUV6GtCCeD4Li82N29vYGoDs1/Lrvy379ngcADaWtg0JwMAe8ufp46gIM+brdYnEKL4/lSF5fItqjFE6ms6/g/UVBB18Qb1xgeno4x7qqf/XUKdr81i2ZIfJaU1LR0YEsbUxMWmnFUQEgP5/sYFxceXlWn1XIGR6w0JzDWosGZ2SIBgeFwJvDeBBvtxWVz5Ior2Xle486i4KIO1fP3aEXkiv0QQ47pa9CQoTTnP304227d08ejwMsszRaylwAZIGDvwCw/RQ8ObRRaBUXcIiCDpwPAN6NvQoN5vgHngOA5XT7NDVJa+31WUXSjRsxa27EXEuLawGAo3HU/+OysnBjlpdmPeNnExkYV16+HO3NEKMQJjgrGizjl1a0MTLI4xL2vek9KrBg+IiuhBRUFhMAfrojiae74Kcf715m8j0+ngDgj/vBR9QOAyArUmj2njc5cJmkOLCKa5u5PTO4YMM7cR0REPELAMtxxA0bpDX3SsXYFwNdu5bWmZN0bc7RjNraOMSPHpBRCgCrKWcYKq//njNrp4kGmyCQCQlGg5X40WDZA3z6u3vAnUEjRtw5d+5LAJi/Qm9xcOstFht9JxHp9/TjDeteKJyd7AFhuVPKhFX39vcXXd4hssjbuQO4IGxkAD6iPZy1Rg9Yj/g5/IGPAGD58kJ42Q0bwnE8AUDG39mZl5eToyMAiL62Fok2AkD34O7QM26jlIcG14oui6sYEjymrpxeyuUJlaZuqViWnz5Y0x8AQpt7J6V6Hxs+4k4N2chD386f/6EeRseB9lso89oBY6I+3lhVAQYDSHfud5qEkUEWGftj574ii2xWUqJyPTqfKOjg/WlQ5P7v4wJwSguhoJEV7hW1huOHKO1xDQD45aJWWyoAUAPOhBEAgwtAbZ2YhC2haDA/bbkfNvKmxmRobJF5mgEDNL/Q2EPKU72nD7rPPhq5rwf9CIDdageAUK2hod4GAKrj/U8BRiQ/ju8/R/7UJ4Ssbl9HutbpL63uUws2RH/k5bKe1vrKq8td1nsflDsXAES5OXQY9da639SS6uQswAC0ByyTlR6QAQkbEgIBQNbicggY8qCpdRpb3M6dNAguS4rTWC4ZjwVCXIABCitgdZ2RGNBDMAs4bSUAoDre/xRgsCFYvx5hkbkVVjfIv6/L6j61YIMLOs7ysuvttdSRV+vcnqEecycAiFpbFtUbiEpbzpiy6NKsDlhL/pS1ZQuq6TZwkjCYJOtuSVNJpZ8nIQeaf/NmPlKyz9R+b4T++cj46JF+9iM9JK2un5+0uurjkX2T5Qsso5Df/7O6smCj5/a93oI+5eUjKu0JVpLMJK/r18PDZRaWq4i3k0ykcHbLKmcqaoVlCvcQtGjEjyZ6emF1Fre3CpDa6vKZhbHn8wdLueytnqU8n7CTFSllugeMik0WaJd6CrUZDTfmwep/cY3S5M/hmqjP73V9Mj0uKjnA7ZQtFebiRWiVt8x/yrHW6GE1SYf8Hraa2psUa2m0QWRlQ0QWd8FiUrkrL5XK+ytm13iiUog3mzZtQbANsrpL7CfpySCz+G8BXEChYRVAxj1vSsmCDVUBxTfFTq3zpDO+Li5/Q9OFlrg6tdX2MovZCn6MtXM7PS8LAPQ+HQA48IcPeardqFesJtf6HvL2bby97tat9unCCQIAz/ORkWKeBwB3PgafKWxOFVYXCYvjwuqe4NAlnpcIgIhcFkQAAAfOfwwNIwAALR4IkKEpMJp6ZrWj1QUUgx2Yde32G/hIB+VVx6LUVlsCcF2Dyt4MQBzvFQgAKP62pvA2CUBaTZmF/RjLEV+dn7nuVvuo4fQRFQBYoHRH31DKAgdX5EMSb0ZGXIy0uiU+JcLqEoBprvgZgBK/BKDEHxYBAIMEAG16NQDoJYAdO7QCQAKnL043N5+mbpB4qNEZ77CXlFRk5FMJfFOd/OyOxJ/deZ1A99+8Weue5gjALphFLL+yezcB2AhZmy5Y2Wnh9feSCGE1ET8DAM2D3WeHDKFuMGi80R/hl+CjqvgSBsBlc5V0vMpCqigRF4viN7AVXV252B3+S8jaKtdTZoH5q7IIaUUjJnEBhYHWxysA3ty4482Nb2r5+KyMuvw64fQqnBknT2aU7aQe0PX8MqoXaKUsaCvivWvQmiQA7qHQ5t7bkSt5RctWYzcD2MEAwsNDJICvFi7sewf6knRnIltPn8vdxGNYvGkcAPj42OPt9hJfTqpyAws1GRnaImRBXQAQf4mBG7i2snwnaxlp51R1FjnEYRfqgBo69nHO0YD1ngAKNxbiP7S9BFAXV1EhnN7D8KLw5riiirq4lXUHK47VIf6mC63tTU3trU3T78IJilJSpQcAwK5XeLlQAXCg6oMbVYife8DCep8RSqkpACD+e0hL70UPGD5S70/pLXQ6pyhY4BzfYi20uNDgBoD4Bxi4gQyQZnVZPK3OMquXOecIdgQA0vMGuPwbD+yg9RIA4o8T20+tAFvxlV59Te6y0Vh5wWQytLYaTOgBAFCp3KNiEPzxrldUADD8VV06/wUWfw4AZDUVqzoSy2GXHwyZiTGgHwGhLHGoj7Mk0jmUAVS4D54BxcVcr90E5fUfkJTGb36ox4gSDwg9hkthP4RQCDtu3Ic6dYEDF1CYPAHweowBwgqPbVoJyXJXfFCxrCgjDv8Jr4urO51bk1GBLDOUQ+IssxesKKlSqveeH7+iBnAAqo/YTTogsq49rOfB7m23brUOp2UGQNH4DJ1gEVnledP47pKvfLdEqd/9occo8TMAJX4CoFXilwBg+lQA5HoFAIcvviiZWsHXH4q5nVDzk9HqLLNXUaFLJlORqahuz4uQOCDPAkblUYvkx1bTw3oGt3Xi4ivLsoDBnVWeygNc3mYSsoQA4PnyFwDIMCglD8EjXc3/kAQAPbPE4Wx9PW6BF6RDkW1ci2+K+JsngQE9AB2QOwEudGNdRoU6y+zl/ohMmjWyf6uiyfduWEVSnJ0wZLw4UvkMTaebCCuqLOtVFQxKGasQdwSYZdcZPWweSykFFuKwlZxoOBdQXIiGmvUkVxJ5g5TaSivnHs3SqeQ1UZUl7Q1p9Bp3kQWvFicXNvvQfGX7cR8fmqs6oPozOp1KAqgClSyw1AKSnqVA/PbTXj3E7RWnn/81jrcb4loHme7+n/Pz5krWuu3GM5+hVnmOfAICAFVWtzdVE9g05VApHvNTPawnW8fLiYmPeXvofmCNztv2lRxRuG/p1AUXOl6rrDd6WFGyyqsXQ4oXnKe3sRIT2f5YAsY2PV4nNJPUS2nv/a9wQJ3yewPiW2OcP3wDN8LQvIHP3zO+7/kXJ8IvrYGuJBUDgEhqyruaAJSXa0I0eaSjRwGA1otw2DrqOs8HBt6hzb+tSbi4RAdn17jE/UI7UwJw+Po6xLOFjmsroj//fEMmr+eCCovl6lUfeqHu47d2scsG0WA5eSqMj1AovM/QiAB8JXZnnRvBul6u9k4/v9Ccmbzwn8ZIgROwwDPET6sxdeaEa5xOTfiSnHA+//OeWetce0cDVAzl5BwGgNb29lb570L73fZ+AFCqsWg4fgCIYuspLidbVxzwNgggzZOQ0o2AyNpG2JWHKQZgJ6sdycvR3CGdDbYyE6kFABD/+uyEgoFcUBHQEAHVV1XxZyNhcwUAy/r1FP+UiIBZo0zmY+2etcQc//3uzE5T54P1evSokvj4SB/w7I/jAUB4Z3N6ZF8f3/TmJRsYwMILraQLUOvwz8ocHR2ODlSo5V65sg8ANKx0B7IsJGGtLaraXXF+Nir0/r77fPb58wkXM1HAAACUpbZjvQJAfJY00EnLRt8gdPXPIyIuiwoRLqi4mlBQkFI9gQFQUWpDhNNZbwWAXADg+AMD9w8dOmVKaMAsg2FQ+3BYFs/2TL+/EIN4Z8qjgXqjf4kdpoP7kwCgMWkdMGNDI03hOD+11+xhrWWt8uHiwyfbGk+6AdjtjkhhPV3Fx2F0/tnyszixP9cCy8/UshP2y8/Q7Brg9sHeImvLX42JlLADy+E4HrxxZlhY8gSuEGGrjOrnagAg4wMA9RH4lCu+w5lLADpQ+mlxxm8LvFUytKTEcnCWofV5fOVzzAmVlDk7yAneP4/4M79GcSoBcJb4l8SHIH4+Hj8oNoeGLtv8kNojASjWGlnwS5eK16BMM6eidMlhFwBtpK/Bw3qGqqyn2J+SkASAPtM6fz7l62QG4O8RvwQQL95qOGnZDeCyLGaGVeYesL8ayxKANl6Lt125+/DV2CVTZZGzcrHZPDmvbPLm8O/RA4a39+uux+WQF2T6/ZZMxJ/yDbcHPcBGPYDjFwBM2lPL8jafyTCF4/zUXrOHlY7iStXDEDlUAPCNdzgdeHqz8z9Hwzx8SQoAR4/S6/yYo1FsPbUKADipewnZeMvxZcrS7q2LuNY3TMYPAQAUSfHbeDma/1xmtdIYYMYYQE5yYEFKyjdoLwMIC4sHAPzHSQAqKovi8L5w2uT8yrz8uPLiWStN7Su60COnkADg8fkWU2dmZkr/ZwWAoCCMAUEU/7M4np9BE57TrM3avLm8sHnhBkM0ffbX4S4mdoSNXiPiv3b7ypIlt2/rvNjaYnwXFQb99QRAO5QB4Fvio6PZeor4OAury7mYXfMtWeFvD/X6OpNqfbtkXpYLIkTBhX1w30gDA6D9Mfp2d/cTn6kZg7gQoLpaFlQsKH/J9Sj6p1/8Yktq76LFIDAtP39yXn5dXv4zs5DFqFB06Us8jYZn7v/GVRCBW4qrC4aKMQA9wJyzJFqbn2+IXrgkmgHkDqRV8nwE4DDU53DO7dt0C6gLCqZi+tdatHlyGhjN1lPL4vVbAwPvu2aVOyn7dd4h92ReVhREqAsuxk6XqyFplT0LMILXyklQUpiaVJlfWRkXt7g8P6M8I2Na1KyVpTt2vPjiRgjO/MAq3RKopsDd3lNFbuVDWTj/hmYTj3ctzQYCEIFRVzkfirUheRdcAwB1lpXsnyHAFOVyj2w9hdPk9UsPjVM+Oxv/9cdzx49VliF1wcVY1S84eBg9JavMLlyqeOrhw6mpl4qjooqfiSruM+sErLmHYP7++sijvduVYgfa7gX1+XV6Y48TzoF6WOFPDilfxZHUWWB1VlY+Fe12qTe0wCOIQKkE+SaAQcp6E1JvlZRSYaH+AyCPn1sTnxMqmq2SOsurXl5L6vUWnYFb4KXWJ3v39viFBXXWVFpT/EFY0wOiSjg//03Wmd5ZdRcSL9SJdyN4MRK4cuX69bHvtjWyLn4claHNqFCssfN/ACSSlF+MGKC8+fSFjHPbWOJ4Bw/+1VsldXvVy2sXQ+ug2Fgy108DwIHXPr4gfmHhs4fQDegL0g2dPhI20/2ISwA4B52fv5EeQncAwGk0/HReHj/u5qUGrny+oCBWNPhg48GuKK3GcMkKcR2DddI8IfQYIffvA8hfjEDBBklG4A8AHDj0DnTwr656mAApdZZXvcxWe+bM27e3bQujn/J6CoDH/FFkQs1dBnCiklL4izERbebSUmEMTE3HzOIzOQaw42+dnX/bCBGAFjS/heNXADQ27u+6eLHrIABkGOouKVmdsgyhiooMoU/58/ga1vnzNV/j9beUqB94v02JnwDopFxPzOqCCvUyAZi8rQa/d5f9fwAkcg/APXteApgGFWq0hZM9ANx9fkWTJ4CizOQiAWDBYnR8cf1BYHNq4PMAEAgACfsPgkBXVMWlS+gBso6lapJGqKVFI6T+BQpTz6ywuSzeKVVG6tCxtrZsdQPgeLu65C9W8LLyCxEAgFlm2+2IiHsAMOWpAKgHXKAe8AQE3j5BxMrp/NO4tJQBtFOKpp2sJAPYsTwuOTnuRQbwfcWNG5eEMLdc0kkABxMu7t+f0nWzK75nlrdMxpe8SAGgxA8fYVJlhf+nFpkVvUSn6RQAOCtd39WVi3gJQKS4f0R9bxAATAaAewUFADDlqQD+W9y1hkVRRmGyy+6ygrYleMVCM4sQoRvQKiFSBlG56CZiYYigEIgFlcJWhIJ0YUuUCLMbT1mhS4ClaRJPEQRElhbhpRD1qSyhInvq6f6e832zMzta/arebm4zOzvnnW9n3j3fOe9H8f/gev6HH57vpPZyMAbK0pESpAfz/YKA5YuWvb9skdnMBGCq6PO2lpbMz6l19pWhUZdg8h1ljvLHSOCiZUxASxyw/eM9F7Cbn1LHNGWugYHyv3pJgIcDhSRAla5B/zQCZNvdnj2y7U73/lAiYFVJ3/33980jJXkqAsDA84e+aaorq5MEYCaLlBjiVwgw73z//eadZgAEIAV3O6YB9qN4CASQ1t/KMkP82BEE4Mu/5+ieoyDA6pnVzd3G6Ni3r0P8aVqwNA94nJDcetfnWyRuB7Z80rqDvv8MPA+36y1M9W13escIEACVNW9eX9+8vyIghr0Fnq/r/IEdFnq/xP1fwbHjprFqZyYCvHDaYzRXGBkHJAoCArby5qtJa4KAGctAwIzqTR9/vP3j7Xu20whQ69gwAs7UgbPIfGyRRUYxs1LMCzy6tnWTGj8R8CkDnUfyDyc5WOiyxCtmQmTOGxcXd20cm7mdTIALI4DwvHBYGOopjceO9czaggDcA0TBA+4BIGCSsp1mr8YIAgKrqqs/BrbvOWr1lMa5egJ0WWQQAIhqXgAEqE9BQu+3OuilvL7W+FZKOAmHvYuBkwl4rV81WCB4CmNtgncag+XfKyr0bWyiq7kK2MDQdb2dPALUtzPWywznWolWoFcD/fv1Ul6pE1DKjVmkiloGPgMvPTh/qpGOWjsGoPeZUlF9+ypv//pVTspyLe5S3n/paR5YynvfweDt+qzzEAn5CWhkdySGR2NKMD4+1oH/c5WAsv9lO9qSqJZ5k5LbNgukKuerrxUmKrSXzyTQ2moSuJEgiiouIKBfAPBTpWO0IzJS9rAsWNAWPLR0ZQw9VyIisH1UQcnXnJVdSYjg/U/Twcdvl5/fewzejv0ZSlZ2SDmhsLs7t5w+I2yIozwjwwGxjFcZkflh+iz1L7VBtW+jzc3pzM8CwoyGUM7hBcjz5YIKqTSBaWrWWbTxcVZ6IHhgYNMAZ6Vv7ADEk4J9jgUBE1TpiConQzls5WJji2IHStN+8vErCEzzpSqlEVtnVG0dylnZEioQmMf7y7jnzXMTEDjBF/aHAG/n/YHD54us8xDE7WjurLVXuPDDlAjIiUzPyTcY8ImRKSBAZH0PHJAFF4+/jfDwd2wl5c5jw8xB9cSAzVeeL0tleZ8gpYik6yRlQp0KMSkrXb3uq2EXvpv8LmWluWNFEIAqBDcBqnSMTiQCEH7R/D2lu1ItkJZdBWm+aWkj0qq2YjtnZbkKawbvf4TQ39/d3d/Pf/TZFVjg+xID22l/jv6aiyYOP4DECBNQX9HgKMx3VRAB0Q5k9nNiiYCUICaA4p84ejTCp/25zQ21zCCgvHxmJUZAoYEJkOcLLzQMDE5fsRcaLDQ+BA5to8IwImCA4qcn7cePX6cSAG8zI0nj8WJ6fJQqHeMdiZH5dPk3IXyjOf/rkC5fhF9QUFp69jkoNOSsLBdIzOD9ScGcf+gio/GiQ+dfjxcYMV2SAN6O/YGJzcaJQuoSARXfFDkiwztiYjPzw8opNZcSaTBGRpYnwhwT+59/WEijfux/heI4URk+8+aamZWzzTKNPUyebxKZwRURwskLbSqatCj+nTsPCQJ8/Dyn35kAY27nV7VaAiZdDAjT03gUfdLl79rVbcxw5M+mvjykMEePSyutikPpKkvXEtkxzwQA2wzANv6jT0RBYJcggLfT/ofroKK2NSOi4ZOHOEBAaE650VEUkwkC+LGNf5SkJRFwzWiaGm08QbW+xxxZe/dWOvdmhs901EzP1BAgpO9UR74U4sBZbSYm4KNtOz8iIAlLSlGVSgoB/vUDQWb+bSAIGMnnTlL0ivgcXP62Tbu6zZE54bDW+toPI6CrNC6utPQcGgEsXRE/CGDlxe1Tt8Ay8NAtz9KffWBmtpXCv/NO1RFip9G80+hfh+MTAfmFFbGO0AUdMZnhsbPLUzLSMQjQ05kY5J8YGUv7L2scfaB/XOMLtH+8MysWU9tAT0tfX7gkwGgdIaWvvlZZEPAhj4DPQIDOoYIJ2GdsQFkiDDLcBJyvFjzE5+Dmtys7qDwW1ZIgAFJza0HaCIRf+v3XisMD1+IKAoRIsaRmp2/nP/pEzPAkgM3TcAecOFwc35Gf73C5CuubY9rDQQCMkVPgCms04kVkfvhs3v/9/nHj+hE/E1CE+LmYt69vtyQAOWSY1UkCZPyybQ7KkupCP9yG+ImAG2vUyXYyiLyCCfBvaPDXEGA8Xy14iM9v67Tj4u++dPduJiCgYF7p2WdXVZ177tenfT9CODzw58Wx9OQMlq/9ppvsvufSn/EVmAECKEGnOkIMP7TN/9A1fHwiIL+jor4+ph7FuUxAeUo+EwBvcBDA+7//Pp8PEyDiZ4AAPl8iQErfE4cPc8GSBNr4hDK/Wrb9ieOp8YGAffvEF078NmDpeI1a4DC1vjYxJ5YQDuArMCuwC4MItjaY7Kq6lmtz5VOApScr2DE3QcvjP4APPZ9fYpyyljdetMkWFnJ2lghIsVgc+UYjnoL+QeGz9ftP5cd/bCxYIJhk1tn6F7XC+qzzeP32K94ABAEXAyCApOONkwGRtT1rSLxaPQzAP4qwdKk34wvOEn/xKnDUmzBGB9477w4gj7frfX01hg8MvMbfYRZLmHAX4/35DfyOydjbo5pZJn1zvSXUUmEBVb4L6D+f/yMKQKYRvPKSBgeTUKp7gdT0c3XSNSlaZqzjo4upse0DAVFcDHytgmt3rwDqLNQXbekwAaLAwky1x3w8ofRVua/P4iImwwcGNQ198OBBLy2mMlQSnQGLF/vOnD5scyCjTPEpVnZhFjRtdkrbHX8U4JVUUVFfUeF4z2wjWHN9NtZ5SNFop8PBZXzF6dmjID0/ePjh4vLyYsXn4davd0mI/uKh8CWm2Wwz5uN2ki8xS1tRsMDHQy2ytnfzTn3tMLLQhocNAcETpOPEwaHeBz0IQLM5Q5ixzX4iIzVjZUZ2yr0ls8gQvEw6RNCdZm8+vmLjbXZjsGfbnTGdunBEgYa31/6KehdKS9dMkVlfH79JfdousCSnK7ANPviRlgBIz4TmDx7+xlUyq6T+vpkzUeM0EwSkKSil2l2y2AQBNTWoxiSLTZa2ggA+HipRAf65DxABOBN3HpMImGS42cClc+w4sXmoNfVlDwI4cDm7Ezt7UmpMQkRIRMLqEkYZHCJYOmeGH99xfDcISDWkTvHwPU7npplhskADBDhcaE5fY7EycimrmqvxCU5yBoIAZ0YqbEKH5W678VgFcsz7R4/u3MsIy7ZZFaQCtZMFAYsWGY3bXmACRgoCjGaWtg8h06Ma3N3+4Dlau/xRAd6CAJmCIQJsqanW0zUE5GjihxvdsOyYkEC/iLensB98SZl0iNiLG+bx3cczZ4832g1TZPxyBKRsYTM04XiBr0CM0+VyrrmYSwKmjB+6o2CS77qFC5WSl2hnW1tloiUE99yQoIuoDW3WrP19eAYMGwY16uuN2IDsXbtkSQwREGrYtuydDiLgHZNa22tmKawYQsRUiIIFs2cWOMgA3Ky+tuy2W63eY4d4jgCKX5qxPZFhD5oVaX9xeiPiBwGKQ0T4pszdxzcdnz0+WG2rpPoD5fMofiYgz4HLDygjYKhrfqDvsGTFwQEEVGbh8o84e5h950RuQ5vVtx8MjEP8RIA4YEJX6S7hQEG+xKGGmnfeWW5sJgLU2l4LZX0VApo3SkcIszZ+aeCw+D5gJq8Qcesv3t6bdyN9oBCwocKloKmpyTW4KmHx4mGLnVOyED9QdmxvZlvbk20gYNPu3cfDmQAZPxOwfosYfTTbRZ4kXhdQ/z6AEUfCYLz3QGDwsGS+/A8IAootCfh2+gUdIqlMI2B0H+KfQfFTZ6c6AjgLS77Eoc3L33lnUUcz+RKrtb0Wer86AmKE9jfrsrj06j5NQcMvYzdu5OsvQStKuGd3z8g0Bc7CzY/RyASobYAQckPCTdK3mJukqP6A70G4Aymf52W1EZRvsTWXtHM20hUSndEZVrQt4vKPFFJ58jdNfXPm9I07wZnJfaZt8maxU6D5PCKgbhkufkcz+RKTtJUE8PvlPeD55/kxcPfa0++RM/EA2d9ByRnuY8cV4RU2NSo1dcpULQHlhoxYEf4ZggAZ/jyE31g1NV+N/9iQ3aZp5Fs8nCDOn9sBRDl0SBSyxl5jgy/RZnWnQfunwdWcgPRG3NEgKviZkNs8XErJyW8coJo4jh+pWZNH29pVw88jX2I00eBGENRMvsQsRQUB/H4qxmasB2BuFp0jg+dmrefCxk4iAjhLTO5x08JgTD9pWpibAHiRWSIRvyDgSRDA8SN8ip8IcMdfXX0MBJBvscZHGN5iiJ8IyL5wTDYISLUB6n28FtpftrkxC0d98JCy+9e5peR57FEk8SkI0ElN8iVGaVxNjdFcCF9isV0QwNvXqklvgAjIkUOAAQImGW82KlVaIOACOKmOBwMqATnKUwA8yBEgKWACshQdn3kcbYDsW6w5v7UYeQSaqU6lEUBunLUCbxOGfr90A5qtjiqAYuqsu0yVkqjj9YBeatLmGmRlC4NCF7m3hwbR/zmPtq8FtPZm0bpaXsg/88sWNcuJ/81QGFCW01DA8k+iCsD+HrtwOhonqIh9pZgCYpghfIXF1RcNegLu1rVeb0+p2pDkmTcmWenO4QI2BXJIXRYVdUWS5h1508aqWXZAX2sszNDUz1uvgvXzKZf40MwX6R0puCXvVeC009T0uSZGL5aimlrgsbq2NdPARqFSAgp4++juYqdmsawwesRrpbPNs1Y4NcpiycbuLqcLv7OzKqfe8d6XG0UWF4Djg77WGFIaULPU6kQJpm0efXTtqZf4GFD8vkx6RwquRdYsEeI9aRSyppw2JYwHATiQphZ4rK5tDVnV6kt8gbQZcVuxHQEmInBgMyAIuIZqd6Ujg00bPhPgb8/KaiqrbGrLbNkNApAvp/dI5OprjSGllx9oKiiQWV8QgMB/+OabH14ngIBTLfGB0IXXGQjQOVLk0WSvcJTg/b1HjRmT3NWVfDWDCcDxNLXAcqkrV0y3UGKUVv4KS06k4a5IvsFGg82W4pTxny4IQPzI+E1sngil5yZABvhCtr2msrKsrL2sJbNpSWwYCHjpvQx1u77WGAQ0lXVtLaiSWV8i4BCmYcYJBtby8ckugn1ozf5iBHD8TIDekSKPJns1S4SMRU3pxStXagkAnZpaYNGuHjElLcIqCVhY2DCnetjWrajuRUbI2L1ypc3s3Mzxn75ZElDnP3L4yJ3NUHoKAcoVDsKZVFa2tcMvP65lScvUOx5JwdpRe1ezozwmS30CRslaY5WArtTcLrmEBxMw7hmgkVYgen2tCDg1JCRVU5w9wPEzAXpHCnah1SwRMgQP3ITkZDseusBz8V6cNVVrgQUBFYGrdwRWSHO0woVz6ue8m3z2OaVLUZxs6541q9uwsuH4McJxk5l+506sI9P+kcNJKofILyjPWI7CXB0IaI/tmUEE7G8JuyPSkIFs0XEpTVuJAG2tsSAgI7iKs54gAN/9ZwjjBAHpQnnWObOF9BZKEvFLAvSOFAoBSOLheIIAFDFnX6olQK4mp86vm8v37i2HYwET0DBnznx8P7efc24ptmMEVNhsIe4sKxFw/sSLzIdkgYM+CxtKBLS0NM3vw11uMBNfgUhaNkuugLYaI0CNX0rpAy1dUWVx4v0g4NFHrxUj4DUQcKcgIDUqCgSYFQIGZPyt75r0jhRUIHF/ibpECBEA45mNl3KPPAgQq8npCDBmwARItKlRre2cBvpl0Ps4B2zrtmVPkPFJApBTbTbX1TWPBAH6goWhWI+wMhMFUC0tRwaXbAYBuP4Z6nS5rtaYf0scaKqqKsX7FQLoHnBtx2uCAGVPbvNKZwKMRhl+77smvSPFipmo9OD4BQFGIDk7N5mPgQssaoU1tcB6H18QUN9O8QNzh3LACcPUggQmgB4AdTv9rxl+1clLbnh3pq3bvHl+S8sgsGTzbBCwyuJu6zHX6muNJ9MSH+/jAPx+IgC3vh8OH0b8TADf1QFaLg1marcyAQNMQG8rCNA7UqygUieO/1U+Ht+YduzINQv4i1phtRYYBEzx8PFFbW77EqXN7N2rva/tDtEvqWH+uyU3QMDqrErG5vDNRMBe7ZoarfpaY7HEh/r+9fT4B15nEAGA6LYGmACcungMAia9IwXXInMWex4fz6wWTwgChhJyGd6EC7QqDTB5ojVNV5BAVN+od3AANJP0c8NUeTo7r3U8jqsuqaGrNZZaW33/ep37WR5B02amb03TO1LQXis2cIGEPF8mxw0vo4TSO6lRngycm8f6c3mL895Tz2D7IGRuUvQR8i6Tvr46qXoGgAINLomYCgz19qw/GeMMv2l8uPNxxQhZ3/ZmtCkwQ1pbLM+6cQvDKODuHLuccBrjlFL6KkDbR6f3Fc5YzwVaAi7X3WshTRmyE9NUbFxsSHwPwJewweXaHw2dW78SSBPS9Ko6T6l6BrLHqATOEXg6zDvbZseyvAEy6zu2MiElISTFnuh0kt1g1lSeKFXPx6Jvw4MpitYW5Rb9+bO5GytfIX3VeISPsFqwIXyJ9b7C/kgZKVnrzrIyFwhwNyPj7rTMlFecQrGvATrLmpYhY5SV5YLUTGNpSgURNVqpCgJycvCDTVr0gQCbPcAOF6ULpZMUChsnTAAdYoa/CATgt4Z6PhabgWtm+bUgQLPuDlas0J0/CEBgmtXx1HiEj7BnBsq80+slt0cwrW35yB14g7L/fU1N5SBgUd225prmZvzT8QIIWJyBq4/w9zaVHXiBCWgX8Z+tFEQs12QYckHADcgv5CN+SUDqJVi2WcQPAi5IwHjxi9pRVNQCFE2FoUIGtxKuIkxPeiUxalSq36jixYziFZ9tOwQoo+DDZyUBLpdRIQAXViN9RTx3bdnyKKUh7lrrE8J1pAUFUqh54bHEEBO6L92xXsaP3ekNdxIBzc11zXUdy5mANcZVxmJx+V9A3osIcLnjv8SeS1ng5WrbSOhS/ZIYdlsCHtDSIv/C8UUJiVEbEzc6isKZgLAVM+1m+xrCQWBNdN4jAci8+zqJEJTu3qp+PTRSuK4C+dHl/BoE0Fp2Bw4I6QsCEM2WlIwMUPDoQyCACyZm4IRYamsJoCzFS3dgvh1QZpxLvkCWt3lnc0dH3aLlNcsQcF7kquJVuPxNB16QBLTL+M+eYIew4CzwIqVSDwREqPETAUNxBTTl9xfMjSzescNZviM8fMCR4ggHAZhtUOJ/GQQsDh6VGuI7cxURsMZNgHL8IL5gD3f+8ENPA7JMd93Jnz8aNSaHxep44oLiB3IK4gcBomAibdy4UsSvJ+AOEKAvOJisLqbGAa/A+HfSt5/iv4wIcHH8IwKy3W12y/3l+TEBFL+6GpzNMwucixHEX38QMLBsERGAG4wHAaHOmc7a6Rw/E6B9vyRgeWddTc+yh4gAWcDR3y+lr/ARvj09/faHeLuQ3jNQyS1Xm5u28WfCbwI/t+oLDkiaNjMKmwUBaxo6cfk5fiKggeIfRj/OcEtpvhxZ4EWaR23hkJynn0b80qP0uTAmQOMHEO1E/JVU4VS0bFlReNjcL38W+Jjwc+/4jW/nTg/FuuF8fuvmHpSOQwC7zrBP8H03d7bcdwNPtbEZm0b6Ch9h3Ai2KFNxbqXGaX0vvXRFAB7L0REBYt21ukV0xfPqcfkXyfiR9Y12pQ3zTbCiBubQRcOx/+XXLJqjdWgAAc/h+iN+JmC2TY2fgBGgVHjtxlK54WGn8AkOsEepr1es4tEB5AEHo0Wef0ts7O0iQM5Sq6vjgQB1KpK2mw3ysy2M0JPa5k7K8roNKd4hmOZ0lnVqV6ML2+Vn99/ZXDdyotj/suWeDg1UEIG7AB4CjNlmXe1wvJPL3ABRkPFPPsG3riIo3xEQIGcZRZhEgPoUoP312y93t/HJ1eZOMifTFRwAJi2ODr7g8frdd9+/6jLs7y5AMHmC5B+yzO4SB5Jz0gwil0ACkHPCEv/kE6zvslOFsgCXVyAHitU5dFJabscO2iy211kmT4zXFUioApyxoiF4UrCKKVfrs7TwRvFwJt7Rdvqxj4cc26Skvrm0gl0hNrAWlu+9SpGm+uONB7T11nkEFvj4B2jV7T958uPT5k4+7zvluumPZxZQzdSefEVncRHlKRXvhLXMI8WPKHeeFfWpU66+2I2bxuuztDeopjkPA2+dIWt9xSIwsWFsniYW1SA5PFYWSLg/T18wofcN5l+D5JPlqidtkGTq3OXx+ZM7MLkB++7QDp7BMZ3sU5zqB6td5TUIeH29RyelT9QkjfEuCPDw+gIBWEYZi2lLPL5dn6X9vkK7uvqun0St78bg2KL89vZYIgB5e9EoCCFABCRkB4waFSgelWVy9ThVCut9gykfkJ7TiQVPmnqK1tyfZJrfE9ilfj4I2LFxdce+jn3+b/ASG3x+2Zj/svtJn+JRtByesj8IwK+kyFSLgoU+fl1pJcDoRrqTNvanpKutuUBxvXVXdwgYUAjQL2xMxcvrqhcutNqruc3tmFzSIraoKbCqpWg2ETBTNEqyEPLB9Ugd5et2f6tkSyMH4AQc0eK5H1NREWHj43OOL316J9DUfpAIWNJXUqDWOk/uwFjZV7gv1PLGp5IAX7vdzzfAHjJB+BRnj4Kxsbrw8hkPbXvo0ewQBe9CKnaljR5dMoj4B68dfcTgqbUt9fVL2g3Z5yhfKzYsMDaT+dghiyQgrQWPgVBrbkvuu9W9+bLWt6ioottNADu9BUIOEwF2q93X94QEapI4feLOOhs5/u6KCmuMQkBDw/T0+9e0d7b3HLw/2tQQtHB/ybw0WTsMAlZvWr3vDf+gjn1MAElfu1+C1c8vdQJtlxdMXXj5jIefKXxw/c8+Er1QSl1bYex73eC4/bcNjpMEpNTUpIiChvr65x21BssxBXRArK6N+M+/iKRv647OzoUNDXMKl7TX7tmDEeBYwKvLhYe3NLWAAG7MdHG36BgmIISywr7utrloJ8evpt0pfuSpkaN2kfSFUnQ1dC5Ys6aop70FvxVMFqyEg4qVNFkLfB4TsG/fGxQ/pu9J+dl9rX7D7NZRtF1XOwwCHq149MEv8UoABPAIaBwcd+2rg9cyAXyNm2XBQkPnlztiUqBZBIbwCGCLjzp/MxPgKK+GCij0r9/elrO9N56qLlnptBw4MBg+m5e8cFH8IECt5j7BGH7iininev1PT9osa4PxiypGSGsQ0NlQ1g4CsEY6pDKPgMZ5aUoW+rw3Vg+sw7y1nL4XBASEWBP8Un1puz5r7XXWaw8+mNJtVbDQZ8LWNEUJv/pqY3+k+v0X94DumApHtLpiob5NjdvcPr7utsJaavOSBIQTAZktLWeFzz6dZmpcFH8ZF0EtjaCeYVmQgIWTk4o1M4+VWVPNuuODgPbOpibcAfct20cEzJ+zv0TMoigEVK/m+CUByDonJEwYAWfJS2i7LmsNAh5c/60GV/gEY4EkjVsc33SgvbDEHdTXqlvxFFgQPUSF3pzse9z+GVWEgp9AgIj/0ieBcNPp90xfsMDF/cJXEgEbIsoA8l0mxA3qzdN4Ieh3VOmNLG9WT1N7T0/PvmUvEwFL+maUqtIZBLy9eqMIXxKAeO2pVmvCKN6ul9pev6z/9lktAd471BwtcF6e6vIEHkBAyu54TfzxenMyOFMzygWGTOXHP0HU+t56j3ITdF0IoJbX8/N88MiWE0sEb/1C0LfiPJwNrsCypvY3yHHC1FMwSiOVQQAeg7J8AzD9g7TGCPiOcYWCabqCB9XxVqAt3mPR1l9MOkD+aZ2Jz9CW+tL205OAQV43mBPQemmql776haClFI6Pjxbo1e1vMs31qDn4J2ntpZeKVgzkB6y+7tetEr2M7b0vM2B6JrerWdbLTxzBB+qzynqCshT4BfAMvX7JjPjElKypUxMdiZI3xV3CIrPEdDlOkyDmXj1yhMsfFOxou/XYx0mQ3sBUQH98fbxeeql4jq1h/vwGm1153bpDwaZO16ae3pdp4QG4aSvb3W1uFzWW9KHAAQUNgFrQYFINHAmmLMMW+sv4ovimN5htFVjj62HCzcDp8UYkiOm2K+6Cs3k1OpRVKlnhvPe43oHTvlSQ8X7UykPyNWFpkpDexe4CjgqrrbvCUIG/u7u7K1z6eEWBREKC6sBgt7UvXDjfliBf66XpyzcXw4UX5dlyu2JudrgR1lq37R+k6WwOXRY0cIpN9SF+NWuLdCDBrDD8xqZYUHpbwfe8dEJkfEa6IyMyIzIofDM1SIAAIRttstY3773pq5TjkTna+4unf6M5/lLZZrfaXcBRERGD6CNKbLaIwLLGTindu7oUKcxS0Wq1qw4MCWBgznxriHgNy1as2vQmgMLNuI4hgoDp0y9Us8Bk7tXYuB/3wMHGfhCgncpae5pYKFlK3XlHs7YYHzM+Zn5sPY3LWeZCEFCyEi1jW7bwyh5vtX6ptAF+DFSblMXYbObuzs5uKwhYtQrF2qNJqpOP8WlEsOpzvEFI7417Kzcvwn0QBEBDlJQsdux9zzXuSFl3EMULFMxQpDCEiJ/Nb1jACOswxYEhwTZ/DjHAr/F+Q4qM/+mON0EA1ieFR+aFQkoyAbj8TXPQlHek8dAHTMBTMn5MZgqhk91gtIv9s7Y8Rlj/li8oP8dvndkaE2M1SpdReIzqsr6FICCCYMzo6Ww6UiEIOHzg8OETh6+l2uM8nqVIxwDiLHJSFknv4tq9mzfvq2letjnMaQx1BZY4sVNZo6sisZDPZ96M0aPj4s5mKQxlZLdhPCOppUhFMICCgCXWEHptaG7GIBDxPx3XEX36zewRugBnL9vi6PL34RnY19j45utrP3n4ecKbEpdCGAHGhiVGaoDfjnsALr/lQf8P+L6UXm+hiSCcvkShrna4cKkwWcFPIXNPj9koCDgwsbFxeP+1JJ3xGvEXrzlYnIEs2ZqkY85KVHdnEQF1ze+AgIxIgyHCFpy7uqy5OAMEsI0vjZcROH8mAPEGQCj5ZZ/rlooh1iW33bbEGoXXMRUx3Rkcf08cLWV98kLJB+jyX4fLX0fT16d5ZpVp/UASxsaL68XqcTwCHnzrg5eZQb/qG1J4+Ct4K10bv4YAY4WrtrY+NHSFGAEnTvQfuZZylnjN8R8EA5QjjHZL6X3LQMDs4sgUw7JAIqAx0uEPAvj8S5EWl1KYpKEd9Xw0Ia9KRTDwwAMLU6PO9jZ0d3P4lOmJewME6KTkVa6SPmigvsbDb74mCFDjJwIGXU3AEQX70Umi+qQGpba/fLNqsksE97KUdsO0IUa47GCuqbbWbAmlgFHwcWI4jk6lt71uvwdRshOfpfyU6Ozra9rMXWaNByqaWppccUGQ0uL8x20dgaSxJIDiDaH4tVIxxLrwgQfmpIZ466WpXkp+4VooLj8qWCQBavyvjtvwjOfrL/yy/ahVW3yDfAKqM/j+z4Crr6VQ5yvMBAQCZloMGgFQVrgEXYX9OBoRoD8fECB/SvUAggBzs6UszlVcaGYCeK0KavbD/kzAqaUixsB1ty1J9e5Vbsp7qvYgw3GStCQp3NdY8vzrDBCgPvUIG3y6BLYKeAepbFrS/f27XlZshm9gRF/h6SsMAuRTgN7DBOArII7feKqCjHihH+QwYAL487qRpmMC9FL4r6Virgmo7WVAYP7Ue0ppif+1/4sTH7izrm5jsA0C+v2nELhEpJrhr1teTilEUCCOcvRortxpxYqkJOXopyrI0LflWdxrTwicJIUf2GCaq5WGSTC4nzZtndvyIgzgo2G7B2SNw1VXjQw9R/N+/epzQZM1OWZgnhszGJfq8MckTbGtbdIfXv82TD0xAzs00jDJiaxncIIsY1s3Nyy/PMgRCTsouR0ODVF+qpPt2P66ukOWBPX9l9cp6CkoaEk7z2io+YaADlfCVaNHqEBKqErGHa4QkD3l92xeZZWqAX+fku31b8M0vy8QpbCKFGYCVq97e906tvYhAiLb2spRmy+2gwBEfoni4njJ2MGYi5ZftDNhgnw/CLhIunuPXJ6WVjMZN9FOrRSeN8LdIgkwAUVFOQtynAvuKSrCC4Ph1z9+tRm6ugw2/MFg8Pq3QVnVsq+q3VlSImAdCEhel2tMTU5uRYNCZnkbehPk9pBsuwLy6LzQ1BlxzfKROy3yfweDAMR/jSwrWT7ZuDLBMCBvgj/9tHU8CKDoq6q8CRczAU6MAAyBBQvwgi/879lRUfRvw39BgCuwqa9MWeh4jkkSkJycm1yLv0BAZmI59WZI6asvUKC8PFWLi6zGyCtAgDR3H3PObQ+keUfFzAqJql5XnZzMbnCt80Yg/LRzq6puSsPEEAgQGOjJFH8wEH4dExx8MS7/f0JA55KyOftlv8WGsj3JYi2L5GRj7eNvm0FAW2Ybxf+LlL46qUq+vX2B15xPFilw9Zl43uV1irm9IMAeMmuW3Sj5hRIUBFS99VZV2lg3AZkopJQMSJ/jm25KMPxHBPS0NO0vk+eHE5wWLK29UpPffhwjQC999W1uuIeU1cD1REwlnT8ZBMjhf+W5D4AAc8isAnM1H5L79ogA79KqHxdV/aQSgPjBQLgkgG8D+Ps/ImAJrv+c990LKU9bLU82udZci2puvfRtL9Sux19/namzERUFO/3FdGBklljiYqRKAHyWv8Is4k8//cQNGCDAG6iqajmGphVJQHgPCBhQRkAqf/v/s3vAEjV+QQDHT0DG7vFWvdTEkFduGDxiBiOoXWLxGqVgQV3i4qZzHzCVggBzzziNFJ43huMvrfqpCk07IICR2TMwHwNAfQoA/9VToM+15HzNQspz8fgHkiUNraeQvu48MGDqp6fgYnfFQrS6xMWFY667rdTbaK45wBBGF5fNGKN1uU0GAYz5bh1wCS484T/TAUdNk7ULKSuFvK0SJ0lfHS677MzyFZrV1NQlLi6Aj9dYb3+T55IXM9CxogAcV/3vSvC/Bj1utPD6n/EnnaQbrf6BCX0AAAAASUVORK5CYII=)
-}
-
-.react-tel-input .ad {
-  background-position: -16px 0
-}
-
-.react-tel-input .ae {
-  background-position: -32px 0
-}
-
-.react-tel-input .af {
-  background-position: -48px 0
-}
-
-.react-tel-input .ag {
-  background-position: -64px 0
-}
-
-.react-tel-input .ai {
-  background-position: -80px 0
-}
-
-.react-tel-input .al {
-  background-position: -96px 0
-}
-
-.react-tel-input .am {
-  background-position: -112px 0
-}
-
-.react-tel-input .ao {
-  background-position: -128px 0
-}
-
-.react-tel-input .ar {
-  background-position: -144px 0
-}
-
-.react-tel-input .as {
-  background-position: -160px 0
-}
-
-.react-tel-input .at {
-  background-position: -176px 0
-}
-
-.react-tel-input .au {
-  background-position: -192px 0
-}
-
-.react-tel-input .aw {
-  background-position: -208px 0
-}
-
-.react-tel-input .az {
-  background-position: -224px 0
-}
-
-.react-tel-input .ba {
-  background-position: -240px 0
-}
-
-.react-tel-input .bb {
-  background-position: 0 -11px
-}
-
-.react-tel-input .bd {
-  background-position: -16px -11px
-}
-
-.react-tel-input .be {
-  background-position: -32px -11px
-}
-
-.react-tel-input .bf {
-  background-position: -48px -11px
-}
-
-.react-tel-input .bg {
-  background-position: -64px -11px
-}
-
-.react-tel-input .bh {
-  background-position: -80px -11px
-}
-
-.react-tel-input .bi {
-  background-position: -96px -11px
-}
-
-.react-tel-input .bj {
-  background-position: -112px -11px
-}
-
-.react-tel-input .bm {
-  background-position: -128px -11px
-}
-
-.react-tel-input .bn {
-  background-position: -144px -11px
-}
-
-.react-tel-input .bo {
-  background-position: -160px -11px
-}
-
-.react-tel-input .br {
-  background-position: -176px -11px
-}
-
-.react-tel-input .bs {
-  background-position: -192px -11px
-}
-
-.react-tel-input .bt {
-  background-position: -208px -11px
-}
-
-.react-tel-input .bw {
-  background-position: -224px -11px
-}
-
-.react-tel-input .by {
-  background-position: -240px -11px
-}
-
-.react-tel-input .bz {
-  background-position: 0 -22px
-}
-
-.react-tel-input .ca {
-  background-position: -16px -22px
-}
-
-.react-tel-input .cd {
-  background-position: -32px -22px
-}
-
-.react-tel-input .cf {
-  background-position: -48px -22px
-}
-
-.react-tel-input .cg {
-  background-position: -64px -22px
-}
-
-.react-tel-input .ch {
-  background-position: -80px -22px
-}
-
-.react-tel-input .ci {
-  background-position: -96px -22px
-}
-
-.react-tel-input .ck {
-  background-position: -112px -22px
-}
-
-.react-tel-input .cl {
-  background-position: -128px -22px
-}
-
-.react-tel-input .cm {
-  background-position: -144px -22px
-}
-
-.react-tel-input .cn {
-  background-position: -160px -22px
-}
-
-.react-tel-input .co {
-  background-position: -176px -22px
-}
-
-.react-tel-input .cr {
-  background-position: -192px -22px
-}
-
-.react-tel-input .cu {
-  background-position: -208px -22px
-}
-
-.react-tel-input .cv {
-  background-position: -224px -22px
-}
-
-.react-tel-input .cw {
-  background-position: -240px -22px
-}
-
-.react-tel-input .cy {
-  background-position: 0 -33px
-}
-
-.react-tel-input .cz {
-  background-position: -16px -33px
-}
-
-.react-tel-input .de {
-  background-position: -32px -33px
-}
-
-.react-tel-input .dj {
-  background-position: -48px -33px
-}
-
-.react-tel-input .dk {
-  background-position: -64px -33px
-}
-
-.react-tel-input .dm {
-  background-position: -80px -33px
-}
-
-.react-tel-input .do {
-  background-position: -96px -33px
-}
-
-.react-tel-input .dz {
-  background-position: -112px -33px
-}
-
-.react-tel-input .ec {
-  background-position: -128px -33px
-}
-
-.react-tel-input .ee {
-  background-position: -144px -33px
-}
-
-.react-tel-input .eg {
-  background-position: -160px -33px
-}
-
-.react-tel-input .er {
-  background-position: -176px -33px
-}
-
-.react-tel-input .es {
-  background-position: -192px -33px
-}
-
-.react-tel-input .et {
-  background-position: -208px -33px
-}
-
-.react-tel-input .fi {
-  background-position: -224px -33px
-}
-
-.react-tel-input .fj {
-  background-position: -240px -33px
-}
-
-.react-tel-input .fk {
-  background-position: 0 -44px
-}
-
-.react-tel-input .fm {
-  background-position: -16px -44px
-}
-
-.react-tel-input .fo {
-  background-position: -32px -44px
-}
-
-.react-tel-input .fr,
-.react-tel-input .bl,
-.react-tel-input .mf {
-  background-position: -48px -44px
-}
-
-.react-tel-input .ga {
-  background-position: -64px -44px
-}
-
-.react-tel-input .gb {
-  background-position: -80px -44px
-}
-
-.react-tel-input .gd {
-  background-position: -96px -44px
-}
-
-.react-tel-input .ge {
-  background-position: -112px -44px
-}
-
-.react-tel-input .gf {
-  background-position: -128px -44px
-}
-
-.react-tel-input .gh {
-  background-position: -144px -44px
-}
-
-.react-tel-input .gi {
-  background-position: -160px -44px
-}
-
-.react-tel-input .gl {
-  background-position: -176px -44px
-}
-
-.react-tel-input .gm {
-  background-position: -192px -44px
-}
-
-.react-tel-input .gn {
-  background-position: -208px -44px
-}
-
-.react-tel-input .gp {
-  background-position: -224px -44px
-}
-
-.react-tel-input .gq {
-  background-position: -240px -44px
-}
-
-.react-tel-input .gr {
-  background-position: 0 -55px
-}
-
-.react-tel-input .gt {
-  background-position: -16px -55px
-}
-
-.react-tel-input .gu {
-  background-position: -32px -55px
-}
-
-.react-tel-input .gw {
-  background-position: -48px -55px
-}
-
-.react-tel-input .gy {
-  background-position: -64px -55px
-}
-
-.react-tel-input .hk {
-  background-position: -80px -55px
-}
-
-.react-tel-input .hn {
-  background-position: -96px -55px
-}
-
-.react-tel-input .hr {
-  background-position: -112px -55px
-}
-
-.react-tel-input .ht {
-  background-position: -128px -55px
-}
-
-.react-tel-input .hu {
-  background-position: -144px -55px
-}
-
-.react-tel-input .id {
-  background-position: -160px -55px
-}
-
-.react-tel-input .ie {
-  background-position: -176px -55px
-}
-
-.react-tel-input .il {
-  background-position: -192px -55px
-}
-
-.react-tel-input .in {
-  background-position: -208px -55px
-}
-
-.react-tel-input .io {
-  background-position: -224px -55px
-}
-
-.react-tel-input .iq {
-  background-position: -240px -55px
-}
-
-.react-tel-input .ir {
-  background-position: 0 -66px
-}
-
-.react-tel-input .is {
-  background-position: -16px -66px
-}
-
-.react-tel-input .it {
-  background-position: -32px -66px
-}
-
-.react-tel-input .je {
-  background-position: -144px -154px
-}
-
-.react-tel-input .jm {
-  background-position: -48px -66px
-}
-
-.react-tel-input .jo {
-  background-position: -64px -66px
-}
-
-.react-tel-input .jp {
-  background-position: -80px -66px
-}
-
-.react-tel-input .ke {
-  background-position: -96px -66px
-}
-
-.react-tel-input .kg {
-  background-position: -112px -66px
-}
-
-.react-tel-input .kh {
-  background-position: -128px -66px
-}
-
-.react-tel-input .ki {
-  background-position: -144px -66px
-}
-
-.react-tel-input .xk {
-  background-position: -128px -154px
-}
-
-.react-tel-input .km {
-  background-position: -160px -66px
-}
-
-.react-tel-input .kn {
-  background-position: -176px -66px
-}
-
-.react-tel-input .kp {
-  background-position: -192px -66px
-}
-
-.react-tel-input .kr {
-  background-position: -208px -66px
-}
-
-.react-tel-input .kw {
-  background-position: -224px -66px
-}
-
-.react-tel-input .ky {
-  background-position: -240px -66px
-}
-
-.react-tel-input .kz {
-  background-position: 0 -77px
-}
-
-.react-tel-input .la {
-  background-position: -16px -77px
-}
-
-.react-tel-input .lb {
-  background-position: -32px -77px
-}
-
-.react-tel-input .lc {
-  background-position: -48px -77px
-}
-
-.react-tel-input .li {
-  background-position: -64px -77px
-}
-
-.react-tel-input .lk {
-  background-position: -80px -77px
-}
-
-.react-tel-input .lr {
-  background-position: -96px -77px
-}
-
-.react-tel-input .ls {
-  background-position: -112px -77px
-}
-
-.react-tel-input .lt {
-  background-position: -128px -77px
-}
-
-.react-tel-input .lu {
-  background-position: -144px -77px
-}
-
-.react-tel-input .lv {
-  background-position: -160px -77px
-}
-
-.react-tel-input .ly {
-  background-position: -176px -77px
-}
-
-.react-tel-input .ma {
-  background-position: -192px -77px
-}
-
-.react-tel-input .mc {
-  background-position: -208px -77px
-}
-
-.react-tel-input .md {
-  background-position: -224px -77px
-}
-
-.react-tel-input .me {
-  background-position: -112px -154px;
-  height: 12px
-}
-
-.react-tel-input .mg {
-  background-position: 0 -88px
-}
-
-.react-tel-input .mh {
-  background-position: -16px -88px
-}
-
-.react-tel-input .mk {
-  background-position: -32px -88px
-}
-
-.react-tel-input .ml {
-  background-position: -48px -88px
-}
-
-.react-tel-input .mm {
-  background-position: -64px -88px
-}
-
-.react-tel-input .mn {
-  background-position: -80px -88px
-}
-
-.react-tel-input .mo {
-  background-position: -96px -88px
-}
-
-.react-tel-input .mp {
-  background-position: -112px -88px
-}
-
-.react-tel-input .mq {
-  background-position: -128px -88px
-}
-
-.react-tel-input .mr {
-  background-position: -144px -88px
-}
-
-.react-tel-input .ms {
-  background-position: -160px -88px
-}
-
-.react-tel-input .mt {
-  background-position: -176px -88px
-}
-
-.react-tel-input .mu {
-  background-position: -192px -88px
-}
-
-.react-tel-input .mv {
-  background-position: -208px -88px
-}
-
-.react-tel-input .mw {
-  background-position: -224px -88px
-}
-
-.react-tel-input .mx {
-  background-position: -240px -88px
-}
-
-.react-tel-input .my {
-  background-position: 0 -99px
-}
-
-.react-tel-input .mz {
-  background-position: -16px -99px
-}
-
-.react-tel-input .na {
-  background-position: -32px -99px
-}
-
-.react-tel-input .nc {
-  background-position: -48px -99px
-}
-
-.react-tel-input .ne {
-  background-position: -64px -99px
-}
-
-.react-tel-input .nf {
-  background-position: -80px -99px
-}
-
-.react-tel-input .ng {
-  background-position: -96px -99px
-}
-
-.react-tel-input .ni {
-  background-position: -112px -99px
-}
-
-.react-tel-input .nl,
-.react-tel-input .bq {
-  background-position: -128px -99px
-}
-
-.react-tel-input .no {
-  background-position: -144px -99px
-}
-
-.react-tel-input .np {
-  background-position: -160px -99px
-}
-
-.react-tel-input .nr {
-  background-position: -176px -99px
-}
-
-.react-tel-input .nu {
-  background-position: -192px -99px
-}
-
-.react-tel-input .nz {
-  background-position: -208px -99px
-}
-
-.react-tel-input .om {
-  background-position: -224px -99px
-}
-
-.react-tel-input .pa {
-  background-position: -240px -99px
-}
-
-.react-tel-input .pe {
-  background-position: 0 -110px
-}
-
-.react-tel-input .pf {
-  background-position: -16px -110px
-}
-
-.react-tel-input .pg {
-  background-position: -32px -110px
-}
-
-.react-tel-input .ph {
-  background-position: -48px -110px
-}
-
-.react-tel-input .pk {
-  background-position: -64px -110px
-}
-
-.react-tel-input .pl {
-  background-position: -80px -110px
-}
-
-.react-tel-input .pm {
-  background-position: -96px -110px
-}
-
-.react-tel-input .pr {
-  background-position: -112px -110px
-}
-
-.react-tel-input .ps {
-  background-position: -128px -110px
-}
-
-.react-tel-input .pt {
-  background-position: -144px -110px
-}
-
-.react-tel-input .pw {
-  background-position: -160px -110px
-}
-
-.react-tel-input .py {
-  background-position: -176px -110px
-}
-
-.react-tel-input .qa {
-  background-position: -192px -110px
-}
-
-.react-tel-input .re {
-  background-position: -208px -110px
-}
-
-.react-tel-input .ro {
-  background-position: -224px -110px
-}
-
-.react-tel-input .rs {
-  background-position: -240px -110px
-}
-
-.react-tel-input .ru {
-  background-position: 0 -121px
-}
-
-.react-tel-input .rw {
-  background-position: -16px -121px
-}
-
-.react-tel-input .sa {
-  background-position: -32px -121px
-}
-
-.react-tel-input .sb {
-  background-position: -48px -121px
-}
-
-.react-tel-input .sc {
-  background-position: -64px -121px
-}
-
-.react-tel-input .sd {
-  background-position: -80px -121px
-}
-
-.react-tel-input .se {
-  background-position: -96px -121px
-}
-
-.react-tel-input .sg {
-  background-position: -112px -121px
-}
-
-.react-tel-input .sh {
-  background-position: -128px -121px
-}
-
-.react-tel-input .si {
-  background-position: -144px -121px
-}
-
-.react-tel-input .sk {
-  background-position: -160px -121px
-}
-
-.react-tel-input .sl {
-  background-position: -176px -121px
-}
-
-.react-tel-input .sm {
-  background-position: -192px -121px
-}
-
-.react-tel-input .sn {
-  background-position: -208px -121px
-}
-
-.react-tel-input .so {
-  background-position: -224px -121px
-}
-
-.react-tel-input .sr {
-  background-position: -240px -121px
-}
-
-.react-tel-input .ss {
-  background-position: 0 -132px
-}
-
-.react-tel-input .st {
-  background-position: -16px -132px
-}
-
-.react-tel-input .sv {
-  background-position: -32px -132px
-}
-
-.react-tel-input .sx {
-  background-position: -48px -132px
-}
-
-.react-tel-input .sy {
-  background-position: -64px -132px
-}
-
-.react-tel-input .sz {
-  background-position: -80px -132px
-}
-
-.react-tel-input .tc {
-  background-position: -96px -132px
-}
-
-.react-tel-input .td {
-  background-position: -112px -132px
-}
-
-.react-tel-input .tg {
-  background-position: -128px -132px
-}
-
-.react-tel-input .th {
-  background-position: -144px -132px
-}
-
-.react-tel-input .tj {
-  background-position: -160px -132px
-}
-
-.react-tel-input .tk {
-  background-position: -176px -132px
-}
-
-.react-tel-input .tl {
-  background-position: -192px -132px
-}
-
-.react-tel-input .tm {
-  background-position: -208px -132px
-}
-
-.react-tel-input .tn {
-  background-position: -224px -132px
-}
-
-.react-tel-input .to {
-  background-position: -240px -132px
-}
-
-.react-tel-input .tr {
-  background-position: 0 -143px
-}
-
-.react-tel-input .tt {
-  background-position: -16px -143px
-}
-
-.react-tel-input .tv {
-  background-position: -32px -143px
-}
-
-.react-tel-input .tw {
-  background-position: -48px -143px
-}
-
-.react-tel-input .tz {
-  background-position: -64px -143px
-}
-
-.react-tel-input .ua {
-  background-position: -80px -143px
-}
-
-.react-tel-input .ug {
-  background-position: -96px -143px
-}
-
-.react-tel-input .us {
-  background-position: -112px -143px
-}
-
-.react-tel-input .uy {
-  background-position: -128px -143px
-}
-
-.react-tel-input .uz {
-  background-position: -144px -143px
-}
-
-.react-tel-input .va {
-  background-position: -160px -143px
-}
-
-.react-tel-input .vc {
-  background-position: -176px -143px
-}
-
-.react-tel-input .ve {
-  background-position: -192px -143px
-}
-
-.react-tel-input .vg {
-  background-position: -208px -143px
-}
-
-.react-tel-input .vi {
-  background-position: -224px -143px
-}
-
-.react-tel-input .vn {
-  background-position: -240px -143px
-}
-
-.react-tel-input .vu {
-  background-position: 0 -154px
-}
-
-.react-tel-input .wf {
-  background-position: -16px -154px
-}
-
-.react-tel-input .ws {
-  background-position: -32px -154px
-}
-
-.react-tel-input .ye {
-  background-position: -48px -154px
-}
-
-.react-tel-input .za {
-  background-position: -64px -154px
-}
-
-.react-tel-input .zm {
-  background-position: -80px -154px
-}
-
-.react-tel-input .zw {
-  background-position: -96px -154px
-}
-
-.react-tel-input * {
-  box-sizing: border-box;
-  -moz-box-sizing: border-box
-}
-
-.react-tel-input .hide {
-  display: none
-}
-
-.react-tel-input .v-hide {
-  visibility: hidden
-}
-
-.react-tel-input .form-control {
-  position: relative;
-  font-size: 14px;
-  letter-spacing: .01rem;
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-  padding-left: 48px;
-  margin-left: 0;
-  background: #FFFFFF;
-  border: 1px solid #CACACA;
-  border-radius: 5px;
-  line-height: 25px;
-  height: 35px;
-  width: 300px;
-  outline: none
-}
-
-.react-tel-input .form-control.invalid-number {
-  border: 1px solid #d79f9f;
-  background-color: #FAF0F0;
-  border-left-color: #cacaca
-}
-
-.react-tel-input .form-control.invalid-number:focus {
-  border: 1px solid #d79f9f;
-  border-left-color: #cacaca;
-  background-color: #FAF0F0
-}
-
-.react-tel-input .flag-dropdown {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  padding: 0;
-  background-color: #f5f5f5;
-  border: 1px solid #cacaca;
-  border-radius: 3px 0 0 3px
-}
-
-.react-tel-input .flag-dropdown:hover,
-.react-tel-input .flag-dropdown:focus {
-  cursor: pointer
-}
-
-.react-tel-input .flag-dropdown.invalid-number {
-  border-color: #d79f9f
-}
-
-.react-tel-input .flag-dropdown.open {
-  z-index: 2;
-  background: #fff;
-  border-radius: 3px 0 0 0
-}
-
-.react-tel-input .flag-dropdown.open .selected-flag {
-  background: #fff;
-  border-radius: 3px 0 0 0
-}
-
-.react-tel-input input[disabled]+.flag-dropdown:hover {
-  cursor: default
-}
-
-.react-tel-input input[disabled]+.flag-dropdown:hover .selected-flag {
-  background-color: transparent
-}
-
-.react-tel-input .selected-flag {
-  outline: none;
-  position: relative;
-  width: 38px;
-  height: 100%;
-  padding: 0 0 0 8px;
-  border-radius: 3px 0 0 3px
-}
-
-.react-tel-input .selected-flag:hover,
-.react-tel-input .selected-flag:focus {
-  background-color: #fff
-}
-
-.react-tel-input .selected-flag .flag {
-  position: absolute;
-  top: 50%;
-  margin-top: -5px
-}
-
-.react-tel-input .selected-flag .arrow {
-  position: relative;
-  top: 50%;
-  margin-top: -2px;
-  left: 20px;
-  width: 0;
-  height: 0;
-  border-left: 3px solid transparent;
-  border-right: 3px solid transparent;
-  border-top: 4px solid #555
-}
-
-.react-tel-input .selected-flag .arrow.up {
-  border-top: none;
-  border-bottom: 4px solid #555
-}
-
-.react-tel-input .country-list {
-  outline: none;
-  z-index: 1;
-  list-style: none;
-  position: absolute;
-  padding: 0;
-  margin: 10px 0 10px -1px;
-  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.35);
-  background-color: white;
-  width: 300px;
-  max-height: 200px;
-  overflow-y: scroll;
-  border-radius: 0 0 3px 3px
-}
-
-.react-tel-input .country-list .flag {
-  display: inline-block
-}
-
-.react-tel-input .country-list .divider {
-  padding-bottom: 5px;
-  margin-bottom: 5px;
-  border-bottom: 1px solid #ccc
-}
-
-.react-tel-input .country-list .country {
-  padding: 7px 9px
-}
-
-.react-tel-input .country-list .country .dial-code {
-  color: #6b6b6b
-}
-
-.react-tel-input .country-list .country:hover {
-  background-color: #f1f1f1
-}
-
-.react-tel-input .country-list .country.highlight {
-  background-color: #f1f1f1
-}
-
-.react-tel-input .country-list .flag {
-  margin-right: 7px;
-  margin-top: 2px
-}
-
-.react-tel-input .country-list .country-name {
-  margin-right: 6px
-}
-
-.react-tel-input .country-list .search {
-  position: sticky;
-  top: 0;
-  background-color: #fff;
-  padding: 10px 0 6px 10px
-}
-
-.react-tel-input .country-list .search-emoji {
-  font-size: 15px
-}
-
-.react-tel-input .country-list .search-box {
-  border: 1px solid #cacaca;
-  border-radius: 3px;
-  font-size: 15px;
-  line-height: 15px;
-  margin-left: 6px;
-  padding: 3px 8px 5px;
-  outline: none
-}
-
-.react-tel-input .country-list .no-entries-message {
-  padding: 7px 10px 11px;
-  opacity: .7
-}
-
-.react-tel-input .invalid-number-message {
-  position: absolute;
-  z-index: 1;
-  font-size: 13px;
-  left: 46px;
-  top: -8px;
-  background: #fff;
-  padding: 0 2px;
-  color: #de0000
-}
-
-.react-tel-input .special-label {
-  display: none;
-  position: absolute;
-  z-index: 1;
-  font-size: 13px;
-  left: 46px;
-  top: -8px;
-  background: #fff;
-  padding: 0 2px;
-  white-space: nowrap
-}
-
 .scheduler-wrapper {
   --gridDefaultSize: 1.75rem;
   --hoursInDay: 24;
@@ -26445,9 +10915,1021 @@ input:hover+.\[input\:hover_\+_\&\]\:border-l-default {
 
 @media (min-width: 640px) {
   .scheduler-grid-row-template {
-    grid-template-rows: var(--gridDefaultSize) repeat(
-        attr(data-gridstoperperday number),
-        var(--gridDefaultSize)
-      ) auto;
+    grid-template-rows:
+      var(--gridDefaultSize) repeat(attr(data-gridstoperperday number), var(--gridDefaultSize))
+      auto;
+  }
+}
+
+@media (min-width: 80rem) {
+  :where(.xl\:space-x-6 > :not(:last-child)):not(
+      :is(
+          :lang(ae),
+          :lang(ar),
+          :lang(arc),
+          :lang(bcc),
+          :lang(bqi),
+          :lang(ckb),
+          :lang(dv),
+          :lang(fa),
+          :lang(glk),
+          :lang(he),
+          :lang(ku),
+          :lang(mzn),
+          :lang(nqo),
+          :lang(pnb),
+          :lang(ps),
+          :lang(sd),
+          :lang(ug),
+          :lang(ur),
+          :lang(yi)
+        )
+    ) {
+    margin-left: calc(calc(var(--spacing) * 6) * var(--tw-space-x-reverse));
+    margin-right: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-x-reverse)));
+  }
+}
+
+.react-tel-input {
+  font-family: "Roboto", sans-serif;
+  font-size: 15px;
+  position: relative;
+  width: 100%;
+}
+.react-tel-input :disabled {
+  cursor: not-allowed;
+}
+.react-tel-input .flag {
+  width: 16px;
+  height: 11px;
+  background-image: url(data:image/png;base64,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);
+}
+.react-tel-input .ad {
+  background-position: -16px 0;
+}
+.react-tel-input .ae {
+  background-position: -32px 0;
+}
+.react-tel-input .af {
+  background-position: -48px 0;
+}
+.react-tel-input .ag {
+  background-position: -64px 0;
+}
+.react-tel-input .ai {
+  background-position: -80px 0;
+}
+.react-tel-input .al {
+  background-position: -96px 0;
+}
+.react-tel-input .am {
+  background-position: -112px 0;
+}
+.react-tel-input .ao {
+  background-position: -128px 0;
+}
+.react-tel-input .ar {
+  background-position: -144px 0;
+}
+.react-tel-input .as {
+  background-position: -160px 0;
+}
+.react-tel-input .at {
+  background-position: -176px 0;
+}
+.react-tel-input .au {
+  background-position: -192px 0;
+}
+.react-tel-input .aw {
+  background-position: -208px 0;
+}
+.react-tel-input .az {
+  background-position: -224px 0;
+}
+.react-tel-input .ba {
+  background-position: -240px 0;
+}
+.react-tel-input .bb {
+  background-position: 0 -11px;
+}
+.react-tel-input .bd {
+  background-position: -16px -11px;
+}
+.react-tel-input .be {
+  background-position: -32px -11px;
+}
+.react-tel-input .bf {
+  background-position: -48px -11px;
+}
+.react-tel-input .bg {
+  background-position: -64px -11px;
+}
+.react-tel-input .bh {
+  background-position: -80px -11px;
+}
+.react-tel-input .bi {
+  background-position: -96px -11px;
+}
+.react-tel-input .bj {
+  background-position: -112px -11px;
+}
+.react-tel-input .bm {
+  background-position: -128px -11px;
+}
+.react-tel-input .bn {
+  background-position: -144px -11px;
+}
+.react-tel-input .bo {
+  background-position: -160px -11px;
+}
+.react-tel-input .br {
+  background-position: -176px -11px;
+}
+.react-tel-input .bs {
+  background-position: -192px -11px;
+}
+.react-tel-input .bt {
+  background-position: -208px -11px;
+}
+.react-tel-input .bw {
+  background-position: -224px -11px;
+}
+.react-tel-input .by {
+  background-position: -240px -11px;
+}
+.react-tel-input .bz {
+  background-position: 0 -22px;
+}
+.react-tel-input .ca {
+  background-position: -16px -22px;
+}
+.react-tel-input .cd {
+  background-position: -32px -22px;
+}
+.react-tel-input .cf {
+  background-position: -48px -22px;
+}
+.react-tel-input .cg {
+  background-position: -64px -22px;
+}
+.react-tel-input .ch {
+  background-position: -80px -22px;
+}
+.react-tel-input .ci {
+  background-position: -96px -22px;
+}
+.react-tel-input .ck {
+  background-position: -112px -22px;
+}
+.react-tel-input .cl {
+  background-position: -128px -22px;
+}
+.react-tel-input .cm {
+  background-position: -144px -22px;
+}
+.react-tel-input .cn {
+  background-position: -160px -22px;
+}
+.react-tel-input .co {
+  background-position: -176px -22px;
+}
+.react-tel-input .cr {
+  background-position: -192px -22px;
+}
+.react-tel-input .cu {
+  background-position: -208px -22px;
+}
+.react-tel-input .cv {
+  background-position: -224px -22px;
+}
+.react-tel-input .cw {
+  background-position: -240px -22px;
+}
+.react-tel-input .cy {
+  background-position: 0 -33px;
+}
+.react-tel-input .cz {
+  background-position: -16px -33px;
+}
+.react-tel-input .de {
+  background-position: -32px -33px;
+}
+.react-tel-input .dj {
+  background-position: -48px -33px;
+}
+.react-tel-input .dk {
+  background-position: -64px -33px;
+}
+.react-tel-input .dm {
+  background-position: -80px -33px;
+}
+.react-tel-input .do {
+  background-position: -96px -33px;
+}
+.react-tel-input .dz {
+  background-position: -112px -33px;
+}
+.react-tel-input .ec {
+  background-position: -128px -33px;
+}
+.react-tel-input .ee {
+  background-position: -144px -33px;
+}
+.react-tel-input .eg {
+  background-position: -160px -33px;
+}
+.react-tel-input .er {
+  background-position: -176px -33px;
+}
+.react-tel-input .es {
+  background-position: -192px -33px;
+}
+.react-tel-input .et {
+  background-position: -208px -33px;
+}
+.react-tel-input .fi {
+  background-position: -224px -33px;
+}
+.react-tel-input .fj {
+  background-position: -240px -33px;
+}
+.react-tel-input .fk {
+  background-position: 0 -44px;
+}
+.react-tel-input .fm {
+  background-position: -16px -44px;
+}
+.react-tel-input .fo {
+  background-position: -32px -44px;
+}
+.react-tel-input .fr,
+.react-tel-input .bl,
+.react-tel-input .mf {
+  background-position: -48px -44px;
+}
+.react-tel-input .ga {
+  background-position: -64px -44px;
+}
+.react-tel-input .gb {
+  background-position: -80px -44px;
+}
+.react-tel-input .gd {
+  background-position: -96px -44px;
+}
+.react-tel-input .ge {
+  background-position: -112px -44px;
+}
+.react-tel-input .gf {
+  background-position: -128px -44px;
+}
+.react-tel-input .gh {
+  background-position: -144px -44px;
+}
+.react-tel-input .gi {
+  background-position: -160px -44px;
+}
+.react-tel-input .gl {
+  background-position: -176px -44px;
+}
+.react-tel-input .gm {
+  background-position: -192px -44px;
+}
+.react-tel-input .gn {
+  background-position: -208px -44px;
+}
+.react-tel-input .gp {
+  background-position: -224px -44px;
+}
+.react-tel-input .gq {
+  background-position: -240px -44px;
+}
+.react-tel-input .gr {
+  background-position: 0 -55px;
+}
+.react-tel-input .gt {
+  background-position: -16px -55px;
+}
+.react-tel-input .gu {
+  background-position: -32px -55px;
+}
+.react-tel-input .gw {
+  background-position: -48px -55px;
+}
+.react-tel-input .gy {
+  background-position: -64px -55px;
+}
+.react-tel-input .hk {
+  background-position: -80px -55px;
+}
+.react-tel-input .hn {
+  background-position: -96px -55px;
+}
+.react-tel-input .hr {
+  background-position: -112px -55px;
+}
+.react-tel-input .ht {
+  background-position: -128px -55px;
+}
+.react-tel-input .hu {
+  background-position: -144px -55px;
+}
+.react-tel-input .id {
+  background-position: -160px -55px;
+}
+.react-tel-input .ie {
+  background-position: -176px -55px;
+}
+.react-tel-input .il {
+  background-position: -192px -55px;
+}
+.react-tel-input .in {
+  background-position: -208px -55px;
+}
+.react-tel-input .io {
+  background-position: -224px -55px;
+}
+.react-tel-input .iq {
+  background-position: -240px -55px;
+}
+.react-tel-input .ir {
+  background-position: 0 -66px;
+}
+.react-tel-input .is {
+  background-position: -16px -66px;
+}
+.react-tel-input .it {
+  background-position: -32px -66px;
+}
+.react-tel-input .je {
+  background-position: -144px -154px;
+}
+.react-tel-input .jm {
+  background-position: -48px -66px;
+}
+.react-tel-input .jo {
+  background-position: -64px -66px;
+}
+.react-tel-input .jp {
+  background-position: -80px -66px;
+}
+.react-tel-input .ke {
+  background-position: -96px -66px;
+}
+.react-tel-input .kg {
+  background-position: -112px -66px;
+}
+.react-tel-input .kh {
+  background-position: -128px -66px;
+}
+.react-tel-input .ki {
+  background-position: -144px -66px;
+}
+.react-tel-input .xk {
+  background-position: -128px -154px;
+}
+.react-tel-input .km {
+  background-position: -160px -66px;
+}
+.react-tel-input .kn {
+  background-position: -176px -66px;
+}
+.react-tel-input .kp {
+  background-position: -192px -66px;
+}
+.react-tel-input .kr {
+  background-position: -208px -66px;
+}
+.react-tel-input .kw {
+  background-position: -224px -66px;
+}
+.react-tel-input .ky {
+  background-position: -240px -66px;
+}
+.react-tel-input .kz {
+  background-position: 0 -77px;
+}
+.react-tel-input .la {
+  background-position: -16px -77px;
+}
+.react-tel-input .lb {
+  background-position: -32px -77px;
+}
+.react-tel-input .lc {
+  background-position: -48px -77px;
+}
+.react-tel-input .li {
+  background-position: -64px -77px;
+}
+.react-tel-input .lk {
+  background-position: -80px -77px;
+}
+.react-tel-input .lr {
+  background-position: -96px -77px;
+}
+.react-tel-input .ls {
+  background-position: -112px -77px;
+}
+.react-tel-input .lt {
+  background-position: -128px -77px;
+}
+.react-tel-input .lu {
+  background-position: -144px -77px;
+}
+.react-tel-input .lv {
+  background-position: -160px -77px;
+}
+.react-tel-input .ly {
+  background-position: -176px -77px;
+}
+.react-tel-input .ma {
+  background-position: -192px -77px;
+}
+.react-tel-input .mc {
+  background-position: -208px -77px;
+}
+.react-tel-input .md {
+  background-position: -224px -77px;
+}
+.react-tel-input .me {
+  background-position: -112px -154px;
+  height: 12px;
+}
+.react-tel-input .mg {
+  background-position: 0 -88px;
+}
+.react-tel-input .mh {
+  background-position: -16px -88px;
+}
+.react-tel-input .mk {
+  background-position: -32px -88px;
+}
+.react-tel-input .ml {
+  background-position: -48px -88px;
+}
+.react-tel-input .mm {
+  background-position: -64px -88px;
+}
+.react-tel-input .mn {
+  background-position: -80px -88px;
+}
+.react-tel-input .mo {
+  background-position: -96px -88px;
+}
+.react-tel-input .mp {
+  background-position: -112px -88px;
+}
+.react-tel-input .mq {
+  background-position: -128px -88px;
+}
+.react-tel-input .mr {
+  background-position: -144px -88px;
+}
+.react-tel-input .ms {
+  background-position: -160px -88px;
+}
+.react-tel-input .mt {
+  background-position: -176px -88px;
+}
+.react-tel-input .mu {
+  background-position: -192px -88px;
+}
+.react-tel-input .mv {
+  background-position: -208px -88px;
+}
+.react-tel-input .mw {
+  background-position: -224px -88px;
+}
+.react-tel-input .mx {
+  background-position: -240px -88px;
+}
+.react-tel-input .my {
+  background-position: 0 -99px;
+}
+.react-tel-input .mz {
+  background-position: -16px -99px;
+}
+.react-tel-input .na {
+  background-position: -32px -99px;
+}
+.react-tel-input .nc {
+  background-position: -48px -99px;
+}
+.react-tel-input .ne {
+  background-position: -64px -99px;
+}
+.react-tel-input .nf {
+  background-position: -80px -99px;
+}
+.react-tel-input .ng {
+  background-position: -96px -99px;
+}
+.react-tel-input .ni {
+  background-position: -112px -99px;
+}
+.react-tel-input .nl,
+.react-tel-input .bq {
+  background-position: -128px -99px;
+}
+.react-tel-input .no {
+  background-position: -144px -99px;
+}
+.react-tel-input .np {
+  background-position: -160px -99px;
+}
+.react-tel-input .nr {
+  background-position: -176px -99px;
+}
+.react-tel-input .nu {
+  background-position: -192px -99px;
+}
+.react-tel-input .nz {
+  background-position: -208px -99px;
+}
+.react-tel-input .om {
+  background-position: -224px -99px;
+}
+.react-tel-input .pa {
+  background-position: -240px -99px;
+}
+.react-tel-input .pe {
+  background-position: 0 -110px;
+}
+.react-tel-input .pf {
+  background-position: -16px -110px;
+}
+.react-tel-input .pg {
+  background-position: -32px -110px;
+}
+.react-tel-input .ph {
+  background-position: -48px -110px;
+}
+.react-tel-input .pk {
+  background-position: -64px -110px;
+}
+.react-tel-input .pl {
+  background-position: -80px -110px;
+}
+.react-tel-input .pm {
+  background-position: -96px -110px;
+}
+.react-tel-input .pr {
+  background-position: -112px -110px;
+}
+.react-tel-input .ps {
+  background-position: -128px -110px;
+}
+.react-tel-input .pt {
+  background-position: -144px -110px;
+}
+.react-tel-input .pw {
+  background-position: -160px -110px;
+}
+.react-tel-input .py {
+  background-position: -176px -110px;
+}
+.react-tel-input .qa {
+  background-position: -192px -110px;
+}
+.react-tel-input .re {
+  background-position: -208px -110px;
+}
+.react-tel-input .ro {
+  background-position: -224px -110px;
+}
+.react-tel-input .rs {
+  background-position: -240px -110px;
+}
+.react-tel-input .ru {
+  background-position: 0 -121px;
+}
+.react-tel-input .rw {
+  background-position: -16px -121px;
+}
+.react-tel-input .sa {
+  background-position: -32px -121px;
+}
+.react-tel-input .sb {
+  background-position: -48px -121px;
+}
+.react-tel-input .sc {
+  background-position: -64px -121px;
+}
+.react-tel-input .sd {
+  background-position: -80px -121px;
+}
+.react-tel-input .se {
+  background-position: -96px -121px;
+}
+.react-tel-input .sg {
+  background-position: -112px -121px;
+}
+.react-tel-input .sh {
+  background-position: -128px -121px;
+}
+.react-tel-input .si {
+  background-position: -144px -121px;
+}
+.react-tel-input .sk {
+  background-position: -160px -121px;
+}
+.react-tel-input .sl {
+  background-position: -176px -121px;
+}
+.react-tel-input .sm {
+  background-position: -192px -121px;
+}
+.react-tel-input .sn {
+  background-position: -208px -121px;
+}
+.react-tel-input .so {
+  background-position: -224px -121px;
+}
+.react-tel-input .sr {
+  background-position: -240px -121px;
+}
+.react-tel-input .ss {
+  background-position: 0 -132px;
+}
+.react-tel-input .st {
+  background-position: -16px -132px;
+}
+.react-tel-input .sv {
+  background-position: -32px -132px;
+}
+.react-tel-input .sx {
+  background-position: -48px -132px;
+}
+.react-tel-input .sy {
+  background-position: -64px -132px;
+}
+.react-tel-input .sz {
+  background-position: -80px -132px;
+}
+.react-tel-input .tc {
+  background-position: -96px -132px;
+}
+.react-tel-input .td {
+  background-position: -112px -132px;
+}
+.react-tel-input .tg {
+  background-position: -128px -132px;
+}
+.react-tel-input .th {
+  background-position: -144px -132px;
+}
+.react-tel-input .tj {
+  background-position: -160px -132px;
+}
+.react-tel-input .tk {
+  background-position: -176px -132px;
+}
+.react-tel-input .tl {
+  background-position: -192px -132px;
+}
+.react-tel-input .tm {
+  background-position: -208px -132px;
+}
+.react-tel-input .tn {
+  background-position: -224px -132px;
+}
+.react-tel-input .to {
+  background-position: -240px -132px;
+}
+.react-tel-input .tr {
+  background-position: 0 -143px;
+}
+.react-tel-input .tt {
+  background-position: -16px -143px;
+}
+.react-tel-input .tv {
+  background-position: -32px -143px;
+}
+.react-tel-input .tw {
+  background-position: -48px -143px;
+}
+.react-tel-input .tz {
+  background-position: -64px -143px;
+}
+.react-tel-input .ua {
+  background-position: -80px -143px;
+}
+.react-tel-input .ug {
+  background-position: -96px -143px;
+}
+.react-tel-input .us {
+  background-position: -112px -143px;
+}
+.react-tel-input .uy {
+  background-position: -128px -143px;
+}
+.react-tel-input .uz {
+  background-position: -144px -143px;
+}
+.react-tel-input .va {
+  background-position: -160px -143px;
+}
+.react-tel-input .vc {
+  background-position: -176px -143px;
+}
+.react-tel-input .ve {
+  background-position: -192px -143px;
+}
+.react-tel-input .vg {
+  background-position: -208px -143px;
+}
+.react-tel-input .vi {
+  background-position: -224px -143px;
+}
+.react-tel-input .vn {
+  background-position: -240px -143px;
+}
+.react-tel-input .vu {
+  background-position: 0 -154px;
+}
+.react-tel-input .wf {
+  background-position: -16px -154px;
+}
+.react-tel-input .ws {
+  background-position: -32px -154px;
+}
+.react-tel-input .ye {
+  background-position: -48px -154px;
+}
+.react-tel-input .za {
+  background-position: -64px -154px;
+}
+.react-tel-input .zm {
+  background-position: -80px -154px;
+}
+.react-tel-input .zw {
+  background-position: -96px -154px;
+}
+.react-tel-input * {
+  box-sizing: border-box;
+  -moz-box-sizing: border-box;
+}
+.react-tel-input .hide {
+  display: none;
+}
+.react-tel-input .v-hide {
+  visibility: hidden;
+}
+.react-tel-input .form-control {
+  position: relative;
+  font-size: 14px;
+  letter-spacing: 0.01rem;
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  padding-left: 48px;
+  margin-left: 0;
+  background: #ffffff;
+  border: 1px solid #cacaca;
+  border-radius: 5px;
+  line-height: 25px;
+  height: 35px;
+  width: 300px;
+  outline: none;
+}
+.react-tel-input .form-control.invalid-number {
+  border: 1px solid #d79f9f;
+  background-color: #faf0f0;
+  border-left-color: #cacaca;
+}
+.react-tel-input .form-control.invalid-number:focus {
+  border: 1px solid #d79f9f;
+  border-left-color: #cacaca;
+  background-color: #faf0f0;
+}
+.react-tel-input .flag-dropdown {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  padding: 0;
+  background-color: #f5f5f5;
+  border: 1px solid #cacaca;
+  border-radius: 3px 0 0 3px;
+}
+.react-tel-input .flag-dropdown:hover,
+.react-tel-input .flag-dropdown:focus {
+  cursor: pointer;
+}
+.react-tel-input .flag-dropdown.invalid-number {
+  border-color: #d79f9f;
+}
+.react-tel-input .flag-dropdown.open {
+  z-index: 2;
+  background: #fff;
+  border-radius: 3px 0 0 0;
+}
+.react-tel-input .flag-dropdown.open .selected-flag {
+  background: #fff;
+  border-radius: 3px 0 0 0;
+}
+.react-tel-input input[disabled] + .flag-dropdown:hover {
+  cursor: default;
+}
+.react-tel-input input[disabled] + .flag-dropdown:hover .selected-flag {
+  background-color: transparent;
+}
+.react-tel-input .selected-flag {
+  outline: none;
+  position: relative;
+  width: 38px;
+  height: 100%;
+  padding: 0 0 0 8px;
+  border-radius: 3px 0 0 3px;
+}
+.react-tel-input .selected-flag:hover,
+.react-tel-input .selected-flag:focus {
+  background-color: #fff;
+}
+.react-tel-input .selected-flag .flag {
+  position: absolute;
+  top: 50%;
+  margin-top: -5px;
+}
+.react-tel-input .selected-flag .arrow {
+  position: relative;
+  top: 50%;
+  margin-top: -2px;
+  left: 20px;
+  width: 0;
+  height: 0;
+  border-left: 3px solid transparent;
+  border-right: 3px solid transparent;
+  border-top: 4px solid #555;
+}
+.react-tel-input .selected-flag .arrow.up {
+  border-top: none;
+  border-bottom: 4px solid #555;
+}
+.react-tel-input .country-list {
+  outline: none;
+  z-index: 1;
+  list-style: none;
+  position: absolute;
+  padding: 0;
+  margin: 10px 0 10px -1px;
+  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.35);
+  background-color: white;
+  width: 300px;
+  max-height: 200px;
+  overflow-y: scroll;
+  border-radius: 0 0 3px 3px;
+}
+.react-tel-input .country-list .flag {
+  display: inline-block;
+}
+.react-tel-input .country-list .divider {
+  padding-bottom: 5px;
+  margin-bottom: 5px;
+  border-bottom: 1px solid #ccc;
+}
+.react-tel-input .country-list .country {
+  padding: 7px 9px;
+}
+.react-tel-input .country-list .country .dial-code {
+  color: #6b6b6b;
+}
+.react-tel-input .country-list .country:hover {
+  background-color: #f1f1f1;
+}
+.react-tel-input .country-list .country.highlight {
+  background-color: #f1f1f1;
+}
+.react-tel-input .country-list .flag {
+  margin-right: 7px;
+  margin-top: 2px;
+}
+.react-tel-input .country-list .country-name {
+  margin-right: 6px;
+}
+.react-tel-input .country-list .search {
+  position: sticky;
+  top: 0;
+  background-color: #fff;
+  padding: 10px 0 6px 10px;
+}
+.react-tel-input .country-list .search-emoji {
+  font-size: 15px;
+}
+.react-tel-input .country-list .search-box {
+  border: 1px solid #cacaca;
+  border-radius: 3px;
+  font-size: 15px;
+  line-height: 15px;
+  margin-left: 6px;
+  padding: 3px 8px 5px;
+  outline: none;
+}
+.react-tel-input .country-list .no-entries-message {
+  padding: 7px 10px 11px;
+  opacity: 0.7;
+}
+.react-tel-input .invalid-number-message {
+  position: absolute;
+  z-index: 1;
+  font-size: 13px;
+  left: 46px;
+  top: -8px;
+  background: #fff;
+  padding: 0 2px;
+  color: #de0000;
+}
+.react-tel-input .special-label {
+  display: none;
+  position: absolute;
+  z-index: 1;
+  font-size: 13px;
+  left: 46px;
+  top: -8px;
+  background: #fff;
+  padding: 0 2px;
+  white-space: nowrap;
+}
+
+.stack-y-0 {
+  & > :not([hidden]) ~ :not([hidden]) {
+    margin-top: calc(var(--spacing) * 0);
+  }
+}
+.stack-y-1 {
+  & > :not([hidden]) ~ :not([hidden]) {
+    margin-top: calc(var(--spacing) * 1);
+  }
+}
+.stack-y-2 {
+  & > :not([hidden]) ~ :not([hidden]) {
+    margin-top: calc(var(--spacing) * 2);
+  }
+}
+.stack-y-3 {
+  & > :not([hidden]) ~ :not([hidden]) {
+    margin-top: calc(var(--spacing) * 3);
+  }
+}
+.stack-y-4 {
+  & > :not([hidden]) ~ :not([hidden]) {
+    margin-top: calc(var(--spacing) * 4);
+  }
+}
+.stack-y-5 {
+  & > :not([hidden]) ~ :not([hidden]) {
+    margin-top: calc(var(--spacing) * 5);
+  }
+}
+.stack-y-6 {
+  & > :not([hidden]) ~ :not([hidden]) {
+    margin-top: calc(var(--spacing) * 6);
+  }
+}
+.stack-y-8 {
+  & > :not([hidden]) ~ :not([hidden]) {
+    margin-top: calc(var(--spacing) * 8);
+  }
+}
+
+.sm\:stack-y-0 {
+  @media (width >= 40rem) {
+    & > :not([hidden]) ~ :not([hidden]) {
+      margin-top: calc(var(--spacing) * 0);
+    }
+  }
+}
+.sm\:stack-y-8 {
+  @media (width >= 40rem) {
+    & > :not([hidden]) ~ :not([hidden]) {
+      margin-top: calc(var(--spacing) * 8);
+    }
+  }
+}
+
+.md\:stack-y-0 {
+  @media (width >= 48rem) {
+    & > :not([hidden]) ~ :not([hidden]) {
+      margin-top: calc(var(--spacing) * 0);
+    }
+  }
+}
+
+.lg\:stack-y-0 {
+  @media (width >= 64rem) {
+    & > :not([hidden]) ~ :not([hidden]) {
+      margin-top: calc(var(--spacing) * 0);
+    }
+  }
+}
+.lg\:stack-y-5 {
+  @media (width >= 64rem) {
+    & > :not([hidden]) ~ :not([hidden]) {
+      margin-top: calc(var(--spacing) * 5);
+    }
+  }
+}
+.lg\:stack-y-6 {
+  @media (width >= 64rem) {
+    & > :not([hidden]) ~ :not([hidden]) {
+      margin-top: calc(var(--spacing) * 6);
+    }
   }
 }
diff --git a/packages/platform/atoms/package.json b/packages/platform/atoms/package.json
index 1b346e7a24..7f38ed6b57 100644
--- a/packages/platform/atoms/package.json
+++ b/packages/platform/atoms/package.json
@@ -19,6 +19,8 @@
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^15.0.1",
+    "@tailwindcss/cli": "^4.0.0",
+    "@tailwindcss/postcss": "^4.0.0",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.3.1",
     "@types/react": "18.0.26",
@@ -48,7 +50,8 @@
   "exports": {
     ".": {
       "import": "./dist/cal-atoms.js",
-      "types": "./dist/index.d.ts"
+      "types": "./dist/index.d.ts",
+      "require": "./dist/cal-atoms.umd.cjs"
     },
     "./add-members-switch/AddMembersWithSwitchPlatformWrapper": "./add-members-switch/AddMembersWithSwitchPlatformWrapper.tsx",
     "./add-members-switch/AddMembersWithSwitchWebWrapper": "./add-members-switch/AddMembersWithSwitchWebWrapper.tsx",
@@ -83,11 +86,11 @@
     "marked": "^15.0.3",
     "react-use": "^17.4.2",
     "tailwind-merge": "^1.13.2",
-    "tailwindcss": "^3.3.3",
-    "tailwindcss-animate": "^1.0.6"
+    "tailwindcss": "^4"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "typescript": "^5.0.0"
-  }
+  },
+  "main": "./dist/cal-atoms.umd.cjs"
 }
diff --git a/packages/platform/atoms/postcss.config.js b/packages/platform/atoms/postcss.config.js
index 7e9c785e04..c2ddf74822 100644
--- a/packages/platform/atoms/postcss.config.js
+++ b/packages/platform/atoms/postcss.config.js
@@ -1,10 +1,5 @@
-const config = {
+export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-    "postcss-import": {},
-    "postcss-prefixwrap": `.calcom-atoms`,
+    "@tailwindcss/postcss": {},
   },
 };
-
-export default config;
diff --git a/packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx b/packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx
index bfa88f5789..ee9f8ab6c1 100644
--- a/packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx
+++ b/packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx
@@ -161,7 +161,7 @@ export const SelectedCalendarsSettingsPlatformWrapper = ({
                               )}>
                               {t("toggle_calendars_conflict")}
                             </p>
-                            <ul className="space-y-4 px-5 py-4">
+                            <ul className="stack-y-4 px-5 py-4">
                               {connectedCalendar.calendars?.map((cal) => {
                                 return (
                                   <PlatformCalendarSwitch
@@ -192,7 +192,7 @@ export const SelectedCalendarsSettingsPlatformWrapper = ({
                         message={<span>{connectedCalendar.error?.message || t("calendar_error")}</span>}
                         iconClassName="h-10 w-10 ml-2 mr-1 mt-0.5"
                         actions={
-                          !Boolean(connectedCalendar.delegationCredentialId) && (
+                          !connectedCalendar.delegationCredentialId && (
                             <div className="flex w-32 justify-end">
                               <PlatformDisconnectIntegration
                                 credentialId={connectedCalendar.credentialId}
@@ -277,7 +277,7 @@ const PlatformDisconnectIntegration = (props: {
         description: t("app_removed_successfully"),
       });
       setModalOpen(false);
-      onSuccess && onSuccess();
+      if (onSuccess) onSuccess();
     },
     onError: () => {
       toast({
@@ -290,7 +290,7 @@ const PlatformDisconnectIntegration = (props: {
   return (
     <DisconnectIntegrationComponent
       onDeletionConfirmation={async () => {
-        !props.isDryRun && setModalOpen(false);
+        if (!props.isDryRun) setModalOpen(false);
 
         if (props.isDryRun) {
           toast({
@@ -412,7 +412,7 @@ const PlatformAdditionalCalendarSelector = ({
               label={t("add_calendar_label", { calendar: "Google" })}
               loadingLabel={t("add_calendar_label", { calendar: "Google" })}
               alreadyConnectedLabel={t("add_calendar_label", { calendar: "Google" })}
-              className="hover:bg-subtle hover:text-default cursor-pointer border-none bg-inherit text-inherit md:rounded-md"
+              className="not-disabled:hover:bg-subtle hover:text-default shadow-none! cursor-pointer border-none bg-inherit text-inherit md:rounded-md"
             />
           </div>
           <div>
@@ -425,7 +425,7 @@ const PlatformAdditionalCalendarSelector = ({
               label={t("add_calendar_label", { calendar: "Outlook" })}
               loadingLabel={t("add_calendar_label", { calendar: "Outlook" })}
               alreadyConnectedLabel={t("add_calendar_label", { calendar: "Outlook" })}
-              className="hover:bg-subtle hover:text-default cursor-pointer border-none bg-inherit text-inherit md:rounded-md"
+              className="not-disabled:hover:bg-subtle hover:text-default shadow-none! cursor-pointer border-none bg-inherit text-inherit md:rounded-md"
             />
           </div>
           <div>
@@ -438,7 +438,7 @@ const PlatformAdditionalCalendarSelector = ({
               label={t("add_calendar_label", { calendar: "Apple" })}
               loadingLabel={t("add_calendar_label", { calendar: "Apple" })}
               alreadyConnectedLabel={t("add_calendar_label", { calendar: "Apple" })}
-              className="hover:bg-subtle hover:text-default cursor-pointer border-none bg-inherit text-inherit md:rounded-md"
+              className="not-disabled:hover:bg-subtle hover:text-default shadow-none! cursor-pointer border-none bg-inherit text-inherit md:rounded-md"
             />
           </div>
         </div>
diff --git a/packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsWebWrapper.tsx b/packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsWebWrapper.tsx
index bcde264216..245c420f25 100644
--- a/packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsWebWrapper.tsx
+++ b/packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsWebWrapper.tsx
@@ -80,7 +80,7 @@ const ConnectedCalendarList = ({
                 {!fromOnboarding && (
                   <>
                     <p className="text-subtle px-5 pt-4 text-sm">{t("toggle_calendars_conflict")}</p>
-                    <ul className="space-y-4 px-5 py-4">
+                    <ul className="stack-y-4 px-5 py-4">
                       {connectedCalendar.calendars?.map((cal) => (
                         <CalendarSwitch
                           disabled={isDisabled}
@@ -203,14 +203,14 @@ export const SelectedCalendarsSettingsWebWrapperSkeleton = () => {
         <div className="border-subtle mt-4 rounded-lg border p-4">
           <div className="flex items-center">
             <div className="bg-emphasis h-10 w-10 animate-pulse rounded-md" />
-            <div className="ml-4 space-y-2">
+            <div className="ml-4 stack-y-2">
               <div className="bg-emphasis h-4 w-32 animate-pulse rounded-md" />
               <div className="bg-emphasis h-4 w-48 animate-pulse rounded-md" />
             </div>
           </div>
-          <div className="border-subtle mt-4 space-y-4 border-t pt-4">
+          <div className="border-subtle mt-4 stack-y-4 border-t pt-4">
             <div className="bg-emphasis h-4 w-64 animate-pulse rounded-md" />
-            <div className="space-y-2">
+            <div className="stack-y-2">
               {[1, 2, 3].map((i) => (
                 <div key={i} className="flex items-center justify-between">
                   <div className="bg-emphasis h-4 w-48 animate-pulse rounded-md" />
diff --git a/packages/platform/atoms/sources.css b/packages/platform/atoms/sources.css
new file mode 100644
index 0000000000..a19bac6942
--- /dev/null
+++ b/packages/platform/atoms/sources.css
@@ -0,0 +1 @@
+@source "./**/*.{js,ts,jsx,tsx}";
diff --git a/packages/platform/atoms/src/components/ui/button.tsx b/packages/platform/atoms/src/components/ui/button.tsx
index fb6d40e910..6df18f40a1 100644
--- a/packages/platform/atoms/src/components/ui/button.tsx
+++ b/packages/platform/atoms/src/components/ui/button.tsx
@@ -15,7 +15,7 @@ const buttonVariants: buttonVariantsType = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: "bg-primary-default text-primary-foreground hover:bg-primary-default/90",
         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
diff --git a/packages/platform/atoms/src/components/ui/dialog.tsx b/packages/platform/atoms/src/components/ui/dialog.tsx
index 4259ae1a42..245742a5ff 100644
--- a/packages/platform/atoms/src/components/ui/dialog.tsx
+++ b/packages/platform/atoms/src/components/ui/dialog.tsx
@@ -60,7 +60,7 @@ const DialogContent = React.forwardRef<
         <DialogPrimitives.Content
           ref={ref}
           className={cn(
-            "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
+            "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
             className
           )}
           {...props}>
@@ -77,7 +77,7 @@ const DialogContent = React.forwardRef<
 DialogContent.displayName = DialogPrimitives.Content.displayName;
 
 const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
+  <div className={cn("flex flex-col stack-y-1.5 text-center sm:text-left", className)} {...props} />
 );
 DialogHeader.displayName = "DialogHeader";
 
diff --git a/packages/platform/atoms/src/components/ui/switch.tsx b/packages/platform/atoms/src/components/ui/switch.tsx
index 20c88117db..aa155e9cc2 100644
--- a/packages/platform/atoms/src/components/ui/switch.tsx
+++ b/packages/platform/atoms/src/components/ui/switch.tsx
@@ -8,7 +8,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-[24px] w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      "focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary-default data-[state=unchecked]:bg-input peer inline-flex h-[24px] w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
       className
     )}
     {...props}
diff --git a/packages/platform/atoms/src/components/ui/toast.tsx b/packages/platform/atoms/src/components/ui/toast.tsx
index cc270ce38e..fc8cc9f764 100644
--- a/packages/platform/atoms/src/components/ui/toast.tsx
+++ b/packages/platform/atoms/src/components/ui/toast.tsx
@@ -22,7 +22,7 @@ const ToastViewport = forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      "fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
       className
     )}
     {...props}
@@ -31,7 +31,7 @@ const ToastViewport = forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80",
   {
     variants: {
       variant: {
diff --git a/packages/platform/atoms/styles.css b/packages/platform/atoms/styles.css
new file mode 100644
index 0000000000..ef046709d4
--- /dev/null
+++ b/packages/platform/atoms/styles.css
@@ -0,0 +1,3 @@
+@import "tailwindcss";
+@import "../../config/theme/tokens.css";
+@import "./sources.css";
diff --git a/packages/platform/atoms/styles/react-phone-input2.css b/packages/platform/atoms/styles/react-phone-input2.css
deleted file mode 100644
index 3f2aa81e29..0000000000
--- a/packages/platform/atoms/styles/react-phone-input2.css
+++ /dev/null
@@ -1 +0,0 @@
-.react-tel-input{font-family:'Roboto',sans-serif;font-size:15px;position:relative;width:100%}.react-tel-input :disabled{cursor:not-allowed}.react-tel-input .flag{width:16px;height:11px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAACmCAMAAAACnqETAAADAFBMVEUAAAD30gQCKn0GJJ4MP4kMlD43WGf9/f329vcBAQHhAADx8vHvAwL8AQL7UlL4RUUzqDP2MjLp6un2Jyj0Ghn2PTr9fHvi5OJYuln7Xl75+UPpNzXUAQH29jH6cXC+AAIAJwBNtE/23Ff5aGdDr0TJAQHsZV3qR0IAOQB3x3fdRD/Z2NvuWFLkcG7fVlH4kI4AAlXO0M8BATsdS6MCagIBfQEASgPoKSc4VKL442q4xeQAigD46eetAABYd9jvf3nZMiwAAoD30zz55X5ng9tPbKZnwGXz8x77+lY7OTjzzikABGsenh72pKNPldEAWgHgGBgAACH88/Gqt95JR0OWAwP3uLd/qdr53kMBBJJ3d3XMPTpWer8NnAwABKPH1O1VVFIuLSz13NtZnlf2kEh9keLn7vfZ4vNkZGHzvwJIXZRfZLuDwfv4y8tvk79LlUblzsxorGcCBusFKuYCCcdmfq5jqvlxt/tzktEABLb8/HL2tlTAw8SLlMFpj/ZlpNhBZ81BYbQcGxuToN9SYdjXY2Lz7lD0dCQ6S9Dm0EUCYPdDlvWWvd2AnviXqc11eMZTqPc3cPMCRev16ZrRUE0Hf/tNT7HIJyTptDVTffSsTkvhtgQ0T4jigoFUx/g+hsX9/QUHzQY1dbJ7sHV02Pduvd0leiK1XmaTrfpCQPgELrrdsrY1NamgyPrh03iPxosvX92ysbCgoZzk5kP1YD7t6AILnu+45LykNS40qvXDdHnR6tBennz6u3TSxU1Or9Swz6wqzCsPZKzglJbIqEY8hDhyAgFzbJxuOC+Li4d9sJLFsnhwbvH2d1A3kzAqPZQITsN76nq2dzaZdKJf4F6RJkb078YFiM+tnWZGh2F+dDibykYoMcsnekdI1UhCAwWb25qVkEq43km9yBrclQMGwfyZ3/zZ2QK9gJxsJWCBUk32QwqOSYKRxh6Xdm3B4oMW22EPZzawnR72kgZltCqPxrdH1dkBkqDdWwwMwMO9O2sqKXHvipPGJkzlRVLhJjVIs9KrAAAAB3RSTlMA/v3+/Pn9Fk05qAAAUU9JREFUeNp0nAlYVNcVxzHazoroGBkXhAgCCjMsroDoKIgKdFABBwQUnSAoCqLRFBfcCBIM4kbqShO1hlSrCJqQQmNssVFqjBarsdjFJWlMTOLXJDZt8/X7+j/n3pk3vNq/bb8+3nbP79137/+dd954qTVt8uTJL73OMhqNer03ady4cWOhWbNmjV+0FfKGjMb36Y9/1fXUst9cb2y8/lpb797z5k2dOjXVD9Ljn59fcHBwQEDAgGch3l9on6feeeedn0r9kvT222+/sErRgvcDArwV8f5tN/rcvPnMZ22pqVFRSVGjR38k9Rsp9fLql/MXLj20VGjt2rVeak2Og/auI/kHBQ3We/tCo0ZNhwYNGj58/NaWlpbOyMhIX1//2/jTrICvckhXruQsWbJw4cL3tzhPORynSk5lZWVtglL9IkmdDQ05NqvVGhLwbKSUL+Tvb9yH/2sj+eN0IZZ3fvq3Hnp71ZtCOyofdnTYSzq9xX7UtsF9+/Y1FpeZT54sc2aUlq6Jy89YM/qj2oZaoeOkMR8dV/Tee++NWb04rrA5MRYKDAyc/NKCpwDIyKhE9LEzZ/r4DLQAAE6EyEeM6AcNH7m1pTMnB+fHX7tG9Bs0Xt+GwM/frqm5tz950aKDk6rsiA0xbUrbRAii/BDeV9bGhQsPRlyOCAuZ9GykZwT++n2RHPnVYQU+oaFDPQD8jEQAPiDdaLPaHGVXbn/O7YHQuIH9B/gYgzts1iqrtSopKWlNRkzS6I8arFaOFvTfew8AfiYil/rN6sWTKwtbArOzExISUl7+vwCuQNt8Bg71AQCcTwNpWeFbW3IIQEmJr08XgIzX2xDcvZrs7Jru5EWXwwKSwh2RkQ77w7Q0bXp6YRoDaKO+kZl8MCwsYpJ3pEf8liAAoPhDhqUMQ/wAkF+oqKiosJYA7HxotdnTtVe6Pr/S0h+AI90QffU3T9obGuwdD5PqkmJiMtbM+ajWI/60TX0COhoarAAE1dfXV80FgMmLi1oSKP7/B6ASAGyBV4YM7D/Bx8/bF7g5fgmgEwCCSiJtJQRgxEi9zZqVdYUu9pW0tLCIgOvxdR0dpxx5aWl7EzV7CYDV+tXnCzMzkzMvE4AFlTuhZaSf/OQny1L32RC+JcHikzJ06NAJoe+YNKRbsbG3xPlWZTxssNmdOP/J27ffudLJ60V7DAaT1lxRVvfwYe3Jlrq4uJiKjAwAcIWP+BkAhV/i7HA0uAG8BAIUf8qfzvwvgJcQf+XMK4GWi8OGTpgQ6uftzwC0LIM2WgcASwaXOBwlA7v6/YgAhFRt2pRGeu0/UyImbal77eHDo2kVAJAeKwE0fl6P63/5nSlTAKBCiR8AovbZEL9lf8I5AMD5booAE7OzY8X5fhGJi0/nTzTcMh+80iIBaF0APqvIu3EjqfRGcV3S4aSKYk8AaW4ADU4gOFlfn8sAXnoJBDpTCMDL87zU2kwATl+x1Nw+P2HChKHBBMDHFT8DwGjX11FSYu/f/aMf9XtOjwAacf2hmxRg7ywXDrr30kb7NVhDquo/z0y+nJs7ZUoYA5DxM4BFmcnJyV93PzjbvQhK3urqAYF7xflWVT5ssDaU4Ox7T9+6Ei4BaN0AUkvXJEExMTGHD9cdFgA2yfgZQAP1f0dJw0lrfS4BmIb4z5yZBgL/H8DibbehGROenQ0AQRhvZPwQAGDQ8wlqsFkmdP9ofr/n/OgK2ml1xxQECAAy/tdee++91wCA1mfWJy/KXUTr536T+O67764X2r9//T+3JkPdDx50f7qItDXfff+zeAxY1lYV0VCmPV1Ts5fGAGUYDbHpo0qT6vKTignAtWvXiuf0StwGZZPQybMPAYC8/xF/bj0AUPwvvzytKCdl6dMAvJxRuXjxkCHnL86YMXs2A8B4m4yWQTrdIp0uByMajcATJrwzXwCIiIjAFSrbJwGI+FlH00YH8/rQy5enQPsYgBK/BLCI1c0Afonhn/XjH8MNLP9o1Y4Pfg795N9hYQ23bt1q4fb07z+A/ITR2J8AFJnqOP7iuj7Fc35TK+9/bkPaM+NGiSnsB6wRIwGA4n/5T5Pzc5aeeAqAP1VCM4niWRqVgr1p1sEYlskNJQC4BQZbLJi0MAgCgBUKqYo3VEVEhIWFTZqXtYmVxiIAtB4QeDUAvMuSFBgAJCkwAKHlLAKw4wMIFG5URVgdLdwedEq6BuCgj1qzpi4uiVScYa6I0fWKJQVC2aRDY0eNWrlyECwMMIDDc2vZ6UF0F7z8tB5w4kTvtZ+ygklGkk4lvZ6sne45SDg8aJIQ2z+4Mmg0qcfauXPnfvPNN9XV/1S0VSWyf1Ls4FZ5aIHu/blGKb2UOM0ckq4PmsZ2b8yYMb2l4FbhX8ePHwmhuSPXkhaQ5q0tXzBvntdUUq9eSyFu9njXxpA74Leg198yktRWVI4OkAkymw2Q3WO90+nnN3u2H0QkHI6JpHHj2GvTYdsupd68GfVZ4yTJqJeUaNKhQ+rzCUvOMXEr//4vD3333XdLe+rRJx4iqumDnT2O5zW1HII1hPLy8pJGjz9GWgk9D61Al4fWkWay9VRbUa1GEVCYDRoonu0dr++n0ZQ0dMCNdDRYHVrtuImjWHQ80lvfl4WfhJetw1CFm6h+rkazd28iJHvyIe/IHt7ZOBY7o4GPH4smPqf7nRwz/sH6bmmi2HtvYiBUYPxEcZakt701PdsPAIhb3DBbYmIIAOK+F9HXJ6z7t799AwDI48+cOQRi66m2ogoAYVwIQEkQb8DrJza1azRWq9NpjUjXtg+aNXHU9EEQHW/YsGFD3toHMFZbgzUsDNPkPgAgpScG1vA4TgB8PZATAAoc6IasWPHhhwCQkyNCdwMIJCVqDabA8+cAAJFLYVD92dvpjvQe7ZcA7p0/350dEzNmy+iRAHBPrO9+AwB41Of4h2HoFdZYhsfL7ej7QmbSBdED/GkDXv+ju9Pv4i9mM+g09Rs1duKoQSQR/4whb7msbFhufHy8M2xup6AZ3sHzWOChaveIWQCtn00A7s/84MDuD4bd+fBDcYEukrVna5fwMQPAsqnQZOqqLtBzezysvHd6z/YLANndUELMGAmgXqzPfeON3+IE8PHbuL2YegYCAO+/fz/io2VMM+5HpR/BGXIPGCzix3oAaBo13aApK9Mahg8fNAo9ANsPGi7iB4BLZRUPH9advJGb6zx+3Jk7FwFtCNekNzQUabW3cAv0Ek9uUA0U+PGsY4NmzrxQVBS3e82wGQDA7bvI8SsAsgNP7y26HV4GALyeJzGaY5J18fZ4GT+3DwBK8/K2ZF/s7v46ZYwEsMJHrJ/gApBJ8QPAs9gh2BYBnT077OwUnvcBwB0/nCEAQPFBdADefv5dPEu3p2u18e39Bg2aPou2h9wNmP3wi7bGL9qsuVOcizoBgM/X0BBtamggK2wGABn+WSLw8awm9P4Du3ecys+aMWPGt6J9medF/EsBIBbxJxSFm4vM5moJAOGL+AHAO90jfglgy5bshO7uFAIQM2fkyhUr6sX6fW+MJQDYX1wvWI/+uOIc79mziJec4ESxDPGy6AF9RfzYHgBw02s7yswNhf1GDJ8+lvcfPgKrxfoAa0S9uP9HTV95LHdur8TzuF7W5OSqDdEGAFiaiIjk9U8hAMdw+1Ts3r37VPOMGR/K9l3k+CUA9P9b4c6y8LKC6upqAiDj3wpxD1Dix/m9Uku3KAD6xMx5DgC6xfrLYwnAEuw/jOJnAMHjpnvECwA8aK5YseK3EA2aogf0pQNIAIOaXI8S0/sBAPaHaLUEIOJHPmjUsWACACN7/qLVmoz2Zjabv3x8X+oBdP/DWeih94d9sHv3BzO+fOOND6l9C93xL00BgOy97dHo/ZHm6EcAwM8OHlZ+YLpFtF9eQAGA9+81pg8DQCzdU3D9Ef/YN3AC8OP4Z5D1DBg7XYmfAKitqYl7AA8AvDxxVLtGW1VVVhYRZjC0jhg/Tuzv3j6gCuEjfghGYd/cXrFk5BNqai4K633k938h/Zp15C8Tx68E7X7Dtm2b8QZEAH743j8gYQQwC8TGlp08Z7ZWC+k/4eFf6pc//Sje3+TZ/pFeqXkQ7hoIhhoAnve8ogRgCQZBMQsgTgBgXykpAoDKmpoIuJP/wMvzwaOKHkisVfUnDYZZ2J/k3n4ST/94UiHt2/d+Lx7yttFAXnP+60W6+X9ggQFzGDdeOJT791fQNAgAv/qHFFMAAJou7AWQBCAkKXzknW71bD96APnWQ4c+hthRsv1Ty2WNA4InwYYpzhJSW1MT+lmkxx9awyfNhQVmvf9+c9M4kVt1by8tsmuLub3I/in6er7URGkh1SZ1znfk/xR9o2oP7F8Pax1vbO8RgJcwhYp8BvpMcD1t+0GffPJ7xUo+CA54Yc+DPXv2vGA0vkBavfqIW+xeH3kr8iJ9QxJegQNpu/TMzZupnzXOkQ7+OkumeCCOU+Si2Sr7kR6RkQZ/iA0y62PWVKlUiLy8fsz1MSd6s+YhLz1vu0t7ILS4T1Rqn2cU9fF6YQdpMZIAG6dNmzZ5bX+7PZKGsXi0CM9xwZ+0DmuVnejxsHMDJu3Zu24vkrT+QTtYq4/8nvWHPzyeCa2HUySRbzMKAO9CGhZ15Pku67uGlaS7frzoeFat26uY2CpzijiIrbKfLdH2buy7eKLkR8oAaXWhQNLH8+qEKirKy0tLS6O8bXVZQpvg8dPmbV/O+jH0IvRClLY06hkPAcBGqLa19ckBzC0HVg+0R9rQFpqFtWER1oBPhr3+eutPocevPzIaBwTseTORAu/rQ7sd2AgA4g69T1PlfmGVsX9fn8ESALk4ER5Gsb/Mny2tbzGkPQwASH1s2iTDBwC2yhYeVdgq+yXODAwpCCzAozT7Dml12fqR8VGcOMtk9A0pkUvsI7YvR+DQrl2vQLtWpdbFPAVAq8lgMrcygKEEoKQsJKTMYQgLDQn4ZN3r60T43ngSrH5g1rBcWaINAoCMX1plXq8GoBUAXNYX4RcfPqzVXa8tqk3bpATAVtnCVpytsp8tsCBifcJVil8BoFhfu7OE5RCyGn0HWxweQLYvf/HF2tp1T568IgD0Gf2MJilKBSCrPf5Cc3h76e4zuwmAv8ZqQ5cLMwwNA4DWn+IfwoeqX3/8kQvAQC2rGQCU+NkqywuiAqAVACa6rO/hYsR/uBi3wKZd7wGA1gPAcEvfhAQAmEEA4DwLEgo4/tmzwyYdYqurWF+9zWKxhCKlTjnV2WEBxkhHX5/G8jSZEZoKALWJWbuyYgWBVRgA6vqk9hgDNh54YtI2t2jbn5wBgAl2m1XTYAmxhFoNU5DG/uRnHuG/d/yjEa0X7kID+99tgu6OxTytxK8A0KoAaCGexz+rWHPpUtKaG4e1hwnAhhNZlLtMhwyG+HhDGVvl0PXZ2fv7w3oMe8vPijuf4of2AQCyutDmzWdI1zcv0Psr8SOFF2As0Th8Qr84CiEzcjSKni09b4l5C+al4r9uAcCBA1nthuYKc3spA4i0hWgNdFazgbK8n3iEjzct380S1rd/f+mkAECJH87O21/2v76eALQM4MiRX0+MKqXsFXSYAei8/d3WXLHaoQNTUga4AYSGiesPTSEASvwEwCrin4D4GYAv4m9MS5M5yalGX1uixccntCDwKqf5n5FSboGNBw4caG03m1tbz5zZs3v1bAAAKvtJDAuzAeD1c0r4DEBY4f4DKH4C8AclfgYQxFl0etRWAAj+RwjA6DUyfuoC3xt02F6JnwDQ8UNpeQAB+DTY6op/HxJLU+au3jj5JYRPwvR5ZoFN3v12oVxjkE+oXbG+4o71WH5dJa9VALD7wBPMArvP7AEAfaTVgm3NZkzcszHoBCvhM4BvhTcfMOCB8OZH/sDxp0hrCwA8PvKjNqkaAPaL80sAyvU3fF+sU1tptspDaRkA3gKAEIoforwaAPhZ3f2de4RWeUvAARqDKH65ZDKE7/nxriexm17ZtO0JxvhXX1n1Q5UAYCMQTCsvn7ybEuYL9JE2q9jfZJoSBgADEP5xt757MJM0xMcHUUOfzr9Pywlua+vtThhJAOvdPYDc/LjRayC+CxiDTm2l2SpbeJmPHywzyhLDXH1ICI96wEAcAlIr4ABKSThuXt4c75ByyJ2Zj9qDWbD2SSJmAdaqBSp5CdPoB5frx9LDdEVDG6C5cKnB/xz1kdB3rAcP2Bb7+X0q9GtOXirWU7HGEgBSwI/CoehosrIT2f7pFKmtNFvlYF4W/jvAI6kMoX2y1kBIZKBHu1PDwfNI7A1ZbP+UIgPMAn08hFnAIOROal3P6pnlzSQlK8pHf4F2s+AwjSRNvDsCadl76bQif9tbqDBdNvzPfxcy8+nCw1OULDDrOukEi7PXnngo+IDLY8UZZMmGOmsMn09yPTI8VwjhWEUkXIY4mYVu2/7qq9tJXuqsLoxJj+XMZqEWUmdnskabf8olWOI9Rl9Ik07vqeh1id/EpqZRUGKOhksqxveuZGm0Idx3g//+BPrd734n793wXnuFEoUOXc+ClJcrC4wiI8rv0On4GNUbbh8TBRtwDOPVWerxv2P9SuiPukKcBwd0xRPusuLSH+/xUmd1r9dm5XsuZzZ35kBLxCt+ANBoihA5CY6YAODEmnS8KRpIr7cBgJp2uyDkahcmi+EAUE7SpvPQFRrw9yfcvk5nPHUyApDokQWPBQCOXN7DafPo+ABH1RN8fL0t6OrVq1X3eC7C8dVZ6vHu2P/4xz//WQDAQ44rnmhXFlrYYxeAW+mJ6bcSEyUAEFCyqJdPfkX6HLp8+fJXBEBTyAR2uAD0tWjSfbh9BGAUxX/1zi8HVXcpAHZq03m9BNBptXY4ET8DUOKXANJk/AxAFETYbO/ayJ3aACAwcH3gep/Qru4PUZ8w/nW8X9gWOMSdZR7bRG81jkOU1XjeDUArFOey4i++WFW1vr4NAMTLaFjLvekuAJvylYKIXIcvFcQItzLB9o5G44CzylcA+Pe1+GjS+fojwGDO4hbcOfuXX35bnZ0deIgB7Nyp1QqrygB+1Wb9lbOBAUQTAOV1XuwhdRZXI7Q3UVplfSKS45aEc0MH9p/yTveKkQCw7WrIXneWmYDMrD3++Mnx47x8Iqt8GiTs4+bJ8y6V3Xj4sOLkjV27qjA9AYCBvGJsQkLgXraKBAAEOsCdZPfLdbjjRwQAUOJvxy7t/BK+NKuPhqVYTX6PEHJ101+qq8MWLcrUqdf/ne5Pa+OvMLPRPB3dBw+ychaDSkers7gaFiAliv31sSHr14euv0o8n322XoeAHXhwOyuydsMYwJDax0+ePD5OywCA8NM4fAIwdWfdtIqKvKyMXbuKDPWFRS8wAG3r3lvtF0RBAveANuqv7K2Dc+3K9Z/g7gGtlKRja9sjPjSQF6/eqc7+9ttztKz3Z6uarl22BcqL+jvdo1URvyqzGbSUpOTX6XlkW0mvpaqzuBLA6dOxOD4DKMA7koRzaMyUf3+xczUCvlVgic+m+CWAIUNqjz95vEkBwJdfAniVhj6+/xuRjGyTAO42XRjVxJMfACjxE4CuveRlC2SO7d13NJD59yJFSQD0QRj+tPHu7flhpqv6y+pv/9lF7wn0QexZ4g1bBIBZBCAnIsJaEm+QAJT4f/Naqrmndd2wCFMPhuHTp3OWQDk6vS1hfcL+6v6I/iU8vgPAkAs1+5vPIn62zt6+56AsdNChjx49OqcvwsEQPx2OjwcAIv5d+YW5hfkSgNZ814wNGADHP0HEo58Q8PXe2Fjx/JkCxd7T8uXn+CUA3P4AILcPFu8NuqrDziF+lND4hfCjigAQsywKozQN0Esc8eJ89LTHLk8+7ZmV+LnBnJX2KNAA8KvVQ//9xWTYkDNnJq9VW2m5XF8vl2lSx/X3AMDhU35kee7yXS94mfh8St78RNZDOetAEwBAmaRjoS6t4a7M0TKFcWxNtfE+cvvgsWKCjs3U8jwFAGxd0w150DIAkHO0QSjaSPM3Pa6BI+RnVtojAPAErBRo6AeHtN1YDP8uRra1aiutXgYALTZ1H287pn+SxAAA0pFB0aQT7wuzKbOQwV93kfC/Qt13j/TI0k5kg2Yqox1YY0VBwlKdWXgx6VvLzKlRrPEjRU53Q7QQdpenE/bW7G7JBpZOpUmfLVi9arXQWkhtpdXLZP8WzFsQFx3Hh2vm/CjrBZaX9UbvmzenotZWWmpZ3AOJUgvCtkq/2u2Vy0lmbiOfZhxLqSWuyC/FpS5qbCyiW/6LUm/om2rv6mrvR9VGyCRkNErs6uOprS2bcpaZ91Bbd0CTmsTiPd/i8gtuzxGVPpoIebTY61qJ+aT9pJOytEnQ6NfiSBlxcbWsMTRG7LBtdFvJ8nxI9FAyKEhgkJRa4jqHpigjQxMZqamry/fV1Hk3eWRx198zmjTpmEZovSbe7tRGq4+ntraGnlY9nJfT47Wu5YAGVIKSZIEF7y8KOrg9R5C++r2iI6/W9myvF2p3/YNwyqQYcl/Fc14TkcNAk+r60AkPhBzg0wkA4GNi2fyDCMAg5VURKkfz4uwOzWJN0GBNuR0Qrnk3jTrrqlh68O1wvDlyNCBp6R+k0Tqq7ACgOp7K2koA6b7xSgFGeuTgvkElWBYAEDgidxVY8P5c0DGMrbLTgx908tVTPdo73uumw+4baW94WByTlp+fFuMCkJGhBqD1ACCeFP2pTg/WVzkgTpiXUV6GtCCeD4Li82N29vYGoDs1/Lrvy379ngcADaWtg0JwMAe8ufp46gIM+brdYnEKL4/lSF5fItqjFE6ms6/g/UVBB18Qb1xgeno4x7qqf/XUKdr81i2ZIfJaU1LR0YEsbUxMWmnFUQEgP5/sYFxceXlWn1XIGR6w0JzDWosGZ2SIBgeFwJvDeBBvtxWVz5Ior2Xle486i4KIO1fP3aEXkiv0QQ47pa9CQoTTnP304227d08ejwMsszRaylwAZIGDvwCw/RQ8ObRRaBUXcIiCDpwPAN6NvQoN5vgHngOA5XT7NDVJa+31WUXSjRsxa27EXEuLawGAo3HU/+OysnBjlpdmPeNnExkYV16+HO3NEKMQJjgrGizjl1a0MTLI4xL2vek9KrBg+IiuhBRUFhMAfrojiae74Kcf715m8j0+ngDgj/vBR9QOAyArUmj2njc5cJmkOLCKa5u5PTO4YMM7cR0REPELAMtxxA0bpDX3SsXYFwNdu5bWmZN0bc7RjNraOMSPHpBRCgCrKWcYKq//njNrp4kGmyCQCQlGg5X40WDZA3z6u3vAnUEjRtw5d+5LAJi/Qm9xcOstFht9JxHp9/TjDeteKJyd7AFhuVPKhFX39vcXXd4hssjbuQO4IGxkAD6iPZy1Rg9Yj/g5/IGPAGD58kJ42Q0bwnE8AUDG39mZl5eToyMAiL62Fok2AkD34O7QM26jlIcG14oui6sYEjymrpxeyuUJlaZuqViWnz5Y0x8AQpt7J6V6Hxs+4k4N2chD386f/6EeRseB9lso89oBY6I+3lhVAQYDSHfud5qEkUEWGftj574ii2xWUqJyPTqfKOjg/WlQ5P7v4wJwSguhoJEV7hW1huOHKO1xDQD45aJWWyoAUAPOhBEAgwtAbZ2YhC2haDA/bbkfNvKmxmRobJF5mgEDNL/Q2EPKU72nD7rPPhq5rwf9CIDdageAUK2hod4GAKrj/U8BRiQ/ju8/R/7UJ4Ssbl9HutbpL63uUws2RH/k5bKe1vrKq8td1nsflDsXAES5OXQY9da639SS6uQswAC0ByyTlR6QAQkbEgIBQNbicggY8qCpdRpb3M6dNAguS4rTWC4ZjwVCXIABCitgdZ2RGNBDMAs4bSUAoDre/xRgsCFYvx5hkbkVVjfIv6/L6j61YIMLOs7ysuvttdSRV+vcnqEecycAiFpbFtUbiEpbzpiy6NKsDlhL/pS1ZQuq6TZwkjCYJOtuSVNJpZ8nIQeaf/NmPlKyz9R+b4T++cj46JF+9iM9JK2un5+0uurjkX2T5Qsso5Df/7O6smCj5/a93oI+5eUjKu0JVpLMJK/r18PDZRaWq4i3k0ykcHbLKmcqaoVlCvcQtGjEjyZ6emF1Fre3CpDa6vKZhbHn8wdLueytnqU8n7CTFSllugeMik0WaJd6CrUZDTfmwep/cY3S5M/hmqjP73V9Mj0uKjnA7ZQtFebiRWiVt8x/yrHW6GE1SYf8Hraa2psUa2m0QWRlQ0QWd8FiUrkrL5XK+ytm13iiUog3mzZtQbANsrpL7CfpySCz+G8BXEChYRVAxj1vSsmCDVUBxTfFTq3zpDO+Li5/Q9OFlrg6tdX2MovZCn6MtXM7PS8LAPQ+HQA48IcPeardqFesJtf6HvL2bby97tat9unCCQIAz/ORkWKeBwB3PgafKWxOFVYXCYvjwuqe4NAlnpcIgIhcFkQAAAfOfwwNIwAALR4IkKEpMJp6ZrWj1QUUgx2Yde32G/hIB+VVx6LUVlsCcF2Dyt4MQBzvFQgAKP62pvA2CUBaTZmF/RjLEV+dn7nuVvuo4fQRFQBYoHRH31DKAgdX5EMSb0ZGXIy0uiU+JcLqEoBprvgZgBK/BKDEHxYBAIMEAG16NQDoJYAdO7QCQAKnL043N5+mbpB4qNEZ77CXlFRk5FMJfFOd/OyOxJ/deZ1A99+8Weue5gjALphFLL+yezcB2AhZmy5Y2Wnh9feSCGE1ET8DAM2D3WeHDKFuMGi80R/hl+CjqvgSBsBlc5V0vMpCqigRF4viN7AVXV252B3+S8jaKtdTZoH5q7IIaUUjJnEBhYHWxysA3ty4482Nb2r5+KyMuvw64fQqnBknT2aU7aQe0PX8MqoXaKUsaCvivWvQmiQA7qHQ5t7bkSt5RctWYzcD2MEAwsNDJICvFi7sewf6knRnIltPn8vdxGNYvGkcAPj42OPt9hJfTqpyAws1GRnaImRBXQAQf4mBG7i2snwnaxlp51R1FjnEYRfqgBo69nHO0YD1ngAKNxbiP7S9BFAXV1EhnN7D8KLw5riiirq4lXUHK47VIf6mC63tTU3trU3T78IJilJSpQcAwK5XeLlQAXCg6oMbVYife8DCep8RSqkpACD+e0hL70UPGD5S70/pLXQ6pyhY4BzfYi20uNDgBoD4Bxi4gQyQZnVZPK3OMquXOecIdgQA0vMGuPwbD+yg9RIA4o8T20+tAFvxlV59Te6y0Vh5wWQytLYaTOgBAFCp3KNiEPzxrldUADD8VV06/wUWfw4AZDUVqzoSy2GXHwyZiTGgHwGhLHGoj7Mk0jmUAVS4D54BxcVcr90E5fUfkJTGb36ox4gSDwg9hkthP4RQCDtu3Ic6dYEDF1CYPAHweowBwgqPbVoJyXJXfFCxrCgjDv8Jr4urO51bk1GBLDOUQ+IssxesKKlSqveeH7+iBnAAqo/YTTogsq49rOfB7m23brUOp2UGQNH4DJ1gEVnledP47pKvfLdEqd/9occo8TMAJX4CoFXilwBg+lQA5HoFAIcvviiZWsHXH4q5nVDzk9HqLLNXUaFLJlORqahuz4uQOCDPAkblUYvkx1bTw3oGt3Xi4ivLsoDBnVWeygNc3mYSsoQA4PnyFwDIMCglD8EjXc3/kAQAPbPE4Wx9PW6BF6RDkW1ci2+K+JsngQE9AB2QOwEudGNdRoU6y+zl/ohMmjWyf6uiyfduWEVSnJ0wZLw4UvkMTaebCCuqLOtVFQxKGasQdwSYZdcZPWweSykFFuKwlZxoOBdQXIiGmvUkVxJ5g5TaSivnHs3SqeQ1UZUl7Q1p9Bp3kQWvFicXNvvQfGX7cR8fmqs6oPozOp1KAqgClSyw1AKSnqVA/PbTXj3E7RWnn/81jrcb4loHme7+n/Pz5krWuu3GM5+hVnmOfAICAFVWtzdVE9g05VApHvNTPawnW8fLiYmPeXvofmCNztv2lRxRuG/p1AUXOl6rrDd6WFGyyqsXQ4oXnKe3sRIT2f5YAsY2PV4nNJPUS2nv/a9wQJ3yewPiW2OcP3wDN8LQvIHP3zO+7/kXJ8IvrYGuJBUDgEhqyruaAJSXa0I0eaSjRwGA1otw2DrqOs8HBt6hzb+tSbi4RAdn17jE/UI7UwJw+Po6xLOFjmsroj//fEMmr+eCCovl6lUfeqHu47d2scsG0WA5eSqMj1AovM/QiAB8JXZnnRvBul6u9k4/v9Ccmbzwn8ZIgROwwDPET6sxdeaEa5xOTfiSnHA+//OeWetce0cDVAzl5BwGgNb29lb570L73fZ+AFCqsWg4fgCIYuspLidbVxzwNgggzZOQ0o2AyNpG2JWHKQZgJ6sdycvR3CGdDbYyE6kFABD/+uyEgoFcUBHQEAHVV1XxZyNhcwUAy/r1FP+UiIBZo0zmY+2etcQc//3uzE5T54P1evSokvj4SB/w7I/jAUB4Z3N6ZF8f3/TmJRsYwMILraQLUOvwz8ocHR2ODlSo5V65sg8ANKx0B7IsJGGtLaraXXF+Nir0/r77fPb58wkXM1HAAACUpbZjvQJAfJY00EnLRt8gdPXPIyIuiwoRLqi4mlBQkFI9gQFQUWpDhNNZbwWAXADg+AMD9w8dOmVKaMAsg2FQ+3BYFs/2TL+/EIN4Z8qjgXqjf4kdpoP7kwCgMWkdMGNDI03hOD+11+xhrWWt8uHiwyfbGk+6AdjtjkhhPV3Fx2F0/tnyszixP9cCy8/UshP2y8/Q7Brg9sHeImvLX42JlLADy+E4HrxxZlhY8gSuEGGrjOrnagAg4wMA9RH4lCu+w5lLADpQ+mlxxm8LvFUytKTEcnCWofV5fOVzzAmVlDk7yAneP4/4M79GcSoBcJb4l8SHIH4+Hj8oNoeGLtv8kNojASjWGlnwS5eK16BMM6eidMlhFwBtpK/Bw3qGqqyn2J+SkASAPtM6fz7l62QG4O8RvwQQL95qOGnZDeCyLGaGVeYesL8ayxKANl6Lt125+/DV2CVTZZGzcrHZPDmvbPLm8O/RA4a39+uux+WQF2T6/ZZMxJ/yDbcHPcBGPYDjFwBM2lPL8jafyTCF4/zUXrOHlY7iStXDEDlUAPCNdzgdeHqz8z9Hwzx8SQoAR4/S6/yYo1FsPbUKADipewnZeMvxZcrS7q2LuNY3TMYPAQAUSfHbeDma/1xmtdIYYMYYQE5yYEFKyjdoLwMIC4sHAPzHSQAqKovi8L5w2uT8yrz8uPLiWStN7Su60COnkADg8fkWU2dmZkr/ZwWAoCCMAUEU/7M4np9BE57TrM3avLm8sHnhBkM0ffbX4S4mdoSNXiPiv3b7ypIlt2/rvNjaYnwXFQb99QRAO5QB4Fvio6PZeor4OAury7mYXfMtWeFvD/X6OpNqfbtkXpYLIkTBhX1w30gDA6D9Mfp2d/cTn6kZg7gQoLpaFlQsKH/J9Sj6p1/8Yktq76LFIDAtP39yXn5dXv4zs5DFqFB06Us8jYZn7v/GVRCBW4qrC4aKMQA9wJyzJFqbn2+IXrgkmgHkDqRV8nwE4DDU53DO7dt0C6gLCqZi+tdatHlyGhjN1lPL4vVbAwPvu2aVOyn7dd4h92ReVhREqAsuxk6XqyFplT0LMILXyklQUpiaVJlfWRkXt7g8P6M8I2Na1KyVpTt2vPjiRgjO/MAq3RKopsDd3lNFbuVDWTj/hmYTj3ctzQYCEIFRVzkfirUheRdcAwB1lpXsnyHAFOVyj2w9hdPk9UsPjVM+Oxv/9cdzx49VliF1wcVY1S84eBg9JavMLlyqeOrhw6mpl4qjooqfiSruM+sErLmHYP7++sijvduVYgfa7gX1+XV6Y48TzoF6WOFPDilfxZHUWWB1VlY+Fe12qTe0wCOIQKkE+SaAQcp6E1JvlZRSYaH+AyCPn1sTnxMqmq2SOsurXl5L6vUWnYFb4KXWJ3v39viFBXXWVFpT/EFY0wOiSjg//03Wmd5ZdRcSL9SJdyN4MRK4cuX69bHvtjWyLn4claHNqFCssfN/ACSSlF+MGKC8+fSFjHPbWOJ4Bw/+1VsldXvVy2sXQ+ug2Fgy108DwIHXPr4gfmHhs4fQDegL0g2dPhI20/2ISwA4B52fv5EeQncAwGk0/HReHj/u5qUGrny+oCBWNPhg48GuKK3GcMkKcR2DddI8IfQYIffvA8hfjEDBBklG4A8AHDj0DnTwr656mAApdZZXvcxWe+bM27e3bQujn/J6CoDH/FFkQs1dBnCiklL4izERbebSUmEMTE3HzOIzOQaw42+dnX/bCBGAFjS/heNXADQ27u+6eLHrIABkGOouKVmdsgyhiooMoU/58/ga1vnzNV/j9beUqB94v02JnwDopFxPzOqCCvUyAZi8rQa/d5f9fwAkcg/APXteApgGFWq0hZM9ANx9fkWTJ4CizOQiAWDBYnR8cf1BYHNq4PMAEAgACfsPgkBXVMWlS+gBso6lapJGqKVFI6T+BQpTz6ywuSzeKVVG6tCxtrZsdQPgeLu65C9W8LLyCxEAgFlm2+2IiHsAMOWpAKgHXKAe8AQE3j5BxMrp/NO4tJQBtFOKpp2sJAPYsTwuOTnuRQbwfcWNG5eEMLdc0kkABxMu7t+f0nWzK75nlrdMxpe8SAGgxA8fYVJlhf+nFpkVvUSn6RQAOCtd39WVi3gJQKS4f0R9bxAATAaAewUFADDlqQD+W9y1hkVRRmGyy+6ygrYleMVCM4sQoRvQKiFSBlG56CZiYYigEIgFlcJWhIJ0YUuUCLMbT1mhS4ClaRJPEQRElhbhpRD1qSyhInvq6f6e832zMzta/arebm4zOzvnnW9n3j3fOe9H8f/gev6HH57vpPZyMAbK0pESpAfz/YKA5YuWvb9skdnMBGCq6PO2lpbMz6l19pWhUZdg8h1ljvLHSOCiZUxASxyw/eM9F7Cbn1LHNGWugYHyv3pJgIcDhSRAla5B/zQCZNvdnj2y7U73/lAiYFVJ3/33980jJXkqAsDA84e+aaorq5MEYCaLlBjiVwgw73z//eadZgAEIAV3O6YB9qN4CASQ1t/KMkP82BEE4Mu/5+ieoyDA6pnVzd3G6Ni3r0P8aVqwNA94nJDcetfnWyRuB7Z80rqDvv8MPA+36y1M9W13escIEACVNW9eX9+8vyIghr0Fnq/r/IEdFnq/xP1fwbHjprFqZyYCvHDaYzRXGBkHJAoCArby5qtJa4KAGctAwIzqTR9/vP3j7Xu20whQ69gwAs7UgbPIfGyRRUYxs1LMCzy6tnWTGj8R8CkDnUfyDyc5WOiyxCtmQmTOGxcXd20cm7mdTIALI4DwvHBYGOopjceO9czaggDcA0TBA+4BIGCSsp1mr8YIAgKrqqs/BrbvOWr1lMa5egJ0WWQQAIhqXgAEqE9BQu+3OuilvL7W+FZKOAmHvYuBkwl4rV81WCB4CmNtgncag+XfKyr0bWyiq7kK2MDQdb2dPALUtzPWywznWolWoFcD/fv1Ul6pE1DKjVmkiloGPgMvPTh/qpGOWjsGoPeZUlF9+ypv//pVTspyLe5S3n/paR5YynvfweDt+qzzEAn5CWhkdySGR2NKMD4+1oH/c5WAsv9lO9qSqJZ5k5LbNgukKuerrxUmKrSXzyTQ2moSuJEgiiouIKBfAPBTpWO0IzJS9rAsWNAWPLR0ZQw9VyIisH1UQcnXnJVdSYjg/U/Twcdvl5/fewzejv0ZSlZ2SDmhsLs7t5w+I2yIozwjwwGxjFcZkflh+iz1L7VBtW+jzc3pzM8CwoyGUM7hBcjz5YIKqTSBaWrWWbTxcVZ6IHhgYNMAZ6Vv7ADEk4J9jgUBE1TpiConQzls5WJji2IHStN+8vErCEzzpSqlEVtnVG0dylnZEioQmMf7y7jnzXMTEDjBF/aHAG/n/YHD54us8xDE7WjurLVXuPDDlAjIiUzPyTcY8ImRKSBAZH0PHJAFF4+/jfDwd2wl5c5jw8xB9cSAzVeeL0tleZ8gpYik6yRlQp0KMSkrXb3uq2EXvpv8LmWluWNFEIAqBDcBqnSMTiQCEH7R/D2lu1ItkJZdBWm+aWkj0qq2YjtnZbkKawbvf4TQ39/d3d/Pf/TZFVjg+xID22l/jv6aiyYOP4DECBNQX9HgKMx3VRAB0Q5k9nNiiYCUICaA4p84ejTCp/25zQ21zCCgvHxmJUZAoYEJkOcLLzQMDE5fsRcaLDQ+BA5to8IwImCA4qcn7cePX6cSAG8zI0nj8WJ6fJQqHeMdiZH5dPk3IXyjOf/rkC5fhF9QUFp69jkoNOSsLBdIzOD9ScGcf+gio/GiQ+dfjxcYMV2SAN6O/YGJzcaJQuoSARXfFDkiwztiYjPzw8opNZcSaTBGRpYnwhwT+59/WEijfux/heI4URk+8+aamZWzzTKNPUyebxKZwRURwskLbSqatCj+nTsPCQJ8/Dyn35kAY27nV7VaAiZdDAjT03gUfdLl79rVbcxw5M+mvjykMEePSyutikPpKkvXEtkxzwQA2wzANv6jT0RBYJcggLfT/ofroKK2NSOi4ZOHOEBAaE650VEUkwkC+LGNf5SkJRFwzWiaGm08QbW+xxxZe/dWOvdmhs901EzP1BAgpO9UR74U4sBZbSYm4KNtOz8iIAlLSlGVSgoB/vUDQWb+bSAIGMnnTlL0ivgcXP62Tbu6zZE54bDW+toPI6CrNC6utPQcGgEsXRE/CGDlxe1Tt8Ay8NAtz9KffWBmtpXCv/NO1RFip9G80+hfh+MTAfmFFbGO0AUdMZnhsbPLUzLSMQjQ05kY5J8YGUv7L2scfaB/XOMLtH+8MysWU9tAT0tfX7gkwGgdIaWvvlZZEPAhj4DPQIDOoYIJ2GdsQFkiDDLcBJyvFjzE5+Dmtys7qDwW1ZIgAFJza0HaCIRf+v3XisMD1+IKAoRIsaRmp2/nP/pEzPAkgM3TcAecOFwc35Gf73C5CuubY9rDQQCMkVPgCms04kVkfvhs3v/9/nHj+hE/E1CE+LmYt69vtyQAOWSY1UkCZPyybQ7KkupCP9yG+ImAG2vUyXYyiLyCCfBvaPDXEGA8Xy14iM9v67Tj4u++dPduJiCgYF7p2WdXVZ177tenfT9CODzw58Wx9OQMlq/9ppvsvufSn/EVmAECKEGnOkIMP7TN/9A1fHwiIL+jor4+ph7FuUxAeUo+EwBvcBDA+7//Pp8PEyDiZ4AAPl8iQErfE4cPc8GSBNr4hDK/Wrb9ieOp8YGAffvEF078NmDpeI1a4DC1vjYxJ5YQDuArMCuwC4MItjaY7Kq6lmtz5VOApScr2DE3QcvjP4APPZ9fYpyyljdetMkWFnJ2lghIsVgc+UYjnoL+QeGz9ftP5cd/bCxYIJhk1tn6F7XC+qzzeP32K94ABAEXAyCApOONkwGRtT1rSLxaPQzAP4qwdKk34wvOEn/xKnDUmzBGB9477w4gj7frfX01hg8MvMbfYRZLmHAX4/35DfyOydjbo5pZJn1zvSXUUmEBVb4L6D+f/yMKQKYRvPKSBgeTUKp7gdT0c3XSNSlaZqzjo4upse0DAVFcDHytgmt3rwDqLNQXbekwAaLAwky1x3w8ofRVua/P4iImwwcGNQ198OBBLy2mMlQSnQGLF/vOnD5scyCjTPEpVnZhFjRtdkrbHX8U4JVUUVFfUeF4z2wjWHN9NtZ5SNFop8PBZXzF6dmjID0/ePjh4vLyYsXn4davd0mI/uKh8CWm2Wwz5uN2ki8xS1tRsMDHQy2ytnfzTn3tMLLQhocNAcETpOPEwaHeBz0IQLM5Q5ixzX4iIzVjZUZ2yr0ls8gQvEw6RNCdZm8+vmLjbXZjsGfbnTGdunBEgYa31/6KehdKS9dMkVlfH79JfdousCSnK7ANPviRlgBIz4TmDx7+xlUyq6T+vpkzUeM0EwSkKSil2l2y2AQBNTWoxiSLTZa2ggA+HipRAf65DxABOBN3HpMImGS42cClc+w4sXmoNfVlDwI4cDm7Ezt7UmpMQkRIRMLqEkYZHCJYOmeGH99xfDcISDWkTvHwPU7npplhskADBDhcaE5fY7EycimrmqvxCU5yBoIAZ0YqbEKH5W678VgFcsz7R4/u3MsIy7ZZFaQCtZMFAYsWGY3bXmACRgoCjGaWtg8h06Ma3N3+4Dlau/xRAd6CAJmCIQJsqanW0zUE5GjihxvdsOyYkEC/iLensB98SZl0iNiLG+bx3cczZ4832g1TZPxyBKRsYTM04XiBr0CM0+VyrrmYSwKmjB+6o2CS77qFC5WSl2hnW1tloiUE99yQoIuoDW3WrP19eAYMGwY16uuN2IDsXbtkSQwREGrYtuydDiLgHZNa22tmKawYQsRUiIIFs2cWOMgA3Ky+tuy2W63eY4d4jgCKX5qxPZFhD5oVaX9xeiPiBwGKQ0T4pszdxzcdnz0+WG2rpPoD5fMofiYgz4HLDygjYKhrfqDvsGTFwQEEVGbh8o84e5h950RuQ5vVtx8MjEP8RIA4YEJX6S7hQEG+xKGGmnfeWW5sJgLU2l4LZX0VApo3SkcIszZ+aeCw+D5gJq8Qcesv3t6bdyN9oBCwocKloKmpyTW4KmHx4mGLnVOyED9QdmxvZlvbk20gYNPu3cfDmQAZPxOwfosYfTTbRZ4kXhdQ/z6AEUfCYLz3QGDwsGS+/A8IAootCfh2+gUdIqlMI2B0H+KfQfFTZ6c6AjgLS77Eoc3L33lnUUcz+RKrtb0Wer86AmKE9jfrsrj06j5NQcMvYzdu5OsvQStKuGd3z8g0Bc7CzY/RyASobYAQckPCTdK3mJukqP6A70G4Aymf52W1EZRvsTWXtHM20hUSndEZVrQt4vKPFFJ58jdNfXPm9I07wZnJfaZt8maxU6D5PCKgbhkufkcz+RKTtJUE8PvlPeD55/kxcPfa0++RM/EA2d9ByRnuY8cV4RU2NSo1dcpULQHlhoxYEf4ZggAZ/jyE31g1NV+N/9iQ3aZp5Fs8nCDOn9sBRDl0SBSyxl5jgy/RZnWnQfunwdWcgPRG3NEgKviZkNs8XErJyW8coJo4jh+pWZNH29pVw88jX2I00eBGENRMvsQsRQUB/H4qxmasB2BuFp0jg+dmrefCxk4iAjhLTO5x08JgTD9pWpibAHiRWSIRvyDgSRDA8SN8ip8IcMdfXX0MBJBvscZHGN5iiJ8IyL5wTDYISLUB6n28FtpftrkxC0d98JCy+9e5peR57FEk8SkI0ElN8iVGaVxNjdFcCF9isV0QwNvXqklvgAjIkUOAAQImGW82KlVaIOACOKmOBwMqATnKUwA8yBEgKWACshQdn3kcbYDsW6w5v7UYeQSaqU6lEUBunLUCbxOGfr90A5qtjiqAYuqsu0yVkqjj9YBeatLmGmRlC4NCF7m3hwbR/zmPtq8FtPZm0bpaXsg/88sWNcuJ/81QGFCW01DA8k+iCsD+HrtwOhonqIh9pZgCYpghfIXF1RcNegLu1rVeb0+p2pDkmTcmWenO4QI2BXJIXRYVdUWS5h1508aqWXZAX2sszNDUz1uvgvXzKZf40MwX6R0puCXvVeC009T0uSZGL5aimlrgsbq2NdPARqFSAgp4++juYqdmsawwesRrpbPNs1Y4NcpiycbuLqcLv7OzKqfe8d6XG0UWF4Djg77WGFIaULPU6kQJpm0efXTtqZf4GFD8vkx6RwquRdYsEeI9aRSyppw2JYwHATiQphZ4rK5tDVnV6kt8gbQZcVuxHQEmInBgMyAIuIZqd6Ujg00bPhPgb8/KaiqrbGrLbNkNApAvp/dI5OprjSGllx9oKiiQWV8QgMB/+OabH14ngIBTLfGB0IXXGQjQOVLk0WSvcJTg/b1HjRmT3NWVfDWDCcDxNLXAcqkrV0y3UGKUVv4KS06k4a5IvsFGg82W4pTxny4IQPzI+E1sngil5yZABvhCtr2msrKsrL2sJbNpSWwYCHjpvQx1u77WGAQ0lXVtLaiSWV8i4BCmYcYJBtby8ckugn1ozf5iBHD8TIDekSKPJns1S4SMRU3pxStXagkAnZpaYNGuHjElLcIqCVhY2DCnetjWrajuRUbI2L1ypc3s3Mzxn75ZElDnP3L4yJ3NUHoKAcoVDsKZVFa2tcMvP65lScvUOx5JwdpRe1ezozwmS30CRslaY5WArtTcLrmEBxMw7hmgkVYgen2tCDg1JCRVU5w9wPEzAXpHCnah1SwRMgQP3ITkZDseusBz8V6cNVVrgQUBFYGrdwRWSHO0woVz6ue8m3z2OaVLUZxs6541q9uwsuH4McJxk5l+506sI9P+kcNJKofILyjPWI7CXB0IaI/tmUEE7G8JuyPSkIFs0XEpTVuJAG2tsSAgI7iKs54gAN/9ZwjjBAHpQnnWObOF9BZKEvFLAvSOFAoBSOLheIIAFDFnX6olQK4mp86vm8v37i2HYwET0DBnznx8P7efc24ptmMEVNhsIe4sKxFw/sSLzIdkgYM+CxtKBLS0NM3vw11uMBNfgUhaNkuugLYaI0CNX0rpAy1dUWVx4v0g4NFHrxUj4DUQcKcgIDUqCgSYFQIGZPyt75r0jhRUIHF/ibpECBEA45mNl3KPPAgQq8npCDBmwARItKlRre2cBvpl0Ps4B2zrtmVPkPFJApBTbTbX1TWPBAH6goWhWI+wMhMFUC0tRwaXbAYBuP4Z6nS5rtaYf0scaKqqKsX7FQLoHnBtx2uCAGVPbvNKZwKMRhl+77smvSPFipmo9OD4BQFGIDk7N5mPgQssaoU1tcB6H18QUN9O8QNzh3LACcPUggQmgB4AdTv9rxl+1clLbnh3pq3bvHl+S8sgsGTzbBCwyuJu6zHX6muNJ9MSH+/jAPx+IgC3vh8OH0b8TADf1QFaLg1marcyAQNMQG8rCNA7UqygUieO/1U+Ht+YduzINQv4i1phtRYYBEzx8PFFbW77EqXN7N2rva/tDtEvqWH+uyU3QMDqrErG5vDNRMBe7ZoarfpaY7HEh/r+9fT4B15nEAGA6LYGmACcungMAia9IwXXInMWex4fz6wWTwgChhJyGd6EC7QqDTB5ojVNV5BAVN+od3AANJP0c8NUeTo7r3U8jqsuqaGrNZZaW33/ep37WR5B02amb03TO1LQXis2cIGEPF8mxw0vo4TSO6lRngycm8f6c3mL895Tz2D7IGRuUvQR8i6Tvr46qXoGgAINLomYCgz19qw/GeMMv2l8uPNxxQhZ3/ZmtCkwQ1pbLM+6cQvDKODuHLuccBrjlFL6KkDbR6f3Fc5YzwVaAi7X3WshTRmyE9NUbFxsSHwPwJewweXaHw2dW78SSBPS9Ko6T6l6BrLHqATOEXg6zDvbZseyvAEy6zu2MiElISTFnuh0kt1g1lSeKFXPx6Jvw4MpitYW5Rb9+bO5GytfIX3VeISPsFqwIXyJ9b7C/kgZKVnrzrIyFwhwNyPj7rTMlFecQrGvATrLmpYhY5SV5YLUTGNpSgURNVqpCgJycvCDTVr0gQCbPcAOF6ULpZMUChsnTAAdYoa/CATgt4Z6PhabgWtm+bUgQLPuDlas0J0/CEBgmtXx1HiEj7BnBsq80+slt0cwrW35yB14g7L/fU1N5SBgUd225prmZvzT8QIIWJyBq4/w9zaVHXiBCWgX8Z+tFEQs12QYckHADcgv5CN+SUDqJVi2WcQPAi5IwHjxi9pRVNQCFE2FoUIGtxKuIkxPeiUxalSq36jixYziFZ9tOwQoo+DDZyUBLpdRIQAXViN9RTx3bdnyKKUh7lrrE8J1pAUFUqh54bHEEBO6L92xXsaP3ekNdxIBzc11zXUdy5mANcZVxmJx+V9A3osIcLnjv8SeS1ng5WrbSOhS/ZIYdlsCHtDSIv/C8UUJiVEbEzc6isKZgLAVM+1m+xrCQWBNdN4jAci8+zqJEJTu3qp+PTRSuK4C+dHl/BoE0Fp2Bw4I6QsCEM2WlIwMUPDoQyCACyZm4IRYamsJoCzFS3dgvh1QZpxLvkCWt3lnc0dH3aLlNcsQcF7kquJVuPxNB16QBLTL+M+eYIew4CzwIqVSDwREqPETAUNxBTTl9xfMjSzescNZviM8fMCR4ggHAZhtUOJ/GQQsDh6VGuI7cxURsMZNgHL8IL5gD3f+8ENPA7JMd93Jnz8aNSaHxep44oLiB3IK4gcBomAibdy4UsSvJ+AOEKAvOJisLqbGAa/A+HfSt5/iv4wIcHH8IwKy3W12y/3l+TEBFL+6GpzNMwucixHEX38QMLBsERGAG4wHAaHOmc7a6Rw/E6B9vyRgeWddTc+yh4gAWcDR3y+lr/ARvj09/faHeLuQ3jNQyS1Xm5u28WfCbwI/t+oLDkiaNjMKmwUBaxo6cfk5fiKggeIfRj/OcEtpvhxZ4EWaR23hkJynn0b80qP0uTAmQOMHEO1E/JVU4VS0bFlReNjcL38W+Jjwc+/4jW/nTg/FuuF8fuvmHpSOQwC7zrBP8H03d7bcdwNPtbEZm0b6Ch9h3Ai2KFNxbqXGaX0vvXRFAB7L0REBYt21ukV0xfPqcfkXyfiR9Y12pQ3zTbCiBubQRcOx/+XXLJqjdWgAAc/h+iN+JmC2TY2fgBGgVHjtxlK54WGn8AkOsEepr1es4tEB5AEHo0Wef0ts7O0iQM5Sq6vjgQB1KpK2mw3ysy2M0JPa5k7K8roNKd4hmOZ0lnVqV6ML2+Vn99/ZXDdyotj/suWeDg1UEIG7AB4CjNlmXe1wvJPL3ABRkPFPPsG3riIo3xEQIGcZRZhEgPoUoP312y93t/HJ1eZOMifTFRwAJi2ODr7g8frdd9+/6jLs7y5AMHmC5B+yzO4SB5Jz0gwil0ACkHPCEv/kE6zvslOFsgCXVyAHitU5dFJabscO2iy211kmT4zXFUioApyxoiF4UrCKKVfrs7TwRvFwJt7Rdvqxj4cc26Skvrm0gl0hNrAWlu+9SpGm+uONB7T11nkEFvj4B2jV7T958uPT5k4+7zvluumPZxZQzdSefEVncRHlKRXvhLXMI8WPKHeeFfWpU66+2I2bxuuztDeopjkPA2+dIWt9xSIwsWFsniYW1SA5PFYWSLg/T18wofcN5l+D5JPlqidtkGTq3OXx+ZM7MLkB++7QDp7BMZ3sU5zqB6td5TUIeH29RyelT9QkjfEuCPDw+gIBWEYZi2lLPL5dn6X9vkK7uvqun0St78bg2KL89vZYIgB5e9EoCCFABCRkB4waFSgelWVy9ThVCut9gykfkJ7TiQVPmnqK1tyfZJrfE9ilfj4I2LFxdce+jn3+b/ASG3x+2Zj/svtJn+JRtByesj8IwK+kyFSLgoU+fl1pJcDoRrqTNvanpKutuUBxvXVXdwgYUAjQL2xMxcvrqhcutNqruc3tmFzSIraoKbCqpWg2ETBTNEqyEPLB9Ugd5et2f6tkSyMH4AQc0eK5H1NREWHj43OOL316J9DUfpAIWNJXUqDWOk/uwFjZV7gv1PLGp5IAX7vdzzfAHjJB+BRnj4Kxsbrw8hkPbXvo0ewQBe9CKnaljR5dMoj4B68dfcTgqbUt9fVL2g3Z5yhfKzYsMDaT+dghiyQgrQWPgVBrbkvuu9W9+bLWt6ioottNADu9BUIOEwF2q93X94QEapI4feLOOhs5/u6KCmuMQkBDw/T0+9e0d7b3HLw/2tQQtHB/ybw0WTsMAlZvWr3vDf+gjn1MAElfu1+C1c8vdQJtlxdMXXj5jIefKXxw/c8+Er1QSl1bYex73eC4/bcNjpMEpNTUpIiChvr65x21BssxBXRArK6N+M+/iKRv647OzoUNDXMKl7TX7tmDEeBYwKvLhYe3NLWAAG7MdHG36BgmIISywr7utrloJ8evpt0pfuSpkaN2kfSFUnQ1dC5Ys6aop70FvxVMFqyEg4qVNFkLfB4TsG/fGxQ/pu9J+dl9rX7D7NZRtF1XOwwCHq149MEv8UoABPAIaBwcd+2rg9cyAXyNm2XBQkPnlztiUqBZBIbwCGCLjzp/MxPgKK+GCij0r9/elrO9N56qLlnptBw4MBg+m5e8cFH8IECt5j7BGH7iininev1PT9osa4PxiypGSGsQ0NlQ1g4CsEY6pDKPgMZ5aUoW+rw3Vg+sw7y1nL4XBASEWBP8Un1puz5r7XXWaw8+mNJtVbDQZ8LWNEUJv/pqY3+k+v0X94DumApHtLpiob5NjdvcPr7utsJaavOSBIQTAZktLWeFzz6dZmpcFH8ZF0EtjaCeYVmQgIWTk4o1M4+VWVPNuuODgPbOpibcAfct20cEzJ+zv0TMoigEVK/m+CUByDonJEwYAWfJS2i7LmsNAh5c/60GV/gEY4EkjVsc33SgvbDEHdTXqlvxFFgQPUSF3pzse9z+GVWEgp9AgIj/0ieBcNPp90xfsMDF/cJXEgEbIsoA8l0mxA3qzdN4Ieh3VOmNLG9WT1N7T0/PvmUvEwFL+maUqtIZBLy9eqMIXxKAeO2pVmvCKN6ul9pev6z/9lktAd471BwtcF6e6vIEHkBAyu54TfzxenMyOFMzygWGTOXHP0HU+t56j3ITdF0IoJbX8/N88MiWE0sEb/1C0LfiPJwNrsCypvY3yHHC1FMwSiOVQQAeg7J8AzD9g7TGCPiOcYWCabqCB9XxVqAt3mPR1l9MOkD+aZ2Jz9CW+tL205OAQV43mBPQemmql776haClFI6Pjxbo1e1vMs31qDn4J2ntpZeKVgzkB6y+7tetEr2M7b0vM2B6JrerWdbLTxzBB+qzynqCshT4BfAMvX7JjPjElKypUxMdiZI3xV3CIrPEdDlOkyDmXj1yhMsfFOxou/XYx0mQ3sBUQH98fbxeeql4jq1h/vwGm1153bpDwaZO16ae3pdp4QG4aSvb3W1uFzWW9KHAAQUNgFrQYFINHAmmLMMW+sv4ovimN5htFVjj62HCzcDp8UYkiOm2K+6Cs3k1OpRVKlnhvPe43oHTvlSQ8X7UykPyNWFpkpDexe4CjgqrrbvCUIG/u7u7K1z6eEWBREKC6sBgt7UvXDjfliBf66XpyzcXw4UX5dlyu2JudrgR1lq37R+k6WwOXRY0cIpN9SF+NWuLdCDBrDD8xqZYUHpbwfe8dEJkfEa6IyMyIzIofDM1SIAAIRttstY3773pq5TjkTna+4unf6M5/lLZZrfaXcBRERGD6CNKbLaIwLLGTindu7oUKcxS0Wq1qw4MCWBgznxriHgNy1as2vQmgMLNuI4hgoDp0y9Us8Bk7tXYuB/3wMHGfhCgncpae5pYKFlK3XlHs7YYHzM+Zn5sPY3LWeZCEFCyEi1jW7bwyh5vtX6ptAF+DFSblMXYbObuzs5uKwhYtQrF2qNJqpOP8WlEsOpzvEFI7417Kzcvwn0QBEBDlJQsdux9zzXuSFl3EMULFMxQpDCEiJ/Nb1jACOswxYEhwTZ/DjHAr/F+Q4qM/+mON0EA1ieFR+aFQkoyAbj8TXPQlHek8dAHTMBTMn5MZgqhk91gtIv9s7Y8Rlj/li8oP8dvndkaE2M1SpdReIzqsr6FICCCYMzo6Ww6UiEIOHzg8OETh6+l2uM8nqVIxwDiLHJSFknv4tq9mzfvq2letjnMaQx1BZY4sVNZo6sisZDPZ96M0aPj4s5mKQxlZLdhPCOppUhFMICCgCXWEHptaG7GIBDxPx3XEX36zewRugBnL9vi6PL34RnY19j45utrP3n4ecKbEpdCGAHGhiVGaoDfjnsALr/lQf8P+L6UXm+hiSCcvkShrna4cKkwWcFPIXNPj9koCDgwsbFxeP+1JJ3xGvEXrzlYnIEs2ZqkY85KVHdnEQF1ze+AgIxIgyHCFpy7uqy5OAMEsI0vjZcROH8mAPEGQCj5ZZ/rlooh1iW33bbEGoXXMRUx3Rkcf08cLWV98kLJB+jyX4fLX0fT16d5ZpVp/UASxsaL68XqcTwCHnzrg5eZQb/qG1J4+Ct4K10bv4YAY4WrtrY+NHSFGAEnTvQfuZZylnjN8R8EA5QjjHZL6X3LQMDs4sgUw7JAIqAx0uEPAvj8S5EWl1KYpKEd9Xw0Ia9KRTDwwAMLU6PO9jZ0d3P4lOmJewME6KTkVa6SPmigvsbDb74mCFDjJwIGXU3AEQX70Umi+qQGpba/fLNqsksE97KUdsO0IUa47GCuqbbWbAmlgFHwcWI4jk6lt71uvwdRshOfpfyU6Ozra9rMXWaNByqaWppccUGQ0uL8x20dgaSxJIDiDaH4tVIxxLrwgQfmpIZ466WpXkp+4VooLj8qWCQBavyvjtvwjOfrL/yy/ahVW3yDfAKqM/j+z4Crr6VQ5yvMBAQCZloMGgFQVrgEXYX9OBoRoD8fECB/SvUAggBzs6UszlVcaGYCeK0KavbD/kzAqaUixsB1ty1J9e5Vbsp7qvYgw3GStCQp3NdY8vzrDBCgPvUIG3y6BLYKeAepbFrS/f27XlZshm9gRF/h6SsMAuRTgN7DBOArII7feKqCjHihH+QwYAL487qRpmMC9FL4r6Virgmo7WVAYP7Ue0ppif+1/4sTH7izrm5jsA0C+v2nELhEpJrhr1teTilEUCCOcvRortxpxYqkJOXopyrI0LflWdxrTwicJIUf2GCaq5WGSTC4nzZtndvyIgzgo2G7B2SNw1VXjQw9R/N+/epzQZM1OWZgnhszGJfq8MckTbGtbdIfXv82TD0xAzs00jDJiaxncIIsY1s3Nyy/PMgRCTsouR0ODVF+qpPt2P66ukOWBPX9l9cp6CkoaEk7z2io+YaADlfCVaNHqEBKqErGHa4QkD3l92xeZZWqAX+fku31b8M0vy8QpbCKFGYCVq97e906tvYhAiLb2spRmy+2gwBEfoni4njJ2MGYi5ZftDNhgnw/CLhIunuPXJ6WVjMZN9FOrRSeN8LdIgkwAUVFOQtynAvuKSrCC4Ph1z9+tRm6ugw2/MFg8Pq3QVnVsq+q3VlSImAdCEhel2tMTU5uRYNCZnkbehPk9pBsuwLy6LzQ1BlxzfKROy3yfweDAMR/jSwrWT7ZuDLBMCBvgj/9tHU8CKDoq6q8CRczAU6MAAyBBQvwgi/879lRUfRvw39BgCuwqa9MWeh4jkkSkJycm1yLv0BAZmI59WZI6asvUKC8PFWLi6zGyCtAgDR3H3PObQ+keUfFzAqJql5XnZzMbnCt80Yg/LRzq6puSsPEEAgQGOjJFH8wEH4dExx8MS7/f0JA55KyOftlv8WGsj3JYi2L5GRj7eNvm0FAW2Ybxf+LlL46qUq+vX2B15xPFilw9Zl43uV1irm9IMAeMmuW3Sj5hRIUBFS99VZV2lg3AZkopJQMSJ/jm25KMPxHBPS0NO0vk+eHE5wWLK29UpPffhwjQC999W1uuIeU1cD1REwlnT8ZBMjhf+W5D4AAc8isAnM1H5L79ogA79KqHxdV/aQSgPjBQLgkgG8D+Ps/ImAJrv+c990LKU9bLU82udZci2puvfRtL9Sux19/namzERUFO/3FdGBklljiYqRKAHyWv8Is4k8//cQNGCDAG6iqajmGphVJQHgPCBhQRkAqf/v/s3vAEjV+QQDHT0DG7vFWvdTEkFduGDxiBiOoXWLxGqVgQV3i4qZzHzCVggBzzziNFJ43huMvrfqpCk07IICR2TMwHwNAfQoA/9VToM+15HzNQspz8fgHkiUNraeQvu48MGDqp6fgYnfFQrS6xMWFY667rdTbaK45wBBGF5fNGKN1uU0GAYz5bh1wCS484T/TAUdNk7ULKSuFvK0SJ0lfHS677MzyFZrV1NQlLi6Aj9dYb3+T55IXM9CxogAcV/3vSvC/Bj1utPD6n/EnnaQbrf6BCX0AAAAASUVORK5CYII=)}.react-tel-input .ad{background-position:-16px 0}.react-tel-input .ae{background-position:-32px 0}.react-tel-input .af{background-position:-48px 0}.react-tel-input .ag{background-position:-64px 0}.react-tel-input .ai{background-position:-80px 0}.react-tel-input .al{background-position:-96px 0}.react-tel-input .am{background-position:-112px 0}.react-tel-input .ao{background-position:-128px 0}.react-tel-input .ar{background-position:-144px 0}.react-tel-input .as{background-position:-160px 0}.react-tel-input .at{background-position:-176px 0}.react-tel-input .au{background-position:-192px 0}.react-tel-input .aw{background-position:-208px 0}.react-tel-input .az{background-position:-224px 0}.react-tel-input .ba{background-position:-240px 0}.react-tel-input .bb{background-position:0 -11px}.react-tel-input .bd{background-position:-16px -11px}.react-tel-input .be{background-position:-32px -11px}.react-tel-input .bf{background-position:-48px -11px}.react-tel-input .bg{background-position:-64px -11px}.react-tel-input .bh{background-position:-80px -11px}.react-tel-input .bi{background-position:-96px -11px}.react-tel-input .bj{background-position:-112px -11px}.react-tel-input .bm{background-position:-128px -11px}.react-tel-input .bn{background-position:-144px -11px}.react-tel-input .bo{background-position:-160px -11px}.react-tel-input .br{background-position:-176px -11px}.react-tel-input .bs{background-position:-192px -11px}.react-tel-input .bt{background-position:-208px -11px}.react-tel-input .bw{background-position:-224px -11px}.react-tel-input .by{background-position:-240px -11px}.react-tel-input .bz{background-position:0 -22px}.react-tel-input .ca{background-position:-16px -22px}.react-tel-input .cd{background-position:-32px -22px}.react-tel-input .cf{background-position:-48px -22px}.react-tel-input .cg{background-position:-64px -22px}.react-tel-input .ch{background-position:-80px -22px}.react-tel-input .ci{background-position:-96px -22px}.react-tel-input .ck{background-position:-112px -22px}.react-tel-input .cl{background-position:-128px -22px}.react-tel-input .cm{background-position:-144px -22px}.react-tel-input .cn{background-position:-160px -22px}.react-tel-input .co{background-position:-176px -22px}.react-tel-input .cr{background-position:-192px -22px}.react-tel-input .cu{background-position:-208px -22px}.react-tel-input .cv{background-position:-224px -22px}.react-tel-input .cw{background-position:-240px -22px}.react-tel-input .cy{background-position:0 -33px}.react-tel-input .cz{background-position:-16px -33px}.react-tel-input .de{background-position:-32px -33px}.react-tel-input .dj{background-position:-48px -33px}.react-tel-input .dk{background-position:-64px -33px}.react-tel-input .dm{background-position:-80px -33px}.react-tel-input .do{background-position:-96px -33px}.react-tel-input .dz{background-position:-112px -33px}.react-tel-input .ec{background-position:-128px -33px}.react-tel-input .ee{background-position:-144px -33px}.react-tel-input .eg{background-position:-160px -33px}.react-tel-input .er{background-position:-176px -33px}.react-tel-input .es{background-position:-192px -33px}.react-tel-input .et{background-position:-208px -33px}.react-tel-input .fi{background-position:-224px -33px}.react-tel-input .fj{background-position:-240px -33px}.react-tel-input .fk{background-position:0 -44px}.react-tel-input .fm{background-position:-16px -44px}.react-tel-input .fo{background-position:-32px -44px}.react-tel-input .fr,.react-tel-input .bl,.react-tel-input .mf{background-position:-48px -44px}.react-tel-input .ga{background-position:-64px -44px}.react-tel-input .gb{background-position:-80px -44px}.react-tel-input .gd{background-position:-96px -44px}.react-tel-input .ge{background-position:-112px -44px}.react-tel-input .gf{background-position:-128px -44px}.react-tel-input .gh{background-position:-144px -44px}.react-tel-input .gi{background-position:-160px -44px}.react-tel-input .gl{background-position:-176px -44px}.react-tel-input .gm{background-position:-192px -44px}.react-tel-input .gn{background-position:-208px -44px}.react-tel-input .gp{background-position:-224px -44px}.react-tel-input .gq{background-position:-240px -44px}.react-tel-input .gr{background-position:0 -55px}.react-tel-input .gt{background-position:-16px -55px}.react-tel-input .gu{background-position:-32px -55px}.react-tel-input .gw{background-position:-48px -55px}.react-tel-input .gy{background-position:-64px -55px}.react-tel-input .hk{background-position:-80px -55px}.react-tel-input .hn{background-position:-96px -55px}.react-tel-input .hr{background-position:-112px -55px}.react-tel-input .ht{background-position:-128px -55px}.react-tel-input .hu{background-position:-144px -55px}.react-tel-input .id{background-position:-160px -55px}.react-tel-input .ie{background-position:-176px -55px}.react-tel-input .il{background-position:-192px -55px}.react-tel-input .in{background-position:-208px -55px}.react-tel-input .io{background-position:-224px -55px}.react-tel-input .iq{background-position:-240px -55px}.react-tel-input .ir{background-position:0 -66px}.react-tel-input .is{background-position:-16px -66px}.react-tel-input .it{background-position:-32px -66px}.react-tel-input .je{background-position:-144px -154px}.react-tel-input .jm{background-position:-48px -66px}.react-tel-input .jo{background-position:-64px -66px}.react-tel-input .jp{background-position:-80px -66px}.react-tel-input .ke{background-position:-96px -66px}.react-tel-input .kg{background-position:-112px -66px}.react-tel-input .kh{background-position:-128px -66px}.react-tel-input .ki{background-position:-144px -66px}.react-tel-input .xk{background-position:-128px -154px}.react-tel-input .km{background-position:-160px -66px}.react-tel-input .kn{background-position:-176px -66px}.react-tel-input .kp{background-position:-192px -66px}.react-tel-input .kr{background-position:-208px -66px}.react-tel-input .kw{background-position:-224px -66px}.react-tel-input .ky{background-position:-240px -66px}.react-tel-input .kz{background-position:0 -77px}.react-tel-input .la{background-position:-16px -77px}.react-tel-input .lb{background-position:-32px -77px}.react-tel-input .lc{background-position:-48px -77px}.react-tel-input .li{background-position:-64px -77px}.react-tel-input .lk{background-position:-80px -77px}.react-tel-input .lr{background-position:-96px -77px}.react-tel-input .ls{background-position:-112px -77px}.react-tel-input .lt{background-position:-128px -77px}.react-tel-input .lu{background-position:-144px -77px}.react-tel-input .lv{background-position:-160px -77px}.react-tel-input .ly{background-position:-176px -77px}.react-tel-input .ma{background-position:-192px -77px}.react-tel-input .mc{background-position:-208px -77px}.react-tel-input .md{background-position:-224px -77px}.react-tel-input .me{background-position:-112px -154px;height:12px}.react-tel-input .mg{background-position:0 -88px}.react-tel-input .mh{background-position:-16px -88px}.react-tel-input .mk{background-position:-32px -88px}.react-tel-input .ml{background-position:-48px -88px}.react-tel-input .mm{background-position:-64px -88px}.react-tel-input .mn{background-position:-80px -88px}.react-tel-input .mo{background-position:-96px -88px}.react-tel-input .mp{background-position:-112px -88px}.react-tel-input .mq{background-position:-128px -88px}.react-tel-input .mr{background-position:-144px -88px}.react-tel-input .ms{background-position:-160px -88px}.react-tel-input .mt{background-position:-176px -88px}.react-tel-input .mu{background-position:-192px -88px}.react-tel-input .mv{background-position:-208px -88px}.react-tel-input .mw{background-position:-224px -88px}.react-tel-input .mx{background-position:-240px -88px}.react-tel-input .my{background-position:0 -99px}.react-tel-input .mz{background-position:-16px -99px}.react-tel-input .na{background-position:-32px -99px}.react-tel-input .nc{background-position:-48px -99px}.react-tel-input .ne{background-position:-64px -99px}.react-tel-input .nf{background-position:-80px -99px}.react-tel-input .ng{background-position:-96px -99px}.react-tel-input .ni{background-position:-112px -99px}.react-tel-input .nl,.react-tel-input .bq{background-position:-128px -99px}.react-tel-input .no{background-position:-144px -99px}.react-tel-input .np{background-position:-160px -99px}.react-tel-input .nr{background-position:-176px -99px}.react-tel-input .nu{background-position:-192px -99px}.react-tel-input .nz{background-position:-208px -99px}.react-tel-input .om{background-position:-224px -99px}.react-tel-input .pa{background-position:-240px -99px}.react-tel-input .pe{background-position:0 -110px}.react-tel-input .pf{background-position:-16px -110px}.react-tel-input .pg{background-position:-32px -110px}.react-tel-input .ph{background-position:-48px -110px}.react-tel-input .pk{background-position:-64px -110px}.react-tel-input .pl{background-position:-80px -110px}.react-tel-input .pm{background-position:-96px -110px}.react-tel-input .pr{background-position:-112px -110px}.react-tel-input .ps{background-position:-128px -110px}.react-tel-input .pt{background-position:-144px -110px}.react-tel-input .pw{background-position:-160px -110px}.react-tel-input .py{background-position:-176px -110px}.react-tel-input .qa{background-position:-192px -110px}.react-tel-input .re{background-position:-208px -110px}.react-tel-input .ro{background-position:-224px -110px}.react-tel-input .rs{background-position:-240px -110px}.react-tel-input .ru{background-position:0 -121px}.react-tel-input .rw{background-position:-16px -121px}.react-tel-input .sa{background-position:-32px -121px}.react-tel-input .sb{background-position:-48px -121px}.react-tel-input .sc{background-position:-64px -121px}.react-tel-input .sd{background-position:-80px -121px}.react-tel-input .se{background-position:-96px -121px}.react-tel-input .sg{background-position:-112px -121px}.react-tel-input .sh{background-position:-128px -121px}.react-tel-input .si{background-position:-144px -121px}.react-tel-input .sk{background-position:-160px -121px}.react-tel-input .sl{background-position:-176px -121px}.react-tel-input .sm{background-position:-192px -121px}.react-tel-input .sn{background-position:-208px -121px}.react-tel-input .so{background-position:-224px -121px}.react-tel-input .sr{background-position:-240px -121px}.react-tel-input .ss{background-position:0 -132px}.react-tel-input .st{background-position:-16px -132px}.react-tel-input .sv{background-position:-32px -132px}.react-tel-input .sx{background-position:-48px -132px}.react-tel-input .sy{background-position:-64px -132px}.react-tel-input .sz{background-position:-80px -132px}.react-tel-input .tc{background-position:-96px -132px}.react-tel-input .td{background-position:-112px -132px}.react-tel-input .tg{background-position:-128px -132px}.react-tel-input .th{background-position:-144px -132px}.react-tel-input .tj{background-position:-160px -132px}.react-tel-input .tk{background-position:-176px -132px}.react-tel-input .tl{background-position:-192px -132px}.react-tel-input .tm{background-position:-208px -132px}.react-tel-input .tn{background-position:-224px -132px}.react-tel-input .to{background-position:-240px -132px}.react-tel-input .tr{background-position:0 -143px}.react-tel-input .tt{background-position:-16px -143px}.react-tel-input .tv{background-position:-32px -143px}.react-tel-input .tw{background-position:-48px -143px}.react-tel-input .tz{background-position:-64px -143px}.react-tel-input .ua{background-position:-80px -143px}.react-tel-input .ug{background-position:-96px -143px}.react-tel-input .us{background-position:-112px -143px}.react-tel-input .uy{background-position:-128px -143px}.react-tel-input .uz{background-position:-144px -143px}.react-tel-input .va{background-position:-160px -143px}.react-tel-input .vc{background-position:-176px -143px}.react-tel-input .ve{background-position:-192px -143px}.react-tel-input .vg{background-position:-208px -143px}.react-tel-input .vi{background-position:-224px -143px}.react-tel-input .vn{background-position:-240px -143px}.react-tel-input .vu{background-position:0 -154px}.react-tel-input .wf{background-position:-16px -154px}.react-tel-input .ws{background-position:-32px -154px}.react-tel-input .ye{background-position:-48px -154px}.react-tel-input .za{background-position:-64px -154px}.react-tel-input .zm{background-position:-80px -154px}.react-tel-input .zw{background-position:-96px -154px}.react-tel-input *{box-sizing:border-box;-moz-box-sizing:border-box}.react-tel-input .hide{display:none}.react-tel-input .v-hide{visibility:hidden}.react-tel-input .form-control{position:relative;font-size:14px;letter-spacing:.01rem;margin-top:0 !important;margin-bottom:0 !important;padding-left:48px;margin-left:0;background:#FFFFFF;border:1px solid #CACACA;border-radius:5px;line-height:25px;height:35px;width:300px;outline:none}.react-tel-input .form-control.invalid-number{border:1px solid #d79f9f;background-color:#FAF0F0;border-left-color:#cacaca}.react-tel-input .form-control.invalid-number:focus{border:1px solid #d79f9f;border-left-color:#cacaca;background-color:#FAF0F0}.react-tel-input .flag-dropdown{position:absolute;top:0;bottom:0;padding:0;background-color:#f5f5f5;border:1px solid #cacaca;border-radius:3px 0 0 3px}.react-tel-input .flag-dropdown:hover,.react-tel-input .flag-dropdown:focus{cursor:pointer}.react-tel-input .flag-dropdown.invalid-number{border-color:#d79f9f}.react-tel-input .flag-dropdown.open{z-index:2;background:#fff;border-radius:3px 0 0 0}.react-tel-input .flag-dropdown.open .selected-flag{background:#fff;border-radius:3px 0 0 0}.react-tel-input input[disabled]+.flag-dropdown:hover{cursor:default}.react-tel-input input[disabled]+.flag-dropdown:hover .selected-flag{background-color:transparent}.react-tel-input .selected-flag{outline:none;position:relative;width:38px;height:100%;padding:0 0 0 8px;border-radius:3px 0 0 3px}.react-tel-input .selected-flag:hover,.react-tel-input .selected-flag:focus{background-color:#fff}.react-tel-input .selected-flag .flag{position:absolute;top:50%;margin-top:-5px}.react-tel-input .selected-flag .arrow{position:relative;top:50%;margin-top:-2px;left:20px;width:0;height:0;border-left:3px solid transparent;border-right:3px solid transparent;border-top:4px solid #555}.react-tel-input .selected-flag .arrow.up{border-top:none;border-bottom:4px solid #555}.react-tel-input .country-list{outline:none;z-index:1;list-style:none;position:absolute;padding:0;margin:10px 0 10px -1px;box-shadow:1px 2px 10px rgba(0,0,0,0.35);background-color:white;width:300px;max-height:200px;overflow-y:scroll;border-radius:0 0 3px 3px}.react-tel-input .country-list .flag{display:inline-block}.react-tel-input .country-list .divider{padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid #ccc}.react-tel-input .country-list .country{padding:7px 9px}.react-tel-input .country-list .country .dial-code{color:#6b6b6b}.react-tel-input .country-list .country:hover{background-color:#f1f1f1}.react-tel-input .country-list .country.highlight{background-color:#f1f1f1}.react-tel-input .country-list .flag{margin-right:7px;margin-top:2px}.react-tel-input .country-list .country-name{margin-right:6px}.react-tel-input .country-list .search{position:sticky;top:0;background-color:#fff;padding:10px 0 6px 10px}.react-tel-input .country-list .search-emoji{font-size:15px}.react-tel-input .country-list .search-box{border:1px solid #cacaca;border-radius:3px;font-size:15px;line-height:15px;margin-left:6px;padding:3px 8px 5px;outline:none}.react-tel-input .country-list .no-entries-message{padding:7px 10px 11px;opacity:.7}.react-tel-input .invalid-number-message{position:absolute;z-index:1;font-size:13px;left:46px;top:-8px;background:#fff;padding:0 2px;color:#de0000}.react-tel-input .special-label{display:none;position:absolute;z-index:1;font-size:13px;left:46px;top:-8px;background:#fff;padding:0 2px;white-space:nowrap}
\ No newline at end of file
diff --git a/packages/platform/atoms/tailwind.config.cjs b/packages/platform/atoms/tailwind.config.cjs
deleted file mode 100644
index 0bc2873067..0000000000
--- a/packages/platform/atoms/tailwind.config.cjs
+++ /dev/null
@@ -1,79 +0,0 @@
-const base = require("@calcom/config/tailwind-preset");
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  ...base,
-  content: [...base.content, "../../../packages/ui/!(node_modules)/**/*.{js,ts,jsx,tsx,mdx}", "./**/*.tsx"],
-  plugins: [...base.plugins, require("tailwindcss-animate")],
-  theme: {
-    ...base.theme,
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-      ...base.theme.container,
-    },
-    extend: {
-      ...base.theme.extend,
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-        ...base.theme.extend.colors,
-      },
-      borderRadius: {
-        lg: `var(--radius)`,
-        md: `calc(var(--radius) - 2px)`,
-        sm: "calc(var(--radius) - 4px)",
-        ...base.theme.extend.borderRadius,
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
-        },
-        ...base.theme.keyframes,
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-        ...base.theme.animation,
-      },
-    },
-  },
-};
diff --git a/packages/platform/atoms/vite.config.ts b/packages/platform/atoms/vite.config.ts
index 95fe638b2c..8adf957907 100644
--- a/packages/platform/atoms/vite.config.ts
+++ b/packages/platform/atoms/vite.config.ts
@@ -58,7 +58,7 @@ export default defineConfig(({ mode }) => {
         entry: [resolve(__dirname, "index.ts")],
         name: "CalAtoms",
         fileName: "cal-atoms",
-        formats: ["es"],
+        
       },
       rollupOptions: {
         external: [
@@ -71,9 +71,8 @@ export default defineConfig(({ mode }) => {
           "react-dom/client",
           "@prisma/client",
           "react/jsx-dev-runtime",
-        ],
+        , "react-awesome-query-builder", "react-awesome-query-builder", "react-awesome-query-builder"],
         output: {
-          format: "esm",
           globals: {
             react: "React",
             "react-dom": "ReactDOM",
diff --git a/packages/platform/examples/base/package.json b/packages/platform/examples/base/package.json
index 79f04f48e9..74ff177078 100644
--- a/packages/platform/examples/base/package.json
+++ b/packages/platform/examples/base/package.json
@@ -23,13 +23,13 @@
   "devDependencies": {
     "@calcom/eslint-config": "workspace:*",
     "@playwright/test": "^1.45.3",
+    "@tailwindcss/postcss": "^4.0.0",
     "@types/node": "^20.3.1",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "autoprefixer": "^10.0.1",
     "dotenv": "^17.2.1",
     "postcss": "^8",
-    "tailwindcss": "^3.3.0",
+    "tailwindcss": "^4.0.0",
     "typescript": "^5.9.0-beta"
   }
 }
diff --git a/packages/platform/examples/base/postcss.config.js b/packages/platform/examples/base/postcss.config.js
index 12a703d900..483f378543 100644
--- a/packages/platform/examples/base/postcss.config.js
+++ b/packages/platform/examples/base/postcss.config.js
@@ -1,6 +1,5 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    "@tailwindcss/postcss": {},
   },
 };
diff --git a/packages/platform/examples/base/src/components/Navbar/index.tsx b/packages/platform/examples/base/src/components/Navbar/index.tsx
index 035de96cfb..ae31fe13e2 100644
--- a/packages/platform/examples/base/src/components/Navbar/index.tsx
+++ b/packages/platform/examples/base/src/components/Navbar/index.tsx
@@ -6,10 +6,10 @@ const poppins = Poppins({ subsets: ["latin"], weight: ["400", "800"] });
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function Navbar({ username }: { username?: string }) {
   return (
-    <nav className="flex h-[75px] w-[100%] items-center justify-between bg-black px-14 py-3 text-white">
-      <div className={`flex h-[100%] items-center text-lg ${poppins.className}`}>
+    <nav className="flex h-[75px] w-full items-center justify-between bg-black px-14 py-3 text-white">
+      <div className={`flex h-full items-center text-lg ${poppins.className}`}>
         <Link href="/">
-          <h1 className="bg-gradient-to-r from-[#8A2387] via-[#E94057] to-[#F27121] bg-clip-text text-2xl font-bold text-transparent">
+          <h1 className="bg-linear-to-r from-[#8A2387] via-[#E94057] to-[#F27121] bg-clip-text text-2xl font-bold text-transparent">
             CalSync
           </h1>
         </Link>
diff --git a/packages/platform/examples/base/src/pages/_app.tsx b/packages/platform/examples/base/src/pages/_app.tsx
index 2c78641a85..a052a510e3 100644
--- a/packages/platform/examples/base/src/pages/_app.tsx
+++ b/packages/platform/examples/base/src/pages/_app.tsx
@@ -109,16 +109,16 @@ export default function App({ Component, pageProps }: AppProps) {
         <div>
           <BookerEmbed
             customClassNames={{
-              bookerContainer: "!bg-[#F5F2FE] [&_button:!rounded-full] border-subtle border",
+              bookerContainer: "bg-[#F5F2FE]! [&_button:!rounded-full] border-subtle border",
               datePickerCustomClassNames: {
-                datePickerDatesActive: "!bg-[#D7CEF5]",
+                datePickerDatesActive: "bg-[#D7CEF5]!",
               },
               eventMetaCustomClassNames: {
                 eventMetaTitle: "text-[#7151DC]",
               },
               availableTimeSlotsCustomClassNames: {
-                availableTimeSlotsHeaderContainer: "!bg-[#F5F2FE]",
-                availableTimes: "!bg-[#D7CEF5]",
+                availableTimeSlotsHeaderContainer: "bg-[#F5F2FE]!",
+                availableTimes: "bg-[#D7CEF5]!",
               },
             }}
             username={username}
diff --git a/packages/platform/examples/base/src/pages/availability/[scheduleId].tsx b/packages/platform/examples/base/src/pages/availability/[scheduleId].tsx
index 090b8b5742..f909e8b037 100644
--- a/packages/platform/examples/base/src/pages/availability/[scheduleId].tsx
+++ b/packages/platform/examples/base/src/pages/availability/[scheduleId].tsx
@@ -1,6 +1,5 @@
 import { Navbar } from "@/components/Navbar";
 import { Inter } from "next/font/google";
-// eslint-disable-next-line @calcom/eslint/deprecated-imports-next-router
 import { useRouter } from "next/router";
 import { useRef, useCallback } from "react";
 
@@ -56,7 +55,7 @@ export default function Availability(props: { calUsername: string; calEmail: str
           id={router.query.scheduleId as string}
           ref={availabilityRef}
           enableOverrides={true}
-          customClassNames={{
+          /* customClassNames={{
             subtitlesClassName: "text-red-500",
             ctaClassName: "border p-4 rounded-md",
             editableHeadingClassName: "underline font-semibold",
@@ -65,15 +64,15 @@ export default function Availability(props: { calUsername: string; calEmail: str
               schedule: "bg-blue-50 border-2 border-blue-200 rounded-lg p-4",
               scheduleDay: "bg-green-50 border border-green-300 rounded-md mb-2",
               dayRanges: "bg-yellow-50 p-3 rounded border-l-4 border-yellow-400",
-              timeRangeField: "!text-2xl bg-red-50 border-2 border-red-300 rounded-xl px-4 py-2",
+              timeRangeField: "text-2xl! bg-red-50 border-2 border-red-300 rounded-xl px-4 py-2",
               labelAndSwitchContainer: "bg-purple-50 border border-purple-200 rounded p-2",
               scheduleContainer: "bg-gray-100 border-4 border-gray-400 rounded-2xl shadow-lg",
               timePicker: {
-                container: "!bg-blue-900",
-                valueContainer: "!bg-pink-500",
-                value: "!bg-yellow-500",
-                input: "!bg-green-500",
-                dropdown: "!bg-cyan-500",
+                container: "bg-blue-900!",
+                valueContainer: "bg-pink-500!",
+                value: "bg-yellow-500!",
+                input: "bg-green-500!",
+                dropdown: "bg-cyan-500!",
               },
             },
             dateOverrideClassNames: {
@@ -82,7 +81,7 @@ export default function Availability(props: { calUsername: string; calEmail: str
               description: "text-white",
               button: "text-black",
             },
-          }}
+          }} */
           onFormStateChange={handleFormStateChange}
           onUpdateSuccess={() => {
             console.log("Updated successfully");
diff --git a/packages/platform/examples/base/src/pages/booking.tsx b/packages/platform/examples/base/src/pages/booking.tsx
index 01a52fce5e..2ff9e02a4f 100644
--- a/packages/platform/examples/base/src/pages/booking.tsx
+++ b/packages/platform/examples/base/src/pages/booking.tsx
@@ -113,20 +113,20 @@ export default function Bookings(props: { calUsername: string; calEmail: string
               duration={eventTypeDuration}
               confirmButtonDisabled={false}
               customClassNames={{
-                bookerContainer: "!bg-[#F5F2FE] [&_button:!rounded-full] border-subtle border",
+                bookerContainer: "bg-[#F5F2FE]! [&_button:!rounded-full] border-subtle border",
                 datePickerCustomClassNames: {
-                  datePickerDatesActive: "!bg-[#D7CEF5]",
+                  datePickerDatesActive: "bg-[#D7CEF5]!",
                 },
                 eventMetaCustomClassNames: {
                   eventMetaTitle: "text-[#7151DC]",
                 },
                 availableTimeSlotsCustomClassNames: {
-                  availableTimeSlotsHeaderContainer: "!bg-[#F5F2FE]",
-                  availableTimes: "!bg-[#D7CEF5]",
+                  availableTimeSlotsHeaderContainer: "bg-[#F5F2FE]!",
+                  availableTimes: "bg-[#D7CEF5]!",
                 },
                 confirmStep: {
-                  confirmButton: "!bg-purple-700",
-                  backButton: "text-purple-700 hover:!bg-purple-700 hover:!text-white",
+                  confirmButton: "bg-purple-700!",
+                  backButton: "text-purple-700 hover:bg-purple-700! hover:text-white!",
                 },
               }}
               {...(isTeamEvent
diff --git a/packages/platform/examples/base/src/pages/event-types.tsx b/packages/platform/examples/base/src/pages/event-types.tsx
index 83980d4ea3..32071fa6f3 100644
--- a/packages/platform/examples/base/src/pages/event-types.tsx
+++ b/packages/platform/examples/base/src/pages/event-types.tsx
@@ -122,7 +122,7 @@ export default function Bookings(props: { calUsername: string; calEmail: string
           <div data-testid="event-type-settings-atom">
             <EventTypeSettings
               customClassNames={{
-                atomsWrapper: "!w-[50vw] !m-auto",
+                atomsWrapper: "w-[50vw]! m-auto!",
 
                 eventAdvancedTab: {
                   destinationCalendar: {
@@ -578,8 +578,8 @@ export default function Bookings(props: { calUsername: string; calEmail: string
                     container: "border border-purple-200 bg-purple-100 rounded-lg",
                     label: "text-purple-700",
                     description: "text-purple-500",
-                    children: "space-y-4",
-                    intervalLimitContainer: "space-y-2",
+                    children: "stack-y-4",
+                    intervalLimitContainer: "stack-y-2",
                     intervalLimitItem: {
                       addLimitButton: "text-purple-500 hover:bg-purple-200 rounded-md",
                       limitText: "border border-purple-300 rounded-md text-purple-900 bg-white",
@@ -600,13 +600,13 @@ export default function Bookings(props: { calUsername: string; calEmail: string
                     container: "border border-purple-200 bg-purple-100 rounded-lg",
                     label: "text-purple-700",
                     description: "text-purple-500",
-                    children: "space-y-4",
+                    children: "stack-y-4",
                   },
                   totalDurationLimit: {
                     container: "border border-purple-200 bg-purple-100 rounded-lg",
                     label: "text-purple-700",
                     description: "text-purple-500",
-                    children: "space-y-4",
+                    children: "stack-y-4",
                     intervalLimitItem: {
                       addLimitButton: "text-purple-500 hover:bg-purple-200 rounded-md",
                       limitText: "border border-purple-300 rounded-md text-purple-900 bg-white",
@@ -627,7 +627,7 @@ export default function Bookings(props: { calUsername: string; calEmail: string
                     container: "border border-purple-200 bg-purple-100 rounded-lg",
                     label: "text-purple-700",
                     description: "text-purple-500",
-                    children: "space-y-4",
+                    children: "stack-y-4",
                     rollingLimit: {
                       container: "flex items-center space-x-2",
                       textField: "border border-purple-300 rounded-md text-purple-900 bg-white",
@@ -652,7 +652,7 @@ export default function Bookings(props: { calUsername: string; calEmail: string
                     container: "border border-purple-200 bg-purple-100 rounded-lg",
                     label: "text-purple-700",
                     description: "text-purple-500",
-                    children: "space-y-4",
+                    children: "stack-y-4",
                     offsetInput: {
                       container: "flex items-center space-x-2",
                       label: "text-purple-700",
@@ -691,7 +691,7 @@ export default function Bookings(props: { calUsername: string; calEmail: string
                       addOn: "text-purple-500",
                     },
                     multipleDuration: {
-                      container: "space-y-2",
+                      container: "stack-y-2",
                       availableDurationsSelect: {
                         container: "mb-4",
                         label: "text-purple-700",
diff --git a/packages/platform/examples/base/src/pages/index.tsx b/packages/platform/examples/base/src/pages/index.tsx
index a240d2e0d0..773ecd572e 100644
--- a/packages/platform/examples/base/src/pages/index.tsx
+++ b/packages/platform/examples/base/src/pages/index.tsx
@@ -15,9 +15,9 @@ export default function Home(props: { calUsername: string; calEmail: string }) {
     <main className={`flex min-h-screen flex-col ${inter.className} items-center justify-center`}>
       <Navbar username={props.calUsername} />
       <div
-        className={` h-[100vh] w-full items-center justify-center gap-y-3  font-mono lg:flex ${inter.className} gap-16 `}>
+        className={` h-screen w-full items-center justify-center gap-y-3  font-mono lg:flex ${inter.className} gap-16 `}>
         <div className="ml-32">
-          <h1 className={`${poppins.className} w-[100%] pb-3 text-7xl font-bold`}>
+          <h1 className={`${poppins.className} w-full pb-3 text-7xl font-bold`}>
             The all in one Scheduling marketplace
           </h1>
           <p className={`w-[70%] font-normal ${inter.className} pb-3 text-2xl`}>
@@ -26,22 +26,22 @@ export default function Home(props: { calUsername: string; calEmail: string }) {
           <div data-testid="connect-atoms" className="flex flex-row gap-4">
             <Connect.GoogleCalendar
               redir="http://localhost:4321/calendars"
-              className="h-[40px] bg-gradient-to-r from-[#8A2387] via-[#E94057] to-[#F27121] text-center text-base font-semibold text-transparent text-white hover:bg-orange-700"
+              className="h-[40px] bg-linear-to-r from-[#8A2387] via-[#E94057] to-[#F27121] text-center text-base font-semibold text-transparent text-white hover:bg-orange-700"
             />
             <Connect.OutlookCalendar
               isMultiCalendar={true}
               redir="http://localhost:4321/calendars"
-              className="h-[40px] bg-gradient-to-r from-[#8A2387] via-[#E94057] to-[#F27121] text-center text-base font-semibold text-transparent text-white hover:bg-orange-700"
+              className="h-[40px] bg-linear-to-r from-[#8A2387] via-[#E94057] to-[#F27121] text-center text-base font-semibold text-transparent text-white hover:bg-orange-700"
             />
             <Connect.AppleCalendar
               onSuccess={() => {
                 router.push(`/calendars`);
               }}
               isMultiCalendar={true}
-              className="h-[40px] bg-gradient-to-r from-[#8A2387] via-[#E94057] to-[#F27121] text-center text-base font-semibold text-transparent text-white hover:bg-orange-700"
+              className="h-[40px] bg-linear-to-r from-[#8A2387] via-[#E94057] to-[#F27121] text-center text-base font-semibold text-transparent text-white hover:bg-orange-700"
             />
             <StripeConnect
-              className="h-[40px] bg-gradient-to-r from-[#E94057] via-[#E94057] to-[#E94057] text-center text-base font-semibold text-transparent text-white hover:bg-orange-700"
+              className="h-[40px] bg-linear-to-r from-[#E94057] via-[#E94057] to-[#E94057] text-center text-base font-semibold text-transparent text-white hover:bg-orange-700"
               errorRedir="http://localhost:4321/availability"
               onCheckSuccess={() => {
                 console.log("stripe account connected successfully".toLocaleUpperCase());
diff --git a/packages/platform/examples/base/src/styles/globals.css b/packages/platform/examples/base/src/styles/globals.css
index 71f619b0a4..17c763e1bb 100644
--- a/packages/platform/examples/base/src/styles/globals.css
+++ b/packages/platform/examples/base/src/styles/globals.css
@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 :root {
   --foreground-rgb: 0, 0, 0;
diff --git a/packages/platform/examples/base/tailwind.config.ts b/packages/platform/examples/base/tailwind.config.ts
deleted file mode 100644
index adf06a6fd9..0000000000
--- a/packages/platform/examples/base/tailwind.config.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import type { Config } from "tailwindcss";
-
-const config: Config = {
-  content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
-      },
-    },
-  },
-  plugins: [],
-};
-export default config;
diff --git a/packages/ui/components/address/fields.tsx b/packages/ui/components/address/fields.tsx
index 9082c839b1..4df0c84b09 100644
--- a/packages/ui/components/address/fields.tsx
+++ b/packages/ui/components/address/fields.tsx
@@ -36,7 +36,7 @@ export function Label(props: JSX.IntrinsicElements["label"]) {
 
 export function InputLeading(props: JSX.IntrinsicElements["div"]) {
   return (
-    <span className="bg-muted border-default text-subtle inline-flex flex-shrink-0 items-center rounded-l-sm border border-r-0 px-3 sm:text-sm">
+    <span className="bg-cal-muted border-default text-subtle inline-flex shrink-0 items-center rounded-l-sm border border-r-0 px-3 sm:text-sm">
       {props.children}
     </span>
   );
@@ -257,7 +257,7 @@ export function InputGroupBox(props: JSX.IntrinsicElements["div"]) {
   return (
     <div
       {...props}
-      className={classNames("bg-default border-default space-y-2 rounded-sm border p-2", props.className)}>
+      className={classNames("bg-default border-default stack-y-2 rounded-sm border p-2", props.className)}>
       {props.children}
     </div>
   );
diff --git a/packages/ui/components/alert/Alert.tsx b/packages/ui/components/alert/Alert.tsx
index 75881509eb..0e00a6424b 100644
--- a/packages/ui/components/alert/Alert.tsx
+++ b/packages/ui/components/alert/Alert.tsx
@@ -9,7 +9,7 @@ import type { IconName } from "../icon";
 export const alertStyles = cva("rounded-[10px] p-3", {
   variants: {
     severity: {
-      neutral: "bg-default border-subtle border-[1px] text-default",
+      neutral: "bg-default border-subtle border text-default",
       info: "bg-semantic-info-subtle text-semantic-info",
       warning: "bg-semantic-attention-subtle text-semantic-attention",
       error: "bg-semantic-error-subtle text-semantic-error",
@@ -38,7 +38,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
     <div data-testid="alert" ref={ref} className={alertStyles({ severity, className: props.className })}>
       <div className="relative flex md:flex-row">
         {CustomIcon ? (
-          <div className="flex-shrink-0">
+          <div className="shrink-0">
             <Icon
               name={CustomIcon}
               data-testid="custom-icon"
@@ -47,7 +47,7 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
             />
           </div>
         ) : (
-          <div className={classNames("mr-2 flex-shrink-0", props.title ? "" : "mt-0.5")}>
+          <div className={classNames("mr-2 shrink-0", props.title ? "" : "mt-0.5")}>
             {severity === "error" && (
               <Icon
                 name="circle-x"
@@ -82,8 +82,8 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
             )}
           </div>
         )}
-        <div className="flex flex-grow flex-col sm:flex-row">
-          <div className="space-y-1 ltr:ml-3 rtl:mr-3">
+        <div className="flex grow flex-col sm:flex-row">
+          <div className="stack-y-1 ltr:ml-3 rtl:mr-3">
             {props.title && <h3 className="text-sm font-medium leading-none">{props.title}</h3>}
             {props.message && <div className="text-sm leading-5">{props.message}</div>}
           </div>
diff --git a/packages/ui/components/app-list-card/AppListCard.tsx b/packages/ui/components/app-list-card/AppListCard.tsx
index e770d394d0..cbdca3b86b 100644
--- a/packages/ui/components/app-list-card/AppListCard.tsx
+++ b/packages/ui/components/app-list-card/AppListCard.tsx
@@ -62,13 +62,13 @@ export const AppListCard = (props: AppListCardProps & { highlight?: boolean }) =
   return (
     <div
       className={classNames(
-        highlight && "dark:bg-muted bg-yellow-100",
+        highlight && "dark:bg-cal-muted bg-yellow-100",
         className || classNameObject?.container
       )}>
       <div className="flex items-start gap-x-3 px-4 py-4 sm:px-6">
         {logo ? (
           <img
-            className={classNames(logo.includes("-dark") && "dark:invert", "h-10 w-10 flex-shrink-0")}
+            className={classNames(logo.includes("-dark") && "dark:invert", "h-10 w-10 shrink-0")}
             src={logo}
             alt={`${title} logo`}
           />
@@ -79,27 +79,27 @@ export const AppListCard = (props: AppListCardProps & { highlight?: boolean }) =
               className={classNames("text-emphasis truncate text-sm font-semibold", classNameObject?.title)}>
               {title}
             </h3>
-            <div className="flex flex-shrink-0 items-center gap-x-2">
+            <div className="flex shrink-0 items-center gap-x-2">
               {isDefault && <Badge variant="green">{t("default")}</Badge>}
               {isTemplate && <Badge variant="red">Template</Badge>}
             </div>
           </div>
           <ListItemText
             component="p"
-            className={classNames("whitespace-normal break-words", classNameObject?.description)}>
+            className={classNames("whitespace-normal wrap-break-word", classNameObject?.description)}>
             {description}
           </ListItemText>
           {invalidCredential && (
             <div className="flex gap-x-2 pt-2">
-              <Icon name="circle-alert" className="h-8 w-8 flex-shrink-0 text-red-500 sm:h-4 sm:w-4" />
-              <ListItemText component="p" className="whitespace-pre-wrap break-words text-red-500">
+              <Icon name="circle-alert" className="h-8 w-8 shrink-0 text-red-500 sm:h-4 sm:w-4" />
+              <ListItemText component="p" className="whitespace-pre-wrap wrap-break-word text-red-500">
                 {t("invalid_credential", { appName: title })}
               </ListItemText>
             </div>
           )}
         </div>
         {credentialOwner && (
-          <div className="flex-shrink-0">
+          <div className="shrink-0">
             <Badge variant="gray">
               <div className="flex items-center">
                 <Avatar
@@ -113,7 +113,7 @@ export const AppListCard = (props: AppListCardProps & { highlight?: boolean }) =
             </Badge>
           </div>
         )}
-        {actions && <div className="flex-shrink-0">{actions}</div>}
+        {actions && <div className="shrink-0">{actions}</div>}
       </div>
       <div className="w-full">{children}</div>
     </div>
diff --git a/packages/ui/components/badge/Badge.tsx b/packages/ui/components/badge/Badge.tsx
index 3d047ba36c..ef81483256 100644
--- a/packages/ui/components/badge/Badge.tsx
+++ b/packages/ui/components/badge/Badge.tsx
@@ -7,16 +7,16 @@ import classNames from "@calcom/ui/classNames";
 import { Icon } from "../icon";
 import type { IconName } from "../icon";
 
-export const badgeStyles = cva("font-medium inline-flex items-center justify-center rounded gap-x-1", {
+export const badgeStyles = cva("font-medium inline-flex items-center justify-center rounded-[4px] gap-x-1", {
   variants: {
     variant: {
       default: "bg-attention text-attention",
       warning: "bg-attention text-attention",
       orange: "bg-attention text-attention",
-      success: "bg-success text-success",
-      green: "bg-success text-success",
+      success: "bg-cal-success text-success",
+      green: "bg-cal-success text-success",
       gray: "bg-emphasis text-emphasis",
-      blue: "bg-info text-info",
+      blue: "bg-cal-info text-info",
       red: "bg-error text-error",
       error: "bg-error text-error",
       grayWithoutHover: "bg-gray-100 text-gray-800 dark:bg-darkgray-200 dark:text-darkgray-800",
diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
index 6adaefda4a..03c9711c2d 100644
--- a/packages/ui/components/button/Button.tsx
+++ b/packages/ui/components/button/Button.tsx
@@ -40,7 +40,7 @@ export type ButtonProps = ButtonBaseProps &
   );
 
 export const buttonClasses = cva(
-  "group whitespace-nowrap inline-flex items-center text-sm font-medium relative rounded-[10px] transition disabled:cursor-not-allowed gap-1",
+  "group whitespace-nowrap inline-flex items-center text-sm font-medium relative rounded-[10px] transition cursor-pointer disabled:cursor-not-allowed gap-1",
   {
     variants: {
       variant: {
@@ -54,7 +54,7 @@ export const buttonClasses = cva(
           "bg-brand-default",
           "text-brand",
           // Hover state
-          "enabled:hover:bg-brand-emphasis",
+          "not-disabled:hover:bg-brand-emphasis",
           // Focus state
           "focus-visible:outline-none",
           "focus-visible:ring-0",
@@ -65,8 +65,8 @@ export const buttonClasses = cva(
           "disabled:opacity-30",
           // Shadows and effects
           "shadow-button-solid-brand-default",
-          "enabled:active:shadow-button-solid-brand-active",
-          "enabled:hover:shadow-button-solid-brand-hover",
+          "not-disabled:active:shadow-button-solid-brand-active",
+          "not-disabled:hover:shadow-button-solid-brand-hover",
           "transition-shadow",
           "transition-transform",
           "duration-100",
@@ -79,8 +79,8 @@ export const buttonClasses = cva(
           "border",
           "border-default",
           // Hover state
-          "enabled:hover:bg-muted",
-          "enabled:hover:text-emphasis",
+          "not-disabled:hover:bg-cal-muted",
+          "not-disabled:hover:text-emphasis",
           // Disabled
           "disabled:opacity-30",
           // Focus state
@@ -90,8 +90,8 @@ export const buttonClasses = cva(
           "focus-visible:shadow-outline-gray-focused",
           // Shadows and effects
           "shadow-outline-gray-rested",
-          "enabled:hover:shadow-outline-gray-hover",
-          "enabled:active:shadow-outline-gray-active",
+          "not-disabled:hover:shadow-outline-gray-hover",
+          "not-disabled:active:shadow-outline-gray-active",
           "transition-shadow",
           "duration-200",
         ],
@@ -101,9 +101,9 @@ export const buttonClasses = cva(
           "text-subtle",
           "border border-transparent",
           // Hover
-          "enabled:hover:bg-subtle",
-          "enabled:hover:text-emphasis",
-          "enabled:hover:border-subtle hover:border",
+          "not-disabled:hover:bg-subtle",
+          "not-disabled:hover:text-emphasis",
+          "not-disabled:hover:border-subtle hover:border",
           // Disabled
           "disabled:opacity-30",
           // Focus
@@ -114,7 +114,7 @@ export const buttonClasses = cva(
           "focus-visible:shadow-button-outline-gray-focused",
 
           // Shadows and effects
-          "enabled:active:shadow-outline-gray-active",
+          "not-disabled:active:shadow-outline-gray-active",
           "transition-shadow",
           "duration-200",
         ],
@@ -142,8 +142,8 @@ export const buttonClasses = cva(
           "disabled:opacity-30",
           // Shadows and effects
           "shadow-outline-red-rested",
-          "enabled:hover:shadow-outline-red-hover",
-          "enabled:active:shadow-outline-red-active",
+          "not-disabled:hover:shadow-outline-red-hover",
+          "not-disabled:active:shadow-outline-red-active",
           "transition-shadow",
           "duration-200",
         ],
@@ -187,22 +187,22 @@ export const buttonClasses = cva(
       {
         variant: "icon",
         size: "base",
-        className: "min-h-[36px] min-w-[36px] !p-2 hover:border-default",
+        className: "min-h-[36px] min-w-[36px] p-2! hover:border-default",
       },
       {
         variant: "icon",
         size: "xs",
-        className: "h-5 w-5 !p-1 rounded-md",
+        className: "h-5 w-5 p-1! rounded-md",
       },
       {
         variant: "icon",
         size: "sm",
-        className: "h-6 w-6 !p-1 rounded-md",
+        className: "h-6 w-6 p-1! rounded-md",
       },
       {
         variant: "icon",
         size: "lg",
-        className: "h-10 w-10 !p-1",
+        className: "h-10 w-10 p-1!",
       },
       {
         variant: "fab",
diff --git a/packages/ui/components/buttonGroup/ButtonGroup.tsx b/packages/ui/components/buttonGroup/ButtonGroup.tsx
index d35e910f00..cf956f45ef 100644
--- a/packages/ui/components/buttonGroup/ButtonGroup.tsx
+++ b/packages/ui/components/buttonGroup/ButtonGroup.tsx
@@ -27,7 +27,7 @@ export function ButtonGroup({ children, combined = false, containerProps }: Prop
         "flex",
         !combined
           ? "space-x-2 rtl:space-x-reverse"
-          : "[&>*:first-child]:rounded-l-[var(--btn-group-radius)] rtl:[&>*:first-child]:rounded-l-none rtl:[&>*:first-child]:rounded-r-[var(--btn-group-radius)] [&>*:last-child]:rounded-r-[var(--btn-group-radius)] rtl:[&>*:last-child]:rounded-l-[var(--btn-group-radius)] rtl:[&>*:last-child]:rounded-r-none [&>*:not(:first-child)]:-ml-[1px] [&>*]:rounded-none [&>*]:border hover:[&>*]:z-[1]",
+          : "[&>*:first-child]:rounded-l-(--btn-group-radius) rtl:[&>*:first-child]:rounded-l-none rtl:[&>*:first-child]:rounded-r-(--btn-group-radius) [&>*:last-child]:rounded-r-(--btn-group-radius) rtl:[&>*:last-child]:rounded-l-(--btn-group-radius) rtl:[&>*:last-child]:rounded-r-none [&>*:not(:first-child)]:-ml-px *:rounded-none *:border hover:*:z-1",
         containerProps?.className
       )}>
       {children}
diff --git a/packages/ui/components/card/Card.tsx b/packages/ui/components/card/Card.tsx
index 2c3e3d6657..7c14a31c53 100644
--- a/packages/ui/components/card/Card.tsx
+++ b/packages/ui/components/card/Card.tsx
@@ -206,7 +206,7 @@ export function Card({
           href={mediaLink}
           data-testid={actionButton?.["data-testid"]}
           className="group relative my-3 flex aspect-video items-center overflow-hidden rounded">
-          <div className="absolute inset-0 bg-black bg-opacity-50 transition group-hover:bg-opacity-40" />
+          <div className="absolute inset-0 bg-black/50 transition group-hover:bg-black/40" />
           <svg
             className="text-inverted absolute left-1/2 top-1/2 h-8 w-8 -translate-x-1/2 -translate-y-1/2 transform rounded-full shadow-lg transition-all hover:-mt-px"
             viewBox="0 0 32 32"
diff --git a/packages/ui/components/card/FormCard.tsx b/packages/ui/components/card/FormCard.tsx
index 8fbdbe944f..b92750ffb3 100644
--- a/packages/ui/components/card/FormCard.tsx
+++ b/packages/ui/components/card/FormCard.tsx
@@ -119,7 +119,7 @@ export default function FormCard({
   collapsible?: boolean;
 } & JSX.IntrinsicElements["div"]) {
   className = classNames(
-    "flex items-center group relative w-full rounded-2xl p-1 border border-subtle bg-muted mb-2",
+    "flex items-center group relative w-full rounded-2xl p-1 border border-subtle bg-cal-muted mb-2",
     className
   );
 
diff --git a/packages/ui/components/card/PanelCard.tsx b/packages/ui/components/card/PanelCard.tsx
index 6c715d7e15..756c215b1e 100644
--- a/packages/ui/components/card/PanelCard.tsx
+++ b/packages/ui/components/card/PanelCard.tsx
@@ -48,7 +48,7 @@ export function PanelCard({
       data-testid="panel-card"
       ref={animationParent}
       className={classNames(
-        "bg-muted group relative flex w-full flex-col items-center rounded-2xl px-1",
+        "bg-cal-muted group relative flex w-full flex-col items-center rounded-2xl px-1",
         !isCollapsed && "pb-1",
         className
       )}>
diff --git a/packages/ui/components/card/StepCard.tsx b/packages/ui/components/card/StepCard.tsx
index aae85278ba..538e0d2bf8 100644
--- a/packages/ui/components/card/StepCard.tsx
+++ b/packages/ui/components/card/StepCard.tsx
@@ -1,6 +1,6 @@
 const StepCard: React.FC<{ children: React.ReactNode }> = (props) => {
   return (
-    <div className="sm:border-subtle bg-muted mt-10  border p-4 sm:rounded-md sm:p-8">{props.children}</div>
+    <div className="sm:border-subtle bg-cal-muted mt-10  border p-4 sm:rounded-md sm:p-8">{props.children}</div>
   );
 };
 
diff --git a/packages/ui/components/command/Command.tsx b/packages/ui/components/command/Command.tsx
index 802e83f563..4d640e03b1 100644
--- a/packages/ui/components/command/Command.tsx
+++ b/packages/ui/components/command/Command.tsx
@@ -43,7 +43,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={classNames(
-        "placeholder:text-muted hover:border-emphasis dark:focus:border-emphasis border-default bg-default placeholder:text-muted text-emphasis disabled:hover:border-default disabled:bg-subtle focus:ring-brand-default focus:border-subtle block flex h-[28px] w-full rounded-md rounded-md border bg-transparent px-3 py-1.5 text-sm text-sm leading-4 outline-none focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:cursor-not-allowed disabled:opacity-50",
+        "hover:border-emphasis border-default placeholder:text-muted text-emphasis disabled:hover:border-default disabled:bg-subtle focus:!border-subtle focus:!ring-brand-default flex h-[28px] w-full rounded-md border bg-transparent px-3 py-1.5 text-sm leading-4 outline-none focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
@@ -108,7 +108,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={classNames(
-      "aria-selected:bg-muted aria-selected:text-emphasis relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "aria-selected:bg-cal-muted aria-selected:text-emphasis data-disabled:pointer-events-none data-disabled:opacity-50 data-disabled:cursor-not-allowed relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
       className
     )}
     {...props}
diff --git a/packages/ui/components/dialog/ConfirmationDialogContent.tsx b/packages/ui/components/dialog/ConfirmationDialogContent.tsx
index 5b011f1192..6e6930ab79 100644
--- a/packages/ui/components/dialog/ConfirmationDialogContent.tsx
+++ b/packages/ui/components/dialog/ConfirmationDialogContent.tsx
@@ -58,7 +58,7 @@ export const ConfirmationContent = (props: PropsWithChildren<ConfirmationDialogC
               </div>
             )}
             {variety === "success" && (
-              <div className="bg-success mx-auto rounded-full p-2 text-center">
+              <div className="bg-cal-success mx-auto rounded-full p-2 text-center">
                 <Icon name="check" className="h-5 w-5 text-green-600" />
               </div>
             )}
diff --git a/packages/ui/components/dialog/Dialog.tsx b/packages/ui/components/dialog/Dialog.tsx
index a33b637b6c..27f52c03a7 100644
--- a/packages/ui/components/dialog/Dialog.tsx
+++ b/packages/ui/components/dialog/Dialog.tsx
@@ -18,10 +18,10 @@ const dialogClasses = cva(
   {
     variants: {
       size: {
-        xl: "px-8 pt-8 sm:max-w-[90rem]",
-        lg: "px-8 pt-8 sm:max-w-[70rem]",
-        md: "px-8 pt-8 sm:max-w-[48rem]",
-        default: "px-8 pt-8 sm:max-w-[35rem]",
+        xl: "px-8 pt-8 sm:max-w-360",
+        lg: "px-8 pt-8 sm:max-w-280",
+        md: "px-8 pt-8 sm:max-w-3xl",
+        default: "px-8 pt-8 sm:max-w-140",
       },
     },
     defaultVariants: {
@@ -70,9 +70,9 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
     return (
       <DialogPrimitive.Portal>
         {forceOverlayWhenNoModal ? (
-          <div className="fadeIn fixed inset-0 z-50  bg-neutral-800 bg-opacity-70 transition-opacity" />
+          <div className="fadeIn fixed inset-0 z-50  bg-neutral-800/70 transition-opacity" />
         ) : (
-          <DialogPrimitive.Overlay className="fadeIn fixed inset-0 z-50 bg-neutral-800 bg-opacity-70 transition-opacity dark:bg-opacity-80" />
+          <DialogPrimitive.Overlay className="fadeIn fixed inset-0 z-50 bg-neutral-800/70 transition-opacity dark:bg-neutral-800/80" />
         )}
         <DialogPrimitive.Content
           {...props}
@@ -100,11 +100,11 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
           {type === "confirmation" && (
             <div className="flex">
               {icon && (
-                <div className="bg-emphasis flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full">
+                <div className="bg-emphasis flex h-10 w-10 shrink-0 items-center justify-center rounded-full">
                   <Icon name={icon} className="text-emphasis h-4 w-4" />
                 </div>
               )}
-              <div className="ml-4 flex-grow">
+              <div className="ml-4 grow">
                 <DialogHeader title={title} subtitle={props.description} />
                 <div data-testid="dialog-confirmation">{children}</div>
               </div>
@@ -129,7 +129,7 @@ export function DialogHeader(props: DialogHeaderProps) {
     <div className="mb-4">
       <h2
         data-testid="dialog-title"
-        className="leading-20 text-semibold text-emphasis font-cal mb-1 text-xl"
+        className="text-semibold text-emphasis font-cal mb-1 text-xl"
         id="modal-title">
         {props.title}
       </h2>
@@ -152,7 +152,7 @@ export function DialogFooter(props: DialogFooterProps) {
   return (
     <div
       className={classNames(
-        "bg-muted border-muted bottom-0 -mx-8 mt-10 rounded-b-2xl border",
+        "bg-cal-muted border-muted bottom-0 -mx-8 mt-10 rounded-b-2xl border",
         props?.noSticky ? "" : "sticky",
         props.className
       )}>
diff --git a/packages/ui/components/dropdown/Dropdown.tsx b/packages/ui/components/dropdown/Dropdown.tsx
index b55f07909b..8c6f474d79 100644
--- a/packages/ui/components/dropdown/Dropdown.tsx
+++ b/packages/ui/components/dropdown/Dropdown.tsx
@@ -18,7 +18,7 @@ export const DropdownMenuTrigger = forwardRef<HTMLButtonElement, DropdownMenuTri
       {...props}
       className={classNames(
         !props.asChild &&
-          `focus:bg-subtle hover:bg-muted text-default group-hover:text-emphasis inline-flex items-center rounded-md bg-transparent px-3 py-2 text-sm font-medium ring-0 transition ${className}`
+          `focus:bg-subtle hover:bg-cal-muted text-default group-hover:text-emphasis inline-flex items-center rounded-md bg-transparent px-3 py-2 text-sm font-medium ring-0 transition ${className}`
       )}
       ref={forwardedRef}
     />
@@ -39,7 +39,7 @@ export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuConten
         {...props}
         sideOffset={sideOffset}
         className={classNames(
-          "shadow-dropdown bg-default border-subtle relative z-50 origin-top-right space-y-[1px] rounded-xl border p-1 text-sm",
+          "shadow-dropdown bg-default border-subtle relative z-50 origin-top-right stack-y-px rounded-xl border p-1 text-sm",
           "w-[220px]",
           props.className
         )}
@@ -63,7 +63,7 @@ type DropdownMenuItemProps = ComponentProps<(typeof DropdownMenuPrimitive)["Chec
 export const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
   ({ className = "", ...props }, forwardedRef) => (
     <DropdownMenuPrimitive.Item
-      className={`focus:ring-brand-default hover:bg-subtle hover:text-emphasis text-default text-sm ring-inset first-of-type:rounded-t-[inherit] last-of-type:rounded-b-[inherit] hover:ring-0 focus:outline-none focus:ring-1 ${className}`}
+      className={`hover:bg-subtle hover:text-emphasis text-default text-sm ring-inset first-of-type:rounded-t-[inherit] last-of-type:rounded-b-[inherit] hover:ring-0 focus:outline-none focus:bg-subtle focus:text-emphasis ${className}`}
       {...props}
       ref={forwardedRef}
     />
diff --git a/packages/ui/components/editor/Editor.tsx b/packages/ui/components/editor/Editor.tsx
index 343132ef14..606aab812d 100644
--- a/packages/ui/components/editor/Editor.tsx
+++ b/packages/ui/components/editor/Editor.tsx
@@ -72,7 +72,7 @@ export const Editor = (props: TextEditorProps) => {
         </label>
       )}
       <LexicalComposer initialConfig={{ ...editorConfig }}>
-        <div className="editor-container hover:border-emphasis focus-within:ring-brand-default !rounded-lg p-0 transition focus-within:ring-2 focus-within:ring-offset-0">
+        <div className="editor-container hover:border-emphasis focus-within:ring-brand-default rounded-lg! p-0 transition focus-within:ring-2 focus-within:ring-offset-0">
           <ToolbarPlugin
             getText={props.getText}
             setText={props.setText}
@@ -85,7 +85,7 @@ export const Editor = (props: TextEditorProps) => {
             setFirstRender={props.setFirstRender}
           />
           <div
-            className={classNames("editor-inner scroll-bar overflow-x-hidden", !editable && "!bg-subtle")}
+            className={classNames("editor-inner scroll-bar overflow-x-hidden!", !editable && "bg-subtle!")}
             style={{ height: props.height, maxHeight: props.maxHeight }}>
             <RichTextPlugin
               contentEditable={
diff --git a/packages/ui/components/editor/nodes/VariableNode.test.ts b/packages/ui/components/editor/nodes/VariableNode.test.ts
index 54b5102122..41a0a3a424 100644
--- a/packages/ui/components/editor/nodes/VariableNode.test.ts
+++ b/packages/ui/components/editor/nodes/VariableNode.test.ts
@@ -39,7 +39,7 @@ describe("VariableNode", () => {
     editor.update(() => {
       const node = $createVariableNode("test");
       const dom = node.createDOM(editor._config);
-      expect(dom.className).toBe("bg-info");
+      expect(dom.className).toBe("bg-cal-info");
       expect(dom.getAttribute("data-lexical-variable")).toBe("true");
     });
   });
diff --git a/packages/ui/components/editor/nodes/VariableNode.ts b/packages/ui/components/editor/nodes/VariableNode.ts
index 1369b8e29b..bc978ef17f 100644
--- a/packages/ui/components/editor/nodes/VariableNode.ts
+++ b/packages/ui/components/editor/nodes/VariableNode.ts
@@ -16,7 +16,7 @@ export class VariableNode extends TextNode {
 
   createDOM(config: EditorConfig): HTMLElement {
     const dom = super.createDOM(config);
-    dom.className = "bg-info";
+    dom.className = "bg-cal-info";
     dom.setAttribute("data-lexical-variable", "true");
     return dom;
   }
diff --git a/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx b/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx
index 0aab0e882d..343418dda1 100644
--- a/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx
+++ b/packages/ui/components/editor/plugins/AddVariablesDropdown.tsx
@@ -37,7 +37,7 @@ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
       onOpenChange={(open) => {
         if (!open) setQuery("");
       }}>
-      <DropdownMenuTrigger aria-label="Add variable" className="focus:bg-muted pt-[6px]">
+      <DropdownMenuTrigger aria-label="Add variable" className="focus:bg-cal-muted pt-[6px]">
         <div className="items-center">
           {props.isTextEditor ? (
             <>
@@ -65,7 +65,7 @@ export const AddVariablesDropdown = (props: IAddVariablesDropdown) => {
         </div>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-52">
-        <div className="space-y-2 p-1">
+        <div className="stack-y-2 p-1">
           <div className="text-muted ml-1 text-left text-xs font-medium tracking-wide">
             {t("add_dynamic_variables")}
           </div>
diff --git a/packages/ui/components/file-uploader/FileUploader.tsx b/packages/ui/components/file-uploader/FileUploader.tsx
index d2b50c388c..5bad46bd9d 100644
--- a/packages/ui/components/file-uploader/FileUploader.tsx
+++ b/packages/ui/components/file-uploader/FileUploader.tsx
@@ -199,7 +199,7 @@ export default function FileUploader({
 
   return (
     <div>
-      <div className="space-y-3">
+      <div className="stack-y-3">
         <div className="flex items-center gap-2">
           <Label
             htmlFor={id}
@@ -229,11 +229,11 @@ export default function FileUploader({
         </div>
       </div>
       {showFilesList && files.length > 0 && (
-        <div className="mt-2 space-y-1 transition">
+        <div className="mt-2 stack-y-1 transition">
           {files.map((fileData) => (
             <div key={fileData.id} className="flex items-center justify-between rounded-md border">
               <div className="flex min-w-0 items-center gap-2 pl-2">
-                <Icon name={getFileIcon(fileData.file.type)} className="h-5 w-5 flex-shrink-0" />
+                <Icon name={getFileIcon(fileData.file.type)} className="h-5 w-5 shrink-0" />
                 <div className="min-w-0 border-l py-2 pl-3">
                   <p className="text-emphasis truncate text-sm font-medium">{fileData.file.name}</p>
                   <p className="text-xs">{formatFileSize(fileData.file.size)}</p>
@@ -245,7 +245,7 @@ export default function FileUploader({
                 size="sm"
                 StartIcon="x"
                 onClick={() => handleFileRemove(fileData.id)}
-                className="mx-2 h-6 w-6 flex-shrink-0"
+                className="mx-2 h-6 w-6 shrink-0"
               />
             </div>
           ))}
diff --git a/packages/ui/components/form/checkbox/Checkbox.tsx b/packages/ui/components/form/checkbox/Checkbox.tsx
index 4224e1dd6f..9e4d23bf09 100644
--- a/packages/ui/components/form/checkbox/Checkbox.tsx
+++ b/packages/ui/components/form/checkbox/Checkbox.tsx
@@ -80,10 +80,10 @@ const CheckboxField = forwardRef<HTMLInputElement, Props>(
                     disabled={disabled}
                     id={rest.id ? rest.id : id}
                     className={classNames(
-                      "text-emphasis focus:ring-emphasis dark:text-muted border-default bg-default focus:bg-default active:bg-default h-4 w-4 rounded transition checked:hover:bg-gray-600 focus:outline-none focus:ring-0 ltr:mr-2 rtl:ml-2",
+                      "text-emphasis focus:ring-emphasis dark:text-muted border-default bg-default focus:bg-default active:bg-default checked:border-transparent! checked:bg-gray-800! h-4 w-4 rounded-[4px] transition focus:outline-none focus:ring-0 ltr:mr-2 rtl:ml-2",
                       !error && disabled
                         ? "cursor-not-allowed bg-gray-300 checked:bg-gray-300 hover:bg-gray-300 hover:checked:bg-gray-300"
-                        : "hover:bg-subtle hover:border-emphasis checked:bg-gray-800",
+                        : "hover:bg-subtle hover:border-emphasis",
                       error &&
                         "border-error hover:bg-error hover:border-error checked:bg-darkerror checked:hover:border-error checked:hover:bg-darkerror",
                       rest.className
diff --git a/packages/ui/components/form/color-picker/colorpicker.tsx b/packages/ui/components/form/color-picker/colorpicker.tsx
index f97ff1e4d3..d494c35d96 100644
--- a/packages/ui/components/form/color-picker/colorpicker.tsx
+++ b/packages/ui/components/form/color-picker/colorpicker.tsx
@@ -45,7 +45,7 @@ const ColorPicker = (props: ColorPickerProps) => {
           <Popover.Content align={props.popoverAlign ?? "center"} sideOffset={10}>
             <HexColorPicker
               color={color}
-              className="!h-32 !w-32"
+              className="h-32! w-32!"
               onChange={(val) => {
                 setColor(val);
                 props.onChange(val);
diff --git a/packages/ui/components/form/date-range-picker/Calendar.tsx b/packages/ui/components/form/date-range-picker/Calendar.tsx
index 58e0273b3d..c5a8015694 100644
--- a/packages/ui/components/form/date-range-picker/Calendar.tsx
+++ b/packages/ui/components/form/date-range-picker/Calendar.tsx
@@ -26,8 +26,8 @@ function Calendar({
       showOutsideDays={showOutsideDays}
       className={cn("p-3", className)}
       classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
+        months: "flex flex-col sm:flex-row stack-y-4 sm:space-x-4 sm:stack-y-0",
+        month: "stack-y-4",
         caption: "flex pt-1 relative items-center justify-between",
         caption_label: "text-sm font-medium",
         nav: "flex items-center",
@@ -35,9 +35,9 @@ function Calendar({
         head_row: "flex w-full items-center justify-between",
         head_cell: "w-8 md:w-11 h-8 text-sm font-medium text-default text-center",
         nav_button: cn(buttonClasses({ color: "minimal", variant: "icon" })),
-        table: "w-full border-collapse space-y-1",
+        table: "w-full border-collapse stack-y-1",
         row: "flex w-full mt-0.5 gap-0.5",
-        cell: "w-8 h-8 md:h-11 md:w-11 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        cell: "w-8 h-8 md:h-11 md:w-11 text-center text-sm p-0 relative focus-within:relative focus-within:z-20",
         day: cn(
           buttonClasses({ color: "minimal" }),
           "w-8 h-8 md:h-11 md:w-11 p-0 text-sm font-medium aria-selected:opacity-100 inline-flex items-center justify-center"
diff --git a/packages/ui/components/form/date-range-picker/DateRangePicker.tsx b/packages/ui/components/form/date-range-picker/DateRangePicker.tsx
index 490178c1fc..7fa7fc517d 100644
--- a/packages/ui/components/form/date-range-picker/DateRangePicker.tsx
+++ b/packages/ui/components/form/date-range-picker/DateRangePicker.tsx
@@ -108,14 +108,21 @@ export function DatePickerWithRange({
             )}
           </Button>
         </Popover.Trigger>
-        <Popover.Content
-          className="bg-default text-emphasis z-50 w-auto rounded-md border p-0 outline-none"
-          align="start"
-          sideOffset={4}
-          side={strictlyBottom ? "bottom" : undefined}
-          avoidCollisions={!strictlyBottom}>
-          {calendar}
-        </Popover.Content>
+        <Popover.Portal>
+          <Popover.Content
+            className="bg-default text-emphasis z-50 w-auto rounded-md border p-0 outline-none"
+            align="start"
+            sideOffset={4}
+            side={strictlyBottom ? "bottom" : undefined}
+            avoidCollisions={!strictlyBottom}
+            onInteractOutside={(event) => {
+              if (dates?.startDate && !dates?.endDate) {
+                event.preventDefault();
+              }}}
+            >
+            {calendar}
+          </Popover.Content>
+        </Popover.Portal>
       </Popover.Root>
     </div>
   );
diff --git a/packages/ui/components/form/inputs/Input.tsx b/packages/ui/components/form/inputs/Input.tsx
index 9b8154616d..a9784eb70e 100644
--- a/packages/ui/components/form/inputs/Input.tsx
+++ b/packages/ui/components/form/inputs/Input.tsx
@@ -16,7 +16,7 @@ import type { InputFieldProps } from "./types";
 
 export function InputLeading(props: JSX.IntrinsicElements["div"]) {
   return (
-    <span className="bg-muted border-default text-subtle inline-flex flex-shrink-0 items-center rounded-l-sm border px-3 ltr:border-r-0 rtl:border-l-0 sm:text-sm sm:leading-4">
+    <span className="bg-cal-muted border-default text-subtle inline-flex shrink-0 items-center rounded-l-sm border px-3 ltr:border-r-0 rtl:border-l-0 sm:text-sm sm:leading-4">
       {props.children}
     </span>
   );
@@ -165,7 +165,7 @@ export function InputGroupBox(props: JSX.IntrinsicElements["div"]) {
   return (
     <div
       {...props}
-      className={classNames("bg-default border-default space-y-2 rounded-sm border p-2", props.className)}>
+      className={classNames("bg-default border-default stack-y-2 rounded-sm border p-2", props.className)}>
       {props.children}
     </div>
   );
diff --git a/packages/ui/components/form/inputs/InputFieldWithSelect.tsx b/packages/ui/components/form/inputs/InputFieldWithSelect.tsx
index 14f6d88f55..f4a0b1ff94 100644
--- a/packages/ui/components/form/inputs/InputFieldWithSelect.tsx
+++ b/packages/ui/components/form/inputs/InputFieldWithSelect.tsx
@@ -13,7 +13,7 @@ export const InputFieldWithSelect = forwardRef<
       ref={ref}
       {...props}
       inputIsFullWidth={false}
-      addOnClassname="!px-0"
+      addOnClassname="px-0!"
       addOnSuffix={<UnstyledSelect {...props.selectProps} />}
     />
   );
diff --git a/packages/ui/components/form/inputs/MultiOptionInput.tsx b/packages/ui/components/form/inputs/MultiOptionInput.tsx
index 31f21249af..2ede89b135 100644
--- a/packages/ui/components/form/inputs/MultiOptionInput.tsx
+++ b/packages/ui/components/form/inputs/MultiOptionInput.tsx
@@ -192,10 +192,10 @@ export const MultiOptionInput = <TFieldValues extends FieldValues>({
     <div className="w-full">
       {keyValueMode && (
         <div className="mb-2 flex items-center px-2">
-          <div className="flex-grow">
+          <div className="grow">
             <span className="text-subtle text-xs font-medium">{keyLabel}</span>
           </div>
-          <div className="flex-grow">
+          <div className="grow">
             <span className="text-subtle text-xs font-medium">{valueLabel}</span>
           </div>
           {/* Space for buttons */}
@@ -211,7 +211,7 @@ export const MultiOptionInput = <TFieldValues extends FieldValues>({
             {keyValueMode ? (
               // Key-value pair mode
               <div className="flex w-full gap-2">
-                <div className="flex-grow">
+                <div className="grow">
                   <TextField
                     disabled={disabled}
                     labelSrOnly
@@ -223,7 +223,7 @@ export const MultiOptionInput = <TFieldValues extends FieldValues>({
                     {...control.register(`${fieldArrayName}.${index}.label` as Path<TFieldValues>)}
                   />
                 </div>
-                <div className="flex-grow">
+                <div className="grow">
                   <TextField
                     disabled={disabled}
                     labelSrOnly
@@ -248,7 +248,7 @@ export const MultiOptionInput = <TFieldValues extends FieldValues>({
               </div>
             ) : (
               // Standard mode
-              <div className="flex-grow">
+              <div className="grow">
                 <TextField
                   disabled={disabled}
                   labelSrOnly
diff --git a/packages/ui/components/form/inputs/TextField.tsx b/packages/ui/components/form/inputs/TextField.tsx
index 45fd4dbef5..af3a74e0ae 100644
--- a/packages/ui/components/form/inputs/TextField.tsx
+++ b/packages/ui/components/form/inputs/TextField.tsx
@@ -85,7 +85,7 @@ const Addon = ({
   <div
     onClick={onClickAddon && onClickAddon}
     className={classNames(
-      "flex flex-shrink-0 items-center justify-center whitespace-nowrap",
+      "flex shrink-0 items-center justify-center whitespace-nowrap",
       onClickAddon && "pointer-events-auto cursor-pointer disabled:hover:cursor-not-allowed",
       className
     )}>
@@ -158,7 +158,7 @@ export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(function
           className={classNames(
             inputStyles({ size }),
             "group relative mb-1 flex min-w-0 items-center gap-1",
-            "[&:focus-within]:border-subtle [&:focus-within]:ring-brand-default [&:focus-within]:ring-2",
+            "[&:focus-within]:border-subtle [&:focus-within]:ring-brand-default focus-within:ring-2",
             "[&:has(:disabled)]:bg-subtle [&:has(:disabled)]:hover:border-default [&:has(:disabled)]:cursor-not-allowed",
             inputIsFullWidth && "w-full"
           )}>
diff --git a/packages/ui/components/form/select/Select.tsx b/packages/ui/components/form/select/Select.tsx
index 2816b55684..678ec4fc3c 100644
--- a/packages/ui/components/form/select/Select.tsx
+++ b/packages/ui/components/form/select/Select.tsx
@@ -62,7 +62,7 @@ export const Select = <
           cx(
             "bg-default flex cursor-pointer justify-between py-1.5 px-2 rounded-md text-default items-center",
             state.isFocused && "bg-subtle",
-            state.isDisabled && "bg-muted",
+            state.isDisabled && "bg-cal-muted",
             state.isSelected && "bg-emphasis text-default",
             innerClassNames?.option
           ),
@@ -78,11 +78,11 @@ export const Select = <
                 ? "p-1 h-fit"
                 : "px-3 h-fit"
               : size === "sm"
-              ? "h-7 px-2 py-1"
-              : "h-8 px-3 py-2",
+              ? "h-7 px-2 py-0.5"
+              : "h-8 px-3 py-1",
             props.isDisabled && "bg-subtle",
             "rounded-[10px]",
-            "[&:focus-within]:border-emphasis [&:focus-within]:shadow-outline-gray-focused [&:focus-within]:ring-0 !flex",
+            "[&:focus-within]:border-emphasis [&:focus-within]:shadow-outline-gray-focused focus-within:ring-0 flex! **:[input]:leading-none text-sm",
             innerClassNames?.control
           ),
         singleValue: () => cx("text-default placeholder:text-muted", innerClassNames?.singleValue),
@@ -91,7 +91,7 @@ export const Select = <
         multiValue: () =>
           cx(
             "font-medium inline-flex items-center justify-center rounded bg-emphasis text-emphasis leading-none text-xs",
-            size == "sm" ? "px-1.5 py-[1px] rounded-md" : "py-1 px-1.5 leading-none rounded-lg"
+            size == "sm" ? "px-1.5 py-px rounded-md" : "py-1 px-1.5 leading-none rounded-lg"
           ),
         menu: () =>
           cx(
@@ -101,12 +101,12 @@ export const Select = <
         groupHeading: () => "leading-none text-xs text-muted p-2 font-medium ml-1",
         menuList: () =>
           cx(
-            "scroll-bar scrollbar-track-w-20 rounded-md flex flex-col space-y-[1px]",
+            "scroll-bar scrollbar-track-w-20 rounded-md flex flex-col stack-y-px",
             innerClassNames?.menuList
           ),
         indicatorsContainer: (state) =>
           cx(
-            "flex !items-start justify-center mt-0.5 h-full",
+            "flex items-start! justify-center mt-1 h-full",
             state.selectProps.menuIsOpen
               ? hasMultiLastIcons
                 ? "[&>*:last-child]:rotate-180 [&>*:last-child]:transition-transform [&>*:last-child]:w-4 [&>*:last-child]:h-4"
@@ -219,7 +219,6 @@ export function SelectWithValidation<
             position: "absolute",
           }}
           value={hiddenInputValue}
-           
           onChange={() => {}}
           // TODO:Not able to get focus to work
           // onFocus={() => selectRef.current?.focus()}
diff --git a/packages/ui/components/form/select/components.tsx b/packages/ui/components/form/select/components.tsx
index 4db45740a2..4afb76c823 100644
--- a/packages/ui/components/form/select/components.tsx
+++ b/packages/ui/components/form/select/components.tsx
@@ -19,7 +19,7 @@ export const InputComponent = <
     <reactSelectComponents.Input
       // disables our default form focus highlight on the react-select input element
       inputClassName={classNames(
-        "focus:ring-0 focus:ring-offset-0 !text-default dark:!text-white",
+        "focus:ring-0 focus:ring-offset-0 !text-default dark:text-white!",
         inputClassName
       )}
       {...props}
diff --git a/packages/ui/components/form/slider/RangeSlider.tsx b/packages/ui/components/form/slider/RangeSlider.tsx
index f544adbcf2..cbbfbb2f82 100644
--- a/packages/ui/components/form/slider/RangeSlider.tsx
+++ b/packages/ui/components/form/slider/RangeSlider.tsx
@@ -13,11 +13,11 @@ const RangeSlider = React.forwardRef<
     ref={ref}
     className={classNames("relative flex w-full touch-none select-none items-center", className)}
     {...props}>
-    <SliderPrimitive.Track className="bg-subtle border-subtle relative h-2 w-full grow overflow-hidden rounded-full border-[1px]">
+    <SliderPrimitive.Track className="bg-subtle border-subtle relative h-2 w-full grow overflow-hidden rounded-full border">
       <SliderPrimitive.Range className="bg-brand-default absolute h-full" />
     </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="border-subtle bg-brand-default ring-offset-background focus-visible:ring-ring block h-4 w-4 rounded-full border-2 border-[1px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
-    <SliderPrimitive.Thumb className="border-subtle bg-brand-default ring-offset-background focus-visible:ring-ring block h-4 w-4 rounded-full border-2 border-[1px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+    <SliderPrimitive.Thumb className="border-subtle bg-brand-default ring-offset-background focus-visible:ring-ring block h-4 w-4 rounded-full border-2 border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+    <SliderPrimitive.Thumb className="border-subtle bg-brand-default ring-offset-background focus-visible:ring-ring block h-4 w-4 rounded-full border-2 border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
   </SliderPrimitive.Root>
 ));
 RangeSlider.displayName = SliderPrimitive.Root.displayName;
diff --git a/packages/ui/components/form/slider/RangeSliderPopover.tsx b/packages/ui/components/form/slider/RangeSliderPopover.tsx
index a56d5b1277..4f84dbd9e1 100644
--- a/packages/ui/components/form/slider/RangeSliderPopover.tsx
+++ b/packages/ui/components/form/slider/RangeSliderPopover.tsx
@@ -64,7 +64,7 @@ export const RangeSliderPopover = ({
       <Popover.Portal>
         <Popover.Content
           align="start"
-          className="border-subtle shadow-dropdown bg-default z-50 mt-2 w-72 rounded-lg border-[1px] px-4 pb-3 pt-4 font-[family-name:var(--font-inter)]">
+          className="border-subtle shadow-dropdown bg-default z-50 mt-2 w-72 rounded-lg border px-4 pb-3 pt-4 font-(family-name:--font-sans)">
           <div className="mb-4">
             <RangeSlider
               min={min}
diff --git a/packages/ui/components/form/slider/index.tsx b/packages/ui/components/form/slider/index.tsx
index d89744bd25..254ca364af 100644
--- a/packages/ui/components/form/slider/index.tsx
+++ b/packages/ui/components/form/slider/index.tsx
@@ -13,11 +13,11 @@ const Slider = React.forwardRef<
     ref={ref}
     className={classNames("relative flex w-full touch-none select-none items-center", className)}
     {...props}>
-    <SliderPrimitive.Track className="bg-subtle border-subtle relative h-2 w-full grow overflow-hidden rounded-full border-[1px]">
+    <SliderPrimitive.Track className="bg-subtle border-subtle relative h-2 w-full grow overflow-hidden rounded-full border">
       <SliderPrimitive.Range className="bg-brand-default absolute h-full" />
     </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="border-subtle bg-brand-default ring-offset-background focus-visible:ring-ring block h-4 w-4 rounded-full border-2 border-[1px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
-    <SliderPrimitive.Thumb className="border-subtle bg-brand-default ring-offset-background focus-visible:ring-ring block h-4 w-4 rounded-full border-2 border-[1px] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+    <SliderPrimitive.Thumb className="border-subtle bg-brand-default ring-offset-background focus-visible:ring-ring block h-4 w-4 rounded-full border-2 border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+    <SliderPrimitive.Thumb className="border-subtle bg-brand-default ring-offset-background focus-visible:ring-ring block h-4 w-4 rounded-full border-2 border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
   </SliderPrimitive.Root>
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;
diff --git a/packages/ui/components/form/step/Steps.tsx b/packages/ui/components/form/step/Steps.tsx
index 29a331cc2c..76e64930b2 100644
--- a/packages/ui/components/form/step/Steps.tsx
+++ b/packages/ui/components/form/step/Steps.tsx
@@ -28,7 +28,7 @@ const Steps = (props: StepsProps) => {
     stepLabel = (currentStep, totalSteps) => `Step ${currentStep} of ${totalSteps}`,
   } = props;
   return (
-    <div className="mt-6 space-y-2">
+    <div className="mt-6 stack-y-2">
       <p className="text-subtle text-xs font-medium">{stepLabel(currentStep, maxSteps)}</p>
       <div data-testid="step-indicator-container" className="flex w-full space-x-2 rtl:space-x-reverse">
         {new Array(maxSteps).fill(0).map((_s, index) => {
diff --git a/packages/ui/components/form/switch/SettingsToggle.tsx b/packages/ui/components/form/switch/SettingsToggle.tsx
index 04c3dae35f..81381cf67d 100644
--- a/packages/ui/components/form/switch/SettingsToggle.tsx
+++ b/packages/ui/components/form/switch/SettingsToggle.tsx
@@ -49,7 +49,7 @@ export function SettingsToggle({
 
   return (
     <>
-      <div className="flex w-full flex-col space-y-4 lg:flex-row lg:space-x-4 lg:space-y-0">
+      <div className="flex w-full flex-col stack-y-4 lg:flex-row lg:space-x-4 lg:stack-y-0">
         <fieldset className="block w-full flex-col sm:flex">
           {toggleSwitchAtTheEnd ? (
             <div
diff --git a/packages/ui/components/image-uploader/BannerUploader.tsx b/packages/ui/components/image-uploader/BannerUploader.tsx
index 458ae8e94d..0d364a145c 100644
--- a/packages/ui/components/image-uploader/BannerUploader.tsx
+++ b/packages/ui/components/image-uploader/BannerUploader.tsx
@@ -43,7 +43,7 @@ function CropContainer({
 
   return (
     <div className="flex flex-col items-center justify-center">
-      <div className="relative h-52 w-[40rem]">
+      <div className="relative h-52 w-160">
         <Cropper
           image={imageSrc}
           crop={crop}
@@ -150,11 +150,11 @@ export default function BannerUploader({
           {buttonMsg}
         </Button>
       </DialogTrigger>
-      <DialogContent className="sm:w-[45rem] sm:max-w-[45rem]" title={t("upload_target", { target })}>
+      <DialogContent className="sm:w-180 sm:max-w-180" title={t("upload_target", { target })}>
         <div className="mb-4">
           <div className="cropper mt-6 flex flex-col items-center justify-center p-8">
             {!result && (
-              <div className="bg-muted flex h-60 w-full items-center justify-start">
+              <div className="bg-cal-muted flex h-60 w-full items-center justify-start">
                 {!imageSrc || checkIfItFallbackImage(imageSrc) ? (
                   <p className="text-emphasis w-full text-center text-sm sm:text-xs">
                     {t("no_target", { target })}
@@ -168,7 +168,7 @@ export default function BannerUploader({
             {result && <CropContainer imageSrc={result as string} onCropComplete={setCroppedAreaPixels} />}
             <label
               data-testid="open-upload-image-filechooser"
-              className="bg-subtle hover:bg-muted hover:text-emphasis border-subtle text-default mt-8 cursor-pointer rounded-sm border px-3 py-1 text-xs font-medium leading-4 transition focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-1">
+              className="bg-subtle hover:bg-cal-muted hover:text-emphasis border-subtle text-default mt-8 cursor-pointer rounded-sm border px-3 py-1 text-xs font-medium leading-4 transition focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-1">
               <input
                 onInput={onInputFile}
                 type="file"
diff --git a/packages/ui/components/image-uploader/ImageUploader.tsx b/packages/ui/components/image-uploader/ImageUploader.tsx
index 12ab7e0c67..ee9352441d 100644
--- a/packages/ui/components/image-uploader/ImageUploader.tsx
+++ b/packages/ui/components/image-uploader/ImageUploader.tsx
@@ -142,7 +142,7 @@ export default function ImageUploader({
         <div className="mb-4">
           <div className="cropper mt-6 flex flex-col items-center justify-center p-8">
             {!result && (
-              <div className="bg-muted flex h-20 max-h-20 w-20 items-center justify-start rounded-full">
+              <div className="bg-cal-muted flex h-20 max-h-20 w-20 items-center justify-start rounded-full">
                 {!imageSrc || checkIfItFallbackImage(imageSrc) ? (
                   <p className="text-emphasis w-full text-center text-sm sm:text-xs">
                     {t("no_target", { target })}
@@ -156,7 +156,7 @@ export default function ImageUploader({
             {result && <CropContainer imageSrc={result as string} onCropComplete={setCroppedAreaPixels} />}
             <label
               data-testid={testId ? `open-upload-${testId}-filechooser` : "open-upload-image-filechooser"}
-              className="bg-subtle hover:bg-muted hover:text-emphasis border-subtle text-default mt-8 cursor-pointer rounded-sm border px-3 py-1 text-xs font-medium leading-4 transition focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-1">
+              className="bg-subtle hover:bg-cal-muted hover:text-emphasis border-subtle text-default mt-8 cursor-pointer rounded-sm border px-3 py-1 text-xs font-medium leading-4 transition focus:outline-none focus:ring-2 focus:ring-neutral-900 focus:ring-offset-1">
               <input
                 onInput={onInputFile}
                 type="file"
diff --git a/packages/ui/components/layout/ShellSubHeading.tsx b/packages/ui/components/layout/ShellSubHeading.tsx
index e70b5fe242..244e153049 100644
--- a/packages/ui/components/layout/ShellSubHeading.tsx
+++ b/packages/ui/components/layout/ShellSubHeading.tsx
@@ -16,7 +16,7 @@ export function ShellSubHeading(props: {
         </h2>
         {props.subtitle && <p className="text-subtle text-sm ltr:mr-4">{props.subtitle}</p>}
       </div>
-      {props.actions && <div className="mt-2 flex-shrink-0 sm:mt-0">{props.actions}</div>}
+      {props.actions && <div className="mt-2 shrink-0 sm:mt-0">{props.actions}</div>}
     </header>
   );
 }
diff --git a/packages/ui/components/list/List.tsx b/packages/ui/components/list/List.tsx
index c40ff7a066..31eb72a488 100644
--- a/packages/ui/components/list/List.tsx
+++ b/packages/ui/components/list/List.tsx
@@ -49,7 +49,7 @@ export function ListItem(props: ListItemProps) {
         // Pass rounded false to not round the corners -> Useful when used in list we can use roundedContainer to create the right design
         rounded ? "rounded-md" : "rounded-none",
         props.className,
-        (props.onClick || href) && "hover:bg-muted"
+        (props.onClick || href) && "hover:bg-cal-muted"
       ),
       "data-testid": "list-item",
     },
@@ -95,13 +95,13 @@ export function ListLinkItem(props: ListLinkItemProps) {
       className={classNames(
         "group flex w-full items-center justify-between p-5 pb-4",
         className,
-        disabled ? "hover:bg-muted" : ""
+        disabled ? "hover:bg-cal-muted" : ""
       )}>
       <Link
         passHref
         href={href}
         className={classNames(
-          "text-default flex-grow truncate text-sm",
+          "text-default grow truncate text-sm",
           disabled ? "pointer-events-none cursor-not-allowed opacity-30" : ""
         )}>
         <div className="flex items-center">
diff --git a/packages/ui/components/navigation/NavigationItem.tsx b/packages/ui/components/navigation/NavigationItem.tsx
index 021fbecba3..c6c96832b5 100644
--- a/packages/ui/components/navigation/NavigationItem.tsx
+++ b/packages/ui/components/navigation/NavigationItem.tsx
@@ -28,11 +28,11 @@ const navigationItemStyles = cva(
   {
     variants: {
       isChild: {
-        true: "[&[aria-current='page']]:text-emphasis [&[aria-current='page']]:bg-emphasis hidden h-8 ml-16 lg:flex lg:ml-10 relative before:absolute before:left-[-24px] before:top-[-0.5rem] before:h-[calc(100%+0.5rem)] before:w-0.5 before:bg-subtle before:content-[''] [&:first-child]:before:rounded-t-full [&:last-child]:before:rounded-b-full",
+        true: "[&[aria-current='page']]:text-emphasis [&[aria-current='page']]:bg-emphasis hidden h-8 ml-16 lg:flex lg:ml-10 relative before:absolute before:left-[-24px] before:-top-2 before:h-[calc(100%+0.5rem)] before:w-0.5 before:bg-subtle before:content-[''] first:before:rounded-t-full last:before:rounded-b-full",
         false: "[&[aria-current='page']]:text-emphasis mt-0.5 text-sm",
       },
       hasChild: {
-        true: "[&[aria-current='page']]:!bg-transparent relative after:absolute after:left-[-24px] after:top-[1.5rem] after:h-[calc(100%-1.5rem)] after:w-0.5 after:bg-subtle after:content-[''] [&:first-child]:after:rounded-t-full [&:last-child]:after:rounded-b-full",
+        true: "aria-[aria-current='page']:bg-transparent! relative after:absolute after:left-[-24px] after:top-6 after:h-[calc(100%-1.5rem)] after:w-0.5 after:bg-subtle after:content-[''] first:after:rounded-t-full last:after:rounded-b-full",
         false: "[&[aria-current='page']]:bg-subtle",
       },
       isFirstChild: {
@@ -77,7 +77,7 @@ const NavigationItemComponent = ({
           <Icon
             name={item.isLoading ? "rotate-cw" : item.icon}
             className={classNames(
-              "text-subtle mr-2 h-4 w-4 flex-shrink-0 rtl:ml-2 md:ltr:mx-auto lg:ltr:mr-2",
+              "text-subtle mr-2 h-4 w-4 shrink-0 rtl:ml-2 md:ltr:mx-auto lg:ltr:mr-2",
               item.isLoading && "animate-spin"
             )}
             aria-hidden="true"
diff --git a/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx b/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx
index efe349b5b9..c6e025d62f 100644
--- a/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx
+++ b/packages/ui/components/navigation/tabs/HorizontalTabItem.tsx
@@ -50,9 +50,9 @@ const HorizontalTabItem = function ({
       scroll={linkScroll}
       aria-disabled={props.disabled ? "true" : undefined}
       className={classNames(
-        isCurrent ? "bg-subtle text-emphasis" : "hover:bg-muted hover:text-default text-subtle",
+        isCurrent ? "bg-subtle text-emphasis" : "hover:bg-cal-muted hover:text-default text-subtle",
         "inline-flex h-fit items-center justify-center whitespace-nowrap rounded-md p-2 text-sm font-medium leading-none transition md:mb-0",
-        props.disabled && "pointer-events-none !opacity-30",
+        props.disabled && "pointer-events-none opacity-30!",
         props.className
       )}
       target={props.target ? props.target : undefined}
diff --git a/packages/ui/components/navigation/tabs/VerticalTabItem.tsx b/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
index 8f6095ef7c..7df6ff5b10 100644
--- a/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
+++ b/packages/ui/components/navigation/tabs/VerticalTabItem.tsx
@@ -64,7 +64,7 @@ const VerticalTabItem = ({
             className={classNames(
               props.textClassNames || "text-default text-sm font-medium leading-none",
               "hover:bg-subtle [&[aria-current='page']]:bg-subtle [&[aria-current='page']]:text-emphasis group-hover:text-default group flex w-full flex-row items-center rounded-md p-2 transition ",
-              props.disabled && "pointer-events-none !opacity-30",
+              props.disabled && "pointer-events-none opacity-30!",
               (isChild || !props.icon) && "ml-7",
               props.className
             )}
diff --git a/packages/ui/components/navigation/tabs/VerticalTabs.tsx b/packages/ui/components/navigation/tabs/VerticalTabs.tsx
index 15eea0c204..c6a0659308 100644
--- a/packages/ui/components/navigation/tabs/VerticalTabs.tsx
+++ b/packages/ui/components/navigation/tabs/VerticalTabs.tsx
@@ -29,7 +29,7 @@ const NavTabs = function ({
   return (
     <nav
       className={classNames(
-        `no-scrollbar flex flex-col space-y-0.5 overflow-scroll ${className}`,
+        `no-scrollbar flex flex-col stack-y-0.5 overflow-scroll ${className}`,
         sticky && "sticky top-0 -mt-7"
       )}
       style={{
diff --git a/packages/ui/components/organization-banner/OrgBanner.tsx b/packages/ui/components/organization-banner/OrgBanner.tsx
index dd4b6e299f..d88f088a94 100644
--- a/packages/ui/components/organization-banner/OrgBanner.tsx
+++ b/packages/ui/components/organization-banner/OrgBanner.tsx
@@ -18,7 +18,7 @@ export function OrgBanner(props: OrgBannerProps) {
   const { imageSrc, alt, width = 1500, height = 500 } = props;
 
   if (!imageSrc) {
-    return <div className={classNames("bg-muted", props.className)}>{props.fallback}</div>;
+    return <div className={classNames("bg-cal-muted", props.className)}>{props.fallback}</div>;
   }
   return (
     <Image
diff --git a/packages/ui/components/popover/MeetingTimeInTimezones.tsx b/packages/ui/components/popover/MeetingTimeInTimezones.tsx
index ed9507cc7d..2d71c87076 100644
--- a/packages/ui/components/popover/MeetingTimeInTimezones.tsx
+++ b/packages/ui/components/popover/MeetingTimeInTimezones.tsx
@@ -80,7 +80,7 @@ const MeetingTimeInTimezones = ({
               <span className="inline-flex align-baseline">
                 {time.startTime} - {time.endTime}
                 {(time.isNextDay || time.isPreviousDay) && (
-                  <span className="text-medium bg-muted text-emphasis ml-2 inline-flex h-5 w-5 items-center justify-center rounded-full text-[10px]">
+                  <span className="text-medium bg-cal-muted text-emphasis ml-2 inline-flex h-5 w-5 items-center justify-center rounded-full text-[10px]">
                     {time.isNextDay ? "+1" : "-1"}
                   </span>
                 )}
diff --git a/packages/ui/components/radio/Radio.tsx b/packages/ui/components/radio/Radio.tsx
index a2e0fd717f..6a015cd057 100644
--- a/packages/ui/components/radio/Radio.tsx
+++ b/packages/ui/components/radio/Radio.tsx
@@ -13,7 +13,7 @@ export const Radio = (props: RadioGroupPrimitive.RadioGroupItemProps & { childre
   <RadioGroupPrimitive.Item
     {...props}
     className={classNames(
-      "hover:bg-subtle border-default dark:checked:bg-brand-default dark:hover:bg-subtle dark:checked:hover:bg-brand-default focus:ring-brand-default hover:border-emphasis me-1.5 mt-0.5 h-4 w-4 flex-shrink-0 rounded-full border text-[--cal-brand] transition focus:border-0 focus:ring-1",
+      "hover:bg-subtle border-default dark:checked:bg-brand-default dark:hover:bg-subtle dark:checked:hover:bg-brand-default focus:ring-brand-default hover:border-emphasis me-1.5 mt-0.5 h-4 w-4 shrink-0 rounded-full border text-(--cal-brand) transition focus:border-0 focus:ring-1 data-[state=checked]:border-brand-default",
       props.disabled && "opacity-60"
     )}>
     {props.children}
@@ -23,7 +23,7 @@ export const Indicator = ({ disabled }: { disabled?: boolean }) => (
   <RadioGroupPrimitive.Indicator
     className={classNames(
       "after:bg-default dark:after:bg-brand-accent relative flex h-full w-full items-center justify-center rounded-full bg-black after:h-[6px] after:w-[6px] after:rounded-full after:content-['']",
-      disabled ? "after:bg-muted" : "bg-brand-default"
+      disabled ? "after:bg-cal-muted" : "bg-brand-default"
     )}
   />
 );
diff --git a/packages/ui/components/radio/RadioAreaGroup.tsx b/packages/ui/components/radio/RadioAreaGroup.tsx
index 50a8201e15..15cf5c6b14 100644
--- a/packages/ui/components/radio/RadioAreaGroup.tsx
+++ b/packages/ui/components/radio/RadioAreaGroup.tsx
@@ -23,13 +23,13 @@ const RadioArea = ({ children, className, classNames: innerClassNames, ...props
         id={id}
         {...props}
         className={classNames(
-          "hover:bg-subtle disabled:hover:bg-default border-default focus:ring-emphasis absolute left-3 top-[0.9rem] mt-0.5 h-4 w-4 flex-shrink-0 rounded-full border transition focus:ring-2 disabled:cursor-not-allowed",
+          "hover:bg-subtle disabled:hover:bg-default border-default focus:ring-emphasis absolute left-3 top-[0.9rem] mt-0.5 h-4 w-4 shrink-0 rounded-full border transition focus:ring-2 disabled:cursor-not-allowed",
           props.disabled && "opacity-60"
         )}>
         <RadioGroupPrimitive.Indicator
           className={classNames(
             "after:bg-default dark:after:bg-inverted relative flex h-full w-full items-center justify-center rounded-full bg-black after:h-[6px] after:w-[6px] after:rounded-full after:content-['']",
-            props.disabled ? "after:bg-muted" : "bg-black"
+            props.disabled ? "after:bg-cal-muted" : "bg-black"
           )}
         />
       </RadioGroupPrimitive.Item>
diff --git a/packages/ui/components/section/section.tsx b/packages/ui/components/section/section.tsx
index 4161c93d28..bea97f8cb4 100644
--- a/packages/ui/components/section/section.tsx
+++ b/packages/ui/components/section/section.tsx
@@ -17,7 +17,7 @@ const Root = ({
   const [animateRef] = useAutoAnimate<HTMLDivElement>();
 
   return (
-    <div ref={animateRef} className={cn("bg-muted flex flex-col gap-4 rounded-2xl p-4", className)}>
+    <div ref={animateRef} className={cn("bg-cal-muted flex flex-col gap-4 rounded-2xl p-4", className)}>
       {children}
     </div>
   );
@@ -195,7 +195,7 @@ const SubSectionContent = ({
     <div
       ref={ref}
       className={cn(
-        "bg-muted flex flex-col rounded-lg px-[6px] py-1",
+        "bg-cal-muted flex flex-col rounded-lg px-[6px] py-1",
         invert && "bg-default border-subtle border",
         classNames?.container
       )}>
diff --git a/packages/ui/components/skeleton/Skeleton.tsx b/packages/ui/components/skeleton/Skeleton.tsx
index 49cfdcb7cd..f8c07292cb 100644
--- a/packages/ui/components/skeleton/Skeleton.tsx
+++ b/packages/ui/components/skeleton/Skeleton.tsx
@@ -103,7 +103,7 @@ const SelectSkeletonLoader: React.FC<SkeletonLoaderProps> = ({ className }) => {
         "border-subtle group flex w-full items-center justify-between rounded-sm border px-[10px] py-3",
         className
       )}>
-      <div className="flex-grow truncate text-sm">
+      <div className="grow truncate text-sm">
         <div className="flex justify-between">
           <SkeletonText className="h-4 w-32" />
           <SkeletonText className="h-4 w-4" />
diff --git a/packages/ui/components/table/TableNew.tsx b/packages/ui/components/table/TableNew.tsx
index 006b7e8ea3..d4443ef683 100644
--- a/packages/ui/components/table/TableNew.tsx
+++ b/packages/ui/components/table/TableNew.tsx
@@ -39,7 +39,7 @@ const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTML
     <tr
       ref={ref}
       className={classNames(
-        "hover:bg-muted data-[state=selected]:bg-subtle border-subtle border-b transition",
+        "hover:bg-cal-muted data-[state=selected]:bg-subtle border-subtle border-b transition",
         className
       )}
       {...props}
diff --git a/packages/ui/components/toast/ProgressToast.tsx b/packages/ui/components/toast/ProgressToast.tsx
index 3b5065a297..3d25cc1cd9 100644
--- a/packages/ui/components/toast/ProgressToast.tsx
+++ b/packages/ui/components/toast/ProgressToast.tsx
@@ -17,7 +17,7 @@ export const ProgressToast = ({ message, progress, onClose, toastId }: ProgressT
   const defaultMessage = t("downloading");
 
   return (
-    <div className="animate-fade-in-up bg-subtle shadow-elevation-low border-subtle mb-2 flex h-auto flex-col space-y-2 rounded-lg border px-3 py-2.5 text-sm font-semibold md:max-w-sm">
+    <div className="animate-fade-in-up bg-subtle shadow-elevation-low border-subtle mb-2 flex h-auto flex-col stack-y-2 rounded-lg border px-3 py-2.5 text-sm font-semibold md:max-w-sm">
       <div className="flex items-center gap-2">
         <span className="mt-0.5">
           <Icon name="file-down" className="h-4 w-4" />
diff --git a/packages/ui/components/tooltip/Tooltip.tsx b/packages/ui/components/tooltip/Tooltip.tsx
index 991ac85541..1612777537 100644
--- a/packages/ui/components/tooltip/Tooltip.tsx
+++ b/packages/ui/components/tooltip/Tooltip.tsx
@@ -31,7 +31,7 @@ export function Tooltip({
         side === "top" && "-mt-7",
         side === "left" && "mr-2",
         side === "right" && "ml-2",
-        "bg-inverted text-inverted relative z-50 rounded-md px-2 py-1 text-xs font-semibold shadow-lg",
+        "bg-inverted text-inverted relative z-50 rounded-sm px-2 py-1 text-xs font-semibold shadow-lg",
         props.className && `${props.className}`
       )}
       side={side}
diff --git a/packages/ui/components/top-banner/TopBanner.tsx b/packages/ui/components/top-banner/TopBanner.tsx
index bbe05204cc..4fc4cdcaa2 100644
--- a/packages/ui/components/top-banner/TopBanner.tsx
+++ b/packages/ui/components/top-banner/TopBanner.tsx
@@ -14,7 +14,7 @@ export type TopBannerProps = {
 };
 
 const variantClassName = {
-  default: "bg-gradient-primary",
+  default: "[background-image:radial-gradient(162.05%_170%_at_109.58%_35%,_#667593_0%,_#E3E3E3_100%)]",
   warning: "bg-orange-400",
   error: "bg-red-400",
 };
diff --git a/yarn.lock b/yarn.lock
index c811cf7369..22ad0bfdbc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2284,6 +2284,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.28.4":
+  version: 7.28.4
+  resolution: "@babel/runtime@npm:7.28.4"
+  checksum: 934b0a0460f7d06637d93fcd1a44ac49adc33518d17253b5a0b55ff4cb90a45d8fe78bf034b448911dbec7aff2a90b918697559f78d21c99ff8dbadae9565b55
+  languageName: node
+  linkType: hard
+
 "@babel/template@npm:^7.18.10, @babel/template@npm:^7.20.7, @babel/template@npm:^7.26.9, @babel/template@npm:^7.27.0":
   version: 7.27.0
   resolution: "@babel/template@npm:7.27.0"
@@ -2555,6 +2562,47 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@base-ui-components/react@npm:^1.0.0-beta.4":
+  version: 1.0.0-beta.4
+  resolution: "@base-ui-components/react@npm:1.0.0-beta.4"
+  dependencies:
+    "@babel/runtime": ^7.28.4
+    "@base-ui-components/utils": 0.1.2
+    "@floating-ui/react-dom": ^2.1.6
+    "@floating-ui/utils": ^0.2.10
+    reselect: ^5.1.1
+    tabbable: ^6.2.0
+    use-sync-external-store: ^1.5.0
+  peerDependencies:
+    "@types/react": ^17 || ^18 || ^19
+    react: ^17 || ^18 || ^19
+    react-dom: ^17 || ^18 || ^19
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 591dc4359e18b9a02f693c11adc2952aeed4746c3a144b758454276a47221bf5ea61830de4da507ad8a275490040e7ea5a78266f325226e5c23b727b3ef6b7ff
+  languageName: node
+  linkType: hard
+
+"@base-ui-components/utils@npm:0.1.2":
+  version: 0.1.2
+  resolution: "@base-ui-components/utils@npm:0.1.2"
+  dependencies:
+    "@babel/runtime": ^7.28.4
+    "@floating-ui/utils": ^0.2.10
+    reselect: ^5.1.1
+    use-sync-external-store: ^1.5.0
+  peerDependencies:
+    "@types/react": ^17 || ^18 || ^19
+    react: ^17 || ^18 || ^19
+    react-dom: ^17 || ^18 || ^19
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: b5213da6b1ede5cb27bd61b2b602ee3812a770b4a9a5a58ea571806b8656ea28fc14b7b2916402c0189a354348d3ac8cc4ae4c2a468530cc9a5003ad3e24d4dc
+  languageName: node
+  linkType: hard
+
 "@base2/pretty-print-object@npm:1.0.1":
   version: 1.0.1
   resolution: "@base2/pretty-print-object@npm:1.0.1"
@@ -2880,6 +2928,8 @@ __metadata:
     "@radix-ui/react-toast": ^1.1.5
     "@radix-ui/react-tooltip-atoms": "npm:@radix-ui/react-tooltip@^1.0.0"
     "@rollup/plugin-node-resolve": ^15.0.1
+    "@tailwindcss/cli": ^4.0.0
+    "@tailwindcss/postcss": ^4.0.0
     "@tanstack/react-query": ^5.17.15
     "@types/jest": ^29.5.12
     "@types/node": ^20.3.1
@@ -2900,8 +2950,7 @@ __metadata:
     react-use: ^17.4.2
     rollup-plugin-node-builtins: ^2.1.2
     tailwind-merge: ^1.13.2
-    tailwindcss: ^3.3.3
-    tailwindcss-animate: ^1.0.6
+    tailwindcss: ^4
     ts-jest: ^29.1.2
     typescript: ^5.9.0-beta
     vite: ^5.0.10
@@ -2949,10 +2998,10 @@ __metadata:
     "@calcom/eslint-config": "workspace:*"
     "@playwright/test": ^1.45.3
     "@prisma/client": 6.7.0
+    "@tailwindcss/postcss": ^4.0.0
     "@types/node": ^20.3.1
     "@types/react": ^18
     "@types/react-dom": ^18
-    autoprefixer: ^10.0.1
     dotenv: ^17.2.1
     next: 14.0.4
     postcss: ^8
@@ -2960,7 +3009,7 @@ __metadata:
     react: ^18
     react-dom: ^18
     react-select: ^5.8.0
-    tailwindcss: ^3.3.0
+    tailwindcss: ^4.0.0
     typescript: ^5.9.0-beta
   languageName: unknown
   linkType: soft
@@ -3046,9 +3095,7 @@ __metadata:
   resolution: "@calcom/config@workspace:packages/config"
   dependencies:
     "@calcom/eslint-plugin-eslint": "workspace:*"
-    "@savvywombat/tailwindcss-grid-areas": ^3.0.0
-    "@tailwindcss/forms": ^0.5.2
-    "@tailwindcss/line-clamp": ^0.4.0
+    "@tailwindcss/forms": ^0.5.10
     "@tailwindcss/typography": ^0.5.4
     "@todesktop/tailwind-variants": ^1.0.0
     "@trivago/prettier-plugin-sort-imports": 4.1.1
@@ -3061,8 +3108,9 @@ __metadata:
     eslint-plugin-prettier: ^4.2.1
     prettier: ^2.8.6
     prettier-plugin-tailwindcss: ^0.2.5
-    tailwind-scrollbar: ^2.0.1
-    tailwindcss: ^3.3.3
+    tailwind-scrollbar: ^4.0.2
+    tailwindcss-radix: ^4.0.2
+    tw-animate-css: ^1.4.0
     typescript: ^5.9.0-beta
   languageName: unknown
   linkType: soft
@@ -3209,11 +3257,13 @@ __metadata:
   resolution: "@calcom/embed-core@workspace:packages/embeds/embed-core"
   dependencies:
     "@playwright/test": ^1.45.3
+    "@tailwindcss/cli": ^4.0.0
+    "@tailwindcss/postcss": ^4.0.0
     "@vitejs/plugin-basic-ssl": ^1.1.0
     autoprefixer: ^10.4.12
     npm-run-all: ^4.1.5
     postcss: ^8.4.18
-    tailwindcss: ^3.3.3
+    tailwindcss: ^4
     typescript: ^5.9.0-beta
     vite: ^4.1.2
     vite-plugin-environment: ^1.1.3
@@ -4237,6 +4287,7 @@ __metadata:
     "@calcom/tsconfig": "workspace:*"
     "@calcom/types": "workspace:*"
     "@calcom/ui": "workspace:*"
+    "@coss/ui": "workspace:*"
     "@daily-co/daily-js": ^0.83.1
     "@daily-co/daily-react": ^0.23.2
     "@dub/analytics": ^0.0.27
@@ -4269,6 +4320,7 @@ __metadata:
     "@sentry/nextjs": ^9.15.0
     "@stripe/react-stripe-js": ^1.10.0
     "@stripe/stripe-js": ^1.35.0
+    "@tailwindcss/postcss": ^4.0.0
     "@tanstack/react-query": ^5.17.15
     "@testing-library/react": ^13.3.0
     "@todesktop/client-core": ^1.20.0
@@ -4378,9 +4430,7 @@ __metadata:
     sonner: ^1.7.4
     stripe: ^9.16.0
     superjson: 1.9.1
-    tailwindcss: ^3.3.3
-    tailwindcss-animate: ^1.0.6
-    tailwindcss-radix: ^2.6.0
+    tailwindcss: ^4
     ts-node: ^10.9.1
     turbo: ^2.5.5
     turndown: ^7.1.3
@@ -4779,6 +4829,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@coss/ui@workspace:*, @coss/ui@workspace:packages/coss-ui":
+  version: 0.0.0-use.local
+  resolution: "@coss/ui@workspace:packages/coss-ui"
+  dependencies:
+    "@base-ui-components/react": ^1.0.0-beta.4
+    class-variance-authority: ^0.4.0
+    clsx: ^2.0.0
+    tailwind-merge: ^2.0.0
+  languageName: unknown
+  linkType: soft
+
 "@cspotcode/source-map-support@npm:^0.8.0":
   version: 0.8.1
   resolution: "@cspotcode/source-map-support@npm:0.8.1"
@@ -4970,6 +5031,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emnapi/core@npm:^1.5.0":
+  version: 1.6.0
+  resolution: "@emnapi/core@npm:1.6.0"
+  dependencies:
+    "@emnapi/wasi-threads": 1.1.0
+    tslib: ^2.4.0
+  checksum: ab7e93b4ed5f1fa882b963855fa982c570fe82bf01f75c0b0b6ecaa5e4a6d3cd1cdfcd0f0654da0a1b51b4a582cf3b97f8966315b22973011fe76b29fe09a206
+  languageName: node
+  linkType: hard
+
 "@emnapi/runtime@npm:^1.2.0":
   version: 1.4.0
   resolution: "@emnapi/runtime@npm:1.4.0"
@@ -4997,7 +5068,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emnapi/wasi-threads@npm:1.1.0":
+"@emnapi/runtime@npm:^1.5.0":
+  version: 1.6.0
+  resolution: "@emnapi/runtime@npm:1.6.0"
+  dependencies:
+    tslib: ^2.4.0
+  checksum: c9105ad19a9920c166b81bc513ebcbb18480a752857f789032c455017b0ce458a37a54d9a24358a22416fa34dd412518be675a674e4cfff516a0b54c12e50dc3
+  languageName: node
+  linkType: hard
+
+"@emnapi/wasi-threads@npm:1.1.0, @emnapi/wasi-threads@npm:^1.1.0":
   version: 1.1.0
   resolution: "@emnapi/wasi-threads@npm:1.1.0"
   dependencies:
@@ -5993,6 +6073,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/core@npm:^1.7.3":
+  version: 1.7.3
+  resolution: "@floating-ui/core@npm:1.7.3"
+  dependencies:
+    "@floating-ui/utils": ^0.2.10
+  checksum: 5adfb28ddfa1776ec83516439256b9026e5d62b5413f62ae51e50a870cf0df4bea9abf72aacc0610ee84bc00e85883d0d32f2a0976ee7fa89728a717a7494f27
+  languageName: node
+  linkType: hard
+
 "@floating-ui/dom@npm:^1.0.1":
   version: 1.2.6
   resolution: "@floating-ui/dom@npm:1.2.6"
@@ -6021,6 +6110,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/dom@npm:^1.7.4":
+  version: 1.7.4
+  resolution: "@floating-ui/dom@npm:1.7.4"
+  dependencies:
+    "@floating-ui/core": ^1.7.3
+    "@floating-ui/utils": ^0.2.10
+  checksum: 806923e6f5b09e024c366070f2115a4db6e8ad28462bac29cd075170a6f7d900497da3ee542439bd0770b8e2fff12b636cc30873d1c82e9ec4a487870b080643
+  languageName: node
+  linkType: hard
+
 "@floating-ui/react-dom@npm:^2.0.0":
   version: 2.0.1
   resolution: "@floating-ui/react-dom@npm:2.0.1"
@@ -6033,6 +6132,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/react-dom@npm:^2.1.6":
+  version: 2.1.6
+  resolution: "@floating-ui/react-dom@npm:2.1.6"
+  dependencies:
+    "@floating-ui/dom": ^1.7.4
+  peerDependencies:
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: 24ff266806cd4cba6ad066f0eda7b99583f68af877f41df0b2a8d10a392692e3a1c1d666ebb75571a060818ede940bae59d833aa517ed538f7dba9dddd9991ae
+  languageName: node
+  linkType: hard
+
+"@floating-ui/utils@npm:^0.2.10":
+  version: 0.2.10
+  resolution: "@floating-ui/utils@npm:0.2.10"
+  checksum: ffc4c24a46a665cfd0337e9aaf7de8415b572f8a0f323af39175e4b575582aed13d172e7f049eedeece9eaf022bad019c140a2d192580451984ae529bdf1285c
+  languageName: node
+  linkType: hard
+
 "@floating-ui/utils@npm:^0.2.9":
   version: 0.2.9
   resolution: "@floating-ui/utils@npm:0.2.9"
@@ -8364,7 +8482,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jridgewell/remapping@npm:^2.3.5":
+"@jridgewell/remapping@npm:^2.3.4, @jridgewell/remapping@npm:^2.3.5":
   version: 2.3.5
   resolution: "@jridgewell/remapping@npm:2.3.5"
   dependencies:
@@ -9156,6 +9274,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@napi-rs/wasm-runtime@npm:^1.0.7":
+  version: 1.0.7
+  resolution: "@napi-rs/wasm-runtime@npm:1.0.7"
+  dependencies:
+    "@emnapi/core": ^1.5.0
+    "@emnapi/runtime": ^1.5.0
+    "@tybys/wasm-util": ^0.10.1
+  checksum: 9b59bd8b7310936ed163935befae0613dfffd563e7ff021d4f1b62b419fb0e3395f7206b17460a91db555bea6c471408f3472455e4e2ca9f5a0bff4468fa38d0
+  languageName: node
+  linkType: hard
+
 "@nest-lab/throttler-storage-redis@npm:1.0.0":
   version: 1.0.0
   resolution: "@nest-lab/throttler-storage-redis@npm:1.0.0"
@@ -14469,17 +14598,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@savvywombat/tailwindcss-grid-areas@npm:^3.0.0":
-  version: 3.0.1
-  resolution: "@savvywombat/tailwindcss-grid-areas@npm:3.0.1"
-  dependencies:
-    lodash: ^4.17.21
-  peerDependencies:
-    tailwindcss: ^3.0.1
-  checksum: 016672a0585b2b1bdd0ae2f8ed821d634d2a5ba7ea26484adbc8cd38499366be80c6e338cd93d8c25cf6e29a8f33293eb7e24ff68184bea3b36ea27b9884dbb1
-  languageName: node
-  linkType: hard
-
 "@scure/base@npm:1.1.1":
   version: 1.1.1
   resolution: "@scure/base@npm:1.1.1"
@@ -16085,23 +16203,346 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tailwindcss/forms@npm:^0.5.2":
-  version: 0.5.2
-  resolution: "@tailwindcss/forms@npm:0.5.2"
+"@tailwindcss/cli@npm:^4.0.0":
+  version: 4.1.16
+  resolution: "@tailwindcss/cli@npm:4.1.16"
   dependencies:
-    mini-svg-data-uri: ^1.2.3
-  peerDependencies:
-    tailwindcss: ">=3.0.0 || >= 3.0.0-alpha.1"
-  checksum: 3c4df23491d14b37d8cef88d0f3df80f92b684b801d59c23d600773a4ccac11353a555ca36bea68ae4a82134f9c030d1353c05890a5f0085c1c40c649f806640
+    "@parcel/watcher": ^2.5.1
+    "@tailwindcss/node": 4.1.16
+    "@tailwindcss/oxide": 4.1.16
+    enhanced-resolve: ^5.18.3
+    mri: ^1.2.0
+    picocolors: ^1.1.1
+    tailwindcss: 4.1.16
+  bin:
+    tailwindcss: dist/index.mjs
+  checksum: f8938c96ab10a39808894bea00d4eb6a2138d6b43969a25d9b41eccca6d9d2194047945bc5b779abb7f9357d1b7c5b1e7cf2c77383e4788b125640203e46e104
   languageName: node
   linkType: hard
 
-"@tailwindcss/line-clamp@npm:^0.4.0":
-  version: 0.4.0
-  resolution: "@tailwindcss/line-clamp@npm:0.4.0"
+"@tailwindcss/forms@npm:^0.5.10":
+  version: 0.5.10
+  resolution: "@tailwindcss/forms@npm:0.5.10"
+  dependencies:
+    mini-svg-data-uri: ^1.2.3
   peerDependencies:
-    tailwindcss: ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
-  checksum: 71ba25a4a18323496a7af34e55871121b8459530b0e5696c4173fd65a76162675619f1d1158a8a32e1ace2069333949bef6f1061b17f49fef98dc2291a979dcd
+    tailwindcss: ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1"
+  checksum: 4526d02edccc4e44599d9588f83e4ac3e9435d137da5638653de2e74d5b612ade449a8c26d075be21692c1ac00a514aaffdb6723e526e3c8314c9a75a9f45979
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/node@npm:4.1.15":
+  version: 4.1.15
+  resolution: "@tailwindcss/node@npm:4.1.15"
+  dependencies:
+    "@jridgewell/remapping": ^2.3.4
+    enhanced-resolve: ^5.18.3
+    jiti: ^2.6.0
+    lightningcss: 1.30.2
+    magic-string: ^0.30.19
+    source-map-js: ^1.2.1
+    tailwindcss: 4.1.15
+  checksum: a18364d522f33c95036b06684220b694c9fd3a1a4fd0f2ecb178e39bba5559347faf21c35f5211f6ca471b2eb0e2b0c5dca4923f4af17ad33cb59eb84a20b687
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/node@npm:4.1.16":
+  version: 4.1.16
+  resolution: "@tailwindcss/node@npm:4.1.16"
+  dependencies:
+    "@jridgewell/remapping": ^2.3.4
+    enhanced-resolve: ^5.18.3
+    jiti: ^2.6.1
+    lightningcss: 1.30.2
+    magic-string: ^0.30.19
+    source-map-js: ^1.2.1
+    tailwindcss: 4.1.16
+  checksum: 53424e5c9fe7cc793f1eef4daaeabc2b5f79e4175e8f9ccfd25c27df1ec406d3143f18cf541c011dba0c66c3a963f81a900375db12ce38b4a2f7c9dfdfdc3444
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-android-arm64@npm:4.1.15":
+  version: 4.1.15
+  resolution: "@tailwindcss/oxide-android-arm64@npm:4.1.15"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-android-arm64@npm:4.1.16":
+  version: 4.1.16
+  resolution: "@tailwindcss/oxide-android-arm64@npm:4.1.16"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-darwin-arm64@npm:4.1.15":
+  version: 4.1.15
+  resolution: "@tailwindcss/oxide-darwin-arm64@npm:4.1.15"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-darwin-arm64@npm:4.1.16":
+  version: 4.1.16
+  resolution: "@tailwindcss/oxide-darwin-arm64@npm:4.1.16"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-darwin-x64@npm:4.1.15":
+  version: 4.1.15
+  resolution: "@tailwindcss/oxide-darwin-x64@npm:4.1.15"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-darwin-x64@npm:4.1.16":
+  version: 4.1.16
+  resolution: "@tailwindcss/oxide-darwin-x64@npm:4.1.16"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-freebsd-x64@npm:4.1.15":
+  version: 4.1.15
+  resolution: "@tailwindcss/oxide-freebsd-x64@npm:4.1.15"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-freebsd-x64@npm:4.1.16":
+  version: 4.1.16
+  resolution: "@tailwindcss/oxide-freebsd-x64@npm:4.1.16"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm-gnueabihf@npm:4.1.15":
+  version: 4.1.15
+  resolution: "@tailwindcss/oxide-linux-arm-gnueabihf@npm:4.1.15"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm-gnueabihf@npm:4.1.16":
+  version: 4.1.16
+  resolution: "@tailwindcss/oxide-linux-arm-gnueabihf@npm:4.1.16"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm64-gnu@npm:4.1.15":
+  version: 4.1.15
+  resolution: "@tailwindcss/oxide-linux-arm64-gnu@npm:4.1.15"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm64-gnu@npm:4.1.16":
+  version: 4.1.16
+  resolution: "@tailwindcss/oxide-linux-arm64-gnu@npm:4.1.16"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm64-musl@npm:4.1.15":
+  version: 4.1.15
+  resolution: "@tailwindcss/oxide-linux-arm64-musl@npm:4.1.15"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-arm64-musl@npm:4.1.16":
+  version: 4.1.16
+  resolution: "@tailwindcss/oxide-linux-arm64-musl@npm:4.1.16"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-x64-gnu@npm:4.1.15":
+  version: 4.1.15
+  resolution: "@tailwindcss/oxide-linux-x64-gnu@npm:4.1.15"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-x64-gnu@npm:4.1.16":
+  version: 4.1.16
+  resolution: "@tailwindcss/oxide-linux-x64-gnu@npm:4.1.16"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-x64-musl@npm:4.1.15":
+  version: 4.1.15
+  resolution: "@tailwindcss/oxide-linux-x64-musl@npm:4.1.15"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-linux-x64-musl@npm:4.1.16":
+  version: 4.1.16
+  resolution: "@tailwindcss/oxide-linux-x64-musl@npm:4.1.16"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-wasm32-wasi@npm:4.1.15":
+  version: 4.1.15
+  resolution: "@tailwindcss/oxide-wasm32-wasi@npm:4.1.15"
+  dependencies:
+    "@emnapi/core": ^1.5.0
+    "@emnapi/runtime": ^1.5.0
+    "@emnapi/wasi-threads": ^1.1.0
+    "@napi-rs/wasm-runtime": ^1.0.7
+    "@tybys/wasm-util": ^0.10.1
+    tslib: ^2.4.0
+  conditions: cpu=wasm32
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-wasm32-wasi@npm:4.1.16":
+  version: 4.1.16
+  resolution: "@tailwindcss/oxide-wasm32-wasi@npm:4.1.16"
+  dependencies:
+    "@emnapi/core": ^1.5.0
+    "@emnapi/runtime": ^1.5.0
+    "@emnapi/wasi-threads": ^1.1.0
+    "@napi-rs/wasm-runtime": ^1.0.7
+    "@tybys/wasm-util": ^0.10.1
+    tslib: ^2.4.0
+  conditions: cpu=wasm32
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-win32-arm64-msvc@npm:4.1.15":
+  version: 4.1.15
+  resolution: "@tailwindcss/oxide-win32-arm64-msvc@npm:4.1.15"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-win32-arm64-msvc@npm:4.1.16":
+  version: 4.1.16
+  resolution: "@tailwindcss/oxide-win32-arm64-msvc@npm:4.1.16"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-win32-x64-msvc@npm:4.1.15":
+  version: 4.1.15
+  resolution: "@tailwindcss/oxide-win32-x64-msvc@npm:4.1.15"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide-win32-x64-msvc@npm:4.1.16":
+  version: 4.1.16
+  resolution: "@tailwindcss/oxide-win32-x64-msvc@npm:4.1.16"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide@npm:4.1.15":
+  version: 4.1.15
+  resolution: "@tailwindcss/oxide@npm:4.1.15"
+  dependencies:
+    "@tailwindcss/oxide-android-arm64": 4.1.15
+    "@tailwindcss/oxide-darwin-arm64": 4.1.15
+    "@tailwindcss/oxide-darwin-x64": 4.1.15
+    "@tailwindcss/oxide-freebsd-x64": 4.1.15
+    "@tailwindcss/oxide-linux-arm-gnueabihf": 4.1.15
+    "@tailwindcss/oxide-linux-arm64-gnu": 4.1.15
+    "@tailwindcss/oxide-linux-arm64-musl": 4.1.15
+    "@tailwindcss/oxide-linux-x64-gnu": 4.1.15
+    "@tailwindcss/oxide-linux-x64-musl": 4.1.15
+    "@tailwindcss/oxide-wasm32-wasi": 4.1.15
+    "@tailwindcss/oxide-win32-arm64-msvc": 4.1.15
+    "@tailwindcss/oxide-win32-x64-msvc": 4.1.15
+  dependenciesMeta:
+    "@tailwindcss/oxide-android-arm64":
+      optional: true
+    "@tailwindcss/oxide-darwin-arm64":
+      optional: true
+    "@tailwindcss/oxide-darwin-x64":
+      optional: true
+    "@tailwindcss/oxide-freebsd-x64":
+      optional: true
+    "@tailwindcss/oxide-linux-arm-gnueabihf":
+      optional: true
+    "@tailwindcss/oxide-linux-arm64-gnu":
+      optional: true
+    "@tailwindcss/oxide-linux-arm64-musl":
+      optional: true
+    "@tailwindcss/oxide-linux-x64-gnu":
+      optional: true
+    "@tailwindcss/oxide-linux-x64-musl":
+      optional: true
+    "@tailwindcss/oxide-wasm32-wasi":
+      optional: true
+    "@tailwindcss/oxide-win32-arm64-msvc":
+      optional: true
+    "@tailwindcss/oxide-win32-x64-msvc":
+      optional: true
+  checksum: b94fb9809aa631d9e3bba13747688cb1b21d1de483cc17ce3d0f17259f55a55021e745813bc6dc9ce8b3e0cb36a357978d6dcfd03986d1d0a1d908f4faf6f6c8
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/oxide@npm:4.1.16":
+  version: 4.1.16
+  resolution: "@tailwindcss/oxide@npm:4.1.16"
+  dependencies:
+    "@tailwindcss/oxide-android-arm64": 4.1.16
+    "@tailwindcss/oxide-darwin-arm64": 4.1.16
+    "@tailwindcss/oxide-darwin-x64": 4.1.16
+    "@tailwindcss/oxide-freebsd-x64": 4.1.16
+    "@tailwindcss/oxide-linux-arm-gnueabihf": 4.1.16
+    "@tailwindcss/oxide-linux-arm64-gnu": 4.1.16
+    "@tailwindcss/oxide-linux-arm64-musl": 4.1.16
+    "@tailwindcss/oxide-linux-x64-gnu": 4.1.16
+    "@tailwindcss/oxide-linux-x64-musl": 4.1.16
+    "@tailwindcss/oxide-wasm32-wasi": 4.1.16
+    "@tailwindcss/oxide-win32-arm64-msvc": 4.1.16
+    "@tailwindcss/oxide-win32-x64-msvc": 4.1.16
+  dependenciesMeta:
+    "@tailwindcss/oxide-android-arm64":
+      optional: true
+    "@tailwindcss/oxide-darwin-arm64":
+      optional: true
+    "@tailwindcss/oxide-darwin-x64":
+      optional: true
+    "@tailwindcss/oxide-freebsd-x64":
+      optional: true
+    "@tailwindcss/oxide-linux-arm-gnueabihf":
+      optional: true
+    "@tailwindcss/oxide-linux-arm64-gnu":
+      optional: true
+    "@tailwindcss/oxide-linux-arm64-musl":
+      optional: true
+    "@tailwindcss/oxide-linux-x64-gnu":
+      optional: true
+    "@tailwindcss/oxide-linux-x64-musl":
+      optional: true
+    "@tailwindcss/oxide-wasm32-wasi":
+      optional: true
+    "@tailwindcss/oxide-win32-arm64-msvc":
+      optional: true
+    "@tailwindcss/oxide-win32-x64-msvc":
+      optional: true
+  checksum: 510b3f56038ae3eed3b7a047102730a7651a08ea27a90fa0964211cf88610fae36671baf19ae8e012533bbe3fd99cb6eb6ddecdef77862e572ca8c1ef378e0d3
+  languageName: node
+  linkType: hard
+
+"@tailwindcss/postcss@npm:^4.0.0":
+  version: 4.1.15
+  resolution: "@tailwindcss/postcss@npm:4.1.15"
+  dependencies:
+    "@alloc/quick-lru": ^5.2.0
+    "@tailwindcss/node": 4.1.15
+    "@tailwindcss/oxide": 4.1.15
+    postcss: ^8.4.41
+    tailwindcss: 4.1.15
+  checksum: 46ce62ffd06e2608dd787c34f9862ef2da14d380fb4fa54105573c535988a037230d5ab2e10718c506d4dff92120a832e979bd41420fe0ae09dd5ddc19ae8fd1
   languageName: node
   linkType: hard
 
@@ -16465,7 +16906,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tybys/wasm-util@npm:^0.10.0":
+"@tybys/wasm-util@npm:^0.10.0, @tybys/wasm-util@npm:^0.10.1":
   version: 0.10.1
   resolution: "@tybys/wasm-util@npm:0.10.1"
   dependencies:
@@ -17363,6 +17804,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/prismjs@npm:^1.26.0":
+  version: 1.26.5
+  resolution: "@types/prismjs@npm:1.26.5"
+  checksum: d208b04ee9b6de6b2dc916439a81baa47e64ab3659a66d3d34bc3e42faccba9d4b26f590d76f97f7978d1dfaafa0861f81172b1e3c68696dd7a42d73aaaf5b7b
+  languageName: node
+  linkType: hard
+
 "@types/prop-types@npm:*":
   version: 15.7.5
   resolution: "@types/prop-types@npm:15.7.5"
@@ -24676,6 +25124,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"enhanced-resolve@npm:^5.18.3":
+  version: 5.18.3
+  resolution: "enhanced-resolve@npm:5.18.3"
+  dependencies:
+    graceful-fs: ^4.2.4
+    tapable: ^2.2.0
+  checksum: e2b2188a7f9b68616984b5ce1f43b97bef3c5fde4d193c24ea4cfdb4eb784a700093f049f14155733a3cb3ae1204550590aa37dda7e742022c8f447f618a4816
+  languageName: node
+  linkType: hard
+
 "enhanced-resolve@npm:^5.7.0":
   version: 5.9.2
   resolution: "enhanced-resolve@npm:5.9.2"
@@ -26723,19 +27181,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-glob@npm:^3.2.12":
-  version: 3.2.12
-  resolution: "fast-glob@npm:3.2.12"
-  dependencies:
-    "@nodelib/fs.stat": ^2.0.2
-    "@nodelib/fs.walk": ^1.2.3
-    glob-parent: ^5.1.2
-    merge2: ^1.3.0
-    micromatch: ^4.0.4
-  checksum: 0b1990f6ce831c7e28c4d505edcdaad8e27e88ab9fa65eedadb730438cfc7cde4910d6c975d6b7b8dc8a73da4773702ebcfcd6e3518e73938bb1383badfe01c2
-  languageName: node
-  linkType: hard
-
 "fast-glob@npm:^3.3.0, fast-glob@npm:^3.3.2":
   version: 3.3.2
   resolution: "fast-glob@npm:3.3.2"
@@ -31657,15 +32102,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jiti@npm:^1.18.2":
-  version: 1.20.0
-  resolution: "jiti@npm:1.20.0"
-  bin:
-    jiti: bin/jiti.js
-  checksum: 7924062b5675142e3e272a27735be84b7bfc0a0eb73217fc2dcafa034f37c4f7b4b9ffc07dd98bcff0f739a8811ce1544db205ae7e97b1c86f0df92c65ce3c72
-  languageName: node
-  linkType: hard
-
 "jiti@npm:^1.19.1":
   version: 1.21.0
   resolution: "jiti@npm:1.21.0"
@@ -31684,6 +32120,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"jiti@npm:^2.6.0, jiti@npm:^2.6.1":
+  version: 2.6.1
+  resolution: "jiti@npm:2.6.1"
+  bin:
+    jiti: lib/jiti-cli.mjs
+  checksum: 9394e29c5e40d1ca8267923160d8d86706173c9ff30c901097883434b0c4866de2c060427b6a9a5843bb3e42fa3a3c8b5b2228531d3dd4f4f10c5c6af355bb86
+  languageName: node
+  linkType: hard
+
 "jju@npm:~1.4.0":
   version: 1.4.0
   resolution: "jju@npm:1.4.0"
@@ -32512,6 +32957,126 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lightningcss-android-arm64@npm:1.30.2":
+  version: 1.30.2
+  resolution: "lightningcss-android-arm64@npm:1.30.2"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lightningcss-darwin-arm64@npm:1.30.2":
+  version: 1.30.2
+  resolution: "lightningcss-darwin-arm64@npm:1.30.2"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lightningcss-darwin-x64@npm:1.30.2":
+  version: 1.30.2
+  resolution: "lightningcss-darwin-x64@npm:1.30.2"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss-freebsd-x64@npm:1.30.2":
+  version: 1.30.2
+  resolution: "lightningcss-freebsd-x64@npm:1.30.2"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm-gnueabihf@npm:1.30.2":
+  version: 1.30.2
+  resolution: "lightningcss-linux-arm-gnueabihf@npm:1.30.2"
+  conditions: os=linux & cpu=arm
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm64-gnu@npm:1.30.2":
+  version: 1.30.2
+  resolution: "lightningcss-linux-arm64-gnu@npm:1.30.2"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-arm64-musl@npm:1.30.2":
+  version: 1.30.2
+  resolution: "lightningcss-linux-arm64-musl@npm:1.30.2"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-x64-gnu@npm:1.30.2":
+  version: 1.30.2
+  resolution: "lightningcss-linux-x64-gnu@npm:1.30.2"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"lightningcss-linux-x64-musl@npm:1.30.2":
+  version: 1.30.2
+  resolution: "lightningcss-linux-x64-musl@npm:1.30.2"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"lightningcss-win32-arm64-msvc@npm:1.30.2":
+  version: 1.30.2
+  resolution: "lightningcss-win32-arm64-msvc@npm:1.30.2"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"lightningcss-win32-x64-msvc@npm:1.30.2":
+  version: 1.30.2
+  resolution: "lightningcss-win32-x64-msvc@npm:1.30.2"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"lightningcss@npm:1.30.2":
+  version: 1.30.2
+  resolution: "lightningcss@npm:1.30.2"
+  dependencies:
+    detect-libc: ^2.0.3
+    lightningcss-android-arm64: 1.30.2
+    lightningcss-darwin-arm64: 1.30.2
+    lightningcss-darwin-x64: 1.30.2
+    lightningcss-freebsd-x64: 1.30.2
+    lightningcss-linux-arm-gnueabihf: 1.30.2
+    lightningcss-linux-arm64-gnu: 1.30.2
+    lightningcss-linux-arm64-musl: 1.30.2
+    lightningcss-linux-x64-gnu: 1.30.2
+    lightningcss-linux-x64-musl: 1.30.2
+    lightningcss-win32-arm64-msvc: 1.30.2
+    lightningcss-win32-x64-msvc: 1.30.2
+  dependenciesMeta:
+    lightningcss-android-arm64:
+      optional: true
+    lightningcss-darwin-arm64:
+      optional: true
+    lightningcss-darwin-x64:
+      optional: true
+    lightningcss-freebsd-x64:
+      optional: true
+    lightningcss-linux-arm-gnueabihf:
+      optional: true
+    lightningcss-linux-arm64-gnu:
+      optional: true
+    lightningcss-linux-arm64-musl:
+      optional: true
+    lightningcss-linux-x64-gnu:
+      optional: true
+    lightningcss-linux-x64-musl:
+      optional: true
+    lightningcss-win32-arm64-msvc:
+      optional: true
+    lightningcss-win32-x64-msvc:
+      optional: true
+  checksum: 6e5ef66e7d7e57af8712ed7125968d31d8120a84cc530d7483d1cbc17b06a10f1187e63054b7a5cdd16d345429007cf7be46464bd7b327be7080f8604f246c73
+  languageName: node
+  linkType: hard
+
 "lilconfig@npm:2.0.5, lilconfig@npm:^2.0.5":
   version: 2.0.5
   resolution: "lilconfig@npm:2.0.5"
@@ -33334,7 +33899,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"magic-string@npm:^0.30.12":
+"magic-string@npm:^0.30.12, magic-string@npm:^0.30.19":
   version: 0.30.19
   resolution: "magic-string@npm:0.30.19"
   dependencies:
@@ -35273,6 +35838,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"nanoid@npm:^3.3.11, nanoid@npm:^3.3.8":
+  version: 3.3.11
+  resolution: "nanoid@npm:3.3.11"
+  bin:
+    nanoid: bin/nanoid.cjs
+  checksum: 3be20d8866a57a6b6d218e82549711c8352ed969f9ab3c45379da28f405363ad4c9aeb0b39e9abc101a529ca65a72ff9502b00bf74a912c4b64a9d62dfd26c29
+  languageName: node
+  linkType: hard
+
 "nanoid@npm:^3.3.4":
   version: 3.3.4
   resolution: "nanoid@npm:3.3.4"
@@ -35300,15 +35874,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nanoid@npm:^3.3.8":
-  version: 3.3.11
-  resolution: "nanoid@npm:3.3.11"
-  bin:
-    nanoid: bin/nanoid.cjs
-  checksum: 3be20d8866a57a6b6d218e82549711c8352ed969f9ab3c45379da28f405363ad4c9aeb0b39e9abc101a529ca65a72ff9502b00bf74a912c4b64a9d62dfd26c29
-  languageName: node
-  linkType: hard
-
 "nanoid@npm:^4.0.2":
   version: 4.0.2
   resolution: "nanoid@npm:4.0.2"
@@ -38177,6 +38742,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss@npm:^8.4.41":
+  version: 8.5.6
+  resolution: "postcss@npm:8.5.6"
+  dependencies:
+    nanoid: ^3.3.11
+    picocolors: ^1.1.1
+    source-map-js: ^1.2.1
+  checksum: 20f3b5d673ffeec2b28d65436756d31ee33f65b0a8bedb3d32f556fbd5973be38c3a7fb5b959a5236c60a5db7b91b0a6b14ffaac0d717dce1b903b964ee1c1bb
+  languageName: node
+  linkType: hard
+
 "postcss@npm:^8.4.43":
   version: 8.4.47
   resolution: "postcss@npm:8.4.47"
@@ -38505,6 +39081,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prism-react-renderer@npm:^2.4.1":
+  version: 2.4.1
+  resolution: "prism-react-renderer@npm:2.4.1"
+  dependencies:
+    "@types/prismjs": ^1.26.0
+    clsx: ^2.0.0
+  peerDependencies:
+    react: ">=16.0.0"
+  checksum: ddd5490a1335629addde9535db7872f0aee8dbce048818dd6e4c3972c779780af13d669c12d3f2fbb54c5b22d1578e50945099ef1a24dd445f33774e87d85e6e
+  languageName: node
+  linkType: hard
+
 "prisma-kysely@npm:2.2.0":
   version: 2.2.0
   resolution: "prisma-kysely@npm:2.2.0"
@@ -40440,7 +41028,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"reselect@npm:5.1.1, reselect@npm:^5.1.0":
+"reselect@npm:5.1.1, reselect@npm:^5.1.0, reselect@npm:^5.1.1":
   version: 5.1.1
   resolution: "reselect@npm:5.1.1"
   checksum: 5d32d48be29071ddda21a775945c2210cf4ca3fccde1c4a0e1582ac3bf99c431c6c2330ef7ca34eae4c06feea617e7cb2c275c4b33ccf9a930836dfc98b49b13
@@ -43578,6 +44166,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tabbable@npm:^6.2.0":
+  version: 6.2.0
+  resolution: "tabbable@npm:6.2.0"
+  checksum: f8440277d223949272c74bb627a3371be21735ca9ad34c2570f7e1752bd646ccfc23a9d8b1ee65d6561243f4134f5fbbf1ad6b39ac3c4b586554accaff4a1300
+  languageName: node
+  linkType: hard
+
 "tailwind-merge@npm:^1.13.2":
   version: 1.13.2
   resolution: "tailwind-merge@npm:1.13.2"
@@ -43585,28 +44180,44 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tailwind-scrollbar@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "tailwind-scrollbar@npm:2.0.1"
-  peerDependencies:
-    tailwindcss: 3.x
-  checksum: 8f72ad2d19cffdd53b5deec4fd6a6c4fffa9206c472fd89df803db97c7723a1b0a7fc0b4d5345b69b71f2e0fd7a036eaebc2a533feb4d71caec48dc49bb17ca5
-  languageName: node
-  linkType: hard
-
-"tailwindcss-animate@npm:^1.0.6":
-  version: 1.0.6
-  resolution: "tailwindcss-animate@npm:1.0.6"
-  peerDependencies:
-    tailwindcss: "*"
-  checksum: 01471cb5e64d0936b3dc90bdb1d4b379e8b73b3d285553337d8576e5d458e868ddff99c6db0ae454c1be69ce8f88dc0eed44ea62e4d7bca10d7d2479fc4c8ee0
-  languageName: node
-  linkType: hard
-
-"tailwindcss-radix@npm:^2.6.0":
+"tailwind-merge@npm:^2.0.0":
   version: 2.6.0
-  resolution: "tailwindcss-radix@npm:2.6.0"
-  checksum: aff1c66f49dfac864367306890ba72b269244e6515da9914f61e9404a7c8ff38b879635e56775952239ef5ef537b301e443c0e1f53a3c5f92ee6ca4a0306a462
+  resolution: "tailwind-merge@npm:2.6.0"
+  checksum: 18976c4096920bc6125f1dc837479805de996d86bcc636f98436f65c297003bde89ffe51dfd325b7c97fc71b1dbba8505459dd96010e7b181badd29aea996440
+  languageName: node
+  linkType: hard
+
+"tailwind-scrollbar@npm:^4.0.2":
+  version: 4.0.2
+  resolution: "tailwind-scrollbar@npm:4.0.2"
+  dependencies:
+    prism-react-renderer: ^2.4.1
+  peerDependencies:
+    tailwindcss: 4.x
+  checksum: c3306b6b2fca24c610fc801429a336d3d967b58e33205541dcef6cca3df5d6f6fd159ac3bfa687bd7516ab2a7edeb7bfdb53ebb0639e91a37e86bae7dce9be4d
+  languageName: node
+  linkType: hard
+
+"tailwindcss-radix@npm:^4.0.2":
+  version: 4.0.2
+  resolution: "tailwindcss-radix@npm:4.0.2"
+  peerDependencies:
+    tailwindcss: ^3.0 || ^4.0
+  checksum: 178b58d381c6e79b98490ca85ce6ba88630c7444720967d55745c8727a42cb72d53b6cacf869820c7b941361beffb573262bbf94a93e8c2b5cc0c1da35214761
+  languageName: node
+  linkType: hard
+
+"tailwindcss@npm:4.1.15, tailwindcss@npm:^4":
+  version: 4.1.15
+  resolution: "tailwindcss@npm:4.1.15"
+  checksum: 988fef55192d8c07224ce338b4d4d748406b8681175620fbdade9dae6ee3dfc5145e738fdaa937c610f73e488deb480c893a1f3e34110f23384db5f0f5b664e7
+  languageName: node
+  linkType: hard
+
+"tailwindcss@npm:4.1.16":
+  version: 4.1.16
+  resolution: "tailwindcss@npm:4.1.16"
+  checksum: 04081aeb7cdb38834974a19d65802890370d37358332375ae81085b0be3dc202b85d496442cd2f10ae9bda3e039feedb1d9968236bdec2b188efebda504282d5
   languageName: node
   linkType: hard
 
@@ -43643,36 +44254,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tailwindcss@npm:^3.3.3":
-  version: 3.3.3
-  resolution: "tailwindcss@npm:3.3.3"
-  dependencies:
-    "@alloc/quick-lru": ^5.2.0
-    arg: ^5.0.2
-    chokidar: ^3.5.3
-    didyoumean: ^1.2.2
-    dlv: ^1.1.3
-    fast-glob: ^3.2.12
-    glob-parent: ^6.0.2
-    is-glob: ^4.0.3
-    jiti: ^1.18.2
-    lilconfig: ^2.1.0
-    micromatch: ^4.0.5
-    normalize-path: ^3.0.0
-    object-hash: ^3.0.0
-    picocolors: ^1.0.0
-    postcss: ^8.4.23
-    postcss-import: ^15.1.0
-    postcss-js: ^4.0.1
-    postcss-load-config: ^4.0.1
-    postcss-nested: ^6.0.1
-    postcss-selector-parser: ^6.0.11
-    resolve: ^1.22.2
-    sucrase: ^3.32.0
-  bin:
-    tailwind: lib/cli.js
-    tailwindcss: lib/cli.js
-  checksum: 0195c7a3ebb0de5e391d2a883d777c78a4749f0c532d204ee8aea9129f2ed8e701d8c0c276aa5f7338d07176a3c2a7682c1d0ab9c8a6c2abe6d9325c2954eb50
+"tailwindcss@npm:^4.0.0":
+  version: 4.1.17
+  resolution: "tailwindcss@npm:4.1.17"
+  checksum: d3b66a81a46ede234018ed06f4c5390b42652ee29b880ac9858fa688ebbdfa0e66fcfdd6c98cc6ed08da3711b933898b660fc929160744447a34aefdd38e7708
   languageName: node
   linkType: hard
 
@@ -44763,6 +45348,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tw-animate-css@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "tw-animate-css@npm:1.4.0"
+  checksum: eb2b3b32f12e2f6973f4299564c470ab0145d89098f28cd238c97672b3b43b6c870e52ed46f41ea1a105504ecba20148ac0fded7f8992bbaad4bc1f1bbedbd43
+  languageName: node
+  linkType: hard
+
 "tweetnacl@npm:^0.14.3, tweetnacl@npm:~0.14.0":
   version: 0.14.5
   resolution: "tweetnacl@npm:0.14.5"
@@ -45891,6 +46483,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-sync-external-store@npm:^1.5.0":
+  version: 1.6.0
+  resolution: "use-sync-external-store@npm:1.6.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 61a62e910713adfaf91bdb72ff2cd30e5ba83687accaf3b6e75a903b45bf635f5722e3694af30d83a03e92cb533c0a5c699298d2fef639a03ffc86b469f4eee2
+  languageName: node
+  linkType: hard
+
 "utif@npm:^2.0.1":
   version: 2.0.1
   resolution: "utif@npm:2.0.1"