From b31ccf30373b42019b780beabbe589e3023f4e1e Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Thu, 25 Dec 2025 09:01:51 +0000
Subject: [PATCH] feat: lint codebase and run precommit hook

---
 .prettierignore                               |   10 +-
 apps/api/.prettierignore                      |    1 +
 apps/api/ROUTE_NAMING_BEST_PRACTICES.md       |   96 +-
 apps/api/package.json                         |    2 +-
 apps/api/scripts/README.md                    |    4 +-
 apps/api/scripts/upload-openapi-spec.ts       |    6 +-
 apps/api/src/middlewares/rate-limiter.ts      |    1 -
 apps/api/src/utils/redis/limiter.ts           |   10 +-
 apps/api/static/course.html                   |   19 +-
 apps/api/static/lesson.html                   |   23 +-
 apps/course-app/.prettierignore               |    4 -
 apps/course-app/.prettierrc                   |   15 -
 apps/course-app/components.json               |   26 +-
 apps/course-app/package.json                  |    3 +-
 apps/course-app/postcss.config.js             |    8 +-
 apps/course-app/src/app.d.ts                  |   14 +-
 apps/course-app/src/app.html                  |   87 +-
 apps/course-app/src/demo.spec.ts              |    6 +-
 .../src/lib/components/ui/button/index.ts     |   74 +-
 .../src/lib/components/ui/dialog/index.ts     |   58 +-
 .../src/lib/components/ui/input/index.ts      |   42 +-
 .../src/lib/components/ui/label/index.ts      |    8 +-
 .../src/lib/components/ui/separator/index.ts  |    8 +-
 .../src/lib/components/ui/sonner/index.ts     |    2 +-
 apps/course-app/static/site.webmanifest       |   12 +-
 apps/course-app/vite.config.ts                |   18 +-
 apps/dashboard/README.md                      |    2 -
 apps/dashboard/ai/BREADCRUMBS_REFACTOR.md     |  171 +-
 apps/dashboard/ai/PAGE_ROUTE_GUIDE.md         |   48 +-
 apps/dashboard/src/app.html                   |   48 +-
 .../Analytics/AnalyticsSkeleton.svelte        |   14 +-
 .../components/Ceritficate/Design.svelte      |    2 +-
 .../Ceritficate/IssueCertificateModal.svelte  |   78 +-
 .../Lesson/ActivateSectionsModal.svelte       |   40 +-
 .../Lesson/DeleteLessonConfirmation.svelte    |   30 +-
 .../Lesson/Exercise/DeleteConfirmation.svelte |   48 +-
 .../Lesson/Exercise/MarkExerciseModal.svelte  |  288 +-
 .../Lesson/Exercise/OrderModal.svelte         |   56 +-
 .../Lesson/Exercises/NewExerciseModal.svelte  |  274 +-
 .../Document/AddDocumentToLesson.svelte       |    4 +-
 .../Lesson/Materials/Video/UploadVideo.svelte |    2 +-
 .../NewsFeed/DeleteFeedConfirmation.svelte    |   21 +-
 .../components/NewsFeed/NewFeedModal.svelte   |   45 +-
 .../People/DeleteConfirmation.svelte          |   34 +-
 .../community/components/delete-modal.svelte  |   39 +-
 .../src/lib/features/community/utils/store.ts |    1 -
 .../components/copy-course-modal.svelte       |   58 +-
 .../features/course/pages/attendance.svelte   |    1 -
 .../lib/features/course/pages/lessons.svelte  |    1 -
 .../features/lms/components/learning.svelte   |    1 -
 .../onboarding/utils/dom-protection.ts        |  385 +-
 .../add-org-modal/add-org-modal.svelte        |   45 +-
 .../org/components/image-renderer.svelte      |    1 -
 .../landing-page/page-header.svelte           |    1 -
 .../landing-page/page-loader.svelte           |    1 -
 .../org/components/new-org-modal-store.ts     |    1 -
 .../org/components/quiz/delete-modal.svelte   |   44 +-
 .../org/components/quiz/new-quiz-modal.svelte |   37 +-
 .../org/components/quiz/quiz-question.svelte  |    5 +-
 .../components/settings/landing-page-store.ts |    1 -
 .../ui/analytics/activity-card.svelte         |    1 -
 .../ui/analytics/hero-profile-card.svelte     |    1 -
 .../features/ui/analytics/loading-page.svelte |    1 -
 .../src/lib/features/ui/delete-modal.svelte   |   31 +-
 .../features/ui/icons/arrow-top-right.svelte  |    1 -
 .../ui/icons/circle-check-icon.svelte         |    1 -
 .../ui/icons/courses-empty-icon.svelte        |    1 -
 .../features/ui/icons/email-sent-icon.svelte  |    1 -
 .../ui/icons/error-icon-dark-mode.svelte      |    1 -
 .../lib/features/ui/icons/error-icon.svelte   |    1 -
 .../ui/icons/google-icon-colored.svelte       |    1 -
 .../ui/icons/user-profile-icon.svelte         |    1 -
 .../features/ui/navigation/breadcrumb-core.ts |   86 +-
 .../features/ui/navigation/lms-breadcrumb.ts  |    1 -
 .../ui/navigation/lms-breadcrumbs.svelte      |    3 +-
 .../features/ui/navigation/lms-header.svelte  |    1 -
 .../src/lib/features/ui/senja-embed.svelte    |    1 -
 .../ui/sidebar/lms-sidebar/nav-main.svelte    |    1 -
 .../ui/upload-widget/upload-widget.svelte     |  148 +-
 .../dashboard/src/lib/features/ui/vote.svelte |    1 -
 .../src/lib/utils/functions/fileValidation.ts |    8 +-
 .../src/lib/utils/functions/permissions.ts    |    6 +-
 .../src/lib/utils/translations/da.json        |    2 +-
 .../src/lib/utils/translations/de.json        |    2 +-
 .../src/lib/utils/translations/es.json        |    2 +-
 .../src/lib/utils/translations/fr.json        |    2 +-
 .../src/lib/utils/translations/hi.json        |    2 +-
 .../src/lib/utils/translations/pl.json        |    2 +-
 .../src/lib/utils/translations/pt.json        |    2 +-
 .../src/lib/utils/translations/ru.json        |    2 +-
 .../src/lib/utils/translations/vi.json        |    2 +-
 .../src/lib/utils/validation/USAGE.md         |   41 +-
 .../(auth)/verify-email-error/+page.svelte    |   58 +-
 apps/dashboard/src/routes/+layout.svelte      |    3 +-
 .../api/admin/cleanup-tokens/+server.ts       |    4 +-
 .../api/admin/security-monitor/+server.ts     |   10 +-
 .../routes/api/courses/analytics/+server.ts   |   10 +-
 .../src/routes/api/courses/data/+server.ts    |   13 +-
 .../routes/api/courses/exercises/+server.ts   |   10 +-
 .../src/routes/api/courses/marks/+server.ts   |    6 +-
 .../src/routes/api/polar/webhook/+server.ts   |   12 +-
 .../src/routes/courses/[id]/+layout.svelte    |    8 +-
 .../src/routes/invite/s/[hash]/+page.svelte   |    8 +-
 .../src/routes/lms/settings/+layout.svelte    |    1 -
 .../lms/settings/integrations/+page.svelte    |    1 -
 apps/website/.prettierrc                      |   14 -
 apps/website/FOLDER_STRUCTURE.md              |   12 +-
 apps/website/package.json                     |    1 +
 .../src/lib/components/blog-list-item.svelte  |   20 +-
 .../components/core-feature-section.svelte    |   18 +-
 .../src/lib/components/core-features.svelte   |   39 +-
 .../src/lib/components/custom-img.svelte      |    7 +-
 apps/website/src/lib/components/faq.svelte    |   12 +-
 apps/website/src/lib/components/footer.svelte |   19 +-
 apps/website/src/lib/components/hero.svelte   |   19 +-
 apps/website/src/lib/components/modal.svelte  |    6 +-
 .../src/lib/components/more-features.svelte   |   46 +-
 .../src/lib/components/navigation.svelte      |   22 +-
 .../src/lib/components/not-found.svelte       |   19 +-
 .../src/lib/components/page-signup-cta.svelte |   15 +-
 .../lib/components/student-dashboard.svelte   |   18 +-
 .../website/src/lib/components/success.svelte |   11 +-
 .../src/lib/components/testimonial.svelte     |   20 +-
 .../src/lib/components/timeline.svelte        |   22 +-
 .../src/lib/components/upload-widget.svelte   |   11 +-
 .../lib/features/contact/feedback-form.svelte |   12 +-
 .../src/lib/features/contact/help-form.svelte |   12 +-
 .../lib/features/tools/progress/avatar.svelte |   12 +-
 .../features/tools/progress/background.svelte |   12 +-
 .../lib/features/tools/progress/mood.svelte   |    6 +-
 .../lib/features/tools/progress/report.svelte |   49 +-
 .../lib/features/tools/stopwatch/timer.svelte |   15 +-
 .../features/tools/tic-tac-toe/board.svelte   |    2 +-
 .../lib/features/tools/tic-tac-toe/board.ts   |    6 +-
 .../tools/tic-tac-toe/winning-line.svelte     |    8 +-
 apps/website/src/lib/utils/constants/tools.ts |    6 +-
 apps/website/src/mdsvex.svelte                |   10 +-
 .../routes/(marketing)/bootcamps/+page.svelte |   94 +-
 .../customer-education/+page.svelte           |  101 +-
 .../employee-training/+page.svelte            |   90 +-
 .../(redirects)/devanddesign/+page.server.ts  |    5 +-
 apps/website/src/routes/api/blog/+server.ts   |    4 +-
 .../website/src/routes/api/contact/+server.ts |   51 +-
 apps/website/src/routes/blog/+page.svelte     |   12 +-
 apps/website/src/routes/contact/+page.svelte  |   12 +-
 .../src/routes/oss-friends/+page.svelte       |   29 +-
 apps/website/src/routes/oss-friends/+page.ts  |    6 +-
 apps/website/src/routes/pricing/+page.svelte  |   17 +-
 apps/website/src/routes/roadmap/+page.svelte  |   16 +-
 apps/website/src/routes/teach/+page.svelte    |   19 +-
 apps/website/src/routes/tools/+layout.svelte  |   12 +-
 apps/website/src/routes/tools/+page.svelte    |   28 +-
 .../src/routes/tools/pomodoro/+page.svelte    |   22 +-
 .../src/routes/tools/tic-tac-toe/+page.svelte |    4 +-
 apps/website/static/manifest.json             |   46 +-
 lefthook.yml                                  |   12 +
 package.json                                  |   11 +-
 packages/storybook/HOW_TO_CREATE_STORIES.md   |   42 +-
 packages/storybook/package.json               |    1 +
 .../storybook/src/atoms/accordion/fields.ts   |   10 +-
 .../storybook/src/atoms/checkbox/fields.ts    |    9 +-
 .../storybook/src/atoms/collapsible/fields.ts |    7 +-
 .../storybook/src/atoms/command/fields.ts     |    9 +-
 .../src/atoms/item/item.stories.svelte        |   10 +-
 .../storybook/src/atoms/menubar/fields.ts     |    8 +-
 .../storybook/src/atoms/pagination/fields.ts  |    8 +-
 .../storybook/src/atoms/radio-group/fields.ts |   10 +-
 packages/storybook/src/atoms/switch/fields.ts |    9 +-
 packages/storybook/src/atoms/tabs/fields.ts   |    8 +-
 .../storybook/src/atoms/tooltip/fields.ts     |    7 +-
 .../src/molecules/hover-card/fields.ts        |    1 -
 .../src/molecules/icon-button/fields.ts       |    1 -
 .../src/molecules/input-group/fields.ts       |    1 -
 .../storybook/src/molecules/page/fields.ts    |    1 -
 .../password/password.stories.svelte          |    1 -
 packages/ui/src/base/button-group/index.ts    |   20 +-
 packages/ui/src/base/card/index.ts            |   44 +-
 .../ui/src/base/drawer/drawer-close.svelte    |    4 +-
 .../ui/src/base/drawer/drawer-trigger.svelte  |    4 +-
 packages/ui/src/base/drawer/drawer.svelte     |   14 +-
 packages/ui/src/base/drawer/index.ts          |   68 +-
 packages/ui/src/base/empty/index.ts           |   38 +-
 packages/ui/src/base/hover-card/index.ts      |   15 +-
 packages/ui/src/base/input-group/index.ts     |   38 +-
 packages/ui/src/base/input/index.ts           |    8 +-
 packages/ui/src/base/item/index.ts            |   62 +-
 packages/ui/src/base/kbd/index.ts             |   14 +-
 packages/ui/src/base/navigation-menu/index.ts |   50 +-
 packages/ui/src/base/page/page-action.svelte  |    8 +-
 .../ui/src/base/page/page-subtitle.svelte     |    1 -
 .../src/base/password/password-util.svelte.ts |  185 +-
 packages/ui/src/base/password/types.ts        |   43 +-
 packages/ui/src/base/separator/index.ts       |    8 +-
 packages/ui/src/base/textarea/index.ts        |    8 +-
 packages/ui/src/base/toggle/index.ts          |   13 +-
 packages/ui/src/custom/domain-input/index.ts  |    1 -
 .../src/custom/icon-button/icon-button.svelte |    8 +-
 packages/ui/src/custom/icon-button/index.ts   |    1 -
 packages/ui/src/custom/image-cropper/utils.ts |  106 +-
 packages/ui/src/custom/input-field/index.ts   |    1 -
 packages/ui/src/custom/password/index.ts      |    1 -
 .../ui/src/custom/password/password.svelte    |    3 +-
 packages/ui/src/custom/search/index.ts        |    1 -
 .../ui/src/custom/underline-tabs/index.ts     |   18 +-
 .../underline-tabs-utils.svelte.ts            |  106 +-
 packages/ui/src/hooks/use-clipboard.svelte.ts |   94 +-
 packages/ui/src/output.css                    | 3808 ++++++++++++++++-
 packages/utils/package.json                   |    3 +-
 .../utils/src/functions/fileValidation.ts     |    8 +-
 packages/utils/src/functions/index.ts         |    2 +-
 packages/utils/src/validation/README.md       |   92 +-
 packages/utils/src/validation/auth/forgot.ts  |    4 +-
 packages/utils/src/validation/auth/reset.ts   |    6 +-
 pnpm-lock.yaml                                |   43 +-
 214 files changed, 6191 insertions(+), 2880 deletions(-)
 create mode 100644 apps/api/.prettierignore
 delete mode 100644 apps/course-app/.prettierignore
 delete mode 100644 apps/course-app/.prettierrc
 delete mode 100644 apps/website/.prettierrc
 create mode 100644 lefthook.yml

diff --git a/.prettierignore b/.prettierignore
index 9e3bea4a..a5574698 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -5,4 +5,12 @@ build
 _template
 supabase
 static
-dist
\ No newline at end of file
+dist
+docker
+
+**/course-app
+apps/docs
+apps/api/static
+
+pnpm-lock.yaml
+*.md
\ No newline at end of file
diff --git a/apps/api/.prettierignore b/apps/api/.prettierignore
new file mode 100644
index 00000000..7b4d4ba2
--- /dev/null
+++ b/apps/api/.prettierignore
@@ -0,0 +1 @@
+static
diff --git a/apps/api/ROUTE_NAMING_BEST_PRACTICES.md b/apps/api/ROUTE_NAMING_BEST_PRACTICES.md
index f1cffe40..13b9d689 100644
--- a/apps/api/ROUTE_NAMING_BEST_PRACTICES.md
+++ b/apps/api/ROUTE_NAMING_BEST_PRACTICES.md
@@ -56,9 +56,9 @@ GET    /lessons (which course?)
 
 ```typescript
 // ✅ OK - Top-level resources
-GET    /account
-PUT    /account/user
-GET    /account/subscription
+GET / account;
+PUT / account / user;
+GET / account / subscription;
 ```
 
 ---
@@ -67,13 +67,13 @@ GET    /account/subscription
 
 Use HTTP methods correctly for their intended purpose:
 
-| Method | Purpose | Idempotent | Response Body |
-|--------|---------|------------|---------------|
-| `GET` | Retrieve resource(s) | ✅ Yes | Always |
-| `POST` | Create new resource | ❌ No | Created resource |
-| `PUT` | Replace entire resource | ✅ Yes | Updated resource |
-| `PATCH` | Partial update | ✅ Yes | Updated resource |
-| `DELETE` | Remove resource | ✅ Yes | Usually empty (204) |
+| Method   | Purpose                 | Idempotent | Response Body       |
+| -------- | ----------------------- | ---------- | ------------------- |
+| `GET`    | Retrieve resource(s)    | ✅ Yes     | Always              |
+| `POST`   | Create new resource     | ❌ No      | Created resource    |
+| `PUT`    | Replace entire resource | ✅ Yes     | Updated resource    |
+| `PATCH`  | Partial update          | ✅ Yes     | Updated resource    |
+| `DELETE` | Remove resource         | ✅ Yes     | Usually empty (204) |
 
 ```typescript
 // ✅ GOOD - Correct method usage
@@ -112,11 +112,13 @@ POST   /lessons?courseId=123     // Relationship not obvious
 ```
 
 **When to nest:**
+
 - ✅ Child resource only exists within parent context
 - ✅ Child resource ID is unique within parent (e.g., `lessonId` within `courseId`)
 - ✅ Operations typically scoped to parent
 
 **When NOT to nest:**
+
 - ❌ Resource can exist independently
 - ❌ Resource ID is globally unique
 - ❌ Operations span multiple parents
@@ -154,6 +156,7 @@ GET    /get-courses              // Redundant verb
 **Pattern:** `POST /resource/:id/action`
 
 **When to use:**
+
 - ✅ State transitions (publish, unpublish, activate, cancel)
 - ✅ Side effects (clone, duplicate, export)
 - ✅ Complex operations that don't fit CRUD
@@ -181,14 +184,14 @@ GET    /courses/search/javascript
 
 **Common query parameter patterns:**
 
-| Purpose | Parameter | Example |
-|---------|-----------|---------|
-| Filtering | `status`, `type`, `role` | `?status=active&type=course` |
-| Search | `q`, `search` | `?q=javascript` |
-| Pagination | `page`, `limit`, `offset` | `?page=1&limit=20` |
-| Sorting | `sort`, `order` | `?sort=created_at&order=desc` |
-| Date range | `startDate`, `endDate` | `?startDate=2024-01-01` |
-| Boolean flags | `include`, `expand` | `?include=lessons&expand=metadata` |
+| Purpose       | Parameter                 | Example                            |
+| ------------- | ------------------------- | ---------------------------------- |
+| Filtering     | `status`, `type`, `role`  | `?status=active&type=course`       |
+| Search        | `q`, `search`             | `?q=javascript`                    |
+| Pagination    | `page`, `limit`, `offset` | `?page=1&limit=20`                 |
+| Sorting       | `sort`, `order`           | `?sort=created_at&order=desc`      |
+| Date range    | `startDate`, `endDate`    | `?startDate=2024-01-01`            |
+| Boolean flags | `include`, `expand`       | `?include=lessons&expand=metadata` |
 
 ---
 
@@ -303,9 +306,9 @@ import { organizationRouter } from '@api/routes/organization';
 import { accountRouter } from '@api/routes/account';
 
 export const app = new Hono()
-  .route('/course', courseRouter)           // /course/*
+  .route('/course', courseRouter) // /course/*
   .route('/organization', organizationRouter) // /organization/*
-  .route('/account', accountRouter);        // /account/*
+  .route('/account', accountRouter); // /account/*
 ```
 
 ---
@@ -321,37 +324,37 @@ export const courseRouter = new Hono()
   .get('/', authMiddleware, zValidator('query', ZListCourses), async (c) => {
     // GET /course?orgId=123&status=published&page=1&limit=20
   })
-  
+
   // Get single course
   .get('/:courseId', authMiddleware, zValidator('param', ZGetCourse), async (c) => {
     // GET /course/:courseId
   })
-  
+
   // Create course
   .post('/', authMiddleware, zValidator('json', ZCreateCourse), async (c) => {
     // POST /course
   })
-  
+
   // Update course (full)
   .put('/:courseId', authMiddleware, zValidator('json', ZUpdateCourse), async (c) => {
     // PUT /course/:courseId
   })
-  
+
   // Update course (partial)
   .patch('/:courseId', authMiddleware, zValidator('json', ZPatchCourse), async (c) => {
     // PATCH /course/:courseId
   })
-  
+
   // Delete course
   .delete('/:courseId', authMiddleware, zValidator('param', ZDeleteCourse), async (c) => {
     // DELETE /course/:courseId
   })
-  
+
   // Actions
   .post('/:courseId/clone', authMiddleware, zValidator('json', ZCloneCourse), async (c) => {
     // POST /course/:courseId/clone
   })
-  
+
   .post('/:courseId/publish', authMiddleware, zValidator('param', ZPublishCourse), async (c) => {
     // POST /course/:courseId/publish
   });
@@ -366,22 +369,22 @@ export const lessonRouter = new Hono()
   .get('/', authMiddleware, zValidator('query', ZListLessons), async (c) => {
     // GET /course/:courseId/lesson?page=1&limit=20
   })
-  
+
   // Get single lesson
   .get('/:lessonId', authMiddleware, zValidator('param', ZGetLesson), async (c) => {
     // GET /course/:courseId/lesson/:lessonId
   })
-  
+
   // Create lesson
   .post('/', authMiddleware, zValidator('json', ZCreateLesson), async (c) => {
     // POST /course/:courseId/lesson
   })
-  
+
   // Update lesson
   .put('/:lessonId', authMiddleware, zValidator('json', ZUpdateLesson), async (c) => {
     // PUT /course/:courseId/lesson/:lessonId
   })
-  
+
   // Delete lesson
   .delete('/:lessonId', authMiddleware, zValidator('param', ZDeleteLesson), async (c) => {
     // DELETE /course/:courseId/lesson/:lessonId
@@ -391,7 +394,7 @@ export const lessonRouter = new Hono()
 // apps/api/src/routes/course/course.ts
 export const courseRouter = new Hono()
   // ... course routes ...
-  .route('/:courseId/lesson', lessonRouter);  // Nested under course
+  .route('/:courseId/lesson', lessonRouter); // Nested under course
 ```
 
 ### Example 3: Organization with Team
@@ -403,31 +406,31 @@ export const organizationRouter = new Hono()
   .get('/', authMiddleware, zValidator('query', ZListOrgs), async (c) => {
     // GET /organization?siteName=acme
   })
-  
+
   // Get organization
   .get('/:orgId', authMiddleware, zValidator('param', ZGetOrg), async (c) => {
     // GET /organization/:orgId
   })
-  
+
   // Create organization
   .post('/', authMiddleware, zValidator('json', ZCreateOrg), async (c) => {
     // POST /organization
   })
-  
+
   // Update organization
   .put('/:orgId', authMiddleware, zValidator('json', ZUpdateOrg), async (c) => {
     // PUT /organization/:orgId
   })
-  
+
   // Team management (nested)
   .get('/:orgId/team', authMiddleware, zValidator('param', ZGetTeam), async (c) => {
     // GET /organization/:orgId/team
   })
-  
+
   .post('/:orgId/team/invite', authMiddleware, zValidator('json', ZInviteTeam), async (c) => {
     // POST /organization/:orgId/team/invite
   })
-  
+
   .delete('/:orgId/team/:memberId', authMiddleware, zValidator('param', ZRemoveMember), async (c) => {
     // DELETE /organization/:orgId/team/:memberId
   });
@@ -457,16 +460,16 @@ DELETE /courses/:id
 
 ```typescript
 // ❌ BAD
-GET    /course
-POST   /courses
-GET    /organization
-POST   /organizations
+GET / course;
+POST / courses;
+GET / organization;
+POST / organizations;
 
 // ✅ GOOD
-GET    /courses
-POST   /courses
-GET    /organizations
-POST   /organizations
+GET / courses;
+POST / courses;
+GET / organizations;
+POST / organizations;
 ```
 
 ### ❌ Don't: Use query parameters for required identifiers
@@ -540,4 +543,3 @@ When creating a new route, ensure:
 8. **Organized by domain** in code structure
 
 Following these conventions ensures your API is **predictable**, **maintainable**, and **developer-friendly**.
-
diff --git a/apps/api/package.json b/apps/api/package.json
index d543d109..5468ccea 100644
--- a/apps/api/package.json
+++ b/apps/api/package.json
@@ -17,7 +17,7 @@
     "test": "vitest NODE_ENV=test",
     "test:coverage": "vitest run --coverage",
     "lint": "eslint . --ext .ts",
-    "format": "prettier --write \"src/**/*.ts\"",
+    "format": "prettier --write .",
     "upload:openapi": "tsx scripts/upload-openapi-spec.ts"
   },
   "repository": {
diff --git a/apps/api/scripts/README.md b/apps/api/scripts/README.md
index ccd54105..41bb8caa 100644
--- a/apps/api/scripts/README.md
+++ b/apps/api/scripts/README.md
@@ -11,6 +11,7 @@ pnpm run upload:openapi
 ```
 
 ### Direct script usage
+
 ```bash
 tsx scripts/upload-openapi-spec.ts
 ```
@@ -49,6 +50,7 @@ This script is integrated with a GitHub Action that automatically generates and
 ### Automatic Workflow
 
 The GitHub Action runs on:
+
 - **Push to main** - Automatically uploads to R2
 - **Pull Requests** - Generates spec for review (no upload)
 - **Manual dispatch** - Allows manual triggering with custom parameters
@@ -57,7 +59,7 @@ The GitHub Action runs on:
 
 1. **Required secrets:**
    - `CLOUDFLARE_ACCESS_KEY`
-   - `CLOUDFLARE_SECRET_ACCESS_KEY` 
+   - `CLOUDFLARE_SECRET_ACCESS_KEY`
    - `CLOUDFLARE_ACCOUNT_ID`
    - `PUBLIC_SUPABASE_URL`
    - `PUBLIC_SUPABASE_ANON_KEY`
diff --git a/apps/api/scripts/upload-openapi-spec.ts b/apps/api/scripts/upload-openapi-spec.ts
index 36280a78..4d04f6cd 100644
--- a/apps/api/scripts/upload-openapi-spec.ts
+++ b/apps/api/scripts/upload-openapi-spec.ts
@@ -24,11 +24,7 @@ class OpenAPISpecGenerator {
   }
 
   private initializeS3Client() {
-    if (
-      env.CLOUDFLARE_ACCESS_KEY &&
-      env.CLOUDFLARE_SECRET_ACCESS_KEY &&
-      env.CLOUDFLARE_ACCOUNT_ID
-    ) {
+    if (env.CLOUDFLARE_ACCESS_KEY && env.CLOUDFLARE_SECRET_ACCESS_KEY && env.CLOUDFLARE_ACCOUNT_ID) {
       this.s3Client = new S3Client({
         region: 'auto',
         endpoint: `https://${env.CLOUDFLARE_ACCOUNT_ID}.r2.cloudflarestorage.com`,
diff --git a/apps/api/src/middlewares/rate-limiter.ts b/apps/api/src/middlewares/rate-limiter.ts
index 7732b111..d7a4e02b 100644
--- a/apps/api/src/middlewares/rate-limiter.ts
+++ b/apps/api/src/middlewares/rate-limiter.ts
@@ -36,7 +36,6 @@ export const createRateLimiter = (options: RateLimiterOptions = {}): MiddlewareH
     }
 
     try {
-      
       // Generate rate limit key
       const key = opts.keyGenerator(c);
 
diff --git a/apps/api/src/utils/redis/limiter.ts b/apps/api/src/utils/redis/limiter.ts
index fcc0c804..bb5a2b3d 100644
--- a/apps/api/src/utils/redis/limiter.ts
+++ b/apps/api/src/utils/redis/limiter.ts
@@ -13,19 +13,13 @@ export class RedisRateLimiter {
   private windowMs: number;
   private maxRequests: number;
 
-  constructor(
-    redis: Redis,
-    windowMs: number = DEFAULT_WINDOW_MS,
-    maxRequests: number = DEFAULT_MAX_REQUESTS
-  ) {
+  constructor(redis: Redis, windowMs: number = DEFAULT_WINDOW_MS, maxRequests: number = DEFAULT_MAX_REQUESTS) {
     this.redis = redis;
     this.windowMs = windowMs;
     this.maxRequests = maxRequests;
   }
 
-  async isAllowed(
-    key: string
-  ): Promise<{ allowed: boolean; remaining: number; resetTime: number }> {
+  async isAllowed(key: string): Promise<{ allowed: boolean; remaining: number; resetTime: number }> {
     const now = Date.now();
     const windowStart = now - this.windowMs;
     const keyWithPrefix = `${RATE_LIMIT_KEY_PREFIX}${key}`;
diff --git a/apps/api/static/course.html b/apps/api/static/course.html
index ca9560e8..2325b73e 100644
--- a/apps/api/static/course.html
+++ b/apps/api/static/course.html
@@ -154,20 +154,23 @@
       <section>
         <h1 class="text-xl font-bold my-1">Extra Resources</h1>
         <div class="flex mt-2 mb-1">
-          <p class="m-0 mr-2">Slide Link:</p> <a href=https://youtu.be/dyLaKhePzj8 style="color: blue"
+          <p class="m-0 mr-2">Slide Link:</p> <a href="https://youtu.be/dyLaKhePzj8" style="color: blue"
             class="underline">Open Here</a>
         </div>
 
         <p class="m-0">Video Link:</p>
         <div class="m-0">
           <ol class="m-0">
-
-            <li key={index + 1}><a href=https://youtu.be/0fYi8SGA20k style="color: blue"
-                class="underline">https://youtu.be/0fYi8SGA20k</a></li>
-
-            <li key={index + 1}><a href=https://youtu.be/0fYi8SGA20k style="color: blue"
-                class="underline">https://youtu.be/0fYi8SGA20k</a></li>
-
+            <li>
+              <a href="https://youtu.be/0fYi8SGA20k" style="color: blue" class="underline">
+                https://youtu.be/0fYi8SGA20k
+              </a>
+            </li>
+            <li>
+              <a href="https://youtu.be/0fYi8SGA20k" style="color: blue" class="underline">
+                https://youtu.be/0fYi8SGA20k
+              </a>
+            </li>
           </ol>
         </div>
 
diff --git a/apps/api/static/lesson.html b/apps/api/static/lesson.html
index b31ff14c..3e5901e5 100644
--- a/apps/api/static/lesson.html
+++ b/apps/api/static/lesson.html
@@ -158,20 +158,25 @@
       <section>
         <h1 class="text-xl font-bold my-1">Extra Resources</h1>
         <div class="flex mt-2 mb-1">
-          <p class="m-0 mr-2">Slide Link:</p> <a href=https://youtu.be/dyLaKhePzj8 style="color: blue"
-            class="underline">Open Here</a>
+          <p class="m-0 mr-2">Slide Link:</p>
+          <a href="https://youtu.be/dyLaKhePzj8" style="color: blue" class="underline">
+            Open Here
+          </a>
         </div>
 
         <p class="m-0">Video Link:</p>
         <div class="m-0">
           <ol class="m-0">
-
-            <li key={index + 1}><a href=https://youtu.be/0fYi8SGA20k style="color: blue"
-                class="underline">https://youtu.be/0fYi8SGA20k</a></li>
-
-            <li key={index + 1}><a href=https://youtu.be/0fYi8SGA20k style="color: blue"
-                class="underline">https://youtu.be/0fYi8SGA20k</a></li>
-
+            <li>
+              <a href="https://youtu.be/0fYi8SGA20k" style="color: blue" class="underline">
+                https://youtu.be/0fYi8SGA20k
+              </a>
+            </li>
+            <li>
+              <a href="https://youtu.be/0fYi8SGA20k" style="color: blue" class="underline">
+                https://youtu.be/0fYi8SGA20k
+              </a>
+            </li>
           </ol>
         </div>
 
diff --git a/apps/course-app/.prettierignore b/apps/course-app/.prettierignore
deleted file mode 100644
index ab78a95d..00000000
--- a/apps/course-app/.prettierignore
+++ /dev/null
@@ -1,4 +0,0 @@
-# Package Managers
-package-lock.json
-pnpm-lock.yaml
-yarn.lock
diff --git a/apps/course-app/.prettierrc b/apps/course-app/.prettierrc
deleted file mode 100644
index abaa84f9..00000000
--- a/apps/course-app/.prettierrc
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-	"useTabs": false,
-	"singleQuote": true,
-	"trailingComma": "none",
-	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
-	"overrides": [
-		{
-			"files": "*.svelte",
-			"options": {
-				"parser": "svelte"
-			}
-		}
-	]
-}
diff --git a/apps/course-app/components.json b/apps/course-app/components.json
index b2c229a7..1740726b 100644
--- a/apps/course-app/components.json
+++ b/apps/course-app/components.json
@@ -1,14 +1,14 @@
 {
-	"$schema": "https://shadcn-svelte.com/schema.json",
-	"style": "new-york",
-	"tailwind": {
-		"config": "tailwind.config.ts",
-		"css": "src/app.css",
-		"baseColor": "zinc"
-	},
-	"aliases": {
-		"components": "$lib/components",
-		"utils": "$lib/utils"
-	},
-	"typescript": true
-}
\ No newline at end of file
+  "$schema": "https://shadcn-svelte.com/schema.json",
+  "style": "new-york",
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app.css",
+    "baseColor": "zinc"
+  },
+  "aliases": {
+    "components": "$lib/components",
+    "utils": "$lib/utils"
+  },
+  "typescript": true
+}
diff --git a/apps/course-app/package.json b/apps/course-app/package.json
index 2d7b6e11..27641728 100644
--- a/apps/course-app/package.json
+++ b/apps/course-app/package.json
@@ -9,7 +9,8 @@
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "format": "prettier --write .",
+    "format": "echo 'disabled'",
+    "format:run": "prettier --write .",
     "lint": "prettier --check .",
     "test:unit": "vitest",
     "test": "npm run test:unit -- --run"
diff --git a/apps/course-app/postcss.config.js b/apps/course-app/postcss.config.js
index 0f772168..ba807304 100644
--- a/apps/course-app/postcss.config.js
+++ b/apps/course-app/postcss.config.js
@@ -1,6 +1,6 @@
 export default {
-	plugins: {
-		tailwindcss: {},
-		autoprefixer: {}
-	}
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
 };
diff --git a/apps/course-app/src/app.d.ts b/apps/course-app/src/app.d.ts
index da08e6da..520c4217 100644
--- a/apps/course-app/src/app.d.ts
+++ b/apps/course-app/src/app.d.ts
@@ -1,13 +1,13 @@
 // See https://svelte.dev/docs/kit/types#app.d.ts
 // for information about these interfaces
 declare global {
-	namespace App {
-		// interface Error {}
-		// interface Locals {}
-		// interface PageData {}
-		// interface PageState {}
-		// interface Platform {}
-	}
+  namespace App {
+    // interface Error {}
+    // interface Locals {}
+    // interface PageData {}
+    // interface PageState {}
+    // interface Platform {}
+  }
 }
 
 export {};
diff --git a/apps/course-app/src/app.html b/apps/course-app/src/app.html
index b6be97d7..039a3e72 100644
--- a/apps/course-app/src/app.html
+++ b/apps/course-app/src/app.html
@@ -1,47 +1,58 @@
 <!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-<head>
-	<meta charset="utf-8" />
-	<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
-	<meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Courseapp by ClassroomIO –&nbsp;Create your SAAS Academy in Minutes</title>
+    <meta name="description" content="Courseapp" />
+    <meta name="application-name" content="Courseapp" />
+    <meta name="apple-mobile-web-app-title" content="Courseapp" />
+    <meta name="theme-color" content="#ffffff" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-	<title>Courseapp by ClassroomIO –&nbsp;Create your SAAS Academy in Minutes</title>
-	<meta name="description" content="Courseapp" />
-	<meta name="application-name" content="Courseapp" />
-	<meta name="apple-mobile-web-app-title" content="Courseapp" />
-	<meta name="theme-color" content="#ffffff" />
-	<meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!-- Facebook Meta Tags -->
+    <meta property="og:url" content="https://www.courseapp.oncws.com/" />
+    <meta property="og:image" itemprop="image" content="https://cdn.courseapp.oncws.com/courseapp-og.png" />
+    <meta property="og:title" content="Courseapp by ClassroomIO –&nbsp;Create your SAAS Academy in Minutes" />
+    <meta
+      property="og:description"
+      content="Series of templates available for you to clone, customise and launch your SAAS Academy. Scale your customer education effort today."
+    />
 
-	<!-- Facebook Meta Tags -->
-	<meta property="og:url" content="https://www.courseapp.oncws.com/" />
-	<meta property="og:image" itemprop="image" content="https://cdn.courseapp.oncws.com/courseapp-og.png" />
-	<meta property="og:title" content="Courseapp by ClassroomIO –&nbsp;Create your SAAS Academy in Minutes" />
-	<meta property="og:description"
-		content="Series of templates available for you to clone, customise and launch your SAAS Academy. Scale your customer education effort today." />
+    <meta property="og:type" content="website" />
+    <meta property="og:image:type" content="image/png" />
+    <meta property="og:image:width" content="1920" />
+    <meta property="og:image:height" content="1080" />
+    <meta property="og:image:secure_url" itemprop="image" content="https://cdn.courseapp.oncws.com/courseapp-og.png" />
 
-	<meta property="og:type" content="website" />
-	<meta property="og:image:type" content="image/png" />
-	<meta property="og:image:width" content="1920" />
-	<meta property="og:image:height" content="1080" />
-	<meta property="og:image:secure_url" itemprop="image" content="https://cdn.courseapp.oncws.com/courseapp-og.png" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta property="twitter:domain" content="courseapp.oncws.com" />
+    <meta property="twitter:url" content="https://www.courseapp.oncws.com/" />
+    <meta name="twitter:title" content="Courseapp by ClassroomIO –&nbsp;Create your SAAS Academy in Minutes" />
+    <meta
+      name="twitter:description"
+      content="Series of templates available for you to clone, customise and launch your SAAS Academy. Scale your customer education effort today."
+    />
+    <meta name="twitter:image" content="https://cdn.courseapp.oncws.com/courseapp-og.png" />
 
-	<meta name="twitter:card" content="summary_large_image" />
-	<meta property="twitter:domain" content="courseapp.oncws.com" />
-	<meta property="twitter:url" content="https://www.courseapp.oncws.com/" />
-	<meta name="twitter:title" content="Courseapp by ClassroomIO –&nbsp;Create your SAAS Academy in Minutes" />
-	<meta name="twitter:description"
-		content="Series of templates available for you to clone, customise and launch your SAAS Academy. Scale your customer education effort today." />
-	<meta name="twitter:image" content="https://cdn.courseapp.oncws.com/courseapp-og.png" />
+    %sveltekit.head%
 
-	%sveltekit.head%
+    <script>
+      (function (w, r) {
+        w._rwq = r;
+        w[r] =
+          w[r] ||
+          function () {
+            (w[r].q = w[r].q || []).push(arguments);
+          };
+      })(window, 'rewardful');
+    </script>
+    <script async src="https://r.wdfl.co/rw.js" data-rewardful="d216d5"></script>
+  </head>
 
-	<script>(function (w, r) { w._rwq = r; w[r] = w[r] || function () { (w[r].q = w[r].q || []).push(arguments) } })(window, 'rewardful');</script>
-	<script async src='https://r.wdfl.co/rw.js' data-rewardful='d216d5'></script>
-</head>
-
-<body data-sveltekit-preload-data="hover">
-	<div style="display: contents">%sveltekit.body%</div>
-</body>
-
-</html>
\ No newline at end of file
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>
diff --git a/apps/course-app/src/demo.spec.ts b/apps/course-app/src/demo.spec.ts
index e07cbbd7..964d2872 100644
--- a/apps/course-app/src/demo.spec.ts
+++ b/apps/course-app/src/demo.spec.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect } from 'vitest';
 
 describe('sum test', () => {
-	it('adds 1 + 2 to equal 3', () => {
-		expect(1 + 2).toBe(3);
-	});
+  it('adds 1 + 2 to equal 3', () => {
+    expect(1 + 2).toBe(3);
+  });
 });
diff --git a/apps/course-app/src/lib/components/ui/button/index.ts b/apps/course-app/src/lib/components/ui/button/index.ts
index f0f46124..605af131 100644
--- a/apps/course-app/src/lib/components/ui/button/index.ts
+++ b/apps/course-app/src/lib/components/ui/button/index.ts
@@ -1,50 +1,48 @@
-import type { Button as ButtonPrimitive } from "bits-ui";
-import { type VariantProps, tv } from "tailwind-variants";
-import Root from "./button.svelte";
+import type { Button as ButtonPrimitive } from 'bits-ui';
+import { type VariantProps, tv } from 'tailwind-variants';
+import Root from './button.svelte';
 
 const buttonVariants = tv({
-	base: "focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50",
-	variants: {
-		variant: {
-			default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow",
-			destructive:
-				"bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm",
-			outline:
-				"border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-sm",
-			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm",
-			ghost: "hover:bg-accent hover:text-accent-foreground",
-			link: "text-primary underline-offset-4 hover:underline",
-		},
-		size: {
-			default: "h-9 px-4 py-2",
-			sm: "h-8 rounded-md px-3 text-xs",
-			lg: "h-10 rounded-md px-8",
-			icon: "h-9 w-9",
-		},
-	},
-	defaultVariants: {
-		variant: "default",
-		size: "default",
-	},
+  base: 'focus-visible:ring-ring inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50',
+  variants: {
+    variant: {
+      default: 'bg-primary text-primary-foreground hover:bg-primary/90 shadow',
+      destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90 shadow-sm',
+      outline: 'border-input bg-background hover:bg-accent hover:text-accent-foreground border shadow-sm',
+      secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-sm',
+      ghost: 'hover:bg-accent hover:text-accent-foreground',
+      link: 'text-primary underline-offset-4 hover:underline'
+    },
+    size: {
+      default: 'h-9 px-4 py-2',
+      sm: 'h-8 rounded-md px-3 text-xs',
+      lg: 'h-10 rounded-md px-8',
+      icon: 'h-9 w-9'
+    }
+  },
+  defaultVariants: {
+    variant: 'default',
+    size: 'default'
+  }
 });
 
-type Variant = VariantProps<typeof buttonVariants>["variant"];
-type Size = VariantProps<typeof buttonVariants>["size"];
+type Variant = VariantProps<typeof buttonVariants>['variant'];
+type Size = VariantProps<typeof buttonVariants>['size'];
 
 type Props = ButtonPrimitive.Props & {
-	variant?: Variant;
-	size?: Size;
+  variant?: Variant;
+  size?: Size;
 };
 
 type Events = ButtonPrimitive.Events;
 
 export {
-	Root,
-	type Props,
-	type Events,
-	//
-	Root as Button,
-	type Props as ButtonProps,
-	type Events as ButtonEvents,
-	buttonVariants,
+  Root,
+  type Props,
+  type Events,
+  //
+  Root as Button,
+  type Props as ButtonProps,
+  type Events as ButtonEvents,
+  buttonVariants
 };
diff --git a/apps/course-app/src/lib/components/ui/dialog/index.ts b/apps/course-app/src/lib/components/ui/dialog/index.ts
index b17ba5e6..950252f2 100644
--- a/apps/course-app/src/lib/components/ui/dialog/index.ts
+++ b/apps/course-app/src/lib/components/ui/dialog/index.ts
@@ -1,37 +1,37 @@
-import { Dialog as DialogPrimitive } from "bits-ui";
+import { Dialog as DialogPrimitive } from 'bits-ui';
 
-import Title from "./dialog-title.svelte";
-import Portal from "./dialog-portal.svelte";
-import Footer from "./dialog-footer.svelte";
-import Header from "./dialog-header.svelte";
-import Overlay from "./dialog-overlay.svelte";
-import Content from "./dialog-content.svelte";
-import Description from "./dialog-description.svelte";
+import Title from './dialog-title.svelte';
+import Portal from './dialog-portal.svelte';
+import Footer from './dialog-footer.svelte';
+import Header from './dialog-header.svelte';
+import Overlay from './dialog-overlay.svelte';
+import Content from './dialog-content.svelte';
+import Description from './dialog-description.svelte';
 
 const Root = DialogPrimitive.Root;
 const Trigger = DialogPrimitive.Trigger;
 const Close = DialogPrimitive.Close;
 
 export {
-	Root,
-	Title,
-	Portal,
-	Footer,
-	Header,
-	Trigger,
-	Overlay,
-	Content,
-	Description,
-	Close,
-	//
-	Root as Dialog,
-	Title as DialogTitle,
-	Portal as DialogPortal,
-	Footer as DialogFooter,
-	Header as DialogHeader,
-	Trigger as DialogTrigger,
-	Overlay as DialogOverlay,
-	Content as DialogContent,
-	Description as DialogDescription,
-	Close as DialogClose,
+  Root,
+  Title,
+  Portal,
+  Footer,
+  Header,
+  Trigger,
+  Overlay,
+  Content,
+  Description,
+  Close,
+  //
+  Root as Dialog,
+  Title as DialogTitle,
+  Portal as DialogPortal,
+  Footer as DialogFooter,
+  Header as DialogHeader,
+  Trigger as DialogTrigger,
+  Overlay as DialogOverlay,
+  Content as DialogContent,
+  Description as DialogDescription,
+  Close as DialogClose
 };
diff --git a/apps/course-app/src/lib/components/ui/input/index.ts b/apps/course-app/src/lib/components/ui/input/index.ts
index 75e3bc25..f7063b39 100644
--- a/apps/course-app/src/lib/components/ui/input/index.ts
+++ b/apps/course-app/src/lib/components/ui/input/index.ts
@@ -1,29 +1,29 @@
-import Root from "./input.svelte";
+import Root from './input.svelte';
 
 export type FormInputEvent<T extends Event = Event> = T & {
-	currentTarget: EventTarget & HTMLInputElement;
+  currentTarget: EventTarget & HTMLInputElement;
 };
 export type InputEvents = {
-	blur: FormInputEvent<FocusEvent>;
-	change: FormInputEvent<Event>;
-	click: FormInputEvent<MouseEvent>;
-	focus: FormInputEvent<FocusEvent>;
-	focusin: FormInputEvent<FocusEvent>;
-	focusout: FormInputEvent<FocusEvent>;
-	keydown: FormInputEvent<KeyboardEvent>;
-	keypress: FormInputEvent<KeyboardEvent>;
-	keyup: FormInputEvent<KeyboardEvent>;
-	mouseover: FormInputEvent<MouseEvent>;
-	mouseenter: FormInputEvent<MouseEvent>;
-	mouseleave: FormInputEvent<MouseEvent>;
-	mousemove: FormInputEvent<MouseEvent>;
-	paste: FormInputEvent<ClipboardEvent>;
-	input: FormInputEvent<InputEvent>;
-	wheel: FormInputEvent<WheelEvent>;
+  blur: FormInputEvent<FocusEvent>;
+  change: FormInputEvent<Event>;
+  click: FormInputEvent<MouseEvent>;
+  focus: FormInputEvent<FocusEvent>;
+  focusin: FormInputEvent<FocusEvent>;
+  focusout: FormInputEvent<FocusEvent>;
+  keydown: FormInputEvent<KeyboardEvent>;
+  keypress: FormInputEvent<KeyboardEvent>;
+  keyup: FormInputEvent<KeyboardEvent>;
+  mouseover: FormInputEvent<MouseEvent>;
+  mouseenter: FormInputEvent<MouseEvent>;
+  mouseleave: FormInputEvent<MouseEvent>;
+  mousemove: FormInputEvent<MouseEvent>;
+  paste: FormInputEvent<ClipboardEvent>;
+  input: FormInputEvent<InputEvent>;
+  wheel: FormInputEvent<WheelEvent>;
 };
 
 export {
-	Root,
-	//
-	Root as Input,
+  Root,
+  //
+  Root as Input
 };
diff --git a/apps/course-app/src/lib/components/ui/label/index.ts b/apps/course-app/src/lib/components/ui/label/index.ts
index 8bfca0b3..d1907754 100644
--- a/apps/course-app/src/lib/components/ui/label/index.ts
+++ b/apps/course-app/src/lib/components/ui/label/index.ts
@@ -1,7 +1,7 @@
-import Root from "./label.svelte";
+import Root from './label.svelte';
 
 export {
-	Root,
-	//
-	Root as Label,
+  Root,
+  //
+  Root as Label
 };
diff --git a/apps/course-app/src/lib/components/ui/separator/index.ts b/apps/course-app/src/lib/components/ui/separator/index.ts
index 82442d2c..2402e13e 100644
--- a/apps/course-app/src/lib/components/ui/separator/index.ts
+++ b/apps/course-app/src/lib/components/ui/separator/index.ts
@@ -1,7 +1,7 @@
-import Root from "./separator.svelte";
+import Root from './separator.svelte';
 
 export {
-	Root,
-	//
-	Root as Separator,
+  Root,
+  //
+  Root as Separator
 };
diff --git a/apps/course-app/src/lib/components/ui/sonner/index.ts b/apps/course-app/src/lib/components/ui/sonner/index.ts
index 1ad9f4a2..fcaf06bf 100644
--- a/apps/course-app/src/lib/components/ui/sonner/index.ts
+++ b/apps/course-app/src/lib/components/ui/sonner/index.ts
@@ -1 +1 @@
-export { default as Toaster } from "./sonner.svelte";
+export { default as Toaster } from './sonner.svelte';
diff --git a/apps/course-app/static/site.webmanifest b/apps/course-app/static/site.webmanifest
index 45dc8a20..0b08af12 100644
--- a/apps/course-app/static/site.webmanifest
+++ b/apps/course-app/static/site.webmanifest
@@ -1 +1,11 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
\ No newline at end of file
+{
+  "name": "",
+  "short_name": "",
+  "icons": [
+    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
diff --git a/apps/course-app/vite.config.ts b/apps/course-app/vite.config.ts
index c63c90e7..393426cc 100644
--- a/apps/course-app/vite.config.ts
+++ b/apps/course-app/vite.config.ts
@@ -3,15 +3,15 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import path from 'path';
 
 export default defineConfig({
-	plugins: [sveltekit()],
+  plugins: [sveltekit()],
 
-	test: {
-		include: ['src/**/*.{test,spec}.{js,ts}']
-	},
+  test: {
+    include: ['src/**/*.{test,spec}.{js,ts}']
+  },
 
-	resolve: {
-		alias: {
-			$lib: path.resolve('./src/lib')
-		}
-	}
+  resolve: {
+    alias: {
+      $lib: path.resolve('./src/lib')
+    }
+  }
 });
diff --git a/apps/dashboard/README.md b/apps/dashboard/README.md
index 957b64ae..e97d4251 100644
--- a/apps/dashboard/README.md
+++ b/apps/dashboard/README.md
@@ -100,11 +100,9 @@ Here is what you need to be able to run Cal.com.
    You can install nvm from [here](https://github.com/nvm-sh/nvm).
 
 4. Set up your `.env` file
-
    - Duplicate `.env.example` to `.env`
 
 5. Setup Supabase.
-
    - Make sure you've downloaded the [supabase cli](https://github.com/supabase/cli)
    - Install and Start [docker](https://docs.docker.com/engine/install/)
    - Go to the project directory in your terminal and start supabase
diff --git a/apps/dashboard/ai/BREADCRUMBS_REFACTOR.md b/apps/dashboard/ai/BREADCRUMBS_REFACTOR.md
index 943601d6..e3ad3c5d 100644
--- a/apps/dashboard/ai/BREADCRUMBS_REFACTOR.md
+++ b/apps/dashboard/ai/BREADCRUMBS_REFACTOR.md
@@ -11,13 +11,13 @@ The navigation config types now support additional properties:
 ```typescript
 export interface NavItemConfig {
   // ... existing properties ...
-  
+
   // NEW: Route-specific breadcrumb label override
   breadcrumbLabel?: string;
-  
+
   // NEW: Custom resolver for dynamic breadcrumb titles
   breadcrumbResolver?: (params: Record<string, string>) => string | Promise<string>;
-  
+
   // ENHANCED: Nested routes can now have nested routes (multi-level)
   nestedRoutes?: NestedRouteConfig[];
 }
@@ -25,13 +25,13 @@ export interface NavItemConfig {
 export interface NestedRouteConfig {
   path: string;
   titleKey: string;
-  
+
   // NEW: Custom resolver for this nested route
   titleResolver?: (params: Record<string, string>) => string | Promise<string>;
-  
+
   // NEW: Nested routes can have nested routes
   nestedRoutes?: NestedRouteConfig[];
-  
+
   // NEW: Support dynamic segments within nested routes
   supportsDynamicSegment?: boolean;
 }
@@ -40,6 +40,7 @@ export interface NestedRouteConfig {
 ### Step 2: Update Breadcrumb Generation Calls
 
 #### Before (Org):
+
 ```typescript
 import { generateBreadcrumbs } from './breadcrumb';
 
@@ -53,6 +54,7 @@ const breadcrumbs = generateBreadcrumbs(
 ```
 
 #### After (Org - Store-Based Reactive):
+
 ```svelte
 <script lang="ts">
   import { page } from '$app/state';
@@ -61,24 +63,20 @@ const breadcrumbs = generateBreadcrumbs(
   import { courseStore } from '$features/course/utils/store';
 
   // Reactive config that reads from stores
-  const config = $derived(createOrgBreadcrumbConfigWithStore(
-    $currentOrgPath,
-    () => $courseStore.title // Reads reactively - updates automatically!
-  ));
-  
-  // Breadcrumbs update automatically when store changes!
-  const breadcrumbs = $derived(
-    generateBreadcrumbsSync(
-      page.url.pathname,
-      page.url.search,
-      navItems,
-      config
+  const config = $derived(
+    createOrgBreadcrumbConfigWithStore(
+      $currentOrgPath,
+      () => $courseStore.title // Reads reactively - updates automatically!
     )
   );
+
+  // Breadcrumbs update automatically when store changes!
+  const breadcrumbs = $derived(generateBreadcrumbsSync(page.url.pathname, page.url.search, navItems, config));
 </script>
 ```
 
 #### Before (LMS):
+
 ```typescript
 import { generateLmsBreadcrumbs } from './lms-breadcrumb';
 import { currentCommunityQuestion } from '$features/community/utils/store';
@@ -93,6 +91,7 @@ const breadcrumbs = generateLmsBreadcrumbs(
 ```
 
 #### After (LMS - Reactive Store-Based):
+
 ```svelte
 <script lang="ts">
   import { page } from '$app/state';
@@ -101,19 +100,14 @@ const breadcrumbs = generateLmsBreadcrumbs(
   import { currentCommunityQuestion } from '$features/community/utils/store';
 
   // Config is reactive - updates when store changes
-  const config = $derived(createLmsBreadcrumbConfigWithStore(
-    () => $currentCommunityQuestion.title // Reads reactively from store
-  ));
-  
-  // Breadcrumbs update automatically when store changes!
-  const breadcrumbs = $derived(
-    generateBreadcrumbsSync(
-      page.url.pathname,
-      page.url.search,
-      navItems,
-      config
+  const config = $derived(
+    createLmsBreadcrumbConfigWithStore(
+      () => $currentCommunityQuestion.title // Reads reactively from store
     )
   );
+
+  // Breadcrumbs update automatically when store changes!
+  const breadcrumbs = $derived(generateBreadcrumbsSync(page.url.pathname, page.url.search, navItems, config));
 </script>
 ```
 
@@ -131,6 +125,7 @@ The refactored system supports up to 5 layers of nesting through recursive trave
 #### Example: Courses → Course → Lesson → Assignment → Submission (5 Layers)
 
 **Navigation Config** (in `org-navigation.ts`):
+
 ```typescript
 {
   titleKey: 'org_navigation.courses',
@@ -186,20 +181,20 @@ The refactored system supports up to 5 layers of nesting through recursive trave
 ```
 
 **Breadcrumb Component** (in `app-breadcrumbs.svelte`):
+
 ```svelte
 <script lang="ts">
   import { page } from '$app/state';
   import { generateBreadcrumbsSync } from './breadcrumb-core';
   import { createOrgBreadcrumbConfigWithStore } from './breadcrumb-configs';
   import { assignmentStore, submissionStore, courseStore, lessonStore } from '$features/course/utils/store';
-  
+
   // Create reactive config that reads from stores
-  const config = $derived(createOrgBreadcrumbConfigWithStore(
-    $currentOrgPath,
-    () => {
+  const config = $derived(
+    createOrgBreadcrumbConfigWithStore($currentOrgPath, () => {
       // This function is called reactively - reads from stores
       const pathSegments = page.url.pathname.split('/').filter(Boolean);
-      
+
       // Determine which store to read based on current route
       if (pathSegments.includes('submissions') && pathSegments.length > 5) {
         return $submissionStore.title || 'Submission';
@@ -214,35 +209,28 @@ The refactored system supports up to 5 layers of nesting through recursive trave
         return $courseStore.title || 'Course';
       }
       return null;
-    }
-  ));
-  
-  const breadcrumbs = $derived(
-    generateBreadcrumbsSync(
-      page.url.pathname,
-      page.url.search,
-      navItems,
-      config
-    )
+    })
   );
+
+  const breadcrumbs = $derived(generateBreadcrumbsSync(page.url.pathname, page.url.search, navItems, config));
 </script>
 ```
 
 **Alternative: Per-Route Store Resolvers** (More Granular):
+
 ```svelte
 <script lang="ts">
   import { page } from '$app/state';
   import { generateBreadcrumbsSync } from './breadcrumb-core';
   import { createOrgBreadcrumbConfigWithStore } from './breadcrumb-configs';
   import { assignmentStore, submissionStore, courseStore, lessonStore } from '$features/course/utils/store';
-  
+
   // Create config with store-based resolver
-  const config = $derived(createOrgBreadcrumbConfigWithStore(
-    $currentOrgPath,
-    () => {
+  const config = $derived(
+    createOrgBreadcrumbConfigWithStore($currentOrgPath, () => {
       // Read from stores reactively based on path structure
       const pathSegments = page.url.pathname.split('/').filter(Boolean);
-      
+
       // Match store to segment position
       if (pathSegments.includes('submissions')) {
         return $submissionStore.title || null;
@@ -257,17 +245,10 @@ The refactored system supports up to 5 layers of nesting through recursive trave
         return $courseStore.title || null;
       }
       return null;
-    }
-  ));
-  
-  const breadcrumbs = $derived(
-    generateBreadcrumbsSync(
-      page.url.pathname,
-      page.url.search,
-      navItems,
-      config
-    )
+    })
   );
+
+  const breadcrumbs = $derived(generateBreadcrumbsSync(page.url.pathname, page.url.search, navItems, config));
 </script>
 ```
 
@@ -288,6 +269,7 @@ The refactored system supports up to 5 layers of nesting through recursive trave
 #### Store-Based vs Async Resolvers
 
 **✅ Recommended: Store-Based (Reactive)**
+
 ```typescript
 // In breadcrumb component
 const config = $derived(createOrgBreadcrumbConfigWithStore(
@@ -300,15 +282,17 @@ const breadcrumbs = $derived(generateBreadcrumbsSync(...));
 ```
 
 **⚠️ Alternative: Async Resolvers (API Calls)**
+
 ```typescript
 // In navigation config
 titleResolver: async (params) => {
   const assignment = await fetchAssignment(params.param0);
   return assignment.title;
-}
+};
 ```
 
 **Why Use Stores?**
+
 - ✅ **No API calls** - data already loaded in component
 - ✅ **Automatic updates** - breadcrumb updates when store changes
 - ✅ **Better performance** - no loading states or delays
@@ -322,7 +306,7 @@ The `extractParamsFromPath` function extracts all path segments as `param0`, `pa
 // For URL: /courses/123/lessons/456/assignments/789
 // params = {
 //   param0: '123',  // courseId
-//   param1: '456',  // lessonId  
+//   param1: '456',  // lessonId
 //   param2: '789'   // assignmentId
 // }
 ```
@@ -350,41 +334,43 @@ For routes that need async data fetching:
 ```typescript
 import { generateBreadcrumbs } from './breadcrumb-core'; // Note: async version
 
-const breadcrumbs = await generateBreadcrumbs(
-  page.url.pathname,
-  page.url.search,
-  navItems,
-  config
-);
+const breadcrumbs = await generateBreadcrumbs(page.url.pathname, page.url.search, navItems, config);
 ```
 
 ## Benefits of the Refactored System
 
 ### ✅ 1. No Code Duplication
+
 - Single unified generator for all contexts
 - Context-specific configs handle differences
 
 ### ✅ 2. Multi-Level Nesting Support
+
 - Recursive generation handles any depth
 - Configurable max depth prevents infinite loops
 
 ### ✅ 3. Flexible Path Prefixes
+
 - Function-based prefix extraction
 - Supports dynamic prefixes like `/org/[slug]`
 
 ### ✅ 4. Consistent Dynamic Title Resolution
+
 - Unified interface for all resolvers
 - Supports both sync and async resolution
 
 ### ✅ 5. Route-Specific Customization
+
 - Override labels per route
 - Custom resolvers for complex cases
 
 ### ✅ 6. Optional Caching
+
 - Performance optimization
 - Configurable cache TTL
 
 ### ✅ 7. Type Safety
+
 - Full TypeScript support
 - Compile-time error checking
 
@@ -393,6 +379,7 @@ const breadcrumbs = await generateBreadcrumbs(
 **URL**: `/org/myorg/courses/123/lessons/456/assignments/789/submissions/101`
 
 **Config**:
+
 ```typescript
 {
   path: '/courses',
@@ -492,8 +479,9 @@ The recursive function processes **each path segment** separately, incrementing
 **Breadcrumb Result**: `Courses / React Fundamentals / Lessons / Components / Assignments / Build Todo App / Submissions / Submission #101`
 
 **Depth Breakdown**:
+
 - `depth=0`: Top-level nav item (`/courses`) → "Courses"
-- `depth=1`: First dynamic segment (`123`) → "React Fundamentals" 
+- `depth=1`: First dynamic segment (`123`) → "React Fundamentals"
 - `depth=2`: Static nested route (`lessons`) → "Lessons"
 - `depth=3`: Second dynamic segment (`456`) → "Components"
 - `depth=4`: Static nested route (`assignments`) → "Assignments"
@@ -560,13 +548,8 @@ beforeEach(() => {
 
 // Test breadcrumb generation
 test('generates breadcrumbs for nested route', () => {
-  const breadcrumbs = generateBreadcrumbsSync(
-    '/org/test/courses/123/lessons/456',
-    '',
-    navItems,
-    config
-  );
-  
+  const breadcrumbs = generateBreadcrumbsSync('/org/test/courses/123/lessons/456', '', navItems, config);
+
   expect(breadcrumbs).toHaveLength(4);
   expect(breadcrumbs[0].label).toBe('Courses');
 });
@@ -604,6 +587,7 @@ This allows gradual migration without breaking existing code.
 ### Why Use Stores Instead of Async Requests?
 
 **✅ Benefits:**
+
 - **No API calls** - Data is already loaded in your component
 - **Automatic updates** - Breadcrumbs update reactively when stores change
 - **Better performance** - No loading states, delays, or network requests
@@ -619,6 +603,7 @@ This allows gradual migration without breaking existing code.
 ### Example: Community Post Title
 
 **Store** (`$features/community/utils/store.ts`):
+
 ```typescript
 export const currentCommunityQuestion = writable<{ title: string | null }>({
   title: null
@@ -626,19 +611,20 @@ export const currentCommunityQuestion = writable<{ title: string | null }>({
 ```
 
 **Page Component** (`+page.svelte`):
+
 ```svelte
 <script lang="ts">
   import { currentCommunityQuestion } from '$features/community/utils/store';
-  
+
   let question = $state();
-  
+
   async function fetchQuestion() {
     const data = await supabase.from('community_question').select('*').single();
     question = data;
     // Update store - breadcrumb will reactively update!
     currentCommunityQuestion.set({ title: data.title });
   }
-  
+
   $effect(() => {
     fetchQuestion();
   });
@@ -646,20 +632,21 @@ export const currentCommunityQuestion = writable<{ title: string | null }>({
 ```
 
 **Breadcrumb Component** (`lms-breadcrumbs.svelte`):
+
 ```svelte
 <script lang="ts">
   import { createLmsBreadcrumbConfigWithStore } from './breadcrumb-configs';
   import { currentCommunityQuestion } from '$features/community/utils/store';
-  
+
   // Reactive config - updates when store changes
-  const config = $derived(createLmsBreadcrumbConfigWithStore(
-    () => $currentCommunityQuestion.title // Reads reactively!
-  ));
-  
-  // Breadcrumbs automatically update when store changes!
-  const breadcrumbs = $derived(
-    generateBreadcrumbsSync(page.url.pathname, page.url.search, navItems, config)
+  const config = $derived(
+    createLmsBreadcrumbConfigWithStore(
+      () => $currentCommunityQuestion.title // Reads reactively!
+    )
   );
+
+  // Breadcrumbs automatically update when store changes!
+  const breadcrumbs = $derived(generateBreadcrumbsSync(page.url.pathname, page.url.search, navItems, config));
 </script>
 ```
 
@@ -669,11 +656,10 @@ For routes with multiple dynamic segments, use path-based logic:
 
 ```svelte
 <script lang="ts">
-  const config = $derived(createOrgBreadcrumbConfigWithStore(
-    $currentOrgPath,
-    () => {
+  const config = $derived(
+    createOrgBreadcrumbConfigWithStore($currentOrgPath, () => {
       const pathSegments = page.url.pathname.split('/').filter(Boolean);
-      
+
       // Determine which store to read based on route
       if (pathSegments.includes('submissions')) {
         return $submissionStore.title;
@@ -688,8 +674,8 @@ For routes with multiple dynamic segments, use path-based logic:
         return $courseStore.title;
       }
       return null;
-    }
-  ));
+    })
+  );
 </script>
 ```
 
@@ -699,4 +685,3 @@ For routes with multiple dynamic segments, use path-based logic:
 2. **Use `$derived`**: Always wrap config and breadcrumbs in `$derived` for reactivity
 3. **Store Updates**: When you update a store, breadcrumbs automatically update - no manual refresh needed!
 4. **No Async Needed**: Store-based resolvers are synchronous - just return the store value
-
diff --git a/apps/dashboard/ai/PAGE_ROUTE_GUIDE.md b/apps/dashboard/ai/PAGE_ROUTE_GUIDE.md
index b298ede5..c5992c4a 100644
--- a/apps/dashboard/ai/PAGE_ROUTE_GUIDE.md
+++ b/apps/dashboard/ai/PAGE_ROUTE_GUIDE.md
@@ -20,11 +20,13 @@ This guide explains how to create pages and routes in the dashboard application,
 The dashboard has two main route contexts:
 
 ### 1. Organization Routes (`/org/[slug]/...`)
+
 - Uses `OrgSidebar` and `AppHeader`
 - Path pattern: `/org/[slug]/[feature]`
 - Example: `/org/acme/courses`, `/org/acme/settings`
 
 ### 2. LMS Routes (`/lms/...`)
+
 - Uses `LMSSidebar` and `LmsHeader`
 - Path pattern: `/lms/[feature]`
 - Example: `/lms/community`, `/lms/settings`
@@ -38,6 +40,7 @@ The dashboard has two main route contexts:
 **Location**: `apps/dashboard/src/routes/[context]/[feature]/+page.svelte`
 
 **Pattern**:
+
 ```svelte
 <script lang="ts">
   import { FeaturePage } from '$features/[feature]/pages';
@@ -72,6 +75,7 @@ The dashboard has two main route contexts:
 **Location**: `apps/dashboard/src/lib/features/[feature]/pages/[feature].svelte`
 
 **Pattern**:
+
 ```svelte
 <script lang="ts">
   import { Search } from '@cio/ui/custom/search';
@@ -230,6 +234,7 @@ Settings pages follow a specific pattern with layouts and subroutes.
 Feature pages contain all business logic and should be placed in `lib/features/[feature]/pages/`.
 
 **Key Principles**:
+
 - ✅ All business logic goes in the feature page
 - ✅ Use `Page.BodyHeader` for filters, search, and view toggles
 - ✅ Use `Empty` component for empty states
@@ -363,6 +368,7 @@ Feature pages contain all business logic and should be placed in `lib/features/[
 ```
 
 **Key Differences**:
+
 - Org routes use `AppHeader` (includes AppSetup)
 - LMS routes use `LmsHeader` (no AppSetup)
 - Org routes use `OrgSidebar`
@@ -426,11 +432,7 @@ Feature pages contain all business logic and should be placed in `lib/features/[
   <Field.Set>
     <Field.Legend>{$t('form.another_section')}</Field.Legend>
     <Field.Field>
-      <UploadImage
-        bind:avatar
-        src={avatarUrl}
-        change={() => (hasUnsavedChanges = true)}
-      />
+      <UploadImage bind:avatar src={avatarUrl} change={() => (hasUnsavedChanges = true)} />
     </Field.Field>
   </Field.Set>
 </Field.Group>
@@ -554,7 +556,7 @@ For dynamic routes (like `community/[slug]`), add breadcrumb data in the route's
 export async function load({ params }) {
   // Fetch question data
   const question = await fetchQuestion(params.slug);
-  
+
   return {
     breadcrumb: question.title // This will appear in breadcrumbs
   };
@@ -568,6 +570,7 @@ export async function load({ params }) {
 ### Example 1: Simple Feature Page
 
 **Route**: `routes/org/[slug]/courses/+page.svelte`
+
 ```svelte
 <script lang="ts">
   import { CoursesPage } from '$features/courses/pages';
@@ -596,6 +599,7 @@ export async function load({ params }) {
 ### Example 2: Settings Page with Save Action
 
 **Route**: `routes/org/[slug]/settings/customize-lms/+page.svelte`
+
 ```svelte
 <script lang="ts">
   import { CustomizeLmsPage } from '$features/settings/pages';
@@ -642,6 +646,7 @@ export async function load({ params }) {
 ### Example 3: Form Page Component
 
 **Feature Page**: `lib/features/settings/pages/profile.svelte`
+
 ```svelte
 <script lang="ts">
   import { profile } from '$lib/utils/store/user';
@@ -655,11 +660,14 @@ export async function load({ params }) {
   let hasUnsavedChanges = $state(false);
 
   export async function handleUpdate() {
-    await profileApi.submit({
-      fullname: $profile.fullname,
-      username: $profile.username,
-      avatar
-    }, $profile);
+    await profileApi.submit(
+      {
+        fullname: $profile.fullname,
+        username: $profile.username,
+        avatar
+      },
+      $profile
+    );
 
     if (profileApi.success) {
       hasUnsavedChanges = false;
@@ -708,12 +716,14 @@ export async function load({ params }) {
 When creating a new page, follow this checklist:
 
 ### Route Setup
+
 - [ ] Create route file at `routes/[context]/[feature]/+page.svelte`
 - [ ] Add `Page.Root`, `Page.Header`, `Page.Body` structure
 - [ ] Add `<svelte:head>` with page title
 - [ ] Import and render feature page component
 
 ### Feature Page
+
 - [ ] Create feature page at `lib/features/[feature]/pages/[feature].svelte`
 - [ ] Export from `lib/features/[feature]/pages/index.ts`
 - [ ] Use `Page.BodyHeader` for filters/search
@@ -721,6 +731,7 @@ When creating a new page, follow this checklist:
 - [ ] Handle loading states
 
 ### Forms (if applicable)
+
 - [ ] Use `Field.Group` pattern (NOT Row/Grid/Column)
 - [ ] Use `Field.Set` for sections
 - [ ] Use `Field.Separator` between sections
@@ -729,6 +740,7 @@ When creating a new page, follow this checklist:
 - [ ] Add `UnsavedChanges` component if needed
 
 ### Navigation (if needed)
+
 - [ ] Add item to `org-navigation.ts` or `lms-navigation.ts`
 - [ ] Set appropriate `matchPattern` for active state
 - [ ] Add icon component
@@ -736,6 +748,7 @@ When creating a new page, follow this checklist:
 - [ ] Configure dynamic segments if needed
 
 ### Settings Pages (if applicable)
+
 - [ ] Create `+layout.svelte` with `Page.Root` wrapper
 - [ ] Create default `+page.svelte` for main settings
 - [ ] Create subroute `+page.svelte` files for each subroute
@@ -755,6 +768,7 @@ When creating a new page, follow this checklist:
 ### Page Actions
 
 Actions in `Page.Action` typically include:
+
 - Save/Update buttons
 - Create/Add buttons
 - Export buttons
@@ -763,6 +777,7 @@ Actions in `Page.Action` typically include:
 ### Loading States
 
 Use skeleton loaders or spinner components:
+
 ```svelte
 {#if isLoading}
   <FeatureLoader />
@@ -776,13 +791,9 @@ Use skeleton loaders or spinner components:
 ### Empty States
 
 Always use the `Empty` component:
+
 ```svelte
-<Empty
-  title={$t('feature.empty_title')}
-  description={$t('feature.empty_description')}
-  icon={SomeIcon}
-  variant="page"
->
+<Empty title={$t('feature.empty_title')} description={$t('feature.empty_description')} icon={SomeIcon} variant="page">
   <ActionButton />
 </Empty>
 ```
@@ -807,6 +818,7 @@ Always use the `Empty` component:
 If you encounter old patterns, migrate them:
 
 ### Old: Row/Grid/Column Pattern
+
 ```svelte
 <!-- OLD - DON'T USE -->
 <Grid>
@@ -822,6 +834,7 @@ If you encounter old patterns, migrate them:
 ```
 
 ### New: Field.Group Pattern
+
 ```svelte
 <!-- NEW - USE THIS -->
 <Field.Group class="max-w-md! w-full px-2">
@@ -843,4 +856,3 @@ If you encounter old patterns, migrate them:
 - See existing pages in `routes/org/[slug]/` and `routes/lms/` for examples
 - See `lib/features/settings/pages/` for form examples
 - See `lib/features/community/pages/` for list page examples
-
diff --git a/apps/dashboard/src/app.html b/apps/dashboard/src/app.html
index d98abff3..b8599152 100644
--- a/apps/dashboard/src/app.html
+++ b/apps/dashboard/src/app.html
@@ -1,31 +1,33 @@
 <!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta name="theme-color" content="#333333" />
 
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-  <meta name="theme-color" content="#333333" />
+    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
+    <link rel="icon" type="image/png" href="/favicon.ico" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/logo-32.png" />
+    <link rel="stylesheet" href="https://cdn.plyr.io/3.7.3/plyr.css" />
 
-  <link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
-  <link rel="icon" type="image/png" href="/favicon.ico" />
-  <link rel="icon" type="image/png" sizes="32x32" href="/logo-32.png" />
-  <link rel="stylesheet" href="https://cdn.plyr.io/3.7.3/plyr.css" />
+    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
+    <link rel="icon" type="image/png" href="/favicon.ico" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/logo-32.png" />
+    <link rel="stylesheet" href="https://cdn.plyr.io/3.7.3/plyr.css" />
 
-  <link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
-  <link rel="icon" type="image/png" href="/favicon.ico" />
-  <link rel="icon" type="image/png" sizes="32x32" href="/logo-32.png" />
-  <link rel="stylesheet" href="https://cdn.plyr.io/3.7.3/plyr.css" />
+    <script
+      nonce="%sveltekit.nonce%"
+      defer
+      src="https://umami.hz.oncws.com/script.js"
+      data-website-id="80a9544a-4dda-4c91-b62f-b6be7a8a3b5c"
+    ></script>
 
-  <script nonce="%sveltekit.nonce%" defer src="https://umami.hz.oncws.com/script.js"
-    data-website-id="80a9544a-4dda-4c91-b62f-b6be7a8a3b5c"></script>
+    <script nonce="%sveltekit.nonce%" src="https://cdn.plyr.io/3.7.3/plyr.js"></script>
 
-  <script nonce="%sveltekit.nonce%" src="https://cdn.plyr.io/3.7.3/plyr.js"></script>
+    %sveltekit.head%
+  </head>
 
-  %sveltekit.head%
-</head>
-
-<body data-sveltekit-preload-data="hover" class="">
-  <div style="display: contents" class="theme-container">%sveltekit.body%</div>
-</body>
-
-</html>
\ No newline at end of file
+  <body data-sveltekit-preload-data="hover" class="">
+    <div style="display: contents" class="theme-container">%sveltekit.body%</div>
+  </body>
+</html>
diff --git a/apps/dashboard/src/lib/components/Course/components/Analytics/AnalyticsSkeleton.svelte b/apps/dashboard/src/lib/components/Course/components/Analytics/AnalyticsSkeleton.svelte
index 56a831ba..5b322406 100644
--- a/apps/dashboard/src/lib/components/Course/components/Analytics/AnalyticsSkeleton.svelte
+++ b/apps/dashboard/src/lib/components/Course/components/Analytics/AnalyticsSkeleton.svelte
@@ -13,8 +13,8 @@
               <Skeleton class="h-[48px] w-[48px]" />
               <div class="flex-1">
                 <Skeleton class="h-[48px] w-[48px]" />
-                <Skeleton class="h-[16px] w-[80px] mb-2" />
-                <Skeleton class="h-[24px] w-[40px] mb-1" />
+                <Skeleton class="mb-2 h-[16px] w-[80px]" />
+                <Skeleton class="mb-1 h-[24px] w-[40px]" />
                 <Skeleton class="h-[12px] w-[60px]" />
               </div>
             </div>
@@ -26,10 +26,10 @@
     <!-- Charts Section Skeleton -->
     <div class="mb-12">
       <div class="rounded-lg border border-gray-200 bg-white p-6 dark:border-neutral-700 dark:bg-neutral-800">
-        <Skeleton class="h-[24px] w-[200px] mb-6" />
+        <Skeleton class="mb-6 h-[24px] w-[200px]" />
         <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
-          <Skeleton class="w-full h-[300px]" />
-          <Skeleton class="w-full h-[300px]" />
+          <Skeleton class="h-[300px] w-full" />
+          <Skeleton class="h-[300px] w-full" />
         </div>
       </div>
     </div>
@@ -37,7 +37,7 @@
     <!-- Students Table Skeleton -->
     <div class="rounded-lg border border-gray-200 bg-white dark:border-neutral-700 dark:bg-neutral-800">
       <div class="border-b border-gray-200 px-6 py-4 dark:border-neutral-700">
-        <Skeleton class="h-[24px] w-[200px] mb-6" />
+        <Skeleton class="mb-6 h-[24px] w-[200px]" />
       </div>
       <div class="p-6">
         <div class="space-y-4">
@@ -45,7 +45,7 @@
             <div class="flex items-center space-x-4">
               <Skeleton class="h-[32px] w-[32px]" />
               <div class="flex-1">
-                <Skeleton class="h-[16px] w-[150px] mb-1" />
+                <Skeleton class="mb-1 h-[16px] w-[150px]" />
                 <Skeleton class="h-[12px] w-[200px]" />
               </div>
               <Skeleton class="h-[16px] w-[80px]" />
diff --git a/apps/dashboard/src/lib/components/Course/components/Ceritficate/Design.svelte b/apps/dashboard/src/lib/components/Course/components/Ceritficate/Design.svelte
index f666cbcf..60a42743 100644
--- a/apps/dashboard/src/lib/components/Course/components/Ceritficate/Design.svelte
+++ b/apps/dashboard/src/lib/components/Course/components/Ceritficate/Design.svelte
@@ -45,7 +45,7 @@
     isSaving = true;
 
     try {
-      // Prevent free plan users from bypassing UI restrictions  
+      // Prevent free plan users from bypassing UI restrictions
       if ($isFreePlan) {
         errors.description = 'Certificate customization is only available on paid plans';
         throw new Error(errors.description);
diff --git a/apps/dashboard/src/lib/components/Course/components/Ceritficate/IssueCertificateModal.svelte b/apps/dashboard/src/lib/components/Course/components/Ceritficate/IssueCertificateModal.svelte
index 52231b39..e1e4eb84 100644
--- a/apps/dashboard/src/lib/components/Course/components/Ceritficate/IssueCertificateModal.svelte
+++ b/apps/dashboard/src/lib/components/Course/components/Ceritficate/IssueCertificateModal.svelte
@@ -28,47 +28,47 @@
       <Dialog.Title>Send Certificate</Dialog.Title>
     </Dialog.Header>
     <main>
-    <div>
-      <div class="mb-4 flex items-center space-x-2">
-        <Switch id="auto-certificate" bind:checked={isAutomatic} />
-        <Label for="auto-certificate" class="text-sm font-medium">Automatic</Label>
-      </div>
-      <p class="my-4 text-sm font-medium">
-        If you set this as automatic, certificates will be issued after the learner completes the course.
-      </p>
-    </div>
-    <p class="my-4 text-xs font-normal text-gray-500">or send a personalised/ custom certificate below:</p>
-    <form onsubmit={preventDefault(issueCertificate)}>
-      <div class="flex w-full flex-col gap-2 md:flex-row">
-        <InputField
-          label="Email address of the student"
-          className="w-full my-4"
-          labelClassName="text-xs font-normal"
-          placeholder="email,comma seperated"
-          bind:value={$issueCertificateModal.email}
-        />
-        <InputField
-          label="Schedule date"
-          className="w-full my-4"
-          labelClassName="text-xs font-normal"
-          placeholder="12/06/2023"
-          bind:value={$issueCertificateModal.date}
-        />
+      <div>
+        <div class="mb-4 flex items-center space-x-2">
+          <Switch id="auto-certificate" bind:checked={isAutomatic} />
+          <Label for="auto-certificate" class="text-sm font-medium">Automatic</Label>
+        </div>
+        <p class="my-4 text-sm font-medium">
+          If you set this as automatic, certificates will be issued after the learner completes the course.
+        </p>
       </div>
+      <p class="my-4 text-xs font-normal text-gray-500">or send a personalised/ custom certificate below:</p>
+      <form onsubmit={preventDefault(issueCertificate)}>
+        <div class="flex w-full flex-col gap-2 md:flex-row">
+          <InputField
+            label="Email address of the student"
+            className="w-full my-4"
+            labelClassName="text-xs font-normal"
+            placeholder="email,comma seperated"
+            bind:value={$issueCertificateModal.email}
+          />
+          <InputField
+            label="Schedule date"
+            className="w-full my-4"
+            labelClassName="text-xs font-normal"
+            placeholder="12/06/2023"
+            bind:value={$issueCertificateModal.date}
+          />
+        </div>
 
-      <TextareaField
-        label="Add a personalized message"
-        labelClassName="text-xs font-normal"
-        bind:value={$issueCertificateModal.message}
-        rows={2}
-        placeholder="your message here"
-        className="mb-4"
-      />
+        <TextareaField
+          label="Add a personalized message"
+          labelClassName="text-xs font-normal"
+          bind:value={$issueCertificateModal.message}
+          rows={2}
+          placeholder="your message here"
+          className="mb-4"
+        />
 
-      <div class="mt-5 flex w-full items-end justify-end">
-        <Button type="submit">Issue certificate</Button>
-      </div>
-    </form>
-  </main>
+        <div class="mt-5 flex w-full items-end justify-end">
+          <Button type="submit">Issue certificate</Button>
+        </div>
+      </form>
+    </main>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/apps/dashboard/src/lib/components/Course/components/Lesson/ActivateSectionsModal.svelte b/apps/dashboard/src/lib/components/Course/components/Lesson/ActivateSectionsModal.svelte
index 12a53b59..d33d51f1 100644
--- a/apps/dashboard/src/lib/components/Course/components/Lesson/ActivateSectionsModal.svelte
+++ b/apps/dashboard/src/lib/components/Course/components/Lesson/ActivateSectionsModal.svelte
@@ -39,34 +39,28 @@
     if (!isOpen) handleClose();
   }}
 >
-  <Dialog.Content class="w-[80%] md:w-[65%] max-w-xl">
+  <Dialog.Content class="w-[80%] max-w-xl md:w-[65%]">
     <Dialog.Header>
       <Dialog.Title>{$t(`course.navItem.lessons.section_prompt.header`)}</Dialog.Title>
     </Dialog.Header>
     <div class="flex w-full flex-col items-center">
-    <div class="mb-8">
-      <h3 class="text-center text-2xl">
-        {$t('course.navItem.lessons.section_prompt.title')}
-      </h3>
-      <p class="max-w-md text-center">
-        {$t('course.navItem.lessons.section_prompt.description')}
-      </p>
-    </div>
+      <div class="mb-8">
+        <h3 class="text-center text-2xl">
+          {$t('course.navItem.lessons.section_prompt.title')}
+        </h3>
+        <p class="max-w-md text-center">
+          {$t('course.navItem.lessons.section_prompt.description')}
+        </p>
+      </div>
 
-    <div class="flex gap-2">
-      <Button
-        variant="outline"
-        onclick={handleClose}
-      >
-        {$t('course.navItem.lessons.section_prompt.cancel')}
-      </Button>
-      <Button
-        onclick={activate}
-        loading={isActivating}
-      >
-        {$t('course.navItem.lessons.section_prompt.activate')}
-      </Button>
+      <div class="flex gap-2">
+        <Button variant="outline" onclick={handleClose}>
+          {$t('course.navItem.lessons.section_prompt.cancel')}
+        </Button>
+        <Button onclick={activate} loading={isActivating}>
+          {$t('course.navItem.lessons.section_prompt.activate')}
+        </Button>
+      </div>
     </div>
-  </div>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/apps/dashboard/src/lib/components/Course/components/Lesson/DeleteLessonConfirmation.svelte b/apps/dashboard/src/lib/components/Course/components/Lesson/DeleteLessonConfirmation.svelte
index 1743e01d..17114237 100644
--- a/apps/dashboard/src/lib/components/Course/components/Lesson/DeleteLessonConfirmation.svelte
+++ b/apps/dashboard/src/lib/components/Course/components/Lesson/DeleteLessonConfirmation.svelte
@@ -22,29 +22,23 @@
     if (!isOpen) openDeleteModal = false;
   }}
 >
-  <Dialog.Content class="w-96 px-6 pt-2 pb-6">
+  <Dialog.Content class="w-96 px-6 pb-6 pt-2">
     <Dialog.Header>
       <Dialog.Title>{$t('delete_modal.label')}</Dialog.Title>
     </Dialog.Header>
     <div>
-    <h1 class="text-lg dark:text-white">
-      {$t('delete_modal.content')}?
-    </h1>
+      <h1 class="text-lg dark:text-white">
+        {$t('delete_modal.content')}?
+      </h1>
 
-    <div class="mt-5 flex items-center justify-between">
-      <Button
-        variant="outline"
-        onclick={() => (openDeleteModal = false)}
-      >
-        {$t('delete_modal.no')}
-      </Button>
-      <Button
-        variant="outline"
-        onclick={handleDelete}
-      >
-        {$t('delete_modal.yes')}
-      </Button>
+      <div class="mt-5 flex items-center justify-between">
+        <Button variant="outline" onclick={() => (openDeleteModal = false)}>
+          {$t('delete_modal.no')}
+        </Button>
+        <Button variant="outline" onclick={handleDelete}>
+          {$t('delete_modal.yes')}
+        </Button>
+      </div>
     </div>
-  </div>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/apps/dashboard/src/lib/components/Course/components/Lesson/Exercise/DeleteConfirmation.svelte b/apps/dashboard/src/lib/components/Course/components/Lesson/Exercise/DeleteConfirmation.svelte
index 335af53e..0d518c66 100644
--- a/apps/dashboard/src/lib/components/Course/components/Lesson/Exercise/DeleteConfirmation.svelte
+++ b/apps/dashboard/src/lib/components/Course/components/Lesson/Exercise/DeleteConfirmation.svelte
@@ -7,37 +7,35 @@
   let { onDelete = () => {}, onCancel = () => {} } = $props();
 </script>
 
-<Dialog.Root
-  bind:open={$deleteConfirmation.open}
->
+<Dialog.Root bind:open={$deleteConfirmation.open}>
   <Dialog.Content class="w-96">
     <Dialog.Header>
       <Dialog.Title>{$t('course.navItem.lessons.exercises.all_exercises.delete_confirmation.title')}</Dialog.Title>
     </Dialog.Header>
     <div>
-    <p class="mt-0 text-base dark:text-white">
-      {$t('course.navItem.lessons.exercises.all_exercises.delete_confirmation.sure')}
-    </p>
+      <p class="mt-0 text-base dark:text-white">
+        {$t('course.navItem.lessons.exercises.all_exercises.delete_confirmation.sure')}
+      </p>
 
-    <div class="mt-5 flex items-center justify-between">
-      <Button
-        variant="outline"
-        onclick={() => {
-          $deleteConfirmation.open = false;
-          onCancel();
-        }}
-      >
-        {$t('course.navItem.lessons.exercises.all_exercises.delete_confirmation.no')}
-      </Button>
-      <Button
-        onclick={() => {
-          onDelete();
-          $deleteConfirmation.open = false;
-        }}
-      >
-        {$t('course.navItem.lessons.exercises.all_exercises.delete_confirmation.yes')}
-      </Button>
+      <div class="mt-5 flex items-center justify-between">
+        <Button
+          variant="outline"
+          onclick={() => {
+            $deleteConfirmation.open = false;
+            onCancel();
+          }}
+        >
+          {$t('course.navItem.lessons.exercises.all_exercises.delete_confirmation.no')}
+        </Button>
+        <Button
+          onclick={() => {
+            onDelete();
+            $deleteConfirmation.open = false;
+          }}
+        >
+          {$t('course.navItem.lessons.exercises.all_exercises.delete_confirmation.yes')}
+        </Button>
+      </div>
     </div>
-  </div>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/apps/dashboard/src/lib/components/Course/components/Lesson/Exercise/MarkExerciseModal.svelte b/apps/dashboard/src/lib/components/Course/components/Lesson/Exercise/MarkExerciseModal.svelte
index f5b57598..19a6a63c 100644
--- a/apps/dashboard/src/lib/components/Course/components/Lesson/Exercise/MarkExerciseModal.svelte
+++ b/apps/dashboard/src/lib/components/Course/components/Lesson/Exercise/MarkExerciseModal.svelte
@@ -236,108 +236,108 @@
     if (!isOpen) onClose();
   }}
 >
-  <Dialog.Content class="w-4/5 h-[90%] flex items-start !max-h-full h-[85%] py-0 px-4">
+  <Dialog.Content class="flex h-[85%] h-[90%] !max-h-full w-4/5 items-start px-4 py-0">
     <Dialog.Header class="py-2">
       <Dialog.Title class="text-base font-semibold">{data.title}</Dialog.Title>
     </Dialog.Header>
     <div class="mt-2 h-full w-full">
-    {#if openDeletePrompt}
-      <div class="mx-auto w-96 rounded-md border border-gray-300 p-3">
-        <h1 class="text-lg dark:text-white">
-          {$t('delete_modal.content')}
-        </h1>
+      {#if openDeletePrompt}
+        <div class="mx-auto w-96 rounded-md border border-gray-300 p-3">
+          <h1 class="text-lg dark:text-white">
+            {$t('delete_modal.content')}
+          </h1>
 
-        <div class="mt-5 flex items-center justify-between">
-          <Button variant="outline" onclick={() => (openDeletePrompt = false)} disabled={isDeleting}>
-            {$t('delete_modal.no')}
-          </Button>
-          <Button variant="outline" onclick={handleDeleteSubmission} loading={isDeleting}>
-            {$t('delete_modal.yes')}
-          </Button>
+          <div class="mt-5 flex items-center justify-between">
+            <Button variant="outline" onclick={() => (openDeletePrompt = false)} disabled={isDeleting}>
+              {$t('delete_modal.no')}
+            </Button>
+            <Button variant="outline" onclick={handleDeleteSubmission} loading={isDeleting}>
+              {$t('delete_modal.yes')}
+            </Button>
+          </div>
         </div>
-      </div>
-    {:else}
-      <Preview
-        questions={sortedQuestions}
-        questionnaireMetaData={{
-          answers: data.answers || {},
-          isFinished: true
-        }}
-        bind:grades={data.questionAnswerByPoint}
-        bind:reasons
-        bind:isGradeWithAI
-        bind:isLoading
-        disableGrading={false}
-      />
-    {/if}
-  </div>
-  <div class="sticky top-0 ml-4 mt-2 w-2/5">
-    <div class="rounded-md border border-gray-300">
-      <div
-        class="flex items-center justify-between gap-1 border-b border-l-0 border-r-0 border-t-0 border-gray-300 p-3"
-      >
-        <p class="text-base dark:text-white">
-          {$t('course.navItem.submissions.grading_modal.details')}
-          {#if data.isEarly}
-            <span class="badge ml-2 rounded-sm bg-green-500 px-2 text-sm text-white">
-              {$t('course.navItem.submissions.grading_modal.early')}</span
+      {:else}
+        <Preview
+          questions={sortedQuestions}
+          questionnaireMetaData={{
+            answers: data.answers || {},
+            isFinished: true
+          }}
+          bind:grades={data.questionAnswerByPoint}
+          bind:reasons
+          bind:isGradeWithAI
+          bind:isLoading
+          disableGrading={false}
+        />
+      {/if}
+    </div>
+    <div class="sticky top-0 ml-4 mt-2 w-2/5">
+      <div class="rounded-md border border-gray-300">
+        <div
+          class="flex items-center justify-between gap-1 border-b border-l-0 border-r-0 border-t-0 border-gray-300 p-3"
+        >
+          <p class="text-base dark:text-white">
+            {$t('course.navItem.submissions.grading_modal.details')}
+            {#if data.isEarly}
+              <span class="badge ml-2 rounded-sm bg-green-500 px-2 text-sm text-white">
+                {$t('course.navItem.submissions.grading_modal.early')}</span
+              >
+            {:else}
+              <span class="badge ml-2 rounded-sm bg-red-500 px-2 text-sm text-white">
+                {$t('course.navItem.submissions.grading_modal.late')}
+              </span>
+            {/if}
+          </p>
+
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger
+              class="flex h-8 w-8 items-center justify-center rounded-md hover:bg-gray-100 dark:hover:bg-neutral-700"
             >
-          {:else}
-            <span class="badge ml-2 rounded-sm bg-red-500 px-2 text-sm text-white">
-              {$t('course.navItem.submissions.grading_modal.late')}
-            </span>
-          {/if}
-        </p>
+              <EllipsisVerticalIcon class="h-5 w-5" />
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content align="end">
+              <DropdownMenu.Item
+                class="text-red-600"
+                onclick={() => {
+                  openDeletePrompt = true;
+                }}
+              >
+                {$t('delete_modal.label')}
+              </DropdownMenu.Item>
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
+        </div>
 
-        <DropdownMenu.Root>
-          <DropdownMenu.Trigger
-            class="flex h-8 w-8 items-center justify-center rounded-md hover:bg-gray-100 dark:hover:bg-neutral-700"
-          >
-            <EllipsisVerticalIcon class="h-5 w-5" />
-          </DropdownMenu.Trigger>
-          <DropdownMenu.Content align="end">
-            <DropdownMenu.Item
-              class="text-red-600"
-              onclick={() => {
-                openDeletePrompt = true;
-              }}
-            >
-              {$t('delete_modal.label')}
-            </DropdownMenu.Item>
-          </DropdownMenu.Content>
-        </DropdownMenu.Root>
-      </div>
+        <div class="flex items-center space-x-4 px-3 py-2 text-sm">
+          <p class="text-sm font-semibold text-gray-500 dark:text-white">
+            {$t('course.navItem.submissions.grading_modal.total_grade')}:
+          </p>
 
-      <div class="flex items-center space-x-4 px-3 py-2 text-sm">
-        <p class="text-sm font-semibold text-gray-500 dark:text-white">
-          {$t('course.navItem.submissions.grading_modal.total_grade')}:
-        </p>
-
-        <Badge class="w-fit rounded-md bg-gray-100 font-semibold text-black dark:bg-neutral-700 dark:text-white">
-          {total}/{maxPoints}
-        </Badge>
-      </div>
-      <!-- <div class="flex items-center text-sm p-3">
+          <Badge class="w-fit rounded-md bg-gray-100 font-semibold text-black dark:bg-neutral-700 dark:text-white">
+            {total}/{maxPoints}
+          </Badge>
+        </div>
+        <!-- <div class="flex items-center text-sm p-3">
         <p class="dark:text-white w-1/2">Status</p>
         <div class="flex items-center">
           <p class="dark:text-white rounded-full w-5 h-5 bg-yellow-300 mr-2" />
           <p class="dark:text-white">Grading</p>
         </div>
       </div> -->
-      <div class="flex items-center space-x-4 px-3 py-2 text-sm">
-        <p class="text-sm font-semibold text-gray-500 dark:text-white">
-          {$t('course.navItem.submissions.grading_modal.student')}:
-        </p>
-        {#if data.student}
-          <div class="flex flex-row items-center justify-center rounded-md bg-gray-100 p-[6px] dark:bg-neutral-700">
-            <img alt="Student avatar" class="flex h-5 w-5 rounded-full" src={data.student.avatar_url} />
-            <p class="ml-2 line-clamp-1 text-sm font-semibold dark:text-white">
-              {data.student.fullname}
-            </p>
-          </div>
-        {/if}
-      </div>
-      <!-- <div class="flex items-center space-x-4 text-sm px-3 py-2">
+        <div class="flex items-center space-x-4 px-3 py-2 text-sm">
+          <p class="text-sm font-semibold text-gray-500 dark:text-white">
+            {$t('course.navItem.submissions.grading_modal.student')}:
+          </p>
+          {#if data.student}
+            <div class="flex flex-row items-center justify-center rounded-md bg-gray-100 p-[6px] dark:bg-neutral-700">
+              <img alt="Student avatar" class="flex h-5 w-5 rounded-full" src={data.student.avatar_url} />
+              <p class="ml-2 line-clamp-1 text-sm font-semibold dark:text-white">
+                {data.student.fullname}
+              </p>
+            </div>
+          {/if}
+        </div>
+        <!-- <div class="flex items-center space-x-4 text-sm px-3 py-2">
         <p class="dark:text-white text-sm text-gray-500 font-semibold">Assesment Type:</p>
         <Tag
           class="dark:text-white font-semibold bg-gray-100 dark:bg-neutral-700 rounded-md text-black w-fit"
@@ -345,68 +345,68 @@
         >
       </div> -->
 
-      <div class="flex flex-col items-start px-3 py-2 text-sm">
-        <p class="font-semibold text-gray-500 dark:text-white">
-          {$t('course.navItem.submissions.grading_modal.status')}:
-        </p>
-        <Select.Root
-          type="single"
-          value={status.id.toString()}
-          onValueChange={(value) => {
-            if (value) {
-              handleStatusChange(value);
-            }
-          }}
-        >
-          <Select.Trigger class="w-full">
-            {status.text}
-          </Select.Trigger>
-          <Select.Content>
-            {#each SELECTABLE_STATUS as statusOption}
-              <Select.Item value={statusOption.id.toString()}>
-                {statusOption.text}
-              </Select.Item>
-            {/each}
-          </Select.Content>
-        </Select.Root>
-      </div>
-
-      <div class="flex flex-col items-start px-3 py-2 text-sm">
-        <p class="font-semibold text-gray-500 dark:text-white">
-          {$t('course.navItem.submissions.grading_modal.add_comment')}:
-        </p>
-        <TextareaField
-          bgColor="bg-gray-100 dark:bg-neutral-700"
-          className="font-semibold"
-          placeholder={$t('course.navItem.submissions.grading_modal.add_comment_placeholder')}
-          bind:value={data.feedback}
-        />
-      </div>
-
-      <div class="flex w-full flex-col space-y-3 px-3 py-2">
-        <Button variant="outline" onclick={gradeWithAI} class="w-full">
-          <img src="/ai.svg" alt="ai" />
-          <p class="text-sm font-semibold">
-            {$t('course.navItem.submissions.grading_modal.grade_with_ai')}
+        <div class="flex flex-col items-start px-3 py-2 text-sm">
+          <p class="font-semibold text-gray-500 dark:text-white">
+            {$t('course.navItem.submissions.grading_modal.status')}:
           </p>
-        </Button>
-        <Button
-          onclick={() => {
-            handleSave(data);
-            // onClose();
-          }}
-          loading={isSaving}
-          class="w-full"
-        >
-          {$t('course.navItem.submissions.grading_modal.submit_grades')}
-        </Button>
-      </div>
-      <!-- <div class="flex items-center text-sm p-3">
+          <Select.Root
+            type="single"
+            value={status.id.toString()}
+            onValueChange={(value) => {
+              if (value) {
+                handleStatusChange(value);
+              }
+            }}
+          >
+            <Select.Trigger class="w-full">
+              {status.text}
+            </Select.Trigger>
+            <Select.Content>
+              {#each SELECTABLE_STATUS as statusOption}
+                <Select.Item value={statusOption.id.toString()}>
+                  {statusOption.text}
+                </Select.Item>
+              {/each}
+            </Select.Content>
+          </Select.Root>
+        </div>
+
+        <div class="flex flex-col items-start px-3 py-2 text-sm">
+          <p class="font-semibold text-gray-500 dark:text-white">
+            {$t('course.navItem.submissions.grading_modal.add_comment')}:
+          </p>
+          <TextareaField
+            bgColor="bg-gray-100 dark:bg-neutral-700"
+            className="font-semibold"
+            placeholder={$t('course.navItem.submissions.grading_modal.add_comment_placeholder')}
+            bind:value={data.feedback}
+          />
+        </div>
+
+        <div class="flex w-full flex-col space-y-3 px-3 py-2">
+          <Button variant="outline" onclick={gradeWithAI} class="w-full">
+            <img src="/ai.svg" alt="ai" />
+            <p class="text-sm font-semibold">
+              {$t('course.navItem.submissions.grading_modal.grade_with_ai')}
+            </p>
+          </Button>
+          <Button
+            onclick={() => {
+              handleSave(data);
+              // onClose();
+            }}
+            loading={isSaving}
+            class="w-full"
+          >
+            {$t('course.navItem.submissions.grading_modal.submit_grades')}
+          </Button>
+        </div>
+        <!-- <div class="flex items-center text-sm p-3">
         <p class="dark:text-white w-1/2">Teacher</p>
         <p class="dark:text-white">rotimi-best</p>
       </div> -->
+      </div>
     </div>
-  </div>
   </Dialog.Content>
 </Dialog.Root>
 
diff --git a/apps/dashboard/src/lib/components/Course/components/Lesson/Exercise/OrderModal.svelte b/apps/dashboard/src/lib/components/Course/components/Lesson/Exercise/OrderModal.svelte
index 0d58361c..5beb0d19 100644
--- a/apps/dashboard/src/lib/components/Course/components/Lesson/Exercise/OrderModal.svelte
+++ b/apps/dashboard/src/lib/components/Course/components/Lesson/Exercise/OrderModal.svelte
@@ -71,34 +71,34 @@
       <Dialog.Title>{$t('course.navItem.lessons.exercises.all_exercises.order_questions')}</Dialog.Title>
     </Dialog.Header>
     <section
-    use:dndzone={{
-      items,
-      flipDurationMs,
-      dropTargetStyle: {
-        border: '2px #1d4ed8 solid',
-        'border-style': 'dashed'
-      }
-    }}
-    onconsider={handleDndConsider}
-    onfinalize={handleDndFinalize}
-    class="w-full"
-  >
-    {#each items as item (item.id)}
-      <div
-        animate:flip={{ duration: flipDurationMs }}
-        class="ui:border-primary flex items-center rounded-md border p-4"
-      >
-        {#if item.type === 1}
-          <SquareCheckIcon size={16} />
-        {:else if item.type === 2}
-          <CircleDotIcon size={16} />
-        {:else}
-          <TablePropertiesIcon size={16} />
-        {/if}
-        {` ${item.name}`}
-      </div>
-    {/each}
-  </section>
+      use:dndzone={{
+        items,
+        flipDurationMs,
+        dropTargetStyle: {
+          border: '2px #1d4ed8 solid',
+          'border-style': 'dashed'
+        }
+      }}
+      onconsider={handleDndConsider}
+      onfinalize={handleDndFinalize}
+      class="w-full"
+    >
+      {#each items as item (item.id)}
+        <div
+          animate:flip={{ duration: flipDurationMs }}
+          class="ui:border-primary flex items-center rounded-md border p-4"
+        >
+          {#if item.type === 1}
+            <SquareCheckIcon size={16} />
+          {:else if item.type === 2}
+            <CircleDotIcon size={16} />
+          {:else}
+            <TablePropertiesIcon size={16} />
+          {/if}
+          {` ${item.name}`}
+        </div>
+      {/each}
+    </section>
   </Dialog.Content>
 </Dialog.Root>
 
diff --git a/apps/dashboard/src/lib/components/Course/components/Lesson/Exercises/NewExerciseModal.svelte b/apps/dashboard/src/lib/components/Course/components/Lesson/Exercises/NewExerciseModal.svelte
index 5b0ef451..4466a8b0 100644
--- a/apps/dashboard/src/lib/components/Course/components/Lesson/Exercises/NewExerciseModal.svelte
+++ b/apps/dashboard/src/lib/components/Course/components/Lesson/Exercises/NewExerciseModal.svelte
@@ -153,7 +153,7 @@
     if (!isOpen) handleCancelAddExercise();
   }}
 >
-  <Dialog.Content class="max-w-2xl w-4/5">
+  <Dialog.Content class="w-4/5 max-w-2xl">
     <Dialog.Header>
       <Dialog.Title>{$t('course.navItem.lessons.exercises.new_exercise_modal.heading')}</Dialog.Title>
     </Dialog.Header>
@@ -161,147 +161,147 @@
       <Confetti />
     {/if}
     {#if step === 0}
-    <div>
-      <h2 class="my-5 text-2xl font-medium">
-        {$t('course.navItem.lessons.exercises.new_exercise_modal.how')}?
-      </h2>
-
-      <div class="my-8 flex justify-between gap-2">
-        {#each options as option}
-          <button
-            class="h-60 w-[261px] rounded-md border-2 p-5 dark:bg-neutral-700 {option.type === type
-              ? 'border-primary-400'
-              : `border-gray-200 dark:border-neutral-600 ${
-                  !option.isDisabled && 'hover:scale-95'
-                }`} flex flex-col {option.isDisabled && 'cursor-not-allowed opacity-60'} transition-all ease-in-out"
-            type="button"
-            onclick={!option.isDisabled ? () => (type = option.type) : undefined}
-          >
-            <div class="flex h-[70%] w-full flex-row-reverse">
-              <CircleCheckIcon size={16} filled={option.type === type} />
-            </div>
-
-            <div>
-              <p class="flex items-center text-start">
-                <span class="mr-2 text-sm">{option.title}</span>
-                {#if option.isDisabled}
-                  <ComingSoon />
-                {/if}
-              </p>
-              <p class="text-start text-xs font-light">{option.subtitle}</p>
-            </div>
-          </button>
-        {/each}
-      </div>
-
-      <div class="mt-8 flex flex-row-reverse items-center">
-        <Button onclick={handleNext}>
-          {$t('course.navItem.lessons.exercises.new_exercise_modal.next')}
-        </Button>
-      </div>
-    </div>
-  {:else if step === 1}
-    {#if type === Type.SCRATCH}
-      <div class="m-auto flex min-h-[300px] w-96 items-center justify-center">
-        <div class="w-full">
-          <h2 class="my-5 text-2xl font-medium">
-            {$t('course.navItem.lessons.exercises.new_exercise_modal.title')}
-          </h2>
-          <InputField
-            bind:value={title}
-            autoFocus={true}
-            placeholder={$t('course.navItem.lessons.exercises.new_exercise_modal.title_placeholder')}
-            className="my-4"
-          />
-
-          <div class="mt-5 flex items-center justify-between">
-            <Button variant="outline" onclick={handleBack}>
-              {$t('course.navItem.lessons.exercises.new_exercise_modal.back')}
-            </Button>
-            <Button onclick={handleAddExercise}>
-              {$t('course.navItem.lessons.exercises.new_exercise_modal.finish')}
-            </Button>
-          </div>
-        </div>
-      </div>
-    {:else if type === Type.TEMPLATE}
       <div>
-        <h2 class="m-0 mb-2 text-2xl font-medium">
-          {$t('course.navItem.lessons.exercises.new_exercise_modal.select_template')}
+        <h2 class="my-5 text-2xl font-medium">
+          {$t('course.navItem.lessons.exercises.new_exercise_modal.how')}?
         </h2>
 
-        <div>
-          <div class="mb-5 flex items-center gap-2">
-            {#each tags as tag}
-              <Badge class={selectedTag === tag ? 'bg-primary-400' : ''} onclick={() => handleTagSelection(tag)}
-                >{tag}</Badge
-              >
-            {/each}
-          </div>
-
-          {#if exerciseTemplateApi.isLoading}
-            <div class="grid grid-cols-2 items-start gap-4 lg:grid-cols-3 xl:grid-cols-4">
-              {#each Array(16) as _}
-                <div
-                  class="h-[140px] w-full rounded-md border-2 border-gray-200 p-5 dark:border-neutral-600 dark:bg-neutral-700"
-                >
-                  <div class="flex h-full flex-col justify-evenly">
-                    <Skeleton class="h-4 w-3/4" />
-                    <div class="flex flex-col items-start justify-between gap-1">
-                      <Skeleton class="h-3 w-20" />
-                      <Skeleton class="h-3 w-16" />
-                    </div>
-                  </div>
-                </div>
-              {/each}
-            </div>
-          {:else if exerciseTemplateApi.templates.length > 0}
-            <div class="grid grid-cols-2 items-start gap-4 lg:grid-cols-3 xl:grid-cols-4">
-              {#each exerciseTemplateApi.templates as template}
-                <button
-                  class="h-[140px] w-full rounded-md border-2 p-5 hover:scale-95 dark:bg-neutral-700 {template.id ===
-                  selectedTemplateId
-                    ? 'border-primary-400'
-                    : `border-gray-200 dark:border-neutral-600 `} flex flex-col transition-all ease-in-out"
-                  type="button"
-                  onclick={() => (selectedTemplateId = template.id)}
-                >
-                  <div class="flex h-full flex-col justify-evenly">
-                    <p class="flex items-center text-start text-sm">
-                      {template.title}
-                    </p>
-                    <div class="flex flex-col items-start justify-between gap-1">
-                      <p class="text-xs font-normal">
-                        {template.questions}
-                        {$t('course.navItem.lessons.exercises.new_exercise_modal.questions')}
-                      </p>
-                      <p class="text-start text-xs font-normal">
-                        {template.points}
-                        {$t('course.navItem.lessons.exercises.new_exercise_modal.points')}
-                      </p>
-                    </div>
-                  </div>
-                </button>
-              {/each}
-            </div>
-          {/if}
-
-          <div class="mt-5 flex items-center justify-between">
-            <Button variant="outline" onclick={handleBack}>
-              {$t('course.navItem.lessons.exercises.new_exercise_modal.back')}
-            </Button>
-            <Button
-              disabled={!selectedTemplateId || exerciseTemplateApi.templates.length === 0}
-              loading={isTemplateFinishedLoading}
-              onclick={handleTemplateSelection}
+        <div class="my-8 flex justify-between gap-2">
+          {#each options as option}
+            <button
+              class="h-60 w-[261px] rounded-md border-2 p-5 dark:bg-neutral-700 {option.type === type
+                ? 'border-primary-400'
+                : `border-gray-200 dark:border-neutral-600 ${
+                    !option.isDisabled && 'hover:scale-95'
+                  }`} flex flex-col {option.isDisabled && 'cursor-not-allowed opacity-60'} transition-all ease-in-out"
+              type="button"
+              onclick={!option.isDisabled ? () => (type = option.type) : undefined}
             >
-              {$t('course.navItem.lessons.exercises.new_exercise_modal.finish')}
-            </Button>
-          </div>
+              <div class="flex h-[70%] w-full flex-row-reverse">
+                <CircleCheckIcon size={16} filled={option.type === type} />
+              </div>
+
+              <div>
+                <p class="flex items-center text-start">
+                  <span class="mr-2 text-sm">{option.title}</span>
+                  {#if option.isDisabled}
+                    <ComingSoon />
+                  {/if}
+                </p>
+                <p class="text-start text-xs font-light">{option.subtitle}</p>
+              </div>
+            </button>
+          {/each}
+        </div>
+
+        <div class="mt-8 flex flex-row-reverse items-center">
+          <Button onclick={handleNext}>
+            {$t('course.navItem.lessons.exercises.new_exercise_modal.next')}
+          </Button>
         </div>
       </div>
-      <!-- {:else if type === Type.AI} -->
-      <!-- <div>
+    {:else if step === 1}
+      {#if type === Type.SCRATCH}
+        <div class="m-auto flex min-h-[300px] w-96 items-center justify-center">
+          <div class="w-full">
+            <h2 class="my-5 text-2xl font-medium">
+              {$t('course.navItem.lessons.exercises.new_exercise_modal.title')}
+            </h2>
+            <InputField
+              bind:value={title}
+              autoFocus={true}
+              placeholder={$t('course.navItem.lessons.exercises.new_exercise_modal.title_placeholder')}
+              className="my-4"
+            />
+
+            <div class="mt-5 flex items-center justify-between">
+              <Button variant="outline" onclick={handleBack}>
+                {$t('course.navItem.lessons.exercises.new_exercise_modal.back')}
+              </Button>
+              <Button onclick={handleAddExercise}>
+                {$t('course.navItem.lessons.exercises.new_exercise_modal.finish')}
+              </Button>
+            </div>
+          </div>
+        </div>
+      {:else if type === Type.TEMPLATE}
+        <div>
+          <h2 class="m-0 mb-2 text-2xl font-medium">
+            {$t('course.navItem.lessons.exercises.new_exercise_modal.select_template')}
+          </h2>
+
+          <div>
+            <div class="mb-5 flex items-center gap-2">
+              {#each tags as tag}
+                <Badge class={selectedTag === tag ? 'bg-primary-400' : ''} onclick={() => handleTagSelection(tag)}
+                  >{tag}</Badge
+                >
+              {/each}
+            </div>
+
+            {#if exerciseTemplateApi.isLoading}
+              <div class="grid grid-cols-2 items-start gap-4 lg:grid-cols-3 xl:grid-cols-4">
+                {#each Array(16) as _}
+                  <div
+                    class="h-[140px] w-full rounded-md border-2 border-gray-200 p-5 dark:border-neutral-600 dark:bg-neutral-700"
+                  >
+                    <div class="flex h-full flex-col justify-evenly">
+                      <Skeleton class="h-4 w-3/4" />
+                      <div class="flex flex-col items-start justify-between gap-1">
+                        <Skeleton class="h-3 w-20" />
+                        <Skeleton class="h-3 w-16" />
+                      </div>
+                    </div>
+                  </div>
+                {/each}
+              </div>
+            {:else if exerciseTemplateApi.templates.length > 0}
+              <div class="grid grid-cols-2 items-start gap-4 lg:grid-cols-3 xl:grid-cols-4">
+                {#each exerciseTemplateApi.templates as template}
+                  <button
+                    class="h-[140px] w-full rounded-md border-2 p-5 hover:scale-95 dark:bg-neutral-700 {template.id ===
+                    selectedTemplateId
+                      ? 'border-primary-400'
+                      : `border-gray-200 dark:border-neutral-600 `} flex flex-col transition-all ease-in-out"
+                    type="button"
+                    onclick={() => (selectedTemplateId = template.id)}
+                  >
+                    <div class="flex h-full flex-col justify-evenly">
+                      <p class="flex items-center text-start text-sm">
+                        {template.title}
+                      </p>
+                      <div class="flex flex-col items-start justify-between gap-1">
+                        <p class="text-xs font-normal">
+                          {template.questions}
+                          {$t('course.navItem.lessons.exercises.new_exercise_modal.questions')}
+                        </p>
+                        <p class="text-start text-xs font-normal">
+                          {template.points}
+                          {$t('course.navItem.lessons.exercises.new_exercise_modal.points')}
+                        </p>
+                      </div>
+                    </div>
+                  </button>
+                {/each}
+              </div>
+            {/if}
+
+            <div class="mt-5 flex items-center justify-between">
+              <Button variant="outline" onclick={handleBack}>
+                {$t('course.navItem.lessons.exercises.new_exercise_modal.back')}
+              </Button>
+              <Button
+                disabled={!selectedTemplateId || exerciseTemplateApi.templates.length === 0}
+                loading={isTemplateFinishedLoading}
+                onclick={handleTemplateSelection}
+              >
+                {$t('course.navItem.lessons.exercises.new_exercise_modal.finish')}
+              </Button>
+            </div>
+          </div>
+        </div>
+        <!-- {:else if type === Type.AI} -->
+        <!-- <div>
         <div class="flex max-h-[500px] flex-row justify-between">
           <div class="mr-1 w-[60%] rounded-md border px-3 py-2">
             {#if note.length}
@@ -369,7 +369,7 @@
           </Button>
         </div>
       </div> -->
-    {/if}
+      {/if}
     {/if}
   </Dialog.Content>
 </Dialog.Root>
diff --git a/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/Document/AddDocumentToLesson.svelte b/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/Document/AddDocumentToLesson.svelte
index 5b5e1982..ca486c44 100644
--- a/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/Document/AddDocumentToLesson.svelte
+++ b/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/Document/AddDocumentToLesson.svelte
@@ -101,14 +101,14 @@
 
   async function uploadDocument() {
     if (!selectedFile) return;
-    
+
     // Prevent free plan users from bypassing UI restrictions
     if ($isFreePlan) {
       $lessonDocUpload.error = $t('upgrade.required');
       snackbar.error($lessonDocUpload.error);
       return;
     }
-    
+
     $lessonDocUpload.isUploading = true;
 
     try {
diff --git a/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/Video/UploadVideo.svelte b/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/Video/UploadVideo.svelte
index 1509b9b4..8cd9fa53 100644
--- a/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/Video/UploadVideo.svelte
+++ b/apps/dashboard/src/lib/components/Course/components/Lesson/Materials/Video/UploadVideo.svelte
@@ -39,7 +39,7 @@
     // Prevent free plan users from bypassing UI restrictions
     if ($isFreePlan) {
       formRes = {
-        type: 'AUTHORIZATION_ERROR', 
+        type: 'AUTHORIZATION_ERROR',
         status: 403,
         message: $t('upgrade.required')
       };
diff --git a/apps/dashboard/src/lib/components/Course/components/NewsFeed/DeleteFeedConfirmation.svelte b/apps/dashboard/src/lib/components/Course/components/NewsFeed/DeleteFeedConfirmation.svelte
index 92056d44..9d783a4e 100644
--- a/apps/dashboard/src/lib/components/Course/components/NewsFeed/DeleteFeedConfirmation.svelte
+++ b/apps/dashboard/src/lib/components/Course/components/NewsFeed/DeleteFeedConfirmation.svelte
@@ -15,27 +15,18 @@
   }
 </script>
 
-<Dialog.Root
-  bind:open={openDeleteModal}
->
+<Dialog.Root bind:open={openDeleteModal}>
   <Dialog.Content class="w-96">
     <Dialog.Header>
       <Dialog.Title>Delete Feed</Dialog.Title>
     </Dialog.Header>
     <div>
-    <h1 class="text-lg dark:text-white">Are you sure you want to delete this feed?</h1>
+      <h1 class="text-lg dark:text-white">Are you sure you want to delete this feed?</h1>
 
-    <div class="mt-5 flex items-center justify-between">
-      <Button
-        variant="outline"
-        onclick={() => (openDeleteModal = false)}
-      >
-        No
-      </Button>
-      <Button variant="outline" onclick={handleDelete}>
-        Yes
-      </Button>
+      <div class="mt-5 flex items-center justify-between">
+        <Button variant="outline" onclick={() => (openDeleteModal = false)}>No</Button>
+        <Button variant="outline" onclick={handleDelete}>Yes</Button>
+      </div>
     </div>
-  </div>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/apps/dashboard/src/lib/components/Course/components/NewsFeed/NewFeedModal.svelte b/apps/dashboard/src/lib/components/Course/components/NewsFeed/NewFeedModal.svelte
index 5073982c..de8e40c0 100644
--- a/apps/dashboard/src/lib/components/Course/components/NewsFeed/NewFeedModal.svelte
+++ b/apps/dashboard/src/lib/components/Course/components/NewsFeed/NewFeedModal.svelte
@@ -127,30 +127,27 @@
       </Dialog.Title>
     </Dialog.Header>
     <section class="w-2/ flex h-full flex-col rounded-xl pb-3">
-    <TextEditor
-      content={newPost}
-      onChange={(text) => {
-        newPost = text;
-      }}
-      editorClass="max-h-[400px]"
-      placeholder={$t('course.navItem.news_feed.heading_button.placeholder')}
-    />
-    {#if errors.newPost}
-      <p class="text-sm text-red-500">{errors.newPost}</p>
-    {/if}
-    <div class="flex items-center justify-end py-2">
-      <div class="flex gap-2">
-        <Button
-          variant="outline"
-          onclick={resetEditor}
-        >
-          {$t('course.navItem.news_feed.heading_button.cancel')}
-        </Button>
-        <Button loading={isLoading} onclick={onPost}>
-          {$t('course.navItem.news_feed.heading_button.post')}
-        </Button>
+      <TextEditor
+        content={newPost}
+        onChange={(text) => {
+          newPost = text;
+        }}
+        editorClass="max-h-[400px]"
+        placeholder={$t('course.navItem.news_feed.heading_button.placeholder')}
+      />
+      {#if errors.newPost}
+        <p class="text-sm text-red-500">{errors.newPost}</p>
+      {/if}
+      <div class="flex items-center justify-end py-2">
+        <div class="flex gap-2">
+          <Button variant="outline" onclick={resetEditor}>
+            {$t('course.navItem.news_feed.heading_button.cancel')}
+          </Button>
+          <Button loading={isLoading} onclick={onPost}>
+            {$t('course.navItem.news_feed.heading_button.post')}
+          </Button>
+        </div>
       </div>
-    </div>
-  </section>
+    </section>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/apps/dashboard/src/lib/components/Course/components/People/DeleteConfirmation.svelte b/apps/dashboard/src/lib/components/Course/components/People/DeleteConfirmation.svelte
index 5104cdcf..6201337a 100644
--- a/apps/dashboard/src/lib/components/Course/components/People/DeleteConfirmation.svelte
+++ b/apps/dashboard/src/lib/components/Course/components/People/DeleteConfirmation.svelte
@@ -12,32 +12,24 @@
   }
 </script>
 
-<Dialog.Root
-  bind:open={$deleteMemberModal.open}
->
+<Dialog.Root bind:open={$deleteMemberModal.open}>
   <Dialog.Content class="w-96 pt-3">
-    <Dialog.Header class="py-2 px-5">
+    <Dialog.Header class="px-5 py-2">
       <Dialog.Title>{$t('course.navItem.people.delete_confirmation.title')}</Dialog.Title>
     </Dialog.Header>
     <div>
-    <p class="mt-0 text-base dark:text-white">
-      {$t('course.navItem.people.delete_confirmation.sure')} <strong>{email}</strong>?
-    </p>
+      <p class="mt-0 text-base dark:text-white">
+        {$t('course.navItem.people.delete_confirmation.sure')} <strong>{email}</strong>?
+      </p>
 
-    <div class="mt-5 flex items-center justify-between">
-      <Button
-        variant="outline"
-        onclick={() => ($deleteMemberModal.open = false)}
-      >
-        {$t('course.navItem.people.delete_confirmation.no')}
-      </Button>
-      <Button
-        variant="outline"
-        onclick={handleDelete}
-      >
-        {$t('course.navItem.people.delete_confirmation.yes')}
-      </Button>
+      <div class="mt-5 flex items-center justify-between">
+        <Button variant="outline" onclick={() => ($deleteMemberModal.open = false)}>
+          {$t('course.navItem.people.delete_confirmation.no')}
+        </Button>
+        <Button variant="outline" onclick={handleDelete}>
+          {$t('course.navItem.people.delete_confirmation.yes')}
+        </Button>
+      </div>
     </div>
-  </div>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/apps/dashboard/src/lib/features/community/components/delete-modal.svelte b/apps/dashboard/src/lib/features/community/components/delete-modal.svelte
index c4dab1f1..7fffe651 100644
--- a/apps/dashboard/src/lib/features/community/components/delete-modal.svelte
+++ b/apps/dashboard/src/lib/features/community/components/delete-modal.svelte
@@ -20,37 +20,28 @@
   }: Props = $props();
 </script>
 
-<Dialog.Root
-  bind:open
->
+<Dialog.Root bind:open>
   <Dialog.Content class="w-96">
     <Dialog.Header>
       <Dialog.Title>
-        {$t('community.delete.title')} {isQuestion
-          ? $t('community.delete.question')
-          : $t('community.delete.comment')}
+        {$t('community.delete.title')}
+        {isQuestion ? $t('community.delete.question') : $t('community.delete.comment')}
       </Dialog.Title>
     </Dialog.Header>
     <div>
-    <p class="mt-0 text-base dark:text-white">
-      {$t('community.delete.sure')}
-      {isQuestion ? $t('community.delete.question') : $t('community.delete.comment')}?
-    </p>
+      <p class="mt-0 text-base dark:text-white">
+        {$t('community.delete.sure')}
+        {isQuestion ? $t('community.delete.question') : $t('community.delete.comment')}?
+      </p>
 
-    <div class="mt-5 flex items-center justify-between">
-      <Button
-        variant="outline"
-        onclick={onCancel}
-      >
-        {$t('community.delete.no')}
-      </Button>
-      <Button
-        onclick={onDelete}
-        loading={isDeleting}
-      >
-        {$t('community.delete.yes')}
-      </Button>
+      <div class="mt-5 flex items-center justify-between">
+        <Button variant="outline" onclick={onCancel}>
+          {$t('community.delete.no')}
+        </Button>
+        <Button onclick={onDelete} loading={isDeleting}>
+          {$t('community.delete.yes')}
+        </Button>
+      </div>
     </div>
-  </div>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/apps/dashboard/src/lib/features/community/utils/store.ts b/apps/dashboard/src/lib/features/community/utils/store.ts
index f19669b6..a9c1dd36 100644
--- a/apps/dashboard/src/lib/features/community/utils/store.ts
+++ b/apps/dashboard/src/lib/features/community/utils/store.ts
@@ -7,4 +7,3 @@ export interface CurrentCommunityQuestion {
 export const currentCommunityQuestion = writable<CurrentCommunityQuestion>({
   title: null
 });
-
diff --git a/apps/dashboard/src/lib/features/course/components/copy-course-modal.svelte b/apps/dashboard/src/lib/features/course/components/copy-course-modal.svelte
index f7963137..c0bb79cd 100644
--- a/apps/dashboard/src/lib/features/course/components/copy-course-modal.svelte
+++ b/apps/dashboard/src/lib/features/course/components/copy-course-modal.svelte
@@ -20,43 +20,41 @@
   });
 </script>
 
-<Dialog.Root
-  bind:open={$copyCourseModal.open}
->
+<Dialog.Root bind:open={$copyCourseModal.open}>
   <Dialog.Content class="w-96">
     <Dialog.Header>
       <Dialog.Title>{$t('courses.copy_course.title')}</Dialog.Title>
     </Dialog.Header>
     <form onsubmit={preventDefault(createCourse)}>
-    <InputField
-      label={$t('courses.copy_course.course_name_label')}
-      bind:value={$copyCourseModal.title}
-      autoFocus={true}
-      placeholder={$t('courses.copy_course.course_name_placeholder')}
-      className="mb-4"
-      isRequired={true}
-      autoComplete={false}
-      errorMessage={courseCloneApi.errors.title}
-    />
+      <InputField
+        label={$t('courses.copy_course.course_name_label')}
+        bind:value={$copyCourseModal.title}
+        autoFocus={true}
+        placeholder={$t('courses.copy_course.course_name_placeholder')}
+        className="mb-4"
+        isRequired={true}
+        autoComplete={false}
+        errorMessage={courseCloneApi.errors.title}
+      />
 
-    <TextareaField
-      label={$t('courses.copy_course.course_description_label')}
-      bind:value={$copyCourseModal.description}
-      placeholder={$t('courses.copy_course.course_description_placeholder')}
-      className="mb-4"
-      rows={4}
-      errorMessage={courseCloneApi.errors.description}
-    />
+      <TextareaField
+        label={$t('courses.copy_course.course_description_label')}
+        bind:value={$copyCourseModal.description}
+        placeholder={$t('courses.copy_course.course_description_placeholder')}
+        className="mb-4"
+        rows={4}
+        errorMessage={courseCloneApi.errors.description}
+      />
 
-    {#if courseCloneApi.errors.general}
-      <div class="mb-4 text-sm text-red-600">{courseCloneApi.errors.general}</div>
-    {/if}
+      {#if courseCloneApi.errors.general}
+        <div class="mb-4 text-sm text-red-600">{courseCloneApi.errors.general}</div>
+      {/if}
 
-    <div class="mt-5 flex flex-row-reverse items-center">
-      <Button type="submit" loading={$copyCourseModal.isSaving}>
-        {$t('courses.copy_course.create_button')}
-      </Button>
-    </div>
-  </form>
+      <div class="mt-5 flex flex-row-reverse items-center">
+        <Button type="submit" loading={$copyCourseModal.isSaving}>
+          {$t('courses.copy_course.create_button')}
+        </Button>
+      </div>
+    </form>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/apps/dashboard/src/lib/features/course/pages/attendance.svelte b/apps/dashboard/src/lib/features/course/pages/attendance.svelte
index b10368d2..02d404a0 100644
--- a/apps/dashboard/src/lib/features/course/pages/attendance.svelte
+++ b/apps/dashboard/src/lib/features/course/pages/attendance.svelte
@@ -233,4 +233,3 @@
     </div>
   {/if}
 </section>
-
diff --git a/apps/dashboard/src/lib/features/course/pages/lessons.svelte b/apps/dashboard/src/lib/features/course/pages/lessons.svelte
index d74045f4..17ace15f 100644
--- a/apps/dashboard/src/lib/features/course/pages/lessons.svelte
+++ b/apps/dashboard/src/lib/features/course/pages/lessons.svelte
@@ -109,4 +109,3 @@
     variant="page"
   />
 {/if}
-
diff --git a/apps/dashboard/src/lib/features/lms/components/learning.svelte b/apps/dashboard/src/lib/features/lms/components/learning.svelte
index fb0baf23..2442a40b 100644
--- a/apps/dashboard/src/lib/features/lms/components/learning.svelte
+++ b/apps/dashboard/src/lib/features/lms/components/learning.svelte
@@ -55,4 +55,3 @@
     {/if}
   </div>
 </section>
-
diff --git a/apps/dashboard/src/lib/features/onboarding/utils/dom-protection.ts b/apps/dashboard/src/lib/features/onboarding/utils/dom-protection.ts
index 8d0ebfaa..1d1bf4c2 100644
--- a/apps/dashboard/src/lib/features/onboarding/utils/dom-protection.ts
+++ b/apps/dashboard/src/lib/features/onboarding/utils/dom-protection.ts
@@ -2,9 +2,9 @@ import type { Readable } from 'svelte/store';
 import { browser } from '$app/environment';
 
 export interface DOMProtectionCleanup {
-	protectionInterval?: ReturnType<typeof setInterval>;
-	domObserver?: MutationObserver;
-	cleanup: () => void;
+  protectionInterval?: ReturnType<typeof setInterval>;
+  domObserver?: MutationObserver;
+  cleanup: () => void;
 }
 
 /**
@@ -14,192 +14,190 @@ export interface DOMProtectionCleanup {
  * @param isEmailVerified - A readable store or getter function that returns whether email is verified
  * @returns Cleanup object with intervals, observers, and a cleanup function
  */
-export function setupDOMProtection(
-	isEmailVerified: Readable<boolean> | (() => boolean | null)
-): DOMProtectionCleanup {
-	if (!browser) {
-		return {
-			cleanup: () => {}
-		};
-	}
+export function setupDOMProtection(isEmailVerified: Readable<boolean> | (() => boolean | null)): DOMProtectionCleanup {
+  if (!browser) {
+    return {
+      cleanup: () => {}
+    };
+  }
 
-	let protectionInterval: ReturnType<typeof setInterval> | undefined;
-	let domObserver: MutationObserver | undefined;
+  let protectionInterval: ReturnType<typeof setInterval> | undefined;
+  let domObserver: MutationObserver | undefined;
 
-	// Helper to get current verification status
-	const getIsVerified = () => {
-		if (typeof isEmailVerified === 'function') {
-			return isEmailVerified() ?? false;
-		}
-		// For stores, we need to subscribe temporarily - this is a limitation
-		// In practice, the component should pass a getter function
-		let value = false;
-		const unsubscribe = isEmailVerified.subscribe((v) => {
-			value = v ?? false;
-		});
-		unsubscribe();
-		return value;
-	};
+  // Helper to get current verification status
+  const getIsVerified = () => {
+    if (typeof isEmailVerified === 'function') {
+      return isEmailVerified() ?? false;
+    }
+    // For stores, we need to subscribe temporarily - this is a limitation
+    // In practice, the component should pass a getter function
+    let value = false;
+    const unsubscribe = isEmailVerified.subscribe((v) => {
+      value = v ?? false;
+    });
+    unsubscribe();
+    return value;
+  };
 
-	// Function to disable all interactive elements
-	function disableInteractions() {
-		if (getIsVerified()) return;
+  // Function to disable all interactive elements
+  function disableInteractions() {
+    if (getIsVerified()) return;
 
-		// Disable all buttons except verification-related ones
-		const buttons = document.querySelectorAll('button, [role="button"], a[href], input[type="submit"]');
-		buttons.forEach((button) => {
-			const el = button as HTMLElement;
+    // Disable all buttons except verification-related ones
+    const buttons = document.querySelectorAll('button, [role="button"], a[href], input[type="submit"]');
+    buttons.forEach((button) => {
+      const el = button as HTMLElement;
 
-			// Skip if already protected or is verification-related
-			if (
-				el.dataset.verificationProtected === 'true' ||
-				el.closest('[data-verification-modal]') ||
-				el.textContent?.toLowerCase().includes('verify') ||
-				el.textContent?.toLowerCase().includes('resend')
-			) {
-				return;
-			}
+      // Skip if already protected or is verification-related
+      if (
+        el.dataset.verificationProtected === 'true' ||
+        el.closest('[data-verification-modal]') ||
+        el.textContent?.toLowerCase().includes('verify') ||
+        el.textContent?.toLowerCase().includes('resend')
+      ) {
+        return;
+      }
 
-			el.dataset.verificationProtected = 'true';
-			el.dataset.originalPointerEvents = el.style.pointerEvents || 'auto';
-			el.style.pointerEvents = 'none';
-			el.style.opacity = '0.5';
-			el.style.cursor = 'not-allowed';
-			el.setAttribute('title', 'Email verification required');
+      el.dataset.verificationProtected = 'true';
+      el.dataset.originalPointerEvents = el.style.pointerEvents || 'auto';
+      el.style.pointerEvents = 'none';
+      el.style.opacity = '0.5';
+      el.style.cursor = 'not-allowed';
+      el.setAttribute('title', 'Email verification required');
 
-			// Add click prevention
-			el.addEventListener('click', preventInteraction, true);
-			el.addEventListener('mousedown', preventInteraction, true);
-		});
+      // Add click prevention
+      el.addEventListener('click', preventInteraction, true);
+      el.addEventListener('mousedown', preventInteraction, true);
+    });
 
-		// Disable all form inputs
-		const inputs = document.querySelectorAll('input, textarea, select');
-		inputs.forEach((input) => {
-			const el = input as HTMLInputElement;
+    // Disable all form inputs
+    const inputs = document.querySelectorAll('input, textarea, select');
+    inputs.forEach((input) => {
+      const el = input as HTMLInputElement;
 
-			// Skip if in verification modal
-			if (el.closest('[data-verification-modal]')) return;
+      // Skip if in verification modal
+      if (el.closest('[data-verification-modal]')) return;
 
-			if (!el.dataset.verificationProtected) {
-				el.dataset.verificationProtected = 'true';
-				el.dataset.originalDisabled = el.disabled ? 'true' : 'false';
-				el.disabled = true;
-				el.style.opacity = '0.5';
-				el.addEventListener('focus', preventInteraction, true);
-				el.addEventListener('input', preventInteraction, true);
-			}
-		});
+      if (!el.dataset.verificationProtected) {
+        el.dataset.verificationProtected = 'true';
+        el.dataset.originalDisabled = el.disabled ? 'true' : 'false';
+        el.disabled = true;
+        el.style.opacity = '0.5';
+        el.addEventListener('focus', preventInteraction, true);
+        el.addEventListener('input', preventInteraction, true);
+      }
+    });
 
-		// Disable contenteditable elements
-		const editables = document.querySelectorAll('[contenteditable="true"]');
-		editables.forEach((el) => {
-			const element = el as HTMLElement;
-			if (!element.dataset.verificationProtected) {
-				element.dataset.verificationProtected = 'true';
-				element.contentEditable = 'false';
-				element.style.opacity = '0.5';
-			}
-		});
-	}
+    // Disable contenteditable elements
+    const editables = document.querySelectorAll('[contenteditable="true"]');
+    editables.forEach((el) => {
+      const element = el as HTMLElement;
+      if (!element.dataset.verificationProtected) {
+        element.dataset.verificationProtected = 'true';
+        element.contentEditable = 'false';
+        element.style.opacity = '0.5';
+      }
+    });
+  }
 
-	function preventInteraction(event: Event) {
-		if (!getIsVerified()) {
-			event.preventDefault();
-			event.stopImmediatePropagation();
+  function preventInteraction(event: Event) {
+    if (!getIsVerified()) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
 
-			// Show warning
-			if (event.target) {
-				const target = event.target as HTMLElement;
-				target.setAttribute('title', 'Please verify your email to use this feature');
-			}
+      // Show warning
+      if (event.target) {
+        const target = event.target as HTMLElement;
+        target.setAttribute('title', 'Please verify your email to use this feature');
+      }
 
-			// Optional: Show alert
-			console.warn('🔒 Email verification required to interact with this element');
-			return false;
-		}
-	}
+      // Optional: Show alert
+      console.warn('🔒 Email verification required to interact with this element');
+      return false;
+    }
+  }
 
-	// Function to restore interactions when verified
-	function enableInteractions() {
-		const protectedElements = document.querySelectorAll('[data-verification-protected="true"]');
-		protectedElements.forEach((el) => {
-			const element = el as HTMLElement;
+  // Function to restore interactions when verified
+  function enableInteractions() {
+    const protectedElements = document.querySelectorAll('[data-verification-protected="true"]');
+    protectedElements.forEach((el) => {
+      const element = el as HTMLElement;
 
-			// Restore styles
-			if (element.dataset.originalPointerEvents) {
-				element.style.pointerEvents = element.dataset.originalPointerEvents;
-			} else {
-				element.style.pointerEvents = '';
-			}
-			element.style.opacity = '';
-			element.style.cursor = '';
-			element.removeAttribute('title');
+      // Restore styles
+      if (element.dataset.originalPointerEvents) {
+        element.style.pointerEvents = element.dataset.originalPointerEvents;
+      } else {
+        element.style.pointerEvents = '';
+      }
+      element.style.opacity = '';
+      element.style.cursor = '';
+      element.removeAttribute('title');
 
-			// Restore functionality for inputs
-			if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA' || element.tagName === 'SELECT') {
-				const input = element as HTMLInputElement;
-				input.disabled = input.dataset.originalDisabled === 'true';
-			}
+      // Restore functionality for inputs
+      if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA' || element.tagName === 'SELECT') {
+        const input = element as HTMLInputElement;
+        input.disabled = input.dataset.originalDisabled === 'true';
+      }
 
-			// Restore contenteditable
-			if (element.hasAttribute('contenteditable')) {
-				element.contentEditable = 'true';
-			}
+      // Restore contenteditable
+      if (element.hasAttribute('contenteditable')) {
+        element.contentEditable = 'true';
+      }
 
-			// Remove event listeners
-			element.removeEventListener('click', preventInteraction, true);
-			element.removeEventListener('mousedown', preventInteraction, true);
-			element.removeEventListener('focus', preventInteraction, true);
-			element.removeEventListener('input', preventInteraction, true);
+      // Remove event listeners
+      element.removeEventListener('click', preventInteraction, true);
+      element.removeEventListener('mousedown', preventInteraction, true);
+      element.removeEventListener('focus', preventInteraction, true);
+      element.removeEventListener('input', preventInteraction, true);
 
-			// Clean up data attributes
-			delete element.dataset.verificationProtected;
-			delete element.dataset.originalPointerEvents;
-			delete element.dataset.originalDisabled;
-		});
-	}
+      // Clean up data attributes
+      delete element.dataset.verificationProtected;
+      delete element.dataset.originalPointerEvents;
+      delete element.dataset.originalDisabled;
+    });
+  }
 
-	// Set up mutation observer to protect new elements
-	if (window.MutationObserver) {
-		domObserver = new MutationObserver((mutations) => {
-			let shouldReapply = false;
-			mutations.forEach((mutation) => {
-				if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
-					shouldReapply = true;
-				}
-			});
+  // Set up mutation observer to protect new elements
+  if (window.MutationObserver) {
+    domObserver = new MutationObserver((mutations) => {
+      let shouldReapply = false;
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
+          shouldReapply = true;
+        }
+      });
 
-			if (shouldReapply && !getIsVerified()) {
-				setTimeout(disableInteractions, 100);
-			}
-		});
+      if (shouldReapply && !getIsVerified()) {
+        setTimeout(disableInteractions, 100);
+      }
+    });
 
-		domObserver.observe(document.body, {
-			childList: true,
-			subtree: true
-		});
-	}
+    domObserver.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+  }
 
-	// Run protection every second
-	protectionInterval = setInterval(() => {
-		if (getIsVerified()) {
-			enableInteractions();
-			cleanup();
-		} else {
-			disableInteractions();
-		}
-	}, 1000);
+  // Run protection every second
+  protectionInterval = setInterval(() => {
+    if (getIsVerified()) {
+      enableInteractions();
+      cleanup();
+    } else {
+      disableInteractions();
+    }
+  }, 1000);
 
-	// Initial protection
-	if (!getIsVerified()) {
-		disableInteractions();
-	}
+  // Initial protection
+  if (!getIsVerified()) {
+    disableInteractions();
+  }
 
-	// Add global CSS to prevent any missed interactions
-	if (document) {
-		const style = document.createElement('style');
-		style.id = 'email-verification-protection';
-		style.textContent = `
+  // Add global CSS to prevent any missed interactions
+  if (document) {
+    const style = document.createElement('style');
+    style.id = 'email-verification-protection';
+    style.textContent = `
         body:not(.email-verified) button:not([data-verification-modal] button),
         body:not(.email-verified) a:not([data-verification-modal] a),
         body:not(.email-verified) input:not([data-verification-modal] input),
@@ -210,45 +208,44 @@ export function setupDOMProtection(
           user-select: none !important;
         }
       `;
-		document.head.appendChild(style);
-	}
+    document.head.appendChild(style);
+  }
 
-	function cleanup() {
-		if (protectionInterval) {
-			clearInterval(protectionInterval);
-			protectionInterval = undefined;
-		}
-		if (domObserver) {
-			domObserver.disconnect();
-			domObserver = undefined;
-		}
+  function cleanup() {
+    if (protectionInterval) {
+      clearInterval(protectionInterval);
+      protectionInterval = undefined;
+    }
+    if (domObserver) {
+      domObserver.disconnect();
+      domObserver = undefined;
+    }
 
-		// Clean up protection styles
-		if (browser) {
-			const style = document?.getElementById('email-verification-protection');
-			if (style) style.remove();
-		}
-	}
+    // Clean up protection styles
+    if (browser) {
+      const style = document?.getElementById('email-verification-protection');
+      if (style) style.remove();
+    }
+  }
 
-	return {
-		protectionInterval,
-		domObserver,
-		cleanup
-	};
+  return {
+    protectionInterval,
+    domObserver,
+    cleanup
+  };
 }
 
 /**
  * Updates the body class based on email verification status
  */
 export function updateBodyClass(isEmailVerified: boolean | null) {
-	if (!browser) {
-		return;
-	}
+  if (!browser) {
+    return;
+  }
 
-	if (isEmailVerified) {
-		document.body.classList.add('email-verified');
-	} else {
-		document.body.classList.remove('email-verified');
-	}
+  if (isEmailVerified) {
+    document.body.classList.add('email-verified');
+  } else {
+    document.body.classList.remove('email-verified');
+  }
 }
-
diff --git a/apps/dashboard/src/lib/features/org/components/add-org-modal/add-org-modal.svelte b/apps/dashboard/src/lib/features/org/components/add-org-modal/add-org-modal.svelte
index f8e344f5..de68c6bd 100644
--- a/apps/dashboard/src/lib/features/org/components/add-org-modal/add-org-modal.svelte
+++ b/apps/dashboard/src/lib/features/org/components/add-org-modal/add-org-modal.svelte
@@ -41,30 +41,29 @@
       <Dialog.Title>{$t('add_org.create_org')}</Dialog.Title>
     </Dialog.Header>
     <form onsubmit={preventDefault(createNewOrg)} class="px-2">
-    <Field.Group>
-      <Field.Field>
-        <Field.Label>{$t('add_org.name')}</Field.Label>
-        <Input bind:value={orgName} placeholder="e.g Pepsi Co" autofocus />
-        {#if orgApi.errors.name || orgApi.errors.orgName}
-          <Field.Error>{orgApi.errors.name || orgApi.errors.orgName}</Field.Error>
-        {/if}
-      </Field.Field>
+      <Field.Group>
+        <Field.Field>
+          <Field.Label>{$t('add_org.name')}</Field.Label>
+          <Input bind:value={orgName} placeholder="e.g Pepsi Co" autofocus />
+          {#if orgApi.errors.name || orgApi.errors.orgName}
+            <Field.Error>{orgApi.errors.name || orgApi.errors.orgName}</Field.Error>
+          {/if}
+        </Field.Field>
 
-      <Field.Field>
-        <Field.Label>{$t('add_org.org_sitename')}</Field.Label>
-        <DomainInput bind:value={siteName} placeholder="myschool" prefix="https://" suffix=".classroomio.com" />
-        {#if orgApi.errors.siteName || orgApi.errors.general}
-          <Field.Error>{orgApi.errors.siteName || orgApi.errors.general}</Field.Error>
-        {/if}
-      </Field.Field>
+        <Field.Field>
+          <Field.Label>{$t('add_org.org_sitename')}</Field.Label>
+          <DomainInput bind:value={siteName} placeholder="myschool" prefix="https://" suffix=".classroomio.com" />
+          {#if orgApi.errors.siteName || orgApi.errors.general}
+            <Field.Error>{orgApi.errors.siteName || orgApi.errors.general}</Field.Error>
+          {/if}
+        </Field.Field>
 
-      <Field.Field orientation="horizontal">
-        <Button type="submit" loading={orgApi.isLoading} class="ml-auto">
-          {$t('add_org.create')}
-        </Button>
-      </Field.Field>
-    </Field.Group>
-  </form>
+        <Field.Field orientation="horizontal">
+          <Button type="submit" loading={orgApi.isLoading} class="ml-auto">
+            {$t('add_org.create')}
+          </Button>
+        </Field.Field>
+      </Field.Group>
+    </form>
   </Dialog.Content>
 </Dialog.Root>
-
diff --git a/apps/dashboard/src/lib/features/org/components/image-renderer.svelte b/apps/dashboard/src/lib/features/org/components/image-renderer.svelte
index e469281a..8ccd3a2a 100644
--- a/apps/dashboard/src/lib/features/org/components/image-renderer.svelte
+++ b/apps/dashboard/src/lib/features/org/components/image-renderer.svelte
@@ -27,4 +27,3 @@
     <p class="text-sm text-red-600">{$t('courses.course_card.error_message')}</p>
   </div>
 {/await}
-
diff --git a/apps/dashboard/src/lib/features/org/components/landing-page/page-header.svelte b/apps/dashboard/src/lib/features/org/components/landing-page/page-header.svelte
index f6e96798..d1ac6f1f 100644
--- a/apps/dashboard/src/lib/features/org/components/landing-page/page-header.svelte
+++ b/apps/dashboard/src/lib/features/org/components/landing-page/page-header.svelte
@@ -25,4 +25,3 @@
     </div>
   </div>
 </section>
-
diff --git a/apps/dashboard/src/lib/features/org/components/landing-page/page-loader.svelte b/apps/dashboard/src/lib/features/org/components/landing-page/page-loader.svelte
index 465ec1db..4b2b47d4 100644
--- a/apps/dashboard/src/lib/features/org/components/landing-page/page-loader.svelte
+++ b/apps/dashboard/src/lib/features/org/components/landing-page/page-loader.svelte
@@ -24,4 +24,3 @@
     <CourseCardLoader />
   </div>
 </section>
-
diff --git a/apps/dashboard/src/lib/features/org/components/new-org-modal-store.ts b/apps/dashboard/src/lib/features/org/components/new-org-modal-store.ts
index e1420e83..dce85cb1 100644
--- a/apps/dashboard/src/lib/features/org/components/new-org-modal-store.ts
+++ b/apps/dashboard/src/lib/features/org/components/new-org-modal-store.ts
@@ -3,4 +3,3 @@ import { writable } from 'svelte/store';
 export const newOrgModal = writable({
   open: false
 });
-
diff --git a/apps/dashboard/src/lib/features/org/components/quiz/delete-modal.svelte b/apps/dashboard/src/lib/features/org/components/quiz/delete-modal.svelte
index 43db1a22..0567f609 100644
--- a/apps/dashboard/src/lib/features/org/components/quiz/delete-modal.svelte
+++ b/apps/dashboard/src/lib/features/org/components/quiz/delete-modal.svelte
@@ -43,29 +43,29 @@
       </Dialog.Title>
     </Dialog.Header>
     <div class="my-10 flex w-full flex-col items-center">
-    <h1 class="text-center text-lg dark:text-white">
-      {#if $deleteModal.isQuestion}
-        {$t('components.quiz.delete_question')}
-      {:else}
-        {$t('components.quiz.delete_quiz')}
-      {/if}
-      {$t('components.quiz.lose_content')}
-    </h1>
+      <h1 class="text-center text-lg dark:text-white">
+        {#if $deleteModal.isQuestion}
+          {$t('components.quiz.delete_question')}
+        {:else}
+          {$t('components.quiz.delete_quiz')}
+        {/if}
+        {$t('components.quiz.lose_content')}
+      </h1>
 
-    <div class="mt-5">
-      <Button
-        onclick={() => {
-          if ($deleteModal.isQuestion) {
-            onDelete();
-            $deleteModal.open = false;
-          } else {
-            deleteQuiz();
-          }
-        }}
-      >
-        {$t('components.quiz.delete')}
-      </Button>
+      <div class="mt-5">
+        <Button
+          onclick={() => {
+            if ($deleteModal.isQuestion) {
+              onDelete();
+              $deleteModal.open = false;
+            } else {
+              deleteQuiz();
+            }
+          }}
+        >
+          {$t('components.quiz.delete')}
+        </Button>
+      </div>
     </div>
-  </div>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/apps/dashboard/src/lib/features/org/components/quiz/new-quiz-modal.svelte b/apps/dashboard/src/lib/features/org/components/quiz/new-quiz-modal.svelte
index eef85fe0..c634593b 100644
--- a/apps/dashboard/src/lib/features/org/components/quiz/new-quiz-modal.svelte
+++ b/apps/dashboard/src/lib/features/org/components/quiz/new-quiz-modal.svelte
@@ -114,28 +114,27 @@
   <Dialog.Content class="w-4/5 md:w-2/5">
     <Dialog.Header>
       <Dialog.Title>
-        {$createQuizModal.openEdit ? $t('components.quiz.update') : $t('components.quiz.create')} {$t(
-          'components.quiz.a_quiz'
-        )}
+        {$createQuizModal.openEdit ? $t('components.quiz.update') : $t('components.quiz.create')}
+        {$t('components.quiz.a_quiz')}
       </Dialog.Title>
     </Dialog.Header>
     <form onsubmit={preventDefault(createQuiz)}>
-    <InputField
-      label={$t('components.quiz.quiz_title')}
-      bind:value={$createQuizModal.title}
-      autofocus={true}
-      placeholder={$t('components.quiz.placehoolder')}
-      className="mb-4"
-      isRequired={true}
-      errorMessage={errors.title}
-      autoComplete={false}
-    />
+      <InputField
+        label={$t('components.quiz.quiz_title')}
+        bind:value={$createQuizModal.title}
+        autofocus={true}
+        placeholder={$t('components.quiz.placehoolder')}
+        className="mb-4"
+        isRequired={true}
+        errorMessage={errors.title}
+        autoComplete={false}
+      />
 
-    <div class="mt-5 flex items-center justify-end">
-      <Button type="submit" disabled={isLoading} loading={isLoading}>
-        {$createQuizModal.openEdit ? $t('components.quiz.save') : $t('components.quiz.continue')}
-      </Button>
-    </div>
-  </form>
+      <div class="mt-5 flex items-center justify-end">
+        <Button type="submit" disabled={isLoading} loading={isLoading}>
+          {$createQuizModal.openEdit ? $t('components.quiz.save') : $t('components.quiz.continue')}
+        </Button>
+      </div>
+    </form>
   </Dialog.Content>
 </Dialog.Root>
diff --git a/apps/dashboard/src/lib/features/org/components/quiz/quiz-question.svelte b/apps/dashboard/src/lib/features/org/components/quiz/quiz-question.svelte
index 51c18c91..43318734 100644
--- a/apps/dashboard/src/lib/features/org/components/quiz/quiz-question.svelte
+++ b/apps/dashboard/src/lib/features/org/components/quiz/quiz-question.svelte
@@ -53,10 +53,7 @@
           errorMessage={optionHasError(option.id, currentError.options) && $t('components.quiz.label')}
         />
         <div class="absolute right-2 top-2 flex justify-end">
-          <IconButton
-            onclick={() => (option.isCorrect = !option.isCorrect)}
-            class={option.isCorrect ? 'success' : ''}
-          >
+          <IconButton onclick={() => (option.isCorrect = !option.isCorrect)} class={option.isCorrect ? 'success' : ''}>
             <CircleCheckIcon size={16} filled={option.isCorrect} />
           </IconButton>
         </div>
diff --git a/apps/dashboard/src/lib/features/org/components/settings/landing-page-store.ts b/apps/dashboard/src/lib/features/org/components/settings/landing-page-store.ts
index 470f4b11..7f2a7ab2 100644
--- a/apps/dashboard/src/lib/features/org/components/settings/landing-page-store.ts
+++ b/apps/dashboard/src/lib/features/org/components/settings/landing-page-store.ts
@@ -114,4 +114,3 @@ export const landingPageSettings: Writable<OrgLandingPageJson> = writable({
     show: true
   }
 });
-
diff --git a/apps/dashboard/src/lib/features/ui/analytics/activity-card.svelte b/apps/dashboard/src/lib/features/ui/analytics/activity-card.svelte
index d8489865..da6ffe9a 100644
--- a/apps/dashboard/src/lib/features/ui/analytics/activity-card.svelte
+++ b/apps/dashboard/src/lib/features/ui/analytics/activity-card.svelte
@@ -38,4 +38,3 @@
     </p>
   </div>
 </div>
-
diff --git a/apps/dashboard/src/lib/features/ui/analytics/hero-profile-card.svelte b/apps/dashboard/src/lib/features/ui/analytics/hero-profile-card.svelte
index 01afc221..e18eb7a8 100644
--- a/apps/dashboard/src/lib/features/ui/analytics/hero-profile-card.svelte
+++ b/apps/dashboard/src/lib/features/ui/analytics/hero-profile-card.svelte
@@ -44,4 +44,3 @@
     </div>
   </div>
 </div>
-
diff --git a/apps/dashboard/src/lib/features/ui/analytics/loading-page.svelte b/apps/dashboard/src/lib/features/ui/analytics/loading-page.svelte
index 0850116b..425bde85 100644
--- a/apps/dashboard/src/lib/features/ui/analytics/loading-page.svelte
+++ b/apps/dashboard/src/lib/features/ui/analytics/loading-page.svelte
@@ -10,4 +10,3 @@
     <Skeleton class="h-40 w-[270px]" />
   </div>
 </div>
-
diff --git a/apps/dashboard/src/lib/features/ui/delete-modal.svelte b/apps/dashboard/src/lib/features/ui/delete-modal.svelte
index f4dc91cf..15a275d7 100644
--- a/apps/dashboard/src/lib/features/ui/delete-modal.svelte
+++ b/apps/dashboard/src/lib/features/ui/delete-modal.svelte
@@ -23,27 +23,18 @@
       <Dialog.Title>{$t('delete_modal.label')}</Dialog.Title>
     </Dialog.Header>
     <div>
-    <p class="text-center text-xl dark:text-white">
-      {$t('delete_modal.content')}
-    </p>
+      <p class="text-center text-xl dark:text-white">
+        {$t('delete_modal.content')}
+      </p>
 
-    <div class="mt-8 flex items-center justify-between">
-      <Button
-        variant="outline"
-        onclick={() => (open = false)}
-        disabled={isLoading}
-      >
-        {$t('delete_modal.no')}
-      </Button>
-      <Button
-        variant="destructive"
-        onclick={onDelete}
-        loading={isLoading}
-      >
-        {$t('delete_modal.yes')}
-      </Button>
+      <div class="mt-8 flex items-center justify-between">
+        <Button variant="outline" onclick={() => (open = false)} disabled={isLoading}>
+          {$t('delete_modal.no')}
+        </Button>
+        <Button variant="destructive" onclick={onDelete} loading={isLoading}>
+          {$t('delete_modal.yes')}
+        </Button>
+      </div>
     </div>
-  </div>
   </Dialog.Content>
 </Dialog.Root>
-
diff --git a/apps/dashboard/src/lib/features/ui/icons/arrow-top-right.svelte b/apps/dashboard/src/lib/features/ui/icons/arrow-top-right.svelte
index 682d8f91..883eb60d 100644
--- a/apps/dashboard/src/lib/features/ui/icons/arrow-top-right.svelte
+++ b/apps/dashboard/src/lib/features/ui/icons/arrow-top-right.svelte
@@ -15,4 +15,3 @@
     <line x1="17" y1="7" x2="7" y2="17" /><polyline points="8 7 17 7 17 16" />
   </svg>
 </span>
-
diff --git a/apps/dashboard/src/lib/features/ui/icons/circle-check-icon.svelte b/apps/dashboard/src/lib/features/ui/icons/circle-check-icon.svelte
index 4f859b79..3e6000d5 100644
--- a/apps/dashboard/src/lib/features/ui/icons/circle-check-icon.svelte
+++ b/apps/dashboard/src/lib/features/ui/icons/circle-check-icon.svelte
@@ -51,4 +51,3 @@
     fill: none; /* Ensure the checkmark path itself is not filled */
   }
 </style>
-
diff --git a/apps/dashboard/src/lib/features/ui/icons/courses-empty-icon.svelte b/apps/dashboard/src/lib/features/ui/icons/courses-empty-icon.svelte
index 721742eb..37d68245 100644
--- a/apps/dashboard/src/lib/features/ui/icons/courses-empty-icon.svelte
+++ b/apps/dashboard/src/lib/features/ui/icons/courses-empty-icon.svelte
@@ -41,4 +41,3 @@
     stroke-linejoin="bevel"
   />
 </svg>
-
diff --git a/apps/dashboard/src/lib/features/ui/icons/email-sent-icon.svelte b/apps/dashboard/src/lib/features/ui/icons/email-sent-icon.svelte
index 0715d45f..f09599ce 100644
--- a/apps/dashboard/src/lib/features/ui/icons/email-sent-icon.svelte
+++ b/apps/dashboard/src/lib/features/ui/icons/email-sent-icon.svelte
@@ -15,4 +15,3 @@
     stroke-width="5"
   />
 </svg>
-
diff --git a/apps/dashboard/src/lib/features/ui/icons/error-icon-dark-mode.svelte b/apps/dashboard/src/lib/features/ui/icons/error-icon-dark-mode.svelte
index 6cd51e1a..a03dfc4b 100644
--- a/apps/dashboard/src/lib/features/ui/icons/error-icon-dark-mode.svelte
+++ b/apps/dashboard/src/lib/features/ui/icons/error-icon-dark-mode.svelte
@@ -183,4 +183,3 @@
     fill="#E4E4E4"
   />
 </svg>
-
diff --git a/apps/dashboard/src/lib/features/ui/icons/error-icon.svelte b/apps/dashboard/src/lib/features/ui/icons/error-icon.svelte
index 7c291cd7..73680ba9 100644
--- a/apps/dashboard/src/lib/features/ui/icons/error-icon.svelte
+++ b/apps/dashboard/src/lib/features/ui/icons/error-icon.svelte
@@ -183,4 +183,3 @@
     fill="#5C6065"
   />
 </svg>
-
diff --git a/apps/dashboard/src/lib/features/ui/icons/google-icon-colored.svelte b/apps/dashboard/src/lib/features/ui/icons/google-icon-colored.svelte
index 435ecb46..99f18468 100644
--- a/apps/dashboard/src/lib/features/ui/icons/google-icon-colored.svelte
+++ b/apps/dashboard/src/lib/features/ui/icons/google-icon-colored.svelte
@@ -24,4 +24,3 @@
     fill="#EB4132"
   />
 </svg>
-
diff --git a/apps/dashboard/src/lib/features/ui/icons/user-profile-icon.svelte b/apps/dashboard/src/lib/features/ui/icons/user-profile-icon.svelte
index dacf1ee9..fd558921 100644
--- a/apps/dashboard/src/lib/features/ui/icons/user-profile-icon.svelte
+++ b/apps/dashboard/src/lib/features/ui/icons/user-profile-icon.svelte
@@ -15,4 +15,3 @@
     </clipPath>
   </defs>
 </svg>
-
diff --git a/apps/dashboard/src/lib/features/ui/navigation/breadcrumb-core.ts b/apps/dashboard/src/lib/features/ui/navigation/breadcrumb-core.ts
index 1869f05c..89398e42 100644
--- a/apps/dashboard/src/lib/features/ui/navigation/breadcrumb-core.ts
+++ b/apps/dashboard/src/lib/features/ui/navigation/breadcrumb-core.ts
@@ -46,12 +46,12 @@ export interface BreadcrumbConfig {
    * Can be a string or a function that extracts the prefix dynamically
    */
   pathPrefix: string | ((pathname: string) => string);
-  
+
   /**
    * Base path for generating hrefs (e.g., '/lms', '/org/myorg')
    */
   basePath: string | ((pathname: string) => string);
-  
+
   /**
    * Resolver for dynamic segment titles
    * Can resolve from page.data, stores, or API calls
@@ -62,12 +62,12 @@ export interface BreadcrumbConfig {
     fullPathname: string,
     context?: unknown
   ) => string | Promise<string> | null | undefined;
-  
+
   /**
    * Optional: Cache breadcrumbs for better performance
    */
   enableCache?: boolean;
-  
+
   /**
    * Optional: Maximum breadcrumb depth (prevents infinite recursion)
    */
@@ -107,7 +107,7 @@ function getCachedOrGenerate(
   }
 
   clearExpiredCache();
-  
+
   const cached = breadcrumbCache.get(cacheKey);
   if (cached) {
     return cached;
@@ -122,31 +122,25 @@ function getCachedOrGenerate(
 /**
  * Extract path prefix from pathname
  */
-function extractPathPrefix(
-  pathname: string,
-  prefixConfig: string | ((pathname: string) => string)
-): string {
+function extractPathPrefix(pathname: string, prefixConfig: string | ((pathname: string) => string)): string {
   if (typeof prefixConfig === 'function') {
     return prefixConfig(pathname);
   }
-  
+
   // Handle dynamic prefixes like '/org/[slug]'
   if (prefixConfig.includes('[')) {
     const pattern = prefixConfig.replace(/\[.*?\]/g, '[^/]+');
     const match = pathname.match(new RegExp(`^${pattern}`));
     return match ? match[0] : '';
   }
-  
+
   return pathname.startsWith(prefixConfig) ? prefixConfig : '';
 }
 
 /**
  * Get base path for href generation
  */
-function getBasePath(
-  pathname: string,
-  basePathConfig: string | ((pathname: string) => string)
-): string {
+function getBasePath(pathname: string, basePathConfig: string | ((pathname: string) => string)): string {
   if (typeof basePathConfig === 'function') {
     return basePathConfig(pathname);
   }
@@ -228,19 +222,16 @@ async function resolveDynamicTitle(
 /**
  * Extract parameters from pathname (e.g., { slug: 'my-post' })
  */
-function extractParamsFromPath(
-  pathname: string,
-  parentPath: string
-): Record<string, string> {
+function extractParamsFromPath(pathname: string, parentPath: string): Record<string, string> {
   const params: Record<string, string> = {};
   const relativePath = pathname.replace(parentPath, '').replace(/^\//, '');
   const segments = relativePath.split('/').filter(Boolean);
-  
+
   // Simple extraction - can be enhanced for more complex patterns
   segments.forEach((segment, index) => {
     params[`param${index}`] = segment;
   });
-  
+
   return params;
 }
 
@@ -272,7 +263,7 @@ async function generateNestedBreadcrumbs(
   // Check for static nested route
   if (navItem.nestedRoutes) {
     const nestedRoute = navItem.nestedRoutes.find((route) => route.path === currentSegment);
-    
+
     if (nestedRoute) {
       breadcrumbs.push({
         label: nestedRoute.titleKey,
@@ -300,16 +291,11 @@ async function generateNestedBreadcrumbs(
   }
 
   // Handle dynamic segment
-  if (navItem.supportsDynamicSegment || 
-      navItem.nestedRoutes?.some((route) => route.supportsDynamicSegment && route.path !== currentSegment)) {
-    const dynamicTitle = await resolveDynamicTitle(
-      currentSegment,
-      currentPath,
-      fullPathname,
-      navItem,
-      config,
-      context
-    );
+  if (
+    navItem.supportsDynamicSegment ||
+    navItem.nestedRoutes?.some((route) => route.supportsDynamicSegment && route.path !== currentSegment)
+  ) {
+    const dynamicTitle = await resolveDynamicTitle(currentSegment, currentPath, fullPathname, navItem, config, context);
 
     if (dynamicTitle) {
       breadcrumbs.push({
@@ -323,7 +309,7 @@ async function generateNestedBreadcrumbs(
         const supportingNestedRoute = navItem.nestedRoutes?.find(
           (route) => route.supportsDynamicSegment && route.nestedRoutes
         );
-        
+
         if (supportingNestedRoute) {
           const nestedBreadcrumbs = await generateNestedBreadcrumbs(
             remainingSegments,
@@ -356,7 +342,7 @@ export async function generateBreadcrumbs(
   context?: unknown
 ): Promise<BreadcrumbItem[]> {
   const cacheKey = `${pathname}${searchParams}`;
-  
+
   return getCachedOrGenerate(
     cacheKey,
     () => generateBreadcrumbsSync(pathname, searchParams, navItems, config, context),
@@ -381,7 +367,7 @@ export function generateBreadcrumbsSync(
   // Extract path prefix and base path
   const pathPrefix = extractPathPrefix(pathname, config.pathPrefix);
   const basePath = getBasePath(pathname, config.basePath);
-  
+
   // Get relative path after removing prefix
   const relativePath = pathname.replace(pathPrefix, '').replace(/^\//, '') || '';
   const pathSegments = relativePath.split('/').filter(Boolean);
@@ -400,10 +386,8 @@ export function generateBreadcrumbsSync(
   }
 
   // Add parent breadcrumb
-  const parentHref = matchedNavItem.useHashUrl 
-    ? `${basePath}${matchedNavItem.path}` 
-    : matchedNavItem.url;
-  
+  const parentHref = matchedNavItem.useHashUrl ? `${basePath}${matchedNavItem.path}` : matchedNavItem.url;
+
   breadcrumbs.push({
     label: matchedNavItem.breadcrumbLabel || matchedNavItem.title,
     href: parentHref
@@ -411,10 +395,8 @@ export function generateBreadcrumbsSync(
 
   // Handle query params (settings tabs, etc.)
   if (matchedNavItem.items && searchParams) {
-    const subItem = matchedNavItem.items.find((sub) => 
-      isActive(pathWithQuery, sub.url, undefined, true)
-    );
-    
+    const subItem = matchedNavItem.items.find((sub) => isActive(pathWithQuery, sub.url, undefined, true));
+
     if (subItem) {
       breadcrumbs.push({
         label: subItem.breadcrumbLabel || subItem.title,
@@ -428,7 +410,7 @@ export function generateBreadcrumbsSync(
   if (pathSegments.length > 1) {
     const remainingSegments = pathSegments.slice(1);
     const parentPath = `${basePath}${matchedNavItem.path}`;
-    
+
     // Note: For async resolvers, you'd need to use generateBreadcrumbs instead
     const nestedBreadcrumbs = generateNestedBreadcrumbsSync(
       remainingSegments,
@@ -440,7 +422,7 @@ export function generateBreadcrumbsSync(
       config,
       context
     );
-    
+
     breadcrumbs.push(...nestedBreadcrumbs);
   }
 
@@ -475,7 +457,7 @@ function generateNestedBreadcrumbsSync(
   // Check for static nested route
   if (navItem.nestedRoutes) {
     const nestedRoute = navItem.nestedRoutes.find((route) => route.path === currentSegment);
-    
+
     if (nestedRoute) {
       breadcrumbs.push({
         label: nestedRoute.titleKey,
@@ -506,14 +488,9 @@ function generateNestedBreadcrumbsSync(
   if (navItem.supportsDynamicSegment) {
     // Try to resolve title synchronously (from context if available)
     let dynamicTitle: string | null = null;
-    
+
     if (config.dynamicTitleResolver) {
-      const result = config.dynamicTitleResolver(
-        currentSegment,
-        currentPath,
-        fullPathname,
-        context
-      );
+      const result = config.dynamicTitleResolver(currentSegment, currentPath, fullPathname, context);
       // Only use if it's not a promise
       if (typeof result === 'string') {
         dynamicTitle = result;
@@ -531,7 +508,7 @@ function generateNestedBreadcrumbsSync(
         const supportingNestedRoute = navItem.nestedRoutes?.find(
           (route) => route.supportsDynamicSegment && route.nestedRoutes
         );
-        
+
         if (supportingNestedRoute?.nestedRoutes) {
           const nestedBreadcrumbs = generateNestedBreadcrumbsSync(
             remainingSegments,
@@ -560,4 +537,3 @@ export function clearBreadcrumbCache() {
   breadcrumbCache.clear();
   cacheTimestamps.clear();
 }
-
diff --git a/apps/dashboard/src/lib/features/ui/navigation/lms-breadcrumb.ts b/apps/dashboard/src/lib/features/ui/navigation/lms-breadcrumb.ts
index 3e2c8f92..21fb0d4b 100644
--- a/apps/dashboard/src/lib/features/ui/navigation/lms-breadcrumb.ts
+++ b/apps/dashboard/src/lib/features/ui/navigation/lms-breadcrumb.ts
@@ -105,4 +105,3 @@ export function generateLmsBreadcrumbs(
 
   return breadcrumbs;
 }
-
diff --git a/apps/dashboard/src/lib/features/ui/navigation/lms-breadcrumbs.svelte b/apps/dashboard/src/lib/features/ui/navigation/lms-breadcrumbs.svelte
index 4b5b938e..f7ab30bf 100644
--- a/apps/dashboard/src/lib/features/ui/navigation/lms-breadcrumbs.svelte
+++ b/apps/dashboard/src/lib/features/ui/navigation/lms-breadcrumbs.svelte
@@ -15,7 +15,7 @@
 
   // Get breadcrumb title from store for LMS community posts
   const breadcrumbTitle = $derived($currentCommunityQuestion.title);
-  
+
   const breadcrumbs = $derived(
     generateLmsBreadcrumbs(
       page.url.pathname,
@@ -98,4 +98,3 @@
     {/if}
   </Breadcrumb.List>
 </Breadcrumb.Root>
-
diff --git a/apps/dashboard/src/lib/features/ui/navigation/lms-header.svelte b/apps/dashboard/src/lib/features/ui/navigation/lms-header.svelte
index bceeacc6..8b02d235 100644
--- a/apps/dashboard/src/lib/features/ui/navigation/lms-header.svelte
+++ b/apps/dashboard/src/lib/features/ui/navigation/lms-header.svelte
@@ -60,4 +60,3 @@
     {/if}
   </div>
 </header>
-
diff --git a/apps/dashboard/src/lib/features/ui/senja-embed.svelte b/apps/dashboard/src/lib/features/ui/senja-embed.svelte
index 7510c93e..2bca2727 100644
--- a/apps/dashboard/src/lib/features/ui/senja-embed.svelte
+++ b/apps/dashboard/src/lib/features/ui/senja-embed.svelte
@@ -14,4 +14,3 @@
 </script>
 
 <div class="senja-embed" data-id={id} data-lazyload="false" data-spinner="false"></div>
-
diff --git a/apps/dashboard/src/lib/features/ui/sidebar/lms-sidebar/nav-main.svelte b/apps/dashboard/src/lib/features/ui/sidebar/lms-sidebar/nav-main.svelte
index 30b2a0dd..5f37236e 100644
--- a/apps/dashboard/src/lib/features/ui/sidebar/lms-sidebar/nav-main.svelte
+++ b/apps/dashboard/src/lib/features/ui/sidebar/lms-sidebar/nav-main.svelte
@@ -75,4 +75,3 @@
     {/each}
   </Sidebar.Menu>
 </Sidebar.Group>
-
diff --git a/apps/dashboard/src/lib/features/ui/upload-widget/upload-widget.svelte b/apps/dashboard/src/lib/features/ui/upload-widget/upload-widget.svelte
index 24c2ff99..94262bfb 100644
--- a/apps/dashboard/src/lib/features/ui/upload-widget/upload-widget.svelte
+++ b/apps/dashboard/src/lib/features/ui/upload-widget/upload-widget.svelte
@@ -108,78 +108,84 @@
       <Dialog.Title>{$t('course.navItem.landing_page.upload_widget.title')}</Dialog.Title>
     </Dialog.Header>
     <div class="w-full bg-white p-5 dark:bg-inherit">
-    <UnderlineTabs.Root bind:value={currentTab}>
-      <UnderlineTabs.List>
-        {#each tabs as tab}
-          <UnderlineTabs.Trigger value={tab.value}>
-            {tab.label}
-          </UnderlineTabs.Trigger>
-        {/each}
-      </UnderlineTabs.List>
-      <UnderlineTabs.Content value={tabs[1].value}>
-        <!-- Your Upload content here -->
-        <div class="w-full">
-          <input
-            type="file"
-            style="display: none;"
-            bind:this={fileInput}
-            onchange={onFileSelected}
-            disabled={isUploading}
-          />
-          <Button onclick={handleUpload} loading={isUploading}>
-            {label}
-          </Button>
-          <p class="my-2 text-center text-sm text-gray-500">
-            {$t('course.navItem.landing_page.upload_widget.width')}
-          </p>
-          <p class="text-center text-sm text-gray-500">
-            {$t('course.navItem.landing_page.upload_widget.size')}
-          </p>
-        </div>
-      </UnderlineTabs.Content>
-      <UnderlineTabs.Content value={tabs[0].value}>
-        <!-- Your Images content here -->
-        <div class="h-full overflow-y-scroll">
-          <form onsubmit={preventDefault(handleSubmit)} class="mt-1 flex gap-2 pb-3">
-            <input type="text" bind:value={searchQuery} name="" id="" class="ml-2 w-[85%] rounded-lg dark:text-black" />
-            <button type="submit" class="rounded-lg border border-gray-500 bg-white px-3 py-1 text-black"
-              >{$t('course.navItem.landing_page.upload_widget.submit')}</button
-            >
-          </form>
-          {#if unsplashImages && unsplashImages.length > 0}
-            <div class="hide-scrollbar flex max-h-[300px] flex-row flex-wrap items-center gap-2 px-[10px]">
-              {#each unsplashImages as unsplashImages (unsplashImages.id)}
-                <div>
-                  <div class="relative h-[130px] w-[195px] overflow-hidden">
-                    <button onclick={() => handleImageClick(unsplashImages.urls.regular)}>
-                      <img
-                        src={unsplashImages.urls.regular}
-                        alt={unsplashImages.alt_description}
-                        class="h-full w-full cursor-pointer rounded-md object-cover hover:opacity-80"
-                      />
-                    </button>
-                  </div>
-                  {#if unsplashImages.user.name}
-                    <p class="mt-1 text-center text-xs font-light text-gray-500">
-                      By <a
-                        href={`https://unsplash.com/@${unsplashImages.user.username}`}
-                        target="_blank"
-                        class="hover:text-red-700">{unsplashImages.user.name}</a
-                      >
-                    </p>
-                  {/if}
-                </div>
-              {/each}
-            </div>
-          {:else}
-            <p class="pt-7 text-center">
-              {$t('course.navItem.landing_page.upload_widget.no_images')}
+      <UnderlineTabs.Root bind:value={currentTab}>
+        <UnderlineTabs.List>
+          {#each tabs as tab}
+            <UnderlineTabs.Trigger value={tab.value}>
+              {tab.label}
+            </UnderlineTabs.Trigger>
+          {/each}
+        </UnderlineTabs.List>
+        <UnderlineTabs.Content value={tabs[1].value}>
+          <!-- Your Upload content here -->
+          <div class="w-full">
+            <input
+              type="file"
+              style="display: none;"
+              bind:this={fileInput}
+              onchange={onFileSelected}
+              disabled={isUploading}
+            />
+            <Button onclick={handleUpload} loading={isUploading}>
+              {label}
+            </Button>
+            <p class="my-2 text-center text-sm text-gray-500">
+              {$t('course.navItem.landing_page.upload_widget.width')}
             </p>
-          {/if}
-        </div>
-      </UnderlineTabs.Content>
-    </UnderlineTabs.Root>
-  </div>
+            <p class="text-center text-sm text-gray-500">
+              {$t('course.navItem.landing_page.upload_widget.size')}
+            </p>
+          </div>
+        </UnderlineTabs.Content>
+        <UnderlineTabs.Content value={tabs[0].value}>
+          <!-- Your Images content here -->
+          <div class="h-full overflow-y-scroll">
+            <form onsubmit={preventDefault(handleSubmit)} class="mt-1 flex gap-2 pb-3">
+              <input
+                type="text"
+                bind:value={searchQuery}
+                name=""
+                id=""
+                class="ml-2 w-[85%] rounded-lg dark:text-black"
+              />
+              <button type="submit" class="rounded-lg border border-gray-500 bg-white px-3 py-1 text-black"
+                >{$t('course.navItem.landing_page.upload_widget.submit')}</button
+              >
+            </form>
+            {#if unsplashImages && unsplashImages.length > 0}
+              <div class="hide-scrollbar flex max-h-[300px] flex-row flex-wrap items-center gap-2 px-[10px]">
+                {#each unsplashImages as unsplashImages (unsplashImages.id)}
+                  <div>
+                    <div class="relative h-[130px] w-[195px] overflow-hidden">
+                      <button onclick={() => handleImageClick(unsplashImages.urls.regular)}>
+                        <img
+                          src={unsplashImages.urls.regular}
+                          alt={unsplashImages.alt_description}
+                          class="h-full w-full cursor-pointer rounded-md object-cover hover:opacity-80"
+                        />
+                      </button>
+                    </div>
+                    {#if unsplashImages.user.name}
+                      <p class="mt-1 text-center text-xs font-light text-gray-500">
+                        By <a
+                          href={`https://unsplash.com/@${unsplashImages.user.username}`}
+                          target="_blank"
+                          class="hover:text-red-700">{unsplashImages.user.name}</a
+                        >
+                      </p>
+                    {/if}
+                  </div>
+                {/each}
+              </div>
+            {:else}
+              <p class="pt-7 text-center">
+                {$t('course.navItem.landing_page.upload_widget.no_images')}
+              </p>
+            {/if}
+          </div>
+        </UnderlineTabs.Content>
+      </UnderlineTabs.Root>
+    </div>
   </Dialog.Content>
 </Dialog.Root>
 
diff --git a/apps/dashboard/src/lib/features/ui/vote.svelte b/apps/dashboard/src/lib/features/ui/vote.svelte
index 835bd345..d6a6fb8d 100644
--- a/apps/dashboard/src/lib/features/ui/vote.svelte
+++ b/apps/dashboard/src/lib/features/ui/vote.svelte
@@ -16,4 +16,3 @@
   <ArrowUpIcon size={16} />
   <Chip {value} />
 </Button>
-
diff --git a/apps/dashboard/src/lib/utils/functions/fileValidation.ts b/apps/dashboard/src/lib/utils/functions/fileValidation.ts
index 5f0b2fcd..658c5750 100644
--- a/apps/dashboard/src/lib/utils/functions/fileValidation.ts
+++ b/apps/dashboard/src/lib/utils/functions/fileValidation.ts
@@ -2,13 +2,7 @@
  * Server-side file type validation utilities for preventing malicious uploads
  * Specifically designed to prevent SVG XSS attacks and other security issues
  */
-export const ALLOWED_IMAGE_TYPES = [
-  'image/jpeg',
-  'image/jpg',
-  'image/png',
-  'image/gif',
-  'image/webp'
-] as const;
+export const ALLOWED_IMAGE_TYPES = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp'] as const;
 
 export const ALLOWED_EXTENSIONS = ['.jpg', '.jpeg', '.png', '.gif', '.webp'] as const;
 
diff --git a/apps/dashboard/src/lib/utils/functions/permissions.ts b/apps/dashboard/src/lib/utils/functions/permissions.ts
index dfd6beec..0854dc1e 100644
--- a/apps/dashboard/src/lib/utils/functions/permissions.ts
+++ b/apps/dashboard/src/lib/utils/functions/permissions.ts
@@ -24,11 +24,7 @@ export async function checkUserCoursePermissions(
     .single();
 
   // Check if user is org admin
-  const { data: orgData } = await supabase
-    .from('group')
-    .select('organization_id')
-    .eq('id', courseGroupId)
-    .single();
+  const { data: orgData } = await supabase.from('group').select('organization_id').eq('id', courseGroupId).single();
 
   let isOrgAdmin = false;
   if (orgData?.organization_id) {
diff --git a/apps/dashboard/src/lib/utils/translations/da.json b/apps/dashboard/src/lib/utils/translations/da.json
index e397a76f..a0d01866 100644
--- a/apps/dashboard/src/lib/utils/translations/da.json
+++ b/apps/dashboard/src/lib/utils/translations/da.json
@@ -1624,4 +1624,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/apps/dashboard/src/lib/utils/translations/de.json b/apps/dashboard/src/lib/utils/translations/de.json
index d81ef81a..d8594d85 100644
--- a/apps/dashboard/src/lib/utils/translations/de.json
+++ b/apps/dashboard/src/lib/utils/translations/de.json
@@ -1655,4 +1655,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/apps/dashboard/src/lib/utils/translations/es.json b/apps/dashboard/src/lib/utils/translations/es.json
index a40813e5..94966244 100644
--- a/apps/dashboard/src/lib/utils/translations/es.json
+++ b/apps/dashboard/src/lib/utils/translations/es.json
@@ -1655,4 +1655,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/apps/dashboard/src/lib/utils/translations/fr.json b/apps/dashboard/src/lib/utils/translations/fr.json
index 8453a5a6..066ca288 100644
--- a/apps/dashboard/src/lib/utils/translations/fr.json
+++ b/apps/dashboard/src/lib/utils/translations/fr.json
@@ -1655,4 +1655,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/apps/dashboard/src/lib/utils/translations/hi.json b/apps/dashboard/src/lib/utils/translations/hi.json
index 310411dd..eebe756d 100644
--- a/apps/dashboard/src/lib/utils/translations/hi.json
+++ b/apps/dashboard/src/lib/utils/translations/hi.json
@@ -1655,4 +1655,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/apps/dashboard/src/lib/utils/translations/pl.json b/apps/dashboard/src/lib/utils/translations/pl.json
index 3e9e297b..6ce55ce3 100644
--- a/apps/dashboard/src/lib/utils/translations/pl.json
+++ b/apps/dashboard/src/lib/utils/translations/pl.json
@@ -1625,4 +1625,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/apps/dashboard/src/lib/utils/translations/pt.json b/apps/dashboard/src/lib/utils/translations/pt.json
index 8b88d392..2c65e624 100644
--- a/apps/dashboard/src/lib/utils/translations/pt.json
+++ b/apps/dashboard/src/lib/utils/translations/pt.json
@@ -1655,4 +1655,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/apps/dashboard/src/lib/utils/translations/ru.json b/apps/dashboard/src/lib/utils/translations/ru.json
index 5830bca8..4d517401 100644
--- a/apps/dashboard/src/lib/utils/translations/ru.json
+++ b/apps/dashboard/src/lib/utils/translations/ru.json
@@ -1655,4 +1655,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/apps/dashboard/src/lib/utils/translations/vi.json b/apps/dashboard/src/lib/utils/translations/vi.json
index c6da97bd..b2a12152 100644
--- a/apps/dashboard/src/lib/utils/translations/vi.json
+++ b/apps/dashboard/src/lib/utils/translations/vi.json
@@ -1655,4 +1655,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/apps/dashboard/src/lib/utils/validation/USAGE.md b/apps/dashboard/src/lib/utils/validation/USAGE.md
index 77a4214a..b8346611 100644
--- a/apps/dashboard/src/lib/utils/validation/USAGE.md
+++ b/apps/dashboard/src/lib/utils/validation/USAGE.md
@@ -3,6 +3,7 @@
 ## Overview
 
 We use **convention-based translation keys** for Zod validation errors. This approach:
+
 - ✅ No metadata needed - just follow the naming pattern
 - ✅ Clean shared schemas without hardcoded messages
 - ✅ Automatic fallback to generic translations
@@ -18,14 +19,14 @@ validations.{fieldName}.{errorCode}
 
 ### Common Error Codes
 
-| Error Code | When It Occurs | Example Field |
-|------------|----------------|---------------|
-| `too_small` | String too short, number too small, array too few items | username.too_small |
-| `too_big` | String too long, number too large, array too many items | bio.too_big |
-| `invalid_email` | Invalid email format | email.invalid_email |
-| `invalid_url` | Invalid URL format | website.invalid_url |
-| `invalid_type` | Wrong type (e.g., undefined when string expected) | username.invalid_type |
-| `invalid_enum_value` | Value not in allowed options | role.invalid_enum_value |
+| Error Code           | When It Occurs                                          | Example Field           |
+| -------------------- | ------------------------------------------------------- | ----------------------- |
+| `too_small`          | String too short, number too small, array too few items | username.too_small      |
+| `too_big`            | String too long, number too large, array too many items | bio.too_big             |
+| `invalid_email`      | Invalid email format                                    | email.invalid_email     |
+| `invalid_url`        | Invalid URL format                                      | website.invalid_url     |
+| `invalid_type`       | Wrong type (e.g., undefined when string expected)       | username.invalid_type   |
+| `invalid_enum_value` | Value not in allowed options                            | role.invalid_enum_value |
 
 ## Quick Start
 
@@ -40,12 +41,12 @@ let errors: Record<string, string> = {};
 
 function handleSubmit() {
   const result = ZEmailData.safeParse(formData);
-  
+
   if (!result.success) {
     errors = mapZodErrorsToTranslations(result.error);
     return;
   }
-  
+
   // Use validated data
   sendEmail(result.data);
 }
@@ -68,7 +69,7 @@ function handleSubmit() {
       "too_small": "Content must be at least 1 character",
       "too_big": "Content is too long"
     },
-    
+
     "generic": {
       "required": "This field is required",
       "invalid_email": "Invalid email address",
@@ -101,24 +102,24 @@ export const ZUserProfile = z.object({
 <script lang="ts">
   import { ZUserProfile } from '@cio/utils/validation/user';
   import { mapZodErrorsToTranslations } from '$lib/utils/validation';
-  
+
   let formData = {
     email: '',
     username: '',
     bio: '',
     age: 0
   };
-  
+
   let errors: Record<string, string> = {};
-  
+
   function handleSubmit() {
     const result = ZUserProfile.safeParse(formData);
-    
+
     if (!result.success) {
       errors = mapZodErrorsToTranslations(result.error);
       return;
     }
-    
+
     // Success!
     saveProfile(result.data);
   }
@@ -194,7 +195,7 @@ Zod validates in order and returns the **first error** it encounters:
 
 ```typescript
 // Schema
-z.string().min(3).max(20)
+z.string().min(3).max(20);
 
 // Input: ""
 // Error: too_small (stops at first rule)
@@ -226,12 +227,12 @@ import { validateWithTranslation } from '$lib/utils/validation';
 
 function handleSubmit() {
   const result = validateWithTranslation(ZUserProfile, formData);
-  
+
   if ('errors' in result) {
     errors = result.errors;
     return;
   }
-  
+
   // Success - result.data is typed!
   saveProfile(result.data);
 }
@@ -240,6 +241,7 @@ function handleSubmit() {
 ## Adding New Fields
 
 1. **Add to schema** (in packages/utils):
+
 ```typescript
 export const ZUserProfile = z.object({
   // ... existing fields
@@ -248,6 +250,7 @@ export const ZUserProfile = z.object({
 ```
 
 2. **Add translations**:
+
 ```json
 {
   "validations": {
diff --git a/apps/dashboard/src/routes/(auth)/verify-email-error/+page.svelte b/apps/dashboard/src/routes/(auth)/verify-email-error/+page.svelte
index 191301d9..6983f910 100644
--- a/apps/dashboard/src/routes/(auth)/verify-email-error/+page.svelte
+++ b/apps/dashboard/src/routes/(auth)/verify-email-error/+page.svelte
@@ -12,7 +12,7 @@
   let { message, title } = $derived.by(() => {
     const fields = {
       title: '',
-      message: '',
+      message: ''
     };
     if (!type) return fields;
 
@@ -42,10 +42,7 @@
   });
 
   function handleSupport() {
-    window.open(
-      'mailto:help@classroomio.com?subject=Email Verification Issue&body=Error Type: ' + type,
-      '_blank'
-    );
+    window.open('mailto:help@classroomio.com?subject=Email Verification Issue&body=Error Type: ' + type, '_blank');
   }
 </script>
 
@@ -55,7 +52,7 @@
 </svelte:head>
 
 <Empty
-  title={title}
+  {title}
   description={message}
   icon={OctagonAlertIcon}
   variant="page"
@@ -63,34 +60,27 @@
   showLogo={true}
   class="h-fit! flex-none! max-h-none!"
 >
-{#if type === 'legacy_method_blocked'}
-<div
-  class="rounded-md border border-yellow-200 bg-yellow-50 p-4 dark:border-yellow-800 dark:bg-yellow-900/20"
->
-  <div class="flex items-center">
-    <TriangleAlertIcon class="h-5 w-5 flex-shrink-0 text-yellow-400" />
-    <div class="ml-3">
-      <h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-200">
-        {$t('email_verification.security_notice.title')}
-      </h3>
-      <p class="mt-1 text-xs text-yellow-700 dark:text-yellow-300">
-        {$t('email_verification.security_notice.message')}
-      </p>
+  {#if type === 'legacy_method_blocked'}
+    <div class="rounded-md border border-yellow-200 bg-yellow-50 p-4 dark:border-yellow-800 dark:bg-yellow-900/20">
+      <div class="flex items-center">
+        <TriangleAlertIcon class="h-5 w-5 flex-shrink-0 text-yellow-400" />
+        <div class="ml-3">
+          <h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-200">
+            {$t('email_verification.security_notice.title')}
+          </h3>
+          <p class="mt-1 text-xs text-yellow-700 dark:text-yellow-300">
+            {$t('email_verification.security_notice.message')}
+          </p>
+        </div>
+      </div>
     </div>
+  {/if}
+  <div class="lex w-full flex-col justify-center gap-4 md:flex-row">
+    <Button onclick={handleSupport} variant="ghost">
+      {$t('email_verification.actions.contact_support')}
+    </Button>
+    <Button onclick={() => goto('/')}>
+      {$t('email_verification.actions.back_to_dashboard')}
+    </Button>
   </div>
-</div>
-{/if}
-<div class="lex w-full flex-col justify-center gap-4 md:flex-row">
-  <Button
-    onclick={handleSupport}
-    variant="ghost"
-  >
-    {$t('email_verification.actions.contact_support')}
-  </Button>
-  <Button
-    onclick={() => goto('/')}
-  >
-    {$t('email_verification.actions.back_to_dashboard')}
-  </Button>
-</div>
 </Empty>
diff --git a/apps/dashboard/src/routes/+layout.svelte b/apps/dashboard/src/routes/+layout.svelte
index bc129534..ddb6b5c4 100644
--- a/apps/dashboard/src/routes/+layout.svelte
+++ b/apps/dashboard/src/routes/+layout.svelte
@@ -77,8 +77,7 @@
     }
     console.log('path', path);
     console.log('isPublicRoute', isPublicRoute(path));
-    console.log('data', $session.data)
-
+    console.log('data', $session.data);
 
     // No need to require login for public routes
     if (isPublicRoute(path) && path !== '/') return;
diff --git a/apps/dashboard/src/routes/api/admin/cleanup-tokens/+server.ts b/apps/dashboard/src/routes/api/admin/cleanup-tokens/+server.ts
index 02bbe0ac..8a80e394 100644
--- a/apps/dashboard/src/routes/api/admin/cleanup-tokens/+server.ts
+++ b/apps/dashboard/src/routes/api/admin/cleanup-tokens/+server.ts
@@ -19,9 +19,7 @@ export async function POST({ request }) {
 
   try {
     // Clean up expired tokens
-    const { data: cleanupResult, error } = await supabase.rpc(
-      'cleanup_expired_verification_tokens'
-    );
+    const { data: cleanupResult, error } = await supabase.rpc('cleanup_expired_verification_tokens');
 
     if (error) {
       console.error('Token cleanup failed:', error);
diff --git a/apps/dashboard/src/routes/api/admin/security-monitor/+server.ts b/apps/dashboard/src/routes/api/admin/security-monitor/+server.ts
index ddb673c2..5fb1b549 100644
--- a/apps/dashboard/src/routes/api/admin/security-monitor/+server.ts
+++ b/apps/dashboard/src/routes/api/admin/security-monitor/+server.ts
@@ -43,14 +43,11 @@ export async function GET({ url, request }) {
 
     const recent = tokenStats.filter((token) => new Date(token.created_at) > last24Hours);
     const used = tokenStats.filter((token) => token.used_at);
-    const expired = tokenStats.filter(
-      (token) => new Date(token.expires_at) < now && !token.used_at
-    );
+    const expired = tokenStats.filter((token) => new Date(token.expires_at) < now && !token.used_at);
 
     // Count unique IPs for anomaly detection
     const uniqueCreationIPs = new Set(tokenStats.map((t) => t.created_by_ip)).size;
-    const uniqueUsageIPs = new Set(tokenStats.filter((t) => t.used_by_ip).map((t) => t.used_by_ip))
-      .size;
+    const uniqueUsageIPs = new Set(tokenStats.filter((t) => t.used_by_ip).map((t) => t.used_by_ip)).size;
 
     return json({
       success: true,
@@ -61,8 +58,7 @@ export async function GET({ url, request }) {
         expired_unused: expired.length,
         unique_creation_ips: uniqueCreationIPs,
         unique_usage_ips: uniqueUsageIPs,
-        success_rate:
-          tokenStats.length > 0 ? ((used.length / tokenStats.length) * 100).toFixed(1) : 0
+        success_rate: tokenStats.length > 0 ? ((used.length / tokenStats.length) * 100).toFixed(1) : 0
       },
       recent_activity: recent.slice(0, 10).map((token) => ({
         created_at: token.created_at,
diff --git a/apps/dashboard/src/routes/api/courses/analytics/+server.ts b/apps/dashboard/src/routes/api/courses/analytics/+server.ts
index 4c2cbcc2..0ec15e2c 100644
--- a/apps/dashboard/src/routes/api/courses/analytics/+server.ts
+++ b/apps/dashboard/src/routes/api/courses/analytics/+server.ts
@@ -108,9 +108,7 @@ async function getCourseAnalytics(supabase: any, courseId: string): Promise<Cour
 
   // Get student analytics
   const studentAnalytics = await Promise.all(
-    members
-      .filter((member) => member.role_id === 3)
-      .map((member) => getStudentOverview(supabase, courseId, member))
+    members.filter((member) => member.role_id === 3).map((member) => getStudentOverview(supabase, courseId, member))
   );
 
   analytics.students = studentAnalytics.filter((student): student is StudentOverview => student !== null);
@@ -155,11 +153,7 @@ async function getLastLogin(supabase: any, userId: string): Promise<string | und
   }
 }
 
-async function getStudentOverview(
-  supabase: any,
-  courseId: string,
-  member: any
-): Promise<StudentOverview | null> {
+async function getStudentOverview(supabase: any, courseId: string, member: any): Promise<StudentOverview | null> {
   try {
     // Use the same service function that the working analytics/user API uses
     const { data: courseProgressData, error: progressError } = await fetchProfileCourseProgress(
diff --git a/apps/dashboard/src/routes/api/courses/data/+server.ts b/apps/dashboard/src/routes/api/courses/data/+server.ts
index ba00514b..9f413e2c 100644
--- a/apps/dashboard/src/routes/api/courses/data/+server.ts
+++ b/apps/dashboard/src/routes/api/courses/data/+server.ts
@@ -40,12 +40,7 @@ async function getCourse(supabase: any, courseId: string) {
   return course;
 }
 
-async function getGroupMembers(
-  supabase: any,
-  groupId: string,
-  isStudent: boolean,
-  userMembership: any
-) {
+async function getGroupMembers(supabase: any, groupId: string, isStudent: boolean, userMembership: any) {
   if (isStudent) {
     return {
       id: groupId,
@@ -53,11 +48,7 @@ async function getGroupMembers(
     };
   }
 
-  const { data: group, error } = await supabase
-    .from('group')
-    .select(GROUP_MEMBERS_SELECT)
-    .eq('id', groupId)
-    .single();
+  const { data: group, error } = await supabase.from('group').select(GROUP_MEMBERS_SELECT).eq('id', groupId).single();
 
   if (error) {
     throw new Error('Error fetching group members');
diff --git a/apps/dashboard/src/routes/api/courses/exercises/+server.ts b/apps/dashboard/src/routes/api/courses/exercises/+server.ts
index bce9f3a1..3b58fd1f 100644
--- a/apps/dashboard/src/routes/api/courses/exercises/+server.ts
+++ b/apps/dashboard/src/routes/api/courses/exercises/+server.ts
@@ -19,11 +19,7 @@ export const POST: RequestHandler = async ({ request }) => {
     const supabase = getServerSupabase();
 
     // Get course group_id for permission check
-    const { data: course } = await supabase
-      .from('course')
-      .select('group_id')
-      .eq('id', courseId)
-      .single();
+    const { data: course } = await supabase.from('course').select('group_id').eq('id', courseId).single();
 
     if (!course) {
       return json({ success: false, message: 'Course not found' }, { status: 404 });
@@ -41,9 +37,7 @@ export const POST: RequestHandler = async ({ request }) => {
       );
     }
 
-    const { data: exercises, error } = await supabase
-      .rpc('get_exercises')
-      .eq('course_id', courseId);
+    const { data: exercises, error } = await supabase.rpc('get_exercises').eq('course_id', courseId);
 
     if (error) {
       throw new Error('Error fetching exercises');
diff --git a/apps/dashboard/src/routes/api/courses/marks/+server.ts b/apps/dashboard/src/routes/api/courses/marks/+server.ts
index 56f7ec5c..4ddd993d 100644
--- a/apps/dashboard/src/routes/api/courses/marks/+server.ts
+++ b/apps/dashboard/src/routes/api/courses/marks/+server.ts
@@ -19,11 +19,7 @@ export const POST: RequestHandler = async ({ request }) => {
     const supabase = getServerSupabase();
 
     // Get course group_id for permission check
-    const { data: course } = await supabase
-      .from('course')
-      .select('group_id')
-      .eq('id', courseId)
-      .single();
+    const { data: course } = await supabase.from('course').select('group_id').eq('id', courseId).single();
 
     if (!course) {
       return json({ success: false, message: 'Course not found' }, { status: 404 });
diff --git a/apps/dashboard/src/routes/api/polar/webhook/+server.ts b/apps/dashboard/src/routes/api/polar/webhook/+server.ts
index c50c6b92..1b019e54 100644
--- a/apps/dashboard/src/routes/api/polar/webhook/+server.ts
+++ b/apps/dashboard/src/routes/api/polar/webhook/+server.ts
@@ -37,8 +37,8 @@ async function onPayload(payload: PolarWebhookPayload) {
       if (isSubscriptionActive) {
         try {
           const planData = {
-          orgId,
-          triggeredBy: parseInt(triggeredBy),
+            orgId,
+            triggeredBy: parseInt(triggeredBy),
             planName: PLAN.EARLY_ADOPTER as 'EARLY_ADOPTER' | 'ENTERPRISE' | 'BASIC',
             subscriptionId,
             payload: payload.data as unknown as Record<string, unknown>
@@ -56,9 +56,9 @@ async function onPayload(payload: PolarWebhookPayload) {
         // Handle Cancel Subscription
         try {
           const result = await OrgPlanApiServer.cancelOrgPlan({
-          subscriptionId,
+            subscriptionId,
             payload: payload.data as unknown as Record<string, unknown>
-        });
+          });
           console.log('Subscription canceled', result);
         } catch (error) {
           console.error('Error canceling org plan', error);
@@ -67,9 +67,9 @@ async function onPayload(payload: PolarWebhookPayload) {
         // Handle Update Subscription
         try {
           const result = await OrgPlanApiServer.updateOrgPlan({
-          subscriptionId,
+            subscriptionId,
             payload: payload.data as unknown as Record<string, unknown>
-        });
+          });
           console.log('Subscription updated', result);
         } catch (error) {
           console.error('Error updating org plan', error);
diff --git a/apps/dashboard/src/routes/courses/[id]/+layout.svelte b/apps/dashboard/src/routes/courses/[id]/+layout.svelte
index d53d3be8..3bc60e00 100644
--- a/apps/dashboard/src/routes/courses/[id]/+layout.svelte
+++ b/apps/dashboard/src/routes/courses/[id]/+layout.svelte
@@ -15,12 +15,12 @@
 <Sidebar.Provider>
   <CourseSidebar {path} />
 
-  <Sidebar.Inset class="w-[calc(100vw-var(--sidebar-width))] overflow-x-hidden group-data-[collapsible=icon]:w-[calc(100vw-var(--sidebar-width-icon))]">
+  <Sidebar.Inset
+    class="w-[calc(100vw-var(--sidebar-width))] overflow-x-hidden group-data-[collapsible=icon]:w-[calc(100vw-var(--sidebar-width-icon))]"
+  >
     <CourseHeader />
 
-    <Page.Root
-      class="mx-auto flex px-4 lg:max-w-6xl"
-    >
+    <Page.Root class="mx-auto flex px-4 lg:max-w-6xl">
       {@render children?.()}
     </Page.Root>
   </Sidebar.Inset>
diff --git a/apps/dashboard/src/routes/invite/s/[hash]/+page.svelte b/apps/dashboard/src/routes/invite/s/[hash]/+page.svelte
index 2d236fbb..da099d4c 100644
--- a/apps/dashboard/src/routes/invite/s/[hash]/+page.svelte
+++ b/apps/dashboard/src/routes/invite/s/[hash]/+page.svelte
@@ -130,12 +130,6 @@
   </div>
 
   <div class="my-4 flex w-full items-center justify-center">
-    <Button
-      type="submit"
-      disabled={disableSubmit || loading}
-      loading={loading || !$profile.id}
-    >
-      Join Course
-    </Button>
+    <Button type="submit" disabled={disableSubmit || loading} loading={loading || !$profile.id}>Join Course</Button>
   </div>
 </AuthUI>
diff --git a/apps/dashboard/src/routes/lms/settings/+layout.svelte b/apps/dashboard/src/routes/lms/settings/+layout.svelte
index 97e5abde..92f89795 100644
--- a/apps/dashboard/src/routes/lms/settings/+layout.svelte
+++ b/apps/dashboard/src/routes/lms/settings/+layout.svelte
@@ -10,4 +10,3 @@
 <Page.Root class="w-full pb-10 md:max-w-3xl lg:mx-auto">
   {@render children?.()}
 </Page.Root>
-
diff --git a/apps/dashboard/src/routes/lms/settings/integrations/+page.svelte b/apps/dashboard/src/routes/lms/settings/integrations/+page.svelte
index 32a767a2..ea45b617 100644
--- a/apps/dashboard/src/routes/lms/settings/integrations/+page.svelte
+++ b/apps/dashboard/src/routes/lms/settings/integrations/+page.svelte
@@ -18,4 +18,3 @@
     <IntegrationsPage />
   {/snippet}
 </Page.Body>
-
diff --git a/apps/website/.prettierrc b/apps/website/.prettierrc
deleted file mode 100644
index 73195ab7..00000000
--- a/apps/website/.prettierrc
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "useTabs": false,
-  "singleQuote": true,
-  "trailingComma": "none",
-  "printWidth": 100,
-  "overrides": [
-    {
-      "files": ["*.svelte"],
-      "options": {
-        "svelteBracketNewLine": true
-      }
-    }
-  ]
-}
diff --git a/apps/website/FOLDER_STRUCTURE.md b/apps/website/FOLDER_STRUCTURE.md
index 68ecdff5..8392c2fe 100644
--- a/apps/website/FOLDER_STRUCTURE.md
+++ b/apps/website/FOLDER_STRUCTURE.md
@@ -121,11 +121,8 @@ src/lib/
 **Import Pattern**:
 
 ```svelte
-// ✅ CORRECT - Use named imports from the index
-import { Footer, Navigation, Hero } from '$lib/components';
-
-// ❌ INCORRECT - Direct file imports are not allowed
-// import Footer from '$lib/components/footer.svelte';
+// ✅ CORRECT - Use named imports from the index import {(Footer, Navigation, Hero)} from '$lib/components'; // ❌ INCORRECT
+- Direct file imports are not allowed // import Footer from '$lib/components/footer.svelte';
 ```
 
 **Note**: All components must be imported using named imports from `$lib/components`. Direct file imports are not allowed.
@@ -150,8 +147,7 @@ import { Footer, Navigation, Hero } from '$lib/components';
 **Import Pattern**:
 
 ```svelte
-import FeedbackForm from '$lib/features/contact/feedback-form.svelte';
-import { htmlBody, openModal } from '$lib/features/tools/progress/store';
+import FeedbackForm from '$lib/features/contact/feedback-form.svelte'; import {(htmlBody, openModal)} from '$lib/features/tools/progress/store';
 ```
 
 ### `/utils` - Utilities
@@ -338,7 +334,7 @@ export { default as Navigation } from './navigation.svelte';
 This allows for clean, consistent imports:
 
 ```svelte
-import { Footer, Navigation, Hero } from '$lib/components';
+import {(Footer, Navigation, Hero)} from '$lib/components';
 ```
 
 **Rule**: Direct file imports (e.g., `import Footer from '$lib/components/footer.svelte'`) are **not allowed**. Always use named imports from `$lib/components`.
diff --git a/apps/website/package.json b/apps/website/package.json
index 6d93781a..e6f7586e 100644
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -8,6 +8,7 @@
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
+    "format": "prettier --write .",
     "prepare": "svelte-kit sync"
   },
   "devDependencies": {
diff --git a/apps/website/src/lib/components/blog-list-item.svelte b/apps/website/src/lib/components/blog-list-item.svelte
index bfe8e799..7f5a477b 100644
--- a/apps/website/src/lib/components/blog-list-item.svelte
+++ b/apps/website/src/lib/components/blog-list-item.svelte
@@ -13,7 +13,7 @@
 </script>
 
 {#if !isRecommended}
-  <div class="mb-5 flex md:flex-row flex-col md:items-center gap-2">
+  <div class="mb-5 flex flex-col gap-2 md:flex-row md:items-center">
     <!-- Date -->
     <p class="text-sm text-slate-500">{formatDate(post.date)}</p>
 
@@ -29,24 +29,16 @@
 {/if}
 
 <a href="/blog/{post.slug}" class="group">
-  <img
-    loading="lazy"
-    src={post.imageUrl}
-    alt={post.title}
-    class="w-70 h-48 object-cover rounded-md"
-  />
-  <p
-    class="font-bold text-lg py-2 {isRecommended &&
-      'h-[60px]'} line-clamp-2 group-hover:text-slate-500"
-  >
+  <img loading="lazy" src={post.imageUrl} alt={post.title} class="w-70 h-48 rounded-md object-cover" />
+  <p class="py-2 text-lg font-bold {isRecommended && 'h-[60px]'} line-clamp-2 group-hover:text-slate-500">
     {@html post.title}
   </p>
 
-  <p class="text-slate-500 pt-2 mb-4 line-clamp-3">{post.description}</p>
+  <p class="mb-4 line-clamp-3 pt-2 text-slate-500">{post.description}</p>
 </a>
 
-<div class="flex items-center justify-start gap-4 my-2">
-  <img loading="lazy" src={post.avatar} alt="avatar" class="w-10 h-10 rounded-full" />
+<div class="my-2 flex items-center justify-start gap-4">
+  <img loading="lazy" src={post.avatar} alt="avatar" class="h-10 w-10 rounded-full" />
   <span>
     <p class="font-semibold">{post.author}</p>
     <p class="text-slate-500">{post.role}</p>
diff --git a/apps/website/src/lib/components/core-feature-section.svelte b/apps/website/src/lib/components/core-feature-section.svelte
index 2c9413f0..f7a04f91 100644
--- a/apps/website/src/lib/components/core-feature-section.svelte
+++ b/apps/website/src/lib/components/core-feature-section.svelte
@@ -26,14 +26,14 @@
   } = $props();
 </script>
 
-<section {id} class="w-full py-32 border-b border-x-0 border-t-0 border-gray-200">
+<section {id} class="w-full border-x-0 border-b border-t-0 border-gray-200 py-32">
   <div
-    class="w-4/5 mx-auto flex flex-col {rightToLeft
+    class="mx-auto flex w-4/5 flex-col {rightToLeft
       ? 'lg:flex-row-reverse'
       : 'lg:flex-row'} items-center justify-between gap-8 lg:gap-28"
   >
-    <div class="w-[80vw] flex flex-col">
-      <div class="my-2 lg:my-4 ml-1 flex gap-2 items-center">
+    <div class="flex w-[80vw] flex-col">
+      <div class="my-2 ml-1 flex items-center gap-2 lg:my-4">
         {#if taglineIcon === 'simplified'}
           <img width="27" height="27" loading="lazy" src={thumbsUp} alt="" class="w-7" />
         {:else if taglineIcon === 'flexible'}
@@ -46,16 +46,16 @@
         {:else if taglineIcon === 'productivity'}
           <img width="27" height="27" loading="lazy" src={robotArm} alt="" class="w-7" />
         {/if}
-        <p class="font-medium text-base">{tagline}</p>
+        <p class="text-base font-medium">{tagline}</p>
       </div>
-      <h2 class="text-3xl mb-3 lg:mb-6">{title}</h2>
-      <p class="leading-8 text-lg text-gray-500">
+      <h2 class="mb-3 text-3xl lg:mb-6">{title}</h2>
+      <p class="text-lg leading-8 text-gray-500">
         {description}
       </p>
       {#if more}
         <br />
 
-        <p class="leading-8 text-lg text-gray-500">
+        <p class="text-lg leading-8 text-gray-500">
           {@render more?.()}
         </p>
       {/if}
@@ -64,7 +64,7 @@
       <video
         width="100%"
         height="100%"
-        class="w-full h-auto lg:max-h-[80%] rounded-md shadow-xl"
+        class="h-auto w-full rounded-md shadow-xl lg:max-h-[80%]"
         autoplay
         loop
         muted
diff --git a/apps/website/src/lib/components/core-features.svelte b/apps/website/src/lib/components/core-features.svelte
index 6f10cd0b..999081bc 100644
--- a/apps/website/src/lib/components/core-features.svelte
+++ b/apps/website/src/lib/components/core-features.svelte
@@ -3,8 +3,8 @@
   import { PUBLIC_ENABLE_STATS } from '$env/static/public';
 </script>
 
-<section class="w-full py-32 border-b border-x-0 border-t-0 border-gray-200">
-  <div class="justify-center flex text-center flex-wrap gap-x-12 gap-y-16">
+<section class="w-full border-x-0 border-b border-t-0 border-gray-200 py-32">
+  <div class="flex flex-wrap justify-center gap-x-12 gap-y-16 text-center">
     <div class="w-full min-w-0" style="max-width: 1000px; flex: 1 1 550px;">
       <div class="mx-auto flex max-w-lg flex-col items-center gap-2">
         <div class="flex-none">
@@ -19,19 +19,16 @@
             />
           </div>
         </div>
-        <div class="text-base leading-snug text-center">
-          <span class="font-bold opacity-50 text-4xl">“</span>
+        <div class="text-center text-base leading-snug">
+          <span class="text-4xl font-bold opacity-50">“</span>
           <span class="text-gray-800" style="font-size: 17px;"
-            >ClassroomIO really helped me bootstrap my program. The dashboard is extremely
-            intuitive. I could navigate most of it without any help / support. Coming from framer, I
-            can honestly say that I am extremely greatful that I found ClassroomIO.</span
-          > <span class="font-bold opacity-50 inline-block text-4xl">”</span>
+            >ClassroomIO really helped me bootstrap my program. The dashboard is extremely intuitive. I could navigate
+            most of it without any help / support. Coming from framer, I can honestly say that I am extremely greatful
+            that I found ClassroomIO.</span
+          > <span class="inline-block text-4xl font-bold opacity-50">”</span>
         </div>
-        <div class="mx-auto flex items-center gap-2 justify-center">
-          <div
-            class="flex max-w-[200px] flex-none flex-col overflow-hidden text-left"
-            style="color: var(--clr-text);"
-          >
+        <div class="mx-auto flex items-center justify-center gap-2">
+          <div class="flex max-w-[200px] flex-none flex-col overflow-hidden text-left" style="color: var(--clr-text);">
             <div class="text-center text-sm font-medium opacity-90">
               Pranav Singhal <div class="block text-xs font-medium opacity-70 hover:opacity-50">
                 Founder at <a href="https://www.dblocked.io/" target="_blank">DBlockEd</a>
@@ -80,26 +77,18 @@
 <!-- body section 5 -->
 {#if PUBLIC_ENABLE_STATS}
   <div
-    class="flex justify-between flex-row flex-wrap lg:flex-nowrap items-center text-center px-[10%] py-[7%] border-b-[1px] gap-y-20 gap-x-20 mx-0 lg:mx-[12%]"
+    class="mx-0 flex flex-row flex-wrap items-center justify-between gap-x-20 gap-y-20 border-b-[1px] px-[10%] py-[7%] text-center lg:mx-[12%] lg:flex-nowrap"
   >
     <div class="w-full">
-      <h2
-        class="w-full order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl"
-      >
-        1 thousand
-      </h2>
+      <h2 class="order-first w-full text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">1 thousand</h2>
       <p class="text-base leading-7 text-gray-600">Feedback collected</p>
     </div>
     <div class="w-full">
-      <h2 class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">
-        5 thousand
-      </h2>
+      <h2 class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">5 thousand</h2>
       <p class="text-base leading-7 text-gray-600">Documents processed</p>
     </div>
     <div class="w-full">
-      <h2 class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">
-        1 million
-      </h2>
+      <h2 class="order-first text-3xl font-semibold tracking-tight text-gray-900 sm:text-5xl">1 million</h2>
       <p class="text-base leading-7 text-gray-600">Page views recorded</p>
     </div>
   </div>
diff --git a/apps/website/src/lib/components/custom-img.svelte b/apps/website/src/lib/components/custom-img.svelte
index f25f6372..3a43f57e 100644
--- a/apps/website/src/lib/components/custom-img.svelte
+++ b/apps/website/src/lib/components/custom-img.svelte
@@ -8,10 +8,5 @@
 </script>
 
 <figure>
-  <img
-    {src}
-    {alt}
-    loading="lazy"
-    class="max-w-full w-full h-full md:min-h-[400px] object-cover my-2 rounded-lg"
-  />
+  <img {src} {alt} loading="lazy" class="my-2 h-full w-full max-w-full rounded-lg object-cover md:min-h-[400px]" />
 </figure>
diff --git a/apps/website/src/lib/components/faq.svelte b/apps/website/src/lib/components/faq.svelte
index d449eb93..c0c92fe5 100644
--- a/apps/website/src/lib/components/faq.svelte
+++ b/apps/website/src/lib/components/faq.svelte
@@ -6,19 +6,17 @@
 
 <div class="mb-20 mt-10 flex flex-col items-center justify-center">
   <header class="text-center">
-    <h1 class="mt-2 text-xl md:text-4xl">
-      Questions & Answers
-    </h1>
+    <h1 class="mt-2 text-xl md:text-4xl">Questions & Answers</h1>
     <p
-      class="mt-4 text-sm md:text-lg font-normal tracking-normal ui:text-muted-foreground lg:px-[20%] lg:text-xl lg:tracking-wide"
+      class="ui:text-muted-foreground mt-4 text-sm font-normal tracking-normal md:text-lg lg:px-[20%] lg:text-xl lg:tracking-wide"
     >
       Can't find the answer you're looking for?
-      <a class="font-semibold text-blue-700" href="mailto:help@classroomio.com" target="_blank"
-        >Shoot us an email</a> and we'll get back to you ASAP.
+      <a class="font-semibold text-blue-700" href="mailto:help@classroomio.com" target="_blank">Shoot us an email</a> and
+      we'll get back to you ASAP.
     </p>
   </header>
 
-  <div class="mt-[20%] lg:m-0 max-w-3xl w-full mx-auto px-2">
+  <div class="mx-auto mt-[20%] w-full max-w-3xl px-2 lg:m-0">
     <Accordion.Root type="single" class="w-full">
       {#each faqs as faq, index}
         <Accordion.Item value="faq-{index}">
diff --git a/apps/website/src/lib/components/footer.svelte b/apps/website/src/lib/components/footer.svelte
index 06671ea3..161064f3 100644
--- a/apps/website/src/lib/components/footer.svelte
+++ b/apps/website/src/lib/components/footer.svelte
@@ -26,17 +26,16 @@
         /></a
       > -->
       <div class="mt-5 flex items-center gap-3 lg:mt-10 lg:gap-7">
-        <Button href="https://www.facebook.com/classroomiohq" target="_blank" variant="ghost" aria-label="Facebook Link">
+        <Button
+          href="https://www.facebook.com/classroomiohq"
+          target="_blank"
+          variant="ghost"
+          aria-label="Facebook Link"
+        >
           <Facebook />
         </Button>
         <Button href="https://twitter.com/classroomio" target="_blank" variant="ghost" aria-label="Twitter Link">
-          <img
-            width="20"
-            height="20"
-            loading="lazy"
-            src="/twitter.svg"
-            alt=""
-          />
+          <img width="20" height="20" loading="lazy" src="/twitter.svg" alt="" />
         </Button>
         <Button href="https://www.youtube.com/@ClassroomIO" target="_blank" variant="ghost" aria-label="Youtube Link">
           <Youtube />
@@ -130,9 +129,7 @@
       </div>
     </nav>
   </div>
-  <footer
-    class="border-t py-3 text-center text-xs font-light leading-5 text-gray-500 lg:text-left lg:text-base"
-  >
+  <footer class="border-t py-3 text-center text-xs font-light leading-5 text-gray-500 lg:text-left lg:text-base">
     <p>All rights reserved.</p>
     <p class="flex items-center justify-center">
       ClassroomIO © {new Date().getFullYear()} by
diff --git a/apps/website/src/lib/components/hero.svelte b/apps/website/src/lib/components/hero.svelte
index f62b9bcf..0a3d9724 100644
--- a/apps/website/src/lib/components/hero.svelte
+++ b/apps/website/src/lib/components/hero.svelte
@@ -114,9 +114,9 @@
         <span>from one Platform</span>
       </div>
 
-      <p class="mx-auto mt-10 px-4 ui:text-muted-foreground md:text-lg lg:mt-6 lg:w-[42%] lg:p-0">
-        ClassroomIO is an open source learning management system for companies. We give you a suite
-        of tools to help you achieve your training, onboarding and certification goals.
+      <p class="ui:text-muted-foreground mx-auto mt-10 px-4 md:text-lg lg:mt-6 lg:w-[42%] lg:p-0">
+        ClassroomIO is an open source learning management system for companies. We give you a suite of tools to help you
+        achieve your training, onboarding and certification goals.
       </p>
     </div>
 
@@ -169,12 +169,8 @@
     </div>
 
     <div class="my-10 flex flex-col items-center justify-center gap-4 md:flex-row">
-      <Button variant="outline" href="/demo" target="_blank" rel="noopener noreferrer nofollow">
-        Book a demo
-      </Button>
-      <Button href="/signup" target="_blank" rel="noopener noreferrer nofollow">
-        Sign Up for Free
-      </Button>
+      <Button variant="outline" href="/demo" target="_blank" rel="noopener noreferrer nofollow">Book a demo</Button>
+      <Button href="/signup" target="_blank" rel="noopener noreferrer nofollow">Sign Up for Free</Button>
       <!-- <a
       class="font-medium lg:font-semibold text-sm md:text-base w-11/12 md:w-fit border px-6 py-3 lg:px-10 lg:py-5 rounded-md"
       href="/github"
@@ -195,10 +191,7 @@
       />
       
     </div> -->
-    <div
-      style="position: relative; padding-bottom: calc(50% + 42px);"
-      class="mx-auto w-[85%] lg:w-[70%]"
-    >
+    <div style="position: relative; padding-bottom: calc(50% + 42px);" class="mx-auto w-[85%] lg:w-[70%]">
       <iframe
         title="ClassroomIO Live Demo"
         src="https://app.supademo.com/embed/cluw8chyy06nhq2s9m697a680"
diff --git a/apps/website/src/lib/components/modal.svelte b/apps/website/src/lib/components/modal.svelte
index d3f2904f..87256eb7 100644
--- a/apps/website/src/lib/components/modal.svelte
+++ b/apps/website/src/lib/components/modal.svelte
@@ -13,10 +13,8 @@
 {#if open}
   <div class="relative flex items-center justify-center">
     <!-- black background -->
-    <div class="fixed z-[3000] top-0 left-0 w-full h-full bg-black opacity-[0.7]"></div>
-    <div
-      class="fixed z-[3001] {className} w-full md:w-[30%] md:min-w-[500px] bg-white rounded-md mx-auto py-6 px-7"
-    >
+    <div class="fixed left-0 top-0 z-[3000] h-full w-full bg-black opacity-[0.7]"></div>
+    <div class="fixed z-[3001] {className} mx-auto w-full rounded-md bg-white px-7 py-6 md:w-[30%] md:min-w-[500px]">
       {@render children?.()}
     </div>
   </div>
diff --git a/apps/website/src/lib/components/more-features.svelte b/apps/website/src/lib/components/more-features.svelte
index f2eb93ad..7a0b8d77 100644
--- a/apps/website/src/lib/components/more-features.svelte
+++ b/apps/website/src/lib/components/more-features.svelte
@@ -11,15 +11,13 @@
     {
       icon: globe,
       title: 'Customizable Landing Page',
-      description:
-        'A minimalistic landing page template out of the box to share your courses with the world',
+      description: 'A minimalistic landing page template out of the box to share your courses with the world',
       image: '/landing-page-builder.webp'
     },
     {
       icon: team,
       title: 'Team management',
-      description:
-        'Extend invitations and manage your teaching institution seamlessly through ClassroomIO.',
+      description: 'Extend invitations and manage your teaching institution seamlessly through ClassroomIO.',
       image: '/team-management.png'
     },
     // {
@@ -49,39 +47,28 @@
 </script>
 
 <!-- More Features -->
-<section id="morefeatures" class="py-[10%] px-3 lg:px-0 bg-gray-50">
+<section id="morefeatures" class="bg-gray-50 px-3 py-[10%] lg:px-0">
   <div class="mx-0 lg:mx-[12%]">
-    <div class="w-full lg:w-4/5 mx-4 lg:mx-0 mb-14">
-      <h2 class="mt-2 text-3xl tracking-tight">
-        There is More...
-      </h2>
-      <p class="mt-4 text-lg text-gray-500 w-[94%] lg:w-4/5">
+    <div class="mx-4 mb-14 w-full lg:mx-0 lg:w-4/5">
+      <h2 class="mt-2 text-3xl tracking-tight">There is More...</h2>
+      <p class="mt-4 w-[94%] text-lg text-gray-500 lg:w-4/5">
         ClassroomIO is packed with useful features while we try to make it easy to use.
       </p>
     </div>
 
-    <div class="flex flex-col-reverse lg:flex-row gap-3 md:gap-10" id="image-container">
-      <div
-        class="w-[95%] p-3 mt-5 overflow-auto lg:overflow-hidden lg:mt-0 lg:w-[45%] flex lg:block"
-      >
+    <div class="flex flex-col-reverse gap-3 md:gap-10 lg:flex-row" id="image-container">
+      <div class="mt-5 flex w-[95%] overflow-auto p-3 lg:mt-0 lg:block lg:w-[45%] lg:overflow-hidden">
         {#each moreFeatures as moreFeature, i}
           <button
-            class="p-4 rounded-md {i === selected &&
-              'selected'} mb-3 text-start min-w-[75vw] lg:min-w-[unset] cursor-pointer"
+            class="rounded-md p-4 {i === selected &&
+              'selected'} mb-3 min-w-[75vw] cursor-pointer text-start lg:min-w-[unset]"
             onclick={() => {
               selected = i;
               clearInterval(interval);
             }}
           >
-            <div class="flex gap-1 items-center">
-              <img
-                loading="lazy"
-                width="32"
-                height="32"
-                src={moreFeature.icon}
-                alt=""
-                class="w-8"
-              />
+            <div class="flex items-center gap-1">
+              <img loading="lazy" width="32" height="32" src={moreFeature.icon} alt="" class="w-8" />
               <p class="text-lg">
                 {moreFeature.title}
               </p>
@@ -100,7 +87,7 @@
             loading="lazy"
             id="image"
             in:fly={{ x: 100, duration: 800 }}
-            class="w-full flex flex-col items-center"
+            class="flex w-full flex-col items-center"
             src={moreFeatures[selected].image}
             alt={moreFeatures[selected].title}
           />
@@ -112,11 +99,6 @@
 
 <style>
   #morefeatures .selected {
-    background-image: linear-gradient(
-      45deg,
-      rgb(253, 239, 132),
-      rgb(247, 198, 169),
-      rgb(21, 186, 196)
-    );
+    background-image: linear-gradient(45deg, rgb(253, 239, 132), rgb(247, 198, 169), rgb(21, 186, 196));
   }
 </style>
diff --git a/apps/website/src/lib/components/navigation.svelte b/apps/website/src/lib/components/navigation.svelte
index 7697508d..4e324736 100644
--- a/apps/website/src/lib/components/navigation.svelte
+++ b/apps/website/src/lib/components/navigation.svelte
@@ -16,7 +16,6 @@
   import LibraryBigIcon from '@lucide/svelte/icons/library-big';
   import { cn } from '@cio/ui/tools';
 
-
   let { stars }: { stars: number } = $props();
 
   type ListItemProps = HTMLAttributes<HTMLAnchorElement> & {
@@ -126,7 +125,7 @@
             <p class="text-sm">
               {title}
             </p>
-            <p class="mt-1 text-xs ui:text-muted-foreground">
+            <p class="ui:text-muted-foreground mt-1 text-xs">
               {subtitle}
             </p>
           </div>
@@ -136,8 +135,8 @@
   </li>
 {/snippet}
 
-<section class="z-50 fixed top-0 w-full bg-white border-b">
-  <div class="mx-auto flex w-full items-center justify-between gap-20 py-1 lg:w-[90%] lg:px-0 px-4">
+<section class="fixed top-0 z-50 w-full border-b bg-white">
+  <div class="mx-auto flex w-full items-center justify-between gap-20 px-4 py-1 lg:w-[90%] lg:px-0">
     <a href="/" class="w-[10%]">
       <div class="flex w-full items-center">
         <img loading="lazy" width="28" height="28" src="/logo-512.png" alt="classroomio logo" class="w-6 md:w-7" />
@@ -151,7 +150,7 @@
           <NavigationMenu.Item>
             <NavigationMenu.Trigger
               class={cn(
-                "flex cursor-pointer items-center rounded-md px-4 py-2 text-sm font-medium text-gray-800 transition-all duration-200 hover:bg-gray-100 data-[state=open]:bg-gray-100",
+                'flex cursor-pointer items-center rounded-md px-4 py-2 text-sm font-medium text-gray-800 transition-all duration-200 hover:bg-gray-100 data-[state=open]:bg-gray-100',
                 isSolutionsActive && 'bg-gray-100!'
               )}
             >
@@ -173,7 +172,10 @@
 
           <NavigationMenu.Item>
             <NavigationMenu.Trigger
-              class={cn("flex cursor-pointer items-center rounded-md px-4 py-2 text-sm font-medium text-gray-800 transition-all duration-200 hover:bg-gray-100 data-[state=open]:bg-gray-100", activeLink.startsWith('/tools') && 'bg-gray-100!')}
+              class={cn(
+                'flex cursor-pointer items-center rounded-md px-4 py-2 text-sm font-medium text-gray-800 transition-all duration-200 hover:bg-gray-100 data-[state=open]:bg-gray-100',
+                activeLink.startsWith('/tools') && 'bg-gray-100!'
+              )}
             >
               <a href="/tools" class="no-underline"> Free Tools </a>
             </NavigationMenu.Trigger>
@@ -278,7 +280,7 @@
             <li class="w-full cursor-pointer text-sm font-semibold text-gray-800 md:text-lg">
               <button
                 class={cn(
-                  "flex w-full items-center justify-between rounded-lg px-4 py-3 transition-all duration-200 hover:bg-gray-100",
+                  'flex w-full items-center justify-between rounded-lg px-4 py-3 transition-all duration-200 hover:bg-gray-100',
                   isSolutionsActive && 'bg-gray-100'
                 )}
                 onclick={handleShowDrawer}
@@ -313,7 +315,7 @@
             </a>
             <a
               class={cn(
-                "w-full cursor-pointer rounded-md px-4 py-3 text-sm font-semibold text-gray-800 transition-all duration-200 hover:bg-gray-100 md:text-lg",
+                'w-full cursor-pointer rounded-md px-4 py-3 text-sm font-semibold text-gray-800 transition-all duration-200 hover:bg-gray-100 md:text-lg',
                 activeLink.startsWith('/morefeatures') && 'bg-gray-100'
               )}
               onclick={() => {
@@ -325,7 +327,7 @@
             </a>
             <a
               class={cn(
-                "w-full cursor-pointer rounded-xl px-4 py-3 text-sm font-semibold text-gray-800 transition-all duration-200 hover:bg-gray-100 md:text-lg",
+                'w-full cursor-pointer rounded-xl px-4 py-3 text-sm font-semibold text-gray-800 transition-all duration-200 hover:bg-gray-100 md:text-lg',
                 activeLink.startsWith('/pricing') && 'bg-gray-100'
               )}
               onclick={() => {
@@ -337,7 +339,7 @@
             </a>
             <a
               class={cn(
-                "w-full cursor-pointer rounded-md px-4 py-3 text-sm font-semibold text-gray-800 transition-all duration-200 hover:bg-gray-100 md:text-lg",
+                'w-full cursor-pointer rounded-md px-4 py-3 text-sm font-semibold text-gray-800 transition-all duration-200 hover:bg-gray-100 md:text-lg',
                 activeHash.includes('morefeatures') && 'bg-gray-100'
               )}
               onclick={() => {
diff --git a/apps/website/src/lib/components/not-found.svelte b/apps/website/src/lib/components/not-found.svelte
index b3ffdde2..9bb21fad 100644
--- a/apps/website/src/lib/components/not-found.svelte
+++ b/apps/website/src/lib/components/not-found.svelte
@@ -22,18 +22,13 @@
   }
 </script>
 
-<div class="{className} min-h-[80vh] w-screen flex items-center justify-center">
-
+<div class="{className} flex min-h-[80vh] w-screen items-center justify-center">
   <Empty
-   title={isOrg ? 'Organization doesn\'t exist!' : 'Page not found'}
-   description="The page you are looking for doesn't exist or has been moved. Please go back to the homepage."
-   icon={SearchXIcon}
-   variant="page"
-   >
-    <Button
-      onclick={handleClick}
-    >
-      Go Home
-    </Button>
+    title={isOrg ? "Organization doesn't exist!" : 'Page not found'}
+    description="The page you are looking for doesn't exist or has been moved. Please go back to the homepage."
+    icon={SearchXIcon}
+    variant="page"
+  >
+    <Button onclick={handleClick}>Go Home</Button>
   </Empty>
 </div>
diff --git a/apps/website/src/lib/components/page-signup-cta.svelte b/apps/website/src/lib/components/page-signup-cta.svelte
index 0c177f58..f59f9548 100644
--- a/apps/website/src/lib/components/page-signup-cta.svelte
+++ b/apps/website/src/lib/components/page-signup-cta.svelte
@@ -13,26 +13,19 @@
 </script>
 
 <div
-  class="floating grad relative mx-auto my-5 flex h-[61vh] w-full flex-col items-center justify-center px-6 py-12 text-center shadow-2xl lg:h-[50vh] lg:w-[70%] lg:rounded-3xl max-w-4xl space-y-8"
+  class="floating grad relative mx-auto my-5 flex h-[61vh] w-full max-w-4xl flex-col items-center justify-center space-y-8 px-6 py-12 text-center shadow-2xl lg:h-[50vh] lg:w-[70%] lg:rounded-3xl"
 >
   <div>
-    <h3
-      class="font-display mt-3 text-xl tracking-tight text-white lg:mt-2 lg:text-4xl max-w-2xl"
-    >
+    <h3 class="font-display mt-3 max-w-2xl text-xl tracking-tight text-white lg:mt-2 lg:text-4xl">
       {header}
     </h3>
-    <p class="mt-6 text-md text-gray-300">
+    <p class="text-md mt-6 text-gray-300">
       {subText}
     </p>
   </div>
 
   {#if demo}
-    <Button
-      variant="ghost"
-      data-cal-config="'layout':'month_view'"
-      data-cal-link="classroomio/demo"
-      class="bg-white!"
-    >
+    <Button variant="ghost" data-cal-config="'layout':'month_view'" data-cal-link="classroomio/demo" class="bg-white!">
       {btnLabel}
     </Button>
   {:else}
diff --git a/apps/website/src/lib/components/student-dashboard.svelte b/apps/website/src/lib/components/student-dashboard.svelte
index 13717002..84b3bd1f 100644
--- a/apps/website/src/lib/components/student-dashboard.svelte
+++ b/apps/website/src/lib/components/student-dashboard.svelte
@@ -2,24 +2,20 @@
   import { Badge } from '@cio/ui/base/badge';
 </script>
 
-<section id="student-dashboard" class="text-center text-white py-[10%] px-3 lg:px-0 bg-black">
-  <Badge class="py-2! px-4! underline text-sm!">yourorg.classroomio.com</Badge>
-  <h1
-    class="mx-auto text-3xl md:text-4xl lg:text-6xl font-normal leading-[1.5] flex flex-col items-center gap-4"
-  >
+<section id="student-dashboard" class="bg-black px-3 py-[10%] text-center text-white lg:px-0">
+  <Badge class="py-2! px-4! text-sm! underline">yourorg.classroomio.com</Badge>
+  <h1 class="mx-auto flex flex-col items-center gap-4 text-3xl font-normal leading-[1.5] md:text-4xl lg:text-6xl">
     Your Student Dashboard
   </h1>
 
-  <p
-    class="mx-auto mt-10 lg:mt-6 px-4 lg:p-0 text-base tracking-wide leading-6 text-gray-400 lg:w-2/4"
-  >
-    Once you create an account, you get a dedicated dashboard where your students can access all
-    their courses, assignments, and more.
+  <p class="mx-auto mt-10 px-4 text-base leading-6 tracking-wide text-gray-400 lg:mt-6 lg:w-2/4 lg:p-0">
+    Once you create an account, you get a dedicated dashboard where your students can access all their courses,
+    assignments, and more.
   </p>
 
   <div class="relative my-5 md:my-10">
     <video
-      class="floating w-[85%] lg:w-[70%] mx-auto rounded-lg shadow-lg"
+      class="floating mx-auto w-[85%] rounded-lg shadow-lg lg:w-[70%]"
       autoplay
       loop
       muted
diff --git a/apps/website/src/lib/components/success.svelte b/apps/website/src/lib/components/success.svelte
index 87708d3f..90029d63 100644
--- a/apps/website/src/lib/components/success.svelte
+++ b/apps/website/src/lib/components/success.svelte
@@ -5,13 +5,12 @@
 </script>
 
 <div
-  class="relative overflow-hidden mt-10 flex space-y-3 flex-col text-center items-center border border-[#D9E0F5] justify-center w-full rounded-md min-h-[300px] p-4 bg-[#F5F8FE]"
+  class="relative mt-10 flex min-h-[300px] w-full flex-col items-center justify-center space-y-3 overflow-hidden rounded-md border border-[#D9E0F5] bg-[#F5F8FE] p-4 text-center"
 >
-  <div class="absolute w-20 h-20 bg-[#0233BD] -top-14 -left-9 rotate-[50deg]"></div>
-  <h1 class="font-bold text-3xl">Your message has been sent 🎉</h1>
-  <p class="w-[70%] font-normal text-sm">
-    We'll get back to you as soon as possible. In the meantime, Explore and enjoy features on our
-    website
+  <div class="absolute -left-9 -top-14 h-20 w-20 rotate-[50deg] bg-[#0233BD]"></div>
+  <h1 class="text-3xl font-bold">Your message has been sent 🎉</h1>
+  <p class="w-[70%] text-sm font-normal">
+    We'll get back to you as soon as possible. In the meantime, Explore and enjoy features on our website
   </p>
   <Button class="px-10 md:px-20" onclick={() => goto('/')}>Go to Home</Button>
 </div>
diff --git a/apps/website/src/lib/components/testimonial.svelte b/apps/website/src/lib/components/testimonial.svelte
index 5bc5ad0e..0c0ee282 100644
--- a/apps/website/src/lib/components/testimonial.svelte
+++ b/apps/website/src/lib/components/testimonial.svelte
@@ -3,27 +3,17 @@
   import { Button } from '@cio/ui/base/button';
 </script>
 
-<section id="testimonial" class="flex flex-col items-center py-[5%] px-3 lg:px-0 space-y-2">
-  <h1
-    class="mx-auto text-3xl md:text-4xl lg:text-5xl font-normal leading-normal flex flex-col items-center gap-4 my-0"
-  >
+<section id="testimonial" class="flex flex-col items-center space-y-2 px-3 py-[5%] lg:px-0">
+  <h1 class="mx-auto my-0 flex flex-col items-center gap-4 text-3xl font-normal leading-normal md:text-4xl lg:text-5xl">
     Hear from Happy ClassroomIO Users
   </h1>
 
-  <p
-    class="mx-auto text-center px-4 lg:p-0 text-base tracking-wide leading-6 ui:text-muted-foreground lg:w-2/4"
-  >
+  <p class="ui:text-muted-foreground mx-auto px-4 text-center text-base leading-6 tracking-wide lg:w-2/4 lg:p-0">
     See what excites them about building and managing bootcamps with ClassroomIO.
   </p>
-  <Button
-    href="/signup"
-    target="_blank"
-    rel="noopener noreferrer nofollow"
-  >
-    Sign Up for Free
-  </Button>
+  <Button href="/signup" target="_blank" rel="noopener noreferrer nofollow">Sign Up for Free</Button>
 
-  <div class="relative my-5 md:my-10 w-[85%] lg:w-[70%]">
+  <div class="relative my-5 w-[85%] md:my-10 lg:w-[70%]">
     <SenjaEmbed id="3e847d7a-13d3-483e-8a71-5b35273dcc6c" />
   </div>
 </section>
diff --git a/apps/website/src/lib/components/timeline.svelte b/apps/website/src/lib/components/timeline.svelte
index 3ca8b398..05e4568c 100644
--- a/apps/website/src/lib/components/timeline.svelte
+++ b/apps/website/src/lib/components/timeline.svelte
@@ -1,29 +1,29 @@
 <script lang="ts">
   interface Props {
     items?: {
-    title: string;
-    desc: string;
-  }[];
+      title: string;
+      desc: string;
+    }[];
   }
 
   let { items = [] }: Props = $props();
 </script>
 
-<div class="relative w-fit flex justify-center space-x-8 md:space-x-10">
+<div class="relative flex w-fit justify-center space-x-8 md:space-x-10">
   <div
-    class="w-[3px] md:w-[2px] bg-blue-600 mt-10 before:bg-linear-to-t before:from-white before:to-transparent before:w-[4px] before:h-36 before:absolute before:bottom-0"
-></div>
+    class="before:bg-linear-to-t mt-10 w-[3px] bg-blue-600 before:absolute before:bottom-0 before:h-36 before:w-[4px] before:from-white before:to-transparent md:w-[2px]"
+  ></div>
   <div class="space-y-8">
     {#each items as card, index}
-      <div class="md:w-140 w-full border-2 rounded-lg px-4 py-8 space-y-4 bg-white">
+      <div class="md:w-140 w-full space-y-4 rounded-lg border-2 bg-white px-4 py-8">
         <div class="flex items-center">
           <div
-            class={`z-50 absolute -left-3 ${
+            class={`absolute -left-3 z-50 ${
               index > 0 &&
-              'before:bg-linear-to-t before:from-white before:to-transparent before:w-[4px] before:h-36 before:absolute before:-top-36'
-            } flex items-center justify-center w-7 h-7 bg-blue-100 rounded-full`}
+              'before:bg-linear-to-t before:absolute before:-top-36 before:h-36 before:w-[4px] before:from-white before:to-transparent'
+            } flex h-7 w-7 items-center justify-center rounded-full bg-blue-100`}
           >
-            <div class="w-4 h-4 bg-blue-800 rounded-full z-50"></div>
+            <div class="z-50 h-4 w-4 rounded-full bg-blue-800"></div>
           </div>
           <h1 class="text-2xl font-bold text-blue-800">{card.title}</h1>
         </div>
diff --git a/apps/website/src/lib/components/upload-widget.svelte b/apps/website/src/lib/components/upload-widget.svelte
index 33d72b7a..4a422ce5 100644
--- a/apps/website/src/lib/components/upload-widget.svelte
+++ b/apps/website/src/lib/components/upload-widget.svelte
@@ -10,12 +10,7 @@
     labelClassName?: string;
   }
 
-  let {
-    imageURL = $bindable(''),
-    label = '',
-    isRequired = false,
-    labelClassName = ''
-  }: Props = $props();
+  let { imageURL = $bindable(''), label = '', isRequired = false, labelClassName = '' }: Props = $props();
   let isUploading = false;
   let fileInput: HTMLInputElement = $state();
 
@@ -98,9 +93,7 @@
     {:else}
       <div class="space-y-4">
         <Copy size={24} class="mx-auto" />
-        <p class="text-center text-sm text-gray-500 my-2">
-          Max file size: 2MB, accepted: JPEG, PNG, GIF, WebP only
-        </p>
+        <p class="my-2 text-center text-sm text-gray-500">Max file size: 2MB, accepted: JPEG, PNG, GIF, WebP only</p>
       </div>
     {/if}
   </div>
diff --git a/apps/website/src/lib/features/contact/feedback-form.svelte b/apps/website/src/lib/features/contact/feedback-form.svelte
index f5a6a7d5..56ca8a9e 100644
--- a/apps/website/src/lib/features/contact/feedback-form.svelte
+++ b/apps/website/src/lib/features/contact/feedback-form.svelte
@@ -49,9 +49,9 @@
   {#if sent}
     <Success />
   {:else}
-    <div class="w-full my-10 space-y-5">
+    <div class="my-10 w-full space-y-5">
       <Field.Group>
-        <div class="flex flex-col md:flex-row gap-10">
+        <div class="flex flex-col gap-10 md:flex-row">
           <Field.Field class="w-full">
             <Field.Label for="feedback-name">Your Name</Field.Label>
             <Input id="feedback-name" bind:value={name} required />
@@ -75,13 +75,7 @@
           </Field.Field>
         {/if}
       </Field.Group>
-      <Button
-        onclick={handleClick}
-        disabled={isLoading}
-        loading={isLoading}
-      >
-        Submit Feedback
-      </Button>
+      <Button onclick={handleClick} disabled={isLoading} loading={isLoading}>Submit Feedback</Button>
     </div>
   {/if}
 </div>
diff --git a/apps/website/src/lib/features/contact/help-form.svelte b/apps/website/src/lib/features/contact/help-form.svelte
index a3d6223a..79ffd480 100644
--- a/apps/website/src/lib/features/contact/help-form.svelte
+++ b/apps/website/src/lib/features/contact/help-form.svelte
@@ -49,9 +49,9 @@
   {#if sent}
     <Success />
   {:else}
-    <div class="w-full my-10 space-y-5">
+    <div class="my-10 w-full space-y-5">
       <Field.Group>
-        <div class="flex flex-col md:flex-row gap-10">
+        <div class="flex flex-col gap-10 md:flex-row">
           <Field.Field class="w-full">
             <Field.Label for="help-name">Your Name</Field.Label>
             <Input id="help-name" bind:value={name} required />
@@ -75,13 +75,7 @@
           </Field.Field>
         {/if}
       </Field.Group>
-      <Button
-        onclick={handleClick}
-        disabled={isLoading}
-        loading={isLoading}
-      >
-        Submit Request
-      </Button>
+      <Button onclick={handleClick} disabled={isLoading} loading={isLoading}>Submit Request</Button>
     </div>
   {/if}
 </div>
diff --git a/apps/website/src/lib/features/tools/progress/avatar.svelte b/apps/website/src/lib/features/tools/progress/avatar.svelte
index 460d8d8f..475ce832 100644
--- a/apps/website/src/lib/features/tools/progress/avatar.svelte
+++ b/apps/website/src/lib/features/tools/progress/avatar.svelte
@@ -45,7 +45,7 @@
     </Dialog.Header>
 
     <!-- map for each avatar -->
-    <div class="flex flex-wrap justify-evenly gap-y-3 mt-3">
+    <div class="mt-3 flex flex-wrap justify-evenly gap-y-3">
       {#each avatars as avatar, index}
         <button
           onclick={() => {
@@ -59,21 +59,17 @@
             hoveredIndex = null;
             isAddIcon = false;
           }}
-          class="relative w-[17%] flex justify-center items-center shadow-sm rounded-full hover:scale-110 transition-all duration-300"
+          class="relative flex w-[17%] items-center justify-center rounded-full shadow-sm transition-all duration-300 hover:scale-110"
         >
           <!-- + icon overlay -->
           {#if isAddIcon && hoveredIndex === index}
             <div
-              class="w-full h-full flex justify-center items-center bg-white border absolute rounded-full opacity-[0.7] blur-md"
+              class="absolute flex h-full w-full items-center justify-center rounded-full border bg-white opacity-[0.7] blur-md"
             ></div>
             <img src="/free-tools/progress-report/hover-plus-icon.svg" alt="" class="absolute" />
           {/if}
           <!-- avatar -->
-          <img
-            src="https://assets.cdn.clsrio.com/progress-report/avatar/{avatar.src}.svg"
-            alt=""
-            class="w-full"
-          />
+          <img src="https://assets.cdn.clsrio.com/progress-report/avatar/{avatar.src}.svg" alt="" class="w-full" />
         </button>
       {/each}
     </div>
diff --git a/apps/website/src/lib/features/tools/progress/background.svelte b/apps/website/src/lib/features/tools/progress/background.svelte
index c19334b2..eb4de872 100644
--- a/apps/website/src/lib/features/tools/progress/background.svelte
+++ b/apps/website/src/lib/features/tools/progress/background.svelte
@@ -58,21 +58,15 @@
     </Dialog.Header>
 
     <!--  -->
-    <div
-      class="flex flex-wrap justify-between gap-y-3 mt-3 overflow-y-auto overflow-x-hidden h-[85%]"
-    >
+    <div class="mt-3 flex h-[85%] flex-wrap justify-between gap-y-3 overflow-y-auto overflow-x-hidden">
       {#each backgrounds as background}
         <button
           onclick={() => {
             selectBackground(background);
           }}
-          class="flex w-[30%] items-center shadow-sm hover:scale-110 transition-all duration-300"
+          class="flex w-[30%] items-center shadow-sm transition-all duration-300 hover:scale-110"
         >
-          <img
-            src="https://assets.cdn.clsrio.com/progress-report/backgrounds/{background.src}.webp"
-            alt=""
-            class=""
-          />
+          <img src="https://assets.cdn.clsrio.com/progress-report/backgrounds/{background.src}.webp" alt="" class="" />
         </button>
       {/each}
     </div>
diff --git a/apps/website/src/lib/features/tools/progress/mood.svelte b/apps/website/src/lib/features/tools/progress/mood.svelte
index ce62a538..fecbc5d5 100644
--- a/apps/website/src/lib/features/tools/progress/mood.svelte
+++ b/apps/website/src/lib/features/tools/progress/mood.svelte
@@ -72,15 +72,15 @@
     </Dialog.Header>
 
     <!-- mapping -->
-    <div class="flex flex-wrap justify-between gap-y-3 mt-3">
+    <div class="mt-3 flex flex-wrap justify-between gap-y-3">
       {#each moods as mood}
         <button
           onclick={() => {
             selectMood(mood);
           }}
-          class="flex gap-3 items-center shadow-sm rounded-full px-4 py-1 bg-[#F1F6FF] hover:bg-[#0233BD] hover:text-white transition-all duration-700"
+          class="flex items-center gap-3 rounded-full bg-[#F1F6FF] px-4 py-1 shadow-sm transition-all duration-700 hover:bg-[#0233BD] hover:text-white"
         >
-          <p class="text-xs md:text-sm font-semibold">{mood.text}</p>
+          <p class="text-xs font-semibold md:text-sm">{mood.text}</p>
           <img
             src="https://assets.cdn.clsrio.com/progress-report/emojis/{mood.iconSrc}.png"
             alt={mood.text}
diff --git a/apps/website/src/lib/features/tools/progress/report.svelte b/apps/website/src/lib/features/tools/progress/report.svelte
index 52ee046e..32821617 100644
--- a/apps/website/src/lib/features/tools/progress/report.svelte
+++ b/apps/website/src/lib/features/tools/progress/report.svelte
@@ -30,13 +30,15 @@
     nodeStore.set(node);
   });
 
-  let rootBgImage = $derived(`https://assets.cdn.clsrio.com/progress-report/backgrounds/${
-    $htmlBody.background || 'blue_tetiary_background'
-  }.webp`);
+  let rootBgImage = $derived(
+    `https://assets.cdn.clsrio.com/progress-report/backgrounds/${
+      $htmlBody.background || 'blue_tetiary_background'
+    }.webp`
+  );
 </script>
 
 <div
-  class="h-full min-h-[500px] max-h-[500px] md:h-[60vh] w-full border relative flex items-center justify-center"
+  class="relative flex h-full max-h-[500px] min-h-[500px] w-full items-center justify-center border md:h-[60vh]"
   style={`font-family: "Space Grotesk", sans-serif;  background-image: url('${rootBgImage}'); background-size: cover; background-repeat: no-repeat`}
   bind:this={node}
 >
@@ -46,7 +48,7 @@
       <button
         type="button"
         onclick={() => ($openModal.fullscreen = !$openModal.fullscreen)}
-        class="absolute top-4 right-4 p-1.5 rounded-full hover:scale-90 transition-all duration-300 bg-white"
+        class="absolute right-4 top-4 rounded-full bg-white p-1.5 transition-all duration-300 hover:scale-90"
       >
         <img src="/free-tools/progress-report/close-icon.svg" alt="" class="" />
       </button>
@@ -54,7 +56,7 @@
       <button
         type="button"
         onclick={() => ($openModal.fullscreen = !$openModal.fullscreen)}
-        class="absolute top-4 right-4 w-7 hover:scale-90 transition-all duration-300"
+        class="absolute right-4 top-4 w-7 transition-all duration-300 hover:scale-90"
       >
         <img src="/free-tools/progress-report/full-screen-icon.svg" alt="" class="" />
       </button>
@@ -64,34 +66,31 @@
   <div class="mt-20">
     <!-- using both md & lg for the width here because the lib doesn't consider md to be medium screens and above, using md alone will make the output break on desktop so i had to also specify for large screens -->
     <div
-      class="rounded-lg shadow-md bg-white border-4 border-gray-100 z-20 mx-auto flex justify-center items-center w-[16rem] h-[16rem]"
+      class="z-20 mx-auto flex h-[16rem] w-[16rem] items-center justify-center rounded-lg border-4 border-gray-100 bg-white shadow-md"
     >
-      <div class="relative w-full h-full flex flex-col justify-center gap-3 items-center px-2">
+      <div class="relative flex h-full w-full flex-col items-center justify-center gap-3 px-2">
         <!-- avatar -->
         <img
-          src={`https://assets.cdn.clsrio.com/progress-report/avatar/${
-            $htmlBody.avatar || 'avatar_a'
-          }.svg`}
+          src={`https://assets.cdn.clsrio.com/progress-report/avatar/${$htmlBody.avatar || 'avatar_a'}.svg`}
           alt=""
-          class="absolute top-0 w-[25%] h-[25%] ml-2 -mt-[2.2rem]"
+          class="absolute top-0 -mt-[2.2rem] ml-2 h-[25%] w-[25%]"
         />
 
         <!-- mood -->
         {#if $htmlBody.name || $htmlBody.mood.text}
           <div
             style="background-color: {$backgroundColor}; color: white; display: flex;"
-            class="px-3 py-0.5 border border-[#EDEDED] rounded-2xl mt-6 md:mt-3 font-semibold text-[10px] md:text-[0.7rem] flex items-center justify-between"
+            class="mt-6 flex items-center justify-between rounded-2xl border border-[#EDEDED] px-3 py-0.5 text-[10px] font-semibold md:mt-3 md:text-[0.7rem]"
           >
             <span class="mr-0.5">{$htmlBody.name}</span>
 
             {#if $htmlBody.mood.text}
-              <span class="flex gap-1 items-center">
-                <p class="font-semibold text-[10px] md:text-[0.7rem]">
+              <span class="flex items-center gap-1">
+                <p class="text-[10px] font-semibold md:text-[0.7rem]">
                   is {$htmlBody.mood.text}
                 </p>
                 <img
-                  src="https://assets.cdn.clsrio.com/progress-report/emojis/{$htmlBody.mood
-                    .iconSrc}.png"
+                  src="https://assets.cdn.clsrio.com/progress-report/emojis/{$htmlBody.mood.iconSrc}.png"
                   alt={$htmlBody.mood.text}
                   class="w-3"
                 />
@@ -101,7 +100,7 @@
         {:else}
           <p
             style="background-color: {$backgroundColor}"
-            class="px-3 py-0.5 border border-[#EDEDED] text-white rounded-2xl mt-3 font-medium text-[9px]"
+            class="mt-3 rounded-2xl border border-[#EDEDED] px-3 py-0.5 text-[9px] font-medium text-white"
           >
             Add your name
           </p>
@@ -109,27 +108,27 @@
 
         <!-- learning -->
         <span
-          class="w-full md:my-2 p-1 overflow-hidden text-[0.7rem] md:text-[0.8rem] font-normal text-center outline-none h-[10vh] md:h-[12vh]"
+          class="h-[10vh] w-full overflow-hidden p-1 text-center text-[0.7rem] font-normal outline-none md:my-2 md:h-[12vh] md:text-[0.8rem]"
         >
           {$htmlBody.learning}
         </span>
 
         <!-- progress -->
-        <div class="flex flex-col justify-center items-center mb-2 md:mb-0">
-          <div class="border border-[#d9e0f5] w-full h-4 rounded-full p-0.5 bg-[#f1f6ff]">
+        <div class="mb-2 flex flex-col items-center justify-center md:mb-0">
+          <div class="h-4 w-full rounded-full border border-[#d9e0f5] bg-[#f1f6ff] p-0.5">
             <div
-              class="progress-range rounded-full w-full h-full"
+              class="progress-range h-full w-full rounded-full"
               style="background: {$backgroundColor}; width: {$htmlBody.progress}%"
-></div>
+            ></div>
           </div>
-          <p class="text-[12px] font-semibold mt-1">Progress Achieved: {$htmlBody.progress}%</p>
+          <p class="mt-1 text-[12px] font-semibold">Progress Achieved: {$htmlBody.progress}%</p>
         </div>
       </div>
     </div>
 
     <div
       style="display: flex;"
-      class="border mt-20 bottom-5 w-[50%] mx-auto flex gap-1 items-center justify-center bg-white rounded-md px-2 py-1"
+      class="bottom-5 mx-auto mt-20 flex w-[50%] items-center justify-center gap-1 rounded-md border bg-white px-2 py-1"
     >
       <img src="/logo-192.png" alt="classroomio logo" class="w-4" />
       <p class="text-[10px] font-bold">ClassroomIO.com</p>
diff --git a/apps/website/src/lib/features/tools/stopwatch/timer.svelte b/apps/website/src/lib/features/tools/stopwatch/timer.svelte
index 582dee40..e5b85522 100644
--- a/apps/website/src/lib/features/tools/stopwatch/timer.svelte
+++ b/apps/website/src/lib/features/tools/stopwatch/timer.svelte
@@ -29,29 +29,26 @@
 
 <div transition:fly={{ y: 100, delay: 0, easing: sineInOut }}>
   <div class="px-6 pt-8 text-center">
-    <button
-      type="button"
-      onclick={resetTimer}
-      class="text-[10px] text-[#656565] font-semibold uppercase underline"
+    <button type="button" onclick={resetTimer} class="text-[10px] font-semibold uppercase text-[#656565] underline"
       >set timer for another activity</button
     >
 
     <button
-      class="border mx-auto mt-7 mb-3 px-2 py-0.5 rounded-full flex items-center gap-1 text-sm text-[#656565] font-semibold border-[#C2D2FF] bg-[#DCE5FF]"
+      class="mx-auto mb-3 mt-7 flex items-center gap-1 rounded-full border border-[#C2D2FF] bg-[#DCE5FF] px-2 py-0.5 text-sm font-semibold text-[#656565]"
     >
       {activityName}:
       <span class="text-[#0233BD]">{formattedTime}</span>
     </button>
 
     <!-- countdown -->
-    <h1 class="text-[#040F2D] mb-14 text-6xl font-bold">{displayTime}</h1>
+    <h1 class="mb-14 text-6xl font-bold text-[#040F2D]">{displayTime}</h1>
   </div>
 
   <div class="flex">
     <button
       type="button"
       onclick={toggleSound}
-      class="bg-[#F7F7F7] w-[34%] flex flex-col gap-1 items-center uppercase text-[10px] py-5 md:py-10 rounded-bl-md hover:bg-[#F1F6FF] transition-all duration-500"
+      class="flex w-[34%] flex-col items-center gap-1 rounded-bl-md bg-[#F7F7F7] py-5 text-[10px] uppercase transition-all duration-500 hover:bg-[#F1F6FF] md:py-10"
     >
       {#if soundOn}
         <img src="/free-tools/stopwatch/speaker-icon.svg" alt="" class="w-7 md:w-12" />
@@ -63,7 +60,7 @@
     <button
       type="button"
       onclick={toggleTimer}
-      class="bg-[#0F62FE] text-white w-[34%] flex flex-col gap-1 items-center uppercase text-[10px] py-5 md:py-10"
+      class="flex w-[34%] flex-col items-center gap-1 bg-[#0F62FE] py-5 text-[10px] uppercase text-white md:py-10"
     >
       {#if isPaused}
         <img src="/free-tools/stopwatch/play-icon.svg" alt="" class="w-7 md:w-12" />
@@ -75,7 +72,7 @@
     <button
       type="button"
       onclick={restartTimer}
-      class="bg-[#F7F7F7] w-[34%] flex flex-col gap-1 items-center uppercase text-[10px] py-5 md:py-10 rounded-br-md hover:bg-[#F1F6FF] transition-all duration-500"
+      class="flex w-[34%] flex-col items-center gap-1 rounded-br-md bg-[#F7F7F7] py-5 text-[10px] uppercase transition-all duration-500 hover:bg-[#F1F6FF] md:py-10"
     >
       <img src="/free-tools/stopwatch/reset-icon.svg" alt="" class="w-7 md:w-12" />
       restart</button
diff --git a/apps/website/src/lib/features/tools/tic-tac-toe/board.svelte b/apps/website/src/lib/features/tools/tic-tac-toe/board.svelte
index b5d2fd19..efd54e9e 100644
--- a/apps/website/src/lib/features/tools/tic-tac-toe/board.svelte
+++ b/apps/website/src/lib/features/tools/tic-tac-toe/board.svelte
@@ -36,7 +36,7 @@
         <tr>
           {#each row as column, columnIndex}
             <td
-              class="cursor-pointer text-center h-25 w-[1.5em] border-r-10 border-b-10 border-white last:border-r-0"
+              class="h-25 border-r-10 border-b-10 w-[1.5em] cursor-pointer border-white text-center last:border-r-0"
               onclick={() => {
                 game = game.click(rowIndex, columnIndex);
               }}
diff --git a/apps/website/src/lib/features/tools/tic-tac-toe/board.ts b/apps/website/src/lib/features/tools/tic-tac-toe/board.ts
index 52b84689..d342674e 100644
--- a/apps/website/src/lib/features/tools/tic-tac-toe/board.ts
+++ b/apps/website/src/lib/features/tools/tic-tac-toe/board.ts
@@ -79,11 +79,7 @@ function getWinner(board: string[][]) {
 
   // check columns
   for (let column = 0; column < 3; column++) {
-    if (
-      board[0][column] === board[1][column] &&
-      board[0][column] === board[2][column] &&
-      board[0][column]
-    ) {
+    if (board[0][column] === board[1][column] && board[0][column] === board[2][column] && board[0][column]) {
       return { symbol: board[0][column], direction: 'vertical', column };
     }
   }
diff --git a/apps/website/src/lib/features/tools/tic-tac-toe/winning-line.svelte b/apps/website/src/lib/features/tools/tic-tac-toe/winning-line.svelte
index c553a9a5..101d5dde 100644
--- a/apps/website/src/lib/features/tools/tic-tac-toe/winning-line.svelte
+++ b/apps/website/src/lib/features/tools/tic-tac-toe/winning-line.svelte
@@ -29,13 +29,11 @@
 {#if winner}
   <div
     transition:fade={{ delay: 500, duration: 2 }}
-    class="winning-line absolute bg-[#ffc300] z-[100]"
+    class="winning-line absolute z-[100] bg-[#ffc300]"
     class:horizontal-line={winner.direction === 'horizontal'}
     class:vertical-line={winner.direction === 'vertical'}
-    class:diagonal-line-1={winner.direction === 'diagonal' &&
-      winner.diagonal === 'top-left-to-bottom-right'}
-    class:diagonal-line-2={winner.direction === 'diagonal' &&
-      winner.diagonal === 'top-right-to-bottom-left'}
+    class:diagonal-line-1={winner.direction === 'diagonal' && winner.diagonal === 'top-left-to-bottom-right'}
+    class:diagonal-line-2={winner.direction === 'diagonal' && winner.diagonal === 'top-right-to-bottom-left'}
   ></div>
 {/if}
 
diff --git a/apps/website/src/lib/utils/constants/tools.ts b/apps/website/src/lib/utils/constants/tools.ts
index 07250ab5..34f77a90 100644
--- a/apps/website/src/lib/utils/constants/tools.ts
+++ b/apps/website/src/lib/utils/constants/tools.ts
@@ -45,8 +45,7 @@ export const tools: Tool[] = [
   {
     src: '/free-tools/tic-tac.svg',
     title: 'Tic tac toe game',
-    subText:
-      "More than just a game; it's an educational tool that teaches pattern recognition, and decision-making.",
+    subText: "More than just a game; it's an educational tool that teaches pattern recognition, and decision-making.",
     slug: 'tic-tac-toe',
     show: true,
     showFeature: true
@@ -62,8 +61,7 @@ export const tools: Tool[] = [
   {
     src: '/free-tools/jamb.svg',
     title: 'JAMB Practice tool',
-    subText:
-      'Prepare for JAMB with past questions and instant feedback for effective exam readiness',
+    subText: 'Prepare for JAMB with past questions and instant feedback for effective exam readiness',
     slug: 'jamb',
     show: false,
     showFeature: false
diff --git a/apps/website/src/mdsvex.svelte b/apps/website/src/mdsvex.svelte
index ea0dca5b..0e9544ce 100644
--- a/apps/website/src/mdsvex.svelte
+++ b/apps/website/src/mdsvex.svelte
@@ -1,3 +1,8 @@
+<script lang="ts" module>
+  import { CustomImg as img } from '$lib/components';
+  export { img };
+</script>
+
 <script>
   /**
    * @typedef {Object} Props
@@ -8,9 +13,4 @@
   let { children } = $props();
 </script>
 
-<script lang="ts" module>
-  import { CustomImg as img } from '$lib/components';
-  export { img };
-</script>
-
 {@render children?.()}
diff --git a/apps/website/src/routes/(marketing)/bootcamps/+page.svelte b/apps/website/src/routes/(marketing)/bootcamps/+page.svelte
index d4b65136..addd9808 100644
--- a/apps/website/src/routes/(marketing)/bootcamps/+page.svelte
+++ b/apps/website/src/routes/(marketing)/bootcamps/+page.svelte
@@ -74,73 +74,62 @@
   <title>Bootcamps | ClassroomIO</title>
 </svelte:head>
 
-<section class="flex flex-col justify-center items-center">
+<section class="flex flex-col items-center justify-center">
   <PageHeader
     className="flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-6 lg:px-28 md:px-16 px-8"
   >
     <Badge class="py-2! px-4!" variant="outline">Solution for Bootcamps</Badge>
 
-    <div
-      class="w-full flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-8"
-    >
-      <div
-        class="w-full max-w-7xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
-      >
-        <h1 class="mx-auto m-0 text-4xl md:text-6xl text-slate-900 lg:text-center">
+    <div class="flex w-full flex-col items-start justify-start gap-y-8 lg:items-center lg:justify-center">
+      <div class="flex w-full max-w-7xl flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
+        <h1 class="m-0 mx-auto text-4xl text-slate-900 md:text-6xl lg:text-center">
           The platform for fast
-          <span class="text-blue-700 relative"> growing bootcamps</span>
+          <span class="relative text-blue-700"> growing bootcamps</span>
         </h1>
-        <p class="lg:w-[60%] text-base md:text-lg lg:text-center font-normal text-slate-700">
-          From AI powered course creation to student collaboration tools, ClassroomIO provides
-          everything you need to run a cutting-edge, high-impact bootcamp.
+        <p class="text-base font-normal text-slate-700 md:text-lg lg:w-[60%] lg:text-center">
+          From AI powered course creation to student collaboration tools, ClassroomIO provides everything you need to
+          run a cutting-edge, high-impact bootcamp.
         </p>
       </div>
-      <Button href="/signup" target="_blank" rel="noopener noreferrer nofollow">
-        Get Started for Free 🚀
-      </Button>
+      <Button href="/signup" target="_blank" rel="noopener noreferrer nofollow">Get Started for Free 🚀</Button>
     </div>
   </PageHeader>
 
   <section
-    class="w-full lg:py-24 py-16 lg:px-28 md:px-16 px-6 flex flex-col lg:items-center lg:justify-between justify-center gap-y-12"
+    class="flex w-full flex-col justify-center gap-y-12 px-6 py-16 md:px-16 lg:items-center lg:justify-between lg:px-28 lg:py-24"
   >
-    <div
-      class="w-full gap-y-4 flex flex-col lg:items-center items-start lg:justify-center justify-start"
-    >
+    <div class="flex w-full flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
       <Badge class="py-2! px-4!" variant="outline">Our benefits</Badge>
 
       <div
-        class="lg:w-full max-w-7xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
+        class="flex max-w-7xl flex-col items-start justify-start gap-y-4 lg:w-full lg:items-center lg:justify-center"
       >
         <h1 class="text-3xl">Inspire Student Success</h1>
-        <p class="text-[#334155] text-sm md:text-base font-light lg:text-center md:w-[80%]">
-          Scale your bootcamp with ClassroomIO's comprehensive toolkit. Create engaging content,
-          foster community, and drive student achievement.
+        <p class="text-sm font-light text-[#334155] md:w-[80%] md:text-base lg:text-center">
+          Scale your bootcamp with ClassroomIO's comprehensive toolkit. Create engaging content, foster community, and
+          drive student achievement.
         </p>
       </div>
     </div>
 
     <div
-      class="w-full max-w-7xl flex lg:flex-row flex-col lg:justify-between justify-start gap-6 lg:items-center items-start"
+      class="flex w-full max-w-7xl flex-col items-start justify-start gap-6 lg:flex-row lg:items-center lg:justify-between"
     >
       {#each benefitDetails as benefits}
-        <div class="w-full md:p-6 p-4 border border-[#D9E0F5] rounded-2xl flex flex-col gap-y-6">
+        <div class="flex w-full flex-col gap-y-6 rounded-2xl border border-[#D9E0F5] p-4 md:p-6">
           <img
-            class="w-[48px] h-[48px]"
+            class="h-[48px] w-[48px]"
             src="https://assets.cdn.clsrio.com/www/bootcamps/{benefits.icon}"
             alt="brain"
           />
 
-          <div class="w-full flex flex-col justify-start align-start gap-y-2">
+          <div class="align-start flex w-full flex-col justify-start gap-y-2">
             <h1 class="text-md">{benefits.title}</h1>
 
             {#each benefits.points as point}
-              <div class="flex flex-row justify-start items-start gap-x-3">
-                <img
-                  src="https://assets.cdn.clsrio.com/www/bootcamps/{benefits.checkMark}"
-                  alt="check mark"
-                />
-                <p class="leading-8 text-gray-500 font-[#656565] font-light">
+              <div class="flex flex-row items-start justify-start gap-x-3">
+                <img src="https://assets.cdn.clsrio.com/www/bootcamps/{benefits.checkMark}" alt="check mark" />
+                <p class="font-[#656565] font-light leading-8 text-gray-500">
                   {point}
                 </p>
               </div>
@@ -152,43 +141,36 @@
   </section>
 
   <section
-    class="w-full bg-[#F1F6FF] flex flex-col items-center justify-center gap-y-16 lg:py-24 py-16 lg:px-28 md:px-16 px-8"
+    class="flex w-full flex-col items-center justify-center gap-y-16 bg-[#F1F6FF] px-8 py-16 md:px-16 lg:px-28 lg:py-24"
   >
-    <div
-      class="w-full max-w-7xl gap-y-4 flex flex-col lg:items-center items-start lg:justify-center justify-start"
-    >
+    <div class="flex w-full max-w-7xl flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
       <Badge class="py-2! px-4!" variant="outline">Explore our features</Badge>
 
-      <div
-        class="w-full flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
-      >
+      <div class="flex w-full flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
         <h1 class="text-3xl">Why We're the Perfect Fit</h1>
-        <p class="text-[#334155] text-sm md:text-base font-light lg:text-center md:w-[80%]">
-          Discover why we’re the ideal partner for your bootcamp training needs. Experience
-          innovative solutions designed to elevate student engagement and maximize learning
-          outcomes.
+        <p class="text-sm font-light text-[#334155] md:w-[80%] md:text-base lg:text-center">
+          Discover why we’re the ideal partner for your bootcamp training needs. Experience innovative solutions
+          designed to elevate student engagement and maximize learning outcomes.
         </p>
       </div>
     </div>
 
-    <div class="w-full max-w-7xl flex flex-col justify-start items-center lg:gap-y-24 gap-y-16">
+    <div class="flex w-full max-w-7xl flex-col items-center justify-start gap-y-16 lg:gap-y-24">
       {#each featureDetails as feature, i}
         <div
-          class="w-full lg:w-[70%] flex lg:flex-row {i % 2 !== 0
+          class="flex w-full lg:w-[70%] lg:flex-row {i % 2 !== 0
             ? 'lg:flex-row-reverse'
-            : ''} flex-col lg:justify-between justify-between lg:items-center items-start gap-10"
+            : ''} flex-col items-start justify-between gap-10 lg:items-center lg:justify-between"
         >
-          <div
-            class="w-full max-w-sm lg:w-[40%] lg:gap-y-6 gap-y-3 flex flex-col items-start justify-start"
-          >
+          <div class="flex w-full max-w-sm flex-col items-start justify-start gap-y-3 lg:w-[40%] lg:gap-y-6">
             <img
-              class="w-[48px] h-[48px]"
+              class="h-[48px] w-[48px]"
               src="https://assets.cdn.clsrio.com/www/bootcamps/{feature.icon}"
               alt="team icon"
             />
-            <div class="md:w-full flex flex-col items-start justify-start gap-y-4">
+            <div class="flex flex-col items-start justify-start gap-y-4 md:w-full">
               <h1 class="text-2xl">{feature.title}</h1>
-              <p class="leading-8 text-lg text-gray-500">
+              <p class="text-lg leading-8 text-gray-500">
                 {feature.description}
               </p>
             </div>
@@ -198,11 +180,7 @@
                 {feature.ctaLabel}
               </Button>
             {:else}
-              <Button
-                variant="outline"
-                data-cal-config="'layout':'month_view'"
-                data-cal-link="classroomio/demo"
-              >
+              <Button variant="outline" data-cal-config="'layout':'month_view'" data-cal-link="classroomio/demo">
                 Book a Demo
               </Button>
             {/if}
diff --git a/apps/website/src/routes/(marketing)/customer-education/+page.svelte b/apps/website/src/routes/(marketing)/customer-education/+page.svelte
index bfba97f7..d01d5486 100644
--- a/apps/website/src/routes/(marketing)/customer-education/+page.svelte
+++ b/apps/website/src/routes/(marketing)/customer-education/+page.svelte
@@ -17,8 +17,7 @@
     {
       icon: 'simplified.svg',
       title: 'Simplified Management',
-      description:
-        'Centralize and easily manage, share, and distribute all customer education materials.'
+      description: 'Centralize and easily manage, share, and distribute all customer education materials.'
     }
   ];
 
@@ -34,8 +33,7 @@
       icon: 'link.svg',
       img: 'domain.svg',
       title: 'Custom domains',
-      description:
-        'Use your own domain to link to our landing page instead of using our free subdomain'
+      description: 'Use your own domain to link to our landing page instead of using our free subdomain'
     },
     {
       icon: 'globe.svg',
@@ -58,68 +56,58 @@
   <title>Customer Education | ClassroomIO</title>
 </svelte:head>
 
-<section class="flex flex-col justify-center items-center">
+<section class="flex flex-col items-center justify-center">
   <PageHeader
     className="flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-6 lg:px-28 md:px-16 px-8"
   >
     <Badge class="py-2! px-4!" variant="outline">Solution for Customer Education</Badge>
 
-    <div
-      class="w-full flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-8"
-    >
-      <div
-        class="w-full max-w-7xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
-      >
-        <h1 class="w-[95%] mx-auto m-0 text-4xl md:text-6xl text-slate-900 lg:text-center">
+    <div class="flex w-full flex-col items-start justify-start gap-y-8 lg:items-center lg:justify-center">
+      <div class="flex w-full max-w-7xl flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
+        <h1 class="m-0 mx-auto w-[95%] text-4xl text-slate-900 md:text-6xl lg:text-center">
           Drive retention and revenue with
-          <span class="text-blue-700 relative">Customer Education</span>
+          <span class="relative text-blue-700">Customer Education</span>
         </h1>
-        <p class="lg:w-[60%] text-base md:text-lg lg:text-center font-normal text-slate-700">
-          Yes you are making lots of sales however you keep experiencing churn and customers leaving
-          you. Without a proper customer education strategy you are leaving a lot of money on the
-          table.
+        <p class="text-base font-normal text-slate-700 md:text-lg lg:w-[60%] lg:text-center">
+          Yes you are making lots of sales however you keep experiencing churn and customers leaving you. Without a
+          proper customer education strategy you are leaving a lot of money on the table.
         </p>
       </div>
-      <Button href="/signup" target="_blank" rel="noopener noreferrer nofollow">
-        Get Started for Free 🚀
-      </Button>
+      <Button href="/signup" target="_blank" rel="noopener noreferrer nofollow">Get Started for Free 🚀</Button>
     </div>
   </PageHeader>
 
   <section
-    class="w-full lg:py-24 py-16 lg:px-28 md:px-16 px-8 flex flex-col lg:items-center lg:justify-between justify-center gap-y-12"
+    class="flex w-full flex-col justify-center gap-y-12 px-8 py-16 md:px-16 lg:items-center lg:justify-between lg:px-28 lg:py-24"
   >
-    <div
-      class="w-full gap-y-4 flex flex-col lg:items-center items-start lg:justify-center justify-start"
-    >
+    <div class="flex w-full flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
       <Badge class="py-1! px-4!" variant="outline">Our benefits</Badge>
       <div
-        class="lg:w-full max-w-7xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
+        class="flex max-w-7xl flex-col items-start justify-start gap-y-4 lg:w-full lg:items-center lg:justify-center"
       >
         <h1 class="text-3xl">The customer education toolkit</h1>
-        <p class="text-[#334155] text-sm md:text-base font-light lg:text-center md:w-[80%]">
-          Create beautiful, branded landing pages to showcase your courses and get customers up to
-          speed quickly
+        <p class="text-sm font-light text-[#334155] md:w-[80%] md:text-base lg:text-center">
+          Create beautiful, branded landing pages to showcase your courses and get customers up to speed quickly
         </p>
       </div>
     </div>
 
     <div
-      class="w-full max-w-7xl flex lg:flex-row flex-col lg:justify-between justify-start gap-6 lg:items-center items-start"
+      class="flex w-full max-w-7xl flex-col items-start justify-start gap-6 lg:flex-row lg:items-center lg:justify-between"
     >
       {#each benefitDetails as benefits}
-        <div class="w-full md:p-6 p-4 border border-[#D9E0F5] rounded-2xl flex flex-col gap-y-6">
+        <div class="flex w-full flex-col gap-y-6 rounded-2xl border border-[#D9E0F5] p-4 md:p-6">
           <img
-            class="w-[48px] h-[48px]"
+            class="h-[48px] w-[48px]"
             src="https://assets.cdn.clsrio.com/www/customer-education/{benefits.icon}"
             alt="icon"
           />
 
-          <div class="w-full flex flex-col justify-start align-start gap-y-2">
+          <div class="align-start flex w-full flex-col justify-start gap-y-2">
             <p class="text-lg">{benefits.title}</p>
 
-            <div class="flex flex-row justify-start items-start gap-x-3">
-              <p class="leading-8 text-gray-500 font-[#656565] font-light">
+            <div class="flex flex-row items-start justify-start gap-x-3">
+              <p class="font-[#656565] font-light leading-8 text-gray-500">
                 {benefits.description}
               </p>
             </div>
@@ -130,52 +118,39 @@
   </section>
 
   <section
-    class="w-full bg-[#F1F6FF] flex flex-col items-center justify-center gap-y-16 lg:py-24 py-16 lg:px-28 md:px-16 px-8"
+    class="flex w-full flex-col items-center justify-center gap-y-16 bg-[#F1F6FF] px-8 py-16 md:px-16 lg:px-28 lg:py-24"
   >
-    <div
-      class="w-full gap-y-4 flex flex-col lg:items-center items-start lg:justify-center justify-start"
-    >
-      <div class="w-fit py-2 px-4 rounded-full border-[#C2D2FF] border-2 text-center">
-        <p class="text-sm  text-[#4B5563] text-center">
-          Explore our features
-        </p>
+    <div class="flex w-full flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
+      <div class="w-fit rounded-full border-2 border-[#C2D2FF] px-4 py-2 text-center">
+        <p class="text-center text-sm text-[#4B5563]">Explore our features</p>
       </div>
       <div
-        class="lg:w-full max-w-7xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
+        class="flex max-w-7xl flex-col items-start justify-start gap-y-4 lg:w-full lg:items-center lg:justify-center"
       >
         <h1 class="text-3xl">Why Choose Us For Education Needs</h1>
-        <p class="text-[#334155] text-sm md:text-base font-light lg:text-center md:w-[80%]">
-          Discover how our innovative solutions can reduce stress, enhance productivity, and achieve
-          your training goals.
+        <p class="text-sm font-light text-[#334155] md:w-[80%] md:text-base lg:text-center">
+          Discover how our innovative solutions can reduce stress, enhance productivity, and achieve your training
+          goals.
         </p>
       </div>
     </div>
 
-    <div class="w-full max-w-7xl flex flex-col justify-start items-center lg:gap-y-24 gap-y-16">
+    <div class="flex w-full max-w-7xl flex-col items-center justify-start gap-y-16 lg:gap-y-24">
       {#each featureDetails as feature, i}
         <div
-          class="w-full flex lg:flex-row {i % 2 !== 0
+          class="flex w-full lg:flex-row {i % 2 !== 0
             ? 'lg:flex-row-reverse'
-            : ''} flex-col lg:justify-evenly justify-start lg:items-center items-start gap-10"
+            : ''} flex-col items-start justify-start gap-10 lg:items-center lg:justify-evenly"
         >
-          <div
-            class="w-full max-w-sm lg:w-[40%] lg:gap-y-6 gap-y-3 flex flex-col items-start justify-start"
-          >
-            <img
-              src="https://assets.cdn.clsrio.com/www/customer-education/{feature.icon}"
-              alt="team icon"
-            />
-            <div class="md:w-full flex flex-col items-start justify-start gap-y-4">
+          <div class="flex w-full max-w-sm flex-col items-start justify-start gap-y-3 lg:w-[40%] lg:gap-y-6">
+            <img src="https://assets.cdn.clsrio.com/www/customer-education/{feature.icon}" alt="team icon" />
+            <div class="flex flex-col items-start justify-start gap-y-4 md:w-full">
               <h1 class="text-2xl">{feature.title}</h1>
-              <p class="leading-8 text-lg text-gray-500">
+              <p class="text-lg leading-8 text-gray-500">
                 {feature.description}
               </p>
             </div>
-            <Button
-              variant="outline"
-              data-cal-config="'layout':'month_view'"
-              data-cal-link="classroomio/demo"
-            >
+            <Button variant="outline" data-cal-config="'layout':'month_view'" data-cal-link="classroomio/demo">
               Book a Demo
             </Button>
           </div>
diff --git a/apps/website/src/routes/(marketing)/employee-training/+page.svelte b/apps/website/src/routes/(marketing)/employee-training/+page.svelte
index 616bc539..f82c5587 100644
--- a/apps/website/src/routes/(marketing)/employee-training/+page.svelte
+++ b/apps/website/src/routes/(marketing)/employee-training/+page.svelte
@@ -31,8 +31,7 @@
       icon: 'team-mgnt.svg',
       img: 'team-mgnt2.svg',
       title: 'Team management',
-      description:
-        'You can invite managers and employees to create and take trainings at scale in your organization.'
+      description: 'You can invite managers and employees to create and take trainings at scale in your organization.'
     },
     {
       icon: 'colour-pallete.svg',
@@ -54,25 +53,20 @@
   <title>Employee Training | ClassroomIO</title>
 </svelte:head>
 
-<section class="flex flex-col justify-center items-center">
+<section class="flex flex-col items-center justify-center">
   <PageHeader
     className="flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-6 lg:px-28 md:px-16 px-8"
   >
     <Badge class="py-2! px-4!" variant="outline">Unlock your team's potential</Badge>
 
-    <div
-      class="w-full flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-8"
-    >
-      <div
-        class="w-full max-w-7xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
-      >
-        <h1 class="mx-auto m-0 text-4xl md:text-6xl text-slate-900 lg:text-center">
+    <div class="flex w-full flex-col items-start justify-start gap-y-8 lg:items-center lg:justify-center">
+      <div class="flex w-full max-w-7xl flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
+        <h1 class="m-0 mx-auto text-4xl text-slate-900 md:text-6xl lg:text-center">
           Employee training software for
-          <br /><span class="text-blue-700 relative">modern teams</span>
+          <br /><span class="relative text-blue-700">modern teams</span>
         </h1>
-        <p class="lg:w-[60%] text-base md:text-lg lg:text-center font-normal text-slate-700">
-          With ClassroomIO, you can keep your teams in sync with company standards as they change
-          quickly.
+        <p class="text-base font-normal text-slate-700 md:text-lg lg:w-[60%] lg:text-center">
+          With ClassroomIO, you can keep your teams in sync with company standards as they change quickly.
         </p>
       </div>
       <Button href="/signup" target="_blank">Get Started for Free 🚀</Button>
@@ -80,34 +74,34 @@
   </PageHeader>
 
   <section
-    class="w-full max-w-7xl lg:py-24 py-16 lg:px-28 md:px-16 px-8 flex lg:flex-row flex-col lg:items-center lg:justify-between justify-center gap-x-6 gap-y-8"
+    class="flex w-full max-w-7xl flex-col justify-center gap-x-6 gap-y-8 px-8 py-16 md:px-16 lg:flex-row lg:items-center lg:justify-between lg:px-28 lg:py-24"
   >
-    <div class="w-full lg:w-[35%] gap-y-4 flex flex-col items-start justify-start">
+    <div class="flex w-full flex-col items-start justify-start gap-y-4 lg:w-[35%]">
       <Badge variant="outline">Amazing benefits</Badge>
 
-      <div class="md:w-full flex flex-col items-start justify-start gap-y-4">
+      <div class="flex flex-col items-start justify-start gap-y-4 md:w-full">
         <h1 class="text-3xl">Unlock your team's potential</h1>
-        <p class="leading-8 text-lg text-gray-500">
+        <p class="text-lg leading-8 text-gray-500">
           Modern teams require solutions that are easy to use and allows them move quickly.
         </p>
       </div>
     </div>
     <div
-      class="lg:w-[60%] lg:min-w-[450px] w-full flex flex-col lg:flex-wrap lg:flex-row justify-start items-center gap-6"
+      class="flex w-full flex-col items-center justify-start gap-6 lg:w-[60%] lg:min-w-[450px] lg:flex-row lg:flex-wrap"
     >
       {#each benefitDetails as benefits}
         <div
-          class="w-full lg:w-[47%] min-w-[220px] md:p-6 p-4 border border-[#D9E0F5] rounded-2xl flex flex-col grow gap-y-6"
+          class="flex w-full min-w-[220px] grow flex-col gap-y-6 rounded-2xl border border-[#D9E0F5] p-4 md:p-6 lg:w-[47%]"
         >
           <img
-            class="w-[48px] h-[48px]"
+            class="h-[48px] w-[48px]"
             src="https://assets.cdn.clsrio.com/www/employee-training/{benefits.icon}"
             alt="light-bulb"
           />
 
-          <div class="w-full flex flex-col justify-start align-start gap-y-2">
+          <div class="align-start flex w-full flex-col justify-start gap-y-2">
             <h1 class="text-lg">{benefits.title}</h1>
-            <p class="text-base leading-8 text-gray-500 font-[#656565] font-light">
+            <p class="font-[#656565] text-base font-light leading-8 text-gray-500">
               {benefits.description}
             </p>
           </div>
@@ -117,50 +111,42 @@
   </section>
 
   <section
-    class="w-full bg-[#F1F6FF] flex flex-col items-center justify-start gap-y-16 lg:py-24 py-16 lg:px-28 md:px-16 px-8"
+    class="flex w-full flex-col items-center justify-start gap-y-16 bg-[#F1F6FF] px-8 py-16 md:px-16 lg:px-28 lg:py-24"
   >
-    <div
-      class="w-full gap-y-4 flex flex-col lg:items-center items-start lg:justify-center justify-start"
-    >
+    <div class="flex w-full flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
       <Badge class="py-2! px-4!" variant="outline">Explore our features</Badge>
 
       <div
-        class="lg:w-full max-w-7xl flex flex-col lg:items-center items-start lg:justify-center justify-start gap-y-4"
+        class="flex max-w-7xl flex-col items-start justify-start gap-y-4 lg:w-full lg:items-center lg:justify-center"
       >
         <h1 class="text-3xl">What makes us the right choice</h1>
-        <p class="text-[#334155] text-sm md:text-base font-light lg:text-center md:w-[80%]">
-          Discover why we’re the perfect partner for your employee training needs. Experience
-          innovative solutions designed to reduce stress and enhance productivity.
+        <p class="text-sm font-light text-[#334155] md:w-[80%] md:text-base lg:text-center">
+          Discover why we’re the perfect partner for your employee training needs. Experience innovative solutions
+          designed to reduce stress and enhance productivity.
         </p>
       </div>
     </div>
 
-    <div class="w-full max-w-7xl flex flex-col justify-start items-center lg:gap-y-24 gap-16 p-2">
+    <div class="flex w-full max-w-7xl flex-col items-center justify-start gap-16 p-2 lg:gap-y-24">
       {#each featureDetails as feature, i}
         <div
-          class="w-full lg:w-[70%] flex lg:flex-row {i % 2 !== 0
+          class="flex w-full lg:w-[70%] lg:flex-row {i % 2 !== 0
             ? 'lg:flex-row-reverse'
-            : ''} flex-col justify-between lg:items-center items-start gap-10"
+            : ''} flex-col items-start justify-between gap-10 lg:items-center"
         >
-          <div
-            class="w-fit max-w-sm lg:w-[40%] lg:gap-y-6 gap-y-3 flex flex-col items-start justify-start"
-          >
+          <div class="flex w-fit max-w-sm flex-col items-start justify-start gap-y-3 lg:w-[40%] lg:gap-y-6">
             <img
-              class="w-[48px] h-[48px]"
+              class="h-[48px] w-[48px]"
               src="https://assets.cdn.clsrio.com/www/employee-training/{feature.icon}"
               alt="team icon"
             />
-            <div class="md:w-full flex flex-col items-start justify-start gap-y-4">
+            <div class="flex flex-col items-start justify-start gap-y-4 md:w-full">
               <h1 class="text-2xl">{feature.title}</h1>
-              <p class="leading-8 text-lg text-gray-500">
+              <p class="text-lg leading-8 text-gray-500">
                 {feature.description}
               </p>
             </div>
-            <Button
-              variant="outline"
-              data-cal-config="'layout':'month_view'"
-              data-cal-link="classroomio/demo"
-            >
+            <Button variant="outline" data-cal-config="'layout':'month_view'" data-cal-link="classroomio/demo">
               Book a Demo
             </Button>
           </div>
@@ -178,17 +164,15 @@
   </section>
 
   <section
-    class="w-full bg-[#040F2D] flex flex-col items-center justify-start gap-y-16 lg:py-24 py-16 lg:px-28 md:px-16 px-8"
+    class="flex w-full flex-col items-center justify-start gap-y-16 bg-[#040F2D] px-8 py-16 md:px-16 lg:px-28 lg:py-24"
   >
     <div
-      class="w-full max-w-7xl flex lg:flex-row-reverse flex-col-reverse lg:justify-between justify-start lg:items-center items-start gap-y-8"
+      class="flex w-full max-w-7xl flex-col-reverse items-start justify-start gap-y-8 lg:flex-row-reverse lg:items-center lg:justify-between"
     >
-      <div class="w-full lg:w-[40%] gap-y-4 flex flex-col items-start justify-start">
-        <div class="md:w-full flex flex-col items-start justify-start gap-y-4">
-          <h1 class="text-2xl text-white">
-            Did you know you can request for custom features?
-          </h1>
-          <p class="leading-8 text-[#DEDEDE] text-base">
+      <div class="flex w-full flex-col items-start justify-start gap-y-4 lg:w-[40%]">
+        <div class="flex flex-col items-start justify-start gap-y-4 md:w-full">
+          <h1 class="text-2xl text-white">Did you know you can request for custom features?</h1>
+          <p class="text-base leading-8 text-[#DEDEDE]">
             Companies get the opportunity to request custom features from us.
           </p>
         </div>
diff --git a/apps/website/src/routes/(redirects)/devanddesign/+page.server.ts b/apps/website/src/routes/(redirects)/devanddesign/+page.server.ts
index c1b2454f..47052ddb 100644
--- a/apps/website/src/routes/(redirects)/devanddesign/+page.server.ts
+++ b/apps/website/src/routes/(redirects)/devanddesign/+page.server.ts
@@ -1,8 +1,5 @@
 import { redirect } from '@sveltejs/kit';
 
 export const load = async () => {
-  redirect(
-    307,
-    'https://docs.google.com/presentation/d/1eqvNPNk167ZcP21gZGVAatdDpWAFL9lfmWJHHrzsVFc'
-  );
+  redirect(307, 'https://docs.google.com/presentation/d/1eqvNPNk167ZcP21gZGVAatdDpWAFL9lfmWJHHrzsVFc');
 };
diff --git a/apps/website/src/routes/api/blog/+server.ts b/apps/website/src/routes/api/blog/+server.ts
index 287b23f5..05c03524 100644
--- a/apps/website/src/routes/api/blog/+server.ts
+++ b/apps/website/src/routes/api/blog/+server.ts
@@ -17,9 +17,7 @@ async function getBlogPosts() {
     }
   }
 
-  blogPosts = blogPosts.sort(
-    (first, second) => new Date(second.date).getTime() - new Date(first.date).getTime()
-  );
+  blogPosts = blogPosts.sort((first, second) => new Date(second.date).getTime() - new Date(first.date).getTime());
 
   return blogPosts;
 }
diff --git a/apps/website/src/routes/api/contact/+server.ts b/apps/website/src/routes/api/contact/+server.ts
index e7ee7c9d..58ac1335 100644
--- a/apps/website/src/routes/api/contact/+server.ts
+++ b/apps/website/src/routes/api/contact/+server.ts
@@ -1,33 +1,32 @@
 import { PUBLIC_SERVER_URL } from '$env/static/public';
 
-const sendEmail =
-  (sFetch: typeof fetch) => async (subject: string, content: string, replyTo?: string) => {
-    try {
-      const response = await sFetch(`${PUBLIC_SERVER_URL}/sendEmail`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify([
-          {
-            from: `"ClassroomIO Support" <notify@mail.classroomio.com>`,
-            to: 'help@classroomio.com',
-            subject,
-            content,
-            replyTo
-          }
-        ])
-      });
+const sendEmail = (sFetch: typeof fetch) => async (subject: string, content: string, replyTo?: string) => {
+  try {
+    const response = await sFetch(`${PUBLIC_SERVER_URL}/sendEmail`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify([
+        {
+          from: `"ClassroomIO Support" <notify@mail.classroomio.com>`,
+          to: 'help@classroomio.com',
+          subject,
+          content,
+          replyTo
+        }
+      ])
+    });
 
-      const responseData = await response.json();
-      console.log('Emails sent successfully:', responseData);
+    const responseData = await response.json();
+    console.log('Emails sent successfully:', responseData);
 
-      return 'sent';
-    } catch (error) {
-      console.error('Error sending email', error);
-      return 'failed';
-    }
-  };
+    return 'sent';
+  } catch (error) {
+    console.error('Error sending email', error);
+    return 'failed';
+  }
+};
 
 export async function POST({ request, fetch }) {
   try {
diff --git a/apps/website/src/routes/blog/+page.svelte b/apps/website/src/routes/blog/+page.svelte
index da8abb8c..4fc82a53 100644
--- a/apps/website/src/routes/blog/+page.svelte
+++ b/apps/website/src/routes/blog/+page.svelte
@@ -10,18 +10,18 @@
 
 <section>
   <PageHeader className="flex flex-col items-center justify-center text-center">
-    <h1 class="mx-auto text-4xl md:text-6xl text-slate-900 flex flex-col items-center">
+    <h1 class="mx-auto flex flex-col items-center text-4xl text-slate-900 md:text-6xl">
       <span>What's new on</span>
-      <span class="text-blue-700 relative">ClassroomIO?</span>
+      <span class="relative text-blue-700">ClassroomIO?</span>
     </h1>
-    <p class="w-[90%] md:w-[60%] text-center font-normal text-lg text-slate-700 mt-10 lg:mt-7">
+    <p class="mt-10 w-[90%] text-center text-lg font-normal text-slate-700 md:w-[60%] lg:mt-7">
       Get the latest news from ClassroomIO, including product updates, team announcements and more!
     </p>
   </PageHeader>
-  <div class="w-full flex items-center justify-center">
-    <ul class="flex flex-col items-start justify-start gap-2 w-[90%] md:w-[50%]">
+  <div class="flex w-full items-center justify-center">
+    <ul class="flex w-[90%] flex-col items-start justify-start gap-2 md:w-[50%]">
       {#each data.posts as post}
-        <li class="py-10 w-full border-b border-gray-200">
+        <li class="w-full border-b border-gray-200 py-10">
           <BlogListItem {post} />
         </li>
       {/each}
diff --git a/apps/website/src/routes/contact/+page.svelte b/apps/website/src/routes/contact/+page.svelte
index 435414c0..0bb2924d 100644
--- a/apps/website/src/routes/contact/+page.svelte
+++ b/apps/website/src/routes/contact/+page.svelte
@@ -57,19 +57,15 @@
     <h1 class="mx-auto flex flex-col items-center text-4xl text-slate-900 md:text-6xl">
       <span>Get in touch with <span class="text-blue-700">Us</span></span>
     </h1>
-    <p
-      class="mt-10 w-[90%] max-w-3xl text-center text-lg font-normal text-slate-700 md:w-[60%] lg:mt-7"
-    >
-      Report any bugs you encounter, request new features you'd like to see, or ask any questions
-      you have about ClassroomIO
+    <p class="mt-10 w-[90%] max-w-3xl text-center text-lg font-normal text-slate-700 md:w-[60%] lg:mt-7">
+      Report any bugs you encounter, request new features you'd like to see, or ask any questions you have about
+      ClassroomIO
     </p>
   </PageHeader>
 
   <div class="mx-auto my-20">
     <!-- Content here -->
-    <div
-      class="mx-auto grid w-[90%] grid-cols-1 place-items-center gap-10 md:grid-cols-2 lg:w-[60%]"
-    >
+    <div class="mx-auto grid w-[90%] grid-cols-1 place-items-center gap-10 md:grid-cols-2 lg:w-[60%]">
       {#each formList as list}
         <button
           onclick={() => onChange(list.id, list.to)}
diff --git a/apps/website/src/routes/oss-friends/+page.svelte b/apps/website/src/routes/oss-friends/+page.svelte
index 3373a30d..11c9cbda 100644
--- a/apps/website/src/routes/oss-friends/+page.svelte
+++ b/apps/website/src/routes/oss-friends/+page.svelte
@@ -11,39 +11,28 @@
 
 <section>
   <PageHeader className="flex flex-col items-center justify-center text-center">
-    <h1
-      class="mx-auto text-3xl md:text-4xl lg:text-6xl font-normal leading-[1.5] text-slate-900 items-center"
-    >
+    <h1 class="mx-auto items-center text-3xl font-normal leading-[1.5] text-slate-900 md:text-4xl lg:text-6xl">
       Our <span class="text-blue-700">Open-source</span> Friends
     </h1>
-    <p class="w-[90%] md:w-[60%] text-center font-normal text-lg text-slate-700 mt-10 lg:mt-7">
-      In ClassroomIO, we are committed to building a commercial open source company and here are
-      some of our friends on the same mission.
+    <p class="mt-10 w-[90%] text-center text-lg font-normal text-slate-700 md:w-[60%] lg:mt-7">
+      In ClassroomIO, we are committed to building a commercial open source company and here are some of our friends on
+      the same mission.
     </p>
   </PageHeader>
 
   <ul role="list" class="m-4 mt-12 grid grid-cols-1 gap-x-6 gap-y-8 lg:grid-cols-3 xl:gap-x-8">
     {#each data.friends as friend}
-      <li
-        class="overflow-hidden rounded-md border border-gray-200 flex flex-col justify-between py-6"
-      >
+      <li class="flex flex-col justify-between overflow-hidden rounded-md border border-gray-200 py-6">
         <div>
-          <div class="text-xl font-medium leading-6 text-gray-900 pb-1 px-6">
+          <div class="px-6 pb-1 text-xl font-medium leading-6 text-gray-900">
             {friend.name}
           </div>
-          <p class="px-6 mt-2 text-gray-600 text-sm">
+          <p class="mt-2 px-6 text-sm text-gray-600">
             {friend.description}
           </p>
         </div>
-        <div class="text-left px-6 mt-3">
-          <Button
-            href={friend.href}
-            target="_blank"
-            rel="noopener noreferrer"
-            variant="outline"
-          >
-            Learn more
-          </Button>
+        <div class="mt-3 px-6 text-left">
+          <Button href={friend.href} target="_blank" rel="noopener noreferrer" variant="outline">Learn more</Button>
         </div>
       </li>
     {/each}
diff --git a/apps/website/src/routes/oss-friends/+page.ts b/apps/website/src/routes/oss-friends/+page.ts
index a7b81ec0..7db4e1b3 100644
--- a/apps/website/src/routes/oss-friends/+page.ts
+++ b/apps/website/src/routes/oss-friends/+page.ts
@@ -15,8 +15,7 @@ export async function load() {
     },
     {
       name: 'Cal.com',
-      description:
-        'Cal.com is a scheduling tool that helps you schedule meetings without the back-and-forth emails.',
+      description: 'Cal.com is a scheduling tool that helps you schedule meetings without the back-and-forth emails.',
       href: 'https://cal.com'
     },
     {
@@ -74,8 +73,7 @@ export async function load() {
     },
     {
       name: 'Papermark',
-      description:
-        'Open-Source Docsend Alternative to securely share documents with real-time analytics.',
+      description: 'Open-Source Docsend Alternative to securely share documents with real-time analytics.',
       href: 'https://papermark.io'
     },
     {
diff --git a/apps/website/src/routes/pricing/+page.svelte b/apps/website/src/routes/pricing/+page.svelte
index 14f18d57..5b1f0cf2 100644
--- a/apps/website/src/routes/pricing/+page.svelte
+++ b/apps/website/src/routes/pricing/+page.svelte
@@ -28,16 +28,12 @@
     </p>
     <div class="relative mt-10 flex items-center rounded-[30px] border-2 p-[2px] lg:scale-100">
       <button
-        style="background-color: {isYearlyPlan ? 'initial' : '#1D4EE2'}; color: {isYearlyPlan
-          ? '#5e636b'
-          : '#fff'}"
+        style="background-color: {isYearlyPlan ? 'initial' : '#1D4EE2'}; color: {isYearlyPlan ? '#5e636b' : '#fff'}"
         class="rounded-[30px] bg-blue-700 px-3 py-1 text-xs text-white lg:px-4 lg:py-2"
         onclick={toggleIsYearlyPlan}>Monthly</button
       >
       <button
-        style="background-color: {isYearlyPlan ? '#1D4EE2' : ''}; color: {isYearlyPlan
-          ? '#fff'
-          : '#5e636b'}"
+        style="background-color: {isYearlyPlan ? '#1D4EE2' : ''}; color: {isYearlyPlan ? '#fff' : '#5e636b'}"
         class="rounded-[30px] px-3 py-1 text-xs text-white lg:px-4 lg:py-2"
         onclick={toggleIsYearlyPlan}>Annually</button
       >
@@ -108,10 +104,7 @@
         </p>
 
         {#key isYearlyPlan}
-          <p
-            class="mt-6 flex items-baseline gap-x-1 text-4xl font-medium text-white lg:text-4xl"
-            in:fade
-          >
+          <p class="mt-6 flex items-baseline gap-x-1 text-4xl font-medium text-white lg:text-4xl" in:fade>
             ${isYearlyPlan ? PLANS.EARLY_ADOPTER.PRICE.YEARLY : PLANS.EARLY_ADOPTER.PRICE.MONTHLY}
           </p>
           <span class="text-base text-white" in:fade>
@@ -144,9 +137,7 @@
         <p class="mt-4 text-sm font-light leading-6 text-gray-500 lg:text-base lg:leading-6">
           {PLANS.ENTERPRISE.DESCRIPTION}
         </p>
-        <p class="mt-6 flex items-baseline gap-x-1 text-xl font-medium lg:mt-6 lg:text-xl">
-          Request Pricing
-        </p>
+        <p class="mt-6 flex items-baseline gap-x-1 text-xl font-medium lg:mt-6 lg:text-xl">Request Pricing</p>
         <button
           class="mt-10 w-full rounded-md bg-slate-900 py-3 text-base font-medium text-white hover:bg-slate-700 lg:rounded-md lg:py-3 lg:text-lg lg:font-semibold"
           data-cal-config={"{'layout':'month_view'}"}
diff --git a/apps/website/src/routes/roadmap/+page.svelte b/apps/website/src/routes/roadmap/+page.svelte
index 20578488..0b654070 100644
--- a/apps/website/src/routes/roadmap/+page.svelte
+++ b/apps/website/src/routes/roadmap/+page.svelte
@@ -65,18 +65,18 @@
 </svelte:head>
 
 <PageHeader className="flex flex-col items-center justify-center text-center">
-  <h1 class="text-start md:text-center text-4xl md:text-6xl text-slate-900">Product Roadmap</h1>
-  <p class="text-start md:text-center w-[80%] md:w-[40%] text-slate-700 mt-10">
-    This is a live document, and will be updated regularly. To submit an idea, or to view a list of
-    feature requests and ideas that we're considering, check out our <a
+  <h1 class="text-start text-4xl text-slate-900 md:text-center md:text-6xl">Product Roadmap</h1>
+  <p class="mt-10 w-[80%] text-start text-slate-700 md:w-[40%] md:text-center">
+    This is a live document, and will be updated regularly. To submit an idea, or to view a list of feature requests and
+    ideas that we're considering, check out our <a
       href="https://github.com/classroomio/classroomio/discussion"
       class="underline">GitHub Discussions</a
     >
   </p>
 </PageHeader>
-<section class="relative flex flex-col items-center w-full px-4 py-20 border-b-2">
-  <img src="/roadmap-one.svg" alt="" class="w-60 lg:w-96 absolute bottom-0 right-0" />
-  <img src="/roadmap-two.svg" alt="" class="hidden lg:block absolute top-0 left-0" />
+<section class="relative flex w-full flex-col items-center border-b-2 px-4 py-20">
+  <img src="/roadmap-one.svg" alt="" class="absolute bottom-0 right-0 w-60 lg:w-96" />
+  <img src="/roadmap-two.svg" alt="" class="absolute left-0 top-0 hidden lg:block" />
   <div class="flex flex-col items-start space-y-10 px-4">
     <div>
       <h1 class="text-3xl">Latest Features</h1>
@@ -86,7 +86,7 @@
   </div>
 </section>
 
-<section class="flex flex-col items-center w-full px-4 py-20 border-b-2">
+<section class="flex w-full flex-col items-center border-b-2 px-4 py-20">
   <div class="flex flex-col items-start space-y-10 px-4">
     <div>
       <h1 class="text-3xl">Upcoming Features</h1>
diff --git a/apps/website/src/routes/teach/+page.svelte b/apps/website/src/routes/teach/+page.svelte
index 2a4318ec..020833e9 100644
--- a/apps/website/src/routes/teach/+page.svelte
+++ b/apps/website/src/routes/teach/+page.svelte
@@ -89,12 +89,7 @@
         With ClassroomIO, you can make side income while teaching the subject you love
       </p>
 
-      <Button
-        href="/teach/register"
-        target="_blank"
-      >
-        Register
-      </Button>
+      <Button href="/teach/register" target="_blank">Register</Button>
     </div>
 
     <div class=" ">
@@ -144,20 +139,12 @@
         {/each}
       </div>
       <div class="mt-3 flex justify-center px-[5%]">
-        <Button
-          href="/teach/register"
-          target="_blank"
-          rel="noopener noreferrer nofollow"
-      >
-          Get Started
-        </Button>
+        <Button href="/teach/register" target="_blank" rel="noopener noreferrer nofollow">Get Started</Button>
       </div>
     </div>
 
     <div class="my-10 h-[75%] bg-[#F5F8FE] px-2 py-12 lg:h-[80%] lg:px-[12%]">
-      <h1 class="flex items-center justify-center gap-3 text-center text-2xl">
-        Word from our fufilled facilitators
-      </h1>
+      <h1 class="flex items-center justify-center gap-3 text-center text-2xl">Word from our fufilled facilitators</h1>
 
       <div
         class="relative mx-auto mt-10 w-full rounded-md border bg-white py-6 text-center shadow-sm before:absolute before:left-0 before:top-0 before:h-full before:w-[4.5%] before:rounded-bl-md before:rounded-tl-md before:bg-[#0233BD] md:w-2/4"
diff --git a/apps/website/src/routes/tools/+layout.svelte b/apps/website/src/routes/tools/+layout.svelte
index c78434e0..9b30396a 100644
--- a/apps/website/src/routes/tools/+layout.svelte
+++ b/apps/website/src/routes/tools/+layout.svelte
@@ -11,22 +11,14 @@
 
 <svelte:head>
   <title>Free Tools | ClassroomIO</title>
-  <meta
-    property="og:image"
-    itemprop="image"
-    content="https://brand.cdn.clsrio.com/og/free-tools.png"
-  />
+  <meta property="og:image" itemprop="image" content="https://brand.cdn.clsrio.com/og/free-tools.png" />
   <meta property="og:title" content="ClassroomIO Free Tools" />
   <meta
     property="og:description"
     content="At ClassroomIO, we have built a suit of tools for anyone to use freely while collaborating with students"
   />
 
-  <meta
-    property="og:image:secure_url"
-    itemprop="image"
-    content="https://brand.cdn.clsrio.com/og/free-tools.png"
-  />
+  <meta property="og:image:secure_url" itemprop="image" content="https://brand.cdn.clsrio.com/og/free-tools.png" />
 
   <meta name="twitter:title" content="ClassroomIO Free Tools" />
   <meta
diff --git a/apps/website/src/routes/tools/+page.svelte b/apps/website/src/routes/tools/+page.svelte
index c316cf8c..b077e7b9 100644
--- a/apps/website/src/routes/tools/+page.svelte
+++ b/apps/website/src/routes/tools/+page.svelte
@@ -8,43 +8,43 @@
 <section>
   <PageHeader>
     <!-- added bg-white to keep the background white on devices that are on darkmode -->
-    <div class="bg-white text-left md:text-center md:w-2/4 px-7 md:p-0 mx-auto">
+    <div class="mx-auto bg-white px-7 text-left md:w-2/4 md:p-0 md:text-center">
       <h1 class="text-3xl md:text-5xl">
         Explore our free <span class="text-blue-700">tools</span>
       </h1>
       <p class="my-4 md:my-8">
-        Innovative tools to help you aid you example preparation, as well as making learning more
-        fun for students and educator looking for engaging resources.
+        Innovative tools to help you aid you example preparation, as well as making learning more fun for students and
+        educator looking for engaging resources.
       </p>
 
-      <div class="flex relative w-[90%] md:w-[50%] my-3 md:mt-10 mx-auto bg-white">
+      <div class="relative mx-auto my-3 flex w-[90%] bg-white md:mt-10 md:w-[50%]">
         <!-- <img
           class="w-[18%] rounded-full border hover:scale-110 transition-all hover:z-50 absolute left-0 z-0"
           src="/free-tools/waec.svg"
           alt="Waec logo"
         /> -->
         <img
-          class="w-[18%] rounded-full border hover:scale-110 transition-all hover:z-50 absolute left-[55px] z-10"
+          class="absolute left-[55px] z-10 w-[18%] rounded-full border transition-all hover:z-50 hover:scale-110"
           src="/free-tools/progress-report.svg"
           alt="Progress Report"
         />
         <img
-          class="w-[18%] rounded-full border hover:scale-110 transition-all hover:z-50 absolute left-[100px] z-20"
+          class="absolute left-[100px] z-20 w-[18%] rounded-full border transition-all hover:z-50 hover:scale-110"
           src="/free-tools/activity-stopwatch.svg"
           alt="Activity Stopwatch logo"
         />
         <img
-          class="w-[18%] rounded-full border hover:scale-110 transition-all hover:z-50 absolute left-[150px] z-30"
+          class="absolute left-[150px] z-30 w-[18%] rounded-full border transition-all hover:z-50 hover:scale-110"
           src="/free-tools/name-picker.svg"
           alt="Name picker logo"
         />
         <img
-          class="w-[18%] rounded-full border hover:scale-110 transition-all hover:z-50 absolute left-[200px] z-40"
+          class="absolute left-[200px] z-40 w-[18%] rounded-full border transition-all hover:z-50 hover:scale-110"
           src="/free-tools/tic-tac.svg"
           alt="Tic tac logo"
         />
         <img
-          class="w-[18%] rounded-full border hover:scale-110 transition-all hover:z-50 absolute left-[250px] z-50 bg-white"
+          class="absolute left-[250px] z-50 w-[18%] rounded-full border bg-white transition-all hover:z-50 hover:scale-110"
           src="/free-tools/pomodoro.svg"
           alt="Pomodoro Timer logo"
         />
@@ -57,19 +57,19 @@
     </div>
   </PageHeader>
 
-  <div class="p-10 px-2 md:px-0 bg-white">
+  <div class="bg-white p-10 px-2 md:px-0">
     <h1 class="text-center text-2xl">Featured Tools</h1>
 
-    <div class="flex justify-evenly gap-y-8 flex-wrap w-full md:w-[70%] mt-10 mx-auto bg-white">
+    <div class="mx-auto mt-10 flex w-full flex-wrap justify-evenly gap-y-8 bg-white md:w-[70%]">
       {#each freeTools as tool}
         <a
           href="/tools/{tool.slug}"
-          class="w-full flex md:max-w-[370px] border rounded-md shadow-sm hover:scale-95 transition-all ease-in-out"
+          class="flex w-full rounded-md border shadow-sm transition-all ease-in-out hover:scale-95 md:max-w-[370px]"
         >
           <img class="w-[30%] rounded-l-md" src={tool.src} alt="" />
-          <div class="bg-[#F5F8FE] p-5 rounded-r-md w-[70%]">
+          <div class="w-[70%] rounded-r-md bg-[#F5F8FE] p-5">
             <h1 class="text-sm md:text-base">{tool.title}</h1>
-            <p class="text-xs text-gray-600 mt-1.5">
+            <p class="mt-1.5 text-xs text-gray-600">
               {tool.subText}
             </p>
           </div>
diff --git a/apps/website/src/routes/tools/pomodoro/+page.svelte b/apps/website/src/routes/tools/pomodoro/+page.svelte
index 55120d64..1ab5b0c9 100644
--- a/apps/website/src/routes/tools/pomodoro/+page.svelte
+++ b/apps/website/src/routes/tools/pomodoro/+page.svelte
@@ -171,16 +171,11 @@
 
 <section class=" w-full bg-white px-1 md:w-full md:px-0">
   <ToolsHeader>
-    <img
-      src="/free-tools/pomodoro.svg"
-      class="mx-auto w-[15%] rounded-full border md:w-[5%]"
-      alt=""
-    />
+    <img src="/free-tools/pomodoro.svg" class="mx-auto w-[15%] rounded-full border md:w-[5%]" alt="" />
     <h1 class="my-3 text-3xl text-[#040F2D] md:text-5xl">Pomodoro Timer</h1>
     <p class="mx-auto mt-10 text-sm font-light text-[#656565] md:w-[45%] md:font-normal">
-      Make your workday more engaging and effective with the Pomodoro timer, break work into
-      25-minute focused intervals called "pomodoros," followed by 5-minute breaks. take a longer
-      break.
+      Make your workday more engaging and effective with the Pomodoro timer, break work into 25-minute focused intervals
+      called "pomodoros," followed by 5-minute breaks. take a longer break.
     </p>
   </ToolsHeader>
 
@@ -280,12 +275,9 @@
                     <button
                       type="button"
                       onclick={() => deleteTodo(i)}
-                      class="rounded-sm bg-[#F7F7F7] px-5 py-2 text-xs font-semibold"
-                      >Discard</button
+                      class="rounded-sm bg-[#F7F7F7] px-5 py-2 text-xs font-semibold">Discard</button
                     >
-                    <button
-                      type="submit"
-                      class="rounded-sm bg-[#0D4CFF] px-5 py-2 text-xs font-semibold text-white"
+                    <button type="submit" class="rounded-sm bg-[#0D4CFF] px-5 py-2 text-xs font-semibold text-white"
                       >Save</button
                     >
                   </div>
@@ -329,9 +321,7 @@
                   </div>
 
                   <div class="mt-10 flex items-center justify-between">
-                    <p
-                      class="rounded-[3px] bg-[#EAEAEA] px-1.5 py-0.5 text-xs font-medium text-[#656565]"
-                    >
+                    <p class="rounded-[3px] bg-[#EAEAEA] px-1.5 py-0.5 text-xs font-medium text-[#656565]">
                       {todo.time}
                     </p>
 
diff --git a/apps/website/src/routes/tools/tic-tac-toe/+page.svelte b/apps/website/src/routes/tools/tic-tac-toe/+page.svelte
index 53a9877b..75a32364 100644
--- a/apps/website/src/routes/tools/tic-tac-toe/+page.svelte
+++ b/apps/website/src/routes/tools/tic-tac-toe/+page.svelte
@@ -113,9 +113,7 @@
         transition:fly={{ x: -100, delay: 600, easing: sineInOut }}
         class="absolute top-[43%] z-[150] flex w-full flex-col items-center justify-center"
       >
-        <div
-          class="flex h-[8vh] w-full items-center justify-center gap-10 bg-white py-1 text-[#0233BD] md:h-[13vh]"
-        >
+        <div class="flex h-[8vh] w-full items-center justify-center gap-10 bg-white py-1 text-[#0233BD] md:h-[13vh]">
           {#if message != 'Tie game!'}
             <img src="/free-tools/tic-tac/winner-star-icon.svg" alt="Star icon" class="h-full" />
           {/if}
diff --git a/apps/website/static/manifest.json b/apps/website/static/manifest.json
index 0af9f4e6..223241c0 100644
--- a/apps/website/static/manifest.json
+++ b/apps/website/static/manifest.json
@@ -1,25 +1,25 @@
 {
-	"background_color": "#ffffff",
-	"theme_color": "#333333",
-	"name": "ClassroomIO",
-	"short_name": "ClassroomIO",
-	"display": "minimal-ui",
-	"start_url": "/",
-	"icons": [
-		{
-			"src": "logo-32.png",
-			"sizes": "32x32",
-			"type": "image/png"
-		},
-		{
-			"src": "logo-192.png",
-			"sizes": "192x192",
-			"type": "image/png"
-		},
-		{
-			"src": "logo-512.png",
-			"sizes": "512x512",
-			"type": "image/png"
-		}
-	]
+  "background_color": "#ffffff",
+  "theme_color": "#333333",
+  "name": "ClassroomIO",
+  "short_name": "ClassroomIO",
+  "display": "minimal-ui",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "logo-32.png",
+      "sizes": "32x32",
+      "type": "image/png"
+    },
+    {
+      "src": "logo-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "logo-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
 }
diff --git a/lefthook.yml b/lefthook.yml
new file mode 100644
index 00000000..7a4c7776
--- /dev/null
+++ b/lefthook.yml
@@ -0,0 +1,12 @@
+# Lefthook configuration
+# https://github.com/evilmartians/lefthook
+
+pre-commit:
+  parallel: true
+  commands:
+    prettier:
+      run: pnpm format:check
+      stage_fixed: false
+      fail_text: |
+        ❌ Prettier formatting check failed!
+        Please run 'pnpm format' to fix formatting issues and try again.
diff --git a/package.json b/package.json
index db95fea3..ed551929 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,9 @@
     "lint": "turbo run lint",
     "clean": "turbo clean && find . -name 'node_modules' -type d -prune -exec rm -rf '{}' +",
     "clean:pnpm": "pnpm clean && pnpm store prune",
-    "format": "prettier . --write",
+    "format": "turbo run format",
+    "format:check": "prettier --check .",
+    "postinstall": "lefthook install",
     "release": "standard-version",
     "dashboard:dev": "pnpm dev --filter=@cio/dashboard --filter=@cio/ui  --filter=@cio/db --filter=@cio/utils",
     "dashboard:start": "pnpm start --filter @cio/dashboard",
@@ -22,13 +24,14 @@
     "turbo": "^1.10.16"
   },
   "devDependencies": {
+    "@cio/tsconfig": "workspace:*",
+    "@evilmartians/lefthook": "^1.13.6",
     "concurrently": "^8.2.2",
     "eslint": "^9.36.0",
-    "prettier": "^3.1.0",
-    "prettier-plugin-svelte": "^3.4.0",
+    "prettier": "^3.6.2",
+    "prettier-plugin-svelte": "^3.4.1",
     "prettier-plugin-tailwindcss": "^0.5.7",
     "standard-version": "^9.5.0",
-    "@cio/tsconfig": "workspace:*",
     "typescript": "^5.1.6"
   },
   "engines": {
diff --git a/packages/storybook/HOW_TO_CREATE_STORIES.md b/packages/storybook/HOW_TO_CREATE_STORIES.md
index 362868ec..d8bbbd30 100644
--- a/packages/storybook/HOW_TO_CREATE_STORIES.md
+++ b/packages/storybook/HOW_TO_CREATE_STORIES.md
@@ -31,6 +31,7 @@ Stories are organized into two main categories:
 3. Optionally create a fields file: `fields.ts` (for controls configuration)
 
 **Example:**
+
 ```
 src/molecules/hover-card/
   ├── hover-card.stories.svelte
@@ -44,16 +45,16 @@ Every story file follows this structure:
 ```svelte
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
-  
+
   // Component imports
   import * as ComponentName from '@cio/ui/base/component-name';
-  
+
   // Other imports (icons, utilities, etc.)
   import IconName from '@lucide/svelte/icons/icon-name';
-  
+
   // Fields import (if using controls)
   import { FIELDS } from './fields';
-  
+
   // Story definition
   const { Story } = defineMeta({
     title: 'Category/ComponentName',
@@ -66,7 +67,7 @@ Every story file follows this structure:
     },
     tags: ['autodocs']
   });
-  
+
   // State variables (if needed)
   let someState = $state('');
 </script>
@@ -83,25 +84,23 @@ Every story file follows this structure:
 ### Component Imports
 
 - **Namespace imports** for multi-part components:
+
   ```svelte
-  import * as HoverCard from '@cio/ui/base/hover-card';
-  import * as Card from '@cio/ui/base/card';
-  import * as Field from '@cio/ui/base/field';
+  import * as HoverCard from '@cio/ui/base/hover-card'; import * as Card from '@cio/ui/base/card'; import * as Field
+  from '@cio/ui/base/field';
   ```
 
 - **Named imports** for single components:
   ```svelte
-  import { Button } from '@cio/ui/base/button';
-  import { Input } from '@cio/ui/base/input';
-  import { Avatar } from '@cio/ui/base/avatar';
+  import {Button} from '@cio/ui/base/button'; import {Input} from '@cio/ui/base/input'; import {Avatar} from '@cio/ui/base/avatar';
   ```
 
 ### Icon Imports
 
 Use Lucide Svelte icons:
+
 ```svelte
-import CalendarDaysIcon from '@lucide/svelte/icons/calendar-days';
-import UsersIcon from '@lucide/svelte/icons/users';
+import CalendarDaysIcon from '@lucide/svelte/icons/calendar-days'; import UsersIcon from '@lucide/svelte/icons/users';
 import BookOpenIcon from '@lucide/svelte/icons/book-open';
 ```
 
@@ -115,20 +114,20 @@ import BookOpenIcon from '@lucide/svelte/icons/book-open';
 ### Component Reference
 
 - For multi-part components, reference the `Root` component:
+
   ```svelte
-  component: HoverCard.Root
-  component: Card.Root
+  component: HoverCard.Root component: Card.Root
   ```
 
 - For single components, reference directly:
   ```svelte
-  component: Button
-  component: Input
+  component: Button component: Input
   ```
 
 ### Parameters
 
 Standard parameters configuration:
+
 ```svelte
 parameters: {
   layout: 'centered',
@@ -159,6 +158,7 @@ Always include `tags: ['autodocs']` for automatic documentation generation.
 ### Template with Args (for controls)
 
 For atoms that need to pass args to controls:
+
 ```svelte
 <Story name="Default">
   {#snippet template(args)}
@@ -170,6 +170,7 @@ For atoms that need to pass args to controls:
 ### Multiple Stories
 
 Create multiple stories to showcase different use cases:
+
 ```svelte
 <Story name="Default">
   {#snippet template()}
@@ -199,6 +200,7 @@ export const FIELDS = ['class'] as string[];
 ```
 
 Common fields:
+
 - `'class'` - CSS classes
 - `'variant'` - Component variants
 - `'size'` - Component sizes
@@ -210,6 +212,7 @@ Common fields:
 ### Atoms
 
 Basic, indivisible components:
+
 - Button, Input, Badge, Avatar, Label, Checkbox, Switch, etc.
 - Single-purpose components
 - Usually don't compose other components
@@ -217,6 +220,7 @@ Basic, indivisible components:
 ### Molecules
 
 Composite components:
+
 - Card, Field, ButtonGroup, HoverCard, Empty, etc.
 - Made of multiple atoms or other components
 - More complex functionality
@@ -279,6 +283,7 @@ Since ClassroomIO is an LMS platform, all story content should be **LMS-related*
 ### Content Patterns
 
 **Instructor Profiles:**
+
 ```svelte
 <h4 class="text-sm font-semibold">Sarah Johnson</h4>
 <p class="text-sm">Senior Full-Stack Developer & Instructor</p>
@@ -286,6 +291,7 @@ Since ClassroomIO is an LMS platform, all story content should be **LMS-related*
 ```
 
 **Course Information:**
+
 ```svelte
 <h4 class="text-sm font-semibold">Advanced React Patterns</h4>
 <p class="text-muted-foreground text-sm">
@@ -294,6 +300,7 @@ Since ClassroomIO is an LMS platform, all story content should be **LMS-related*
 ```
 
 **Student Information:**
+
 ```svelte
 <h4 class="text-sm font-semibold">Alex Martinez</h4>
 <p class="text-muted-foreground text-xs">5 courses enrolled</p>
@@ -455,4 +462,3 @@ When creating a new story, ensure:
 - [Storybook Svelte CSF Addon](https://storybook.js.org/addons/@storybook/addon-svelte-csf)
 - [Bits UI Documentation](https://bits-ui.com/docs/components)
 - [Lucide Icons](https://lucide.dev/icons/)
-
diff --git a/packages/storybook/package.json b/packages/storybook/package.json
index 4e60939b..67afc9ed 100644
--- a/packages/storybook/package.json
+++ b/packages/storybook/package.json
@@ -7,6 +7,7 @@
     "dev": "storybook dev -p 6006",
     "build": "storybook build",
     "preview": "storybook preview",
+    "format": "prettier --write .",
     "build-storybook": "storybook build",
     "upload:storybook": "tsx scripts/upload-storybook.ts",
     "publish:storybook": "pnpm build-storybook && pnpm upload:storybook"
diff --git a/packages/storybook/src/atoms/accordion/fields.ts b/packages/storybook/src/atoms/accordion/fields.ts
index eaec2051..86fcfdd7 100644
--- a/packages/storybook/src/atoms/accordion/fields.ts
+++ b/packages/storybook/src/atoms/accordion/fields.ts
@@ -1,9 +1 @@
-export const FIELDS = [
-  'type',
-  'value',
-  'onValueChange',
-  'disabled',
-  'name',
-  'loop',
-  'orientation'
-] as string[];
+export const FIELDS = ['type', 'value', 'onValueChange', 'disabled', 'name', 'loop', 'orientation'] as string[];
diff --git a/packages/storybook/src/atoms/checkbox/fields.ts b/packages/storybook/src/atoms/checkbox/fields.ts
index 9c513121..9a33fc61 100644
--- a/packages/storybook/src/atoms/checkbox/fields.ts
+++ b/packages/storybook/src/atoms/checkbox/fields.ts
@@ -1,8 +1 @@
-export const FIELDS = [
-  'checked',
-  'onCheckedChange',
-  'disabled',
-  'name',
-  'value',
-  'required'
-] as string[];
+export const FIELDS = ['checked', 'onCheckedChange', 'disabled', 'name', 'value', 'required'] as string[];
diff --git a/packages/storybook/src/atoms/collapsible/fields.ts b/packages/storybook/src/atoms/collapsible/fields.ts
index e2af4891..9ed78be7 100644
--- a/packages/storybook/src/atoms/collapsible/fields.ts
+++ b/packages/storybook/src/atoms/collapsible/fields.ts
@@ -1,6 +1 @@
-export const FIELDS = [
-  'open',
-  'onOpenChange',
-  'onOpenChangeComplete',
-  'disabled'
-] as string[];
+export const FIELDS = ['open', 'onOpenChange', 'onOpenChangeComplete', 'disabled'] as string[];
diff --git a/packages/storybook/src/atoms/command/fields.ts b/packages/storybook/src/atoms/command/fields.ts
index 32d55869..2389c1e8 100644
--- a/packages/storybook/src/atoms/command/fields.ts
+++ b/packages/storybook/src/atoms/command/fields.ts
@@ -1,8 +1 @@
-export const FIELDS = [
-  'value',
-  'onValueChange',
-  'label',
-  'filter',
-  'columns',
-  'disablePointerSelection'
-] as string[];
+export const FIELDS = ['value', 'onValueChange', 'label', 'filter', 'columns', 'disablePointerSelection'] as string[];
diff --git a/packages/storybook/src/atoms/item/item.stories.svelte b/packages/storybook/src/atoms/item/item.stories.svelte
index 5ed6bc5b..698a7242 100644
--- a/packages/storybook/src/atoms/item/item.stories.svelte
+++ b/packages/storybook/src/atoms/item/item.stories.svelte
@@ -68,22 +68,19 @@
     {
       name: 'v0-1.5-sm',
       description: 'Everyday tasks and UI generation.',
-      image:
-        'https://images.unsplash.com/photo-1650804068570-7fb2e3dbf888?q=80&w=640&auto=format&fit=crop',
+      image: 'https://images.unsplash.com/photo-1650804068570-7fb2e3dbf888?q=80&w=640&auto=format&fit=crop',
       credit: 'Valeria Reverdo on Unsplash'
     },
     {
       name: 'v0-1.5-lg',
       description: 'Advanced thinking or reasoning.',
-      image:
-        'https://images.unsplash.com/photo-1610280777472-54133d004c8c?q=80&w=640&auto=format&fit=crop',
+      image: 'https://images.unsplash.com/photo-1610280777472-54133d004c8c?q=80&w=640&auto=format&fit=crop',
       credit: 'Michael Oeser on Unsplash'
     },
     {
       name: 'v0-2.0-mini',
       description: 'Open Source model for everyone.',
-      image:
-        'https://images.unsplash.com/photo-1602146057681-08560aee8cde?q=80&w=640&auto=format&fit=crop',
+      image: 'https://images.unsplash.com/photo-1602146057681-08560aee8cde?q=80&w=640&auto=format&fit=crop',
       credit: 'Cherry Laithang on Unsplash'
     }
   ];
@@ -413,4 +410,3 @@
     </div>
   {/snippet}
 </Story>
-
diff --git a/packages/storybook/src/atoms/menubar/fields.ts b/packages/storybook/src/atoms/menubar/fields.ts
index 364e3303..19be1186 100644
--- a/packages/storybook/src/atoms/menubar/fields.ts
+++ b/packages/storybook/src/atoms/menubar/fields.ts
@@ -1,7 +1 @@
-export const FIELDS = [
-  'onValueChange',
-  'value',
-  'dir',
-  'onOpenChange',
-  'disabled'
-] as string[];
+export const FIELDS = ['onValueChange', 'value', 'dir', 'onOpenChange', 'disabled'] as string[];
diff --git a/packages/storybook/src/atoms/pagination/fields.ts b/packages/storybook/src/atoms/pagination/fields.ts
index e2c99e24..2c123656 100644
--- a/packages/storybook/src/atoms/pagination/fields.ts
+++ b/packages/storybook/src/atoms/pagination/fields.ts
@@ -1,7 +1 @@
-export const FIELDS = [
-  'count',
-  'page',
-  'onPageChange',
-  'perPage',
-  'orientation'
-] as string[];
+export const FIELDS = ['count', 'page', 'onPageChange', 'perPage', 'orientation'] as string[];
diff --git a/packages/storybook/src/atoms/radio-group/fields.ts b/packages/storybook/src/atoms/radio-group/fields.ts
index 1531c455..712b5eb7 100644
--- a/packages/storybook/src/atoms/radio-group/fields.ts
+++ b/packages/storybook/src/atoms/radio-group/fields.ts
@@ -1,9 +1 @@
-export const FIELDS = [
-  'value',
-  'onValueChange',
-  'disabled',
-  'required',
-  'name',
-  'loop',
-  'orientation'
-] as string[];
+export const FIELDS = ['value', 'onValueChange', 'disabled', 'required', 'name', 'loop', 'orientation'] as string[];
diff --git a/packages/storybook/src/atoms/switch/fields.ts b/packages/storybook/src/atoms/switch/fields.ts
index 799887a7..aa54f9cc 100644
--- a/packages/storybook/src/atoms/switch/fields.ts
+++ b/packages/storybook/src/atoms/switch/fields.ts
@@ -1,8 +1 @@
-export const FIELDS = [
-  'checked',
-  'onCheckedChange',
-  'disabled',
-  'name',
-  'required',
-  'value'
-] as string[];
+export const FIELDS = ['checked', 'onCheckedChange', 'disabled', 'name', 'required', 'value'] as string[];
diff --git a/packages/storybook/src/atoms/tabs/fields.ts b/packages/storybook/src/atoms/tabs/fields.ts
index 4cc3acd5..9d873da5 100644
--- a/packages/storybook/src/atoms/tabs/fields.ts
+++ b/packages/storybook/src/atoms/tabs/fields.ts
@@ -1,7 +1 @@
-export const FIELDS = [
-  'value',
-  'onValueChange',
-  'disabled',
-  'activationMode',
-  'orientation'
-] as string[];
+export const FIELDS = ['value', 'onValueChange', 'disabled', 'activationMode', 'orientation'] as string[];
diff --git a/packages/storybook/src/atoms/tooltip/fields.ts b/packages/storybook/src/atoms/tooltip/fields.ts
index 667e6c08..0494890d 100644
--- a/packages/storybook/src/atoms/tooltip/fields.ts
+++ b/packages/storybook/src/atoms/tooltip/fields.ts
@@ -1,6 +1 @@
-export const FIELDS = [
-  'disableHoverableContent',
-  'delayDuration',
-  'ignoreNonKeyboardFocus',
-  'disabled'
-] as string[];
+export const FIELDS = ['disableHoverableContent', 'delayDuration', 'ignoreNonKeyboardFocus', 'disabled'] as string[];
diff --git a/packages/storybook/src/molecules/hover-card/fields.ts b/packages/storybook/src/molecules/hover-card/fields.ts
index 7f2a595d..abd7342a 100644
--- a/packages/storybook/src/molecules/hover-card/fields.ts
+++ b/packages/storybook/src/molecules/hover-card/fields.ts
@@ -1,2 +1 @@
 export const FIELDS = ['class'] as string[];
-
diff --git a/packages/storybook/src/molecules/icon-button/fields.ts b/packages/storybook/src/molecules/icon-button/fields.ts
index 2d5f9d78..54e0703e 100644
--- a/packages/storybook/src/molecules/icon-button/fields.ts
+++ b/packages/storybook/src/molecules/icon-button/fields.ts
@@ -1,2 +1 @@
 export const FIELDS = ['disabled', 'class', 'type', 'tooltip', 'tooltipSide'] as string[];
-
diff --git a/packages/storybook/src/molecules/input-group/fields.ts b/packages/storybook/src/molecules/input-group/fields.ts
index 7f2a595d..abd7342a 100644
--- a/packages/storybook/src/molecules/input-group/fields.ts
+++ b/packages/storybook/src/molecules/input-group/fields.ts
@@ -1,2 +1 @@
 export const FIELDS = ['class'] as string[];
-
diff --git a/packages/storybook/src/molecules/page/fields.ts b/packages/storybook/src/molecules/page/fields.ts
index 7f2a595d..abd7342a 100644
--- a/packages/storybook/src/molecules/page/fields.ts
+++ b/packages/storybook/src/molecules/page/fields.ts
@@ -1,2 +1 @@
 export const FIELDS = ['class'] as string[];
-
diff --git a/packages/storybook/src/molecules/password/password.stories.svelte b/packages/storybook/src/molecules/password/password.stories.svelte
index db112957..3f010b41 100644
--- a/packages/storybook/src/molecules/password/password.stories.svelte
+++ b/packages/storybook/src/molecules/password/password.stories.svelte
@@ -94,4 +94,3 @@
     </div>
   {/snippet}
 </Story>
-
diff --git a/packages/ui/src/base/button-group/index.ts b/packages/ui/src/base/button-group/index.ts
index 7f706e3e..aaf1c027 100644
--- a/packages/ui/src/base/button-group/index.ts
+++ b/packages/ui/src/base/button-group/index.ts
@@ -1,13 +1,13 @@
-import Root from "./button-group.svelte";
-import Text from "./button-group-text.svelte";
-import Separator from "./button-group-separator.svelte";
+import Root from './button-group.svelte';
+import Text from './button-group-text.svelte';
+import Separator from './button-group-separator.svelte';
 
 export {
-	Root,
-	Text,
-	Separator,
-	//
-	Root as ButtonGroup,
-	Text as ButtonGroupText,
-	Separator as ButtonGroupSeparator,
+  Root,
+  Text,
+  Separator,
+  //
+  Root as ButtonGroup,
+  Text as ButtonGroupText,
+  Separator as ButtonGroupSeparator
 };
diff --git a/packages/ui/src/base/card/index.ts b/packages/ui/src/base/card/index.ts
index 4d3fce48..3868fe9b 100644
--- a/packages/ui/src/base/card/index.ts
+++ b/packages/ui/src/base/card/index.ts
@@ -1,25 +1,25 @@
-import Root from "./card.svelte";
-import Content from "./card-content.svelte";
-import Description from "./card-description.svelte";
-import Footer from "./card-footer.svelte";
-import Header from "./card-header.svelte";
-import Title from "./card-title.svelte";
-import Action from "./card-action.svelte";
+import Root from './card.svelte';
+import Content from './card-content.svelte';
+import Description from './card-description.svelte';
+import Footer from './card-footer.svelte';
+import Header from './card-header.svelte';
+import Title from './card-title.svelte';
+import Action from './card-action.svelte';
 
 export {
-	Root,
-	Content,
-	Description,
-	Footer,
-	Header,
-	Title,
-	Action,
-	//
-	Root as Card,
-	Content as CardContent,
-	Description as CardDescription,
-	Footer as CardFooter,
-	Header as CardHeader,
-	Title as CardTitle,
-	Action as CardAction,
+  Root,
+  Content,
+  Description,
+  Footer,
+  Header,
+  Title,
+  Action,
+  //
+  Root as Card,
+  Content as CardContent,
+  Description as CardDescription,
+  Footer as CardFooter,
+  Header as CardHeader,
+  Title as CardTitle,
+  Action as CardAction
 };
diff --git a/packages/ui/src/base/drawer/drawer-close.svelte b/packages/ui/src/base/drawer/drawer-close.svelte
index 95c24796..e591d4ec 100644
--- a/packages/ui/src/base/drawer/drawer-close.svelte
+++ b/packages/ui/src/base/drawer/drawer-close.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+  import { Drawer as DrawerPrimitive } from 'vaul-svelte';
 
-	let { ref = $bindable(null), ...restProps }: DrawerPrimitive.CloseProps = $props();
+  let { ref = $bindable(null), ...restProps }: DrawerPrimitive.CloseProps = $props();
 </script>
 
 <DrawerPrimitive.Close bind:ref data-slot="drawer-close" {...restProps} />
diff --git a/packages/ui/src/base/drawer/drawer-trigger.svelte b/packages/ui/src/base/drawer/drawer-trigger.svelte
index f1877d8e..a2316275 100644
--- a/packages/ui/src/base/drawer/drawer-trigger.svelte
+++ b/packages/ui/src/base/drawer/drawer-trigger.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+  import { Drawer as DrawerPrimitive } from 'vaul-svelte';
 
-	let { ref = $bindable(null), ...restProps }: DrawerPrimitive.TriggerProps = $props();
+  let { ref = $bindable(null), ...restProps }: DrawerPrimitive.TriggerProps = $props();
 </script>
 
 <DrawerPrimitive.Trigger bind:ref data-slot="drawer-trigger" {...restProps} />
diff --git a/packages/ui/src/base/drawer/drawer.svelte b/packages/ui/src/base/drawer/drawer.svelte
index 0cb57ff9..04bcd0ee 100644
--- a/packages/ui/src/base/drawer/drawer.svelte
+++ b/packages/ui/src/base/drawer/drawer.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+  import { Drawer as DrawerPrimitive } from 'vaul-svelte';
 
-	let {
-		shouldScaleBackground = true,
-		open = $bindable(false),
-		activeSnapPoint = $bindable(null),
-		...restProps
-	}: DrawerPrimitive.RootProps = $props();
+  let {
+    shouldScaleBackground = true,
+    open = $bindable(false),
+    activeSnapPoint = $bindable(null),
+    ...restProps
+  }: DrawerPrimitive.RootProps = $props();
 </script>
 
 <DrawerPrimitive.Root {shouldScaleBackground} bind:open bind:activeSnapPoint {...restProps} />
diff --git a/packages/ui/src/base/drawer/index.ts b/packages/ui/src/base/drawer/index.ts
index cfbdb8b2..64abcf14 100644
--- a/packages/ui/src/base/drawer/index.ts
+++ b/packages/ui/src/base/drawer/index.ts
@@ -1,41 +1,41 @@
-import { Drawer as DrawerPrimitive } from "vaul-svelte";
+import { Drawer as DrawerPrimitive } from 'vaul-svelte';
 
-import Root from "./drawer.svelte";
-import Content from "./drawer-content.svelte";
-import Description from "./drawer-description.svelte";
-import Overlay from "./drawer-overlay.svelte";
-import Footer from "./drawer-footer.svelte";
-import Header from "./drawer-header.svelte";
-import Title from "./drawer-title.svelte";
-import NestedRoot from "./drawer-nested.svelte";
-import Close from "./drawer-close.svelte";
-import Trigger from "./drawer-trigger.svelte";
+import Root from './drawer.svelte';
+import Content from './drawer-content.svelte';
+import Description from './drawer-description.svelte';
+import Overlay from './drawer-overlay.svelte';
+import Footer from './drawer-footer.svelte';
+import Header from './drawer-header.svelte';
+import Title from './drawer-title.svelte';
+import NestedRoot from './drawer-nested.svelte';
+import Close from './drawer-close.svelte';
+import Trigger from './drawer-trigger.svelte';
 
 const Portal: typeof DrawerPrimitive.Portal = DrawerPrimitive.Portal;
 
 export {
-	Root,
-	NestedRoot,
-	Content,
-	Description,
-	Overlay,
-	Footer,
-	Header,
-	Title,
-	Trigger,
-	Portal,
-	Close,
+  Root,
+  NestedRoot,
+  Content,
+  Description,
+  Overlay,
+  Footer,
+  Header,
+  Title,
+  Trigger,
+  Portal,
+  Close,
 
-	//
-	Root as Drawer,
-	NestedRoot as DrawerNestedRoot,
-	Content as DrawerContent,
-	Description as DrawerDescription,
-	Overlay as DrawerOverlay,
-	Footer as DrawerFooter,
-	Header as DrawerHeader,
-	Title as DrawerTitle,
-	Trigger as DrawerTrigger,
-	Portal as DrawerPortal,
-	Close as DrawerClose,
+  //
+  Root as Drawer,
+  NestedRoot as DrawerNestedRoot,
+  Content as DrawerContent,
+  Description as DrawerDescription,
+  Overlay as DrawerOverlay,
+  Footer as DrawerFooter,
+  Header as DrawerHeader,
+  Title as DrawerTitle,
+  Trigger as DrawerTrigger,
+  Portal as DrawerPortal,
+  Close as DrawerClose
 };
diff --git a/packages/ui/src/base/empty/index.ts b/packages/ui/src/base/empty/index.ts
index ae4c106e..9c44adad 100644
--- a/packages/ui/src/base/empty/index.ts
+++ b/packages/ui/src/base/empty/index.ts
@@ -1,22 +1,22 @@
-import Root from "./empty.svelte";
-import Header from "./empty-header.svelte";
-import Media from "./empty-media.svelte";
-import Title from "./empty-title.svelte";
-import Description from "./empty-description.svelte";
-import Content from "./empty-content.svelte";
+import Root from './empty.svelte';
+import Header from './empty-header.svelte';
+import Media from './empty-media.svelte';
+import Title from './empty-title.svelte';
+import Description from './empty-description.svelte';
+import Content from './empty-content.svelte';
 
 export {
-	Root,
-	Header,
-	Media,
-	Title,
-	Description,
-	Content,
-	//
-	Root as Empty,
-	Header as EmptyHeader,
-	Media as EmptyMedia,
-	Title as EmptyTitle,
-	Description as EmptyDescription,
-	Content as EmptyContent,
+  Root,
+  Header,
+  Media,
+  Title,
+  Description,
+  Content,
+  //
+  Root as Empty,
+  Header as EmptyHeader,
+  Media as EmptyMedia,
+  Title as EmptyTitle,
+  Description as EmptyDescription,
+  Content as EmptyContent
 };
diff --git a/packages/ui/src/base/hover-card/index.ts b/packages/ui/src/base/hover-card/index.ts
index 85f3949f..b9a86b0b 100644
--- a/packages/ui/src/base/hover-card/index.ts
+++ b/packages/ui/src/base/hover-card/index.ts
@@ -1,14 +1,7 @@
-import { LinkPreview as HoverCardPrimitive } from "bits-ui";
-import Content from "./hover-card-content.svelte";
-import Trigger from "./hover-card-trigger.svelte";
+import { LinkPreview as HoverCardPrimitive } from 'bits-ui';
+import Content from './hover-card-content.svelte';
+import Trigger from './hover-card-trigger.svelte';
 
 const Root = HoverCardPrimitive.Root;
 
-export {
-	Root,
-	Content,
-	Trigger,
-	Root as HoverCard,
-	Content as HoverCardContent,
-	Trigger as HoverCardTrigger,
-};
+export { Root, Content, Trigger, Root as HoverCard, Content as HoverCardContent, Trigger as HoverCardTrigger };
diff --git a/packages/ui/src/base/input-group/index.ts b/packages/ui/src/base/input-group/index.ts
index fe1f55d8..0a489f9c 100644
--- a/packages/ui/src/base/input-group/index.ts
+++ b/packages/ui/src/base/input-group/index.ts
@@ -1,22 +1,22 @@
-import Root from "./input-group.svelte";
-import Addon from "./input-group-addon.svelte";
-import Button from "./input-group-button.svelte";
-import Input from "./input-group-input.svelte";
-import Text from "./input-group-text.svelte";
-import Textarea from "./input-group-textarea.svelte";
+import Root from './input-group.svelte';
+import Addon from './input-group-addon.svelte';
+import Button from './input-group-button.svelte';
+import Input from './input-group-input.svelte';
+import Text from './input-group-text.svelte';
+import Textarea from './input-group-textarea.svelte';
 
 export {
-	Root,
-	Addon,
-	Button,
-	Input,
-	Text,
-	Textarea,
-	//
-	Root as InputGroup,
-	Addon as InputGroupAddon,
-	Button as InputGroupButton,
-	Input as InputGroupInput,
-	Text as InputGroupText,
-	Textarea as InputGroupTextarea,
+  Root,
+  Addon,
+  Button,
+  Input,
+  Text,
+  Textarea,
+  //
+  Root as InputGroup,
+  Addon as InputGroupAddon,
+  Button as InputGroupButton,
+  Input as InputGroupInput,
+  Text as InputGroupText,
+  Textarea as InputGroupTextarea
 };
diff --git a/packages/ui/src/base/input/index.ts b/packages/ui/src/base/input/index.ts
index f47b6d3f..be0783a3 100644
--- a/packages/ui/src/base/input/index.ts
+++ b/packages/ui/src/base/input/index.ts
@@ -1,7 +1,7 @@
-import Root from "./input.svelte";
+import Root from './input.svelte';
 
 export {
-	Root,
-	//
-	Root as Input,
+  Root,
+  //
+  Root as Input
 };
diff --git a/packages/ui/src/base/item/index.ts b/packages/ui/src/base/item/index.ts
index 168bc3ec..eb2d4ce7 100644
--- a/packages/ui/src/base/item/index.ts
+++ b/packages/ui/src/base/item/index.ts
@@ -1,34 +1,34 @@
-import Root from "./item.svelte";
-import Group from "./item-group.svelte";
-import Separator from "./item-separator.svelte";
-import Header from "./item-header.svelte";
-import Footer from "./item-footer.svelte";
-import Content from "./item-content.svelte";
-import Title from "./item-title.svelte";
-import Description from "./item-description.svelte";
-import Actions from "./item-actions.svelte";
-import Media from "./item-media.svelte";
+import Root from './item.svelte';
+import Group from './item-group.svelte';
+import Separator from './item-separator.svelte';
+import Header from './item-header.svelte';
+import Footer from './item-footer.svelte';
+import Content from './item-content.svelte';
+import Title from './item-title.svelte';
+import Description from './item-description.svelte';
+import Actions from './item-actions.svelte';
+import Media from './item-media.svelte';
 
 export {
-	Root,
-	Group,
-	Separator,
-	Header,
-	Footer,
-	Content,
-	Title,
-	Description,
-	Actions,
-	Media,
-	//
-	Root as Item,
-	Group as ItemGroup,
-	Separator as ItemSeparator,
-	Header as ItemHeader,
-	Footer as ItemFooter,
-	Content as ItemContent,
-	Title as ItemTitle,
-	Description as ItemDescription,
-	Actions as ItemActions,
-	Media as ItemMedia,
+  Root,
+  Group,
+  Separator,
+  Header,
+  Footer,
+  Content,
+  Title,
+  Description,
+  Actions,
+  Media,
+  //
+  Root as Item,
+  Group as ItemGroup,
+  Separator as ItemSeparator,
+  Header as ItemHeader,
+  Footer as ItemFooter,
+  Content as ItemContent,
+  Title as ItemTitle,
+  Description as ItemDescription,
+  Actions as ItemActions,
+  Media as ItemMedia
 };
diff --git a/packages/ui/src/base/kbd/index.ts b/packages/ui/src/base/kbd/index.ts
index 6aa7f075..d329e394 100644
--- a/packages/ui/src/base/kbd/index.ts
+++ b/packages/ui/src/base/kbd/index.ts
@@ -1,10 +1,10 @@
-import Root from "./kbd.svelte";
-import Group from "./kbd-group.svelte";
+import Root from './kbd.svelte';
+import Group from './kbd-group.svelte';
 
 export {
-	Root,
-	Group,
-	//
-	Root as Kbd,
-	Group as KbdGroup,
+  Root,
+  Group,
+  //
+  Root as Kbd,
+  Group as KbdGroup
 };
diff --git a/packages/ui/src/base/navigation-menu/index.ts b/packages/ui/src/base/navigation-menu/index.ts
index bbc250f0..a1fd0443 100644
--- a/packages/ui/src/base/navigation-menu/index.ts
+++ b/packages/ui/src/base/navigation-menu/index.ts
@@ -1,28 +1,28 @@
-import Root from "./navigation-menu.svelte";
-import Content from "./navigation-menu-content.svelte";
-import Indicator from "./navigation-menu-indicator.svelte";
-import Item from "./navigation-menu-item.svelte";
-import Link from "./navigation-menu-link.svelte";
-import List from "./navigation-menu-list.svelte";
-import Trigger from "./navigation-menu-trigger.svelte";
-import Viewport from "./navigation-menu-viewport.svelte";
+import Root from './navigation-menu.svelte';
+import Content from './navigation-menu-content.svelte';
+import Indicator from './navigation-menu-indicator.svelte';
+import Item from './navigation-menu-item.svelte';
+import Link from './navigation-menu-link.svelte';
+import List from './navigation-menu-list.svelte';
+import Trigger from './navigation-menu-trigger.svelte';
+import Viewport from './navigation-menu-viewport.svelte';
 
 export {
-	Root,
-	Content,
-	Indicator,
-	Item,
-	Link,
-	List,
-	Trigger,
-	Viewport,
-	//
-	Root as NavigationMenuRoot,
-	Content as NavigationMenuContent,
-	Indicator as NavigationMenuIndicator,
-	Item as NavigationMenuItem,
-	Link as NavigationMenuLink,
-	List as NavigationMenuList,
-	Trigger as NavigationMenuTrigger,
-	Viewport as NavigationMenuViewport,
+  Root,
+  Content,
+  Indicator,
+  Item,
+  Link,
+  List,
+  Trigger,
+  Viewport,
+  //
+  Root as NavigationMenuRoot,
+  Content as NavigationMenuContent,
+  Indicator as NavigationMenuIndicator,
+  Item as NavigationMenuItem,
+  Link as NavigationMenuLink,
+  List as NavigationMenuList,
+  Trigger as NavigationMenuTrigger,
+  Viewport as NavigationMenuViewport
 };
diff --git a/packages/ui/src/base/page/page-action.svelte b/packages/ui/src/base/page/page-action.svelte
index 25caa2bc..a3c3add9 100644
--- a/packages/ui/src/base/page/page-action.svelte
+++ b/packages/ui/src/base/page/page-action.svelte
@@ -10,12 +10,6 @@
   }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div
-  bind:this={ref}
-  data-slot="page-action"
-  class={cn('ui:flex ui:items-center ui:gap-2', className)}
-  {...restProps}
->
+<div bind:this={ref} data-slot="page-action" class={cn('ui:flex ui:items-center ui:gap-2', className)} {...restProps}>
   {@render children?.()}
 </div>
-
diff --git a/packages/ui/src/base/page/page-subtitle.svelte b/packages/ui/src/base/page/page-subtitle.svelte
index 3de241ef..19682860 100644
--- a/packages/ui/src/base/page/page-subtitle.svelte
+++ b/packages/ui/src/base/page/page-subtitle.svelte
@@ -18,4 +18,3 @@
 >
   {@render children?.()}
 </p>
-
diff --git a/packages/ui/src/base/password/password-util.svelte.ts b/packages/ui/src/base/password/password-util.svelte.ts
index 72b6def9..695254ab 100644
--- a/packages/ui/src/base/password/password-util.svelte.ts
+++ b/packages/ui/src/base/password/password-util.svelte.ts
@@ -5,153 +5,150 @@ import * as zxcvbnCommonPackage from '@zxcvbn-ts/language-common';
 import * as zxcvbnEnPackage from '@zxcvbn-ts/language-en';
 
 const passwordOptions = {
-	translations: zxcvbnEnPackage.translations,
-	graphs: zxcvbnCommonPackage.adjacencyGraphs,
-	dictionary: {
-		...zxcvbnCommonPackage.dictionary,
-		...zxcvbnEnPackage.dictionary
-	}
+  translations: zxcvbnEnPackage.translations,
+  graphs: zxcvbnCommonPackage.adjacencyGraphs,
+  dictionary: {
+    ...zxcvbnCommonPackage.dictionary,
+    ...zxcvbnEnPackage.dictionary
+  }
 };
 
 zxcvbnOptions.setOptions(passwordOptions);
 
 type PasswordRootStateProps = WritableBoxedValues<{
-	hidden: boolean;
+  hidden: boolean;
 }> &
-	ReadableBoxedValues<{
-		minScore: number;
-	}>;
+  ReadableBoxedValues<{
+    minScore: number;
+  }>;
 
 type PasswordState = {
-	value: string;
-	copyMounted: boolean;
-	toggleMounted: boolean;
-	strengthMounted: boolean;
-	tainted: boolean;
+  value: string;
+  copyMounted: boolean;
+  toggleMounted: boolean;
+  strengthMounted: boolean;
+  tainted: boolean;
 };
 
 const defaultPasswordState: PasswordState = {
-	value: '',
-	copyMounted: false,
-	toggleMounted: false,
-	strengthMounted: false,
-	tainted: false
+  value: '',
+  copyMounted: false,
+  toggleMounted: false,
+  strengthMounted: false,
+  tainted: false
 };
 
 class PasswordRootState {
-	passwordState = $state(defaultPasswordState);
+  passwordState = $state(defaultPasswordState);
 
-	constructor(readonly opts: PasswordRootStateProps) {}
+  constructor(readonly opts: PasswordRootStateProps) {}
 
-	// only re-run when the password changes
-	strength = $derived.by(() => zxcvbn(this.passwordState.value));
+  // only re-run when the password changes
+  strength = $derived.by(() => zxcvbn(this.passwordState.value));
 }
 
 type PasswordInputStateProps = WritableBoxedValues<{
-	value: string;
+  value: string;
 }> &
-	ReadableBoxedValues<{
-		ref: HTMLInputElement | null;
-	}>;
+  ReadableBoxedValues<{
+    ref: HTMLInputElement | null;
+  }>;
 
 class PasswordInputState {
-	constructor(
-		readonly root: PasswordRootState,
-		readonly opts: PasswordInputStateProps
-	) {
-		watch(
-			() => this.opts.value.current,
-			() => {
-				if (this.root.passwordState.value !== this.opts.value.current) {
-					this.root.passwordState.tainted = true;
-					this.root.passwordState.value = this.opts.value.current;
-				}
-			}
-		);
+  constructor(
+    readonly root: PasswordRootState,
+    readonly opts: PasswordInputStateProps
+  ) {
+    watch(
+      () => this.opts.value.current,
+      () => {
+        if (this.root.passwordState.value !== this.opts.value.current) {
+          this.root.passwordState.tainted = true;
+          this.root.passwordState.value = this.opts.value.current;
+        }
+      }
+    );
 
-		$effect(() => {
-			if (!this.root.passwordState.strengthMounted) return;
+    $effect(() => {
+      if (!this.root.passwordState.strengthMounted) return;
 
-			// if the password is empty, we let the `required` attribute handle the validation
-			if (
-				this.root.passwordState.value !== '' &&
-				this.root.strength.score < this.root.opts.minScore.current
-			) {
-				this.opts.ref.current?.setCustomValidity('Password is too weak');
-			} else {
-				this.opts.ref.current?.setCustomValidity('');
-			}
-		});
-	}
+      // if the password is empty, we let the `required` attribute handle the validation
+      if (this.root.passwordState.value !== '' && this.root.strength.score < this.root.opts.minScore.current) {
+        this.opts.ref.current?.setCustomValidity('Password is too weak');
+      } else {
+        this.opts.ref.current?.setCustomValidity('');
+      }
+    });
+  }
 
-	props = $derived.by(() => ({
-		'aria-invalid':
-			this.root.strength.score < this.root.opts.minScore.current &&
-			this.root.passwordState.tainted &&
-			this.root.passwordState.strengthMounted
-	}));
+  props = $derived.by(() => ({
+    'aria-invalid':
+      this.root.strength.score < this.root.opts.minScore.current &&
+      this.root.passwordState.tainted &&
+      this.root.passwordState.strengthMounted
+  }));
 }
 
 class PasswordToggleVisibilityState {
-	constructor(readonly root: PasswordRootState) {
-		this.root.passwordState.toggleMounted = true;
+  constructor(readonly root: PasswordRootState) {
+    this.root.passwordState.toggleMounted = true;
 
-		// this way we go back to the correct padding when toggle is unmounted
-		$effect(() => {
-			return () => {
-				this.root.passwordState.toggleMounted = false;
-			};
-		});
-	}
+    // this way we go back to the correct padding when toggle is unmounted
+    $effect(() => {
+      return () => {
+        this.root.passwordState.toggleMounted = false;
+      };
+    });
+  }
 }
 
 class PasswordCopyState {
-	constructor(readonly root: PasswordRootState) {
-		this.root.passwordState.copyMounted = true;
+  constructor(readonly root: PasswordRootState) {
+    this.root.passwordState.copyMounted = true;
 
-		// this way we go back to the correct padding when copy is unmounted
-		$effect(() => {
-			return () => {
-				this.root.passwordState.copyMounted = false;
-			};
-		});
-	}
+    // this way we go back to the correct padding when copy is unmounted
+    $effect(() => {
+      return () => {
+        this.root.passwordState.copyMounted = false;
+      };
+    });
+  }
 }
 
 class PasswordStrengthState {
-	constructor(readonly root: PasswordRootState) {
-		this.root.passwordState.strengthMounted = true;
+  constructor(readonly root: PasswordRootState) {
+    this.root.passwordState.strengthMounted = true;
 
-		$effect(() => {
-			return () => {
-				this.root.passwordState.strengthMounted = false;
-			};
-		});
-	}
+    $effect(() => {
+      return () => {
+        this.root.passwordState.strengthMounted = false;
+      };
+    });
+  }
 
-	get strength() {
-		return this.root.strength;
-	}
+  get strength() {
+    return this.root.strength;
+  }
 }
 
 const ctx = new Context<PasswordRootState>('password-root-state');
 
 export function usePassword(props: PasswordRootStateProps) {
-	return ctx.set(new PasswordRootState(props));
+  return ctx.set(new PasswordRootState(props));
 }
 
 export function usePasswordInput(props: PasswordInputStateProps) {
-	return new PasswordInputState(ctx.get(), props);
+  return new PasswordInputState(ctx.get(), props);
 }
 
 export function usePasswordToggleVisibility() {
-	return new PasswordToggleVisibilityState(ctx.get());
+  return new PasswordToggleVisibilityState(ctx.get());
 }
 
 export function usePasswordCopy() {
-	return new PasswordCopyState(ctx.get());
+  return new PasswordCopyState(ctx.get());
 }
 
 export function usePasswordStrength() {
-	return new PasswordStrengthState(ctx.get());
+  return new PasswordStrengthState(ctx.get());
 }
diff --git a/packages/ui/src/base/password/types.ts b/packages/ui/src/base/password/types.ts
index 11729048..b4edbcd7 100644
--- a/packages/ui/src/base/password/types.ts
+++ b/packages/ui/src/base/password/types.ts
@@ -1,47 +1,40 @@
-import type {
-	WithChildren,
-	WithoutChildren,
-	Meter as MeterPrimitive,
-	Toggle as TogglePrimitive
-} from 'bits-ui';
+import type { WithChildren, WithoutChildren, Meter as MeterPrimitive, Toggle as TogglePrimitive } from 'bits-ui';
 import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
 import type { CopyButtonProps } from '../copy-button/types';
 import type { ZxcvbnResult } from '@zxcvbn-ts/core';
 
 export type PasswordRootPropsWithoutHTML = WithChildren<{
-	ref?: HTMLDivElement | null;
-	hidden?: boolean;
-	/** The minimum acceptable score for a password. (0-4)
-	 *
-	 * @default 3
-	 */
-	minScore?: 0 | 1 | 2 | 3 | 4;
+  ref?: HTMLDivElement | null;
+  hidden?: boolean;
+  /** The minimum acceptable score for a password. (0-4)
+   *
+   * @default 3
+   */
+  minScore?: 0 | 1 | 2 | 3 | 4;
 }>;
 
-export type PasswordRootProps = WithoutChildren<HTMLAttributes<HTMLDivElement>> &
-	PasswordRootPropsWithoutHTML;
+export type PasswordRootProps = WithoutChildren<HTMLAttributes<HTMLDivElement>> & PasswordRootPropsWithoutHTML;
 
 export type PasswordInputPropsWithoutHTML = WithChildren<{
-	ref?: HTMLInputElement | null;
-	value?: string;
+  ref?: HTMLInputElement | null;
+  value?: string;
 }>;
 
 export type PasswordInputProps = Omit<
-	WithoutChildren<HTMLInputAttributes>,
-	'type' | 'files' | 'aria-invalid' | 'value'
+  WithoutChildren<HTMLInputAttributes>,
+  'type' | 'files' | 'aria-invalid' | 'value'
 > &
-	PasswordInputPropsWithoutHTML;
+  PasswordInputPropsWithoutHTML;
 
 export type PasswordToggleVisibilityProps = Omit<
-	TogglePrimitive.RootProps,
-	'children' | 'pressed' | 'aria-label' | 'tabindex'
+  TogglePrimitive.RootProps,
+  'children' | 'pressed' | 'aria-label' | 'tabindex'
 >;
 
 export type PasswordCopyButtonProps = Omit<CopyButtonProps, 'children' | 'text'>;
 
 export type PasswordStrengthPropsWithoutHTML = {
-	strength?: ZxcvbnResult;
+  strength?: ZxcvbnResult;
 };
 
-export type PasswordStrengthProps = PasswordStrengthPropsWithoutHTML &
-	WithoutChildren<MeterPrimitive.RootProps>;
+export type PasswordStrengthProps = PasswordStrengthPropsWithoutHTML & WithoutChildren<MeterPrimitive.RootProps>;
diff --git a/packages/ui/src/base/separator/index.ts b/packages/ui/src/base/separator/index.ts
index 82442d2c..2402e13e 100644
--- a/packages/ui/src/base/separator/index.ts
+++ b/packages/ui/src/base/separator/index.ts
@@ -1,7 +1,7 @@
-import Root from "./separator.svelte";
+import Root from './separator.svelte';
 
 export {
-	Root,
-	//
-	Root as Separator,
+  Root,
+  //
+  Root as Separator
 };
diff --git a/packages/ui/src/base/textarea/index.ts b/packages/ui/src/base/textarea/index.ts
index ace797a8..f802ddff 100644
--- a/packages/ui/src/base/textarea/index.ts
+++ b/packages/ui/src/base/textarea/index.ts
@@ -1,7 +1,7 @@
-import Root from "./textarea.svelte";
+import Root from './textarea.svelte';
 
 export {
-	Root,
-	//
-	Root as Textarea,
+  Root,
+  //
+  Root as Textarea
 };
diff --git a/packages/ui/src/base/toggle/index.ts b/packages/ui/src/base/toggle/index.ts
index 0f18d3be..de8ab4c8 100644
--- a/packages/ui/src/base/toggle/index.ts
+++ b/packages/ui/src/base/toggle/index.ts
@@ -1,13 +1,8 @@
 import Root from './toggle.svelte';
-export {
-	toggleVariants,
-	type ToggleSize,
-	type ToggleVariant,
-	type ToggleVariants
-} from './toggle.svelte';
+export { toggleVariants, type ToggleSize, type ToggleVariant, type ToggleVariants } from './toggle.svelte';
 
 export {
-	Root,
-	//
-	Root as Toggle
+  Root,
+  //
+  Root as Toggle
 };
diff --git a/packages/ui/src/custom/domain-input/index.ts b/packages/ui/src/custom/domain-input/index.ts
index af1bbf9c..bfb73647 100644
--- a/packages/ui/src/custom/domain-input/index.ts
+++ b/packages/ui/src/custom/domain-input/index.ts
@@ -2,4 +2,3 @@ import DomainInput from './domain-input.svelte';
 
 export { DomainInput };
 export { DomainInput as default };
-
diff --git a/packages/ui/src/custom/icon-button/icon-button.svelte b/packages/ui/src/custom/icon-button/icon-button.svelte
index ef36a54a..de17b589 100644
--- a/packages/ui/src/custom/icon-button/icon-button.svelte
+++ b/packages/ui/src/custom/icon-button/icon-button.svelte
@@ -8,12 +8,7 @@
     tooltipSide?: 'top' | 'bottom' | 'left' | 'right';
   }
 
-  let {
-    tooltip,
-    tooltipSide = 'top',
-    children,
-    ...buttonProps
-  }: Props = $props();
+  let { tooltip, tooltipSide = 'top', children, ...buttonProps }: Props = $props();
 </script>
 
 {#if tooltip}
@@ -34,4 +29,3 @@
     {@render children?.()}
   </Button>
 {/if}
-
diff --git a/packages/ui/src/custom/icon-button/index.ts b/packages/ui/src/custom/icon-button/index.ts
index bffee744..2b4c96a4 100644
--- a/packages/ui/src/custom/icon-button/index.ts
+++ b/packages/ui/src/custom/icon-button/index.ts
@@ -2,4 +2,3 @@ import IconButton from './icon-button.svelte';
 
 export { IconButton };
 export { IconButton as default };
-
diff --git a/packages/ui/src/custom/image-cropper/utils.ts b/packages/ui/src/custom/image-cropper/utils.ts
index 44c02f38..89e7d105 100644
--- a/packages/ui/src/custom/image-cropper/utils.ts
+++ b/packages/ui/src/custom/image-cropper/utils.ts
@@ -1,32 +1,32 @@
 import type { CropArea } from 'svelte-easy-crop';
 
 export const getFileFromUrl = async (url: string, fileName = 'cropped.png'): Promise<File> => {
-	// Fetch the file data from the URL
-	const response = await fetch(url);
+  // Fetch the file data from the URL
+  const response = await fetch(url);
 
-	if (!response.ok) {
-		throw new Error(`Failed to fetch resource: ${response.status} ${response.statusText}`);
-	}
+  if (!response.ok) {
+    throw new Error(`Failed to fetch resource: ${response.status} ${response.statusText}`);
+  }
 
-	// Convert the response into a Blob
-	const blob = await response.blob();
+  // Convert the response into a Blob
+  const blob = await response.blob();
 
-	// Create and return a File. You can set a custom type if needed.
-	return new File([blob], fileName, { type: blob.type });
+  // Create and return a File. You can set a custom type if needed.
+  return new File([blob], fileName, { type: blob.type });
 };
 
 const createImage = (url: string): Promise<HTMLImageElement> => {
-	return new Promise<HTMLImageElement>((resolve, reject) => {
-		const image = new Image();
-		image.addEventListener('load', () => resolve(image));
-		image.addEventListener('error', (error) => reject(error));
-		image.setAttribute('crossOrigin', 'anonymous'); // needed to avoid cross-origin issues on CodeSandbox
-		image.src = url;
-	});
+  return new Promise<HTMLImageElement>((resolve, reject) => {
+    const image = new Image();
+    image.addEventListener('load', () => resolve(image));
+    image.addEventListener('error', (error) => reject(error));
+    image.setAttribute('crossOrigin', 'anonymous'); // needed to avoid cross-origin issues on CodeSandbox
+    image.src = url;
+  });
 };
 
 const getRadianAngle = (degreeValue: number) => {
-	return (degreeValue * Math.PI) / 180;
+  return (degreeValue * Math.PI) / 180;
 };
 
 /** Gets the cropped image from the src using the cropped area
@@ -36,50 +36,46 @@ const getRadianAngle = (degreeValue: number) => {
  * @param rotation
  * @returns
  */
-export const getCroppedImg = async (
-	imageSrc: string,
-	pixelCrop: CropArea,
-	rotation = 0
-): Promise<string> => {
-	const image = await createImage(imageSrc);
-	const canvas = document.createElement('canvas');
-	const ctx = canvas.getContext('2d');
+export const getCroppedImg = async (imageSrc: string, pixelCrop: CropArea, rotation = 0): Promise<string> => {
+  const image = await createImage(imageSrc);
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
 
-	if (!ctx) {
-		throw new Error('Error getting 2d rendering context');
-	}
+  if (!ctx) {
+    throw new Error('Error getting 2d rendering context');
+  }
 
-	const maxSize = Math.max(image.width, image.height);
-	const safeArea = 2 * ((maxSize / 2) * Math.sqrt(2));
+  const maxSize = Math.max(image.width, image.height);
+  const safeArea = 2 * ((maxSize / 2) * Math.sqrt(2));
 
-	// set each dimensions to double largest dimension to allow for a safe area for the
-	// image to rotate in without being clipped by canvas context
-	canvas.width = safeArea;
-	canvas.height = safeArea;
+  // set each dimensions to double largest dimension to allow for a safe area for the
+  // image to rotate in without being clipped by canvas context
+  canvas.width = safeArea;
+  canvas.height = safeArea;
 
-	// translate canvas context to a central location on image to allow rotating around the center.
-	ctx.translate(safeArea / 2, safeArea / 2);
-	ctx.rotate(getRadianAngle(rotation));
-	ctx.translate(-safeArea / 2, -safeArea / 2);
+  // translate canvas context to a central location on image to allow rotating around the center.
+  ctx.translate(safeArea / 2, safeArea / 2);
+  ctx.rotate(getRadianAngle(rotation));
+  ctx.translate(-safeArea / 2, -safeArea / 2);
 
-	// draw rotated image and store data.
-	ctx.drawImage(image, safeArea / 2 - image.width * 0.5, safeArea / 2 - image.height * 0.5);
-	const data = ctx.getImageData(0, 0, safeArea, safeArea);
+  // draw rotated image and store data.
+  ctx.drawImage(image, safeArea / 2 - image.width * 0.5, safeArea / 2 - image.height * 0.5);
+  const data = ctx.getImageData(0, 0, safeArea, safeArea);
 
-	// set canvas width to final desired crop size - this will clear existing context
-	canvas.width = pixelCrop.width;
-	canvas.height = pixelCrop.height;
+  // set canvas width to final desired crop size - this will clear existing context
+  canvas.width = pixelCrop.width;
+  canvas.height = pixelCrop.height;
 
-	// paste generated rotate image with correct offsets for x,y crop values.
-	ctx.putImageData(
-		data,
-		Math.round(0 - safeArea / 2 + image.width * 0.5 - pixelCrop.x),
-		Math.round(0 - safeArea / 2 + image.height * 0.5 - pixelCrop.y)
-	);
+  // paste generated rotate image with correct offsets for x,y crop values.
+  ctx.putImageData(
+    data,
+    Math.round(0 - safeArea / 2 + image.width * 0.5 - pixelCrop.x),
+    Math.round(0 - safeArea / 2 + image.height * 0.5 - pixelCrop.y)
+  );
 
-	return new Promise((resolve) => {
-		canvas.toBlob((file) => {
-			resolve(URL.createObjectURL(file!));
-		}, 'image/png');
-	});
+  return new Promise((resolve) => {
+    canvas.toBlob((file) => {
+      resolve(URL.createObjectURL(file!));
+    }, 'image/png');
+  });
 };
diff --git a/packages/ui/src/custom/input-field/index.ts b/packages/ui/src/custom/input-field/index.ts
index 5cdfbbcd..7f1fb454 100644
--- a/packages/ui/src/custom/input-field/index.ts
+++ b/packages/ui/src/custom/input-field/index.ts
@@ -2,4 +2,3 @@ import InputField from './input-field.svelte';
 
 export { InputField };
 export { InputField as default };
-
diff --git a/packages/ui/src/custom/password/index.ts b/packages/ui/src/custom/password/index.ts
index e05a9461..27ac339f 100644
--- a/packages/ui/src/custom/password/index.ts
+++ b/packages/ui/src/custom/password/index.ts
@@ -2,4 +2,3 @@ import Password from './password.svelte';
 
 export { Password };
 export { Password as default };
-
diff --git a/packages/ui/src/custom/password/password.svelte b/packages/ui/src/custom/password/password.svelte
index 3f5164ae..32332d78 100644
--- a/packages/ui/src/custom/password/password.svelte
+++ b/packages/ui/src/custom/password/password.svelte
@@ -50,7 +50,7 @@
     bind:value
     {disabled}
     aria-invalid={ariaInvalid}
-    autocomplete={autocomplete}
+    {autocomplete}
     {...restProps}
   />
   <InputGroup.Addon align="inline-end">
@@ -77,4 +77,3 @@
     </Tooltip.Provider>
   </InputGroup.Addon>
 </InputGroup.Root>
-
diff --git a/packages/ui/src/custom/search/index.ts b/packages/ui/src/custom/search/index.ts
index e2f0e1da..e20712a5 100644
--- a/packages/ui/src/custom/search/index.ts
+++ b/packages/ui/src/custom/search/index.ts
@@ -2,4 +2,3 @@ import Search from './search.svelte';
 
 export { Search };
 export { Search as default };
-
diff --git a/packages/ui/src/custom/underline-tabs/index.ts b/packages/ui/src/custom/underline-tabs/index.ts
index a21e19e3..ba51b927 100644
--- a/packages/ui/src/custom/underline-tabs/index.ts
+++ b/packages/ui/src/custom/underline-tabs/index.ts
@@ -4,13 +4,13 @@ import List from './underline-tabs-list.svelte';
 import Trigger from './underline-tabs-trigger.svelte';
 
 export {
-	Root,
-	Content,
-	List,
-	Trigger,
-	//
-	Root as UnderlineTabs,
-	Content as UnderlineTabsContent,
-	List as UnderlineTabsList,
-	Trigger as UnderlineTabsTrigger
+  Root,
+  Content,
+  List,
+  Trigger,
+  //
+  Root as UnderlineTabs,
+  Content as UnderlineTabsContent,
+  List as UnderlineTabsList,
+  Trigger as UnderlineTabsTrigger
 };
diff --git a/packages/ui/src/custom/underline-tabs/underline-tabs-utils.svelte.ts b/packages/ui/src/custom/underline-tabs/underline-tabs-utils.svelte.ts
index b176b9a2..f2ef0539 100644
--- a/packages/ui/src/custom/underline-tabs/underline-tabs-utils.svelte.ts
+++ b/packages/ui/src/custom/underline-tabs/underline-tabs-utils.svelte.ts
@@ -4,85 +4,85 @@ import type { Tabs as TabsPrimitive } from 'bits-ui';
 import { crossfade } from 'svelte/transition';
 
 export const [send, receive] = crossfade({
-	duration: (d) => Math.sqrt(d * 200)
+  duration: (d) => Math.sqrt(d * 200)
 });
 
 type UnderlineTabsRootProps = WritableBoxedValues<{
-	value: string;
+  value: string;
 }> &
-	ReadableBoxedValues<{
-		id: string;
-	}>;
+  ReadableBoxedValues<{
+    id: string;
+  }>;
 
 class UnderlineTabsRootState {
-	hoveredTab = $state<string | null>(null);
-	isHovered = $state(false);
-	constructor(readonly opts: UnderlineTabsRootProps) {
-		this.hoveredTab = this.opts.value.current;
-	}
+  hoveredTab = $state<string | null>(null);
+  isHovered = $state(false);
+  constructor(readonly opts: UnderlineTabsRootProps) {
+    this.hoveredTab = this.opts.value.current;
+  }
 }
 
 type UnderlineTabsTriggerProps = ReadableBoxedValues<{
-	value: string;
-	onmouseenter: TabsPrimitive.TriggerProps['onmouseenter'];
-	onmouseleave: TabsPrimitive.TriggerProps['onmouseleave'];
-	onfocus: TabsPrimitive.TriggerProps['onfocus'];
-	onblur: TabsPrimitive.TriggerProps['onblur'];
+  value: string;
+  onmouseenter: TabsPrimitive.TriggerProps['onmouseenter'];
+  onmouseleave: TabsPrimitive.TriggerProps['onmouseleave'];
+  onfocus: TabsPrimitive.TriggerProps['onfocus'];
+  onblur: TabsPrimitive.TriggerProps['onblur'];
 }>;
 
 class UnderlineTabsTriggerState {
-	constructor(
-		readonly opts: UnderlineTabsTriggerProps,
-		readonly rootState: UnderlineTabsRootState
-	) {}
+  constructor(
+    readonly opts: UnderlineTabsTriggerProps,
+    readonly rootState: UnderlineTabsRootState
+  ) {}
 
-	handleFocus() {
-		this.rootState.isHovered = true;
-		this.rootState.hoveredTab = this.opts.value.current;
-	}
+  handleFocus() {
+    this.rootState.isHovered = true;
+    this.rootState.hoveredTab = this.opts.value.current;
+  }
 
-	handleBlur() {
-		if (this.rootState.hoveredTab === this.opts.value.current) {
-			this.rootState.isHovered = false;
-		}
-	}
+  handleBlur() {
+    if (this.rootState.hoveredTab === this.opts.value.current) {
+      this.rootState.isHovered = false;
+    }
+  }
 
-	onmouseenter(e: Parameters<NonNullable<TabsPrimitive.TriggerProps['onmouseenter']>>[0]) {
-		this.handleFocus();
-		this.opts.onmouseenter.current?.(e);
-	}
+  onmouseenter(e: Parameters<NonNullable<TabsPrimitive.TriggerProps['onmouseenter']>>[0]) {
+    this.handleFocus();
+    this.opts.onmouseenter.current?.(e);
+  }
 
-	onmouseleave(e: Parameters<NonNullable<TabsPrimitive.TriggerProps['onmouseleave']>>[0]) {
-		this.handleBlur();
-		this.opts.onmouseleave.current?.(e);
-	}
+  onmouseleave(e: Parameters<NonNullable<TabsPrimitive.TriggerProps['onmouseleave']>>[0]) {
+    this.handleBlur();
+    this.opts.onmouseleave.current?.(e);
+  }
 
-	onfocus(e: Parameters<NonNullable<TabsPrimitive.TriggerProps['onfocus']>>[0]) {
-		this.handleFocus();
-		this.opts.onfocus.current?.(e);
-	}
+  onfocus(e: Parameters<NonNullable<TabsPrimitive.TriggerProps['onfocus']>>[0]) {
+    this.handleFocus();
+    this.opts.onfocus.current?.(e);
+  }
 
-	onblur(e: Parameters<NonNullable<TabsPrimitive.TriggerProps['onblur']>>[0]) {
-		this.handleBlur();
+  onblur(e: Parameters<NonNullable<TabsPrimitive.TriggerProps['onblur']>>[0]) {
+    this.handleBlur();
 
-		this.opts.onblur.current?.(e);
-	}
+    this.opts.onblur.current?.(e);
+  }
 
-	props = $derived.by(() => ({
-		value: this.opts.value.current,
-		onmouseenter: this.onmouseenter.bind(this),
-		onmouseleave: this.onmouseleave.bind(this),
-		onfocus: this.onfocus.bind(this),
-		onblur: this.onblur.bind(this)
-	}));
+  props = $derived.by(() => ({
+    value: this.opts.value.current,
+    onmouseenter: this.onmouseenter.bind(this),
+    onmouseleave: this.onmouseleave.bind(this),
+    onfocus: this.onfocus.bind(this),
+    onblur: this.onblur.bind(this)
+  }));
 }
 
 const ctx = new Context<UnderlineTabsRootState>('underline-tabs-root-ctx');
 
 export function useUnderlineTabs(opts: UnderlineTabsRootProps) {
-	return ctx.set(new UnderlineTabsRootState(opts));
+  return ctx.set(new UnderlineTabsRootState(opts));
 }
 
 export function useUnderlineTabsTrigger(opts: UnderlineTabsTriggerProps) {
-	return new UnderlineTabsTriggerState(opts, ctx.get());
+  return new UnderlineTabsTriggerState(opts, ctx.get());
 }
diff --git a/packages/ui/src/hooks/use-clipboard.svelte.ts b/packages/ui/src/hooks/use-clipboard.svelte.ts
index 0d33df7b..4242a249 100644
--- a/packages/ui/src/hooks/use-clipboard.svelte.ts
+++ b/packages/ui/src/hooks/use-clipboard.svelte.ts
@@ -1,6 +1,6 @@
 type Options = {
-	/** The time before the copied status is reset. */
-	delay: number;
+  /** The time before the copied status is reset. */
+  delay: number;
 };
 
 /** Use this hook to copy text to the clipboard and show a copied state.
@@ -26,58 +26,58 @@ type Options = {
  *
  */
 export class UseClipboard {
-	#copiedStatus = $state<'success' | 'failure'>();
-	private delay: number;
-	private timeout: ReturnType<typeof setTimeout> | undefined = undefined;
+  #copiedStatus = $state<'success' | 'failure'>();
+  private delay: number;
+  private timeout: ReturnType<typeof setTimeout> | undefined = undefined;
 
-	constructor({ delay = 500 }: Partial<Options> = {}) {
-		this.delay = delay;
-	}
+  constructor({ delay = 500 }: Partial<Options> = {}) {
+    this.delay = delay;
+  }
 
-	/** Copies the given text to the users clipboard.
-	 *
-	 * ## Usage
-	 * ```ts
-	 * clipboard.copy('Hello, World!');
-	 * ```
-	 *
-	 * @param text
-	 * @returns
-	 */
-	async copy(text: string) {
-		if (this.timeout) {
-			this.#copiedStatus = undefined;
-			clearTimeout(this.timeout);
-		}
+  /** Copies the given text to the users clipboard.
+   *
+   * ## Usage
+   * ```ts
+   * clipboard.copy('Hello, World!');
+   * ```
+   *
+   * @param text
+   * @returns
+   */
+  async copy(text: string) {
+    if (this.timeout) {
+      this.#copiedStatus = undefined;
+      clearTimeout(this.timeout);
+    }
 
-		try {
-			await navigator.clipboard.writeText(text);
+    try {
+      await navigator.clipboard.writeText(text);
 
-			this.#copiedStatus = 'success';
+      this.#copiedStatus = 'success';
 
-			this.timeout = setTimeout(() => {
-				this.#copiedStatus = undefined;
-			}, this.delay);
-		} catch {
-			// an error can occur when not in the browser or if the user hasn't given clipboard access
-			this.#copiedStatus = 'failure';
+      this.timeout = setTimeout(() => {
+        this.#copiedStatus = undefined;
+      }, this.delay);
+    } catch {
+      // an error can occur when not in the browser or if the user hasn't given clipboard access
+      this.#copiedStatus = 'failure';
 
-			this.timeout = setTimeout(() => {
-				this.#copiedStatus = undefined;
-			}, this.delay);
-		}
+      this.timeout = setTimeout(() => {
+        this.#copiedStatus = undefined;
+      }, this.delay);
+    }
 
-		return this.#copiedStatus;
-	}
+    return this.#copiedStatus;
+  }
 
-	/** true when the user has just copied to the clipboard. */
-	get copied() {
-		return this.#copiedStatus === 'success';
-	}
+  /** true when the user has just copied to the clipboard. */
+  get copied() {
+    return this.#copiedStatus === 'success';
+  }
 
-	/**	Indicates whether a copy has occurred
-	 * and gives a status of either `success` or `failure`. */
-	get status() {
-		return this.#copiedStatus;
-	}
+  /**	Indicates whether a copy has occurred
+   * and gives a status of either `success` or `failure`. */
+  get status() {
+    return this.#copiedStatus;
+  }
 }
diff --git a/packages/ui/src/output.css b/packages/ui/src/output.css
index 0577af7f..b095dbd5 100644
--- a/packages/ui/src/output.css
+++ b/packages/ui/src/output.css
@@ -1,2 +1,3808 @@
 /*! tailwindcss v4.1.18 | 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-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking: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-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-outline-style:solid;--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}}}@layer theme{:root,:host{--ui-font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--ui-font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--ui-color-red-500:oklch(63.7% .237 25.331);--ui-color-yellow-500:oklch(79.5% .184 86.047);--ui-color-green-500:oklch(72.3% .219 149.579);--ui-color-black:#000;--ui-color-white:#fff;--ui-spacing:.25rem;--ui-container-sm:24rem;--ui-container-lg:32rem;--ui-container-3xl:48rem;--ui-text-xs:.75rem;--ui-text-xs--line-height:calc(1/.75);--ui-text-sm:.875rem;--ui-text-sm--line-height:calc(1.25/.875);--ui-text-base:1rem;--ui-text-base--line-height:calc(1.5/1);--ui-text-lg:1.125rem;--ui-text-lg--line-height:calc(1.75/1.125);--ui-text-2xl:1.5rem;--ui-text-2xl--line-height:calc(2/1.5);--ui-font-weight-normal:400;--ui-font-weight-medium:500;--ui-font-weight-semibold:600;--ui-tracking-tight:-.025em;--ui-tracking-widest:.1em;--ui-leading-snug:1.375;--ui-leading-normal:1.5;--ui-leading-relaxed:1.625;--ui-radius-xs:.125rem;--ui-ease-in-out:cubic-bezier(.4,0,.2,1);--ui-animate-spin:spin 1s linear infinite;--ui-animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite;--ui-blur-sm:8px;--ui-default-transition-duration:.15s;--ui-default-transition-timing-function:cubic-bezier(.4,0,.2,1);--ui-default-mono-font-family:var(--ui-font-mono)}}@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(--font-cio,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--ui-default-font-feature-settings,normal);font-variation-settings:var(--ui-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(--ui-default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--ui-default-mono-font-feature-settings,normal);font-variation-settings:var(--ui-default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}*{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)}}body{background-color:var(--background);font-family:var(--font-sans);color:var(--foreground)}button,input,select,optgroup,textarea{font-family:var(--font-sans)}::file-selector-button{font-family:var(--font-sans)}.toaster{--normal-bg:var(--color-popover);--normal-text:var(--color-popover-foreground);--normal-border:var(--color-border)}}@layer components;@layer utilities{.ui\:\@container\/field-group{container:field-group/inline-size}.ui\:pointer-events-none{pointer-events:none}.ui\:sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.ui\:absolute{position:absolute}.ui\:fixed{position:fixed}.ui\:relative{position:relative}.ui\:inset-0{inset:calc(var(--ui-spacing)*0)}.ui\:inset-x-0{inset-inline:calc(var(--ui-spacing)*0)}.ui\:inset-y-0{inset-block:calc(var(--ui-spacing)*0)}.ui\:start-0{inset-inline-start:calc(var(--ui-spacing)*0)}.ui\:end-4{inset-inline-end:calc(var(--ui-spacing)*4)}.ui\:-top-2{top:calc(var(--ui-spacing)*-2)}.ui\:top-0{top:calc(var(--ui-spacing)*0)}.ui\:top-1\.5{top:calc(var(--ui-spacing)*1.5)}.ui\:top-1\/2{top:50%}.ui\:top-2{top:calc(var(--ui-spacing)*2)}.ui\:top-3\.5{top:calc(var(--ui-spacing)*3.5)}.ui\:top-4{top:calc(var(--ui-spacing)*4)}.ui\:top-\[50\%\]{top:50%}.ui\:top-\[60\%\]{top:60%}.ui\:top-full{top:100%}.ui\:top-px{top:1px}.ui\:right-0{right:calc(var(--ui-spacing)*0)}.ui\:right-1{right:calc(var(--ui-spacing)*1)}.ui\:right-2{right:calc(var(--ui-spacing)*2)}.ui\:right-3{right:calc(var(--ui-spacing)*3)}.ui\:right-4{right:calc(var(--ui-spacing)*4)}.ui\:right-9{right:calc(var(--ui-spacing)*9)}.ui\:-bottom-px{bottom:-1px}.ui\:bottom-0{bottom:calc(var(--ui-spacing)*0)}.ui\:left-0{left:calc(var(--ui-spacing)*0)}.ui\:left-1\/2{left:50%}.ui\:left-2{left:calc(var(--ui-spacing)*2)}.ui\:left-\[50\%\]{left:50%}.ui\:left-\[calc\(50\%-3rem\)\]{left:calc(50% - 3rem)}.ui\:isolate{isolation:isolate}.ui\:z-1{z-index:1}.ui\:z-10{z-index:10}.ui\:z-20{z-index:20}.ui\:z-50{z-index:50}.ui\:z-999{z-index:999}.ui\:order-first{order:-9999}.ui\:order-last{order:9999}.ui\:col-start-2{grid-column-start:2}.ui\:row-span-2{grid-row:span 2/span 2}.ui\:row-start-1{grid-row-start:1}.ui\:m-0{margin:calc(var(--ui-spacing)*0)}.ui\:m-0\!{margin:calc(var(--ui-spacing)*0)!important}.ui\:-mx-1{margin-inline:calc(var(--ui-spacing)*-1)}.ui\:mx-3\.5{margin-inline:calc(var(--ui-spacing)*3.5)}.ui\:mx-auto{margin-inline:auto}.ui\:-my-2{margin-block:calc(var(--ui-spacing)*-2)}.ui\:my-0{margin-block:calc(var(--ui-spacing)*0)}.ui\:my-0\.5{margin-block:calc(var(--ui-spacing)*.5)}.ui\:my-1{margin-block:calc(var(--ui-spacing)*1)}.ui\:my-2{margin-block:calc(var(--ui-spacing)*2)}.ui\:my-4{margin-block:calc(var(--ui-spacing)*4)}.ui\:ms-1{margin-inline-start:calc(var(--ui-spacing)*1)}.ui\:ms-4{margin-inline-start:calc(var(--ui-spacing)*4)}.ui\:mt-1{margin-top:calc(var(--ui-spacing)*1)}.ui\:mt-1\.5{margin-top:calc(var(--ui-spacing)*1.5)}.ui\:mt-3{margin-top:calc(var(--ui-spacing)*3)}.ui\:mt-4{margin-top:calc(var(--ui-spacing)*4)}.ui\:mt-auto{margin-top:auto}.ui\:mr-1{margin-right:calc(var(--ui-spacing)*1)}.ui\:mb-2{margin-bottom:calc(var(--ui-spacing)*2)}.ui\:mb-3{margin-bottom:calc(var(--ui-spacing)*3)}.ui\:mb-4{margin-bottom:calc(var(--ui-spacing)*4)}.ui\:ml-auto{margin-left:auto}.ui\:line-clamp-3{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.ui\:block{display:block}.ui\:flex{display:flex}.ui\:grid{display:grid}.ui\:hidden{display:none}.ui\:inline-flex{display:inline-flex}.ui\:field-sizing-content{field-sizing:content}.ui\:size-2{width:calc(var(--ui-spacing)*2);height:calc(var(--ui-spacing)*2)}.ui\:size-2\.5{width:calc(var(--ui-spacing)*2.5);height:calc(var(--ui-spacing)*2.5)}.ui\:size-3{width:calc(var(--ui-spacing)*3);height:calc(var(--ui-spacing)*3)}.ui\:size-3\.5{width:calc(var(--ui-spacing)*3.5);height:calc(var(--ui-spacing)*3.5)}.ui\:size-4{width:calc(var(--ui-spacing)*4);height:calc(var(--ui-spacing)*4)}.ui\:size-6{width:calc(var(--ui-spacing)*6);height:calc(var(--ui-spacing)*6)}.ui\:size-7{width:calc(var(--ui-spacing)*7);height:calc(var(--ui-spacing)*7)}.ui\:size-8{width:calc(var(--ui-spacing)*8);height:calc(var(--ui-spacing)*8)}.ui\:size-9{width:calc(var(--ui-spacing)*9);height:calc(var(--ui-spacing)*9)}.ui\:size-10{width:calc(var(--ui-spacing)*10);height:calc(var(--ui-spacing)*10)}.ui\:size-20{width:calc(var(--ui-spacing)*20);height:calc(var(--ui-spacing)*20)}.ui\:size-fit{width:fit-content;height:fit-content}.ui\:size-full{width:100%;height:100%}.ui\:h-\(--bits-navigation-menu-viewport-height\){height:var(--bits-navigation-menu-viewport-height)}.ui\:h-\(--bits-select-anchor-height\){height:var(--bits-select-anchor-height)}.ui\:h-0\.5{height:calc(var(--ui-spacing)*.5)}.ui\:h-2{height:calc(var(--ui-spacing)*2)}.ui\:h-4{height:calc(var(--ui-spacing)*4)}.ui\:h-5{height:calc(var(--ui-spacing)*5)}.ui\:h-6{height:calc(var(--ui-spacing)*6)}.ui\:h-7{height:calc(var(--ui-spacing)*7)}.ui\:h-8{height:calc(var(--ui-spacing)*8)}.ui\:h-9{height:calc(var(--ui-spacing)*9)}.ui\:h-10{height:calc(var(--ui-spacing)*10)}.ui\:h-12{height:calc(var(--ui-spacing)*12)}.ui\:h-96{height:calc(var(--ui-spacing)*96)}.ui\:h-128{height:calc(var(--ui-spacing)*128)}.ui\:h-\[1\.2rem\]{height:1.2rem}.ui\:h-\[1\.15rem\]{height:1.15rem}.ui\:h-\[6px\]{height:6px}.ui\:h-\[70px\]{height:70px}.ui\:h-\[calc\(100\%-1px\)\]{height:calc(100% - 1px)}.ui\:h-\[calc\(100\%-3px\)\]{height:calc(100% - 3px)}.ui\:h-auto{height:auto}.ui\:h-fit{height:fit-content}.ui\:h-full{height:100%}.ui\:h-px{height:1px}.ui\:h-screen{height:100vh}.ui\:max-h-\(--bits-dropdown-menu-content-available-height\){max-height:var(--bits-dropdown-menu-content-available-height)}.ui\:max-h-\(--bits-select-content-available-height\){max-height:var(--bits-select-content-available-height)}.ui\:max-h-80{max-height:calc(var(--ui-spacing)*80)}.ui\:max-h-90{max-height:calc(var(--ui-spacing)*90)}.ui\:max-h-\[300px\]{max-height:300px}.ui\:max-h-svh{max-height:100svh}.ui\:min-h-0{min-height:calc(var(--ui-spacing)*0)}.ui\:min-h-16{min-height:calc(var(--ui-spacing)*16)}.ui\:min-h-96{min-height:calc(var(--ui-spacing)*96)}.ui\:min-h-\[calc\(100vh-48px\)\]{min-height:calc(100vh - 48px)}.ui\:w-\(--sidebar-width\){width:var(--sidebar-width)}.ui\:w-0{width:calc(var(--ui-spacing)*0)}.ui\:w-1{width:calc(var(--ui-spacing)*1)}.ui\:w-1\/4{width:25%}.ui\:w-2{width:calc(var(--ui-spacing)*2)}.ui\:w-3\/4{width:75%}.ui\:w-4{width:calc(var(--ui-spacing)*4)}.ui\:w-5{width:calc(var(--ui-spacing)*5)}.ui\:w-7{width:calc(var(--ui-spacing)*7)}.ui\:w-8{width:calc(var(--ui-spacing)*8)}.ui\:w-40{width:calc(var(--ui-spacing)*40)}.ui\:w-64{width:calc(var(--ui-spacing)*64)}.ui\:w-72{width:calc(var(--ui-spacing)*72)}.ui\:w-\[1\.2rem\]{width:1.2rem}.ui\:w-\[25px\]{width:25px}.ui\:w-\[100px\]{width:100px}.ui\:w-fit{width:fit-content}.ui\:w-full{width:100%}.ui\:w-max{width:max-content}.ui\:w-screen{width:100vw}.ui\:max-w-\(--skeleton-width\){max-width:var(--skeleton-width)}.ui\:max-w-3xl{max-width:var(--ui-container-3xl)}.ui\:max-w-6{max-width:calc(var(--ui-spacing)*6)}.ui\:max-w-80{max-width:calc(var(--ui-spacing)*80)}.ui\:max-w-\[60\%\]{max-width:60%}.ui\:max-w-\[calc\(100\%-2rem\)\]{max-width:calc(100% - 2rem)}.ui\:max-w-full{max-width:100%}.ui\:max-w-max{max-width:max-content}.ui\:max-w-sm{max-width:var(--ui-container-sm)}.ui\:min-w-\(--bits-select-anchor-width\){min-width:var(--bits-select-anchor-width)}.ui\:min-w-0{min-width:calc(var(--ui-spacing)*0)}.ui\:min-w-5{min-width:calc(var(--ui-spacing)*5)}.ui\:min-w-8{min-width:calc(var(--ui-spacing)*8)}.ui\:min-w-9{min-width:calc(var(--ui-spacing)*9)}.ui\:min-w-10{min-width:calc(var(--ui-spacing)*10)}.ui\:min-w-32{min-width:calc(var(--ui-spacing)*32)}.ui\:min-w-48{min-width:calc(var(--ui-spacing)*48)}.ui\:min-w-\[9rem\]{min-width:9rem}.ui\:flex-1{flex:1}.ui\:shrink-0{flex-shrink:0}.ui\:basis-full{flex-basis:100%}.ui\:origin-\(--bits-dropdown-menu-content-transform-origin\){transform-origin:var(--bits-dropdown-menu-content-transform-origin)}.ui\:origin-\(--bits-menubar-content-transform-origin\){transform-origin:var(--bits-menubar-content-transform-origin)}.ui\:origin-\(--bits-popover-content-transform-origin\){transform-origin:var(--bits-popover-content-transform-origin)}.ui\:origin-\(--bits-select-content-transform-origin\){transform-origin:var(--bits-select-content-transform-origin)}.ui\:origin-\(--bits-tooltip-content-transform-origin\){transform-origin:var(--bits-tooltip-content-transform-origin)}.ui\:-translate-x-1\/2{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.ui\:-translate-x-px{--tw-translate-x:-1px;translate:var(--tw-translate-x)var(--tw-translate-y)}.ui\:translate-x-\[-50\%\]{--tw-translate-x:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.ui\:translate-x-px{--tw-translate-x:1px;translate:var(--tw-translate-x)var(--tw-translate-y)}.ui\:-translate-y-1\/2{--tw-translate-y:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.ui\:translate-y-0\.5{--tw-translate-y:calc(var(--ui-spacing)*.5);translate:var(--tw-translate-x)var(--tw-translate-y)}.ui\:translate-y-\[-50\%\]{--tw-translate-y:-50%;translate:var(--tw-translate-x)var(--tw-translate-y)}.ui\:scale-0{--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x)var(--tw-scale-y)}.ui\:scale-100{--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.ui\:rotate-0{rotate:none}.ui\:rotate-45{rotate:45deg}.ui\:rotate-90{rotate:90deg}.ui\:animate-in{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:animate-pulse{animation:var(--ui-animate-pulse)}.ui\:animate-spin{animation:var(--ui-animate-spin)}.ui\:cursor-auto{cursor:auto}.ui\:cursor-col-resize{cursor:col-resize}.ui\:cursor-default{cursor:default}.ui\:cursor-not-allowed{cursor:not-allowed}.ui\:cursor-pointer{cursor:pointer}.ui\:cursor-text{cursor:text}.ui\:resize-none{resize:none}.ui\:scroll-my-1{scroll-margin-block:calc(var(--ui-spacing)*1)}.ui\:scroll-py-1{scroll-padding-block:calc(var(--ui-spacing)*1)}.ui\:list-disc{list-style-type:disc}.ui\:list-none{list-style-type:none}.ui\:auto-rows-min{grid-auto-rows:min-content}.ui\:grid-rows-\[auto_auto\]{grid-template-rows:auto auto}.ui\:flex-col{flex-direction:column}.ui\:flex-col-reverse{flex-direction:column-reverse}.ui\:flex-row{flex-direction:row}.ui\:flex-wrap{flex-wrap:wrap}.ui\:place-items-center{place-items:center}.ui\:items-center{align-items:center}.ui\:items-end{align-items:flex-end}.ui\:items-start{align-items:flex-start}.ui\:items-stretch{align-items:stretch}.ui\:justify-between{justify-content:space-between}.ui\:justify-center{justify-content:center}.ui\:justify-end{justify-content:flex-end}.ui\:justify-start{justify-content:flex-start}.ui\:gap-0{gap:calc(var(--ui-spacing)*0)}.ui\:gap-0\.5{gap:calc(var(--ui-spacing)*.5)}.ui\:gap-1{gap:calc(var(--ui-spacing)*1)}.ui\:gap-1\.5{gap:calc(var(--ui-spacing)*1.5)}.ui\:gap-2{gap:calc(var(--ui-spacing)*2)}.ui\:gap-2\.5{gap:calc(var(--ui-spacing)*2.5)}.ui\:gap-3{gap:calc(var(--ui-spacing)*3)}.ui\:gap-4{gap:calc(var(--ui-spacing)*4)}.ui\:gap-6{gap:calc(var(--ui-spacing)*6)}.ui\:gap-7{gap:calc(var(--ui-spacing)*7)}.ui\:self-start{align-self:flex-start}.ui\:self-stretch{align-self:stretch}.ui\:justify-self-end{justify-self:flex-end}.ui\:overflow-auto{overflow:auto}.ui\:overflow-hidden{overflow:hidden}.ui\:overflow-visible{overflow:visible}.ui\:overflow-x-auto{overflow-x:auto}.ui\:overflow-x-hidden{overflow-x:hidden}.ui\:overflow-y-auto{overflow-y:auto}.ui\:scroll-smooth{scroll-behavior:smooth}.ui\:rounded{border-radius:.25rem}.ui\:rounded-\[2px\]{border-radius:2px}.ui\:rounded-\[4px\]{border-radius:4px}.ui\:rounded-\[calc\(var\(--radius\)-5px\)\]{border-radius:calc(var(--radius) - 5px)}.ui\:rounded-full{border-radius:3.40282e38px}.ui\:rounded-lg{border-radius:var(--radius)}.ui\:rounded-md{border-radius:calc(var(--radius) - 2px)}.ui\:rounded-none{border-radius:0}.ui\:rounded-sm{border-radius:calc(var(--radius) - 4px)}.ui\:rounded-xl{border-radius:calc(var(--radius) + 4px)}.ui\:rounded-xs{border-radius:var(--ui-radius-xs)}.ui\:border{border-style:var(--tw-border-style);border-width:1px}.ui\:border-0{border-style:var(--tw-border-style);border-width:0}.ui\:border-2{border-style:var(--tw-border-style);border-width:2px}.ui\:border-\[1\.5px\]{border-style:var(--tw-border-style);border-width:1.5px}.ui\:border-x-0{border-inline-style:var(--tw-border-style);border-inline-width:0}.ui\:border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.ui\:border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.ui\:border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.ui\:border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.ui\:border-dashed{--tw-border-style:dashed;border-style:dashed}.ui\:border-\(--color-border\){border-color:var(--color-border)}.ui\:border-border,.ui\:border-border\/50{border-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.ui\:border-border\/50{border-color:color-mix(in oklab,var(--border)50%,transparent)}}.ui\:border-input{border-color:var(--input)}.ui\:border-red-500{border-color:var(--ui-color-red-500)}.ui\:border-sidebar-border{border-color:var(--sidebar-border)}.ui\:border-transparent{border-color:#0000}.ui\:bg-\(--color-bg\){background-color:var(--color-bg)}.ui\:bg-accent{background-color:var(--accent)}.ui\:bg-background,.ui\:bg-background\/50{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-background\/50{background-color:color-mix(in oklab,var(--background)50%,transparent)}}.ui\:bg-black\/50{background-color:var(--ui-color-black)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-black\/50{background-color:color-mix(in oklab,var(--ui-color-black)50%,transparent)}}.ui\:bg-border{background-color:var(--border)}.ui\:bg-card{background-color:var(--card)}.ui\:bg-destructive{background-color:var(--destructive)}.ui\:bg-green-500{background-color:var(--ui-color-green-500)}.ui\:bg-inherit{background-color:inherit}.ui\:bg-input{background-color:var(--input)}.ui\:bg-muted,.ui\:bg-muted\/50{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-muted\/50{background-color:color-mix(in oklab,var(--muted)50%,transparent)}}.ui\:bg-popover{background-color:var(--popover)}.ui\:bg-primary{background-color:var(--primary)}.ui\:bg-primary-foreground{background-color:var(--primary-foreground)}.ui\:bg-primary\/20{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-primary\/20{background-color:color-mix(in oklab,var(--primary)20%,transparent)}}.ui\:bg-red-500{background-color:var(--ui-color-red-500)}.ui\:bg-secondary,.ui\:bg-secondary\/50{background-color:var(--secondary)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-secondary\/50{background-color:color-mix(in oklab,var(--secondary)50%,transparent)}}.ui\:bg-sidebar{background-color:var(--sidebar)}.ui\:bg-sidebar-border{background-color:var(--sidebar-border)}.ui\:bg-transparent{background-color:#0000}.ui\:bg-yellow-500{background-color:var(--ui-color-yellow-500)}.ui\:bg-clip-padding{background-clip:padding-box}.ui\:fill-current{fill:currentColor}.ui\:fill-primary{fill:var(--primary)}.ui\:object-cover{object-fit:cover}.ui\:p-0{padding:calc(var(--ui-spacing)*0)}.ui\:p-0\.5{padding:calc(var(--ui-spacing)*.5)}.ui\:p-1{padding:calc(var(--ui-spacing)*1)}.ui\:p-2{padding:calc(var(--ui-spacing)*2)}.ui\:p-4{padding:calc(var(--ui-spacing)*4)}.ui\:p-6{padding:calc(var(--ui-spacing)*6)}.ui\:p-\[3px\]{padding:3px}.ui\:px-1{padding-inline:calc(var(--ui-spacing)*1)}.ui\:px-1\.5{padding-inline:calc(var(--ui-spacing)*1.5)}.ui\:px-2{padding-inline:calc(var(--ui-spacing)*2)}.ui\:px-2\.5{padding-inline:calc(var(--ui-spacing)*2.5)}.ui\:px-3{padding-inline:calc(var(--ui-spacing)*3)}.ui\:px-4{padding-inline:calc(var(--ui-spacing)*4)}.ui\:px-6{padding-inline:calc(var(--ui-spacing)*6)}.ui\:py-0\.5{padding-block:calc(var(--ui-spacing)*.5)}.ui\:py-1{padding-block:calc(var(--ui-spacing)*1)}.ui\:py-1\.5{padding-block:calc(var(--ui-spacing)*1.5)}.ui\:py-2{padding-block:calc(var(--ui-spacing)*2)}.ui\:py-3{padding-block:calc(var(--ui-spacing)*3)}.ui\:py-4{padding-block:calc(var(--ui-spacing)*4)}.ui\:py-6{padding-block:calc(var(--ui-spacing)*6)}.ui\:ps-3{padding-inline-start:calc(var(--ui-spacing)*3)}.ui\:pe-3{padding-inline-end:calc(var(--ui-spacing)*3)}.ui\:pt-0{padding-top:calc(var(--ui-spacing)*0)}.ui\:pt-1\.5{padding-top:calc(var(--ui-spacing)*1.5)}.ui\:pt-3{padding-top:calc(var(--ui-spacing)*3)}.ui\:pr-2{padding-right:calc(var(--ui-spacing)*2)}.ui\:pr-8{padding-right:calc(var(--ui-spacing)*8)}.ui\:pr-9{padding-right:calc(var(--ui-spacing)*9)}.ui\:pr-18{padding-right:calc(var(--ui-spacing)*18)}.ui\:pb-3{padding-bottom:calc(var(--ui-spacing)*3)}.ui\:pb-4{padding-bottom:calc(var(--ui-spacing)*4)}.ui\:pl-2{padding-left:calc(var(--ui-spacing)*2)}.ui\:pl-3{padding-left:calc(var(--ui-spacing)*3)}.ui\:pl-8{padding-left:calc(var(--ui-spacing)*8)}.ui\:text-center{text-align:center}.ui\:text-left{text-align:left}.ui\:font-mono{font-family:var(--ui-font-mono)}.ui\:font-sans{font-family:var(--ui-font-sans)}.ui\:text-2xl{font-size:var(--ui-text-2xl);line-height:var(--tw-leading,var(--ui-text-2xl--line-height))}.ui\:text-base{font-size:var(--ui-text-base);line-height:var(--tw-leading,var(--ui-text-base--line-height))}.ui\:text-lg{font-size:var(--ui-text-lg);line-height:var(--tw-leading,var(--ui-text-lg--line-height))}.ui\:text-sm{font-size:var(--ui-text-sm);line-height:var(--tw-leading,var(--ui-text-sm--line-height))}.ui\:text-sm\/relaxed{font-size:var(--ui-text-sm);line-height:var(--ui-leading-relaxed)}.ui\:text-xs{font-size:var(--ui-text-xs);line-height:var(--tw-leading,var(--ui-text-xs--line-height))}.ui\:leading-none{--tw-leading:1;line-height:1}.ui\:leading-normal{--tw-leading:var(--ui-leading-normal);line-height:var(--ui-leading-normal)}.ui\:leading-snug{--tw-leading:var(--ui-leading-snug);line-height:var(--ui-leading-snug)}.ui\:font-medium{--tw-font-weight:var(--ui-font-weight-medium);font-weight:var(--ui-font-weight-medium)}.ui\:font-normal{--tw-font-weight:var(--ui-font-weight-normal);font-weight:var(--ui-font-weight-normal)}.ui\:font-semibold{--tw-font-weight:var(--ui-font-weight-semibold);font-weight:var(--ui-font-weight-semibold)}.ui\:tracking-tight{--tw-tracking:var(--ui-tracking-tight);letter-spacing:var(--ui-tracking-tight)}.ui\:tracking-widest{--tw-tracking:var(--ui-tracking-widest);letter-spacing:var(--ui-tracking-widest)}.ui\:text-balance{text-wrap:balance}.ui\:break-words{overflow-wrap:break-word}.ui\:text-ellipsis{text-overflow:ellipsis}.ui\:whitespace-nowrap{white-space:nowrap}.ui\:text-card-foreground{color:var(--card-foreground)}.ui\:text-current{color:currentColor}.ui\:text-destructive{color:var(--destructive)}.ui\:text-foreground{color:var(--foreground)}.ui\:text-green-500{color:var(--ui-color-green-500)}.ui\:text-muted-foreground{color:var(--muted-foreground)}.ui\:text-popover-foreground{color:var(--popover-foreground)}.ui\:text-primary{color:var(--primary)}.ui\:text-primary-foreground{color:var(--primary-foreground)}.ui\:text-secondary-foreground{color:var(--secondary-foreground)}.ui\:text-sidebar-foreground,.ui\:text-sidebar-foreground\/70{color:var(--sidebar-foreground)}@supports (color:color-mix(in lab, red, red)){.ui\:text-sidebar-foreground\/70{color:color-mix(in oklab,var(--sidebar-foreground)70%,transparent)}}.ui\:text-white{color:var(--ui-color-white)}.ui\:underline-offset-4{text-underline-offset:4px}.ui\:opacity-0{opacity:0}.ui\:opacity-50{opacity:.5}.ui\:opacity-70{opacity:.7}.ui\:opacity-100{opacity:1}.ui\: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)}.ui\:shadow-2xs{--tw-shadow:0 1px 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)}.ui\:shadow-\[0_0_0_1px_var\(--sidebar-border\)\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,var(--sidebar-border));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui\: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)}.ui\: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)}.ui\: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)}.ui\: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)}.ui\: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)}.ui\: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)}.ui\:ring-0{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(0px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui\:ring-2{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(2px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui\:ring-3{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui\:ring-accent{--tw-ring-color:var(--accent)}.ui\:ring-background{--tw-ring-color:var(--background)}.ui\:ring-sidebar-ring{--tw-ring-color:var(--sidebar-ring)}.ui\: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)}.ui\:ring-offset-background{--tw-ring-offset-color:var(--background)}.ui\:outline-hidden{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.ui\:outline-hidden{outline-offset:2px;outline:2px solid #0000}}.ui\:backdrop-blur-sm{--tw-backdrop-blur:blur(var(--ui-blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.ui\: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(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-\[color\,box-shadow\]{transition-property:color,box-shadow;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-\[left\,right\,width\]{transition-property:left,right,width;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-\[margin\,opacity\]{transition-property:margin,opacity;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-\[width\,height\,padding\]{transition-property:width,height,padding;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\: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(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}.ui\:transition-none{transition-property:none}.ui\:duration-100{--tw-duration:.1s;transition-duration:.1s}.ui\:duration-200{--tw-duration:.2s;transition-duration:.2s}.ui\:duration-300{--tw-duration:.3s;transition-duration:.3s}.ui\:duration-500{--tw-duration:.5s;transition-duration:.5s}.ui\:ease-in-out{--tw-ease:var(--ui-ease-in-out);transition-timing-function:var(--ui-ease-in-out)}.ui\:ease-linear{--tw-ease:linear;transition-timing-function:linear}.ui\:fade-in-0{--tw-enter-opacity:0}.ui\:outline-none{--tw-outline-style:none;outline-style:none}.ui\:select-none{-webkit-user-select:none;user-select:none}.ui\:zoom-in-95{--tw-enter-scale:.95}:is(.ui\:\*\:w-full>*){width:100%}.ui\:group-has-data-\[orientation\=horizontal\]\/field\:text-balance:is(:where(.ui\:group\/field):has([data-orientation=horizontal]) *){text-wrap:balance}.ui\:group-has-data-\[sidebar\=menu-action\]\/menu-item\:pr-8:is(:where(.ui\:group\/menu-item):has([data-sidebar=menu-action]) *){padding-right:calc(var(--ui-spacing)*8)}.ui\:group-has-\[\[data-slot\=item-description\]\]\/item\:translate-y-0\.5:is(:where(.ui\:group\/item):has([data-slot=item-description]) *){--tw-translate-y:calc(var(--ui-spacing)*.5);translate:var(--tw-translate-x)var(--tw-translate-y)}.ui\:group-has-\[\[data-slot\=item-description\]\]\/item\:self-start:is(:where(.ui\:group\/item):has([data-slot=item-description]) *){align-self:flex-start}.ui\:group-has-\[\>input\]\/input-group\:pt-2\.5:is(:where(.ui\:group\/input-group):has(>input) *){padding-top:calc(var(--ui-spacing)*2.5)}.ui\:group-has-\[\>input\]\/input-group\:pb-2\.5:is(:where(.ui\:group\/input-group):has(>input) *){padding-bottom:calc(var(--ui-spacing)*2.5)}.ui\:group-data-\[collapsible\=icon\]\:-mt-8:is(:where(.ui\:group)[data-collapsible=icon] *){margin-top:calc(var(--ui-spacing)*-8)}.ui\:group-data-\[collapsible\=icon\]\:hidden:is(:where(.ui\:group)[data-collapsible=icon] *){display:none}.ui\:group-data-\[collapsible\=icon\]\:size-8\!:is(:where(.ui\:group)[data-collapsible=icon] *){width:calc(var(--ui-spacing)*8)!important;height:calc(var(--ui-spacing)*8)!important}.ui\:group-data-\[collapsible\=icon\]\:w-\(--sidebar-width-icon\):is(:where(.ui\:group)[data-collapsible=icon] *){width:var(--sidebar-width-icon)}.ui\:group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\+2px\)\]:is(:where(.ui\:group)[data-collapsible=icon] *){width:calc(var(--sidebar-width-icon) + (calc(var(--ui-spacing)*4)) + 2px)}.ui\:group-data-\[collapsible\=icon\]\:overflow-hidden:is(:where(.ui\:group)[data-collapsible=icon] *){overflow:hidden}.ui\:group-data-\[collapsible\=icon\]\:p-0\!:is(:where(.ui\:group)[data-collapsible=icon] *){padding:calc(var(--ui-spacing)*0)!important}.ui\:group-data-\[collapsible\=icon\]\:p-2\!:is(:where(.ui\:group)[data-collapsible=icon] *){padding:calc(var(--ui-spacing)*2)!important}.ui\:group-data-\[collapsible\=icon\]\:opacity-0:is(:where(.ui\:group)[data-collapsible=icon] *){opacity:0}.ui\:group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.ui\:group)[data-collapsible=offcanvas] *){right:calc(var(--sidebar-width)*-1)}.ui\:group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(:where(.ui\:group)[data-collapsible=offcanvas] *){left:calc(var(--sidebar-width)*-1)}.ui\:group-data-\[collapsible\=offcanvas\]\:w-0:is(:where(.ui\:group)[data-collapsible=offcanvas] *){width:calc(var(--ui-spacing)*0)}.ui\:group-data-\[collapsible\=offcanvas\]\:translate-x-0:is(:where(.ui\:group)[data-collapsible=offcanvas] *){--tw-translate-x:calc(var(--ui-spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.ui\:group-data-\[disabled\=true\]\:pointer-events-none:is(:where(.ui\:group)[data-disabled=true] *){pointer-events:none}.ui\:group-data-\[disabled\=true\]\:opacity-50:is(:where(.ui\:group)[data-disabled=true] *),.ui\:group-data-\[disabled\=true\]\/field\:opacity-50:is(:where(.ui\:group\/field)[data-disabled=true] *),.ui\:group-data-\[disabled\=true\]\/input-group\:opacity-50:is(:where(.ui\:group\/input-group)[data-disabled=true] *){opacity:.5}.ui\:group-data-\[side\=left\]\:-right-4:is(:where(.ui\:group)[data-side=left] *){right:calc(var(--ui-spacing)*-4)}.ui\:group-data-\[side\=left\]\:border-r:is(:where(.ui\:group)[data-side=left] *){border-right-style:var(--tw-border-style);border-right-width:1px}.ui\:group-data-\[side\=right\]\:left-0:is(:where(.ui\:group)[data-side=right] *){left:calc(var(--ui-spacing)*0)}.ui\:group-data-\[side\=right\]\:rotate-180:is(:where(.ui\:group)[data-side=right] *){rotate:180deg}.ui\:group-data-\[side\=right\]\:border-l:is(:where(.ui\:group)[data-side=right] *){border-left-style:var(--tw-border-style);border-left-width:1px}.ui\:group-data-\[variant\=floating\]\:rounded-lg:is(:where(.ui\:group)[data-variant=floating] *){border-radius:var(--radius)}.ui\:group-data-\[variant\=floating\]\:border:is(:where(.ui\:group)[data-variant=floating] *){border-style:var(--tw-border-style);border-width:1px}.ui\:group-data-\[variant\=floating\]\:border-sidebar-border:is(:where(.ui\:group)[data-variant=floating] *){border-color:var(--sidebar-border)}.ui\:group-data-\[variant\=floating\]\:shadow-sm:is(:where(.ui\:group)[data-variant=floating] *){--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)}.ui\:group-data-\[variant\=outline\]\/field-group\:-mb-2:is(:where(.ui\:group\/field-group)[data-variant=outline] *){margin-bottom:calc(var(--ui-spacing)*-2)}.ui\:group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block:is(:where(.ui\:group\/drawer-content)[data-vaul-drawer-direction=bottom] *){display:block}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:top-full:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *){top:100%}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:mt-1\.5:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *){margin-top:calc(var(--ui-spacing)*1.5)}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:overflow-hidden:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *){overflow:hidden}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:rounded-md:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *){border-radius:calc(var(--radius) - 2px)}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:border:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *){border-style:var(--tw-border-style);border-width:1px}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:bg-popover:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *){background-color:var(--popover)}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:text-popover-foreground:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *){color:var(--popover-foreground)}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:shadow:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *){--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)}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:duration-200:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *){--tw-duration:.2s;transition-duration:.2s}@media (hover:hover){.ui\:peer-hover\/menu-button\:text-sidebar-accent-foreground:is(:where(.ui\:peer\/menu-button):hover~*){color:var(--sidebar-accent-foreground)}}.ui\:peer-disabled\:cursor-not-allowed:is(:where(.ui\:peer):disabled~*){cursor:not-allowed}.ui\:peer-disabled\:opacity-50:is(:where(.ui\:peer):disabled~*){opacity:.5}.ui\:peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground:is(:where(.ui\:peer\/menu-button)[data-active=true]~*){color:var(--sidebar-accent-foreground)}.ui\:peer-data-\[size\=default\]\/menu-button\:top-1\.5:is(:where(.ui\:peer\/menu-button)[data-size=default]~*){top:calc(var(--ui-spacing)*1.5)}.ui\:peer-data-\[size\=lg\]\/menu-button\:top-2\.5:is(:where(.ui\:peer\/menu-button)[data-size=lg]~*){top:calc(var(--ui-spacing)*2.5)}.ui\:peer-data-\[size\=sm\]\/menu-button\:top-1:is(:where(.ui\:peer\/menu-button)[data-size=sm]~*){top:calc(var(--ui-spacing)*1)}.ui\:selection\:bg-primary ::selection{background-color:var(--primary)}.ui\:selection\:bg-primary::selection{background-color:var(--primary)}.ui\:selection\:text-primary-foreground ::selection{color:var(--primary-foreground)}.ui\:selection\:text-primary-foreground::selection{color:var(--primary-foreground)}.ui\:placeholder\:text-muted-foreground::placeholder{color:var(--muted-foreground)}.ui\:after\:absolute:after{content:var(--tw-content);position:absolute}.ui\:after\:-inset-2:after{content:var(--tw-content);inset:calc(var(--ui-spacing)*-2)}.ui\:after\:inset-y-0:after{content:var(--tw-content);inset-block:calc(var(--ui-spacing)*0)}.ui\:after\:left-\[calc\(1\/2\*100\%-1px\)\]:after{content:var(--tw-content);left:calc(50% - 1px)}.ui\:after\:w-\[2px\]:after{content:var(--tw-content);width:2px}.ui\:group-data-\[collapsible\=offcanvas\]\:after\:left-full:is(:where(.ui\:group)[data-collapsible=offcanvas] *):after{content:var(--tw-content);left:100%}.ui\:last\:mt-0:last-child{margin-top:calc(var(--ui-spacing)*0)}.ui\:last\:border-b-0:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}@media (hover:hover){.ui\:hover\:bg-accent:hover{background-color:var(--accent)}.ui\:hover\:bg-muted:hover{background-color:var(--muted)}.ui\:hover\:bg-sidebar-accent:hover{background-color:var(--sidebar-accent)}.ui\:hover\:bg-transparent\!:hover{background-color:#0000!important}.ui\:hover\:text-accent-foreground:hover{color:var(--accent-foreground)}.ui\:hover\:text-foreground:hover{color:var(--foreground)}.ui\:hover\:text-muted-foreground:hover{color:var(--muted-foreground)}.ui\:hover\:text-sidebar-accent-foreground:hover{color:var(--sidebar-accent-foreground)}.ui\:hover\:underline:hover{text-decoration-line:underline}.ui\:hover\:opacity-100:hover{opacity:1}.ui\:hover\:shadow-\[0_0_0_1px_var\(--sidebar-accent\)\]:hover{--tw-shadow:0 0 0 1px var(--tw-shadow-color,var(--sidebar-accent));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui\:hover\:group-data-\[collapsible\=offcanvas\]\:bg-sidebar:hover:is(:where(.ui\:group)[data-collapsible=offcanvas] *){background-color:var(--sidebar)}.ui\:hover\:after\:bg-sidebar-border:hover:after{content:var(--tw-content);background-color:var(--sidebar-border)}}.ui\:focus\:bg-accent:focus{background-color:var(--accent)}.ui\:focus\:text-accent-foreground:focus{color:var(--accent-foreground)}.ui\: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,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui\:focus\:ring-ring:focus{--tw-ring-color:var(--ring)}.ui\: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)}.ui\:focus\:outline-hidden:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.ui\:focus\:outline-hidden:focus{outline-offset:2px;outline:2px solid #0000}}.ui\:focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.ui\:focus-visible\:border-ring:focus-visible{border-color:var(--ring)}.ui\: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,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui\: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,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui\:focus-visible\:ring-\[3px\]:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui\:focus-visible\:ring-destructive\/20:focus-visible{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.ui\:focus-visible\:ring-destructive\/20:focus-visible{--tw-ring-color:color-mix(in oklab,var(--destructive)20%,transparent)}}.ui\:focus-visible\:ring-ring:focus-visible,.ui\:focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){.ui\:focus-visible\:ring-ring\/50:focus-visible{--tw-ring-color:color-mix(in oklab,var(--ring)50%,transparent)}}.ui\: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)}.ui\:focus-visible\:outline-hidden:focus-visible{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.ui\:focus-visible\:outline-hidden:focus-visible{outline-offset:2px;outline:2px solid #0000}}.ui\:focus-visible\:outline-1:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}.ui\:focus-visible\:outline-ring:focus-visible{outline-color:var(--ring)}.ui\:active\:bg-sidebar-accent:active{background-color:var(--sidebar-accent)}.ui\:active\:text-sidebar-accent-foreground:active{color:var(--sidebar-accent-foreground)}.ui\:disabled\:pointer-events-none:disabled{pointer-events:none}.ui\:disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.ui\:disabled\:opacity-50:disabled{opacity:.5}:where([data-side=left]) .ui\:in-data-\[side\=left\]\:cursor-w-resize{cursor:w-resize}:where([data-side=right]) .ui\:in-data-\[side\=right\]\:cursor-e-resize{cursor:e-resize}:where([data-slot=tooltip-content]) .ui\:in-data-\[slot\=tooltip-content\]\:bg-background\/20{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){:where([data-slot=tooltip-content]) .ui\:in-data-\[slot\=tooltip-content\]\:bg-background\/20{background-color:color-mix(in oklab,var(--background)20%,transparent)}}:where([data-slot=tooltip-content]) .ui\:in-data-\[slot\=tooltip-content\]\:text-background{color:var(--background)}.ui\:has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot=card-action]){grid-template-columns:1fr auto}.ui\:has-data-\[state\=checked\]\:border-primary:has([data-state=checked]){border-color:var(--primary)}.ui\:has-data-\[state\=checked\]\:bg-primary\/5:has([data-state=checked]){background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:has-data-\[state\=checked\]\:bg-primary\/5:has([data-state=checked]){background-color:color-mix(in oklab,var(--primary)5%,transparent)}}.ui\:has-data-\[variant\=inset\]\:bg-sidebar:has([data-variant=inset]){background-color:var(--sidebar)}.ui\:has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:border-ring:has([data-slot=input-group-control]:focus-visible){border-color:var(--ring)}.ui\:has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-\[3px\]:has([data-slot=input-group-control]:focus-visible){--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(3px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ui\:has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-ring\/50:has([data-slot=input-group-control]:focus-visible){--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){.ui\:has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-ring\/50:has([data-slot=input-group-control]:focus-visible){--tw-ring-color:color-mix(in oklab,var(--ring)50%,transparent)}}.ui\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:border-destructive:has([data-slot][aria-invalid=true]){border-color:var(--destructive)}.ui\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/20:has([data-slot][aria-invalid=true]){--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.ui\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/20:has([data-slot][aria-invalid=true]){--tw-ring-color:color-mix(in oklab,var(--destructive)20%,transparent)}}.ui\:has-\[\>\[data-align\=block-end\]\]\:h-auto:has(>[data-align=block-end]){height:auto}.ui\:has-\[\>\[data-align\=block-end\]\]\:flex-col:has(>[data-align=block-end]){flex-direction:column}.ui\:has-\[\>\[data-align\=block-start\]\]\:h-auto:has(>[data-align=block-start]){height:auto}.ui\:has-\[\>\[data-align\=block-start\]\]\:flex-col:has(>[data-align=block-start]){flex-direction:column}.ui\:has-\[\>\[data-slot\=button-group\]\]\:gap-2:has(>[data-slot=button-group]){gap:calc(var(--ui-spacing)*2)}.ui\:has-\[\>\[data-slot\=checkbox-group\]\]\:gap-3:has(>[data-slot=checkbox-group]){gap:calc(var(--ui-spacing)*3)}.ui\:has-\[\>\[data-slot\=field-content\]\]\:items-start:has(>[data-slot=field-content]){align-items:flex-start}.ui\:has-\[\>\[data-slot\=field\]\]\:w-full:has(>[data-slot=field]){width:100%}.ui\:has-\[\>\[data-slot\=field\]\]\:flex-col:has(>[data-slot=field]){flex-direction:column}.ui\:has-\[\>\[data-slot\=field\]\]\:rounded-md:has(>[data-slot=field]){border-radius:calc(var(--radius) - 2px)}.ui\:has-\[\>\[data-slot\=field\]\]\:border:has(>[data-slot=field]){border-style:var(--tw-border-style);border-width:1px}.ui\:has-\[\>\[data-slot\=radio-group\]\]\:gap-3:has(>[data-slot=radio-group]){gap:calc(var(--ui-spacing)*3)}.ui\:has-\[\>button\]\:ms-\[-0\.45rem\]:has(>button){margin-inline-start:-.45rem}.ui\:has-\[\>button\]\:me-\[-0\.45rem\]:has(>button){margin-inline-end:-.45rem}.ui\:has-\[\>kbd\]\:ms-\[-0\.35rem\]:has(>kbd){margin-inline-start:-.35rem}.ui\:has-\[\>kbd\]\:me-\[-0\.35rem\]:has(>kbd){margin-inline-end:-.35rem}.ui\:has-\[\>svg\]\:p-0:has(>svg){padding:calc(var(--ui-spacing)*0)}.ui\:has-\[\>svg\]\:px-2:has(>svg){padding-inline:calc(var(--ui-spacing)*2)}.ui\:has-\[\>svg\]\:px-2\.5:has(>svg){padding-inline:calc(var(--ui-spacing)*2.5)}.ui\:has-\[\>svg\]\:px-3:has(>svg){padding-inline:calc(var(--ui-spacing)*3)}.ui\:has-\[\>svg\]\:px-4:has(>svg){padding-inline:calc(var(--ui-spacing)*4)}.ui\:has-\[\>textarea\]\:h-auto:has(>textarea){height:auto}.ui\:aria-disabled\:pointer-events-none[aria-disabled=true]{pointer-events:none}.ui\:aria-disabled\:opacity-50[aria-disabled=true]{opacity:.5}.ui\:aria-invalid\:border-destructive[aria-invalid=true]{border-color:var(--destructive)}.ui\:aria-invalid\:ring-destructive\/20[aria-invalid=true]{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.ui\:aria-invalid\:ring-destructive\/20[aria-invalid=true]{--tw-ring-color:color-mix(in oklab,var(--destructive)20%,transparent)}}.ui\:aria-selected\:bg-accent[aria-selected=true]{background-color:var(--accent)}.ui\:aria-selected\:text-accent-foreground[aria-selected=true]{color:var(--accent-foreground)}:is(.ui\:\*\*\:data-command-group\:px-2 *)[data-command-group]{padding-inline:calc(var(--ui-spacing)*2)}:is(.ui\:\*\*\:data-command-input\:h-12 *)[data-command-input]{height:calc(var(--ui-spacing)*12)}:is(.ui\:\*\*\:data-command-item\:px-2 *)[data-command-item]{padding-inline:calc(var(--ui-spacing)*2)}:is(.ui\:\*\*\:data-command-item\:py-3 *)[data-command-item]{padding-block:calc(var(--ui-spacing)*3)}.ui\:data-disabled\:pointer-events-none[data-disabled]{pointer-events:none}.ui\:data-disabled\:cursor-not-allowed[data-disabled]{cursor:not-allowed}.ui\:data-disabled\:opacity-50[data-disabled]{opacity:.5}.ui\:data-highlighted\:bg-accent[data-highlighted]{background-color:var(--accent)}.ui\:data-highlighted\:text-accent-foreground[data-highlighted]{color:var(--accent-foreground)}.ui\:data-inset\:pl-8[data-inset]{padding-left:calc(var(--ui-spacing)*8)}.ui\:data-placeholder\:text-muted-foreground[data-placeholder]{color:var(--muted-foreground)}.ui\:data-\[active\=true\]\:bg-accent\/50[data-active=true]{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){.ui\:data-\[active\=true\]\:bg-accent\/50[data-active=true]{background-color:color-mix(in oklab,var(--accent)50%,transparent)}}.ui\:data-\[active\=true\]\:bg-sidebar-accent[data-active=true]{background-color:var(--sidebar-accent)}.ui\:data-\[active\=true\]\:font-medium[data-active=true]{--tw-font-weight:var(--ui-font-weight-medium);font-weight:var(--ui-font-weight-medium)}.ui\:data-\[active\=true\]\:text-accent-foreground[data-active=true]{color:var(--accent-foreground)}.ui\:data-\[active\=true\]\:text-sidebar-accent-foreground[data-active=true]{color:var(--sidebar-accent-foreground)}@media (hover:hover){.ui\:data-\[active\=true\]\:hover\:bg-accent[data-active=true]:hover{background-color:var(--accent)}}.ui\:data-\[active\=true\]\:focus\:bg-accent[data-active=true]:focus{background-color:var(--accent)}.ui\:data-\[current\=true\]\:bg-muted[data-current=true]{background-color:var(--muted)}.ui\:data-\[disabled\=true\]\:pointer-events-none[data-disabled=true]{pointer-events:none}.ui\:data-\[disabled\=true\]\:opacity-50[data-disabled=true]{opacity:.5}.ui\:data-\[inset\]\:pl-8[data-inset]{padding-left:calc(var(--ui-spacing)*8)}.ui\:data-\[invalid\=true\]\:text-destructive[data-invalid=true]{color:var(--destructive)}.ui\:data-\[motion\=from-end\]\:slide-in-from-end-52[data-motion=from-end]:where(:dir(ltr),[dir=ltr]){--tw-enter-translate-x:calc(52*var(--spacing))}.ui\:data-\[motion\=from-end\]\:slide-in-from-end-52[data-motion=from-end]:where(:dir(rtl),[dir=rtl]),.ui\:data-\[motion\=from-start\]\:slide-in-from-start-52[data-motion=from-start]:where(:dir(ltr),[dir=ltr]){--tw-enter-translate-x:calc(52*var(--spacing)*-1)}.ui\:data-\[motion\=from-start\]\:slide-in-from-start-52[data-motion=from-start]:where(:dir(rtl),[dir=rtl]){--tw-enter-translate-x:calc(52*var(--spacing))}.ui\:data-\[motion\=to-end\]\:slide-out-to-end-52[data-motion=to-end]:where(:dir(ltr),[dir=ltr]){--tw-exit-translate-x:calc(52*var(--spacing))}.ui\:data-\[motion\=to-end\]\:slide-out-to-end-52[data-motion=to-end]:where(:dir(rtl),[dir=rtl]),.ui\:data-\[motion\=to-start\]\:slide-out-to-start-52[data-motion=to-start]:where(:dir(ltr),[dir=ltr]){--tw-exit-translate-x:calc(52*var(--spacing)*-1)}.ui\:data-\[motion\=to-start\]\:slide-out-to-start-52[data-motion=to-start]:where(:dir(rtl),[dir=rtl]){--tw-exit-translate-x:calc(52*var(--spacing))}.ui\:data-\[motion\^\=from-\]\:animate-in[data-motion^=from-]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:data-\[motion\^\=from-\]\:fade-in[data-motion^=from-]{--tw-enter-opacity:0}.ui\:data-\[motion\^\=to-\]\:animate-out[data-motion^=to-]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:data-\[motion\^\=to-\]\:fade-out[data-motion^=to-]{--tw-exit-opacity:0}.ui\:data-\[orientation\=horizontal\]\:h-px[data-orientation=horizontal]{height:1px}.ui\:data-\[orientation\=horizontal\]\:w-full[data-orientation=horizontal]{width:100%}.ui\:data-\[orientation\=vertical\]\:h-auto[data-orientation=vertical]{height:auto}.ui\:data-\[orientation\=vertical\]\:h-full[data-orientation=vertical]{height:100%}.ui\:data-\[orientation\=vertical\]\:w-px[data-orientation=vertical]{width:1px}.ui\:data-\[side\=bottom\]\:-translate-x-1\/2[data-side=bottom]{--tw-translate-x:calc(calc(1/2*100%)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.ui\:data-\[side\=bottom\]\:-translate-y-\[calc\(-50\%\+1px\)\][data-side=bottom]{--tw-translate-y:calc(calc(-50% + 1px)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.ui\:data-\[side\=bottom\]\:translate-y-1[data-side=bottom]{--tw-translate-y:calc(var(--ui-spacing)*1);translate:var(--tw-translate-x)var(--tw-translate-y)}.ui\:data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom]{--tw-enter-translate-y:calc(2*var(--spacing)*-1)}.ui\:data-\[side\=left\]\:-translate-x-1[data-side=left]{--tw-translate-x:calc(var(--ui-spacing)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.ui\:data-\[side\=left\]\:-translate-y-\[calc\(50\%-3px\)\][data-side=left]{--tw-translate-y:calc(calc(50% - 3px)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.ui\:data-\[side\=left\]\:slide-in-from-end-2[data-side=left]:where(:dir(ltr),[dir=ltr]){--tw-enter-translate-x:calc(2*var(--spacing))}.ui\:data-\[side\=left\]\:slide-in-from-end-2[data-side=left]:where(:dir(rtl),[dir=rtl]){--tw-enter-translate-x:calc(2*var(--spacing)*-1)}.ui\:data-\[side\=left\]\:slide-in-from-right-2[data-side=left]{--tw-enter-translate-x:calc(2*var(--spacing))}.ui\:data-\[side\=right\]\:translate-x-1[data-side=right]{--tw-translate-x:calc(var(--ui-spacing)*1);translate:var(--tw-translate-x)var(--tw-translate-y)}.ui\:data-\[side\=right\]\:translate-x-\[calc\(50\%\+2px\)\][data-side=right]{--tw-translate-x:calc(50% + 2px);translate:var(--tw-translate-x)var(--tw-translate-y)}.ui\:data-\[side\=right\]\:translate-y-1\/2[data-side=right]{--tw-translate-y:calc(1/2*100%);translate:var(--tw-translate-x)var(--tw-translate-y)}.ui\:data-\[side\=right\]\:slide-in-from-start-2[data-side=right]:where(:dir(ltr),[dir=ltr]){--tw-enter-translate-x:calc(2*var(--spacing)*-1)}.ui\:data-\[side\=right\]\:slide-in-from-start-2[data-side=right]:where(:dir(rtl),[dir=rtl]){--tw-enter-translate-x:calc(2*var(--spacing))}.ui\:data-\[side\=right\]\:slide-in-from-left-2[data-side=right]{--tw-enter-translate-x:calc(2*var(--spacing)*-1)}.ui\:data-\[side\=top\]\:translate-x-1\/2[data-side=top]{--tw-translate-x:calc(1/2*100%);translate:var(--tw-translate-x)var(--tw-translate-y)}.ui\:data-\[side\=top\]\:-translate-y-1[data-side=top]{--tw-translate-y:calc(var(--ui-spacing)*-1);translate:var(--tw-translate-x)var(--tw-translate-y)}.ui\:data-\[side\=top\]\:translate-y-\[calc\(-50\%\+2px\)\][data-side=top]{--tw-translate-y:calc(-50% + 2px);translate:var(--tw-translate-x)var(--tw-translate-y)}.ui\:data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top]{--tw-enter-translate-y:calc(2*var(--spacing))}.ui\:data-\[size\=default\]\:h-9[data-size=default]{height:calc(var(--ui-spacing)*9)}.ui\:data-\[size\=sm\]\:h-8[data-size=sm]{height:calc(var(--ui-spacing)*8)}.ui\:data-\[slot\=checkbox-group\]\:gap-3[data-slot=checkbox-group]{gap:calc(var(--ui-spacing)*3)}:is(.ui\:\*\:data-\[slot\=field\]\:p-4>*)[data-slot=field]{padding:calc(var(--ui-spacing)*4)}:is(.ui\:\*\:data-\[slot\=field-group\]\:gap-4>*)[data-slot=field-group]{gap:calc(var(--ui-spacing)*4)}:is(.ui\:\*\*\:data-\[slot\=navigation-menu-link\]\:focus\:ring-0 *)[data-slot=navigation-menu-link]:focus{--tw-ring-shadow:var(--tw-ring-inset,)0 0 0 calc(0px + var(--tw-ring-offset-width))var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}:is(.ui\:\*\*\:data-\[slot\=navigation-menu-link\]\:focus\:outline-none *)[data-slot=navigation-menu-link]:focus{--tw-outline-style:none;outline-style:none}:is(.ui\:\*\*\:data-\[slot\=select-value\]\:line-clamp-1 *)[data-slot=select-value]{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}:is(.ui\:\*\*\:data-\[slot\=select-value\]\:flex *)[data-slot=select-value]{display:flex}:is(.ui\:\*\*\:data-\[slot\=select-value\]\:items-center *)[data-slot=select-value]{align-items:center}:is(.ui\:\*\*\:data-\[slot\=select-value\]\:gap-2 *)[data-slot=select-value]{gap:calc(var(--ui-spacing)*2)}.ui\:data-\[state\=active\]\:bg-background[data-state=active]{background-color:var(--background)}.ui\:data-\[state\=active\]\:shadow-sm[data-state=active]{--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)}.ui\:data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\][data-state=checked]{--tw-translate-x:calc(100% - 2px);translate:var(--tw-translate-x)var(--tw-translate-y)}.ui\:data-\[state\=checked\]\:border-primary[data-state=checked]{border-color:var(--primary)}.ui\:data-\[state\=checked\]\:bg-primary[data-state=checked]{background-color:var(--primary)}.ui\:data-\[state\=checked\]\:text-primary-foreground[data-state=checked]{color:var(--primary-foreground)}.ui\:data-\[state\=closed\]\:animate-accordion-up[data-state=closed]{animation:accordion-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:data-\[state\=closed\]\:animate-out[data-state=closed]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:data-\[state\=closed\]\:duration-300[data-state=closed]{--tw-duration:.3s;transition-duration:.3s}.ui\:data-\[state\=closed\]\:fade-out-0[data-state=closed]{--tw-exit-opacity:0}.ui\:data-\[state\=closed\]\:zoom-out-95[data-state=closed]{--tw-exit-scale:.95}.ui\:data-\[state\=closed\]\:slide-out-to-bottom[data-state=closed]{--tw-exit-translate-y:100%}.ui\:data-\[state\=closed\]\:slide-out-to-left[data-state=closed]{--tw-exit-translate-x:-100%}.ui\:data-\[state\=closed\]\:slide-out-to-right[data-state=closed]{--tw-exit-translate-x:100%}.ui\:data-\[state\=closed\]\:slide-out-to-top[data-state=closed]{--tw-exit-translate-y:-100%}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:animate-out:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *)[data-state=closed]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:fade-out-0:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *)[data-state=closed]{--tw-exit-opacity:0}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:zoom-out-95:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *)[data-state=closed]{--tw-exit-scale:.95}.ui\:data-\[state\=hidden\]\:animate-out[data-state=hidden]{animation:exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:data-\[state\=hidden\]\:fade-out[data-state=hidden]{--tw-exit-opacity:0}.ui\:data-\[state\=off\]\:text-muted-foreground[data-state=off]{color:var(--muted-foreground)}@media (hover:hover){.ui\:hover\:data-\[state\=off\]\:text-accent-foreground:hover[data-state=off]{color:var(--accent-foreground)}}.ui\:data-\[state\=on\]\:bg-accent[data-state=on]{background-color:var(--accent)}.ui\:data-\[state\=on\]\:bg-transparent[data-state=on]{background-color:#0000}.ui\:data-\[state\=on\]\:text-accent-foreground[data-state=on]{color:var(--accent-foreground)}.ui\:data-\[state\=on\]\:text-muted-foreground[data-state=on]{color:var(--muted-foreground)}@media (hover:hover){.ui\:hover\:data-\[state\=on\]\:text-accent-foreground:hover[data-state=on]{color:var(--accent-foreground)}}.ui\:data-\[state\=open\]\:animate-accordion-down[data-state=open]{animation:accordion-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:data-\[state\=open\]\:animate-in[data-state=open]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:data-\[state\=open\]\:bg-accent[data-state=open]{background-color:var(--accent)}.ui\:data-\[state\=open\]\:text-accent-foreground[data-state=open]{color:var(--accent-foreground)}.ui\:data-\[state\=open\]\:opacity-100[data-state=open]{opacity:1}.ui\:data-\[state\=open\]\:duration-500[data-state=open]{--tw-duration:.5s;transition-duration:.5s}.ui\:data-\[state\=open\]\:fade-in-0[data-state=open]{--tw-enter-opacity:0}.ui\:data-\[state\=open\]\:zoom-in-90[data-state=open]{--tw-enter-scale:.9}.ui\:data-\[state\=open\]\:zoom-in-95[data-state=open]{--tw-enter-scale:.95}.ui\:data-\[state\=open\]\:slide-in-from-bottom[data-state=open]{--tw-enter-translate-y:100%}.ui\:data-\[state\=open\]\:slide-in-from-left[data-state=open]{--tw-enter-translate-x:-100%}.ui\:data-\[state\=open\]\:slide-in-from-right[data-state=open]{--tw-enter-translate-x:100%}.ui\:data-\[state\=open\]\:slide-in-from-top[data-state=open]{--tw-enter-translate-y:-100%}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:animate-in:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *)[data-state=open]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:fade-in-0:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *)[data-state=open]{--tw-enter-opacity:0}.ui\:group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:zoom-in-95:is(:where(.ui\:group\/navigation-menu)[data-viewport=false] *)[data-state=open]{--tw-enter-scale:.95}@media (hover:hover){.ui\:data-\[state\=open\]\:hover\:bg-sidebar-accent[data-state=open]:hover{background-color:var(--sidebar-accent)}.ui\:data-\[state\=open\]\:hover\:text-sidebar-accent-foreground[data-state=open]:hover{color:var(--sidebar-accent-foreground)}}.ui\:data-\[state\=selected\]\:bg-muted[data-state=selected]{background-color:var(--muted)}.ui\:data-\[state\=unchecked\]\:translate-x-0[data-state=unchecked]{--tw-translate-x:calc(var(--ui-spacing)*0);translate:var(--tw-translate-x)var(--tw-translate-y)}.ui\:data-\[state\=unchecked\]\:bg-input[data-state=unchecked]{background-color:var(--input)}.ui\:data-\[state\=visible\]\:animate-in[data-state=visible]{animation:enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none)}.ui\:data-\[state\=visible\]\:fade-in[data-state=visible]{--tw-enter-opacity:0}.ui\:data-\[variant\=destructive\]\:text-destructive[data-variant=destructive]{color:var(--destructive)}.ui\:data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant=destructive]:focus{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.ui\:data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant=destructive]:focus{background-color:color-mix(in oklab,var(--destructive)10%,transparent)}}.ui\:data-\[variant\=destructive\]\:focus\:text-destructive[data-variant=destructive]:focus{color:var(--destructive)}.ui\:data-\[variant\=destructive\]\:data-highlighted\:bg-destructive\/10[data-variant=destructive][data-highlighted]{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.ui\:data-\[variant\=destructive\]\:data-highlighted\:bg-destructive\/10[data-variant=destructive][data-highlighted]{background-color:color-mix(in oklab,var(--destructive)10%,transparent)}}.ui\:data-\[variant\=destructive\]\:data-highlighted\:text-destructive[data-variant=destructive][data-highlighted]{color:var(--destructive)}.ui\:data-\[variant\=label\]\:text-sm[data-variant=label]{font-size:var(--ui-text-sm);line-height:var(--tw-leading,var(--ui-text-sm--line-height))}.ui\:data-\[variant\=legend\]\:text-base[data-variant=legend]{font-size:var(--ui-text-base);line-height:var(--tw-leading,var(--ui-text-base--line-height))}.ui\:data-\[vaul-drawer-direction\=bottom\]\:inset-x-0[data-vaul-drawer-direction=bottom]{inset-inline:calc(var(--ui-spacing)*0)}.ui\:data-\[vaul-drawer-direction\=bottom\]\:bottom-0[data-vaul-drawer-direction=bottom]{bottom:calc(var(--ui-spacing)*0)}.ui\:data-\[vaul-drawer-direction\=bottom\]\:mt-24[data-vaul-drawer-direction=bottom]{margin-top:calc(var(--ui-spacing)*24)}.ui\:data-\[vaul-drawer-direction\=bottom\]\:max-h-\[80vh\][data-vaul-drawer-direction=bottom]{max-height:80vh}.ui\:data-\[vaul-drawer-direction\=bottom\]\:rounded-t-lg[data-vaul-drawer-direction=bottom]{border-top-left-radius:var(--radius);border-top-right-radius:var(--radius)}.ui\:data-\[vaul-drawer-direction\=bottom\]\:border-t[data-vaul-drawer-direction=bottom]{border-top-style:var(--tw-border-style);border-top-width:1px}.ui\:data-\[vaul-drawer-direction\=left\]\:inset-y-0[data-vaul-drawer-direction=left]{inset-block:calc(var(--ui-spacing)*0)}.ui\:data-\[vaul-drawer-direction\=left\]\:start-0[data-vaul-drawer-direction=left]{inset-inline-start:calc(var(--ui-spacing)*0)}.ui\:data-\[vaul-drawer-direction\=left\]\:w-3\/4[data-vaul-drawer-direction=left]{width:75%}.ui\:data-\[vaul-drawer-direction\=left\]\:border-e[data-vaul-drawer-direction=left]{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}.ui\:data-\[vaul-drawer-direction\=right\]\:inset-y-0[data-vaul-drawer-direction=right]{inset-block:calc(var(--ui-spacing)*0)}.ui\:data-\[vaul-drawer-direction\=right\]\:end-0[data-vaul-drawer-direction=right]{inset-inline-end:calc(var(--ui-spacing)*0)}.ui\:data-\[vaul-drawer-direction\=right\]\:w-3\/4[data-vaul-drawer-direction=right]{width:75%}.ui\:data-\[vaul-drawer-direction\=right\]\:border-s[data-vaul-drawer-direction=right]{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px}.ui\:data-\[vaul-drawer-direction\=top\]\:inset-x-0[data-vaul-drawer-direction=top]{inset-inline:calc(var(--ui-spacing)*0)}.ui\:data-\[vaul-drawer-direction\=top\]\:top-0[data-vaul-drawer-direction=top]{top:calc(var(--ui-spacing)*0)}.ui\:data-\[vaul-drawer-direction\=top\]\:mb-24[data-vaul-drawer-direction=top]{margin-bottom:calc(var(--ui-spacing)*24)}.ui\:data-\[vaul-drawer-direction\=top\]\:max-h-\[80vh\][data-vaul-drawer-direction=top]{max-height:80vh}.ui\:data-\[vaul-drawer-direction\=top\]\:rounded-b-lg[data-vaul-drawer-direction=top]{border-bottom-right-radius:var(--radius);border-bottom-left-radius:var(--radius)}.ui\:data-\[vaul-drawer-direction\=top\]\:border-b[data-vaul-drawer-direction=top]{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.ui\:nth-last-2\:-mt-1:nth-last-child(2){margin-top:calc(var(--ui-spacing)*-1)}@media (min-width:40rem){.ui\:sm\:flex{display:flex}.ui\:sm\:max-w-lg{max-width:var(--ui-container-lg)}.ui\:sm\:max-w-sm{max-width:var(--ui-container-sm)}.ui\:sm\:flex-row{flex-direction:row}.ui\:sm\:justify-end{justify-content:flex-end}.ui\:sm\:gap-2\.5{gap:calc(var(--ui-spacing)*2.5)}.ui\:sm\:pr-2\.5{padding-right:calc(var(--ui-spacing)*2.5)}.ui\:sm\:pl-2\.5{padding-left:calc(var(--ui-spacing)*2.5)}.ui\:data-\[vaul-drawer-direction\=left\]\:sm\:max-w-sm[data-vaul-drawer-direction=left],.ui\:data-\[vaul-drawer-direction\=right\]\:sm\:max-w-sm[data-vaul-drawer-direction=right]{max-width:var(--ui-container-sm)}}@media (min-width:48rem){.ui\:md\:block{display:block}.ui\:md\:flex{display:flex}.ui\:md\:p-12{padding:calc(var(--ui-spacing)*12)}.ui\:md\:text-sm{font-size:var(--ui-text-sm);line-height:var(--tw-leading,var(--ui-text-sm--line-height))}.ui\:md\:opacity-0{opacity:0}.ui\:md\:peer-data-\[variant\=inset\]\:m-2:is(:where(.ui\:peer)[data-variant=inset]~*){margin:calc(var(--ui-spacing)*2)}.ui\:md\:peer-data-\[variant\=inset\]\:ml-0:is(:where(.ui\:peer)[data-variant=inset]~*){margin-left:calc(var(--ui-spacing)*0)}.ui\:md\:peer-data-\[variant\=inset\]\:rounded-xl:is(:where(.ui\:peer)[data-variant=inset]~*){border-radius:calc(var(--radius) + 4px)}.ui\:md\:peer-data-\[variant\=inset\]\:shadow-sm:is(:where(.ui\:peer)[data-variant=inset]~*){--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)}.ui\:md\:peer-data-\[variant\=inset\]\:peer-data-\[state\=collapsed\]\:ml-2:is(:where(.ui\:peer)[data-variant=inset]~*):is(:where(.ui\:peer)[data-state=collapsed]~*){margin-left:calc(var(--ui-spacing)*2)}.ui\:md\:after\:hidden:after{content:var(--tw-content);display:none}}.ui\:dark\:scale-0:where(.dark,.dark *){--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x)var(--tw-scale-y)}.ui\:dark\:scale-100:where(.dark,.dark *){--tw-scale-x:100%;--tw-scale-y:100%;--tw-scale-z:100%;scale:var(--tw-scale-x)var(--tw-scale-y)}.ui\:dark\:-rotate-90:where(.dark,.dark *){rotate:-90deg}.ui\:dark\:rotate-0:where(.dark,.dark *){rotate:none}.ui\:dark\:border-input:where(.dark,.dark *){border-color:var(--input)}.ui\:dark\:bg-destructive\/60:where(.dark,.dark *){background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:bg-destructive\/60:where(.dark,.dark *){background-color:color-mix(in oklab,var(--destructive)60%,transparent)}}.ui\:dark\:bg-destructive\/70:where(.dark,.dark *){background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:bg-destructive\/70:where(.dark,.dark *){background-color:color-mix(in oklab,var(--destructive)70%,transparent)}}.ui\:dark\:bg-input\/30:where(.dark,.dark *){background-color:var(--input)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:bg-input\/30:where(.dark,.dark *){background-color:color-mix(in oklab,var(--input)30%,transparent)}}.ui\:dark\:bg-transparent:where(.dark,.dark *){background-color:#0000}.ui\:dark\:text-muted-foreground:where(.dark,.dark *){color:var(--muted-foreground)}@media (hover:hover){.ui\:dark\:hover\:bg-input\/50:where(.dark,.dark *):hover{background-color:var(--input)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:hover\:bg-input\/50:where(.dark,.dark *):hover{background-color:color-mix(in oklab,var(--input)50%,transparent)}}}.ui\:dark\:focus-visible\:ring-destructive\/40:where(.dark,.dark *):focus-visible{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:focus-visible\:ring-destructive\/40:where(.dark,.dark *):focus-visible{--tw-ring-color:color-mix(in oklab,var(--destructive)40%,transparent)}}:where([data-slot=tooltip-content]) .ui\:dark\:in-data-\[slot\=tooltip-content\]\:bg-background\/10:where(.dark,.dark *){background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){:where([data-slot=tooltip-content]) .ui\:dark\:in-data-\[slot\=tooltip-content\]\:bg-background\/10:where(.dark,.dark *){background-color:color-mix(in oklab,var(--background)10%,transparent)}}.ui\:dark\:has-data-\[state\=checked\]\:bg-primary\/10:where(.dark,.dark *):has([data-state=checked]){background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:has-data-\[state\=checked\]\:bg-primary\/10:where(.dark,.dark *):has([data-state=checked]){background-color:color-mix(in oklab,var(--primary)10%,transparent)}}.ui\:dark\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/40:where(.dark,.dark *):has([data-slot][aria-invalid=true]){--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/40:where(.dark,.dark *):has([data-slot][aria-invalid=true]){--tw-ring-color:color-mix(in oklab,var(--destructive)40%,transparent)}}.ui\:dark\:aria-invalid\:ring-destructive\/40:where(.dark,.dark *)[aria-invalid=true]{--tw-ring-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:aria-invalid\:ring-destructive\/40:where(.dark,.dark *)[aria-invalid=true]{--tw-ring-color:color-mix(in oklab,var(--destructive)40%,transparent)}}.ui\:dark\:data-\[state\=active\]\:border-input:where(.dark,.dark *)[data-state=active]{border-color:var(--input)}.ui\:dark\:data-\[state\=active\]\:bg-input\/30:where(.dark,.dark *)[data-state=active]{background-color:var(--input)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:data-\[state\=active\]\:bg-input\/30:where(.dark,.dark *)[data-state=active]{background-color:color-mix(in oklab,var(--input)30%,transparent)}}.ui\:dark\:data-\[state\=active\]\:text-foreground:where(.dark,.dark *)[data-state=active]{color:var(--foreground)}.ui\:dark\:data-\[state\=checked\]\:bg-primary:where(.dark,.dark *)[data-state=checked]{background-color:var(--primary)}.ui\:dark\:data-\[state\=checked\]\:bg-primary-foreground:where(.dark,.dark *)[data-state=checked]{background-color:var(--primary-foreground)}.ui\:dark\:data-\[state\=unchecked\]\:bg-foreground:where(.dark,.dark *)[data-state=unchecked]{background-color:var(--foreground)}.ui\:dark\:data-\[state\=unchecked\]\:bg-input\/80:where(.dark,.dark *)[data-state=unchecked]{background-color:var(--input)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:data-\[state\=unchecked\]\:bg-input\/80:where(.dark,.dark *)[data-state=unchecked]{background-color:color-mix(in oklab,var(--input)80%,transparent)}}.ui\:\[\&_\[data-command-group\]\:not\(\[hidden\]\)_\~\[data-command-group\]\]\:pt-0 [data-command-group]:not([hidden])~[data-command-group]{padding-top:calc(var(--ui-spacing)*0)}.ui\:\[\&_\[data-command-input-wrapper\]_svg\]\:h-5 [data-command-input-wrapper] svg{height:calc(var(--ui-spacing)*5)}.ui\:\[\&_\[data-command-input-wrapper\]_svg\]\:w-5 [data-command-input-wrapper] svg{width:calc(var(--ui-spacing)*5)}.ui\:\[\&_\[data-command-item\]_svg\]\:h-5 [data-command-item] svg{height:calc(var(--ui-spacing)*5)}.ui\:\[\&_\[data-command-item\]_svg\]\:w-5 [data-command-item] svg{width:calc(var(--ui-spacing)*5)}.ui\:\[\&_img\]\:size-full img{width:100%;height:100%}.ui\:\[\&_img\]\:object-cover img{object-fit:cover}.ui\:\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.ui\:\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.ui\:\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3 svg:not([class*=size-]){width:calc(var(--ui-spacing)*3);height:calc(var(--ui-spacing)*3)}.ui\:\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]){width:calc(var(--ui-spacing)*4);height:calc(var(--ui-spacing)*4)}.ui\:\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-6 svg:not([class*=size-]){width:calc(var(--ui-spacing)*6);height:calc(var(--ui-spacing)*6)}.ui\:\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*=text-]){color:var(--muted-foreground)}.ui\:\[\&_tr\]\:border-b tr{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.ui\:\[\&_tr\:last-child\]\:border-0 tr:last-child{border-style:var(--tw-border-style);border-width:0}.ui\:\[\&\+\[data-slot\=item-content\]\]\:flex-none+[data-slot=item-content]{flex:none}.ui\:\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]){padding-right:calc(var(--ui-spacing)*0)}.ui\:\[\.border-b\]\:pb-3.border-b{padding-bottom:calc(var(--ui-spacing)*3)}.ui\:\[\.border-b\]\:pb-6.border-b{padding-bottom:calc(var(--ui-spacing)*6)}.ui\:\[\.border-t\]\:pt-3.border-t{padding-top:calc(var(--ui-spacing)*3)}.ui\:\[\.border-t\]\:pt-6.border-t{padding-top:calc(var(--ui-spacing)*6)}.ui\:\[a\]\:transition-colors:is(a){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(--ui-default-transition-timing-function));transition-duration:var(--tw-duration,var(--ui-default-transition-duration))}@media (hover:hover){.ui\:\[a\]\:hover\:bg-accent\/50:is(a):hover{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){.ui\:\[a\]\:hover\:bg-accent\/50:is(a):hover{background-color:color-mix(in oklab,var(--accent)50%,transparent)}}}:is(.ui\:\*\:\[span\]\:last\:flex>*):is(span):last-child{display:flex}:is(.ui\:\*\:\[span\]\:last\:items-center>*):is(span):last-child{align-items:center}:is(.ui\:\*\:\[span\]\:last\:gap-2>*):is(span):last-child{gap:calc(var(--ui-spacing)*2)}:is(.ui\:data-\[variant\=destructive\]\:\*\:\[svg\]\:text-destructive\![data-variant=destructive]>*):is(svg){color:var(--destructive)!important}.ui\:\[\&\>\*\]\:focus-visible\:relative>:focus-visible{position:relative}.ui\:\[\&\>\*\]\:focus-visible\:z-10>:focus-visible{z-index:10}.ui\:\[\&\>\*\:not\(\:first-child\)\]\:rounded-s-none>:not(:first-child){border-start-start-radius:0;border-end-start-radius:0}.ui\:\[\&\>\*\:not\(\:first-child\)\]\:rounded-t-none>:not(:first-child){border-top-left-radius:0;border-top-right-radius:0}.ui\:\[\&\>\*\:not\(\:first-child\)\]\:border-s-0>:not(:first-child){border-inline-start-style:var(--tw-border-style);border-inline-start-width:0}.ui\:\[\&\>\*\:not\(\:first-child\)\]\:border-t-0>:not(:first-child){border-top-style:var(--tw-border-style);border-top-width:0}.ui\:\[\&\>\*\:not\(\:last-child\)\]\:rounded-e-none>:not(:last-child){border-start-end-radius:0;border-end-end-radius:0}.ui\:\[\&\>\*\:not\(\:last-child\)\]\:rounded-b-none>:not(:last-child){border-bottom-right-radius:0;border-bottom-left-radius:0}.ui\:has-\[select\[aria-hidden\=true\]\:last-child\]\:\[\&\>\[data-slot\=select-trigger\]\:last-of-type\]\:rounded-e-md:has(:is(select[aria-hidden=true]:last-child))>[data-slot=select-trigger]:last-of-type{border-start-end-radius:calc(var(--radius) - 2px);border-end-end-radius:calc(var(--radius) - 2px)}.ui\:\[\&\>\[data-slot\=select-trigger\]\:not\(\[class\*\=\'w-\'\]\)\]\:w-fit>[data-slot=select-trigger]:not([class*=w-]){width:fit-content}.ui\:has-\[\>\[data-slot\=field-content\]\]\:\[\&\>\[role\=checkbox\]\,\[role\=radio\]\]\:mt-px:has(>[data-slot=field-content])>[role=checkbox],.ui\:has-\[\>\[data-slot\=field-content\]\]\:\[\&\>\[role\=checkbox\]\,\[role\=radio\]\]\:mt-px:has(>[data-slot=field-content]) [role=radio]{margin-top:1px}.ui\:\[\&\>a\]\:underline>a{text-decoration-line:underline}.ui\:\[\&\>a\]\:underline-offset-4>a{text-underline-offset:4px}.ui\:\[\&\>a\:hover\]\:text-primary>a:hover{color:var(--primary)}.ui\:\[\&\>button\]\:hidden>button{display:none}.ui\:\[\&\>input\]\:flex-1>input{flex:1}.ui\:has-\[\>\[data-align\=block-end\]\]\:\[\&\>input\]\:pt-3:has(>[data-align=block-end])>input{padding-top:calc(var(--ui-spacing)*3)}.ui\:has-\[\>\[data-align\=block-start\]\]\:\[\&\>input\]\:pb-3:has(>[data-align=block-start])>input{padding-bottom:calc(var(--ui-spacing)*3)}.ui\:has-\[\>\[data-align\=inline-end\]\]\:\[\&\>input\]\:pe-2:has(>[data-align=inline-end])>input{padding-inline-end:calc(var(--ui-spacing)*2)}.ui\:has-\[\>\[data-align\=inline-start\]\]\:\[\&\>input\]\:ps-2:has(>[data-align=inline-start])>input{padding-inline-start:calc(var(--ui-spacing)*2)}.ui\:\[\&\>kbd\]\:rounded-\[calc\(var\(--radius\)-5px\)\]>kbd{border-radius:calc(var(--radius) - 5px)}.ui\:\[\&\>span\:last-child\]\:truncate>span:last-child{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.ui\:\[\&\>svg\]\:pointer-events-none>svg{pointer-events:none}.ui\:\[\&\>svg\]\:size-2\.5>svg{width:calc(var(--ui-spacing)*2.5);height:calc(var(--ui-spacing)*2.5)}.ui\:\[\&\>svg\]\:size-3>svg{width:calc(var(--ui-spacing)*3);height:calc(var(--ui-spacing)*3)}.ui\:\[\&\>svg\]\:size-3\.5>svg{width:calc(var(--ui-spacing)*3.5);height:calc(var(--ui-spacing)*3.5)}.ui\:\[\&\>svg\]\:size-4>svg{width:calc(var(--ui-spacing)*4);height:calc(var(--ui-spacing)*4)}.ui\:\[\&\>svg\]\:shrink-0>svg{flex-shrink:0}.ui\:\[\&\>svg\]\:text-muted-foreground>svg{color:var(--muted-foreground)}.ui\:\[\&\>svg\]\:text-sidebar-accent-foreground>svg{color:var(--sidebar-accent-foreground)}.ui\:\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5>svg:not([class*=size-]){width:calc(var(--ui-spacing)*3.5);height:calc(var(--ui-spacing)*3.5)}.ui\:\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4>svg:not([class*=size-]){width:calc(var(--ui-spacing)*4);height:calc(var(--ui-spacing)*4)}@media (hover:hover){:is(.ui\:hover\:\[\&\,\&\>svelte-css-wrapper\]\:\[\&\>th\,td\]\:bg-muted\/50:hover,.ui\:hover\:\[\&\,\&\>svelte-css-wrapper\]\:\[\&\>th\,td\]\:bg-muted\/50:hover>svelte-css-wrapper)>th,:is(.ui\:hover\:\[\&\,\&\>svelte-css-wrapper\]\:\[\&\>th\,td\]\:bg-muted\/50:hover,.ui\:hover\:\[\&\,\&\>svelte-css-wrapper\]\:\[\&\>th\,td\]\:bg-muted\/50:hover>svelte-css-wrapper) td{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){:is(.ui\:hover\:\[\&\,\&\>svelte-css-wrapper\]\:\[\&\>th\,td\]\:bg-muted\/50:hover,.ui\:hover\:\[\&\,\&\>svelte-css-wrapper\]\:\[\&\>th\,td\]\:bg-muted\/50:hover>svelte-css-wrapper)>th,:is(.ui\:hover\:\[\&\,\&\>svelte-css-wrapper\]\:\[\&\>th\,td\]\:bg-muted\/50:hover,.ui\:hover\:\[\&\,\&\>svelte-css-wrapper\]\:\[\&\>th\,td\]\:bg-muted\/50:hover>svelte-css-wrapper) td{background-color:color-mix(in oklab,var(--muted)50%,transparent)}}}.ui\:\[\&\>tr\]\:last\:border-b-0>tr:last-child{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.ui\:\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg{rotate:180deg}[data-side=left][data-collapsible=offcanvas] .ui\:\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2{right:calc(var(--ui-spacing)*-2)}[data-side=left][data-state=collapsed] .ui\:\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize{cursor:e-resize}[data-side=right][data-collapsible=offcanvas] .ui\:\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2{left:calc(var(--ui-spacing)*-2)}[data-side=right][data-state=collapsed] .ui\:\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize{cursor:w-resize}[data-variant=legend]+.ui\:\[\[data-variant\=legend\]\+\&\]\:-mt-1\.5{margin-top:calc(var(--ui-spacing)*-1.5)}@media (hover:hover){a.ui\:\[a\&\]\:hover\:bg-accent:hover{background-color:var(--accent)}a.ui\:\[a\&\]\:hover\:bg-destructive\/90:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){a.ui\:\[a\&\]\:hover\:bg-destructive\/90:hover{background-color:color-mix(in oklab,var(--destructive)90%,transparent)}}a.ui\:\[a\&\]\:hover\:bg-primary\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){a.ui\:\[a\&\]\:hover\:bg-primary\/90:hover{background-color:color-mix(in oklab,var(--primary)90%,transparent)}}a.ui\:\[a\&\]\:hover\:bg-secondary\/80:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab, red, red)){a.ui\:\[a\&\]\:hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab,var(--secondary)80%,transparent)}}a.ui\:\[a\&\]\:hover\:bg-secondary\/90:hover{background-color:var(--secondary)}@supports (color:color-mix(in lab, red, red)){a.ui\:\[a\&\]\:hover\:bg-secondary\/90:hover{background-color:color-mix(in oklab,var(--secondary)90%,transparent)}}a.ui\:\[a\&\]\:hover\:text-accent-foreground:hover{color:var(--accent-foreground)}a.ui\:\[a\&\]\:hover\:underline:hover{text-decoration-line:underline}a.ui\:dark\:\[a\&\]\:hover\:bg-accent\/50:where(.dark,.dark *):hover{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){a.ui\:dark\:\[a\&\]\:hover\:bg-accent\/50:where(.dark,.dark *):hover{background-color:color-mix(in oklab,var(--accent)50%,transparent)}}}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}:root{--radius:.625rem;--background:oklch(100% 0 0);--foreground:oklch(14.7% .004 49.25);--card:oklch(100% 0 0);--card-foreground:oklch(14.7% .004 49.25);--popover:oklch(100% 0 0);--popover-foreground:oklch(14.7% .004 49.25);--primary:oklch(21.6% .006 56.043);--primary-foreground:oklch(98.5% .001 106.423);--secondary:oklch(97% .001 106.424);--secondary-foreground:oklch(21.6% .006 56.043);--muted:oklch(97% .001 106.424);--muted-foreground:oklch(55.3% .013 58.071);--accent:oklch(96.7% .001 286.375);--accent-foreground:oklch(21.6% .006 56.043);--destructive:oklch(57.7% .245 27.325);--border:oklch(92.3% .003 48.717);--input:oklch(92.3% .003 48.717);--ring:oklch(70.9% .01 56.259);--chart-1:oklch(64.6% .222 41.116);--chart-2:oklch(60% .118 184.704);--chart-3:oklch(39.8% .07 227.392);--chart-4:oklch(82.8% .189 84.429);--chart-5:oklch(76.9% .188 70.08);--sidebar:oklch(100% 0 0);--sidebar-foreground:oklch(14.7% .004 49.25);--sidebar-primary:oklch(21.6% .006 56.043);--sidebar-primary-foreground:oklch(98.5% .001 106.423);--sidebar-accent:oklch(97% .001 106.424);--sidebar-accent-foreground:oklch(21.6% .006 56.043);--sidebar-border:oklch(92.3% .003 48.717);--sidebar-ring:oklch(70.9% .01 56.259)}.dark{--background:oklch(14.7% .004 49.25);--foreground:oklch(98.5% .001 106.423);--card:oklch(21.6% .006 56.043);--card-foreground:oklch(98.5% .001 106.423);--popover:oklch(21.6% .006 56.043);--popover-foreground:oklch(98.5% .001 106.423);--primary:oklch(92.3% .003 48.717);--primary-foreground:oklch(21.6% .006 56.043);--secondary:oklch(26.8% .007 34.298);--secondary-foreground:oklch(98.5% .001 106.423);--muted:oklch(26.8% .007 34.298);--muted-foreground:oklch(70.9% .01 56.259);--accent:oklch(26.8% .007 34.298);--accent-foreground:oklch(98.5% .001 106.423);--destructive:oklch(70.4% .191 22.216);--border:oklch(100% 0 0/.1);--input:oklch(100% 0 0/.15);--ring:oklch(55.3% .013 58.071);--chart-1:oklch(48.8% .243 264.376);--chart-2:oklch(69.6% .17 162.48);--chart-3:oklch(76.9% .188 70.08);--chart-4:oklch(62.7% .265 303.9);--chart-5:oklch(64.5% .246 16.439);--sidebar:oklch(0% 0 0);--sidebar-foreground:oklch(98.5% .001 106.423);--sidebar-primary:oklch(48.8% .243 264.376);--sidebar-primary-foreground:oklch(98.5% .001 106.423);--sidebar-accent:oklch(26.8% .007 34.298);--sidebar-accent-foreground:oklch(98.5% .001 106.423);--sidebar-border:oklch(100% 0 0/.1);--sidebar-ring:oklch(55.3% .013 58.071)}@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-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-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-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.5}}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0));filter:blur(var(--tw-enter-blur,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0));filter:blur(var(--tw-exit-blur,0))}}@keyframes accordion-down{0%{height:0}to{height:var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto)))))}}@keyframes accordion-up{0%{height:var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto)))))}to{height:0}}
\ No newline at end of file
+@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-border-style: solid;
+      --tw-leading: initial;
+      --tw-font-weight: initial;
+      --tw-tracking: 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-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-outline-style: solid;
+      --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;
+    }
+  }
+}
+@layer theme {
+  :root,
+  :host {
+    --ui-font-sans:
+      ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    --ui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+    --ui-color-red-500: oklch(63.7% 0.237 25.331);
+    --ui-color-yellow-500: oklch(79.5% 0.184 86.047);
+    --ui-color-green-500: oklch(72.3% 0.219 149.579);
+    --ui-color-black: #000;
+    --ui-color-white: #fff;
+    --ui-spacing: 0.25rem;
+    --ui-container-sm: 24rem;
+    --ui-container-lg: 32rem;
+    --ui-container-3xl: 48rem;
+    --ui-text-xs: 0.75rem;
+    --ui-text-xs--line-height: calc(1 / 0.75);
+    --ui-text-sm: 0.875rem;
+    --ui-text-sm--line-height: calc(1.25 / 0.875);
+    --ui-text-base: 1rem;
+    --ui-text-base--line-height: calc(1.5 / 1);
+    --ui-text-lg: 1.125rem;
+    --ui-text-lg--line-height: calc(1.75 / 1.125);
+    --ui-text-2xl: 1.5rem;
+    --ui-text-2xl--line-height: calc(2 / 1.5);
+    --ui-font-weight-normal: 400;
+    --ui-font-weight-medium: 500;
+    --ui-font-weight-semibold: 600;
+    --ui-tracking-tight: -0.025em;
+    --ui-tracking-widest: 0.1em;
+    --ui-leading-snug: 1.375;
+    --ui-leading-normal: 1.5;
+    --ui-leading-relaxed: 1.625;
+    --ui-radius-xs: 0.125rem;
+    --ui-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+    --ui-animate-spin: spin 1s linear infinite;
+    --ui-animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    --ui-blur-sm: 8px;
+    --ui-default-transition-duration: 0.15s;
+    --ui-default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --ui-default-mono-font-family: var(--ui-font-mono);
+  }
+}
+@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(
+      --font-cio,
+      ui-sans-serif,
+      system-ui,
+      sans-serif,
+      'Apple Color Emoji',
+      'Segoe UI Emoji',
+      'Segoe UI Symbol',
+      'Noto Color Emoji'
+    );
+    font-feature-settings: var(--ui-default-font-feature-settings, normal);
+    font-variation-settings: var(--ui-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(
+      --ui-default-mono-font-family,
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      Consolas,
+      'Liberation Mono',
+      'Courier New',
+      monospace
+    );
+    font-feature-settings: var(--ui-default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--ui-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 {
+    display: inline-flex;
+  }
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+  ::-webkit-datetime-edit {
+    padding-block: 0;
+  }
+  ::-webkit-datetime-edit-year-field {
+    padding-block: 0;
+  }
+  ::-webkit-datetime-edit-month-field {
+    padding-block: 0;
+  }
+  ::-webkit-datetime-edit-day-field {
+    padding-block: 0;
+  }
+  ::-webkit-datetime-edit-hour-field {
+    padding-block: 0;
+  }
+  ::-webkit-datetime-edit-minute-field {
+    padding-block: 0;
+  }
+  ::-webkit-datetime-edit-second-field {
+    padding-block: 0;
+  }
+  ::-webkit-datetime-edit-millisecond-field {
+    padding-block: 0;
+  }
+  ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button,
+  input:where([type='button'], [type='reset'], [type='submit']) {
+    appearance: button;
+  }
+  ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button {
+    height: auto;
+  }
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden='until-found'])) {
+    display: none !important;
+  }
+  * {
+    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);
+    }
+  }
+  body {
+    background-color: var(--background);
+    font-family: var(--font-sans);
+    color: var(--foreground);
+  }
+  button,
+  input,
+  select,
+  optgroup,
+  textarea {
+    font-family: var(--font-sans);
+  }
+  ::file-selector-button {
+    font-family: var(--font-sans);
+  }
+  .toaster {
+    --normal-bg: var(--color-popover);
+    --normal-text: var(--color-popover-foreground);
+    --normal-border: var(--color-border);
+  }
+}
+@layer components;
+@layer utilities {
+  .ui\:\@container\/field-group {
+    container: field-group/inline-size;
+  }
+  .ui\:pointer-events-none {
+    pointer-events: none;
+  }
+  .ui\:sr-only {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+  }
+  .ui\:absolute {
+    position: absolute;
+  }
+  .ui\:fixed {
+    position: fixed;
+  }
+  .ui\:relative {
+    position: relative;
+  }
+  .ui\:inset-0 {
+    inset: calc(var(--ui-spacing) * 0);
+  }
+  .ui\:inset-x-0 {
+    inset-inline: calc(var(--ui-spacing) * 0);
+  }
+  .ui\:inset-y-0 {
+    inset-block: calc(var(--ui-spacing) * 0);
+  }
+  .ui\:start-0 {
+    inset-inline-start: calc(var(--ui-spacing) * 0);
+  }
+  .ui\:end-4 {
+    inset-inline-end: calc(var(--ui-spacing) * 4);
+  }
+  .ui\:-top-2 {
+    top: calc(var(--ui-spacing) * -2);
+  }
+  .ui\:top-0 {
+    top: calc(var(--ui-spacing) * 0);
+  }
+  .ui\:top-1\.5 {
+    top: calc(var(--ui-spacing) * 1.5);
+  }
+  .ui\:top-1\/2 {
+    top: 50%;
+  }
+  .ui\:top-2 {
+    top: calc(var(--ui-spacing) * 2);
+  }
+  .ui\:top-3\.5 {
+    top: calc(var(--ui-spacing) * 3.5);
+  }
+  .ui\:top-4 {
+    top: calc(var(--ui-spacing) * 4);
+  }
+  .ui\:top-\[50\%\] {
+    top: 50%;
+  }
+  .ui\:top-\[60\%\] {
+    top: 60%;
+  }
+  .ui\:top-full {
+    top: 100%;
+  }
+  .ui\:top-px {
+    top: 1px;
+  }
+  .ui\:right-0 {
+    right: calc(var(--ui-spacing) * 0);
+  }
+  .ui\:right-1 {
+    right: calc(var(--ui-spacing) * 1);
+  }
+  .ui\:right-2 {
+    right: calc(var(--ui-spacing) * 2);
+  }
+  .ui\:right-3 {
+    right: calc(var(--ui-spacing) * 3);
+  }
+  .ui\:right-4 {
+    right: calc(var(--ui-spacing) * 4);
+  }
+  .ui\:right-9 {
+    right: calc(var(--ui-spacing) * 9);
+  }
+  .ui\:-bottom-px {
+    bottom: -1px;
+  }
+  .ui\:bottom-0 {
+    bottom: calc(var(--ui-spacing) * 0);
+  }
+  .ui\:left-0 {
+    left: calc(var(--ui-spacing) * 0);
+  }
+  .ui\:left-1\/2 {
+    left: 50%;
+  }
+  .ui\:left-2 {
+    left: calc(var(--ui-spacing) * 2);
+  }
+  .ui\:left-\[50\%\] {
+    left: 50%;
+  }
+  .ui\:left-\[calc\(50\%-3rem\)\] {
+    left: calc(50% - 3rem);
+  }
+  .ui\:isolate {
+    isolation: isolate;
+  }
+  .ui\:z-1 {
+    z-index: 1;
+  }
+  .ui\:z-10 {
+    z-index: 10;
+  }
+  .ui\:z-20 {
+    z-index: 20;
+  }
+  .ui\:z-50 {
+    z-index: 50;
+  }
+  .ui\:z-999 {
+    z-index: 999;
+  }
+  .ui\:order-first {
+    order: -9999;
+  }
+  .ui\:order-last {
+    order: 9999;
+  }
+  .ui\:col-start-2 {
+    grid-column-start: 2;
+  }
+  .ui\:row-span-2 {
+    grid-row: span 2 / span 2;
+  }
+  .ui\:row-start-1 {
+    grid-row-start: 1;
+  }
+  .ui\:m-0 {
+    margin: calc(var(--ui-spacing) * 0);
+  }
+  .ui\:m-0\! {
+    margin: calc(var(--ui-spacing) * 0) !important;
+  }
+  .ui\:-mx-1 {
+    margin-inline: calc(var(--ui-spacing) * -1);
+  }
+  .ui\:mx-3\.5 {
+    margin-inline: calc(var(--ui-spacing) * 3.5);
+  }
+  .ui\:mx-auto {
+    margin-inline: auto;
+  }
+  .ui\:-my-2 {
+    margin-block: calc(var(--ui-spacing) * -2);
+  }
+  .ui\:my-0 {
+    margin-block: calc(var(--ui-spacing) * 0);
+  }
+  .ui\:my-0\.5 {
+    margin-block: calc(var(--ui-spacing) * 0.5);
+  }
+  .ui\:my-1 {
+    margin-block: calc(var(--ui-spacing) * 1);
+  }
+  .ui\:my-2 {
+    margin-block: calc(var(--ui-spacing) * 2);
+  }
+  .ui\:my-4 {
+    margin-block: calc(var(--ui-spacing) * 4);
+  }
+  .ui\:ms-1 {
+    margin-inline-start: calc(var(--ui-spacing) * 1);
+  }
+  .ui\:ms-4 {
+    margin-inline-start: calc(var(--ui-spacing) * 4);
+  }
+  .ui\:mt-1 {
+    margin-top: calc(var(--ui-spacing) * 1);
+  }
+  .ui\:mt-1\.5 {
+    margin-top: calc(var(--ui-spacing) * 1.5);
+  }
+  .ui\:mt-3 {
+    margin-top: calc(var(--ui-spacing) * 3);
+  }
+  .ui\:mt-4 {
+    margin-top: calc(var(--ui-spacing) * 4);
+  }
+  .ui\:mt-auto {
+    margin-top: auto;
+  }
+  .ui\:mr-1 {
+    margin-right: calc(var(--ui-spacing) * 1);
+  }
+  .ui\:mb-2 {
+    margin-bottom: calc(var(--ui-spacing) * 2);
+  }
+  .ui\:mb-3 {
+    margin-bottom: calc(var(--ui-spacing) * 3);
+  }
+  .ui\:mb-4 {
+    margin-bottom: calc(var(--ui-spacing) * 4);
+  }
+  .ui\:ml-auto {
+    margin-left: auto;
+  }
+  .ui\:line-clamp-3 {
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+  .ui\:block {
+    display: block;
+  }
+  .ui\:flex {
+    display: flex;
+  }
+  .ui\:grid {
+    display: grid;
+  }
+  .ui\:hidden {
+    display: none;
+  }
+  .ui\:inline-flex {
+    display: inline-flex;
+  }
+  .ui\:field-sizing-content {
+    field-sizing: content;
+  }
+  .ui\:size-2 {
+    width: calc(var(--ui-spacing) * 2);
+    height: calc(var(--ui-spacing) * 2);
+  }
+  .ui\:size-2\.5 {
+    width: calc(var(--ui-spacing) * 2.5);
+    height: calc(var(--ui-spacing) * 2.5);
+  }
+  .ui\:size-3 {
+    width: calc(var(--ui-spacing) * 3);
+    height: calc(var(--ui-spacing) * 3);
+  }
+  .ui\:size-3\.5 {
+    width: calc(var(--ui-spacing) * 3.5);
+    height: calc(var(--ui-spacing) * 3.5);
+  }
+  .ui\:size-4 {
+    width: calc(var(--ui-spacing) * 4);
+    height: calc(var(--ui-spacing) * 4);
+  }
+  .ui\:size-6 {
+    width: calc(var(--ui-spacing) * 6);
+    height: calc(var(--ui-spacing) * 6);
+  }
+  .ui\:size-7 {
+    width: calc(var(--ui-spacing) * 7);
+    height: calc(var(--ui-spacing) * 7);
+  }
+  .ui\:size-8 {
+    width: calc(var(--ui-spacing) * 8);
+    height: calc(var(--ui-spacing) * 8);
+  }
+  .ui\:size-9 {
+    width: calc(var(--ui-spacing) * 9);
+    height: calc(var(--ui-spacing) * 9);
+  }
+  .ui\:size-10 {
+    width: calc(var(--ui-spacing) * 10);
+    height: calc(var(--ui-spacing) * 10);
+  }
+  .ui\:size-20 {
+    width: calc(var(--ui-spacing) * 20);
+    height: calc(var(--ui-spacing) * 20);
+  }
+  .ui\:size-fit {
+    width: fit-content;
+    height: fit-content;
+  }
+  .ui\:size-full {
+    width: 100%;
+    height: 100%;
+  }
+  .ui\:h-\(--bits-navigation-menu-viewport-height\) {
+    height: var(--bits-navigation-menu-viewport-height);
+  }
+  .ui\:h-\(--bits-select-anchor-height\) {
+    height: var(--bits-select-anchor-height);
+  }
+  .ui\:h-0\.5 {
+    height: calc(var(--ui-spacing) * 0.5);
+  }
+  .ui\:h-2 {
+    height: calc(var(--ui-spacing) * 2);
+  }
+  .ui\:h-4 {
+    height: calc(var(--ui-spacing) * 4);
+  }
+  .ui\:h-5 {
+    height: calc(var(--ui-spacing) * 5);
+  }
+  .ui\:h-6 {
+    height: calc(var(--ui-spacing) * 6);
+  }
+  .ui\:h-7 {
+    height: calc(var(--ui-spacing) * 7);
+  }
+  .ui\:h-8 {
+    height: calc(var(--ui-spacing) * 8);
+  }
+  .ui\:h-9 {
+    height: calc(var(--ui-spacing) * 9);
+  }
+  .ui\:h-10 {
+    height: calc(var(--ui-spacing) * 10);
+  }
+  .ui\:h-12 {
+    height: calc(var(--ui-spacing) * 12);
+  }
+  .ui\:h-96 {
+    height: calc(var(--ui-spacing) * 96);
+  }
+  .ui\:h-128 {
+    height: calc(var(--ui-spacing) * 128);
+  }
+  .ui\:h-\[1\.2rem\] {
+    height: 1.2rem;
+  }
+  .ui\:h-\[1\.15rem\] {
+    height: 1.15rem;
+  }
+  .ui\:h-\[6px\] {
+    height: 6px;
+  }
+  .ui\:h-\[70px\] {
+    height: 70px;
+  }
+  .ui\:h-\[calc\(100\%-1px\)\] {
+    height: calc(100% - 1px);
+  }
+  .ui\:h-\[calc\(100\%-3px\)\] {
+    height: calc(100% - 3px);
+  }
+  .ui\:h-auto {
+    height: auto;
+  }
+  .ui\:h-fit {
+    height: fit-content;
+  }
+  .ui\:h-full {
+    height: 100%;
+  }
+  .ui\:h-px {
+    height: 1px;
+  }
+  .ui\:h-screen {
+    height: 100vh;
+  }
+  .ui\:max-h-\(--bits-dropdown-menu-content-available-height\) {
+    max-height: var(--bits-dropdown-menu-content-available-height);
+  }
+  .ui\:max-h-\(--bits-select-content-available-height\) {
+    max-height: var(--bits-select-content-available-height);
+  }
+  .ui\:max-h-80 {
+    max-height: calc(var(--ui-spacing) * 80);
+  }
+  .ui\:max-h-90 {
+    max-height: calc(var(--ui-spacing) * 90);
+  }
+  .ui\:max-h-\[300px\] {
+    max-height: 300px;
+  }
+  .ui\:max-h-svh {
+    max-height: 100svh;
+  }
+  .ui\:min-h-0 {
+    min-height: calc(var(--ui-spacing) * 0);
+  }
+  .ui\:min-h-16 {
+    min-height: calc(var(--ui-spacing) * 16);
+  }
+  .ui\:min-h-96 {
+    min-height: calc(var(--ui-spacing) * 96);
+  }
+  .ui\:min-h-\[calc\(100vh-48px\)\] {
+    min-height: calc(100vh - 48px);
+  }
+  .ui\:w-\(--sidebar-width\) {
+    width: var(--sidebar-width);
+  }
+  .ui\:w-0 {
+    width: calc(var(--ui-spacing) * 0);
+  }
+  .ui\:w-1 {
+    width: calc(var(--ui-spacing) * 1);
+  }
+  .ui\:w-1\/4 {
+    width: 25%;
+  }
+  .ui\:w-2 {
+    width: calc(var(--ui-spacing) * 2);
+  }
+  .ui\:w-3\/4 {
+    width: 75%;
+  }
+  .ui\:w-4 {
+    width: calc(var(--ui-spacing) * 4);
+  }
+  .ui\:w-5 {
+    width: calc(var(--ui-spacing) * 5);
+  }
+  .ui\:w-7 {
+    width: calc(var(--ui-spacing) * 7);
+  }
+  .ui\:w-8 {
+    width: calc(var(--ui-spacing) * 8);
+  }
+  .ui\:w-40 {
+    width: calc(var(--ui-spacing) * 40);
+  }
+  .ui\:w-64 {
+    width: calc(var(--ui-spacing) * 64);
+  }
+  .ui\:w-72 {
+    width: calc(var(--ui-spacing) * 72);
+  }
+  .ui\:w-\[1\.2rem\] {
+    width: 1.2rem;
+  }
+  .ui\:w-\[25px\] {
+    width: 25px;
+  }
+  .ui\:w-\[100px\] {
+    width: 100px;
+  }
+  .ui\:w-fit {
+    width: fit-content;
+  }
+  .ui\:w-full {
+    width: 100%;
+  }
+  .ui\:w-max {
+    width: max-content;
+  }
+  .ui\:w-screen {
+    width: 100vw;
+  }
+  .ui\:max-w-\(--skeleton-width\) {
+    max-width: var(--skeleton-width);
+  }
+  .ui\:max-w-3xl {
+    max-width: var(--ui-container-3xl);
+  }
+  .ui\:max-w-6 {
+    max-width: calc(var(--ui-spacing) * 6);
+  }
+  .ui\:max-w-80 {
+    max-width: calc(var(--ui-spacing) * 80);
+  }
+  .ui\:max-w-\[60\%\] {
+    max-width: 60%;
+  }
+  .ui\:max-w-\[calc\(100\%-2rem\)\] {
+    max-width: calc(100% - 2rem);
+  }
+  .ui\:max-w-full {
+    max-width: 100%;
+  }
+  .ui\:max-w-max {
+    max-width: max-content;
+  }
+  .ui\:max-w-sm {
+    max-width: var(--ui-container-sm);
+  }
+  .ui\:min-w-\(--bits-select-anchor-width\) {
+    min-width: var(--bits-select-anchor-width);
+  }
+  .ui\:min-w-0 {
+    min-width: calc(var(--ui-spacing) * 0);
+  }
+  .ui\:min-w-5 {
+    min-width: calc(var(--ui-spacing) * 5);
+  }
+  .ui\:min-w-8 {
+    min-width: calc(var(--ui-spacing) * 8);
+  }
+  .ui\:min-w-9 {
+    min-width: calc(var(--ui-spacing) * 9);
+  }
+  .ui\:min-w-10 {
+    min-width: calc(var(--ui-spacing) * 10);
+  }
+  .ui\:min-w-32 {
+    min-width: calc(var(--ui-spacing) * 32);
+  }
+  .ui\:min-w-48 {
+    min-width: calc(var(--ui-spacing) * 48);
+  }
+  .ui\:min-w-\[9rem\] {
+    min-width: 9rem;
+  }
+  .ui\:flex-1 {
+    flex: 1;
+  }
+  .ui\:shrink-0 {
+    flex-shrink: 0;
+  }
+  .ui\:basis-full {
+    flex-basis: 100%;
+  }
+  .ui\:origin-\(--bits-dropdown-menu-content-transform-origin\) {
+    transform-origin: var(--bits-dropdown-menu-content-transform-origin);
+  }
+  .ui\:origin-\(--bits-menubar-content-transform-origin\) {
+    transform-origin: var(--bits-menubar-content-transform-origin);
+  }
+  .ui\:origin-\(--bits-popover-content-transform-origin\) {
+    transform-origin: var(--bits-popover-content-transform-origin);
+  }
+  .ui\:origin-\(--bits-select-content-transform-origin\) {
+    transform-origin: var(--bits-select-content-transform-origin);
+  }
+  .ui\:origin-\(--bits-tooltip-content-transform-origin\) {
+    transform-origin: var(--bits-tooltip-content-transform-origin);
+  }
+  .ui\:-translate-x-1\/2 {
+    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .ui\:-translate-x-px {
+    --tw-translate-x: -1px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .ui\:translate-x-\[-50\%\] {
+    --tw-translate-x: -50%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .ui\:translate-x-px {
+    --tw-translate-x: 1px;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .ui\:-translate-y-1\/2 {
+    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .ui\:translate-y-0\.5 {
+    --tw-translate-y: calc(var(--ui-spacing) * 0.5);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .ui\:translate-y-\[-50\%\] {
+    --tw-translate-y: -50%;
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .ui\:scale-0 {
+    --tw-scale-x: 0%;
+    --tw-scale-y: 0%;
+    --tw-scale-z: 0%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+  .ui\:scale-100 {
+    --tw-scale-x: 100%;
+    --tw-scale-y: 100%;
+    --tw-scale-z: 100%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+  .ui\:rotate-0 {
+    rotate: none;
+  }
+  .ui\:rotate-45 {
+    rotate: 45deg;
+  }
+  .ui\:rotate-90 {
+    rotate: 90deg;
+  }
+  .ui\:animate-in {
+    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);
+  }
+  .ui\:animate-pulse {
+    animation: var(--ui-animate-pulse);
+  }
+  .ui\:animate-spin {
+    animation: var(--ui-animate-spin);
+  }
+  .ui\:cursor-auto {
+    cursor: auto;
+  }
+  .ui\:cursor-col-resize {
+    cursor: col-resize;
+  }
+  .ui\:cursor-default {
+    cursor: default;
+  }
+  .ui\:cursor-not-allowed {
+    cursor: not-allowed;
+  }
+  .ui\:cursor-pointer {
+    cursor: pointer;
+  }
+  .ui\:cursor-text {
+    cursor: text;
+  }
+  .ui\:resize-none {
+    resize: none;
+  }
+  .ui\:scroll-my-1 {
+    scroll-margin-block: calc(var(--ui-spacing) * 1);
+  }
+  .ui\:scroll-py-1 {
+    scroll-padding-block: calc(var(--ui-spacing) * 1);
+  }
+  .ui\:list-disc {
+    list-style-type: disc;
+  }
+  .ui\:list-none {
+    list-style-type: none;
+  }
+  .ui\:auto-rows-min {
+    grid-auto-rows: min-content;
+  }
+  .ui\:grid-rows-\[auto_auto\] {
+    grid-template-rows: auto auto;
+  }
+  .ui\:flex-col {
+    flex-direction: column;
+  }
+  .ui\:flex-col-reverse {
+    flex-direction: column-reverse;
+  }
+  .ui\:flex-row {
+    flex-direction: row;
+  }
+  .ui\:flex-wrap {
+    flex-wrap: wrap;
+  }
+  .ui\:place-items-center {
+    place-items: center;
+  }
+  .ui\:items-center {
+    align-items: center;
+  }
+  .ui\:items-end {
+    align-items: flex-end;
+  }
+  .ui\:items-start {
+    align-items: flex-start;
+  }
+  .ui\:items-stretch {
+    align-items: stretch;
+  }
+  .ui\:justify-between {
+    justify-content: space-between;
+  }
+  .ui\:justify-center {
+    justify-content: center;
+  }
+  .ui\:justify-end {
+    justify-content: flex-end;
+  }
+  .ui\:justify-start {
+    justify-content: flex-start;
+  }
+  .ui\:gap-0 {
+    gap: calc(var(--ui-spacing) * 0);
+  }
+  .ui\:gap-0\.5 {
+    gap: calc(var(--ui-spacing) * 0.5);
+  }
+  .ui\:gap-1 {
+    gap: calc(var(--ui-spacing) * 1);
+  }
+  .ui\:gap-1\.5 {
+    gap: calc(var(--ui-spacing) * 1.5);
+  }
+  .ui\:gap-2 {
+    gap: calc(var(--ui-spacing) * 2);
+  }
+  .ui\:gap-2\.5 {
+    gap: calc(var(--ui-spacing) * 2.5);
+  }
+  .ui\:gap-3 {
+    gap: calc(var(--ui-spacing) * 3);
+  }
+  .ui\:gap-4 {
+    gap: calc(var(--ui-spacing) * 4);
+  }
+  .ui\:gap-6 {
+    gap: calc(var(--ui-spacing) * 6);
+  }
+  .ui\:gap-7 {
+    gap: calc(var(--ui-spacing) * 7);
+  }
+  .ui\:self-start {
+    align-self: flex-start;
+  }
+  .ui\:self-stretch {
+    align-self: stretch;
+  }
+  .ui\:justify-self-end {
+    justify-self: flex-end;
+  }
+  .ui\:overflow-auto {
+    overflow: auto;
+  }
+  .ui\:overflow-hidden {
+    overflow: hidden;
+  }
+  .ui\:overflow-visible {
+    overflow: visible;
+  }
+  .ui\:overflow-x-auto {
+    overflow-x: auto;
+  }
+  .ui\:overflow-x-hidden {
+    overflow-x: hidden;
+  }
+  .ui\:overflow-y-auto {
+    overflow-y: auto;
+  }
+  .ui\:scroll-smooth {
+    scroll-behavior: smooth;
+  }
+  .ui\:rounded {
+    border-radius: 0.25rem;
+  }
+  .ui\:rounded-\[2px\] {
+    border-radius: 2px;
+  }
+  .ui\:rounded-\[4px\] {
+    border-radius: 4px;
+  }
+  .ui\:rounded-\[calc\(var\(--radius\)-5px\)\] {
+    border-radius: calc(var(--radius) - 5px);
+  }
+  .ui\:rounded-full {
+    border-radius: 3.40282e38px;
+  }
+  .ui\:rounded-lg {
+    border-radius: var(--radius);
+  }
+  .ui\:rounded-md {
+    border-radius: calc(var(--radius) - 2px);
+  }
+  .ui\:rounded-none {
+    border-radius: 0;
+  }
+  .ui\:rounded-sm {
+    border-radius: calc(var(--radius) - 4px);
+  }
+  .ui\:rounded-xl {
+    border-radius: calc(var(--radius) + 4px);
+  }
+  .ui\:rounded-xs {
+    border-radius: var(--ui-radius-xs);
+  }
+  .ui\:border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .ui\:border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0;
+  }
+  .ui\:border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
+  .ui\:border-\[1\.5px\] {
+    border-style: var(--tw-border-style);
+    border-width: 1.5px;
+  }
+  .ui\:border-x-0 {
+    border-inline-style: var(--tw-border-style);
+    border-inline-width: 0;
+  }
+  .ui\:border-t {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+  }
+  .ui\:border-r {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+  }
+  .ui\:border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+  .ui\:border-l {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 1px;
+  }
+  .ui\:border-dashed {
+    --tw-border-style: dashed;
+    border-style: dashed;
+  }
+  .ui\:border-\(--color-border\) {
+    border-color: var(--color-border);
+  }
+  .ui\:border-border,
+  .ui\:border-border\/50 {
+    border-color: var(--border);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .ui\:border-border\/50 {
+      border-color: color-mix(in oklab, var(--border) 50%, transparent);
+    }
+  }
+  .ui\:border-input {
+    border-color: var(--input);
+  }
+  .ui\:border-red-500 {
+    border-color: var(--ui-color-red-500);
+  }
+  .ui\:border-sidebar-border {
+    border-color: var(--sidebar-border);
+  }
+  .ui\:border-transparent {
+    border-color: #0000;
+  }
+  .ui\:bg-\(--color-bg\) {
+    background-color: var(--color-bg);
+  }
+  .ui\:bg-accent {
+    background-color: var(--accent);
+  }
+  .ui\:bg-background,
+  .ui\:bg-background\/50 {
+    background-color: var(--background);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .ui\:bg-background\/50 {
+      background-color: color-mix(in oklab, var(--background) 50%, transparent);
+    }
+  }
+  .ui\:bg-black\/50 {
+    background-color: var(--ui-color-black);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .ui\:bg-black\/50 {
+      background-color: color-mix(in oklab, var(--ui-color-black) 50%, transparent);
+    }
+  }
+  .ui\:bg-border {
+    background-color: var(--border);
+  }
+  .ui\:bg-card {
+    background-color: var(--card);
+  }
+  .ui\:bg-destructive {
+    background-color: var(--destructive);
+  }
+  .ui\:bg-green-500 {
+    background-color: var(--ui-color-green-500);
+  }
+  .ui\:bg-inherit {
+    background-color: inherit;
+  }
+  .ui\:bg-input {
+    background-color: var(--input);
+  }
+  .ui\:bg-muted,
+  .ui\:bg-muted\/50 {
+    background-color: var(--muted);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .ui\:bg-muted\/50 {
+      background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+    }
+  }
+  .ui\:bg-popover {
+    background-color: var(--popover);
+  }
+  .ui\:bg-primary {
+    background-color: var(--primary);
+  }
+  .ui\:bg-primary-foreground {
+    background-color: var(--primary-foreground);
+  }
+  .ui\:bg-primary\/20 {
+    background-color: var(--primary);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .ui\:bg-primary\/20 {
+      background-color: color-mix(in oklab, var(--primary) 20%, transparent);
+    }
+  }
+  .ui\:bg-red-500 {
+    background-color: var(--ui-color-red-500);
+  }
+  .ui\:bg-secondary,
+  .ui\:bg-secondary\/50 {
+    background-color: var(--secondary);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .ui\:bg-secondary\/50 {
+      background-color: color-mix(in oklab, var(--secondary) 50%, transparent);
+    }
+  }
+  .ui\:bg-sidebar {
+    background-color: var(--sidebar);
+  }
+  .ui\:bg-sidebar-border {
+    background-color: var(--sidebar-border);
+  }
+  .ui\:bg-transparent {
+    background-color: #0000;
+  }
+  .ui\:bg-yellow-500 {
+    background-color: var(--ui-color-yellow-500);
+  }
+  .ui\:bg-clip-padding {
+    background-clip: padding-box;
+  }
+  .ui\:fill-current {
+    fill: currentColor;
+  }
+  .ui\:fill-primary {
+    fill: var(--primary);
+  }
+  .ui\:object-cover {
+    object-fit: cover;
+  }
+  .ui\:p-0 {
+    padding: calc(var(--ui-spacing) * 0);
+  }
+  .ui\:p-0\.5 {
+    padding: calc(var(--ui-spacing) * 0.5);
+  }
+  .ui\:p-1 {
+    padding: calc(var(--ui-spacing) * 1);
+  }
+  .ui\:p-2 {
+    padding: calc(var(--ui-spacing) * 2);
+  }
+  .ui\:p-4 {
+    padding: calc(var(--ui-spacing) * 4);
+  }
+  .ui\:p-6 {
+    padding: calc(var(--ui-spacing) * 6);
+  }
+  .ui\:p-\[3px\] {
+    padding: 3px;
+  }
+  .ui\:px-1 {
+    padding-inline: calc(var(--ui-spacing) * 1);
+  }
+  .ui\:px-1\.5 {
+    padding-inline: calc(var(--ui-spacing) * 1.5);
+  }
+  .ui\:px-2 {
+    padding-inline: calc(var(--ui-spacing) * 2);
+  }
+  .ui\:px-2\.5 {
+    padding-inline: calc(var(--ui-spacing) * 2.5);
+  }
+  .ui\:px-3 {
+    padding-inline: calc(var(--ui-spacing) * 3);
+  }
+  .ui\:px-4 {
+    padding-inline: calc(var(--ui-spacing) * 4);
+  }
+  .ui\:px-6 {
+    padding-inline: calc(var(--ui-spacing) * 6);
+  }
+  .ui\:py-0\.5 {
+    padding-block: calc(var(--ui-spacing) * 0.5);
+  }
+  .ui\:py-1 {
+    padding-block: calc(var(--ui-spacing) * 1);
+  }
+  .ui\:py-1\.5 {
+    padding-block: calc(var(--ui-spacing) * 1.5);
+  }
+  .ui\:py-2 {
+    padding-block: calc(var(--ui-spacing) * 2);
+  }
+  .ui\:py-3 {
+    padding-block: calc(var(--ui-spacing) * 3);
+  }
+  .ui\:py-4 {
+    padding-block: calc(var(--ui-spacing) * 4);
+  }
+  .ui\:py-6 {
+    padding-block: calc(var(--ui-spacing) * 6);
+  }
+  .ui\:ps-3 {
+    padding-inline-start: calc(var(--ui-spacing) * 3);
+  }
+  .ui\:pe-3 {
+    padding-inline-end: calc(var(--ui-spacing) * 3);
+  }
+  .ui\:pt-0 {
+    padding-top: calc(var(--ui-spacing) * 0);
+  }
+  .ui\:pt-1\.5 {
+    padding-top: calc(var(--ui-spacing) * 1.5);
+  }
+  .ui\:pt-3 {
+    padding-top: calc(var(--ui-spacing) * 3);
+  }
+  .ui\:pr-2 {
+    padding-right: calc(var(--ui-spacing) * 2);
+  }
+  .ui\:pr-8 {
+    padding-right: calc(var(--ui-spacing) * 8);
+  }
+  .ui\:pr-9 {
+    padding-right: calc(var(--ui-spacing) * 9);
+  }
+  .ui\:pr-18 {
+    padding-right: calc(var(--ui-spacing) * 18);
+  }
+  .ui\:pb-3 {
+    padding-bottom: calc(var(--ui-spacing) * 3);
+  }
+  .ui\:pb-4 {
+    padding-bottom: calc(var(--ui-spacing) * 4);
+  }
+  .ui\:pl-2 {
+    padding-left: calc(var(--ui-spacing) * 2);
+  }
+  .ui\:pl-3 {
+    padding-left: calc(var(--ui-spacing) * 3);
+  }
+  .ui\:pl-8 {
+    padding-left: calc(var(--ui-spacing) * 8);
+  }
+  .ui\:text-center {
+    text-align: center;
+  }
+  .ui\:text-left {
+    text-align: left;
+  }
+  .ui\:font-mono {
+    font-family: var(--ui-font-mono);
+  }
+  .ui\:font-sans {
+    font-family: var(--ui-font-sans);
+  }
+  .ui\:text-2xl {
+    font-size: var(--ui-text-2xl);
+    line-height: var(--tw-leading, var(--ui-text-2xl--line-height));
+  }
+  .ui\:text-base {
+    font-size: var(--ui-text-base);
+    line-height: var(--tw-leading, var(--ui-text-base--line-height));
+  }
+  .ui\:text-lg {
+    font-size: var(--ui-text-lg);
+    line-height: var(--tw-leading, var(--ui-text-lg--line-height));
+  }
+  .ui\:text-sm {
+    font-size: var(--ui-text-sm);
+    line-height: var(--tw-leading, var(--ui-text-sm--line-height));
+  }
+  .ui\:text-sm\/relaxed {
+    font-size: var(--ui-text-sm);
+    line-height: var(--ui-leading-relaxed);
+  }
+  .ui\:text-xs {
+    font-size: var(--ui-text-xs);
+    line-height: var(--tw-leading, var(--ui-text-xs--line-height));
+  }
+  .ui\:leading-none {
+    --tw-leading: 1;
+    line-height: 1;
+  }
+  .ui\:leading-normal {
+    --tw-leading: var(--ui-leading-normal);
+    line-height: var(--ui-leading-normal);
+  }
+  .ui\:leading-snug {
+    --tw-leading: var(--ui-leading-snug);
+    line-height: var(--ui-leading-snug);
+  }
+  .ui\:font-medium {
+    --tw-font-weight: var(--ui-font-weight-medium);
+    font-weight: var(--ui-font-weight-medium);
+  }
+  .ui\:font-normal {
+    --tw-font-weight: var(--ui-font-weight-normal);
+    font-weight: var(--ui-font-weight-normal);
+  }
+  .ui\:font-semibold {
+    --tw-font-weight: var(--ui-font-weight-semibold);
+    font-weight: var(--ui-font-weight-semibold);
+  }
+  .ui\:tracking-tight {
+    --tw-tracking: var(--ui-tracking-tight);
+    letter-spacing: var(--ui-tracking-tight);
+  }
+  .ui\:tracking-widest {
+    --tw-tracking: var(--ui-tracking-widest);
+    letter-spacing: var(--ui-tracking-widest);
+  }
+  .ui\:text-balance {
+    text-wrap: balance;
+  }
+  .ui\:break-words {
+    overflow-wrap: break-word;
+  }
+  .ui\:text-ellipsis {
+    text-overflow: ellipsis;
+  }
+  .ui\:whitespace-nowrap {
+    white-space: nowrap;
+  }
+  .ui\:text-card-foreground {
+    color: var(--card-foreground);
+  }
+  .ui\:text-current {
+    color: currentColor;
+  }
+  .ui\:text-destructive {
+    color: var(--destructive);
+  }
+  .ui\:text-foreground {
+    color: var(--foreground);
+  }
+  .ui\:text-green-500 {
+    color: var(--ui-color-green-500);
+  }
+  .ui\:text-muted-foreground {
+    color: var(--muted-foreground);
+  }
+  .ui\:text-popover-foreground {
+    color: var(--popover-foreground);
+  }
+  .ui\:text-primary {
+    color: var(--primary);
+  }
+  .ui\:text-primary-foreground {
+    color: var(--primary-foreground);
+  }
+  .ui\:text-secondary-foreground {
+    color: var(--secondary-foreground);
+  }
+  .ui\:text-sidebar-foreground,
+  .ui\:text-sidebar-foreground\/70 {
+    color: var(--sidebar-foreground);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .ui\:text-sidebar-foreground\/70 {
+      color: color-mix(in oklab, var(--sidebar-foreground) 70%, transparent);
+    }
+  }
+  .ui\:text-white {
+    color: var(--ui-color-white);
+  }
+  .ui\:underline-offset-4 {
+    text-underline-offset: 4px;
+  }
+  .ui\:opacity-0 {
+    opacity: 0;
+  }
+  .ui\:opacity-50 {
+    opacity: 0.5;
+  }
+  .ui\:opacity-70 {
+    opacity: 0.7;
+  }
+  .ui\:opacity-100 {
+    opacity: 1;
+  }
+  .ui\: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);
+  }
+  .ui\:shadow-2xs {
+    --tw-shadow: 0 1px 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);
+  }
+  .ui\:shadow-\[0_0_0_1px_var\(--sidebar-border\)\] {
+    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, var(--sidebar-border));
+    box-shadow:
+      var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
+  .ui\: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);
+  }
+  .ui\: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);
+  }
+  .ui\: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);
+  }
+  .ui\: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);
+  }
+  .ui\: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);
+  }
+  .ui\: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);
+  }
+  .ui\:ring-0 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width))
+      var(--tw-ring-color, currentcolor);
+    box-shadow:
+      var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
+  .ui\:ring-2 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width))
+      var(--tw-ring-color, currentcolor);
+    box-shadow:
+      var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
+  .ui\:ring-3 {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width))
+      var(--tw-ring-color, currentcolor);
+    box-shadow:
+      var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
+  .ui\:ring-accent {
+    --tw-ring-color: var(--accent);
+  }
+  .ui\:ring-background {
+    --tw-ring-color: var(--background);
+  }
+  .ui\:ring-sidebar-ring {
+    --tw-ring-color: var(--sidebar-ring);
+  }
+  .ui\: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);
+  }
+  .ui\:ring-offset-background {
+    --tw-ring-offset-color: var(--background);
+  }
+  .ui\:outline-hidden {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  @media (forced-colors: active) {
+    .ui\:outline-hidden {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+  .ui\:backdrop-blur-sm {
+    --tw-backdrop-blur: blur(var(--ui-blur-sm));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,)
+      var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,)
+      var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,)
+      var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,)
+      var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
+  .ui\: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(--ui-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--ui-default-transition-duration));
+  }
+  .ui\:transition-\[color\,box-shadow\] {
+    transition-property: color, box-shadow;
+    transition-timing-function: var(--tw-ease, var(--ui-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--ui-default-transition-duration));
+  }
+  .ui\:transition-\[left\,right\,width\] {
+    transition-property: left, right, width;
+    transition-timing-function: var(--tw-ease, var(--ui-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--ui-default-transition-duration));
+  }
+  .ui\:transition-\[margin\,opacity\] {
+    transition-property: margin, opacity;
+    transition-timing-function: var(--tw-ease, var(--ui-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--ui-default-transition-duration));
+  }
+  .ui\:transition-\[width\,height\,padding\] {
+    transition-property: width, height, padding;
+    transition-timing-function: var(--tw-ease, var(--ui-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--ui-default-transition-duration));
+  }
+  .ui\:transition-\[width\] {
+    transition-property: width;
+    transition-timing-function: var(--tw-ease, var(--ui-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--ui-default-transition-duration));
+  }
+  .ui\:transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--ui-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--ui-default-transition-duration));
+  }
+  .ui\: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(--ui-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--ui-default-transition-duration));
+  }
+  .ui\:transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--ui-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--ui-default-transition-duration));
+  }
+  .ui\:transition-shadow {
+    transition-property: box-shadow;
+    transition-timing-function: var(--tw-ease, var(--ui-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--ui-default-transition-duration));
+  }
+  .ui\:transition-transform {
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(--tw-ease, var(--ui-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--ui-default-transition-duration));
+  }
+  .ui\:transition-none {
+    transition-property: none;
+  }
+  .ui\:duration-100 {
+    --tw-duration: 0.1s;
+    transition-duration: 0.1s;
+  }
+  .ui\:duration-200 {
+    --tw-duration: 0.2s;
+    transition-duration: 0.2s;
+  }
+  .ui\:duration-300 {
+    --tw-duration: 0.3s;
+    transition-duration: 0.3s;
+  }
+  .ui\:duration-500 {
+    --tw-duration: 0.5s;
+    transition-duration: 0.5s;
+  }
+  .ui\:ease-in-out {
+    --tw-ease: var(--ui-ease-in-out);
+    transition-timing-function: var(--ui-ease-in-out);
+  }
+  .ui\:ease-linear {
+    --tw-ease: linear;
+    transition-timing-function: linear;
+  }
+  .ui\:fade-in-0 {
+    --tw-enter-opacity: 0;
+  }
+  .ui\:outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  .ui\:select-none {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+  .ui\:zoom-in-95 {
+    --tw-enter-scale: 0.95;
+  }
+  :is(.ui\:\*\:w-full > *) {
+    width: 100%;
+  }
+  .ui\:group-has-data-\[orientation\=horizontal\]\/field\:text-balance:is(
+    :where(.ui\:group\/field):has([data-orientation='horizontal']) *
+  ) {
+    text-wrap: balance;
+  }
+  .ui\:group-has-data-\[sidebar\=menu-action\]\/menu-item\:pr-8:is(
+    :where(.ui\:group\/menu-item):has([data-sidebar='menu-action']) *
+  ) {
+    padding-right: calc(var(--ui-spacing) * 8);
+  }
+  .ui\:group-has-\[\[data-slot\=item-description\]\]\/item\:translate-y-0\.5:is(
+      :where(.ui\:group\/item):has([data-slot='item-description']) *
+    ) {
+    --tw-translate-y: calc(var(--ui-spacing) * 0.5);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .ui\:group-has-\[\[data-slot\=item-description\]\]\/item\:self-start:is(
+    :where(.ui\:group\/item):has([data-slot='item-description']) *
+  ) {
+    align-self: flex-start;
+  }
+  .ui\:group-has-\[\>input\]\/input-group\:pt-2\.5:is(:where(.ui\:group\/input-group):has(> input) *) {
+    padding-top: calc(var(--ui-spacing) * 2.5);
+  }
+  .ui\:group-has-\[\>input\]\/input-group\:pb-2\.5:is(:where(.ui\:group\/input-group):has(> input) *) {
+    padding-bottom: calc(var(--ui-spacing) * 2.5);
+  }
+  .ui\:group-data-\[collapsible\=icon\]\:-mt-8:is(:where(.ui\:group)[data-collapsible='icon'] *) {
+    margin-top: calc(var(--ui-spacing) * -8);
+  }
+  .ui\:group-data-\[collapsible\=icon\]\:hidden:is(:where(.ui\:group)[data-collapsible='icon'] *) {
+    display: none;
+  }
+  .ui\:group-data-\[collapsible\=icon\]\:size-8\!:is(:where(.ui\:group)[data-collapsible='icon'] *) {
+    width: calc(var(--ui-spacing) * 8) !important;
+    height: calc(var(--ui-spacing) * 8) !important;
+  }
+  .ui\:group-data-\[collapsible\=icon\]\:w-\(--sidebar-width-icon\):is(:where(.ui\:group)[data-collapsible='icon'] *) {
+    width: var(--sidebar-width-icon);
+  }
+  .ui\:group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\+2px\)\]:is(
+    :where(.ui\:group)[data-collapsible='icon'] *
+  ) {
+    width: calc(var(--sidebar-width-icon) + (calc(var(--ui-spacing) * 4)) + 2px);
+  }
+  .ui\:group-data-\[collapsible\=icon\]\:overflow-hidden:is(:where(.ui\:group)[data-collapsible='icon'] *) {
+    overflow: hidden;
+  }
+  .ui\:group-data-\[collapsible\=icon\]\:p-0\!:is(:where(.ui\:group)[data-collapsible='icon'] *) {
+    padding: calc(var(--ui-spacing) * 0) !important;
+  }
+  .ui\:group-data-\[collapsible\=icon\]\:p-2\!:is(:where(.ui\:group)[data-collapsible='icon'] *) {
+    padding: calc(var(--ui-spacing) * 2) !important;
+  }
+  .ui\:group-data-\[collapsible\=icon\]\:opacity-0:is(:where(.ui\:group)[data-collapsible='icon'] *) {
+    opacity: 0;
+  }
+  .ui\:group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(
+    :where(.ui\:group)[data-collapsible='offcanvas'] *
+  ) {
+    right: calc(var(--sidebar-width) * -1);
+  }
+  .ui\:group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\]:is(
+    :where(.ui\:group)[data-collapsible='offcanvas'] *
+  ) {
+    left: calc(var(--sidebar-width) * -1);
+  }
+  .ui\:group-data-\[collapsible\=offcanvas\]\:w-0:is(:where(.ui\:group)[data-collapsible='offcanvas'] *) {
+    width: calc(var(--ui-spacing) * 0);
+  }
+  .ui\:group-data-\[collapsible\=offcanvas\]\:translate-x-0:is(:where(.ui\:group)[data-collapsible='offcanvas'] *) {
+    --tw-translate-x: calc(var(--ui-spacing) * 0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .ui\:group-data-\[disabled\=true\]\:pointer-events-none:is(:where(.ui\:group)[data-disabled='true'] *) {
+    pointer-events: none;
+  }
+  .ui\:group-data-\[disabled\=true\]\:opacity-50:is(:where(.ui\:group)[data-disabled='true'] *),
+  .ui\:group-data-\[disabled\=true\]\/field\:opacity-50:is(:where(.ui\:group\/field)[data-disabled='true'] *),
+  .ui\:group-data-\[disabled\=true\]\/input-group\:opacity-50:is(
+    :where(.ui\:group\/input-group)[data-disabled='true'] *
+  ) {
+    opacity: 0.5;
+  }
+  .ui\:group-data-\[side\=left\]\:-right-4:is(:where(.ui\:group)[data-side='left'] *) {
+    right: calc(var(--ui-spacing) * -4);
+  }
+  .ui\:group-data-\[side\=left\]\:border-r:is(:where(.ui\:group)[data-side='left'] *) {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+  }
+  .ui\:group-data-\[side\=right\]\:left-0:is(:where(.ui\:group)[data-side='right'] *) {
+    left: calc(var(--ui-spacing) * 0);
+  }
+  .ui\:group-data-\[side\=right\]\:rotate-180:is(:where(.ui\:group)[data-side='right'] *) {
+    rotate: 180deg;
+  }
+  .ui\:group-data-\[side\=right\]\:border-l:is(:where(.ui\:group)[data-side='right'] *) {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 1px;
+  }
+  .ui\:group-data-\[variant\=floating\]\:rounded-lg:is(:where(.ui\:group)[data-variant='floating'] *) {
+    border-radius: var(--radius);
+  }
+  .ui\:group-data-\[variant\=floating\]\:border:is(:where(.ui\:group)[data-variant='floating'] *) {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .ui\:group-data-\[variant\=floating\]\:border-sidebar-border:is(:where(.ui\:group)[data-variant='floating'] *) {
+    border-color: var(--sidebar-border);
+  }
+  .ui\:group-data-\[variant\=floating\]\:shadow-sm:is(:where(.ui\:group)[data-variant='floating'] *) {
+    --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);
+  }
+  .ui\:group-data-\[variant\=outline\]\/field-group\:-mb-2:is(
+    :where(.ui\:group\/field-group)[data-variant='outline'] *
+  ) {
+    margin-bottom: calc(var(--ui-spacing) * -2);
+  }
+  .ui\:group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block:is(
+    :where(.ui\:group\/drawer-content)[data-vaul-drawer-direction='bottom'] *
+  ) {
+    display: block;
+  }
+  .ui\:group-data-\[viewport\=false\]\/navigation-menu\:top-full:is(
+    :where(.ui\:group\/navigation-menu)[data-viewport='false'] *
+  ) {
+    top: 100%;
+  }
+  .ui\:group-data-\[viewport\=false\]\/navigation-menu\:mt-1\.5:is(
+      :where(.ui\:group\/navigation-menu)[data-viewport='false'] *
+    ) {
+    margin-top: calc(var(--ui-spacing) * 1.5);
+  }
+  .ui\:group-data-\[viewport\=false\]\/navigation-menu\:overflow-hidden:is(
+    :where(.ui\:group\/navigation-menu)[data-viewport='false'] *
+  ) {
+    overflow: hidden;
+  }
+  .ui\:group-data-\[viewport\=false\]\/navigation-menu\:rounded-md:is(
+    :where(.ui\:group\/navigation-menu)[data-viewport='false'] *
+  ) {
+    border-radius: calc(var(--radius) - 2px);
+  }
+  .ui\:group-data-\[viewport\=false\]\/navigation-menu\:border:is(
+    :where(.ui\:group\/navigation-menu)[data-viewport='false'] *
+  ) {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .ui\:group-data-\[viewport\=false\]\/navigation-menu\:bg-popover:is(
+    :where(.ui\:group\/navigation-menu)[data-viewport='false'] *
+  ) {
+    background-color: var(--popover);
+  }
+  .ui\:group-data-\[viewport\=false\]\/navigation-menu\:text-popover-foreground:is(
+    :where(.ui\:group\/navigation-menu)[data-viewport='false'] *
+  ) {
+    color: var(--popover-foreground);
+  }
+  .ui\:group-data-\[viewport\=false\]\/navigation-menu\:shadow:is(
+    :where(.ui\:group\/navigation-menu)[data-viewport='false'] *
+  ) {
+    --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);
+  }
+  .ui\:group-data-\[viewport\=false\]\/navigation-menu\:duration-200:is(
+    :where(.ui\:group\/navigation-menu)[data-viewport='false'] *
+  ) {
+    --tw-duration: 0.2s;
+    transition-duration: 0.2s;
+  }
+  @media (hover: hover) {
+    .ui\:peer-hover\/menu-button\:text-sidebar-accent-foreground:is(:where(.ui\:peer\/menu-button):hover ~ *) {
+      color: var(--sidebar-accent-foreground);
+    }
+  }
+  .ui\:peer-disabled\:cursor-not-allowed:is(:where(.ui\:peer):disabled ~ *) {
+    cursor: not-allowed;
+  }
+  .ui\:peer-disabled\:opacity-50:is(:where(.ui\:peer):disabled ~ *) {
+    opacity: 0.5;
+  }
+  .ui\:peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground:is(
+    :where(.ui\:peer\/menu-button)[data-active='true'] ~ *
+  ) {
+    color: var(--sidebar-accent-foreground);
+  }
+  .ui\:peer-data-\[size\=default\]\/menu-button\:top-1\.5:is(:where(.ui\:peer\/menu-button)[data-size='default'] ~ *) {
+    top: calc(var(--ui-spacing) * 1.5);
+  }
+  .ui\:peer-data-\[size\=lg\]\/menu-button\:top-2\.5:is(:where(.ui\:peer\/menu-button)[data-size='lg'] ~ *) {
+    top: calc(var(--ui-spacing) * 2.5);
+  }
+  .ui\:peer-data-\[size\=sm\]\/menu-button\:top-1:is(:where(.ui\:peer\/menu-button)[data-size='sm'] ~ *) {
+    top: calc(var(--ui-spacing) * 1);
+  }
+  .ui\:selection\:bg-primary ::selection {
+    background-color: var(--primary);
+  }
+  .ui\:selection\:bg-primary::selection {
+    background-color: var(--primary);
+  }
+  .ui\:selection\:text-primary-foreground ::selection {
+    color: var(--primary-foreground);
+  }
+  .ui\:selection\:text-primary-foreground::selection {
+    color: var(--primary-foreground);
+  }
+  .ui\:placeholder\:text-muted-foreground::placeholder {
+    color: var(--muted-foreground);
+  }
+  .ui\:after\:absolute:after {
+    content: var(--tw-content);
+    position: absolute;
+  }
+  .ui\:after\:-inset-2:after {
+    content: var(--tw-content);
+    inset: calc(var(--ui-spacing) * -2);
+  }
+  .ui\:after\:inset-y-0:after {
+    content: var(--tw-content);
+    inset-block: calc(var(--ui-spacing) * 0);
+  }
+  .ui\:after\:left-\[calc\(1\/2\*100\%-1px\)\]:after {
+    content: var(--tw-content);
+    left: calc(50% - 1px);
+  }
+  .ui\:after\:w-\[2px\]:after {
+    content: var(--tw-content);
+    width: 2px;
+  }
+  .ui\:group-data-\[collapsible\=offcanvas\]\:after\:left-full:is(
+      :where(.ui\:group)[data-collapsible='offcanvas'] *
+    ):after {
+    content: var(--tw-content);
+    left: 100%;
+  }
+  .ui\:last\:mt-0:last-child {
+    margin-top: calc(var(--ui-spacing) * 0);
+  }
+  .ui\:last\:border-b-0:last-child {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 0;
+  }
+  @media (hover: hover) {
+    .ui\:hover\:bg-accent:hover {
+      background-color: var(--accent);
+    }
+    .ui\:hover\:bg-muted:hover {
+      background-color: var(--muted);
+    }
+    .ui\:hover\:bg-sidebar-accent:hover {
+      background-color: var(--sidebar-accent);
+    }
+    .ui\:hover\:bg-transparent\!:hover {
+      background-color: #0000 !important;
+    }
+    .ui\:hover\:text-accent-foreground:hover {
+      color: var(--accent-foreground);
+    }
+    .ui\:hover\:text-foreground:hover {
+      color: var(--foreground);
+    }
+    .ui\:hover\:text-muted-foreground:hover {
+      color: var(--muted-foreground);
+    }
+    .ui\:hover\:text-sidebar-accent-foreground:hover {
+      color: var(--sidebar-accent-foreground);
+    }
+    .ui\:hover\:underline:hover {
+      text-decoration-line: underline;
+    }
+    .ui\:hover\:opacity-100:hover {
+      opacity: 1;
+    }
+    .ui\:hover\:shadow-\[0_0_0_1px_var\(--sidebar-accent\)\]:hover {
+      --tw-shadow: 0 0 0 1px var(--tw-shadow-color, var(--sidebar-accent));
+      box-shadow:
+        var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+        var(--tw-shadow);
+    }
+    .ui\:hover\:group-data-\[collapsible\=offcanvas\]\:bg-sidebar:hover:is(
+        :where(.ui\:group)[data-collapsible='offcanvas'] *
+      ) {
+      background-color: var(--sidebar);
+    }
+    .ui\:hover\:after\:bg-sidebar-border:hover:after {
+      content: var(--tw-content);
+      background-color: var(--sidebar-border);
+    }
+  }
+  .ui\:focus\:bg-accent:focus {
+    background-color: var(--accent);
+  }
+  .ui\:focus\:text-accent-foreground:focus {
+    color: var(--accent-foreground);
+  }
+  .ui\: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, currentcolor);
+    box-shadow:
+      var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
+  .ui\:focus\:ring-ring:focus {
+    --tw-ring-color: var(--ring);
+  }
+  .ui\: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);
+  }
+  .ui\:focus\:outline-hidden:focus {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  @media (forced-colors: active) {
+    .ui\:focus\:outline-hidden:focus {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+  .ui\:focus\:outline-none:focus {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  .ui\:focus-visible\:border-ring:focus-visible {
+    border-color: var(--ring);
+  }
+  .ui\: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, currentcolor);
+    box-shadow:
+      var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
+  .ui\: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, currentcolor);
+    box-shadow:
+      var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
+  .ui\:focus-visible\:ring-\[3px\]:focus-visible {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width))
+      var(--tw-ring-color, currentcolor);
+    box-shadow:
+      var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
+  .ui\:focus-visible\:ring-destructive\/20:focus-visible {
+    --tw-ring-color: var(--destructive);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .ui\:focus-visible\:ring-destructive\/20:focus-visible {
+      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+    }
+  }
+  .ui\:focus-visible\:ring-ring:focus-visible,
+  .ui\:focus-visible\:ring-ring\/50:focus-visible {
+    --tw-ring-color: var(--ring);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .ui\:focus-visible\:ring-ring\/50:focus-visible {
+      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
+    }
+  }
+  .ui\: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);
+  }
+  .ui\:focus-visible\:outline-hidden:focus-visible {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  @media (forced-colors: active) {
+    .ui\:focus-visible\:outline-hidden:focus-visible {
+      outline-offset: 2px;
+      outline: 2px solid #0000;
+    }
+  }
+  .ui\:focus-visible\:outline-1:focus-visible {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+  .ui\:focus-visible\:outline-ring:focus-visible {
+    outline-color: var(--ring);
+  }
+  .ui\:active\:bg-sidebar-accent:active {
+    background-color: var(--sidebar-accent);
+  }
+  .ui\:active\:text-sidebar-accent-foreground:active {
+    color: var(--sidebar-accent-foreground);
+  }
+  .ui\:disabled\:pointer-events-none:disabled {
+    pointer-events: none;
+  }
+  .ui\:disabled\:cursor-not-allowed:disabled {
+    cursor: not-allowed;
+  }
+  .ui\:disabled\:opacity-50:disabled {
+    opacity: 0.5;
+  }
+  :where([data-side='left']) .ui\:in-data-\[side\=left\]\:cursor-w-resize {
+    cursor: w-resize;
+  }
+  :where([data-side='right']) .ui\:in-data-\[side\=right\]\:cursor-e-resize {
+    cursor: e-resize;
+  }
+  :where([data-slot='tooltip-content']) .ui\:in-data-\[slot\=tooltip-content\]\:bg-background\/20 {
+    background-color: var(--background);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    :where([data-slot='tooltip-content']) .ui\:in-data-\[slot\=tooltip-content\]\:bg-background\/20 {
+      background-color: color-mix(in oklab, var(--background) 20%, transparent);
+    }
+  }
+  :where([data-slot='tooltip-content']) .ui\:in-data-\[slot\=tooltip-content\]\:text-background {
+    color: var(--background);
+  }
+  .ui\:has-data-\[slot\=card-action\]\:grid-cols-\[1fr_auto\]:has([data-slot='card-action']) {
+    grid-template-columns: 1fr auto;
+  }
+  .ui\:has-data-\[state\=checked\]\:border-primary:has([data-state='checked']) {
+    border-color: var(--primary);
+  }
+  .ui\:has-data-\[state\=checked\]\:bg-primary\/5:has([data-state='checked']) {
+    background-color: var(--primary);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .ui\:has-data-\[state\=checked\]\:bg-primary\/5:has([data-state='checked']) {
+      background-color: color-mix(in oklab, var(--primary) 5%, transparent);
+    }
+  }
+  .ui\:has-data-\[variant\=inset\]\:bg-sidebar:has([data-variant='inset']) {
+    background-color: var(--sidebar);
+  }
+  .ui\:has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:border-ring:has(
+    [data-slot='input-group-control']:focus-visible
+  ) {
+    border-color: var(--ring);
+  }
+  .ui\:has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-\[3px\]:has(
+    [data-slot='input-group-control']:focus-visible
+  ) {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width))
+      var(--tw-ring-color, currentcolor);
+    box-shadow:
+      var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
+  .ui\:has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-ring\/50:has(
+    [data-slot='input-group-control']:focus-visible
+  ) {
+    --tw-ring-color: var(--ring);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .ui\:has-\[\[data-slot\=input-group-control\]\:focus-visible\]\:ring-ring\/50:has(
+      [data-slot='input-group-control']:focus-visible
+    ) {
+      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
+    }
+  }
+  .ui\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:border-destructive:has([data-slot][aria-invalid='true']) {
+    border-color: var(--destructive);
+  }
+  .ui\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/20:has([data-slot][aria-invalid='true']) {
+    --tw-ring-color: var(--destructive);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .ui\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/20:has([data-slot][aria-invalid='true']) {
+      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+    }
+  }
+  .ui\:has-\[\>\[data-align\=block-end\]\]\:h-auto:has(> [data-align='block-end']) {
+    height: auto;
+  }
+  .ui\:has-\[\>\[data-align\=block-end\]\]\:flex-col:has(> [data-align='block-end']) {
+    flex-direction: column;
+  }
+  .ui\:has-\[\>\[data-align\=block-start\]\]\:h-auto:has(> [data-align='block-start']) {
+    height: auto;
+  }
+  .ui\:has-\[\>\[data-align\=block-start\]\]\:flex-col:has(> [data-align='block-start']) {
+    flex-direction: column;
+  }
+  .ui\:has-\[\>\[data-slot\=button-group\]\]\:gap-2:has(> [data-slot='button-group']) {
+    gap: calc(var(--ui-spacing) * 2);
+  }
+  .ui\:has-\[\>\[data-slot\=checkbox-group\]\]\:gap-3:has(> [data-slot='checkbox-group']) {
+    gap: calc(var(--ui-spacing) * 3);
+  }
+  .ui\:has-\[\>\[data-slot\=field-content\]\]\:items-start:has(> [data-slot='field-content']) {
+    align-items: flex-start;
+  }
+  .ui\:has-\[\>\[data-slot\=field\]\]\:w-full:has(> [data-slot='field']) {
+    width: 100%;
+  }
+  .ui\:has-\[\>\[data-slot\=field\]\]\:flex-col:has(> [data-slot='field']) {
+    flex-direction: column;
+  }
+  .ui\:has-\[\>\[data-slot\=field\]\]\:rounded-md:has(> [data-slot='field']) {
+    border-radius: calc(var(--radius) - 2px);
+  }
+  .ui\:has-\[\>\[data-slot\=field\]\]\:border:has(> [data-slot='field']) {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .ui\:has-\[\>\[data-slot\=radio-group\]\]\:gap-3:has(> [data-slot='radio-group']) {
+    gap: calc(var(--ui-spacing) * 3);
+  }
+  .ui\:has-\[\>button\]\:ms-\[-0\.45rem\]:has(> button) {
+    margin-inline-start: -0.45rem;
+  }
+  .ui\:has-\[\>button\]\:me-\[-0\.45rem\]:has(> button) {
+    margin-inline-end: -0.45rem;
+  }
+  .ui\:has-\[\>kbd\]\:ms-\[-0\.35rem\]:has(> kbd) {
+    margin-inline-start: -0.35rem;
+  }
+  .ui\:has-\[\>kbd\]\:me-\[-0\.35rem\]:has(> kbd) {
+    margin-inline-end: -0.35rem;
+  }
+  .ui\:has-\[\>svg\]\:p-0:has(> svg) {
+    padding: calc(var(--ui-spacing) * 0);
+  }
+  .ui\:has-\[\>svg\]\:px-2:has(> svg) {
+    padding-inline: calc(var(--ui-spacing) * 2);
+  }
+  .ui\:has-\[\>svg\]\:px-2\.5:has(> svg) {
+    padding-inline: calc(var(--ui-spacing) * 2.5);
+  }
+  .ui\:has-\[\>svg\]\:px-3:has(> svg) {
+    padding-inline: calc(var(--ui-spacing) * 3);
+  }
+  .ui\:has-\[\>svg\]\:px-4:has(> svg) {
+    padding-inline: calc(var(--ui-spacing) * 4);
+  }
+  .ui\:has-\[\>textarea\]\:h-auto:has(> textarea) {
+    height: auto;
+  }
+  .ui\:aria-disabled\:pointer-events-none[aria-disabled='true'] {
+    pointer-events: none;
+  }
+  .ui\:aria-disabled\:opacity-50[aria-disabled='true'] {
+    opacity: 0.5;
+  }
+  .ui\:aria-invalid\:border-destructive[aria-invalid='true'] {
+    border-color: var(--destructive);
+  }
+  .ui\:aria-invalid\:ring-destructive\/20[aria-invalid='true'] {
+    --tw-ring-color: var(--destructive);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .ui\:aria-invalid\:ring-destructive\/20[aria-invalid='true'] {
+      --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+    }
+  }
+  .ui\:aria-selected\:bg-accent[aria-selected='true'] {
+    background-color: var(--accent);
+  }
+  .ui\:aria-selected\:text-accent-foreground[aria-selected='true'] {
+    color: var(--accent-foreground);
+  }
+  :is(.ui\:\*\*\:data-command-group\:px-2 *)[data-command-group] {
+    padding-inline: calc(var(--ui-spacing) * 2);
+  }
+  :is(.ui\:\*\*\:data-command-input\:h-12 *)[data-command-input] {
+    height: calc(var(--ui-spacing) * 12);
+  }
+  :is(.ui\:\*\*\:data-command-item\:px-2 *)[data-command-item] {
+    padding-inline: calc(var(--ui-spacing) * 2);
+  }
+  :is(.ui\:\*\*\:data-command-item\:py-3 *)[data-command-item] {
+    padding-block: calc(var(--ui-spacing) * 3);
+  }
+  .ui\:data-disabled\:pointer-events-none[data-disabled] {
+    pointer-events: none;
+  }
+  .ui\:data-disabled\:cursor-not-allowed[data-disabled] {
+    cursor: not-allowed;
+  }
+  .ui\:data-disabled\:opacity-50[data-disabled] {
+    opacity: 0.5;
+  }
+  .ui\:data-highlighted\:bg-accent[data-highlighted] {
+    background-color: var(--accent);
+  }
+  .ui\:data-highlighted\:text-accent-foreground[data-highlighted] {
+    color: var(--accent-foreground);
+  }
+  .ui\:data-inset\:pl-8[data-inset] {
+    padding-left: calc(var(--ui-spacing) * 8);
+  }
+  .ui\:data-placeholder\:text-muted-foreground[data-placeholder] {
+    color: var(--muted-foreground);
+  }
+  .ui\:data-\[active\=true\]\:bg-accent\/50[data-active='true'] {
+    background-color: var(--accent);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .ui\:data-\[active\=true\]\:bg-accent\/50[data-active='true'] {
+      background-color: color-mix(in oklab, var(--accent) 50%, transparent);
+    }
+  }
+  .ui\:data-\[active\=true\]\:bg-sidebar-accent[data-active='true'] {
+    background-color: var(--sidebar-accent);
+  }
+  .ui\:data-\[active\=true\]\:font-medium[data-active='true'] {
+    --tw-font-weight: var(--ui-font-weight-medium);
+    font-weight: var(--ui-font-weight-medium);
+  }
+  .ui\:data-\[active\=true\]\:text-accent-foreground[data-active='true'] {
+    color: var(--accent-foreground);
+  }
+  .ui\:data-\[active\=true\]\:text-sidebar-accent-foreground[data-active='true'] {
+    color: var(--sidebar-accent-foreground);
+  }
+  @media (hover: hover) {
+    .ui\:data-\[active\=true\]\:hover\:bg-accent[data-active='true']:hover {
+      background-color: var(--accent);
+    }
+  }
+  .ui\:data-\[active\=true\]\:focus\:bg-accent[data-active='true']:focus {
+    background-color: var(--accent);
+  }
+  .ui\:data-\[current\=true\]\:bg-muted[data-current='true'] {
+    background-color: var(--muted);
+  }
+  .ui\:data-\[disabled\=true\]\:pointer-events-none[data-disabled='true'] {
+    pointer-events: none;
+  }
+  .ui\:data-\[disabled\=true\]\:opacity-50[data-disabled='true'] {
+    opacity: 0.5;
+  }
+  .ui\:data-\[inset\]\:pl-8[data-inset] {
+    padding-left: calc(var(--ui-spacing) * 8);
+  }
+  .ui\:data-\[invalid\=true\]\:text-destructive[data-invalid='true'] {
+    color: var(--destructive);
+  }
+  .ui\:data-\[motion\=from-end\]\:slide-in-from-end-52[data-motion='from-end']:where(:dir(ltr), [dir='ltr']) {
+    --tw-enter-translate-x: calc(52 * var(--spacing));
+  }
+  .ui\:data-\[motion\=from-end\]\:slide-in-from-end-52[data-motion='from-end']:where(:dir(rtl), [dir='rtl']),
+  .ui\:data-\[motion\=from-start\]\:slide-in-from-start-52[data-motion='from-start']:where(:dir(ltr), [dir='ltr']) {
+    --tw-enter-translate-x: calc(52 * var(--spacing) * -1);
+  }
+  .ui\:data-\[motion\=from-start\]\:slide-in-from-start-52[data-motion='from-start']:where(:dir(rtl), [dir='rtl']) {
+    --tw-enter-translate-x: calc(52 * var(--spacing));
+  }
+  .ui\:data-\[motion\=to-end\]\:slide-out-to-end-52[data-motion='to-end']:where(:dir(ltr), [dir='ltr']) {
+    --tw-exit-translate-x: calc(52 * var(--spacing));
+  }
+  .ui\:data-\[motion\=to-end\]\:slide-out-to-end-52[data-motion='to-end']:where(:dir(rtl), [dir='rtl']),
+  .ui\:data-\[motion\=to-start\]\:slide-out-to-start-52[data-motion='to-start']:where(:dir(ltr), [dir='ltr']) {
+    --tw-exit-translate-x: calc(52 * var(--spacing) * -1);
+  }
+  .ui\:data-\[motion\=to-start\]\:slide-out-to-start-52[data-motion='to-start']:where(:dir(rtl), [dir='rtl']) {
+    --tw-exit-translate-x: calc(52 * var(--spacing));
+  }
+  .ui\:data-\[motion\^\=from-\]\:animate-in[data-motion^='from-'] {
+    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);
+  }
+  .ui\:data-\[motion\^\=from-\]\:fade-in[data-motion^='from-'] {
+    --tw-enter-opacity: 0;
+  }
+  .ui\:data-\[motion\^\=to-\]\:animate-out[data-motion^='to-'] {
+    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);
+  }
+  .ui\:data-\[motion\^\=to-\]\:fade-out[data-motion^='to-'] {
+    --tw-exit-opacity: 0;
+  }
+  .ui\:data-\[orientation\=horizontal\]\:h-px[data-orientation='horizontal'] {
+    height: 1px;
+  }
+  .ui\:data-\[orientation\=horizontal\]\:w-full[data-orientation='horizontal'] {
+    width: 100%;
+  }
+  .ui\:data-\[orientation\=vertical\]\:h-auto[data-orientation='vertical'] {
+    height: auto;
+  }
+  .ui\:data-\[orientation\=vertical\]\:h-full[data-orientation='vertical'] {
+    height: 100%;
+  }
+  .ui\:data-\[orientation\=vertical\]\:w-px[data-orientation='vertical'] {
+    width: 1px;
+  }
+  .ui\:data-\[side\=bottom\]\:-translate-x-1\/2[data-side='bottom'] {
+    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .ui\:data-\[side\=bottom\]\:-translate-y-\[calc\(-50\%\+1px\)\][data-side='bottom'] {
+    --tw-translate-y: calc(calc(-50% + 1px) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .ui\:data-\[side\=bottom\]\:translate-y-1[data-side='bottom'] {
+    --tw-translate-y: calc(var(--ui-spacing) * 1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .ui\:data-\[side\=bottom\]\:slide-in-from-top-2[data-side='bottom'] {
+    --tw-enter-translate-y: calc(2 * var(--spacing) * -1);
+  }
+  .ui\:data-\[side\=left\]\:-translate-x-1[data-side='left'] {
+    --tw-translate-x: calc(var(--ui-spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .ui\:data-\[side\=left\]\:-translate-y-\[calc\(50\%-3px\)\][data-side='left'] {
+    --tw-translate-y: calc(calc(50% - 3px) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .ui\:data-\[side\=left\]\:slide-in-from-end-2[data-side='left']:where(:dir(ltr), [dir='ltr']) {
+    --tw-enter-translate-x: calc(2 * var(--spacing));
+  }
+  .ui\:data-\[side\=left\]\:slide-in-from-end-2[data-side='left']:where(:dir(rtl), [dir='rtl']) {
+    --tw-enter-translate-x: calc(2 * var(--spacing) * -1);
+  }
+  .ui\:data-\[side\=left\]\:slide-in-from-right-2[data-side='left'] {
+    --tw-enter-translate-x: calc(2 * var(--spacing));
+  }
+  .ui\:data-\[side\=right\]\:translate-x-1[data-side='right'] {
+    --tw-translate-x: calc(var(--ui-spacing) * 1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .ui\:data-\[side\=right\]\:translate-x-\[calc\(50\%\+2px\)\][data-side='right'] {
+    --tw-translate-x: calc(50% + 2px);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .ui\:data-\[side\=right\]\:translate-y-1\/2[data-side='right'] {
+    --tw-translate-y: calc(1 / 2 * 100%);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .ui\:data-\[side\=right\]\:slide-in-from-start-2[data-side='right']:where(:dir(ltr), [dir='ltr']) {
+    --tw-enter-translate-x: calc(2 * var(--spacing) * -1);
+  }
+  .ui\:data-\[side\=right\]\:slide-in-from-start-2[data-side='right']:where(:dir(rtl), [dir='rtl']) {
+    --tw-enter-translate-x: calc(2 * var(--spacing));
+  }
+  .ui\:data-\[side\=right\]\:slide-in-from-left-2[data-side='right'] {
+    --tw-enter-translate-x: calc(2 * var(--spacing) * -1);
+  }
+  .ui\:data-\[side\=top\]\:translate-x-1\/2[data-side='top'] {
+    --tw-translate-x: calc(1 / 2 * 100%);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .ui\:data-\[side\=top\]\:-translate-y-1[data-side='top'] {
+    --tw-translate-y: calc(var(--ui-spacing) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .ui\:data-\[side\=top\]\:translate-y-\[calc\(-50\%\+2px\)\][data-side='top'] {
+    --tw-translate-y: calc(-50% + 2px);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .ui\:data-\[side\=top\]\:slide-in-from-bottom-2[data-side='top'] {
+    --tw-enter-translate-y: calc(2 * var(--spacing));
+  }
+  .ui\:data-\[size\=default\]\:h-9[data-size='default'] {
+    height: calc(var(--ui-spacing) * 9);
+  }
+  .ui\:data-\[size\=sm\]\:h-8[data-size='sm'] {
+    height: calc(var(--ui-spacing) * 8);
+  }
+  .ui\:data-\[slot\=checkbox-group\]\:gap-3[data-slot='checkbox-group'] {
+    gap: calc(var(--ui-spacing) * 3);
+  }
+  :is(.ui\:\*\:data-\[slot\=field\]\:p-4 > *)[data-slot='field'] {
+    padding: calc(var(--ui-spacing) * 4);
+  }
+  :is(.ui\:\*\:data-\[slot\=field-group\]\:gap-4 > *)[data-slot='field-group'] {
+    gap: calc(var(--ui-spacing) * 4);
+  }
+  :is(.ui\:\*\*\:data-\[slot\=navigation-menu-link\]\:focus\:ring-0 *)[data-slot='navigation-menu-link']:focus {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width))
+      var(--tw-ring-color, currentcolor);
+    box-shadow:
+      var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
+      var(--tw-shadow);
+  }
+  :is(.ui\:\*\*\:data-\[slot\=navigation-menu-link\]\:focus\:outline-none *)[data-slot='navigation-menu-link']:focus {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  :is(.ui\:\*\*\:data-\[slot\=select-value\]\:line-clamp-1 *)[data-slot='select-value'] {
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+  :is(.ui\:\*\*\:data-\[slot\=select-value\]\:flex *)[data-slot='select-value'] {
+    display: flex;
+  }
+  :is(.ui\:\*\*\:data-\[slot\=select-value\]\:items-center *)[data-slot='select-value'] {
+    align-items: center;
+  }
+  :is(.ui\:\*\*\:data-\[slot\=select-value\]\:gap-2 *)[data-slot='select-value'] {
+    gap: calc(var(--ui-spacing) * 2);
+  }
+  .ui\:data-\[state\=active\]\:bg-background[data-state='active'] {
+    background-color: var(--background);
+  }
+  .ui\:data-\[state\=active\]\:shadow-sm[data-state='active'] {
+    --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);
+  }
+  .ui\:data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\][data-state='checked'] {
+    --tw-translate-x: calc(100% - 2px);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .ui\:data-\[state\=checked\]\:border-primary[data-state='checked'] {
+    border-color: var(--primary);
+  }
+  .ui\:data-\[state\=checked\]\:bg-primary[data-state='checked'] {
+    background-color: var(--primary);
+  }
+  .ui\:data-\[state\=checked\]\:text-primary-foreground[data-state='checked'] {
+    color: var(--primary-foreground);
+  }
+  .ui\:data-\[state\=closed\]\:animate-accordion-up[data-state='closed'] {
+    animation: accordion-up var(--tw-animation-duration, var(--tw-duration, 0.2s)) var(--tw-ease, ease-out)
+      var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal)
+      var(--tw-animation-fill-mode, none);
+  }
+  .ui\: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);
+  }
+  .ui\:data-\[state\=closed\]\:duration-300[data-state='closed'] {
+    --tw-duration: 0.3s;
+    transition-duration: 0.3s;
+  }
+  .ui\:data-\[state\=closed\]\:fade-out-0[data-state='closed'] {
+    --tw-exit-opacity: 0;
+  }
+  .ui\:data-\[state\=closed\]\:zoom-out-95[data-state='closed'] {
+    --tw-exit-scale: 0.95;
+  }
+  .ui\:data-\[state\=closed\]\:slide-out-to-bottom[data-state='closed'] {
+    --tw-exit-translate-y: 100%;
+  }
+  .ui\:data-\[state\=closed\]\:slide-out-to-left[data-state='closed'] {
+    --tw-exit-translate-x: -100%;
+  }
+  .ui\:data-\[state\=closed\]\:slide-out-to-right[data-state='closed'] {
+    --tw-exit-translate-x: 100%;
+  }
+  .ui\:data-\[state\=closed\]\:slide-out-to-top[data-state='closed'] {
+    --tw-exit-translate-y: -100%;
+  }
+  .ui\:group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:animate-out:is(
+      :where(.ui\:group\/navigation-menu)[data-viewport='false'] *
+    )[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);
+  }
+  .ui\:group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:fade-out-0:is(
+      :where(.ui\:group\/navigation-menu)[data-viewport='false'] *
+    )[data-state='closed'] {
+    --tw-exit-opacity: 0;
+  }
+  .ui\:group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:zoom-out-95:is(
+      :where(.ui\:group\/navigation-menu)[data-viewport='false'] *
+    )[data-state='closed'] {
+    --tw-exit-scale: 0.95;
+  }
+  .ui\:data-\[state\=hidden\]\:animate-out[data-state='hidden'] {
+    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);
+  }
+  .ui\:data-\[state\=hidden\]\:fade-out[data-state='hidden'] {
+    --tw-exit-opacity: 0;
+  }
+  .ui\:data-\[state\=off\]\:text-muted-foreground[data-state='off'] {
+    color: var(--muted-foreground);
+  }
+  @media (hover: hover) {
+    .ui\:hover\:data-\[state\=off\]\:text-accent-foreground:hover[data-state='off'] {
+      color: var(--accent-foreground);
+    }
+  }
+  .ui\:data-\[state\=on\]\:bg-accent[data-state='on'] {
+    background-color: var(--accent);
+  }
+  .ui\:data-\[state\=on\]\:bg-transparent[data-state='on'] {
+    background-color: #0000;
+  }
+  .ui\:data-\[state\=on\]\:text-accent-foreground[data-state='on'] {
+    color: var(--accent-foreground);
+  }
+  .ui\:data-\[state\=on\]\:text-muted-foreground[data-state='on'] {
+    color: var(--muted-foreground);
+  }
+  @media (hover: hover) {
+    .ui\:hover\:data-\[state\=on\]\:text-accent-foreground:hover[data-state='on'] {
+      color: var(--accent-foreground);
+    }
+  }
+  .ui\:data-\[state\=open\]\:animate-accordion-down[data-state='open'] {
+    animation: accordion-down var(--tw-animation-duration, var(--tw-duration, 0.2s)) var(--tw-ease, ease-out)
+      var(--tw-animation-delay, 0s) var(--tw-animation-iteration-count, 1) var(--tw-animation-direction, normal)
+      var(--tw-animation-fill-mode, none);
+  }
+  .ui\: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);
+  }
+  .ui\:data-\[state\=open\]\:bg-accent[data-state='open'] {
+    background-color: var(--accent);
+  }
+  .ui\:data-\[state\=open\]\:text-accent-foreground[data-state='open'] {
+    color: var(--accent-foreground);
+  }
+  .ui\:data-\[state\=open\]\:opacity-100[data-state='open'] {
+    opacity: 1;
+  }
+  .ui\:data-\[state\=open\]\:duration-500[data-state='open'] {
+    --tw-duration: 0.5s;
+    transition-duration: 0.5s;
+  }
+  .ui\:data-\[state\=open\]\:fade-in-0[data-state='open'] {
+    --tw-enter-opacity: 0;
+  }
+  .ui\:data-\[state\=open\]\:zoom-in-90[data-state='open'] {
+    --tw-enter-scale: 0.9;
+  }
+  .ui\:data-\[state\=open\]\:zoom-in-95[data-state='open'] {
+    --tw-enter-scale: 0.95;
+  }
+  .ui\:data-\[state\=open\]\:slide-in-from-bottom[data-state='open'] {
+    --tw-enter-translate-y: 100%;
+  }
+  .ui\:data-\[state\=open\]\:slide-in-from-left[data-state='open'] {
+    --tw-enter-translate-x: -100%;
+  }
+  .ui\:data-\[state\=open\]\:slide-in-from-right[data-state='open'] {
+    --tw-enter-translate-x: 100%;
+  }
+  .ui\:data-\[state\=open\]\:slide-in-from-top[data-state='open'] {
+    --tw-enter-translate-y: -100%;
+  }
+  .ui\:group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:animate-in:is(
+      :where(.ui\:group\/navigation-menu)[data-viewport='false'] *
+    )[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);
+  }
+  .ui\:group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:fade-in-0:is(
+      :where(.ui\:group\/navigation-menu)[data-viewport='false'] *
+    )[data-state='open'] {
+    --tw-enter-opacity: 0;
+  }
+  .ui\:group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:zoom-in-95:is(
+      :where(.ui\:group\/navigation-menu)[data-viewport='false'] *
+    )[data-state='open'] {
+    --tw-enter-scale: 0.95;
+  }
+  @media (hover: hover) {
+    .ui\:data-\[state\=open\]\:hover\:bg-sidebar-accent[data-state='open']:hover {
+      background-color: var(--sidebar-accent);
+    }
+    .ui\:data-\[state\=open\]\:hover\:text-sidebar-accent-foreground[data-state='open']:hover {
+      color: var(--sidebar-accent-foreground);
+    }
+  }
+  .ui\:data-\[state\=selected\]\:bg-muted[data-state='selected'] {
+    background-color: var(--muted);
+  }
+  .ui\:data-\[state\=unchecked\]\:translate-x-0[data-state='unchecked'] {
+    --tw-translate-x: calc(var(--ui-spacing) * 0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .ui\:data-\[state\=unchecked\]\:bg-input[data-state='unchecked'] {
+    background-color: var(--input);
+  }
+  .ui\:data-\[state\=visible\]\:animate-in[data-state='visible'] {
+    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);
+  }
+  .ui\:data-\[state\=visible\]\:fade-in[data-state='visible'] {
+    --tw-enter-opacity: 0;
+  }
+  .ui\:data-\[variant\=destructive\]\:text-destructive[data-variant='destructive'] {
+    color: var(--destructive);
+  }
+  .ui\:data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant='destructive']:focus {
+    background-color: var(--destructive);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .ui\:data-\[variant\=destructive\]\:focus\:bg-destructive\/10[data-variant='destructive']:focus {
+      background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+    }
+  }
+  .ui\:data-\[variant\=destructive\]\:focus\:text-destructive[data-variant='destructive']:focus {
+    color: var(--destructive);
+  }
+  .ui\:data-\[variant\=destructive\]\:data-highlighted\:bg-destructive\/10[data-variant='destructive'][data-highlighted] {
+    background-color: var(--destructive);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .ui\:data-\[variant\=destructive\]\:data-highlighted\:bg-destructive\/10[data-variant='destructive'][data-highlighted] {
+      background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+    }
+  }
+  .ui\:data-\[variant\=destructive\]\:data-highlighted\:text-destructive[data-variant='destructive'][data-highlighted] {
+    color: var(--destructive);
+  }
+  .ui\:data-\[variant\=label\]\:text-sm[data-variant='label'] {
+    font-size: var(--ui-text-sm);
+    line-height: var(--tw-leading, var(--ui-text-sm--line-height));
+  }
+  .ui\:data-\[variant\=legend\]\:text-base[data-variant='legend'] {
+    font-size: var(--ui-text-base);
+    line-height: var(--tw-leading, var(--ui-text-base--line-height));
+  }
+  .ui\:data-\[vaul-drawer-direction\=bottom\]\:inset-x-0[data-vaul-drawer-direction='bottom'] {
+    inset-inline: calc(var(--ui-spacing) * 0);
+  }
+  .ui\:data-\[vaul-drawer-direction\=bottom\]\:bottom-0[data-vaul-drawer-direction='bottom'] {
+    bottom: calc(var(--ui-spacing) * 0);
+  }
+  .ui\:data-\[vaul-drawer-direction\=bottom\]\:mt-24[data-vaul-drawer-direction='bottom'] {
+    margin-top: calc(var(--ui-spacing) * 24);
+  }
+  .ui\:data-\[vaul-drawer-direction\=bottom\]\:max-h-\[80vh\][data-vaul-drawer-direction='bottom'] {
+    max-height: 80vh;
+  }
+  .ui\:data-\[vaul-drawer-direction\=bottom\]\:rounded-t-lg[data-vaul-drawer-direction='bottom'] {
+    border-top-left-radius: var(--radius);
+    border-top-right-radius: var(--radius);
+  }
+  .ui\:data-\[vaul-drawer-direction\=bottom\]\:border-t[data-vaul-drawer-direction='bottom'] {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 1px;
+  }
+  .ui\:data-\[vaul-drawer-direction\=left\]\:inset-y-0[data-vaul-drawer-direction='left'] {
+    inset-block: calc(var(--ui-spacing) * 0);
+  }
+  .ui\:data-\[vaul-drawer-direction\=left\]\:start-0[data-vaul-drawer-direction='left'] {
+    inset-inline-start: calc(var(--ui-spacing) * 0);
+  }
+  .ui\:data-\[vaul-drawer-direction\=left\]\:w-3\/4[data-vaul-drawer-direction='left'] {
+    width: 75%;
+  }
+  .ui\:data-\[vaul-drawer-direction\=left\]\:border-e[data-vaul-drawer-direction='left'] {
+    border-inline-end-style: var(--tw-border-style);
+    border-inline-end-width: 1px;
+  }
+  .ui\:data-\[vaul-drawer-direction\=right\]\:inset-y-0[data-vaul-drawer-direction='right'] {
+    inset-block: calc(var(--ui-spacing) * 0);
+  }
+  .ui\:data-\[vaul-drawer-direction\=right\]\:end-0[data-vaul-drawer-direction='right'] {
+    inset-inline-end: calc(var(--ui-spacing) * 0);
+  }
+  .ui\:data-\[vaul-drawer-direction\=right\]\:w-3\/4[data-vaul-drawer-direction='right'] {
+    width: 75%;
+  }
+  .ui\:data-\[vaul-drawer-direction\=right\]\:border-s[data-vaul-drawer-direction='right'] {
+    border-inline-start-style: var(--tw-border-style);
+    border-inline-start-width: 1px;
+  }
+  .ui\:data-\[vaul-drawer-direction\=top\]\:inset-x-0[data-vaul-drawer-direction='top'] {
+    inset-inline: calc(var(--ui-spacing) * 0);
+  }
+  .ui\:data-\[vaul-drawer-direction\=top\]\:top-0[data-vaul-drawer-direction='top'] {
+    top: calc(var(--ui-spacing) * 0);
+  }
+  .ui\:data-\[vaul-drawer-direction\=top\]\:mb-24[data-vaul-drawer-direction='top'] {
+    margin-bottom: calc(var(--ui-spacing) * 24);
+  }
+  .ui\:data-\[vaul-drawer-direction\=top\]\:max-h-\[80vh\][data-vaul-drawer-direction='top'] {
+    max-height: 80vh;
+  }
+  .ui\:data-\[vaul-drawer-direction\=top\]\:rounded-b-lg[data-vaul-drawer-direction='top'] {
+    border-bottom-right-radius: var(--radius);
+    border-bottom-left-radius: var(--radius);
+  }
+  .ui\:data-\[vaul-drawer-direction\=top\]\:border-b[data-vaul-drawer-direction='top'] {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+  .ui\:nth-last-2\:-mt-1:nth-last-child(2) {
+    margin-top: calc(var(--ui-spacing) * -1);
+  }
+  @media (min-width: 40rem) {
+    .ui\:sm\:flex {
+      display: flex;
+    }
+    .ui\:sm\:max-w-lg {
+      max-width: var(--ui-container-lg);
+    }
+    .ui\:sm\:max-w-sm {
+      max-width: var(--ui-container-sm);
+    }
+    .ui\:sm\:flex-row {
+      flex-direction: row;
+    }
+    .ui\:sm\:justify-end {
+      justify-content: flex-end;
+    }
+    .ui\:sm\:gap-2\.5 {
+      gap: calc(var(--ui-spacing) * 2.5);
+    }
+    .ui\:sm\:pr-2\.5 {
+      padding-right: calc(var(--ui-spacing) * 2.5);
+    }
+    .ui\:sm\:pl-2\.5 {
+      padding-left: calc(var(--ui-spacing) * 2.5);
+    }
+    .ui\:data-\[vaul-drawer-direction\=left\]\:sm\:max-w-sm[data-vaul-drawer-direction='left'],
+    .ui\:data-\[vaul-drawer-direction\=right\]\:sm\:max-w-sm[data-vaul-drawer-direction='right'] {
+      max-width: var(--ui-container-sm);
+    }
+  }
+  @media (min-width: 48rem) {
+    .ui\:md\:block {
+      display: block;
+    }
+    .ui\:md\:flex {
+      display: flex;
+    }
+    .ui\:md\:p-12 {
+      padding: calc(var(--ui-spacing) * 12);
+    }
+    .ui\:md\:text-sm {
+      font-size: var(--ui-text-sm);
+      line-height: var(--tw-leading, var(--ui-text-sm--line-height));
+    }
+    .ui\:md\:opacity-0 {
+      opacity: 0;
+    }
+    .ui\:md\:peer-data-\[variant\=inset\]\:m-2:is(:where(.ui\:peer)[data-variant='inset'] ~ *) {
+      margin: calc(var(--ui-spacing) * 2);
+    }
+    .ui\:md\:peer-data-\[variant\=inset\]\:ml-0:is(:where(.ui\:peer)[data-variant='inset'] ~ *) {
+      margin-left: calc(var(--ui-spacing) * 0);
+    }
+    .ui\:md\:peer-data-\[variant\=inset\]\:rounded-xl:is(:where(.ui\:peer)[data-variant='inset'] ~ *) {
+      border-radius: calc(var(--radius) + 4px);
+    }
+    .ui\:md\:peer-data-\[variant\=inset\]\:shadow-sm:is(:where(.ui\:peer)[data-variant='inset'] ~ *) {
+      --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);
+    }
+    .ui\:md\:peer-data-\[variant\=inset\]\:peer-data-\[state\=collapsed\]\:ml-2:is(
+        :where(.ui\:peer)[data-variant='inset'] ~ *
+      ):is(:where(.ui\:peer)[data-state='collapsed'] ~ *) {
+      margin-left: calc(var(--ui-spacing) * 2);
+    }
+    .ui\:md\:after\:hidden:after {
+      content: var(--tw-content);
+      display: none;
+    }
+  }
+  .ui\:dark\:scale-0:where(.dark, .dark *) {
+    --tw-scale-x: 0%;
+    --tw-scale-y: 0%;
+    --tw-scale-z: 0%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+  .ui\:dark\:scale-100:where(.dark, .dark *) {
+    --tw-scale-x: 100%;
+    --tw-scale-y: 100%;
+    --tw-scale-z: 100%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+  .ui\:dark\:-rotate-90:where(.dark, .dark *) {
+    rotate: -90deg;
+  }
+  .ui\:dark\:rotate-0:where(.dark, .dark *) {
+    rotate: none;
+  }
+  .ui\:dark\:border-input:where(.dark, .dark *) {
+    border-color: var(--input);
+  }
+  .ui\:dark\:bg-destructive\/60:where(.dark, .dark *) {
+    background-color: var(--destructive);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .ui\:dark\:bg-destructive\/60:where(.dark, .dark *) {
+      background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
+    }
+  }
+  .ui\:dark\:bg-destructive\/70:where(.dark, .dark *) {
+    background-color: var(--destructive);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .ui\:dark\:bg-destructive\/70:where(.dark, .dark *) {
+      background-color: color-mix(in oklab, var(--destructive) 70%, transparent);
+    }
+  }
+  .ui\:dark\:bg-input\/30:where(.dark, .dark *) {
+    background-color: var(--input);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .ui\:dark\:bg-input\/30:where(.dark, .dark *) {
+      background-color: color-mix(in oklab, var(--input) 30%, transparent);
+    }
+  }
+  .ui\:dark\:bg-transparent:where(.dark, .dark *) {
+    background-color: #0000;
+  }
+  .ui\:dark\:text-muted-foreground:where(.dark, .dark *) {
+    color: var(--muted-foreground);
+  }
+  @media (hover: hover) {
+    .ui\:dark\:hover\:bg-input\/50:where(.dark, .dark *):hover {
+      background-color: var(--input);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .ui\:dark\:hover\:bg-input\/50:where(.dark, .dark *):hover {
+        background-color: color-mix(in oklab, var(--input) 50%, transparent);
+      }
+    }
+  }
+  .ui\:dark\:focus-visible\:ring-destructive\/40:where(.dark, .dark *):focus-visible {
+    --tw-ring-color: var(--destructive);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .ui\:dark\:focus-visible\:ring-destructive\/40:where(.dark, .dark *):focus-visible {
+      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+    }
+  }
+  :where([data-slot='tooltip-content'])
+    .ui\:dark\:in-data-\[slot\=tooltip-content\]\:bg-background\/10:where(.dark, .dark *) {
+    background-color: var(--background);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    :where([data-slot='tooltip-content'])
+      .ui\:dark\:in-data-\[slot\=tooltip-content\]\:bg-background\/10:where(.dark, .dark *) {
+      background-color: color-mix(in oklab, var(--background) 10%, transparent);
+    }
+  }
+  .ui\:dark\:has-data-\[state\=checked\]\:bg-primary\/10:where(.dark, .dark *):has([data-state='checked']) {
+    background-color: var(--primary);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .ui\:dark\:has-data-\[state\=checked\]\:bg-primary\/10:where(.dark, .dark *):has([data-state='checked']) {
+      background-color: color-mix(in oklab, var(--primary) 10%, transparent);
+    }
+  }
+  .ui\:dark\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/40:where(.dark, .dark *):has(
+      [data-slot][aria-invalid='true']
+    ) {
+    --tw-ring-color: var(--destructive);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .ui\:dark\:has-\[\[data-slot\]\[aria-invalid\=true\]\]\:ring-destructive\/40:where(.dark, .dark *):has(
+        [data-slot][aria-invalid='true']
+      ) {
+      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+    }
+  }
+  .ui\:dark\:aria-invalid\:ring-destructive\/40:where(.dark, .dark *)[aria-invalid='true'] {
+    --tw-ring-color: var(--destructive);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .ui\:dark\:aria-invalid\:ring-destructive\/40:where(.dark, .dark *)[aria-invalid='true'] {
+      --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+    }
+  }
+  .ui\:dark\:data-\[state\=active\]\:border-input:where(.dark, .dark *)[data-state='active'] {
+    border-color: var(--input);
+  }
+  .ui\:dark\:data-\[state\=active\]\:bg-input\/30:where(.dark, .dark *)[data-state='active'] {
+    background-color: var(--input);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .ui\:dark\:data-\[state\=active\]\:bg-input\/30:where(.dark, .dark *)[data-state='active'] {
+      background-color: color-mix(in oklab, var(--input) 30%, transparent);
+    }
+  }
+  .ui\:dark\:data-\[state\=active\]\:text-foreground:where(.dark, .dark *)[data-state='active'] {
+    color: var(--foreground);
+  }
+  .ui\:dark\:data-\[state\=checked\]\:bg-primary:where(.dark, .dark *)[data-state='checked'] {
+    background-color: var(--primary);
+  }
+  .ui\:dark\:data-\[state\=checked\]\:bg-primary-foreground:where(.dark, .dark *)[data-state='checked'] {
+    background-color: var(--primary-foreground);
+  }
+  .ui\:dark\:data-\[state\=unchecked\]\:bg-foreground:where(.dark, .dark *)[data-state='unchecked'] {
+    background-color: var(--foreground);
+  }
+  .ui\:dark\:data-\[state\=unchecked\]\:bg-input\/80:where(.dark, .dark *)[data-state='unchecked'] {
+    background-color: var(--input);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .ui\:dark\:data-\[state\=unchecked\]\:bg-input\/80:where(.dark, .dark *)[data-state='unchecked'] {
+      background-color: color-mix(in oklab, var(--input) 80%, transparent);
+    }
+  }
+  .ui\:\[\&_\[data-command-group\]\:not\(\[hidden\]\)_\~\[data-command-group\]\]\:pt-0
+    [data-command-group]:not([hidden])
+    ~ [data-command-group] {
+    padding-top: calc(var(--ui-spacing) * 0);
+  }
+  .ui\:\[\&_\[data-command-input-wrapper\]_svg\]\:h-5 [data-command-input-wrapper] svg {
+    height: calc(var(--ui-spacing) * 5);
+  }
+  .ui\:\[\&_\[data-command-input-wrapper\]_svg\]\:w-5 [data-command-input-wrapper] svg {
+    width: calc(var(--ui-spacing) * 5);
+  }
+  .ui\:\[\&_\[data-command-item\]_svg\]\:h-5 [data-command-item] svg {
+    height: calc(var(--ui-spacing) * 5);
+  }
+  .ui\:\[\&_\[data-command-item\]_svg\]\:w-5 [data-command-item] svg {
+    width: calc(var(--ui-spacing) * 5);
+  }
+  .ui\:\[\&_img\]\:size-full img {
+    width: 100%;
+    height: 100%;
+  }
+  .ui\:\[\&_img\]\:object-cover img {
+    object-fit: cover;
+  }
+  .ui\:\[\&_svg\]\:pointer-events-none svg {
+    pointer-events: none;
+  }
+  .ui\:\[\&_svg\]\:shrink-0 svg {
+    flex-shrink: 0;
+  }
+  .ui\:\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3 svg:not([class*='size-']) {
+    width: calc(var(--ui-spacing) * 3);
+    height: calc(var(--ui-spacing) * 3);
+  }
+  .ui\:\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*='size-']) {
+    width: calc(var(--ui-spacing) * 4);
+    height: calc(var(--ui-spacing) * 4);
+  }
+  .ui\:\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-6 svg:not([class*='size-']) {
+    width: calc(var(--ui-spacing) * 6);
+    height: calc(var(--ui-spacing) * 6);
+  }
+  .ui\:\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*='text-']) {
+    color: var(--muted-foreground);
+  }
+  .ui\:\[\&_tr\]\:border-b tr {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+  .ui\:\[\&_tr\:last-child\]\:border-0 tr:last-child {
+    border-style: var(--tw-border-style);
+    border-width: 0;
+  }
+  .ui\:\[\&\+\[data-slot\=item-content\]\]\:flex-none + [data-slot='item-content'] {
+    flex: none;
+  }
+  .ui\:\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role='checkbox']) {
+    padding-right: calc(var(--ui-spacing) * 0);
+  }
+  .ui\:\[\.border-b\]\:pb-3.border-b {
+    padding-bottom: calc(var(--ui-spacing) * 3);
+  }
+  .ui\:\[\.border-b\]\:pb-6.border-b {
+    padding-bottom: calc(var(--ui-spacing) * 6);
+  }
+  .ui\:\[\.border-t\]\:pt-3.border-t {
+    padding-top: calc(var(--ui-spacing) * 3);
+  }
+  .ui\:\[\.border-t\]\:pt-6.border-t {
+    padding-top: calc(var(--ui-spacing) * 6);
+  }
+  .ui\:\[a\]\:transition-colors:is(a) {
+    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(--ui-default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--ui-default-transition-duration));
+  }
+  @media (hover: hover) {
+    .ui\:\[a\]\:hover\:bg-accent\/50:is(a):hover {
+      background-color: var(--accent);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .ui\:\[a\]\:hover\:bg-accent\/50:is(a):hover {
+        background-color: color-mix(in oklab, var(--accent) 50%, transparent);
+      }
+    }
+  }
+  :is(.ui\:\*\:\[span\]\:last\:flex > *):is(span):last-child {
+    display: flex;
+  }
+  :is(.ui\:\*\:\[span\]\:last\:items-center > *):is(span):last-child {
+    align-items: center;
+  }
+  :is(.ui\:\*\:\[span\]\:last\:gap-2 > *):is(span):last-child {
+    gap: calc(var(--ui-spacing) * 2);
+  }
+  :is(.ui\:data-\[variant\=destructive\]\:\*\:\[svg\]\:text-destructive\![data-variant='destructive'] > *):is(svg) {
+    color: var(--destructive) !important;
+  }
+  .ui\:\[\&\>\*\]\:focus-visible\:relative > :focus-visible {
+    position: relative;
+  }
+  .ui\:\[\&\>\*\]\:focus-visible\:z-10 > :focus-visible {
+    z-index: 10;
+  }
+  .ui\:\[\&\>\*\:not\(\:first-child\)\]\:rounded-s-none > :not(:first-child) {
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+  .ui\:\[\&\>\*\:not\(\:first-child\)\]\:rounded-t-none > :not(:first-child) {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+  .ui\:\[\&\>\*\:not\(\:first-child\)\]\:border-s-0 > :not(:first-child) {
+    border-inline-start-style: var(--tw-border-style);
+    border-inline-start-width: 0;
+  }
+  .ui\:\[\&\>\*\:not\(\:first-child\)\]\:border-t-0 > :not(:first-child) {
+    border-top-style: var(--tw-border-style);
+    border-top-width: 0;
+  }
+  .ui\:\[\&\>\*\:not\(\:last-child\)\]\:rounded-e-none > :not(:last-child) {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+  .ui\:\[\&\>\*\:not\(\:last-child\)\]\:rounded-b-none > :not(:last-child) {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .ui\:has-\[select\[aria-hidden\=true\]\:last-child\]\:\[\&\>\[data-slot\=select-trigger\]\:last-of-type\]\:rounded-e-md:has(
+      :is(select[aria-hidden='true']:last-child)
+    )
+    > [data-slot='select-trigger']:last-of-type {
+    border-start-end-radius: calc(var(--radius) - 2px);
+    border-end-end-radius: calc(var(--radius) - 2px);
+  }
+  .ui\:\[\&\>\[data-slot\=select-trigger\]\:not\(\[class\*\=\'w-\'\]\)\]\:w-fit
+    > [data-slot='select-trigger']:not([class*='w-']) {
+    width: fit-content;
+  }
+  .ui\:has-\[\>\[data-slot\=field-content\]\]\:\[\&\>\[role\=checkbox\]\,\[role\=radio\]\]\:mt-px:has(
+      > [data-slot='field-content']
+    )
+    > [role='checkbox'],
+  .ui\:has-\[\>\[data-slot\=field-content\]\]\:\[\&\>\[role\=checkbox\]\,\[role\=radio\]\]\:mt-px:has(
+      > [data-slot='field-content']
+    )
+    [role='radio'] {
+    margin-top: 1px;
+  }
+  .ui\:\[\&\>a\]\:underline > a {
+    text-decoration-line: underline;
+  }
+  .ui\:\[\&\>a\]\:underline-offset-4 > a {
+    text-underline-offset: 4px;
+  }
+  .ui\:\[\&\>a\:hover\]\:text-primary > a:hover {
+    color: var(--primary);
+  }
+  .ui\:\[\&\>button\]\:hidden > button {
+    display: none;
+  }
+  .ui\:\[\&\>input\]\:flex-1 > input {
+    flex: 1;
+  }
+  .ui\:has-\[\>\[data-align\=block-end\]\]\:\[\&\>input\]\:pt-3:has(> [data-align='block-end']) > input {
+    padding-top: calc(var(--ui-spacing) * 3);
+  }
+  .ui\:has-\[\>\[data-align\=block-start\]\]\:\[\&\>input\]\:pb-3:has(> [data-align='block-start']) > input {
+    padding-bottom: calc(var(--ui-spacing) * 3);
+  }
+  .ui\:has-\[\>\[data-align\=inline-end\]\]\:\[\&\>input\]\:pe-2:has(> [data-align='inline-end']) > input {
+    padding-inline-end: calc(var(--ui-spacing) * 2);
+  }
+  .ui\:has-\[\>\[data-align\=inline-start\]\]\:\[\&\>input\]\:ps-2:has(> [data-align='inline-start']) > input {
+    padding-inline-start: calc(var(--ui-spacing) * 2);
+  }
+  .ui\:\[\&\>kbd\]\:rounded-\[calc\(var\(--radius\)-5px\)\] > kbd {
+    border-radius: calc(var(--radius) - 5px);
+  }
+  .ui\:\[\&\>span\:last-child\]\:truncate > span:last-child {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  .ui\:\[\&\>svg\]\:pointer-events-none > svg {
+    pointer-events: none;
+  }
+  .ui\:\[\&\>svg\]\:size-2\.5 > svg {
+    width: calc(var(--ui-spacing) * 2.5);
+    height: calc(var(--ui-spacing) * 2.5);
+  }
+  .ui\:\[\&\>svg\]\:size-3 > svg {
+    width: calc(var(--ui-spacing) * 3);
+    height: calc(var(--ui-spacing) * 3);
+  }
+  .ui\:\[\&\>svg\]\:size-3\.5 > svg {
+    width: calc(var(--ui-spacing) * 3.5);
+    height: calc(var(--ui-spacing) * 3.5);
+  }
+  .ui\:\[\&\>svg\]\:size-4 > svg {
+    width: calc(var(--ui-spacing) * 4);
+    height: calc(var(--ui-spacing) * 4);
+  }
+  .ui\:\[\&\>svg\]\:shrink-0 > svg {
+    flex-shrink: 0;
+  }
+  .ui\:\[\&\>svg\]\:text-muted-foreground > svg {
+    color: var(--muted-foreground);
+  }
+  .ui\:\[\&\>svg\]\:text-sidebar-accent-foreground > svg {
+    color: var(--sidebar-accent-foreground);
+  }
+  .ui\:\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5 > svg:not([class*='size-']) {
+    width: calc(var(--ui-spacing) * 3.5);
+    height: calc(var(--ui-spacing) * 3.5);
+  }
+  .ui\:\[\&\>svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 > svg:not([class*='size-']) {
+    width: calc(var(--ui-spacing) * 4);
+    height: calc(var(--ui-spacing) * 4);
+  }
+  @media (hover: hover) {
+    :is(
+        .ui\:hover\:\[\&\,\&\>svelte-css-wrapper\]\:\[\&\>th\,td\]\:bg-muted\/50:hover,
+        .ui\:hover\:\[\&\,\&\>svelte-css-wrapper\]\:\[\&\>th\,td\]\:bg-muted\/50:hover > svelte-css-wrapper
+      )
+      > th,
+    :is(
+        .ui\:hover\:\[\&\,\&\>svelte-css-wrapper\]\:\[\&\>th\,td\]\:bg-muted\/50:hover,
+        .ui\:hover\:\[\&\,\&\>svelte-css-wrapper\]\:\[\&\>th\,td\]\:bg-muted\/50:hover > svelte-css-wrapper
+      )
+      td {
+      background-color: var(--muted);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      :is(
+          .ui\:hover\:\[\&\,\&\>svelte-css-wrapper\]\:\[\&\>th\,td\]\:bg-muted\/50:hover,
+          .ui\:hover\:\[\&\,\&\>svelte-css-wrapper\]\:\[\&\>th\,td\]\:bg-muted\/50:hover > svelte-css-wrapper
+        )
+        > th,
+      :is(
+          .ui\:hover\:\[\&\,\&\>svelte-css-wrapper\]\:\[\&\>th\,td\]\:bg-muted\/50:hover,
+          .ui\:hover\:\[\&\,\&\>svelte-css-wrapper\]\:\[\&\>th\,td\]\:bg-muted\/50:hover > svelte-css-wrapper
+        )
+        td {
+        background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+      }
+    }
+  }
+  .ui\:\[\&\>tr\]\:last\:border-b-0 > tr:last-child {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 0;
+  }
+  .ui\:\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state='open'] > svg {
+    rotate: 180deg;
+  }
+  [data-side='left'][data-collapsible='offcanvas']
+    .ui\:\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2 {
+    right: calc(var(--ui-spacing) * -2);
+  }
+  [data-side='left'][data-state='collapsed'] .ui\:\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize {
+    cursor: e-resize;
+  }
+  [data-side='right'][data-collapsible='offcanvas']
+    .ui\:\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2 {
+    left: calc(var(--ui-spacing) * -2);
+  }
+  [data-side='right'][data-state='collapsed']
+    .ui\:\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize {
+    cursor: w-resize;
+  }
+  [data-variant='legend'] + .ui\:\[\[data-variant\=legend\]\+\&\]\:-mt-1\.5 {
+    margin-top: calc(var(--ui-spacing) * -1.5);
+  }
+  @media (hover: hover) {
+    a.ui\:\[a\&\]\:hover\:bg-accent:hover {
+      background-color: var(--accent);
+    }
+    a.ui\:\[a\&\]\:hover\:bg-destructive\/90:hover {
+      background-color: var(--destructive);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      a.ui\:\[a\&\]\:hover\:bg-destructive\/90:hover {
+        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
+      }
+    }
+    a.ui\:\[a\&\]\:hover\:bg-primary\/90:hover {
+      background-color: var(--primary);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      a.ui\:\[a\&\]\:hover\:bg-primary\/90:hover {
+        background-color: color-mix(in oklab, var(--primary) 90%, transparent);
+      }
+    }
+    a.ui\:\[a\&\]\:hover\:bg-secondary\/80:hover {
+      background-color: var(--secondary);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      a.ui\:\[a\&\]\:hover\:bg-secondary\/80:hover {
+        background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
+      }
+    }
+    a.ui\:\[a\&\]\:hover\:bg-secondary\/90:hover {
+      background-color: var(--secondary);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      a.ui\:\[a\&\]\:hover\:bg-secondary\/90:hover {
+        background-color: color-mix(in oklab, var(--secondary) 90%, transparent);
+      }
+    }
+    a.ui\:\[a\&\]\:hover\:text-accent-foreground:hover {
+      color: var(--accent-foreground);
+    }
+    a.ui\:\[a\&\]\:hover\:underline:hover {
+      text-decoration-line: underline;
+    }
+    a.ui\:dark\:\[a\&\]\:hover\:bg-accent\/50:where(.dark, .dark *):hover {
+      background-color: var(--accent);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      a.ui\:dark\:\[a\&\]\:hover\:bg-accent\/50:where(.dark, .dark *):hover {
+        background-color: color-mix(in oklab, var(--accent) 50%, transparent);
+      }
+    }
+  }
+}
+@property --tw-animation-delay {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0s;
+}
+@property --tw-animation-direction {
+  syntax: '*';
+  inherits: false;
+  initial-value: normal;
+}
+@property --tw-animation-duration {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-animation-fill-mode {
+  syntax: '*';
+  inherits: false;
+  initial-value: none;
+}
+@property --tw-animation-iteration-count {
+  syntax: '*';
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-enter-blur {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-enter-opacity {
+  syntax: '*';
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-enter-rotate {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-enter-scale {
+  syntax: '*';
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-enter-translate-x {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-enter-translate-y {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-exit-blur {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-exit-opacity {
+  syntax: '*';
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-exit-rotate {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-exit-scale {
+  syntax: '*';
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-exit-translate-x {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-exit-translate-y {
+  syntax: '*';
+  inherits: false;
+  initial-value: 0;
+}
+:root {
+  --radius: 0.625rem;
+  --background: oklch(100% 0 0);
+  --foreground: oklch(14.7% 0.004 49.25);
+  --card: oklch(100% 0 0);
+  --card-foreground: oklch(14.7% 0.004 49.25);
+  --popover: oklch(100% 0 0);
+  --popover-foreground: oklch(14.7% 0.004 49.25);
+  --primary: oklch(21.6% 0.006 56.043);
+  --primary-foreground: oklch(98.5% 0.001 106.423);
+  --secondary: oklch(97% 0.001 106.424);
+  --secondary-foreground: oklch(21.6% 0.006 56.043);
+  --muted: oklch(97% 0.001 106.424);
+  --muted-foreground: oklch(55.3% 0.013 58.071);
+  --accent: oklch(96.7% 0.001 286.375);
+  --accent-foreground: oklch(21.6% 0.006 56.043);
+  --destructive: oklch(57.7% 0.245 27.325);
+  --border: oklch(92.3% 0.003 48.717);
+  --input: oklch(92.3% 0.003 48.717);
+  --ring: oklch(70.9% 0.01 56.259);
+  --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(100% 0 0);
+  --sidebar-foreground: oklch(14.7% 0.004 49.25);
+  --sidebar-primary: oklch(21.6% 0.006 56.043);
+  --sidebar-primary-foreground: oklch(98.5% 0.001 106.423);
+  --sidebar-accent: oklch(97% 0.001 106.424);
+  --sidebar-accent-foreground: oklch(21.6% 0.006 56.043);
+  --sidebar-border: oklch(92.3% 0.003 48.717);
+  --sidebar-ring: oklch(70.9% 0.01 56.259);
+}
+.dark {
+  --background: oklch(14.7% 0.004 49.25);
+  --foreground: oklch(98.5% 0.001 106.423);
+  --card: oklch(21.6% 0.006 56.043);
+  --card-foreground: oklch(98.5% 0.001 106.423);
+  --popover: oklch(21.6% 0.006 56.043);
+  --popover-foreground: oklch(98.5% 0.001 106.423);
+  --primary: oklch(92.3% 0.003 48.717);
+  --primary-foreground: oklch(21.6% 0.006 56.043);
+  --secondary: oklch(26.8% 0.007 34.298);
+  --secondary-foreground: oklch(98.5% 0.001 106.423);
+  --muted: oklch(26.8% 0.007 34.298);
+  --muted-foreground: oklch(70.9% 0.01 56.259);
+  --accent: oklch(26.8% 0.007 34.298);
+  --accent-foreground: oklch(98.5% 0.001 106.423);
+  --destructive: oklch(70.4% 0.191 22.216);
+  --border: oklch(100% 0 0/0.1);
+  --input: oklch(100% 0 0/0.15);
+  --ring: oklch(55.3% 0.013 58.071);
+  --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: oklch(0% 0 0);
+  --sidebar-foreground: oklch(98.5% 0.001 106.423);
+  --sidebar-primary: oklch(48.8% 0.243 264.376);
+  --sidebar-primary-foreground: oklch(98.5% 0.001 106.423);
+  --sidebar-accent: oklch(26.8% 0.007 34.298);
+  --sidebar-accent-foreground: oklch(98.5% 0.001 106.423);
+  --sidebar-border: oklch(100% 0 0/0.1);
+  --sidebar-ring: oklch(55.3% 0.013 58.071);
+}
+@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-border-style {
+  syntax: '*';
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-leading {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-tracking {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-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-backdrop-blur {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-backdrop-brightness {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-backdrop-contrast {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-backdrop-grayscale {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-backdrop-hue-rotate {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-backdrop-invert {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-backdrop-opacity {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-backdrop-saturate {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-backdrop-sepia {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-duration {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-ease {
+  syntax: '*';
+  inherits: false;
+}
+@property --tw-content {
+  syntax: '*';
+  inherits: false;
+  initial-value: '';
+}
+@property --tw-outline-style {
+  syntax: '*';
+  inherits: false;
+  initial-value: solid;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+@keyframes enter {
+  0% {
+    opacity: var(--tw-enter-opacity, 1);
+    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0)
+      scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1))
+      rotate(var(--tw-enter-rotate, 0));
+    filter: blur(var(--tw-enter-blur, 0));
+  }
+}
+@keyframes exit {
+  to {
+    opacity: var(--tw-exit-opacity, 1);
+    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0)
+      scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1))
+      rotate(var(--tw-exit-rotate, 0));
+    filter: blur(var(--tw-exit-blur, 0));
+  }
+}
+@keyframes accordion-down {
+  0% {
+    height: 0;
+  }
+  to {
+    height: var(
+      --radix-accordion-content-height,
+      var(
+        --bits-accordion-content-height,
+        var(
+          --reka-accordion-content-height,
+          var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto))
+        )
+      )
+    );
+  }
+}
+@keyframes accordion-up {
+  0% {
+    height: var(
+      --radix-accordion-content-height,
+      var(
+        --bits-accordion-content-height,
+        var(
+          --reka-accordion-content-height,
+          var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto))
+        )
+      )
+    );
+  }
+  to {
+    height: 0;
+  }
+}
diff --git a/packages/utils/package.json b/packages/utils/package.json
index a0e27d41..9e80acf9 100644
--- a/packages/utils/package.json
+++ b/packages/utils/package.json
@@ -44,7 +44,8 @@
   },
   "scripts": {
     "build": "tsc",
-    "dev": "tsc --watch"
+    "dev": "tsc --watch",
+    "format": "prettier --write ."
   },
   "peerDependencies": {
     "zod": "^4.1.8"
diff --git a/packages/utils/src/functions/fileValidation.ts b/packages/utils/src/functions/fileValidation.ts
index 5f0b2fcd..658c5750 100644
--- a/packages/utils/src/functions/fileValidation.ts
+++ b/packages/utils/src/functions/fileValidation.ts
@@ -2,13 +2,7 @@
  * Server-side file type validation utilities for preventing malicious uploads
  * Specifically designed to prevent SVG XSS attacks and other security issues
  */
-export const ALLOWED_IMAGE_TYPES = [
-  'image/jpeg',
-  'image/jpg',
-  'image/png',
-  'image/gif',
-  'image/webp'
-] as const;
+export const ALLOWED_IMAGE_TYPES = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp'] as const;
 
 export const ALLOWED_EXTENSIONS = ['.jpg', '.jpeg', '.png', '.gif', '.webp'] as const;
 
diff --git a/packages/utils/src/functions/index.ts b/packages/utils/src/functions/index.ts
index f9db706c..6232789a 100644
--- a/packages/utils/src/functions/index.ts
+++ b/packages/utils/src/functions/index.ts
@@ -1 +1 @@
-export * from './fileValidation';
\ No newline at end of file
+export * from './fileValidation';
diff --git a/packages/utils/src/validation/README.md b/packages/utils/src/validation/README.md
index 54807932..164c4de6 100644
--- a/packages/utils/src/validation/README.md
+++ b/packages/utils/src/validation/README.md
@@ -40,11 +40,10 @@ Schemas are used **without custom error messages** - just validation rules:
 import { ZCourseClone } from '@cio/utils/validation';
 import { zValidator } from '@hono/zod-validator';
 
-export const cloneRouter = new Hono()
-  .post('/', zValidator('json', ZCourseClone), async (c) => {
-    const data = c.req.valid('json'); // Fully typed!
-    // ... handle validated data
-  });
+export const cloneRouter = new Hono().post('/', zValidator('json', ZCourseClone), async (c) => {
+  const data = c.req.valid('json'); // Fully typed!
+  // ... handle validated data
+});
 ```
 
 ### Frontend Usage (Dashboard)
@@ -60,13 +59,13 @@ let errors: Record<string, string> = {};
 
 function handleSubmit() {
   const result = ZEmailData.safeParse(formData);
-  
+
   if (!result.success) {
     // Automatically maps to translations using convention
     errors = mapZodErrorsToTranslations(result.error);
     return;
   }
-  
+
   // Use validated data
   doSomething(result.data);
 }
@@ -83,9 +82,9 @@ Schemas are clean with **no custom error messages**:
 ```typescript
 // ✅ Clean schema (in @cio/utils)
 export const ZEmailData = z.object({
-  to: z.string().email(),        // No message
-  subject: z.string().min(1),    // No message
-  content: z.string().min(10)    // No message
+  to: z.string().email(), // No message
+  subject: z.string().min(1), // No message
+  content: z.string().min(10) // No message
 });
 ```
 
@@ -97,12 +96,12 @@ validations.{fieldName}.{errorCode}
 
 ### Example Translation Keys
 
-| Field | Validation | Error Code | Translation Key |
-|-------|-----------|------------|-----------------|
-| `to` | `.email()` | `invalid_string` | `validations.to.invalid_email` |
-| `subject` | `.min(1)` | `too_small` | `validations.subject.too_small` |
-| `username` | `.min(3)` | `too_small` | `validations.username.too_small` |
-| `username` | `.max(20)` | `too_big` | `validations.username.too_big` |
+| Field      | Validation | Error Code       | Translation Key                  |
+| ---------- | ---------- | ---------------- | -------------------------------- |
+| `to`       | `.email()` | `invalid_string` | `validations.to.invalid_email`   |
+| `subject`  | `.min(1)`  | `too_small`      | `validations.subject.too_small`  |
+| `username` | `.min(3)`  | `too_small`      | `validations.username.too_small` |
+| `username` | `.max(20)` | `too_big`        | `validations.username.too_big`   |
 
 ### Translation File Example
 
@@ -139,14 +138,14 @@ validations.{fieldName}.{errorCode}
 
 ### Common Error Codes
 
-| Zod Error | When It Occurs |
-|-----------|----------------|
-| `too_small` | String too short, number too small, array too few items |
-| `too_big` | String too long, number too large, array too many items |
-| `invalid_email` | Invalid email format (from `.email()`) |
-| `invalid_url` | Invalid URL format (from `.url()`) |
-| `invalid_type` | Wrong type (e.g., undefined when string expected) |
-| `invalid_enum_value` | Value not in allowed options |
+| Zod Error            | When It Occurs                                          |
+| -------------------- | ------------------------------------------------------- |
+| `too_small`          | String too short, number too small, array too few items |
+| `too_big`            | String too long, number too large, array too many items |
+| `invalid_email`      | Invalid email format (from `.email()`)                  |
+| `invalid_url`        | Invalid URL format (from `.url()`)                      |
+| `invalid_type`       | Wrong type (e.g., undefined when string expected)       |
+| `invalid_enum_value` | Value not in allowed options                            |
 
 ## Naming Convention
 
@@ -165,14 +164,14 @@ import * as z from 'zod';
 /**
  * Lesson Create Validation Schema
  * Used for creating new lessons
- * 
+ *
  * Translation keys:
  * - validations.title.too_small
  * - validations.duration.too_small
  */
 export const ZLessonCreate = z.object({
-  title: z.string().min(1),       // Clean - no message
-  duration: z.number().min(1)     // Clean - no message
+  title: z.string().min(1), // Clean - no message
+  duration: z.number().min(1) // Clean - no message
 });
 export type TLessonCreate = z.infer<typeof ZLessonCreate>;
 
@@ -186,7 +185,7 @@ export * from './lesson';
 // packages/utils/src/validation/index.ts
 export * from './course';
 export * from './mail';
-export * from './lesson';  // Add this
+export * from './lesson'; // Add this
 ```
 
 ### 3. Use in API
@@ -196,11 +195,10 @@ export * from './lesson';  // Add this
 import { ZLessonCreate } from '@cio/utils/validation/lesson';
 import { zValidator } from '@hono/zod-validator';
 
-export const lessonRouter = new Hono()
-  .post('/', zValidator('json', ZLessonCreate), async (c) => {
-    const data = c.req.valid('json');
-    // ... create lesson
-  });
+export const lessonRouter = new Hono().post('/', zValidator('json', ZLessonCreate), async (c) => {
+  const data = c.req.valid('json');
+  // ... create lesson
+});
 ```
 
 ### 4. Add Translations in Frontend
@@ -232,13 +230,13 @@ let errors = {};
 
 function handleSubmit() {
   const result = ZLessonCreate.safeParse(formData);
-  
+
   if (!result.success) {
     errors = mapZodErrorsToTranslations(result.error);
     // errors.title = "Title is required" (translated)
     return;
   }
-  
+
   createLesson(result.data);
 }
 ```
@@ -258,8 +256,8 @@ export const ZUserProfile = z.object({
 
 // ❌ Bad - Hardcoded messages
 export const ZUserProfile = z.object({
-  email: z.string().email('Invalid email'),           // Don't do this
-  username: z.string().min(3, 'Too short')            // Don't do this
+  email: z.string().email('Invalid email'), // Don't do this
+  username: z.string().min(3, 'Too short') // Don't do this
 });
 
 // ❌ Bad - Translated messages in schema
@@ -273,7 +271,9 @@ export const ZUserProfile = z.object({
 ### 2. Always Export Types
 
 ```typescript
-export const ZCourseClone = z.object({ /* ... */ });
+export const ZCourseClone = z.object({
+  /* ... */
+});
 export type TCourseClone = z.infer<typeof ZCourseClone>;
 ```
 
@@ -285,7 +285,7 @@ Help frontend developers know which translation keys to add:
 /**
  * User Profile Validation Schema
  * Used for updating user profile information
- * 
+ *
  * Translation keys (convention-based):
  * - validations.email.invalid_email
  * - validations.username.too_small
@@ -328,9 +328,15 @@ Keep related schemas together in the same entity folder:
 
 ```typescript
 // validation/user/user.ts
-export const ZUserCreate = z.object({ /* ... */ });
-export const ZUserUpdate = z.object({ /* ... */ });
-export const ZUserProfile = z.object({ /* ... */ });
+export const ZUserCreate = z.object({
+  /* ... */
+});
+export const ZUserUpdate = z.object({
+  /* ... */
+});
+export const ZUserProfile = z.object({
+  /* ... */
+});
 ```
 
 ### 6. Don't Duplicate Schemas
@@ -341,7 +347,7 @@ export const ZUserProfile = z.object({ /* ... */ });
 // ❌ Bad - Reimplementing in frontend
 // apps/dashboard/src/schemas/user.ts
 export const userSchema = z.object({
-  email: z.string().email(t.get('validations.email.invalid')),
+  email: z.string().email(t.get('validations.email.invalid'))
   // ... duplicating from @cio/utils
 });
 
diff --git a/packages/utils/src/validation/auth/forgot.ts b/packages/utils/src/validation/auth/forgot.ts
index 8e919ddf..8d4ef555 100644
--- a/packages/utils/src/validation/auth/forgot.ts
+++ b/packages/utils/src/validation/auth/forgot.ts
@@ -1,7 +1,7 @@
 import * as z from 'zod';
 
 export const ForgotPasswordSchema = z.object({
-    email: z.email(),
+  email: z.email()
 });
 
-export type TForgotPassword = z.infer<typeof ForgotPasswordSchema>;
\ No newline at end of file
+export type TForgotPassword = z.infer<typeof ForgotPasswordSchema>;
diff --git a/packages/utils/src/validation/auth/reset.ts b/packages/utils/src/validation/auth/reset.ts
index b3049bda..9a1ffa39 100644
--- a/packages/utils/src/validation/auth/reset.ts
+++ b/packages/utils/src/validation/auth/reset.ts
@@ -1,9 +1,9 @@
 import * as z from 'zod';
 
 export const ResetPasswordSchema = z.object({
-    password: z.string().min(8),
-    confirmPassword: z.string().min(8),
-    token: z.string(),
+  password: z.string().min(8),
+  confirmPassword: z.string().min(8),
+  token: z.string()
 });
 
 export type TResetPassword = z.infer<typeof ResetPasswordSchema>;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e4cf7ad1..5394581d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,6 +15,9 @@ importers:
       '@cio/tsconfig':
         specifier: workspace:*
         version: link:packages/tsconfig
+      '@evilmartians/lefthook':
+        specifier: ^1.13.6
+        version: 1.13.6
       concurrently:
         specifier: ^8.2.2
         version: 8.2.2
@@ -22,14 +25,14 @@ importers:
         specifier: ^9.36.0
         version: 9.39.2(jiti@2.6.1)
       prettier:
-        specifier: ^3.1.0
-        version: 3.7.4
+        specifier: ^3.6.2
+        version: 3.6.2
       prettier-plugin-svelte:
-        specifier: ^3.4.0
-        version: 3.4.1(prettier@3.7.4)(svelte@5.46.0)
+        specifier: ^3.4.1
+        version: 3.4.1(prettier@3.6.2)(svelte@5.46.0)
       prettier-plugin-tailwindcss:
         specifier: ^0.5.7
-        version: 0.5.14(prettier-plugin-svelte@3.4.1(prettier@3.7.4)(svelte@5.46.0))(prettier@3.7.4)
+        version: 0.5.14(prettier-plugin-svelte@3.4.1(prettier@3.6.2)(svelte@5.46.0))(prettier@3.6.2)
       standard-version:
         specifier: ^9.5.0
         version: 9.5.0
@@ -637,7 +640,7 @@ importers:
         version: 3.3.1(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.30.2)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.30.2)(sass@1.97.1)))
       '@sveltejs/adapter-vercel':
         specifier: ^4.0.0
-        version: 4.0.5(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.30.2)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.30.2)(sass@1.97.1)))
+        version: 4.0.5(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.30.2)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.30.2)(sass@1.97.1)))(encoding@0.1.13)
       '@sveltejs/kit':
         specifier: ^2.5.27
         version: 2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.30.2)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.30.2)(sass@1.97.1))
@@ -3005,6 +3008,12 @@ packages:
     resolution: {integrity: sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@evilmartians/lefthook@1.13.6':
+    resolution: {integrity: sha512-79vplrUBWL4Fkt59YkEBdSpqBVhNrY8t5+jEp+wX5QbsmbQLcSULqwS7FmbNRyECa2LWMrUWpe6ENIfNwB4jiw==}
+    cpu: [x64, arm64, ia32]
+    os: [darwin, linux, win32]
+    hasBin: true
+
   '@fastify/busboy@2.1.1':
     resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==}
     engines: {node: '>=14'}
@@ -9959,6 +9968,11 @@ packages:
       prettier-plugin-svelte:
         optional: true
 
+  prettier@3.6.2:
+    resolution: {integrity: sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==}
+    engines: {node: '>=14'}
+    hasBin: true
+
   prettier@3.7.4:
     resolution: {integrity: sha512-v6UNi1+3hSlVvv8fSaoUbggEM5VErKmmpGA7Pl3HF8V6uKY7rvClBOJlH6yNwQtfTueNkGVpOv/mtWL9L4bgRA==}
     engines: {node: '>=14'}
@@ -14121,6 +14135,8 @@ snapshots:
       '@eslint/core': 0.17.0
       levn: 0.4.1
 
+  '@evilmartians/lefthook@1.13.6': {}
+
   '@fastify/busboy@2.1.1': {}
 
   '@floating-ui/core@1.7.3':
@@ -16271,7 +16287,7 @@ snapshots:
       - encoding
       - supports-color
 
-  '@sveltejs/adapter-vercel@4.0.5(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.30.2)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.30.2)(sass@1.97.1)))':
+  '@sveltejs/adapter-vercel@4.0.5(@sveltejs/kit@2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.30.2)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.30.2)(sass@1.97.1)))(encoding@0.1.13)':
     dependencies:
       '@sveltejs/kit': 2.49.2(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.30.2)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@24.10.4)(lightningcss@1.30.2)(sass@1.97.1))
       '@vercel/nft': 0.26.5(encoding@0.1.13)
@@ -22578,16 +22594,21 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
+  prettier-plugin-svelte@3.4.1(prettier@3.6.2)(svelte@5.46.0):
+    dependencies:
+      prettier: 3.6.2
+      svelte: 5.46.0
+
   prettier-plugin-svelte@3.4.1(prettier@3.7.4)(svelte@5.46.0):
     dependencies:
       prettier: 3.7.4
       svelte: 5.46.0
 
-  prettier-plugin-tailwindcss@0.5.14(prettier-plugin-svelte@3.4.1(prettier@3.7.4)(svelte@5.46.0))(prettier@3.7.4):
+  prettier-plugin-tailwindcss@0.5.14(prettier-plugin-svelte@3.4.1(prettier@3.6.2)(svelte@5.46.0))(prettier@3.6.2):
     dependencies:
-      prettier: 3.7.4
+      prettier: 3.6.2
     optionalDependencies:
-      prettier-plugin-svelte: 3.4.1(prettier@3.7.4)(svelte@5.46.0)
+      prettier-plugin-svelte: 3.4.1(prettier@3.6.2)(svelte@5.46.0)
 
   prettier-plugin-tailwindcss@0.6.14(prettier-plugin-svelte@3.4.1(prettier@3.7.4)(svelte@5.46.0))(prettier@3.7.4):
     dependencies:
@@ -22595,6 +22616,8 @@ snapshots:
     optionalDependencies:
       prettier-plugin-svelte: 3.4.1(prettier@3.7.4)(svelte@5.46.0)
 
+  prettier@3.6.2: {}
+
   prettier@3.7.4: {}
 
   pretty-format@27.5.1: