From c31ad639557ddeb3899f557243f1d5d12c96a3ed Mon Sep 17 00:00:00 2001
From: Rotimi Best <best@classroomio.com>
Date: Sat, 9 May 2026 06:05:03 +0100
Subject: [PATCH] chore: ai, public course and other ui improvements

---
 .../plans/ai_assistant_prd_5a6f948c.plan.md   |    8 +-
 .cursor/plans/labs_prd.md                     |  942 ++++++++++++++
 AGENTS.md                                     |   25 +-
 PRD-TRACKER.md                                |   26 +-
 README.md                                     |   11 +-
 apps/api/.env.example                         |    1 +
 .../src/__tests__/ai-credits-usage.test.ts    |   55 +
 .../api/src/__tests__/question-update.test.ts |   32 +
 apps/api/src/app.ts                           |   18 +-
 apps/api/src/constants/index.ts               |    1 -
 apps/api/src/routes/agent/agent.ts            |  462 +++++++
 apps/api/src/routes/agent/chat.ts             | 1097 -----------------
 apps/api/src/routes/agent/credits.ts          |   35 -
 apps/api/src/routes/agent/history.ts          |   41 +-
 apps/api/src/routes/agent/index.ts            |    7 +-
 apps/api/src/routes/agent/status.ts           |   58 -
 apps/api/src/routes/agent/upload.ts           |   91 --
 apps/api/src/routes/agent/usage.ts            |   21 -
 apps/api/src/routes/course/exercise.ts        |   72 +-
 apps/api/src/routes/org-site/index.ts         |    1 +
 apps/api/src/routes/org-site/public-course.ts |   55 +
 .../src/services/agent/agent-tool-schemas.ts  |  239 ++++
 apps/api/src/services/agent/chat-context.ts   |  160 +++
 apps/api/src/services/agent/chat-tools.ts     |  655 ++++++++++
 apps/api/src/services/agent/context-window.ts |   46 +-
 .../api/src/services/agent/credit-purchase.ts |   21 +
 apps/api/src/services/agent/document.ts       |   10 +-
 .../api/src/services/agent/question-update.ts |   11 +-
 .../src/services/agent/title-generation.ts    |   71 +-
 apps/api/src/services/agent/usage.ts          |  232 ++--
 .../services/course-import/course-import.ts   |   23 +-
 apps/api/src/services/course/clone.ts         |   54 +-
 apps/api/src/services/course/completion.ts    |   16 +-
 apps/api/src/services/course/content.ts       |  203 +--
 apps/api/src/services/course/course.ts        |   63 +-
 apps/api/src/services/course/invite.ts        |  151 +--
 apps/api/src/services/course/landing-page.ts  |   24 +-
 .../services/course/public-course-guard.ts    |   61 +
 apps/api/src/services/course/public-course.ts |  151 +++
 apps/api/src/services/course/slug.ts          |   42 +
 apps/api/src/services/exercise/exercise.ts    |  394 +++++-
 apps/api/src/services/exercise/utils.ts       |    9 +
 .../src/services/exercise/video-recording.ts  |  217 ++++
 apps/api/src/services/lesson/lesson.ts        |   31 +-
 apps/api/src/services/organization/invite.ts  |  243 ++--
 apps/api/src/services/program/program.ts      |   58 +-
 .../api/src/services/submission/submission.ts |   91 +-
 apps/dashboard/.env.example                   |    5 +
 apps/dashboard/package.json                   |    3 +-
 .../components/Navigation/CustomLinks.svelte  |    1 -
 .../agent/api/credit-purchase.server.ts       |   25 +
 .../ai-assistant/ai-course-chat.svelte        |  282 +++--
 .../ai-assistant/api/ai-assistant.svelte.ts   |   17 +
 .../features/ai-assistant/chat-header.svelte  |   24 +-
 .../features/ai-assistant/chat-input.svelte   |   41 +-
 .../ai-assistant/message-bubble.svelte        |   16 +-
 .../features/ai-assistant/model-picker.svelte |   49 -
 .../features/ai-assistant/plan-view.svelte    |   20 +-
 .../ai-assistant/utils/course-plan.ts         |   18 +
 .../lib/features/ai-assistant/utils/store.ts  |   21 +
 .../ai-assistant/utils/tool-labels.ts         |    6 +
 .../features/ai-assistant/utils/tool-parts.ts |   12 +-
 .../lib/features/ai-assistant/utils/types.ts  |   18 +
 .../lib/features/course/api/course.svelte.ts  |   16 +-
 .../features/course/api/exercise.svelte.ts    |   94 +-
 .../lib/features/course/api/lesson.svelte.ts  |   15 +-
 .../course/components/card-dropdown.svelte    |  112 +-
 .../features/course/components/card.svelte    |   22 +-
 .../course/components/course-header.svelte    |   41 +-
 .../course/components/course-list-row.svelte  |   72 +-
 .../components/course-public-badge.svelte     |   19 +
 .../exercise/delete-confirmation.svelte       |   19 +-
 .../components/exercise/edit-mode.svelte      |  458 +++++--
 .../exercise/exercise-settings-tab.svelte     |   27 +-
 .../course/components/exercise/functions.ts   |    1 +
 .../course/components/exercise/preview.svelte |   66 +-
 .../components/exercise/question-labels.ts    |  105 ++
 .../exercise/question-type-select.svelte      |   66 +
 .../exercise/question-type-utils.ts           |   17 +
 .../components/exercise/section-editor.svelte |  184 +++
 .../course/components/exercise/store.ts       |  320 ++++-
 .../exercise/submissions/individual.svelte    |   75 +-
 .../exercise/submissions/summary.svelte       |   77 +-
 .../components/exercise/view-mode.svelte      |  543 ++++++--
 .../lesson/lesson-page-edit-header.svelte     |   31 +-
 .../course/components/new-course-modal.svelte |   23 +-
 .../components/question-container.svelte      |    3 +
 .../lib/features/course/pages/exercise.svelte |  213 +++-
 .../lib/features/course/pages/lesson.svelte   |   13 +-
 .../lib/features/course/pages/lessons.svelte  |   35 +
 .../lib/features/course/pages/newsfeed.svelte |    6 +-
 .../lib/features/course/pages/settings.svelte |  135 +-
 .../src/lib/features/course/store.ts          |    2 +
 .../src/lib/features/course/types.ts          |    1 +
 .../features/course/utils/course-preview.ts   |   39 +-
 .../course/utils/exercise-page-utils.ts       |   61 +-
 .../course/utils/exercise-section-utils.ts    |   15 +
 .../course/utils/public-course-mappers.ts     |  121 ++
 .../features/course/utils/settings-store.ts   |    9 +-
 .../src/lib/features/course/utils/types.ts    |   22 +
 .../features/license/api/license.svelte.ts    |    2 +-
 .../lib/features/lms/pages/dashboard.svelte   |  118 +-
 .../settings/api/ai-credits.svelte.ts         |   51 +
 .../ai-credits/buy-tokens-card.svelte         |   95 ++
 .../ai-credits/team-leaderboard.svelte        |   84 ++
 .../components/ai-credits/usage-chart.svelte  |   59 +
 .../ai-credits/usage-summary-cards.svelte     |   88 ++
 .../features/settings/pages/ai-credits.svelte |   40 +
 .../features/settings/pages/billing.svelte    |   74 --
 .../src/lib/features/settings/pages/index.ts  |    1 +
 .../src/lib/features/settings/utils/types.ts  |   14 +
 .../course-landing-page.svelte                |  235 ++--
 .../features/ui/navigation/org-navigation.ts  |   26 +-
 .../src/lib/features/ui/question/constants.ts |    7 +-
 .../sidebar/org-sidebar/org-switcher.svelte   |    4 +-
 .../src/lib/utils/constants/routes.ts         |    4 +-
 .../src/lib/utils/services/org/quiz.ts        |    8 +-
 .../src/lib/utils/translations/da.json        |  198 ++-
 .../src/lib/utils/translations/de.json        |  198 ++-
 .../src/lib/utils/translations/en.json        |  217 +++-
 .../src/lib/utils/translations/es.json        |  198 ++-
 .../src/lib/utils/translations/fr.json        |  198 ++-
 .../src/lib/utils/translations/hi.json        |  198 ++-
 .../src/lib/utils/translations/pl.json        |  198 ++-
 .../src/lib/utils/translations/pt.json        |  198 ++-
 .../src/lib/utils/translations/ru.json        |  198 ++-
 .../src/lib/utils/translations/vi.json        |  198 ++-
 apps/dashboard/src/lib/utils/types/org.ts     |   10 +
 apps/dashboard/src/lib/utils/types/polar.ts   |   34 +-
 .../routes/(app)/courses/[id]/+layout.svelte  |    8 +-
 .../[id]/exercises/[exerciseId]/+page.svelte  |    2 +-
 .../routes/(app)/org/[slug]/+layout.server.ts |    2 +-
 .../routes/(app)/org/[slug]/+page.server.ts   |   61 +-
 .../src/routes/(app)/org/[slug]/+page.svelte  |  401 +++---
 .../(app)/org/[slug]/dash/+page.server.ts     |   62 +
 .../routes/(app)/org/[slug]/dash/+page.svelte |  236 ++++
 .../[slug]/settings/ai-credits/+page.svelte   |   21 +
 .../(app)/programs/[id]/courses/+page.svelte  |    7 +-
 .../(app)/programs/[id]/newsfeed/+page.svelte |    6 +-
 .../(org-site)/course/[slug]/+page.server.ts  |   25 +-
 .../(org-site)/course/[slug]/+page.svelte     |    9 +-
 .../course/[slug]/enroll/+page.server.ts      |    4 +-
 .../course/[slug]/enroll/+page.svelte         |    8 +-
 .../[slug]/lesson/[itemSlug]/+page.server.ts  |   66 +
 .../[slug]/lesson/[itemSlug]/+page.svelte     |   98 ++
 .../routes/api/polar/buy-tokens/+server.ts    |   64 +
 .../src/routes/api/polar/webhook/+server.ts   |  128 +-
 .../webhook/__tests__/order-paid.fixture.json |   18 +
 apps/dashboard/static/sticky-test.css         |    2 -
 apps/dashboard/static/sticky-test.html        |  103 --
 apps/dashboard/vite.config.ts                 |    4 +
 apps/website/src/app.css                      |    2 -
 apps/website/src/app.html                     |    5 +
 .../src/lib/components/ai-section.svelte      |    4 +-
 apps/website/src/lib/components/footer.svelte |    4 +-
 .../src/lib/components/navigation.svelte      |  333 +++--
 .../src/lib/components/page-header.svelte     |   14 +-
 .../routes/(marketing)/bootcamps/+page.svelte |    6 +-
 .../customer-education/+page.svelte           |    4 +-
 .../employee-training/+page.svelte            |    6 +-
 apps/website/src/routes/pricing/+page.svelte  |    3 +
 package.json                                  |    8 +-
 packages/ai-assistant/package.json            |    2 +
 packages/ai-assistant/src/prompt/teacher.ts   |   27 +-
 packages/ai-assistant/src/providers/index.ts  |   13 +-
 packages/ai-assistant/src/tools/index.ts      |    6 +
 packages/ai-assistant/src/tools/teacher.ts    |   74 +-
 packages/ai-assistant/src/types.ts            |    5 +-
 .../src/migrations/0004_ai_chat_document.sql  |   21 -
 .../db/src/queries/agent/chat-document.ts     |    4 +-
 .../db/src/queries/agent/chat-resource.ts     |   54 +
 .../db/src/queries/agent/credit-purchase.ts   |  136 ++
 packages/db/src/queries/agent/index.ts        |    4 +
 packages/db/src/queries/agent/token-usage.ts  |  144 +++
 .../src/queries/agent/usage-aggregations.ts   |   68 +
 .../db/src/queries/course/content-batch.ts    |  186 +++
 packages/db/src/queries/course/course.ts      |   48 +
 packages/db/src/queries/course/index.ts       |    3 +-
 packages/db/src/queries/course/invite.ts      |   98 +-
 .../db/src/queries/course/public-course.ts    |  534 ++++++++
 .../src/queries/exercise/exercise-section.ts  |  136 ++
 packages/db/src/queries/exercise/exercise.ts  |    2 -
 packages/db/src/queries/exercise/index.ts     |    2 +-
 packages/db/src/queries/group/group.ts        |   33 +
 packages/db/src/queries/index.ts              |    1 +
 .../db/src/queries/organization/invite.ts     |  176 ++-
 .../src/queries/organization/organization.ts  |   44 +
 packages/db/src/queries/program/program.ts    |    6 +-
 packages/db/src/queries/query-errors.ts       |   15 +
 packages/db/src/schema.ts                     |  102 +-
 packages/db/src/types.ts                      |    3 +
 packages/db/src/utils/seed/questionType.ts    |    6 +
 packages/question-types/src/answer-codecs.ts  |   63 +-
 packages/question-types/src/answer-data.ts    |   17 +-
 .../src/exercise-section-types.ts             |   21 +
 packages/question-types/src/exercise-types.ts |   51 +-
 packages/question-types/src/index.ts          |    2 +
 .../src/question-answer-payload.ts            |   17 +-
 .../src/question-type-capabilities.ts         |   11 +
 .../question-types/src/question-type-keys.ts  |    3 +-
 .../src/question-type-registry.ts             |    9 +
 .../question-types/src/render-contract.ts     |    3 +
 .../src/video-recording-settings.ts           |   14 +
 .../tests/question-type-registry.test.ts      |   23 +
 .../animation/animation.stories.svelte        |   25 +
 .../course-creator.stories.svelte             |   61 +
 .../exercise-question.stories.svelte          |  155 +++
 .../exercise-question/question-fixtures.ts    |   56 +
 .../exercise-question/question-labels.ts      |   35 +
 .../question-type-modes.svelte                |   22 +-
 .../model-picker/model-picker.stories.svelte  |   45 +
 .../newsfeed-reactions.stories.svelte         |    2 +-
 .../src/molecules/public-course/fixtures.ts   |  187 +++
 .../public-course.stories.svelte              |  121 ++
 packages/ui/README.md                         |    1 +
 packages/ui/src/base/card/card.svelte         |    2 +-
 packages/ui/src/base/number-badge/index.ts    |    1 +
 .../src/base/number-badge/number-badge.svelte |   36 +
 packages/ui/src/base/page/page-header.svelte  |    2 +-
 packages/ui/src/base/textarea/textarea.svelte |    2 +-
 .../toggle-group/toggle-group-item.svelte     |    2 +-
 .../custom/animation/blurfade/blurfade.svelte |    2 +-
 .../animation/dot-field/dot-field.svelte      |  287 +++++
 .../src/custom/animation/dot-field/index.ts   |    1 +
 .../gradual-spacing/gradual-spacing.svelte    |    2 +-
 packages/ui/src/custom/animation/index.ts     |    1 +
 .../src/custom/course-card/course-card.svelte |   35 +
 .../course-creator/course-creator.svelte      |  126 ++
 .../ui/src/custom/course-creator/index.ts     |    4 +
 .../editor/extensions/FindAndReplace.ts       |   36 +-
 .../ui/src/custom/exercise-question/index.ts  |    8 +
 .../exercise-question/question-list.svelte    |    7 +-
 .../question-renderer.svelte                  |   25 +-
 .../exercise-question/renderer-contract.ts    |   11 +
 .../renderers/checkbox/edit.svelte            |    4 +-
 .../renderers/checkbox/take.svelte            |    2 +
 .../renderers/radio/edit.svelte               |    4 +-
 .../renderers/radio/take.svelte               |    2 +
 .../renderers/video-recording/edit.svelte     |   68 +
 .../renderers/video-recording/format.ts       |   15 +
 .../renderers/video-recording/preview.svelte  |   25 +
 .../video-recording/submission.svelte         |   70 ++
 .../renderers/video-recording/take.svelte     |  481 ++++++++
 .../section-after-behavior.svelte             |   71 ++
 .../exercise-question/section-header.svelte   |   69 ++
 .../section-navigation-sidebar.svelte         |   48 +
 .../exercise-question/section-overview.svelte |   93 ++
 packages/ui/src/custom/model-picker/index.ts  |    4 +
 .../custom/model-picker/model-picker.svelte   |  117 ++
 .../custom/org-landing-page/bold/hero.svelte  |    1 +
 .../org-landing-page/classic/hero.svelte      |    7 +-
 .../org-landing-page/minimal/hero.svelte      |    7 +-
 .../ui/src/custom/org-landing-page/types.ts   |    2 +-
 .../ui/src/custom/password/password.svelte    |    4 +-
 .../custom/public-course/bottom-nav.svelte    |   81 ++
 .../src/custom/public-course/callout.svelte   |   62 +
 .../custom/public-course/exercise-view.svelte |  422 +++++++
 .../custom/public-course/footer-nav.svelte    |   96 ++
 packages/ui/src/custom/public-course/index.ts |   29 +
 .../custom/public-course/lesson-view.svelte   |   85 ++
 .../custom/public-course/mobile-sheet.svelte  |   73 ++
 .../custom/public-course/powered-by.svelte    |   53 +
 .../public-exercise-attempts-storage.ts       |   71 ++
 .../ui/src/custom/public-course/shell.svelte  |  243 ++++
 .../custom/public-course/sidebar-row.svelte   |   59 +
 .../src/custom/public-course/sidebar.svelte   |   72 ++
 packages/ui/src/custom/public-course/types.ts |   75 ++
 .../question-type-picker/exercise-labels.ts   |   35 +
 .../question-type-picker/picker-data.ts       |   16 +
 .../question-type-picker.svelte               |   41 +-
 .../src/custom/widget-layouts/carousel.svelte |    3 +-
 packages/ui/src/index.ts                      |    2 +
 packages/ui/src/output.css                    |    2 +-
 packages/utils/src/agent-models/index.ts      |   43 +-
 packages/utils/src/constants/error-codes.ts   |    3 +
 packages/utils/src/plans/data.ts              |    4 +-
 packages/utils/src/plans/index.ts             |    1 +
 packages/utils/src/plans/token-packs.ts       |   13 +
 packages/utils/src/validation/agent/agent.ts  |   33 +-
 .../utils/src/validation/course/callout.ts    |   20 +
 .../utils/src/validation/course/course.ts     |    8 +-
 packages/utils/src/validation/course/index.ts |    2 +
 .../src/validation/course/public-course.ts    |   19 +
 .../validation/exercise/exercise-section.ts   |   23 +
 .../utils/src/validation/exercise/exercise.ts |   34 +-
 .../utils/src/validation/exercise/index.ts    |    2 +
 .../validation/exercise/video-recording.ts    |   38 +
 packages/utils/src/validation/index.ts        |    1 +
 .../utils/src/validation/lesson/lesson.ts     |    6 +-
 packages/utils/src/validation/shared/index.ts |    1 +
 packages/utils/src/validation/shared/slug.ts  |   57 +
 pnpm-lock.yaml                                |  216 ++--
 .../README.md                                 |    4 +
 .../implementation-plan.md                    |    0
 .../README.md                                 |    2 +-
 .../UX.md                                     |    0
 .../README.md                                 |    6 +-
 .../implementation-plan.md                    |    0
 .../README.md                                 |    2 +-
 prd/exercise-question-types [DONE]/README.md  |    2 +-
 .../README.md                                 |  258 ++--
 .../implementation-plan.md                    |  264 ++--
 .../README.md                                 |   28 +-
 .../consumption-spec.md                       |    0
 .../implementation-plan.md                    |    2 +-
 .../README.md                                 |    4 +
 .../implementation-plan.md                    |    0
 prd/{programs => programs [DONE]}/README.md   |    4 +
 .../README.md                                 |   28 +-
 prd/public-courses/README.md                  |  673 ++++------
 .../design/lesson-page-full.png               |  Bin 0 -> 10782 bytes
 .../design/lesson-page-reference.png          |  Bin 0 -> 73267 bytes
 .../design/sidebar-active-state.png           |  Bin 0 -> 11711 bytes
 prd/public-courses/implementation-plan.md     |  436 +++----
 prd/study-from-source/README.md               |  914 ++++++++++++++
 prd/study-from-source/implementation-plan.md  |  795 ++++++++++++
 .../README.md                                 |  759 ++++++++++++
 prd/webhooks/README.md                        |    2 +-
 318 files changed, 20668 insertions(+), 4788 deletions(-)
 create mode 100644 .cursor/plans/labs_prd.md
 create mode 100644 apps/api/src/__tests__/ai-credits-usage.test.ts
 create mode 100644 apps/api/src/routes/agent/agent.ts
 delete mode 100644 apps/api/src/routes/agent/chat.ts
 delete mode 100644 apps/api/src/routes/agent/credits.ts
 delete mode 100644 apps/api/src/routes/agent/status.ts
 delete mode 100644 apps/api/src/routes/agent/upload.ts
 delete mode 100644 apps/api/src/routes/agent/usage.ts
 create mode 100644 apps/api/src/routes/org-site/index.ts
 create mode 100644 apps/api/src/routes/org-site/public-course.ts
 create mode 100644 apps/api/src/services/agent/agent-tool-schemas.ts
 create mode 100644 apps/api/src/services/agent/chat-context.ts
 create mode 100644 apps/api/src/services/agent/chat-tools.ts
 create mode 100644 apps/api/src/services/agent/credit-purchase.ts
 create mode 100644 apps/api/src/services/course/public-course-guard.ts
 create mode 100644 apps/api/src/services/course/public-course.ts
 create mode 100644 apps/api/src/services/course/slug.ts
 create mode 100644 apps/api/src/services/exercise/video-recording.ts
 create mode 100644 apps/dashboard/src/lib/features/agent/api/credit-purchase.server.ts
 delete mode 100644 apps/dashboard/src/lib/features/ai-assistant/model-picker.svelte
 create mode 100644 apps/dashboard/src/lib/features/ai-assistant/utils/course-plan.ts
 create mode 100644 apps/dashboard/src/lib/features/course/components/course-public-badge.svelte
 create mode 100644 apps/dashboard/src/lib/features/course/components/exercise/question-type-select.svelte
 create mode 100644 apps/dashboard/src/lib/features/course/components/exercise/section-editor.svelte
 create mode 100644 apps/dashboard/src/lib/features/course/utils/exercise-section-utils.ts
 create mode 100644 apps/dashboard/src/lib/features/course/utils/public-course-mappers.ts
 create mode 100644 apps/dashboard/src/lib/features/settings/api/ai-credits.svelte.ts
 create mode 100644 apps/dashboard/src/lib/features/settings/components/ai-credits/buy-tokens-card.svelte
 create mode 100644 apps/dashboard/src/lib/features/settings/components/ai-credits/team-leaderboard.svelte
 create mode 100644 apps/dashboard/src/lib/features/settings/components/ai-credits/usage-chart.svelte
 create mode 100644 apps/dashboard/src/lib/features/settings/components/ai-credits/usage-summary-cards.svelte
 create mode 100644 apps/dashboard/src/lib/features/settings/pages/ai-credits.svelte
 create mode 100644 apps/dashboard/src/lib/features/settings/utils/types.ts
 create mode 100644 apps/dashboard/src/routes/(app)/org/[slug]/dash/+page.server.ts
 create mode 100644 apps/dashboard/src/routes/(app)/org/[slug]/dash/+page.svelte
 create mode 100644 apps/dashboard/src/routes/(app)/org/[slug]/settings/ai-credits/+page.svelte
 create mode 100644 apps/dashboard/src/routes/(org-site)/course/[slug]/lesson/[itemSlug]/+page.server.ts
 create mode 100644 apps/dashboard/src/routes/(org-site)/course/[slug]/lesson/[itemSlug]/+page.svelte
 create mode 100644 apps/dashboard/src/routes/api/polar/buy-tokens/+server.ts
 create mode 100644 apps/dashboard/src/routes/api/polar/webhook/__tests__/order-paid.fixture.json
 delete mode 100644 apps/dashboard/static/sticky-test.css
 delete mode 100644 apps/dashboard/static/sticky-test.html
 delete mode 100644 packages/db/src/migrations/0004_ai_chat_document.sql
 create mode 100644 packages/db/src/queries/agent/chat-resource.ts
 create mode 100644 packages/db/src/queries/agent/credit-purchase.ts
 create mode 100644 packages/db/src/queries/agent/token-usage.ts
 create mode 100644 packages/db/src/queries/agent/usage-aggregations.ts
 create mode 100644 packages/db/src/queries/course/content-batch.ts
 create mode 100644 packages/db/src/queries/course/public-course.ts
 create mode 100644 packages/db/src/queries/exercise/exercise-section.ts
 create mode 100644 packages/db/src/queries/query-errors.ts
 create mode 100644 packages/question-types/src/exercise-section-types.ts
 create mode 100644 packages/question-types/src/video-recording-settings.ts
 create mode 100644 packages/storybook/src/molecules/course-creator/course-creator.stories.svelte
 create mode 100644 packages/storybook/src/molecules/model-picker/model-picker.stories.svelte
 create mode 100644 packages/storybook/src/molecules/public-course/fixtures.ts
 create mode 100644 packages/storybook/src/molecules/public-course/public-course.stories.svelte
 create mode 100644 packages/ui/src/base/number-badge/index.ts
 create mode 100644 packages/ui/src/base/number-badge/number-badge.svelte
 create mode 100644 packages/ui/src/custom/animation/dot-field/dot-field.svelte
 create mode 100644 packages/ui/src/custom/animation/dot-field/index.ts
 create mode 100644 packages/ui/src/custom/course-creator/course-creator.svelte
 create mode 100644 packages/ui/src/custom/course-creator/index.ts
 create mode 100644 packages/ui/src/custom/exercise-question/renderers/video-recording/edit.svelte
 create mode 100644 packages/ui/src/custom/exercise-question/renderers/video-recording/format.ts
 create mode 100644 packages/ui/src/custom/exercise-question/renderers/video-recording/preview.svelte
 create mode 100644 packages/ui/src/custom/exercise-question/renderers/video-recording/submission.svelte
 create mode 100644 packages/ui/src/custom/exercise-question/renderers/video-recording/take.svelte
 create mode 100644 packages/ui/src/custom/exercise-question/section-after-behavior.svelte
 create mode 100644 packages/ui/src/custom/exercise-question/section-header.svelte
 create mode 100644 packages/ui/src/custom/exercise-question/section-navigation-sidebar.svelte
 create mode 100644 packages/ui/src/custom/exercise-question/section-overview.svelte
 create mode 100644 packages/ui/src/custom/model-picker/index.ts
 create mode 100644 packages/ui/src/custom/model-picker/model-picker.svelte
 create mode 100644 packages/ui/src/custom/public-course/bottom-nav.svelte
 create mode 100644 packages/ui/src/custom/public-course/callout.svelte
 create mode 100644 packages/ui/src/custom/public-course/exercise-view.svelte
 create mode 100644 packages/ui/src/custom/public-course/footer-nav.svelte
 create mode 100644 packages/ui/src/custom/public-course/index.ts
 create mode 100644 packages/ui/src/custom/public-course/lesson-view.svelte
 create mode 100644 packages/ui/src/custom/public-course/mobile-sheet.svelte
 create mode 100644 packages/ui/src/custom/public-course/powered-by.svelte
 create mode 100644 packages/ui/src/custom/public-course/public-exercise-attempts-storage.ts
 create mode 100644 packages/ui/src/custom/public-course/shell.svelte
 create mode 100644 packages/ui/src/custom/public-course/sidebar-row.svelte
 create mode 100644 packages/ui/src/custom/public-course/sidebar.svelte
 create mode 100644 packages/ui/src/custom/public-course/types.ts
 create mode 100644 packages/utils/src/plans/token-packs.ts
 create mode 100644 packages/utils/src/validation/course/callout.ts
 create mode 100644 packages/utils/src/validation/course/public-course.ts
 create mode 100644 packages/utils/src/validation/exercise/exercise-section.ts
 create mode 100644 packages/utils/src/validation/exercise/video-recording.ts
 create mode 100644 packages/utils/src/validation/shared/index.ts
 create mode 100644 packages/utils/src/validation/shared/slug.ts
 rename prd/{ai-course-assistant => ai-course-assistant [DONE]}/README.md (99%)
 rename prd/{ai-course-assistant => ai-course-assistant [DONE]}/implementation-plan.md (100%)
 rename prd/{compliance-training-platform => compliance-training-platform [DONE]}/README.md (99%)
 rename prd/{compliance-training-platform => compliance-training-platform [DONE]}/UX.md (100%)
 rename prd/{course-widget-embed => course-widget-embed [DONE]}/README.md (99%)
 rename prd/{course-widget-embed => course-widget-embed [DONE]}/implementation-plan.md (100%)
 rename prd/{custom-domain-cloudflare => custom-domain-cloudflare [DONE]}/README.md (99%)
 rename prd/{exercise-sections => exercise-sections [DONE]}/README.md (77%)
 rename prd/{exercise-sections => exercise-sections [DONE]}/implementation-plan.md (79%)
 rename prd/{mcp-course-authoring => mcp-course-authoring [DONE]}/README.md (97%)
 rename prd/{mcp-course-authoring => mcp-course-authoring [DONE]}/consumption-spec.md (100%)
 rename prd/{mcp-course-authoring => mcp-course-authoring [DONE]}/implementation-plan.md (97%)
 rename prd/{org-landing-page-theme-picker => org-landing-page-theme-picker [DONE]}/README.md (99%)
 rename prd/{org-landing-page-theme-picker => org-landing-page-theme-picker [DONE]}/implementation-plan.md (100%)
 rename prd/{programs => programs [DONE]}/README.md (99%)
 rename prd/{public-api => public-api [DONE]}/README.md (98%)
 create mode 100644 prd/public-courses/design/lesson-page-full.png
 create mode 100644 prd/public-courses/design/lesson-page-reference.png
 create mode 100644 prd/public-courses/design/sidebar-active-state.png
 create mode 100644 prd/study-from-source/README.md
 create mode 100644 prd/study-from-source/implementation-plan.md
 create mode 100644 prd/video-recording-question-type [DONE]/README.md

diff --git a/.cursor/plans/ai_assistant_prd_5a6f948c.plan.md b/.cursor/plans/ai_assistant_prd_5a6f948c.plan.md
index 7ed04a7e..948af3ea 100644
--- a/.cursor/plans/ai_assistant_prd_5a6f948c.plan.md
+++ b/.cursor/plans/ai_assistant_prd_5a6f948c.plan.md
@@ -1,9 +1,9 @@
 ---
 name: AI assistant PRD
-overview: Write a new PRD from scratch for the AI Course Assistant feature, replacing the existing placeholder at prd/ai-course-assistant/README.md. The PRD will document a hybrid execution model, configurable LLM providers, streaming chat, and the full package/API/UI architecture.
+overview: Write a new PRD from scratch for the AI Course Assistant feature, replacing the existing placeholder at prd/ai-course-assistant [DONE]/README.md. The PRD will document a hybrid execution model, configurable LLM providers, streaming chat, and the full package/API/UI architecture.
 todos:
   - id: write-prd
-    content: "Write the full PRD markdown file at prd/ai-course-assistant/README.md with all sections: purpose, architecture, execution model, package design, tools, safeguards, UI spec, self-host gating, streaming, API routes, and implementation phases"
+    content: "Write the full PRD markdown file at prd/ai-course-assistant [DONE]/README.md with all sections: purpose, architecture, execution model, package design, tools, safeguards, UI spec, self-host gating, streaming, API routes, and implementation phases"
     status: pending
 isProject: false
 ---
@@ -12,7 +12,7 @@ isProject: false
 
 ## What We're Writing
 
-Replace [prd/ai-course-assistant/README.md](prd/ai-course-assistant/README.md) with a comprehensive PRD for an AI assistant embedded in the course UI. The PRD will be a single markdown file covering architecture, UI, safeguards, package design, and implementation phases.
+Replace [prd/ai-course-assistant [DONE]/README.md](prd/ai-course-assistant [DONE]/README.md) with a comprehensive PRD for an AI assistant embedded in the course UI. The PRD will be a single markdown file covering architecture, UI, safeguards, package design, and implementation phases.
 
 ## Key Architectural Decisions
 
@@ -612,7 +612,7 @@ Registered in [apps/api/src/app.ts](apps/api/src/app.ts) as `.route('/agent', ag
 
 **New files:**
 
-- `prd/ai-course-assistant/README.md` — this PRD (replace existing)
+- `prd/ai-course-assistant [DONE]/README.md` — this PRD (replace existing)
 
 **Files referenced (not modified in PRD phase):**
 
diff --git a/.cursor/plans/labs_prd.md b/.cursor/plans/labs_prd.md
new file mode 100644
index 00000000..e8223f58
--- /dev/null
+++ b/.cursor/plans/labs_prd.md
@@ -0,0 +1,942 @@
+# PRD: ClassroomIO Labs
+
+**Status:** Draft  
+**Author:** Rotimi Best  
+**Date:** 2026-05-03  
+**Version:** 1.0
+
+---
+
+## 1. Overview
+
+Labs is a new lesson content block type that allows teachers to embed interactive, sandboxed mini-applications directly inside a lesson. Unlike quizzes — which test recall through structured questions — Labs are experiential: students practice, simulate, explore, or make decisions inside a purpose-built interactive environment.
+
+Each Lab is a single compiled Svelte application hosted as a standalone HTML page and embedded via `<iframe>`. Labs communicate with ClassroomIO through a strict `postMessage` interface. They have no network access. They support two modes: **Teacher Mode** (configure the experience) and **Student Mode** (play the experience).
+
+Labs are contributed by developers to an open-source marketplace repository and discovered through an in-editor picker modal.
+
+---
+
+## 2. Problem Statement
+
+ClassroomIO is building for compliance training and certification programs. These programs need learners to not just understand content but to demonstrate judgment under realistic conditions — recognizing a phishing email, following an incident response playbook, correctly classifying sensitive data.
+
+Today, the only interactive tool available to teachers is the quiz. Quizzes test recall but cannot simulate decision-making under pressure, multi-step scenarios, or contextual judgment. There is also no mechanism for the ClassroomIO ecosystem to grow through external developer contributions.
+
+This leaves a critical pedagogical gap: compliance certifications require learners to practice realistic scenarios, and teachers have no way to deliver that inside a lesson.
+
+---
+
+## 3. Goals
+
+1. **G1** — Give teachers a way to embed interactive, scenario-based activities directly in lessons alongside existing content blocks (video, notes, slides).
+2. **G2** — Make Labs completable and trackable — completion state and score feed into lesson progress and certification records.
+3. **G3** — Enable an open-source developer ecosystem where contributors can publish Labs to a public marketplace.
+4. **G4** — Keep Labs sandboxed and secure — no network access, no access to student PII, no access to ClassroomIO internals.
+5. **G5** — Support a teacher configuration model so a single Lab can be deployed differently across different courses or compliance contexts.
+
+---
+
+## 4. Non-Goals
+
+- **Labs are not quizzes.** Labs do not replace the existing quiz block. They are complementary.
+- **Labs are not full course modules.** A Lab is a focused, time-bounded activity (typically 2–10 minutes). Multi-hour simulations are out of scope.
+- **Labs do not have network access.** External API calls from within a Lab are explicitly prohibited.
+- **Labs are not AI-generated on the fly.** The AI assistant may recommend which Lab to use, but it does not generate Lab code at runtime.
+- **Labs are not native mobile apps.** The initial release targets web only.
+- **The Labs marketplace is not monetized in v1.** All Labs are free and open source.
+
+---
+
+## 5. User Personas
+
+### Teacher / Course Creator
+Builds lessons. Wants to give students realistic practice. Does not write code. Expects to pick a Lab from a list, configure it through a form, and have it appear in the lesson.
+
+### Student / Learner
+Takes lessons as part of a certification program. Expects clear instructions, responsive interactions, and immediate feedback. Needs to complete the Lab to progress through the lesson.
+
+### Lab Developer / Contributor
+A developer (internal or external) who builds a Lab app as a single Svelte file and submits it to the marketplace repository via pull request. Needs a clear SDK, local dev harness, and contribution guidelines.
+
+### Organization Admin / Compliance Manager
+Monitors certification completion. Needs assurance that Lab completions are recorded in audit logs alongside quiz scores.
+
+---
+
+## 6. User Stories
+
+### Teacher
+- As a teacher, I can add a Lab block to any lesson so that students have an interactive activity alongside my written content.
+- As a teacher, I can pick a Lab from a categorized list (by topic, compliance type, difficulty) so I can find the right one quickly.
+- As a teacher, I can configure the Lab (difficulty, number of rounds, pass threshold, scenario set) through a form so the experience fits my course context.
+- As a teacher, I can preview the Lab in both Teacher Mode and Student Mode before publishing so I know exactly what students will see.
+- As a teacher, I can set a minimum pass score for the Lab so students must demonstrate competence before marking the lesson complete.
+- As a teacher, I can reorder the Lab block within the lesson just like any other content block.
+
+### Student
+- As a student, I can see a Lab embedded inline in my lesson and interact with it without leaving the lesson page.
+- As a student, I receive clear instructions before starting the Lab so I know what I am expected to do.
+- As a student, I receive immediate feedback during the Lab so I can learn from my choices in the moment.
+- As a student, I can see my result (score, pass/fail, summary) when the Lab ends so I know how I performed.
+- As a student, if I fail a Lab that has a required pass score, I can retry it so I have another chance to pass.
+- As a student, my Lab completion is reflected in my overall lesson progress so I can track my certification status.
+
+### Lab Developer
+- As a developer, I can scaffold a new Lab using a CLI command so I can start building without boilerplate.
+- As a developer, I can run a local dev harness that simulates the `postMessage` init flow so I can develop the Lab in isolation.
+- As a developer, I can define a config schema in `manifest.json` so ClassroomIO auto-generates the teacher configuration form for my Lab.
+- As a developer, I can submit my Lab as a pull request to the `classroomio-labs` repository so it appears in the marketplace after review.
+
+### Admin
+- As a compliance manager, I can view Lab completion records per student in the organization dashboard so I can audit certification evidence.
+- As a compliance manager, I can see the Lab version a student completed so I know if they need to redo it after an update.
+
+---
+
+## 7. Feature Requirements
+
+### 7.1 Lab Block in Lesson Editor
+
+- The lesson content block picker gains a new item: **Lab**. It sits alongside Video, Note, and Slide in the picker list.
+- Selecting "Lab" opens the Lab Picker Modal (see 7.2).
+- Once a Lab is chosen and configured, the block renders in the lesson editor as:
+  - The Lab's name and preview thumbnail.
+  - A **Configure** button to reopen the configuration form.
+  - A **Preview** button to see the live iframe in either Teacher or Student mode.
+  - A remove/delete button.
+- The block is orderable via drag-and-drop like all other blocks.
+- The block stores: `{ labSlug, labVersion, config: Record<string, unknown> }`.
+
+### 7.2 Lab Picker Modal
+
+- Triggered when a teacher selects "Lab" from the block picker.
+- Displays all available Labs from the marketplace.
+- Each Lab card shows:
+  - Name
+  - Short description (≤ 120 characters)
+  - Preview thumbnail / animated GIF
+  - Tags (e.g. `cybersecurity`, `compliance`, `finance`, `health-safety`)
+  - Author
+  - Estimated completion time
+- Teachers can filter by tag and search by name.
+- Selecting a Lab proceeds to the Configuration step within the same modal.
+- Configuration step:
+  - Renders the form derived from the Lab's `configSchema`.
+  - Shows a live iframe preview of the Lab in Teacher Mode reflecting the current config values.
+  - Has a Save button that closes the modal and inserts the block.
+
+### 7.3 Teacher Mode
+
+- When the iframe is loaded with `mode: 'teacher'`, the Lab renders its own configuration UI.
+- The Lab's config UI is entirely self-contained inside the iframe. ClassroomIO does not render config fields directly — it drives the form via the `configSchema` in the picker modal (see 7.2), but the Lab itself also renders a config preview.
+- When the teacher changes config in the modal form, ClassroomIO sends a fresh `init` message to the iframe so the Lab can update its preview in real time.
+- When the teacher switches to "Student Preview", the iframe reloads with `mode: 'student'` and the current config frozen in.
+
+### 7.4 Student Mode
+
+- The Lab iframe is embedded inline in the lesson page with `mode: 'student'` and the teacher's saved config.
+- Before the Lab starts, an instruction overlay is shown (either from the Lab itself or from ClassroomIO wrapping the iframe) covering:
+  - Lab name
+  - Objective / what the student needs to do
+  - Estimated time
+  - Pass score (if configured)
+  - A **Start** button
+- The Lab is fullscreen-expandable via a button on the iframe wrapper.
+- While the student is in the Lab, a progress indicator (if the Lab emits `progress` events) shows on the iframe wrapper.
+- When the Lab emits `complete`, ClassroomIO:
+  - Records the result (score, passed, timestamp, labVersion, config hash).
+  - Displays a result overlay on top of the iframe showing: score, pass/fail badge, and a brief summary from the Lab.
+  - If the student passed (or no pass threshold was set): marks the Lab block as complete in lesson progress.
+  - If the student failed and retries are allowed: shows a Retry button that reloads the iframe.
+- A completed Lab block shows a green check in the lesson.
+
+### 7.5 Completion and Progress Tracking
+
+- Lab completion is stored per-student per-lesson block.
+- Each completion record includes:
+  - `studentId`
+  - `lessonId`
+  - `blockId` (the specific block within the lesson)
+  - `labSlug`
+  - `labVersion`
+  - `configHash` (hash of the config used — ensures auditability)
+  - `score` (0–100 or null if Lab doesn't produce a score)
+  - `passed` (boolean or null)
+  - `completedAt` (timestamp)
+  - `attemptNumber`
+  - `metadata` (arbitrary JSON from the Lab's `complete` event — e.g. per-round breakdown)
+- A Lab block with a required pass score blocks lesson completion if the student has not passed it.
+- A Lab block without a required pass score only requires the student to reach the `complete` event (any score).
+- Org admins can export Lab completion records per student as part of certification audit exports.
+
+### 7.6 Retry Policy
+
+- Teacher can configure:
+  - **Unlimited retries** (default)
+  - **Limited retries** (e.g. max 3 attempts)
+  - **No retry** (one attempt only)
+- On retry, the iframe reloads with the same config but a fresh internal state.
+- Each attempt is stored as a separate completion record. The "official" result for certification purposes is the student's **best** score across attempts.
+
+### 7.7 Lab Versioning in Lessons
+
+- Each Lab block records the `labVersion` at the time it is configured.
+- When a new Lab version is published to the marketplace, existing lesson blocks are **not** automatically updated.
+- A **version badge** appears on the Lab block in the editor if the block is behind the latest version:
+  - Yellow badge: minor update available (non-breaking config changes).
+  - Red badge: major update available (breaking config changes — config may need to be reconfigured).
+- Teachers can explicitly upgrade to the new version from the block settings.
+- Students who completed the Lab under an older version do not need to redo it unless the teacher explicitly requires it.
+
+---
+
+## 8. Technical Architecture
+
+### 8.1 System Components
+
+```
+┌────────────────────────────────────────────────────────────┐
+│                   classroomio-labs (GitHub repo)           │
+│                                                            │
+│  apps/                                                     │
+│    phishing-detector/                                      │
+│      index.svelte         ← entire Lab (logic + UI + style)│
+│      manifest.json        ← metadata + config schema       │
+│      preview.png                                           │
+│                                                            │
+│  sdk/                                                      │
+│    index.ts               ← postMessage helpers + types    │
+│    harness/               ← local dev simulator            │
+│                                                            │
+│  scripts/                                                  │
+│    build.ts               ← compiles all labs to dist/     │
+│    validate.ts            ← validates manifest + contract  │
+└──────────────────────────────────┬─────────────────────────┘
+                                   │ CI build + deploy
+                                   ▼
+┌─────────────────────────────────────────────────────────┐
+│         labs.classroomio.com (static CDN)               │
+│                                                         │
+│   /phishing-detector/v1.2.0/index.html                  │
+│   /phishing-detector/latest/index.html                  │
+│   /registry.json   ← list of all labs + manifests       │
+└─────────────────────────────────────────────────────────┘
+                                   │
+                          iframe src=
+                                   │
+┌─────────────────────────────────────────────────────────┐
+│         ClassroomIO Dashboard (lesson editor / viewer)  │
+│                                                         │
+│   LabBlock.svelte  ─── postMessage ──► Lab iframe       │
+│       ▲                                                  │
+│       │ stores config, completion records               │
+│   ClassroomIO API / DB                                  │
+└─────────────────────────────────────────────────────────┘
+```
+
+### 8.2 postMessage Interface Specification
+
+All messages are JSON objects with a `type` discriminant.
+
+#### ClassroomIO → Lab iframe
+
+**`init`** — sent immediately after the iframe loads. The Lab must wait for this before rendering.
+
+```typescript
+{
+  type: 'init';
+  mode: 'teacher' | 'student';
+  config: Record<string, unknown>;  // teacher-saved config (empty object if not yet configured)
+  locale: string;                   // e.g. 'en', 'fr'
+  context: {
+    studentId?: string;             // only in student mode, opaque token (not email/name)
+    attemptNumber: number;          // 1-indexed
+  };
+}
+```
+
+**`config_update`** — sent in teacher mode when the teacher changes config values in the picker modal form. The Lab should update its preview without full re-render.
+
+```typescript
+{
+  type: 'config_update';
+  config: Record<string, unknown>;
+}
+```
+
+**`resize_ack`** — sent in response to a `resize_request` from the Lab (see below).
+
+```typescript
+{
+  type: 'resize_ack';
+  width: number;
+  height: number;
+}
+```
+
+#### Lab iframe → ClassroomIO
+
+**`ready`** — emitted when the Lab has finished initializing and is ready for `init`.
+
+```typescript
+{ type: 'ready' }
+```
+
+**`resize_request`** — emitted when the Lab needs a different iframe dimension.
+
+```typescript
+{
+  type: 'resize_request';
+  width?: number;   // preferred width in px, omit for full-width
+  height: number;   // preferred height in px
+}
+```
+
+**`progress`** — emitted periodically to report student progress through the Lab.
+
+```typescript
+{
+  type: 'progress';
+  percent: number;    // 0–100
+  label?: string;     // e.g. "Round 3 of 5"
+}
+```
+
+**`complete`** — emitted when the Lab activity is finished.
+
+```typescript
+{
+  type: 'complete';
+  score: number | null;           // 0–100, null if unscored
+  passed: boolean | null;         // null if no pass threshold in Lab
+  durationSeconds: number;        // total active time
+  summary: {
+    headline: string;             // e.g. "You caught 4 out of 5 phishing emails"
+    details?: Record<string, unknown>;  // arbitrary breakdown for audit metadata
+  };
+}
+```
+
+**`error`** — emitted if the Lab enters an unrecoverable error state.
+
+```typescript
+{
+  type: 'error';
+  message: string;   // human-readable, shown in ClassroomIO fallback UI
+}
+```
+
+#### Security constraints on postMessage
+- ClassroomIO only accepts messages from the iframe's known origin (`labs.classroomio.com`).
+- The iframe is served with the following headers:
+  - `Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline'; connect-src 'none'; frame-ancestors https://app.classroomio.com`
+  - `connect-src: 'none'` — no outbound network requests.
+- The iframe sandbox attribute: `sandbox="allow-scripts allow-same-origin"` — no form submissions, no top-navigation, no popups.
+
+### 8.3 Lab Build Pipeline
+
+Each `apps/{slug}/index.svelte` is compiled by Vite + `@sveltejs/vite-plugin-svelte` to a self-contained `dist/{slug}/v{version}/index.html` (all JS/CSS inlined, no external dependencies).
+
+The `scripts/build.ts` script:
+1. Reads each `manifest.json` and validates against the manifest schema.
+2. Compiles each Lab to `dist/{slug}/v{version}/index.html`.
+3. Also writes to `dist/{slug}/latest/index.html`.
+4. Generates `dist/registry.json` — the full marketplace catalog.
+
+CI runs on every merged PR to `main`. Deployment is to a static CDN (Cloudflare Pages or equivalent).
+
+### 8.4 Registry Format (`registry.json`)
+
+```json
+{
+  "version": 1,
+  "updatedAt": "2026-05-03T00:00:00Z",
+  "labs": [
+    {
+      "slug": "phishing-detector",
+      "name": "Phishing Detector",
+      "description": "Students identify phishing vs legitimate emails in a realistic inbox simulation.",
+      "tags": ["cybersecurity", "compliance", "security-awareness"],
+      "author": { "name": "ClassroomIO Team", "url": "https://classroomio.com" },
+      "version": "1.2.0",
+      "estimatedMinutes": 5,
+      "previewImage": "https://labs.classroomio.com/phishing-detector/preview.png",
+      "url": "https://labs.classroomio.com/phishing-detector/v1.2.0/index.html",
+      "latestUrl": "https://labs.classroomio.com/phishing-detector/latest/index.html",
+      "configSchema": {
+        "difficulty": {
+          "type": "select",
+          "label": "Difficulty",
+          "options": ["easy", "medium", "hard"],
+          "default": "medium"
+        },
+        "rounds": {
+          "type": "number",
+          "label": "Number of rounds",
+          "min": 3,
+          "max": 10,
+          "default": 5
+        },
+        "industry": {
+          "type": "select",
+          "label": "Industry context",
+          "options": ["generic", "finance", "healthcare", "tech", "retail"],
+          "default": "generic"
+        }
+      }
+    }
+  ]
+}
+```
+
+ClassroomIO fetches `registry.json` at build time (SSG) or with a short TTL cache. The modal renders the list from this data.
+
+---
+
+## 9. Manifest Specification
+
+Every Lab must include a `manifest.json` at its root.
+
+```typescript
+type Manifest = {
+  slug: string;              // kebab-case, globally unique, immutable after first publish
+  name: string;              // display name, max 50 chars
+  description: string;       // max 160 chars
+  tags: string[];            // from the approved tag list (see §11)
+  author: {
+    name: string;
+    url?: string;
+    email?: string;
+  };
+  version: string;           // semver
+  estimatedMinutes: number;  // honest estimate for student
+  minHeight: number;         // minimum iframe height in px the Lab needs to function
+  changelog: string;         // human-readable summary of changes in this version
+  configSchema: ConfigSchema;
+  breakingChanges?: string;  // if semver major bump, describe what config keys changed
+};
+
+type ConfigSchema = Record<string, ConfigField>;
+
+type ConfigField =
+  | { type: 'text';     label: string; default?: string; maxLength?: number }
+  | { type: 'number';   label: string; default?: number; min?: number; max?: number }
+  | { type: 'boolean';  label: string; default?: boolean }
+  | { type: 'select';   label: string; options: string[]; default?: string }
+  | { type: 'multiselect'; label: string; options: string[]; default?: string[] };
+```
+
+---
+
+## 10. Data Model
+
+### `lab_block` (stored as part of lesson block)
+
+This is a new block type stored within the existing lesson block structure.
+
+```typescript
+type LabBlock = {
+  type: 'lab';
+  labSlug: string;
+  labVersion: string;           // pinned at time of insertion
+  latestVersion: string;        // checked at load time from registry
+  config: Record<string, unknown>;
+  configHash: string;           // SHA-256 of JSON.stringify(config) — for audit
+  passingScore: number | null;  // 0–100, null = no threshold
+  maxAttempts: number | null;   // null = unlimited
+};
+```
+
+### `lab_completion` (new table)
+
+```typescript
+type LabCompletion = {
+  id: string;
+  studentId: string;
+  courseId: string;
+  lessonId: string;
+  blockId: string;              // references the specific lab block in the lesson
+  labSlug: string;
+  labVersion: string;           // version the student ran
+  configHash: string;           // config snapshot at time of attempt
+  attemptNumber: number;
+  score: number | null;
+  passed: boolean | null;
+  durationSeconds: number;
+  completedAt: Date;
+  metadata: Record<string, unknown>;  // Lab's summary.details
+};
+```
+
+### Indexes needed
+- `(studentId, lessonId, blockId)` — for lesson progress checks
+- `(courseId, labSlug)` — for org-level audit reporting
+- `(studentId, courseId)` — for certification eligibility queries
+
+---
+
+## 11. Lab Catalog: Compliance-Focused Apps (v1)
+
+The following Labs will be built and shipped as part of the initial release. All are targeted at the compliance training and certification niche.
+
+### Lab 1: Phishing Detector
+**Slug:** `phishing-detector`  
+**Estimated time:** 5 min  
+**Tags:** `cybersecurity`, `security-awareness`, `compliance`
+
+The student sees a realistic email inbox with a mix of legitimate and phishing emails. They must classify each one (Safe / Suspicious / Phishing). After each decision, feedback explains the signals they should have spotted. At the end, they see a score and a breakdown of which emails tripped them up.
+
+**Config options:** difficulty (easy/medium/hard), number of emails (3–10), industry context (generic/finance/healthcare/tech/retail).
+
+**Pass threshold:** Teacher-configurable (e.g. must correctly identify 80% of emails).
+
+---
+
+### Lab 2: Incident Response Playbook
+**Slug:** `incident-response`  
+**Estimated time:** 8 min  
+**Tags:** `cybersecurity`, `compliance`, `incident-management`
+
+A security incident unfolds across 5–7 decision points. At each point the student reads a situation update and chooses from 3–4 options (e.g. "Escalate to CISO", "Contain the affected systems", "Wait for more information"). Wrong choices have cascading consequences shown in subsequent steps. The final score reflects how well the student contained the incident and followed correct procedure.
+
+**Config options:** incident type (ransomware / data breach / insider threat / DDoS), organization size context, number of steps.
+
+---
+
+### Lab 3: Data Classification Sorter
+**Slug:** `data-classifier`  
+**Estimated time:** 4 min  
+**Tags:** `data-privacy`, `compliance`, `gdpr`, `hipaa`
+
+The student sees a stream of documents, data snippets, and file descriptions. They drag each item into the correct classification bucket: Public / Internal / Confidential / Restricted. Items are drawn from realistic workplace examples (HR records, marketing materials, customer PII, code repositories). Immediate feedback per item.
+
+**Config options:** classification framework (generic / GDPR / HIPAA / PCI-DSS), item count (5–15), industry context.
+
+---
+
+### Lab 4: Social Engineering Detector
+**Slug:** `social-engineering`  
+**Estimated time:** 6 min  
+**Tags:** `cybersecurity`, `security-awareness`, `compliance`
+
+The student reads a realistic chat or phone call transcript that scrolls in real time (simulating live interaction). At key moments (every 2–3 exchanges), the transcript pauses and asks "What do you do?" with 3 options. The Lab tracks how many manipulation tactics the student identified correctly. At the end, annotated versions of the transcript highlight all the red flags.
+
+**Config options:** scenario type (help desk impersonation / vendor impersonation / executive fraud), difficulty, number of decision points.
+
+---
+
+### Lab 5: Policy Adjudicator
+**Slug:** `policy-adjudicator`  
+**Estimated time:** 5 min  
+**Tags:** `compliance`, `hr-compliance`, `ethics`, `finance`
+
+The student reviews workplace scenarios one at a time — an expense claim, a gift from a vendor, a request to share data with a partner, a colleague asking for system access. For each scenario, they choose: Approve / Reject / Escalate. A relevant policy extract is available as a collapsible reference panel. Feedback after each decision cites the specific policy clause.
+
+**Config options:** policy domain (expense / gifts-and-conflicts / data-sharing / access-control), number of scenarios, policy strictness (lenient / standard / strict).
+
+---
+
+### Lab 6: Hazard Spotter
+**Slug:** `hazard-spotter`  
+**Estimated time:** 5 min  
+**Tags:** `health-safety`, `compliance`, `workplace-safety`
+
+The student sees a detailed illustrated scene of a workplace (office, warehouse, lab, construction site). They must click on every safety hazard they can spot within a time limit. After submitting, all hazards are revealed and annotated. Score is based on hazards found versus missed and false positives (clicking something that is not a hazard).
+
+**Config options:** workplace type, difficulty (hazard density), time limit, number of scenes.
+
+---
+
+### Lab 7: GDPR Rights Simulator
+**Slug:** `gdpr-rights`  
+**Estimated time:** 6 min  
+**Tags:** `data-privacy`, `gdpr`, `compliance`
+
+The student takes the role of a Data Protection Officer handling a set of incoming data subject requests (right to access, right to erasure, right to portability, right to object). For each request, they must decide: what action to take, within what timeframe, and what to communicate back to the subject. Feedback references the correct GDPR articles.
+
+**Config options:** request types to include, jurisdiction variants (EU GDPR / UK GDPR / CCPA), number of requests.
+
+---
+
+### Lab 8: Password & MFA Hygiene
+**Slug:** `password-hygiene`  
+**Estimated time:** 4 min  
+**Tags:** `cybersecurity`, `security-awareness`, `compliance`
+
+An interactive two-part exercise: (1) the student rates a set of passwords as strong/weak and explains why, then sees annotated feedback; (2) the student walks through setting up MFA on a simulated account interface, choosing the most secure method from the options presented.
+
+**Config options:** password count, MFA methods to include (authenticator app / SMS / hardware key).
+
+---
+
+## 12. Approved Tag List (v1)
+
+Tags govern how Labs are organized in the marketplace picker. Only approved tags may be used in `manifest.json`.
+
+```
+cybersecurity         — Threats, attacks, defenses
+security-awareness    — Recognition and behavior change
+compliance            — Regulatory and policy adherence
+data-privacy          — GDPR, HIPAA, CCPA, PII handling
+gdpr                  — GDPR-specific
+hipaa                 — HIPAA-specific
+pci-dss               — PCI-DSS-specific
+hr-compliance         — Workplace policy, harassment, ethics
+health-safety         — Physical safety, hazard recognition
+workplace-safety      — Overlaps health-safety, more procedural
+incident-management   — Response procedures
+data-management       — Classification, retention, handling
+finance               — Expense policy, fraud awareness
+ethics                — Conflicts of interest, gifts
+access-control        — Identity, permissions, least privilege
+```
+
+---
+
+## 13. Marketplace / Contribution Model
+
+### Repository
+`github.com/classroomio/classroomio-labs` — public, open source (MIT).
+
+### Directory Structure
+```
+classroomio-labs/
+  apps/
+    {slug}/
+      index.svelte
+      manifest.json
+      preview.png          (800×450 static image)
+      preview.gif          (optional, ≤ 2MB animated demo)
+      README.md            (required — describes the Lab, config options, pedagogy)
+  sdk/
+    src/
+      index.ts             (postMessage helpers, TypeScript types, constants)
+    harness/
+      index.html           (local dev simulator — simulates ClassroomIO host)
+      harness.ts
+  packages/
+    create-lab/            (CLI scaffolding tool — `npx create-classroomio-lab`)
+  docs/
+    contributing.md
+    manifest-spec.md
+    postmessage-spec.md
+    design-guidelines.md
+  scripts/
+    build.ts
+    validate.ts
+    release.ts
+```
+
+### Contribution Flow
+1. Developer runs `npx create-classroomio-lab` — scaffolds a new directory with a starter `index.svelte`, a `manifest.json` template, and links to the design guide.
+2. Developer builds the Lab locally using `pnpm dev --lab={slug}` which opens the harness in the browser, simulating the `init` message flow.
+3. Developer submits a PR with the new `apps/{slug}/` directory.
+4. CI runs:
+   - Manifest validation (schema check, slug uniqueness, semver format).
+   - Contract validation (does the compiled Lab respond to `init` and emit `ready` and `complete`?).
+   - Lighthouse accessibility audit (must pass score ≥ 80).
+   - Visual regression (snapshot of the compiled Lab at 1280px and 768px).
+5. ClassroomIO team reviews for pedagogical quality and content accuracy.
+6. Merged to `main` → CI builds and deploys to CDN → registry.json updated → appears in marketplace.
+
+### SDK (`sdk/src/index.ts`)
+
+The SDK is a tiny TypeScript module that Lab authors import to simplify the postMessage protocol:
+
+```typescript
+import { LabSDK } from '@classroomio/lab-sdk';
+
+const lab = new LabSDK();
+
+lab.onInit((payload) => {
+  // payload.mode, payload.config, payload.context
+  initializeApp(payload);
+});
+
+lab.onConfigUpdate((config) => {
+  updatePreview(config);
+});
+
+lab.complete({
+  score: 85,
+  passed: true,
+  durationSeconds: 243,
+  summary: {
+    headline: 'You caught 4 out of 5 phishing emails',
+    details: { caught: 4, missed: 1, falsePositives: 0 }
+  }
+});
+
+lab.progress({ percent: 60, label: 'Round 3 of 5' });
+```
+
+### Design Guidelines for Contributors
+
+Labs must follow these design rules to maintain visual consistency and quality:
+
+- Use the Lab SDK's provided CSS variables for color (the SDK ships a minimal design token CSS file).
+- Minimum touch target size: 44×44px.
+- No external fonts. Use system font stack.
+- Must be usable at 320px viewport width and above.
+- Text must meet WCAG AA contrast ratio (4.5:1 for body text).
+- All interactive elements must be keyboard accessible.
+- No autoplay audio or video.
+- Animations must respect `prefers-reduced-motion`.
+
+---
+
+## 14. Security & Sandboxing
+
+| Threat | Mitigation |
+|--------|-----------|
+| Lab makes network requests | `connect-src: 'none'` CSP + iframe `sandbox` attribute removes fetch/XHR ability |
+| Lab attempts top-level navigation | `sandbox="allow-scripts"` without `allow-top-navigation` |
+| Lab reads student PII | Only opaque `studentId` token passed; no email, name, or org data |
+| Lab exfiltrates config data | `frame-ancestors` CSP restricts who can embed the Lab |
+| Malicious Lab code in marketplace | PR review process + CI contract validation + manifest schema validation |
+| postMessage spoofing (non-lab origin) | ClassroomIO checks `event.origin === 'https://labs.classroomio.com'` before processing |
+| Compromised CDN | Subresource integrity (SRI) hash stored per Lab version in registry.json; iframe src checked against it |
+| Config injection | Config is JSON-serialized and passed as a structured message, never eval'd |
+
+---
+
+## 15. Accessibility Requirements
+
+- All Labs must achieve Lighthouse accessibility score ≥ 80 (enforced in CI).
+- Labs must be operable by keyboard alone.
+- Labs must provide appropriate ARIA labels on all interactive elements.
+- Labs must not rely solely on color to convey meaning.
+- ClassroomIO wrapper around the iframe must have `title` attribute describing the Lab.
+- The "Start" overlay and result overlay rendered by ClassroomIO (not the Lab) fully comply with WCAG AA.
+
+---
+
+## 16. Versioning Strategy
+
+Labs use **semver** (`MAJOR.MINOR.PATCH`).
+
+| Change | Version bump |
+|--------|-------------|
+| Bug fix, visual tweak, wording change | `PATCH` |
+| New config option (backwards-compatible default) | `MINOR` |
+| Existing config option renamed or removed | `MAJOR` |
+| Scoring algorithm changes (affects pass/fail) | `MAJOR` |
+| Core interaction mechanic changes | `MAJOR` |
+
+**Lesson blocks pin to the exact version used when the teacher configured the Lab.** The block continues to load that version even after newer versions are published. The editor shows an upgrade prompt for minor and major updates.
+
+**For major version upgrades:** ClassroomIO warns the teacher that the config schema has changed and may need to be reconfigured. It does not auto-migrate config. Students who already passed under an older major version are not required to redo it unless the teacher explicitly resets completions.
+
+---
+
+## 17. Teacher UX Flow (End-to-End)
+
+```
+Lesson Editor
+    │
+    ├─ Click "+ Add Block"
+    │
+    ├─ Block Picker → select "Lab"
+    │
+    ├─ Lab Picker Modal opens
+    │       ├─ Browse / search / filter by tag
+    │       ├─ Select "Phishing Detector"
+    │       │
+    │       └─ Configuration Step
+    │               ├─ Left panel: config form (from configSchema)
+    │               │     difficulty: [Medium ▼]
+    │               │     rounds: [5]
+    │               │     industry: [Finance ▼]
+    │               │     pass score: [80%]
+    │               │     max attempts: [Unlimited ▼]
+    │               │
+    │               └─ Right panel: live iframe preview (teacher mode)
+    │                     updates as config changes
+    │
+    ├─ Click "Add Lab"
+    │
+    └─ Lab Block appears in lesson
+            ├─ Shows: name, thumbnail, configured version
+            ├─ "Preview as Student" button → opens modal with student mode iframe
+            └─ "Configure" button → reopens config modal
+```
+
+---
+
+## 18. Student UX Flow (End-to-End)
+
+```
+Lesson Page
+    │
+    ├─ Student scrolls to Lab block
+    │
+    ├─ Lab block shows:
+    │       ├─ Lab name + description
+    │       ├─ Estimated time: ~5 min
+    │       ├─ Pass required: 80%
+    │       └─ [Start Lab] button
+    │
+    ├─ Student clicks "Start Lab"
+    │       └─ Iframe loads in student mode with teacher config
+    │
+    ├─ Student interacts with Lab
+    │       ├─ Progress bar updates (from `progress` events)
+    │       └─ Lab can request fullscreen expand
+    │
+    ├─ Lab emits `complete`
+    │
+    ├─ Result overlay appears (rendered by ClassroomIO):
+    │       ├─ Score: 84/100
+    │       ├─ ✅ Passed (required: 80%)
+    │       ├─ "You caught 4 out of 5 phishing emails"
+    │       └─ [Continue Lesson] or [Try Again]
+    │
+    └─ Lab block marked complete ✅ in lesson progress
+```
+
+---
+
+## 19. AI Assistant Integration
+
+The existing ClassroomIO AI assistant (used by teachers) can recommend Labs contextually.
+
+- When a teacher is editing a lesson on a topic (e.g. "Identifying Phishing Attacks"), the AI assistant can suggest: *"Would you like to add a Phishing Detector lab to give students hands-on practice with this topic?"*
+- The AI assistant can call the existing lesson content tools to insert a Lab block with a pre-set config.
+- The AI does not generate Lab code. It only selects from the available registry and configures from known config schemas.
+
+Tool to expose to the AI assistant:
+
+```typescript
+insert_lab_block({
+  lessonId: string,
+  afterBlockId: string,
+  labSlug: string,
+  config: Record<string, unknown>,
+  passingScore?: number,
+  maxAttempts?: number
+})
+```
+
+---
+
+## 20. Analytics & Reporting
+
+### Teacher-level analytics (per Lab block)
+- Completion rate (% of enrolled students who completed the Lab)
+- Pass rate (% of completions that passed the threshold)
+- Average score
+- Average number of attempts
+- Average time on Lab
+- Score distribution histogram
+
+### Org-level analytics (compliance dashboard)
+- Labs completed per student per course
+- Labs failed / retried per student
+- Aggregate pass rates across the organization by tag (e.g. "cybersecurity Labs: 73% pass rate")
+- Downloadable CSV of all `lab_completion` records for audit
+
+### Lab-level analytics (for marketplace contributors — anonymized)
+- Total completions across all ClassroomIO instances
+- Average score by difficulty
+- Average time to complete
+- Most common failure points (from `metadata.details` aggregated anonymously)
+
+---
+
+## 21. Success Metrics
+
+| Metric | Target (6 months post-launch) |
+|--------|-------------------------------|
+| Labs added to lessons (teacher adoption) | 30% of active courses have ≥ 1 Lab block |
+| Student engagement | ≥ 85% of students who reach a Lab block start it |
+| Student completion | ≥ 75% of started Labs reach the `complete` event |
+| Marketplace growth | ≥ 12 Labs published (8 internal + 4 community) |
+| Completion record accuracy | 0 data loss incidents on completion records |
+| Developer experience | Median time from `npx create-classroomio-lab` to first `complete` event in harness ≤ 30 min |
+
+---
+
+## 22. Phased Roadmap
+
+### Phase 1: Foundation (Weeks 1–6)
+- [ ] `classroomio-labs` repository scaffold (SDK, harness, build pipeline, manifest spec)
+- [ ] `npx create-classroomio-lab` CLI scaffold
+- [ ] postMessage interface implemented in ClassroomIO lesson viewer
+- [ ] Lab block type in lesson editor (add, configure, reorder, delete)
+- [ ] Lab Picker Modal (from local registry.json fixture)
+- [ ] Teacher Mode and Student Mode iframe wrappers
+- [ ] Completion tracking (database table + API endpoint)
+- [ ] CDN deployment pipeline
+- [ ] **Lab 1: Phishing Detector** (first Lab, used to validate entire stack)
+
+### Phase 2: Compliance Pack (Weeks 7–12)
+- [ ] Marketplace picker connected to live registry.json from CDN
+- [ ] Version badge on Lab blocks (upgrade available notification)
+- [ ] Retry policy configuration for teachers
+- [ ] Pass threshold enforcement in lesson progress
+- [ ] **Labs 2–5:** Incident Response, Data Classifier, Social Engineering Detector, Policy Adjudicator
+- [ ] Org-level Lab completion reporting in admin dashboard
+
+### Phase 3: Ecosystem (Weeks 13–20)
+- [ ] Public marketplace website (`labs.classroomio.com`) with filtering, search, previews
+- [ ] Contribution documentation and design guidelines published
+- [ ] CI contract validation and accessibility checks live
+- [ ] AI assistant Lab recommendation integration
+- [ ] **Labs 6–8:** Hazard Spotter, GDPR Rights Simulator, Password Hygiene
+- [ ] Analytics dashboard for teachers (completion rate, pass rate, score distribution)
+- [ ] Community contributions open
+
+### Phase 4: Scale (Months 6+)
+- [ ] Monetization model for third-party Lab developers (revenue share)
+- [ ] Org-level custom Lab hosting (private Labs not in public marketplace)
+- [ ] Lab A/B testing (two configs, random assignment, compare outcomes)
+- [ ] Offline support (Service Worker caching of Lab iframe for LMS environments with limited connectivity)
+
+---
+
+## 23. Open Questions
+
+| # | Question | Owner | Priority |
+|---|----------|-------|----------|
+| 1 | Should completion records count toward LMS-grade exports (SCORM/xAPI)? If so, Labs may need to emit xAPI statements. | Product + Engineering | High |
+| 2 | What is the SLA for CDN availability? Labs blocking lesson progress means CDN downtime = blocked students. Need fallback (graceful degradation: show "Lab temporarily unavailable, lesson progress unblocked"). | Engineering | High |
+| 3 | Do Labs need to support RTL languages? Several target compliance markets (Middle East, Israel) are RTL. | Design | Medium |
+| 4 | Can a teacher build a private Lab (not published to the marketplace) and use it in their org? This needs a private hosting model. | Product | Medium |
+| 5 | Should the AI assistant be able to configure a Lab it recommends, or only suggest and require the teacher to configure manually? | Product | Medium |
+| 6 | For HIPAA and other regulated contexts, can the `metadata.details` stored in `lab_completion` contain anything that could be considered PHI? Need a data handling policy. | Legal + Engineering | High |
+| 7 | What is the review SLA for community Lab submissions? A slow review process kills ecosystem momentum. | Community | Medium |
+| 8 | Should Labs support multiple languages, or is the teacher responsible for picking a language-appropriate Lab? | Product | Low |
+
+---
+
+## Appendix A: Glossary
+
+| Term | Definition |
+|------|-----------|
+| Lab | A single interactive activity app, built as one Svelte file, embedded in a lesson via iframe |
+| Lab Block | A lesson content block of type `lab`, storing the slug, version, and config for one Lab |
+| Manifest | A `manifest.json` file in each Lab's directory describing its metadata and config schema |
+| Config | A JSON object of teacher-set values passed to the Lab at `init` time |
+| Config Schema | A JSON schema in `manifest.json` that describes what config fields the Lab accepts |
+| Registry | `registry.json` — the CDN-hosted catalog of all published Labs |
+| Teacher Mode | The iframe mode where the Lab renders its configuration UI and preview |
+| Student Mode | The iframe mode where the Lab renders its interactive experience |
+| Complete Event | The `postMessage` event emitted by a Lab when the student finishes the activity |
+| Harness | A local browser simulator that mimics the ClassroomIO host for Lab development |
+
+---
+
+## Appendix B: Rejected Alternatives
+
+**Why not iframes served from the same origin?**  
+Same-origin iframes can access parent window globals and DOM, defeating the sandbox. Cross-origin is required for security isolation.
+
+**Why not Web Components?**  
+Web Components run in the same JS context as the lesson page — no sandboxing, no isolation. Any Lab bug could crash the whole lesson page.
+
+**Why not a JSON-based DSL for building Labs?**  
+A DSL limits what Labs can express. The single-Svelte-file model gives contributors full control over interaction design, which is exactly what makes interesting Labs possible. The postMessage interface provides the structural constraint without constraining the experience.
+
+**Why not embed Labs as full pages with their own routing?**  
+Labs are inherently sub-page components — they belong inside a lesson, alongside other content. Routing to a separate page breaks the lesson flow and makes it impossible to have multiple Labs per lesson.
diff --git a/AGENTS.md b/AGENTS.md
index 7207416e..317f4359 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -20,17 +20,32 @@ export const ZUpdateProfile = z.object({
 export type TUpdateProfile = z.infer<typeof ZUpdateProfile>;
 ```
 
-### Step 2: Service
+### Step 2: Database query
+Put all direct database access in pure query functions under `packages/db/src/queries/{domain}/`. Routes and services never call Drizzle/`db` (or equivalent) directly—they import and compose these helpers.
+
+```typescript
+// packages/db/src/queries/auth/profile.ts
+export async function updateProfile(userId: string, data: Partial<TProfile>) {
+  // …db update returning the row or null if missing
+}
+```
+
+### Step 3: Service
+Services orchestrate one or more query functions (often inside a transaction), apply business rules, and raise `AppError` when something is invalid or missing. **Do not put SQL or other direct DB access in services**—only call query-layer functions and handle in-memory shaping or validation there.
+
 ```typescript
 // apps/api/src/services/account.ts
+import { updateProfile } from '@cio/db/queries/auth';
+
 export async function updateUser(userId: string, data: Partial<TProfile>) {
   const updated = await updateProfile(userId, data);
   if (!updated) throw new AppError('Profile not found', ErrorCodes.PROFILE_NOT_FOUND, 404);
+
   return updated;
 }
 ```
 
-### Step 3: Route
+### Step 4: Route
 Routes must return a single type (or a response shape whose `data` is a single type). If multiple shapes are needed, use separate endpoints or a keyed structure (e.g. `data` indexed by a key) so clients get one type per endpoint or key. Do not return a union of shapes from one route based on query parameters.
 
 ```typescript
@@ -52,7 +67,7 @@ export const accountRouter = new Hono().put(
 );
 ```
 
-### Step 4: Register
+### Step 5: Register
 ```typescript
 // apps/api/src/routes/account/index.ts
 export * from './account';
@@ -62,12 +77,12 @@ import { accountRouter } from '@api/routes/account';
 export const app = new Hono().route('/account', accountRouter);
 ```
 
-### Step 5: Build
+### Step 6: Build
 ```bash
 pnpm --filter @cio/api build
 ```
 
-### Step 6: Frontend Types & API Class
+### Step 7: Frontend Types & API Class
 ```typescript
 // apps/dashboard/src/lib/features/account/utils/types.ts
 import { classroomio } from '$lib/utils/services/api';
diff --git a/PRD-TRACKER.md b/PRD-TRACKER.md
index 05f985e9..19561b50 100644
--- a/PRD-TRACKER.md
+++ b/PRD-TRACKER.md
@@ -9,20 +9,13 @@ Use this file to keep a single prioritized view of all PRDs.
 | 1 | - | `prd/notification-system` | todo |
 | 2 | 14 | `prd/course-templates` | todo |
 | 3 | 5 | `prd/course-import` | todo |
-| 4 | 8 | `prd/exercise-question-types` | in-progress (A3, A6, A7, C3, C7, C13, C14 done) |
+| 4 | 8 | `prd/exercise-question-types [DONE]` | in-progress (dedicated shipped work: exercise sections + video recording; see DONE) |
 | 5 | 3 | `prd/course-cohorts` | todo |
-| 6 | - | `prd/programs` | todo |
-| 7 | 13 | `prd/self-host-single-org.md` | done |
-| 8 | 7 | `prd/email-template-customization` | todo |
-| 9 | - | `prd/selective-exercise-assignment` | todo |
-| - | - | `prd/mcp-course-authoring` | todo |
-| - | 1 | `prd/ai-course-assistant` | todo |
-| - | 2 | `prd/compliance-training-platform` | todo |
+| 6 | 7 | `prd/email-template-customization` | todo |
+| 7 | - | `prd/selective-exercise-assignment` | todo |
 | - | 4 | `prd/course-content-search` | todo |
-| - | 6 | `prd/course-widget-embed` | in-progress (core API, dashboard, public runtime, and embed build flow done; iframe preview parity, Shadow DOM, tests, and rollout hardening left) |
 | - | 9 | `prd/onboarding-ai-bootstrap` | todo |
 | - | 10 | `prd/pricing-improvements` | todo |
-| - | 11 | `prd/public-api` | todo |
 | - | 12 | `prd/public-courses` | todo |
 | - | - | `prd/customer-course-documentation` | todo |
 | - | 15 | `prd/webhooks` | todo |
@@ -31,9 +24,20 @@ Use this file to keep a single prioritized view of all PRDs.
 
 | PRD | Status |
 | --- | --- |
-| `prd/enterprise-sso` | done |
+| `prd/ai-course-assistant [DONE]` | done |
+| `prd/compliance-training-platform [DONE]` | done |
+| `prd/course-widget-embed [DONE]` | done |
+| `prd/custom-domain-cloudflare [DONE]` | done |
+| `prd/enterprise-sso [DONE]` | done |
+| `prd/exercise-sections [DONE]` | done |
 | `prd/lesson-edit [DONE]` | done |
 | `prd/lessons-list [DONE]` | done |
 | `prd/media-manager [DONE]` | done |
+| `prd/mcp-course-authoring [DONE]` | done |
+| `prd/org-landing-page-theme-picker [DONE]` | done |
+| `prd/programs [DONE]` | done |
+| `prd/public-api [DONE]` | done |
 | `prd/secure-student-invites [DONE]` | done |
+| `prd/self-host-single-org.md` | done |
 | `prd/tags-feature [DONE]` | done |
+| `prd/video-recording-question-type [DONE]` | done |
diff --git a/README.md b/README.md
index 5aa2e382..bdb45390 100644
--- a/README.md
+++ b/README.md
@@ -194,7 +194,7 @@ Notes:
 - The `GET /agent/status` endpoint flips to `enabled: true` as soon as any of those keys is set, which is what the dashboard checks before showing the AI button on a course.
 - Each chat request sends the user-selected `model` (persisted in `localStorage` as `classroomio-ai-chat-model`). The API resolves the provider for that model (`packages/utils/src/agent-models`) and returns 503 `AI_NOT_CONFIGURED` if that provider's key is missing.
 - Optional Tinybird observability: set `TINYBIRD_TOKEN` (and optionally `TINYBIRD_BASE_URL`) in `apps/api/.env`. Events are silently skipped when the token is absent.
-- More detail on architecture, tools, and routes lives in [`prd/ai-course-assistant/README.md`](prd/ai-course-assistant/README.md).
+- More detail on architecture, tools, and routes lives in [`prd/ai-course-assistant [DONE]/README.md`](prd/ai-course-assistant%20[DONE]/README.md).
 
 ### Docker Compose (Full Stack)
 
@@ -206,3 +206,12 @@ cp .env.example .env   # copy env template, edit for your domain
 The script reads root `.env` via `docker compose --env-file .env` and auto-generates secure values for `AUTH_BEARER_TOKEN` and `PRIVATE_SERVER_KEY` when missing.
 
 See [`.env.example`](.env.example) for the full list of environment variables with required/optional grouping, and [`docker/docs/SELF_HOST.md`](docker/docs/SELF_HOST.md) for the complete Docker self-hosting guide.
+
+## Publishing
+
+When cutting releases for hosted assets or the npm MCP package, run:
+
+- **Storybook** — `pnpm --filter @cio/storybook storybook:publish`
+- **Course widget embed** — `pnpm --filter @cio/embeds embeds:publish`
+- **Question type picker** — `pnpm --filter @cio/embeds embeds:publish` (same script builds and uploads both embeds)
+- **MCP (`@classroomio/mcp`)** — bump the version in `packages/mcp/package.json`, then `pnpm mcp:build` and `pnpm --filter @classroomio/mcp publish`
diff --git a/apps/api/.env.example b/apps/api/.env.example
index 256d9c23..a7ffb982 100644
--- a/apps/api/.env.example
+++ b/apps/api/.env.example
@@ -49,6 +49,7 @@ LICENSE_KEY=""
 OPENAI_API_KEY=""
 GOOGLE_API_KEY=""
 ANTHROPIC_API_KEY=""
+MOONSHOT_API_KEY=""
 
 # Tinybird event tracking for AI observability (optional — silently skipped when not set)
 # TINYBIRD_TOKEN=""
diff --git a/apps/api/src/__tests__/ai-credits-usage.test.ts b/apps/api/src/__tests__/ai-credits-usage.test.ts
new file mode 100644
index 00000000..0899212e
--- /dev/null
+++ b/apps/api/src/__tests__/ai-credits-usage.test.ts
@@ -0,0 +1,55 @@
+import { describe, expect, it } from 'vitest';
+import { computePurchasedTokenOverflow } from '@api/services/agent/usage';
+
+describe('computePurchasedTokenOverflow', () => {
+  it('returns 0 when usage stays within allowance', () => {
+    expect(
+      computePurchasedTokenOverflow({
+        allowance: 1000,
+        monthlyUsageBefore: 500,
+        requestTokens: 400
+      })
+    ).toBe(0);
+  });
+
+  it('returns partial overflow when request crosses allowance boundary', () => {
+    expect(
+      computePurchasedTokenOverflow({
+        allowance: 1000,
+        monthlyUsageBefore: 900,
+        requestTokens: 200
+      })
+    ).toBe(100);
+  });
+
+  it('charges entire request against credits when allowance already exhausted', () => {
+    expect(
+      computePurchasedTokenOverflow({
+        allowance: 1000,
+        monthlyUsageBefore: 1200,
+        requestTokens: 50
+      })
+    ).toBe(50);
+  });
+
+  it('handles zero allowance', () => {
+    expect(
+      computePurchasedTokenOverflow({
+        allowance: 0,
+        monthlyUsageBefore: 0,
+        requestTokens: 10
+      })
+    ).toBe(10);
+  });
+});
+
+describe('leaderboard percentage split', () => {
+  it('allocates shares that sum to 1', () => {
+    const rows = [{ tokens: 30 }, { tokens: 70 }];
+    const total = rows.reduce((sum, row) => sum + row.tokens, 0);
+    const percentages = rows.map((row) => (total > 0 ? row.tokens / total : 0));
+
+    expect(percentages).toEqual([0.3, 0.7]);
+    expect(percentages.reduce((a, b) => a + b, 0)).toBeCloseTo(1);
+  });
+});
diff --git a/apps/api/src/__tests__/question-update.test.ts b/apps/api/src/__tests__/question-update.test.ts
index c9517f52..134bad0d 100644
--- a/apps/api/src/__tests__/question-update.test.ts
+++ b/apps/api/src/__tests__/question-update.test.ts
@@ -290,6 +290,38 @@ describe('buildUpdatedQuestions', () => {
     });
   });
 
+  describe('in-exercise section assignment', () => {
+    const sectionA = 'aaaaaaaa-aaaa-4aaa-8aaa-aaaaaaaaaaaa';
+    const sectionB = 'bbbbbbbb-bbbb-4bbb-8bbb-bbbbbbbbbbbb';
+
+    it('sets exerciseSectionId when provided', () => {
+      const current = makeQuestion({ exerciseSectionId: sectionA });
+      const patch: QuestionPatch = { id: 1, exerciseSectionId: sectionB };
+
+      const [result] = buildUpdatedQuestions([current], [patch], EXERCISE_ID);
+
+      expect(result.exerciseSectionId).toBe(sectionB);
+    });
+
+    it('clears exerciseSectionId when patch passes null', () => {
+      const current = makeQuestion({ exerciseSectionId: sectionA });
+      const patch: QuestionPatch = { id: 1, exerciseSectionId: null };
+
+      const [result] = buildUpdatedQuestions([current], [patch], EXERCISE_ID);
+
+      expect(result.exerciseSectionId).toBeNull();
+    });
+
+    it('omits exerciseSectionId when patch does not mention it', () => {
+      const current = makeQuestion({ exerciseSectionId: sectionA });
+      const patch: QuestionPatch = { id: 1, points: 2 };
+
+      const [result] = buildUpdatedQuestions([current], [patch], EXERCISE_ID);
+
+      expect(result).not.toHaveProperty('exerciseSectionId');
+    });
+  });
+
   describe('safety guarantees', () => {
     it('throws when the patched id is not in the exercise', () => {
       const current = makeQuestion({ id: 1 });
diff --git a/apps/api/src/app.ts b/apps/api/src/app.ts
index 1b308cb2..969ff526 100644
--- a/apps/api/src/app.ts
+++ b/apps/api/src/app.ts
@@ -17,6 +17,7 @@ import { mailRouter } from '@api/routes/mail';
 import { mediaRouter } from '@api/routes/media';
 import { onboardingRouter } from '@api/routes/onboarding';
 import { organizationRouter } from '@api/routes/organization';
+import { publicCourseRouter } from '@api/routes/org-site';
 import { licenseRouter } from '@api/routes/license';
 import { organizationSsoRouter } from '@api/routes/organization/sso';
 import { organizationTokenAuthRouter } from '@api/routes/organization/token-auth';
@@ -29,14 +30,7 @@ import { secureHeaders } from 'hono/secure-headers';
 import { signupGuard } from '@api/middlewares/signup-guard';
 import { programRouter } from '@api/routes/program';
 import { unsplashRouter } from '@api/routes/unsplash/unsplash';
-import {
-  agentStatusRouter,
-  agentChatRouter,
-  agentUploadRouter,
-  agentUsageRouter,
-  agentCreditsRouter,
-  agentHistoryRouter
-} from '@api/routes/agent';
+import { agentRouter } from '@api/routes/agent';
 import { internalComplianceRouter } from '@api/routes/internal/compliance';
 
 // Create Hono app with chaining for RPC support
@@ -108,17 +102,13 @@ export const app = new Hono()
   .route('/dash', dashAnalyticsRouter)
   .route('/community', communityRouter)
   .route('/invite', inviteRouter)
+  .route('/org-site/course', publicCourseRouter)
   .route('/public-api/v1', v1Router)
   .route('/program', programRouter)
   .route('/unsplash', unsplashRouter)
   .route('/widgets', publicWidgetsRouter)
   .route('/internal/compliance', internalComplianceRouter)
-  .route('/agent', agentStatusRouter)
-  .route('/agent', agentChatRouter)
-  .route('/agent', agentUploadRouter)
-  .route('/agent', agentUsageRouter)
-  .route('/agent', agentCreditsRouter)
-  .route('/agent', agentHistoryRouter)
+  .route('/agent', agentRouter)
 
   // Error handling
   .onError((err, c) => {
diff --git a/apps/api/src/constants/index.ts b/apps/api/src/constants/index.ts
index e3cf3c76..666be2f1 100644
--- a/apps/api/src/constants/index.ts
+++ b/apps/api/src/constants/index.ts
@@ -8,7 +8,6 @@ export const TRUSTED_ORIGINS = env.TRUSTED_ORIGINS
   ? env.TRUSTED_ORIGINS.split(',')
   : ['http://localhost:5173', 'http://localhost:5180', 'http://*.classroomio.*'];
 
-console.log('TRUSTED_ORIGINSs', TRUSTED_ORIGINS);
 const {
   CLOUDFLARE_BUCKET_DOMAIN,
   CLOUDFLARE_ACCESS_KEY,
diff --git a/apps/api/src/routes/agent/agent.ts b/apps/api/src/routes/agent/agent.ts
new file mode 100644
index 00000000..ca25a4c1
--- /dev/null
+++ b/apps/api/src/routes/agent/agent.ts
@@ -0,0 +1,462 @@
+import { Hono } from '@api/utils/hono';
+import { authMiddleware } from '@api/middlewares/auth';
+import { orgMemberMiddleware } from '@api/middlewares/org-member';
+import { orgAdminMiddleware } from '@api/middlewares/org-admin';
+import { authOrApiKeyMiddleware } from '@api/middlewares/auth-or-api-key';
+import { handleError, AppError } from '@api/utils/errors';
+import { zValidator } from '@hono/zod-validator';
+import { streamText, stepCountIs, convertToModelMessages } from 'ai';
+import {
+  ZAgentChatBody,
+  ZAgentCreditPurchase,
+  ZAgentCreditsBody,
+  ZAgentGenerateCourseTitleBody,
+  ZAgentStatusQuery
+} from '@cio/utils/validation/agent';
+import {
+  addCredits,
+  enforceTokenBalance,
+  getDetailedUsage,
+  getPurchasedSummary,
+  getTeamLeaderboard,
+  getTokenBalance,
+  isOrgOnPaidPlan,
+  recordTokenUsage
+} from '@api/services/agent/usage';
+import { parseAndStoreDocument } from '@api/services/agent/document';
+import { recordCreditPurchase } from '@api/services/agent/credit-purchase';
+import { generateCourseMeta } from '@api/services/agent/title-generation';
+import { isCourseTeamMemberOrOrgAdmin } from '@cio/db/queries/group';
+import { getChatConversation } from '@cio/db/queries/agent';
+import { AgentRole, AIProvider, MAX_STEPS_PER_ROUND, type AgentContext, type AgentStatus } from '@cio/ai-assistant';
+import { createModel, getProviderConfigForProvider, pickAnyConfiguredProvider } from '@cio/ai-assistant/providers';
+import { AGENT_MODELS, DEFAULT_PICKER_MODEL_ID } from '@cio/utils/agent-models';
+import { buildSystemPrompt } from '@cio/ai-assistant/prompt';
+import { trackAgentEvent, AgentEvent } from '@api/utils/tinybird';
+import { redis } from '@api/utils/redis/redis';
+import { db } from '@cio/db';
+import * as schema from '@cio/db/schema';
+import { eq } from 'drizzle-orm';
+import { listCourseSections } from '@api/services/course/section';
+import { getLesson } from '@api/services/lesson/lesson';
+import { getExercise } from '@api/services/exercise/exercise';
+import { trimMessageHistory } from '@api/services/agent/context-window';
+import {
+  collectDocumentIds,
+  getLatestImplementationPlan,
+  loadDocumentsText,
+  verifyExerciseBelongsToCourse,
+  verifyLessonBelongsToCourse
+} from '@api/services/agent/chat-context';
+import { buildAgentTools } from '@api/services/agent/chat-tools';
+import { agentHistoryRouter } from './history';
+
+const agentCoreRouter = new Hono()
+  .get('/status', authMiddleware, orgMemberMiddleware, zValidator('query', ZAgentStatusQuery), async (c) => {
+    try {
+      const user = c.get('user')!;
+      const orgId = c.req.header('cio-org-id')!;
+      const { courseId } = c.req.valid('query');
+
+      const providerConfig = pickAnyConfiguredProvider();
+      if (!providerConfig) {
+        const status: AgentStatus = {
+          enabled: false,
+          role: AgentRole.STUDENT,
+          usage: { used: 0, allowance: 0, creditBalance: 0, remaining: 0 }
+        };
+
+        return c.json({ success: true, data: status });
+      }
+
+      const isTeamMember = await isCourseTeamMemberOrOrgAdmin(courseId, user.id);
+      const role = isTeamMember ? AgentRole.TEACHER : AgentRole.STUDENT;
+
+      const usage = await getTokenBalance(orgId);
+
+      const status: AgentStatus = {
+        enabled: true,
+        role,
+        usage
+      };
+
+      return c.json({ success: true, data: status });
+    } catch (error) {
+      return handleError(c, error, 'Failed to get agent status');
+    }
+  })
+  .post('/upload', authMiddleware, orgMemberMiddleware, async (c) => {
+    try {
+      const user = c.get('user')!;
+      const orgId = c.req.header('cio-org-id')!;
+
+      const courseId = c.req.query('courseId');
+      if (!courseId) {
+        throw new AppError('Course ID is required', 'COURSE_ID_REQUIRED', 400);
+      }
+
+      const conversationId = c.req.query('conversationId');
+      if (!conversationId) {
+        throw new AppError('Conversation ID is required', 'CONVERSATION_ID_REQUIRED', 400);
+      }
+
+      const isTeamMember = await isCourseTeamMemberOrOrgAdmin(courseId, user.id);
+      if (!isTeamMember) {
+        throw new AppError('You must be a course team member to upload documents', 'NOT_COURSE_TEAM_MEMBER', 403);
+      }
+
+      const conversation = await getChatConversation(conversationId, user.id);
+      if (!conversation || conversation.courseId !== courseId) {
+        throw new AppError('Conversation not found', 'CONVERSATION_NOT_FOUND', 404);
+      }
+
+      const isPaid = await isOrgOnPaidPlan(orgId);
+      if (!isPaid) {
+        return c.json(
+          {
+            success: false,
+            error: 'document_upload_requires_upgrade',
+            upgradeRequired: true
+          },
+          403
+        );
+      }
+
+      const body = await c.req.parseBody();
+      const file = body.file;
+
+      if (!(file instanceof File)) {
+        throw new AppError('File is required', 'FILE_REQUIRED', 400);
+      }
+
+      const result = await parseAndStoreDocument(file, orgId, user.id, courseId, conversationId, redis);
+
+      return c.json({ success: true, data: result });
+    } catch (error) {
+      if (error instanceof AppError) {
+        if (error.statusCode === 413) {
+          return c.json({ success: false, error: 'file_too_large', maxSize: 5242880 }, 413);
+        }
+
+        if (error.statusCode === 415) {
+          return c.json(
+            {
+              success: false,
+              error: 'unsupported_file_type',
+              allowed: [
+                'application/pdf',
+                'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+                'application/vnd.openxmlformats-officedocument.presentationml.presentation'
+              ]
+            },
+            415
+          );
+        }
+      }
+
+      return handleError(c, error, 'Failed to upload document');
+    }
+  })
+  .get('/usage/purchased', authMiddleware, orgMemberMiddleware, async (c) => {
+    try {
+      const orgId = c.req.header('cio-org-id')!;
+      const data = await getPurchasedSummary(orgId);
+
+      return c.json({ success: true, data });
+    } catch (error) {
+      return handleError(c, error, 'Failed to fetch purchased summary');
+    }
+  })
+  .get('/usage/leaderboard', authMiddleware, orgMemberMiddleware, async (c) => {
+    try {
+      const orgId = c.req.header('cio-org-id')!;
+      const data = await getTeamLeaderboard(orgId);
+
+      return c.json({ success: true, data });
+    } catch (error) {
+      return handleError(c, error, 'Failed to fetch leaderboard');
+    }
+  })
+  .get('/usage', authMiddleware, orgMemberMiddleware, async (c) => {
+    try {
+      const orgId = c.req.header('cio-org-id')!;
+      const usage = await getDetailedUsage(orgId);
+
+      return c.json({ success: true, data: usage });
+    } catch (error) {
+      return handleError(c, error, 'Failed to fetch usage stats');
+    }
+  })
+  .post('/credits', authMiddleware, orgAdminMiddleware, zValidator('json', ZAgentCreditsBody), async (c) => {
+    try {
+      const orgId = c.req.header('cio-org-id')!;
+      const { amount } = c.req.valid('json');
+
+      await addCredits(orgId, amount);
+      const balance = await getTokenBalance(orgId);
+
+      return c.json({ success: true, data: balance });
+    } catch (error) {
+      return handleError(c, error, 'Failed to purchase credits');
+    }
+  })
+  .post('/credits/purchase', authOrApiKeyMiddleware, zValidator('json', ZAgentCreditPurchase), async (c) => {
+    try {
+      const body = c.req.valid('json');
+      const purchase = await recordCreditPurchase(body);
+
+      return c.json({ success: true, data: purchase });
+    } catch (error) {
+      return handleError(c, error, 'Failed to record credit purchase');
+    }
+  })
+  .post(
+    '/generate-course-title',
+    authMiddleware,
+    orgMemberMiddleware,
+    zValidator('json', ZAgentGenerateCourseTitleBody),
+    async (c) => {
+      try {
+        const { prompt } = c.req.valid('json');
+
+        const providerConfig = pickAnyConfiguredProvider();
+
+        if (!providerConfig) {
+          throw new AppError('AI assistant is not configured', 'AI_NOT_CONFIGURED', 503);
+        }
+
+        const meta = await generateCourseMeta(prompt, providerConfig);
+
+        return c.json({ success: true as const, data: meta });
+      } catch (error) {
+        return handleError(c, error, 'Failed to generate course title');
+      }
+    }
+  )
+  .post('/chat', authMiddleware, orgMemberMiddleware, zValidator('json', ZAgentChatBody), async (c) => {
+    const user = c.get('user')!;
+    const orgId = c.req.header('cio-org-id')!;
+
+    try {
+      const { courseId, messages, context, model: requestedModel } = c.req.valid('json');
+
+      const modelId = requestedModel ?? DEFAULT_PICKER_MODEL_ID;
+      const modelDescriptor = AGENT_MODELS[modelId];
+      const baseProviderConfig = getProviderConfigForProvider(modelDescriptor.provider as AIProvider);
+
+      if (!baseProviderConfig) {
+        throw new AppError(`AI assistant is not configured for model "${modelId}"`, 'AI_NOT_CONFIGURED', 503);
+      }
+
+      const providerConfig = { ...baseProviderConfig, model: modelDescriptor.backendModelId };
+
+      const isTeamMember = await isCourseTeamMemberOrOrgAdmin(courseId, user.id);
+      const role = isTeamMember ? AgentRole.TEACHER : AgentRole.STUDENT;
+
+      if (role === AgentRole.STUDENT) {
+        throw new AppError('AI assistant is not available for students yet', 'STUDENT_NOT_SUPPORTED', 403);
+      }
+
+      const [courseRow] = await db
+        .select({
+          title: schema.course.title,
+          description: schema.course.description,
+          organizationId: schema.group.organizationId
+        })
+        .from(schema.course)
+        .innerJoin(schema.group, eq(schema.course.groupId, schema.group.id))
+        .where(eq(schema.course.id, courseId))
+        .limit(1);
+
+      if (!courseRow) {
+        throw new AppError('Course not found', 'COURSE_NOT_FOUND', 404);
+      }
+
+      if (courseRow.organizationId !== orgId) {
+        throw new AppError('Course does not belong to this organization', 'COURSE_ORG_MISMATCH', 403);
+      }
+
+      if (!modelDescriptor.isFree) {
+        const isPaid = await isOrgOnPaidPlan(orgId);
+
+        if (!isPaid) {
+          throw new AppError('Upgrade required to use this AI model', 'UPGRADE_REQUIRED', 403);
+        }
+      }
+
+      await enforceTokenBalance(orgId);
+
+      const documentIds = collectDocumentIds(messages, context?.documentId);
+      const documentText = documentIds.length > 0 ? await loadDocumentsText(documentIds, user.id) : undefined;
+
+      const existingSections = await listCourseSections(courseId);
+
+      let lessonTitle: string | undefined;
+      let lessonContent: string | undefined;
+      if (context?.lessonId) {
+        try {
+          await verifyLessonBelongsToCourse(context.lessonId, courseId);
+          const lesson = await getLesson(context.lessonId);
+          lessonTitle = lesson.title;
+          const lessonWithLangs = lesson as {
+            lessonLanguages?: Array<{ locale: string; content: string | null }>;
+          };
+          const langContent = lessonWithLangs.lessonLanguages?.find((ll) => ll.locale === 'en');
+          lessonContent = langContent?.content || undefined;
+        } catch {
+          // Lesson not found or doesn't belong — continue without lesson context
+        }
+      }
+
+      let exerciseTitle: string | undefined;
+      if (context?.exerciseId) {
+        try {
+          await verifyExerciseBelongsToCourse(context.exerciseId, courseId);
+          const exercise = await getExercise(context.exerciseId);
+          exerciseTitle = exercise.title;
+        } catch {
+          // Exercise not found or doesn't belong — continue without exercise context
+        }
+      }
+
+      const agentContext: AgentContext = {
+        orgId,
+        courseId,
+        courseTitle: courseRow.title,
+        courseDescription: courseRow.description || undefined,
+        userId: user.id,
+        role,
+        locale: 'en',
+        lessonId: context?.lessonId,
+        lessonTitle,
+        lessonContent,
+        exerciseId: context?.exerciseId,
+        exerciseTitle,
+        documentId: context?.documentId,
+        documentText,
+        existingSectionCount: existingSections.length
+      };
+
+      trackAgentEvent(AgentEvent.CHAT_STARTED, {
+        orgId,
+        userId: user.id,
+        courseId,
+        role,
+        hasDocument: !!documentText,
+        messageCount: messages.length
+      });
+
+      const startTime = Date.now();
+      const model = createModel(providerConfig);
+      const approvedPlan = getLatestImplementationPlan(messages);
+      const systemPrompt = [
+        buildSystemPrompt(agentContext),
+        approvedPlan
+          ? [
+              '',
+              'The latest user message approved a final course plan for immediate execution.',
+              'Implement that exact plan directly without asking the user to restate it.',
+              'Treat this approved plan as the canonical source if it differs from any earlier draft.',
+              `Approved plan JSON:\n${JSON.stringify(approvedPlan, null, 2)}`
+            ].join('\n')
+          : ''
+      ].join('\n');
+      const agentTools = buildAgentTools(orgId, user.id, courseId);
+
+      const trimmedMessages = trimMessageHistory(messages);
+      const modelMessages = await convertToModelMessages(trimmedMessages);
+      let completedStepCount = 0;
+      let finishReason: string | undefined;
+
+      const isAnthropic = providerConfig.provider === AIProvider.ANTHROPIC;
+      const systemContent = isAnthropic
+        ? {
+            role: 'system' as const,
+            content: systemPrompt,
+            providerOptions: { anthropic: { cacheControl: { type: 'ephemeral' } } }
+          }
+        : systemPrompt;
+
+      const result = streamText({
+        model,
+        maxRetries: 0,
+        system: systemContent,
+        messages: modelMessages,
+        tools: agentTools,
+        stopWhen: stepCountIs(MAX_STEPS_PER_ROUND),
+        onStepFinish: () => {
+          completedStepCount += 1;
+        },
+        onFinish: async ({ totalUsage, finishReason: resultFinishReason, steps }) => {
+          completedStepCount = steps.length;
+          finishReason = resultFinishReason;
+          const durationMs = Date.now() - startTime;
+          const inputTokens = totalUsage?.inputTokens ?? 0;
+          const outputTokens = totalUsage?.outputTokens ?? 0;
+
+          if (totalUsage) {
+            await recordTokenUsage(
+              orgId,
+              user.id,
+              courseId,
+              {
+                promptTokens: inputTokens,
+                completionTokens: outputTokens,
+                totalTokens: inputTokens + outputTokens
+              },
+              providerConfig.model || providerConfig.provider
+            );
+          }
+
+          trackAgentEvent(AgentEvent.CHAT_COMPLETED, {
+            orgId,
+            userId: user.id,
+            courseId,
+            inputTokens,
+            outputTokens,
+            model: providerConfig.model || providerConfig.provider,
+            durationMs
+          });
+        }
+      });
+
+      return result.toUIMessageStreamResponse({
+        messageMetadata: ({ part }) => {
+          if (part.type !== 'finish') {
+            return undefined;
+          }
+
+          return {
+            tokenUsage: {
+              promptTokens: part.totalUsage.inputTokens,
+              completionTokens: part.totalUsage.outputTokens,
+              totalTokens: part.totalUsage.totalTokens
+            },
+            continuation:
+              completedStepCount >= MAX_STEPS_PER_ROUND
+                ? {
+                    reason: 'step_limit' as const,
+                    maxSteps: MAX_STEPS_PER_ROUND,
+                    finishReason
+                  }
+                : undefined
+          };
+        }
+      });
+    } catch (error) {
+      trackAgentEvent(AgentEvent.CHAT_ERROR, {
+        orgId,
+        userId: user?.id,
+        errorMessage: error instanceof Error ? error.message : 'Unknown error'
+      });
+
+      if (error instanceof AppError) {
+        return c.json({ success: false, error: error.message, code: error.code }, error.statusCode);
+      }
+
+      console.error('Agent chat error:', error);
+      return c.json({ success: false, error: 'Failed to process chat message', code: 'INTERNAL_ERROR' }, 500);
+    }
+  });
+
+export const agentRouter = new Hono().route('/', agentCoreRouter).route('/history', agentHistoryRouter);
diff --git a/apps/api/src/routes/agent/chat.ts b/apps/api/src/routes/agent/chat.ts
deleted file mode 100644
index fd97d832..00000000
--- a/apps/api/src/routes/agent/chat.ts
+++ /dev/null
@@ -1,1097 +0,0 @@
-import { Hono } from '@api/utils/hono';
-import { authMiddleware } from '@api/middlewares/auth';
-import { orgMemberMiddleware } from '@api/middlewares/org-member';
-import { AppError } from '@api/utils/errors';
-import { zValidator } from '@hono/zod-validator';
-import { z } from 'zod';
-import { streamText, tool, stepCountIs, convertToModelMessages } from 'ai';
-import { ZAgentChatBody } from '@cio/utils/validation/agent';
-import {
-  ZCourseLandingPageUpdate,
-  ZCourseLandingPageMetadataUpdate,
-  type TCourseLandingPageUpdate
-} from '@cio/utils/validation/course';
-import { enforceTokenBalance, recordTokenUsage } from '@api/services/agent/usage';
-import { getDocumentText } from '@api/services/agent/document';
-import { isCourseTeamMemberOrOrgAdmin } from '@cio/db/queries/group';
-import { getCourseContentItems } from '@cio/db/queries/course/content';
-import { AgentRole, CoursePlanSchema, MAX_STEPS_PER_ROUND, type AgentContext, AIProvider } from '@cio/ai-assistant';
-import { createModel, getProviderConfigForProvider } from '@cio/ai-assistant/providers';
-import { AGENT_MODELS, DEFAULT_PICKER_MODEL_ID } from '@cio/utils/agent-models';
-import { buildSystemPrompt } from '@cio/ai-assistant/prompt';
-import { trackAgentEvent, AgentEvent } from '@api/utils/tinybird';
-import { redis } from '@api/utils/redis/redis';
-import { db } from '@cio/db';
-import * as schema from '@cio/db/schema';
-import { eq } from 'drizzle-orm';
-
-// Services
-import { listCourseSections, createCourseSection, updateCourseSectionService } from '@api/services/course/section';
-import { createLesson, getLesson, updateLessonService } from '@api/services/lesson/lesson';
-import { upsertLessonLanguageService } from '@api/services/lesson-language';
-import { createExercise, getExercise, updateExerciseService } from '@api/services/exercise/exercise';
-import { reorderCourseContent } from '@api/services/course/content';
-import { trimMessageHistory } from '@api/services/agent/context-window';
-import { buildUpdatedQuestions } from '@api/services/agent/question-update';
-import { normalizeAgentLessonContent } from '@api/services/agent/lesson-content';
-import { updateCourseLandingPageService } from '@api/services/course/landing-page';
-import { getCourseGoLiveReadiness, publishCourseWhenReady } from '@api/services/course/go-live-readiness';
-
-// ─── Resource Ownership Verification ─────────────────────────────────────────
-
-type ResourceOwnershipRow = {
-  courseId: string | null;
-  title?: string | null;
-};
-
-function buildResourceOwnershipError(params: {
-  resourceType: 'Lesson' | 'Exercise' | 'Section';
-  resourceId: string;
-  courseId: string;
-  resource?: ResourceOwnershipRow;
-}) {
-  const { resourceType, resourceId, resource } = params;
-
-  if (!resource) {
-    return new AppError(
-      `${resourceType} ${resourceId} does not exist in this course. The ID may have been hallucinated — call get_course_structure to fetch real IDs and retry.`,
-      'RESOURCE_NOT_IN_COURSE',
-      403
-    );
-  }
-
-  const titleSuffix = resource.title ? ` (${resource.title})` : '';
-
-  return new AppError(
-    `${resourceType} ${resourceId}${titleSuffix} belongs to a different course. Call get_course_structure to fetch IDs for the current course and retry.`,
-    'RESOURCE_NOT_IN_COURSE',
-    403
-  );
-}
-
-const UUID_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
-
-function assertValidUuid(resourceType: 'Lesson' | 'Exercise' | 'Section', value: string): void {
-  if (!UUID_REGEX.test(value)) {
-    throw new AppError(
-      `${resourceType} id "${value}" is not a valid UUID. Call get_course_structure to fetch real IDs and try again — never invent or guess UUIDs.`,
-      'INVALID_RESOURCE_ID',
-      400
-    );
-  }
-}
-
-async function verifyLessonBelongsToCourse(lessonId: string, courseId: string): Promise<void> {
-  assertValidUuid('Lesson', lessonId);
-
-  const [lesson] = await db
-    .select({ courseId: schema.lesson.courseId, title: schema.lesson.title })
-    .from(schema.lesson)
-    .where(eq(schema.lesson.id, lessonId))
-    .limit(1);
-
-  if (!lesson || lesson.courseId !== courseId) {
-    throw buildResourceOwnershipError({
-      resourceType: 'Lesson',
-      resourceId: lessonId,
-      courseId,
-      resource: lesson
-    });
-  }
-}
-
-async function verifyExerciseBelongsToCourse(exerciseId: string, courseId: string): Promise<void> {
-  assertValidUuid('Exercise', exerciseId);
-
-  const [exercise] = await db
-    .select({ courseId: schema.exercise.courseId, title: schema.exercise.title })
-    .from(schema.exercise)
-    .where(eq(schema.exercise.id, exerciseId))
-    .limit(1);
-
-  if (!exercise || exercise.courseId !== courseId) {
-    throw buildResourceOwnershipError({
-      resourceType: 'Exercise',
-      resourceId: exerciseId,
-      courseId,
-      resource: exercise
-    });
-  }
-}
-
-async function verifySectionBelongsToCourse(sectionId: string, courseId: string): Promise<void> {
-  assertValidUuid('Section', sectionId);
-
-  const [section] = await db
-    .select({ courseId: schema.courseSection.courseId, title: schema.courseSection.title })
-    .from(schema.courseSection)
-    .where(eq(schema.courseSection.id, sectionId))
-    .limit(1);
-
-  if (!section || section.courseId !== courseId) {
-    throw buildResourceOwnershipError({
-      resourceType: 'Section',
-      resourceId: sectionId,
-      courseId,
-      resource: section
-    });
-  }
-}
-
-// ─── Document Context Loading ────────────────────────────────────────────────
-
-type AttachedMessage = { metadata?: { attachment?: { documentId?: string } } };
-type PlanMetadataMessage = {
-  role?: string;
-  metadata?: {
-    plan?: {
-      action?: string;
-      payload?: unknown;
-    };
-  };
-};
-
-function collectDocumentIds(messages: unknown[], currentDocumentId?: string): string[] {
-  const ids = new Set<string>();
-
-  for (const msg of messages as AttachedMessage[]) {
-    const id = msg?.metadata?.attachment?.documentId;
-
-    if (id) ids.add(id);
-  }
-
-  if (currentDocumentId) ids.add(currentDocumentId);
-
-  return Array.from(ids);
-}
-
-async function loadDocumentsText(documentIds: string[]): Promise<string | undefined> {
-  const loaded = await Promise.all(
-    documentIds.map(async (id) => {
-      const text = await getDocumentText(id, redis);
-
-      return text ? { id, text } : null;
-    })
-  );
-
-  const sections = loaded
-    .filter((d): d is { id: string; text: string } => d !== null)
-    .map((d, i) => `--- Document ${i + 1} (id: ${d.id}) ---\n${d.text}`);
-
-  return sections.length > 0 ? sections.join('\n\n') : undefined;
-}
-
-function getLatestImplementationPlan(messages: unknown[]): z.infer<typeof CoursePlanSchema> | undefined {
-  for (let index = messages.length - 1; index >= 0; index--) {
-    const message = messages[index] as PlanMetadataMessage;
-
-    if (message?.role !== 'user') {
-      continue;
-    }
-
-    if (message?.metadata?.plan?.action !== 'implement_course_plan') {
-      continue;
-    }
-
-    const parsedPlan = CoursePlanSchema.safeParse(message.metadata.plan.payload);
-
-    if (parsedPlan.success) {
-      return parsedPlan.data;
-    }
-  }
-
-  return undefined;
-}
-
-// ─── Tool Parameter Schemas ──────────────────────────────────────────────────
-// courseId is NOT a parameter — it's injected from the authenticated request context.
-// This prevents prompt injection from tricking the LLM into targeting another course.
-
-const emptyParam = z.object({});
-const lessonReadParam = z.object({ lessonId: z.string(), locale: z.string().default('en') });
-const exerciseReadParam = z.object({ exerciseId: z.string() });
-const createSectionParam = z.object({ title: z.string().min(1), order: z.number().int().min(0) });
-const updateSectionParam = z
-  .object({
-    sectionId: z.string(),
-    title: z.string().min(1).optional(),
-    order: z.number().int().min(0).optional()
-  })
-  .refine((data) => data.title !== undefined || data.order !== undefined, {
-    message: 'Provide at least one field to update'
-  });
-const createLessonParam = z.object({ sectionId: z.string(), title: z.string().min(1), order: z.number().int().min(0) });
-const updateLessonParam = z
-  .object({
-    lessonId: z.string(),
-    title: z.string().min(1).optional(),
-    sectionId: z.string().optional(),
-    order: z.number().int().min(0).optional(),
-    lessonAt: z.string().optional(),
-    callUrl: z.string().optional(),
-    isUnlocked: z.boolean().optional(),
-    public: z.boolean().optional()
-  })
-  .refine(
-    (data) =>
-      data.title !== undefined ||
-      data.sectionId !== undefined ||
-      data.order !== undefined ||
-      data.lessonAt !== undefined ||
-      data.callUrl !== undefined ||
-      data.isUnlocked !== undefined ||
-      data.public !== undefined,
-    {
-      message: 'Provide at least one field to update'
-    }
-  );
-const updateContentParam = z.object({
-  lessonId: z.string(),
-  locale: z.string().default('en'),
-  content: z.string().min(1)
-});
-
-const questionSchema = z.object({
-  question: z.string().min(1),
-  questionTypeId: z.number().int().min(1).max(14).default(1),
-  points: z.number().min(0).default(1),
-  order: z.number().int().min(0),
-  options: z.array(z.object({ label: z.string().min(1), isCorrect: z.boolean() }))
-});
-
-const createExerciseParam = z.object({
-  lessonId: z.string().optional(),
-  sectionId: z.string().optional(),
-  title: z.string().min(1),
-  description: z.string().optional().describe('Optional short description shown to students above the questions.'),
-  order: z
-    .number()
-    .int()
-    .min(0)
-    .optional()
-    .describe(
-      'Display order within the section (0-based). Required when sectionId is provided. Lessons and exercises share the same order space within a section.'
-    ),
-  questions: z.array(questionSchema)
-});
-
-const updateExerciseParam = z
-  .object({
-    exerciseId: z.string().describe('The exercise to update. Must be a real UUID returned by a prior tool call.'),
-    title: z.string().min(1).optional().describe('New exercise title. Omit to keep unchanged.'),
-    description: z
-      .string()
-      .optional()
-      .describe('New short description shown to students. Pass an empty string to clear it.'),
-    lessonId: z.string().optional().describe('Link the exercise to a lesson in this course.'),
-    sectionId: z.string().optional().describe('Move the exercise to a section in this course.'),
-    order: z.number().int().min(0).optional().describe('New order within the section (0-based).'),
-    dueBy: z
-      .string()
-      .optional()
-      .describe('Due date in ISO 8601 format (e.g. 2026-05-01T23:59:00Z). Omit to keep unchanged.'),
-    isUnlocked: z.boolean().optional().describe('Whether the exercise is unlocked for students.'),
-    allowMultipleAttempts: z.boolean().optional().describe('Whether students can re-take the exercise.')
-  })
-  .refine(
-    (data) =>
-      data.title !== undefined ||
-      data.description !== undefined ||
-      data.lessonId !== undefined ||
-      data.sectionId !== undefined ||
-      data.order !== undefined ||
-      data.dueBy !== undefined ||
-      data.isUnlocked !== undefined ||
-      data.allowMultipleAttempts !== undefined,
-    {
-      message: 'Provide at least one field to update'
-    }
-  );
-
-const addQuestionsParam = z.object({ exerciseId: z.string(), questions: z.array(questionSchema) });
-
-const updateOptionSchema = z.object({
-  id: z.number().int().optional(),
-  label: z.string().min(1).optional(),
-  isCorrect: z.boolean().optional(),
-  settings: z.record(z.string(), z.unknown()).optional()
-});
-
-const updateQuestionPatchSchema = z.object({
-  id: z.number().int(),
-  question: z.string().min(1).optional(),
-  questionTypeId: z.number().int().min(1).max(14).optional(),
-  points: z.number().min(0).optional(),
-  order: z.number().int().min(0).optional(),
-  settings: z.record(z.string(), z.unknown()).optional(),
-  options: z.array(updateOptionSchema).optional()
-});
-
-const updateQuestionsParam = z.object({
-  exerciseId: z.string(),
-  questions: z.array(updateQuestionPatchSchema).min(1)
-});
-const coursePlanParam = z.object({ plan: CoursePlanSchema });
-
-// Gemini's tool-schema validator only accepts string enums, so numeric/boolean
-// `z.literal` values must be relaxed to plain types in the schemas the model sees.
-const agentLessonTabsOrder = z.array(
-  z.object({
-    id: z.number().int().min(1).max(4),
-    name: z.string()
-  })
-);
-const agentLandingPageMetadataUpdate = ZCourseLandingPageMetadataUpdate.extend({
-  lessonTabsOrder: agentLessonTabsOrder.optional()
-});
-const updateCourseLandingPageParam = ZCourseLandingPageUpdate.extend({
-  metadata: agentLandingPageMetadataUpdate.optional()
-}).refine(
-  (data) =>
-    data.title !== undefined ||
-    data.description !== undefined ||
-    data.overview !== undefined ||
-    data.cost !== undefined ||
-    data.currency !== undefined ||
-    data.imageUrl !== undefined ||
-    data.generateImage !== undefined ||
-    data.imageQuery !== undefined ||
-    data.metadata !== undefined,
-  {
-    message: 'Provide at least one landing-page field to update'
-  }
-);
-const goLiveParam = z.object({
-  confirmPublish: z
-    .boolean()
-    .describe('Must be true. Only use this after the teacher explicitly asks to publish or go live.')
-});
-
-const reorderContentParam = z.object({
-  sections: z
-    .array(
-      z.object({
-        id: z.string().min(1),
-        order: z.number().int().min(0)
-      })
-    )
-    .optional()
-    .describe('Reorder sections by setting new order values'),
-  items: z
-    .array(
-      z.object({
-        id: z.string().min(1),
-        type: z.enum(['LESSON', 'EXERCISE']),
-        order: z.number().int().min(0).optional().describe('New order within the section'),
-        sectionId: z.string().nullable().optional().describe('Move item to a different section')
-      })
-    )
-    .optional()
-    .describe('Reorder or move lessons/exercises')
-});
-
-// ─── Tool Builder ────────────────────────────────────────────────────────────
-
-function summarizeAgentDebugValue(value: unknown, depth = 0): unknown {
-  if (value == null) return value;
-
-  if (typeof value === 'string') {
-    return value.length > 200 ? `${value.slice(0, 200)}… (${value.length} chars)` : value;
-  }
-
-  if (typeof value === 'number' || typeof value === 'boolean') {
-    return value;
-  }
-
-  if (Array.isArray(value)) {
-    if (depth >= 2) {
-      return `[Array(${value.length})]`;
-    }
-
-    return {
-      count: value.length,
-      items: value.slice(0, 3).map((item) => summarizeAgentDebugValue(item, depth + 1))
-    };
-  }
-
-  if (typeof value === 'object') {
-    if (depth >= 2) {
-      return '[Object]';
-    }
-
-    return Object.fromEntries(
-      Object.entries(value as Record<string, unknown>).map(([key, nestedValue]) => [
-        key,
-        summarizeAgentDebugValue(nestedValue, depth + 1)
-      ])
-    );
-  }
-
-  return String(value);
-}
-
-function logAgentToolDebug(
-  phase: 'start' | 'success' | 'error',
-  toolName: string,
-  details: { courseId: string; userId: string; args?: unknown; result?: unknown; error?: unknown }
-) {
-  const base = `[agent-tool:${phase}] ${toolName}`;
-
-  if (phase === 'error') {
-    console.error(base, {
-      courseId: details.courseId,
-      userId: details.userId,
-      args: summarizeAgentDebugValue(details.args),
-      error:
-        details.error instanceof Error
-          ? {
-              message: details.error.message,
-              stack: details.error.stack
-            }
-          : summarizeAgentDebugValue(details.error)
-    });
-    return;
-  }
-
-  console.info(base, {
-    courseId: details.courseId,
-    userId: details.userId,
-    args: summarizeAgentDebugValue(details.args),
-    result: summarizeAgentDebugValue(details.result)
-  });
-}
-
-/**
- * Hide raw DB driver / SQL leakage from anything that gets surfaced to the chat UI
- * or the model's tool-error part. Postgres-js attaches the failed query SQL and
- * params to the error message, which is noisy and unsafe to show users.
- */
-function sanitizeToolError(toolName: string, error: unknown): Error {
-  if (error instanceof AppError) {
-    return error;
-  }
-
-  const raw = error instanceof Error ? error.message : String(error);
-  const looksLikeSqlLeak =
-    /^Failed query:/i.test(raw) ||
-    /\bparams:\s/i.test(raw) ||
-    /\binvalid input syntax for type uuid\b/i.test(raw) ||
-    /\bselect\s+.+\bfrom\s+/i.test(raw);
-
-  if (looksLikeSqlLeak) {
-    return new Error(
-      `${toolName} failed because of an invalid or unknown ID. Call get_course_structure to fetch the current IDs and retry — never invent UUIDs.`
-    );
-  }
-
-  return error instanceof Error ? error : new Error(raw);
-}
-
-async function executeAgentTool<TArgs, TResult>(
-  toolName: string,
-  params: { orgId: string; userId: string; courseId: string; args?: TArgs },
-  execute: () => Promise<TResult>
-): Promise<TResult> {
-  trackAgentEvent(AgentEvent.TOOL_CALLED, {
-    orgId: params.orgId,
-    userId: params.userId,
-    courseId: params.courseId,
-    toolName
-  });
-  logAgentToolDebug('start', toolName, {
-    courseId: params.courseId,
-    userId: params.userId,
-    args: params.args
-  });
-
-  try {
-    const result = await execute();
-
-    trackAgentEvent(AgentEvent.TOOL_COMPLETED, {
-      orgId: params.orgId,
-      userId: params.userId,
-      courseId: params.courseId,
-      toolName,
-      success: true
-    });
-    logAgentToolDebug('success', toolName, {
-      courseId: params.courseId,
-      userId: params.userId,
-      args: params.args,
-      result
-    });
-
-    return result;
-  } catch (error) {
-    logAgentToolDebug('error', toolName, {
-      courseId: params.courseId,
-      userId: params.userId,
-      args: params.args,
-      error
-    });
-
-    throw sanitizeToolError(toolName, error);
-  }
-}
-
-function buildAgentTools(orgId: string, userId: string, courseId: string) {
-  return {
-    get_course_structure: tool({
-      description:
-        'Get the full course structure including sections, lessons, and exercises as a tree. The courseId is automatically set — do not pass it.',
-      inputSchema: emptyParam,
-      execute: async () => {
-        return executeAgentTool('get_course_structure', { orgId, userId, courseId }, async () => {
-          const [items, sections] = await Promise.all([getCourseContentItems(courseId), listCourseSections(courseId)]);
-          return { sections, items };
-        });
-      }
-    }),
-
-    get_lesson_content: tool({
-      description: 'Get the HTML content of a specific lesson in this course.',
-      inputSchema: lessonReadParam,
-      execute: async (args) => {
-        return executeAgentTool('get_lesson_content', { orgId, userId, courseId, args }, async () => {
-          await verifyLessonBelongsToCourse(args.lessonId, courseId);
-          const lesson = await getLesson(args.lessonId);
-          const lessonWithLangs = lesson as {
-            id: string;
-            title: string;
-            lessonLanguages?: Array<{ locale: string; content: string | null }>;
-          };
-          const langContent = lessonWithLangs.lessonLanguages?.find((ll) => ll.locale === args.locale);
-          return { id: lesson.id, title: lesson.title, content: langContent?.content || null, locale: args.locale };
-        });
-      }
-    }),
-
-    get_exercise_details: tool({
-      description: 'Get an exercise with all its questions and answer options from this course.',
-      inputSchema: exerciseReadParam,
-      execute: async (args) => {
-        return executeAgentTool('get_exercise_details', { orgId, userId, courseId, args }, async () => {
-          await verifyExerciseBelongsToCourse(args.exerciseId, courseId);
-          return getExercise(args.exerciseId);
-        });
-      }
-    }),
-
-    create_section: tool({
-      description: 'Create a new section in this course.',
-      inputSchema: createSectionParam,
-      execute: async (args) => {
-        return executeAgentTool('create_section', { orgId, userId, courseId, args }, async () => {
-          const section = await createCourseSection(courseId, { title: args.title, courseId, order: args.order });
-          return { id: section.id, title: section.title, order: section.order };
-        });
-      }
-    }),
-
-    update_section: tool({
-      description:
-        'Update metadata for an existing section in this course. Use this to rename a section or change its order instead of creating a new section.',
-      inputSchema: updateSectionParam,
-      execute: async (args) => {
-        return executeAgentTool('update_section', { orgId, userId, courseId, args }, async () => {
-          await verifySectionBelongsToCourse(args.sectionId, courseId);
-          const section = await updateCourseSectionService(args.sectionId, {
-            ...(args.title !== undefined ? { title: args.title } : {}),
-            ...(args.order !== undefined ? { order: args.order } : {})
-          });
-
-          return { id: section.id, title: section.title, updated: true };
-        });
-      }
-    }),
-
-    create_lesson: tool({
-      description:
-        'Create a new lesson within a section of this course. Use update_lesson_content after to add content.',
-      inputSchema: createLessonParam,
-      execute: async (args) => {
-        return executeAgentTool('create_lesson', { orgId, userId, courseId, args }, async () => {
-          await verifySectionBelongsToCourse(args.sectionId, courseId);
-          const lesson = await createLesson(courseId, {
-            title: args.title,
-            courseId,
-            sectionId: args.sectionId,
-            order: args.order
-          });
-          return { id: lesson.id, title: lesson.title, order: lesson.order };
-        });
-      }
-    }),
-
-    update_lesson: tool({
-      description:
-        'Update metadata for an existing lesson in this course. Use this to rename, move, reorder, schedule, or change visibility/unlock settings instead of creating a new lesson.',
-      inputSchema: updateLessonParam,
-      execute: async (args) => {
-        return executeAgentTool('update_lesson', { orgId, userId, courseId, args }, async () => {
-          if (args.sectionId) {
-            await verifySectionBelongsToCourse(args.sectionId, courseId);
-          }
-
-          await verifyLessonBelongsToCourse(args.lessonId, courseId);
-          const lesson = await updateLessonService(args.lessonId, {
-            ...(args.title !== undefined ? { title: args.title } : {}),
-            ...(args.sectionId !== undefined ? { sectionId: args.sectionId } : {}),
-            ...(args.order !== undefined ? { order: args.order } : {}),
-            ...(args.lessonAt !== undefined ? { lessonAt: args.lessonAt } : {}),
-            ...(args.callUrl !== undefined ? { callUrl: args.callUrl } : {}),
-            ...(args.isUnlocked !== undefined ? { isUnlocked: args.isUnlocked } : {}),
-            ...(args.public !== undefined ? { public: args.public } : {})
-          });
-
-          return { id: lesson.id, title: lesson.title, updated: true };
-        });
-      }
-    }),
-
-    update_lesson_content: tool({
-      description:
-        'Update the text content of a lesson in this course. Replaces full lesson HTML for the given locale. For lesson HTML, put only the lesson body in the content. Do not include the lesson title. Do not use h1 or h2 anywhere in lesson HTML. Start headings at h3 because that is the highest heading level allowed in lesson content.',
-      inputSchema: updateContentParam,
-      execute: async (args) => {
-        return executeAgentTool('update_lesson_content', { orgId, userId, courseId, args }, async () => {
-          await verifyLessonBelongsToCourse(args.lessonId, courseId);
-          const lesson = await getLesson(args.lessonId);
-          const normalizedContent = normalizeAgentLessonContent(args.content, lesson.title);
-
-          await upsertLessonLanguageService(args.lessonId, {
-            locale: args.locale as 'en',
-            content: normalizedContent
-          });
-          return {
-            lessonId: args.lessonId,
-            locale: args.locale,
-            contentLength: normalizedContent.length,
-            updated: true
-          };
-        });
-      }
-    }),
-
-    create_exercise: tool({
-      description: 'Create a new exercise with questions and answer options in this course.',
-      inputSchema: createExerciseParam,
-      execute: async (args) => {
-        return executeAgentTool('create_exercise', { orgId, userId, courseId, args }, async () => {
-          if (args.lessonId) {
-            await verifyLessonBelongsToCourse(args.lessonId, courseId);
-          }
-
-          if (args.sectionId) {
-            await verifySectionBelongsToCourse(args.sectionId, courseId);
-          }
-
-          const exercise = await createExercise({
-            title: args.title,
-            description: args.description,
-            courseId,
-            lessonId: args.lessonId,
-            sectionId: args.sectionId,
-            order: args.order,
-            questions: args.questions.map((q, i) => ({
-              question: q.question,
-              questionTypeId: q.questionTypeId,
-              points: q.points,
-              order: q.order ?? i,
-              options: q.options.map((o) => ({ label: o.label, isCorrect: o.isCorrect }))
-            }))
-          });
-          return { id: exercise.id, title: exercise.title, questionCount: args.questions.length };
-        });
-      }
-    }),
-
-    update_exercise: tool({
-      description:
-        "Update an existing exercise's metadata (title, description, linked lesson, section, order, due date, lock state, allow-multiple-attempts). Use this for editing the exercise itself — not for changing its questions. To edit questions, use update_questions; to add questions, use add_questions.",
-      inputSchema: updateExerciseParam,
-      execute: async (args) => {
-        return executeAgentTool('update_exercise', { orgId, userId, courseId, args }, async () => {
-          await verifyExerciseBelongsToCourse(args.exerciseId, courseId);
-
-          if (args.lessonId) {
-            await verifyLessonBelongsToCourse(args.lessonId, courseId);
-          }
-
-          if (args.sectionId) {
-            await verifySectionBelongsToCourse(args.sectionId, courseId);
-          }
-
-          const updated = await updateExerciseService(args.exerciseId, {
-            title: args.title,
-            description: args.description,
-            lessonId: args.lessonId,
-            sectionId: args.sectionId,
-            order: args.order,
-            dueBy: args.dueBy,
-            isUnlocked: args.isUnlocked,
-            allowMultipleAttempts: args.allowMultipleAttempts
-          });
-
-          return {
-            id: updated.id,
-            title: updated.title,
-            description: updated.description ?? null,
-            dueBy: updated.dueBy ?? null,
-            updated: true
-          };
-        });
-      }
-    }),
-
-    add_questions: tool({
-      description: 'Add questions to an existing exercise in this course.',
-      inputSchema: addQuestionsParam,
-      execute: async (args) => {
-        return executeAgentTool('add_questions', { orgId, userId, courseId, args }, async () => {
-          await verifyExerciseBelongsToCourse(args.exerciseId, courseId);
-
-          const existingExercise = await getExercise(args.exerciseId);
-          const existingQuestions = existingExercise.questions || [];
-          const nextOrder = existingQuestions.length;
-
-          const newQuestions = args.questions.map((q, i) => ({
-            question: q.question,
-            questionTypeId: q.questionTypeId,
-            points: q.points,
-            order: q.order ?? nextOrder + i,
-            options: q.options.map((o) => ({ label: o.label, isCorrect: o.isCorrect }))
-          }));
-
-          const allQuestions = [
-            ...existingQuestions.map((eq) => ({
-              id: Number(eq.id),
-              question: eq.title,
-              questionTypeId: eq.questionTypeId,
-              points: eq.points,
-              order: eq.order,
-              options: eq.options.map((o) => ({ id: Number(o.id), label: o.label || '', isCorrect: o.isCorrect }))
-            })),
-            ...newQuestions
-          ];
-
-          await updateExerciseService(args.exerciseId, { questions: allQuestions });
-          return { exerciseId: args.exerciseId, addedCount: args.questions.length, totalCount: allQuestions.length };
-        });
-      }
-    }),
-
-    update_questions: tool({
-      description:
-        'Update existing questions in an exercise. Pass only fields you want to change; `id` identifies the question. For NUMERIC, the correct answer is `settings.correctValue` (number) — do NOT add options to NUMERIC questions. For STAR use `settings.correctValue`. For WORD_BANK use `settings.correctAnswers` and `settings.template`. RADIO/CHECKBOX/TRUE_FALSE use `options[].isCorrect` (include option `id` to edit, omit `id` to add). `settings` is shallow-merged with existing settings. Omit `options` entirely to leave existing options untouched.',
-      inputSchema: updateQuestionsParam,
-      execute: async (args) => {
-        return executeAgentTool('update_questions', { orgId, userId, courseId, args }, async () => {
-          await verifyExerciseBelongsToCourse(args.exerciseId, courseId);
-
-          const existing = await getExercise(args.exerciseId);
-          const merged = buildUpdatedQuestions(
-            (existing.questions || []).map((q) => ({
-              id: q.id,
-              title: q.title,
-              questionTypeId: q.questionTypeId,
-              points: q.points,
-              order: q.order,
-              settings: q.settings,
-              options: q.options
-            })),
-            args.questions,
-            args.exerciseId
-          );
-
-          await updateExerciseService(args.exerciseId, { questions: merged });
-
-          return { exerciseId: args.exerciseId, updatedCount: merged.length };
-        });
-      }
-    }),
-
-    reorder_content: tool({
-      description:
-        'Reorder sections, lessons, or exercises in this course. Can change the order of sections, change the order of lessons/exercises within a section, or move items between sections. Use get_course_structure first to see current order, and copy item IDs exactly from that response. Never rewrite or guess UUIDs.',
-      inputSchema: reorderContentParam,
-      execute: async (args) => {
-        return executeAgentTool('reorder_content', { orgId, userId, courseId, args }, async () => {
-          if (args.sections) {
-            for (const section of args.sections) {
-              await verifySectionBelongsToCourse(section.id, courseId);
-            }
-          }
-
-          if (args.items) {
-            for (const item of args.items) {
-              if (item.type === 'LESSON') {
-                await verifyLessonBelongsToCourse(item.id, courseId);
-              } else {
-                await verifyExerciseBelongsToCourse(item.id, courseId);
-              }
-
-              if (item.sectionId) {
-                await verifySectionBelongsToCourse(item.sectionId, courseId);
-              }
-            }
-          }
-
-          return reorderCourseContent(courseId, {
-            sections: args.sections,
-            items: args.items
-          });
-        });
-      }
-    }),
-
-    update_course_landing_page: tool({
-      description:
-        'Update course-level landing page fields for this course, including public title, description, overview, goals, requirements, instructor metadata, pricing, and banner image. The courseId is automatically set — do not pass it.',
-      inputSchema: updateCourseLandingPageParam,
-      execute: async (args) => {
-        return executeAgentTool('update_course_landing_page', { orgId, userId, courseId, args }, async () => {
-          const result = await updateCourseLandingPageService(courseId, args as TCourseLandingPageUpdate);
-
-          return {
-            courseId: result.course.id,
-            title: result.course.title,
-            description: result.course.description,
-            courseUrl: result.courseUrl,
-            bannerImageUrl: result.bannerImageUrl,
-            updated: true
-          };
-        });
-      }
-    }),
-
-    check_course_go_live_readiness: tool({
-      description:
-        'Check whether this course is ready to go live. Returns blockers, warnings, suggested fixes, and the public course URL if available. This tool does not publish the course.',
-      inputSchema: emptyParam,
-      execute: async () => {
-        return executeAgentTool('check_course_go_live_readiness', { orgId, userId, courseId }, async () => {
-          return getCourseGoLiveReadiness(courseId);
-        });
-      }
-    }),
-
-    go_live_course: tool({
-      description:
-        'Publish this course only after the teacher explicitly asks to go live. Runs the readiness checklist first, generates a slug when needed, and fails with blockers if the course is not ready.',
-      inputSchema: goLiveParam,
-      execute: async (args) => {
-        return executeAgentTool('go_live_course', { orgId, userId, courseId, args }, async () => {
-          const result = await publishCourseWhenReady(courseId);
-
-          return {
-            courseId: result.course.id,
-            title: result.course.title,
-            slug: result.course.slug,
-            isPublished: result.course.isPublished,
-            readiness: result.readiness
-          };
-        });
-      }
-    }),
-
-    generate_course_plan: tool({
-      description:
-        'Generate a structured course plan with sections and lessons. Always use this when asked to design or plan a course.',
-      inputSchema: coursePlanParam,
-      execute: async (args) => {
-        return executeAgentTool('generate_course_plan', { orgId, userId, courseId, args }, async () => {
-          const sectionCount = args.plan.sections.length;
-          const itemCount = args.plan.sections.reduce(
-            (sum: number, section: { items: unknown[] }) => sum + section.items.length,
-            0
-          );
-
-          trackAgentEvent(AgentEvent.PLAN_GENERATED, { orgId, userId, courseId, sectionCount, itemCount });
-
-          return args.plan;
-        });
-      }
-    })
-  };
-}
-
-// ─── Chat Route ──────────────────────────────────────────────────────────────
-
-export const agentChatRouter = new Hono().post(
-  '/chat',
-  authMiddleware,
-  orgMemberMiddleware,
-  zValidator('json', ZAgentChatBody),
-  async (c) => {
-    const user = c.get('user')!;
-    const orgId = c.req.header('cio-org-id')!;
-
-    try {
-      const { courseId, messages, context, model: requestedModel } = c.req.valid('json');
-
-      const modelId = requestedModel ?? DEFAULT_PICKER_MODEL_ID;
-      const modelDescriptor = AGENT_MODELS[modelId];
-      const baseProviderConfig = getProviderConfigForProvider(modelDescriptor.provider as AIProvider);
-
-      if (!baseProviderConfig) {
-        throw new AppError(`AI assistant is not configured for model "${modelId}"`, 'AI_NOT_CONFIGURED', 503);
-      }
-
-      const providerConfig = { ...baseProviderConfig, model: modelDescriptor.backendModelId };
-
-      const isTeamMember = await isCourseTeamMemberOrOrgAdmin(courseId, user.id);
-      const role = isTeamMember ? AgentRole.TEACHER : AgentRole.STUDENT;
-
-      if (role === AgentRole.STUDENT) {
-        throw new AppError('AI assistant is not available for students yet', 'STUDENT_NOT_SUPPORTED', 403);
-      }
-
-      await enforceTokenBalance(orgId);
-
-      const documentIds = collectDocumentIds(messages, context?.documentId);
-      const documentText = documentIds.length > 0 ? await loadDocumentsText(documentIds) : undefined;
-
-      const existingSections = await listCourseSections(courseId);
-
-      const [courseRow] = await db
-        .select({ title: schema.course.title, description: schema.course.description })
-        .from(schema.course)
-        .where(eq(schema.course.id, courseId))
-        .limit(1);
-
-      if (!courseRow) {
-        throw new AppError('Course not found', 'COURSE_NOT_FOUND', 404);
-      }
-
-      // Fetch lesson details if viewing a specific lesson
-      let lessonTitle: string | undefined;
-      let lessonContent: string | undefined;
-      if (context?.lessonId) {
-        try {
-          await verifyLessonBelongsToCourse(context.lessonId, courseId);
-          const lesson = await getLesson(context.lessonId);
-          lessonTitle = lesson.title;
-          const lessonWithLangs = lesson as {
-            lessonLanguages?: Array<{ locale: string; content: string | null }>;
-          };
-          const langContent = lessonWithLangs.lessonLanguages?.find((ll) => ll.locale === 'en');
-          lessonContent = langContent?.content || undefined;
-        } catch {
-          // Lesson not found or doesn't belong — continue without lesson context
-        }
-      }
-
-      // Fetch exercise details if viewing a specific exercise
-      let exerciseTitle: string | undefined;
-      if (context?.exerciseId) {
-        try {
-          await verifyExerciseBelongsToCourse(context.exerciseId, courseId);
-          const exercise = await getExercise(context.exerciseId);
-          exerciseTitle = exercise.title;
-        } catch {
-          // Exercise not found or doesn't belong — continue without exercise context
-        }
-      }
-
-      const agentContext: AgentContext = {
-        orgId,
-        courseId,
-        courseTitle: courseRow.title,
-        courseDescription: courseRow.description || undefined,
-        userId: user.id,
-        role,
-        locale: 'en',
-        lessonId: context?.lessonId,
-        lessonTitle,
-        lessonContent,
-        exerciseId: context?.exerciseId,
-        exerciseTitle,
-        documentId: context?.documentId,
-        documentText,
-        existingSectionCount: existingSections.length
-      };
-
-      trackAgentEvent(AgentEvent.CHAT_STARTED, {
-        orgId,
-        userId: user.id,
-        courseId,
-        role,
-        hasDocument: !!documentText,
-        messageCount: messages.length
-      });
-
-      const startTime = Date.now();
-      const model = createModel(providerConfig);
-      const approvedPlan = getLatestImplementationPlan(messages);
-      const systemPrompt = [
-        buildSystemPrompt(agentContext),
-        approvedPlan
-          ? [
-              '',
-              'The latest user message approved a final course plan for immediate execution.',
-              'Implement that exact plan directly without asking the user to restate it.',
-              'Treat this approved plan as the canonical source if it differs from any earlier draft.',
-              `Approved plan JSON:\n${JSON.stringify(approvedPlan, null, 2)}`
-            ].join('\n')
-          : ''
-      ].join('\n');
-      const agentTools = buildAgentTools(orgId, user.id, courseId);
-
-      const trimmedMessages = trimMessageHistory(messages);
-      const modelMessages = await convertToModelMessages(trimmedMessages);
-
-      const result = streamText({
-        model,
-        system: systemPrompt,
-        messages: modelMessages,
-        tools: agentTools,
-        stopWhen: stepCountIs(MAX_STEPS_PER_ROUND),
-        onFinish: async ({ usage }) => {
-          const durationMs = Date.now() - startTime;
-          const inputTokens = usage?.inputTokens ?? 0;
-          const outputTokens = usage?.outputTokens ?? 0;
-
-          if (usage) {
-            await recordTokenUsage(
-              orgId,
-              user.id,
-              courseId,
-              {
-                promptTokens: inputTokens,
-                completionTokens: outputTokens,
-                totalTokens: inputTokens + outputTokens
-              },
-              providerConfig.model || providerConfig.provider
-            );
-          }
-
-          trackAgentEvent(AgentEvent.CHAT_COMPLETED, {
-            orgId,
-            userId: user.id,
-            courseId,
-            inputTokens,
-            outputTokens,
-            model: providerConfig.model || providerConfig.provider,
-            durationMs
-          });
-        }
-      });
-
-      return result.toUIMessageStreamResponse();
-    } catch (error) {
-      trackAgentEvent(AgentEvent.CHAT_ERROR, {
-        orgId,
-        userId: user?.id,
-        errorMessage: error instanceof Error ? error.message : 'Unknown error'
-      });
-
-      if (error instanceof AppError) {
-        return c.json({ success: false, error: error.message, code: error.code }, error.statusCode);
-      }
-
-      console.error('Agent chat error:', error);
-      return c.json({ success: false, error: 'Failed to process chat message', code: 'INTERNAL_ERROR' }, 500);
-    }
-  }
-);
diff --git a/apps/api/src/routes/agent/credits.ts b/apps/api/src/routes/agent/credits.ts
deleted file mode 100644
index be2744cc..00000000
--- a/apps/api/src/routes/agent/credits.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Hono } from '@api/utils/hono';
-import { authMiddleware } from '@api/middlewares/auth';
-import { orgAdminMiddleware } from '@api/middlewares/org-admin';
-import { handleError } from '@api/utils/errors';
-import { zValidator } from '@hono/zod-validator';
-import { ZAgentCreditsBody } from '@cio/utils/validation/agent';
-import { addCredits, getTokenBalance } from '@api/services/agent/usage';
-
-/**
- * POST /agent/credits
- * Purchase additional token credits. Org admins only.
- * In v1, this directly adds credits (no payment integration).
- * Payment integration will be added when billing provider is wired up.
- */
-export const agentCreditsRouter = new Hono().post(
-  '/credits',
-  authMiddleware,
-  orgAdminMiddleware,
-  zValidator('json', ZAgentCreditsBody),
-  async (c) => {
-    try {
-      const orgId = c.req.header('cio-org-id')!;
-      const { amount } = c.req.valid('json');
-
-      // TODO: Integrate with payment provider before adding credits.
-      // For now, this endpoint adds credits directly for testing purposes.
-      await addCredits(orgId, amount);
-      const balance = await getTokenBalance(orgId);
-
-      return c.json({ success: true, data: balance });
-    } catch (error) {
-      return handleError(c, error, 'Failed to purchase credits');
-    }
-  }
-);
diff --git a/apps/api/src/routes/agent/history.ts b/apps/api/src/routes/agent/history.ts
index 2969c92d..110ef5c4 100644
--- a/apps/api/src/routes/agent/history.ts
+++ b/apps/api/src/routes/agent/history.ts
@@ -28,7 +28,7 @@ export const agentHistoryRouter = new Hono()
    * GET /agent/history?courseId=...
    * List all conversations for the current user in a course.
    */
-  .get('/history', authMiddleware, orgMemberMiddleware, zValidator('query', ZAgentHistoryQuery), async (c) => {
+  .get('/', authMiddleware, orgMemberMiddleware, zValidator('query', ZAgentHistoryQuery), async (c) => {
     try {
       const user = c.get('user')!;
       const { courseId } = c.req.valid('query');
@@ -46,7 +46,7 @@ export const agentHistoryRouter = new Hono()
    * Get a single conversation with its messages.
    */
   .get(
-    '/history/:conversationId',
+    '/:conversationId',
     authMiddleware,
     orgMemberMiddleware,
     zValidator('param', ZAgentConversationParam),
@@ -72,31 +72,25 @@ export const agentHistoryRouter = new Hono()
    * POST /agent/history
    * Create a new conversation.
    */
-  .post(
-    '/history',
-    authMiddleware,
-    orgMemberMiddleware,
-    zValidator('json', ZAgentConversationCreateBody),
-    async (c) => {
-      try {
-        const user = c.get('user')!;
-        const { courseId, title } = c.req.valid('json');
+  .post('/', authMiddleware, orgMemberMiddleware, zValidator('json', ZAgentConversationCreateBody), async (c) => {
+    try {
+      const user = c.get('user')!;
+      const { courseId, title } = c.req.valid('json');
 
-        const conversation = await createChatConversation(courseId, user.id, title);
+      const conversation = await createChatConversation(courseId, user.id, title);
 
-        return c.json({ success: true as const, data: conversation }, 201);
-      } catch (error) {
-        return handleError(c, error, 'Failed to create conversation');
-      }
+      return c.json({ success: true as const, data: conversation }, 201);
+    } catch (error) {
+      return handleError(c, error, 'Failed to create conversation');
     }
-  )
+  })
 
   /**
    * PUT /agent/history/:conversationId
    * Save messages to a conversation.
    */
   .put(
-    '/history/:conversationId',
+    '/:conversationId',
     authMiddleware,
     orgMemberMiddleware,
     zValidator('param', ZAgentConversationParam),
@@ -121,7 +115,7 @@ export const agentHistoryRouter = new Hono()
    * Delete a conversation.
    */
   .delete(
-    '/history/:conversationId',
+    '/:conversationId',
     authMiddleware,
     orgMemberMiddleware,
     zValidator('param', ZAgentHistoryDeleteParam),
@@ -144,7 +138,7 @@ export const agentHistoryRouter = new Hono()
    * Generate a short title from the first user message using a cheap model.
    */
   .post(
-    '/history/:conversationId/generate-title',
+    '/:conversationId/generate-title',
     authMiddleware,
     orgMemberMiddleware,
     zValidator('param', ZAgentGenerateTitleParam),
@@ -160,7 +154,12 @@ export const agentHistoryRouter = new Hono()
           throw new AppError('AI assistant is not configured', 'AI_NOT_CONFIGURED', 503);
         }
 
-        const title = await generateConversationTitle(firstMessageText, providerConfig);
+        let title: string;
+        try {
+          title = await generateConversationTitle(firstMessageText, providerConfig);
+        } catch {
+          title = firstMessageText.slice(0, 60).trim();
+        }
 
         await updateConversationTitle(conversationId, user.id, title);
 
diff --git a/apps/api/src/routes/agent/index.ts b/apps/api/src/routes/agent/index.ts
index 49f265f4..cac58ffd 100644
--- a/apps/api/src/routes/agent/index.ts
+++ b/apps/api/src/routes/agent/index.ts
@@ -1,6 +1 @@
-export { agentStatusRouter } from './status';
-export { agentChatRouter } from './chat';
-export { agentUploadRouter } from './upload';
-export { agentUsageRouter } from './usage';
-export { agentCreditsRouter } from './credits';
-export { agentHistoryRouter } from './history';
+export { agentRouter } from './agent';
diff --git a/apps/api/src/routes/agent/status.ts b/apps/api/src/routes/agent/status.ts
deleted file mode 100644
index 4daf6ff2..00000000
--- a/apps/api/src/routes/agent/status.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Hono } from '@api/utils/hono';
-import { authMiddleware } from '@api/middlewares/auth';
-import { orgMemberMiddleware } from '@api/middlewares/org-member';
-import { handleError } from '@api/utils/errors';
-import { zValidator } from '@hono/zod-validator';
-import { ZAgentStatusQuery } from '@cio/utils/validation/agent';
-import { getTokenBalance } from '@api/services/agent/usage';
-import { isCourseTeamMemberOrOrgAdmin } from '@cio/db/queries/group';
-import { AgentRole, type AgentStatus } from '@cio/ai-assistant';
-import { pickAnyConfiguredProvider } from '@cio/ai-assistant/providers';
-
-/**
- * GET /agent/status
- * Returns whether AI assistant is enabled, the user's role, and usage info.
- * Used by the dashboard to show/hide the AI button and configure the UI.
- */
-export const agentStatusRouter = new Hono().get(
-  '/status',
-  authMiddleware,
-  orgMemberMiddleware,
-  zValidator('query', ZAgentStatusQuery),
-  async (c) => {
-    try {
-      const user = c.get('user')!;
-      const orgId = c.req.header('cio-org-id')!;
-      const { courseId } = c.req.valid('query');
-
-      // Check if AI is configured (self-hosted check) — enabled when any provider key is set
-      const providerConfig = pickAnyConfiguredProvider();
-      if (!providerConfig) {
-        const status: AgentStatus = {
-          enabled: false,
-          role: AgentRole.STUDENT,
-          usage: { used: 0, allowance: 0, creditBalance: 0, remaining: 0 }
-        };
-
-        return c.json({ success: true, data: status });
-      }
-
-      // Detect role
-      const isTeamMember = await isCourseTeamMemberOrOrgAdmin(courseId, user.id);
-      const role = isTeamMember ? AgentRole.TEACHER : AgentRole.STUDENT;
-
-      // Get usage
-      const usage = await getTokenBalance(orgId);
-
-      const status: AgentStatus = {
-        enabled: true,
-        role,
-        usage
-      };
-
-      return c.json({ success: true, data: status });
-    } catch (error) {
-      return handleError(c, error, 'Failed to get agent status');
-    }
-  }
-);
diff --git a/apps/api/src/routes/agent/upload.ts b/apps/api/src/routes/agent/upload.ts
deleted file mode 100644
index 36cf46bc..00000000
--- a/apps/api/src/routes/agent/upload.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import { Hono } from '@api/utils/hono';
-import { authMiddleware } from '@api/middlewares/auth';
-import { orgMemberMiddleware } from '@api/middlewares/org-member';
-import { handleError, AppError } from '@api/utils/errors';
-import { parseAndStoreDocument } from '@api/services/agent/document';
-import { isOrgOnPaidPlan } from '@api/services/agent/usage';
-import { isCourseTeamMemberOrOrgAdmin } from '@cio/db/queries/group';
-import { getChatConversation } from '@cio/db/queries/agent';
-import { redis } from '@api/utils/redis/redis';
-
-/**
- * POST /agent/upload
- * Upload a PDF, DOCX, or PPTX file for AI-powered course plan generation.
- * EARLY_ADOPTER+ plan required. Max 5MB.
- */
-export const agentUploadRouter = new Hono().post('/upload', authMiddleware, orgMemberMiddleware, async (c) => {
-  try {
-    const user = c.get('user')!;
-    const orgId = c.req.header('cio-org-id')!;
-
-    const courseId = c.req.query('courseId');
-    if (!courseId) {
-      throw new AppError('Course ID is required', 'COURSE_ID_REQUIRED', 400);
-    }
-
-    const conversationId = c.req.query('conversationId');
-    if (!conversationId) {
-      throw new AppError('Conversation ID is required', 'CONVERSATION_ID_REQUIRED', 400);
-    }
-
-    // Verify course team membership
-    const isTeamMember = await isCourseTeamMemberOrOrgAdmin(courseId, user.id);
-    if (!isTeamMember) {
-      throw new AppError('You must be a course team member to upload documents', 'NOT_COURSE_TEAM_MEMBER', 403);
-    }
-
-    // Verify the conversation exists and belongs to this user + course
-    const conversation = await getChatConversation(conversationId, user.id);
-    if (!conversation || conversation.courseId !== courseId) {
-      throw new AppError('Conversation not found', 'CONVERSATION_NOT_FOUND', 404);
-    }
-
-    // Plan gate — EARLY_ADOPTER+ required
-    const isPaid = await isOrgOnPaidPlan(orgId);
-    if (!isPaid) {
-      return c.json(
-        {
-          success: false,
-          error: 'document_upload_requires_upgrade',
-          upgradeRequired: true
-        },
-        403
-      );
-    }
-
-    // Parse multipart body
-    const body = await c.req.parseBody();
-    const file = body.file;
-
-    if (!(file instanceof File)) {
-      throw new AppError('File is required', 'FILE_REQUIRED', 400);
-    }
-
-    const result = await parseAndStoreDocument(file, orgId, user.id, courseId, conversationId, redis);
-
-    return c.json({ success: true, data: result });
-  } catch (error) {
-    if (error instanceof AppError) {
-      if (error.statusCode === 413) {
-        return c.json({ success: false, error: 'file_too_large', maxSize: 5242880 }, 413);
-      }
-
-      if (error.statusCode === 415) {
-        return c.json(
-          {
-            success: false,
-            error: 'unsupported_file_type',
-            allowed: [
-              'application/pdf',
-              'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-              'application/vnd.openxmlformats-officedocument.presentationml.presentation'
-            ]
-          },
-          415
-        );
-      }
-    }
-
-    return handleError(c, error, 'Failed to upload document');
-  }
-});
diff --git a/apps/api/src/routes/agent/usage.ts b/apps/api/src/routes/agent/usage.ts
deleted file mode 100644
index 1e723b9c..00000000
--- a/apps/api/src/routes/agent/usage.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Hono } from '@api/utils/hono';
-import { authMiddleware } from '@api/middlewares/auth';
-import { orgMemberMiddleware } from '@api/middlewares/org-member';
-import { handleError } from '@api/utils/errors';
-import { getDetailedUsage } from '@api/services/agent/usage';
-
-/**
- * GET /agent/usage
- * Returns detailed usage stats for the current org:
- * used, allowance, creditBalance, remaining, and daily history for the current month.
- */
-export const agentUsageRouter = new Hono().get('/usage', authMiddleware, orgMemberMiddleware, async (c) => {
-  try {
-    const orgId = c.req.header('cio-org-id')!;
-    const usage = await getDetailedUsage(orgId);
-
-    return c.json({ success: true, data: usage });
-  } catch (error) {
-    return handleError(c, error, 'Failed to fetch usage stats');
-  }
-});
diff --git a/apps/api/src/routes/course/exercise.ts b/apps/api/src/routes/course/exercise.ts
index 4841c124..13401beb 100644
--- a/apps/api/src/routes/course/exercise.ts
+++ b/apps/api/src/routes/course/exercise.ts
@@ -5,7 +5,11 @@ import {
   ZExerciseGetParam,
   ZExerciseListQuery,
   ZExerciseSubmissionCreate,
-  ZExerciseUpdate
+  ZExerciseUpdate,
+  ZExerciseVideoRecordingParam,
+  ZExerciseVideoRecordingPlaybackParam,
+  ZExerciseVideoRecordingUploadComplete,
+  ZExerciseVideoRecordingUploadInit
 } from '@cio/utils/validation/exercise';
 import { ZTemplateById, ZTemplateByTag } from '@cio/utils/validation/mocks';
 import {
@@ -19,6 +23,11 @@ import {
 } from '@api/services/exercise/exercise';
 import { fetchAllTemplatesMetadata, fetchTemplateById, fetchTemplatesByTag } from '@api/services/exercise/template';
 import { getGroupMemberIdByCourseAndProfile, isCourseTeamMemberOrOrgAdmin } from '@cio/db/queries/group';
+import {
+  completeVideoRecordingUpload,
+  getVideoRecordingPlaybackUrl,
+  initVideoRecordingUpload
+} from '@api/services/exercise/video-recording';
 
 import { Hono } from '@api/utils/hono';
 import { authMiddleware } from '@api/middlewares/auth';
@@ -259,6 +268,67 @@ export const exerciseRouter = new Hono()
       }
     }
   )
+  .post(
+    '/:exerciseId/question/:questionId/video-recording/upload/init',
+    authMiddleware,
+    courseMemberMiddleware,
+    zValidator('param', ZExerciseVideoRecordingParam),
+    zValidator('json', ZExerciseVideoRecordingUploadInit),
+    async (c) => {
+      try {
+        const user = c.get('user')!;
+        const courseId = c.req.param('courseId')!;
+        const { exerciseId, questionId } = c.req.valid('param');
+        const data = c.req.valid('json');
+
+        const upload = await initVideoRecordingUpload(courseId, exerciseId, questionId, user.id, data);
+
+        return c.json({ success: true, data: upload }, 200);
+      } catch (error) {
+        return handleError(c, error, 'Failed to initialize video recording upload');
+      }
+    }
+  )
+  .post(
+    '/:exerciseId/question/:questionId/video-recording/upload/complete',
+    authMiddleware,
+    courseMemberMiddleware,
+    zValidator('param', ZExerciseVideoRecordingParam),
+    zValidator('json', ZExerciseVideoRecordingUploadComplete),
+    async (c) => {
+      try {
+        const user = c.get('user')!;
+        const courseId = c.req.param('courseId')!;
+        const { exerciseId, questionId } = c.req.valid('param');
+        const data = c.req.valid('json');
+
+        const answer = await completeVideoRecordingUpload(courseId, exerciseId, questionId, user.id, data);
+
+        return c.json({ success: true, data: answer }, 200);
+      } catch (error) {
+        return handleError(c, error, 'Failed to complete video recording upload');
+      }
+    }
+  )
+  .get(
+    '/:exerciseId/submission/:submissionId/question/:questionId/video-recording/playback',
+    authMiddleware,
+    courseMemberMiddleware,
+    zValidator('param', ZExerciseVideoRecordingPlaybackParam),
+    async (c) => {
+      try {
+        const user = c.get('user')!;
+        const courseId = c.req.param('courseId')!;
+        const { exerciseId, submissionId, questionId } = c.req.valid('param');
+
+        const playback = await getVideoRecordingPlaybackUrl(courseId, exerciseId, submissionId, questionId, user.id);
+
+        return c.json({ success: true, data: playback }, 200);
+      } catch (error) {
+        return handleError(c, error, 'Failed to get video recording playback URL');
+      }
+    }
+  )
   // Template routes
   .get('/template', authMiddleware, courseMemberMiddleware, async (c) => {
     try {
diff --git a/apps/api/src/routes/org-site/index.ts b/apps/api/src/routes/org-site/index.ts
new file mode 100644
index 00000000..50ee3f1b
--- /dev/null
+++ b/apps/api/src/routes/org-site/index.ts
@@ -0,0 +1 @@
+export * from './public-course';
diff --git a/apps/api/src/routes/org-site/public-course.ts b/apps/api/src/routes/org-site/public-course.ts
new file mode 100644
index 00000000..18c6e563
--- /dev/null
+++ b/apps/api/src/routes/org-site/public-course.ts
@@ -0,0 +1,55 @@
+import { ZPublicCourseBySlugParam, ZPublicCourseItemParam } from '@cio/utils/validation/course';
+import { getPublicCourseItemService, getPublicCourseTreeService } from '@api/services/course/public-course';
+
+import { Hono } from '@api/utils/hono';
+import { handleError } from '@api/utils/errors';
+import { zValidator } from '@hono/zod-validator';
+
+/**
+ * Anonymous-safe (no auth middleware) routes that back the `(org-site)/course/[slug]`
+ * surface in the dashboard. Every response returns a single typed shape per the
+ * repo's single-response-shape rule; the item endpoint uses a `kind` discriminator.
+ */
+export const publicCourseRouter = new Hono()
+  .get('/:courseSlug', zValidator('param', ZPublicCourseBySlugParam), async (c) => {
+    try {
+      const { courseSlug } = c.req.valid('param');
+      const tree = await getPublicCourseTreeService(courseSlug);
+
+      if (!tree) {
+        return c.json(
+          {
+            success: false as const,
+            error: 'Public course not found',
+            code: 'COURSE_NOT_FOUND'
+          },
+          404
+        );
+      }
+
+      return c.json({ success: true as const, data: tree });
+    } catch (error) {
+      return handleError(c, error, 'Failed to load public course');
+    }
+  })
+  .get('/:courseSlug/item/:itemSlug', zValidator('param', ZPublicCourseItemParam), async (c) => {
+    try {
+      const { courseSlug, itemSlug } = c.req.valid('param');
+      const item = await getPublicCourseItemService(courseSlug, itemSlug);
+
+      if (!item) {
+        return c.json(
+          {
+            success: false as const,
+            error: 'Public course item not found',
+            code: 'NOT_FOUND'
+          },
+          404
+        );
+      }
+
+      return c.json({ success: true as const, data: item });
+    } catch (error) {
+      return handleError(c, error, 'Failed to load public course item');
+    }
+  });
diff --git a/apps/api/src/services/agent/agent-tool-schemas.ts b/apps/api/src/services/agent/agent-tool-schemas.ts
new file mode 100644
index 00000000..11007246
--- /dev/null
+++ b/apps/api/src/services/agent/agent-tool-schemas.ts
@@ -0,0 +1,239 @@
+import { z } from 'zod';
+import { CoursePlanSchema } from '@cio/ai-assistant';
+import { ZExerciseSectionAfterBehavior } from '@cio/utils/validation/exercise';
+import { ZCourseLandingPageUpdate, ZCourseLandingPageMetadataUpdate } from '@cio/utils/validation/course';
+
+// courseId is NOT a parameter — it's injected from the authenticated request context.
+// This prevents prompt injection from tricking the LLM into targeting another course.
+
+export const emptyParam = z.object({});
+export const lessonReadParam = z.object({ lessonId: z.string(), locale: z.string().default('en') });
+export const exerciseReadParam = z.object({ exerciseId: z.string() });
+export const createSectionParam = z.object({ title: z.string().min(1), order: z.number().int().min(0) });
+export const updateSectionParam = z
+  .object({
+    sectionId: z.string(),
+    title: z.string().min(1).optional(),
+    order: z.number().int().min(0).optional()
+  })
+  .refine((data) => data.title !== undefined || data.order !== undefined, {
+    message: 'Provide at least one field to update'
+  });
+export const createLessonParam = z.object({
+  sectionId: z.string(),
+  title: z.string().min(1),
+  order: z.number().int().min(0)
+});
+export const updateLessonParam = z
+  .object({
+    lessonId: z.string(),
+    title: z.string().min(1).optional(),
+    sectionId: z.string().optional(),
+    order: z.number().int().min(0).optional(),
+    lessonAt: z.string().optional(),
+    callUrl: z.string().optional(),
+    isUnlocked: z.boolean().optional(),
+    public: z.boolean().optional()
+  })
+  .refine(
+    (data) =>
+      data.title !== undefined ||
+      data.sectionId !== undefined ||
+      data.order !== undefined ||
+      data.lessonAt !== undefined ||
+      data.callUrl !== undefined ||
+      data.isUnlocked !== undefined ||
+      data.public !== undefined,
+    {
+      message: 'Provide at least one field to update'
+    }
+  );
+export const updateContentParam = z.object({
+  lessonId: z.string(),
+  locale: z.string().default('en'),
+  content: z.string().min(1)
+});
+
+export const questionSchema = z.object({
+  question: z.string().min(1),
+  questionTypeId: z.number().int().min(1).max(14).default(1),
+  points: z.number().min(0).default(1),
+  order: z.number().int().min(0),
+  options: z.array(z.object({ label: z.string().min(1), isCorrect: z.boolean() }))
+});
+
+export const createExerciseParam = z.object({
+  lessonId: z.string().optional(),
+  sectionId: z.string().optional(),
+  title: z.string().min(1),
+  description: z.string().optional().describe('Optional short description shown to students above the questions.'),
+  order: z
+    .number()
+    .int()
+    .min(0)
+    .optional()
+    .describe(
+      'Display order within the section (0-based). Required when sectionId is provided. Lessons and exercises share the same order space within a section.'
+    ),
+  questions: z.array(questionSchema)
+});
+
+export const updateExerciseParam = z
+  .object({
+    exerciseId: z.string().describe('The exercise to update. Must be a real UUID returned by a prior tool call.'),
+    title: z.string().min(1).optional().describe('New exercise title. Omit to keep unchanged.'),
+    description: z
+      .string()
+      .optional()
+      .describe('New short description shown to students. Pass an empty string to clear it.'),
+    lessonId: z.string().optional().describe('Link the exercise to a lesson in this course.'),
+    sectionId: z.string().optional().describe('Move the exercise to a section in this course.'),
+    order: z.number().int().min(0).optional().describe('New order within the section (0-based).'),
+    dueBy: z
+      .string()
+      .optional()
+      .describe('Due date in ISO 8601 format (e.g. 2026-05-01T23:59:00Z). Omit to keep unchanged.'),
+    isUnlocked: z.boolean().optional().describe('Whether the exercise is unlocked for students.'),
+    allowMultipleAttempts: z.boolean().optional().describe('Whether students can re-take the exercise.')
+  })
+  .refine(
+    (data) =>
+      data.title !== undefined ||
+      data.description !== undefined ||
+      data.lessonId !== undefined ||
+      data.sectionId !== undefined ||
+      data.order !== undefined ||
+      data.dueBy !== undefined ||
+      data.isUnlocked !== undefined ||
+      data.allowMultipleAttempts !== undefined,
+    {
+      message: 'Provide at least one field to update'
+    }
+  );
+
+export const updateExerciseSectionParam = z
+  .object({
+    exerciseId: z
+      .string()
+      .describe('The exercise that contains this section. Must match the exercise you read with get_exercise_details.'),
+    exerciseSectionId: z
+      .string()
+      .describe('The exercise section id from get_exercise_details `sections[].id` — not a course section id.'),
+    title: z.string().min(1).optional().describe('New section heading shown above questions in this block.'),
+    description: z.string().optional().describe('Optional intro HTML for this block. Pass an empty string to clear it.')
+  })
+  .refine((data) => data.title !== undefined || data.description !== undefined, {
+    message: 'Provide at least title or description to update'
+  });
+
+export const createExerciseSectionParam = z.object({
+  exerciseId: z.string().describe('The exercise that will contain this section.'),
+  title: z.string().min(1).describe('Section heading shown above the questions in this block.'),
+  description: z
+    .string()
+    .optional()
+    .describe('Optional intro HTML for this block. Pass an empty string to leave it blank.'),
+  order: z.number().int().min(0).describe('Display order within the exercise (0-based).'),
+  colorTheme: z.enum(['blue', 'green', 'amber', 'rose', 'violet', 'slate']).optional(),
+  afterBehavior: ZExerciseSectionAfterBehavior.optional()
+});
+
+export const addQuestionsParam = z.object({
+  exerciseId: z.string(),
+  exerciseSectionId: z
+    .string()
+    .uuid()
+    .optional()
+    .describe(
+      'In-exercise section id from get_exercise_details `sections[].id` where the new questions should appear (not a course outline section id).'
+    ),
+  questions: z.array(questionSchema)
+});
+
+export const updateOptionSchema = z.object({
+  id: z.number().int().optional(),
+  label: z.string().min(1).optional(),
+  isCorrect: z.boolean().optional(),
+  settings: z.record(z.string(), z.unknown()).optional()
+});
+
+export const updateQuestionPatchSchema = z.object({
+  id: z.number().int(),
+  question: z.string().min(1).optional(),
+  questionTypeId: z.number().int().min(1).max(14).optional(),
+  points: z.number().min(0).optional(),
+  order: z.number().int().min(0).optional(),
+  exerciseSectionId: z
+    .string()
+    .uuid()
+    .nullable()
+    .optional()
+    .describe(
+      'Move the question to this in-exercise block (get_exercise_details sections[].id). Use null to clear section assignment.'
+    ),
+  settings: z.record(z.string(), z.unknown()).optional(),
+  options: z.array(updateOptionSchema).optional()
+});
+
+export const updateQuestionsParam = z.object({
+  exerciseId: z.string(),
+  questions: z.array(updateQuestionPatchSchema).min(1)
+});
+export const coursePlanParam = z.object({ plan: CoursePlanSchema });
+
+// Gemini's tool-schema validator only accepts string enums, so numeric/boolean
+// `z.literal` values must be relaxed to plain types in the schemas the model sees.
+export const agentLessonTabsOrder = z.array(
+  z.object({
+    id: z.number().int().min(1).max(4),
+    name: z.string()
+  })
+);
+export const agentLandingPageMetadataUpdate = ZCourseLandingPageMetadataUpdate.extend({
+  lessonTabsOrder: agentLessonTabsOrder.optional()
+});
+export const updateCourseLandingPageParam = ZCourseLandingPageUpdate.extend({
+  metadata: agentLandingPageMetadataUpdate.optional()
+}).refine(
+  (data) =>
+    data.title !== undefined ||
+    data.description !== undefined ||
+    data.overview !== undefined ||
+    data.cost !== undefined ||
+    data.currency !== undefined ||
+    data.imageUrl !== undefined ||
+    data.generateImage !== undefined ||
+    data.imageQuery !== undefined ||
+    data.metadata !== undefined,
+  {
+    message: 'Provide at least one landing-page field to update'
+  }
+);
+export const goLiveParam = z.object({
+  confirmPublish: z
+    .boolean()
+    .describe('Must be true. Only use this after the teacher explicitly asks to publish or go live.')
+});
+
+export const reorderContentParam = z.object({
+  sections: z
+    .array(
+      z.object({
+        id: z.string().min(1),
+        order: z.number().int().min(0)
+      })
+    )
+    .optional()
+    .describe('Reorder sections by setting new order values'),
+  items: z
+    .array(
+      z.object({
+        id: z.string().min(1),
+        type: z.enum(['LESSON', 'EXERCISE']),
+        order: z.number().int().min(0).optional().describe('New order within the section'),
+        sectionId: z.string().nullable().optional().describe('Move item to a different section')
+      })
+    )
+    .optional()
+    .describe('Reorder or move lessons/exercises')
+});
diff --git a/apps/api/src/services/agent/chat-context.ts b/apps/api/src/services/agent/chat-context.ts
new file mode 100644
index 00000000..867151b6
--- /dev/null
+++ b/apps/api/src/services/agent/chat-context.ts
@@ -0,0 +1,160 @@
+import { AppError } from '@api/utils/errors';
+import { getDocumentText } from '@api/services/agent/document';
+import { redis } from '@api/utils/redis/redis';
+import { getCourseSectionBinding, getExerciseCourseBinding, getLessonCourseBinding } from '@cio/db/queries/agent';
+import { z } from 'zod';
+import { CoursePlanSchema } from '@cio/ai-assistant';
+
+type ResourceOwnershipRow = {
+  courseId: string | null;
+  title?: string | null;
+};
+
+function buildResourceOwnershipError(params: {
+  resourceType: 'Lesson' | 'Exercise' | 'Section';
+  resourceId: string;
+  courseId: string;
+  resource?: ResourceOwnershipRow;
+}) {
+  const { resourceType, resourceId, resource } = params;
+
+  if (!resource) {
+    return new AppError(
+      `${resourceType} ${resourceId} does not exist in this course. The ID may have been hallucinated — call get_course_structure to fetch real IDs and retry.`,
+      'RESOURCE_NOT_IN_COURSE',
+      403
+    );
+  }
+
+  const titleSuffix = resource.title ? ` (${resource.title})` : '';
+
+  return new AppError(
+    `${resourceType} ${resourceId}${titleSuffix} belongs to a different course. Call get_course_structure to fetch IDs for the current course and retry.`,
+    'RESOURCE_NOT_IN_COURSE',
+    403
+  );
+}
+
+const UUID_REGEX = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+
+export function assertValidUuid(
+  resourceType: 'Lesson' | 'Exercise' | 'Section' | 'ExerciseSection',
+  value: string
+): void {
+  if (!UUID_REGEX.test(value)) {
+    throw new AppError(
+      `${resourceType} id "${value}" is not a valid UUID. Call get_course_structure to fetch real IDs and try again — never invent or guess UUIDs.`,
+      'INVALID_RESOURCE_ID',
+      400
+    );
+  }
+}
+
+export async function verifyLessonBelongsToCourse(lessonId: string, courseId: string): Promise<void> {
+  assertValidUuid('Lesson', lessonId);
+
+  const lesson = await getLessonCourseBinding(lessonId);
+
+  if (!lesson || lesson.courseId !== courseId) {
+    throw buildResourceOwnershipError({
+      resourceType: 'Lesson',
+      resourceId: lessonId,
+      courseId,
+      resource: lesson
+    });
+  }
+}
+
+export async function verifyExerciseBelongsToCourse(exerciseId: string, courseId: string): Promise<void> {
+  assertValidUuid('Exercise', exerciseId);
+
+  const exercise = await getExerciseCourseBinding(exerciseId);
+
+  if (!exercise || exercise.courseId !== courseId) {
+    throw buildResourceOwnershipError({
+      resourceType: 'Exercise',
+      resourceId: exerciseId,
+      courseId,
+      resource: exercise
+    });
+  }
+}
+
+export async function verifySectionBelongsToCourse(sectionId: string, courseId: string): Promise<void> {
+  assertValidUuid('Section', sectionId);
+
+  const section = await getCourseSectionBinding(sectionId);
+
+  if (!section || section.courseId !== courseId) {
+    throw buildResourceOwnershipError({
+      resourceType: 'Section',
+      resourceId: sectionId,
+      courseId,
+      resource: section
+    });
+  }
+}
+
+type AttachedMessage = { metadata?: { attachment?: { documentId?: string } } };
+
+export function collectDocumentIds(messages: unknown[], currentDocumentId?: string): string[] {
+  const ids = new Set<string>();
+
+  for (const msg of messages as AttachedMessage[]) {
+    const id = msg?.metadata?.attachment?.documentId;
+
+    if (id) ids.add(id);
+  }
+
+  if (currentDocumentId) ids.add(currentDocumentId);
+
+  return Array.from(ids);
+}
+
+export async function loadDocumentsText(documentIds: string[], userId: string): Promise<string | undefined> {
+  const loaded = await Promise.all(
+    documentIds.map(async (id) => {
+      const text = await getDocumentText(id, userId, redis);
+
+      return text ? { id, text } : null;
+    })
+  );
+
+  const sections = loaded
+    .filter((d): d is { id: string; text: string } => d !== null)
+    .map((d, i) => `--- Document ${i + 1} (id: ${d.id}) ---\n${d.text}`);
+
+  return sections.length > 0 ? sections.join('\n\n') : undefined;
+}
+
+type PlanMetadataMessage = {
+  role?: string;
+  metadata?: {
+    plan?: {
+      action?: string;
+      payload?: unknown;
+    };
+  };
+};
+
+export function getLatestImplementationPlan(messages: unknown[]): z.infer<typeof CoursePlanSchema> | undefined {
+  for (let index = messages.length - 1; index >= 0; index--) {
+    const message = messages[index] as PlanMetadataMessage;
+
+    if (message?.role !== 'user') {
+      continue;
+    }
+
+    if (message?.metadata?.plan?.action !== 'implement_course_plan') {
+      continue;
+    }
+
+    const parsedPlan = CoursePlanSchema.safeParse(message.metadata.plan.payload);
+
+    if (parsedPlan.success) {
+      return parsedPlan.data;
+    }
+  }
+
+  return undefined;
+}
diff --git a/apps/api/src/services/agent/chat-tools.ts b/apps/api/src/services/agent/chat-tools.ts
new file mode 100644
index 00000000..3b01671d
--- /dev/null
+++ b/apps/api/src/services/agent/chat-tools.ts
@@ -0,0 +1,655 @@
+import { tool } from 'ai';
+import { CoursePlanSchema } from '@cio/ai-assistant';
+import { AppError } from '@api/utils/errors';
+import { trackAgentEvent, AgentEvent } from '@api/utils/tinybird';
+import { getCourseContentItems } from '@cio/db/queries/course/content';
+import { getExerciseSectionsByExerciseId } from '@cio/db/queries/exercise';
+import type { TCourseLandingPageUpdate } from '@cio/utils/validation/course';
+import { listCourseSections, createCourseSection, updateCourseSectionService } from '@api/services/course/section';
+import { createLesson, getLesson, updateLessonService } from '@api/services/lesson/lesson';
+import { upsertLessonLanguageService } from '@api/services/lesson-language';
+import {
+  createExercise,
+  getExercise,
+  createExerciseSectionService,
+  updateExerciseService,
+  updateExerciseSectionMetadataService
+} from '@api/services/exercise/exercise';
+import { reorderCourseContent } from '@api/services/course/content';
+import { normalizeAgentLessonContent } from '@api/services/agent/lesson-content';
+import { buildUpdatedQuestions } from '@api/services/agent/question-update';
+import { updateCourseLandingPageService } from '@api/services/course/landing-page';
+import { getCourseGoLiveReadiness, publishCourseWhenReady } from '@api/services/course/go-live-readiness';
+import {
+  assertValidUuid,
+  verifyExerciseBelongsToCourse,
+  verifyLessonBelongsToCourse,
+  verifySectionBelongsToCourse
+} from '@api/services/agent/chat-context';
+import {
+  addQuestionsParam,
+  coursePlanParam,
+  createExerciseParam,
+  createExerciseSectionParam,
+  createLessonParam,
+  createSectionParam,
+  emptyParam,
+  exerciseReadParam,
+  goLiveParam,
+  lessonReadParam,
+  reorderContentParam,
+  updateContentParam,
+  updateCourseLandingPageParam,
+  updateExerciseParam,
+  updateExerciseSectionParam,
+  updateLessonParam,
+  updateQuestionsParam,
+  updateSectionParam
+} from '@api/services/agent/agent-tool-schemas';
+
+function summarizeAgentDebugValue(value: unknown, depth = 0): unknown {
+  if (value == null) return value;
+
+  if (typeof value === 'string') {
+    return value.length > 200 ? `${value.slice(0, 200)}… (${value.length} chars)` : value;
+  }
+
+  if (typeof value === 'number' || typeof value === 'boolean') {
+    return value;
+  }
+
+  if (Array.isArray(value)) {
+    if (depth >= 2) {
+      return `[Array(${value.length})]`;
+    }
+
+    return {
+      count: value.length,
+      items: value.slice(0, 3).map((item) => summarizeAgentDebugValue(item, depth + 1))
+    };
+  }
+
+  if (typeof value === 'object') {
+    if (depth >= 2) {
+      return '[Object]';
+    }
+
+    return Object.fromEntries(
+      Object.entries(value as Record<string, unknown>).map(([key, nestedValue]) => [
+        key,
+        summarizeAgentDebugValue(nestedValue, depth + 1)
+      ])
+    );
+  }
+
+  return String(value);
+}
+
+function logAgentToolDebug(
+  phase: 'start' | 'success' | 'error',
+  toolName: string,
+  details: { courseId: string; userId: string; args?: unknown; result?: unknown; error?: unknown }
+) {
+  const base = `[agent-tool:${phase}] ${toolName}`;
+
+  if (phase === 'error') {
+    console.error(base, {
+      courseId: details.courseId,
+      userId: details.userId,
+      args: summarizeAgentDebugValue(details.args),
+      error:
+        details.error instanceof Error
+          ? {
+              message: details.error.message,
+              stack: details.error.stack
+            }
+          : summarizeAgentDebugValue(details.error)
+    });
+    return;
+  }
+
+  console.info(base, {
+    courseId: details.courseId,
+    userId: details.userId,
+    args: summarizeAgentDebugValue(details.args),
+    result: summarizeAgentDebugValue(details.result)
+  });
+}
+
+function sanitizeToolError(toolName: string, error: unknown): Error {
+  if (error instanceof AppError) {
+    return error;
+  }
+
+  const raw = error instanceof Error ? error.message : String(error);
+  const looksLikeSqlLeak =
+    /^Failed query:/i.test(raw) ||
+    /\bparams:\s/i.test(raw) ||
+    /\binvalid input syntax for type uuid\b/i.test(raw) ||
+    /\bselect\s+.+\bfrom\s+/i.test(raw);
+
+  if (looksLikeSqlLeak) {
+    return new Error(
+      `${toolName} failed because of an invalid or unknown ID. Call get_course_structure to fetch the current IDs and retry — never invent UUIDs.`
+    );
+  }
+
+  return error instanceof Error ? error : new Error(raw);
+}
+
+async function executeAgentTool<TArgs, TResult>(
+  toolName: string,
+  params: { orgId: string; userId: string; courseId: string; args?: TArgs },
+  execute: () => Promise<TResult>
+): Promise<TResult> {
+  trackAgentEvent(AgentEvent.TOOL_CALLED, {
+    orgId: params.orgId,
+    userId: params.userId,
+    courseId: params.courseId,
+    toolName
+  });
+  logAgentToolDebug('start', toolName, {
+    courseId: params.courseId,
+    userId: params.userId,
+    args: params.args
+  });
+
+  try {
+    const result = await execute();
+
+    trackAgentEvent(AgentEvent.TOOL_COMPLETED, {
+      orgId: params.orgId,
+      userId: params.userId,
+      courseId: params.courseId,
+      toolName,
+      success: true
+    });
+    logAgentToolDebug('success', toolName, {
+      courseId: params.courseId,
+      userId: params.userId,
+      args: params.args,
+      result
+    });
+
+    return result;
+  } catch (error) {
+    logAgentToolDebug('error', toolName, {
+      courseId: params.courseId,
+      userId: params.userId,
+      args: params.args,
+      error
+    });
+
+    throw sanitizeToolError(toolName, error);
+  }
+}
+
+export function buildAgentTools(orgId: string, userId: string, courseId: string) {
+  return {
+    get_course_structure: tool({
+      description:
+        'Get the full course structure including sections, lessons, and exercises as a tree. The courseId is automatically set — do not pass it.',
+      inputSchema: emptyParam,
+      execute: async () => {
+        return executeAgentTool('get_course_structure', { orgId, userId, courseId }, async () => {
+          const [items, sections] = await Promise.all([getCourseContentItems(courseId), listCourseSections(courseId)]);
+          return { sections, items };
+        });
+      }
+    }),
+
+    get_lesson_content: tool({
+      description: 'Get the HTML content of a specific lesson in this course.',
+      inputSchema: lessonReadParam,
+      execute: async (args) => {
+        return executeAgentTool('get_lesson_content', { orgId, userId, courseId, args }, async () => {
+          await verifyLessonBelongsToCourse(args.lessonId, courseId);
+          const lesson = await getLesson(args.lessonId);
+          const lessonWithLangs = lesson as {
+            id: string;
+            title: string;
+            lessonLanguages?: Array<{ locale: string; content: string | null }>;
+          };
+          const langContent = lessonWithLangs.lessonLanguages?.find((ll) => ll.locale === args.locale);
+          return { id: lesson.id, title: lesson.title, content: langContent?.content || null, locale: args.locale };
+        });
+      }
+    }),
+
+    get_exercise_details: tool({
+      description:
+        'Get an exercise with sections, questions, and answer options from this course. Each sections entry has an id — use it with update_exercise_section to change that question block title or description.',
+      inputSchema: exerciseReadParam,
+      execute: async (args) => {
+        return executeAgentTool('get_exercise_details', { orgId, userId, courseId, args }, async () => {
+          await verifyExerciseBelongsToCourse(args.exerciseId, courseId);
+          return getExercise(args.exerciseId);
+        });
+      }
+    }),
+
+    create_section: tool({
+      description: 'Create a new section in this course.',
+      inputSchema: createSectionParam,
+      execute: async (args) => {
+        return executeAgentTool('create_section', { orgId, userId, courseId, args }, async () => {
+          const section = await createCourseSection(courseId, { title: args.title, courseId, order: args.order });
+          return { id: section.id, title: section.title, order: section.order };
+        });
+      }
+    }),
+
+    update_section: tool({
+      description:
+        'Update metadata for an existing section in this course. Use this to rename a section or change its order instead of creating a new section.',
+      inputSchema: updateSectionParam,
+      execute: async (args) => {
+        return executeAgentTool('update_section', { orgId, userId, courseId, args }, async () => {
+          await verifySectionBelongsToCourse(args.sectionId, courseId);
+          const section = await updateCourseSectionService(args.sectionId, {
+            ...(args.title !== undefined ? { title: args.title } : {}),
+            ...(args.order !== undefined ? { order: args.order } : {})
+          });
+
+          return { id: section.id, title: section.title, updated: true };
+        });
+      }
+    }),
+
+    create_lesson: tool({
+      description:
+        'Create a new lesson within a section of this course. Use update_lesson_content after to add content.',
+      inputSchema: createLessonParam,
+      execute: async (args) => {
+        return executeAgentTool('create_lesson', { orgId, userId, courseId, args }, async () => {
+          await verifySectionBelongsToCourse(args.sectionId, courseId);
+          const lesson = await createLesson(courseId, {
+            title: args.title,
+            courseId,
+            sectionId: args.sectionId,
+            order: args.order
+          });
+          return { id: lesson.id, title: lesson.title, order: lesson.order };
+        });
+      }
+    }),
+
+    update_lesson: tool({
+      description:
+        'Update metadata for an existing lesson in this course. Use this to rename, move, reorder, schedule, or change visibility/unlock settings instead of creating a new lesson.',
+      inputSchema: updateLessonParam,
+      execute: async (args) => {
+        return executeAgentTool('update_lesson', { orgId, userId, courseId, args }, async () => {
+          if (args.sectionId) {
+            await verifySectionBelongsToCourse(args.sectionId, courseId);
+          }
+
+          await verifyLessonBelongsToCourse(args.lessonId, courseId);
+          const lesson = await updateLessonService(args.lessonId, {
+            ...(args.title !== undefined ? { title: args.title } : {}),
+            ...(args.sectionId !== undefined ? { sectionId: args.sectionId } : {}),
+            ...(args.order !== undefined ? { order: args.order } : {}),
+            ...(args.lessonAt !== undefined ? { lessonAt: args.lessonAt } : {}),
+            ...(args.callUrl !== undefined ? { callUrl: args.callUrl } : {}),
+            ...(args.isUnlocked !== undefined ? { isUnlocked: args.isUnlocked } : {}),
+            ...(args.public !== undefined ? { public: args.public } : {})
+          });
+
+          return { id: lesson.id, title: lesson.title, updated: true };
+        });
+      }
+    }),
+
+    update_lesson_content: tool({
+      description:
+        'Update the text content of a lesson in this course. Replaces full lesson HTML for the given locale. For lesson HTML, put only the lesson body in the content. Do not include the lesson title. Do not use h1 or h2 anywhere in lesson HTML. Start headings at h3 because that is the highest heading level allowed in lesson content.',
+      inputSchema: updateContentParam,
+      execute: async (args) => {
+        return executeAgentTool('update_lesson_content', { orgId, userId, courseId, args }, async () => {
+          await verifyLessonBelongsToCourse(args.lessonId, courseId);
+          const lesson = await getLesson(args.lessonId);
+          const normalizedContent = normalizeAgentLessonContent(args.content, lesson.title);
+
+          await upsertLessonLanguageService(args.lessonId, {
+            locale: args.locale as 'en',
+            content: normalizedContent
+          });
+          return {
+            lessonId: args.lessonId,
+            locale: args.locale,
+            contentLength: normalizedContent.length,
+            updated: true
+          };
+        });
+      }
+    }),
+
+    create_exercise: tool({
+      description: 'Create a new exercise with questions and answer options in this course.',
+      inputSchema: createExerciseParam,
+      execute: async (args) => {
+        return executeAgentTool('create_exercise', { orgId, userId, courseId, args }, async () => {
+          if (args.lessonId) {
+            await verifyLessonBelongsToCourse(args.lessonId, courseId);
+          }
+
+          if (args.sectionId) {
+            await verifySectionBelongsToCourse(args.sectionId, courseId);
+          }
+
+          const exercise = await createExercise({
+            title: args.title,
+            description: args.description,
+            courseId,
+            lessonId: args.lessonId,
+            sectionId: args.sectionId,
+            order: args.order,
+            questions: args.questions.map((q, i) => ({
+              question: q.question,
+              questionTypeId: q.questionTypeId,
+              points: q.points,
+              order: q.order ?? i,
+              options: q.options.map((o) => ({ label: o.label, isCorrect: o.isCorrect }))
+            }))
+          });
+          return { id: exercise.id, title: exercise.title, questionCount: args.questions.length };
+        });
+      }
+    }),
+
+    update_exercise: tool({
+      description:
+        "Update an existing exercise's metadata (title, description, linked lesson, section, order, due date, lock state, allow-multiple-attempts). Use this for editing the exercise itself — not for changing its questions. To edit questions, use update_questions; to add questions, use add_questions.",
+      inputSchema: updateExerciseParam,
+      execute: async (args) => {
+        return executeAgentTool('update_exercise', { orgId, userId, courseId, args }, async () => {
+          await verifyExerciseBelongsToCourse(args.exerciseId, courseId);
+
+          if (args.lessonId) {
+            await verifyLessonBelongsToCourse(args.lessonId, courseId);
+          }
+
+          if (args.sectionId) {
+            await verifySectionBelongsToCourse(args.sectionId, courseId);
+          }
+
+          const updated = await updateExerciseService(args.exerciseId, {
+            title: args.title,
+            description: args.description,
+            lessonId: args.lessonId,
+            sectionId: args.sectionId,
+            order: args.order,
+            dueBy: args.dueBy,
+            isUnlocked: args.isUnlocked,
+            allowMultipleAttempts: args.allowMultipleAttempts
+          });
+
+          return {
+            id: updated.id,
+            title: updated.title,
+            description: updated.description ?? null,
+            dueBy: updated.dueBy ?? null,
+            updated: true
+          };
+        });
+      }
+    }),
+
+    update_exercise_section: tool({
+      description:
+        'Update the title and/or description of one section inside an exercise (question groups). This is not the same as update_section, which edits course outline sections. Always use ids from get_exercise_details `sections` for this tool.',
+      inputSchema: updateExerciseSectionParam,
+      execute: async (args) => {
+        return executeAgentTool('update_exercise_section', { orgId, userId, courseId, args }, async () => {
+          assertValidUuid('Exercise', args.exerciseId);
+          assertValidUuid('ExerciseSection', args.exerciseSectionId);
+
+          await verifyExerciseBelongsToCourse(args.exerciseId, courseId);
+
+          const updated = await updateExerciseSectionMetadataService(args.exerciseId, args.exerciseSectionId, {
+            ...(args.title !== undefined ? { title: args.title } : {}),
+            ...(args.description !== undefined ? { description: args.description } : {})
+          });
+
+          return { ...updated, updated: true };
+        });
+      }
+    }),
+
+    create_exercise_section: tool({
+      description:
+        'Create a new section inside an existing exercise. Use this to add a question block before adding or moving questions into it.',
+      inputSchema: createExerciseSectionParam,
+      execute: async (args) => {
+        return executeAgentTool('create_exercise_section', { orgId, userId, courseId, args }, async () => {
+          assertValidUuid('Exercise', args.exerciseId);
+
+          await verifyExerciseBelongsToCourse(args.exerciseId, courseId);
+
+          const created = await createExerciseSectionService(args.exerciseId, {
+            title: args.title,
+            description: args.description,
+            order: args.order,
+            colorTheme: args.colorTheme,
+            afterBehavior: args.afterBehavior
+          });
+
+          return { ...created, created: true };
+        });
+      }
+    }),
+
+    add_questions: tool({
+      description:
+        'Add questions to an existing exercise in this course. When get_exercise_details lists in-exercise sections, pass exerciseSectionId so new questions are added to the correct block.',
+      inputSchema: addQuestionsParam,
+      execute: async (args) => {
+        return executeAgentTool('add_questions', { orgId, userId, courseId, args }, async () => {
+          await verifyExerciseBelongsToCourse(args.exerciseId, courseId);
+
+          if (args.exerciseSectionId !== undefined) {
+            assertValidUuid('ExerciseSection', args.exerciseSectionId);
+
+            const sections = await getExerciseSectionsByExerciseId(args.exerciseId);
+            const belongs = sections.some((section) => section.id === args.exerciseSectionId);
+
+            if (!belongs) {
+              throw new AppError(
+                'That exercise section was not found on this exercise. Call get_exercise_details and use a section id from the sections array.',
+                'VALIDATION_ERROR',
+                404
+              );
+            }
+          }
+
+          const existingExercise = await getExercise(args.exerciseId);
+          const existingQuestions = existingExercise.questions || [];
+          const nextOrder = existingQuestions.length;
+
+          const newQuestions = args.questions.map((q, i) => ({
+            question: q.question,
+            questionTypeId: q.questionTypeId,
+            points: q.points,
+            order: q.order ?? nextOrder + i,
+            ...(args.exerciseSectionId !== undefined ? { exerciseSectionId: args.exerciseSectionId } : {}),
+            options: q.options.map((o) => ({ label: o.label, isCorrect: o.isCorrect }))
+          }));
+
+          const allQuestions = [
+            ...existingQuestions.map((eq) => ({
+              id: Number(eq.id),
+              question: eq.title,
+              questionTypeId: eq.questionTypeId,
+              points: eq.points,
+              order: eq.order,
+              options: eq.options.map((o) => ({ id: Number(o.id), label: o.label || '', isCorrect: o.isCorrect }))
+            })),
+            ...newQuestions
+          ];
+
+          await updateExerciseService(args.exerciseId, { questions: allQuestions });
+          return { exerciseId: args.exerciseId, addedCount: args.questions.length, totalCount: allQuestions.length };
+        });
+      }
+    }),
+
+    update_questions: tool({
+      description:
+        'Update existing questions in an exercise. Pass only fields you want to change; `id` identifies the question. Optional `exerciseSectionId` moves the question to another in-exercise block (use get_exercise_details section ids), or null to unassign. For NUMERIC, the correct answer is `settings.correctValue` (number) — do NOT add options to NUMERIC questions. For STAR use `settings.correctValue`. For WORD_BANK use `settings.correctAnswers` and `settings.template`. RADIO/CHECKBOX/TRUE_FALSE use `options[].isCorrect` (include option `id` to edit, omit `id` to add). `settings` is shallow-merged with existing settings. Omit `options` entirely to leave existing options untouched.',
+      inputSchema: updateQuestionsParam,
+      execute: async (args) => {
+        return executeAgentTool('update_questions', { orgId, userId, courseId, args }, async () => {
+          await verifyExerciseBelongsToCourse(args.exerciseId, courseId);
+
+          const sectionIdsInPatches = new Set<string>();
+          for (const patch of args.questions) {
+            if (patch.exerciseSectionId === undefined || patch.exerciseSectionId === null) {
+              continue;
+            }
+
+            assertValidUuid('ExerciseSection', patch.exerciseSectionId);
+            sectionIdsInPatches.add(patch.exerciseSectionId);
+          }
+
+          if (sectionIdsInPatches.size > 0) {
+            const sections = await getExerciseSectionsByExerciseId(args.exerciseId);
+            const validIds = new Set(sections.map((section) => section.id));
+
+            for (const sectionId of sectionIdsInPatches) {
+              if (!validIds.has(sectionId)) {
+                throw new AppError(
+                  'That exercise section was not found on this exercise. Call get_exercise_details and use a section id from the sections array.',
+                  'VALIDATION_ERROR',
+                  404
+                );
+              }
+            }
+          }
+
+          const existing = await getExercise(args.exerciseId);
+
+          const merged = buildUpdatedQuestions(
+            (existing.questions || []).map((q) => ({
+              id: q.id,
+              title: q.title,
+              questionTypeId: q.questionTypeId,
+              points: q.points,
+              order: q.order,
+              exerciseSectionId: q.exerciseSectionId,
+              settings: q.settings,
+              options: q.options
+            })),
+            args.questions,
+            args.exerciseId
+          );
+
+          await updateExerciseService(args.exerciseId, { questions: merged });
+
+          return { exerciseId: args.exerciseId, updatedCount: merged.length };
+        });
+      }
+    }),
+
+    reorder_content: tool({
+      description:
+        'Reorder sections, lessons, or exercises in this course. Can change the order of sections, change the order of lessons/exercises within a section, or move items between sections. Use get_course_structure first to see current order, and copy item IDs exactly from that response. Never rewrite or guess UUIDs.',
+      inputSchema: reorderContentParam,
+      execute: async (args) => {
+        return executeAgentTool('reorder_content', { orgId, userId, courseId, args }, async () => {
+          if (args.sections) {
+            for (const section of args.sections) {
+              await verifySectionBelongsToCourse(section.id, courseId);
+            }
+          }
+
+          if (args.items) {
+            for (const item of args.items) {
+              if (item.type === 'LESSON') {
+                await verifyLessonBelongsToCourse(item.id, courseId);
+              } else {
+                await verifyExerciseBelongsToCourse(item.id, courseId);
+              }
+
+              if (item.sectionId) {
+                await verifySectionBelongsToCourse(item.sectionId, courseId);
+              }
+            }
+          }
+
+          return reorderCourseContent(courseId, {
+            sections: args.sections,
+            items: args.items
+          });
+        });
+      }
+    }),
+
+    update_course_landing_page: tool({
+      description:
+        'Update course-level landing page fields for this course, including public title, description, overview, goals, requirements, instructor metadata, pricing, and banner image. The courseId is automatically set — do not pass it.',
+      inputSchema: updateCourseLandingPageParam,
+      execute: async (args) => {
+        return executeAgentTool('update_course_landing_page', { orgId, userId, courseId, args }, async () => {
+          const result = await updateCourseLandingPageService(courseId, args as TCourseLandingPageUpdate);
+
+          return {
+            courseId: result.course.id,
+            title: result.course.title,
+            description: result.course.description,
+            courseUrl: result.courseUrl,
+            bannerImageUrl: result.bannerImageUrl,
+            updated: true
+          };
+        });
+      }
+    }),
+
+    check_course_go_live_readiness: tool({
+      description:
+        'Check whether this course is ready to go live. Returns blockers, warnings, suggested fixes, and the public course URL if available. This tool does not publish the course.',
+      inputSchema: emptyParam,
+      execute: async () => {
+        return executeAgentTool('check_course_go_live_readiness', { orgId, userId, courseId }, async () => {
+          return getCourseGoLiveReadiness(courseId);
+        });
+      }
+    }),
+
+    go_live_course: tool({
+      description:
+        'Publish this course only after the teacher explicitly asks to go live. Runs the readiness checklist first, generates a slug when needed, and fails with blockers if the course is not ready.',
+      inputSchema: goLiveParam,
+      execute: async (args) => {
+        return executeAgentTool('go_live_course', { orgId, userId, courseId, args }, async () => {
+          const result = await publishCourseWhenReady(courseId);
+
+          return {
+            courseId: result.course.id,
+            title: result.course.title,
+            slug: result.course.slug,
+            isPublished: result.course.isPublished,
+            readiness: result.readiness
+          };
+        });
+      }
+    }),
+
+    generate_course_plan: tool({
+      description:
+        'Generate a structured course plan with sections and lessons. Always use this when asked to design or plan a course.',
+      inputSchema: coursePlanParam,
+      execute: async (args) => {
+        return executeAgentTool('generate_course_plan', { orgId, userId, courseId, args }, async () => {
+          const envelope = coursePlanParam.parse(args);
+          const plan = CoursePlanSchema.parse(envelope.plan);
+          const sectionCount = plan.sections.length;
+          const itemCount = plan.sections.reduce((sum, section) => sum + section.items.length, 0);
+
+          trackAgentEvent(AgentEvent.PLAN_GENERATED, { orgId, userId, courseId, sectionCount, itemCount });
+
+          return plan;
+        });
+      }
+    })
+  };
+}
diff --git a/apps/api/src/services/agent/context-window.ts b/apps/api/src/services/agent/context-window.ts
index 3110c2a9..d33d695d 100644
--- a/apps/api/src/services/agent/context-window.ts
+++ b/apps/api/src/services/agent/context-window.ts
@@ -1,27 +1,31 @@
-/**
- * Trims conversation message history to stay within token budget.
- *
- * Strategy:
- * - Always keep the first message (often contains the initial request/document context)
- * - Always keep the last N messages (recent context is most relevant)
- * - Drop middle messages when the array is too long
- *
- * This is a message-count heuristic, not a token counter. Each message averages
- * ~200-500 tokens, so capping at ~40 messages keeps us under ~20K tokens of
- * history, leaving room for the system prompt + document text + LLM response.
- */
+const MAX_MESSAGES = 20;
+const KEEP_RECENT = 16;
+const MAX_TOOL_OUTPUT_CHARS = 2000;
 
-const MAX_MESSAGES = 40;
-const KEEP_RECENT = 30;
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function trimToolOutputs(messages: any[]): any[] {
+  return messages.map((message) => {
+    if (!Array.isArray(message.parts)) return message;
+
+    const trimmedParts = message.parts.map((part: any) => {
+      if (part.state !== 'output-available' || part.output == null) return part;
+
+      const serialized = typeof part.output === 'string' ? part.output : JSON.stringify(part.output);
+      if (serialized.length <= MAX_TOOL_OUTPUT_CHARS) return part;
+
+      const truncated = serialized.slice(0, MAX_TOOL_OUTPUT_CHARS) + '…[truncated]';
+      return { ...part, output: truncated };
+    });
+
+    if (trimmedParts === message.parts) return message;
+
+    return { ...message, parts: trimmedParts };
+  });
+}
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function trimMessageHistory(messages: any[]): any[] {
-  if (messages.length <= MAX_MESSAGES) {
-    return messages;
-  }
+  const countTrimmed = messages.length <= MAX_MESSAGES ? messages : [messages[0], ...messages.slice(-KEEP_RECENT)];
 
-  const firstMessage = messages[0];
-  const recentMessages = messages.slice(-KEEP_RECENT);
-
-  return [firstMessage, ...recentMessages];
+  return trimToolOutputs(countTrimmed);
 }
diff --git a/apps/api/src/services/agent/credit-purchase.ts b/apps/api/src/services/agent/credit-purchase.ts
new file mode 100644
index 00000000..8b4ff9fe
--- /dev/null
+++ b/apps/api/src/services/agent/credit-purchase.ts
@@ -0,0 +1,21 @@
+import { findCreditPurchaseByOrderId, insertCreditPurchaseAndApplyBalance } from '@cio/db/queries/agent';
+import type { CreditPurchaseInput } from '@cio/db/queries/agent';
+import { AppError } from '@api/utils/errors';
+
+/**
+ * Record a Polar token-pack purchase.
+ * Idempotent on `providerOrderId` — Polar may retry the webhook.
+ */
+export async function recordCreditPurchase(input: CreditPurchaseInput) {
+  if (input.tokens <= 0) {
+    throw new AppError('Tokens must be positive', 'INVALID_CREDIT_AMOUNT', 400);
+  }
+
+  const existing = await findCreditPurchaseByOrderId(input.providerOrderId);
+
+  if (existing) {
+    return existing;
+  }
+
+  return insertCreditPurchaseAndApplyBalance(input);
+}
diff --git a/apps/api/src/services/agent/document.ts b/apps/api/src/services/agent/document.ts
index e981691e..949061ff 100644
--- a/apps/api/src/services/agent/document.ts
+++ b/apps/api/src/services/agent/document.ts
@@ -107,6 +107,7 @@ export async function parseAndStoreDocument(
       text: extractedText,
       fileName: file.name,
       mimeType,
+      userId,
       uploadedAt: new Date().toISOString()
     }),
     { EX: DOCUMENT_REDIS_TTL }
@@ -150,16 +151,18 @@ export async function parseAndStoreDocument(
  * Retrieve stored document text. Tries the Redis hot cache first; on miss
  * falls back to Postgres and rehydrates Redis for next time.
  */
-export async function getDocumentText(documentId: string, redis: RedisClient): Promise<string | null> {
+export async function getDocumentText(documentId: string, userId: string, redis: RedisClient): Promise<string | null> {
   const raw = await redis.get(agentDocumentKey(documentId));
 
   if (raw) {
-    const parsed = JSON.parse(raw) as { text: string };
+    const parsed = JSON.parse(raw) as { text: string; userId?: string };
+
+    if (parsed.userId && parsed.userId !== userId) return null;
 
     return parsed.text;
   }
 
-  const record = await getChatDocument(documentId);
+  const record = await getChatDocument(documentId, userId);
 
   if (!record) return null;
 
@@ -169,6 +172,7 @@ export async function getDocumentText(documentId: string, redis: RedisClient): P
       text: record.text,
       fileName: record.fileName,
       mimeType: record.mimeType,
+      userId: record.userId,
       uploadedAt: record.createdAt
     }),
     { EX: DOCUMENT_REDIS_TTL }
diff --git a/apps/api/src/services/agent/question-update.ts b/apps/api/src/services/agent/question-update.ts
index 9c20bfe2..574456af 100644
--- a/apps/api/src/services/agent/question-update.ts
+++ b/apps/api/src/services/agent/question-update.ts
@@ -6,6 +6,7 @@ export type CurrentQuestionForPatch = {
   questionTypeId: number;
   points: number;
   order: number;
+  exerciseSectionId?: string | null;
   settings?: Record<string, unknown>;
   options: Array<{
     id: number | string;
@@ -21,6 +22,7 @@ export type QuestionPatch = {
   questionTypeId?: number;
   points?: number;
   order?: number;
+  exerciseSectionId?: string | null;
   settings?: Record<string, unknown>;
   options?: Array<{
     id?: number;
@@ -43,6 +45,7 @@ export type MergedQuestion = {
   questionTypeId: number;
   points: number;
   order: number;
+  exerciseSectionId?: string | null;
   settings?: Record<string, unknown>;
   options: MergedOption[];
 };
@@ -97,7 +100,7 @@ export function buildUpdatedQuestions(
       });
     }
 
-    return {
+    const merged: MergedQuestion = {
       id: patch.id,
       question: patch.question ?? current.title ?? '',
       questionTypeId: patch.questionTypeId ?? current.questionTypeId,
@@ -106,5 +109,11 @@ export function buildUpdatedQuestions(
       settings: mergedSettings,
       options: mergedOptions
     };
+
+    if (patch.exerciseSectionId !== undefined) {
+      merged.exerciseSectionId = patch.exerciseSectionId;
+    }
+
+    return merged;
   });
 }
diff --git a/apps/api/src/services/agent/title-generation.ts b/apps/api/src/services/agent/title-generation.ts
index e93a199b..d4d76807 100644
--- a/apps/api/src/services/agent/title-generation.ts
+++ b/apps/api/src/services/agent/title-generation.ts
@@ -1,4 +1,5 @@
-import { generateText } from 'ai';
+import { generateText, generateObject } from 'ai';
+import { z } from 'zod';
 import { AIProvider, type AIProviderConfig } from '@cio/ai-assistant';
 import { createOpenAI } from '@ai-sdk/openai';
 import { createAnthropic } from '@ai-sdk/anthropic';
@@ -9,8 +10,9 @@ import { createGoogleGenerativeAI } from '@ai-sdk/google';
  */
 const TITLE_MODELS: Record<AIProvider, string> = {
   [AIProvider.OPENAI]: 'gpt-4o-mini',
-  [AIProvider.ANTHROPIC]: 'claude-haiku-4-20250414',
-  [AIProvider.GOOGLE]: 'gemini-2.5-flash'
+  [AIProvider.ANTHROPIC]: 'claude-haiku-4-5-20251001',
+  [AIProvider.GOOGLE]: 'gemini-2.5-flash',
+  [AIProvider.MOONSHOT]: 'kimi-k2.6'
 };
 
 function createTitleModel(config: AIProviderConfig) {
@@ -29,6 +31,10 @@ function createTitleModel(config: AIProviderConfig) {
       const google = createGoogleGenerativeAI({ apiKey: config.apiKey });
       return google(modelName);
     }
+    case AIProvider.MOONSHOT: {
+      const moonshot = createOpenAI({ apiKey: config.apiKey, baseURL: 'https://api.moonshot.cn/v1' });
+      return moonshot(modelName);
+    }
     default:
       throw new Error(`Unsupported AI provider: ${config.provider}`);
   }
@@ -44,13 +50,58 @@ export async function generateConversationTitle(
 ): Promise<string> {
   const model = createTitleModel(providerConfig);
 
-  const { text } = await generateText({
-    model,
-    system:
-      "Generate a short title (max 6 words) for a chat conversation based on the user's first message. Return ONLY the title, no quotes, no punctuation at the end. Be concise and descriptive.",
-    prompt: firstMessageText,
-    maxOutputTokens: 30
-  });
+  const systemPrompt =
+    "Generate a short, descriptive title (2–5 words) for a chat conversation based on the user's first message. The title must be at least 2 words — never a single word. Return ONLY the title, no quotes, no punctuation at the end.";
+
+  const truncatedMessage = firstMessageText.slice(0, 1000);
+
+  // Gemini 2.5 counts thinking toward maxOutputTokens; disable thinking and allow headroom for the title text.
+  const { text } = await generateText(
+    providerConfig.provider === AIProvider.GOOGLE
+      ? {
+          model,
+          system: systemPrompt,
+          prompt: truncatedMessage,
+          maxOutputTokens: 256,
+          maxRetries: 0,
+          providerOptions: {
+            google: { thinkingConfig: { thinkingBudget: 0 } }
+          }
+        }
+      : {
+          model,
+          system: systemPrompt,
+          prompt: truncatedMessage,
+          maxOutputTokens: 96,
+          maxRetries: 0
+        }
+  );
 
   return text.trim().slice(0, 80);
 }
+
+const CourseMeta = z.object({
+  title: z.string().describe('3–6 word course title, no quotes, no trailing punctuation'),
+  description: z.string().describe('20–30 word description of what students will learn')
+});
+
+export async function generateCourseMeta(
+  prompt: string,
+  providerConfig: AIProviderConfig
+): Promise<{ title: string; description: string }> {
+  const model = createTitleModel(providerConfig);
+
+  const { object } = await generateObject({
+    model,
+    schema: CourseMeta,
+    system:
+      "You are helping create an online course. Based on the user's course idea, generate a short title (3–6 words, no quotes, no trailing punctuation) and a concise description (20–30 words) explaining what students will learn.",
+    prompt: prompt.slice(0, 1000),
+    maxRetries: 0
+  });
+
+  return {
+    title: object.title.trim().slice(0, 100),
+    description: object.description.trim().slice(0, 300)
+  };
+}
diff --git a/apps/api/src/services/agent/usage.ts b/apps/api/src/services/agent/usage.ts
index 6e2ee861..928f2682 100644
--- a/apps/api/src/services/agent/usage.ts
+++ b/apps/api/src/services/agent/usage.ts
@@ -1,22 +1,51 @@
-import { db } from '@cio/db';
-import * as schema from '@cio/db/schema';
-import { eq, and, gte, sql } from 'drizzle-orm';
-import { getActiveOrganizationPlan } from '@cio/db/queries/organization';
-import { AppError, ErrorCodes } from '@api/utils/errors';
 import type { TokenBalance, TokenUsage } from '@cio/ai-assistant';
+import {
+  aggregateTokenUsageByUser,
+  countRequests,
+  getDailyTokenUsageHistory,
+  getMonthlyTokenUsage,
+  getOrgCreditBalance,
+  insertTokenUsageAndDrainCredits,
+  summarizePurchases,
+  upsertCreditBalance
+} from '@cio/db/queries/agent';
+import type { UsageLeaderboardRow } from '@cio/db/queries/agent';
+import { getActiveOrganizationPlan } from '@cio/db/queries/organization';
+
+import { AppError } from '@api/utils/errors';
+
+function startOfCurrentMonth(): Date {
+  const date = new Date();
+  date.setDate(1);
+  date.setHours(0, 0, 0, 0);
+
+  return date;
+}
 
 // ─── Plan-Based Token Allowances ─────────────────────────────────────────────
 
 const PLAN_TOKEN_ALLOWANCES: Record<string, number> = {
-  BASIC: 50_000,
-  EARLY_ADOPTER: 500_000,
-  ENTERPRISE: 2_000_000
+  BASIC: 500_000,
+  EARLY_ADOPTER: 3_000_000,
+  ENTERPRISE: 15_000_000
 };
 
-/**
- * Get the monthly token allowance for an org based on its active plan.
- * Also checks if the plan payload has a custom `aiTokenAllowance` override.
- */
+// ─── Model Cost Multipliers ───────────────────────────────────────────────────
+
+// Blended multiplier vs Gemini 2.5 Flash baseline ($0.15/1M); ~80/20 input/output mix; unknown → 1×.
+const MODEL_COST_MULTIPLIER: Record<string, number> = {
+  'gemini-2.5-flash': 1,
+  'gpt-5.4-mini': 3,
+  'claude-sonnet-4-6': 11,
+  'claude-haiku-4-5-20251001': 1,
+  'kimi-k2.6': 3
+};
+
+function computeCostUnits(promptTokens: number, completionTokens: number, model: string): number {
+  const multiplier = MODEL_COST_MULTIPLIER[model] ?? 1;
+  return Math.round((promptTokens + completionTokens) * multiplier);
+}
+
 async function getPlanAllowance(orgId: string): Promise<{ planName: string; allowance: number }> {
   const activePlan = await getActiveOrganizationPlan(orgId);
 
@@ -32,42 +61,16 @@ async function getPlanAllowance(orgId: string): Promise<{ planName: string; allo
   return { planName, allowance };
 }
 
-/**
- * Get the total tokens used by an org in the current month.
- */
-async function getMonthlyUsage(orgId: string): Promise<number> {
-  const startOfMonth = new Date();
-  startOfMonth.setDate(1);
-  startOfMonth.setHours(0, 0, 0, 0);
-
-  const [result] = await db
-    .select({
-      totalTokens: sql<number>`COALESCE(SUM(${schema.aiTokenUsage.promptTokens} + ${schema.aiTokenUsage.completionTokens}), 0)`
-    })
-    .from(schema.aiTokenUsage)
-    .where(and(eq(schema.aiTokenUsage.orgId, orgId), gte(schema.aiTokenUsage.createdAt, startOfMonth.toISOString())));
-
-  return Number(result?.totalTokens ?? 0);
+export async function getMonthlyUsage(orgId: string): Promise<number> {
+  return getMonthlyTokenUsage(orgId, startOfCurrentMonth());
 }
 
-/**
- * Get the credit balance for an org.
- */
-async function getCreditBalance(orgId: string): Promise<number> {
-  const [result] = await db
-    .select({ balance: schema.aiCreditBalance.balance })
-    .from(schema.aiCreditBalance)
-    .where(eq(schema.aiCreditBalance.orgId, orgId))
-    .limit(1);
-
-  return result?.balance ?? 0;
+export async function getCreditBalance(orgId: string): Promise<number> {
+  return getOrgCreditBalance(orgId);
 }
 
-/**
- * Get the full token balance for an org: used, allowance, credits, remaining.
- */
 export async function getTokenBalance(orgId: string): Promise<TokenBalance> {
-  const [{ planName, allowance }, monthlyUsage, creditBalance] = await Promise.all([
+  const [{ allowance }, monthlyUsage, creditBalance] = await Promise.all([
     getPlanAllowance(orgId),
     getMonthlyUsage(orgId),
     getCreditBalance(orgId)
@@ -84,9 +87,6 @@ export async function getTokenBalance(orgId: string): Promise<TokenBalance> {
   };
 }
 
-/**
- * Check if the org has sufficient tokens. Throws 402 if exhausted.
- */
 export async function enforceTokenBalance(orgId: string): Promise<TokenBalance> {
   const balance = await getTokenBalance(orgId);
 
@@ -97,9 +97,17 @@ export async function enforceTokenBalance(orgId: string): Promise<TokenBalance>
   return balance;
 }
 
-/**
- * Record token usage after an LLM call.
- */
+export function computePurchasedTokenOverflow(params: {
+  allowance: number;
+  monthlyUsageBefore: number;
+  requestTokens: number;
+}): number {
+  const allowanceRemainingBefore = Math.max(0, params.allowance - params.monthlyUsageBefore);
+
+  return Math.max(0, params.requestTokens - allowanceRemainingBefore);
+}
+
+/** Record token usage after an LLM call; drains purchased credits when usage exceeds plan allowance. */
 export async function recordTokenUsage(
   orgId: string,
   userId: string,
@@ -107,29 +115,28 @@ export async function recordTokenUsage(
   usage: TokenUsage,
   model: string
 ): Promise<void> {
-  await db.insert(schema.aiTokenUsage).values({
+  const costUnits = computeCostUnits(usage.promptTokens, usage.completionTokens, model);
+  const { allowance } = await getPlanAllowance(orgId);
+
+  await insertTokenUsageAndDrainCredits({
     orgId,
     userId,
     courseId,
     promptTokens: usage.promptTokens,
     completionTokens: usage.completionTokens,
-    model
+    costUnits,
+    model,
+    planAllowance: allowance,
+    since: startOfCurrentMonth()
   });
 }
 
-/**
- * Check if an org's plan supports a specific feature (e.g., document upload).
- * Returns the plan name so callers can decide what to gate.
- */
 export async function getOrgPlanName(orgId: string): Promise<string> {
   const { planName } = await getPlanAllowance(orgId);
 
   return planName;
 }
 
-/**
- * Check if an org is on a paid plan (EARLY_ADOPTER or above).
- */
 export async function isOrgOnPaidPlan(orgId: string): Promise<boolean> {
   const planName = await getOrgPlanName(orgId);
 
@@ -143,67 +150,76 @@ export interface DailyUsage {
   tokens: number;
 }
 
-/**
- * Get daily token usage for the current month, grouped by day.
- */
 export async function getUsageHistory(orgId: string): Promise<DailyUsage[]> {
-  const startOfMonth = new Date();
-  startOfMonth.setDate(1);
-  startOfMonth.setHours(0, 0, 0, 0);
-
-  const rows = await db
-    .select({
-      date: sql<string>`DATE(${schema.aiTokenUsage.createdAt})`,
-      tokens: sql<number>`SUM(${schema.aiTokenUsage.promptTokens} + ${schema.aiTokenUsage.completionTokens})`
-    })
-    .from(schema.aiTokenUsage)
-    .where(and(eq(schema.aiTokenUsage.orgId, orgId), gte(schema.aiTokenUsage.createdAt, startOfMonth.toISOString())))
-    .groupBy(sql`DATE(${schema.aiTokenUsage.createdAt})`)
-    .orderBy(sql`DATE(${schema.aiTokenUsage.createdAt})`);
-
-  return rows.map((row) => ({
-    date: String(row.date),
-    tokens: Number(row.tokens)
-  }));
+  return getDailyTokenUsageHistory(orgId, startOfCurrentMonth());
 }
 
-/**
- * Get full detailed usage stats for the usage endpoint.
- */
-export async function getDetailedUsage(orgId: string) {
-  const [balance, history] = await Promise.all([getTokenBalance(orgId), getUsageHistory(orgId)]);
+export interface PurchasedSummary {
+  totalPurchasedTokens: number;
+  totalSpentCents: number;
+  currency: 'USD';
+  currentBalance: number;
+  lastPurchaseAt: string | null;
+}
 
-  return { ...balance, history };
+export async function getPurchasedSummary(orgId: string): Promise<PurchasedSummary> {
+  const [summary, currentBalance] = await Promise.all([summarizePurchases(orgId), getCreditBalance(orgId)]);
+
+  return {
+    totalPurchasedTokens: summary.totalPurchasedTokens,
+    totalSpentCents: summary.totalSpentCents,
+    currency: 'USD',
+    currentBalance,
+    lastPurchaseAt: summary.lastPurchaseAt
+  };
+}
+
+export interface LeaderboardEntry {
+  userId: string;
+  fullname: string | null;
+  email: string | null;
+  avatarUrl: string | null;
+  tokens: number;
+  requests: number;
+  favoriteModel: string | null;
+  percentage: number;
+}
+
+export async function getTeamLeaderboard(orgId: string): Promise<{ entries: LeaderboardEntry[]; totalTokens: number }> {
+  const rows: UsageLeaderboardRow[] = await aggregateTokenUsageByUser(orgId, startOfCurrentMonth());
+  const totalTokens = rows.reduce((sum: number, row: UsageLeaderboardRow) => sum + row.tokens, 0);
+
+  const entries: LeaderboardEntry[] = rows.map((row: UsageLeaderboardRow) => ({
+    userId: row.userId,
+    fullname: row.fullname,
+    email: row.email,
+    avatarUrl: row.avatarUrl,
+    tokens: row.tokens,
+    requests: row.requests,
+    favoriteModel: row.favoriteModel,
+    percentage: totalTokens > 0 ? row.tokens / totalTokens : 0
+  }));
+
+  return { entries, totalTokens };
+}
+
+export async function getDetailedUsage(orgId: string) {
+  const start = startOfCurrentMonth();
+  const [balance, history, requestsThisMonth] = await Promise.all([
+    getTokenBalance(orgId),
+    getDailyTokenUsageHistory(orgId, start),
+    countRequests(orgId, start)
+  ]);
+
+  return { ...balance, history, requestsThisMonth };
 }
 
 // ─── Credit Purchases ────────────────────────────────────────────────────────
 
-/**
- * Add credits to an org's balance.
- * Creates the balance row if it doesn't exist (upsert).
- */
 export async function addCredits(orgId: string, amount: number): Promise<number> {
   if (amount <= 0) {
     throw new AppError('Credit amount must be positive', 'INVALID_CREDIT_AMOUNT', 400);
   }
 
-  const existing = await db
-    .select({ id: schema.aiCreditBalance.id, balance: schema.aiCreditBalance.balance })
-    .from(schema.aiCreditBalance)
-    .where(eq(schema.aiCreditBalance.orgId, orgId))
-    .limit(1);
-
-  if (existing.length > 0) {
-    const newBalance = existing[0].balance + amount;
-    await db
-      .update(schema.aiCreditBalance)
-      .set({ balance: newBalance, updatedAt: new Date().toISOString() })
-      .where(eq(schema.aiCreditBalance.orgId, orgId));
-
-    return newBalance;
-  }
-
-  await db.insert(schema.aiCreditBalance).values({ orgId, balance: amount });
-
-  return amount;
+  return upsertCreditBalance(orgId, amount);
 }
diff --git a/apps/api/src/services/course-import/course-import.ts b/apps/api/src/services/course-import/course-import.ts
index 40d2dd70..3fd86471 100644
--- a/apps/api/src/services/course-import/course-import.ts
+++ b/apps/api/src/services/course-import/course-import.ts
@@ -27,7 +27,7 @@ import {
   getCourseImportDraftByIdempotencyKey,
   updateCourseImportDraft
 } from '@cio/db/queries/course-import';
-import { getCourseById } from '@cio/db/queries/course';
+import { getCourseById, isCourseSlugTaken, updateCourseSlug } from '@cio/db/queries/course';
 import { getLessonLanguagesByLessonIds } from '@cio/db/queries/lesson';
 import { getOrganizationById } from '@cio/db/queries/organization';
 import { getCourseTagsForOrganization } from '@cio/db/queries/tag';
@@ -45,10 +45,7 @@ import {
 } from '@cio/utils/validation/course-import';
 import { getCourseOrganizationId } from '@cio/db/queries/tag';
 import { assignCourseTagsByName } from '@api/services/tag';
-import { db } from '@cio/db/drizzle';
-import * as schema from '@cio/db/schema';
 import { generateSlug } from '@cio/utils/functions';
-import { eq } from 'drizzle-orm';
 
 type DraftSummary = {
   sectionCount: number;
@@ -104,13 +101,8 @@ async function generateUniqueCourseSlug(baseSlug: string): Promise<string> {
   let candidate = baseSlug;
 
   while (true) {
-    const existing = await db
-      .select({ id: schema.course.id })
-      .from(schema.course)
-      .where(eq(schema.course.slug, candidate))
-      .limit(1);
-
-    if (existing.length === 0) {
+    const taken = await isCourseSlugTaken(candidate);
+    if (!taken) {
       return candidate;
     }
 
@@ -127,8 +119,13 @@ async function ensureCourseSlug(courseId: string, title: string | null | undefin
 
   const baseSlug = generateSlug(title, { fallback: 'course' });
   const uniqueSlug = await generateUniqueCourseSlug(baseSlug);
-  await updateCourse(courseId, { slug: uniqueSlug });
-  return uniqueSlug;
+  const updated = await updateCourseSlug(courseId, uniqueSlug);
+
+  if (!updated) {
+    throw new AppError('Course not found', ErrorCodes.COURSE_NOT_FOUND, 404);
+  }
+
+  return updated.slug ?? uniqueSlug;
 }
 
 function buildCourseBaseUrl(organization: TOrganization) {
diff --git a/apps/api/src/services/course/clone.ts b/apps/api/src/services/course/clone.ts
index 68bf5751..32d191a4 100644
--- a/apps/api/src/services/course/clone.ts
+++ b/apps/api/src/services/course/clone.ts
@@ -9,13 +9,17 @@ import {
   createLessons,
   createOptions,
   createQuestions,
+  syncOptionIdSequence,
   getCourseById,
   getExercisesByLessonIds,
   getLessonLanguagesByLessonIds,
   getLessonsByCourseId,
   getOptionsByQuestionIds,
   getQuestionsByExerciseIds,
-  getCourseSectionsByCourseId
+  getCourseSectionsByCourseId,
+  getExerciseSectionsByExerciseIds,
+  createExerciseSections,
+  updateExerciseSection
 } from '@db/queries';
 
 import { ROLE } from '@cio/utils/constants';
@@ -72,7 +76,8 @@ async function cloneExercises(newLessons: TLesson[], oldLessons: TLesson[]): Pro
       title: exercise.title,
       description: exercise.description,
       dueBy: new Date().toISOString(),
-      lessonId: lessonIdMap.get(exercise.lessonId!)!
+      lessonId: lessonIdMap.get(exercise.lessonId!)!,
+      sectionDisplayMode: exercise.sectionDisplayMode
     }))
   );
 
@@ -84,6 +89,47 @@ async function cloneExercises(newLessons: TLesson[], oldLessons: TLesson[]): Pro
 
   // 6. Fetch all questions for old exercises
   const oldExerciseIds = oldExercises.map((ex) => ex.id);
+  const oldSections = await getExerciseSectionsByExerciseIds(oldExerciseIds);
+  const exerciseSectionIdMap = new Map<string, string>();
+
+  if (oldSections.length > 0) {
+    const newSections = await createExerciseSections(
+      oldSections.map((section) => ({
+        title: section.title,
+        description: section.description,
+        order: section.order,
+        colorTheme: section.colorTheme,
+        afterBehavior: section.afterBehavior,
+        exerciseId: exerciseIdMap.get(section.exerciseId)!
+      }))
+    );
+
+    oldSections.forEach((oldSection, index) => {
+      const newSection = newSections[index];
+      if (newSection) {
+        exerciseSectionIdMap.set(oldSection.id, newSection.id);
+      }
+    });
+
+    await Promise.all(
+      newSections.map((newSection) => {
+        const behavior = newSection.afterBehavior as { action?: string; exerciseSectionId?: string };
+        if (behavior.action !== 'go_to_section' || !behavior.exerciseSectionId) {
+          return null;
+        }
+
+        const remappedId = exerciseSectionIdMap.get(behavior.exerciseSectionId);
+        if (!remappedId) {
+          return null;
+        }
+
+        return updateExerciseSection(newSection.id, {
+          afterBehavior: { action: 'go_to_section', exerciseSectionId: remappedId }
+        });
+      })
+    );
+  }
+
   const oldQuestions = await getQuestionsByExerciseIds(oldExerciseIds);
 
   if (!oldQuestions || oldQuestions.length === 0) {
@@ -99,6 +145,9 @@ async function cloneExercises(newLessons: TLesson[], oldLessons: TLesson[]): Pro
       order: question.order,
       questionTypeId: question.questionTypeId,
       settings: question.settings,
+      exerciseSectionId: question.exerciseSectionId
+        ? (exerciseSectionIdMap.get(question.exerciseSectionId) ?? null)
+        : null,
       exerciseId: exerciseIdMap.get(question.exerciseId)!
     }))
   );
@@ -130,6 +179,7 @@ async function cloneExercises(newLessons: TLesson[], oldLessons: TLesson[]): Pro
   }
 
   // 10. Insert options with new question IDs
+  await syncOptionIdSequence();
   await createOptions(
     oldOptions
       .map((option) => {
diff --git a/apps/api/src/services/course/completion.ts b/apps/api/src/services/course/completion.ts
index 73426941..0584a9c7 100644
--- a/apps/api/src/services/course/completion.ts
+++ b/apps/api/src/services/course/completion.ts
@@ -1,5 +1,3 @@
-import * as schema from '@cio/db/schema';
-
 import { AppError, ErrorCodes } from '@api/utils/errors';
 import {
   calcCourseProgressPercent,
@@ -12,14 +10,12 @@ import {
   getStudentSubmissionsForExercise
 } from '@cio/db/queries/course/certification-exercise';
 import {
+  getCourseById,
   getCourseCertificationRow,
   getCourseProgress as getCourseProgressQuery,
   type TCourseCertificationRow
 } from '@cio/db/queries/course/course';
-
 import { ROLE } from '@cio/utils/constants';
-import { db } from '@cio/db/drizzle';
-import { eq } from 'drizzle-orm';
 
 export type CertificationBlocker = {
   code:
@@ -255,15 +251,9 @@ export async function evaluateCourseCertification(
 export async function assertCertificateDownloadAllowed(courseId: string, profileId: string): Promise<void> {
   const evaluation = await evaluateCourseCertification(courseId, profileId);
 
-  const [courseMeta] = await db
-    .select({
-      certificate: schema.course.certificate
-    })
-    .from(schema.course)
-    .where(eq(schema.course.id, courseId))
-    .limit(1);
+  const [courseRow] = await getCourseById(courseId);
 
-  if (!courseMeta?.certificate?.isDownloadable) {
+  if (!courseRow?.certificate?.isDownloadable) {
     throw new AppError('Certificate download is not enabled for this course', ErrorCodes.VALIDATION_ERROR, 403);
   }
 
diff --git a/apps/api/src/services/course/content.ts b/apps/api/src/services/course/content.ts
index 121c9160..beb5efb5 100644
--- a/apps/api/src/services/course/content.ts
+++ b/apps/api/src/services/course/content.ts
@@ -1,11 +1,13 @@
 import { AppError, ErrorCodes } from '@api/utils/errors';
+import type { ContentfulStatusCode } from 'hono/utils/http-status';
 import { ContentType } from '@cio/utils/constants';
-import { db, type DbOrTxClient } from '@cio/db/drizzle';
-import { sql, inArray } from 'drizzle-orm';
-import { courseSection, lesson, exercise } from '@cio/db/schema';
+import type { DbOrTxClient } from '@cio/db/drizzle';
+import { db } from '@cio/db/drizzle';
+import { applyCourseContentBulkUpdates, applyCourseSectionOrderUpdates } from '@cio/db/queries/course/content-batch';
+import { deleteCourseSection, getCourseSectionById, getCourseSectionsByCourseId } from '@cio/db/queries/course';
+import { OperationalQueryError } from '@cio/db/queries/query-errors';
 import { getCourseContentItems, type CourseContentItemRow } from '@cio/db/queries/course/content';
 import { deleteLesson } from '@cio/db/queries/lesson';
-import { deleteCourseSection, getCourseSectionById, getCourseSectionsByCourseId } from '@cio/db/queries/course';
 import { deleteExercise } from '@cio/db/queries/exercise/exercise';
 import type { TCourseContentDelete, TCourseContentReorder, TCourseContentUpdate } from '@cio/utils/validation/course';
 
@@ -17,24 +19,6 @@ type CourseContentReorderResult = {
   updatedExercises: number;
 };
 
-function buildUpdatePayload(item: TCourseContentUpdate['items'][number]) {
-  const payload: Record<string, unknown> = {};
-
-  if (item.isUnlocked !== undefined) {
-    payload.isUnlocked = item.isUnlocked;
-  }
-
-  if (item.order !== undefined) {
-    payload.order = item.order;
-  }
-
-  if (item.sectionId !== undefined) {
-    payload.sectionId = item.sectionId;
-  }
-
-  return payload;
-}
-
 function buildContentKey(item: { id: string; type: string }) {
   return `${item.type}-${item.id}`;
 }
@@ -103,165 +87,37 @@ async function assertCourseSections(courseId: string, sections: NonNullable<TCou
   });
 }
 
-async function applyCourseContentUpdates(tx: DbOrTxClient, items: TCourseContentUpdate['items']) {
-  const updates = items
-    .map((item) => ({
-      item,
-      payload: buildUpdatePayload(item)
-    }))
-    .filter(({ payload }) => Object.keys(payload).length > 0);
-
-  if (updates.length === 0) {
-    return {
-      updatedItems: 0,
-      updatedLessons: 0,
-      updatedExercises: 0
-    };
+function mapContentBatchError(error: unknown): AppError | null {
+  if (error instanceof OperationalQueryError) {
+    return new AppError(error.message, error.errorCode, error.statusCode as ContentfulStatusCode, error.field);
   }
 
-  const updatedAt = new Date().toISOString();
-
-  const lessonUpdates = updates.filter(({ item }) => item.type === ContentType.Lesson);
-  const exerciseUpdates = updates.filter(({ item }) => item.type === ContentType.Exercise);
-
-  if (lessonUpdates.length > 0) {
-    const lessonIds = lessonUpdates.map(({ item }) => item.id);
-    const lessonOrderUpdates = lessonUpdates
-      .filter(({ payload }) => payload.order !== undefined)
-      .map(({ item, payload }) => ({ id: item.id, value: payload.order }));
-    const lessonSectionUpdates = lessonUpdates
-      .filter(({ payload }) => payload.sectionId !== undefined)
-      .map(({ item, payload }) => ({ id: item.id, value: payload.sectionId }));
-    const lessonUnlockUpdates = lessonUpdates
-      .filter(({ payload }) => payload.isUnlocked !== undefined)
-      .map(({ item, payload }) => ({ id: item.id, value: payload.isUnlocked }));
-
-    const lessonSet: Record<string, unknown> = {
-      updatedAt
-    };
-
-    if (lessonOrderUpdates.length > 0) {
-      lessonSet.order = sql`case ${lesson.id} ${sql.join(
-        lessonOrderUpdates.map((update) => sql`when ${update.id} then ${update.value}`),
-        sql` `
-      )} else ${lesson.order} end`;
-    }
-
-    if (lessonSectionUpdates.length > 0) {
-      lessonSet.sectionId = sql`case ${lesson.id} ${sql.join(
-        lessonSectionUpdates.map((update) => sql`when ${update.id} then ${update.value}`),
-        sql` `
-      )} else ${lesson.sectionId} end`;
-    }
-
-    if (lessonUnlockUpdates.length > 0) {
-      lessonSet.isUnlocked = sql`case ${lesson.id} ${sql.join(
-        lessonUnlockUpdates.map((update) => sql`when ${update.id} then ${update.value}`),
-        sql` `
-      )} else ${lesson.isUnlocked} end`;
-    }
-
-    const updatedLessons = await tx
-      .update(lesson)
-      .set(lessonSet)
-      .where(inArray(lesson.id, lessonIds))
-      .returning({ id: lesson.id });
-
-    if (updatedLessons.length !== lessonIds.length) {
-      throw new AppError('Lesson not found', ErrorCodes.LESSON_NOT_FOUND, 404);
-    }
-  }
-
-  if (exerciseUpdates.length > 0) {
-    const exerciseIds = exerciseUpdates.map(({ item }) => item.id);
-    const exerciseOrderUpdates = exerciseUpdates
-      .filter(({ payload }) => payload.order !== undefined)
-      .map(({ item, payload }) => ({ id: item.id, value: payload.order }));
-    const exerciseSectionUpdates = exerciseUpdates
-      .filter(({ payload }) => payload.sectionId !== undefined)
-      .map(({ item, payload }) => ({ id: item.id, value: payload.sectionId }));
-    const exerciseUnlockUpdates = exerciseUpdates
-      .filter(({ payload }) => payload.isUnlocked !== undefined)
-      .map(({ item, payload }) => ({ id: item.id, value: payload.isUnlocked }));
-
-    const exerciseSet: Record<string, unknown> = {
-      updatedAt
-    };
-
-    if (exerciseOrderUpdates.length > 0) {
-      exerciseSet.order = sql`case ${exercise.id} ${sql.join(
-        exerciseOrderUpdates.map((update) => sql`when ${update.id} then ${update.value}`),
-        sql` `
-      )} else ${exercise.order} end`;
-    }
-
-    if (exerciseSectionUpdates.length > 0) {
-      exerciseSet.sectionId = sql`case ${exercise.id} ${sql.join(
-        exerciseSectionUpdates.map((update) => sql`when ${update.id} then ${update.value}`),
-        sql` `
-      )} else ${exercise.sectionId} end`;
-    }
-
-    if (exerciseUnlockUpdates.length > 0) {
-      exerciseSet.isUnlocked = sql`case ${exercise.id} ${sql.join(
-        exerciseUnlockUpdates.map((update) => sql`when ${update.id} then ${update.value}`),
-        sql` `
-      )} else ${exercise.isUnlocked} end`;
-    }
-
-    const updatedExercises = await tx
-      .update(exercise)
-      .set(exerciseSet)
-      .where(inArray(exercise.id, exerciseIds))
-      .returning({ id: exercise.id });
-
-    if (updatedExercises.length !== exerciseIds.length) {
-      throw new AppError('Exercise not found', ErrorCodes.EXERCISE_NOT_FOUND, 404);
-    }
-  }
-
-  return {
-    updatedItems: updates.length,
-    updatedLessons: lessonUpdates.length,
-    updatedExercises: exerciseUpdates.length
-  };
+  return null;
 }
 
-async function applySectionOrderUpdates(tx: DbOrTxClient, sections: NonNullable<TCourseContentReorder['sections']>) {
-  if (sections.length === 0) {
-    return 0;
+async function transactionWithContentBatch<TResult>(runner: (tx: DbOrTxClient) => Promise<TResult>): Promise<TResult> {
+  try {
+    return await db.transaction(async (tx) => runner(tx));
+  } catch (error) {
+    if (error instanceof AppError) {
+      throw error;
+    }
+
+    const mapped = mapContentBatchError(error);
+
+    if (mapped) {
+      throw mapped;
+    }
+
+    throw error;
   }
-
-  const sectionIds = sections.map((section) => section.id);
-  const updatedAt = new Date().toISOString();
-  const sectionSet: Record<string, unknown> = {
-    updatedAt,
-    order: sql`case ${courseSection.id} ${sql.join(
-      sections.map((section) => sql`when ${section.id} then ${section.order}`),
-      sql` `
-    )} else ${courseSection.order} end`
-  };
-
-  const updatedSections = await tx
-    .update(courseSection)
-    .set(sectionSet)
-    .where(inArray(courseSection.id, sectionIds))
-    .returning({ id: courseSection.id });
-
-  if (updatedSections.length !== sectionIds.length) {
-    throw new AppError('Course section not found', ErrorCodes.COURSE_SECTION_NOT_FOUND, 404);
-  }
-
-  return sections.length;
 }
 
 export async function updateCourseContent(courseId: string, items: TCourseContentUpdate['items']) {
   try {
     await assertCourseContentItems(courseId, items);
 
-    await db.transaction(async (tx) => {
-      await applyCourseContentUpdates(tx, items);
-    });
+    await transactionWithContentBatch(async (tx) => applyCourseContentBulkUpdates(tx, items));
   } catch (error) {
     if (error instanceof AppError) {
       throw error;
@@ -288,10 +144,11 @@ export async function reorderCourseContent(
       await assertCourseContentItems(courseId, payload.items);
     }
 
-    return await db.transaction(async (tx) => {
-      const updatedSections = payload.sections?.length ? await applySectionOrderUpdates(tx, payload.sections) : 0;
+    return await transactionWithContentBatch(async (tx) => {
+      const updatedSections = payload.sections?.length ? await applyCourseSectionOrderUpdates(tx, payload.sections) : 0;
+
       const itemResult = payload.items?.length
-        ? await applyCourseContentUpdates(tx, payload.items)
+        ? await applyCourseContentBulkUpdates(tx, payload.items)
         : {
             updatedItems: 0,
             updatedLessons: 0,
diff --git a/apps/api/src/services/course/course.ts b/apps/api/src/services/course/course.ts
index 1ab01db2..7b518475 100644
--- a/apps/api/src/services/course/course.ts
+++ b/apps/api/src/services/course/course.ts
@@ -1,16 +1,22 @@
 import { AppError, ErrorCodes } from '@api/utils/errors';
 import { sanitizeHtml, sanitizeOptionalHtml, sanitizeUnknownStrings } from '@api/utils/sanitize-html';
-import { addGroupMember, createGroup, getCourseProgramAccess } from '@cio/db/queries/group';
 import {
   createCourseNewsfeed,
   createCourse as createCourseQuery,
   createCourseSections,
   deleteCourse as deleteCourseQuery,
   getCourseProgress as getCourseProgressQuery,
+  getCourseTypeById,
   getCourseWithRelations,
   updateCourse as updateCourseQuery,
   updateLessonsSectionId
 } from '@cio/db/queries/course';
+import {
+  addGroupMember,
+  createGroup,
+  getCourseProgramAccess,
+  insertGroupMembersOnConflictDoNothing
+} from '@cio/db/queries/group';
 import {
   getLastLogin,
   getLessonsWithCompletion,
@@ -22,11 +28,12 @@ import { ContentType, ROLE } from '@cio/utils/constants';
 import type { TCourse } from '@cio/db/types';
 import type { TCourseCreate } from '@cio/utils/validation/course';
 import { db } from '@cio/db/drizzle';
-import * as schema from '@db/schema';
 import { exerciseBelongsToCourse } from '@cio/db/queries/course/certification-exercise';
 import { updateExercisesSectionId } from '@cio/db/queries/exercise/exercise';
 import { getProfileById } from '@cio/db/queries/auth';
+import { insertOrganizationMembersOnConflictDoNothing } from '@cio/db/queries/organization';
 import { buildCourseContent, calcPercentageWithRounding, formatLastSeen, type CourseContent } from './utils';
+import { guardCourseTypeTransition } from './public-course-guard';
 
 const DEFAULT_CONTENT_GROUPING = true;
 const DEFAULT_SECTION_TITLE = 'First Section [edit me]';
@@ -45,26 +52,30 @@ export async function ensureProgramCourseAccess(courseId: string, profileId: str
   const normalizedEmail = access.profileEmail?.trim() || undefined;
 
   await db.transaction(async (tx) => {
-    await tx
-      .insert(schema.organizationmember)
-      .values({
-        organizationId,
-        roleId: access.roleId,
-        profileId,
-        email: normalizedEmail,
-        verified: true
-      })
-      .onConflictDoNothing();
+    await insertOrganizationMembersOnConflictDoNothing(
+      [
+        {
+          organizationId,
+          roleId: access.roleId,
+          profileId,
+          email: normalizedEmail,
+          verified: true
+        }
+      ],
+      tx
+    );
 
-    await tx
-      .insert(schema.groupmember)
-      .values({
-        groupId: access.courseGroupId,
-        roleId: access.roleId,
-        profileId,
-        email: normalizedEmail
-      })
-      .onConflictDoNothing();
+    await insertGroupMembersOnConflictDoNothing(
+      [
+        {
+          groupId: access.courseGroupId,
+          roleId: access.roleId,
+          profileId,
+          email: normalizedEmail ?? undefined
+        }
+      ],
+      tx
+    );
   });
 
   return true;
@@ -266,6 +277,16 @@ export async function updateCourse(courseId: string, data: Partial<TCourse>) {
       slug: data.slug
     };
 
+    if (data.type !== undefined) {
+      const currentType = await getCourseTypeById(courseId);
+
+      await guardCourseTypeTransition({
+        courseId,
+        currentType: currentType ?? null,
+        nextType: data.type
+      });
+    }
+
     if (data.certificate?.requiredExerciseId) {
       const ok = await exerciseBelongsToCourse(data.certificate.requiredExerciseId, courseId);
       if (!ok) {
diff --git a/apps/api/src/services/course/invite.ts b/apps/api/src/services/course/invite.ts
index b8b51f82..03b2c0b0 100644
--- a/apps/api/src/services/course/invite.ts
+++ b/apps/api/src/services/course/invite.ts
@@ -1,7 +1,3 @@
-import * as schema from '@cio/db/schema';
-
-import { AppError, ErrorCodes } from '@api/utils/errors';
-import { and, eq } from 'drizzle-orm';
 import {
   countInviteDistinctPreviewIps,
   createCourseInvite,
@@ -11,14 +7,25 @@ import {
   listCourseInviteAudit,
   listCourseInviteAuditStats,
   listCourseInvites,
-  revokeCourseInvite
+  optimisticIncrementCourseInviteUsedCount,
+  revokeCourseInvite,
+  selectCourseInviteAcceptBundleByTokenHash
 } from '@cio/db/queries/course/invite';
-import { getCourseById, getCourseWithOrgData, getCourseWithRelations } from '@cio/db/queries/course';
+import { createOrganizationMember, getOrganizationMemberIdByOrgAndProfile } from '@cio/db/queries/organization';
+import { addGroupMember, getGroupMemberIdByGroupAndProfile } from '@cio/db/queries/group';
+import {
+  getCourseById,
+  getCourseWithOrgData,
+  getCourseWithRelations,
+  isCourseSlugTaken,
+  updateCourseSlug
+} from '@cio/db/queries/course';
 
+import { AppError, ErrorCodes } from '@api/utils/errors';
 import { ROLE } from '@cio/utils/constants';
 import type { TCreateCourseInvite } from '@cio/utils/validation/course/invite';
+import type { TNewCourseInviteAudit } from '@db/types';
 import crypto from 'node:crypto';
-import { db } from '@cio/db/drizzle';
 import { getDashboardBaseUrl } from '@api/config/dashboard-url';
 import { getCourseTeachers } from '@cio/db/queries/course/people';
 import { getProfileById } from '@cio/db/queries/auth';
@@ -26,6 +33,7 @@ import { buildEmailFromName, sendEmail } from '@cio/email';
 import { getProfileByEmail, markUserAndProfileEmailVerified } from '@cio/db/queries/auth';
 import { generateSlug } from '@cio/utils/functions';
 import { ensureComplianceEnrollmentRecordsForProfiles } from './compliance';
+import { db } from '@cio/db/drizzle';
 
 type InviteStatus = 'ACTIVE' | 'EXPIRED' | 'USED_UP' | 'REVOKED';
 type InvitePreset = 'ONE_TIME_24H' | 'MULTI_USE_7D' | 'MULTI_USE_30D' | 'CUSTOM';
@@ -46,13 +54,9 @@ async function generateUniqueCourseSlug(baseSlug: string): Promise<string> {
   let candidate = baseSlug;
 
   while (true) {
-    const existing = await db
-      .select({ id: schema.course.id })
-      .from(schema.course)
-      .where(eq(schema.course.slug, candidate))
-      .limit(1);
+    const taken = await isCourseSlugTaken(candidate);
 
-    if (existing.length === 0) {
+    if (!taken) {
       return candidate;
     }
 
@@ -65,11 +69,7 @@ async function ensureCourseSlug(courseId: string, title: string | null | undefin
   const baseSlug = generateSlug(title, { fallback: 'course' });
   const uniqueSlug = await generateUniqueCourseSlug(baseSlug);
 
-  const [updated] = await db
-    .update(schema.course)
-    .set({ slug: uniqueSlug, updatedAt: new Date().toISOString() })
-    .where(eq(schema.course.id, courseId))
-    .returning({ slug: schema.course.slug });
+  const updated = await updateCourseSlug(courseId, uniqueSlug);
 
   return updated?.slug ?? uniqueSlug;
 }
@@ -276,7 +276,7 @@ function toInviteResponse(
 async function recordInviteAudit(
   inviteId: string,
   courseId: string,
-  eventType: (typeof schema.courseInviteEventType.enumValues)[number],
+  eventType: TNewCourseInviteAudit['eventType'],
   context: {
     actorProfileId?: string | null;
     targetEmail?: string | null;
@@ -641,13 +641,9 @@ export async function enrollInCourse(
 
   const normalizedEmail = user.email.toLowerCase().trim();
 
-  const [existingMember] = await db
-    .select({ id: schema.groupmember.id })
-    .from(schema.groupmember)
-    .where(and(eq(schema.groupmember.groupId, groupId), eq(schema.groupmember.profileId, user.id)))
-    .limit(1);
+  const existingMemberId = await getGroupMemberIdByGroupAndProfile(groupId, user.id);
 
-  if (existingMember) {
+  if (existingMemberId) {
     await ensureComplianceEnrollmentRecordsForProfiles([courseId], [user.id]);
 
     return {
@@ -657,14 +653,10 @@ export async function enrollInCourse(
     };
   }
 
-  const [orgMember] = await db
-    .select({ id: schema.organizationmember.id })
-    .from(schema.organizationmember)
-    .where(and(eq(schema.organizationmember.organizationId, org.id), eq(schema.organizationmember.profileId, user.id)))
-    .limit(1);
+  const orgMemberId = await getOrganizationMemberIdByOrgAndProfile(org.id, user.id);
 
-  if (!orgMember) {
-    await db.insert(schema.organizationmember).values({
+  if (!orgMemberId) {
+    await createOrganizationMember({
       organizationId: org.id,
       roleId: ROLE.STUDENT,
       profileId: user.id,
@@ -673,7 +665,7 @@ export async function enrollInCourse(
     });
   }
 
-  await db.insert(schema.groupmember).values({
+  await addGroupMember({
     groupId,
     roleId: ROLE.STUDENT,
     profileId: user.id,
@@ -901,29 +893,7 @@ export async function acceptStudentInvite(token: string, user: TAuthUser, contex
   const tokenHash = hashToken(token);
 
   const result = await db.transaction(async (tx) => {
-    const [inviteRow] = await tx
-      .select({
-        invite: schema.courseInvite,
-        course: {
-          id: schema.course.id,
-          title: schema.course.title,
-          status: schema.course.status,
-          isPublished: schema.course.isPublished,
-          metadata: schema.course.metadata,
-          groupId: schema.group.id
-        },
-        organization: {
-          id: schema.organization.id,
-          name: schema.organization.name,
-          siteName: schema.organization.siteName
-        }
-      })
-      .from(schema.courseInvite)
-      .innerJoin(schema.course, eq(schema.courseInvite.courseId, schema.course.id))
-      .innerJoin(schema.group, eq(schema.course.groupId, schema.group.id))
-      .innerJoin(schema.organization, eq(schema.group.organizationId, schema.organization.id))
-      .where(eq(schema.courseInvite.tokenHash, tokenHash))
-      .limit(1);
+    const inviteRow = await selectCourseInviteAcceptBundleByTokenHash(tx, tokenHash);
 
     if (!inviteRow) {
       throw new AppError('Invalid invite link', ErrorCodes.NOT_FOUND, 404);
@@ -948,15 +918,9 @@ export async function acceptStudentInvite(token: string, user: TAuthUser, contex
     }
 
     // Idempotent behavior: if user is already enrolled, don't consume invite again.
-    const [existingMember] = await tx
-      .select({
-        id: schema.groupmember.id
-      })
-      .from(schema.groupmember)
-      .where(and(eq(schema.groupmember.groupId, course.groupId), eq(schema.groupmember.profileId, user.id)))
-      .limit(1);
+    const existingMemberId = await getGroupMemberIdByGroupAndProfile(course.groupId, user.id, tx);
 
-    if (existingMember) {
+    if (existingMemberId) {
       await markUserAndProfileEmailVerified(user.id, tx);
 
       await recordInviteAudit(invite.id, invite.courseId, 'ACCEPTED', {
@@ -1011,49 +975,34 @@ export async function acceptStudentInvite(token: string, user: TAuthUser, contex
       throw new AppError('This invite is restricted to specific email domains', ErrorCodes.UNAUTHORIZED, 403);
     }
 
-    const [orgMember] = await tx
-      .select({
-        id: schema.organizationmember.id
-      })
-      .from(schema.organizationmember)
-      .where(
-        and(
-          eq(schema.organizationmember.organizationId, organization.id),
-          eq(schema.organizationmember.profileId, user.id)
-        )
-      )
-      .limit(1);
+    const orgMemberId = await getOrganizationMemberIdByOrgAndProfile(organization.id, user.id, tx);
 
-    if (!orgMember) {
-      await tx.insert(schema.organizationmember).values({
-        organizationId: organization.id,
-        roleId: ROLE.STUDENT,
-        profileId: user.id,
-        email: normalizedEmail,
-        verified: true
-      });
+    if (!orgMemberId) {
+      await createOrganizationMember(
+        {
+          organizationId: organization.id,
+          roleId: ROLE.STUDENT,
+          profileId: user.id,
+          email: normalizedEmail,
+          verified: true
+        },
+        tx
+      );
     }
 
-    await tx.insert(schema.groupmember).values({
-      groupId: course.groupId,
-      roleId: ROLE.STUDENT,
-      profileId: user.id,
-      email: normalizedEmail
-    });
+    await addGroupMember(
+      {
+        groupId: course.groupId,
+        roleId: ROLE.STUDENT,
+        profileId: user.id,
+        email: normalizedEmail
+      },
+      tx
+    );
 
     await markUserAndProfileEmailVerified(user.id, tx);
 
-    const [consumeInvite] = await tx
-      .update(schema.courseInvite)
-      .set({
-        usedCount: invite.usedCount + 1,
-        updatedAt: new Date().toISOString(),
-        lastUsedAt: new Date().toISOString()
-      })
-      .where(and(eq(schema.courseInvite.id, invite.id), eq(schema.courseInvite.usedCount, invite.usedCount)))
-      .returning({
-        id: schema.courseInvite.id
-      });
+    const consumeInvite = await optimisticIncrementCourseInviteUsedCount(tx, invite.id, invite.usedCount);
 
     if (!consumeInvite) {
       throw new AppError('This invite was already used. Please try another link.', ErrorCodes.VALIDATION_ERROR, 409);
diff --git a/apps/api/src/services/course/landing-page.ts b/apps/api/src/services/course/landing-page.ts
index 8571c000..3a661325 100644
--- a/apps/api/src/services/course/landing-page.ts
+++ b/apps/api/src/services/course/landing-page.ts
@@ -1,14 +1,10 @@
-import * as schema from '@cio/db/schema';
-
 import { AppError, ErrorCodes } from '@api/utils/errors';
 import type { TCourse, TOrganization } from '@db/types';
 import type { TCourseLandingPageMetadataUpdate, TCourseLandingPageUpdate } from '@cio/utils/validation/course';
 
-import { db } from '@cio/db/drizzle';
 import { env } from '@api/config/env';
-import { eq } from 'drizzle-orm';
 import { generateSlug } from '@cio/utils/functions';
-import { getCourseById } from '@cio/db/queries/course';
+import { getCourseById, isCourseSlugTaken, updateCourseSlug } from '@cio/db/queries/course';
 import { getCourseOrganizationId } from '@cio/db/queries/tag';
 import { getDashboardBaseUrl } from '@api/config/dashboard-url';
 import { getOrganizationById } from '@cio/db/queries/organization';
@@ -25,13 +21,8 @@ export async function generateUniqueCourseSlug(baseSlug: string): Promise<string
   let candidate = baseSlug;
 
   while (true) {
-    const existing = await db
-      .select({ id: schema.course.id })
-      .from(schema.course)
-      .where(eq(schema.course.slug, candidate))
-      .limit(1);
-
-    if (existing.length === 0) {
+    const taken = await isCourseSlugTaken(candidate);
+    if (!taken) {
       return candidate;
     }
 
@@ -48,8 +39,13 @@ export async function ensureCourseSlug(courseId: string, title: string | null |
 
   const baseSlug = generateSlug(title, { fallback: 'course' });
   const uniqueSlug = await generateUniqueCourseSlug(baseSlug);
-  await updateCourse(courseId, { slug: uniqueSlug });
-  return uniqueSlug;
+  const updated = await updateCourseSlug(courseId, uniqueSlug);
+
+  if (!updated) {
+    throw new AppError('Course not found', ErrorCodes.COURSE_NOT_FOUND, 404);
+  }
+
+  return updated.slug ?? uniqueSlug;
 }
 
 export function buildCourseBaseUrl(
diff --git a/apps/api/src/services/course/public-course-guard.ts b/apps/api/src/services/course/public-course-guard.ts
new file mode 100644
index 00000000..4a3f71d1
--- /dev/null
+++ b/apps/api/src/services/course/public-course-guard.ts
@@ -0,0 +1,61 @@
+import { AppError, ErrorCodes } from '@api/utils/errors';
+import { findNonAutoGradableQuestionsInCourse, getCourseTypeById } from '@cio/db/queries/course';
+import { AUTO_GRADABLE_QUESTION_TYPE_IDS, isAutoGradableQuestionTypeId } from '@cio/question-types';
+
+/**
+ * Throws `QUESTION_TYPE_NOT_ALLOWED_IN_PUBLIC_COURSE` when a non-auto-gradable question
+ * type is being attached to an exercise that belongs to a `PUBLIC` course.
+ *
+ * Accepts the full list of question type ids being created / updated (ignore-null safe).
+ */
+export async function guardNonAutoGradableQuestionsForCourseType(params: {
+  courseId: string;
+  questionTypeIds: Array<number | null | undefined>;
+}): Promise<void> {
+  const typeIds = params.questionTypeIds.filter((id): id is number => typeof id === 'number');
+  if (typeIds.length === 0) return;
+
+  const hasDisallowed = typeIds.some((id) => !isAutoGradableQuestionTypeId(id));
+  if (!hasDisallowed) return;
+
+  const rowType = await getCourseTypeById(params.courseId);
+
+  if (!rowType) return;
+
+  if (rowType === 'PUBLIC') {
+    throw new AppError(
+      'Public courses only support auto-gradable question types',
+      ErrorCodes.QUESTION_TYPE_NOT_ALLOWED_IN_PUBLIC_COURSE,
+      400,
+      'questions'
+    );
+  }
+}
+
+/**
+ * When converting a course to `PUBLIC`, enumerate any questions whose type is not
+ * auto-gradable. Throws `PUBLIC_COURSE_CONVERSION_BLOCKED` with the offending list
+ * in `message`; callers should surface the list to the creator so they can fix them.
+ */
+export async function guardCourseTypeTransition(params: {
+  courseId: string;
+  currentType: string | null;
+  nextType: string | null | undefined;
+}): Promise<void> {
+  if (!params.nextType) return;
+  if (params.nextType !== 'PUBLIC') return;
+  if (params.currentType === 'PUBLIC') return;
+
+  const offenders = await findNonAutoGradableQuestionsInCourse(params.courseId, AUTO_GRADABLE_QUESTION_TYPE_IDS);
+  if (offenders.length === 0) return;
+
+  const preview = offenders.slice(0, 5).map((item) => `"${item.questionTitle}" in "${item.exerciseTitle}"`);
+  const more = offenders.length > 5 ? ` (+${offenders.length - 5} more)` : '';
+
+  throw new AppError(
+    `Remove or replace these non-auto-gradable questions before converting to Public: ${preview.join('; ')}${more}`,
+    ErrorCodes.PUBLIC_COURSE_CONVERSION_BLOCKED,
+    400,
+    'type'
+  );
+}
diff --git a/apps/api/src/services/course/public-course.ts b/apps/api/src/services/course/public-course.ts
new file mode 100644
index 00000000..b4520285
--- /dev/null
+++ b/apps/api/src/services/course/public-course.ts
@@ -0,0 +1,151 @@
+import { AppError, ErrorCodes } from '@api/utils/errors';
+import {
+  getCourseRowBySlug,
+  getPublicCourseItem as getPublicCourseItemQuery,
+  getPublicCourseTreeBySlug,
+  type PublicCourseItemContent,
+  type PublicCourseTree
+} from '@cio/db/queries/course';
+import { getExerciseWithRelationsOptimized } from '@cio/db/queries/exercise';
+import { getExerciseSectionsByExerciseId } from '@cio/db/queries/exercise/exercise-section';
+import { fetchQuestionsAndOptions, transformQuestions } from '@api/services/exercise/utils';
+
+/**
+ * Anonymous-safe: fetch the full tree for a published public course by slug.
+ * Callers should return 404 when this resolves to `null`.
+ */
+export async function getPublicCourseTreeService(courseSlug: string): Promise<PublicCourseTree | null> {
+  try {
+    return await getPublicCourseTreeBySlug(courseSlug);
+  } catch (error) {
+    if (error instanceof AppError) throw error;
+    throw new AppError('Failed to load public course', ErrorCodes.COURSE_FETCH_FAILED, 500);
+  }
+}
+
+export type PublicItemResponse =
+  | (Extract<PublicCourseItemContent, { kind: 'lesson' }> & { kind: 'lesson' })
+  | (Extract<PublicCourseItemContent, { kind: 'exercise' }> & {
+      kind: 'exercise';
+      questions: PublicExercisePayload;
+    });
+
+export interface PublicExercisePayload {
+  unsectioned: PublicExerciseQuestion[];
+  sections: Array<{
+    id: string;
+    title: string;
+    description: string | null;
+    order: number;
+    colorTheme: string;
+    afterBehavior: unknown;
+    questions: PublicExerciseQuestion[];
+  }>;
+}
+
+export interface PublicExerciseQuestion {
+  id: number | string;
+  title: string;
+  questionTypeId: number;
+  questionTypeKey: string;
+  points: number;
+  order: number | null;
+  settings: Record<string, unknown>;
+  options: Array<{
+    id: number | string;
+    label: string;
+    /** Answer keys are intentionally shipped to the client for PUBLIC courses. */
+    isCorrect: boolean;
+    settings: Record<string, unknown>;
+  }>;
+}
+
+/**
+ * Anonymous-safe: fetch a single lesson or exercise by its per-course slug.
+ * For exercises, questions + options are returned with answer keys included
+ * because PUBLIC courses grade entirely on the client.
+ */
+export async function getPublicCourseItemService(
+  courseSlug: string,
+  itemSlug: string
+): Promise<PublicItemResponse | null> {
+  try {
+    const baseItem = await getPublicCourseItemQuery(courseSlug, itemSlug);
+    if (!baseItem) return null;
+
+    if (baseItem.kind === 'lesson') {
+      return baseItem;
+    }
+
+    const { exercise, questions } = await getExerciseWithRelationsOptimized(baseItem.id);
+    const questionTypeMap = new Map(questions.map((question) => [question.questionType.id, question.questionType]));
+    const allOptions = questions.flatMap((question) => question.options ?? []);
+    const strippedQuestions = questions.map(({ questionType: _type, options: _options, ...rest }) => rest);
+    const transformed = transformQuestions(strippedQuestions, allOptions, questionTypeMap);
+    const sectionRows = await getExerciseSectionsByExerciseId(exercise.id);
+
+    const sectionMap = new Map(sectionRows.map((section) => [section.id, section]));
+    const unsectioned: PublicExerciseQuestion[] = [];
+    const sectionBuckets = new Map<string, PublicExerciseQuestion[]>();
+
+    for (const question of transformed) {
+      // `transformQuestions` only keeps `{ id, label }` on `question.questionType`, so the DB
+      // `typename` (e.g. RADIO) must come from the map built before stripping relations.
+      const questionTypeRow = questionTypeMap.get(question.questionTypeId);
+      const payloadQuestion: PublicExerciseQuestion = {
+        id: question.id,
+        title: question.title ?? '',
+        questionTypeId: question.questionTypeId,
+        questionTypeKey: questionTypeRow?.typename ?? '',
+        points: question.points ?? 0,
+        order: typeof question.order === 'number' ? question.order : null,
+        settings: (question.settings ?? {}) as Record<string, unknown>,
+        options: (question.options ?? []).map((option) => ({
+          id: option.id,
+          label: option.label ?? '',
+          isCorrect: option.isCorrect ?? false,
+          settings: (option.settings ?? {}) as Record<string, unknown>
+        }))
+      };
+
+      const sectionId = question.exerciseSectionId ?? null;
+      if (sectionId && sectionMap.has(sectionId)) {
+        const bucket = sectionBuckets.get(sectionId) ?? [];
+        bucket.push(payloadQuestion);
+        sectionBuckets.set(sectionId, bucket);
+      } else {
+        unsectioned.push(payloadQuestion);
+      }
+    }
+
+    const sections = sectionRows.map((section) => ({
+      id: section.id,
+      title: section.title,
+      description: section.description,
+      order: Number(section.order),
+      colorTheme: section.colorTheme,
+      afterBehavior: section.afterBehavior,
+      questions: sectionBuckets.get(section.id) ?? []
+    }));
+
+    return {
+      ...baseItem,
+      questions: {
+        unsectioned,
+        sections
+      }
+    };
+  } catch (error) {
+    if (error instanceof AppError) throw error;
+    console.error('getPublicCourseItemService error:', error);
+    throw new AppError('Failed to load public course item', ErrorCodes.COURSE_FETCH_FAILED, 500);
+  }
+}
+
+/**
+ * Resolve a course slug to the backing course row with minimal fields. Used by
+ * rate limiting / logging that need the course id without the full tree.
+ */
+export async function resolvePublicCourseBySlug(courseSlug: string) {
+  return getCourseRowBySlug(courseSlug);
+}
diff --git a/apps/api/src/services/course/slug.ts b/apps/api/src/services/course/slug.ts
new file mode 100644
index 00000000..85bc0a46
--- /dev/null
+++ b/apps/api/src/services/course/slug.ts
@@ -0,0 +1,42 @@
+import { AppError, ErrorCodes } from '@api/utils/errors';
+import { getTakenItemSlugs } from '@cio/db/queries/course';
+import { SLUG_REGEX, resolveSlugCollision, slugifyTitle } from '@cio/utils/validation';
+
+/**
+ * Resolve an item (lesson or exercise) slug for a given course:
+ *  - If `requestedSlug` is provided, validate it and reject if already taken (excluding `ignoreItemId`).
+ *  - Otherwise derive a slug from `title` and append `-2`, `-3`, ... until free.
+ *
+ * Uniqueness is enforced across the union of `lesson.slug` and `exercise.slug` per course.
+ */
+export async function resolveItemSlug(params: {
+  courseId: string;
+  title: string;
+  requestedSlug?: string;
+  ignoreItemSlug?: string;
+}): Promise<string> {
+  const { courseId, title, requestedSlug, ignoreItemSlug } = params;
+  const takenSlugs = await getTakenItemSlugs(courseId);
+
+  if (ignoreItemSlug) {
+    takenSlugs.delete(ignoreItemSlug);
+  }
+
+  if (requestedSlug) {
+    if (!SLUG_REGEX.test(requestedSlug)) {
+      throw new AppError(
+        'Slug must be lowercase letters, numbers, and single dashes',
+        ErrorCodes.VALIDATION_ERROR,
+        400,
+        'slug'
+      );
+    }
+    if (takenSlugs.has(requestedSlug)) {
+      throw new AppError('Slug is already in use in this course', ErrorCodes.SLUG_IN_USE, 409, 'slug');
+    }
+    return requestedSlug;
+  }
+
+  const base = slugifyTitle(title);
+  return resolveSlugCollision(base, takenSlugs);
+}
diff --git a/apps/api/src/services/exercise/exercise.ts b/apps/api/src/services/exercise/exercise.ts
index adea9022..f261cf31 100644
--- a/apps/api/src/services/exercise/exercise.ts
+++ b/apps/api/src/services/exercise/exercise.ts
@@ -6,6 +6,7 @@ import { getLessonById } from '@cio/db/queries/lesson';
 import {
   createExercises,
   syncOptionIdSequence,
+  syncQuestionIdSequence,
   createOptions,
   createQuestions,
   deleteExercise,
@@ -14,14 +15,20 @@ import {
   getExerciseById,
   getExerciseCompletionByProfile,
   getExerciseCompletionsByProfile,
+  getExerciseSectionsByExerciseId,
   getExerciseWithRelationsOptimized,
   getExercisesByCourseId,
   getLMSExercises,
+  createExerciseSections,
+  deleteExerciseSectionsByIds,
+  updateExerciseSection,
   updateExercise,
   updateOptions,
   updateQuestions
 } from '@cio/db/queries/exercise';
 import { touchCourseUpdatedAt } from '@cio/db/queries/course';
+import { resolveItemSlug } from '@api/services/course/slug';
+import { guardNonAutoGradableQuestionsForCourseType } from '@api/services/course/public-course-guard';
 
 import { db } from '@cio/db/drizzle';
 import type { DbOrTxClient } from '@cio/db/drizzle';
@@ -37,6 +44,17 @@ import {
 type ExerciseWithQuestions = TExercise & {
   isComplete: boolean;
   questions?: QuestionWithRelations[];
+  sections?: ExerciseSectionWithQuestions[];
+};
+
+type ExerciseSectionWithQuestions = {
+  id: string;
+  title: string;
+  description: string | null;
+  order: number;
+  colorTheme: string;
+  afterBehavior: unknown;
+  questions: QuestionWithRelations[];
 };
 
 type ExerciseWithCompletion = TExercise & {
@@ -62,10 +80,126 @@ function sanitizeExercisePayload(data: TExerciseCreate | TExerciseUpdate): TExer
   return {
     ...data,
     description: sanitizeOptionalHtml(data.description),
+    sections:
+      'sections' in data
+        ? data.sections?.map((section) => ({
+            ...section,
+            title: sanitizeHtml(section.title),
+            description: sanitizeOptionalHtml(section.description ?? undefined)
+          }))
+        : undefined,
     questions: sanitizeExerciseQuestions(data.questions)
   };
 }
 
+function groupQuestionsBySections(
+  sections: Awaited<ReturnType<typeof getExerciseSectionsByExerciseId>>,
+  questions: QuestionWithRelations[]
+) {
+  const questionsBySectionId = new Map<string, QuestionWithRelations[]>();
+  const unsectionedQuestions: QuestionWithRelations[] = [];
+
+  for (const question of questions) {
+    if (question.exerciseSectionId) {
+      const sectionQuestions = questionsBySectionId.get(question.exerciseSectionId) ?? [];
+      sectionQuestions.push(question);
+      questionsBySectionId.set(question.exerciseSectionId, sectionQuestions);
+      continue;
+    }
+
+    unsectionedQuestions.push(question);
+  }
+
+  return {
+    sections: sections.map((section) => ({
+      id: section.id,
+      title: section.title,
+      description: section.description,
+      order: section.order,
+      colorTheme: section.colorTheme,
+      afterBehavior: section.afterBehavior,
+      questions: questionsBySectionId.get(section.id) ?? []
+    })),
+    unsectionedQuestions
+  };
+}
+
+async function syncExerciseSections(
+  exerciseId: string,
+  sections: NonNullable<TExerciseUpdate['sections']>,
+  txClient: DbOrTxClient
+) {
+  const currentSections = await getExerciseSectionsByExerciseId(exerciseId, txClient);
+  const currentSectionIds = new Set(currentSections.map((section) => section.id));
+  const incomingSectionIds = new Set(sections.map((section) => section.id).filter((id): id is string => !!id));
+
+  for (const section of sections) {
+    if (section.afterBehavior.action !== 'go_to_section') continue;
+    if (!incomingSectionIds.has(section.afterBehavior.exerciseSectionId)) {
+      throw new AppError('Section routing target must exist in this exercise', ErrorCodes.VALIDATION_ERROR, 400);
+    }
+  }
+
+  const sectionsToDelete = currentSections
+    .filter((section) => !incomingSectionIds.has(section.id))
+    .map((section) => section.id);
+
+  if (sectionsToDelete.length > 0) {
+    await deleteExerciseSectionsByIds(sectionsToDelete, txClient);
+  }
+
+  const sectionsToCreate = sections
+    .filter((section) => !section.id || !currentSectionIds.has(section.id))
+    .map((section) => ({
+      id: section.id,
+      exerciseId,
+      title: section.title,
+      description: section.description ?? null,
+      order: section.order,
+      colorTheme: section.colorTheme,
+      afterBehavior: section.afterBehavior
+    }));
+
+  if (sectionsToCreate.length > 0) {
+    await createExerciseSections(sectionsToCreate, txClient);
+  }
+
+  await Promise.all(
+    sections
+      .filter((section) => section.id && currentSectionIds.has(section.id))
+      .map((section) =>
+        updateExerciseSection(
+          section.id!,
+          {
+            title: section.title,
+            description: section.description ?? null,
+            order: section.order,
+            colorTheme: section.colorTheme,
+            afterBehavior: section.afterBehavior
+          },
+          txClient
+        )
+      )
+  );
+}
+
+function validateSectionQuestionAssignments(data: TExerciseUpdate) {
+  if (!data.sections || data.sections.length === 0 || !data.questions) return;
+
+  const sectionIds = new Set(data.sections.map((section) => section.id).filter((id): id is string => !!id));
+  const unassignedQuestion = data.questions.find(
+    (question) => !question.deletedAt && (!question.exerciseSectionId || !sectionIds.has(question.exerciseSectionId))
+  );
+
+  if (unassignedQuestion) {
+    throw new AppError(
+      'All active questions must be assigned to an exercise section',
+      ErrorCodes.VALIDATION_ERROR,
+      400
+    );
+  }
+}
+
 async function resolveExerciseCourseId(exercise: TExercise): Promise<string | null> {
   if (exercise.courseId) {
     return exercise.courseId;
@@ -89,6 +223,17 @@ export async function createExercise(data: TExerciseCreate): Promise<TExercise>
   try {
     const sanitizedData = sanitizeExercisePayload(data);
 
+    await guardNonAutoGradableQuestionsForCourseType({
+      courseId: sanitizedData.courseId,
+      questionTypeIds: (sanitizedData.questions ?? []).map((question) => question.questionTypeId)
+    });
+
+    const slug = await resolveItemSlug({
+      courseId: sanitizedData.courseId,
+      title: sanitizedData.title,
+      requestedSlug: sanitizedData.slug
+    });
+
     const exerciseData = {
       title: sanitizedData.title,
       description: sanitizedData.description ?? null,
@@ -96,7 +241,8 @@ export async function createExercise(data: TExerciseCreate): Promise<TExercise>
       courseId: sanitizedData.courseId,
       sectionId: sanitizedData.sectionId || null,
       order: sanitizedData.order ?? null,
-      dueBy: sanitizedData.dueBy || null
+      dueBy: sanitizedData.dueBy || null,
+      slug
     };
 
     const [exercise] = await createExercises([exerciseData]);
@@ -118,23 +264,26 @@ export async function createExercise(data: TExerciseCreate): Promise<TExercise>
         }));
 
         const questions = await createQuestions(questionsData, txClient);
+        const hasOptions = sanitizedData.questions!.some((question) => (question.options?.length ?? 0) > 0);
+
+        if (hasOptions) {
+          await syncOptionIdSequence(txClient);
+        }
 
         // Create options for each question
-        const optionsPromises = sanitizedData.questions!.map(async (q, index) => {
+        for (const [index, questionData] of sanitizedData.questions!.entries()) {
           const question = questions[index];
-          if (!question) return;
+          if (!question) continue;
 
-          const optionsData: TNewOption[] = (q.options ?? []).map((opt) => ({
+          const optionsData: TNewOption[] = (questionData.options ?? []).map((opt) => ({
             questionId: question.id,
             label: opt.label,
             isCorrect: opt.isCorrect,
             settings: opt.settings ?? {}
           }));
 
-          return createOptions(optionsData, txClient);
-        });
-
-        await Promise.all(optionsPromises);
+          await createOptions(optionsData, txClient);
+        }
       });
     }
 
@@ -185,11 +334,14 @@ export async function getExercise(
     // Transform questions (strip questionType and options since they're handled in transform)
     const questionsForTransform = questions.map(({ questionType, options, ...q }) => q);
     const questionsWithOptions = transformQuestions(questionsForTransform, allOptions, questionTypeMap);
+    const sections = await getExerciseSectionsByExerciseId(exerciseId, dbClient);
+    const sectionGroups = groupQuestionsBySections(sections, questionsWithOptions);
 
     return {
       ...exercise,
       isComplete,
-      questions: questionsWithOptions
+      questions: questionsWithOptions,
+      sections: sectionGroups.sections
     };
   } catch (error) {
     if (error instanceof AppError) {
@@ -214,9 +366,28 @@ export async function getExercise(
 export async function updateExerciseService(exerciseId: string, data: TExerciseUpdate): Promise<TExercise> {
   try {
     const sanitizedData = sanitizeExercisePayload(data);
+    validateSectionQuestionAssignments(sanitizedData);
 
     const existing = await getExerciseById(exerciseId);
 
+    if (existing?.courseId) {
+      await guardNonAutoGradableQuestionsForCourseType({
+        courseId: existing.courseId,
+        questionTypeIds: (sanitizedData.questions ?? [])
+          .filter((question) => !('deletedAt' in question && question.deletedAt))
+          .map((question) => question.questionTypeId)
+      });
+    }
+
+    if (sanitizedData.slug !== undefined && existing?.courseId) {
+      sanitizedData.slug = await resolveItemSlug({
+        courseId: existing.courseId,
+        title: sanitizedData.title ?? existing.title,
+        requestedSlug: sanitizedData.slug,
+        ignoreItemSlug: existing.slug ?? undefined
+      });
+    }
+
     const result = await db.transaction(async (tx) => {
       const txClient = tx as DbOrTxClient;
 
@@ -229,6 +400,10 @@ export async function updateExerciseService(exerciseId: string, data: TExerciseU
         }
       }
 
+      if (sanitizedData.sections !== undefined) {
+        await syncExerciseSections(exerciseId, sanitizedData.sections, txClient);
+      }
+
       // Process questions - only update what changed
       if (sanitizedData.questions && sanitizedData.questions.length > 0) {
         // Query current state from DB
@@ -246,31 +421,42 @@ export async function updateExerciseService(exerciseId: string, data: TExerciseU
         // Compute diff between current DB state and incoming data
         const diff = computeExerciseDiff(currentQuestionsWithOptions, sanitizedData.questions);
 
-        // Sync option id sequence so next inserts get ids > max(id) (avoids option_pkey duplicate)
-        if (
-          diff.options.creates.length > 0 ||
-          diff.questions.newQuestions.length > 0 ||
-          diff.questions.updates.length > 0
-        ) {
+        const hasNewQuestions = diff.questions.newQuestions.length > 0;
+        const hasNewOptions = diff.options.creates.length > 0 || hasNewQuestions;
+
+        if (hasNewQuestions) {
+          await syncQuestionIdSequence(txClient);
+        }
+
+        if (hasNewOptions) {
           await syncOptionIdSequence(txClient);
         }
 
-        // Apply all changes in parallel (they operate on different records)
-        await Promise.all([
-          // Delete questions marked for deletion (cascade deletes their options)
-          diff.questions.deletedIds.length > 0 && deleteQuestionsByIds(diff.questions.deletedIds, txClient),
-          // Update only questions that have changed fields
-          diff.questions.updates.length > 0 && updateQuestions(diff.questions.updates, txClient),
-          // Delete options marked for deletion
-          diff.options.deletedIds.length > 0 && deleteOptionsByIds(diff.options.deletedIds, txClient),
-          // Update only options that have changed fields
-          diff.options.updates.length > 0 && updateOptions(diff.options.updates, txClient),
-          // Create new options for existing questions
-          diff.options.creates.length > 0 && createOptions(diff.options.creates, txClient),
-          // Create new questions with their options
-          diff.questions.newQuestions.length > 0 &&
-            createNewQuestionsWithOptions(exerciseId, diff.questions.newQuestions, txClient)
-        ]);
+        // Apply question/option graph changes in dependency order. Question deletes cascade
+        // options, while new question creation can also create options.
+        if (diff.questions.deletedIds.length > 0) {
+          await deleteQuestionsByIds(diff.questions.deletedIds, txClient);
+        }
+
+        if (diff.options.deletedIds.length > 0) {
+          await deleteOptionsByIds(diff.options.deletedIds, txClient);
+        }
+
+        if (diff.questions.updates.length > 0) {
+          await updateQuestions(diff.questions.updates, txClient);
+        }
+
+        if (diff.options.updates.length > 0) {
+          await updateOptions(diff.options.updates, txClient);
+        }
+
+        if (diff.options.creates.length > 0) {
+          await createOptions(diff.options.creates, txClient);
+        }
+
+        if (hasNewQuestions) {
+          await createNewQuestionsWithOptions(exerciseId, diff.questions.newQuestions, txClient);
+        }
       }
 
       // Return the updated exercise
@@ -293,6 +479,142 @@ export async function updateExerciseService(exerciseId: string, data: TExerciseU
   }
 }
 
+export async function updateExerciseSectionMetadataService(
+  exerciseId: string,
+  exerciseSectionId: string,
+  data: { title?: string; description?: string | null }
+) {
+  try {
+    const sections = await getExerciseSectionsByExerciseId(exerciseId);
+    const belongs = sections.some((section) => section.id === exerciseSectionId);
+
+    if (!belongs) {
+      throw new AppError(
+        'That exercise section was not found on this exercise. Call get_exercise_details and use a section id from the sections array.',
+        ErrorCodes.VALIDATION_ERROR,
+        404
+      );
+    }
+
+    const patch: { title?: string; description?: string | null } = {};
+
+    if (data.title !== undefined) {
+      patch.title = sanitizeHtml(data.title);
+    }
+
+    if (data.description !== undefined) {
+      patch.description = data.description === '' ? null : (sanitizeOptionalHtml(data.description) ?? null);
+    }
+
+    if (Object.keys(patch).length === 0) {
+      throw new AppError('No fields to update', ErrorCodes.VALIDATION_ERROR, 400);
+    }
+
+    const updated = await updateExerciseSection(exerciseSectionId, patch);
+
+    if (!updated) {
+      throw new AppError('Failed to update exercise section', ErrorCodes.INTERNAL_ERROR, 500);
+    }
+
+    const existing = await getExerciseById(exerciseId);
+
+    if (existing?.courseId) {
+      await touchCourseUpdatedAt(existing.courseId);
+    }
+
+    return {
+      id: updated.id,
+      title: updated.title,
+      description: updated.description ?? null,
+      exerciseId
+    };
+  } catch (error) {
+    console.error('updateExerciseSectionMetadataService error:', error);
+    if (error instanceof AppError) {
+      throw error;
+    }
+
+    throw new AppError(
+      error instanceof Error ? error.message : 'Failed to update exercise section',
+      ErrorCodes.INTERNAL_ERROR,
+      500
+    );
+  }
+}
+
+export async function createExerciseSectionService(
+  exerciseId: string,
+  data: {
+    title: string;
+    description?: string | null;
+    order: number;
+    colorTheme?: 'blue' | 'green' | 'amber' | 'rose' | 'violet' | 'slate';
+    afterBehavior?:
+      | { action: 'continue' }
+      | { action: 'submit' }
+      | { action: 'go_to_section'; exerciseSectionId: string };
+  }
+) {
+  try {
+    const sections = await getExerciseSectionsByExerciseId(exerciseId);
+    const afterBehavior = data.afterBehavior;
+
+    if (afterBehavior?.action === 'go_to_section') {
+      const targetExists = sections.some((section) => section.id === afterBehavior.exerciseSectionId);
+
+      if (!targetExists) {
+        throw new AppError(
+          'That exercise section was not found on this exercise. Call get_exercise_details and use a section id from the sections array.',
+          ErrorCodes.VALIDATION_ERROR,
+          404
+        );
+      }
+    }
+
+    const [created] = await createExerciseSections([
+      {
+        exerciseId,
+        title: data.title,
+        description: data.description ?? null,
+        order: data.order,
+        colorTheme: data.colorTheme ?? 'blue',
+        afterBehavior: data.afterBehavior ?? { action: 'continue' }
+      }
+    ]);
+
+    if (!created) {
+      throw new AppError('Failed to create exercise section', ErrorCodes.INTERNAL_ERROR, 500);
+    }
+
+    const existing = await getExerciseById(exerciseId);
+
+    if (existing?.courseId) {
+      await touchCourseUpdatedAt(existing.courseId);
+    }
+
+    return {
+      id: created.id,
+      exerciseId: created.exerciseId,
+      title: created.title,
+      description: created.description ?? null,
+      order: created.order,
+      colorTheme: created.colorTheme,
+      afterBehavior: created.afterBehavior
+    };
+  } catch (error) {
+    console.error('createExerciseSectionService error:', error);
+    if (error instanceof AppError) {
+      throw error;
+    }
+
+    throw new AppError(
+      error instanceof Error ? error.message : 'Failed to create exercise section',
+      ErrorCodes.INTERNAL_ERROR,
+      500
+    );
+  }
+}
+
 /**
  * Replaces an exercise's questions and options with the provided payload.
  * Existing questions are deleted and recreated from the replacement payload.
@@ -327,6 +649,8 @@ export async function replaceExerciseService(exerciseId: string, data: TExercise
       const hasReplacementOptions = replacementQuestions.some((question) => (question.options?.length ?? 0) > 0);
 
       if (replacementQuestions.length > 0) {
+        await syncQuestionIdSequence(txClient);
+
         if (hasReplacementOptions) {
           await syncOptionIdSequence(txClient);
         }
@@ -494,6 +818,14 @@ export async function createExerciseFromTemplate(
     if (questions && questions.length > 0) {
       await db.transaction(async (tx) => {
         const txClient = tx as DbOrTxClient;
+        const hasTemplateOptions = questions.some(
+          (question) => question.question_type.id !== 3 && (question.options?.length ?? 0) > 0
+        );
+
+        if (hasTemplateOptions) {
+          await syncOptionIdSequence(txClient);
+        }
+
         for (const question of questions) {
           const { title, question_type, options, order, points } = question;
           const questionSettings = sanitizeUnknownStrings(
diff --git a/apps/api/src/services/exercise/utils.ts b/apps/api/src/services/exercise/utils.ts
index 7718de9f..44f295ff 100644
--- a/apps/api/src/services/exercise/utils.ts
+++ b/apps/api/src/services/exercise/utils.ts
@@ -25,6 +25,7 @@ type ExerciseAnswer = Pick<
 
 export type QuestionWithRelations = {
   id: number | string;
+  exerciseSectionId?: string | null;
   value: string;
   name: string;
   title: string;
@@ -80,6 +81,8 @@ export function buildExerciseUpdateFields(data: TExerciseUpdate): Partial<TExerc
   if (data.isUnlocked !== undefined) exerciseUpdate.isUnlocked = data.isUnlocked;
   if (data.dueBy !== undefined) exerciseUpdate.dueBy = data.dueBy || null;
   if (data.allowMultipleAttempts !== undefined) exerciseUpdate.allowMultipleAttempts = data.allowMultipleAttempts;
+  if (data.sectionDisplayMode !== undefined) exerciseUpdate.sectionDisplayMode = data.sectionDisplayMode;
+  if (data.slug !== undefined) exerciseUpdate.slug = data.slug;
   return exerciseUpdate;
 }
 
@@ -180,6 +183,10 @@ function diffQuestion(
     changes.order = incoming.order;
     hasChanges = true;
   }
+  if (incoming.exerciseSectionId !== undefined && incoming.exerciseSectionId !== current.exerciseSectionId) {
+    changes.exerciseSectionId = incoming.exerciseSectionId;
+    hasChanges = true;
+  }
   if (!areSettingsEqual(current.settings, incoming.settings)) {
     changes.settings = normalizeSettings(incoming.settings);
     hasChanges = true;
@@ -336,6 +343,7 @@ export async function createNewQuestionsWithOptions(
       questionTypeId: q.questionTypeId || 1,
       points: q.points || 0,
       order: typeof q.order === 'number' ? q.order : undefined,
+      exerciseSectionId: q.exerciseSectionId ?? null,
       settings: normalizeSettings(q.settings)
     })),
     txClient
@@ -411,6 +419,7 @@ export function transformQuestion(
 
   return {
     id: question.id!,
+    exerciseSectionId: question.exerciseSectionId ?? null,
     value: question.title || '', // value field defaults to title
     name: question.name || '',
     title: question.title,
diff --git a/apps/api/src/services/exercise/video-recording.ts b/apps/api/src/services/exercise/video-recording.ts
new file mode 100644
index 00000000..44c1d518
--- /dev/null
+++ b/apps/api/src/services/exercise/video-recording.ts
@@ -0,0 +1,217 @@
+import { AppError, ErrorCodes } from '@api/utils/errors';
+import { getStorageConfig } from '@api/config/storage';
+import { generateVideoDownloadPresignedUrls, generateVideoUploadPresignedUrl } from '@api/utils/s3';
+import { createAsset, getAssetById, updateAsset } from '@cio/db/queries/assets';
+import { getExerciseWithRelationsOptimized } from '@cio/db/queries/exercise';
+import { getQuestionAnswersBySubmissionId, getSubmissionById } from '@cio/db/queries/submission';
+import { getGroupMemberIdByCourseAndProfile, isCourseTeamMemberOrOrgAdmin } from '@cio/db/queries/group';
+import { getCourseOrganizationId as getCourseOrganizationIdFromDb } from '@cio/db/queries/tag';
+import { randomUUID } from 'node:crypto';
+import type { VideoRecordingAnswerData } from '@cio/question-types';
+import {
+  QUESTION_TYPE_IDS,
+  VIDEO_RECORDING_MIN_DURATION_SECONDS,
+  getVideoRecordingMaxDurationSeconds
+} from '@cio/question-types';
+import type {
+  TExerciseVideoRecordingUploadComplete,
+  TExerciseVideoRecordingUploadInit
+} from '@cio/utils/validation/exercise';
+
+type RecordingContext = {
+  organizationId: string;
+  groupMemberId: string;
+  maxDurationSeconds: number;
+};
+
+function getExtensionFromMimeType(mimeType: string): string {
+  if (mimeType.includes('mp4')) return 'mp4';
+  if (mimeType.includes('quicktime')) return 'mov';
+  return 'webm';
+}
+
+async function getCourseOrganizationIdResolved(courseId: string): Promise<string> {
+  const organizationId = await getCourseOrganizationIdFromDb(courseId);
+
+  if (!organizationId) {
+    throw new AppError('Course organization not found', ErrorCodes.NOT_FOUND, 404);
+  }
+
+  return organizationId;
+}
+
+async function getRecordingContext(
+  courseId: string,
+  exerciseId: string,
+  questionId: number,
+  profileId: string
+): Promise<RecordingContext> {
+  const [organizationId, groupMemberId, exerciseWithRelations] = await Promise.all([
+    getCourseOrganizationIdResolved(courseId),
+    getGroupMemberIdByCourseAndProfile(courseId, profileId),
+    getExerciseWithRelationsOptimized(exerciseId)
+  ]);
+
+  if (!groupMemberId) {
+    throw new AppError('User is not a member of this course', ErrorCodes.UNAUTHORIZED, 403);
+  }
+
+  const question = exerciseWithRelations.questions.find((item) => item.id === questionId);
+  if (!question) {
+    throw new AppError('Question not found for this exercise', ErrorCodes.NOT_FOUND, 404);
+  }
+
+  if (question.questionTypeId !== QUESTION_TYPE_IDS.VIDEO_RECORDING) {
+    throw new AppError('Question is not a video recording question', ErrorCodes.VALIDATION_ERROR, 400);
+  }
+
+  return {
+    organizationId,
+    groupMemberId,
+    maxDurationSeconds: getVideoRecordingMaxDurationSeconds(question.settings as Record<string, unknown> | null)
+  };
+}
+
+export async function initVideoRecordingUpload(
+  courseId: string,
+  exerciseId: string,
+  questionId: number,
+  profileId: string,
+  input: TExerciseVideoRecordingUploadInit
+) {
+  const context = await getRecordingContext(courseId, exerciseId, questionId, profileId);
+  const extension = getExtensionFromMimeType(input.mimeType);
+  const storageKey = [
+    'exercise-recordings',
+    context.organizationId,
+    courseId,
+    exerciseId,
+    String(questionId),
+    context.groupMemberId,
+    `${randomUUID()}.${extension}`
+  ].join('/');
+
+  const asset = await createAsset({
+    organizationId: context.organizationId,
+    kind: 'video',
+    provider: 'upload',
+    storageProvider: 's3',
+    storageKey,
+    mimeType: input.mimeType,
+    byteSize: input.size,
+    title: input.fileName,
+    status: 'pending',
+    metadata: {
+      source: 'exercise_video_recording',
+      courseId,
+      exerciseId,
+      questionId,
+      groupMemberId: context.groupMemberId,
+      maxDurationSeconds: context.maxDurationSeconds
+    },
+    createdByProfileId: profileId
+  });
+
+  const uploadUrl = await generateVideoUploadPresignedUrl(storageKey, input.mimeType);
+  const expiresAt = new Date(Date.now() + getStorageConfig().presignUploadExpiresSeconds * 1000).toISOString();
+
+  return {
+    assetId: asset.id,
+    uploadUrl,
+    storageKey,
+    expiresAt
+  };
+}
+
+export async function completeVideoRecordingUpload(
+  courseId: string,
+  exerciseId: string,
+  questionId: number,
+  profileId: string,
+  input: TExerciseVideoRecordingUploadComplete
+): Promise<VideoRecordingAnswerData> {
+  const context = await getRecordingContext(courseId, exerciseId, questionId, profileId);
+  if (input.durationSeconds < VIDEO_RECORDING_MIN_DURATION_SECONDS) {
+    throw new AppError('Recording is too short', ErrorCodes.VALIDATION_ERROR, 400);
+  }
+  if (input.durationSeconds > context.maxDurationSeconds + 2) {
+    throw new AppError('Recording exceeds the configured duration', ErrorCodes.VALIDATION_ERROR, 400);
+  }
+
+  const asset = await getAssetById(input.assetId, context.organizationId);
+  if (!asset || asset.storageKey !== input.storageKey) {
+    throw new AppError('Recording asset not found', ErrorCodes.NOT_FOUND, 404);
+  }
+
+  const uploadedAt = new Date().toISOString();
+
+  await updateAsset(input.assetId, context.organizationId, {
+    status: 'active',
+    storageKey: input.storageKey,
+    mimeType: input.mimeType,
+    byteSize: input.size,
+    title: input.fileName,
+    durationSeconds: Math.ceil(input.durationSeconds),
+    metadata: {
+      ...(asset.metadata && typeof asset.metadata === 'object' && !Array.isArray(asset.metadata) ? asset.metadata : {}),
+      recordedAt: input.recordedAt,
+      uploadedAt,
+      retakeCount: input.retakeCount ?? 0
+    }
+  });
+
+  return {
+    type: 'VIDEO_RECORDING',
+    assetId: input.assetId,
+    storageKey: input.storageKey,
+    fileName: input.fileName,
+    mimeType: input.mimeType,
+    size: input.size,
+    durationSeconds: Math.ceil(input.durationSeconds),
+    recordedAt: input.recordedAt,
+    uploadedAt,
+    provider: 'cloudflare',
+    retakeCount: input.retakeCount ?? 0
+  };
+}
+
+export async function getVideoRecordingPlaybackUrl(
+  courseId: string,
+  exerciseId: string,
+  submissionId: string,
+  questionId: number,
+  profileId: string
+) {
+  const [submission, groupMemberId, isReviewer] = await Promise.all([
+    getSubmissionById(submissionId),
+    getGroupMemberIdByCourseAndProfile(courseId, profileId),
+    isCourseTeamMemberOrOrgAdmin(courseId, profileId)
+  ]);
+
+  if (!submission || submission.courseId !== courseId || submission.exerciseId !== exerciseId) {
+    throw new AppError('Submission not found', ErrorCodes.NOT_FOUND, 404);
+  }
+
+  if (!isReviewer && (!groupMemberId || submission.submittedBy !== groupMemberId)) {
+    throw new AppError('Unauthorized', ErrorCodes.UNAUTHORIZED, 403);
+  }
+
+  const answers = await getQuestionAnswersBySubmissionId(submissionId);
+  const answer = answers.find((item) => item.questionId === questionId);
+  const answerData = answer?.answerData;
+  if (!answerData || answerData.type !== 'VIDEO_RECORDING') {
+    throw new AppError('Video recording answer not found', ErrorCodes.NOT_FOUND, 404);
+  }
+
+  const urls = await generateVideoDownloadPresignedUrls([answerData.storageKey]);
+  const playbackUrl = urls[answerData.storageKey];
+  if (!playbackUrl) {
+    throw new AppError('Video recording is unavailable', ErrorCodes.INTERNAL_ERROR, 500);
+  }
+
+  return {
+    assetId: answerData.assetId,
+    playbackUrl,
+    expiresAt: new Date(Date.now() + getStorageConfig().presignDownloadExpiresSeconds * 1000).toISOString()
+  };
+}
diff --git a/apps/api/src/services/lesson/lesson.ts b/apps/api/src/services/lesson/lesson.ts
index a4deda17..61bc8917 100644
--- a/apps/api/src/services/lesson/lesson.ts
+++ b/apps/api/src/services/lesson/lesson.ts
@@ -20,6 +20,7 @@ import {
 } from '@cio/db/queries/lesson';
 import { touchCourseUpdatedAt } from '@cio/db/queries/course';
 import { enrichLessonWithPresignedUrls } from '@api/utils/lesson-media';
+import { resolveItemSlug } from '@api/services/course/slug';
 
 /**
  * Creates a new lesson
@@ -29,9 +30,16 @@ import { enrichLessonWithPresignedUrls } from '@api/utils/lesson-media';
  */
 export async function createLesson(courseId: string, data: TLessonCreate): Promise<TLesson> {
   try {
+    const slug = await resolveItemSlug({
+      courseId,
+      title: data.title,
+      requestedSlug: data.slug
+    });
+
     const lessonData = {
       ...data,
-      courseId
+      courseId,
+      slug
     };
 
     const [lesson] = await createLessons([lessonData]);
@@ -89,7 +97,26 @@ export async function getLesson(lessonId: string): Promise<LessonById> {
  */
 export async function updateLessonService(lessonId: string, data: TLessonUpdate): Promise<TLesson> {
   try {
-    const updated = await updateLesson(lessonId, data);
+    const payload: TLessonUpdate = { ...data };
+
+    if (payload.slug !== undefined) {
+      const existing = await getLessonById(lessonId);
+      if (!existing) {
+        throw new AppError('Lesson not found', ErrorCodes.LESSON_NOT_FOUND, 404);
+      }
+      if (!existing.courseId) {
+        throw new AppError('Lesson has no course', ErrorCodes.LESSON_NOT_FOUND, 404);
+      }
+
+      payload.slug = await resolveItemSlug({
+        courseId: existing.courseId,
+        title: payload.title ?? existing.title,
+        requestedSlug: payload.slug,
+        ignoreItemSlug: existing.slug ?? undefined
+      });
+    }
+
+    const updated = await updateLesson(lessonId, payload);
     if (!updated) {
       throw new AppError('Failed to update lesson', ErrorCodes.INTERNAL_ERROR, 500);
     }
diff --git a/apps/api/src/services/organization/invite.ts b/apps/api/src/services/organization/invite.ts
index a8d52aa3..c7bb97fa 100644
--- a/apps/api/src/services/organization/invite.ts
+++ b/apps/api/src/services/organization/invite.ts
@@ -1,24 +1,29 @@
-import * as schema from '@cio/db/schema';
-
 import { AppError, ErrorCodes } from '@api/utils/errors';
-import { and, eq, isNull } from 'drizzle-orm';
 import {
   checkEmailsExistInOrg,
+  claimPendingOrganizationInvite,
   createOrganizationInvite,
   createOrganizationInviteAudit,
+  createOrganizationMember,
   createOrganizationMembers,
   getActivePendingOrgInviteForEmail,
   getOrganizationById,
   getOrganizationInviteByTokenHash,
-  revokeActiveOrganizationInvitesByEmails
+  revokeActiveOrganizationInvitesByEmails,
+  selectOrganizationInviteWithOrgByInviteId,
+  selectOrganizationInviteWithOrgByTokenHash,
+  selectOrganizationMemberByOrgAndNormalizedEmail,
+  selectOrganizationMemberByOrgAndProfile,
+  updateOrganizationMemberById
 } from '@cio/db/queries/organization';
 import { getCourseGroupIds } from '@cio/db/queries/course';
 import { enrollUsersInCourseGroups } from '@cio/db/queries/group';
 import { addProgramMember, getExistingProgramMembers } from '@cio/db/queries/program';
 
 import { ROLE } from '@cio/utils/constants';
+import type { TNewOrganizationInviteAudit } from '@db/types';
 import crypto from 'node:crypto';
-import { db } from '@cio/db/drizzle';
+import { db, type DbOrTxClient } from '@cio/db/drizzle';
 import { getDashboardBaseUrl } from '@api/config/dashboard-url';
 import { parseCourseIdsFromInviteMetadata, parseProgramIdsFromInviteMetadata } from '@api/utils/org';
 import { markUserAndProfileEmailVerified } from '@cio/db/queries/auth/profile';
@@ -90,10 +95,59 @@ function getExpiryLabel(expiresAtIso: string): string {
   });
 }
 
+async function syncOrgMemberForOrgInvite(
+  tx: DbOrTxClient,
+  params: { organizationId: string; roleId: number; normalizedEmail: string; userId: string }
+): Promise<void> {
+  const orgMemberByEmail = await selectOrganizationMemberByOrgAndNormalizedEmail(
+    tx,
+    params.organizationId,
+    params.normalizedEmail
+  );
+
+  if (orgMemberByEmail) {
+    if (orgMemberByEmail.profileId && orgMemberByEmail.profileId !== params.userId) {
+      throw new AppError('This invite is linked to another account', ErrorCodes.UNAUTHORIZED, 403);
+    }
+
+    await updateOrganizationMemberById(tx, orgMemberByEmail.id, {
+      profileId: params.userId,
+      roleId: params.roleId,
+      email: params.normalizedEmail,
+      verified: true
+    });
+
+    return;
+  }
+
+  const orgMemberByProfile = await selectOrganizationMemberByOrgAndProfile(tx, params.organizationId, params.userId);
+
+  if (orgMemberByProfile) {
+    await updateOrganizationMemberById(tx, orgMemberByProfile.id, {
+      roleId: params.roleId,
+      email: params.normalizedEmail,
+      verified: true
+    });
+
+    return;
+  }
+
+  await createOrganizationMember(
+    {
+      organizationId: params.organizationId,
+      roleId: params.roleId,
+      profileId: params.userId,
+      email: params.normalizedEmail,
+      verified: true
+    },
+    tx
+  );
+}
+
 async function recordOrganizationInviteAudit(
   inviteId: string,
   organizationId: string,
-  eventType: (typeof schema.organizationInviteEventType.enumValues)[number],
+  eventType: TNewOrganizationInviteAudit['eventType'],
   context: {
     actorProfileId?: string | null;
     targetEmail?: string | null;
@@ -281,19 +335,7 @@ export async function acceptOrganizationInvite(token: string, user: TAuthUser, c
   const tokenHash = hashToken(token);
 
   const result = await db.transaction(async (tx) => {
-    const [row] = await tx
-      .select({
-        invite: schema.organizationInvite,
-        organization: {
-          id: schema.organization.id,
-          name: schema.organization.name,
-          siteName: schema.organization.siteName
-        }
-      })
-      .from(schema.organizationInvite)
-      .innerJoin(schema.organization, eq(schema.organizationInvite.organizationId, schema.organization.id))
-      .where(eq(schema.organizationInvite.tokenHash, tokenHash))
-      .limit(1);
+    const row = await selectOrganizationInviteWithOrgByTokenHash(tx, tokenHash);
 
     if (!row) {
       throw new AppError('Invalid invite link', ErrorCodes.NOT_FOUND, 404);
@@ -321,82 +363,16 @@ export async function acceptOrganizationInvite(token: string, user: TAuthUser, c
       };
     }
 
-    const [orgMemberByEmail] = await tx
-      .select()
-      .from(schema.organizationmember)
-      .where(
-        and(
-          eq(schema.organizationmember.organizationId, row.invite.organizationId),
-          eq(schema.organizationmember.email, normalizedEmail)
-        )
-      )
-      .limit(1);
-
-    if (orgMemberByEmail) {
-      if (orgMemberByEmail.profileId && orgMemberByEmail.profileId !== user.id) {
-        throw new AppError('This invite is linked to another account', ErrorCodes.UNAUTHORIZED, 403);
-      }
-
-      await tx
-        .update(schema.organizationmember)
-        .set({
-          profileId: user.id,
-          roleId: row.invite.roleId,
-          email: normalizedEmail,
-          verified: true
-        })
-        .where(eq(schema.organizationmember.id, orgMemberByEmail.id));
-    } else {
-      const [orgMemberByProfile] = await tx
-        .select()
-        .from(schema.organizationmember)
-        .where(
-          and(
-            eq(schema.organizationmember.organizationId, row.invite.organizationId),
-            eq(schema.organizationmember.profileId, user.id)
-          )
-        )
-        .limit(1);
-
-      if (orgMemberByProfile) {
-        await tx
-          .update(schema.organizationmember)
-          .set({
-            roleId: row.invite.roleId,
-            email: normalizedEmail,
-            verified: true
-          })
-          .where(eq(schema.organizationmember.id, orgMemberByProfile.id));
-      } else {
-        await tx.insert(schema.organizationmember).values({
-          organizationId: row.invite.organizationId,
-          roleId: row.invite.roleId,
-          profileId: user.id,
-          email: normalizedEmail,
-          verified: true
-        });
-      }
-    }
+    await syncOrgMemberForOrgInvite(tx, {
+      organizationId: row.invite.organizationId,
+      roleId: row.invite.roleId,
+      normalizedEmail,
+      userId: user.id
+    });
 
     await markUserAndProfileEmailVerified(user.id, tx);
 
-    const [acceptedInvite] = await tx
-      .update(schema.organizationInvite)
-      .set({
-        acceptedAt: new Date().toISOString(),
-        acceptedByProfileId: user.id,
-        updatedAt: new Date().toISOString()
-      })
-      .where(
-        and(
-          eq(schema.organizationInvite.id, row.invite.id),
-          eq(schema.organizationInvite.isRevoked, false),
-          isNull(schema.organizationInvite.acceptedAt)
-        )
-      )
-      .returning({
-        id: schema.organizationInvite.id
-      });
+    const acceptedInvite = await claimPendingOrganizationInvite(tx, row.invite.id, user.id);
 
     if (!acceptedInvite) {
       throw new AppError('Invite is no longer available', ErrorCodes.VALIDATION_ERROR, 409);
@@ -523,19 +499,7 @@ export async function acceptOrganizationInviteById(
   const normalizedEmail = user.email.toLowerCase().trim();
 
   const result = await db.transaction(async (tx) => {
-    const [row] = await tx
-      .select({
-        invite: schema.organizationInvite,
-        organization: {
-          id: schema.organization.id,
-          name: schema.organization.name,
-          siteName: schema.organization.siteName
-        }
-      })
-      .from(schema.organizationInvite)
-      .innerJoin(schema.organization, eq(schema.organizationInvite.organizationId, schema.organization.id))
-      .where(eq(schema.organizationInvite.id, inviteId))
-      .limit(1);
+    const row = await selectOrganizationInviteWithOrgByInviteId(tx, inviteId);
 
     if (!row) {
       throw new AppError('Invalid invite', ErrorCodes.NOT_FOUND, 404);
@@ -560,71 +524,16 @@ export async function acceptOrganizationInviteById(
       return { organization: row.organization, invite: row.invite, roleId: row.invite.roleId, alreadyAccepted: true };
     }
 
-    const [orgMemberByEmail] = await tx
-      .select()
-      .from(schema.organizationmember)
-      .where(
-        and(
-          eq(schema.organizationmember.organizationId, row.invite.organizationId),
-          eq(schema.organizationmember.email, normalizedEmail)
-        )
-      )
-      .limit(1);
-
-    if (orgMemberByEmail) {
-      if (orgMemberByEmail.profileId && orgMemberByEmail.profileId !== user.id) {
-        throw new AppError('This invite is linked to another account', ErrorCodes.UNAUTHORIZED, 403);
-      }
-
-      await tx
-        .update(schema.organizationmember)
-        .set({ profileId: user.id, roleId: row.invite.roleId, email: normalizedEmail, verified: true })
-        .where(eq(schema.organizationmember.id, orgMemberByEmail.id));
-    } else {
-      const [orgMemberByProfile] = await tx
-        .select()
-        .from(schema.organizationmember)
-        .where(
-          and(
-            eq(schema.organizationmember.organizationId, row.invite.organizationId),
-            eq(schema.organizationmember.profileId, user.id)
-          )
-        )
-        .limit(1);
-
-      if (orgMemberByProfile) {
-        await tx
-          .update(schema.organizationmember)
-          .set({ roleId: row.invite.roleId, email: normalizedEmail, verified: true })
-          .where(eq(schema.organizationmember.id, orgMemberByProfile.id));
-      } else {
-        await tx.insert(schema.organizationmember).values({
-          organizationId: row.invite.organizationId,
-          roleId: row.invite.roleId,
-          profileId: user.id,
-          email: normalizedEmail,
-          verified: true
-        });
-      }
-    }
+    await syncOrgMemberForOrgInvite(tx, {
+      organizationId: row.invite.organizationId,
+      roleId: row.invite.roleId,
+      normalizedEmail,
+      userId: user.id
+    });
 
     await markUserAndProfileEmailVerified(user.id, tx);
 
-    const [acceptedInvite] = await tx
-      .update(schema.organizationInvite)
-      .set({
-        acceptedAt: new Date().toISOString(),
-        acceptedByProfileId: user.id,
-        updatedAt: new Date().toISOString()
-      })
-      .where(
-        and(
-          eq(schema.organizationInvite.id, row.invite.id),
-          eq(schema.organizationInvite.isRevoked, false),
-          isNull(schema.organizationInvite.acceptedAt)
-        )
-      )
-      .returning({ id: schema.organizationInvite.id });
+    const acceptedInvite = await claimPendingOrganizationInvite(tx, row.invite.id, user.id);
 
     if (!acceptedInvite) {
       throw new AppError('Invite is no longer available', ErrorCodes.VALIDATION_ERROR, 409);
diff --git a/apps/api/src/services/program/program.ts b/apps/api/src/services/program/program.ts
index 17cabe2c..fff0573e 100644
--- a/apps/api/src/services/program/program.ts
+++ b/apps/api/src/services/program/program.ts
@@ -12,6 +12,7 @@ import {
 } from '@cio/utils/validation/program';
 import {
   addCourseToProgram,
+  addProgramMember,
   createProgramWithCreatorMembership,
   createProgramNewsfeed as createProgramNewsfeedQuery,
   createProgramNewsfeedComment as createProgramNewsfeedCommentQuery,
@@ -39,10 +40,11 @@ import {
   updateProgramNewsfeedReaction
 } from '@cio/db/queries/program';
 import { getCourseGroupIds } from '@cio/db/queries/course';
+import { insertGroupMembersOnConflictDoNothing } from '@cio/db/queries/group';
 import { getProfileByEmail } from '@cio/db/queries/auth';
+import { insertOrganizationMembersOnConflictDoNothing } from '@cio/db/queries/organization';
 import { ROLE } from '@cio/utils/constants';
 import { db } from '@cio/db/drizzle';
-import * as schema from '@db/schema';
 
 type ProgramMemberEnrollment = {
   profileId: string;
@@ -80,8 +82,8 @@ async function enrollProgramStudentsInGroups(
   );
 
   await db.transaction(async (tx) => {
-    await tx.insert(schema.organizationmember).values(organizationMemberRows).onConflictDoNothing();
-    await tx.insert(schema.groupmember).values(groupMemberRows).onConflictDoNothing();
+    await insertOrganizationMembersOnConflictDoNothing(organizationMemberRows, tx);
+    await insertGroupMembersOnConflictDoNothing(groupMemberRows, tx);
   });
 
   return groupMemberRows.length;
@@ -230,41 +232,41 @@ export async function addProgramMembers(programId: string, data: TAddProgramMemb
         }
 
         return db.transaction(async (tx) => {
-          const [member] = await tx
-            .insert(schema.programMember)
-            .values({
+          const member = await addProgramMember(
+            {
               programId,
               profileId,
               roleId,
               email: normalizedEmail ?? undefined
-            })
-            .returning();
+            },
+            tx
+          );
 
           if (member && member.roleId === ROLE.STUDENT && member.profileId && courseGroupIds.length > 0) {
             const validCourseGroupIds = courseGroupIds.filter((groupId): groupId is string => Boolean(groupId));
 
-            await tx
-              .insert(schema.organizationmember)
-              .values({
-                organizationId: program.organizationId,
-                roleId: ROLE.STUDENT,
-                profileId: member.profileId,
-                email: normalizedEmail ?? undefined,
-                verified: true
-              })
-              .onConflictDoNothing();
-
-            await tx
-              .insert(schema.groupmember)
-              .values(
-                validCourseGroupIds.map((groupId) => ({
-                  groupId,
+            await insertOrganizationMembersOnConflictDoNothing(
+              [
+                {
+                  organizationId: program.organizationId,
                   roleId: ROLE.STUDENT,
                   profileId: member.profileId,
-                  email: normalizedEmail ?? undefined
-                }))
-              )
-              .onConflictDoNothing();
+                  email: normalizedEmail ?? undefined,
+                  verified: true
+                }
+              ],
+              tx
+            );
+
+            await insertGroupMembersOnConflictDoNothing(
+              validCourseGroupIds.map((groupId) => ({
+                groupId,
+                roleId: ROLE.STUDENT,
+                profileId: member.profileId,
+                email: normalizedEmail ?? undefined
+              })),
+              tx
+            );
           }
 
           return member;
diff --git a/apps/api/src/services/submission/submission.ts b/apps/api/src/services/submission/submission.ts
index 64e15417..d61e14e4 100644
--- a/apps/api/src/services/submission/submission.ts
+++ b/apps/api/src/services/submission/submission.ts
@@ -1,5 +1,10 @@
-import type { AnswerData, FileUploadAnswerData } from '@cio/question-types';
-import { scoreSubmissionAnswers, type ScoreSubmissionResult, validateTextareaAnswer } from '@cio/question-types';
+import type { AnswerData, FileUploadAnswerData, VideoRecordingAnswerData } from '@cio/question-types';
+import {
+  getVideoRecordingMaxDurationSeconds,
+  scoreSubmissionAnswers,
+  type ScoreSubmissionResult,
+  validateTextareaAnswer
+} from '@cio/question-types';
 import { AppError, ErrorCodes } from '@api/utils/errors';
 import type { TNewQuestionAnswer, TNewSubmission, TSubmission } from '@cio/db/types';
 import type {
@@ -21,6 +26,7 @@ import {
   updateSubmission,
   updateSubmissionGrades
 } from '@cio/db/queries/submission';
+import { createAssetUsage, getAssetById } from '@cio/db/queries/assets';
 import {
   fromApiPayload,
   getQuestionTypeById,
@@ -35,7 +41,7 @@ import { getGroupMemberIdByCourseAndProfile, isCourseTeamMemberOrOrgAdmin } from
 import { QUESTION_TYPE_ID_TO_KEY } from '@cio/question-types';
 
 import { getDashboardBaseUrl } from '@api/config/dashboard-url';
-import { generateDocumentDownloadPresignedUrls } from '@api/utils/s3';
+import { generateDocumentDownloadPresignedUrls, generateVideoDownloadPresignedUrls } from '@api/utils/s3';
 import { syncComplianceProgressFromSubmission } from '@api/services/course/compliance';
 
 type SubmissionGradingState = 'queued' | 'processing' | 'awaiting_manual' | 'completed' | 'failed';
@@ -139,6 +145,10 @@ function isFileUpload(data: unknown): data is FileUploadAnswerData {
   return !!data && typeof data === 'object' && (data as { type: string }).type === 'FILE_UPLOAD';
 }
 
+function isVideoRecording(data: unknown): data is VideoRecordingAnswerData {
+  return !!data && typeof data === 'object' && (data as { type: string }).type === 'VIDEO_RECORDING';
+}
+
 /**
  * Enriches FILE_UPLOAD answers from DB rows (question_answer[]) with presigned download URLs.
  * Used by getSubmission and listSubmissionsByExercise.
@@ -148,15 +158,27 @@ async function enrichFileUploadAnswersArray<T extends { answerData?: unknown }>(
     .map((a) => a.answerData)
     .filter(isFileUpload)
     .map((d) => d.fileKey);
+  const videoKeys = answers
+    .map((a) => a.answerData)
+    .filter(isVideoRecording)
+    .map((d) => d.storageKey);
 
-  if (fileKeys.length === 0) return answers;
+  if (fileKeys.length === 0 && videoKeys.length === 0) return answers;
 
   try {
-    const urls = await generateDocumentDownloadPresignedUrls(fileKeys);
+    const [documentUrls, videoUrls] = await Promise.all([
+      generateDocumentDownloadPresignedUrls(fileKeys),
+      generateVideoDownloadPresignedUrls(videoKeys)
+    ]);
     return answers.map((answer) => {
-      if (!isFileUpload(answer.answerData)) return answer;
-      const url = urls[answer.answerData.fileKey];
-      return url ? { ...answer, answerData: { ...answer.answerData, fileUrl: url } } : answer;
+      if (isFileUpload(answer.answerData)) {
+        const url = documentUrls[answer.answerData.fileKey];
+        return url ? { ...answer, answerData: { ...answer.answerData, fileUrl: url } } : answer;
+      }
+
+      if (!isVideoRecording(answer.answerData)) return answer;
+      const url = videoUrls[answer.answerData.storageKey];
+      return url ? { ...answer, answerData: { ...answer.answerData, playbackUrl: url } } : answer;
     });
   } catch (error) {
     console.error('enrichFileUploadAnswersArray error:', error);
@@ -172,16 +194,27 @@ async function enrichFileUploadAnswersObject(answers: Record<string, AnswerData>
   const fileKeys = Object.values(answers)
     .filter(isFileUpload)
     .map((d) => d.fileKey);
+  const videoKeys = Object.values(answers)
+    .filter(isVideoRecording)
+    .map((d) => d.storageKey);
 
-  if (fileKeys.length === 0) return answers;
+  if (fileKeys.length === 0 && videoKeys.length === 0) return answers;
 
   try {
-    const urls = await generateDocumentDownloadPresignedUrls(fileKeys);
+    const [documentUrls, videoUrls] = await Promise.all([
+      generateDocumentDownloadPresignedUrls(fileKeys),
+      generateVideoDownloadPresignedUrls(videoKeys)
+    ]);
     return Object.fromEntries(
       Object.entries(answers).map(([key, data]) => {
-        if (!isFileUpload(data)) return [key, data];
-        const url = urls[data.fileKey];
-        return url ? [key, { ...data, fileUrl: url }] : [key, data];
+        if (isFileUpload(data)) {
+          const url = documentUrls[data.fileKey];
+          return url ? [key, { ...data, fileUrl: url }] : [key, data];
+        }
+
+        if (!isVideoRecording(data)) return [key, data];
+        const url = videoUrls[data.storageKey];
+        return url ? [key, { ...data, playbackUrl: url }] : [key, data];
       })
     );
   } catch (error) {
@@ -190,6 +223,30 @@ async function enrichFileUploadAnswersObject(answers: Record<string, AnswerData>
   }
 }
 
+async function createVideoRecordingAssetUsages(answers: Array<TNewQuestionAnswer & { id?: number }>): Promise<void> {
+  const videoAnswers = answers.filter((answer) => isVideoRecording(answer.answerData));
+  if (videoAnswers.length === 0) return;
+
+  await Promise.all(
+    videoAnswers.map(async (answer) => {
+      if (!answer.id || !isVideoRecording(answer.answerData)) return;
+
+      const asset = await getAssetById(answer.answerData.assetId);
+      if (!asset) return;
+
+      await createAssetUsage({
+        organizationId: asset.organizationId,
+        assetId: answer.answerData.assetId,
+        targetType: 'submission_answer',
+        targetId: String(answer.id),
+        slotType: 'video_recording_answer',
+        slotKey: String(answer.questionId),
+        createdByProfileId: null
+      });
+    })
+  );
+}
+
 /**
  * Gets a submission by ID with question answers
  * @param submissionId Submission ID
@@ -563,6 +620,13 @@ export async function createSubmissionService(
         }
       }
 
+      if (answerData.type === 'VIDEO_RECORDING') {
+        const maxDurationSeconds = getVideoRecordingMaxDurationSeconds(question.settings);
+        if (answerData.durationSeconds > maxDurationSeconds + 2) {
+          throw new AppError('Recording exceeds the configured duration', ErrorCodes.VALIDATION_ERROR, 400);
+        }
+      }
+
       answerByQuestionId.set(ans.questionId, answerData);
 
       answerRows.push({
@@ -594,6 +658,7 @@ export async function createSubmissionService(
     }
 
     const insertedAnswers = answerRows.length > 0 ? await insertQuestionAnswersBatch(answerRows) : [];
+    await createVideoRecordingAssetUsages(insertedAnswers);
 
     if (shouldAutoGrade) {
       const dbQuestions = exerciseWithRelations.questions
diff --git a/apps/dashboard/.env.example b/apps/dashboard/.env.example
index 152fbb10..89a9bb43 100644
--- a/apps/dashboard/.env.example
+++ b/apps/dashboard/.env.example
@@ -40,3 +40,8 @@ PRIVATE_SERVER_URL=
 # The final domain is app.classroomio.com where `app` is PRIVATE_APP_SUBDOMAINS and `classroomio.com` is PRIVATE_APP_HOST
 PRIVATE_APP_HOST=classroomio.com
 PRIVATE_APP_SUBDOMAINS=app
+
+# Polar (SvelteKit routes: /api/polar/subscribe, portal, webhook, buy-tokens)
+POLAR_ACCESS_TOKEN=
+POLAR_WEBHOOK_SECRET=
+POLAR_TOKEN_PACK_PRODUCT_ID=
diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
index 40169299..2ace64b3 100644
--- a/apps/dashboard/package.json
+++ b/apps/dashboard/package.json
@@ -27,7 +27,8 @@
     "@cio/ui": "workspace:*",
     "@cio/utils": "workspace:*",
     "@lucide/svelte": "^0.545.0",
-    "@polar-sh/sveltekit": "^0.2.1",
+    "@polar-sh/sdk": "^0.47.1",
+    "@polar-sh/sveltekit": "^0.7.5",
     "@sveltejs/adapter-auto": "^3.0.0",
     "@sveltejs/adapter-node": "^2.0.0",
     "@sveltejs/adapter-vercel": "^4.0.0",
diff --git a/apps/dashboard/src/lib/components/Navigation/CustomLinks.svelte b/apps/dashboard/src/lib/components/Navigation/CustomLinks.svelte
index 77364cd6..4aedf929 100644
--- a/apps/dashboard/src/lib/components/Navigation/CustomLinks.svelte
+++ b/apps/dashboard/src/lib/components/Navigation/CustomLinks.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { resolve } from '$app/paths';
   import type { TCustomLinks } from './types';
   import { Button } from '@cio/ui/base/button';
 
diff --git a/apps/dashboard/src/lib/features/agent/api/credit-purchase.server.ts b/apps/dashboard/src/lib/features/agent/api/credit-purchase.server.ts
new file mode 100644
index 00000000..adc515c7
--- /dev/null
+++ b/apps/dashboard/src/lib/features/agent/api/credit-purchase.server.ts
@@ -0,0 +1,25 @@
+import type { TAgentCreditPurchase } from '@cio/utils/validation/agent';
+
+import { classroomio, type InferResponseType } from '$lib/utils/services/api';
+import { getApiKeyHeaders, safeServerApi } from '$lib/utils/services/api/server';
+
+type RecordPurchaseRequest = typeof classroomio.agent.credits.purchase.$post;
+type RecordPurchaseSuccess = Extract<InferResponseType<RecordPurchaseRequest>, { success: true }>;
+
+export class CreditPurchaseApiServer {
+  /**
+   * Record a token-pack purchase from the Polar webhook (server-side, API key auth).
+   */
+  static async recordPurchase(params: TAgentCreditPurchase) {
+    const result = await safeServerApi<RecordPurchaseSuccess>(() =>
+      classroomio.agent.credits.purchase.$post({ json: params }, getApiKeyHeaders())
+    );
+
+    if (!result.ok) {
+      console.error('Error recording credit purchase (server):', result);
+      return null;
+    }
+
+    return result.body.data;
+  }
+}
diff --git a/apps/dashboard/src/lib/features/ai-assistant/ai-course-chat.svelte b/apps/dashboard/src/lib/features/ai-assistant/ai-course-chat.svelte
index 1751137e..d1546076 100644
--- a/apps/dashboard/src/lib/features/ai-assistant/ai-course-chat.svelte
+++ b/apps/dashboard/src/lib/features/ai-assistant/ai-course-chat.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onDestroy, onMount } from 'svelte';
+  import { onDestroy, onMount, tick } from 'svelte';
   import ChatHeader from '$features/ai-assistant/chat-header.svelte';
   import ChatMessageList from '$features/ai-assistant/chat-message-list.svelte';
   import ChatInput from '$features/ai-assistant/chat-input.svelte';
@@ -13,7 +13,13 @@
     isAgentToolPart,
     type AgentToolPart
   } from '$features/ai-assistant/utils/tool-parts';
-  import { isAiAssistantOpen } from '$features/ai-assistant/utils/store';
+  import {
+    isAiAssistantOpen,
+    initialChatModel,
+    initialChatPrompt,
+    clearInitialChatModel,
+    clearInitialChatPrompt
+  } from '$features/ai-assistant/utils/store';
   import { page } from '$app/state';
   import { goto } from '$app/navigation';
   import { Chat } from '@ai-sdk/svelte';
@@ -23,9 +29,15 @@
   import { refreshExercisePageData } from '$features/course/utils/exercise-page-utils';
   import { getRequestBaseUrl, apiClient } from '$lib/utils/services/api';
   import { startResizablePanelDrag } from '$lib/utils/functions/resizable-panel';
+  import { openUpgradeModal } from '$lib/utils/functions/org';
+  import { isFreePlan } from '$lib/utils/store/org';
   import { aiAssistantApi } from '$features/ai-assistant/api/ai-assistant.svelte';
   import { profile } from '$lib/utils/store/user';
-  import type { AiAssistantMessage, UploadedDocument } from '$features/ai-assistant/utils/types';
+  import type {
+    AiAssistantMessage,
+    AiAssistantMessageMetadata,
+    UploadedDocument
+  } from '$features/ai-assistant/utils/types';
   import {
     AI_CHAT_MODEL_STORAGE_KEY,
     AI_COURSE_CHAT_DEFAULT_WIDTH,
@@ -33,7 +45,22 @@
     AI_COURSE_CHAT_MIN_WIDTH,
     AI_COURSE_CHAT_STORAGE_KEY
   } from '$features/ai-assistant/utils/constants';
-  import { AGENT_MODEL_IDS, DEFAULT_PICKER_MODEL_ID, type AgentModelId } from '@cio/utils/agent-models';
+  import {
+    AGENT_MODELS,
+    AGENT_MODEL_IDS,
+    DEFAULT_PICKER_MODEL_ID,
+    UI_PICKER_MODEL_IDS,
+    type AgentModelId
+  } from '@cio/utils/agent-models';
+
+  const CONTINUE_IMPLEMENTATION_PROMPT = 'Continue implementing the plan from where you left off.';
+
+  interface Props {
+    /** Course id from route / layout `data` (authoritative for this page). */
+    courseId: string;
+  }
+
+  let { courseId }: Props = $props();
 
   // Extract current lessonId/exerciseId from route params
   const currentLessonId = $derived(page.params?.lessonId as string | undefined);
@@ -43,8 +70,8 @@
   let uploadedDocument: UploadedDocument | null = $state(null);
   let isUploading = $state(false);
 
-  let usageFetched = $state(false);
-  let conversationsLoaded = $state(false);
+  let statusFetchedForCourseId: string | null = $state(null);
+  let conversationsLoadedForCourseId: string | null = $state(null);
   let activeConversationId: string | null = $state(null);
   let chatWidth = $state(AI_COURSE_CHAT_DEFAULT_WIDTH);
   let hasLoadedChatWidth = $state(false);
@@ -52,12 +79,18 @@
   let stopChatResize: (() => void) | null = null;
   let chatShellElement: HTMLDivElement | null = null;
   let selectedModel: AgentModelId = $state(DEFAULT_PICKER_MODEL_ID);
+  const paidModelIds = UI_PICKER_MODEL_IDS.filter((id) => !AGENT_MODELS[id].isFree);
 
   function isAgentModelId(value: unknown): value is AgentModelId {
     return typeof value === 'string' && (AGENT_MODEL_IDS as readonly string[]).includes(value);
   }
 
   function handleSelectModel(id: AgentModelId) {
+    if ($isFreePlan && paidModelIds.includes(id)) {
+      openUpgradeModal();
+      return;
+    }
+
     selectedModel = id;
 
     try {
@@ -67,8 +100,26 @@
     }
   }
 
+  function handleLockedModelSelect() {
+    openUpgradeModal();
+  }
+
   const tokenUsage = $derived(aiAssistantApi.status?.usage ?? null);
 
+  $effect(() => {
+    if (!$isFreePlan || !paidModelIds.includes(selectedModel)) {
+      return;
+    }
+
+    selectedModel = DEFAULT_PICKER_MODEL_ID;
+
+    try {
+      localStorage.setItem(AI_CHAT_MODEL_STORAGE_KEY, DEFAULT_PICKER_MODEL_ID);
+    } catch {
+      // localStorage unavailable
+    }
+  });
+
   function clampChatWidth(width: number) {
     return Math.min(AI_COURSE_CHAT_MAX_WIDTH, Math.max(AI_COURSE_CHAT_MIN_WIDTH, width));
   }
@@ -105,8 +156,6 @@
   }
 
   async function loadConversation(conversationId: string) {
-    const courseId = courseApi.course?.id;
-
     if (!courseId) return;
 
     await aiAssistantApi.loadConversation(conversationId);
@@ -114,14 +163,19 @@
     const conversation = aiAssistantApi.currentConversation;
 
     if (conversation) {
-      chat.messages = (conversation.messages ?? []) as AiAssistantMessage[];
+      const loadedMessages = (conversation.messages ?? []) as AiAssistantMessage[];
+      // Only overwrite in-memory messages if the loaded conversation actually has saved
+      // messages. An empty result means the conversation was just created and the first
+      // message hasn't been persisted yet — overwriting would wipe the optimistic message
+      // that chat.sendMessage already placed in the UI.
+      if (loadedMessages.length > 0) {
+        chat.messages = loadedMessages;
+      }
       setActiveConversationId(courseId, conversationId);
     }
   }
 
   async function startNewChat() {
-    const courseId = courseApi.course?.id;
-
     if (!courseId) return;
 
     const created = await aiAssistantApi.createConversation(courseId);
@@ -133,8 +187,6 @@
   }
 
   async function handleDeleteConversation(conversationId: string) {
-    const courseId = courseApi.course?.id;
-
     if (!courseId) return;
 
     await aiAssistantApi.deleteConversation(conversationId);
@@ -145,21 +197,35 @@
     }
   }
 
-  // Fetch status and load conversations when panel opens
+  // Fetch status and load conversations when the panel opens or route `courseId` changes
   $effect(() => {
-    const courseId = courseApi.course?.id;
+    if (!$isAiAssistantOpen) {
+      statusFetchedForCourseId = null;
+      conversationsLoadedForCourseId = null;
 
-    if ($isAiAssistantOpen && !usageFetched && courseId) {
-      usageFetched = true;
+      return;
+    }
+
+    if (!courseId) return;
+
+    if (statusFetchedForCourseId !== courseId) {
+      statusFetchedForCourseId = courseId;
       aiAssistantApi.fetchStatus(courseId);
     }
 
-    if ($isAiAssistantOpen && !conversationsLoaded && courseId) {
-      conversationsLoaded = true;
+    if (conversationsLoadedForCourseId !== courseId) {
+      conversationsLoadedForCourseId = courseId;
 
-      const savedId = getActiveConversationId(courseId);
+      const listForCourseId = courseId;
+      const savedId = getActiveConversationId(listForCourseId);
+
+      aiAssistantApi.listConversations(listForCourseId).then(() => {
+        if (courseId !== listForCourseId) return;
+
+        // If the initial-prompt flow already created and claimed a conversation while
+        // listConversations was in-flight, don't clobber it by loading another one.
+        if (activeConversationId) return;
 
-      aiAssistantApi.listConversations(courseId).then(() => {
         if (savedId) {
           loadConversation(savedId);
         } else if (aiAssistantApi.conversations.length > 0) {
@@ -167,20 +233,78 @@
         }
       });
     }
-
-    if (!$isAiAssistantOpen) {
-      usageFetched = false;
-      conversationsLoaded = false;
-    }
   });
 
+  function refreshCourseStateAfterChat() {
+    const profileId = $profile.id;
+
+    // Force refetch course data so new sections/lessons/exercises show in the UI
+    if (courseId && profileId) {
+      void courseApi.refreshCourse(courseId, profileId);
+    }
+
+    // Refresh current lesson content if viewing a lesson
+    if (courseId && currentLessonId) {
+      void lessonApi.get(courseId, currentLessonId);
+    }
+
+    // Refresh current exercise if viewing an exercise
+    if (courseId && currentExerciseId) {
+      void refreshExercisePageData(courseId, currentExerciseId);
+    }
+
+    // Refresh usage meter
+    if (courseId) {
+      void aiAssistantApi.fetchStatus(courseId);
+    }
+  }
+
+  async function persistFinishedChat(messages: AiAssistantMessage[], conversationId: string | null) {
+    if (conversationId) {
+      await aiAssistantApi.saveMessages(conversationId, messages);
+
+      // Generate a smart title after the first exchange (when title is still default)
+      const activeConv = aiAssistantApi.conversations.find((c) => c.id === conversationId);
+      const isDefaultTitle = !activeConv?.title || activeConv.title === 'New conversation';
+      const firstUserMsg = messages.find((message) => message.role === 'user');
+      const textPart = firstUserMsg?.parts?.find(
+        (part): part is Extract<typeof part, { type: 'text' }> => part.type === 'text'
+      );
+
+      if (isDefaultTitle && textPart?.text) {
+        await aiAssistantApi.generateTitle(conversationId, textPart.text.slice(0, 500));
+      }
+
+      return;
+    }
+
+    if (!courseId) return;
+
+    // No active conversation yet — create one and save
+    const created = await aiAssistantApi.createConversation(courseId);
+
+    if (!created) return;
+
+    setActiveConversationId(courseId, created.id);
+    await aiAssistantApi.saveMessages(created.id, messages);
+
+    const firstUserMsg = messages.find((message) => message.role === 'user');
+    const textPart = firstUserMsg?.parts?.find(
+      (part): part is Extract<typeof part, { type: 'text' }> => part.type === 'text'
+    );
+
+    if (textPart?.text) {
+      await aiAssistantApi.generateTitle(created.id, textPart.text.slice(0, 500));
+    }
+  }
+
   const chat = new Chat({
     id: 'ai-assistant',
     transport: new DefaultChatTransport({
       api: `${getRequestBaseUrl()}/agent/chat`,
       credentials: 'include',
       body: () => ({
-        courseId: courseApi.course?.id ?? '',
+        courseId,
         model: selectedModel,
         context: {
           lessonId: page.params?.lessonId,
@@ -190,64 +314,12 @@
       }),
       fetch: (input, init) => apiClient.request(input, init)
     }),
-    onFinish: async () => {
-      const courseId = courseApi.course?.id;
-      const profileId = $profile.id;
-
-      // Force refetch course data so new sections/lessons/exercises show in the UI
-      if (courseId && profileId) {
-        courseApi.refreshCourse(courseId, profileId);
-      }
-
-      // Refresh current lesson content if viewing a lesson
-      if (courseId && currentLessonId) {
-        lessonApi.get(courseId, currentLessonId);
-      }
-
-      // Refresh current exercise if viewing an exercise
-      if (courseId && currentExerciseId) {
-        await refreshExercisePageData(courseId, currentExerciseId);
-      }
-
-      // Refresh usage meter
-      if (courseId) {
-        aiAssistantApi.fetchStatus(courseId);
-      }
-
+    onFinish: () => {
       // Clear document attachment after message is processed
       uploadedDocument = null;
 
-      // Persist messages to the active conversation
-      if (activeConversationId) {
-        await aiAssistantApi.saveMessages(activeConversationId, chat.messages as AiAssistantMessage[]);
-
-        // Generate a smart title after the first exchange (when title is still default)
-        const activeConv = aiAssistantApi.conversations.find((c) => c.id === activeConversationId);
-        const isDefaultTitle = !activeConv?.title || activeConv.title === 'New conversation';
-        const firstUserMsg = chat.messages.find((m) => m.role === 'user');
-        const textPart = firstUserMsg?.parts?.find((p): p is Extract<typeof p, { type: 'text' }> => p.type === 'text');
-
-        if (isDefaultTitle && textPart?.text) {
-          await aiAssistantApi.generateTitle(activeConversationId, textPart.text.slice(0, 500));
-        }
-      } else if (courseId) {
-        // No active conversation yet — create one and save
-        const created = await aiAssistantApi.createConversation(courseId);
-
-        if (created) {
-          setActiveConversationId(courseId, created.id);
-          await aiAssistantApi.saveMessages(created.id, chat.messages as AiAssistantMessage[]);
-
-          const firstUserMsg = chat.messages.find((m) => m.role === 'user');
-          const textPart = firstUserMsg?.parts?.find(
-            (p): p is Extract<typeof p, { type: 'text' }> => p.type === 'text'
-          );
-
-          if (textPart?.text) {
-            await aiAssistantApi.generateTitle(created.id, textPart.text.slice(0, 500));
-          }
-        }
-      }
+      refreshCourseStateAfterChat();
+      void persistFinishedChat(chat.messages as AiAssistantMessage[], activeConversationId);
     }
   });
 
@@ -255,8 +327,8 @@
     'Upload a document to create a course',
     'Draft a lesson',
     'Generate questions from this lesson',
-    "Improve this lesson's text",
-    'Summarize this lesson'
+    'Summarize this lesson',
+    'Help me publish this course'
   ];
 
   function handleSend() {
@@ -274,8 +346,6 @@
 
     // Create conversation eagerly before sending the first message
     if (!activeConversationId) {
-      const courseId = courseApi.course?.id;
-
       if (!courseId) return;
 
       aiAssistantApi.createConversation(courseId).then((created) => {
@@ -304,8 +374,6 @@
   }
 
   async function handleFileSelect(file: File) {
-    const courseId = courseApi.course?.id;
-
     if (!courseId) return;
 
     const conversationId = await ensureActiveConversation(courseId);
@@ -339,8 +407,6 @@
 
     inputValue = '';
 
-    const courseId = courseApi.course?.id;
-
     if (!activeConversationId) {
       if (!courseId) return;
 
@@ -367,7 +433,7 @@
   }
 
   function handleResume() {
-    inputValue = 'Continue implementing the plan from where you left off.';
+    inputValue = CONTINUE_IMPLEMENTATION_PROMPT;
     handleSend();
   }
 
@@ -393,6 +459,8 @@
 
     if (!lastAssistantMsg) return null;
 
+    const continuation = (lastAssistantMsg.metadata as AiAssistantMessageMetadata | undefined)?.continuation;
+    const reachedStepLimit = continuation?.reason === 'step_limit';
     const allToolParts = lastAssistantMsg.parts.filter((part: Record<string, unknown>) =>
       isAgentToolPart(part)
     ) as AgentToolPart[];
@@ -417,10 +485,10 @@
     });
 
     const allDone = steps.every((s) => s.status === 'completed');
-    const isStopped = !isStreaming && !allDone;
+    const isStopped = !isStreaming && (!allDone || reachedStepLimit);
 
     // Hide the card once the agent finishes cleanly — the text response takes over
-    if (allDone && !isStreaming) return null;
+    if (allDone && !isStreaming && !reachedStepLimit) return null;
 
     const hasMutations = toolParts.some((part) => {
       const toolName = getAgentToolName(part);
@@ -496,6 +564,30 @@
     clearChatResizeListeners();
   });
 
+  $effect(() => {
+    const prompt = $initialChatPrompt;
+
+    if (!prompt || !$isAiAssistantOpen || !courseId) return;
+
+    const model = $initialChatModel;
+    clearInitialChatPrompt();
+    clearInitialChatModel();
+
+    tick().then(() => {
+      if (model && isAgentModelId(model)) {
+        if ($isFreePlan && paidModelIds.includes(model)) {
+          openUpgradeModal();
+          return;
+        }
+
+        handleSelectModel(model);
+      }
+
+      inputValue = prompt;
+      handleSend();
+    });
+  });
+
   $effect(() => {
     if (!hasLoadedChatWidth) {
       return;
@@ -525,7 +617,7 @@
     messages={chat.messages}
     status={chat.status}
     {isStreaming}
-    courseId={courseApi.course?.id ?? ''}
+    {courseId}
     {planExecutionState}
     {quickActions}
     onQuickAction={handleQuickAction}
@@ -544,12 +636,14 @@
     {uploadedDocument}
     {mentionItems}
     {selectedModel}
+    lockedModelIds={$isFreePlan ? paidModelIds : []}
     error={chat.error}
     onSend={handleSend}
     onStop={handleStop}
     onFileSelect={handleFileSelect}
     onRemoveDocument={handleRemoveDocument}
     onSelectModel={handleSelectModel}
+    onLockedModelSelect={handleLockedModelSelect}
   />
 {/snippet}
 
diff --git a/apps/dashboard/src/lib/features/ai-assistant/api/ai-assistant.svelte.ts b/apps/dashboard/src/lib/features/ai-assistant/api/ai-assistant.svelte.ts
index 0b570a2e..f821044a 100644
--- a/apps/dashboard/src/lib/features/ai-assistant/api/ai-assistant.svelte.ts
+++ b/apps/dashboard/src/lib/features/ai-assistant/api/ai-assistant.svelte.ts
@@ -105,6 +105,23 @@ class AiAssistantApi extends BaseApiWithErrors {
     });
   }
 
+  async generateCourseMeta(prompt: string): Promise<{ title: string; description: string } | null> {
+    let meta: { title: string; description: string } | null = null;
+
+    await this.execute<(typeof classroomio.agent)['generate-course-title']['$post']>({
+      requestFn: () =>
+        classroomio.agent['generate-course-title'].$post({
+          json: { prompt }
+        }),
+      logContext: 'generating course meta',
+      onSuccess: (result) => {
+        meta = (result as { data: { title: string; description: string } }).data;
+      }
+    });
+
+    return meta;
+  }
+
   async uploadDocument(
     file: File,
     courseId: string,
diff --git a/apps/dashboard/src/lib/features/ai-assistant/chat-header.svelte b/apps/dashboard/src/lib/features/ai-assistant/chat-header.svelte
index 6c5c9cc2..e9bf2127 100644
--- a/apps/dashboard/src/lib/features/ai-assistant/chat-header.svelte
+++ b/apps/dashboard/src/lib/features/ai-assistant/chat-header.svelte
@@ -8,6 +8,7 @@
   import { closeAiAssistant } from '$features/ai-assistant/utils/store';
   import { t } from '$lib/utils/functions/translations';
   import { IconButton } from '@cio/ui/custom/icon-button';
+  import { Button } from '@cio/ui/base/button';
 
   interface Conversation {
     id: string;
@@ -75,11 +76,19 @@
 
       <Popover.Root bind:open={historyPopoverOpen}>
         <Popover.Trigger>
-          <IconButton variant="outline" size="icon-xs" tooltip={$t('ai_assistant.chat_history')}>
-            <HistoryIcon size={16} />
-          </IconButton>
+          {#snippet child({ props })}
+            <Button
+              variant="outline"
+              size="icon-xs"
+              {...props}
+              aria-label={$t('ai_assistant.chat_history')}
+              title={$t('ai_assistant.chat_history')}
+            >
+              <HistoryIcon size={16} />
+            </Button>
+          {/snippet}
         </Popover.Trigger>
-        <Popover.Content class="ui:p-0! w-72" align="end">
+        <Popover.Content class="ui:p-0! z-200! w-72" align="center">
           <ChatHistoryPopover
             {conversations}
             {activeConversationId}
@@ -94,12 +103,13 @@
       </IconButton>
     </div>
   </div>
-  {#if tokenUsage && tokenUsage.allowance > 0}
-    {@const usagePercent = Math.min(100, Math.round((tokenUsage.used / tokenUsage.allowance) * 100))}
+  {#if tokenUsage && tokenUsage.used + tokenUsage.remaining > 0}
+    {@const totalBudget = tokenUsage.used + tokenUsage.remaining}
+    {@const usagePercent = Math.min(100, Math.round((tokenUsage.used / totalBudget) * 100))}
     <div class="mt-2">
       <div class="ui:text-muted-foreground flex justify-between text-[10px]">
         <span
-          >{tokenUsage.used.toLocaleString()} / {tokenUsage.allowance.toLocaleString()}
+          >{tokenUsage.used.toLocaleString()} / {totalBudget.toLocaleString()}
           {$t('ai_assistant.tokens_label')}</span
         >
         <span>{usagePercent}%</span>
diff --git a/apps/dashboard/src/lib/features/ai-assistant/chat-input.svelte b/apps/dashboard/src/lib/features/ai-assistant/chat-input.svelte
index 448f48d6..cc79ab90 100644
--- a/apps/dashboard/src/lib/features/ai-assistant/chat-input.svelte
+++ b/apps/dashboard/src/lib/features/ai-assistant/chat-input.svelte
@@ -9,9 +9,10 @@
   import LoaderIcon from '@lucide/svelte/icons/loader';
   import TableOfContentsIcon from '@lucide/svelte/icons/table-of-contents';
   import { t } from '$lib/utils/functions/translations';
-  import { isFreePlan } from '$lib/utils/store/org';
+  import { resolve } from '$app/paths';
+  import { currentOrgPath, isFreePlan } from '$lib/utils/store/org';
   import { openUpgradeModal } from '$lib/utils/functions/org';
-  import ModelPicker from '$features/ai-assistant/model-picker.svelte';
+  import { ModelPicker } from '@cio/ui/custom/model-picker';
   import type { AgentModelId } from '@cio/utils/agent-models';
 
   interface UploadedDocument {
@@ -28,11 +29,13 @@
     mentionItems: MentionItem[];
     uploadedDocument: UploadedDocument | null;
     selectedModel: AgentModelId;
+    lockedModelIds?: readonly AgentModelId[];
     onSend: () => void;
     onStop: () => void;
     onFileSelect: (file: File) => void;
     onRemoveDocument: () => void;
     onSelectModel: (id: AgentModelId) => void;
+    onLockedModelSelect?: (id: AgentModelId) => void;
   }
 
   let {
@@ -44,11 +47,13 @@
     mentionItems,
     uploadedDocument,
     selectedModel,
+    lockedModelIds = [],
     onSend,
     onStop,
     onFileSelect,
     onRemoveDocument,
-    onSelectModel
+    onSelectModel,
+    onLockedModelSelect
   }: Props = $props();
 
   let fileInputEl: HTMLInputElement | undefined = $state();
@@ -110,11 +115,29 @@
 <div class="border-t px-3 pt-3 pb-1.5">
   {#if isExhausted}
     <div
-      class="rounded border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-700 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-300"
+      class="flex flex-col gap-2 rounded border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-700 sm:flex-row sm:items-center sm:justify-between dark:border-amber-800 dark:bg-amber-950 dark:text-amber-300"
     >
-      {$t('ai_assistant.tokens_exhausted')}
+      <span>{$t('ai_assistant.tokens_exhausted')}</span>
+      {#if $currentOrgPath !== '#'}
+        <Button
+          variant="outline"
+          size="sm"
+          href={`${resolve(`${$currentOrgPath}/settings/ai-credits`)}#buy-tokens`}
+          class="w-full shrink-0 sm:w-auto"
+        >
+          {$t('ai_assistant.tokens_exhausted_buy_more')}
+        </Button>
+      {/if}
     </div>
   {:else}
+    {#if isStreaming}
+      <div
+        class="mb-2 rounded border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-700 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-300"
+      >
+        {$t('ai_assistant.agent_running_warning')}
+      </div>
+    {/if}
+
     {#if error}
       <div
         class="mb-2 rounded border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700 dark:border-red-800 dark:bg-red-950 dark:text-red-300"
@@ -181,7 +204,13 @@
               <SquareIcon size={12} />
             </Button>
           {:else}
-            <ModelPicker value={selectedModel} disabled={isStreaming} onChange={onSelectModel} />
+            <ModelPicker
+              value={selectedModel}
+              disabled={isStreaming}
+              {lockedModelIds}
+              onChange={onSelectModel}
+              onLockedSelect={onLockedModelSelect}
+            />
           {/if}
         {/snippet}
       </ChatTextarea>
diff --git a/apps/dashboard/src/lib/features/ai-assistant/message-bubble.svelte b/apps/dashboard/src/lib/features/ai-assistant/message-bubble.svelte
index d7079438..5cd27701 100644
--- a/apps/dashboard/src/lib/features/ai-assistant/message-bubble.svelte
+++ b/apps/dashboard/src/lib/features/ai-assistant/message-bubble.svelte
@@ -9,6 +9,8 @@
   import { renderMentions } from '$features/ai-assistant/utils/mentions';
   import PlanView from '$features/ai-assistant/plan-view.svelte';
   import { getToolLabel, getToolResultLabel } from '$features/ai-assistant/utils/tool-labels';
+  import type { CoursePlan } from '$features/ai-assistant/utils/course-plan';
+  import { t } from '$lib/utils/functions/translations';
   import {
     getAgentToolName,
     getAgentToolResult,
@@ -42,6 +44,7 @@
   }
 
   const messageAttachment = $derived((message.metadata as AiAssistantMessageMetadata | undefined)?.attachment);
+  const tokenUsage = $derived((message.metadata as AiAssistantMessageMetadata | undefined)?.tokenUsage);
 
   function isDeferredPlanPart(part: Record<string, unknown>) {
     if (!isAgentToolPart(part)) {
@@ -108,7 +111,7 @@
         {@const toolStatus = getAgentToolStatus(part)}
         {@const errorText = getPartErrorText(part)}
         {#if toolName === 'generate_course_plan' && toolStatus === 'completed'}
-          <PlanView plan={toolResult} onImplement={onImplementPlan} onAskChanges={onAskPlanChanges} />
+          <PlanView plan={toolResult as CoursePlan} onImplement={onImplementPlan} onAskChanges={onAskPlanChanges} />
         {:else}
           <div class="ui:bg-background/70 flex items-center gap-2 rounded-md px-2 py-1.5 text-xs">
             {#if toolStatus === 'completed' && toolName}
@@ -148,7 +151,7 @@
       {@const errorText = getPartErrorText(part)}
       {#if toolName === 'generate_course_plan' && toolStatus === 'completed'}
         <div class="mt-3">
-          <PlanView plan={toolResult} onImplement={onImplementPlan} onAskChanges={onAskPlanChanges} />
+          <PlanView plan={toolResult as CoursePlan} onImplement={onImplementPlan} onAskChanges={onAskPlanChanges} />
         </div>
       {:else}
         <div class="ui:bg-background/70 mt-3 flex items-center gap-2 rounded-md px-2 py-1.5 text-xs">
@@ -180,6 +183,15 @@
         </div>
       {/if}
     {/each}
+
+    {#if message.role === 'assistant' && tokenUsage}
+      <div class="mt-1 flex justify-end">
+        <span class="ui:text-muted-foreground text-[10px]">
+          {tokenUsage.totalTokens.toLocaleString()}
+          {$t('ai_assistant.tokens_label')}
+        </span>
+      </div>
+    {/if}
   </div>
 </div>
 
diff --git a/apps/dashboard/src/lib/features/ai-assistant/model-picker.svelte b/apps/dashboard/src/lib/features/ai-assistant/model-picker.svelte
deleted file mode 100644
index b1b25347..00000000
--- a/apps/dashboard/src/lib/features/ai-assistant/model-picker.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script lang="ts">
-  import * as Popover from '@cio/ui/base/popover';
-  import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
-  import CheckIcon from '@lucide/svelte/icons/check';
-  import { AGENT_MODELS, UI_PICKER_MODEL_IDS, type AgentModelId } from '@cio/utils/agent-models';
-
-  interface Props {
-    value: AgentModelId;
-    disabled?: boolean;
-    onChange: (id: AgentModelId) => void;
-  }
-
-  let { value, disabled = false, onChange }: Props = $props();
-
-  let open = $state(false);
-
-  function handleSelect(id: AgentModelId) {
-    onChange(id);
-    open = false;
-  }
-</script>
-
-<Popover.Root bind:open>
-  <Popover.Trigger
-    {disabled}
-    class="ui:text-muted-foreground hover:ui:bg-muted ui:hover:text-foreground flex shrink-0 items-center gap-1 rounded-md px-2 py-1 text-xs transition-colors disabled:pointer-events-none disabled:opacity-40"
-  >
-    <span class="truncate">{AGENT_MODELS[value].label}</span>
-    <ChevronDownIcon size={12} />
-  </Popover.Trigger>
-
-  <Popover.Content class="ui:p-0! ui:z-[110] w-48" align="end" side="top">
-    <div class="py-1">
-      {#each UI_PICKER_MODEL_IDS as id (id)}
-        {@const isSelected = id === value}
-        <button
-          type="button"
-          onclick={() => handleSelect(id)}
-          class="hover:ui:bg-muted flex w-full items-center justify-between gap-2 px-3 py-2 text-left text-xs transition-colors"
-        >
-          <span class="min-w-0 truncate">{AGENT_MODELS[id].label}</span>
-          {#if isSelected}
-            <CheckIcon size={14} class="ui:text-primary shrink-0" />
-          {/if}
-        </button>
-      {/each}
-    </div>
-  </Popover.Content>
-</Popover.Root>
diff --git a/apps/dashboard/src/lib/features/ai-assistant/plan-view.svelte b/apps/dashboard/src/lib/features/ai-assistant/plan-view.svelte
index bdae91d3..aaa8ead3 100644
--- a/apps/dashboard/src/lib/features/ai-assistant/plan-view.svelte
+++ b/apps/dashboard/src/lib/features/ai-assistant/plan-view.svelte
@@ -6,6 +6,7 @@
   import PencilIcon from '@lucide/svelte/icons/pencil';
   import { Button } from '@cio/ui/base/button';
   import { SvelteSet } from 'svelte/reactivity';
+  import type { CoursePlan } from './utils/course-plan';
 
   /** Token cost estimation heuristics (tokens per item) */
   const TOKEN_COST_ESTIMATES = {
@@ -14,25 +15,6 @@
     EXERCISE_CREATE: 1500
   } as const;
 
-  interface PlanItem {
-    type: 'lesson' | 'exercise';
-    title: string;
-    description: string;
-    order: number;
-    hasExercise: boolean;
-  }
-
-  interface PlanSection {
-    title: string;
-    order: number;
-    items: PlanItem[];
-  }
-
-  interface CoursePlan {
-    title: string;
-    sections: PlanSection[];
-  }
-
   interface Props {
     plan: CoursePlan;
     onImplement: (editedPlan: CoursePlan) => void;
diff --git a/apps/dashboard/src/lib/features/ai-assistant/utils/course-plan.ts b/apps/dashboard/src/lib/features/ai-assistant/utils/course-plan.ts
new file mode 100644
index 00000000..564b43a0
--- /dev/null
+++ b/apps/dashboard/src/lib/features/ai-assistant/utils/course-plan.ts
@@ -0,0 +1,18 @@
+export interface CoursePlanSectionItem {
+  type: 'lesson' | 'exercise';
+  title: string;
+  description: string;
+  order: number;
+  hasExercise: boolean;
+}
+
+export interface CoursePlanSection {
+  title: string;
+  order: number;
+  items: CoursePlanSectionItem[];
+}
+
+export interface CoursePlan {
+  title: string;
+  sections: CoursePlanSection[];
+}
diff --git a/apps/dashboard/src/lib/features/ai-assistant/utils/store.ts b/apps/dashboard/src/lib/features/ai-assistant/utils/store.ts
index d238501d..703ece08 100644
--- a/apps/dashboard/src/lib/features/ai-assistant/utils/store.ts
+++ b/apps/dashboard/src/lib/features/ai-assistant/utils/store.ts
@@ -1,4 +1,5 @@
 import { writable } from 'svelte/store';
+import type { AgentModelId } from '@cio/utils/agent-models';
 
 /** Controls whether the AI assistant right sidebar Sheet is open. */
 export const isAiAssistantOpen = writable(false);
@@ -14,3 +15,23 @@ export function closeAiAssistant() {
 export function toggleAiAssistant() {
   isAiAssistantOpen.update((open) => !open);
 }
+
+/** Carries a prompt from the home page course creator into the AI chat on first open. */
+export const initialChatPrompt = writable<string | null>(null);
+export const initialChatModel = writable<AgentModelId | null>(null);
+
+export function setInitialChatPrompt(prompt: string) {
+  initialChatPrompt.set(prompt);
+}
+
+export function setInitialChatModel(model: AgentModelId) {
+  initialChatModel.set(model);
+}
+
+export function clearInitialChatPrompt() {
+  initialChatPrompt.set(null);
+}
+
+export function clearInitialChatModel() {
+  initialChatModel.set(null);
+}
diff --git a/apps/dashboard/src/lib/features/ai-assistant/utils/tool-labels.ts b/apps/dashboard/src/lib/features/ai-assistant/utils/tool-labels.ts
index 51b570f6..147265e6 100644
--- a/apps/dashboard/src/lib/features/ai-assistant/utils/tool-labels.ts
+++ b/apps/dashboard/src/lib/features/ai-assistant/utils/tool-labels.ts
@@ -8,7 +8,9 @@ const TOOL_LABELS: Record<string, string> = {
   update_lesson: 'Updating lesson',
   update_lesson_content: 'Writing lesson content',
   create_exercise: 'Creating exercise',
+  create_exercise_section: 'Creating exercise section',
   update_exercise: 'Updating exercise',
+  update_exercise_section: 'Updating exercise section',
   add_questions: 'Adding questions',
   update_questions: 'Updating questions',
   reorder_content: 'Reordering content',
@@ -40,6 +42,8 @@ export function getToolResultLabel(toolName: string, result: unknown): string {
       return `Created exercise with ${r.questionCount} questions`;
     case 'update_exercise':
       return `Updated exercise: ${r.title}`;
+    case 'update_exercise_section':
+      return `Updated exercise section: ${r.title}`;
     case 'add_questions':
       return `Added ${r.addedCount} questions`;
     case 'update_questions':
@@ -78,7 +82,9 @@ export const MUTATION_TOOLS = [
   'update_lesson',
   'update_lesson_content',
   'create_exercise',
+  'create_exercise_section',
   'update_exercise',
+  'update_exercise_section',
   'add_questions',
   'update_questions',
   'reorder_content',
diff --git a/apps/dashboard/src/lib/features/ai-assistant/utils/tool-parts.ts b/apps/dashboard/src/lib/features/ai-assistant/utils/tool-parts.ts
index 992ea5f7..5b002a63 100644
--- a/apps/dashboard/src/lib/features/ai-assistant/utils/tool-parts.ts
+++ b/apps/dashboard/src/lib/features/ai-assistant/utils/tool-parts.ts
@@ -12,12 +12,18 @@ export interface AgentToolPart {
   };
 }
 
-export function isAgentToolPart(part: Record<string, unknown>): part is AgentToolPart {
-  if (part.type === 'tool-invocation') {
+export function isAgentToolPart(part: unknown): part is AgentToolPart {
+  if (!part || typeof part !== 'object') {
+    return false;
+  }
+
+  const record = part as Record<string, unknown>;
+
+  if (record.type === 'tool-invocation') {
     return true;
   }
 
-  return typeof part.type === 'string' && part.type.startsWith('tool-');
+  return typeof record.type === 'string' && record.type.startsWith('tool-');
 }
 
 export function getAgentToolName(part: AgentToolPart): string | null {
diff --git a/apps/dashboard/src/lib/features/ai-assistant/utils/types.ts b/apps/dashboard/src/lib/features/ai-assistant/utils/types.ts
index 35039a8d..fc3de202 100644
--- a/apps/dashboard/src/lib/features/ai-assistant/utils/types.ts
+++ b/apps/dashboard/src/lib/features/ai-assistant/utils/types.ts
@@ -11,8 +11,22 @@ export interface AiAssistantMessageAttachment {
   name: string;
 }
 
+export interface AiAssistantMessageTokenUsage {
+  promptTokens: number;
+  completionTokens: number;
+  totalTokens: number;
+}
+
+export interface AiAssistantMessageContinuation {
+  reason: 'step_limit';
+  maxSteps: number;
+  finishReason?: string;
+}
+
 export interface AiAssistantMessageMetadata {
   attachment?: AiAssistantMessageAttachment;
+  tokenUsage?: AiAssistantMessageTokenUsage;
+  continuation?: AiAssistantMessageContinuation;
 }
 
 export type AiAssistantMessage = UIMessage<AiAssistantMessageMetadata>;
@@ -47,3 +61,7 @@ export type AgentConversationCreateData = AgentConversationCreateSuccess['data']
 export type AgentHistorySaveRequest = (typeof classroomio.agent.history)[':conversationId']['$put'];
 
 export type AgentHistoryDeleteRequest = (typeof classroomio.agent.history)[':conversationId']['$delete'];
+
+export type GenerateCourseTitleRequest = (typeof classroomio.agent)['generate-course-title']['$post'];
+export type GenerateCourseTitleSuccess = Extract<InferResponseType<GenerateCourseTitleRequest>, { success: true }>;
+export type GenerateCourseTitleData = GenerateCourseTitleSuccess['data'];
diff --git a/apps/dashboard/src/lib/features/course/api/course.svelte.ts b/apps/dashboard/src/lib/features/course/api/course.svelte.ts
index f91b1402..5bf8ca6d 100644
--- a/apps/dashboard/src/lib/features/course/api/course.svelte.ts
+++ b/apps/dashboard/src/lib/features/course/api/course.svelte.ts
@@ -349,7 +349,10 @@ export class CourseApi extends BaseApiWithErrors {
    * @param fields Course creation fields (title, description, type)
    * @returns The created course data or null on error
    */
-  async create(fields: { title: string; description: string; type: TCourseType }) {
+  async create(
+    fields: { title: string; description: string; type: TCourseType },
+    onCreated?: (courseId: string) => void
+  ) {
     const org = get(currentOrg);
     const userProfile = get(profile);
 
@@ -390,11 +393,12 @@ export class CourseApi extends BaseApiWithErrors {
             user_email: userProfile.email
           });
 
-          // Navigate to the new course
-          goto(resolve(`/courses/${newCourse.id}`, {}));
-
-          // Show success message
-          snackbar.success('Course created successfully');
+          if (onCreated) {
+            onCreated(newCourse.id);
+          } else {
+            goto(resolve(`/courses/${newCourse.id}`, {}));
+            snackbar.success('Course created successfully');
+          }
 
           // Mark as successful
           this.success = true;
diff --git a/apps/dashboard/src/lib/features/course/api/exercise.svelte.ts b/apps/dashboard/src/lib/features/course/api/exercise.svelte.ts
index a6b0ef86..6a5e2d83 100644
--- a/apps/dashboard/src/lib/features/course/api/exercise.svelte.ts
+++ b/apps/dashboard/src/lib/features/course/api/exercise.svelte.ts
@@ -6,10 +6,25 @@ import type {
   Exercise,
   GetExerciseRequest,
   SubmitExerciseRequest,
-  UpdateExerciseRequest
+  UpdateExerciseRequest,
+  VideoRecordingPlaybackRequest,
+  VideoRecordingUploadCompleteRequest,
+  VideoRecordingUploadInitRequest
 } from '../utils/types';
-import type { TExerciseCreate, TExerciseSubmissionCreate, TExerciseUpdate } from '@cio/utils/validation/exercise';
-import { ZExerciseCreate, ZExerciseSubmissionCreate, ZExerciseUpdate } from '@cio/utils/validation/exercise';
+import type {
+  TExerciseCreate,
+  TExerciseSubmissionCreate,
+  TExerciseUpdate,
+  TExerciseVideoRecordingUploadComplete,
+  TExerciseVideoRecordingUploadInit
+} from '@cio/utils/validation/exercise';
+import {
+  ZExerciseCreate,
+  ZExerciseSubmissionCreate,
+  ZExerciseUpdate,
+  ZExerciseVideoRecordingUploadComplete,
+  ZExerciseVideoRecordingUploadInit
+} from '@cio/utils/validation/exercise';
 
 import { mapZodErrorsToTranslations } from '$lib/utils/validation';
 import { snackbar } from '$features/ui/snackbar/store';
@@ -32,7 +47,7 @@ export class ExerciseApi extends BaseApiWithErrors {
       logContext: 'fetching exercise',
       onSuccess: (response) => {
         if (response.data) {
-          this.exercise = response.data as Exercise;
+          this.exercise = response.data as unknown as Exercise;
           this.success = true;
           this.errors = {};
         }
@@ -64,7 +79,7 @@ export class ExerciseApi extends BaseApiWithErrors {
       logContext: 'creating exercise',
       onSuccess: (response) => {
         if (response.data) {
-          this.exercise = response.data as Exercise;
+          this.exercise = response.data as unknown as Exercise;
           snackbar.success('Exercise created successfully');
           this.success = true;
           this.errors = {};
@@ -106,7 +121,7 @@ export class ExerciseApi extends BaseApiWithErrors {
       logContext: 'updating exercise',
       onSuccess: (response) => {
         if (response.data) {
-          this.exercise = response.data as Exercise;
+          this.exercise = response.data as unknown as Exercise;
           this.success = true;
           this.errors = {};
         }
@@ -193,6 +208,71 @@ export class ExerciseApi extends BaseApiWithErrors {
     });
   }
 
+  async initVideoRecordingUpload(
+    courseId: string,
+    exerciseId: string,
+    questionId: number | string,
+    fields: TExerciseVideoRecordingUploadInit
+  ) {
+    const result = ZExerciseVideoRecordingUploadInit.safeParse(fields);
+    if (!result.success) {
+      this.errors = mapZodErrorsToTranslations(result.error, 'exercise');
+      return null;
+    }
+
+    return await this.execute<VideoRecordingUploadInitRequest>({
+      requestFn: () =>
+        classroomio.course[':courseId'].exercise[':exerciseId'].question[':questionId'][
+          'video-recording'
+        ].upload.init.$post({
+          param: { courseId, exerciseId, questionId: String(questionId) },
+          json: result.data
+        }),
+      logContext: 'initializing video recording upload'
+    });
+  }
+
+  async completeVideoRecordingUpload(
+    courseId: string,
+    exerciseId: string,
+    questionId: number | string,
+    fields: TExerciseVideoRecordingUploadComplete
+  ) {
+    const result = ZExerciseVideoRecordingUploadComplete.safeParse(fields);
+    if (!result.success) {
+      this.errors = mapZodErrorsToTranslations(result.error, 'exercise');
+      return null;
+    }
+
+    return await this.execute<VideoRecordingUploadCompleteRequest>({
+      requestFn: () =>
+        classroomio.course[':courseId'].exercise[':exerciseId'].question[':questionId'][
+          'video-recording'
+        ].upload.complete.$post({
+          param: { courseId, exerciseId, questionId: String(questionId) },
+          json: result.data
+        }),
+      logContext: 'completing video recording upload'
+    });
+  }
+
+  async getVideoRecordingPlaybackUrl(
+    courseId: string,
+    exerciseId: string,
+    submissionId: string,
+    questionId: number | string
+  ) {
+    return await this.execute<VideoRecordingPlaybackRequest>({
+      requestFn: () =>
+        classroomio.course[':courseId'].exercise[':exerciseId'].submission[':submissionId'].question[':questionId'][
+          'video-recording'
+        ].playback.$get({
+          param: { courseId, exerciseId, submissionId, questionId: String(questionId) }
+        }),
+      logContext: 'getting video recording playback URL'
+    });
+  }
+
   /**
    * Creates an exercise from a template
    * @param courseId Course ID
@@ -220,7 +300,7 @@ export class ExerciseApi extends BaseApiWithErrors {
       logContext: 'creating exercise from template',
       onSuccess: (response) => {
         if (response.data) {
-          this.exercise = response.data as Exercise;
+          this.exercise = response.data as unknown as Exercise;
           snackbar.success('Exercise created successfully');
           this.success = true;
           this.errors = {};
diff --git a/apps/dashboard/src/lib/features/course/api/lesson.svelte.ts b/apps/dashboard/src/lib/features/course/api/lesson.svelte.ts
index 639051c1..66b73527 100644
--- a/apps/dashboard/src/lib/features/course/api/lesson.svelte.ts
+++ b/apps/dashboard/src/lib/features/course/api/lesson.svelte.ts
@@ -163,9 +163,20 @@ export class LessonApi extends BaseApiWithErrors {
           json: result.data
         }),
       logContext: 'updating lesson',
+      onSuccess: () => {
+        this.errors = {};
+      },
       onError: (result) => {
-        console.log('onError', result);
-        snackbar.error('snackbar.lessons.lesson_update_failed');
+        if (typeof result === 'string') {
+          snackbar.error('snackbar.lessons.lesson_update_failed');
+          return;
+        }
+        if ('error' in result && 'field' in result && result.field) {
+          this.errors[result.field] = result.error;
+          snackbar.error(result.error);
+        } else {
+          snackbar.error('snackbar.lessons.lesson_update_failed');
+        }
       }
     });
 
diff --git a/apps/dashboard/src/lib/features/course/components/card-dropdown.svelte b/apps/dashboard/src/lib/features/course/components/card-dropdown.svelte
index a89bd91c..4f48e376 100644
--- a/apps/dashboard/src/lib/features/course/components/card-dropdown.svelte
+++ b/apps/dashboard/src/lib/features/course/components/card-dropdown.svelte
@@ -2,7 +2,10 @@
   import * as DropdownMenu from '@cio/ui/base/dropdown-menu';
   import EllipsisVerticalIcon from '@lucide/svelte/icons/ellipsis-vertical';
   import ExternalLinkIcon from '@lucide/svelte/icons/external-link';
+  import CopyIcon from '@lucide/svelte/icons/copy';
   import { copyCourseModal, deleteCourseModal } from '$features/course/utils/store';
+  import { copyPublicCoursePageUrl, openCoursePreview } from '$features/course/utils/course-preview';
+  import { currentOrgDomain } from '$lib/utils/store/org';
   import { IconButton } from '@cio/ui/custom/icon-button';
   import { t } from '$lib/utils/functions/translations';
 
@@ -14,9 +17,23 @@
     title: string;
     description: string;
     isPublished?: boolean;
+    courseType?: string | null;
+    slug?: string;
+    /** Compact menu for LMS course cards */
+    lmsPublicQuickOnly?: boolean;
   }
 
-  let { id, title, description, isPublished = false }: Props = $props();
+  let {
+    id,
+    title,
+    description,
+    isPublished = false,
+    courseType = null,
+    slug = '',
+    lmsPublicQuickOnly = false
+  }: Props = $props();
+
+  const showPublicCourseLinks = $derived(isPublished && courseType === 'PUBLIC' && slug.trim().length > 0);
 
   function redirect(url: string) {
     goto(resolve(url, {}));
@@ -43,40 +60,65 @@
     $copyCourseModal.description = description;
   }
 
-  function handleOpenCourseSite() {
-    window.open(`/courses/${id}`, '_blank');
+  function handleOpenPublicCourse() {
+    openCoursePreview({
+      courseId: id,
+      courseSlug: slug,
+      currentOrgDomain: $currentOrgDomain
+    });
+  }
+
+  async function handleCopyCourseUrl() {
+    await copyPublicCoursePageUrl(slug, $currentOrgDomain);
   }
 </script>
 
-<DropdownMenu.Root>
-  <DropdownMenu.Trigger
-    class="ui:data-[state=open]:opacity-100 absolute top-6 right-6 z-40 flex items-center justify-center opacity-0 transition-all delay-150 duration-200 ease-in-out group-hover:opacity-100"
-    onclick={(e) => e.stopPropagation()}
-  >
-    <IconButton variant="outline">
-      <EllipsisVerticalIcon size={16} />
-    </IconButton>
-  </DropdownMenu.Trigger>
-  <DropdownMenu.Content align="end">
-    {#if isPublished}
-      <DropdownMenu.Item onclick={handleOpenCourseSite}>
-        <ExternalLinkIcon size={16} class="mr-2" />
-        {$t('courses.course_card.context_menu.open_course_site')}
-      </DropdownMenu.Item>
-      <DropdownMenu.Separator />
-    {/if}
-    <DropdownMenu.Item onclick={handleCloneCourse}>
-      {$t('courses.course_card.context_menu.clone')}
-    </DropdownMenu.Item>
-    <DropdownMenu.Item onclick={handleShareCourse}>
-      {$t('courses.course_card.context_menu.share')}
-    </DropdownMenu.Item>
-    <DropdownMenu.Item onclick={handleInvite}>
-      {$t('courses.course_card.context_menu.invite')}
-    </DropdownMenu.Item>
-    <DropdownMenu.Separator />
-    <DropdownMenu.Item class="text-red-600" onclick={handleDeleteCourse}>
-      {$t('courses.course_card.context_menu.delete')}
-    </DropdownMenu.Item>
-  </DropdownMenu.Content>
-</DropdownMenu.Root>
+{#if lmsPublicQuickOnly ? showPublicCourseLinks : true}
+  <DropdownMenu.Root>
+    <DropdownMenu.Trigger
+      class="ui:data-[state=open]:opacity-100 absolute top-6 right-6 z-40 flex items-center justify-center opacity-0 transition-all delay-150 duration-200 ease-in-out group-hover:opacity-100"
+      onclick={(e) => e.stopPropagation()}
+    >
+      <IconButton variant="outline">
+        <EllipsisVerticalIcon size={16} />
+      </IconButton>
+    </DropdownMenu.Trigger>
+    <DropdownMenu.Content align="end">
+      {#if lmsPublicQuickOnly}
+        <DropdownMenu.Item onclick={handleOpenPublicCourse}>
+          <ExternalLinkIcon size={16} class="mr-2" />
+          {$t('courses.course_card.context_menu.open_public_course')}
+        </DropdownMenu.Item>
+        <DropdownMenu.Item onclick={() => void handleCopyCourseUrl()}>
+          <CopyIcon size={16} class="mr-2" />
+          {$t('courses.course_card.context_menu.copy_course_url')}
+        </DropdownMenu.Item>
+      {:else}
+        {#if showPublicCourseLinks}
+          <DropdownMenu.Item onclick={handleOpenPublicCourse}>
+            <ExternalLinkIcon size={16} class="mr-2" />
+            {$t('courses.course_card.context_menu.open_public_course')}
+          </DropdownMenu.Item>
+          <DropdownMenu.Item onclick={() => void handleCopyCourseUrl()}>
+            <CopyIcon size={16} class="mr-2" />
+            {$t('courses.course_card.context_menu.copy_course_url')}
+          </DropdownMenu.Item>
+          <DropdownMenu.Separator />
+        {/if}
+        <DropdownMenu.Item onclick={handleCloneCourse}>
+          {$t('courses.course_card.context_menu.clone')}
+        </DropdownMenu.Item>
+        <DropdownMenu.Item onclick={handleShareCourse}>
+          {$t('courses.course_card.context_menu.share')}
+        </DropdownMenu.Item>
+        <DropdownMenu.Item onclick={handleInvite}>
+          {$t('courses.course_card.context_menu.invite')}
+        </DropdownMenu.Item>
+        <DropdownMenu.Separator />
+        <DropdownMenu.Item class="text-red-600" onclick={handleDeleteCourse}>
+          {$t('courses.course_card.context_menu.delete')}
+        </DropdownMenu.Item>
+      {/if}
+    </DropdownMenu.Content>
+  </DropdownMenu.Root>
+{/if}
diff --git a/apps/dashboard/src/lib/features/course/components/card.svelte b/apps/dashboard/src/lib/features/course/components/card.svelte
index f4349642..e8ff50c8 100644
--- a/apps/dashboard/src/lib/features/course/components/card.svelte
+++ b/apps/dashboard/src/lib/features/course/components/card.svelte
@@ -7,6 +7,7 @@
   import CircleDotIcon from '@lucide/svelte/icons/circle-dot';
   import ShieldCheckIcon from '@lucide/svelte/icons/shield-check';
   import TrendingUpIcon from '@lucide/svelte/icons/trending-up';
+  import GlobeIcon from '@lucide/svelte/icons/globe';
   import ArrowRightIcon from '@lucide/svelte/icons/arrow-right';
 
   import { Button } from '@cio/ui/base/button';
@@ -165,6 +166,18 @@
       : undefined
   );
 
+  const visibilityBadge = $derived(
+    type === 'PUBLIC'
+      ? {
+          label: $t('courses.course_card.public_badge'),
+          icon: GlobeIcon,
+          iconClass: 'custom ui:text-primary size-3.5 shrink-0'
+        }
+      : undefined
+  );
+
+  const showLmsPublicCourseMenu = $derived(isLMS && type === 'PUBLIC' && !!slug?.trim() && isPublished);
+
   const complianceStatusKey = $derived(
     isLMS && type === 'COMPLIANCE' && !isExplore
       ? getStudentCourseComplianceStatusKey(course as UserEnrolledCourses[number])
@@ -202,6 +215,7 @@
   {title}
   {description}
   {typeBadge}
+  {visibilityBadge}
   class="group relative"
 >
   {#snippet media()}
@@ -211,8 +225,12 @@
   {#snippet overlay()}
     {#if actions}
       {@render actions()}
-    {:else if !isLMS && !isOnLandingPage}
-      <CardDropdown {id} {title} {description} {isPublished} />
+    {:else if !isOnLandingPage}
+      {#if !isLMS}
+        <CardDropdown {id} {title} {description} {isPublished} courseType={type} {slug} />
+      {:else if showLmsPublicCourseMenu}
+        <CardDropdown {id} {title} {description} {isPublished} courseType={type} {slug} lmsPublicQuickOnly={true} />
+      {/if}
     {/if}
   {/snippet}
 
diff --git a/apps/dashboard/src/lib/features/course/components/course-header.svelte b/apps/dashboard/src/lib/features/course/components/course-header.svelte
index 5407caea..12911e26 100644
--- a/apps/dashboard/src/lib/features/course/components/course-header.svelte
+++ b/apps/dashboard/src/lib/features/course/components/course-header.svelte
@@ -16,11 +16,12 @@
   import { openCoursePreview } from '$features/course/utils/course-preview';
   import { toggleAiAssistant } from '$features/ai-assistant/utils/store';
   import { t } from '$lib/utils/functions/translations';
-  import { isFreePlan } from '$lib/utils/store/org';
   import CoursePublishBadge from './course-publish-badge.svelte';
+  import CoursePublicBadge from './course-public-badge.svelte';
 
   const siteName = $derived($currentOrg.siteName);
   const showCoursePublishBadge = $derived(!$isStudentExperience);
+  const isPublicCourse = $derived(courseApi.course?.type === 'PUBLIC');
 
   $effect(() => {
     if (!siteName) return;
@@ -38,7 +39,9 @@
 </script>
 
 <header
-  class="border-border ui:bg-background sticky top-0 z-100 flex h-12 w-full shrink-0 items-center gap-2 border-b backdrop-blur transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-8"
+  class="border-border ui:bg-background sticky top-0 z-100 flex w-full shrink-0 items-center gap-2 border-b backdrop-blur transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-8 {isPublicCourse
+    ? 'h-auto min-h-14 py-1.5'
+    : 'h-12'}"
 >
   <div class="flex w-full items-center gap-2 px-4">
     <Sidebar.Trigger />
@@ -47,24 +50,34 @@
       <Separator orientation="vertical" />
     </div>
 
-    <div class="flex min-w-0 items-center gap-2">
-      <p class="max-w-2xs truncate text-sm font-medium">
-        {courseApi.course?.title || ''}
-      </p>
+    <div class="flex w-[60%] min-w-0 flex-1 flex-col justify-center gap-0.5">
+      <div class="flex min-w-0 items-center gap-2">
+        <p class="max-w-xs truncate text-sm font-medium">
+          {courseApi.course?.title || ''}
+        </p>
 
-      {#if showCoursePublishBadge}
-        <CoursePublishBadge isPublished={courseApi.course?.isPublished} />
+        {#if isPublicCourse}
+          <CoursePublicBadge class="shrink-0" />
+        {/if}
+
+        {#if showCoursePublishBadge}
+          <CoursePublishBadge isPublished={courseApi.course?.isPublished ?? false} />
+        {/if}
+      </div>
+
+      {#if isPublicCourse}
+        <p class="ui:text-muted-foreground max-w-xl truncate text-xs">
+          {$t('course.header.public_course_helper')}
+        </p>
       {/if}
     </div>
 
     <span class="grow"></span>
 
-    {#if !$isFreePlan}
-      <Button variant="outline" size="sm" onclick={toggleAiAssistant}>
-        <SparklesIcon size={14} />
-        {$t('course.navItems.nav_ai_assistant')}
-      </Button>
-    {/if}
+    <Button variant="outline" size="sm" onclick={toggleAiAssistant}>
+      <SparklesIcon size={14} />
+      {$t('course.navItems.nav_ai_assistant')}
+    </Button>
 
     <Popover.Root>
       <Popover.Trigger>
diff --git a/apps/dashboard/src/lib/features/course/components/course-list-row.svelte b/apps/dashboard/src/lib/features/course/components/course-list-row.svelte
index 6201152f..e40a68c1 100644
--- a/apps/dashboard/src/lib/features/course/components/course-list-row.svelte
+++ b/apps/dashboard/src/lib/features/course/components/course-list-row.svelte
@@ -11,8 +11,13 @@
   import { Image } from '$features/ui';
   import { t } from '$lib/utils/functions/translations';
   import { copyCourseModal, deleteCourseModal } from '$features/course/utils/store';
+  import { copyPublicCoursePageUrl, openCoursePreview } from '$features/course/utils/course-preview';
+  import { currentOrgDomain } from '$lib/utils/store/org';
   import { buildCoursePlaceholderAvatarUrl } from '$features/course/utils/course-list-row-utils';
   import CourseContentIcon from './course-content-icon.svelte';
+  import CoursePublicBadge from './course-public-badge.svelte';
+  import ExternalLinkIcon from '@lucide/svelte/icons/external-link';
+  import CopyIcon from '@lucide/svelte/icons/copy';
 
   interface Tag {
     id: string;
@@ -59,10 +64,14 @@
 
   const bannerImage = $derived(logo?.trim() ? logo : '/images/classroomio-course-img-template.jpg');
 
+  const showPublicCourseLinks = $derived(isPublished && type === 'PUBLIC' && slug.trim().length > 0);
+
+  const showActionsColumn = $derived(!isLMS || (isLMS && showPublicCourseLinks));
+
   const gridTemplateColumns = $derived(
-    isLMS
-      ? '7rem minmax(0, 2fr) 5.5rem minmax(0, 2fr) 4.5rem 6rem'
-      : '7rem minmax(0, 2fr) 5.5rem minmax(0, 2fr) 4.5rem 6rem 2.5rem'
+    showActionsColumn
+      ? '7rem minmax(0, 2fr) 5.5rem minmax(0, 2fr) 4.5rem 6rem 2.5rem'
+      : '7rem minmax(0, 2fr) 5.5rem minmax(0, 2fr) 4.5rem 6rem'
   );
 
   const studentPlaceholderAvatarUrls = $derived.by(() => [
@@ -112,6 +121,10 @@
     $deleteCourseModal.id = id;
     $deleteCourseModal.title = title;
   }
+
+  async function handleCopyCourseUrl() {
+    await copyPublicCoursePageUrl(slug, $currentOrgDomain);
+  }
 </script>
 
 <ResourceListRow.Root
@@ -133,7 +146,12 @@
 
     <!-- Title / type / updated -->
     <div class="flex min-w-0 flex-col gap-0.5">
-      <p class="line-clamp-2 text-base">{title}</p>
+      <div class="flex min-w-0 flex-wrap items-center gap-2">
+        <p class="line-clamp-2 min-w-0 flex-1 text-base">{title}</p>
+        {#if type === 'PUBLIC'}
+          <CoursePublicBadge class="shrink-0" />
+        {/if}
+      </div>
       {#if typeLabel}
         <p class="ui:text-muted-foreground mt-0.5 text-sm">{typeLabel}</p>
       {/if}
@@ -225,7 +243,7 @@
     </div>
 
     <!-- Actions -->
-    {#if !isLMS}
+    {#if showActionsColumn}
       <div class="flex justify-end">
         <DropdownMenu.Root>
           <DropdownMenu.Trigger>
@@ -235,7 +253,7 @@
                 variant="ghost"
                 size="icon"
                 class="size-8"
-                aria-label="Course actions"
+                aria-label={$t('courses.course_card.actions_menu_aria')}
                 onclick={(e) => e.stopPropagation()}
               >
                 <EllipsisVerticalIcon class="size-4" />
@@ -243,16 +261,38 @@
             {/snippet}
           </DropdownMenu.Trigger>
           <DropdownMenu.Content align="end">
-            <DropdownMenu.Item onclick={handleOpen}>
-              {$t('courses.course_card.context_menu.open')}
-            </DropdownMenu.Item>
-            <DropdownMenu.Item onclick={handleClone}>
-              {$t('courses.course_card.context_menu.clone')}
-            </DropdownMenu.Item>
-            <DropdownMenu.Separator />
-            <DropdownMenu.Item variant="destructive" onclick={handleDelete}>
-              {$t('courses.course_card.context_menu.delete')}
-            </DropdownMenu.Item>
+            {#if showPublicCourseLinks}
+              <DropdownMenu.Item
+                onclick={() =>
+                  openCoursePreview({
+                    courseId: id,
+                    courseSlug: slug,
+                    currentOrgDomain: $currentOrgDomain
+                  })}
+              >
+                <ExternalLinkIcon class="mr-2 size-4" />
+                {$t('courses.course_card.context_menu.open_public_course')}
+              </DropdownMenu.Item>
+              <DropdownMenu.Item onclick={() => void handleCopyCourseUrl()}>
+                <CopyIcon class="mr-2 size-4" />
+                {$t('courses.course_card.context_menu.copy_course_url')}
+              </DropdownMenu.Item>
+            {/if}
+            {#if !isLMS}
+              {#if showPublicCourseLinks}
+                <DropdownMenu.Separator />
+              {/if}
+              <DropdownMenu.Item onclick={handleOpen}>
+                {$t('courses.course_card.context_menu.open')}
+              </DropdownMenu.Item>
+              <DropdownMenu.Item onclick={handleClone}>
+                {$t('courses.course_card.context_menu.clone')}
+              </DropdownMenu.Item>
+              <DropdownMenu.Separator />
+              <DropdownMenu.Item variant="destructive" onclick={handleDelete}>
+                {$t('courses.course_card.context_menu.delete')}
+              </DropdownMenu.Item>
+            {/if}
           </DropdownMenu.Content>
         </DropdownMenu.Root>
       </div>
diff --git a/apps/dashboard/src/lib/features/course/components/course-public-badge.svelte b/apps/dashboard/src/lib/features/course/components/course-public-badge.svelte
new file mode 100644
index 00000000..07493e0b
--- /dev/null
+++ b/apps/dashboard/src/lib/features/course/components/course-public-badge.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { Badge } from '@cio/ui/base/badge';
+  import GlobeIcon from '@lucide/svelte/icons/globe';
+  import { t } from '$lib/utils/functions/translations';
+
+  interface Props {
+    class?: string;
+  }
+
+  let { class: className = '' }: Props = $props();
+</script>
+
+<Badge
+  variant="secondary"
+  class="ui:inline-flex ui:shrink-0 ui:items-center ui:gap-1 ui:rounded-md! ui:text-xs ui:capitalize {className}"
+>
+  <GlobeIcon class="size-3.5 shrink-0" />
+  {$t('courses.course_card.public_badge')}
+</Badge>
diff --git a/apps/dashboard/src/lib/features/course/components/exercise/delete-confirmation.svelte b/apps/dashboard/src/lib/features/course/components/exercise/delete-confirmation.svelte
index e2b2525d..cc17fb9d 100644
--- a/apps/dashboard/src/lib/features/course/components/exercise/delete-confirmation.svelte
+++ b/apps/dashboard/src/lib/features/course/components/exercise/delete-confirmation.svelte
@@ -4,18 +4,23 @@
   import { t } from '$lib/utils/functions/translations';
   import { deleteConfirmation } from './store';
 
-  let { onDelete = () => {}, onCancel = () => {} } = $props();
+  let {
+    title = $t('course.navItem.lessons.exercises.all_exercises.delete_confirmation.title'),
+    description = $t('course.navItem.lessons.exercises.all_exercises.delete_confirmation.sure'),
+    cancelLabel = $t('course.navItem.lessons.exercises.all_exercises.delete_confirmation.no'),
+    confirmLabel = $t('course.navItem.lessons.exercises.all_exercises.delete_confirmation.yes'),
+    onDelete = () => {},
+    onCancel = () => {}
+  } = $props();
 </script>
 
 <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.Title>{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">{description}</p>
 
       <div class="mt-5 flex items-center justify-between">
         <Button
@@ -25,7 +30,7 @@
             onCancel();
           }}
         >
-          {$t('course.navItem.lessons.exercises.all_exercises.delete_confirmation.no')}
+          {cancelLabel}
         </Button>
         <Button
           onclick={() => {
@@ -33,7 +38,7 @@
             $deleteConfirmation.open = false;
           }}
         >
-          {$t('course.navItem.lessons.exercises.all_exercises.delete_confirmation.yes')}
+          {confirmLabel}
         </Button>
       </div>
     </div>
diff --git a/apps/dashboard/src/lib/features/course/components/exercise/edit-mode.svelte b/apps/dashboard/src/lib/features/course/components/exercise/edit-mode.svelte
index 992501de..24bd128f 100644
--- a/apps/dashboard/src/lib/features/course/components/exercise/edit-mode.svelte
+++ b/apps/dashboard/src/lib/features/course/components/exercise/edit-mode.svelte
@@ -1,24 +1,32 @@
 <script lang="ts">
-  import * as Select from '@cio/ui/base/select';
   import TrashIcon from '@lucide/svelte/icons/trash';
+  import GripVerticalIcon from '@lucide/svelte/icons/grip-vertical';
+  import { dndzone } from 'svelte-dnd-action';
+  import { flip } from 'svelte/animate';
+  import { tick } from 'svelte';
 
   import {
     questionnaire,
     deleteConfirmation,
     questionnaireValidation,
     handleRemoveQuestion,
-    handleCode
+    handleCode,
+    handleAddQuestion,
+    handleRemoveSection,
+    handleReorderSections,
+    handleReorderQuestionsInSection,
+    handleUpdateSectionAfterBehavior,
+    handleUpdateSectionColorTheme,
+    handleUpdateSectionDescription,
+    handleUpdateSectionTitle,
+    hasSections,
+    getQuestionsForSection
   } from './store';
-  import { preventDefault } from '$lib/utils/functions/svelte';
-  import { exerciseApi } from '$features/course/api';
-  import { courseApi } from '$features/course/api';
-  import { ContentType } from '@cio/utils/constants/content';
-  import { PREMIUM_QUESTION_TYPE_KEYS, QUESTION_TYPES } from '$features/ui/question/constants';
-  import { Button } from '@cio/ui/base/button';
-  import { Badge } from '@cio/ui/base/badge';
+  import { QUESTION_TYPES } from '$features/ui/question/constants';
   import { ExerciseQuestion } from '@cio/ui';
 
   import OrderModal from './order-modal.svelte';
+  import QuestionTypeSelect from './question-type-select.svelte';
   import { t } from '$lib/utils/functions/translations';
   import { IconButton } from '@cio/ui/custom/icon-button';
   import { TextareaField } from '@cio/ui/custom/textarea-field';
@@ -26,17 +34,20 @@
   import { QuestionContainer } from '$features/course/components';
   import { uploadImage } from '$lib/utils/services/upload';
   import {
+    getExerciseEditorQuestionTypeLabel,
     getQuestionTypeOptionById,
     questionTypeSupportsOptions,
     toExerciseQuestionModel
   } from './question-type-utils';
   import { QUESTION_TYPE_KEY } from '@cio/question-types';
   import { getExerciseQuestionLabels } from './question-labels';
-  import { isFreePlan } from '$lib/utils/store/org';
-  import { openUpgradeModal } from '$lib/utils/functions/org';
-  import { PremiumIcon } from '@cio/ui/custom/moving-icons';
+  import SectionEditor from './section-editor.svelte';
+  import type { Question } from '$features/course/types';
+  import type { ExerciseEditorErrors } from './store';
 
+  const flipDurationMs = 200;
   const initialQuestionsLength = $questionnaire.questions.length;
+  type QuestionDndEvent = CustomEvent<{ items: Question[] }>;
 
   interface Props {
     shouldDeleteExercise?: boolean;
@@ -45,19 +56,52 @@
     /** Self-paced + all auto-gradable question types: enforce points &gt; 0 */
     requiresPositivePointsForAutoGrade?: boolean;
     selfPacedCourse?: boolean;
+    /** Public course restricts picker to auto-gradable question types only. */
+    isPublicCourse?: boolean;
+    reorderQuestions?: boolean;
   }
 
   let {
     shouldDeleteExercise = $bindable(false),
-    exerciseId,
-    goBack = () => {},
+    exerciseId: _exerciseId,
+    goBack: _goBack = () => {},
     requiresPositivePointsForAutoGrade = false,
-    selfPacedCourse = false
+    selfPacedCourse = false,
+    isPublicCourse = false,
+    reorderQuestions = false
   }: Props = $props();
 
+  const availableQuestionTypes = $derived(
+    isPublicCourse ? QUESTION_TYPES.filter((type) => type.autoGradable) : QUESTION_TYPES
+  );
+
   let questionIdToDelete = $state(null);
+  let sectionIdToDelete = $state<string | null>(null);
+  let deleteConfirmationType = $state<'question' | 'section'>('question');
+  let reorderQuestionItemsBySectionId = $state<Record<string, Question[]>>({});
+  let previousReorderQuestions = $state(false);
   let errors = $derived($questionnaireValidation);
   const questionLabels = $derived(getExerciseQuestionLabels());
+  const activeSections = $derived(
+    [...($questionnaire.sections ?? [])].filter((section) => !section.deletedAt).sort((a, b) => a.order - b.order)
+  );
+  const sectionLabels = $derived({
+    questions: t.get('course.navItem.lessons.exercises.all_exercises.section.questions'),
+    shortQuestions: t.get('course.navItem.lessons.exercises.all_exercises.section.short_questions'),
+    required: t.get('course.navItem.lessons.exercises.all_exercises.section.required'),
+    addQuestion: t.get('course.navItem.lessons.exercises.all_exercises.section.add_question'),
+    delete: t.get('course.navItem.lessons.exercises.all_exercises.section.delete'),
+    moveUp: t.get('course.navItem.lessons.exercises.all_exercises.section.move_up'),
+    moveDown: t.get('course.navItem.lessons.exercises.all_exercises.section.move_down'),
+    color: t.get('course.navItem.lessons.exercises.all_exercises.section.color'),
+    descriptionPlaceholder: t.get('course.navItem.lessons.exercises.all_exercises.section.description_placeholder')
+  });
+  const sectionAfterBehaviorLabels = $derived({
+    afterSectionPrefix: t.get('course.navItem.lessons.exercises.all_exercises.section.after_section'),
+    continue: t.get('course.navItem.lessons.exercises.all_exercises.section.continue'),
+    goToSection: t.get('course.navItem.lessons.exercises.all_exercises.section.go_to_section'),
+    submit: t.get('course.navItem.lessons.exercises.all_exercises.section.submit')
+  });
 
   function shouldScrollToLast(questionId, questions) {
     const [lastQuestion] = questions.slice(-1);
@@ -67,25 +111,62 @@
     return isLast && initialQuestionsLength !== currentQuestionsLength;
   }
 
+  async function scrollToExerciseElement(elementId: string) {
+    await tick();
+    requestAnimationFrame(() => {
+      document.getElementById(elementId)?.scrollIntoView({
+        block: 'start',
+        behavior: 'smooth',
+        inline: 'nearest'
+      });
+    });
+  }
+
+  function getQuestionElementId(questionId: string | number) {
+    return `exercise-question-${questionId}`;
+  }
+
+  async function addQuestionToSection(sectionId: string) {
+    const questionId = handleAddQuestion(sectionId);
+    await scrollToExerciseElement(getQuestionElementId(questionId));
+  }
+
   function onInitDeleteClicked(questionId) {
     return () => {
+      deleteConfirmationType = 'question';
       questionIdToDelete = questionId;
       $deleteConfirmation.open = true;
     };
   }
 
   function onFinalDeleteClicked() {
+    if (deleteConfirmationType === 'section' && sectionIdToDelete) {
+      deleteSection(sectionIdToDelete);
+      sectionIdToDelete = null;
+      deleteConfirmationType = 'question';
+      return;
+    }
+
     handleRemoveQuestion(questionIdToDelete)();
+    questionIdToDelete = null;
   }
 
-  function getQuestionErrorMsg(errors, question, errorKey) {
+  function onCancelDeleteClicked() {
+    questionIdToDelete = null;
+    sectionIdToDelete = null;
+    deleteConfirmationType = 'question';
+  }
+
+  function getQuestionErrorMsg(
+    errors: ExerciseEditorErrors,
+    question: Question,
+    errorKey: 'option' | 'title' | 'points'
+  ) {
     return errors[question.id] ? errors[question.id][errorKey] : null;
   }
 
-  function getQuestionTypeLabel(questionType) {
-    if (!questionType) return t.get('course.navItem.lessons.exercises.all_exercises.edit_mode.select_type');
-    if (questionType.labelKey) return t.get(questionType.labelKey);
-    return questionType.label;
+  function getSectionErrorMsg(errors: ExerciseEditorErrors, sectionId: string, errorKey: 'title' | 'description') {
+    return errors[sectionId]?.[errorKey];
   }
 
   function makeDefaultOption() {
@@ -117,6 +198,7 @@
 
       const current = q.questions[idx];
       let nextOptions = current.options ?? [];
+      let nextSettings = current.settings ?? {};
 
       if (nextQuestionTypeKey === QUESTION_TYPE_KEY.TRUE_FALSE) {
         const correctValue = (current.settings as { correctValue?: boolean })?.correctValue ?? true;
@@ -130,11 +212,20 @@
         nextOptions = [];
       }
 
+      if (nextQuestionTypeKey === QUESTION_TYPE_KEY.VIDEO_RECORDING) {
+        nextSettings = {
+          ...nextSettings,
+          maxDurationSeconds: 60,
+          allowRetakes: true
+        };
+      }
+
       const next = [...q.questions];
       next[idx] = {
         ...current,
         questionType: nextQuestionType,
         questionTypeId: nextQuestionType.id,
+        settings: nextSettings,
         options: nextOptions,
         isDirty: true
       };
@@ -179,12 +270,158 @@
       return { ...q, questions: next };
     });
   }
+
+  function moveSection(sectionId: string, direction: -1 | 1) {
+    const currentIndex = activeSections.findIndex((section) => section.id === sectionId);
+    const targetIndex = currentIndex + direction;
+    if (currentIndex < 0 || targetIndex < 0 || targetIndex >= activeSections.length) return;
+
+    const orderedIds = activeSections.map((section) => section.id);
+    const [sectionToMove] = orderedIds.splice(currentIndex, 1);
+    orderedIds.splice(targetIndex, 0, sectionToMove);
+    handleReorderSections(orderedIds);
+  }
+
+  function deleteSection(sectionId: string) {
+    const sectionIndex = activeSections.findIndex((section) => section.id === sectionId);
+    const nearestSection = activeSections[sectionIndex + 1] ?? activeSections[sectionIndex - 1];
+    handleRemoveSection(sectionId, nearestSection?.id);
+  }
+
+  function onInitSectionDeleteClicked(sectionId: string) {
+    deleteConfirmationType = 'section';
+    sectionIdToDelete = sectionId;
+    $deleteConfirmation.open = true;
+  }
+
+  function syncReorderQuestionItems() {
+    reorderQuestionItemsBySectionId = Object.fromEntries(
+      activeSections.map((section) => [section.id, getQuestionsForSection($questionnaire.questions, section.id)])
+    );
+  }
+
+  function getReorderQuestionsForSection(sectionId: string, sectionQuestions: Question[]) {
+    return reorderQuestionItemsBySectionId[sectionId] ?? sectionQuestions;
+  }
+
+  function handleSectionQuestionDndConsider(sectionId: string, event: QuestionDndEvent) {
+    reorderQuestionItemsBySectionId = {
+      ...reorderQuestionItemsBySectionId,
+      [sectionId]: event.detail.items
+    };
+  }
+
+  function handleSectionQuestionDndFinalize(sectionId: string, event: QuestionDndEvent) {
+    reorderQuestionItemsBySectionId = {
+      ...reorderQuestionItemsBySectionId,
+      [sectionId]: event.detail.items
+    };
+    handleReorderQuestionsInSection(
+      sectionId,
+      event.detail.items.map((question) => question.id)
+    );
+  }
+
+  function getRequiredQuestionCount(questions: Question[]) {
+    return questions.filter((question) => toExerciseQuestionModel(question).required !== false).length;
+  }
+
+  $effect(() => {
+    if (reorderQuestions && !previousReorderQuestions) {
+      syncReorderQuestionItems();
+    }
+
+    if (!reorderQuestions && previousReorderQuestions) {
+      reorderQuestionItemsBySectionId = {};
+    }
+
+    previousReorderQuestions = reorderQuestions;
+  });
 </script>
 
-<DeleteConfirmationModal onCancel={() => (questionIdToDelete = null)} onDelete={onFinalDeleteClicked} />
+<DeleteConfirmationModal
+  title={deleteConfirmationType === 'section'
+    ? $t('course.navItem.lessons.exercises.all_exercises.delete_confirmation.section_title')
+    : $t('course.navItem.lessons.exercises.all_exercises.delete_confirmation.title')}
+  description={deleteConfirmationType === 'section'
+    ? $t('course.navItem.lessons.exercises.all_exercises.delete_confirmation.section_sure')
+    : $t('course.navItem.lessons.exercises.all_exercises.delete_confirmation.sure')}
+  onCancel={onCancelDeleteClicked}
+  onDelete={onFinalDeleteClicked}
+/>
 
 <OrderModal />
 
+{#snippet questionEditor(question, index)}
+  <QuestionContainer
+    elementId={getQuestionElementId(question.id)}
+    key={String(question.id ?? `new-${index}`)}
+    onClose={onInitDeleteClicked(question.id)}
+    scrollToQuestion={shouldScrollToLast(question.id, $questionnaire.questions)}
+    bind:points={question.points}
+    hasError={!!errors[question.id]}
+    errorMsg={getQuestionErrorMsg(errors, question, 'points')}
+    pointsHint={requiresPositivePointsForAutoGrade && Number(question.points) === 0
+      ? $t('course.navItem.lessons.exercises.all_exercises.points_required_auto_grade')
+      : null}
+    onPointsChange={() => {
+      question.isDirty = true;
+    }}
+  >
+    {#if typeof question.code === 'string'}
+      <div class="my-3 flex w-3/5 items-center justify-between">
+        <TextareaField
+          bind:value={question.code}
+          rows={2}
+          placeholder={$t('course.navItem.lessons.exercises.all_exercises.edit_mode.write')}
+        />
+        <IconButton onclick={() => handleCode(question.id, false)}>
+          <TrashIcon size={16} />
+        </IconButton>
+      </div>
+    {/if}
+
+    <div class="mt-2 flex flex-col">
+      <ExerciseQuestion.QuestionRenderer
+        showContainer={false}
+        contract={{
+          mode: 'edit',
+          question: toExerciseQuestionModel(question),
+          labels: questionLabels,
+          onImageUpload: uploadImage
+        }}
+        onQuestionChange={(nextQuestion) => onSharedQuestionChange(question.id, nextQuestion)}
+      >
+        {#snippet questionTypeSelect()}
+          <QuestionTypeSelect
+            value={question.questionTypeId?.toString()}
+            onValueChange={(nextValue) => onQuestionTypeChange(question.id, nextValue)}
+            triggerQuestionType={question?.questionType}
+            types={availableQuestionTypes}
+            {selfPacedCourse}
+          />
+        {/snippet}
+      </ExerciseQuestion.QuestionRenderer>
+
+      {#if getQuestionErrorMsg(errors, question, 'option')}
+        <p class="text-sm text-red-500">{getQuestionErrorMsg(errors, question, 'option')}</p>
+      {/if}
+    </div>
+  </QuestionContainer>
+{/snippet}
+
+{#snippet compactQuestionRow(question, index)}
+  <div class="border-border flex items-center gap-3 rounded-md border bg-white px-4 py-3 dark:bg-black">
+    <span class="ui:text-muted-foreground w-6 text-sm font-medium tabular-nums">{index + 1}</span>
+    <div class="min-w-0 flex-1">
+      <p class="truncate text-sm font-semibold">
+        {question.title || getExerciseEditorQuestionTypeLabel(question?.questionType)}
+      </p>
+      <p class="ui:text-muted-foreground text-xs">{getExerciseEditorQuestionTypeLabel(question?.questionType)}</p>
+    </div>
+  </div>
+{/snippet}
+
 <div class="mb-20 w-full">
   {#if Object.values(errors).length}
     <div class="mb-4 flex w-full justify-center">
@@ -192,107 +429,92 @@
     </div>
   {/if}
   <div class="questions px-6 pt-6">
-    {#each $questionnaire.questions as question, index (question.id)}
-      {#if !question.deletedAt}
-        <QuestionContainer
-          key={String(question.id ?? `new-${index}`)}
-          onClose={onInitDeleteClicked(question.id)}
-          scrollToQuestion={shouldScrollToLast(question.id, $questionnaire.questions)}
-          bind:points={question.points}
-          hasError={!!errors[question.id]}
-          errorMsg={getQuestionErrorMsg(errors, question, 'points')}
-          pointsHint={requiresPositivePointsForAutoGrade && Number(question.points) === 0
-            ? $t('course.navItem.lessons.exercises.all_exercises.points_required_auto_grade')
-            : null}
-          onPointsChange={() => {
-            question.isDirty = true;
-          }}
-        >
-          {#if typeof question.code === 'string'}
-            <div class="my-3 flex w-3/5 items-center justify-between">
-              <TextareaField
-                bind:value={question.code}
-                rows={2}
-                placeholder={$t('course.navItem.lessons.exercises.all_exercises.edit_mode.write')}
-              />
-              <IconButton onclick={() => handleCode(question.id, false)}>
-                <TrashIcon size={16} />
-              </IconButton>
-            </div>
-          {/if}
-
-          <div class="mt-2 flex flex-col">
-            <ExerciseQuestion.QuestionRenderer
-              showContainer={false}
-              contract={{
-                mode: 'edit',
-                question: toExerciseQuestionModel(question),
-                labels: questionLabels,
-                onImageUpload: uploadImage
+    {#if hasSections($questionnaire.sections)}
+      <div class="space-y-5">
+        {#each activeSections as section, sectionIndex (section.id)}
+          {@const sectionQuestions = getQuestionsForSection($questionnaire.questions, section.id)}
+          {@const reorderSectionQuestions = getReorderQuestionsForSection(section.id, sectionQuestions)}
+          <SectionEditor
+            exerciseSectionId={section.id}
+            title={section.title}
+            description={section.description}
+            sectionNumber={sectionIndex + 1}
+            totalSections={activeSections.length}
+            colorTheme={section.colorTheme}
+            questionCount={sectionQuestions.length}
+            requiredQuestionCount={getRequiredQuestionCount(sectionQuestions)}
+            labels={sectionLabels}
+            titleError={getSectionErrorMsg(errors, section.id, 'title')}
+            descriptionError={getSectionErrorMsg(errors, section.id, 'description')}
+            showReorderHandles={reorderQuestions}
+            onTitleChange={(title) => handleUpdateSectionTitle(section.id, title)}
+            onDescriptionChange={(description) => handleUpdateSectionDescription(section.id, description)}
+            onColorThemeChange={(colorTheme) => handleUpdateSectionColorTheme(section.id, colorTheme)}
+            onAddQuestion={() => addQuestionToSection(section.id)}
+            onDelete={() => onInitSectionDeleteClicked(section.id)}
+            onMoveUp={() => moveSection(section.id, -1)}
+            onMoveDown={() => moveSection(section.id, 1)}
+            canMoveUp={sectionIndex > 0}
+            canMoveDown={sectionIndex < activeSections.length - 1}
+          >
+            <div
+              class="space-y-2"
+              use:dndzone={{
+                items: reorderQuestions ? reorderSectionQuestions : sectionQuestions,
+                flipDurationMs,
+                dropTargetStyle: {
+                  border: '2px #1d4ed8 solid',
+                  'border-style': 'dashed',
+                  'border-radius': '0.5rem'
+                },
+                dragDisabled: !reorderQuestions,
+                type: `exercise-section-question-${section.id}`
               }}
-              onQuestionChange={(nextQuestion) => onSharedQuestionChange(question.id, nextQuestion)}
+              onconsider={(event) => handleSectionQuestionDndConsider(section.id, event)}
+              onfinalize={(event) => handleSectionQuestionDndFinalize(section.id, event)}
             >
-              {#snippet questionTypeSelect()}
-                <Select.Root
-                  type="single"
-                  value={question.questionTypeId?.toString()}
-                  onValueChange={(value) => onQuestionTypeChange(question.id, value)}
+              {#each reorderQuestions ? reorderSectionQuestions : sectionQuestions as question, index (question.id)}
+                <div
+                  animate:flip={{ duration: flipDurationMs }}
+                  class="flex items-start gap-3 transition {reorderQuestions
+                    ? 'cursor-grab active:cursor-grabbing'
+                    : ''}"
                 >
-                  <Select.Trigger class="w-[180px]">
-                    {getQuestionTypeLabel(question?.questionType)}
-                  </Select.Trigger>
-                  <Select.Content>
-                    {#each QUESTION_TYPES as type (type.key)}
-                      {#if $isFreePlan && PREMIUM_QUESTION_TYPE_KEYS.has(type.key)}
-                        <button
-                          type="button"
-                          class="ui:flex ui:w-full ui:cursor-pointer ui:select-none ui:items-center ui:gap-2 ui:rounded-sm ui:py-1.5 ui:pl-2 ui:pr-8 ui:text-sm ui:outline-hidden ui:hover:bg-accent ui:hover:text-accent-foreground ui:relative"
-                          onclick={(e) => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            openUpgradeModal();
-                          }}
-                          title={$t('course.navItem.lessons.exercises.all_exercises.edit_mode.premium_question_type')}
-                        >
-                          <PremiumIcon size={16} class="ui:text-blue-700 ui:dark:text-white ui:shrink-0" />
-                          <span>{getQuestionTypeLabel(type)}</span>
-                        </button>
-                      {:else}
-                        <Select.Item value={type.id.toString()} label={getQuestionTypeLabel(type)}>
-                          {#snippet children({ selected: _sel })}
-                            <span class="flex w-full min-w-0 items-center justify-between gap-2">
-                              <span class="truncate">{getQuestionTypeLabel(type)}</span>
-                              {#if selfPacedCourse}
-                                <Badge
-                                  variant={type.autoGradable ? 'success' : 'warning'}
-                                  class="ui:shrink-0 ui:text-[10px] ui:font-normal"
-                                >
-                                  {type.autoGradable
-                                    ? $t(
-                                        'course.navItem.lessons.exercises.all_exercises.edit_mode.question_type_auto_gradable'
-                                      )
-                                    : $t(
-                                        'course.navItem.lessons.exercises.all_exercises.edit_mode.question_type_manual_grading'
-                                      )}
-                                </Badge>
-                              {/if}
-                            </span>
-                          {/snippet}
-                        </Select.Item>
-                      {/if}
-                    {/each}
-                  </Select.Content>
-                </Select.Root>
-              {/snippet}
-            </ExerciseQuestion.QuestionRenderer>
+                  <div class="ui:text-muted-foreground flex w-5 shrink-0 flex-col items-center gap-2 pt-3">
+                    {#if reorderQuestions}
+                      <GripVerticalIcon class="h-4 w-4 cursor-grab active:cursor-grabbing" aria-hidden="true" />
+                    {/if}
+                    <span class="text-xs font-medium tabular-nums">{index + 1}</span>
+                  </div>
+                  <div class="min-w-0 flex-1">
+                    {#if reorderQuestions}
+                      {@render compactQuestionRow(question, index)}
+                    {:else}
+                      {@render questionEditor(question, index)}
+                    {/if}
+                  </div>
+                </div>
+              {/each}
+            </div>
+          </SectionEditor>
 
-            {#if getQuestionErrorMsg(errors, question, 'option')}
-              <p class="text-sm text-red-500">{getQuestionErrorMsg(errors, question, 'option')}</p>
-            {/if}
-          </div>
-        </QuestionContainer>
-      {/if}
-    {/each}
+          <ExerciseQuestion.SectionAfterBehavior
+            {sectionIndex}
+            currentSectionId={section.id}
+            allSections={activeSections}
+            afterBehavior={section.afterBehavior}
+            labels={sectionAfterBehaviorLabels}
+            onChange={(behavior) => handleUpdateSectionAfterBehavior(section.id, behavior)}
+          />
+        {/each}
+      </div>
+    {:else}
+      {#each $questionnaire.questions as question, index (question.id)}
+        {#if !question.deletedAt}
+          {@render questionEditor(question, index)}
+        {/if}
+      {/each}
+    {/if}
   </div>
 </div>
 
diff --git a/apps/dashboard/src/lib/features/course/components/exercise/exercise-settings-tab.svelte b/apps/dashboard/src/lib/features/course/components/exercise/exercise-settings-tab.svelte
index f7e08e13..dcf2578f 100644
--- a/apps/dashboard/src/lib/features/course/components/exercise/exercise-settings-tab.svelte
+++ b/apps/dashboard/src/lib/features/course/components/exercise/exercise-settings-tab.svelte
@@ -2,11 +2,13 @@
   import { Switch } from '@cio/ui/base/switch';
   import { Label } from '@cio/ui/base/label';
   import { Button } from '@cio/ui/base/button';
+  import { InputField } from '@cio/ui/custom/input-field';
   import { questionnaire } from './store';
   import { exerciseApi } from '$features/course/api';
   import { courseApi } from '$features/course/api';
   import { t } from '$lib/utils/functions/translations';
   import { snackbar } from '$features/ui/snackbar/store';
+  import { slugifyTitle } from '@cio/utils/validation';
 
   type Props = {
     exerciseId: string;
@@ -15,13 +17,21 @@
   let { exerciseId }: Props = $props();
 
   let saving = $state(false);
+  let slug = $state($questionnaire.slug ?? '');
+
+  $effect(() => {
+    slug = $questionnaire.slug ?? '';
+  });
+
+  const isPublicCourse = $derived(courseApi.course?.type === 'PUBLIC');
 
   async function saveSettings() {
     if (!courseApi.course?.id) return;
     saving = true;
 
     await exerciseApi.update(courseApi.course.id, exerciseId, {
-      allowMultipleAttempts: !!$questionnaire.allowMultipleAttempts
+      allowMultipleAttempts: !!$questionnaire.allowMultipleAttempts,
+      slug: isPublicCourse && slug ? slug : undefined
     });
     saving = false;
 
@@ -50,6 +60,21 @@
     />
   </div>
 
+  {#if isPublicCourse}
+    <div class="rounded-lg border border-neutral-200 p-4 dark:border-neutral-700">
+      <InputField
+        label={$t('course.navItem.settings.slug.label')}
+        helperMessage={$t('course.navItem.settings.slug.description')}
+        value={slug}
+        placeholder={slugifyTitle($questionnaire.title ?? '')}
+        onInputChange={(e) => {
+          slug = e.currentTarget.value;
+        }}
+        errorMessage={exerciseApi.errors.slug}
+      />
+    </div>
+  {/if}
+
   <Button onclick={saveSettings} loading={saving} disabled={!courseApi.course?.id}>
     {$t('course.navItem.lessons.exercises.all_exercises.settings_save')}
   </Button>
diff --git a/apps/dashboard/src/lib/features/course/components/exercise/functions.ts b/apps/dashboard/src/lib/features/course/components/exercise/functions.ts
index 8f5e7aff..5d70f081 100644
--- a/apps/dashboard/src/lib/features/course/components/exercise/functions.ts
+++ b/apps/dashboard/src/lib/features/course/components/exercise/functions.ts
@@ -158,6 +158,7 @@ export function transformQuestionsToApiFormat(
     question: q.title,
     points: q.points || 0,
     questionTypeId: q.questionTypeId,
+    exerciseSectionId: q.exerciseSectionId ?? null,
     order: typeof (q as { order?: number }).order === 'number' ? (q as { order: number }).order : index + 1,
     settings: getQuestionSettings(q),
     options: questionTypeSupportsOptions(getQuestionTypeKey(q)) ? formatOptions(q.options) : [],
diff --git a/apps/dashboard/src/lib/features/course/components/exercise/preview.svelte b/apps/dashboard/src/lib/features/course/components/exercise/preview.svelte
index 5f8ec5c4..7e9372ae 100644
--- a/apps/dashboard/src/lib/features/course/components/exercise/preview.svelte
+++ b/apps/dashboard/src/lib/features/course/components/exercise/preview.svelte
@@ -6,10 +6,14 @@
   import { toExerciseQuestionModel } from './question-type-utils';
   import { getExerciseQuestionLabels } from './question-labels';
   import { ExerciseQuestion } from '@cio/ui';
-  import type { QuestionnaireMetaData } from './store';
+  import { NumberBadge } from '@cio/ui/base/number-badge';
+  import type { ExerciseSectionState, QuestionnaireMetaData } from './store';
+  import { t } from '$lib/utils/functions/translations';
+  import { getExerciseSectionDisplayTitle } from '$features/course/utils/exercise-section-utils';
 
   interface Props {
     questions?: Question[];
+    sections?: ExerciseSectionState[];
     questionnaireMetaData?: Partial<QuestionnaireMetaData>;
     /** Per-question scores (e.g. from `questionnaireMetaData.grades` or grading modal `questionAnswerByPoint`). */
     grades?: Record<string, number>;
@@ -22,6 +26,7 @@
 
   let {
     questions = [],
+    sections = [],
     questionnaireMetaData: _questionnaireMetaData = {},
     grades = $bindable({}),
     disableGrading = true,
@@ -46,6 +51,9 @@
 
   const questionModels = $derived(questions.map((question) => toExerciseQuestionModel(question)));
   const questionLabels = $derived(getExerciseQuestionLabels());
+  const sectionFallbackTitle = $derived($t('course.navItem.lessons.exercises.all_exercises.section.fallback_title'));
+  const activeSections = $derived(sections.filter((section) => !section.deletedAt).sort((a, b) => a.order - b.order));
+  const hasSectionGroups = $derived(activeSections.length > 0);
   const answersByKey = $derived(
     questionModels.reduce(
       (acc, questionModel, index) => {
@@ -56,9 +64,55 @@
       {} as Record<string, AnswerData>
     )
   );
+
+  function getQuestionsForSection(exerciseSectionId: string) {
+    return questions.filter((question) => !question.deletedAt && question.exerciseSectionId === exerciseSectionId);
+  }
+
+  function getSectionPoints(sectionQuestions: Question[]) {
+    return sectionQuestions.reduce((total, question) => total + Number(question.points ?? 0), 0);
+  }
 </script>
 
-{#if disableGrading && !Object.keys(grades || {}).length}
+{#if hasSectionGroups}
+  <div class="space-y-6">
+    {#each activeSections as section, sectionIndex (section.id)}
+      {@const sectionQuestions = getQuestionsForSection(section.id)}
+      {@const sectionQuestionModels = sectionQuestions.map((question) => toExerciseQuestionModel(question))}
+      <section class="space-y-4 pt-4">
+        <ExerciseQuestion.SectionHeader
+          title={getExerciseSectionDisplayTitle({
+            title: section.title,
+            sectionNumber: sectionIndex + 1,
+            sectionLabel: sectionFallbackTitle
+          })}
+          description={section.description}
+          sectionNumber={sectionIndex + 1}
+          totalSections={activeSections.length}
+          colorTheme={section.colorTheme}
+          questionCount={sectionQuestions.length}
+          totalPoints={getSectionPoints(sectionQuestions)}
+          labels={{
+            section: $t('course.navItem.lessons.exercises.all_exercises.section.fallback_title'),
+            questions: $t('course.navItem.lessons.exercises.all_exercises.view_mode.questions'),
+            points: $t('course.navItem.lessons.exercises.all_exercises.view_mode.points')
+          }}
+        />
+
+        <ExerciseQuestion.QuestionList
+          contract={{
+            mode: disableGrading ? 'review' : 'review',
+            questions: sectionQuestionModels,
+            answersByKey,
+            labels: questionLabels,
+            disabled: true
+          }}
+          itemClass="mb-4"
+        />
+      </section>
+    {/each}
+  </div>
+{:else if disableGrading && !Object.keys(grades || {}).length}
   <ExerciseQuestion.QuestionList
     contract={{ mode: 'review', questions: questionModels, answersByKey, labels: questionLabels, disabled: true }}
     itemClass="mb-4"
@@ -67,8 +121,8 @@
   {#each questions as currentQuestion, index (currentQuestion.id)}
     {@const questionModel = questionModels[index]}
     <div class="mb-4 space-y-3">
-      <div class="flex items-center justify-between">
-        <p class="text-base font-semibold text-gray-700 dark:text-gray-200">Q{index + 1}</p>
+      <div class="flex items-center justify-between gap-2">
+        <NumberBadge number={index + 1} active />
         <Grade grade={grades[currentQuestion.id]} gradeMax={currentQuestion.points} disableGrading={true} />
       </div>
 
@@ -87,8 +141,8 @@
   {#each questions as currentQuestion, index (currentQuestion.id)}
     {@const questionModel = questionModels[index]}
     <div class="mb-4 space-y-3">
-      <div class="flex items-center justify-between">
-        <p class="text-base font-semibold text-gray-700 dark:text-gray-200">Q{index + 1}</p>
+      <div class="flex items-center justify-between gap-2">
+        <NumberBadge number={index + 1} active />
         <Grade bind:grade={grades[currentQuestion.id]} gradeMax={currentQuestion.points} {disableGrading} />
       </div>
 
diff --git a/apps/dashboard/src/lib/features/course/components/exercise/question-labels.ts b/apps/dashboard/src/lib/features/course/components/exercise/question-labels.ts
index a9f0ac6f..5a91e0c6 100644
--- a/apps/dashboard/src/lib/features/course/components/exercise/question-labels.ts
+++ b/apps/dashboard/src/lib/features/course/components/exercise/question-labels.ts
@@ -289,6 +289,111 @@ export function getExerciseQuestionLabels(): ExerciseQuestionLabels {
     'file_upload.preview.max_size_label': t.get(
       'course.navItem.lessons.exercises.all_exercises.shared_question.file_upload.preview.max_size_label'
     ),
+    'video_recording.edit.max_duration_label': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.edit.max_duration_label'
+    ),
+    'video_recording.edit.max_duration_helper': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.edit.max_duration_helper'
+    ),
+    'video_recording.edit.max_duration_placeholder': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.edit.max_duration_placeholder'
+    ),
+    'video_recording.edit.manual_grading': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.edit.manual_grading'
+    ),
+    'video_recording.take.unsupported': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.take.unsupported'
+    ),
+    'video_recording.take.permission_prompt': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.take.permission_prompt'
+    ),
+    'video_recording.take.permission_denied': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.take.permission_denied'
+    ),
+    'video_recording.take.start_camera': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.take.start_camera'
+    ),
+    'video_recording.take.camera_label': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.take.camera_label'
+    ),
+    'video_recording.take.camera_placeholder': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.take.camera_placeholder'
+    ),
+    'video_recording.take.play_preview': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.take.play_preview'
+    ),
+    'video_recording.take.pause_preview': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.take.pause_preview'
+    ),
+    'video_recording.take.start_recording': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.take.start_recording'
+    ),
+    'video_recording.take.stop_recording': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.take.stop_recording'
+    ),
+    'video_recording.take.elapsed': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.take.elapsed'
+    ),
+    'video_recording.take.remaining': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.take.remaining'
+    ),
+    'video_recording.take.max_duration': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.take.max_duration'
+    ),
+    'video_recording.take.too_short': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.take.too_short'
+    ),
+    'video_recording.take.use_recording': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.take.use_recording'
+    ),
+    'video_recording.take.retake': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.take.retake'
+    ),
+    'video_recording.take.delete': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.take.delete'
+    ),
+    'video_recording.take.retry_upload': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.take.retry_upload'
+    ),
+    'video_recording.take.uploading': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.take.uploading'
+    ),
+    'video_recording.take.uploaded': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.take.uploaded'
+    ),
+    'video_recording.take.upload_failed': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.take.upload_failed'
+    ),
+    'video_recording.take.replaces_previous': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.take.replaces_previous'
+    ),
+    'video_recording.preview.max_duration_label': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.preview.max_duration_label'
+    ),
+    'video_recording.preview.manual_grading': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.preview.manual_grading'
+    ),
+    'video_recording.submission.no_video': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.submission.no_video'
+    ),
+    'video_recording.submission.unavailable': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.submission.unavailable'
+    ),
+    'video_recording.submission.duration': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.submission.duration'
+    ),
+    'video_recording.submission.file_size': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.submission.file_size'
+    ),
+    'video_recording.submission.recorded_at': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.submission.recorded_at'
+    ),
+    'video_recording.submission.uploaded_at': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.submission.uploaded_at'
+    ),
+    'video_recording.submission.retake_count': t.get(
+      'course.navItem.lessons.exercises.all_exercises.shared_question.video_recording.submission.retake_count'
+    ),
     'link.edit.instructions_placeholder': t.get(
       'course.navItem.lessons.exercises.all_exercises.shared_question.link.edit.instructions_placeholder'
     ),
diff --git a/apps/dashboard/src/lib/features/course/components/exercise/question-type-select.svelte b/apps/dashboard/src/lib/features/course/components/exercise/question-type-select.svelte
new file mode 100644
index 00000000..7c69a6a6
--- /dev/null
+++ b/apps/dashboard/src/lib/features/course/components/exercise/question-type-select.svelte
@@ -0,0 +1,66 @@
+<script lang="ts">
+  import * as Select from '@cio/ui/base/select';
+  import { Badge } from '@cio/ui/base/badge';
+  import { PREMIUM_QUESTION_TYPE_KEYS, QUESTION_TYPES } from '$features/ui/question/constants';
+  import { PremiumIcon } from '@cio/ui/custom/moving-icons';
+  import { getExerciseEditorQuestionTypeLabel } from './question-type-utils';
+  import { isFreePlan } from '$lib/utils/store/org';
+  import { openUpgradeModal } from '$lib/utils/functions/org';
+  import { t } from '$lib/utils/functions/translations';
+  import type { Question } from '$features/course/types';
+
+  type QuestionTypeEntry = (typeof QUESTION_TYPES)[number];
+
+  interface Props {
+    value: string | undefined;
+    onValueChange: (value: string) => void;
+    triggerQuestionType: Question['questionType'] | undefined;
+    types: QuestionTypeEntry[];
+    selfPacedCourse?: boolean;
+  }
+
+  let { value, onValueChange, triggerQuestionType, types, selfPacedCourse = false }: Props = $props();
+</script>
+
+<Select.Root type="single" {value} {onValueChange}>
+  <Select.Trigger class="w-full min-w-0 sm:w-[180px]">
+    {getExerciseEditorQuestionTypeLabel(triggerQuestionType)}
+  </Select.Trigger>
+  <Select.Content>
+    {#each types as typeEntry (typeEntry.key)}
+      {#if $isFreePlan && PREMIUM_QUESTION_TYPE_KEYS.has(typeEntry.key)}
+        <button
+          type="button"
+          class="ui:flex ui:w-full ui:cursor-pointer ui:select-none ui:items-center ui:gap-2 ui:rounded-sm ui:py-1.5 ui:pl-2 ui:pr-8 ui:text-sm ui:outline-hidden ui:hover:bg-accent ui:hover:text-accent-foreground ui:relative"
+          onclick={(clickEvent) => {
+            clickEvent.preventDefault();
+            clickEvent.stopPropagation();
+            openUpgradeModal();
+          }}
+          title={$t('course.navItem.lessons.exercises.all_exercises.edit_mode.premium_question_type')}
+        >
+          <PremiumIcon size={16} class="ui:text-blue-700 ui:dark:text-white ui:shrink-0" />
+          <span>{getExerciseEditorQuestionTypeLabel(typeEntry)}</span>
+        </button>
+      {:else}
+        <Select.Item value={typeEntry.id.toString()} label={getExerciseEditorQuestionTypeLabel(typeEntry)}>
+          {#snippet children({ selected: _sel })}
+            <span class="flex w-full min-w-0 items-center justify-between gap-2">
+              <span class="truncate">{getExerciseEditorQuestionTypeLabel(typeEntry)}</span>
+              {#if selfPacedCourse}
+                <Badge
+                  variant={typeEntry.autoGradable ? 'success' : 'warning'}
+                  class="ui:shrink-0 ui:text-[10px] ui:font-normal"
+                >
+                  {typeEntry.autoGradable
+                    ? $t('course.navItem.lessons.exercises.all_exercises.edit_mode.question_type_auto_gradable')
+                    : $t('course.navItem.lessons.exercises.all_exercises.edit_mode.question_type_manual_grading')}
+                </Badge>
+              {/if}
+            </span>
+          {/snippet}
+        </Select.Item>
+      {/if}
+    {/each}
+  </Select.Content>
+</Select.Root>
diff --git a/apps/dashboard/src/lib/features/course/components/exercise/question-type-utils.ts b/apps/dashboard/src/lib/features/course/components/exercise/question-type-utils.ts
index 22e38e5d..83d402bc 100644
--- a/apps/dashboard/src/lib/features/course/components/exercise/question-type-utils.ts
+++ b/apps/dashboard/src/lib/features/course/components/exercise/question-type-utils.ts
@@ -8,9 +8,19 @@ import {
 } from '@cio/question-types';
 import type { Question } from '$features/course/types';
 import { DEFAULT_QUESTION_TYPE, QUESTION_TYPES } from '$features/ui/question/constants';
+import { t } from '$lib/utils/functions/translations';
 
 type QuestionTypeOption = (typeof QUESTION_TYPES)[number];
 
+/** Label for exercise editor picker and lists (translations via labelKey when present). */
+export function getExerciseEditorQuestionTypeLabel(
+  questionType: Question['questionType'] | QuestionTypeOption | null | undefined
+): string {
+  if (!questionType) return t.get('course.navItem.lessons.exercises.all_exercises.edit_mode.select_type');
+  if ('labelKey' in questionType && questionType.labelKey) return t.get(questionType.labelKey);
+  return questionType.label ?? t.get('course.navItem.lessons.exercises.all_exercises.edit_mode.select_type');
+}
+
 const OPTION_QUESTION_TYPE_KEYS = new Set<ExerciseQuestionTypeKey>([
   QUESTION_TYPE_KEY.RADIO,
   QUESTION_TYPE_KEY.CHECKBOX,
@@ -54,6 +64,12 @@ export function toExerciseQuestionModel(question: Question): ExerciseQuestionMod
 
   const rawSettings = (question as Question & { settings?: Record<string, unknown> }).settings;
   const settings = rawSettings && typeof rawSettings === 'object' ? rawSettings : {};
+  const required =
+    typeof (question as Question & { required?: boolean }).required === 'boolean'
+      ? (question as Question & { required?: boolean }).required
+      : typeof settings.required === 'boolean'
+        ? settings.required
+        : true;
 
   return {
     id: question.id,
@@ -61,6 +77,7 @@ export function toExerciseQuestionModel(question: Question): ExerciseQuestionMod
     title: question.title || '',
     questionType: getQuestionTypeKey(question),
     points: Number(question.points || 0),
+    required,
     options,
     settings
   };
diff --git a/apps/dashboard/src/lib/features/course/components/exercise/section-editor.svelte b/apps/dashboard/src/lib/features/course/components/exercise/section-editor.svelte
new file mode 100644
index 00000000..f052dfe2
--- /dev/null
+++ b/apps/dashboard/src/lib/features/course/components/exercise/section-editor.svelte
@@ -0,0 +1,184 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { ExerciseSectionColorTheme } from '@cio/question-types';
+  import * as Field from '@cio/ui/base/field';
+  import { Button } from '@cio/ui/base/button';
+  import { Input } from '@cio/ui/base/input';
+  import { IconButton } from '@cio/ui/custom/icon-button';
+  import { TextareaField } from '@cio/ui/custom/textarea-field';
+  import GripVerticalIcon from '@lucide/svelte/icons/grip-vertical';
+  import XIcon from '@lucide/svelte/icons/x';
+  import ArrowUpIcon from '@lucide/svelte/icons/arrow-up';
+  import ArrowDownIcon from '@lucide/svelte/icons/arrow-down';
+
+  const COLOR_THEMES: ExerciseSectionColorTheme[] = ['blue', 'green', 'amber', 'rose', 'violet', 'slate'];
+
+  const COLOR_CLASSES: Record<ExerciseSectionColorTheme, string> = {
+    blue: 'bg-blue-500',
+    green: 'bg-emerald-500',
+    amber: 'bg-amber-500',
+    rose: 'bg-rose-500',
+    violet: 'bg-violet-500',
+    slate: 'bg-slate-500'
+  };
+
+  const BORDER_CLASSES: Record<ExerciseSectionColorTheme, string> = {
+    blue: 'border-blue-500',
+    green: 'border-emerald-500',
+    amber: 'border-amber-500',
+    rose: 'border-rose-500',
+    violet: 'border-violet-500',
+    slate: 'border-slate-500'
+  };
+
+  interface Props {
+    exerciseSectionId: string;
+    title: string;
+    description?: string | null;
+    sectionNumber: number;
+    totalSections: number;
+    colorTheme: ExerciseSectionColorTheme;
+    questionCount: number;
+    requiredQuestionCount: number;
+    titleError?: string;
+    descriptionError?: string;
+    showReorderHandles?: boolean;
+    onTitleChange?: (title: string) => void;
+    onDescriptionChange?: (description: string | null) => void;
+    onColorThemeChange?: (colorTheme: ExerciseSectionColorTheme) => void;
+    onAddQuestion?: () => void;
+    onDelete?: () => void;
+    onMoveUp?: () => void;
+    onMoveDown?: () => void;
+    canMoveUp?: boolean;
+    canMoveDown?: boolean;
+    labels?: Record<string, string>;
+    children?: Snippet;
+  }
+
+  let {
+    exerciseSectionId,
+    title,
+    description = null,
+    colorTheme,
+    questionCount,
+    requiredQuestionCount,
+    titleError = '',
+    descriptionError = '',
+    showReorderHandles = false,
+    onTitleChange,
+    onDescriptionChange,
+    onColorThemeChange,
+    onAddQuestion,
+    onDelete,
+    onMoveUp,
+    onMoveDown,
+    canMoveUp = false,
+    canMoveDown = false,
+    labels = {},
+    children
+  }: Props = $props();
+
+  let localTitle = $derived(title);
+  let localDescription = $derived(description ?? '');
+
+  function handleTitleInput() {
+    onTitleChange?.(localTitle);
+  }
+
+  function handleDescriptionInput() {
+    onDescriptionChange?.(localDescription || null);
+  }
+</script>
+
+<section
+  id={`exercise-section-${exerciseSectionId}`}
+  class={`overflow-hidden rounded-lg border bg-white shadow-xs dark:bg-zinc-950 ${BORDER_CLASSES[colorTheme]}`}
+>
+  <div class="flex items-center gap-3 border-b bg-zinc-50 px-4 py-3 dark:bg-zinc-900">
+    {#if showReorderHandles}
+      <GripVerticalIcon class="ui:text-muted-foreground h-4 w-4 shrink-0" aria-hidden="true" />
+    {/if}
+    <span class={`h-2.5 w-2.5 shrink-0 rounded-full ${COLOR_CLASSES[colorTheme]}`}></span>
+    <Input
+      bind:value={localTitle}
+      oninput={handleTitleInput}
+      aria-invalid={titleError ? 'true' : undefined}
+      class={`min-w-0 flex-1 border-transparent bg-transparent px-1 font-semibold shadow-none focus-visible:ring-1 ${titleError ? 'ui:border-destructive' : ''}`}
+    />
+    <div class="flex shrink-0 items-center gap-2">
+      {#each COLOR_THEMES as theme (theme)}
+        <button
+          type="button"
+          class={`ui:border h-3 w-3 cursor-pointer rounded-full ${COLOR_CLASSES[theme]} ${theme === colorTheme ? 'ring-2 ring-offset-2 dark:ring-offset-zinc-900' : ''}`}
+          title={`${labels.color ?? 'Section color'}: ${theme}`}
+          onclick={() => onColorThemeChange?.(theme)}
+        ></button>
+      {/each}
+    </div>
+    <span class="ui:text-muted-foreground shrink-0 text-sm font-semibold">
+      {questionCount}
+      {labels.shortQuestions ?? labels.questions ?? 'q'}
+    </span>
+    <IconButton
+      onclick={onDelete}
+      tooltip={labels.delete ?? 'Delete section'}
+      tooltipSide="bottom"
+      variant="outline"
+      size="icon-sm"
+    >
+      <XIcon size={16} />
+    </IconButton>
+  </div>
+
+  {#if titleError}
+    <div class="bg-white px-4 pt-2 dark:bg-zinc-950">
+      <Field.Error>{titleError}</Field.Error>
+    </div>
+  {/if}
+
+  <div class="border-b bg-white px-4 py-3 dark:bg-zinc-950">
+    <TextareaField
+      bind:value={localDescription}
+      rows={2}
+      oninput={handleDescriptionInput}
+      placeholder={labels.descriptionPlaceholder ?? 'Describe this section'}
+      errorMessage={descriptionError}
+      className="m-0"
+      bgColor="resize-none border-dashed bg-transparent text-sm"
+    />
+  </div>
+
+  <div class="space-y-4 bg-white px-4 py-4 dark:bg-zinc-950">
+    {@render children?.()}
+
+    <div class="flex justify-center">
+      <Button variant="outline" onclick={onAddQuestion}>+ {labels.addQuestion ?? 'Add question'}</Button>
+    </div>
+  </div>
+
+  <div class="flex items-center justify-between border-t bg-zinc-50 px-4 py-3 dark:bg-zinc-900">
+    <p class="ui:text-muted-foreground text-sm">
+      {requiredQuestionCount}
+      {labels.required ?? 'required'}
+    </p>
+    <div class="flex items-center gap-1">
+      <IconButton
+        onclick={onMoveUp}
+        disabled={!canMoveUp}
+        tooltip={labels.moveUp ?? 'Move section up'}
+        tooltipSide="bottom"
+      >
+        <ArrowUpIcon size={16} />
+      </IconButton>
+      <IconButton
+        onclick={onMoveDown}
+        disabled={!canMoveDown}
+        tooltip={labels.moveDown ?? 'Move section down'}
+        tooltipSide="bottom"
+      >
+        <ArrowDownIcon size={16} />
+      </IconButton>
+    </div>
+  </div>
+</section>
diff --git a/apps/dashboard/src/lib/features/course/components/exercise/store.ts b/apps/dashboard/src/lib/features/course/components/exercise/store.ts
index cc469da2..8b665705 100644
--- a/apps/dashboard/src/lib/features/course/components/exercise/store.ts
+++ b/apps/dashboard/src/lib/features/course/components/exercise/store.ts
@@ -1,18 +1,33 @@
 import { DEFAULT_QUESTION_TYPE, QUESTION_TEMPLATE } from '$features/ui/question/constants';
-import type { AnswerData } from '@cio/question-types';
+import type {
+  AnswerData,
+  ExerciseSectionAfterBehavior,
+  ExerciseSectionColorTheme,
+  ExerciseSectionDisplayMode
+} from '@cio/question-types';
 
 import type { Question } from '$features/course/types';
 import { STATUS } from './constants';
 import type { Writable } from 'svelte/store';
 import { isUUID } from '$lib/utils/functions/isUUID';
 import { writable } from 'svelte/store';
+import { UNTITLED_EXERCISE_SECTION_TITLE } from '$features/course/utils/exercise-section-utils';
 
 export const isQuestionnaireFetching = writable(false);
 export const deleteConfirmation = writable({ open: false });
 export const questionnaireOrder = writable({ open: false });
 
-// {'question-id': { option: '', title: '', ... }}
-export const questionnaireValidation = writable({});
+export interface ExerciseEditorFieldErrors {
+  option?: string;
+  title?: string;
+  points?: string;
+  description?: string;
+}
+
+export type ExerciseEditorErrors = Record<string, ExerciseEditorFieldErrors>;
+
+// {'question-or-section-id': { option: '', title: '', description: '', ... }}
+export const questionnaireValidation = writable<ExerciseEditorErrors>({});
 
 export interface QuestionnaireMetaData {
   answers: Record<string, AnswerData | undefined>;
@@ -27,6 +42,34 @@ export interface QuestionnaireMetaData {
   comment: string;
   /** Set when exercise is finished so route knows not to overwrite questionnaire */
   exerciseId: string | null;
+  currentSectionIndex: number;
+  sectionPhase: 'overview' | 'questions';
+}
+
+export interface ExerciseSectionState {
+  id: string;
+  title: string;
+  description: string | null;
+  order: number;
+  colorTheme: ExerciseSectionColorTheme;
+  afterBehavior: ExerciseSectionAfterBehavior;
+  isDirty?: boolean;
+  deletedAt?: string;
+}
+
+export interface QuestionnaireState {
+  title?: string | null;
+  dueBy?: string | null;
+  isDueByDirty?: boolean;
+  isTitleDirty?: boolean;
+  description?: string | null;
+  isDescriptionDirty?: boolean;
+  questions: Question[];
+  sections: ExerciseSectionState[];
+  sectionDisplayMode: ExerciseSectionDisplayMode;
+  totalSubmissions: number;
+  allowMultipleAttempts?: boolean;
+  slug?: string | null;
 }
 
 const initAnswerState: QuestionnaireMetaData = {
@@ -40,22 +83,14 @@ const initAnswerState: QuestionnaireMetaData = {
   progressValue: 0,
   status: STATUS.PENDING,
   comment: '',
-  exerciseId: null
+  exerciseId: null,
+  currentSectionIndex: 0,
+  sectionPhase: 'overview'
 };
 
 export const questionnaireMetaData: Writable<QuestionnaireMetaData> = writable(initAnswerState);
 
-export const questionnaire: Writable<{
-  title?: string | null;
-  dueBy?: string | null;
-  isDueByDirty?: boolean;
-  isTitleDirty?: boolean;
-  description?: string | null;
-  isDescriptionDirty?: boolean;
-  questions: Question[];
-  totalSubmissions: number;
-  allowMultipleAttempts?: boolean;
-}> = writable({
+export const questionnaire: Writable<QuestionnaireState> = writable({
   title: '',
   dueBy: '',
   isDueByDirty: false,
@@ -63,8 +98,11 @@ export const questionnaire: Writable<{
   description: '',
   isDescriptionDirty: false,
   questions: [],
+  sections: [],
+  sectionDisplayMode: 'one_question',
   totalSubmissions: 0,
-  allowMultipleAttempts: false
+  allowMultipleAttempts: false,
+  slug: ''
 });
 
 export function clearQuestionnaireValidation() {
@@ -84,7 +122,9 @@ export function reset() {
     finalTotalGrade: 0,
     status: STATUS.PENDING,
     comment: '',
-    progressValue: 100
+    progressValue: 100,
+    currentSectionIndex: 0,
+    sectionPhase: 'overview'
   }));
 
   clearQuestionnaireValidation();
@@ -106,8 +146,8 @@ export function resetStudentExerciseTake() {
 export function mapZodErrorsToQuestionErrors(
   zodErrors: Record<string, string>,
   questions: Question[]
-): Record<string, { option?: string; title?: string; points?: string }> {
-  const errors: Record<string, { option?: string; title?: string; points?: string }> = {};
+): ExerciseEditorErrors {
+  const errors: ExerciseEditorErrors = {};
   for (const [path, message] of Object.entries(zodErrors)) {
     const pathParts = path.split('.');
     const questionIndex = pathParts[0] === 'questions' ? parseInt(pathParts[1]) : -1;
@@ -134,20 +174,45 @@ export function mapZodErrorsToQuestionErrors(
   return errors;
 }
 
-export function handleAddQuestion() {
+export function hasSections(sections: ExerciseSectionState[]) {
+  return sections.some((section) => !section.deletedAt);
+}
+
+function compareQuestionsByOrder(leftQuestion: Question, rightQuestion: Question) {
+  const leftOrder = leftQuestion.order ?? 0;
+  const rightOrder = rightQuestion.order ?? 0;
+  if (leftOrder !== rightOrder) return leftOrder - rightOrder;
+
+  return String(leftQuestion.id).localeCompare(String(rightQuestion.id), undefined, { numeric: true });
+}
+
+export function getQuestionsForSection(questions: Question[], exerciseSectionId: string) {
+  return questions
+    .filter((question) => !question.deletedAt && question.exerciseSectionId === exerciseSectionId)
+    .sort(compareQuestionsByOrder);
+}
+
+export function handleAddQuestion(exerciseSectionId?: string | null) {
+  let nextQuestionId: string | number = '';
+
   questionnaire.update((q) => {
     const { questions } = q;
+    const activeSections = q.sections.filter((section) => !section.deletedAt);
+    const nextExerciseSectionId = exerciseSectionId ?? (activeSections.length > 0 ? activeSections[0].id : null);
+    nextQuestionId = `${questions.length + 1}-form`;
+
     return {
       ...q,
       questions: [
         ...questions,
         {
           ...QUESTION_TEMPLATE,
-          id: `${questions.length + 1}-form`,
-          name: `${questions.length + 1}-form`,
+          id: nextQuestionId,
+          name: `${nextQuestionId}`,
           value: '',
           points: 0,
           order: questions.length,
+          exerciseSectionId: nextExerciseSectionId,
           questionType: DEFAULT_QUESTION_TYPE,
           questionTypeId: DEFAULT_QUESTION_TYPE.id,
           options: [
@@ -162,6 +227,217 @@ export function handleAddQuestion() {
       ]
     };
   });
+
+  return nextQuestionId;
+}
+
+export function handleAddSection() {
+  let nextSectionId = '';
+
+  questionnaire.update((q) => {
+    const activeSections = q.sections.filter((section) => !section.deletedAt);
+    const firstAvailableSectionOrder =
+      activeSections.reduce((highestOrder, section) => Math.max(highestOrder, section.order), -1) + 1;
+    const activeUnsectionedQuestions = q.questions.filter(
+      (question) => !question.deletedAt && !question.exerciseSectionId
+    );
+    const nextSectionDisplayNumber = activeSections.length + (activeUnsectionedQuestions.length > 0 ? 2 : 1);
+    const nextSections = [...q.sections];
+    let questions = q.questions;
+    let nextSectionOrder = firstAvailableSectionOrder;
+
+    if (activeUnsectionedQuestions.length > 0) {
+      const untitledSectionId = crypto.randomUUID();
+      const untitledSection: ExerciseSectionState = {
+        id: untitledSectionId,
+        title: UNTITLED_EXERCISE_SECTION_TITLE,
+        description: null,
+        order: nextSectionOrder,
+        colorTheme: 'blue',
+        afterBehavior: { action: 'continue' },
+        isDirty: true
+      };
+
+      nextSectionOrder += 1;
+      nextSections.push(untitledSection);
+      questions = q.questions.map((question) => {
+        if (question.deletedAt || question.exerciseSectionId) return question;
+
+        return {
+          ...question,
+          exerciseSectionId: untitledSectionId,
+          isDirty: true
+        };
+      });
+    }
+
+    const sectionId = crypto.randomUUID();
+    nextSectionId = sectionId;
+    const nextSection: ExerciseSectionState = {
+      id: sectionId,
+      title: `Section ${nextSectionDisplayNumber}`,
+      description: null,
+      order: nextSectionOrder,
+      colorTheme: 'blue',
+      afterBehavior: { action: 'continue' },
+      isDirty: true
+    };
+
+    return {
+      ...q,
+      questions,
+      sections: [...nextSections, nextSection]
+    };
+  });
+
+  return nextSectionId;
+}
+
+export function handleRemoveSection(exerciseSectionId: string, moveQuestionsToExerciseSectionId?: string | null) {
+  questionnaire.update((q) => {
+    const activeSections = q.sections.filter((section) => !section.deletedAt);
+    const remainingSections = activeSections.filter((section) => section.id !== exerciseSectionId);
+    const shouldClearSections = remainingSections.length === 0;
+    const deletedAt = new Date().toString();
+
+    return {
+      ...q,
+      sections: q.sections.map((section) =>
+        section.id === exerciseSectionId ? { ...section, deletedAt, isDirty: true } : section
+      ),
+      questions: q.questions.map((question) => {
+        if (question.exerciseSectionId !== exerciseSectionId) return question;
+
+        if (moveQuestionsToExerciseSectionId || shouldClearSections) {
+          return {
+            ...question,
+            exerciseSectionId: shouldClearSections ? null : moveQuestionsToExerciseSectionId,
+            isDirty: true
+          };
+        }
+
+        return {
+          ...question,
+          deletedAt,
+          isDirty: true
+        };
+      })
+    };
+  });
+}
+
+export function handleMoveQuestionToSection(questionId: string | number, exerciseSectionId: string | null) {
+  questionnaire.update((q) => ({
+    ...q,
+    questions: q.questions.map((question) =>
+      question.id === questionId ? { ...question, exerciseSectionId, isDirty: true } : question
+    )
+  }));
+}
+
+export function handleUpdateSectionAfterBehavior(
+  exerciseSectionId: string,
+  afterBehavior: ExerciseSectionAfterBehavior
+) {
+  questionnaire.update((q) => ({
+    ...q,
+    sections: q.sections.map((section) =>
+      section.id === exerciseSectionId ? { ...section, afterBehavior, isDirty: true } : section
+    )
+  }));
+}
+
+export function handleUpdateSectionColorTheme(exerciseSectionId: string, colorTheme: ExerciseSectionColorTheme) {
+  questionnaire.update((q) => ({
+    ...q,
+    sections: q.sections.map((section) =>
+      section.id === exerciseSectionId ? { ...section, colorTheme, isDirty: true } : section
+    )
+  }));
+}
+
+export function handleUpdateSectionTitle(exerciseSectionId: string, title: string) {
+  questionnaire.update((q) => ({
+    ...q,
+    sections: q.sections.map((section) =>
+      section.id === exerciseSectionId ? { ...section, title, isDirty: true } : section
+    )
+  }));
+}
+
+export function handleUpdateSectionDescription(exerciseSectionId: string, description: string | null) {
+  questionnaire.update((q) => ({
+    ...q,
+    sections: q.sections.map((section) =>
+      section.id === exerciseSectionId ? { ...section, description, isDirty: true } : section
+    )
+  }));
+}
+
+export function handleReorderSections(orderedSectionIds: string[]) {
+  const orderBySectionId = new Map(orderedSectionIds.map((sectionId, index) => [sectionId, index]));
+
+  questionnaire.update((q) => ({
+    ...q,
+    sections: q.sections.map((section) => {
+      const nextOrder = orderBySectionId.get(section.id);
+      if (nextOrder === undefined || nextOrder === section.order) return section;
+
+      return { ...section, order: nextOrder, isDirty: true };
+    })
+  }));
+}
+
+export function handleReorderQuestionsInSection(exerciseSectionId: string, orderedQuestionIds: Array<string | number>) {
+  questionnaire.update((q) => {
+    const activeSections = [...q.sections].filter((section) => !section.deletedAt).sort((a, b) => a.order - b.order);
+    const sectionExists = activeSections.some((section) => section.id === exerciseSectionId);
+    if (!sectionExists) return q;
+
+    const questionById = new Map(q.questions.map((question) => [String(question.id), question]));
+    const orderedQuestionIdSet = new Set(orderedQuestionIds.map((questionId) => String(questionId)));
+    const reorderedActiveQuestions: Question[] = [];
+
+    for (const section of activeSections) {
+      const sectionQuestions = getQuestionsForSection(q.questions, section.id);
+
+      if (section.id !== exerciseSectionId) {
+        reorderedActiveQuestions.push(...sectionQuestions);
+        continue;
+      }
+
+      const orderedSectionQuestions = orderedQuestionIds
+        .map((questionId) => questionById.get(String(questionId)))
+        .filter(
+          (question): question is Question =>
+            Boolean(question) && !question.deletedAt && question.exerciseSectionId === exerciseSectionId
+        );
+      const missingSectionQuestions = sectionQuestions.filter(
+        (question) => !orderedQuestionIdSet.has(String(question.id))
+      );
+      reorderedActiveQuestions.push(...orderedSectionQuestions, ...missingSectionQuestions);
+    }
+
+    const activeUnsectionedQuestions = q.questions
+      .filter((question) => !question.deletedAt && !question.exerciseSectionId)
+      .sort(compareQuestionsByOrder);
+    const nextOrderByQuestionId = new Map(
+      [...reorderedActiveQuestions, ...activeUnsectionedQuestions].map((question, index) => [
+        String(question.id),
+        index + 1
+      ])
+    );
+
+    return {
+      ...q,
+      questions: q.questions.map((question) => {
+        const nextOrder = nextOrderByQuestionId.get(String(question.id));
+        if (nextOrder === undefined || question.order === nextOrder) return question;
+
+        return { ...question, order: nextOrder, isDirty: true };
+      })
+    };
+  });
 }
 
 export function handleAddOption(questionId) {
diff --git a/apps/dashboard/src/lib/features/course/components/exercise/submissions/individual.svelte b/apps/dashboard/src/lib/features/course/components/exercise/submissions/individual.svelte
index 3b06d180..e6c6780b 100644
--- a/apps/dashboard/src/lib/features/course/components/exercise/submissions/individual.svelte
+++ b/apps/dashboard/src/lib/features/course/components/exercise/submissions/individual.svelte
@@ -4,13 +4,14 @@
   import { UserAvatar } from '@cio/ui/custom/user-avatar';
 
   import { submissions } from './store';
-  import { questionnaire } from '../store';
+  import { getQuestionsForSection, questionnaire } from '../store';
   import { t } from '$lib/utils/functions/translations';
   import type { ExerciseSubmissions } from './types';
   import type { Question } from '$features/course/types';
   import type { AnswerData } from '@cio/question-types';
   import { toExerciseQuestionModel } from '../question-type-utils';
   import { getExerciseQuestionLabels } from '../question-labels';
+  import { getExerciseSectionDisplayTitle } from '$features/course/utils/exercise-section-utils';
 
   interface Props {
     isLoading?: boolean;
@@ -20,6 +21,11 @@
 
   let studentSelected = $state(0);
   const questionLabels = $derived(getExerciseQuestionLabels());
+  const sectionFallbackTitle = $derived($t('course.navItem.lessons.exercises.all_exercises.section.fallback_title'));
+  const activeSections = $derived(
+    [...($questionnaire.sections ?? [])].filter((section) => !section.deletedAt).sort((a, b) => a.order - b.order)
+  );
+  const hasSectionGroups = $derived(activeSections.length > 0);
 
   function toNumericQuestionId(question: Question): number | null {
     const numericId = Number(question.id);
@@ -42,6 +48,20 @@
 
     return submittedAnswer.answerData;
   }
+
+  function getSectionScore(student: ExerciseSubmissions, questions: Question[]) {
+    return questions.reduce((total, question) => {
+      const questionId = toNumericQuestionId(question);
+      if (questionId === null) return total;
+
+      const answer = student.answers.find((item) => item.questionId === questionId);
+      return total + (answer?.point ?? 0);
+    }, 0);
+  }
+
+  function getSectionMaxPoints(questions: Question[]) {
+    return questions.reduce((total, question) => total + Number(question.points ?? 0), 0);
+  }
 </script>
 
 {#if isLoading}
@@ -74,17 +94,66 @@
     )}
   </p>
   {#if $submissions[studentSelected]}
-    {#if $questionnaire.questions}
+    {#if hasSectionGroups}
+      <div class="space-y-8">
+        {#each activeSections as section, sectionIndex (section.id)}
+          {@const sectionQuestions = getQuestionsForSection($questionnaire.questions, section.id)}
+          <section class="space-y-4">
+            <ExerciseQuestion.SectionHeader
+              title={getExerciseSectionDisplayTitle({
+                title: section.title,
+                sectionNumber: sectionIndex + 1,
+                sectionLabel: sectionFallbackTitle
+              })}
+              description={section.description}
+              sectionNumber={sectionIndex + 1}
+              totalSections={activeSections.length}
+              colorTheme={section.colorTheme}
+              questionCount={sectionQuestions.length}
+              totalPoints={getSectionMaxPoints(sectionQuestions)}
+              labels={{
+                section: $t('course.navItem.lessons.exercises.all_exercises.section.fallback_title'),
+                questions: $t('course.navItem.lessons.exercises.all_exercises.view_mode.questions'),
+                points: $t('course.navItem.lessons.exercises.all_exercises.view_mode.points')
+              }}
+            />
+
+            {#each sectionQuestions as q, i (`${q.id}-${i}`)}
+              <div class="pb-4">
+                <ExerciseQuestion.QuestionRenderer
+                  contract={{
+                    mode: 'review',
+                    question: toExerciseQuestionModel(q),
+                    answer: getStudentAnswerForQuestion($submissions[studentSelected], q),
+                    labels: questionLabels,
+                    disabled: true
+                  }}
+                  questionNumber={i + 1}
+                  questionNumberActive={false}
+                />
+              </div>
+            {/each}
+
+            <p class="border-t pt-2 text-sm font-medium">
+              {getSectionScore($submissions[studentSelected], sectionQuestions)}/{getSectionMaxPoints(sectionQuestions)}
+              {$t('course.navItem.lessons.exercises.all_exercises.view_mode.points')}
+            </p>
+          </section>
+        {/each}
+      </div>
+    {:else if $questionnaire.questions}
       {#each $questionnaire.questions as q, i (`${q.id}-${i}`)}
         <div class="pb-4">
           <ExerciseQuestion.QuestionRenderer
             contract={{
               mode: 'review',
-              question: { ...toExerciseQuestionModel(q), title: `${i + 1}. ${q.title}` },
+              question: toExerciseQuestionModel(q),
               answer: getStudentAnswerForQuestion($submissions[studentSelected], q),
               labels: questionLabels,
               disabled: true
             }}
+            questionNumber={i + 1}
+            questionNumberActive={false}
           />
         </div>
       {/each}
diff --git a/apps/dashboard/src/lib/features/course/components/exercise/submissions/summary.svelte b/apps/dashboard/src/lib/features/course/components/exercise/submissions/summary.svelte
index 7b9c6584..e063da41 100644
--- a/apps/dashboard/src/lib/features/course/components/exercise/submissions/summary.svelte
+++ b/apps/dashboard/src/lib/features/course/components/exercise/submissions/summary.svelte
@@ -4,18 +4,20 @@
   import { ExerciseQuestion } from '@cio/ui';
 
   import { submissions } from './store';
-  import { questionnaire } from '../store';
+  import { getQuestionsForSection, questionnaire } from '../store';
   import { t } from '$lib/utils/functions/translations';
   import type { Question } from '$features/course/types';
   import type { ExerciseSubmissions } from './types';
   import type { AnswerData, ExerciseQuestionLabels, ExerciseSubmissionModel } from '@cio/question-types';
   import { toExerciseQuestionModel } from '../question-type-utils';
+  import { getExerciseSectionDisplayTitle } from '$features/course/utils/exercise-section-utils';
 
   interface Props {
     isLoading?: boolean;
   }
 
   let { isLoading = $bindable(true) }: Props = $props();
+  const sectionFallbackTitle = $derived($t('course.navItem.lessons.exercises.all_exercises.section.fallback_title'));
 
   function toAnswerData(answerData: unknown): AnswerData | null {
     if (!answerData || typeof answerData !== 'object' || !('type' in answerData)) return null;
@@ -34,13 +36,6 @@
     };
   }
 
-  function toSubmissionQuestionModel(question: Question, index: number) {
-    return {
-      ...toExerciseQuestionModel(question),
-      title: `${index + 1}. ${question.title || ''}`
-    };
-  }
-
   const submissionLabels = $derived.by(
     (): ExerciseQuestionLabels => ({
       'submission.common.no_answer': $t('course.navItem.lessons.exercises.all_exercises.analytics.individual.no'),
@@ -59,8 +54,16 @@
   const submissionQuestions = $derived(
     $questionnaire.questions
       .filter((question) => !question.deletedAt)
-      .map((question, index) => toSubmissionQuestionModel(question, index))
+      .map((question) => toExerciseQuestionModel(question))
   );
+  const activeSections = $derived(
+    [...($questionnaire.sections ?? [])].filter((section) => !section.deletedAt).sort((a, b) => a.order - b.order)
+  );
+  const hasSectionGroups = $derived(activeSections.length > 0);
+
+  function getSectionPoints(questions: Question[]) {
+    return questions.reduce((total, question) => total + Number(question.points ?? 0), 0);
+  }
 </script>
 
 {#if isLoading}
@@ -71,14 +74,52 @@
       {$t('course.navItem.lessons.exercises.all_exercises.analytics.summary.question_chart')}
     </p>
 
-    <ExerciseQuestion.QuestionList
-      contract={{
-        mode: 'submission',
-        questions: submissionQuestions,
-        submissions: submissionModels,
-        labels: submissionLabels,
-        disabled: true
-      }}
-    />
+    {#if hasSectionGroups}
+      <div class="space-y-8">
+        {#each activeSections as section, sectionIndex (section.id)}
+          {@const sectionQuestions = getQuestionsForSection($questionnaire.questions, section.id)}
+          <section class="space-y-4">
+            <ExerciseQuestion.SectionHeader
+              title={getExerciseSectionDisplayTitle({
+                title: section.title,
+                sectionNumber: sectionIndex + 1,
+                sectionLabel: sectionFallbackTitle
+              })}
+              description={section.description}
+              sectionNumber={sectionIndex + 1}
+              totalSections={activeSections.length}
+              colorTheme={section.colorTheme}
+              questionCount={sectionQuestions.length}
+              totalPoints={getSectionPoints(sectionQuestions)}
+              labels={{
+                section: $t('course.navItem.lessons.exercises.all_exercises.section.fallback_title'),
+                questions: $t('course.navItem.lessons.exercises.all_exercises.view_mode.questions'),
+                points: $t('course.navItem.lessons.exercises.all_exercises.view_mode.points')
+              }}
+            />
+
+            <ExerciseQuestion.QuestionList
+              contract={{
+                mode: 'submission',
+                questions: sectionQuestions.map((question) => toExerciseQuestionModel(question)),
+                submissions: submissionModels,
+                labels: submissionLabels,
+                disabled: true
+              }}
+            />
+          </section>
+        {/each}
+      </div>
+    {:else}
+      <ExerciseQuestion.QuestionList
+        contract={{
+          mode: 'submission',
+          questions: submissionQuestions,
+          submissions: submissionModels,
+          labels: submissionLabels,
+          disabled: true
+        }}
+      />
+    {/if}
   </div>
 {/if}
diff --git a/apps/dashboard/src/lib/features/course/components/exercise/view-mode.svelte b/apps/dashboard/src/lib/features/course/components/exercise/view-mode.svelte
index 5a230d9b..a9250905 100644
--- a/apps/dashboard/src/lib/features/course/components/exercise/view-mode.svelte
+++ b/apps/dashboard/src/lib/features/course/components/exercise/view-mode.svelte
@@ -4,7 +4,13 @@
   import { fly } from 'svelte/transition';
   import { cubicInOut } from 'svelte/easing';
   import { courseApi } from '$features/course/api';
-  import { questionnaire, questionnaireMetaData, resetStudentExerciseTake } from './store';
+  import {
+    getQuestionsForSection,
+    hasSections,
+    questionnaire,
+    questionnaireMetaData,
+    resetStudentExerciseTake
+  } from './store';
   import Preview from './preview.svelte';
   import { ExerciseQuestion } from '@cio/ui';
   import * as Alert from '@cio/ui/base/alert';
@@ -22,6 +28,7 @@
     getTextareaAnswerCharacterCount,
     toApiPayload,
     type AnswerData,
+    type ExerciseQuestionVideoRecordingUploader,
     validateTextareaAnswer
   } from '@cio/question-types';
   import { exerciseApi, presignApi } from '$features/course/api';
@@ -37,10 +44,12 @@
   import { isSelfPacedLikeCourse } from '$features/course/utils/compliance-utils';
   import { toExerciseQuestionModel } from './question-type-utils';
   import { getExerciseQuestionLabels } from './question-labels';
+  import { getExerciseSectionDisplayTitle } from '$features/course/utils/exercise-section-utils';
   import axios from 'axios';
   import { IconButton } from '@cio/ui/custom/icon-button';
   import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
   import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+  import type { Question } from '$features/course/types';
 
   interface Props {
     preview?: boolean;
@@ -61,11 +70,17 @@
   let slideDirection = $state<'next' | 'prev'>('next');
   let selectedTryIndex = $state(-1);
   const questionLabels = $derived(getExerciseQuestionLabels());
+  const sectionFallbackTitle = $derived($t('course.navItem.lessons.exercises.all_exercises.section.fallback_title'));
 
   const submissionList = $derived(Array.isArray(mySubmissions) ? mySubmissions : []);
 
   function handleStart() {
-    questionnaireMetaData.update((m) => ({ ...m, currentQuestionIndex: m.currentQuestionIndex + 1 }));
+    questionnaireMetaData.update((m) => ({
+      ...m,
+      currentQuestionIndex: 1,
+      currentSectionIndex: 0,
+      sectionPhase: hasSectionedExercise ? 'overview' : 'questions'
+    }));
   }
 
   function normalizeAnswerValue(
@@ -84,11 +99,107 @@
     return toApiPayload(answerData, questionId);
   }
 
+  async function submitExercise() {
+    if (!courseApi.course?.id || isSubmitting) return;
+
+    isSubmitting = true;
+
+    const updated = get(questionnaireMetaData);
+    localStorage.removeItem(`autosave-exercise-${exerciseId}`);
+    const totalPossibleGrade = getTotalPossibleGrade($questionnaire.questions);
+
+    const answersForApi = Object.entries(updated.answers)
+      .map(([questionKey, val]) => {
+        const question = $questionnaire.questions.find(
+          (item) => getExerciseQuestionContractKey(toExerciseQuestionModel(item)) === questionKey
+        );
+        if (!question) return null;
+        return mapAnswerToApiPayload(question, val);
+      })
+      .filter((answer) => answer !== null) as Array<{ questionId: number; optionId?: number; answer?: string }>;
+
+    if (answersForApi.length === 0) {
+      isSubmitting = false;
+      snackbar.error(t.get('course.navItem.lessons.exercises.all_exercises.view_mode.answers_required'));
+      return;
+    }
+
+    const submitResult = await exerciseApi.submit(courseApi.course.id, exerciseId, answersForApi);
+
+    if (exerciseApi.success && submitResult?.data) {
+      skipHydrateFromSubmissions = false;
+      const sub = submitResult.data as unknown as SubmissionListItem & { gradingState?: string };
+      if (sub.gradingState === 'completed' && sub.statusId === STATUS.GRADED && Array.isArray(sub.answers)) {
+        applyMySubmission(sub);
+      } else {
+        questionnaireMetaData.update((m) => ({
+          ...m,
+          status: 1,
+          totalPossibleGrade,
+          grades: {},
+          comment: '',
+          isFinished: true,
+          exerciseId
+        }));
+      }
+      courseApi.updateContentItem(exerciseId, ContentType.Exercise, { isComplete: true });
+
+      toggleConfetti();
+      setTimeout(toggleConfetti, 3000);
+
+      const allContentItems = getOrderedNavigableContent(courseApi.course);
+      const allComplete =
+        $isOrgStudent && allContentItems.length > 0 && allContentItems.every((item) => item.isComplete);
+
+      if (allComplete && courseApi.course?.id) {
+        openCourseCompletionModal(courseApi.course.id);
+      }
+    }
+
+    isSubmitting = false;
+  }
+
+  function evaluateSectionAfterBehavior() {
+    if (!currentSection) return;
+
+    const behavior = currentSection.afterBehavior;
+    if (behavior.action === 'submit') {
+      submitExercise();
+      return;
+    }
+
+    if (behavior.action === 'go_to_section' && behavior.exerciseSectionId) {
+      const targetIndex = activeSections.findIndex((section) => section.id === behavior.exerciseSectionId);
+      if (targetIndex >= 0) {
+        questionnaireMetaData.update((m) => ({
+          ...m,
+          currentSectionIndex: targetIndex,
+          currentQuestionIndex: 1,
+          sectionPhase: 'overview'
+        }));
+        return;
+      }
+    }
+
+    const nextSectionIndex = $questionnaireMetaData.currentSectionIndex + 1;
+    if (nextSectionIndex < activeSections.length) {
+      questionnaireMetaData.update((m) => ({
+        ...m,
+        currentSectionIndex: nextSectionIndex,
+        currentQuestionIndex: 1,
+        sectionPhase: 'overview'
+      }));
+      return;
+    }
+
+    submitExercise();
+  }
+
   async function onSubmit(id, value) {
     if (!courseApi.course?.id) return;
 
     const { answers } = $questionnaireMetaData;
-    const { questions } = $questionnaire;
+    const questions = hasSectionedExercise ? currentSectionQuestions : $questionnaire.questions;
     const prevAnswer = answers[id];
     const formattedAnswer = normalizeAnswerValue(prevAnswer, value);
 
@@ -110,63 +221,11 @@
     const isLastQuestion = currentIndex === questions.length;
 
     if (isLastQuestion) {
-      // Stay on last question, show spinner, submit to server
-      if (isSubmitting) return;
-      isSubmitting = true;
-
-      const updated = get(questionnaireMetaData);
-      localStorage.removeItem(`autosave-exercise-${exerciseId}`);
-      const totalPossibleGrade = getTotalPossibleGrade($questionnaire.questions);
-
-      const answersForApi = Object.entries(updated.answers)
-        .map(([questionKey, val]) => {
-          const question = questions.find(
-            (item) => getExerciseQuestionContractKey(toExerciseQuestionModel(item)) === questionKey
-          );
-          if (!question) return null;
-          return mapAnswerToApiPayload(question, val);
-        })
-        .filter((answer) => answer !== null) as Array<{ questionId: number; optionId?: number; answer?: string }>;
-
-      if (answersForApi.length === 0) {
-        isSubmitting = false;
-        snackbar.error(t.get('course.navItem.lessons.exercises.all_exercises.view_mode.answers_required'));
-        return;
+      if (hasSectionedExercise) {
+        evaluateSectionAfterBehavior();
+      } else {
+        await submitExercise();
       }
-
-      const submitResult = await exerciseApi.submit(courseApi.course.id, exerciseId, answersForApi);
-
-      if (exerciseApi.success && submitResult?.data) {
-        skipHydrateFromSubmissions = false;
-        const sub = submitResult.data as unknown as SubmissionListItem & { gradingState?: string };
-        if (sub.gradingState === 'completed' && sub.statusId === STATUS.GRADED && Array.isArray(sub.answers)) {
-          applyMySubmission(sub);
-        } else {
-          questionnaireMetaData.update((m) => ({
-            ...m,
-            status: 1,
-            totalPossibleGrade,
-            grades: {},
-            comment: '',
-            isFinished: true,
-            exerciseId
-          }));
-        }
-        courseApi.updateContentItem(exerciseId, ContentType.Exercise, { isComplete: true });
-
-        toggleConfetti();
-        setTimeout(toggleConfetti, 3000);
-
-        const allContentItems = getOrderedNavigableContent(courseApi.course);
-        const allComplete =
-          $isOrgStudent && allContentItems.length > 0 && allContentItems.every((item) => item.isComplete);
-
-        if (allComplete && courseApi.course?.id) {
-          openCourseCompletionModal(courseApi.course.id);
-        }
-      }
-
-      isSubmitting = false;
     } else {
       // Advance to next question
       slideDirection = 'next';
@@ -177,6 +236,11 @@
   }
 
   function onPrevious() {
+    if (hasSectionedExercise && $questionnaireMetaData.currentQuestionIndex <= 1) {
+      questionnaireMetaData.update((m) => ({ ...m, sectionPhase: 'overview' }));
+      return;
+    }
+
     slideDirection = 'prev';
     questionnaireMetaData.update((m) => ({ ...m, currentQuestionIndex: m.currentQuestionIndex - 1 }));
   }
@@ -186,6 +250,14 @@
       return 100;
     }
 
+    if (hasSectionedExercise) {
+      const activeQuestionCount = $questionnaire.questions.filter((question) => !question.deletedAt).length;
+      const answeredCount = Object.values($questionnaireMetaData.answers).filter((answer) =>
+        hasAnswerValue(answer)
+      ).length;
+      return Math.round((answeredCount / activeQuestionCount) * 100) || 0;
+    }
+
     return Math.round(((currentQuestionIndex - 1) / $questionnaire.questions.length) * 100) || 0;
   }
 
@@ -233,6 +305,48 @@
     return { fileKey: uploadResult.fileKey, fileName: file.name, fileUrl };
   }
 
+  const handleVideoRecordingUpload: ExerciseQuestionVideoRecordingUploader = async (input) => {
+    if (!courseApi.course?.id || !exerciseId) {
+      throw new Error('Exercise is not ready for upload');
+    }
+
+    const initResult = await exerciseApi.initVideoRecordingUpload(courseApi.course.id, exerciseId, input.questionId, {
+      fileName: input.fileName,
+      mimeType: input.mimeType as 'video/webm' | 'video/mp4' | 'video/quicktime',
+      size: input.size
+    });
+    if (!initResult?.data) {
+      throw new Error('Failed to get upload URL');
+    }
+
+    await axios.put(initResult.data.uploadUrl, input.blob, {
+      headers: { 'Content-Type': input.mimeType },
+      maxContentLength: Infinity,
+      maxBodyLength: Infinity
+    });
+
+    const completeResult = await exerciseApi.completeVideoRecordingUpload(
+      courseApi.course.id,
+      exerciseId,
+      input.questionId,
+      {
+        assetId: initResult.data.assetId,
+        storageKey: initResult.data.storageKey,
+        fileName: input.fileName,
+        mimeType: input.mimeType as 'video/webm' | 'video/mp4' | 'video/quicktime',
+        size: input.size,
+        durationSeconds: input.durationSeconds,
+        recordedAt: input.recordedAt,
+        retakeCount: input.retakeCount
+      }
+    );
+    if (!completeResult?.data) {
+      throw new Error('Failed to complete upload');
+    }
+
+    return completeResult.data;
+  };
+
   function hasAnswerValue(answerValue: AnswerData | null | undefined): boolean {
     if (answerValue === null || answerValue === undefined) return false;
     if (typeof answerValue === 'object' && 'type' in answerValue) {
@@ -256,6 +370,8 @@
         }
         case 'FILE_UPLOAD':
           return !!answerValue.fileKey;
+        case 'VIDEO_RECORDING':
+          return !!answerValue.assetId && !!answerValue.storageKey;
         case 'MATCHING':
           return answerValue.pairs.length > 0;
         case 'ORDERING':
@@ -271,16 +387,22 @@
     return false;
   }
 
-  function onSharedAnswerChange(answerValue) {
+  function onSharedAnswerChange(answerValue: AnswerData | null) {
     if (!sharedCurrentQuestionKey) return;
 
-    questionnaireMetaData.update((metaData) => ({
-      ...metaData,
-      answers: {
-        ...metaData.answers,
-        [sharedCurrentQuestionKey]: answerValue
+    questionnaireMetaData.update((metaData) => {
+      const answers = { ...metaData.answers };
+      if (answerValue === null) {
+        delete answers[sharedCurrentQuestionKey];
+      } else {
+        answers[sharedCurrentQuestionKey] = answerValue;
       }
-    }));
+
+      return {
+        ...metaData,
+        answers
+      };
+    });
   }
 
   function onSharedNext(valueOverride?: AnswerData) {
@@ -300,7 +422,59 @@
     onSubmit(sharedCurrentQuestionKey, valueToUse);
   }
 
+  function beginCurrentSection() {
+    questionnaireMetaData.update((m) => ({
+      ...m,
+      currentQuestionIndex: 1,
+      sectionPhase: 'questions'
+    }));
+  }
+
+  function goBackFromSectionOverview() {
+    if ($questionnaireMetaData.currentSectionIndex <= 0) {
+      questionnaireMetaData.update((m) => ({
+        ...m,
+        currentQuestionIndex: 0,
+        sectionPhase: 'overview'
+      }));
+      return;
+    }
+
+    questionnaireMetaData.update((m) => ({
+      ...m,
+      currentSectionIndex: m.currentSectionIndex - 1,
+      currentQuestionIndex: 1,
+      sectionPhase: 'overview'
+    }));
+  }
+
+  function onSectionQuestionAnswerChange(question: Question, answerValue: AnswerData) {
+    const questionKey = getExerciseQuestionContractKey(toExerciseQuestionModel(question));
+    questionnaireMetaData.update((metaData) => ({
+      ...metaData,
+      answers: {
+        ...metaData.answers,
+        [questionKey]: answerValue
+      }
+    }));
+  }
+
+  function completeAllQuestionsSection() {
+    const missingAnswer = currentSectionQuestions.find((question) => {
+      const questionKey = getExerciseQuestionContractKey(toExerciseQuestionModel(question));
+      return !hasAnswerValue($questionnaireMetaData.answers[questionKey]);
+    });
+
+    if (missingAnswer) {
+      snackbar.error(t.get('course.navItem.lessons.exercises.all_exercises.view_mode.answer_required'));
+      return;
+    }
+
+    evaluateSectionAfterBehavior();
+  }
+
   function handleEnterKey(e: KeyboardEvent) {
+    if (hasSectionedExercise && $questionnaire.sectionDisplayMode === 'all_questions') return;
     if (e.key !== 'Enter' || isSubmitting || !currentQuestion) return;
 
     const target = e.target as HTMLElement;
@@ -374,9 +548,34 @@
   });
 
   const progressValue = $derived(getProgressValue($questionnaireMetaData.currentQuestionIndex));
-  const currentQuestion = $derived($questionnaire.questions[$questionnaireMetaData.currentQuestionIndex - 1]);
+  const activeSections = $derived(
+    [...($questionnaire.sections ?? [])].filter((section) => !section.deletedAt).sort((a, b) => a.order - b.order)
+  );
+  const hasSectionedExercise = $derived(hasSections($questionnaire.sections ?? []));
+  const currentSection = $derived(
+    hasSectionedExercise ? activeSections[$questionnaireMetaData.currentSectionIndex] : null
+  );
+  const currentSectionQuestions = $derived(
+    currentSection ? getQuestionsForSection($questionnaire.questions, currentSection.id) : []
+  );
+  const currentSectionDisplayTitle = $derived(
+    currentSection
+      ? getExerciseSectionDisplayTitle({
+          title: currentSection.title,
+          sectionNumber: $questionnaireMetaData.currentSectionIndex + 1,
+          sectionLabel: sectionFallbackTitle
+        })
+      : ''
+  );
+  const currentQuestionList = $derived(hasSectionedExercise ? currentSectionQuestions : $questionnaire.questions);
+  const currentQuestion = $derived(currentQuestionList[$questionnaireMetaData.currentQuestionIndex - 1]);
   const isExerciseLoaded = $derived(alreadyCheckedAutoSavedData && $questionnaire.questions.length > 0);
-  const isFinished = $derived(isExerciseLoaded && $questionnaireMetaData.currentQuestionIndex > 0 && !currentQuestion);
+  const isFinished = $derived(
+    isExerciseLoaded &&
+      $questionnaireMetaData.currentQuestionIndex > 0 &&
+      !currentQuestion &&
+      (!hasSectionedExercise || $questionnaireMetaData.isFinished)
+  );
   const sharedQuestionModel = $derived(currentQuestion ? toExerciseQuestionModel(currentQuestion) : null);
   const sharedCurrentQuestionKey = $derived(
     sharedQuestionModel ? getExerciseQuestionContractKey(sharedQuestionModel) : null
@@ -385,6 +584,33 @@
     sharedCurrentQuestionKey ? $questionnaireMetaData.answers[sharedCurrentQuestionKey] : undefined
   );
   const canGoNextForSharedQuestion = $derived(hasAnswerValue(sharedCurrentAnswer));
+  const sectionQuestionTotalPoints = $derived(getTotalPossibleGrade(currentSectionQuestions));
+  const sectionNavigationGroups = $derived(
+    activeSections.map((section, sectionIndex) => {
+      const sectionQuestions = getQuestionsForSection($questionnaire.questions, section.id);
+      return {
+        id: section.id,
+        title: getExerciseSectionDisplayTitle({
+          title: section.title,
+          sectionNumber: sectionIndex + 1,
+          sectionLabel: sectionFallbackTitle
+        }),
+        isCurrent: currentSection?.id === section.id,
+        questions: sectionQuestions.map((question, questionIndex) => {
+          const questionKey = getExerciseQuestionContractKey(toExerciseQuestionModel(question));
+          return {
+            key: questionKey,
+            label: `Q${questionIndex + 1}`,
+            isAnswered: hasAnswerValue($questionnaireMetaData.answers[questionKey]),
+            isCurrent:
+              sectionIndex === $questionnaireMetaData.currentSectionIndex &&
+              questionIndex === $questionnaireMetaData.currentQuestionIndex - 1 &&
+              $questionnaireMetaData.sectionPhase === 'questions'
+          };
+        })
+      };
+    })
+  );
 
   const flyX = $derived(slideDirection === 'next' ? 300 : -300);
   const flyOutX = $derived(-flyX);
@@ -459,6 +685,8 @@
       answers,
       totalPossibleGrade,
       currentQuestionIndex: $questionnaire.questions.length,
+      currentSectionIndex: activeSections.length > 0 ? activeSections.length - 1 : 0,
+      sectionPhase: 'questions',
       isFinished: true,
       status: submission.statusId ?? STATUS.PENDING,
       finalTotalGrade,
@@ -470,7 +698,7 @@
 
   $effect(() => {
     if (prevExerciseId === exerciseId) return;
-    if (!!prevExerciseId) {
+    if (prevExerciseId) {
       isSubmitting = false;
       alreadyCheckedAutoSavedData = false;
       skipHydrateFromSubmissions = false;
@@ -483,7 +711,12 @@
 {#if !preview && $questionnaire.questions.length && !$questionnaireMetaData.isFinished && $questionnaireMetaData.currentQuestionIndex > 0}
   <div class="mb-6 flex min-w-0 items-center gap-3">
     <span class="ui:text-muted-foreground shrink-0 text-sm tabular-nums">
-      {$questionnaireMetaData.currentQuestionIndex}/{$questionnaire.questions.length}
+      {#if hasSectionedExercise}
+        {Object.values($questionnaireMetaData.answers).filter((answer) => hasAnswerValue(answer))
+          .length}/{$questionnaire.questions.length}
+      {:else}
+        {$questionnaireMetaData.currentQuestionIndex}/{$questionnaire.questions.length}
+      {/if}
     </span>
     <Progress class="min-w-0 flex-1" value={$questionnaireMetaData.progressValue} />
   </div>
@@ -493,7 +726,11 @@
 
 {#if preview}
   <RoleBasedSecurity allowedRoles={[1, 2]}>
-    <Preview questions={filterOutDeleted($questionnaire.questions)} questionnaireMetaData={$questionnaireMetaData} />
+    <Preview
+      questions={filterOutDeleted($questionnaire.questions)}
+      sections={$questionnaire.sections}
+      questionnaireMetaData={$questionnaireMetaData}
+    />
   </RoleBasedSecurity>
 {:else if !$questionnaire.questions.length}
   <Empty
@@ -621,6 +858,7 @@
       questions={[...$questionnaire.questions].sort(
         (leftQuestion, rightQuestion) => leftQuestion.order - rightQuestion.order
       )}
+      sections={$questionnaire.sections}
       questionnaireMetaData={$questionnaireMetaData}
       grades={$questionnaireMetaData.grades}
       disableGrading={true}
@@ -636,44 +874,133 @@
       {/if}
     </RoleBasedSecurity>
   {/if}
-{:else if currentQuestion && currentQuestion?.id}
-  <div class="flex flex-col gap-4">
-    <div class="grid overflow-hidden" style="grid-template-areas: 'slot';">
-      {#key currentQuestion.id}
-        <div
-          id="question"
-          class="min-w-0 [grid-area:slot]"
-          in:fly={{ x: flyX, duration: 350, easing: cubicInOut }}
-          out:fly={{ x: flyOutX, duration: 350, easing: cubicInOut }}
-        >
-          {#if sharedQuestionModel}
-            <ExerciseQuestion.QuestionRenderer
-              contract={{
-                mode: 'take',
-                question: sharedQuestionModel,
-                answer: sharedCurrentAnswer,
-                labels: questionLabels,
-                disabled: isSubmitting,
-                onFileUpload: handleFileUpload
-              }}
-              onAnswerChange={onSharedAnswerChange}
-            />
-          {/if}
-        </div>
-      {/key}
-    </div>
-    <div>
-      <ExerciseQuestion.QuestionNavigation
-        canGoBack={$questionnaireMetaData.currentQuestionIndex > 1}
-        canGoNext={canGoNextForSharedQuestion && !isSubmitting}
-        isLast={$questionnaireMetaData.currentQuestionIndex === $questionnaire.questions.length}
-        {isSubmitting}
-        previousLabel={t.get('course.navItem.lessons.exercises.all_exercises.previous')}
-        nextLabel={t.get('course.navItem.lessons.exercises.all_exercises.next')}
-        finishLabel={t.get('course.navItem.lessons.exercises.all_exercises.finish')}
-        {onPrevious}
-        onNext={onSharedNext}
+{:else if hasSectionedExercise && currentSection && $questionnaireMetaData.sectionPhase === 'overview'}
+  <ExerciseQuestion.SectionOverview
+    sectionTitle={currentSectionDisplayTitle}
+    sectionDescription={currentSection.description}
+    sectionNumber={$questionnaireMetaData.currentSectionIndex + 1}
+    totalSections={activeSections.length}
+    questionCount={currentSectionQuestions.length}
+    totalPoints={sectionQuestionTotalPoints}
+    colorTheme={currentSection.colorTheme}
+    onBegin={beginCurrentSection}
+    onBack={goBackFromSectionOverview}
+    labels={{
+      beginSection: $t('course.navItem.lessons.exercises.all_exercises.view_mode.begin_section'),
+      back: $t('course.navItem.lessons.exercises.all_exercises.view_mode.back'),
+      questions: $t('course.navItem.lessons.exercises.all_exercises.view_mode.questions'),
+      points: $t('course.navItem.lessons.exercises.all_exercises.view_mode.points'),
+      section: $t('course.navItem.lessons.exercises.all_exercises.section.fallback_title')
+    }}
+  />
+{:else if hasSectionedExercise && currentSection && $questionnaire.sectionDisplayMode === 'all_questions' && $questionnaireMetaData.sectionPhase === 'questions'}
+  <div class="grid gap-4 lg:grid-cols-[180px_minmax(0,1fr)]">
+    <ExerciseQuestion.SectionNavigationSidebar sections={sectionNavigationGroups} />
+    <section class="space-y-4">
+      <ExerciseQuestion.SectionHeader
+        title={currentSectionDisplayTitle}
+        description={currentSection.description}
+        sectionNumber={$questionnaireMetaData.currentSectionIndex + 1}
+        totalSections={activeSections.length}
+        colorTheme={currentSection.colorTheme}
+        questionCount={currentSectionQuestions.length}
+        totalPoints={sectionQuestionTotalPoints}
+        labels={{
+          section: $t('course.navItem.lessons.exercises.all_exercises.section.fallback_title'),
+          questions: $t('course.navItem.lessons.exercises.all_exercises.view_mode.questions'),
+          points: $t('course.navItem.lessons.exercises.all_exercises.view_mode.points')
+        }}
       />
+
+      {#each currentSectionQuestions as sectionQuestion, sectionQuestionIndex (sectionQuestion.id)}
+        {@const sectionQuestionModel = toExerciseQuestionModel(sectionQuestion)}
+        {@const sectionQuestionKey = getExerciseQuestionContractKey(toExerciseQuestionModel(sectionQuestion))}
+        <ExerciseQuestion.QuestionRenderer
+          contract={{
+            mode: 'take',
+            question: sectionQuestionModel,
+            answer: $questionnaireMetaData.answers[sectionQuestionKey],
+            labels: questionLabels,
+            disabled: isSubmitting,
+            onFileUpload: handleFileUpload,
+            onVideoRecordingUpload: handleVideoRecordingUpload
+          }}
+          questionNumber={sectionQuestionIndex + 1}
+          questionNumberActive={false}
+          onAnswerChange={(answerValue) => onSectionQuestionAnswerChange(sectionQuestion, answerValue)}
+        />
+      {/each}
+
+      <div class="flex justify-end">
+        <Button type="button" onclick={completeAllQuestionsSection} disabled={isSubmitting} loading={isSubmitting}>
+          {$questionnaireMetaData.currentSectionIndex === activeSections.length - 1
+            ? $t('course.navItem.lessons.exercises.all_exercises.finish')
+            : $t('course.navItem.lessons.exercises.all_exercises.view_mode.complete_section')}
+        </Button>
+      </div>
+    </section>
+  </div>
+{:else if currentQuestion && currentQuestion?.id}
+  <div class={hasSectionedExercise ? 'grid gap-4 lg:grid-cols-[180px_minmax(0,1fr)]' : ''}>
+    {#if hasSectionedExercise}
+      <ExerciseQuestion.SectionNavigationSidebar sections={sectionNavigationGroups} />
+    {/if}
+    <div class="flex min-w-0 flex-col gap-4">
+      {#if hasSectionedExercise && currentSection}
+        <ExerciseQuestion.SectionHeader
+          title={currentSectionDisplayTitle}
+          description={currentSection.description}
+          sectionNumber={$questionnaireMetaData.currentSectionIndex + 1}
+          totalSections={activeSections.length}
+          colorTheme={currentSection.colorTheme}
+          questionCount={currentSectionQuestions.length}
+          totalPoints={sectionQuestionTotalPoints}
+          labels={{
+            section: $t('course.navItem.lessons.exercises.all_exercises.section.fallback_title'),
+            questions: $t('course.navItem.lessons.exercises.all_exercises.view_mode.questions'),
+            points: $t('course.navItem.lessons.exercises.all_exercises.view_mode.points')
+          }}
+        />
+      {/if}
+      <div class="grid overflow-hidden" style="grid-template-areas: 'slot';">
+        {#key currentQuestion.id}
+          <div
+            id="question"
+            class="min-w-0 [grid-area:slot]"
+            in:fly={{ x: flyX, duration: 350, easing: cubicInOut }}
+            out:fly={{ x: flyOutX, duration: 350, easing: cubicInOut }}
+          >
+            {#if sharedQuestionModel}
+              <ExerciseQuestion.QuestionRenderer
+                contract={{
+                  mode: 'take',
+                  question: sharedQuestionModel,
+                  answer: sharedCurrentAnswer,
+                  labels: questionLabels,
+                  disabled: isSubmitting,
+                  onFileUpload: handleFileUpload,
+                  onVideoRecordingUpload: handleVideoRecordingUpload
+                }}
+                questionNumber={$questionnaireMetaData.currentQuestionIndex}
+                onAnswerChange={onSharedAnswerChange}
+              />
+            {/if}
+          </div>
+        {/key}
+      </div>
+      <div>
+        <ExerciseQuestion.QuestionNavigation
+          canGoBack={hasSectionedExercise || $questionnaireMetaData.currentQuestionIndex > 1}
+          canGoNext={canGoNextForSharedQuestion && !isSubmitting}
+          isLast={$questionnaireMetaData.currentQuestionIndex === currentQuestionList.length}
+          {isSubmitting}
+          previousLabel={t.get('course.navItem.lessons.exercises.all_exercises.previous')}
+          nextLabel={t.get('course.navItem.lessons.exercises.all_exercises.next')}
+          finishLabel={t.get('course.navItem.lessons.exercises.all_exercises.finish')}
+          {onPrevious}
+          onNext={onSharedNext}
+        />
+      </div>
     </div>
   </div>
 {/if}
diff --git a/apps/dashboard/src/lib/features/course/components/lesson/lesson-page-edit-header.svelte b/apps/dashboard/src/lib/features/course/components/lesson/lesson-page-edit-header.svelte
index 125b913a..bc3e33af 100644
--- a/apps/dashboard/src/lib/features/course/components/lesson/lesson-page-edit-header.svelte
+++ b/apps/dashboard/src/lib/features/course/components/lesson/lesson-page-edit-header.svelte
@@ -11,6 +11,7 @@
   import { t } from '$lib/utils/functions/translations';
   import { RoleBasedSecurity } from '$features/ui';
   import DeleteLessonConfirmation from '$features/course/components/lesson/delete-lesson-confirmation.svelte';
+  import { slugifyTitle } from '@cio/utils/validation';
 
   interface Props {
     mode: (typeof MODES)[keyof typeof MODES];
@@ -20,6 +21,10 @@
     onTitleChange: (value: string) => void;
     onToggleLock: () => void;
     onDeleteLesson: () => Promise<void> | void;
+    slug?: string;
+    showSlugEditor?: boolean;
+    slugError?: string;
+    onSlugChange?: (value: string) => void;
   }
 
   let {
@@ -29,9 +34,15 @@
     isDeletingLesson = false,
     onTitleChange,
     onToggleLock,
-    onDeleteLesson
+    onDeleteLesson,
+    slug = '',
+    showSlugEditor = false,
+    slugError,
+    onSlugChange = () => {}
   }: Props = $props();
 
+  // Slug field: commented out via `{#if false && ...}` below — drop `false &&` to show again.
+
   let openDeleteModal = $state(false);
 
   const lockLabel = $derived(
@@ -40,7 +51,7 @@
 </script>
 
 <div class="flex w-full items-center justify-between gap-2">
-  <div class="min-w-0 flex-1">
+  <div class="min-w-0 flex-1 space-y-2">
     {#if mode === MODES.edit && !$isOrgStudent}
       <RoleBasedSecurity allowedRoles={[1, 2]}>
         <InputField
@@ -49,6 +60,17 @@
           placeholder={$t('course.navItem.lessons.add_lesson.lesson_title')}
           onInputChange={(e) => onTitleChange(e.currentTarget.value)}
         />
+        {#if false && showSlugEditor}
+          <InputField
+            className="max-w-xl"
+            label={$t('course.navItem.settings.slug.label')}
+            helperMessage={$t('course.navItem.settings.slug.description')}
+            value={slug}
+            placeholder={slugifyTitle(title || '')}
+            onInputChange={(e) => onSlugChange(e.currentTarget.value)}
+            errorMessage={slugError}
+          />
+        {/if}
       </RoleBasedSecurity>
     {:else}
       <Page.Title>{title}</Page.Title>
@@ -69,8 +91,9 @@
         <IconButton
           onclick={() => (openDeleteModal = true)}
           disabled={isDeletingLesson}
-          aria-label={$t('course.navItem.lessons.add_lesson.delete')}
-          title={$t('course.navItem.lessons.add_lesson.delete')}
+          aria-label={$t('course.navItem.lessons.add_lesson.delete_tooltip')}
+          tooltip={$t('course.navItem.lessons.add_lesson.delete_tooltip')}
+          tooltipSide="bottom"
         >
           {#if isDeletingLesson}
             <Spinner class="h-4 w-4" />
diff --git a/apps/dashboard/src/lib/features/course/components/new-course-modal.svelte b/apps/dashboard/src/lib/features/course/components/new-course-modal.svelte
index a3f6e699..2ccad182 100644
--- a/apps/dashboard/src/lib/features/course/components/new-course-modal.svelte
+++ b/apps/dashboard/src/lib/features/course/components/new-course-modal.svelte
@@ -17,13 +17,6 @@
   let step = $state(0);
 
   const options = [
-    {
-      id: 'live-class',
-      title: $t('new_course_modal.live_class_label'),
-      subtitle: $t('new_course_modal.live_class_subtitle'),
-      type: 'LIVE_CLASS' as TCourseType,
-      isDisabled: false
-    },
     {
       id: 'self-paced',
       title: $t('new_course_modal.self_paced_label'),
@@ -31,12 +24,26 @@
       type: 'SELF_PACED' as TCourseType,
       isDisabled: false
     },
+    {
+      id: 'live-class',
+      title: $t('new_course_modal.live_class_label'),
+      subtitle: $t('new_course_modal.live_class_subtitle'),
+      type: 'LIVE_CLASS' as TCourseType,
+      isDisabled: false
+    },
     {
       id: 'compliance',
       title: $t('new_course_modal.compliance_label'),
       subtitle: $t('new_course_modal.compliance_subtitle'),
       type: 'COMPLIANCE' as TCourseType,
       isDisabled: false
+    },
+    {
+      id: 'public',
+      title: $t('new_course_modal.public_label'),
+      subtitle: $t('new_course_modal.public_subtitle'),
+      type: 'PUBLIC' as TCourseType,
+      isDisabled: false
     }
   ];
   const courseTypeOptionsForGroup = options.map((o) => ({
@@ -75,7 +82,7 @@
 {#snippet course_type_selector()}
   <Field.Description>{$t('courses.new_course_modal.type_selector_title')}</Field.Description>
 
-  <RadioOptionCardGroup options={courseTypeOptionsForGroup} bind:value={type} class="grid-cols-1 md:grid-cols-3" />
+  <RadioOptionCardGroup options={courseTypeOptionsForGroup} bind:value={type} class="grid-cols-1 md:grid-cols-2" />
 {/snippet}
 
 <Dialog.Root
diff --git a/apps/dashboard/src/lib/features/course/components/question-container.svelte b/apps/dashboard/src/lib/features/course/components/question-container.svelte
index 9e7d5a59..39fe456f 100644
--- a/apps/dashboard/src/lib/features/course/components/question-container.svelte
+++ b/apps/dashboard/src/lib/features/course/components/question-container.svelte
@@ -14,6 +14,7 @@
     /** Extra hint under points row (e.g. auto-grade requires non-zero points) */
     pointsHint?: string | null;
     onPointsChange?: any;
+    elementId?: string;
     key?: string;
     children?: import('svelte').Snippet;
   }
@@ -27,6 +28,7 @@
     errorMsg = null,
     pointsHint = null,
     onPointsChange = () => {},
+    elementId,
     children
   }: Props = $props();
 
@@ -44,6 +46,7 @@
 </script>
 
 <div
+  id={elementId}
   bind:this={ref}
   class="border-border border bg-white dark:bg-black {hasError ? 'border-red-700' : ''} root relative mb-6 rounded-md"
 >
diff --git a/apps/dashboard/src/lib/features/course/pages/exercise.svelte b/apps/dashboard/src/lib/features/course/pages/exercise.svelte
index 6e962050..e2b714ea 100644
--- a/apps/dashboard/src/lib/features/course/pages/exercise.svelte
+++ b/apps/dashboard/src/lib/features/course/pages/exercise.svelte
@@ -6,7 +6,7 @@
   import * as UnderlineTabs from '@cio/ui/custom/underline-tabs';
   import EyeIcon from '@lucide/svelte/icons/eye';
   import PencilIcon from '@lucide/svelte/icons/pencil';
-  import { onDestroy, onMount, untrack } from 'svelte';
+  import { onDestroy, onMount, tick, untrack } from 'svelte';
   import * as DropdownMenu from '@cio/ui/base/dropdown-menu';
   import CirclePlusIcon from '@lucide/svelte/icons/circle-plus';
   import EllipsisVerticalIcon from '@lucide/svelte/icons/ellipsis-vertical';
@@ -14,7 +14,11 @@
   import { ContentType } from '@cio/utils/constants/content';
 
   import {
+    type ExerciseEditorErrors,
     handleAddQuestion,
+    handleAddSection,
+    getQuestionsForSection,
+    hasSections,
     questionnaire,
     questionnaireOrder,
     reset,
@@ -36,21 +40,28 @@
   import { IconButton } from '@cio/ui/custom/icon-button';
   import UpdateDescription from '$features/course/components/exercise/update-description.svelte';
   import { ContentNavigationActions } from '$features/course/components/lesson';
-  import { RefreshPageData, RoleBasedSecurity } from '$features/ui';
+  import {
+    // RefreshPageData,
+    RoleBasedSecurity,
+    UnsavedChanges
+  } from '$features/ui';
   import { isSelfPacedLikeCourse } from '$features/course/utils/compliance-utils';
   import { getOrderedNavigableContent } from '$features/course/utils/content';
-  import { refreshExercisePageData } from '$features/course/utils/exercise-page-utils';
+  import {
+    hydrateExercisePageData
+    // , refreshExercisePageData
+  } from '$features/course/utils/exercise-page-utils';
   import { Empty } from '@cio/ui/custom/empty';
   import VideoIcon from '@lucide/svelte/icons/video';
   import {
     getQuestionTypeId,
-    getQuestionTypeKeyFromId,
-    getQuestionTypeOptionById
+    getQuestionTypeKeyFromId
   } from '$features/course/components/exercise/question-type-utils';
   import type { SubmissionListItem } from '$features/course/utils/types';
   import { Badge } from '@cio/ui/base/badge';
   import { isAutoGradableQuestionType } from '@cio/question-types';
   import * as Dialog from '@cio/ui/base/dialog';
+  import type { ExerciseSectionState } from '$features/course/components/exercise/store';
 
   interface Props {
     exerciseId?: string;
@@ -85,7 +96,32 @@
   let shouldDeleteExercise = $state(false);
   let isSaving = $state(false);
   let isDeleting = $state(false);
+  let reorderQuestions = $state(false);
   let selectedTab = $state<ExerciseTab>('questions');
+  // eslint-disable-next-line svelte/prefer-writable-derived -- must be writable: cleared before intentional navigations and bound to UnsavedChanges
+  let hasUnsavedChanges = $state(false);
+
+  function isTemporaryId(id: string | number | undefined) {
+    return typeof id === 'string' && id.includes('-form');
+  }
+
+  function hasDirtyQuestionnaire() {
+    const hasDirtyQuestion = ($questionnaire.questions ?? []).some((question) => {
+      const hasDirtyOption = (question.options ?? []).some((option) => option.isDirty || isTemporaryId(option.id));
+      return question.isDirty || Boolean(question.deletedAt) || isTemporaryId(question.id) || hasDirtyOption;
+    });
+    const hasDirtySection = ($questionnaire.sections ?? []).some(
+      (section) => section.isDirty || Boolean(section.deletedAt)
+    );
+
+    return Boolean(
+      $questionnaire.isTitleDirty ||
+        $questionnaire.isDescriptionDirty ||
+        $questionnaire.isDueByDirty ||
+        hasDirtyQuestion ||
+        hasDirtySection
+    );
+  }
 
   async function handleDeleteExercise() {
     if (!courseApi.course?.id) return;
@@ -94,6 +130,7 @@
     await exerciseApi.delete(courseApi.course.id, exerciseId);
 
     if (exerciseApi.success) {
+      hasUnsavedChanges = false;
       courseApi.removeContentItem(exerciseId, ContentType.Exercise);
       goBack();
     }
@@ -111,6 +148,25 @@
     });
   }
 
+  function getSectionValidationErrors(sections: ExerciseSectionState[]): ExerciseEditorErrors {
+    const sectionErrors: ExerciseEditorErrors = {};
+    const requiredFieldMessage = t.get('validations.generic.required_field');
+
+    for (const section of sections) {
+      const nextSectionErrors: ExerciseEditorErrors[string] = {};
+
+      if (!section.title?.trim()) {
+        nextSectionErrors.title = requiredFieldMessage;
+      }
+
+      if (Object.keys(nextSectionErrors).length === 0) continue;
+
+      sectionErrors[section.id] = nextSectionErrors;
+    }
+
+    return sectionErrors;
+  }
+
   async function handleSave() {
     if ($isOrgStudent || !courseApi.course?.id) return;
 
@@ -119,16 +175,33 @@
     const transformedQuestions = transformQuestionsToApiFormat($questionnaire.questions, {
       shouldFilterEmptyLabels: false
     });
+    const activeSections = $questionnaire.sections.filter((section) => !section.deletedAt);
+    const sectionsPayload = activeSections.map((section) => ({
+      id: section.id,
+      title: section.title,
+      description: section.description,
+      order: section.order,
+      colorTheme: section.colorTheme,
+      afterBehavior: section.afterBehavior,
+      questionIds: getQuestionsForSection($questionnaire.questions, section.id).map((question) => question.id)
+    }));
+    const shouldSyncSections = $questionnaire.sections.length > 0 || hasSections($questionnaire.sections);
+    const sectionValidationErrors = getSectionValidationErrors(activeSections);
 
     // Validate using Zod schema
     const zodResult = ZExerciseUpdate.safeParse({
-      questions: transformedQuestions
+      questions: transformedQuestions,
+      sections: shouldSyncSections ? sectionsPayload : undefined,
+      sectionDisplayMode: $questionnaire.sectionDisplayMode
     });
 
-    if (!zodResult.success) {
-      const zodErrors = mapZodErrorsToTranslations(zodResult.error);
+    if (!zodResult.success || Object.keys(sectionValidationErrors).length > 0) {
+      const zodErrors = !zodResult.success ? mapZodErrorsToTranslations(zodResult.error) : {};
       const questionErrors = mapZodErrorsToQuestionErrors(zodErrors, $questionnaire.questions);
-      questionnaireValidation.set(questionErrors);
+      questionnaireValidation.set({
+        ...questionErrors,
+        ...sectionValidationErrors
+      });
       snackbar.error('Please fix all validation errors before saving');
       return;
     }
@@ -167,7 +240,9 @@
         title: $questionnaire.title ?? '',
         description: $questionnaire.description ?? '',
         dueBy: $questionnaire.dueBy ?? '',
-        questions: questions
+        questions: questions,
+        sections: shouldSyncSections ? sectionsPayload : undefined,
+        sectionDisplayMode: $questionnaire.sectionDisplayMode
       });
 
       // Check if there are validation errors from the API
@@ -179,20 +254,10 @@
       }
 
       if (exerciseApi.success) {
-        questionnaire.update((q) => ({
-          ...q,
-          isTitleDirty: false,
-          isDescriptionDirty: false,
-          questions:
-            exerciseApi.exercise?.questions?.map((question) => {
-              const questionType = getQuestionTypeOptionById(getQuestionTypeId(question));
-              return {
-                ...question,
-                questionTypeId: questionType.id,
-                questionType
-              };
-            }) || q.questions
-        }));
+        if (exerciseApi.exercise) {
+          hydrateExercisePageData(exerciseApi.exercise, exerciseId);
+        }
+        hasUnsavedChanges = false;
         patchExerciseListItemLocally();
         snackbar.success('snackbar.exercise.success');
       }
@@ -216,6 +281,17 @@
     selectedTab = nextTab;
   });
 
+  $effect(() => {
+    hasUnsavedChanges = !$isOrgStudent && hasDirtyQuestionnaire();
+  });
+
+  $effect(() => {
+    const hasActiveSections = hasSections($questionnaire.sections);
+    if (!hasActiveSections && reorderQuestions) {
+      reorderQuestions = false;
+    }
+  });
+
   $effect(() => {
     const currentTab = page.url.searchParams.get('tab') ?? '';
     // Prevent self-navigation loops: only update URL when it actually changes.
@@ -250,6 +326,7 @@
   const isExerciseUnlocked = $derived(exerciseContentItem?.isUnlocked ?? false);
 
   const isSelfPacedCourse = $derived(isSelfPacedLikeCourse(courseApi.course?.type));
+  const isPublicCourse = $derived(courseApi.course?.type === 'PUBLIC');
   const activeQuestionTypeIds = $derived(
     ($questionnaire.questions ?? []).filter((q) => !q.deletedAt).map((q) => getQuestionTypeId(q))
   );
@@ -265,11 +342,42 @@
     if ($isOrgStudent || !isSelfPacedCourse || activeQuestionTypeIds.length === 0) return null;
     return isExerciseFullyAutoGradable(activeQuestionTypeIds) ? ('auto' as const) : ('manual' as const);
   });
+
+  async function scrollToExerciseElement(elementId: string) {
+    await tick();
+    requestAnimationFrame(() => {
+      document.getElementById(elementId)?.scrollIntoView({
+        block: 'start',
+        behavior: 'smooth',
+        inline: 'nearest'
+      });
+    });
+  }
+
+  function getFirstActiveSectionId() {
+    const [firstActiveSection] = [...($questionnaire.sections ?? [])]
+      .filter((section) => !section.deletedAt)
+      .sort((leftSection, rightSection) => leftSection.order - rightSection.order);
+
+    return firstActiveSection?.id ?? null;
+  }
+
+  async function addQuestionFromHeader() {
+    preview = false;
+    const questionId = handleAddQuestion(getFirstActiveSectionId());
+    await scrollToExerciseElement(`exercise-question-${questionId}`);
+  }
+
+  async function addSectionFromHeader() {
+    preview = false;
+    const sectionId = handleAddSection();
+    await scrollToExerciseElement(`exercise-section-${sectionId}`);
+  }
 </script>
 
-<Page.Header isSticky={true} class="z-50! min-h-[36px]">
+<Page.Header isSticky={true} class="z-100! min-h-[36px]">
   <Page.HeaderContent>
-    <Page.Title class="flex flex-wrap items-center gap-2">
+    <Page.Title class="flex flex-col gap-2">
       <span>{$questionnaire.title || 'Exercise'}</span>
       <RoleBasedSecurity allowedRoles={[1, 2]}>
         {#if teacherAutoGradeBadge === 'auto'}
@@ -298,7 +406,10 @@
                 {$t('course.navItem.lessons.exercises.all_exercises.save')}
               </Button>
               <IconButton
-                onclick={() => (preview = !preview)}
+                onclick={() => {
+                  preview = !preview;
+                  reorderQuestions = false;
+                }}
                 tooltip={preview
                   ? $t('course.navItem.lessons.exercises.all_exercises.view_mode.edit')
                   : $t('course.navItem.lessons.exercises.all_exercises.preview')}
@@ -310,13 +421,22 @@
                   <EyeIcon size={20} />
                 {/if}
               </IconButton>
-              <IconButton
-                onclick={handleAddQuestion}
-                tooltip={$t('course.navItem.lessons.exercises.all_exercises.add_question')}
-                tooltipSide="bottom"
-              >
-                <CirclePlusIcon size={20} />
-              </IconButton>
+              <DropdownMenu.Root>
+                <DropdownMenu.Trigger>
+                  <Button type="button" variant="ghost" size="icon" class="h-8 w-8">
+                    <CirclePlusIcon size={20} />
+                    <span class="sr-only">{$t('course.navItem.lessons.exercises.all_exercises.add')}</span>
+                  </Button>
+                </DropdownMenu.Trigger>
+                <DropdownMenu.Content align="center" class="z-201!">
+                  <DropdownMenu.Item onclick={addQuestionFromHeader}>
+                    {$t('course.navItem.lessons.exercises.all_exercises.add_question')}
+                  </DropdownMenu.Item>
+                  <DropdownMenu.Item onclick={addSectionFromHeader}>
+                    {$t('course.navItem.lessons.exercises.all_exercises.add_section')}
+                  </DropdownMenu.Item>
+                </DropdownMenu.Content>
+              </DropdownMenu.Root>
               <DropdownMenu.Root>
                 <DropdownMenu.Trigger>
                   <Button variant="ghost" size="icon" class="h-8 w-8">
@@ -325,10 +445,19 @@
                   </Button>
                 </DropdownMenu.Trigger>
                 <DropdownMenu.Content align="end">
-                  <DropdownMenu.Item onclick={() => ($questionnaireOrder.open = true)}>
-                    {$t('course.navItem.lessons.exercises.all_exercises.reorder')}
-                  </DropdownMenu.Item>
-                  <DropdownMenu.Separator />
+                  {#if hasSections($questionnaire.sections)}
+                    <DropdownMenu.Item onclick={() => (reorderQuestions = !reorderQuestions)}>
+                      {reorderQuestions
+                        ? $t('course.navItem.lessons.exercises.all_exercises.reorder_done')
+                        : $t('course.navItem.lessons.exercises.all_exercises.reorder')}
+                    </DropdownMenu.Item>
+                    <DropdownMenu.Separator />
+                  {:else}
+                    <DropdownMenu.Item onclick={() => ($questionnaireOrder.open = true)}>
+                      {$t('course.navItem.lessons.exercises.all_exercises.reorder')}
+                    </DropdownMenu.Item>
+                    <DropdownMenu.Separator />
+                  {/if}
                   <DropdownMenu.Item
                     class="text-red-600 focus:text-red-600 dark:text-red-400"
                     onclick={() => (shouldDeleteExercise = true)}
@@ -341,7 +470,7 @@
           </div>
         {/if}
 
-        <RefreshPageData onRefresh={() => refreshExercisePageData(courseApi.course?.id ?? '', exerciseId)} />
+        <!-- <RefreshPageData onRefresh={() => refreshExercisePageData(courseApi.course?.id ?? '', exerciseId)} /> -->
       </RoleBasedSecurity>
     </div>
   </Page.Action>
@@ -377,7 +506,7 @@
               <Badge variant="outline">{submissions.length}</Badge>
             </UnderlineTabs.Trigger>
           </UnderlineTabs.List>
-          <UnderlineTabs.Content value="questions">
+          <UnderlineTabs.Content value="questions" class="mx-auto w-full md:max-w-3xl">
             <UpdateDescription {preview} />
             {#if !preview}
               <EditMode
@@ -385,6 +514,8 @@
                 {goBack}
                 {requiresPositivePointsForAutoGrade}
                 selfPacedCourse={isSelfPacedCourse}
+                {isPublicCourse}
+                {reorderQuestions}
               />
             {:else}
               <ViewMode {preview} {exerciseId} isFetchingExercise={isFetching} {mySubmissions} />
@@ -430,3 +561,5 @@
     </div>
   {/snippet}
 </Page.Body>
+
+<UnsavedChanges bind:hasUnsavedChanges />
diff --git a/apps/dashboard/src/lib/features/course/pages/lesson.svelte b/apps/dashboard/src/lib/features/course/pages/lesson.svelte
index 5a976b67..dd06bb1c 100644
--- a/apps/dashboard/src/lib/features/course/pages/lesson.svelte
+++ b/apps/dashboard/src/lib/features/course/pages/lesson.svelte
@@ -73,6 +73,8 @@
 
   const lessonTitle = $derived(lessonApi.lesson?.title || 'Lesson');
   const isLessonUnlocked = $derived(lessonApi.lesson?.isUnlocked ?? false);
+  const lessonSlug = $derived(lessonApi.lesson?.slug ?? '');
+  const isPublicCourse = $derived(courseApi.course?.type === 'PUBLIC');
 
   function setModeQueryParam(value: (typeof MODES)[keyof typeof MODES]) {
     const params = new SvelteURLSearchParams($page.url.searchParams);
@@ -202,7 +204,8 @@
         isUnlocked: lessonApi.lesson.isUnlocked ?? undefined,
         slideUrl: lessonApi.lesson.slideUrl || undefined,
         videos: lessonApi.lesson.videos || [],
-        documents: lessonApi.lesson.documents || []
+        documents: lessonApi.lesson.documents || [],
+        slug: isPublicCourse && lessonApi.lesson.slug ? lessonApi.lesson.slug : undefined
       }),
       saveOrUpdateTranslation(lessonApi.currentLocale, lessonId)
     ]);
@@ -218,6 +221,10 @@
     lessonApi.updateLessonState('title', value);
   }
 
+  function handleLessonSlugChange(value: string) {
+    lessonApi.updateLessonState('slug', value);
+  }
+
   function handleToggleLessonLock() {
     const currentValue = lessonApi.lesson?.isUnlocked ?? false;
     lessonApi.updateLessonState('isUnlocked', !currentValue);
@@ -361,6 +368,10 @@
       onTitleChange={handleLessonTitleChange}
       onToggleLock={handleToggleLessonLock}
       onDeleteLesson={handleDeleteLesson}
+      slug={lessonSlug}
+      showSlugEditor={isPublicCourse}
+      slugError={lessonApi.errors.slug}
+      onSlugChange={handleLessonSlugChange}
     />
   </Page.HeaderContent>
   <Page.Action>
diff --git a/apps/dashboard/src/lib/features/course/pages/lessons.svelte b/apps/dashboard/src/lib/features/course/pages/lessons.svelte
index b5ea7275..f30776de 100644
--- a/apps/dashboard/src/lib/features/course/pages/lessons.svelte
+++ b/apps/dashboard/src/lib/features/course/pages/lessons.svelte
@@ -5,6 +5,7 @@
   import BookOpenIcon from '@lucide/svelte/icons/book-open';
   import ContentList from '$features/course/components/lesson/content-list.svelte';
   import ContentSectionList from '$features/course/components/lesson/content-section-list.svelte';
+  import CourseContentIcon from '$features/course/components/course-content-icon.svelte';
   import { courseApi } from '$features/course/api';
   import { t } from '$lib/utils/functions/translations';
   import { getCourseContent } from '$features/course/utils/content';
@@ -28,6 +29,12 @@
     contentItems.filter((item) => item.type === ContentType.Lesson || item.type === ContentType.Exercise)
   );
 
+  const sectionsTotal = $derived(
+    contentData.grouped ? contentData.sections.filter((section) => section.id !== 'ungrouped').length : 0
+  );
+  const lessonsTotal = $derived(contentItems.filter((item) => item.type === ContentType.Lesson).length);
+  const exercisesTotal = $derived(contentItems.filter((item) => item.type === ContentType.Exercise).length);
+
   let isFetching: boolean = $state(false);
   let hasHandledNext = $state(false);
 
@@ -65,6 +72,34 @@
     variant="page"
   />
 {:else if contentLength > 0}
+  <div
+    class="mb-5 grid grid-cols-1 gap-3 sm:grid-cols-3"
+    role="region"
+    aria-label={t.get('course.navItem.lessons.heading_v2')}
+  >
+    <div class="ui:border-border flex flex-col gap-1 rounded-lg border px-4 py-3">
+      <div class="ui:text-muted-foreground flex items-center gap-2 text-xs font-medium">
+        <CourseContentIcon type={ContentType.Section} size={14} />
+        <span>{$t('course.navItem.lessons.stats.sections')}</span>
+      </div>
+      <p class="text-2xl font-semibold tabular-nums">{sectionsTotal}</p>
+    </div>
+    <div class="ui:border-border flex flex-col gap-1 rounded-lg border px-4 py-3">
+      <div class="ui:text-muted-foreground flex items-center gap-2 text-xs font-medium">
+        <CourseContentIcon type={ContentType.Lesson} size={14} />
+        <span>{$t('course.navItem.lessons.stats.lessons')}</span>
+      </div>
+      <p class="text-2xl font-semibold tabular-nums">{lessonsTotal}</p>
+    </div>
+    <div class="ui:border-border flex flex-col gap-1 rounded-lg border px-4 py-3">
+      <div class="ui:text-muted-foreground flex items-center gap-2 text-xs font-medium">
+        <CourseContentIcon type={ContentType.Exercise} size={14} />
+        <span>{$t('course.navItem.lessons.stats.exercises')}</span>
+      </div>
+      <p class="text-2xl font-semibold tabular-nums">{exercisesTotal}</p>
+    </div>
+  </div>
+
   {#if reorder}
     <p class="text-center text-xs text-gray-400 italic dark:text-white">
       {$t('course.navItem.lessons.drag')}
diff --git a/apps/dashboard/src/lib/features/course/pages/newsfeed.svelte b/apps/dashboard/src/lib/features/course/pages/newsfeed.svelte
index a1459146..a0fcb631 100644
--- a/apps/dashboard/src/lib/features/course/pages/newsfeed.svelte
+++ b/apps/dashboard/src/lib/features/course/pages/newsfeed.svelte
@@ -16,7 +16,7 @@
   import Empty from '@cio/ui/custom/empty/empty.svelte';
   import { BookIcon } from '@lucide/svelte';
   import { ROLE } from '@cio/utils/constants';
-  import { buildNextNewsfeedReaction } from '@cio/ui/custom/newsfeed-reactions';
+  import { buildNextNewsfeedReaction, type NewsfeedReactionType } from '@cio/ui/custom/newsfeed-reactions';
 
   interface Props {
     courseId: string;
@@ -48,13 +48,13 @@
     await newsfeedApi.deleteComment(courseId, feedId, commentId);
   };
 
-  const addNewReaction = async (reactionType: string, feedId: string, authorId: string) => {
+  const addNewReaction = async (reactionType: NewsfeedReactionType, feedId: string, authorId: string) => {
     if (!authorId || isReactingByFeedId[feedId]) return;
 
     const reactedFeed = newsfeedApi.feeds.find((feed) => feed.id === feedId);
     if (!reactedFeed) return;
 
-    const updatedReaction = buildNextNewsfeedReaction(reactedFeed.reaction, reactionType, authorId);
+    const updatedReaction = buildNextNewsfeedReaction(reactedFeed.reaction ?? undefined, reactionType, authorId);
 
     isReactingByFeedId = { ...isReactingByFeedId, [feedId]: true };
 
diff --git a/apps/dashboard/src/lib/features/course/pages/settings.svelte b/apps/dashboard/src/lib/features/course/pages/settings.svelte
index 52c9ae73..bad67059 100644
--- a/apps/dashboard/src/lib/features/course/pages/settings.svelte
+++ b/apps/dashboard/src/lib/features/course/pages/settings.svelte
@@ -170,7 +170,8 @@
         metadata: metadataPayload,
         slug: courseApi.course.slug ?? undefined,
         compliance:
-          $settings.type === 'COMPLIANCE' ? (courseApi.course.compliance ?? DEFAULT_COMPLIANCE_SETTINGS) : undefined
+          $settings.type === 'COMPLIANCE' ? (courseApi.course.compliance ?? DEFAULT_COMPLIANCE_SETTINGS) : undefined,
+        callout: $settings.type === 'PUBLIC' ? sanitizeCalloutForSave($settings.callout) : null
       };
 
       const normalizedSelectedTagIds = normalizeTagIds(selectedTagIds);
@@ -220,11 +221,46 @@
         lessonDownload: !!course.metadata?.lessonDownload,
         isPublished: !!course.isPublished,
         allowNewStudents: !!course.metadata?.allowNewStudent,
-        isContentGroupingEnabled: course.metadata?.isContentGroupingEnabled ?? true
+        isContentGroupingEnabled: course.metadata?.isContentGroupingEnabled ?? true,
+        callout: normalizeCallout(course.callout)
       });
     });
   }
 
+  function sanitizeCalloutForSave(value: typeof $settings.callout) {
+    if (!value) return null;
+
+    const title = value.title.trim();
+    const description = value.description.trim();
+    const buttonLabel = value.buttonLabel.trim();
+    const buttonUrl = value.buttonUrl.trim();
+
+    if (!title && !description && !buttonLabel && !buttonUrl) return null;
+
+    return { title, description, buttonLabel, buttonUrl };
+  }
+
+  function normalizeCallout(value: unknown): typeof $settings.callout {
+    if (!value || typeof value !== 'object') return null;
+
+    const candidate = value as Record<string, unknown>;
+    if (
+      typeof candidate.title !== 'string' ||
+      typeof candidate.description !== 'string' ||
+      typeof candidate.buttonLabel !== 'string' ||
+      typeof candidate.buttonUrl !== 'string'
+    ) {
+      return null;
+    }
+
+    return {
+      title: candidate.title,
+      description: candidate.description,
+      buttonLabel: candidate.buttonLabel,
+      buttonUrl: candidate.buttonUrl
+    };
+  }
+
   // Initialize course from page data
   $effect(() => {
     const courseData = $page.data?.course;
@@ -240,6 +276,15 @@
     }
   });
 
+  $effect(() => {
+    if ($settings.type === 'PUBLIC' && $settings.callout === null) {
+      settings.update((prev) => ({
+        ...prev,
+        callout: { title: '', description: '', buttonLabel: '', buttonUrl: '' }
+      }));
+    }
+  });
+
   $effect(() => {
     const courseId = courseApi.course?.id;
 
@@ -525,21 +570,97 @@
         }}
       >
         <div class="mb-3 flex items-center space-x-2">
-          <RadioGroup.Item value={'LIVE_CLASS' as TCourseType} id="live-class" />
-          <Label for="live-class">{$t('course.navItem.settings.live_class')}</Label>
-        </div>
-        <div class="flex items-center space-x-2">
           <RadioGroup.Item value={'SELF_PACED' as TCourseType} id="self-paced" />
           <Label for="self-paced">{$t('course.navItem.settings.self_paced')}</Label>
         </div>
-        <div class="mt-3 flex items-center space-x-2">
+        <div class="mb-3 flex items-center space-x-2">
+          <RadioGroup.Item value={'LIVE_CLASS' as TCourseType} id="live-class" />
+          <Label for="live-class">{$t('course.navItem.settings.live_class')}</Label>
+        </div>
+        <div class="mb-3 flex items-center space-x-2">
           <RadioGroup.Item value={'COMPLIANCE' as TCourseType} id="compliance-course" />
           <Label for="compliance-course">{$t('course.navItem.settings.compliance')}</Label>
         </div>
+        <div class="flex items-center space-x-2">
+          <RadioGroup.Item value={'PUBLIC' as TCourseType} id="public-course" />
+          <Label for="public-course">{$t('course.navItem.settings.public')}</Label>
+        </div>
       </RadioGroup.Root>
     </Field.Field>
+
+    {#if courseApi.errors.type}
+      <div
+        class="ui:mt-2 ui:rounded-md ui:border ui:border-destructive/30 ui:bg-destructive/5 ui:p-3 ui:text-sm ui:text-destructive"
+        role="alert"
+      >
+        <div class="ui:font-medium">{$t('course.navItem.settings.convert_to_public_blocked')}</div>
+        <p class="ui:mt-1 ui:text-destructive/90">{courseApi.errors.type}</p>
+      </div>
+    {/if}
   </Field.Set>
 
+  {#if $settings.type === 'PUBLIC' && $settings.callout}
+    <Field.Separator />
+
+    <Field.Set>
+      <Field.Legend>{$t('course.navItem.settings.callout.legend')}</Field.Legend>
+      <Field.Description>{$t('course.navItem.settings.callout.description')}</Field.Description>
+
+      <Field.Group>
+        <Field.Field>
+          <Field.Label>{$t('course.navItem.settings.callout.title_label')}</Field.Label>
+          <InputField
+            bind:value={$settings.callout.title}
+            onInputChange={() => (hasUnsavedChanges = true)}
+            placeholder={$t('course.navItem.settings.callout.title_placeholder')}
+          />
+        </Field.Field>
+
+        <Field.Field>
+          <Field.Label>{$t('course.navItem.settings.callout.description_label')}</Field.Label>
+          <TextareaField
+            bind:value={$settings.callout.description}
+            oninput={() => (hasUnsavedChanges = true)}
+            rows={3}
+            placeholder={$t('course.navItem.settings.callout.description_placeholder')}
+          />
+        </Field.Field>
+
+        <Field.Field>
+          <Field.Label>{$t('course.navItem.settings.callout.button_label')}</Field.Label>
+          <InputField
+            bind:value={$settings.callout.buttonLabel}
+            onInputChange={() => (hasUnsavedChanges = true)}
+            placeholder={$t('course.navItem.settings.callout.button_label_placeholder')}
+          />
+        </Field.Field>
+
+        <Field.Field>
+          <Field.Label>{$t('course.navItem.settings.callout.button_url_label')}</Field.Label>
+          <InputField
+            bind:value={$settings.callout.buttonUrl}
+            onInputChange={() => (hasUnsavedChanges = true)}
+            placeholder={$t('course.navItem.settings.callout.button_url_placeholder')}
+            type="url"
+          />
+        </Field.Field>
+      </Field.Group>
+
+      <Field.Field>
+        <Button
+          variant="outline"
+          size="sm"
+          onclick={() => {
+            settings.update((prev) => ({ ...prev, callout: null }));
+            hasUnsavedChanges = true;
+          }}
+        >
+          {$t('course.navItem.settings.callout.clear')}
+        </Button>
+      </Field.Field>
+    </Field.Set>
+  {/if}
+
   <Field.Separator />
 
   <Field.Set>
diff --git a/apps/dashboard/src/lib/features/course/store.ts b/apps/dashboard/src/lib/features/course/store.ts
index 8f33085f..af800487 100644
--- a/apps/dashboard/src/lib/features/course/store.ts
+++ b/apps/dashboard/src/lib/features/course/store.ts
@@ -33,6 +33,8 @@ export const defaultCourse: Course = {
   bannerImage: null,
   attendance: [],
   group: null,
+  compliance: null,
+  callout: null,
   content: {
     grouped: false,
     sections: [],
diff --git a/apps/dashboard/src/lib/features/course/types.ts b/apps/dashboard/src/lib/features/course/types.ts
index 4b28b8d5..6586f31c 100644
--- a/apps/dashboard/src/lib/features/course/types.ts
+++ b/apps/dashboard/src/lib/features/course/types.ts
@@ -46,6 +46,7 @@ type QuestionOption = ApiOption & {
 
 // Extended question type with client-side fields
 export type Question = Omit<ApiQuestion, 'options'> & {
+  exerciseSectionId?: string | null;
   isDirty?: boolean;
   deletedAt?: string;
   options: QuestionOption[];
diff --git a/apps/dashboard/src/lib/features/course/utils/course-preview.ts b/apps/dashboard/src/lib/features/course/utils/course-preview.ts
index dd664885..cde98a19 100644
--- a/apps/dashboard/src/lib/features/course/utils/course-preview.ts
+++ b/apps/dashboard/src/lib/features/course/utils/course-preview.ts
@@ -8,6 +8,18 @@ interface OpenCoursePreviewOptions {
   currentOrgDomain?: string;
 }
 
+/** Absolute URL for the org-site public course page (`/course/{slug}`). Client-only. */
+export function getPublicCoursePageUrl(courseSlug: string, currentOrgDomain = ''): string {
+  if (typeof window === 'undefined') {
+    return '';
+  }
+
+  const trimmedDomain = currentOrgDomain?.trim();
+  const origin = trimmedDomain || window.location.origin;
+
+  return new URL(resolve(`/course/${courseSlug}`, {}), origin).toString();
+}
+
 export function openCoursePreview({ courseId, courseSlug, currentOrgDomain = '' }: OpenCoursePreviewOptions) {
   if (!courseSlug) {
     snackbar.info('course.header.preview_missing_slug');
@@ -19,9 +31,32 @@ export function openCoursePreview({ courseId, courseSlug, currentOrgDomain = ''
     return false;
   }
 
-  const origin = currentOrgDomain || window.location.origin;
-  const link = new URL(resolve(`/course/${courseSlug}`, {}), origin).toString();
+  const link = getPublicCoursePageUrl(courseSlug, currentOrgDomain);
+
+  if (!link) {
+    return false;
+  }
 
   window.open(link, '_blank', 'noopener,noreferrer');
   return true;
 }
+
+export async function copyPublicCoursePageUrl(courseSlug: string, currentOrgDomain = '') {
+  const url = getPublicCoursePageUrl(courseSlug, currentOrgDomain);
+
+  if (!url) {
+    return false;
+  }
+
+  try {
+    await navigator.clipboard.writeText(url);
+    snackbar.success('snackbar.public_course.url_copied');
+
+    return true;
+  } catch (error) {
+    console.error('copyPublicCoursePageUrl error:', error);
+    snackbar.error('snackbar.public_course.url_copy_failed');
+
+    return false;
+  }
+}
diff --git a/apps/dashboard/src/lib/features/course/utils/exercise-page-utils.ts b/apps/dashboard/src/lib/features/course/utils/exercise-page-utils.ts
index 41b9ff26..8ec3e589 100644
--- a/apps/dashboard/src/lib/features/course/utils/exercise-page-utils.ts
+++ b/apps/dashboard/src/lib/features/course/utils/exercise-page-utils.ts
@@ -1,28 +1,74 @@
-import type { Exercise } from '$features/course/utils/types';
-import type { Question } from '$features/course/types';
-import { exerciseApi } from '$features/course/api';
+import type { ExerciseSectionAfterBehavior, ExerciseSectionColorTheme } from '@cio/question-types';
 import {
   clearQuestionnaireValidation,
   questionnaire,
   questionnaireMetaData
 } from '$features/course/components/exercise/store';
 import { getQuestionTypeId, getQuestionTypeOptionById } from '$features/course/components/exercise/question-type-utils';
+
+import type { Exercise } from '$features/course/utils/types';
+import type { ExerciseSectionState } from '$features/course/components/exercise/store';
+import type { Question } from '$features/course/types';
+import { UNTITLED_EXERCISE_SECTION_TITLE } from './exercise-section-utils';
+import { exerciseApi } from '$features/course/api';
 import { normalizeQuestionOrder } from '$features/course/components/exercise/order-utils';
 
 export function hydrateExercisePageData(exercise: Exercise, exerciseId: string) {
   let questions: Question[] = [];
 
-  if (exercise.questions && Array.isArray(exercise.questions)) {
-    const mappedQuestions = exercise.questions.map((question) => {
+  const sections: ExerciseSectionState[] = Array.isArray(exercise.sections)
+    ? exercise.sections
+        .map((section) => ({
+          id: section.id,
+          title: section.title,
+          description: section.description ?? null,
+          order: section.order,
+          colorTheme: section.colorTheme as ExerciseSectionColorTheme,
+          afterBehavior: section.afterBehavior as unknown as ExerciseSectionAfterBehavior
+        }))
+        .sort((left, right) => left.order - right.order)
+    : [];
+
+  const exerciseQuestions = [...(Array.isArray(exercise.questions) ? exercise.questions : [])];
+
+  if (exerciseQuestions.length > 0) {
+    const mappedQuestions: Question[] = exerciseQuestions.map((question) => {
       const questionType = getQuestionTypeOptionById(getQuestionTypeId(question));
 
       return {
         ...question,
+        exerciseSectionId: question.exerciseSectionId ?? null,
         questionTypeId: questionType.id,
         questionType
       };
     });
 
+    if (sections.length > 0) {
+      const unsectionedQuestions = mappedQuestions.filter(
+        (question) => !question.deletedAt && !question.exerciseSectionId
+      );
+
+      if (unsectionedQuestions.length > 0) {
+        const untitledSectionId = crypto.randomUUID();
+        const nextSectionOrder =
+          sections.reduce((highestOrder, section) => Math.max(highestOrder, section.order), -1) + 1;
+        sections.push({
+          id: untitledSectionId,
+          title: UNTITLED_EXERCISE_SECTION_TITLE,
+          description: null,
+          order: nextSectionOrder,
+          colorTheme: 'blue',
+          afterBehavior: { action: 'continue' },
+          isDirty: true
+        });
+
+        for (const question of unsectionedQuestions) {
+          question.exerciseSectionId = untitledSectionId;
+          question.isDirty = true;
+        }
+      }
+    }
+
     questions = normalizeQuestionOrder(mappedQuestions);
   }
 
@@ -36,8 +82,11 @@ export function hydrateExercisePageData(exercise: Exercise, exerciseId: string)
     isDescriptionDirty: false,
     isDueByDirty: false,
     questions,
+    sections,
+    sectionDisplayMode: exercise.sectionDisplayMode ?? 'one_question',
     totalSubmissions: 0,
-    allowMultipleAttempts: !!exercise.allowMultipleAttempts
+    allowMultipleAttempts: !!exercise.allowMultipleAttempts,
+    slug: exercise.slug ?? ''
   });
 
   questionnaireMetaData.update((metadata) => ({ ...metadata, exerciseId }));
diff --git a/apps/dashboard/src/lib/features/course/utils/exercise-section-utils.ts b/apps/dashboard/src/lib/features/course/utils/exercise-section-utils.ts
new file mode 100644
index 00000000..8a87346e
--- /dev/null
+++ b/apps/dashboard/src/lib/features/course/utils/exercise-section-utils.ts
@@ -0,0 +1,15 @@
+export const UNTITLED_EXERCISE_SECTION_TITLE = 'Untitled section';
+
+export function getExerciseSectionDisplayTitle({
+  title,
+  sectionNumber,
+  sectionLabel
+}: {
+  title: string;
+  sectionNumber: number;
+  sectionLabel: string;
+}) {
+  if (title.trim() === UNTITLED_EXERCISE_SECTION_TITLE) return `${sectionLabel} ${sectionNumber}`;
+
+  return title;
+}
diff --git a/apps/dashboard/src/lib/features/course/utils/public-course-mappers.ts b/apps/dashboard/src/lib/features/course/utils/public-course-mappers.ts
new file mode 100644
index 00000000..12d704a6
--- /dev/null
+++ b/apps/dashboard/src/lib/features/course/utils/public-course-mappers.ts
@@ -0,0 +1,121 @@
+import type {
+  PublicCourseSidebarSection,
+  PublicExerciseViewData,
+  PublicLessonViewData
+} from '@cio/ui/custom/public-course';
+import type { ExerciseQuestionModel, ExerciseQuestionTypeKey } from '@cio/question-types';
+import { classroomio, type InferResponseType } from '$lib/utils/services/api';
+
+type GetPublicCourseSuccess = Extract<
+  InferResponseType<(typeof classroomio)['org-site']['course'][':courseSlug']['$get']>,
+  { success: true }
+>;
+
+type PublicCourseTree = GetPublicCourseSuccess['data'];
+
+type GetPublicCourseItemSuccess = Extract<
+  InferResponseType<(typeof classroomio)['org-site']['course'][':courseSlug']['item'][':itemSlug']['$get']>,
+  { success: true }
+>;
+
+type PublicItem = GetPublicCourseItemSuccess['data'];
+
+/**
+ * Group the flat tree into sidebar sections. Items that aren't assigned to any
+ * section are grouped under a synthetic "Lessons" section so the UI never has
+ * orphaned rows.
+ */
+export function toPublicSidebarSections(tree: PublicCourseTree): PublicCourseSidebarSection[] {
+  const sectionLookup = new Map<string, PublicCourseSidebarSection>();
+  for (const section of tree.sections) {
+    sectionLookup.set(section.id, {
+      id: section.id,
+      title: section.title,
+      items: []
+    });
+  }
+
+  const orphanSection: PublicCourseSidebarSection = {
+    id: '__unsectioned',
+    title: 'Lessons',
+    items: []
+  };
+
+  for (const item of tree.items) {
+    const targetSection =
+      item.sectionId && sectionLookup.has(item.sectionId) ? sectionLookup.get(item.sectionId)! : orphanSection;
+
+    targetSection.items.push({
+      kind: item.kind,
+      id: item.id,
+      slug: item.slug,
+      title: item.title,
+      isUnlocked: item.isUnlocked
+    });
+  }
+
+  const ordered = Array.from(sectionLookup.values()).filter((section) => section.items.length > 0);
+
+  if (orphanSection.items.length > 0) {
+    ordered.push(orphanSection);
+  }
+
+  return ordered;
+}
+
+export function toPublicLessonView(lesson: Extract<PublicItem, { kind: 'lesson' }>): PublicLessonViewData {
+  return {
+    kind: 'lesson',
+    title: lesson.title,
+    sectionTitle: lesson.sectionTitle,
+    body: lesson.body ?? '',
+    video: lesson.video,
+    isUnlocked: lesson.isUnlocked
+  };
+}
+
+type ApiQuestion = Extract<PublicItem, { kind: 'exercise' }>['questions']['unsectioned'][number];
+
+/**
+ * Convert API question shapes into `ExerciseQuestionModel`s so the public
+ * exercise view can drive the same renderer pipeline as the authenticated
+ * student view (`ExerciseQuestion.QuestionList`). Question types that aren't
+ * auto-gradable are filtered out — the creator UI already blocks them on
+ * PUBLIC courses, but we double-check here so the page never ships answers
+ * for a question we can't grade in the browser.
+ */
+export function toPublicExerciseQuestions(questions: {
+  unsectioned: ApiQuestion[];
+  sections: Array<{ questions: ApiQuestion[] }>;
+}): ExerciseQuestionModel[] {
+  const all = [...questions.unsectioned, ...questions.sections.flatMap((section) => section.questions)];
+
+  return all.map((question) => mapQuestion(question));
+}
+
+function mapQuestion(question: ApiQuestion): ExerciseQuestionModel {
+  return {
+    id: question.id,
+    title: question.title,
+    questionType: question.questionTypeKey as ExerciseQuestionTypeKey,
+    points: question.points,
+    options: question.options.map((option) => ({
+      id: option.id,
+      label: option.label,
+      isCorrect: option.isCorrect,
+      settings: (option.settings ?? {}) as Record<string, unknown>
+    })),
+    settings: (question.settings ?? {}) as Record<string, unknown>
+  };
+}
+
+export function toPublicExerciseView(exercise: Extract<PublicItem, { kind: 'exercise' }>): PublicExerciseViewData {
+  return {
+    kind: 'exercise',
+    title: exercise.title,
+    description: exercise.description,
+    sectionTitle: exercise.sectionTitle,
+    isUnlocked: exercise.isUnlocked,
+    questions: toPublicExerciseQuestions(exercise.questions)
+  };
+}
diff --git a/apps/dashboard/src/lib/features/course/utils/settings-store.ts b/apps/dashboard/src/lib/features/course/utils/settings-store.ts
index 89bb8b69..56277070 100644
--- a/apps/dashboard/src/lib/features/course/utils/settings-store.ts
+++ b/apps/dashboard/src/lib/features/course/utils/settings-store.ts
@@ -1,4 +1,5 @@
 import type { TCourseType } from '@cio/db/types';
+import type { TCourseCallout } from '@cio/utils/validation/course';
 import { writable } from 'svelte/store';
 
 type CourseSettings = {
@@ -6,12 +7,13 @@ type CourseSettings = {
   courseTitle: string;
   courseDescription: string;
   grading: boolean;
-  type: 'LIVE_CLASS' | 'SELF_PACED' | 'COMPLIANCE';
+  type: TCourseType;
   allowNewStudents: boolean;
   tabs: { id: number; name: string }[];
   lessonDownload: boolean;
   isPublished: boolean;
   isContentGroupingEnabled: boolean;
+  callout: TCourseCallout | null;
 };
 
 export const settings = writable<CourseSettings>({
@@ -19,7 +21,7 @@ export const settings = writable<CourseSettings>({
   courseTitle: '',
   courseDescription: '',
   grading: false,
-  type: 'LIVE_CLASS' as TCourseType,
+  type: 'SELF_PACED' as TCourseType,
   allowNewStudents: false,
   tabs: [
     { id: 1, name: 'course.navItem.lessons.materials.tabs.note.title' },
@@ -29,5 +31,6 @@ export const settings = writable<CourseSettings>({
   ],
   lessonDownload: false,
   isPublished: false,
-  isContentGroupingEnabled: true
+  isContentGroupingEnabled: true,
+  callout: null
 });
diff --git a/apps/dashboard/src/lib/features/course/utils/types.ts b/apps/dashboard/src/lib/features/course/utils/types.ts
index 33e9861e..8be2d2f8 100644
--- a/apps/dashboard/src/lib/features/course/utils/types.ts
+++ b/apps/dashboard/src/lib/features/course/utils/types.ts
@@ -261,6 +261,21 @@ export type UpdateSubmissionGradesRequest =
 export type CreateCourseRequest = typeof classroomio.course.$post;
 export type GetCourseRequest = (typeof classroomio.course)[':courseId']['$get'];
 export type GetCourseBySlugRequest = (typeof classroomio.course)['slug'][':slug']['$get'];
+export type GetCourseBySlugSuccess = Extract<InferResponseType<GetCourseBySlugRequest>, { success: true }>;
+export type GetCourseBySlugData = GetCourseBySlugSuccess['data'];
+
+/** Org snippet returned with course slug payload for org-site flows */
+export type CourseSlugPayloadOrg = {
+  id: string;
+  name: string;
+  siteName: string | null;
+  theme?: unknown;
+};
+
+/** Slug course shape including optional org (RPC unions omit `org` on some branches). */
+export type CourseBySlugWithOrg = GetCourseBySlugData & {
+  org?: CourseSlugPayloadOrg | null;
+};
 export type UpdateCourseRequest = (typeof classroomio.course)[':courseId']['$put'];
 export type DeleteCourseRequest = (typeof classroomio.course)[':courseId']['$delete'];
 export type UpdateCourseContentRequest = (typeof classroomio.course)[':courseId']['content']['$put'];
@@ -444,3 +459,10 @@ export type VideoUploadPresignSuccess = Extract<InferResponseType<VideoUploadPre
 
 export type VideoDownloadPresignRequest = (typeof classroomio.course)['presign']['video']['download']['$post'];
 export type VideoDownloadPresignSuccess = Extract<InferResponseType<VideoDownloadPresignRequest>, { success: true }>;
+
+export type VideoRecordingUploadInitRequest =
+  (typeof classroomio.course)[':courseId']['exercise'][':exerciseId']['question'][':questionId']['video-recording']['upload']['init']['$post'];
+export type VideoRecordingUploadCompleteRequest =
+  (typeof classroomio.course)[':courseId']['exercise'][':exerciseId']['question'][':questionId']['video-recording']['upload']['complete']['$post'];
+export type VideoRecordingPlaybackRequest =
+  (typeof classroomio.course)[':courseId']['exercise'][':exerciseId']['submission'][':submissionId']['question'][':questionId']['video-recording']['playback']['$get'];
diff --git a/apps/dashboard/src/lib/features/license/api/license.svelte.ts b/apps/dashboard/src/lib/features/license/api/license.svelte.ts
index f318556a..b32f34a9 100644
--- a/apps/dashboard/src/lib/features/license/api/license.svelte.ts
+++ b/apps/dashboard/src/lib/features/license/api/license.svelte.ts
@@ -22,7 +22,7 @@ class LicenseApi {
     const deduped: LicenseFeatureId[] = [];
 
     for (const feature of features) {
-      if (LICENSE_FEATURE_IDS.includes(feature)) {
+      if ((LICENSE_FEATURE_IDS as readonly string[]).includes(feature)) {
         const typedFeature = feature as LicenseFeatureId;
         if (!deduped.includes(typedFeature)) {
           deduped.push(typedFeature);
diff --git a/apps/dashboard/src/lib/features/lms/pages/dashboard.svelte b/apps/dashboard/src/lib/features/lms/pages/dashboard.svelte
index 4364f4ef..f0fe4d5a 100644
--- a/apps/dashboard/src/lib/features/lms/pages/dashboard.svelte
+++ b/apps/dashboard/src/lib/features/lms/pages/dashboard.svelte
@@ -13,9 +13,14 @@
   import UserRoundIcon from '@lucide/svelte/icons/user-round';
   import { t } from '$lib/utils/functions/translations';
   import { classroomio } from '$lib/utils/services/api';
-  import { currentOrg } from '$lib/utils/store/org';
+  import { currentOrg, currentOrgDomain } from '$lib/utils/store/org';
   import { profile } from '$lib/utils/store/user';
   import { coursesApi } from '$features/course/api';
+  import CoursePublicBadge from '$features/course/components/course-public-badge.svelte';
+  import { IconButton } from '@cio/ui/custom/icon-button';
+  import ExternalLinkIcon from '@lucide/svelte/icons/external-link';
+  import CopyIcon from '@lucide/svelte/icons/copy';
+  import { copyPublicCoursePageUrl, openCoursePreview } from '$features/course/utils/course-preview';
   import {
     getStudentCourseComplianceDate,
     getStudentCourseComplianceStatusKey,
@@ -113,6 +118,44 @@
 
     goto(`/courses/${id}/lessons?next=true`);
   }
+
+  function showPublishedPublicCourseLinks(course: EnrolledCourse | null) {
+    if (!course || course.type !== 'PUBLIC') {
+      return false;
+    }
+
+    const publicSlug = typeof course.slug === 'string' ? course.slug : '';
+
+    if (!publicSlug.trim()) {
+      return false;
+    }
+
+    return !!course.isPublished;
+  }
+
+  function openPublicCoursePage(course: EnrolledCourse | null) {
+    if (!course?.id || !showPublishedPublicCourseLinks(course)) {
+      return;
+    }
+
+    const publicSlug = typeof course.slug === 'string' ? course.slug : '';
+
+    openCoursePreview({
+      courseId: course.id,
+      courseSlug: publicSlug,
+      currentOrgDomain: $currentOrgDomain
+    });
+  }
+
+  async function copyPublicCourseLink(course: EnrolledCourse | null) {
+    if (!course || !showPublishedPublicCourseLinks(course)) {
+      return;
+    }
+
+    const publicSlug = typeof course.slug === 'string' ? course.slug : '';
+
+    await copyPublicCoursePageUrl(publicSlug, $currentOrgDomain);
+  }
 </script>
 
 <div class="space-y-6 pb-8">
@@ -132,17 +175,37 @@
           </h2>
         </div>
 
-        <Button
-          variant="outline"
-          class="shrink-0"
-          onclick={() => (currentCourse ? gotoCourse(currentCourse.id) : goto('/lms/explore'))}
-        >
-          {#if currentCourse}
-            {$t('dashboard.continue_learning')}
-          {:else}
-            {$t('dashboard.view_courses')}
+        <div class="flex shrink-0 flex-wrap items-center gap-2">
+          {#if currentCourse && showPublishedPublicCourseLinks(currentCourse)}
+            <IconButton
+              variant="outline"
+              onclick={() => openPublicCoursePage(currentCourse)}
+              tooltip={$t('courses.course_card.context_menu.open_public_course')}
+              aria-label={$t('courses.course_card.context_menu.open_public_course')}
+            >
+              <ExternalLinkIcon class="size-4" />
+            </IconButton>
+            <IconButton
+              variant="outline"
+              onclick={() => void copyPublicCourseLink(currentCourse)}
+              tooltip={$t('courses.course_card.context_menu.copy_course_url')}
+              aria-label={$t('courses.course_card.context_menu.copy_course_url')}
+            >
+              <CopyIcon class="size-4" />
+            </IconButton>
           {/if}
-        </Button>
+          <Button
+            variant="outline"
+            class="shrink-0"
+            onclick={() => (currentCourse ? gotoCourse(currentCourse.id) : goto('/lms/explore'))}
+          >
+            {#if currentCourse}
+              {$t('dashboard.continue_learning')}
+            {:else}
+              {$t('dashboard.view_courses')}
+            {/if}
+          </Button>
+        </div>
       </div>
     </section>
   </BlurFade>
@@ -215,7 +278,12 @@
                   </div>
 
                   <div class="min-w-0 flex-1">
-                    <h3 class="truncate text-base font-semibold">{course.title}</h3>
+                    <div class="flex min-w-0 flex-wrap items-center gap-2">
+                      <h3 class="truncate text-base font-semibold">{course.title}</h3>
+                      {#if course.type === 'PUBLIC'}
+                        <CoursePublicBadge class="shrink-0" />
+                      {/if}
+                    </div>
                     {#if course.description}
                       <p class="ui:text-muted-foreground mt-1 line-clamp-2 text-sm">{course.description}</p>
                     {/if}
@@ -233,9 +301,29 @@
                   </div>
                 </div>
 
-                <Button variant="outline" class="shrink-0" onclick={() => gotoCourse(course.id)}>
-                  {$t('dashboard.continue')}
-                </Button>
+                <div class="flex shrink-0 items-center gap-2">
+                  {#if showPublishedPublicCourseLinks(course)}
+                    <IconButton
+                      variant="outline"
+                      onclick={() => openPublicCoursePage(course)}
+                      tooltip={$t('courses.course_card.context_menu.open_public_course')}
+                      aria-label={$t('courses.course_card.context_menu.open_public_course')}
+                    >
+                      <ExternalLinkIcon class="size-4" />
+                    </IconButton>
+                    <IconButton
+                      variant="outline"
+                      onclick={() => void copyPublicCourseLink(course)}
+                      tooltip={$t('courses.course_card.context_menu.copy_course_url')}
+                      aria-label={$t('courses.course_card.context_menu.copy_course_url')}
+                    >
+                      <CopyIcon class="size-4" />
+                    </IconButton>
+                  {/if}
+                  <Button variant="outline" class="shrink-0" onclick={() => gotoCourse(course.id)}>
+                    {$t('dashboard.continue')}
+                  </Button>
+                </div>
               </div>
 
               <div class="mt-5 flex items-center gap-4">
diff --git a/apps/dashboard/src/lib/features/settings/api/ai-credits.svelte.ts b/apps/dashboard/src/lib/features/settings/api/ai-credits.svelte.ts
new file mode 100644
index 00000000..2eeeed35
--- /dev/null
+++ b/apps/dashboard/src/lib/features/settings/api/ai-credits.svelte.ts
@@ -0,0 +1,51 @@
+import { BaseApi, classroomio } from '$lib/utils/services/api';
+import type {
+  AiUsageData,
+  GetLeaderboardRequest,
+  GetPurchasedRequest,
+  GetUsageRequest,
+  LeaderboardData,
+  PurchasedSummaryData
+} from '../utils/types';
+
+class AiCreditsApi extends BaseApi {
+  usage = $state<AiUsageData | null>(null);
+  purchased = $state<PurchasedSummaryData | null>(null);
+  leaderboard = $state<LeaderboardData | null>(null);
+
+  async fetchAll() {
+    await Promise.all([this.fetchUsage(), this.fetchPurchased(), this.fetchLeaderboard()]);
+  }
+
+  async fetchUsage() {
+    await this.execute<GetUsageRequest>({
+      requestFn: () => classroomio.agent.usage.$get(),
+      logContext: 'fetching AI usage',
+      onSuccess: (result) => {
+        this.usage = result.data;
+      }
+    });
+  }
+
+  async fetchPurchased() {
+    await this.execute<GetPurchasedRequest>({
+      requestFn: () => classroomio.agent.usage.purchased.$get(),
+      logContext: 'fetching purchased summary',
+      onSuccess: (result) => {
+        this.purchased = result.data;
+      }
+    });
+  }
+
+  async fetchLeaderboard() {
+    await this.execute<GetLeaderboardRequest>({
+      requestFn: () => classroomio.agent.usage.leaderboard.$get(),
+      logContext: 'fetching AI usage leaderboard',
+      onSuccess: (result) => {
+        this.leaderboard = result.data;
+      }
+    });
+  }
+}
+
+export const aiCreditsApi = new AiCreditsApi();
diff --git a/apps/dashboard/src/lib/features/settings/components/ai-credits/buy-tokens-card.svelte b/apps/dashboard/src/lib/features/settings/components/ai-credits/buy-tokens-card.svelte
new file mode 100644
index 00000000..d5e58fd4
--- /dev/null
+++ b/apps/dashboard/src/lib/features/settings/components/ai-credits/buy-tokens-card.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+  import { page } from '$app/state';
+  import { t } from '$lib/utils/functions/translations';
+  import * as Card from '@cio/ui/base/card';
+  import { Button } from '@cio/ui/base/button';
+  import MinusIcon from '@lucide/svelte/icons/minus';
+  import PlusIcon from '@lucide/svelte/icons/plus';
+  import { TOKEN_PACK } from '@cio/utils/plans';
+  import { snackbar } from '$features/ui/snackbar/store';
+  import { currentOrg } from '$lib/utils/store/org';
+  import { profile } from '$lib/utils/store/user';
+
+  interface Props {
+    onBeforeRedirect?: () => void;
+  }
+
+  let { onBeforeRedirect }: Props = $props();
+
+  let quantity = $state(1);
+  let isRedirecting = $state(false);
+
+  const tokens = $derived(quantity * TOKEN_PACK.TOKENS_PER_UNIT);
+  const dollars = $derived((quantity * TOKEN_PACK.PRICE_USD_CENTS) / 100);
+
+  function bump(delta: number) {
+    quantity = Math.min(100, Math.max(1, quantity + delta));
+  }
+
+  function buy() {
+    if (!$profile.id || !$profile.email || !$currentOrg.id || !$currentOrg.siteName) {
+      snackbar.error('snackbar.ai_credits.checkout_failed');
+
+      return;
+    }
+
+    isRedirecting = true;
+
+    const checkoutURL = new URL('/api/polar/buy-tokens', page.url);
+    checkoutURL.searchParams.set('quantity', String(quantity));
+    checkoutURL.searchParams.set('customerEmail', $profile.email?.replace('@test.com', '+test@digdippa.com') ?? '');
+
+    if ($profile.fullname) {
+      checkoutURL.searchParams.set('customerName', $profile.fullname);
+    }
+
+    checkoutURL.searchParams.set(
+      'metadata',
+      JSON.stringify({
+        orgId: $currentOrg.id,
+        orgSlug: $currentOrg.siteName,
+        triggeredBy: $profile.id
+      })
+    );
+
+    onBeforeRedirect?.();
+    window.location.href = checkoutURL.toString();
+  }
+</script>
+
+<Card.Root id="buy-tokens">
+  <Card.Header>
+    <Card.Title>{$t('settings.ai_credits.buy_tokens.title')}</Card.Title>
+    <Card.Description>
+      {$t('settings.ai_credits.buy_tokens.description')}
+    </Card.Description>
+  </Card.Header>
+  <Card.Content class="flex flex-col gap-4">
+    <div class="flex items-center gap-2">
+      <Button variant="outline" size="icon" onclick={() => bump(-1)} disabled={quantity <= 1}>
+        <MinusIcon class="size-4" />
+      </Button>
+      <span class="ui:text-muted-foreground min-w-[3rem] text-center text-sm font-medium tabular-nums">
+        {quantity}
+      </span>
+      <Button variant="outline" size="icon" onclick={() => bump(1)} disabled={quantity >= 100}>
+        <PlusIcon class="size-4" />
+      </Button>
+      <span class="ui:text-muted-foreground ml-2 text-xs">
+        {$t('settings.ai_credits.buy_tokens.quantity_hint')}
+      </span>
+    </div>
+
+    <p class="ui:text-muted-foreground text-sm">
+      {$t('settings.ai_credits.buy_tokens.preview', {
+        quantity: String(quantity),
+        tokens: tokens.toLocaleString(),
+        dollars: dollars.toFixed(2)
+      })}
+    </p>
+
+    <Button onclick={buy} loading={isRedirecting} class="w-fit">
+      {$t('settings.ai_credits.buy_tokens.buy_button', { dollars: dollars.toFixed(2) })}
+    </Button>
+  </Card.Content>
+</Card.Root>
diff --git a/apps/dashboard/src/lib/features/settings/components/ai-credits/team-leaderboard.svelte b/apps/dashboard/src/lib/features/settings/components/ai-credits/team-leaderboard.svelte
new file mode 100644
index 00000000..6c37e50b
--- /dev/null
+++ b/apps/dashboard/src/lib/features/settings/components/ai-credits/team-leaderboard.svelte
@@ -0,0 +1,84 @@
+<script lang="ts">
+  import { t } from '$lib/utils/functions/translations';
+  import * as Table from '@cio/ui/base/table';
+  import * as Avatar from '@cio/ui/base/avatar';
+  import type { LeaderboardData } from '$features/settings/utils/types';
+
+  interface Props {
+    leaderboard: LeaderboardData | null;
+  }
+
+  let { leaderboard }: Props = $props();
+
+  const entries = $derived(leaderboard?.entries ?? []);
+
+  function initials(name: string | null, email: string | null) {
+    const source = (name?.trim() || email || '?').split(/\s+/).filter(Boolean);
+
+    return source
+      .slice(0, 2)
+      .map((part) => part[0]?.toUpperCase() ?? '')
+      .join('');
+  }
+</script>
+
+<div>
+  <div class="mb-3 flex items-baseline justify-between gap-2">
+    <h3 class="text-lg font-semibold tracking-tight">{$t('settings.ai_credits.leaderboard.title')}</h3>
+    <p class="ui:text-muted-foreground text-xs">{$t('settings.ai_credits.leaderboard.this_month')}</p>
+  </div>
+
+  <div class="rounded-md border">
+    <Table.Root>
+      <Table.Header>
+        <Table.Row>
+          <Table.Head class="w-10">#</Table.Head>
+          <Table.Head>{$t('settings.ai_credits.leaderboard.user')}</Table.Head>
+          <Table.Head>{$t('settings.ai_credits.leaderboard.favorite_model')}</Table.Head>
+          <Table.Head class="text-right">{$t('settings.ai_credits.leaderboard.tokens')}</Table.Head>
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        {#each entries as entry, index (entry.userId)}
+          <Table.Row>
+            <Table.Cell class="ui:text-muted-foreground">{index + 1}</Table.Cell>
+            <Table.Cell>
+              <div class="flex items-center gap-3">
+                <Avatar.Root class="size-8">
+                  {#if entry.avatarUrl}
+                    <Avatar.Image src={entry.avatarUrl} alt={entry.fullname ?? ''} loading="lazy" decoding="async" />
+                  {/if}
+                  <Avatar.Fallback aria-hidden="true">{initials(entry.fullname, entry.email)}</Avatar.Fallback>
+                </Avatar.Root>
+                <div class="flex min-w-0 flex-col">
+                  <span class="truncate text-sm font-medium">{entry.fullname ?? entry.email ?? '—'}</span>
+                  <span class="ui:text-muted-foreground truncate text-xs">{entry.email ?? ''}</span>
+                </div>
+              </div>
+            </Table.Cell>
+            <Table.Cell class="ui:text-muted-foreground max-w-[12rem] truncate text-sm">
+              {entry.favoriteModel ?? '—'}
+            </Table.Cell>
+            <Table.Cell class="text-right">
+              <div class="inline-flex flex-col items-end gap-1">
+                <span class="text-sm font-medium">{entry.tokens.toLocaleString()}</span>
+                <div class="ui:bg-muted h-1 w-24 rounded-full">
+                  <div
+                    class="ui:bg-primary h-1 rounded-full"
+                    style="width: {Math.min(100, Math.round(entry.percentage * 100))}%"
+                  ></div>
+                </div>
+              </div>
+            </Table.Cell>
+          </Table.Row>
+        {:else}
+          <Table.Row>
+            <Table.Cell class="ui:text-muted-foreground py-8 text-center text-sm" colspan={4}>
+              {$t('settings.ai_credits.leaderboard.empty')}
+            </Table.Cell>
+          </Table.Row>
+        {/each}
+      </Table.Body>
+    </Table.Root>
+  </div>
+</div>
diff --git a/apps/dashboard/src/lib/features/settings/components/ai-credits/usage-chart.svelte b/apps/dashboard/src/lib/features/settings/components/ai-credits/usage-chart.svelte
new file mode 100644
index 00000000..ffff7168
--- /dev/null
+++ b/apps/dashboard/src/lib/features/settings/components/ai-credits/usage-chart.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+  import * as Chart from '@cio/ui/base/chart';
+  import { t } from '$lib/utils/functions/translations';
+  import type { AiUsageData } from '$features/settings/utils/types';
+
+  interface Props {
+    usage: AiUsageData | null;
+  }
+
+  let { usage }: Props = $props();
+
+  const data = $derived(usage?.history ?? []);
+  const totalTokens = $derived(data.reduce((sum, day) => sum + day.tokens, 0));
+  const totalRequests = $derived(usage?.requestsThisMonth ?? 0);
+
+  const chartConfig = $derived({
+    tokens: {
+      label: $t('settings.ai_credits.chart.tokens'),
+      color: 'var(--chart-1)'
+    }
+  } satisfies Chart.ChartConfig);
+
+  const series = $derived([
+    { key: 'tokens', value: 'tokens', label: chartConfig.tokens.label, color: 'var(--color-tokens)' }
+  ]);
+
+  const hasData = $derived(data.some((day) => day.tokens > 0));
+</script>
+
+<div class="bg-card flex flex-col rounded-xl border p-3 md:p-5 dark:text-white">
+  <div class="mb-4 flex flex-wrap items-start justify-between gap-4">
+    <div>
+      <h3 class="text-lg font-semibold tracking-tight">{$t('settings.ai_credits.chart.heading')}</h3>
+      <p class="ui:text-muted-foreground mt-1 text-sm">
+        {$t('settings.ai_credits.chart.subheading')}
+      </p>
+    </div>
+    <div class="flex flex-wrap gap-6 text-right">
+      <div>
+        <p class="ui:text-muted-foreground text-xs">{$t('settings.ai_credits.chart.total_tokens')}</p>
+        <p class="text-xl font-semibold">{totalTokens.toLocaleString()}</p>
+      </div>
+      <div>
+        <p class="ui:text-muted-foreground text-xs">{$t('settings.ai_credits.chart.total_requests')}</p>
+        <p class="text-xl font-semibold">{totalRequests.toLocaleString()}</p>
+      </div>
+    </div>
+  </div>
+
+  {#if hasData}
+    <Chart.ChartContainer class="h-[260px] w-full" config={chartConfig}>
+      <Chart.BarChart {data} x="date" axis="x" {series} />
+    </Chart.ChartContainer>
+  {:else}
+    <div class="ui:text-muted-foreground flex h-[260px] items-center justify-center text-sm">
+      {$t('settings.ai_credits.chart.empty')}
+    </div>
+  {/if}
+</div>
diff --git a/apps/dashboard/src/lib/features/settings/components/ai-credits/usage-summary-cards.svelte b/apps/dashboard/src/lib/features/settings/components/ai-credits/usage-summary-cards.svelte
new file mode 100644
index 00000000..6ff2225b
--- /dev/null
+++ b/apps/dashboard/src/lib/features/settings/components/ai-credits/usage-summary-cards.svelte
@@ -0,0 +1,88 @@
+<script lang="ts">
+  import { t } from '$lib/utils/functions/translations';
+  import * as Card from '@cio/ui/base/card';
+  import { Button } from '@cio/ui/base/button';
+  import { SvelteDate } from 'svelte/reactivity';
+  import type { AiUsageData, PurchasedSummaryData } from '$features/settings/utils/types';
+
+  interface Props {
+    usage: AiUsageData | null;
+    purchased: PurchasedSummaryData | null;
+  }
+
+  let { usage, purchased }: Props = $props();
+
+  const includedPercent = $derived(
+    usage && usage.allowance > 0 ? Math.min(100, Math.round((usage.used / usage.allowance) * 100)) : 0
+  );
+
+  const resetDate = $derived.by(() => {
+    const nextReset = new SvelteDate();
+    nextReset.setMonth(nextReset.getMonth() + 1);
+    nextReset.setDate(1);
+
+    return nextReset.toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' });
+  });
+
+  const dollarsSpent = $derived(purchased ? (purchased.totalSpentCents / 100).toFixed(2) : '0.00');
+</script>
+
+<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+  <Card.Root>
+    <Card.Header>
+      <Card.Description>{$t('settings.ai_credits.included.title')}</Card.Description>
+      <Card.Title class="text-2xl">
+        {#if usage}
+          {usage.used.toLocaleString()} / {usage.allowance.toLocaleString()}
+        {:else}
+          —
+        {/if}
+      </Card.Title>
+    </Card.Header>
+    <Card.Content>
+      <p class="ui:text-muted-foreground mb-3 text-xs">
+        {$t('settings.ai_credits.included.subtitle')}
+      </p>
+      <div class="ui:bg-muted h-2 w-full rounded-full">
+        <div
+          class="h-2 rounded-full transition-all {includedPercent > 90
+            ? 'bg-red-500'
+            : includedPercent > 70
+              ? 'bg-amber-500'
+              : 'ui:bg-primary'}"
+          style="width: {includedPercent}%"
+        ></div>
+      </div>
+      <p class="ui:text-muted-foreground mt-2 text-xs">
+        {$t('settings.ai_credits.included.resets_on', { date: resetDate })}
+      </p>
+    </Card.Content>
+  </Card.Root>
+
+  <Card.Root>
+    <Card.Header>
+      <Card.Description>{$t('settings.ai_credits.purchased.title')}</Card.Description>
+      <Card.Title class="text-2xl">
+        {#if purchased}
+          {purchased.currentBalance.toLocaleString()}
+        {:else}
+          —
+        {/if}
+      </Card.Title>
+    </Card.Header>
+    <Card.Content class="flex flex-col gap-3">
+      <p class="ui:text-muted-foreground text-xs">
+        {$t('settings.ai_credits.purchased.subtitle')}
+      </p>
+      <p class="ui:text-muted-foreground text-xs">
+        {$t('settings.ai_credits.purchased.lifetime', {
+          tokens: purchased ? purchased.totalPurchasedTokens.toLocaleString() : '0',
+          dollars: dollarsSpent
+        })}
+      </p>
+      <Button variant="outline" size="sm" class="w-fit" href="#buy-tokens">
+        {$t('settings.ai_credits.purchased.buy_more')}
+      </Button>
+    </Card.Content>
+  </Card.Root>
+</div>
diff --git a/apps/dashboard/src/lib/features/settings/pages/ai-credits.svelte b/apps/dashboard/src/lib/features/settings/pages/ai-credits.svelte
new file mode 100644
index 00000000..96acdb37
--- /dev/null
+++ b/apps/dashboard/src/lib/features/settings/pages/ai-credits.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { page } from '$app/state';
+  import BuyTokensCard from '$features/settings/components/ai-credits/buy-tokens-card.svelte';
+  import TeamLeaderboard from '$features/settings/components/ai-credits/team-leaderboard.svelte';
+  import UsageChart from '$features/settings/components/ai-credits/usage-chart.svelte';
+  import UsageSummaryCards from '$features/settings/components/ai-credits/usage-summary-cards.svelte';
+  import { aiCreditsApi } from '$features/settings/api/ai-credits.svelte';
+  import { snackbar } from '$features/ui/snackbar/store';
+  import { currentOrg } from '$lib/utils/store/org';
+  import { t } from '$lib/utils/functions/translations';
+
+  let lastFetchedOrgId = $state<string | null>(null);
+
+  $effect(() => {
+    const orgId = $currentOrg.id;
+
+    if (!orgId || orgId === lastFetchedOrgId) {
+      return;
+    }
+
+    lastFetchedOrgId = orgId;
+    void aiCreditsApi.fetchAll();
+  });
+
+  onMount(() => {
+    if (page.url.searchParams.get('tokens') === 'success') {
+      snackbar.success('snackbar.ai_credits.purchase_success');
+      void aiCreditsApi.fetchAll();
+    }
+  });
+</script>
+
+<div class="ui:mx-auto flex w-full max-w-5xl flex-col gap-8 px-2 pb-12">
+  <UsageSummaryCards usage={aiCreditsApi.usage} purchased={aiCreditsApi.purchased} />
+  <p class="ui:text-muted-foreground -mt-4 text-sm">{$t('settings.ai_credits.cost_note')}</p>
+  <UsageChart usage={aiCreditsApi.usage} />
+  <TeamLeaderboard leaderboard={aiCreditsApi.leaderboard} />
+  <BuyTokensCard onBeforeRedirect={() => aiCreditsApi.fetchAll()} />
+</div>
diff --git a/apps/dashboard/src/lib/features/settings/pages/billing.svelte b/apps/dashboard/src/lib/features/settings/pages/billing.svelte
index a19337ca..99f45a50 100644
--- a/apps/dashboard/src/lib/features/settings/pages/billing.svelte
+++ b/apps/dashboard/src/lib/features/settings/pages/billing.svelte
@@ -3,53 +3,14 @@
   import { snackbar } from '$features/ui/snackbar/store';
   import { currentOrgPlan, isFreePlan, currentOrg } from '$lib/utils/store/org';
   import HourglassIcon from '@lucide/svelte/icons/hourglass';
-  import SparklesIcon from '@lucide/svelte/icons/sparkles';
   import { openUpgradeModal } from '$lib/utils/functions/org';
   import ReceiptIcon from '@lucide/svelte/icons/receipt';
   import { Button } from '@cio/ui/base/button';
   import * as Item from '@cio/ui/base/item';
   import { ExternalLinkIcon, HoverableItem } from '@cio/ui/custom/moving-icons';
 
-  const PUBLIC_API_URL = import.meta.env.VITE_API_URL || '';
-
   let isRedirecting = $state(false);
 
-  interface AiUsageData {
-    used: number;
-    allowance: number;
-    creditBalance: number;
-    remaining: number;
-  }
-
-  let aiUsage: AiUsageData | null = $state(null);
-  let aiUsageLoaded = $state(false);
-
-  $effect(() => {
-    if (!aiUsageLoaded && $currentOrg.id) {
-      aiUsageLoaded = true;
-      fetchAiUsage();
-    }
-  });
-
-  async function fetchAiUsage() {
-    try {
-      const response = await fetch(`${PUBLIC_API_URL}/agent/usage`, {
-        headers: { 'Cio-org-id': $currentOrg.id || '' },
-        credentials: 'include'
-      });
-
-      if (response.ok) {
-        const result = await response.json();
-
-        if (result.success) {
-          aiUsage = result.data;
-        }
-      }
-    } catch {
-      // Silently fail
-    }
-  }
-
   async function onOpenBilling() {
     console.log({
       plan: $currentOrgPlan
@@ -119,39 +80,4 @@
       </Item.Actions>
     </Item.Root>
   {/if}
-
-  {#if aiUsage}
-    <div class="mt-6">
-      <p class="text-md mb-3 font-medium">{$t('settings.billing.ai_credits')}</p>
-
-      <Item.Root variant="outline">
-        <Item.Media variant="icon">
-          <SparklesIcon />
-        </Item.Media>
-        <Item.Content>
-          <Item.Title>
-            {aiUsage.used.toLocaleString()} / {aiUsage.allowance.toLocaleString()}
-            {$t('settings.billing.ai_tokens_used')}
-          </Item.Title>
-          <Item.Description>
-            {aiUsage.creditBalance.toLocaleString()}
-            {$t('settings.billing.ai_bonus_credits')}
-          </Item.Description>
-
-          {@const usagePercent =
-            aiUsage.allowance > 0 ? Math.min(100, Math.round((aiUsage.used / aiUsage.allowance) * 100)) : 0}
-          <div class="ui:bg-muted mt-2 h-1.5 w-full rounded-full">
-            <div
-              class="h-1.5 rounded-full transition-all {usagePercent > 90
-                ? 'bg-red-500'
-                : usagePercent > 70
-                  ? 'bg-amber-500'
-                  : 'ui:bg-primary'}"
-              style="width: {usagePercent}%"
-            ></div>
-          </div>
-        </Item.Content>
-      </Item.Root>
-    </div>
-  {/if}
 </div>
diff --git a/apps/dashboard/src/lib/features/settings/pages/index.ts b/apps/dashboard/src/lib/features/settings/pages/index.ts
index 36b7d90d..6615556c 100644
--- a/apps/dashboard/src/lib/features/settings/pages/index.ts
+++ b/apps/dashboard/src/lib/features/settings/pages/index.ts
@@ -6,6 +6,7 @@ export { default as OrgPage } from './org.svelte';
 export { default as LandingpagePage } from './landingpage.svelte';
 export { default as LandingpageEditor } from './landingpage-editor.svelte';
 export { default as BillingPage } from './billing.svelte';
+export { default as AiCreditsPage } from './ai-credits.svelte';
 export { default as IntegrationsPage } from './integrations.svelte';
 export { default as AuthPage } from './auth.svelte';
 // Keep old exports for backward compatibility
diff --git a/apps/dashboard/src/lib/features/settings/utils/types.ts b/apps/dashboard/src/lib/features/settings/utils/types.ts
new file mode 100644
index 00000000..e0db4914
--- /dev/null
+++ b/apps/dashboard/src/lib/features/settings/utils/types.ts
@@ -0,0 +1,14 @@
+import { classroomio, type InferResponseType } from '$lib/utils/services/api';
+
+export type GetUsageRequest = typeof classroomio.agent.usage.$get;
+export type GetPurchasedRequest = (typeof classroomio.agent.usage)['purchased']['$get'];
+export type GetLeaderboardRequest = (typeof classroomio.agent.usage)['leaderboard']['$get'];
+
+type GetUsageSuccess = Extract<InferResponseType<GetUsageRequest>, { success: true }>;
+type GetPurchasedSuccess = Extract<InferResponseType<GetPurchasedRequest>, { success: true }>;
+type GetLeaderboardSuccess = Extract<InferResponseType<GetLeaderboardRequest>, { success: true }>;
+
+export type AiUsageData = GetUsageSuccess['data'];
+export type PurchasedSummaryData = GetPurchasedSuccess['data'];
+export type LeaderboardData = GetLeaderboardSuccess['data'];
+export type LeaderboardEntry = LeaderboardData['entries'][number];
diff --git a/apps/dashboard/src/lib/features/ui/course-landing-page/course-landing-page.svelte b/apps/dashboard/src/lib/features/ui/course-landing-page/course-landing-page.svelte
index 5a239779..752ea42e 100644
--- a/apps/dashboard/src/lib/features/ui/course-landing-page/course-landing-page.svelte
+++ b/apps/dashboard/src/lib/features/ui/course-landing-page/course-landing-page.svelte
@@ -4,6 +4,7 @@
   import { page } from '$app/state';
   import { onMount, onDestroy } from 'svelte';
   import { resolve } from '$app/paths';
+  import type { Component } from 'svelte';
   import { SafeHtmlContent } from '@cio/ui/custom/safe-html-content';
   import PlayIcon from '@lucide/svelte/icons/play';
   import UserIcon from '@lucide/svelte/icons/user';
@@ -13,23 +14,20 @@
   import ClockIcon from '@lucide/svelte/icons/clock';
 
   import { BlurFade } from '@cio/ui/custom/animation/blurfade';
-  import { BlurIn } from '@cio/ui/custom/animation/blurin';
-  import { DotPattern } from '@cio/ui/custom/animation/dot-pattern';
-  import { HeroVideoDialog } from '@cio/ui/custom/animation/hero-video-dialog';
   import { Sparkle } from '@cio/ui/custom/animation/sparkle';
   import { MagicCard } from '@cio/ui/custom/animation/magic-card';
 
   import { getLectureNo } from '$features/course/utils/functions';
+  import { normalizeLandingPageSettings } from '$features/org/utils/landing-page';
   import { currentOrg } from '$lib/utils/store/org';
-  import { globalStore } from '$lib/utils/store/app';
-  import Navigation from '$lib/components/Navigation/index.svelte';
+  import { basePath } from '$lib/utils/store/app';
+  import { user } from '$lib/utils/store/user';
   import { NAV_ITEM_KEY, NAV_ITEMS } from './constants';
   import { t } from '$lib/utils/functions/translations';
   import { calDateDiff } from '$lib/utils/functions/date';
   import { handleOpenWidget, reviewsModalStore } from './store';
   import type { Course, CourseMetadata } from '$features/course/utils/types';
   import { courseApi } from '$features/course/api';
-  import { formatYoutubeEmbedUrl, isYoutubeUrl } from '@cio/ui/custom/media-player';
   import { filterNavItems, getCourseLessons, getCourseSections, getTotalLessons } from './utils';
   import { Button } from '@cio/ui/base/button';
 
@@ -52,27 +50,110 @@
     showStandaloneShell?: boolean;
   }
 
-  let { editMode = false, courseData = $bindable(), showStandaloneShell = true }: Props = $props();
+  let { editMode = false, courseData = $bindable(), showStandaloneShell = false }: Props = $props();
+
+  /** Editor / standalone shell: show org-theme hero + nav from `currentOrg.landingpage`. Org-site embed omits (parent provides hero). */
+  const showMarketingHero = $derived(showStandaloneShell || editMode);
+
+  const landingSettings = $derived(normalizeLandingPageSettings($currentOrg.landingpage));
+
+  const heroShellClass = $derived(
+    landingSettings.theme === 'classic'
+      ? 'ui:w-full ui:bg-muted/10 ui:text-foreground ui:font-sans'
+      : 'ui:w-full ui:bg-background ui:text-foreground ui:font-sans'
+  );
+
+  const orgNameForNav = $derived($currentOrg.name || get(courseData, 'org.name', '') || 'ClassroomIO');
+  const logoUrlForNav = $derived($currentOrg.avatarUrl || undefined);
+
+  const authAction = $derived(
+    $user.isLoggedIn
+      ? {
+          label: t.get($basePath === '/lms' || $basePath === '#' ? 'navigation.goto_lms' : 'navigation.goto_dashboard'),
+          href: resolve($basePath !== '#' ? $basePath : '/lms', {})
+        }
+      : {
+          label: t.get('navigation.login'),
+          href: '/login'
+        }
+  );
+
+  const courseHero = $derived.by(() => {
+    const slug = typeof courseData.slug === 'string' && courseData.slug.length > 0 ? courseData.slug : '';
+    const enrollHref = slug ? resolve(`/course/${slug}/enroll`, {}) : '#';
+    const enrollmentsOpen = get(courseData, 'metadata.allowNewStudent') === true;
+
+    return {
+      ...landingSettings.hero,
+      heading: get(courseData, 'title', '') || landingSettings.hero.heading,
+      subheading: get(courseData, 'description', '') || landingSettings.hero.subheading,
+      primaryAction: {
+        label: t.get('course.navItem.landing_page.start_course'),
+        href: enrollHref,
+        disabled: editMode || !enrollmentsOpen
+      },
+      image: get(courseData, 'logo', '') || landingSettings.hero.image
+    };
+  });
+
+  /** Matches API `buildCourseContent` — do not use `metadata.isContentGroupingEnabled` (dashboard normalizes undefined → true). */
+  const lessonsLayoutIsGrouped = $derived(courseData.content?.grouped === true);
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let NavComponent = $state<Component<any> | null>(null);
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let HeroComponent = $state<Component<any> | null>(null);
+
+  $effect(() => {
+    if (!showMarketingHero) {
+      NavComponent = null;
+      HeroComponent = null;
+
+      return;
+    }
+
+    const theme = landingSettings.theme;
+    let cancelled = false;
+
+    void Promise.all([
+      theme === 'bold'
+        ? import('@cio/ui/custom/org-landing-page/bold/nav.svelte')
+        : theme === 'classic'
+          ? import('@cio/ui/custom/org-landing-page/classic/nav.svelte')
+          : import('@cio/ui/custom/org-landing-page/minimal/nav.svelte'),
+      theme === 'bold'
+        ? import('@cio/ui/custom/org-landing-page/bold/hero.svelte')
+        : theme === 'classic'
+          ? import('@cio/ui/custom/org-landing-page/classic/hero.svelte')
+          : import('@cio/ui/custom/org-landing-page/minimal/hero.svelte')
+    ]).then(([navMod, heroMod]) => {
+      if (!cancelled) {
+        NavComponent = navMod.default;
+        HeroComponent = heroMod.default;
+      }
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  });
 
   const reviews = $derived(get(courseData, 'metadata.reviews') || []);
-  const video = $derived(get(courseData, 'metadata.videoUrl'));
 
   const lessons = $derived(getCourseLessons(courseData));
   const totalRatings = $derived(reviews?.reduce((acc = 0, review) => acc + (review?.rating || 0), 0));
   const averageRating = $derived(reviews?.length ? (totalRatings / reviews.length).toFixed(1) : null);
   const expandDescription = $derived(Array(reviews?.length ?? 0).fill(false));
 
-  const allowNewStudent = $derived(get(courseData, 'metadata.allowNewStudent'));
-  const bannerImage = $derived(get(courseData, 'logo'));
-  const instructor = $derived(get(courseData, 'metadata.instructor') || {});
+  const instructor = $derived((get(courseData, 'metadata.instructor') || {}) as Record<string, unknown>);
   const organizationName = $derived(get(courseData, 'org.name') || $currentOrg.name || '');
   const instructorName = $derived.by(() => {
     const name = get(instructor, 'name');
-    return typeof name === 'string' && name.trim() ? name : organizationName;
+    return typeof name === 'string' && name.trim().length > 0 ? name : organizationName;
   });
   const instructorImageUrl = $derived.by(() => {
     const imageUrl = get(instructor, 'imgUrl');
-    return typeof imageUrl === 'string' && imageUrl.trim() ? imageUrl : '/images/avatar.svg';
+    return typeof imageUrl === 'string' && imageUrl.trim().length > 0 ? imageUrl : '/images/avatar.svg';
   });
   const certificate = $derived(
     get(courseData, 'metadata.certificate', {
@@ -93,8 +174,6 @@
   const totalLessons = $derived(getTotalLessons(courseSections));
   const studentCount = $derived(courseData.group?.members?.length ?? 0);
 
-  const videoEmbedUrl = $derived(video ? (isYoutubeUrl(video) ? formatYoutubeEmbedUrl(video) : video) : '');
-
   function locationHashChanged() {
     activeNav = window.location.hash;
   }
@@ -121,90 +200,38 @@
   <PoweredBy />
 {/if}
 
-{#if !editMode && showStandaloneShell}
-  <Navigation
-    logo={$currentOrg.avatarUrl || '/logo-192.png'}
-    orgName={$currentOrg.name}
-    disableSignup={$currentOrg.disableSignup || ($currentOrg.settings?.signup?.inviteOnly ?? false)}
-    isOrgSite={$globalStore.isOrgSite}
-    customLinks={$currentOrg.landingpage?.customLinks}
-  />
-{/if}
-
 <div class="flex w-full flex-col items-center bg-white dark:bg-black">
-  {#if showStandaloneShell}
-    <!-- Hero Section -->
-    <header class="relative w-full overflow-hidden bg-[#040f2d] py-12 md:py-20">
-      <DotPattern
-        class="[mask-image:radial-gradient(ellipse_at_center,white,transparent_80%)] opacity-10"
-        fillColor="rgb(255 255 255 / 0.5)"
-      />
-
-      <div
-        class="relative z-10 mx-auto flex w-full max-w-6xl flex-col-reverse items-center gap-8 px-6 md:flex-row md:gap-12"
-      >
-        <!-- Course Description -->
-        <div class="w-full py-4 md:w-1/2">
-          <BlurIn class="my-4 text-4xl font-bold tracking-tight text-white md:text-5xl lg:text-6xl">
-            {get(courseData, 'title', '')}
-          </BlurIn>
-
-          <BlurFade delay={0.2}>
-            <p class="mb-6 text-base leading-relaxed text-gray-300 md:text-lg">
-              {get(courseData, 'description', '')}
-            </p>
-          </BlurFade>
-
-          <BlurFade delay={0.3}>
-            <p class="mb-6 text-sm text-blue-300">
-              {instructorName}
-            </p>
-          </BlurFade>
-
-          <BlurFade delay={0.4}>
-            <Button
-              class="hidden h-12 px-8 text-base font-semibold sm:w-fit md:block"
-              onclick={() => {
-                if (editMode) return;
-                startCoursePayment = true;
-              }}
-              disabled={!allowNewStudent}
-            >
-              {$t('course.navItem.landing_page.start_course')}
-            </Button>
-          </BlurFade>
-
-          {#if $handleOpenWidget.open}
-            <UploadWidget
-              imageURL={courseApi.course?.logo}
-              onchange={(newLogo) => (courseApi.course!.logo = newLogo)}
-            />
-          {/if}
-        </div>
-
-        <!-- Banner Image / Video -->
-        <div class="w-full md:w-1/2">
-          <BlurFade delay={0.3} yOffset={20}>
-            {#if video}
-              <HeroVideoDialog
-                videoSrc={videoEmbedUrl}
-                thumbnailSrc={bannerImage || '/images/classroomio-course-img-template.jpg'}
-                thumbnailAlt={get(courseData, 'title', 'Course video')}
-                animationStyle="from-center"
+  {#if showMarketingHero}
+    <div class={heroShellClass}>
+      {#if NavComponent && HeroComponent}
+        {#if landingSettings.theme === 'minimal'}
+          <HeroComponent hero={courseHero}>
+            {#snippet navigation()}
+              <NavComponent
+                orgName={orgNameForNav}
+                logoUrl={logoUrlForNav}
+                navItems={landingSettings.navItems}
+                {authAction}
               />
-            {:else}
-              <div class="overflow-hidden rounded-xl shadow-2xl">
-                <img
-                  alt="Course banner"
-                  src={bannerImage ? bannerImage : '/images/classroomio-course-img-template.jpg'}
-                  class="h-auto w-full rounded-xl object-cover"
-                />
-              </div>
-            {/if}
-          </BlurFade>
+            {/snippet}
+          </HeroComponent>
+        {:else}
+          <NavComponent
+            orgName={orgNameForNav}
+            logoUrl={logoUrlForNav}
+            navItems={landingSettings.navItems}
+            {authAction}
+          />
+          <HeroComponent hero={courseHero} />
+        {/if}
+      {/if}
+
+      {#if editMode && $handleOpenWidget.open}
+        <div class="mx-auto w-full max-w-7xl px-6 py-2">
+          <UploadWidget imageURL={courseApi.course?.logo} onchange={(newLogo) => (courseApi.course!.logo = newLogo)} />
         </div>
-      </div>
-    </header>
+      {/if}
+    </div>
 
     <!-- Social Proof Strip -->
     {#if reviews.length > 0 || studentCount > 0 || lessons.length > 0}
@@ -252,7 +279,7 @@
       <!-- Course Details -->
       <div class="w-full max-w-[680px] min-w-[60%] p-3 lg:mr-10">
         <!-- Navigation -->
-        <UnderlineTabs.Root bind:value={activeNav} class="ui:bg-background sticky top-0 z-20 py-2">
+        <UnderlineTabs.Root bind:value={activeNav} class="py-2">
           <UnderlineTabs.List>
             {#each navItems as navItem (navItem.key)}
               <UnderlineTabs.Trigger value={navItem.key}>
@@ -323,8 +350,8 @@
           </NavSection>
         {/if}
 
-        <!-- Sections - Lessons -->
-        {#if !courseData.metadata?.isContentGroupingEnabled}
+        <!-- Sections - Lessons (layout follows `content.grouped` from API, not client-normalized metadata) -->
+        {#if !lessonsLayoutIsGrouped}
           <NavSection id="lessons">
             <BlurFade delay={0.1}>
               <div class="mb-3 flex w-full items-center justify-between">
@@ -352,7 +379,7 @@
               </div>
             </BlurFade>
           </NavSection>
-        {:else if courseData.metadata?.isContentGroupingEnabled}
+        {:else}
           <NavSection id="lessons">
             <BlurFade delay={0.1}>
               <!-- header -->
@@ -419,10 +446,10 @@
                         <p class="mb-0.5 font-medium">{review.name}</p>
                         <!-- ratings -->
                         <div class="mb-2 flex items-center gap-0.5">
-                          {#each Array(5) as _, i}
+                          {#each Array(5) as _, starIndex (starIndex)}
                             <StarIcon
                               size={14}
-                              class={i < (review.rating || 0)
+                              class={starIndex < (review.rating || 0)
                                 ? 'fill-yellow-400 text-yellow-400'
                                 : 'text-gray-300 dark:text-neutral-600'}
                             />
@@ -496,10 +523,10 @@
                           <!-- ratings -->
                           <div class="flex flex-row items-center gap-1">
                             <div class="flex items-center gap-0.5">
-                              {#each Array(5) as _, i}
+                              {#each Array(5) as _, starIndex (starIndex)}
                                 <StarIcon
                                   size={14}
-                                  class={i < (review.rating || 0)
+                                  class={starIndex < (review.rating || 0)
                                     ? 'fill-yellow-400 text-yellow-400'
                                     : 'text-gray-300 dark:text-neutral-600'}
                                 />
diff --git a/apps/dashboard/src/lib/features/ui/navigation/org-navigation.ts b/apps/dashboard/src/lib/features/ui/navigation/org-navigation.ts
index 33f2708b..6b619c3a 100644
--- a/apps/dashboard/src/lib/features/ui/navigation/org-navigation.ts
+++ b/apps/dashboard/src/lib/features/ui/navigation/org-navigation.ts
@@ -5,6 +5,7 @@ import {
   CourseIcon,
   DashboardIcon,
   GoalIcon,
+  HomeIcon,
   LandingPageIcon,
   PeopleIcon,
   SettingsIcon,
@@ -63,10 +64,17 @@ export interface NestedRouteConfig {
 export const baseNavConfig: NavItemConfig[] = [
   {
     group: 'home',
-    titleKey: 'org_navigation.dashboard',
+    titleKey: 'org_navigation.home',
     path: '',
+    icon: HomeIcon,
+    matchPattern: '^/org/[^/]+/?$'
+  },
+  {
+    group: 'home',
+    titleKey: 'org_navigation.dashboard',
+    path: '/dash',
     icon: DashboardIcon,
-    matchPattern: '^/org/[^/]+/?$' // Exact match only
+    matchPattern: '^/org/[^/]+/dash(/.*)?$'
   },
   {
     group: 'home',
@@ -74,7 +82,7 @@ export const baseNavConfig: NavItemConfig[] = [
     path: '/setup',
     icon: SetupIcon,
     requiresAdmin: true,
-    matchPattern: '^/org/[^/]+/setup(/.*)?$' // Matches nested routes
+    matchPattern: '^/org/[^/]+/setup(/.*)?$'
   },
   {
     group: 'content',
@@ -183,6 +191,10 @@ export const baseNavConfig: NavItemConfig[] = [
         titleKey: 'settings.tabs.billing_tab',
         path: '/settings/billing'
       },
+      {
+        titleKey: 'settings.tabs.ai_credits_tab',
+        path: '/settings/ai-credits'
+      },
       {
         titleKey: 'settings.tabs.auth_tab',
         matchPattern: '^/org/[^/]+/settings/auth(/.*)?$',
@@ -191,6 +203,14 @@ export const baseNavConfig: NavItemConfig[] = [
       }
     ],
     nestedRoutes: [
+      {
+        path: 'billing',
+        titleKey: 'settings.tabs.billing_tab'
+      },
+      {
+        path: 'ai-credits',
+        titleKey: 'settings.tabs.ai_credits_tab'
+      },
       {
         path: 'customize-lms',
         titleKey: 'settings.tabs.customize_lms_tab'
diff --git a/apps/dashboard/src/lib/features/ui/question/constants.ts b/apps/dashboard/src/lib/features/ui/question/constants.ts
index af8bbbe8..9ff4ad9e 100644
--- a/apps/dashboard/src/lib/features/ui/question/constants.ts
+++ b/apps/dashboard/src/lib/features/ui/question/constants.ts
@@ -5,7 +5,8 @@ export const PREMIUM_QUESTION_TYPE_KEYS = new Set<QuestionTypeKey>([
   QUESTION_TYPE_KEY.FILE_UPLOAD,
   QUESTION_TYPE_KEY.ORDERING,
   QUESTION_TYPE_KEY.LINK,
-  QUESTION_TYPE_KEY.STAR
+  QUESTION_TYPE_KEY.STAR,
+  QUESTION_TYPE_KEY.VIDEO_RECORDING
 ]);
 
 const QUESTION_TYPE_LABEL_KEYS: Partial<Record<QuestionTypeKey, string>> = {
@@ -24,7 +25,9 @@ const QUESTION_TYPE_LABEL_KEYS: Partial<Record<QuestionTypeKey, string>> = {
   [QUESTION_TYPE_KEY.HOTSPOT]: 'course.navItem.lessons.exercises.all_exercises.edit_mode.question_types.hotspot',
   [QUESTION_TYPE_KEY.LINK]: 'course.navItem.lessons.exercises.all_exercises.edit_mode.question_types.link',
   [QUESTION_TYPE_KEY.WORD_BANK]: 'course.navItem.lessons.exercises.all_exercises.edit_mode.question_types.word_bank',
-  [QUESTION_TYPE_KEY.STAR]: 'course.navItem.lessons.exercises.all_exercises.edit_mode.question_types.star'
+  [QUESTION_TYPE_KEY.STAR]: 'course.navItem.lessons.exercises.all_exercises.edit_mode.question_types.star',
+  [QUESTION_TYPE_KEY.VIDEO_RECORDING]:
+    'course.navItem.lessons.exercises.all_exercises.edit_mode.question_types.video_recording'
 };
 
 // Temp hidden: MATCHING, HOTSPOT
diff --git a/apps/dashboard/src/lib/features/ui/sidebar/org-sidebar/org-switcher.svelte b/apps/dashboard/src/lib/features/ui/sidebar/org-sidebar/org-switcher.svelte
index 20e24a3a..54467624 100644
--- a/apps/dashboard/src/lib/features/ui/sidebar/org-sidebar/org-switcher.svelte
+++ b/apps/dashboard/src/lib/features/ui/sidebar/org-sidebar/org-switcher.svelte
@@ -14,7 +14,7 @@
   import { setTheme } from '$lib/utils/functions/theme';
   import { currentOrg, currentOrgPath, orgs } from '$lib/utils/store/org';
 
-  import { ComingSoon } from '$features/ui';
+  import ComingSoon from '$features/ui/coming-soon.svelte';
   import { PUBLIC_IS_SELFHOSTED } from '$env/static/public';
 
   const sidebar = useSidebar();
@@ -41,7 +41,7 @@
   <!-- Self-hosted: show org name only, no switching -->
   {#if variant === 'breadcrumb'}
     <Breadcrumb.Link href={$currentOrgPath} class="flex items-center gap-2">
-      {#if $currentOrg.name}sfsf
+      {#if $currentOrg.name}
         <Avatar.Root class="flex size-6! items-center justify-center rounded-md!">
           <Avatar.Image src={$currentOrg.avatarUrl} alt={$currentOrg.name} />
           <Avatar.Fallback class="rounded-md! text-xs">{shortenName($currentOrg.name)}</Avatar.Fallback>
diff --git a/apps/dashboard/src/lib/utils/constants/routes.ts b/apps/dashboard/src/lib/utils/constants/routes.ts
index b39e342e..8b04ce41 100644
--- a/apps/dashboard/src/lib/utils/constants/routes.ts
+++ b/apps/dashboard/src/lib/utils/constants/routes.ts
@@ -30,12 +30,12 @@ export const PUBLIC_ROUTES = [
   ROUTE.RESET,
   `^${ROUTE.PAGES}/.*`,
   `^${ROUTE.COURSE}/[^/]+(/enroll)?/?$`,
+  `^${ROUTE.COURSE}/[^/]+/lesson/.*`,
   `^${ROUTE.COURSES}/?$`,
   '/404',
   `^${ROUTE.VERIFY_EMAIL_ERROR}$`,
   ROUTE.AUTH_FAILED,
-  '^/csp-report$',
-  '^/sticky-debug$'
+  '^/csp-report$'
 ];
 
 export const PUBLIC_API_ROUTES = ['/api/polar', '/api/lmz', '/api/verify'];
diff --git a/apps/dashboard/src/lib/utils/services/org/quiz.ts b/apps/dashboard/src/lib/utils/services/org/quiz.ts
index 16f44ee1..1edce81c 100644
--- a/apps/dashboard/src/lib/utils/services/org/quiz.ts
+++ b/apps/dashboard/src/lib/utils/services/org/quiz.ts
@@ -1,10 +1,10 @@
 import { createQuizModal, deleteModal } from '$lib/utils/store/org';
 
-export function onEdit(quiz) {}
+export function onEdit(_quiz: unknown) {}
 
-export function onShare(quiz) {}
+export function onShare(_quiz: unknown) {}
 
-export function onReport(quiz) {}
+export function onReport(_quiz: unknown) {}
 
 export function onRename(quiz) {
   createQuizModal.update((m) => ({
@@ -15,7 +15,7 @@ export function onRename(quiz) {
   }));
 }
 
-export function onMakeCopy(quiz) {}
+export function onMakeCopy(_quiz: unknown) {}
 
 export function onDelete(quiz) {
   deleteModal.update((m) => ({
diff --git a/apps/dashboard/src/lib/utils/translations/da.json b/apps/dashboard/src/lib/utils/translations/da.json
index fc9f8427..d7170f2e 100644
--- a/apps/dashboard/src/lib/utils/translations/da.json
+++ b/apps/dashboard/src/lib/utils/translations/da.json
@@ -391,6 +391,14 @@
         "post_created": "Indlægget er oprettet",
         "post_updated": "Opslaget blev opdateret"
       }
+    },
+    "ai_credits": {
+      "purchase_success": "Token-pakke føjet til din saldo.",
+      "checkout_failed": "Kunne ikke starte kassen. Prøv venligst igen."
+    },
+    "public_course": {
+      "url_copied": "Kursus-URL kopieret",
+      "url_copy_failed": "Kunne ikke kopiere URL"
     }
   },
   "explore": {
@@ -656,7 +664,30 @@
           "popover_title": "Vælg tags",
           "empty_groups": "Ingen tags tilgængelige endnu"
         },
-        "compliance": "Overholdelse"
+        "compliance": "Overholdelse",
+        "public": "Offentlig",
+        "convert_to_public_blocked": "Dette kursus har spørgsmål, der ikke kan automatisk bedømmes, så det kan ikke gøres offentligt endnu.",
+        "fix_blocking_questions": "Ret blokerende spørgsmål",
+        "slug": {
+          "label": "URL-slug",
+          "description": "Det sidste segment af denne vares offentlige webadresse. Kun bogstaver, tal og bindestreger.",
+          "public_only": "Snegle kan kun redigeres på offentlige kurser.",
+          "in_use": "Den snegl bruges allerede af et andet element i dette kursus."
+        },
+        "callout": {
+          "legend": "Offentlig kursusopkald",
+          "description": "Vist i bunden af hver lektion og i stedet for låste genstande. Brug det til at lede elever til dit websted eller et betalt kursus.",
+          "title_label": "Titel",
+          "title_placeholder": "Vil du gå dybere ind i dette?",
+          "description_label": "Beskrivelse",
+          "description_placeholder": "Slut dig til hele kohorten for at sende et projekt i produktionsgrad om 4 uger.",
+          "button_label": "Knap etiket",
+          "button_label_placeholder": "Læs mere på min side",
+          "button_url_label": "Knap-URL",
+          "button_url_placeholder": "https://example.com",
+          "clear": "Ryd billedforklaring",
+          "public_only": "Infoforklaringer vises kun på offentlige kurser."
+        }
       },
       "analytics": {
         "title": "Analytics"
@@ -1167,7 +1198,10 @@
               "attempt_counter": "Forsøg {current} af {total}",
               "previous_try": "Tidligere forsøg",
               "next_try": "Næste forsøg",
-              "try_again": "Prøv igen"
+              "try_again": "Prøv igen",
+              "back": "Tilbage",
+              "begin_section": "Start sektion",
+              "complete_section": "Fuldfør afsnit"
             },
             "edit_mode": {
               "delete_modal": "Slet øvelse",
@@ -1193,7 +1227,8 @@
                 "hotspot": "Hotspot",
                 "link": "Links",
                 "word_bank": "Ordbank",
-                "star": "Stjernebedømmelse"
+                "star": "Stjernebedømmelse",
+                "video_recording": "Videooptagelse"
               },
               "select_type": "Vælg type",
               "question_type_auto_gradable": "Auto",
@@ -1204,7 +1239,9 @@
               "title": "Slet spørgsmål",
               "sure": "Er du sikker på, at du vil slette dette spørgsmål",
               "no": "Nej, lad venligst være",
-              "yes": "Ja, slet"
+              "yes": "Ja, slet",
+              "section_title": "Slet afsnit",
+              "section_sure": "Dette afsnit vil blive slettet. Dens spørgsmål vil blive flyttet til den nærmeste sektion."
             },
             "description": {
               "title": "Titel",
@@ -1464,12 +1501,76 @@
                   "correct_value_placeholder": "f.eks. 3",
                   "max_stars_placeholder": "f.eks. 5"
                 }
+              },
+              "video_recording": {
+                "submission": {
+                  "no_video": "Ingen video indsendt.",
+                  "unavailable": "Videoen er ikke tilgængelig.",
+                  "duration": "Varighed",
+                  "file_size": "Filstørrelse",
+                  "recorded_at": "Optaget",
+                  "uploaded_at": "Uploadet",
+                  "retake_count": "Genoptager"
+                },
+                "preview": {
+                  "max_duration_label": "Max varighed",
+                  "manual_grading": "Eleverne optager et kort videosvar. Manuel klassificering påkrævet."
+                },
+                "take": {
+                  "unsupported": "Videooptagelse er ikke understøttet i denne browser.",
+                  "permission_prompt": "Giv kamera og mikrofon adgang til at optage dit svar.",
+                  "permission_denied": "Adgang til kamera eller mikrofon blev blokeret. Tjek browsertilladelser.",
+                  "start_camera": "Opsæt kamera",
+                  "camera_label": "Kamera",
+                  "camera_placeholder": "Vælg kamera",
+                  "play_preview": "Afspil optagelseseksempel",
+                  "pause_preview": "Sæt forhåndsvisning af optagelse på pause",
+                  "start_recording": "Start optagelsen",
+                  "stop_recording": "Stop optagelsen",
+                  "elapsed": "Forløbet",
+                  "remaining": "Tilbage",
+                  "max_duration": "Maks",
+                  "too_short": "Optag i mindst 1 sekund.",
+                  "use_recording": "Brug optagelse",
+                  "retake": "Gentag",
+                  "delete": "Slet optagelse",
+                  "retry_upload": "Prøv at uploade igen",
+                  "uploading": "Uploader optagelse...",
+                  "uploaded": "Optagelsen er uploadet",
+                  "upload_failed": "Upload mislykkedes. Prøv igen.",
+                  "replaces_previous": "Et nyt accepteret svar erstatter det tidligere svar efter upload."
+                },
+                "edit": {
+                  "max_duration_label": "Max varighed",
+                  "max_duration_helper": "Studerende optager i browseren og kan tage om, inden de afleverer. Maksimum er 2 minutter.",
+                  "max_duration_placeholder": "60",
+                  "manual_grading": "Kræver manuel klassificering"
+                }
               }
             },
             "settings": "Indstillinger",
             "settings_allow_multiple": "Tillad flere forsøg",
             "settings_allow_multiple_helper": "Studerende kan indsende mere end én gang og gennemgå tidligere forsøg på resultatskærmen.",
-            "settings_save": "Gem indstillinger"
+            "settings_save": "Gem indstillinger",
+            "add": "Tilføj",
+            "add_section": "Tilføj sektion",
+            "reorder_done": "Færdig genbestilling",
+            "section": {
+              "fallback_title": "Sektion",
+              "questions": "spørgsmål",
+              "short_questions": "q",
+              "required": "påkrævet",
+              "add_question": "Tilføj spørgsmål",
+              "delete": "Slet afsnit",
+              "move_up": "Flyt afsnittet op",
+              "move_down": "Flyt sektionen ned",
+              "color": "Sektionsfarve",
+              "description_placeholder": "Beskriv dette afsnit",
+              "after_section": "Efter afsnit",
+              "continue": "Fortsæt til næste afsnit",
+              "go_to_section": "Gå til afsnittet",
+              "submit": "Indsend øvelse"
+            }
           },
           "new_exercise_modal": {
             "heading": "Ny øvelse",
@@ -1657,7 +1758,12 @@
         "content_locked_description": "Din instruktør har ikke låst dette indhold op endnu. Fuldfør tidligere indhold, eller tjek tilbage senere.",
         "saving": "Gemmer...",
         "saved": "Gemt",
-        "draft_recovery": "Der blev fundet et ikke-gemt udkast til denne lektion. Vil du gendanne den?"
+        "draft_recovery": "Der blev fundet et ikke-gemt udkast til denne lektion. Vil du gendanne den?",
+        "stats": {
+          "sections": "Afsnit",
+          "lessons": "Lektioner",
+          "exercises": "Øvelser"
+        }
       },
       "news_feed": {
         "heading": "Nyhedsfeed",
@@ -1782,7 +1888,8 @@
     },
     "header": {
       "preview": "Preview course",
-      "preview_missing_slug": "Generate and save a course slug before previewing."
+      "preview_missing_slug": "Generate and save a course slug before previewing.",
+      "public_course_helper": "Synlig på dit offentlige kursussite"
     },
     "sidebar": {
       "back_to_course": "Tilbage til kurset",
@@ -1841,6 +1948,26 @@
       "blocker_final_misconfigured": "Certificeringsøvelsen \"{exerciseTitle}\" har ingen point konfigureret; bed din instruktør om at ordne det.",
       "email_message_label": "E-mail besked",
       "email_message_placeholder": "f.eks. Vi er stolte af dine fremskridt - fortsæt med at lære!"
+    },
+    "creator": {
+      "heading": "Hvilket kursus vil du lave?",
+      "placeholder": "Bed ClassroomIO om at oprette et kursus til dig...",
+      "type": {
+        "self_paced": "Selv tempo",
+        "live_class": "Live klasse"
+      },
+      "level": {
+        "beginner": "Begynder",
+        "intermediate": "Mellemliggende",
+        "advanced": "Avanceret"
+      },
+      "drafting": {
+        "heading": "Udarbejdelse af din kursusidé",
+        "subtext": "Vi forvandler din prompt til en kursustitel og et arbejdsområde.",
+        "step_reading": "Læser din prompt",
+        "step_naming": "Navngiv dit kursus",
+        "step_building": "Oprettelse af dit arbejdsområde"
+      }
     }
   },
   "courses": {
@@ -1881,6 +2008,8 @@
       "unpublished": "Upubliceret",
       "continue_course": "Fortsæt",
       "learn_more": "Få flere oplysninger",
+      "public_badge": "Offentlig",
+      "actions_menu_aria": "Kursehandlinger",
       "tags_overflow_aria": "{count} flere tags",
       "list_view": {
         "title": "Titel",
@@ -1897,7 +2026,8 @@
         "invite": "Inviter",
         "delete": "Slet",
         "open": "Åbn",
-        "open_course_site": "Åben kursusside"
+        "open_public_course": "Åbn offentligt kursus",
+        "copy_course_url": "Kopiér kursus-URL"
       },
       "due_date": "Forfalder",
       "valid_until": "Gælder indtil kl"
@@ -2599,7 +2729,8 @@
       "token_auth_tab": "Token Auth",
       "customize_lms_tab": "Tilpas LMS",
       "domains_tab": "Domæner",
-      "teams_tab": "Hold"
+      "teams_tab": "Hold",
+      "ai_credits_tab": "AI Credits"
     },
     "subheadings": {
       "view_site": "Se webstedet"
@@ -2730,6 +2861,45 @@
     },
     "teams": {
       "page_subtitle": "Invite teammates and control who helps run this organization."
+    },
+    "ai_credits": {
+      "sub_title": "AI-kreditter",
+      "page_subtitle": "Spor brug af AI-assistent, teamforbrug og køb af tokenpakker.",
+      "cost_note": "Kreditforbrug vægtes efter modelomkostninger. Gemini 2.5 Flash og GPT-5.4 Mini tæller som 1 kreditenhed pr. token. Claude Sonnet 4.6 tæller som 36× pr. token, hvilket afspejler dens højere API-omkostninger.",
+      "buy_tokens": {
+        "title": "Køb flere tokens",
+        "description": "Hver pakke tilføjer 5.000.000 kreditter for $5 USD. Vælg, hvor mange pakker du har brug for.",
+        "quantity_hint": "pakker",
+        "preview": "{quantity} pakke(r) · {tokens} tokens · ${dollars}",
+        "buy_button": "Køb for ${dollars}"
+      },
+      "leaderboard": {
+        "title": "Teambrug",
+        "this_month": "Nuværende måned",
+        "user": "Bruger",
+        "favorite_model": "Yndlingsmodel",
+        "tokens": "Poletter",
+        "empty": "Ingen på dit hold har brugt AI-assistenten denne måned."
+      },
+      "chart": {
+        "heading": "Brug",
+        "subheading": "Dagligt tokenforbrug denne måned.",
+        "tokens": "Poletter",
+        "total_tokens": "Samlede tokens",
+        "total_requests": "Samlet antal anmodninger",
+        "empty": "Der er ikke registreret noget forbrug i denne måned endnu."
+      },
+      "purchased": {
+        "title": "Købt brug",
+        "subtitle": "Ekstra poletter, du har købt, ruller over, indtil de bliver brugt.",
+        "lifetime": "{tokens} tokens købt · ${dollars} brugt",
+        "buy_more": "Køb mere"
+      },
+      "included": {
+        "title": "Dit inkluderede forbrug",
+        "subtitle": "Månedlige tokens inkluderet i din plan.",
+        "resets_on": "Nulstiller {dato}"
+      }
     }
   },
   "profileMenu": {
@@ -2839,7 +3009,9 @@
     "self_paced_label": "Selv tempo",
     "self_paced_subtitle": "Bedst til kurser, hvor eleverne kan tage lektioner i deres eget tempo",
     "compliance_label": "Overholdelse",
-    "compliance_subtitle": "Tilbagevendende træning med gentagninger, påmindelser og fornyelsessporing"
+    "compliance_subtitle": "Tilbagevendende træning med gentagninger, påmindelser og fornyelsessporing",
+    "public_label": "Offentlig",
+    "public_subtitle": "Gratis kursussider uden tilmelding, du kan dele offentligt – fantastisk til leadgener"
   },
   "delete_modal": {
     "label": "Slet",
@@ -3224,7 +3396,8 @@
     "input_placeholder": "Spørg AI-assistenten...",
     "attach_document": "Vedhæft et dokument (PDF, DOCX, PPTX)",
     "upgrade_to_upload": "Opgrader for at uploade dokumenter",
-    "tokens_exhausted": "Månedlig AI-token-grænse nået. Køb flere kreditter i Indstillinger > Fakturering, eller vent på nulstilling.",
+    "tokens_exhausted": "Månedlig AI-token-grænse nået.",
+    "tokens_exhausted_buy_more": "Køb mere",
     "chat_history": "Chat historie",
     "no_conversations": "Ingen samtaler endnu",
     "untitled": "Uden titel",
@@ -3237,7 +3410,8 @@
     "mention_exercise": "Motion",
     "mention_section": "Sektion",
     "mention_no_results": "Intet matchende indhold",
-    "uploading_document": "Uploader dokument..."
+    "uploading_document": "Uploader dokument...",
+    "agent_running_warning": "Ændringerne vises i kurset, når agenten er færdig. Genindlæs ikke siden."
   },
   "widgets": {
     "heading": "Widgets",
diff --git a/apps/dashboard/src/lib/utils/translations/de.json b/apps/dashboard/src/lib/utils/translations/de.json
index c56b1c11..f0b41bb9 100644
--- a/apps/dashboard/src/lib/utils/translations/de.json
+++ b/apps/dashboard/src/lib/utils/translations/de.json
@@ -391,6 +391,14 @@
         "post_created": "Beitrag erfolgreich erstellt",
         "post_updated": "Beitrag erfolgreich aktualisiert"
       }
+    },
+    "ai_credits": {
+      "purchase_success": "Das Token-Paket wurde Ihrem Guthaben hinzugefügt.",
+      "checkout_failed": "Der Checkout konnte nicht gestartet werden. Bitte versuchen Sie es erneut."
+    },
+    "public_course": {
+      "url_copied": "Kurs-URL kopiert",
+      "url_copy_failed": "URL konnte nicht kopiert werden"
     }
   },
   "explore": {
@@ -656,7 +664,30 @@
           "popover_title": "Wählen Sie Tags aus",
           "empty_groups": "Noch keine Tags verfügbar"
         },
-        "compliance": "Compliance"
+        "compliance": "Compliance",
+        "public": "Öffentlich",
+        "convert_to_public_blocked": "Dieser Kurs enthält Fragen, die nicht automatisch bewertet werden können, daher kann er noch nicht veröffentlicht werden.",
+        "fix_blocking_questions": "Blockierende Fragen beheben",
+        "slug": {
+          "label": "URL-Slug",
+          "description": "Das letzte Segment der öffentlichen URL dieses Artikels. Nur Buchstaben, Zahlen und Bindestriche.",
+          "public_only": "Slugs können nur in öffentlichen Kursen bearbeitet werden.",
+          "in_use": "Dieser Slug wird bereits von einem anderen Gegenstand in diesem Kurs verwendet."
+        },
+        "callout": {
+          "legend": "Hinweis zum öffentlichen Kurs",
+          "description": "Wird am Ende jeder Lektion und anstelle von gesperrten Gegenständen angezeigt. Nutzen Sie es, um Lernende auf Ihre Website oder einen kostenpflichtigen Kurs zu leiten.",
+          "title_label": "Titel",
+          "title_placeholder": "Möchten Sie näher darauf eingehen?",
+          "description_label": "Beschreibung",
+          "description_placeholder": "Schließen Sie sich der gesamten Kohorte an, um in 4 Wochen ein produktionstaugliches Projekt auszuliefern.",
+          "button_label": "Knopfbeschriftung",
+          "button_label_placeholder": "Lesen Sie mehr auf meiner Website",
+          "button_url_label": "Schaltflächen-URL",
+          "button_url_placeholder": "https://example.com",
+          "clear": "Klare Beschriftung",
+          "public_only": "Callouts erscheinen nur in öffentlichen Kursen."
+        }
       },
       "analytics": {
         "title": "Analytik"
@@ -1167,7 +1198,10 @@
               "attempt_counter": "Versuch {current} von {total}",
               "previous_try": "Vorheriger Versuch",
               "next_try": "Nächster Versuch",
-              "try_again": "Versuchen Sie es erneut"
+              "try_again": "Versuchen Sie es erneut",
+              "back": "Zurück",
+              "begin_section": "Startabschnitt",
+              "complete_section": "Vollständiger Abschnitt"
             },
             "edit_mode": {
               "delete_modal": "Übung löschen",
@@ -1193,7 +1227,8 @@
                 "hotspot": "Hotspot",
                 "link": "Links",
                 "word_bank": "Wortbank",
-                "star": "Sternebewertung"
+                "star": "Sternebewertung",
+                "video_recording": "Videoaufzeichnung"
               },
               "select_type": "Typ auswählen",
               "question_type_auto_gradable": "Auto",
@@ -1204,7 +1239,9 @@
               "title": "Frage löschen",
               "sure": "Sind Sie sicher, dass Sie diese Frage löschen möchten?",
               "no": "Nein, bitte nicht",
-              "yes": "Ja, löschen"
+              "yes": "Ja, löschen",
+              "section_title": "Abschnitt löschen",
+              "section_sure": "Dieser Abschnitt wird gelöscht. Die Fragen werden in den nächstgelegenen Abschnitt verschoben."
             },
             "description": {
               "title": "Titel",
@@ -1464,12 +1501,76 @@
                   "correct_value_placeholder": "z.B. 3",
                   "max_stars_placeholder": "z.B. 5"
                 }
+              },
+              "video_recording": {
+                "submission": {
+                  "no_video": "Kein Video eingereicht.",
+                  "unavailable": "Video nicht verfügbar.",
+                  "duration": "Dauer",
+                  "file_size": "Dateigröße",
+                  "recorded_at": "Aufgezeichnet",
+                  "uploaded_at": "Hochgeladen",
+                  "retake_count": "Wiederholungen"
+                },
+                "preview": {
+                  "max_duration_label": "Maximale Dauer",
+                  "manual_grading": "Die Lernenden zeichnen eine kurze Videoantwort auf. Manuelle Bewertung erforderlich."
+                },
+                "take": {
+                  "unsupported": "Die Videoaufzeichnung wird in diesem Browser nicht unterstützt.",
+                  "permission_prompt": "Erlauben Sie den Zugriff auf Kamera und Mikrofon, um Ihre Antwort aufzuzeichnen.",
+                  "permission_denied": "Der Kamera- oder Mikrofonzugriff wurde blockiert. Überprüfen Sie die Browserberechtigungen.",
+                  "start_camera": "Kamera einrichten",
+                  "camera_label": "Kamera",
+                  "camera_placeholder": "Kamera auswählen",
+                  "play_preview": "Aufnahmevorschau abspielen",
+                  "pause_preview": "Aufnahmevorschau anhalten",
+                  "start_recording": "Starten Sie die Aufnahme",
+                  "stop_recording": "Stoppen Sie die Aufnahme",
+                  "elapsed": "Vergangen",
+                  "remaining": "Übrig",
+                  "max_duration": "Max",
+                  "too_short": "Nehmen Sie mindestens 1 Sekunde lang auf.",
+                  "use_recording": "Verwenden Sie die Aufzeichnung",
+                  "retake": "Wiederholen",
+                  "delete": "Aufnahme löschen",
+                  "retry_upload": "Versuchen Sie den Upload erneut",
+                  "uploading": "Aufnahme wird hochgeladen...",
+                  "uploaded": "Aufnahme hochgeladen",
+                  "upload_failed": "Der Upload ist fehlgeschlagen. Versuchen Sie es erneut.",
+                  "replaces_previous": "Eine neue akzeptierte Einstellung ersetzt die vorherige Antwort nach dem Hochladen."
+                },
+                "edit": {
+                  "max_duration_label": "Maximale Dauer",
+                  "max_duration_helper": "Die Schüler zeichnen im Browser auf und können sie vor dem Absenden wiederholen. Das Maximum beträgt 2 Minuten.",
+                  "max_duration_placeholder": "60",
+                  "manual_grading": "Erfordert eine manuelle Bewertung"
+                }
               }
             },
             "settings": "Einstellungen",
             "settings_allow_multiple": "Erlauben Sie mehrere Versuche",
             "settings_allow_multiple_helper": "Studierende können mehr als einmal einreichen und frühere Versuche auf dem Ergebnisbildschirm überprüfen.",
-            "settings_save": "Einstellungen speichern"
+            "settings_save": "Einstellungen speichern",
+            "add": "Hinzufügen",
+            "add_section": "Abschnitt hinzufügen",
+            "reorder_done": "Nachbestellung abgeschlossen",
+            "section": {
+              "fallback_title": "Abschnitt",
+              "questions": "Fragen",
+              "short_questions": "q",
+              "required": "erforderlich",
+              "add_question": "Frage hinzufügen",
+              "delete": "Abschnitt löschen",
+              "move_up": "Abschnitt nach oben verschieben",
+              "move_down": "Abschnitt nach unten verschieben",
+              "color": "Abschnittsfarbe",
+              "description_placeholder": "Beschreiben Sie diesen Abschnitt",
+              "after_section": "Nach Abschnitt",
+              "continue": "Fahren Sie mit dem nächsten Abschnitt fort",
+              "go_to_section": "Gehen Sie zum Abschnitt",
+              "submit": "Übung einreichen"
+            }
           },
           "new_exercise_modal": {
             "heading": "Neue Übung",
@@ -1657,7 +1758,12 @@
         "content_locked_description": "Ihr Kursleiter hat diesen Inhalt noch nicht freigeschaltet. Vervollständigen Sie den vorherigen Inhalt oder schauen Sie später noch einmal vorbei.",
         "saving": "Sparen…",
         "saved": "Gespeichert",
-        "draft_recovery": "Für diese Lektion wurde ein nicht gespeicherter Entwurf gefunden. Möchten Sie es wiederherstellen?"
+        "draft_recovery": "Für diese Lektion wurde ein nicht gespeicherter Entwurf gefunden. Möchten Sie es wiederherstellen?",
+        "stats": {
+          "sections": "Abschnitte",
+          "lessons": "Lektionen",
+          "exercises": "Übungen"
+        }
       },
       "news_feed": {
         "heading": "Newsfeed",
@@ -1782,7 +1888,8 @@
     },
     "header": {
       "preview": "Preview course",
-      "preview_missing_slug": "Generate and save a course slug before previewing."
+      "preview_missing_slug": "Generate and save a course slug before previewing.",
+      "public_course_helper": "Sichtbar auf Ihrer öffentlichen Kurswebsite"
     },
     "sidebar": {
       "back_to_course": "Zurück zum Kurs",
@@ -1841,6 +1948,26 @@
       "blocker_final_misconfigured": "Für die Zertifizierungsübung „{exerciseTitle}“ sind keine Punkte konfiguriert; Bitten Sie Ihren Lehrer, das Problem zu beheben.",
       "email_message_label": "E-Mail-Nachricht",
       "email_message_placeholder": "z.B. Wir sind stolz auf Ihre Fortschritte – lernen Sie weiter!"
+    },
+    "creator": {
+      "heading": "Welchen Kurs möchten Sie erstellen?",
+      "placeholder": "Bitten Sie ClassroomIO, einen Kurs für Sie zu erstellen ...",
+      "type": {
+        "self_paced": "Eigenständig",
+        "live_class": "Live-Klasse"
+      },
+      "level": {
+        "beginner": "Anfänger",
+        "intermediate": "Mittelstufe",
+        "advanced": "Fortgeschritten"
+      },
+      "drafting": {
+        "heading": "Ausarbeitung Ihrer Kursidee",
+        "subtext": "Wir verwandeln Ihre Eingabeaufforderung in einen Kurstitel und einen Arbeitsbereich.",
+        "step_reading": "Ich lese Ihre Aufforderung",
+        "step_naming": "Benennen Sie Ihren Kurs",
+        "step_building": "Erstellen Sie Ihren Arbeitsbereich"
+      }
     }
   },
   "courses": {
@@ -1881,6 +2008,8 @@
       "unpublished": "Unveröffentlicht",
       "continue_course": "Weiter",
       "learn_more": "Erfahren Sie mehr",
+      "public_badge": "Öffentlich",
+      "actions_menu_aria": "Kursaktionen",
       "tags_overflow_aria": "{count} weitere Tags",
       "list_view": {
         "title": "Titel",
@@ -1897,7 +2026,8 @@
         "invite": "Einladen",
         "delete": "Löschen",
         "open": "Offen",
-        "open_course_site": "Kursseite öffnen"
+        "open_public_course": "Öffentlichen Kurs öffnen",
+        "copy_course_url": "Kurs-URL kopieren"
       },
       "due_date": "Fällig",
       "valid_until": "Gültig bis"
@@ -2599,7 +2729,8 @@
       "token_auth_tab": "Token-Auth",
       "customize_lms_tab": "LMS anpassen",
       "domains_tab": "Domänen",
-      "teams_tab": "Mannschaften"
+      "teams_tab": "Mannschaften",
+      "ai_credits_tab": "KI-Credits"
     },
     "subheadings": {
       "view_site": "Website ansehen"
@@ -2730,6 +2861,45 @@
     },
     "teams": {
       "page_subtitle": "Invite teammates and control who helps run this organization."
+    },
+    "ai_credits": {
+      "sub_title": "KI-Credits",
+      "page_subtitle": "Verfolgen Sie die Nutzung von KI-Assistenten, den Teamverbrauch und den Kauf von Token-Paketen.",
+      "cost_note": "Die Credit-Nutzung wird nach Modellkosten gewichtet. Gemini 2.5 Flash und GPT-5.4 Mini zählen als 1 Krediteinheit pro Token. Claude Sonnet 4.6 zählt als 36× pro Token, was die höheren API-Kosten widerspiegelt.",
+      "buy_tokens": {
+        "title": "Kaufen Sie mehr Token",
+        "description": "Jedes Paket fügt 5.000.000 Credits für 5 USD hinzu. Wählen Sie, wie viele Packungen Sie benötigen.",
+        "quantity_hint": "Packungen",
+        "preview": "{quantity} Packung(en) · {tokens} Token · ${dollars}",
+        "buy_button": "Für ${dollars} kaufen"
+      },
+      "leaderboard": {
+        "title": "Teamnutzung",
+        "this_month": "Aktueller Monat",
+        "user": "Benutzer",
+        "favorite_model": "Lieblingsmodell",
+        "tokens": "Token",
+        "empty": "Niemand in Ihrem Team hat diesen Monat den KI-Assistenten verwendet."
+      },
+      "chart": {
+        "heading": "Nutzung",
+        "subheading": "Täglicher Tokenverbrauch in diesem Monat.",
+        "tokens": "Token",
+        "total_tokens": "Gesamtzahl der Token",
+        "total_requests": "Gesamtzahl der Anfragen",
+        "empty": "In diesem Monat wurde noch keine Nutzung registriert."
+      },
+      "purchased": {
+        "title": "Gekaufte Nutzung",
+        "subtitle": "Zusätzliche Token, die Sie gekauft haben, bleiben bestehen, bis sie verwendet werden.",
+        "lifetime": "{tokens} Token gekauft · ${dollars} ausgegeben",
+        "buy_more": "Kaufen Sie mehr"
+      },
+      "included": {
+        "title": "Ihr inbegriffener Verbrauch",
+        "subtitle": "Monatliche Token sind in Ihrem Plan enthalten.",
+        "resets_on": "Setzt {Datum} zurück"
+      }
     }
   },
   "profileMenu": {
@@ -2839,7 +3009,9 @@
     "self_paced_label": "Eigenständig",
     "self_paced_subtitle": "Am besten für Kurse geeignet, bei denen die Schüler den Unterricht in ihrem eigenen Tempo absolvieren können",
     "compliance_label": "Compliance",
-    "compliance_subtitle": "Wiederkehrende Schulungen mit Wiederholungen, Erinnerungen und Verlängerungsverfolgung"
+    "compliance_subtitle": "Wiederkehrende Schulungen mit Wiederholungen, Erinnerungen und Verlängerungsverfolgung",
+    "public_label": "Öffentlich",
+    "public_subtitle": "Kostenlose Kursseiten ohne Anmeldung, die Sie öffentlich teilen können – ideal für die Lead-Generierung"
   },
   "delete_modal": {
     "label": "Löschen",
@@ -3224,7 +3396,8 @@
     "input_placeholder": "Fragen Sie den KI-Assistenten...",
     "attach_document": "Ein Dokument anhängen (PDF, DOCX, PPTX)",
     "upgrade_to_upload": "Upgrade zum Hochladen von Dokumenten",
-    "tokens_exhausted": "Das monatliche AI-Token-Limit wurde erreicht. Kaufen Sie mehr Credits unter Einstellungen > Abrechnung oder warten Sie auf das Zurücksetzen.",
+    "tokens_exhausted": "Das monatliche AI-Token-Limit wurde erreicht.",
+    "tokens_exhausted_buy_more": "Mehr kaufen",
     "chat_history": "Chat-Verlauf",
     "no_conversations": "Noch keine Gespräche",
     "untitled": "Ohne Titel",
@@ -3237,7 +3410,8 @@
     "mention_exercise": "Übung",
     "mention_section": "Abschnitt",
     "mention_no_results": "Kein passender Inhalt",
-    "uploading_document": "Dokument wird hochgeladen..."
+    "uploading_document": "Dokument wird hochgeladen...",
+    "agent_running_warning": "Die Änderungen werden im Kurs angezeigt, sobald der Agent fertig ist. Laden Sie die Seite nicht neu."
   },
   "widgets": {
     "heading": "Widgets",
diff --git a/apps/dashboard/src/lib/utils/translations/en.json b/apps/dashboard/src/lib/utils/translations/en.json
index 872a4320..241f69a2 100644
--- a/apps/dashboard/src/lib/utils/translations/en.json
+++ b/apps/dashboard/src/lib/utils/translations/en.json
@@ -63,7 +63,32 @@
     "self_paced_label": "Self Paced",
     "self_paced_subtitle": "Best for courses where students can take lessons at their own pace",
     "compliance_label": "Compliance",
-    "compliance_subtitle": "Recurring training with retakes, reminders, and renewal tracking"
+    "compliance_subtitle": "Recurring training with retakes, reminders, and renewal tracking",
+    "public_label": "Public",
+    "public_subtitle": "Free, no-signup course pages you can share publicly — great for lead gen"
+  },
+  "public_course": {
+    "header": {
+      "explore_courses": "Explore courses",
+      "sign_in": "Sign in"
+    },
+    "footer_nav": {
+      "previous": "Previous",
+      "next": "Next"
+    },
+    "powered_by": {
+      "label": "Powered by",
+      "brand": "ClassroomIO"
+    },
+    "exercise": {
+      "submit": "Check my answers",
+      "try_again": "Try again",
+      "practice_again": "Practice again",
+      "attempt_option": "Attempt {attemptNumber} - {correct}/{total}",
+      "attempts_select_aria": "Your attempts",
+      "privacy_hint": "Graded instantly in your browser — nothing is submitted.",
+      "summary_template": "You got [[correct]] / [[total]] correct."
+    }
   },
   "onboarding": {
     "sell": "Sell courses online",
@@ -181,6 +206,7 @@
       "organization_tab": "Organization",
       "landing_page_tab": "Landing Page",
       "billing_tab": "Billing",
+      "ai_credits_tab": "AI Credits",
       "integrations_tab": "Integrations",
       "language_tab": "Language",
       "auth_tab": "Authentication",
@@ -579,10 +605,46 @@
       "active": "You don't have any active billing",
       "provider": "We use Polar to help manage your billing",
       "open_billing": "Open billing",
-      "error": "An error occurred while opening billing",
-      "ai_credits": "AI Assistant Usage",
-      "ai_tokens_used": "tokens used this month",
-      "ai_bonus_credits": "bonus credits available"
+      "error": "An error occurred while opening billing"
+    },
+    "ai_credits": {
+      "sub_title": "AI credits",
+      "page_subtitle": "Track AI assistant usage, team consumption, and purchase token packs.",
+      "cost_note": "Credit usage is weighted by model cost. Gemini 2.5 Flash and GPT-5.4 Mini count as 1 credit unit per token. Claude Sonnet 4.6 counts as 36× per token, reflecting its higher API cost.",
+      "included": {
+        "title": "Your included usage",
+        "subtitle": "Monthly tokens included with your plan.",
+        "resets_on": "Resets {date}"
+      },
+      "purchased": {
+        "title": "Purchased usage",
+        "subtitle": "Extra tokens you bought roll over until used.",
+        "lifetime": "{tokens} tokens purchased · ${dollars} spent",
+        "buy_more": "Buy more"
+      },
+      "chart": {
+        "heading": "Usage",
+        "subheading": "Daily token consumption this month.",
+        "tokens": "Tokens",
+        "total_tokens": "Total tokens",
+        "total_requests": "Total requests",
+        "empty": "No usage recorded this month yet."
+      },
+      "leaderboard": {
+        "title": "Team usage",
+        "this_month": "Current month",
+        "user": "User",
+        "favorite_model": "Favorite model",
+        "tokens": "Tokens",
+        "empty": "Nobody on your team has used the AI assistant this month."
+      },
+      "buy_tokens": {
+        "title": "Buy more tokens",
+        "description": "Each pack adds 5,000,000 credits for $5 USD. Choose how many packs you need.",
+        "quantity_hint": "packs",
+        "preview": "{quantity} pack(s) · {tokens} tokens · ${dollars}",
+        "buy_button": "Buy for ${dollars}"
+      }
     }
   },
   "media_manager": {
@@ -1416,7 +1478,8 @@
         "share": "Share",
         "invite": "Invite",
         "delete": "Delete",
-        "open_course_site": "Open course site"
+        "open_public_course": "Open public course",
+        "copy_course_url": "Copy course URL"
       },
       "error_message": "An error occurred.",
       "lessons_number": "lessons",
@@ -1426,6 +1489,8 @@
       "unpublished": "Unpublished",
       "continue_course": "Continue",
       "learn_more": "Learn more",
+      "public_badge": "Public",
+      "actions_menu_aria": "Course actions",
       "due_date": "Due",
       "valid_until": "Valid until",
       "tags_overflow_aria": "{count} more tags",
@@ -1464,6 +1529,26 @@
     }
   },
   "course": {
+    "creator": {
+      "heading": "What course do you want to create?",
+      "placeholder": "Ask ClassroomIO to create a course for you...",
+      "drafting": {
+        "heading": "Drafting your course idea",
+        "subtext": "We're turning your prompt into a course title and workspace.",
+        "step_reading": "Reading your prompt",
+        "step_naming": "Naming your course",
+        "step_building": "Creating your workspace"
+      },
+      "level": {
+        "beginner": "Beginner",
+        "intermediate": "Intermediate",
+        "advanced": "Advanced"
+      },
+      "type": {
+        "self_paced": "Self Paced",
+        "live_class": "Live Class"
+      }
+    },
     "navItems": {
       "nav_news_feed": "News Feed",
       "nav_content": "Content",
@@ -1528,7 +1613,8 @@
     },
     "header": {
       "preview": "Preview course",
-      "preview_missing_slug": "Generate and save a course slug before previewing."
+      "preview_missing_slug": "Generate and save a course slug before previewing.",
+      "public_course_helper": "Visible on your public course site"
     },
     "navItem": {
       "news_feed": {
@@ -1575,6 +1661,11 @@
       "lessons": {
         "heading": "Lessons",
         "heading_v2": "Content",
+        "stats": {
+          "sections": "Sections",
+          "lessons": "Lessons",
+          "exercises": "Exercises"
+        },
         "drag": "drag a card to reorder",
         "no_lesson": "No lessons yet",
         "content_locked_title": "This content is locked",
@@ -1604,6 +1695,7 @@
           "save": "Save",
           "edit": "Edit",
           "delete": "Delete",
+          "delete_tooltip": "Delete this lesson",
           "cancel": "Cancel"
         },
         "add_content": "Add content",
@@ -1812,8 +1904,11 @@
             "submissions": "Submissions",
             "save": "Save",
             "preview": "Preview",
+            "add": "Add",
             "add_question": "Add a question",
+            "add_section": "Add section",
             "reorder": "Reorder Questions",
+            "reorder_done": "Done reordering",
             "delete_exercise": "Delete Exercise",
             "order_questions": "Order questions",
             "write_your_answer": "Write your answer",
@@ -1848,9 +1943,27 @@
             "delete_confirmation": {
               "title": "Delete question",
               "sure": "Are you sure you want to delete this question",
+              "section_title": "Delete section",
+              "section_sure": "This section will be deleted. Its questions will be moved to the nearest section.",
               "no": "No, please don't",
               "yes": "Yes, delete"
             },
+            "section": {
+              "fallback_title": "Section",
+              "questions": "questions",
+              "short_questions": "q",
+              "required": "required",
+              "add_question": "Add question",
+              "delete": "Delete section",
+              "move_up": "Move section up",
+              "move_down": "Move section down",
+              "color": "Section color",
+              "description_placeholder": "Describe this section",
+              "after_section": "After section",
+              "continue": "Continue to next section",
+              "go_to_section": "Go to section",
+              "submit": "Submit exercise"
+            },
             "edit_mode": {
               "delete_modal": "Delete Exercise",
               "sure": "Are you sure you want to delete this exercise?",
@@ -1879,7 +1992,8 @@
                 "hotspot": "Hotspot",
                 "link": "Links",
                 "word_bank": "Word bank",
-                "star": "Star rating"
+                "star": "Star rating",
+                "video_recording": "Video recording"
               }
             },
             "view_mode": {
@@ -1908,7 +2022,10 @@
               "status_graded": "Status: Review Completed",
               "status_submitted": "Status: Submitted",
               "checking_submission": "Checking your submission...",
-              "instructor_feedback": "Instructor feedback"
+              "instructor_feedback": "Instructor feedback",
+              "back": "Back",
+              "begin_section": "Start section",
+              "complete_section": "Complete section"
             },
             "analytics": {
               "summary": {
@@ -2107,6 +2224,51 @@
                   "max_size_label": "Max size (MB)"
                 }
               },
+              "video_recording": {
+                "edit": {
+                  "max_duration_label": "Max duration",
+                  "max_duration_helper": "Students record in the browser and can retake before submitting. Maximum is 2 minutes.",
+                  "max_duration_placeholder": "60",
+                  "manual_grading": "Requires manual grading"
+                },
+                "take": {
+                  "unsupported": "Video recording is not supported in this browser.",
+                  "permission_prompt": "Allow camera and microphone access to record your answer.",
+                  "permission_denied": "Camera or microphone access was blocked. Check browser permissions.",
+                  "start_camera": "Set up camera",
+                  "camera_label": "Camera",
+                  "camera_placeholder": "Select camera",
+                  "play_preview": "Play recording preview",
+                  "pause_preview": "Pause recording preview",
+                  "start_recording": "Start recording",
+                  "stop_recording": "Stop recording",
+                  "elapsed": "Elapsed",
+                  "remaining": "Remaining",
+                  "max_duration": "Max",
+                  "too_short": "Record for at least 1 second.",
+                  "use_recording": "Use recording",
+                  "retake": "Retake",
+                  "delete": "Delete recording",
+                  "retry_upload": "Retry upload",
+                  "uploading": "Uploading recording...",
+                  "uploaded": "Recording uploaded",
+                  "upload_failed": "Upload failed. Try again.",
+                  "replaces_previous": "A new accepted take replaces the previous answer after upload."
+                },
+                "preview": {
+                  "max_duration_label": "Max duration",
+                  "manual_grading": "Learners record a short video response. Manual grading required."
+                },
+                "submission": {
+                  "no_video": "No video submitted.",
+                  "unavailable": "Video unavailable.",
+                  "duration": "Duration",
+                  "file_size": "File size",
+                  "recorded_at": "Recorded",
+                  "uploaded_at": "Uploaded",
+                  "retake_count": "Retakes"
+                }
+              },
               "link": {
                 "edit": {
                   "instructions_placeholder": "Optional instructions for learners",
@@ -2686,6 +2848,29 @@
         "live_class": "Live class",
         "self_paced": "Self paced",
         "compliance": "Compliance",
+        "public": "Public",
+        "convert_to_public_blocked": "This course has questions that can’t be auto-graded, so it can’t be made Public yet.",
+        "fix_blocking_questions": "Fix blocking questions",
+        "callout": {
+          "legend": "Public course callout",
+          "description": "Shown at the bottom of each lesson and in place of locked items. Use it to drive learners to your site or a paid course.",
+          "title_label": "Title",
+          "title_placeholder": "Want to go deeper on this?",
+          "description_label": "Description",
+          "description_placeholder": "Join the full cohort to ship a production-grade project in 4 weeks.",
+          "button_label": "Button label",
+          "button_label_placeholder": "Read more on my site",
+          "button_url_label": "Button URL",
+          "button_url_placeholder": "https://example.com",
+          "clear": "Clear callout",
+          "public_only": "Callouts only appear on Public courses."
+        },
+        "slug": {
+          "label": "URL slug",
+          "description": "The last segment of this item’s public URL. Only letters, numbers, and dashes.",
+          "public_only": "Slugs are only editable on Public courses.",
+          "in_use": "That slug is already used by another item in this course."
+        },
         "tags": {
           "title": "Tags",
           "description": "Assign tags so learners can discover this course with filters.",
@@ -3027,6 +3212,14 @@
       "activated": "Token auth enabled.",
       "deactivated": "Token auth disabled."
     },
+    "ai_credits": {
+      "purchase_success": "Token pack added to your balance.",
+      "checkout_failed": "Could not start checkout. Please try again."
+    },
+    "public_course": {
+      "url_copied": "Course URL copied",
+      "url_copy_failed": "Could not copy URL"
+    },
     "something": "Something went wrong - Please try later",
     "update": "Update",
     "update_failed": "Update failed",
@@ -3423,7 +3616,8 @@
     "input_placeholder": "Ask the AI assistant...",
     "attach_document": "Attach a document (PDF, DOCX, PPTX)",
     "upgrade_to_upload": "Upgrade to upload documents",
-    "tokens_exhausted": "Monthly AI token limit reached. Buy more credits in Settings > Billing or wait for reset.",
+    "tokens_exhausted": "Monthly AI token limit reached.",
+    "tokens_exhausted_buy_more": "Buy more",
     "chat_history": "Chat History",
     "no_conversations": "No conversations yet",
     "untitled": "Untitled",
@@ -3436,6 +3630,7 @@
     "mention_exercise": "Exercise",
     "mention_section": "Section",
     "mention_no_results": "No matching content",
-    "uploading_document": "Uploading document..."
+    "uploading_document": "Uploading document...",
+    "agent_running_warning": "The changes will appear in the course once the agent is done. Don't reload the page."
   }
 }
diff --git a/apps/dashboard/src/lib/utils/translations/es.json b/apps/dashboard/src/lib/utils/translations/es.json
index c284399a..766c34b8 100644
--- a/apps/dashboard/src/lib/utils/translations/es.json
+++ b/apps/dashboard/src/lib/utils/translations/es.json
@@ -391,6 +391,14 @@
         "post_created": "Publicación creada exitosamente",
         "post_updated": "Publicación actualizada exitosamente"
       }
+    },
+    "ai_credits": {
+      "purchase_success": "Paquete de tokens agregado a su saldo.",
+      "checkout_failed": "No se pudo iniciar el pago. Por favor inténtalo de nuevo."
+    },
+    "public_course": {
+      "url_copied": "URL del curso copiada",
+      "url_copy_failed": "No se pudo copiar la URL"
     }
   },
   "explore": {
@@ -656,7 +664,30 @@
           "popover_title": "Seleccionar etiquetas",
           "empty_groups": "Aún no hay etiquetas disponibles"
         },
-        "compliance": "Cumplimiento"
+        "compliance": "Cumplimiento",
+        "public": "Público",
+        "convert_to_public_blocked": "Este curso tiene preguntas que no se pueden calificar automáticamente, por lo que aún no se puede hacer público.",
+        "fix_blocking_questions": "Corregir preguntas de bloqueo",
+        "slug": {
+          "label": "barra de URL",
+          "description": "El último segmento de la URL pública de este elemento. Sólo letras, números y guiones.",
+          "public_only": "Los slugs solo se pueden editar en cursos públicos.",
+          "in_use": "Ese slug ya lo utiliza otro elemento de este curso."
+        },
+        "callout": {
+          "legend": "Llamada del curso público",
+          "description": "Se muestra al final de cada lección y en lugar de los elementos bloqueados. Úselo para llevar a los estudiantes a su sitio o a un curso pago.",
+          "title_label": "Título",
+          "title_placeholder": "¿Quieres profundizar en esto?",
+          "description_label": "Descripción",
+          "description_placeholder": "Únase al grupo completo para enviar un proyecto de nivel de producción en 4 semanas.",
+          "button_label": "Etiqueta del botón",
+          "button_label_placeholder": "Leer más en mi sitio",
+          "button_url_label": "URL del botón",
+          "button_url_placeholder": "https://ejemplo.com",
+          "clear": "Borrar llamada",
+          "public_only": "Las notas solo aparecen en los cursos públicos."
+        }
       },
       "analytics": {
         "title": "Analítica"
@@ -1167,7 +1198,10 @@
               "attempt_counter": "Intento {actual} de {total}",
               "previous_try": "Intento anterior",
               "next_try": "Próximo intento",
-              "try_again": "Inténtalo de nuevo"
+              "try_again": "Inténtalo de nuevo",
+              "back": "Atrás",
+              "begin_section": "Sección de inicio",
+              "complete_section": "Sección completa"
             },
             "edit_mode": {
               "delete_modal": "Eliminar ejercicio",
@@ -1193,7 +1227,8 @@
                 "hotspot": "Punto de acceso",
                 "link": "Enlaces",
                 "word_bank": "banco de palabras",
-                "star": "Calificación de estrellas"
+                "star": "Calificación de estrellas",
+                "video_recording": "Grabación de vídeo"
               },
               "select_type": "Seleccionar tipo",
               "question_type_auto_gradable": "Auto",
@@ -1204,7 +1239,9 @@
               "title": "Eliminar pregunta",
               "sure": "¿Estás seguro de que quieres eliminar esta pregunta?",
               "no": "No, por favor no",
-              "yes": "Si, borrar"
+              "yes": "Si, borrar",
+              "section_title": "Eliminar sección",
+              "section_sure": "Esta sección será eliminada. Sus preguntas se trasladarán a la sección más cercana."
             },
             "description": {
               "title": "Título",
@@ -1464,12 +1501,76 @@
                   "correct_value_placeholder": "por ej. 3",
                   "max_stars_placeholder": "por ej. 5"
                 }
+              },
+              "video_recording": {
+                "submission": {
+                  "no_video": "No se envió ningún vídeo.",
+                  "unavailable": "Vídeo no disponible.",
+                  "duration": "Duración",
+                  "file_size": "Tamaño del archivo",
+                  "recorded_at": "grabado",
+                  "uploaded_at": "subido",
+                  "retake_count": "Repeticiones"
+                },
+                "preview": {
+                  "max_duration_label": "Duración máxima",
+                  "manual_grading": "Los alumnos graban una breve respuesta en vídeo. Se requiere calificación manual."
+                },
+                "take": {
+                  "unsupported": "La grabación de vídeo no es compatible con este navegador.",
+                  "permission_prompt": "Permita el acceso a la cámara y al micrófono para grabar su respuesta.",
+                  "permission_denied": "Se bloqueó el acceso a la cámara o al micrófono. Verifique los permisos del navegador.",
+                  "start_camera": "Configurar la cámara",
+                  "camera_label": "cámara",
+                  "camera_placeholder": "Seleccionar cámara",
+                  "play_preview": "Reproducir vista previa de grabación",
+                  "pause_preview": "Pausar la vista previa de la grabación",
+                  "start_recording": "Empezar a grabar",
+                  "stop_recording": "dejar de grabar",
+                  "elapsed": "Transcurrido",
+                  "remaining": "restante",
+                  "max_duration": "máx.",
+                  "too_short": "Grabe durante al menos 1 segundo.",
+                  "use_recording": "Usar grabación",
+                  "retake": "Retomar",
+                  "delete": "Eliminar grabación",
+                  "retry_upload": "Reintentar subir",
+                  "uploading": "Subiendo grabación...",
+                  "uploaded": "Grabación cargada",
+                  "upload_failed": "La carga falló. Intentar otra vez.",
+                  "replaces_previous": "Una nueva toma aceptada reemplaza la respuesta anterior después de la carga."
+                },
+                "edit": {
+                  "max_duration_label": "Duración máxima",
+                  "max_duration_helper": "Los estudiantes registran en el navegador y pueden volver a tomarlo antes de enviarlo. El máximo es 2 minutos.",
+                  "max_duration_placeholder": "60",
+                  "manual_grading": "Requiere calificación manual"
+                }
               }
             },
             "settings": "Configuración",
             "settings_allow_multiple": "Permitir múltiples intentos",
             "settings_allow_multiple_helper": "Los estudiantes pueden enviar más de una vez y revisar intentos anteriores en la pantalla de resultados.",
-            "settings_save": "Guardar configuración"
+            "settings_save": "Guardar configuración",
+            "add": "Añadir",
+            "add_section": "Agregar sección",
+            "reorder_done": "Hecho de reordenar",
+            "section": {
+              "fallback_title": "Sección",
+              "questions": "preguntas",
+              "short_questions": "q",
+              "required": "requerido",
+              "add_question": "Agregar pregunta",
+              "delete": "Eliminar sección",
+              "move_up": "Mover sección hacia arriba",
+              "move_down": "Mover sección hacia abajo",
+              "color": "Color de sección",
+              "description_placeholder": "Describe esta sección",
+              "after_section": "Después de la sección",
+              "continue": "Continuar a la siguiente sección",
+              "go_to_section": "Ir a la sección",
+              "submit": "Enviar ejercicio"
+            }
           },
           "new_exercise_modal": {
             "heading": "Nuevo ejercicio",
@@ -1657,7 +1758,12 @@
         "content_locked_description": "Su instructor aún no ha desbloqueado este contenido. Complete el contenido anterior o vuelva a consultarlo más tarde.",
         "saving": "Guardando…",
         "saved": "Guardado",
-        "draft_recovery": "Se encontró un borrador no guardado para esta lección. ¿Quieres restaurarlo?"
+        "draft_recovery": "Se encontró un borrador no guardado para esta lección. ¿Quieres restaurarlo?",
+        "stats": {
+          "sections": "Secciones",
+          "lessons": "Lecciones",
+          "exercises": "Ejercicios"
+        }
       },
       "news_feed": {
         "heading": "Noticias",
@@ -1782,7 +1888,8 @@
     },
     "header": {
       "preview": "Preview course",
-      "preview_missing_slug": "Generate and save a course slug before previewing."
+      "preview_missing_slug": "Generate and save a course slug before previewing.",
+      "public_course_helper": "Visible en el sitio público de tu curso"
     },
     "sidebar": {
       "back_to_course": "volver al curso",
@@ -1841,6 +1948,26 @@
       "blocker_final_misconfigured": "El ejercicio de certificación \"{exerciseTitle}\" no tiene puntos configurados; Pídele a tu instructor que lo arregle.",
       "email_message_label": "Mensaje de correo electrónico",
       "email_message_placeholder": "por ej. Estamos orgullosos de tu progreso: ¡sigue aprendiendo!"
+    },
+    "creator": {
+      "heading": "¿Qué curso quieres crear?",
+      "placeholder": "Pídele a ClassroomIO que cree un curso para ti...",
+      "type": {
+        "self_paced": "a tu propio ritmo",
+        "live_class": "Clase en vivo"
+      },
+      "level": {
+        "beginner": "principiante",
+        "intermediate": "Intermedio",
+        "advanced": "Avanzado"
+      },
+      "drafting": {
+        "heading": "Redactando tu idea de curso",
+        "subtext": "Estamos convirtiendo su mensaje en un título de curso y un espacio de trabajo.",
+        "step_reading": "Leyendo tu mensaje",
+        "step_naming": "Nombrando tu curso",
+        "step_building": "Creando tu espacio de trabajo"
+      }
     }
   },
   "courses": {
@@ -1881,6 +2008,8 @@
       "unpublished": "Inédito",
       "continue_course": "Continuar",
       "learn_more": "Más información",
+      "public_badge": "Público",
+      "actions_menu_aria": "Acciones del curso",
       "tags_overflow_aria": "{count} etiquetas más",
       "list_view": {
         "title": "Título",
@@ -1897,7 +2026,8 @@
         "invite": "invitar",
         "delete": "Eliminar",
         "open": "Abierto",
-        "open_course_site": "Abrir sitio del curso"
+        "open_public_course": "Abrir curso público",
+        "copy_course_url": "Copiar URL del curso"
       },
       "due_date": "debido",
       "valid_until": "Válido hasta"
@@ -2599,7 +2729,8 @@
       "token_auth_tab": "Autenticación de token",
       "customize_lms_tab": "Personalizar LMS",
       "domains_tab": "Dominios",
-      "teams_tab": "equipos"
+      "teams_tab": "equipos",
+      "ai_credits_tab": "Créditos de IA"
     },
     "subheadings": {
       "view_site": "Ver sitio"
@@ -2730,6 +2861,45 @@
     },
     "teams": {
       "page_subtitle": "Invite teammates and control who helps run this organization."
+    },
+    "ai_credits": {
+      "sub_title": "créditos de IA",
+      "page_subtitle": "Realice un seguimiento del uso del asistente de IA, el consumo del equipo y compre paquetes de tokens.",
+      "cost_note": "El uso del crédito está ponderado por el costo del modelo. Gemini 2.5 Flash y GPT-5.4 Mini cuentan como 1 unidad de crédito por token. Claude Sonnet 4.6 cuenta como 36 veces por token, lo que refleja su mayor costo de API.",
+      "buy_tokens": {
+        "title": "Compra más fichas",
+        "description": "Cada paquete agrega 5.000.000 de créditos por $5 USD. Elige cuántos paquetes necesitas.",
+        "quantity_hint": "paquetes",
+        "preview": "{cantidad} paquete(s) · {tokens} tokens · ${dollars}",
+        "buy_button": "Compra por ${dolares}"
+      },
+      "leaderboard": {
+        "title": "Uso del equipo",
+        "this_month": "Mes actual",
+        "user": "Usuario",
+        "favorite_model": "modelo favorito",
+        "tokens": "Fichas",
+        "empty": "Nadie de tu equipo ha utilizado el asistente de IA este mes."
+      },
+      "chart": {
+        "heading": "Uso",
+        "subheading": "Consumo diario de tokens este mes.",
+        "tokens": "Fichas",
+        "total_tokens": "fichas totales",
+        "total_requests": "Solicitudes totales",
+        "empty": "Aún no se ha registrado ningún uso este mes."
+      },
+      "purchased": {
+        "title": "Uso comprado",
+        "subtitle": "Las fichas adicionales que compraste se acumulan hasta que se usan.",
+        "lifetime": "{tokens} tokens comprados · ${dollars} gastados",
+        "buy_more": "comprar más"
+      },
+      "included": {
+        "title": "Su uso incluido",
+        "subtitle": "Fichas mensuales incluidas en tu plan.",
+        "resets_on": "Restablece {fecha}"
+      }
     }
   },
   "profileMenu": {
@@ -2839,7 +3009,9 @@
     "self_paced_label": "a tu propio ritmo",
     "self_paced_subtitle": "Lo mejor para cursos donde los estudiantes pueden tomar lecciones a su propio ritmo",
     "compliance_label": "Cumplimiento",
-    "compliance_subtitle": "Capacitación recurrente con repeticiones, recordatorios y seguimiento de renovaciones."
+    "compliance_subtitle": "Capacitación recurrente con repeticiones, recordatorios y seguimiento de renovaciones.",
+    "public_label": "Público",
+    "public_subtitle": "Páginas de cursos gratuitas y sin registro que puedes compartir públicamente: ideales para la generación de leads"
   },
   "delete_modal": {
     "label": "Eliminar",
@@ -3224,7 +3396,8 @@
     "input_placeholder": "Pregúntale al asistente de IA...",
     "attach_document": "Adjunte un documento (PDF, DOCX, PPTX)",
     "upgrade_to_upload": "Actualizar para cargar documentos",
-    "tokens_exhausted": "Se alcanzó el límite mensual de tokens de IA. Compre más créditos en Configuración > Facturación o espere a que se restablezcan.",
+    "tokens_exhausted": "Se alcanzó el límite mensual de tokens de IA.",
+    "tokens_exhausted_buy_more": "Comprar más",
     "chat_history": "Historial de chat",
     "no_conversations": "Aún no hay conversaciones",
     "untitled": "Sin título",
@@ -3237,7 +3410,8 @@
     "mention_exercise": "ejercicio",
     "mention_section": "Sección",
     "mention_no_results": "No hay contenido coincidente",
-    "uploading_document": "Subiendo documento..."
+    "uploading_document": "Subiendo documento...",
+    "agent_running_warning": "Los cambios aparecerán en el curso una vez que el agente haya terminado. No recargues la página."
   },
   "widgets": {
     "heading": "widgets",
diff --git a/apps/dashboard/src/lib/utils/translations/fr.json b/apps/dashboard/src/lib/utils/translations/fr.json
index a46161c3..875d1af5 100644
--- a/apps/dashboard/src/lib/utils/translations/fr.json
+++ b/apps/dashboard/src/lib/utils/translations/fr.json
@@ -391,6 +391,14 @@
         "post_created": "Message créé avec succès",
         "post_updated": "Message mis à jour avec succès"
       }
+    },
+    "ai_credits": {
+      "purchase_success": "Pack de jetons ajouté à votre solde.",
+      "checkout_failed": "Impossible de démarrer le paiement. Veuillez réessayer."
+    },
+    "public_course": {
+      "url_copied": "URL du cours copiée",
+      "url_copy_failed": "Impossible de copier l’URL"
     }
   },
   "explore": {
@@ -656,7 +664,30 @@
           "popover_title": "Sélectionnez les balises",
           "empty_groups": "Aucun tag disponible pour l'instant"
         },
-        "compliance": "Conformité"
+        "compliance": "Conformité",
+        "public": "Publique",
+        "convert_to_public_blocked": "Ce cours comporte des questions qui ne peuvent pas être notées automatiquement et ne peut donc pas encore être rendu public.",
+        "fix_blocking_questions": "Corriger les questions bloquantes",
+        "slug": {
+          "label": "Limace d'URL",
+          "description": "Le dernier segment de l’URL publique de cet élément. Uniquement des lettres, des chiffres et des tirets.",
+          "public_only": "Les Slugs ne sont modifiables que sur les cours publics.",
+          "in_use": "Ce slug est déjà utilisé par un autre élément de ce cours."
+        },
+        "callout": {
+          "legend": "Appel du cours public",
+          "description": "Affiché au bas de chaque leçon et à la place des éléments verrouillés. Utilisez-le pour diriger les apprenants vers votre site ou vers un cours payant.",
+          "title_label": "Titre",
+          "title_placeholder": "Vous voulez approfondir ce sujet ?",
+          "description_label": "Descriptif",
+          "description_placeholder": "Rejoignez la cohorte complète pour expédier un projet de qualité production en 4 semaines.",
+          "button_label": "Etiquette du bouton",
+          "button_label_placeholder": "En savoir plus sur mon site",
+          "button_url_label": "URL du bouton",
+          "button_url_placeholder": "https://exemple.com",
+          "clear": "Effacer la légende",
+          "public_only": "Les légendes n'apparaissent que dans les cours publics."
+        }
       },
       "analytics": {
         "title": "Analyse"
@@ -1167,7 +1198,10 @@
               "attempt_counter": "Tentative {actuelle} de {total}",
               "previous_try": "Tentative précédente",
               "next_try": "Prochaine tentative",
-              "try_again": "Réessayez"
+              "try_again": "Réessayez",
+              "back": "Retour",
+              "begin_section": "Section de démarrage",
+              "complete_section": "Rubrique complète"
             },
             "edit_mode": {
               "delete_modal": "Supprimer l'exercice",
@@ -1193,7 +1227,8 @@
                 "hotspot": "Point d'accès",
                 "link": "Liens",
                 "word_bank": "Banque de mots",
-                "star": "Nombre d'étoiles"
+                "star": "Nombre d'étoiles",
+                "video_recording": "Enregistrement vidéo"
               },
               "select_type": "Sélectionnez le type",
               "question_type_auto_gradable": "Auto",
@@ -1204,7 +1239,9 @@
               "title": "Supprimer la question",
               "sure": "Êtes-vous sûr de vouloir supprimer cette question",
               "no": "Non, s'il te plaît, ne le fais pas",
-              "yes": "Oui, supprimer"
+              "yes": "Oui, supprimer",
+              "section_title": "Supprimer la rubrique",
+              "section_sure": "Cette rubrique sera supprimée. Ses questions seront déplacées vers la section la plus proche."
             },
             "description": {
               "title": "Titre",
@@ -1464,12 +1501,76 @@
                   "correct_value_placeholder": "par ex. 3",
                   "max_stars_placeholder": "par ex. 5"
                 }
+              },
+              "video_recording": {
+                "submission": {
+                  "no_video": "Aucune vidéo soumise.",
+                  "unavailable": "Vidéo indisponible.",
+                  "duration": "Durée",
+                  "file_size": "Taille du fichier",
+                  "recorded_at": "Enregistré",
+                  "uploaded_at": "Téléchargé",
+                  "retake_count": "Reprises"
+                },
+                "preview": {
+                  "max_duration_label": "Durée maximale",
+                  "manual_grading": "Les apprenants enregistrent une courte réponse vidéo. Classement manuel requis."
+                },
+                "take": {
+                  "unsupported": "L'enregistrement vidéo n'est pas pris en charge dans ce navigateur.",
+                  "permission_prompt": "Autorisez l’accès à la caméra et au microphone pour enregistrer votre réponse.",
+                  "permission_denied": "L'accès à la caméra ou au microphone a été bloqué. Vérifiez les autorisations du navigateur.",
+                  "start_camera": "Configurer la caméra",
+                  "camera_label": "Appareil photo",
+                  "camera_placeholder": "Sélectionnez la caméra",
+                  "play_preview": "Lire l'aperçu de l'enregistrement",
+                  "pause_preview": "Suspendre l'aperçu de l'enregistrement",
+                  "start_recording": "Commencer l'enregistrement",
+                  "stop_recording": "Arrêter l'enregistrement",
+                  "elapsed": "Écoulé",
+                  "remaining": "Restant",
+                  "max_duration": "Max.",
+                  "too_short": "Enregistrez pendant au moins 1 seconde.",
+                  "use_recording": "Utiliser l'enregistrement",
+                  "retake": "Reprendre",
+                  "delete": "Supprimer l'enregistrement",
+                  "retry_upload": "Réessayez de télécharger",
+                  "uploading": "Téléchargement de l'enregistrement...",
+                  "uploaded": "Enregistrement téléchargé",
+                  "upload_failed": "Le téléchargement a échoué. Essayer à nouveau.",
+                  "replaces_previous": "Une nouvelle prise acceptée remplace la réponse précédente après le téléchargement."
+                },
+                "edit": {
+                  "max_duration_label": "Durée maximale",
+                  "max_duration_helper": "Les étudiants enregistrent dans le navigateur et peuvent reprendre avant de soumettre. Le maximum est de 2 minutes.",
+                  "max_duration_placeholder": "60",
+                  "manual_grading": "Nécessite une notation manuelle"
+                }
               }
             },
             "settings": "Paramètres",
             "settings_allow_multiple": "Autoriser plusieurs tentatives",
             "settings_allow_multiple_helper": "Les étudiants peuvent soumettre plus d'une fois et revoir leurs tentatives antérieures sur l'écran des résultats.",
-            "settings_save": "Enregistrer les paramètres"
+            "settings_save": "Enregistrer les paramètres",
+            "add": "Ajouter",
+            "add_section": "Ajouter une rubrique",
+            "reorder_done": "Réorganisation terminée",
+            "section": {
+              "fallback_title": "Section",
+              "questions": "des questions",
+              "short_questions": "q",
+              "required": "requis",
+              "add_question": "Ajouter une question",
+              "delete": "Supprimer la rubrique",
+              "move_up": "Déplacer la section vers le haut",
+              "move_down": "Déplacer la section vers le bas",
+              "color": "Couleur des sections",
+              "description_placeholder": "Décrivez cette rubrique",
+              "after_section": "Après la section",
+              "continue": "Passer à la section suivante",
+              "go_to_section": "Aller à la rubrique",
+              "submit": "Soumettre l'exercice"
+            }
           },
           "new_exercise_modal": {
             "heading": "Nouvel exercice",
@@ -1657,7 +1758,12 @@
         "content_locked_description": "Votre instructeur n'a pas encore débloqué ce contenu. Complétez le contenu précédent ou revenez plus tard.",
         "saving": "Sauvegarde…",
         "saved": "Enregistré",
-        "draft_recovery": "Un brouillon non enregistré a été trouvé pour cette leçon. Souhaitez-vous le restaurer ?"
+        "draft_recovery": "Un brouillon non enregistré a été trouvé pour cette leçon. Souhaitez-vous le restaurer ?",
+        "stats": {
+          "sections": "Sections",
+          "lessons": "Leçons",
+          "exercises": "Exercices"
+        }
       },
       "news_feed": {
         "heading": "Fil d'actualité",
@@ -1782,7 +1888,8 @@
     },
     "header": {
       "preview": "Preview course",
-      "preview_missing_slug": "Generate and save a course slug before previewing."
+      "preview_missing_slug": "Generate and save a course slug before previewing.",
+      "public_course_helper": "Visible sur votre site public de cours"
     },
     "sidebar": {
       "back_to_course": "Retour au cours",
@@ -1841,6 +1948,26 @@
       "blocker_final_misconfigured": "L'exercice de certification « {exerciseTitle} » n'a aucun point configuré ; demandez à votre instructeur de le réparer.",
       "email_message_label": "Message électronique",
       "email_message_placeholder": "par ex. Nous sommes fiers de vos progrès – continuez à apprendre !"
+    },
+    "creator": {
+      "heading": "Quel cours souhaitez-vous créer ?",
+      "placeholder": "Demandez à ClassroomIO de créer un cours pour vous...",
+      "type": {
+        "self_paced": "À votre rythme",
+        "live_class": "Cours en direct"
+      },
+      "level": {
+        "beginner": "Débutant",
+        "intermediate": "Intermédiaire",
+        "advanced": "Avancé"
+      },
+      "drafting": {
+        "heading": "Rédiger votre idée de cours",
+        "subtext": "Nous transformons votre invite en titre de cours et en espace de travail.",
+        "step_reading": "Lire votre invite",
+        "step_naming": "Nommer votre cours",
+        "step_building": "Création de votre espace de travail"
+      }
     }
   },
   "courses": {
@@ -1881,6 +2008,8 @@
       "unpublished": "Inédit",
       "continue_course": "Continuer",
       "learn_more": "En savoir plus",
+      "public_badge": "Public",
+      "actions_menu_aria": "Actions du cours",
       "tags_overflow_aria": "{count} autres tags",
       "list_view": {
         "title": "Titre",
@@ -1897,7 +2026,8 @@
         "invite": "Inviter",
         "delete": "Supprimer",
         "open": "Ouvert",
-        "open_course_site": "Site de cours ouvert"
+        "open_public_course": "Ouvrir le cours public",
+        "copy_course_url": "Copier l’URL du cours"
       },
       "due_date": "Due",
       "valid_until": "Valable jusqu'au"
@@ -2599,7 +2729,8 @@
       "token_auth_tab": "Authentification du jeton",
       "customize_lms_tab": "Personnaliser le LMS",
       "domains_tab": "Domaines",
-      "teams_tab": "Équipes"
+      "teams_tab": "Équipes",
+      "ai_credits_tab": "Crédits IA"
     },
     "subheadings": {
       "view_site": "Voir le site"
@@ -2730,6 +2861,45 @@
     },
     "teams": {
       "page_subtitle": "Invite teammates and control who helps run this organization."
+    },
+    "ai_credits": {
+      "sub_title": "Crédits IA",
+      "page_subtitle": "Suivez l’utilisation de l’assistant IA, la consommation de l’équipe et achetez des packs de jetons.",
+      "cost_note": "L'utilisation du crédit est pondérée par le coût du modèle. Gemini 2.5 Flash et GPT-5.4 Mini comptent pour 1 unité de crédit par jeton. Claude Sonnet 4.6 compte pour 36 × par jeton, reflétant son coût API plus élevé.",
+      "buy_tokens": {
+        "title": "Achetez plus de jetons",
+        "description": "Chaque pack ajoute 5 000 000 de crédits pour 5 $ USD. Choisissez le nombre de packs dont vous avez besoin.",
+        "quantity_hint": "paquets",
+        "preview": "{quantité} pack(s) · {tokens} jetons · ${dollars}",
+        "buy_button": "Achetez pour ${dollars}"
+      },
+      "leaderboard": {
+        "title": "Utilisation de l'équipe",
+        "this_month": "Mois en cours",
+        "user": "Utilisateur",
+        "favorite_model": "Modèle préféré",
+        "tokens": "Jetons",
+        "empty": "Personne dans votre équipe n'a utilisé l'assistant IA ce mois-ci."
+      },
+      "chart": {
+        "heading": "Utilisation",
+        "subheading": "Consommation quotidienne de jetons ce mois-ci.",
+        "tokens": "Jetons",
+        "total_tokens": "Total des jetons",
+        "total_requests": "Total des demandes",
+        "empty": "Aucune utilisation enregistrée ce mois-ci pour l'instant."
+      },
+      "purchased": {
+        "title": "Utilisation achetée",
+        "subtitle": "Les jetons supplémentaires que vous avez achetés sont reportés jusqu'à ce qu'ils soient utilisés.",
+        "lifetime": "{tokens} jetons achetés · ${dollars} dépensés",
+        "buy_more": "Achetez plus"
+      },
+      "included": {
+        "title": "Votre utilisation incluse",
+        "subtitle": "Jetons mensuels inclus avec votre forfait.",
+        "resets_on": "Réinitialise {date}"
+      }
     }
   },
   "profileMenu": {
@@ -2839,7 +3009,9 @@
     "self_paced_label": "À votre rythme",
     "self_paced_subtitle": "Idéal pour les cours où les étudiants peuvent suivre des cours à leur propre rythme",
     "compliance_label": "Conformité",
-    "compliance_subtitle": "Formation récurrente avec reprises, rappels et suivi de renouvellement"
+    "compliance_subtitle": "Formation récurrente avec reprises, rappels et suivi de renouvellement",
+    "public_label": "Publique",
+    "public_subtitle": "Pages de cours gratuites et sans inscription que vous pouvez partager publiquement – idéales pour la génération de leads"
   },
   "delete_modal": {
     "label": "Supprimer",
@@ -3224,7 +3396,8 @@
     "input_placeholder": "Demandez à l'assistant IA...",
     "attach_document": "Joindre un document (PDF, DOCX, PPTX)",
     "upgrade_to_upload": "Mise à niveau pour télécharger des documents",
-    "tokens_exhausted": "Limite mensuelle de jetons IA atteinte. Achetez plus de crédits dans Paramètres > Facturation ou attendez la réinitialisation.",
+    "tokens_exhausted": "Limite mensuelle de jetons IA atteinte.",
+    "tokens_exhausted_buy_more": "Acheter plus",
     "chat_history": "Historique des discussions",
     "no_conversations": "Aucune conversation pour l'instant",
     "untitled": "Sans titre",
@@ -3237,7 +3410,8 @@
     "mention_exercise": "Exercice",
     "mention_section": "Section",
     "mention_no_results": "Aucun contenu correspondant",
-    "uploading_document": "Téléchargement du document..."
+    "uploading_document": "Téléchargement du document...",
+    "agent_running_warning": "Les modifications apparaîtront dans le cours une fois que l'agent aura terminé. Ne rechargez pas la page."
   },
   "widgets": {
     "heading": "Widgets",
diff --git a/apps/dashboard/src/lib/utils/translations/hi.json b/apps/dashboard/src/lib/utils/translations/hi.json
index 4c413fb9..ae1fd13c 100644
--- a/apps/dashboard/src/lib/utils/translations/hi.json
+++ b/apps/dashboard/src/lib/utils/translations/hi.json
@@ -391,6 +391,14 @@
         "post_created": "पोस्ट सफलतापूर्वक बनाई गई",
         "post_updated": "पोस्ट सफलतापूर्वक अपडेट की गई"
       }
+    },
+    "ai_credits": {
+      "purchase_success": "टोकन पैक आपके बैलेंस में जोड़ा गया।",
+      "checkout_failed": "चेकआउट प्रारंभ नहीं किया जा सका. कृपया पुन: प्रयास करें।"
+    },
+    "public_course": {
+      "url_copied": "कोर्स URL कॉपी हो गया",
+      "url_copy_failed": "URL कॉपी नहीं किया जा सका"
     }
   },
   "explore": {
@@ -656,7 +664,30 @@
           "popover_title": "टैग चुनें",
           "empty_groups": "अभी तक कोई टैग उपलब्ध नहीं है"
         },
-        "compliance": "अनुपालन"
+        "compliance": "अनुपालन",
+        "public": "सार्वजनिक",
+        "convert_to_public_blocked": "इस पाठ्यक्रम में ऐसे प्रश्न हैं जिन्हें स्वचालित रूप से वर्गीकृत नहीं किया जा सकता है, इसलिए इसे अभी तक सार्वजनिक नहीं किया जा सकता है।",
+        "fix_blocking_questions": "अवरुद्ध करने वाले प्रश्नों को ठीक करें",
+        "slug": {
+          "label": "यूआरएल स्लग",
+          "description": "इस आइटम के सार्वजनिक URL का अंतिम खंड. केवल अक्षर, संख्याएँ और डैश।",
+          "public_only": "स्लग केवल सार्वजनिक पाठ्यक्रमों पर संपादन योग्य हैं।",
+          "in_use": "वह स्लग इस पाठ्यक्रम में पहले से ही किसी अन्य आइटम द्वारा उपयोग किया जा चुका है।"
+        },
+        "callout": {
+          "legend": "सार्वजनिक पाठ्यक्रम कॉलआउट",
+          "description": "प्रत्येक पाठ के नीचे और लॉक की गई वस्तुओं के स्थान पर दिखाया गया है। इसका उपयोग शिक्षार्थियों को अपनी साइट या सशुल्क पाठ्यक्रम तक ले जाने के लिए करें।",
+          "title_label": "शीर्षक",
+          "title_placeholder": "क्या आप इस पर गहराई से जाना चाहते हैं?",
+          "description_label": "विवरण",
+          "description_placeholder": "4 सप्ताह में प्रोडक्शन-ग्रेड प्रोजेक्ट शिप करने के लिए पूरे समूह में शामिल हों।",
+          "button_label": "बटन लेबल",
+          "button_label_placeholder": "मेरी साइट पर और पढ़ें",
+          "button_url_label": "बटन यूआरएल",
+          "button_url_placeholder": "https://example.com",
+          "clear": "कॉलआउट साफ़ करें",
+          "public_only": "कॉलआउट केवल सार्वजनिक पाठ्यक्रमों पर दिखाई देते हैं।"
+        }
       },
       "analytics": {
         "title": "विश्लेषिकी"
@@ -1167,7 +1198,10 @@
               "attempt_counter": "{कुल} का {वर्तमान} प्रयास करें",
               "previous_try": "पिछला प्रयास",
               "next_try": "अगला प्रयास",
-              "try_again": "पुनः प्रयास करें"
+              "try_again": "पुनः प्रयास करें",
+              "back": "वापस",
+              "begin_section": "प्रारंभ अनुभाग",
+              "complete_section": "पूरा अनुभाग"
             },
             "edit_mode": {
               "delete_modal": "व्यायाम हटाएँ",
@@ -1193,7 +1227,8 @@
                 "hotspot": "हॉटस्पॉट",
                 "link": "कड़ियाँ",
                 "word_bank": "वर्ड बैंक",
-                "star": "स्टार रेटिंग"
+                "star": "स्टार रेटिंग",
+                "video_recording": "वीडियो रिकार्डिंग"
               },
               "select_type": "प्रकार चुनें",
               "question_type_auto_gradable": "Auto",
@@ -1204,7 +1239,9 @@
               "title": "प्रश्न हटाएँ",
               "sure": "क्या आप वाकई इस प्रश्न को हटाना चाहते हैं?",
               "no": "नहीं, कृपया ऐसा न करें",
-              "yes": "हाँ, हटाएँ"
+              "yes": "हाँ, हटाएँ",
+              "section_title": "अनुभाग हटाएँ",
+              "section_sure": "यह अनुभाग हटा दिया जाएगा. इसके प्रश्नों को निकटतम अनुभाग में ले जाया जाएगा।"
             },
             "description": {
               "title": "शीर्षक",
@@ -1464,12 +1501,76 @@
                   "correct_value_placeholder": "जैसे 3",
                   "max_stars_placeholder": "जैसे 5"
                 }
+              },
+              "video_recording": {
+                "submission": {
+                  "no_video": "कोई वीडियो सबमिट नहीं किया गया.",
+                  "unavailable": "वीडियो अनुपलब्ध.",
+                  "duration": "अवधि",
+                  "file_size": "फ़ाइल का आकार",
+                  "recorded_at": "रिकार्ड किया गया",
+                  "uploaded_at": "अपलोड किया गया",
+                  "retake_count": "रीटेक"
+                },
+                "preview": {
+                  "max_duration_label": "अधिकतम अवधि",
+                  "manual_grading": "शिक्षार्थी एक लघु वीडियो प्रतिक्रिया रिकॉर्ड करते हैं। मैन्युअल ग्रेडिंग आवश्यक है."
+                },
+                "take": {
+                  "unsupported": "इस ब्राउज़र में वीडियो रिकॉर्डिंग समर्थित नहीं है.",
+                  "permission_prompt": "अपना उत्तर रिकॉर्ड करने के लिए कैमरे और माइक्रोफ़ोन तक पहुंच की अनुमति दें।",
+                  "permission_denied": "कैमरा या माइक्रोफ़ोन पहुंच अवरुद्ध कर दी गई थी. ब्राउज़र अनुमतियाँ जांचें.",
+                  "start_camera": "कैमरा सेट करें",
+                  "camera_label": "कैमरा",
+                  "camera_placeholder": "कैमरा चुनें",
+                  "play_preview": "रिकॉर्डिंग पूर्वावलोकन चलाएं",
+                  "pause_preview": "रिकॉर्डिंग पूर्वावलोकन रोकें",
+                  "start_recording": "रिकॉर्डिंग प्रारंभ करें",
+                  "stop_recording": "रिकॉर्डिंग बंद करो",
+                  "elapsed": "बीत गया",
+                  "remaining": "शेष",
+                  "max_duration": "अधिकतम",
+                  "too_short": "कम से कम 1 सेकंड के लिए रिकॉर्ड करें.",
+                  "use_recording": "रिकॉर्डिंग का प्रयोग करें",
+                  "retake": "पुनः लेना",
+                  "delete": "रिकॉर्डिंग हटाएँ",
+                  "retry_upload": "पुनः अपलोड करने का प्रयास करें",
+                  "uploading": "रिकॉर्डिंग अपलोड हो रही है...",
+                  "uploaded": "रिकॉर्डिंग अपलोड की गई",
+                  "upload_failed": "अपलोड विफल रहा. पुनः प्रयास करें।",
+                  "replaces_previous": "अपलोड के बाद एक नया स्वीकृत टेक पिछले उत्तर को प्रतिस्थापित कर देता है।"
+                },
+                "edit": {
+                  "max_duration_label": "अधिकतम अवधि",
+                  "max_duration_helper": "छात्र ब्राउज़र में रिकॉर्ड करते हैं और सबमिट करने से पहले दोबारा ले सकते हैं। अधिकतम 2 मिनट है.",
+                  "max_duration_placeholder": "60",
+                  "manual_grading": "मैन्युअल ग्रेडिंग की आवश्यकता है"
+                }
               }
             },
             "settings": "सेटिंग्स",
             "settings_allow_multiple": "एकाधिक प्रयासों की अनुमति दें",
             "settings_allow_multiple_helper": "छात्र एक से अधिक बार सबमिट कर सकते हैं और परिणाम स्क्रीन पर पिछले प्रयासों की समीक्षा कर सकते हैं।",
-            "settings_save": "सेटिंग्स सहेजें"
+            "settings_save": "सेटिंग्स सहेजें",
+            "add": "जोड़ें",
+            "add_section": "अनुभाग जोड़ें",
+            "reorder_done": "पुनः क्रमित करना पूरा हुआ",
+            "section": {
+              "fallback_title": "धारा",
+              "questions": "प्रश्न",
+              "short_questions": "प्र",
+              "required": "आवश्यक",
+              "add_question": "प्रश्न जोड़ें",
+              "delete": "अनुभाग हटाएँ",
+              "move_up": "अनुभाग को ऊपर ले जाएँ",
+              "move_down": "अनुभाग को नीचे ले जाएँ",
+              "color": "अनुभाग का रंग",
+              "description_placeholder": "इस अनुभाग का वर्णन करें",
+              "after_section": "अनुभाग के बाद",
+              "continue": "अगले भाग पर जारी रखें",
+              "go_to_section": "अनुभाग पर जाएँ",
+              "submit": "व्यायाम सबमिट करें"
+            }
           },
           "new_exercise_modal": {
             "heading": "नया व्यायाम",
@@ -1657,7 +1758,12 @@
         "content_locked_description": "आपके प्रशिक्षक ने अभी तक इस सामग्री को अनलॉक नहीं किया है। पिछली सामग्री पूरी करें या बाद में दोबारा जाँचें।",
         "saving": "सहेजा जा रहा है...",
         "saved": "सहेजा गया",
-        "draft_recovery": "इस पाठ के लिए एक सहेजा न गया ड्राफ्ट मिला। क्या आप इसे पुनर्स्थापित करना चाहेंगे?"
+        "draft_recovery": "इस पाठ के लिए एक सहेजा न गया ड्राफ्ट मिला। क्या आप इसे पुनर्स्थापित करना चाहेंगे?",
+        "stats": {
+          "sections": "अनुभाग",
+          "lessons": "सबक",
+          "exercises": "व्यायाम"
+        }
       },
       "news_feed": {
         "heading": "समाचार फ़ीड",
@@ -1782,7 +1888,8 @@
     },
     "header": {
       "preview": "Preview course",
-      "preview_missing_slug": "Generate and save a course slug before previewing."
+      "preview_missing_slug": "Generate and save a course slug before previewing.",
+      "public_course_helper": "आपकी सार्वजनिक कोर्स साइट पर दृश्यमान"
     },
     "sidebar": {
       "back_to_course": "पाठ्यक्रम पर वापस जाएँ",
@@ -1841,6 +1948,26 @@
       "blocker_final_misconfigured": "प्रमाणन अभ्यास \"{exerciseTitle}\" में कोई बिंदु कॉन्फ़िगर नहीं किया गया है; अपने प्रशिक्षक से इसे ठीक करने के लिए कहें।",
       "email_message_label": "ईमेल संदेश",
       "email_message_placeholder": "जैसे हमें आपकी प्रगति पर गर्व है - सीखते रहें!"
+    },
+    "creator": {
+      "heading": "आप कौन सा कोर्स बनाना चाहते हैं?",
+      "placeholder": "ClassroomIO से आपके लिए एक पाठ्यक्रम बनाने के लिए कहें...",
+      "type": {
+        "self_paced": "स्वयं गति",
+        "live_class": "लाइव क्लास"
+      },
+      "level": {
+        "beginner": "शुरुआती",
+        "intermediate": "इंटरमीडिएट",
+        "advanced": "उन्नत"
+      },
+      "drafting": {
+        "heading": "अपने पाठ्यक्रम का विचार तैयार करना",
+        "subtext": "हम आपके संकेत को पाठ्यक्रम शीर्षक और कार्यक्षेत्र में बदल रहे हैं।",
+        "step_reading": "आपका संकेत पढ़ रहा हूँ",
+        "step_naming": "अपने पाठ्यक्रम का नामकरण",
+        "step_building": "अपना कार्यक्षेत्र बनाना"
+      }
     }
   },
   "courses": {
@@ -1881,6 +2008,8 @@
       "unpublished": "अप्रकाशित",
       "continue_course": "जारी रखें",
       "learn_more": "और जानें",
+      "public_badge": "सार्वजनिक",
+      "actions_menu_aria": "कोर्स क्रियाएँ",
       "tags_overflow_aria": "{count} और टैग",
       "list_view": {
         "title": "शीर्षक",
@@ -1897,7 +2026,8 @@
         "invite": "आमंत्रित करें",
         "delete": "हटाएँ",
         "open": "खुला",
-        "open_course_site": "पाठ्यक्रम साइट खोलें"
+        "open_public_course": "सार्वजनिक कोर्स खोलें",
+        "copy_course_url": "कोर्स URL कॉपी करें"
       },
       "due_date": "देय",
       "valid_until": "तक वैध है"
@@ -2599,7 +2729,8 @@
       "token_auth_tab": "टोकन प्रामाणिक",
       "customize_lms_tab": "एलएमएस को अनुकूलित करें",
       "domains_tab": "डोमेन",
-      "teams_tab": "टीमें"
+      "teams_tab": "टीमें",
+      "ai_credits_tab": "एआई क्रेडिट"
     },
     "subheadings": {
       "view_site": "साइट देखें"
@@ -2730,6 +2861,45 @@
     },
     "teams": {
       "page_subtitle": "Invite teammates and control who helps run this organization."
+    },
+    "ai_credits": {
+      "sub_title": "एआई क्रेडिट",
+      "page_subtitle": "एआई सहायक उपयोग, टीम की खपत और टोकन पैक की खरीद को ट्रैक करें।",
+      "cost_note": "क्रेडिट उपयोग को मॉडल लागत के आधार पर भारित किया जाता है। जेमिनी 2.5 फ्लैश और जीपीटी-5.4 मिनी की गणना प्रति टोकन 1 क्रेडिट यूनिट के रूप में की जाती है। क्लाउड सॉनेट 4.6 की गणना 36× प्रति टोकन के रूप में की जाती है, जो इसकी उच्च एपीआई लागत को दर्शाता है।",
+      "buy_tokens": {
+        "title": "अधिक टोकन खरीदें",
+        "description": "प्रत्येक पैक $5 USD के लिए 5,000,000 क्रेडिट जोड़ता है। चुनें कि आपको कितने पैक चाहिए.",
+        "quantity_hint": "पैक",
+        "preview": "{मात्रा} पैक · {टोकन} टोकन · ${डॉलर}",
+        "buy_button": "${डॉलर} में खरीदें"
+      },
+      "leaderboard": {
+        "title": "टीम का उपयोग",
+        "this_month": "चालू माह",
+        "user": "उपयोगकर्ता",
+        "favorite_model": "पसंदीदा मॉडल",
+        "tokens": "टोकन",
+        "empty": "इस महीने आपकी टीम में किसी ने भी एआई असिस्टेंट का उपयोग नहीं किया है।"
+      },
+      "chart": {
+        "heading": "उपयोग",
+        "subheading": "इस महीने दैनिक टोकन खपत।",
+        "tokens": "टोकन",
+        "total_tokens": "कुल टोकन",
+        "total_requests": "कुल अनुरोध",
+        "empty": "इस महीने अभी तक कोई उपयोग दर्ज नहीं किया गया है।"
+      },
+      "purchased": {
+        "title": "खरीदा गया उपयोग",
+        "subtitle": "आपके द्वारा खरीदे गए अतिरिक्त टोकन उपयोग होने तक रोल ओवर रहेंगे।",
+        "lifetime": "{टोकन} टोकन खरीदे गए · ${डॉलर} खर्च किए गए",
+        "buy_more": "और अधिक खरीदें"
+      },
+      "included": {
+        "title": "आपका सम्मिलित उपयोग",
+        "subtitle": "आपकी योजना में मासिक टोकन शामिल हैं।",
+        "resets_on": "{दिनांक} रीसेट करता है"
+      }
     }
   },
   "profileMenu": {
@@ -2839,7 +3009,9 @@
     "self_paced_label": "स्वयं गति",
     "self_paced_subtitle": "उन पाठ्यक्रमों के लिए सर्वोत्तम जहां छात्र अपनी गति से पाठ ले सकते हैं",
     "compliance_label": "अनुपालन",
-    "compliance_subtitle": "रीटेक, रिमाइंडर और नवीनीकरण ट्रैकिंग के साथ आवर्ती प्रशिक्षण"
+    "compliance_subtitle": "रीटेक, रिमाइंडर और नवीनीकरण ट्रैकिंग के साथ आवर्ती प्रशिक्षण",
+    "public_label": "सार्वजनिक",
+    "public_subtitle": "नि:शुल्क, बिना-साइनअप पाठ्यक्रम पृष्ठ जिन्हें आप सार्वजनिक रूप से साझा कर सकते हैं - लीड जनरल के लिए बढ़िया"
   },
   "delete_modal": {
     "label": "हटाएँ",
@@ -3224,7 +3396,8 @@
     "input_placeholder": "एआई सहायक से पूछें...",
     "attach_document": "एक दस्तावेज़ संलग्न करें (पीडीएफ, DOCX, PPTX)",
     "upgrade_to_upload": "दस्तावेज़ अपलोड करने के लिए अपग्रेड करें",
-    "tokens_exhausted": "मासिक एआई टोकन सीमा पूरी हो गई। सेटिंग्स > बिलिंग में अधिक क्रेडिट खरीदें या रीसेट की प्रतीक्षा करें।",
+    "tokens_exhausted": "मासिक एआई टोकन सीमा पूरी हो गई।",
+    "tokens_exhausted_buy_more": "और खरीदें",
     "chat_history": "चैट इतिहास",
     "no_conversations": "अभी तक कोई बातचीत नहीं",
     "untitled": "शीर्षकहीन",
@@ -3237,7 +3410,8 @@
     "mention_exercise": "व्यायाम",
     "mention_section": "धारा",
     "mention_no_results": "कोई मेल खाती सामग्री नहीं",
-    "uploading_document": "दस्तावेज़ अपलोड हो रहा है..."
+    "uploading_document": "दस्तावेज़ अपलोड हो रहा है...",
+    "agent_running_warning": "एजेंट का कार्य पूरा होते ही पाठ्यक्रम में परिवर्तन दिखाई देंगे। पृष्ठ पुनः लोड न करें."
   },
   "widgets": {
     "heading": "विजेट्स",
diff --git a/apps/dashboard/src/lib/utils/translations/pl.json b/apps/dashboard/src/lib/utils/translations/pl.json
index 4127fd5e..5ba805f7 100644
--- a/apps/dashboard/src/lib/utils/translations/pl.json
+++ b/apps/dashboard/src/lib/utils/translations/pl.json
@@ -391,6 +391,14 @@
         "post_created": "Post został utworzony pomyślnie",
         "post_updated": "Post został pomyślnie zaktualizowany"
       }
+    },
+    "ai_credits": {
+      "purchase_success": "Pakiet tokenów dodany do Twojego salda.",
+      "checkout_failed": "Nie można rozpocząć realizacji transakcji. Spróbuj ponownie."
+    },
+    "public_course": {
+      "url_copied": "Skopiowano adres URL kursu",
+      "url_copy_failed": "Nie można skopiować adresu URL"
     }
   },
   "explore": {
@@ -656,7 +664,30 @@
           "popover_title": "Wybierz tagi",
           "empty_groups": "Brak dostępnych tagów"
         },
-        "compliance": "Zgodność"
+        "compliance": "Zgodność",
+        "public": "Publiczne",
+        "convert_to_public_blocked": "Ten kurs zawiera pytania, których nie można oceniać automatycznie, dlatego nie można go jeszcze udostępnić publicznie.",
+        "fix_blocking_questions": "Napraw blokujące pytania",
+        "slug": {
+          "label": "Błąd adresu URL",
+          "description": "Ostatni segment publicznego adresu URL tego elementu. Tylko litery, cyfry i myślniki.",
+          "public_only": "Ślimaki można edytować wyłącznie na kursach publicznych.",
+          "in_use": "Ten ślimak jest już używany przez inny przedmiot w tym kursie."
+        },
+        "callout": {
+          "legend": "Objaśnienie dotyczące kursu publicznego",
+          "description": "Wyświetlane na dole każdej lekcji oraz w miejscu zablokowanych elementów. Użyj go, aby przyciągnąć uczniów do swojej witryny lub płatnego kursu.",
+          "title_label": "Tytuł",
+          "title_placeholder": "Chcesz zgłębić ten temat?",
+          "description_label": "Opis",
+          "description_placeholder": "Dołącz do pełnej kohorty, aby wysłać projekt na poziomie produkcyjnym w ciągu 4 tygodni.",
+          "button_label": "Etykieta przycisku",
+          "button_label_placeholder": "Przeczytaj więcej na mojej stronie",
+          "button_url_label": "Adres URL przycisku",
+          "button_url_placeholder": "https://przyklad.com",
+          "clear": "Wyczyść objaśnienie",
+          "public_only": "Objaśnienia pojawiają się tylko na kursach publicznych."
+        }
       },
       "analytics": {
         "title": "Analityka"
@@ -1167,7 +1198,10 @@
               "attempt_counter": "Próba {bieżąca} z {total}",
               "previous_try": "Poprzednia próba",
               "next_try": "Następna próba",
-              "try_again": "Spróbuj ponownie"
+              "try_again": "Spróbuj ponownie",
+              "back": "Powrót",
+              "begin_section": "Sekcja startowa",
+              "complete_section": "Kompletna sekcja"
             },
             "edit_mode": {
               "delete_modal": "Usuń ćwiczenie",
@@ -1193,7 +1227,8 @@
                 "hotspot": "Hotspot",
                 "link": "Linki",
                 "word_bank": "Bank słów",
-                "star": "Ocena gwiazdkowa"
+                "star": "Ocena gwiazdkowa",
+                "video_recording": "Nagrywanie wideo"
               },
               "select_type": "Wybierz typ",
               "question_type_auto_gradable": "Auto",
@@ -1204,7 +1239,9 @@
               "title": "Usuń pytanie",
               "sure": "Czy na pewno chcesz usunąć to pytanie?",
               "no": "Nie, proszę nie",
-              "yes": "Tak, usuń"
+              "yes": "Tak, usuń",
+              "section_title": "Usuń sekcję",
+              "section_sure": "Ta sekcja zostanie usunięta. Jej pytania zostaną przeniesione do najbliższego działu."
             },
             "description": {
               "title": "Tytuł",
@@ -1464,12 +1501,76 @@
                   "correct_value_placeholder": "np. 3",
                   "max_stars_placeholder": "np. 5"
                 }
+              },
+              "video_recording": {
+                "submission": {
+                  "no_video": "Nie przesłano żadnego filmu.",
+                  "unavailable": "Film niedostępny.",
+                  "duration": "Czas trwania",
+                  "file_size": "Rozmiar pliku",
+                  "recorded_at": "Nagrano",
+                  "uploaded_at": "Przesłano",
+                  "retake_count": "Powtarza"
+                },
+                "preview": {
+                  "max_duration_label": "Maksymalny czas trwania",
+                  "manual_grading": "Uczniowie nagrywają krótką odpowiedź wideo. Wymagane ręczne sortowanie."
+                },
+                "take": {
+                  "unsupported": "Ta przeglądarka nie obsługuje nagrywania wideo.",
+                  "permission_prompt": "Zezwól na dostęp do kamery i mikrofonu w celu nagrania odpowiedzi.",
+                  "permission_denied": "Dostęp do kamery lub mikrofonu został zablokowany. Sprawdź uprawnienia przeglądarki.",
+                  "start_camera": "Skonfiguruj kamerę",
+                  "camera_label": "Kamera",
+                  "camera_placeholder": "Wybierz kamerę",
+                  "play_preview": "Odtwórz podgląd nagrania",
+                  "pause_preview": "Wstrzymaj podgląd nagrywania",
+                  "start_recording": "Rozpocznij nagrywanie",
+                  "stop_recording": "Zatrzymaj nagrywanie",
+                  "elapsed": "Upłynął",
+                  "remaining": "Pozostało",
+                  "max_duration": "Maks",
+                  "too_short": "Nagrywaj przez co najmniej 1 sekundę.",
+                  "use_recording": "Skorzystaj z nagrania",
+                  "retake": "Powtórz",
+                  "delete": "Usuń nagranie",
+                  "retry_upload": "Spróbuj przesłać ponownie",
+                  "uploading": "Przesyłanie nagrania...",
+                  "uploaded": "Nagranie przesłane",
+                  "upload_failed": "Przesyłanie nie powiodło się. Spróbuj ponownie.",
+                  "replaces_previous": "Nowe zaakceptowane ujęcie zastępuje poprzednią odpowiedź po przesłaniu."
+                },
+                "edit": {
+                  "max_duration_label": "Maksymalny czas trwania",
+                  "max_duration_helper": "Uczniowie nagrywają w przeglądarce i mogą powtórzyć przed przesłaniem. Maksymalnie 2 minuty.",
+                  "max_duration_placeholder": "60",
+                  "manual_grading": "Wymaga ręcznego oceniania"
+                }
               }
             },
             "settings": "Ustawienia",
             "settings_allow_multiple": "Zezwalaj na wiele prób",
             "settings_allow_multiple_helper": "Uczniowie mogą przesłać więcej niż raz i przejrzeć wcześniejsze próby na ekranie wyników.",
-            "settings_save": "Zapisz ustawienia"
+            "settings_save": "Zapisz ustawienia",
+            "add": "Dodaj",
+            "add_section": "Dodaj sekcję",
+            "reorder_done": "Zakończono zmianę kolejności",
+            "section": {
+              "fallback_title": "Sekcja",
+              "questions": "pytania",
+              "short_questions": "q",
+              "required": "wymagane",
+              "add_question": "Dodaj pytanie",
+              "delete": "Usuń sekcję",
+              "move_up": "Przesuń sekcję w górę",
+              "move_down": "Przesuń sekcję w dół",
+              "color": "Kolor sekcji",
+              "description_placeholder": "Opisz tę sekcję",
+              "after_section": "Po sekcji",
+              "continue": "Przejdź do następnej sekcji",
+              "go_to_section": "Przejdź do sekcji",
+              "submit": "Prześlij ćwiczenie"
+            }
           },
           "new_exercise_modal": {
             "heading": "Nowe ćwiczenie",
@@ -1657,7 +1758,12 @@
         "content_locked_description": "Twój instruktor nie odblokował jeszcze tej zawartości. Uzupełnij poprzednią zawartość lub sprawdź później.",
         "saving": "Zapisuję…",
         "saved": "Zapisano",
-        "draft_recovery": "Znaleziono niezapisaną wersję roboczą tej lekcji. Czy chcesz go przywrócić?"
+        "draft_recovery": "Znaleziono niezapisaną wersję roboczą tej lekcji. Czy chcesz go przywrócić?",
+        "stats": {
+          "sections": "Sekcje",
+          "lessons": "Lekcje",
+          "exercises": "Ćwiczenia"
+        }
       },
       "news_feed": {
         "heading": "Kanał wiadomości",
@@ -1782,7 +1888,8 @@
     },
     "header": {
       "preview": "Preview course",
-      "preview_missing_slug": "Generate and save a course slug before previewing."
+      "preview_missing_slug": "Generate and save a course slug before previewing.",
+      "public_course_helper": "Widoczny na publicznej stronie kursu"
     },
     "sidebar": {
       "back_to_course": "Powrót na kurs",
@@ -1841,6 +1948,26 @@
       "blocker_final_misconfigured": "W ćwiczeniu certyfikacyjnym „{exerciseTitle}” nie skonfigurowano żadnych punktów; poproś instruktora, żeby to naprawił.",
       "email_message_label": "Wiadomość e-mail",
       "email_message_placeholder": "np. Jesteśmy dumni z Twoich postępów — ucz się dalej!"
+    },
+    "creator": {
+      "heading": "Jaki kurs chcesz stworzyć?",
+      "placeholder": "Poproś ClassroomIO o utworzenie kursu dla Ciebie...",
+      "type": {
+        "self_paced": "Samodzielne tempo",
+        "live_class": "Zajęcia na żywo"
+      },
+      "level": {
+        "beginner": "Początkujący",
+        "intermediate": "Średnio zaawansowany",
+        "advanced": "Zaawansowane"
+      },
+      "drafting": {
+        "heading": "Opracowanie pomysłu na kurs",
+        "subtext": "Zamieniamy Twój monit w tytuł kursu i obszar roboczy.",
+        "step_reading": "Czytanie Twojego monitu",
+        "step_naming": "Nazywanie kursu",
+        "step_building": "Tworzenie przestrzeni roboczej"
+      }
     }
   },
   "courses": {
@@ -1881,6 +2008,8 @@
       "unpublished": "Niepublikowane",
       "continue_course": "Kontynuuj",
       "learn_more": "Dowiedz się więcej",
+      "public_badge": "Publiczny",
+      "actions_menu_aria": "Akcje kursu",
       "tags_overflow_aria": "Jeszcze {count} tagów",
       "list_view": {
         "title": "Tytuł",
@@ -1897,7 +2026,8 @@
         "invite": "Zaproś",
         "delete": "Usuń",
         "open": "Otwórz",
-        "open_course_site": "Otwarta strona kursu"
+        "open_public_course": "Otwórz publiczny kurs",
+        "copy_course_url": "Kopiuj adres URL kursu"
       },
       "due_date": "Termin",
       "valid_until": "Ważne do"
@@ -2599,7 +2729,8 @@
       "token_auth_tab": "Autoryzacja tokenu",
       "customize_lms_tab": "Dostosuj LMS-a",
       "domains_tab": "Domeny",
-      "teams_tab": "Zespoły"
+      "teams_tab": "Zespoły",
+      "ai_credits_tab": "Kredyty AI"
     },
     "subheadings": {
       "view_site": "Zobacz witrynę"
@@ -2730,6 +2861,45 @@
     },
     "teams": {
       "page_subtitle": "Invite teammates and control who helps run this organization."
+    },
+    "ai_credits": {
+      "sub_title": "Kredyty AI",
+      "page_subtitle": "Śledź wykorzystanie asystenta AI, wykorzystanie zespołu i kupuj pakiety tokenów.",
+      "cost_note": "Wykorzystanie kredytu jest ważone kosztem modelu. Gemini 2.5 Flash i GPT-5.4 Mini liczą się jako 1 jednostka kredytowa na token. Claude Sonnet 4.6 liczy się jako 36× na token, co odzwierciedla wyższy koszt interfejsu API.",
+      "buy_tokens": {
+        "title": "Kup więcej tokenów",
+        "description": "Każdy pakiet dodaje 5 000 000 kredytów za 5 USD. Wybierz, ile opakowań potrzebujesz.",
+        "quantity_hint": "paczki",
+        "preview": "{ilość} paczek · {tokens} tokenów · ${dolary}",
+        "buy_button": "Kup za ${dolarów}"
+      },
+      "leaderboard": {
+        "title": "Wykorzystanie zespołu",
+        "this_month": "Bieżący miesiąc",
+        "user": "Użytkownik",
+        "favorite_model": "Ulubiony model",
+        "tokens": "Żetony",
+        "empty": "Nikt w Twoim zespole nie korzystał w tym miesiącu z asystenta AI."
+      },
+      "chart": {
+        "heading": "Użycie",
+        "subheading": "Dzienne zużycie tokenów w tym miesiącu.",
+        "tokens": "Żetony",
+        "total_tokens": "Suma tokenów",
+        "total_requests": "Łączna liczba żądań",
+        "empty": "W tym miesiącu nie zarejestrowano jeszcze żadnego użycia."
+      },
+      "purchased": {
+        "title": "Zakupione użycie",
+        "subtitle": "Dodatkowe zakupione żetony przechodzą na inne, dopóki nie zostaną wykorzystane.",
+        "lifetime": "Zakupiono {tokens} tokenów · Wydano ${dolarów}",
+        "buy_more": "Kup więcej"
+      },
+      "included": {
+        "title": "Twoje uwzględnione wykorzystanie",
+        "subtitle": "Tokeny miesięczne zawarte w Twoim planie.",
+        "resets_on": "Resetuje {data}"
+      }
     }
   },
   "profileMenu": {
@@ -2839,7 +3009,9 @@
     "self_paced_label": "Samodzielne tempo",
     "self_paced_subtitle": "Najlepsze rozwiązanie w przypadku kursów, w których uczniowie mogą brać udział w lekcjach we własnym tempie",
     "compliance_label": "Zgodność",
-    "compliance_subtitle": "Szkolenia cykliczne z powtórzeniami, przypomnieniami i śledzeniem odnowień"
+    "compliance_subtitle": "Szkolenia cykliczne z powtórzeniami, przypomnieniami i śledzeniem odnowień",
+    "public_label": "Publiczne",
+    "public_subtitle": "Bezpłatne strony kursów bez rejestracji, które możesz udostępniać publicznie — idealne dla lead gen"
   },
   "delete_modal": {
     "label": "Usuń",
@@ -3224,7 +3396,8 @@
     "input_placeholder": "Zapytaj asystenta AI...",
     "attach_document": "Załącz dokument (PDF, DOCX, PPTX)",
     "upgrade_to_upload": "Uaktualnij, aby przesyłać dokumenty",
-    "tokens_exhausted": "Osiągnięto miesięczny limit tokenów AI. Kup więcej kredytów w Ustawieniach > Rozliczenia lub poczekaj na reset.",
+    "tokens_exhausted": "Osiągnięto miesięczny limit tokenów AI.",
+    "tokens_exhausted_buy_more": "Kup więcej",
     "chat_history": "Historia czatu",
     "no_conversations": "Nie ma jeszcze żadnych rozmów",
     "untitled": "Bez tytułu",
@@ -3237,7 +3410,8 @@
     "mention_exercise": "Ćwicz",
     "mention_section": "Sekcja",
     "mention_no_results": "Brak pasującej treści",
-    "uploading_document": "Przesyłanie dokumentu..."
+    "uploading_document": "Przesyłanie dokumentu...",
+    "agent_running_warning": "Zmiany pojawią się w kursie po zakończeniu działania agenta. Nie przeładowuj strony."
   },
   "widgets": {
     "heading": "Widżety",
diff --git a/apps/dashboard/src/lib/utils/translations/pt.json b/apps/dashboard/src/lib/utils/translations/pt.json
index 4d9ed7ad..6f1e9a42 100644
--- a/apps/dashboard/src/lib/utils/translations/pt.json
+++ b/apps/dashboard/src/lib/utils/translations/pt.json
@@ -391,6 +391,14 @@
         "post_created": "Postagem criada com sucesso",
         "post_updated": "Postagem atualizada com sucesso"
       }
+    },
+    "ai_credits": {
+      "purchase_success": "Pacote de tokens adicionado ao seu saldo.",
+      "checkout_failed": "Não foi possível iniciar a finalização da compra. Por favor, tente novamente."
+    },
+    "public_course": {
+      "url_copied": "URL do curso copiada",
+      "url_copy_failed": "Não foi possível copiar a URL"
     }
   },
   "explore": {
@@ -656,7 +664,30 @@
           "popover_title": "Selecione tags",
           "empty_groups": "Nenhuma tag disponível ainda"
         },
-        "compliance": "Conformidade"
+        "compliance": "Conformidade",
+        "public": "Público",
+        "convert_to_public_blocked": "Este curso tem perguntas que não podem ser avaliadas automaticamente, portanto ainda não pode ser tornado público.",
+        "fix_blocking_questions": "Corrigir perguntas de bloqueio",
+        "slug": {
+          "label": "Slug de URL",
+          "description": "O último segmento do URL público deste item. Apenas letras, números e travessões.",
+          "public_only": "Slugs só são editáveis ​​em cursos públicos.",
+          "in_use": "Esse slug já é usado por outro item deste curso."
+        },
+        "callout": {
+          "legend": "Chamada pública do curso",
+          "description": "Mostrado na parte inferior de cada lição e no lugar dos itens bloqueados. Use-o para direcionar os alunos ao seu site ou a um curso pago.",
+          "title_label": "Título",
+          "title_placeholder": "Quer se aprofundar nisso?",
+          "description_label": "Descrição",
+          "description_placeholder": "Junte-se ao grupo completo para enviar um projeto de nível de produção em 4 semanas.",
+          "button_label": "Etiqueta do botão",
+          "button_label_placeholder": "Leia mais no meu site",
+          "button_url_label": "URL do botão",
+          "button_url_placeholder": "https://example.com",
+          "clear": "Limpar frase de destaque",
+          "public_only": "As frases de destaque aparecem apenas em cursos públicos."
+        }
       },
       "analytics": {
         "title": "Análise"
@@ -1167,7 +1198,10 @@
               "attempt_counter": "Tentativa {atual} de {total}",
               "previous_try": "Tentativa anterior",
               "next_try": "Próxima tentativa",
-              "try_again": "Tente novamente"
+              "try_again": "Tente novamente",
+              "back": "Voltar",
+              "begin_section": "Seção inicial",
+              "complete_section": "Seção completa"
             },
             "edit_mode": {
               "delete_modal": "Excluir exercício",
@@ -1193,7 +1227,8 @@
                 "hotspot": "Ponto de acesso",
                 "link": "Ligações",
                 "word_bank": "Banco de palavras",
-                "star": "Classificação por estrelas"
+                "star": "Classificação por estrelas",
+                "video_recording": "Gravação de vídeo"
               },
               "select_type": "Selecione o tipo",
               "question_type_auto_gradable": "Auto",
@@ -1204,7 +1239,9 @@
               "title": "Excluir pergunta",
               "sure": "Tem certeza de que deseja excluir esta pergunta",
               "no": "Não, por favor, não",
-              "yes": "Sim, excluir"
+              "yes": "Sim, excluir",
+              "section_title": "Excluir seção",
+              "section_sure": "Esta seção será excluída. Suas perguntas serão movidas para a seção mais próxima."
             },
             "description": {
               "title": "Título",
@@ -1464,12 +1501,76 @@
                   "correct_value_placeholder": "por exemplo 3",
                   "max_stars_placeholder": "por exemplo 5"
                 }
+              },
+              "video_recording": {
+                "submission": {
+                  "no_video": "Nenhum vídeo enviado.",
+                  "unavailable": "Vídeo indisponível.",
+                  "duration": "Duração",
+                  "file_size": "Tamanho do arquivo",
+                  "recorded_at": "Gravado",
+                  "uploaded_at": "Enviado",
+                  "retake_count": "Repetições"
+                },
+                "preview": {
+                  "max_duration_label": "Duração máxima",
+                  "manual_grading": "Os alunos gravam uma breve resposta em vídeo. É necessária classificação manual."
+                },
+                "take": {
+                  "unsupported": "A gravação de vídeo não é compatível com este navegador.",
+                  "permission_prompt": "Permita o acesso à câmera e ao microfone para gravar sua resposta.",
+                  "permission_denied": "O acesso à câmera ou ao microfone foi bloqueado. Verifique as permissões do navegador.",
+                  "start_camera": "Configurar câmera",
+                  "camera_label": "Câmera",
+                  "camera_placeholder": "Selecione a câmera",
+                  "play_preview": "Reproduzir pré-visualização da gravação",
+                  "pause_preview": "Pausar visualização da gravação",
+                  "start_recording": "Comece a gravar",
+                  "stop_recording": "Pare de gravar",
+                  "elapsed": "Decorrido",
+                  "remaining": "Restante",
+                  "max_duration": "Máx.",
+                  "too_short": "Grave por pelo menos 1 segundo.",
+                  "use_recording": "Usar gravação",
+                  "retake": "Retomar",
+                  "delete": "Excluir gravação",
+                  "retry_upload": "Tentar enviar novamente",
+                  "uploading": "Carregando gravação...",
+                  "uploaded": "Gravação enviada",
+                  "upload_failed": "Falha no upload. Tente novamente.",
+                  "replaces_previous": "Uma nova tomada aceita substitui a resposta anterior após o upload."
+                },
+                "edit": {
+                  "max_duration_label": "Duração máxima",
+                  "max_duration_helper": "Os alunos gravam no navegador e podem refazer antes de enviar. O máximo é 2 minutos.",
+                  "max_duration_placeholder": "60",
+                  "manual_grading": "Requer classificação manual"
+                }
               }
             },
             "settings": "Configurações",
             "settings_allow_multiple": "Permitir múltiplas tentativas",
             "settings_allow_multiple_helper": "Os alunos podem enviar mais de uma vez e revisar as tentativas anteriores na tela de resultados.",
-            "settings_save": "Salvar configurações"
+            "settings_save": "Salvar configurações",
+            "add": "Adicionar",
+            "add_section": "Adicionar seção",
+            "reorder_done": "Reordenação concluída",
+            "section": {
+              "fallback_title": "Seção",
+              "questions": "perguntas",
+              "short_questions": "q",
+              "required": "obrigatório",
+              "add_question": "Adicionar pergunta",
+              "delete": "Excluir seção",
+              "move_up": "Mover seção para cima",
+              "move_down": "Mover seção para baixo",
+              "color": "Cor da seção",
+              "description_placeholder": "Descreva esta seção",
+              "after_section": "Depois da seção",
+              "continue": "Continuar para a próxima seção",
+              "go_to_section": "Vá para a seção",
+              "submit": "Enviar exercício"
+            }
           },
           "new_exercise_modal": {
             "heading": "Novo exercício",
@@ -1657,7 +1758,12 @@
         "content_locked_description": "Seu instrutor ainda não desbloqueou este conteúdo. Conclua o conteúdo anterior ou volte mais tarde.",
         "saving": "Salvando…",
         "saved": "Salvo",
-        "draft_recovery": "Um rascunho não salvo foi encontrado para esta lição. Você gostaria de restaurá-lo?"
+        "draft_recovery": "Um rascunho não salvo foi encontrado para esta lição. Você gostaria de restaurá-lo?",
+        "stats": {
+          "sections": "Seções",
+          "lessons": "Lições",
+          "exercises": "Exercícios"
+        }
       },
       "news_feed": {
         "heading": "Feed de notícias",
@@ -1782,7 +1888,8 @@
     },
     "header": {
       "preview": "Preview course",
-      "preview_missing_slug": "Generate and save a course slug before previewing."
+      "preview_missing_slug": "Generate and save a course slug before previewing.",
+      "public_course_helper": "Visível no site público do seu curso"
     },
     "sidebar": {
       "back_to_course": "De volta ao curso",
@@ -1841,6 +1948,26 @@
       "blocker_final_misconfigured": "O exercício de certificação \"{exerciseTitle}\" não possui pontos configurados; peça ao seu instrutor para consertar.",
       "email_message_label": "Mensagem de e-mail",
       "email_message_placeholder": "por exemplo Estamos orgulhosos do seu progresso – continue aprendendo!"
+    },
+    "creator": {
+      "heading": "Qual curso você deseja criar?",
+      "placeholder": "Peça ao ClassroomIO para criar um curso para você...",
+      "type": {
+        "self_paced": "Individualizado",
+        "live_class": "Aula ao vivo"
+      },
+      "level": {
+        "beginner": "Iniciante",
+        "intermediate": "Intermediário",
+        "advanced": "Avançado"
+      },
+      "drafting": {
+        "heading": "Elaborando sua ideia de curso",
+        "subtext": "Estamos transformando seu prompt em um título de curso e espaço de trabalho.",
+        "step_reading": "Lendo seu prompt",
+        "step_naming": "Nomeando seu curso",
+        "step_building": "Criando seu espaço de trabalho"
+      }
     }
   },
   "courses": {
@@ -1881,6 +2008,8 @@
       "unpublished": "Não publicado",
       "continue_course": "Continuar",
       "learn_more": "Saiba mais",
+      "public_badge": "Público",
+      "actions_menu_aria": "Ações do curso",
       "tags_overflow_aria": "Mais {count} tags",
       "list_view": {
         "title": "Título",
@@ -1897,7 +2026,8 @@
         "invite": "Convidar",
         "delete": "Excluir",
         "open": "Abrir",
-        "open_course_site": "Abrir site do curso"
+        "open_public_course": "Abrir curso público",
+        "copy_course_url": "Copiar URL do curso"
       },
       "due_date": "Devido",
       "valid_until": "Válido até"
@@ -2599,7 +2729,8 @@
       "token_auth_tab": "Autenticação de token",
       "customize_lms_tab": "Personalizar LMS",
       "domains_tab": "Domínios",
-      "teams_tab": "Equipes"
+      "teams_tab": "Equipes",
+      "ai_credits_tab": "Créditos de IA"
     },
     "subheadings": {
       "view_site": "Ver site"
@@ -2730,6 +2861,45 @@
     },
     "teams": {
       "page_subtitle": "Invite teammates and control who helps run this organization."
+    },
+    "ai_credits": {
+      "sub_title": "Créditos de IA",
+      "page_subtitle": "Rastreie o uso do assistente de IA, o consumo da equipe e compre pacotes de tokens.",
+      "cost_note": "O uso do crédito é ponderado pelo custo do modelo. Gemini 2.5 Flash e GPT-5.4 Mini contam como 1 unidade de crédito por token. Claude Sonnet 4.6 conta como 36× por token, refletindo seu custo mais alto de API.",
+      "buy_tokens": {
+        "title": "Compre mais fichas",
+        "description": "Cada pacote adiciona 5.000.000 de créditos por US$ 5. Escolha quantos pacotes você precisa.",
+        "quantity_hint": "pacotes",
+        "preview": "{quantidade} pacote(s) · {tokens} tokens · ${dollars}",
+        "buy_button": "Compre por ${dólares}"
+      },
+      "leaderboard": {
+        "title": "Uso da equipe",
+        "this_month": "Mês atual",
+        "user": "Usuário",
+        "favorite_model": "Modelo favorito",
+        "tokens": "Fichas",
+        "empty": "Ninguém na sua equipe usou o assistente de IA este mês."
+      },
+      "chart": {
+        "heading": "Uso",
+        "subheading": "Consumo diário de tokens este mês.",
+        "tokens": "Fichas",
+        "total_tokens": "Totais de fichas",
+        "total_requests": "Total de solicitações",
+        "empty": "Nenhum uso registrado neste mês ainda."
+      },
+      "purchased": {
+        "title": "Uso adquirido",
+        "subtitle": "Tokens extras que você comprou acumulam até serem usados.",
+        "lifetime": "{tokens} tokens comprados · ${dollars} gastos",
+        "buy_more": "Compre mais"
+      },
+      "included": {
+        "title": "Seu uso incluído",
+        "subtitle": "Tokens mensais incluídos no seu plano.",
+        "resets_on": "Reinicializações em {data}"
+      }
     }
   },
   "profileMenu": {
@@ -2839,7 +3009,9 @@
     "self_paced_label": "Individualizado",
     "self_paced_subtitle": "Melhor para cursos onde os alunos podem ter aulas em seu próprio ritmo",
     "compliance_label": "Conformidade",
-    "compliance_subtitle": "Treinamento recorrente com repetições, lembretes e acompanhamento de renovação"
+    "compliance_subtitle": "Treinamento recorrente com repetições, lembretes e acompanhamento de renovação",
+    "public_label": "Público",
+    "public_subtitle": "Páginas de cursos gratuitas e sem inscrição que você pode compartilhar publicamente - ótimas para geração de leads"
   },
   "delete_modal": {
     "label": "Excluir",
@@ -3224,7 +3396,8 @@
     "input_placeholder": "Pergunte ao assistente de IA...",
     "attach_document": "Anexe um documento (PDF, DOCX, PPTX)",
     "upgrade_to_upload": "Atualize para fazer upload de documentos",
-    "tokens_exhausted": "Limite mensal de tokens de IA atingido. Compre mais créditos em Configurações > Faturamento ou aguarde a redefinição.",
+    "tokens_exhausted": "Limite mensal de tokens de IA atingido.",
+    "tokens_exhausted_buy_more": "Comprar mais",
     "chat_history": "Histórico de bate-papo",
     "no_conversations": "Ainda não há conversas",
     "untitled": "Sem título",
@@ -3237,7 +3410,8 @@
     "mention_exercise": "Exercício",
     "mention_section": "Seção",
     "mention_no_results": "Nenhum conteúdo correspondente",
-    "uploading_document": "Carregando documento..."
+    "uploading_document": "Carregando documento...",
+    "agent_running_warning": "As alterações aparecerão no curso assim que o agente terminar. Não recarregue a página."
   },
   "widgets": {
     "heading": "Widgets",
diff --git a/apps/dashboard/src/lib/utils/translations/ru.json b/apps/dashboard/src/lib/utils/translations/ru.json
index 92ad9a79..8ac57477 100644
--- a/apps/dashboard/src/lib/utils/translations/ru.json
+++ b/apps/dashboard/src/lib/utils/translations/ru.json
@@ -391,6 +391,14 @@
         "post_created": "Сообщение успешно создано",
         "post_updated": "Сообщение успешно обновлено"
       }
+    },
+    "ai_credits": {
+      "purchase_success": "Пакет токенов добавлен на ваш баланс.",
+      "checkout_failed": "Не удалось начать оформление заказа. Пожалуйста, попробуйте еще раз."
+    },
+    "public_course": {
+      "url_copied": "URL курса скопирован",
+      "url_copy_failed": "Не удалось скопировать URL"
     }
   },
   "explore": {
@@ -656,7 +664,30 @@
           "popover_title": "Выберите теги",
           "empty_groups": "Тегов пока нет"
         },
-        "compliance": "Соответствие"
+        "compliance": "Соответствие",
+        "public": "Общественный",
+        "convert_to_public_blocked": "В этом курсе есть вопросы, которые нельзя оценить автоматически, поэтому его пока нельзя опубликовать.",
+        "fix_blocking_questions": "Исправить блокирующие вопросы",
+        "slug": {
+          "label": "URL-адрес",
+          "description": "Последний сегмент общедоступного URL-адреса этого элемента. Только буквы, цифры и тире.",
+          "public_only": "Слаги доступны для редактирования только на общедоступных курсах.",
+          "in_use": "Этот пул уже используется другим предметом в этом курсе."
+        },
+        "callout": {
+          "legend": "Уведомление об общедоступном курсе",
+          "description": "Отображается внизу каждого урока вместо заблокированных элементов. Используйте его, чтобы привлечь учащихся на ваш сайт или на платный курс.",
+          "title_label": "Название",
+          "title_placeholder": "Хотите углубиться в это?",
+          "description_label": "Описание",
+          "description_placeholder": "Присоединяйтесь к полной группе, чтобы реализовать проект промышленного уровня за 4 недели.",
+          "button_label": "Метка кнопки",
+          "button_label_placeholder": "Подробнее читайте на моем сайте",
+          "button_url_label": "URL-адрес кнопки",
+          "button_url_placeholder": "https://example.com",
+          "clear": "Очистить выноску",
+          "public_only": "Уточнения появляются только на общедоступных курсах."
+        }
       },
       "analytics": {
         "title": "Аналитика"
@@ -1167,7 +1198,10 @@
               "attempt_counter": "Попытка {текущая} из {total}",
               "previous_try": "Предыдущая попытка",
               "next_try": "Следующая попытка",
-              "try_again": "Попробуйте еще раз"
+              "try_again": "Попробуйте еще раз",
+              "back": "Назад",
+              "begin_section": "Начальный раздел",
+              "complete_section": "Полный раздел"
             },
             "edit_mode": {
               "delete_modal": "Удалить упражнение",
@@ -1193,7 +1227,8 @@
                 "hotspot": "Точка доступа",
                 "link": "Ссылки",
                 "word_bank": "Банк слов",
-                "star": "Звездный рейтинг"
+                "star": "Звездный рейтинг",
+                "video_recording": "Запись видео"
               },
               "select_type": "Выберите тип",
               "question_type_auto_gradable": "Auto",
@@ -1204,7 +1239,9 @@
               "title": "Удалить вопрос",
               "sure": "Вы уверены, что хотите удалить этот вопрос?",
               "no": "Нет, пожалуйста, не надо",
-              "yes": "Да, удалить"
+              "yes": "Да, удалить",
+              "section_title": "Удалить раздел",
+              "section_sure": "Этот раздел будет удален. Его вопросы будут перенесены в ближайший раздел."
             },
             "description": {
               "title": "Название",
@@ -1464,12 +1501,76 @@
                   "correct_value_placeholder": "например 3",
                   "max_stars_placeholder": "например 5"
                 }
+              },
+              "video_recording": {
+                "submission": {
+                  "no_video": "Видео не представлено.",
+                  "unavailable": "Видео недоступно.",
+                  "duration": "Продолжительность",
+                  "file_size": "Размер файла",
+                  "recorded_at": "Записано",
+                  "uploaded_at": "Загружено",
+                  "retake_count": "Пересдача"
+                },
+                "preview": {
+                  "max_duration_label": "Максимальная продолжительность",
+                  "manual_grading": "Учащиеся записывают короткий видеоответ. Требуется ручная оценка."
+                },
+                "take": {
+                  "unsupported": "Запись видео не поддерживается в этом браузере.",
+                  "permission_prompt": "Разрешите доступ к камере и микрофону, чтобы записать ваш ответ.",
+                  "permission_denied": "Доступ к камере или микрофону заблокирован. Проверьте разрешения браузера.",
+                  "start_camera": "Настроить камеру",
+                  "camera_label": "Камера",
+                  "camera_placeholder": "Выберите камеру",
+                  "play_preview": "Воспроизвести предварительный просмотр записи",
+                  "pause_preview": "Приостановить предварительный просмотр записи",
+                  "start_recording": "Начать запись",
+                  "stop_recording": "Остановить запись",
+                  "elapsed": "Прошедшее",
+                  "remaining": "Осталось",
+                  "max_duration": "Макс",
+                  "too_short": "Запись не менее 1 секунды.",
+                  "use_recording": "Использовать запись",
+                  "retake": "Пересдать",
+                  "delete": "Удалить запись",
+                  "retry_upload": "Повторить загрузку",
+                  "uploading": "Загрузка записи...",
+                  "uploaded": "Запись загружена",
+                  "upload_failed": "Загрузка не удалась. Попробуйте еще раз.",
+                  "replaces_previous": "Новый принятый вариант заменяет предыдущий ответ после загрузки."
+                },
+                "edit": {
+                  "max_duration_label": "Максимальная продолжительность",
+                  "max_duration_helper": "Учащиеся делают запись в браузере и могут пересдать ее перед отправкой. Максимум — 2 минуты.",
+                  "max_duration_placeholder": "60",
+                  "manual_grading": "Требуется ручная оценка"
+                }
               }
             },
             "settings": "Настройки",
             "settings_allow_multiple": "Разрешить несколько попыток",
             "settings_allow_multiple_helper": "Учащиеся могут отправлять заявки несколько раз и просматривать предыдущие попытки на экране результатов.",
-            "settings_save": "Сохранить настройки"
+            "settings_save": "Сохранить настройки",
+            "add": "Добавить",
+            "add_section": "Добавить раздел",
+            "reorder_done": "Изменение заказа завершено",
+            "section": {
+              "fallback_title": "Раздел",
+              "questions": "вопросы",
+              "short_questions": "д",
+              "required": "требуется",
+              "add_question": "Добавить вопрос",
+              "delete": "Удалить раздел",
+              "move_up": "Переместить раздел вверх",
+              "move_down": "Переместить раздел вниз",
+              "color": "Цвет раздела",
+              "description_placeholder": "Опишите этот раздел",
+              "after_section": "После раздела",
+              "continue": "Перейти к следующему разделу",
+              "go_to_section": "Перейти в раздел",
+              "submit": "Отправить упражнение"
+            }
           },
           "new_exercise_modal": {
             "heading": "Новое упражнение",
@@ -1657,7 +1758,12 @@
         "content_locked_description": "Ваш преподаватель еще не разблокировал этот контент. Завершите предыдущий контент или зайдите позже.",
         "saving": "Сохранение…",
         "saved": "Сохранено",
-        "draft_recovery": "Для этого урока найден несохраненный черновик. Хотели бы вы восстановить его?"
+        "draft_recovery": "Для этого урока найден несохраненный черновик. Хотели бы вы восстановить его?",
+        "stats": {
+          "sections": "Разделы",
+          "lessons": "Уроки",
+          "exercises": "Упражнения"
+        }
       },
       "news_feed": {
         "heading": "Лента новостей",
@@ -1782,7 +1888,8 @@
     },
     "header": {
       "preview": "Preview course",
-      "preview_missing_slug": "Generate and save a course slug before previewing."
+      "preview_missing_slug": "Generate and save a course slug before previewing.",
+      "public_course_helper": "Доступен на публичном сайте вашего курса"
     },
     "sidebar": {
       "back_to_course": "Вернуться к курсу",
@@ -1841,6 +1948,26 @@
       "blocker_final_misconfigured": "Для сертификационного упражнения «{exercisionTitle}» не настроены баллы; попросите инструктора это исправить.",
       "email_message_label": "Сообщение электронной почты",
       "email_message_placeholder": "например Мы гордимся вашим прогрессом — продолжайте учиться!"
+    },
+    "creator": {
+      "heading": "Какой курс вы хотите создать?",
+      "placeholder": "Попросите ClassroomIO создать для вас курс...",
+      "type": {
+        "self_paced": "Самостоятельный темп",
+        "live_class": "Живой урок"
+      },
+      "level": {
+        "beginner": "Новичок",
+        "intermediate": "Средний",
+        "advanced": "Расширенный"
+      },
+      "drafting": {
+        "heading": "Продумываем идею вашего курса",
+        "subtext": "Мы превратим ваше приглашение в название курса и рабочую область.",
+        "step_reading": "Читаю вашу подсказку",
+        "step_naming": "Название вашего курса",
+        "step_building": "Создание своего рабочего пространства"
+      }
     }
   },
   "courses": {
@@ -1881,6 +2008,8 @@
       "unpublished": "Неопубликовано",
       "continue_course": "Продолжить",
       "learn_more": "Узнать больше",
+      "public_badge": "Публичный",
+      "actions_menu_aria": "Действия с курсом",
       "tags_overflow_aria": "Ещё {count} тегов",
       "list_view": {
         "title": "Название",
@@ -1897,7 +2026,8 @@
         "invite": "Пригласить",
         "delete": "Удалить",
         "open": "Открыть",
-        "open_course_site": "Открытый сайт курса"
+        "open_public_course": "Открыть публичный курс",
+        "copy_course_url": "Копировать URL курса"
       },
       "due_date": "Срок погашения",
       "valid_until": "Действительно до"
@@ -2599,7 +2729,8 @@
       "token_auth_tab": "Токен аутентификации",
       "customize_lms_tab": "Настроить систему управления обучением",
       "domains_tab": "Домены",
-      "teams_tab": "Команды"
+      "teams_tab": "Команды",
+      "ai_credits_tab": "Кредиты ИИ"
     },
     "subheadings": {
       "view_site": "Посмотреть сайт"
@@ -2730,6 +2861,45 @@
     },
     "teams": {
       "page_subtitle": "Invite teammates and control who helps run this organization."
+    },
+    "ai_credits": {
+      "sub_title": "кредиты ИИ",
+      "page_subtitle": "Отслеживайте использование ИИ-помощника, потребление командой и покупайте пакеты токенов.",
+      "cost_note": "Использование кредита взвешивается по стоимости модели. Gemini 2.5 Flash и GPT-5.4 Mini считаются за 1 кредитную единицу за токен. Claude Sonnet 4.6 считается 36× на токен, что отражает более высокую стоимость API.",
+      "buy_tokens": {
+        "title": "Купить больше жетонов",
+        "description": "Каждый пакет добавляет 5 000 000 кредитов за 5 долларов США. Выберите, сколько упаковок вам нужно.",
+        "quantity_hint": "пакеты",
+        "preview": "Пакет(ы) {quantity} · жетоны {tokens} · ${доллары}",
+        "buy_button": "Купить за ${долларов}"
+      },
+      "leaderboard": {
+        "title": "Использование команды",
+        "this_month": "Текущий месяц",
+        "user": "Пользователь",
+        "favorite_model": "Любимая модель",
+        "tokens": "Токены",
+        "empty": "Никто из вашей команды в этом месяце не пользовался ИИ-помощником."
+      },
+      "chart": {
+        "heading": "Использование",
+        "subheading": "Ежедневное потребление токенов в этом месяце.",
+        "tokens": "Токены",
+        "total_tokens": "Всего токенов",
+        "total_requests": "Всего запросов",
+        "empty": "В этом месяце использования еще не зафиксировано."
+      },
+      "purchased": {
+        "title": "Приобретенное использование",
+        "subtitle": "Дополнительные жетоны, которые вы купили, переносятся до тех пор, пока не будут использованы.",
+        "lifetime": "Токенов: {tokens} куплено · потрачено ${dollars}",
+        "buy_more": "Купить больше"
+      },
+      "included": {
+        "title": "Ваше включенное использование",
+        "subtitle": "Ежемесячные токены включены в ваш план.",
+        "resets_on": "Сбрасывает {дата}"
+      }
     }
   },
   "profileMenu": {
@@ -2839,7 +3009,9 @@
     "self_paced_label": "Самостоятельный темп",
     "self_paced_subtitle": "Лучше всего подходит для курсов, где студенты могут брать уроки в удобном для них темпе.",
     "compliance_label": "Соответствие",
-    "compliance_subtitle": "Регулярное обучение с повторной сдачей, напоминаниями и отслеживанием продлений"
+    "compliance_subtitle": "Регулярное обучение с повторной сдачей, напоминаниями и отслеживанием продлений",
+    "public_label": "Общественный",
+    "public_subtitle": "Бесплатные страницы курсов без регистрации, которыми вы можете поделиться публично — отлично подходит для привлечения потенциальных клиентов."
   },
   "delete_modal": {
     "label": "Удалить",
@@ -3224,7 +3396,8 @@
     "input_placeholder": "Спросите ИИ-помощника...",
     "attach_document": "Прикрепите документ (PDF, DOCX, PPTX)",
     "upgrade_to_upload": "Обновите, чтобы загружать документы",
-    "tokens_exhausted": "Достигнут месячный лимит токенов AI. Купите больше кредитов в «Настройки» > «Оплата» или дождитесь сброса.",
+    "tokens_exhausted": "Достигнут месячный лимит токенов AI.",
+    "tokens_exhausted_buy_more": "Купить ещё",
     "chat_history": "История чата",
     "no_conversations": "Пока нет разговоров",
     "untitled": "Без названия",
@@ -3237,7 +3410,8 @@
     "mention_exercise": "Упражнение",
     "mention_section": "Раздел",
     "mention_no_results": "Нет подходящего контента",
-    "uploading_document": "Загрузка документа..."
+    "uploading_document": "Загрузка документа...",
+    "agent_running_warning": "Изменения появятся в курсе, как только агент завершит работу. Не перезагружайте страницу."
   },
   "widgets": {
     "heading": "Виджеты",
diff --git a/apps/dashboard/src/lib/utils/translations/vi.json b/apps/dashboard/src/lib/utils/translations/vi.json
index 8417e921..a561e381 100644
--- a/apps/dashboard/src/lib/utils/translations/vi.json
+++ b/apps/dashboard/src/lib/utils/translations/vi.json
@@ -391,6 +391,14 @@
         "post_created": "Bài viết được tạo thành công",
         "post_updated": "Đã cập nhật bài đăng thành công"
       }
+    },
+    "ai_credits": {
+      "purchase_success": "Gói mã thông báo được thêm vào số dư của bạn.",
+      "checkout_failed": "Không thể bắt đầu thanh toán. Vui lòng thử lại."
+    },
+    "public_course": {
+      "url_copied": "Đã sao chép URL khóa học",
+      "url_copy_failed": "Không thể sao chép URL"
     }
   },
   "explore": {
@@ -656,7 +664,30 @@
           "popover_title": "Chọn thẻ",
           "empty_groups": "Chưa có thẻ nào"
         },
-        "compliance": "Tuân thủ"
+        "compliance": "Tuân thủ",
+        "public": "công cộng",
+        "convert_to_public_blocked": "Khóa học này có các câu hỏi không thể tự động chấm điểm nên chưa thể công khai.",
+        "fix_blocking_questions": "Sửa câu hỏi chặn",
+        "slug": {
+          "label": "sên URL",
+          "description": "Đoạn cuối cùng của URL công khai của mục này. Chỉ có chữ cái, số và dấu gạch ngang.",
+          "public_only": "Slug chỉ có thể chỉnh sửa được trên các khóa học Công khai.",
+          "in_use": "Slug đó đã được sử dụng bởi một mục khác trong khóa học này."
+        },
+        "callout": {
+          "legend": "Chú thích khóa học công khai",
+          "description": "Hiển thị ở cuối mỗi bài học và thay cho các đồ vật bị khóa. Sử dụng nó để thu hút người học đến trang web của bạn hoặc một khóa học trả phí.",
+          "title_label": "Tiêu đề",
+          "title_placeholder": "Bạn muốn đi sâu hơn về điều này?",
+          "description_label": "Mô tả",
+          "description_placeholder": "Tham gia nhóm đầy đủ để hoàn thành một dự án cấp sản xuất trong 4 tuần.",
+          "button_label": "Nhãn nút",
+          "button_label_placeholder": "Đọc thêm trên trang web của tôi",
+          "button_url_label": "URL nút",
+          "button_url_placeholder": "https://example.com",
+          "clear": "Xóa chú thích",
+          "public_only": "Chú thích chỉ xuất hiện trên các khóa học Công khai."
+        }
       },
       "analytics": {
         "title": "Phân tích"
@@ -1167,7 +1198,10 @@
               "attempt_counter": "Hãy thử {current} trong tổng số {total}",
               "previous_try": "Lần thử trước",
               "next_try": "Lần thử tiếp theo",
-              "try_again": "Thử lại"
+              "try_again": "Thử lại",
+              "back": "Quay lại",
+              "begin_section": "Phần bắt đầu",
+              "complete_section": "Hoàn thành phần"
             },
             "edit_mode": {
               "delete_modal": "Xóa bài tập",
@@ -1193,7 +1227,8 @@
                 "hotspot": "Điểm phát sóng",
                 "link": "Liên kết",
                 "word_bank": "Ngân hàng từ",
-                "star": "Xếp hạng sao"
+                "star": "Xếp hạng sao",
+                "video_recording": "Quay video"
               },
               "select_type": "Chọn loại",
               "question_type_auto_gradable": "Auto",
@@ -1204,7 +1239,9 @@
               "title": "Xóa câu hỏi",
               "sure": "Bạn có chắc chắn muốn xóa câu hỏi này",
               "no": "Không, làm ơn đừng",
-              "yes": "Có, xóa"
+              "yes": "Có, xóa",
+              "section_title": "Xóa phần",
+              "section_sure": "Phần này sẽ bị xóa. Các câu hỏi của nó sẽ được chuyển đến phần gần nhất."
             },
             "description": {
               "title": "Tiêu đề",
@@ -1464,12 +1501,76 @@
                   "correct_value_placeholder": "ví dụ: 3",
                   "max_stars_placeholder": "ví dụ: 5"
                 }
+              },
+              "video_recording": {
+                "submission": {
+                  "no_video": "Không có video nào được gửi.",
+                  "unavailable": "Video không có sẵn.",
+                  "duration": "Thời lượng",
+                  "file_size": "Kích thước tệp",
+                  "recorded_at": "Đã ghi lại",
+                  "uploaded_at": "Đã tải lên",
+                  "retake_count": "Thi lại"
+                },
+                "preview": {
+                  "max_duration_label": "Thời lượng tối đa",
+                  "manual_grading": "Người học ghi lại một đoạn video ngắn phản hồi. Yêu cầu phân loại thủ công."
+                },
+                "take": {
+                  "unsupported": "Quay video không được hỗ trợ trong trình duyệt này.",
+                  "permission_prompt": "Cho phép truy cập vào máy ảnh và micrô để ghi lại câu trả lời của bạn.",
+                  "permission_denied": "Quyền truy cập vào máy ảnh hoặc micrô đã bị chặn. Kiểm tra quyền của trình duyệt.",
+                  "start_camera": "Thiết lập máy ảnh",
+                  "camera_label": "Máy ảnh",
+                  "camera_placeholder": "Chọn máy ảnh",
+                  "play_preview": "Phát bản xem trước bản ghi",
+                  "pause_preview": "Tạm dừng xem trước bản ghi",
+                  "start_recording": "Bắt đầu ghi",
+                  "stop_recording": "Dừng ghi",
+                  "elapsed": "Đã qua",
+                  "remaining": "Còn lại",
+                  "max_duration": "Tối đa",
+                  "too_short": "Ghi ít nhất 1 giây.",
+                  "use_recording": "Sử dụng ghi âm",
+                  "retake": "Thi lại",
+                  "delete": "Xóa bản ghi",
+                  "retry_upload": "Thử tải lên lại",
+                  "uploading": "Đang tải bản ghi lên...",
+                  "uploaded": "Đã tải lên bản ghi",
+                  "upload_failed": "Tải lên không thành công. Hãy thử lại.",
+                  "replaces_previous": "Một câu trả lời mới được chấp nhận sẽ thay thế câu trả lời trước đó sau khi tải lên."
+                },
+                "edit": {
+                  "max_duration_label": "Thời lượng tối đa",
+                  "max_duration_helper": "Học sinh ghi bài trên trình duyệt và có thể thi lại trước khi nộp. Tối đa là 2 phút.",
+                  "max_duration_placeholder": "60",
+                  "manual_grading": "Yêu cầu phân loại thủ công"
+                }
               }
             },
             "settings": "Cài đặt",
             "settings_allow_multiple": "Cho phép thử nhiều lần",
             "settings_allow_multiple_helper": "Học sinh có thể gửi nhiều lần và xem lại các lần thử trước đây trên màn hình kết quả.",
-            "settings_save": "Lưu cài đặt"
+            "settings_save": "Lưu cài đặt",
+            "add": "Thêm",
+            "add_section": "Thêm phần",
+            "reorder_done": "Sắp xếp lại xong",
+            "section": {
+              "fallback_title": "Phần",
+              "questions": "câu hỏi",
+              "short_questions": "q",
+              "required": "bắt buộc",
+              "add_question": "Thêm câu hỏi",
+              "delete": "Xóa phần",
+              "move_up": "Di chuyển phần lên",
+              "move_down": "Di chuyển phần xuống",
+              "color": "Màu phần",
+              "description_placeholder": "Mô tả phần này",
+              "after_section": "Phần sau",
+              "continue": "Tiếp tục đến phần tiếp theo",
+              "go_to_section": "Đi đến phần",
+              "submit": "Gửi bài tập"
+            }
           },
           "new_exercise_modal": {
             "heading": "Bài tập mới",
@@ -1657,7 +1758,12 @@
         "content_locked_description": "Người hướng dẫn của bạn chưa mở khóa nội dung này. Hoàn thành nội dung trước đó hoặc kiểm tra lại sau.",
         "saving": "Đang lưu…",
         "saved": "Đã lưu",
-        "draft_recovery": "Đã tìm thấy một bản nháp chưa được lưu cho bài học này. Bạn có muốn khôi phục nó không?"
+        "draft_recovery": "Đã tìm thấy một bản nháp chưa được lưu cho bài học này. Bạn có muốn khôi phục nó không?",
+        "stats": {
+          "sections": "Phần",
+          "lessons": "Bài học",
+          "exercises": "Bài tập"
+        }
       },
       "news_feed": {
         "heading": "Nguồn cấp tin tức",
@@ -1782,7 +1888,8 @@
     },
     "header": {
       "preview": "Preview course",
-      "preview_missing_slug": "Generate and save a course slug before previewing."
+      "preview_missing_slug": "Generate and save a course slug before previewing.",
+      "public_course_helper": "Hiển thị trên trang khóa học công khai của bạn"
     },
     "sidebar": {
       "back_to_course": "Quay lại khóa học",
@@ -1841,6 +1948,26 @@
       "blocker_final_misconfigured": "Bài tập chứng nhận \"{exerciseTitle}\" không có cấu hình điểm nào; nhờ người hướng dẫn khắc phục.",
       "email_message_label": "Tin nhắn email",
       "email_message_placeholder": "ví dụ: Chúng tôi tự hào về sự tiến bộ của bạn - hãy tiếp tục học hỏi!"
+    },
+    "creator": {
+      "heading": "Bạn muốn tạo khóa học nào?",
+      "placeholder": "Hãy yêu cầu ClassroomIO tạo một khóa học cho bạn...",
+      "type": {
+        "self_paced": "tự nhịp độ",
+        "live_class": "Lớp học trực tiếp"
+      },
+      "level": {
+        "beginner": "Người mới bắt đầu",
+        "intermediate": "Trung cấp",
+        "advanced": "Nâng cao"
+      },
+      "drafting": {
+        "heading": "Soạn thảo ý tưởng khóa học của bạn",
+        "subtext": "Chúng tôi đang biến lời nhắc của bạn thành tiêu đề khóa học và không gian làm việc.",
+        "step_reading": "Đọc lời nhắc của bạn",
+        "step_naming": "Đặt tên cho khóa học của bạn",
+        "step_building": "Tạo không gian làm việc của bạn"
+      }
     }
   },
   "courses": {
@@ -1881,6 +2008,8 @@
       "unpublished": "Chưa được xuất bản",
       "continue_course": "Tiếp tục",
       "learn_more": "Tìm hiểu thêm",
+      "public_badge": "Công khai",
+      "actions_menu_aria": "Thao tác khóa học",
       "tags_overflow_aria": "Thêm {count} thẻ",
       "list_view": {
         "title": "Tiêu đề",
@@ -1897,7 +2026,8 @@
         "invite": "Mời",
         "delete": "Xóa",
         "open": "Mở",
-        "open_course_site": "Mở trang web khóa học"
+        "open_public_course": "Mở khóa học công khai",
+        "copy_course_url": "Sao chép URL khóa học"
       },
       "due_date": "Đến hạn",
       "valid_until": "Có hiệu lực cho đến khi"
@@ -2599,7 +2729,8 @@
       "token_auth_tab": "Xác thực mã thông báo",
       "customize_lms_tab": "Tùy chỉnh LMS",
       "domains_tab": "Tên miền",
-      "teams_tab": "Đội"
+      "teams_tab": "Đội",
+      "ai_credits_tab": "Tín dụng AI"
     },
     "subheadings": {
       "view_site": "Xem trang web"
@@ -2730,6 +2861,45 @@
     },
     "teams": {
       "page_subtitle": "Invite teammates and control who helps run this organization."
+    },
+    "ai_credits": {
+      "sub_title": "tín dụng AI",
+      "page_subtitle": "Theo dõi việc sử dụng trợ lý AI, mức tiêu thụ của nhóm và mua gói mã thông báo.",
+      "cost_note": "Việc sử dụng tín dụng được tính theo chi phí mô hình. Gemini 2.5 Flash và GPT-5.4 Mini được tính là 1 đơn vị tín dụng cho mỗi mã thông báo. Claude Sonnet 4.6 được tính là 36× mỗi mã thông báo, phản ánh chi phí API cao hơn.",
+      "buy_tokens": {
+        "title": "Mua thêm token",
+        "description": "Mỗi gói bổ sung thêm 5.000.000 tín dụng với giá 5 USD. Chọn số lượng gói bạn cần.",
+        "quantity_hint": "gói",
+        "preview": "{quantity} gói · {tokens} token · ${dollars}",
+        "buy_button": "Mua với giá ${dollars}"
+      },
+      "leaderboard": {
+        "title": "Cách sử dụng nhóm",
+        "this_month": "Tháng hiện tại",
+        "user": "người dùng",
+        "favorite_model": "Người mẫu yêu thích",
+        "tokens": "Mã thông báo",
+        "empty": "Không ai trong nhóm của bạn sử dụng trợ lý AI trong tháng này."
+      },
+      "chart": {
+        "heading": "Cách sử dụng",
+        "subheading": "Mức tiêu thụ token hàng ngày trong tháng này.",
+        "tokens": "Mã thông báo",
+        "total_tokens": "Tổng số token",
+        "total_requests": "Tổng số yêu cầu",
+        "empty": "Chưa có mức sử dụng nào được ghi lại trong tháng này."
+      },
+      "purchased": {
+        "title": "Mức sử dụng đã mua",
+        "subtitle": "Các token bổ sung bạn đã mua sẽ được sử dụng tiếp cho đến khi sử dụng.",
+        "lifetime": "Đã mua {tokens} token · chi tiêu ${dollars}",
+        "buy_more": "Mua thêm"
+      },
+      "included": {
+        "title": "Mức sử dụng đi kèm của bạn",
+        "subtitle": "Mã thông báo hàng tháng đi kèm với gói của bạn.",
+        "resets_on": "Đặt lại {ngày}"
+      }
     }
   },
   "profileMenu": {
@@ -2839,7 +3009,9 @@
     "self_paced_label": "tự nhịp độ",
     "self_paced_subtitle": "Tốt nhất cho các khóa học mà sinh viên có thể học theo tốc độ của riêng mình",
     "compliance_label": "Tuân thủ",
-    "compliance_subtitle": "Đào tạo định kỳ với tính năng thi lại, nhắc nhở và theo dõi gia hạn"
+    "compliance_subtitle": "Đào tạo định kỳ với tính năng thi lại, nhắc nhở và theo dõi gia hạn",
+    "public_label": "công cộng",
+    "public_subtitle": "Các trang khóa học miễn phí, không cần đăng ký mà bạn có thể chia sẻ công khai - rất tốt cho thế hệ khách hàng tiềm năng"
   },
   "delete_modal": {
     "label": "Xóa",
@@ -3224,7 +3396,8 @@
     "input_placeholder": "Hãy hỏi trợ lý AI...",
     "attach_document": "Đính kèm tài liệu (PDF, DOCX, PPTX)",
     "upgrade_to_upload": "Nâng cấp để tải lên tài liệu",
-    "tokens_exhausted": "Đã đạt đến giới hạn mã thông báo AI hàng tháng. Mua thêm tín dụng trong Cài đặt > Thanh toán hoặc đợi đặt lại.",
+    "tokens_exhausted": "Đã đạt đến giới hạn mã thông báo AI hàng tháng.",
+    "tokens_exhausted_buy_more": "Mua thêm",
     "chat_history": "Lịch sử trò chuyện",
     "no_conversations": "Chưa có cuộc trò chuyện nào",
     "untitled": "Không có tiêu đề",
@@ -3237,7 +3410,8 @@
     "mention_exercise": "tập thể dục",
     "mention_section": "Phần",
     "mention_no_results": "Không có nội dung phù hợp",
-    "uploading_document": "Đang tải tài liệu lên..."
+    "uploading_document": "Đang tải tài liệu lên...",
+    "agent_running_warning": "Những thay đổi sẽ xuất hiện trong khóa học sau khi tác nhân hoàn tất. Đừng tải lại trang."
   },
   "widgets": {
     "heading": "Widget",
diff --git a/apps/dashboard/src/lib/utils/types/org.ts b/apps/dashboard/src/lib/utils/types/org.ts
index 9b82c41e..59345e81 100644
--- a/apps/dashboard/src/lib/utils/types/org.ts
+++ b/apps/dashboard/src/lib/utils/types/org.ts
@@ -35,6 +35,7 @@ export interface OrgLandingPageHero {
   primaryAction: {
     label: string;
     href: string;
+    disabled?: boolean;
   };
   secondaryAction?: {
     label: string;
@@ -71,6 +72,15 @@ export interface OrgAudience {
   date_joined: string;
 }
 
+/** Vercel project domain GET (subset used by domain helpers). */
+export interface DomainResponse {
+  name?: string;
+  verified?: boolean;
+  apexName?: string;
+  projectId?: string;
+  error?: { code: string; message: string };
+}
+
 export interface DomainConfigResponse {
   /** How we see the domain's configuration. - `CNAME`: Domain has a CNAME pointing to Vercel. - `A`: Domain's A record is resolving to Vercel. - `http`: Domain is resolving to Vercel but may be behind a Proxy. - `null`: Domain is not resolving to Vercel. */
   configuredBy?: ('CNAME' | 'A' | 'http') | null;
diff --git a/apps/dashboard/src/lib/utils/types/polar.ts b/apps/dashboard/src/lib/utils/types/polar.ts
index d1a23737..0ffb53df 100644
--- a/apps/dashboard/src/lib/utils/types/polar.ts
+++ b/apps/dashboard/src/lib/utils/types/polar.ts
@@ -78,7 +78,7 @@ interface Product {
   attachedCustomFields: any[];
 }
 
-interface SubscriptionData {
+export interface SubscriptionData {
   createdAt: string;
   modifiedAt: string | null;
   id: string;
@@ -104,6 +104,7 @@ interface SubscriptionData {
     orgId: string;
     orgSlug: string;
     triggeredBy: string;
+    kind?: string;
   };
   customFieldData: Record<string, any>;
   customer: Customer;
@@ -114,7 +115,34 @@ interface SubscriptionData {
   discount: any | null;
 }
 
-export interface PolarWebhookPayload {
-  type: string;
+export interface PolarOrderWebhookData {
+  id: string;
+  amount?: number;
+  totalAmount?: number;
+  currency?: string;
+  metadata?: Record<string, string>;
+  items?: Array<{ quantity?: number; amount?: number }>;
+  [key: string]: unknown;
+}
+
+export interface PolarOrderWebhookPayload {
+  type: 'order.paid' | 'order.created' | 'order.refunded';
+  data: PolarOrderWebhookData;
+}
+
+export interface PolarSubscriptionWebhookPayload {
+  type:
+    | 'checkout.created'
+    | 'checkout.updated'
+    | 'subscription.created'
+    | 'subscription.updated'
+    | 'subscription.active'
+    | 'subscription.revoked'
+    | 'subscription.canceled';
   data: SubscriptionData;
 }
+
+export type PolarWebhookPayload =
+  | PolarSubscriptionWebhookPayload
+  | PolarOrderWebhookPayload
+  | { type: string; data: Record<string, unknown> };
diff --git a/apps/dashboard/src/routes/(app)/courses/[id]/+layout.svelte b/apps/dashboard/src/routes/(app)/courses/[id]/+layout.svelte
index 87e98eb5..f053d170 100644
--- a/apps/dashboard/src/routes/(app)/courses/[id]/+layout.svelte
+++ b/apps/dashboard/src/routes/(app)/courses/[id]/+layout.svelte
@@ -14,6 +14,8 @@
   import ContentCreateModal from '$features/course/components/content/content-create-modal.svelte';
   import CourseCompletionModal from '$features/course/components/ceritficate/course-completion-modal.svelte';
   import { AiCourseChat } from '$features/ai-assistant';
+  import { initialChatPrompt, openAiAssistant } from '$features/ai-assistant/utils/store';
+  import { get } from 'svelte/store';
   import { profile } from '$lib/utils/store/user';
   import { isOrgAdmin } from '$lib/utils/store/org';
   import { t } from '$lib/utils/functions/translations';
@@ -98,6 +100,10 @@
     }
 
     hasLoadedSidebarWidth = true;
+
+    if (get(initialChatPrompt)) {
+      openAiAssistant();
+    }
   });
 
   $effect(() => {
@@ -180,5 +186,5 @@
     {/if}
   </Sidebar.Inset>
 
-  <AiCourseChat />
+  <AiCourseChat courseId={data.courseId} />
 </Sidebar.Provider>
diff --git a/apps/dashboard/src/routes/(app)/courses/[id]/exercises/[exerciseId]/+page.svelte b/apps/dashboard/src/routes/(app)/courses/[id]/exercises/[exerciseId]/+page.svelte
index 92e18e8c..adfcfab6 100644
--- a/apps/dashboard/src/routes/(app)/courses/[id]/exercises/[exerciseId]/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/courses/[id]/exercises/[exerciseId]/+page.svelte
@@ -31,7 +31,7 @@
   });
 </script>
 
-<Page.Root class="mx-auto flex w-[90%] px-4 md:max-w-2xl lg:max-w-3xl">
+<Page.Root class="mx-auto flex w-full px-3 sm:w-[90%] sm:px-4 lg:max-w-5xl">
   {#if isLockedForStudent}
     <Empty
       title={$t('course.navItem.lessons.content_locked_title')}
diff --git a/apps/dashboard/src/routes/(app)/org/[slug]/+layout.server.ts b/apps/dashboard/src/routes/(app)/org/[slug]/+layout.server.ts
index e1334ce1..377a4463 100644
--- a/apps/dashboard/src/routes/(app)/org/[slug]/+layout.server.ts
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/+layout.server.ts
@@ -30,7 +30,7 @@ export const load = async ({ params, url, cookies }) => {
   if (!orgId) {
     const apiKeyHeaders = getApiKeyHeaders();
     const org = await getOrgBySiteName(siteName, apiKeyHeaders);
-    console.log('org', org);
+
     if (org?.id) {
       orgId = org.id;
 
diff --git a/apps/dashboard/src/routes/(app)/org/[slug]/+page.server.ts b/apps/dashboard/src/routes/(app)/org/[slug]/+page.server.ts
index b6a613de..09276fd8 100644
--- a/apps/dashboard/src/routes/(app)/org/[slug]/+page.server.ts
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/+page.server.ts
@@ -1,62 +1,5 @@
-import type { DashStatsSuccess, LoginActivityData, LoginActivitySuccess } from '$features/org/utils/types';
-import { classroomio, getApiHeaders } from '$lib/utils/services/api';
-import { type ServerApiResult, safeServerApi } from '$lib/utils/services/api/server';
-
-// TODO - Replace with actual cache
-const cache: Record<string, DashStatsSuccess['data'] | null> = {};
-
-function loginActivityDataFromSettled(
-  result: PromiseSettledResult<ServerApiResult<LoginActivitySuccess>>
-): LoginActivityData {
-  if (result.status === 'rejected') {
-    return [];
-  }
-
-  if (!result.value.ok) {
-    return [];
-  }
-
-  return result.value.body.data;
-}
-
-export const load = async ({ params, parent, cookies }) => {
-  const { orgId } = await parent();
-  const siteName = params.slug;
-
-  if (!orgId) {
-    return {
-      orgName: siteName,
-      stats: null,
-      loginActivity: [] as LoginActivityData
-    };
-  }
-
-  if (orgId in cache) {
-    const loginActivityResult = await safeServerApi<LoginActivitySuccess>(() =>
-      classroomio.dash['login-activity'].$get({ query: { orgId } }, getApiHeaders(cookies, orgId))
-    );
-
-    return {
-      orgName: siteName,
-      stats: cache[orgId],
-      loginActivity: loginActivityResult.ok ? loginActivityResult.body.data : []
-    };
-  }
-
-  const [statsResult, loginActivityResult] = await Promise.allSettled([
-    safeServerApi<DashStatsSuccess>(() =>
-      classroomio.dash.stats.$get({ query: { siteName } }, getApiHeaders(cookies, orgId))
-    ),
-    safeServerApi<LoginActivitySuccess>(() =>
-      classroomio.dash['login-activity'].$get({ query: { orgId } }, getApiHeaders(cookies, orgId))
-    )
-  ]);
-
-  cache[orgId] = statsResult.status === 'fulfilled' && statsResult.value.ok ? statsResult.value.body.data : null;
-
+export const load = async ({ params }) => {
   return {
-    orgName: siteName,
-    stats: cache[orgId],
-    loginActivity: loginActivityDataFromSettled(loginActivityResult)
+    orgName: params.slug
   };
 };
diff --git a/apps/dashboard/src/routes/(app)/org/[slug]/+page.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/+page.svelte
index 5b175991..4f55c378 100644
--- a/apps/dashboard/src/routes/(app)/org/[slug]/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/+page.svelte
@@ -1,239 +1,198 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
   import { goto } from '$app/navigation';
-  import AwardIcon from '@lucide/svelte/icons/award';
-  import BookIcon from '@lucide/svelte/icons/book';
-  import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
-  import { Skeleton } from '@cio/ui/base/skeleton';
-  import UsersIcon from '@lucide/svelte/icons/users';
+  import { resolve } from '$app/paths';
+  import CheckCircleIcon from '@lucide/svelte/icons/circle-check';
+  import CircleIcon from '@lucide/svelte/icons/circle';
+  import LoaderCircleIcon from '@lucide/svelte/icons/loader-circle';
 
-  import { profile } from '$lib/utils/store/user';
   import { t } from '$lib/utils/functions/translations';
-  import { calDateDiff } from '$lib/utils/functions/date';
-  import { getGreeting } from '$lib/utils/functions/date';
-  import { currentOrgPath } from '$lib/utils/store/org';
+  import { CourseCreator } from '@cio/ui/custom/course-creator';
+  import { aiAssistantApi } from '$features/ai-assistant/api/ai-assistant.svelte';
+  import { courseApi } from '$features/course/api';
+  import { setInitialChatModel, setInitialChatPrompt } from '$features/ai-assistant/utils/store';
+  import { openUpgradeModal } from '$lib/utils/functions/org';
+  import { isFreePlan } from '$lib/utils/store/org';
+  import { AI_CHAT_MODEL_STORAGE_KEY } from '$features/ai-assistant/utils/constants';
+  import type { TCourseType } from '@cio/db/types';
+  import {
+    AGENT_MODELS,
+    DEFAULT_PICKER_MODEL_ID,
+    UI_PICKER_MODEL_IDS,
+    type AgentModelId
+  } from '@cio/utils/agent-models';
 
-  import { CreateCourseButton } from '$features/course/components';
-  import { UserAvatar } from '@cio/ui/custom/user-avatar';
-  import { Progress } from '@cio/ui/base/progress';
-  import { Button } from '@cio/ui/base/button';
-  import { WelcomeModal } from '$features/onboarding/components';
-  import { ActivityCard, VisitOrgSiteButton } from '$features/ui';
-  import LoginActivityChart from '$features/org/components/login-activity-chart.svelte';
-  import * as Page from '@cio/ui/base/page';
-  import { Empty } from '@cio/ui/custom/empty';
+  type CreatingStep = 'reading' | 'naming' | 'building';
 
-  const { data } = $props();
+  const steps: { key: CreatingStep; label: string }[] = [
+    { key: 'reading', label: t.get('course.creator.drafting.step_reading') },
+    { key: 'naming', label: t.get('course.creator.drafting.step_naming') },
+    { key: 'building', label: t.get('course.creator.drafting.step_building') }
+  ];
 
-  const stats = $derived(data.stats);
-  const loginActivity = $derived(data.loginActivity);
-  const recentCertifications = $derived(stats?.recentCertifications || []);
-  const numberOfCourses = $derived(stats?.numberOfCourses || 0);
-  const totalCertificates = $derived(stats?.totalCertificates || 0);
-  const totalStudents = $derived(stats?.totalStudents || 0);
-  const topCourses = $derived(stats?.topCourses || []);
+  let creatingState: 'idle' | 'creating' = $state('idle');
+  let creatingStep: CreatingStep = $state('reading');
+  let draftingPrompt = $state('');
+  let selectedModel: AgentModelId = $state(DEFAULT_PICKER_MODEL_ID);
+  const paidModelIds = UI_PICKER_MODEL_IDS.filter((id) => !AGENT_MODELS[id].isFree);
+
+  function isAgentModelId(value: unknown): value is AgentModelId {
+    return typeof value === 'string' && (UI_PICKER_MODEL_IDS as readonly string[]).includes(value);
+  }
+
+  function stepStatus(key: CreatingStep): 'done' | 'active' | 'pending' {
+    const order: CreatingStep[] = ['reading', 'naming', 'building'];
+    const current = order.indexOf(creatingStep);
+    const target = order.indexOf(key);
+
+    if (target < current) return 'done';
+    if (target === current) return 'active';
+
+    return 'pending';
+  }
+
+  function handleModelChange(model: string) {
+    if (!isAgentModelId(model)) return;
+
+    if ($isFreePlan && paidModelIds.includes(model)) {
+      openUpgradeModal();
+      return;
+    }
+
+    selectedModel = model;
+
+    try {
+      localStorage.setItem(AI_CHAT_MODEL_STORAGE_KEY, model);
+    } catch {
+      // localStorage unavailable
+    }
+  }
+
+  function handleLockedModelSelect() {
+    openUpgradeModal();
+  }
+
+  $effect(() => {
+    if (!$isFreePlan || !paidModelIds.includes(selectedModel)) {
+      return;
+    }
+
+    selectedModel = DEFAULT_PICKER_MODEL_ID;
+
+    try {
+      localStorage.setItem(AI_CHAT_MODEL_STORAGE_KEY, DEFAULT_PICKER_MODEL_ID);
+    } catch {
+      // localStorage unavailable
+    }
+  });
+
+  async function handleCreate({ prompt, level, model }: { prompt: string; level: string; model?: string }) {
+    if (isAgentModelId(model)) {
+      if ($isFreePlan && paidModelIds.includes(model)) {
+        openUpgradeModal();
+        return;
+      }
+
+      handleModelChange(model);
+    }
+
+    draftingPrompt = prompt;
+    creatingState = 'creating';
+    creatingStep = 'reading';
+
+    await new Promise((r) => setTimeout(r, 700));
+
+    creatingStep = 'naming';
+    const meta = await aiAssistantApi.generateCourseMeta(prompt);
+    const title = meta?.title ?? prompt.slice(0, 80);
+    const description = meta?.description ?? prompt.slice(0, 150);
+
+    creatingStep = 'building';
+    setInitialChatPrompt(`${prompt}\n\nCourse type: Self-paced. Level: ${level}.`);
+    setInitialChatModel(selectedModel);
+
+    await courseApi.create({ title, description, type: 'SELF_PACED' as TCourseType }, (courseId) => {
+      goto(resolve(`/courses/${courseId}`, {}));
+    });
+  }
+
+  onMount(() => {
+    try {
+      const storedModel = localStorage.getItem(AI_CHAT_MODEL_STORAGE_KEY);
+
+      if (isAgentModelId(storedModel)) {
+        if ($isFreePlan && paidModelIds.includes(storedModel)) {
+          selectedModel = DEFAULT_PICKER_MODEL_ID;
+          localStorage.setItem(AI_CHAT_MODEL_STORAGE_KEY, DEFAULT_PICKER_MODEL_ID);
+          return;
+        }
+
+        selectedModel = storedModel;
+      }
+    } catch {
+      // localStorage unavailable
+    }
+  });
 </script>
 
 <svelte:head>
-  <title>Dashboard - ClassroomIO</title>
+  <title>Home - ClassroomIO</title>
 </svelte:head>
 
-<WelcomeModal />
+{#if creatingState === 'creating'}
+  <div class="flex min-h-[80vh] flex-col items-center justify-center gap-6 px-4">
+    <div class="flex flex-col items-center gap-2 text-center">
+      <h1 class="text-2xl font-semibold">{$t('course.creator.drafting.heading')}</h1>
+      <p class="ui:text-muted-foreground text-sm">
+        {$t('course.creator.drafting.subtext')}
+      </p>
+    </div>
 
-<Page.Root class="w-full">
-  <Page.Header>
-    <Page.HeaderContent>
-      <Page.Title>
-        {$t(getGreeting())}
-        {$profile.fullname}!
-      </Page.Title>
-    </Page.HeaderContent>
-    <Page.Action>
-      <CreateCourseButton variant="outline" isResponsive />
+    <div class="ui:border w-full max-w-lg rounded-2xl p-5">
+      <p class="mb-5 text-sm text-neutral-300 italic">"{draftingPrompt}"</p>
 
-      <VisitOrgSiteButton />
-    </Page.Action>
-  </Page.Header>
-  <Page.Body>
-    {#snippet child()}
-      <div class="mb-10 flex flex-wrap items-start">
-        <div class="grid w-full grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
-          <ActivityCard
-            activity={{
-              icon: AwardIcon,
-              title: $t('dashboard.certificates_earned'),
-              percentage: totalCertificates ?? 0,
-              description: $t('dashboard.certificates_earned_description'),
-              hidePercentage: true
-            }}
-          />
-          <ActivityCard
-            activity={{
-              icon: BookIcon,
-              title: $t('dashboard.no_of_courses'),
-              percentage: numberOfCourses ?? 0,
-              description: $t('dashboard.no_courses_description'),
-              hidePercentage: true
-            }}
-          />
-          <ActivityCard
-            activity={{
-              icon: UsersIcon,
-              title: $t('dashboard.total_students'),
-              percentage: totalStudents ?? 0,
-              description: $t('dashboard.total_students_description'),
-              hidePercentage: true
-            }}
-          />
-        </div>
-      </div>
-
-      <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
-        <div class="bg-card flex min-h-[45vh] w-full flex-col rounded-xl border p-3 md:p-5 dark:text-white">
-          <div class="mb-4 flex items-center justify-between">
-            <h3 class="text-lg font-semibold tracking-tight">
-              {$t('dashboard.top_courses')}
-            </h3>
-          </div>
-
-          <div class="flex h-full flex-col">
-            {#if !stats}
-              <div class="space-y-3">
-                {#each Array(5) as _, i (i)}
-                  <Skeleton class="h-16 w-full rounded-lg" />
-                {/each}
-              </div>
-            {:else if topCourses.length === 0}
-              <Empty
-                title={$t('dashboard.create_first_course')}
-                description={$t('dashboard.create_first_course_description')}
-                icon={BookIcon}
-                class="h-full"
-              >
-                <CreateCourseButton variant="outline" />
-              </Empty>
+      <div class="flex flex-col gap-3">
+        {#each steps as step (step.key)}
+          {@const status = stepStatus(step.key)}
+          <div class="flex items-center gap-3">
+            {#if status === 'done'}
+              <CheckCircleIcon class="h-4 w-4 shrink-0 text-green-500" />
+            {:else if status === 'active'}
+              <LoaderCircleIcon class="h-4 w-4 shrink-0 animate-spin text-white" />
             {:else}
-              <ul class="ui:divide-border -mx-2 divide-y">
-                {#each topCourses as course, i (course.id)}
-                  {@const rank = i + 1}
-                  <li>
-                    <a
-                      href={`/courses/${course.id}`}
-                      class="group ui:hover:bg-muted/50 flex items-center gap-3 rounded-lg px-2 py-3 transition-colors md:gap-4"
-                    >
-                      <span
-                        class={[
-                          'flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-semibold tabular-nums',
-                          rank === 1 &&
-                            'ui:bg-amber-100 ui:text-amber-900 ui:dark:bg-amber-500/20 ui:dark:text-amber-200',
-                          rank === 2 &&
-                            'ui:bg-slate-100 ui:text-slate-700 ui:dark:bg-slate-500/20 ui:dark:text-slate-200',
-                          rank === 3 &&
-                            'ui:bg-orange-100 ui:text-orange-800 ui:dark:bg-orange-500/20 ui:dark:text-orange-200',
-                          rank > 3 && 'ui:bg-muted ui:text-muted-foreground'
-                        ]}
-                      >
-                        {rank}
-                      </span>
-
-                      <div class="min-w-0 flex-1">
-                        <p class="line-clamp-1 text-sm leading-snug font-medium group-hover:underline">
-                          {course.title}
-                        </p>
-                        <div class="ui:text-muted-foreground mt-1 flex items-center gap-1 text-xs">
-                          <UsersIcon class="h-3 w-3" />
-                          <span class="tabular-nums">{course.enrollments}</span>
-                          <span>
-                            {$t(course.enrollments === 1 ? 'dashboard.student' : 'dashboard.students')}
-                          </span>
-                        </div>
-                      </div>
-
-                      <div class="hidden w-48 shrink-0 grid-cols-2 gap-3 sm:grid">
-                        <div class="space-y-1">
-                          <div class="flex items-baseline justify-between gap-1">
-                            <span class="ui:text-muted-foreground text-[10px] tracking-wide uppercase">
-                              {$t('dashboard.completion')}
-                            </span>
-                            <span class="text-xs font-semibold tabular-nums">{course.completion}%</span>
-                          </div>
-                          <Progress value={course.completion} class="ui:h-1.5" />
-                        </div>
-                        <div class="space-y-1">
-                          <div class="flex items-baseline justify-between gap-1">
-                            <span class="ui:text-muted-foreground text-[10px] tracking-wide uppercase">
-                              {$t('dashboard.certification_rate')}
-                            </span>
-                            <span class="text-xs font-semibold tabular-nums">{course.certification}%</span>
-                          </div>
-                          <Progress value={course.certification} class="ui:h-1.5" />
-                        </div>
-                      </div>
-
-                      <ChevronRightIcon
-                        class="ui:text-muted-foreground h-4 w-4 shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
-                      />
-                    </a>
-                  </li>
-                {/each}
-              </ul>
+              <CircleIcon class="h-4 w-4 shrink-0 text-neutral-600" />
             {/if}
+            <span
+              class="text-sm {status === 'done'
+                ? 'text-neutral-400 line-through'
+                : status === 'active'
+                  ? 'ui:text-foreground'
+                  : 'ui:text-muted-foreground'}"
+            >
+              {step.label}
+            </span>
           </div>
-        </div>
-
-        <div class="flex min-h-[45vh] w-full flex-col rounded-md border p-3 md:p-5 dark:text-white">
-          <h3 class="mb-4 text-lg">
-            {$t('dashboard.recent_certifications')}
-          </h3>
-
-          <div class="h-full space-y-6">
-            {#if !stats}
-              {#each Array(5) as _, i (i)}
-                <Skeleton class="h-10 w-full rounded-md" />
-              {/each}
-            {:else}
-              {#each recentCertifications as certification (`${certification.id}-${certification.courseId}-${certification.date}`)}
-                <div class="flex items-center justify-between gap-2">
-                  <div class="flex items-center gap-2">
-                    <UserAvatar src={certification.avatarUrl} alt={certification.name ?? 'User'} class="h-6 w-6" />
-
-                    <div class="min-h-[45px] space-y-1">
-                      <p class="text-sm leading-none capitalize">{certification.name}</p>
-                      <p class="ui:text-muted-foreground text-sm">
-                        <span class="italic">
-                          {calDateDiff(certification.date)}
-                        </span>
-                      </p>
-                    </div>
-                  </div>
-
-                  <div class="w-2/4">
-                    <a class="hover:underline" href={`/courses/${certification.courseId}`}>
-                      <p class="line-clamp-2 pb-[0.1rem] text-sm leading-none">
-                        {certification.course}
-                      </p>
-                    </a>
-                  </div>
-                </div>
-              {:else}
-                <Empty
-                  title={$t('dashboard.no_certifications_yet')}
-                  description={$t('dashboard.no_certifications_yet_description')}
-                  icon={AwardIcon}
-                  class="h-full"
-                >
-                  <Button variant="outline" onclick={() => goto(`${$currentOrgPath}/courses`)}>
-                    {$t('dashboard.view_courses')}
-                  </Button>
-                </Empty>
-              {/each}
-            {/if}
-          </div>
-        </div>
+        {/each}
       </div>
-
-      <div class="mt-4">
-        <LoginActivityChart data={loginActivity} />
-      </div>
-    {/snippet}
-  </Page.Body>
-</Page.Root>
+    </div>
+  </div>
+{:else}
+  <div class="flex min-h-[80vh] items-center justify-center px-4 py-12">
+    <div class="w-full max-w-3xl">
+      <CourseCreator
+        heading={$t('course.creator.heading')}
+        placeholder={$t('course.creator.placeholder')}
+        model={selectedModel}
+        levelOptions={[
+          { value: 'beginner', label: $t('course.creator.level.beginner') },
+          { value: 'intermediate', label: $t('course.creator.level.intermediate') },
+          { value: 'advanced', label: $t('course.creator.level.advanced') }
+        ]}
+        lockedModelIds={$isFreePlan ? paidModelIds : []}
+        onModelChange={handleModelChange}
+        onLockedModelSelect={handleLockedModelSelect}
+        onsubmit={handleCreate}
+      />
+    </div>
+  </div>
+{/if}
diff --git a/apps/dashboard/src/routes/(app)/org/[slug]/dash/+page.server.ts b/apps/dashboard/src/routes/(app)/org/[slug]/dash/+page.server.ts
new file mode 100644
index 00000000..b6a613de
--- /dev/null
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/dash/+page.server.ts
@@ -0,0 +1,62 @@
+import type { DashStatsSuccess, LoginActivityData, LoginActivitySuccess } from '$features/org/utils/types';
+import { classroomio, getApiHeaders } from '$lib/utils/services/api';
+import { type ServerApiResult, safeServerApi } from '$lib/utils/services/api/server';
+
+// TODO - Replace with actual cache
+const cache: Record<string, DashStatsSuccess['data'] | null> = {};
+
+function loginActivityDataFromSettled(
+  result: PromiseSettledResult<ServerApiResult<LoginActivitySuccess>>
+): LoginActivityData {
+  if (result.status === 'rejected') {
+    return [];
+  }
+
+  if (!result.value.ok) {
+    return [];
+  }
+
+  return result.value.body.data;
+}
+
+export const load = async ({ params, parent, cookies }) => {
+  const { orgId } = await parent();
+  const siteName = params.slug;
+
+  if (!orgId) {
+    return {
+      orgName: siteName,
+      stats: null,
+      loginActivity: [] as LoginActivityData
+    };
+  }
+
+  if (orgId in cache) {
+    const loginActivityResult = await safeServerApi<LoginActivitySuccess>(() =>
+      classroomio.dash['login-activity'].$get({ query: { orgId } }, getApiHeaders(cookies, orgId))
+    );
+
+    return {
+      orgName: siteName,
+      stats: cache[orgId],
+      loginActivity: loginActivityResult.ok ? loginActivityResult.body.data : []
+    };
+  }
+
+  const [statsResult, loginActivityResult] = await Promise.allSettled([
+    safeServerApi<DashStatsSuccess>(() =>
+      classroomio.dash.stats.$get({ query: { siteName } }, getApiHeaders(cookies, orgId))
+    ),
+    safeServerApi<LoginActivitySuccess>(() =>
+      classroomio.dash['login-activity'].$get({ query: { orgId } }, getApiHeaders(cookies, orgId))
+    )
+  ]);
+
+  cache[orgId] = statsResult.status === 'fulfilled' && statsResult.value.ok ? statsResult.value.body.data : null;
+
+  return {
+    orgName: siteName,
+    stats: cache[orgId],
+    loginActivity: loginActivityDataFromSettled(loginActivityResult)
+  };
+};
diff --git a/apps/dashboard/src/routes/(app)/org/[slug]/dash/+page.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/dash/+page.svelte
new file mode 100644
index 00000000..82a5d766
--- /dev/null
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/dash/+page.svelte
@@ -0,0 +1,236 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import AwardIcon from '@lucide/svelte/icons/award';
+  import BookIcon from '@lucide/svelte/icons/book';
+  import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+  import UsersIcon from '@lucide/svelte/icons/users';
+  import { Skeleton } from '@cio/ui/base/skeleton';
+
+  import { t } from '$lib/utils/functions/translations';
+  import { calDateDiff } from '$lib/utils/functions/date';
+  import { currentOrgPath } from '$lib/utils/store/org';
+
+  import { CreateCourseButton } from '$features/course/components';
+  import { UserAvatar } from '@cio/ui/custom/user-avatar';
+  import { Progress } from '@cio/ui/base/progress';
+  import { Button } from '@cio/ui/base/button';
+  import { ActivityCard, VisitOrgSiteButton } from '$features/ui';
+  import LoginActivityChart from '$features/org/components/login-activity-chart.svelte';
+  import * as Page from '@cio/ui/base/page';
+  import { Empty } from '@cio/ui/custom/empty';
+  import { profile } from '$lib/utils/store/user';
+  import { getGreeting } from '$lib/utils/functions/date';
+
+  const { data } = $props();
+
+  const stats = $derived(data.stats);
+  const loginActivity = $derived(data.loginActivity);
+  const recentCertifications = $derived(stats?.recentCertifications || []);
+  const numberOfCourses = $derived(stats?.numberOfCourses || 0);
+  const totalCertificates = $derived(stats?.totalCertificates || 0);
+  const totalStudents = $derived(stats?.totalStudents || 0);
+  const topCourses = $derived(stats?.topCourses || []);
+</script>
+
+<svelte:head>
+  <title>Dashboard - ClassroomIO</title>
+</svelte:head>
+
+<Page.Root class="w-full">
+  <Page.Header>
+    <Page.HeaderContent>
+      <Page.Title>
+        {$t(getGreeting())}
+        {$profile.fullname}!
+      </Page.Title>
+    </Page.HeaderContent>
+    <Page.Action>
+      <CreateCourseButton variant="outline" isResponsive />
+
+      <VisitOrgSiteButton />
+    </Page.Action>
+  </Page.Header>
+  <Page.Body>
+    {#snippet child()}
+      <div class="mb-10 flex flex-wrap items-start">
+        <div class="grid w-full grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+          <ActivityCard
+            activity={{
+              icon: AwardIcon,
+              title: $t('dashboard.certificates_earned'),
+              percentage: totalCertificates ?? 0,
+              description: $t('dashboard.certificates_earned_description'),
+              hidePercentage: true
+            }}
+          />
+          <ActivityCard
+            activity={{
+              icon: BookIcon,
+              title: $t('dashboard.no_of_courses'),
+              percentage: numberOfCourses ?? 0,
+              description: $t('dashboard.no_courses_description'),
+              hidePercentage: true
+            }}
+          />
+          <ActivityCard
+            activity={{
+              icon: UsersIcon,
+              title: $t('dashboard.total_students'),
+              percentage: totalStudents ?? 0,
+              description: $t('dashboard.total_students_description'),
+              hidePercentage: true
+            }}
+          />
+        </div>
+      </div>
+
+      <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
+        <div class="bg-card flex min-h-[45vh] w-full flex-col rounded-xl border p-3 md:p-5 dark:text-white">
+          <div class="mb-4 flex items-center justify-between">
+            <h3 class="text-lg font-semibold tracking-tight">
+              {$t('dashboard.top_courses')}
+            </h3>
+          </div>
+
+          <div class="flex h-full flex-col">
+            {#if !stats}
+              <div class="space-y-3">
+                {#each Array(5) as _, i (i)}
+                  <Skeleton class="h-16 w-full rounded-lg" />
+                {/each}
+              </div>
+            {:else if topCourses.length === 0}
+              <Empty
+                title={$t('dashboard.create_first_course')}
+                description={$t('dashboard.create_first_course_description')}
+                icon={BookIcon}
+                class="h-full"
+              >
+                <CreateCourseButton variant="outline" />
+              </Empty>
+            {:else}
+              <ul class="ui:divide-border -mx-2 divide-y">
+                {#each topCourses as course, i (course.id)}
+                  {@const rank = i + 1}
+                  <li>
+                    <a
+                      href={`/courses/${course.id}`}
+                      class="group ui:hover:bg-muted/50 flex items-center gap-3 rounded-lg px-2 py-3 transition-colors md:gap-4"
+                    >
+                      <span
+                        class={[
+                          'flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-semibold tabular-nums',
+                          rank === 1 &&
+                            'ui:bg-amber-100 ui:text-amber-900 ui:dark:bg-amber-500/20 ui:dark:text-amber-200',
+                          rank === 2 &&
+                            'ui:bg-slate-100 ui:text-slate-700 ui:dark:bg-slate-500/20 ui:dark:text-slate-200',
+                          rank === 3 &&
+                            'ui:bg-orange-100 ui:text-orange-800 ui:dark:bg-orange-500/20 ui:dark:text-orange-200',
+                          rank > 3 && 'ui:bg-muted ui:text-muted-foreground'
+                        ]}
+                      >
+                        {rank}
+                      </span>
+
+                      <div class="min-w-0 flex-1">
+                        <p class="line-clamp-1 text-sm leading-snug font-medium group-hover:underline">
+                          {course.title}
+                        </p>
+                        <div class="ui:text-muted-foreground mt-1 flex items-center gap-1 text-xs">
+                          <UsersIcon class="h-3 w-3" />
+                          <span class="tabular-nums">{course.enrollments}</span>
+                          <span>
+                            {$t(course.enrollments === 1 ? 'dashboard.student' : 'dashboard.students')}
+                          </span>
+                        </div>
+                      </div>
+
+                      <div class="hidden w-48 shrink-0 grid-cols-2 gap-3 sm:grid">
+                        <div class="space-y-1">
+                          <div class="flex items-baseline justify-between gap-1">
+                            <span class="ui:text-muted-foreground text-[10px] tracking-wide uppercase">
+                              {$t('dashboard.completion')}
+                            </span>
+                            <span class="text-xs font-semibold tabular-nums">{course.completion}%</span>
+                          </div>
+                          <Progress value={course.completion} class="ui:h-1.5" />
+                        </div>
+                        <div class="space-y-1">
+                          <div class="flex items-baseline justify-between gap-1">
+                            <span class="ui:text-muted-foreground text-[10px] tracking-wide uppercase">
+                              {$t('dashboard.certification_rate')}
+                            </span>
+                            <span class="text-xs font-semibold tabular-nums">{course.certification}%</span>
+                          </div>
+                          <Progress value={course.certification} class="ui:h-1.5" />
+                        </div>
+                      </div>
+
+                      <ChevronRightIcon
+                        class="ui:text-muted-foreground h-4 w-4 shrink-0 opacity-0 transition-opacity group-hover:opacity-100"
+                      />
+                    </a>
+                  </li>
+                {/each}
+              </ul>
+            {/if}
+          </div>
+        </div>
+
+        <div class="flex min-h-[45vh] w-full flex-col rounded-md border p-3 md:p-5 dark:text-white">
+          <h3 class="mb-4 text-lg">
+            {$t('dashboard.recent_certifications')}
+          </h3>
+
+          <div class="h-full space-y-6">
+            {#if !stats}
+              {#each Array(5) as _, i (i)}
+                <Skeleton class="h-10 w-full rounded-md" />
+              {/each}
+            {:else}
+              {#each recentCertifications as certification (`${certification.id}-${certification.courseId}-${certification.date}`)}
+                <div class="flex items-center justify-between gap-2">
+                  <div class="flex items-center gap-2">
+                    <UserAvatar src={certification.avatarUrl} alt={certification.name ?? 'User'} class="h-6 w-6" />
+
+                    <div class="min-h-[45px] space-y-1">
+                      <p class="text-sm leading-none capitalize">{certification.name}</p>
+                      <p class="ui:text-muted-foreground text-sm">
+                        <span class="italic">
+                          {calDateDiff(certification.date)}
+                        </span>
+                      </p>
+                    </div>
+                  </div>
+
+                  <div class="w-2/4">
+                    <a class="hover:underline" href={`/courses/${certification.courseId}`}>
+                      <p class="line-clamp-2 pb-[0.1rem] text-sm leading-none">
+                        {certification.course}
+                      </p>
+                    </a>
+                  </div>
+                </div>
+              {:else}
+                <Empty
+                  title={$t('dashboard.no_certifications_yet')}
+                  description={$t('dashboard.no_certifications_yet_description')}
+                  icon={AwardIcon}
+                  class="h-full"
+                >
+                  <Button variant="outline" onclick={() => goto(`${$currentOrgPath}/courses`)}>
+                    {$t('dashboard.view_courses')}
+                  </Button>
+                </Empty>
+              {/each}
+            {/if}
+          </div>
+        </div>
+      </div>
+
+      <div class="mt-4">
+        <LoginActivityChart data={loginActivity} />
+      </div>
+    {/snippet}
+  </Page.Body>
+</Page.Root>
diff --git a/apps/dashboard/src/routes/(app)/org/[slug]/settings/ai-credits/+page.svelte b/apps/dashboard/src/routes/(app)/org/[slug]/settings/ai-credits/+page.svelte
new file mode 100644
index 00000000..0074c910
--- /dev/null
+++ b/apps/dashboard/src/routes/(app)/org/[slug]/settings/ai-credits/+page.svelte
@@ -0,0 +1,21 @@
+<script>
+  import { AiCreditsPage } from '$features/settings/pages';
+  import { t } from '$lib/utils/functions/translations';
+  import * as Page from '@cio/ui/base/page';
+</script>
+
+<svelte:head>
+  <title>AI Credits - ClassroomIO</title>
+</svelte:head>
+
+<Page.Header>
+  <Page.HeaderContent>
+    <Page.Title>{$t('settings.ai_credits.sub_title')}</Page.Title>
+    <Page.Subtitle>{$t('settings.ai_credits.page_subtitle')}</Page.Subtitle>
+  </Page.HeaderContent>
+</Page.Header>
+<Page.Body>
+  {#snippet child()}
+    <AiCreditsPage />
+  {/snippet}
+</Page.Body>
diff --git a/apps/dashboard/src/routes/(app)/programs/[id]/courses/+page.svelte b/apps/dashboard/src/routes/(app)/programs/[id]/courses/+page.svelte
index 092934f1..8282b9ef 100644
--- a/apps/dashboard/src/routes/(app)/programs/[id]/courses/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/programs/[id]/courses/+page.svelte
@@ -19,6 +19,7 @@
   import Trash2Icon from '@lucide/svelte/icons/trash-2';
   import { t } from '$lib/utils/functions/translations';
   import { programApi } from '$features/program/api';
+  import type { OrgCourses } from '$features/course/types';
   import AddCourseToProgramModal from '$features/program/components/add-course-to-program-modal.svelte';
   import { browser } from '$app/environment';
   import { onMount } from 'svelte';
@@ -51,7 +52,7 @@
       description: item.course.description ?? '',
       lessonCount: 0,
       totalStudents: 0,
-      isPublished: item.course.isPublished ?? false,
+      isPublished: item.course.status === 'ACTIVE',
       tags: []
     }))
   );
@@ -160,7 +161,7 @@
                     <p>{item.course.description}</p>
                   </Table.Cell>
                   <Table.Cell>
-                    <CoursePublishBadge isPublished={item.course.isPublished ?? false} />
+                    <CoursePublishBadge isPublished={item.course.status === 'ACTIVE'} />
                   </Table.Cell>
                   <Table.Cell class="text-center">
                     <Button
@@ -183,7 +184,7 @@
       {:else}
         <div class="mt-4 grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
           {#each courseCards as course (course.id)}
-            <CourseCard {course} href={`/courses/${course.id}`}>
+            <CourseCard course={course as unknown as OrgCourses[number]} href={`/courses/${course.id}`}>
               {#snippet actions()}
                 <Button
                   variant="outline"
diff --git a/apps/dashboard/src/routes/(app)/programs/[id]/newsfeed/+page.svelte b/apps/dashboard/src/routes/(app)/programs/[id]/newsfeed/+page.svelte
index b636b8ab..169cbf57 100644
--- a/apps/dashboard/src/routes/(app)/programs/[id]/newsfeed/+page.svelte
+++ b/apps/dashboard/src/routes/(app)/programs/[id]/newsfeed/+page.svelte
@@ -14,7 +14,7 @@
   import type { ProgramNewsfeedItem } from '$features/program/utils/types';
   import PinIcon from '@lucide/svelte/icons/pin';
   import { BookIcon } from '@lucide/svelte';
-  import { buildNextNewsfeedReaction } from '@cio/ui/custom/newsfeed-reactions';
+  import { buildNextNewsfeedReaction, type NewsfeedReactionType } from '@cio/ui/custom/newsfeed-reactions';
 
   interface Props {
     data: {
@@ -75,13 +75,13 @@
     await programNewsfeedApi.deleteComment(programId, feedId, commentId);
   };
 
-  const addNewReaction = async (reactionType: string, feedId: string, authorId: string) => {
+  const addNewReaction = async (reactionType: NewsfeedReactionType, feedId: string, authorId: string) => {
     if (!authorId || isReactingByFeedId[feedId]) return;
 
     const reactedFeed = programNewsfeedApi.feeds.find((feed) => feed.id === feedId);
     if (!reactedFeed) return;
 
-    const updatedReaction = buildNextNewsfeedReaction(reactedFeed.reaction, reactionType, authorId);
+    const updatedReaction = buildNextNewsfeedReaction(reactedFeed.reaction ?? undefined, reactionType, authorId);
 
     isReactingByFeedId = { ...isReactingByFeedId, [feedId]: true };
 
diff --git a/apps/dashboard/src/routes/(org-site)/course/[slug]/+page.server.ts b/apps/dashboard/src/routes/(org-site)/course/[slug]/+page.server.ts
index ac8d391e..84df7dde 100644
--- a/apps/dashboard/src/routes/(org-site)/course/[slug]/+page.server.ts
+++ b/apps/dashboard/src/routes/(org-site)/course/[slug]/+page.server.ts
@@ -1,15 +1,30 @@
 import type { MetaTagsProps } from 'svelte-meta-tags';
-import type { GetCourseBySlugRequest } from '$features/course/utils/types';
+import type { CourseBySlugWithOrg, GetCourseBySlugRequest } from '$features/course/utils/types';
 import type { GetOrganizationRequest } from '$features/org/utils/types';
 import { classroomio, type InferResponseType } from '$lib/utils/services/api';
 import { getApiKeyHeaders, safeServerApi } from '$lib/utils/services/api/server';
+import { redirect } from '@sveltejs/kit';
 
 type GetCourseBySlugSuccess = Extract<InferResponseType<GetCourseBySlugRequest>, { success: true }>;
 type GetOrganizationSuccess = Extract<InferResponseType<GetOrganizationRequest>, { success: true }>;
 
+type GetPublicCourseRequest = (typeof classroomio)['org-site']['course'][':courseSlug']['$get'];
+type GetPublicCourseSuccess = Extract<InferResponseType<GetPublicCourseRequest>, { success: true }>;
+
 export const load = async ({ params = { slug: '' }, parent }) => {
   const { org: parentOrg } = await parent();
 
+  // PUBLIC courses are served by the anonymous org-site endpoint and bypass the
+  // regular landing page entirely — redirect straight to the first item.
+  const publicTreeResult = await safeServerApi<GetPublicCourseSuccess>(() =>
+    classroomio['org-site'].course[':courseSlug'].$get({ param: { courseSlug: params.slug } }, getApiKeyHeaders())
+  );
+
+  if (publicTreeResult.ok && publicTreeResult.body.data.items.length > 0) {
+    const firstItem = publicTreeResult.body.data.items[0]!;
+    throw redirect(302, `/course/${params.slug}/lesson/${firstItem.slug}`);
+  }
+
   const courseResult = await safeServerApi<GetCourseBySlugSuccess>(() =>
     classroomio.course.slug[':slug'].$get(
       {
@@ -30,14 +45,16 @@ export const load = async ({ params = { slug: '' }, parent }) => {
     };
   }
 
-  const course = courseResult.body.data;
+  const course = courseResult.body.data as CourseBySlugWithOrg;
 
   let org = parentOrg ?? null;
-  if (!org && course.org?.siteName) {
+  const courseOrgSiteName = course.org?.siteName;
+
+  if (!org && courseOrgSiteName) {
     const organizationResult = await safeServerApi<GetOrganizationSuccess>(() =>
       classroomio.organization.$get(
         {
-          query: { siteName: course.org.siteName }
+          query: { siteName: courseOrgSiteName }
         },
         getApiKeyHeaders()
       )
diff --git a/apps/dashboard/src/routes/(org-site)/course/[slug]/+page.svelte b/apps/dashboard/src/routes/(org-site)/course/[slug]/+page.svelte
index 26b698db..12dec268 100644
--- a/apps/dashboard/src/routes/(org-site)/course/[slug]/+page.svelte
+++ b/apps/dashboard/src/routes/(org-site)/course/[slug]/+page.svelte
@@ -7,7 +7,7 @@
   import { user } from '$lib/utils/store/user';
   import { CourseLandingPage } from '$features/ui';
   import { PoweredBy } from '$features/ui';
-  import { normalizeLandingPageSettings, importThemeComponent } from '$features/org/utils/landing-page';
+  import { normalizeLandingPageSettings } from '$features/org/utils/landing-page';
 
   import { OrgLandingPageFooter } from '@cio/ui/custom/org-landing-page';
   import type { Component } from 'svelte';
@@ -39,13 +39,16 @@
       return landingSettings.hero;
     }
 
+    const enrollmentsOpen = data.course.metadata?.allowNewStudent === true;
+
     return {
       ...landingSettings.hero,
       heading: data.course.title,
       subheading: data.course.description || landingSettings.hero.subheading,
       primaryAction: {
         label: t.get('course.navItem.landing_page.start_course'),
-        href: resolve(`/course/${data.course.slug}/enroll`, {})
+        href: resolve(`/course/${data.course.slug}/enroll`, {}),
+        disabled: !enrollmentsOpen
       },
       image: data.course.logo || landingSettings.hero.image
     };
@@ -97,7 +100,7 @@
       {/if}
     {/if}
 
-    <CourseLandingPage courseData={data.course} showStandaloneShell={false} />
+    <CourseLandingPage courseData={data.course} />
 
     <OrgLandingPageFooter
       {orgName}
diff --git a/apps/dashboard/src/routes/(org-site)/course/[slug]/enroll/+page.server.ts b/apps/dashboard/src/routes/(org-site)/course/[slug]/enroll/+page.server.ts
index 20e0eee3..635f1b3a 100644
--- a/apps/dashboard/src/routes/(org-site)/course/[slug]/enroll/+page.server.ts
+++ b/apps/dashboard/src/routes/(org-site)/course/[slug]/enroll/+page.server.ts
@@ -1,4 +1,4 @@
-import type { GetCourseBySlugRequest } from '$features/course/utils/types';
+import type { CourseBySlugWithOrg, GetCourseBySlugRequest } from '$features/course/utils/types';
 import { classroomio, type InferResponseType } from '$lib/utils/services/api';
 import { getApiKeyHeaders, safeServerApi } from '$lib/utils/services/api/server';
 import { calcCourseDiscount } from '$lib/utils/functions/course';
@@ -66,7 +66,7 @@ export const load = async ({ params, url }) => {
     throw error(404, 'Not found');
   }
 
-  const courseData = courseResult.body.data;
+  const courseData = courseResult.body.data as CourseBySlugWithOrg;
   const discount = (courseData.metadata as { discount?: number } | null)?.discount ?? 0;
   const showDiscount = (courseData.metadata as { showDiscount?: boolean } | null)?.showDiscount ?? false;
   const calculatedCost = calcCourseDiscount(discount, Number(courseData.cost ?? 0), showDiscount);
diff --git a/apps/dashboard/src/routes/(org-site)/course/[slug]/enroll/+page.svelte b/apps/dashboard/src/routes/(org-site)/course/[slug]/enroll/+page.svelte
index 0acb44c9..bba96f69 100644
--- a/apps/dashboard/src/routes/(org-site)/course/[slug]/enroll/+page.svelte
+++ b/apps/dashboard/src/routes/(org-site)/course/[slug]/enroll/+page.svelte
@@ -103,13 +103,17 @@
 
   $effect(() => {
     if (!data.currentOrg) return;
-    setTheme(data.currentOrg?.theme);
+
+    const rawTheme = data.currentOrg.theme;
+    const themeString = typeof rawTheme === 'string' ? rawTheme : '';
+
+    setTheme(themeString);
     currentOrg.update((o) => ({
       ...o,
       id: data.currentOrg?.id ?? o.id,
       name: data.currentOrg?.name ?? o.name,
       siteName: data.currentOrg?.siteName ?? o.siteName,
-      theme: data.currentOrg?.theme ?? o.theme
+      theme: themeString || o.theme
     }));
   });
 </script>
diff --git a/apps/dashboard/src/routes/(org-site)/course/[slug]/lesson/[itemSlug]/+page.server.ts b/apps/dashboard/src/routes/(org-site)/course/[slug]/lesson/[itemSlug]/+page.server.ts
new file mode 100644
index 00000000..bc4072a8
--- /dev/null
+++ b/apps/dashboard/src/routes/(org-site)/course/[slug]/lesson/[itemSlug]/+page.server.ts
@@ -0,0 +1,66 @@
+import type { MetaTagsProps } from 'svelte-meta-tags';
+
+import { classroomio, type InferResponseType } from '$lib/utils/services/api';
+import { getApiKeyHeaders, safeServerApi } from '$lib/utils/services/api/server';
+import { error } from '@sveltejs/kit';
+
+type GetPublicCourseRequest = (typeof classroomio)['org-site']['course'][':courseSlug']['$get'];
+type GetPublicCourseItemRequest =
+  (typeof classroomio)['org-site']['course'][':courseSlug']['item'][':itemSlug']['$get'];
+
+type GetPublicCourseSuccess = Extract<InferResponseType<GetPublicCourseRequest>, { success: true }>;
+type GetPublicCourseItemSuccess = Extract<InferResponseType<GetPublicCourseItemRequest>, { success: true }>;
+
+export const load = async ({ params = { slug: '', itemSlug: '' } }) => {
+  const [treeResult, itemResult] = await Promise.all([
+    safeServerApi<GetPublicCourseSuccess>(() =>
+      classroomio['org-site'].course[':courseSlug'].$get({ param: { courseSlug: params.slug } }, getApiKeyHeaders())
+    ),
+    safeServerApi<GetPublicCourseItemSuccess>(() =>
+      classroomio['org-site'].course[':courseSlug'].item[':itemSlug'].$get(
+        { param: { courseSlug: params.slug, itemSlug: params.itemSlug } },
+        getApiKeyHeaders()
+      )
+    )
+  ]);
+
+  if (!treeResult.ok || !itemResult.ok) {
+    throw error(404, 'Public course or lesson not found');
+  }
+
+  const tree = treeResult.body.data;
+  const item = itemResult.body.data;
+
+  const itemTitle = 'title' in item ? item.title : tree.course.title;
+  const itemSummary =
+    item.kind === 'lesson' && typeof item.body === 'string'
+      ? item.body.replace(/<[^>]+>/g, '').slice(0, 155)
+      : (tree.course.description ?? '');
+
+  const pageMetaTags = Object.freeze({
+    title: `${itemTitle} · ${tree.course.title}`,
+    description: itemSummary || tree.course.description || '',
+    openGraph: {
+      title: itemTitle,
+      description: itemSummary || tree.course.description || '',
+      images: tree.course.bannerImage
+        ? [
+            {
+              url: tree.course.bannerImage,
+              alt: tree.course.title,
+              width: 1200,
+              height: 630,
+              secureUrl: tree.course.bannerImage,
+              type: 'image/jpeg'
+            }
+          ]
+        : []
+    }
+  }) satisfies MetaTagsProps;
+
+  return {
+    tree,
+    item,
+    pageMetaTags
+  };
+};
diff --git a/apps/dashboard/src/routes/(org-site)/course/[slug]/lesson/[itemSlug]/+page.svelte b/apps/dashboard/src/routes/(org-site)/course/[slug]/lesson/[itemSlug]/+page.svelte
new file mode 100644
index 00000000..9d29822a
--- /dev/null
+++ b/apps/dashboard/src/routes/(org-site)/course/[slug]/lesson/[itemSlug]/+page.svelte
@@ -0,0 +1,98 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { PublicCourse } from '@cio/ui';
+  import {
+    toPublicExerciseView,
+    toPublicLessonView,
+    toPublicSidebarSections
+  } from '$features/course/utils/public-course-mappers';
+  import {
+    publicExerciseAttemptsStorageKey,
+    type PublicCourseSidebarItem,
+    type PublicCourseSidebarSection,
+    type PublicLessonViewData,
+    type PublicExerciseViewData
+  } from '@cio/ui/custom/public-course';
+  import { getExerciseQuestionLabels } from '$features/course/components/exercise/question-labels';
+  import { t } from '$lib/utils/functions/translations';
+
+  const exerciseLabels = $derived(getExerciseQuestionLabels());
+
+  let { data } = $props();
+
+  const sections: PublicCourseSidebarSection[] = $derived(toPublicSidebarSections(data.tree));
+  const flatItems = $derived(sections.flatMap((section) => section.items));
+
+  const itemSlug = $derived(data.item.slug);
+  const activeIndex = $derived(flatItems.findIndex((entry) => entry.slug === itemSlug));
+  const activeItem = $derived<PublicCourseSidebarItem | null>(flatItems[activeIndex] ?? null);
+  const prevItem = $derived(activeIndex > 0 ? flatItems[activeIndex - 1] : null);
+  const nextItem = $derived(activeIndex >= 0 && activeIndex < flatItems.length - 1 ? flatItems[activeIndex + 1] : null);
+
+  const callout = $derived(data.tree.course.callout ?? null);
+  const courseTitle = $derived(data.tree.course.title);
+  const org = $derived(data.tree.course.org ?? null);
+
+  const hrefFor = (item: PublicCourseSidebarItem) => `/course/${data.tree.course.slug}/lesson/${item.slug}`;
+
+  async function navigateTo(item: PublicCourseSidebarItem | null) {
+    if (!item) return;
+
+    await goto(hrefFor(item));
+  }
+
+  const lessonView = $derived<PublicLessonViewData | null>(
+    data.item.kind === 'lesson' ? toPublicLessonView(data.item) : null
+  );
+  const exerciseView = $derived<PublicExerciseViewData | null>(
+    data.item.kind === 'exercise' ? toPublicExerciseView(data.item) : null
+  );
+</script>
+
+<PublicCourse.PublicCourseShell
+  {sections}
+  {courseTitle}
+  {org}
+  activeSlug={itemSlug}
+  {activeItem}
+  activeFlatIndex={activeIndex >= 0 ? activeIndex : null}
+  totalItems={flatItems.length}
+  hasPrev={!!prevItem}
+  hasNext={!!nextItem}
+  {prevItem}
+  {nextItem}
+  {hrefFor}
+  exploreHref="/courses"
+  signInHref="/login"
+  exploreLabel={$t('public_course.header.explore_courses')}
+  signInLabel={$t('public_course.header.sign_in')}
+  footerPrevLabel={$t('public_course.footer_nav.previous')}
+  footerNextLabel={$t('public_course.footer_nav.next')}
+  courseSlug={data.tree.course.slug}
+  poweredByLabel={$t('public_course.powered_by.label')}
+  poweredByBrand={$t('public_course.powered_by.brand')}
+  onItemClick={navigateTo}
+  onPrev={() => navigateTo(prevItem)}
+  onNext={() => navigateTo(nextItem)}
+>
+  {#if lessonView}
+    <PublicCourse.PublicLessonView lesson={lessonView} {callout} />
+  {:else if exerciseView}
+    {#key itemSlug}
+      <PublicCourse.PublicExerciseView
+        exercise={exerciseView}
+        {callout}
+        labels={exerciseLabels}
+        attemptsPersistenceKey={publicExerciseAttemptsStorageKey(data.tree.course.slug, itemSlug)}
+        formatAttemptOption={({ attemptNumber, correct, total }) =>
+          t.get('public_course.exercise.attempt_option', { attemptNumber, correct, total })}
+        newAttemptOptionLabel={$t('public_course.exercise.practice_again')}
+        attemptsSelectAriaLabel={$t('public_course.exercise.attempts_select_aria')}
+        submitLabel={$t('public_course.exercise.submit')}
+        tryAgainLabel={$t('public_course.exercise.try_again')}
+        privacyHint={$t('public_course.exercise.privacy_hint')}
+        summaryTemplate={$t('public_course.exercise.summary_template')}
+      />
+    {/key}
+  {/if}
+</PublicCourse.PublicCourseShell>
diff --git a/apps/dashboard/src/routes/api/polar/buy-tokens/+server.ts b/apps/dashboard/src/routes/api/polar/buy-tokens/+server.ts
new file mode 100644
index 00000000..0568731c
--- /dev/null
+++ b/apps/dashboard/src/routes/api/polar/buy-tokens/+server.ts
@@ -0,0 +1,64 @@
+import { Polar } from '@polar-sh/sdk';
+import { TOKEN_PACK } from '@cio/utils/plans';
+import { dev } from '$app/environment';
+import { env } from '$env/dynamic/private';
+
+export const GET = async ({ url }: { url: URL }) => {
+  const quantityRaw = Number(url.searchParams.get('quantity') ?? '1');
+  const quantity = Math.min(100, Math.max(1, Number.isFinite(quantityRaw) ? Math.trunc(quantityRaw) : 1));
+
+  let metadata: { orgId?: string; orgSlug?: string; triggeredBy?: string };
+
+  try {
+    metadata = JSON.parse(url.searchParams.get('metadata') ?? '{}');
+  } catch {
+    return new Response('Invalid metadata JSON', { status: 400 });
+  }
+
+  if (!metadata.orgId || !metadata.orgSlug) {
+    return new Response('Missing orgId / orgSlug in metadata', { status: 400 });
+  }
+
+  const productId = env.POLAR_TOKEN_PACK_PRODUCT_ID;
+
+  if (!productId) {
+    return new Response('POLAR_TOKEN_PACK_PRODUCT_ID is not configured', { status: 500 });
+  }
+
+  if (!env.POLAR_ACCESS_TOKEN) {
+    return new Response('POLAR_ACCESS_TOKEN is not configured', { status: 500 });
+  }
+
+  const polar = new Polar({
+    accessToken: env.POLAR_ACCESS_TOKEN,
+    server: dev ? 'sandbox' : 'production'
+  });
+
+  const totalPriceCents = TOKEN_PACK.PRICE_USD_CENTS * quantity;
+
+  const checkout = await polar.checkouts.create({
+    products: [productId],
+    prices: {
+      [productId]: [
+        {
+          amountType: 'fixed',
+          priceAmount: totalPriceCents,
+          priceCurrency: 'usd'
+        }
+      ]
+    },
+    customerEmail: url.searchParams.get('customerEmail') ?? undefined,
+    customerName: url.searchParams.get('customerName') ?? undefined,
+    successUrl: `${url.origin}/org/${metadata.orgSlug}/settings/ai-credits?tokens=success`,
+    metadata: {
+      kind: 'token_pack',
+      orgId: metadata.orgId,
+      orgSlug: metadata.orgSlug,
+      triggeredBy: metadata.triggeredBy ?? '',
+      tokensPerUnit: String(TOKEN_PACK.TOKENS_PER_UNIT),
+      quantity: String(quantity)
+    }
+  });
+
+  return Response.redirect(checkout.url, 303);
+};
diff --git a/apps/dashboard/src/routes/api/polar/webhook/+server.ts b/apps/dashboard/src/routes/api/polar/webhook/+server.ts
index 1b019e54..edc335b9 100644
--- a/apps/dashboard/src/routes/api/polar/webhook/+server.ts
+++ b/apps/dashboard/src/routes/api/polar/webhook/+server.ts
@@ -1,6 +1,12 @@
 import { OrgPlanApiServer } from '$features/org/api/org-plan.server';
-import { PLAN } from '@cio/utils/plans';
-import type { PolarWebhookPayload } from '$lib/utils/types/polar';
+import { CreditPurchaseApiServer } from '$features/agent/api/credit-purchase.server';
+import { PLAN, TOKEN_PACK } from '@cio/utils/plans';
+import type {
+  PolarOrderWebhookPayload,
+  PolarSubscriptionWebhookPayload,
+  PolarWebhookPayload,
+  SubscriptionData
+} from '$lib/utils/types/polar';
 import { Webhooks } from '@polar-sh/sveltekit';
 import { env } from '$env/dynamic/private';
 
@@ -9,24 +15,86 @@ export const POST = Webhooks({
   onPayload
 });
 
+function isSubscriptionPayload(payload: PolarWebhookPayload): payload is PolarSubscriptionWebhookPayload {
+  return (
+    payload.type === 'checkout.created' ||
+    payload.type === 'checkout.updated' ||
+    payload.type.startsWith('subscription.')
+  );
+}
+
+function isOrderPayload(payload: PolarWebhookPayload): payload is PolarOrderWebhookPayload {
+  return payload.type === 'order.paid' || payload.type === 'order.created' || payload.type === 'order.refunded';
+}
+
 async function onPayload(payload: PolarWebhookPayload) {
-  const metadata = payload.data.metadata;
+  console.log('Polar webhook', payload.type);
+
+  if (isOrderPayload(payload)) {
+    if (payload.type !== 'order.paid') {
+      return;
+    }
+
+    const order = payload.data;
+    const md = order.metadata ?? {};
+
+    if (md.kind !== 'token_pack' || !md.orgId) {
+      return;
+    }
+
+    const quantityFromItems = order.items?.[0]?.quantity;
+    const quantityParsed = Number(md.quantity ?? '1');
+    const quantity =
+      quantityFromItems != null && quantityFromItems > 0
+        ? quantityFromItems
+        : Number.isFinite(quantityParsed) && quantityParsed > 0
+          ? Math.trunc(quantityParsed)
+          : 1;
+    const tokensPerUnit = Number(md.tokensPerUnit ?? '') || TOKEN_PACK.TOKENS_PER_UNIT;
+    const tokens = quantity * tokensPerUnit;
+    const totalCents = order.totalAmount ?? order.amount ?? 0;
+    const unitPriceCents = quantity > 0 ? Math.round(totalCents / quantity) : totalCents;
+
+    const triggeredByRaw = md.triggeredBy?.trim();
+    let triggeredBy: string | undefined;
+
+    if (
+      triggeredByRaw &&
+      /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(triggeredByRaw)
+    ) {
+      triggeredBy = triggeredByRaw;
+    }
+
+    try {
+      await CreditPurchaseApiServer.recordPurchase({
+        orgId: md.orgId,
+        triggeredBy,
+        providerOrderId: order.id,
+        tokens,
+        quantity,
+        unitPriceCents,
+        currency: order.currency ?? 'USD',
+        payload: order as unknown as Record<string, unknown>
+      });
+    } catch (error) {
+      console.error('Error recording credit purchase', error);
+    }
+
+    return;
+  }
+
+  if (!isSubscriptionPayload(payload)) {
+    console.log('Unknown Polar event', payload.type);
+
+    return;
+  }
+
+  const data = payload.data as SubscriptionData;
+  const metadata = data.metadata;
   const orgId = metadata.orgId;
   const triggeredBy = metadata.triggeredBy;
-  const subscriptionId = payload.data.id;
-  const isSubscriptionActive = payload.data.status === 'active';
-
-  console.log({
-    orgId,
-    triggeredBy,
-    isSubscriptionActive,
-    subscriptionId
-  });
-
-  if (!orgId) {
-    console.error('Org ID is required');
-    throw new Error('Org ID is required');
-  }
+  const subscriptionId = data.id;
+  const isSubscriptionActive = data.status === 'active';
 
   switch (payload.type) {
     case 'checkout.created':
@@ -34,14 +102,24 @@ async function onPayload(payload: PolarWebhookPayload) {
     case 'checkout.updated':
       break;
     case 'subscription.created':
+      if (metadata.kind === 'token_pack') {
+        break;
+      }
+
+      if (!orgId || triggeredBy === undefined || triggeredBy === '') {
+        console.error('subscription.created missing org metadata');
+
+        break;
+      }
+
       if (isSubscriptionActive) {
         try {
           const planData = {
             orgId,
-            triggeredBy: parseInt(triggeredBy),
+            triggeredBy: parseInt(triggeredBy, 10),
             planName: PLAN.EARLY_ADOPTER as 'EARLY_ADOPTER' | 'ENTERPRISE' | 'BASIC',
             subscriptionId,
-            payload: payload.data as unknown as Record<string, unknown>
+            payload: data as unknown as Record<string, unknown>
           };
 
           const result = await OrgPlanApiServer.createOrgPlan(planData);
@@ -50,31 +128,31 @@ async function onPayload(payload: PolarWebhookPayload) {
           console.error('Error creating org plan', error);
         }
       }
+
       break;
     case 'subscription.updated':
       if (!isSubscriptionActive) {
-        // Handle Cancel Subscription
         try {
           const result = await OrgPlanApiServer.cancelOrgPlan({
             subscriptionId,
-            payload: payload.data as unknown as Record<string, unknown>
+            payload: data as unknown as Record<string, unknown>
           });
           console.log('Subscription canceled', result);
         } catch (error) {
           console.error('Error canceling org plan', error);
         }
       } else {
-        // Handle Update Subscription
         try {
           const result = await OrgPlanApiServer.updateOrgPlan({
             subscriptionId,
-            payload: payload.data as unknown as Record<string, unknown>
+            payload: data as unknown as Record<string, unknown>
           });
           console.log('Subscription updated', result);
         } catch (error) {
           console.error('Error updating org plan', error);
         }
       }
+
       break;
     case 'subscription.active':
       break;
@@ -83,7 +161,9 @@ async function onPayload(payload: PolarWebhookPayload) {
     case 'subscription.canceled':
       break;
     default:
-      console.log('Unknown event', payload.type);
+      // Exhaustive over `PolarSubscriptionWebhookPayload`; kept for future Polar event types.
+      console.log('Unknown subscription-related event');
+
       break;
   }
 }
diff --git a/apps/dashboard/src/routes/api/polar/webhook/__tests__/order-paid.fixture.json b/apps/dashboard/src/routes/api/polar/webhook/__tests__/order-paid.fixture.json
new file mode 100644
index 00000000..c5195c64
--- /dev/null
+++ b/apps/dashboard/src/routes/api/polar/webhook/__tests__/order-paid.fixture.json
@@ -0,0 +1,18 @@
+{
+  "type": "order.paid",
+  "data": {
+    "id": "ord_fixture_001",
+    "amount": 500,
+    "totalAmount": 1500,
+    "currency": "usd",
+    "metadata": {
+      "kind": "token_pack",
+      "orgId": "00000000-0000-4000-8000-000000000001",
+      "orgSlug": "demo-org",
+      "triggeredBy": "00000000-0000-4000-8000-000000000002",
+      "tokensPerUnit": "2000000",
+      "quantity": "3"
+    },
+    "items": [{ "quantity": 3, "amount": 1500 }]
+  }
+}
diff --git a/apps/dashboard/static/sticky-test.css b/apps/dashboard/static/sticky-test.css
deleted file mode 100644
index 8922a72c..00000000
--- a/apps/dashboard/static/sticky-test.css
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-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-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-content:"";--tw-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;--border-angle:0deg}}}@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-50:oklch(97.1% .013 17.38);--ui-color-red-500:oklch(63.7% .237 25.331);--ui-color-red-600:oklch(57.7% .245 27.325);--ui-color-red-700:oklch(50.5% .213 27.518);--ui-color-orange-500:oklch(70.5% .213 47.604);--ui-color-amber-50:oklch(98.7% .022 95.277);--ui-color-amber-200:oklch(92.4% .12 95.746);--ui-color-amber-300:oklch(87.9% .169 91.605);--ui-color-amber-400:oklch(82.8% .189 84.429);--ui-color-amber-500:oklch(76.9% .188 70.08);--ui-color-amber-600:oklch(66.6% .179 58.318);--ui-color-amber-900:oklch(41.4% .112 45.904);--ui-color-amber-950:oklch(27.9% .077 45.635);--ui-color-yellow-500:oklch(79.5% .184 86.047);--ui-color-green-500:oklch(72.3% .219 149.579);--ui-color-emerald-50:oklch(97.9% .021 166.113);--ui-color-emerald-300:oklch(84.5% .143 164.978);--ui-color-emerald-400:oklch(76.5% .177 163.223);--ui-color-emerald-500:oklch(69.6% .17 162.48);--ui-color-emerald-600:oklch(59.6% .145 163.225);--ui-color-emerald-950:oklch(26.2% .051 172.552);--ui-color-sky-50:oklch(97.7% .013 236.62);--ui-color-sky-200:oklch(90.1% .058 230.902);--ui-color-sky-900:oklch(39.1% .09 240.876);--ui-color-sky-950:oklch(29.3% .066 243.157);--ui-color-blue-600:oklch(54.6% .245 262.881);--ui-color-pink-500:oklch(65.6% .241 354.308);--ui-color-slate-500:oklch(55.4% .046 257.417);--ui-color-slate-800:oklch(27.9% .041 260.031);--ui-color-slate-950:oklch(12.9% .042 264.695);--ui-color-gray-200:oklch(92.8% .006 264.531);--ui-color-neutral-800:oklch(26.9% 0 0);--ui-color-black:#000;--ui-color-white:#fff;--ui-spacing:.25rem;--ui-container-sm:24rem;--ui-container-lg:32rem;--ui-container-xl:36rem;--ui-container-2xl:42rem;--ui-container-3xl:48rem;--ui-container-4xl:56rem;--ui-container-7xl:80rem;--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-xl:1.25rem;--ui-text-xl--line-height:calc(1.75 / 1.25);--ui-text-2xl:1.5rem;--ui-text-2xl--line-height:calc(2 / 1.5);--ui-text-3xl:1.875rem;--ui-text-3xl--line-height:calc(2.25 / 1.875);--ui-text-4xl:2.25rem;--ui-text-4xl--line-height:calc(2.5 / 2.25);--ui-text-5xl:3rem;--ui-text-5xl--line-height:1;--ui-text-6xl:3.75rem;--ui-text-6xl--line-height:1;--ui-text-7xl:4.5rem;--ui-text-7xl--line-height:1;--ui-font-weight-light:300;--ui-font-weight-normal:400;--ui-font-weight-medium:500;--ui-font-weight-semibold:600;--ui-font-weight-bold:700;--ui-font-weight-black:900;--ui-tracking-tighter:-.05em;--ui-tracking-tight:-.025em;--ui-tracking-wide:.025em;--ui-tracking-widest:.1em;--ui-leading-tight:1.25;--ui-leading-snug:1.375;--ui-leading-normal:1.5;--ui-leading-relaxed:1.625;--ui-radius-xs:.125rem;--ui-radius-2xl:1rem;--ui-radius-3xl:1.5rem;--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-blur-xl:24px;--ui-aspect-video:16 / 9;--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{.cio-marketing-border-beam{pointer-events:none;border-radius:inherit;border:calc(var(--border-width) * 1px) solid transparent;-webkit-mask-composite:source-in;-webkit-mask-source-type:auto,auto;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#0000,#0000),linear-gradient(#fff,#fff);mask-image:linear-gradient(#0000,#0000),linear-gradient(#fff,#fff);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:padding-box,border-box;mask-clip:padding-box,border-box;-webkit-mask-origin:border-box,border-box;mask-origin:border-box,border-box;-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.cio-marketing-border-beam:after{content:"";aspect-ratio:1;width:calc(var(--size) * 1px);animation-delay:var(--delay);background:linear-gradient(to left, var(--color-from), var(--color-to), transparent);offset-anchor:calc(var(--anchor) * 1%) 50%;offset-path:rect(0 auto auto 0 round calc(var(--size) * 1px));animation:border-beam calc(var(--duration) * 1s) infinite linear;position:absolute}}@layer utilities{.ui\:\@container\/field-group{container:field-group/inline-size}.ui\:\@container-\[size\]{container-type: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\:sticky{position:sticky}.ui\:-inset-full{inset:-100%}.ui\:inset-\(--cut\){inset:var(--cut)}.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-3{top:calc(var(--ui-spacing) * -3)}.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-13{top:calc(var(--ui-spacing) * 13)}.ui\:top-\[-12px\]{top:-12px}.ui\:top-\[50\%\]{top:50%}.ui\:top-\[60\%\]{top:60%}.ui\:top-full{top:100%}.ui\:top-px{top:1px}.ui\:-right-4{right:calc(var(--ui-spacing) * -4)}.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\:right-\[-12px\]{right:-12px}.ui\:-bottom-px{bottom:-1px}.ui\:bottom-0{bottom:calc(var(--ui-spacing) * 0)}.ui\:bottom-2{bottom:calc(var(--ui-spacing) * 2)}.ui\:bottom-full{bottom:100%}.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-10{z-index:calc(10 * -1)}.ui\:-z-20{z-index:calc(20 * -1)}.ui\:-z-30{z-index:calc(30 * -1)}.ui\:z-0{z-index:0}.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-100{z-index:100}.ui\:z-200{z-index:200}.ui\:z-999{z-index:999}.ui\:z-\[1\]{z-index:1}.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-0\.5{margin-inline:calc(var(--ui-spacing) * .5)}.ui\:mx-auto{margin-inline:auto}.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-3{margin-block:calc(var(--ui-spacing) * 3)}.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-0\.5{margin-top:calc(var(--ui-spacing) * .5)}.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-6{margin-top:calc(var(--ui-spacing) * 6)}.ui\:mt-10{margin-top:calc(var(--ui-spacing) * 10)}.ui\:mt-12{margin-top:calc(var(--ui-spacing) * 12)}.ui\:mt-auto{margin-top:auto}.ui\:mr-1{margin-right:calc(var(--ui-spacing) * 1)}.ui\:mr-2{margin-right:calc(var(--ui-spacing) * 2)}.ui\:mb-1{margin-bottom: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\:mb-6{margin-bottom:calc(var(--ui-spacing) * 6)}.ui\:mb-8{margin-bottom:calc(var(--ui-spacing) * 8)}.ui\:mb-10{margin-bottom:calc(var(--ui-spacing) * 10)}.ui\:mb-12{margin-bottom:calc(var(--ui-spacing) * 12)}.ui\:ml-1{margin-left:calc(var(--ui-spacing) * 1)}.ui\:ml-2{margin-left:calc(var(--ui-spacing) * 2)}.ui\:ml-2\.5{margin-left:calc(var(--ui-spacing) * 2.5)}.ui\:ml-auto{margin-left:auto}.ui\:box-border{box-sizing:border-box}.ui\:line-clamp-1{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.ui\:line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.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-block{display:inline-block}.ui\:inline-flex{display:inline-flex}.ui\:field-sizing-content{field-sizing:content}.ui\:aspect-\[1\]{aspect-ratio:1}.ui\:aspect-video{aspect-ratio:var(--ui-aspect-video)}.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-5{width:calc(var(--ui-spacing) * 5);height:calc(var(--ui-spacing) * 5)}.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-14{width:calc(var(--ui-spacing) * 14);height:calc(var(--ui-spacing) * 14)}.ui\:size-14\!{width:calc(var(--ui-spacing) * 14)!important;height:calc(var(--ui-spacing) * 14)!important}.ui\:size-20{width:calc(var(--ui-spacing) * 20);height:calc(var(--ui-spacing) * 20)}.ui\:size-\[2\.4px\]{width:2.4px;height:2.4px}.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-1\.5{height:calc(var(--ui-spacing) * 1.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-20{height:calc(var(--ui-spacing) * 20)}.ui\:h-24{height:calc(var(--ui-spacing) * 24)}.ui\:h-28{height:calc(var(--ui-spacing) * 28)}.ui\:h-40{height:calc(var(--ui-spacing) * 40)}.ui\:h-48{height:calc(var(--ui-spacing) * 48)}.ui\:h-50\!{height:calc(var(--ui-spacing) * 50)!important}.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-\[100cqh\]{height:100cqh}.ui\:h-\[280px\]{height:280px}.ui\:h-\[500px\]{height:500px}.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-fit\!{height:fit-content!important}.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-32{max-height:calc(var(--ui-spacing) * 32)}.ui\:max-h-52{max-height:calc(var(--ui-spacing) * 52)}.ui\:max-h-60{max-height:calc(var(--ui-spacing) * 60)}.ui\:max-h-64{max-height:calc(var(--ui-spacing) * 64)}.ui\:max-h-72{max-height:calc(var(--ui-spacing) * 72)}.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-96{max-height:calc(var(--ui-spacing) * 96)}.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-4{min-height:calc(var(--ui-spacing) * 4)}.ui\:min-h-8{min-height:calc(var(--ui-spacing) * 8)}.ui\:min-h-14{min-height:calc(var(--ui-spacing) * 14)}.ui\:min-h-16{min-height:calc(var(--ui-spacing) * 16)}.ui\:min-h-40{min-height:calc(var(--ui-spacing) * 40)}.ui\:min-h-96{min-height:calc(var(--ui-spacing) * 96)}.ui\:min-h-\[44px\]{min-height:44px}.ui\:min-h-\[63px\]{min-height:63px}.ui\:min-h-\[240px\]{min-height:240px}.ui\:min-h-\[320px\]{min-height:320px}.ui\:min-h-\[calc\(100vh-48px\)\]{min-height:calc(100vh - 48px)}.ui\:min-h-screen{min-height:100vh}.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\.5{width:calc(var(--ui-spacing) * 1.5)}.ui\:w-1\/4{width:25%}.ui\:w-2{width:calc(var(--ui-spacing) * 2)}.ui\:w-2\/4{width:50%}.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-6{width:calc(var(--ui-spacing) * 6)}.ui\:w-7{width:calc(var(--ui-spacing) * 7)}.ui\:w-8{width:calc(var(--ui-spacing) * 8)}.ui\:w-24{width:calc(var(--ui-spacing) * 24)}.ui\:w-28{width:calc(var(--ui-spacing) * 28)}.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-88{width:calc(var(--ui-spacing) * 88)}.ui\:w-\[1\.2rem\]{width:1.2rem}.ui\:w-\[25px\]{width:25px}.ui\:w-\[50px\]{width:50px}.ui\:w-\[80\%\]{width:80%}.ui\:w-\[100px\]{width:100px}.ui\:w-auto{width:auto}.ui\:w-fit{width:fit-content}.ui\:w-fit\!{width:fit-content!important}.ui\:w-full{width:100%}.ui\:w-full\!{width:100%!important}.ui\:w-max{width:max-content}.ui\:w-screen{width:100vw}.ui\:max-w-\(--skeleton-width\){max-width:var(--skeleton-width)}.ui\:max-w-2xl{max-width:var(--ui-container-2xl)}.ui\:max-w-3xl{max-width:var(--ui-container-3xl)}.ui\:max-w-4xl{max-width:var(--ui-container-4xl)}.ui\:max-w-6{max-width:calc(var(--ui-spacing) * 6)}.ui\:max-w-7xl{max-width:var(--ui-container-7xl)}.ui\:max-w-80{max-width:calc(var(--ui-spacing) * 80)}.ui\:max-w-\[16rem\]{max-width:16rem}.ui\:max-w-\[60\%\]{max-width:60%}.ui\:max-w-\[200px\]{max-width:200px}.ui\:max-w-\[300px\]{max-width:300px}.ui\:max-w-\[320px\]{max-width:320px}.ui\:max-w-\[1200px\]{max-width:1200px}.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-none{max-width:none}.ui\:max-w-sm{max-width:var(--ui-container-sm)}.ui\:max-w-xl{max-width:var(--ui-container-xl)}.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-18{min-width:calc(var(--ui-spacing) * 18)}.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-\[5rem\]{min-width:5rem}.ui\:min-w-\[9rem\]{min-width:9rem}.ui\:min-w-full{min-width:100%}.ui\:flex-1{flex:1}.ui\:shrink{flex-shrink: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\:origin-center{transform-origin:50%}.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-4{--tw-translate-x:calc(var(--ui-spacing) * 4);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-4{--tw-translate-y:calc(var(--ui-spacing) * 4);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\:\[translate\:0_0\]{translate:0}.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-5{rotate:5deg}.ui\:rotate-45{rotate:45deg}.ui\:rotate-90{rotate:90deg}.ui\:transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.ui\:transform-gpu{transform:translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.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-magicslide{animation:magicslide var(--speed) ease-in-out infinite alternate}.ui\:animate-meteor{animation:5s linear infinite meteor}.ui\:animate-pulse{animation:var(--ui-animate-pulse)}.ui\:animate-shine{animation:2s linear infinite shine}.ui\:animate-spin{animation:var(--ui-animate-spin)}.ui\:animate-spin-around{animation:spin-around calc(var(--speed) * 2) infinite linear}.ui\:cursor-auto{cursor:auto}.ui\:cursor-col-resize{cursor:col-resize}.ui\:cursor-default{cursor:default}.ui\:cursor-default\!{cursor:default!important}.ui\:cursor-grab{cursor:grab}.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-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.ui\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.ui\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.ui\:grid-cols-\[0_1fr\]{grid-template-columns:0 1fr}.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-nowrap\!{flex-wrap:nowrap!important}.ui\:flex-wrap{flex-wrap:wrap}.ui\:place-items-center{place-items:center}.ui\:items-baseline{align-items:baseline}.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\:justify-start\!{justify-content:flex-start!important}.ui\:justify-items-center{justify-items:center}.ui\:justify-items-start{justify-items: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\:gap-8{gap:calc(var(--ui-spacing) * 8)}.ui\:gap-16{gap:calc(var(--ui-spacing) * 16)}:where(.ui\:space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--ui-spacing) * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--ui-spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}:where(.ui\:space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--ui-spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--ui-spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.ui\:space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--ui-spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--ui-spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.ui\:space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--ui-spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--ui-spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}.ui\:gap-x-6{column-gap:calc(var(--ui-spacing) * 6)}:where(.ui\:space-x-8>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--ui-spacing) * 8) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--ui-spacing) * 8) * calc(1 - var(--tw-space-x-reverse)))}.ui\:gap-y-0\.5{row-gap:calc(var(--ui-spacing) * .5)}.ui\:gap-y-2{row-gap:calc(var(--ui-spacing) * 2)}.ui\:self-center{align-self:center}.ui\:self-start{align-self:flex-start}.ui\:self-stretch{align-self:stretch}.ui\:justify-self-end{justify-self:flex-end}.ui\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.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\:overflow-y-hidden{overflow-y:hidden}.ui\:scroll-smooth{scroll-behavior:smooth}.ui\:rounded{border-radius:.25rem}.ui\:rounded-\(--radius\){border-radius:var(--radius)}.ui\:rounded-2xl{border-radius:var(--ui-radius-2xl)}.ui\:rounded-3xl{border-radius:var(--ui-radius-3xl)}.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-md\!{border-radius:calc(var(--radius) - 2px)!important}.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-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.ui\:border-dashed{--tw-border-style:dashed;border-style:dashed}.ui\:border-none{--tw-border-style:none;border-style:none}.ui\:border-solid{--tw-border-style:solid;border-style:solid}.ui\:border-\(--color-border\){border-color:var(--color-border)}.ui\:border-amber-200{border-color:var(--ui-color-amber-200)}.ui\:border-amber-400{border-color:var(--ui-color-amber-400)}.ui\:border-background\/40{border-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:border-background\/40{border-color:color-mix(in oklab, var(--background) 40%, transparent)}}.ui\:border-border,.ui\:border-border\/40{border-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.ui\:border-border\/40{border-color:color-mix(in oklab, var(--border) 40%, transparent)}}.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-border\/60{border-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.ui\:border-border\/60{border-color:color-mix(in oklab, var(--border) 60%, transparent)}}.ui\:border-emerald-300{border-color:var(--ui-color-emerald-300)}.ui\:border-emerald-400{border-color:var(--ui-color-emerald-400)}.ui\:border-emerald-500{border-color:var(--ui-color-emerald-500)}.ui\:border-input{border-color:var(--input)}.ui\:border-muted{border-color:var(--muted)}.ui\:border-muted-foreground,.ui\:border-muted-foreground\/40{border-color:var(--muted-foreground)}@supports (color:color-mix(in lab, red, red)){.ui\:border-muted-foreground\/40{border-color:color-mix(in oklab, var(--muted-foreground) 40%, transparent)}}.ui\:border-neutral-800{border-color:var(--ui-color-neutral-800)}.ui\:border-primary,.ui\:border-primary\/30{border-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:border-primary\/30{border-color:color-mix(in oklab, var(--primary) 30%, transparent)}}.ui\:border-red-500{border-color:var(--ui-color-red-500)}.ui\:border-sidebar-border{border-color:var(--sidebar-border)}.ui\:border-sky-200{border-color:var(--ui-color-sky-200)}.ui\:border-transparent{border-color:#0000}.ui\:border-white\/10{border-color:var(--ui-color-white)}@supports (color:color-mix(in lab, red, red)){.ui\:border-white\/10{border-color:color-mix(in oklab, var(--ui-color-white) 10%, transparent)}}.ui\:border-l-foreground{border-left-color:var(--foreground)}.ui\:border-l-transparent{border-left-color:#0000}.ui\:bg-\(--color-bg\){background-color:var(--color-bg)}.ui\:bg-accent{background-color:var(--accent)}.ui\:bg-amber-50,.ui\:bg-amber-50\/30{background-color:var(--ui-color-amber-50)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-amber-50\/30{background-color:color-mix(in oklab, var(--ui-color-amber-50) 30%, transparent)}}.ui\:bg-amber-600{background-color:var(--ui-color-amber-600)}.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-background\/90{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-background\/90{background-color:color-mix(in oklab, var(--background) 90%, 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-emerald-50\/20{background-color:var(--ui-color-emerald-50)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-emerald-50\/20{background-color:color-mix(in oklab, var(--ui-color-emerald-50) 20%, transparent)}}.ui\:bg-emerald-50\/30{background-color:var(--ui-color-emerald-50)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-emerald-50\/30{background-color:color-mix(in oklab, var(--ui-color-emerald-50) 30%, transparent)}}.ui\:bg-emerald-50\/40{background-color:var(--ui-color-emerald-50)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-emerald-50\/40{background-color:color-mix(in oklab, var(--ui-color-emerald-50) 40%, transparent)}}.ui\:bg-emerald-600{background-color:var(--ui-color-emerald-600)}.ui\:bg-foreground{background-color:var(--foreground)}.ui\:bg-gray-200{background-color:var(--ui-color-gray-200)}.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\/10{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-muted\/10{background-color:color-mix(in oklab, var(--muted) 10%, transparent)}}.ui\:bg-muted\/30{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-muted\/30{background-color:color-mix(in oklab, var(--muted) 30%, transparent)}}.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\/5{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-primary\/5{background-color:color-mix(in oklab, var(--primary) 5%, transparent)}}.ui\:bg-primary\/10{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-primary\/10{background-color:color-mix(in oklab, var(--primary) 10%, transparent)}}.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-primary\/60{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-primary\/60{background-color:color-mix(in oklab, var(--primary) 60%, transparent)}}.ui\:bg-red-50\/40{background-color:var(--ui-color-red-50)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-red-50\/40{background-color:color-mix(in oklab, var(--ui-color-red-50) 40%, 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-sky-50{background-color:var(--ui-color-sky-50)}.ui\:bg-slate-500{background-color:var(--ui-color-slate-500)}.ui\:bg-transparent{background-color:#0000}.ui\:bg-white{background-color:var(--ui-color-white)}.ui\:bg-yellow-500{background-color:var(--ui-color-yellow-500)}.ui\:bg-linear-to-r{--tw-gradient-position:to right}@supports (background-image:linear-gradient(in lab, red, red)){.ui\:bg-linear-to-r{--tw-gradient-position:to right in oklab}}.ui\:bg-linear-to-r{background-image:linear-gradient(var(--tw-gradient-stops))}.ui\:bg-linear-to-t{--tw-gradient-position:to top}@supports (background-image:linear-gradient(in lab, red, red)){.ui\:bg-linear-to-t{--tw-gradient-position:to top in oklab}}.ui\:bg-linear-to-t{background-image:linear-gradient(var(--tw-gradient-stops))}.ui\:bg-\[linear-gradient\(110deg\,\#000103\,45\%\,\#1e2631\,55\%\,\#000103\)\]{background-image:linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)}.ui\:from-background{--tw-gradient-from:var(--background);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.ui\:from-pink-500{--tw-gradient-from:var(--ui-color-pink-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.ui\:from-slate-500{--tw-gradient-from:var(--ui-color-slate-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.ui\:via-blue-600\/30{--tw-gradient-via:var(--ui-color-blue-600)}@supports (color:color-mix(in lab, red, red)){.ui\:via-blue-600\/30{--tw-gradient-via:color-mix(in oklab, var(--ui-color-blue-600) 30%, transparent)}}.ui\:via-blue-600\/30{--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.ui\:to-orange-500{--tw-gradient-to:var(--ui-color-orange-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.ui\:to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.ui\:bg-\[length\:200\%_100\%\]{background-size:200% 100%}.ui\:bg-clip-padding{background-clip:padding-box}.ui\:fill-amber-400{fill:var(--ui-color-amber-400)}.ui\:fill-current{fill:currentColor}.ui\:fill-none{fill:none}.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-1\!{padding:calc(var(--ui-spacing) * 1)!important}.ui\:p-2{padding:calc(var(--ui-spacing) * 2)}.ui\:p-3{padding:calc(var(--ui-spacing) * 3)}.ui\:p-3\!{padding:calc(var(--ui-spacing) * 3)!important}.ui\:p-4{padding:calc(var(--ui-spacing) * 4)}.ui\:p-6{padding:calc(var(--ui-spacing) * 6)}.ui\:p-8{padding:calc(var(--ui-spacing) * 8)}.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\:px-8{padding-inline:calc(var(--ui-spacing) * 8)}.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-5{padding-block:calc(var(--ui-spacing) * 5)}.ui\:py-6{padding-block:calc(var(--ui-spacing) * 6)}.ui\:py-10{padding-block:calc(var(--ui-spacing) * 10)}.ui\:py-12{padding-block:calc(var(--ui-spacing) * 12)}.ui\:py-16{padding-block:calc(var(--ui-spacing) * 16)}.ui\:py-20{padding-block:calc(var(--ui-spacing) * 20)}.ui\:py-24{padding-block:calc(var(--ui-spacing) * 24)}.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\:pt-3\!{padding-top:calc(var(--ui-spacing) * 3)!important}.ui\:pt-4{padding-top:calc(var(--ui-spacing) * 4)}.ui\:pr-1{padding-right:calc(var(--ui-spacing) * 1)}.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-2{padding-bottom:calc(var(--ui-spacing) * 2)}.ui\:pb-3{padding-bottom:calc(var(--ui-spacing) * 3)}.ui\:pb-4{padding-bottom:calc(var(--ui-spacing) * 4)}.ui\:pb-16{padding-bottom:calc(var(--ui-spacing) * 16)}.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\:text-right{text-align:right}.ui\:align-middle{vertical-align:middle}.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-3xl{font-size:var(--ui-text-3xl);line-height:var(--tw-leading,var(--ui-text-3xl--line-height))}.ui\:text-4xl{font-size:var(--ui-text-4xl);line-height:var(--tw-leading,var(--ui-text-4xl--line-height))}.ui\:text-5xl{font-size:var(--ui-text-5xl);line-height:var(--tw-leading,var(--ui-text-5xl--line-height))}.ui\:text-base{font-size:var(--ui-text-base);line-height:var(--tw-leading,var(--ui-text-base--line-height))}.ui\:text-base\!{font-size:var(--ui-text-base)!important;line-height:var(--tw-leading,var(--ui-text-base--line-height))!important}.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-xl{font-size:var(--ui-text-xl);line-height:var(--tw-leading,var(--ui-text-xl--line-height))}.ui\:text-xs{font-size:var(--ui-text-xs);line-height:var(--tw-leading,var(--ui-text-xs--line-height))}.ui\:text-\[10px\]{font-size:10px}.ui\:text-\[13px\]{font-size:13px}.ui\:leading-7{--tw-leading:calc(var(--ui-spacing) * 7);line-height:calc(var(--ui-spacing) * 7)}.ui\:leading-\[1\.1\]{--tw-leading:1.1;line-height:1.1}.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-relaxed{--tw-leading:var(--ui-leading-relaxed);line-height:var(--ui-leading-relaxed)}.ui\:leading-snug{--tw-leading:var(--ui-leading-snug);line-height:var(--ui-leading-snug)}.ui\:leading-tight{--tw-leading:var(--ui-leading-tight);line-height:var(--ui-leading-tight)}.ui\:font-black{--tw-font-weight:var(--ui-font-weight-black);font-weight:var(--ui-font-weight-black)}.ui\:font-bold{--tw-font-weight:var(--ui-font-weight-bold);font-weight:var(--ui-font-weight-bold)}.ui\:font-light{--tw-font-weight:var(--ui-font-weight-light);font-weight:var(--ui-font-weight-light)}.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-tighter{--tw-tracking:var(--ui-tracking-tighter);letter-spacing:var(--ui-tracking-tighter)}.ui\:tracking-wide{--tw-tracking:var(--ui-tracking-wide);letter-spacing:var(--ui-tracking-wide)}.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\:break-all{word-break:break-all}.ui\:text-ellipsis{text-overflow:ellipsis}.ui\:whitespace-nowrap{white-space:nowrap}.ui\:text-accent-foreground{color:var(--accent-foreground)}.ui\:text-amber-200{color:var(--ui-color-amber-200)}.ui\:text-amber-500{color:var(--ui-color-amber-500)}.ui\:text-amber-600{color:var(--ui-color-amber-600)}.ui\:text-amber-900{color:var(--ui-color-amber-900)}.ui\:text-background,.ui\:text-background\/60{color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:text-background\/60{color:color-mix(in oklab, var(--background) 60%, transparent)}}.ui\:text-background\/70{color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:text-background\/70{color:color-mix(in oklab, var(--background) 70%, transparent)}}.ui\:text-background\/80{color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:text-background\/80{color:color-mix(in oklab, var(--background) 80%, transparent)}}.ui\:text-card-foreground{color:var(--card-foreground)}.ui\:text-current{color:currentColor}.ui\:text-destructive{color:var(--destructive)}.ui\:text-emerald-600{color:var(--ui-color-emerald-600)}.ui\:text-foreground,.ui\:text-foreground\/70{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.ui\:text-foreground\/70{color:color-mix(in oklab, var(--foreground) 70%, transparent)}}.ui\:text-foreground\/72{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.ui\:text-foreground\/72{color:color-mix(in oklab, var(--foreground) 72%, transparent)}}.ui\:text-green-500{color:var(--ui-color-green-500)}.ui\:text-muted-foreground,.ui\:text-muted-foreground\/75{color:var(--muted-foreground)}@supports (color:color-mix(in lab, red, red)){.ui\:text-muted-foreground\/75{color:color-mix(in oklab, var(--muted-foreground) 75%, transparent)}}.ui\:text-popover-foreground{color:var(--popover-foreground)}.ui\:text-primary{color:var(--primary)}.ui\:text-primary-foreground{color:var(--primary-foreground)}.ui\:text-red-600{color:var(--ui-color-red-600)}.ui\:text-red-700{color:var(--ui-color-red-700)}.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-sky-900{color:var(--ui-color-sky-900)}.ui\:text-white{color:var(--ui-color-white)}.ui\:text-white\!{color:var(--ui-color-white)!important}.ui\:capitalize{text-transform:capitalize}.ui\:uppercase{text-transform:uppercase}.ui\:no-underline{text-decoration-line:none}.ui\:underline{text-decoration-line:underline}.ui\:underline-offset-4{text-underline-offset:4px}.ui\:opacity-0{opacity:0}.ui\:opacity-10{opacity:.1}.ui\:opacity-40{opacity:.4}.ui\:opacity-50{opacity:.5}.ui\:opacity-60{opacity:.6}.ui\:opacity-70{opacity:.7}.ui\:opacity-90{opacity:.9}.ui\:opacity-100{opacity:1}.ui\:opacity-\[0\.06\]{opacity:.06}.ui\:opacity-\[0\.08\]{opacity:.08}.ui\:opacity-\[0\.15\]{opacity:.15}.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-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);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_\#ffffff10\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,#ffffff10);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-\[inset_0_-8px_10px_\#ffffff1f\]{--tw-shadow:inset 0 -8px 10px var(--tw-shadow-color,#ffffff1f);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-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.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\:shadow-primary\/20{--tw-shadow-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:shadow-primary\/20{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--primary) 20%, transparent) var(--tw-shadow-alpha), transparent)}}.ui\:ring-accent{--tw-ring-color:var(--accent)}.ui\:ring-background{--tw-ring-color:var(--background)}.ui\:ring-border\/50{--tw-ring-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.ui\:ring-border\/50{--tw-ring-color:color-mix(in oklab, var(--border) 50%, transparent)}}.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\:blur-\[2px\]{--tw-blur:blur(2px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.ui\:brightness-200{--tw-brightness:brightness(200%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.ui\:drop-shadow-none{--tw-drop-shadow: ;filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.ui\:grayscale{--tw-grayscale:grayscale(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.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\:backdrop-blur-xl{--tw-backdrop-blur:blur(var(--ui-blur-xl));-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}.ui\:\[background\:conic-gradient\(from_calc\(270deg-\(var\(--spread\)\*0\.5\)\)\,transparent_0\,var\(--shimmer-color\)_var\(--spread\)\,transparent_var\(--spread\)\)\]{background:conic-gradient(from calc(270deg - (var(--spread) * .5)),transparent 0,var(--shimmer-color) var(--spread),transparent var(--spread))}.ui\:\[background\:var\(--bg\)\]{background:var(--bg)}.ui\:\[mask\:none\]{-webkit-mask:none;mask:none}.ui\:ring-inset{--tw-ring-inset:inset}:is(.ui\:\*\:w-full>*){width:100%}.ui\:group-focus-within\/menu-item\:opacity-100:is(:where(.ui\:group\/menu-item):focus-within *){opacity:1}@media (hover:hover){.ui\:group-hover\:scale-\[1\.02\]:is(:where(.ui\:group):hover *){scale:1.02}.ui\:group-hover\:bg-primary:is(:where(.ui\:group):hover *){background-color:var(--primary)}.ui\:group-hover\:text-primary-foreground:is(:where(.ui\:group):hover *){color:var(--primary-foreground)}.ui\:group-hover\:opacity-100:is(:where(.ui\:group):hover *){opacity:1}.ui\:group-hover\:shadow-\[inset_0_-6px_10px_\#ffffff3f\]:is(:where(.ui\:group):hover *){--tw-shadow:inset 0 -6px 10px var(--tw-shadow-color,#ffffff3f);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-hover\/menu-item\:opacity-100:is(:where(.ui\:group\/menu-item):hover *){opacity:1}}.ui\:group-active\:shadow-\[inset_0_-10px_10px_\#ffffff3f\]:is(:where(.ui\:group):active *){--tw-shadow:inset 0 -10px 10px var(--tw-shadow-color,#ffffff3f);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-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\]\:pointer-events-none:is(:where(.ui\:group)[data-collapsible=icon] *){pointer-events:none}.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}.ui\:focus-within\:border-ring:focus-within{border-color:var(--ring)}.ui\:focus-within\:ring-\[3px\]:focus-within{--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-within\:ring-ring\/50:focus-within{--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){.ui\:focus-within\:ring-ring\/50:focus-within{--tw-ring-color:color-mix(in oklab, var(--ring) 50%, transparent)}}@media (hover:hover){.ui\:hover\:-translate-y-1:hover{--tw-translate-y:calc(var(--ui-spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:hover\:cursor-pointer:hover{cursor:pointer}.ui\:hover\:border:hover{border-style:var(--tw-border-style);border-width:1px}.ui\:hover\:border-background\/60:hover{border-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:hover\:border-background\/60:hover{border-color:color-mix(in oklab, var(--background) 60%, transparent)}}.ui\:hover\:border-border:hover{border-color:var(--border)}.ui\:hover\:border-primary:hover{border-color:var(--primary)}.ui\:hover\:bg-accent:hover,.ui\:hover\:bg-accent\/25:hover{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){.ui\:hover\:bg-accent\/25:hover{background-color:color-mix(in oklab, var(--accent) 25%, transparent)}}.ui\:hover\:bg-amber-500\/10:hover{background-color:var(--ui-color-amber-500)}@supports (color:color-mix(in lab, red, red)){.ui\:hover\:bg-amber-500\/10:hover{background-color:color-mix(in oklab, var(--ui-color-amber-500) 10%, transparent)}}.ui\:hover\:bg-background\/10:hover{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:hover\:bg-background\/10:hover{background-color:color-mix(in oklab, var(--background) 10%, transparent)}}.ui\:hover\:bg-muted:hover,.ui\:hover\:bg-muted\/50:hover{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.ui\:hover\:bg-muted\/50:hover{background-color:color-mix(in oklab, var(--muted) 50%, transparent)}}.ui\:hover\:bg-primary:hover,.ui\:hover\:bg-primary\/5:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:hover\:bg-primary\/5:hover{background-color:color-mix(in oklab, var(--primary) 5%, transparent)}}.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-background:hover{color:var(--background)}.ui\:hover\:text-foreground:hover{color:var(--foreground)}.ui\:hover\:text-muted-foreground:hover{color:var(--muted-foreground)}.ui\:hover\:text-primary:hover{color:var(--primary)}.ui\:hover\:text-primary-foreground:hover{color:var(--primary-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-2xs:hover{--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\: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\:shadow-md:hover{--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\:hover\:shadow-xl:hover{--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\:hover\:shadow-primary\/5:hover{--tw-shadow-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:hover\:shadow-primary\/5:hover{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--primary) 5%, transparent) var(--tw-shadow-alpha), transparent)}}.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\:translate-y-px:active{--tw-translate-y:1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.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\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\]:has(>svg){grid-template-columns:calc(var(--spacing) * 4) 1fr}.ui\:has-\[\>svg\]\:gap-x-3:has(>svg){column-gap:calc(var(--ui-spacing) * 3)}.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\:w-48{width:calc(var(--ui-spacing) * 48)}.ui\:sm\:max-w-lg{max-width:var(--ui-container-lg)}.ui\:sm\:max-w-sm{max-width:var(--ui-container-sm)}.ui\:sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.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\:p-6{padding:calc(var(--ui-spacing) * 6)}.ui\:sm\:py-32{padding-block:calc(var(--ui-spacing) * 32)}.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\:sm\:text-5xl{font-size:var(--ui-text-5xl);line-height:var(--tw-leading,var(--ui-text-5xl--line-height))}.ui\:sm\:text-xl{font-size:var(--ui-text-xl);line-height:var(--tw-leading,var(--ui-text-xl--line-height))}.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\:w-52{width:calc(var(--ui-spacing) * 52)}.ui\:md\:w-full{width:100%}.ui\:md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.ui\:md\:flex-col{flex-direction:column}.ui\:md\:flex-row{flex-direction:row}.ui\:md\:overflow-x-visible{overflow-x:visible}.ui\:md\:overflow-y-visible{overflow-y:visible}.ui\:md\:border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.ui\:md\:border-b-0{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.ui\:md\:p-12{padding:calc(var(--ui-spacing) * 12)}.ui\:md\:px-8{padding-inline:calc(var(--ui-spacing) * 8)}.ui\:md\:pb-24{padding-bottom:calc(var(--ui-spacing) * 24)}.ui\:md\:text-6xl{font-size:var(--ui-text-6xl);line-height:var(--tw-leading,var(--ui-text-6xl--line-height))}.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}}@media (min-width:64rem){.ui\:lg\:block{display:block}.ui\:lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.ui\:lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.ui\:lg\:px-8{padding-inline:calc(var(--ui-spacing) * 8)}.ui\:lg\:text-5xl{font-size:var(--ui-text-5xl);line-height:var(--tw-leading,var(--ui-text-5xl--line-height))}.ui\:lg\:text-6xl{font-size:var(--ui-text-6xl);line-height:var(--tw-leading,var(--ui-text-6xl--line-height))}.ui\:lg\:text-7xl{font-size:var(--ui-text-7xl);line-height:var(--tw-leading,var(--ui-text-7xl--line-height))}}.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-amber-900:where(.dark,.dark *){border-color:var(--ui-color-amber-900)}.ui\:dark\:border-input:where(.dark,.dark *){border-color:var(--input)}.ui\:dark\:border-sky-900:where(.dark,.dark *){border-color:var(--ui-color-sky-900)}.ui\:dark\:border-slate-800:where(.dark,.dark *){border-color:var(--ui-color-slate-800)}.ui\:dark\:bg-amber-500:where(.dark,.dark *){background-color:var(--ui-color-amber-500)}.ui\:dark\:bg-amber-950:where(.dark,.dark *){background-color:var(--ui-color-amber-950)}.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-emerald-500:where(.dark,.dark *){background-color:var(--ui-color-emerald-500)}.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-sky-950:where(.dark,.dark *){background-color:var(--ui-color-sky-950)}.ui\:dark\:bg-slate-950:where(.dark,.dark *){background-color:var(--ui-color-slate-950)}.ui\:dark\:bg-transparent:where(.dark,.dark *){background-color:#0000}.ui\:dark\:fill-amber-400:where(.dark,.dark *){fill:var(--ui-color-amber-400)}.ui\:dark\:text-amber-50:where(.dark,.dark *){color:var(--ui-color-amber-50)}.ui\:dark\:text-amber-300:where(.dark,.dark *){color:var(--ui-color-amber-300)}.ui\:dark\:text-amber-400:where(.dark,.dark *){color:var(--ui-color-amber-400)}.ui\:dark\:text-amber-500\/40:where(.dark,.dark *){color:var(--ui-color-amber-500)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:text-amber-500\/40:where(.dark,.dark *){color:color-mix(in oklab, var(--ui-color-amber-500) 40%, transparent)}}.ui\:dark\:text-amber-950:where(.dark,.dark *){color:var(--ui-color-amber-950)}.ui\:dark\:text-emerald-950:where(.dark,.dark *){color:var(--ui-color-emerald-950)}.ui\:dark\:text-muted-foreground:where(.dark,.dark *){color:var(--muted-foreground)}.ui\:dark\:text-sky-50:where(.dark,.dark *){color:var(--ui-color-sky-50)}.ui\:dark\:text-white:where(.dark,.dark *){color:var(--ui-color-white)}@media (hover:hover){.ui\:dark\:hover\:border-input:where(.dark,.dark *):hover{border-color:var(--input)}.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\:\[\&_\.lc-area-path\]\:opacity-100 .lc-area-path{opacity:1}.ui\:\[\&_\.lc-axis-tick\]\:stroke-0 .lc-axis-tick{stroke-width:0}.ui\:\[\&_\.lc-axis-tick-label\]\:fill-muted-foreground .lc-axis-tick-label{fill:var(--muted-foreground)}.ui\:\[\&_\.lc-axis-tick-label\]\:font-normal .lc-axis-tick-label{--tw-font-weight:var(--ui-font-weight-normal);font-weight:var(--ui-font-weight-normal)}.ui\:\[\&_\.lc-grid-x-radial-circle\]\:stroke-border .lc-grid-x-radial-circle,.ui\:\[\&_\.lc-grid-x-radial-line\]\:stroke-border .lc-grid-x-radial-line,.ui\:\[\&_\.lc-grid-y-radial-circle\]\:stroke-border .lc-grid-y-radial-circle,.ui\:\[\&_\.lc-grid-y-radial-line\]\:stroke-border .lc-grid-y-radial-line{stroke:var(--border)}.ui\:\[\&_\.lc-highlight-line\]\:stroke-0 .lc-highlight-line{stroke-width:0}.ui\:\[\&_\.lc-highlight-line\]\:opacity-100 .lc-highlight-line,.ui\:\[\&_\.lc-highlight-point\]\:opacity-100 .lc-highlight-point{opacity:1}.ui\:\[\&_\.lc-labels-text\:not\(\[fill\]\)\]\:fill-foreground .lc-labels-text:not([fill]){fill:var(--foreground)}.ui\:\[\&_\.lc-layout-svg-g\]\:fill-transparent .lc-layout-svg-g{fill:#0000}.ui\:\[\&_\.lc-legend-swatch\]\:size-2\.5 .lc-legend-swatch{width:calc(var(--ui-spacing) * 2.5);height:calc(var(--ui-spacing) * 2.5)}.ui\:\[\&_\.lc-legend-swatch\]\:rounded-\[2px\] .lc-legend-swatch{border-radius:2px}.ui\:\[\&_\.lc-legend-swatch-button\]\:items-center .lc-legend-swatch-button{align-items:center}.ui\:\[\&_\.lc-legend-swatch-button\]\:gap-1\.5 .lc-legend-swatch-button{gap:calc(var(--ui-spacing) * 1.5)}.ui\:\[\&_\.lc-legend-swatch-group\]\:items-center .lc-legend-swatch-group{align-items:center}.ui\:\[\&_\.lc-legend-swatch-group\]\:gap-4 .lc-legend-swatch-group{gap:calc(var(--ui-spacing) * 4)}.ui\:\[\&_\.lc-line\]\:stroke-border\/50 .lc-line{stroke:var(--border)}@supports (color:color-mix(in lab, red, red)){.ui\:\[\&_\.lc-line\]\:stroke-border\/50 .lc-line{stroke:color-mix(in oklab, var(--border) 50%, transparent)}}.ui\:\[\&_\.lc-root-container\]\:w-full .lc-root-container{width:100%}.ui\:\[\&_\.lc-rule-x-line\:not\(\.lc-grid-x-rule\)\]\:stroke-0 .lc-rule-x-line:not(.lc-grid-x-rule),.ui\:\[\&_\.lc-rule-y-line\:not\(\.lc-grid-y-rule\)\]\:stroke-0 .lc-rule-y-line:not(.lc-grid-y-rule){stroke-width:0}.ui\:\[\&_\.lc-spline-path\]\:opacity-100 .lc-spline-path{opacity:1}.ui\:\[\&_\.lc-text\]\:text-xs .lc-text{font-size:var(--ui-text-xs);line-height:var(--tw-leading,var(--ui-text-xs--line-height))}.ui\:\[\&_\.lc-text-svg\]\:overflow-visible .lc-text-svg{overflow:visible}.ui\:\[\&_\.lc-tooltip-rects-g\]\:fill-transparent .lc-tooltip-rects-g{fill:#0000}.ui\:\[\&_\.stroke-white\]\:stroke-transparent .stroke-white{stroke:#0000}.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\:\[\&_p\]\:leading-relaxed p{--tw-leading:var(--ui-leading-relaxed);line-height:var(--ui-leading-relaxed)}.ui\:\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.ui\:\[\&_svg\]\:size-8\! svg{width:calc(var(--ui-spacing) * 8)!important;height:calc(var(--ui-spacing) * 8)!important}.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\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*=text-]){color:var(--muted-foreground)}.ui\:\[\&_svg\:not\(\[class\*\=\'ui\:size-\'\]\)\]\:size-4 svg:not([class*=ui\:size-]){width:calc(var(--ui-spacing) * 4);height:calc(var(--ui-spacing) * 4)}.ui\:\[\&_svg\:not\(\[class\*\=\'ui\:size-\'\]\)\]\:size-6 svg:not([class*=ui\:size-]){width:calc(var(--ui-spacing) * 6);height:calc(var(--ui-spacing) * 6)}.ui\:\[\&_text\]\:stroke-transparent text{stroke:#0000}.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\:\[\&\>\[data-slot\=field-label\]\]\:flex-auto>[data-slot=field-label]{flex:auto}.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\*\=\'ui\:w-\'\]\)\]\:w-fit>[data-slot=select-trigger]:not([class*=ui\: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\]\:translate-y-0\.5>svg{--tw-translate-y:calc(var(--ui-spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:\[\&\>svg\]\:text-current>svg{color:currentColor}.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\*\=\'ui\:size-\'\]\)\]\:size-3\.5>svg:not([class*=ui\:size-]){width:calc(var(--ui-spacing) * 3.5);height:calc(var(--ui-spacing) * 3.5)}.ui\:\[\&\>svg\:not\(\[class\*\=\'ui\:size-\'\]\)\]\:size-4>svg:not([class*=ui\: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-amber-600\/90:hover{background-color:var(--ui-color-amber-600)}@supports (color:color-mix(in lab, red, red)){a.ui\:\[a\&\]\:hover\:bg-amber-600\/90:hover{background-color:color-mix(in oklab, var(--ui-color-amber-600) 90%, transparent)}}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-emerald-600\/90:hover{background-color:var(--ui-color-emerald-600)}@supports (color:color-mix(in lab, red, red)){a.ui\:\[a\&\]\:hover\:bg-emerald-600\/90:hover{background-color:color-mix(in oklab, var(--ui-color-emerald-600) 90%, transparent)}}a.ui\:\[a\&\]\:hover\:bg-primary\/30:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){a.ui\:\[a\&\]\:hover\:bg-primary\/30:hover{background-color:color-mix(in oklab, var(--primary) 30%, 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\:text-primary:hover{color:var(--primary)}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}@keyframes border-beam{to{offset-distance:100%}}@keyframes meteor{0%{opacity:1;transform:rotate(215deg)translate(0)}70%{opacity:1}to{opacity:0;transform:rotate(215deg)translate(-500px)}}@keyframes shimmer-marketing{0%,90%,to{background-position:calc(-100% - var(--shimmer-width)) 0}30%,60%{background-position:calc(100% + var(--shimmer-width)) 0}}@keyframes spin-around{0%{transform:translateZ(0)rotate(0)}15%,35%{transform:translateZ(0)rotate(90deg)}65%,85%{transform:translateZ(0)rotate(270deg)}to{transform:translateZ(0)rotate(360deg)}}@keyframes magicslide{to{transform:translate(calc(100cqw - 100%))}}:root{--background:oklch(100% 0 0);--foreground:oklch(14.5% 0 0);--card:oklch(100% 0 0);--card-foreground:oklch(14.5% 0 0);--popover:oklch(100% 0 0);--popover-foreground:oklch(14.5% 0 0);--primary:oklch(48.8% .243 264.376);--primary-foreground:oklch(97% .014 254.604);--secondary:oklch(96.7% .001 286.375);--secondary-foreground:oklch(21% .006 285.885);--muted:oklch(97% 0 0);--muted-foreground:oklch(55.6% 0 0);--accent:oklch(97% 0 0);--accent-foreground:oklch(20.5% 0 0);--destructive:oklch(57.7% .245 27.325);--border:oklch(92.2% 0 0);--input:oklch(92.2% 0 0);--ring:oklch(70.8% 0 0);--chart-1:oklch(80.9% .105 251.813);--chart-2:oklch(62.3% .214 259.815);--chart-3:oklch(54.6% .245 262.881);--chart-4:oklch(48.8% .243 264.376);--chart-5:oklch(42.4% .199 265.638);--radius:.625rem;--sidebar:oklch(98.5% 0 0);--sidebar-foreground:oklch(14.5% 0 0);--sidebar-primary:oklch(54.6% .245 262.881);--sidebar-primary-foreground:oklch(97% .014 254.604);--sidebar-accent:oklch(97% 0 0);--sidebar-accent-foreground:oklch(20.5% 0 0);--sidebar-border:oklch(92.2% 0 0);--sidebar-ring:oklch(70.8% 0 0)}.dark{--background:oklch(14.5% 0 0);--foreground:oklch(98.5% 0 0);--card:oklch(20.5% 0 0);--card-foreground:oklch(98.5% 0 0);--popover:oklch(20.5% 0 0);--popover-foreground:oklch(98.5% 0 0);--primary:oklch(42.4% .199 265.638);--primary-foreground:oklch(97% .014 254.604);--secondary:oklch(27.4% .006 286.033);--secondary-foreground:oklch(98.5% 0 0);--muted:oklch(26.9% 0 0);--muted-foreground:oklch(70.8% 0 0);--accent:oklch(26.9% 0 0);--accent-foreground:oklch(98.5% 0 0);--destructive:oklch(70.4% .191 22.216);--border:oklch(100% 0 0/.1);--input:oklch(100% 0 0/.15);--ring:oklch(55.6% 0 0);--chart-1:oklch(80.9% .105 251.813);--chart-2:oklch(62.3% .214 259.815);--chart-3:oklch(54.6% .245 262.881);--chart-4:oklch(48.8% .243 264.376);--chart-5:oklch(42.4% .199 265.638);--sidebar:oklch(20.5% 0 0);--sidebar-foreground:oklch(98.5% 0 0);--sidebar-primary:oklch(62.3% .214 259.815);--sidebar-primary-foreground:oklch(97% .014 254.604);--sidebar-accent:oklch(26.9% 0 0);--sidebar-accent-foreground:oklch(98.5% 0 0);--sidebar-border:oklch(100% 0 0/.1);--sidebar-ring:oklch(55.6% 0 0)}@property --border-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes border{to{--border-angle:360deg}}@keyframes flip{to{transform:rotate(360deg)}}@keyframes kitrotate{to{transform:rotate(90deg)}}@keyframes shine{0%{background-position:0 0}to{background-position:-200% 0}}.animate-gradient-border{background:linear-gradient(45deg, white, white) padding-box, conic-gradient(from var(--border-angle), #94a3b84d 75%, var(--primary,#1d4ee2) 82%, var(--primary-foreground,white) 88%, var(--primary,#1d4ee2) 92%, #94a3b84d 100%) border-box;border:1px solid #0000;transition:--border-angle 3s ease-in-out}.animate-gradient-border:hover{animation:4s ease-in-out infinite border}.dark.animate-gradient-border{background:linear-gradient(45deg, #000, #000) padding-box, conic-gradient(from var(--border-angle), #4755697a 75%, var(--primary,#1d4ee2) 82%, var(--primary-foreground,black) 88%, var(--primary,#1d4ee2) 92%, #4755697a 100%) border-box}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-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-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@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
diff --git a/apps/dashboard/static/sticky-test.html b/apps/dashboard/static/sticky-test.html
deleted file mode 100644
index 922d4efe..00000000
--- a/apps/dashboard/static/sticky-test.html
+++ /dev/null
@@ -1,103 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <title>Sticky Test</title>
-    <link rel="stylesheet" href="/sticky-test.css" />
-    <style>
-      :root {
-        --sidebar-width: 16rem;
-        --sidebar-width-icon: 3rem;
-      }
-      html,
-      body {
-        margin: 0;
-        padding: 0;
-      }
-      .marker {
-        position: fixed;
-        right: 8px;
-        top: 8px;
-        background: red;
-        color: white;
-        padding: 4px 8px;
-        z-index: 9999;
-        font-family: sans-serif;
-        font-size: 12px;
-      }
-    </style>
-  </head>
-  <body class="ui:bg-background">
-    <div class="marker">Scroll the page. Header below should stick.</div>
-
-    <!-- Replicates Sidebar.Provider -->
-    <div
-      class="ui:group/sidebar-wrapper ui:has-data-[variant=inset]:bg-sidebar ui:flex ui:max-h-svh ui:w-full"
-    >
-      <!-- Replicates a sidebar -->
-      <div
-        style="width: var(--sidebar-width); flex-shrink: 0;"
-        class="ui:bg-sidebar"
-      >
-        <div style="padding: 16px;">Sidebar</div>
-      </div>
-
-      <!-- Replicates Sidebar.Inset -->
-      <main
-        data-slot="sidebar-inset"
-        class="ui:bg-background ui:relative ui:flex ui:w-full ui:flex-1 ui:flex-col ui:h-full ui:md:peer-data-[variant=inset]:m-2 ui:md:peer-data-[variant=inset]:ml-0 ui:md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 ui:md:peer-data-[variant=inset]:rounded-xl ui:md:peer-data-[variant=inset]:shadow-sm ui:overflow-x-hidden"
-      >
-        <!-- Replicates AppHeader -->
-        <header
-          class="border-border ui:bg-background sticky top-0 z-50 flex h-12 w-full shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear"
-          style="background: lightyellow;"
-        >
-          <div style="padding: 0 16px;">AppHeader (should stick)</div>
-        </header>
-
-        <!-- Replicates org +layout's wrapper div + children -->
-        <div class="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-4 px-4">
-          <div style="padding: 16px;">
-            <h1>Page Content</h1>
-            <div id="filler"></div>
-          </div>
-        </div>
-      </main>
-    </div>
-
-    <script>
-      const filler = document.getElementById('filler');
-      for (let i = 0; i < 200; i++) {
-        const p = document.createElement('p');
-        p.textContent = 'Filler line ' + i + ' — Scroll down to see if header sticks.';
-        filler.appendChild(p);
-      }
-      const inset = document.querySelector('main[data-slot=sidebar-inset]');
-      const header = document.querySelector('header');
-      const wrapper = inset.parentElement;
-      const debug = document.createElement('div');
-      debug.style.cssText = 'position:fixed;left:8px;bottom:8px;background:black;color:lime;font:11px monospace;padding:8px;z-index:9999;white-space:pre;max-width:600px;';
-      const cs = (el) => getComputedStyle(el);
-      function update() {
-        const text = [
-          'window.innerHeight=' + window.innerHeight + ' scrollY=' + Math.round(window.scrollY),
-          'html scrollH=' + document.documentElement.scrollHeight + ' clientH=' + document.documentElement.clientHeight + ' overflowY=' + cs(document.documentElement).overflowY,
-          'body scrollH=' + document.body.scrollHeight + ' clientH=' + document.body.clientHeight + ' overflowY=' + cs(document.body).overflowY,
-          'wrapper rect.top=' + Math.round(wrapper.getBoundingClientRect().top) + ' h=' + Math.round(wrapper.getBoundingClientRect().height) + ' overflowY=' + cs(wrapper).overflowY + ' max-h=' + cs(wrapper).maxHeight,
-          'inset rect.top=' + Math.round(inset.getBoundingClientRect().top) + ' h=' + Math.round(inset.getBoundingClientRect().height) + ' scrollH=' + inset.scrollHeight + ' clientH=' + inset.clientHeight + ' overflowX=' + cs(inset).overflowX + ' overflowY=' + cs(inset).overflowY + ' h-css=' + cs(inset).height,
-          'header rect.top=' + Math.round(header.getBoundingClientRect().top) + ' position=' + cs(header).position + ' top=' + cs(header).top
-        ].join('\n');
-        debug.textContent = text;
-        console.log('[STICKY-DEBUG]\n' + text);
-      }
-      update();
-      window.addEventListener('scroll', update, { passive: true });
-      inset.addEventListener('scroll', update, { passive: true });
-      setTimeout(update, 100);
-      setTimeout(update, 500);
-      setTimeout(update, 1500);
-      document.body.appendChild(debug);
-    </script>
-  </body>
-</html>
diff --git a/apps/dashboard/vite.config.ts b/apps/dashboard/vite.config.ts
index 903a8123..7b6bb86f 100644
--- a/apps/dashboard/vite.config.ts
+++ b/apps/dashboard/vite.config.ts
@@ -51,6 +51,10 @@ function getServer(params) {
       }
     };
   }
+
+  return {
+    allowedHosts: ['f0aa-2605-59c0-e3a-7710-8142-4b4d-2b55-6bf3.ngrok-free.app']
+  };
 }
 
 // function getSentryConfig(params: any) {
diff --git a/apps/website/src/app.css b/apps/website/src/app.css
index 737a08f7..d0352556 100644
--- a/apps/website/src/app.css
+++ b/apps/website/src/app.css
@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap');
-
 @import 'tailwindcss';
 
 @import '@cio/ui/output.css';
diff --git a/apps/website/src/app.html b/apps/website/src/app.html
index 20a536e0..59df2823 100644
--- a/apps/website/src/app.html
+++ b/apps/website/src/app.html
@@ -5,6 +5,11 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <meta name="theme-color" content="#333333" />
 
+    <!-- Fonts as <link> (not @import in app.css) so Tailwind isn’t blocked on first paint -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" />
+
     <!-- <title>ClassroomIO –&nbsp;The Open Source Learning Management System for Companies</title>
   <meta name="description" content="ClassroomIO" />
   <meta name="application-name" content="ClassroomIO" />
diff --git a/apps/website/src/lib/components/ai-section.svelte b/apps/website/src/lib/components/ai-section.svelte
index 4c98dc63..3f91fc50 100644
--- a/apps/website/src/lib/components/ai-section.svelte
+++ b/apps/website/src/lib/components/ai-section.svelte
@@ -48,8 +48,8 @@
             Let your agent do<br />the course building.
           </h2>
           <p class="mb-14 max-w-[520px] text-base leading-relaxed text-gray-500 lg:text-lg">
-            Connect your favorite coding agent to ClassroomIO via MCP. Create, update, and publish entire courses from
-            your terminal in seconds.
+            Connect your favorite AI agent to ClassroomIO via MCP. Create, update, and publish entire courses from your
+            terminal in seconds.
           </p>
         </BlurFade>
 
diff --git a/apps/website/src/lib/components/footer.svelte b/apps/website/src/lib/components/footer.svelte
index 179b0745..3caa01fd 100644
--- a/apps/website/src/lib/components/footer.svelte
+++ b/apps/website/src/lib/components/footer.svelte
@@ -55,9 +55,9 @@
           <li class="text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900 lg:text-base">
             <a href="/#ai"> AI Content </a>
           </li>
-          <li class="text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900 lg:text-base">
+          <!-- <li class="text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900 lg:text-base">
             <a href="/#deploy"> Deploy </a>
-          </li>
+          </li> -->
           <li class="text-sm leading-6 tracking-wide text-gray-600 hover:text-gray-900 lg:text-base">
             <a href="/#testimonial"> Testimonials </a>
           </li>
diff --git a/apps/website/src/lib/components/navigation.svelte b/apps/website/src/lib/components/navigation.svelte
index 9bd7ac72..39382d98 100644
--- a/apps/website/src/lib/components/navigation.svelte
+++ b/apps/website/src/lib/components/navigation.svelte
@@ -25,72 +25,134 @@
     key: string;
   };
 
-  let showDrawer = false;
-  let showSolutions = false;
+  type NavCollectionItem = {
+    key: string;
+    title: string;
+    subtitle: string;
+    href: string;
+  };
+
+  type NavItem = {
+    key: string;
+    title: string;
+    href?: string;
+    items?: NavCollectionItem[];
+  };
+
+  let expandedMobileGroup = $state<string | null>(null);
+  let showSolutions = $state(false);
   let activeLink = $derived(page.url.pathname);
-  let activeHash = $derived(page.url.hash);
 
-  $effect(() => {
-    console.log('activeLink', activeLink);
-    console.log('activeHash', activeHash);
-    console.log('isSolutionsActive', isSolutionsActive);
-  });
-
-  function handleShowDrawer() {
-    showDrawer = !showDrawer;
+  function handleMobileGroupToggle(groupKey: string) {
+    expandedMobileGroup = expandedMobileGroup === groupKey ? null : groupKey;
   }
 
   function handleShowSolutions() {
     showSolutions = !showSolutions;
+
+    if (!showSolutions) {
+      expandedMobileGroup = null;
+    }
   }
 
-  const solutions = [
+  function closeMobileMenu() {
+    showSolutions = false;
+    expandedMobileGroup = null;
+  }
+
+  const solutions: NavCollectionItem[] = [
     {
       key: 'employee-training',
       title: 'Employee Training',
-      subtitle: 'Keep your team in sync.'
+      subtitle: 'Keep your team in sync.',
+      href: '/employee-training'
     },
     {
       key: 'bootcamps',
       title: 'Bootcamps',
-      subtitle: 'Drive student satisfaction.'
+      subtitle: 'Drive student satisfaction.',
+      href: '/bootcamps'
     },
     {
       key: 'customer-education',
       title: 'Customer Education',
-      subtitle: 'Teach customers your product.'
+      subtitle: 'Teach customers your product.',
+      href: '/customer-education'
     }
   ];
 
-  const freeTools = [
+  const freeTools: NavCollectionItem[] = [
     {
       key: 'progress',
       title: 'Progress Tracker',
-      subtitle: 'Monitor learning journeys.'
+      subtitle: 'Monitor learning journeys.',
+      href: '/tools/progress'
     },
     {
       key: 'pomodoro',
       title: 'Pomodoro Timer',
-      subtitle: 'Boost focus and productivity.'
+      subtitle: 'Boost focus and productivity.',
+      href: '/tools/pomodoro'
     },
     {
       key: 'name-picker',
       title: 'Name Picker',
-      subtitle: 'Randomly select names.'
+      subtitle: 'Randomly select names.',
+      href: '/tools/name-picker'
     },
     {
       key: 'stopwatch',
       title: 'Activity Stopwatch',
-      subtitle: 'Track time accurately.'
+      subtitle: 'Track time accurately.',
+      href: '/tools/stopwatch'
     },
     {
       key: 'tic-tac-toe',
       title: 'Tic Tac Toe',
-      subtitle: 'Play the classic game.'
+      subtitle: 'Play the classic game.',
+      href: '/tools/tic-tac-toe'
+    }
+  ];
+
+  const navItems: NavItem[] = [
+    {
+      key: 'solutions',
+      title: 'Solutions',
+      href: '/',
+      items: solutions
+    },
+    {
+      key: 'free-tools',
+      title: 'Free Tools',
+      href: '/tools',
+      items: freeTools
+    },
+    {
+      key: 'blog',
+      title: 'Blog',
+      href: '/blog'
+    },
+    {
+      key: 'pricing',
+      title: 'Pricing',
+      href: '/pricing'
     }
   ];
 
   let isSolutionsActive = $derived(!!solutions.some((s) => activeLink.includes(s.key)));
+  let isFreeToolsActive = $derived(activeLink.startsWith('/tools'));
+
+  function isNavItemActive(navItem: NavItem) {
+    if (navItem.key === 'solutions') {
+      return isSolutionsActive;
+    }
+
+    if (navItem.key === 'free-tools') {
+      return isFreeToolsActive;
+    }
+
+    return navItem.href ? activeLink.startsWith(navItem.href) : false;
+  }
 </script>
 
 {#snippet list_item({ title, subtitle, href, key, class: className, ...restProps }: ListItemProps)}
@@ -147,88 +209,51 @@
     <section class="hidden lg:block">
       <NavigationMenu.Root class="p-1">
         <NavigationMenu.List class="flex w-full items-center justify-center gap-1">
-          <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',
-                isSolutionsActive && 'bg-gray-100!'
-              )}
-            >
-              <a href="/" class="no-underline"> Solutions </a>
-            </NavigationMenu.Trigger>
-            <NavigationMenu.Content>
-              <ul class="grid w-[560px] grid-cols-2 gap-2 p-2">
-                {#each solutions as solution}
-                  {@render list_item({
-                    href: `/${solution.key}`,
-                    title: solution.title,
-                    subtitle: solution.subtitle,
-                    key: solution.key
-                  })}
-                {/each}
-              </ul>
-            </NavigationMenu.Content>
-          </NavigationMenu.Item>
-
-          <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!'
-              )}
-            >
-              <a href="/tools" class="no-underline"> Free Tools </a>
-            </NavigationMenu.Trigger>
-            <NavigationMenu.Content>
-              <ul class="grid w-[560px] grid-cols-2 gap-2 p-2">
-                {#each freeTools as tool}
-                  {@render list_item({
-                    href: `/tools/${tool.key}`,
-                    title: tool.title,
-                    subtitle: tool.subtitle,
-                    key: tool.key
-                  })}
-                {/each}
-              </ul>
-            </NavigationMenu.Content>
-          </NavigationMenu.Item>
-
-          <NavigationMenu.Item>
-            <NavigationMenu.Link>
-              {#snippet child()}
-                <a
-                  href="/blog"
+          {#each navItems as navItem}
+            <NavigationMenu.Item>
+              {#if navItem.items}
+                <NavigationMenu.Trigger
                   class={cn(
-                    'cursor-pointer rounded-md px-4 py-2 text-sm font-medium text-gray-800 no-underline transition-all duration-200 hover:bg-gray-100',
-                    activeLink.startsWith('/blog') && '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',
+                    isNavItemActive(navItem) && 'bg-gray-100!'
                   )}
                 >
-                  Blog
-                </a>
-              {/snippet}
-            </NavigationMenu.Link>
-          </NavigationMenu.Item>
-
-          <NavigationMenu.Item>
-            <NavigationMenu.Link>
-              {#snippet child()}
-                <a
-                  href="/pricing"
-                  class={cn(
-                    'cursor-pointer rounded-md px-4 py-2 text-sm font-medium text-gray-800 no-underline transition-all duration-200 hover:bg-gray-100',
-                    activeLink.startsWith('/pricing') && 'bg-gray-100'
-                  )}
-                >
-                  Pricing
-                </a>
-              {/snippet}
-            </NavigationMenu.Link>
-          </NavigationMenu.Item>
+                  <a href={navItem.href} class="no-underline">{navItem.title}</a>
+                </NavigationMenu.Trigger>
+                <NavigationMenu.Content>
+                  <ul class="grid w-[560px] grid-cols-2 gap-2 p-2">
+                    {#each navItem.items as item}
+                      {@render list_item({
+                        href: item.href,
+                        title: item.title,
+                        subtitle: item.subtitle,
+                        key: item.key
+                      })}
+                    {/each}
+                  </ul>
+                </NavigationMenu.Content>
+              {:else}
+                <NavigationMenu.Link>
+                  {#snippet child()}
+                    <a
+                      href={navItem.href}
+                      class={cn(
+                        'cursor-pointer rounded-md px-4 py-2 text-sm font-medium text-gray-800 no-underline transition-all duration-200 hover:bg-gray-100',
+                        isNavItemActive(navItem) && 'bg-gray-100'
+                      )}
+                    >
+                      {navItem.title}
+                    </a>
+                  {/snippet}
+                </NavigationMenu.Link>
+              {/if}
+            </NavigationMenu.Item>
+          {/each}
         </NavigationMenu.List>
       </NavigationMenu.Root>
     </section>
 
-    <div class="hidden flex-row items-center justify-between gap-3 md:hidden lg:flex">
+    <div class="hidden flex-row items-center justify-between gap-3 lg:flex">
       <a href="/discord" target="_blank" class="flex items-center transition-opacity duration-200 hover:opacity-80">
         <img loading="lazy" alt="discord logo" src="/discord-blue.png" class="h-5 w-6 cursor-pointer" />
       </a>
@@ -259,7 +284,7 @@
       </a>
     </div>
 
-    <button type="button" aria-label="Hamburger Menu" class="block md:block lg:hidden" onclick={handleShowSolutions}>
+    <button type="button" aria-label="Hamburger Menu" class="shrink-0 lg:hidden" onclick={handleShowSolutions}>
       <Menu size={24} />
     </button>
 
@@ -277,78 +302,48 @@
         </div>
         <nav>
           <ul class="flex w-full flex-col items-center justify-between lg:flex-row">
-            <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',
-                  isSolutionsActive && 'bg-gray-100'
-                )}
-                onclick={handleShowDrawer}
-              >
-                Our Superpowers <ChevronDown />
-              </button>
-              {#if showDrawer}
-                <div in:fly={{ y: -20, duration: 700 }} out:fly={{ y: 20, duration: 400 }}>
-                  {#each solutions as solution}
-                    <a
-                      href="/{solution.key}"
-                      onclick={() => {
-                        handleShowSolutions();
-                      }}
-                    >
-                      <p
-                        class="rounded-lg py-2.5 pl-5 text-xs font-normal text-gray-700 transition-colors duration-200 hover:bg-gray-100"
-                      >
-                        {solution.title}
-                      </p>
-                    </a>
-                  {/each}
-                </div>
-              {/if}
-            </li>
-            <a
-              class="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"
-              onclick={handleShowSolutions}
-              href="/tools"
-            >
-              <li>Free Tools</li>
-            </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',
-                activeLink.startsWith('/morefeatures') && 'bg-gray-100'
-              )}
-              onclick={() => {
-                handleShowSolutions();
-              }}
-              href="/blog"
-            >
-              <li>Blog</li>
-            </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',
-                activeLink.startsWith('/pricing') && 'bg-gray-100'
-              )}
-              onclick={() => {
-                handleShowSolutions();
-              }}
-              href="/pricing"
-            >
-              <li>Pricing</li>
-            </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',
-                activeHash.includes('morefeatures') && 'bg-gray-100'
-              )}
-              onclick={() => {
-                handleShowSolutions();
-              }}
-              href="/#morefeatures"
-            >
-              <li>More features</li>
-            </a>
+            {#each navItems as navItem}
+              <li class="w-full cursor-pointer text-sm font-semibold text-gray-800 md:text-lg">
+                {#if navItem.items}
+                  <button
+                    class={cn(
+                      'flex w-full items-center justify-between rounded-lg px-4 py-3 transition-all duration-200 hover:bg-gray-100',
+                      isNavItemActive(navItem) && 'bg-gray-100'
+                    )}
+                    onclick={() => {
+                      handleMobileGroupToggle(navItem.key);
+                    }}
+                  >
+                    {navItem.title}
+                    <ChevronDown />
+                  </button>
+                  {#if expandedMobileGroup === navItem.key}
+                    <div in:fly={{ y: -20, duration: 700 }} out:fly={{ y: 20, duration: 400 }}>
+                      {#each navItem.items as item}
+                        <a href={item.href} onclick={closeMobileMenu}>
+                          <p
+                            class="rounded-lg py-2.5 pl-5 text-xs font-normal text-gray-700 transition-colors duration-200 hover:bg-gray-100"
+                          >
+                            {item.title}
+                          </p>
+                        </a>
+                      {/each}
+                    </div>
+                  {/if}
+                {:else}
+                  <a
+                    class={cn(
+                      'block w-full rounded-md px-4 py-3 text-sm font-semibold text-gray-800 transition-all duration-200 hover:bg-gray-100 md:text-lg',
+                      isNavItemActive(navItem) && 'bg-gray-100'
+                    )}
+                    onclick={closeMobileMenu}
+                    href={navItem.href}
+                  >
+                    {navItem.title}
+                  </a>
+                {/if}
+              </li>
+            {/each}
           </ul>
         </nav>
         <div class="mt-5 flex flex-col items-start gap-y-2 border-t pt-5">
diff --git a/apps/website/src/lib/components/page-header.svelte b/apps/website/src/lib/components/page-header.svelte
index f3368273..2db1c7e6 100644
--- a/apps/website/src/lib/components/page-header.svelte
+++ b/apps/website/src/lib/components/page-header.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { DotPattern } from '@cio/ui/custom/animation/dot-pattern';
+  import { DotField } from '@cio/ui/custom/animation/dot-field';
 
   /**
    * @typedef {Object} Props
@@ -12,7 +12,17 @@
 </script>
 
 <header class="relative w-full overflow-hidden border-b border-slate-100 pt-32 pb-16 lg:min-h-[20rem]">
-  <DotPattern fillColor="rgb(2 51 189 / 0.25)" class="absolute inset-0 h-full w-full" />
+  <DotField
+    dotRadius={1.5}
+    dotSpacing={14}
+    cursorRadius={420}
+    bulgeOnly={true}
+    bulgeStrength={56}
+    glowRadius={140}
+    sparkle={false}
+    waveAmplitude={0}
+    class="pointer-events-none absolute inset-0 h-full w-full"
+  />
   <div class="relative z-10 {className}">
     {@render children?.()}
   </div>
diff --git a/apps/website/src/routes/(marketing)/bootcamps/+page.svelte b/apps/website/src/routes/(marketing)/bootcamps/+page.svelte
index 17a95f4f..a1735f21 100644
--- a/apps/website/src/routes/(marketing)/bootcamps/+page.svelte
+++ b/apps/website/src/routes/(marketing)/bootcamps/+page.svelte
@@ -78,7 +78,7 @@
   <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="px-4! py-2!" variant="outline">Solution for Bootcamps</Badge>
+    <Badge class="bg-white px-4! py-2!" variant="outline">Solution for Bootcamps</Badge>
 
     <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">
@@ -99,7 +99,7 @@
     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="flex w-full flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
-      <Badge class="px-4! py-2!" variant="outline">Our benefits</Badge>
+      <Badge class="bg-white px-4! py-2!" variant="outline">Our benefits</Badge>
 
       <div
         class="flex max-w-7xl flex-col items-start justify-start gap-y-4 lg:w-full lg:items-center lg:justify-center"
@@ -144,7 +144,7 @@
     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="flex w-full max-w-7xl flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
-      <Badge class="px-4! py-2!" variant="outline">Explore our features</Badge>
+      <Badge class="bg-white px-4! py-2!" variant="outline">Explore our features</Badge>
 
       <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>
diff --git a/apps/website/src/routes/(marketing)/customer-education/+page.svelte b/apps/website/src/routes/(marketing)/customer-education/+page.svelte
index 2fc35fce..23385666 100644
--- a/apps/website/src/routes/(marketing)/customer-education/+page.svelte
+++ b/apps/website/src/routes/(marketing)/customer-education/+page.svelte
@@ -60,7 +60,7 @@
   <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="px-4! py-2!" variant="outline">Solution for Customer Education</Badge>
+    <Badge class="bg-white px-4! py-2!" variant="outline">Solution for Customer Education</Badge>
 
     <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">
@@ -81,7 +81,7 @@
     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="flex w-full flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
-      <Badge class="px-4! py-1!" variant="outline">Our benefits</Badge>
+      <Badge class="bg-white px-4! py-1!" variant="outline">Our benefits</Badge>
       <div
         class="flex max-w-7xl flex-col items-start justify-start gap-y-4 lg:w-full lg:items-center lg:justify-center"
       >
diff --git a/apps/website/src/routes/(marketing)/employee-training/+page.svelte b/apps/website/src/routes/(marketing)/employee-training/+page.svelte
index 5e6db39d..1885f277 100644
--- a/apps/website/src/routes/(marketing)/employee-training/+page.svelte
+++ b/apps/website/src/routes/(marketing)/employee-training/+page.svelte
@@ -58,7 +58,7 @@
   <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="px-4! py-2!" variant="outline">Invest in your people</Badge>
+    <Badge class="bg-white px-4! py-2!" variant="outline">Invest in your people</Badge>
 
     <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">
@@ -79,7 +79,7 @@
     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="flex w-full flex-col items-start justify-start gap-y-4 lg:w-[35%]">
-      <Badge variant="outline">Why it matters</Badge>
+      <Badge class="bg-white" variant="outline">Why it matters</Badge>
 
       <div class="flex flex-col items-start justify-start gap-y-4 md:w-full">
         <h1 class="text-3xl">Great teams are built, not hired</h1>
@@ -116,7 +116,7 @@
     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="flex w-full flex-col items-start justify-start gap-y-4 lg:items-center lg:justify-center">
-      <Badge class="px-4! py-2!" variant="outline">How it works</Badge>
+      <Badge class="bg-white px-4! py-2!" variant="outline">How it works</Badge>
 
       <div
         class="flex max-w-7xl flex-col items-start justify-start gap-y-4 lg:w-full lg:items-center lg:justify-center"
diff --git a/apps/website/src/routes/pricing/+page.svelte b/apps/website/src/routes/pricing/+page.svelte
index 9df89d64..b17ca069 100644
--- a/apps/website/src/routes/pricing/+page.svelte
+++ b/apps/website/src/routes/pricing/+page.svelte
@@ -69,6 +69,9 @@
         {/each}
       </div>
     </div>
+    <p class="mt-6 text-center text-sm text-slate-500">
+      Need more AI credits? Purchase additional token packs at $5 per 2M tokens from your dashboard.
+    </p>
   </div>
 </section>
 
diff --git a/package.json b/package.json
index c7c2d53e..ae592a94 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,8 @@
     "postinstall": "test -d .git && lefthook install || true",
     "release": "standard-version",
     "db:reset": "pnpm --filter @cio/db db:reset",
-    "dashboard:dev": "pnpm dev --filter=@cio/dashboard --filter=@cio/ui --filter=@cio/question-types --filter=@cio/db --filter=@cio/utils",
-    "api:dev": "pnpm dev --filter=@cio/api --filter=@cio/email --filter=@cio/db --filter=@cio/utils",
+    "dashboard:dev": "pnpm dev --filter=@cio/dashboard --filter=@cio/ui",
+    "api:dev": "pnpm dev --filter=@cio/api",
     "docs:dev": "pnpm --filter @cio/docs dev",
     "docs:build": "pnpm --filter @cio/docs build",
     "docs:types:check": "pnpm --filter @cio/docs types:check",
@@ -49,6 +49,10 @@
     ],
     "patchedDependencies": {
       "layerchart@2.0.0-next.27": "patches/layerchart@2.0.0-next.27.patch"
+    },
+    "overrides": {
+      "zod": "^4.1.8",
+      "miniflare>zod": "3.22.3"
     }
   },
   "packageManager": "pnpm@10.19.0+sha512.c9fc7236e92adf5c8af42fd5bf1612df99c2ceb62f27047032f4720b33f8eacdde311865e91c411f2774f618d82f320808ecb51718bfa82c060c4ba7c76a32b8"
diff --git a/packages/ai-assistant/package.json b/packages/ai-assistant/package.json
index f3b84c29..bd28051b 100644
--- a/packages/ai-assistant/package.json
+++ b/packages/ai-assistant/package.json
@@ -33,7 +33,9 @@
   "dependencies": {
     "@ai-sdk/anthropic": "^3.0.69",
     "@ai-sdk/google": "^3.0.0",
+    "@ai-sdk/moonshotai": "^2.0.21",
     "@ai-sdk/openai": "^3.0.52",
+    "@cio/question-types": "workspace:*",
     "ai": "^6.0.158",
     "zod": "^3.24.4"
   },
diff --git a/packages/ai-assistant/src/prompt/teacher.ts b/packages/ai-assistant/src/prompt/teacher.ts
index 9ed37403..9bbf75dd 100644
--- a/packages/ai-assistant/src/prompt/teacher.ts
+++ b/packages/ai-assistant/src/prompt/teacher.ts
@@ -1,5 +1,8 @@
+import { QUESTION_TYPE_REGISTRY } from '@cio/question-types';
 import type { AgentContext } from '../types';
 
+const QUESTION_TYPE_LIST = QUESTION_TYPE_REGISTRY.map((t) => `- ${t.id} = ${t.typename} — ${t.label}`).join('\n');
+
 export function buildTeacherSystemPrompt(context: AgentContext): string {
   const contextLines: string[] = [];
 
@@ -43,7 +46,13 @@ export function buildTeacherSystemPrompt(context: AgentContext): string {
 
 ## Your Capabilities
 
-You have access to specific tools listed below. Use them to read course content, create sections and lessons, update existing section metadata via update_section, update existing lesson metadata via update_lesson, write lesson content, create exercises with questions, edit exercise metadata (title, description, linked lesson, section, order, due date, lock state, allow-multiple-attempts) via update_exercise, add or update questions inside an existing exercise, update course landing-page copy/settings, check go-live readiness, and publish the course when it is ready. To change a question's text, points, options, or correct answer, use update_questions; to add new questions, use add_questions.
+You have access to specific tools listed below. Use them to read course content, create sections and lessons, update existing course-outline section metadata via update_section, update existing lesson metadata via update_lesson, write lesson content, create exercises with questions, create exercise question blocks via create_exercise_section, edit exercise-level metadata (title, description, linked lesson, course section placement, order, due date, lock state, allow-multiple-attempts) via update_exercise, edit each existing in-exercise question block heading and intro via update_exercise_section (ids from get_exercise_details sections array — not course section ids), add or update questions inside an existing exercise (use add_questions with exerciseSectionId from that sections array when the exercise groups questions into blocks), update course landing-page copy/settings, check go-live readiness, and publish the course when it is ready. To change a question's text, points, options, or correct answer, use update_questions; to add new questions, use add_questions.
+
+## Question Types
+
+These are the only question type IDs supported by this platform. Always use these IDs when creating or updating questions — never infer type IDs from exercise data, which only shows which types happen to be in use:
+
+${QUESTION_TYPE_LIST}
 
 ## Plan Mode vs Agent Mode
 
@@ -68,6 +77,13 @@ You have access to specific tools listed below. Use them to read course content,
 4. Report progress as you go
 5. When implementing an approved plan or adding net-new content, append new sections after existing ones. Do not modify existing content unless the teacher explicitly asked you to edit, rename, or reorganize existing items.
 
+**Resuming / Continuing Plan Execution** — When the teacher sends a continuation signal (e.g. "continue", "keep going", "proceed", "resume") after a previous step-limit pause:
+1. Call get_course_structure FIRST before creating anything.
+2. Compare the existing sections, lessons, and exercises against the approved plan — match by title.
+3. Skip every item that already exists. Do NOT recreate a section, lesson, or exercise that is already present in the course.
+4. If a section already exists but some of its items (lessons or exercises) are missing, resume inside that existing section — do NOT create a duplicate section.
+5. Begin creating only from the first item in the plan that is not yet present, then continue through the rest of the plan in order.
+
 **Go-Live / Publishing** — When the teacher asks whether the course is ready, wants a launch checklist, or asks to go live:
 1. Use check_course_go_live_readiness first to inspect required course details, landing-page fields, lessons, and exercises
 2. If blockers are returned, explain the blockers clearly and use available tools to fix only the items the teacher asks you to fix
@@ -93,26 +109,27 @@ If a lesson has \`hasExercise: true\`, the linked exercise takes the next order
 
 - If the teacher asks to change a section name or order, first call get_course_structure, then use update_section with the existing section ID. Do NOT create a replacement section.
 - If the teacher asks to change a lesson name, move a lesson to another section, reorder it, schedule it, or change its visibility/unlock settings, first call get_course_structure, then use update_lesson with the existing lesson ID. Do NOT create a replacement lesson.
-- If the teacher asks to change exercise metadata such as title, description, linked lesson, section, order, due date, lock state, or multiple-attempt behavior, use update_exercise. Do NOT create a replacement exercise.
+- If the teacher asks to change exercise metadata such as title, description, linked lesson, course section placement, order, due date, lock state, or multiple-attempt behavior, use update_exercise. Do NOT create a replacement exercise.
+- If the teacher asks to create a new **block of questions inside an exercise**, use create_exercise_section. If they ask to rename or add intro text for an existing block, call get_exercise_details first, then use update_exercise_section with the exercise id and the section id from the sections array. Do NOT use update_section for that — update_section only changes course outline sections.
 - Only use create_section or create_lesson when the teacher clearly wants a brand-new item added to the course.
 
 ## Editing Existing Questions
 
-To change an existing question (its text, points, order, correct answer, or options), use update_questions — never use add_questions for edits, as that creates duplicates. Where the correct answer lives depends on the question type:
+To change an existing question (its text, points, order, in-exercise section, correct answer, or options), use update_questions — never use add_questions for edits, as that creates duplicates. Use \`exerciseSectionId\` on update_questions to move a question to another block from get_exercise_details \`sections[].id\`, or null to unassign. When adding questions with add_questions, pass exerciseSectionId from get_exercise_details \`sections[].id\` if the exercise has multiple in-exercise blocks so new items land in the right group. Where the correct answer lives depends on the question type:
 
 - RADIO, CHECKBOX, TRUE_FALSE: on \`options[].isCorrect\`. Include an option's \`id\` to edit it; omit \`id\` to add a new option.
 - NUMERIC: on \`settings.correctValue\` (a number). Optional \`settings.tolerance\`. Do NOT add options to NUMERIC questions.
 - STAR: on \`settings.correctValue\` (1..max stars).
 - WORD_BANK: on \`settings.correctAnswers\` (array, one per \`___\` blank) and \`settings.template\`.
 
-Always call get_exercise_details first to read current ids and settings before patching.
+Always call get_exercise_details first to read current question ids, in-exercise section ids (for update_exercise_section), and settings before patching.
 
 ## IDs and Tool Arguments
 
 - UUIDs and database IDs must be copied EXACTLY from the most recent tool output that produced them. Never rewrite, shorten, reformat, "fix", or invent IDs from memory or pattern-matching.
 - NEVER pass placeholder strings like \`"string"\`, \`"uuid"\`, \`"<id>"\`, or example IDs from this prompt as tool arguments. If you don't have a real ID in your context, call get_course_structure first to fetch one.
 - Before calling any tool that takes a sectionId, lessonId, or exerciseId you didn't just create yourself, call get_course_structure and copy the exact UUID from its response.
-- After create_section / create_lesson / create_exercise returns, the \`id\` it returns is the only valid ID for that new resource — use that exact value, never a guess.
+- After create_section / create_lesson / create_exercise / create_exercise_section returns, the \`id\` it returns is the only valid ID for that new resource — use that exact value, never a guess.
 - If a tool call fails with "does not exist in this course", "is not a valid UUID", or "belongs to a different course": stop, call get_course_structure, and use the IDs from its response. Do NOT retry with another guessed ID.
 - Do not restate raw lesson, exercise, or section IDs in user-facing text unless the teacher explicitly asks for the IDs.
 - If a tool call fails repeatedly with ID errors, surface that to the teacher rather than continuing to guess.
diff --git a/packages/ai-assistant/src/providers/index.ts b/packages/ai-assistant/src/providers/index.ts
index dea7a621..38cd9951 100644
--- a/packages/ai-assistant/src/providers/index.ts
+++ b/packages/ai-assistant/src/providers/index.ts
@@ -1,18 +1,21 @@
 import { createOpenAI } from '@ai-sdk/openai';
 import { createAnthropic } from '@ai-sdk/anthropic';
 import { createGoogleGenerativeAI } from '@ai-sdk/google';
+import { createMoonshotAI } from '@ai-sdk/moonshotai';
 import { AIProvider, type AIProviderConfig } from '../types';
 
 const DEFAULT_MODELS: Record<AIProvider, string> = {
-  [AIProvider.OPENAI]: 'gpt-4o',
+  [AIProvider.OPENAI]: 'gpt-5.4-mini',
   [AIProvider.ANTHROPIC]: 'claude-sonnet-4-20250514',
-  [AIProvider.GOOGLE]: 'gemini-2.5-flash'
+  [AIProvider.GOOGLE]: 'gemini-2.5-flash',
+  [AIProvider.MOONSHOT]: 'kimi-k2.6'
 };
 
 const PROVIDER_API_KEY_ENV: Record<AIProvider, string> = {
   [AIProvider.OPENAI]: 'OPENAI_API_KEY',
   [AIProvider.ANTHROPIC]: 'ANTHROPIC_API_KEY',
-  [AIProvider.GOOGLE]: 'GOOGLE_API_KEY'
+  [AIProvider.GOOGLE]: 'GOOGLE_API_KEY',
+  [AIProvider.MOONSHOT]: 'MOONSHOT_API_KEY'
 };
 
 /**
@@ -35,6 +38,10 @@ export function createModel(config: AIProviderConfig) {
       const google = createGoogleGenerativeAI({ apiKey: config.apiKey });
       return google(modelName);
     }
+    case AIProvider.MOONSHOT: {
+      const moonshot = createMoonshotAI({ apiKey: config.apiKey });
+      return moonshot(modelName);
+    }
     default:
       throw new Error(`Unsupported AI provider: ${config.provider}`);
   }
diff --git a/packages/ai-assistant/src/tools/index.ts b/packages/ai-assistant/src/tools/index.ts
index e6f08df1..b3bccaca 100644
--- a/packages/ai-assistant/src/tools/index.ts
+++ b/packages/ai-assistant/src/tools/index.ts
@@ -8,7 +8,9 @@ import {
   updateLessonSchema,
   updateLessonContentSchema,
   createExerciseSchema,
+  createExerciseSectionSchema,
   updateExerciseSchema,
+  updateExerciseSectionSchema,
   addQuestionsSchema,
   updateQuestionsSchema,
   updateCourseLandingPageSchema,
@@ -37,7 +39,9 @@ const teacherTools: ToolRegistry = {
   [ToolName.UPDATE_LESSON]: updateLessonSchema,
   [ToolName.UPDATE_LESSON_CONTENT]: updateLessonContentSchema,
   [ToolName.CREATE_EXERCISE]: createExerciseSchema,
+  [ToolName.CREATE_EXERCISE_SECTION]: createExerciseSectionSchema,
   [ToolName.UPDATE_EXERCISE]: updateExerciseSchema,
+  [ToolName.UPDATE_EXERCISE_SECTION]: updateExerciseSectionSchema,
   [ToolName.ADD_QUESTIONS]: addQuestionsSchema,
   [ToolName.UPDATE_QUESTIONS]: updateQuestionsSchema,
   [ToolName.UPDATE_COURSE_LANDING_PAGE]: updateCourseLandingPageSchema,
@@ -76,7 +80,9 @@ export {
   updateLessonSchema,
   updateLessonContentSchema,
   createExerciseSchema,
+  createExerciseSectionSchema,
   updateExerciseSchema,
+  updateExerciseSectionSchema,
   addQuestionsSchema,
   updateQuestionsSchema,
   updateCourseLandingPageSchema,
diff --git a/packages/ai-assistant/src/tools/teacher.ts b/packages/ai-assistant/src/tools/teacher.ts
index f8407182..ad28ffec 100644
--- a/packages/ai-assistant/src/tools/teacher.ts
+++ b/packages/ai-assistant/src/tools/teacher.ts
@@ -1,6 +1,9 @@
 import { z } from 'zod';
+import { QUESTION_TYPE_REGISTRY } from '@cio/question-types';
 import { CoursePlanSchema } from '../types';
 
+const QUESTION_TYPE_ID_DESCRIPTION = QUESTION_TYPE_REGISTRY.map((t) => `${t.id}=${t.typename} (${t.label})`).join(', ');
+
 /**
  * Mutation tool schemas available only to teachers.
  */
@@ -15,6 +18,12 @@ export const createSectionSchema = {
   })
 };
 
+const exerciseSectionAfterBehaviorSchema = z.discriminatedUnion('action', [
+  z.object({ action: z.literal('continue') }),
+  z.object({ action: z.literal('submit') }),
+  z.object({ action: z.literal('go_to_section'), exerciseSectionId: z.string().uuid() })
+]);
+
 export const updateSectionSchema = {
   description:
     'Update metadata for an existing section in the course. Use this to rename a section or change its display order instead of creating a new section.',
@@ -117,9 +126,9 @@ export const createExerciseSchema = {
             .number()
             .int()
             .min(1)
-            .max(14)
+            .max(QUESTION_TYPE_REGISTRY.length)
             .default(1)
-            .describe('Question type: 1=RADIO (single answer), 2=CHECKBOX (multiple), 4=TRUE_FALSE, 3=TEXTAREA'),
+            .describe(`Question type ID. Supported types: ${QUESTION_TYPE_ID_DESCRIPTION}`),
           points: z.number().min(0).default(1).describe('Points for this question'),
           order: z.number().int().min(0).describe('Display order'),
           options: z
@@ -141,6 +150,36 @@ export const createExerciseSchema = {
   })
 };
 
+export const createExerciseSectionSchema = {
+  description:
+    'Create a new section inside an existing exercise. Use this to add a new question block before adding questions into it.',
+  parameters: z.object({
+    courseId: z.string().describe('The course ID'),
+    exerciseId: z.string().describe('The exercise that will contain this section'),
+    title: z.string().min(1).describe('Section heading shown above questions in this block'),
+    description: z.string().optional().describe('Optional intro HTML for this block'),
+    order: z.number().int().min(0).describe('Display order within the exercise (0-based)'),
+    colorTheme: z.enum(['blue', 'green', 'amber', 'rose', 'violet', 'slate']).optional(),
+    afterBehavior: exerciseSectionAfterBehaviorSchema.optional()
+  })
+};
+
+export const updateExerciseSectionSchema = {
+  description:
+    'Update the title and/or description of one question block inside an exercise (from get_exercise_details sections). Not the same as update_section (course outline).',
+  parameters: z
+    .object({
+      courseId: z.string().describe('The course ID'),
+      exerciseId: z.string().describe('The exercise containing this block'),
+      exerciseSectionId: z.string().describe('Section id from get_exercise_details sections[].id'),
+      title: z.string().min(1).optional().describe('Heading shown above questions in this block'),
+      description: z.string().optional().describe('Optional intro HTML for this block; empty string clears it')
+    })
+    .refine((data) => data.title !== undefined || data.description !== undefined, {
+      message: 'Provide at least title or description'
+    })
+};
+
 export const updateExerciseSchema = {
   description:
     "Update an existing exercise's metadata (title, description, linked lesson, section, order, due date, lock state, allow-multiple-attempts). Use this to edit the exercise itself — not its questions. To change questions, use update_questions; to add questions, use add_questions.",
@@ -181,10 +220,17 @@ export const updateExerciseSchema = {
 
 export const addQuestionsSchema = {
   description:
-    'Add questions to an existing exercise. Use this when the exercise already exists and you want to add more questions.',
+    'Add questions to an existing exercise. Use this when the exercise already exists and you want to add more questions. When get_exercise_details returns a non-empty sections array, pass exerciseSectionId so new questions are placed in the right in-exercise block (same ids as update_exercise_section).',
   parameters: z.object({
     courseId: z.string().describe('The course ID'),
     exerciseId: z.string().describe('The existing exercise ID'),
+    exerciseSectionId: z
+      .string()
+      .uuid()
+      .optional()
+      .describe(
+        'In-exercise section id from get_exercise_details `sections[].id` (not a course outline section id). Use when the exercise has question blocks/sections; omit only when questions are not grouped into sections.'
+      ),
     questions: z.array(
       z.object({
         question: z.string().min(1).describe('The question text'),
@@ -192,9 +238,9 @@ export const addQuestionsSchema = {
           .number()
           .int()
           .min(1)
-          .max(14)
+          .max(QUESTION_TYPE_REGISTRY.length)
           .default(1)
-          .describe('Question type: 1=RADIO, 2=CHECKBOX, 4=TRUE_FALSE, 3=TEXTAREA'),
+          .describe(`Question type ID. Supported types: ${QUESTION_TYPE_ID_DESCRIPTION}`),
         points: z.number().min(0).default(1).describe('Points for this question'),
         order: z.number().int().min(0).describe('Display order'),
         options: z.array(
@@ -210,7 +256,7 @@ export const addQuestionsSchema = {
 
 export const updateQuestionsSchema = {
   description:
-    'Update existing questions in an exercise. Pass only the fields you want to change; `id` identifies the question. For NUMERIC the correct answer is `settings.correctValue` (a number), not an option — do NOT add options to NUMERIC questions. For STAR use `settings.correctValue` (1..max). For WORD_BANK use `settings.correctAnswers` and `settings.template`. RADIO/CHECKBOX/TRUE_FALSE use `options[].isCorrect`: include an option `id` to edit it, omit `id` to add a new one. `settings` is shallow-merged with the existing settings. Omit `options` entirely to leave existing options unchanged — if you pass an options array, any existing option not listed in it will be removed.',
+    'Update existing questions in an exercise. Pass only the fields you want to change; `id` identifies the question. Optional `exerciseSectionId` (from get_exercise_details sections) moves the question to another in-exercise block; use null to clear section assignment. For NUMERIC the correct answer is `settings.correctValue` (a number), not an option — do NOT add options to NUMERIC questions. For STAR use `settings.correctValue` (1..max). For WORD_BANK use `settings.correctAnswers` and `settings.template`. RADIO/CHECKBOX/TRUE_FALSE use `options[].isCorrect`: include an option `id` to edit it, omit `id` to add a new one. `settings` is shallow-merged with the existing settings. Omit `options` entirely to leave existing options unchanged — if you pass an options array, any existing option not listed in it will be removed.',
   parameters: z.object({
     courseId: z.string().describe('The course ID'),
     exerciseId: z.string().describe('The existing exercise ID'),
@@ -218,9 +264,23 @@ export const updateQuestionsSchema = {
       z.object({
         id: z.number().int().describe('Existing question id. Required.'),
         question: z.string().min(1).optional().describe('New question text. Omit to keep unchanged.'),
-        questionTypeId: z.number().int().min(1).max(14).optional(),
+        questionTypeId: z
+          .number()
+          .int()
+          .min(1)
+          .max(QUESTION_TYPE_REGISTRY.length)
+          .optional()
+          .describe(`Question type ID. Supported types: ${QUESTION_TYPE_ID_DESCRIPTION}`),
         points: z.number().min(0).optional(),
         order: z.number().int().min(0).optional(),
+        exerciseSectionId: z
+          .string()
+          .uuid()
+          .nullable()
+          .optional()
+          .describe(
+            'In-exercise section id from get_exercise_details (not course outline). Omit to leave unchanged; pass null to unassign from a section.'
+          ),
         settings: z
           .record(z.string(), z.unknown())
           .optional()
diff --git a/packages/ai-assistant/src/types.ts b/packages/ai-assistant/src/types.ts
index e9cdc5f4..a0ce5d7e 100644
--- a/packages/ai-assistant/src/types.ts
+++ b/packages/ai-assistant/src/types.ts
@@ -14,7 +14,8 @@ export type AgentRole = (typeof AgentRole)[keyof typeof AgentRole];
 export const AIProvider = {
   OPENAI: 'openai',
   ANTHROPIC: 'anthropic',
-  GOOGLE: 'google'
+  GOOGLE: 'google',
+  MOONSHOT: 'moonshot'
 } as const;
 
 export type AIProvider = (typeof AIProvider)[keyof typeof AIProvider];
@@ -92,7 +93,9 @@ export const ToolName = {
   UPDATE_LESSON: 'update_lesson',
   UPDATE_LESSON_CONTENT: 'update_lesson_content',
   CREATE_EXERCISE: 'create_exercise',
+  CREATE_EXERCISE_SECTION: 'create_exercise_section',
   UPDATE_EXERCISE: 'update_exercise',
+  UPDATE_EXERCISE_SECTION: 'update_exercise_section',
   ADD_QUESTIONS: 'add_questions',
   UPDATE_QUESTIONS: 'update_questions',
   UPDATE_COURSE_LANDING_PAGE: 'update_course_landing_page',
diff --git a/packages/db/src/migrations/0004_ai_chat_document.sql b/packages/db/src/migrations/0004_ai_chat_document.sql
deleted file mode 100644
index 2a8a10ff..00000000
--- a/packages/db/src/migrations/0004_ai_chat_document.sql
+++ /dev/null
@@ -1,21 +0,0 @@
-CREATE TABLE IF NOT EXISTS "ai_chat_document" (
-	"id" text PRIMARY KEY NOT NULL,
-	"conversation_id" uuid NOT NULL,
-	"course_id" uuid NOT NULL,
-	"user_id" uuid NOT NULL,
-	"asset_id" uuid,
-	"file_name" text NOT NULL,
-	"mime_type" text NOT NULL,
-	"text" text NOT NULL,
-	"word_count" integer DEFAULT 0 NOT NULL,
-	"page_count" integer,
-	"created_at" timestamp with time zone DEFAULT now() NOT NULL
-);
---> statement-breakpoint
-DO $$ BEGIN
- ALTER TABLE "ai_chat_document" ADD CONSTRAINT "ai_chat_document_conversation_id_fkey" FOREIGN KEY ("conversation_id") REFERENCES "ai_chat_conversation"("id") ON DELETE CASCADE ON UPDATE NO ACTION;
-EXCEPTION
- WHEN duplicate_object THEN null;
-END $$;
---> statement-breakpoint
-CREATE INDEX IF NOT EXISTS "idx_ai_chat_document_conversation" ON "ai_chat_document" ("conversation_id");
diff --git a/packages/db/src/queries/agent/chat-document.ts b/packages/db/src/queries/agent/chat-document.ts
index 3d8be84f..05c12048 100644
--- a/packages/db/src/queries/agent/chat-document.ts
+++ b/packages/db/src/queries/agent/chat-document.ts
@@ -53,12 +53,12 @@ export async function createChatDocument(record: {
   }
 }
 
-export async function getChatDocument(documentId: string): Promise<ChatDocumentRecord | null> {
+export async function getChatDocument(documentId: string, userId: string): Promise<ChatDocumentRecord | null> {
   try {
     const [row] = await db
       .select()
       .from(schema.aiChatDocument)
-      .where(eq(schema.aiChatDocument.id, documentId))
+      .where(and(eq(schema.aiChatDocument.id, documentId), eq(schema.aiChatDocument.userId, userId)))
       .limit(1);
 
     return row ?? null;
diff --git a/packages/db/src/queries/agent/chat-resource.ts b/packages/db/src/queries/agent/chat-resource.ts
new file mode 100644
index 00000000..9402cbcb
--- /dev/null
+++ b/packages/db/src/queries/agent/chat-resource.ts
@@ -0,0 +1,54 @@
+import * as schema from '@db/schema';
+import { eq } from 'drizzle-orm';
+
+import { db } from '@db/drizzle';
+
+export type ResourceCourseBinding = {
+  courseId: string | null;
+  title: string | null;
+};
+
+export async function getLessonCourseBinding(lessonId: string): Promise<ResourceCourseBinding | undefined> {
+  try {
+    const [row] = await db
+      .select({ courseId: schema.lesson.courseId, title: schema.lesson.title })
+      .from(schema.lesson)
+      .where(eq(schema.lesson.id, lessonId))
+      .limit(1);
+
+    return row;
+  } catch (error) {
+    console.error('getLessonCourseBinding error:', error);
+    throw new Error(`Failed to load lesson: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+}
+
+export async function getExerciseCourseBinding(exerciseId: string): Promise<ResourceCourseBinding | undefined> {
+  try {
+    const [row] = await db
+      .select({ courseId: schema.exercise.courseId, title: schema.exercise.title })
+      .from(schema.exercise)
+      .where(eq(schema.exercise.id, exerciseId))
+      .limit(1);
+
+    return row;
+  } catch (error) {
+    console.error('getExerciseCourseBinding error:', error);
+    throw new Error(`Failed to load exercise: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+}
+
+export async function getCourseSectionBinding(sectionId: string): Promise<ResourceCourseBinding | undefined> {
+  try {
+    const [row] = await db
+      .select({ courseId: schema.courseSection.courseId, title: schema.courseSection.title })
+      .from(schema.courseSection)
+      .where(eq(schema.courseSection.id, sectionId))
+      .limit(1);
+
+    return row;
+  } catch (error) {
+    console.error('getCourseSectionBinding error:', error);
+    throw new Error(`Failed to load section: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+}
diff --git a/packages/db/src/queries/agent/credit-purchase.ts b/packages/db/src/queries/agent/credit-purchase.ts
new file mode 100644
index 00000000..2f1d685a
--- /dev/null
+++ b/packages/db/src/queries/agent/credit-purchase.ts
@@ -0,0 +1,136 @@
+import { desc, eq, sql } from 'drizzle-orm';
+
+import * as schema from '@db/schema';
+import { db } from '@db/drizzle';
+
+export interface CreditPurchaseInput {
+  orgId: string;
+  triggeredBy?: string | null;
+  provider?: 'polar';
+  providerOrderId: string;
+  tokens: number;
+  quantity: number;
+  unitPriceCents: number;
+  currency: string;
+  payload?: Record<string, unknown>;
+}
+
+export async function findCreditPurchaseByOrderId(providerOrderId: string) {
+  try {
+    const [row] = await db
+      .select()
+      .from(schema.aiCreditPurchase)
+      .where(eq(schema.aiCreditPurchase.providerOrderId, providerOrderId))
+      .limit(1);
+
+    return row ?? null;
+  } catch (error) {
+    console.error('findCreditPurchaseByOrderId error:', error);
+    throw new Error('Failed to find credit purchase');
+  }
+}
+
+export async function createCreditPurchase(input: CreditPurchaseInput) {
+  try {
+    const [row] = await db
+      .insert(schema.aiCreditPurchase)
+      .values({
+        orgId: input.orgId,
+        triggeredBy: input.triggeredBy ?? null,
+        provider: input.provider ?? 'polar',
+        providerOrderId: input.providerOrderId,
+        tokens: input.tokens,
+        quantity: input.quantity,
+        unitPriceCents: input.unitPriceCents,
+        currency: input.currency,
+        payload: input.payload ?? null
+      })
+      .returning();
+
+    return row;
+  } catch (error) {
+    console.error('createCreditPurchase error:', error);
+    throw new Error('Failed to create credit purchase');
+  }
+}
+
+export async function summarizePurchases(orgId: string) {
+  try {
+    const [row] = await db
+      .select({
+        totalPurchasedTokens: sql<number>`COALESCE(SUM(${schema.aiCreditPurchase.tokens}), 0)`,
+        totalSpentCents: sql<number>`COALESCE(SUM(${schema.aiCreditPurchase.unitPriceCents} * ${schema.aiCreditPurchase.quantity}), 0)`,
+        lastPurchaseAt: sql<string | null>`MAX(${schema.aiCreditPurchase.createdAt})`
+      })
+      .from(schema.aiCreditPurchase)
+      .where(eq(schema.aiCreditPurchase.orgId, orgId));
+
+    return {
+      totalPurchasedTokens: Number(row?.totalPurchasedTokens ?? 0),
+      totalSpentCents: Number(row?.totalSpentCents ?? 0),
+      lastPurchaseAt: row?.lastPurchaseAt ?? null
+    };
+  } catch (error) {
+    console.error('summarizePurchases error:', error);
+    throw new Error('Failed to summarize purchases');
+  }
+}
+
+export async function listCreditPurchases(orgId: string, limit = 50) {
+  try {
+    return db
+      .select()
+      .from(schema.aiCreditPurchase)
+      .where(eq(schema.aiCreditPurchase.orgId, orgId))
+      .orderBy(desc(schema.aiCreditPurchase.createdAt))
+      .limit(limit);
+  } catch (error) {
+    console.error('listCreditPurchases error:', error);
+    throw new Error('Failed to list credit purchases');
+  }
+}
+
+/** Inserts purchase row and applies balance in one transaction. Caller checks idempotency first. */
+export async function insertCreditPurchaseAndApplyBalance(input: CreditPurchaseInput) {
+  try {
+    return await db.transaction(async (tx) => {
+      const [purchase] = await tx
+        .insert(schema.aiCreditPurchase)
+        .values({
+          orgId: input.orgId,
+          triggeredBy: input.triggeredBy ?? null,
+          provider: input.provider ?? 'polar',
+          providerOrderId: input.providerOrderId,
+          tokens: input.tokens,
+          quantity: input.quantity,
+          unitPriceCents: input.unitPriceCents,
+          currency: input.currency,
+          payload: input.payload ?? null
+        })
+        .returning();
+
+      const [existingBalance] = await tx
+        .select({ id: schema.aiCreditBalance.id })
+        .from(schema.aiCreditBalance)
+        .where(eq(schema.aiCreditBalance.orgId, input.orgId))
+        .limit(1);
+
+      if (existingBalance) {
+        await tx
+          .update(schema.aiCreditBalance)
+          .set({
+            balance: sql`${schema.aiCreditBalance.balance} + ${input.tokens}`,
+            updatedAt: new Date().toISOString()
+          })
+          .where(eq(schema.aiCreditBalance.orgId, input.orgId));
+      } else {
+        await tx.insert(schema.aiCreditBalance).values({ orgId: input.orgId, balance: input.tokens });
+      }
+
+      return purchase;
+    });
+  } catch (error) {
+    console.error('insertCreditPurchaseAndApplyBalance error:', error);
+    throw new Error('Failed to record credit purchase');
+  }
+}
diff --git a/packages/db/src/queries/agent/index.ts b/packages/db/src/queries/agent/index.ts
index d5e2581c..1135db74 100644
--- a/packages/db/src/queries/agent/index.ts
+++ b/packages/db/src/queries/agent/index.ts
@@ -1,2 +1,6 @@
 export * from './chat-history';
 export * from './chat-document';
+export * from './chat-resource';
+export * from './credit-purchase';
+export * from './token-usage';
+export * from './usage-aggregations';
diff --git a/packages/db/src/queries/agent/token-usage.ts b/packages/db/src/queries/agent/token-usage.ts
new file mode 100644
index 00000000..ddb2a3b7
--- /dev/null
+++ b/packages/db/src/queries/agent/token-usage.ts
@@ -0,0 +1,144 @@
+import { and, eq, gte, sql } from 'drizzle-orm';
+
+import * as schema from '@db/schema';
+import { db } from '@db/drizzle';
+
+export async function getMonthlyTokenUsage(orgId: string, since: Date): Promise<number> {
+  try {
+    const [row] = await db
+      .select({
+        total: sql<number>`COALESCE(SUM(COALESCE(${schema.aiTokenUsage.costUnits}, ${schema.aiTokenUsage.promptTokens} + ${schema.aiTokenUsage.completionTokens})), 0)`
+      })
+      .from(schema.aiTokenUsage)
+      .where(and(eq(schema.aiTokenUsage.orgId, orgId), gte(schema.aiTokenUsage.createdAt, since.toISOString())));
+
+    return Number(row?.total ?? 0);
+  } catch (error) {
+    console.error('getMonthlyTokenUsage error:', error);
+    throw new Error('Failed to get monthly token usage');
+  }
+}
+
+export async function getDailyTokenUsageHistory(
+  orgId: string,
+  since: Date
+): Promise<{ date: string; tokens: number }[]> {
+  try {
+    const rows = await db
+      .select({
+        date: sql<string>`DATE(${schema.aiTokenUsage.createdAt})`,
+        tokens: sql<number>`SUM(COALESCE(${schema.aiTokenUsage.costUnits}, ${schema.aiTokenUsage.promptTokens} + ${schema.aiTokenUsage.completionTokens}))`
+      })
+      .from(schema.aiTokenUsage)
+      .where(and(eq(schema.aiTokenUsage.orgId, orgId), gte(schema.aiTokenUsage.createdAt, since.toISOString())))
+      .groupBy(sql`DATE(${schema.aiTokenUsage.createdAt})`)
+      .orderBy(sql`DATE(${schema.aiTokenUsage.createdAt})`);
+
+    return rows.map((row) => ({ date: String(row.date), tokens: Number(row.tokens) }));
+  } catch (error) {
+    console.error('getDailyTokenUsageHistory error:', error);
+    throw new Error('Failed to get daily token usage history');
+  }
+}
+
+export async function getOrgCreditBalance(orgId: string): Promise<number> {
+  try {
+    const [row] = await db
+      .select({ balance: schema.aiCreditBalance.balance })
+      .from(schema.aiCreditBalance)
+      .where(eq(schema.aiCreditBalance.orgId, orgId))
+      .limit(1);
+
+    return row?.balance ?? 0;
+  } catch (error) {
+    console.error('getOrgCreditBalance error:', error);
+    throw new Error('Failed to get org credit balance');
+  }
+}
+
+export interface InsertTokenUsageParams {
+  orgId: string;
+  userId: string;
+  courseId: string;
+  promptTokens: number;
+  completionTokens: number;
+  costUnits: number;
+  model: string;
+  planAllowance: number;
+  since: Date;
+}
+
+export async function insertTokenUsageAndDrainCredits(params: InsertTokenUsageParams): Promise<void> {
+  try {
+    await db.transaction(async (tx) => {
+      await tx.insert(schema.aiTokenUsage).values({
+        orgId: params.orgId,
+        userId: params.userId,
+        courseId: params.courseId,
+        promptTokens: params.promptTokens,
+        completionTokens: params.completionTokens,
+        costUnits: params.costUnits,
+        model: params.model
+      });
+
+      const [usageRow] = await tx
+        .select({
+          total: sql<number>`COALESCE(SUM(COALESCE(${schema.aiTokenUsage.costUnits}, ${schema.aiTokenUsage.promptTokens} + ${schema.aiTokenUsage.completionTokens})), 0)`
+        })
+        .from(schema.aiTokenUsage)
+        .where(
+          and(
+            eq(schema.aiTokenUsage.orgId, params.orgId),
+            gte(schema.aiTokenUsage.createdAt, params.since.toISOString())
+          )
+        );
+
+      const monthlyUsageAfter = Number(usageRow?.total ?? 0);
+      const monthlyUsageBefore = monthlyUsageAfter - params.costUnits;
+      const allowanceRemainingBefore = Math.max(0, params.planAllowance - monthlyUsageBefore);
+      const overflow = Math.max(0, params.costUnits - allowanceRemainingBefore);
+
+      if (overflow <= 0) {
+        return;
+      }
+
+      await tx
+        .update(schema.aiCreditBalance)
+        .set({
+          balance: sql`GREATEST(0, ${schema.aiCreditBalance.balance} - ${overflow})`,
+          updatedAt: new Date().toISOString()
+        })
+        .where(eq(schema.aiCreditBalance.orgId, params.orgId));
+    });
+  } catch (error) {
+    console.error('insertTokenUsageAndDrainCredits error:', error);
+    throw new Error('Failed to record token usage');
+  }
+}
+
+export async function upsertCreditBalance(orgId: string, amount: number): Promise<number> {
+  try {
+    const existing = await db
+      .select({ id: schema.aiCreditBalance.id, balance: schema.aiCreditBalance.balance })
+      .from(schema.aiCreditBalance)
+      .where(eq(schema.aiCreditBalance.orgId, orgId))
+      .limit(1);
+
+    if (existing.length > 0) {
+      const newBalance = existing[0].balance + amount;
+      await db
+        .update(schema.aiCreditBalance)
+        .set({ balance: newBalance, updatedAt: new Date().toISOString() })
+        .where(eq(schema.aiCreditBalance.orgId, orgId));
+
+      return newBalance;
+    }
+
+    await db.insert(schema.aiCreditBalance).values({ orgId, balance: amount });
+
+    return amount;
+  } catch (error) {
+    console.error('upsertCreditBalance error:', error);
+    throw new Error('Failed to upsert credit balance');
+  }
+}
diff --git a/packages/db/src/queries/agent/usage-aggregations.ts b/packages/db/src/queries/agent/usage-aggregations.ts
new file mode 100644
index 00000000..f369b3ed
--- /dev/null
+++ b/packages/db/src/queries/agent/usage-aggregations.ts
@@ -0,0 +1,68 @@
+import { and, desc, eq, gte, sql } from 'drizzle-orm';
+
+import * as schema from '@db/schema';
+import { db } from '@db/drizzle';
+
+export interface UsageLeaderboardRow {
+  userId: string;
+  fullname: string | null;
+  email: string | null;
+  avatarUrl: string | null;
+  tokens: number;
+  favoriteModel: string | null;
+  requests: number;
+}
+
+/**
+ * Aggregate ai_token_usage by user for an org since a given date.
+ * Joins to profile for display fields. Returns rows sorted by tokens DESC.
+ */
+export async function aggregateTokenUsageByUser(orgId: string, since: Date): Promise<UsageLeaderboardRow[]> {
+  try {
+    const rows = await db
+      .select({
+        userId: schema.aiTokenUsage.userId,
+        fullname: schema.profile.fullname,
+        email: schema.profile.email,
+        avatarUrl: schema.profile.avatarUrl,
+        tokens: sql<number>`COALESCE(SUM(COALESCE(${schema.aiTokenUsage.costUnits}, ${schema.aiTokenUsage.promptTokens} + ${schema.aiTokenUsage.completionTokens})), 0)`,
+        favoriteModel: sql<string | null>`MODE() WITHIN GROUP (ORDER BY ${schema.aiTokenUsage.model})`,
+        requests: sql<number>`COUNT(*)`
+      })
+      .from(schema.aiTokenUsage)
+      .leftJoin(schema.profile, eq(schema.profile.id, schema.aiTokenUsage.userId))
+      .where(and(eq(schema.aiTokenUsage.orgId, orgId), gte(schema.aiTokenUsage.createdAt, since.toISOString())))
+      .groupBy(schema.aiTokenUsage.userId, schema.profile.fullname, schema.profile.email, schema.profile.avatarUrl)
+      .orderBy(
+        desc(
+          sql`SUM(COALESCE(${schema.aiTokenUsage.costUnits}, ${schema.aiTokenUsage.promptTokens} + ${schema.aiTokenUsage.completionTokens}))`
+        )
+      );
+
+    return rows.map((row) => ({
+      ...row,
+      tokens: Number(row.tokens),
+      requests: Number(row.requests)
+    }));
+  } catch (error) {
+    console.error('aggregateTokenUsageByUser error:', error);
+    throw new Error('Failed to aggregate token usage by user');
+  }
+}
+
+/**
+ * Total request count for an org since a given date — used for the chart header.
+ */
+export async function countRequests(orgId: string, since: Date): Promise<number> {
+  try {
+    const [row] = await db
+      .select({ count: sql<number>`COUNT(*)` })
+      .from(schema.aiTokenUsage)
+      .where(and(eq(schema.aiTokenUsage.orgId, orgId), gte(schema.aiTokenUsage.createdAt, since.toISOString())));
+
+    return Number(row?.count ?? 0);
+  } catch (error) {
+    console.error('countRequests error:', error);
+    throw new Error('Failed to count requests');
+  }
+}
diff --git a/packages/db/src/queries/course/content-batch.ts b/packages/db/src/queries/course/content-batch.ts
new file mode 100644
index 00000000..81a9badb
--- /dev/null
+++ b/packages/db/src/queries/course/content-batch.ts
@@ -0,0 +1,186 @@
+import type { TCourseContentReorder, TCourseContentUpdate } from '@cio/utils/validation/course';
+import { ContentType, ErrorCodes } from '@cio/utils/constants';
+
+import * as schema from '@db/schema';
+import { inArray, sql } from 'drizzle-orm';
+import type { DbOrTxClient } from '@db/drizzle';
+
+import { OperationalQueryError } from '../query-errors';
+
+const { courseSection, lesson, exercise } = schema;
+
+function buildUpdatePayload(item: TCourseContentUpdate['items'][number]) {
+  const payload: Record<string, unknown> = {};
+
+  if (item.isUnlocked !== undefined) {
+    payload.isUnlocked = item.isUnlocked;
+  }
+
+  if (item.order !== undefined) {
+    payload.order = item.order;
+  }
+
+  if (item.sectionId !== undefined) {
+    payload.sectionId = item.sectionId;
+  }
+
+  return payload;
+}
+
+export async function applyCourseContentBulkUpdates(
+  tx: DbOrTxClient,
+  items: TCourseContentUpdate['items']
+): Promise<{ updatedItems: number; updatedLessons: number; updatedExercises: number }> {
+  const updates = items
+    .map((item) => ({
+      item,
+      payload: buildUpdatePayload(item)
+    }))
+    .filter(({ payload }) => Object.keys(payload).length > 0);
+
+  if (updates.length === 0) {
+    return {
+      updatedItems: 0,
+      updatedLessons: 0,
+      updatedExercises: 0
+    };
+  }
+
+  const updatedAt = new Date().toISOString();
+
+  const lessonUpdates = updates.filter(({ item }) => item.type === ContentType.Lesson);
+  const exerciseUpdates = updates.filter(({ item }) => item.type === ContentType.Exercise);
+
+  if (lessonUpdates.length > 0) {
+    const lessonIds = lessonUpdates.map(({ item }) => item.id);
+    const lessonOrderUpdates = lessonUpdates
+      .filter(({ payload }) => payload.order !== undefined)
+      .map(({ item, payload }) => ({ id: item.id, value: payload.order }));
+    const lessonSectionUpdates = lessonUpdates
+      .filter(({ payload }) => payload.sectionId !== undefined)
+      .map(({ item, payload }) => ({ id: item.id, value: payload.sectionId }));
+    const lessonUnlockUpdates = lessonUpdates
+      .filter(({ payload }) => payload.isUnlocked !== undefined)
+      .map(({ item, payload }) => ({ id: item.id, value: payload.isUnlocked }));
+
+    const lessonSet: Record<string, unknown> = {
+      updatedAt
+    };
+
+    if (lessonOrderUpdates.length > 0) {
+      lessonSet.order = sql`case ${lesson.id} ${sql.join(
+        lessonOrderUpdates.map((update) => sql`when ${update.id} then ${update.value}`),
+        sql` `
+      )} else ${lesson.order} end`;
+    }
+
+    if (lessonSectionUpdates.length > 0) {
+      lessonSet.sectionId = sql`case ${lesson.id} ${sql.join(
+        lessonSectionUpdates.map((update) => sql`when ${update.id} then ${update.value}`),
+        sql` `
+      )} else ${lesson.sectionId} end`;
+    }
+
+    if (lessonUnlockUpdates.length > 0) {
+      lessonSet.isUnlocked = sql`case ${lesson.id} ${sql.join(
+        lessonUnlockUpdates.map((update) => sql`when ${update.id} then ${update.value}`),
+        sql` `
+      )} else ${lesson.isUnlocked} end`;
+    }
+
+    const updatedLessons = await tx
+      .update(lesson)
+      .set(lessonSet)
+      .where(inArray(lesson.id, lessonIds))
+      .returning({ id: lesson.id });
+
+    if (updatedLessons.length !== lessonIds.length) {
+      throw new OperationalQueryError('Lesson not found', ErrorCodes.LESSON_NOT_FOUND, 404);
+    }
+  }
+
+  if (exerciseUpdates.length > 0) {
+    const exerciseIds = exerciseUpdates.map(({ item }) => item.id);
+    const exerciseOrderUpdates = exerciseUpdates
+      .filter(({ payload }) => payload.order !== undefined)
+      .map(({ item, payload }) => ({ id: item.id, value: payload.order }));
+    const exerciseSectionUpdates = exerciseUpdates
+      .filter(({ payload }) => payload.sectionId !== undefined)
+      .map(({ item, payload }) => ({ id: item.id, value: payload.sectionId }));
+    const exerciseUnlockUpdates = exerciseUpdates
+      .filter(({ payload }) => payload.isUnlocked !== undefined)
+      .map(({ item, payload }) => ({ id: item.id, value: payload.isUnlocked }));
+
+    const exerciseSet: Record<string, unknown> = {
+      updatedAt
+    };
+
+    if (exerciseOrderUpdates.length > 0) {
+      exerciseSet.order = sql`case ${exercise.id} ${sql.join(
+        exerciseOrderUpdates.map((update) => sql`when ${update.id} then ${update.value}`),
+        sql` `
+      )} else ${exercise.order} end`;
+    }
+
+    if (exerciseSectionUpdates.length > 0) {
+      exerciseSet.sectionId = sql`case ${exercise.id} ${sql.join(
+        exerciseSectionUpdates.map((update) => sql`when ${update.id} then ${update.value}`),
+        sql` `
+      )} else ${exercise.sectionId} end`;
+    }
+
+    if (exerciseUnlockUpdates.length > 0) {
+      exerciseSet.isUnlocked = sql`case ${exercise.id} ${sql.join(
+        exerciseUnlockUpdates.map((update) => sql`when ${update.id} then ${update.value}`),
+        sql` `
+      )} else ${exercise.isUnlocked} end`;
+    }
+
+    const updatedExercises = await tx
+      .update(exercise)
+      .set(exerciseSet)
+      .where(inArray(exercise.id, exerciseIds))
+      .returning({ id: exercise.id });
+
+    if (updatedExercises.length !== exerciseIds.length) {
+      throw new OperationalQueryError('Exercise not found', ErrorCodes.EXERCISE_NOT_FOUND, 404);
+    }
+  }
+
+  return {
+    updatedItems: updates.length,
+    updatedLessons: lessonUpdates.length,
+    updatedExercises: exerciseUpdates.length
+  };
+}
+
+export async function applyCourseSectionOrderUpdates(
+  tx: DbOrTxClient,
+  sections: NonNullable<TCourseContentReorder['sections']>
+): Promise<number> {
+  if (sections.length === 0) {
+    return 0;
+  }
+
+  const sectionIds = sections.map((section) => section.id);
+  const updatedAt = new Date().toISOString();
+  const sectionSet: Record<string, unknown> = {
+    updatedAt,
+    order: sql`case ${courseSection.id} ${sql.join(
+      sections.map((section) => sql`when ${section.id} then ${section.order}`),
+      sql` `
+    )} else ${courseSection.order} end`
+  };
+
+  const updatedSections = await tx
+    .update(courseSection)
+    .set(sectionSet)
+    .where(inArray(courseSection.id, sectionIds))
+    .returning({ id: courseSection.id });
+
+  if (updatedSections.length !== sectionIds.length) {
+    throw new OperationalQueryError('Course section not found', ErrorCodes.COURSE_SECTION_NOT_FOUND, 404);
+  }
+
+  return sections.length;
+}
diff --git a/packages/db/src/queries/course/course.ts b/packages/db/src/queries/course/course.ts
index ca76a2c4..d4c01eaa 100644
--- a/packages/db/src/queries/course/course.ts
+++ b/packages/db/src/queries/course/course.ts
@@ -1287,3 +1287,51 @@ export async function getOrgCourseGroups(orgId: string, courseIds: string[]) {
     throw new Error(`Failed to get org course groups: ${error instanceof Error ? error.message : 'Unknown error'}`);
   }
 }
+
+/** True when any course row exists with this slug. */
+export async function isCourseSlugTaken(slug: string): Promise<boolean> {
+  try {
+    const rows = await db
+      .select({ id: schema.course.id })
+      .from(schema.course)
+      .where(eq(schema.course.slug, slug))
+      .limit(1);
+
+    return rows.length > 0;
+  } catch (error) {
+    console.error('isCourseSlugTaken error:', error);
+    throw new Error(`Failed to check course slug: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+}
+
+/** Course `type` only; `undefined` when the course does not exist. */
+export async function getCourseTypeById(courseId: string): Promise<string | undefined> {
+  try {
+    const [row] = await db
+      .select({ type: schema.course.type })
+      .from(schema.course)
+      .where(eq(schema.course.id, courseId))
+      .limit(1);
+
+    return row?.type ?? undefined;
+  } catch (error) {
+    console.error('getCourseTypeById error:', error);
+    throw new Error(`Failed to get course type: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+}
+
+/** Updates slug + updatedAt; returns the new slug row or null if the course was missing. */
+export async function updateCourseSlug(courseId: string, slug: string): Promise<{ slug: string | null } | null> {
+  try {
+    const [updated] = await db
+      .update(schema.course)
+      .set({ slug, updatedAt: new Date().toISOString() })
+      .where(eq(schema.course.id, courseId))
+      .returning({ slug: schema.course.slug });
+
+    return updated ?? null;
+  } catch (error) {
+    console.error('updateCourseSlug error:', error);
+    throw new Error(`Failed to update course slug: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+}
diff --git a/packages/db/src/queries/course/index.ts b/packages/db/src/queries/course/index.ts
index f053f623..9ef361d7 100644
--- a/packages/db/src/queries/course/index.ts
+++ b/packages/db/src/queries/course/index.ts
@@ -1,6 +1,7 @@
 export * from './course';
-export * from './course';
 export * from './compliance';
 export * from './content';
+export * from './content-batch';
 export * from './people';
 export * from './invite';
+export * from './public-course';
diff --git a/packages/db/src/queries/course/invite.ts b/packages/db/src/queries/course/invite.ts
index c6eb5f3c..b5007048 100644
--- a/packages/db/src/queries/course/invite.ts
+++ b/packages/db/src/queries/course/invite.ts
@@ -2,7 +2,7 @@ import type { TCourseInvite, TCourseInviteAudit, TNewCourseInvite, TNewCourseInv
 import * as schema from '@db/schema';
 
 import { and, desc, eq, gte, sql } from 'drizzle-orm';
-import { db } from '@db/drizzle';
+import { db, type DbOrTxClient } from '@db/drizzle';
 
 export async function createCourseInvite(values: TNewCourseInvite): Promise<TCourseInvite> {
   try {
@@ -333,3 +333,99 @@ export async function getCourseInviteByTokenHash(tokenHash: string): Promise<TCo
     );
   }
 }
+
+export type TCourseInviteAcceptBundle = {
+  invite: TCourseInvite;
+  course: {
+    id: string;
+    title: string;
+    status: string;
+    isPublished: boolean;
+    metadata: Record<string, unknown> | null;
+    groupId: string;
+  };
+  organization: {
+    id: string;
+    name: string;
+    siteName: string;
+  };
+};
+
+export async function selectCourseInviteAcceptBundleByTokenHash(
+  dbClient: DbOrTxClient,
+  tokenHash: string
+): Promise<TCourseInviteAcceptBundle | null> {
+  try {
+    const [row] = await dbClient
+      .select({
+        invite: schema.courseInvite,
+        course: {
+          id: schema.course.id,
+          title: schema.course.title,
+          status: schema.course.status,
+          isPublished: schema.course.isPublished,
+          metadata: schema.course.metadata,
+          groupId: schema.group.id
+        },
+        organization: {
+          id: schema.organization.id,
+          name: schema.organization.name,
+          siteName: schema.organization.siteName
+        }
+      })
+      .from(schema.courseInvite)
+      .innerJoin(schema.course, eq(schema.courseInvite.courseId, schema.course.id))
+      .innerJoin(schema.group, eq(schema.course.groupId, schema.group.id))
+      .innerJoin(schema.organization, eq(schema.group.organizationId, schema.organization.id))
+      .where(eq(schema.courseInvite.tokenHash, tokenHash))
+      .limit(1);
+
+    if (!row) {
+      return null;
+    }
+
+    return {
+      ...row,
+      course: {
+        ...row.course,
+        isPublished: !!row.course.isPublished
+      },
+      organization: {
+        ...row.organization,
+        siteName: row.organization.siteName ?? ''
+      }
+    };
+  } catch (error) {
+    console.error('selectCourseInviteAcceptBundleByTokenHash error:', error);
+    throw new Error(
+      `Failed to load course invite for accept: ${error instanceof Error ? error.message : 'Unknown error'}`
+    );
+  }
+}
+
+export async function optimisticIncrementCourseInviteUsedCount(
+  dbClient: DbOrTxClient,
+  inviteId: string,
+  priorUsedCount: number
+): Promise<{ id: string } | undefined> {
+  try {
+    const [consumeInvite] = await dbClient
+      .update(schema.courseInvite)
+      .set({
+        usedCount: priorUsedCount + 1,
+        updatedAt: new Date().toISOString(),
+        lastUsedAt: new Date().toISOString()
+      })
+      .where(and(eq(schema.courseInvite.id, inviteId), eq(schema.courseInvite.usedCount, priorUsedCount)))
+      .returning({
+        id: schema.courseInvite.id
+      });
+
+    return consumeInvite;
+  } catch (error) {
+    console.error('optimisticIncrementCourseInviteUsedCount error:', error);
+    throw new Error(
+      `Failed to update course invite usage: ${error instanceof Error ? error.message : 'Unknown error'}`
+    );
+  }
+}
diff --git a/packages/db/src/queries/course/public-course.ts b/packages/db/src/queries/course/public-course.ts
new file mode 100644
index 00000000..7bfd12aa
--- /dev/null
+++ b/packages/db/src/queries/course/public-course.ts
@@ -0,0 +1,534 @@
+import { and, asc, eq } from 'drizzle-orm';
+
+import * as schema from '@db/schema';
+import { db } from '@db/drizzle';
+
+/**
+ * Queries backing the anonymous public-course surface under
+ * `(org-site)/course/[courseSlug]`. Every query in this file assumes the
+ * course is already confirmed to be `type = 'PUBLIC'` and `is_published = true`
+ * at the service layer; they do not re-check auth.
+ */
+
+export interface PublicCourseHeader {
+  id: string;
+  slug: string;
+  title: string;
+  description: string | null;
+  bannerImage: string | null;
+  callout: {
+    title: string;
+    description: string;
+    buttonLabel: string;
+    buttonUrl: string;
+  } | null;
+  org: {
+    id: string;
+    name: string;
+    siteName: string | null;
+    avatarUrl: string | null;
+  } | null;
+}
+
+export interface PublicCourseSection {
+  id: string;
+  title: string;
+  order: number;
+}
+
+export interface PublicCourseLessonItem {
+  kind: 'lesson';
+  id: string;
+  slug: string;
+  title: string;
+  order: number;
+  sectionId: string | null;
+  isUnlocked: boolean;
+  hasVideo: boolean;
+}
+
+export interface PublicCourseExerciseItem {
+  kind: 'exercise';
+  id: string;
+  slug: string;
+  title: string;
+  order: number;
+  sectionId: string | null;
+  isUnlocked: boolean;
+}
+
+export type PublicCourseItem = PublicCourseLessonItem | PublicCourseExerciseItem;
+
+export interface PublicCourseTree {
+  course: PublicCourseHeader;
+  sections: PublicCourseSection[];
+  items: PublicCourseItem[];
+}
+
+/**
+ * Minimal course row for slug-based guards (e.g. rate limiting). Does not enforce PUBLIC/published.
+ */
+export async function getCourseRowBySlug(courseSlug: string): Promise<{
+  id: string;
+  type: string | null;
+  isPublished: boolean | null;
+  status: string | null;
+} | null> {
+  try {
+    const [row] = await db
+      .select({
+        id: schema.course.id,
+        type: schema.course.type,
+        isPublished: schema.course.isPublished,
+        status: schema.course.status
+      })
+      .from(schema.course)
+      .where(eq(schema.course.slug, courseSlug))
+      .limit(1);
+
+    return row ?? null;
+  } catch (error) {
+    console.error('getCourseRowBySlug error:', error);
+    throw new Error(`Failed to resolve course by slug: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+}
+
+/**
+ * Fetch the course header + its sections + every lesson / exercise (metadata only,
+ * no bodies) for a public course identified by its URL slug.
+ *
+ * Returns `null` when the course does not exist, is not published, or its type
+ * is not `PUBLIC`.
+ */
+export async function getPublicCourseTreeBySlug(courseSlug: string): Promise<PublicCourseTree | null> {
+  try {
+    const [courseRow] = await db
+      .select({
+        id: schema.course.id,
+        slug: schema.course.slug,
+        title: schema.course.title,
+        description: schema.course.description,
+        bannerImage: schema.course.bannerImage,
+        callout: schema.course.callout,
+        type: schema.course.type,
+        isPublished: schema.course.isPublished,
+        status: schema.course.status,
+        groupId: schema.course.groupId
+      })
+      .from(schema.course)
+      .where(eq(schema.course.slug, courseSlug))
+      .limit(1);
+
+    if (!courseRow) return null;
+    if (courseRow.type !== 'PUBLIC') return null;
+    if (!courseRow.isPublished) return null;
+    if (courseRow.status !== 'ACTIVE') return null;
+    if (!courseRow.slug) return null;
+
+    // Resolve the owning organization (course → group → organization). The
+    // public course page shows org name + avatar in the sticky top header so
+    // a guest can recognize the creator.
+    let org: PublicCourseHeader['org'] = null;
+    if (courseRow.groupId) {
+      const [orgRow] = await db
+        .select({
+          id: schema.organization.id,
+          name: schema.organization.name,
+          siteName: schema.organization.siteName,
+          avatarUrl: schema.organization.avatarUrl
+        })
+        .from(schema.group)
+        .innerJoin(schema.organization, eq(schema.organization.id, schema.group.organizationId))
+        .where(eq(schema.group.id, courseRow.groupId))
+        .limit(1);
+
+      if (orgRow) {
+        org = {
+          id: orgRow.id,
+          name: orgRow.name,
+          siteName: orgRow.siteName ?? null,
+          avatarUrl: orgRow.avatarUrl ?? null
+        };
+      }
+    }
+
+    const sectionRows = await db
+      .select({
+        id: schema.courseSection.id,
+        title: schema.courseSection.title,
+        order: schema.courseSection.order
+      })
+      .from(schema.courseSection)
+      .where(eq(schema.courseSection.courseId, courseRow.id))
+      .orderBy(asc(schema.courseSection.order));
+
+    const lessonRows = await db
+      .select({
+        id: schema.lesson.id,
+        slug: schema.lesson.slug,
+        title: schema.lesson.title,
+        order: schema.lesson.order,
+        sectionId: schema.lesson.sectionId,
+        isUnlocked: schema.lesson.isUnlocked,
+        videos: schema.lesson.videos,
+        videoUrl: schema.lesson.videoUrl
+      })
+      .from(schema.lesson)
+      .where(eq(schema.lesson.courseId, courseRow.id))
+      .orderBy(asc(schema.lesson.order));
+
+    const exerciseRows = await db
+      .select({
+        id: schema.exercise.id,
+        slug: schema.exercise.slug,
+        title: schema.exercise.title,
+        order: schema.exercise.order,
+        sectionId: schema.exercise.sectionId,
+        lessonId: schema.exercise.lessonId,
+        isUnlocked: schema.exercise.isUnlocked
+      })
+      .from(schema.exercise)
+      .where(eq(schema.exercise.courseId, courseRow.id))
+      .orderBy(asc(schema.exercise.order));
+
+    const sections: PublicCourseSection[] = sectionRows
+      .filter((section): section is { id: string; title: string; order: number } => section.order !== null)
+      .map((section) => ({
+        id: section.id,
+        title: section.title,
+        order: Number(section.order)
+      }));
+
+    const lessonItems: PublicCourseLessonItem[] = lessonRows
+      .filter((row): row is typeof row & { slug: string } => typeof row.slug === 'string')
+      .map((row) => ({
+        kind: 'lesson',
+        id: row.id,
+        slug: row.slug,
+        title: row.title,
+        order: row.order === null ? 0 : Number(row.order),
+        sectionId: row.sectionId,
+        isUnlocked: row.isUnlocked ?? false,
+        hasVideo:
+          (Array.isArray(row.videos) && row.videos.length > 0) ||
+          (typeof row.videoUrl === 'string' && row.videoUrl.length > 0)
+      }));
+
+    const exerciseItems: PublicCourseExerciseItem[] = exerciseRows
+      .filter((row): row is typeof row & { slug: string } => typeof row.slug === 'string')
+      .map((row) => ({
+        kind: 'exercise',
+        id: row.id,
+        slug: row.slug,
+        title: row.title,
+        order: row.order === null ? 0 : Number(row.order),
+        sectionId: row.sectionId,
+        isUnlocked: row.isUnlocked ?? true
+      }));
+
+    // Sort items so that the visual reading order matches the sidebar:
+    // items in the first section come before items in the second, and within
+    // a section items are sorted by their own `order`. Unsectioned items go
+    // last so the redirect from the course landing page never lands on a
+    // floating lesson when sections exist.
+    const UNSECTIONED_ORDER = Number.POSITIVE_INFINITY;
+    const sectionOrderById = new Map(sections.map((section) => [section.id, section.order]));
+    const orderForItem = (item: PublicCourseItem) =>
+      item.sectionId && sectionOrderById.has(item.sectionId)
+        ? (sectionOrderById.get(item.sectionId) ?? UNSECTIONED_ORDER)
+        : UNSECTIONED_ORDER;
+
+    const items = [...lessonItems, ...exerciseItems].sort((left, right) => {
+      const sectionDiff = orderForItem(left) - orderForItem(right);
+      if (sectionDiff !== 0) return sectionDiff;
+      return left.order - right.order;
+    });
+
+    const rawCallout = courseRow.callout;
+    const callout =
+      rawCallout && typeof rawCallout === 'object' && 'title' in rawCallout
+        ? {
+            title: String((rawCallout as { title: unknown }).title ?? ''),
+            description: String((rawCallout as { description: unknown }).description ?? ''),
+            buttonLabel: String((rawCallout as { buttonLabel: unknown }).buttonLabel ?? ''),
+            buttonUrl: String((rawCallout as { buttonUrl: unknown }).buttonUrl ?? '')
+          }
+        : null;
+
+    return {
+      course: {
+        id: courseRow.id,
+        slug: courseRow.slug,
+        title: courseRow.title,
+        description: courseRow.description,
+        bannerImage: courseRow.bannerImage,
+        callout,
+        org
+      },
+      sections,
+      items
+    };
+  } catch (error) {
+    console.error('getPublicCourseTreeBySlug error:', error);
+    throw new Error(
+      `Failed to get public course tree for slug "${courseSlug}": ${error instanceof Error ? error.message : 'Unknown error'}`
+    );
+  }
+}
+
+export interface PublicLessonContent {
+  kind: 'lesson';
+  id: string;
+  slug: string;
+  title: string;
+  sectionTitle: string | null;
+  isUnlocked: boolean;
+  body: string;
+  video: {
+    type: 'youtube' | 'generic' | 'upload' | 'google_drive';
+    link: string;
+  } | null;
+}
+
+export interface PublicExerciseContent {
+  kind: 'exercise';
+  id: string;
+  slug: string;
+  title: string;
+  description: string | null;
+  sectionTitle: string | null;
+  isUnlocked: boolean;
+  allowMultipleAttempts: boolean;
+  sectionDisplayMode: string;
+}
+
+export type PublicCourseItemContent = PublicLessonContent | PublicExerciseContent;
+
+/**
+ * Fetch a single lesson or exercise (by per-course unique slug) inside a public course.
+ * Returns `null` when the course is not public/published, or the item doesn't exist.
+ *
+ * The exercise payload returned here intentionally excludes the question list;
+ * callers should pair this with `getExerciseQuestions` (which already ships with
+ * answer keys) to render the client-side-graded exercise UI.
+ */
+export async function getPublicCourseItem(
+  courseSlug: string,
+  itemSlug: string
+): Promise<PublicCourseItemContent | null> {
+  try {
+    const [courseRow] = await db
+      .select({
+        id: schema.course.id,
+        type: schema.course.type,
+        isPublished: schema.course.isPublished,
+        status: schema.course.status
+      })
+      .from(schema.course)
+      .where(eq(schema.course.slug, courseSlug))
+      .limit(1);
+
+    if (!courseRow) return null;
+    if (courseRow.type !== 'PUBLIC') return null;
+    if (!courseRow.isPublished) return null;
+    if (courseRow.status !== 'ACTIVE') return null;
+
+    const [lessonRow] = await db
+      .select({
+        id: schema.lesson.id,
+        slug: schema.lesson.slug,
+        title: schema.lesson.title,
+        note: schema.lesson.note,
+        videoUrl: schema.lesson.videoUrl,
+        videos: schema.lesson.videos,
+        isUnlocked: schema.lesson.isUnlocked,
+        sectionId: schema.lesson.sectionId
+      })
+      .from(schema.lesson)
+      .where(and(eq(schema.lesson.courseId, courseRow.id), eq(schema.lesson.slug, itemSlug)))
+      .limit(1);
+
+    if (lessonRow) {
+      const section = lessonRow.sectionId
+        ? await db
+            .select({ title: schema.courseSection.title })
+            .from(schema.courseSection)
+            .where(eq(schema.courseSection.id, lessonRow.sectionId))
+            .limit(1)
+        : [];
+
+      // Lesson body lives in `lesson_language` (one row per locale). Prefer the
+      // English row when present; otherwise fall back to the first row, then to
+      // the legacy `lesson.note` column for very old lessons that predate i18n.
+      const languageRows = await db
+        .select({
+          content: schema.lessonLanguage.content,
+          locale: schema.lessonLanguage.locale
+        })
+        .from(schema.lessonLanguage)
+        .where(eq(schema.lessonLanguage.lessonId, lessonRow.id));
+
+      const englishRow = languageRows.find((row) => row.locale === 'en');
+      const fallbackRow = languageRows.find((row) => typeof row.content === 'string' && row.content.length > 0);
+      const body = englishRow?.content ?? fallbackRow?.content ?? lessonRow.note ?? '';
+
+      const firstVideo =
+        Array.isArray(lessonRow.videos) && lessonRow.videos.length > 0
+          ? {
+              type: lessonRow.videos[0].type,
+              link: lessonRow.videos[0].link
+            }
+          : lessonRow.videoUrl
+            ? { type: 'generic' as const, link: lessonRow.videoUrl }
+            : null;
+
+      return {
+        kind: 'lesson',
+        id: lessonRow.id,
+        slug: lessonRow.slug ?? itemSlug,
+        title: lessonRow.title,
+        sectionTitle: section[0]?.title ?? null,
+        isUnlocked: lessonRow.isUnlocked ?? false,
+        body,
+        video: firstVideo
+      };
+    }
+
+    const [exerciseRow] = await db
+      .select({
+        id: schema.exercise.id,
+        slug: schema.exercise.slug,
+        title: schema.exercise.title,
+        description: schema.exercise.description,
+        isUnlocked: schema.exercise.isUnlocked,
+        sectionId: schema.exercise.sectionId,
+        lessonId: schema.exercise.lessonId,
+        allowMultipleAttempts: schema.exercise.allowMultipleAttempts,
+        sectionDisplayMode: schema.exercise.sectionDisplayMode
+      })
+      .from(schema.exercise)
+      .where(and(eq(schema.exercise.courseId, courseRow.id), eq(schema.exercise.slug, itemSlug)))
+      .limit(1);
+
+    if (!exerciseRow) return null;
+
+    const resolvedSectionId =
+      exerciseRow.sectionId ??
+      (exerciseRow.lessonId
+        ? ((
+            await db
+              .select({ sectionId: schema.lesson.sectionId })
+              .from(schema.lesson)
+              .where(eq(schema.lesson.id, exerciseRow.lessonId))
+              .limit(1)
+          )[0]?.sectionId ?? null)
+        : null);
+
+    const section = resolvedSectionId
+      ? await db
+          .select({ title: schema.courseSection.title })
+          .from(schema.courseSection)
+          .where(eq(schema.courseSection.id, resolvedSectionId))
+          .limit(1)
+      : [];
+
+    return {
+      kind: 'exercise',
+      id: exerciseRow.id,
+      slug: exerciseRow.slug ?? itemSlug,
+      title: exerciseRow.title,
+      description: exerciseRow.description,
+      sectionTitle: section[0]?.title ?? null,
+      isUnlocked: exerciseRow.isUnlocked ?? true,
+      allowMultipleAttempts: exerciseRow.allowMultipleAttempts,
+      sectionDisplayMode: exerciseRow.sectionDisplayMode ?? 'one_question'
+    };
+  } catch (error) {
+    console.error('getPublicCourseItem error:', error);
+    throw new Error(
+      `Failed to get public course item "${itemSlug}" for course "${courseSlug}": ${
+        error instanceof Error ? error.message : 'Unknown error'
+      }`
+    );
+  }
+}
+
+/**
+ * Helper for slug-collision resolution at the service layer. Returns the set of
+ * slugs already in use for the given course across both lesson and exercise
+ * tables.
+ */
+export async function getTakenItemSlugs(courseId: string): Promise<Set<string>> {
+  try {
+    const lessonSlugs = await db
+      .select({ slug: schema.lesson.slug })
+      .from(schema.lesson)
+      .where(eq(schema.lesson.courseId, courseId));
+
+    const exerciseSlugs = await db
+      .select({ slug: schema.exercise.slug })
+      .from(schema.exercise)
+      .where(eq(schema.exercise.courseId, courseId));
+
+    const taken = new Set<string>();
+    for (const row of lessonSlugs) {
+      if (row.slug) taken.add(row.slug);
+    }
+    for (const row of exerciseSlugs) {
+      if (row.slug) taken.add(row.slug);
+    }
+
+    return taken;
+  } catch (error) {
+    console.error('getTakenItemSlugs error:', error);
+    throw new Error(
+      `Failed to read taken slugs for course "${courseId}": ${error instanceof Error ? error.message : 'Unknown error'}`
+    );
+  }
+}
+
+/**
+ * Count of questions attached to a public course whose type is NOT auto-gradable.
+ * Used to guard conversion of a course to `PUBLIC`.
+ */
+export async function findNonAutoGradableQuestionsInCourse(
+  courseId: string,
+  autoGradableTypeIds: readonly number[]
+): Promise<
+  Array<{
+    questionId: number;
+    questionTitle: string;
+    exerciseId: string;
+    exerciseTitle: string;
+    typeId: number;
+  }>
+> {
+  try {
+    const rows = await db
+      .select({
+        questionId: schema.question.id,
+        questionTitle: schema.question.title,
+        exerciseId: schema.exercise.id,
+        exerciseTitle: schema.exercise.title,
+        typeId: schema.question.questionTypeId
+      })
+      .from(schema.question)
+      .innerJoin(schema.exercise, eq(schema.exercise.id, schema.question.exerciseId))
+      .where(eq(schema.exercise.courseId, courseId));
+
+    return rows
+      .filter((row) => row.typeId !== null && !autoGradableTypeIds.includes(row.typeId))
+      .map((row) => ({
+        questionId: row.questionId,
+        questionTitle: row.questionTitle ?? 'Untitled question',
+        exerciseId: row.exerciseId,
+        exerciseTitle: row.exerciseTitle,
+        typeId: row.typeId as number
+      }));
+  } catch (error) {
+    console.error('findNonAutoGradableQuestionsInCourse error:', error);
+    throw new Error(
+      `Failed to scan questions for course "${courseId}": ${error instanceof Error ? error.message : 'Unknown error'}`
+    );
+  }
+}
diff --git a/packages/db/src/queries/exercise/exercise-section.ts b/packages/db/src/queries/exercise/exercise-section.ts
new file mode 100644
index 00000000..51d0a7c5
--- /dev/null
+++ b/packages/db/src/queries/exercise/exercise-section.ts
@@ -0,0 +1,136 @@
+import * as schema from '@db/schema';
+
+import { asc, db, eq, inArray } from '@db/drizzle';
+import type { DbOrTxClient } from '@db/drizzle';
+import type { TNewExerciseSection } from '@db/types';
+
+export async function getExerciseSectionsByExerciseId(exerciseId: string, dbClient: DbOrTxClient = db) {
+  try {
+    return dbClient
+      .select()
+      .from(schema.exerciseSection)
+      .where(eq(schema.exerciseSection.exerciseId, exerciseId))
+      .orderBy(asc(schema.exerciseSection.order));
+  } catch (error) {
+    console.error('getExerciseSectionsByExerciseId error:', error);
+    throw new Error(
+      `Failed to get exercise sections by exercise ID "${exerciseId}": ${
+        error instanceof Error ? error.message : 'Unknown error'
+      }`
+    );
+  }
+}
+
+export async function getExerciseSectionsByExerciseIds(exerciseIds: string[], dbClient: DbOrTxClient = db) {
+  if (exerciseIds.length === 0) return [];
+
+  try {
+    return dbClient
+      .select()
+      .from(schema.exerciseSection)
+      .where(inArray(schema.exerciseSection.exerciseId, exerciseIds))
+      .orderBy(asc(schema.exerciseSection.exerciseId), asc(schema.exerciseSection.order));
+  } catch (error) {
+    console.error('getExerciseSectionsByExerciseIds error:', error);
+    throw new Error(`Failed to get exercise sections: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+}
+
+export async function createExerciseSections(sections: TNewExerciseSection[], dbClient: DbOrTxClient = db) {
+  if (sections.length === 0) return [];
+
+  try {
+    return dbClient.insert(schema.exerciseSection).values(sections).returning();
+  } catch (error) {
+    console.error('createExerciseSections error:', error);
+    throw new Error(`Failed to create exercise sections: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+}
+
+export async function updateExerciseSection(
+  exerciseSectionId: string,
+  data: Partial<Omit<TNewExerciseSection, 'id' | 'exerciseId'>>,
+  dbClient: DbOrTxClient = db
+) {
+  try {
+    const [updated] = await dbClient
+      .update(schema.exerciseSection)
+      .set({ ...data, updatedAt: new Date().toISOString() })
+      .where(eq(schema.exerciseSection.id, exerciseSectionId))
+      .returning();
+
+    return updated || null;
+  } catch (error) {
+    console.error('updateExerciseSection error:', error);
+    throw new Error(
+      `Failed to update exercise section "${exerciseSectionId}": ${
+        error instanceof Error ? error.message : 'Unknown error'
+      }`
+    );
+  }
+}
+
+export async function deleteExerciseSection(exerciseSectionId: string, dbClient: DbOrTxClient = db) {
+  try {
+    return dbClient.delete(schema.exerciseSection).where(eq(schema.exerciseSection.id, exerciseSectionId)).returning();
+  } catch (error) {
+    console.error('deleteExerciseSection error:', error);
+    throw new Error(
+      `Failed to delete exercise section "${exerciseSectionId}": ${
+        error instanceof Error ? error.message : 'Unknown error'
+      }`
+    );
+  }
+}
+
+export async function deleteExerciseSectionsByIds(exerciseSectionIds: string[], dbClient: DbOrTxClient = db) {
+  if (exerciseSectionIds.length === 0) return [];
+
+  try {
+    return dbClient
+      .delete(schema.exerciseSection)
+      .where(inArray(schema.exerciseSection.id, exerciseSectionIds))
+      .returning();
+  } catch (error) {
+    console.error('deleteExerciseSectionsByIds error:', error);
+    throw new Error(`Failed to delete exercise sections: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+}
+
+export async function moveQuestionToSection(
+  questionId: number,
+  exerciseSectionId: string | null,
+  dbClient: DbOrTxClient = db
+) {
+  try {
+    const [updated] = await dbClient
+      .update(schema.question)
+      .set({ exerciseSectionId })
+      .where(eq(schema.question.id, questionId))
+      .returning();
+
+    return updated || null;
+  } catch (error) {
+    console.error('moveQuestionToSection error:', error);
+    throw new Error(`Failed to move question to section: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+}
+
+export async function bulkMoveQuestionsToSection(
+  questionIds: number[],
+  exerciseSectionId: string | null,
+  dbClient: DbOrTxClient = db
+) {
+  if (questionIds.length === 0) return [];
+
+  try {
+    return dbClient
+      .update(schema.question)
+      .set({ exerciseSectionId })
+      .where(inArray(schema.question.id, questionIds))
+      .returning();
+  } catch (error) {
+    console.error('bulkMoveQuestionsToSection error:', error);
+    throw new Error(`Failed to move questions to section: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+}
diff --git a/packages/db/src/queries/exercise/exercise.ts b/packages/db/src/queries/exercise/exercise.ts
index 195f4d9d..ce20a692 100644
--- a/packages/db/src/queries/exercise/exercise.ts
+++ b/packages/db/src/queries/exercise/exercise.ts
@@ -272,8 +272,6 @@ export async function deleteQuestion(questionId: number, dbClient: DbOrTxClient
 export async function createOptions(values: TNewOption[], dbClient: DbOrTxClient = db) {
   if (values.length === 0) return [];
   try {
-    // Keep the identity sequence aligned before bulk inserts so restored data
-    // or manual imports cannot reuse an existing option id.
     await syncOptionIdSequence(dbClient);
     return dbClient.insert(schema.option).values(values).returning();
   } catch (error) {
diff --git a/packages/db/src/queries/exercise/index.ts b/packages/db/src/queries/exercise/index.ts
index 098b2309..d3687112 100644
--- a/packages/db/src/queries/exercise/index.ts
+++ b/packages/db/src/queries/exercise/index.ts
@@ -1,3 +1,3 @@
 export * from './exercise';
-export * from './exercise';
+export * from './exercise-section';
 export * from './lms';
diff --git a/packages/db/src/queries/group/group.ts b/packages/db/src/queries/group/group.ts
index a3cc7a28..ebf5abce 100644
--- a/packages/db/src/queries/group/group.ts
+++ b/packages/db/src/queries/group/group.ts
@@ -295,3 +295,36 @@ export const getGroupMemberIdByCourseAndProfile = async (
 
   return result.length > 0 ? result[0].id : null;
 };
+
+export async function getGroupMemberIdByGroupAndProfile(
+  groupId: string,
+  profileId: string,
+  dbClient: DbOrTxClient = db
+): Promise<string | null> {
+  try {
+    const [row] = await dbClient
+      .select({ id: schema.groupmember.id })
+      .from(schema.groupmember)
+      .where(and(eq(schema.groupmember.groupId, groupId), eq(schema.groupmember.profileId, profileId)))
+      .limit(1);
+
+    return row?.id ?? null;
+  } catch (error) {
+    console.error('getGroupMemberIdByGroupAndProfile error:', error);
+    throw new Error(`Failed to resolve group membership: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+}
+
+export async function insertGroupMembersOnConflictDoNothing(
+  values: TNewGroupmember[],
+  dbClient: DbOrTxClient = db
+): Promise<void> {
+  if (values.length === 0) return;
+
+  try {
+    await dbClient.insert(schema.groupmember).values(values).onConflictDoNothing();
+  } catch (error) {
+    console.error('insertGroupMembersOnConflictDoNothing error:', error);
+    throw new Error(`Failed to insert group members: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+}
diff --git a/packages/db/src/queries/index.ts b/packages/db/src/queries/index.ts
index 00b8bcc5..0ac828f2 100644
--- a/packages/db/src/queries/index.ts
+++ b/packages/db/src/queries/index.ts
@@ -1,4 +1,5 @@
 export * from './organization';
+export * from './query-errors';
 export * from './auth';
 export * from './attendance';
 export * from './audience';
diff --git a/packages/db/src/queries/organization/invite.ts b/packages/db/src/queries/organization/invite.ts
index e061f7bd..09fe63ff 100644
--- a/packages/db/src/queries/organization/invite.ts
+++ b/packages/db/src/queries/organization/invite.ts
@@ -2,12 +2,13 @@ import type {
   TNewOrganizationInvite,
   TNewOrganizationInviteAudit,
   TOrganizationInvite,
-  TOrganizationInviteAudit
+  TOrganizationInviteAudit,
+  TNewOrganizationmember
 } from '@db/types';
 import * as schema from '@db/schema';
 
 import { and, desc, eq, gt, inArray, isNull, sql } from 'drizzle-orm';
-import { db } from '@db/drizzle';
+import { db, type DbOrTxClient } from '@db/drizzle';
 
 export async function createOrganizationInvite(values: TNewOrganizationInvite): Promise<TOrganizationInvite> {
   try {
@@ -358,3 +359,174 @@ export async function getLatestOrganizationInviteRowByOrgAndEmail(
     );
   }
 }
+
+export type TOrganizationInviteAcceptRow = {
+  invite: TOrganizationInvite;
+  organization: {
+    id: string;
+    name: string;
+    siteName: string;
+  };
+};
+
+export async function selectOrganizationInviteWithOrgByTokenHash(
+  dbClient: DbOrTxClient,
+  tokenHash: string
+): Promise<TOrganizationInviteAcceptRow | null> {
+  try {
+    const [row] = await dbClient
+      .select({
+        invite: schema.organizationInvite,
+        organization: {
+          id: schema.organization.id,
+          name: schema.organization.name,
+          siteName: schema.organization.siteName
+        }
+      })
+      .from(schema.organizationInvite)
+      .innerJoin(schema.organization, eq(schema.organizationInvite.organizationId, schema.organization.id))
+      .where(eq(schema.organizationInvite.tokenHash, tokenHash))
+      .limit(1);
+
+    if (!row) {
+      return null;
+    }
+
+    return {
+      ...row,
+      organization: { ...row.organization, siteName: row.organization.siteName ?? '' }
+    };
+  } catch (error) {
+    console.error('selectOrganizationInviteWithOrgByTokenHash error:', error);
+    throw new Error(`Failed to load organization invite: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+}
+
+export async function selectOrganizationInviteWithOrgByInviteId(
+  dbClient: DbOrTxClient,
+  inviteId: string
+): Promise<TOrganizationInviteAcceptRow | null> {
+  try {
+    const [row] = await dbClient
+      .select({
+        invite: schema.organizationInvite,
+        organization: {
+          id: schema.organization.id,
+          name: schema.organization.name,
+          siteName: schema.organization.siteName
+        }
+      })
+      .from(schema.organizationInvite)
+      .innerJoin(schema.organization, eq(schema.organizationInvite.organizationId, schema.organization.id))
+      .where(eq(schema.organizationInvite.id, inviteId))
+      .limit(1);
+
+    if (!row) {
+      return null;
+    }
+
+    return {
+      ...row,
+      organization: { ...row.organization, siteName: row.organization.siteName ?? '' }
+    };
+  } catch (error) {
+    console.error('selectOrganizationInviteWithOrgByInviteId error:', error);
+    throw new Error(`Failed to load organization invite: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+}
+
+export async function selectOrganizationMemberByOrgAndNormalizedEmail(
+  dbClient: DbOrTxClient,
+  organizationId: string,
+  normalizedEmail: string
+) {
+  try {
+    const [row] = await dbClient
+      .select()
+      .from(schema.organizationmember)
+      .where(
+        and(
+          eq(schema.organizationmember.organizationId, organizationId),
+          eq(schema.organizationmember.email, normalizedEmail)
+        )
+      )
+      .limit(1);
+
+    return row ?? null;
+  } catch (error) {
+    console.error('selectOrganizationMemberByOrgAndNormalizedEmail error:', error);
+    throw new Error(`Failed to load organization member: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+}
+
+export async function selectOrganizationMemberByOrgAndProfile(
+  dbClient: DbOrTxClient,
+  organizationId: string,
+  profileId: string
+) {
+  try {
+    const [row] = await dbClient
+      .select()
+      .from(schema.organizationmember)
+      .where(
+        and(
+          eq(schema.organizationmember.organizationId, organizationId),
+          eq(schema.organizationmember.profileId, profileId)
+        )
+      )
+      .limit(1);
+
+    return row ?? null;
+  } catch (error) {
+    console.error('selectOrganizationMemberByOrgAndProfile error:', error);
+    throw new Error(`Failed to load organization member: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+}
+
+export async function updateOrganizationMemberById(
+  dbClient: DbOrTxClient,
+  memberId: number,
+  data: Partial<TNewOrganizationmember>
+) {
+  try {
+    await dbClient.update(schema.organizationmember).set(data).where(eq(schema.organizationmember.id, memberId));
+  } catch (error) {
+    console.error('updateOrganizationMemberById error:', error);
+    throw new Error(
+      `Failed to update organization member: ${error instanceof Error ? error.message : 'Unknown error'}`
+    );
+  }
+}
+
+export async function claimPendingOrganizationInvite(
+  dbClient: DbOrTxClient,
+  inviteId: string,
+  acceptedByProfileId: string
+): Promise<{ id: string } | undefined> {
+  try {
+    const [acceptedInvite] = await dbClient
+      .update(schema.organizationInvite)
+      .set({
+        acceptedAt: new Date().toISOString(),
+        acceptedByProfileId,
+        updatedAt: new Date().toISOString()
+      })
+      .where(
+        and(
+          eq(schema.organizationInvite.id, inviteId),
+          eq(schema.organizationInvite.isRevoked, false),
+          isNull(schema.organizationInvite.acceptedAt)
+        )
+      )
+      .returning({
+        id: schema.organizationInvite.id
+      });
+
+    return acceptedInvite;
+  } catch (error) {
+    console.error('claimPendingOrganizationInvite error:', error);
+    throw new Error(
+      `Failed to finalize organization invite: ${error instanceof Error ? error.message : 'Unknown error'}`
+    );
+  }
+}
diff --git a/packages/db/src/queries/organization/organization.ts b/packages/db/src/queries/organization/organization.ts
index 9c06a350..a84dc116 100644
--- a/packages/db/src/queries/organization/organization.ts
+++ b/packages/db/src/queries/organization/organization.ts
@@ -95,6 +95,32 @@ export const createOrganizationMember = async (data: TNewOrganizationmember, dbC
   return member;
 };
 
+export async function getOrganizationMemberIdByOrgAndProfile(
+  organizationId: string,
+  profileId: string,
+  dbClient: DbOrTxClient = db
+): Promise<number | null> {
+  try {
+    const [row] = await dbClient
+      .select({ id: schema.organizationmember.id })
+      .from(schema.organizationmember)
+      .where(
+        and(
+          eq(schema.organizationmember.organizationId, organizationId),
+          eq(schema.organizationmember.profileId, profileId)
+        )
+      )
+      .limit(1);
+
+    return row?.id ?? null;
+  } catch (error) {
+    console.error('getOrganizationMemberIdByOrgAndProfile error:', error);
+    throw new Error(
+      `Failed to resolve organization membership: ${error instanceof Error ? error.message : 'Unknown error'}`
+    );
+  }
+}
+
 /**
  * Creates multiple organization members in a single query
  * @param data Array of organization member creation data
@@ -106,6 +132,24 @@ export const createOrganizationMembers = async (data: TNewOrganizationmember[])
   return members;
 };
 
+export async function insertOrganizationMembersOnConflictDoNothing(
+  data: TNewOrganizationmember[],
+  dbClient: DbOrTxClient = db
+): Promise<void> {
+  if (data.length === 0) {
+    return;
+  }
+
+  try {
+    await dbClient.insert(schema.organizationmember).values(data).onConflictDoNothing();
+  } catch (error) {
+    console.error('insertOrganizationMembersOnConflictDoNothing error:', error);
+    throw new Error(
+      `Failed to insert organization members: ${error instanceof Error ? error.message : 'Unknown error'}`
+    );
+  }
+}
+
 export const checkSiteNameExists = async (siteName: string): Promise<boolean> => {
   const result = await db
     .select({ id: schema.organization.id })
diff --git a/packages/db/src/queries/program/program.ts b/packages/db/src/queries/program/program.ts
index 736feecc..15ec525b 100644
--- a/packages/db/src/queries/program/program.ts
+++ b/packages/db/src/queries/program/program.ts
@@ -3,7 +3,7 @@ import * as schema from '@db/schema';
 import { and, asc, desc, eq, ilike, inArray, or, sql } from 'drizzle-orm';
 
 import { ROLE } from '@cio/utils/constants';
-import { db } from '@db/drizzle';
+import { db, type DbOrTxClient } from '@db/drizzle';
 
 // ─── Types ───────────────────────────────────────────────────────────────────
 
@@ -309,9 +309,9 @@ export async function isOrgAdminByProgramId(programId: string, profileId: string
   }
 }
 
-export async function addProgramMember(data: TNewProgramMember): Promise<TProgramMember> {
+export async function addProgramMember(data: TNewProgramMember, dbClient: DbOrTxClient = db): Promise<TProgramMember> {
   try {
-    const [member] = await db.insert(schema.programMember).values(data).returning();
+    const [member] = await dbClient.insert(schema.programMember).values(data).returning();
     if (!member) throw new Error('Failed to add program member');
     return member;
   } catch (error) {
diff --git a/packages/db/src/queries/query-errors.ts b/packages/db/src/queries/query-errors.ts
new file mode 100644
index 00000000..26911b26
--- /dev/null
+++ b/packages/db/src/queries/query-errors.ts
@@ -0,0 +1,15 @@
+/**
+ * Thrown from query modules when a domain rule fails and the API layer should
+ * map this to an AppError with the same code and status.
+ */
+export class OperationalQueryError extends Error {
+  constructor(
+    message: string,
+    public readonly errorCode: string,
+    public readonly statusCode: number,
+    public readonly field?: string
+  ) {
+    super(message);
+    this.name = 'OperationalQueryError';
+  }
+}
diff --git a/packages/db/src/schema.ts b/packages/db/src/schema.ts
index 286c81f9..407bc42a 100644
--- a/packages/db/src/schema.ts
+++ b/packages/db/src/schema.ts
@@ -23,7 +23,7 @@ import {
 import type { AnswerData } from '@cio/question-types';
 import { sql } from 'drizzle-orm';
 
-export const courseType = pgEnum('COURSE_TYPE', ['SELF_PACED', 'LIVE_CLASS', 'COMPLIANCE']);
+export const courseType = pgEnum('COURSE_TYPE', ['SELF_PACED', 'LIVE_CLASS', 'COMPLIANCE', 'PUBLIC']);
 export const locale = pgEnum('LOCALE', ['en', 'hi', 'fr', 'pt', 'de', 'vi', 'ru', 'es', 'pl', 'da']);
 export const plan = pgEnum('PLAN', ['EARLY_ADOPTER', 'ENTERPRISE', 'BASIC']);
 export const courseImportSourceType = pgEnum('COURSE_IMPORT_SOURCE_TYPE', ['prompt', 'pdf', 'course']);
@@ -541,7 +541,7 @@ export const submissionstatus = pgTable(
     label: varchar().notNull(),
     updatedAt: timestamp('updated_at', { withTimezone: true, mode: 'string' }).defaultNow()
   },
-  (table) => []
+  () => []
 );
 
 export const course = pgTable(
@@ -625,7 +625,13 @@ export const course = pgTable(
       passingScore?: number;
     }>(),
     status: text().default('ACTIVE').notNull(),
-    type: courseType().default('LIVE_CLASS')
+    type: courseType().default('SELF_PACED'),
+    callout: jsonb().$type<{
+      title: string;
+      description: string;
+      buttonLabel: string;
+      buttonUrl: string;
+    } | null>()
   },
   (table) => [
     foreignKey({
@@ -877,7 +883,8 @@ export const lesson = pgTable(
         assetId?: string;
       }[]
     >(),
-    sectionId: uuid('section_id')
+    sectionId: uuid('section_id'),
+    slug: varchar()
   },
   (table) => [
     foreignKey({
@@ -896,7 +903,8 @@ export const lesson = pgTable(
       name: 'public_course_section_id_fkey'
     })
       .onUpdate('cascade')
-      .onDelete('cascade')
+      .onDelete('cascade'),
+    index('idx_lesson_course_slug').on(table.courseId, table.slug)
   ]
 );
 
@@ -1059,7 +1067,9 @@ export const exercise = pgTable(
       .notNull(),
     isUnlocked: boolean('is_unlocked').default(true),
     dueBy: timestamp('due_by', { mode: 'string' }),
-    allowMultipleAttempts: boolean('allow_multiple_attempts').default(false).notNull()
+    allowMultipleAttempts: boolean('allow_multiple_attempts').default(false).notNull(),
+    sectionDisplayMode: varchar('section_display_mode').default('one_question'),
+    slug: varchar()
   },
   (table) => [
     foreignKey({
@@ -1076,7 +1086,34 @@ export const exercise = pgTable(
       columns: [table.sectionId],
       foreignColumns: [courseSection.id],
       name: 'exercise_section_id_fkey'
-    })
+    }),
+    index('idx_exercise_course_slug').on(table.courseId, table.slug)
+  ]
+);
+
+export const exerciseSection = pgTable(
+  'exercise_section',
+  {
+    id: uuid()
+      .default(sql`gen_random_uuid()`)
+      .primaryKey()
+      .notNull(),
+    exerciseId: uuid('exercise_id').notNull(),
+    title: varchar().notNull().default('Untitled Section'),
+    description: text(),
+    order: bigint({ mode: 'number' }).notNull().default(0),
+    colorTheme: varchar('color_theme').notNull().default('blue'),
+    afterBehavior: jsonb('after_behavior').notNull().default({ action: 'continue' }),
+    createdAt: timestamp('created_at', { withTimezone: true, mode: 'string' }).defaultNow(),
+    updatedAt: timestamp('updated_at', { withTimezone: true, mode: 'string' }).defaultNow()
+  },
+  (table) => [
+    foreignKey({
+      columns: [table.exerciseId],
+      foreignColumns: [exercise.id],
+      name: 'exercise_section_exercise_id_fkey'
+    }).onDelete('cascade'),
+    index('idx_exercise_section_exercise_id').on(table.exerciseId)
   ]
 );
 
@@ -1656,6 +1693,7 @@ export const question = pgTable(
     createdAt: timestamp('created_at', { withTimezone: true, mode: 'string' }).defaultNow(),
     updatedAt: timestamp('updated_at', { withTimezone: true, mode: 'string' }).defaultNow(),
     exerciseId: uuid('exercise_id').notNull(),
+    exerciseSectionId: uuid('exercise_section_id'),
     name: uuid().default(sql`gen_random_uuid()`),
     points: doublePrecision(),
     settings: jsonb().default({}),
@@ -1668,6 +1706,11 @@ export const question = pgTable(
       foreignColumns: [exercise.id],
       name: 'question_exercise_id_fkey'
     }).onDelete('cascade'),
+    foreignKey({
+      columns: [table.exerciseSectionId],
+      foreignColumns: [exerciseSection.id],
+      name: 'question_exercise_section_id_fkey'
+    }).onDelete('set null'),
     foreignKey({
       columns: [table.questionTypeId],
       foreignColumns: [questionType.id],
@@ -1721,7 +1764,8 @@ export const questionAnswer = pgTable(
 /**
  * Exercise question kinds (`typename` matches `@cio/question-types` keys). Expected ids:
  * 1 RADIO, 2 CHECKBOX, 3 TEXTAREA, 4 TRUE_FALSE, 5 SHORT_ANSWER, 6 NUMERIC, 7 FILL_BLANK,
- * 8 FILE_UPLOAD, 9 MATCHING, 10 ORDERING, 11 HOTSPOT, 12 LINK, 13 WORD_BANK, 14 STAR.
+ * 8 FILE_UPLOAD, 9 MATCHING, 10 ORDERING, 11 HOTSPOT, 12 LINK, 13 WORD_BANK, 14 STAR,
+ * 15 VIDEO_RECORDING.
  */
 export const questionType = pgTable(
   'question_type',
@@ -1739,7 +1783,7 @@ export const questionType = pgTable(
     updatedAt: timestamp('updated_at', { withTimezone: true, mode: 'string' }).defaultNow(),
     typename: varchar()
   },
-  (table) => []
+  () => []
 );
 
 export const role = pgTable(
@@ -1758,7 +1802,7 @@ export const role = pgTable(
     updatedAt: timestamp('updated_at', { withTimezone: true, mode: 'string' }).defaultNow(),
     createdAt: timestamp('created_at', { withTimezone: true, mode: 'string' }).defaultNow()
   },
-  (table) => []
+  () => []
 );
 
 export const waitinglist = pgTable(
@@ -2566,6 +2610,7 @@ export const aiTokenUsage = pgTable(
     courseId: uuid('course_id').notNull(),
     promptTokens: integer('prompt_tokens').notNull(),
     completionTokens: integer('completion_tokens').notNull(),
+    costUnits: integer('cost_units'),
     model: text().notNull(),
     createdAt: timestamp('created_at', { withTimezone: true, mode: 'string' }).defaultNow().notNull()
   },
@@ -2605,6 +2650,43 @@ export const aiCreditBalance = pgTable(
   ]
 );
 
+export const aiCreditPurchase = pgTable(
+  'ai_credit_purchase',
+  {
+    id: bigint({ mode: 'number' }).primaryKey().generatedByDefaultAsIdentity({
+      name: 'ai_credit_purchase_id_seq',
+      startWith: 1,
+      increment: 1,
+      minValue: 1,
+      cache: 1
+    }),
+    orgId: uuid('org_id').notNull(),
+    triggeredBy: uuid('triggered_by'),
+    provider: text().notNull().default('polar'),
+    providerOrderId: text('provider_order_id').notNull(),
+    tokens: integer().notNull(),
+    quantity: integer().notNull().default(1),
+    unitPriceCents: integer('unit_price_cents').notNull().default(0),
+    currency: text().notNull().default('USD'),
+    payload: jsonb(),
+    createdAt: timestamp('created_at', { withTimezone: true, mode: 'string' }).defaultNow().notNull()
+  },
+  (table) => [
+    foreignKey({
+      columns: [table.orgId],
+      foreignColumns: [organization.id],
+      name: 'ai_credit_purchase_org_id_fkey'
+    }),
+    foreignKey({
+      columns: [table.triggeredBy],
+      foreignColumns: [profile.id],
+      name: 'ai_credit_purchase_triggered_by_fkey'
+    }),
+    unique('ai_credit_purchase_provider_order_id_key').on(table.providerOrderId),
+    index('idx_ai_credit_purchase_org_created').on(table.orgId, table.createdAt)
+  ]
+);
+
 export const aiChatConversation = pgTable(
   'ai_chat_conversation',
   {
diff --git a/packages/db/src/types.ts b/packages/db/src/types.ts
index 0176a116..407498cc 100644
--- a/packages/db/src/types.ts
+++ b/packages/db/src/types.ts
@@ -91,6 +91,9 @@ export type TNewAppsPollSubmission = typeof schema.appsPollSubmission.$inferInse
 export type TExercise = typeof schema.exercise.$inferSelect;
 export type TNewExercise = typeof schema.exercise.$inferInsert;
 
+export type TExerciseSection = typeof schema.exerciseSection.$inferSelect;
+export type TNewExerciseSection = typeof schema.exerciseSection.$inferInsert;
+
 export type TGroupmember = typeof schema.groupmember.$inferSelect;
 export type TNewGroupmember = typeof schema.groupmember.$inferInsert;
 
diff --git a/packages/db/src/utils/seed/questionType.ts b/packages/db/src/utils/seed/questionType.ts
index e3311083..695e01d9 100644
--- a/packages/db/src/utils/seed/questionType.ts
+++ b/packages/db/src/utils/seed/questionType.ts
@@ -76,6 +76,12 @@ export async function seedQuestionTypes() {
       typename: 'STAR',
       createdAt: '2021-08-07 18:49:46.246529+00',
       updatedAt: '2021-08-15 00:57:38.634665+00'
+    },
+    {
+      label: 'Video recording',
+      typename: 'VIDEO_RECORDING',
+      createdAt: '2026-04-30 00:00:00+00',
+      updatedAt: '2026-04-30 00:00:00+00'
     }
   ].filter((q) => !questionTypeNames.includes(q.typename));
 
diff --git a/packages/question-types/src/answer-codecs.ts b/packages/question-types/src/answer-codecs.ts
index ea37bd1f..13a1a69f 100644
--- a/packages/question-types/src/answer-codecs.ts
+++ b/packages/question-types/src/answer-codecs.ts
@@ -15,7 +15,8 @@ import type {
   OrderingAnswerData,
   LinkAnswerData,
   HotspotAnswerData,
-  StarAnswerData
+  StarAnswerData,
+  VideoRecordingAnswerData
 } from './answer-data';
 
 import { QUESTION_TYPE_KEY } from './question-type-keys';
@@ -247,6 +248,62 @@ const STAR_CODEC: AnswerCodec<StarAnswerData> = {
   }
 };
 
+function isVideoRecordingAnswer(value: unknown): value is Omit<VideoRecordingAnswerData, 'type'> & { type?: string } {
+  if (!value || typeof value !== 'object') return false;
+
+  const data = value as Partial<VideoRecordingAnswerData>;
+  return (
+    typeof data.assetId === 'string' &&
+    data.assetId.length > 0 &&
+    typeof data.storageKey === 'string' &&
+    data.storageKey.length > 0 &&
+    typeof data.fileName === 'string' &&
+    typeof data.mimeType === 'string' &&
+    data.mimeType.startsWith('video/') &&
+    typeof data.size === 'number' &&
+    Number.isFinite(data.size) &&
+    data.size > 0 &&
+    typeof data.durationSeconds === 'number' &&
+    Number.isFinite(data.durationSeconds) &&
+    data.durationSeconds > 0 &&
+    typeof data.recordedAt === 'string' &&
+    typeof data.uploadedAt === 'string' &&
+    data.provider === 'cloudflare'
+  );
+}
+
+const VIDEO_RECORDING_CODEC: AnswerCodec<VideoRecordingAnswerData> = {
+  type: 'VIDEO_RECORDING',
+  toApiPayload(data, questionId) {
+    const { playbackUrl: _playbackUrl, ...answerData } = data;
+    return { questionId, answer: JSON.stringify(answerData) };
+  },
+  fromApiPayload(payload) {
+    if (!payload.answer) return null;
+
+    try {
+      const parsed = JSON.parse(payload.answer) as Partial<VideoRecordingAnswerData>;
+      if (parsed?.type !== 'VIDEO_RECORDING' || !isVideoRecordingAnswer(parsed)) return null;
+
+      return {
+        type: 'VIDEO_RECORDING',
+        assetId: parsed.assetId,
+        storageKey: parsed.storageKey,
+        fileName: parsed.fileName,
+        mimeType: parsed.mimeType,
+        size: parsed.size,
+        durationSeconds: parsed.durationSeconds,
+        recordedAt: parsed.recordedAt,
+        uploadedAt: parsed.uploadedAt,
+        provider: 'cloudflare',
+        retakeCount: typeof parsed.retakeCount === 'number' ? parsed.retakeCount : undefined
+      };
+    } catch {
+      return null;
+    }
+  }
+};
+
 export const ANSWER_CODECS: Record<QuestionTypeKey, AnswerCodec> = {
   [QUESTION_TYPE_KEY.RADIO]: RADIO_CODEC,
   [QUESTION_TYPE_KEY.CHECKBOX]: CHECKBOX_CODEC,
@@ -261,7 +318,8 @@ export const ANSWER_CODECS: Record<QuestionTypeKey, AnswerCodec> = {
   [QUESTION_TYPE_KEY.ORDERING]: ORDERING_CODEC,
   [QUESTION_TYPE_KEY.LINK]: LINK_CODEC,
   [QUESTION_TYPE_KEY.HOTSPOT]: HOTSPOT_CODEC,
-  [QUESTION_TYPE_KEY.STAR]: STAR_CODEC
+  [QUESTION_TYPE_KEY.STAR]: STAR_CODEC,
+  [QUESTION_TYPE_KEY.VIDEO_RECORDING]: VIDEO_RECORDING_CODEC
 };
 
 /** Convert any answer to API submission payload */
@@ -320,6 +378,7 @@ export function extractAnswerDisplayValues(data: AnswerData): {
     case 'ORDERING':
     case 'HOTSPOT':
     case 'FILE_UPLOAD':
+    case 'VIDEO_RECORDING':
       return { selectedIds: [], selectedValues: [] };
     default:
       return { selectedIds: [], selectedValues: [] };
diff --git a/packages/question-types/src/answer-data.ts b/packages/question-types/src/answer-data.ts
index 8e2e5f18..df9ad10b 100644
--- a/packages/question-types/src/answer-data.ts
+++ b/packages/question-types/src/answer-data.ts
@@ -18,6 +18,20 @@ export type OrderingAnswerData = { type: 'ORDERING'; orderedValues: string[] };
 export type LinkAnswerData = { type: 'LINK'; urls: string[] };
 export type HotspotAnswerData = { type: 'HOTSPOT'; coordinates: Array<{ x: number; y: number }> };
 export type StarAnswerData = { type: 'STAR'; value: number };
+export type VideoRecordingAnswerData = {
+  type: 'VIDEO_RECORDING';
+  assetId: string;
+  storageKey: string;
+  fileName: string;
+  mimeType: string;
+  size: number;
+  durationSeconds: number;
+  recordedAt: string;
+  uploadedAt: string;
+  provider: 'cloudflare';
+  retakeCount?: number;
+  playbackUrl?: string;
+};
 
 export type AnswerData =
   | RadioAnswerData
@@ -33,4 +47,5 @@ export type AnswerData =
   | OrderingAnswerData
   | LinkAnswerData
   | HotspotAnswerData
-  | StarAnswerData;
+  | StarAnswerData
+  | VideoRecordingAnswerData;
diff --git a/packages/question-types/src/exercise-section-types.ts b/packages/question-types/src/exercise-section-types.ts
new file mode 100644
index 00000000..80efebce
--- /dev/null
+++ b/packages/question-types/src/exercise-section-types.ts
@@ -0,0 +1,21 @@
+import type { ExerciseQuestionModel } from './exercise-types';
+
+export type ExerciseSectionAfterAction = 'continue' | 'go_to_section' | 'submit';
+
+export interface ExerciseSectionAfterBehavior {
+  action: ExerciseSectionAfterAction;
+  exerciseSectionId?: string;
+}
+
+export type ExerciseSectionDisplayMode = 'one_question' | 'all_questions';
+export type ExerciseSectionColorTheme = 'blue' | 'green' | 'amber' | 'rose' | 'violet' | 'slate';
+
+export interface ExerciseSectionModel {
+  id?: string;
+  title: string;
+  description?: string | null;
+  order: number;
+  colorTheme: ExerciseSectionColorTheme;
+  afterBehavior: ExerciseSectionAfterBehavior;
+  questions: ExerciseQuestionModel[];
+}
diff --git a/packages/question-types/src/exercise-types.ts b/packages/question-types/src/exercise-types.ts
index 399523a6..ce00405e 100644
--- a/packages/question-types/src/exercise-types.ts
+++ b/packages/question-types/src/exercise-types.ts
@@ -1,5 +1,5 @@
 import type { QuestionTypeKey } from './question-type-keys';
-import type { AnswerData } from './answer-data';
+import type { AnswerData, VideoRecordingAnswerData } from './answer-data';
 
 export type ExerciseQuestionTypeKey = QuestionTypeKey;
 
@@ -105,6 +105,41 @@ export type ExerciseQuestionLabelKey =
   | 'file_upload.take.view'
   | 'file_upload.preview.accepted_types_label'
   | 'file_upload.preview.max_size_label'
+  | 'video_recording.edit.max_duration_label'
+  | 'video_recording.edit.max_duration_helper'
+  | 'video_recording.edit.max_duration_placeholder'
+  | 'video_recording.edit.manual_grading'
+  | 'video_recording.take.unsupported'
+  | 'video_recording.take.permission_prompt'
+  | 'video_recording.take.permission_denied'
+  | 'video_recording.take.start_camera'
+  | 'video_recording.take.camera_label'
+  | 'video_recording.take.camera_placeholder'
+  | 'video_recording.take.play_preview'
+  | 'video_recording.take.pause_preview'
+  | 'video_recording.take.start_recording'
+  | 'video_recording.take.stop_recording'
+  | 'video_recording.take.elapsed'
+  | 'video_recording.take.remaining'
+  | 'video_recording.take.max_duration'
+  | 'video_recording.take.too_short'
+  | 'video_recording.take.use_recording'
+  | 'video_recording.take.retake'
+  | 'video_recording.take.delete'
+  | 'video_recording.take.retry_upload'
+  | 'video_recording.take.uploading'
+  | 'video_recording.take.uploaded'
+  | 'video_recording.take.upload_failed'
+  | 'video_recording.take.replaces_previous'
+  | 'video_recording.preview.max_duration_label'
+  | 'video_recording.preview.manual_grading'
+  | 'video_recording.submission.no_video'
+  | 'video_recording.submission.unavailable'
+  | 'video_recording.submission.duration'
+  | 'video_recording.submission.file_size'
+  | 'video_recording.submission.recorded_at'
+  | 'video_recording.submission.uploaded_at'
+  | 'video_recording.submission.retake_count'
   | 'link.edit.instructions_placeholder'
   | 'link.edit.helper'
   | 'link.take.helper'
@@ -195,6 +230,17 @@ export type ExerciseQuestionFileUploader = (
   file: File
 ) => Promise<{ fileKey: string; fileName: string; fileUrl?: string }>;
 
+export type ExerciseQuestionVideoRecordingUploader = (input: {
+  questionId: number | string;
+  blob: Blob;
+  fileName: string;
+  mimeType: string;
+  size: number;
+  durationSeconds: number;
+  recordedAt: string;
+  retakeCount: number;
+}) => Promise<VideoRecordingAnswerData>;
+
 export interface ExerciseRendererDefinition<TRenderer = unknown> {
   edit: TRenderer;
   take: TRenderer;
@@ -211,8 +257,9 @@ export interface ExerciseQuestionRendererProps {
   maxSubmissionItems?: number;
   disabled?: boolean;
   labels?: ExerciseQuestionLabels;
-  onAnswerChange?: (answer: AnswerData) => void;
+  onAnswerChange?: (answer: AnswerData | null) => void;
   onQuestionChange?: (question: ExerciseQuestionModel) => void;
   onImageUpload?: ExerciseQuestionImageUploader;
   onFileUpload?: ExerciseQuestionFileUploader;
+  onVideoRecordingUpload?: ExerciseQuestionVideoRecordingUploader;
 }
diff --git a/packages/question-types/src/index.ts b/packages/question-types/src/index.ts
index 689f3300..f9bbbda0 100644
--- a/packages/question-types/src/index.ts
+++ b/packages/question-types/src/index.ts
@@ -8,6 +8,7 @@ export * from './question-scoring-rules';
 export * from './question-scoring';
 
 export * from './exercise-types';
+export * from './exercise-section-types';
 export * from './render-contract';
 export * from './form-state';
 export * from './answer-data';
@@ -15,3 +16,4 @@ export * from './answer-codecs';
 export * from './renderer-registry';
 export * from './textarea-validation';
 export * from './star-rating-settings';
+export * from './video-recording-settings';
diff --git a/packages/question-types/src/question-answer-payload.ts b/packages/question-types/src/question-answer-payload.ts
index 8710be65..ef5eaf79 100644
--- a/packages/question-types/src/question-answer-payload.ts
+++ b/packages/question-types/src/question-answer-payload.ts
@@ -14,7 +14,8 @@ export type QuestionAnswerPayload =
   | OrderingAnswerPayload
   | HotspotAnswerPayload
   | LinkAnswerPayload
-  | StarAnswerPayload;
+  | StarAnswerPayload
+  | VideoRecordingAnswerPayload;
 
 interface BaseAnswerPayload {
   type: QuestionTypeKey;
@@ -92,3 +93,17 @@ export interface StarAnswerPayload extends BaseAnswerPayload {
   type: typeof QUESTION_TYPE_KEY.STAR;
   value: number;
 }
+
+export interface VideoRecordingAnswerPayload extends BaseAnswerPayload {
+  type: typeof QUESTION_TYPE_KEY.VIDEO_RECORDING;
+  assetId: string;
+  storageKey: string;
+  fileName: string;
+  mimeType: string;
+  size: number;
+  durationSeconds: number;
+  recordedAt: string;
+  uploadedAt: string;
+  provider: 'cloudflare';
+  retakeCount?: number;
+}
diff --git a/packages/question-types/src/question-type-capabilities.ts b/packages/question-types/src/question-type-capabilities.ts
index f4d73f97..ec9a5f3a 100644
--- a/packages/question-types/src/question-type-capabilities.ts
+++ b/packages/question-types/src/question-type-capabilities.ts
@@ -1,5 +1,6 @@
 import type { QuestionTypeKey } from './question-type-keys';
 import { getQuestionTypeByKey } from './question-type-lookup';
+import { QUESTION_TYPE_REGISTRY } from './question-type-registry';
 
 export function isAutoGradableQuestionType(key: QuestionTypeKey): boolean {
   return getQuestionTypeByKey(key).autoGradable;
@@ -12,3 +13,13 @@ export function supportsPartialCredit(key: QuestionTypeKey): boolean {
 export function requiresManualGrading(key: QuestionTypeKey): boolean {
   return getQuestionTypeByKey(key).manualGradingRequired;
 }
+
+/** Numeric ids of every auto-gradable question type, pulled from the registry. */
+export const AUTO_GRADABLE_QUESTION_TYPE_IDS: readonly number[] = QUESTION_TYPE_REGISTRY.filter(
+  (entry) => entry.autoGradable
+).map((entry) => entry.id);
+
+/** True when the numeric `questionTypeId` refers to an auto-gradable type. */
+export function isAutoGradableQuestionTypeId(questionTypeId: number): boolean {
+  return AUTO_GRADABLE_QUESTION_TYPE_IDS.includes(questionTypeId);
+}
diff --git a/packages/question-types/src/question-type-keys.ts b/packages/question-types/src/question-type-keys.ts
index 3f9c306d..1fe18c27 100644
--- a/packages/question-types/src/question-type-keys.ts
+++ b/packages/question-types/src/question-type-keys.ts
@@ -12,7 +12,8 @@ export const QUESTION_TYPE_KEY = {
   HOTSPOT: 'HOTSPOT',
   LINK: 'LINK',
   WORD_BANK: 'WORD_BANK',
-  STAR: 'STAR'
+  STAR: 'STAR',
+  VIDEO_RECORDING: 'VIDEO_RECORDING'
 } as const;
 
 export type QuestionTypeKey = (typeof QUESTION_TYPE_KEY)[keyof typeof QUESTION_TYPE_KEY];
diff --git a/packages/question-types/src/question-type-registry.ts b/packages/question-types/src/question-type-registry.ts
index c991d905..e82b0fae 100644
--- a/packages/question-types/src/question-type-registry.ts
+++ b/packages/question-types/src/question-type-registry.ts
@@ -127,6 +127,15 @@ export const QUESTION_TYPE_REGISTRY: readonly QuestionTypeMetadata[] = [
     autoGradable: true,
     supportsPartialCredit: false,
     manualGradingRequired: false
+  },
+  {
+    key: QUESTION_TYPE_KEY.VIDEO_RECORDING,
+    typename: 'VIDEO_RECORDING',
+    label: 'Video recording',
+    id: 15,
+    autoGradable: false,
+    supportsPartialCredit: false,
+    manualGradingRequired: true
   }
 ] as const;
 
diff --git a/packages/question-types/src/render-contract.ts b/packages/question-types/src/render-contract.ts
index 641a8abe..e947ff3a 100644
--- a/packages/question-types/src/render-contract.ts
+++ b/packages/question-types/src/render-contract.ts
@@ -1,6 +1,7 @@
 import type {
   ExerciseQuestionFileUploader,
   ExerciseQuestionImageUploader,
+  ExerciseQuestionVideoRecordingUploader,
   ExerciseQuestionLabelKey,
   ExerciseQuestionLabels,
   ExerciseQuestionModel,
@@ -19,6 +20,7 @@ export interface ExerciseQuestionRenderContract {
   labels?: ExerciseQuestionLabels;
   onImageUpload?: ExerciseQuestionImageUploader;
   onFileUpload?: ExerciseQuestionFileUploader;
+  onVideoRecordingUpload?: ExerciseQuestionVideoRecordingUploader;
 }
 
 export interface ExerciseQuestionListRenderContract {
@@ -31,6 +33,7 @@ export interface ExerciseQuestionListRenderContract {
   labels?: ExerciseQuestionLabels;
   onImageUpload?: ExerciseQuestionImageUploader;
   onFileUpload?: ExerciseQuestionFileUploader;
+  onVideoRecordingUpload?: ExerciseQuestionVideoRecordingUploader;
 }
 
 export function getExerciseQuestionLabel(
diff --git a/packages/question-types/src/video-recording-settings.ts b/packages/question-types/src/video-recording-settings.ts
new file mode 100644
index 00000000..239880a7
--- /dev/null
+++ b/packages/question-types/src/video-recording-settings.ts
@@ -0,0 +1,14 @@
+export const VIDEO_RECORDING_DEFAULT_MAX_DURATION_SECONDS = 60;
+export const VIDEO_RECORDING_PLATFORM_MAX_DURATION_SECONDS = 120;
+export const VIDEO_RECORDING_MIN_DURATION_SECONDS = 1;
+
+export function getVideoRecordingMaxDurationSeconds(settings?: Record<string, unknown> | null): number {
+  const rawDuration = settings?.maxDurationSeconds;
+  const duration = typeof rawDuration === 'number' ? rawDuration : rawDuration != null ? Number(rawDuration) : NaN;
+
+  if (!Number.isFinite(duration) || duration <= 0) {
+    return VIDEO_RECORDING_DEFAULT_MAX_DURATION_SECONDS;
+  }
+
+  return Math.min(Math.round(duration), VIDEO_RECORDING_PLATFORM_MAX_DURATION_SECONDS);
+}
diff --git a/packages/question-types/tests/question-type-registry.test.ts b/packages/question-types/tests/question-type-registry.test.ts
index cee5d3f0..1b50c6a7 100644
--- a/packages/question-types/tests/question-type-registry.test.ts
+++ b/packages/question-types/tests/question-type-registry.test.ts
@@ -1,5 +1,6 @@
 import { describe, expect, it } from 'vitest';
 import {
+  AUTO_GRADABLE_QUESTION_TYPE_IDS,
   QUESTION_TYPE_BY_KEY,
   QUESTION_TYPE_ID_TO_KEY,
   QUESTION_TYPE_IDS,
@@ -11,6 +12,7 @@ import {
   getQuestionTypeByTypename,
   getQuestionTypeId,
   isAutoGradableQuestionType,
+  isAutoGradableQuestionTypeId,
   requiresManualGrading,
   supportsPartialCredit
 } from '../src';
@@ -127,6 +129,14 @@ const EXPECTED_REGISTRY = [
     autoGradable: true,
     supportsPartialCredit: false,
     manualGradingRequired: false
+  },
+  {
+    key: QUESTION_TYPE_KEY.VIDEO_RECORDING,
+    typename: 'VIDEO_RECORDING',
+    id: 15,
+    autoGradable: false,
+    supportsPartialCredit: false,
+    manualGradingRequired: true
   }
 ] as const;
 
@@ -170,4 +180,17 @@ describe('question type registry', () => {
     expect(getQuestionTypeByTypename('UNKNOWN')).toBeUndefined();
     expect(getQuestionTypeById(999)).toBeUndefined();
   });
+
+  it('AUTO_GRADABLE_QUESTION_TYPE_IDS matches registry flag by id', () => {
+    const expectedIds = QUESTION_TYPE_REGISTRY.filter((entry) => entry.autoGradable).map((entry) => entry.id);
+    expect(AUTO_GRADABLE_QUESTION_TYPE_IDS).toEqual(expectedIds);
+  });
+
+  it('isAutoGradableQuestionTypeId agrees with isAutoGradableQuestionType for every registry entry', () => {
+    for (const entry of QUESTION_TYPE_REGISTRY) {
+      expect(isAutoGradableQuestionTypeId(entry.id)).toBe(entry.autoGradable);
+      expect(isAutoGradableQuestionTypeId(entry.id)).toBe(isAutoGradableQuestionType(entry.key));
+    }
+    expect(isAutoGradableQuestionTypeId(9999)).toBe(false);
+  });
 });
diff --git a/packages/storybook/src/molecules/animation/animation.stories.svelte b/packages/storybook/src/molecules/animation/animation.stories.svelte
index 3cd94481..b73bb37b 100644
--- a/packages/storybook/src/molecules/animation/animation.stories.svelte
+++ b/packages/storybook/src/molecules/animation/animation.stories.svelte
@@ -6,6 +6,7 @@
     BorderBeam,
     CardBody,
     CardContainer,
+    DotField,
     DotPattern,
     GradualSpacing,
     HeroVideoDialog,
@@ -47,6 +48,30 @@
   {/snippet}
 </Story>
 
+<Story name="DotField">
+  {#snippet template()}
+    <div
+      class="ui:relative ui:mx-auto ui:h-[500px] ui:w-full ui:max-w-3xl ui:overflow-hidden ui:rounded-xl ui:border ui:bg-background"
+    >
+      <DotField
+        dotRadius={1.5}
+        dotSpacing={14}
+        cursorRadius={500}
+        cursorForce={0.1}
+        bulgeOnly={true}
+        bulgeStrength={67}
+        glowRadius={160}
+        sparkle={false}
+        waveAmplitude={0}
+        class="ui:absolute ui:inset-0 ui:h-full ui:w-full"
+      />
+      <div class="ui:relative ui:z-10 ui:flex ui:h-full ui:items-center ui:justify-center ui:text-sm">
+        Move the cursor over this area
+      </div>
+    </div>
+  {/snippet}
+</Story>
+
 <Story name="CardContainer">
   {#snippet template()}
     <CardContainer className="ui:max-w-lg">
diff --git a/packages/storybook/src/molecules/course-creator/course-creator.stories.svelte b/packages/storybook/src/molecules/course-creator/course-creator.stories.svelte
new file mode 100644
index 00000000..c2487a9f
--- /dev/null
+++ b/packages/storybook/src/molecules/course-creator/course-creator.stories.svelte
@@ -0,0 +1,61 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { CourseCreator } from '@cio/ui/custom/course-creator';
+
+  const { Story } = defineMeta({
+    title: 'Molecules/CourseCreator',
+    component: CourseCreator,
+    parameters: {
+      layout: 'centered',
+      backgrounds: {
+        default: 'dark',
+        values: [{ name: 'dark', value: '#000000' }]
+      }
+    },
+    tags: ['autodocs']
+  });
+</script>
+
+<script>
+  const heading = 'What course do you want to create?';
+  const placeholder = 'Ask what you want to learn...';
+  const levelOptions = [
+    { value: 'beginner', label: 'Beginner' },
+    { value: 'intermediate', label: 'Intermediate' },
+    { value: 'advanced', label: 'Advanced' }
+  ];
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <div class="w-[800px] p-8">
+      <CourseCreator {heading} {placeholder} {levelOptions} onsubmit={(p) => console.log('submit', p)} />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Loading">
+  {#snippet template()}
+    <div class="w-[800px] p-8">
+      <CourseCreator {heading} {placeholder} {levelOptions} loading={true} onsubmit={(p) => console.log('submit', p)} />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Custom Options">
+  {#snippet template()}
+    <div class="w-[800px] p-8">
+      <CourseCreator
+        {heading}
+        {placeholder}
+        levelOptions={[
+          { value: 'beginner', label: 'Beginner' },
+          { value: 'intermediate', label: 'Intermediate' },
+          { value: 'advanced', label: 'Advanced' },
+          { value: 'expert', label: 'Expert' }
+        ]}
+        onsubmit={(p) => console.log('submit', p)}
+      />
+    </div>
+  {/snippet}
+</Story>
diff --git a/packages/storybook/src/molecules/exercise-question/exercise-question.stories.svelte b/packages/storybook/src/molecules/exercise-question/exercise-question.stories.svelte
index 9d4a75e6..619f9226 100644
--- a/packages/storybook/src/molecules/exercise-question/exercise-question.stories.svelte
+++ b/packages/storybook/src/molecules/exercise-question/exercise-question.stories.svelte
@@ -12,10 +12,12 @@
     NUMERIC_FIXTURE,
     ORDERING_FIXTURE,
     RADIO_FIXTURE,
+    SECTIONED_EXERCISE_FIXTURE,
     SHORT_ANSWER_FIXTURE,
     STAR_FIXTURE,
     TEXTAREA_FIXTURE,
     TRUE_FALSE_FIXTURE,
+    VIDEO_RECORDING_FIXTURE,
     WORD_BANK_FIXTURE
   } from './question-fixtures';
 
@@ -27,6 +29,16 @@
     },
     tags: ['autodocs']
   });
+
+  const sectionLabels = { section: 'Section', questions: 'questions', points: 'points' };
+  const sectionOverviewLabels = { ...sectionLabels, back: 'Back', beginSection: 'Start section' };
+  const autoGroupedSection = {
+    ...SECTIONED_EXERCISE_FIXTURE[0],
+    id: 'section-auto-grouped',
+    title: 'Section 1',
+    description: null,
+    colorTheme: 'blue' as const
+  };
 </script>
 
 <Story name="Checkbox">
@@ -39,6 +51,129 @@
   {/snippet}
 </Story>
 
+<Story name="Exercise Sections - Section Intro">
+  {#snippet template()}
+    <div class="ui:max-w-5xl">
+      <ExerciseQuestion.SectionOverview
+        sectionTitle={SECTIONED_EXERCISE_FIXTURE[0].title}
+        sectionDescription={SECTIONED_EXERCISE_FIXTURE[0].description}
+        sectionNumber={1}
+        totalSections={SECTIONED_EXERCISE_FIXTURE.length}
+        questionCount={SECTIONED_EXERCISE_FIXTURE[0].questions.length}
+        totalPoints={10}
+        colorTheme={SECTIONED_EXERCISE_FIXTURE[0].colorTheme}
+        onBegin={() => {}}
+        onBack={() => {}}
+        labels={sectionOverviewLabels}
+      />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Exercise Sections - Auto Grouped Existing Questions">
+  {#snippet template()}
+    <div class="ui:max-w-5xl">
+      <ExerciseQuestion.SectionOverview
+        sectionTitle={autoGroupedSection.title}
+        sectionDescription={autoGroupedSection.description}
+        sectionNumber={1}
+        totalSections={2}
+        questionCount={autoGroupedSection.questions.length}
+        totalPoints={10}
+        colorTheme={autoGroupedSection.colorTheme}
+        onBegin={() => {}}
+        onBack={() => {}}
+        labels={sectionOverviewLabels}
+      />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Exercise Sections - Question In Progress">
+  {#snippet template()}
+    <div class="ui:grid ui:max-w-5xl ui:gap-6 ui:lg:grid-cols-[190px_minmax(0,1fr)]">
+      <ExerciseQuestion.SectionNavigationSidebar
+        sections={SECTIONED_EXERCISE_FIXTURE.map((section, sectionIndex) => ({
+          id: section.id,
+          title: section.title,
+          isCurrent: sectionIndex === 0,
+          questions: section.questions.map((question, questionIndex) => ({
+            key: String(question.id),
+            label: `Q${questionIndex + 1}`,
+            isAnswered: questionIndex === 0,
+            isCurrent: sectionIndex === 0 && questionIndex === 1
+          }))
+        }))}
+      />
+
+      <section class="ui:space-y-4">
+        <ExerciseQuestion.SectionHeader
+          title={SECTIONED_EXERCISE_FIXTURE[0].title}
+          description={SECTIONED_EXERCISE_FIXTURE[0].description}
+          sectionNumber={1}
+          totalSections={SECTIONED_EXERCISE_FIXTURE.length}
+          colorTheme={SECTIONED_EXERCISE_FIXTURE[0].colorTheme}
+          questionCount={SECTIONED_EXERCISE_FIXTURE[0].questions.length}
+          totalPoints={10}
+          labels={sectionLabels}
+        />
+
+        <ExerciseQuestion.QuestionRenderer
+          contract={{
+            mode: 'take',
+            question: SECTIONED_EXERCISE_FIXTURE[0].questions[1],
+            answer: TRUE_FALSE_FIXTURE.answer,
+            disabled: false
+          }}
+        />
+      </section>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Exercise Sections - Grading View">
+  {#snippet template()}
+    <div class="ui:max-w-4xl ui:space-y-8">
+      {#each SECTIONED_EXERCISE_FIXTURE as section, sectionIndex (section.id)}
+        <section class="ui:space-y-4">
+          <ExerciseQuestion.SectionHeader
+            title={section.title}
+            description={section.description}
+            sectionNumber={sectionIndex + 1}
+            totalSections={SECTIONED_EXERCISE_FIXTURE.length}
+            colorTheme={section.colorTheme}
+            questionCount={section.questions.length}
+            totalPoints={section.questions.length * 5}
+            labels={sectionLabels}
+          />
+
+          <ExerciseQuestion.QuestionList
+            contract={{
+              mode: 'review',
+              questions: section.questions.map((question, questionIndex) => ({
+                ...question,
+                title: `${questionIndex + 1}. ${question.title}`
+              })),
+              answersByKey: {
+                'q-radio': RADIO_FIXTURE.answer,
+                'q-true-false': TRUE_FALSE_FIXTURE.answer,
+                'q-short-answer': SHORT_ANSWER_FIXTURE.answer,
+                'q-ordering': ORDERING_FIXTURE.answer
+              },
+              disabled: true
+            }}
+            itemClass="ui:mb-4"
+          />
+
+          <div class="ui:flex ui:justify-end ui:border-t ui:pt-3 ui:text-sm ui:font-medium">
+            Section subtotal: {section.questions.length * 4}/{section.questions.length * 5}
+          </div>
+        </section>
+      {/each}
+    </div>
+  {/snippet}
+</Story>
+
 <Story name="FileUpload">
   {#snippet template()}
     <QuestionTypeModes
@@ -49,6 +184,26 @@
   {/snippet}
 </Story>
 
+<Story
+  name="VideoRecording"
+  parameters={{
+    docs: {
+      description: {
+        story:
+          'Browser-recorded video answer with a circular student recording UI, upload states, retakes, and manual grading metadata.'
+      }
+    }
+  }}
+>
+  {#snippet template()}
+    <QuestionTypeModes
+      question={VIDEO_RECORDING_FIXTURE.question}
+      answer={VIDEO_RECORDING_FIXTURE.answer}
+      viewAnswer={null}
+    />
+  {/snippet}
+</Story>
+
 <Story name="FillBlank">
   {#snippet template()}
     <QuestionTypeModes
diff --git a/packages/storybook/src/molecules/exercise-question/question-fixtures.ts b/packages/storybook/src/molecules/exercise-question/question-fixtures.ts
index 1861b2c4..ecb22be0 100644
--- a/packages/storybook/src/molecules/exercise-question/question-fixtures.ts
+++ b/packages/storybook/src/molecules/exercise-question/question-fixtures.ts
@@ -6,6 +6,15 @@ export interface QuestionStoryFixture {
   wrongAnswer?: unknown;
 }
 
+export interface ExerciseSectionStoryFixture {
+  id: string;
+  title: string;
+  description?: string;
+  order: number;
+  colorTheme: 'blue' | 'green' | 'amber' | 'rose' | 'violet' | 'slate';
+  questions: Record<string, unknown>[];
+}
+
 const OPTION_IMAGE_A = 'https://brand.cdn.clsrio.com/classroomio-lms-courses.png';
 const OPTION_IMAGE_B = 'https://assets.cdn.clsrio.com/www/futuristic-classroom.jpg';
 
@@ -196,6 +205,34 @@ export const FILE_UPLOAD_FIXTURE: QuestionStoryFixture = {
   answer: 'lesson-plan-week-03.pdf'
 };
 
+export const VIDEO_RECORDING_FIXTURE: QuestionStoryFixture = {
+  question: {
+    id: 'q-video-recording',
+    key: 'q-video-recording',
+    title: 'Record a short reflection on what you learned. [VIDEO_RECORDING]',
+    questionType: 'VIDEO_RECORDING',
+    settings: {
+      description: 'Use the browser camera and microphone. You can retake before submitting.',
+      maxDurationSeconds: 120,
+      allowRetakes: true
+    }
+  },
+  answer: {
+    type: 'VIDEO_RECORDING',
+    assetId: '00000000-0000-4000-8000-000000000001',
+    storageKey: 'exercise-recordings/story/video-recording-demo.webm',
+    fileName: 'video-recording-demo.webm',
+    mimeType: 'video/webm',
+    size: 1_204_224,
+    durationSeconds: 42,
+    recordedAt: '2026-04-30T12:00:00.000Z',
+    uploadedAt: '2026-04-30T12:01:00.000Z',
+    provider: 'cloudflare',
+    retakeCount: 2,
+    playbackUrl: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm'
+  }
+};
+
 export const MATCHING_FIXTURE: QuestionStoryFixture = {
   question: {
     id: 'q-matching',
@@ -256,3 +293,22 @@ export const LINK_FIXTURE: QuestionStoryFixture = {
   },
   answer: ['https://classroomio.com/docs', 'https://www.svelte.dev']
 };
+
+export const SECTIONED_EXERCISE_FIXTURE: ExerciseSectionStoryFixture[] = [
+  {
+    id: 'section-foundations',
+    title: 'Foundations',
+    description: 'A short warm-up section before the applied scenario.',
+    order: 0,
+    colorTheme: 'blue',
+    questions: [RADIO_FIXTURE.question, TRUE_FALSE_FIXTURE.question]
+  },
+  {
+    id: 'section-application',
+    title: 'Applied Practice',
+    description: 'Students solve open-response and ordering tasks.',
+    order: 1,
+    colorTheme: 'green',
+    questions: [SHORT_ANSWER_FIXTURE.question, ORDERING_FIXTURE.question]
+  }
+];
diff --git a/packages/storybook/src/molecules/exercise-question/question-labels.ts b/packages/storybook/src/molecules/exercise-question/question-labels.ts
index 58f95f5b..7e1e4334 100644
--- a/packages/storybook/src/molecules/exercise-question/question-labels.ts
+++ b/packages/storybook/src/molecules/exercise-question/question-labels.ts
@@ -105,6 +105,41 @@ export const QUESTION_LABELS = {
   'file_upload.take.download': 'Download',
   'file_upload.preview.accepted_types_label': 'Accepted types',
   'file_upload.preview.max_size_label': 'Max size (MB)',
+  'video_recording.edit.max_duration_label': 'Max duration',
+  'video_recording.edit.max_duration_helper': 'Students record in the browser and can retake before submitting.',
+  'video_recording.edit.max_duration_placeholder': '60',
+  'video_recording.edit.manual_grading': 'Requires manual grading',
+  'video_recording.take.unsupported': 'Video recording is not supported in this browser.',
+  'video_recording.take.permission_prompt': 'Allow camera and microphone access to record your answer.',
+  'video_recording.take.permission_denied': 'Camera or microphone access was blocked. Check browser permissions.',
+  'video_recording.take.start_camera': 'Set up camera',
+  'video_recording.take.camera_label': 'Camera',
+  'video_recording.take.camera_placeholder': 'Select camera',
+  'video_recording.take.play_preview': 'Play recording preview',
+  'video_recording.take.pause_preview': 'Pause recording preview',
+  'video_recording.take.start_recording': 'Start recording',
+  'video_recording.take.stop_recording': 'Stop recording',
+  'video_recording.take.elapsed': 'Elapsed',
+  'video_recording.take.remaining': 'Remaining',
+  'video_recording.take.max_duration': 'Max',
+  'video_recording.take.too_short': 'Record for at least 1 second.',
+  'video_recording.take.use_recording': 'Use recording',
+  'video_recording.take.retake': 'Retake',
+  'video_recording.take.delete': 'Delete recording',
+  'video_recording.take.retry_upload': 'Retry upload',
+  'video_recording.take.uploading': 'Uploading recording...',
+  'video_recording.take.uploaded': 'Recording uploaded',
+  'video_recording.take.upload_failed': 'Upload failed. Try again.',
+  'video_recording.take.replaces_previous': 'A new accepted take replaces the previous answer after upload.',
+  'video_recording.preview.max_duration_label': 'Max duration',
+  'video_recording.preview.manual_grading': 'Learners record a short video response. Manual grading required.',
+  'video_recording.submission.no_video': 'No video submitted.',
+  'video_recording.submission.unavailable': 'Video unavailable.',
+  'video_recording.submission.duration': 'Duration',
+  'video_recording.submission.file_size': 'File size',
+  'video_recording.submission.recorded_at': 'Recorded',
+  'video_recording.submission.uploaded_at': 'Uploaded',
+  'video_recording.submission.retake_count': 'Retakes',
   'link.edit.instructions_placeholder': 'Optional instructions for learners',
   'link.edit.helper': 'Learners can submit one or more valid URLs (http/https).',
   'link.take.helper': 'Add one or more links. Only valid http/https URLs are accepted.',
diff --git a/packages/storybook/src/molecules/exercise-question/question-type-modes.svelte b/packages/storybook/src/molecules/exercise-question/question-type-modes.svelte
index 198a2e24..13bbefbe 100644
--- a/packages/storybook/src/molecules/exercise-question/question-type-modes.svelte
+++ b/packages/storybook/src/molecules/exercise-question/question-type-modes.svelte
@@ -5,6 +5,7 @@
   interface Props {
     question: Record;
     answer?: unknown;
+    viewAnswer?: unknown;
     /** When set, renders an additional Review block with this incorrect `AnswerData`. */
     wrongAnswer?: unknown;
   }
@@ -17,7 +18,7 @@
     settings?: Record<string, unknown>;
   };
 
-  let { question, answer = null, wrongAnswer = undefined }: Props = $props();
+  let { question, answer = null, viewAnswer: initialViewAnswer = answer, wrongAnswer = undefined }: Props = $props();
 
   function cloneQuestion(source: Record) {
     return JSON.parse(JSON.stringify(source));
@@ -109,6 +110,21 @@
           fileName: `lesson-plan-${index + 1}.pdf`,
           mimeType: 'application/pdf'
         };
+      case 'VIDEO_RECORDING':
+        return {
+          type: 'VIDEO_RECORDING',
+          assetId: `00000000-0000-4000-8000-${String(index + 1).padStart(12, '0')}`,
+          storageKey: `exercise-recordings/story/submission-${index + 1}.webm`,
+          fileName: `reflection-${index + 1}.webm`,
+          mimeType: 'video/webm',
+          size: 900_000 + index * 25_000,
+          durationSeconds: 30 + (index % 6) * 5,
+          recordedAt: '2026-04-30T12:00:00.000Z',
+          uploadedAt: '2026-04-30T12:01:00.000Z',
+          provider: 'cloudflare',
+          retakeCount: index % 4,
+          playbackUrl: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm'
+        };
       case 'MATCHING': {
         const pairs = Array.isArray(storyQuestion.settings?.pairs)
           ? (storyQuestion.settings?.pairs as Array<{ left: string; right: string }>)
@@ -168,7 +184,7 @@
 
   $effect(() => {
     editQuestion = cloneQuestion(question);
-    viewAnswer = answer;
+    viewAnswer = initialViewAnswer;
   });
 </script>
 
@@ -224,7 +240,7 @@
       contract={{
         mode: 'review',
         question,
-        answer: viewAnswer,
+        answer,
         labels: QUESTION_LABELS,
         disabled: true
       }}
diff --git a/packages/storybook/src/molecules/model-picker/model-picker.stories.svelte b/packages/storybook/src/molecules/model-picker/model-picker.stories.svelte
new file mode 100644
index 00000000..b61fa756
--- /dev/null
+++ b/packages/storybook/src/molecules/model-picker/model-picker.stories.svelte
@@ -0,0 +1,45 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { ModelPicker } from '@cio/ui/custom/model-picker';
+
+  const { Story } = defineMeta({
+    title: 'Molecules/ModelPicker',
+    component: ModelPicker,
+    parameters: {
+      layout: 'centered'
+    },
+    tags: ['autodocs']
+  });
+</script>
+
+<script>
+  import { DEFAULT_PICKER_MODEL_ID, type AgentModelId } from '@cio/utils/agent-models';
+
+  let selected = $state<AgentModelId>(DEFAULT_PICKER_MODEL_ID);
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <div class="p-8">
+      <ModelPicker value={selected} onChange={(id) => (selected = id)} />
+      <p class="mt-4 text-sm text-gray-500">Selected: {selected}</p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Select Variant">
+  {#snippet template()}
+    <div class="p-8">
+      <ModelPicker value={selected} variant="select" onChange={(id) => (selected = id)} />
+      <p class="mt-4 text-sm text-gray-500">Selected: {selected}</p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Disabled">
+  {#snippet template()}
+    <div class="p-8">
+      <ModelPicker value={DEFAULT_PICKER_MODEL_ID} disabled onChange={() => {}} />
+    </div>
+  {/snippet}
+</Story>
diff --git a/packages/storybook/src/molecules/newsfeed-reactions/newsfeed-reactions.stories.svelte b/packages/storybook/src/molecules/newsfeed-reactions/newsfeed-reactions.stories.svelte
index e1abb7ac..39c64e7b 100644
--- a/packages/storybook/src/molecules/newsfeed-reactions/newsfeed-reactions.stories.svelte
+++ b/packages/storybook/src/molecules/newsfeed-reactions/newsfeed-reactions.stories.svelte
@@ -1,4 +1,4 @@
-<script module>
+<script module lang="ts">
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import {
     NewsfeedReactions,
diff --git a/packages/storybook/src/molecules/public-course/fixtures.ts b/packages/storybook/src/molecules/public-course/fixtures.ts
new file mode 100644
index 00000000..46848f00
--- /dev/null
+++ b/packages/storybook/src/molecules/public-course/fixtures.ts
@@ -0,0 +1,187 @@
+import type {
+  PublicCourseCalloutData,
+  PublicCourseOrgData,
+  PublicCourseSidebarSection,
+  PublicExerciseViewData,
+  PublicLessonViewData
+} from '@cio/ui/custom/public-course';
+import type { ExerciseQuestionModel } from '@cio/question-types';
+
+export const CALLOUT_FIXTURE: PublicCourseCalloutData = {
+  title: 'Want to go deeper on this?',
+  description: 'Join the full "AI for Builders" cohort where we ship a production-grade RAG pipeline in 4 weeks.',
+  buttonLabel: 'Read more on my site',
+  buttonUrl: 'https://example.com/ai-for-builders'
+};
+
+export const ORG_FIXTURE: PublicCourseOrgData = {
+  id: 'org-1',
+  name: 'ClassroomIO',
+  siteName: 'classroomio',
+  avatarUrl: 'https://avatars.githubusercontent.com/u/119528464?s=200&v=4'
+};
+
+export const COURSE_TITLE_FIXTURE = 'AI for Builders — Crash Course';
+
+export const SIDEBAR_FIXTURE: PublicCourseSidebarSection[] = [
+  {
+    id: 'section-intro',
+    title: 'Getting started',
+    items: [
+      {
+        kind: 'lesson',
+        id: 'lesson-welcome',
+        slug: 'welcome',
+        title: 'Welcome to the course',
+        isUnlocked: true
+      },
+      {
+        kind: 'lesson',
+        id: 'lesson-setup',
+        slug: 'setting-up-your-environment',
+        title: 'Setting up your environment',
+        isUnlocked: true
+      }
+    ]
+  },
+  {
+    id: 'section-foundations',
+    title: 'Foundations',
+    items: [
+      {
+        kind: 'lesson',
+        id: 'lesson-intro-llms',
+        slug: 'intro-to-large-language-models',
+        title: 'Intro to large language models',
+        isUnlocked: true
+      },
+      {
+        kind: 'lesson',
+        id: 'lesson-hallucinations',
+        slug: 'hallucination-and-limitations',
+        title: 'Hallucination & limitations',
+        isUnlocked: true
+      },
+      {
+        kind: 'exercise',
+        id: 'exercise-foundations-quiz',
+        slug: 'foundations-quiz',
+        title: 'Foundations quiz',
+        isUnlocked: true
+      }
+    ]
+  },
+  {
+    id: 'section-advanced',
+    title: 'Advanced',
+    items: [
+      {
+        kind: 'lesson',
+        id: 'lesson-rag',
+        slug: 'retrieval-augmented-generation',
+        title: 'Retrieval-augmented generation',
+        isUnlocked: false
+      },
+      {
+        kind: 'lesson',
+        id: 'lesson-agents',
+        slug: 'building-agents',
+        title: 'Building agents',
+        isUnlocked: false
+      }
+    ]
+  }
+];
+
+export const LESSON_FIXTURE: PublicLessonViewData = {
+  kind: 'lesson',
+  title: 'Hallucination & limitations',
+  sectionTitle: 'Foundations',
+  body: `
+    <p>Large language models are incredibly capable, but they also confidently produce incorrect answers — what the field calls <em>hallucination</em>. Before we design systems around them, it helps to build an intuition for where they fail.</p>
+    <h2>When LLMs hallucinate</h2>
+    <ul>
+      <li>When asked about things outside of their training distribution.</li>
+      <li>When prompted with ambiguous or leading questions.</li>
+      <li>When asked to cite sources without retrieval grounding.</li>
+    </ul>
+    <p>In the next lessons we'll cover concrete mitigations, including retrieval, tool use, and structured outputs.</p>
+  `,
+  video: {
+    type: 'youtube',
+    link: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
+  },
+  isUnlocked: true
+};
+
+export const LESSON_LOCKED_FIXTURE: PublicLessonViewData = {
+  ...LESSON_FIXTURE,
+  title: 'Building agents',
+  isUnlocked: false,
+  video: null,
+  body: ''
+};
+
+const EXERCISE_QUESTION_FIXTURES: ExerciseQuestionModel[] = [
+  {
+    id: 'q-radio-1',
+    title: 'Which of these is the clearest sign of hallucination?',
+    questionType: 'RADIO',
+    points: 1,
+    options: [
+      { id: 'a', label: 'The model refuses to answer a question it doesn’t know.', isCorrect: false },
+      { id: 'b', label: 'The model confidently invents a fact that doesn’t exist.', isCorrect: true },
+      { id: 'c', label: 'The model cites a source verbatim.', isCorrect: false }
+    ]
+  },
+  {
+    id: 'q-checkbox-1',
+    title: 'Pick every mitigation that grounds an LLM in real data.',
+    questionType: 'CHECKBOX',
+    points: 2,
+    options: [
+      { id: 'a', label: 'Retrieval-augmented generation', isCorrect: true },
+      { id: 'b', label: 'Turning up temperature', isCorrect: false },
+      { id: 'c', label: 'Calling a tool / function', isCorrect: true },
+      { id: 'd', label: 'Asking the model to be more confident', isCorrect: false }
+    ]
+  },
+  {
+    id: 'q-tf-1',
+    title: 'LLMs always know when they’re wrong.',
+    questionType: 'TRUE_FALSE',
+    points: 1,
+    options: [
+      { id: 'true-option', label: 'True', value: 'true', isCorrect: false },
+      { id: 'false-option', label: 'False', value: 'false', isCorrect: true }
+    ]
+  },
+  {
+    id: 'q-short-1',
+    title: 'What’s the shorthand term for "retrieval-augmented generation"?',
+    questionType: 'SHORT_ANSWER',
+    points: 1,
+    options: [
+      { id: 'rag-1', label: 'rag', isCorrect: true },
+      { id: 'rag-2', label: 'RAG', isCorrect: true }
+    ],
+    settings: { caseSensitive: false }
+  },
+  {
+    id: 'q-numeric-1',
+    title: 'How many mitigations did we cover in this lesson? (A number is fine.)',
+    questionType: 'NUMERIC',
+    points: 1,
+    options: [{ id: 'three', label: '3', value: '3', isCorrect: true }],
+    settings: { tolerance: 0 }
+  }
+];
+
+export const EXERCISE_FIXTURE: PublicExerciseViewData = {
+  kind: 'exercise',
+  title: 'Foundations quiz',
+  description: 'A short check-in on the foundations we just covered. Graded instantly in your browser.',
+  sectionTitle: 'Foundations',
+  isUnlocked: true,
+  questions: EXERCISE_QUESTION_FIXTURES
+};
diff --git a/packages/storybook/src/molecules/public-course/public-course.stories.svelte b/packages/storybook/src/molecules/public-course/public-course.stories.svelte
new file mode 100644
index 00000000..248758a5
--- /dev/null
+++ b/packages/storybook/src/molecules/public-course/public-course.stories.svelte
@@ -0,0 +1,121 @@
+<script module lang="ts">
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { PublicCourse } from '@cio/ui';
+  import type { PublicCourseSidebarItem } from '@cio/ui/custom/public-course';
+  import { QUESTION_LABELS } from '../exercise-question/question-labels';
+  import {
+    CALLOUT_FIXTURE,
+    COURSE_TITLE_FIXTURE,
+    EXERCISE_FIXTURE,
+    LESSON_FIXTURE,
+    LESSON_LOCKED_FIXTURE,
+    ORG_FIXTURE,
+    SIDEBAR_FIXTURE
+  } from './fixtures';
+
+  const { Story } = defineMeta({
+    title: 'Molecules/PublicCourse',
+    component: PublicCourse.PublicCourseShell,
+    parameters: {
+      layout: 'fullscreen'
+    },
+    tags: ['autodocs']
+  });
+
+  const flatItems = SIDEBAR_FIXTURE.flatMap((section) => section.items);
+</script>
+
+<Story name="Lesson · desktop + mobile frames">
+  {#snippet template()}
+    {@const activeSlug = 'hallucination-and-limitations'}
+    {@const activeIndex = flatItems.findIndex((item) => item.slug === activeSlug)}
+    {@const activeItem = flatItems[activeIndex] ?? null}
+    <PublicCourse.PublicCourseShell
+      sections={SIDEBAR_FIXTURE}
+      courseTitle={COURSE_TITLE_FIXTURE}
+      org={ORG_FIXTURE}
+      {activeSlug}
+      {activeItem}
+      activeFlatIndex={activeIndex}
+      totalItems={flatItems.length}
+      hasPrev={activeIndex > 0}
+      hasNext={activeIndex >= 0 && activeIndex < flatItems.length - 1}
+      onItemClick={(item: PublicCourseSidebarItem) => console.log('navigate', item.slug)}
+      onPrev={() => console.log('prev')}
+      onNext={() => console.log('next')}
+    >
+      <PublicCourse.PublicLessonView lesson={LESSON_FIXTURE} callout={CALLOUT_FIXTURE} />
+    </PublicCourse.PublicCourseShell>
+  {/snippet}
+</Story>
+
+<Story name="Lesson · locked fallback (callout replaces body)">
+  {#snippet template()}
+    <PublicCourse.PublicCourseShell
+      sections={SIDEBAR_FIXTURE}
+      courseTitle={COURSE_TITLE_FIXTURE}
+      org={ORG_FIXTURE}
+      activeSlug="building-agents"
+      activeItem={{
+        kind: 'lesson',
+        id: 'lesson-agents',
+        slug: 'building-agents',
+        title: 'Building agents',
+        isUnlocked: false
+      }}
+      activeFlatIndex={flatItems.length - 1}
+      totalItems={flatItems.length}
+      hasPrev
+      hasNext={false}
+    >
+      <PublicCourse.PublicLessonView lesson={LESSON_LOCKED_FIXTURE} callout={CALLOUT_FIXTURE} />
+    </PublicCourse.PublicCourseShell>
+  {/snippet}
+</Story>
+
+<Story name="Exercise · client-graded quiz">
+  {#snippet template()}
+    {@const activeSlug = 'foundations-quiz'}
+    {@const activeIndex = flatItems.findIndex((item) => item.slug === activeSlug)}
+    <PublicCourse.PublicCourseShell
+      sections={SIDEBAR_FIXTURE}
+      courseTitle={COURSE_TITLE_FIXTURE}
+      org={ORG_FIXTURE}
+      {activeSlug}
+      activeItem={flatItems[activeIndex] ?? null}
+      activeFlatIndex={activeIndex}
+      totalItems={flatItems.length}
+      hasPrev={activeIndex > 0}
+      hasNext={activeIndex < flatItems.length - 1}
+    >
+      <PublicCourse.PublicExerciseView exercise={EXERCISE_FIXTURE} callout={CALLOUT_FIXTURE} labels={QUESTION_LABELS} />
+    </PublicCourse.PublicCourseShell>
+  {/snippet}
+</Story>
+
+<Story name="Sidebar · states only">
+  {#snippet template()}
+    <div class="ui:mx-auto ui:max-w-xs ui:border-r ui:border-border">
+      <PublicCourse.PublicCourseSidebar sections={SIDEBAR_FIXTURE} activeSlug="hallucination-and-limitations" />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Callout · inline + full variants">
+  {#snippet template()}
+    <div class="ui:mx-auto ui:max-w-2xl ui:space-y-8 ui:p-8">
+      <div>
+        <h3 class="ui:mb-2 ui:text-sm ui:font-semibold ui:text-muted-foreground">Inline (at bottom of lessons)</h3>
+        <PublicCourse.PublicCourseCallout callout={CALLOUT_FIXTURE} variant="inline" />
+      </div>
+      <div>
+        <h3 class="ui:mb-2 ui:text-sm ui:font-semibold ui:text-muted-foreground">Full (locked item replacement)</h3>
+        <PublicCourse.PublicCourseCallout callout={CALLOUT_FIXTURE} variant="full" />
+      </div>
+      <div>
+        <h3 class="ui:mb-2 ui:text-sm ui:font-semibold ui:text-muted-foreground">Full (no callout configured)</h3>
+        <PublicCourse.PublicCourseCallout callout={null} variant="full" />
+      </div>
+    </div>
+  {/snippet}
+</Story>
diff --git a/packages/ui/README.md b/packages/ui/README.md
index 69693ab6..09d49dc5 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -64,6 +64,7 @@ Components in the `custom` directory come from various sources or are built on t
 - `custom/image-cropper/` - Custom image cropping component
 - `custom/checkbox-field/` - Field component built on top of base Checkbox
 - `custom/newsfeed-reactions/` - Newsfeed reaction picker and summary used by course and program feeds
+- `custom/course-creator/` - ChatGPT-style course creation input with level and type selects
 
 ### Exercise question (`src/custom/exercise-question/`)
 
diff --git a/packages/ui/src/base/card/card.svelte b/packages/ui/src/base/card/card.svelte
index 7133b590..55ab22b3 100644
--- a/packages/ui/src/base/card/card.svelte
+++ b/packages/ui/src/base/card/card.svelte
@@ -14,7 +14,7 @@
   bind:this={ref}
   data-slot="card"
   class={cn(
-    'ui:bg-card ui:text-card-foreground ui:flex ui:flex-col ui:gap-6 ui:rounded-xl ui:border ui:py-6 ui:shadow-sm',
+    'ui:bg-card ui:text-card-foreground ui:flex ui:flex-col ui:gap-6 ui:rounded-lg ui:border ui:py-6',
     className
   )}
   {...restProps}
diff --git a/packages/ui/src/base/number-badge/index.ts b/packages/ui/src/base/number-badge/index.ts
new file mode 100644
index 00000000..9369c745
--- /dev/null
+++ b/packages/ui/src/base/number-badge/index.ts
@@ -0,0 +1 @@
+export { default as NumberBadge } from './number-badge.svelte';
diff --git a/packages/ui/src/base/number-badge/number-badge.svelte b/packages/ui/src/base/number-badge/number-badge.svelte
new file mode 100644
index 00000000..f993a821
--- /dev/null
+++ b/packages/ui/src/base/number-badge/number-badge.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import LockIcon from '@lucide/svelte/icons/lock';
+  import { cn } from '../../tools';
+
+  interface Props {
+    /** 1-indexed value shown when not `locked`. */
+    number: number;
+    /** When true, uses primary styling (e.g. active sidebar row or current question). */
+    active?: boolean;
+    /** Locked badges show a lock icon and muted treatment. */
+    locked?: boolean;
+    class?: string;
+  }
+
+  let { number, active = false, locked = false, class: className }: Props = $props();
+
+  const badgeClass = $derived(
+    cn(
+      'ui:inline-flex ui:items-center ui:justify-center ui:shrink-0',
+      'ui:size-7 ui:rounded-md ui:text-xs ui:font-medium ui:tabular-nums ui:tracking-tight',
+      'ui:transition-colors',
+      active
+        ? 'ui:bg-primary ui:text-primary-foreground'
+        : 'ui:border ui:bg-muted ui:text-muted-foreground ui:group-hover:bg-muted-foreground/15 ui:group-hover:text-foreground',
+      className
+    )
+  );
+</script>
+
+<span class={badgeClass} aria-hidden="true">
+  {#if locked}
+    <LockIcon class="ui:size-3.5" />
+  {:else}
+    {number}
+  {/if}
+</span>
diff --git a/packages/ui/src/base/page/page-header.svelte b/packages/ui/src/base/page/page-header.svelte
index a543ce5a..271ec343 100644
--- a/packages/ui/src/base/page/page-header.svelte
+++ b/packages/ui/src/base/page/page-header.svelte
@@ -18,7 +18,7 @@
   data-slot="page-header"
   class={cn(
     'ui:flex ui:my-4 ui:py-2 ui:flex-col',
-    isSticky && 'ui:sticky ui:top-13 ui:z-10 ui:bg-background',
+    isSticky && 'ui:sticky ui:top-14 ui:z-10 ui:bg-background',
     className
   )}
   {...restProps}
diff --git a/packages/ui/src/base/textarea/textarea.svelte b/packages/ui/src/base/textarea/textarea.svelte
index 2faa1cdf..0233cd81 100644
--- a/packages/ui/src/base/textarea/textarea.svelte
+++ b/packages/ui/src/base/textarea/textarea.svelte
@@ -15,7 +15,7 @@
   bind:this={ref}
   data-slot={dataSlot}
   class={cn(
-    'ui:border-input ui:placeholder:text-muted-foreground ui:focus-visible:border-ring ui:focus-visible:ring-ring/50 ui:aria-invalid:ring-destructive/20 ui:dark:aria-invalid:ring-destructive/40 ui:aria-invalid:border-destructive ui:dark:bg-input/30 ui:field-sizing-content ui:shadow-xs ui:flex ui:min-h-16 ui:w-full ui:rounded-md ui:border ui:bg-transparent ui:px-3 ui:py-2 ui:text-base ui:outline-none ui:transition-[color,box-shadow] ui:focus-visible:ring-[3px] ui:disabled:cursor-not-allowed ui:disabled:opacity-50 ui:md:text-sm',
+    'ui:border-input ui:placeholder:text-muted-foreground ui:focus-visible:border-ring ui:focus-visible:ring-ring/50 ui:aria-invalid:ring-destructive/20 ui:dark:aria-invalid:ring-destructive/40 ui:aria-invalid:border-destructive ui:dark:bg-input/30 ui:field-sizing-content ui:flex ui:min-h-16 ui:w-full ui:rounded-md ui:border ui:bg-transparent ui:px-3 ui:py-2 ui:text-base ui:outline-none ui:transition-[color,box-shadow] ui:focus-visible:ring-[3px] ui:disabled:cursor-not-allowed ui:disabled:opacity-50 ui:md:text-sm',
     className
   )}
   bind:value
diff --git a/packages/ui/src/base/toggle-group/toggle-group-item.svelte b/packages/ui/src/base/toggle-group/toggle-group-item.svelte
index f256fb42..72908a9a 100644
--- a/packages/ui/src/base/toggle-group/toggle-group-item.svelte
+++ b/packages/ui/src/base/toggle-group/toggle-group-item.svelte
@@ -2,7 +2,7 @@
   import { type VariantProps, tv } from 'tailwind-variants';
 
   export const toggleGroupItemVariants = tv({
-    base: "ui:hover:bg-muted ui:hover:text-muted-foreground ui:data-[state=on]:bg-accent ui:data-[state=on]:text-accent-foreground ui:focus-visible:border-ring ui:focus-visible:ring-ring/50 ui:aria-invalid:ring-destructive/20 ui:dark:aria-invalid:ring-destructive/40 ui:aria-invalid:border-destructive ui:inline-flex ui:items-center ui:justify-center ui:gap-2 ui:rounded-md ui:text-sm ui:font-medium ui:whitespace-nowrap ui:transition-[color,box-shadow] ui:outline-none ui:focus-visible:ring-[3px] ui:disabled:pointer-events-none ui:disabled:opacity-50 ui:[&_svg]:pointer-events-none ui:[&_svg]:shrink-0 ui:[&_svg:not([class*='ui:size-'])]:size-4",
+    base: "ui:hover:bg-muted ui:hover:text-muted-foreground ui:data-[state=on]:bg-primary ui:data-[state=on]:text-primary-foreground ui:focus-visible:border-ring ui:focus-visible:ring-ring/50 ui:aria-invalid:ring-destructive/20 ui:dark:aria-invalid:ring-destructive/40 ui:aria-invalid:border-destructive ui:inline-flex ui:items-center ui:justify-center ui:gap-2 ui:rounded-md ui:text-sm ui:font-medium ui:whitespace-nowrap ui:transition-[color,box-shadow] ui:outline-none ui:focus-visible:ring-[3px] ui:disabled:pointer-events-none ui:disabled:opacity-50 ui:[&_svg]:pointer-events-none ui:[&_svg]:shrink-0 ui:[&_svg:not([class*='ui:size-'])]:size-4",
     variants: {
       variant: {
         default: 'ui:bg-transparent',
diff --git a/packages/ui/src/custom/animation/blurfade/blurfade.svelte b/packages/ui/src/custom/animation/blurfade/blurfade.svelte
index a0e09e47..1bad3e6d 100644
--- a/packages/ui/src/custom/animation/blurfade/blurfade.svelte
+++ b/packages/ui/src/custom/animation/blurfade/blurfade.svelte
@@ -35,7 +35,7 @@
   });
 </script>
 
-<AnimatePresence let:item list={[{ key: id }]}>
+<AnimatePresence let:_item list={[{ key: id }]}>
   <Motion
     initial="hidden"
     animate={isInView}
diff --git a/packages/ui/src/custom/animation/dot-field/dot-field.svelte b/packages/ui/src/custom/animation/dot-field/dot-field.svelte
new file mode 100644
index 00000000..70374bd1
--- /dev/null
+++ b/packages/ui/src/custom/animation/dot-field/dot-field.svelte
@@ -0,0 +1,287 @@
+<script module lang="ts">
+  const TWO_PI = Math.PI * 2;
+
+  /** Resolves `color-mix(in srgb, var(--primary) …)` for canvas dot fills (inherits `--primary` from this component’s DOM subtree). */
+  function primaryMixOnRoot(el: HTMLElement, primaryPercent: number): string {
+    const probe = document.createElement('span');
+    probe.setAttribute('aria-hidden', 'true');
+    probe.style.cssText =
+      'position:fixed;left:0;top:0;width:0;height:0;overflow:hidden;visibility:hidden;pointer-events:none;' +
+      `color:var(--primary)`;
+    el.appendChild(probe);
+    const resolved = getComputedStyle(probe).color;
+    probe.remove();
+
+    return resolved || 'rgba(128, 128, 128, 0.25)';
+  }
+
+  type Dot = {
+    ax: number;
+    ay: number;
+    sx: number;
+    sy: number;
+    vx: number;
+    vy: number;
+    x: number;
+    y: number;
+  };
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../tools';
+
+  type Props = {
+    dotRadius?: number;
+    dotSpacing?: number;
+    cursorRadius?: number;
+    cursorForce?: number;
+    bulgeOnly?: boolean;
+    bulgeStrength?: number;
+    glowRadius?: number;
+    sparkle?: boolean;
+    waveAmplitude?: number;
+    glowColor?: string;
+    class?: string;
+  };
+
+  let {
+    dotRadius = 1.5,
+    dotSpacing = 14,
+    cursorRadius = 500,
+    cursorForce = 0.1,
+    bulgeOnly = true,
+    bulgeStrength = 67,
+    glowRadius = 160,
+    sparkle = false,
+    waveAmplitude = 0,
+    glowColor = '#ffffff',
+    class: className = ''
+  }: Props = $props();
+
+  let root: HTMLDivElement | undefined;
+  let canvas: HTMLCanvasElement | undefined;
+  let glowEl: SVGCircleElement | undefined;
+  const glowId = `dot-field-glow-${crypto.randomUUID().slice(0, 10)}`;
+
+  let dots: Dot[] = [];
+  const mouse = { x: -9999, y: -9999, prevX: -9999, prevY: -9999, speed: 0 };
+  let size = { w: 0, h: 0, offsetX: 0, offsetY: 0 };
+  let glowOpacity = 0;
+  let engagement = 0;
+
+  $effect(() => {
+    void dotRadius;
+    void dotSpacing;
+    void cursorRadius;
+    void cursorForce;
+    void bulgeOnly;
+    void bulgeStrength;
+    void sparkle;
+    void waveAmplitude;
+    void glowColor;
+
+    const currentGlow = glowEl;
+    if (!canvas || !root) return;
+
+    const canvasEl: HTMLCanvasElement = canvas;
+    const rootEl: HTMLDivElement = root;
+
+    const fillGradientFrom = primaryMixOnRoot(rootEl, 40);
+    const fillGradientTo = primaryMixOnRoot(rootEl, 22);
+
+    const ctx = canvasEl.getContext('2d', { alpha: true });
+
+    if (!ctx) return;
+
+    const context = ctx;
+    const dpr = Math.min(window.devicePixelRatio || 1, 2);
+    let resizeTimer: ReturnType<typeof setTimeout>;
+    let raf = 0;
+    let frameCount = 0;
+
+    function buildDots(w: number, h: number) {
+      const step = dotRadius + dotSpacing;
+      const cols = Math.floor(w / step);
+      const rows = Math.floor(h / step);
+      const padX = (w % step) / 2;
+      const padY = (h % step) / 2;
+      const nextDots: Dot[] = new Array(rows * cols);
+      let idx = 0;
+
+      for (let row = 0; row < rows; row++) {
+        for (let col = 0; col < cols; col++) {
+          const ax = padX + col * step + step / 2;
+          const ay = padY + row * step + step / 2;
+          nextDots[idx++] = { ax, ay, sx: ax, sy: ay, vx: 0, vy: 0, x: ax, y: ay };
+        }
+      }
+
+      dots = nextDots;
+    }
+
+    function doResize() {
+      const rect = rootEl.getBoundingClientRect();
+      const w = rect.width;
+      const h = rect.height;
+
+      canvasEl.width = w * dpr;
+      canvasEl.height = h * dpr;
+      canvasEl.style.width = `${w}px`;
+      canvasEl.style.height = `${h}px`;
+      context.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+      size = {
+        w,
+        h,
+        offsetX: rect.left + window.scrollX,
+        offsetY: rect.top + window.scrollY
+      };
+
+      buildDots(w, h);
+    }
+
+    function resize() {
+      clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(doResize, 100);
+    }
+
+    function onMouseMove(e: MouseEvent) {
+      mouse.x = e.pageX - size.offsetX;
+      mouse.y = e.pageY - size.offsetY;
+    }
+
+    function updateMouseSpeed() {
+      const dx = mouse.prevX - mouse.x;
+      const dy = mouse.prevY - mouse.y;
+      const dist = Math.sqrt(dx * dx + dy * dy);
+      mouse.speed += (dist - mouse.speed) * 0.5;
+      if (mouse.speed < 0.001) mouse.speed = 0;
+      mouse.prevX = mouse.x;
+      mouse.prevY = mouse.y;
+    }
+
+    const speedInterval = setInterval(updateMouseSpeed, 20);
+
+    function tick() {
+      frameCount++;
+      const len = dots.length;
+      const { w, h } = size;
+      const t = frameCount * 0.02;
+
+      const targetEngagement = Math.min(mouse.speed / 5, 1);
+      engagement += (targetEngagement - engagement) * 0.06;
+      if (engagement < 0.001) engagement = 0;
+
+      glowOpacity += (engagement - glowOpacity) * 0.08;
+      if (currentGlow) {
+        currentGlow.setAttribute('cx', String(mouse.x));
+        currentGlow.setAttribute('cy', String(mouse.y));
+        currentGlow.style.opacity = String(glowOpacity);
+      }
+
+      context.clearRect(0, 0, w, h);
+      const grad = context.createLinearGradient(0, 0, w, h);
+      grad.addColorStop(0, fillGradientFrom);
+      grad.addColorStop(1, fillGradientTo);
+      context.fillStyle = grad;
+
+      const crSq = cursorRadius * cursorRadius;
+      const rad = dotRadius / 2;
+
+      context.beginPath();
+
+      for (let i = 0; i < len; i++) {
+        const d = dots[i];
+        const dx = mouse.x - d.ax;
+        const dy = mouse.y - d.ay;
+        const distSq = dx * dx + dy * dy;
+
+        if (distSq < crSq && engagement > 0.01) {
+          const dist = Math.sqrt(distSq);
+          const angle = Math.atan2(dy, dx);
+          if (bulgeOnly) {
+            const falloff = 1 - dist / cursorRadius;
+            const push = falloff * falloff * bulgeStrength * engagement;
+            d.sx += (d.ax - Math.cos(angle) * push - d.sx) * 0.15;
+            d.sy += (d.ay - Math.sin(angle) * push - d.sy) * 0.15;
+          } else {
+            const safeDist = Math.max(dist, 0.001);
+            const move = (500 / safeDist) * (mouse.speed * cursorForce);
+            d.vx += Math.cos(angle) * -move;
+            d.vy += Math.sin(angle) * -move;
+          }
+        } else if (bulgeOnly) {
+          d.sx += (d.ax - d.sx) * 0.1;
+          d.sy += (d.ay - d.sy) * 0.1;
+        }
+
+        if (!bulgeOnly) {
+          d.vx *= 0.9;
+          d.vy *= 0.9;
+          d.x = d.ax + d.vx;
+          d.y = d.ay + d.vy;
+          d.sx += (d.x - d.sx) * 0.1;
+          d.sy += (d.y - d.sy) * 0.1;
+        }
+
+        let drawX = d.sx;
+        let drawY = d.sy;
+        if (waveAmplitude > 0) {
+          drawY += Math.sin(d.ax * 0.03 + t) * waveAmplitude;
+          drawX += Math.cos(d.ay * 0.03 + t * 0.7) * waveAmplitude * 0.5;
+        }
+
+        if (sparkle) {
+          const hash = ((i * 2654435761) ^ (frameCount >> 3)) >>> 0;
+          if (hash % 100 < 3) {
+            context.moveTo(drawX + rad * 1.8, drawY);
+            context.arc(drawX, drawY, rad * 1.8, 0, TWO_PI);
+          } else {
+            context.moveTo(drawX + rad, drawY);
+            context.arc(drawX, drawY, rad, 0, TWO_PI);
+          }
+        } else {
+          context.moveTo(drawX + rad, drawY);
+          context.arc(drawX, drawY, rad, 0, TWO_PI);
+        }
+      }
+
+      context.fill();
+      raf = requestAnimationFrame(tick);
+    }
+
+    doResize();
+    window.addEventListener('resize', resize);
+    window.addEventListener('mousemove', onMouseMove, { passive: true });
+    raf = requestAnimationFrame(tick);
+
+    return () => {
+      cancelAnimationFrame(raf);
+      clearInterval(speedInterval);
+      clearTimeout(resizeTimer);
+      window.removeEventListener('resize', resize);
+      window.removeEventListener('mousemove', onMouseMove);
+    };
+  });
+</script>
+
+<div bind:this={root} class={cn('relative h-full w-full', className)}>
+  <canvas bind:this={canvas} class="absolute inset-0 h-full w-full"></canvas>
+  <svg class="pointer-events-none absolute inset-0 h-full w-full" aria-hidden="true">
+    <defs>
+      <radialGradient id={glowId}>
+        <stop offset="0%" stop-color="#fff" />
+        <stop offset="100%" stop-color="#fff" />
+      </radialGradient>
+    </defs>
+    <circle
+      bind:this={glowEl}
+      cx="-9999"
+      cy="-9999"
+      r={glowRadius}
+      fill="url(#{glowId})"
+      style:opacity="0"
+      style:will-change="opacity"
+    />
+  </svg>
+</div>
diff --git a/packages/ui/src/custom/animation/dot-field/index.ts b/packages/ui/src/custom/animation/dot-field/index.ts
new file mode 100644
index 00000000..946ec6e7
--- /dev/null
+++ b/packages/ui/src/custom/animation/dot-field/index.ts
@@ -0,0 +1 @@
+export { default as DotField } from './dot-field.svelte';
diff --git a/packages/ui/src/custom/animation/gradual-spacing/gradual-spacing.svelte b/packages/ui/src/custom/animation/gradual-spacing/gradual-spacing.svelte
index af505ca1..478db018 100644
--- a/packages/ui/src/custom/animation/gradual-spacing/gradual-spacing.svelte
+++ b/packages/ui/src/custom/animation/gradual-spacing/gradual-spacing.svelte
@@ -31,7 +31,7 @@
 </script>
 
 <div class={cn('flex justify-center space-x-1', containerClass)}>
-  <AnimatePresence let:item list={[{ key: wordsspilit }]}>
+  <AnimatePresence let:_item list={[{ key: wordsspilit }]}>
     {#each wordsspilit as char, i}
       <Motion
         initial="hidden"
diff --git a/packages/ui/src/custom/animation/index.ts b/packages/ui/src/custom/animation/index.ts
index 6be2db5b..e15bf938 100644
--- a/packages/ui/src/custom/animation/index.ts
+++ b/packages/ui/src/custom/animation/index.ts
@@ -1,4 +1,5 @@
 export * from './border-beam';
+export * from './dot-field';
 export * from './dot-pattern';
 export * from './card';
 export * from './blurfade';
diff --git a/packages/ui/src/custom/course-card/course-card.svelte b/packages/ui/src/custom/course-card/course-card.svelte
index 8dd62964..14779edb 100644
--- a/packages/ui/src/custom/course-card/course-card.svelte
+++ b/packages/ui/src/custom/course-card/course-card.svelte
@@ -18,6 +18,12 @@
       icon: Component;
       iconClass?: string;
     };
+    /** e.g. public-course indicator on the banner */
+    visibilityBadge?: {
+      label: string;
+      icon: Component;
+      iconClass?: string;
+    };
     class?: string;
     /** Custom banner area (e.g. optimized `Image`); overrides `bannerImage` */
     media?: Snippet;
@@ -34,6 +40,7 @@
     bannerImage,
     bannerAlt = 'Course banner image',
     typeBadge,
+    visibilityBadge,
     class: className = '',
     media,
     overlay,
@@ -72,6 +79,20 @@
                 {typeBadge.label}
               </Badge>
             {/if}
+
+            {#if visibilityBadge}
+              {@const VIcon = visibilityBadge.icon}
+              <Badge
+                class={cn(
+                  'ui:absolute ui:bottom-2 ui:z-10 ui:flex ui:items-center ui:rounded-md! ui:gap-1 ui:capitalize',
+                  typeBadge ? 'ui:right-2 ui:left-auto' : 'ui:left-2'
+                )}
+                variant="secondary"
+              >
+                <VIcon class={visibilityBadge.iconClass} />
+                {visibilityBadge.label}
+              </Badge>
+            {/if}
           </Item.Media>
         </Item.Header>
 
@@ -118,6 +139,20 @@
                 {typeBadge.label}
               </Badge>
             {/if}
+
+            {#if visibilityBadge}
+              {@const VIcon = visibilityBadge.icon}
+              <Badge
+                class={cn(
+                  'ui:absolute ui:bottom-2 ui:z-10 ui:flex ui:items-center ui:rounded-md! ui:gap-1 ui:capitalize',
+                  typeBadge ? 'ui:right-2 ui:left-auto' : 'ui:left-2'
+                )}
+                variant="secondary"
+              >
+                <VIcon class={visibilityBadge.iconClass} />
+                {visibilityBadge.label}
+              </Badge>
+            {/if}
           </Item.Media>
         </Item.Header>
 
diff --git a/packages/ui/src/custom/course-creator/course-creator.svelte b/packages/ui/src/custom/course-creator/course-creator.svelte
new file mode 100644
index 00000000..ef47664b
--- /dev/null
+++ b/packages/ui/src/custom/course-creator/course-creator.svelte
@@ -0,0 +1,126 @@
+<script lang="ts">
+  import * as Select from '../../base/select';
+  import { Textarea } from '../../base/textarea';
+  import { Button } from '../../base/button';
+  import ModelPicker from '../model-picker/model-picker.svelte';
+  import ArrowUpIcon from '@lucide/svelte/icons/arrow-up';
+  import LoaderCircleIcon from '@lucide/svelte/icons/loader-circle';
+  import { DEFAULT_PICKER_MODEL_ID, type AgentModelId } from '@cio/utils/agent-models';
+
+  interface SelectOption {
+    value: string;
+    label: string;
+  }
+
+  interface SubmitPayload {
+    prompt: string;
+    level: string;
+    model?: string;
+  }
+
+  interface Props {
+    heading: string;
+    placeholder: string;
+    loading?: boolean;
+    levelOptions?: SelectOption[];
+    model?: AgentModelId;
+    lockedModelIds?: readonly AgentModelId[];
+    onModelChange?: (model: AgentModelId) => void;
+    onLockedModelSelect?: (model: AgentModelId) => void;
+    onsubmit?: (payload: SubmitPayload) => void;
+  }
+
+  let {
+    heading,
+    placeholder,
+    loading = false,
+    levelOptions = [],
+    model = DEFAULT_PICKER_MODEL_ID,
+    lockedModelIds = [],
+    onModelChange,
+    onLockedModelSelect,
+    onsubmit
+  }: Props = $props();
+
+  let prompt = $state('');
+  let level = $state('beginner');
+  let selectedModel = $state<AgentModelId>(model);
+
+  const selectedLevelLabel = $derived(
+    levelOptions.find((o) => o.value === level)?.label ?? levelOptions[0]?.label ?? ''
+  );
+  const canSubmit = $derived(!!prompt.trim() && !loading);
+
+  $effect(() => {
+    if (model !== selectedModel) {
+      selectedModel = model;
+    }
+  });
+
+  function handleModelChange(id: AgentModelId) {
+    selectedModel = id;
+    onModelChange?.(id);
+  }
+
+  function handleSubmit() {
+    if (!canSubmit) return;
+
+    onsubmit?.({ prompt, level, model: selectedModel });
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      handleSubmit();
+    }
+  }
+</script>
+
+<div class="ui:flex ui:w-full ui:flex-col ui:items-center ui:gap-8">
+  <h1 class="ui:text-center ui:text-3xl ui:font-semibold ui:tracking-tight">{heading}</h1>
+
+  <div class="ui:bg-card ui:w-full ui:max-w-3xl ui:rounded-2xl ui:border ui:p-4">
+    <Textarea
+      bind:value={prompt}
+      {placeholder}
+      rows={4}
+      disabled={loading}
+      onkeydown={handleKeydown}
+      class="ui:w-full ui:resize-none ui:border-0! ui:focus-visible:ring-0! ui:focus-visible:ring-offset-0!"
+    />
+
+    <div class="ui:mt-3 ui:flex ui:items-center ui:gap-2">
+      <Select.Root type="single" bind:value={level} disabled={loading}>
+        <Select.Trigger>
+          {selectedLevelLabel}
+        </Select.Trigger>
+        <Select.Content>
+          {#each levelOptions as option (option.value)}
+            <Select.Item value={option.value} label={option.label}>
+              {option.label}
+            </Select.Item>
+          {/each}
+        </Select.Content>
+      </Select.Root>
+
+      <ModelPicker
+        value={selectedModel}
+        disabled={loading}
+        variant="select"
+        {lockedModelIds}
+        onChange={handleModelChange}
+        onLockedSelect={onLockedModelSelect}
+      />
+
+      <div class="ui:ml-auto">
+        <Button variant="secondary" size="icon" disabled={!canSubmit} onclick={handleSubmit}>
+          {#if loading}
+            <LoaderCircleIcon class="ui:h-4 ui:w-4 ui:animate-spin" />
+          {:else}
+            <ArrowUpIcon class="ui:h-4 ui:w-4" />
+          {/if}
+        </Button>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/packages/ui/src/custom/course-creator/index.ts b/packages/ui/src/custom/course-creator/index.ts
new file mode 100644
index 00000000..008a12af
--- /dev/null
+++ b/packages/ui/src/custom/course-creator/index.ts
@@ -0,0 +1,4 @@
+import CourseCreator from './course-creator.svelte';
+
+export { CourseCreator };
+export { CourseCreator as default };
diff --git a/packages/ui/src/custom/editor/extensions/FindAndReplace.ts b/packages/ui/src/custom/editor/extensions/FindAndReplace.ts
index 1397e3bc..66c4f9cf 100644
--- a/packages/ui/src/custom/editor/extensions/FindAndReplace.ts
+++ b/packages/ui/src/custom/editor/extensions/FindAndReplace.ts
@@ -25,7 +25,27 @@ import { Decoration, DecorationSet } from '@tiptap/pm/view';
 import { Plugin, PluginKey, type EditorState, type Transaction } from '@tiptap/pm/state';
 import { Node as PMNode } from '@tiptap/pm/model';
 
+export interface SearchAndReplaceOptions {
+  searchResultClass: string;
+  disableRegex: boolean;
+}
+
+export interface SearchAndReplaceStorage {
+  searchTerm: string;
+  replaceTerm: string;
+  results: Range[];
+  lastSearchTerm: string;
+  caseSensitive: boolean;
+  lastCaseSensitive: boolean;
+  resultIndex: number;
+  lastResultIndex: number;
+}
+
 declare module '@tiptap/core' {
+  interface Storage {
+    searchAndReplace: SearchAndReplaceStorage;
+  }
+
   interface Commands<ReturnType> {
     search: {
       /**
@@ -218,22 +238,6 @@ const replaceAll = (
 
 export const searchAndReplacePluginKey = new PluginKey('searchAndReplacePlugin');
 
-export interface SearchAndReplaceOptions {
-  searchResultClass: string;
-  disableRegex: boolean;
-}
-
-export interface SearchAndReplaceStorage {
-  searchTerm: string;
-  replaceTerm: string;
-  results: Range[];
-  lastSearchTerm: string;
-  caseSensitive: boolean;
-  lastCaseSensitive: boolean;
-  resultIndex: number;
-  lastResultIndex: number;
-}
-
 export const SearchAndReplace = Extension.create<SearchAndReplaceOptions, SearchAndReplaceStorage>({
   name: 'searchAndReplace',
 
diff --git a/packages/ui/src/custom/exercise-question/index.ts b/packages/ui/src/custom/exercise-question/index.ts
index 93960b43..f72fc6d7 100644
--- a/packages/ui/src/custom/exercise-question/index.ts
+++ b/packages/ui/src/custom/exercise-question/index.ts
@@ -4,6 +4,10 @@ export { default as QuestionRenderer } from './question-renderer.svelte';
 export { default as QuestionList } from './question-list.svelte';
 export { default as QuestionSurface } from './question-surface.svelte';
 export { default as QuestionTitle } from './question-title.svelte';
+export { default as SectionAfterBehavior } from './section-after-behavior.svelte';
+export { default as SectionHeader } from './section-header.svelte';
+export { default as SectionNavigationSidebar } from './section-navigation-sidebar.svelte';
+export { default as SectionOverview } from './section-overview.svelte';
 export * from './renderer-contract';
 
 export { default as TrueFalseEdit } from './renderers/true-false/edit.svelte';
@@ -17,6 +21,7 @@ export { default as TextareaEdit } from './renderers/textarea/edit.svelte';
 export { default as MatchingEdit } from './renderers/matching/edit.svelte';
 export { default as OrderingEdit } from './renderers/ordering/edit.svelte';
 export { default as HotspotEdit } from './renderers/hotspot/edit.svelte';
+export { default as VideoRecordingEdit } from './renderers/video-recording/edit.svelte';
 
 export { default as TrueFalseTake } from './renderers/true-false/take.svelte';
 export { default as ShortAnswerTake } from './renderers/short-answer/take.svelte';
@@ -29,6 +34,7 @@ export { default as TextareaTake } from './renderers/textarea/take.svelte';
 export { default as MatchingTake } from './renderers/matching/take.svelte';
 export { default as OrderingTake } from './renderers/ordering/take.svelte';
 export { default as HotspotTake } from './renderers/hotspot/take.svelte';
+export { default as VideoRecordingTake } from './renderers/video-recording/take.svelte';
 
 export { default as TrueFalsePreview } from './renderers/true-false/preview.svelte';
 export { default as ShortAnswerPreview } from './renderers/short-answer/preview.svelte';
@@ -42,6 +48,7 @@ export { default as MatchingPreview } from './renderers/matching/preview.svelte'
 export { default as OrderingPreview } from './renderers/ordering/preview.svelte';
 export { default as OrderingDisplay } from './renderers/ordering/ordering-display.svelte';
 export { default as HotspotPreview } from './renderers/hotspot/preview.svelte';
+export { default as VideoRecordingPreview } from './renderers/video-recording/preview.svelte';
 
 export { default as TrueFalseSubmission } from './renderers/true-false/submission.svelte';
 export { default as ShortAnswerSubmission } from './renderers/short-answer/submission.svelte';
@@ -55,3 +62,4 @@ export { default as MatchingSubmission } from './renderers/matching/submission.s
 export { default as OrderingSubmission } from './renderers/ordering/submission.svelte';
 export { default as HotspotSubmission } from './renderers/hotspot/submission.svelte';
 export { default as LinkSubmission } from './renderers/link/submission.svelte';
+export { default as VideoRecordingSubmission } from './renderers/video-recording/submission.svelte';
diff --git a/packages/ui/src/custom/exercise-question/question-list.svelte b/packages/ui/src/custom/exercise-question/question-list.svelte
index 2681b276..d86b44f0 100644
--- a/packages/ui/src/custom/exercise-question/question-list.svelte
+++ b/packages/ui/src/custom/exercise-question/question-list.svelte
@@ -5,7 +5,7 @@
 
   interface Props {
     contract: ExerciseQuestionListRenderContract;
-    onAnswerChange?: (question: ExerciseQuestionModel, answer: AnswerData) => void;
+    onAnswerChange?: (question: ExerciseQuestionModel, answer: AnswerData | null) => void;
     onQuestionChange?: (question: ExerciseQuestionModel, updatedQuestion: ExerciseQuestionModel) => void;
     itemClass?: string;
     showContainer?: boolean;
@@ -33,10 +33,13 @@
         disabled: contract.disabled,
         labels: contract.labels,
         onImageUpload: contract.onImageUpload,
-        onFileUpload: contract.onFileUpload
+        onFileUpload: contract.onFileUpload,
+        onVideoRecordingUpload: contract.onVideoRecordingUpload
       }}
       onAnswerChange={(answer) => onAnswerChange(question, answer)}
       onQuestionChange={(updatedQuestion) => onQuestionChange(question, updatedQuestion)}
+      questionNumber={index + 1}
+      questionNumberActive={false}
       {showContainer}
     />
   </div>
diff --git a/packages/ui/src/custom/exercise-question/question-renderer.svelte b/packages/ui/src/custom/exercise-question/question-renderer.svelte
index c878745e..d722a589 100644
--- a/packages/ui/src/custom/exercise-question/question-renderer.svelte
+++ b/packages/ui/src/custom/exercise-question/question-renderer.svelte
@@ -14,6 +14,7 @@
   import { Textarea } from '../../base/textarea';
   import { IconButton } from '../icon-button';
   import { MediaPlayer, isYoutubeUrl } from '../media-player';
+  import NumberBadge from '$src/base/number-badge/number-badge.svelte';
   import QuestionTitle from './question-title.svelte';
   import { YoutubeLinkForm } from '../youtube-link-form';
   import QuestionSurface from './question-surface.svelte';
@@ -22,10 +23,14 @@
 
   interface Props {
     contract: ExerciseQuestionRenderContract;
-    onAnswerChange?: (answer: AnswerData) => void;
+    onAnswerChange?: (answer: AnswerData | null) => void;
     onQuestionChange?: (question: ExerciseQuestionRendererProps['question']) => void;
     showContainer?: boolean;
     questionTypeSelect?: Snippet;
+    /** When set, a numbered badge is shown to the left of the title (non-edit modes). */
+    questionNumber?: number;
+    /** When false, the badge uses muted styling (e.g. question lists). Defaults to true. */
+    questionNumberActive?: boolean;
   }
 
   let {
@@ -33,7 +38,9 @@
     onAnswerChange = () => {},
     onQuestionChange = () => {},
     showContainer = true,
-    questionTypeSelect
+    questionTypeSelect,
+    questionNumber,
+    questionNumberActive = true
   }: Props = $props();
 
   const Renderer = $derived(getExerciseQuestionRenderer(contract.question.questionType, contract.mode));
@@ -265,8 +272,8 @@
 {#snippet content()}
   {#if contract.mode === 'edit'}
     <div class="ui:space-y-3">
-      <div class="ui:flex ui:items-end ui:gap-2">
-        <div class="ui:space-y-1 ui:w-full">
+      <div class="ui:flex ui:min-w-0 ui:flex-col ui:items-stretch ui:gap-2 ui:sm:flex-row ui:sm:items-end">
+        <div class="ui:min-w-0 ui:flex-1 ui:space-y-1">
           <p class="ui:text-sm ui:font-medium">{label('question.edit.title_label')}</p>
           <Input
             class="ui:w-full"
@@ -413,7 +420,14 @@
 
   {#if contract.mode !== 'edit'}
     <div class="ui:mb-4 ui:space-y-3">
-      {#if contract.question.title.trim().length > 0}
+      {#if questionNumber !== undefined}
+        <div class="ui:flex ui:items-center ui:gap-2">
+          <NumberBadge number={questionNumber} active={questionNumberActive} />
+          {#if contract.question.title.trim().length > 0}
+            <QuestionTitle title={contract.question.title} class="ui:min-w-0 ui:flex-1" />
+          {/if}
+        </div>
+      {:else if contract.question.title.trim().length > 0}
         <QuestionTitle title={contract.question.title} />
       {/if}
 
@@ -463,6 +477,7 @@
     labels={contract.labels}
     onImageUpload={contract.onImageUpload}
     onFileUpload={contract.onFileUpload}
+    onVideoRecordingUpload={contract.onVideoRecordingUpload}
     {onAnswerChange}
     {onQuestionChange}
   />
diff --git a/packages/ui/src/custom/exercise-question/renderer-contract.ts b/packages/ui/src/custom/exercise-question/renderer-contract.ts
index 961dc421..d3e4a279 100644
--- a/packages/ui/src/custom/exercise-question/renderer-contract.ts
+++ b/packages/ui/src/custom/exercise-question/renderer-contract.ts
@@ -23,6 +23,7 @@ import { default as ShortAnswerEdit } from './renderers/short-answer/edit.svelte
 import { default as StarEdit } from './renderers/star/edit.svelte';
 import { default as TextareaEdit } from './renderers/textarea/edit.svelte';
 import { default as TrueFalseEdit } from './renderers/true-false/edit.svelte';
+import { default as VideoRecordingEdit } from './renderers/video-recording/edit.svelte';
 
 import { default as CheckboxTake } from './renderers/checkbox/take.svelte';
 import { default as FileUploadTake } from './renderers/file-upload/take.svelte';
@@ -38,6 +39,7 @@ import { default as ShortAnswerTake } from './renderers/short-answer/take.svelte
 import { default as StarTake } from './renderers/star/take.svelte';
 import { default as TextareaTake } from './renderers/textarea/take.svelte';
 import { default as TrueFalseTake } from './renderers/true-false/take.svelte';
+import { default as VideoRecordingTake } from './renderers/video-recording/take.svelte';
 
 import { default as CheckboxPreview } from './renderers/checkbox/preview.svelte';
 import { default as FileUploadPreview } from './renderers/file-upload/preview.svelte';
@@ -53,6 +55,7 @@ import { default as ShortAnswerPreview } from './renderers/short-answer/preview.
 import { default as StarPreview } from './renderers/star/preview.svelte';
 import { default as TextareaPreview } from './renderers/textarea/preview.svelte';
 import { default as TrueFalsePreview } from './renderers/true-false/preview.svelte';
+import { default as VideoRecordingPreview } from './renderers/video-recording/preview.svelte';
 
 import { default as CheckboxSubmission } from './renderers/checkbox/submission.svelte';
 import { default as FileUploadSubmission } from './renderers/file-upload/submission.svelte';
@@ -68,6 +71,7 @@ import { default as ShortAnswerSubmission } from './renderers/short-answer/submi
 import { default as StarSubmission } from './renderers/star/submission.svelte';
 import { default as TextareaSubmission } from './renderers/textarea/submission.svelte';
 import { default as TrueFalseSubmission } from './renderers/true-false/submission.svelte';
+import { default as VideoRecordingSubmission } from './renderers/video-recording/submission.svelte';
 
 import { default as RadioReview } from './renderers/radio/review.svelte';
 import { default as CheckboxReview } from './renderers/checkbox/review.svelte';
@@ -172,6 +176,13 @@ export const EXERCISE_QUESTION_RENDERER_CONTRACT: ExerciseRendererRegistry<Share
     take: StarTake,
     preview: StarPreview,
     submission: StarSubmission
+  },
+  [QUESTION_TYPE_KEY.VIDEO_RECORDING]: {
+    edit: VideoRecordingEdit,
+    take: VideoRecordingTake,
+    preview: VideoRecordingPreview,
+    submission: VideoRecordingSubmission,
+    review: VideoRecordingSubmission
   }
 };
 
diff --git a/packages/ui/src/custom/exercise-question/renderers/checkbox/edit.svelte b/packages/ui/src/custom/exercise-question/renderers/checkbox/edit.svelte
index 7c1f69b8..a508110e 100644
--- a/packages/ui/src/custom/exercise-question/renderers/checkbox/edit.svelte
+++ b/packages/ui/src/custom/exercise-question/renderers/checkbox/edit.svelte
@@ -157,7 +157,7 @@
   <div class="ui:space-y-2">
     {#each question.options ?? [] as option, index}
       {@const optionImageUrl = getOptionImageUrl(option)}
-      <div class="ui:flex ui:items-start ui:gap-2">
+      <div class="ui:flex ui:min-w-0 ui:items-start ui:gap-2">
         <IconButton
           type="button"
           {disabled}
@@ -177,7 +177,7 @@
           <span class="ui:sr-only">{label('checkbox.edit.toggle_correct_sr')}</span>
         </IconButton>
 
-        <div class="ui:flex-1 ui:space-y-2">
+        <div class="ui:min-w-0 ui:flex-1 ui:space-y-2">
           <Input
             class="ui:w-full"
             placeholder={[label('common.option_prefix'), String(index + 1)].filter(Boolean).join(' ').trim()}
diff --git a/packages/ui/src/custom/exercise-question/renderers/checkbox/take.svelte b/packages/ui/src/custom/exercise-question/renderers/checkbox/take.svelte
index 29e200f6..7d55fd61 100644
--- a/packages/ui/src/custom/exercise-question/renderers/checkbox/take.svelte
+++ b/packages/ui/src/custom/exercise-question/renderers/checkbox/take.svelte
@@ -61,10 +61,12 @@
       {@const optionValue = getOptionValue(option, index)}
       {@const optionId = `checkbox-${question.id ?? 'question'}-${index}`}
       {@const optionImageUrl = getOptionImageUrl(option)}
+      {@const isSelected = isOptionSelected(option, index)}
 
       <div
         class={cn(
           'ui:rounded-md ui:p-2 ui:border',
+          isSelected ? 'ui:border-primary' : 'ui:border-border',
           optionsHaveImages ? 'ui:space-y-2' : 'ui:flex ui:items-center ui:gap-2'
         )}
       >
diff --git a/packages/ui/src/custom/exercise-question/renderers/radio/edit.svelte b/packages/ui/src/custom/exercise-question/renderers/radio/edit.svelte
index adb45bb5..14246d7f 100644
--- a/packages/ui/src/custom/exercise-question/renderers/radio/edit.svelte
+++ b/packages/ui/src/custom/exercise-question/renderers/radio/edit.svelte
@@ -152,7 +152,7 @@
   <div class="ui:space-y-2">
     {#each question.options ?? [] as option, index}
       {@const optionImageUrl = getOptionImageUrl(option)}
-      <div class="ui:flex ui:items-start ui:gap-2">
+      <div class="ui:flex ui:min-w-0 ui:items-start ui:gap-2">
         <IconButton
           type="button"
           {disabled}
@@ -172,7 +172,7 @@
           <span class="ui:sr-only">{label('radio.edit.mark_correct_sr')}</span>
         </IconButton>
 
-        <div class="ui:flex-1 ui:space-y-2">
+        <div class="ui:min-w-0 ui:flex-1 ui:space-y-2">
           <Input
             class="ui:w-full"
             placeholder={[label('common.option_prefix'), String(index + 1)].filter(Boolean).join(' ').trim()}
diff --git a/packages/ui/src/custom/exercise-question/renderers/radio/take.svelte b/packages/ui/src/custom/exercise-question/renderers/radio/take.svelte
index 9ab25a8f..7313107d 100644
--- a/packages/ui/src/custom/exercise-question/renderers/radio/take.svelte
+++ b/packages/ui/src/custom/exercise-question/renderers/radio/take.svelte
@@ -51,10 +51,12 @@
         {@const optionValue = getOptionValue(option, index)}
         {@const optionId = `radio-${question.id ?? 'question'}-${index}`}
         {@const optionImageUrl = getOptionImageUrl(option)}
+        {@const isSelected = selectedOptionValue !== '' && selectedOptionValue === optionValue}
 
         <div
           class={cn(
             'ui:rounded-md ui:p-2 ui:border',
+            isSelected ? 'ui:border-primary' : 'ui:border-border',
             optionsHaveImages ? 'ui:space-y-2' : 'ui:flex ui:items-center ui:gap-2'
           )}
         >
diff --git a/packages/ui/src/custom/exercise-question/renderers/video-recording/edit.svelte b/packages/ui/src/custom/exercise-question/renderers/video-recording/edit.svelte
new file mode 100644
index 00000000..1f11de08
--- /dev/null
+++ b/packages/ui/src/custom/exercise-question/renderers/video-recording/edit.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+  import {
+    VIDEO_RECORDING_DEFAULT_MAX_DURATION_SECONDS,
+    VIDEO_RECORDING_PLATFORM_MAX_DURATION_SECONDS,
+    getExerciseQuestionLabel,
+    getVideoRecordingMaxDurationSeconds,
+    type ExerciseQuestionModel,
+    type ExerciseQuestionRendererProps
+  } from '@cio/question-types';
+  import { Badge } from '../../../../base/badge';
+  import { Input } from '../../../../base/input';
+
+  let { question, disabled = false, labels, onQuestionChange = () => {} }: ExerciseQuestionRendererProps = $props();
+
+  const label = (key: Parameters<typeof getExerciseQuestionLabel>[1], fallback = '') =>
+    getExerciseQuestionLabel(labels, key, fallback);
+  const maxDurationValue = $derived(String(getVideoRecordingMaxDurationSeconds(question.settings)));
+
+  function patchQuestion(partial: Partial<ExerciseQuestionModel>) {
+    onQuestionChange({ ...question, ...partial });
+  }
+
+  function patchSettings(next: Record<string, unknown>) {
+    patchQuestion({ settings: { ...(question.settings ?? {}), ...next, allowRetakes: true } });
+  }
+
+  function onDurationChange(value: string) {
+    const duration = Number(value);
+    if (!Number.isFinite(duration) || duration <= 0) {
+      patchSettings({ maxDurationSeconds: VIDEO_RECORDING_DEFAULT_MAX_DURATION_SECONDS });
+      return;
+    }
+
+    patchSettings({
+      maxDurationSeconds: Math.min(Math.round(duration), VIDEO_RECORDING_PLATFORM_MAX_DURATION_SECONDS)
+    });
+  }
+</script>
+
+<div class="ui:space-y-3">
+  <div class="ui:grid ui:gap-3 ui:md:grid-cols-[minmax(0,220px)_1fr] ui:md:items-start">
+    <div class="ui:space-y-1">
+      <p class="ui:text-sm ui:font-medium">
+        {label('video_recording.edit.max_duration_label', 'Max duration')}
+      </p>
+      <Input
+        type="number"
+        min="1"
+        max={VIDEO_RECORDING_PLATFORM_MAX_DURATION_SECONDS}
+        step="1"
+        value={maxDurationValue}
+        placeholder={label('video_recording.edit.max_duration_placeholder', '60')}
+        {disabled}
+        onchange={(event) => onDurationChange(event.currentTarget.value)}
+      />
+    </div>
+
+    <div class="ui:space-y-2 ui:pt-1">
+      <Badge variant="secondary">{label('video_recording.edit.manual_grading', 'Requires manual grading')}</Badge>
+      <p class="ui:text-muted-foreground ui:text-sm">
+        {label(
+          'video_recording.edit.max_duration_helper',
+          'Students record in the browser and can retake before submitting.'
+        )}
+      </p>
+    </div>
+  </div>
+</div>
diff --git a/packages/ui/src/custom/exercise-question/renderers/video-recording/format.ts b/packages/ui/src/custom/exercise-question/renderers/video-recording/format.ts
new file mode 100644
index 00000000..b116fa37
--- /dev/null
+++ b/packages/ui/src/custom/exercise-question/renderers/video-recording/format.ts
@@ -0,0 +1,15 @@
+export function formatSeconds(totalSeconds: number): string {
+  const safeSeconds = Math.max(0, Math.round(totalSeconds));
+  const minutes = Math.floor(safeSeconds / 60);
+  const seconds = safeSeconds % 60;
+  return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+}
+
+export function formatFileSize(bytes: number): string {
+  if (!Number.isFinite(bytes) || bytes <= 0) return '0 KB';
+
+  const units = ['Bytes', 'KB', 'MB', 'GB'];
+  const unitIndex = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+  const value = bytes / Math.pow(1024, unitIndex);
+  return `${value.toFixed(value >= 10 || unitIndex === 0 ? 0 : 1)} ${units[unitIndex]}`;
+}
diff --git a/packages/ui/src/custom/exercise-question/renderers/video-recording/preview.svelte b/packages/ui/src/custom/exercise-question/renderers/video-recording/preview.svelte
new file mode 100644
index 00000000..76e53e9f
--- /dev/null
+++ b/packages/ui/src/custom/exercise-question/renderers/video-recording/preview.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+  import {
+    getExerciseQuestionLabel,
+    getVideoRecordingMaxDurationSeconds,
+    type ExerciseQuestionRendererProps
+  } from '@cio/question-types';
+  import { formatSeconds } from './format';
+
+  let { question, labels }: ExerciseQuestionRendererProps = $props();
+  const label = (key: Parameters<typeof getExerciseQuestionLabel>[1], fallback = '') =>
+    getExerciseQuestionLabel(labels, key, fallback);
+  const maxDurationSeconds = $derived(getVideoRecordingMaxDurationSeconds(question.settings));
+</script>
+
+<div class="ui:space-y-2">
+  <p class="ui:text-muted-foreground ui:text-sm">
+    {label('video_recording.preview.max_duration_label', 'Max duration')}: {formatSeconds(maxDurationSeconds)}
+  </p>
+  <p class="ui:text-muted-foreground ui:text-sm">
+    {label(
+      'video_recording.preview.manual_grading',
+      'Learners record a short video response. Manual grading required.'
+    )}
+  </p>
+</div>
diff --git a/packages/ui/src/custom/exercise-question/renderers/video-recording/submission.svelte b/packages/ui/src/custom/exercise-question/renderers/video-recording/submission.svelte
new file mode 100644
index 00000000..a2931db8
--- /dev/null
+++ b/packages/ui/src/custom/exercise-question/renderers/video-recording/submission.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+  import { getExerciseQuestionLabel, type ExerciseQuestionRendererProps } from '@cio/question-types';
+  import { MediaPlayer } from '../../../media-player';
+  import LabeledValueRow from '../shared/labeled-value-row.svelte';
+  import { formatFileSize, formatSeconds } from './format';
+
+  let { answer = null, labels }: ExerciseQuestionRendererProps = $props();
+  const label = (key: Parameters<typeof getExerciseQuestionLabel>[1], fallback = '') =>
+    getExerciseQuestionLabel(labels, key, fallback);
+
+  const recording = $derived(answer?.type === 'VIDEO_RECORDING' ? answer : null);
+  const playbackUrl = $derived.by(() => {
+    if (!recording) return '';
+    const enrichedUrl = (recording as { fileUrl?: string }).fileUrl;
+    return recording.playbackUrl ?? enrichedUrl ?? '';
+  });
+
+  function formatDate(value: string | undefined): string {
+    if (!value) return '—';
+
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) return '—';
+
+    return date.toLocaleString();
+  }
+</script>
+
+{#if !recording}
+  <p class="ui:text-muted-foreground ui:text-sm">
+    {label('video_recording.submission.no_video', 'No video submitted.')}
+  </p>
+{:else}
+  <div class="ui:space-y-3">
+    {#if playbackUrl}
+      <div class="ui:max-w-xl ui:overflow-hidden ui:rounded-md">
+        <MediaPlayer
+          source={{ type: 'upload', url: playbackUrl }}
+          options={{ controls: true, playsinline: true, width: '100%', maxHeight: '360px' }}
+        />
+      </div>
+    {:else}
+      <p class="ui:text-muted-foreground ui:text-sm">
+        {label('video_recording.submission.unavailable', 'Video unavailable.')}
+      </p>
+    {/if}
+
+    <div class="ui:grid ui:gap-2 ui:text-sm ui:sm:grid-cols-2">
+      <LabeledValueRow
+        label={label('video_recording.submission.duration', 'Duration')}
+        value={formatSeconds(recording.durationSeconds)}
+      />
+      <LabeledValueRow
+        label={label('video_recording.submission.file_size', 'File size')}
+        value={formatFileSize(recording.size)}
+      />
+      <LabeledValueRow
+        label={label('video_recording.submission.recorded_at', 'Recorded')}
+        value={formatDate(recording.recordedAt)}
+      />
+      <LabeledValueRow
+        label={label('video_recording.submission.uploaded_at', 'Uploaded')}
+        value={formatDate(recording.uploadedAt)}
+      />
+      <LabeledValueRow
+        label={label('video_recording.submission.retake_count', 'Retakes')}
+        value={String(recording.retakeCount ?? 0)}
+      />
+    </div>
+  </div>
+{/if}
diff --git a/packages/ui/src/custom/exercise-question/renderers/video-recording/take.svelte b/packages/ui/src/custom/exercise-question/renderers/video-recording/take.svelte
new file mode 100644
index 00000000..8d98997c
--- /dev/null
+++ b/packages/ui/src/custom/exercise-question/renderers/video-recording/take.svelte
@@ -0,0 +1,481 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import {
+    getExerciseQuestionLabel,
+    getVideoRecordingMaxDurationSeconds,
+    type ExerciseQuestionRendererProps
+  } from '@cio/question-types';
+  import { Button } from '../../../../base/button';
+  import * as Select from '../../../../base/select';
+  import { Spinner } from '../../../../base/spinner';
+  import { formatSeconds } from './format';
+
+  type RecordingState =
+    | 'idle'
+    | 'permission_denied'
+    | 'ready'
+    | 'recording'
+    | 'recorded'
+    | 'uploading'
+    | 'uploaded'
+    | 'failed';
+
+  let {
+    question,
+    answer = null,
+    disabled = false,
+    labels,
+    onAnswerChange = () => {},
+    onVideoRecordingUpload
+  }: ExerciseQuestionRendererProps = $props();
+
+  let recordingState = $state<RecordingState>('idle');
+  let stream = $state<MediaStream | null>(null);
+  let mediaRecorder = $state<MediaRecorder | null>(null);
+  let liveVideo = $state<HTMLVideoElement | null>(null);
+  let previewVideo = $state<HTMLVideoElement | null>(null);
+  let elapsedSeconds = $state(0);
+  let durationSeconds = $state(0);
+  let recordingBlob = $state<Blob | null>(null);
+  let previewUrl = $state('');
+  let uploadError = $state('');
+  let recordedAt = $state('');
+  let retakeCount = $state(0);
+  let isPreviewPlaying = $state(false);
+  let cameraDevices = $state<MediaDeviceInfo[]>([]);
+  let selectedCameraDeviceId = $state('');
+  let timerId: number | null = null;
+  let recordingStartedAt = 0;
+  let chunks: Blob[] = [];
+
+  const label = (key: Parameters<typeof getExerciseQuestionLabel>[1], fallback = '') =>
+    getExerciseQuestionLabel(labels, key, fallback);
+  const maxDurationSeconds = $derived(getVideoRecordingMaxDurationSeconds(question.settings));
+  const remainingSeconds = $derived(Math.max(0, maxDurationSeconds - elapsedSeconds));
+  const isFinalWarning = $derived(maxDurationSeconds > 15 && remainingSeconds <= 10 && recordingState === 'recording');
+  const savedRecording = $derived(answer?.type === 'VIDEO_RECORDING' ? answer : null);
+  const savedPlaybackUrl = $derived.by(() => {
+    if (!savedRecording) return '';
+    return savedRecording.playbackUrl ?? (savedRecording as { fileUrl?: string }).fileUrl ?? '';
+  });
+  const canUseRecording = $derived(recordingBlob && durationSeconds >= 1 && !disabled);
+  const recordingProgressPercent = $derived(
+    maxDurationSeconds > 0 ? Math.min(100, Math.max(0, (elapsedSeconds / maxDurationSeconds) * 100)) : 0
+  );
+  const recordingProgressDegrees = $derived(recordingProgressPercent * 3.6);
+  const progressRingBackground = $derived(
+    `conic-gradient(var(--primary) ${recordingProgressDegrees}deg, color-mix(in oklab, var(--primary) 12%, var(--background)) ${recordingProgressDegrees}deg)`
+  );
+
+  const isSupported = $derived.by(
+    () =>
+      typeof window !== 'undefined' &&
+      typeof navigator !== 'undefined' &&
+      !!navigator.mediaDevices?.getUserMedia &&
+      'MediaRecorder' in window
+  );
+
+  $effect(() => {
+    if (liveVideo && stream) {
+      liveVideo.srcObject = stream;
+    }
+  });
+
+  function getSupportedMimeType(): string {
+    const candidates = ['video/webm;codecs=vp8,opus', 'video/webm', 'video/mp4'];
+    const supported = candidates.find((mimeType) => MediaRecorder.isTypeSupported(mimeType));
+    return supported ?? '';
+  }
+
+  function normalizeMimeType(mimeType: string): 'video/webm' | 'video/mp4' | 'video/quicktime' {
+    if (mimeType.includes('mp4')) return 'video/mp4';
+    if (mimeType.includes('quicktime')) return 'video/quicktime';
+    return 'video/webm';
+  }
+
+  async function refreshCameraDevices() {
+    if (!navigator.mediaDevices?.enumerateDevices) return;
+
+    const devices = await navigator.mediaDevices.enumerateDevices();
+    cameraDevices = devices.filter((device) => device.kind === 'videoinput');
+
+    if (!selectedCameraDeviceId && cameraDevices[0]) {
+      selectedCameraDeviceId = cameraDevices[0].deviceId;
+    }
+  }
+
+  function getVideoConstraints(): MediaTrackConstraints {
+    if (selectedCameraDeviceId) {
+      return { deviceId: { exact: selectedCameraDeviceId } };
+    }
+
+    return { facingMode: 'user' };
+  }
+
+  function clearTimer() {
+    if (timerId === null) return;
+
+    window.clearInterval(timerId);
+    timerId = null;
+  }
+
+  function stopStream() {
+    stream?.getTracks().forEach((track) => track.stop());
+    stream = null;
+    if (liveVideo) liveVideo.srcObject = null;
+  }
+
+  function revokePreviewUrl() {
+    if (!previewUrl) return;
+
+    URL.revokeObjectURL(previewUrl);
+    previewUrl = '';
+  }
+
+  function resetLocalRecording() {
+    revokePreviewUrl();
+    recordingBlob = null;
+    durationSeconds = 0;
+    elapsedSeconds = 0;
+    uploadError = '';
+    isPreviewPlaying = false;
+  }
+
+  async function requestCamera(): Promise<MediaStream | null> {
+    if (disabled || !isSupported) return null;
+
+    try {
+      stopStream();
+      const nextStream = await navigator.mediaDevices.getUserMedia({
+        video: getVideoConstraints(),
+        audio: true
+      });
+      stream = nextStream;
+      selectedCameraDeviceId = nextStream.getVideoTracks()[0]?.getSettings().deviceId ?? selectedCameraDeviceId;
+      recordingState = 'ready';
+      uploadError = '';
+      await refreshCameraDevices();
+      return nextStream;
+    } catch {
+      recordingState = 'permission_denied';
+      return null;
+    }
+  }
+
+  async function handleCameraChange(nextDeviceId: string) {
+    if (!nextDeviceId || nextDeviceId === selectedCameraDeviceId || recordingState === 'recording') return;
+
+    selectedCameraDeviceId = nextDeviceId;
+    if (recordingState === 'ready') {
+      await requestCamera();
+    }
+  }
+
+  async function startRecording() {
+    if (disabled || recordingState === 'recording') return;
+
+    const activeStream = stream ?? (await requestCamera());
+    if (!activeStream) return;
+
+    resetLocalRecording();
+    chunks = [];
+    const mimeType = getSupportedMimeType();
+    const recorder = new MediaRecorder(activeStream, mimeType ? { mimeType } : undefined);
+    mediaRecorder = recorder;
+    recordingStartedAt = performance.now();
+    recordedAt = new Date().toISOString();
+
+    recorder.ondataavailable = (event) => {
+      if (event.data.size > 0) chunks.push(event.data);
+    };
+
+    recorder.onstop = () => {
+      clearTimer();
+      const measuredDuration = Math.max(0, (performance.now() - recordingStartedAt) / 1000);
+      durationSeconds = Math.round(measuredDuration * 10) / 10;
+      elapsedSeconds = Math.min(maxDurationSeconds, Math.ceil(durationSeconds));
+      const blobType = normalizeMimeType(recorder.mimeType || mimeType);
+      const blob = new Blob(chunks, { type: blobType });
+      recordingBlob = blob;
+      previewUrl = URL.createObjectURL(blob);
+      recordingState = durationSeconds >= 1 ? 'recorded' : 'failed';
+    };
+
+    recorder.start();
+    recordingState = 'recording';
+    timerId = window.setInterval(() => {
+      const elapsed = (performance.now() - recordingStartedAt) / 1000;
+      elapsedSeconds = Math.min(maxDurationSeconds, elapsed);
+      if (elapsed >= maxDurationSeconds) {
+        stopRecording();
+      }
+    }, 250);
+  }
+
+  function stopRecording() {
+    if (mediaRecorder?.state === 'recording') {
+      mediaRecorder.stop();
+    }
+    clearTimer();
+    stopStream();
+  }
+
+  async function togglePreviewPlayback() {
+    if (!previewVideo) return;
+
+    if (previewVideo.paused) {
+      await previewVideo.play();
+      isPreviewPlaying = true;
+      return;
+    }
+
+    previewVideo.pause();
+    isPreviewPlaying = false;
+  }
+
+  function onPreviewEnded() {
+    isPreviewPlaying = false;
+  }
+
+  function retakeRecording() {
+    resetLocalRecording();
+    retakeCount += 1;
+    recordingState = stream ? 'ready' : 'idle';
+  }
+
+  function deleteRecording() {
+    resetLocalRecording();
+    onAnswerChange(null);
+    recordingState = stream ? 'ready' : 'idle';
+  }
+
+  async function acceptRecording() {
+    if (!recordingBlob || !canUseRecording || !onVideoRecordingUpload) return;
+
+    recordingState = 'uploading';
+    uploadError = '';
+
+    try {
+      const mimeType = normalizeMimeType(recordingBlob.type);
+      const result = await onVideoRecordingUpload({
+        questionId: question.id ?? question.key ?? '',
+        blob: recordingBlob,
+        fileName: `recording-${Date.now()}.${mimeType === 'video/mp4' ? 'mp4' : 'webm'}`,
+        mimeType,
+        size: recordingBlob.size,
+        durationSeconds,
+        recordedAt,
+        retakeCount
+      });
+
+      onAnswerChange({ ...result, playbackUrl: previewUrl });
+      recordingState = 'uploaded';
+    } catch (error) {
+      uploadError =
+        error instanceof Error
+          ? error.message
+          : label('video_recording.take.upload_failed', 'Upload failed. Try again.');
+      recordingState = 'failed';
+    }
+  }
+
+  onDestroy(() => {
+    clearTimer();
+    stopStream();
+    revokePreviewUrl();
+  });
+</script>
+
+<div class="ui:space-y-4" aria-live="polite">
+  {#if !isSupported}
+    <p class="ui:text-muted-foreground ui:text-sm">
+      {label('video_recording.take.unsupported', 'Video recording is not supported in this browser.')}
+    </p>
+  {:else}
+    <div class="ui:flex ui:flex-col ui:items-center ui:gap-4">
+      <div
+        class={recordingState === 'recording' ? 'ui:rounded-full ui:p-1 ui:shadow-sm' : ''}
+        style={recordingState === 'recording' ? `background: ${progressRingBackground};` : undefined}
+      >
+        <div
+          class="ui:bg-muted ui:relative ui:grid ui:aspect-square ui:w-52 ui:max-w-full ui:place-items-center ui:overflow-hidden ui:rounded-full ui:sm:w-64"
+        >
+          {#if recordingState === 'ready' || recordingState === 'recording'}
+            <video
+              bind:this={liveVideo}
+              autoplay
+              muted
+              playsinline
+              class="ui:h-full ui:w-full ui:object-cover ui:[transform:scaleX(-1)]"
+            ></video>
+            {#if recordingState === 'ready'}
+              <button
+                type="button"
+                class="ui:absolute ui:inset-0 ui:grid ui:place-items-center ui:bg-black/10 ui:text-white ui:transition ui:hover:bg-black/20 ui:focus-visible:outline-none ui:focus-visible:ring-2 ui:focus-visible:ring-ring ui:disabled:pointer-events-none ui:disabled:opacity-50"
+                {disabled}
+                onclick={startRecording}
+              >
+                <span
+                  class="ui:rounded-full ui:bg-background/90 ui:px-4 ui:py-2 ui:text-sm ui:font-medium ui:text-foreground ui:shadow-md"
+                >
+                  {label('video_recording.take.start_recording', 'Start recording')}
+                </span>
+              </button>
+            {/if}
+          {:else if previewUrl || savedPlaybackUrl}
+            <!-- svelte-ignore a11y_media_has_caption - v1 browser recordings do not generate captions. -->
+            <video
+              bind:this={previewVideo}
+              src={previewUrl || savedPlaybackUrl}
+              playsinline
+              class="ui:h-full ui:w-full ui:object-cover ui:[transform:scaleX(-1)]"
+              onpause={() => (isPreviewPlaying = false)}
+              onplay={() => (isPreviewPlaying = true)}
+              onended={onPreviewEnded}
+            ></video>
+            <button
+              type="button"
+              class="ui:group ui:absolute ui:inset-0 ui:grid ui:place-items-center ui:bg-black/10 ui:text-white ui:transition ui:hover:bg-black/20 ui:focus-visible:outline-none ui:focus-visible:ring-2 ui:focus-visible:ring-ring"
+              aria-label={isPreviewPlaying
+                ? label('video_recording.take.pause_preview', 'Pause recording preview')
+                : label('video_recording.take.play_preview', 'Play recording preview')}
+              onclick={togglePreviewPlayback}
+            >
+              {#if isPreviewPlaying}
+                <span
+                  class="ui:grid ui:size-14 ui:grid-cols-[6px_6px] ui:place-content-center ui:gap-2 ui:rounded-full ui:bg-background/90 ui:text-foreground ui:opacity-0 ui:shadow-md ui:transition-opacity ui:group-hover:opacity-100 ui:group-focus-visible:opacity-100"
+                  aria-hidden="true"
+                >
+                  <span class="ui:h-5 ui:w-1.5 ui:rounded-sm ui:bg-current"></span>
+                  <span class="ui:h-5 ui:w-1.5 ui:rounded-sm ui:bg-current"></span>
+                </span>
+              {:else}
+                <span
+                  class="ui:grid ui:size-14 ui:place-items-center ui:rounded-full ui:bg-background/90 ui:text-foreground ui:shadow-md"
+                  aria-hidden="true"
+                >
+                  <span
+                    class="ui:ml-1 ui:h-0 ui:w-0 ui:border-y-[10px] ui:border-y-transparent ui:border-l-[16px] ui:border-l-current"
+                  ></span>
+                </span>
+              {/if}
+            </button>
+          {:else if recordingState === 'permission_denied'}
+            <div class="ui:flex ui:max-w-40 ui:flex-col ui:items-center ui:gap-3 ui:text-center">
+              <p class="ui:text-sm ui:text-muted-foreground">
+                {label('video_recording.take.permission_denied', 'Camera or microphone access was blocked.')}
+              </p>
+              <Button type="button" size="sm" variant="secondary" {disabled} onclick={requestCamera}>
+                {label('video_recording.take.start_camera', 'Set up camera')}
+              </Button>
+            </div>
+          {:else}
+            <button
+              type="button"
+              class="ui:grid ui:size-24 ui:place-items-center ui:rounded-full ui:bg-background ui:px-3 ui:text-center ui:text-sm ui:font-medium ui:text-foreground ui:shadow-sm ui:ring-1 ui:ring-border ui:transition ui:hover:bg-accent ui:focus-visible:outline-none ui:focus-visible:ring-2 ui:focus-visible:ring-ring ui:disabled:pointer-events-none ui:disabled:opacity-50"
+              {disabled}
+              onclick={requestCamera}
+            >
+              {label('video_recording.take.start_camera', 'Set up camera')}
+            </button>
+          {/if}
+        </div>
+      </div>
+
+      {#if cameraDevices.length > 1 && recordingState !== 'recording'}
+        <div class="ui:flex ui:w-full ui:max-w-xs ui:flex-col ui:gap-1.5">
+          <span class="ui:text-xs ui:font-medium ui:text-muted-foreground">
+            {label('video_recording.take.camera_label', 'Camera')}
+          </span>
+          <Select.Root type="single" value={selectedCameraDeviceId} onValueChange={handleCameraChange}>
+            <Select.Trigger class="ui:w-full">
+              {cameraDevices.find((device) => device.deviceId === selectedCameraDeviceId)?.label ||
+                label('video_recording.take.camera_placeholder', 'Select camera')}
+            </Select.Trigger>
+            <Select.Content>
+              {#each cameraDevices as device, cameraIndex (device.deviceId)}
+                <Select.Item value={device.deviceId} label={device.label || `Camera ${cameraIndex + 1}`}>
+                  {device.label || `${label('video_recording.take.camera_label', 'Camera')} ${cameraIndex + 1}`}
+                </Select.Item>
+              {/each}
+            </Select.Content>
+          </Select.Root>
+        </div>
+      {/if}
+
+      <div class="ui:flex ui:flex-wrap ui:items-center ui:justify-center ui:gap-x-4 ui:gap-y-1 ui:text-sm">
+        <span class={isFinalWarning ? 'ui:text-destructive ui:font-medium' : 'ui:text-muted-foreground'}>
+          {label('video_recording.take.elapsed', 'Elapsed')}: {formatSeconds(elapsedSeconds)}
+        </span>
+        <span class={isFinalWarning ? 'ui:text-destructive ui:font-medium' : 'ui:text-muted-foreground'}>
+          {label('video_recording.take.remaining', 'Remaining')}: {formatSeconds(remainingSeconds)}
+        </span>
+        <span class="ui:text-muted-foreground">
+          {label('video_recording.take.max_duration', 'Max')}: {formatSeconds(maxDurationSeconds)}
+        </span>
+      </div>
+
+      {#if recordingState === 'failed' && durationSeconds < 1 && recordingBlob}
+        <p class="ui:text-destructive ui:text-sm">
+          {label('video_recording.take.too_short', 'Record for at least 1 second.')}
+        </p>
+      {/if}
+
+      {#if uploadError}
+        <p class="ui:text-destructive ui:text-sm">{uploadError}</p>
+      {/if}
+
+      {#if savedRecording && recordingState !== 'recording' && recordingState !== 'uploading'}
+        <p class="ui:text-muted-foreground ui:text-sm">
+          {label('video_recording.take.uploaded', 'Recording uploaded')}
+        </p>
+      {/if}
+
+      {#if savedRecording && recordingState === 'recorded'}
+        <p class="ui:text-muted-foreground ui:text-sm">
+          {label(
+            'video_recording.take.replaces_previous',
+            'A new accepted take replaces the previous answer after upload.'
+          )}
+        </p>
+      {/if}
+
+      <div class="ui:flex ui:flex-wrap ui:justify-center ui:gap-2">
+        {#if savedRecording && (recordingState === 'idle' || recordingState === 'uploaded')}
+          <Button type="button" variant="outline" {disabled} onclick={startRecording}>
+            {label('video_recording.take.retake', 'Retake')}
+          </Button>
+          <Button type="button" variant="ghost" {disabled} onclick={deleteRecording}>
+            {label('video_recording.take.delete', 'Delete recording')}
+          </Button>
+        {:else if recordingState === 'recording'}
+          <Button type="button" variant="destructive" {disabled} onclick={stopRecording}>
+            {label('video_recording.take.stop_recording', 'Stop recording')}
+          </Button>
+        {:else if recordingState === 'recorded' || recordingState === 'failed'}
+          <Button type="button" disabled={!canUseRecording} onclick={acceptRecording}>
+            {label(
+              recordingState === 'failed' && uploadError
+                ? 'video_recording.take.retry_upload'
+                : 'video_recording.take.use_recording',
+              recordingState === 'failed' && uploadError ? 'Retry upload' : 'Use recording'
+            )}
+          </Button>
+          <Button type="button" variant="ghost" {disabled} onclick={retakeRecording}>
+            {label('video_recording.take.retake', 'Retake')}
+          </Button>
+          {#if savedRecording}
+            <Button type="button" variant="ghost" {disabled} onclick={deleteRecording}>
+              {label('video_recording.take.delete', 'Delete recording')}
+            </Button>
+          {/if}
+        {:else if recordingState === 'uploading'}
+          <Button type="button" disabled>
+            <Spinner class="ui:size-4" />
+            {label('video_recording.take.uploading', 'Uploading recording...')}
+          </Button>
+        {/if}
+      </div>
+    </div>
+  {/if}
+</div>
diff --git a/packages/ui/src/custom/exercise-question/section-after-behavior.svelte b/packages/ui/src/custom/exercise-question/section-after-behavior.svelte
new file mode 100644
index 00000000..bdde9b17
--- /dev/null
+++ b/packages/ui/src/custom/exercise-question/section-after-behavior.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+  import * as Select from '../../base/select';
+  import type { ExerciseSectionAfterBehavior } from '@cio/question-types';
+
+  interface SectionOption {
+    id: string;
+    title: string;
+    order: number;
+  }
+
+  interface Props {
+    sectionIndex: number;
+    currentSectionId: string;
+    allSections: SectionOption[];
+    afterBehavior: ExerciseSectionAfterBehavior;
+    onChange: (behavior: ExerciseSectionAfterBehavior) => void;
+    labels: {
+      afterSectionPrefix: string;
+      continue: string;
+      goToSection: string;
+      submit: string;
+    };
+  }
+
+  let { sectionIndex, currentSectionId, allSections, afterBehavior, onChange, labels }: Props = $props();
+
+  const currentValue = $derived(
+    afterBehavior.action === 'go_to_section' ? `go_to_section:${afterBehavior.exerciseSectionId}` : afterBehavior.action
+  );
+
+  function getOptionLabel(value: string) {
+    if (value === 'continue') return labels.continue;
+    if (value === 'submit') return labels.submit;
+
+    const targetSectionId = value.replace('go_to_section:', '');
+    const targetSection = allSections.find((section) => section.id === targetSectionId);
+    return targetSection ? `${labels.goToSection}: ${targetSection.title}` : labels.goToSection;
+  }
+
+  function handleValueChange(value: string) {
+    if (!value) return;
+
+    if (value === 'continue' || value === 'submit') {
+      onChange({ action: value });
+      return;
+    }
+
+    const exerciseSectionId = value.replace('go_to_section:', '');
+    onChange({ action: 'go_to_section', exerciseSectionId });
+  }
+</script>
+
+<div
+  class="ui:flex ui:items-center ui:justify-between ui:gap-3 ui:border ui:border-border ui:bg-muted/30 ui:px-3 ui:py-2"
+>
+  <p class="ui:text-sm ui:font-medium ui:text-muted-foreground">{labels.afterSectionPrefix} {sectionIndex + 1}</p>
+  <Select.Root type="single" value={currentValue} onValueChange={handleValueChange}>
+    <Select.Trigger class="ui:w-[260px]">{getOptionLabel(currentValue)}</Select.Trigger>
+    <Select.Content>
+      <Select.Item value="continue" label={labels.continue}>{labels.continue}</Select.Item>
+      {#each allSections as section (section.id)}
+        {#if section.id !== currentSectionId}
+          <Select.Item value={`go_to_section:${section.id}`} label={`${labels.goToSection}: ${section.title}`}>
+            {labels.goToSection}: {section.title}
+          </Select.Item>
+        {/if}
+      {/each}
+      <Select.Item value="submit" label={labels.submit}>{labels.submit}</Select.Item>
+    </Select.Content>
+  </Select.Root>
+</div>
diff --git a/packages/ui/src/custom/exercise-question/section-header.svelte b/packages/ui/src/custom/exercise-question/section-header.svelte
new file mode 100644
index 00000000..92fce3ee
--- /dev/null
+++ b/packages/ui/src/custom/exercise-question/section-header.svelte
@@ -0,0 +1,69 @@
+<script lang="ts">
+  import Separator from '$src/base/separator/separator.svelte';
+  import type { ExerciseSectionColorTheme } from '@cio/question-types';
+
+  const COLOR_CLASSES: Record<ExerciseSectionColorTheme, string> = {
+    blue: 'ui:bg-blue-600!',
+    green: 'ui:bg-emerald-500!',
+    amber: 'ui:bg-amber-500!',
+    rose: 'ui:bg-rose-500!',
+    violet: 'ui:bg-violet-500!',
+    slate: 'ui:bg-slate-500!'
+  };
+
+  interface Props {
+    title: string;
+    description?: string | null;
+    sectionNumber: number;
+    totalSections: number;
+    colorTheme?: ExerciseSectionColorTheme;
+    questionCount?: number;
+    totalPoints?: number;
+    labels?: {
+      section?: string;
+      questions?: string;
+      points?: string;
+    };
+  }
+
+  let {
+    title,
+    description = null,
+    sectionNumber,
+    totalSections: _totalSections,
+    colorTheme = 'blue',
+    questionCount,
+    totalPoints,
+    labels = {}
+  }: Props = $props();
+
+  const sectionMetaSummary = $derived.by(() => {
+    const segments: string[] = [];
+    if (questionCount !== undefined) {
+      segments.push(`${questionCount} ${labels.questions ?? 'questions'}`);
+    }
+    if (totalPoints !== undefined) {
+      segments.push(`${totalPoints} ${labels.points ?? 'points'}`);
+    }
+    return segments.join(' · ');
+  });
+</script>
+
+<header>
+  <div class="ui:flex ui:items-center ui:gap-2">
+    <span class={`ui:h-2 ui:w-2 ui:rounded-full ui:inline-block ${COLOR_CLASSES[colorTheme]}`}> </span>
+
+    <p class="ui:text-sm ui:font-medium ui:uppercase">
+      {title}
+    </p>
+    {#if questionCount !== undefined || totalPoints !== undefined}
+      <p class="ui:text-xs ui:text-muted-foreground">({sectionMetaSummary})</p>
+    {/if}
+
+    <Separator orientation="horizontal" class="ui:flex-1 ui:h-0.5! {COLOR_CLASSES[colorTheme]}" />
+  </div>
+
+  <p class="ui:text-sm ui:text-muted-foreground">
+    {description}
+  </p>
+</header>
diff --git a/packages/ui/src/custom/exercise-question/section-navigation-sidebar.svelte b/packages/ui/src/custom/exercise-question/section-navigation-sidebar.svelte
new file mode 100644
index 00000000..0b366aea
--- /dev/null
+++ b/packages/ui/src/custom/exercise-question/section-navigation-sidebar.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+  interface SectionNavQuestion {
+    key: string;
+    label: string;
+    isAnswered: boolean;
+    isCurrent: boolean;
+  }
+
+  interface SectionNavGroup {
+    id: string;
+    title: string;
+    questions: SectionNavQuestion[];
+    isCurrent: boolean;
+  }
+
+  interface Props {
+    sections: SectionNavGroup[];
+  }
+
+  let { sections }: Props = $props();
+</script>
+
+<aside class="ui:rounded-md ui:border ui:bg-background ui:p-3">
+  <div class="ui:flex ui:flex-col ui:gap-3">
+    {#each sections as section (section.id)}
+      <div class="ui:space-y-2">
+        <p class={`ui:text-xs ui:font-semibold ${section.isCurrent ? 'ui:text-primary' : 'ui:text-muted-foreground'}`}>
+          {section.title}
+        </p>
+        <div class="ui:flex ui:flex-wrap ui:gap-1.5">
+          {#each section.questions as question (question.key)}
+            <span
+              class={`ui:inline-flex ui:h-7 ui:min-w-7 ui:items-center ui:justify-center ui:rounded ui:border ui:px-1.5 ui:text-xs ui:font-medium ${
+                question.isCurrent
+                  ? 'ui:border-primary ui:bg-primary ui:text-primary-foreground'
+                  : question.isAnswered
+                    ? 'ui:border-primary/40 ui:bg-primary/10 ui:text-primary'
+                    : 'ui:border-border ui:text-muted-foreground'
+              }`}
+            >
+              {question.label}
+            </span>
+          {/each}
+        </div>
+      </div>
+    {/each}
+  </div>
+</aside>
diff --git a/packages/ui/src/custom/exercise-question/section-overview.svelte b/packages/ui/src/custom/exercise-question/section-overview.svelte
new file mode 100644
index 00000000..384a11d6
--- /dev/null
+++ b/packages/ui/src/custom/exercise-question/section-overview.svelte
@@ -0,0 +1,93 @@
+<script lang="ts">
+  import { Button } from '../../base/button';
+  import type { ExerciseSectionColorTheme } from '@cio/question-types';
+
+  const ACCENT_CLASSES: Record<ExerciseSectionColorTheme, string> = {
+    blue: 'ui:bg-blue-600',
+    green: 'ui:bg-emerald-500',
+    amber: 'ui:bg-amber-500',
+    rose: 'ui:bg-rose-500',
+    violet: 'ui:bg-violet-500',
+    slate: 'ui:bg-slate-500'
+  };
+
+  interface Props {
+    sectionTitle: string;
+    sectionDescription?: string | null;
+    sectionNumber: number;
+    totalSections: number;
+    questionCount: number;
+    totalPoints: number;
+    colorTheme?: ExerciseSectionColorTheme;
+    onBegin: () => void;
+    onBack: () => void;
+    labels: {
+      beginSection: string;
+      back: string;
+      questions: string;
+      points: string;
+      section: string;
+    };
+  }
+
+  let {
+    sectionTitle,
+    sectionDescription = null,
+    sectionNumber,
+    totalSections,
+    questionCount,
+    colorTheme = 'blue',
+    onBegin,
+    onBack,
+    labels
+  }: Props = $props();
+
+  const segmentIndexes = $derived(Array.from({ length: totalSections }, (_, index) => index));
+</script>
+
+<section
+  class="ui:mx-auto ui:flex ui:min-h-[32rem] ui:w-full ui:max-w-5xl ui:flex-col ui:bg-background ui:px-3 ui:py-6"
+>
+  <div class="ui:mb-16 ui:flex ui:items-center ui:gap-5">
+    <div class="ui:flex ui:flex-1 ui:gap-2">
+      {#each segmentIndexes as segmentIndex}
+        <span
+          class={`ui:h-1 ui:flex-1 ui:rounded-full ${segmentIndex < sectionNumber ? 'ui:bg-muted-foreground/30' : 'ui:bg-muted'}`}
+          aria-hidden="true"
+        ></span>
+      {/each}
+    </div>
+    <p class="ui:shrink-0 ui:text-sm ui:text-muted-foreground">
+      {labels.section}
+      {sectionNumber} of {totalSections}
+    </p>
+  </div>
+
+  <div class="ui:flex ui:flex-1 ui:flex-col">
+    <p class="ui:text-sm ui:font-semibold ui:uppercase ui:tracking-[0.18em] ui:text-muted-foreground">
+      {labels.section}
+      {sectionNumber} of {totalSections}
+    </p>
+    <span class={`ui:mt-8 ui:h-1 ui:w-14 ui:rounded-full ${ACCENT_CLASSES[colorTheme]}`}></span>
+
+    <h2 class="ui:mt-10 ui:font-serif ui:text-5xl ui:font-bold ui:tracking-tight ui:text-foreground md:ui:text-6xl">
+      {sectionTitle}
+    </h2>
+
+    <div class="ui:mt-9 ui:flex ui:items-center ui:gap-3 ui:text-lg ui:text-muted-foreground">
+      <span class={`ui:h-2.5 ui:w-2.5 ui:rounded-full ${ACCENT_CLASSES[colorTheme]}`} aria-hidden="true"></span>
+      <span>{questionCount} {labels.questions}</span>
+    </div>
+
+    {#if sectionDescription}
+      <p class="ui:mt-8 ui:max-w-3xl ui:text-xl ui:leading-8 ui:text-muted-foreground">{sectionDescription}</p>
+    {/if}
+
+    <div class="ui:mt-auto ui:border-t ui:pt-8">
+      <div class="ui:flex ui:items-center ui:justify-between ui:gap-4">
+        <Button type="button" variant="outline" onclick={onBack}>{labels.back}</Button>
+        <Button type="button" onclick={onBegin} size="lg">{labels.beginSection}</Button>
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/packages/ui/src/custom/model-picker/index.ts b/packages/ui/src/custom/model-picker/index.ts
new file mode 100644
index 00000000..6d02964d
--- /dev/null
+++ b/packages/ui/src/custom/model-picker/index.ts
@@ -0,0 +1,4 @@
+import ModelPicker from './model-picker.svelte';
+
+export { ModelPicker };
+export { ModelPicker as default };
diff --git a/packages/ui/src/custom/model-picker/model-picker.svelte b/packages/ui/src/custom/model-picker/model-picker.svelte
new file mode 100644
index 00000000..0501f604
--- /dev/null
+++ b/packages/ui/src/custom/model-picker/model-picker.svelte
@@ -0,0 +1,117 @@
+<script lang="ts">
+  import * as Popover from '../../base/popover';
+  import * as Select from '../../base/select';
+  import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+  import CheckIcon from '@lucide/svelte/icons/check';
+  import RocketIcon from '@lucide/svelte/icons/rocket';
+  import { AGENT_MODELS, UI_PICKER_MODEL_IDS, type AgentModelId } from '@cio/utils/agent-models';
+
+  interface Props {
+    value: AgentModelId;
+    disabled?: boolean;
+    variant?: 'compact' | 'select';
+    lockedModelIds?: readonly AgentModelId[];
+    onChange: (id: AgentModelId) => void;
+    onLockedSelect?: (id: AgentModelId) => void;
+  }
+
+  let { value, disabled = false, variant = 'compact', lockedModelIds = [], onChange, onLockedSelect }: Props = $props();
+
+  let open = $state(false);
+
+  function isLocked(id: AgentModelId) {
+    return lockedModelIds.includes(id);
+  }
+
+  function handleSelect(id: AgentModelId) {
+    if (isLocked(id)) {
+      onLockedSelect?.(id);
+      open = false;
+      return;
+    }
+
+    onChange(id);
+    open = false;
+  }
+</script>
+
+{#if variant === 'select'}
+  <Select.Root type="single" {value} onValueChange={(v) => v && handleSelect(v as AgentModelId)} {disabled}>
+    <Select.Trigger>
+      <span class="ui:flex ui:items-center ui:gap-1">
+        {AGENT_MODELS[value].label}
+        {#if AGENT_MODELS[value].costTier === 'high'}
+          <span class="ui:text-red-500 ui:font-medium">$$$</span>
+        {:else}
+          <span class="ui:text-green-500 ui:font-medium">$</span>
+        {/if}
+      </span>
+    </Select.Trigger>
+    <Select.Content>
+      {#each UI_PICKER_MODEL_IDS as id (id)}
+        <Select.Item value={id} label={AGENT_MODELS[id].label}>
+          <span class="ui:flex ui:w-full ui:items-center ui:justify-between ui:gap-2">
+            <span class="ui:flex ui:min-w-0 ui:items-center ui:gap-2">
+              <span>{AGENT_MODELS[id].label}</span>
+              {#if isLocked(id)}
+                <RocketIcon size={16} class="ui:text-primary! ui:shrink-0" />
+              {/if}
+            </span>
+            <span
+              class={AGENT_MODELS[id].costTier === 'high'
+                ? 'ui:text-red-500 ui:font-medium'
+                : 'ui:text-green-500 ui:font-medium'}
+            >
+              {AGENT_MODELS[id].costTier === 'high' ? '$$$' : '$'}
+            </span>
+          </span>
+        </Select.Item>
+      {/each}
+    </Select.Content>
+  </Select.Root>
+{:else}
+  <Popover.Root bind:open>
+    <Popover.Trigger
+      {disabled}
+      class="ui:text-muted-foreground hover:ui:bg-muted ui:hover:text-foreground flex shrink-0 items-center gap-1 rounded-md px-2 py-1 text-xs transition-colors disabled:pointer-events-none disabled:opacity-40"
+    >
+      <span class="truncate">{AGENT_MODELS[value].label}</span>
+      {#if AGENT_MODELS[value].costTier === 'high'}
+        <span class="ui:text-red-500 font-medium">$$$</span>
+      {:else}
+        <span class="ui:text-green-500 font-medium">$</span>
+      {/if}
+      <ChevronDownIcon size={12} />
+    </Popover.Trigger>
+
+    <Popover.Content class="ui:p-0! ui:z-[110] w-48" align="end" side="top">
+      <div class="py-1">
+        {#each UI_PICKER_MODEL_IDS as id (id)}
+          {@const isSelected = id === value}
+          <button
+            type="button"
+            onclick={() => handleSelect(id)}
+            class="hover:ui:bg-muted flex w-full items-center justify-between gap-2 px-3 py-2 text-left text-xs transition-colors"
+          >
+            <span class="flex min-w-0 items-center gap-2">
+              <span class="min-w-0 truncate">{AGENT_MODELS[id].label}</span>
+              {#if isLocked(id)}
+                <RocketIcon size={16} class="ui:text-primary! ui:shrink-0" />
+              {/if}
+            </span>
+            <span class="flex shrink-0 items-center gap-1">
+              {#if AGENT_MODELS[id].costTier === 'high'}
+                <span class="ui:text-red-500 font-medium">$$$</span>
+              {:else}
+                <span class="ui:text-green-500 font-medium">$</span>
+              {/if}
+              {#if isSelected}
+                <CheckIcon size={14} class="ui:text-primary" />
+              {/if}
+            </span>
+          </button>
+        {/each}
+      </div>
+    </Popover.Content>
+  </Popover.Root>
+{/if}
diff --git a/packages/ui/src/custom/org-landing-page/bold/hero.svelte b/packages/ui/src/custom/org-landing-page/bold/hero.svelte
index df3b2263..146cb2cb 100644
--- a/packages/ui/src/custom/org-landing-page/bold/hero.svelte
+++ b/packages/ui/src/custom/org-landing-page/bold/hero.svelte
@@ -23,6 +23,7 @@
       <div class="ui:flex ui:flex-wrap ui:gap-4">
         <Button
           href={hero.primaryAction.href}
+          disabled={hero.primaryAction.disabled ?? false}
           size="lg"
           class="ui:rounded-xl ui:px-8 ui:py-6 ui:text-base ui:font-bold ui:shadow-lg ui:shadow-primary/20 ui:hover:-translate-y-1 ui:transition-all"
         >
diff --git a/packages/ui/src/custom/org-landing-page/classic/hero.svelte b/packages/ui/src/custom/org-landing-page/classic/hero.svelte
index a1c6f8e2..e2292ce5 100644
--- a/packages/ui/src/custom/org-landing-page/classic/hero.svelte
+++ b/packages/ui/src/custom/org-landing-page/classic/hero.svelte
@@ -33,7 +33,12 @@
     </BlurFade>
     <BlurFade delay={0.3} once={true}>
       <div class="ui:flex ui:flex-col ui:sm:flex-row ui:justify-center ui:gap-4">
-        <Button href={hero.primaryAction.href} size="lg" class="ui:px-8 ui:font-semibold">
+        <Button
+          href={hero.primaryAction.href}
+          disabled={hero.primaryAction.disabled ?? false}
+          size="lg"
+          class="ui:px-8 ui:font-semibold"
+        >
           {hero.primaryAction.label}
         </Button>
         {#if hero.secondaryAction}
diff --git a/packages/ui/src/custom/org-landing-page/minimal/hero.svelte b/packages/ui/src/custom/org-landing-page/minimal/hero.svelte
index dd25d5b0..63efb044 100644
--- a/packages/ui/src/custom/org-landing-page/minimal/hero.svelte
+++ b/packages/ui/src/custom/org-landing-page/minimal/hero.svelte
@@ -52,7 +52,12 @@
     </BlurFade>
     <BlurFade delay={0.3} once={true}>
       <div class="ui:flex ui:items-center ui:justify-center ui:gap-4">
-        <Button href={hero.primaryAction.href} size="lg" class="ui:rounded-full">
+        <Button
+          href={hero.primaryAction.href}
+          disabled={hero.primaryAction.disabled ?? false}
+          size="lg"
+          class="ui:rounded-full"
+        >
           {hero.primaryAction.label}
         </Button>
         {#if hero.secondaryAction}
diff --git a/packages/ui/src/custom/org-landing-page/types.ts b/packages/ui/src/custom/org-landing-page/types.ts
index 0db860da..51f8f471 100644
--- a/packages/ui/src/custom/org-landing-page/types.ts
+++ b/packages/ui/src/custom/org-landing-page/types.ts
@@ -64,7 +64,7 @@ export interface OrgLandingPageProps {
   hero: {
     heading: string;
     subheading: string;
-    primaryAction: { label: string; href: string };
+    primaryAction: { label: string; href: string; disabled?: boolean };
     secondaryAction?: { label: string; href: string };
     image?: string;
   };
diff --git a/packages/ui/src/custom/password/password.svelte b/packages/ui/src/custom/password/password.svelte
index 57718d3f..119bf763 100644
--- a/packages/ui/src/custom/password/password.svelte
+++ b/packages/ui/src/custom/password/password.svelte
@@ -7,13 +7,15 @@
   import type { ComponentProps } from 'svelte';
   import { cn } from '../../tools';
 
+  type PasswordInputAutocomplete = ComponentProps<typeof InputGroup.Input>['autocomplete'];
+
   interface Props {
     placeholder?: string;
     value?: string;
     class?: string;
     disabled?: boolean;
     'aria-invalid'?: 'true' | 'false' | undefined;
-    autocomplete?: string;
+    autocomplete?: PasswordInputAutocomplete;
     showPasswordTooltip?: string;
     hidePasswordTooltip?: string;
     showPasswordAriaLabel?: string;
diff --git a/packages/ui/src/custom/public-course/bottom-nav.svelte b/packages/ui/src/custom/public-course/bottom-nav.svelte
new file mode 100644
index 00000000..7a0c255a
--- /dev/null
+++ b/packages/ui/src/custom/public-course/bottom-nav.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+  import ChevronLeftIcon from '@lucide/svelte/icons/chevron-left';
+  import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+  import ListIcon from '@lucide/svelte/icons/list';
+  import { cn } from '../../tools';
+
+  interface Props {
+    /** Current position — e.g. "3 of 12" — plus a subline — e.g. "Hallucination & limitations". */
+    positionLabel: string;
+    sublineLabel?: string;
+    hasPrev: boolean;
+    hasNext: boolean;
+    onPrev: () => void;
+    onNext: () => void;
+    onOpenSheet: () => void;
+    /** a11y label for the center button (defaults to "Open course outline"). */
+    openSheetLabel?: string;
+    prevLabel?: string;
+    nextLabel?: string;
+    class?: string;
+  }
+
+  let {
+    positionLabel,
+    sublineLabel,
+    hasPrev,
+    hasNext,
+    onPrev,
+    onNext,
+    onOpenSheet,
+    openSheetLabel = 'Open course outline',
+    prevLabel = 'Previous lesson',
+    nextLabel = 'Next lesson',
+    class: className
+  }: Props = $props();
+</script>
+
+<nav
+  class={cn(
+    'ui:fixed ui:inset-x-0 ui:bottom-0 ui:z-40 ui:flex ui:items-stretch ui:gap-1 ui:border-t ui:border-border ui:bg-background/95 ui:p-1.5 ui:backdrop-blur ui:lg:hidden',
+    className
+  )}
+  aria-label="Lesson navigation"
+>
+  <button
+    type="button"
+    class="ui:inline-flex ui:items-center ui:justify-center ui:rounded-md ui:px-3 ui:py-3 ui:text-foreground ui:transition-colors ui:hover:bg-muted ui:disabled:opacity-30"
+    aria-label={prevLabel}
+    disabled={!hasPrev}
+    onclick={onPrev}
+  >
+    <ChevronLeftIcon class="ui:size-5" />
+  </button>
+
+  <button
+    type="button"
+    class="ui:flex ui:flex-1 ui:items-center ui:justify-center ui:gap-2 ui:rounded-md ui:px-3 ui:py-2 ui:text-center ui:transition-colors ui:hover:bg-muted"
+    aria-label={openSheetLabel}
+    onclick={onOpenSheet}
+  >
+    <ListIcon class="ui:size-4 ui:text-primary" />
+    <span class="ui:flex ui:min-w-0 ui:flex-col ui:items-start ui:text-left ui:leading-tight">
+      <span class="ui:text-[0.7rem] ui:font-medium ui:uppercase ui:tracking-wide ui:text-muted-foreground">
+        {positionLabel}
+      </span>
+      {#if sublineLabel}
+        <span class="ui:max-w-[55vw] ui:truncate ui:text-sm ui:font-medium ui:text-foreground">{sublineLabel}</span>
+      {/if}
+    </span>
+  </button>
+
+  <button
+    type="button"
+    class="ui:inline-flex ui:items-center ui:justify-center ui:rounded-md ui:px-3 ui:py-3 ui:text-foreground ui:transition-colors ui:hover:bg-muted ui:disabled:opacity-30"
+    aria-label={nextLabel}
+    disabled={!hasNext}
+    onclick={onNext}
+  >
+    <ChevronRightIcon class="ui:size-5" />
+  </button>
+</nav>
diff --git a/packages/ui/src/custom/public-course/callout.svelte b/packages/ui/src/custom/public-course/callout.svelte
new file mode 100644
index 00000000..0290a860
--- /dev/null
+++ b/packages/ui/src/custom/public-course/callout.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+  import ArrowUpRightIcon from '@lucide/svelte/icons/arrow-up-right';
+  import { cn } from '../../tools';
+  import type { PublicCourseCalloutData } from './types';
+
+  interface Props {
+    callout: PublicCourseCalloutData | null;
+    /** "inline" sits below the lesson body; "full" replaces it for locked items. */
+    variant?: 'inline' | 'full';
+    /** Shown when callout is null and variant === 'full'. */
+    lockedFallbackTitle?: string;
+    lockedFallbackDescription?: string;
+    class?: string;
+  }
+
+  let {
+    callout,
+    variant = 'inline',
+    lockedFallbackTitle = 'This lesson is locked',
+    lockedFallbackDescription = 'The creator hasn’t shared a link for this lesson yet. Check back later.',
+    class: className
+  }: Props = $props();
+
+  const cardBase = 'ui:rounded-xl ui:border ui:border-border ui:bg-card ui:text-card-foreground ui:transition-colors';
+
+  const rootClass = $derived(
+    variant === 'full'
+      ? cn(
+          cardBase,
+          'ui:my-10 ui:mx-auto ui:w-full ui:max-w-xl ui:p-8 ui:text-center ui:border-dashed ui:bg-muted/30',
+          className
+        )
+      : cn(cardBase, 'ui:mt-10 ui:p-6', className)
+  );
+</script>
+
+{#if callout}
+  <aside class={rootClass}>
+    <h3 class={cn('ui:font-semibold ui:text-foreground', variant === 'full' ? 'ui:text-xl' : 'ui:text-base')}>
+      {callout.title}
+    </h3>
+    <p class={cn('ui:mt-2 ui:text-sm ui:text-muted-foreground', variant === 'full' && 'ui:mx-auto ui:max-w-md')}>
+      {callout.description}
+    </p>
+    <a
+      href={callout.buttonUrl}
+      target="_blank"
+      rel="noopener"
+      class={cn(
+        'ui:mt-4 ui:inline-flex ui:items-center ui:gap-1.5 ui:rounded-md ui:bg-primary ui:px-4 ui:py-2 ui:text-sm ui:font-medium ui:text-primary-foreground ui:transition-colors ui:hover:bg-primary/90'
+      )}
+    >
+      {callout.buttonLabel}
+      <ArrowUpRightIcon class="ui:size-4" />
+    </a>
+  </aside>
+{:else if variant === 'full'}
+  <aside class={rootClass}>
+    <h3 class="ui:text-xl ui:font-semibold ui:text-foreground">{lockedFallbackTitle}</h3>
+    <p class="ui:mt-2 ui:mx-auto ui:max-w-md ui:text-sm ui:text-muted-foreground">{lockedFallbackDescription}</p>
+  </aside>
+{/if}
diff --git a/packages/ui/src/custom/public-course/exercise-view.svelte b/packages/ui/src/custom/public-course/exercise-view.svelte
new file mode 100644
index 00000000..cb19cfbf
--- /dev/null
+++ b/packages/ui/src/custom/public-course/exercise-view.svelte
@@ -0,0 +1,422 @@
+<script lang="ts">
+  import * as Select from '../../base/select';
+  import {
+    getExerciseQuestionContractKey,
+    isAutoGradableQuestionTypeId,
+    QUESTION_TYPE_KEY,
+    type AnswerData,
+    type ExerciseQuestionLabels,
+    type ExerciseQuestionModel
+  } from '@cio/question-types';
+  import { untrack } from 'svelte';
+  import { Button } from '../../base/button';
+  import { QuestionList } from '../exercise-question';
+  import { cn } from '../../tools';
+  import Callout from './callout.svelte';
+  import type { PublicCourseCalloutData, PublicExerciseViewData } from './types';
+  import type { PublicExerciseStoredAttempt } from './public-exercise-attempts-storage';
+  import { readPublicExerciseAttempts, writePublicExerciseAttempts } from './public-exercise-attempts-storage';
+
+  interface Props {
+    exercise: PublicExerciseViewData;
+    callout?: PublicCourseCalloutData | null;
+    labels?: ExerciseQuestionLabels;
+    /** When set, completed attempts persist and hydrate from `localStorage`. */
+    attemptsPersistenceKey?: string | null;
+    formatAttemptOption?: (args: { attemptNumber: number; correct: number; total: number }) => string;
+    newAttemptOptionLabel?: string;
+    attemptsSelectAriaLabel?: string;
+    submitLabel?: string;
+    tryAgainLabel?: string;
+    privacyHint?: string;
+    summaryTemplate?: string;
+    class?: string;
+  }
+
+  let {
+    exercise,
+    callout = null,
+    labels,
+    attemptsPersistenceKey = null,
+    formatAttemptOption = ({ attemptNumber, correct, total }) => `Attempt ${attemptNumber} - ${correct}/${total}`,
+    newAttemptOptionLabel = 'Practice again',
+    attemptsSelectAriaLabel = 'Your attempts',
+    submitLabel = 'Check my answers',
+    tryAgainLabel = 'Practice again',
+    privacyHint = 'Graded instantly in your browser — nothing is submitted.',
+    summaryTemplate = 'You got [[correct]] / [[total]] correct.',
+    class: className
+  }: Props = $props();
+
+  let persistedAttempts = $state<PublicExerciseStoredAttempt[]>([]);
+  /** `'live'` = unsaved/new round; `'0'`.. = index into persisted attempts. */
+  let selectValue = $state<string>('live');
+  let answers = $state<Record<string, AnswerData>>({});
+  let submitted = $state(false);
+
+  const mode = $derived<'take' | 'review'>(submitted ? 'review' : 'take');
+
+  $effect(() => {
+    attemptsPersistenceKey;
+    untrack(() => {
+      persistedAttempts = readPublicExerciseAttempts(attemptsPersistenceKey);
+      const rows = persistedAttempts;
+      if (rows.length === 0) {
+        selectValue = 'live';
+        answers = {};
+        submitted = false;
+        return;
+      }
+
+      const defaultIndex = rows.length - 1;
+      selectValue = String(defaultIndex);
+      const row = rows[defaultIndex];
+      answers = structuredClone(row.answersByKey);
+      submitted = true;
+    });
+  });
+
+  function handleAttemptSelect(selected: string) {
+    if (selected === 'live') {
+      selectValue = 'live';
+      answers = {};
+      submitted = false;
+      return;
+    }
+
+    const idx = Number.parseInt(selected, 10);
+    if (!Number.isInteger(idx) || idx < 0 || idx >= persistedAttempts.length) return;
+
+    selectValue = selected;
+    submitted = true;
+    answers = structuredClone(persistedAttempts[idx].answersByKey);
+  }
+
+  function handleAnswerChange(question: ExerciseQuestionModel, answer: AnswerData | null) {
+    if (submitted) return;
+
+    const key = getExerciseQuestionContractKey(question);
+    if (answer === null) {
+      const next = { ...answers };
+      delete next[key];
+      answers = next;
+      return;
+    }
+
+    answers = { ...answers, [key]: answer };
+  }
+
+  function hasProvidedAnswer(question: ExerciseQuestionModel, answer: AnswerData | undefined): boolean {
+    if (!answer) return false;
+
+    switch (question.questionType) {
+      case QUESTION_TYPE_KEY.RADIO:
+        return answer.type === 'RADIO' && answer.optionId != null;
+      case QUESTION_TYPE_KEY.CHECKBOX:
+        return answer.type === 'CHECKBOX' && answer.optionIds.length > 0;
+      case QUESTION_TYPE_KEY.TRUE_FALSE:
+        return answer.type === 'TRUE_FALSE';
+      case QUESTION_TYPE_KEY.TEXTAREA:
+        return answer.type === 'TEXTAREA' && answer.text.trim().length > 0;
+      case QUESTION_TYPE_KEY.SHORT_ANSWER:
+        return answer.type === 'SHORT_ANSWER' && answer.text.trim().length > 0;
+      case QUESTION_TYPE_KEY.NUMERIC:
+        return answer.type === 'NUMERIC' && Number.isFinite(answer.value);
+      case QUESTION_TYPE_KEY.FILL_BLANK: {
+        if (answer.type !== 'FILL_BLANK') return false;
+        const blankSlots = (question.options ?? []).filter((option) => option.isCorrect !== false).length;
+        if (blankSlots === 0) return false;
+
+        return (
+          answer.values.length >= blankSlots &&
+          answer.values.slice(0, blankSlots).every((value) => typeof value === 'string' && value.trim().length > 0)
+        );
+      }
+      case QUESTION_TYPE_KEY.ORDERING: {
+        if (answer.type !== 'ORDERING') return false;
+        const expectedLength = (question.options ?? [])
+          .map((option) => String(option.value ?? option.label ?? ''))
+          .filter(Boolean).length;
+
+        return (
+          expectedLength > 0 &&
+          answer.orderedValues.length === expectedLength &&
+          answer.orderedValues.every((value) => typeof value === 'string' && value.length > 0)
+        );
+      }
+      default:
+        return false;
+    }
+  }
+
+  const canSubmitAnswers = $derived(
+    exercise.questions.length > 0 &&
+      exercise.questions.every((question, index) =>
+        hasProvidedAnswer(question, answers[getExerciseQuestionContractKey(question, index)])
+      )
+  );
+
+  function isAnswerCorrect(question: ExerciseQuestionModel, answer: AnswerData | undefined): boolean | null {
+    if (!answer) return false;
+
+    switch (question.questionType) {
+      case QUESTION_TYPE_KEY.RADIO: {
+        if (answer.type !== 'RADIO') return false;
+        const correctOption = (question.options ?? []).find((option) => option.isCorrect);
+        if (!correctOption?.id) return false;
+        return String(correctOption.id) === String(answer.optionId);
+      }
+      case QUESTION_TYPE_KEY.CHECKBOX: {
+        if (answer.type !== 'CHECKBOX') return false;
+        const correctIds = new Set(
+          (question.options ?? [])
+            .filter((option) => option.isCorrect && option.id !== undefined)
+            .map((option) => String(option.id))
+        );
+        const selected = new Set(answer.optionIds.map(String));
+        if (selected.size !== correctIds.size) return false;
+        for (const id of correctIds) {
+          if (!selected.has(id)) return false;
+        }
+        return true;
+      }
+      case QUESTION_TYPE_KEY.TRUE_FALSE: {
+        if (answer.type !== 'TRUE_FALSE') return false;
+        const correctOption = (question.options ?? []).find((option) => option.isCorrect);
+        const correctValue = /true/i.test(String(correctOption?.label ?? correctOption?.value ?? ''));
+        return answer.value === correctValue;
+      }
+      case QUESTION_TYPE_KEY.SHORT_ANSWER: {
+        if (answer.type !== 'SHORT_ANSWER') return false;
+        const caseSensitive = Boolean((question.settings as { caseSensitive?: boolean } | undefined)?.caseSensitive);
+        const accepted = (question.options ?? [])
+          .filter((option) => option.isCorrect !== false)
+          .map((option) => String(option.label ?? option.value ?? '').trim());
+        const submittedValue = answer.text.trim();
+        if (!submittedValue || accepted.length === 0) return false;
+        return accepted.some((expected) => {
+          if (caseSensitive) return expected === submittedValue;
+          return expected.toLowerCase() === submittedValue.toLowerCase();
+        });
+      }
+      case QUESTION_TYPE_KEY.NUMERIC: {
+        if (answer.type !== 'NUMERIC') return false;
+        const settings = (question.settings ?? {}) as { correctValue?: unknown; tolerance?: unknown };
+        const correctOption = (question.options ?? []).find((option) => option.isCorrect);
+        const correctValue = Number(correctOption?.label ?? correctOption?.value ?? settings.correctValue ?? NaN);
+        const tolerance = Number(settings.tolerance ?? 0);
+        if (!Number.isFinite(correctValue)) return null;
+        return Math.abs(answer.value - correctValue) <= (Number.isFinite(tolerance) ? tolerance : 0);
+      }
+      case QUESTION_TYPE_KEY.FILL_BLANK: {
+        if (answer.type !== 'FILL_BLANK') return false;
+        const accepted = (question.options ?? [])
+          .filter((option) => option.isCorrect !== false)
+          .map((option) =>
+            String(option.label ?? option.value ?? '')
+              .trim()
+              .toLowerCase()
+          );
+        if (accepted.length === 0) return null;
+        return answer.values.every((value, index) => {
+          const expected = accepted[index];
+          if (expected === undefined) return false;
+          return value.trim().toLowerCase() === expected;
+        });
+      }
+      case QUESTION_TYPE_KEY.ORDERING: {
+        if (answer.type !== 'ORDERING') return false;
+        const expected = (question.options ?? [])
+          .map((option) => String(option.value ?? option.label ?? ''))
+          .filter(Boolean);
+        if (expected.length === 0) return null;
+        return (
+          answer.orderedValues.length === expected.length &&
+          answer.orderedValues.every((value, index) => value === expected[index])
+        );
+      }
+      default:
+        return null;
+    }
+  }
+
+  const totalGradable = $derived(
+    exercise.questions.reduce((count, question) => {
+      const typeId = (question as ExerciseQuestionModel & { questionTypeId?: number }).questionTypeId;
+      const isAutoGradable = typeof typeId === 'number' ? isAutoGradableQuestionTypeId(typeId) : true;
+      return isAutoGradable ? count + 1 : count;
+    }, 0)
+  );
+
+  const correctCountComputed = $derived(
+    submitted
+      ? exercise.questions.reduce((count, question) => {
+          const key = getExerciseQuestionContractKey(question);
+          return isAnswerCorrect(question, answers[key]) === true ? count + 1 : count;
+        }, 0)
+      : 0
+  );
+
+  /** When reviewing a stored snapshot, scores are pinned to saved numbers (handles changed rubrics later). */
+  const displayCorrectCount = $derived.by(() => {
+    if (!submitted) return correctCountComputed;
+    const idx =
+      selectValue !== 'live'
+        ? Number.parseInt(selectValue, 10)
+        : persistedAttempts.length > 0
+          ? persistedAttempts.length - 1
+          : -1;
+    if (Number.isInteger(idx) && idx >= 0 && idx < persistedAttempts.length) {
+      return persistedAttempts[idx].correctCount;
+    }
+    return correctCountComputed;
+  });
+
+  const displayTotalGradable = $derived.by(() => {
+    if (!submitted) return totalGradable;
+    const idx =
+      selectValue !== 'live'
+        ? Number.parseInt(selectValue, 10)
+        : persistedAttempts.length > 0
+          ? persistedAttempts.length - 1
+          : -1;
+    if (Number.isInteger(idx) && idx >= 0 && idx < persistedAttempts.length) {
+      return persistedAttempts[idx].totalGradable;
+    }
+    return totalGradable;
+  });
+
+  const summaryText = $derived(
+    summaryTemplate
+      .replace('[[correct]]', String(displayCorrectCount))
+      .replace('[[total]]', String(displayTotalGradable))
+  );
+
+  const showAttemptsPicker = $derived(
+    !!attemptsPersistenceKey && persistedAttempts.length > 0 && exercise.questions.length > 0 && exercise.isUnlocked
+  );
+
+  function handleSubmit() {
+    if (!canSubmitAnswers) return;
+
+    submitted = true;
+
+    if (!attemptsPersistenceKey) return;
+
+    const correct = exercise.questions.reduce((count, question) => {
+      const key = getExerciseQuestionContractKey(question);
+      return isAnswerCorrect(question, answers[key]) === true ? count + 1 : count;
+    }, 0);
+    const tot = totalGradable;
+
+    const snapshot: PublicExerciseStoredAttempt = {
+      savedAt: new Date().toISOString(),
+      answersByKey: structuredClone(answers),
+      correctCount: correct,
+      totalGradable: tot
+    };
+
+    persistedAttempts = [...persistedAttempts, snapshot];
+    writePublicExerciseAttempts(attemptsPersistenceKey, persistedAttempts);
+    selectValue = String(persistedAttempts.length - 1);
+  }
+
+  function handleReset() {
+    selectValue = 'live';
+    answers = {};
+    submitted = false;
+  }
+
+  /** Trigger text when user is reviewing a frozen attempt vs starting fresh. */
+  const tryAgainButtonLabel = $derived(
+    showAttemptsPicker && selectValue !== 'live' ? newAttemptOptionLabel : tryAgainLabel
+  );
+</script>
+
+<article class={cn('ui:mx-auto ui:w-full ui:max-w-3xl ui:px-4 ui:py-8 ui:sm:px-6 ui:lg:py-10', className)}>
+  {#if !exercise.isUnlocked}
+    <Callout variant="full" {callout} />
+  {:else}
+    {#if exercise.sectionTitle}
+      <div class="ui:text-xs ui:font-medium ui:uppercase ui:tracking-wide ui:text-muted-foreground">
+        {exercise.sectionTitle}
+      </div>
+    {/if}
+
+    {#if showAttemptsPicker}
+      <div class="ui:mt-4 ui:flex ui:flex-wrap ui:items-center ui:gap-2">
+        <span class="ui:sr-only" id="public-exercise-attempts-select-label">{attemptsSelectAriaLabel}</span>
+        <Select.Root
+          type="single"
+          value={selectValue}
+          onValueChange={(nextValue) => nextValue && handleAttemptSelect(nextValue)}
+        >
+          <Select.Trigger
+            class="ui:min-w-[min(24rem,calc(100vw-5rem))] ui:max-w-full"
+            aria-labelledby="public-exercise-attempts-select-label"
+          >
+            <span class="ui:truncate">
+              {selectValue === 'live'
+                ? newAttemptOptionLabel
+                : formatAttemptOption({
+                    attemptNumber: Number(selectValue) + 1,
+                    correct: persistedAttempts[Number(selectValue)]?.correctCount ?? 0,
+                    total: persistedAttempts[Number(selectValue)]?.totalGradable ?? totalGradable
+                  })}
+            </span>
+          </Select.Trigger>
+          <Select.Content>
+            {#each persistedAttempts as _, attemptIdx (attemptIdx)}
+              {@const stored = persistedAttempts[attemptIdx]}
+              {@const attemptLabel = formatAttemptOption({
+                attemptNumber: attemptIdx + 1,
+                correct: stored.correctCount,
+                total: stored.totalGradable
+              })}
+              <Select.Item value={String(attemptIdx)} label={attemptLabel}>{attemptLabel}</Select.Item>
+            {/each}
+            <Select.Item value="live" label={newAttemptOptionLabel}>{newAttemptOptionLabel}</Select.Item>
+          </Select.Content>
+        </Select.Root>
+      </div>
+    {/if}
+
+    <h1
+      class={cn(
+        'ui:text-2xl ui:tracking-tight ui:text-foreground ui:sm:text-3xl',
+        showAttemptsPicker ? 'ui:mt-4' : 'ui:mt-2'
+      )}
+    >
+      {exercise.title}
+    </h1>
+
+    {#if exercise.description}
+      <p class="ui:mt-3 ui:text-muted-foreground">{exercise.description}</p>
+    {/if}
+
+    <div class="ui:mt-8 ui:space-y-6">
+      <QuestionList
+        contract={{
+          mode,
+          questions: exercise.questions,
+          answersByKey: answers,
+          disabled: submitted,
+          labels
+        }}
+        onAnswerChange={handleAnswerChange}
+      />
+    </div>
+
+    <div class="ui:mt-10 ui:flex ui:items-center ui:justify-between ui:gap-4">
+      {#if submitted}
+        <div class="ui:text-sm ui:text-muted-foreground">{summaryText}</div>
+        <Button variant="outline" onclick={handleReset}>{tryAgainButtonLabel}</Button>
+      {:else}
+        <span class="ui:text-sm ui:text-muted-foreground">{privacyHint}</span>
+        <Button disabled={!canSubmitAnswers} onclick={handleSubmit}>{submitLabel}</Button>
+      {/if}
+    </div>
+
+    <Callout variant="inline" {callout} />
+  {/if}
+</article>
diff --git a/packages/ui/src/custom/public-course/footer-nav.svelte b/packages/ui/src/custom/public-course/footer-nav.svelte
new file mode 100644
index 00000000..34901363
--- /dev/null
+++ b/packages/ui/src/custom/public-course/footer-nav.svelte
@@ -0,0 +1,96 @@
+<script lang="ts">
+  import ArrowLeftIcon from '@lucide/svelte/icons/arrow-left';
+  import ArrowRightIcon from '@lucide/svelte/icons/arrow-right';
+  import { cn } from '../../tools';
+  import type { PublicCourseSidebarItem } from './types';
+
+  interface Props {
+    /** Previous item (or `null` if on the first item). */
+    prev?: PublicCourseSidebarItem | null;
+    /** Next item (or `null` if on the last item). */
+    next?: PublicCourseSidebarItem | null;
+    /** Builds the href for a target item. Falls back to plain buttons if omitted. */
+    hrefFor?: (item: PublicCourseSidebarItem) => string;
+    /** Click handler — used when `hrefFor` is omitted, or for SPA navigation alongside `href`. */
+    onNavigate?: (item: PublicCourseSidebarItem) => void;
+    /** Localized labels for the prev / next captions. */
+    prevLabel?: string;
+    nextLabel?: string;
+    class?: string;
+  }
+
+  let {
+    prev = null,
+    next = null,
+    hrefFor,
+    onNavigate,
+    prevLabel = 'Previous',
+    nextLabel = 'Next',
+    class: className
+  }: Props = $props();
+
+  const cardClass =
+    'ui:group ui:flex ui:flex-1 ui:items-center ui:gap-3 ui:rounded-lg ui:border ui:border-border ui:bg-background ui:px-4 ui:py-3 ui:text-left ui:transition-colors ui:hover:border-primary/40 ui:hover:bg-muted/50';
+
+  const prevHref = $derived(prev ? hrefFor?.(prev) : undefined);
+  const nextHref = $derived(next ? hrefFor?.(next) : undefined);
+</script>
+
+{#snippet prevBody(item: PublicCourseSidebarItem, label: string)}
+  <ArrowLeftIcon class="ui:size-4 ui:text-muted-foreground ui:group-hover:text-primary" />
+  <div class="ui:flex ui:min-w-0 ui:flex-col">
+    <span class="ui:text-xs ui:font-medium ui:uppercase ui:tracking-wide ui:text-muted-foreground">
+      {label}
+    </span>
+    <span class="ui:truncate ui:text-sm ui:font-medium ui:text-foreground ui:group-hover:text-primary">
+      {item.title}
+    </span>
+  </div>
+{/snippet}
+
+{#snippet nextBody(item: PublicCourseSidebarItem, label: string)}
+  <div class="ui:flex ui:min-w-0 ui:flex-col ui:items-end">
+    <span class="ui:text-xs ui:font-medium ui:uppercase ui:tracking-wide ui:text-muted-foreground">
+      {label}
+    </span>
+    <span class="ui:truncate ui:text-sm ui:font-medium ui:text-foreground ui:group-hover:text-primary">
+      {item.title}
+    </span>
+  </div>
+  <ArrowRightIcon class="ui:size-4 ui:text-muted-foreground ui:group-hover:text-primary" />
+{/snippet}
+
+{#if prev || next}
+  <nav
+    class={cn('ui:mt-12 ui:flex ui:flex-col ui:gap-3 ui:border-t ui:border-border ui:pt-6 ui:sm:flex-row', className)}
+    aria-label="Lesson navigation"
+  >
+    {#if prev}
+      {#if prevHref}
+        <a href={prevHref} class={cardClass} onclick={() => onNavigate?.(prev)}>
+          {@render prevBody(prev, prevLabel)}
+        </a>
+      {:else}
+        <button type="button" class={cardClass} onclick={() => onNavigate?.(prev)}>
+          {@render prevBody(prev, prevLabel)}
+        </button>
+      {/if}
+    {:else}
+      <div class="ui:flex-1"></div>
+    {/if}
+
+    {#if next}
+      {#if nextHref}
+        <a href={nextHref} class={cn(cardClass, 'ui:justify-end ui:text-right')} onclick={() => onNavigate?.(next)}>
+          {@render nextBody(next, nextLabel)}
+        </a>
+      {:else}
+        <button type="button" class={cn(cardClass, 'ui:justify-end ui:text-right')} onclick={() => onNavigate?.(next)}>
+          {@render nextBody(next, nextLabel)}
+        </button>
+      {/if}
+    {:else}
+      <div class="ui:flex-1"></div>
+    {/if}
+  </nav>
+{/if}
diff --git a/packages/ui/src/custom/public-course/index.ts b/packages/ui/src/custom/public-course/index.ts
new file mode 100644
index 00000000..54de8063
--- /dev/null
+++ b/packages/ui/src/custom/public-course/index.ts
@@ -0,0 +1,29 @@
+export { default as PublicCourseShell } from './shell.svelte';
+export { default as PublicCourseSidebar } from './sidebar.svelte';
+export { default as PublicCourseSidebarRow } from './sidebar-row.svelte';
+export { default as PublicCourseBottomNav } from './bottom-nav.svelte';
+export { default as PublicCourseFooterNav } from './footer-nav.svelte';
+export { default as PublicCoursePoweredBy } from './powered-by.svelte';
+export { default as PublicCourseMobileSheet } from './mobile-sheet.svelte';
+export { default as PublicLessonView } from './lesson-view.svelte';
+export { default as PublicExerciseView } from './exercise-view.svelte';
+export { default as PublicCourseCallout } from './callout.svelte';
+
+export {
+  PUBLIC_EXERCISE_ATTEMPTS_STORE_VERSION,
+  publicExerciseAttemptsStorageKey,
+  readPublicExerciseAttempts,
+  writePublicExerciseAttempts
+} from './public-exercise-attempts-storage';
+export type { PublicExerciseStoredAttempt } from './public-exercise-attempts-storage';
+
+export type {
+  PublicCourseCalloutData,
+  PublicCourseOrgData,
+  PublicCourseSidebarItem,
+  PublicCourseSidebarSection,
+  PublicCourseItemVariant,
+  PublicLessonViewData,
+  PublicExerciseViewData,
+  PublicItemViewData
+} from './types';
diff --git a/packages/ui/src/custom/public-course/lesson-view.svelte b/packages/ui/src/custom/public-course/lesson-view.svelte
new file mode 100644
index 00000000..78c69443
--- /dev/null
+++ b/packages/ui/src/custom/public-course/lesson-view.svelte
@@ -0,0 +1,85 @@
+<script lang="ts">
+  import { cn } from '../../tools';
+  import { SafeHtmlContent } from '../safe-html-content';
+  import Callout from './callout.svelte';
+  import type { PublicCourseCalloutData, PublicLessonViewData } from './types';
+
+  interface Props {
+    lesson: PublicLessonViewData;
+    callout?: PublicCourseCalloutData | null;
+    class?: string;
+  }
+
+  let { lesson, callout = null, class: className }: Props = $props();
+
+  const isYoutube = $derived(lesson.video?.type === 'youtube');
+
+  function toEmbedUrl(link: string): string {
+    try {
+      const url = new URL(link);
+      if (url.hostname.includes('youtu.be')) {
+        const videoId = url.pathname.replace(/^\//, '');
+        return `https://www.youtube.com/embed/${videoId}`;
+      }
+      if (url.hostname.includes('youtube.com')) {
+        const videoId = url.searchParams.get('v');
+        if (videoId) return `https://www.youtube.com/embed/${videoId}`;
+      }
+      return link;
+    } catch {
+      return link;
+    }
+  }
+</script>
+
+<!--
+  Public lesson page. Width / spacing intentionally mirrors the authenticated
+  lesson view (see `apps/dashboard/src/lib/features/course/pages/lesson.svelte`)
+  so creators see the same content layout whether they're logged in or sharing
+  a public link. The `prose` class (no `ui:` prefix) hooks into the dashboard's
+  app.css typography rules.
+-->
+<article class={cn('ui:mx-auto ui:w-full ui:max-w-3xl ui:px-4 ui:py-8 ui:sm:px-6 ui:lg:py-10', className)}>
+  {#if !lesson.isUnlocked}
+    <Callout variant="full" {callout} />
+  {:else}
+    {#if lesson.video}
+      <div class="ui:mb-6 ui:overflow-hidden ui:rounded-xl ui:bg-black">
+        {#if isYoutube}
+          <iframe
+            class="ui:aspect-video ui:w-full"
+            src={toEmbedUrl(lesson.video.link)}
+            title={lesson.title}
+            frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            allowfullscreen
+          ></iframe>
+        {:else}
+          <video class="ui:aspect-video ui:w-full" controls playsinline src={lesson.video.link}>
+            <track kind="captions" />
+          </video>
+        {/if}
+      </div>
+    {/if}
+
+    {#if lesson.sectionTitle}
+      <div class="ui:text-xs ui:font-medium ui:uppercase ui:tracking-wide ui:text-muted-foreground">
+        {lesson.sectionTitle}
+      </div>
+    {/if}
+
+    <h1 class="ui:mt-2 ui:text-2xl ui:tracking-tight ui:text-foreground ui:sm:text-3xl">
+      {lesson.title}
+    </h1>
+
+    <div class="prose sm:prose-sm ui:mt-8 ui:max-w-none ui:dark:text-white">
+      {#if lesson.body}
+        <SafeHtmlContent content={lesson.body} />
+      {:else}
+        <p class="ui:text-muted-foreground">No content yet.</p>
+      {/if}
+    </div>
+
+    <Callout variant="inline" {callout} />
+  {/if}
+</article>
diff --git a/packages/ui/src/custom/public-course/mobile-sheet.svelte b/packages/ui/src/custom/public-course/mobile-sheet.svelte
new file mode 100644
index 00000000..fae5a929
--- /dev/null
+++ b/packages/ui/src/custom/public-course/mobile-sheet.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+  import * as Drawer from '../../base/drawer';
+  import Sidebar from './sidebar.svelte';
+  import type { PublicCourseSidebarItem, PublicCourseSidebarSection } from './types';
+
+  interface Props {
+    open: boolean;
+    onOpenChange?: (next: boolean) => void;
+    sections: PublicCourseSidebarSection[];
+    activeSlug?: string | null;
+    onItemClick?: (item: PublicCourseSidebarItem) => void;
+    hrefFor?: (item: PublicCourseSidebarItem) => string;
+    title?: string;
+    /** Forwarded to Sidebar's powered-by footer. */
+    showPoweredBy?: boolean;
+    courseSlug?: string | null;
+    orgSlug?: string | null;
+    poweredByLabel?: string;
+    poweredByBrand?: string;
+  }
+
+  let {
+    open = $bindable(false),
+    onOpenChange,
+    sections,
+    activeSlug = null,
+    onItemClick,
+    hrefFor,
+    title = 'Course outline',
+    showPoweredBy = true,
+    courseSlug = null,
+    orgSlug = null,
+    poweredByLabel = 'Powered by',
+    poweredByBrand = 'ClassroomIO'
+  }: Props = $props();
+
+  function handleOpenChange(next: boolean) {
+    open = next;
+    onOpenChange?.(next);
+  }
+
+  function handleItemClick(item: PublicCourseSidebarItem) {
+    onItemClick?.(item);
+    handleOpenChange(false);
+  }
+</script>
+
+<Drawer.Root {open} onOpenChange={handleOpenChange}>
+  <Drawer.Portal>
+    <Drawer.Overlay class="ui:fixed ui:inset-0 ui:z-50 ui:bg-black/40" />
+    <Drawer.Content
+      class="ui:fixed ui:inset-x-0 ui:bottom-0 ui:z-50 ui:flex ui:max-h-[85vh] ui:flex-col ui:rounded-t-xl ui:border-t ui:border-border ui:bg-background"
+    >
+      <div class="ui:mx-auto ui:mt-2 ui:h-1 ui:w-10 ui:rounded-full ui:bg-muted" aria-hidden="true"></div>
+      <Drawer.Header class="ui:px-5 ui:pt-3 ui:pb-2">
+        <Drawer.Title class="ui:text-sm ui:font-semibold ui:text-foreground">{title}</Drawer.Title>
+      </Drawer.Header>
+      <div class="ui:flex-1 ui:overflow-y-auto ui:px-2 ui:pb-[max(env(safe-area-inset-bottom),1rem)]">
+        <Sidebar
+          {sections}
+          {activeSlug}
+          onItemClick={handleItemClick}
+          {hrefFor}
+          {showPoweredBy}
+          {courseSlug}
+          {orgSlug}
+          {poweredByLabel}
+          {poweredByBrand}
+        />
+      </div>
+    </Drawer.Content>
+  </Drawer.Portal>
+</Drawer.Root>
diff --git a/packages/ui/src/custom/public-course/powered-by.svelte b/packages/ui/src/custom/public-course/powered-by.svelte
new file mode 100644
index 00000000..2ada2b31
--- /dev/null
+++ b/packages/ui/src/custom/public-course/powered-by.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { cn } from '../../tools';
+
+  interface Props {
+    /** Course slug for attribution (passed as ?utm_source=...&utm_content=...). */
+    courseSlug?: string | null;
+    /** Org siteName (or org name) for attribution. */
+    orgSlug?: string | null;
+    /** Localized label. */
+    label?: string;
+    /** Localized "ClassroomIO" brand label. */
+    brand?: string;
+    class?: string;
+  }
+
+  let {
+    courseSlug = null,
+    orgSlug = null,
+    label = 'Powered by',
+    brand = 'ClassroomIO',
+    class: className
+  }: Props = $props();
+
+  const href = $derived.by(() => {
+    const url = new URL('https://classroomio.com');
+
+    url.searchParams.set('utm_source', 'public-course');
+    url.searchParams.set('utm_medium', 'powered-by');
+
+    if (orgSlug) url.searchParams.set('utm_campaign', orgSlug);
+    if (courseSlug) url.searchParams.set('utm_content', courseSlug);
+
+    return url.toString();
+  });
+</script>
+
+<div
+  class={cn(
+    'ui:px-3 ui:flex ui:items-center ui:justify-center ui:gap-1 ui:py-3 ui:text-xs ui:text-muted-foreground ui:w-full',
+    className
+  )}
+>
+  <img src="/logo-192.png" class="ui:size-6" alt="ClassroomIO" />
+  {label}
+  <a
+    {href}
+    target="_blank"
+    rel="noopener noreferrer"
+    class="ui:font-medium ui:text-muted-foreground ui:underline-offset-2 ui:hover:text-foreground ui:underline"
+  >
+    {brand}
+  </a>
+</div>
diff --git a/packages/ui/src/custom/public-course/public-exercise-attempts-storage.ts b/packages/ui/src/custom/public-course/public-exercise-attempts-storage.ts
new file mode 100644
index 00000000..bb25b95e
--- /dev/null
+++ b/packages/ui/src/custom/public-course/public-exercise-attempts-storage.ts
@@ -0,0 +1,71 @@
+import type { AnswerData } from '@cio/question-types';
+
+/** Bump when persisted shape changes. */
+export const PUBLIC_EXERCISE_ATTEMPTS_STORE_VERSION = 1;
+
+export interface PublicExerciseStoredAttempt {
+  /** ISO timestamp when the learner submitted answers. */
+  savedAt: string;
+  answersByKey: Record<string, AnswerData>;
+  correctCount: number;
+  totalGradable: number;
+}
+
+interface PersistedEnvelope {
+  v: number;
+  attempts: PublicExerciseStoredAttempt[];
+}
+
+/** Namespace localStorage keys — built by the consuming route (`courseSlug` + exercise `itemSlug`). */
+export function publicExerciseAttemptsStorageKey(courseSlug: string, exerciseSlug: string): string {
+  return `cio-public-exercise-attempts::v${PUBLIC_EXERCISE_ATTEMPTS_STORE_VERSION}::${courseSlug}::${exerciseSlug}`;
+}
+
+function isStoredAttempt(value: unknown): value is PublicExerciseStoredAttempt {
+  if (!value || typeof value !== 'object') return false;
+  const row = value as Record<string, unknown>;
+  return (
+    typeof row.savedAt === 'string' &&
+    typeof row.answersByKey === 'object' &&
+    row.answersByKey !== null &&
+    typeof row.correctCount === 'number' &&
+    Number.isFinite(row.correctCount) &&
+    typeof row.totalGradable === 'number' &&
+    Number.isFinite(row.totalGradable)
+  );
+}
+
+/** Read persisted attempts — returns newest-last order. Empty if missing or malformed. */
+export function readPublicExerciseAttempts(storageKey: string | null): PublicExerciseStoredAttempt[] {
+  if (!storageKey || typeof localStorage === 'undefined') return [];
+
+  try {
+    const raw = localStorage.getItem(storageKey);
+    if (!raw) return [];
+
+    const parsed = JSON.parse(raw) as unknown;
+    const envelope =
+      parsed && typeof parsed === 'object' && 'attempts' in parsed ? (parsed as PersistedEnvelope) : null;
+
+    if (!envelope || !Array.isArray(envelope.attempts)) return [];
+
+    return envelope.attempts.filter(isStoredAttempt);
+  } catch (error) {
+    console.warn('readPublicExerciseAttempts: failed', error);
+    return [];
+  }
+}
+
+export function writePublicExerciseAttempts(storageKey: string | null, attempts: PublicExerciseStoredAttempt[]): void {
+  if (!storageKey || typeof localStorage === 'undefined') return;
+
+  try {
+    const envelope: PersistedEnvelope = {
+      v: PUBLIC_EXERCISE_ATTEMPTS_STORE_VERSION,
+      attempts
+    };
+    localStorage.setItem(storageKey, JSON.stringify(envelope));
+  } catch (error) {
+    console.warn('writePublicExerciseAttempts: failed', error);
+  }
+}
diff --git a/packages/ui/src/custom/public-course/shell.svelte b/packages/ui/src/custom/public-course/shell.svelte
new file mode 100644
index 00000000..ade8eb0b
--- /dev/null
+++ b/packages/ui/src/custom/public-course/shell.svelte
@@ -0,0 +1,243 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import BottomNav from './bottom-nav.svelte';
+  import FooterNav from './footer-nav.svelte';
+  import MobileSheet from './mobile-sheet.svelte';
+  import Sidebar from './sidebar.svelte';
+  import { Button } from '../../base/button';
+  import { cn } from '../../tools';
+  import type { PublicCourseOrgData, PublicCourseSidebarItem, PublicCourseSidebarSection } from './types';
+
+  interface Props {
+    sections: PublicCourseSidebarSection[];
+    activeSlug?: string | null;
+    hrefFor?: (item: PublicCourseSidebarItem) => string;
+    onItemClick?: (item: PublicCourseSidebarItem) => void;
+    /** Current item for the bottom nav display. If null, bottom nav is hidden. */
+    activeItem?: PublicCourseSidebarItem | null;
+    /** Index (0-based) of the active item in the flattened sequence. */
+    activeFlatIndex?: number | null;
+    /** Total number of items in the flattened sequence. */
+    totalItems?: number;
+    /** Prev / next item handlers for the bottom nav AND the in-page footer nav. */
+    onPrev?: () => void;
+    onNext?: () => void;
+    hasPrev?: boolean;
+    hasNext?: boolean;
+    /** Previous / next sidebar items, used to render the in-page footer nav after the lesson body. */
+    prevItem?: PublicCourseSidebarItem | null;
+    nextItem?: PublicCourseSidebarItem | null;
+    /** Course title shown after the org name in the top header. */
+    courseTitle: string;
+    /** Owning org / creator for the top-header logo + name. */
+    org?: PublicCourseOrgData | null;
+    /** Where clicking the org logo / name should go. Defaults to the org home (`/`). */
+    homeHref?: string;
+    /** Where the "Explore courses" button links to. */
+    exploreHref?: string;
+    /** Where the "Sign in" button links to. */
+    signInHref?: string;
+    /** Localized labels for the top-right header actions. */
+    exploreLabel?: string;
+    signInLabel?: string;
+    /** Localized labels for the in-page footer nav. */
+    footerPrevLabel?: string;
+    footerNextLabel?: string;
+    /** Course slug (used for the sidebar's powered-by attribution link). */
+    courseSlug?: string | null;
+    /** Localized strings for the sidebar's powered-by footer. */
+    poweredByLabel?: string;
+    poweredByBrand?: string;
+    /** Hide the powered-by footer entirely (e.g. enterprise white-label). */
+    showPoweredBy?: boolean;
+    /** Main content. Typically a PublicLessonView or PublicExerciseView. */
+    children: Snippet;
+    /**
+     * Optional override for the top-right header slot. When provided,
+     * replaces the default Sign in / Explore courses buttons entirely.
+     */
+    topRight?: Snippet;
+    class?: string;
+  }
+
+  let {
+    sections,
+    activeSlug = null,
+    hrefFor,
+    onItemClick,
+    activeItem = null,
+    activeFlatIndex = null,
+    totalItems = 0,
+    onPrev,
+    onNext,
+    hasPrev = false,
+    hasNext = false,
+    prevItem = null,
+    nextItem = null,
+    courseTitle,
+    org = null,
+    homeHref = '/',
+    exploreHref = '/courses',
+    signInHref = '/login',
+    exploreLabel = 'Explore courses',
+    signInLabel = 'Sign in',
+    footerPrevLabel = 'Previous',
+    footerNextLabel = 'Next',
+    courseSlug = null,
+    poweredByLabel = 'Powered by',
+    poweredByBrand = 'ClassroomIO',
+    showPoweredBy = true,
+    children,
+    topRight,
+    class: className
+  }: Props = $props();
+
+  let sheetOpen = $state(false);
+
+  const positionLabel = $derived(
+    activeFlatIndex !== null && totalItems > 0 ? `${activeFlatIndex + 1} / ${totalItems}` : ''
+  );
+
+  const orgInitial = $derived((org?.name?.trim()?.charAt(0) ?? 'C').toUpperCase());
+
+  /** Left/right arrow keys navigate between items when focus is not in an editable element. */
+  function onKeydown(event: KeyboardEvent) {
+    const target = event.target as HTMLElement | null;
+    if (target && (target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName))) return;
+
+    if (event.key === 'ArrowLeft' && hasPrev) {
+      event.preventDefault();
+      onPrev?.();
+    } else if (event.key === 'ArrowRight' && hasNext) {
+      event.preventDefault();
+      onNext?.();
+    }
+  }
+</script>
+
+<svelte:window onkeydown={onKeydown} />
+
+<div class={cn('ui:min-h-dvh ui:bg-background ui:text-foreground', className)}>
+  <!--
+    Top header. Sticky so it stays visible as guests scroll long lessons.
+    Layout: [org logo · org name | course title]  ··· [Explore courses] [Sign in]
+    Height intentionally compact (h-12) to maximize content vertical space.
+  -->
+  <header
+    class="ui:sticky ui:top-0 ui:z-30 ui:border-b ui:border-border ui:bg-background/95 ui:backdrop-blur ui:supports-[backdrop-filter]:bg-background/80"
+  >
+    <div class="ui:flex ui:h-12 ui:items-center ui:gap-3 ui:px-4 ui:lg:px-6">
+      <a
+        href={homeHref}
+        class="ui:flex ui:shrink-0 ui:items-center ui:gap-2 ui:rounded-md ui:focus-visible:outline-none ui:focus-visible:ring-2 ui:focus-visible:ring-ring"
+      >
+        {#if org?.avatarUrl}
+          <img
+            src={org.avatarUrl}
+            alt=""
+            class="ui:size-6 ui:rounded ui:object-cover"
+            width="24"
+            height="24"
+            loading="lazy"
+          />
+        {:else}
+          <span
+            class="ui:flex ui:size-6 ui:items-center ui:justify-center ui:rounded ui:bg-primary/10 ui:text-[11px] ui:font-semibold ui:text-primary"
+            aria-hidden="true"
+          >
+            {orgInitial}
+          </span>
+        {/if}
+        <span class="ui:truncate ui:text-sm ui:font-medium ui:text-foreground">
+          {org?.name ?? ''}
+        </span>
+      </a>
+
+      <span aria-hidden="true" class="ui:text-muted-foreground/60">|</span>
+
+      <span class="ui:min-w-0 ui:flex-1 ui:truncate ui:text-sm ui:text-muted-foreground" title={courseTitle}>
+        {courseTitle}
+      </span>
+
+      <div class="ui:ml-auto ui:flex ui:shrink-0 ui:items-center ui:gap-2">
+        {#if topRight}
+          {@render topRight()}
+        {:else}
+          <Button href={exploreHref} variant="secondary" size="sm" class="ui:hidden ui:sm:inline-flex">
+            {exploreLabel}
+          </Button>
+          <Button href={signInHref} variant="default" size="sm">{signInLabel}</Button>
+        {/if}
+      </div>
+    </div>
+  </header>
+
+  <!--
+    Layout: sidebar pinned to the far left of the viewport (no centered max-width
+    container around it), main content centered inside its own column. The header
+    above is 3rem (h-12), so sticky offsets are computed against that.
+  -->
+  <div class="ui:flex ui:min-h-[calc(100dvh-3rem)] ui:w-full">
+    <aside
+      class="ui:sticky ui:top-12 ui:hidden ui:h-[calc(100dvh-3rem)] ui:w-72 ui:shrink-0 ui:overflow-y-auto ui:border-r ui:border-border ui:lg:block"
+      aria-label="Course outline sidebar"
+    >
+      <Sidebar
+        {sections}
+        {activeSlug}
+        {hrefFor}
+        {onItemClick}
+        {showPoweredBy}
+        {courseSlug}
+        orgSlug={org?.siteName ?? org?.name ?? null}
+        {poweredByLabel}
+        {poweredByBrand}
+      />
+    </aside>
+
+    <main class="ui:flex ui:min-w-0 ui:flex-1 ui:flex-col ui:pb-24 ui:lg:pb-12">
+      {@render children()}
+
+      {#if prevItem || nextItem}
+        <div class="ui:mx-auto ui:w-full ui:max-w-3xl ui:px-4 ui:pb-10 ui:sm:px-6">
+          <FooterNav
+            prev={prevItem}
+            next={nextItem}
+            {hrefFor}
+            onNavigate={(item) => onItemClick?.(item)}
+            prevLabel={footerPrevLabel}
+            nextLabel={footerNextLabel}
+          />
+        </div>
+      {/if}
+    </main>
+  </div>
+
+  {#if activeItem}
+    <BottomNav
+      positionLabel={positionLabel || 'Outline'}
+      sublineLabel={activeItem.title}
+      {hasPrev}
+      {hasNext}
+      onPrev={() => onPrev?.()}
+      onNext={() => onNext?.()}
+      onOpenSheet={() => (sheetOpen = true)}
+    />
+  {/if}
+
+  <MobileSheet
+    bind:open={sheetOpen}
+    {sections}
+    {activeSlug}
+    {hrefFor}
+    {showPoweredBy}
+    {courseSlug}
+    orgSlug={org?.siteName ?? org?.name ?? null}
+    {poweredByLabel}
+    {poweredByBrand}
+    onItemClick={(item) => {
+      onItemClick?.(item);
+      sheetOpen = false;
+    }}
+  />
+</div>
diff --git a/packages/ui/src/custom/public-course/sidebar-row.svelte b/packages/ui/src/custom/public-course/sidebar-row.svelte
new file mode 100644
index 00000000..2aba4c04
--- /dev/null
+++ b/packages/ui/src/custom/public-course/sidebar-row.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+  import NumberBadge from '$src/base/number-badge/number-badge.svelte';
+  import { cn } from '../../tools';
+
+  interface Props {
+    /** 1-indexed number shown in the badge. Resets per section. */
+    number: number;
+    title: string;
+    /** Is this the active (currently-viewed) row? */
+    active?: boolean;
+    /** Locked rows show a lock icon and a muted treatment. */
+    locked?: boolean;
+    /** Link href for the row. If omitted, the row renders as a button (story/testing). */
+    href?: string;
+    onClick?: () => void;
+    class?: string;
+  }
+
+  let { number, title, active = false, locked = false, href, onClick, class: className }: Props = $props();
+
+  const rowClass = $derived(
+    cn(
+      'ui:group ui:flex ui:items-center ui:gap-1.5 ui:py-1 ui:pl-3 ui:pr-4 ui:rounded-sm ui:text-sm ui:leading-snug ui:w-full ui:text-left ui:transition-colors',
+      active && 'ui:bg-transparent',
+      locked && !active && 'ui:text-muted-foreground',
+      className
+    )
+  );
+
+  const titleClass = $derived(
+    cn(
+      'ui:text-wrap ui:transition-colors',
+      'ui:group-hover:text-primary',
+      active ? 'ui:text-primary' : 'ui:text-foreground/70 ui:group-hover:text-foreground',
+      locked && !active && 'ui:text-muted-foreground'
+    )
+  );
+</script>
+
+{#snippet body()}
+  <NumberBadge {number} {active} {locked} />
+  <span class={titleClass}>{title}</span>
+{/snippet}
+
+{#if href}
+  <a {href} class={rowClass} aria-current={active ? 'page' : undefined} onclick={onClick}>
+    {@render body()}
+  </a>
+{:else}
+  <button
+    type="button"
+    class={rowClass}
+    aria-current={active ? 'page' : undefined}
+    aria-disabled={locked || undefined}
+    onclick={onClick}
+  >
+    {@render body()}
+  </button>
+{/if}
diff --git a/packages/ui/src/custom/public-course/sidebar.svelte b/packages/ui/src/custom/public-course/sidebar.svelte
new file mode 100644
index 00000000..28d52e2e
--- /dev/null
+++ b/packages/ui/src/custom/public-course/sidebar.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+  import { cn } from '../../tools';
+  import PoweredBy from './powered-by.svelte';
+  import SidebarRow from './sidebar-row.svelte';
+  import type { PublicCourseSidebarItem, PublicCourseSidebarSection } from './types';
+
+  interface Props {
+    sections: PublicCourseSidebarSection[];
+    /** Slug of the active item. Matches against `item.slug`. */
+    activeSlug?: string | null;
+    /** Receives the target item on click; components using `hrefFor` should also provide this. */
+    onItemClick?: (item: PublicCourseSidebarItem) => void;
+    /** Builds the `href` for a given item. Omit to render rows as buttons. */
+    hrefFor?: (item: PublicCourseSidebarItem) => string;
+    /**
+     * Show the "Powered by ClassroomIO" footer pinned to the bottom of the sidebar.
+     * Defaults to `true` when paired with `courseSlug` / `orgSlug`.
+     */
+    showPoweredBy?: boolean;
+    /** Course slug used in the powered-by attribution link. */
+    courseSlug?: string | null;
+    /** Org slug used in the powered-by attribution link. */
+    orgSlug?: string | null;
+    /** Localized labels for the powered-by footer. */
+    poweredByLabel?: string;
+    poweredByBrand?: string;
+    class?: string;
+  }
+
+  let {
+    sections,
+    activeSlug = null,
+    onItemClick,
+    hrefFor,
+    showPoweredBy = true,
+    courseSlug = null,
+    orgSlug = null,
+    poweredByLabel = 'Powered by',
+    poweredByBrand = 'ClassroomIO',
+    class: className
+  }: Props = $props();
+</script>
+
+<div class={cn('ui:flex ui:h-full ui:flex-col ui:bg-sidebar', className)}>
+  <nav class="ui:flex ui:flex-1 ui:flex-col ui:gap-6 ui:py-6 ui:px-2" aria-label="Course outline">
+    {#each sections as section (section.id)}
+      <div class="ui:flex ui:flex-col ui:gap-2">
+        <h2
+          class="ui:px-3 ui:text-xs ui:font-medium ui:uppercase ui:text-[11px] ui:text-muted-foreground ui:tracking-wider ui:transition-colors ui:whitespace-nowrap"
+        >
+          {section.title}
+        </h2>
+        <div class="ui:flex ui:flex-col">
+          {#each section.items as item, index (item.id)}
+            <SidebarRow
+              number={index + 1}
+              title={item.title}
+              active={item.slug === activeSlug}
+              locked={!item.isUnlocked}
+              href={hrefFor?.(item)}
+              onClick={() => onItemClick?.(item)}
+            />
+          {/each}
+        </div>
+      </div>
+    {/each}
+  </nav>
+
+  {#if showPoweredBy}
+    <PoweredBy {courseSlug} {orgSlug} label={poweredByLabel} brand={poweredByBrand} />
+  {/if}
+</div>
diff --git a/packages/ui/src/custom/public-course/types.ts b/packages/ui/src/custom/public-course/types.ts
new file mode 100644
index 00000000..24488b8e
--- /dev/null
+++ b/packages/ui/src/custom/public-course/types.ts
@@ -0,0 +1,75 @@
+/**
+ * Shared types for the public course UI (sidebar, shell, lesson view, exercise view).
+ * Keep these intentionally narrow — the API and the consuming routes normalize into
+ * these shapes before rendering.
+ *
+ * For exercise questions we deliberately reuse `ExerciseQuestionModel` from
+ * `@cio/question-types` so the public exercise view drives the same renderer
+ * pipeline as the authenticated student view (`ExerciseQuestion.QuestionList`).
+ * That way, every supported question type — RADIO, CHECKBOX, TRUE_FALSE,
+ * SHORT_ANSWER, NUMERIC, FILL_BLANK, ORDERING, MATCHING, etc. — picks up the
+ * standard `take` and `review` renderers without us re-implementing them.
+ */
+
+import type { ExerciseQuestionLabels, ExerciseQuestionModel } from '@cio/question-types';
+
+export interface PublicCourseCalloutData {
+  title: string;
+  description: string;
+  buttonLabel: string;
+  buttonUrl: string;
+}
+
+/** Org / creator info shown in the top header (logo, name) of public course pages. */
+export interface PublicCourseOrgData {
+  id: string;
+  name: string;
+  siteName: string | null;
+  avatarUrl: string | null;
+}
+
+export interface PublicCourseSidebarItem {
+  kind: 'lesson' | 'exercise';
+  id: string;
+  slug: string;
+  title: string;
+  isUnlocked: boolean;
+}
+
+export interface PublicCourseSidebarSection {
+  id: string;
+  title: string;
+  items: PublicCourseSidebarItem[];
+}
+
+export type PublicCourseItemVariant = 'lesson' | 'exercise';
+
+export interface PublicLessonViewData {
+  kind: 'lesson';
+  title: string;
+  sectionTitle: string | null;
+  body: string;
+  video: {
+    type: 'youtube' | 'generic' | 'upload' | 'google_drive';
+    link: string;
+  } | null;
+  isUnlocked: boolean;
+}
+
+export interface PublicExerciseViewData {
+  kind: 'exercise';
+  title: string;
+  description: string | null;
+  sectionTitle: string | null;
+  isUnlocked: boolean;
+  /**
+   * Questions in the standard `ExerciseQuestionModel` shape. Each question's
+   * `options[].isCorrect` and `settings` carry the answer keys used for
+   * client-side grading in PUBLIC courses.
+   */
+  questions: ExerciseQuestionModel[];
+}
+
+export type { ExerciseQuestionLabels };
+
+export type PublicItemViewData = PublicLessonViewData | PublicExerciseViewData;
diff --git a/packages/ui/src/custom/question-type-picker/exercise-labels.ts b/packages/ui/src/custom/question-type-picker/exercise-labels.ts
index e060e3c0..6650d8dc 100644
--- a/packages/ui/src/custom/question-type-picker/exercise-labels.ts
+++ b/packages/ui/src/custom/question-type-picker/exercise-labels.ts
@@ -104,6 +104,41 @@ export const QUESTION_TYPE_PICKER_EXERCISE_LABELS: ExerciseQuestionLabels = {
   'file_upload.take.download': 'Download',
   'file_upload.preview.accepted_types_label': 'Accepted types',
   'file_upload.preview.max_size_label': 'Max size (MB)',
+  'video_recording.edit.max_duration_label': 'Max duration',
+  'video_recording.edit.max_duration_helper': 'Students record in the browser and can retake before submitting.',
+  'video_recording.edit.max_duration_placeholder': '60',
+  'video_recording.edit.manual_grading': 'Requires manual grading',
+  'video_recording.take.unsupported': 'Video recording is not supported in this browser.',
+  'video_recording.take.permission_prompt': 'Allow camera and microphone access to record your answer.',
+  'video_recording.take.permission_denied': 'Camera or microphone access was blocked. Check browser permissions.',
+  'video_recording.take.start_camera': 'Set up camera',
+  'video_recording.take.camera_label': 'Camera',
+  'video_recording.take.camera_placeholder': 'Select camera',
+  'video_recording.take.play_preview': 'Play recording preview',
+  'video_recording.take.pause_preview': 'Pause recording preview',
+  'video_recording.take.start_recording': 'Start recording',
+  'video_recording.take.stop_recording': 'Stop recording',
+  'video_recording.take.elapsed': 'Elapsed',
+  'video_recording.take.remaining': 'Remaining',
+  'video_recording.take.max_duration': 'Max',
+  'video_recording.take.too_short': 'Record for at least 1 second.',
+  'video_recording.take.use_recording': 'Use recording',
+  'video_recording.take.retake': 'Retake',
+  'video_recording.take.delete': 'Delete recording',
+  'video_recording.take.retry_upload': 'Retry upload',
+  'video_recording.take.uploading': 'Uploading recording...',
+  'video_recording.take.uploaded': 'Recording uploaded',
+  'video_recording.take.upload_failed': 'Upload failed. Try again.',
+  'video_recording.take.replaces_previous': 'A new accepted take replaces the previous answer after upload.',
+  'video_recording.preview.max_duration_label': 'Max duration',
+  'video_recording.preview.manual_grading': 'Learners record a short video response. Manual grading required.',
+  'video_recording.submission.no_video': 'No video submitted.',
+  'video_recording.submission.unavailable': 'Video unavailable.',
+  'video_recording.submission.duration': 'Duration',
+  'video_recording.submission.file_size': 'File size',
+  'video_recording.submission.recorded_at': 'Recorded',
+  'video_recording.submission.uploaded_at': 'Uploaded',
+  'video_recording.submission.retake_count': 'Retakes',
   'link.edit.instructions_placeholder': 'Optional instructions for learners',
   'link.edit.helper': 'Learners can submit one or more valid URLs (http/https).',
   'link.take.helper': 'Add one or more links. Only valid http/https URLs are accepted.',
diff --git a/packages/ui/src/custom/question-type-picker/picker-data.ts b/packages/ui/src/custom/question-type-picker/picker-data.ts
index 5af23f4d..eb720e34 100644
--- a/packages/ui/src/custom/question-type-picker/picker-data.ts
+++ b/packages/ui/src/custom/question-type-picker/picker-data.ts
@@ -296,6 +296,22 @@ const QUESTION_TYPE_PICKER_ENTRIES: QuestionTypePickerEntry[] = [
       questionType: 'STAR',
       settings: { correctValue: 4, maxStars: 5 }
     }
+  },
+  {
+    key: QUESTION_TYPE_KEY.VIDEO_RECORDING,
+    displayLabel: 'Video recording',
+    description: 'Learners record a short camera response — useful for reflection, speaking, and demos.',
+    demoQuestion: {
+      id: 'picker-video-recording',
+      key: 'picker-video-recording',
+      title: 'Record a short reflection explaining one idea from this module that you would apply at work.',
+      questionType: 'VIDEO_RECORDING',
+      settings: {
+        description: 'Keep it concise. You can retake before submitting.',
+        maxDurationSeconds: 120,
+        allowRetakes: true
+      }
+    }
   }
 ];
 
diff --git a/packages/ui/src/custom/question-type-picker/question-type-picker.svelte b/packages/ui/src/custom/question-type-picker/question-type-picker.svelte
index 115ad42a..253674d7 100644
--- a/packages/ui/src/custom/question-type-picker/question-type-picker.svelte
+++ b/packages/ui/src/custom/question-type-picker/question-type-picker.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { AnswerData } from '@cio/question-types';
+  import type { AnswerData, ExerciseQuestionModel } from '@cio/question-types';
   import { QUESTION_TYPE_KEY, type QuestionTypeKey } from '@cio/question-types';
   import { cubicOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
@@ -10,14 +10,14 @@
   import SquareCheckIcon from '@lucide/svelte/icons/square-check';
   import StarIcon from '@lucide/svelte/icons/star';
   import UploadIcon from '@lucide/svelte/icons/upload';
-  import type { Component } from 'svelte';
+  import VideoIcon from '@lucide/svelte/icons/video';
   import { QuestionRenderer } from '../exercise-question';
   import { QUESTION_TYPE_PICKER_EXERCISE_LABELS } from './exercise-labels';
   import { QUESTION_TYPE_PICKER_ITEMS, getQuestionTypePickerItem } from './picker-data';
   import { cn } from '../../tools';
 
   /** Lucide icons for types without `sidebarGlyph` in picker data. */
-  function iconForKey(key: QuestionTypeKey): Component<{ class?: string; 'aria-hidden'?: string | boolean }> {
+  function iconForKey(key: QuestionTypeKey): typeof CircleDotIcon {
     switch (key) {
       case QUESTION_TYPE_KEY.RADIO:
         return CircleDotIcon;
@@ -33,6 +33,8 @@
         return Link2Icon;
       case QUESTION_TYPE_KEY.STAR:
         return StarIcon;
+      case QUESTION_TYPE_KEY.VIDEO_RECORDING:
+        return VideoIcon;
       default:
         return CircleDotIcon;
     }
@@ -70,6 +72,34 @@
       fileUrl: URL.createObjectURL(file)
     };
   }
+
+  async function demoVideoRecordingUpload(input: {
+    blob: Blob;
+    fileName: string;
+    mimeType: string;
+    size: number;
+    durationSeconds: number;
+    recordedAt: string;
+    retakeCount: number;
+  }) {
+    await new Promise<void>((resolve) => {
+      setTimeout(resolve, 350);
+    });
+
+    return {
+      type: 'VIDEO_RECORDING' as const,
+      assetId: '00000000-0000-4000-8000-000000000001',
+      storageKey: `demo/${input.fileName}`,
+      fileName: input.fileName,
+      mimeType: input.mimeType,
+      size: input.size,
+      durationSeconds: input.durationSeconds,
+      recordedAt: input.recordedAt,
+      uploadedAt: new Date().toISOString(),
+      provider: 'cloudflare' as const,
+      retakeCount: input.retakeCount
+    };
+  }
 </script>
 
 <div
@@ -129,10 +159,11 @@
             showContainer={false}
             contract={{
               mode: 'take',
-              question: activeQuestion,
+              question: activeQuestion as ExerciseQuestionModel,
               answer,
               labels: QUESTION_TYPE_PICKER_EXERCISE_LABELS,
-              onFileUpload: demoFileUpload
+              onFileUpload: demoFileUpload,
+              onVideoRecordingUpload: demoVideoRecordingUpload
             }}
             onAnswerChange={(nextAnswer) => {
               answer = nextAnswer;
diff --git a/packages/ui/src/custom/widget-layouts/carousel.svelte b/packages/ui/src/custom/widget-layouts/carousel.svelte
index 373834bb..0442faf8 100644
--- a/packages/ui/src/custom/widget-layouts/carousel.svelte
+++ b/packages/ui/src/custom/widget-layouts/carousel.svelte
@@ -14,7 +14,6 @@
   const maxIndex = $derived(Math.max(courses.length - visible, 0));
 
   let position = $state(0);
-  let trackEl = $state<HTMLDivElement | null>(null);
   let timer: ReturnType<typeof setInterval> | null = null;
 
   const cardBasis = $derived(`calc((100% - ${(visible - 1) * 12}px) / ${visible})`);
@@ -68,7 +67,7 @@
     aria-roledescription="carousel"
   >
     <div class="cio-cr-outer">
-      <div class="cio-cr-track" bind:this={trackEl} style={`transform: translateX(${translatePct})`}>
+      <div class="cio-cr-track" style={`transform: translateX(${translatePct})`}>
         {#each courses as course (course.id)}
           <a
             class="cio-cr-card"
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 25c070a1..6d031c61 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -26,6 +26,7 @@ export * as Item from './base/item';
 export * as Kbd from './base/kbd';
 export * as Label from './base/label';
 export * as Menubar from './base/menubar';
+export * as NumberBadge from './base/number-badge';
 export * as Page from './base/page';
 export * as Pagination from './base/pagination';
 export * as Password from './base/password';
@@ -80,4 +81,5 @@ export * as YoutubeLinkForm from './custom/youtube-link-form';
 export { BackButton } from './custom/back-button';
 export { CourseCard, DEFAULT_COURSE_BANNER_IMAGE } from './custom/course-card';
 export { NewsfeedReactions } from './custom/newsfeed-reactions';
+export * as PublicCourse from './custom/public-course';
 export * from './custom/animation';
diff --git a/packages/ui/src/output.css b/packages/ui/src/output.css
index 8922a72c..2e4dde6d 100644
--- a/packages/ui/src/output.css
+++ b/packages/ui/src/output.css
@@ -1,2 +1,2 @@
 /*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-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-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-content:"";--tw-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;--border-angle:0deg}}}@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-50:oklch(97.1% .013 17.38);--ui-color-red-500:oklch(63.7% .237 25.331);--ui-color-red-600:oklch(57.7% .245 27.325);--ui-color-red-700:oklch(50.5% .213 27.518);--ui-color-orange-500:oklch(70.5% .213 47.604);--ui-color-amber-50:oklch(98.7% .022 95.277);--ui-color-amber-200:oklch(92.4% .12 95.746);--ui-color-amber-300:oklch(87.9% .169 91.605);--ui-color-amber-400:oklch(82.8% .189 84.429);--ui-color-amber-500:oklch(76.9% .188 70.08);--ui-color-amber-600:oklch(66.6% .179 58.318);--ui-color-amber-900:oklch(41.4% .112 45.904);--ui-color-amber-950:oklch(27.9% .077 45.635);--ui-color-yellow-500:oklch(79.5% .184 86.047);--ui-color-green-500:oklch(72.3% .219 149.579);--ui-color-emerald-50:oklch(97.9% .021 166.113);--ui-color-emerald-300:oklch(84.5% .143 164.978);--ui-color-emerald-400:oklch(76.5% .177 163.223);--ui-color-emerald-500:oklch(69.6% .17 162.48);--ui-color-emerald-600:oklch(59.6% .145 163.225);--ui-color-emerald-950:oklch(26.2% .051 172.552);--ui-color-sky-50:oklch(97.7% .013 236.62);--ui-color-sky-200:oklch(90.1% .058 230.902);--ui-color-sky-900:oklch(39.1% .09 240.876);--ui-color-sky-950:oklch(29.3% .066 243.157);--ui-color-blue-600:oklch(54.6% .245 262.881);--ui-color-pink-500:oklch(65.6% .241 354.308);--ui-color-slate-500:oklch(55.4% .046 257.417);--ui-color-slate-800:oklch(27.9% .041 260.031);--ui-color-slate-950:oklch(12.9% .042 264.695);--ui-color-gray-200:oklch(92.8% .006 264.531);--ui-color-neutral-800:oklch(26.9% 0 0);--ui-color-black:#000;--ui-color-white:#fff;--ui-spacing:.25rem;--ui-container-sm:24rem;--ui-container-lg:32rem;--ui-container-xl:36rem;--ui-container-2xl:42rem;--ui-container-3xl:48rem;--ui-container-4xl:56rem;--ui-container-7xl:80rem;--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-xl:1.25rem;--ui-text-xl--line-height:calc(1.75 / 1.25);--ui-text-2xl:1.5rem;--ui-text-2xl--line-height:calc(2 / 1.5);--ui-text-3xl:1.875rem;--ui-text-3xl--line-height:calc(2.25 / 1.875);--ui-text-4xl:2.25rem;--ui-text-4xl--line-height:calc(2.5 / 2.25);--ui-text-5xl:3rem;--ui-text-5xl--line-height:1;--ui-text-6xl:3.75rem;--ui-text-6xl--line-height:1;--ui-text-7xl:4.5rem;--ui-text-7xl--line-height:1;--ui-font-weight-light:300;--ui-font-weight-normal:400;--ui-font-weight-medium:500;--ui-font-weight-semibold:600;--ui-font-weight-bold:700;--ui-font-weight-black:900;--ui-tracking-tighter:-.05em;--ui-tracking-tight:-.025em;--ui-tracking-wide:.025em;--ui-tracking-widest:.1em;--ui-leading-tight:1.25;--ui-leading-snug:1.375;--ui-leading-normal:1.5;--ui-leading-relaxed:1.625;--ui-radius-xs:.125rem;--ui-radius-2xl:1rem;--ui-radius-3xl:1.5rem;--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-blur-xl:24px;--ui-aspect-video:16 / 9;--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{.cio-marketing-border-beam{pointer-events:none;border-radius:inherit;border:calc(var(--border-width) * 1px) solid transparent;-webkit-mask-composite:source-in;-webkit-mask-source-type:auto,auto;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#0000,#0000),linear-gradient(#fff,#fff);mask-image:linear-gradient(#0000,#0000),linear-gradient(#fff,#fff);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:padding-box,border-box;mask-clip:padding-box,border-box;-webkit-mask-origin:border-box,border-box;mask-origin:border-box,border-box;-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.cio-marketing-border-beam:after{content:"";aspect-ratio:1;width:calc(var(--size) * 1px);animation-delay:var(--delay);background:linear-gradient(to left, var(--color-from), var(--color-to), transparent);offset-anchor:calc(var(--anchor) * 1%) 50%;offset-path:rect(0 auto auto 0 round calc(var(--size) * 1px));animation:border-beam calc(var(--duration) * 1s) infinite linear;position:absolute}}@layer utilities{.ui\:\@container\/field-group{container:field-group/inline-size}.ui\:\@container-\[size\]{container-type: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\:sticky{position:sticky}.ui\:-inset-full{inset:-100%}.ui\:inset-\(--cut\){inset:var(--cut)}.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-3{top:calc(var(--ui-spacing) * -3)}.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-13{top:calc(var(--ui-spacing) * 13)}.ui\:top-\[-12px\]{top:-12px}.ui\:top-\[50\%\]{top:50%}.ui\:top-\[60\%\]{top:60%}.ui\:top-full{top:100%}.ui\:top-px{top:1px}.ui\:-right-4{right:calc(var(--ui-spacing) * -4)}.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\:right-\[-12px\]{right:-12px}.ui\:-bottom-px{bottom:-1px}.ui\:bottom-0{bottom:calc(var(--ui-spacing) * 0)}.ui\:bottom-2{bottom:calc(var(--ui-spacing) * 2)}.ui\:bottom-full{bottom:100%}.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-10{z-index:calc(10 * -1)}.ui\:-z-20{z-index:calc(20 * -1)}.ui\:-z-30{z-index:calc(30 * -1)}.ui\:z-0{z-index:0}.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-100{z-index:100}.ui\:z-200{z-index:200}.ui\:z-999{z-index:999}.ui\:z-\[1\]{z-index:1}.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-0\.5{margin-inline:calc(var(--ui-spacing) * .5)}.ui\:mx-auto{margin-inline:auto}.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-3{margin-block:calc(var(--ui-spacing) * 3)}.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-0\.5{margin-top:calc(var(--ui-spacing) * .5)}.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-6{margin-top:calc(var(--ui-spacing) * 6)}.ui\:mt-10{margin-top:calc(var(--ui-spacing) * 10)}.ui\:mt-12{margin-top:calc(var(--ui-spacing) * 12)}.ui\:mt-auto{margin-top:auto}.ui\:mr-1{margin-right:calc(var(--ui-spacing) * 1)}.ui\:mr-2{margin-right:calc(var(--ui-spacing) * 2)}.ui\:mb-1{margin-bottom: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\:mb-6{margin-bottom:calc(var(--ui-spacing) * 6)}.ui\:mb-8{margin-bottom:calc(var(--ui-spacing) * 8)}.ui\:mb-10{margin-bottom:calc(var(--ui-spacing) * 10)}.ui\:mb-12{margin-bottom:calc(var(--ui-spacing) * 12)}.ui\:ml-1{margin-left:calc(var(--ui-spacing) * 1)}.ui\:ml-2{margin-left:calc(var(--ui-spacing) * 2)}.ui\:ml-2\.5{margin-left:calc(var(--ui-spacing) * 2.5)}.ui\:ml-auto{margin-left:auto}.ui\:box-border{box-sizing:border-box}.ui\:line-clamp-1{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.ui\:line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.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-block{display:inline-block}.ui\:inline-flex{display:inline-flex}.ui\:field-sizing-content{field-sizing:content}.ui\:aspect-\[1\]{aspect-ratio:1}.ui\:aspect-video{aspect-ratio:var(--ui-aspect-video)}.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-5{width:calc(var(--ui-spacing) * 5);height:calc(var(--ui-spacing) * 5)}.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-14{width:calc(var(--ui-spacing) * 14);height:calc(var(--ui-spacing) * 14)}.ui\:size-14\!{width:calc(var(--ui-spacing) * 14)!important;height:calc(var(--ui-spacing) * 14)!important}.ui\:size-20{width:calc(var(--ui-spacing) * 20);height:calc(var(--ui-spacing) * 20)}.ui\:size-\[2\.4px\]{width:2.4px;height:2.4px}.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-1\.5{height:calc(var(--ui-spacing) * 1.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-20{height:calc(var(--ui-spacing) * 20)}.ui\:h-24{height:calc(var(--ui-spacing) * 24)}.ui\:h-28{height:calc(var(--ui-spacing) * 28)}.ui\:h-40{height:calc(var(--ui-spacing) * 40)}.ui\:h-48{height:calc(var(--ui-spacing) * 48)}.ui\:h-50\!{height:calc(var(--ui-spacing) * 50)!important}.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-\[100cqh\]{height:100cqh}.ui\:h-\[280px\]{height:280px}.ui\:h-\[500px\]{height:500px}.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-fit\!{height:fit-content!important}.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-32{max-height:calc(var(--ui-spacing) * 32)}.ui\:max-h-52{max-height:calc(var(--ui-spacing) * 52)}.ui\:max-h-60{max-height:calc(var(--ui-spacing) * 60)}.ui\:max-h-64{max-height:calc(var(--ui-spacing) * 64)}.ui\:max-h-72{max-height:calc(var(--ui-spacing) * 72)}.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-96{max-height:calc(var(--ui-spacing) * 96)}.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-4{min-height:calc(var(--ui-spacing) * 4)}.ui\:min-h-8{min-height:calc(var(--ui-spacing) * 8)}.ui\:min-h-14{min-height:calc(var(--ui-spacing) * 14)}.ui\:min-h-16{min-height:calc(var(--ui-spacing) * 16)}.ui\:min-h-40{min-height:calc(var(--ui-spacing) * 40)}.ui\:min-h-96{min-height:calc(var(--ui-spacing) * 96)}.ui\:min-h-\[44px\]{min-height:44px}.ui\:min-h-\[63px\]{min-height:63px}.ui\:min-h-\[240px\]{min-height:240px}.ui\:min-h-\[320px\]{min-height:320px}.ui\:min-h-\[calc\(100vh-48px\)\]{min-height:calc(100vh - 48px)}.ui\:min-h-screen{min-height:100vh}.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\.5{width:calc(var(--ui-spacing) * 1.5)}.ui\:w-1\/4{width:25%}.ui\:w-2{width:calc(var(--ui-spacing) * 2)}.ui\:w-2\/4{width:50%}.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-6{width:calc(var(--ui-spacing) * 6)}.ui\:w-7{width:calc(var(--ui-spacing) * 7)}.ui\:w-8{width:calc(var(--ui-spacing) * 8)}.ui\:w-24{width:calc(var(--ui-spacing) * 24)}.ui\:w-28{width:calc(var(--ui-spacing) * 28)}.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-88{width:calc(var(--ui-spacing) * 88)}.ui\:w-\[1\.2rem\]{width:1.2rem}.ui\:w-\[25px\]{width:25px}.ui\:w-\[50px\]{width:50px}.ui\:w-\[80\%\]{width:80%}.ui\:w-\[100px\]{width:100px}.ui\:w-auto{width:auto}.ui\:w-fit{width:fit-content}.ui\:w-fit\!{width:fit-content!important}.ui\:w-full{width:100%}.ui\:w-full\!{width:100%!important}.ui\:w-max{width:max-content}.ui\:w-screen{width:100vw}.ui\:max-w-\(--skeleton-width\){max-width:var(--skeleton-width)}.ui\:max-w-2xl{max-width:var(--ui-container-2xl)}.ui\:max-w-3xl{max-width:var(--ui-container-3xl)}.ui\:max-w-4xl{max-width:var(--ui-container-4xl)}.ui\:max-w-6{max-width:calc(var(--ui-spacing) * 6)}.ui\:max-w-7xl{max-width:var(--ui-container-7xl)}.ui\:max-w-80{max-width:calc(var(--ui-spacing) * 80)}.ui\:max-w-\[16rem\]{max-width:16rem}.ui\:max-w-\[60\%\]{max-width:60%}.ui\:max-w-\[200px\]{max-width:200px}.ui\:max-w-\[300px\]{max-width:300px}.ui\:max-w-\[320px\]{max-width:320px}.ui\:max-w-\[1200px\]{max-width:1200px}.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-none{max-width:none}.ui\:max-w-sm{max-width:var(--ui-container-sm)}.ui\:max-w-xl{max-width:var(--ui-container-xl)}.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-18{min-width:calc(var(--ui-spacing) * 18)}.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-\[5rem\]{min-width:5rem}.ui\:min-w-\[9rem\]{min-width:9rem}.ui\:min-w-full{min-width:100%}.ui\:flex-1{flex:1}.ui\:shrink{flex-shrink: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\:origin-center{transform-origin:50%}.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-4{--tw-translate-x:calc(var(--ui-spacing) * 4);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-4{--tw-translate-y:calc(var(--ui-spacing) * 4);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\:\[translate\:0_0\]{translate:0}.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-5{rotate:5deg}.ui\:rotate-45{rotate:45deg}.ui\:rotate-90{rotate:90deg}.ui\:transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.ui\:transform-gpu{transform:translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.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-magicslide{animation:magicslide var(--speed) ease-in-out infinite alternate}.ui\:animate-meteor{animation:5s linear infinite meteor}.ui\:animate-pulse{animation:var(--ui-animate-pulse)}.ui\:animate-shine{animation:2s linear infinite shine}.ui\:animate-spin{animation:var(--ui-animate-spin)}.ui\:animate-spin-around{animation:spin-around calc(var(--speed) * 2) infinite linear}.ui\:cursor-auto{cursor:auto}.ui\:cursor-col-resize{cursor:col-resize}.ui\:cursor-default{cursor:default}.ui\:cursor-default\!{cursor:default!important}.ui\:cursor-grab{cursor:grab}.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-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.ui\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.ui\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.ui\:grid-cols-\[0_1fr\]{grid-template-columns:0 1fr}.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-nowrap\!{flex-wrap:nowrap!important}.ui\:flex-wrap{flex-wrap:wrap}.ui\:place-items-center{place-items:center}.ui\:items-baseline{align-items:baseline}.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\:justify-start\!{justify-content:flex-start!important}.ui\:justify-items-center{justify-items:center}.ui\:justify-items-start{justify-items: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\:gap-8{gap:calc(var(--ui-spacing) * 8)}.ui\:gap-16{gap:calc(var(--ui-spacing) * 16)}:where(.ui\:space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--ui-spacing) * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--ui-spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}:where(.ui\:space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--ui-spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--ui-spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.ui\:space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--ui-spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--ui-spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.ui\:space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--ui-spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--ui-spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}.ui\:gap-x-6{column-gap:calc(var(--ui-spacing) * 6)}:where(.ui\:space-x-8>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--ui-spacing) * 8) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--ui-spacing) * 8) * calc(1 - var(--tw-space-x-reverse)))}.ui\:gap-y-0\.5{row-gap:calc(var(--ui-spacing) * .5)}.ui\:gap-y-2{row-gap:calc(var(--ui-spacing) * 2)}.ui\:self-center{align-self:center}.ui\:self-start{align-self:flex-start}.ui\:self-stretch{align-self:stretch}.ui\:justify-self-end{justify-self:flex-end}.ui\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.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\:overflow-y-hidden{overflow-y:hidden}.ui\:scroll-smooth{scroll-behavior:smooth}.ui\:rounded{border-radius:.25rem}.ui\:rounded-\(--radius\){border-radius:var(--radius)}.ui\:rounded-2xl{border-radius:var(--ui-radius-2xl)}.ui\:rounded-3xl{border-radius:var(--ui-radius-3xl)}.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-md\!{border-radius:calc(var(--radius) - 2px)!important}.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-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.ui\:border-dashed{--tw-border-style:dashed;border-style:dashed}.ui\:border-none{--tw-border-style:none;border-style:none}.ui\:border-solid{--tw-border-style:solid;border-style:solid}.ui\:border-\(--color-border\){border-color:var(--color-border)}.ui\:border-amber-200{border-color:var(--ui-color-amber-200)}.ui\:border-amber-400{border-color:var(--ui-color-amber-400)}.ui\:border-background\/40{border-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:border-background\/40{border-color:color-mix(in oklab, var(--background) 40%, transparent)}}.ui\:border-border,.ui\:border-border\/40{border-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.ui\:border-border\/40{border-color:color-mix(in oklab, var(--border) 40%, transparent)}}.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-border\/60{border-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.ui\:border-border\/60{border-color:color-mix(in oklab, var(--border) 60%, transparent)}}.ui\:border-emerald-300{border-color:var(--ui-color-emerald-300)}.ui\:border-emerald-400{border-color:var(--ui-color-emerald-400)}.ui\:border-emerald-500{border-color:var(--ui-color-emerald-500)}.ui\:border-input{border-color:var(--input)}.ui\:border-muted{border-color:var(--muted)}.ui\:border-muted-foreground,.ui\:border-muted-foreground\/40{border-color:var(--muted-foreground)}@supports (color:color-mix(in lab, red, red)){.ui\:border-muted-foreground\/40{border-color:color-mix(in oklab, var(--muted-foreground) 40%, transparent)}}.ui\:border-neutral-800{border-color:var(--ui-color-neutral-800)}.ui\:border-primary,.ui\:border-primary\/30{border-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:border-primary\/30{border-color:color-mix(in oklab, var(--primary) 30%, transparent)}}.ui\:border-red-500{border-color:var(--ui-color-red-500)}.ui\:border-sidebar-border{border-color:var(--sidebar-border)}.ui\:border-sky-200{border-color:var(--ui-color-sky-200)}.ui\:border-transparent{border-color:#0000}.ui\:border-white\/10{border-color:var(--ui-color-white)}@supports (color:color-mix(in lab, red, red)){.ui\:border-white\/10{border-color:color-mix(in oklab, var(--ui-color-white) 10%, transparent)}}.ui\:border-l-foreground{border-left-color:var(--foreground)}.ui\:border-l-transparent{border-left-color:#0000}.ui\:bg-\(--color-bg\){background-color:var(--color-bg)}.ui\:bg-accent{background-color:var(--accent)}.ui\:bg-amber-50,.ui\:bg-amber-50\/30{background-color:var(--ui-color-amber-50)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-amber-50\/30{background-color:color-mix(in oklab, var(--ui-color-amber-50) 30%, transparent)}}.ui\:bg-amber-600{background-color:var(--ui-color-amber-600)}.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-background\/90{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-background\/90{background-color:color-mix(in oklab, var(--background) 90%, 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-emerald-50\/20{background-color:var(--ui-color-emerald-50)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-emerald-50\/20{background-color:color-mix(in oklab, var(--ui-color-emerald-50) 20%, transparent)}}.ui\:bg-emerald-50\/30{background-color:var(--ui-color-emerald-50)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-emerald-50\/30{background-color:color-mix(in oklab, var(--ui-color-emerald-50) 30%, transparent)}}.ui\:bg-emerald-50\/40{background-color:var(--ui-color-emerald-50)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-emerald-50\/40{background-color:color-mix(in oklab, var(--ui-color-emerald-50) 40%, transparent)}}.ui\:bg-emerald-600{background-color:var(--ui-color-emerald-600)}.ui\:bg-foreground{background-color:var(--foreground)}.ui\:bg-gray-200{background-color:var(--ui-color-gray-200)}.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\/10{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-muted\/10{background-color:color-mix(in oklab, var(--muted) 10%, transparent)}}.ui\:bg-muted\/30{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-muted\/30{background-color:color-mix(in oklab, var(--muted) 30%, transparent)}}.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\/5{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-primary\/5{background-color:color-mix(in oklab, var(--primary) 5%, transparent)}}.ui\:bg-primary\/10{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-primary\/10{background-color:color-mix(in oklab, var(--primary) 10%, transparent)}}.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-primary\/60{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-primary\/60{background-color:color-mix(in oklab, var(--primary) 60%, transparent)}}.ui\:bg-red-50\/40{background-color:var(--ui-color-red-50)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-red-50\/40{background-color:color-mix(in oklab, var(--ui-color-red-50) 40%, 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-sky-50{background-color:var(--ui-color-sky-50)}.ui\:bg-slate-500{background-color:var(--ui-color-slate-500)}.ui\:bg-transparent{background-color:#0000}.ui\:bg-white{background-color:var(--ui-color-white)}.ui\:bg-yellow-500{background-color:var(--ui-color-yellow-500)}.ui\:bg-linear-to-r{--tw-gradient-position:to right}@supports (background-image:linear-gradient(in lab, red, red)){.ui\:bg-linear-to-r{--tw-gradient-position:to right in oklab}}.ui\:bg-linear-to-r{background-image:linear-gradient(var(--tw-gradient-stops))}.ui\:bg-linear-to-t{--tw-gradient-position:to top}@supports (background-image:linear-gradient(in lab, red, red)){.ui\:bg-linear-to-t{--tw-gradient-position:to top in oklab}}.ui\:bg-linear-to-t{background-image:linear-gradient(var(--tw-gradient-stops))}.ui\:bg-\[linear-gradient\(110deg\,\#000103\,45\%\,\#1e2631\,55\%\,\#000103\)\]{background-image:linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)}.ui\:from-background{--tw-gradient-from:var(--background);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.ui\:from-pink-500{--tw-gradient-from:var(--ui-color-pink-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.ui\:from-slate-500{--tw-gradient-from:var(--ui-color-slate-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.ui\:via-blue-600\/30{--tw-gradient-via:var(--ui-color-blue-600)}@supports (color:color-mix(in lab, red, red)){.ui\:via-blue-600\/30{--tw-gradient-via:color-mix(in oklab, var(--ui-color-blue-600) 30%, transparent)}}.ui\:via-blue-600\/30{--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.ui\:to-orange-500{--tw-gradient-to:var(--ui-color-orange-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.ui\:to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.ui\:bg-\[length\:200\%_100\%\]{background-size:200% 100%}.ui\:bg-clip-padding{background-clip:padding-box}.ui\:fill-amber-400{fill:var(--ui-color-amber-400)}.ui\:fill-current{fill:currentColor}.ui\:fill-none{fill:none}.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-1\!{padding:calc(var(--ui-spacing) * 1)!important}.ui\:p-2{padding:calc(var(--ui-spacing) * 2)}.ui\:p-3{padding:calc(var(--ui-spacing) * 3)}.ui\:p-3\!{padding:calc(var(--ui-spacing) * 3)!important}.ui\:p-4{padding:calc(var(--ui-spacing) * 4)}.ui\:p-6{padding:calc(var(--ui-spacing) * 6)}.ui\:p-8{padding:calc(var(--ui-spacing) * 8)}.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\:px-8{padding-inline:calc(var(--ui-spacing) * 8)}.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-5{padding-block:calc(var(--ui-spacing) * 5)}.ui\:py-6{padding-block:calc(var(--ui-spacing) * 6)}.ui\:py-10{padding-block:calc(var(--ui-spacing) * 10)}.ui\:py-12{padding-block:calc(var(--ui-spacing) * 12)}.ui\:py-16{padding-block:calc(var(--ui-spacing) * 16)}.ui\:py-20{padding-block:calc(var(--ui-spacing) * 20)}.ui\:py-24{padding-block:calc(var(--ui-spacing) * 24)}.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\:pt-3\!{padding-top:calc(var(--ui-spacing) * 3)!important}.ui\:pt-4{padding-top:calc(var(--ui-spacing) * 4)}.ui\:pr-1{padding-right:calc(var(--ui-spacing) * 1)}.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-2{padding-bottom:calc(var(--ui-spacing) * 2)}.ui\:pb-3{padding-bottom:calc(var(--ui-spacing) * 3)}.ui\:pb-4{padding-bottom:calc(var(--ui-spacing) * 4)}.ui\:pb-16{padding-bottom:calc(var(--ui-spacing) * 16)}.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\:text-right{text-align:right}.ui\:align-middle{vertical-align:middle}.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-3xl{font-size:var(--ui-text-3xl);line-height:var(--tw-leading,var(--ui-text-3xl--line-height))}.ui\:text-4xl{font-size:var(--ui-text-4xl);line-height:var(--tw-leading,var(--ui-text-4xl--line-height))}.ui\:text-5xl{font-size:var(--ui-text-5xl);line-height:var(--tw-leading,var(--ui-text-5xl--line-height))}.ui\:text-base{font-size:var(--ui-text-base);line-height:var(--tw-leading,var(--ui-text-base--line-height))}.ui\:text-base\!{font-size:var(--ui-text-base)!important;line-height:var(--tw-leading,var(--ui-text-base--line-height))!important}.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-xl{font-size:var(--ui-text-xl);line-height:var(--tw-leading,var(--ui-text-xl--line-height))}.ui\:text-xs{font-size:var(--ui-text-xs);line-height:var(--tw-leading,var(--ui-text-xs--line-height))}.ui\:text-\[10px\]{font-size:10px}.ui\:text-\[13px\]{font-size:13px}.ui\:leading-7{--tw-leading:calc(var(--ui-spacing) * 7);line-height:calc(var(--ui-spacing) * 7)}.ui\:leading-\[1\.1\]{--tw-leading:1.1;line-height:1.1}.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-relaxed{--tw-leading:var(--ui-leading-relaxed);line-height:var(--ui-leading-relaxed)}.ui\:leading-snug{--tw-leading:var(--ui-leading-snug);line-height:var(--ui-leading-snug)}.ui\:leading-tight{--tw-leading:var(--ui-leading-tight);line-height:var(--ui-leading-tight)}.ui\:font-black{--tw-font-weight:var(--ui-font-weight-black);font-weight:var(--ui-font-weight-black)}.ui\:font-bold{--tw-font-weight:var(--ui-font-weight-bold);font-weight:var(--ui-font-weight-bold)}.ui\:font-light{--tw-font-weight:var(--ui-font-weight-light);font-weight:var(--ui-font-weight-light)}.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-tighter{--tw-tracking:var(--ui-tracking-tighter);letter-spacing:var(--ui-tracking-tighter)}.ui\:tracking-wide{--tw-tracking:var(--ui-tracking-wide);letter-spacing:var(--ui-tracking-wide)}.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\:break-all{word-break:break-all}.ui\:text-ellipsis{text-overflow:ellipsis}.ui\:whitespace-nowrap{white-space:nowrap}.ui\:text-accent-foreground{color:var(--accent-foreground)}.ui\:text-amber-200{color:var(--ui-color-amber-200)}.ui\:text-amber-500{color:var(--ui-color-amber-500)}.ui\:text-amber-600{color:var(--ui-color-amber-600)}.ui\:text-amber-900{color:var(--ui-color-amber-900)}.ui\:text-background,.ui\:text-background\/60{color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:text-background\/60{color:color-mix(in oklab, var(--background) 60%, transparent)}}.ui\:text-background\/70{color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:text-background\/70{color:color-mix(in oklab, var(--background) 70%, transparent)}}.ui\:text-background\/80{color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:text-background\/80{color:color-mix(in oklab, var(--background) 80%, transparent)}}.ui\:text-card-foreground{color:var(--card-foreground)}.ui\:text-current{color:currentColor}.ui\:text-destructive{color:var(--destructive)}.ui\:text-emerald-600{color:var(--ui-color-emerald-600)}.ui\:text-foreground,.ui\:text-foreground\/70{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.ui\:text-foreground\/70{color:color-mix(in oklab, var(--foreground) 70%, transparent)}}.ui\:text-foreground\/72{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.ui\:text-foreground\/72{color:color-mix(in oklab, var(--foreground) 72%, transparent)}}.ui\:text-green-500{color:var(--ui-color-green-500)}.ui\:text-muted-foreground,.ui\:text-muted-foreground\/75{color:var(--muted-foreground)}@supports (color:color-mix(in lab, red, red)){.ui\:text-muted-foreground\/75{color:color-mix(in oklab, var(--muted-foreground) 75%, transparent)}}.ui\:text-popover-foreground{color:var(--popover-foreground)}.ui\:text-primary{color:var(--primary)}.ui\:text-primary-foreground{color:var(--primary-foreground)}.ui\:text-red-600{color:var(--ui-color-red-600)}.ui\:text-red-700{color:var(--ui-color-red-700)}.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-sky-900{color:var(--ui-color-sky-900)}.ui\:text-white{color:var(--ui-color-white)}.ui\:text-white\!{color:var(--ui-color-white)!important}.ui\:capitalize{text-transform:capitalize}.ui\:uppercase{text-transform:uppercase}.ui\:no-underline{text-decoration-line:none}.ui\:underline{text-decoration-line:underline}.ui\:underline-offset-4{text-underline-offset:4px}.ui\:opacity-0{opacity:0}.ui\:opacity-10{opacity:.1}.ui\:opacity-40{opacity:.4}.ui\:opacity-50{opacity:.5}.ui\:opacity-60{opacity:.6}.ui\:opacity-70{opacity:.7}.ui\:opacity-90{opacity:.9}.ui\:opacity-100{opacity:1}.ui\:opacity-\[0\.06\]{opacity:.06}.ui\:opacity-\[0\.08\]{opacity:.08}.ui\:opacity-\[0\.15\]{opacity:.15}.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-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);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_\#ffffff10\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,#ffffff10);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-\[inset_0_-8px_10px_\#ffffff1f\]{--tw-shadow:inset 0 -8px 10px var(--tw-shadow-color,#ffffff1f);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-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.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\:shadow-primary\/20{--tw-shadow-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:shadow-primary\/20{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--primary) 20%, transparent) var(--tw-shadow-alpha), transparent)}}.ui\:ring-accent{--tw-ring-color:var(--accent)}.ui\:ring-background{--tw-ring-color:var(--background)}.ui\:ring-border\/50{--tw-ring-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.ui\:ring-border\/50{--tw-ring-color:color-mix(in oklab, var(--border) 50%, transparent)}}.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\:blur-\[2px\]{--tw-blur:blur(2px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.ui\:brightness-200{--tw-brightness:brightness(200%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.ui\:drop-shadow-none{--tw-drop-shadow: ;filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.ui\:grayscale{--tw-grayscale:grayscale(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.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\:backdrop-blur-xl{--tw-backdrop-blur:blur(var(--ui-blur-xl));-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}.ui\:\[background\:conic-gradient\(from_calc\(270deg-\(var\(--spread\)\*0\.5\)\)\,transparent_0\,var\(--shimmer-color\)_var\(--spread\)\,transparent_var\(--spread\)\)\]{background:conic-gradient(from calc(270deg - (var(--spread) * .5)),transparent 0,var(--shimmer-color) var(--spread),transparent var(--spread))}.ui\:\[background\:var\(--bg\)\]{background:var(--bg)}.ui\:\[mask\:none\]{-webkit-mask:none;mask:none}.ui\:ring-inset{--tw-ring-inset:inset}:is(.ui\:\*\:w-full>*){width:100%}.ui\:group-focus-within\/menu-item\:opacity-100:is(:where(.ui\:group\/menu-item):focus-within *){opacity:1}@media (hover:hover){.ui\:group-hover\:scale-\[1\.02\]:is(:where(.ui\:group):hover *){scale:1.02}.ui\:group-hover\:bg-primary:is(:where(.ui\:group):hover *){background-color:var(--primary)}.ui\:group-hover\:text-primary-foreground:is(:where(.ui\:group):hover *){color:var(--primary-foreground)}.ui\:group-hover\:opacity-100:is(:where(.ui\:group):hover *){opacity:1}.ui\:group-hover\:shadow-\[inset_0_-6px_10px_\#ffffff3f\]:is(:where(.ui\:group):hover *){--tw-shadow:inset 0 -6px 10px var(--tw-shadow-color,#ffffff3f);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-hover\/menu-item\:opacity-100:is(:where(.ui\:group\/menu-item):hover *){opacity:1}}.ui\:group-active\:shadow-\[inset_0_-10px_10px_\#ffffff3f\]:is(:where(.ui\:group):active *){--tw-shadow:inset 0 -10px 10px var(--tw-shadow-color,#ffffff3f);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-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\]\:pointer-events-none:is(:where(.ui\:group)[data-collapsible=icon] *){pointer-events:none}.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}.ui\:focus-within\:border-ring:focus-within{border-color:var(--ring)}.ui\:focus-within\:ring-\[3px\]:focus-within{--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-within\:ring-ring\/50:focus-within{--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){.ui\:focus-within\:ring-ring\/50:focus-within{--tw-ring-color:color-mix(in oklab, var(--ring) 50%, transparent)}}@media (hover:hover){.ui\:hover\:-translate-y-1:hover{--tw-translate-y:calc(var(--ui-spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:hover\:cursor-pointer:hover{cursor:pointer}.ui\:hover\:border:hover{border-style:var(--tw-border-style);border-width:1px}.ui\:hover\:border-background\/60:hover{border-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:hover\:border-background\/60:hover{border-color:color-mix(in oklab, var(--background) 60%, transparent)}}.ui\:hover\:border-border:hover{border-color:var(--border)}.ui\:hover\:border-primary:hover{border-color:var(--primary)}.ui\:hover\:bg-accent:hover,.ui\:hover\:bg-accent\/25:hover{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){.ui\:hover\:bg-accent\/25:hover{background-color:color-mix(in oklab, var(--accent) 25%, transparent)}}.ui\:hover\:bg-amber-500\/10:hover{background-color:var(--ui-color-amber-500)}@supports (color:color-mix(in lab, red, red)){.ui\:hover\:bg-amber-500\/10:hover{background-color:color-mix(in oklab, var(--ui-color-amber-500) 10%, transparent)}}.ui\:hover\:bg-background\/10:hover{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:hover\:bg-background\/10:hover{background-color:color-mix(in oklab, var(--background) 10%, transparent)}}.ui\:hover\:bg-muted:hover,.ui\:hover\:bg-muted\/50:hover{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.ui\:hover\:bg-muted\/50:hover{background-color:color-mix(in oklab, var(--muted) 50%, transparent)}}.ui\:hover\:bg-primary:hover,.ui\:hover\:bg-primary\/5:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:hover\:bg-primary\/5:hover{background-color:color-mix(in oklab, var(--primary) 5%, transparent)}}.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-background:hover{color:var(--background)}.ui\:hover\:text-foreground:hover{color:var(--foreground)}.ui\:hover\:text-muted-foreground:hover{color:var(--muted-foreground)}.ui\:hover\:text-primary:hover{color:var(--primary)}.ui\:hover\:text-primary-foreground:hover{color:var(--primary-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-2xs:hover{--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\: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\:shadow-md:hover{--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\:hover\:shadow-xl:hover{--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\:hover\:shadow-primary\/5:hover{--tw-shadow-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:hover\:shadow-primary\/5:hover{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--primary) 5%, transparent) var(--tw-shadow-alpha), transparent)}}.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\:translate-y-px:active{--tw-translate-y:1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.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\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\]:has(>svg){grid-template-columns:calc(var(--spacing) * 4) 1fr}.ui\:has-\[\>svg\]\:gap-x-3:has(>svg){column-gap:calc(var(--ui-spacing) * 3)}.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\:w-48{width:calc(var(--ui-spacing) * 48)}.ui\:sm\:max-w-lg{max-width:var(--ui-container-lg)}.ui\:sm\:max-w-sm{max-width:var(--ui-container-sm)}.ui\:sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.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\:p-6{padding:calc(var(--ui-spacing) * 6)}.ui\:sm\:py-32{padding-block:calc(var(--ui-spacing) * 32)}.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\:sm\:text-5xl{font-size:var(--ui-text-5xl);line-height:var(--tw-leading,var(--ui-text-5xl--line-height))}.ui\:sm\:text-xl{font-size:var(--ui-text-xl);line-height:var(--tw-leading,var(--ui-text-xl--line-height))}.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\:w-52{width:calc(var(--ui-spacing) * 52)}.ui\:md\:w-full{width:100%}.ui\:md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.ui\:md\:flex-col{flex-direction:column}.ui\:md\:flex-row{flex-direction:row}.ui\:md\:overflow-x-visible{overflow-x:visible}.ui\:md\:overflow-y-visible{overflow-y:visible}.ui\:md\:border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.ui\:md\:border-b-0{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.ui\:md\:p-12{padding:calc(var(--ui-spacing) * 12)}.ui\:md\:px-8{padding-inline:calc(var(--ui-spacing) * 8)}.ui\:md\:pb-24{padding-bottom:calc(var(--ui-spacing) * 24)}.ui\:md\:text-6xl{font-size:var(--ui-text-6xl);line-height:var(--tw-leading,var(--ui-text-6xl--line-height))}.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}}@media (min-width:64rem){.ui\:lg\:block{display:block}.ui\:lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.ui\:lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.ui\:lg\:px-8{padding-inline:calc(var(--ui-spacing) * 8)}.ui\:lg\:text-5xl{font-size:var(--ui-text-5xl);line-height:var(--tw-leading,var(--ui-text-5xl--line-height))}.ui\:lg\:text-6xl{font-size:var(--ui-text-6xl);line-height:var(--tw-leading,var(--ui-text-6xl--line-height))}.ui\:lg\:text-7xl{font-size:var(--ui-text-7xl);line-height:var(--tw-leading,var(--ui-text-7xl--line-height))}}.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-amber-900:where(.dark,.dark *){border-color:var(--ui-color-amber-900)}.ui\:dark\:border-input:where(.dark,.dark *){border-color:var(--input)}.ui\:dark\:border-sky-900:where(.dark,.dark *){border-color:var(--ui-color-sky-900)}.ui\:dark\:border-slate-800:where(.dark,.dark *){border-color:var(--ui-color-slate-800)}.ui\:dark\:bg-amber-500:where(.dark,.dark *){background-color:var(--ui-color-amber-500)}.ui\:dark\:bg-amber-950:where(.dark,.dark *){background-color:var(--ui-color-amber-950)}.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-emerald-500:where(.dark,.dark *){background-color:var(--ui-color-emerald-500)}.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-sky-950:where(.dark,.dark *){background-color:var(--ui-color-sky-950)}.ui\:dark\:bg-slate-950:where(.dark,.dark *){background-color:var(--ui-color-slate-950)}.ui\:dark\:bg-transparent:where(.dark,.dark *){background-color:#0000}.ui\:dark\:fill-amber-400:where(.dark,.dark *){fill:var(--ui-color-amber-400)}.ui\:dark\:text-amber-50:where(.dark,.dark *){color:var(--ui-color-amber-50)}.ui\:dark\:text-amber-300:where(.dark,.dark *){color:var(--ui-color-amber-300)}.ui\:dark\:text-amber-400:where(.dark,.dark *){color:var(--ui-color-amber-400)}.ui\:dark\:text-amber-500\/40:where(.dark,.dark *){color:var(--ui-color-amber-500)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:text-amber-500\/40:where(.dark,.dark *){color:color-mix(in oklab, var(--ui-color-amber-500) 40%, transparent)}}.ui\:dark\:text-amber-950:where(.dark,.dark *){color:var(--ui-color-amber-950)}.ui\:dark\:text-emerald-950:where(.dark,.dark *){color:var(--ui-color-emerald-950)}.ui\:dark\:text-muted-foreground:where(.dark,.dark *){color:var(--muted-foreground)}.ui\:dark\:text-sky-50:where(.dark,.dark *){color:var(--ui-color-sky-50)}.ui\:dark\:text-white:where(.dark,.dark *){color:var(--ui-color-white)}@media (hover:hover){.ui\:dark\:hover\:border-input:where(.dark,.dark *):hover{border-color:var(--input)}.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\:\[\&_\.lc-area-path\]\:opacity-100 .lc-area-path{opacity:1}.ui\:\[\&_\.lc-axis-tick\]\:stroke-0 .lc-axis-tick{stroke-width:0}.ui\:\[\&_\.lc-axis-tick-label\]\:fill-muted-foreground .lc-axis-tick-label{fill:var(--muted-foreground)}.ui\:\[\&_\.lc-axis-tick-label\]\:font-normal .lc-axis-tick-label{--tw-font-weight:var(--ui-font-weight-normal);font-weight:var(--ui-font-weight-normal)}.ui\:\[\&_\.lc-grid-x-radial-circle\]\:stroke-border .lc-grid-x-radial-circle,.ui\:\[\&_\.lc-grid-x-radial-line\]\:stroke-border .lc-grid-x-radial-line,.ui\:\[\&_\.lc-grid-y-radial-circle\]\:stroke-border .lc-grid-y-radial-circle,.ui\:\[\&_\.lc-grid-y-radial-line\]\:stroke-border .lc-grid-y-radial-line{stroke:var(--border)}.ui\:\[\&_\.lc-highlight-line\]\:stroke-0 .lc-highlight-line{stroke-width:0}.ui\:\[\&_\.lc-highlight-line\]\:opacity-100 .lc-highlight-line,.ui\:\[\&_\.lc-highlight-point\]\:opacity-100 .lc-highlight-point{opacity:1}.ui\:\[\&_\.lc-labels-text\:not\(\[fill\]\)\]\:fill-foreground .lc-labels-text:not([fill]){fill:var(--foreground)}.ui\:\[\&_\.lc-layout-svg-g\]\:fill-transparent .lc-layout-svg-g{fill:#0000}.ui\:\[\&_\.lc-legend-swatch\]\:size-2\.5 .lc-legend-swatch{width:calc(var(--ui-spacing) * 2.5);height:calc(var(--ui-spacing) * 2.5)}.ui\:\[\&_\.lc-legend-swatch\]\:rounded-\[2px\] .lc-legend-swatch{border-radius:2px}.ui\:\[\&_\.lc-legend-swatch-button\]\:items-center .lc-legend-swatch-button{align-items:center}.ui\:\[\&_\.lc-legend-swatch-button\]\:gap-1\.5 .lc-legend-swatch-button{gap:calc(var(--ui-spacing) * 1.5)}.ui\:\[\&_\.lc-legend-swatch-group\]\:items-center .lc-legend-swatch-group{align-items:center}.ui\:\[\&_\.lc-legend-swatch-group\]\:gap-4 .lc-legend-swatch-group{gap:calc(var(--ui-spacing) * 4)}.ui\:\[\&_\.lc-line\]\:stroke-border\/50 .lc-line{stroke:var(--border)}@supports (color:color-mix(in lab, red, red)){.ui\:\[\&_\.lc-line\]\:stroke-border\/50 .lc-line{stroke:color-mix(in oklab, var(--border) 50%, transparent)}}.ui\:\[\&_\.lc-root-container\]\:w-full .lc-root-container{width:100%}.ui\:\[\&_\.lc-rule-x-line\:not\(\.lc-grid-x-rule\)\]\:stroke-0 .lc-rule-x-line:not(.lc-grid-x-rule),.ui\:\[\&_\.lc-rule-y-line\:not\(\.lc-grid-y-rule\)\]\:stroke-0 .lc-rule-y-line:not(.lc-grid-y-rule){stroke-width:0}.ui\:\[\&_\.lc-spline-path\]\:opacity-100 .lc-spline-path{opacity:1}.ui\:\[\&_\.lc-text\]\:text-xs .lc-text{font-size:var(--ui-text-xs);line-height:var(--tw-leading,var(--ui-text-xs--line-height))}.ui\:\[\&_\.lc-text-svg\]\:overflow-visible .lc-text-svg{overflow:visible}.ui\:\[\&_\.lc-tooltip-rects-g\]\:fill-transparent .lc-tooltip-rects-g{fill:#0000}.ui\:\[\&_\.stroke-white\]\:stroke-transparent .stroke-white{stroke:#0000}.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\:\[\&_p\]\:leading-relaxed p{--tw-leading:var(--ui-leading-relaxed);line-height:var(--ui-leading-relaxed)}.ui\:\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.ui\:\[\&_svg\]\:size-8\! svg{width:calc(var(--ui-spacing) * 8)!important;height:calc(var(--ui-spacing) * 8)!important}.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\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*=text-]){color:var(--muted-foreground)}.ui\:\[\&_svg\:not\(\[class\*\=\'ui\:size-\'\]\)\]\:size-4 svg:not([class*=ui\:size-]){width:calc(var(--ui-spacing) * 4);height:calc(var(--ui-spacing) * 4)}.ui\:\[\&_svg\:not\(\[class\*\=\'ui\:size-\'\]\)\]\:size-6 svg:not([class*=ui\:size-]){width:calc(var(--ui-spacing) * 6);height:calc(var(--ui-spacing) * 6)}.ui\:\[\&_text\]\:stroke-transparent text{stroke:#0000}.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\:\[\&\>\[data-slot\=field-label\]\]\:flex-auto>[data-slot=field-label]{flex:auto}.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\*\=\'ui\:w-\'\]\)\]\:w-fit>[data-slot=select-trigger]:not([class*=ui\: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\]\:translate-y-0\.5>svg{--tw-translate-y:calc(var(--ui-spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:\[\&\>svg\]\:text-current>svg{color:currentColor}.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\*\=\'ui\:size-\'\]\)\]\:size-3\.5>svg:not([class*=ui\:size-]){width:calc(var(--ui-spacing) * 3.5);height:calc(var(--ui-spacing) * 3.5)}.ui\:\[\&\>svg\:not\(\[class\*\=\'ui\:size-\'\]\)\]\:size-4>svg:not([class*=ui\: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-amber-600\/90:hover{background-color:var(--ui-color-amber-600)}@supports (color:color-mix(in lab, red, red)){a.ui\:\[a\&\]\:hover\:bg-amber-600\/90:hover{background-color:color-mix(in oklab, var(--ui-color-amber-600) 90%, transparent)}}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-emerald-600\/90:hover{background-color:var(--ui-color-emerald-600)}@supports (color:color-mix(in lab, red, red)){a.ui\:\[a\&\]\:hover\:bg-emerald-600\/90:hover{background-color:color-mix(in oklab, var(--ui-color-emerald-600) 90%, transparent)}}a.ui\:\[a\&\]\:hover\:bg-primary\/30:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){a.ui\:\[a\&\]\:hover\:bg-primary\/30:hover{background-color:color-mix(in oklab, var(--primary) 30%, 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\:text-primary:hover{color:var(--primary)}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}@keyframes border-beam{to{offset-distance:100%}}@keyframes meteor{0%{opacity:1;transform:rotate(215deg)translate(0)}70%{opacity:1}to{opacity:0;transform:rotate(215deg)translate(-500px)}}@keyframes shimmer-marketing{0%,90%,to{background-position:calc(-100% - var(--shimmer-width)) 0}30%,60%{background-position:calc(100% + var(--shimmer-width)) 0}}@keyframes spin-around{0%{transform:translateZ(0)rotate(0)}15%,35%{transform:translateZ(0)rotate(90deg)}65%,85%{transform:translateZ(0)rotate(270deg)}to{transform:translateZ(0)rotate(360deg)}}@keyframes magicslide{to{transform:translate(calc(100cqw - 100%))}}:root{--background:oklch(100% 0 0);--foreground:oklch(14.5% 0 0);--card:oklch(100% 0 0);--card-foreground:oklch(14.5% 0 0);--popover:oklch(100% 0 0);--popover-foreground:oklch(14.5% 0 0);--primary:oklch(48.8% .243 264.376);--primary-foreground:oklch(97% .014 254.604);--secondary:oklch(96.7% .001 286.375);--secondary-foreground:oklch(21% .006 285.885);--muted:oklch(97% 0 0);--muted-foreground:oklch(55.6% 0 0);--accent:oklch(97% 0 0);--accent-foreground:oklch(20.5% 0 0);--destructive:oklch(57.7% .245 27.325);--border:oklch(92.2% 0 0);--input:oklch(92.2% 0 0);--ring:oklch(70.8% 0 0);--chart-1:oklch(80.9% .105 251.813);--chart-2:oklch(62.3% .214 259.815);--chart-3:oklch(54.6% .245 262.881);--chart-4:oklch(48.8% .243 264.376);--chart-5:oklch(42.4% .199 265.638);--radius:.625rem;--sidebar:oklch(98.5% 0 0);--sidebar-foreground:oklch(14.5% 0 0);--sidebar-primary:oklch(54.6% .245 262.881);--sidebar-primary-foreground:oklch(97% .014 254.604);--sidebar-accent:oklch(97% 0 0);--sidebar-accent-foreground:oklch(20.5% 0 0);--sidebar-border:oklch(92.2% 0 0);--sidebar-ring:oklch(70.8% 0 0)}.dark{--background:oklch(14.5% 0 0);--foreground:oklch(98.5% 0 0);--card:oklch(20.5% 0 0);--card-foreground:oklch(98.5% 0 0);--popover:oklch(20.5% 0 0);--popover-foreground:oklch(98.5% 0 0);--primary:oklch(42.4% .199 265.638);--primary-foreground:oklch(97% .014 254.604);--secondary:oklch(27.4% .006 286.033);--secondary-foreground:oklch(98.5% 0 0);--muted:oklch(26.9% 0 0);--muted-foreground:oklch(70.8% 0 0);--accent:oklch(26.9% 0 0);--accent-foreground:oklch(98.5% 0 0);--destructive:oklch(70.4% .191 22.216);--border:oklch(100% 0 0/.1);--input:oklch(100% 0 0/.15);--ring:oklch(55.6% 0 0);--chart-1:oklch(80.9% .105 251.813);--chart-2:oklch(62.3% .214 259.815);--chart-3:oklch(54.6% .245 262.881);--chart-4:oklch(48.8% .243 264.376);--chart-5:oklch(42.4% .199 265.638);--sidebar:oklch(20.5% 0 0);--sidebar-foreground:oklch(98.5% 0 0);--sidebar-primary:oklch(62.3% .214 259.815);--sidebar-primary-foreground:oklch(97% .014 254.604);--sidebar-accent:oklch(26.9% 0 0);--sidebar-accent-foreground:oklch(98.5% 0 0);--sidebar-border:oklch(100% 0 0/.1);--sidebar-ring:oklch(55.6% 0 0)}@property --border-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes border{to{--border-angle:360deg}}@keyframes flip{to{transform:rotate(360deg)}}@keyframes kitrotate{to{transform:rotate(90deg)}}@keyframes shine{0%{background-position:0 0}to{background-position:-200% 0}}.animate-gradient-border{background:linear-gradient(45deg, white, white) padding-box, conic-gradient(from var(--border-angle), #94a3b84d 75%, var(--primary,#1d4ee2) 82%, var(--primary-foreground,white) 88%, var(--primary,#1d4ee2) 92%, #94a3b84d 100%) border-box;border:1px solid #0000;transition:--border-angle 3s ease-in-out}.animate-gradient-border:hover{animation:4s ease-in-out infinite border}.dark.animate-gradient-border{background:linear-gradient(45deg, #000, #000) padding-box, conic-gradient(from var(--border-angle), #4755697a 75%, var(--primary,#1d4ee2) 82%, var(--primary-foreground,black) 88%, var(--primary,#1d4ee2) 92%, #4755697a 100%) border-box}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-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-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@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-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial;--tw-content:"";--tw-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;--border-angle:0deg}}}@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-serif:ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;--ui-font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--ui-color-red-50:oklch(97.1% .013 17.38);--ui-color-red-500:oklch(63.7% .237 25.331);--ui-color-red-600:oklch(57.7% .245 27.325);--ui-color-red-700:oklch(50.5% .213 27.518);--ui-color-orange-500:oklch(70.5% .213 47.604);--ui-color-amber-50:oklch(98.7% .022 95.277);--ui-color-amber-200:oklch(92.4% .12 95.746);--ui-color-amber-300:oklch(87.9% .169 91.605);--ui-color-amber-400:oklch(82.8% .189 84.429);--ui-color-amber-500:oklch(76.9% .188 70.08);--ui-color-amber-600:oklch(66.6% .179 58.318);--ui-color-amber-900:oklch(41.4% .112 45.904);--ui-color-amber-950:oklch(27.9% .077 45.635);--ui-color-yellow-500:oklch(79.5% .184 86.047);--ui-color-green-500:oklch(72.3% .219 149.579);--ui-color-emerald-50:oklch(97.9% .021 166.113);--ui-color-emerald-300:oklch(84.5% .143 164.978);--ui-color-emerald-400:oklch(76.5% .177 163.223);--ui-color-emerald-500:oklch(69.6% .17 162.48);--ui-color-emerald-600:oklch(59.6% .145 163.225);--ui-color-emerald-950:oklch(26.2% .051 172.552);--ui-color-sky-50:oklch(97.7% .013 236.62);--ui-color-sky-200:oklch(90.1% .058 230.902);--ui-color-sky-900:oklch(39.1% .09 240.876);--ui-color-sky-950:oklch(29.3% .066 243.157);--ui-color-blue-600:oklch(54.6% .245 262.881);--ui-color-violet-500:oklch(60.6% .25 292.717);--ui-color-pink-500:oklch(65.6% .241 354.308);--ui-color-rose-500:oklch(64.5% .246 16.439);--ui-color-slate-500:oklch(55.4% .046 257.417);--ui-color-slate-800:oklch(27.9% .041 260.031);--ui-color-slate-950:oklch(12.9% .042 264.695);--ui-color-gray-200:oklch(92.8% .006 264.531);--ui-color-neutral-800:oklch(26.9% 0 0);--ui-color-black:#000;--ui-color-white:#fff;--ui-spacing:.25rem;--ui-container-xs:20rem;--ui-container-sm:24rem;--ui-container-md:28rem;--ui-container-lg:32rem;--ui-container-xl:36rem;--ui-container-2xl:42rem;--ui-container-3xl:48rem;--ui-container-4xl:56rem;--ui-container-5xl:64rem;--ui-container-7xl:80rem;--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-xl:1.25rem;--ui-text-xl--line-height:calc(1.75 / 1.25);--ui-text-2xl:1.5rem;--ui-text-2xl--line-height:calc(2 / 1.5);--ui-text-3xl:1.875rem;--ui-text-3xl--line-height:calc(2.25 / 1.875);--ui-text-4xl:2.25rem;--ui-text-4xl--line-height:calc(2.5 / 2.25);--ui-text-5xl:3rem;--ui-text-5xl--line-height:1;--ui-text-6xl:3.75rem;--ui-text-6xl--line-height:1;--ui-text-7xl:4.5rem;--ui-text-7xl--line-height:1;--ui-font-weight-light:300;--ui-font-weight-normal:400;--ui-font-weight-medium:500;--ui-font-weight-semibold:600;--ui-font-weight-bold:700;--ui-font-weight-black:900;--ui-tracking-tighter:-.05em;--ui-tracking-tight:-.025em;--ui-tracking-wide:.025em;--ui-tracking-wider:.05em;--ui-tracking-widest:.1em;--ui-leading-tight:1.25;--ui-leading-snug:1.375;--ui-leading-normal:1.5;--ui-leading-relaxed:1.625;--ui-radius-xs:.125rem;--ui-radius-2xl:1rem;--ui-radius-3xl:1.5rem;--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-blur-xl:24px;--ui-aspect-video:16 / 9;--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{.cio-marketing-border-beam{pointer-events:none;border-radius:inherit;border:calc(var(--border-width) * 1px) solid transparent;-webkit-mask-composite:source-in;-webkit-mask-source-type:auto,auto;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#0000,#0000),linear-gradient(#fff,#fff);mask-image:linear-gradient(#0000,#0000),linear-gradient(#fff,#fff);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:padding-box,border-box;mask-clip:padding-box,border-box;-webkit-mask-origin:border-box,border-box;mask-origin:border-box,border-box;-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.cio-marketing-border-beam:after{content:"";aspect-ratio:1;width:calc(var(--size) * 1px);animation-delay:var(--delay);background:linear-gradient(to left, var(--color-from), var(--color-to), transparent);offset-anchor:calc(var(--anchor) * 1%) 50%;offset-path:rect(0 auto auto 0 round calc(var(--size) * 1px));animation:border-beam calc(var(--duration) * 1s) infinite linear;position:absolute}}@layer utilities{.ui\:\@container\/field-group{container:field-group/inline-size}.ui\:\@container-\[size\]{container-type: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\:sticky{position:sticky}.ui\:-inset-full{inset:-100%}.ui\:inset-\(--cut\){inset:var(--cut)}.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-3{top:calc(var(--ui-spacing) * -3)}.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-12{top:calc(var(--ui-spacing) * 12)}.ui\:top-14{top:calc(var(--ui-spacing) * 14)}.ui\:top-\[-12px\]{top:-12px}.ui\:top-\[50\%\]{top:50%}.ui\:top-\[60\%\]{top:60%}.ui\:top-full{top:100%}.ui\:top-px{top:1px}.ui\:-right-4{right:calc(var(--ui-spacing) * -4)}.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\:right-\[-12px\]{right:-12px}.ui\:-bottom-px{bottom:-1px}.ui\:bottom-0{bottom:calc(var(--ui-spacing) * 0)}.ui\:bottom-2{bottom:calc(var(--ui-spacing) * 2)}.ui\:bottom-full{bottom:100%}.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\:left-auto{left:auto}.ui\:isolate{isolation:isolate}.ui\:-z-10{z-index:calc(10 * -1)}.ui\:-z-20{z-index:calc(20 * -1)}.ui\:-z-30{z-index:calc(30 * -1)}.ui\:z-0{z-index:0}.ui\:z-1{z-index:1}.ui\:z-10{z-index:10}.ui\:z-20{z-index:20}.ui\:z-30{z-index:30}.ui\:z-40{z-index:40}.ui\:z-50{z-index:50}.ui\:z-100{z-index:100}.ui\:z-200{z-index:200}.ui\:z-999{z-index:999}.ui\:z-\[1\]{z-index:1}.ui\:z-\[110\]{z-index:110}.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-0\.5{margin-inline:calc(var(--ui-spacing) * .5)}.ui\:mx-auto{margin-inline:auto}.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-3{margin-block:calc(var(--ui-spacing) * 3)}.ui\:my-4{margin-block:calc(var(--ui-spacing) * 4)}.ui\:my-10{margin-block:calc(var(--ui-spacing) * 10)}.ui\:ms-1{margin-inline-start:calc(var(--ui-spacing) * 1)}.ui\:ms-4{margin-inline-start:calc(var(--ui-spacing) * 4)}.ui\:mt-0\.5{margin-top:calc(var(--ui-spacing) * .5)}.ui\:mt-1{margin-top:calc(var(--ui-spacing) * 1)}.ui\:mt-1\.5{margin-top:calc(var(--ui-spacing) * 1.5)}.ui\:mt-2{margin-top:calc(var(--ui-spacing) * 2)}.ui\:mt-3{margin-top:calc(var(--ui-spacing) * 3)}.ui\:mt-4{margin-top:calc(var(--ui-spacing) * 4)}.ui\:mt-6{margin-top:calc(var(--ui-spacing) * 6)}.ui\:mt-8{margin-top:calc(var(--ui-spacing) * 8)}.ui\:mt-9{margin-top:calc(var(--ui-spacing) * 9)}.ui\:mt-10{margin-top:calc(var(--ui-spacing) * 10)}.ui\:mt-12{margin-top:calc(var(--ui-spacing) * 12)}.ui\:mt-auto{margin-top:auto}.ui\:mr-1{margin-right:calc(var(--ui-spacing) * 1)}.ui\:mr-2{margin-right:calc(var(--ui-spacing) * 2)}.ui\:mb-1{margin-bottom: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\:mb-6{margin-bottom:calc(var(--ui-spacing) * 6)}.ui\:mb-8{margin-bottom:calc(var(--ui-spacing) * 8)}.ui\:mb-10{margin-bottom:calc(var(--ui-spacing) * 10)}.ui\:mb-12{margin-bottom:calc(var(--ui-spacing) * 12)}.ui\:mb-16{margin-bottom:calc(var(--ui-spacing) * 16)}.ui\:ml-1{margin-left:calc(var(--ui-spacing) * 1)}.ui\:ml-2{margin-left:calc(var(--ui-spacing) * 2)}.ui\:ml-2\.5{margin-left:calc(var(--ui-spacing) * 2.5)}.ui\:ml-auto{margin-left:auto}.ui\:box-border{box-sizing:border-box}.ui\:line-clamp-1{-webkit-line-clamp:1;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.ui\:line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.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-block{display:inline-block}.ui\:inline-flex{display:inline-flex}.ui\:field-sizing-content{field-sizing:content}.ui\:aspect-\[1\],.ui\:aspect-square{aspect-ratio:1}.ui\:aspect-video{aspect-ratio:var(--ui-aspect-video)}.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-5{width:calc(var(--ui-spacing) * 5);height:calc(var(--ui-spacing) * 5)}.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-14{width:calc(var(--ui-spacing) * 14);height:calc(var(--ui-spacing) * 14)}.ui\:size-14\!{width:calc(var(--ui-spacing) * 14)!important;height:calc(var(--ui-spacing) * 14)!important}.ui\:size-20{width:calc(var(--ui-spacing) * 20);height:calc(var(--ui-spacing) * 20)}.ui\:size-24{width:calc(var(--ui-spacing) * 24);height:calc(var(--ui-spacing) * 24)}.ui\:size-\[2\.4px\]{width:2.4px;height:2.4px}.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{height:calc(var(--ui-spacing) * 0)}.ui\:h-0\.5{height:calc(var(--ui-spacing) * .5)}.ui\:h-0\.5\!{height:calc(var(--ui-spacing) * .5)!important}.ui\:h-1{height:calc(var(--ui-spacing) * 1)}.ui\:h-1\.5{height:calc(var(--ui-spacing) * 1.5)}.ui\:h-2{height:calc(var(--ui-spacing) * 2)}.ui\:h-2\.5{height:calc(var(--ui-spacing) * 2.5)}.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-20{height:calc(var(--ui-spacing) * 20)}.ui\:h-24{height:calc(var(--ui-spacing) * 24)}.ui\:h-28{height:calc(var(--ui-spacing) * 28)}.ui\:h-40{height:calc(var(--ui-spacing) * 40)}.ui\:h-48{height:calc(var(--ui-spacing) * 48)}.ui\:h-50\!{height:calc(var(--ui-spacing) * 50)!important}.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-\[100cqh\]{height:100cqh}.ui\:h-\[280px\]{height:280px}.ui\:h-\[500px\]{height:500px}.ui\:h-\[calc\(100\%-1px\)\]{height:calc(100% - 1px)}.ui\:h-\[calc\(100\%-3px\)\]{height:calc(100% - 3px)}.ui\:h-\[calc\(100dvh-3rem\)\]{height:calc(100dvh - 3rem)}.ui\:h-auto{height:auto}.ui\:h-fit{height:fit-content}.ui\:h-fit\!{height:fit-content!important}.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-32{max-height:calc(var(--ui-spacing) * 32)}.ui\:max-h-52{max-height:calc(var(--ui-spacing) * 52)}.ui\:max-h-60{max-height:calc(var(--ui-spacing) * 60)}.ui\:max-h-64{max-height:calc(var(--ui-spacing) * 64)}.ui\:max-h-72{max-height:calc(var(--ui-spacing) * 72)}.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-96{max-height:calc(var(--ui-spacing) * 96)}.ui\:max-h-\[85vh\]{max-height:85vh}.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-4{min-height:calc(var(--ui-spacing) * 4)}.ui\:min-h-8{min-height:calc(var(--ui-spacing) * 8)}.ui\:min-h-14{min-height:calc(var(--ui-spacing) * 14)}.ui\:min-h-16{min-height:calc(var(--ui-spacing) * 16)}.ui\:min-h-40{min-height:calc(var(--ui-spacing) * 40)}.ui\:min-h-96{min-height:calc(var(--ui-spacing) * 96)}.ui\:min-h-\[32rem\]{min-height:32rem}.ui\:min-h-\[44px\]{min-height:44px}.ui\:min-h-\[63px\]{min-height:63px}.ui\:min-h-\[240px\]{min-height:240px}.ui\:min-h-\[320px\]{min-height:320px}.ui\:min-h-\[calc\(100dvh-3rem\)\]{min-height:calc(100dvh - 3rem)}.ui\:min-h-\[calc\(100vh-48px\)\]{min-height:calc(100vh - 48px)}.ui\:min-h-dvh{min-height:100dvh}.ui\:min-h-screen{min-height:100vh}.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\.5{width:calc(var(--ui-spacing) * 1.5)}.ui\:w-1\/4{width:25%}.ui\:w-2{width:calc(var(--ui-spacing) * 2)}.ui\:w-2\.5{width:calc(var(--ui-spacing) * 2.5)}.ui\:w-2\/4{width:50%}.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-6{width:calc(var(--ui-spacing) * 6)}.ui\:w-7{width:calc(var(--ui-spacing) * 7)}.ui\:w-8{width:calc(var(--ui-spacing) * 8)}.ui\:w-10{width:calc(var(--ui-spacing) * 10)}.ui\:w-14{width:calc(var(--ui-spacing) * 14)}.ui\:w-24{width:calc(var(--ui-spacing) * 24)}.ui\:w-28{width:calc(var(--ui-spacing) * 28)}.ui\:w-40{width:calc(var(--ui-spacing) * 40)}.ui\:w-52{width:calc(var(--ui-spacing) * 52)}.ui\:w-64{width:calc(var(--ui-spacing) * 64)}.ui\:w-72{width:calc(var(--ui-spacing) * 72)}.ui\:w-88{width:calc(var(--ui-spacing) * 88)}.ui\:w-\[1\.2rem\]{width:1.2rem}.ui\:w-\[25px\]{width:25px}.ui\:w-\[50px\]{width:50px}.ui\:w-\[80\%\]{width:80%}.ui\:w-\[100px\]{width:100px}.ui\:w-\[260px\]{width:260px}.ui\:w-auto{width:auto}.ui\:w-fit{width:fit-content}.ui\:w-fit\!{width:fit-content!important}.ui\:w-full{width:100%}.ui\:w-full\!{width:100%!important}.ui\:w-max{width:max-content}.ui\:w-screen{width:100vw}.ui\:max-w-\(--skeleton-width\){max-width:var(--skeleton-width)}.ui\:max-w-2xl{max-width:var(--ui-container-2xl)}.ui\:max-w-3xl{max-width:var(--ui-container-3xl)}.ui\:max-w-4xl{max-width:var(--ui-container-4xl)}.ui\:max-w-5xl{max-width:var(--ui-container-5xl)}.ui\:max-w-6{max-width:calc(var(--ui-spacing) * 6)}.ui\:max-w-7xl{max-width:var(--ui-container-7xl)}.ui\:max-w-40{max-width:calc(var(--ui-spacing) * 40)}.ui\:max-w-80{max-width:calc(var(--ui-spacing) * 80)}.ui\:max-w-\[16rem\]{max-width:16rem}.ui\:max-w-\[55vw\]{max-width:55vw}.ui\:max-w-\[60\%\]{max-width:60%}.ui\:max-w-\[200px\]{max-width:200px}.ui\:max-w-\[300px\]{max-width:300px}.ui\:max-w-\[320px\]{max-width:320px}.ui\:max-w-\[1200px\]{max-width:1200px}.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-md{max-width:var(--ui-container-md)}.ui\:max-w-none{max-width:none}.ui\:max-w-sm{max-width:var(--ui-container-sm)}.ui\:max-w-xl{max-width:var(--ui-container-xl)}.ui\:max-w-xs{max-width:var(--ui-container-xs)}.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-7{min-width:calc(var(--ui-spacing) * 7)}.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-18{min-width:calc(var(--ui-spacing) * 18)}.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-\[5rem\]{min-width:5rem}.ui\:min-w-\[9rem\]{min-width:9rem}.ui\:min-w-\[min\(24rem\,calc\(100vw-5rem\)\)\]{min-width:min(24rem,100vw - 5rem)}.ui\:min-w-full{min-width:100%}.ui\:flex-1{flex:1}.ui\:shrink{flex-shrink: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\:origin-center{transform-origin:50%}.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-4{--tw-translate-x:calc(var(--ui-spacing) * 4);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-4{--tw-translate-y:calc(var(--ui-spacing) * 4);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\:\[translate\:0_0\]{translate:0}.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-5{rotate:5deg}.ui\:rotate-45{rotate:45deg}.ui\:rotate-90{rotate:90deg}.ui\:\[transform\:scaleX\(-1\)\]{transform:scaleX(-1)}.ui\:transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.ui\:transform-gpu{transform:translateZ(0) var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.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-magicslide{animation:magicslide var(--speed) ease-in-out infinite alternate}.ui\:animate-meteor{animation:5s linear infinite meteor}.ui\:animate-pulse{animation:var(--ui-animate-pulse)}.ui\:animate-shine{animation:2s linear infinite shine}.ui\:animate-spin{animation:var(--ui-animate-spin)}.ui\:animate-spin-around{animation:spin-around calc(var(--speed) * 2) infinite linear}.ui\:cursor-auto{cursor:auto}.ui\:cursor-col-resize{cursor:col-resize}.ui\:cursor-default{cursor:default}.ui\:cursor-default\!{cursor:default!important}.ui\:cursor-grab{cursor:grab}.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-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.ui\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.ui\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.ui\:grid-cols-\[0_1fr\]{grid-template-columns:0 1fr}.ui\:grid-cols-\[6px_6px\]{grid-template-columns:6px 6px}.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-nowrap\!{flex-wrap:nowrap!important}.ui\:flex-wrap{flex-wrap:wrap}.ui\:place-content-center{place-content:center}.ui\:place-items-center{place-items:center}.ui\:items-baseline{align-items:baseline}.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\:justify-start\!{justify-content:flex-start!important}.ui\:justify-items-center{justify-items:center}.ui\:justify-items-start{justify-items: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-5{gap:calc(var(--ui-spacing) * 5)}.ui\:gap-6{gap:calc(var(--ui-spacing) * 6)}.ui\:gap-7{gap:calc(var(--ui-spacing) * 7)}.ui\:gap-8{gap:calc(var(--ui-spacing) * 8)}.ui\:gap-16{gap:calc(var(--ui-spacing) * 16)}:where(.ui\:space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--ui-spacing) * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--ui-spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}:where(.ui\:space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--ui-spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--ui-spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.ui\:space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--ui-spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--ui-spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.ui\:space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--ui-spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--ui-spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.ui\:space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--ui-spacing) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--ui-spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}.ui\:gap-x-4{column-gap:calc(var(--ui-spacing) * 4)}.ui\:gap-x-6{column-gap:calc(var(--ui-spacing) * 6)}:where(.ui\:space-x-8>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--ui-spacing) * 8) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--ui-spacing) * 8) * calc(1 - var(--tw-space-x-reverse)))}.ui\:gap-y-0\.5{row-gap:calc(var(--ui-spacing) * .5)}.ui\:gap-y-1{row-gap:calc(var(--ui-spacing) * 1)}.ui\:gap-y-2{row-gap:calc(var(--ui-spacing) * 2)}.ui\:self-center{align-self:center}.ui\:self-start{align-self:flex-start}.ui\:self-stretch{align-self:stretch}.ui\:justify-self-end{justify-self:flex-end}.ui\:truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.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\:overflow-y-hidden{overflow-y:hidden}.ui\:scroll-smooth{scroll-behavior:smooth}.ui\:rounded{border-radius:.25rem}.ui\:rounded-\(--radius\){border-radius:var(--radius)}.ui\:rounded-2xl{border-radius:var(--ui-radius-2xl)}.ui\:rounded-3xl{border-radius:var(--ui-radius-3xl)}.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-md\!{border-radius:calc(var(--radius) - 2px)!important}.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\:rounded-t-xl{border-top-left-radius:calc(var(--radius) + 4px);border-top-right-radius:calc(var(--radius) + 4px)}.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-0\!{border-style:var(--tw-border-style)!important;border-width:0!important}.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-y-\[10px\]{border-block-style:var(--tw-border-style);border-block-width:10px}.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-l-4{border-left-style:var(--tw-border-style);border-left-width:4px}.ui\:border-l-\[16px\]{border-left-style:var(--tw-border-style);border-left-width:16px}.ui\:border-dashed{--tw-border-style:dashed;border-style:dashed}.ui\:border-none{--tw-border-style:none;border-style:none}.ui\:border-solid{--tw-border-style:solid;border-style:solid}.ui\:border-\(--color-border\){border-color:var(--color-border)}.ui\:border-amber-200{border-color:var(--ui-color-amber-200)}.ui\:border-amber-400{border-color:var(--ui-color-amber-400)}.ui\:border-background\/40{border-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:border-background\/40{border-color:color-mix(in oklab, var(--background) 40%, transparent)}}.ui\:border-border,.ui\:border-border\/40{border-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.ui\:border-border\/40{border-color:color-mix(in oklab, var(--border) 40%, transparent)}}.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-border\/60{border-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.ui\:border-border\/60{border-color:color-mix(in oklab, var(--border) 60%, transparent)}}.ui\:border-emerald-300{border-color:var(--ui-color-emerald-300)}.ui\:border-emerald-400{border-color:var(--ui-color-emerald-400)}.ui\:border-emerald-500{border-color:var(--ui-color-emerald-500)}.ui\:border-input{border-color:var(--input)}.ui\:border-muted{border-color:var(--muted)}.ui\:border-muted-foreground,.ui\:border-muted-foreground\/40{border-color:var(--muted-foreground)}@supports (color:color-mix(in lab, red, red)){.ui\:border-muted-foreground\/40{border-color:color-mix(in oklab, var(--muted-foreground) 40%, transparent)}}.ui\:border-neutral-800{border-color:var(--ui-color-neutral-800)}.ui\:border-primary,.ui\:border-primary\/30{border-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:border-primary\/30{border-color:color-mix(in oklab, var(--primary) 30%, transparent)}}.ui\:border-primary\/40{border-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:border-primary\/40{border-color:color-mix(in oklab, var(--primary) 40%, transparent)}}.ui\:border-red-500{border-color:var(--ui-color-red-500)}.ui\:border-sidebar-border{border-color:var(--sidebar-border)}.ui\:border-sky-200{border-color:var(--ui-color-sky-200)}.ui\:border-transparent{border-color:#0000}.ui\:border-white\/10{border-color:var(--ui-color-white)}@supports (color:color-mix(in lab, red, red)){.ui\:border-white\/10{border-color:color-mix(in oklab, var(--ui-color-white) 10%, transparent)}}.ui\:border-y-transparent{border-block-color:#0000}.ui\:border-l-current{border-left-color:currentColor}.ui\:border-l-foreground{border-left-color:var(--foreground)}.ui\:border-l-transparent{border-left-color:#0000}.ui\:bg-\(--color-bg\){background-color:var(--color-bg)}.ui\:bg-accent{background-color:var(--accent)}.ui\:bg-amber-50,.ui\:bg-amber-50\/30{background-color:var(--ui-color-amber-50)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-amber-50\/30{background-color:color-mix(in oklab, var(--ui-color-amber-50) 30%, transparent)}}.ui\:bg-amber-500{background-color:var(--ui-color-amber-500)}.ui\:bg-amber-500\!{background-color:var(--ui-color-amber-500)!important}.ui\:bg-amber-600{background-color:var(--ui-color-amber-600)}.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-background\/90{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-background\/90{background-color:color-mix(in oklab, var(--background) 90%, transparent)}}.ui\:bg-background\/95{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-background\/95{background-color:color-mix(in oklab, var(--background) 95%, transparent)}}.ui\:bg-black,.ui\:bg-black\/10{background-color:var(--ui-color-black)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-black\/10{background-color:color-mix(in oklab, var(--ui-color-black) 10%, transparent)}}.ui\:bg-black\/40{background-color:var(--ui-color-black)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-black\/40{background-color:color-mix(in oklab, var(--ui-color-black) 40%, 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-blue-600{background-color:var(--ui-color-blue-600)}.ui\:bg-blue-600\!{background-color:var(--ui-color-blue-600)!important}.ui\:bg-border{background-color:var(--border)}.ui\:bg-card{background-color:var(--card)}.ui\:bg-current{background-color:currentColor}.ui\:bg-destructive{background-color:var(--destructive)}.ui\:bg-emerald-50\/20{background-color:var(--ui-color-emerald-50)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-emerald-50\/20{background-color:color-mix(in oklab, var(--ui-color-emerald-50) 20%, transparent)}}.ui\:bg-emerald-50\/30{background-color:var(--ui-color-emerald-50)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-emerald-50\/30{background-color:color-mix(in oklab, var(--ui-color-emerald-50) 30%, transparent)}}.ui\:bg-emerald-50\/40{background-color:var(--ui-color-emerald-50)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-emerald-50\/40{background-color:color-mix(in oklab, var(--ui-color-emerald-50) 40%, transparent)}}.ui\:bg-emerald-500{background-color:var(--ui-color-emerald-500)}.ui\:bg-emerald-500\!{background-color:var(--ui-color-emerald-500)!important}.ui\:bg-emerald-600{background-color:var(--ui-color-emerald-600)}.ui\:bg-foreground{background-color:var(--foreground)}.ui\:bg-gray-200{background-color:var(--ui-color-gray-200)}.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{background-color:var(--muted)}.ui\:bg-muted-foreground\/30{background-color:var(--muted-foreground)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-muted-foreground\/30{background-color:color-mix(in oklab, var(--muted-foreground) 30%, transparent)}}.ui\:bg-muted\/10{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-muted\/10{background-color:color-mix(in oklab, var(--muted) 10%, transparent)}}.ui\:bg-muted\/30{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-muted\/30{background-color:color-mix(in oklab, var(--muted) 30%, transparent)}}.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\/5{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-primary\/5{background-color:color-mix(in oklab, var(--primary) 5%, transparent)}}.ui\:bg-primary\/10{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-primary\/10{background-color:color-mix(in oklab, var(--primary) 10%, transparent)}}.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-primary\/60{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-primary\/60{background-color:color-mix(in oklab, var(--primary) 60%, transparent)}}.ui\:bg-red-50\/40{background-color:var(--ui-color-red-50)}@supports (color:color-mix(in lab, red, red)){.ui\:bg-red-50\/40{background-color:color-mix(in oklab, var(--ui-color-red-50) 40%, transparent)}}.ui\:bg-red-500{background-color:var(--ui-color-red-500)}.ui\:bg-rose-500{background-color:var(--ui-color-rose-500)}.ui\:bg-rose-500\!{background-color:var(--ui-color-rose-500)!important}.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-sky-50{background-color:var(--ui-color-sky-50)}.ui\:bg-slate-500{background-color:var(--ui-color-slate-500)}.ui\:bg-slate-500\!{background-color:var(--ui-color-slate-500)!important}.ui\:bg-transparent{background-color:#0000}.ui\:bg-violet-500{background-color:var(--ui-color-violet-500)}.ui\:bg-violet-500\!{background-color:var(--ui-color-violet-500)!important}.ui\:bg-white{background-color:var(--ui-color-white)}.ui\:bg-yellow-500{background-color:var(--ui-color-yellow-500)}.ui\:bg-linear-to-r{--tw-gradient-position:to right}@supports (background-image:linear-gradient(in lab, red, red)){.ui\:bg-linear-to-r{--tw-gradient-position:to right in oklab}}.ui\:bg-linear-to-r{background-image:linear-gradient(var(--tw-gradient-stops))}.ui\:bg-linear-to-t{--tw-gradient-position:to top}@supports (background-image:linear-gradient(in lab, red, red)){.ui\:bg-linear-to-t{--tw-gradient-position:to top in oklab}}.ui\:bg-linear-to-t{background-image:linear-gradient(var(--tw-gradient-stops))}.ui\:bg-\[linear-gradient\(110deg\,\#000103\,45\%\,\#1e2631\,55\%\,\#000103\)\]{background-image:linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)}.ui\:from-background{--tw-gradient-from:var(--background);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.ui\:from-pink-500{--tw-gradient-from:var(--ui-color-pink-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.ui\:from-slate-500{--tw-gradient-from:var(--ui-color-slate-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.ui\:via-blue-600\/30{--tw-gradient-via:var(--ui-color-blue-600)}@supports (color:color-mix(in lab, red, red)){.ui\:via-blue-600\/30{--tw-gradient-via:color-mix(in oklab, var(--ui-color-blue-600) 30%, transparent)}}.ui\:via-blue-600\/30{--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.ui\:to-orange-500{--tw-gradient-to:var(--ui-color-orange-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.ui\:to-transparent{--tw-gradient-to:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.ui\:bg-\[length\:200\%_100\%\]{background-size:200% 100%}.ui\:bg-clip-padding{background-clip:padding-box}.ui\:fill-amber-400{fill:var(--ui-color-amber-400)}.ui\:fill-current{fill:currentColor}.ui\:fill-none{fill:none}.ui\:fill-primary{fill:var(--primary)}.ui\:object-cover{object-fit:cover}.ui\:p-0{padding:calc(var(--ui-spacing) * 0)}.ui\:p-0\!{padding:calc(var(--ui-spacing) * 0)!important}.ui\:p-0\.5{padding:calc(var(--ui-spacing) * .5)}.ui\:p-1{padding:calc(var(--ui-spacing) * 1)}.ui\:p-1\!{padding:calc(var(--ui-spacing) * 1)!important}.ui\:p-1\.5{padding:calc(var(--ui-spacing) * 1.5)}.ui\:p-2{padding:calc(var(--ui-spacing) * 2)}.ui\:p-3{padding:calc(var(--ui-spacing) * 3)}.ui\:p-3\!{padding:calc(var(--ui-spacing) * 3)!important}.ui\:p-4{padding:calc(var(--ui-spacing) * 4)}.ui\:p-6{padding:calc(var(--ui-spacing) * 6)}.ui\:p-8{padding:calc(var(--ui-spacing) * 8)}.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-5{padding-inline:calc(var(--ui-spacing) * 5)}.ui\:px-6{padding-inline:calc(var(--ui-spacing) * 6)}.ui\:px-8{padding-inline:calc(var(--ui-spacing) * 8)}.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-5{padding-block:calc(var(--ui-spacing) * 5)}.ui\:py-6{padding-block:calc(var(--ui-spacing) * 6)}.ui\:py-8{padding-block:calc(var(--ui-spacing) * 8)}.ui\:py-10{padding-block:calc(var(--ui-spacing) * 10)}.ui\:py-12{padding-block:calc(var(--ui-spacing) * 12)}.ui\:py-16{padding-block:calc(var(--ui-spacing) * 16)}.ui\:py-20{padding-block:calc(var(--ui-spacing) * 20)}.ui\:py-24{padding-block:calc(var(--ui-spacing) * 24)}.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{padding-top:calc(var(--ui-spacing) * 1)}.ui\:pt-1\.5{padding-top:calc(var(--ui-spacing) * 1.5)}.ui\:pt-3{padding-top:calc(var(--ui-spacing) * 3)}.ui\:pt-3\!{padding-top:calc(var(--ui-spacing) * 3)!important}.ui\:pt-4{padding-top:calc(var(--ui-spacing) * 4)}.ui\:pt-6{padding-top:calc(var(--ui-spacing) * 6)}.ui\:pt-8{padding-top:calc(var(--ui-spacing) * 8)}.ui\:pr-1{padding-right:calc(var(--ui-spacing) * 1)}.ui\:pr-2{padding-right:calc(var(--ui-spacing) * 2)}.ui\:pr-4{padding-right:calc(var(--ui-spacing) * 4)}.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-2{padding-bottom:calc(var(--ui-spacing) * 2)}.ui\:pb-3{padding-bottom:calc(var(--ui-spacing) * 3)}.ui\:pb-4{padding-bottom:calc(var(--ui-spacing) * 4)}.ui\:pb-10{padding-bottom:calc(var(--ui-spacing) * 10)}.ui\:pb-16{padding-bottom:calc(var(--ui-spacing) * 16)}.ui\:pb-24{padding-bottom:calc(var(--ui-spacing) * 24)}.ui\:pb-\[max\(env\(safe-area-inset-bottom\)\,1rem\)\]{padding-bottom:max(env(safe-area-inset-bottom), 1rem)}.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\:text-right{text-align:right}.ui\:align-middle{vertical-align:middle}.ui\:font-mono{font-family:var(--ui-font-mono)}.ui\:font-sans{font-family:var(--ui-font-sans)}.ui\:font-serif{font-family:var(--ui-font-serif)}.ui\:text-2xl{font-size:var(--ui-text-2xl);line-height:var(--tw-leading,var(--ui-text-2xl--line-height))}.ui\:text-3xl{font-size:var(--ui-text-3xl);line-height:var(--tw-leading,var(--ui-text-3xl--line-height))}.ui\:text-4xl{font-size:var(--ui-text-4xl);line-height:var(--tw-leading,var(--ui-text-4xl--line-height))}.ui\:text-5xl{font-size:var(--ui-text-5xl);line-height:var(--tw-leading,var(--ui-text-5xl--line-height))}.ui\:text-base{font-size:var(--ui-text-base);line-height:var(--tw-leading,var(--ui-text-base--line-height))}.ui\:text-base\!{font-size:var(--ui-text-base)!important;line-height:var(--tw-leading,var(--ui-text-base--line-height))!important}.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-xl{font-size:var(--ui-text-xl);line-height:var(--tw-leading,var(--ui-text-xl--line-height))}.ui\:text-xs{font-size:var(--ui-text-xs);line-height:var(--tw-leading,var(--ui-text-xs--line-height))}.ui\:text-\[0\.7rem\]{font-size:.7rem}.ui\:text-\[10px\]{font-size:10px}.ui\:text-\[11px\]{font-size:11px}.ui\:text-\[13px\]{font-size:13px}.ui\:leading-7{--tw-leading:calc(var(--ui-spacing) * 7);line-height:calc(var(--ui-spacing) * 7)}.ui\:leading-8{--tw-leading:calc(var(--ui-spacing) * 8);line-height:calc(var(--ui-spacing) * 8)}.ui\:leading-\[1\.1\]{--tw-leading:1.1;line-height:1.1}.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-relaxed{--tw-leading:var(--ui-leading-relaxed);line-height:var(--ui-leading-relaxed)}.ui\:leading-snug{--tw-leading:var(--ui-leading-snug);line-height:var(--ui-leading-snug)}.ui\:leading-tight{--tw-leading:var(--ui-leading-tight);line-height:var(--ui-leading-tight)}.ui\:font-black{--tw-font-weight:var(--ui-font-weight-black);font-weight:var(--ui-font-weight-black)}.ui\:font-bold{--tw-font-weight:var(--ui-font-weight-bold);font-weight:var(--ui-font-weight-bold)}.ui\:font-light{--tw-font-weight:var(--ui-font-weight-light);font-weight:var(--ui-font-weight-light)}.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-\[0\.18em\]{--tw-tracking:.18em;letter-spacing:.18em}.ui\:tracking-tight{--tw-tracking:var(--ui-tracking-tight);letter-spacing:var(--ui-tracking-tight)}.ui\:tracking-tighter{--tw-tracking:var(--ui-tracking-tighter);letter-spacing:var(--ui-tracking-tighter)}.ui\:tracking-wide{--tw-tracking:var(--ui-tracking-wide);letter-spacing:var(--ui-tracking-wide)}.ui\:tracking-wider{--tw-tracking:var(--ui-tracking-wider);letter-spacing:var(--ui-tracking-wider)}.ui\:tracking-widest{--tw-tracking:var(--ui-tracking-widest);letter-spacing:var(--ui-tracking-widest)}.ui\:text-balance{text-wrap:balance}.ui\:text-wrap{text-wrap:wrap}.ui\:break-words{overflow-wrap:break-word}.ui\:break-all{word-break:break-all}.ui\:text-ellipsis{text-overflow:ellipsis}.ui\:whitespace-nowrap{white-space:nowrap}.ui\:text-accent-foreground{color:var(--accent-foreground)}.ui\:text-amber-200{color:var(--ui-color-amber-200)}.ui\:text-amber-500{color:var(--ui-color-amber-500)}.ui\:text-amber-600{color:var(--ui-color-amber-600)}.ui\:text-amber-900{color:var(--ui-color-amber-900)}.ui\:text-background,.ui\:text-background\/60{color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:text-background\/60{color:color-mix(in oklab, var(--background) 60%, transparent)}}.ui\:text-background\/70{color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:text-background\/70{color:color-mix(in oklab, var(--background) 70%, transparent)}}.ui\:text-background\/80{color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:text-background\/80{color:color-mix(in oklab, var(--background) 80%, transparent)}}.ui\:text-card-foreground{color:var(--card-foreground)}.ui\:text-current{color:currentColor}.ui\:text-destructive{color:var(--destructive)}.ui\:text-emerald-600{color:var(--ui-color-emerald-600)}.ui\:text-foreground,.ui\:text-foreground\/70{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.ui\:text-foreground\/70{color:color-mix(in oklab, var(--foreground) 70%, transparent)}}.ui\:text-foreground\/72{color:var(--foreground)}@supports (color:color-mix(in lab, red, red)){.ui\:text-foreground\/72{color:color-mix(in oklab, var(--foreground) 72%, transparent)}}.ui\:text-green-500{color:var(--ui-color-green-500)}.ui\:text-muted-foreground,.ui\:text-muted-foreground\/60{color:var(--muted-foreground)}@supports (color:color-mix(in lab, red, red)){.ui\:text-muted-foreground\/60{color:color-mix(in oklab, var(--muted-foreground) 60%, transparent)}}.ui\:text-muted-foreground\/75{color:var(--muted-foreground)}@supports (color:color-mix(in lab, red, red)){.ui\:text-muted-foreground\/75{color:color-mix(in oklab, var(--muted-foreground) 75%, transparent)}}.ui\:text-popover-foreground{color:var(--popover-foreground)}.ui\:text-primary{color:var(--primary)}.ui\:text-primary\!{color:var(--primary)!important}.ui\:text-primary-foreground{color:var(--primary-foreground)}.ui\:text-red-500{color:var(--ui-color-red-500)}.ui\:text-red-600{color:var(--ui-color-red-600)}.ui\:text-red-700{color:var(--ui-color-red-700)}.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-sky-900{color:var(--ui-color-sky-900)}.ui\:text-white{color:var(--ui-color-white)}.ui\:text-white\!{color:var(--ui-color-white)!important}.ui\:capitalize{text-transform:capitalize}.ui\:uppercase{text-transform:uppercase}.ui\:tabular-nums{--tw-numeric-spacing:tabular-nums;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.ui\:no-underline{text-decoration-line:none}.ui\:underline{text-decoration-line:underline}.ui\:underline-offset-2{text-underline-offset:2px}.ui\:underline-offset-4{text-underline-offset:4px}.ui\:opacity-0{opacity:0}.ui\:opacity-10{opacity:.1}.ui\:opacity-40{opacity:.4}.ui\:opacity-50{opacity:.5}.ui\:opacity-60{opacity:.6}.ui\:opacity-70{opacity:.7}.ui\:opacity-90{opacity:.9}.ui\:opacity-100{opacity:1}.ui\:opacity-\[0\.06\]{opacity:.06}.ui\:opacity-\[0\.08\]{opacity:.08}.ui\:opacity-\[0\.15\]{opacity:.15}.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-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);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_\#ffffff10\]{--tw-shadow:0 0 0 1px var(--tw-shadow-color,#ffffff10);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-\[inset_0_-8px_10px_\#ffffff1f\]{--tw-shadow:inset 0 -8px 10px var(--tw-shadow-color,#ffffff1f);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-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.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\:shadow-primary\/20{--tw-shadow-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:shadow-primary\/20{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--primary) 20%, transparent) var(--tw-shadow-alpha), transparent)}}.ui\:ring-accent{--tw-ring-color:var(--accent)}.ui\:ring-background{--tw-ring-color:var(--background)}.ui\:ring-border,.ui\:ring-border\/50{--tw-ring-color:var(--border)}@supports (color:color-mix(in lab, red, red)){.ui\:ring-border\/50{--tw-ring-color:color-mix(in oklab, var(--border) 50%, transparent)}}.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\:blur-\[2px\]{--tw-blur:blur(2px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.ui\:brightness-200{--tw-brightness:brightness(200%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.ui\:drop-shadow-none{--tw-drop-shadow: ;filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.ui\:grayscale{--tw-grayscale:grayscale(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.ui\:backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.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\:backdrop-blur-xl{--tw-backdrop-blur:blur(var(--ui-blur-xl));-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}.ui\:\[background\:conic-gradient\(from_calc\(270deg-\(var\(--spread\)\*0\.5\)\)\,transparent_0\,var\(--shimmer-color\)_var\(--spread\)\,transparent_var\(--spread\)\)\]{background:conic-gradient(from calc(270deg - (var(--spread) * .5)),transparent 0,var(--shimmer-color) var(--spread),transparent var(--spread))}.ui\:\[background\:var\(--bg\)\]{background:var(--bg)}.ui\:\[mask\:none\]{-webkit-mask:none;mask:none}.ui\:ring-inset{--tw-ring-inset:inset}:is(.ui\:\*\:w-full>*){width:100%}.ui\:group-focus-within\/menu-item\:opacity-100:is(:where(.ui\:group\/menu-item):focus-within *){opacity:1}@media (hover:hover){.ui\:group-hover\:scale-\[1\.02\]:is(:where(.ui\:group):hover *){scale:1.02}.ui\:group-hover\:bg-muted-foreground\/15:is(:where(.ui\:group):hover *){background-color:var(--muted-foreground)}@supports (color:color-mix(in lab, red, red)){.ui\:group-hover\:bg-muted-foreground\/15:is(:where(.ui\:group):hover *){background-color:color-mix(in oklab, var(--muted-foreground) 15%, transparent)}}.ui\:group-hover\:bg-primary:is(:where(.ui\:group):hover *){background-color:var(--primary)}.ui\:group-hover\:text-foreground:is(:where(.ui\:group):hover *){color:var(--foreground)}.ui\:group-hover\:text-primary:is(:where(.ui\:group):hover *){color:var(--primary)}.ui\:group-hover\:text-primary-foreground:is(:where(.ui\:group):hover *){color:var(--primary-foreground)}.ui\:group-hover\:opacity-100:is(:where(.ui\:group):hover *){opacity:1}.ui\:group-hover\:shadow-\[inset_0_-6px_10px_\#ffffff3f\]:is(:where(.ui\:group):hover *){--tw-shadow:inset 0 -6px 10px var(--tw-shadow-color,#ffffff3f);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-hover\/menu-item\:opacity-100:is(:where(.ui\:group\/menu-item):hover *){opacity:1}}.ui\:group-focus-visible\:opacity-100:is(:where(.ui\:group):focus-visible *){opacity:1}.ui\:group-active\:shadow-\[inset_0_-10px_10px_\#ffffff3f\]:is(:where(.ui\:group):active *){--tw-shadow:inset 0 -10px 10px var(--tw-shadow-color,#ffffff3f);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-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\]\:pointer-events-none:is(:where(.ui\:group)[data-collapsible=icon] *){pointer-events:none}.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}.ui\:focus-within\:border-ring:focus-within{border-color:var(--ring)}.ui\:focus-within\:ring-\[3px\]:focus-within{--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-within\:ring-ring\/50:focus-within{--tw-ring-color:var(--ring)}@supports (color:color-mix(in lab, red, red)){.ui\:focus-within\:ring-ring\/50:focus-within{--tw-ring-color:color-mix(in oklab, var(--ring) 50%, transparent)}}@media (hover:hover){.ui\:hover\:-translate-y-1:hover{--tw-translate-y:calc(var(--ui-spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:hover\:cursor-pointer:hover{cursor:pointer}.ui\:hover\:border:hover{border-style:var(--tw-border-style);border-width:1px}.ui\:hover\:border-background\/60:hover{border-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:hover\:border-background\/60:hover{border-color:color-mix(in oklab, var(--background) 60%, transparent)}}.ui\:hover\:border-border:hover{border-color:var(--border)}.ui\:hover\:border-primary:hover,.ui\:hover\:border-primary\/40:hover{border-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:hover\:border-primary\/40:hover{border-color:color-mix(in oklab, var(--primary) 40%, transparent)}}.ui\:hover\:bg-accent:hover,.ui\:hover\:bg-accent\/25:hover{background-color:var(--accent)}@supports (color:color-mix(in lab, red, red)){.ui\:hover\:bg-accent\/25:hover{background-color:color-mix(in oklab, var(--accent) 25%, transparent)}}.ui\:hover\:bg-amber-500\/10:hover{background-color:var(--ui-color-amber-500)}@supports (color:color-mix(in lab, red, red)){.ui\:hover\:bg-amber-500\/10:hover{background-color:color-mix(in oklab, var(--ui-color-amber-500) 10%, transparent)}}.ui\:hover\:bg-background\/10:hover{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:hover\:bg-background\/10:hover{background-color:color-mix(in oklab, var(--background) 10%, transparent)}}.ui\:hover\:bg-black\/20:hover{background-color:var(--ui-color-black)}@supports (color:color-mix(in lab, red, red)){.ui\:hover\:bg-black\/20:hover{background-color:color-mix(in oklab, var(--ui-color-black) 20%, transparent)}}.ui\:hover\:bg-muted:hover,.ui\:hover\:bg-muted\/50:hover{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.ui\:hover\:bg-muted\/50:hover{background-color:color-mix(in oklab, var(--muted) 50%, transparent)}}.ui\:hover\:bg-primary:hover,.ui\:hover\:bg-primary\/5:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:hover\:bg-primary\/5:hover{background-color:color-mix(in oklab, var(--primary) 5%, transparent)}}.ui\:hover\:bg-primary\/90:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:hover\:bg-primary\/90:hover{background-color:color-mix(in oklab, var(--primary) 90%, transparent)}}.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-background:hover{color:var(--background)}.ui\:hover\:text-foreground:hover{color:var(--foreground)}.ui\:hover\:text-muted-foreground:hover{color:var(--muted-foreground)}.ui\:hover\:text-primary:hover{color:var(--primary)}.ui\:hover\:text-primary-foreground:hover{color:var(--primary-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-2xs:hover{--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\: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\:shadow-md:hover{--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\:hover\:shadow-xl:hover{--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\:hover\:shadow-primary\/5:hover{--tw-shadow-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.ui\:hover\:shadow-primary\/5:hover{--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--primary) 5%, transparent) var(--tw-shadow-alpha), transparent)}}.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-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)!important;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)!important}.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-0\!:focus-visible{--tw-ring-offset-width:0px!important;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important}.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\:focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.ui\:active\:translate-y-px:active{--tw-translate-y:1px;translate:var(--tw-translate-x) var(--tw-translate-y)}.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-30:disabled{opacity:.3}.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\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\]:has(>svg){grid-template-columns:calc(var(--spacing) * 4) 1fr}.ui\:has-\[\>svg\]\:gap-x-3:has(>svg){column-gap:calc(var(--ui-spacing) * 3)}.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-primary[data-state=on]{background-color:var(--primary)}.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)}.ui\:data-\[state\=on\]\:text-primary-foreground[data-state=on]{color:var(--primary-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)}@supports ((-webkit-backdrop-filter:var(--tw)) or (backdrop-filter:var(--tw))){.ui\:supports-\[backdrop-filter\]\:bg-background\/80{background-color:var(--background)}@supports (color:color-mix(in lab, red, red)){.ui\:supports-\[backdrop-filter\]\:bg-background\/80{background-color:color-mix(in oklab, var(--background) 80%, transparent)}}}@media (min-width:40rem){.ui\:sm\:flex{display:flex}.ui\:sm\:inline-flex{display:inline-flex}.ui\:sm\:w-48{width:calc(var(--ui-spacing) * 48)}.ui\:sm\:w-64{width:calc(var(--ui-spacing) * 64)}.ui\:sm\:max-w-lg{max-width:var(--ui-container-lg)}.ui\:sm\:max-w-sm{max-width:var(--ui-container-sm)}.ui\:sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.ui\:sm\:flex-row{flex-direction:row}.ui\:sm\:items-end{align-items:flex-end}.ui\:sm\:justify-end{justify-content:flex-end}.ui\:sm\:gap-2\.5{gap:calc(var(--ui-spacing) * 2.5)}.ui\:sm\:p-6{padding:calc(var(--ui-spacing) * 6)}.ui\:sm\:px-6{padding-inline:calc(var(--ui-spacing) * 6)}.ui\:sm\:py-32{padding-block:calc(var(--ui-spacing) * 32)}.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\:sm\:text-3xl{font-size:var(--ui-text-3xl);line-height:var(--tw-leading,var(--ui-text-3xl--line-height))}.ui\:sm\:text-5xl{font-size:var(--ui-text-5xl);line-height:var(--tw-leading,var(--ui-text-5xl--line-height))}.ui\:sm\:text-xl{font-size:var(--ui-text-xl);line-height:var(--tw-leading,var(--ui-text-xl--line-height))}.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\:w-52{width:calc(var(--ui-spacing) * 52)}.ui\:md\:w-full{width:100%}.ui\:md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.ui\:md\:grid-cols-\[minmax\(0\,220px\)_1fr\]{grid-template-columns:minmax(0,220px) 1fr}.ui\:md\:flex-col{flex-direction:column}.ui\:md\:flex-row{flex-direction:row}.ui\:md\:items-start{align-items:flex-start}.ui\:md\:overflow-x-visible{overflow-x:visible}.ui\:md\:overflow-y-visible{overflow-y:visible}.ui\:md\:border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.ui\:md\:border-b-0{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.ui\:md\:p-12{padding:calc(var(--ui-spacing) * 12)}.ui\:md\:px-8{padding-inline:calc(var(--ui-spacing) * 8)}.ui\:md\:pb-24{padding-bottom:calc(var(--ui-spacing) * 24)}.ui\:md\:text-6xl{font-size:var(--ui-text-6xl);line-height:var(--tw-leading,var(--ui-text-6xl--line-height))}.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}}@media (min-width:64rem){.ui\:lg\:block{display:block}.ui\:lg\:hidden{display:none}.ui\:lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.ui\:lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.ui\:lg\:px-6{padding-inline:calc(var(--ui-spacing) * 6)}.ui\:lg\:px-8{padding-inline:calc(var(--ui-spacing) * 8)}.ui\:lg\:py-10{padding-block:calc(var(--ui-spacing) * 10)}.ui\:lg\:pb-12{padding-bottom:calc(var(--ui-spacing) * 12)}.ui\:lg\:text-5xl{font-size:var(--ui-text-5xl);line-height:var(--tw-leading,var(--ui-text-5xl--line-height))}.ui\:lg\:text-6xl{font-size:var(--ui-text-6xl);line-height:var(--tw-leading,var(--ui-text-6xl--line-height))}.ui\:lg\:text-7xl{font-size:var(--ui-text-7xl);line-height:var(--tw-leading,var(--ui-text-7xl--line-height))}}.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-amber-900:where(.dark,.dark *){border-color:var(--ui-color-amber-900)}.ui\:dark\:border-input:where(.dark,.dark *){border-color:var(--input)}.ui\:dark\:border-sky-900:where(.dark,.dark *){border-color:var(--ui-color-sky-900)}.ui\:dark\:border-slate-800:where(.dark,.dark *){border-color:var(--ui-color-slate-800)}.ui\:dark\:bg-amber-500:where(.dark,.dark *){background-color:var(--ui-color-amber-500)}.ui\:dark\:bg-amber-950:where(.dark,.dark *){background-color:var(--ui-color-amber-950)}.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-emerald-500:where(.dark,.dark *){background-color:var(--ui-color-emerald-500)}.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-sky-950:where(.dark,.dark *){background-color:var(--ui-color-sky-950)}.ui\:dark\:bg-slate-950:where(.dark,.dark *){background-color:var(--ui-color-slate-950)}.ui\:dark\:bg-transparent:where(.dark,.dark *){background-color:#0000}.ui\:dark\:fill-amber-400:where(.dark,.dark *){fill:var(--ui-color-amber-400)}.ui\:dark\:text-amber-50:where(.dark,.dark *){color:var(--ui-color-amber-50)}.ui\:dark\:text-amber-300:where(.dark,.dark *){color:var(--ui-color-amber-300)}.ui\:dark\:text-amber-400:where(.dark,.dark *){color:var(--ui-color-amber-400)}.ui\:dark\:text-amber-500\/40:where(.dark,.dark *){color:var(--ui-color-amber-500)}@supports (color:color-mix(in lab, red, red)){.ui\:dark\:text-amber-500\/40:where(.dark,.dark *){color:color-mix(in oklab, var(--ui-color-amber-500) 40%, transparent)}}.ui\:dark\:text-amber-950:where(.dark,.dark *){color:var(--ui-color-amber-950)}.ui\:dark\:text-emerald-950:where(.dark,.dark *){color:var(--ui-color-emerald-950)}.ui\:dark\:text-muted-foreground:where(.dark,.dark *){color:var(--muted-foreground)}.ui\:dark\:text-sky-50:where(.dark,.dark *){color:var(--ui-color-sky-50)}.ui\:dark\:text-white:where(.dark,.dark *){color:var(--ui-color-white)}@media (hover:hover){.ui\:dark\:hover\:border-input:where(.dark,.dark *):hover{border-color:var(--input)}.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\:\[\&_\.lc-area-path\]\:opacity-100 .lc-area-path{opacity:1}.ui\:\[\&_\.lc-axis-tick\]\:stroke-0 .lc-axis-tick{stroke-width:0}.ui\:\[\&_\.lc-axis-tick-label\]\:fill-muted-foreground .lc-axis-tick-label{fill:var(--muted-foreground)}.ui\:\[\&_\.lc-axis-tick-label\]\:font-normal .lc-axis-tick-label{--tw-font-weight:var(--ui-font-weight-normal);font-weight:var(--ui-font-weight-normal)}.ui\:\[\&_\.lc-grid-x-radial-circle\]\:stroke-border .lc-grid-x-radial-circle,.ui\:\[\&_\.lc-grid-x-radial-line\]\:stroke-border .lc-grid-x-radial-line,.ui\:\[\&_\.lc-grid-y-radial-circle\]\:stroke-border .lc-grid-y-radial-circle,.ui\:\[\&_\.lc-grid-y-radial-line\]\:stroke-border .lc-grid-y-radial-line{stroke:var(--border)}.ui\:\[\&_\.lc-highlight-line\]\:stroke-0 .lc-highlight-line{stroke-width:0}.ui\:\[\&_\.lc-highlight-line\]\:opacity-100 .lc-highlight-line,.ui\:\[\&_\.lc-highlight-point\]\:opacity-100 .lc-highlight-point{opacity:1}.ui\:\[\&_\.lc-labels-text\:not\(\[fill\]\)\]\:fill-foreground .lc-labels-text:not([fill]){fill:var(--foreground)}.ui\:\[\&_\.lc-layout-svg-g\]\:fill-transparent .lc-layout-svg-g{fill:#0000}.ui\:\[\&_\.lc-legend-swatch\]\:size-2\.5 .lc-legend-swatch{width:calc(var(--ui-spacing) * 2.5);height:calc(var(--ui-spacing) * 2.5)}.ui\:\[\&_\.lc-legend-swatch\]\:rounded-\[2px\] .lc-legend-swatch{border-radius:2px}.ui\:\[\&_\.lc-legend-swatch-button\]\:items-center .lc-legend-swatch-button{align-items:center}.ui\:\[\&_\.lc-legend-swatch-button\]\:gap-1\.5 .lc-legend-swatch-button{gap:calc(var(--ui-spacing) * 1.5)}.ui\:\[\&_\.lc-legend-swatch-group\]\:items-center .lc-legend-swatch-group{align-items:center}.ui\:\[\&_\.lc-legend-swatch-group\]\:gap-4 .lc-legend-swatch-group{gap:calc(var(--ui-spacing) * 4)}.ui\:\[\&_\.lc-line\]\:stroke-border\/50 .lc-line{stroke:var(--border)}@supports (color:color-mix(in lab, red, red)){.ui\:\[\&_\.lc-line\]\:stroke-border\/50 .lc-line{stroke:color-mix(in oklab, var(--border) 50%, transparent)}}.ui\:\[\&_\.lc-root-container\]\:w-full .lc-root-container{width:100%}.ui\:\[\&_\.lc-rule-x-line\:not\(\.lc-grid-x-rule\)\]\:stroke-0 .lc-rule-x-line:not(.lc-grid-x-rule),.ui\:\[\&_\.lc-rule-y-line\:not\(\.lc-grid-y-rule\)\]\:stroke-0 .lc-rule-y-line:not(.lc-grid-y-rule){stroke-width:0}.ui\:\[\&_\.lc-spline-path\]\:opacity-100 .lc-spline-path{opacity:1}.ui\:\[\&_\.lc-text\]\:text-xs .lc-text{font-size:var(--ui-text-xs);line-height:var(--tw-leading,var(--ui-text-xs--line-height))}.ui\:\[\&_\.lc-text-svg\]\:overflow-visible .lc-text-svg{overflow:visible}.ui\:\[\&_\.lc-tooltip-rects-g\]\:fill-transparent .lc-tooltip-rects-g{fill:#0000}.ui\:\[\&_\.stroke-white\]\:stroke-transparent .stroke-white{stroke:#0000}.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\:\[\&_p\]\:leading-relaxed p{--tw-leading:var(--ui-leading-relaxed);line-height:var(--ui-leading-relaxed)}.ui\:\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.ui\:\[\&_svg\]\:size-8\! svg{width:calc(var(--ui-spacing) * 8)!important;height:calc(var(--ui-spacing) * 8)!important}.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\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*=text-]){color:var(--muted-foreground)}.ui\:\[\&_svg\:not\(\[class\*\=\'ui\:size-\'\]\)\]\:size-4 svg:not([class*=ui\:size-]){width:calc(var(--ui-spacing) * 4);height:calc(var(--ui-spacing) * 4)}.ui\:\[\&_svg\:not\(\[class\*\=\'ui\:size-\'\]\)\]\:size-6 svg:not([class*=ui\:size-]){width:calc(var(--ui-spacing) * 6);height:calc(var(--ui-spacing) * 6)}.ui\:\[\&_text\]\:stroke-transparent text{stroke:#0000}.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\:\[\&\>\[data-slot\=field-label\]\]\:flex-auto>[data-slot=field-label]{flex:auto}.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\*\=\'ui\:w-\'\]\)\]\:w-fit>[data-slot=select-trigger]:not([class*=ui\: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\]\:translate-y-0\.5>svg{--tw-translate-y:calc(var(--ui-spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.ui\:\[\&\>svg\]\:text-current>svg{color:currentColor}.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\*\=\'ui\:size-\'\]\)\]\:size-3\.5>svg:not([class*=ui\:size-]){width:calc(var(--ui-spacing) * 3.5);height:calc(var(--ui-spacing) * 3.5)}.ui\:\[\&\>svg\:not\(\[class\*\=\'ui\:size-\'\]\)\]\:size-4>svg:not([class*=ui\: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-amber-600\/90:hover{background-color:var(--ui-color-amber-600)}@supports (color:color-mix(in lab, red, red)){a.ui\:\[a\&\]\:hover\:bg-amber-600\/90:hover{background-color:color-mix(in oklab, var(--ui-color-amber-600) 90%, transparent)}}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-emerald-600\/90:hover{background-color:var(--ui-color-emerald-600)}@supports (color:color-mix(in lab, red, red)){a.ui\:\[a\&\]\:hover\:bg-emerald-600\/90:hover{background-color:color-mix(in oklab, var(--ui-color-emerald-600) 90%, transparent)}}a.ui\:\[a\&\]\:hover\:bg-primary\/30:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){a.ui\:\[a\&\]\:hover\:bg-primary\/30:hover{background-color:color-mix(in oklab, var(--primary) 30%, 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\:text-primary:hover{color:var(--primary)}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}@keyframes border-beam{to{offset-distance:100%}}@keyframes meteor{0%{opacity:1;transform:rotate(215deg)translate(0)}70%{opacity:1}to{opacity:0;transform:rotate(215deg)translate(-500px)}}@keyframes shimmer-marketing{0%,90%,to{background-position:calc(-100% - var(--shimmer-width)) 0}30%,60%{background-position:calc(100% + var(--shimmer-width)) 0}}@keyframes spin-around{0%{transform:translateZ(0)rotate(0)}15%,35%{transform:translateZ(0)rotate(90deg)}65%,85%{transform:translateZ(0)rotate(270deg)}to{transform:translateZ(0)rotate(360deg)}}@keyframes magicslide{to{transform:translate(calc(100cqw - 100%))}}:root{--background:oklch(100% 0 0);--foreground:oklch(14.5% 0 0);--card:oklch(100% 0 0);--card-foreground:oklch(14.5% 0 0);--popover:oklch(100% 0 0);--popover-foreground:oklch(14.5% 0 0);--primary:oklch(48.8% .243 264.376);--primary-foreground:oklch(97% .014 254.604);--secondary:oklch(96.7% .001 286.375);--secondary-foreground:oklch(21% .006 285.885);--muted:oklch(97% 0 0);--muted-foreground:oklch(55.6% 0 0);--accent:oklch(97% 0 0);--accent-foreground:oklch(20.5% 0 0);--destructive:oklch(57.7% .245 27.325);--border:oklch(92.2% 0 0);--input:oklch(92.2% 0 0);--ring:oklch(70.8% 0 0);--chart-1:oklch(80.9% .105 251.813);--chart-2:oklch(62.3% .214 259.815);--chart-3:oklch(54.6% .245 262.881);--chart-4:oklch(48.8% .243 264.376);--chart-5:oklch(42.4% .199 265.638);--radius:.625rem;--sidebar:oklch(98.5% 0 0);--sidebar-foreground:oklch(14.5% 0 0);--sidebar-primary:oklch(54.6% .245 262.881);--sidebar-primary-foreground:oklch(97% .014 254.604);--sidebar-accent:oklch(97% 0 0);--sidebar-accent-foreground:oklch(20.5% 0 0);--sidebar-border:oklch(92.2% 0 0);--sidebar-ring:oklch(70.8% 0 0)}.dark{--background:oklch(14.5% 0 0);--foreground:oklch(98.5% 0 0);--card:oklch(20.5% 0 0);--card-foreground:oklch(98.5% 0 0);--popover:oklch(20.5% 0 0);--popover-foreground:oklch(98.5% 0 0);--primary:oklch(42.4% .199 265.638);--primary-foreground:oklch(97% .014 254.604);--secondary:oklch(27.4% .006 286.033);--secondary-foreground:oklch(98.5% 0 0);--muted:oklch(26.9% 0 0);--muted-foreground:oklch(70.8% 0 0);--accent:oklch(26.9% 0 0);--accent-foreground:oklch(98.5% 0 0);--destructive:oklch(70.4% .191 22.216);--border:oklch(100% 0 0/.1);--input:oklch(100% 0 0/.15);--ring:oklch(55.6% 0 0);--chart-1:oklch(80.9% .105 251.813);--chart-2:oklch(62.3% .214 259.815);--chart-3:oklch(54.6% .245 262.881);--chart-4:oklch(48.8% .243 264.376);--chart-5:oklch(42.4% .199 265.638);--sidebar:oklch(20.5% 0 0);--sidebar-foreground:oklch(98.5% 0 0);--sidebar-primary:oklch(62.3% .214 259.815);--sidebar-primary-foreground:oklch(97% .014 254.604);--sidebar-accent:oklch(26.9% 0 0);--sidebar-accent-foreground:oklch(98.5% 0 0);--sidebar-border:oklch(100% 0 0/.1);--sidebar-ring:oklch(55.6% 0 0)}@property --border-angle{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes border{to{--border-angle:360deg}}@keyframes flip{to{transform:rotate(360deg)}}@keyframes kitrotate{to{transform:rotate(90deg)}}@keyframes shine{0%{background-position:0 0}to{background-position:-200% 0}}.animate-gradient-border{background:linear-gradient(45deg, white, white) padding-box, conic-gradient(from var(--border-angle), #94a3b84d 75%, var(--primary,#1d4ee2) 82%, var(--primary-foreground,white) 88%, var(--primary,#1d4ee2) 92%, #94a3b84d 100%) border-box;border:1px solid #0000;transition:--border-angle 3s ease-in-out}.animate-gradient-border:hover{animation:4s ease-in-out infinite border}.dark.animate-gradient-border{background:linear-gradient(45deg, #000, #000) padding-box, conic-gradient(from var(--border-angle), #4755697a 75%, var(--primary,#1d4ee2) 82%, var(--primary-foreground,black) 88%, var(--primary,#1d4ee2) 92%, #4755697a 100%) border-box}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@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
diff --git a/packages/utils/src/agent-models/index.ts b/packages/utils/src/agent-models/index.ts
index acac0161..5204dde0 100644
--- a/packages/utils/src/agent-models/index.ts
+++ b/packages/utils/src/agent-models/index.ts
@@ -7,36 +7,59 @@
  *   even though it isn't currently exposed to users.
  */
 
-export const AGENT_MODEL_IDS = ['gemini-2.5-flash', 'gpt-4o', 'claude-sonnet-4-5'] as const;
+export const AGENT_MODEL_IDS = ['gemini-2.5-flash', 'gpt-5.4-mini', 'claude-sonnet-3-5', 'kimi-k2.6'] as const;
 
 export type AgentModelId = (typeof AGENT_MODEL_IDS)[number];
-export type AgentModelProvider = 'google' | 'openai' | 'anthropic';
+export type AgentModelProvider = 'google' | 'openai' | 'anthropic' | 'moonshot';
+export type AgentModelCostTier = 'low' | 'high';
 
 export interface AgentModelDescriptor {
   provider: AgentModelProvider;
   label: string;
   /** The exact model id passed to the provider SDK. */
   backendModelId: string;
+  /** Whether this model is available on the free plan. */
+  isFree: boolean;
+  /** Cost tier shown in the model picker — 'low' ($) or 'high' ($$$). */
+  costTier: AgentModelCostTier;
 }
 
 export const AGENT_MODELS: Record<AgentModelId, AgentModelDescriptor> = {
   'gemini-2.5-flash': {
     provider: 'google',
     label: 'Gemini 2.5 Flash',
-    backendModelId: 'gemini-2.5-flash'
+    backendModelId: 'gemini-2.5-flash',
+    isFree: true,
+    costTier: 'low'
   },
-  'gpt-4o': {
+  'gpt-5.4-mini': {
     provider: 'openai',
-    label: 'GPT-4o',
-    backendModelId: 'gpt-4o'
+    label: 'GPT-5.4 Mini',
+    backendModelId: 'gpt-5.4-mini',
+    isFree: false,
+    costTier: 'low'
   },
-  'claude-sonnet-4-5': {
+  'claude-sonnet-3-5': {
     provider: 'anthropic',
-    label: 'Claude Sonnet 4.5',
-    backendModelId: 'claude-sonnet-4-5-20250929'
+    label: 'Claude Sonnet 4.6',
+    backendModelId: 'claude-sonnet-4-6',
+    isFree: false,
+    costTier: 'high'
+  },
+  'kimi-k2.6': {
+    provider: 'moonshot',
+    label: 'Kimi K2.6',
+    backendModelId: 'kimi-k2.6',
+    isFree: true,
+    costTier: 'low'
   }
 };
 
-export const UI_PICKER_MODEL_IDS = ['gemini-2.5-flash', 'gpt-4o'] as const satisfies readonly AgentModelId[];
+export const UI_PICKER_MODEL_IDS = [
+  'gemini-2.5-flash',
+  'kimi-k2.6',
+  'gpt-5.4-mini',
+  'claude-sonnet-3-5'
+] as const satisfies readonly AgentModelId[];
 
 export const DEFAULT_PICKER_MODEL_ID: AgentModelId = 'gemini-2.5-flash';
diff --git a/packages/utils/src/constants/error-codes.ts b/packages/utils/src/constants/error-codes.ts
index 7dcd01f8..b3077334 100644
--- a/packages/utils/src/constants/error-codes.ts
+++ b/packages/utils/src/constants/error-codes.ts
@@ -94,6 +94,9 @@ export const ErrorCodes = {
   COURSE_IMPORT_FETCH_FAILED: 'COURSE_IMPORT_FETCH_FAILED',
   COURSE_IMPORT_UPDATE_FAILED: 'COURSE_IMPORT_UPDATE_FAILED',
   COURSE_IMPORT_PUBLISH_FAILED: 'COURSE_IMPORT_PUBLISH_FAILED',
+  SLUG_IN_USE: 'SLUG_IN_USE',
+  QUESTION_TYPE_NOT_ALLOWED_IN_PUBLIC_COURSE: 'QUESTION_TYPE_NOT_ALLOWED_IN_PUBLIC_COURSE',
+  PUBLIC_COURSE_CONVERSION_BLOCKED: 'PUBLIC_COURSE_CONVERSION_BLOCKED',
 
   // Lesson errors
   LESSON_NOT_FOUND: 'LESSON_NOT_FOUND',
diff --git a/packages/utils/src/plans/data.ts b/packages/utils/src/plans/data.ts
index 97995f32..03de958d 100644
--- a/packages/utils/src/plans/data.ts
+++ b/packages/utils/src/plans/data.ts
@@ -14,7 +14,7 @@ export default {
       'Unlimited Programs',
       '20 Students',
       'Advanced Course Builder (no video upload)',
-      '50K AI credits / month',
+      '500K AI credits / month',
       'MCP access with 20 automation credits / month',
       'ClassroomIO branding'
     ],
@@ -40,6 +40,7 @@ export default {
       'Unlimited Collaborators',
       '10K Students',
       'Course Builder with Video Upload & Certificate',
+      '3M AI credits / month',
       'MCP access with 500 automation credits / month',
       'Custom Branding',
       'Custom Domain',
@@ -68,6 +69,7 @@ export default {
     FEATURES: [
       'Everything in Early Adopters plus:',
       'Unlimited students',
+      '15M AI credits / month',
       'Unlimited API requests',
       'SSO',
       '24/7 Support',
diff --git a/packages/utils/src/plans/index.ts b/packages/utils/src/plans/index.ts
index 88586621..4014e1a7 100644
--- a/packages/utils/src/plans/index.ts
+++ b/packages/utils/src/plans/index.ts
@@ -1,6 +1,7 @@
 export * from './constants';
 export * from './automation';
 export * from './utils';
+export * from './token-packs';
 
 import PLANS from './data';
 
diff --git a/packages/utils/src/plans/token-packs.ts b/packages/utils/src/plans/token-packs.ts
new file mode 100644
index 00000000..68aabb54
--- /dev/null
+++ b/packages/utils/src/plans/token-packs.ts
@@ -0,0 +1,13 @@
+export const TOKEN_PACK = {
+  TOKENS_PER_UNIT: 5_000_000,
+  PRICE_USD_CENTS: 500,
+  CURRENCY: 'USD'
+} as const;
+
+export type TokenPackMetadata = {
+  kind: 'token_pack';
+  orgId: string;
+  orgSlug: string;
+  triggeredBy: string;
+  tokensPerUnit: number;
+};
diff --git a/packages/utils/src/validation/agent/agent.ts b/packages/utils/src/validation/agent/agent.ts
index 0ed8bf40..a47710a8 100644
--- a/packages/utils/src/validation/agent/agent.ts
+++ b/packages/utils/src/validation/agent/agent.ts
@@ -1,10 +1,12 @@
 import { z } from 'zod';
 import { AGENT_MODEL_IDS } from '../../agent-models';
 
+const ZAgentCourseId = z.string().min(1);
+
 // ─── POST /agent/chat ────────────────────────────────────────────────────────
 
 export const ZAgentChatBody = z.object({
-  courseId: z.string().uuid(),
+  courseId: ZAgentCourseId,
   messages: z.array(z.any()), // UIMessage[] from Vercel AI SDK — validated by the SDK itself
   model: z.enum(AGENT_MODEL_IDS).optional(),
   context: z
@@ -21,7 +23,7 @@ export type TAgentChatBody = z.infer<typeof ZAgentChatBody>;
 // ─── POST /agent/upload ──────────────────────────────────────────────────────
 
 export const ZAgentUploadQuery = z.object({
-  courseId: z.string().uuid(),
+  courseId: ZAgentCourseId,
   conversationId: z.string().uuid()
 });
 
@@ -30,7 +32,7 @@ export type TAgentUploadQuery = z.infer<typeof ZAgentUploadQuery>;
 // ─── GET /agent/status ───────────────────────────────────────────────────────
 
 export const ZAgentStatusQuery = z.object({
-  courseId: z.string().uuid()
+  courseId: ZAgentCourseId
 });
 
 export type TAgentStatusQuery = z.infer<typeof ZAgentStatusQuery>;
@@ -43,6 +45,19 @@ export const ZAgentCreditsBody = z.object({
 
 export type TAgentCreditsBody = z.infer<typeof ZAgentCreditsBody>;
 
+export const ZAgentCreditPurchase = z.object({
+  orgId: z.string().uuid(),
+  triggeredBy: z.string().uuid().optional(),
+  providerOrderId: z.string().min(1),
+  tokens: z.number().int().positive(),
+  quantity: z.number().int().positive(),
+  unitPriceCents: z.number().int().nonnegative(),
+  currency: z.string().default('USD'),
+  payload: z.record(z.string(), z.unknown()).optional()
+});
+
+export type TAgentCreditPurchase = z.infer<typeof ZAgentCreditPurchase>;
+
 // ─── Supported MIME types ────────────────────────────────────────────────────
 
 export const SUPPORTED_UPLOAD_MIME_TYPES = [
@@ -56,7 +71,7 @@ export const MAX_AGENT_DOCUMENT_SIZE = 5 * 1024 * 1024; // 5MB
 // ─── GET /agent/history (list conversations) ────────────────────────────────
 
 export const ZAgentHistoryQuery = z.object({
-  courseId: z.string().uuid()
+  courseId: ZAgentCourseId
 });
 
 export type TAgentHistoryQuery = z.infer<typeof ZAgentHistoryQuery>;
@@ -72,7 +87,7 @@ export type TAgentConversationParam = z.infer<typeof ZAgentConversationParam>;
 // ─── POST /agent/history (create conversation) ──────────────────────────────
 
 export const ZAgentConversationCreateBody = z.object({
-  courseId: z.string().uuid(),
+  courseId: ZAgentCourseId,
   title: z.string().optional()
 });
 
@@ -107,3 +122,11 @@ export const ZAgentGenerateTitleBody = z.object({
 
 export type TAgentGenerateTitleParam = z.infer<typeof ZAgentGenerateTitleParam>;
 export type TAgentGenerateTitleBody = z.infer<typeof ZAgentGenerateTitleBody>;
+
+// ─── POST /agent/generate-course-title ───────────────────────────────────────
+
+export const ZAgentGenerateCourseTitleBody = z.object({
+  prompt: z.string().min(1).max(2000)
+});
+
+export type TAgentGenerateCourseTitleBody = z.infer<typeof ZAgentGenerateCourseTitleBody>;
diff --git a/packages/utils/src/validation/course/callout.ts b/packages/utils/src/validation/course/callout.ts
new file mode 100644
index 00000000..2e260b9f
--- /dev/null
+++ b/packages/utils/src/validation/course/callout.ts
@@ -0,0 +1,20 @@
+import * as z from 'zod';
+
+/**
+ * Creator-configured callout shown on public course lesson pages.
+ * Rendered inline at the bottom of every item body, and as the full replacement
+ * for locked items.
+ */
+export const ZCourseCallout = z.object({
+  title: z.string().min(1).max(120),
+  description: z.string().min(1).max(500),
+  buttonLabel: z.string().min(1).max(40),
+  buttonUrl: z.string().url()
+});
+export type TCourseCallout = z.infer<typeof ZCourseCallout>;
+
+/**
+ * Accepts the callout object, or `null` to clear it.
+ */
+export const ZCourseCalloutInput = ZCourseCallout.nullable();
+export type TCourseCalloutInput = z.infer<typeof ZCourseCalloutInput>;
diff --git a/packages/utils/src/validation/course/course.ts b/packages/utils/src/validation/course/course.ts
index 3240dfe9..97313d65 100644
--- a/packages/utils/src/validation/course/course.ts
+++ b/packages/utils/src/validation/course/course.ts
@@ -1,6 +1,7 @@
 import * as z from 'zod';
 
 import { ALLOWED_CONTENT_TYPES, ALLOWED_DOCUMENT_TYPES } from '../constants';
+import { ZCourseCalloutInput } from './callout';
 
 export const ZCourseClone = z.object({
   title: z.string().min(1),
@@ -227,7 +228,7 @@ export type TComplianceSettings = z.infer<typeof ZComplianceSettings>;
 export const ZCourseCreateBase = z.object({
   title: z.string().min(1),
   description: z.string().min(1),
-  type: z.enum(['LIVE_CLASS', 'SELF_PACED', 'COMPLIANCE']),
+  type: z.enum(['LIVE_CLASS', 'SELF_PACED', 'COMPLIANCE', 'PUBLIC']),
   organizationId: z.string().min(1),
   compliance: ZComplianceSettings.optional()
 });
@@ -333,7 +334,7 @@ export type TCertificationSettings = z.infer<typeof ZCertificationSettings>;
 export const ZCourseUpdateBase = z.object({
   title: z.string().min(1).optional(),
   description: z.string().min(1).optional(),
-  type: z.enum(['LIVE_CLASS', 'SELF_PACED', 'COMPLIANCE']).optional(),
+  type: z.enum(['LIVE_CLASS', 'SELF_PACED', 'COMPLIANCE', 'PUBLIC']).optional(),
   logo: z.string().optional(),
   slug: z.string().optional(),
   isPublished: z.boolean().optional(),
@@ -343,7 +344,8 @@ export const ZCourseUpdateBase = z.object({
   currency: z.enum(['NGN', 'USD']).optional(),
   certificate: ZCertificationSettings.optional(),
   tagIds: z.array(z.uuid()).max(100).optional(),
-  compliance: ZComplianceSettings.optional()
+  compliance: ZComplianceSettings.optional(),
+  callout: ZCourseCalloutInput.optional()
 });
 
 export const ZCourseUpdate = ZCourseUpdateBase.refine(
diff --git a/packages/utils/src/validation/course/index.ts b/packages/utils/src/validation/course/index.ts
index 24c196f4..d31d0eaa 100644
--- a/packages/utils/src/validation/course/index.ts
+++ b/packages/utils/src/validation/course/index.ts
@@ -6,7 +6,9 @@
  */
 
 export * from './course';
+export * from './callout';
 export * from './compliance';
+export * from './public-course';
 export * from './section';
 export * from './invite';
 export { ZCourseGetParam, type TCourseGetParam } from './course';
diff --git a/packages/utils/src/validation/course/public-course.ts b/packages/utils/src/validation/course/public-course.ts
new file mode 100644
index 00000000..a4d6a454
--- /dev/null
+++ b/packages/utils/src/validation/course/public-course.ts
@@ -0,0 +1,19 @@
+import * as z from 'zod';
+
+import { ZSlug } from '../shared/slug';
+
+/**
+ * Route params + query schemas for the anonymous, SEO-indexable public course
+ * surface under `(org-site)/course/[courseSlug]`.
+ */
+
+export const ZPublicCourseBySlugParam = z.object({
+  courseSlug: ZSlug
+});
+export type TPublicCourseBySlugParam = z.infer<typeof ZPublicCourseBySlugParam>;
+
+export const ZPublicCourseItemParam = z.object({
+  courseSlug: ZSlug,
+  itemSlug: ZSlug
+});
+export type TPublicCourseItemParam = z.infer<typeof ZPublicCourseItemParam>;
diff --git a/packages/utils/src/validation/exercise/exercise-section.ts b/packages/utils/src/validation/exercise/exercise-section.ts
new file mode 100644
index 00000000..7a642743
--- /dev/null
+++ b/packages/utils/src/validation/exercise/exercise-section.ts
@@ -0,0 +1,23 @@
+import { z } from 'zod';
+
+export const ZExerciseSectionAfterBehavior = z.discriminatedUnion('action', [
+  z.object({ action: z.literal('continue') }),
+  z.object({ action: z.literal('go_to_section'), exerciseSectionId: z.string().uuid() }),
+  z.object({ action: z.literal('submit') })
+]);
+
+export const ZExerciseSection = z.object({
+  id: z.string().uuid().optional(),
+  title: z.string().min(1, 'Section title is required'),
+  description: z.string().optional().nullable(),
+  order: z.number().int().min(0),
+  colorTheme: z.enum(['blue', 'green', 'amber', 'rose', 'violet', 'slate']).default('blue'),
+  afterBehavior: ZExerciseSectionAfterBehavior.default({ action: 'continue' }),
+  questionIds: z.array(z.union([z.string(), z.number().int()])).optional()
+});
+
+export const ZExerciseSectionCreate = ZExerciseSection.omit({ id: true });
+export const ZExerciseSectionUpdate = ZExerciseSection.partial().required({ id: true });
+
+export type TExerciseSection = z.infer<typeof ZExerciseSection>;
+export type TExerciseSectionAfterBehavior = z.infer<typeof ZExerciseSectionAfterBehavior>;
diff --git a/packages/utils/src/validation/exercise/exercise.ts b/packages/utils/src/validation/exercise/exercise.ts
index fb072fba..23ba4394 100644
--- a/packages/utils/src/validation/exercise/exercise.ts
+++ b/packages/utils/src/validation/exercise/exercise.ts
@@ -1,8 +1,14 @@
 import * as z from 'zod';
 
-import { getStarRatingMaxFromSettings, isValidStarRatingValue } from '@cio/question-types';
+import {
+  VIDEO_RECORDING_PLATFORM_MAX_DURATION_SECONDS,
+  getStarRatingMaxFromSettings,
+  isValidStarRatingValue
+} from '@cio/question-types';
 
 import { QUESTION_TYPE } from '../constants';
+import { ZSlug } from '../shared/slug';
+import { ZExerciseSection } from './exercise-section';
 
 const EXERCISE_QUESTION_TYPE_ID_LITERALS = [
   z.literal(QUESTION_TYPE.RADIO),
@@ -18,7 +24,8 @@ const EXERCISE_QUESTION_TYPE_ID_LITERALS = [
   z.literal(QUESTION_TYPE.HOTSPOT),
   z.literal(QUESTION_TYPE.LINK),
   z.literal(QUESTION_TYPE.WORD_BANK),
-  z.literal(QUESTION_TYPE.STAR)
+  z.literal(QUESTION_TYPE.STAR),
+  z.literal(QUESTION_TYPE.VIDEO_RECORDING)
 ] as const;
 
 export const ZExerciseQuestionTypeId = z.union(EXERCISE_QUESTION_TYPE_ID_LITERALS);
@@ -110,6 +117,22 @@ const QUESTION_VALIDATION_RULES: Record<number, Array<(question: QuestionRuleInp
         return 'Set a correct star value from 1 up to the maximum number of stars';
       }
 
+      return null;
+    }
+  ],
+  [QUESTION_TYPE.VIDEO_RECORDING]: [
+    (question) => {
+      const settings = question.settings ?? {};
+      const rawDuration = settings.maxDurationSeconds;
+      const maxDurationSeconds =
+        typeof rawDuration === 'number' ? rawDuration : rawDuration != null ? Number(rawDuration) : NaN;
+      if (!Number.isFinite(maxDurationSeconds) || maxDurationSeconds <= 0) {
+        return 'Set a recording duration greater than 0 seconds';
+      }
+      if (maxDurationSeconds > VIDEO_RECORDING_PLATFORM_MAX_DURATION_SECONDS) {
+        return `Recording duration cannot exceed ${VIDEO_RECORDING_PLATFORM_MAX_DURATION_SECONDS} seconds`;
+      }
+
       return null;
     }
   ]
@@ -118,6 +141,7 @@ const QUESTION_VALIDATION_RULES: Record<number, Array<(question: QuestionRuleInp
 // Base schema for exercise update question (without refinement)
 const ZExerciseUpdateQuestionBase = z.object({
   id: z.number().int().optional(),
+  exerciseSectionId: z.string().uuid().nullable().optional(),
   question: z.string().min(1),
   questionTypeId: ZExerciseQuestionTypeId.optional(),
   points: z.number().int().min(0).optional(),
@@ -183,6 +207,7 @@ export const ZExerciseCreate = z.object({
   order: z.number().int().optional(),
   courseId: z.string().min(1),
   dueBy: z.string().optional(),
+  slug: ZSlug.optional(),
   questions: z.array(ZExerciseCreateQuestion).optional()
 });
 export type TExerciseCreate = z.infer<typeof ZExerciseCreate>;
@@ -196,7 +221,10 @@ export const ZExerciseUpdate = z.object({
   isUnlocked: z.boolean().optional(),
   dueBy: z.string().optional(), // Changed from iso.datetime() to string to match frontend format
   allowMultipleAttempts: z.boolean().optional(),
-  questions: z.array(ZExerciseUpdateQuestion).optional()
+  slug: ZSlug.optional(),
+  questions: z.array(ZExerciseUpdateQuestion).optional(),
+  sections: z.array(ZExerciseSection).optional(),
+  sectionDisplayMode: z.enum(['one_question', 'all_questions']).optional()
 });
 export type TExerciseUpdate = z.infer<typeof ZExerciseUpdate>;
 
diff --git a/packages/utils/src/validation/exercise/index.ts b/packages/utils/src/validation/exercise/index.ts
index 0ccfe408..a41ca801 100644
--- a/packages/utils/src/validation/exercise/index.ts
+++ b/packages/utils/src/validation/exercise/index.ts
@@ -1 +1,3 @@
 export * from './exercise';
+export * from './exercise-section';
+export * from './video-recording';
diff --git a/packages/utils/src/validation/exercise/video-recording.ts b/packages/utils/src/validation/exercise/video-recording.ts
new file mode 100644
index 00000000..0434ee45
--- /dev/null
+++ b/packages/utils/src/validation/exercise/video-recording.ts
@@ -0,0 +1,38 @@
+import * as z from 'zod';
+import { VIDEO_RECORDING_PLATFORM_MAX_DURATION_SECONDS } from '@cio/question-types';
+
+export const VIDEO_RECORDING_MIME_TYPES = ['video/webm', 'video/mp4', 'video/quicktime'] as const;
+
+export const ZExerciseVideoRecordingParam = z.object({
+  exerciseId: z.string().min(1),
+  questionId: z.string().regex(/^\d+$/).transform(Number)
+});
+
+export const ZExerciseVideoRecordingPlaybackParam = ZExerciseVideoRecordingParam.extend({
+  submissionId: z.string().uuid()
+});
+
+export const ZExerciseVideoRecordingUploadInit = z.object({
+  fileName: z.string().min(1),
+  mimeType: z.enum(VIDEO_RECORDING_MIME_TYPES),
+  size: z.number().int().positive()
+});
+
+export const ZExerciseVideoRecordingUploadComplete = z.object({
+  assetId: z.string().uuid(),
+  storageKey: z.string().min(1),
+  fileName: z.string().min(1),
+  mimeType: z.enum(VIDEO_RECORDING_MIME_TYPES),
+  size: z.number().int().positive(),
+  durationSeconds: z
+    .number()
+    .positive()
+    .max(VIDEO_RECORDING_PLATFORM_MAX_DURATION_SECONDS + 2),
+  recordedAt: z.string().datetime(),
+  retakeCount: z.number().int().min(0).optional()
+});
+
+export type TExerciseVideoRecordingParam = z.infer<typeof ZExerciseVideoRecordingParam>;
+export type TExerciseVideoRecordingPlaybackParam = z.infer<typeof ZExerciseVideoRecordingPlaybackParam>;
+export type TExerciseVideoRecordingUploadInit = z.infer<typeof ZExerciseVideoRecordingUploadInit>;
+export type TExerciseVideoRecordingUploadComplete = z.infer<typeof ZExerciseVideoRecordingUploadComplete>;
diff --git a/packages/utils/src/validation/index.ts b/packages/utils/src/validation/index.ts
index 5e7550d6..cf0a1a61 100644
--- a/packages/utils/src/validation/index.ts
+++ b/packages/utils/src/validation/index.ts
@@ -1,4 +1,5 @@
 export * from './constants';
+export * from './shared';
 
 export * from './account';
 export * from './agent';
diff --git a/packages/utils/src/validation/lesson/lesson.ts b/packages/utils/src/validation/lesson/lesson.ts
index 0f28388e..2853c175 100644
--- a/packages/utils/src/validation/lesson/lesson.ts
+++ b/packages/utils/src/validation/lesson/lesson.ts
@@ -1,5 +1,7 @@
 import * as z from 'zod';
 
+import { ZSlug } from '../shared/slug';
+
 // Lesson Schemas
 export const ZLessonCreate = z.object({
   title: z.string().min(1),
@@ -10,7 +12,8 @@ export const ZLessonCreate = z.object({
   lessonAt: z.string().optional(),
   teacherId: z.string().optional(),
   isUnlocked: z.boolean().optional(),
-  public: z.boolean().optional()
+  public: z.boolean().optional(),
+  slug: ZSlug.optional()
 });
 export type TLessonCreate = z.infer<typeof ZLessonCreate>;
 
@@ -24,6 +27,7 @@ export const ZLessonUpdate = z.object({
   teacherId: z.string().optional(),
   isUnlocked: z.boolean().optional(),
   public: z.boolean().optional(),
+  slug: ZSlug.optional(),
   isComplete: z.boolean().optional(),
   videoUrl: z.url().optional(),
   slideUrl: z.url().optional(),
diff --git a/packages/utils/src/validation/shared/index.ts b/packages/utils/src/validation/shared/index.ts
new file mode 100644
index 00000000..79d92727
--- /dev/null
+++ b/packages/utils/src/validation/shared/index.ts
@@ -0,0 +1 @@
+export * from './slug';
diff --git a/packages/utils/src/validation/shared/slug.ts b/packages/utils/src/validation/shared/slug.ts
new file mode 100644
index 00000000..2274e6f8
--- /dev/null
+++ b/packages/utils/src/validation/shared/slug.ts
@@ -0,0 +1,57 @@
+import * as z from 'zod';
+
+/**
+ * Slug format used by public-course URLs (and shared by `lesson.slug` and `exercise.slug`).
+ * Kebab-case, 1–80 chars, lowercase alphanumerics with single `-` separators, no leading/trailing dash.
+ */
+export const SLUG_REGEX = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+
+export const ZSlug = z
+  .string()
+  .min(1, { message: 'Slug is required' })
+  .max(80, { message: 'Slug must be 80 characters or fewer' })
+  .regex(SLUG_REGEX, {
+    message: 'Slug must be lowercase letters, numbers, and single dashes'
+  });
+export type TSlug = z.infer<typeof ZSlug>;
+
+/**
+ * Generate a kebab-case slug from a free-form title. Does not enforce uniqueness;
+ * callers must resolve collisions against the target namespace (e.g. per-course).
+ */
+export function slugifyTitle(title: string): string {
+  const normalized = title
+    .normalize('NFKD')
+    .replace(/[\u0300-\u036f]/g, '')
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .slice(0, 80)
+    .replace(/-+$/g, '');
+
+  return normalized || 'untitled';
+}
+
+/**
+ * Resolve a slug against a list of already-taken slugs by appending `-2`, `-3`, ...
+ * until a free value is found. Respects the 80-char cap by trimming the base slug
+ * as needed to fit the suffix.
+ */
+export function resolveSlugCollision(baseSlug: string, takenSlugs: Iterable<string>): string {
+  const taken = new Set(takenSlugs);
+
+  if (!taken.has(baseSlug)) {
+    return baseSlug;
+  }
+
+  let counter = 2;
+  while (true) {
+    const suffix = `-${counter}`;
+    const trimmedBase = baseSlug.slice(0, 80 - suffix.length).replace(/-+$/g, '') || 'untitled';
+    const candidate = `${trimmedBase}${suffix}`;
+    if (!taken.has(candidate)) {
+      return candidate;
+    }
+    counter += 1;
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 573dfe7f..c94402bf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,6 +4,10 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
+overrides:
+  zod: ^4.1.8
+  miniflare>zod: 3.22.3
+
 patchedDependencies:
   layerchart@2.0.0-next.27:
     hash: 51dabc4b4462058655e01199047915e5582cfd0492e97d6ecd0c244dc17e5a3a
@@ -289,9 +293,12 @@ importers:
       '@lucide/svelte':
         specifier: ^0.545.0
         version: 0.545.0(svelte@5.46.0)
+      '@polar-sh/sdk':
+        specifier: ^0.47.1
+        version: 0.47.1
       '@polar-sh/sveltekit':
-        specifier: ^0.2.1
-        version: 0.2.1(@sveltejs/kit@2.49.2(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(zod@4.2.1)
+        specifier: ^0.7.5
+        version: 0.7.5(@sveltejs/kit@2.49.2(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))
       '@sveltejs/adapter-auto':
         specifier: ^3.0.0
         version: 3.3.1(@sveltejs/kit@2.49.2(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))
@@ -772,19 +779,25 @@ importers:
     dependencies:
       '@ai-sdk/anthropic':
         specifier: ^3.0.69
-        version: 3.0.69(zod@3.25.76)
+        version: 3.0.69(zod@4.3.6)
       '@ai-sdk/google':
         specifier: ^3.0.0
-        version: 3.0.64(zod@3.25.76)
+        version: 3.0.64(zod@4.3.6)
+      '@ai-sdk/moonshotai':
+        specifier: ^2.0.21
+        version: 2.0.21(zod@4.3.6)
       '@ai-sdk/openai':
         specifier: ^3.0.52
-        version: 3.0.52(zod@3.25.76)
+        version: 3.0.52(zod@4.3.6)
+      '@cio/question-types':
+        specifier: workspace:*
+        version: link:../question-types
       ai:
         specifier: ^6.0.158
-        version: 6.0.158(zod@3.25.76)
+        version: 6.0.158(zod@4.3.6)
       zod:
-        specifier: ^3.24.4
-        version: 3.25.76
+        specifier: ^4.1.8
+        version: 4.3.6
     devDependencies:
       '@cio/tsconfig':
         specifier: workspace:*
@@ -1386,31 +1399,53 @@ packages:
     resolution: {integrity: sha512-LshR7X3pFugY0o41G2VKTmg1XoGpSl7uoYWfzk6zjVZLhCfeFiwgpOga+eTV4XY1VVpZwKVqRnkDbIL7K2eH5g==}
     engines: {node: '>=18'}
     peerDependencies:
-      zod: ^3.25.76 || ^4.1.8
+      zod: ^4.1.8
 
   '@ai-sdk/gateway@3.0.95':
     resolution: {integrity: sha512-ZmUNNbZl3V42xwQzPaNUi+s8eqR2lnrxf0bvB6YbLXpLjHYv0k2Y78t12cNOfY0bxGeuVVTLyk856uLuQIuXEQ==}
     engines: {node: '>=18'}
     peerDependencies:
-      zod: ^3.25.76 || ^4.1.8
+      zod: ^4.1.8
 
   '@ai-sdk/google@3.0.64':
     resolution: {integrity: sha512-CbR82EgGPNrj/6q0HtclwuCqe0/pDShyv3nWDP/A9DroujzWXnLMlUJVrgPOsg4b40zQCwwVs2XSKCxvt/4QaA==}
     engines: {node: '>=18'}
     peerDependencies:
-      zod: ^3.25.76 || ^4.1.8
+      zod: ^4.1.8
+
+  '@ai-sdk/moonshotai@2.0.21':
+    resolution: {integrity: sha512-wAfAE1VZ4muEldJLBDsKE2dVDGTNCCAXaUP8qxGAJG8e1U8qaR1UZQkTUNDvc3DdhTKPzff571rMKBAu3xOYEg==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^4.1.8
+
+  '@ai-sdk/openai-compatible@2.0.46':
+    resolution: {integrity: sha512-23ExGdy3p0Grfz3BAjCbIOc74TjQc5nHu72e0+kx3hshvScp32a4nnQlzzG4VT1bDZxa9yPNNUNyb5nN6vJHcQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^4.1.8
 
   '@ai-sdk/openai@3.0.52':
     resolution: {integrity: sha512-4Rr8NCGmfWTz6DCUvixn9UmyZcMatiHn0zWoMzI3JCUe9R1P/vsPOpCBALKoSzVYOjyJnhtnVIbfUKujcS39uw==}
     engines: {node: '>=18'}
     peerDependencies:
-      zod: ^3.25.76 || ^4.1.8
+      zod: ^4.1.8
 
   '@ai-sdk/provider-utils@4.0.23':
     resolution: {integrity: sha512-z8GlDaCmRSDlqkMF2f4/RFgWxdarvIbyuk+m6WXT1LYgsnGiXRJGTD2Z1+SDl3LqtFuRtGX1aghYvQLoHL/9pg==}
     engines: {node: '>=18'}
     peerDependencies:
-      zod: ^3.25.76 || ^4.1.8
+      zod: ^4.1.8
+
+  '@ai-sdk/provider-utils@4.0.26':
+    resolution: {integrity: sha512-CsKNLKsOpvPujRlIYvoz+Ybw+kGn7J4/fIZa/58+R7iWLLfwn6ifE2G6Yq8K9XvH/I/3bzaDAJ3NhRwEMsLBKQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      zod: ^4.1.8
+
+  '@ai-sdk/provider@3.0.10':
+    resolution: {integrity: sha512-Q3BZ27qfpYqnCYGvE3vt+Qi6LGOF9R5Nmzn+9JoM1lCRsD9mYaIhfJLkSunN48nfGXJ6n+XNV0J/XVpqGQl7Dw==}
+    engines: {node: '>=18'}
 
   '@ai-sdk/provider@3.0.8':
     resolution: {integrity: sha512-oGMAgGoQdBXbZqNG0Ze56CHjDZ1IDYOwGYxYjO5KLSlz5HiNQ9udIXsPZ61VWaHGZ5XW/jyjmr6t2xz2jGVwbQ==}
@@ -3469,7 +3504,7 @@ packages:
     resolution: {integrity: sha512-Io1B6d011Gj1KknV4rXYz4le5+5EubcWEU/speUjuw9XMMIaP3n78yXLhjd2A3PXaXaUwEAluOiAyLqhBEJgsw==}
     peerDependencies:
       hono: '>=3.9.0'
-      zod: ^3.25.0 || ^4.0.0
+      zod: ^4.1.8
 
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
@@ -3800,7 +3835,7 @@ packages:
     engines: {node: '>=18'}
     peerDependencies:
       '@cfworker/json-schema': ^4.1.1
-      zod: ^3.25 || ^4.0
+      zod: ^4.1.8
     peerDependenciesMeta:
       '@cfworker/json-schema':
         optional: true
@@ -4061,13 +4096,17 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  '@polar-sh/sdk@0.20.2':
-    resolution: {integrity: sha512-Rrqt2jyg1VhO9Gfy3WpLF9bST5yxXGnNJ1a/vHw/N4CXWZNbafKjKVGI2f7t1emCosvzkT2BpIBf+b19CpUTiw==}
-    peerDependencies:
-      zod: '>= 3'
+  '@polar-sh/adapter-utils@0.4.5':
+    resolution: {integrity: sha512-ar9u2BMmF/6h0KQ2gRQBLPF/fKMcFyicZo1EpJU6awx84cmytVepw1LX5xQa7kMBxPgo8AIxUIXG5OPGeefnWQ==}
 
-  '@polar-sh/sveltekit@0.2.1':
-    resolution: {integrity: sha512-SYTy78YQnLaSYiz5BigDFzDSwcVCwFZgvSnNc50liiBKydAJu+ItHh70s7lQj+NOrlxmp2Ai0moQqCtrIuSM0w==}
+  '@polar-sh/sdk@0.46.7':
+    resolution: {integrity: sha512-g8/goRQFfnik9Ood2Ej5AsbEXv2rohzhVlmW7wjkCuwdc8i59FWhdBjolX2tUwcXXjugziXrhCZJLivY3W6ytQ==}
+
+  '@polar-sh/sdk@0.47.1':
+    resolution: {integrity: sha512-fkz7wPLbqfuDmY9LxuXpE2uP2TAV6J0q/YN5hJ4UBxpjbkB0hKM6c4R35N89t83dfzMlG6EOlqOn+Rd1T6XrJQ==}
+
+  '@polar-sh/sveltekit@0.7.5':
+    resolution: {integrity: sha512-1JtYxbLYIglwfzB9VygyfwYMleaXf8c5giHP4PjVqT3hH8+spQa9otFWAAJkvdxdodWSfuaAbo9HuosHQ0e6mA==}
     engines: {node: '>=16'}
     peerDependencies:
       '@sveltejs/kit': ^2.0.0
@@ -5033,7 +5072,7 @@ packages:
       sury: ^10.0.0
       typebox: ^1.0.17
       valibot: ^1.1.0
-      zod: ^3.25.0 || ^4.0.0
+      zod: ^4.1.8
       zod-to-json-schema: ^3.24.5
     peerDependenciesMeta:
       '@valibot/to-json-schema':
@@ -5064,7 +5103,7 @@ packages:
       sury: ^10.0.0
       typebox: ^1.0.0
       valibot: ^1.1.0
-      zod: ^3.25.0 || ^4.0.0
+      zod: ^4.1.8
       zod-openapi: ^4
     peerDependenciesMeta:
       arktype:
@@ -6569,7 +6608,7 @@ packages:
     resolution: {integrity: sha512-gLTp1UXFtMqKUi3XHs33K7UFglbvojkxF/aq337TxnLGOhHIW9+GyP2jwW4hYX87f1es+wId3VQoPRRu9zEStQ==}
     engines: {node: '>=18'}
     peerDependencies:
-      zod: ^3.25.76 || ^4.1.8
+      zod: ^4.1.8
 
   ajv-formats@3.0.1:
     resolution: {integrity: sha512-8iUql50EUR+uUcdRQ3HDqa6EVyo3docL8g5WJ3FNcWmu62IbkGUue/pEyLBW8VGKKucTPgqeks4fIU1DA4yowQ==}
@@ -6874,7 +6913,7 @@ packages:
   better-call@1.1.8:
     resolution: {integrity: sha512-XMQ2rs6FNXasGNfMjzbyroSwKwYbZ/T3IxruSS6U2MJRsSYh3wYtG3o6H00ZlKZ/C/UPOAD97tqgQJNsxyeTXw==}
     peerDependencies:
-      zod: ^4.0.0
+      zod: ^4.1.8
     peerDependenciesMeta:
       zod:
         optional: true
@@ -8236,6 +8275,10 @@ packages:
     resolution: {integrity: sha512-Vo1ab+QXPzZ4tCa8SwIHJFaSzy4R6SHf7BY79rFBDf0idraZWAkYrDjDj8uWaSm3S2TK+hJ7/t1CEmZ7jXw+pg==}
     engines: {node: '>=18.0.0'}
 
+  eventsource-parser@3.0.8:
+    resolution: {integrity: sha512-70QWGkr4snxr0OXLRWsFLeRBIRPuQOvt4s8QYjmUlmlkyTZkRqS7EDVRZtzU3TiyDbXSzaOeF0XUKy8PchzukQ==}
+    engines: {node: '>=18.0.0'}
+
   eventsource@3.0.7:
     resolution: {integrity: sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==}
     engines: {node: '>=18.0.0'}
@@ -11363,7 +11406,7 @@ packages:
     peerDependencies:
       '@sveltejs/kit': ^2.21.0
       svelte: ^5.7.0
-      zod: ^4.1.0
+      zod: ^4.1.8
     peerDependenciesMeta:
       '@sveltejs/kit':
         optional: true
@@ -13093,19 +13136,16 @@ packages:
     resolution: {integrity: sha512-DVLBNsnggh8k/Yq7qp+NeQCH6JuLIyGzUQWA1wN5+7DpQJSwC7WYR/2lE6uQDmGcS/X6l4tUyYFpeG4nk3nOpA==}
     engines: {node: '>=20'}
     peerDependencies:
-      zod: ^3.25.74 || ^4.0.0
+      zod: ^4.1.8
 
   zod-to-json-schema@3.25.1:
     resolution: {integrity: sha512-pM/SU9d3YAggzi6MtR4h7ruuQlqKtad8e9S0fmxcMi+ueAK5Korys/aWcV9LIIHTVbj01NdzxcnXSN+O74ZIVA==}
     peerDependencies:
-      zod: ^3.25 || ^4
+      zod: ^4.1.8
 
   zod@3.22.3:
     resolution: {integrity: sha512-EjIevzuJRiRPbVH4mGc8nApb/lVLKVpmUhAaR5R5doKGfAnGJ6Gr3CViAVjP+4FWSxCsybeWQdcgCtbX+7oZug==}
 
-  zod@3.25.76:
-    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
-
   zod@4.2.1:
     resolution: {integrity: sha512-0wZ1IRqGGhMP76gLqz8EyfBXKk0J2qo2+H3fi4mcUP/KtTocoX08nmIAHl1Z2kJIZbZee8KOpBCSNPRgauucjw==}
 
@@ -13119,18 +13159,11 @@ snapshots:
 
   '@adobe/css-tools@4.4.4': {}
 
-  '@ai-sdk/anthropic@3.0.69(zod@3.25.76)':
+  '@ai-sdk/anthropic@3.0.69(zod@4.3.6)':
     dependencies:
       '@ai-sdk/provider': 3.0.8
-      '@ai-sdk/provider-utils': 4.0.23(zod@3.25.76)
-      zod: 3.25.76
-
-  '@ai-sdk/gateway@3.0.95(zod@3.25.76)':
-    dependencies:
-      '@ai-sdk/provider': 3.0.8
-      '@ai-sdk/provider-utils': 4.0.23(zod@3.25.76)
-      '@vercel/oidc': 3.1.0
-      zod: 3.25.76
+      '@ai-sdk/provider-utils': 4.0.23(zod@4.3.6)
+      zod: 4.3.6
 
   '@ai-sdk/gateway@3.0.95(zod@4.2.1)':
     dependencies:
@@ -13139,24 +13172,37 @@ snapshots:
       '@vercel/oidc': 3.1.0
       zod: 4.2.1
 
-  '@ai-sdk/google@3.0.64(zod@3.25.76)':
+  '@ai-sdk/gateway@3.0.95(zod@4.3.6)':
     dependencies:
       '@ai-sdk/provider': 3.0.8
-      '@ai-sdk/provider-utils': 4.0.23(zod@3.25.76)
-      zod: 3.25.76
+      '@ai-sdk/provider-utils': 4.0.23(zod@4.3.6)
+      '@vercel/oidc': 3.1.0
+      zod: 4.3.6
 
-  '@ai-sdk/openai@3.0.52(zod@3.25.76)':
+  '@ai-sdk/google@3.0.64(zod@4.3.6)':
     dependencies:
       '@ai-sdk/provider': 3.0.8
-      '@ai-sdk/provider-utils': 4.0.23(zod@3.25.76)
-      zod: 3.25.76
+      '@ai-sdk/provider-utils': 4.0.23(zod@4.3.6)
+      zod: 4.3.6
 
-  '@ai-sdk/provider-utils@4.0.23(zod@3.25.76)':
+  '@ai-sdk/moonshotai@2.0.21(zod@4.3.6)':
+    dependencies:
+      '@ai-sdk/openai-compatible': 2.0.46(zod@4.3.6)
+      '@ai-sdk/provider': 3.0.10
+      '@ai-sdk/provider-utils': 4.0.26(zod@4.3.6)
+      zod: 4.3.6
+
+  '@ai-sdk/openai-compatible@2.0.46(zod@4.3.6)':
+    dependencies:
+      '@ai-sdk/provider': 3.0.10
+      '@ai-sdk/provider-utils': 4.0.26(zod@4.3.6)
+      zod: 4.3.6
+
+  '@ai-sdk/openai@3.0.52(zod@4.3.6)':
     dependencies:
       '@ai-sdk/provider': 3.0.8
-      '@standard-schema/spec': 1.1.0
-      eventsource-parser: 3.0.6
-      zod: 3.25.76
+      '@ai-sdk/provider-utils': 4.0.23(zod@4.3.6)
+      zod: 4.3.6
 
   '@ai-sdk/provider-utils@4.0.23(zod@4.2.1)':
     dependencies:
@@ -13165,6 +13211,24 @@ snapshots:
       eventsource-parser: 3.0.6
       zod: 4.2.1
 
+  '@ai-sdk/provider-utils@4.0.23(zod@4.3.6)':
+    dependencies:
+      '@ai-sdk/provider': 3.0.8
+      '@standard-schema/spec': 1.1.0
+      eventsource-parser: 3.0.6
+      zod: 4.3.6
+
+  '@ai-sdk/provider-utils@4.0.26(zod@4.3.6)':
+    dependencies:
+      '@ai-sdk/provider': 3.0.10
+      '@standard-schema/spec': 1.1.0
+      eventsource-parser: 3.0.8
+      zod: 4.3.6
+
+  '@ai-sdk/provider@3.0.10':
+    dependencies:
+      json-schema: 0.4.0
+
   '@ai-sdk/provider@3.0.8':
     dependencies:
       json-schema: 0.4.0
@@ -16152,17 +16216,25 @@ snapshots:
     dependencies:
       playwright: 1.57.0
 
-  '@polar-sh/sdk@0.20.2(zod@4.2.1)':
+  '@polar-sh/adapter-utils@0.4.5':
+    dependencies:
+      '@polar-sh/sdk': 0.46.7
+
+  '@polar-sh/sdk@0.46.7':
     dependencies:
       standardwebhooks: 1.0.0
-      zod: 4.2.1
+      zod: 4.3.6
 
-  '@polar-sh/sveltekit@0.2.1(@sveltejs/kit@2.49.2(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(zod@4.2.1)':
+  '@polar-sh/sdk@0.47.1':
     dependencies:
-      '@polar-sh/sdk': 0.20.2(zod@4.2.1)
+      standardwebhooks: 1.0.0
+      zod: 4.3.6
+
+  '@polar-sh/sveltekit@0.7.5(@sveltejs/kit@2.49.2(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))':
+    dependencies:
+      '@polar-sh/adapter-utils': 0.4.5
+      '@polar-sh/sdk': 0.46.7
       '@sveltejs/kit': 2.49.2(@opentelemetry/api@1.9.0)(@sveltejs/vite-plugin-svelte@4.0.4(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)))(svelte@5.46.0)(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1))
-    transitivePeerDependencies:
-      - zod
 
   '@polka/url@1.0.0-next.29': {}
 
@@ -18254,7 +18326,7 @@ snapshots:
       recast: 0.23.11
       source-map: 0.7.6
       tsx: 4.21.0
-      zod: 3.25.76
+      zod: 4.3.6
     transitivePeerDependencies:
       - supports-color
     optional: true
@@ -18274,7 +18346,7 @@ snapshots:
       babel-dead-code-elimination: 1.0.12
       chokidar: 3.6.0
       unplugin: 2.3.11
-      zod: 3.25.76
+      zod: 4.3.6
     optionalDependencies:
       '@tanstack/react-router': 1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       vite: 5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)
@@ -18297,7 +18369,7 @@ snapshots:
       babel-dead-code-elimination: 1.0.12
       chokidar: 3.6.0
       unplugin: 2.3.11
-      zod: 3.25.76
+      zod: 4.3.6
     optionalDependencies:
       '@tanstack/react-router': 1.143.4(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
@@ -18404,7 +18476,7 @@ snapshots:
       vite: 5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1)
       vitefu: 1.1.3(vite@5.4.21(@types/node@20.19.27)(lightningcss@1.32.0)(sass@1.97.1))
       xmlbuilder2: 4.0.3
-      zod: 3.25.76
+      zod: 4.3.6
     transitivePeerDependencies:
       - '@rsbuild/core'
       - '@tanstack/react-router'
@@ -18437,7 +18509,7 @@ snapshots:
       vite: 7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2)
       vitefu: 1.1.3(vite@7.3.0(@types/node@24.10.4)(jiti@2.6.1)(lightningcss@1.32.0)(sass@1.97.1)(tsx@4.21.0)(yaml@2.8.2))
       xmlbuilder2: 4.0.3
-      zod: 3.25.76
+      zod: 4.3.6
     transitivePeerDependencies:
       - '@rsbuild/core'
       - '@tanstack/react-router'
@@ -19424,14 +19496,6 @@ snapshots:
 
   agent-base@7.1.4: {}
 
-  ai@6.0.158(zod@3.25.76):
-    dependencies:
-      '@ai-sdk/gateway': 3.0.95(zod@3.25.76)
-      '@ai-sdk/provider': 3.0.8
-      '@ai-sdk/provider-utils': 4.0.23(zod@3.25.76)
-      '@opentelemetry/api': 1.9.0
-      zod: 3.25.76
-
   ai@6.0.158(zod@4.2.1):
     dependencies:
       '@ai-sdk/gateway': 3.0.95(zod@4.2.1)
@@ -19440,6 +19504,14 @@ snapshots:
       '@opentelemetry/api': 1.9.0
       zod: 4.2.1
 
+  ai@6.0.158(zod@4.3.6):
+    dependencies:
+      '@ai-sdk/gateway': 3.0.95(zod@4.3.6)
+      '@ai-sdk/provider': 3.0.8
+      '@ai-sdk/provider-utils': 4.0.23(zod@4.3.6)
+      '@opentelemetry/api': 1.9.0
+      zod: 4.3.6
+
   ajv-formats@3.0.1(ajv@8.18.0):
     optionalDependencies:
       ajv: 8.18.0
@@ -21368,6 +21440,8 @@ snapshots:
 
   eventsource-parser@3.0.6: {}
 
+  eventsource-parser@3.0.8: {}
+
   eventsource@3.0.7:
     dependencies:
       eventsource-parser: 3.0.6
@@ -27246,8 +27320,6 @@ snapshots:
 
   zod@3.22.3: {}
 
-  zod@3.25.76: {}
-
   zod@4.2.1: {}
 
   zod@4.3.6: {}
diff --git a/prd/ai-course-assistant/README.md b/prd/ai-course-assistant [DONE]/README.md
similarity index 99%
rename from prd/ai-course-assistant/README.md
rename to prd/ai-course-assistant [DONE]/README.md
index b10e915c..d56b6e23 100644
--- a/prd/ai-course-assistant/README.md
+++ b/prd/ai-course-assistant [DONE]/README.md	
@@ -1,5 +1,9 @@
 # AI Course Assistant
 
+## Status
+
+- Done (shipped)
+
 ## Purpose
 
 Deliver an AI assistant inside the course UI that teachers can use to:
diff --git a/prd/ai-course-assistant/implementation-plan.md b/prd/ai-course-assistant [DONE]/implementation-plan.md
similarity index 100%
rename from prd/ai-course-assistant/implementation-plan.md
rename to prd/ai-course-assistant [DONE]/implementation-plan.md
diff --git a/prd/compliance-training-platform/README.md b/prd/compliance-training-platform [DONE]/README.md
similarity index 99%
rename from prd/compliance-training-platform/README.md
rename to prd/compliance-training-platform [DONE]/README.md
index 991c2f8a..c48b8a9e 100644
--- a/prd/compliance-training-platform/README.md
+++ b/prd/compliance-training-platform [DONE]/README.md	
@@ -1,7 +1,7 @@
 # Compliance Course Type PRD
 
 ## Status
-- Draft
+- Done (shipped)
 
 ## Date
 - February 21, 2026 (updated April 11, 2026)
diff --git a/prd/compliance-training-platform/UX.md b/prd/compliance-training-platform [DONE]/UX.md
similarity index 100%
rename from prd/compliance-training-platform/UX.md
rename to prd/compliance-training-platform [DONE]/UX.md
diff --git a/prd/course-widget-embed/README.md b/prd/course-widget-embed [DONE]/README.md
similarity index 99%
rename from prd/course-widget-embed/README.md
rename to prd/course-widget-embed [DONE]/README.md
index ca6a1c51..f4368a09 100644
--- a/prd/course-widget-embed/README.md
+++ b/prd/course-widget-embed [DONE]/README.md	
@@ -1,5 +1,9 @@
 # Course Widget Embed PRD (Org Widgets)
 
+## Status
+
+- Done (shipped)
+
 ## Purpose
 Ship an organization-scoped widget system so admins can embed selected courses on external websites from `/org/[slug]/widgets`, with a visual editor and lightweight runtime.
 
@@ -567,7 +571,7 @@ Parent (Dashboard)          Iframe (Widget Runtime)
 ```
 
 #### Documentation Output
-- Spec file: `prd/course-widget-embed/iframe-protocol.md` (this section)
+- Spec file: `prd/course-widget-embed [DONE]/iframe-protocol.md` (this section)
 - Implementation: `apps/embeds/src/widgets/course-widget/preview/iframe-bridge.ts` + `apps/dashboard/src/lib/features/widget/preview/iframe-parent.ts`
 
 ### TODO-3: Preview Data Freshness (Implementation Details)
diff --git a/prd/course-widget-embed/implementation-plan.md b/prd/course-widget-embed [DONE]/implementation-plan.md
similarity index 100%
rename from prd/course-widget-embed/implementation-plan.md
rename to prd/course-widget-embed [DONE]/implementation-plan.md
diff --git a/prd/custom-domain-cloudflare/README.md b/prd/custom-domain-cloudflare [DONE]/README.md
similarity index 99%
rename from prd/custom-domain-cloudflare/README.md
rename to prd/custom-domain-cloudflare [DONE]/README.md
index 4fc75a24..360c44ad 100644
--- a/prd/custom-domain-cloudflare/README.md
+++ b/prd/custom-domain-cloudflare [DONE]/README.md	
@@ -1,7 +1,7 @@
 # Cloudflare Custom Subdomain Reconnect PRD
 
 ## Status
-- Draft
+- Done (shipped)
 
 ## Date
 - March 22, 2026
diff --git a/prd/exercise-question-types [DONE]/README.md b/prd/exercise-question-types [DONE]/README.md
index 60a89064..35d80285 100644
--- a/prd/exercise-question-types [DONE]/README.md	
+++ b/prd/exercise-question-types [DONE]/README.md	
@@ -2,7 +2,7 @@
 
 ## Status
 
-- In progress
+- In progress (remaining question-type work; exercise question sections and video recording are tracked as separate shipped PRDs — see PRD-TRACKER DONE)
 
 ## Date
 
diff --git a/prd/exercise-sections/README.md b/prd/exercise-sections [DONE]/README.md
similarity index 77%
rename from prd/exercise-sections/README.md
rename to prd/exercise-sections [DONE]/README.md
index b7f3aff1..aae8e11e 100644
--- a/prd/exercise-sections/README.md
+++ b/prd/exercise-sections [DONE]/README.md	
@@ -1,12 +1,12 @@
-# Exercise Sections PRD
+# Exercise Question Sections PRD
 
 ## Status
 
-- Draft
+- Done (shipped)
 
 ## Date
 
-- February 26, 2026
+- April 30, 2026
 
 ## Implementation Plan
 
@@ -14,7 +14,13 @@
 
 ## Purpose
 
-Allow instructors to group exercise questions into named sections, so exercises can be structured into logical parts (e.g., "Section A: Multiple Choice", "Section B: Written Responses") with per-section navigation, descriptions, and configurable post-section behavior.
+Allow instructors to group questions inside a single exercise into named sections, so one assignment, quiz, or exam can be structured into logical parts (e.g., "Section A: Multiple Choice", "Section B: Written Responses") with per-section instructions, navigation, and review.
+
+## Terminology
+
+- **Exercise question section**: A grouping inside one exercise. This PRD is about this concept.
+- **Course section**: The existing course content grouping that contains lessons and exercises. This PRD does not change course sections.
+- The existing `exercise.sectionId` field points to a **course section**. New question-level grouping must use `question.exerciseSectionId` / DB `question.exercise_section_id` so the two concepts are not overloaded.
 
 ## Problem Statement
 
@@ -29,8 +35,8 @@ Today, every exercise is a flat list of questions. Instructors cannot:
 
 | Area | Current State | Gap |
 | --- | --- | --- |
-| `exercise` table | Has `title`, `description`, questions linked via `question.exercise_id` | No section concept |
-| `question` table | Has `exercise_id`, `order`, `title`, `points`, `question_type_id` | No `section_id` or section ordering |
+| `exercise` table | Has `title`, `description`, and `section_id` for the parent course section; questions link via `question.exercise_id` | No internal question-section concept |
+| `question` table | Has `exercise_id`, `order`, `title`, `points`, `question_type_id` | No `exercise_section_id` or section ordering |
 | Exercise store | `questionnaire.questions` is a flat `Question[]` | No section grouping or section metadata |
 | Edit mode UI | Renders all questions in a single vertical list | No section headers, section CRUD, or drag-between-sections |
 | Take mode (view-mode) | Shows one question at a time via `currentQuestionIndex` on flat array | No section-at-a-time mode, no section overview screen |
@@ -55,7 +61,7 @@ Today, every exercise is a flat list of questions. Instructors cannot:
 - `packages/ui/src/custom/exercise-question/question-navigation.svelte`
 - `packages/ui/src/custom/exercise-question/question-list.svelte`
 - `packages/question-types/src/exercise-types.ts`
-- `prd/exercise-question-types/README.md`
+- `prd/exercise-question-types [DONE]/README.md`
 
 ## Primary Users
 
@@ -69,8 +75,9 @@ Today, every exercise is a flat list of questions. Instructors cannot:
 2. Allow students to navigate exercises section-by-section with configurable question display (one-at-a-time or all-at-once within a section).
 3. Show section-level subtotals alongside overall totals in grading.
 4. Support configurable post-section behavior (continue, go to specific section, submit).
-5. Maintain full backward compatibility — existing sectionless exercises work unchanged.
-6. Support sections in exercise templates and cloning.
+5. Let instructors assign lightweight visual color themes to sections for easier scanning while authoring.
+6. Maintain full backward compatibility — existing sectionless exercises work unchanged.
+7. Support sections in exercise templates and cloning.
 
 ## Non-Goals (v1)
 
@@ -79,11 +86,12 @@ Today, every exercise is a flat list of questions. Instructors cannot:
 - Conditional/branching logic beyond post-section routing (no "if student scored < 50% on Section A, skip to Section C").
 - Section-level randomization separate from exercise-level randomization.
 - Nested sections (sections within sections).
+- Custom arbitrary color pickers. V1 uses a fixed set of color theme swatches.
 
-## Confirmed Decisions
+## Proposed Decisions / MVP Assumptions
 
 1. An exercise is either **flat questions** (no sections) or **sections with questions** — not a mix of both. If an exercise has sections, every question must belong to a section.
-2. A question belongs to exactly **one** section. No multi-section membership.
+2. A question belongs to exactly **one exercise question section**. No multi-section membership.
 3. Section scoring is the **sum of question points** within that section — no separate section-level weight multiplier.
 4. Student display mode is **configurable per exercise**: either "one question at a time" (current behavior, but section-aware) or "one section at a time" (all questions in the current section shown together).
 5. Students see a **section overview screen** before beginning each section (section title + description + question count + total points).
@@ -94,6 +102,7 @@ Today, every exercise is a flat list of questions. Instructors cannot:
 10. Existing exercises without sections continue to work exactly as they do today. Sections are **fully optional**.
 11. Exercise templates support sections. Exercise cloning preserves sections.
 12. Instructors can **drag questions between sections**, **reorder sections**, and **select which section** when adding a new question.
+13. Section color themes are cosmetic only. They help authoring and review scanability and do not affect grading, routing, or student eligibility.
 
 ---
 
@@ -112,7 +121,8 @@ Today, every exercise is a flat list of questions. Instructors cannot:
 
 - Instructor can edit the section **title** (required, min 1 character).
 - Instructor can edit the section **description** (optional, supports plain text).
-- Instructor can configure the **after-section behavior** via a dropdown at the bottom of each section:
+- Instructor can choose a section **color theme** from a fixed set of swatches. The selected theme appears as a dot in the section header and is persisted with the section.
+- Instructor can configure the **after-section behavior** via a compact settings row near the section card when routing is in scope:
   - "Continue to next section" (default)
   - "Go to section [X]" (dropdown listing all other sections by title)
   - "Submit exercise"
@@ -219,6 +229,7 @@ If the student finishes the last section and its after-behavior is "Continue to
         "title": "Section Title",
         "description": "Optional description",
         "order": 0,
+        "colorTheme": "blue",
         "afterBehavior": { "action": "continue" },
         "questions": [{ "title": "...", ... }]
       }
@@ -232,7 +243,7 @@ If the student finishes the last section and its after-behavior is "Continue to
 ### FR-6: Cloning
 
 - The clone service (`apps/api/src/services/course/clone.ts`) clones exercise sections alongside questions and options.
-- Section ordering, titles, descriptions, and after-behavior settings are preserved.
+- Section ordering, titles, descriptions, color themes, and after-behavior settings are preserved.
 - Question-to-section mappings are preserved via the section ID map.
 
 ---
@@ -250,6 +261,7 @@ CREATE TABLE exercise_section (
   title       VARCHAR NOT NULL DEFAULT 'Untitled Section',
   description TEXT,
   "order"     BIGINT NOT NULL DEFAULT 0,
+  color_theme VARCHAR NOT NULL DEFAULT 'blue',
   after_behavior JSONB NOT NULL DEFAULT '{"action": "continue"}',
   created_at  TIMESTAMPTZ DEFAULT NOW(),
   updated_at  TIMESTAMPTZ DEFAULT NOW()
@@ -265,21 +277,21 @@ The `after_behavior` JSONB stores one of:
 { action: 'continue' }
 
 // Jump to a specific section
-{ action: 'go_to_section', sectionId: '<uuid>' }
+{ action: 'go_to_section', exerciseSectionId: '<uuid>' }
 
 // Submit the exercise immediately
 { action: 'submit' }
 ```
 
-#### 1.2: `question` Table — Add `section_id`
+#### 1.2: `question` Table — Add `exercise_section_id`
 
 ```sql
-ALTER TABLE question ADD COLUMN section_id UUID REFERENCES exercise_section(id) ON DELETE SET NULL;
-CREATE INDEX idx_question_section_id ON question(section_id);
+ALTER TABLE question ADD COLUMN exercise_section_id UUID REFERENCES exercise_section(id) ON DELETE SET NULL;
+CREATE INDEX idx_question_exercise_section_id ON question(exercise_section_id);
 ```
 
-- `section_id` is **nullable**. When `NULL`, the question belongs to a sectionless exercise (backward compatible).
-- When a question is part of a sectioned exercise, `section_id` is required (enforced at the application level, not DB constraint, to keep migration safe).
+- `exercise_section_id` is **nullable**. When `NULL`, the question belongs to a sectionless exercise (backward compatible).
+- When a question is part of a sectioned exercise, `exercise_section_id` is required (enforced at the application level, not DB constraint, to keep migration safe).
 
 #### 1.3: `exercise` Table — Add `section_display_mode`
 
@@ -307,6 +319,7 @@ export const exerciseSection = pgTable(
     title: varchar().notNull().default('Untitled Section'),
     description: text(),
     order: bigint({ mode: 'number' }).notNull().default(0),
+    colorTheme: varchar('color_theme').notNull().default('blue'),
     afterBehavior: jsonb('after_behavior')
       .notNull()
       .default({ action: 'continue' })
@@ -328,16 +341,16 @@ export const exerciseSection = pgTable(
 Add to `question` table:
 
 ```typescript
-sectionId: uuid('section_id'),
+exerciseSectionId: uuid('exercise_section_id'),
 ```
 
 Add foreign key in `question` table constraints:
 
 ```typescript
 foreignKey({
-  columns: [table.sectionId],
+  columns: [table.exerciseSectionId],
   foreignColumns: [exerciseSection.id],
-  name: 'question_section_id_fkey'
+  name: 'question_exercise_section_id_fkey'
 }).onDelete('set null')
 ```
 
@@ -363,16 +376,18 @@ export type ExerciseSectionAfterAction = 'continue' | 'go_to_section' | 'submit'
 
 export interface ExerciseSectionAfterBehavior {
   action: ExerciseSectionAfterAction;
-  sectionId?: string; // only when action === 'go_to_section'
+  exerciseSectionId?: string; // only when action === 'go_to_section'
 }
 
 export type ExerciseSectionDisplayMode = 'one_question' | 'all_questions';
+export type ExerciseSectionColorTheme = 'blue' | 'green' | 'amber' | 'rose' | 'violet' | 'slate';
 
 export interface ExerciseSectionModel {
   id?: string;
   title: string;
   description?: string | null;
   order: number;
+  colorTheme: ExerciseSectionColorTheme;
   afterBehavior: ExerciseSectionAfterBehavior;
   questions: ExerciseQuestionModel[];
 }
@@ -387,7 +402,7 @@ import { z } from 'zod';
 
 export const ZExerciseSectionAfterBehavior = z.discriminatedUnion('action', [
   z.object({ action: z.literal('continue') }),
-  z.object({ action: z.literal('go_to_section'), sectionId: z.string().uuid() }),
+  z.object({ action: z.literal('go_to_section'), exerciseSectionId: z.string().uuid() }),
   z.object({ action: z.literal('submit') })
 ]);
 
@@ -396,6 +411,7 @@ export const ZExerciseSection = z.object({
   title: z.string().min(1, 'Section title is required'),
   description: z.string().optional().nullable(),
   order: z.number().int().min(0),
+  colorTheme: z.enum(['blue', 'green', 'amber', 'rose', 'violet', 'slate']).default('blue'),
   afterBehavior: ZExerciseSectionAfterBehavior.default({ action: 'continue' })
 });
 
@@ -430,11 +446,11 @@ Required query functions:
 | --- | --- |
 | `getExerciseSectionsByExerciseId(exerciseId)` | Fetch all sections for an exercise, ordered by `order` |
 | `createExerciseSections(sections[])` | Bulk insert sections, return created rows |
-| `updateExerciseSection(sectionId, data)` | Update a single section's title, description, order, or afterBehavior |
-| `deleteExerciseSection(sectionId)` | Delete a section (questions cascade to `section_id = NULL`) |
+| `updateExerciseSection(exerciseSectionId, data)` | Update a single section's title, description, colorTheme, order, or afterBehavior |
+| `deleteExerciseSection(exerciseSectionId)` | Delete a section (questions cascade to `exercise_section_id = NULL`) |
 | `reorderExerciseSections(exerciseId, orderedIds[])` | Batch update `order` field for all sections |
-| `moveQuestionToSection(questionId, sectionId)` | Update a question's `section_id` |
-| `bulkMoveQuestionsToSection(questionIds[], sectionId)` | Move multiple questions to a section |
+| `moveQuestionToSection(questionId, exerciseSectionId)` | Update a question's `exercise_section_id` |
+| `bulkMoveQuestionsToSection(questionIds[], exerciseSectionId)` | Move multiple questions to a section |
 
 ### 4. API Layer Changes
 
@@ -453,7 +469,8 @@ When fetching an exercise (`GET /course/:courseId/exercise/:exerciseId`), the re
     title: string;
     description: string | null;
     order: number;
-    afterBehavior: { action: string; sectionId?: string };
+    colorTheme: 'blue' | 'green' | 'amber' | 'rose' | 'violet' | 'slate';
+    afterBehavior: { action: string; exerciseSectionId?: string };
     questions: Array<{ /* existing question shape */ }>;
   }>;
   questions: Array<{ /* questions without sections (backward compat) */ }>;
@@ -478,7 +495,8 @@ The `PUT /course/:courseId/exercise/:exerciseId` endpoint accepts an optional `s
     title: string;
     description?: string;
     order: number;
-    afterBehavior: { action: string; sectionId?: string };
+    colorTheme?: 'blue' | 'green' | 'amber' | 'rose' | 'violet' | 'slate';
+    afterBehavior: { action: string; exerciseSectionId?: string };
     questionIds: string[];  // ordered list of question IDs in this section
   }>;
   questions?: Array<{ /* existing question update shape */ }>;
@@ -488,7 +506,7 @@ The `PUT /course/:courseId/exercise/:exerciseId` endpoint accepts an optional `s
 Service logic:
 
 1. Upsert sections (create new, update existing, delete removed).
-2. Update `question.section_id` for each question based on `questionIds` in each section.
+2. Update `question.exercise_section_id` for each question based on `questionIds` in each section.
 3. Update `question.order` within each section.
 4. Validate that all `go_to_section` references point to valid section IDs within the same exercise.
 5. Validate that if sections exist, every non-deleted question has a section assignment.
@@ -504,7 +522,7 @@ When fetching submissions for grading, the API returns section groupings:
 ```typescript
 {
   sections: Array<{
-    sectionId: string;
+    exerciseSectionId: string;
     sectionTitle: string;
     subtotal: number;
     maxPoints: number;
@@ -526,7 +544,7 @@ Update `cloneExercises` to:
 1. After creating new exercises, fetch sections for all old exercises.
 2. Create a section ID map (old → new).
 3. Bulk insert new sections with the new exercise IDs.
-4. When cloning questions, include the mapped `sectionId`.
+4. When cloning questions, include the mapped `exerciseSectionId`.
 
 ```typescript
 // Pseudocode addition to cloneExercises():
@@ -539,22 +557,23 @@ if (oldSections.length > 0) {
       title: section.title,
       description: section.description,
       order: section.order,
+      colorTheme: section.colorTheme,
       afterBehavior: section.afterBehavior,
       exerciseId: exerciseIdMap.get(section.exerciseId)!
     }))
   );
 
-  const sectionIdMap = new Map<string, string>();
+  const exerciseSectionIdMap = new Map<string, string>();
   oldSections.forEach((oldSection, index) => {
-    sectionIdMap.set(oldSection.id, newSections[index].id);
+    exerciseSectionIdMap.set(oldSection.id, newSections[index].id);
   });
 
-  // When cloning questions, include mapped sectionId:
-  // sectionId: question.sectionId ? sectionIdMap.get(question.sectionId) : null
+  // When cloning questions, include mapped exerciseSectionId:
+  // exerciseSectionId: question.exerciseSectionId ? exerciseSectionIdMap.get(question.exerciseSectionId) : null
 }
 ```
 
-Update `afterBehavior` references: if a section's `afterBehavior.action === 'go_to_section'`, remap the `sectionId` using the section ID map.
+Update `afterBehavior` references: if a section's `afterBehavior.action === 'go_to_section'`, remap the `exerciseSectionId` using the section ID map.
 
 ### 6. Exercise Template Changes
 
@@ -568,7 +587,8 @@ questionnaire: jsonb().default({}).$type<{
     title: string;
     description?: string;
     order: number;
-    afterBehavior: { action: string; sectionId?: string };
+    colorTheme?: string;
+    afterBehavior: { action: string; exerciseSectionId?: string };
     questions: Array<{
       title: string;
       name: string;
@@ -594,6 +614,7 @@ export interface ExerciseSectionState {
   title: string;
   description: string | null;
   order: number;
+  colorTheme: ExerciseSectionColorTheme;
   afterBehavior: ExerciseSectionAfterBehavior;
   isDirty?: boolean;
   deletedAt?: string;
@@ -626,13 +647,13 @@ export const questionnaire: Writable<{
 
 #### 7.2: Extend Question Type
 
-Add `sectionId` to the `Question` type:
+Add `exerciseSectionId` to the `Question` type:
 
 ```typescript
 export type Question = Omit<ApiQuestion, 'options'> & {
   isDirty?: boolean;
   deletedAt?: string;
-  sectionId?: string | null;
+  exerciseSectionId?: string | null;
   options: QuestionOption[];
 };
 ```
@@ -667,6 +688,7 @@ export function handleAddSection() {
       title: 'Untitled Section',
       description: null,
       order: q.sections.length,
+      colorTheme: 'blue',
       afterBehavior: { action: 'continue' },
       isDirty: true
     };
@@ -674,21 +696,21 @@ export function handleAddSection() {
   });
 }
 
-export function handleRemoveSection(sectionId: string, moveQuestionsToSectionId?: string) {
+export function handleRemoveSection(exerciseSectionId: string, moveQuestionsToExerciseSectionId?: string) {
   questionnaire.update((q) => {
-    const section = q.sections.find((s) => s.id === sectionId);
+    const section = q.sections.find((s) => s.id === exerciseSectionId);
     if (!section) return q;
 
     let updatedQuestions = q.questions;
-    if (moveQuestionsToSectionId) {
+    if (moveQuestionsToExerciseSectionId) {
       updatedQuestions = q.questions.map((question) =>
-        question.sectionId === sectionId
-          ? { ...question, sectionId: moveQuestionsToSectionId, isDirty: true }
+        question.exerciseSectionId === exerciseSectionId
+          ? { ...question, exerciseSectionId: moveQuestionsToExerciseSectionId, isDirty: true }
           : question
       );
     } else {
       updatedQuestions = q.questions.map((question) =>
-        question.sectionId === sectionId
+        question.exerciseSectionId === exerciseSectionId
           ? { ...question, deletedAt: new Date().toString() }
           : question
       );
@@ -697,32 +719,32 @@ export function handleRemoveSection(sectionId: string, moveQuestionsToSectionId?
     return {
       ...q,
       sections: q.sections.map((s) =>
-        s.id === sectionId ? { ...s, deletedAt: new Date().toString() } : s
+        s.id === exerciseSectionId ? { ...s, deletedAt: new Date().toString() } : s
       ),
       questions: updatedQuestions
     };
   });
 }
 
-export function handleMoveQuestionToSection(questionId: string, sectionId: string) {
+export function handleMoveQuestionToSection(questionId: string, exerciseSectionId: string) {
   questionnaire.update((q) => ({
     ...q,
     questions: q.questions.map((question) =>
       question.id === questionId
-        ? { ...question, sectionId, isDirty: true }
+        ? { ...question, exerciseSectionId, isDirty: true }
         : question
     )
   }));
 }
 
 export function handleUpdateSectionAfterBehavior(
-  sectionId: string,
+  exerciseSectionId: string,
   afterBehavior: ExerciseSectionAfterBehavior
 ) {
   questionnaire.update((q) => ({
     ...q,
     sections: q.sections.map((section) =>
-      section.id === sectionId
+      section.id === exerciseSectionId
         ? { ...section, afterBehavior, isDirty: true }
         : section
     )
@@ -731,10 +753,10 @@ export function handleUpdateSectionAfterBehavior(
 
 export function getQuestionsForSection(
   questions: Question[],
-  sectionId: string
+  exerciseSectionId: string
 ): Question[] {
   return questions
-    .filter((q) => q.sectionId === sectionId && !q.deletedAt)
+    .filter((q) => q.exerciseSectionId === exerciseSectionId && !q.deletedAt)
     .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
 }
 
@@ -745,73 +767,90 @@ export function hasSections(sections: ExerciseSectionState[]): boolean {
 
 ### 8. Dashboard UI Changes
 
-#### 8.1: Edit Mode — Section Headers
+#### 8.1: Edit Mode — Section Cards
 
 File: `apps/dashboard/src/lib/features/course/components/exercise/edit-mode.svelte`
 
-When sections exist, render questions grouped under collapsible section headers:
+When sections exist, render questions inside section cards with three distinct zones:
 
 ```
-┌─────────────────────────────────────────┐
-│ Section 1 of 2                      ✕ ⋮ │
-│ [Section Title Input                  ] │
-│ [Description (optional)               ] │
-├─────────────────────────────────────────┤
-│  ┌─ Question Card ──────────────────┐   │
-│  │ Q1: What is...        [Radio ▼]  │   │
-│  │ ...                              │   │
-│  └──────────────────────────────────┘   │
-│  ┌─ Question Card ──────────────────┐   │
-│  │ Q2: Explain...      [Textarea ▼] │   │
-│  │ ...                              │   │
-│  └──────────────────────────────────┘   │
-│                                         │
-│  After section 1: [Continue       ▼]   │
-└─────────────────────────────────────────┘
-
-┌─────────────────────────────────────────┐
-│ Section 2 of 2                      ✕ ⋮ │
-│ ...                                     │
-└─────────────────────────────────────────┘
+┌────────────────────────────────────────────────────────┐
+│ ⋮⋮  ● [Section title input              ] [3 questions] × │  Header
+│     ● ● ● ● ●                                                │  Color swatches
+├────────────────────────────────────────────────────────┤
+│  ┌─ Question sub-card ──────────────────────────────┐  │
+│  │ Q1: What is...                         [Radio ▼] │  │
+│  └──────────────────────────────────────────────────┘  │
+│  ┌─ Question sub-card ──────────────────────────────┐  │  Content
+│  │ Q2: Explain...                       [Textarea ▼]│  │
+│  └──────────────────────────────────────────────────┘  │
+│                         [ + Add question ]             │
+├────────────────────────────────────────────────────────┤
+│  3 required questions                         [↑] [↓]  │  Footer
+└────────────────────────────────────────────────────────┘
 
 [ + Add Section ]
 ```
 
-- Each section has an inline title input and optional description textarea.
-- The "After section N" dropdown appears at the bottom of each section, styled like the Google Forms pattern (see reference image).
-- The three-dot menu (`⋮`) on each section header offers: "Move section up", "Move section down", "Delete section".
-- The "Add question" button inside a section adds a question to that specific section.
-- Questions can be dragged between sections.
+Header:
+- Sits on a secondary background to visually separate it from the white content area.
+- Contains, from left to right: drag handle, color theme dot, editable title input, color swatches, question count badge, and remove button.
+- The title input should visually blend into the header background until focused.
+- Color swatches update the section's `colorTheme`; the dot reflects the selected theme.
 
-#### 8.2: New Shared UI Component — `SectionHeader`
+Content:
+- Sits on the primary white background with comfortable padding.
+- Renders question items stacked vertically.
+- Each question item is its own bordered sub-card.
+- A centered "Add question" button appears below the question list and appends a new question to that section.
 
-File: `packages/ui/src/custom/exercise-question/section-header.svelte` (new)
+Footer:
+- Separated from content by a top border.
+- Shows a small muted required-question count on the left. Until optional questions ship, this count equals the active question count.
+- Shows small up/down arrow icon buttons on the right for moving the section within the exercise.
+
+If post-section routing remains in v1, render the "After section N" control as a compact settings row above the footer or in section settings. Do not overload the footer, which is reserved for required count and section reorder controls.
+If section descriptions remain in v1, expose description editing in an expandable section settings area rather than in the compact header.
+Questions can be dragged between sections, with context-menu movement as a fallback.
+
+#### 8.2: New Dashboard Component — `SectionEditor`
+
+File: `apps/dashboard/src/lib/features/course/components/exercise/section-editor.svelte` (new)
 
 ```typescript
 interface Props {
+  exerciseSectionId: string;
   title: string;
-  description?: string | null;
   sectionNumber: number;
   totalSections: number;
+  colorTheme: ExerciseSectionColorTheme;
   questionCount: number;
-  totalPoints: number;
-  mode: 'edit' | 'take' | 'preview' | 'view';
+  requiredQuestionCount: number;
+  onTitleChange: (title: string) => void;
+  onColorThemeChange: (theme: ExerciseSectionColorTheme) => void;
+  onAddQuestion: () => void;
+  onDelete: () => void;
+  onMoveUp: () => void;
+  onMoveDown: () => void;
+  canMoveUp: boolean;
+  canMoveDown: boolean;
 }
 ```
 
-- In **edit** mode: editable title/description inputs.
-- In **take** mode: read-only title, description, question count, points.
-- In **preview/view** mode: read-only header.
+- Renders the three-zone edit-mode section card described above.
+- Reuses existing question editor markup in the content zone.
+- Uses existing UI primitives for buttons, inputs, badges, and icon buttons.
+- Keep take/preview/read-only section headers separate from this editor component so student-facing screens do not inherit authoring controls.
 
 #### 8.3: New Shared UI Component — `SectionAfterBehavior`
 
 File: `packages/ui/src/custom/exercise-question/section-after-behavior.svelte` (new)
 
-A dropdown component that renders the "After section N" control:
+A dropdown component that renders the "After section N" routing control. It should be visually adjacent to the section editor, but not inside the section editor footer.
 
 ```typescript
 interface Props {
-  sectionId: string;
+  exerciseSectionId: string;
   allSections: Array<{ id: string; title: string }>;
   afterBehavior: ExerciseSectionAfterBehavior;
   onChange: (behavior: ExerciseSectionAfterBehavior) => void;
@@ -910,6 +949,7 @@ When sections exist, group questions under section headers:
     description={section.description}
     sectionNumber={sectionIndex + 1}
     totalSections={activeSections.length}
+    colorTheme={section.colorTheme}
     questionCount={getQuestionsForSection(questions, section.id).length}
     totalPoints={getSectionPoints(questions, section.id)}
     mode="preview"
@@ -964,7 +1004,11 @@ Add under `course.navItem.lessons.exercises.all_exercises`:
   "section.delete_remove": "Delete questions",
   "section.move_up": "Move section up",
   "section.move_down": "Move section down",
+  "section.drag": "Drag section",
   "section.reorder": "Reorder Sections",
+  "section.question_count": "{count} questions",
+  "section.required_count": "{count} required questions",
+  "section.color_theme": "Section color",
   "section.after_behavior_prefix": "After section",
   "section.after_continue": "Continue to next section",
   "section.after_go_to": "Go to section",
@@ -989,8 +1033,8 @@ Add under `course.navItem.lessons.exercises.all_exercises`:
 | Scenario | Behavior |
 | --- | --- |
 | Existing exercise, no sections | `sections` array is empty. All code paths fall through to existing flat-question logic. No migration needed. |
-| Existing exercise, first section added | All questions auto-assigned to "Section 1". `sectionId` set on all questions. |
-| Sectioned exercise, last section deleted | All questions become sectionless. `sectionId` set to `NULL`. Exercise reverts to flat mode. |
+| Existing exercise, first section added | All questions auto-assigned to "Section 1". `exerciseSectionId` set on all questions. |
+| Sectioned exercise, last section deleted | All questions become sectionless. `exerciseSectionId` set to `NULL`. Exercise reverts to flat mode. |
 | Old API clients that don't send `sections` | `sections` field is optional in update payload. Omitting it means "don't change sections." |
 | Exercise templates without sections | `sections` field is absent in JSONB. Template import uses `questions` array (current behavior). |
 
@@ -1001,10 +1045,11 @@ Add under `course.navItem.lessons.exercises.all_exercises`:
 ### Database Migration
 
 1. Create `exercise_section` table.
-2. Add `section_id` column to `question` table (nullable, FK to `exercise_section`).
+2. Add `exercise_section_id` column to `question` table (nullable, FK to `exercise_section`).
 3. Add `section_display_mode` column to `exercise` table (default `'one_question'`).
-4. Add index on `question.section_id`.
-5. No data migration needed — existing exercises remain sectionless.
+4. Add `color_theme` to `exercise_section` with default `'blue'`.
+5. Add index on `question.exercise_section_id`.
+6. No data migration needed — existing exercises remain sectionless.
 
 ### Rollout Strategy
 
@@ -1026,7 +1071,7 @@ Add under `course.navItem.lessons.exercises.all_exercises`:
 | `packages/db/src/queries/exercise/exercise-section.ts` | CRUD queries for exercise sections |
 | `packages/utils/src/validation/exercise/exercise-section.ts` | Zod schemas for section validation |
 | `packages/question-types/src/exercise-section-types.ts` | TypeScript types for sections |
-| `packages/ui/src/custom/exercise-question/section-header.svelte` | Section header UI component |
+| `packages/ui/src/custom/exercise-question/section-header.svelte` | Read-only section header for take/preview/view modes |
 | `packages/ui/src/custom/exercise-question/section-after-behavior.svelte` | After-section behavior dropdown |
 | `packages/ui/src/custom/exercise-question/section-navigation-sidebar.svelte` | Section-grouped question nav |
 | `apps/dashboard/src/lib/features/course/components/exercise/section-editor.svelte` | Section editing card (edit mode) |
@@ -1037,7 +1082,7 @@ Add under `course.navItem.lessons.exercises.all_exercises`:
 
 | File | Changes |
 | --- | --- |
-| `packages/db/src/schema.ts` | Add `exerciseSection` table, `sectionId` to `question`, `sectionDisplayMode` to `exercise` |
+| `packages/db/src/schema.ts` | Add `exerciseSection` table with `colorTheme`, `exerciseSectionId` to `question`, `sectionDisplayMode` to `exercise` |
 | `packages/db/src/queries/exercise/index.ts` | Export new section queries |
 | `packages/question-types/src/index.ts` | Export `exercise-section-types` |
 | `packages/ui/src/custom/exercise-question/index.ts` | Export new section components |
@@ -1046,14 +1091,14 @@ Add under `course.navItem.lessons.exercises.all_exercises`:
 | `apps/api/src/routes/course/exercise.ts` | Accept/return sections in exercise endpoints |
 | `apps/api/src/services/exercise/exercise.ts` | Section upsert logic in exercise update |
 | `apps/api/src/services/course/clone.ts` | Clone sections, remap IDs and afterBehavior references |
-| `apps/dashboard/src/lib/features/course/components/exercise/store.ts` | Add `sections`, `sectionDisplayMode`, section helpers |
+| `apps/dashboard/src/lib/features/course/components/exercise/store.ts` | Add `sections`, `sectionDisplayMode`, `colorTheme`, section helpers |
 | `apps/dashboard/src/lib/features/course/components/exercise/edit-mode.svelte` | Render section-grouped editor |
 | `apps/dashboard/src/lib/features/course/components/exercise/view-mode.svelte` | Section-aware take flow |
 | `apps/dashboard/src/lib/features/course/components/exercise/preview.svelte` | Section-grouped preview |
 | `apps/dashboard/src/lib/features/course/components/exercise/submissions/individual.svelte` | Section-grouped grading |
 | `apps/dashboard/src/lib/features/course/components/exercise/submissions/summary.svelte` | Section-grouped analytics |
 | `apps/dashboard/src/lib/features/course/pages/exercise.svelte` | "Add Section" button, section display mode setting |
-| `apps/dashboard/src/lib/features/course/types.ts` | Extend `Question` with `sectionId` |
+| `apps/dashboard/src/lib/features/course/types.ts` | Extend `Question` with `exerciseSectionId` |
 | `apps/dashboard/src/lib/utils/translations/en.json` | Section-related translation keys |
 
 ---
@@ -1066,7 +1111,7 @@ Add under `course.navItem.lessons.exercises.all_exercises`:
 - Exercise update with sections — questions correctly assigned to sections.
 - Exercise fetch returns sections with nested questions in correct order.
 - After-behavior validation — `go_to_section` must reference a valid section.
-- Clone service preserves sections, question mappings, and remaps afterBehavior sectionIds.
+- Clone service preserves sections, question mappings, and remaps afterBehavior exerciseSectionIds.
 - Backward compat: exercise without sections works identically to before.
 - Submission fetch returns section-grouped data when sections exist.
 
@@ -1124,12 +1169,13 @@ pnpm --filter @cio/dashboard build
 | After-behavior "go to section" can create loops (A→B→A) | Validate at save time: warn if cycles detected, but allow (instructor may want loops intentionally for review) |
 | Drag-and-drop between sections may be unreliable on mobile | Provide "Move to section" context menu as a fallback; drag-drop is enhancement only |
 | Large exercises with many sections may slow down the editor | Lazy-render collapsed sections; only expand the active section |
-| Clone service must remap `afterBehavior.sectionId` references | Explicit remap step in clone logic with validation |
+| Clone service must remap `afterBehavior.exerciseSectionId` references | Explicit remap step in clone logic with validation |
 
 ---
 
 ## Open Questions
 
-1. Should we support a "section shuffle" mode (randomize section order) independently of question shuffle?
-2. Should the section navigation sidebar be collapsible or always visible during take mode?
-3. Should after-behavior "Go to section X" carry over answered data, or should the target section reset?
+1. Should v1 include Google Forms-style post-section routing, or should v1 only support linear sections with submit at the end?
+2. Should we support a "section shuffle" mode (randomize section order) independently of question shuffle?
+3. Should the section navigation sidebar be collapsible or always visible during take mode?
+4. Should after-behavior "Go to section X" carry over answered data, or should the target section reset?
diff --git a/prd/exercise-sections/implementation-plan.md b/prd/exercise-sections [DONE]/implementation-plan.md
similarity index 79%
rename from prd/exercise-sections/implementation-plan.md
rename to prd/exercise-sections [DONE]/implementation-plan.md
index 7b3b11c5..3a69ae17 100644
--- a/prd/exercise-sections/implementation-plan.md
+++ b/prd/exercise-sections [DONE]/implementation-plan.md	
@@ -1,4 +1,6 @@
-# Exercise Sections — Implementation Plan
+# Exercise Question Sections — Implementation Plan
+
+This plan implements sections inside a single exercise. It does not change course sections. The existing `exercise.sectionId` field continues to mean the course section that contains an exercise; the new question grouping uses `question.exerciseSectionId` / DB `question.exercise_section_id`.
 
 ## Delivery Phases
 
@@ -32,6 +34,7 @@ export const exerciseSection = pgTable(
     title: varchar().notNull().default('Untitled Section'),
     description: text(),
     order: bigint({ mode: 'number' }).notNull().default(0),
+    colorTheme: varchar('color_theme').notNull().default('blue'),
     afterBehavior: jsonb('after_behavior')
       .notNull()
       .default({ action: 'continue' }),
@@ -49,19 +52,19 @@ export const exerciseSection = pgTable(
 );
 ```
 
-3. Add `sectionId` column to the existing `question` table definition. Find the `question` table object and add this column after `exerciseId`:
+3. Add `exerciseSectionId` column to the existing `question` table definition. Find the `question` table object and add this column after `exerciseId`:
 
 ```typescript
-sectionId: uuid('section_id'),
+exerciseSectionId: uuid('exercise_section_id'),
 ```
 
 4. Add a foreign key constraint in the `question` table's constraint array:
 
 ```typescript
 foreignKey({
-  columns: [table.sectionId],
+  columns: [table.exerciseSectionId],
   foreignColumns: [exerciseSection.id],
-  name: 'question_section_id_fkey'
+  name: 'question_exercise_section_id_fkey'
 }).onDelete('set null')
 ```
 
@@ -89,18 +92,19 @@ sectionDisplayMode: varchar('section_display_mode').default('one_question'),
 **What to do**:
 
 1. Generate a Drizzle migration from the schema changes in Ticket 1.1.
-2. The generated SQL should create the `exercise_section` table, add `section_id` to `question`, add `section_display_mode` to `exercise`, and create the index.
+2. The generated SQL should create the `exercise_section` table, add `exercise_section_id` to `question`, add `section_display_mode` to `exercise`, and create the index.
 3. Review the generated migration carefully to ensure:
-   - `section_id` on `question` is nullable (no `NOT NULL`).
+   - `exercise_section_id` on `question` is nullable (no `NOT NULL`).
    - `section_display_mode` on `exercise` has default `'one_question'`.
+   - `color_theme` on `exercise_section` has default `'blue'`.
    - The `exercise_section` table has `ON DELETE CASCADE` for `exercise_id`.
-   - The `question.section_id` FK has `ON DELETE SET NULL`.
+   - The `question.exercise_section_id` FK has `ON DELETE SET NULL`.
 
 **How to verify**:
 - Migration runs successfully against a local database.
 - Existing data is not affected.
 - `SELECT * FROM exercise_section` returns empty.
-- `SELECT section_id FROM question LIMIT 1` returns `NULL`.
+- `SELECT exercise_section_id FROM question LIMIT 1` returns `NULL`.
 
 ---
 
@@ -120,16 +124,18 @@ export type ExerciseSectionAfterAction = 'continue' | 'go_to_section' | 'submit'
 
 export interface ExerciseSectionAfterBehavior {
   action: ExerciseSectionAfterAction;
-  sectionId?: string;
+  exerciseSectionId?: string;
 }
 
 export type ExerciseSectionDisplayMode = 'one_question' | 'all_questions';
+export type ExerciseSectionColorTheme = 'blue' | 'green' | 'amber' | 'rose' | 'violet' | 'slate';
 
 export interface ExerciseSectionModel {
   id?: string;
   title: string;
   description?: string | null;
   order: number;
+  colorTheme: ExerciseSectionColorTheme;
   afterBehavior: ExerciseSectionAfterBehavior;
   questions: ExerciseQuestionModel[];
 }
@@ -169,7 +175,7 @@ import { z } from 'zod';
 
 export const ZExerciseSectionAfterBehavior = z.discriminatedUnion('action', [
   z.object({ action: z.literal('continue') }),
-  z.object({ action: z.literal('go_to_section'), sectionId: z.string().uuid() }),
+  z.object({ action: z.literal('go_to_section'), exerciseSectionId: z.string().uuid() }),
   z.object({ action: z.literal('submit') })
 ]);
 
@@ -178,6 +184,7 @@ export const ZExerciseSection = z.object({
   title: z.string().min(1, 'Section title is required'),
   description: z.string().optional().nullable(),
   order: z.number().int().min(0),
+  colorTheme: z.enum(['blue', 'green', 'amber', 'rose', 'violet', 'slate']).default('blue'),
   afterBehavior: ZExerciseSectionAfterBehavior.default({ action: 'continue' }),
   questionIds: z.array(z.string()).optional()
 });
@@ -255,7 +262,8 @@ export async function createExerciseSections(
     title: string;
     description?: string | null;
     order: number;
-    afterBehavior?: { action: string; sectionId?: string };
+    colorTheme?: string;
+    afterBehavior?: { action: string; exerciseSectionId?: string };
   }>
 ) {
   if (sections.length === 0) return [];
@@ -263,37 +271,38 @@ export async function createExerciseSections(
 }
 
 export async function updateExerciseSection(
-  sectionId: string,
+  exerciseSectionId: string,
   data: Partial<{
     title: string;
     description: string | null;
     order: number;
-    afterBehavior: { action: string; sectionId?: string };
+    colorTheme: string;
+    afterBehavior: { action: string; exerciseSectionId?: string };
   }>
 ) {
   return db
     .update(exerciseSection)
     .set({ ...data, updatedAt: new Date().toISOString() })
-    .where(eq(exerciseSection.id, sectionId))
+    .where(eq(exerciseSection.id, exerciseSectionId))
     .returning();
 }
 
-export async function deleteExerciseSection(sectionId: string) {
-  return db.delete(exerciseSection).where(eq(exerciseSection.id, sectionId));
+export async function deleteExerciseSection(exerciseSectionId: string) {
+  return db.delete(exerciseSection).where(eq(exerciseSection.id, exerciseSectionId));
 }
 
-export async function moveQuestionToSection(questionId: number, sectionId: string | null) {
+export async function moveQuestionToSection(questionId: number, exerciseSectionId: string | null) {
   return db
     .update(question)
-    .set({ sectionId })
+    .set({ exerciseSectionId })
     .where(eq(question.id, questionId));
 }
 
-export async function bulkMoveQuestionsToSection(questionIds: number[], sectionId: string | null) {
+export async function bulkMoveQuestionsToSection(questionIds: number[], exerciseSectionId: string | null) {
   if (questionIds.length === 0) return;
   return db
     .update(question)
-    .set({ sectionId })
+    .set({ exerciseSectionId })
     .where(inArray(question.id, questionIds));
 }
 ```
@@ -335,9 +344,9 @@ export * from './exercise-section';
 const sections = await getExerciseSectionsByExerciseId(exerciseId);
 ```
 
-3. Group questions by `sectionId`:
-   - Questions with a `sectionId` go into their respective section's `questions` array.
-   - Questions without a `sectionId` go into the top-level `questions` array.
+3. Group questions by `exerciseSectionId`:
+   - Questions with an `exerciseSectionId` go into their respective section's `questions` array.
+   - Questions without an `exerciseSectionId` go into the top-level `questions` array.
 4. Return the response shaped as:
 
 ```typescript
@@ -349,6 +358,7 @@ const sections = await getExerciseSectionsByExerciseId(exerciseId);
     title: section.title,
     description: section.description,
     order: section.order,
+    colorTheme: section.colorTheme,
     afterBehavior: section.afterBehavior,
     questions: questionsInSection  // sorted by order
   })),
@@ -381,19 +391,19 @@ const sections = await getExerciseSectionsByExerciseId(exerciseId);
 
 ```
 For each section in the payload:
-  - If section has `id` and exists in DB → update title, description, order, afterBehavior
+  - If section has `id` and exists in DB → update title, description, colorTheme, order, afterBehavior
   - If section has no `id` → create new section
   - Sections in DB that are NOT in the payload → delete them
 
 For each section:
   - Get `questionIds` from the section payload
-  - Update each question's `sectionId` to this section's ID
+  - Update each question's `exerciseSectionId` to this section's ID
   - Update each question's `order` based on its position in `questionIds`
 ```
 
 4. Validation rules:
    - If `sections` is provided and non-empty, every non-deleted question must be assigned to a section.
-   - If any section has `afterBehavior.action === 'go_to_section'`, the referenced `sectionId` must exist in the same exercise.
+   - If any section has `afterBehavior.action === 'go_to_section'`, the referenced `exerciseSectionId` must exist in the same exercise.
    - If `sections` is empty or omitted, don't touch existing sections.
 
 5. Update `sectionDisplayMode` on the exercise if provided.
@@ -433,7 +443,7 @@ For each section:
   // existing fields...
   sections: [
     {
-      sectionId: 'uuid',
+      exerciseSectionId: 'uuid',
       sectionTitle: 'Part A',
       subtotal: 15,
       maxPoints: 20,
@@ -471,7 +481,7 @@ For each section:
 const oldExerciseIds = oldExercises.map((ex) => ex.id);
 const oldSections = await getExerciseSectionsByExerciseIds(oldExerciseIds);
 
-let sectionIdMap = new Map<string, string>();
+let exerciseSectionIdMap = new Map<string, string>();
 
 if (oldSections.length > 0) {
   // 4b. Create new sections with mapped exercise IDs
@@ -480,6 +490,7 @@ if (oldSections.length > 0) {
       title: section.title,
       description: section.description,
       order: section.order,
+      colorTheme: section.colorTheme,
       afterBehavior: section.afterBehavior,
       exerciseId: exerciseIdMap.get(section.exerciseId)!
     }))
@@ -487,17 +498,17 @@ if (oldSections.length > 0) {
 
   // 4c. Build section ID map
   oldSections.forEach((oldSection, index) => {
-    sectionIdMap.set(oldSection.id, newSections[index].id);
+    exerciseSectionIdMap.set(oldSection.id, newSections[index].id);
   });
 
-  // 4d. Remap afterBehavior.sectionId references
+  // 4d. Remap afterBehavior.exerciseSectionId references
   for (const newSection of newSections) {
     const behavior = newSection.afterBehavior as any;
-    if (behavior?.action === 'go_to_section' && behavior.sectionId) {
-      const remappedId = sectionIdMap.get(behavior.sectionId);
+    if (behavior?.action === 'go_to_section' && behavior.exerciseSectionId) {
+      const remappedId = exerciseSectionIdMap.get(behavior.exerciseSectionId);
       if (remappedId) {
         await updateExerciseSection(newSection.id, {
-          afterBehavior: { action: 'go_to_section', sectionId: remappedId }
+          afterBehavior: { action: 'go_to_section', exerciseSectionId: remappedId }
         });
       }
     }
@@ -505,10 +516,10 @@ if (oldSections.length > 0) {
 }
 ```
 
-3. When inserting cloned questions, include `sectionId`:
+3. When inserting cloned questions, include `exerciseSectionId`:
 
 ```typescript
-sectionId: question.sectionId ? sectionIdMap.get(question.sectionId) ?? null : null
+exerciseSectionId: question.exerciseSectionId ? exerciseSectionIdMap.get(question.exerciseSectionId) ?? null : null
 ```
 
 4. Also copy `sectionDisplayMode` when creating the new exercise.
@@ -519,8 +530,9 @@ sectionId: question.sectionId ? sectionIdMap.get(question.sectionId) ?? null : n
 **How to verify**:
 - Clone a course with sectioned exercises.
 - Verify cloned exercise has same number of sections with correct titles.
+- Verify cloned section color themes are preserved.
 - Verify questions are assigned to correct cloned sections.
-- Verify afterBehavior `sectionId` references point to the NEW section IDs (not old ones).
+- Verify afterBehavior `exerciseSectionId` references point to the NEW section IDs (not old ones).
 - Verify `sectionDisplayMode` is preserved.
 
 ---
@@ -542,6 +554,7 @@ sectionId: question.sectionId ? sectionIdMap.get(question.sectionId) ?? null : n
 ```typescript
 import type {
   ExerciseSectionAfterBehavior,
+  ExerciseSectionColorTheme,
   ExerciseSectionDisplayMode
 } from '@cio/question-types';
 
@@ -550,6 +563,7 @@ export interface ExerciseSectionState {
   title: string;
   description: string | null;
   order: number;
+  colorTheme: ExerciseSectionColorTheme;
   afterBehavior: ExerciseSectionAfterBehavior;
   isDirty?: boolean;
   deletedAt?: string;
@@ -560,16 +574,17 @@ Add `sections` and `sectionDisplayMode` to the questionnaire writable's type and
 
 3. Add helper functions (see PRD Section 7.4):
    - `handleAddSection()`
-   - `handleRemoveSection(sectionId, moveQuestionsToSectionId?)`
-   - `handleMoveQuestionToSection(questionId, sectionId)`
-   - `handleUpdateSectionAfterBehavior(sectionId, afterBehavior)`
-   - `getQuestionsForSection(questions, sectionId)`
+   - `handleRemoveSection(exerciseSectionId, moveQuestionsToExerciseSectionId?)`
+   - `handleMoveQuestionToSection(questionId, exerciseSectionId)`
+   - `handleUpdateSectionAfterBehavior(exerciseSectionId, afterBehavior)`
+   - `handleUpdateSectionColorTheme(exerciseSectionId, colorTheme)`
+   - `getQuestionsForSection(questions, exerciseSectionId)`
    - `hasSections(sections)`
    - `handleReorderSections(orderedSectionIds)`
 
-4. Update `handleAddQuestion()` to accept an optional `sectionId` parameter. When sections exist, the new question must have a `sectionId`.
+4. Update `handleAddQuestion()` to accept an optional `exerciseSectionId` parameter. When sections exist, the new question must have an `exerciseSectionId`.
 
-5. Extend `Question` type in `apps/dashboard/src/lib/features/course/types.ts` to include `sectionId`.
+5. Extend `Question` type in `apps/dashboard/src/lib/features/course/types.ts` to include `exerciseSectionId`.
 
 6. Extend the metadata store to include `currentSectionIndex` and `sectionPhase`.
 
@@ -580,31 +595,32 @@ Add `sections` and `sectionDisplayMode` to the questionnaire writable's type and
 **How to verify**:
 - Import and call `handleAddSection()` — store updates with a new section.
 - `getQuestionsForSection()` returns filtered questions.
-- `handleMoveQuestionToSection()` updates the question's `sectionId`.
+- `handleMoveQuestionToSection()` updates the question's `exerciseSectionId`.
 - `pnpm --filter @cio/dashboard build` succeeds.
 
 ---
 
-### Ticket 3.2: Section Header UI Component
+### Ticket 3.2: Section Editor UI Component
 
 **Priority**: P0
 **Estimate**: 2–3 hours
 
 **What to do**:
 
-1. Create `packages/ui/src/custom/exercise-question/section-header.svelte`:
+1. Create `apps/dashboard/src/lib/features/course/components/exercise/section-editor.svelte`. This is the edit-mode section card that wraps existing question editor markup.
 
 ```typescript
 interface Props {
+  exerciseSectionId: string;
   title: string;
-  description?: string | null;
   sectionNumber: number;
   totalSections: number;
-  questionCount?: number;
-  totalPoints?: number;
-  mode: 'edit' | 'take' | 'preview' | 'view';
+  colorTheme: ExerciseSectionColorTheme;
+  questionCount: number;
+  requiredQuestionCount: number;
   onTitleChange?: (title: string) => void;
-  onDescriptionChange?: (description: string) => void;
+  onColorThemeChange?: (colorTheme: ExerciseSectionColorTheme) => void;
+  onAddQuestion?: () => void;
   onDelete?: () => void;
   onMoveUp?: () => void;
   onMoveDown?: () => void;
@@ -614,35 +630,32 @@ interface Props {
 }
 ```
 
-2. In **edit** mode, render:
-   - A badge showing "Section N of M" (styled similar to the Google Forms purple badge in the reference image).
-   - An editable title input (inline, not a dialog).
-   - An optional description textarea (placeholder: "Description (optional)").
-   - A close button (✕) and a three-dot menu with "Move up", "Move down", "Delete section".
+2. Render three distinct zones:
+   - Header: secondary background, drag handle on the far left, selected color dot, editable title input that blends into the background, small color swatches, question count badge, and remove button.
+   - Content: primary white background with padding, question items stacked vertically, each in a bordered sub-card, plus a centered "Add question" button below the list.
+   - Footer: top border, muted required-question count on the left, small up/down arrow icon buttons on the right.
 
-3. In **take** mode, render:
-   - Section title (read-only, prominent).
-   - Section description (read-only).
-   - Question count and total points.
-   - No edit controls.
+3. The color swatches use the supported `ExerciseSectionColorTheme` values. The swatch click updates the section state and marks it dirty.
 
-4. In **preview/view** mode, render:
-   - Section title as a heading.
-   - Section description below it.
-   - No interactive controls.
+4. Compute `requiredQuestionCount` from active questions where `required !== false`. Until optional questions are implemented, this equals the active question count.
 
-5. Export from `packages/ui/src/custom/exercise-question/index.ts`.
+5. Use icon buttons for drag/reorder/remove affordances. Use existing UI button/input primitives and `ui:` prefixes for UI theme color classes.
+
+6. If section descriptions remain in v1, expose description editing in an expandable section settings area instead of placing it in the compact header.
 
 **Files to create**:
-- `packages/ui/src/custom/exercise-question/section-header.svelte`
+- `apps/dashboard/src/lib/features/course/components/exercise/section-editor.svelte`
 
 **Files to change**:
-- `packages/ui/src/custom/exercise-question/index.ts`
+- `apps/dashboard/src/lib/features/course/components/exercise/edit-mode.svelte`
 
 **How to verify**:
-- Component renders correctly in all modes.
-- Edit mode: typing in title/description fires callbacks.
-- `pnpm --filter @cio/ui build` succeeds.
+- Header, content, and footer zones render with the expected backgrounds and borders.
+- Typing in the title fires the title callback.
+- Selecting a color swatch updates the section color dot and store state.
+- Clicking the centered "Add question" button creates a question assigned to the section.
+- Up/down arrow buttons reorder sections and respect disabled states at the first/last section.
+- `pnpm --filter @cio/dashboard build` succeeds.
 
 ---
 
@@ -670,15 +683,15 @@ interface Props {
 }
 ```
 
-2. Render a row at the bottom of each section card:
+2. Render a compact routing settings row near each section card, outside the section editor footer:
    - Label: "After section {N}" (left side).
    - A `<Select>` dropdown (right side) with options:
      - "Continue to next section" → `{ action: 'continue' }`
-     - "Go to section: [Section Title]" → one entry per OTHER section → `{ action: 'go_to_section', sectionId: '...' }`
+     - "Go to section: [Section Title]" → one entry per OTHER section → `{ action: 'go_to_section', exerciseSectionId: '...' }`
      - "Submit exercise" → `{ action: 'submit' }`
    - The currently selected option is shown in the trigger.
 
-3. Style to match the Google Forms reference (see reference image): the row sits inside the section card, slightly separated from the questions above.
+3. Style it as a secondary settings row. Do not place it in the section editor footer; that footer is reserved for required-question count and section reorder controls.
 
 4. Export from `packages/ui/src/custom/exercise-question/index.ts`.
 
@@ -713,44 +726,42 @@ This is the largest ticket. It modifies `edit-mode.svelte` to render questions i
 
 ```svelte
 {#each activeSections as section, sectionIndex}
-  <div class="section-card">
-    <SectionHeader
-      title={section.title}
-      description={section.description}
-      sectionNumber={sectionIndex + 1}
-      totalSections={activeSections.length}
-      mode="edit"
-      onTitleChange={(title) => updateSection(section.id, { title })}
-      onDescriptionChange={(desc) => updateSection(section.id, { description: desc })}
-      onDelete={() => initDeleteSection(section.id)}
-      onMoveUp={() => moveSectionUp(section.id)}
-      onMoveDown={() => moveSectionDown(section.id)}
-      canMoveUp={sectionIndex > 0}
-      canMoveDown={sectionIndex < activeSections.length - 1}
-    />
-
+  <SectionEditor
+    exerciseSectionId={section.id}
+    title={section.title}
+    sectionNumber={sectionIndex + 1}
+    totalSections={activeSections.length}
+    colorTheme={section.colorTheme}
+    questionCount={getQuestionsForSection($questionnaire.questions, section.id).length}
+    requiredQuestionCount={getRequiredQuestionCount(section.id)}
+    onTitleChange={(title) => updateSection(section.id, { title })}
+    onColorThemeChange={(colorTheme) => handleUpdateSectionColorTheme(section.id, colorTheme)}
+    onAddQuestion={() => handleAddQuestion(section.id)}
+    onDelete={() => initDeleteSection(section.id)}
+    onMoveUp={() => moveSectionUp(section.id)}
+    onMoveDown={() => moveSectionDown(section.id)}
+    canMoveUp={sectionIndex > 0}
+    canMoveDown={sectionIndex < activeSections.length - 1}
+  >
     {#each getQuestionsForSection($questionnaire.questions, section.id) as question}
       {#if !question.deletedAt}
-        <!-- Reuse existing QuestionContainer + QuestionRenderer markup -->
+        <!-- Reuse existing QuestionContainer + QuestionRenderer markup inside a bordered sub-card -->
         <QuestionContainer ...>
           ...existing question editing UI...
         </QuestionContainer>
       {/if}
     {/each}
+  </SectionEditor>
 
-    <div class="section-footer">
-      <Button onclick={() => handleAddQuestion(section.id)}>
-        + Add Question
-      </Button>
-      <SectionAfterBehavior
-        sectionIndex={sectionIndex}
-        allSections={activeSections}
-        afterBehavior={section.afterBehavior}
-        onChange={(behavior) => handleUpdateSectionAfterBehavior(section.id, behavior)}
-        labels={sectionAfterBehaviorLabels}
-      />
-    </div>
-  </div>
+  {#if sectionRoutingEnabled}
+    <SectionAfterBehavior
+      sectionIndex={sectionIndex}
+      allSections={activeSections}
+      afterBehavior={section.afterBehavior}
+      onChange={(behavior) => handleUpdateSectionAfterBehavior(section.id, behavior)}
+      labels={sectionAfterBehaviorLabels}
+    />
+  {/if}
 {/each}
 ```
 
@@ -776,7 +787,7 @@ Create `apps/dashboard/src/lib/features/course/components/exercise/section-delet
 
 6. When the first section is added to a sectionless exercise, auto-create "Section 1" and move all existing questions into it.
 
-7. When the last section is deleted, move all remaining questions to sectionless (set `sectionId` to `null`).
+7. When the last section is deleted, move all remaining questions to sectionless (set `exerciseSectionId` to `null`).
 
 **Files to create**:
 - `apps/dashboard/src/lib/features/course/components/exercise/section-delete-modal.svelte`
@@ -788,7 +799,8 @@ Create `apps/dashboard/src/lib/features/course/components/exercise/section-delet
 - Adding a section to a sectionless exercise creates "Section 1" with all existing questions.
 - Adding a second section creates an empty "Section 2".
 - Questions render inside their respective section cards.
-- Section title/description edits are reflected in the store.
+- Section title and color theme edits are reflected in the store.
+- Section card header, content, and footer match the three-zone UI.
 - After-behavior dropdown works and persists selection.
 - Deleting a section with "move questions" moves them.
 - Deleting a section with "delete questions" marks them as deleted.
@@ -814,6 +826,7 @@ const sectionsPayload = activeSections.map((section) => ({
   title: section.title,
   description: section.description,
   order: section.order,
+  colorTheme: section.colorTheme,
   afterBehavior: section.afterBehavior,
   questionIds: getQuestionsForSection($questionnaire.questions, section.id)
     .map((q) => q.id)
@@ -862,14 +875,15 @@ questionnaire.set({
     title: section.title,
     description: section.description,
     order: section.order,
+    colorTheme: section.colorTheme,
     afterBehavior: section.afterBehavior
   })),
   sectionDisplayMode: response.sectionDisplayMode || 'one_question',
-  questions: allQuestions.map((q) => ({ ...q, sectionId: q.sectionId ?? null }))
+  questions: allQuestions.map((q) => ({ ...q, exerciseSectionId: q.exerciseSectionId ?? null }))
 });
 ```
 
-3. Ensure `sectionId` is set on each question from the API response.
+3. Ensure `exerciseSectionId` is set on each question from the API response.
 
 **Files to change**:
 - Exercise page load/fetch logic
@@ -877,7 +891,7 @@ questionnaire.set({
 
 **How to verify**:
 - Navigate to an exercise with sections — store has `sections` populated.
-- Questions have correct `sectionId` values.
+- Questions have correct `exerciseSectionId` values.
 - Navigate to a sectionless exercise — store has `sections: []`.
 
 ---
@@ -915,7 +929,8 @@ questionnaire.set({
 **What to do**:
 
 1. Open `apps/dashboard/src/lib/features/course/components/exercise/preview.svelte`.
-2. When sections exist, render questions grouped under section headers:
+2. Create or reuse a read-only `SectionHeader` component for take/preview/view modes. This is separate from the edit-mode `SectionEditor`.
+3. When sections exist, render questions grouped under section headers:
 
 ```svelte
 {#if hasSections(activeSections)}
@@ -925,6 +940,7 @@ questionnaire.set({
       description={section.description}
       sectionNumber={sectionIndex + 1}
       totalSections={activeSections.length}
+      colorTheme={section.colorTheme}
       questionCount={sectionQuestions.length}
       totalPoints={sectionPoints}
       mode="preview"
@@ -938,10 +954,12 @@ questionnaire.set({
 {/if}
 ```
 
-3. Questions are numbered within their section: "1.", "2." etc., resetting per section.
+4. Questions are numbered within their section: "1.", "2." etc., resetting per section.
 
 **Files to change**:
 - `apps/dashboard/src/lib/features/course/components/exercise/preview.svelte`
+- `packages/ui/src/custom/exercise-question/section-header.svelte` (if not already created by take-mode work)
+- `packages/ui/src/custom/exercise-question/index.ts` (if creating the shared header)
 
 **How to verify**:
 - Preview of sectioned exercise shows section headers and grouped questions.
@@ -1098,7 +1116,7 @@ if hasSectionedExercise:
       → if no more sections, submit exercise
 
     if action === 'go_to_section':
-      → find target section by sectionId
+      → find target section by exerciseSectionId
       → set currentSectionIndex to target's index, set sectionPhase to 'overview'
 
     if action === 'submit':
@@ -1270,10 +1288,8 @@ Ticket 1.3 (Types)
   │     │     └── Ticket 3.5 (Save Flow)
   │     ├── Ticket 3.6 (Fetch → Store)
   │     └── Ticket 4.3 (View Mode)
-  ├── Ticket 3.2 (Section Header)
-  │     ├── Ticket 3.4 (Edit Mode)
-  │     ├── Ticket 3.8 (Preview)
-  │     └── Ticket 4.2 (Section Overview)
+  ├── Ticket 3.2 (Section Editor)
+  │     └── Ticket 3.4 (Edit Mode)
   └── Ticket 3.3 (After-Behavior)
         └── Ticket 3.4 (Edit Mode)
 
@@ -1284,7 +1300,7 @@ Ticket 4.2 (Section Overview) → Ticket 4.3 (View Mode)
 Ticket 4.4 (Grading Individual) — depends on Ticket 2.3
 Ticket 4.5 (Grading Summary) — depends on Ticket 2.3
 Ticket 3.7 (Display Mode Setting) — depends on Ticket 3.1
-Ticket 3.8 (Preview) — depends on Ticket 3.2, 3.1
+Ticket 3.8 (Preview) — depends on Ticket 3.1
 ```
 
 ## Suggested Work Order
@@ -1300,7 +1316,7 @@ For a single developer working sequentially:
 7. **Ticket 2.1** — API Fetch
 8. **Ticket 2.2** — API Update
 9. **Ticket 3.1** — Store
-10. **Ticket 3.2** — Section Header
+10. **Ticket 3.2** — Section Editor
 11. **Ticket 3.3** — After-Behavior
 12. **Ticket 3.6** — Fetch → Store
 13. **Ticket 3.4** — Edit Mode
@@ -1325,16 +1341,24 @@ For a single developer working sequentially:
 
 | File | Status | Description |
 | --- | --- | --- |
-| `exercise-section-types.ts` | **New** | Section model, after-behavior types, display mode type |
+| `exercise-section-types.ts` | **New** | Section model, color theme type, after-behavior types, display mode type |
 | `index.ts` | Modified | Add section types export |
 
 ### `packages/ui/src/custom/exercise-question/`
 
 | File | Status | Description |
 | --- | --- | --- |
-| `section-header.svelte` | **New** | Section header for edit/take/preview/view modes |
+| `section-header.svelte` | **New** | Read-only section header for take/preview/view modes |
 | `section-after-behavior.svelte` | **New** | After-section behavior dropdown |
 | `section-navigation-sidebar.svelte` | **New** | Section-grouped question navigation |
 | `question-navigation.svelte` | Modified | Add section-aware props |
 | `question-list.svelte` | Modified | Support section-grouped rendering |
 | `index.ts` | Modified | Export new components |
+
+### `apps/dashboard/src/lib/features/course/components/exercise/`
+
+| File | Status | Description |
+| --- | --- | --- |
+| `section-editor.svelte` | **New** | Three-zone section editing card: header, content, footer |
+| `section-overview.svelte` | **New** | Section overview screen for student take mode |
+| `section-delete-modal.svelte` | **New** | Section deletion confirmation |
diff --git a/prd/mcp-course-authoring/README.md b/prd/mcp-course-authoring [DONE]/README.md
similarity index 97%
rename from prd/mcp-course-authoring/README.md
rename to prd/mcp-course-authoring [DONE]/README.md
index 892cc6af..391b05d1 100644
--- a/prd/mcp-course-authoring/README.md
+++ b/prd/mcp-course-authoring [DONE]/README.md	
@@ -4,37 +4,37 @@ overview: Build an MCP-compatible authoring surface that lets external AI client
 todos:
   - id: prd-review
     content: Finalize PRD scope, product policy, and success metrics with stakeholders
-    status: pending
+    status: completed
   - id: auth-model
     content: Define shared organization automation key system reused by MCP and Public API
-    status: pending
+    status: completed
   - id: import-schema
     content: Finalize normalized course payload schema shared by prompt and PDF-derived flows
-    status: pending
+    status: completed
   - id: import-validation
     content: Add validation module for structured draft create, update, and publish requests
-    status: pending
+    status: completed
   - id: import-data-model
     content: Add draft persistence tables and query layer
-    status: pending
+    status: completed
   - id: import-api
     content: Add organization-scoped draft and publish routes
-    status: pending
+    status: completed
   - id: mcp-package
     content: Build MCP package with stdio transport and ClassroomIO tool adapters
-    status: pending
+    status: completed
   - id: publish-flow
     content: Implement draft-to-course publish orchestration using existing course, section, lesson, and language services
-    status: pending
+    status: completed
   - id: idempotency
     content: Add idempotency keys and duplicate publish guards for MCP-triggered imports
-    status: pending
+    status: completed
   - id: observability
     content: Add structured logs, audit trail, and rate limits for MCP tools
-    status: pending
+    status: completed
   - id: docs
     content: Document MCP tool contracts, auth setup, payload schema, and agent responsibilities
-    status: pending
+    status: completed
 isProject: false
 ---
 
@@ -42,7 +42,7 @@ isProject: false
 
 ## Status
 
-- Draft
+- Done (shipped)
 
 ## Date
 
@@ -172,8 +172,8 @@ After initial creation, Claude updates the draft by:
 - [packages/utils/src/validation/course/course.ts](/Users/rotimibest/_pros/classroomio/packages/utils/src/validation/course/course.ts)
 - [packages/utils/src/validation/lesson/lesson.ts](/Users/rotimibest/_pros/classroomio/packages/utils/src/validation/lesson/lesson.ts)
 - [packages/utils/src/validation/lesson/language.ts](/Users/rotimibest/_pros/classroomio/packages/utils/src/validation/lesson/language.ts)
-- [prd/ai-course-assistant/README.md](/Users/rotimibest/_pros/classroomio/prd/ai-course-assistant/README.md)
-- [prd/public-api/README.md](/Users/rotimibest/_pros/classroomio/prd/public-api/README.md)
+- [prd/ai-course-assistant [DONE]/README.md](/Users/rotimibest/_pros/classroomio/prd/ai-course-assistant%20[DONE]/README.md)
+- [prd/public-api [DONE]/README.md](/Users/rotimibest/_pros/classroomio/prd/public-api%20[DONE]/README.md)
 
 ## User Personas
 
diff --git a/prd/mcp-course-authoring/consumption-spec.md b/prd/mcp-course-authoring [DONE]/consumption-spec.md
similarity index 100%
rename from prd/mcp-course-authoring/consumption-spec.md
rename to prd/mcp-course-authoring [DONE]/consumption-spec.md
diff --git a/prd/mcp-course-authoring/implementation-plan.md b/prd/mcp-course-authoring [DONE]/implementation-plan.md
similarity index 97%
rename from prd/mcp-course-authoring/implementation-plan.md
rename to prd/mcp-course-authoring [DONE]/implementation-plan.md
index d262f5f0..646063a0 100644
--- a/prd/mcp-course-authoring/implementation-plan.md
+++ b/prd/mcp-course-authoring [DONE]/implementation-plan.md	
@@ -35,7 +35,7 @@
 | MCP-D4 | MCP | Add `publish_course_draft` tool | MCP server tool files | MCP-C2 | Claude can publish reviewed drafts |
 | MCP-E1 | Security | Enforce org-scoped auth and rate limits | middleware + routes | MCP-A4 | Unauthorized access returns 401/403 |
 | MCP-E2 | Observability | Add structured logging and audit trail | services + middleware | MCP-C1 | Draft and publish actions are traceable |
-| MCP-E3 | Docs | Document setup and consumption contract | `prd/mcp-course-authoring/` and docs follow-up | MCP-D4 | Operator docs exist |
+| MCP-E3 | Docs | Document setup and consumption contract | `prd/mcp-course-authoring [DONE]/` and docs follow-up | MCP-D4 | Operator docs exist |
 
 ## Suggested First Sprint Slice
 
diff --git a/prd/org-landing-page-theme-picker/README.md b/prd/org-landing-page-theme-picker [DONE]/README.md
similarity index 99%
rename from prd/org-landing-page-theme-picker/README.md
rename to prd/org-landing-page-theme-picker [DONE]/README.md
index 10d94a29..84b20e86 100644
--- a/prd/org-landing-page-theme-picker/README.md
+++ b/prd/org-landing-page-theme-picker [DONE]/README.md	
@@ -1,5 +1,9 @@
 # Org Landing Page Theme Picker + Unified Content Editor
 
+## Status
+
+- Done (shipped)
+
 ## Context
 The org has 3 landing page theme templates (Minimal, Bold, Classic) in `packages/ui/` that all accept `OrgLandingPageProps` uniformly. However:
 1. The templates are **only used in Storybook** — the actual public landing page (`landing-page.svelte`) renders its own custom legacy HTML
diff --git a/prd/org-landing-page-theme-picker/implementation-plan.md b/prd/org-landing-page-theme-picker [DONE]/implementation-plan.md
similarity index 100%
rename from prd/org-landing-page-theme-picker/implementation-plan.md
rename to prd/org-landing-page-theme-picker [DONE]/implementation-plan.md
diff --git a/prd/programs/README.md b/prd/programs [DONE]/README.md
similarity index 99%
rename from prd/programs/README.md
rename to prd/programs [DONE]/README.md
index fc902035..69dfa9b4 100644
--- a/prd/programs/README.md
+++ b/prd/programs [DONE]/README.md	
@@ -1,5 +1,9 @@
 # Programs PRD
 
+## Status
+
+- Done (shipped)
+
 ## Customer Documentation Draft
 
 This section captures the customer-facing documentation draft for Programs. It is written for end users and can later be adapted into public docs, onboarding content, or help-center material.
diff --git a/prd/public-api/README.md b/prd/public-api [DONE]/README.md
similarity index 98%
rename from prd/public-api/README.md
rename to prd/public-api [DONE]/README.md
index 662c240c..9860a456 100644
--- a/prd/public-api/README.md
+++ b/prd/public-api [DONE]/README.md	
@@ -16,45 +16,49 @@ todos:
     status: completed
   - id: api-tab-page
     content: Replace the placeholder `/org/[slug]/automation/api` page with a real API page that follows the MCP page pattern
-    status: pending
+    status: completed
   - id: api-tab-server-load
     content: Add `/org/[slug]/automation/api/+page.server.ts` to load API key and usage data using the existing organization automation endpoints
-    status: pending
+    status: completed
   - id: api-tab-copy
     content: Add API-specific translations and content for docs links, usage messaging, and key management states
-    status: pending
+    status: completed
   - id: v1-validation-schemas
     content: Add public API input/output validation schemas on top of the existing automation-key schemas
-    status: pending
+    status: completed
   - id: v1-services
     content: Create versioned public API services for courses and audience/students
-    status: pending
+    status: completed
   - id: v1-routes
     content: Create and register `/v1` public API routes authenticated by organization automation keys
-    status: pending
+    status: completed
   - id: public-api-scopes
     content: Finalize the public API scope model and middleware requirements for `api` and `zapier` automation keys
-    status: pending
+    status: completed
   - id: tests
     content: Add API tests for automation auth, `/v1` routes, and contract coverage
-    status: pending
+    status: completed
   - id: openapi-contracts
     content: Ensure all public API routes are represented in generated OpenAPI output
-    status: pending
+    status: completed
   - id: openapi-publish
     content: Regenerate and upload the latest OpenAPI spec via `upload-openapi-spec.ts`
-    status: pending
+    status: completed
   - id: docs-openapi-integration
     content: Add the public API docs experience in `apps/docs`
-    status: pending
+    status: completed
   - id: build-verify
     content: Build and verify API and docs packages after implementation
-    status: pending
+    status: completed
 isProject: false
 ---
 
 # Public API with Organization-Scoped Automation Keys
 
+## Status
+
+- Done (shipped)
+
 ## Goal
 
 Ship a versioned public API on top of the existing organization automation platform. The current codebase already supports shared org-scoped automation keys and a dedicated Automation section in `/org`; this PRD now focuses on the remaining API product work rather than re-specifying the already-shipped foundation.
diff --git a/prd/public-courses/README.md b/prd/public-courses/README.md
index 104f1169..c0f8a165 100644
--- a/prd/public-courses/README.md
+++ b/prd/public-courses/README.md
@@ -1,488 +1,301 @@
 # Public Courses PRD
 
 ## Purpose
-Enable course creators to publish "Public Courses" - a new course type where lesson content is fully accessible without signup, while interactive features (quizzes, exercises, progress tracking) require authentication. This creates a low-friction entry point for learners and a lead generation channel for organizations.
-
-## Problem Statement
-Currently, all courses require signup before accessing any content. This creates friction:
-- Learners abandon at signup gate before seeing course value
-- Organizations can't use courses as top-of-funnel content marketing
-- No way to offer "try before you buy" experiences
-- SEO discoverability is limited (landing pages only, not deep content)
+Enable course creators to publish **Public Courses** — a new course type where content is fully accessible without signup. Public courses treat every visitor as a guest: there is no "sign in to unlock" flow, no progress tracking, no submissions sent to the server. The goal is a low-friction, SEO-indexable surface that creators can use as top-of-funnel content marketing.
 
 ## Product Goals
-1. Create a third course type: **Public Course** (alongside Live Class, Self Paced)
-2. Allow anonymous browsing of full lesson content
-3. Gate interactive features behind authentication (soft nudge, not hard wall)
-4. Drive conversions through value demonstration, not forced signup
-5. Maintain clear UX distinction between guest and authenticated modes
+1. Add a third course type: **Public** (alongside Live Class and Self Paced; Compliance stays unchanged).
+2. Allow anonymous browsing of a public course's full tree (sections, lessons, exercises) with clean readable URLs.
+3. Keep the implementation deliberately small: no auth gating on public courses, no server-side submissions, no analytics, no donations, no live viewer counts.
+4. Give creators a single customizable **Callout** to drive viewers somewhere (main site, sign-up, paid course, etc.).
+5. Design the lesson surface as a focused, distraction-free reading/watching experience.
 
 ## Non-Goals (v1)
-- Partial lesson locking (first X lessons free)
-- Per-lesson public/private toggles
-- Anonymous quiz attempts with delayed signup
+Everything below is explicitly out of scope for this PRD:
+- Guest vs authenticated distinction on public courses (everyone is treated the same)
+- Progress tracking (server, database, or localStorage)
+- Server-side exercise submissions and scoring
+- Guest-to-account conversion / progress merge
+- Analytics, guest events, conversion funnels
+- Live viewer counts / "people learning now"
+- Donations / Stripe payment links on public courses
+- Public-courses directory or landing-page tab
+- Feature flag / phased rollout gating
+- Downloadable asset gating
+- Discussion / community for public courses
+- Per-lesson public/private toggle beyond the existing lock state
 - Public course certificates
-- Revenue sharing for public courses
 
-## User Roles & Permissions
+## User Roles
 
-### Anonymous/Guest User
-- View all lesson content (video, text, embeds)
-- Navigate between lessons
-- See course outline/structure
-- **Cannot:** Take quizzes, submit exercises, track progress, bookmark
+Public courses have **one** viewer role: everyone. Authentication state does not change what a viewer can do on a public course — a logged-in user visiting a public course is treated identically to an anonymous visitor.
 
-### Authenticated User
-- All guest capabilities PLUS:
-- Take quizzes and exercises
-- Track progress (lessons completed, quiz scores)
-- Bookmark/save courses
-- Participate in discussions (if enabled)
-
-### Course Creator/Admin
-- Choose course type at creation: Live Class | Self Paced | **Public Course**
-- Convert existing courses to Public (with warning about implications)
-- View analytics: guest views vs authenticated engagement
+### Course Creator / Admin
+- Selects course type at creation: **Live Class | Self Paced | Public** (Compliance remains a separate flow).
+- Can convert an existing course between types (behavior of conversion is not changed by this PRD).
+- When the course type is `PUBLIC`:
+  - The question-type picker is filtered to **only auto-gradable** question types.
+  - Per-item slugs (lesson / exercise) are editable; otherwise they are auto-generated from the title.
+  - A **Callout** settings panel is available (title, description, button label, button URL).
 
 ## Functional Requirements
 
 ### 1. Course Type Selection
 
-#### At Course Creation
+`COURSE_TYPE` enum today is `['SELF_PACED', 'LIVE_CLASS', 'COMPLIANCE']` with default `'LIVE_CLASS'`. This PRD changes it to:
+
 ```
-Create New Course
-
-[○] Live Class      - Scheduled sessions with instructor
-[○] Self Paced      - Learner progresses at own pace  
-[●] Public Course   - Open access, signup required for quizzes
-
-[Continue] → Course Setup Wizard
+enum COURSE_TYPE = ['SELF_PACED', 'LIVE_CLASS', 'COMPLIANCE', 'PUBLIC']
+default = 'SELF_PACED'
 ```
 
-#### Course Type Indicator
-- Public courses show "Public" badge on cards (landing page, dashboard)
-- Icon: `Globe` or `Unlock` to signify openness
-- Color: Distinct from Live (red) and Self Paced (blue) - suggest green or teal
+Changing the default from `LIVE_CLASS` to `SELF_PACED` is intentional.
 
-### 2. Anonymous Content Access
+A public course must still have `isPublished = true` to be reachable at its public URL. An unpublished public course behaves like any other unpublished course (not accessible).
 
-#### Lesson View (Guest Mode)
+### 2. Only Auto-Gradable Question Types in Public Courses
+
+Public courses are graded **entirely on the client**. The question-type registry already exposes an `autoGradable: boolean` flag on every question type.
+
+- When the course type is `PUBLIC`, the question-type picker only shows question types with `autoGradable === true`.
+- The API rejects attempts to attach a non-auto-gradable question to an exercise belonging to a public course.
+- If a course is converted **into** `PUBLIC` and it already contains non-auto-gradable questions, the conversion is blocked with a clear error listing the offending questions. (No silent data loss.)
+
+### 3. Lock State (reuse existing)
+
+Public courses reuse the existing `lesson.isUnlocked` flag (and the existing `exercise.isUnlocked` flag) as the gate for "free vs gated" content.
+
+- `isUnlocked = true` → content renders normally.
+- `isUnlocked = false` → the content area is replaced by the course's **Callout** (see §5). The sidebar row for a locked item still renders, with a lock icon next to the number.
+
+Since every visitor is treated as a guest, there is no "sign in to unlock" path. A locked item is a call-to-action surface for the creator's callout.
+
+### 4. Public URLs and Slugs
+
+#### Routes
 ```
-┌─────────────────────────────────────────────────────────┐
-│ Course: Introduction to Python              [Sign In]   │
-│                                                         │
-│ ┌──────────────┐  ┌─────────────────────────────────┐   │
-│ │ Lesson 3/12  │  │ Video Player / Lesson Content   │   │
-│ │              │  │                                 │   │
-│ │ ◉ Lesson 1   │  │ [Full content accessible]       │   │
-│ │ ◉ Lesson 2   │  │                                 │   │
-│ │ ◍ Lesson 3   │  │                                 │   │
-│ │ ○ Lesson 4   │  │                                 │   │
-│ │ ...          │  │                                 │   │
-│ └──────────────┘  └─────────────────────────────────┘   │
-│                                                         │
-│                    ┌───────────────────────────────┐    │
-│                    │ 💡 Sign in to:                │    │
-│                    │ • Track your progress         │    │
-│                    │ • Take practice quizzes       │    │
-│                    │ • Earn a certificate          │    │
-│                    │                               │    │
-│                    │ [Create Free Account]         │    │
-│                    └───────────────────────────────┘    │
-└─────────────────────────────────────────────────────────┘
+(org-site)/course/[courseSlug]                    # course overview: tree of sections/lessons/exercises
+(org-site)/course/[courseSlug]/lesson/[itemSlug]  # a single lesson or exercise page
 ```
 
-#### Access Rules
-| Feature | Guest | Authenticated |
-|---------|-------|---------------|
-| View lesson content | ✅ | ✅ |
-| Navigate lessons | ✅ | ✅ |
-| See course outline | ✅ | ✅ |
-| View quiz content | ✅ (read-only) | ✅ |
-| Submit quiz answers | ❌ | ✅ |
-| Submit exercises | ❌ | ✅ |
-| Progress tracking | ❌ (localStorage only) | ✅ |
-| Bookmark/continue | ❌ | ✅ |
-| Discussion forum | Read-only | Read + Write |
+The URL segment is always `/lesson/` whether the item is a lesson or an exercise. The `itemSlug` resolves to one or the other.
 
-### 3. Conversion Nudges (Soft Gates)
+#### Slug storage
+- Add `slug VARCHAR` to `lesson` and `exercise` tables.
+- Slugs are **unique per course** across both `lesson` and `exercise` (they share the same URL segment).
+- On lesson / exercise create, slug is auto-generated from the title (kebab-case, collision-resolved by appending `-2`, `-3`, ...).
+- On title rename, slug is **not** automatically updated (URLs are stable).
+- When the course type is `PUBLIC`, creators can edit the slug from the lesson / exercise settings UI.
+- When the course type is not `PUBLIC`, slugs are still generated and stored (so converting a course to `PUBLIC` later works) but are not surfaced in the UI.
 
-#### Contextual Prompts
-1. **On Quiz View** (guest):
-   ```
-   ┌────────────────────────────────────────┐
-   │ 📋 Practice Quiz: Variables & Types    │
-   │                                        │
-   │ [Question content visible]             │
-   │                                        │
-   │ ┌────────────────────────────────────┐ │
-   │ │ 🚀 Ready to test your knowledge?   │ │
-   │ │                                    │ │
-   │ │ Sign in to take this quiz and      │ │
-   │ │ track your progress.               │ │
-   │ │                                    │ │
-   │ │ [Sign In to Continue]              │ │
-   │ └────────────────────────────────────┘ │
-   └────────────────────────────────────────┘
-   ```
+#### Slug format
+- 1–80 chars, `[a-z0-9]` with single `-` separators, no leading/trailing `-`.
+- Validated on both client and server with a shared Zod schema.
 
-2. **After Lesson Completion** (guest):
-   ```
-   Nice work completing this lesson! 🎉
-   
-   [Sign in] to save your progress and pick up 
-   where you left off next time.
-   
-   [Continue as Guest] [Create Account]
-   ```
+### 5. Data Loading Strategy
 
-3. **Progress Persistence Banner** (guest, after 2+ lessons):
-   ```
-   ⚠️ You're making great progress! Sign in to save 
-   your place before you leave.
-   [Dismiss] [Save My Progress]
-   ```
+- `GET (org-site) /course/[courseSlug]` loads the **full tree** server-side: course metadata, sections, lessons, exercises, slugs, titles, order, and `isUnlocked`. No lesson bodies, no exercise question bodies.
+- `GET (org-site) /course/[courseSlug]/lesson/[itemSlug]` loads the **content** of the single item server-side (video URL, lesson body, or exercise questions with answer keys). This render is SSR for SEO.
+- The tree is not re-fetched when the client navigates between lesson URLs — it is passed down through the shared `+layout.server.ts`.
 
-#### Nudge Strategy
-- **Never block content** with modal on page load
-- **Inline prompts** within context (quiz area, lesson end)
-- **Dismissible** - guests can continue browsing
-- **Frequency cap** - max 1 prompt per session per nudge type
+### 6. Lesson Page Layout
 
-### 4. Anonymous Progress (localStorage)
+Reference designs in `prd/public-courses/design/`:
+- `lesson-page-reference.png` — overall layout
+- `lesson-page-full.png` — full composition (hero video + title + body)
+- `sidebar-active-state.png` — active lesson state in the sidebar
+
+Two-column, non-collapsible layout. No hamburger toggle, no accordion on the sidebar, no hide/show. Sidebar is always visible on desktop.
+
+#### Left sidebar (navigation)
+- Grouped by the course's **sections** (existing `courseSection` / lesson-section concept).
+- Each section renders:
+  - A small, muted section heading (e.g. "AI Foundations"). Plain text — not a button, not collapsible.
+  - A vertical list of that section's lessons and exercises, in their existing `order`.
+- Each row contains:
+  - A **square number badge** on the left with the per-section index (1, 2, 3, …). Numbering resets at the start of each section and is shared across lessons + exercises (they interleave by `order`).
+  - The item title to the right of the badge.
+  - If the item's `isUnlocked === false`, a lock icon replaces the number badge or sits next to it (final placement: TBD with design).
+- The active item (matching the current `itemSlug`) renders with:
+  - **Primary color** (the app's `--primary` token, *not* the hard-coded orange in the screenshots) filling the number badge background, white number text.
+  - **Primary color** title text.
+  - A subtle primary-colored vertical accent bar on the far left edge (outside the sidebar content area, aligned with the row).
+- Hover state (non-active rows):
+  - Number badge gets a slightly darker muted fill.
+  - Title text gets a subtle color shift (muted-foreground → foreground).
+  - Cursor is pointer.
+- No icons on normal rows, no progress rings, no status dots. Keep it text-first.
+
+#### Right content column
+Vertical order, top to bottom:
+1. **Video** (if the item has one) — full-width within the content column, rounded corners, single centered play affordance. Omitted entirely if no video (no empty placeholder).
+2. **Section label** — small, muted text above the title (the name of the section this item belongs to).
+3. **Item title** — large, prominent heading.
+4. **Body** — prose / rich text for lessons, or the rendered question UI for exercises. Readable line length, generous line-height.
+5. **Callout** (see §7) — rendered as an inline card at the bottom of the body, only if the course has a callout configured.
+
+If the item is **locked** (`isUnlocked = false`), the body and video are replaced by the callout card rendered in a larger, centered variant; steps 1–4 above are skipped.
+
+No top banner, no hero image above the video, no breadcrumb. Minimal page chrome.
+
+#### Responsive
+
+**Desktop (≥ `lg`)**
+- Two columns: sidebar fixed width on the left, content column fluid on the right.
+- Sidebar is always visible (not collapsible).
+- No bottom navigation bar.
+
+**Mobile / tablet (< `lg`)**
+- The left sidebar is **hidden**.
+- A **fixed bottom navigation bar** is pinned to the viewport. It has three regions:
+  - **Left**: previous-item button (arrow-left icon). Navigates to the previous item in the flattened, section-ordered sequence. Disabled visually at the first item.
+  - **Center**: large tap target. Shows the current item's position (e.g. the per-section number badge + the item title, or "3 / 12"). Tapping opens a bottom sheet.
+  - **Right**: next-item button (arrow-right icon). Disabled visually at the last item.
+- The bottom sheet (built on `@cio/ui/base/drawer` — vaul-based) slides up from the bottom and contains the **full sidebar tree**: every section with its heading and every numbered row. The sheet supports the native drag-to-dismiss gesture ("swiper from bottom up"). The current item is visually active in the sheet. Tapping a row navigates and auto-closes the sheet.
+- The content column takes the full viewport width minus the bottom bar's height. The page adds bottom padding equal to the bar's height so the callout / body never sits under the bar.
+- The bottom bar uses `--primary` for the center button's accent (matching the sidebar active state) and solid surface background with a top hairline border.
+
+**Shared**
+- "Prev / next sequence" is the flat `ORDER BY sections.order, items.order` across all items (lessons + exercises interleaved). Locked items are part of the sequence — tapping prev/next into a locked item still navigates; the locked state is then rendered in the content column as described in §6.
+- Keyboard shortcuts on desktop: `←` / `→` also move through this sequence (nice-to-have, not required for v1 acceptance).
+
+#### Colors
+All accent colors in the sidebar must resolve to the app's **primary** color token (`--primary`), not the hard-coded orange visible in the reference screenshots. The screenshots are from Cursor Learn and are included purely as a layout reference.
+
+### 7. Creator Callout (per-course setting)
+
+Each public course has an optional **Callout** configured by the creator:
 
-#### What We Track (Guest)
 ```typescript
-// localStorage key: `guest_progress_{courseId}`
-{
-  courseId: "course_xxx",
-  lastVisitedLessonId: "lesson_123",
-  completedLessons: ["lesson_001", "lesson_002"],
-  totalTimeSpent: 1847, // seconds
-  firstVisit: "2026-02-19T10:00:00Z",
-  lastVisit: "2026-02-19T14:30:00Z"
-}
+type CourseCallout = {
+  title: string;        // short, 1 line
+  description: string;  // 1–3 lines
+  buttonLabel: string;  // e.g. "Read more on my site"
+  buttonUrl: string;    // absolute URL, validated
+} | null;
 ```
 
-#### Conversion to Authenticated
-- On signup/login, prompt: "Continue course from where you left off?"
-- Merge localStorage progress into authenticated account
-- Clear localStorage after successful merge
+- Stored as a nullable JSONB column on `course` (e.g. `callout`).
+- Configured from the course settings page (only visible when course type is `PUBLIC`).
+- Rendered on the public lesson page:
+  - As an inline card at the bottom of the lesson/exercise body (on every item).
+  - As the full replacement when an item is locked (larger centered variant).
+- Opens `buttonUrl` in a new tab (`target="_blank" rel="noopener"`).
 
-### 5. Landing Page Integration
+When `callout` is `null`, no callout is rendered anywhere (lesson still reads cleanly without it; locked items show a plain "This lesson is locked" state).
 
-#### New "Public Courses" Section
-```
-Our Courses
+### 8. Client-Side Grading
 
-[Live Classes] [Self Paced] [Public Courses]
+For exercises on a public course:
+- The server ships full question data including answer keys to the client.
+- Grading happens entirely in the browser — correctness, explanations, and "you got X / Y correct" all computed locally.
+- No submission is sent to the server.
+- No attempt history is recorded.
+- Refreshing the page resets the exercise state.
 
-Explore free courses - no signup required to start learning!
+This is an intentional trade-off: public courses are marketing surfaces, so answer keys are not considered sensitive.
 
-┌─────────────┐ ┌─────────────┐ ┌─────────────┐
-│ [thumbnail] │ │ [thumbnail] │ │ [thumbnail] │
-│             │ │             │ │             │
-│ Python      │ │ Web Design  │ │ Excel       │
-│ Basics      │ │ Fundamentals│ │ for Work    │
-│             │ │             │ │             │
-│ 🌐 Public   │ │ 🌐 Public   │ │ 🌐 Public   │
-│ ⭐ 4.8 (234)│ │ ⭐ 4.6 (189)│ │ ⭐ 4.9 (512)│
-│             │ │             │ │             │
-│ [Start      │ │ [Start      │ │ [Start      │
-│  Learning]  │ │  Learning]  │ │  Learning]  │
-└─────────────┘ └─────────────┘ └─────────────┘
-```
+### 9. SEO
 
-#### Course Card Badges
-- **Live Class**: "📅 Live" badge (red)
-- **Self Paced**: "📚 Self Paced" badge (blue)
-- **Public Course**: "🌐 Public" badge (green/teal)
+- Public course lesson URLs render server-side (SvelteKit SSR).
+- Each lesson page sets:
+  - `<title>` = item title + course title
+  - `<meta name="description">` = course description or first ~150 chars of the item body
+  - `<link rel="canonical">` = the public URL
+  - `og:type=article`, `og:title`, `og:description`, `og:image` (course banner)
+- Locked items still render meta tags but the body is replaced by the callout; the `<description>` falls back to the course description.
+- No `robots` meta restrictions beyond what the org already sets globally.
 
-### 6. URL Structure
+## Data Model Changes
+
+### `course` table
+- `type` enum: add `'PUBLIC'`, change default to `'SELF_PACED'`.
+- New column `callout JSONB NULL` (shape described in §7).
+
+### `lesson` table
+- New column `slug VARCHAR NULL`.
+- Backfill existing rows with kebab-cased titles (collision-resolved per course).
+- After backfill, `slug` becomes `NOT NULL` in a follow-up migration.
+- Existing `public BOOLEAN` column is deprecated — not referenced in new code. Column is **not** dropped in this PRD (to keep the migration small).
+
+### `exercise` table
+- New column `slug VARCHAR NULL`, same treatment as `lesson.slug`.
+
+### Slug uniqueness
+- Enforced at the application layer: a slug is unique per-course across the union of `lesson.slug` and `exercise.slug`.
+- A DB-level constraint is not added in v1 (would require a materialized view or a trigger across two tables); application code must check before insert/update.
+
+## API Changes
+
+### New / modified endpoints (high level)
 
 ```
-# Public course lesson (accessible to all)
-/course/{courseSlug}/lesson/{lessonSlug}
+GET  (public) /org-site/course/:courseSlug
+  → Returns course metadata + tree (sections, lessons, exercises with slugs, titles, order, isUnlocked).
+  → No auth required when course.type === 'PUBLIC' && course.isPublished === true.
 
-# Same URL works for both guest and authenticated
-# Server renders content based on auth state
-# No separate /public/ prefix needed
+GET  (public) /org-site/course/:courseSlug/item/:itemSlug
+  → Returns either a lesson content payload or an exercise payload (with answer keys).
+  → Response is a single shape with a discriminator field (e.g. `kind: 'lesson' | 'exercise'`).
+  → No auth required under the same conditions as above.
+
+PATCH (authed) /courses/:courseId/lessons/:lessonId
+  → Accepts `slug` field (validated against slug regex and per-course uniqueness).
+PATCH (authed) /courses/:courseId/exercises/:exerciseId
+  → Accepts `slug` field (same validation).
+
+POST (authed)  /courses/:courseId/exercises/:exerciseId/questions
+PATCH (authed) /courses/:courseId/exercises/:exerciseId/questions/:questionId
+  → Reject non-auto-gradable question types when the parent course is PUBLIC.
+
+PATCH (authed) /courses/:courseId
+  → Accepts `callout` object (nullable).
+  → Accepts `type` (validates transition, including the "no non-auto-gradable questions exist" check when converting to PUBLIC).
 ```
 
-### 7. SEO & Sharing
+Per the repo's single-response-shape rule: the item endpoint returns one response shape with a `kind` discriminator; client narrows on `kind`.
 
-#### Meta Tags for Public Courses
-```html
-<meta name="description" content="Free course: Learn Python basics. No signup required.">
-<meta property="og:type" content="article">
-<meta property="og:availability" content="public">
-```
+## UI Components Needed
 
-#### Social Sharing Card
-```
-┌────────────────────────┐
-│                        │
-│    [Course Thumbnail]  │
-│                        │
-├────────────────────────┤
-│ Python Basics          │
-│ Free course - start    │
-│ learning instantly!    │
-│                        │
-│ 🌐 classroomio.com     │
-└────────────────────────┘
-```
+- `PublicCourseShell` (layout wrapper: sidebar + content)
+- `PublicCourseSidebar` (the numbered, sectioned nav — reusable for any item count)
+- `PublicCourseSidebarRow` (number badge + title + lock state)
+- `PublicLessonView` (video + section label + title + body + callout)
+- `PublicExerciseView` (exercise questions rendered for client-side grading)
+- `PublicCourseCallout` (inline + locked variants)
+- `CourseCalloutSettings` (creator settings panel, only visible when course is PUBLIC)
+- `LessonSlugField` / `ExerciseSlugField` (editable slug inputs in item settings, only visible when course is PUBLIC)
 
-## Technical Requirements
+Existing components (`QuestionRenderer`, `QuestionList`, etc.) are reused for exercise rendering, configured with the client-grading mode.
 
-### Data Model Changes
+## Storybook-First Build
 
-#### Course Table
-```typescript
-// Add to existing course schema
-type CourseType = 'LIVE_CLASS' | 'SELF_PACED' | 'PUBLIC';
+The public course UI is built as a set of Storybook components and consumed by the `(org-site)` routes. Stories are the primary development + review surface — reviewers test desktop and mobile layouts in Storybook before the routes are wired up.
 
-interface Course {
-  id: string;
-  name: string;
-  slug: string;
-  // ... existing fields
-  
-  // NEW
-  type: CourseType; // default: 'SELF_PACED'
-  isPublic: boolean; // computed: type === 'PUBLIC'
-  
-  // Analytics (NEW)
-  guestViews: number; // counter
-  authenticatedViews: number; // counter
-  conversionCount: number; // guests who signed up and enrolled
-}
-```
+Required stories (at minimum):
+- `PublicCourseShell` — desktop and mobile viewports, with and without callout.
+- `PublicCourseSidebar` — default state, with a locked item, with many sections.
+- `PublicCourseSidebarRow` — default, hover, active, locked variants as individual stories.
+- `PublicCourseBottomNav` — first item (prev disabled), middle item, last item (next disabled).
+- `PublicCourseMobileSheet` — closed and open states (open state is the default story for review).
+- `PublicLessonView` — with video, without video, long body, short body.
+- `PublicExerciseView` — unanswered, mid-answer, after-grade (client-side).
+- `PublicCourseCallout` — inline and full (locked) variants, and "no callout configured" fallback.
+- `PublicCoursePage` — composed story showing the full page; run with Storybook's viewport addon to verify desktop and mobile side-by-side.
 
-#### Enrollment Handling
-- **Guest**: No enrollment record, localStorage tracking only
-- **Authenticated**: Auto-enrolled on first authenticated interaction (quiz attempt, etc.)
-- No explicit "Enroll" button for public courses - just start learning
+All stories must resolve colors through the app's theme tokens (`--primary`, etc.), not hard-coded values.
 
-### API Changes
+## Open Items (non-blocking)
 
-#### New/Modified Endpoints
-```typescript
-// GET /courses/:slug/lessons/:lessonId
-// Response changes based on auth:
-// - Guest: lesson content + "requiresAuth" flags for interactive elements
-// - Auth: lesson content + user's progress + full interactivity
-
-// POST /courses/:slug/enroll (auto-triggered for public courses)
-// Called implicitly when authenticated user first interacts
-
-// GET /courses/public
-// List public courses for landing page
-// No auth required
-
-// POST /analytics/guest-event
-// Fire-and-forget guest activity tracking (privacy-safe)
-```
-
-### Permission Matrix
-
-| Action | Guest | Authenticated | Admin |
-|--------|-------|---------------|-------|
-| View lesson content | ✅ | ✅ | ✅ |
-| View quiz questions | ✅ (no answers) | ✅ | ✅ |
-| Submit quiz | ❌ | ✅ | ✅ |
-| Submit exercise | ❌ | ✅ | ✅ |
-| See "correct answers" | ❌ | ✅ | ✅ |
-| Post in discussion | ❌ | ✅ | ✅ |
-| View progress stats | ❌ (local only) | ✅ | ✅ |
-| Download resources | Configurable* | ✅ | ✅ |
-\* Depends on `allowGuestDownloads` setting |
-
-## Analytics & Success Metrics
-
-### Key Metrics
-1. **Guest to Auth Conversion Rate**: % of guests who sign up
-2. **Guest Engagement**: Avg lessons viewed per guest session
-3. **Time to Signup**: How many lessons before conversion
-4. **Public Course Traffic**: % of total site traffic from public courses
-5. **SEO Impact**: Organic search traffic to course pages
-
-### Tracking Events
-```typescript
-// Guest events (anonymous, privacy-safe)
-- public_course_viewed
-- public_lesson_completed
-- conversion_prompt_shown
-- conversion_prompt_clicked
-- guest_signup_initiated (from course context)
-
-// Post-conversion
-- guest_progress_merged
-- public_course_enrolled (after signup)
-```
-
-## UX Considerations
-
-### Clear Communication
-- Banner on first visit: "You're browsing in guest mode. [Sign in] for full features."
-- Persistent subtle indicator: "👤 Guest Mode" in header
-- Tooltips on locked features explain why signup is needed
-
-### Seamless Transition
-- After signup, return to exact lesson/position
-- Preserve scroll position
-- Auto-merge localStorage progress
-
-### No Dead Ends
-- Every "locked" feature has clear path forward
-- Alternative actions for guests (e.g., "Preview quiz questions" instead of "Take quiz")
-
-## Future Enhancements (Post-v1)
-
-1. **Course Previews**: Any course can have first lesson public
-2. **Anonymous Quiz Attempts**: Try once, see score, signup to save
-3. **Public Course Analytics Dashboard**: Creator insights on guest engagement
-4. **Email Capture**: "Get notified when new public courses launch"
-5. **Paywall Option**: Public → Paid conversion for premium tier
+- Precise placement of the lock icon in a sidebar row (inside the number badge, replacing it, or beside it) — design review later.
+- Center button content in the mobile bottom bar — "3 / 12" vs "Section • item title" vs both — finalized during Storybook review.
 
 ## Success Criteria
 
-1. Guest users can view full course content without any signup friction
-2. Conversion prompts appear contextually without being intrusive
-3. Public courses appear on landing page with clear distinction
-4. Post-signup experience seamlessly continues from guest session
-5. No significant bounce rate increase on public course pages
-6. Measurable conversion rate from guest to authenticated user
-
-## Open Questions (Resolved)
-
-1. ✅ **Downloadables** - Configurable per course (creator decides: public or gated)
-2. ✅ **Live viewer count** - Yes, show "X people learning now" for social proof
-3. ✅ **Donations** - Configurable Stripe link for "support this course"
-4. ✅ **Revert to private** - Yes, creators can convert public → self-paced (with warning)
-
-## Additional Course Settings for Public Courses
-
-### Creator Configuration Options
-
-When creating/editing a public course, creators can configure:
-
-```typescript
-interface PublicCourseSettings {
-  // Access control
-  allowGuestDownloads: boolean; // default: true
-  
-  // Social proof
-  showLiveViewerCount: boolean; // default: true
-  
-  // Monetization
-  acceptDonations: boolean; // default: false
-  donationLink?: string; // Stripe payment link
-  suggestedAmount?: number; // e.g., 5, 10, 25 USD
-  
-  // Conversion
-  showConversionNudges: boolean; // default: true
-  nudgeFrequency: 'low' | 'medium' | 'high'; // default: 'medium'
-}
-```
-
-#### UI: Public Course Settings Panel
-```
-Public Course Settings
-─────────────────────────────
-
-☑ Allow guests to download resources
-  [?] When checked, PDFs and files are downloadable without signup
-
-☑ Show live viewer count
-  [?] Displays "X people learning now" on course page
-
-☐ Accept donations via Stripe
-  Stripe Payment Link: [____________________]
-  Suggested Amount: $[10] USD
-  [?] Add a "Support this course" button
-
-Conversion Nudges
-(•) Low - After 3+ lessons and quiz views
-( ) Medium - After 2+ lessons and at quizzes  
-( ) High - After every lesson and on all interactive elements
-```
-
-### Live Viewer Count Display
-
-```
-┌────────────────────────────────────────┐
-│ Python Basics                🌐 Public │
-│                                        │
-│ 👥 24 people learning now              │
-│ ⭐ 4.8 (234 reviews)                   │
-│                                        │
-│ [💝 Support $10]  [Start Learning →]   │
-└────────────────────────────────────────┘
-```
-
-**Implementation:**
-- WebSocket or polling for real-time count
-- Count unique sessions in last 15 minutes
-- Fallback to "Popular" badge if count < 5
-
-### Download Access Control
-
-| Resource Type | Guest (allowed) | Guest (blocked) |
-|--------------|-----------------|-----------------|
-| Video lessons | ✅ Always | ✅ Always |
-| Text content | ✅ Always | ✅ Always |
-| PDF resources | ✅ Download | 🔒 Sign in to download |
-| Code files | ✅ Download | 🔒 Sign in to download |
-| Worksheets | ✅ Download | 🔒 Sign in to download |
-
-### Reverting Public → Private
-
-Creators can change course type, but with safeguards:
-
-```
-⚠️ Change Course Type
-
-You are about to convert "Python Basics" from Public to Self Paced.
-
-This will:
-• Require login to access all content
-• Preserve existing enrolled students' access
-• Remove course from Public Courses listing
-• Break any shared public links (will redirect to login)
-
-[X] I understand this affects [1,247] guest learners
-
-[Cancel] [Convert to Self Paced]
-```
-
-**Grace Period:**
-- Existing guest sessions get 7-day grace period
-- Show banner: "This course is now private. Sign up to continue."
-- After 7 days, all guest access revoked
-
-## Updated Data Model
-
-### Course Table Additions
-```typescript
-interface Course {
-  // ... existing fields
-  type: 'LIVE_CLASS' | 'SELF_PACED' | 'PUBLIC';
-  
-  // Public course settings (nullable for non-public)
-  publicSettings?: {
-    allowGuestDownloads: boolean;
-    showLiveViewerCount: boolean;
-    acceptDonations: boolean;
-    donationLink?: string;
-    suggestedAmount?: number;
-    showConversionNudges: boolean;
-    nudgeFrequency: 'low' | 'medium' | 'high';
-  };
-  
-  // Analytics
-  currentViewers: number; // real-time-ish count
-  totalGuestViews: number; // lifetime
-  donationTotal?: number; // if accepting donations
-}
-```
+1. A creator can set a course's type to `PUBLIC` and the course becomes reachable at `(org-site)/course/[slug]` with no sign-in required.
+2. The question-type picker hides non-auto-gradable types when the course type is `PUBLIC`.
+3. Lesson and exercise slugs are auto-generated and editable (for public courses).
+4. Locked items on a public course render the creator's callout in place of content; unlocked items render normally.
+5. Exercises on public courses are graded entirely in the browser with no server submission.
+6. The lesson page layout matches the reference designs: non-collapsible sidebar, per-section numbering, content column order (video → section label → title → body → callout).
+7. All accent colors resolve to `--primary`, not a hard-coded orange.
diff --git a/prd/public-courses/design/lesson-page-full.png b/prd/public-courses/design/lesson-page-full.png
new file mode 100644
index 0000000000000000000000000000000000000000..2658243416c91e5421104d17fcdf70991f728fd0
GIT binary patch
literal 10782
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

literal 0
HcmV?d00001

diff --git a/prd/public-courses/design/lesson-page-reference.png b/prd/public-courses/design/lesson-page-reference.png
new file mode 100644
index 0000000000000000000000000000000000000000..e15ce0eda6e3ef710cc3dc2ec9213a4769b880e4
GIT binary patch
literal 73267
zcmeFYbyQr<nm5{bf`$;>Em&~(0KtR1OXJYEJ0!S6fZ*=XxVyW%ySsb%`kk3`-Z?Y(
zyKBw5Yu&%5y1VMPOP^i4c0ct<y)C?L06s{GNs0lWpa1|U$OrJY1+^e4BBCd+C?_WQ
zUG(1z1^|!%%LD*`tR3wY#f3@KH8e>OHvYZEUu6bB2iw2W|4V@MdpGx2?*PCw{r{!T
z|6BHZBVz|3q{0Q{M_~^c9760T2>xXH@0j{8Z20e(?=S4)XzK{6BmWn+S5_2(U?T{o
zHvLc7@IPUot^Hs1!y$F}KvqtFjrCXfi(+JBYZWC(`VR6V05|{?0pbARzwRG$4GA{c
z007r5000yHcb;Jq08k$Q0N^bBokx)g0HFN@0P4p7&ii{#Yz^!U{;fM$NDOUa0sveU
z001Z&0071W0D!3VZ)K3^|3VuHq=*1Qmks1&3a|ng14sap0BZmczyLuk044x4fa7f$
zAOe7ahW_gd39yha+&efpSXekj1O)hZ$cV_uNQg*CD5xJlprE3oA|ZXi`hbq{2@?|&
z84Vi;>l4n$Pne(n>I4b~(gqgpJsjNoPbf$zpZ>?;tpkAm4w@Af00Tt^fJTRcL5F(l
z0TBJQoM2)8T8aM%a4@j&2vE@P-XlWF4L$&%Aap}R!@;7$!^6Epcn<}DhTH=>{6|s*
zW(=WspU4ypSlI3SFv*1#RqP#Oeq~iw*Gyw!Q^a;|vKq!uPF=ibQ&M%H6ao5Ib#-6j
zeEufp9FUOB!O11AW}M>$83GS7ID~-zL;(N_8Wsi)9#Y1R4jB#_3I+-e9u5uw^B0Lw
z&@kwvupgO)FvwVh{op>aDj0N%7}{k`Vv;MyYyvAU-<AN#Fpy^GFz5h5z?0Uo!|SzR
z^B?p7NG)Q&JZnj{)eEk(KDY0s|3_LxW;In_Hhw?y=lrqYKhk1}6t<H8*81}(?bFH|
zz;pcU4Up{qPm~){{r_L5R4N*@?4lG*9Jlt>t~TpiOL^%0FF;fZf++UzH-Jj5&;7NU
zPYv!%Z93UtVs3Zx>V3rcZN}Al5cr5mshY5scuLS!-)9!2_xdusehTkHFIc?P{`^?d
zzJ&Zoa~$374Ip>ezWuuY((F_0<a70B_6>kyYIdmdbpDODy;MeAcD{A9@~J;qL?ld1
zj^HwV$hmVG=``>d#e6=|@^_TrA{a1;bj5ti#$`(QTv{#h(kb^a<$XD1;8ZR$JvC`D
z|NGVSrBUycp@h;Tp&sK&{6X}o_V^+K?SS!*h5J9zFVWV$>{rd(2eF_V>^A^A|KCuG
z>|MKRt2cVqE8H7kRPJx680^nDTdw!h%ty%QTIruiIh!Qx)^dImk9b1wW#*q~mO7a1
ze+T&Y$@<?Z`rlRbzb~54_5a8BK(+RI4HQujf6J!wp(&f%$kIFm|A+2fHOWKd4mK)N
z!7tt1$2Q_&bHU&U1jHqeczSvr_Aj%{qDo2)B1mg6xl1gkIpZ+#_7!Q;IcN82(wIw#
z#S*<}{$^S6V2bG1sYF4dz6)nt!j6YxhQVTXxVqRM^ZDR{$S9wH?WV7|?RM5H&-c*G
z=ZI$s#du4u`vo!8A|xyQ6+2uWU0u5qPH~4kNYcgRk?PiMtrXEidtT*pX$*K9EQGZk
zZVvl<O><_JaktckfqAit2F(^nv_|YqHDY@>Kb)iY8ltzhHtgjP0GVU6G{uH~7gdt@
z`1#HQ-H}ME{<i%4fQ-U2kjQk&s+UUZe7}5KEMjo@&Be?xNy2AEX|xplL63zK=MKJD
zZjtHbXNH8P5Tne(*aQx2HE9K!_{dMzzI}5iyZItp)(i+se5SwfX*Gj0zkHM!7#>7M
zwT0_}mLU2AC8(g29Us>-NN($CW9Fbe9W8XCS~%58-=?`NN!g`Ivs=)Bm%ygXz4e*r
zSI=p#a0luOFTQwh&rV8lTk3i-!5m9*0u`bXE*O)=6)cdie}Uu-?7n=L=<E=4<uHVj
z9;UY11a!WY*r=0{!N*l0IE|DF3S<k$>u>mhUnSk?3_s-%eV1C6$xA{;22J)a5o)sd
z9->cQ+<l}HBJtlmPe%y-13Eg?e~t9%Z~PA}BM}s9`~;D18L!cKl1v9GQxKGHtV_y1
zIm>7PTjsD55k0(yaCb;tc-6OTt0E$wryt`aoJ0q4z7yM9h`(!a_#yiq@FG>yxK?(j
zsiwR_cUVZ1%yL+4Vr2!hrTtZ@2s^lv`l&sO@)2)dw*At&g821zq*Z&O0(rQM?FP8^
zTnh6B@cKH8uCL_&)v+yYA+ZQgjD;`5E06d^RA?<`^|RUFQD8XCniCuqgu;X#QE<v3
z`INZxQ9_uYSXS;I!{TuX?|8|G*6)*J<5qfyXm0>?6b|SwVgeOr+{uJQb<<JiCtA)0
zByWIc%l6yatoHNtj5mOV&>H|RO{zIiHSE)$x*E>c>*+VZsf6IR$ZRVz?=e50;L9A^
z!?e;PKBNZ5pL#axH^6y*I;3GIq@j;iGWMS*^Ygn>;>-Np6_y_Ln4>>G32*Dt{-eV7
z)5e6){j#i2ZP6QGTSl_Mc%YK_I7kTX&-3B<U9I4Y`K#>#<MVle;L^++;IeQgFOjTA
zT<r$G*%HL#9ackp2^LqYA%%<y{zsP<3Ju1El^Am<@Vv($9>JF-w1;`(c`W}oK--hU
zYnj|%_aj-S8}{K(Lk;%p{dC5uh0nvh!R#yi+0wFXM)oPfiv>Fkqzi=GsIUE3w|yx#
z(=G+X&&TDrlhfzV_xbHhHxN?tb4{o#){k=v+V9W5zX9rKAoOed=y>tH0os#+ua$p|
zgFK2wz%x31#lk+9O#TLV`l}t7a4tQ)zO7}N{IEso4bYd28~cUv>Ev+z^>v!~G}Px|
z`swU&{`JokWSWz09wtnJD?*wMr!Aaq5(_m|IbN^Nl{<V+OAwwU9V0mnR+T1Y1hxy!
z5g<<!zE2dabx1kINq|~(knN2Z821=f{|1ow6Z-~uot*UflL=V`REi71wG%f{hY)(7
za<U;MLXt1ND(TUyba6Yktm4fF?TQ(H$nX+6M9ar>Ii)%~k4&NvR`1*sAHx!!gl=lz
z08~YqLhGVWiH{*U-(RuFEss(CTgOQ1Exow)SewPAoeN_6k1Pi@WazaqJCe<F3Sk;U
zIu~AsJWR*pS6o#@*E{3R2_F+tBSvxQNj!yrHf8UYF+7rFWI11C+(*6)@Q|Hv3PNhc
zb@{CEUXvVzwf}qrw7Bf)K*7eu#H@J4DZcx$bUHrK{BF&IEu)B?yqMNuMpVjsoer`L
zdTeb@Rn(Eg(acu5SO~ZgoydQxgIqLuJS>Z2lk0U3lcj=F)gMe-lqyebH~f*V-rduR
zfW0_ftTPXRH@Zdb+X~FgJCUBOj_M+iNjE`mF62?k*>=w-em?r~O46i-L-{H>g#t6O
zZY~a)apBeKN7fz96L+zj->E*Dc&vhdNFZ}u$WQ97DkiRY<3{ubsGeyb`DWqsxkD6e
zbQ60>A&v%lBMsgFTJlq9f5;YwBtxRe$jD&7ef{?BUm^wfxV;A-`rJQc?9|z}RHGMv
zv?O1?nQ?tnWqqy6+w9rQ)Q1TWO&rKP0JFIuCJ(t%IPBy`i!%-TS_Y4??sr}({*q;g
z*obv*@yoDB`l%3SfoR4~PZ-f9r(K+zUi%Xb*d21oyeRN8GU8=Hv^Y!1YFEEZo7=3o
z95L)tJUuTvkQet6=fRxsS%ko&i!wetI8j|abA3zKjC>KcR(4gfvyM8gN&`)hGLjU`
z@3&F73Y@W24F*>z&evs&uUVu>BNc70EmZB*NRp0Mjb4e3u07(P3;oLWtv~kA=_*kA
zX3SPPJqw-O<etjHL97;;*}yAE!J@j83Pf0G(s~NZv#zaBRIrd%(NR8U?uBKKX+5{a
zr3VniMcSPS#gO?G%s-ic>3&9A;2TXYFSnJQl!S*m?}WGPFXEcx3g{Px$*JGOuhu7N
zxaIjr&g(8a#>b8Ib${u5x8Gy48sza2`9<^G9(fjv>ebx50nF*HS(5q*xh~mxP(_7~
zJWzzqMB;@L<J34aqew>iNK1y0%?V@WkhCB+?ba&(x`utC0{RhZ4C$+bq>Dj=$Al!A
zfBC$-^(_8QX}gxWdOv%l<Lq}cR0qx)g7n?=i3f*8`Q}?}xy2Pjr=j%xQl3;iDRcG5
zA0`Q0Id0Yt)sB<bXVfg;RA;bhrE}#HBJ*hr7s)prHeFrO%$N3J`8r|IcZ3`Nu|^2l
zqDDTw0V1f*3GzP)#60?ET;{%R|LSV;|5rZu?`-b@^Xoh=Zp<F`y2^#r%1CSORkmiu
zL-jn7f7Jt_O?}|ymg3O*4B7)@A!UO#OPl%=&WJhBVL|W)e-+ak!1fK$=q1~C=U*f8
z#Zxi&F5Hw`%rE^ovG40ylRqb2mohC5pGdlD`OVL4OfQZmCWpHM@7@{{o0^Kq@+poI
zVeN(UXDaWm8pAYQf^q`sz1i$ItIkYk?V|>P8T<=HXD*l$N`y2psp5?7L-UH8rEtI5
zo=#5p=+f42am~#DUp3KC)62a&>sFJatFPO1I`iR5(*4}pnk};!qC}_?8Y;zn4+6Rq
z>bpn|0r5*38E8bJ-wL$(@$-wWEeh<OC-PzW?uKfn!bh_K9w0=Uj*e}AwIYdogYD(5
z_#j{JfX*l?xJCh~2hlUaL;<Xo{r2R;JcU4Xf54{W#S&j5?Msh%f{>05Dr-!D#^f$8
z1^)$Rb0)>EbZaVcl#>k|JQ|e4uO4zjc)mo{&W4iLGL#)tq)Zbr+Y-8a>Z*^EUF8H6
zj|Qq%L_=i+unq$fRKGyqacCF192TW!zqv$RsP+j+eg8~py0JarC3O@@Y_#jlys0DK
z9~fIKg?NhoF^ZCKli-!s`JBjTgL)f%+*mSFEo4*wpbCwk#I)N#FE?zXOoy0%rmVJ?
z52kadvNQ;lk7mf#;oUe4VqazYyfFp=9g+N4)FL17NI6_rU6CRD`b=4e2r(yza5g%s
z@}n1$@G5R{>5EzxI}lJk<c;)I2R}5!g;LdvurTlIdL6eema{T7JkhRK^;QwXZR98Y
z@bew}s+8~ezuzMf24q;_Y8a=}k9OSC%C1^O6-Hqi0m{oRO=J-e<CR^@C`z8-L8LDI
zUmo%MCu^+ce~HAT-sveksgN>{t#}Rl7(QAaT%9IgEwQc+AGv&2C->WNt1X$z=txX_
zG3g+T$E*AuTFOhy?sE`&4II{t!0A&NPCJPgj@HN2-bMuNQkXIaED%$6;A=wfxTvVj
z4xUvmh5mpW%kpc4-4|3G2;K#%z~blju3R;5MvN5Mh@QfPWsRpRM=-bz)nu75mkgxT
zU}}x+PVq6FT5laC_;W2)S&G*Je-Pj4ZB(`zx~L#K1eW@Dk~sON?$@}|iM|04!RVLL
z+vPfBi!-C&(5OxzdYl&fzC-gL+vYF?UkboyADws=xSTn0$KL=a_WjgpC)Gq}!;ESI
z*FHiQ!U0~j<9;vBgmW0qdB_EEe7jb(j~N?WY;JB}@D5gbKYLtNbWi@)w-bHMedW^l
z!j`LOx{-xTe76F%SG6Zv_oHHmc83nn(n|<?`A=-SDAIMSkIh}Gr`kb)W9}KwQ#lhE
z*+I{L+wek%&17(PKZ2+((ThZ}iv(<fu9oDs$c4Hp<3fuZ`fV1<<8fC3B+}IaT7fE9
zVu}+i32k+`652=EU7Ftemd-_pXfdSsEq^+i9)5Wrv^Qan7zg-P<9pWK3H>}~h+nGR
ztEgUObabqz^J?=i{;fE}7Plo$$(ww6^G;jv*1x0d70|p;ikYD0<y1PU143UcA!bvw
z$qR{{;V=I|Onq8NZdn2I8&%G@RpH|#-jB(qa(PP{u>Bf|aoN0>6b-EG%CpBhrKk?w
zct)7~UFzM^3Qc5@Bg^3|zlcLwipEOmCq2V}rgdoxBOKuHNbE380##~aRR$5R0W|uU
z9KP2FiznHH)%>Yd@vKI*$zi+M5sE=10<utXt*ksdlIw^|?sXxUrei_zV&j?l<;>Co
zpf%^P(`+WwIgq9(Ct!qXO`1SFfuJsyWD3KP1M;U>vt&*S#`>*Oa5{7M3_RS5dzKF@
zPH=825Tqbh0y=X#^GTx0L8(hlponl3m(MEBYqbq4uM}ItwI$~lC;Vn{my#e%BJUnv
zGIvNd=n~)I<g?ik%GNr#)iI~{s*=`l;?BI~2q`{HlipAeNb18)A<w|=9)lV2t)_Q&
zXfSH3&t+dq5kJHi0slHHu6<Vo#zZSXF$U3PUmO9EtzlfkKk!0N)P<5vEQw5R9Zx@e
zQA08w3Op>N*3ghsd`{6ND-JbL>ckktwT<PXK3rS~^6;uR(p`KdqNq7csr{{^d8vgG
z`CC=IiRPyx5!ShR0X-Ek%+@RR?AVzM*`^@bzFhne$tx19X%SU<a%*OqZ!(Vc`J$h{
zp~DSlH4>>xjMXpppS<XQByM>UW%}+0)zh6LKB(CQ@A^iuOS2nXGD<y>a&{j(Ck>39
ze{k46;r5a-Tk5;+!yalETPo0es?FWk-<_q8dhUq2)KlKR%QoTOG><}VXN%;5Q__c9
z30U1+mc^DpsIf0UsEQX6JL6I>P|&}uiSPV9X6SN4M_+W_)$e4<XNhU~ZVX6QM{}Pg
z?V31dDMKB(tGQxJVf$*ab_xGL%MrfuvC8cbj&f{+WBYXcHSgPOf3ihR<fdJFl8kAv
zTZ&F^Xk0(H=2~Ntzb^OCQmarHW)PpfYIQ?RsGE0u%4}8JhZ_1$8zlPbzHcC^wMuvN
z0gZr|l*P!G0BPB|8+SQL(YE35o9p@-NcwjyK0JYwm%Jw^jEPl(h6C9KOHjIPf`OD<
zx?a15KY)^52M4Ti=ZZw=&XOnCBG|-m(^98+WSfqTx|g?@Bo9?w%4t|99xXH9>EA7q
z@95LH^fw<WP6<QxVOD1kj$y)DX2EU*%+Ed&N&S(q_i%ZY_QQf#p)}hcnhhr(=2Amv
zZ6FU&DFfK86i@aKbe!&FWAJ^kFzi(ABY`kR*?h8hv@6vDJF!%joMM0zFtyf6IyX|K
z$yXI~L%z!!>R{PPHM7@R{7stS9(7kzF)NZ{smV=Kif{E*b)ME#@zi%8Sp%#N?mvd;
zD2c(sgqQFP1dl<-<{2=RxYuD~Yzh>*i25zc$A0wu6#}d(Y9o`{&-+~mjshhsMRvM9
z9SGK>KF{Z{|AbvMenPx%U1B}v-rvR4NC@|)lwBJcQud1))Y8IFvd`6?Xp~F%eNi8f
z0U{`^8^q~5=lfzv!Y9k60ZL$b=tH0pAf)RWD$1RE!My$CS&Y%=<rr=tAuoO!zl<NK
zM_)T(s{sc2JotGjADVrRcmu%K-!aCoqT;iUmb?KzF&3{f;?#4!;6Gz$3I1SYd?-CY
zrd1I<7%DBCHSOZk^>i~=EO2INZrurxN@*%5+3=#B-ZfJ;AC|XOL)mohrwv7@>Mho2
zI%aI9qoKnthSk}{=|>VHX32ZS;F#Njb6p#nTS5CV)TCXuJIBXV_8qFsrH7`KO{C^n
z{0U54D{{nyB1G<=>zLFVsk+bQkTCq`lNWAI*zk_HmOB0nNaUhHR`3k~OyCzsXR5f<
zz}DywnW6vc^9CRlw0RNEE-V@^7L&_pH8?6*b8kiVsL0Xm$B`hosL-mg{Rq86AEG2n
zX28wW)p2gaknpua{MM$1X+R_Syv#%wmHIuzh+!DbRJS=ayfbVTMI^-{sYh?>ZFASb
zobH);0P=P_4`S~=)XNH(Ck|vN8F?4nRPip@H#qoTqQB)E3kA_5xs=V9y10kn3ENVm
zH$a*6t#_|yX})EW{JoVOY9ErA3KsBAde_V8Zd*h}2F9?!Qk$~CBNazF71o*ppjX4*
zgSzZ1@NMUpAer8a$TM_E?Ly%R_}65o0+NwK`oaCcp0z_*s)!`XM@b65y}X0pdtz4`
zV*4MV6q!zqXA$X9N>Ap7(;rT6@1B}6un;ASDL#r)@@lSDviGosq)U=F5IkR6s^uED
zCY$uzH_MN7+l5p&seiW<>l4VDsJ1lr(7odD->U@E6Lt(Bn2qY^W+*7?t`Hy3%v3A%
ziL_>*s`cFOcw8fKKY1M^q-63~h`HLyIphW0Tu#l1!l_Ow5I6{!b&s*0w25aJg$Efd
zBEovLmz9Uf^TZxX^i4ID-6%9A<+k@Yt=^!UQsHbyx=h)fDcz=N<QjKnuiI3woO9w(
z7DwFFfPw`<Tw%SgYj^&vd|v@BAI}hA!S$$Nhs!@KT-<k9Wk{2%y9MUE8NocYRZQDK
z94^+l104W=Os*$-^8$S*_PKjWZIi-e>2S=2!npp67n4Mw?>4fjFOsy_)C?B7Q?cM7
zrdK|%OxLbDotJKMWO`DCR0lOliEZ>SxtNH__40UiczC*5D@o06pA6rTD;=SvXK1LV
zW)dIu^|3lS6n;9<nY2h4-o}(0AA#KRlLoNvNRlx+v_P%RL4JQ!{*dKb8k2^inc@`;
zZ!gI`I8F=QdvKk1vryk}oxCq2BYuQ18=wkIn(=_+-5D4pVb1gwk!2Bc`<8v8<9*vK
zQ@rm~J8X?vGiw8CBUv<#l{hxY4JmbXHCua3X4+iYCqXsNnAe1Ienue-Jg0w+$NV(C
zjJNPDx(SCYHIZ)sNAn;*VwAL>x3Y6nhczqNxQ2O(Sl5xMD(lx{5pPjXE%Qulcewwe
z0WewCE{fgB^x!pg(k1eIOLb1?MJgn}yg0+N7A={2(;>qb0lgbv6Au8D1N9-`NKo^@
zaa@X?XUrdrLk%v=OMhRS={OGJEBnYJHeK6!)mRz3)tBn~o{z0$I8m{rkVnmOMi&z~
z(VUk4SM9HfA<9r(3tIg^69o4DgpjmIIT9DOSwhlkp3XdwW4s!Y!88*`@}h<$7e+76
zPhm~zWX+8|0IJq*j6al)RV((iriZX-&H-7We<zBS)5WywBD2I$!i?`cdRo4!HOc-i
z`Z5k>)ZihMh(%RfUDdo@155hn8I>9NuYFZGJEaN9g2q>8RG#9bjoazGbY7tO`NI;F
zyG=QhR5gvVd!FPl8Iz7{N;;BgG|X7;ti0;V6>AD&GA8?=8&g?Hb8tPD@>8u5vk>)V
z<1*p*c>2zMVymP#fGR@lsn@|?%8Yd@-h%}tXbrE)y)Gn7BuVKLvlKix(I}tmJ;C!N
zlIB?Ta#>S)V5gdOX+eWZ8yC6d&X1%FsH9SqOHOpZdRMrVhSknK-mF&=)ZD2icgTh+
zAwB!rtbSg^JP##STt<a%8>mI<YHq%qVa5sgC~?A~{zPwVk{Nh*betPkRfQC`<t1^k
zR~!ljW8%6T>&a1r9=*ou>!w`R`hHq9j1UtXF?%5*Bq=8@N@o!jCPT;vPC$w5cgBup
zP4$Hu=cW{^1}n40a3R6%xi0|A6TkuCKP9D>Sg|7-l3--NT{boooOZ6zt#Zy;GL+7W
z4TAiOP2ns1vexk7iDeg;&XL=D7u4?}o;l8j9pW8Cr=$r97~yW?S%>Ac<oH!Yg*>aD
zCWA-rQ$2Gw`rrX5FaRjurX?Op)9N)4=ewgb73i71P&}#PoG)x=AKcsapjlS>qcu@S
zVow{ng;M@aFgVQh)-QN57j)fa%DVYmk$^e#|DgN+fZeT$wY%{m{QRp8e|dG_NqFC+
zg^03^hmI-t2=!N79bML|4V0HoK1_${M4RNzTF#7<Kx*On=4{s+VB|t=uJ}El6qnAq
znI^FN%Znmdlc_9OTH95P;Y6ibh(Yyd(a?r=DZ@pbw3Eo!v#wkU6N0jm<)%o3b8{U_
zp5LmvF!M}^^g{MPtv5irV6DigP|CM)KBJFSYk7(%b81*XKN?!pU34sS00BrLZu^&7
z4`11gGg=iY(DtiK>>M^uz0&A~mRg~$RU_}A=FrB7h(cGdAXZArX4E7n0|H-ZThEHV
z%e8tQ4sTF19a9A>g>ClWJer(Y-C4!7T{Iq+*n(Z3Ks-WLN*b?BAAfWe>pFj1{PFgK
z!Is`uJO&X00Yl&iRJkKHLlUh^apq<@<5|(L?eoZ?uuk&mTs{(4<+OJUe1*T|epzmH
zP>rvYt*sCt>?@WR3~~|BxzUU{gzqXzldp8Hk2+m+sM#wvI7E#!xoX>UKVf2p$RiID
z&;@VX5uJc9djoViP9XxVIlhL9cq|v<On;<sT#=2j)j{PlL18SGA)j9#VhNO$8zTwS
zN?cb>^J?LVvQ1%GT6ABBtgc-~mRm`2tCR8Wd3GIvLL{GdLQ6*Bor+VL$+*zk`Q1P+
z>FfluivUSi|8Z??s6YMHO3|=Gc<ttTrR$jGsPx)CVzvvBb6mV+qD#|P;>L~VXR!VG
zr=W_Wrj&vb3eWFlK<&v4%SvLYl-!2N6>_VZS@iGy&h)l)z0q@n$bKW-=4S*2C-+iK
z<__XY<izVHC+Ih{BO~-DTb}$W-&T6uI+SU*?}CXe$CK5{v3V&SKh+y-Pel?*>=Rvh
zBe^cIi&iU5BZeXde($pLbt9HgO{6L90VC`G=*sz`K?1y{n<f%(bo?@utzK6VhNaQ+
zpljd4iiyxZq?<Tr)tjJ=%G9#zj#DTYUSzf(<O$gyE-*7%6@BDB4KTJe!yw{Tv<^#+
z@6z1vT8((t-ySv5^vY#jB$7r4+EH2e8aH|Emi2k$KFD|$&iK-;#*+(oHpBzv$3JfD
z(tREI2-tP$*-RWZbJWS^H??#TJQRK^foSiOqbAlD+SD9<t!5MEp$3xLYrPZ?{TOP_
z$O$;_7=_n=FtR?BE~L^rWYl6Vq=KuWYPsD`5tSD@?~BK9;pFrAXB`$bJxlilW1GRH
z8w^8*c6*geb8moMNwgNY7`IaQ4Q4yLd*5cmtGw8R?cdPNs&#u?sh%oR`!*~su7>WB
z9JM`<#hU5~n#WpkS5YS_?8raI#8|NLJlSX1UAgvOu-*WhhuxzY6z*jihpYEgZ-Dwy
zh#^DGo!0i*%E+PXe6}!nK5@(A>1Dlzc54I=G#TXFb@f!Vd+f+Ji{N0C*Q~W@!0B4Y
zy}9}_H__D7SJT))KyOeOg3+>12g|vHlLOBH*e9p^l9aJfoo-u68l%pwA)T%#jOL9&
zaiPd<nX>G273MllcSGAQz^Q8u+8*`(k!Yoh(=;&CKYxdg?&8+<PZ{zb7Ch=!$!kx+
zgef0%ykCE-$k_;JKhC<^W3dP9xODbmIsvI(E%Zw6XulL4N4^0nUGDwMkh@H*0pSE6
zJVQHf@`l_aR2+V4Q<Y~ql8L?NW|kn@*lPjV1iArOQ)^SI<Hl@+t|%ea1i=cDM$zJ@
zRU=~^)tDlX*HWld$|_}(flbrQRFwpguJ+VIuG!%8iS<J%+3jq}F&m+|e_e2BiRkLg
z&5TX-{BoKE5|BmekwEv1X-h=HjUfFXF?-VOPf0mXLhUaT|49E(&0?vid!_kz%ap`^
zbmX8ff9SsnRiX4wHDJ_}z&Ci9n0S|3SXkz&u=JWo&K=+K$KM!n4NTI*I>F1SqkXwE
zinBo`sWIitTsf!}l;vsEaIUbxdlfVPSr_KXNwZb|jcBg#VaM%aZP3_gQ~<xO5e)lS
z+hU4-V>MfES8StcqohM;39<BqwpL0i(q=Ik`KfHZCzxvklA!uC8nU7haB+7Y80kVB
zjSkTZ4{st=Zu^Ec@9|$0mJf4WV}DKHMWIT{1>4WR!z19Rhga3V9#gZOPkiRcja*jH
z0QqlfVS;Js_KeaCz8|)Fosp4Kd465!TtP~`+pn-7ZJ0D$YRf%B1PMR6TRhYE)m~^7
z1%U8(6M`S+HE6UiKg2<u>JOSZi*%aX0Wb}ybZRk-8nyP*`z=dqtF9gy*ehCVZoxT8
zmHh-(mr%ge`5@jUXRZ$Jjl@g^p##gErHpTf&%M&PgrZ%ma%yzsu<YPi4v0PEOFY-#
zBFK;YzZK{~Q-VxNf7miw?0>7t{}+SIzg_B~(AZO2BP2g3v=L1+L9esM5B-Tq6Aa^6
zi*Wg2TO)Pm%nyE9DKAad%&M(JL`--|G643^O{fjNvf^A6>8%5W^yGOM9k9I<51UeV
znnFqJ&QSn=dW!{cfc1T&QO4g=F%`DSR|-$*`;%)Jq_|*9+&UZ?i7r%Tz)%gUQ{jE*
z42Z1?j5tnWzJxZmICo)HSfp;j{iZRwZuCjBcx0#Ms$U1M>2xgyday#c2fNzjLdMdG
zWRLKr&!YOd=rrfLzGD&#FFq}{QEHd>uhKiIkMt|~EquYa<ecyRm}jthTiP#&%p2v5
zMJF}6#Vc@|Xx{f)0gT7enmj^5oI2%~_8Xgg#*!Ks!;j8v@^}NBtui*7X-MP8WU!wY
zM%fd6mblMX?eXAmW`Olbxm4?7jubv7hawj5baA+<ifO=si5DGF3;0Pi6dn^Z=Bg|;
zU&*aZ9PQy&(qA39pn5(|Tcp{zc;2CHjeF9ZaDVTS2-QFvTU{+{kEzN86OMeZqdA%3
zUxsflPEB8&GG^D`D6Vahotc-AZ5q5CkvHbh49KTlV&Xn&X`O4!k#lI8St9+_D-BZ@
zjY_b+C!vx~NF%$4Ij5V6BH|D~G0yjEBcZaLvc(g6nq7r4S<M6AVQ@fEt!Pz2iw1Us
zfXy_Vx*Pu9AL<F4+cNmZ(Ta5J4Io*6X)o0r`W`<BrM&ZM<BuWu^v=9^wT>%9K*(gt
zC;z^A`kSNUNB+e}Eme=*GV&zz{^^~;i*8h3_GL*}UcQ*+V?;$7SO)X{bdkjc`Ur%a
zvl5Tr*C3MT{^ta@+*X{D;$b~K{36_ah!s7_B)tUtcUs+a<~VDa`F?Y*ZtHtHpZe7n
zH##r;QaZNQH5z>Rho%1KuNVWmEe%g!CdY*}2r?z3OvwZGWb+)8_p{EGMA<0%Q)@SD
zh1-a-le`v`iVmvuBM&cbKZnoUJXK8-Dl_7Ti5*<WuH23H$~2M3@7ajAD$!>su`IK;
zO{$%wot>P2VU%xdM^#OXVJ-sVjsC70y+9h}ta}5P+4Zk(BTY9={;rbgkG-ZpZMSjR
z2CHq$KIGUjBqSJ$bj7*uAE<KVzgD;zOAc@}Z#2jyG+fl1^<+R-Nu!@IXRt@r5I&w%
zdBAW%X?oJD@6K*>!m*0t0v`|s%=#CheDlo>?>coVS@*WIi1R>;g{Kg2&S}oO^5RxD
zOYaWmQSJe=SLt0J8Q`Kvj^LBnpV?cwJbH5JKDl&3ecc3Erk39s_r^)!s_>rOMLVh|
zDn|DFPc(h+RaRGMZIJ_%!|A?X9h~qosKNNA#H-ltWm<y-jpPWIKHa&=*F!YDAcR+y
zdF-Ct2MKv(rCROcPrwiCYRdKT3uTXuN!^I)$tFvh6`rdZGhoIa47Nm;;NM}6PG9df
zLF>=fn)ex0P0I*BW<X*q1V}&EpN&PeEMXmyQTaAah+-Xuqe}3ye0}Z~2_MH)n<5Hk
zlGWno>`Y509Ee3v`x+#1&3xu+M;~{qT1@Fa7bW73PgL?QSJMoroAbK6{QN?{uE_tW
zp@Eat-}1#GBB|K?p)|W-F$dP6t4`E>w;YW8d2dZ_NH4SZ@uAGzYceCe{p)evXVmK5
zr$1d}^k{7V?e7ilZ^M9MD5Ik1I@)ecMvvH!01!Rz2-t%oZDGK!t5G#hjw*bQDKOA)
z#gsOT>(;Gx@(th$F%qif|Lp3A7IH{y*whS7BDiPz-gW0IE#d~ayM7=Z0h=2;jyRuK
zTZTyzS%|Yvbt`Q?OtR>qY>C;JInSex;hu=MYI4dhB`Ij|f_{P0Ynv_dKAo&`od%^E
zcOMSr71kQZNhnl-A6>Glr&|Bue+CyC(K}S8Wj2JT!t{6QP0k6~=0a5PW=H1v`mr=w
zwhly7ECf?rBvDLRbhN9CCJnI`r=QqGrxE>4@`2aX0E8<6c>wZ#hnj5N6#sIXG)&r7
z$Q2Ow!52WhybAz~d&1f7!?QK^uxA>@+5*HH__IbyN6ATkL<=MFf+CkqLe<Oeo-}dt
z-D1U*gcp|XiOxu%V!d|d>&&(2<4hNhMd1(v_qo$cz7O0b0`2g>c5>m~Z%Pca*}^9g
zEp(^iAw{xCb`VR_H6fdRzgd<!q{R!>^2$#tD{?$bmjqhHe*c_wEivB^-q^h3Q{@WS
zlu=y--BX(ef&-I_X%-fCBh57L2IgWl=b^a)alRf#B|SpMn6axchE|TBD(gO1#smsa
z;LH(@z(m5xk+=~JA*kL=jh1Fb(za{lhvX|h9ON_A>3srRU2rjQJ^D}^ZG@-pn)$D-
z3&~kz=4a=I)ZF}<<iIi1?^f^g#hZj2Edc*#zbMDQ8KwNw-_BG=|Dx9W4=o?k7787V
zw0Hd7qo-7XDGGVjcHCrr{-w!y<?yD$bn5HCt{2jcP*dCfWQx8=Sj&6kV2m>~uGf-%
zBO7Kd67otj-K!g{w5yv)XRaM_+h1sbB61I9DjCi=<(ECJ1e?)C?F$ygP14;eS;jO>
zd;Xa3xqxi}+6`8l^6`u2+k=iF-&*=-5!jQ9b4Z|f3u`aD_*>rq?pj?7ua<?(mbl#8
zfKq&Qp*yMG2IOe&uEWHwsaiLn*5vPPw0;IU^^qxDwU~Rst$K*?)q;~_W@B7Hi@*+i
z)w|SnyriE^>&D0<2D$JL4cBa<{DN8Es+3ZFtz5h>E$;Q><v*%(ym2onfar{mb{U)X
zHKf%YGAP4tuD*_Pf9HOLG6uzDZrtmx5qAguh}%j;14hEz1`3)I#*2_k+ogLQXWE*b
zHM=)<{Ycp<;%|27P(vd@-l0|eU^j4*Wv0nzAa6U!M^}(8tAZU~EK%oRcd7Gr#SO7;
zWgn?TE2Chg@V9-RFB)PlsPm-3tUp1;q`oTn`_NKZQpCdfkMMGoqX<E}Cd(kDX>p3%
zT9$-LUsDDK6132J9TBKLaobw>*jhy`_jYmH7=KCnF3E*1meuF6_0d(uHO-2#dlaW4
z{&%(B=_Q$wU@5nqLZDGb2luVLn6x(kc0Cf+bXzdi!j27iUXr!nxv~Limh}i*2dP+(
zI#w-8&`qbTG-7l(>6A!P*G2;**T`6K(B%GdF_#RSe3mlbW51l>P^)jw!;e&T15N!>
z*3y!ZAt0~Ao51=ykb?ral4=OVLO`$w=yArHm<}H^&DBPd5)$TBhGW$LH&^YgM$e-J
zh75&QPEl|lihT`!;5=dTjMzx)^-ajt1%b?Lh|cYUjtV4BdDbN*aej*11_X@8;i3v`
zRfkHMw23v2l2fWS_3^z|AK52Nte@(2OLFBmIYn1b9ML+9D4OKS$MZwl{xCuW6UZFI
zC^t2>G{i+^K5VS-dVR*yaBLEC`^3GA40n20pYX?tI9uCfY6h_HXmv5>O~5Ey&Dy=o
zI!7K~S4;eeWs~KW@c0H$_u;ymFSsprts1{!WYXg*_Sr6M$3Qf^b+9loLR2_Kf$VZL
z8-LNz;0B>Z#cm2f<kT1#SBP(s{oqNd05K9Si8T^sHSYq!)kjZyJ-Q<N(79Jy_n78f
z8v<(VYxR-mIdL1)<)pZs8UxeO-HIEM3$WuDksQKpd0`sG@QoL5svFm<pJ&Hp17;<$
z9nxXH=$g?)jnQ?gcSkE<yWg!F`oqXMQc#r9D^k_b8z9y@V2{11i%B3)9vqzt-XHv)
z?-{hxpwo8f#8;@S%07uOhSos0Yojc%cuS`?WU!X<`awm7$LB^!`7GNrFGBZf=tsJ+
zc@k85UIsw%W$Va)a)p-1m4~*G|IA|Xg_HUrgVT$_j9;$wDLxm-iV*Ipi8u`!$bzy#
zli_G0s?~eX*CKX4)=`s3y(%(JzSRP*AD(*_?8Yni7#<+_;(W65LCz^ohiN|bi{Zv5
zMSx-7Ekk7vZlM_xMe$zLk@_iyL@FGws`C`EqAR6w`>Hz?shm0TrF;VM0ZLZzYWe+r
zdHZo4qbfsvuXlSzaG3P)e^-qCZKasW{@b>mxv4(*2GC4AdJTP4h>fq}Yj#MM^J=pQ
zV=AN1w@&cV@@kk@?o}i7WP+ko*WB7`GsF*1g|9s|yMN`TV#$2`_y*V_UceT}6+AV1
z)jLx$45_HMbXcdzV3XFh^ug<$@qo`uAJuWIQ(Cq-_)#{~R!vWFC5iOoh56Lr1h}L<
zVdsm6N(a-l%#MLCzeLFERgna$cms&j-xd4Q6k4>nrBRi>Tft%dO|VJgAmYN_NU}d6
z@k3<YQMIrvA_{n}G;H6nZf=?7<=FNv+k>`M8QyxS?+hd`&jxeq(n(9(YcyLk@4;uy
z6S^)*pjtQ4Gi1JJCEwTQK1?A{HOJoDrGJhYNeQ+d?SYRH%SL0IIg|mpRlYmFdtS9I
zm`MnWZ{irc7ogL2YOa&4@wXs1u=BAO5Axrd5-&tB`d9b2zjh}=(|`NsiX0OEhPW)^
z$*pmJrz`yL4i01_jG-UuEte+G^(^OmIil)Vw}dz2CY$pglk&c|FPa01WMIoZp5Ci;
zGfI_^m_A8>KO($RmXY5w0;INd07M(DIR{Yg3^}t{IpN}8R8Zakb8rQ303&*~w5r{R
z@6rp>xn(OW497vvI;1M?gLhw*cOEHS+`3zbL-3^EtNCsJY5q70qUm?OzqhY+7k?Tp
zx<pTnVz1^|wTO6%I45WLqG`Ws@91>)lXH>4zG?5_S3zLX(JraKI9s@W8HOs1jw071
z)v<2cF=gS55|49K=(UQcdO|6%TB_6g%W_mVYQD{~&hF5_Nk_<%Hyz=RSGv~c1aUK1
zsS%HPI#;I~_vNqC^-t{5{k%}G(x0v9`IjnJ0UNKJ5<WM;yDv!vYppASa0Z(YwWT0b
zn{-JQ&KVeRey&4+txGT$=}U0km3`z~L*%Mv!^PE=eV(WG^HHOTJW^0I^R$2SLaiKE
z^~#s8qJ;VV)J%}WAEbzaHWi@X4LI|;50fGie&<7pnEeJ}hmJZEFKt$HC$DV`k~f%E
zoE%Am2Y%8CI$PnS_Jkbgd`xvLW5>UCEPJFWD<FLM_dCApfU!T61qBbw@WUh#%`Vn3
zsU8VHkiG|t>vmIDO&&h6_|_<?!5BxnKuc-TJdZoI{nBrdwjJ(G&p%#gCVHT03q!Vn
zMVZD$1ZP2>#)6+8VLD%q@v>$e?HjBLLv{#0^ur7#M9FvHI1@AvBlWfBcqF!?^UP4;
zL9_&DwmL?hcBwIbXY%Y%RrpTGaf4%haegahFr{9U=e15K`O~U27J4l;X9j|0H0NVk
zL)VM=)iX?Uy|v8}6mFDVsbdSdC}-ZXYQIXC5{s}kzRlAjHo2~>$G}FwwacnbPOeHc
zDK_y)_p(h+BeQ+KkVWe!U=&BW<*#OBER5ttu2<8@EUO=&h{*LDAg7a%*Xm8!R1%4(
zY<LLoxW0Y^z#XK7C23itn{19Qrt@`8^8~KefpHf`KHNi}2Vz%CrW13{%zdT|Iu_d-
z7u+gmu)w*S9T1$?Etn(6a_fAa-CY$qRcROW`9piZ{hiBGDy?Mkmu;Rgep=)wl?JZ{
zKwkO^`niVbu(lmR*+6%on+9Pd%Ld;Z-<|)9(W@oxG#`4pHzc-gadS>w1Y3)f8aXno
z(jhp(*@b~D<r0*4Ym7(u8#I}!_O2Fr_&`Nb8^TWp6GcCl;De(+`#t$TrsX0mZ|{#V
z=IKV+zjp@-Zw`*3?IFz!K484+3SQnmacFM50sMEd6PD`pVKL5Bq5!n=%?!5v#tIPY
z^!G=89p9miNTpHxvms0bV_Eg?KF^C{XC1vO?>wd&o^MPYm}13tp1#GLqu;_!o^fyM
zf#Cr_>%vd*Ngfv*L`Sj@;-v&02}mUjCZWrGWp~<h8SDqZ$fF*vB@Z`OxoNRoOcxD?
zDY1>c;4N$M7AAU1QEE1Q)A--FQ<d}lYHDh9_X3Kt-Ys9SqA|qNkNb|PoIP}4EzoB#
zUB~PYVpf6JSn$K08Zxpt1gdm)ajY22tMQTPy7Ai<%3t04+qd$-Uz6n#8b!6fvY4(Z
z*G_KM<YZ6`<a6x?PgSJM0LSUhuO3h=U7hX(1P;9(buQf!i2lKHhW-aEXZ&s`F$g2j
z&leT*>L31Gg;iMng$GW^w|0{u1NkwNZQ?s@jbM7Nef}ly_-Oft-)rxwEC+D!znJvq
zE}Aq+YMO?eGxK0^;5iF(Gznkn)d%rXwIO8SQluvQ*pcu$7p$O>#++}J@cvO!*K^A5
z(jsn~&ZBNx-}IZc-;J~~=F134TH_eUi*j1M?gE2sVL-hFPKmi8%bY?Jm`Yj-|Ek9i
zOakKL+VS<ACA7=koAuG>!(BvJSZ?L-eeUF4COWABj_g_{rw8aVI45Y(f>jSdHJ|3+
znOW%j?YTur*L$_*`qg+%z&-?Jm{$2!LJniReycN?SRrkyI=1ClFwTsrs*HO_ks1{3
zdPnBcpYVK@YdnWV%@|QF>6RIJwizRQ6!<=>x_QS`kOJezzV?+^%0?x5Ely?C;&eg{
zsfK-8QJ#H|5tSA%*~IrAphL<INc;e>#9OnAbJLnGxju6lFgLBjR~f65j<Y!XWL;F8
zpET2jUimZd<J5%6;3K!m^eXJBoJ!3wX--1qKHL&d@xp;f*;JMOAW?s7bA>A`^GXRJ
z=Uf?cVX0%H%Uso@keal(8f-mHc9?5X$W-5m4TYekPW0CkyHv~{3+^ah`DJ;<<&6q9
zes|q<+yxns_f|_=C~oKMHX*vtckYzLW0oJ`;LvW$!JKMlmHH?kTGJ&^?7R+7+DnEm
z%wgG~7;p0og_@()M}e&toDiE|t*}&NezbLYxSL$XQK$ZJw<NjS5-Cnl8sKKCaHFSm
zXvvXVwL}wfl%uF&TsO#C*nPM)3No6kjk<&~Kq=*|ueYg~nv$T`&HslR@_+cN|4-Sp
zoly(Mj@nZ1rGl?DvD9YbzcJ}=;?K$&d?4NY8>Dpgr$q07f>Xx&AU;o#<)|gKc=8mC
z{tKkpHb2Eao-iM4+k34g@d+Z<XW?@>RPJpB;@Pv^PF!tp`AJg)^^6AtVoIun&fW=2
zQ|!d-)W>T*P02Xb2e)o%RJpmDnVHK@TZd$(aTe9%V-RxnQ6RT(;3+q$`EUeXu!|=e
z<veG+S?5!M3RLyre%IBi-6d_wI|75%#5|r5iN`XQRASSSa*mmr(B!NrG8XKNShv6t
zZ=7!$Adv<^8YAZ*ugZe0%JmrD&ikTe?(Y7VO^5n}QzD|;!;vl-cFD5^EbS?#3hx97
z;=IEU?mOFRG5_h^fYXh%?VumA>~5+9M6Sv^`;A|1eL9sq8qaST#;nUBTkayRC?8_X
zK`PqRpHPuQRWw6x9ki=wtC#!N#Z%~!L#sW+0xHI)O6zUd0RN;bZKg|zgy^KownG<u
zg~lJ>;zk(XW9kMYn5Ke9`;{EZa%q9U$#In8!(N<k9h?Gr6nkWtc$r0E{*p5XC-=iW
z=vrFr!KIt0ZfRLV_iTQ6vO;s0N%S4O_!YcdKOM#lp47W=yEPtvn$LD9pf3!oG*km@
zA0?j>MrNC2x1BNNYWc*TayH$2L>R(N;~sx`cww{MTCp*Bfs7o)Tn6O@rzB2xKAwAf
z_F<3jCNEu&WfSX!(o22&X04grDI;T)F?WiW(3WFBby~^C-s3V(T<Z?Z;fYADi^er!
zk(eA)k!a$yD43p^E9^cp*LTPZANgwQ#?7z-5G+%fRt+U2^$DewSR%KzwS)2BvX{EH
z2ZkqjaM^1Sl6$g%Y(!)i#^!k88lZxjW)dy=pH>bI%WnL``bnBxb5{0h9%Fs<_YbtT
zwyijMu%m?>xMAUp<zOr+j4(kcp8D{ysuH~?`wj%0quH0sL{Ti9xjG6hYe)Dp-e6FB
z4_rK2k*5(SRkct*`5KyW6B~!`Y_i>1LBq<Tca|&FX~%mYk@oBSsTS-M7YH4f0D-7e
ziKAf=4UJ*-%xw_KX!m^9Q1Cb?jgW2Hq4oTF*Kn>05u5px2tTD}<MOP(6F64Uts_mr
z@+@ch8n@H;*nIt^>RIK)cY^CYiakVBd4YBxTol(;-#2-T)+Zw7IXARhYsntscHgPd
zV$G%hDm4A+*4h1`Y(}Z_<{}C9%vp;8USfH-->^l`$C_3bZN0n@TTDS!D@jd^oVjl@
zEwxU}&DOhptj*F%*PmCmp-rJ{YJmitz=7r<G6sD(z1#ZGa(-oZ{A8t`-Dsz#wFSHt
zT1LC`<v-H=`o53*f!flelGmFS2$yG;!AQhM-Ok%JbhFrjOC*gMz4<6`8)x1KlRCM4
zD7i&QM*u#Hgf41Syj!%_*vqo{#!-PbmJ5nn(z+?bX~nG;F+F?_D2zJPlk~#NXwUy-
z3OU)d(Pm~Y={(lGzv@MDqf&eunIH@`HWY$zJao%A_Wp@aW1G)QD;^t{x@E2x$7hOL
z#dcF6icF1mar1jF|2$GE#?YoPSW=ts)ck?$kX0J;q?F$KWBm3nTxXX;yAe{c2$3dg
zWqlSJZ?qt)P{BjtRKAPlkFDFwjIQ$LAC_=hE5OrL$cXQ{v3ub)8F+l0bxB-Vl1pKI
znq#&yIr``s)M~7ws~@?A>b+^0ki@w>PS<(l=7k^@-XvLpb@zlttSN0ovTMxglF+c7
zu1cdv8mkbWf$uHD04hK|&B)Tx*;z#ptdy^<+2-1GZiyu&AC;NuAA%mI#vb?+fB)+3
zX=aSl(jU1|K4Cu@$<BJ?_G)xScl-MDo6eg4e{r!34o3W2rJMKZKOb!kKlA-SxtKxU
zO$%Y6e`*<LpE0pqE~#H9eH`h24<kXDa6E!eDk8{B3uavKe&^?Yica9s)ERa447UpS
zc{PD%l8%NSWEVux6|^J$1_<`iS7cDI6llEFZO)ss^sGw(+F<h}870ktotY(JWs~!^
z30EuqIncN%qna99oT{d+K90*-H>`r9@jj2+Wm{Q?QmJ6Q6C=3Tx1+G8EF;a@$lw#!
zLcz)g-=t2lksaN0<eQn9mlSJ0xropdg2*eGEb&Pl<Y4Pv&1_)<oOI^ydy5=z69{=V
z2#vii>p}-C@<Ph<EerEXjB+d?dU)VzYB=u*K*T(|yUA_l*+o%9jj}E|8^^qxaO?X)
zu&teKC$dKv5yw@3V1tp-m)`$&9`wWiNcp)d%K6P`g;Ndn#h~P<>4M_h2UMmy#|QI7
zuglFuL4`Q@*3@Gw_>>$Jhwco`EdeOdneTGuAy#$l<rYsichM;C@)_)pjG3IGF%~Gr
z4-(Kf<ORJ%r2EUoqt>6tzZ11<p$+E8Lqr8x?>0pq!CD0gxt?<VZe}iSHLE!Crc*)z
z#zA6_fz?`mhf8%nTKa;utui#tqYJz5>tnU#6ch$3mV@N+uHBJ*DjG-jf6QM+i)h&i
zJ&I|$2$MT^GWCRDgMLGJZE?+xC$_P99@PlVX_dEGN&2svmBV2=!x8cZB-D%?FM-s-
zrWDJxPLeV|ZNbU`0VMeN{vICzOAaYjs%~AnwaMLWhAMM9@7Ou^PYLtZ1q_s#shdEo
zDv{+gB=+M0`nhV1J*h5G!`g~lIYMD@m~4(*b}uW}wvED#y9h^87(z_U(_9DcwP2d1
zZ0L7F!{sx(p+&96@gv<RxiKy`?i{s5L)rIT1*ACp?Xjm@$oIQ;wGD%GYC)J}Q?kqf
zk|Pw?x5eY$Xw^5gve9Sb#<0}<k>n%Ay6F8@(O_Z@G{mqyJ3dtC+`Ml!%>d-<ofITg
z=2*4QN-IX-HqtTM!Wz&DG%vJwfE}vCKvy2Y4zjI^*l=7b9CMC#_HEixac99X_!9_t
z1Ud57NwPBKu!n^`t>Zy|6<d{UwhkNjRhHnyS0vEZYnW$-4b-qqYc2sRjcX(DVp|iB
zVp)@h2}k}LW;gBBPT*@pBz8vnUB2engBO)hXp*~hk9aG_Ysyf!4s5ij><bV7;{N)%
z#`=#BApt=y1Q_Fc_w-1>HXb?Thor#)QV<g4gvu$(;JCs1sB2O_9V=S#!A0*emeFmD
zRX!JmZEb+cXhcJs_HMRJb4yi$Q)F}Gq;b0N1!2WwIlPm@RP3g0j#HG3gt;bxjObv&
zvO|<}{~6&c_|J(8-;-HtT^iLX@~=a4toB#_$r7*6Y>d*~+iiM9=KIXnpJIM|>5t?O
zgckGK0kqr~`W&K82W}8rP0wovYuYtA5NJI35}ePqP$?+TYhTIm{U6HCGN{dW>(`-_
z(xRmliUccA3KR+yO7K#OThZWB+}$0Dv_OEA;Dq8H++BmaI|K;sQmp@zJ?B00p7Ukz
zkNJ?v%ro=kUiVtp?^<OkR?l2E<9bG%&Y9p_Y6f-7`+SFW?|-!|Xy-j#tRKtcKD^fP
zm`Pbo$Y`AWf(rhl;EX~=52JQ;S0%mWEbTJ|-)K3+YN#h1@s7S>4LrXBV%Pt{Ia5*3
zD@=i83G8n9l45Rlvec1!lgE$U_3Xwc4UP#ZTIWV(F^$vLn4y(&H4N-oyy22^kmfWH
zy*oU$l-nx7sLMp%%}GQ_(SdsjTOXA+l(!!69<UQADQdRd>{g$Z1u-m#m_0~%ps&lU
zE|#Z${oMYO^+xIJVc7i{CJHSaXREt7+mlMC;k`)r4<KrWHLLEUH3i&|l#xT!$d{+p
z?b4updf(>YNVv7t!f9~}cI=<Iw{IUkp+OvtoPBNbo!fo{?L~Tg3m$1v`MQ_VZ|1aw
z?$bjZGa*{uhz=Z%9@<{E7SbB`G;|@&m7%GwLCN=nG<8jf;~__CXnMz5-NE*vv=~51
zh?0CYdbHo9iXf`c=jBm!JMl=CNACU>qjN@gk(KBryEsernDVyPgX{Nc0;hra?9>+@
z;69vl`8tzf=EzC4!vcFEFZ`X=%q?B>-JUN#mD?J?s2lPc-;oMUPc?q{;0pXZRp5|)
z!r4Cnv(q1d(In760J6RA>u=S<dU1;hwcd*iJi>|U20ltt-$3a%*F`sd>sq)QUZOC!
z$Ehh^;3VB4w$1#Ew?3R?WX}Hh#S!SWCP2x`KLC3rPc@S2&JEH8oFxx+t2AMTf#PPL
zP6g+L4~3?-&ga`89sDw4*BSHP$u2ng-puq#_lZ6|;JwJD+$C9W9+hVfF?F5Md%2n!
zkxCs8J7Mh^qi>B*nqn;Q@hS%&ezcP%xvlu_Nl=I}r#%R0eN0dCbbjQ6vu1JWM=ZNR
z4z`9Ofj2%gtY9wR)-CAXv!q>OqYAum`vM99$}>HuE^}E^_nE^8y5PFzj2c=m@XPm$
zO1Lzz=&e;7wm1B26P}BtxxZdTjQ044g3)==sYfL&D{Y?#6+y{f59<GQJR5la`^WQu
zc>|2t9r^sgsM^dRD{BW2pN0^Tr}I;XU-Df8&YV*_Cnv-2lQBJ6dLz><`El-{=&knX
z5vE57k|!)hjo@6q<&Bi}LR)pJ(5Z4kI2^vONTcvP93(JmLpy;zG826C$CCDbjXy&=
zQSR2p4!+5e;+7ZKPaMe|*O{Q%673?<MR&j*R~^eW6W#I0o?n%|-MW#(w6xBE13I%D
z4d23%6e^9z^tVH+>KhFS13j3a{Pv4b>gpF{hsfNILh#I=*DR&d&Og_2Mg+bk)!B}#
zwWc?lP%Eg4<j~$#b#!R|r0;RfP_kQ)+Bb9wD_VD~*OVapuxHQr#Og73ViIaeN{`Ak
zp!#q`V5`SW=D!CA{`D09BYwvKE8?!{eZc#SlV52Tp}Vez{NvkhZSSWUlma%3|3Gl#
zRLX^50Yu91R|V%;Aek@zp<dYiYgZ~2V$0iQ#vZnXKco_e8CQyGy4lT}fPmtPrI`1n
zAJac?^Z(i`euRNrk9dl?f_d`I)7c%Zm`7Ji@P0oubcx!C6p78}-r}{hjhF|tu|qU5
z4DIHqjLenwb=-E%CH9FfWZ&Fd{F8o>e9OM}c<;6hfYMNC%AwUzG2|q3XC+)Y)iiq4
z;%Z=#^8BE>?6bL05tTnKzDuHMjPvTm=$+%)ZN!YMyCd#n5B%c6_JdbKe?D)Bqw6|s
z&qi|e#D&=$X#e(ja6T@w_W&JZ$je;W;SpJN_`Oq1@G-+0ruVynSFrZHzFm(ld|waO
zXx$}IW)>#izqSsx0D5R<Lp9t<<3n^k3f<k$sz+5^4`BRr)X!{yhAn|7G{4})lduLh
z&(4U(ML+M4ElFky+T1c;fQ*0+$6?InU0MG3Uh5&$+*iS>aMv^;bci^jYpZVmA(E?Z
zRi3fkNq|=F^==j-PJ&ON>hqP<QYC0fw(rP`cFQ8aco#k7;J5-}92MO<f6(9{S?0Rq
z3@I#g?Xhqol-|{!+AX=#vaN<57S~sY$NJ@c5y~j5LmPb3Wt^b><KU;$61%ZeNV_1@
zArgYic-J$iTe{2%LjDvJ*g6-pa{IXFovLFIu>p7n0>TDUv^HiR%@VCaJ}>!)#j9Tv
z%l(B;PK(nh3a2D|7iCQXB8e$mI@Zc+|Hk<TwlG}8{kY^$#kcj2G`96vq_7i_@@@X~
zWd74X06kI&7QXJFzZZ!Q>4fy($dS?udPSG2i2yAf<J2^pgYu>s2Fvq=RAyAnM+a<R
zT<7ULPEPPs#$dchS20;_8u?SVI=Yf>O8c;ankX-?RVHa6{nOr$8O1BjdbNhxrFRFf
zG!6y4Y&BAM4M+XDIOtXgHBx%&s|D4VPminweZU1|$_c~lkw5y5<j#pON$X?(t=(ud
z(!E2RxH^}JGaaJ4Y<ne_h@fr@5$N<b@4kF@_i%nZ4(_cM@=%-75hYeC+4Zd~Kl%G)
zThQjqCHIv6C2Xr)%wS6$p{AW7?b-5;kEik%z-ge=q2y%@&QjqYZx7$%@1oScqZ9`e
z8cq}XT8yWno$3i0!tAqT+rq4e6|=*ckN3*7QXN&RozEsdXH>XKfR~xD5`LICv?`Ii
zN$w06roM{&`j~*`0SdNW>)!?AUxHd}I}f3DF0$^ziRCTNj;mB{z_nbaHoJp*BJHuw
z<L~9{)zy;b<RgUBbG?1W<&_k3IL%x0#9M|J>(*-4mK0_T{C(rAzjWWWtPFInadj3d
zyFmblD0|_7F1Fifc}WT<;Sv@tH<3iP&jS`o%g1U4DJ$ln_iz}5IeyBGvU-+vZf9xR
zzMVl~+<KH2w{J`ujyG1Tue}cy<tIEQ5&(^|^JO)vYe?=*oq|TzyL>p@5btW1wOQdS
z=DI1<o|k)$*IXg<2DfW;j$0ACNku!BNo+bEH|H>sedeyP*m6UlhY~!Rqp^En+b7P{
z{`H4;oyME8BQCH!p|B#yGDO)dRj=5ZQkg#bI~1goe#PEBJvqpvNa*qdSn4M#*t<Q{
zaBTm&G|{M09jr^q1U+;DuInL%^WDusx0-zUg>3XW1S!e{5U!V_#ki*^)L^4d1t}*i
z`7o?v59Z(7H_kdLY9r;n#ZoH&Zqlrs76{I+F;vWKebq2sW+keP|J9l(wC8cp>9laH
zOaD=m&g;u5d0xdrzae42=|h@=_ufCP8-+wnFS>nrq)F&YHH6)~{XM$0l{uJ_wxHG3
ze`_wzmLI#{*|28FA<0kEIP6Ni8BAwA%$4<}X|c{6#L~TPyg_Y0yg}ZBCUE2P%0rEP
zri6MJ<zr&b$7ii+s@~+5LZwfwa%^bV2U7rS1IL(A=15#h;7@@fRy1~aIQo)P%q8Wt
z&TBt!vUT3~D0Hg?+hbev`c-&&UFB6z*BDMY_g|XfBagUVa!wI!>zuTokyR-pD_yTB
zcg~K(J@-$$olnj1KQ0A{1Rb?~X5V_~8WUYrSRQUvPsW8y-z84r=o(|9pe=gN76?no
zsyGRm-j{!0)bSN8Vu;hYxA%0%20{9zSN5xA<_kP`;n<1wSS9zSuy7#3x{B-GTZdg(
zOiyXdK`G}gz2c`++=UbOv<IR!R0XQBGJlWbr+0uBUv%)V7j#-lVO4Xf9im=a_e5g+
zrj$Hym3LdhyRrl3t@UfdpVRyUcy~M>6JG0njz+qvt`}Kyqy*2KryrBmJ!u&WT&lLC
zyoyQiLbl;NZp3`EG@`Ktzm%J|{xs|#z^_DGIwd`PDWN#Xewa<<W0-pUaFc4IcOH+7
z7SrPvgiFeVXd))ZM{yMF^pdPiZw_Jpqg*eGN7JG``o<=spC-mOp`PHnqci>g=?!B(
z{%5j^n`?qp$JXHY@Kf5)7me>zckh~4s^F_-2hiw0;PSSL-j}}iqckxc29x!10~af%
z{_=m8`_>I42FjzZw)87jyi_Z1S?s}tY`y%?kAoXcDl_r(genVW55;h7X+kv+edo7R
zof>RUxnwWiJ*sI}7xoIS>NiX>JjFMh6(V~-+Tz?d9TJu|tMi0V+sAj}G$fS7VW*T(
zMAs~!c6_tecbruJ%@Z#$M$mA!qA7rsSLRx#d{0skZx^nhqJ`?=HU56xt`^!rGtK4M
zxrtsW)B1UecVv<5>=*Z){t4VUT3`T`#%`zO<_G{f`whgo<FYg!ov*@VQNq_>VXVY>
zafi@if!}ZqelDMZoKnMS$<aT~jp1o%yi6m9470H)$3pgQWOkJ}OU6)f`59ULXcL2m
zxpUUDsk1@>VRo=1!rWbFso12yQ~9wno{Q8##42_BJI4<E&u))`vn9d(@02_t;6FjA
zx`3O3)j66`9OD+{$<tNd>h(jL-0$HP$icptOtVo4&#db5#CDqYYm@172fdNoQY-)D
z`$nCc75@gH`s;z)4C{pH5}Pk^3D0CaM>FCcj7n6T%SfK~pANctzYMrvat+7e^HX9i
z)(>>=hn2HN%BpwhWQkJtgf4Y0-^~m@&?uUzrN|rqsH|?-1SkPE*Zov4FsOd+KY;vY
zVbj{yWXuFm>s3pR_uaLGUFeFzc-NNLlR&W<O&6bqOW!)HCev&7n$Cn-hkW~+qJ48)
zZmCrt_y&MZ*6>x^F4ulrcAI9AHm+g`_Y&Wd#$9oZTO*xjZVEk+wrg<)KfOBq@T|`X
z7k7xp^P*_aBPV)v#;rHMuq@kTC|1Wvl#ozB%nRSM4`}bM57{i03#?R1t~lP~Oe6``
zzfwv%J$g}{F%63@t=d86F;CH`<P?&;nq18G`vO5$KBLynfau3v&^Z%3sC|ADl-e#P
zhp;VI`q)S>{)fF$&aMO-?=PE$Ko^#K4BJr2+iJ6hBb+gA<OaD@KCfM7nXwzY7*9lY
z(4ixUovBvjbnUF}8*1>0lCG}2uI*Uw43*5E!*<<A%MR5dfmD{Ke=@Cn6i>!QLLU-z
zm5b?Zu$zrmOYI}Sba7TMkSyALt$P>DeZl*dMuwF}>599w<NBSTQtr4a4OBt)I+Vt6
zij6W!#*0JLS}03IO)zOfw02mE#fh5$-Pl|cQQF?fLUBLCp*=;dRwVoZM8q<zo^VQN
z`nZQ(KduAE;;5vbo0MQdL`7NsTv7FeZc|pB-6XQ}SL~As4>L<U!xFPP^^f#t{o-Bv
z@Sd+Z`#AD;lj5o}0e#Cy28ylY$grzibZ2@M*AmT#sVR=;rDiKCU+gr}?K*gHlekcB
zeVYvhssmH`A!YYirGCSLt89w4mX4gZTd*{y1Ik@_6Sk*<y8^F+3&-8!e=2gIeErlR
z2QH*HB0ra1KB1}=I{n&nZd>0F1alt`oPF_A$P693txu4xO3#LBDvGH+*uydxGeHOU
zIJ-S3y4}^_g612{e_@7huapRkOuyul@jJ$Ij^`tpljs*y<#fFosfb-B)J*bd!=R#h
z+)nk%#Qd}lnv-KmquP6vvoAKL)J85{LqSKL=>8_uX!-N}GlqJ#)u$2Fbu1SZle`-y
zF}YIH2EyND6UAh8mQ$iT>IolgGO94glSb<2(-$LjTC~UUuejCALBMlZXyws{4|@`4
zj7t!sSgGc_HjXljrjKut)p`E_ayS>m(jIKoR1B8s=n7>&d|k6}-tR74<{Dvl!;Vyv
zW)|1f|HJ9ji@`(++eA>U>U^DNH$qKffGl$cp=9|b&bT{mr(SU0Y!us`X=?f$?bgBN
zwwqc*ShFb87s;UC|2`Rv<vj7ac2`AT*{P&XR^z4PR4r_nmQhPjH&~oQbTUjw8h14~
ze-=E@Hv+t>+XboXM>OTdE14wO6y3iO)n=VP@XMS~|CrfL(}1a=S7C6Fep|5)hIi*P
z)0?O?q-a@ug7%)Y_QI;~y$V7mB4IG^A+f8HzbE<&YwNM%v?n20WtiTChxwpg(aCNR
z%Zuq`1ODgiG-}m^;f(J+DL5DznFlm)CL;}gw?wum)RdM*j|oyT6#7uV`hGZkg|%=b
z-}=>K0Mt1U_oS)LwbkNB;SnDPFIOd~02NiM7;QQd*Fa>>eI`ZIRDro#yDlt#K{r4L
z@KJfuogXEs{l~xFhQ-cs0pvH`9R=usu!JlERZ+OAw7y*-Sq;M!=Q8a$wcZ*n`booj
zW>4!3zDqFRyk9`)|J4y<vQ7V4CUX>I82ePfP~z3d9~z`@nSAz5Yev)XzNlf@!LOhm
z1F5r@uAH0fa~aFt4txxxRiPf#XP?VMms|FZSk}(BbItZ?AP=x1<vsvA#d0jd#66(@
zd5hIS5#PM#fd^i;{)jM?H)%DixSzWT&ZXH_pQh2atBo36==<~T$ySf<jb5dvRcEB}
z-$fSDfHj1EN3W-5iP)m)+2I}8V!aqndf}uOhPYJqZPPh8a5}!`gxJem-^KSG0RhLC
zh`i6#5S~U_Fql@(Q$7)d@lFFtHtUy<g>lB`=|1NnRh<tI2oH9s-#}^(099F%$7rwT
zFO0|+d(>FJdDj}hT(_f<sO4cbidXG7U8O84x54vLdfO)aLx!0y8Vg)N3Ak1VjXq<W
z4aZ(7If~yv%xXVFyV@fsL)}qOPY`(Zn`wUTY0)apJ0&2ca<%jZM8n5}G+%Bck9ott
z{$hC{Z)|ViZGVHR*@4kNfD!)THs!nEv&ocgP)&PH`&uxUxZ$TuMTWfM<Urp<I_50F
z%yG+0ap<urL4G~lEb#7K+D%4Ct4PegftdpteBMVy>RDYII4#aV-}bUru5J=MF(@yj
zgwJFz#(hrryksUkdF_j8iiiAija{!GzDTQ2sQPz6pLUwB>;Z1~NtT7)z_&LRU!%h)
z*_cgLxF_VUpVUNAa<Y_T50z#8jTCw29y}&?BPCK-oJmH;I3i5^P3+;Tl0PRq_J!|-
zZlt6}hu>5wr1oOGk<C4NTs7nMvm50<SG3wkEgtzBB$c8<&zpx@)D@eo-v8e9rYwDP
zW0HI!t?TMX8pM|<{#o~$Gq676HyWQkB*(5r=OI8zFT3%HsVECz*3_e8L`<-?uvS8a
zdg)U;<-o8YY5w1CZG?saUD&`vzDV@H;>n}4!A-6YW`|H#OP9UBqdk$Ys!ImtXSLZ6
zpkZJYMVb450B93>y6lxAaRF?4tk6B57C7`$&dP>$UIn|U0wtz(&EXcX(?h1>o6s;!
zdiT_T|AUya)9q}NLQUeZAptV1JipL1nlK=-LqB2zmLvf5B6D*e<4+d_-dHJ&g~U){
z*ZbSAfBu=@DZ?1I`FWDuG(~~zqor8@2hpuuHeW59OudQBHCvl$)n+OCks<_Fmc5JO
ziITcvra`yxmAu_opS&1bxHOPmpVn@{`A~&<qv~bIn~ws22=TStNJ}cllId$>(IL_8
zCI0<|tYtH^iXQd+PLy-X?89v;27eb^*hXm1GWH>bxhb0q`vSI8<0l&<;`omQC*X*o
zo27f<xHwphjfl9sb@J)NwCB_a9rIEtSl8EuIra;x0tq_9w1Hgb1*58Ldh@R=b3v0L
zReNCk3uoD{x|B|6QEgrRTPG!(HA~pU36JcED3)c5fYQRPHXSQNyD3?DBNzw&D8{d+
zy_WF+*Q+$XgOn<!=)Ix{b?#+48D!?Re*;<7mC?`sv}_OMMz$f<Q_o8p_zW{mvht~!
zwyt}c6|ef0NC@RTRIL<MvAba8Lb}D6NV067M}a8RngU%(#oNuMupP!<DnSMG(ZS?~
z;=gx`sF=)5gI3U>0zwTAgl6v!9kqo?IQFplg1h3?AG$OjkbsVjY~;PJ!snyOe8SpK
zz5yf|ugK!Kx`!NJYNs0aiKRPQbB{RIN)>liYZ~+J>Y#eXcn;n;)RUg#kqc%yk_Bij
z;Kr%d!>SX>IP5`q#q3W!k1`+M`$&K1OTxxdn&cW_s3-Q+AneEv{ejdv(+JRAc-B8q
z=bWM>@60ItASYO~iE&PP^$(Q83wyfZeoF<ZZy04Mk75Al^FB4c=kW5hVDMNE`jWJT
z*W{9f#LWFapt1Ug)f>=t2jGETU!>}pcvoNt045oi&{TEAcP(i3HbZ{TIbvZKIJr?>
z{rt2#4SSPV^yFm^abM!v`Q4++F!)n8mh`xW$`Kt?cbY>ZBR?Sf-kXHpGjVFT%xHs5
zr(pC{$}*|Wt)Q+e-!vb2gSFiORCSc9u&M)}!2=g-q%bD#S6BVlE21Wzy`899?;rXi
z%+G=oR)np#ic=_AQUF9VK|ouR$TTSrpA#bel12~P*;gV0`ufaY)U=9I4RHfc#u)=|
zUN|}rcR-N9iq<V`n;pBn4j`gN??|0&q*>7mQd0(z?qQ0fNT;xw(=j1Q&&&ZD0XH9I
zz8yB%CA6vB)vXyBcPMR`8e5?8aCs9n)`O3|6=OQ$j!&~8&WP_Q!&uAnr6oZ3ohxr?
z!?xEucrI9nEm`SoFJjG4NFg?+$@s&G|30O?_~VO=OijFWZqG`26+;ZrI<u&+Hz7AG
z&+e<8>-zn$_qsLfvl4e-JAU&rafQ5%TebRZWl*_>>g42~j?NUy%`j<6O8VH|#wQ23
z48Ic~*q<0QTFk0jM)T|{j~oa}E*UK@RrV!Uo~Qcr+s&`ni@6_jiGnK;tc`8?MZC*D
z?+rC@ica5^cL<-5d)h}sTUO|Wt0I^%3?hj6iw!&ptZpEdLuGDEcq<=by#>{YBbxCp
z%y%(y3eybyWXv$+?i8!@={2k>GajZ-ROfpA6|AT}w{BTjoD*Af<Q3a;r+1L{0?p3?
zeRlpf*6lCS#VzDO*p08Wp)o$J@zLxzZ|~&f=jca9tmzGic6%vh1}UpHSv=j+6v(OL
z<TV?$>y;q&QdyW7a6(cDZL`cufffC{rah`YoV0Ep)MvX)Fge5W$;!0Y#&}B2T9a?$
z5w!}Fb9palgML1}rd11=Tby|%uNhN18C{G>`B{V{%5a5>z!|N+oi+<UALGXo3UeBn
zL8n1q=u7UEX5?NF)Elgq+Ldz+su&UoW#&bZB#LxLU60Hhc>!W4Lrqw8FE+tp;|(>P
zahEmZSIaGica#Oe0;cKkH!cTHO&_ButpHG>x0e!`GxkMD)j^n<8M}2URLA_%y?evR
ztAD}NB+7m>dZ>djB#q$P(2mALzFx0&k&$^+@S(mt`JW=aFNmVN6jmw|?ya20Ea_hx
z4GkkR{2rB*G;}%SNr<e=h|GppA{SZkG}UeEuqok6+=`&?K=dQ7Lxcl$h;zY|xA?pj
z8zVGp(Iu~@$Dw`}JTv^1_P6Dx$s35&BU$?Tv*oT$6vO;0DvwNZeIaF8eD-2%ZD|hb
z-RoM4LCFu1*|=TNP5mqjE|q8_m(J$Gox?_LYv%k$eU3AAzql9uvg{OR><079Sc|gu
zv%N^(D3Ur{`dA6Z37sMuL+i_(x5bv)O_pZ1;<;T|9m6j2DOa)LL^cseLcxz0dM;im
z7kCHAJO2D>^~TLjxl{=)`I2L`qU6ftN0f=D5ewlaR7qC*^Z&}h|7Qi`NRl!m{!Zo1
zAn8M9FF1GnepNbk=Dy8vo&~=u)Q7b9QS^^?2nbvO!iwSCpY&>FW*`V>q=7BcjCM$O
zI$f~$rTsW-jb0-Xt#P7jW~Uexwcg{mpjdz2VlyICG~^_VhM6KAT{aOW9zg$GR!y%i
znLiwU?(S?WRc8m)CpDMza|q9Cgn%%g@mW;#d|AL$S-((KuPB=c<k8ykZ}wSW(<pls
zpUgD?gTa0{^!3|^^7tSiYaX&=>mz6S!1ZH2^i`3=k=NG@PT<jCAxM~02Eb<aM`J<n
zl_O81K>NMQ%DBGXftRtSW;BR%^ltX6r_$#&xZjql+F(7%xjqJtgo%f+RHl^g?%i!}
z2+DcL2?@+~>0ZF7<T`EFSn)Yw^@dNmK5IYmN>QTz8=yL$V1TJi!$cdli;PD`hH&pS
zmH9~NP3?YU#zi@<JRxq7Jl65r;wu>h{2q5DH)8g;-qY=K`70xa_4hIpV~U<twDV1A
za#0i!&kugB^xE>Ajx-Iu(IRX3S+|LD6!|v*eOXF5O-R45aVB3v5@1$_-R&s$+K5XG
z^bkqpJCo8q8(uuFnto1x&LLmCM#dwvel0Ehjwj*K{1r){@6S1n>WwV^@VYfk5x(NC
z_~-aB&~u?{p~RN?-X#Bm33YzUd#Xkm>uisuzV`Lo8G@sr-GM@Jw^o^|5k}Y=-AtXy
z8j(pzYJErt`%iDj4M6XiOH8Iq&2~j&zrxFY!DcQ+?wzij$EDD$g<Yht{D;1WV!xdS
zGRsNzcfqUTisIM;HuO<^4c8~xrC(x4Eumfv+4ygB(?`vzw}PPLLS`+ktPc6gkPIAE
z$BL#pmwI1KX^Yq=xTYo`e9GvuQ>?zhCY;!>)jcEt(|a)CZJqm3qxnlNMbDDp;N&^q
zk={=uPXxri>UJ*5(o}}wS%$s-k@-7d^!|YzcegdkEidvQ)Px(%)rF}LGmhCmzGqqk
zz6a;#Ob8ur8}iShqv{UIA}|<)*9Npx{Ldp{7)22kn%2=Njdo7+Tm~Oo8E`F9ua4C*
z2vHtz$NY@XHcR*~u6Pcs5#2*0AX&7vXoij(zTU3U^C_>vCsfB}D|yL63(NUXE+xOe
zTW-KZ4+q95pV1DRJg;#4Z$G>+_M(fKtvsq5)RWpD&B-Rfy3_DKrP$M@>PEGVKT{MG
z?$NmYet@{BL=MNb)6so{fPHXQ>62EdO)liO&Jmh<yzR}i*0KgM5@d&E^N5^vt5!aF
ze)vdo5+}d;#2~9V+Q%OACYqhQ*3zjF=O?JjyF_o966_fKo_zQWPyDKzo9(JJNV|U3
zfV;|j#bC!4`Q_st{c@?P9S}<Xj-myA7bg}k>{oK3(Yx5tDWD+HcUDfBwhg5HyV2rN
zcytww$oI7EnWw-Xp*ou-<5-YJl0f)@5D@#9A?0T!%0)Fr<tht|o|N=x+RGFxITNSi
zyaa9GCuyb@I5vw+&dcA`<7n!8^?VahwL9Drwh%*-37PTq2CX}DSp0(6$I}Y!(z5KI
zAT$v}ONw)VU<&!qk9GFfF}Yq>vs2G_d%oI2oH$T6KNkem3SGS`IVxhA9dKIBJbF^<
z5KC{G52>d_h`$~m&LpoeSuJT1<CxNL?R_c?N*Ijgy>z+*1yHg{VsJlfS=x=4iuSPl
zM)i+*6wP=EX<ONp;BA)1;%=udtDog3PX+MnBDdvwZB?guo^*ZG+a|z<sJA<vuX{vZ
z(-eZxz!yce6|K^sqpTapqsE5Ah?6b<&0RL@IuCt6BY1Z~g^-?5en~@8d!G_YR$P}6
z*KB+m!GhN_%ju}wujiQ>cH|%Ge^|WG2(9RvA2qY#Q>!>qf0Gtv++1wYXp%@KTN^FZ
zud&KhmczbXm2?dezfGKgrM}OudHh9>=D$$t|Eqicf8-|r-T$p_T4d|Mv4AF7b%2)q
zZ$X|Uti?58UiP+arKpG9+<tr0Xf0&3oP(y2(t8SQN#EM#nx98aL%Y+p_|~V+&crXT
z;&)AhyR$UydFq(&kAPF+gQu{8cS^0N8n_xI?iF9PCDhEz3S5E4XGjr7onwCq(}3%r
zQ@0MKRAsmPDynm(*LXgXaOk<VnkM>3Q8qlQu!(W;Afz&lynfTm2u&~YG*ZGww0w_U
zM8D{~Hag+yF<8e!cb68WtwKY_;lAC(XhjT7M^Jy_xWZbl$7GTW+-xsj){d4Z>>%7~
zK5nZ`sXu%Dqhk6NIS`TY{NRL#uFI5&-i`xAcpo{cQ&zfADWsGWmZozs`&L^xVf`J?
zfEfg@VBI$=)|@isOJFQ;7DEke!)21E^qre`4|N9UR5R;!wo(v*%E~VfPWFs)5<JYM
z*UPRlUF0c<mZF;DYMvZOX3oz>%PYI&R7@{&d_Hyyn^cidqu#vKai67%t2Oe=C#M1f
zbab2hI>N5C()8V@b=-HI$?Wr+G}VwkKHo^mCw}3~{7m^6NS*d%N(h%J$_U*^tonMg
zx<zZMMki_aJ-ABJ-)tl=dU_&RSLRAmUQz8pI=%PvLhO=#J4wqu%DO3|w0C$?pQiNa
zqWWYW5oLmKQEP6AhchX;DjDD9HGb_o^GT-qYUirMGd?S#ER@bS(j{qU*NU>L);mPR
zZ5OD6d6L(<ee5D<k|v%C4LKXtVe>KVU-mDM4|)a9OEPz^o4|Lh^gpD`^wVhYVkK{e
zWzfunn8<%G@04?>6}#aSZRH)jRII_@8cE12vL2|Q&yG@ysH^6snRkjeVF{ciO*8&B
zrSI6VWMfgBpIbF*n$@^iGW`fzI{iXj9!&OOQA9Y95Aof5l1twC1SvGXM!(e8{GdIv
zEH6PAsjA*(51n@@*H~uda8+$?CKVxlO$sHFe~flXdh*P3!SPu`WZ~_^O`)x3gtoYK
zLu9Tbu(wEnF)TOu`^dx&epHkr%Vwf8z}?X?!r{9PdCUY4%I$BA`uO6GX+AtFECH?j
zG{xf6UP_l7?VBzW8y^0uErGTB1On2D{E0W0cG(C&yDS*&*OW9)?N89QPo$yNf-(Qk
zF_VIr!zlM}j*gr*_)-VKx|ie(lZ3{GB?lTVOFO9&`jWaFFEaycD#?w)!(QmqN`z^l
zV#SZRlnnkO_QVjx;4kfV;pe-M@5GY!{$E|Y7@?AwP*$uyaD~uH*1Ctt^u4`7>hSj{
zB^JCR7Go``(-=pvV?B1~^A?jIe~9^<kw!N-mPmIEl)Hb9Fz3RWlrw_jz?m$SCe2LK
zr1dRq#)E&O9DkN<^j6cANE653ogL1-1P8y%_?J&K!X{>(G^PbdR#0{I$MyP`itZ(`
zOKD8tDvGR=YHO?kx$}n;vb^oZUIih3jM^w{RcoUweIp{{$}r!zW>L9w)l?fGSYV*!
zMWH@;&6eB2i47Z{XMzo;r*T3&prPT90O&pCh%GlX^HUFCQR$w`&GaxK!R2`^o@e?y
z1c=b6UscdW7QAO2M8j(;MO?=oUOC-dZ6264Ny1x`Cs!9G2=);6@(C^(`eF}`NQP6?
z#_hgT`6!s$)GWOQQmbCi-W9bmRb8ad43tpBW<}Xc%`E`_us&VmM8+}#5q~KFu|jpA
zTXK1`<P9pDXd`3he8A=z=$xjr22N+<k|Hm3x@z?gz)9^z)z*nLhr4tlG?RmyDK4T*
z&(SG8fA!*B70=;wqz#3B0`L{FSSvnllMbtcy4y>#if2}NM?B8Nj_aqmbcN<FDz#4S
z^VL^(lc#^kUa81${0d8GcGU4?{2Q=R3_N|iUA0WiXMKnZ&e@M-F-~~K^R2-0%9L)+
zZ~dEwd&|*sP}EiDW%Ja_IyRQECDtCr4|f$y^>m)1(hsX-#g~SX`y4%&A3N<`O*cP&
z+}1*Ndp$6ozw_wfK51#qC@Q^twW0IT$LI<&8He5^D{=KoTEpJ1Dk=t+*9>td2s=tG
zJ@;p0(lz~Y&)tp2#fBwJ_QG3OM`qMXWM)CU2clchMJkNJnzNUzMI<kq{*QgfIfJRD
z5Qn6hJbf_#@CV3a1xlupgss*%5@6GWnxJeF+GXAjlCfi=_6{s~MXX^w^tIlF;f!TX
zOs9T=<^v?WtElNo!{JuE$wCKauf^(xFWwx-8eoiS=Bj-SQ?*^`I2lb{YojjxTortT
z)h_k9HaETQV0wWoULF0TDVelV9!?NhROk?dxE)XxWg3S>?y`?Bc09#7V$R8Ev;@*Q
z-oie6E*x8R2c1c?H0Jbuv2_%=LT$ZxRG_0!!enoMf4UV`C{YERx$$sG^Uq!3Pgr}H
z)Lq=rsM2r9rjIej%HWZ!AK`LJ9~m8cR4vP%CtQWS<!(6|cg|Ms$ru#t>2NpwUAgb^
z*{4y_FU7G3k7m&Hc67=q<MIlgE;ZjY!RaF6{<+U*C!{sVoySho^H+!+{X@}8Z5Mc#
z8hLvb6Lbr-V|tcLjt|Yh${)u6yjT1aPLI7!C5oTMcZ1Amv5t!KJgnk475%hOJv{(L
zGjcjA<LD`OZ4_A9EckWP4xrR`->fdIl9ZZ10i7Gl2_nbtq*V_mWadn=TDV9FZJnY=
zKsWCX>-~GyOSN<CQv?s08;_-#X(R*)e;tK6V&I`y#Acvtp#@k3geq@xvfd8*jPVx{
zK40y$qFe_h!+q4Rehn552#+)#tgzF2XU<VvB#~p${ujwR!-ARMy+*mbIzq25h{%2_
z4TnKQ<Ak0GksDLDJ$Anxhh!eALHCQ<?^w{fW{uU3O$j_xbIhqrmIlU1R%|y7XB<!b
zYLHd`RT4}s0$qwbQmw8z9T~f-!zY=<q(*mFWv(4!%5ju+wbz5kw`;!)DUB~aD`by!
z@9QlDAzoW{xO`%#;kj*n4DS;?E9R*QbUeM8y564_X*x;wlaRS~ED#z0^=nxh`8F<@
znBrFD%$AbVUKD1Jss;P#cHnr}uD9IB8<oWzBk{IrCixw4x>oX-CN5-<LQYufWQ4$=
z(Uh2gh^4@;P{p%;I(IwTvoi82*4$HAjJs3&b&;Be(HhZ;xc2Rw;}KcOG!aX<?+eq3
zzw&`J9r(L~Hy)bkhMaKcS5uN1Ovg&F=%*14od19L{QnpL{<~ejCgqv1g-9Ss2uK>m
zo@>YPCD?*HRcgt!-b}?z3@_jg;}`O|hk0v7VWb82E_Kg^VOSdMKd{DM2n7<;mFlS}
zn4A0nkT+R%#!(kkhsJ<A2>1sj$rj$~8Isx<*=9l*A4j*N=-1Wlld3;bX4)a5D-@M!
zn4+HZ@|{$<_w^w;?9oQ<)G;mkn)+`KkAJ{49MweCA{Ke0jlKSuo-gYKKkeImD@WK!
ztyFt<S6`tUI)2O}Sgl&s!^y$Hxg51w9jlzAr^`#5T3OB$+-09-nG6Gn%k_Sf3a0pr
z>mK|`R2!sLTnLMft4OStS(DdNW+E^Rx{MhKe%6SsP^tSpTY2$uB6$l8aw%n=Stj5a
zKs)BN8M1V(7XV%`IrvfbH%3>)6U|3kFiM)>X|d4jWxU{r3XSCqwj9c%ze>g|t^9BZ
zaK=J5h1|qSYFaK5_OfObRee>L<|R>+nYWr-+sSrvwH2UaMmTZMeu0v;h$*}FFme2(
z5wZRGrsjaaj1fTSGtbz|JwF-^5k2dLue}RWgXd8hb@7%&h-`dJtS1~127Fk`a3+w@
zcP$!6{0{vkaCJkeX=8BfNgu2DK6KqaK_J_QRs#DIa|5+*NayzYM3ba{M70$ic^)-R
z+w_8!me#R0<i#wH0Dg+n#5QkwlPuEr1-WT`-^hniU;4<Ri3FX+saHQE6<=O!0Z26a
zvGqRyMz}V3xEtnfm0NVwT<;WA6gBun;k6PRn#VM!6H=3$=<p^d?6hWFKSq(6PZ5mo
z7ru=bS!L%p>#}mjN*x|R5afL`O^;0<fj~@tkBd0R6L9ql5n+QEhfQ)cgsM%`;s>?P
zQ%jqQSO62TBeOylfp<o}w+__0-*_^iAh*OcPQ4}GDdYpK^Hmc>B8G|fnfmgiBGaAA
zTbjI5r7Q?oX^s%+L(M?(9-Hnh<ijdH^OxtOuKxfOMm40>-elB@dcVP#9|#%wKhKTq
zgb<0ub`3hsU3G47!goEX9c{hcXL^@-*t)D3ANe*pts+IoInkr=eflrt?vZ>r!NG#m
zcEFb}ouJw{yv9*hOwdn2XIYjFjg8m;*`9!@pg)Y5WVy|@uhN<?IQw5ct&HjWHuW6N
zL&(4_3o1A()2kgk))sSJrn2q-1Ek;CY(W!mtAq}L`H=KI{rvaUbI}@SBx(?5LK-OY
z2h81{=Jh&2a*-z72j;o-bTlASyF6rBkNfY@Bj_uJIbp|g#m`PU7$Ld&u)FU+0KtwL
z#t4MJ$Uej{G#j@&G<r>s`cL*%A@~;tV@dxU{;eg1&gCzg22$7p$KuC&<=AE{&~HDJ
z!EpoYI>UKSKj`jdEa@staSm`guy<{G;&P(T?;}R0t(;wz0T=Jkf7S;KoqAwlPusj=
ztE?8{eFY@?yH&-@FHhJLH@%FVN?NWB06E?I4Xoy+yww~f?5)U=ZaP$OJo0-;*vU7c
zeBSG2qxWHJ0PQ0wR-DVev}<2Isk7UyK2}MQG8xzbS;cuXYsZ8Vt_~JXl=(Zep4P<4
zh`UjQHRo<+47}^?@KMZnp4aL2)HI^E=tpc(t+by8e_j)QzJ?pi;2zh5Ks^p8K)7&@
z6Sc7>jV}53D9M!H$EATVRvH4fws!<RX-kMQT&KH|L&o!>W2=b?tsh2Cy^fB!AT$Ls
zRRb^812R;7;3EyRpgYF9f5rFvh(mPNffMY@wRvSJ{M^eS!T<Y&@JX*()-r<w$>8xQ
z?gsI;Si0(|d6vI+1LAn`ukVlh!ME@Pf!a!`Ed+D@-K<G4S;%2k`Ew+Xqju9__+t|R
z^k`d(T;r#iMrb3Cy=J3z9g6wLXnF4DL2hWida|Oihe&#*VMTfu<0s4C4muU+xo{>x
zyHhu{`psV#yS(HX4y&~YC+&+u9kp%Xhi0E!BIIZINZH>k9-Id5*t&Ys`L`eV+&$o)
zv(H(ifSN&tnfaD?NtD(8nSVOKKPgt$C<#VbSeSDHMxD!y!;E<5zL-!lZxRIb)0Ki%
zlUwqK3MN(ij_r{9{{ZOb0t91ixV!XtME3{x^eTbRnVAo9aef;a@v}9n)RbBZj8J_<
z)g>dR@>t(2Gg8+Q4WHqTZZy?ohBKYl8|T;Suk@u&97BQlO}=H0dP(xMLQvuimcUZ(
z96Q-ASFK)RT0^qIuuc>btH*h!z9Q(pX<qp595xAjE~O)-Ond!yyxdf_e?7<JUSm$6
zCtFwuKzb@N%`-8E8u7y<kgewMoAfALp!Y9OF~S7w44V9pPH+jA^e>6XG@GD4hcq$G
zMKq8l9~Q#VeYO$@<_=`oefD3xQ^C)5{S-h{&_(9vn#HlpiTbrE+{5ImD5!nSPy3;0
zTu7>hXzlp%uY+ry@ClZD5}Q&=H6|^y-cUrr_ln<%M!@onhzCzyyE9&X+&YRaZGqrS
z$YZo9Cc-l-yJQ7F9o$l!SnCT(F~#bNViWX!kSFwXg%XJj98Yw8Ql3EM&rTpkZ}HHA
zmC3(>6%dwrQ9WQxq2;(2{M8HObAOh`QNEO+rinP~8}HDCg&&6iVShKBUtqQHM?fxr
z_QB}s>1fdM=!AxNX>s!WY7M`iV_8LhNsH02i6UH2Ofc&xTWx%ZXDP<hK$GeS1*f|M
z6VLMFHZjlN?^PYLOk4Iy7uoyC<}|308};5he(qj%g^e)7db0cM*~JO%bnAUM?t9$-
zrp*$4jPk=#s~u}I6XXA#*`ir(T=$MRG6DQ;I#yi1vbJ1gHQnpWzBigQ3hS~+c?PzH
zBoZtA(u4lqD=01GUHK27@GUyTj?4fVw|Ve3)xHu@*Jg9{?qqaTz$@;yv&~`9-JepE
ztg)!!up<tIf_ZD6;w{9(-7kj?RSj!aXng6fZ{#@b8z`vvdJbUd=ppug=t?nx;bpRz
z;6U|ZR#qjf>IV<%T8VACG>fl>L&wXzauT7dCd1^DGU3(XT<=~P7&~$GAn7%cA{5Oo
zb(_TqG$NByRMQ6LJ<a9(bHjdjxorkt84&jJrd^-1vBO?K4)6=DfM=O+b{oOdqJ|`A
zW?jSnq46Fbp!SG}@_#=b)2n<t)dt4QTfbLl$>MhnK0A(bE~t7o`7tF$AM8|2p1-iO
z`CaM@B;p6t3(%2yr+i4rk2jxy&j4OQDPR9*>+9K`#ozhWB)0NS2J<o5{(hFBEFEN_
ziq6^|b6De@3H;L1E(N8eO_nDg;%hN1vt3>h<&U4z&n1H$GBAA+zbrL*F{5jf;a-bW
zw$F1zz~KUU1aZ@(=9Io48)96Yyqkb;JS_nU@FUu+FSOoMHTp6(ZiIY|^3ArB$6P#4
zluq>$Dq8&nap^gIJFM8r?U=-u(JMeHC2gJE%Q`$Px6<P5y5)_!sa7~xp%=6`sMGaz
z>;|Z}5ZuM+Eblb<iDlwx$SB|JU?}0tywqYX!aTO9r4lZf%#bmgV^yc#&n{(hI`mnp
z+rxxDd@Zalv{A&#87gvSu$z^p`y0}560tYTGH)G}OtivuDM8}@iP2r=F>HsjkiH<{
znOT?sQ_$9_$l>GOjfn{zU&t)T)a!-tv^uSMo1vR%N?0r8+I`CPs*&Ots%y=PpRUcG
zneahjSC2}5!`6Xb<ZlP6+ua?_-lY9ru<P@M{{f+$*<M@)SVjRt@F7+2$o3bnqyO@H
zR7M-)QNnzimC&1_mmBAnnN4^euR7VS=J~^votN8DAUt&f0-`?QQR60?usMu~Dg{yq
z;~J|iI4lais3G=gwm5bbr3V0L2iy|^b!&$D9V4qJ_V-fos1GeJg0BC#Zf9oY#Y+nD
z%hGsWDh@fW9|dI&zrV_;1}47Od`(Eo(WPOd=<#(xpoXwbQMSNJ7Z^-w#Xo_se)Nkv
zg?4UOCW<uB0}Fxzt-$NusBCB^<U{@T5)STMqJ1O@6^4V0XN(;d7HfX<cb)dKMnXm%
z5}zDhOwf0Fi)%ZVj7RYc`g|wtQ4?0+XHDmY_R_kyAbg$rw50n_spx|GJq83S|2Gr%
zpAGhg3TOhwzTH~48h_r<&+xwR7E9eZziorD6C|<SvfQidSx_MNz~%i%ofqrdqt8J4
z8HEPj$70OX_%}z04W|*|_{`Tx_N3KOTjvrJF9yBdgFrdVR4-_>1#D7}Hx4y**9ZwZ
zkYjd50%N>8`M7(0Di+zfZBDn#TNDCng?9BSeK{yZc}XGcjJJ64OxUB_U(aNJ_Js*m
z7y8x=<Cqn@rIEk`bavL7WVvty8<Rhw@ibf)0&Y0-_=&(Ca+q8H*uX|6m+dI+7E4|!
z#<%rey+R;!XtkmJirzUZ^2g(M`Jc)wTh5`fCXQTw{{Zge-;XTz&PJHnNI1?MI#L{9
zb*PpHPEZC@;b${>S;S`VVl&woOeWAu_h1e!CvZg-AXudGV-xOC>f$91T4z$YR`b<R
zY(oyb=QnyosA#?mvz}r^$V1aE-hxAnDcp!??Ib{_07(<{J9h1((H)W=L0*^LVq#O!
z3$Q{3FCl1A)lFNE#saw2ABQB?39mo2W;KCg?`d_LaA`MQahx1JN6d!xiFaI`;kJK&
zPiQ0p8P6yvB8;yHcgI>F7TbesND0fxj8dm{U68=I-$K8x&0;M%P>A{)yO5?BZa+D|
zhOc+ATq1-O5?Zp;YP$Ux@lux~0@nnxF)_=5I~NVt%#!7P=D;*K&*Z?~749p3X2jqE
z_aYJHL1^Frl_U0GDze*5%{G-52{JW9FnORu@rz^>N?%ymuOZhg;9d{n{4#7*GtqOg
z=TROwZtrMGgP4M-+c3B_pL!sZ)!IY3Ma-p|#f9qW8?2^C9SNYbXbuVHHTG&Jc#Li(
zek&o4{2OudluoWluj@T#sja}~gb&|mU-@j^8i?`I#@cz>-N>U7BuJo}Z=Tbo1r-!3
z2_bSEaipZ>5fET+!q-uvlF&g$W&DtltMIVvu8%GSp+=XQc+(+HHwNQ}muwb~3@rl*
z;L;BoE5e5WkZ%HJm)WlYulORqTnMJ^K#Zb$f(T0MeR^Dz&$#rAJ<*3AT|4WHSrDT)
z7|z$xY~lp;Lg8sF{L<2!8!X2n6lrpTDSb?+D0QMq{dL;UtS4r*GO^l<oC09ts!Ezr
z^j0<?k$}#{=}ykl6(XEQ>p{eQ%))ZX)*c=xi(NrS=cq4%A7uYY0O^E;7N%!2#;vwF
zd*YclewVD>kum9#r~^KjBFcV6m!gCTXggdBgs=u7<H+f4jif|j$P+2$rlnV`>5h$O
z+K`Vy>0Nd09vJzk^ql?XP26^A%Em4b4Iuu88+ZL+y<WDULtMU&Y!4XygSe=Q&O|#X
z+Q;>jc{}b8i-7zl29p<bMDit&5vv6*m+w=Zzp6IO;UCh>K&fGblJ8JG!J2{sRHt1*
z6pWW;@gmB*#oj(sO@}cyQM{8)?JOf71_M;^18faG4hy{bl~-q%hf8N_uOAJ6-~1pK
zJ)!;92FM7aJXg<dk*D(qQ~Ojjc$B%JzZUJAlAP&w=Ip#(IIQ2&^NYJoFdjZW!h3`g
z2-6=1)|g+NE*E%fHL@F2*(fEy)J$TsWJu$LxvIx25XBqkx=-?v>YLCzmHSNBR^<6u
zwl62TY{OUS0;)3JC3BhP`s8=!GO6<+UNb@w`exzBc;Ck+yOf2)Tw-!f-LB`T>1{cQ
zXgzi8iU#>S-tHCY$QdwGi^7Qg^YY!ELusA18>TLY>sv}AV%G#Z)Xf5G`_`1{ufc~A
zWljyr6HkM8f=69To$~9#fU)IoiOWCq;eXqqT!*K3oCbe7!jRWpwFckF_TOuWk~V|%
zqdc%1ds6H*rjtg$Kih<?aYVZm=0jfK1F-uD-aXpaXM*8&*w1yecQ(6hL2RD)zjgJu
z688R?c7qZw8{@e@>T*d)0WH2mxB&e!;TVSQ_O*(ix4_JsH}0=rZ}0s3U8Bn65kHB=
zmUey$LJ+v<zv>%xZ4*V0oRUV(#mpjCSiD{Ic{lLbNX&gG12U2O7LM*c*-)B&{!FVC
zK3+0e*A(rmF{w;rs#4y?P8qx13Ql|lz^^nD!Mv_0N)Zffb~<|Sl!1@4DSMJ%huUTb
z!H;*_XI22g_v23P1T9k=pdjs(TB0?oB3`Dp9|pAz2@A`Ij2!Fx=7>%xWT;~jBRVe9
z-f}oh6mj^K9MrLArqAr*`{|2?%Nwf5vL<M=E=@MRs!j+ZJ$u$GgIfM6F;?`eg!2{K
zFL4bC-a2iDpLP=hS$S~C+w*!_>0;Sma111=!ttx%aye2?Q5t6e^_Wk??d8RoYIw+p
zW!|AM9?G;s%o?i$BWCjE@)>D4eb?Nal-#Y@$!UeYEw7a;0ELp0KJ_W&PPxH~Mr`M@
zu*AK|tkpsrQTB>Z$f=-FLk^QB$>$}R;IYhp@}XX6T5tQs_W6fO;ZYlhZ2gs#aFtr`
zNYfg(nI}5CZ?1lXnJ?KC)os?%+Z9H}jcn67zU4<bTp^d~?Cg5uX30(5DAM!Hw{pAQ
zjd%gz%R%hnd(`S4YPNnO(RB=TQI<moq_%g5$s?km&T$>N9=E)`X!zm-9W73=$}+;m
zATKLLAScYz+MSfaB5b`eGYY4&VZ??yf#2#8M#L4Mvg#d5v(|5K_LARXR+`EAY1%h8
z(zUsr`KRxHx%8U)Law9$G=X*zd>RQw(8?m}p2yYI0hh_i>PQ}<4~O+Yeh3DWnHfp^
z8)Z%N**-3k@2BjylH$9-ZSFE5;^j?|`o*+gL9i0*7TTk)vNkD!3v&zjB2d@`3wM{c
z2%-Fzk7<{3`F0zj)8k+)24$UFX}7;6jlYbG!)B$mi`a_ytbXUZq$?|<I%l{*3D~jQ
zo3X1A;^n1O3*(;I&^*CfwH|5$#ARa5cPU0wNI(GeanxWF0itBqorIuDU2oU&8^mKW
zd`6)!WNBhdURF4&C7ba$yv17IZA@sUz;y%aqwp^5ocSzCo%@JXpt`(^hUquf)en5S
z4T$qtN63~J?&tj?2aTH9CyVBg?1TMe{GeE=J(S`)isLR0ze9{9hL_sC`0GLeg5;~Z
z-p(2#9#>kCLxP&U!+lIbwtp}J8`T;8x4eXK`qKNGZWQlqie=$8?|HrS#<QU;Zb~r@
zWXCUh(<ox^^K@b*KJxUoajV1y(V?kUOfm@pUCGZ)N}89)VPqjuEHCdB(b#+?0vUqX
zchw6l;unZewd|Ezl-O9A)ZlSQTGcI58VW<m+^@yo9s5>9e<%HsqQlR>V8nD1;w0^w
z70*?PzzuIWu(B-`O6!zpM?)uwq!WmI*va=fMDKiS4qJ8gB}gSU3(1_4k|s9B<f{UC
zW{Go1HmiH~vlo7AagujhrrYNE|1Jvi2Di!;KKLMg?MTS0A9V>>QI8xDJkPRA;k=o$
znLaxuO3A7CjFY2Q5u6p`8;h6Cn6ztT6Pb!CH#<pqj?X3U0l0|&AgzYa947TYSbNK;
zw%T>y8ww?Du~Lc$D^OZoi(6@tQrrpJ;6Va`;1nrZ2-2cOTHJ!WTM6z?aCdj;bF$vC
z-?R4nK4<MQ*4`%{@*#63bKZ00w(Gk7zklEJNFwmG48(u!sXVkHkM^-u$=HqPh(o=i
zlAw>E7^Xa2t(wwVJbAJTiA6v}J?s=cx%t53|AFKHl$lN+O06p1qFx6P|I=iu_~+kt
za~Mo`vq|e6eMp;+v<cTQ4~HjbqN+c(+9tg7Uo9R;#O=M?Z05=Q#L%!(0(Js4Q)ClM
zGTFRJfs*a1bOR*D&51AGHU+$Q6F!Lv+r)(K?A%cGh_JiDyam-)iL34BQ8-T;9_ctW
zL<JO~mLfi%YB*)jiJ70qh1do>G}AZrRe9SfXmW3Nrwgn&s5HHrUMt2cCURO#@6Ya!
zDf?M3_s2EZ_NM36_KR3P0~zt4puT+DHM;SGq0z?cp4oGWbT`fh!S>WI8>U5TEgFw;
zaFJY6WO><*{jenBO`U@}#YQow?)~1)eGA@jnr;Q)d<P|a>XOGg_(o%o3*J57FpCqN
zBLi4!n4F8O>$i0&GU?KB%Vcnsz_FMHUem|a9zjd7_AbPcNoJ1ziV9<?*?|lfn*4dO
z;?)x24R&_H4miTNpJy8Ud^5^<rWy%zpOFT5*AOkHaEL0b=Vl^uunZ@K<{Z3gB5F=K
zVu$o*d(}325}xA8EXACtPEy2iRv8NjH&ipR#zfV*eeTyDs=NcHcBHHhG@&-M!upP|
zIhk1R)ehYz$?SjEGQ*-(({Hk!;bCKS9f~$xd@@)bWNp#Gu?mty;6s~ro@Gia;Dcdb
zrZTOCBf3X)-B8v(hT~h^*RBX7|7W!6%<BV(Xkjb1N^Vw2shlhk|MccV5N`(-PAU?2
z&GeQvPP@}f*}Apk$XBAh>a&1SGjBsI&lC=7A&r9NN6HD_CV>0^c(k$hr)maa!^Fx7
zYy88hRpU3AvOMibdA01KVOTD`i6s_U(j{hvprDZk;F8p&-|KP(&RC<Iq7_fD7Y~fk
zkGO2aBRft{ez7(8NA+QCx_2KAy)t+3;Jh%Linum6(||12rYtwK^_<dZ@R<a7k@Lr(
z81iPd@tqHdu)ue<OUuqUMqI$t^ruUtQFU5<)cgrxnl5MW>l1Ap!)>FGN}r1P^g112
zml35U5%#pCu2XN`o4TyX&RdCFk~){LEOKIrR`VLB^1R80j<tweI+N#q7l!6A14Tk#
zF?#Wb+DHh?wG_+3;kkB2=_mNXT1?$f{~qns$a0a~>ch{&zbtevOrcD{-_pc;j12Y%
z57VXc8txK+yqiO~LV<q@c1gPUqj}m;k|#w$%58O=aHp7v&4vV0Q-AcWp14&c`cLOG
zQa^=FN3*lyvX<Y>M~XD1i(IOA_aEN87W^qLEd0PLop<rii$ZOc7gPW`d)As-GySA~
z7}oIQK5GcUJ>dM+?m21#40Wtrl9d);yY`*%j^7W3<??NOK=p{2`%VLKz737t>e|&E
zfDQR@@HPZColvY7g|<4O`SW#+F(DGU07)x}<F(@aRmPwL+(Yqb-wzmga&rQKshu}1
z5(PYwPc$qyd?qY>Aho%a*T)N1F~A;TqWip&S8m2QsNmS~$Ctelq*2s0O7xB4f%}zn
zqvQ7Pj7EH9g63~Jah>{bXTUr`-Ise%$as@q4_Xnhg#$!Fwn?*0iafQwvJgBsiQw}@
zIX*Z3+19I7rd{KB8pmK@oOkwkOuC`de(#s>cPY;0bCL8#3m}3(tOi_mA2W;aaWh^x
zblqu(n}oJvXK`c-J}Ze}Tmp~|)xDkn3v1Myubj;Q?)lZE0iUWdaP@L^1v3aVG)Dn#
zW4kLgLl-M3+q9}gBuR#TtB;mb@&`t&yNx4m6;7Ap^o#4m`-XOM-8U$!#M_1XzU{Nc
zdl)fU^wn5NOjLX#m6V6KY8Tl*cpZA!ZCtE)a_n>n-3De*Cr}X1Xhuo0{940!mE@JN
zfG=S|Jhs!;8xdZUCCi;6p1)qN9y7tk!}~ow_mr3<)5vKQ86j!Hz@nPmSR7Xv456b+
zib0o-Qe}4~e%L6D_;#pHp#(BwGK&n9JR-NYHn;@9ovUvtr`P$!&9B+toeXghty@3;
zzM>moC`RmjPf!wY$quufrU|<I^*&|o-FvOSdp`UtKi9m$Y5b6{7?bf(?YM}P38geI
z-{0@!-eC5gTP+y7;b1(%#JTmF^3Jo1?AT+Fy0WI?&NF_m%y6CV8G0IXj>Qn32SnIQ
zDGqe!vBP&^zQh<REyb&<&$^;Ls$=Zu@d3rVxppp>Pd*f+8;xt{B(sXLz8xWbbg=nY
z@pL&Pptj~lT3_Nr?`}4W(L*B(PUdqvun_9)PRgUiOWI-)W@l>XBd*yeU#i17VcL^(
zV%v6ynTVgt(AcCL(L~^w3JVeuQLZNWE{$nnc+uN&h>#sgVRDx3T^^cMa1O;^E^v`;
z&x@?!qv#%jh*57-D?%MW2|`dRnQ{`_hJ-A+BzsP<^~+d;9h)6SZ~nJSR7*;@&LY!m
z0yq6Exd%0Yhq~uR9-|kt_0@*TuH}ftsZz9U{#TndAF9tqya?P_117H!N(SIFnMZHf
zIOG-1`2uz44<>8(FO}@OW|WmNaw=%f(fqQC1qu051Kb;MBm%@4l>YLy#M5WL5WMAZ
zq@y{mp-KJtHK3?&f@R<D%B-`-DRPx~c4KvxP^MfRLNjD+uVvs_P#-+yT3iwkU!Gx$
zr?K%tRTq}TiojlaObyyQV8yKzexQAhDpc3cKQlkC?zzXL#6I36?PS0{YH?afMQlnj
zKf@X_n<hPCEG2=w@?jKcoa`yM6TL#yeq_vvf5~UyueSLHz|Y;`MlNi&o&}!8ib>Ws
za*9ljtsduyJNuYh4LXplf`<P73roMyRqD&uA2lea_=T{f^fMYo^7`D}<{#h36$NzJ
zL|<hhy&wgz9|eOI87*YN46&O6l}q5+lOEj1UI0zbgq{*LWknN<yoxcDwh`GVHc7Zp
zNPGiB^l~U#5!ZjNS(>1Z9Qz(Nn<Pv7Zt}-I|Bgj4^%D=|0px%vuEgaNPHI+s*Clz~
z01U_ZXjq1~W}#&!&yK7rzR#z3*F;%XTVL?GR<0|9|4`&gW;%F3rY?~tY<6W>x|cBH
zD^|v?asWoFt859)BjZydV~!(?pmyI$r!lu<nVC-!X&!b!N8?wt4-J!${Cn#rgLY_h
zHh26}Dasz>5XDm;O3{)yR+9O^jgn7pPecLi-9Rtj?Cp1@%w|#_8pEbfdeldr0j}7)
z!-R*x8$~&FCY`6~qvA{tN*$iY{mVFK)JZn})zIf-ZG*#sBb_p_YHd?hIvL{keRMQY
zvt<%`pDQ=}mdfFDyz`%CEADyNgH3`Bpx)4_n=Q-nu>-i2#-zo3l+#AFPSphxXKB4i
zfxV|k{OAI*Jab62m!GhDhbfT7LF;}D+&nLaZ2xe%*Z{|!b@~xAv6~4_)6;v7kv|#I
zsDFF6L}7~jjT@jxy*wzV6QS9a!VTPqk#HwP(m7z;O>YVum928l@_*~T;)L0J?W%1>
z`|ktH??gb%?dCtfG5P9GUpxI#%HEvUs83oh-;>rgScVbF{s=t4La2_#MUJ4e#@u8T
zU%|{^rD$OAi95Zql!)Qk;O(kLbGU|3>wN=p(hz-_%FdiLGCQUpdk9$7;YYjCSO}_~
zjh~L}T9#1NV-0GiLK{Vo`m8z77qQo_5leXzgO8w?QhuwPbH$AGaoZFses}BzcM->{
zqF(l|bQ=xu4XOB8;kGs3PZ<{08>DlA)SKQZX6rxU65-oIgmB`@VW-=-zX%n-n@3p9
zir@Dv{i&LcZ5J}FBuVE#FyyYa&e{uWSc4m)L!OG9FtHfDUD^!sLQi2-sJP%evM<l<
z(!>b}ghVb+$krUNBd}X*1v4ERh!{ciJjl&Bwb8Nom|DErG>I!CODqR5X<?^7+muF%
zZA2a-9bJ+EbxvF`Kc@?0&>^sfz2Jwl!DiiFmuw)4?lho4aFFl83ZCI(RHvDm8F#XH
zrB&Af5#AfF4q}LGEu3lT{x!4n8hNR}(gC4q_x?QeE;Ne>V&r$)Gn9^BF-wh#cIxPp
za~Eb08@%7gArcFz@L!L^m*+BES$%0}Fpmb;^cbx=J$pt(bVs{+|K4u<U5Wz^=5csj
zvnN_GhtxIqxHHY5;OuWHM#P-H&NvbSza1HN%6>6nWfsDbQq)@c3u{2w=V*=i{KLje
z(q-D>Ju&|SHubtBohVL%Jz@aW&^+6Zg^iS_kDvKYI1*Ty%YWOe_!fxpD(-jKh-?-1
z^5|Y&e-$)g484q9@ySFxooMs>bI24q-l!<mqAJ!Jr2M?F4E_PeGGc(D<yPFKcCvD4
zJ5r|P<NZ^djgHu}h$Np&1Eo3~nfmH?YZJPZ6sc%KZVHRI`|W_lX0=0r0q3N3Q3I`R
zaM~w)|7ni{FEX(9a~PU>1yoh%%NsKX^sRE$+k6t-H25$p@XX_LII1`<jm(1oF>l4J
zDN}8i2!=%9X;t&I_!T<mU4udE=zeMljxarjfs^i8yMXQB)Y?PE{M1)>L+5+e;K!s{
zFX3Qd6#O$rC*$gB7c4QoCv?jcbsn;Fw=1qxbhJ`kXooZvflK#b9iJ7}!*4}CSIbxQ
ztOm&MsgvjB6nW%*lcegmr`n`k$`5IQK*gN8yaJ>aa#+7Z)T>k}#aDw7)3k90p+B_o
zSKWyq7)xp2AbM5ykBPHblBSm$ytU-3xWpVm4P^HlN>d>{f68r8TfRsPB95mlTDuVy
z6J?rG`R5ZkO)(b%(vF5`5331dNv|Lm=!%zLzT+-)bnrCU1}aP(6>~j%INs>00Yn3y
zsdg5pD!&+^u-Q7Ca~K~G^ZyBvr_>u*Bc}g`(7Fdk+EcQga`<BKgLWy;8XKi(wy(l>
zNU5CxJtw-<k-tj)+{Fu1DUH~TDlabCJV#l_)DKVBP6`*LJdnnY+D4y#@V@FAV{O2%
zO5AuHHP&1G%PS{b!<XqvQ#v#!f!3dWyl?0D_4c{TFBnsPbmQuluD~HAiA(HR1}oL~
z^*Ly^eI$6P)eSuF_y;J=$;|i-_%P<|#IpL&WaH8^aw%u9zA&LUxUU{*T0(yNjrjzh
zr8YiqBTDX(83S;M%~^)ZdfoJRHxVC;wQr#WdD9$UVA-_^mLj9E8ZVd9iogUAkv=^p
z#M?^<OThuS43N9_$xHa=ix;n?|F)a{mt^1nBtiAg>(QECz$i1BnipB#N9*)GY#z~<
z&=!YXotje&aFp-k9&nmEiP3yZMYirAJaGuiE^CaI+l=KuP&J~z(C{s}EGYXh^P{eg
zQkdcTHA$6$Lu`eHhH*A}C)xA$7Ko}Xa-{bv?JmL@hW}YakA*dJJz$Zgc63r_>^H_L
z`{RYcTO)p(mJv%?Dla}PNVQ0VU;FH%UmSp&gtFv0q+(jxP_5xMS5S^jHO1KY%@~s@
zih!SrZn@{Byt8npPtC}s3dsIa3G%YQr=U8#z)yYU<)crjb7?rUt(PP-*#}P6d)3Yi
z6KB4Nn@{0sJ6$~><{D8pHn#9E78?(HUR-h7Mv+_n#{0>xi}u=yCZh5kujiG|DEi+e
z7=*6oI~}F6z+T#ADA&T<RvTy(m~c{%(V>E>%A)#Sl}3U_Q`&~}Abp>o8P%e~1&zA$
zWMWn{Uy$J(6x1OX4sydvVXPF?jz8Z>2<<G;y4w9I+Vuz(iI$^&HP4=bD^DZC+<!kP
z!ivxtd`G>pJA!Y~Rzso;uQ!-?wy+b7Rqvs68PWb=5t9TXLW>N}ZY&R=J=T@xZ@`eo
z*&?0o^}KV?N3I+&HR$5X2;2X-Cq4~`q5}n{b#gR4g|NHH?8o<URBshuK0sl7+M7l+
z!5ty+Nr`}`J#LO-5s^-CYFK=LNVN+<b@l~<&9l%itWsc{3!G&}Y)6JDjGUg^i(!r>
z5F#Xm4-ZqL?K)+OxqZm1b++Ya^Rr@3-V^p~diH<e??iHYUB>(E0i*)ZPXSG!v(ub}
zaM1xH=)`$sooXIKZf0!yq&Rf?MdThs<9mFc5|X<&Z~PZy6+seDA(<nd9zQe4MB{ID
zHSK-)_v4-o&|gqU&rnbC@lt|QHa=WP3_-poOSAfaH9+_qq{?fPaqb*CCO5|xgs*F=
zG8?nN*jT*Fsf6TYjhYql4O>TtPXLr%L+_|>LNX@39P%g%Yzy+j@-6JXx0PZ@gPqfX
z5oz?H)Uwn{I30>qC|0qDB$xozzlUu$mya33-$}k!#{K$PN%X*Mr*2dOVCpror-EXw
zj|{usd(aqm?Ld)9EWtv01Q4Nr=s|j=UM6g2)QNG$^opApm16~0OZ0B=$@G>*PUAdT
z5jqa=%752>9mRmqc3*5A+R(9cE~ZbH+zOgABu?&fwYiuZa*eK9#ReNxEzGI<QgE~o
zR4&~qm{RvFUNc8Yv_amYq1ANtc|3Yq-`9epE0Y=wAqyatj-b;fUG<ODKbn7JZ##~^
zyYS=_$+F`_Z(@;Uay>s$^gD7_FPnpKSq$WPB?V2?D~?BT+ifoPm`MHDS4iB?+A-eX
zE?=o=Ov!zb=tyMK24HuvfkYQq%fVs+?8<K!A7Rg1-jJX4+8--3fB_7#O@o1X5#wJy
zZyLEOaF-jWMrs8bygzI<P|Z+@faE4fO;jdpq0*~v6Mxu2XD7B^af0m`k8zO^c(ftA
zAX(*BtDj~zj+6j5pgFe^OVi{NxgtLw{W0ns>b(2JY{ueMEa8K7hh*D4E`bOKXH*T=
z17VyxgCF|S>H6|*P!F7k&39yrIi52oU9(SWD0h;n+tSuZd+xsu^c>2~?j8&#NXU+k
z5$`__8X50$lV><p6V)}rsD%v<Vyp4LDiUxDL;eJ=!Pd_>hu9hGHRF2%6d8oCVL`c`
zKgO1q6tyPpy*&D${D|orDPg^hF+wMWH2sUvCYp$6SHHUC#Jf%oId1=mbJRbcW5)?Y
z<I9L#B6byA$XB&F1?MKsj~5B{qP(KG_7`^~CfBk&oM0+@2O@*Qxa%&J2QLh_NlAIR
z;+~0AF>%e}?L|ov$@ylpS@szoLSeP5Lu^l))d_-%;r**yd-7MWMfGu}`_~&%Yod5S
ze?Ck%_P;!8@e1QIgLZ`B>{7|Ws(yDS1UE3%d?F)nxPOWZthMSp&{lX;7DEtRD~KVG
zEW6F6=MquM5MKB>K^|jkIdNXdSH2OdVQpzr`#L+<)&mAG0T_R46VvcunG(8-M;vMO
z5Docmdda5SG&Sw!i>*6626V0krq}(2#iAj9Up7F5`&bNUwZ^V-KP}QlLxZAZ66b>P
z<8M#$2X_KtC*FUu`&rwLK;LR0P-?~7Z-3T@#j!RB0^^AQ!sv!BZ+>#6GC%K%OXGFh
zlk99CDu7K-D_oK2FDz}X+zSJ2to^w`sR_18D&k;g*y2!H?*?n??=0f)ytSt%y6@zw
z*AZQh#P_ZC4NC)i)=n>tFS*kCplJW-w#C<te$Fz>DL9A&?GSnX6hEiHvOBAl{QeV6
zF5Pcf;q(N*XbrC?&_4j1!D~uCcN#@*Re_?tjbc$;3gM1v2nNa#@qUYn{oYBKNE;|K
zcSa^N`fM{=1va<!q)30hheND&^;nn7QWu0a2@RaZhUrI-ibZ4ph4r9xzyS58V3FS^
z=jv`1ZQ%Xqr;gK07?oQL;UES_19p1}K&jT6KR`d_?|O98@V#$9yM%o9xP+u@GNf+$
zLXl``4S;imy2|s|p@$<$<oHRU+lFKQi@0W*B}mRNWC(M2*Z#xiL&;v-G3hxAI^dF}
z7<$uw?KJ&Z|6;d9-$X-pXIK!4!`VtNEi6@Kp#5<R&1BtIQ6qvAaeRDgIE6M~I-0&y
z+$XSV_SigU|G?$}VvIX@*ttrzKVvMcfzHY|m`>_pWfEa!`h#KG2|J2iQFiSe`DR0?
z2(2lJn6M7m8kjj@bn@wUQIiee)Q=(t!ZuMKo2c%&w&E77Gl}!7v5g*|UZ__6g|)Zt
zjVvzWUS%-zscKe3xm9Vaj|)h?UU6|WTYI`3AQ^P*mS1nHOjFEVt(a_Z!&b+52?auZ
z%YwF*y;gu_CNupRAox)xA)v2XJ4jnEwewH56(bg`J!f?@pib^llw9`?k}m&;#P$Vp
z&M4(JeBXVXxIvo9Lyap@0B$JK(GM-W^t^Q2jk6yg$gH*svR3*8@e`+a-Y00r2TrEl
zU+bi?%L_BQxXQ|0#_H;44bI#a(vf8cm8T?N)dl@2ZpUe^lBuXd;ey$UoE)jT-fq(_
zkkrd&u5l$kQ`9zAGRI}N!RrZ@Pj0XTUYNRF7Hd+cifMd;h?=xtr;O~a8;_#&uJu0I
z48r1G%i4M^g9Bk{I=Z?0?@Mf8+PMh*i(Z$a3ZJi0D7tC<gMus9kBfx<g$HcwO?7(j
z-f6x2|GVG)OEcd8u(oGkhX_1#AN0b4!i8BWwe$n5jTAv{4U;muTC-s|bk_`F`_OD?
z+yF@<UI5Cz3!7_j)HmfM@IM?HwC<>aeJ2+_Phz^ZaXcwLZ39ip$_gO%d#SP+i_vc0
zg@k}3SvADvqPKq26SLAW$Op&b;W@T3A~9NB!Zr~{VO*dkU5RS0-7JE{IeWan3}nq_
z+MpOZ0Ld-L_Y1*Gt#kC7T(3p1sNhM1<khytULpf19pTCBm1-@Wk#W&))KFk5hb1Uf
zVHu=-hKV5Q)<;f=dQOSutvuDFdd(zB0Ir}y5z<M+)dZ&0ZWi<Rt5dBAX^@kiH^R1S
zRY^bN<$HTQ<KJFWA17MiiaS`tjA%k3$sSD1wXVUJkb1#Wbx>B-kFm4kpkgoECbLpe
zSsnmGX?!}kxueAmjSSug<jf0pfiVJY&{uj|@BsVcJP5*=9##1mE7~h<w?RNB9kIh@
zUk;jcA~*`t%drZlsj(CSOR>(}2=4`cR6AeP`$3=^UT73CS{~5nnkJmi;}N{f`?cLn
zgl1ZA(?J~QU+KIqVz;A{UD7za4~MHw4XL}=%IZGUH21C?hw2WI7SJ*&KxnFYCItcv
zPq4a)IA@tY%mne~-jd1hY`ik%btjx#?o`UK<em8vJF=$wWY8hqCj9GnH!7F=>JL}*
zb#YwTW-+;)E=fdPzMzG}?9R(q0@Z1|%{h5Li({$TsPc*~3P4rhUFMi`(rVk@S|gfA
zt+;OzpRN!$0M{(5ee)N%3=qAj4r_~?L(k$$SscsH#htG~nso>CEOV(Ud{{I%vl2yX
zR;AlCwBnj5vW#Hi&9KrBlVg>SnII_}WoYN&%|`!2SkpR~d@y1LS-*c%ILTJP?(@k2
zqv(weMsY-Nz-p>_*;^rL)O444Ax{A~*r5<aGg?5W<mi1ld(#(fEwzU6jPEKv85!|;
zl?r#fhmw!2f?K80k9~dONMUEe<2p}jw+fJxKO&V~9~Ku!UZ6f)bnVQBbha_U67Yfp
z-mH2s5Z0~227XnZUAh^iTl~6ZGc?)V_s@W?4E*@w=Rh>;6b%as-&zQ?@u9!?m?+s-
zzpP9M{L_L<V?>|=n;z|61sl4F*EY4*rkEe`P<naJ7eWeXWR$F{HFY)TxDuY^vwO=`
z{mB*JAOusdY&eoS1D)H6dr<<5le9*-Q%T$TTkK1DO&V&$nu&cmS;0y!uBvWdrU2v7
zs@+j@ZLm5BPYnxQOxfJ8a5m6;GI4bo7IrE!F$0?C2%?xkoVB{vXX4#GI_I+hWy3}j
zP$|gP+l1I7J`ORz9KbXvj}DN&#PJJQRW!lN9wTokG!HN_%r*agHh0IT&@<PBg!8X0
z5jQ@_j-wV8<~+j~bal`Q3UH912$V6mi-&~;#iILA{@;U!^gc>W;V#^2Sn1oV=?FG7
z9y4s#eR}|l^TKbis=o>S`p(t!+E8-$rWxG+2jHNM=3b)f+qPx*IlcZ|-{SJeYG67&
zg*~*V_eLPx_xi479wUcv+`C>tt=FAi7VN?C6gR7Nhrg?066@TTe_?eTd>*(@m!jTt
zibL2=#e&Ybv%2#g3hM=Dw^e?W&(C?sO#Uj@v$WZdi7Vd!es&g#OAvI?L*YN=(&97K
zG*?n`<#kW5e~DSqF8qaMB*~$w*1A`U{fAAoI8Th`Gv6)rYj;%H3s&E;+t0hBn9%ZH
zSgU{j!n(SGT5(9U@Kx83ckfzA=f;fm(!|Hi`wYL|c4;E32VLsiM)jH8bc~-*>_GB!
za&ItSTTl3PUtD|EysT?@DVb4Rt;_G!Lud_=-z5TFzWZoEi~HrY%lDEBQ=)zmz-??_
zJJyR}b>z?*-e54qPX?qXRLq?t9ShHblppHVfhwLKwe%tS_nH>Ie$fC=cr@SB@r_WQ
zSGlyO<^Lfx<nZuPIB;iYA4l4E4e*1pV%wJtJ&ZHn4^F@ERzkv*jh}2qNYc3C;dSgf
zt`SW`oczz@>KIa*b)yw<t(d_*p6{Oza(2p%P<bSc^;4A7vKuwbLdq2=mrPerpJnY=
zY*6+vw)qi|Y&-^fc$CP!NM6}be^qUKD4(7r_A!uXc8@1G&37xHuxbq|H_8K5Q6&Ox
zlig|`TFZ+R^#I8aq}1SEnJM@tG^yR(I8@z37?;H`!Nmgb%O+~V^2c=e3M_L*hpY@i
z%5@Mu*$@thvwU6O@S}X;%bl9)dpe&4Zm2a&NDJ<1*n^_24!Gaaute+aQ0!u8iNQso
z-H$Wt#QAEWrv}b^)KX-Ir6Cjz@wXnWcWO1Z?Av<H$@;~38gJ6$vAY2Ax*sc7Bdkn&
zt~jT|n+k7DMl#v3S=V_8J0d<8<tG`)teqJ0H>6lNx@e_%ovT*eQxlE>s^&t3Kc~k-
z3wh^Kj3Utq@FBCHrkHo&d(Hh8x#0Y`%#Jo<#%m7Tm=kglc(iCd4<2ps(rw*dlW;ie
z^C22}OapW)=lbZbvl2Ra0bR}_d*032BI;W2xS7@o7j?@iGD%>!Ejx{yi<$k%Z12%}
zMW>W#v8Xx?5{a@3%8O<?tNJqyb}!-yy2Ue(JuH?EcZOIQdV_ot+-MP$W60f66IS@h
zSL1>~qZ<Lu`)VSmm~KFHv&RkmY$bjKDLGV5o3Z`~h8}5)Nue*H(Vc#7kTDx6e3;rI
zSiv*-ktqV4@>+DCQ&ZmFe2~@VwEdnw!}ua8tmJ88<vW$->%5XGRaLnjv;z1$%tD-d
z>@8RGRQi+79g}3G2zz@Pd^w=^1dTmTcAAj*dXR6Tx`tzIqFY})p8;!)fv-);nbYVv
z9;&syrbcIZKjJjD<>RY-#pKBs9?n$_NPd#sjreU!(g%Ei$JiIE64&@=m0|pKvu8bX
z)ZPT6XE6hIq0x`pd$#lS$$2Qyo!T09SAqEQ6Nl{kCokCf%SfL88w}F_EUPpuq>|dz
zxHl<NH>-*jkDlsW!6+$jCk6z%EQM>a4EA&JDNAQ)l-wH()8F-q*wQgZBIo))4g%rF
z2_i#oEf4F~OwC>BUzps<-aa6zn)0LpXWCoXOE6^%o2Kbhd>;8W1TAjEeLy60im&Oa
zDYrwYJI*P-%g#|0E+*0bdWZWW1a0%9*;W}zU{|)h2?^~BWh|yVrL3~^On=80B|m4;
zqQjSVX_k{+7@qvL!`?dALNk>KREA{v=0MdwpJKZHY;jcUJ%MVhqCU{h#w%?Ti+Tk8
z?Et@)vGu7l@h6IJOCxT#5@9)y1fRzpZ4)ZVlD;JE9W$_k`~nC1+n|S6(6?N(JgWFy
z4HbDhy~$q4f`YA^sl|d<O&Ue%>WHs<b|sNRmROL7N-u7$po$JqXyCAI3K`FY+zeyf
zH@W5bW+A`>iKU>78~OrvN9yg$oNeEdEO<gzNrA;Gd_<plh}gvg%XD9OCh<rDK|%YV
z)EGG%9$tS*IQgU?^0gxAYMxz0u3b?<-Z4!L4fWB~JEyh|w7eU`!f0<dr3up<4K@x8
z0bs>B&tyf&Ihsd!@qy}!am|4wXPZGAY$3a1_pXL2xh;ya`t*^SGR8gY=N_wd8i`$(
z@<7uoOGiuc{aJK^R0v0ct_=vO`?g8>d(EqYl?f!$TkEad(9X)8g;$6EKFLz-AO2Qc
zhDGbfi9$yog=$&%!qRcWuFRmznsF4&%%b3l@N%BOGu{*Ir|@OPZn(;}xC(YB=v*$p
zsD5z^gNW1A(O(YlV9_kLPoFdk2OHX&&{3^K#A_aK;06a)U_HPYA5$e0cl0jjd&!$U
z2t#9GxiQ}+`0n-^RD87kdX6aetX_od6u21OEPi~)@6R+KEwC4Zpj!BJjnSUmBbgnR
zRd@2v?*mRbGXe@OCFATTQ-(lHxv}u}8;ZJtXPr|@%Qqc*#KC-{OTuQt#PTo3n^<xt
zT&FIzcRt)!{LHNwaVJsfz}4uzX8VHh;{C>88pyDU8({Fbbxz?w^6~!`o8oW#kG}(H
z{_mXfFR?Z(+0PV=>GV{+!Er`p6d=!}zp$#^Hl7smgz8s5b9PodWy@f|)X=)UlOZ!3
zg)4LP%vn~d&4R=Nv!842eNmAA1ouxd|KrLQ>K7U++C%d)a-@5*Stwviu!A8G{WP<P
z+IT42CSBR0O5MO_4SxCiJ<cacsvn=MbWbbJ))VEY{~7W4ZzW{^BOK2wnFXP$^oge!
z;Y$OhYAuinXsgc9R9B5ku`<zh00B3@GY8x<CO_?xbrpOy|L!!qRI4c-nBX3ux$pDQ
zag)tAXG%$5|Do1Vwf;}=4Ap1GUvq9wa|ds$GRDZ~Tm(rp#~!VwG2+Yup?dh;)|-Cf
z@)wtP4+xZ$T<IWjf=}bw3WHoBvYELS1qN7Xey?tq1MGbuLFILnXHrNWd?);sZ4#jj
z!XVt%aveFiJ&h{8+{5Ye4V?d=WAoL=Rgi!<Z11_DrX-aKFvd%ahi;UZQ&{{2N&9mz
z*w*GDQ}XM1{ME<`aXH$joetAPkFl_0#c)aBgSnbU)_I%ZQ-(9_zjD)J0g0ErGd1>m
zcS6_*R@NH33!PzCIZ*>y&cVoGu_;!+vT`|KSNYFQiP*c^3s!5Ume$wDzxD<)a<VNL
z5p33G0i?hZNT&I_#EV*Bz+>@E@xsqL8|{=E;fmDs>7-<QI9%p@she(9`>_YG9?A0u
zL_Z45B7;BdC^8&d76k~u02^DlXqSzmLL4s?T_P!&fZw74LSyHm@l-oDLFLsS>J<uJ
z76j!;RaVmzw8S1gexXAWu_^gMMfoB4ySU_6C@cqxCx45l4`T20xKNCV{7l(KMX7Bz
z0(bY;c&(Jq!7sxc6*K4^`Mt8Iu5;~MS!0?z*6ZhcH(l}P?s+vG1ToFz2@Y|4kWd;A
zl7q#{14=j=Natng^KRG%Vqe`jso8!p5Q29QHwX~|J3$m%S*?3;F5);af7!nm(fp4;
z`&U&sq2XUc|IthS&zJn~3>%b=x;G`CwsKXA>s!=%H$YpIywBZ_Sz}NHk$#u3Fw`ci
zpH6@k=$?h^f_xX>M1GHVyQX3iT&`n8dtt1{8@=2OHUtfh&M$xzms+;*T&2!FXLHu=
z-#&0{0?ZJT-qT~eK0e3uHnjZqY?7Xwf3jQkwRm2zdgs<lxh#&aIo_77j;8rZaEj;)
zceEGDAujM?8EZkncb)+OXh<z@GgF`&=`_J5JIXh~ag=Lpp7Bp`eXo5-{^YXy#iNep
zCy^zKE$yqFUFgjeu%r^p*(uYWi9)c)pVYa}kZ8|O#ix!x?GEybb8_v4i4yzx4VVCB
za8=s73HJD`O8x!^&D-zaV%$h&cLfQeI`0f)((~QJqcV~|BTdfyUE`y)J6KSvb6fUt
z+*Oa$f!h4kqVTTmH%|>I3BC|}1q4mpP=C#B0`CY8Ate}^&nc9R*}}?g#olohBj%;&
z+lBF|FB0LE{tb*XHeImq(>FxM!vpKB{8aO4yoWmENO_xPj3&V0yDs3Z6GK*>d3L(W
zsMC2#x@W+udGlFRh7s?G=+3FvaD9tbp9~0Ocqyw(DBuv~ic^bATzy3R*^0`6+;LlX
z#QycxNKR#qW<A(GN`41JYK>3Y`{nh;^=woOvYeEadfmEqBDc30KtnfD*f_UECAL$T
zpP!_HljBk$n8D*kVSYsX+jJpXLMI{Po_gGKB{rD7u{!Tl-1qVidKiIQ_a8L?P)edP
zAz{mtHAi%LduqbE$`zO(CfGb@UqD_Vwi;}cibIW3pp=2PwcrT%#jl<1<|4k008C`?
zWnYBHCPi4ESQmW33Us#SRJgbJ<+A=qfkv5Sa!%QBi+aDEpF`QhTGG^^OZ$HI-mbK>
z$H9$S$wgJn;HGZwsng|y6+RvAVNC8kAQh8$K00r?vYrY)lbD^DSjci^)jcQ9rbZPC
zax`nr>?5ny->W-TjlSJ`LoPVR|7<B>HOdLV<!t9e8ICEPV-DMo74q9?3Sq=3)begP
zRW0judt?>izY361V%xv+!D|j;>p$1H0b4g8ngGLtm3me7a%J1x9|zjwZs4FG5ubKy
z56ljgJeEA9L4*UMKqRi9C>~ehd2Tm$Bb8On2_B=1v^7pw&MmZgnLAnINEGZr1dkj}
zqGfJ>D}$E4>kOo!SJ`p+u4QSWR~SJ2IE^EX8R^jFbKJA!t<CFQok%NOt8v8{szoJk
zxla-keYZ)Yz_3|<46oZJ3_(hr`5W4cX1p%sP_v=-?EUHjYkswZp5f{0)|25Rg2MUd
zkvcqQ{7R5?RUgIdVlA<=pda$Xb=5i_F4}~{O5YPWV|KMXw9~AZfMNdhC0X_Edyg!8
z?dI|)JG#$k1O<>WA+$#uv1Fqs+%jj8HCevN_X;Bh2CN2WsVXTs4PQSx3%8NU#J-{6
z%}OyBSxl$(Gp?6@_nzTjjYj`+nEDq7{#7dcQD|Q6e{l^_8~Vi8e_>IpE{J@5<@3)f
zcGv%686*?vT9QSsQtz^|n|U|@vtc)&rF|#u{(VefJ+?y9^x7jp{!^tg{o5vHq^DD|
zN<z`3rWt}!nRXPU6xkE)Ux{@fx92kg_hp~h%9QO-_zO#Bm;IjBo>pk=vi_^l<cKrk
zTJdwN#E|RnI-;a~T&Qd)79Ex&t0T`%&4@|Cy?))+Euv}1zPMOf$Tg=Vw`Pu0j@ky-
z;o+gje1gK#F!nWPU#W<3#k=8gQPy8^2CAdnc}+^O`-Jb`6l7=QA{M5VOjJyRg?nJ9
zAy$^|IQ8u&!*oT~5>|x{v~P9<>tlcCvztI;XYyY$7Ygu8v1|YUa10&*j70#n@Kk^5
zVZRV4z`50gmk^>g-ce-j=rCSt8?0GLZfLk<xcpRHP8!F-%g^@-(kfG4L$oAMU}Wb{
zQ<X_&Q*c=Vp1xiD*vHxJ=||vACy6={EHJKr#JZ;ssjTK!bJ+N{i2|+9xD8i~mZq)k
z2T|)S8WPA7PpLrc-qI%BQnm!6sJ@iJjYz(LvS7QI;iYwEWR-K5xt*7#c@ifs=?U-R
zfZaQpb)>}bkU|qLxLSWpbjmz@(IF>1HjO_g)5%V~QZSQw?FhhPR54PKm-=RM7I8b8
z>I$h)+tClQA06<jsn1BQ`r=dW4zDFoc&4&2AHpC&to*{-!?R(yx=`aRP-}Z%v3S>E
zwnJ_HMU(1h7s_zzL<HClYW08zKNy>yUEK8H!-<yn4i&DuvcGd&6SO$g)kY;nK7~(M
zd4DR9JEB)py7e=ZHNbI}L1BAdlges<L>aYZw%MI_z804@Czq(AEXbE16GMJ5xP`R{
zx1sE~IB1FTD?F8L9rEjUpI0V$F~5nQd&ev(#5<C@e%%J>*pCvdA;HV5aM8$_+UCp?
z&DhP-&_M6;>d!flJiS8qQ11WZG)vwn!Kx9=T36xka<mu!SYH48Z~uyY^n&gG080Ab
zKmTu`UP%5wi}SzxG5_bK`~T?Z`yJIE%Xih^u0qE%{@Jdd%OqqJ|HU=_Tf2owi*Y5L
zFEIhTEAR31AnbRhc*C=nf+s>Py_`-^x(zY(Pdgu%u^RU+i#*bqrMzmsb&eX^m^a^>
z!T1c{W><72%CSb$z-}Fap1((f&kg3yb8i_h1TS{K+M@r$!tW%N-dYQGf7HFAknIIq
zgF>NYHa>K=AYIQwjKj^v^`ZLwE9y_NjLM`&YNslj@=V4)^}Vsc(NQ6x0GdD?aS5$4
z<Jw7|?>XnBZ+HH}DmUhr(Bmx+4dou{U2ux}OnarxvXd4SF#pgyIeD^IB%O&VY2qUx
zR}>w?VHY}b=30cRy=`vTvzjkHgZ;OF&=Y4?n{yBIu(7X!?6RrNx)QDN_9Ac<#qPZl
zM_R7&1jyGCyh|Izsl-G3a;FQyuB1|xPYhMfFIO(EWLZ$NgFIN21O*KRvv1~{k{7iL
zIC*s1FHkIEJJWQiy2zL!CaG6t15ny-5g;2X-$0EI^8~hOOUqYjEV7^lW~97>vr___
zWp3rfpWF{h?a8+O!lDaH<5hJN6ewM=K5%+t4SU(^r3Js}+H_b)bsP(sx^;<93aM_D
z-Y9H-G11pnHF?K*e*AGZSZ*uGNLiZG93~*VlE24z8*Bg+ZzHU7-BC#|x4p2bzuC|*
zq_t1pGvW{YWFf8sG2RqT<86?V##9$BPu;)^Rp+@~roulI8eyu<k$C}X$5>#Y2Dk{W
z5K-F+!*!8K-u;UN;~nC1-g&CGQ~I{{T#>_6MCQqllNiK82wkwq)4v1d-X1ECCOLff
zJg*OLrcSEz;mOFiZ^j{jw!ZFX5Q3#Bg~Gy|B<(3LJn(nvHJf~nn)h=L3@pQQzH5(7
z8O{?2Y$TNZLU6<^0KfG1^IoyCQgK2_g$R9e_O*j!%WoZX3dmkWw6Vy_-oa?hN$dyR
z?7U16w}!+P!DvsnqAK!~*b(^n#UdWt8(Bd9obd?9UhHcs@wU-#sG!IQ2A?vN6sx@$
zt2`GEgt|%5rBOp`0;9F8ZGPg(H$B(9NJeRjK23R4V}3cv^VH(|z4|Db3mI9dEy!^E
z`vxyZe}Ngq`|UfQD6vq++QYzz!f?r7HeVx+>f_@vw!r!Mb-be^9fV4BH^Bn&b^Tat
zelob%Bmq^(ke`=7$T*AM=e<te6(9dLw*?|N$cQ{Dx1JAH<j1I4dybgEfqHtQ*qi(k
zZ?-CvNwo%i({^cHwY9VtO1rlkU%FRm4;Fe@Rl-Xt?6KBT%u~Ko*?%*cEfEm9nNqNR
z%@H^8To5)XQUo?45^51?b(9z+6Y<Q<GOOXMSC+T8VA^mMGZ!SJia{=HfJM4(h?u&8
zY2^4WTag>v=94;r#k|b&9sHCjoqACb8cp0{FJ`b?m^4gw)d7ml5dBEJxXeZF{GmD$
z(>DpoG$#}#3_tof%v2Dl%NcPOT@Au;tpe_|#AxJ()vP8`RYu>O^5l<C=802gBx~Gs
zVFR7xLsM4MaQddHRed_BdaE;cQiHb(IO3ID73w7Sl|h<h+U&_!`a2~-v1OYgME!fK
zbn?Q>W)}zk^&xV~pIlc&=-Kxi1nCM9oEwR&G|h(-gCZAh*Q-hMoTGID3ypO<q}uXY
zvzS*Y{l{bR2N|Mo5~q(}qAepRp0%rh0?@Q=r7`~(r<4~AubLE3y`|zuKa)^@|7XNV
z0QllX#>)SmL;gNl{afse|6)Y{A59{Eo2{N3XI(eb_t{8=Mt=BD4I?5UQFr>=$^X2o
zf2UmS{|))+yZ-t8a7bQbqTY6k&E^1p1&$4F_5_#P?zpc5+P&N?z93)`DPZ=8jXSim
zV@NCC<T02_JT?14dL_QHwU69YLH|>QW%dQb(M1Y(lp9V1-2IGydWNQIpNI;8YZcRN
zM5{{L!xe^L4gppIW2W!*)WlIgZ$|Q{Tt{?vegui@+;mCzyj~?t{&k|PFK%LQHyQ?i
z+GX!8b`gDYTuESOFFXFBS0zV#)?xyV6naQdNisHD_}W{)I5K5<&}M=5q`Yg7t}k(A
zzr(-s_d}l8*Am9u&lui0O!M_$ww)MdWe4l8CLMKMXAbrNhYit~&tx{(FqOodp!c>u
zE@YE8H%a?~38K4@*YaVxsj8Z|zQ8Qu6uVfpLsEdt`+-(mf^x1B<8xiLt-TxHV+Yp^
zBW-nvtKHM;pQ6b$T4W9oL)w5<_Jw)$65R~G`x`_mB55GtO}*n;7S97ro)WTno+ThK
zK42Q2_9~FbfU@<?F@pDK84$nS#3X2P=2;^6J<j#8s0PJpA+FUGA5I-8%#8r^SmI|u
zsAv6YrZ)qQ_WY^^d~_S<>e*$Gka=Y>>)k#FzOi71o>xD#u4s99>jwJttL4d`Et*ZQ
z;yb*V|1g~$s`-{F@f#B^n3%PWX=qpbp}<>Wtaoih^UZW4HFSIMc49%B=AvDsLbuIf
zWvQm*n0wXSZjOIcsH&#Afl*bh8+Iik#|glYblr{5w1r$abSax}1jQM~F)7WlgzIOy
zWPcOZ-jD{W7%G9%eMjON?;h3Nf<&Mm7xK(t!1j`_If8QenxrZPd(TgpHh`GP=Aaqk
zNz3?iHM}`(SM8qHx>hoy+5ld^tF5-u^UKM_f4!fR;8xS{=+dHfO<<^IlwIw|Musbk
zE13m>R*k+{ct+YwYJNrC=MUuH1B(;D2A2s}+1cw~s)~TzN<LB9{qhsP`k51lf+YgH
zVh(N+IDX|I^jR##m19-ok6Q7YzikA*(=s_s{-(AKu}{dW)OD*q*2YbM*pn(5ES4Q4
zw8tPl!sQ>x;6kw-<d(lVX-=`vr)SJk<ZGWfsXF9k+12cbDujJ=i56>j!C_t-e>6=q
zMCx{-a~Oa~ONub(ktd~8gy^;6z!oX@G7e|oOys{Wi#zJSvY$|&lu;%87~N@Z)<+Nl
z4m2l(5)ry{;^IX31uAQugLL#uD#zVunvgXGwzu!Al?7&<Rt?{Ogi?ox4(>0>S)>GD
zTR$I~Pg63lSDf?;uALCo8Pe8&FQ_e-R9HKo|I_-J<^)O`m$4XYJ#q0Br}&yT`L-(u
zSDxKLFu$1GWUqk`_5q-NmyAsOS+m~Ha1lC1*mNs?7)FVDOWYsWOPx@Bc{^XDE3fJu
z%*N<gh|KxcfuOP;kmyRo`v%mg*D0-*4{^^faWd=B<C{pvz<PD9bVY{+t5Rko`!z6C
zICH8Le&|uEJK}_8_aA;V6_L4=^Sz6lHKSE05|zUt-OiVfx(wY95BH?_mgZ~-U+0|b
z`52}odh=F@4B3I}iA7pQMbGi#d@L-C%Hvnn?JCCSW|qm{R83Gk&R>szDf0U_B3yWZ
zCf0!NF>8IaXrNlp@L+)|*RSOIV;Qe{jWI2Hv$IGGl^0Rd41P3Kt>(1Fl&kokm1LF0
zrmt;QV)iJ(X{}1~9rH78=kB4=?slCa+%)o)Ugo#|X#P92Xk`9geQ?7^BSB19i9iTG
znyRiY4^$2pQhO5LrMJ09#El+az2xk|FV$fe%7T|wjctd|1xY-uLI28WoX|pj+~8w3
zREZbePJYZx^xDEfk+F($6Mw8?M031sFZoe6xSJa?{Rl2*B{605`qy`}W8PI8tIA=Y
zZ)hJN(Ni0H&HQr#Pq)lV>cW`{t@)D5l?|q_B5-DMa)#VkgIhE-GMxg;YguFKQkVOt
zLwn}cZo$^U#|C{{OqB_no-Fg&ImrNleRgz!BG)mC1AT}?t_RRu$gP=j-5N4IRrypJ
z+Kmf0e6K|COyTMmLa5hGqTl-A=7MT6u}Hdt(s(=tig2)p{AW(pVgcJS@<LyclhXyN
znG~o3c0h@Vv<eSOKYVN0^upCpr_ftqqKvl{ZKMt_vLLWKwwc38!v0)D$&CAPW%J#B
zCy(D`T?s1x;X{7&n3Xh!YgkiTAoq}Wx?~&FzS1&Hn2>`G*9!LHsB1Faow8LX(-T$T
zc$53lhE~WirvU?6I`F@=T{VM6R1zXcDjoV%BrNsth<hP)kGkI0ZNF?P++o#ph&!Ip
z(j3#a?vs$uZ|W?^5afl(Ro>9y%wAoHA-s8rO>07e=Wj0}ue$bNQO?_B0z9?#!bvo#
zZJgG)C#w6*_ZENzB(24Gd=r(Nt!s9z&hYlJOW4#CxFl%a<SRS9+*qS&7dR3@cx$;m
zGe;@XqFd!^oVpVfhMd&$6pdFFb4ndWCo%`<GsPzjI7~?(=OfW~$c7H5Sh-Et=D6QU
zIbW_E`S^LGEKm(0wRgIL&t1;lkCza3@MB6^1Z?vd8<4ssx?6ZaeKYi)LqKOkRiZpi
z>D_^UR7~9SGG+b_Bkrg=M6C4aB)QM8wnZ0^*f{OyB4qODva)sE$S7$0;KECjAvy3j
zvrcpm3m2M5&k#5=#}HypCj`!Ca8<G;;7yu+Q>`&lOAM7bY7l*trs!hF9K9EhSS`DW
z_GmtxY*M!>M}t6l`)@oO1O+Gcc6P0U=laLvVq3dqg(57<x(ui9Gb|m@U_f=|E>Z0-
zL036XFCXCL)!snZuq+L7@0@%*cH1hZEQyx!sOyB9e`b(@`+d)Q)z_9+FMLr~k?2-<
zL-X>16j?up1pGWkiNIN&v2Xg~0qt3oWE)<5)47$p`k9i7ExBl94STAc3v8-=%bRl5
zCCWNA`{a?oI|Pem-G4NKf&izmDlKEub60hE9#NDw39d4vTr53&Aaa3zz5V6)h=PGJ
zI69)LQy_%=DX<BCV{Pu&dX>1P1W!Z{gQDOPeg2AAU_HhNUgY%TJ|zxX5{T*U16mSJ
zlkj^@_Zq&~CpiY|b;BsDn4_yh3l@Q>VAB!ClzL5|19K_AU5BGES3=QL4co12ya8Q-
zLGe-jv7M{3eL<}7D&qBJAnAP5!1M~W!KfQTh_sfhC5V|YU+@9tZ`mJ}z0^V^2SeUm
zMKz-+(o72h&d9-qjW;~lZjDi&e*;p^K5M&bleMU-i7K$b^WqJZB*EUXvg(ArmJ<mH
z!U+Nz@x8;UboeMcY~GRPGTTV|k{^zBH;GyK*+qHDK_!7*KfU?O-;_RDgSB3yOt}x(
zaADQpaMH|I4%b+|Fr8Mkq?U;FTAfdc>(nZh;V4HDIQ6{7ldt+oanCvcNMgTdJZJWd
z(rlA~Ra47>9I6B?ce;PsGgnqYTL<<L@(PnAOl|!3eaW=JLX4L2%_X{YVaDf#?|+{d
zTC+>YPNph;TtU_AO)s9olHHbi0inzgJiev*VtnVXKJ4bPGRlv<>lT(N`%V{G2b^cw
z;2Jj-reT#=oJX=)mKc3mptQz$gBrpQ!l}$+@u*>%D;Bg`;-$~Q1-1-z#9)fQ1b53;
z11;((jb3|}6mog4^yOd-$roWY<F>4z`Mm9|<O|hD)k=C-$<+I4Omtl}P~nar(F!69
zLi;Q><JD|m1$}6ks|WSW1NgwWRRb^&8$iJ19}6ZjG6^xg>7U_mx|9+rTX7Tz6)xSR
zQUO0yjn6qHQmaah?S+zdIZe#j^Ov*f?+rd9$J!5RAU&Ls-&9s+c=kqHqWNfaKb{9_
z?MRqteyZ7Nu%Db)%^$!_*&px}S2fCqdr_u>b4qs_8wWtQ);;pSuo}02*x!snYqT}@
zb4tuCWOBWJ#>|{P;|T!}Ew=^`e=4ek`<GjPc)h(ZFl3XLC#X$ErrDg~vCat*YSzb3
zTP;Ic_bekJa#+}a^fQ!km1Rb3^An{if<ILca|&WJK3D^9%ru=4$<m*~t@a&*PYinK
zR~{@vXoD`#D@yF&fU?^Qc4ZAs9e!m5Gddg{b2fG}rgn<2wRDL6=<uM#0p9Sj`*6@S
ziduuw`zSk8^Gy*cU_|jo{If?qT{1mP)~AQpcf;0+f(P|gyPzsE`<3u@S?lJx{b0)d
zX3~Pp!d%2#rJB?nA;rDbT1vPoJK30z#}swIka*eT?2NuPA#MY(`{kP%tCE1!k;LVs
z!C4xPKvFw*7x@*M9r_0^Rt^b&gb`s<nM`FyRI<t>(dB6`sSN2(Cb643$|O&ZWeRTc
zeN%7P6$T*9q6L}-`vPQSXAUzfbya)8@LGXYn&gYR)LMq37pQzemWIq@ThvaCq2utB
zwmuqS5iUGU>&yY|=#EgKqJ$7+2{>S-kZmpMel>OcGVp7zb(V)VWpjH-#K=Tmm4oly
z6_dBdGh-AFd2QM?owXp2=r6ApmmyiL>77-feMJ`py0^FB>2R0awTUKU7zVCEqS+TP
z75_{&SxG?;*-<nbkLVH57EPXj6#vXZ7UU-9MCL&DVx}+?RmXFX-^CZ+Lz4C1W2hR3
z|Ha&U1~v7z|GpqirAU`92#8drgbs>G4Mj@mQRyWRN(dlD1(YTrHE1YOLk-P@DoByu
zlh6`CIs^z<C<;G)PM-bdzyD|N^SnA|&v}=bHEU+gJz3X%t?T}NKi_A^PvcaRdeVxG
ze$e=wMhuA@s)L2~&CVX~*nHXGSmu{way@$+PKXB|*KdS>_FIm667;FN6d{<Z!hM>m
z=6OBQoa@8eyI_edZ=HT8yHT(smpE)`4p6b9AnG1W$?BB;4<`@z|Lc?Zzh?tIG%)z`
z@PEn>`tOnrJ-qQhy_Ual&%ckl>XZNLz(cm`KMa0ZpUqCZfX}40+AO-Ein?oLYTmL%
zNW4Ql=-KFZ8N{~3^o!0gYT~qC)|^DDmW~h>Mcq@DCV>sJ7~O8kHY~2!wAXC0U>q=h
zC-{z!P&(c6<dV==tKEIJ#uTL1N!D^?I?|Gt*G1Y<J^9z*c4B;dx)P6U%WHf%i4~B(
zRY`%LIz8=W=s=}wNUyW-J@xPifX?*vtOgZB1T3&${c3h{aEk^!E%h^j^$CcQlRGtt
z*4|}Fl`<bi<sm4}!7N`yr$83+p`2&(gE0}Rg4mBf6WBKxUE6Cm+r~EA*!D6D7>}^t
zviDfcaB9JHFq=(9v@TcR=c*MDyI*WU^`)s3X1$9|pP>$n7Bu4gGOyLlj$aFd18fEC
z##qgLqiRr|-R!@|hGAoqOP$ms{izUIoeW4+s}r0zXBK{Z9eI`icGas?f6SxN?@p(W
z1S%7Z=XDxK+UtGdo-)5%UfU5vg;#Xx6FP9H4I_99{*f^W4uH!$^XZ41uhR*ZDqYt=
z%lUG8mfqiZiNk%g_es;F7*ihXvo?NRzVQm0kbcimZcz1C+j44f>ggH`g|RD|$s`Ot
zZF2VauYQrN6+p<uCxg!>S?HwJANiW!o9l8~zRm+TLqwjxu|Sr7cG*Ho=}W#yCqJKO
z7C10mT>w)Gd#7OcAx8dhYP+nujyLQGvo_rVW0Gt+4V@#tcVn7MOQlQPucZ|<eGb@(
zqggVR5`?veb{clg;X-p$^ZnD2iT|RJ(*Kit`20-sp7(;}POvzCxDEk3WbSl_2Xm5p
zS|dXo_1R1jNI`~~NSI{=WTJ!VU#|7PJk%=2r|;X<dQ3Y>v{?5(D_WIa%O!-UPh79*
z@aDz0*kG^|M6;}>PT=D!Qf{AS{&*1two?+ej4a(+tc@6IOo@<O-~t(JC$RHNDL#S1
zM*AM}$tZ5=W5<*;4$MYU35zYOyE)5agl<ke@YiMb8q~f&(Z)6;*i;a_=<+WbdjZRN
z3jFKLn|t+6WmI}t<g3S$;!Gp{79<4ireLb*oDRdDE~?9@g3^)T<VPKgpQc>o0L&n-
z4o)K5N=RZ-*OnHEA#`DsA?&hy<i`eLdZndb-gI+%(FejEP7-95^TC{MN=Zii`p9@J
z>Br7x<Q%&`SoAcnxJqTVlyGi8<5X4k)r6T$UbeIt<a3Kc?lip<8FSfI$xxRpF6uQH
z!u=8C3FvD=S_~39Uq(Tscz44Ii5ZV2!j{_9Um9zS@ZY|hteIcEO6WH=Ipvs7uB~28
zA#+K>Wp5%7&%XU?J^W6Kg6W5+Vh>*2kaVAkG+6>y2A*A!w^g+C`-rz&HQO;zIcx*X
z4D%hT8Ja7*^e-hd+RX<7L)}CFnY%@n74*-Z*ykj@?%=Ta{rsPyR^M>C0`J$vExi1V
zXBRh4^-UKc-9rYeRw?<>N>_b;or;geAik;d35oVlgpCMclSOd-M=nz3owMYN+=(3a
z%R1n=+l=mMo1B&#;X4zKy>qPg(AoK@fEDEMo}j^D){K?BvX^@W4|iIXf7;SI|5_fl
zoSo7ywfI{q;Dte5HxKS!6Ss))?7$gg<VQt^_31t@z6)1*+U~gsnlP8oW{aEEMJ1;-
z*KIAeWKg+;@jF>wDvH#$Pm%)B*MBQY!$ixN)*Pw7C-~admWx#7Yy+#rP6gK81#)ww
zjBF;o=Q}%!5)dDI{Lt{hed72QoDgF<&#MD|BI|bmS9Cn?8r*U;Hy7WksEW~f1PObo
zUz#~CXe{}cf4Khw-EM@7;R-BmD65z`6^JxFjerLk1iY@R@}l%M(=4e&HF|&AW02R(
zA6Z@14AAkbEay%yW;ZerbljWN2vuhtO0bmdN<L)wQ;%$@-rAF#G9wBaZU9EfDf!jW
z=*n~iBF+$->Ke!fH{qM&R~Y$y3!C4dnfPd_O0u-^fxHF0MiZf)buin{(h!u>h4x9c
zSVqeQXEgQj7RZ0*&28=thDV1*UfwSt3;E@n_DU-O(lQPQL$(L_!ao^KKQ|tDPhQDY
zgTV3U0G|sfXmX>K9rb+xs08pq#GfxU6?4+i(`LUC`00G2@Vf&0r*APZX<ie3I_l)`
zfj>8A(9mu~F7EDjUKTNkE?iAY==IyLIybSb$SDR7M5LmPfhn=GkW1kAmDIWJcj_je
zl-Sp}mZr_#E+Y^Zl0)#7<A8V@o7vv*X6O2hIaO7{kfVtZ`rX}ZzK9^LmOM`7h3xb_
z-PVdonH^zzIP$>&NVxmXrL=5k*C^kO$uL9aAZl<e8#^TGnmv}9V^*4g%o;H!AyAzT
z)#bU_Cad}n_fYSPrq{ZrR95{NiaiQf9?Z?or5QYnLHTKFs_!2jpC%PDJZy-OSKi5L
zZyxTUfi>-|zBFE<Gjv{trht{bOF|V;m}z{6KyuBxqKzU-qe4Mxbcs#m$620w2<31x
z1f&@w?p7Xpi&?&diz#u9kL(_p*!bxqlu6JmizA)1{5I#2FR-$lu?*F?cg3xu*~TSw
ztAh-7fC!5}MZ+a+32PY__lG)r6(o*GU1|NTQ2xo1J)W(PzD~?Qc?|X}A7nmzq9%G~
zGq}KiMe*gl%GO}mh2yEykdPK1s3UfILYd$cQN6z&BP<)^{Ut7iPhinpZ+vpB4EFAf
zbKN7g>F>;GyCdM}0eQmQue{~4zuo>ocLt`{JgCCsAQj_UQL?%kJNO8)k_JyXnq54E
ze|4`$s~XGCoxdvyJDcVAt6Hz_FU**pi+J7Dd=P)IQQ&NJlIY;18C4<msbw*w?$bhb
z4Ozy8EZ`_x<LmpTMtHI3d?_SrdWq_=T^o9C?YMhes-_5;fJFK=<E<pD0QK*%C21@7
z#~P;vlox2UWHnS`5}c!L?=(Aq(C3k@a!0`>yi{$ppu76PvHT0;ADf6P>X%jO(Z}(G
z4*9bb4T|a*IzZT?#nhK9EPk`L-9%U}$BH635W8M#*wr5F`z8)Ha9Xkt*m-n*Z(leZ
zg+jF$FoWf@u+zV`jh%+ij8D}!!jrswgd69ILRz{QU*YX)Jy|>6SUQpAkGWE6OdWj6
zJZyhnGR{&>SZmn4&@Zx-`4nj}!d4U$rv>OjNDc0S{R3nfl*_`x?+&C@R7#2SY1{^k
z>@9D9u)z(;>vTKopYY-DyhcaKjCV8sv|egU%l~=$$-Dpb>_b)^;Epxmb)wUrU<~)%
z=r3?Mh9rMHYkQb#or2(!NRM(cd)FJb#InKfw}>G!o6UT6>%x=wZLhy8;r_lPUYdqw
zNmBE9nxPit<1?t78dUG6Qjt}^e`+12(+$ZZQpL0;rbFhZ&1TOR`A>lb&QlCS!qd-o
zs{dx3jhSaVwD7s91Um<&m(&+SR-<ke!yLj!e}re}c~I?X>Q6N-_O<ZB&YzdzY4XBg
z$#z6amq`e|v4x#VRrRe%@paZJ0Jjpq3E_HHl-Q2i9Wj4oW<a3Ut0S1#34Wb#JUl&q
zIJ?63oJGH+We&6l1^vFiqwD7;4DdlAHQcaP267-JyTMbNMvd%Yp+!l0Hj&k{xWi5L
zxM#Oj{#G9+)#KG-OuXQUL!Ar!L2V#I=6pfQH+-|hEl7KB=FfiqL)vuMTUSt^b3<5B
znUe~9GK=JBWfNLnf!xsV%1H9N4e=A8bJ=k-?0(}rmL#89-y=omHSJS#RYyOv%k(#7
zAKEwsRIFivIa=~(H1ockIiQnEB#vmMTYCCW=I*u~AGh%O3JUs%jLT37u++VeY<Tyl
z$a2LJTX4}O7G;#MbJvNW9a43MR83)bb_Q!7z`n{Zo!7MS&B0pvP;3eshlU!%DP1SE
zw$mzvX(viJue~jJmvXw@VMu6py21CBeKYY2gH~_9bJJ96l%p(k@whABk~6?AMbK4I
zm1PF6bO(!_f;k?<9weHGzdT@GiXJU7C=I1_{Be#hZzM@KfY6Je;DjtyTZ<L-=$Fu-
z)o@+?rFeZy@)K}S(_VfW5^p3c&kj}yx|;a;!k_~wpJ_f+kSjJJ;>>5f<$ul^9#b0c
z)cdTmbtI^9#^?!GRXmA{`0Md^!T4kiNEs~rk{XMUnmWH+j1F$bX3Sy&;O)Wn=#59F
zYMkgi?$WySFe#q>&a;J>g7&2l+p>dW&hDn8QdCr}IEQWfjLQ23TH1yUB8^5r(@M;)
zN?~i=`7l^|y={77Kvz!LjA*6$W31pW<6zbS)5FyrsAys;Yn_Sa@0e2j^b@IK%oH%R
zq`tPeJi#7&jN*SU$Y7Qz8YjW{K;SD2rj>Zu%8zTY{_`&y*Il*s!p<(o_g~n)(op_I
zlOMb^)uo-v;|s)7<PE@~=t_K8lB@z6roh87{bha@^G}Ive8{(u5aEJieDjI3gYO^6
zi;uRt>EE3t=Mt99&aZ}#v1)<!<$+&UBVv1p`Ua=2k89lvsjE7luieAae{5M9Miq_t
z!O#Iwe(x=1_YUQdKJE}Ad1)Kpm_+<`K)a1&+we9CeQ0M=H$F4R>m&txB2O2Pkt6|w
zVcPS9j7NIKQ)`ib3w*UI=&EW}28wFZru9vqBI2a(_Hz~Nmi0na8@mS32e@@ZrAKaO
z@-aI5#o;mL`i}JWdX+n9{~Uu={oAiM)m06#lzwDHlpZ~M6c2;f-qzo*j-D-#`F-n=
zU5NKFek*6c{5_p3Tzw@9Cw*V>eqOw`{KGjt49uI@NLma^X9mei@2{pKO7r^|ulEe{
zD&4uZnZTIGTI`-ZBr{VeKa=SM<!$km6_n58r=QIUXni17ogtJsJkbV=rHOmSXMHz@
zi%@%t-Q%IRntf#Bp!XR+W+JSS`4cJgi(H!7d~|98i50!1Yafki<x8wXmI_V~7yZ-I
z-C2lPP55P(-#|w_D`xTJ*w<}r-<z@v+n9(4;UKox_^@{QA6DdjkT_)uX)2{>Ajm4a
zHJm$>@%8CvsbHv@$Bs-bb&t^4ENlV7ymBn&ho!~YA_^x$R|{b4yqM2NZ}c>J9;r;c
z0H5%9dSu#IPcK&OSC?P#TWKrV9==%k7mXABm|&{gBTE157Dv|H^+chBqPg@IzY*Dh
z<0tObP-+dwME<dH{nq7r;#zU!tHjvHHy_7%V_jXN40?$ax~zr6*f%sEpZm=)kb1aR
zx`bKGKlHJ(a2&BtPEQM_ZqTre=ENw@e4BHs*}x%;_t0h>q;1a*_H)%ZV}B#41Fghb
z+aa|Ncw51+KKuArp>J7TWt+8T>AdaS2)+D0kLoHalWQk5^995s;r{R--|BKtA`4=G
zkiSyc1V>U{v^no@;;&y%anm-gb{Hg8d$RUFeEalHR5D#uZ17+Nvztw5tDzNPp3qxf
z7eufhk^{h$mM_OV49OrnijndFTWAHQxcgEvdo#tM6LAxcJ}tf^P{*vp<?51((sXt2
zF}iC>gBT{yVwFu18sUul#|_TQ@Tfq-8Pd+i&S_t~a!m9tzrc9}ivEkoGglF5K7~md
z32L1nCgGiQ`^#=`mNz;EoKn@5>r|7Xtf>3)OEvZ$T6G$ai=2*2H~;@K<6yCL*dtXG
zefRn3KnZOHq6amTiL$j|AoI<{{uLle=vCW$2O8F&QsP2uxn0ldiqTck9g!S<tuAOp
zRL(?O;uH_ar*d(%(a>4WAMhxSLXjeh3V%8XFe$4$@74?hS2^16O~Tfm?<juHQ^As4
za6(ErJ(?eESDU=eRLViefXs!eb!5^5=`a2yL2ZsCi{685zP0ky*5TK5E>mPliAVu_
z)lK{Z-+Eq?K-SWeKb=6CYVsH7e{^B{{L8UvZ9^K@Bi}S&os=#@N<TY1Evsyu(JeJ`
zug#sT&dhn<e2Tw*e_@LTdoYwVf59*iTdP#L`!}^BtK>U*Pxbvq=pA}adT8!PjWqf-
zv=X3!xWwA8ZjS|P;z9Ex^(U&4eks3`l}v6cK$hIT0pDC9wGEthElhs(R$pUOD?TrQ
z&xP90=zh4k?yLtCekdYV?a#$epYPZa=~IY!_icSn-L)qU7Ta*FR?b@rjVoz?EN^>e
zH0>y#_lDwA&+$nWbN#N(mj#+<5JRAg^I6H1Xgd_GR#N9=D3F9!-6ius8Z^2kw3Da!
zGC^5EA_2omXGAAOBdZqLYVtlHD<-}If^O6Un(;9^Ej$g|6&DrKY3d~UgoPCuUS%<c
zBMw6c_H9`;3_~eGphMKNj`bRE>)})OU!UaeY7hRy+eJ+Y7s`-7c>&&6`9o!iK}zsN
z-52JgMRBHiwx;e7&oUlexwI61k-@l!(SUvhwqPH}4=14VG;oYwBTnPwpfHyeX5#+k
zE4i^R3^Q`}kOsVy3tdU~nKQZ_kj^22y@WowWTG8zCjPDUeR!Z$zvQbO#J3Q3*Kg-~
zV~*9XrRDf3bjy`pawWPP{%|4m+raHCHPwQ?U80m1umX}a!unf`5PHMz<Q8_%B0Hrt
zA!`<OgnV3oW^T#)s0v|bZhSNJ)gWFl{#KY1ZoBZ$<ZPoOo>i6ym$fFGj?hFtVeb7#
zbQ*k@-z??N<O>r_z<%*8rn%g=-HVr(uQ+1uAl6}y?HPN{?JPxLLU$sfO1&%u`nD4T
zpfoy(w*d)d$M380ks-B@%uzRycz`gjX100#;VfI}H3k21MK|_uL+pCb)#*Lz`toZ5
zy!*FW>j<hzyEQ7<d-YSS-BpAZA2Si<u=a89)|cCvsUF_y+UB;QAB;g`u&gLniNP)I
zZy?qCF7wUd(87}PwNfLRCm7Z*9-GyJ<b8Lqwy`~`J=9@gZ|vRWLNv5T<XSK$^KA&L
zTJU}X3O5gI?{=uBTLyaZUckGXO<S(`ZP!7He)C(d2Q4^fEPVZ;^C1WH?KrO9v#}d|
z`&WG~yD2F~C|Bu$tluI?`0gwIr|t_w{HsAx?+Y}3dpAw`0%w-_4Gcg)whtBl0P{+Z
zb_G}qzOAExi3{-y3VWlP*{bdOq#vKAOvNbVdsWC|L7FW|T@{lF;n3yV!5Vk83V_KH
z+1aD4_u$7_9blF1$|~#vs#U2dWqVIBGd=uQ2=2%yH1?R1$R-y|+pPVKmS2khwYMWw
z1;h#Jw8R(cUc3&dK~}j~)^$gES?pZzUvsU4RhRo{jWuCOK@p?(Y6>O%WVclXtoODj
zM-wu_)XiY3{Do*G5f>-g;LWYzC%9#RGdQS$x9w@$oT~MCRqvQb)}1Rq5_WttJ}%xF
zG+r$boj)ncm=}~sU47G%mvFWAH7gIi<*LAMS^Bi9_ZbOe%^#we&C;aYC6<(1B^2a~
zGQw-IqlmAJZ-Q#L!(~QMQ}*&2i^jhMPZNN2)S(&IoM3CjTWaIs=|y}|daiG=pgW-F
zonZU~XlWvs<<WKU@-T_6pb@Y_(hm~Y$e^`W0W0I?ex2&Mm($=0)@@z+<Cz4FhQbDg
zkrzqZn6^%d45fIE#*?D%pZGsEFL?PRIvmPEr#{-ujxQF?u;;mx0NU0@x728aMTB4K
z^=@3x!?g&!Q7CJ7IzDPJ@KG}%&d*19p|aA_E|q+SsB?~g7c^?qSXA#@a*8ro3`OhM
zs&+8is8+>my(u^wOGv<IOiF%Xd`Tlk6T}TxGsbxG$Q@7nc1GW|3<xMPUSy{w1Ss63
z`&<8b<82CytQB0%&KVHUfoJH5%?+6+iPlykF&%sxRRN9>Y3nrWM;Nud;6u8sr|-$a
z@K#^a>#=j)u{74w*fZzX=H|mj_u^!0s>j^jrTZVR5(D}ri+AXEh+4?~(u44hO4~V-
zYf%MGPx{^Fy=cinDXP!dH|qPZp_RI2ypG&H98TLbgVfxEnb@#Rc{!M6nK~RL{PqaP
z{fK97I_c}UsPWHfB%g;lK+pEm;;!y28CQE?tY-NoLPdC0+mGKujFJn~)i;_eU+ixZ
zy{X!I*|e9|B)Mq<wQ6HIRsFuR-l^lFx%<n4=^AuK;d^7&G|!*T;<*|Hlu=zdI>x|U
z2W~!yyk?hjkIi@O?x#F#aT}w~s)xrW6xNdJX-Teshd8o_#UPNTqpdnW^QZ^w)Cu(&
zf~yr)cFNq8wQ{A8)wTNka~;E8qPc-z>*A5unjhS3+Qs~#VG8;uZPR4szi3R5z5;sQ
zG;!Co4Q`l3o#squfKPbeS2onv#zfuD_eY1xNG7Zk?RxY}1;Nec7YQLZpY{A$3adx@
zzLBLV``F9R!vP8m+xh$@DIl3tU~<aD%HMB9!?2=T;QMaTwAZs-5ob3RQtAG_y^%01
zB9U4A4R^%xd+00IcD%#hl!->2U1TSgApyA)7(ZVlzUZjDT~&b!a<72gL}fpPk#4hP
zU|-(lq!QjJwK2zu4VbwIMREdA7(_mGj*hGG1<Nj)?IlZOsr#;+swlS6#%>l}I58t&
z_Y5&0^P&{OA1y<9OlW#>LT>DMs*QTwt}#8-RaCfscuI$m8*Ul8HJXI8^o^Z9|JtDD
z<#1{nKw592h)q0SYK0lAON2?%vt9$;u&=}fj5^B^vi6vhT1|kD&J6eL1K#Dij<W@g
zOVMCoC0@FJ&_tZ1p2IvVtGr-f;Uz2Zs8}!g)ol68f2-XrU!%m1L#7fxsoEQ|t<JR%
zN%+fj(N@-mQY2HHZEv_$t&B)lFCrrDxQ>Yosl?6GO|HU5c5-iAHxBi`l-cCFr(Ra^
zFB${x0C_KM8&#p{pl=ev5p48KoQ79ft^AL(JKqF^*5Sw7@I-X>V@OTS;RB6m#w8hY
zYH+h=(7d{8e$eDJEG|S%Xm575wh(Vc67x*RMKGrwHV?1{x8HE&#4D9|9me<d_`+q0
zOvwf8>l%F{ZshcwIAn8?7LTA<T?L#+pH3aY1e8E2e^WA-?as?hoeq^D84*5{<M#_y
z#_N$AtoLdj^o>-!>^m5qOVsETIyy-fhZSOI_^@a7pitcm6}!s{-0tT3HVo-4$!pzO
z``*d8W-pNozL>{yY*(tn^B-h?goph!z-cKISCu9F4sZK9@ji3pZn-x}!P<IoeS7eL
z5u>IKwb0p-^#Ydr|9oU?rMt{r?I+U}>F~XO=R19z{@=zZr`6~rk*yh|%z$tWVu1wK
z@{#r%2<2Yu9)~5H_1)L~Wen`j5lHXES#MQ7O)0%7C$GjuC_JzCfug*1OH(Rxj@;u*
zo<c;<wi-r6S=!4Q5!vXoDy)Z-3b}@>b`u?N@0CLR2?s|7+%kD1LhvUx9XfSQqjz$}
zuBVoKn%|JtL|F9M6Nkubuw>ocrqqP(WyWubZLOSm|FQK|zCWt(^=fdm>G2|P#Vg>x
zcY-A6;fnCu1^@Don4%?7g6a(u=W$h}u^;B2y!>*N`uetx!jGLSaPUL3^gEXd4-{A{
z!<G1uK^j{FA9G_uJIGC3kbuTnT=xzv1ybRHv%%vBSo@5{Q@hnYAmFu^;im4s3o&)s
zsmGz=1}#Mig~%`}lJfSa%WlaPsT>grmaIMOA`_dPkY**5zP9$`R@284kbSvOd<NM?
zk6zW1^9irvC%Qx|j`PR7hj)SKKu6PDKOR_T+vM!p(JbR-XQ!lrQXXL5QcPqtVu>wV
zeD+ng%vDZQtKA=Ve)hxw=m>AXKk9c)sW~#>o^~<I<uti3Bed?W2tY$fz*}rT^m?fH
zLtR3lDqgb#GrN57&5qE)h}St<(sn@pI92>59_94Ig|3-aB9*iLbBXE=kf$Qnx}z|g
z0J>Z#;=Dd7!KKACvF-~yT6yG31UmYSeRzcBLH*PZEItA9u)+a6lCD)rV{+I4g;3Nj
zZI6e8nV8sCaSeyp4LGXKfbDH%Lp>hD0}7+a8`aziOxfHeO7Cz|xG8rpLOAH_<-_JM
z6zG|^cz|zu5qVkA%ErnIt8ZXs!yRO<3@rF9{#I9zxxhrM<O}U48`IT6i_G2Mu4Tz{
z0`5E#UVM&uPYpi5cx4z<)!)t%=5*~TyDKsttrme+)7*0g=m1bAhhd}4$>^`vGS#lt
z!BOOKXMN^s4?2=mLe`Sjn=a)!Q&K`}E4lM^y}<1~zTx%y>LTN>j#4$rV<my{YueF`
z4vXPw>5|0^?|^t=dB9x#=7pqk&E7xy%1K&}$^2`>f8G;Cwxc9_pyF{LY`Ae~z@*=M
znd3i_dev#)M@MMof}(Zl3O{P;r#>8f%t)!^?_=q`ZY<`hqS()+FP>JC=5s*9M;mVa
zzxOTwuZF<?gI>V<2FWLM)u+(+_!+|El8%n6mB0M6NWRr*$m7R@fQGw+e_l^!qJ6^D
zxMB-<lsyTdYQzYM%FORT75M^d(3f2qhyI1`>n~4Z*l3Eg4Inzigm-3Mb(KjE)PUV~
zZ&`xJnj?hL{~l*i^sk^e?Q9xngK0w1B6rqdl<*&Vp>G7SC)X`kpa(71^M`d&ej;<a
zYIivpOi+1QG{ZT(u{%p1A<c9)m)Ue>@6I!75rxz@X#RO76#d|8656w4#^&HVMD%TR
z5p($HOo!zsp&v(y@a5d&W;+w((RYO)LH!SOkC}<r+?<!_d1l<dLr6lz!x*8_Wn#ir
z-lg&ij!xFtsRiNBg0K(mllQ3<3Z5^*dU*UoU28Thff>H_eLx>T4Iuq0Dw#&x!*0wJ
zf2fyHTEf$ZcvhLB`OX8ucFWy^VdnRR{@A`1-tXces3pY;EYuA4$dXaMM&cJQOT%eH
zq4)b8Hb#C7g>qd+7k60M;?Bnb89?(+@6-_|$4>P@y+POzuJimvmD1hB8?Mo|q7|E^
zo1s-)_eOxAV}$Q`{FMhDGZL5OP;<*;8h{5(BuD|J8D5^c3q4ow+47LDP8#C+#}M1R
z;Tk-6kor>hw#>~I1lfosQ^~YVJi3{$3{viMC*p8gdE}Q&T21UB?MK7)$L`d0!jk3B
z#=RS>aW%58urh#K2B^m`J(wv;?HjG`B&<jL=j(n2jCFI#L0x5(bh7`UKl<iPtwh+t
z#(Er?8y;5L;*5Ub;U`<Y_|WO`;-~vg|GrJvsz;k;%h90zK&iLVQ%&7X;FSuIBrONG
zb5nXbR|IS1ia$InE;4w4>_%d7Ek&i$%UmtSHzR`GyM~0{_Earv)cF(Zabvm7-7+ag
zM(cT8*m0@^&bK$veTkmyHoCe#6yDh46xk+~JaGrIo}p1uyqckRptJw(&=zK!;<HyA
zqxUrD;Uewx{>6pK;O}}tDa-RRs&<iOHN^psr?`5Qu5kr^4WM3e!7WKc{;{;HPAKaS
zoBw6a6reuIrX?g=pR#-=W4timQNxIxxCTjmc?ox)9!8S5RwrZ8Maq9L+7CA0%Mz~p
zFaRC;5Twzo9d`MSl>rf8Q1d$gGjDD8Wmf@nP+P_+{1&OEqEoK85I!Qh!7t*sc2*m$
zf2RTU^gI1y!i31;!OEYhc82xaDKSqxYAz(#maB$a2$5)4WkBhbAhx0Gg|+^lwL8nV
zH;Qh9?diPok~Wku8vl657Da3^jLL=lA!sq?qdkQ^g8+f)&kS_5p-40R>u*HmpGpYF
zi;7sfW}#d=W(XDw{2-1hn6@6{_w|4?%F#AE_-0E*`^>z~0jf5x<Um5B$ymrquXpkq
zpZ4tulX^K#(}D0$U}%tyGeuF;Z&4uH=)tsd+~C%tt~s65FgI6Hi7;C3yDf3GsL^^1
zRuSW=?C0dRENG^;xWqW`6)}j9r-ZGpTL9A}01uF+RgRAwJlH$#-@t^2X;J?-Ydjoa
zGYf`?4==O>Z@~Ls+{^27KZ92I)=GNh<c3FxSEn>zz2fGp5Ncyao7_OR8FyJj`<hbx
zEd!tZE;`Z5!dVO@p*W#mEVt8Bs?m2!<CjdX{Z%L7?vFOCx`!)rvF+4c11e$mvTP|v
zErr$`pod0re^YOEjJ7*S>yHzHy?mbQS#=Wg!DL~t{>=1Ob(J(#&KUKxt>gB><1@uF
z$zMKFtn|h241^u4C>ZWp8*@i41Aua^WU7{us;JVF#wdrO-e4a>7-<W@O#o$@%1Xa?
zWbq_<gx;aSUR=Y_(uZG`$g~0wdV5i&q8pub5hJ7@pVdCJhh8^Tv-ri}!sunR-k~TS
z4)_pl7#01<r8Kc}jyJNl3)CX>>jMaA$z$85+wY!v<W42aW@qgdDHfzgKWGRi*o{%$
zCQFc#vaIf6YwH$oin6JmSlU^E%3lx8+a<@_jUV^MAhHzrj4i&sNGhft5@P6rkDKW|
z)XvG34AAK-%;o+#U_<xUtnrgh{g2gjcDw&Bulm31uKo{-v{;<0BSRWMWUIiEZ-3km
zUNcydz!?98X8sRTpZ%djL(EUeMLEk9orkD;<b*H8w*h|k46Xv(Zs`z6+JZ>0OkE3F
zTpwI{?A(IXhP_<IHIX%wQEtVakfR*)@`%`pccZFpX6p;VM=RTHEa9S60&iSGIk%#o
zm$g3{qPLe>23bbjDx7ZdBi^nSPj1xsF(A&ks9ynb!7Yz7ElLIT*Xjtu<K<gA)TMV(
zDFX71?`5AVS(`yNt6@*1E9eL3I_|MHUVaHP)*W^Ytdh&y4=XP@83X&PUA5%+9&vnh
z%@ro(w0e1UHBPtUdHkePYq|YZW;k&tc!}TA2$q!&47DZ@44fr5=BtW^sj~ByOn!AC
zcD)Tr&r`~ks`oQBd=-@mmG*?CYB*0H(&Uq>X63wlEt2sw6Kx6V7N?eCdmm|Z5b~$F
zh-4px*f8N?5X-Qg)eTE3QOuH9`Dd-uSakDye2$1;*D;slidz7L5;h3l>R7H7VD*6Y
zT8vh&XVxJ!ilaPSInpNIdK6>)!>$a1$|EHsKf-g*Q_!7c_x2?P`Gx=&n$giT(#-{;
zt0GZoF5~wbqqsihgaqm;vkF?`!2a+7T};-I9uEx8f^EPWFpZT&8Qe+OOIuX0^suHZ
zzU7Gj0C-`A%Wpk##^)>VRw<|nYdp~d*;s17G~6C&Z}t!N-DKiaVhm1KY84Ru$=oG$
zVh+kZ?PWlvqq63m^=;rM@txM)e(z9!XR-On`J@#IsbIGEq!8uzHTB6)?kLULz7eh&
zF><tV6l=uK@#+hDU^_CnB&^cvGdHjEvI)kI3_IiEA2~zw1Ya{q`U3!nvlh)Zw+L7<
z3@J4Cc?oE&e#UWReWj!<^2JOP`i2=CRq)BiYUWSgvzW_IUruqo;%HGD|0R~9rjuoe
zn`eX)2cZ(Dee1`5b80}|s<?go`+kRn?D@goM=pa)kQ>akt|MtZ1}z1KH?WKTKd64*
z7&Ej_eNG;K?ahkn^k=uXPa+eV78OmJ8WxU%iKjwQ1?<nJBk%2LU~)$heB$NR^)VxV
z89**~h+Zv7hmmj6>uK!~^a+^nBNAD>&j_EJ^K`RUDymv+r@<6JTG24kxV#4Oj9d<>
zUU3v;j`zsSH|{+Z&N8%6eXTQ@RnuIPC6KgPT_Ml)W!`h<kRQ6Xl{wn3w+);s8!W4C
z1ky<doW03Cvg}AHZRw6l|G2bWg(xlUxZ{!iUdmSx=)$TZuD;d&JeOQw*91x7wKO--
zNy)Zex`QI`dk^O3s(e(e`xX|o-R&k6?oPu|Pyii(z&flQeLU+Ls?xKv<N}fQ0g#aU
z{P#@g_Vp?YXRcQI)lyC{7!I&3AT-=ZL7cHvQ&FEs!zWCMZS77|f$Nvwx%G8_Qw2)%
zfG$1-YbH)atr#(wtS=CHv#9!`Haqdw%X!952#Ql^bagE?FS6IM`KP|*wlmOg9X=@&
z1~M@fJ{|mWrh$GYvc9cNcjT+L-4-K!!pb0IW8%^3r@kkxaQxM^0W{N|!#Ue6rRv2;
zCh<)rP}WlE`Ppy>1qWCE<}7<-j^U+6DNYl&evzDZK0(t^U*)wvaJ`}Gu|<Yn1{YG>
zM&}R|N=EaUpNymjJC%_ync0hWzds^TL_;@WU9@8a-0KF|azx_)(Tw>)yK&DqY|i7t
z2;y>Z?N;_?yj3WyA}`=ZRW((Wg($qo!<vkERtWj<1y1xD7T#B)8C+F^jD>qH7MY!n
zHToSHQVar{oZOloEs*yGQTymT)lX^xE_i!ui{(Z4e6erq)kLzucH$?`df%YOd95ze
z^{3~4d(w+GMmB<82@&be;zCOEblaCj>vOM1$~fmrQs1Wybglo}IHntZh999nn2OZY
z?iuUtsQ<YEha7KWFj(p`w}EA)A^H2}p&wlL#a?3t!Q5u<-kc8>X(0M~%kh)8E!n%m
z8y4_42c)g&mMZA%b(zQ((EXl;8y2qV`TZv^xDV)!;#DUyG3obxmh&j~-njAPv#4C1
z_U0D*y98~upma5$n8=@|ro(%TS>+|~bJ>UFEUu*+CIb4Km@*zcJN-TrU=y<U2U^07
zIGq`R$9TZ4fZQHE0h1`&3HFHkyr`F26>_X}K8K9<IOyBYl>!K4Jyos`E!DJJ_N(^1
z%u4-8h#oi!qJgekBA#i;dYM0OwVBsUr&>$>^4GkiC0N5rLfeBHKZD(0ig@rm?&wA?
z8p(q_AKK<LV!BOsBHa1DD!D|^k@dC(-`)olm9;npTo(+eKwN;3>7&3}v(iTW(9)`?
zu`pJ2sLD~lg@whnE)O-41h5a*+_O(u!;N4k9@N&IXE|?rv+{MW%5hqNzVljpN$)oT
zpdT7W&`!<L`)ZqKYI=?&Mn)!WBU7wc_4z{Fp1D63_;+piQ2aVHer)c@@DC6ej>CbJ
z_{%C<7OKk;$Y#c?Qq$OOai(O`-@tIdq<5mY+VwVdwf45zqO>y;3?)TY2SK>QuDiRJ
z@_|=$$ONSPm}Le?pZY!>A|SHXVn^|De<>O1$)!I@tSv=mHIsu?>>v+wKmvIO<5_*b
zoUOEk^;a)+RX73Z{`t*7;2V!%NPP1(-aw<M9L>mkPl~Z)FDhHfqkewPYvQXh+^L}#
z67mdXi|V4ROWw>g#_{9fPmKPUfVD~z20SW@t_uE<J?g8xFdsQ-8WszEX?S^S<N10J
ztTp{->szCXG!Psx`Z~vM?CUWClA4#|f3=N#!yl0o@Lb77<h1bp5Wn*u_Gcewx`*rl
z$E~#G)tF^gw!8`q&<bd-eF;^Pt)8`}qR4r`l9}ip#PFrya?J-rv^luU?;z_D@n&r$
zJ{R!}`dD@6>z-$kG(Sjv5s~2@H4+Sq-+s=f5njWg0!Rc!nlL@0RvAhdk!T9O7uM3t
z;}HOJD=N0R{6;{Jm9|OyI@^79;W-BAu5S5-{KK&{KsU;MS-#ceM7DC-p5?A}KQ}?F
zBEMjfCFG-6Z$&OAr*eN6Uy}A${8ytG%kq-|l;7yN-<TN)ebU<Pt?PSx*PVm7F{s!n
zYWlNCxahYd8+I29Ma|`z#`|C`A@$vkhs{&U3BTP?to}_p`5M1z`z7KFf?6X*f2^R7
z{RsB_VgV{DcoK1JKuCq%wwKOVyrw?%dsnx-N{<RP`QTgsW85HRd8>&E->HOiDsmHS
zsc9q?(3TolFzr@uc1qZQ=$HkYc=jEk)bGmy1ic+{2Ujr04hMR);6E?xDR;V8?XRTM
zr0*zU3$q#idBA%F`M^bV(fF1q`tqR&>i9VUK-AoTyaoD>6`aYkobK7#f&x+oWNT`?
z-JjmN33MVRy<^tbKzZGVs-DBypA~h^kgP$F+O&Zm?-wP(@KC@c`gJ^)RX5`U2kB4V
z?h&qR`Cfy7{tSUznlUp0`W2D+o}b2y41|Ss<XF%JQ`~>W-$OlB-Pm54bH^UAiUQa8
z2E&fRMW_!GH2?RlW|@uO*n~Ml9}-ED_dU5nU+<4O&YgKzUpJ`OwuSq+vaX!!8QvL6
z?Xj)GYU0vUNX(9~c9-{6(a|7VYRsTHi>(55JmKR&T0vW@r?v;nx37jbujx3S)4}m)
z0n(0odj1HK7nbPjC#MjRj;x9Bc#j(onmW$xu#)rmwiBNrjHOI8oC*$E%jw+vH0OKn
zBv{e?-4b5iVs9#R9&u_sL_;Z$NaF-7Y#=stQWkgPCuX0g+27i&VTLy|2h{KG14dIe
zY%H9HKqCN<_PG0sd)R54k*o>KMc~E{V|C|iC19<3@}Jg6n%z>k5qR7ADk{cInKzat
z`0ys5SXz2`;xNSWsfk4H$4pud?zsN|9r&Lt{r_LH3K+ZgVp6&(QTXgP1~Gp}EMyG8
z-CrF>!+%Xe=#>g_gF<ubR%we2lpv8w!<wd0ciV{yOiay@Pv-IIT4f<X4m&d}2G`Ej
z#f01#Va?Lc{L!pf5KInzq+JG_NqgplvvW2FNX7^SJF?1gko?4yocAZprlK#FwVZGc
zyO$$4qZ2Q!1RZ2`q67x{_8>RR!7k@%HcuSwEr=*H@~&}?b%1+~xYuA_VnkGa9IRFR
z-=%Acr%+~2$-x7u7+Q2<<p0qqAS){WVdeynKhBme85n*UEa<Xs@lEych0KpL9I(r~
z?95IjO*pTw<FQ|ZlJhG3VU*veXCmj}iGgCpiHhATIA#k&4J``$vwoX_P|Yb@M>NjP
z#_`|WX^AGK23S>1;e&IZ-Q}hop|?URoJvaCxv$F%AzIzZtrK1?U`kFiks{J%=@{(s
z)1|_r<mYhzM(Vbb{+ng~Y_ZDb<5MQ>@WUi+QaJgv)iZ8!@86nIGwZn#1_n<Ts{yv(
z?x6v&vYKm&wCM|{y5KZeerv|;J9w1Ip4Lin+l0P<8@L!b=o@gYq)n-?Wk2Efl_J9q
zLvPXkM2vQ<V1iDaR`5+$@gQ=2X~ncoP~5!XF92g1vfkM?=fphiXZzeQ@ifZw?`t3U
zn`vB}43&F&?PkHZK9laab&v3PaQ0X2-l~kMw}6S4a5uG79fZD<SK<fer?&l!?{!|L
zGP$|{dyXHST`S7kXEd3?5(4Sc3QfQAh=@7dh}LRE&VfQ~ZraL*NOYLWM&QTbKMs4p
zWcT-OAD;}yTiWgk)NFVG9+@jI>|Iqa$(=YsVXzG;!Hpw`ta--OOFHUF+B;ypu&Xfb
zcWEg6qdKXz&76L+N^x3KnpL0m;bT!w4x(XUkGcl~V%p_I{$Dg@_9Pa8=k*^zPPbjL
zW0nBO7Z^b^i(lfKj9Kgt#^kVHuPKrTL0^~00!y!Hlb`49A@?cuvJ(u^0)B!go<Ooh
zorjr9dQ0DMe`$L7g-Elc7}aKWn#4bv)OFnN<Z_(Rx^$ohTwb0dnW^NOcRpO${mSx^
zplXh1om5|Pq5E`S-()Qk&hBf`;X?_J>e5$8|2_`jelCYo!Zx-D)aXkbrx9JQaG9Pq
zZC+AsC9b*J9P2xDI8(NcPvDyAWybw`*e4!TsN32JHrM(~|2oU%@dJoUOxh>9)Yp6T
zdfWTdbWd!3$>%4njy0|cU9HGxE)c$_Mf|RrnBw+XHdyl-2kW;5afz3AuV@TbP3Pvl
z2{+k7HJZ*l1hRubR^1V=axx>!zhCEC4+vYl!68;3+@n6_*<!_%FR^>r+~kASF{pH_
zEk%bRQxM;JgRXtG9!08kh_Vzz@1_hBw=<?MQ=<%PCU@{`r39z_vX<r}RviPL?-|x6
zU{(!OG=Wfuf(R@wH}Z?WpE#ZD+YxGHXR4fGOy6%c!!m4Gl1I%24P<v(ticOIMs^FE
z365ycqaOX0Z{hqEsn99<%?#R`bJ^v{xV2hohyvlH+1li}``+6{C4v2jk1aYC=xl_*
zpqd<=#Kl8)6KCrC*pXe)F$$4P5uB}WJ|IE-p(?l~@l5J!=6Z!NSJ1TSOK1d#W9}*$
z_q_RZ{1Lnd)J2z9H`+Fx$r{W__3SMy^B4g4O0sgU2wR_NANaq6kpvysmQ;dtOp{b3
z`wjf^_GQxoJX3Z;aGWl}a(1Rsugvp&TV@8h61*V#?g&j3;^?=<HJWc*94Ji?LB{Vg
z<W691J;62=9}ri0@GgjvpQ@INddjtScuj)tmilroSwgQ;Q=|MuwQ%mbBQ%Gnu62w)
zeqI42AB{8hR`9v0u`*&fFJ$bV+{4&fqz^CXQrd&hrY9bN2NzjA!j76bdSM<<N5`<*
z*@%&Sh0I^5leaCx6%(iWu!IKtQdVYz5-dEwYO<{*g=}SF6oN!uk(PR80AR0#-K-eT
z72ViWb4@GO4pb0oJM!~=LX|a8tv@TLOq$m-T>6aUCCgLOmpFC*2lhDQKaZOJ_gDX)
zB4l1Yv~~I4-|;^@hr%jv$GQJSlO}Z}gyPoC{2lk<d-<P@oW73#v<cq)a-vXKhuKF9
z`o#C206*@LtlHbd#9wxGT14!0^w-3Q`AW{V0(m;-&MU15w$3E2N}7)P+h8%a)Jx91
z&L6)>X?5@Lg~Ya6`CS;<9cCRj=<R9Na!GyK3$tpXP7%d2l^oZUm;!^=-tlX5DxW=s
zF<&pAp!$7Vf%OHoEsv&*tgMVTY=qJg4l-^PNGaNW-DMTmdWl4pJmI!JR>B)cCrxr-
z-E>Eu)f~xB+8}mYCh2JqQZv!teR1yx`}Aq&7f6VH(CTV%YTfgn^R)wv<>iedD9Q4!
z<}FsiUH6*wFwpye6RerL<Z0L@F5ytTos#|tN^p9<MHYj^A&`E8RDHYSUMdPvTCB%`
z@bjM4)DTYO^?!A@NH|;kzVPrc`MlleRssI{BKm|oY=1z%+AFJM!nZWS<JI-w8WrDp
zndssk_bFXvIpM9so)DcYw0S7FlOUqQ-tGN8&+1fNglQB1>r&mLe(%>)n*m>AKgDq`
z$JeUlT}<Y+4(X{_cH@@(%A$%cCs~_wTQGfX8^1i{&&|IsFI5{Og+ABZsh0MuJFE_<
ziR<o=va&Z)Mx8vEkqaa;y9KW>JGofUF7ZV;PQ0zkvYXip2g~1@1wYlOLIHxi>Rn%%
z4P9|@>O~X?e__mcHiXevHmIz7o)O}A>GtmNV)ZB8HDUTkHcNcx;lFb5wn};$J`Bb8
zPunnBOq+Q%JkPVaxe*sUkb^@HKs`kEW{m&yCetG)xa{ed<;e_HL#;bn0#53|8a}Mk
zZyu7TjFIFz`zwBO^__FXiMfu=Jx4)0Y0B}LOov0k^m?=jP}(Kz8`}`4a|WCFANUw3
zD3yenHGmgIWmCA%ZaAeSI3WzrIw{^nj;+_RLs>`dq(pY&<wj@`+%3Kul+`?Ia<4`o
zT82i{JfL%wzaQ1*@b<zGQ2gmxpwCYS_T$8MC+|)?VWE2*Xzu(xLlfzRPpU%W@6UUO
zg&RAo58k~JNabh*dN^fOHdtHX!DTi0zBsaxj;weEy1id0WXOtZGnq7KabWn(-Tm=F
zx*AKHLoZpLVXjwldkO`CP>#ch&S?WUTO(%jm#yARY~_0)RrStBI=&?f8fcD_)!z)b
zN;b&4_bKwHj<!AWcR5#cVH5t5-FauvWVm)5vyouaNMP_CgZT^i*kff&90`Rim{VQZ
zYZ=ux9N&EvyTYctMzf0hXH)Aim?BC{!Xm2o(VvY$F64bm?k(p4GfK7p9mpGBx3ZH;
z+t_U!ZjScskW{2pe>)OuJvIwKo>Y2az%nw@?*2Ecv$0LKs>Oppw*O44Gy^7nsP`AJ
zJ@U785IjfIVdU{v1BQcFWphD|`u2{(S~nyBfm9ciRsvPq-bfq9MgwbP<M%%<D`}r;
zMk6EZY-~t}YJ#an%0@NKDaE~aeMI@0i*$+vGeW|CutSfXc8pJ;V0TYK2%ad&Iy!5<
z(R^$6ito<S5JJUF;O;?VB5U`g-X^<+yw`DRT}-{-8`Qhd2aA=I`HL=)jysr}eU|^3
zyYUhQonUhL2Oa-Z&@z?e|1TPxh@dCVx0-?ls3Lu!TluP9pJsFsY8`5vs<9G3?s_Nk
za%J2t7u&D<`M3fffLHn#4RE7fFu3J>L!0HQ9q4^@bo7U-hTmJYCKccMGA<ZY*9-f!
z|2wnFn0joUoZn#I5#>RE&(hY%zOBBie&{3GDZer7Jpm*?uV*!Q-eNW4QIxX$EC5JR
zqtg<Rp=Y|b(mU?ia~L=}%%o*O%lhigqbGlER)>zSH?O%>zcI^y-M6AZDNGNF;RYxX
z)cezVUU=l9d$pRfTT}Zwads{HJne`yE&dwhzCS8^u;%L(RBh%sLo=W_Vqzg&Ib(T3
zBj~o;sC>XI8`k=`kD_l53Jmbn?!Hp^eeSNMpk#g@n}<;Qs));uKU7O&NX%jGgy;tr
ze=*xc_UkCT6Od4EEbCsAWMaMd%*@g^X|+*fBCJ0<L#KEtHDTVMPBwBDfa><LC%2P#
zZ$qlk;hHGW;7=2fohy6e-52FPCrRPz9BKbBJ<a7XA&c>N6|^rK79k1=+5Ok52_S4X
zK3Qa&&Y90QMgh0fhG=gSXVYF)Q<C?sj;su+zzf{^?$u%qdUG<DmE!Z&X@s9UBui-9
zgdg^V6vuYYEw%bM?nF}^%H^BV1VN(^-PD%o-I8}jg7KFhI)xkZ>6Sd`(^kMM&iSXJ
zq+v{&eT96L)f1W9b?{bNZ)A&R!jP;WLQjsPi6RvzdGc;)atW#n^z`X+w5d*8FY2BP
zP!j|_Ew8HNN?rh#q<d*J(0I$`zF&R12}{iw;qX~DLc{A3fi^XT(dBIh6_fyUMdgLS
z9RK5A5>fhvpBv>w4r)7F%U`KpeJ`)3#Zg8;Hv};IY*NF1GWG%;IXi;z*zOzjjM<-G
zUOvr$hB|o#nnd!UXXm9HWZhe)NxQW&Qb;>PXL;MHIKHqVlkbjkM_IJXAD-)@I>vx6
zW}FiKxqwxBG!6gq6N@nmh_k=EC>jdl^mi}2X_$6MN@TjEL=fcREpCi_p!CN|&x9w=
z2sH7;#=v^FCce1RpS@pe`x?yY@f2HFX2NFM(_o6UNY2S*Voe^Cjg7Nsxd+C)-FjSt
zv+0{g53Lx@<t;%ZP$@!NeRWkeM4szL`SBtC*55xob|fE+?%&6<>k8b8pFJjr{uHar
zdwa7T`mUMyeK65_p3@E9t;9x-bKB-(Ie<WCp=RTAzi^9F<H5L_OLJP#9q8~@nqE5x
z<mz)OxTRYL@&^ID9DQ6DN}b3#tf!zf3N6ku)D@x`l~#gwS{Zt_ydni{sGWA`Yt-M{
zUadwUl>xT4v+Cak1%JB+{gA9Ee=D~!Lcji>%>)l0{=d)+aqtlSi_Z7I{9+U)m`eu|
z9?V<W$-KAGmt8iuGI9pUHRUNo8h;hx<J85~t>&H=INUyw04d^a`6ay3!y~el(IFPQ
zpRQAb8-L6jyRUwV+Zd73F1^i(NaOJ;#ydghS;bBSRlaw`N#Dx+OPf~j9|0>cVf7Wg
zWK8!~wC)3*RZ*uNnS6>8@bRrJNiKDyb@wjJ8jJ4~eNQD`encSB%5O?@2xOa){9}0L
z4l65_y4M10t824b>}PdLE$N=#39T4dfbdOU>0zajyH|k}nNqXGhT`!PRKP6RzqY)n
zzTUUoqm(30_h#h>_+UylrZghF=V=P()DzqvfIpr~-yksN+UpR+mJkMOV;~1-8;3@D
zK>7zAfOpwcFVu&aMfSImt<EtbvIob<TRAK-%yh!yONV}IOTZBY1&J&di-Rm!&O?3q
z&f|T{Iln#A#oI-adA-py12%F&<9o0UCKE0fz8`(G3={VxKSwGWnT2jxE&`G}tY(Zy
ziGj`ug;O<1!}}xU9$77_8e4U25o}_`VGs3KLwC0`JLbR}wb<^`D{kmlJ?A6i=AKs9
zs#v`K)U6y^OzZMFc0toWg2f4#lTeN+hC?ydKD9izlA`O0@lzsGLarS2ygAdnrUJtX
z0hL8ju~q5Cv!FRkE3qgsB(E?|XDDeiDwsr^dTwj*!U&UzU~HND<!F_uC019YI?iu<
zp1_pwiD})@BWSq*D&BfINp?w7zr4JnBFQP$Y69TGrFylx?E89Eb@b2wE6N2m`bQ?$
zj}eZM?{>#!qj3NLNLux_N;B13THwhUDCz^_5wd5t4lPn0{s=xE{sv^*xQ+?JA`G{p
zI&R$zcWStxFig!~e4KbPJ&beRJdu*-0vhjR009IHWMJ~LXY|KRKBBr;T9{<1WzmwK
z7EfqZx+heRmG@>geH(bkD2O`hPMvA`%E@kTp?r53<fW07boDaBD;*qiM8elGz>G3!
z8^>_toUI?!T?=Kj&8aQ4RIj9=x7jR^!wfYNv^|EtZY9IBHaXkkZrVvL!6gv}^@pa~
zZYr9|TWesFqLSlFE4)YhQPj>QsBg;qxBFi4<$#pEJh0Mh7%L&AnkfNoZ-m;pga&rT
zA`+N)_+|S58;f(mJ;qTGV+T*$Z+?>cmOA=4s^XJIQd7wsqb+=L)l{}dk=X7GXgTs2
zQgHOcPe-R~KeN@oXy<^(Qzgo!^%3|4_#u*+3)&mK_yNFsZpikINTf;s09Td@4FdZ;
zJrm)er>lK@L6tIz8Bybzd_gYl;oHeM-R4JQg>9z#Po*d#o+#}tdn)N`X{tPV<(SJI
zME)%8aeIk7-b;x*@`#{I=#3|Bw9r?+Ce+U@VG&O?ZDiF_J&XmdZuws427q0_ILnFd
zNl~^917Xv)yThoc05jSlw@c&7`TR<Fe18fjc#d{j(JX`Lb`Jnxibg5Y{Q;-%y%*`x
zuD3Rz$EI5YNs-{}osd3k;PPJR*hxI(cjT)5NzvAi>4lDVQ#uN(uAmdu)l<(TQ#tIm
z$s1hR8sO;th}zSzw;*8WCnQihbZbjnFCLEiGLo*C$piu#*n?$z9LbqbWNX8kK?FOV
z{{Rl$EW=Fn_Q7V=bvGJHC$_4TO3H5%rdcDV6TC?<iZ?j2J?>~HXdS)Ch%~i!nYP#U
ze?*#^b39d=vi%(NvPkDsxu%Y>uEZql1;gbK&|FC_$vIn6-O}AQEfa@P)J*v5>0KPN
zS5!$Xeyse{hP~1kG%&fuG!Q+bkaAHFUhCeT*tJ#WIc{{4&gzI_igvQDXqhu%l*<Tv
z81UC^dz|5rdzE8X(oHE>Req<M)?}rgDfd#ks$&ZcL$}UjkAB$8-N`Hf@_pwdK`VLb
z?Sk#CV6Us8bkj*BRgy+(B@oLzIPhhBA>JF_%r_2mNgEsYt;8KSN_5S(*Ie3KI+zU`
zql%I2xKxMJGAB63$erS5HjVBZT0p_U7~v5}$sg1E1R6rqXo`cvptsaRSxU&}k*<zm
zCjS5vcy{9A=Qxr{-MHsDDmK;9?K4kvyE(SkNCiCfam6)Evd0WH2Xyho$2_(+yn&Fw
zI|0}PMFQ5}(ajrgv{zD7*y4@~yKNN=?GngLkiq_mq?czS1KRFzGENp%9-Ftrsb6u9
z7sppEQ>r9;CU_5jtFkP)x!Qe(G+>MjXTK<jDBd)6p6M2+WmOYpZRVMj_29k3$BZ$}
z4LCe-;yA~35vlrfr>p9&H)$wc9ne%mR@&NnnPHidwi5tzUdIC8wK>cn5C|tZL{clo
z(>*mEuH{7ATYX-tf|i<KW{|neguU?{+qVZb&vS#p-MHsD0IsxMJ+M^hJEgLsiS;zM
zS30V+&r>Xt&nVgij+M?Y+yrsphkH94j9?-t9BDlTW42boa*CEoE8RTRE~%-imU$f{
zki{F^OWaAzB8|B014b~bXe|q6(zTV6TWO_<(6O{IiE3q-K~B<3VvIe`5wH{TTY<p$
z3=v4P{;RaV^j+4Eu`K%>Y_i%+9xRykSGzBdJF|j(^Ph@~xO9I>R@|;p&1-w$lh-A6
zKdsIo52}Ujsc?)xYfORf$p9R<p5&B80z1+lOIn}OZDA{@qkHOT=pdB1la@tMn6Z<=
zX?utx2PZk;EyoOPh9*YFhOw;;Ye!%QV2FdVA}It!Ktx0YL_kDD1VlhYL<B@YL_`Ec
aKtx0YL_kDD1sAD4Z-?^QPvRp)LI2qo5y15T

literal 0
HcmV?d00001

diff --git a/prd/public-courses/design/sidebar-active-state.png b/prd/public-courses/design/sidebar-active-state.png
new file mode 100644
index 0000000000000000000000000000000000000000..23cac038841a2bea4543105aa869b1905ecc01ce
GIT binary patch
literal 11711
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

literal 0
HcmV?d00001

diff --git a/prd/public-courses/implementation-plan.md b/prd/public-courses/implementation-plan.md
index 76a1d050..c706a490 100644
--- a/prd/public-courses/implementation-plan.md
+++ b/prd/public-courses/implementation-plan.md
@@ -1,40 +1,34 @@
 # Public Courses Implementation Plan
 
 ## Scope Lock
-1. **Course type**: Third option alongside Live Class and Self Paced
-2. **Content access**: Full lesson content public, quizzes/exercises gated
-3. **Conversion**: Soft nudges only, never hard modal on load
-4. **Progress**: localStorage for guests, auto-merge on signup
-5. **Landing page**: New "Public Courses" tab with distinct badge
-6. **URL**: Same URL structure for guests and authenticated users
-7. **SEO**: Public courses indexable with proper meta tags
+
+1. **Course type**: add `PUBLIC` to `COURSE_TYPE` enum, change default to `SELF_PACED`.
+2. **Everyone is a guest**: no auth-based branching on public courses.
+3. **Content access**: entire tree + per-item content readable without auth when `course.type === 'PUBLIC'` and `course.isPublished === true`.
+4. **Gating**: reuse existing `lesson.isUnlocked` / `exercise.isUnlocked`. Locked items show the creator callout in place of content.
+5. **Grading**: exercises on public courses are graded entirely client-side. Answer keys ship to the client. No server submissions.
+6. **Question types**: only `autoGradable` question types allowed in public courses. Enforced in UI picker, API writes, and type-conversion checks.
+7. **URLs**: `(org-site)/course/[courseSlug]` (tree) and `(org-site)/course/[courseSlug]/lesson/[itemSlug]` (content). Single `/lesson/` segment for both lessons and exercises.
+8. **Slugs**: new `slug` columns on `lesson` and `exercise`. Auto-generated from title, editable when course is `PUBLIC`. Unique per course across lesson + exercise.
+9. **Callout**: new `callout` JSONB on `course` with `{ title, description, buttonLabel, buttonUrl }`. Optional.
+10. **Out of scope**: analytics, donations, live viewer counts, feature flag, localStorage progress, directory tab, discussion, progress tracking of any kind.
 
 ## Delivery Phases
 
-### Phase A: Data Model & Course Type (Days 1-2)
-- Add `type` column to course table
-- Update validation schemas
-- Modify course creation wizard
+### Phase A — Data model + validation (Days 1–2)
+Schema changes, migrations, slug backfill, validation schemas.
 
-### Phase B: Anonymous Content Access (Days 3-5)
-- Make lesson endpoints work without auth for public courses
-- Add permission checks for gated features
-- Implement localStorage progress tracking
+### Phase B — API: public read endpoints + slug + callout (Days 3–5)
+Public-facing GET endpoints for the tree and item content; PATCH endpoints accept slug and callout; guard writes against non-auto-gradable question types.
 
-### Phase C: Conversion UX (Days 6-8)
-- Build nudge components (quiz gate, lesson complete, progress banner)
-- Implement guest mode UI indicators
-- Add signup flow with progress merge
+### Phase C — Creator UI (Days 6–8)
+Course type picker adds `PUBLIC`; question-type picker filters by `autoGradable` for public courses; slug field in lesson / exercise settings; callout settings panel.
 
-### Phase D: Landing Page (Days 9-10)
-- Add Public Courses tab to landing page
-- Create course type badges
-- Update course cards with type indicators
+### Phase D — Public course UI in Storybook (Days 9–12)
+**Storybook first.** Build every component with its stories in `packages/ui` + `packages/storybook` so desktop and mobile layouts can be reviewed in isolation before wiring up the routes. Includes: `PublicCourseShell`, `PublicCourseSidebar`, `PublicCourseSidebarRow`, `PublicCourseBottomNav`, `PublicCourseMobileSheet`, `PublicLessonView`, `PublicExerciseView`, `PublicCourseCallout`, plus a composed `PublicCoursePage` story.
 
-### Phase E: Analytics & Polish (Days 11-12)
-- Implement guest analytics tracking
-- Add conversion funnel metrics
-- Testing and edge cases
+### Phase E — Wire routes + polish (Days 13–14)
+Mount the storybook-ready components at `(org-site)/course/[slug]` and `(org-site)/course/[slug]/lesson/[itemSlug]`. SEO meta tags, canonical URLs, locked-state rendering, a11y pass, manual QA against the reference designs.
 
 ---
 
@@ -42,190 +36,164 @@
 
 | ID | Area | Task | Key Files | Dependencies | Done When |
 |----|------|------|-----------|--------------|-----------|
-| PC-A1 | DB | Add `type` enum to course schema | `packages/db/src/schema.ts` | None | Migration runs, `type` column exists with default 'SELF_PACED' |
-| PC-A2 | DB | Update course queries to include type | `packages/db/src/queries/course/course.ts` | PC-A1 | Queries return course type |
-| PC-A3 | Utils | Add course type validation | `packages/utils/src/validation/course/course.ts` | PC-A1 | Zod schema accepts 'LIVE_CLASS' \| 'SELF_PACED' \| 'PUBLIC' |
-| PC-A4 | API | Update course create/update routes | `apps/api/src/routes/course/course.ts` | PC-A3 | Can create course with type 'PUBLIC' |
-| PC-B1 | API | Make lesson content endpoint public-safe | `apps/api/src/routes/lesson/lesson.ts` | PC-A2 | Guests can GET lesson content for public courses |
-| PC-B2 | API | Add permission middleware for gated features | `apps/api/src/middleware/permission.ts` | PC-B1 | Quiz/exercise endpoints check auth for public courses |
-| PC-B3 | Dashboard | Implement localStorage progress tracking | `apps/dashboard/src/lib/utils/guest-progress.ts` | None | Can save/load guest progress from localStorage |
-| PC-B4 | Dashboard | Add guest mode detection | `apps/dashboard/src/lib/stores/auth.svelte.ts` | None | Store exposes `isGuest` computed property |
-| PC-C1 | Dashboard | Build quiz gate component | `apps/dashboard/src/lib/features/lesson/components/quiz-gate.svelte` | PC-B2 | Shows nudge when guest views quiz |
-| PC-C2 | Dashboard | Build lesson complete nudge | `apps/dashboard/src/lib/features/lesson/components/lesson-complete-nudge.svelte` | PC-B3 | Shows after lesson completion for guests |
-| PC-C3 | Dashboard | Build guest progress banner | `apps/dashboard/src/lib/features/lesson/components/guest-progress-banner.svelte` | PC-B3 | Shows after 2+ lessons viewed |
-| PC-C4 | Dashboard | Implement progress merge flow | `apps/dashboard/src/lib/features/auth/utils/merge-progress.ts` | PC-B3 | Merges localStorage to account on signup |
-| PC-C5 | Dashboard | Add guest mode UI indicators | `apps/dashboard/src/lib/features/ui/guest-indicator.svelte` | PC-B4 | Shows "Guest Mode" in header |
-| PC-D1 | Dashboard | Update landing page tabs | `apps/dashboard/src/routes/org/[slug]/landing/+page.svelte` | PC-A4 | Has Live / Self Paced / Public tabs |
-| PC-D2 | Dashboard | Create course type badge component | `apps/dashboard/src/lib/features/course/components/course-type-badge.svelte` | None | Shows Live/Self Paced/Public with colors |
-| PC-D3 | Dashboard | Update course cards | `apps/dashboard/src/lib/features/course/components/course-card.svelte` | PC-D2 | Cards show type badge |
-| PC-D4 | API | Add public courses list endpoint | `apps/api/src/routes/course/course.ts` | PC-A4 | `GET /courses/public` returns public courses |
-| PC-E1 | API | Add guest analytics tracking | `apps/api/src/routes/analytics/analytics.ts` | None | Fire-and-forget endpoint for guest events |
-| PC-E2 | Dashboard | Implement conversion tracking | `apps/dashboard/src/lib/utils/analytics/public-courses.ts` | PC-E1 | Tracks guest → auth conversions |
-| PC-E3 | API | Add live viewer tracking | `apps/api/src/services/analytics/live-viewers.ts` | PC-B1 | Tracks active sessions per course |
-| PC-E4 | Dashboard | Add live viewer count UI | `apps/dashboard/src/lib/features/course/components/live-viewer-count.svelte` | PC-E3 | Shows "X people learning now" |
-| PC-E5 | Testing | Write integration tests | `apps/api/tests/public-courses.test.ts` | All above | Core flows tested |
+| PC-A1 | DB | Add `PUBLIC` to `COURSE_TYPE` enum; change default to `SELF_PACED` | `packages/db/src/schema.ts`, new migration | None | Migration applied; enum accepts `PUBLIC`; default is `SELF_PACED` |
+| PC-A2 | DB | Add `callout JSONB NULL` column on `course` | `packages/db/src/schema.ts`, migration | PC-A1 | Column exists; type matches `CourseCallout` shape |
+| PC-A3 | DB | Add `slug VARCHAR NULL` to `lesson` and `exercise` | `packages/db/src/schema.ts`, migration | None | Columns exist on both tables |
+| PC-A4 | DB | Backfill slugs for existing `lesson` and `exercise` rows (kebab-case from title, collision-resolved per course) | Migration SQL or one-shot script | PC-A3 | All rows have non-null slug; uniqueness holds per course |
+| PC-A5 | DB | Follow-up migration making `lesson.slug` and `exercise.slug` `NOT NULL` | Migration | PC-A4 | Columns are `NOT NULL` |
+| PC-A6 | DB queries | Update lesson / exercise queries to return `slug` | `packages/db/src/queries/course/**/*.ts` | PC-A3 | Queries project the new column |
+| PC-A7 | Utils | Slug validator (Zod: kebab-case, 1–80 chars) | `packages/utils/src/validation/shared/slug.ts` | None | Schema exported and unit-tested |
+| PC-A8 | Utils | Callout validator (Zod for `{ title, description, buttonLabel, buttonUrl }`) | `packages/utils/src/validation/course/callout.ts` | None | Schema exported; URL validated |
+| PC-A9 | Utils | Extend course validation schemas to accept `type: 'PUBLIC'`, `callout`, and `slug` fields on lesson / exercise | `packages/utils/src/validation/course/**`, `lesson/**`, `exercise/**` | PC-A7, PC-A8 | Schemas accept new fields |
+| PC-A10 | Question types | Expose an `autoGradable` filter helper for pickers (if not already exported) | `packages/question-types/src/question-type-capabilities.ts` | None | Helper available via `isAutoGradableQuestionType` / registry filter |
+| PC-B1 | API service | `slugFromTitle(title, existingSlugsInCourse)` utility (generate + collision-resolve) | `apps/api/src/services/course/slug.ts` | PC-A7 | Pure function; unit tests cover collision cases |
+| PC-B2 | API service | On lesson / exercise create, auto-generate `slug` if not provided | `apps/api/src/services/course/lesson.ts`, `apps/api/src/services/exercise/exercise.ts` | PC-B1 | New items get slugs automatically |
+| PC-B3 | API service | On lesson / exercise update, accept slug edit; enforce per-course uniqueness across lessons + exercises | Same services | PC-B1 | Conflicting slugs are rejected with a clear error code |
+| PC-B4 | API service | Block non-auto-gradable question types on public courses (create + update) | `apps/api/src/services/exercise/exercise.ts` | PC-A10 | Attempts rejected with `QUESTION_TYPE_NOT_ALLOWED_IN_PUBLIC_COURSE` |
+| PC-B5 | API service | `convertCourseType(courseId, newType)` — when converting **to** `PUBLIC`, reject if any attached question is non-auto-gradable; return list of offenders | `apps/api/src/services/course/course.ts` | PC-A10 | Conversion blocked with actionable error; passes when all questions are auto-gradable |
+| PC-B6 | API service | Accept `callout` on course update | `apps/api/src/services/course/course.ts` | PC-A8 | Callout round-trips through create/update/read |
+| PC-B7 | API route | `GET /org-site/course/:courseSlug` (no auth) returns course + section tree + item metadata incl. slugs | `apps/api/src/routes/org-site/course.ts` (new file) | PC-A6 | Anonymous requests succeed when course is public + published; 404 otherwise |
+| PC-B8 | API route | `GET /org-site/course/:courseSlug/item/:itemSlug` (no auth) returns one of two shapes with discriminator `kind: 'lesson' \| 'exercise'` | Same router | PC-B7 | Returns lesson body or exercise payload (with answer keys) |
+| PC-B9 | API route | Register the new router in `app.ts`; ensure `authMiddleware` is NOT applied to this router | `apps/api/src/app.ts` | PC-B7, PC-B8 | Router mounted; smoke test as anonymous user succeeds |
+| PC-C1 | Dashboard | Add `PUBLIC` option to course type picker at course creation | `apps/dashboard/src/lib/features/course/components/course-create/*` (existing) | PC-A9 | Creator can pick `Public` and create a course with `type: 'PUBLIC'` |
+| PC-C2 | Dashboard | Filter question-type picker to `autoGradable` only when `course.type === 'PUBLIC'` | `apps/dashboard/src/lib/features/ui/question/constants.ts`, `packages/ui/src/custom/question-type-picker/*` | PC-A10 | Non-auto-gradable types are hidden from the picker in public courses |
+| PC-C3 | Dashboard | Add slug editor to lesson and exercise settings (visible only when course is `PUBLIC`) | Lesson / exercise settings components under `features/course/components/...` | PC-A7 | Creator can edit slug; server validation errors surface inline |
+| PC-C4 | Dashboard | Add **Callout Settings** panel on the course settings page (visible only when `PUBLIC`) | `apps/dashboard/src/lib/features/course/components/settings/callout-settings.svelte` (new) | PC-B6 | Creator can set / clear title, description, button label, button URL |
+| PC-C5 | Dashboard | Warn in UI when switching a course **to** `PUBLIC` with non-auto-gradable questions (surface server error nicely) | Course settings type picker | PC-B5 | Clear error modal listing offending items |
+| PC-D1 | UI | `PublicCourseShell` — responsive two-column layout. Desktop: sidebar + content. Mobile: hides sidebar, reserves bottom padding for the bottom bar. Accepts `sidebar`, `bottomNav`, `main` slots. | `packages/ui/src/custom/public-course/shell.svelte` | None | Component renders correctly at both breakpoints; bottom padding reserved on mobile |
+| PC-D2 | UI | `PublicCourseSidebarRow` — number badge + title + lock indicator. Variants: default, hover, active (uses `--primary`), locked. | `packages/ui/src/custom/public-course/sidebar-row.svelte` | None | Matches `design/sidebar-active-state.png`; no hard-coded orange |
+| PC-D3 | UI | `PublicCourseSidebar` — sections with muted headings and their rows. Per-section numbering resets across lessons + exercises interleaved by `order`. | `packages/ui/src/custom/public-course/sidebar.svelte` | PC-D2 | Sections render in order; numbering resets per section |
+| PC-D4 | UI | `PublicCourseBottomNav` — mobile-only fixed bottom bar with prev / center / next. Emits `onPrev`, `onNext`, `onCenterTap`. Disables prev / next at boundaries. | `packages/ui/src/custom/public-course/bottom-nav.svelte` | None | Three regions render; disabled states work; `--primary` used for accent |
+| PC-D5 | UI | `PublicCourseMobileSheet` — vaul-based drawer that slides up with the full sidebar tree inside. Drag-to-dismiss. Auto-closes on item tap. | `packages/ui/src/custom/public-course/mobile-sheet.svelte` (uses `@cio/ui/base/drawer`) | PC-D3 | Opens on center-tap; swipe-down dismisses; tapping a row navigates + closes |
+| PC-D6 | UI | `PublicLessonView` — video → section label → title → body → inline callout. Video slot omitted entirely when no video. | `packages/ui/src/custom/public-course/lesson-view.svelte` | PC-D8 | Matches `design/lesson-page-full.png` |
+| PC-D7 | UI | `PublicExerciseView` — renders exercise questions in client-grading mode. Uses existing question-type render contract. No server submit. | `packages/ui/src/custom/public-course/exercise-view.svelte` | None | Exercises grade locally; "you got X / Y" displayed; refresh resets state |
+| PC-D8 | UI | `PublicCourseCallout` — inline variant (below body) and full variant (replaces body for locked items). | `packages/ui/src/custom/public-course/callout.svelte` | None | Both variants render; button opens URL in new tab |
+| PC-D9 | Storybook | `PublicCourseSidebarRow` stories: default, hover, active, locked. | `packages/storybook/src/molecules/public-course/sidebar-row.stories.svelte` | PC-D2 | All four variants selectable |
+| PC-D10 | Storybook | `PublicCourseSidebar` stories: default, with locked item, many sections. | `...sidebar.stories.svelte` | PC-D3 | Three scenarios render correctly |
+| PC-D11 | Storybook | `PublicCourseBottomNav` stories: first item (prev disabled), middle item, last item (next disabled). | `...bottom-nav.stories.svelte` | PC-D4 | Three position states selectable |
+| PC-D12 | Storybook | `PublicCourseMobileSheet` stories: closed, open (default), open-at-section. | `...mobile-sheet.stories.svelte` | PC-D5 | Stories demonstrate drag-to-dismiss and row-tap close |
+| PC-D13 | Storybook | `PublicLessonView` stories: with video, without video, long body, short body. | `...lesson-view.stories.svelte` | PC-D6 | Four stories render |
+| PC-D14 | Storybook | `PublicExerciseView` stories: unanswered, mid-answer, after-grade. | `...exercise-view.stories.svelte` | PC-D7 | Three stories render; after-grade shows correct/incorrect marks |
+| PC-D15 | Storybook | `PublicCourseCallout` stories: inline, full (locked), no-callout fallback. | `...callout.stories.svelte` | PC-D8 | Three variants render |
+| PC-D16 | Storybook | **Composed** `PublicCoursePage` story — mounts `Shell` + `Sidebar` + `LessonView` + `BottomNav`. Use Storybook's viewport addon to switch desktop / tablet / mobile. This is the primary review surface for design sign-off. | `...public-course-page.stories.svelte` | PC-D1..PC-D8 | Desktop shows two columns (no bottom bar); mobile hides sidebar and shows bottom bar; center-tap opens sheet |
+| PC-D17 | Dashboard types | Frontend types for public tree + item responses (inferred from API). | `apps/dashboard/src/lib/features/public-course/utils/types.ts` (new feature folder) | PC-B7, PC-B8 | Typed responses usable in routes |
+| PC-D18 | Dashboard route | `(org-site)/course/[slug]/+layout.server.ts` — SSR fetch of the tree, exposes to child routes. | New file | PC-D17 | Tree available via layout data |
+| PC-D19 | Dashboard route | `(org-site)/course/[slug]/+page.svelte` — overview page linking into items by slug. | New file | PC-D18 | Renders overview; links use `itemSlug` |
+| PC-D20 | Dashboard route | `(org-site)/course/[slug]/lesson/[itemSlug]/+page.server.ts` — SSR fetch for item content. | New file | PC-B8 | Server-rendered content on first paint |
+| PC-D21 | Dashboard route | `(org-site)/course/[slug]/lesson/[itemSlug]/+page.svelte` — composes `Shell` + `Sidebar` + `LessonView` / `ExerciseView` + `BottomNav` + `MobileSheet`. | New file | PC-D16, PC-D20 | Page matches the composed Storybook story behavior |
+| PC-D22 | Dashboard | Locked-item rendering: when `isUnlocked === false`, swap body for the full-variant callout. | Inside `+page.svelte` or container component | PC-D8 | Locked items render the callout; sidebar shows lock icon |
+| PC-D23 | Dashboard | Wire prev / next navigation (both desktop keyboard shortcuts and mobile bottom bar) to `goto()` the next / previous `itemSlug`. | New util: `features/public-course/utils/navigation.ts` | PC-D4 | Arrow keys and bottom bar both navigate; disabled at boundaries |
+| PC-E1 | SEO | Set `<title>`, `<meta description>`, canonical, and OG tags on public lesson pages. | `+page.svelte` head blocks | PC-D21 | View-source shows correct tags |
+| PC-E2 | i18n | All new user-facing strings in `apps/dashboard/src/lib/utils/translations/en.json` (callout settings, locked-state fallback text, prev / next labels for a11y, etc.). | translations file | PC-C4, PC-D22 | No hardcoded English in new components |
+| PC-E3 | a11y | Keyboard + screen-reader review: sidebar rows are links, bottom-nav buttons have labels, sheet traps focus while open. | All new components | PC-D16, PC-D21 | `axe` passes on the composed story and on a live page |
+| PC-E4 | Tests | Service + route tests for public GET endpoints, slug uniqueness, non-auto-gradable rejection, type-conversion guard. | `apps/api/src/**/__tests__/public-course*.test.ts` | PC-B* | Tests pass |
 
 ---
 
-## API Changes
+## Schema Snippets
 
-### New Endpoints
+### Migration: enum + default + columns
 
-```typescript
-// GET /courses/public
-// List all public courses (no auth required)
-// Returns: Course[] filtered by type='PUBLIC' and status='PUBLISHED'
+```sql
+-- Add PUBLIC to the existing COURSE_TYPE enum
+ALTER TYPE "COURSE_TYPE" ADD VALUE IF NOT EXISTS 'PUBLIC';
 
-// POST /analytics/guest-event
-// Track guest activity (privacy-safe, no PII)
-// Body: { event: string, courseId: string, lessonId?: string, timestamp: number }
-// Returns: 204 No Content
+-- Change default
+ALTER TABLE "course" ALTER COLUMN "type" SET DEFAULT 'SELF_PACED';
+
+-- Callout
+ALTER TABLE "course" ADD COLUMN "callout" JSONB;
+
+-- Slugs (nullable first; NOT NULL after backfill)
+ALTER TABLE "lesson"   ADD COLUMN "slug" VARCHAR;
+ALTER TABLE "exercise" ADD COLUMN "slug" VARCHAR;
 ```
 
-### Modified Endpoints
+Backfill (pseudo):
 
-```typescript
-// POST /courses
-// Request body now accepts: type: 'LIVE_CLASS' | 'SELF_PACED' | 'PUBLIC'
-
-// GET /courses/:slug/lessons/:lessonId
-// Response now includes:
-// - requiresAuth: boolean (for interactive elements)
-// - userProgress: null | Progress (null for guests)
-
-// POST /courses/:slug/enroll
-// Auto-enrolls authenticated user to public course on first interaction
-// No-op if already enrolled
+```ts
+// For each course, iterate lessons + exercises ordered by order,
+// generate kebab-case slugs from titles, resolve collisions per course
+// by appending -2, -3, ... across the union of both tables.
 ```
 
+Follow-up migration:
+
+```sql
+ALTER TABLE "lesson"   ALTER COLUMN "slug" SET NOT NULL;
+ALTER TABLE "exercise" ALTER COLUMN "slug" SET NOT NULL;
+```
+
+(No per-course unique constraint in SQL; enforced in application code.)
+
 ---
 
-## Data Flow
+## API Response Shapes
 
-### Guest Viewing Public Course
-```
-1. Guest clicks course card on landing page
-2. Server checks: course.type === 'PUBLIC' → allow
-3. Lesson content rendered server-side (SEO-friendly)
-4. Client hydrates with guest mode indicators
-5. localStorage checked for saved progress
-6. Guest browses lessons freely
+### Tree response
 
-On quiz view:
-7. Client checks auth status
-8. Guest sees inline nudge: "Sign in to take quiz"
-9. Quiz questions visible but submit disabled
-
-On signup:
-10. Progress merged from localStorage
-11. Auto-enrolled in course
-12. Redirected back to last viewed lesson
-```
-
----
-
-## UI Components Needed
-
-### Course Type Badge
-```svelte
-<CourseTypeBadge type="PUBLIC" />
-// Shows: 🌐 Public (green/teal)
-```
-
-### Quiz Gate
-```svelte
-<QuizGate isGuest={true}>
-  <QuizContent questions={questions} />
-</QuizGate>
-// Renders nudge overlay when guest tries to interact
-```
-
-### Guest Progress Banner
-```svelte
-<GuestProgressBanner 
-  lessonsCompleted={3} 
-  totalLessons={12}
-  onSignUp={() => goto('/signup')}
-/>
-```
-
-### Landing Page Tabs
-```svelte
-<Tabs value={activeTab}>
-  <Tabs.List>
-    <Tabs.Trigger value="live">📅 Live Classes</Tabs.Trigger>
-    <Tabs.Trigger value="selfpaced">📚 Self Paced</Tabs.Trigger>
-    <Tabs.Trigger value="public">🌐 Public Courses</Tabs.Trigger>
-  </Tabs.List>
-</Tabs>
-```
-
----
-
-## localStorage Schema
-
-```typescript
-// Key: `cio_guest_progress`
-interface GuestProgressStore {
-  version: 1;
-  courses: {
-    [courseId: string]: {
-      lastVisitedLessonId: string;
-      completedLessons: string[];
-      totalTimeSpent: number; // seconds
-      firstVisit: string; // ISO date
-      lastVisit: string; // ISO date
-    }
-  };
-  sessionId: string; // anonymous fingerprint for analytics
+```ts
+GET /org-site/course/:courseSlug
+// 200
+{
+  success: true,
+  data: {
+    course: {
+      id: string;
+      slug: string;
+      title: string;
+      description: string | null;
+      bannerImage: string | null;
+      callout: {
+        title: string;
+        description: string;
+        buttonLabel: string;
+        buttonUrl: string;
+      } | null;
+    };
+    sections: Array<{
+      id: string;
+      title: string;
+      order: number;
+      items: Array<
+        | { kind: 'lesson';   id: string; slug: string; title: string; order: number; isUnlocked: boolean; hasVideo: boolean }
+        | { kind: 'exercise'; id: string; slug: string; title: string; order: number; isUnlocked: boolean }
+      >;
+    }>;
+  }
 }
+// 404 if course is not public or not published
 ```
 
----
+### Item response (single type, discriminator)
 
-## Permission Matrix
-
-| Endpoint | Guest (Public Course) | Auth (Public Course) | Any (Private Course) |
-|----------|----------------------|----------------------|---------------------|
-| GET /courses/:slug | ✅ | ✅ | ✅ (if enrolled) |
-| GET /lessons/:id | ✅ | ✅ | ✅ (if enrolled) |
-| GET /quizzes/:id | ✅ (no answers) | ✅ | ✅ (if enrolled) |
-| POST /quizzes/:id/submit | ❌ | ✅ | ✅ (if enrolled) |
-| POST /exercises/:id/submit | ❌ | ✅ | ✅ (if enrolled) |
-| GET /progress | ❌ | ✅ | ✅ (own progress) |
-| POST /discussions | ❌ | ✅ | ✅ (if enrolled) |
-
----
-
-## Analytics Events
-
-```typescript
-// Guest events (no userId, use sessionId)
-interface GuestEvent {
-  event: 
-    | 'public_course_viewed'
-    | 'public_lesson_started' 
-    | 'public_lesson_completed'
-    | 'public_quiz_viewed'
-    | 'conversion_prompt_shown'
-    | 'conversion_prompt_clicked'
-    | 'guest_signup_initiated';
-  courseId: string;
-  lessonId?: string;
-  sessionId: string;
-  timestamp: number;
-  metadata?: Record<string, unknown>;
-}
-
-// Conversion events (with userId)
-interface ConversionEvent {
-  event: 'guest_progress_merged' | 'public_course_enrolled';
-  userId: string;
-  courseId: string;
-  previousSessionId: string;
-  lessonsCompletedBeforeSignup: number;
-  timestamp: number;
+```ts
+GET /org-site/course/:courseSlug/item/:itemSlug
+// 200
+{
+  success: true,
+  data:
+    | {
+        kind: 'lesson';
+        id: string;
+        slug: string;
+        title: string;
+        sectionTitle: string;
+        isUnlocked: boolean;
+        video: { type: 'youtube' | 'upload' | 'generic' | 'google_drive'; link: string } | null;
+        body: string; // rich text / HTML
+      }
+    | {
+        kind: 'exercise';
+        id: string;
+        slug: string;
+        title: string;
+        sectionTitle: string;
+        isUnlocked: boolean;
+        questions: ExercisePayloadWithAnswerKeys; // uses question-types render contract
+      };
 }
+// 404 if course not public/published or item not found
 ```
 
 ---
@@ -233,76 +201,70 @@ interface ConversionEvent {
 ## Acceptance Criteria
 
 ### Phase A
-- [ ] Can create course with type 'PUBLIC' via API
-- [ ] Course type persists and returns in responses
-- [ ] Existing courses default to 'SELF_PACED'
+- [ ] `COURSE_TYPE` enum includes `PUBLIC`.
+- [ ] `course.type` default is `SELF_PACED` for new rows.
+- [ ] `course.callout` column exists and accepts null or full object.
+- [ ] `lesson.slug` and `exercise.slug` exist, backfilled, and `NOT NULL`.
+- [ ] Slug validator rejects invalid shapes (spaces, uppercase, >80 chars).
 
 ### Phase B
-- [ ] Guest can view lesson content for public courses
-- [ ] Guest cannot submit quizzes/exercises
-- [ ] localStorage saves guest progress
-- [ ] Progress loads from localStorage on return visit
+- [ ] `GET /org-site/course/:courseSlug` returns the tree anonymously for public + published courses.
+- [ ] `GET /org-site/course/:courseSlug/item/:itemSlug` returns lesson or exercise content with `kind` discriminator.
+- [ ] Anonymous request on a non-public or unpublished course returns 404.
+- [ ] Creating / updating a question with a non-auto-gradable type on a PUBLIC course is rejected with a clear error.
+- [ ] Converting a course to `PUBLIC` fails when non-auto-gradable questions exist; error lists the offending items.
+- [ ] Lesson / exercise PATCH accepts `slug` edits and enforces per-course uniqueness across both tables.
 
 ### Phase C
-- [ ] Quiz gate shows for guests viewing quizzes
-- [ ] Lesson complete nudge shows after finishing lesson
-- [ ] Progress banner shows after 2+ lessons
-- [ ] Signup merges localStorage progress to account
-- [ ] Post-signup redirects to correct lesson
+- [ ] Creator can select `PUBLIC` as a course type.
+- [ ] Question-type picker hides non-auto-gradable types when the course is `PUBLIC`.
+- [ ] Slug field is visible and editable on lesson / exercise settings (only when course is `PUBLIC`).
+- [ ] Callout settings panel is visible on the course settings page (only when `PUBLIC`) and round-trips the callout object.
 
 ### Phase D
-- [ ] Landing page has Public Courses tab
-- [ ] Course cards show correct type badge
-- [ ] Public courses list endpoint works without auth
+- [ ] Every new component in `packages/ui/src/custom/public-course/*` has at least one Storybook story (listed in PC-D9..PC-D16).
+- [ ] The composed `PublicCoursePage` story renders correctly at desktop, tablet, and mobile viewports (via Storybook's viewport addon).
+- [ ] Desktop: two columns, no bottom bar, sidebar visible.
+- [ ] Mobile: sidebar hidden, fixed bottom bar visible with prev / center / next regions; center tap opens a drag-dismissible bottom sheet containing the full sidebar tree; tapping a row navigates and closes the sheet.
+- [ ] Sidebar numbers reset per section; active state uses `--primary`; hover state matches the reference designs.
+- [ ] Locked items render the creator callout in place of content; sidebar shows a lock indicator.
+- [ ] Exercises grade entirely client-side; no network request on answer submit.
+- [ ] No hard-coded orange anywhere; all accents resolve to `--primary`.
+- [ ] `(org-site)/course/[slug]` renders the course overview.
+- [ ] `(org-site)/course/[slug]/lesson/[itemSlug]` matches the composed Storybook story on a live browser.
+- [ ] Anonymous visitors see the same experience regardless of auth state.
 
 ### Phase E
-- [ ] Guest events tracked (privacy-safe)
-- [ ] Conversion funnel metrics calculated
-- [ ] Live viewer count displays correctly
-- [ ] Donation button appears when enabled
-- [ ] Download permissions enforced correctly
-- [ ] Course type conversion works with grace period
-- [ ] Integration tests pass
-- [ ] No console errors in guest mode
+- [ ] View-source on a public lesson page shows the item title, description, canonical URL, and OG tags.
+- [ ] All user-facing strings are translation keys.
+- [ ] Keyboard navigation works on desktop (`←` / `→` move through items); bottom-nav buttons have a11y labels; the mobile sheet traps focus while open.
+- [ ] `axe` passes on both the composed Storybook story and a live public lesson page.
+- [ ] API tests pass.
 
 ---
 
 ## Verification Commands
 
 ```bash
-# Build all packages
 pnpm --filter @cio/utils build
+pnpm --filter @cio/question-types build
 pnpm --filter @cio/db build
 pnpm --filter @cio/api build
+pnpm --filter @cio/ui build
 pnpm --filter @cio/dashboard build
 
-# Run tests
-pnpm --filter @cio/api test public-courses
-
-# Type check
+pnpm --filter @cio/api test public-course
 pnpm --filter @cio/dashboard check
 ```
 
 ---
 
-## Rollout Plan
-
-1. **Feature Flag**: Add `PUBLIC_COURSES_ENABLED` env var
-2. **Internal Testing**: Enable for team org only
-3. **Beta Users**: Select 5 orgs to test
-4. **Full Rollout**: Remove feature flag
-5. **Announcement**: Blog post + in-app notification
-
----
-
-## Risk Mitigation
+## Risks & Mitigations
 
 | Risk | Mitigation |
 |------|------------|
-| Content scraping | Rate limiting on lesson endpoints; consider Cloudflare bot detection |
-| Live viewer accuracy | Use heartbeat every 2 min, expire after 5 min of inactivity |
-| Donation fraud | Validate Stripe link format; no server-side payment processing |
-| SEO duplicate content | Canonical URLs; no separate /public/ path |
-| localStorage quota exceeded | Max 10 courses tracked; LRU eviction |
-| Guest analytics spam | Rate limit analytics endpoint; validate sessionId format |
-| Conversion nudge fatigue | Frequency caps; dismissible with "Don't show again" |
+| Slug collisions during backfill | Two-pass backfill script: generate all candidates, resolve collisions per course, then write. Wrap in a transaction and dry-run in staging first. |
+| Answer keys shipped to the client | Accepted trade-off (public courses are marketing surfaces). Documented in the PRD. |
+| Converting a course with many non-auto-gradable questions to `PUBLIC` is painful | Server error lists every offending question with its exercise + section so the creator can fix them in one pass. |
+| SEO duplicate content between `(app)/courses/[id]/lessons/[lessonId]` and the new public URL | Canonical URL on public pages points at the `(org-site)` URL. `(app)` URLs remain auth-gated and are not indexed. |
+| Hard-coded orange in screenshots leaking into the build | Explicit rule in the PRD: all accents use `--primary`. Reviewer should grep new components for raw orange hex values. |
diff --git a/prd/study-from-source/README.md b/prd/study-from-source/README.md
new file mode 100644
index 00000000..f051ce8e
--- /dev/null
+++ b/prd/study-from-source/README.md
@@ -0,0 +1,914 @@
+---
+name: Study from Source
+overview: Add a Study from Source course type and source-study activity type that convert documents, webpages, and pasted text into structured learning experiences with AI-generated lessons, checkpoints, quizzes, and completion evidence.
+todos:
+  - id: prd-review
+    content: Finalize scope, naming, source limits, and pricing gates
+    status: pending
+  - id: source-model
+    content: Add persistent source, extraction, and source segment data model
+    status: pending
+  - id: course-type
+    content: Add STUDY_FROM_SOURCE course type and course creation flow
+    status: pending
+  - id: activity-type
+    content: Add source-study activity type for smaller document or webpage readings
+    status: pending
+  - id: ingestion
+    content: Implement upload, URL fetch, pasted text ingestion, extraction, and source snapshots
+    status: pending
+  - id: ai-planning
+    content: Implement AI outline generation, lesson breakdown, and teacher review workflow
+    status: pending
+  - id: publish
+    content: Publish approved generated outlines into lessons and exercises
+    status: pending
+  - id: learner-reader
+    content: Build learner source reader with progress, active-time, and completion tracking
+    status: pending
+  - id: assessments
+    content: Generate source-grounded quiz questions and completion rules
+    status: pending
+  - id: reporting
+    content: Add teacher progress, completion evidence, and source coverage reports
+    status: pending
+isProject: false
+---
+
+# Study from Source PRD
+
+## Status
+
+- Draft
+
+## Date
+
+- April 30, 2026
+
+## Purpose
+
+Add **Study from Source** as both:
+
+1. a **course type** for turning larger source material into a full course with AI-generated lessons and assessments
+2. an **activity type** for assigning a smaller source, such as a blog post or short PDF, inside an existing course and verifying that learners studied it
+
+The product should support uploaded documents, webpage links, and pasted text. The AI agent should analyze the source, break it into teachable units, generate testable checkpoints, and produce learner-facing content that can be reviewed before publish.
+
+Detailed engineering breakdown: [implementation-plan.md](/Users/rotimibest/_pros/classroomio/prd/study-from-source/implementation-plan.md).
+
+## Problem Statement
+
+Teachers, trainers, and operators often start from existing material: policies, manuals, papers, webpages, blog posts, SOPs, and handbooks. Today they must manually convert that material into lessons and exercises, and there is no strong way to verify that a learner actually studied a standalone source.
+
+Current gaps:
+
+- no dedicated course type for source-derived learning
+- no source ingestion model that handles documents, URLs, and pasted text under one workflow
+- no persistent source segmentation or source-to-lesson traceability
+- no AI workflow that proposes lessons from source material before creating course content
+- no smaller source-study activity for "read this and prove you understood it"
+- no completion evidence that combines source engagement, quiz performance, and optional attestation
+
+## Executive Summary
+
+**Study from Source** lets a teacher provide source material and choose one of two paths:
+
+| Path | Best For | Output |
+| --- | --- | --- |
+| `STUDY_FROM_SOURCE` course type | Long documents, manuals, policy packs, research papers, detailed webpages, documentation hubs | A full self-paced course with generated lessons, optional sections, quizzes, and source coverage reports |
+| Source-study activity type | Short PDFs, articles, policy updates, blog posts, one-off reading assignments | One activity that displays the source and generates a quiz covering the key subject matter |
+
+Both paths reuse the same source ingestion, extraction, AI analysis, quiz generation, and completion evidence primitives.
+
+## Product Positioning
+
+### Course Type
+
+The course type is for cases where the source itself should become the course.
+
+Examples:
+
+- "Turn this onboarding handbook into a course."
+- "Make a course from this security policy."
+- "Break this research paper into lessons with checks for understanding."
+- "Create training from this webpage documentation."
+
+The AI output is a reviewable course plan:
+
+- course title and description
+- lessons generated from source chapters or inferred topics
+- optional sections if the source is large enough
+- lesson content summaries or explanations
+- lesson-level quizzes or checkpoints
+- final quiz if configured
+- source coverage map
+
+### Activity Type
+
+The activity type is for cases where the source belongs inside another course.
+
+Examples:
+
+- "Read this blog post and answer questions."
+- "Review this updated policy PDF."
+- "Study this external article before the next lesson."
+
+The AI output is one learner activity:
+
+- source viewer
+- optional short summary
+- generated quiz covering the key subject matter
+- completion rule based on engagement and score
+- teacher-facing evidence that the learner opened, progressed through, and passed the check
+
+## Goals
+
+1. Add a first-class `STUDY_FROM_SOURCE` course type.
+2. Add a reusable source-study activity type for smaller sources.
+3. Support source inputs from uploaded files, webpage URLs, and pasted text.
+4. Preserve source snapshots so generated content remains auditable even if a webpage changes.
+5. Generate an editable course plan before creating lessons or exercises.
+6. Create lessons from source segments, not from unstructured whole-document prompts.
+7. Generate quiz questions that are grounded in specific source segments.
+8. Track learner engagement with the source and completion evidence.
+9. Keep teacher review mandatory before publishing AI-generated course content in v1.
+10. Reuse existing lessons, sections, exercises, submissions, and course progress where possible.
+
+## Non-Goals (v1)
+
+- Proctored exams or identity verification
+- Full plagiarism detection for written reflections
+- Perfect extraction of complex tables, formulas, scanned PDFs, or diagrams
+- Multi-source knowledge graph or semantic search across an entire org
+- Real-time collaborative editing of generated outlines
+- Automatic publishing without teacher review
+- Full website crawling beyond explicitly provided URLs
+- Video ingestion, YouTube transcript ingestion, or podcast/audio ingestion
+- Compliance retake/expiry lifecycle; that belongs to the compliance course type
+
+## Core Product Decisions
+
+1. The feature is named **Study from Source**.
+2. The course type should be `STUDY_FROM_SOURCE`.
+3. The activity type should be source-study, not document-study, because URLs and pasted text are first-class inputs.
+4. Course generation creates lessons by default. Sections are optional and only used when the source naturally needs grouping.
+5. The activity type does not create multiple lessons. It displays one source and generates one quiz/checkpoint over the key subject matter.
+6. AI-generated output is always draft/reviewable before learner-facing publish in v1.
+7. Source snapshots and extracted text are persisted for auditability.
+8. Completion should be based on evidence, not only an "opened" event.
+
+## Current-State Audit
+
+| Capability | Current State | Notes |
+| --- | --- | --- |
+| Course types | `SELF_PACED`, `LIVE_CLASS`, `COMPLIANCE` | Add `STUDY_FROM_SOURCE` to the existing enum |
+| Course content | Sections, lessons, and exercises exist | Course type can publish into current content model |
+| Course grouping | Course metadata supports `isContentGroupingEnabled` | Use sections only when needed |
+| Lesson documents | Lessons already store document attachments | Useful for source display, but not enough for source segmentation |
+| Assets | Asset manager supports `document` kind | Reuse for uploaded source files |
+| AI assistant document upload | Exists for course chat uploads | Useful reference, but Study from Source needs persistent source records |
+| AI course assistant PRD | Covers in-course chat and document-to-course planning | Study from Source should reuse patterns but has a dedicated product surface |
+| Course import draft schema | Exists for structured sections, lessons, lesson languages, and exercises | Good foundation for publish pipeline |
+| Exercises/submissions | Existing exercises and auto-grading exist | Reuse for generated quizzes where possible |
+| Compliance course type | Already exists in schema/code | Distinct from Study from Source; only combine later if needed |
+
+Data references:
+
+- [packages/db/src/schema.ts](/Users/rotimibest/_pros/classroomio/packages/db/src/schema.ts)
+- [packages/utils/src/validation/course-import/course-import.ts](/Users/rotimibest/_pros/classroomio/packages/utils/src/validation/course-import/course-import.ts)
+- [apps/api/src/services/agent/document.ts](/Users/rotimibest/_pros/classroomio/apps/api/src/services/agent/document.ts)
+- [apps/api/src/routes/agent/upload.ts](/Users/rotimibest/_pros/classroomio/apps/api/src/routes/agent/upload.ts)
+- [prd/ai-course-assistant [DONE]/README.md](/Users/rotimibest/_pros/classroomio/prd/ai-course-assistant%20[DONE]/README.md)
+- [prd/compliance-training-platform [DONE]/README.md](/Users/rotimibest/_pros/classroomio/prd/compliance-training-platform%20[DONE]/README.md)
+
+## User Personas
+
+### Persona A: Teacher
+
+Wants to turn a PDF, article, or textbook chapter into lessons and quizzes without manually copying content into the course builder.
+
+### Persona B: Training Operator
+
+Wants employees to study policies, handbooks, SOPs, and process docs, then prove they understood the material.
+
+### Persona C: Course Creator
+
+Wants to convert long-form source material into a polished self-paced course with clear lessons, objectives, and assessments.
+
+### Persona D: Learner
+
+Wants a clear reading/study experience with short checks for understanding and transparent progress.
+
+## Jobs To Be Done
+
+1. Upload or link source material and turn it into structured learning content.
+2. Break source content into sensible lessons.
+3. Generate testable questions from the important points in the source.
+4. Review and edit AI-generated structure before publishing.
+5. Assign a small source reading inside an existing course.
+6. Verify that a learner engaged with the source and understood key material.
+7. See which source parts are covered by lessons and quizzes.
+
+## Source Types
+
+### Supported in v1
+
+| Source Type | Input | Requirements |
+| --- | --- | --- |
+| File upload | PDF, DOCX, PPTX, TXT, Markdown | File stored as asset where possible; extracted text persisted |
+| Webpage URL | Single URL | Fetch server-side, extract readable article/body content, store snapshot |
+| Pasted text | Plain text or Markdown | Store directly with source metadata |
+
+### Out of Scope for v1
+
+- website crawling across many pages
+- private webpages requiring login
+- scanned PDF OCR
+- Google Drive document import
+- YouTube/video transcript ingestion
+- ZIP packages or SCORM
+
+## Source Lifecycle
+
+```
+Draft source created
+  ↓
+File uploaded / URL fetched / text pasted
+  ↓
+Text extracted and normalized
+  ↓
+Source segmented
+  ↓
+AI generates outline or activity quiz
+  ↓
+Teacher reviews and edits
+  ↓
+Teacher publishes
+  ↓
+Learners study source-derived content
+  ↓
+Progress, quiz score, and completion evidence recorded
+```
+
+## Feature Requirements
+
+### 1. Shared Source Model
+
+#### Purpose
+
+Create one persistence model for documents, webpages, and pasted text so both the course type and activity type use the same ingestion and AI pipeline.
+
+#### Requirements
+
+**SFS-SRC-1: Source Table**
+
+Add a `study_source` table:
+
+| Field | Type | Description |
+| --- | --- | --- |
+| `id` | uuid | Source ID |
+| `organizationId` | uuid | Owning org |
+| `courseId` | uuid nullable | Course associated with source |
+| `lessonId` | uuid nullable | Set when source is used by one lesson/activity |
+| `activityId` | uuid nullable | Set if a separate activity table is introduced |
+| `createdByProfileId` | uuid | Creator |
+| `type` | enum | `file`, `webpage`, `text` |
+| `status` | enum | `draft`, `extracting`, `ready`, `failed`, `archived` |
+| `title` | text | Display title |
+| `sourceUrl` | text nullable | Original webpage URL |
+| `assetId` | uuid nullable | Uploaded asset reference |
+| `mimeType` | text nullable | Source MIME type |
+| `rawText` | text | Extracted or pasted text |
+| `normalizedText` | text | Cleaned learner/AI text |
+| `wordCount` | integer | Source word count |
+| `metadata` | jsonb | Fetch/extraction metadata |
+| `createdAt` / `updatedAt` | timestamp | Audit fields |
+
+**SFS-SRC-2: Source Segment Table**
+
+Add a `study_source_segment` table:
+
+| Field | Type | Description |
+| --- | --- | --- |
+| `id` | uuid | Segment ID |
+| `sourceId` | uuid | Parent source |
+| `parentSegmentId` | uuid nullable | Optional hierarchy |
+| `order` | integer | Segment ordering |
+| `kind` | enum | `chapter`, `section`, `paragraph`, `page`, `inferred_topic` |
+| `title` | text nullable | Heading or inferred title |
+| `text` | text | Segment text |
+| `startLocator` | jsonb | Page, heading, text offset, URL fragment |
+| `endLocator` | jsonb | Page, heading, text offset, URL fragment |
+| `metadata` | jsonb | AI/extraction details |
+
+**SFS-SRC-3: Generated Draft Tables**
+
+Add `study_source_generation_draft` for reviewable AI output before publish:
+
+| Field | Type | Description |
+| --- | --- | --- |
+| `id` | uuid | Draft ID |
+| `sourceId` | uuid | Primary source |
+| `courseId` | uuid nullable | Existing course for activity generation |
+| `lessonId` | uuid nullable | Existing lesson if regenerating an activity |
+| `createdByProfileId` | uuid | Creator |
+| `kind` | enum | `course_outline`, `activity_quiz`, `lesson_regeneration`, `quiz_regeneration` |
+| `status` | enum | `draft`, `approved`, `publishing`, `published`, `failed`, `archived` |
+| `inputSettings` | jsonb | Generation settings |
+| `output` | jsonb | Proposed outline, lesson content, questions, and mappings |
+| `warnings` | jsonb | Truncation, extraction, or quality warnings |
+| `publishedCourseId` | uuid nullable | Created course when kind is `course_outline` |
+| `publishedLessonId` | uuid nullable | Created/updated lesson when relevant |
+| `publishedExerciseId` | uuid nullable | Created quiz/exercise when relevant |
+| `createdAt` / `updatedAt` | timestamp | Audit fields |
+
+This keeps AI output reviewable and versioned before it touches learner-facing content.
+
+**SFS-SRC-4: Source Coverage Table**
+
+Add `study_source_coverage` to map source segments to generated content:
+
+| Field | Type | Description |
+| --- | --- | --- |
+| `id` | uuid | Coverage ID |
+| `sourceId` | uuid | Source |
+| `segmentId` | uuid | Source segment |
+| `courseId` | uuid | Course |
+| `lessonId` | uuid nullable | Generated lesson |
+| `exerciseId` | uuid nullable | Generated exercise |
+| `questionId` | uuid nullable | Generated question |
+| `coverageType` | enum | `lesson_content`, `quiz_question`, `summary`, `reflection_prompt` |
+| `confidence` | numeric nullable | AI/source mapping confidence |
+| `createdAt` | timestamp | Audit field |
+
+**SFS-SRC-5: Source Snapshot**
+
+For webpage sources:
+
+- store the fetched URL, final resolved URL, HTTP status, content type, fetched timestamp, and readable extracted content
+- do not rely on live webpage content for learner playback or quiz auditing
+- show the original URL as the source citation
+
+**SFS-SRC-6: Source Limits**
+
+Initial limits:
+
+- uploaded file max: 10MB for Study from Source
+- extracted text max per source: 150,000 characters in v1
+- URL fetch timeout: 15 seconds
+- URL max response size: 10MB
+- one URL per source in v1
+
+If the source is truncated, the UI must make that visible before generation.
+
+### 2. Study from Source Course Type
+
+#### Purpose
+
+Let teachers create a complete course from one or more source materials.
+
+#### Requirements
+
+**SFS-COURSE-1: Course Type Enum**
+
+- Add `STUDY_FROM_SOURCE` to `COURSE_TYPE`
+- It behaves like a self-paced course for learner delivery, progress, and exercises
+- It carries extra source-generation metadata in a dedicated table or course metadata
+
+**SFS-COURSE-2: Course Creation Entry**
+
+Add a course creation path:
+
+```
+New Course -> Study from Source
+```
+
+The teacher can:
+
+- upload a source file
+- enter a webpage URL
+- paste source text
+- add a title and optional prompt/instructions
+- choose whether the AI should create lessons only or sections + lessons
+- choose quiz strategy: per lesson, final quiz only, or both
+
+**SFS-COURSE-3: AI Outline Generation**
+
+The system generates a proposed plan:
+
+```json
+{
+  "courseTitle": "Workplace Security Handbook",
+  "courseDescription": "A source-based training course on core security policies.",
+  "structure": {
+    "usesSections": true,
+    "sections": [
+      {
+        "title": "Access Control",
+        "lessons": [
+          {
+            "title": "Password and MFA Requirements",
+            "summary": "Explains password standards, MFA enrollment, and account recovery.",
+            "sourceSegmentIds": ["segment_1", "segment_2"],
+            "learningObjectives": [
+              "Explain why MFA is required",
+              "Identify acceptable password practices"
+            ],
+            "assessment": {
+              "questionCount": 4,
+              "questionTypes": ["radio", "checkbox", "short_answer"]
+            }
+          }
+        ]
+      }
+    ]
+  }
+}
+```
+
+**SFS-COURSE-4: Lessons Are the Primary Output**
+
+- The course type creates lessons as the primary learner-facing units
+- Sections are optional
+- If the source has natural chapters or is long enough to need grouping, the AI should propose sections
+- If the source is moderate length, the AI should create a flat lesson list
+
+**SFS-COURSE-5: Teacher Review**
+
+Before publish, the teacher can:
+
+- rename course, sections, and lessons
+- merge or split lessons
+- remove generated lessons
+- adjust quiz count and passing score
+- regenerate a lesson or quiz
+- view source segments behind each lesson
+- approve generation into real course content
+
+**SFS-COURSE-6: Publish Behavior**
+
+Publishing creates:
+
+- course shell with type `STUDY_FROM_SOURCE`
+- optional sections
+- lessons with generated content in lesson language content
+- exercises attached to lessons or course as configured
+- questions/options using existing exercise models
+- source coverage records mapping source segments to lessons and questions
+
+**SFS-COURSE-7: Completion Rule**
+
+Default completion for Study from Source courses:
+
+- all required lessons completed
+- required generated quizzes passed
+- optional final attestation checked if enabled
+
+The course should reuse existing self-paced completion and auto-grading behavior where possible.
+
+### 3. Source-Study Activity Type
+
+#### Purpose
+
+Let a teacher add one source reading/checkpoint inside an existing course without generating a whole course.
+
+#### Product Difference From Course Type
+
+| Capability | Course Type | Activity Type |
+| --- | --- | --- |
+| Input size | Larger source | Smaller source |
+| Output | Multiple lessons, optional sections, quizzes | One activity with source viewer and quiz |
+| Course structure change | Creates a course structure | Adds one item inside an existing course |
+| AI breakdown | Break into lessons | Extract key subject matter and quiz it |
+| Learner experience | Move through generated lessons | Read source, answer quiz, complete |
+
+#### Requirements
+
+**SFS-ACT-1: Activity Entry**
+
+Add a content creation option:
+
+```
+Add Content -> Study from Source
+```
+
+This creates a source-study activity in the current course, either:
+
+- as a specialized lesson variant in v1, or
+- as a new content type if the content model is expanded beyond section/lesson/exercise
+
+Recommendation for v1:
+
+- implement as a lesson with source-study metadata and an attached generated exercise
+- avoid adding a fourth content type until the product needs a generalized activity model
+- persist activity-specific configuration in a `study_source_activity` table linked to `lessonId`, `sourceId`, and generated `exerciseId`
+
+Suggested `study_source_activity` fields:
+
+| Field | Type | Description |
+| --- | --- | --- |
+| `id` | uuid | Activity ID |
+| `courseId` | uuid | Course |
+| `lessonId` | uuid | Lesson that renders the activity |
+| `sourceId` | uuid | Source used by the activity |
+| `exerciseId` | uuid nullable | Generated quiz/checkpoint |
+| `title` | text | Learner-facing activity title |
+| `status` | enum | `draft`, `published`, `archived` |
+| `requiredProgressPercent` | integer | Default 90 |
+| `minimumActiveTimeSeconds` | integer nullable | Optional engagement requirement |
+| `passingScorePercent` | integer | Default 80 |
+| `requiresAttestation` | boolean | Whether learner must attest |
+| `settings` | jsonb | Reader display and generation settings |
+| `createdAt` / `updatedAt` | timestamp | Audit fields |
+
+**SFS-ACT-2: Activity Source Input**
+
+Teacher can:
+
+- upload a file
+- paste a webpage URL
+- paste text
+- set title
+- choose question count
+- choose passing score
+- enable or disable attestation
+
+**SFS-ACT-3: AI Output**
+
+The AI generates:
+
+- short source summary for teacher review
+- key subject matter list
+- quiz questions covering the source
+- optional reflection prompt
+- source coverage map for each question
+
+The activity does not break the source into multiple lessons.
+
+**SFS-ACT-4: Learner Display**
+
+Learner sees:
+
+- source title and metadata
+- embedded source viewer or normalized readable text
+- progress indicator
+- generated quiz
+- optional attestation checkbox
+
+For webpage sources, show the stored snapshot and link to the original source.
+
+**SFS-ACT-5: Completion Rule**
+
+Default completion:
+
+- source opened
+- minimum source progress reached, default 90%
+- minimum active study time reached, default disabled for v1 unless configured
+- quiz submitted and passed
+- attestation checked if enabled
+
+### 4. AI Generation Requirements
+
+#### Purpose
+
+Ensure AI output is source-grounded, reviewable, and useful for learning.
+
+#### Requirements
+
+**SFS-AI-1: Segment-First Generation**
+
+The AI must operate on source segments, not only a full raw text blob. The pipeline:
+
+1. extract text
+2. normalize text
+3. segment source
+4. generate outline or activity quiz from segments
+5. store mappings from generated output back to segments
+
+**SFS-AI-2: Grounding**
+
+Each generated lesson and question should reference source segment IDs.
+
+This enables:
+
+- source coverage reports
+- teacher review of generated claims
+- future regeneration of a single lesson/question
+- auditability when a learner disputes a quiz item
+
+**SFS-AI-3: Question Types**
+
+v1 should generate only question types that can be reliably auto-graded:
+
+- radio
+- checkbox
+- true/false if available in the question-type system
+- short answer only if answer matching/grading is reliable enough
+
+Manual grading question types are optional and should be disabled by default.
+
+**SFS-AI-4: Quality Controls**
+
+The generation prompt should require:
+
+- no questions that rely on unstated assumptions
+- no questions about trivial wording unless configured
+- answer explanations for teacher review
+- no unsupported citations
+- direct source segment mapping for every question
+
+**SFS-AI-5: Regeneration**
+
+Teachers can regenerate:
+
+- entire course outline
+- one lesson
+- one lesson quiz
+- one activity quiz
+
+Regeneration preserves the source record and creates a new generated draft version.
+
+### 5. Learner Tracking and Evidence
+
+#### Purpose
+
+Track enough behavior to support a reasonable "studied it" claim without pretending that passive reading telemetry proves comprehension.
+
+#### Requirements
+
+**SFS-TRACK-1: Study Events**
+
+Add `study_source_event` table:
+
+| Event | Description |
+| --- | --- |
+| `opened` | Learner opened source/activity |
+| `segment_viewed` | Learner viewed a source segment |
+| `progress_updated` | Learner reached a progress threshold |
+| `active_time_recorded` | Active time heartbeat |
+| `quiz_started` | Quiz opened |
+| `quiz_submitted` | Quiz submitted |
+| `attestation_checked` | Learner confirmed they studied the source |
+| `completed` | Completion rule satisfied |
+
+**SFS-TRACK-2: Progress Aggregates**
+
+Add `study_source_progress` table:
+
+| Field | Description |
+| --- | --- |
+| `sourceId` | Source |
+| `courseId` | Course |
+| `lessonId` | Lesson/activity if applicable |
+| `exerciseId` | Generated quiz if applicable |
+| `profileId` | Learner |
+| `progressPercent` | Source progress |
+| `activeTimeSeconds` | Active foreground time |
+| `quizScorePercent` | Latest or best quiz score |
+| `completedAt` | Completion timestamp |
+| `evidence` | JSON summary of completion signals |
+
+**SFS-TRACK-3: Evidence Language**
+
+Teacher-facing UI should say:
+
+- "Completed study requirements"
+- "Passed source check"
+- "Viewed 92% of source and scored 85%"
+
+Avoid claiming:
+
+- "guaranteed they read every word"
+- "proved they understood everything"
+
+### 6. Reporting
+
+#### Requirements
+
+**SFS-REPORT-1: Course Source Coverage**
+
+For Study from Source courses, show:
+
+- total source segments
+- segments covered by lessons
+- segments covered by quiz questions
+- uncovered segments
+- generated lessons per source
+
+**SFS-REPORT-2: Learner Completion Report**
+
+For both course and activity paths, show:
+
+- learner
+- status
+- source progress
+- active time
+- quiz score
+- attempts
+- completion timestamp
+- attestation status
+
+**SFS-REPORT-3: Export**
+
+Support CSV export of learner completion evidence.
+
+## UX Flows
+
+### Flow 1: Create Study from Source Course
+
+```
+1. Teacher clicks New Course
+2. Selects Study from Source
+3. Adds source: upload, URL, or pasted text
+4. Chooses generation settings
+5. System extracts source and shows status
+6. AI proposes course outline
+7. Teacher reviews, edits, and approves
+8. System creates course, lessons, and exercises
+9. Teacher previews and publishes course
+```
+
+### Flow 2: Add Source-Study Activity
+
+```
+1. Teacher opens existing course content editor
+2. Clicks Add Content
+3. Selects Study from Source
+4. Adds short source
+5. Chooses question count and passing score
+6. AI generates source summary and quiz
+7. Teacher reviews and publishes
+8. Learner studies source and completes quiz
+9. Teacher sees completion evidence
+```
+
+### Flow 3: Learner Completes Activity
+
+```
+1. Learner opens source-study activity
+2. Source viewer records opened event
+3. Learner progresses through content
+4. Learner answers generated quiz
+5. System grades quiz
+6. If completion rule is satisfied, activity is complete
+7. Completion evidence appears in teacher report
+```
+
+## Proposed API Surface
+
+### Source Management
+
+- `POST /study-sources`
+- `GET /study-sources/:sourceId`
+- `POST /study-sources/:sourceId/extract`
+- `POST /study-sources/:sourceId/segment`
+- `DELETE /study-sources/:sourceId`
+
+### Course Type Generation
+
+- `POST /course/study-from-source/drafts`
+- `GET /course/study-from-source/drafts/:draftId`
+- `PUT /course/study-from-source/drafts/:draftId`
+- `POST /course/study-from-source/drafts/:draftId/regenerate`
+- `POST /course/study-from-source/drafts/:draftId/publish`
+
+### Activity Generation
+
+- `POST /course/:courseId/source-study-activities`
+- `GET /course/:courseId/source-study-activities/:activityId`
+- `PUT /course/:courseId/source-study-activities/:activityId`
+- `POST /course/:courseId/source-study-activities/:activityId/generate-quiz`
+- `POST /course/:courseId/source-study-activities/:activityId/publish`
+
+### Learner Tracking
+
+- `POST /course/:courseId/study-sources/:sourceId/events`
+- `GET /course/:courseId/study-sources/:sourceId/progress`
+- `GET /course/:courseId/study-sources/:sourceId/report`
+
+Route names can be adjusted during implementation to match existing course route grouping.
+
+## Validation Schemas
+
+Add schemas under:
+
+- `packages/utils/src/validation/study-source/study-source.ts`
+- `packages/utils/src/validation/study-from-source/study-from-source.ts`
+
+Core schema groups:
+
+- source create
+- URL source create
+- file source finalize
+- pasted text source create
+- course generation settings
+- course generated draft update
+- source-study activity create/update
+- study event create
+- report query filters
+
+## Dashboard Feature Placement
+
+Add frontend modules under:
+
+- `apps/dashboard/src/lib/features/study-source/`
+- `apps/dashboard/src/lib/features/course/components/content/` for the create entry
+- `apps/dashboard/src/lib/features/course/pages/` if a dedicated source report page is needed
+
+Request/response types must live in the feature `utils/types.ts` file and be inferred from API route types.
+
+## Implementation Plan
+
+### Phase 1: Shared Source Foundation
+
+1. Add enums and DB tables for source, segment, event, progress, and generated draft metadata.
+2. Add query modules under `packages/db/src/queries/study-source/`.
+3. Add validation schemas.
+4. Add source create/get/delete routes.
+5. Reuse asset upload and document extraction where possible.
+
+### Phase 2: Ingestion
+
+1. Support file upload source.
+2. Support pasted text source.
+3. Support webpage URL fetch and readable-text extraction.
+4. Store source snapshots and extraction metadata.
+5. Add extraction status UI.
+
+### Phase 3: Source Segmentation
+
+1. Segment by document headings/pages where available.
+2. Segment webpages by headings and readable sections.
+3. Use AI-assisted inferred segmentation only when deterministic structure is weak.
+4. Store segment locators for citations and coverage.
+
+### Phase 4: Study from Source Course Type
+
+1. Add `STUDY_FROM_SOURCE` to course type enum.
+2. Add course creation option.
+3. Build AI outline generation endpoint.
+4. Build teacher review UI.
+5. Publish approved drafts into sections, lessons, lesson language content, and exercises.
+
+### Phase 5: Source-Study Activity
+
+1. Add `Study from Source` content creation option.
+2. Implement as a lesson variant with source metadata and generated exercise in v1.
+3. Build source reader UI.
+4. Generate and review activity quiz.
+5. Publish activity inside an existing course.
+
+### Phase 6: Learner Tracking and Reports
+
+1. Add event ingestion endpoint.
+2. Add progress aggregation service.
+3. Connect generated quiz submission to source completion.
+4. Add teacher reports and CSV export.
+
+## Acceptance Criteria
+
+### Course Type
+
+1. Teacher can create a `STUDY_FROM_SOURCE` course from a PDF, webpage URL, or pasted text.
+2. AI proposes a reviewable course outline with lessons and optional sections.
+3. Teacher can edit the proposed outline before publish.
+4. Publishing creates real course content using existing lessons and exercises.
+5. Generated questions are attached to source segments.
+6. Learners can complete the generated course like a self-paced course.
+
+### Activity Type
+
+1. Teacher can add a source-study activity to an existing course.
+2. Activity can use a file, URL, or pasted text.
+3. AI generates a quiz that covers the key subject matter.
+4. Learner can view the source and complete the quiz.
+5. Completion requires progress and passing score by default.
+6. Teacher can view completion evidence per learner.
+
+### Source Handling
+
+1. Source snapshots are persisted.
+2. Webpage changes do not change an already-published activity or course.
+3. Truncation and extraction failures are visible to teachers.
+4. Source records are scoped to the organization and course permissions.
+
+## Risks and Mitigations
+
+| Risk | Impact | Mitigation |
+| --- | --- | --- |
+| AI generates inaccurate lesson content | Learners receive wrong material | Require teacher review, source mapping, and citations |
+| Webpages are dynamic or copyrighted | Snapshot may be incomplete or legally sensitive | Store metadata, show original URL, let orgs control use policy |
+| Source extraction fails on complex PDFs | Poor lesson generation | Show extraction preview and allow pasted text fallback |
+| Activity tracking overclaims reading | Trust issue | Use careful evidence language and combine telemetry with quiz score |
+| Adding a new content type is disruptive | Broad content model refactor | Implement activity as lesson variant in v1 |
+| Token cost is high for large sources | Slow or expensive generation | Segment source, estimate cost before generation, allow truncation controls |
+
+## Open Questions
+
+1. Should Study from Source require a paid plan, or only source upload/AI generation?
+2. Should URL fetching allow private/intranet URLs, or public URLs only?
+3. Should teachers be able to include multiple sources in one Study from Source course in v1?
+4. Should source-study activities appear as lessons, exercises, or a new content type in the learner sidebar?
+5. What is the default passing score: 70%, 80%, or inherited from course settings?
+6. Should generated questions include explanations visible to learners after submission?
+7. Should source snapshots be downloadable by learners, or only viewable in-app?
diff --git a/prd/study-from-source/implementation-plan.md b/prd/study-from-source/implementation-plan.md
new file mode 100644
index 00000000..7b8ea05f
--- /dev/null
+++ b/prd/study-from-source/implementation-plan.md
@@ -0,0 +1,795 @@
+# Study from Source Implementation Plan
+
+## Engineering Position
+
+Study from Source should be built as a durable source-ingestion and generation pipeline, not as a direct "send file to AI" feature.
+
+The system owns:
+
+1. source intake
+2. storage
+3. deterministic extraction
+4. normalization
+5. segmentation
+6. AI generation from bounded source segments
+7. draft persistence
+8. teacher review
+9. publish into existing course primitives
+10. learner progress and completion evidence
+
+The AI should not fetch arbitrary URLs, read private files directly, or decide what gets persisted. The AI receives normalized source segments and returns structured drafts that are validated before storage and again before publish.
+
+## Task Separation
+
+### Deterministic System Tasks
+
+These tasks should be regular backend services and workers:
+
+| Task | Owner | Notes |
+| --- | --- | --- |
+| Auth and permission checks | API routes/middleware | Organization-scoped, course-team-scoped where relevant |
+| File upload and asset registration | API service | Reuse asset pipeline where possible |
+| Webpage fetch | API worker | Server-side fetch with strict SSRF protections |
+| Text extraction | Extraction service | PDF/DOCX/PPTX/TXT/Markdown/HTML |
+| Text normalization | Extraction service | Remove boilerplate, normalize whitespace, preserve headings |
+| Source segmentation | Segmentation service | Deterministic first, AI-assisted only for weak structure |
+| Source snapshot persistence | DB/query layer | Source must remain stable after publish |
+| Job state, retries, cancellation | Worker/job service | Durable and resumable |
+| Draft validation | Utils validation + API service | Zod schema validation before persistence |
+| Publishing | Publish service | Creates sections, lessons, lesson language content, exercises |
+| Learner events | Tracking endpoint/service | Idempotent events and progress aggregation |
+| Completion evaluation | Completion service | Central rule evaluator, not UI-driven |
+| Reporting/export | Reporting service | Reads progress aggregates and submissions |
+
+### AI Tasks
+
+The AI should perform bounded transformations only after source extraction:
+
+| AI Task | Input | Output |
+| --- | --- | --- |
+| Structure inference | Source segment outline and selected segment text | Proposed lessons, optional sections, learning objectives |
+| Lesson drafting | Segment text for one planned lesson | Lesson body content, summary, key concepts |
+| Quiz generation | Segment text and learning objectives | Auto-gradable questions, options, correct answers, explanations |
+| Activity quiz generation | One source/activity segment set | Key subject matter, quiz, optional reflection prompt |
+| Coverage mapping assist | Generated item + source segment IDs | Segment references and confidence |
+| Regeneration | Existing draft item + source segments + teacher instruction | Replacement draft item |
+
+The AI must not:
+
+- publish directly
+- change permissions
+- create records without service validation
+- infer facts outside the provided source unless explicitly configured
+- generate questions without source segment references
+- fetch URLs itself
+- grade learner submissions in v1 unless the question type already has a supported grading path
+
+## High-Level Architecture
+
+```mermaid
+flowchart TB
+    Teacher["Teacher UI"]
+    API["Study Source API"]
+    Worker["Source Worker"]
+    Extractor["Extraction Service"]
+    Segmenter["Segmentation Service"]
+    AI["AI Generation Service"]
+    Draft["Generation Draft"]
+    Publish["Publish Service"]
+    Course["Course / Lesson / Exercise Tables"]
+    Learner["Learner UI"]
+    Tracking["Tracking Service"]
+    Reports["Reports"]
+
+    Teacher --> API
+    API --> Worker
+    Worker --> Extractor
+    Extractor --> Segmenter
+    Segmenter --> AI
+    AI --> Draft
+    Teacher --> Draft
+    Draft --> Publish
+    Publish --> Course
+    Learner --> Tracking
+    Tracking --> Reports
+    Course --> Learner
+```
+
+## Pipeline Overview
+
+### Course Type Pipeline
+
+```
+create source
+  -> extract source
+  -> normalize text
+  -> segment source
+  -> generate course outline draft
+  -> teacher reviews outline
+  -> generate lesson and quiz drafts per lesson
+  -> teacher approves
+  -> publish into course/sections/lessons/exercises
+  -> learner completes course
+  -> reports show progress, score, and source coverage
+```
+
+### Activity Type Pipeline
+
+```
+create source inside existing course
+  -> extract source
+  -> normalize text
+  -> segment source
+  -> generate source-study activity draft
+  -> teacher reviews quiz and requirements
+  -> publish as lesson variant + generated exercise
+  -> learner studies source and submits quiz
+  -> completion service evaluates activity completion
+```
+
+## Source Intake and Extraction
+
+### Intake Sources
+
+#### File Upload
+
+Supported v1:
+
+- PDF
+- DOCX
+- PPTX
+- TXT
+- Markdown
+
+Implementation:
+
+1. API receives file metadata and creates a `study_source` record with status `draft`.
+2. File is uploaded to object storage and registered as an `asset`.
+3. API creates a `study_source_job` with type `extract_source`.
+4. Worker claims job and extracts text.
+5. Worker updates source status to `ready` or `failed`.
+
+Use the current AI chat document extraction as a reference, but do not reuse its temporary conversation assumptions. The existing service stores extracted text against `ai_chat_document`; Study from Source needs durable source records and source segments.
+
+#### Webpage URL
+
+Supported v1:
+
+- one public URL per source
+- server-side fetch
+- readable article/body extraction
+- stored snapshot
+
+Implementation:
+
+1. Validate URL scheme is `https` or `http`.
+2. Block localhost, private IP ranges, link-local ranges, metadata service IPs, and internal hostnames.
+3. Resolve DNS before fetch and validate resolved IPs.
+4. Enforce redirect limit, response size limit, and timeout.
+5. Reject unsupported content types unless the response is parseable HTML/text.
+6. Store:
+   - original URL
+   - final URL
+   - HTTP status
+   - content type
+   - fetch timestamp
+   - extracted readable text
+   - page title
+   - canonical URL if present
+
+The learner should see the stored snapshot/readable text by default, with the original URL shown as a citation/link.
+
+#### Pasted Text
+
+Supported v1:
+
+- plain text
+- Markdown
+
+Implementation:
+
+1. API stores text directly in `study_source.rawText`.
+2. Worker normalizes and segments it like other source types.
+3. No external asset is required.
+
+### Extraction Libraries
+
+Candidate extraction approach:
+
+| Source | Extractor |
+| --- | --- |
+| PDF | Existing `pdf-parse` initially; consider page-aware extractor if page locators are required |
+| DOCX | Existing `mammoth` |
+| PPTX | Existing ZIP/XML extraction, later replace with a stronger parser if needed |
+| HTML | `readability`-style extraction using DOM parsing |
+| TXT/Markdown | Direct decode and normalization |
+
+### Extraction Output Contract
+
+Extraction should produce a structured intermediate result:
+
+```ts
+type ExtractedSource = {
+  title: string | null;
+  rawText: string;
+  normalizedText: string;
+  wordCount: number;
+  pageCount?: number | null;
+  language?: string | null;
+  locators: Array<{
+    kind: 'page' | 'heading' | 'slide' | 'paragraph' | 'url_fragment';
+    label: string;
+    startOffset: number;
+    endOffset: number;
+    metadata?: Record<string, unknown>;
+  }>;
+  warnings: Array<{
+    code: string;
+    severity: 'info' | 'warning' | 'error';
+    message: string;
+  }>;
+};
+```
+
+The AI should consume the normalized text and segment records, not the uploaded file.
+
+## Normalization
+
+Normalization should be deterministic and conservative.
+
+Steps:
+
+1. decode text as UTF-8 where possible
+2. normalize line endings
+3. collapse repeated whitespace
+4. preserve headings, page breaks, slide breaks, and URL headings
+5. remove obvious webpage boilerplate such as nav/footer/cookie banners where the parser identifies them
+6. detect very low text density and mark extraction as weak
+7. compute word count and character count
+8. detect likely language
+
+Do not rewrite content during normalization. Rewriting belongs to AI generation, not extraction.
+
+## Segmentation
+
+Segmentation is the contract between source extraction and AI generation.
+
+### Deterministic Segmentation First
+
+Use deterministic rules before AI:
+
+- PDF: pages, detected headings, paragraph blocks
+- DOCX: heading styles if available, then paragraphs
+- PPTX: slide boundaries, slide titles
+- HTML: h1/h2/h3 sections, article paragraphs
+- Markdown: heading hierarchy
+- TXT: heading-like lines and paragraph grouping
+
+### AI-Assisted Segmentation
+
+Use AI-assisted segmentation only when deterministic segmentation is weak:
+
+- no headings
+- long flat text
+- inconsistent formatting
+- extracted text has unclear boundaries
+
+AI-assisted segmentation should receive chunked text and return only segment boundaries and titles, not rewritten lesson content.
+
+### Segment Size Rules
+
+Default target:
+
+- minimum useful segment: 150 words
+- target segment: 500-1,200 words
+- maximum segment: 2,000 words before further splitting
+
+Very short segments should be merged with neighbors unless they are headings, definitions, or policy clauses that need to remain separate.
+
+### Segment Output
+
+Each `study_source_segment` should include:
+
+- stable order
+- title where available
+- kind
+- text
+- parent segment if hierarchical
+- source locator
+- extraction confidence or warnings
+
+## AI Generation Responsibilities
+
+### Course Outline Generation
+
+Input:
+
+- source metadata
+- segment list with IDs, titles, sizes, and short previews
+- teacher instructions
+- generation settings
+
+Output:
+
+- title
+- description
+- `usesSections`
+- optional sections
+- lessons
+- lesson-to-segment mapping
+- learning objectives
+- recommended quiz placement
+- warnings
+
+Rules:
+
+- for small sources, generate a flat lesson list
+- for large/naturally structured sources, generate sections
+- do not create a lesson without source segment IDs
+- do not include ungrounded content
+- include warnings for uncovered or low-confidence segments
+
+### Lesson Draft Generation
+
+Input:
+
+- approved lesson plan item
+- full text of mapped source segments
+- course style settings
+- teacher instructions
+
+Output:
+
+- lesson body HTML
+- summary
+- key concepts
+- source segment references
+- warnings
+
+Rules:
+
+- lesson body starts at `h3` or lower to match existing lesson content rules
+- keep source-grounded; do not add external facts by default
+- explain and teach, but do not invent new policy requirements
+- include source coverage metadata
+
+### Quiz Generation
+
+Input:
+
+- source segment text
+- learning objectives
+- desired question count
+- allowed question types
+- passing score
+
+Output:
+
+- questions
+- options
+- correct answers
+- answer explanations
+- source segment references
+- difficulty
+
+Rules:
+
+- v1 should prefer auto-gradable question types
+- every question must map to at least one source segment
+- avoid trick questions
+- avoid questions whose answer depends on ambiguous wording
+- avoid questions about insignificant details unless the teacher asks for strict recall
+- generated options must be mutually exclusive for single-answer questions
+- checkbox questions must have at least two correct options only when the source supports that clearly
+
+### Activity Generation
+
+Input:
+
+- source segments for one activity
+- teacher settings
+
+Output:
+
+- activity title
+- source summary
+- key subject matter list
+- quiz
+- completion settings
+- source coverage
+
+Rules:
+
+- do not split activity into multiple lessons
+- focus quiz on key subject matter, not every paragraph
+- activity summary is optional learner support, not proof of study
+
+## Data Model Additions
+
+### Enums
+
+Add:
+
+- `COURSE_TYPE`: `STUDY_FROM_SOURCE`
+- `STUDY_SOURCE_TYPE`: `file`, `webpage`, `text`
+- `STUDY_SOURCE_STATUS`: `draft`, `extracting`, `ready`, `failed`, `archived`
+- `STUDY_SOURCE_JOB_TYPE`: `extract_source`, `segment_source`, `generate_course_outline`, `generate_activity`, `publish_draft`
+- `STUDY_SOURCE_JOB_STATUS`: `pending`, `running`, `completed`, `failed`, `canceled`
+- `STUDY_SOURCE_SEGMENT_KIND`: `chapter`, `section`, `paragraph`, `page`, `slide`, `inferred_topic`
+- `STUDY_SOURCE_DRAFT_KIND`: `course_outline`, `activity_quiz`, `lesson_regeneration`, `quiz_regeneration`
+- `STUDY_SOURCE_ACTIVITY_STATUS`: `draft`, `published`, `archived`
+
+### Tables
+
+Use the PRD data model plus add an explicit job table:
+
+#### `study_source_job`
+
+| Field | Type | Notes |
+| --- | --- | --- |
+| `id` | uuid | Job ID |
+| `organizationId` | uuid | Scope |
+| `sourceId` | uuid nullable | Source |
+| `draftId` | uuid nullable | Draft |
+| `type` | enum | Job type |
+| `status` | enum | Job status |
+| `attempt` | integer | Current attempt |
+| `maxAttempts` | integer | Retry cap |
+| `leasedBy` | text nullable | Worker lease |
+| `leaseExpiresAt` | timestamp nullable | Worker lease expiry |
+| `progressPercent` | integer | UI progress |
+| `stage` | text | Human-readable stage |
+| `checkpoint` | jsonb | Resume data |
+| `input` | jsonb | Job input |
+| `output` | jsonb | Job result |
+| `warnings` | jsonb | Non-fatal warnings |
+| `error` | jsonb | Terminal error |
+| `createdAt` / `updatedAt` | timestamp | Audit fields |
+
+The job system should use DB-backed leasing with `FOR UPDATE SKIP LOCKED`, matching the pattern proposed in the course importer plan.
+
+## API Boundaries
+
+### Routes
+
+Keep routes thin:
+
+- validate input
+- enforce auth/middleware
+- call service
+- return one response shape
+- use `handleError`
+
+### Services
+
+Suggested service modules:
+
+- `apps/api/src/services/study-source/source.ts`
+- `apps/api/src/services/study-source/extraction.ts`
+- `apps/api/src/services/study-source/segmentation.ts`
+- `apps/api/src/services/study-source/generation.ts`
+- `apps/api/src/services/study-source/publish.ts`
+- `apps/api/src/services/study-source/progress.ts`
+- `apps/api/src/services/study-source/reporting.ts`
+
+### Queries
+
+Suggested query module:
+
+- `packages/db/src/queries/study-source/study-source.ts`
+
+Queries stay pure and do not know HTTP concerns.
+
+### Validation
+
+Suggested validation module:
+
+- `packages/utils/src/validation/study-source/study-source.ts`
+
+Schemas should cover:
+
+- source create
+- file finalize
+- URL create
+- pasted text create
+- generation settings
+- draft update
+- publish
+- activity config
+- learner event
+- report query
+
+## Async Job Design
+
+Extraction and AI generation should be async jobs.
+
+Do not hold a request open while:
+
+- fetching a webpage
+- parsing a large PDF
+- segmenting large text
+- generating a full course outline
+- generating all lesson content
+- publishing a large generated course
+
+### Job Lifecycle
+
+```
+pending -> running -> completed
+                  -> failed
+                  -> canceled
+```
+
+### Retry Policy
+
+- extraction failures caused by invalid input should not retry
+- network timeouts for webpage fetch can retry with backoff
+- AI rate limits can retry with backoff
+- schema validation failures from AI output should retry once with a repair prompt
+- publish failures should be resumable with idempotency keys
+
+### Idempotency
+
+Use idempotency keys for:
+
+- source creation from URL
+- draft generation
+- publish
+- learner event ingestion
+
+Publish must be safe to retry without duplicate sections, lessons, exercises, or questions.
+
+## Publish Strategy
+
+### Course Type Publish
+
+Publishing a course draft should:
+
+1. create or update course shell with type `STUDY_FROM_SOURCE`
+2. set `isContentGroupingEnabled` based on approved outline
+3. create sections if `usesSections` is true
+4. create lessons in order
+5. create lesson language content
+6. create exercises and questions
+7. create source coverage records
+8. mark draft `published`
+
+### Activity Publish
+
+Publishing an activity draft should:
+
+1. create a lesson in the existing course
+2. create `study_source_activity`
+3. attach source metadata to the activity
+4. create generated exercise linked to the lesson
+5. create source coverage records for quiz questions
+6. mark activity/draft `published`
+
+### Partial Publish Failure
+
+Publish should store checkpoints after each created entity:
+
+- course created
+- section IDs created
+- lesson IDs created
+- lesson content written
+- exercise IDs created
+- questions created
+- coverage written
+
+On retry, the service should read the checkpoint and continue instead of creating duplicates.
+
+## Learner Tracking
+
+### Events
+
+Events should be append-only where possible:
+
+- `opened`
+- `segment_viewed`
+- `progress_updated`
+- `active_time_recorded`
+- `quiz_started`
+- `quiz_submitted`
+- `attestation_checked`
+- `completed`
+
+### Event Validation
+
+Reject or normalize:
+
+- progress below previous progress unless explicitly resetting
+- active time heartbeats that are too frequent
+- active time while tab is hidden
+- events for unpublished activities
+- events from users not enrolled/authorized for the course
+
+### Progress Aggregation
+
+Progress should be aggregated server-side from events and quiz submissions.
+
+Completion should be evaluated by a single service:
+
+```ts
+type StudySourceCompletionInput = {
+  requiredProgressPercent: number;
+  minimumActiveTimeSeconds: number | null;
+  passingScorePercent: number;
+  requiresAttestation: boolean;
+  progressPercent: number;
+  activeTimeSeconds: number;
+  quizScorePercent: number | null;
+  attestedAt: string | null;
+};
+```
+
+The UI should never mark an activity complete by itself.
+
+## Frontend Implementation
+
+### Course Creation
+
+Add a Study from Source option to course creation.
+
+Screens:
+
+1. source input
+2. extraction status and preview
+3. generation settings
+4. outline review
+5. publish progress
+6. generated course preview
+
+### Activity Creation
+
+Add Study from Source to the content create modal.
+
+Screens:
+
+1. source input
+2. extraction preview
+3. quiz settings
+4. generated quiz review
+5. publish
+
+### Learner Reader
+
+The reader should support:
+
+- normalized text display
+- source metadata
+- original source link for webpages
+- progress tracking
+- generated quiz
+- attestation if enabled
+
+Do not render raw untrusted HTML from webpages without sanitization.
+
+## Edge Cases
+
+### File Edge Cases
+
+| Edge Case | Expected Behavior |
+| --- | --- |
+| Unsupported MIME type | Reject with clear error |
+| MIME type spoofing | Verify extension and content signature where practical |
+| File exceeds limit | Reject before extraction |
+| Empty file | Mark extraction failed |
+| PDF has no text layer | Mark extraction failed with scanned-PDF warning |
+| Password-protected PDF | Reject with unsupported/protected file error |
+| Corrupt DOCX/PPTX | Mark extraction failed and keep source in failed state |
+| Huge extracted text | Truncate or require teacher to split source; show warning |
+| Tables/formulas extracted poorly | Store warning; teacher can review extracted preview |
+| Images contain important text | Mark as not extracted in v1; OCR out of scope |
+| Duplicate upload | Allow, but optionally detect hash and warn |
+
+### Webpage Edge Cases
+
+| Edge Case | Expected Behavior |
+| --- | --- |
+| URL is localhost/private IP | Reject to prevent SSRF |
+| URL redirects to private IP | Reject after redirect validation |
+| URL returns non-HTML binary | Reject unless supported document type |
+| URL blocks fetch | Mark failed with fetch error |
+| URL times out | Retry with backoff, then fail |
+| Page is mostly nav/ads | Extract best readable content; warn if text density is low |
+| Page requires login | Fail with "content not accessible" |
+| Paywall or cookie wall | Extract available text; warn that content may be incomplete |
+| Page content changes later | Existing course/activity keeps stored snapshot |
+| Canonical URL differs | Store both original and canonical/final URL |
+| Robots/meta restrictions | Store warning and respect product policy decided before launch |
+
+### Text Edge Cases
+
+| Edge Case | Expected Behavior |
+| --- | --- |
+| Text is too short for quiz | Allow source, block quiz generation or generate fewer questions |
+| Text is too long | Enforce character limit and show warning |
+| Text has no structure | Use AI-assisted segmentation |
+| Text is not in supported locale | Detect language and warn if generation quality may be lower |
+
+### AI Edge Cases
+
+| Edge Case | Expected Behavior |
+| --- | --- |
+| AI returns invalid JSON | Retry once with repair prompt; then fail draft generation |
+| AI omits source references | Reject output and retry |
+| AI creates unsupported question type | Reject output and retry or downgrade to supported type |
+| AI invents facts outside source | Hard to detect automatically; require teacher review and source references |
+| AI makes every lesson too long | Enforce max output lengths per lesson |
+| AI creates too many lessons | Enforce generation settings and max lesson count |
+| AI creates trivial quiz questions | Flag via quality checks where possible; teacher can regenerate |
+| AI rate limit | Retry job with backoff |
+| AI token limit | Chunk by segments and generate per lesson/activity |
+
+### Publish Edge Cases
+
+| Edge Case | Expected Behavior |
+| --- | --- |
+| Teacher edits draft while publish runs | Lock draft during publish |
+| Publish interrupted after sections created | Resume from checkpoint |
+| Existing course has content | Activity publish appends; course-type publish creates new course unless explicit merge is supported |
+| Duplicate publish click | Idempotency prevents duplicates |
+| Question validation fails | Fail publish before partial question creation where possible |
+| Lesson content validation fails | Keep draft unpublished with actionable error |
+
+### Learner Tracking Edge Cases
+
+| Edge Case | Expected Behavior |
+| --- | --- |
+| Learner opens source then immediately submits quiz | Completion depends on configured progress/score rules |
+| Learner switches tabs | Active time heartbeat pauses |
+| Learner loses network | Events queue client-side and replay with idempotency keys |
+| Learner retakes quiz | Progress uses best or latest score based on activity settings |
+| Teacher changes passing score after attempts | Recompute completion according to product policy; default should apply new rules only to future attempts |
+| Source/activity unpublished | Reject learner events |
+
+## Testing Plan
+
+### Unit Tests
+
+- URL validation and SSRF blocking
+- file type validation
+- text normalization
+- deterministic segmentation
+- source completion evaluator
+- generated draft schema validation
+- publish mapping functions
+
+### Integration Tests
+
+- create source from pasted text
+- upload file and create source record
+- webpage fetch success/failure
+- extraction job state transitions
+- generation draft persistence
+- publish draft to course
+- publish activity into existing course
+- learner event ingestion and progress aggregation
+
+### E2E Tests
+
+- teacher creates Study from Source course from pasted text and publishes
+- teacher adds source-study activity to existing course
+- learner studies activity, passes quiz, completion appears in report
+- failed extraction shows actionable UI state
+- retry publish does not duplicate content
+
+## Delivery Order
+
+1. Data model and validation schemas
+2. Source creation and pasted text ingestion
+3. Async job foundation
+4. File extraction using existing extraction libraries
+5. Webpage fetch and readable extraction with SSRF protections
+6. Segmentation service
+7. Course outline draft generation
+8. Activity quiz draft generation
+9. Teacher review UI
+10. Publish service for activity path
+11. Publish service for course type path
+12. Learner reader and tracking
+13. Reports and CSV export
+
+Build the activity path before the full course path if delivery needs to be staged. It exercises the same source pipeline with lower publish complexity.
+
diff --git a/prd/video-recording-question-type [DONE]/README.md b/prd/video-recording-question-type [DONE]/README.md
new file mode 100644
index 00000000..77e97d70
--- /dev/null
+++ b/prd/video-recording-question-type [DONE]/README.md	
@@ -0,0 +1,759 @@
+# Video Recording Question Type PRD
+
+## Status
+
+- Done (shipped)
+
+## Date
+
+- April 29, 2026
+
+## Purpose
+
+Add a new exercise question type that lets students record a short video response directly in the browser. The student clicks "Start recording", sees a circular selfie-style camera frame with a timer UI, records within the teacher's configured duration limit, can retake the recording multiple times, and submits the final recording as the answer.
+
+This is not a generic video upload question. Students must record inside ClassroomIO instead of choosing an existing video file from their device.
+
+## Problem Statement
+
+Current exercise question types support text, objective answers, links, and file uploads, but they do not support authentic spoken or visual responses captured at answer time.
+
+Teachers need video responses for use cases such as:
+
+1. Oral language assessments.
+2. Reflection prompts.
+3. Presentation practice.
+4. Speaking assignments.
+5. Student identity or presence checks for low-stakes activities.
+6. Short self-introduction or portfolio responses.
+
+Using generic file upload for this workflow is weaker because:
+
+1. Students can upload pre-recorded or edited videos.
+2. The teacher cannot control recording duration in the answer UI.
+3. The experience is not optimized for quick mobile selfie responses.
+4. Retake behavior is unclear.
+5. The system cannot reliably guide capture, upload, and answer persistence as one flow.
+
+## Product Thesis
+
+A first-class video recording question type gives teachers richer student responses while keeping the experience constrained, simple, and assessment-friendly. The product should feel like recording a short circular selfie video message, not managing a media file.
+
+## Current-State Audit
+
+| Area | Current State | Gap |
+| --- | --- | --- |
+| Question type registry | `@cio/question-types` supports 12 question types | No `VIDEO_RECORDING` type |
+| File upload question | Supports uploaded answer files | Allows choosing files, which is explicitly not this workflow |
+| Media storage | Existing video presign and Cloudflare-compatible object storage paths exist | Needs answer-specific recording upload contract and metadata |
+| Question renderers | `@cio/ui/custom/exercise-question` owns edit/take/preview/submission renderers | Needs recording-specific edit, take, preview, and submission renderers |
+| Exercise submission | Answers serialize through shared answer codecs | Needs a video recording answer payload |
+| Grading | Manual types route to manual grading | Video response must be manual grading required |
+| Student UI | Existing take mode is form-like | Needs camera permission, timer, circular preview, stop, replay, retake, upload states |
+
+## Data Sources Checked
+
+- `packages/question-types/README.md`
+- `packages/question-types/ADDING_A_QUESTION_TYPE.md`
+- `packages/question-types/src/question-type-registry.ts`
+- `packages/question-types/src/answer-data.ts`
+- `packages/question-types/src/answer-codecs.ts`
+- `packages/ui/src/custom/exercise-question/renderer-contract.ts`
+- `packages/ui/src/custom/exercise-question/renderers/file-upload/`
+- `apps/api/src/routes/course/presign.ts`
+- `apps/api/src/utils/s3.ts`
+- `prd/exercise-question-types [DONE]/README.md`
+- `prd/media-manager [DONE]/README.md`
+- `prd/media-manager [DONE]/decoupling.md`
+
+## Primary Users
+
+- Teachers creating exercises that require short video responses.
+- Students recording responses on desktop or mobile browsers.
+- Instructors, tutors, and admins reviewing submissions.
+
+## Goals
+
+1. Add a `VIDEO_RECORDING` exercise question type.
+2. Let teachers configure a max recording duration per question.
+3. Let students record directly from camera and microphone inside the answer UI.
+4. Present a circular selfie-style video frame during recording and preview.
+5. Show a clear timer and enforce the configured max duration.
+6. Let students retake the recording multiple times before final submission.
+7. Upload the final selected recording to Cloudflare-backed storage.
+8. Store the uploaded recording's `assetId`, `storageKey`, and metadata as the student's answer.
+9. Make the answer reviewable by teachers in submission review.
+10. Keep this separate from the existing file upload question type.
+
+## Non-Goals (v1)
+
+- Uploading an existing video file from the device.
+- In-browser video editing, trimming, filters, captions, or effects.
+- Multi-clip recordings.
+- Screen recording.
+- Live teacher feedback during recording.
+- Automatic speech transcription.
+- AI scoring or content moderation.
+- Proctoring-grade identity verification.
+- Offline recording with later background sync.
+- Mandatory one-take-only recording restrictions.
+
+## Confirmed Product Decisions
+
+1. The question type is recording-only, not upload-based.
+2. Teachers configure the max duration per question.
+3. Students can retake multiple times before submitting.
+4. Only the final selected take is submitted as the answer.
+5. Recording UI uses a circular video frame, similar to short selfie video messages.
+6. The recording is uploaded to Cloudflare-backed storage after the student accepts the take.
+7. The answer stores `storageKey`, `assetId`, and supporting metadata. Playback URLs are generated on demand.
+8. The question requires manual grading.
+9. Upload starts immediately after the student accepts a take, not when the full exercise is submitted.
+10. Cleanup for superseded, abandoned, and expired recordings is in scope for v1.
+
+## Open Product Decisions
+
+1. Should v1 enforce a platform-wide maximum duration, such as 30, 60, 120, or 180 seconds?
+2. Should students be allowed to delete a saved final recording before submitting the exercise?
+3. Should failed uploads block the full exercise submission or only mark that question incomplete?
+4. Should teachers see retake count metadata, or should retakes remain private to the student?
+5. What retention window should be used before deleting superseded recording assets?
+
+## User Stories
+
+### Teacher Authoring
+
+- As a teacher, I can choose "Video recording" from the question type picker.
+- As a teacher, I can write the prompt and instructions for the recording.
+- As a teacher, I can set the maximum recording duration.
+- As a teacher, I can preview the student recording experience.
+- As a teacher, I can see that video recording questions require manual grading.
+
+### Student Recording
+
+- As a student, I can grant camera and microphone permission.
+- As a student, I can see myself in a circular video frame before recording.
+- As a student, I can click "Start recording" to begin.
+- As a student, I can see elapsed time and remaining time while recording.
+- As a student, recording stops automatically at the max duration.
+- As a student, I can stop early.
+- As a student, I can replay my recording before accepting it.
+- As a student, I can retake the video multiple times.
+- As a student, I can submit only the take I accepted.
+- As a student, I see upload progress and errors clearly.
+
+### Teacher Review
+
+- As a teacher, I can play the submitted video answer in the submission review screen.
+- As a teacher, I can see duration, upload status, submitted time, and file metadata.
+- As a teacher, I can grade the response manually and leave feedback.
+
+## Functional Requirements
+
+### FR-1: Question Type Registration
+
+Add a new question type:
+
+- Key: `VIDEO_RECORDING`
+- Label: `Video recording`
+- Auto-gradable: `false`
+- Supports partial credit: `false`
+- Manual grading required: `true`
+
+The type must be added to:
+
+- `@cio/question-types` keys and registry.
+- DB `question_type` seed/reference data.
+- Question type picker.
+- Renderer contract.
+- Dashboard translation labels.
+- Submission review UI.
+
+### FR-2: Authoring Settings
+
+Teachers can configure:
+
+- Prompt.
+- Optional instructions.
+- Points.
+- Required/optional.
+- Max recording duration in seconds.
+
+Default settings:
+
+```json
+{
+  "maxDurationSeconds": 60,
+  "allowRetakes": true
+}
+```
+
+Validation:
+
+- `maxDurationSeconds` is required.
+- `maxDurationSeconds` must be greater than `0`.
+- `maxDurationSeconds` must not exceed the platform maximum.
+- `allowRetakes` is always `true` in v1 and can be omitted from the UI if the product does not need a toggle.
+
+### FR-3: Student Recording UI
+
+The take renderer must include:
+
+- Camera permission state.
+- Microphone permission state.
+- Circular live video preview.
+- Start recording action.
+- Stop recording action.
+- Timer UI during recording.
+- Automatic stop at max duration.
+- Playback preview after recording.
+- Accept/use recording action.
+- Retake action.
+- Upload progress state.
+- Upload failure state with retry.
+
+Recording states:
+
+| State | Description |
+| --- | --- |
+| `idle` | No permission requested or no stream active |
+| `permission_denied` | Browser denied camera or microphone |
+| `ready` | Camera preview is active and user can start |
+| `recording` | MediaRecorder is capturing video/audio |
+| `recorded` | A local blob exists for preview |
+| `uploading` | Accepted recording is uploading |
+| `uploaded` | Cloudflare upload completed and answer is set |
+| `failed` | Recording or upload failed |
+
+### FR-4: Timer Behavior
+
+The timer must show:
+
+- Elapsed time.
+- Remaining time.
+- Max duration.
+
+Rules:
+
+- Timer starts when recording begins.
+- Timer stops when the student clicks stop.
+- Recording auto-stops when elapsed time reaches `maxDurationSeconds`.
+- UI should warn visually in the final 10 seconds for recordings longer than 15 seconds.
+- If the recording is shorter than 1 second, the UI should ask the student to record again.
+
+### FR-5: Retake Behavior
+
+Students can retake the video multiple times before submitting.
+
+Rules:
+
+- Retake discards the current local recording.
+- Retake does not synchronously delete already-uploaded Cloudflare objects.
+- The answer always points to the latest accepted and successfully uploaded recording.
+- If the student records again after an upload, the UI must make clear that the new take replaces the previous answer after upload succeeds.
+- v1 does not limit the number of retakes.
+- Superseded uploaded takes must be marked for cleanup once a newer accepted take is successfully uploaded.
+
+### FR-6: Upload Behavior
+
+After the student accepts a recording:
+
+1. Convert the captured recording blob to a supported video MIME type.
+2. Request a video-recording upload URL and pending asset from the API.
+3. Upload the blob to Cloudflare-backed object storage.
+4. Complete the upload with duration, size, and MIME metadata.
+5. Store the resulting answer payload with `assetId` and `storageKey`.
+6. Show the uploaded state in the UI.
+
+Recommended v1 upload timing:
+
+- Upload immediately after the student accepts a take.
+- Do not wait until the full exercise submit action, because large video uploads are more failure-prone than text answers.
+- The exercise answer should not be considered complete until the accepted take has uploaded and the asset completion step has returned.
+
+Upload constraints:
+
+- Upload endpoint must require authentication.
+- Upload endpoint must validate course/exercise/question access.
+- Upload endpoint must enforce max duration metadata from the question settings where possible.
+- Upload endpoint must restrict MIME types to browser-recordable video types.
+- Upload endpoint must produce a storage key in a recording-specific namespace.
+- Upload completion must create or finalize a media asset and return `assetId`.
+- The API must not return or persist a long-lived playback URL as the answer.
+
+### FR-7: Answer Payload
+
+Store the final accepted recording as structured answer data.
+
+Proposed answer data:
+
+```typescript
+export type VideoRecordingAnswerData = {
+  type: 'VIDEO_RECORDING';
+  assetId: string;
+  storageKey: string;
+  fileName: string;
+  mimeType: string;
+  size: number;
+  durationSeconds: number;
+  recordedAt: string;
+  uploadedAt: string;
+  provider: 'cloudflare';
+};
+
+export type VideoRecordingAnswerResponseData = VideoRecordingAnswerData & {
+  playbackUrl?: string;
+};
+```
+
+Storage rules:
+
+- `assetId` and `storageKey` are required and are the durable answer reference.
+- `playbackUrl` is transient and must only be attached to API responses after access checks.
+- Do not persist `playbackUrl` as the canonical answer.
+- If thumbnail generation is implemented, store `thumbnailUrl` on the asset metadata, not as the primary answer reference.
+
+### FR-8: Teacher Submission Review
+
+Submission review must render:
+
+- Video player.
+- Playback URL generated on demand from `assetId` or `storageKey`.
+- Duration.
+- File size.
+- Submitted timestamp.
+- Manual grading controls.
+- Feedback controls.
+
+If the video cannot be loaded:
+
+- Show a clear unavailable state.
+- Offer retry by requesting a fresh playback URL.
+- Preserve grading and feedback controls.
+
+### FR-9: Validation and Grading
+
+Submission validation:
+
+- Required video recording questions are incomplete until an uploaded answer payload exists.
+- Optional video recording questions can be skipped.
+- Payload must include `assetId`, `storageKey`, `mimeType`, `size`, and `durationSeconds`.
+- `durationSeconds` must be less than or equal to the configured `maxDurationSeconds` plus a small server tolerance.
+
+Grading:
+
+- Video recording questions are manual grading required.
+- Exercises containing video recording questions cannot be fully auto-graded.
+- Teachers can assign points and feedback in the existing manual grading flow.
+
+### FR-10: Browser Compatibility
+
+Use the browser `MediaRecorder` and `getUserMedia` APIs.
+
+Supported baseline:
+
+- Latest Chrome.
+- Latest Edge.
+- Latest Firefox.
+- Latest Safari on macOS and iOS, subject to MediaRecorder support validation.
+
+If recording is unsupported:
+
+- Show a browser-not-supported message.
+- Do not fall back to file upload in v1.
+
+## UX Requirements
+
+### Student Take Mode
+
+The video recording area should feel lightweight and mobile-first:
+
+- Circular camera frame.
+- Centered face/selfie composition.
+- Clear start and stop controls.
+- Timer visible near the frame.
+- Retake and use-recording actions after playback.
+- Upload state shown inline, not as a separate modal.
+
+Recommended layout:
+
+1. Prompt and instructions.
+2. Circular preview frame.
+3. Timer row.
+4. Primary action button.
+5. Secondary actions for retake/retry after recording.
+6. Upload/progress/error message.
+
+### Teacher Edit Mode
+
+Teacher controls should be minimal:
+
+- Max duration input.
+- Helper text explaining that students must record in browser and can retake before submitting.
+- Manual grading badge or hint.
+
+### Accessibility
+
+- All controls must be keyboard accessible.
+- Timer text must be readable by screen readers.
+- Recording state changes must be announced.
+- Buttons must not rely only on color.
+- Camera permission errors must include text instructions.
+- Video playback must expose native controls or equivalent accessible controls.
+
+## Technical Design
+
+### 1. Shared Question Type Package
+
+Add `VIDEO_RECORDING` to `@cio/question-types`:
+
+- `question-type-keys.ts`
+- `question-type-registry.ts`
+- `answer-data.ts`
+- `answer-codecs.ts`
+- `question-answer-payload.ts`
+- `exercise-types.ts` label keys
+- tests
+
+Expected registry id:
+
+- Use the next unused id after `LINK` (`13`) unless production data has already claimed it.
+
+### 2. UI Renderer Package
+
+Add renderers under:
+
+```text
+packages/ui/src/custom/exercise-question/renderers/video-recording/
+  edit.svelte
+  take.svelte
+  preview.svelte
+  submission.svelte
+```
+
+Register in:
+
+- `packages/ui/src/custom/exercise-question/renderer-contract.ts`
+- `packages/ui/src/custom/exercise-question/index.ts`
+
+The `take.svelte` renderer owns recording UI state but should delegate upload to the injected file/video upload callback or a dashboard adapter. `@cio/ui` should not directly know API routes.
+
+### 3. Dashboard Integration
+
+Update:
+
+- Question type picker metadata.
+- Exercise labels and translations.
+- Student exercise take flow.
+- Submission review flow.
+- Answer serialization usage if dashboard-specific adapters are needed.
+
+All user-facing copy must live in dashboard translations.
+
+### 4. API Upload Contract
+
+Add recording-specific upload routes instead of reusing generic lesson video upload directly.
+
+Proposed upload initialization endpoint:
+
+```text
+POST /course/:courseId/exercise/:exerciseId/question/:questionId/video-recording/upload/init
+```
+
+Response:
+
+```json
+{
+  "success": true,
+  "data": {
+    "assetId": "asset_uuid",
+    "uploadUrl": "https://...",
+    "fileKey": "exercise-recordings/org-id/course-id/exercise-id/question-id/uuid.webm",
+    "expiresAt": "2026-04-29T12:00:00.000Z"
+  }
+}
+```
+
+Proposed upload completion endpoint:
+
+```text
+POST /course/:courseId/exercise/:exerciseId/question/:questionId/video-recording/upload/complete
+```
+
+Request:
+
+```json
+{
+  "assetId": "asset_uuid",
+  "storageKey": "exercise-recordings/org-id/course-id/exercise-id/question-id/uuid.webm",
+  "fileName": "recording.webm",
+  "mimeType": "video/webm",
+  "size": 1048576,
+  "durationSeconds": 58,
+  "recordedAt": "2026-04-29T11:59:00.000Z"
+}
+```
+
+Response:
+
+```json
+{
+  "success": true,
+  "data": {
+    "type": "VIDEO_RECORDING",
+    "assetId": "asset_uuid",
+    "storageKey": "exercise-recordings/org-id/course-id/exercise-id/question-id/uuid.webm",
+    "fileName": "recording.webm",
+    "mimeType": "video/webm",
+    "size": 1048576,
+    "durationSeconds": 58,
+    "recordedAt": "2026-04-29T11:59:00.000Z",
+    "uploadedAt": "2026-04-29T12:00:00.000Z",
+    "provider": "cloudflare"
+  }
+}
+```
+
+The upload routes must:
+
+- Require `authMiddleware`.
+- Validate the user can submit to the exercise.
+- Validate the question belongs to the exercise.
+- Validate the question type is `VIDEO_RECORDING`.
+- Use the configured storage provider abstraction where possible.
+- Generate Cloudflare-compatible upload URLs for the video bucket.
+- Create a pending `assets` row during upload initialization.
+- Finalize the asset only after the browser upload succeeds.
+- Return durable answer data from completion without a playback URL.
+
+### 4.1 Playback URL Contract
+
+Playback URLs are generated on demand after access checks.
+
+Proposed endpoint:
+
+```text
+GET /course/:courseId/exercise/:exerciseId/submission/:submissionId/question/:questionId/video-recording/playback
+```
+
+Response:
+
+```json
+{
+  "success": true,
+  "data": {
+    "assetId": "asset_uuid",
+    "playbackUrl": "https://...",
+    "expiresAt": "2026-04-29T12:10:00.000Z"
+  }
+}
+```
+
+Rules:
+
+- Students can request playback for their own active answer.
+- Teachers can request playback for submissions they are allowed to review.
+- Playback URLs must be short-lived.
+- The API should resolve playback by `assetId` first and fall back to `storageKey` only if needed for migration or repair.
+
+### 5. Storage
+
+Recommended storage namespace:
+
+```text
+exercise-recordings/{organizationId}/{courseId}/{exerciseId}/{questionId}/{submissionOrProfileId}/{uuid}.{ext}
+```
+
+Storage metadata:
+
+- organization id
+- course id
+- exercise id
+- question id
+- profile/group member id
+- mime type
+- byte size
+- duration seconds
+- created at
+
+Media manager integration is required for v1:
+
+- Create an `assets` row with `kind = 'video'`.
+- Create the asset as `pending` during upload initialization.
+- Mark the asset `active` only after upload completion succeeds.
+- Create an `asset_usages` row with `target_type = 'submission_answer'` after the answer is accepted.
+- Store `assetId` in the answer payload.
+
+### 6. Submission Persistence
+
+The answer codec serializes `VideoRecordingAnswerData` into the existing answer storage path.
+
+Required payload fields:
+
+- `type`
+- `assetId`
+- `storageKey`
+- `mimeType`
+- `size`
+- `durationSeconds`
+- `recordedAt`
+- `uploadedAt`
+
+### 7. Cleanup
+
+Cleanup is part of the v1 implementation because retakes can otherwise create unbounded storage waste.
+
+Asset states:
+
+| State | Meaning | Cleanup behavior |
+| --- | --- | --- |
+| `pending` | Upload URL was issued, but upload completion has not succeeded | Delete after short expiry window |
+| `active` | Asset is referenced by the latest accepted answer | Keep |
+| `superseded` | Asset was replaced by a newer accepted take before submission | Delete after retention window |
+| `abandoned` | Student recorded/uploaded but never submitted the exercise or removed the answer | Delete after retention window |
+| `orphaned` | Asset is not referenced by any answer or usage | Delete after retention window |
+| `deleted` | Object and asset metadata are deleted or tombstoned | Exclude from playback |
+
+Rules:
+
+- When a student accepts and uploads a new take, mark the previously accepted asset for that question and student as `superseded`.
+- Do not delete superseded assets synchronously in the student request path.
+- Scheduled cleanup deletes `pending` assets whose upload URL expired and no completion was received.
+- Scheduled cleanup deletes `superseded`, `abandoned`, and `orphaned` assets after the configured retention window.
+- Cleanup must verify the asset is not referenced by the latest answer payload before deleting the object.
+- Cleanup must remove or tombstone the `asset_usages` row and then delete the storage object.
+- Cleanup failures must be logged with `assetId`, `storageKey`, and reason.
+- The cleanup job should be idempotent so retries are safe.
+
+Suggested defaults:
+
+- Pending upload expiry: 24 hours.
+- Superseded/abandoned/orphaned retention: 7 days.
+
+## Security and Privacy Requirements
+
+1. Camera and microphone are only activated after explicit student action.
+2. Browser permission errors are handled without crashing the exercise.
+3. Upload URLs are short-lived.
+4. Upload keys are scoped to the authenticated student and question.
+5. Students cannot overwrite another student's recording.
+6. Students cannot submit a recording answer for a question they cannot access.
+7. Teacher playback must respect course/org access controls.
+8. Playback URLs must be generated server-side for review.
+9. The system must not expose raw storage credentials to the browser.
+10. Retake metadata must not be shown to teachers unless product explicitly decides to expose it.
+
+## Analytics and Observability
+
+Track:
+
+- Recording permission denied.
+- Recording started.
+- Recording stopped manually.
+- Recording auto-stopped at max duration.
+- Recording retaken.
+- Recording accepted.
+- Upload started.
+- Upload succeeded.
+- Upload failed.
+- Cleanup queued.
+- Cleanup succeeded.
+- Cleanup failed.
+- Submission with video recording answer completed.
+
+Operational metrics:
+
+- Upload failure rate.
+- Average recording duration.
+- Average upload time.
+- Storage consumed by video recording answers.
+- Orphaned recording count and bytes.
+- Superseded recording count and bytes.
+- Cleanup deleted bytes.
+
+## Rollout Plan
+
+### Phase A: Foundation
+
+- Add question type registry entry.
+- Add answer data and codec.
+- Add seed/reference data.
+- Add tests for serialization and registry.
+
+### Phase B: Recording UI
+
+- Add edit renderer with max duration setting.
+- Add take renderer with camera preview, recording, timer, playback, retake, and upload states.
+- Add preview/submission renderers.
+- Add translations and picker metadata.
+
+### Phase C: Upload and Persistence
+
+- Add recording-specific upload initialization and completion routes.
+- Create pending media assets during upload initialization.
+- Store answer payload with `assetId`, `storageKey`, duration, and metadata.
+- Ensure submission validation and manual grading behavior work.
+
+### Phase D: Playback and Cleanup
+
+- Add teacher playback in submission review.
+- Add on-demand playback URL generation.
+- Add cleanup job for pending, superseded, abandoned, and orphaned recording assets.
+
+### Phase E: Hardening
+
+- Add analytics and error logging.
+- Add browser compatibility QA.
+
+## Acceptance Criteria
+
+1. A teacher can add a video recording question to an exercise.
+2. A teacher can set max recording duration for the question.
+3. A student can start recording from the browser without choosing a file.
+4. The live recording frame is circular.
+5. The recording timer is visible while recording.
+6. Recording auto-stops at the configured max duration.
+7. A student can stop early.
+8. A student can replay the recording before accepting.
+9. A student can retake the recording multiple times.
+10. Only the latest accepted recording is saved as the answer.
+11. The accepted recording uploads to Cloudflare-backed storage.
+12. The answer payload stores `assetId`, `storageKey`, and metadata, not a persisted playback URL.
+13. Required video recording questions block submission until upload succeeds.
+14. Teachers can play the submitted recording during review through an on-demand playback URL.
+15. Superseded, abandoned, and orphaned recording assets are cleaned up asynchronously.
+16. Video recording questions require manual grading.
+17. Unsupported browsers show a clear message and do not offer file upload fallback.
+
+## Risks
+
+| Risk | Impact | Mitigation |
+| --- | --- | --- |
+| Browser MediaRecorder differences | Recording may fail on some devices | Compatibility testing and MIME fallback list |
+| Large uploads on mobile networks | Student frustration and failed submissions | Short max duration, upload progress, retry |
+| Storage cost growth from retakes | Higher Cloudflare costs | Store only the latest answer reference, mark replaced assets as superseded, and run scheduled cleanup |
+| Playback URL expiry | Teacher cannot play older answers | Store `assetId` and `storageKey`, then generate playback URLs on demand |
+| Permission denial | Student cannot answer | Clear permission guidance and teacher visibility into incomplete answers |
+| Privacy expectations | Sensitive student video data mishandled | Strict access checks, short-lived URLs, retention policy |
+
+## Dependencies
+
+- Browser `MediaRecorder` and `getUserMedia` support.
+- Cloudflare-compatible video object storage.
+- Existing storage/presign utility or storage provider abstraction.
+- Shared question renderer architecture.
+- Existing manual grading flow.
+- Dashboard translation infrastructure.
+
+## Future Enhancements
+
+- Teacher-configurable retake limit.
+- One-take-only mode.
+- Automatic thumbnail generation.
+- Audio-only recording question type.
+- Speech transcription.
+- AI-assisted rubric feedback.
+- Recording countdown before capture starts.
+- Organization-level recording retention settings.
+- Upload resume for unstable mobile networks.
+- Media manager integration for all recording answers.
diff --git a/prd/webhooks/README.md b/prd/webhooks/README.md
index ea765056..990be27f 100644
--- a/prd/webhooks/README.md
+++ b/prd/webhooks/README.md
@@ -44,7 +44,7 @@ Today, ClassroomIO has no outbound webhook product:
 - `apps/api/src/routes/course/payment-request.ts`
 - `apps/dashboard/src/routes/org/[slug]/settings/integrations/+page.svelte`
 - `apps/dashboard/src/lib/features/settings/pages/integrations.svelte`
-- `prd/public-api/README.md`
+- `prd/public-api [DONE]/README.md`
 
 ## Product Goals