Deploy Learn8 Demo Space

.dockerignore

@@ -0,0 +1,6 @@
+.git
+.github
+.next
+node_modules
+npm-debug.log
+out

.github/workflows/nextjs.yml

@@ -0,0 +1,87 @@
+# Sample workflow for building and deploying a Next.js site to GitHub Pages
+#
+# To get started with Next.js see: https://nextjs.org/docs/getting-started
+#
+name: Deploy Next.js site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "deploy-pages"
+  cancel-in-progress: true
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Detect package manager
+        id: detect-package-manager
+        run: |
+          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
+            echo "manager=yarn" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            echo "runner=yarn" >> $GITHUB_OUTPUT
+            exit 0
+          elif [ -f "${{ github.workspace }}/package.json" ]; then
+            echo "manager=npm" >> $GITHUB_OUTPUT
+            echo "command=ci" >> $GITHUB_OUTPUT
+            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Unable to determine package manager"
+            exit 1
+          fi
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Restore cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            .next/cache
+          # Generate a new cache whenever packages or source files change.
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          # If source files changed but packages didn't, rebuild from a prior cache.
+          restore-keys: |
+            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
+      - name: Install dependencies
+        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+      - name: Build with Next.js
+        run: ${{ steps.detect-package-manager.outputs.runner }} next build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./out
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -0,0 +1,4 @@
+node_modules
+.next
+out
+

Dockerfile

@@ -0,0 +1,17 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+COPY package.json package-lock.json ./
+RUN npm ci
+
+COPY . .
+
+ENV HUGGINGFACE_SPACE=1
+RUN npm run build
+
+RUN npm install -g serve
+
+EXPOSE 7860
+
+CMD ["serve", "-s", "out", "-l", "7860"]

README.md

@@ -1,10 +1,32 @@
 ---
-title: README
-emoji: 🏢
-colorFrom: pink
-colorTo: green
+title: Learn8 Demo
+emoji: "📘"
+colorFrom: blue
+colorTo: indigo
 sdk: docker
+app_port: 7860
 pinned: false
 ---
 
-Edit this `README.md` markdown file to author your organization card.
+# Learn8 Demo
+
+Next.js UI prototype prepared for deployment on Hugging Face Spaces.
+
+## Local development
+
+```bash
+npm install
+npm run dev
+```
+
+Local routes with the default `/UI` base path:
+
+- `http://localhost:3000/UI/login`
+- `http://localhost:3000/UI/welcome`
+- `http://localhost:3000/UI/home`
+- `http://localhost:3000/UI/store`
+- `http://localhost:3000/UI/forge`
+
+## Hugging Face Spaces
+
+This repo includes a Docker configuration for Spaces. In the container build, the app disables the local `/UI` base path and serves the static export at the Space root on port `7860`.

UIUX_REDESIGN.md

@@ -0,0 +1,424 @@
+# Learn8: Gamified Learning Platform - Frontend Blueprint
+> **[Agent Directive]**
+> You are an expert Frontend AI Architect. Your task is to execute a complete Consumer-Facing UI/UX build for a brand new application named "Learn8" based *strictly* on this manual. 
+> 
+> You do NOT need any prior context about any existing backend. You are building a **Pure Frontend Prototype** that uses local state (Zustand + LocalStorage) and embedded Mock Data to simulate a flawless, gamified learning experience (similar to Duolingo or Brilliant).
+> 
+> Create the directory structure implicitly based on modern Next.js 14+ conventions.
+
+---
+
+## 🌟 1. Project Introduction: What is Learn8?
+
+**Learn8** is a next-generation adaptive learning platform that transforms static, boring knowledge (like PDFs, textbooks, or notes) into an immersive, gamified "Infinite Game." 
+
+Unlike traditional LMS (Learning Management Systems) or static flashcard apps, Learn8 dynamically breaks down knowledge into a visual "Skill Tree" (Syllabus Map). Each concept or exercise is delivered through highly interactive, bite-sized mini-games:
+- Dragging and dropping anatomy labels (`SpatialAnatomy`)
+- Arranging logical sequences of events (`LogicChain`)
+- Categorizing abstract concepts into buckets (`TaxonomyMatrix`)
+
+**The Goal**: Make learning feel less like reading a textbook and more like exploring a universe and leveling up a character.
+
+---
+
+## 🖼️ 2. Screen-by-Screen Layout Specifications (The Blueprint)
+
+This section defines the precise visual layout and components present on every major screen to ensure a seamless flow.
+
+### Screen A: Welcome & Authentication (`/app/(onboarding)/login/page.tsx`)
+**Vibe**: Inviting, frictionless, premium.
+- **Background**: Slow-moving ambient glow (e.g., deep blue with a soft purple aura).
+- **Layout**: Centered `DeepGlassCard`.
+- **Content**:
+  - *Header*: The Learn8 Logo (glowing) and a short tagline ("Unlock the Infinite Game").
+  - *Main*: Large, prominent "Continue with Google/Apple" buttons (using sleek icons).
+  - *Divider*: "Or continue with email" (subtle text).
+  - *Inputs*: Elegant email/password fields with floating labels. Border glows on focus.
+  - *Action*: "Start exploring" button.
+- **Transitions**: Upon success, fluidly scales up the card and fades into the Onboarding Survey.
+
+### Screen B: Onboarding Survey (`/app/(onboarding)/welcome/page.tsx`)
+**Vibe**: Immersive, mysterious, welcoming. Like character creation in an RPG.
+- **Background**: Continues seamlessly from the login screen.
+- **Center Focus**: A `DeepGlassCard` (max-width: 2xl) acting as a conversational carousel.
+  - *Top*: A friendly greeting/header ("Welcome Explorer").
+  - *Middle*: An animated selection grid for topics (e.g., Tech, History, Med) or a single elegant text input for their name/goal.
+  - *Bottom*: A "Next" or "Start Journey" `GameButton` that pulses.
+- **Transitions**: Slide in/out using `framer-motion` `AnimatePresence` as the user answers 2-3 questions. Routes to Dashboard upon completion.
+
+### Screen C: The Learning Hub / Dashboard (`/app/(dashboard)/home/page.tsx`)
+**Vibe**: The player's home base. Clean, structured, motivating.
+- **Top Navigation Bar (Sticky)**: `TopStatsBar`
+  - *Left*: User Avatar / Mascot icon. Clicking opens the Profile/Settings modal.
+  - *Right*: 
+    - 🔥 Streak Count (e.g., "12 Days")
+    - 💎 Gem Balance (e.g., "1,500"). Clicking this routes to the Top-Up Store.
+    - 🛡️ Current Rank/Level Badge.
+- **Hero Section (Top Center)**: "Continue Journey" Card.
+  - A wide `DeepGlassCard`. Displays a thumbnail of the current active course, a progress bar (e.g., "75% complete"), and a massive, glowing "Resume" button.
+- **Secondary Section (Middle)**: "Forge a New Universe" (Upload Zone).
+  - A beautifully styled dashed border dropzone using `framer-motion` for a hover scaling effect.
+  - *Center icon*: A glowing magical portal or book.
+  - *Text*: "Drop a PDF or enter a topic to forge a new learning path." (Simulates routing to The Forge on click).
+- **Bottom Section**: "Your Library" - A horizontal scrollable list or grid of generic course thumbnails.
+
+### Screen D: The Treasury / Top-Up Store (`/app/(dashboard)/store/page.tsx`)
+**Vibe**: Premium, enticing, rewarding.
+- **Top Navigation Bar (Sticky)**: Same `TopStatsBar` as Dashboard, but the "Back" arrow replaces the Avatar.
+- **Header**: "The Treasury: Fuel Your Journey" - Get Gems (💎) to forge new courses or ask for hints.
+- **Layout**: A row of 3 `DeepGlassCard` pricing tiers centered on screen:
+  - **Tier 1 (Starter)**: "Handful of Gems (500 💎)" - Minimalist design.
+  - **Tier 2 (Popular)**: "Chest of Gems (2000 💎)" - Emits a slight glow, features a "Best Value" ribbon/badge in the corner.
+  - **Tier 3 (Pro Learner)**: "Infinite Energy Subscription" - Distinct color styling (e.g., gold or neon purple background with animated gradients).
+- **Interactions**: Clicking a tier opens a sleek, native-feeling fake payment modal (e.g., an Apple Pay style slide-up modal from the bottom).
+
+### Screen E: User Profile & Settings Modal
+**Vibe**: Personalized, highly polished dashboard.
+- **Interaction**: This is NOT a separate page. It is an overlay (`AnimatePresence` modal) triggered by clicking the Avatar in the Top Navigation.
+- **Layout**: Centered, tall `DeepGlassCard`.
+- **Content**:
+  - *Header*: Huge Avatar with an "Edit" icon overlay. Username and Title (e.g., "Level 5 Quantum Scholar").
+  - *Stats Grid*: Total XP earned, Longest Streak, Courses Completed.
+  - *Preferences*: Toggles for "Sound Effects", "Dark/Light Theme" (though default is Dark Glass), and "Difficulty scaling".
+  - *Danger Zone*: A subtle "Log Out" button at the very bottom.
+
+### Screen F: The Forge (Loading/Generation) (`/app/forge/page.tsx`)
+**Vibe**: High-tech, anticipation.
+- **Layout**: Full screen, hiding all navigation.
+- **Center**: A pulsing, complex SVG animation (like an atom, a neural network, or a magical anvil forging rings).
+- **Text (Below Animation)**: Large, dynamic typewriter text updating via `setTimeout` every 2 seconds:
+  - "Scanning document..." -> "Extracting key concepts..." -> "Forging interactive stages..."
+- **Transition**: Ends with a bright flash (white screen) leading directly to the Syllabus Map.
+
+### Screen G: Syllabus Map / Skill Tree (`/app/(dashboard)/map/[courseId]/page.tsx`)
+**Vibe**: Exploration, non-linear progression.
+- **Top Bar**: Standard `TopStatsBar` with a "Back to Hub" arrow on the left.
+- **Main Area**: A massive scrolling (or simple vertical) canvas.
+  - *Path*: A winding SVG dashed line connecting nodes from bottom to top or left to right.
+  - *Nodes*: Circular icons representing "Units" or "Concepts".
+    - *Locked*: Grayed out, padlock icon. Not clickable.
+    - *Available*: Full color, slowly breathing (scaling up and down slightly), surrounded by a glowing aura.
+    - *Completed*: Gold/Green color, checkmark or star icon.
+- **Interaction**: Clicking an *Available* node triggers an immediate route change to the Arena.
+
+### Screen H: The Arena (Stage Player) (`/app/(arena)/play/[nodeId]/page.tsx`)
+**Vibe**: Absolute focus. Zero distractions.
+- **Top Navigation (Minimalist)**: 
+  - *Left*: A discreet "X" to exit (triggers a "Lose progress?" warning modal).
+  - *Center*: `TopProgressBar`. A sleek, continuous line that fills up smoothly as stages are passed.
+  - *Right*: Empty (keep distraction-free).
+- **Center Stage (The Game Area)**:
+  - Occupies 70% of the screen.
+  - Renders the specific interactive component (`LogicChain`, `TaxonomyMatrix`, etc.). Elements must be large, chunky, and touch/drag-friendly.
+- **Bottom Action Area**:
+  - *Floating Mascot (Bottom Right Corner)*: Thinks/reacts. Clickable to ask for a "Hint" (deducts 10 💎 gems).
+  - *Action Bar (Fixed at bottom)*: A full-width `GameButton` saying "CHECK".
+- **Feedback Overlay (Bottom Sheet)**: 
+  - Upon clicking "CHECK", a colored panel slides up from the bottom edge covering the Action Bar.
+  - *If Correct*: Panel is bright green. Plays a success chime. Confetti explodes on screen. Button changes to "CONTINUE".
+  - *If Incorrect*: Panel is red/orange. Plays an error buzz and shakes the screen physically. Displays the `feedback.error` message and a hint. Button changes to "GOT IT".
+
+### Screen I: Victory Screen (`/app/(arena)/play/[nodeId]/result/page.tsx`)
+**Vibe**: Celebration, dopamine hit.
+- **Background**: Darkens with a spotlight effect.
+- **Animations**: Massive confetti burst. A giant 3D-looking chest or star drops into the center with a bounce physics effect (`y: -100` to `0`).
+- **Stats Presentation**:
+  - "LESSON CLEARED!" large header.
+  - A card slides up showing tally counters rolling quickly from 0:
+    - Accuracy: 100%
+    - Time: 2m 14s
+    - XP Gained: +50 XP
+  - An XP bar dynamically fills up, triggering a "Level Up!" flash if it crosses a threshold defined in `useUserStore`.
+- **Bottom**: A massive, glowing "Back to Map" button that routes the user back, initiating the unlock animation of the next node.
+
+### Universal State: Graceful Errors & Empty States
+**Vibe**: Forgiving, helpful.
+- **Empty Library**: Instead of a blank space, show a ghosted illustration of an empty bookshelf and a pulsing arrow pointing to the "Forge" dropzone.
+- **404/Error**: A friendly Mascot looking confused with a "Let's get you back home" button. Never show a raw stack trace.
+
+---
+
+## 🏗️ 3. Technical Stack & Foundation
+
+*   **Framework**: Next.js 14+ (App Router).
+*   **Styling**: Tailwind CSS (with specific arbitrary values for glassmorphism).
+*   **Icons**: `lucide-react`.
+*   **Animation**: `framer-motion` (Mandatory for all page transitions, modal popups, and button interactions).
+*   **Confetti/Effects**: `react-canvas-confetti` (For victory screens).
+*   **State Management**: `zustand` (Used extensively to replace backend APIs).
+
+### The UX Philosophy
+*   **Zero Developer UI**: Remove all JSON viewers, "Debug" sidebars, "System Admin" panels, and raw data dumps.
+*   **The Ultimate Glassmorphism (iOS 26 Style)**: Cards and overlays must use deep blurring combined with extremely subtle SVG noise textures to prevent color banding and add premium physical realism.
+
+### Frontend Architecture Patterns
+*   **Feature-Sliced Design (FSD) Lite**: Group components, stores, and hooks by domain/feature (e.g., `features/arena`, `features/dashboard`) rather than technical type, keeping related logic co-located.
+*   **Container / Presentational Pattern**: Keep complex React components separated. The "Container" (e.g., `/app/(arena)/play/[nodeId]/page.tsx`) handles Zustand store reading and routing. "Presentational" components (e.g., `SpatialAnatomy.tsx`) only receive props and emit events, remaining completely pure and testable.
+*   **Store Segregation (Zustand)**: Do not use one monolithic store. Segment by domain:
+    - `useUserStore`: Global persisted state (XP, streaks, preferences).
+    - `useCourseStore`: Domain data (curriculum structure, node unlock states).
+    - `useArenaStore`: Ephemeral local state (current question index, animation triggers during a game session).
+*   **Animation Driven Flow**: Do not rely strictly on instantaneous state changes. Use `framer-motion`'s `onAnimationComplete` callbacks to trigger state updates (e.g., unlocking a node only *after* the victory confetti finishes).
+
+---
+
+## 💎 4. The Core UI Component: `DeepGlassCard`
+
+Whenever you need a container (dashboard tiles, store tiers, map nodes, feedback modals), use this specific implementation to achieve the required "iOS 26 Premium Glass" aesthetic. 
+
+```tsx
+"use client";
+import React from 'react';
+import { motion, HTMLMotionProps } from 'framer-motion';
+// Assume `cn` is a standard class merging utility (like clsx + twMerge)
+import { cn } from '@/lib/utils'; 
+
+interface DeepGlassCardProps extends HTMLMotionProps<"div"> {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function DeepGlassCard({ children, className, ...props }: DeepGlassCardProps) {
+  return (
+    <motion.div 
+      className={cn(
+        "relative group rounded-3xl p-8 overflow-hidden",
+        "bg-slate-900/40",                              // Dark mode glass base
+        "backdrop-blur-[40px] saturate-150",            // Heavy blur and color boost
+        "border border-white/10",                       // Edge highlight
+        /* Thickness (top inner glow) and soft environment drop shadow */
+        "shadow-[inset_0_1px_1px_rgba(255,255,255,0.15),_0_8px_32px_rgba(0,0,0,0.3)]",
+        "transition-all duration-500 hover:shadow-[inset_0_1px_1px_rgba(255,255,255,0.2),_0_16px_48px_rgba(0,0,0,0.4)]",
+        className
+      )}
+      {...props}
+    >
+      {/* The Noise Texture layer: crucial for physical realism (prevents color banding) */}
+      <div className="absolute inset-0 opacity-[0.03] pointer-events-none mix-blend-overlay"
+           style={{
+             backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E")`
+           }}
+      />
+      
+      {/* Content Layer */}
+      <div className="relative z-10 text-white">
+        {children}
+      </div>
+      
+      {/* Dynamic light reflection on hover */}
+      <div className="absolute inset-0 bg-gradient-to-br from-white/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
+    </motion.div>
+  );
+}
+```
+
+---
+
+## 🗂️ 5. Next.js App Router Structure & Implementation
+
+Structure the application exactly as follows. 
+
+```text
+src/
+├── app/
+│   ├── layout.tsx                     # Global App layout (Include modern sans-serif fonts)
+│   ├── globals.css                    # Tailwind directives + custom @layer utilities
+│   ├── (onboarding)/                  # Route Group 1: First-time entry
+│   │   ├── login/page.tsx             # The premium Welcome/Auth screen (Screen A)
+│   │   └── welcome/page.tsx           # Interactive "Sorting Hat" questionnaire (Screen B)
+│   ├── (dashboard)/                   # Route Group 2: The Hub
+│   │   ├── layout.tsx                 # Contains the Top Navigation Bar (Avatar, Streak, Gems)
+│   │   ├── home/page.tsx              # "Continue Journey" & "Create New Universe" dropzone (Screen C)
+│   │   ├── store/page.tsx             # The Treasury Top-up Center (Screen D)
+│   │   └── map/[courseId]/page.tsx    # The non-linear Skill Tree / Island Map view (Screen G)
+│   ├── (arena)/                       # Route Group 3: The Active Learning Zone
+│   │   └── play/[nodeId]/             # The Stage Player (No navigation bars allowed, pure focus) (Screen H)
+│   │       ├── page.tsx               
+│   │       └── result/page.tsx        # The Victory Celebration (Screen I)
+│   └── forge/page.tsx                 # The "Fake Loading" screen mocking AI generation (Screen F)
+│
+├── components/
+│   ├── ui/                            # Reusable base components
+│   │   ├── DeepGlassCard.tsx          # ⭐ The core container
+│   │   ├── GameButton.tsx             # framer-motion wrapped button with scale-down tap
+│   │   ├── TopProgressBar.tsx         # Fills up smoothly as stages are completed
+│   │   └── MascotHint.tsx             # Floating right-bottom character for AI hints
+│   └── shared/
+│       ├── TopStatsBar.tsx            # Renders Rank, Fire 🔥, and Diamond 💎 icons
+│       └── ProfileModal.tsx           # The slide-up Settings/Profile overlay (Screen E)
+│
+├── stores/                            # Pure Frontend Backend (Zustand + Persist)
+│   ├── useUserStore.ts                # App State: xp, level, streak, gems, lastActiveNodeId
+│   ├── useCourseStore.ts              # App State: Loads mock data, tracks unlocked nodes
+│   └── useArenaStore.ts               # Local State: currentStageIndex, isCorrect, showFeedback
+│
+└── data/                              # Mock Data Sources (See Section 6)
+    ├── mock_medicine.ts               
+    └── mock_calculus.ts               
+```
+
+---
+
+## 🧪 6. Pure Frontend Mock Data Context
+
+To allow immediate UI construction without backend schema definitions, you must use these EXACT two datasets as your single source of truth for the curriculum structure. The UI must dynamically render the `stage.component` string into an actual interactive view.
+
+### Mock 1: Medicine (Cardiovascular)
+```typescript
+// Path: src/data/mock_medicine.ts
+export const mockMedicineUnit = {
+    unitId: "med-u1",
+    unitTitle: "The Heart & Blood Flow",
+    nodes: [
+        {
+            id: "med-n1",
+            title: "Heart Chambers (心臟結構)",
+            description: "Identify the spatial anatomy of the heart.",
+            type: "concept",
+            status: "available", // Only the first node is unlocked
+            stages: [
+                {
+                    stageId: "med-s1",
+                    topic: "Identify the Left Ventricle",
+                    module: "Instruction",
+                    component: "SpatialAnatomy",
+                    skin: "Scientific",
+                    config: {
+                        data: {
+                            model: "heart-cross-section",
+                            labels: [
+                                { id: "ra", label: "Right Atrium" },
+                                { id: "rv", label: "Right Ventricle" },
+                                { id: "la", label: "Left Atrium" },
+                                { id: "lv", label: "Left Ventricle" }
+                            ]
+                        },
+                        initialState: {}
+                    },
+                    validation: { type: "exact", condition: { target: "lv" } },
+                    feedback: { 
+                        success: "Correct! The Left Ventricle pumps blood to the entire body.", 
+                        error: "Incorrect. Hint: Look at the thicker muscular wall at the bottom right of the diagram.",
+                        hint: "Where is the thickest muscle needed?"
+                    }
+                }
+            ]
+        },
+        {
+            id: "med-n2",
+            title: "Circulation Path (血液循環)",
+            description: "Arrange the flow of deoxygenated blood.",
+            type: "exercise",
+            status: "locked",
+            stages: [
+                {
+                    stageId: "med-s2",
+                    topic: "Pulmonary Circulation",
+                    module: "Practice",
+                    component: "LogicChain",
+                    skin: "Classic",
+                    config: {
+                        data: {
+                            nodes: [
+                                "Superior Vena Cava", 
+                                "Right Atrium", 
+                                "Right Ventricle", 
+                                "Pulmonary Artery",
+                                "Lungs"
+                            ]
+                        },
+                        initialState: {}
+                    },
+                    validation: { type: "exact", condition: {} },
+                    feedback: { 
+                        success: "Perfect Sequence! You understand the path to the lungs.", 
+                        error: "Not quite. Remember blood enters the atrium before the ventricle.",
+                        hint: "Veins -> Atrium -> Ventricle -> Artery"
+                    }
+                }
+            ]
+        }
+    ]
+};
+```
+
+### Mock 2: Calculus (Limits & Derivatives)
+```typescript
+// Path: src/data/mock_calculus.ts
+export const mockCalculusUnit = {
+    unitId: "calc-u1",
+    unitTitle: "Limits & Derivatives",
+    nodes: [
+        {
+            id: "calc-n1",
+            title: "Concept of Limits",
+            description: "Classify scenarios where limits exist or fail.",
+            type: "concept",
+            status: "available",
+            stages: [
+                {
+                    stageId: "calc-s1",
+                    topic: "Limit Existence",
+                    module: "Instruction",
+                    component: "TaxonomyMatrix",
+                    skin: "Code",
+                    config: {
+                        data: {
+                            buckets: ["Limit Exists", "Limit Does Not Exist"],
+                            items: [
+                                { id: "limit1", content: "Left limit = 5, Right = 5" },
+                                { id: "limit2", content: "Left limit = 3, Right = -3 (Jump)" },
+                                { id: "limit3", content: "Approaches infinity (Asymptote)" },
+                                { id: "limit4", content: "Continuous polynomial" }
+                            ]
+                        },
+                        initialState: { assignments: {} }
+                    },
+                    validation: { type: "exact", condition: {} },
+                    feedback: { 
+                        success: "Excellent classification! Limits require agreement from both sides.", 
+                        error: "Check the definitions of jumps and asymptotes.",
+                        hint: "If left and right don't match, it doesn't exist."
+                    }
+                }
+            ]
+        },
+        {
+            id: "calc-n2",
+            title: "Derivative Rules",
+            description: "Match base functions to their derivatives.",
+            type: "exercise",
+            status: "locked",
+            stages: [
+                {
+                    stageId: "calc-s2",
+                    topic: "Basic Differentiation",
+                    module: "Practice",
+                    component: "PatternMatcher",
+                    skin: "Scientific",
+                    config: {
+                        data: {
+                            pairs: [
+                                { id: "diff1", left: "f(x) = x³", right: "f'(x) = 3x²" },
+                                { id: "diff2", left: "f(x) = sin(x)", right: "f'(x) = cos(x)" },
+                                { id: "diff3", left: "f(x) = eˣ", right: "f'(x) = eˣ" },
+                                { id: "diff4", left: "f(x) = ln(x)", right: "f'(x) = 1/x" }
+                            ]
+                        },
+                        initialState: {}
+                    },
+                    validation: { type: "exact", condition: {} },
+                    feedback: { 
+                        success: "All matched! You master the basic power and transcendental rules.", 
+                        error: "Review your trig and exponential derivatives.",
+                        hint: "The derivative of eˣ is special!"
+                    }
+                }
+            ]
+        }
+    ]
+};
+```
+
+---
+> **[End of Directives]** Ensure every file you create adheres strictly to the specifications laid out above. Build the entire ecosystem mock-first without any backend connections.

app/(arena)/play/[nodeId]/ArenaClient.tsx

@@ -0,0 +1,1001 @@
+"use client";
+
+import React, { useState, useCallback, useMemo, useRef, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useRouter, useParams } from "next/navigation";
+import TopProgressBar from "@/components/ui/TopProgressBar";
+import GameButton from "@/components/ui/GameButton";
+import useArenaStore from "@/stores/useArenaStore";
+import { REMEDY_THRESHOLD } from "@/stores/useArenaStore";
+import useUserStore from "@/stores/useUserStore";
+import useCourseStore from "@/stores/useCourseStore";
+import TaxonomyMatrix from "@/components/arena/TaxonomyMatrix";
+import SpatialAnatomy from "@/components/arena/SpatialAnatomy";
+import LogicChain from "@/components/arena/LogicChain";
+
+/* ═══════════════════ Taxonomy answer keys ═══════════════════ */
+
+const TAXONOMY_ANSWERS: Record<string, Record<string, string>> = {
+  "calc-s1": {
+    limit1: "Limit Exists",
+    limit2: "Limit Does Not Exist",
+    limit3: "Limit Does Not Exist",
+    limit4: "Limit Exists",
+  },
+};
+
+/* ═══════════════════ Data ═══════════════════ */
+
+interface MatchPair { left: string; right: string }
+
+const STAGES: { question: string; pairs: MatchPair[] }[] = [
+  {
+    question: "Match the English word to its French translation",
+    pairs: [
+      { left: "Apple", right: "Pomme" },
+      { left: "Book", right: "Livre" },
+      { left: "House", right: "Maison" },
+      { left: "Cat", right: "Chat" },
+    ],
+  },
+  {
+    question: "Match the animals",
+    pairs: [
+      { left: "Dog", right: "Chien" },
+      { left: "Bird", right: "Oiseau" },
+      { left: "Fish", right: "Poisson" },
+      { left: "Horse", right: "Cheval" },
+    ],
+  },
+  {
+    question: "Match the colors",
+    pairs: [
+      { left: "Red", right: "Rouge" },
+      { left: "Blue", right: "Bleu" },
+      { left: "Green", right: "Vert" },
+      { left: "White", right: "Blanc" },
+    ],
+  },
+];
+
+/* ═══════════════════ Helpers ═══════════════════ */
+
+function shuffle<T>(arr: T[]): T[] {
+  const a = [...arr];
+  for (let i = a.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [a[i], a[j]] = [a[j], a[i]];
+  }
+  return a;
+}
+
+/* ═══════════════════ Page ═══════════════════ */
+
+export default function ArenaClient() {
+  const router = useRouter();
+  const params = useParams();
+  const nodeId = params.nodeId as string;
+
+  // Arena store
+  const arenaStore = useArenaStore();
+  const { startSession, markCorrect: arenaMarkCorrect, markIncorrect: arenaMarkIncorrect, useHint: arenaUseHint, triggerConfetti: arenaTriggerConfetti, triggerShake: arenaTriggerShake } = arenaStore;
+
+  // User store
+  const spendGems = useUserStore((s) => s.spendGems);
+  const setLastActiveNode = useUserStore((s) => s.setLastActiveNode);
+
+  // Course store – load node data for dynamic stages
+  const loadMockCourses = useCourseStore((s) => s.loadMockCourses);
+  const getNode = useCourseStore((s) => s.getNode);
+  const addRemedyNode = useCourseStore((s) => s.addRemedyNode);
+  const remedyNodes = useCourseStore((s) => s.remedyNodes);
+
+  useEffect(() => {
+    loadMockCourses();
+  }, [loadMockCourses]);
+
+  const nodeData = getNode(nodeId);
+  const dynamicStages = nodeData?.stages ?? [];
+  const hasDynamic = dynamicStages.length > 0;
+
+  // Determine course id from node data
+  const courseId = useMemo(() => {
+    const courses = useCourseStore.getState().courses;
+    for (const c of Object.values(courses)) {
+      if (c.nodes.some((n: { id: string }) => n.id === nodeId)) return c.unitId;
+    }
+    return "med-u1";
+  }, [nodeId]);
+
+  const [stageIdx, setStageIdx] = useState(0);
+
+  // Current dynamic stage (if any)
+  const currentDynStage = hasDynamic ? dynamicStages[stageIdx] : null;
+  const isDynamicTaxonomy = currentDynStage?.component === "TaxonomyMatrix";
+  const isDynamicMatcher = currentDynStage?.component === "PatternMatcher";
+  const isDynamicAnatomy = currentDynStage?.component === "SpatialAnatomy";
+  const isDynamicChain = currentDynStage?.component === "LogicChain";
+  const isDynamicCustom = isDynamicTaxonomy || isDynamicAnatomy || isDynamicChain;
+
+  // For PatternMatcher: convert stage data to match-pair format
+  const dynamicMatchStage = useMemo(() => {
+    if (!isDynamicMatcher || !currentDynStage) return null;
+    const pairs = (currentDynStage.config.data as Record<string, unknown[]>).pairs as { id: string; left: string; right: string }[];
+    return {
+      question: `${currentDynStage.topic}: ${nodeData?.description ?? "Match each pair"}`,
+      pairs: pairs.map((p) => ({ left: p.left, right: p.right })),
+    };
+  }, [isDynamicMatcher, currentDynStage, nodeData]);
+  const [selectedLeft, setSelectedLeft] = useState<string | null>(null);
+  const [selectedRight, setSelectedRight] = useState<string | null>(null);
+  const [matched, setMatched] = useState<string[]>([]);
+  const [wrongPair, setWrongPair] = useState<[string, string] | null>(null);
+  const [feedback, setFeedback] = useState<"correct" | "incorrect" | null>(null);
+  const [showConfetti, setShowConfetti] = useState(false);
+  const [hintUsed, setHintUsed] = useState(false);
+  const [hintPair, setHintPair] = useState<string | null>(null);
+  const [showRemedyPopup, setShowRemedyPopup] = useState(false);
+  const remedyShownRef = useRef(false);
+
+  const stage = dynamicMatchStage || STAGES[stageIdx % STAGES.length];
+  const totalStages = hasDynamic ? dynamicStages.length : STAGES.length;
+  const progress = (stageIdx / totalStages) * 100;
+
+  // Start arena session on mount (after totalStages settled)
+  useEffect(() => {
+    startSession({ nodeId, courseId, totalStages });
+    setLastActiveNode(nodeId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [nodeId]);
+
+  /* ── Remedy trigger: when consecutive errors reach threshold (once per node) ── */
+  useEffect(() => {
+    if (
+      arenaStore.remedyTriggered &&
+      !remedyShownRef.current &&
+      nodeData
+    ) {
+      // Only show if this node doesn't already have a remedy node
+      const alreadyHasRemedy = remedyNodes.some((r) => r.sourceNodeId === nodeId);
+      remedyShownRef.current = true;
+      if (!alreadyHasRemedy) {
+        addRemedyNode(courseId, nodeId, nodeData.title);
+        setShowRemedyPopup(true);
+      }
+    }
+  }, [arenaStore.remedyTriggered, courseId, nodeId, nodeData, addRemedyNode, remedyNodes]);
+
+  // Shuffle only on client to avoid hydration mismatch
+  const [shuffledRight, setShuffledRight] = useState<string[]>(
+    () => stage.pairs.map((p) => p.right) // initial: original order (matches SSR)
+  );
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    if (!isDynamicCustom) {
+      setShuffledRight(shuffle(stage.pairs.map((p) => p.right)));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stageIdx]);
+
+  const allMatched = matched.length === stage.pairs.length;
+
+  /* Select a left word */
+  const pickLeft = useCallback(
+    (word: string) => {
+      if (matched.includes(word) || feedback) return;
+      setSelectedLeft(word);
+      setWrongPair(null);
+    },
+    [matched, feedback]
+  );
+
+  /* Select a right word */
+  const pickRight = useCallback(
+    (word: string) => {
+      if (feedback) return;
+      if (!selectedLeft) return;
+      // check if this right word is already matched
+      const alreadyMatched = stage.pairs.find(
+        (p) => p.right === word && matched.includes(p.left)
+      );
+      if (alreadyMatched) return;
+      setSelectedRight(word);
+    },
+    [selectedLeft, matched, feedback, stage.pairs]
+  );
+
+  /* Check answer (called when CHECK button tapped) */
+  const handleCheck = useCallback(() => {
+    if (!selectedLeft || !selectedRight) return;
+
+    const pair = stage.pairs.find((p) => p.left === selectedLeft);
+    if (pair && pair.right === selectedRight) {
+      // Correct match
+      setMatched((prev) => [...prev, selectedLeft]);
+      setSelectedLeft(null);
+      setSelectedRight(null);
+      setWrongPair(null);
+    } else {
+      // Wrong
+      setWrongPair([selectedLeft, selectedRight]);
+      arenaMarkIncorrect();
+      arenaTriggerShake();
+      setTimeout(() => {
+        setWrongPair(null);
+        setSelectedLeft(null);
+        setSelectedRight(null);
+      }, 800);
+    }
+  }, [selectedLeft, selectedRight, stage.pairs, arenaMarkIncorrect, arenaTriggerShake]);
+
+  /* Stage complete → feedback (only for match stages) */
+  React.useEffect(() => {
+    if (!isDynamicCustom && allMatched && !feedback) {
+      const timer = setTimeout(() => {
+        setFeedback("correct");
+        setShowConfetti(true);
+        arenaMarkCorrect();
+        arenaTriggerConfetti();
+      }, 400);
+      return () => clearTimeout(timer);
+    }
+  }, [allMatched, feedback, arenaMarkCorrect, arenaTriggerConfetti, isDynamicCustom]);
+
+  /* Continue to next stage or result */
+  const handleContinue = useCallback(() => {
+    if (stageIdx < totalStages - 1) {
+      setStageIdx((i) => i + 1);
+      setMatched([]);
+      setSelectedLeft(null);
+      setSelectedRight(null);
+      setWrongPair(null);
+      setFeedback(null);
+      setShowConfetti(false);
+      setHintUsed(false);
+      setHintPair(null);
+    } else {
+      router.push(`/play/${nodeId}/result`);
+    }
+  }, [stageIdx, totalStages, router]);
+
+  /* Hint */
+  const handleHint = useCallback(() => {
+    if (hintUsed || allMatched) return;
+    // Spend gems (10 per hint)
+    const canAfford = spendGems(10);
+    if (!canAfford) return;
+    arenaUseHint();
+    const unmatched = stage.pairs.filter((p) => !matched.includes(p.left));
+    if (unmatched.length > 0) {
+      const pair = unmatched[0];
+      setHintPair(pair.left);
+      setSelectedLeft(pair.left);
+      setSelectedRight(pair.right);
+      setHintUsed(true);
+      // auto-match after a short delay
+      setTimeout(() => {
+        setMatched((prev) => [...prev, pair.left]);
+        setSelectedLeft(null);
+        setSelectedRight(null);
+        setHintPair(null);
+      }, 1200);
+    }
+  }, [hintUsed, allMatched, stage.pairs, matched, spendGems, arenaUseHint]);
+
+  /* ── AI Chat Assistant state ── */
+  const [chatInput, setChatInput] = useState("");
+  const [chatMessages, setChatMessages] = useState<{ id: number; role: "user" | "assistant"; text: string }[]>([]);
+  const chatEndRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [chatMessages]);
+
+  const handleChatSend = useCallback(() => {
+    const trimmed = chatInput.trim();
+    if (!trimmed) return;
+    const userMsg = { id: Date.now(), role: "user" as const, text: trimmed };
+    const botMsg = { id: Date.now() + 1, role: "assistant" as const, text: trimmed };
+    setChatMessages((prev) => [...prev, userMsg, botMsg]);
+    setChatInput("");
+  }, [chatInput]);
+
+  const handleChatKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleChatSend();
+    }
+  }, [handleChatSend]);
+
+  return (
+    <div className="relative min-h-screen bg-gradient-to-br from-[#edf7fb] via-[#c9e6f2] to-[#a3d5e8] flex flex-col">
+      {/* ─── Top Nav ─── */}
+      <div className="flex items-center gap-3 px-8 pt-4 pb-1">
+        <button
+          onClick={() => router.push(`/map/${courseId}`)}
+          className="h-9 w-9 rounded-full bg-white/60 backdrop-blur flex items-center justify-center hover:bg-white/80 transition"
+        >
+          <svg viewBox="0 0 24 24" className="h-5 w-5 text-brand-gray-600" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
+            <path d="M18 6L6 18M6 6l12 12" />
+          </svg>
+        </button>
+        <div className="flex-1">
+          <TopProgressBar progress={progress} className="h-3" />
+        </div>
+      </div>
+
+      {/* ─── Main content: two columns ─── */}
+      <div className="flex-1 flex gap-8 px-8 pb-4 w-full">
+        {/* ── Left: Question + Match Grid ── */}
+        <div className="flex-1 flex flex-col min-w-0">
+          {isDynamicAnatomy && currentDynStage ? (
+            <SpatialAnatomy
+              key={`anat-${stageIdx}`}
+              stageIndex={stageIdx}
+              totalStages={totalStages}
+              topic={currentDynStage.topic}
+              description={nodeData?.description ?? ""}
+              model={(currentDynStage.config.data as Record<string, unknown>).model as string}
+              labels={(currentDynStage.config.data as Record<string, unknown>).labels as { id: string; label: string }[]}
+              targetId={(currentDynStage.validation.condition as Record<string, string>).target}
+              feedbackMsg={currentDynStage.feedback}
+              onComplete={() => {
+                setFeedback("correct");
+                setShowConfetti(true);
+                arenaMarkCorrect();
+                arenaTriggerConfetti();
+              }}
+              onError={() => {
+                arenaMarkIncorrect();
+                arenaTriggerShake();
+              }}
+              onHintUse={() => {
+                const canAfford = spendGems(10);
+                if (canAfford) arenaUseHint();
+                return canAfford;
+              }}
+            />
+          ) : isDynamicChain && currentDynStage ? (
+            <LogicChain
+              key={`chain-${stageIdx}`}
+              stageIndex={stageIdx}
+              totalStages={totalStages}
+              topic={currentDynStage.topic}
+              description={nodeData?.description ?? ""}
+              nodes={(currentDynStage.config.data as Record<string, unknown>).nodes as string[]}
+              feedbackMsg={currentDynStage.feedback}
+              onComplete={() => {
+                setFeedback("correct");
+                setShowConfetti(true);
+                arenaMarkCorrect();
+                arenaTriggerConfetti();
+              }}
+              onError={() => {
+                arenaMarkIncorrect();
+                arenaTriggerShake();
+              }}
+              onHintUse={() => {
+                const canAfford = spendGems(10);
+                if (canAfford) arenaUseHint();
+                return canAfford;
+              }}
+            />
+          ) : isDynamicTaxonomy && currentDynStage ? (
+            <TaxonomyMatrix
+              key={`tax-${stageIdx}`}
+              stageIndex={stageIdx}
+              totalStages={totalStages}
+              topic={currentDynStage.topic}
+              description={nodeData?.description ?? ""}
+              buckets={(currentDynStage.config.data as Record<string, unknown>).buckets as string[]}
+              items={(currentDynStage.config.data as Record<string, unknown>).items as { id: string; content: string }[]}
+              correctAssignments={TAXONOMY_ANSWERS[currentDynStage.stageId] || {}}
+              feedbackMsg={currentDynStage.feedback}
+              onComplete={() => {
+                setFeedback("correct");
+                setShowConfetti(true);
+                arenaMarkCorrect();
+                arenaTriggerConfetti();
+              }}
+              onError={() => {
+                arenaMarkIncorrect();
+                arenaTriggerShake();
+              }}
+              onHintUse={() => {
+                const canAfford = spendGems(10);
+                if (canAfford) arenaUseHint();
+                return canAfford;
+              }}
+            />
+          ) : (
+          <>
+          {/* Question card */}
+          <motion.div
+            initial={{ opacity: 0, y: -10 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="mt-4 mb-6 flex items-center gap-4"
+          >
+            {/* Stage indicator */}
+            <div className="flex-shrink-0 w-11 h-11 rounded-2xl bg-gradient-to-br from-brand-teal to-[#5fb3af] flex items-center justify-center shadow-md shadow-teal-300/30">
+              <span className="font-heading font-extrabold text-white text-base">
+                {stageIdx + 1}
+              </span>
+            </div>
+            <div>
+              <p className="text-[11px] font-bold text-brand-teal uppercase tracking-wider mb-0.5">
+                Stage {stageIdx + 1} of {totalStages}
+              </p>
+              <h2 className="font-heading font-bold text-xl text-brand-gray-700 leading-snug">
+                {stage.question}
+              </h2>
+            </div>
+          </motion.div>
+
+          {/* Match Grid */}
+          <div className="flex">
+            <MatchGrid
+              pairs={stage.pairs}
+              shuffledRight={shuffledRight}
+              matched={matched}
+              selectedLeft={selectedLeft}
+              selectedRight={selectedRight}
+              wrongPair={wrongPair}
+              hintPair={hintPair}
+              onPickLeft={pickLeft}
+              onPickRight={pickRight}
+            />
+          </div>
+
+          {/* spacer to push bottom bar down */}
+          <div className="min-h-[60px]" />
+
+          {/* ─── Bottom Bar ─── */}
+          <div className="relative pt-4 pb-6 flex items-end justify-between">
+            {/* Mascot + hint */}
+            <div className="flex items-end gap-2">
+              <OwlMascot />
+              <button
+                onClick={handleHint}
+                disabled={hintUsed || allMatched}
+                className={`mb-1 flex items-center gap-1 text-xs font-bold px-3 py-1.5 rounded-full border transition ${
+                  hintUsed
+                    ? "bg-brand-gray-100 text-brand-gray-400 border-brand-gray-200 cursor-not-allowed"
+                    : "bg-amber-50 text-amber-600 border-amber-200 hover:bg-amber-100"
+                }`}
+              >
+                💡 Hint
+                <span className="text-[10px] opacity-60">(10 💎)</span>
+              </button>
+            </div>
+
+            {/* CHECK button */}
+            <GameButton
+              variant="primary"
+              onClick={handleCheck}
+              disabled={!selectedLeft || !selectedRight || allMatched}
+              className="min-w-[140px]"
+            >
+              CHECK
+            </GameButton>
+          </div>
+          </>
+          )}
+        </div>
+
+        {/* ── Right: AI Chat Assistant ── */}
+        <div className="w-[360px] flex-shrink-0 pt-2">
+          <motion.div
+            initial={{ opacity: 0, x: 40 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ delay: 0.3, type: "spring", damping: 18 }}
+            className="rounded-3xl bg-white/60 backdrop-blur-xl border border-white/50 shadow-lg shadow-teal-200/20 overflow-hidden flex flex-col w-full"
+            style={{ height: "calc(100vh - 80px)" }}
+          >
+            {/* Header */}
+            <div className="px-6 pt-6 pb-4 flex items-center gap-3">
+              <div className="relative w-14 h-14 flex-shrink-0">
+                <div className="w-14 h-14 rounded-full bg-gradient-to-br from-amber-300 to-amber-500 flex items-center justify-center shadow-md">
+                  <svg viewBox="0 0 40 40" className="w-9 h-9" fill="none">
+                    <ellipse cx="20" cy="24" rx="12" ry="10" fill="#C47F17" />
+                    <circle cx="15" cy="20" r="5" fill="white" />
+                    <circle cx="25" cy="20" r="5" fill="white" />
+                    <circle cx="15" cy="20" r="2.5" fill="#2D2D2D" />
+                    <circle cx="25" cy="20" r="2.5" fill="#2D2D2D" />
+                    <circle cx="16" cy="19" r="1" fill="white" />
+                    <circle cx="26" cy="19" r="1" fill="white" />
+                    <polygon points="20,22 18,25 22,25" fill="#FF9500" />
+                    <polygon points="10,16 8,8 15,14" fill="#C47F17" />
+                    <polygon points="30,16 32,8 25,14" fill="#C47F17" />
+                  </svg>
+                </div>
+              </div>
+              <div>
+                <h3 className="font-heading font-bold text-[15px] text-brand-gray-700">AI Chat Assistant</h3>
+                <p className="text-xs text-brand-gray-400 mt-0.5">Ask me anything about this stage!</p>
+              </div>
+            </div>
+
+            {/* Chat messages area */}
+            <div className="flex-1 overflow-y-auto px-5 pb-3 space-y-3">
+              {chatMessages.length === 0 && (
+                <div className="flex flex-col items-center justify-center py-8 gap-3 text-center">
+                  <div className="w-12 h-12 rounded-full bg-brand-teal/10 flex items-center justify-center">
+                    <svg viewBox="0 0 24 24" className="w-6 h-6 text-brand-teal" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                      <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
+                    </svg>
+                  </div>
+                  <p className="text-xs text-brand-gray-400 leading-relaxed max-w-[200px]">
+                    Type a message to get help from your AI study companion!
+                  </p>
+                </div>
+              )}
+
+              {chatMessages.map((msg) => (
+                <motion.div
+                  key={msg.id}
+                  initial={{ opacity: 0, y: 8 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{ duration: 0.2 }}
+                  className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}
+                >
+                  <div
+                    className={`max-w-[85%] rounded-2xl px-4 py-2.5 text-[13px] leading-relaxed ${
+                      msg.role === "user"
+                        ? "bg-gradient-to-r from-brand-teal to-[#5fb3af] text-white rounded-br-md"
+                        : "bg-white/70 border border-white/60 text-brand-gray-600 rounded-bl-md shadow-sm"
+                    }`}
+                  >
+                    {msg.text}
+                  </div>
+                </motion.div>
+              ))}
+              <div ref={chatEndRef} />
+            </div>
+
+            {/* Divider */}
+            <div className="mx-5 h-px bg-gradient-to-r from-transparent via-brand-teal/20 to-transparent" />
+
+            {/* Input area */}
+            <div className="px-5 py-4 flex items-end gap-2">
+              <textarea
+                value={chatInput}
+                onChange={(e) => setChatInput(e.target.value)}
+                onKeyDown={handleChatKeyDown}
+                placeholder="Type your message..."
+                rows={1}
+                className="flex-1 resize-none rounded-xl bg-white/70 border border-white/60 px-4 py-3 text-[13px] text-brand-gray-700 placeholder-brand-gray-300 focus:outline-none focus:ring-2 focus:ring-brand-teal/30 focus:border-brand-teal/40 transition-all"
+                style={{ maxHeight: 80 }}
+              />
+              <motion.button
+                onClick={handleChatSend}
+                whileTap={{ scale: 0.9 }}
+                className="flex-shrink-0 w-11 h-11 rounded-xl bg-gradient-to-r from-brand-teal to-[#5fb3af] text-white flex items-center justify-center shadow-md shadow-teal-300/30 hover:shadow-lg hover:shadow-teal-300/40 transition-all"
+              >
+                <svg viewBox="0 0 24 24" className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <line x1="22" y1="2" x2="11" y2="13" />
+                  <polygon points="22 2 15 22 11 13 2 9 22 2" />
+                </svg>
+              </motion.button>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+
+      {/* ─── Feedback overlay ─── */}
+      <AnimatePresence>
+        {feedback && (
+          <FeedbackOverlay
+            type={feedback}
+            onContinue={handleContinue}
+            showConfetti={showConfetti}
+          />
+        )}
+      </AnimatePresence>
+
+      {/* ─── Remedy Popup ─── */}
+      <AnimatePresence>
+        {showRemedyPopup && (
+          <RemedyPopup
+            threshold={REMEDY_THRESHOLD}
+            onDismiss={() => setShowRemedyPopup(false)}
+          />
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+/* ═══════════════════ Match Grid (with ref-based lines) ═══════════════════ */
+
+function MatchGrid({
+  pairs,
+  shuffledRight,
+  matched,
+  selectedLeft,
+  selectedRight,
+  wrongPair,
+  hintPair,
+  onPickLeft,
+  onPickRight,
+}: {
+  pairs: MatchPair[];
+  shuffledRight: string[];
+  matched: string[];
+  selectedLeft: string | null;
+  selectedRight: string | null;
+  wrongPair: [string, string] | null;
+  hintPair: string | null;
+  onPickLeft: (w: string) => void;
+  onPickRight: (w: string) => void;
+}) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const leftRefs = useRef<Map<string, HTMLButtonElement>>(new Map());
+  const rightRefs = useRef<Map<string, HTMLButtonElement>>(new Map());
+  const [lines, setLines] = useState<
+    { x1: number; y1: number; x2: number; y2: number; color: string; dash?: boolean }[]
+  >([]);
+
+  /* Recalculate lines whenever selection / matches change */
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const box = container.getBoundingClientRect();
+    const newLines: typeof lines = [];
+
+    // Matched lines (green solid)
+    for (const pair of pairs) {
+      if (!matched.includes(pair.left)) continue;
+      const lEl = leftRefs.current.get(pair.left);
+      const rEl = rightRefs.current.get(pair.right);
+      if (!lEl || !rEl) continue;
+      const lb = lEl.getBoundingClientRect();
+      const rb = rEl.getBoundingClientRect();
+      newLines.push({
+        x1: lb.right - box.left,
+        y1: lb.top + lb.height / 2 - box.top,
+        x2: rb.left - box.left,
+        y2: rb.top + rb.height / 2 - box.top,
+        color: "#58CC02",
+      });
+    }
+
+    // Active selection line (teal dashed)
+    if (selectedLeft && selectedRight) {
+      const lEl = leftRefs.current.get(selectedLeft);
+      const rEl = rightRefs.current.get(selectedRight);
+      if (lEl && rEl) {
+        const lb = lEl.getBoundingClientRect();
+        const rb = rEl.getBoundingClientRect();
+        newLines.push({
+          x1: lb.right - box.left,
+          y1: lb.top + lb.height / 2 - box.top,
+          x2: rb.left - box.left,
+          y2: rb.top + rb.height / 2 - box.top,
+          color: "#7AC7C4",
+          dash: true,
+        });
+      }
+    }
+
+    setLines(newLines);
+  }, [matched, selectedLeft, selectedRight, pairs]);
+
+  return (
+    <div ref={containerRef} className="relative flex gap-12 w-full mx-auto">
+      {/* SVG overlay for lines */}
+      <svg className="absolute inset-0 w-full h-full pointer-events-none z-20">
+        {lines.map((l, i) => (
+          <line
+            key={i}
+            x1={l.x1}
+            y1={l.y1}
+            x2={l.x2}
+            y2={l.y2}
+            stroke={l.color}
+            strokeWidth="2.5"
+            strokeLinecap="round"
+            strokeDasharray={l.dash ? "6 4" : "none"}
+          />
+        ))}
+      </svg>
+
+      {/* Left column */}
+      <div className="flex-1 flex flex-col gap-5">
+        {pairs.map((p) => {
+          const isMatched = matched.includes(p.left);
+          const isSelected = selectedLeft === p.left;
+          const isWrong = wrongPair?.[0] === p.left;
+          const isHint = hintPair === p.left;
+          return (
+            <motion.button
+              key={p.left}
+              ref={(el) => { if (el) leftRefs.current.set(p.left, el); }}
+              onClick={() => onPickLeft(p.left)}
+              className={`relative rounded-2xl px-8 py-6 text-center font-heading font-bold text-xl 
+                border-2 border-b-4 transition-all ${
+                isMatched
+                  ? "bg-brand-green/10 border-brand-green text-brand-green"
+                  : isWrong
+                  ? "bg-red-50 border-red-400 text-red-500 animate-shake"
+                  : isHint
+                  ? "bg-amber-50 border-amber-400 text-amber-600"
+                  : isSelected
+                  ? "bg-brand-teal/10 border-brand-teal text-brand-teal shadow-md"
+                  : "bg-white border-brand-gray-200 text-brand-gray-700 hover:border-brand-teal/40"
+              }`}
+              whileTap={isMatched ? {} : { scale: 0.95 }}
+            >
+              {p.left}
+              {isMatched && (
+                <motion.span
+                  initial={{ scale: 0 }}
+                  animate={{ scale: 1 }}
+                  className="absolute -top-1.5 -right-1.5 h-5 w-5 bg-brand-green rounded-full flex items-center justify-center"
+                >
+                  <svg viewBox="0 0 24 24" className="h-3 w-3 text-white" fill="none" stroke="currentColor" strokeWidth="3">
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </motion.span>
+              )}
+            </motion.button>
+          );
+        })}
+      </div>
+
+      {/* Right column */}
+      <div className="flex-1 flex flex-col gap-5">
+        {shuffledRight.map((word) => {
+          const pairForWord = pairs.find((p) => p.right === word);
+          const isMatched = pairForWord ? matched.includes(pairForWord.left) : false;
+          const isSelected = selectedRight === word;
+          const isWrong = wrongPair?.[1] === word;
+          return (
+            <motion.button
+              key={word}
+              ref={(el) => { if (el) rightRefs.current.set(word, el); }}
+              onClick={() => onPickRight(word)}
+              className={`relative rounded-2xl px-8 py-6 text-center font-heading font-bold text-xl 
+                border-2 border-b-4 transition-all ${
+                isMatched
+                  ? "bg-brand-green/10 border-brand-green text-brand-green"
+                  : isWrong
+                  ? "bg-red-50 border-red-400 text-red-500 animate-shake"
+                  : isSelected
+                  ? "bg-brand-teal/10 border-brand-teal text-brand-teal shadow-md"
+                  : "bg-white border-brand-gray-200 text-brand-gray-700 hover:border-brand-teal/40"
+              }`}
+              whileTap={isMatched ? {} : { scale: 0.95 }}
+            >
+              {word}
+              {isMatched && (
+                <motion.span
+                  initial={{ scale: 0 }}
+                  animate={{ scale: 1 }}
+                  className="absolute -top-1.5 -right-1.5 h-5 w-5 bg-brand-green rounded-full flex items-center justify-center"
+                >
+                  <svg viewBox="0 0 24 24" className="h-3 w-3 text-white" fill="none" stroke="currentColor" strokeWidth="3">
+                    <path d="M20 6L9 17l-5-5" />
+                  </svg>
+                </motion.span>
+              )}
+            </motion.button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+/* ═══════════════════ Feedback Overlay ═══════════════════ */
+
+function FeedbackOverlay({
+  type,
+  onContinue,
+  showConfetti,
+}: {
+  type: "correct" | "incorrect";
+  onContinue: () => void;
+  showConfetti: boolean;
+}) {
+  const isCorrect = type === "correct";
+
+  return (
+    <motion.div
+      initial={{ y: "100%" }}
+      animate={{ y: 0 }}
+      exit={{ y: "100%" }}
+      transition={{ type: "spring", damping: 26, stiffness: 300 }}
+      className="fixed inset-x-0 bottom-0 z-50"
+    >
+      {/* Confetti layer */}
+      {showConfetti && <ConfettiParticles />}
+
+      {/* Panel */}
+      <div
+        className={`relative rounded-t-3xl px-6 pt-6 pb-8 shadow-2xl ${
+          isCorrect
+            ? "bg-gradient-to-br from-[#e8fce8] to-[#c9f5c9]"
+            : "bg-gradient-to-br from-[#fde8e8] to-[#f5c9c9]"
+        }`}
+      >
+        <div className="flex items-center gap-4 mb-5">
+          {/* Icon */}
+          <div
+            className={`h-14 w-14 rounded-full flex items-center justify-center ${
+              isCorrect ? "bg-brand-green" : "bg-brand-coral"
+            }`}
+          >
+            {isCorrect ? (
+              <svg viewBox="0 0 24 24" className="h-7 w-7 text-white" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round">
+                <path d="M20 6L9 17l-5-5" />
+              </svg>
+            ) : (
+              <svg viewBox="0 0 24 24" className="h-7 w-7 text-white" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round">
+                <path d="M18 6L6 18M6 6l12 12" />
+              </svg>
+            )}
+          </div>
+
+          <div>
+            <h3
+              className={`font-heading font-extrabold text-2xl ${
+                isCorrect ? "text-green-700" : "text-red-600"
+              }`}
+            >
+              {isCorrect ? "Excellent!" : "Not quite right"}
+            </h3>
+            <p className={`text-sm ${isCorrect ? "text-green-600" : "text-red-500"}`}>
+              {isCorrect
+                ? "You matched all pairs correctly!"
+                : "Review the pairs and try again."}
+            </p>
+          </div>
+        </div>
+
+        <GameButton
+          variant={isCorrect ? "primary" : "secondary"}
+          onClick={onContinue}
+          className="w-full"
+        >
+          {isCorrect ? "CONTINUE" : "GOT IT"}
+        </GameButton>
+      </div>
+    </motion.div>
+  );
+}
+
+/* ═══════════════════ Confetti ═══════════════════ */
+
+function ConfettiParticles() {
+  const particles = useMemo(
+    () =>
+      Array.from({ length: 48 }, (_, i) => ({
+        id: i,
+        x: Math.random() * 100,
+        delay: Math.random() * 0.5,
+        duration: 1.5 + Math.random() * 1.5,
+        color: ["#58CC02", "#FFD700", "#E8734A", "#7AC7C4", "#FF6BA8", "#4FC3F7"][
+          i % 6
+        ],
+        size: 4 + Math.random() * 6,
+        rotation: Math.random() * 360,
+      })),
+    []
+  );
+
+  return (
+    <div className="absolute inset-0 pointer-events-none overflow-hidden">
+      {particles.map((p) => (
+        <motion.div
+          key={p.id}
+          initial={{ y: -20, x: `${p.x}vw`, opacity: 1, rotate: 0 }}
+          animate={{
+            y: "100vh",
+            rotate: p.rotation + 720,
+            opacity: [1, 1, 0],
+          }}
+          transition={{
+            duration: p.duration,
+            delay: p.delay,
+            ease: "easeIn",
+          }}
+          className="absolute top-0"
+          style={{
+            width: p.size,
+            height: p.size,
+            borderRadius: p.size > 7 ? "2px" : "50%",
+            backgroundColor: p.color,
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+
+/* ═══════════════════ Owl Mascot ═══════════════════ */
+
+function OwlMascot() {
+  return (
+    <svg viewBox="0 0 80 80" className="h-14 w-14 flex-shrink-0" fill="none">
+      {/* Body */}
+      <ellipse cx="40" cy="52" rx="22" ry="20" fill="#E8A855" />
+      <ellipse cx="40" cy="54" rx="16" ry="14" fill="#F5DEB3" />
+      {/* Eyes */}
+      <circle cx="32" cy="40" r="9" fill="white" />
+      <circle cx="48" cy="40" r="9" fill="white" />
+      <circle cx="33" cy="40" r="5" fill="#2D2D2D" />
+      <circle cx="47" cy="40" r="5" fill="#2D2D2D" />
+      <circle cx="34.5" cy="38.5" r="1.8" fill="white" />
+      <circle cx="48.5" cy="38.5" r="1.8" fill="white" />
+      {/* Beak */}
+      <polygon points="40,44 37,48 43,48" fill="#E8734A" />
+      {/* Ear tufts */}
+      <polygon points="22,30 26,38 18,36" fill="#D4943D" />
+      <polygon points="58,30 54,38 62,36" fill="#D4943D" />
+      {/* Feet */}
+      <ellipse cx="33" cy="72" rx="5" ry="3" fill="#E8734A" />
+      <ellipse cx="47" cy="72" rx="5" ry="3" fill="#E8734A" />
+    </svg>
+  );
+}
+
+/* ═══════════════════ Remedy Popup ═══════════════════ */
+
+function RemedyPopup({ threshold, onDismiss }: { threshold: number; onDismiss: () => void }) {
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      className="fixed inset-0 z-[60] flex items-center justify-center bg-black/40 backdrop-blur-sm"
+      onClick={onDismiss}
+    >
+      <motion.div
+        initial={{ scale: 0.8, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        exit={{ scale: 0.8, opacity: 0 }}
+        transition={{ type: "spring", damping: 20 }}
+        className="bg-white rounded-3xl p-8 max-w-sm mx-4 shadow-2xl text-center"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Remedy icon */}
+        <div className="mx-auto w-20 h-20 rounded-full bg-gradient-to-br from-orange-100 to-amber-100 flex items-center justify-center mb-5">
+          <svg viewBox="0 0 48 48" className="w-12 h-12" fill="none">
+            {/* Book / study icon */}
+            <rect x="8" y="10" width="32" height="28" rx="3" fill="#F59E0B" />
+            <rect x="10" y="12" width="28" height="24" rx="2" fill="#FEF3C7" />
+            <line x1="24" y1="12" x2="24" y2="36" stroke="#F59E0B" strokeWidth="1.5" />
+            <line x1="15" y1="18" x2="22" y2="18" stroke="#D97706" strokeWidth="1.5" strokeLinecap="round" />
+            <line x1="15" y1="22" x2="21" y2="22" stroke="#D97706" strokeWidth="1.5" strokeLinecap="round" />
+            <line x1="15" y1="26" x2="20" y2="26" stroke="#D97706" strokeWidth="1.5" strokeLinecap="round" />
+            <line x1="26" y1="18" x2="33" y2="18" stroke="#D97706" strokeWidth="1.5" strokeLinecap="round" />
+            <line x1="26" y1="22" x2="32" y2="22" stroke="#D97706" strokeWidth="1.5" strokeLinecap="round" />
+            <line x1="26" y1="26" x2="31" y2="26" stroke="#D97706" strokeWidth="1.5" strokeLinecap="round" />
+            {/* Star badge */}
+            <circle cx="38" cy="10" r="8" fill="#EF4444" />
+            <text x="38" y="14" textAnchor="middle" fill="white" fontSize="10" fontWeight="bold">!</text>
+          </svg>
+        </div>
+
+        <h3 className="font-heading font-extrabold text-xl text-brand-gray-700 mb-2">
+          需要額外練習！
+        </h3>
+        <p className="text-sm text-brand-gray-500 mb-1">
+          你已連續答錯 {threshold} 題
+        </p>
+        <p className="text-sm text-brand-gray-400 mb-6">
+          在地圖上已為你新增一個<span className="text-amber-600 font-bold">補償關卡</span>，完成它來鞏固基礎知識！
+        </p>
+
+        <button
+          onClick={onDismiss}
+          className="w-full py-3 rounded-2xl bg-gradient-to-r from-amber-400 to-amber-500 text-white font-heading font-bold text-base shadow-md shadow-amber-300/30 hover:shadow-lg transition-all active:scale-95"
+        >
+          我知道了
+        </button>
+      </motion.div>
+    </motion.div>
+  );
+}

app/(arena)/play/[nodeId]/page.tsx

@@ -0,0 +1,14 @@
+import ArenaClient from "./ArenaClient";
+
+export function generateStaticParams() {
+  const nodeIds = [
+    ...Array.from({ length: 15 }, (_, i) => `med-n${i + 1}`),
+    ...Array.from({ length: 15 }, (_, i) => `calc-n${i + 1}`),
+    ...Array.from({ length: 15 }, (_, i) => `demo-n${i + 1}`),
+  ];
+  return nodeIds.map((nodeId) => ({ nodeId }));
+}
+
+export default function PlayPage() {
+  return <ArenaClient />;
+}

app/(arena)/play/[nodeId]/result/ResultClient.tsx

@@ -0,0 +1,514 @@
+"use client";
+
+import React, { useMemo, useState, useEffect, useRef } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useRouter, useParams } from "next/navigation";
+import GameButton from "@/components/ui/GameButton";
+import useArenaStore, { getAccuracy, getElapsedTime, getXpGained } from "@/stores/useArenaStore";
+import useUserStore from "@/stores/useUserStore";
+import useCourseStore from "@/stores/useCourseStore";
+
+/* ═══════════════════ Rolling Counter Hook ═══════════════════ */
+
+function useRollingNumber(target: number, duration = 1200, delay = 800) {
+  const [value, setValue] = useState(0);
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      const start = performance.now();
+      const tick = (now: number) => {
+        const elapsed = now - start;
+        const progress = Math.min(elapsed / duration, 1);
+        // ease-out cubic
+        const eased = 1 - Math.pow(1 - progress, 3);
+        setValue(Math.round(target * eased));
+        if (progress < 1) requestAnimationFrame(tick);
+      };
+      requestAnimationFrame(tick);
+    }, delay);
+    return () => clearTimeout(timeout);
+  }, [target, duration, delay]);
+  return value;
+}
+
+/* ═══════════════════ Page ═══════════════════ */
+
+export default function ResultClient() {
+  const router = useRouter();
+  const params = useParams();
+  const nodeId = params.nodeId as string;
+
+  // Stores
+  const arenaState = useArenaStore();
+  const addXp = useUserStore((s) => s.addXp);
+  const completeNode = useCourseStore((s) => s.completeNode);
+  const endSession = useArenaStore((s) => s.endSession);
+
+  // Derived values from arena
+  const actualAccuracy = getAccuracy(arenaState);
+  const actualTime = getElapsedTime(arenaState);
+  const actualXp = getXpGained(arenaState);
+
+  // Ref to capture user state RIGHT BEFORE addXp (set inside effect, not at render time)
+  const prevUserRef = useRef<{ xp: number; level: number; xpToNext: number } | null>(null);
+
+  // End session & reward on mount (once)
+  const [rewarded, setRewarded] = useState(false);
+  useEffect(() => {
+    if (!rewarded) {
+      // Snapshot BEFORE reward so animation knows the starting point
+      const snap = useUserStore.getState();
+      prevUserRef.current = { xp: snap.xp, level: snap.level, xpToNext: snap.xpToNextLevel };
+
+      endSession();
+      addXp(actualXp);
+      if (nodeId) completeNode(nodeId);
+      setRewarded(true);
+    }
+  }, [rewarded, endSession, addXp, actualXp, nodeId, completeNode]);
+
+  // Read user state AFTER reward (reactive)
+  const currentXp = useUserStore((s) => s.xp);
+  const currentLevel = useUserStore((s) => s.level);
+  const currentXpToNext = useUserStore((s) => s.xpToNextLevel);
+
+  const courseId = arenaState.courseId ?? "med-u1";
+
+  // Bar state — starts at 0; will be set to correct start position when animation begins
+  const [showLevelUp, setShowLevelUp] = useState(false);
+  const [xpBarWidth, setXpBarWidth] = useState(0);
+  const [barDuration, setBarDuration] = useState(0);   // 0 = instant (no visible animation for initial placement)
+  const [displayLevel, setDisplayLevel] = useState(1);
+
+  const accuracy = useRollingNumber(actualAccuracy, 1000, 1200);
+  const xpGained = useRollingNumber(actualXp, 1000, 1200);
+
+  // Multi-phase XP bar animation — fires AFTER reward so store is up-to-date.
+  const animStarted = useRef(false);
+  useEffect(() => {
+    if (!rewarded || animStarted.current || !prevUserRef.current) return;
+    animStarted.current = true;
+
+    const prev = prevUserRef.current;
+    const post = useUserStore.getState();
+    const leveled = post.level > prev.level;
+    const startPct = prev.xpToNext > 0 ? (prev.xp / prev.xpToNext) * 100 : 0;
+    const endPct = post.xpToNextLevel > 0 ? (post.xp / post.xpToNextLevel) * 100 : 0;
+
+    // Phase 0 (instant): jump bar to pre-reward position & set level label
+    setDisplayLevel(prev.level);
+    setBarDuration(0);
+    setXpBarWidth(startPct);
+
+    if (leveled) {
+      // Phase 1: fill current bar to 100%
+      const t1 = setTimeout(() => {
+        setBarDuration(1.0);
+        setXpBarWidth(100);
+      }, 1800);
+      // Phase 2: show "Level Up!" text
+      const t2 = setTimeout(() => setShowLevelUp(true), 3000);
+      // Phase 3: instant reset to 0% & update level label
+      const t3 = setTimeout(() => {
+        setBarDuration(0);
+        setXpBarWidth(0);
+        setDisplayLevel(post.level);
+      }, 3600);
+      // Phase 4: animate to new XP position
+      const t4 = setTimeout(() => {
+        setBarDuration(0.8);
+        setXpBarWidth(endPct);
+      }, 3750);
+      return () => { clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); clearTimeout(t4); };
+    } else {
+      // No level up: smoothly fill from prev to current
+      const t = setTimeout(() => {
+        setBarDuration(1.2);
+        setXpBarWidth(endPct);
+      }, 1800);
+      return () => clearTimeout(t);
+    }
+  }, [rewarded]);
+
+  return (
+    <div className="relative min-h-screen flex flex-col items-center justify-center overflow-hidden">
+      {/* ─── Dark background with spotlight ─── */}
+      <div className="absolute inset-0 bg-gradient-to-b from-[#1a1a2e] via-[#16213e] to-[#0f0f23]" />
+      <div
+        className="absolute inset-0"
+        style={{
+          background:
+            "radial-gradient(ellipse 60% 50% at 50% 40%, rgba(255,215,0,0.15) 0%, rgba(255,180,50,0.06) 40%, transparent 70%)",
+        }}
+      />
+
+      {/* ─── Confetti ─── */}
+      <VictoryConfetti />
+
+      {/* ─── Decorative corner stars ─── */}
+      <DecorativeStars />
+
+      {/* ─── Content ─── */}
+      <div className="relative z-10 flex flex-col items-center w-full max-w-lg px-6">
+        {/* LESSON CLEARED! */}
+        <motion.h1
+          initial={{ opacity: 0, scale: 0.5, y: -30 }}
+          animate={{ opacity: 1, scale: 1, y: 0 }}
+          transition={{ type: "spring", damping: 10, stiffness: 120, delay: 0.1 }}
+          className="font-heading font-extrabold text-4xl sm:text-5xl text-transparent bg-clip-text bg-gradient-to-b from-yellow-200 via-yellow-400 to-amber-500 mb-4 text-center tracking-tight"
+          style={{
+            textShadow: "0 0 40px rgba(255,215,0,0.4), 0 2px 8px rgba(0,0,0,0.6)",
+            WebkitTextStroke: "0.5px rgba(255,215,0,0.3)",
+          }}
+        >
+          LESSON CLEARED!
+        </motion.h1>
+
+        {/* ─── Owl + Chest assembly ─── */}
+        <motion.div
+          initial={{ y: -160, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          transition={{ type: "spring", damping: 11, stiffness: 140, delay: 0.3 }}
+          className="relative mb-6"
+        >
+          {/* Glow behind chest */}
+          <motion.div
+            className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-52 h-52 rounded-full"
+            style={{
+              background:
+                "radial-gradient(circle, rgba(255,215,0,0.25) 0%, rgba(255,180,50,0.08) 50%, transparent 70%)",
+            }}
+            animate={{ scale: [1, 1.15, 1], opacity: [0.7, 1, 0.7] }}
+            transition={{ repeat: Infinity, duration: 3, ease: "easeInOut" }}
+          />
+
+          {/* Owl with graduation cap */}
+          <div className="relative z-10 flex flex-col items-center">
+            <GraduationOwl />
+            <div className="-mt-4">
+              <TreasureChest />
+            </div>
+          </div>
+        </motion.div>
+
+        {/* ─── Stats Card ─── */}
+        <motion.div
+          initial={{ opacity: 0, y: 60 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ type: "spring", damping: 20, stiffness: 180, delay: 0.7 }}
+          className="w-full rounded-2xl bg-white/10 backdrop-blur-xl border border-white/15 p-5 mb-5 shadow-lg shadow-black/20"
+        >
+          {/* Stats row */}
+          <div className="flex justify-between items-start mb-4">
+            {/* Accuracy */}
+            <div className="flex-1 text-center">
+              <div className="text-xs text-white/50 font-medium mb-1">Accuracy:</div>
+              <div className="font-heading font-extrabold text-2xl sm:text-3xl text-white tabular-nums">
+                {accuracy}%
+              </div>
+            </div>
+            {/* Divider */}
+            <div className="w-px h-12 bg-white/10 mx-2 self-center" />
+            {/* Time */}
+            <div className="flex-1 text-center">
+              <div className="text-xs text-white/50 font-medium mb-1">Time:</div>
+              <div className="font-heading font-extrabold text-2xl sm:text-3xl text-white tabular-nums">
+                {actualTime}
+              </div>
+            </div>
+            {/* Divider */}
+            <div className="w-px h-12 bg-white/10 mx-2 self-center" />
+            {/* XP */}
+            <div className="flex-1 text-center">
+              <div className="text-xs text-white/50 font-medium mb-1">XP Gained:</div>
+              <div className="font-heading font-extrabold text-2xl sm:text-3xl text-amber-300 tabular-nums">
+                +{xpGained} XP
+              </div>
+            </div>
+          </div>
+
+          {/* Level Up! flash */}
+          <AnimatePresence>
+            {showLevelUp && (
+              <motion.div
+                initial={{ opacity: 0, scale: 0.5 }}
+                animate={{ opacity: 1, scale: 1 }}
+                exit={{ opacity: 0 }}
+                className="text-right mb-2"
+              >
+                <span
+                  className="font-heading font-extrabold text-lg italic bg-clip-text text-transparent bg-gradient-to-r from-amber-300 via-yellow-400 to-orange-400"
+                  style={{ textShadow: "0 0 20px rgba(255,215,0,0.5)" }}
+                >
+                  Level Up!
+                </span>
+              </motion.div>
+            )}
+          </AnimatePresence>
+
+          {/* XP progress bar */}
+          <div className="flex items-center justify-between text-[10px] text-white/40 font-bold mb-1 px-0.5">
+            <span>Lv.{displayLevel}</span>
+            <span className="tabular-nums">
+              {Math.round(currentXp)} / {currentXpToNext} XP
+            </span>
+            <span>Lv.{displayLevel + 1}</span>
+          </div>
+          <div className="w-full h-5 rounded-full bg-black/30 border border-white/10 overflow-hidden relative">
+            <motion.div
+              className="h-full rounded-full bg-gradient-to-r from-brand-green via-emerald-400 to-brand-green relative"
+              animate={{ width: `${Math.max(xpBarWidth, 0)}%` }}
+              transition={{ duration: barDuration, ease: "easeOut" }}
+            >
+              {/* Shimmer effect on bar */}
+              <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/25 to-transparent animate-shimmer-bar" />
+            </motion.div>
+            {/* Glow */}
+            <motion.div
+              className="absolute inset-0 rounded-full"
+              animate={{
+                boxShadow: [
+                  "inset 0 0 6px rgba(88,204,2,0.3)",
+                  "inset 0 0 12px rgba(88,204,2,0.5)",
+                  "inset 0 0 6px rgba(88,204,2,0.3)",
+                ],
+              }}
+              transition={{ repeat: Infinity, duration: 2 }}
+            />
+          </div>
+        </motion.div>
+
+        {/* ─── Back to Map button ─── */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 1.4 }}
+          className="w-full"
+        >
+          <button
+            onClick={() => router.push(`/map/${courseId}`)}
+            className="relative w-full py-4 rounded-2xl font-heading font-extrabold text-lg text-white 
+              bg-gradient-to-r from-brand-green to-emerald-500 
+              border-b-4 border-green-700
+              shadow-[0_0_30px_rgba(88,204,2,0.35)] 
+              hover:shadow-[0_0_40px_rgba(88,204,2,0.5)] 
+              active:scale-[0.97] active:border-b-2
+              transition-all duration-200"
+          >
+            {/* Button glow pulse */}
+            <motion.div
+              className="absolute inset-0 rounded-2xl bg-gradient-to-r from-brand-green/0 via-white/10 to-brand-green/0"
+              animate={{ opacity: [0, 0.5, 0] }}
+              transition={{ repeat: Infinity, duration: 2, ease: "easeInOut" }}
+            />
+            <span className="relative z-10">Back to Map</span>
+          </button>
+        </motion.div>
+      </div>
+    </div>
+  );
+}
+
+/* ═══════════════════ Graduation Owl ═══════════════════ */
+
+function GraduationOwl() {
+  return (
+    <motion.svg
+      viewBox="0 0 100 90"
+      className="h-24 w-24"
+      fill="none"
+      animate={{ y: [0, -3, 0] }}
+      transition={{ repeat: Infinity, duration: 2.5, ease: "easeInOut" }}
+    >
+      {/* Wings spread */}
+      <ellipse cx="14" cy="52" rx="11" ry="16" fill="#D4943D" transform="rotate(-20 14 52)" />
+      <ellipse cx="86" cy="52" rx="11" ry="16" fill="#D4943D" transform="rotate(20 86 52)" />
+      {/* Body */}
+      <ellipse cx="50" cy="58" rx="22" ry="20" fill="#E8E1D5" />
+      <ellipse cx="50" cy="60" rx="16" ry="15" fill="#F5F0E8" />
+      {/* Eyes with glasses */}
+      <circle cx="38" cy="48" r="10" fill="white" stroke="#888" strokeWidth="1.5" />
+      <circle cx="62" cy="48" r="10" fill="white" stroke="#888" strokeWidth="1.5" />
+      <line x1="48" y1="48" x2="52" y2="48" stroke="#888" strokeWidth="1.5" />
+      <circle cx="39" cy="48" r="5" fill="#2D2D2D" />
+      <circle cx="61" cy="48" r="5" fill="#2D2D2D" />
+      <circle cx="40.5" cy="46.5" r="1.8" fill="white" />
+      <circle cx="62.5" cy="46.5" r="1.8" fill="white" />
+      {/* Beak */}
+      <polygon points="50,52 47,57 53,57" fill="#E8734A" />
+      {/* Ear tufts */}
+      <polygon points="28,32 33,44 22,38" fill="#C9B89E" />
+      <polygon points="72,32 67,44 78,38" fill="#C9B89E" />
+      {/* Graduation cap */}
+      <polygon points="50,18 30,28 50,34 70,28" fill="#2D2D2D" />
+      <rect x="48" y="14" width="4" height="6" fill="#2D2D2D" />
+      <line x1="70" y1="28" x2="72" y2="38" stroke="#FFD700" strokeWidth="1.5" />
+      <circle cx="72" cy="39" r="2.5" fill="#FFD700" />
+    </motion.svg>
+  );
+}
+
+/* ═══════════════════ Treasure Chest ═══════════════════ */
+
+function TreasureChest() {
+  return (
+    <svg viewBox="0 0 160 110" className="h-28 w-40" fill="none">
+      {/* Shadow */}
+      <ellipse cx="80" cy="105" rx="60" ry="6" fill="rgba(0,0,0,0.25)" />
+      {/* Chest body */}
+      <rect x="20" y="50" width="120" height="50" rx="6" fill="url(#chestBody)" stroke="#8B6914" strokeWidth="2" />
+      {/* Chest lid */}
+      <path d="M18 52 Q80 10 142 52" fill="url(#chestLid)" stroke="#8B6914" strokeWidth="2" />
+      {/* Gold trim bands */}
+      <rect x="18" y="48" width="124" height="6" rx="2" fill="#DAA520" stroke="#8B6914" strokeWidth="1" />
+      <rect x="20" y="72" width="120" height="4" rx="1" fill="#DAA520" opacity="0.6" />
+      {/* Lock clasp */}
+      <rect x="72" y="46" width="16" height="14" rx="3" fill="#DAA520" stroke="#8B6914" strokeWidth="1.5" />
+      <circle cx="80" cy="56" r="3" fill="#8B6914" />
+      {/* Stars on chest */}
+      <StarShape cx={42} cy={68} r={5} fill="#58CC02" />
+      <StarShape cx={80} cy={82} r={6} fill="#58CC02" />
+      <StarShape cx={118} cy={68} r={5} fill="#58CC02" />
+      <StarShape cx={55} cy={86} r={4} fill="#58CC02" opacity={0.7} />
+      <StarShape cx={105} cy={86} r={4} fill="#58CC02" opacity={0.7} />
+      {/* Gradient defs */}
+      <defs>
+        <linearGradient id="chestBody" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor="#4A9B3F" />
+          <stop offset="50%" stopColor="#3D8535" />
+          <stop offset="100%" stopColor="#2D6B28" />
+        </linearGradient>
+        <linearGradient id="chestLid" x1="0" y1="0" x2="0" y2="1">
+          <stop offset="0%" stopColor="#5BBF4E" />
+          <stop offset="100%" stopColor="#3D8535" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
+
+function StarShape({ cx, cy, r, fill, opacity = 1 }: { cx: number; cy: number; r: number; fill: string; opacity?: number }) {
+  const points = Array.from({ length: 5 }, (_, i) => {
+    const outerAngle = (i * 72 - 90) * (Math.PI / 180);
+    const innerAngle = ((i * 72 + 36) - 90) * (Math.PI / 180);
+    const ox = cx + r * Math.cos(outerAngle);
+    const oy = cy + r * Math.sin(outerAngle);
+    const ix = cx + r * 0.4 * Math.cos(innerAngle);
+    const iy = cy + r * 0.4 * Math.sin(innerAngle);
+    return `${ox},${oy} ${ix},${iy}`;
+  }).join(" ");
+  return <polygon points={points} fill={fill} opacity={opacity} />;
+}
+
+/* ═══════════════════ Decorative Stars ═══════════════════ */
+
+function DecorativeStars() {
+  const stars = useMemo(
+    () => [
+      { x: "8%", y: "15%", size: 18, delay: 0.5, opacity: 0.5 },
+      { x: "90%", y: "20%", size: 14, delay: 0.8, opacity: 0.4 },
+      { x: "5%", y: "75%", size: 12, delay: 1.2, opacity: 0.3 },
+      { x: "92%", y: "80%", size: 22, delay: 0.3, opacity: 0.5 },
+      { x: "15%", y: "45%", size: 10, delay: 1.5, opacity: 0.25 },
+      { x: "85%", y: "50%", size: 16, delay: 0.6, opacity: 0.35 },
+      { x: "50%", y: "90%", size: 12, delay: 1.0, opacity: 0.3 },
+    ],
+    []
+  );
+
+  return (
+    <div className="pointer-events-none absolute inset-0 z-[5]">
+      {stars.map((s, i) => (
+        <motion.div
+          key={i}
+          className="absolute"
+          style={{ left: s.x, top: s.y }}
+          initial={{ opacity: 0, scale: 0, rotate: 0 }}
+          animate={{
+            opacity: s.opacity,
+            scale: [0, 1, 0.8, 1],
+            rotate: [0, 15, -10, 0],
+          }}
+          transition={{
+            delay: s.delay,
+            duration: 1.5,
+            ease: "easeOut",
+          }}
+        >
+          <motion.svg
+            viewBox="0 0 24 24"
+            style={{ width: s.size, height: s.size }}
+            fill="#FFD700"
+            animate={{ rotate: [0, 360] }}
+            transition={{ repeat: Infinity, duration: 8 + i * 2, ease: "linear" }}
+          >
+            <polygon points="12,2 15,9 22,9 16,14 18,22 12,17 6,22 8,14 2,9 9,9" />
+          </motion.svg>
+        </motion.div>
+      ))}
+    </div>
+  );
+}
+
+/* ═══════════════════ Victory Confetti ═══════════════════ */
+
+function VictoryConfetti() {
+  const particles = useMemo(
+    () =>
+      Array.from({ length: 80 }, (_, i) => {
+        const isStreak = i < 20; // first 20 are "firework streak" particles
+        return {
+          id: i,
+          x: isStreak ? 40 + Math.random() * 20 : Math.random() * 100,
+          startY: isStreak ? 45 : -5,
+          endY: isStreak ? -10 + Math.random() * 30 : 110,
+          delay: isStreak ? Math.random() * 0.3 : 0.2 + Math.random() * 1.5,
+          duration: isStreak ? 0.6 + Math.random() * 0.5 : 2 + Math.random() * 2.5,
+          color: [
+            "#FFD700", "#FFA500", "#FF6B6B", "#58CC02", "#7AC7C4",
+            "#FF6BA8", "#4FC3F7", "#A855F7", "#F59E0B",
+          ][i % 9],
+          size: isStreak ? 3 + Math.random() * 3 : 4 + Math.random() * 8,
+          rotation: Math.random() * 360,
+          spreadX: isStreak
+            ? (Math.random() - 0.5) * 60
+            : 0,
+        };
+      }),
+    []
+  );
+
+  return (
+    <div className="pointer-events-none absolute inset-0 overflow-hidden z-[2]">
+      {particles.map((p) => (
+        <motion.div
+          key={p.id}
+          initial={{
+            top: `${p.startY}%`,
+            left: `${p.x}%`,
+            opacity: 1,
+            rotate: 0,
+            x: 0,
+          }}
+          animate={{
+            top: `${p.endY}%`,
+            rotate: p.rotation + 540,
+            opacity: [1, 1, 0.6, 0],
+            x: p.spreadX,
+          }}
+          transition={{
+            duration: p.duration,
+            delay: p.delay,
+            ease: p.startY > 0 ? "easeOut" : "easeIn",
+          }}
+          className="absolute"
+          style={{
+            width: p.size,
+            height: p.size,
+            borderRadius: p.size > 7 ? "2px" : "50%",
+            backgroundColor: p.color,
+          }}
+        />
+      ))}
+    </div>
+  );
+}

app/(arena)/play/[nodeId]/result/page.tsx

@@ -0,0 +1,14 @@
+import ResultClient from "./ResultClient";
+
+export function generateStaticParams() {
+  const nodeIds = [
+    ...Array.from({ length: 15 }, (_, i) => `med-n${i + 1}`),
+    ...Array.from({ length: 15 }, (_, i) => `calc-n${i + 1}`),
+    ...Array.from({ length: 15 }, (_, i) => `demo-n${i + 1}`),
+  ];
+  return nodeIds.map((nodeId) => ({ nodeId }));
+}
+
+export default function ResultPage() {
+  return <ResultClient />;
+}

app/(dashboard)/home/page.tsx

@@ -0,0 +1,620 @@
+"use client";
+
+import React, { useRef, useEffect, useLayoutEffect, useState, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import DeepGlassCard from "@/components/ui/DeepGlassCard";
+import GameButton from "@/components/ui/GameButton";
+import TopProgressBar from "@/components/ui/TopProgressBar";
+import TopStatsBar from "@/components/shared/TopStatsBar";
+import useUserStore from "@/stores/useUserStore";
+import useCourseStore from "@/stores/useCourseStore";
+
+/* ═══════════════════ Mock data ═══════════════════ */
+
+const CURRENT_COURSE = {
+  title: "Mastering Conversational French",
+  subtitle: "Incompliars",
+  progress: 75,
+  thumbnail: <FrenchThumbnail />,
+};
+
+const STORE_COURSE_STYLE: Record<string, { bg: string; icon: React.ReactNode }> = {
+  "med-u1": { bg: "from-rose-200 to-rose-100", icon: <HeartIcon /> },
+  "calc-u1": { bg: "from-sky-200 to-indigo-100", icon: <CalculusIcon /> },
+};
+
+const LIBRARY_COURSES = [
+  { id: "ja", title: "Japanese", bg: "from-pink-200 to-pink-100", icon: <JapanIcon /> },
+  { id: "es", title: "Spanish", bg: "from-red-300 to-yellow-200", icon: <SpainIcon /> },
+  { id: "py", title: "Python", bg: "from-blue-100 to-blue-50", icon: <PythonIcon /> },
+  { id: "py2", title: "Python Advanced", bg: "from-emerald-400 to-emerald-300", icon: <PythonIcon2 />, highlighted: true },
+  { id: "gen", title: "Study Skills", bg: "from-amber-100 to-orange-50", icon: <GenericIcon /> },
+  { id: "ml", title: "ML Basics", bg: "from-violet-200 to-violet-100", icon: <MLIcon /> },
+  { id: "ds", title: "Data Science", bg: "from-cyan-200 to-cyan-100", icon: <DSIcon /> },
+];
+
+/* ═══════════════════ Page ═══════════════════ */
+
+export default function HomePage() {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const name = useUserStore((s) => s.name);
+  const lastActiveCourseId = useUserStore((s) => s.lastActiveCourseId);
+  const loadMockCourses = useCourseStore((s) => s.loadMockCourses);
+  const getCourse = useCourseStore((s) => s.getCourse);
+  const getCourseProgress = useCourseStore((s) => s.getCourseProgress);
+  const courses = useCourseStore((s) => s.courses);
+
+  useEffect(() => {
+    loadMockCourses();
+  }, [loadMockCourses]);
+
+  // Pick the active course (fallback to first available)
+  const activeCourseId = lastActiveCourseId ?? Object.keys(courses)[0] ?? null;
+  const activeCourse = activeCourseId ? getCourse(activeCourseId) : null;
+  const activeProgress = activeCourseId ? getCourseProgress(activeCourseId) : 0;
+
+  // Fallback for library courses not in store
+  const libCourse = LIBRARY_COURSES.find((c) => c.id === activeCourseId);
+  const resumeTitle = activeCourse?.unitTitle ?? libCourse?.title ?? "Course";
+  const resumeNodeCount = activeCourse?.nodes.length ?? 15;
+  const hasResumeCourse = !!(activeCourse || libCourse);
+
+  /* ── Forge drop zone ── */
+  const router = useRouter();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+
+  // Prevent browser from opening files dropped anywhere on the page
+  useEffect(() => {
+    const prevent = (e: DragEvent) => { e.preventDefault(); e.stopPropagation(); };
+    window.addEventListener("dragover", prevent);
+    window.addEventListener("drop", prevent);
+    return () => {
+      window.removeEventListener("dragover", prevent);
+      window.removeEventListener("drop", prevent);
+    };
+  }, []);
+
+  const handleFileAccepted = useCallback(
+    (file: File) => {
+      setSelectedFile(file);
+      // Brief flash then navigate to forge
+      setTimeout(() => router.push("/forge"), 600);
+    },
+    [router]
+  );
+
+  const onDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(false);
+      const file = e.dataTransfer.files[0];
+      if (file && file.type === "application/pdf") handleFileAccepted(file);
+    },
+    [handleFileAccepted]
+  );
+
+  const onFileChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (file) handleFileAccepted(file);
+    },
+    [handleFileAccepted]
+  );
+
+  // ── Ensure library scroll starts from the left ──
+  // 1) Pre-paint reset (covers re-renders & soft-navigation)
+  useLayoutEffect(() => {
+    if (scrollRef.current) scrollRef.current.scrollLeft = 0;
+  });
+  // 2) Post-paint fallback (covers persist-rehydration & late renders)
+  const courseCount = Object.keys(courses).length;
+  useEffect(() => {
+    if (scrollRef.current) scrollRef.current.scrollLeft = 0;
+  }, [courseCount]);
+
+  const scrollLibrary = (dir: "left" | "right") => {
+    scrollRef.current?.scrollBy({
+      left: dir === "right" ? 260 : -260,
+      behavior: "smooth",
+    });
+  };
+
+  return (
+    <div className="relative overflow-hidden" style={{ zoom: 1.05 }}>
+      <TopStatsBar />
+
+      {/* ── Background decorations ── */}
+      <DashboardBg />
+
+      {/* ══════════════ Content ══════════════ */}
+      <div className="relative z-10 max-w-7xl mx-auto px-4 md:px-8 py-8 space-y-8">
+        {/* ── Top row: Continue Journey + Forge ── */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* Continue Journey */}
+          <DeepGlassCard className="px-6 py-6 md:px-8 md:py-8">
+            <h2 className="font-heading text-2xl md:text-3xl font-extrabold text-brand-gray-700 mb-1">
+              Welcome back, {name}!
+            </h2>
+            <p className="text-sm text-brand-gray-400 mb-5">Continue your journey</p>
+
+            {hasResumeCourse ? (
+            <div className="flex gap-5 items-start">
+              {/* Thumbnail */}
+              <div className={`shrink-0 w-28 h-32 rounded-xl overflow-hidden shadow-md flex items-center justify-center bg-gradient-to-br ${(STORE_COURSE_STYLE[activeCourseId!] ?? (libCourse ? { bg: libCourse.bg } : { bg: "from-teal-100 to-teal-50" })).bg}`}>
+                {(STORE_COURSE_STYLE[activeCourseId!] ?? (libCourse ? { icon: libCourse.icon } : { icon: <GenericIcon /> })).icon}
+              </div>
+
+              {/* Info */}
+              <div className="flex-1 min-w-0">
+                <h3 className="font-heading font-bold text-brand-gray-700 text-lg leading-tight mb-1">
+                  {resumeTitle}
+                </h3>
+                <p className="text-sm text-brand-gray-400 mb-3">
+                  {resumeNodeCount} nodes
+                </p>
+
+                <TopProgressBar progress={activeProgress} className="mb-2" />
+                <p className="text-xs text-brand-gray-500 font-semibold mb-4">
+                  {activeProgress}% Complete
+                </p>
+
+                <Link href={`/map/${activeCourseId}`}>
+                  <GameButton className="w-full text-base">Resume</GameButton>
+                </Link>
+              </div>
+            </div>
+            ) : (
+            <p className="text-brand-gray-400 text-sm">No active courses yet. Forge a new one!</p>
+            )}
+          </DeepGlassCard>
+
+          {/* Forge a New Universe */}
+          <div className="flex flex-col">
+            <h2 className="font-heading text-2xl md:text-3xl font-extrabold text-brand-gray-700 mb-4">
+              Forge a New Universe
+            </h2>
+
+            {/* Hidden file input */}
+            <input
+              ref={fileInputRef}
+              type="file"
+              accept=".pdf,application/pdf"
+              className="hidden"
+              onChange={onFileChange}
+            />
+
+            <motion.div
+              onClick={() => fileInputRef.current?.click()}
+              onDragEnter={(e) => { e.preventDefault(); e.stopPropagation(); setIsDragging(true); }}
+              onDragOver={(e) => { e.preventDefault(); e.stopPropagation(); }}
+              onDragLeave={(e) => { e.preventDefault(); e.stopPropagation(); setIsDragging(false); }}
+              onDrop={onDrop}
+              whileHover={{ scale: 1.02 }}
+              whileTap={{ scale: 0.98 }}
+              className={`relative flex-1 min-h-[200px] rounded-2xl border-2 border-dashed backdrop-blur-sm
+                flex flex-col items-center justify-center gap-4 cursor-pointer transition-all duration-200
+                ${
+                  selectedFile
+                    ? "border-brand-teal bg-brand-teal/10"
+                    : isDragging
+                    ? "border-brand-teal/80 bg-white/60 shadow-lg shadow-brand-teal/10"
+                    : "border-brand-teal/40 bg-white/40 hover:border-brand-teal/70 hover:bg-white/50"
+                }`}
+            >
+              <AnimatePresence mode="wait">
+                {selectedFile ? (
+                  <motion.div
+                    key="accepted"
+                    initial={{ scale: 0.8, opacity: 0 }}
+                    animate={{ scale: 1, opacity: 1 }}
+                    className="flex flex-col items-center gap-3"
+                  >
+                    <motion.div
+                      animate={{ rotate: 360 }}
+                      transition={{ repeat: Infinity, duration: 1.5, ease: "linear" }}
+                    >
+                      <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
+                        <circle cx="20" cy="20" r="18" stroke="#7AC7C4" strokeWidth="3" strokeDasharray="80 30" />
+                      </svg>
+                    </motion.div>
+                    <p className="text-sm font-semibold text-brand-teal">{selectedFile.name}</p>
+                    <p className="text-xs text-brand-gray-400">Preparing to forge…</p>
+                  </motion.div>
+                ) : (
+                  <motion.div
+                    key="idle"
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    className="flex flex-col items-center gap-4"
+                  >
+                    <motion.div animate={isDragging ? { scale: 1.15, y: -4 } : { scale: 1, y: 0 }}>
+                      <PortalIcon />
+                    </motion.div>
+                    <p className="text-sm md:text-base text-brand-gray-500 text-center max-w-xs px-4">
+                      {isDragging
+                        ? "Release to upload your PDF"
+                        : "Drop a PDF or click to select a file and forge a new learning path."}
+                    </p>
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </motion.div>
+          </div>
+        </div>
+
+        {/* ── Your Library ── */}
+        <section>
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="font-heading text-2xl md:text-3xl font-extrabold text-brand-gray-700">
+              Your Library
+            </h2>
+            <div className="flex gap-2">
+              <button
+                onClick={() => scrollLibrary("left")}
+                className="h-9 w-9 rounded-full border border-brand-gray-200 bg-white flex items-center justify-center text-brand-gray-400 hover:text-brand-gray-600 hover:border-brand-gray-300 transition shadow-sm"
+              >
+                ‹
+              </button>
+              <button
+                onClick={() => scrollLibrary("right")}
+                className="h-9 w-9 rounded-full border border-brand-gray-200 bg-white flex items-center justify-center text-brand-gray-400 hover:text-brand-gray-600 hover:border-brand-gray-300 transition shadow-sm"
+              >
+                ›
+              </button>
+            </div>
+          </div>
+
+          <div
+            ref={scrollRef}
+            dir="ltr"
+            className="flex gap-4 overflow-x-auto pt-4 pb-4 scrollbar-hide snap-x"
+            style={{ scrollbarWidth: "none" }}
+          >
+            {/* Real courses from store */}
+            {Object.values(courses).map((c) => {
+              const style = STORE_COURSE_STYLE[c.unitId] ?? { bg: "from-teal-100 to-teal-50", icon: <GenericIcon /> };
+              return (
+              <motion.div
+                key={c.unitId}
+                whileHover={{ y: -4 }}
+                className="shrink-0 w-40 md:w-48 snap-start"
+              >
+                <Link href={`/map/${c.unitId}`}>
+                  <div className={`h-36 md:h-44 rounded-2xl bg-gradient-to-br ${style.bg} flex items-center justify-center shadow-md hover:shadow-lg transition-all`}>
+                    {style.icon}
+                  </div>
+                  <p className="mt-2 text-sm font-semibold text-brand-gray-600 text-center truncate">
+                    {c.unitTitle}
+                  </p>
+                </Link>
+              </motion.div>
+              );
+            })}
+            {/* Static demo courses */}
+            {LIBRARY_COURSES.map((c) => (
+              <motion.div
+                key={c.id}
+                whileHover={{ y: -4 }}
+                className={`shrink-0 w-40 md:w-48 snap-start`}
+              >
+                <Link href={`/map/${c.id}`}>
+                  <div
+                    className={`h-36 md:h-44 rounded-2xl bg-gradient-to-br ${c.bg} flex items-center justify-center shadow-md
+                      ${c.highlighted ? "shadow-lg" : ""}
+                      hover:shadow-lg transition-all`}
+                  >
+                    {c.icon}
+                  </div>
+                  <p className="mt-2 text-sm font-semibold text-brand-gray-600 text-center truncate">
+                    {c.title}
+                  </p>
+                </Link>
+              </motion.div>
+            ))}
+          </div>
+        </section>
+      </div>
+
+      {/* ── Footer ── */}
+      <footer className="relative z-10 py-4 text-center text-sm text-brand-gray-400">
+        <a href="#" className="hover:text-brand-gray-600 transition">About</a>
+        <span className="mx-2 text-brand-gray-300">|</span>
+        <a href="#" className="hover:text-brand-gray-600 transition">Contact</a>
+        <span className="mx-2 text-brand-gray-300">|</span>
+        <a href="#" className="hover:text-brand-gray-600 transition">Privacy</a>
+        <span className="mx-2 text-brand-gray-300">|</span>
+        <a href="#" className="hover:text-brand-gray-600 transition">Terms</a>
+      </footer>
+    </div>
+  );
+}
+
+/* ═══════════════════ Background ═══════════════════ */
+
+function DashboardBg() {
+  const runeText =
+    "ᚠᚢᚦᚨᚱᚲᚷᚹᚺᚾᛁᛃᛇᛈᛉᛊᛏᛒᛖᛗᛚᛜᛝᛞᛟᚠᚢᚦᚨᚱᚲᚷᚹᚺᚾᛁᛃᛇᛈᛉᛊᛏᛒᛖᛗᛚᛜᛝᛞᛟ";
+  return (
+    <div className="pointer-events-none absolute inset-0 z-0 overflow-hidden" aria-hidden="true">
+      {/* Rune circle – bottom right */}
+      <svg
+        viewBox="0 0 700 700"
+        className="absolute -right-[180px] -bottom-[180px] w-[600px] h-[600px] opacity-20"
+        fill="none"
+      >
+        <defs>
+          <radialGradient id="dashPeach" cx="50%" cy="45%" r="50%">
+            <stop offset="0%" stopColor="#FFF5EC" />
+            <stop offset="60%" stopColor="#F5DECA" />
+            <stop offset="100%" stopColor="#EDD0B5" />
+          </radialGradient>
+          <path id="dashRune" d="M 350,350 m -260,0 a 260,260 0 1,1 520,0 a 260,260 0 1,1 -520,0" />
+        </defs>
+        <circle cx="350" cy="350" r="300" fill="url(#dashPeach)" opacity="0.5" />
+        <circle cx="350" cy="350" r="290" fill="none" stroke="#D4BC8B" strokeWidth="1" opacity="0.4" />
+        <circle cx="350" cy="350" r="248" fill="none" stroke="#D4BC8B" strokeWidth="1" opacity="0.4" />
+        <text fill="#C4A87A" fontSize="18" fontWeight="500" letterSpacing="4" opacity="0.35">
+          <textPath href="#dashRune">{runeText}</textPath>
+        </text>
+      </svg>
+
+      {/* Sparkle */}
+      <svg viewBox="0 0 40 40" className="absolute bottom-8 right-8 w-7 h-7" fill="none">
+        <path d="M20 0 L22 16 L40 20 L22 22 L20 40 L18 22 L0 20 L18 16 Z" fill="#D4A96A" opacity="0.5" />
+      </svg>
+    </div>
+  );
+}
+
+/* ═══════════════════ Portal icon for Forge ═══════════════════ */
+
+function PortalIcon() {
+  return (
+    <svg viewBox="0 0 120 120" className="h-24 w-24" fill="none">
+      {/* Outer glow */}
+      <circle cx="60" cy="60" r="50" fill="#7AC7C4" opacity="0.08" />
+      <circle cx="60" cy="60" r="42" fill="#7AC7C4" opacity="0.12" />
+      {/* Portal ring */}
+      <circle cx="60" cy="60" r="35" fill="none" stroke="#7AC7C4" strokeWidth="3" opacity="0.4" />
+      <circle cx="60" cy="60" r="30" fill="none" stroke="#D4BC8B" strokeWidth="2" opacity="0.5" />
+      {/* Inner portal */}
+      <circle cx="60" cy="60" r="24" fill="#E8F5F4" />
+      <circle cx="60" cy="60" r="18" fill="#7AC7C4" opacity="0.15" />
+      {/* Magic runes around */}
+      <text x="60" y="30" textAnchor="middle" fontSize="8" fill="#C4A87A" opacity="0.6">ᚠᚢᚦ</text>
+      <text x="60" y="95" textAnchor="middle" fontSize="8" fill="#C4A87A" opacity="0.6">ᛉᛊᛏ</text>
+      {/* Center emblem */}
+      <circle cx="60" cy="60" r="10" fill="#7AC7C4" opacity="0.3" />
+      <path d="M55 55h10v10H55z" fill="none" stroke="#5BB5B0" strokeWidth="1.5" rx="2" />
+      <circle cx="60" cy="60" r="3" fill="#5BB5B0" opacity="0.6" />
+      {/* Sparkles */}
+      <circle cx="40" cy="45" r="2" fill="#D4A96A" opacity="0.4" />
+      <circle cx="80" cy="75" r="1.5" fill="#D4A96A" opacity="0.5" />
+      <circle cx="78" cy="42" r="1" fill="#7AC7C4" opacity="0.5" />
+    </svg>
+  );
+}
+
+/* ═══════════════════ Course thumbnail icons ═══════════════════ */
+
+function FrenchThumbnail() {
+  return (
+    <div className="w-full h-full bg-gradient-to-br from-blue-100 via-white to-red-100 flex items-center justify-center relative">
+      {/* French flag stripes */}
+      <div className="absolute inset-0 flex">
+        <div className="w-1/3 bg-blue-400/30" />
+        <div className="w-1/3 bg-white/30" />
+        <div className="w-1/3 bg-red-400/30" />
+      </div>
+      <svg viewBox="0 0 60 60" className="h-16 w-16 relative z-10" fill="none">
+        <circle cx="20" cy="28" r="8" fill="#EDB9A0" />
+        <rect x="14" y="36" width="12" height="16" rx="3" fill="#E8734A" opacity="0.6" />
+        <circle cx="40" cy="28" r="8" fill="#EDB9A0" />
+        <rect x="34" y="36" width="12" height="16" rx="3" fill="#5BB5B0" opacity="0.6" />
+        <circle cx="20" cy="22" r="4" fill="#333" opacity="0.1" />
+        <circle cx="40" cy="22" r="4" fill="#333" opacity="0.1" />
+      </svg>
+    </div>
+  );
+}
+
+function JapanIcon() {
+  return (
+    <svg viewBox="0 0 80 80" className="h-16 w-16" fill="none">
+      {/* Torii gate */}
+      <rect x="18" y="28" width="4" height="38" rx="1.5" fill="#D94F5C" />
+      <rect x="58" y="28" width="4" height="38" rx="1.5" fill="#D94F5C" />
+      <rect x="14" y="26" width="52" height="5" rx="2" fill="#E35D6A" />
+      <rect x="20" y="35" width="40" height="3.5" rx="1.5" fill="#E35D6A" />
+      {/* Mt Fuji */}
+      <path d="M42 50 L58 66 H26 Z" fill="#7B9EC9" opacity="0.5" />
+      <path d="M42 50 L47 56 H37 Z" fill="white" opacity="0.7" />
+      {/* Cherry blossom */}
+      <circle cx="64" cy="22" r="3.5" fill="#FFB7C5" />
+      <circle cx="60" cy="18" r="3" fill="#FFA3B5" />
+      <circle cx="67" cy="17" r="2.5" fill="#FFB7C5" />
+      <circle cx="63" cy="15" r="2" fill="#FFCDD8" />
+      <circle cx="58" cy="22" r="2.5" fill="#FFCDD8" />
+    </svg>
+  );
+}
+
+function SpainIcon() {
+  return (
+    <svg viewBox="0 0 80 80" className="h-16 w-16" fill="none">
+      {/* Speech bubble */}
+      <rect x="10" y="12" width="60" height="44" rx="12" fill="white" opacity="0.9" />
+      <path d="M30 56 L26 68 L38 56" fill="white" opacity="0.9" />
+      {/* Spain flag colors as accent */}
+      <rect x="18" y="20" width="44" height="6" rx="3" fill="#AA151B" />
+      <rect x="18" y="30" width="44" height="8" rx="3" fill="#F1BF00" />
+      <rect x="18" y="42" width="44" height="6" rx="3" fill="#AA151B" />
+      {/* ¡Hola! text */}
+      <text x="40" y="38" textAnchor="middle" fontFamily="sans-serif" fontWeight="800" fontSize="11" fill="#AA151B" opacity="0.9">¡Hola!</text>
+    </svg>
+  );
+}
+
+function PythonIcon() {
+  return (
+    <svg viewBox="0 0 80 80" className="h-16 w-16" fill="none">
+      {/* Terminal window */}
+      <rect x="10" y="14" width="60" height="52" rx="8" fill="#1E293B" />
+      <rect x="10" y="14" width="60" height="12" rx="8" fill="#334155" />
+      <rect x="10" y="22" width="60" height="4" fill="#334155" />
+      {/* Window dots */}
+      <circle cx="20" cy="20" r="2.5" fill="#EF4444" />
+      <circle cx="28" cy="20" r="2.5" fill="#EAB308" />
+      <circle cx="36" cy="20" r="2.5" fill="#22C55E" />
+      {/* Code lines */}
+      <text x="18" y="39" fontFamily="monospace" fontWeight="700" fontSize="8" fill="#22C55E">&gt;&gt;&gt;</text>
+      <rect x="38" y="33" width="24" height="4" rx="2" fill="#60A5FA" opacity="0.7" />
+      <rect x="18" y="44" width="30" height="3.5" rx="1.5" fill="#A78BFA" opacity="0.5" />
+      <rect x="18" y="52" width="20" height="3.5" rx="1.5" fill="#34D399" opacity="0.5" />
+      <rect x="42" y="52" width="16" height="3.5" rx="1.5" fill="#FBBF24" opacity="0.5" />
+    </svg>
+  );
+}
+
+function PythonIcon2() {
+  return (
+    <svg viewBox="0 0 80 80" className="h-16 w-16" fill="none">
+      {/* Rocket body */}
+      <path d="M40 10 C40 10 28 28 28 48 C28 58 33 64 40 68 C47 64 52 58 52 48 C52 28 40 10 40 10Z" fill="white" opacity="0.95" />
+      {/* Window */}
+      <circle cx="40" cy="38" r="7" fill="#3B82F6" opacity="0.8" />
+      <circle cx="40" cy="38" r="4" fill="#60A5FA" opacity="0.6" />
+      <circle cx="38" cy="36" r="1.5" fill="white" opacity="0.7" />
+      {/* Fins */}
+      <path d="M28 48 Q22 52 20 60 L28 56Z" fill="#EF4444" opacity="0.8" />
+      <path d="M52 48 Q58 52 60 60 L52 56Z" fill="#EF4444" opacity="0.8" />
+      {/* Flame */}
+      <path d="M36 68 Q38 76 40 78 Q42 76 44 68 Q42 72 40 73 Q38 72 36 68Z" fill="#F59E0B" />
+      <path d="M38 68 Q39 74 40 75 Q41 74 42 68 Q41 71 40 71 Q39 71 38 68Z" fill="#EF4444" />
+      {/* Nose cone */}
+      <path d="M40 10 C38 16 36 22 35 26 L45 26 C44 22 42 16 40 10Z" fill="#EF4444" opacity="0.7" />
+    </svg>
+  );
+}
+
+function GenericIcon() {
+  return (
+    <svg viewBox="0 0 80 80" className="h-16 w-16" fill="none">
+      {/* Book */}
+      <path d="M16 18 C16 14 20 12 24 12 L56 12 C60 12 64 14 64 18 V62 C64 66 60 68 56 68 L24 68 C20 68 16 66 16 62Z" fill="#F59E0B" opacity="0.85" />
+      <path d="M20 16 L20 64 C20 64 24 62 30 62 L60 62 L60 14 L30 14 C24 14 20 16 20 16Z" fill="#FEF3C7" />
+      {/* Spine */}
+      <path d="M20 16 L20 64" stroke="#D97706" strokeWidth="2" />
+      {/* Lines on page */}
+      <rect x="28" y="22" width="24" height="3" rx="1.5" fill="#D97706" opacity="0.3" />
+      <rect x="28" y="30" width="20" height="2.5" rx="1" fill="#92400E" opacity="0.15" />
+      <rect x="28" y="36" width="22" height="2.5" rx="1" fill="#92400E" opacity="0.15" />
+      <rect x="28" y="42" width="18" height="2.5" rx="1" fill="#92400E" opacity="0.15" />
+      {/* Bookmark */}
+      <path d="M50 12 V28 L53 24 L56 28 V12Z" fill="#EF4444" opacity="0.7" />
+      {/* Star */}
+      <circle cx="55" cy="55" r="6" fill="#F59E0B" opacity="0.5" />
+      <polygon points="55,49 56.5,53 61,53 57.5,56 58.8,60 55,57.5 51.2,60 52.5,56 49,53 53.5,53" fill="#FBBF24" />
+    </svg>
+  );
+}
+
+function MLIcon() {
+  return (
+    <svg viewBox="0 0 80 80" className="h-16 w-16" fill="none">
+      {/* Brain outline */}
+      <path d="M40 14 C30 14 22 20 22 30 C22 34 24 37 24 37 C20 39 18 43 18 48 C18 55 24 60 30 60 L32 60 C32 64 36 68 40 68 C44 68 48 64 48 60 L50 60 C56 60 62 55 62 48 C62 43 60 39 56 37 C56 37 58 34 58 30 C58 20 50 14 40 14Z" fill="#A78BFA" opacity="0.2" stroke="#8B5CF6" strokeWidth="2" />
+      {/* Neural network nodes */}
+      <circle cx="28" cy="32" r="4" fill="#8B5CF6" opacity="0.7" />
+      <circle cx="40" cy="24" r="4" fill="#A78BFA" opacity="0.8" />
+      <circle cx="52" cy="32" r="4" fill="#8B5CF6" opacity="0.7" />
+      <circle cx="32" cy="46" r="4" fill="#7C3AED" opacity="0.6" />
+      <circle cx="48" cy="46" r="4" fill="#7C3AED" opacity="0.6" />
+      <circle cx="40" cy="58" r="4" fill="#6D28D9" opacity="0.7" />
+      {/* Connections */}
+      <line x1="28" y1="32" x2="40" y2="24" stroke="#8B5CF6" strokeWidth="1.5" opacity="0.4" />
+      <line x1="52" y1="32" x2="40" y2="24" stroke="#8B5CF6" strokeWidth="1.5" opacity="0.4" />
+      <line x1="28" y1="32" x2="32" y2="46" stroke="#8B5CF6" strokeWidth="1.5" opacity="0.4" />
+      <line x1="52" y1="32" x2="48" y2="46" stroke="#8B5CF6" strokeWidth="1.5" opacity="0.4" />
+      <line x1="32" y1="46" x2="40" y2="58" stroke="#8B5CF6" strokeWidth="1.5" opacity="0.4" />
+      <line x1="48" y1="46" x2="40" y2="58" stroke="#8B5CF6" strokeWidth="1.5" opacity="0.4" />
+      <line x1="32" y1="46" x2="48" y2="46" stroke="#8B5CF6" strokeWidth="1.5" opacity="0.3" />
+      {/* Sparkle */}
+      <path d="M60 16 L61 20 L65 21 L61 22 L60 26 L59 22 L55 21 L59 20Z" fill="#FBBF24" opacity="0.8" />
+    </svg>
+  );
+}
+
+function DSIcon() {
+  return (
+    <svg viewBox="0 0 80 80" className="h-16 w-16" fill="none">
+      {/* Chart background */}
+      <rect x="12" y="12" width="56" height="56" rx="10" fill="white" opacity="0.15" />
+      {/* Grid lines */}
+      <line x1="18" y1="58" x2="62" y2="58" stroke="#0891B2" strokeWidth="1" opacity="0.2" />
+      <line x1="18" y1="46" x2="62" y2="46" stroke="#0891B2" strokeWidth="1" opacity="0.1" />
+      <line x1="18" y1="34" x2="62" y2="34" stroke="#0891B2" strokeWidth="1" opacity="0.1" />
+      {/* Bars */}
+      <rect x="20" y="42" width="8" height="16" rx="3" fill="#06B6D4" opacity="0.7" />
+      <rect x="31" y="30" width="8" height="28" rx="3" fill="#0891B2" opacity="0.8" />
+      <rect x="42" y="36" width="8" height="22" rx="3" fill="#22D3EE" opacity="0.7" />
+      <rect x="53" y="22" width="8" height="36" rx="3" fill="#06B6D4" opacity="0.9" />
+      {/* Trend line */}
+      <path d="M24 40 L35 28 L46 34 L57 20" stroke="#F59E0B" strokeWidth="2.5" strokeLinecap="round" fill="none" />
+      {/* Dots on trend */}
+      <circle cx="24" cy="40" r="3" fill="#F59E0B" />
+      <circle cx="35" cy="28" r="3" fill="#F59E0B" />
+      <circle cx="46" cy="34" r="3" fill="#F59E0B" />
+      <circle cx="57" cy="20" r="3" fill="#FBBF24" />
+      {/* Magnifier */}
+      <circle cx="61" cy="16" r="5" fill="none" stroke="white" strokeWidth="1.5" opacity="0.6" />
+      <line x1="65" y1="20" x2="68" y2="23" stroke="white" strokeWidth="1.5" opacity="0.6" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function HeartIcon() {
+  return (
+    <svg viewBox="0 0 80 80" className="h-16 w-16" fill="none">
+      {/* Anatomical heart shape */}
+      <path d="M40 68 C20 52 8 40 8 28 C8 18 16 10 26 10 C32 10 37 13 40 18 C43 13 48 10 54 10 C64 10 72 18 72 28 C72 40 60 52 40 68Z" fill="#E11D48" opacity="0.75" />
+      <path d="M40 62 C24 48 14 38 14 28 C14 20 20 14 28 14 C33 14 37 16 40 20 C43 16 47 14 52 14 C60 14 66 20 66 28 C66 38 56 48 40 62Z" fill="#FB7185" opacity="0.6" />
+      {/* Heartbeat line */}
+      <path d="M12 40 L28 40 L32 30 L36 50 L40 25 L44 48 L48 32 L50 40 L68 40" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" opacity="0.9" />
+      {/* Blood drops */}
+      <path d="M22 58 Q24 52 26 58 Q24 62 22 58Z" fill="#E11D48" opacity="0.4" />
+      <path d="M56 56 Q58 50 60 56 Q58 60 56 56Z" fill="#E11D48" opacity="0.3" />
+    </svg>
+  );
+}
+
+function CalculusIcon() {
+  return (
+    <svg viewBox="0 0 80 80" className="h-16 w-16" fill="none">
+      {/* Background circle */}
+      <circle cx="40" cy="40" r="30" fill="#3B82F6" opacity="0.15" />
+      {/* Coordinate axes */}
+      <line x1="14" y1="60" x2="66" y2="60" stroke="#3B82F6" strokeWidth="2" strokeLinecap="round" opacity="0.5" />
+      <line x1="20" y1="14" x2="20" y2="66" stroke="#3B82F6" strokeWidth="2" strokeLinecap="round" opacity="0.5" />
+      {/* Curve (limit / derivative) */}
+      <path d="M22 55 C30 52 35 40 38 30 C41 20 46 16 55 14" stroke="#6366F1" strokeWidth="2.5" strokeLinecap="round" fill="none" />
+      {/* Tangent line */}
+      <line x1="28" y1="55" x2="58" y2="22" stroke="#F59E0B" strokeWidth="2" strokeDasharray="4 3" opacity="0.7" />
+      {/* Point on curve */}
+      <circle cx="38" cy="30" r="4" fill="#6366F1" opacity="0.8" />
+      <circle cx="38" cy="30" r="2" fill="white" opacity="0.9" />
+      {/* dx notation */}
+      <text x="54" y="70" fontFamily="serif" fontStyle="italic" fontSize="12" fill="#6366F1" opacity="0.7">dx</text>
+      {/* Integral symbol */}
+      <text x="8" y="30" fontFamily="serif" fontSize="18" fill="#3B82F6" opacity="0.5">∫</text>
+      {/* Infinity */}
+      <text x="58" y="14" fontFamily="serif" fontSize="10" fill="#6366F1" opacity="0.4">∞</text>
+    </svg>
+  );
+}

app/(dashboard)/layout.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="relative min-h-screen bg-gradient-to-br from-[#edf7fb] via-[#c9e6f2] to-[#a3d5e8]">
+      {children}
+    </div>
+  );
+}

app/(dashboard)/map/[courseId]/MapClient.tsx

@@ -0,0 +1,1031 @@
+"use client";
+
+import React, { useMemo, useState, useEffect, useRef, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import Link from "next/link";
+import { useParams } from "next/navigation";
+import TopStatsBar from "@/components/shared/TopStatsBar";
+import useCourseStore from "@/stores/useCourseStore";
+import type { RemedyNode } from "@/stores/useCourseStore";
+import useUserStore from "@/stores/useUserStore";
+
+/* ═══════════════════ Fallback mock nodes (for demo courseIds with no mock data) ═══════════════════ */
+
+interface MapNode {
+  id: string;
+  title: string;
+  status: "completed" | "available" | "locked";
+  x: number;
+  y: number;
+}
+
+/* ── Per-library-course metadata: each course has its own independent title + nodes ── */
+const LIBRARY_COURSE_META: Record<string, { title: string; nodes: { id: string; title: string; status: "completed" | "available" | "locked" }[] }> = {
+  ja: {
+    title: "Japanese",
+    nodes: [
+      { id: "ja-n1", title: "Hiragana Basics", status: "completed" },
+      { id: "ja-n2", title: "Katakana Basics", status: "available" },
+      { id: "ja-n3", title: "Greetings & Self-Introduction", status: "locked" },
+      { id: "ja-n4", title: "Numbers & Counting", status: "locked" },
+      { id: "ja-n5", title: "Basic Particles (は・が・を)", status: "locked" },
+      { id: "ja-n6", title: "Daily Conversation", status: "locked" },
+      { id: "ja-n7", title: "Verb Conjugation", status: "locked" },
+      { id: "ja-n8", title: "Adjectives & Descriptions", status: "locked" },
+      { id: "ja-n9", title: "Kanji Level 1", status: "locked" },
+      { id: "ja-n10", title: "Reading Comprehension", status: "locked" },
+      { id: "ja-n11", title: "Listening Practice", status: "locked" },
+      { id: "ja-n12", title: "Travel Japanese", status: "locked" },
+      { id: "ja-n13", title: "Polite vs Casual Speech", status: "locked" },
+      { id: "ja-n14", title: "Culture & Etiquette", status: "locked" },
+      { id: "ja-n15", title: "Final Challenge", status: "locked" },
+    ],
+  },
+  es: {
+    title: "Spanish",
+    nodes: [
+      { id: "es-n1", title: "Alphabet & Pronunciation", status: "completed" },
+      { id: "es-n2", title: "Greetings & Introductions", status: "available" },
+      { id: "es-n3", title: "Articles & Gender", status: "locked" },
+      { id: "es-n4", title: "Basic Verbs (Ser/Estar)", status: "locked" },
+      { id: "es-n5", title: "Numbers & Time", status: "locked" },
+      { id: "es-n6", title: "Food & Ordering", status: "locked" },
+      { id: "es-n7", title: "Present Tense Conjugation", status: "locked" },
+      { id: "es-n8", title: "Prepositions & Directions", status: "locked" },
+      { id: "es-n9", title: "Past Tense (Pretérito)", status: "locked" },
+      { id: "es-n10", title: "Shopping & Money", status: "locked" },
+      { id: "es-n11", title: "Subjunctive Mood", status: "locked" },
+      { id: "es-n12", title: "Travel Conversation", status: "locked" },
+      { id: "es-n13", title: "Reading Practice", status: "locked" },
+      { id: "es-n14", title: "Culture & Idioms", status: "locked" },
+      { id: "es-n15", title: "Final Challenge", status: "locked" },
+    ],
+  },
+  py: {
+    title: "Python",
+    nodes: [
+      { id: "py-n1", title: "Variables & Data Types", status: "completed" },
+      { id: "py-n2", title: "Control Flow (if/else)", status: "available" },
+      { id: "py-n3", title: "Loops (for/while)", status: "locked" },
+      { id: "py-n4", title: "Functions & Scope", status: "locked" },
+      { id: "py-n5", title: "Lists & Tuples", status: "locked" },
+      { id: "py-n6", title: "Dictionaries & Sets", status: "locked" },
+      { id: "py-n7", title: "String Manipulation", status: "locked" },
+      { id: "py-n8", title: "File I/O", status: "locked" },
+      { id: "py-n9", title: "Error Handling", status: "locked" },
+      { id: "py-n10", title: "Modules & Packages", status: "locked" },
+      { id: "py-n11", title: "List Comprehensions", status: "locked" },
+      { id: "py-n12", title: "OOP Basics", status: "locked" },
+      { id: "py-n13", title: "Decorators & Generators", status: "locked" },
+      { id: "py-n14", title: "Testing with pytest", status: "locked" },
+      { id: "py-n15", title: "Final Project", status: "locked" },
+    ],
+  },
+  py2: {
+    title: "Python Advanced",
+    nodes: [
+      { id: "py2-n1", title: "Async & Concurrency", status: "completed" },
+      { id: "py2-n2", title: "Metaprogramming", status: "available" },
+      { id: "py2-n3", title: "Design Patterns", status: "locked" },
+      { id: "py2-n4", title: "Type Hints & Mypy", status: "locked" },
+      { id: "py2-n5", title: "Performance Optimization", status: "locked" },
+      { id: "py2-n6", title: "Context Managers", status: "locked" },
+      { id: "py2-n7", title: "Networking & APIs", status: "locked" },
+      { id: "py2-n8", title: "Data Processing (Pandas)", status: "locked" },
+      { id: "py2-n9", title: "Database Integration", status: "locked" },
+      { id: "py2-n10", title: "Web Scraping", status: "locked" },
+      { id: "py2-n11", title: "CLI Tools (Click/Typer)", status: "locked" },
+      { id: "py2-n12", title: "Package Publishing", status: "locked" },
+      { id: "py2-n13", title: "CI/CD Pipelines", status: "locked" },
+      { id: "py2-n14", title: "Security Best Practices", status: "locked" },
+      { id: "py2-n15", title: "Capstone Project", status: "locked" },
+    ],
+  },
+  gen: {
+    title: "Study Skills",
+    nodes: [
+      { id: "gen-n1", title: "Active Recall", status: "completed" },
+      { id: "gen-n2", title: "Spaced Repetition", status: "available" },
+      { id: "gen-n3", title: "Note-Taking Methods", status: "locked" },
+      { id: "gen-n4", title: "Mind Mapping", status: "locked" },
+      { id: "gen-n5", title: "Pomodoro Technique", status: "locked" },
+      { id: "gen-n6", title: "Goal Setting (SMART)", status: "locked" },
+      { id: "gen-n7", title: "Critical Thinking", status: "locked" },
+      { id: "gen-n8", title: "Speed Reading", status: "locked" },
+      { id: "gen-n9", title: "Memory Palace", status: "locked" },
+      { id: "gen-n10", title: "Group Study Strategies", status: "locked" },
+      { id: "gen-n11", title: "Test Preparation", status: "locked" },
+      { id: "gen-n12", title: "Time Management", status: "locked" },
+      { id: "gen-n13", title: "Self-Assessment", status: "locked" },
+      { id: "gen-n14", title: "Growth Mindset", status: "locked" },
+      { id: "gen-n15", title: "Final Review", status: "locked" },
+    ],
+  },
+  ml: {
+    title: "ML Basics",
+    nodes: [
+      { id: "ml-n1", title: "What is Machine Learning?", status: "completed" },
+      { id: "ml-n2", title: "Supervised vs Unsupervised", status: "available" },
+      { id: "ml-n3", title: "Linear Regression", status: "locked" },
+      { id: "ml-n4", title: "Logistic Regression", status: "locked" },
+      { id: "ml-n5", title: "Decision Trees", status: "locked" },
+      { id: "ml-n6", title: "K-Nearest Neighbors", status: "locked" },
+      { id: "ml-n7", title: "Support Vector Machines", status: "locked" },
+      { id: "ml-n8", title: "Neural Network Intro", status: "locked" },
+      { id: "ml-n9", title: "Training & Validation", status: "locked" },
+      { id: "ml-n10", title: "Overfitting & Regularization", status: "locked" },
+      { id: "ml-n11", title: "Feature Engineering", status: "locked" },
+      { id: "ml-n12", title: "Model Evaluation Metrics", status: "locked" },
+      { id: "ml-n13", title: "Ensemble Methods", status: "locked" },
+      { id: "ml-n14", title: "Deploying Models", status: "locked" },
+      { id: "ml-n15", title: "Final Challenge", status: "locked" },
+    ],
+  },
+  ds: {
+    title: "Data Science",
+    nodes: [
+      { id: "ds-n1", title: "Data Science Overview", status: "completed" },
+      { id: "ds-n2", title: "Data Collection & Cleaning", status: "available" },
+      { id: "ds-n3", title: "Exploratory Data Analysis", status: "locked" },
+      { id: "ds-n4", title: "Statistical Foundations", status: "locked" },
+      { id: "ds-n5", title: "Data Visualization", status: "locked" },
+      { id: "ds-n6", title: "Hypothesis Testing", status: "locked" },
+      { id: "ds-n7", title: "Regression Analysis", status: "locked" },
+      { id: "ds-n8", title: "Clustering Techniques", status: "locked" },
+      { id: "ds-n9", title: "Time Series Analysis", status: "locked" },
+      { id: "ds-n10", title: "Natural Language Processing", status: "locked" },
+      { id: "ds-n11", title: "Big Data Tools", status: "locked" },
+      { id: "ds-n12", title: "Dashboard & Reporting", status: "locked" },
+      { id: "ds-n13", title: "A/B Testing", status: "locked" },
+      { id: "ds-n14", title: "Ethics in Data Science", status: "locked" },
+      { id: "ds-n15", title: "Capstone Project", status: "locked" },
+    ],
+  },
+};
+
+const FALLBACK_NODES: { id: string; title: string; status: "completed" | "available" | "locked" }[] = [
+  { id: "demo-n1", title: "Introduction", status: "completed" },
+  { id: "demo-n2", title: "Core Concepts", status: "available" },
+  { id: "demo-n3", title: "Deep Dive", status: "locked" },
+  { id: "demo-n4", title: "Practice Lab", status: "locked" },
+  { id: "demo-n5", title: "Advanced Topics", status: "locked" },
+  { id: "demo-n6", title: "Connections", status: "locked" },
+  { id: "demo-n7", title: "Analysis", status: "locked" },
+  { id: "demo-n8", title: "Synthesis", status: "locked" },
+  { id: "demo-n9", title: "Application", status: "locked" },
+  { id: "demo-n10", title: "Case Study", status: "locked" },
+  { id: "demo-n11", title: "Research", status: "locked" },
+  { id: "demo-n12", title: "Review", status: "locked" },
+  { id: "demo-n13", title: "Mastery", status: "locked" },
+  { id: "demo-n14", title: "Integration", status: "locked" },
+  { id: "demo-n15", title: "Final Challenge", status: "locked" },
+];
+
+/* ═══════════════════ Page ═══════════════════ */
+
+export default function MapClient() {
+  const params = useParams();
+  const courseId = params.courseId as string;
+
+  const loadMockCourses = useCourseStore((s) => s.loadMockCourses);
+  const getCourse = useCourseStore((s) => s.getCourse);
+  const getNodesForCourse = useCourseStore((s) => s.getNodesForCourse);
+  const getRemedyNodesForCourse = useCourseStore((s) => s.getRemedyNodesForCourse);
+  const setLastActiveCourse = useUserStore((s) => s.setLastActiveCourse);
+
+  const [loaded, setLoaded] = useState(false);
+
+  useEffect(() => {
+    loadMockCourses();
+    setLoaded(true);
+  }, [loadMockCourses]);
+
+  /* Lock body scroll while map page is mounted (zoom 1.05 causes overflow) */
+  useEffect(() => {
+    const prev = document.documentElement.style.overflow;
+    document.documentElement.style.overflow = "hidden";
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.documentElement.style.overflow = prev;
+      document.body.style.overflow = "";
+    };
+  }, []);
+
+  useEffect(() => {
+    if (courseId) setLastActiveCourse(courseId);
+  }, [courseId, setLastActiveCourse]);
+
+  const course = getCourse(courseId);
+  const storeNodes = getNodesForCourse(courseId);
+
+  // Build MapNode array – use store data if available, otherwise fallback
+  // Dynamic positions: zigzag pattern, each node spaced vertically
+  const NODES: MapNode[] = useMemo(() => {
+    const X_PATTERN = [50, 28, 68, 32, 58, 40, 65, 30, 55, 42, 62, 35, 58, 45, 50];
+    const buildPositions = (nodes: { id: string; title: string; status: "completed" | "available" | "locked" }[]) => {
+      const count = nodes.length;
+      const spacing = 120; // px per node
+      return nodes.map((n, i) => ({
+        id: n.id,
+        title: n.title,
+        status: n.status,
+        x: X_PATTERN[i % X_PATTERN.length],
+        y: (count - 1 - i) * spacing + 60, // bottom-to-top, first node at bottom
+      }));
+    };
+
+    if (storeNodes.length > 0) {
+      return buildPositions(storeNodes);
+    }
+    if (!loaded) return [];
+    // Use per-course fallback nodes if available
+    const libMeta = LIBRARY_COURSE_META[courseId];
+    if (libMeta) return buildPositions(libMeta.nodes);
+    return buildPositions(FALLBACK_NODES);
+  }, [storeNodes, loaded, courseId]);
+
+  // Total height for scrollable map
+  const mapHeight = Math.max(560, NODES.length * 120 + 120);
+
+  /* ── Scroll to bottom on load ── */
+  const mapContainerRef = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (NODES.length > 0 && mapContainerRef.current) {
+      mapContainerRef.current.scrollTop = mapContainerRef.current.scrollHeight;
+    }
+  }, [NODES.length]);
+
+  /* ── Mouse drag to pan ── */
+  const isDragging = useRef(false);
+  const dragStart = useRef({ x: 0, y: 0, scrollLeft: 0, scrollTop: 0 });
+
+  const handleMouseDown = useCallback((e: React.MouseEvent) => {
+    const container = mapContainerRef.current;
+    if (!container) return;
+    isDragging.current = true;
+    dragStart.current = {
+      x: e.clientX,
+      y: e.clientY,
+      scrollLeft: container.scrollLeft,
+      scrollTop: container.scrollTop,
+    };
+    container.style.cursor = "grabbing";
+    container.style.userSelect = "none";
+  }, []);
+
+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
+    if (!isDragging.current) return;
+    const container = mapContainerRef.current;
+    if (!container) return;
+    const dx = e.clientX - dragStart.current.x;
+    const dy = e.clientY - dragStart.current.y;
+    container.scrollTop = dragStart.current.scrollTop - dy;
+    container.scrollLeft = dragStart.current.scrollLeft - dx;
+  }, []);
+
+  const handleMouseUp = useCallback(() => {
+    isDragging.current = false;
+    const container = mapContainerRef.current;
+    if (container) {
+      container.style.cursor = "grab";
+      container.style.userSelect = "";
+    }
+  }, []);
+
+  const pageTitle = course?.unitTitle ?? LIBRARY_COURSE_META[courseId]?.title ?? "Course Map";
+  const remedyNodes = getRemedyNodesForCourse(courseId);
+  return (
+    <div className="relative overflow-hidden bg-gradient-to-br from-[#edf7fb] via-[#c9e6f2] to-[#a3d5e8]" style={{ zoom: 1.05, height: "calc(100vh / 1.05)" }}>
+      <TopStatsBar backHref="/home" pageTitle={pageTitle} />
+
+      {/* Background effects */}
+      <MapBg />
+      <FloatingParticles />
+
+      <div className="relative z-10 flex gap-6 px-6 max-w-7xl mx-auto" style={{ height: "calc(100vh / 1.05 - 56px)" }}>
+        {/* ── Center: Map canvas (drag to pan, hidden scrollbar) ── */}
+        <div
+          ref={mapContainerRef}
+          className="flex-1 min-w-0 overflow-y-auto rounded-2xl scrollbar-hide"
+          style={{ cursor: "grab" }}
+          onMouseDown={handleMouseDown}
+          onMouseMove={handleMouseMove}
+          onMouseUp={handleMouseUp}
+          onMouseLeave={handleMouseUp}
+        >
+          <div className="relative" style={{ height: mapHeight, minHeight: 560 }}>
+            {/* SVG path connecting nodes */}
+            <svg
+              className="absolute inset-0 w-full h-full pointer-events-none z-0"
+              viewBox={`0 0 100 ${mapHeight}`}
+              preserveAspectRatio="none"
+              fill="none"
+            >
+              <defs>
+                <linearGradient id="pathGrad" x1="0" y1="1" x2="0" y2="0">
+                  <stop offset="0%" stopColor="#4a9e9b" stopOpacity="0.8" />
+                  <stop offset="100%" stopColor="#8a7a60" stopOpacity="0.5" />
+                </linearGradient>
+              </defs>
+              {NODES.slice(0, -1).map((node, i) => {
+                const next = NODES[i + 1];
+                const nx = node.x;
+                const ny = node.y;
+                const nnx = next.x;
+                const nny = next.y;
+                const mx = (nx + nnx) / 2;
+                const my = (ny + nny) / 2;
+                const isActive =
+                  node.status !== "locked" || next.status !== "locked";
+                return (
+                  <path
+                    key={i}
+                    d={`M ${nx} ${ny} Q ${mx + (i % 2 === 0 ? 12 : -12)} ${my} ${nnx} ${nny}`}
+                    stroke={isActive ? "url(#pathGrad)" : "#999"}
+                    strokeWidth="1.8"
+                    strokeDasharray="4 3"
+                    opacity={isActive ? 0.85 : 0.45}
+                    vectorEffect="non-scaling-stroke"
+                  />
+                );
+              })}
+            </svg>
+
+            {/* Nodes */}
+            {NODES.map((node, i) => {
+              const remedy = remedyNodes.find((r) => r.sourceNodeId === node.id);
+              return (
+                <MapNodeCircle key={node.id} node={node} index={i} remedyNode={remedy} />
+              );
+            })}
+          </div>
+        </div>
+
+        {/* ── Right: AI Chat Assistant ── */}
+        <div className="w-[340px] flex-shrink-0 pt-8">
+          <AIChatAssistant />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ═══════════════════ AI Chat Assistant ═══════════════════ */
+
+interface ChatMessage {
+  id: number;
+  role: "user" | "assistant";
+  text: string;
+}
+
+function AIChatAssistant() {
+  const [input, setInput] = useState("");
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const chatEndRef = React.useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages]);
+
+  const handleSend = () => {
+    const trimmed = input.trim();
+    if (!trimmed) return;
+
+    const userMsg: ChatMessage = { id: Date.now(), role: "user", text: trimmed };
+    const botMsg: ChatMessage = { id: Date.now() + 1, role: "assistant", text: trimmed };
+
+    setMessages((prev) => [...prev, userMsg, botMsg]);
+    setInput("");
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, x: 40 }}
+      animate={{ opacity: 1, x: 0 }}
+      transition={{ delay: 0.3, type: "spring", damping: 18 }}
+      className="rounded-3xl bg-white/60 backdrop-blur-xl border border-white/50 shadow-lg shadow-teal-200/20 overflow-hidden flex flex-col"
+      style={{ height: "78vh", minHeight: 560 }}
+    >
+      {/* Header */}
+      <div className="px-6 pt-6 pb-4 flex items-center gap-3">
+        {/* Owl avatar */}
+        <div className="relative w-14 h-14 flex-shrink-0">
+          <div className="w-14 h-14 rounded-full bg-gradient-to-br from-amber-300 to-amber-500 flex items-center justify-center shadow-md">
+            <svg viewBox="0 0 40 40" className="w-9 h-9" fill="none">
+              <ellipse cx="20" cy="24" rx="12" ry="10" fill="#C47F17" />
+              <circle cx="15" cy="20" r="5" fill="white" />
+              <circle cx="25" cy="20" r="5" fill="white" />
+              <circle cx="15" cy="20" r="2.5" fill="#2D2D2D" />
+              <circle cx="25" cy="20" r="2.5" fill="#2D2D2D" />
+              <circle cx="16" cy="19" r="1" fill="white" />
+              <circle cx="26" cy="19" r="1" fill="white" />
+              <polygon points="20,22 18,25 22,25" fill="#FF9500" />
+              <polygon points="10,16 8,8 15,14" fill="#C47F17" />
+              <polygon points="30,16 32,8 25,14" fill="#C47F17" />
+            </svg>
+          </div>
+        </div>
+        <div>
+          <h3 className="font-heading font-bold text-[15px] text-brand-gray-700">
+            AI Chat Assistant
+          </h3>
+          <p className="text-xs text-brand-gray-400 mt-0.5">
+            Ask me anything about this course!
+          </p>
+        </div>
+      </div>
+
+      {/* Chat messages area */}
+      <div className="flex-1 overflow-y-auto px-5 pb-3 space-y-3">
+        {messages.length === 0 && (
+          <div className="flex flex-col items-center justify-center py-8 gap-3 text-center">
+            <div className="w-12 h-12 rounded-full bg-brand-teal/10 flex items-center justify-center">
+              <svg viewBox="0 0 24 24" className="w-6 h-6 text-brand-teal" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z" />
+              </svg>
+            </div>
+            <p className="text-xs text-brand-gray-400 leading-relaxed max-w-[200px]">
+              Type a message to start chatting with your AI study companion!
+            </p>
+          </div>
+        )}
+
+        {messages.map((msg) => (
+          <motion.div
+            key={msg.id}
+            initial={{ opacity: 0, y: 8 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.2 }}
+            className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}
+          >
+            <div
+              className={`max-w-[85%] rounded-2xl px-4 py-2.5 text-[13px] leading-relaxed ${
+                msg.role === "user"
+                  ? "bg-gradient-to-r from-brand-teal to-[#5fb3af] text-white rounded-br-md"
+                  : "bg-white/70 border border-white/60 text-brand-gray-600 rounded-bl-md shadow-sm"
+              }`}
+            >
+              {msg.text}
+            </div>
+          </motion.div>
+        ))}
+        <div ref={chatEndRef} />
+      </div>
+
+      {/* Divider */}
+      <div className="mx-5 h-px bg-gradient-to-r from-transparent via-brand-teal/20 to-transparent" />
+
+      {/* Input area */}
+      <div className="px-5 py-4 flex items-end gap-2">
+        <textarea
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={handleKeyDown}
+          placeholder="Type your message..."
+          rows={1}
+          className="flex-1 resize-none rounded-xl bg-white/70 border border-white/60 px-4 py-3 text-[13px] text-brand-gray-700 placeholder-brand-gray-300 focus:outline-none focus:ring-2 focus:ring-brand-teal/30 focus:border-brand-teal/40 transition-all"
+          style={{ maxHeight: 80 }}
+        />
+        <motion.button
+          onClick={handleSend}
+          whileTap={{ scale: 0.9 }}
+          className="flex-shrink-0 w-11 h-11 rounded-xl bg-gradient-to-r from-brand-teal to-[#5fb3af] text-white flex items-center justify-center shadow-md shadow-teal-300/30 hover:shadow-lg hover:shadow-teal-300/40 transition-all"
+        >
+          <svg viewBox="0 0 24 24" className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <line x1="22" y1="2" x2="11" y2="13" />
+            <polygon points="22 2 15 22 11 13 2 9 22 2" />
+          </svg>
+        </motion.button>
+      </div>
+    </motion.div>
+  );
+}
+
+/* ═══════════════════ Node Circle ═══════════════════ */
+
+function MapNodeCircle({
+  node,
+  index,
+  remedyNode,
+}: {
+  node: MapNode;
+  index: number;
+  remedyNode?: RemedyNode;
+}) {
+  const isClickable =
+    node.status === "available" || node.status === "completed";
+
+  const content = (
+    <motion.div
+      initial={{ opacity: 0, y: 20, scale: 0.8 }}
+      animate={{ opacity: 1, y: 0, scale: 1 }}
+      transition={{ delay: 0.15 * index, type: "spring", damping: 14 }}
+      className="flex flex-col items-center gap-2 cursor-pointer"
+      whileHover={isClickable ? { scale: 1.1 } : {}}
+      whileTap={isClickable ? { scale: 0.92 } : {}}
+    >
+      {/* Outer glow ring for available */}
+      {node.status === "available" && (
+        <>
+          <motion.div
+            className="absolute w-[88px] h-[88px] rounded-full"
+            style={{
+              background:
+                "radial-gradient(circle, rgba(122,199,196,0.25) 0%, transparent 70%)",
+            }}
+            animate={{ scale: [1, 1.4, 1], opacity: [0.4, 0.7, 0.4] }}
+            transition={{ repeat: Infinity, duration: 2.5, ease: "easeInOut" }}
+          />
+          {/* Petal / scallop border */}
+          <motion.div
+            className="absolute w-[76px] h-[76px]"
+            animate={{ rotate: [0, 360] }}
+            transition={{ repeat: Infinity, duration: 20, ease: "linear" }}
+          >
+            <svg viewBox="0 0 76 76" className="w-full h-full" fill="none">
+              {Array.from({ length: 12 }).map((_, i) => {
+                const angle = (i * 30 * Math.PI) / 180;
+                const cx = 38 + 32 * Math.cos(angle);
+                const cy = 38 + 32 * Math.sin(angle);
+                return (
+                  <circle
+                    key={i}
+                    cx={cx}
+                    cy={cy}
+                    r="8"
+                    fill="none"
+                    stroke="#7AC7C4"
+                    strokeWidth="1"
+                    opacity="0.3"
+                  />
+                );
+              })}
+            </svg>
+          </motion.div>
+        </>
+      )}
+
+      {/* Completed outer ring decoration */}
+      {node.status === "completed" && (
+        <motion.div
+          className="absolute w-[78px] h-[78px]"
+          animate={{ rotate: [0, -360] }}
+          transition={{ repeat: Infinity, duration: 25, ease: "linear" }}
+        >
+          <svg viewBox="0 0 78 78" className="w-full h-full" fill="none">
+            {Array.from({ length: 10 }).map((_, i) => {
+              const angle = (i * 36 * Math.PI) / 180;
+              const cx = 39 + 33 * Math.cos(angle);
+              const cy = 39 + 33 * Math.sin(angle);
+              return (
+                <circle
+                  key={i}
+                  cx={cx}
+                  cy={cy}
+                  r="7"
+                  fill="none"
+                  stroke="#F5C842"
+                  strokeWidth="1"
+                  opacity="0.35"
+                />
+              );
+            })}
+          </svg>
+        </motion.div>
+      )}
+
+      {/* Main circle */}
+      <div
+        className={`relative z-10 h-[64px] w-[64px] rounded-full flex items-center justify-center transition-all ${
+          node.status === "completed"
+            ? "shadow-lg shadow-amber-300/30"
+            : node.status === "available"
+            ? "shadow-lg shadow-teal-400/30"
+            : "shadow-md"
+        }`}
+      >
+        {/* Background with double border effect */}
+        <div
+          className={`absolute inset-0 rounded-full ${
+            node.status === "completed"
+              ? "bg-gradient-to-br from-yellow-300 via-amber-400 to-yellow-500"
+              : node.status === "available"
+              ? "bg-gradient-to-br from-[#7AC7C4] via-[#5fb3af] to-[#4da8a4]"
+              : "bg-gradient-to-br from-[#e0ddd8] via-[#d4d0ca] to-[#c8c4be]"
+          }`}
+        />
+        {/* Inner ring */}
+        <div
+          className={`absolute inset-[3px] rounded-full border-2 ${
+            node.status === "completed"
+              ? "border-yellow-200/50"
+              : node.status === "available"
+              ? "border-white/30"
+              : "border-white/20"
+          }`}
+        />
+        {/* Specular highlight */}
+        <div className="absolute inset-0 rounded-full overflow-hidden">
+          <div
+            className="absolute -top-1 left-1/2 -translate-x-1/2 w-[70%] h-[40%] rounded-[50%]"
+            style={{
+              background:
+                node.status === "locked"
+                  ? "linear-gradient(180deg, rgba(255,255,255,0.25) 0%, transparent 100%)"
+                  : "linear-gradient(180deg, rgba(255,255,255,0.35) 0%, transparent 100%)",
+            }}
+          />
+        </div>
+
+        {/* Icon */}
+        <div className="relative z-10">
+          {node.status === "completed" ? (
+            <svg
+              viewBox="0 0 24 24"
+              className="h-7 w-7 text-white drop-shadow-sm"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="3"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <path d="M20 6L9 17l-5-5" />
+            </svg>
+          ) : node.status === "available" ? (
+            <motion.div
+              animate={{ scale: [1, 1.15, 1] }}
+              transition={{
+                repeat: Infinity,
+                duration: 2,
+                ease: "easeInOut",
+              }}
+            >
+              <svg
+                viewBox="0 0 24 24"
+                className="h-7 w-7 text-white drop-shadow-sm"
+                fill="currentColor"
+              >
+                <polygon points="12,2 15,9 22,9 16,14 18,22 12,17 6,22 8,14 2,9 9,9" />
+              </svg>
+            </motion.div>
+          ) : (
+            <svg
+              viewBox="0 0 24 24"
+              className="h-6 w-6 text-[#a09a92]"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <rect x="3" y="11" width="18" height="11" rx="2" />
+              <path d="M7 11V7a5 5 0 0110 0v4" />
+            </svg>
+          )}
+        </div>
+      </div>
+
+      {/* Label */}
+      <span
+        className={`text-[11px] font-heading font-bold text-center max-w-[100px] leading-tight drop-shadow-sm ${
+          node.status === "completed"
+            ? "text-amber-700"
+            : node.status === "available"
+            ? "text-teal-700"
+            : "text-brand-gray-400"
+        }`}
+      >
+        {node.title}
+      </span>
+    </motion.div>
+  );
+
+  return (
+    <div
+      className="absolute z-10"
+      style={{
+        left: `${node.x}%`,
+        top: `${node.y}px`,
+        transform: "translate(-50%, -50%)",
+      }}
+    >
+      {/* ── Remedy circle node on the LEFT ── */}
+      <AnimatePresence>
+        {remedyNode && (
+          <motion.div
+            initial={{ opacity: 0, scale: 0.5, x: 30 }}
+            animate={{ opacity: 1, scale: 1, x: 0 }}
+            exit={{ opacity: 0, scale: 0.5, x: 30 }}
+            transition={{ type: "spring", damping: 16, stiffness: 180 }}
+            className="absolute z-20"
+            style={{ right: "calc(100% + 60px)", top: "50%", transform: "translateY(-50%)" }}
+          >
+            {/* Dashed curve connecting to main node */}
+            <svg
+              className="absolute pointer-events-none"
+              style={{ left: "calc(100% + 4px)", top: "50%", transform: "translateY(-50%)" }}
+              width="56" height="20" viewBox="0 0 56 20" fill="none"
+            >
+              <path
+                d="M0 10 Q28 0 56 10"
+                stroke="#f59e0b"
+                strokeWidth="2"
+                strokeDasharray="4 3"
+                opacity="0.7"
+                fill="none"
+              />
+            </svg>
+
+            {remedyNode.status === "available" ? (
+              <Link href={`/play/${remedyNode.sourceNodeId}`}>
+                <motion.div
+                  className="flex flex-col items-center gap-2 cursor-pointer"
+                  whileHover={{ scale: 1.12 }}
+                  whileTap={{ scale: 0.92 }}
+                >
+                  {/* Outer glow */}
+                  <motion.div
+                    className="absolute w-[80px] h-[80px] rounded-full"
+                    style={{ background: "radial-gradient(circle, rgba(245,158,11,0.25) 0%, transparent 70%)" }}
+                    animate={{ scale: [1, 1.35, 1], opacity: [0.4, 0.7, 0.4] }}
+                    transition={{ repeat: Infinity, duration: 2.5, ease: "easeInOut" }}
+                  />
+                  {/* Petal ring */}
+                  <motion.div
+                    className="absolute w-[70px] h-[70px]"
+                    animate={{ rotate: [0, 360] }}
+                    transition={{ repeat: Infinity, duration: 18, ease: "linear" }}
+                  >
+                    <svg viewBox="0 0 70 70" className="w-full h-full" fill="none">
+                      {Array.from({ length: 10 }).map((_, i) => {
+                        const angle = (i * 36 * Math.PI) / 180;
+                        const cx = 35 + 29 * Math.cos(angle);
+                        const cy = 35 + 29 * Math.sin(angle);
+                        return <circle key={i} cx={cx} cy={cy} r="7" fill="none" stroke="#f59e0b" strokeWidth="1" opacity="0.3" />;
+                      })}
+                    </svg>
+                  </motion.div>
+                  {/* Main circle */}
+                  <div className="relative z-10 h-[58px] w-[58px] rounded-full flex items-center justify-center shadow-lg shadow-amber-400/30">
+                    <div className="absolute inset-0 rounded-full bg-gradient-to-br from-amber-300 via-orange-400 to-amber-500" />
+                    <div className="absolute inset-[3px] rounded-full border-2 border-amber-200/50" />
+                    <div className="absolute inset-0 rounded-full overflow-hidden">
+                      <div className="absolute -top-1 left-1/2 -translate-x-1/2 w-[70%] h-[40%] rounded-[50%]" style={{ background: "linear-gradient(180deg, rgba(255,255,255,0.35) 0%, transparent 100%)" }} />
+                    </div>
+                    <div className="relative z-10">
+                      <motion.div animate={{ scale: [1, 1.12, 1] }} transition={{ repeat: Infinity, duration: 2, ease: "easeInOut" }}>
+                        <svg viewBox="0 0 24 24" className="h-6 w-6 text-white drop-shadow-sm" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
+                          <path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z" />
+                          <path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z" />
+                        </svg>
+                      </motion.div>
+                    </div>
+                  </div>
+                  <span className="text-[10px] font-heading font-bold text-amber-700 text-center max-w-[90px] leading-tight drop-shadow-sm whitespace-nowrap">補強練習</span>
+                </motion.div>
+              </Link>
+            ) : (
+              <div className="flex flex-col items-center gap-2">
+                {/* Completed ring – amber style */}
+                <motion.div
+                  className="absolute w-[70px] h-[70px]"
+                  animate={{ rotate: [0, -360] }}
+                  transition={{ repeat: Infinity, duration: 25, ease: "linear" }}
+                >
+                  <svg viewBox="0 0 70 70" className="w-full h-full" fill="none">
+                    {Array.from({ length: 10 }).map((_, i) => {
+                      const angle = (i * 36 * Math.PI) / 180;
+                      const cx = 35 + 29 * Math.cos(angle);
+                      const cy = 35 + 29 * Math.sin(angle);
+                      return <circle key={i} cx={cx} cy={cy} r="7" fill="none" stroke="#f59e0b" strokeWidth="1" opacity="0.35" />;
+                    })}
+                  </svg>
+                </motion.div>
+                {/* Main circle – completed amber */}
+                <div className="relative z-10 h-[58px] w-[58px] rounded-full flex items-center justify-center shadow-lg shadow-amber-400/30">
+                  <div className="absolute inset-0 rounded-full bg-gradient-to-br from-amber-300 via-orange-400 to-amber-500" />
+                  <div className="absolute inset-[3px] rounded-full border-2 border-amber-200/50" />
+                  <div className="absolute inset-0 rounded-full overflow-hidden">
+                    <div className="absolute -top-1 left-1/2 -translate-x-1/2 w-[70%] h-[40%] rounded-[50%]" style={{ background: "linear-gradient(180deg, rgba(255,255,255,0.35) 0%, transparent 100%)" }} />
+                  </div>
+                  <div className="relative z-10">
+                    <svg viewBox="0 0 24 24" className="h-7 w-7 text-white drop-shadow-sm" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                      <path d="M20 6L9 17l-5-5" />
+                    </svg>
+                  </div>
+                </div>
+                <span className="text-[10px] font-heading font-bold text-amber-700 text-center max-w-[90px] leading-tight drop-shadow-sm whitespace-nowrap">補強完成</span>
+              </div>
+            )}
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {isClickable ? (
+        <Link href={`/play/${node.id}`}>{content}</Link>
+      ) : (
+        content
+      )}
+    </div>
+  );
+}
+
+/* ═══════════════════ Floating Particles ═══════════════════ */
+
+function FloatingParticles() {
+  const particles = useMemo(
+    () =>
+      Array.from({ length: 24 }, (_, i) => ({
+        id: i,
+        x: 5 + Math.random() * 90,
+        size: 3 + Math.random() * 5,
+        delay: Math.random() * 8,
+        duration: 10 + Math.random() * 12,
+        opacity: 0.08 + Math.random() * 0.15,
+        type: i % 4, // 0=dot, 1=ring, 2=diamond, 3=star
+      })),
+    []
+  );
+
+  return (
+    <div
+      className="pointer-events-none absolute inset-0 z-[1] overflow-hidden"
+      aria-hidden="true"
+    >
+      {particles.map((p) => (
+        <motion.div
+          key={p.id}
+          className="absolute"
+          style={{ left: `${p.x}%`, bottom: -20 }}
+          animate={{
+            y: [0, -(typeof window !== "undefined" ? window.innerHeight + 40 : 900)],
+            x: [0, (p.id % 2 === 0 ? 1 : -1) * (15 + Math.random() * 25)],
+            rotate: [0, 180 + Math.random() * 180],
+          }}
+          transition={{
+            duration: p.duration,
+            delay: p.delay,
+            repeat: Infinity,
+            ease: "linear",
+          }}
+        >
+          {p.type === 0 && (
+            <div
+              className="rounded-full bg-brand-teal"
+              style={{
+                width: p.size,
+                height: p.size,
+                opacity: p.opacity,
+              }}
+            />
+          )}
+          {p.type === 1 && (
+            <div
+              className="rounded-full border border-brand-teal"
+              style={{
+                width: p.size * 1.5,
+                height: p.size * 1.5,
+                opacity: p.opacity,
+              }}
+            />
+          )}
+          {p.type === 2 && (
+            <div
+              className="bg-amber-400"
+              style={{
+                width: p.size,
+                height: p.size,
+                opacity: p.opacity,
+                transform: "rotate(45deg)",
+                borderRadius: 1,
+              }}
+            />
+          )}
+          {p.type === 3 && (
+            <svg
+              viewBox="0 0 24 24"
+              fill="#7AC7C4"
+              style={{
+                width: p.size * 1.8,
+                height: p.size * 1.8,
+                opacity: p.opacity,
+              }}
+            >
+              <polygon points="12,2 15,9 22,9 16,14 18,22 12,17 6,22 8,14 2,9 9,9" />
+            </svg>
+          )}
+        </motion.div>
+      ))}
+
+      {/* Sparkle shimmer dots */}
+      {Array.from({ length: 14 }, (_, i) => (
+        <motion.div
+          key={`sparkle-${i}`}
+          className="absolute rounded-full bg-white"
+          style={{
+            width: 2 + Math.random() * 3,
+            height: 2 + Math.random() * 3,
+            left: `${8 + Math.random() * 84}%`,
+            top: `${10 + Math.random() * 80}%`,
+          }}
+          animate={{
+            opacity: [0, 0.4, 0],
+            scale: [0.5, 1.2, 0.5],
+          }}
+          transition={{
+            duration: 2 + Math.random() * 3,
+            delay: Math.random() * 5,
+            repeat: Infinity,
+            ease: "easeInOut",
+          }}
+        />
+      ))}
+    </div>
+  );
+}
+
+/* ═══════════════════ Background ═══════════════════ */
+
+function MapBg() {
+  return (
+    <div
+      className="pointer-events-none absolute inset-0 z-0 overflow-hidden"
+      aria-hidden="true"
+    >
+      {/* Runic circle — bottom-right */}
+      <svg
+        viewBox="0 0 700 700"
+        className="absolute -right-[160px] -bottom-[160px] w-[520px] h-[520px] opacity-[0.08]"
+        fill="none"
+      >
+        <defs>
+          <radialGradient id="mapPeach" cx="50%" cy="45%" r="50%">
+            <stop offset="0%" stopColor="#D4EEE8" />
+            <stop offset="60%" stopColor="#B5DDD4" />
+            <stop offset="100%" stopColor="#9ACEC3" />
+          </radialGradient>
+          <path
+            id="mapRune"
+            d="M 350,350 m -260,0 a 260,260 0 1,1 520,0 a 260,260 0 1,1 -520,0"
+          />
+        </defs>
+        <circle cx="350" cy="350" r="300" fill="url(#mapPeach)" opacity="0.5" />
+        <circle
+          cx="350"
+          cy="350"
+          r="290"
+          fill="none"
+          stroke="#7AC7C4"
+          strokeWidth="1"
+          opacity="0.3"
+        />
+        <circle
+          cx="350"
+          cy="350"
+          r="240"
+          fill="none"
+          stroke="#7AC7C4"
+          strokeWidth="0.5"
+          opacity="0.2"
+          strokeDasharray="8 6"
+        />
+        <text
+          fill="#7AC7C4"
+          fontSize="18"
+          fontWeight="500"
+          letterSpacing="4"
+          opacity="0.3"
+        >
+          <textPath href="#mapRune">
+            ᚠᚢᚦᚨᚱᚲᚷᚹᚺᚾᛁᛃᛇᛈᛉᛊᛏᛒᛖᛗᛚᛜᛝᛞᛟᚠᚢᚦᚨᚱᚲᚷᚹᚺᚾᛁᛃᛇᛈᛉᛊᛏᛒᛖᛗᛚᛜᛝᛞᛟ
+          </textPath>
+        </text>
+      </svg>
+
+      {/* Subtle top-left gradient orb */}
+      <div
+        className="absolute -left-[100px] -top-[100px] w-[400px] h-[400px] rounded-full opacity-[0.06]"
+        style={{
+          background:
+            "radial-gradient(circle, rgba(122,199,196,0.6) 0%, transparent 70%)",
+        }}
+      />
+
+      {/* Mid-right soft glow */}
+      <div
+        className="absolute right-[5%] top-[35%] w-[200px] h-[200px] rounded-full opacity-[0.05]"
+        style={{
+          background:
+            "radial-gradient(circle, rgba(245,200,66,0.5) 0%, transparent 70%)",
+        }}
+      />
+    </div>
+  );
+}

app/(dashboard)/map/[courseId]/page.tsx

@@ -0,0 +1,20 @@
+import MapClient from "./MapClient";
+
+export function generateStaticParams() {
+  return [
+    { courseId: "med-u1" },
+    { courseId: "calc-u1" },
+    // Library courses from home page
+    { courseId: "ja" },
+    { courseId: "es" },
+    { courseId: "py" },
+    { courseId: "py2" },
+    { courseId: "gen" },
+    { courseId: "ml" },
+    { courseId: "ds" },
+  ];
+}
+
+export default function MapPage() {
+  return <MapClient />;
+}

app/(dashboard)/store/page.tsx

@@ -0,0 +1,530 @@
+"use client";
+
+import React, { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import TopStatsBar from "@/components/shared/TopStatsBar";
+import DeepGlassCard from "@/components/ui/DeepGlassCard";
+import useUserStore from "@/stores/useUserStore";
+
+/* ═══════════════════ Types & data ═══════════════════ */
+
+interface Tier {
+  id: string;
+  label: string;
+  gems: number;
+  price: string;
+  badge?: string;
+  variant: "starter" | "popular" | "pro";
+}
+
+const TIERS: Tier[] = [
+  {
+    id: "starter",
+    label: "Handful of Gems",
+    gems: 500,
+    price: "$4.99",
+    variant: "starter",
+  },
+  {
+    id: "popular",
+    label: "Chest of Gems",
+    gems: 2000,
+    price: "$19.99",
+    badge: "Best Value",
+    variant: "popular",
+  },
+  {
+    id: "pro",
+    label: "Infinite Energy Subscription",
+    gems: -1, // unlimited
+    price: "$14.99/mo",
+    variant: "pro",
+  },
+];
+
+/* ═══════════════════ Page ═══════════════════ */
+
+export default function StorePage() {
+  const [selectedTier, setSelectedTier] = useState<Tier | null>(null);
+
+  return (
+    <div className="relative min-h-screen overflow-hidden">
+      {/* ── TopStatsBar with back arrow ── */}
+      <TopStatsBar backHref="/home" pageTitle="Treasury / Top-Up Store" />
+
+      {/* ── Background decoration ── */}
+      <StoreBg />
+
+      {/* ══════════════ Content ══════════════ */}
+      <div className="relative z-10 max-w-6xl mx-auto px-4 md:px-8 py-10 md:py-16">
+        {/* Header */}
+        <div className="text-center mb-10 md:mb-14">
+          <h1 className="font-heading text-3xl md:text-4xl font-extrabold text-brand-gray-700 mb-3">
+            The Treasury: Fuel Your Journey
+          </h1>
+          <p className="text-brand-gray-500 text-base md:text-lg">
+            Get Gems (💎) to forge new courses or ask for hints.
+          </p>
+        </div>
+
+        {/* Pricing Tiers */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8 items-stretch justify-center max-w-4xl mx-auto">
+          {TIERS.map((tier) => (
+            <TierCard
+              key={tier.id}
+              tier={tier}
+              onSelect={() => setSelectedTier(tier)}
+            />
+          ))}
+        </div>
+      </div>
+
+      {/* ── Payment Modal ── */}
+      <AnimatePresence>
+        {selectedTier && (
+          <PaymentModal
+            tier={selectedTier}
+            onClose={() => setSelectedTier(null)}
+          />
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}
+
+/* ═══════════════════ Tier Card ═══════════════════ */
+
+function TierCard({
+  tier,
+  onSelect,
+}: {
+  tier: Tier;
+  onSelect: () => void;
+}) {
+  if (tier.variant === "pro") {
+    return <ProTierCard tier={tier} onSelect={onSelect} />;
+  }
+
+  return (
+    <motion.div whileHover={{ y: -6 }} className="relative h-full">
+      {/* Best Value ribbon */}
+      {tier.badge && (
+        <div className="absolute -top-0 -right-0 z-20">
+          <div className="relative">
+            <div className="bg-gradient-to-r from-brand-green to-emerald-500 text-white text-xs font-bold px-3 py-1 rounded-bl-xl rounded-tr-2xl shadow-lg transform rotate-0 origin-top-right">
+              {tier.badge}
+            </div>
+          </div>
+        </div>
+      )}
+
+      <DeepGlassCard
+        className={`h-full px-6 py-8 flex flex-col items-center text-center cursor-pointer transition-all hover:shadow-2xl ${
+          tier.variant === "popular"
+            ? "ring-2 ring-brand-teal/50 shadow-[0_0_30px_rgba(122,199,196,0.15)]"
+            : ""
+        }`}
+        onClick={onSelect}
+      >
+        {/* Title */}
+        <h3 className="font-heading font-bold text-brand-gray-700 text-lg mb-1">
+          {tier.label} ({tier.gems} 💎)
+        </h3>
+
+        {/* Illustration */}
+        <div className="my-6 h-28 flex items-center justify-center">
+          {tier.variant === "starter" ? <GemsIllustration /> : <ChestIllustration />}
+        </div>
+
+        {/* Price */}
+        <p className="font-heading text-2xl font-extrabold text-brand-gray-700 mb-5">
+          {tier.price}
+        </p>
+
+        {/* Spacer to push button to bottom */}
+        <div className="flex-1" />
+
+        {/* Buy button */}
+        <button className="w-full rounded-xl py-3 font-heading font-bold text-white bg-gradient-to-b from-brand-teal to-[#5fb3af] border-b-4 border-[#4a9e9a] shadow-md hover:shadow-lg active:translate-y-0.5 active:shadow-sm transition-all">
+          Purchase
+        </button>
+      </DeepGlassCard>
+    </motion.div>
+  );
+}
+
+/* ── Pro / Subscription Tier ── */
+
+function ProTierCard({
+  tier,
+  onSelect,
+}: {
+  tier: Tier;
+  onSelect: () => void;
+}) {
+  return (
+    <motion.div whileHover={{ y: -6 }} className="relative h-full">
+      <motion.div
+        className="relative rounded-3xl overflow-hidden cursor-pointer shadow-2xl h-full"
+        onClick={onSelect}
+      >
+        {/* Animated gradient background */}
+        <div className="absolute inset-0 bg-gradient-to-br from-[#1a0533] via-[#2d1b69] to-[#0f0520] animate-gradient-shift" />
+
+        {/* Lightning / energy effects */}
+        <div className="absolute inset-0 overflow-hidden">
+          <ProEffects />
+        </div>
+
+        {/* Content */}
+        <div className="relative z-10 px-6 py-8 flex flex-col items-center text-center h-full">
+          <h3 className="font-heading font-bold text-white text-lg mb-1">
+            {tier.label}
+          </h3>
+
+          {/* Energy icon */}
+          <div className="my-6 h-28 flex items-center justify-center">
+            <InfiniteEnergyIcon />
+          </div>
+
+          <p className="font-heading text-2xl font-extrabold text-white mb-5">
+            {tier.price}
+          </p>
+
+          <div className="flex-1" />
+
+          <button className="w-full rounded-xl py-3 font-heading font-bold text-[#1a0533] bg-gradient-to-b from-amber-300 to-yellow-400 border-b-4 border-yellow-600 shadow-md hover:shadow-lg active:translate-y-0.5 active:shadow-sm transition-all">
+            Subscribe
+          </button>
+        </div>
+      </motion.div>
+    </motion.div>
+  );
+}
+
+/* ═══════════════════ Payment Modal ═══════════════════ */
+
+function PaymentModal({
+  tier,
+  onClose,
+}: {
+  tier: Tier;
+  onClose: () => void;
+}) {
+  const [processing, setProcessing] = useState(false);
+  const [done, setDone] = useState(false);
+  const addGems = useUserStore((s) => s.addGems);
+
+  const handlePay = () => {
+    setProcessing(true);
+    setTimeout(() => {
+      setProcessing(false);
+      setDone(true);
+      if (tier.gems > 0) {
+        addGems(tier.gems);
+      }
+    }, 1800);
+  };
+
+  return (
+    <motion.div
+      className="fixed inset-0 z-[100] flex items-end justify-center"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+    >
+      {/* Backdrop */}
+      <motion.div
+        className="absolute inset-0 bg-black/30"
+        onClick={onClose}
+        initial={{ opacity: 0, backdropFilter: "blur(0px)" }}
+        animate={{ opacity: 1, backdropFilter: "blur(6px)" }}
+        exit={{ opacity: 0, backdropFilter: "blur(0px)" }}
+        transition={{ duration: 0.6, ease: "easeOut" }}
+      />
+
+      {/* Modal sheet */}
+      <motion.div
+        className="relative z-10 w-full max-w-md mx-4 mb-0 md:mb-8"
+        initial={{ y: "100%" }}
+        animate={{ y: 0 }}
+        exit={{ y: "100%" }}
+        transition={{ type: "spring", damping: 28, stiffness: 300 }}
+      >
+        <div className="bg-white rounded-t-3xl md:rounded-3xl shadow-2xl overflow-hidden">
+          {/* Header */}
+          <div className="relative px-6 pt-6 pb-4">
+            {/* Close button */}
+            <button
+              onClick={onClose}
+              className="absolute right-4 top-4 h-8 w-8 rounded-full bg-brand-gray-100 flex items-center justify-center text-brand-gray-500 hover:bg-brand-gray-200 transition"
+            >
+              <svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round">
+                <path d="M18 6L6 18M6 6l12 12" />
+              </svg>
+            </button>
+
+            <h2 className="font-heading text-xl font-extrabold text-brand-gray-700 text-center">
+              Confirm Purchase
+            </h2>
+            <p className="text-sm text-brand-gray-500 text-center mt-1">
+              {tier.label}{" "}
+              {tier.gems > 0 ? `(${tier.gems.toLocaleString()} 💎)` : ""} –{" "}
+              {tier.price}
+            </p>
+          </div>
+
+          {/* Divider */}
+          <div className="h-px bg-brand-gray-100 mx-6" />
+
+          {done ? (
+            /* ── Success state ── */
+            <div className="px-6 py-10 flex flex-col items-center gap-3">
+              <motion.div
+                initial={{ scale: 0 }}
+                animate={{ scale: 1 }}
+                transition={{ type: "spring", damping: 12 }}
+                className="h-16 w-16 rounded-full bg-brand-green/10 flex items-center justify-center"
+              >
+                <svg viewBox="0 0 24 24" className="h-8 w-8 text-brand-green" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M20 6L9 17l-5-5" />
+                </svg>
+              </motion.div>
+              <p className="font-heading font-bold text-brand-gray-700 text-lg">
+                Payment Successful!
+              </p>
+              <p className="text-sm text-brand-gray-500">
+                {tier.gems > 0
+                  ? `${tier.gems.toLocaleString()} gems have been added to your account.`
+                  : "Your subscription is now active."}
+              </p>
+              <button
+                onClick={onClose}
+                className="mt-4 w-full rounded-xl py-3.5 font-heading font-bold text-white bg-brand-green shadow-md hover:shadow-lg transition active:translate-y-0.5"
+              >
+                Done
+              </button>
+            </div>
+          ) : (
+            /* ── Payment form ── */
+            <div className="px-6 py-5 space-y-4">
+              {/* Credit card row */}
+              <button className="w-full flex items-center justify-between px-4 py-3.5 rounded-xl border border-brand-gray-200 hover:bg-brand-gray-50 transition">
+                <div className="flex flex-col items-start">
+                  <span className="text-xs text-brand-gray-400 font-medium">
+                    Credit card info
+                  </span>
+                  <span className="text-sm text-brand-gray-700 font-semibold tracking-wider mt-0.5">
+                    •••• •••• •••• 0223
+                  </span>
+                </div>
+                <svg viewBox="0 0 24 24" className="h-5 w-5 text-brand-gray-400" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M9 6l6 6-6 6" />
+                </svg>
+              </button>
+
+              {/* Apple Pay button */}
+              <button
+                onClick={handlePay}
+                disabled={processing}
+                className="w-full flex items-center justify-center gap-2 py-3.5 rounded-xl bg-black text-white font-heading font-bold text-base shadow-lg hover:bg-gray-900 active:bg-gray-800 transition disabled:opacity-70"
+              >
+                {processing ? (
+                  <motion.div
+                    className="h-5 w-5 border-2 border-white/30 border-t-white rounded-full"
+                    animate={{ rotate: 360 }}
+                    transition={{ repeat: Infinity, duration: 0.8, ease: "linear" }}
+                  />
+                ) : (
+                  <>
+                    Pay with{" "}
+                    <svg viewBox="0 0 24 24" className="h-5 w-5 fill-white" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" />
+                    </svg>
+                    Pay
+                  </>
+                )}
+              </button>
+
+              {/* Divider */}
+              <div className="flex items-center gap-3">
+                <div className="flex-1 h-px bg-brand-gray-100" />
+                <span className="text-xs text-brand-gray-400">or pay with card</span>
+                <div className="flex-1 h-px bg-brand-gray-100" />
+              </div>
+
+              {/* Confirm Purchase button */}
+              <button
+                onClick={handlePay}
+                disabled={processing}
+                className="w-full rounded-xl py-3.5 font-heading font-bold text-white bg-gradient-to-b from-brand-teal to-[#5fb3af] border-b-4 border-[#4a9e9a] shadow-md hover:shadow-lg active:translate-y-0.5 active:shadow-sm transition-all disabled:opacity-70"
+              >
+                {processing ? "Processing…" : `Pay ${tier.price}`}
+              </button>
+            </div>
+          )}
+
+          {/* Bottom safe-area spacer (mobile) */}
+          <div className="h-4 md:h-0" />
+        </div>
+      </motion.div>
+    </motion.div>
+  );
+}
+
+/* ═══════════════════ Illustrations ═══════════════════ */
+
+function GemsIllustration() {
+  return (
+    <svg viewBox="0 0 120 100" className="h-full w-auto" fill="none">
+      {/* Main gem */}
+      <polygon points="60,10 80,35 70,80 50,80 40,35" fill="#E8B4C8" opacity="0.4" />
+      <polygon points="60,10 80,35 60,40 40,35" fill="#F0C8D8" opacity="0.6" />
+      <polygon points="60,40 80,35 70,80" fill="#D8A0B8" opacity="0.5" />
+      <polygon points="60,40 40,35 50,80" fill="#E0B0C0" opacity="0.5" />
+      {/* Small gems */}
+      <polygon points="25,55 35,45 40,60 30,68 20,62" fill="#F0C8D8" opacity="0.5" />
+      <polygon points="85,50 95,42 98,55 90,62 82,58" fill="#F0C8D8" opacity="0.5" />
+      {/* Sparkles */}
+      <circle cx="50" cy="20" r="2" fill="#FFD700" opacity="0.6" />
+      <circle cx="75" cy="45" r="1.5" fill="#FFD700" opacity="0.5" />
+      <circle cx="30" cy="40" r="1.5" fill="#FFD700" opacity="0.5" />
+    </svg>
+  );
+}
+
+function ChestIllustration() {
+  return (
+    <svg viewBox="0 0 140 110" className="h-full w-auto" fill="none">
+      {/* Chest body */}
+      <rect x="25" y="50" width="90" height="45" rx="6" fill="#C4956A" />
+      <rect x="25" y="50" width="90" height="45" rx="6" fill="url(#chestGrad)" />
+      {/* Chest lid */}
+      <path d="M25 50 Q70 20 115 50" fill="#D4A87A" />
+      <path d="M25 50 Q70 25 115 50" fill="none" stroke="#B8875A" strokeWidth="1.5" />
+      {/* Metal band */}
+      <rect x="60" y="44" width="20" height="12" rx="2" fill="#DAA520" />
+      <circle cx="70" cy="56" r="4" fill="#B8860B" />
+      <circle cx="70" cy="56" r="2" fill="#DAA520" />
+      {/* Gems spilling out */}
+      <polygon points="50,45 55,35 60,45" fill="#E8B4C8" opacity="0.8" />
+      <polygon points="70,38 76,26 82,38" fill="#A0D8E8" opacity="0.8" />
+      <polygon points="88,42 92,32 96,42" fill="#C8E8A0" opacity="0.8" />
+      <polygon points="55,40 58,32 62,42" fill="#FFD700" opacity="0.6" />
+      {/* Sparkles */}
+      <circle cx="55" cy="30" r="2" fill="#FFD700" opacity="0.7" />
+      <circle cx="80" cy="22" r="2" fill="#FFD700" opacity="0.6" />
+      <circle cx="95" cy="28" r="1.5" fill="#FFD700" opacity="0.5" />
+      <circle cx="42" cy="38" r="1.5" fill="#FFD700" opacity="0.5" />
+      <defs>
+        <linearGradient id="chestGrad" x1="25" y1="50" x2="25" y2="95" gradientUnits="userSpaceOnUse">
+          <stop offset="0%" stopColor="#D4A87A" />
+          <stop offset="100%" stopColor="#A67A4A" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
+
+function InfiniteEnergyIcon() {
+  return (
+    <svg viewBox="0 0 160 120" className="h-full w-auto" fill="none">
+      {/* Glow backdrop */}
+      <ellipse cx="80" cy="60" rx="60" ry="45" fill="#8B5CF6" opacity="0.1" />
+      {/* Infinity symbol */}
+      <path
+        d="M50 60 C50 40 20 30 20 55 C20 80 50 80 55 60 C60 40 70 35 80 35 C90 35 100 40 105 60 C110 80 140 80 140 55 C140 30 110 40 110 60"
+        fill="none"
+        stroke="#C084FC"
+        strokeWidth="5"
+        strokeLinecap="round"
+        opacity="0.7"
+      />
+      <path
+        d="M50 60 C50 40 20 30 20 55 C20 80 50 80 55 60 C60 40 70 35 80 35 C90 35 100 40 105 60 C110 80 140 80 140 55 C140 30 110 40 110 60"
+        fill="none"
+        stroke="white"
+        strokeWidth="2"
+        strokeLinecap="round"
+        opacity="0.5"
+      />
+      {/* Lightning bolt - left */}
+      <path d="M62 35 L55 55 L65 52 L58 75" stroke="#FBBF24" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" fill="none" />
+      {/* Lightning bolt - right */}
+      <path d="M102 35 L95 55 L105 52 L98 75" stroke="#FBBF24" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" fill="none" />
+      {/* Sparkles */}
+      <circle cx="40" cy="45" r="2" fill="#FBBF24" opacity="0.7" />
+      <circle cx="120" cy="45" r="2" fill="#FBBF24" opacity="0.7" />
+      <circle cx="80" cy="25" r="2.5" fill="#C084FC" opacity="0.6" />
+      <circle cx="80" cy="95" r="2" fill="#C084FC" opacity="0.5" />
+    </svg>
+  );
+}
+
+/* ── Pro card effects ── */
+
+function ProEffects() {
+  return (
+    <>
+      {/* Diagonal light streaks */}
+      <div className="absolute top-0 left-1/4 w-px h-full bg-gradient-to-b from-transparent via-purple-400/20 to-transparent rotate-12" />
+      <div className="absolute top-0 right-1/3 w-px h-full bg-gradient-to-b from-transparent via-blue-400/15 to-transparent -rotate-12" />
+      {/* Corner glow */}
+      <div className="absolute -top-10 -right-10 w-40 h-40 rounded-full bg-purple-500/20 blur-3xl" />
+      <div className="absolute -bottom-10 -left-10 w-40 h-40 rounded-full bg-blue-600/15 blur-3xl" />
+      {/* Floating particles */}
+      {[...Array(6)].map((_, i) => (
+        <div
+          key={i}
+          className="absolute rounded-full bg-purple-300 particle"
+          style={{
+            width: `${2 + Math.random() * 3}px`,
+            height: `${2 + Math.random() * 3}px`,
+            left: `${10 + Math.random() * 80}%`,
+            bottom: `${Math.random() * 20}%`,
+            opacity: 0.4 + Math.random() * 0.3,
+            animationDelay: `${Math.random() * 5}s`,
+            animationDuration: `${4 + Math.random() * 4}s`,
+          }}
+        />
+      ))}
+    </>
+  );
+}
+
+/* ═══════════════════ Background ═══════════════════ */
+
+function StoreBg() {
+  const runeText =
+    "ᚠᚢᚦᚨᚱᚲᚷᚹᚺᚾᛁᛃᛇᛈᛉᛊᛏᛒᛖᛗᛚᛜᛝᛞᛟᚠᚢᚦᚨᚱᚲᚷᚹᚺᚾᛁᛃᛇᛈᛉᛊᛏᛒᛖᛗᛚᛜᛝᛞᛟ";
+  return (
+    <div className="pointer-events-none absolute inset-0 z-0 overflow-hidden" aria-hidden="true">
+      {/* Rune circle – bottom right */}
+      <svg
+        viewBox="0 0 700 700"
+        className="absolute -right-[140px] -bottom-[140px] w-[550px] h-[550px] opacity-20"
+        fill="none"
+      >
+        <defs>
+          <radialGradient id="storePeach" cx="50%" cy="45%" r="50%">
+            <stop offset="0%" stopColor="#FFF5EC" />
+            <stop offset="60%" stopColor="#F5DECA" />
+            <stop offset="100%" stopColor="#EDD0B5" />
+          </radialGradient>
+          <path id="storeRune" d="M 350,350 m -260,0 a 260,260 0 1,1 520,0 a 260,260 0 1,1 -520,0" />
+        </defs>
+        <circle cx="350" cy="350" r="300" fill="url(#storePeach)" opacity="0.5" />
+        <circle cx="350" cy="350" r="290" fill="none" stroke="#D4BC8B" strokeWidth="1" opacity="0.4" />
+        <circle cx="350" cy="350" r="248" fill="none" stroke="#D4BC8B" strokeWidth="1" opacity="0.4" />
+        <text fill="#C4A87A" fontSize="18" fontWeight="500" letterSpacing="4" opacity="0.35">
+          <textPath href="#storeRune">{runeText}</textPath>
+        </text>
+      </svg>
+
+      {/* Sparkle */}
+      <svg viewBox="0 0 40 40" className="absolute bottom-10 right-10 w-7 h-7" fill="none">
+        <path d="M20 0 L22 16 L40 20 L22 22 L20 40 L18 22 L0 20 L18 16 Z" fill="#D4A96A" opacity="0.5" />
+      </svg>
+    </div>
+  );
+}

app/(onboarding)/login/page.tsx

@@ -0,0 +1,539 @@
+"use client";
+
+import React, { useState } from "react";
+import { useRouter } from "next/navigation";
+import { FcGoogle } from "react-icons/fc";
+import { FaFacebook, FaApple } from "react-icons/fa";
+
+type AuthTab = "signup" | "login";
+
+export default function LoginPage() {
+  const router = useRouter();
+  const [activeTab, setActiveTab] = useState<AuthTab>("signup");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  return (
+    <div className="relative flex min-h-screen flex-col bg-gradient-to-br from-[#edf7fb] via-[#c9e6f2] to-[#a3d5e8] overflow-hidden">
+      {/* ── Decorative background: particles ── */}
+      <ParticleField />
+
+      {/* ══════════════ Main content ══════════════ */}
+      <main className="relative z-10 flex flex-1 items-center justify-center px-4 py-10 gap-8 flex-wrap lg:flex-nowrap max-w-7xl mx-auto w-full">
+        {/* ── LEFT: Hero ── */}
+        <section className="flex flex-col items-start max-w-md shrink-0">
+          {/* Logo */}
+          <div className="flex items-center gap-2 mb-6">
+            <OwlIcon className="h-10 w-10 text-brand-teal" />
+            <span className="font-heading text-2xl font-extrabold text-brand-gray-700">
+              Learn8
+            </span>
+          </div>
+
+          <h1 className="font-heading text-4xl md:text-[2.6rem] leading-tight font-extrabold text-brand-gray-700 mb-3">
+            Stop Reading,{" "}
+            <span className="block">Start Playing.</span>
+          </h1>
+          <p className="text-brand-gray-500 text-lg mb-8">
+            Convert your notes into a dynamic Skill Tree and master any subject through immersive mini-games.
+          </p>
+
+          {/* Mascot */}
+          <div className="mb-4 flex justify-center w-full">
+            <MascotOwl />
+          </div>
+          <p className="text-brand-gray-600 font-semibold text-sm">
+            Start your learning journey today!
+          </p>
+        </section>
+
+        {/* ── CENTER: CTA card ── */}
+        <section className="flex flex-col items-center bg-white/70 backdrop-blur-md rounded-2xl shadow-lg px-10 py-10 w-80 shrink-0">
+          {/* Tabs */}
+          <div className="flex gap-3 mb-6 text-lg font-heading font-bold">
+            <button
+              onClick={() => setActiveTab("signup")}
+              className={`pb-1 transition ${
+                activeTab === "signup"
+                  ? "text-brand-teal border-b-2 border-brand-teal"
+                  : "text-brand-gray-400"
+              }`}
+            >
+              Sign Up
+            </button>
+            <span className="text-brand-gray-300">/</span>
+            <button
+              onClick={() => setActiveTab("login")}
+              className={`pb-1 transition ${
+                activeTab === "login"
+                  ? "text-brand-teal border-b-2 border-brand-teal"
+                  : "text-brand-gray-400"
+              }`}
+            >
+              Log In
+            </button>
+          </div>
+
+          {activeTab === "signup" ? (
+            <>
+              <p className="text-brand-gray-600 text-center mb-6">
+                New here?
+                <br />
+                Create your account.
+              </p>
+              <button
+                className="w-full rounded-xl bg-brand-green px-6 py-3 font-heading font-bold text-white uppercase tracking-wide shadow-md
+                  hover:bg-brand-green-dark active:translate-y-0.5 transition mb-4"
+              >
+                Start Your Journey
+              </button>
+              <button
+                onClick={() => setActiveTab("login")}
+                className="text-brand-teal font-semibold hover:underline text-sm"
+              >
+                LOG IN
+              </button>
+            </>
+          ) : (
+            <>
+              <p className="text-brand-gray-600 text-center mb-6">
+                Ready to continue?
+              </p>
+              <button
+                className="w-full rounded-xl bg-brand-green px-6 py-3 font-heading font-bold text-white uppercase tracking-wide shadow-md
+                  hover:bg-brand-green-dark active:translate-y-0.5 transition mb-4"
+              >
+                Log In
+              </button>
+              <button
+                onClick={() => setActiveTab("signup")}
+                className="text-brand-teal font-semibold hover:underline text-sm"
+              >
+                SIGN UP
+              </button>
+            </>
+          )}
+        </section>
+
+        {/* ── RIGHT: Auth form card ── */}
+        <section className="bg-white rounded-2xl shadow-xl px-8 py-10 w-96 shrink-0">
+          <h2 className="font-heading text-2xl font-extrabold text-brand-gray-700 text-center mb-6">
+            Begin Your Mastery
+          </h2>
+
+          {/* Form Tabs */}
+          <div className="flex border-b border-brand-gray-200 mb-6">
+            <button
+              onClick={() => setActiveTab("signup")}
+              className={`flex-1 pb-2 text-center font-semibold transition ${
+                activeTab === "signup"
+                  ? "text-brand-gray-700 border-b-2 border-brand-gray-700"
+                  : "text-brand-gray-400"
+              }`}
+            >
+              Sign Up
+            </button>
+            <button
+              onClick={() => setActiveTab("login")}
+              className={`flex-1 pb-2 text-center font-semibold transition ${
+                activeTab === "login"
+                  ? "text-brand-gray-700 border-b-2 border-brand-gray-700"
+                  : "text-brand-gray-400"
+              }`}
+            >
+              Log In
+            </button>
+          </div>
+
+          {/* Form Fields */}
+          <form
+            onSubmit={(e) => { e.preventDefault(); router.push("/welcome"); }}
+            className="flex flex-col gap-4"
+          >
+            <div>
+              <label className="block text-xs font-bold uppercase tracking-wide text-brand-gray-500 mb-1">
+                {activeTab === "signup" ? "Email or Username" : "Email"}
+              </label>
+              <input
+                type="text"
+                placeholder="jane.doe@email.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="w-full rounded-lg border border-brand-gray-200 bg-brand-gray-50 px-4 py-2.5 text-sm text-brand-gray-700
+                  placeholder:text-brand-gray-400 focus:border-brand-teal focus:ring-2 focus:ring-brand-teal/30 outline-none transition"
+              />
+            </div>
+
+            <div>
+              <label className="block text-xs font-bold uppercase tracking-wide text-brand-gray-500 mb-1">
+                Password
+              </label>
+              <input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full rounded-lg border border-brand-gray-200 bg-brand-gray-50 px-4 py-2.5 text-sm text-brand-gray-700
+                  placeholder:text-brand-gray-400 focus:border-brand-teal focus:ring-2 focus:ring-brand-teal/30 outline-none transition"
+              />
+            </div>
+
+            <button
+              type="submit"
+              className="w-full rounded-xl bg-brand-coral px-6 py-3 font-heading font-bold text-white uppercase tracking-wide shadow-md
+                hover:bg-brand-coral-dark active:translate-y-0.5 transition"
+            >
+              {activeTab === "signup" ? "Sign Up with Email" : "Log In"}
+            </button>
+          </form>
+
+          {/* Divider */}
+          <div className="my-5 flex items-center gap-3">
+            <div className="h-px flex-1 bg-brand-gray-200" />
+            <span className="text-xs text-brand-gray-400">
+              Or {activeTab === "signup" ? "sign up" : "log in"} with:
+            </span>
+            <div className="h-px flex-1 bg-brand-gray-200" />
+          </div>
+
+          {/* Social buttons */}
+          <div className="flex justify-center gap-4">
+            <SocialButton aria-label="Google">
+              <FcGoogle className="h-6 w-6" />
+            </SocialButton>
+            <SocialButton aria-label="Facebook">
+              <FaFacebook className="h-6 w-6 text-[#1877F2]" />
+            </SocialButton>
+            <SocialButton aria-label="Apple">
+              <FaApple className="h-6 w-6 text-black" />
+            </SocialButton>
+          </div>
+
+          {/* Footer link */}
+          <p className="mt-6 text-center text-sm text-brand-gray-500">
+            {activeTab === "signup" ? (
+              <>
+                Already have an account?{" "}
+                <button
+                  onClick={() => setActiveTab("login")}
+                  className="font-semibold text-brand-teal hover:underline"
+                >
+                  Log In
+                </button>
+              </>
+            ) : (
+              <>
+                Don&apos;t have an account?{" "}
+                <button
+                  onClick={() => setActiveTab("signup")}
+                  className="font-semibold text-brand-teal hover:underline"
+                >
+                  Sign Up
+                </button>
+              </>
+            )}
+          </p>
+        </section>
+      </main>
+
+      {/* ══════════════ Footer ══════════════ */}
+      <footer className="py-4 text-center text-sm text-brand-gray-400">
+        <a href="#" className="hover:text-brand-gray-600 transition">
+          About
+        </a>
+        <Separator />
+        <a href="#" className="hover:text-brand-gray-600 transition">
+          Contact
+        </a>
+        <Separator />
+        <a href="#" className="hover:text-brand-gray-600 transition">
+          Privacy
+        </a>
+        <Separator />
+        <a href="#" className="hover:text-brand-gray-600 transition">
+          Terms
+        </a>
+      </footer>
+    </div>
+  );
+}
+
+/* ────────── Small reusable components ────────── */
+
+function Separator() {
+  return <span className="mx-2 text-brand-gray-300">|</span>;
+}
+
+function SocialButton({
+  children,
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  return (
+    <button
+      {...props}
+      className="flex h-12 w-12 items-center justify-center rounded-full border border-brand-gray-200 bg-white shadow-sm
+        hover:shadow-md hover:border-brand-gray-300 active:translate-y-0.5 transition"
+    >
+      {children}
+    </button>
+  );
+}
+
+/* ── Inline SVG icons ── */
+
+function OwlIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 64 64"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <circle cx="32" cy="32" r="30" fill="#7AC7C4" opacity="0.2" />
+      <ellipse cx="32" cy="36" rx="18" ry="20" fill="#C4A882" />
+      <ellipse cx="32" cy="34" rx="14" ry="16" fill="#E8D5B7" />
+      <circle cx="25" cy="28" r="6" fill="white" />
+      <circle cx="39" cy="28" r="6" fill="white" />
+      <circle cx="26" cy="28" r="3" fill="#333" />
+      <circle cx="38" cy="28" r="3" fill="#333" />
+      <polygon points="32,32 29,36 35,36" fill="#E8734A" />
+      <ellipse cx="22" cy="42" rx="4" ry="6" fill="#C4A882" opacity="0.6" />
+      <ellipse cx="42" cy="42" rx="4" ry="6" fill="#C4A882" opacity="0.6" />
+    </svg>
+  );
+}
+
+function MascotOwl() {
+  return (
+    <svg
+      viewBox="0 0 200 220"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className="h-44 w-44"
+    >
+      {/* Body */}
+      <ellipse cx="100" cy="140" rx="55" ry="65" fill="#C4A882" />
+      <ellipse cx="100" cy="135" rx="44" ry="52" fill="#E8D5B7" />
+
+      {/* Head */}
+      <ellipse cx="100" cy="80" rx="48" ry="44" fill="#C4A882" />
+      <ellipse cx="100" cy="78" rx="40" ry="36" fill="#E8D5B7" />
+
+      {/* Ear tufts */}
+      <polygon points="62,50 72,30 78,55" fill="#C4A882" />
+      <polygon points="138,50 128,30 122,55" fill="#C4A882" />
+
+      {/* Eyes – white */}
+      <circle cx="80" cy="75" r="16" fill="white" stroke="#C4A882" strokeWidth="2" />
+      <circle cx="120" cy="75" r="16" fill="white" stroke="#C4A882" strokeWidth="2" />
+
+      {/* Glasses frames */}
+      <circle cx="80" cy="75" r="18" fill="none" stroke="#6B6B6B" strokeWidth="2.5" />
+      <circle cx="120" cy="75" r="18" fill="none" stroke="#6B6B6B" strokeWidth="2.5" />
+      <line x1="98" y1="75" x2="102" y2="75" stroke="#6B6B6B" strokeWidth="2.5" />
+      <line x1="62" y1="73" x2="55" y2="68" stroke="#6B6B6B" strokeWidth="2.5" />
+      <line x1="138" y1="73" x2="145" y2="68" stroke="#6B6B6B" strokeWidth="2.5" />
+
+      {/* Pupils */}
+      <circle cx="83" cy="76" r="7" fill="#333" />
+      <circle cx="117" cy="76" r="7" fill="#333" />
+      <circle cx="85" cy="73" r="2.5" fill="white" />
+      <circle cx="119" cy="73" r="2.5" fill="white" />
+
+      {/* Beak */}
+      <polygon points="100,90 93,100 107,100" fill="#E8734A" />
+
+      {/* Belly pattern */}
+      <ellipse cx="100" cy="155" rx="28" ry="32" fill="#F5ECD7" />
+
+      {/* Feet */}
+      <ellipse cx="82" cy="202" rx="14" ry="6" fill="#E8734A" />
+      <ellipse cx="118" cy="202" rx="14" ry="6" fill="#E8734A" />
+
+      {/* Right wing waving */}
+      <path d="M148,120 Q175,100 168,80 Q165,90 155,105 Q150,112 148,120Z" fill="#C4A882" />
+      <path d="M168,80 Q172,70 165,62" stroke="#C4A882" strokeWidth="3" strokeLinecap="round" fill="none" />
+
+      {/* Left wing */}
+      <ellipse cx="52" cy="130" rx="12" ry="28" fill="#C4A882" transform="rotate(10 52 130)" />
+    </svg>
+  );
+}
+
+/* ── Floating particles background effect ── */
+
+interface Particle {
+  id: number;
+  left: string;
+  top: string;
+  size: number;
+  duration: string;
+  delay: string;
+  type: "dot" | "sparkle" | "rune" | "ring";
+  drift?: string;
+  floatX?: string;
+  floatY?: string;
+  opacity: number;
+  color: string;
+}
+
+const RUNE_CHARS = ["ᚠ", "ᚢ", "ᚦ", "ᚨ", "ᚱ", "ᚲ", "ᚷ", "ᚹ", "ᛁ", "ᛃ", "ᛈ", "ᛉ", "ᛊ", "ᛏ", "ᛒ", "ᛖ", "ᛗ", "ᛚ"];
+
+function generateParticles(): Particle[] {
+  const particles: Particle[] = [];
+  let id = 0;
+
+  // Floating dots that rise upward
+  for (let i = 0; i < 18; i++) {
+    particles.push({
+      id: id++,
+      left: `${Math.random() * 100}%`,
+      top: `${70 + Math.random() * 30}%`,
+      size: 3 + Math.random() * 4,
+      duration: `${10 + Math.random() * 14}s`,
+      delay: `${Math.random() * 12}s`,
+      type: "dot",
+      drift: `${-30 + Math.random() * 60}px`,
+      opacity: 0.15 + Math.random() * 0.25,
+      color: ["#7AC7C4", "#D4BC8B", "#E8734A", "#C4A882"][Math.floor(Math.random() * 4)],
+    });
+  }
+
+  // Twinkling sparkle stars
+  for (let i = 0; i < 12; i++) {
+    particles.push({
+      id: id++,
+      left: `${Math.random() * 100}%`,
+      top: `${Math.random() * 100}%`,
+      size: 6 + Math.random() * 10,
+      duration: `${2 + Math.random() * 4}s`,
+      delay: `${Math.random() * 5}s`,
+      type: "sparkle",
+      opacity: 0.2 + Math.random() * 0.3,
+      color: ["#D4A96A", "#7AC7C4", "#E8D5B7"][Math.floor(Math.random() * 3)],
+    });
+  }
+
+  // Faint floating rune characters
+  for (let i = 0; i < 8; i++) {
+    particles.push({
+      id: id++,
+      left: `${5 + Math.random() * 90}%`,
+      top: `${10 + Math.random() * 80}%`,
+      size: 14 + Math.random() * 10,
+      duration: `${8 + Math.random() * 10}s`,
+      delay: `${Math.random() * 8}s`,
+      type: "rune",
+      floatX: `${-40 + Math.random() * 80}px`,
+      floatY: `${-60 + Math.random() * -40}px`,
+      opacity: 0.08 + Math.random() * 0.12,
+      color: "#C4A87A",
+    });
+  }
+
+  // Small hollow rings
+  for (let i = 0; i < 6; i++) {
+    particles.push({
+      id: id++,
+      left: `${Math.random() * 100}%`,
+      top: `${60 + Math.random() * 40}%`,
+      size: 8 + Math.random() * 14,
+      duration: `${12 + Math.random() * 10}s`,
+      delay: `${Math.random() * 10}s`,
+      type: "ring",
+      drift: `${-20 + Math.random() * 40}px`,
+      opacity: 0.12 + Math.random() * 0.18,
+      color: ["#7AC7C4", "#D4BC8B"][Math.floor(Math.random() * 2)],
+    });
+  }
+
+  return particles;
+}
+
+const PARTICLES = generateParticles();
+
+function ParticleField() {
+  return (
+    <div className="pointer-events-none absolute inset-0 z-[1]" aria-hidden="true">
+      {PARTICLES.map((p) => {
+        const style: React.CSSProperties & Record<string, string> = {
+          position: "absolute",
+          left: p.left,
+          top: p.top,
+          "--duration": p.duration,
+          "--delay": p.delay,
+        };
+
+        if (p.drift) style["--drift"] = p.drift;
+        if (p.floatX) style["--float-x"] = p.floatX;
+        if (p.floatY) style["--float-y"] = p.floatY;
+
+        if (p.type === "dot") {
+          return (
+            <span
+              key={p.id}
+              className="particle absolute rounded-full"
+              style={{
+                ...style,
+                width: p.size,
+                height: p.size,
+                backgroundColor: p.color,
+                opacity: p.opacity,
+              }}
+            />
+          );
+        }
+
+        if (p.type === "sparkle") {
+          return (
+            <svg
+              key={p.id}
+              className="sparkle absolute"
+              style={{ ...style, opacity: p.opacity }}
+              width={p.size}
+              height={p.size}
+              viewBox="0 0 40 40"
+            >
+              <path
+                d="M20 2 L22 16 L36 20 L22 24 L20 38 L18 24 L4 20 L18 16 Z"
+                fill={p.color}
+              />
+            </svg>
+          );
+        }
+
+        if (p.type === "rune") {
+          const char = RUNE_CHARS[p.id % RUNE_CHARS.length];
+          return (
+            <span
+              key={p.id}
+              className="floater absolute font-heading select-none"
+              style={{
+                ...style,
+                fontSize: p.size,
+                color: p.color,
+                opacity: p.opacity,
+              }}
+            >
+              {char}
+            </span>
+          );
+        }
+
+        // ring
+        return (
+          <span
+            key={p.id}
+            className="particle absolute rounded-full"
+            style={{
+              ...style,
+              width: p.size,
+              height: p.size,
+              border: `1.5px solid ${p.color}`,
+              opacity: p.opacity,
+            }}
+          />
+        );
+      })}
+    </div>
+  );
+}

app/(onboarding)/welcome/page.tsx

@@ -0,0 +1,637 @@
+"use client";
+
+import React, { useState, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useRouter } from "next/navigation";
+import DeepGlassCard from "@/components/ui/DeepGlassCard";
+import GameButton from "@/components/ui/GameButton";
+import MascotHint from "@/components/ui/MascotHint";
+import useUserStore from "@/stores/useUserStore";
+
+/* ═══════════════════ Types ═══════════════════ */
+
+interface TopicOption {
+  id: string;
+  label: string;
+  icon: React.ReactNode;
+  ring: string; // ring colour class
+}
+
+interface Step {
+  key: string;
+  title: string;
+  mascotMsg: string;
+}
+
+/* ═══════════════════ Data ═══════════════════ */
+
+const TOPICS: TopicOption[] = [
+  {
+    id: "tech",
+    label: "Tech",
+    icon: <TechIcon />,
+    ring: "ring-[#5BB5B0]",
+  },
+  {
+    id: "history",
+    label: "History",
+    icon: <HistoryIcon />,
+    ring: "ring-[#C4A06A]",
+  },
+  {
+    id: "medicine",
+    label: "Medicine",
+    icon: <MedicineIcon />,
+    ring: "ring-[#5BB5B0]",
+  },
+  {
+    id: "arts",
+    label: "Arts",
+    icon: <ArtsIcon />,
+    ring: "ring-[#D4765A]",
+  },
+  {
+    id: "literature",
+    label: "Literature",
+    icon: <LiteratureIcon />,
+    ring: "ring-[#9B6DBF]",
+  },
+  {
+    id: "science",
+    label: "Science",
+    icon: <ScienceIcon />,
+    ring: "ring-[#9B6DBF]",
+  },
+];
+
+const STEPS: Step[] = [
+  {
+    key: "topics",
+    title: "Welcome, Explorer,",
+    mascotMsg: "Which fields spark your interest?",
+  },
+  {
+    key: "name",
+    title: "What should we call you?",
+    mascotMsg: "Give yourself an explorer name!",
+  },
+  {
+    key: "goal",
+    title: "Set your daily goal",
+    mascotMsg: "How much time can you spare each day?",
+  },
+];
+
+const GOALS = [
+  { id: "casual", label: "5 min / day", desc: "Casual" },
+  { id: "regular", label: "10 min / day", desc: "Regular" },
+  { id: "serious", label: "20 min / day", desc: "Serious" },
+  { id: "intense", label: "30 min / day", desc: "Intense" },
+];
+
+/* ═══════════════════ Slide variants ═══════════════════ */
+
+const slideVariants = {
+  enter: (dir: number) => ({
+    x: dir > 0 ? 300 : -300,
+    opacity: 0,
+    scale: 0.95,
+  }),
+  center: { x: 0, opacity: 1, scale: 1 },
+  exit: (dir: number) => ({
+    x: dir > 0 ? -300 : 300,
+    opacity: 0,
+    scale: 0.95,
+  }),
+};
+
+/* ═══════════════════ Page ═══════════════════ */
+
+export default function WelcomePage() {
+  const router = useRouter();
+  const [step, setStep] = useState(0);
+  const [direction, setDirection] = useState(1);
+  const [selectedTopics, setSelectedTopics] = useState<string[]>([]);
+  const [name, setName] = useState("");
+  const [selectedGoal, setSelectedGoal] = useState("");
+
+  const currentStep = STEPS[step];
+
+  const canProceed = useCallback(() => {
+    if (step === 0) return selectedTopics.length > 0;
+    if (step === 1) return name.trim().length > 0;
+    if (step === 2) return selectedGoal !== "";
+    return false;
+  }, [step, selectedTopics, name, selectedGoal]);
+
+  const completeOnboarding = useUserStore((s) => s.completeOnboarding);
+
+  const handleNext = () => {
+    if (step < STEPS.length - 1) {
+      setDirection(1);
+      setStep((s) => s + 1);
+    } else {
+      // Final step – persist onboarding data & navigate
+      completeOnboarding({ name: name.trim(), topics: selectedTopics, goal: selectedGoal });
+      router.push("/home");
+    }
+  };
+
+  const handleBack = () => {
+    if (step > 0) {
+      setDirection(-1);
+      setStep((s) => s - 1);
+    }
+  };
+
+  const toggleTopic = (id: string) => {
+    setSelectedTopics((prev) =>
+      prev.includes(id) ? prev.filter((t) => t !== id) : [...prev, id]
+    );
+  };
+
+  return (
+    <div className="relative flex min-h-screen flex-col bg-gradient-to-br from-[#edf7fb] via-[#c9e6f2] to-[#a3d5e8] overflow-hidden">
+      {/* ── Shared background effects ── */}
+      <BgEffects />
+
+      {/* ── Blurred side hints (conditional) ── */}
+      {step > 0 && (
+        <SideHint side="left" step={STEPS[step - 1]} />
+      )}
+      {step < STEPS.length - 1 && (
+        <SideHint side="right" step={STEPS[step + 1]} />
+      )}
+
+      {/* ══════════════ Main ══════════════ */}
+      <main
+        className="relative z-10 flex flex-1 flex-col items-center justify-center px-4 py-10"
+      >
+        <motion.div
+          className="w-full max-w-2xl cursor-grab active:cursor-grabbing"
+          drag="x"
+          dragConstraints={{ left: 0, right: 0 }}
+          dragElastic={0.15}
+          onDragEnd={(_e, info) => {
+            if (info.offset.x < -80 && step < STEPS.length - 1 && canProceed()) {
+              handleNext();
+            } else if (info.offset.x > 80 && step > 0) {
+              handleBack();
+            }
+          }}
+        >
+        <DeepGlassCard className="w-full px-8 py-10 md:px-12 md:py-12">
+          {/* Header */}
+          <h1 className="text-center font-heading text-3xl md:text-4xl font-extrabold text-brand-gray-700 mb-4">
+            {currentStep.title}
+          </h1>
+
+          {/* Mascot hint */}
+          <div className="mb-8 flex justify-center">
+            <MascotHint message={currentStep.mascotMsg} />
+          </div>
+
+          {/* Step content – animated */}
+          <div className="relative overflow-hidden" style={{ minHeight: 260 }}>
+            <AnimatePresence mode="wait" custom={direction}>
+              <motion.div
+                key={currentStep.key}
+                custom={direction}
+                variants={slideVariants}
+                initial="enter"
+                animate="center"
+                exit="exit"
+                transition={{ type: "spring", stiffness: 300, damping: 30 }}
+                className="w-full"
+              >
+                {step === 0 && (
+                  <TopicGrid
+                    topics={TOPICS}
+                    selected={selectedTopics}
+                    onToggle={toggleTopic}
+                  />
+                )}
+                {step === 1 && <NameInput value={name} onChange={setName} />}
+                {step === 2 && (
+                  <GoalPicker
+                    selected={selectedGoal}
+                    onSelect={setSelectedGoal}
+                  />
+                )}
+              </motion.div>
+            </AnimatePresence>
+          </div>
+
+          {/* Bottom bar */}
+          <div className="mt-8 flex items-center justify-between">
+            {step > 0 ? (
+              <button
+                onClick={handleBack}
+                className="text-brand-gray-400 hover:text-brand-gray-600 font-semibold transition text-sm"
+              >
+                ← Back
+              </button>
+            ) : (
+              <div />
+            )}
+
+            <div className="flex items-center gap-4">
+              <GameButton
+                pulse={canProceed()}
+                disabled={!canProceed()}
+                onClick={handleNext}
+              >
+                {step < STEPS.length - 1 ? "NEXT →" : "START JOURNEY →"}
+              </GameButton>
+              {step === STEPS.length - 1 && (
+                <span className="text-xs text-brand-gray-400 max-w-[120px] leading-tight">
+                  Start your learning journey today!
+                </span>
+              )}
+            </div>
+          </div>
+        </DeepGlassCard>
+        </motion.div>
+
+        {/* Progress dots */}
+        <div className="mt-6 flex gap-2">
+          {STEPS.map((_, i) => (
+            <div
+              key={i}
+              className={`h-2 rounded-full transition-all duration-300 ${
+                i === step
+                  ? "w-8 bg-brand-teal"
+                  : i < step
+                    ? "w-4 bg-brand-teal/50"
+                    : "w-4 bg-brand-gray-300"
+              }`}
+            />
+          ))}
+        </div>
+      </main>
+
+      {/* ── Footer ── */}
+      <footer className="relative z-10 py-4 text-center text-sm text-brand-gray-400">
+        <a href="#" className="hover:text-brand-gray-600 transition">About</a>
+        <Sep />
+        <a href="#" className="hover:text-brand-gray-600 transition">Contact</a>
+        <Sep />
+        <a href="#" className="hover:text-brand-gray-600 transition">Privacy</a>
+        <Sep />
+        <a href="#" className="hover:text-brand-gray-600 transition">Terms</a>
+      </footer>
+    </div>
+  );
+}
+
+/* ═══════════════════ Sub-components ═══════════════════ */
+
+function Sep() {
+  return <span className="mx-2 text-brand-gray-300">|</span>;
+}
+
+/* ── Topic selection grid ── */
+
+function TopicGrid({
+  topics,
+  selected,
+  onToggle,
+}: {
+  topics: TopicOption[];
+  selected: string[];
+  onToggle: (id: string) => void;
+}) {
+  return (
+    <div className="grid grid-cols-3 gap-5 justify-items-center pt-4">
+      {topics.map((t) => {
+        const active = selected.includes(t.id);
+        return (
+          <motion.button
+            key={t.id}
+            whileTap={{ scale: 0.92 }}
+            onClick={() => onToggle(t.id)}
+            className={`flex flex-col items-center gap-2 transition-all duration-200`}
+          >
+            <div
+              className={`h-16 w-16 md:h-20 md:w-20 rounded-full flex items-center justify-center ring-4 transition-all duration-200
+                ${active ? `${t.ring} ring-opacity-100 bg-white shadow-lg scale-110` : "ring-transparent bg-white/60 shadow-sm hover:shadow-md hover:scale-105"}`}
+            >
+              {t.icon}
+            </div>
+            <span
+              className={`text-xs md:text-sm font-semibold transition ${
+                active ? "text-brand-gray-700" : "text-brand-gray-500"
+              }`}
+            >
+              {t.label}
+            </span>
+          </motion.button>
+        );
+      })}
+    </div>
+  );
+}
+
+/* ── Name input ── */
+
+function NameInput({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  return (
+    <div className="flex flex-col items-center gap-6 py-6">
+      <div className="w-full max-w-sm">
+        <label className="block text-xs font-bold uppercase tracking-wide text-brand-gray-500 mb-2">
+          Your Explorer Name
+        </label>
+        <input
+          type="text"
+          placeholder="e.g. StarSeeker42"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          className="w-full rounded-xl border border-brand-gray-200 bg-white/80 px-5 py-3.5 text-lg text-brand-gray-700
+            placeholder:text-brand-gray-300 focus:border-brand-teal focus:ring-2 focus:ring-brand-teal/30 outline-none transition"
+          autoFocus
+        />
+      </div>
+      <p className="text-sm text-brand-gray-400 text-center max-w-xs">
+        This is how other explorers will see you. You can change it later.
+      </p>
+    </div>
+  );
+}
+
+/* ── Goal picker ── */
+
+function GoalPicker({
+  selected,
+  onSelect,
+}: {
+  selected: string;
+  onSelect: (id: string) => void;
+}) {
+  return (
+    <div className="flex flex-col gap-3 max-w-sm mx-auto py-4">
+      {GOALS.map((g) => (
+        <motion.button
+          key={g.id}
+          whileTap={{ scale: 0.97 }}
+          onClick={() => onSelect(g.id)}
+          className={`flex items-center justify-between rounded-xl border-2 px-5 py-4 transition-all duration-200
+            ${
+              selected === g.id
+                ? "border-brand-teal bg-brand-teal/10 shadow-md"
+                : "border-brand-gray-200 bg-white/60 hover:border-brand-gray-300 hover:shadow-sm"
+            }`}
+        >
+          <div className="text-left">
+            <p className="font-heading font-bold text-brand-gray-700">
+              {g.label}
+            </p>
+            <p className="text-xs text-brand-gray-400">{g.desc}</p>
+          </div>
+          <div
+            className={`h-5 w-5 rounded-full border-2 transition-all flex items-center justify-center
+              ${selected === g.id ? "border-brand-teal bg-brand-teal" : "border-brand-gray-300"}`}
+          >
+            {selected === g.id && (
+              <svg viewBox="0 0 12 12" className="h-3 w-3" fill="white">
+                <path d="M10 3L4.5 8.5 2 6" stroke="white" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
+              </svg>
+            )}
+          </div>
+        </motion.button>
+      ))}
+    </div>
+  );
+}
+
+/* ── Blurred side hints (peek of prev/next step from edges) ── */
+
+function SideHint({ side, step }: { side: "left" | "right"; step: Step }) {
+  const isLeft = side === "left";
+  return (
+    <AnimatePresence>
+      <motion.div
+        key={`${side}-${step.key}`}
+        initial={{ opacity: 0, x: isLeft ? -40 : 40 }}
+        animate={{ opacity: 1, x: 0 }}
+        exit={{ opacity: 0, x: isLeft ? -40 : 40 }}
+        transition={{ duration: 0.3 }}
+        className={`pointer-events-none absolute top-1/2 -translate-y-1/2 z-[2] ${
+          isLeft ? "left-0 -translate-x-[60%]" : "right-0 translate-x-[60%]"
+        }`}
+      >
+        <div className="blur-[3px] opacity-25">
+          <div className="bg-white/50 backdrop-blur-md rounded-2xl px-8 py-12 w-80 shadow-lg">
+            <h3 className="font-heading text-xl font-bold text-brand-gray-600 mb-3">
+              {step.title.length > 14
+                ? isLeft
+                  ? step.title.slice(0, 12) + "..."
+                  : "..." + step.title.slice(-12)
+                : step.title}
+            </h3>
+            <p className="text-sm text-brand-gray-400">
+              {step.mascotMsg.length > 24
+                ? isLeft
+                  ? step.mascotMsg.slice(0, 22) + "..."
+                  : "..." + step.mascotMsg.slice(-22)
+                : step.mascotMsg}
+            </p>
+          </div>
+        </div>
+      </motion.div>
+    </AnimatePresence>
+  );
+}
+
+/* ── Background effects (same as login page) ── */
+
+function BgEffects() {
+  const runeText =
+    "ᚠᚢᚦᚨᚱᚲᚷᚹᚺᚾᛁᛃᛇᛈᛉᛊᛏᛒᛖᛗᛚᛜᛝᛞᛟᚠᚢᚦᚨᚱᚲᚷᚹᚺᚾᛁᛃᛇᛈᛉᛊᛏᛒᛖᛗᛚᛜᛝᛞᛟ•ᚠᚢᚦᚨᚱᚲᚷᚹᚺᚾᛁᛃᛇ";
+
+  return (
+    <>
+      {/* Runic circle */}
+      <div className="pointer-events-none absolute inset-0 z-0" aria-hidden="true">
+        <svg
+          viewBox="0 0 700 700"
+          className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] opacity-25"
+          fill="none"
+        >
+          <defs>
+            <radialGradient id="peachG" cx="50%" cy="45%" r="50%">
+              <stop offset="0%" stopColor="#FFF5EC" />
+              <stop offset="60%" stopColor="#F5DECA" />
+              <stop offset="100%" stopColor="#EDD0B5" />
+            </radialGradient>
+            <path
+              id="rRing"
+              d="M 350,350 m -260,0 a 260,260 0 1,1 520,0 a 260,260 0 1,1 -520,0"
+            />
+          </defs>
+          <circle cx="350" cy="350" r="300" fill="url(#peachG)" opacity="0.4" />
+          <circle cx="350" cy="350" r="290" fill="none" stroke="#D4BC8B" strokeWidth="1" opacity="0.35" />
+          <circle cx="350" cy="350" r="248" fill="none" stroke="#D4BC8B" strokeWidth="1" opacity="0.35" />
+          <text fill="#C4A87A" fontSize="18" fontWeight="500" letterSpacing="4" opacity="0.3">
+            <textPath href="#rRing">{runeText}</textPath>
+          </text>
+        </svg>
+
+        {/* Sparkle */}
+        <svg viewBox="0 0 40 40" className="absolute bottom-6 right-6 w-6 h-6 md:w-8 md:h-8" fill="none">
+          <path d="M20 0 L22 16 L40 20 L22 22 L20 40 L18 22 L0 20 L18 16 Z" fill="#D4A96A" opacity="0.5" />
+        </svg>
+      </div>
+
+      {/* Floating particles */}
+      <ParticlesBg />
+    </>
+  );
+}
+
+/* ── Lightweight particles for welcome page ── */
+
+function ParticlesBg() {
+  const dots = Array.from({ length: 14 }, (_, i) => ({
+    id: i,
+    left: `${Math.random() * 100}%`,
+    top: `${70 + Math.random() * 30}%`,
+    size: 3 + Math.random() * 4,
+    dur: `${10 + Math.random() * 14}s`,
+    del: `${Math.random() * 12}s`,
+    drift: `${-30 + Math.random() * 60}px`,
+    opacity: 0.12 + Math.random() * 0.2,
+    color: ["#7AC7C4", "#D4BC8B", "#E8734A", "#C4A882"][i % 4],
+  }));
+
+  const sparkles = Array.from({ length: 8 }, (_, i) => ({
+    id: 100 + i,
+    left: `${Math.random() * 100}%`,
+    top: `${Math.random() * 100}%`,
+    size: 6 + Math.random() * 10,
+    dur: `${2 + Math.random() * 4}s`,
+    del: `${Math.random() * 5}s`,
+    opacity: 0.15 + Math.random() * 0.25,
+    color: ["#D4A96A", "#7AC7C4", "#E8D5B7"][i % 3],
+  }));
+
+  return (
+    <div className="pointer-events-none absolute inset-0 z-[1]" aria-hidden="true">
+      {dots.map((d) => (
+        <span
+          key={d.id}
+          className="particle absolute rounded-full"
+          style={{
+            left: d.left,
+            top: d.top,
+            width: d.size,
+            height: d.size,
+            backgroundColor: d.color,
+            opacity: d.opacity,
+            "--duration": d.dur,
+            "--delay": d.del,
+            "--drift": d.drift,
+          } as React.CSSProperties}
+        />
+      ))}
+      {sparkles.map((s) => (
+        <svg
+          key={s.id}
+          className="sparkle absolute"
+          style={{
+            left: s.left,
+            top: s.top,
+            opacity: s.opacity,
+            "--duration": s.dur,
+            "--delay": s.del,
+          } as React.CSSProperties}
+          width={s.size}
+          height={s.size}
+          viewBox="0 0 40 40"
+        >
+          <path d="M20 2 L22 16 L36 20 L22 24 L20 38 L18 24 L4 20 L18 16 Z" fill={s.color} />
+        </svg>
+      ))}
+    </div>
+  );
+}
+
+/* ═══════════════════ Topic Icons (inline SVG) ═══════════════════ */
+
+function TechIcon() {
+  return (
+    <svg viewBox="0 0 48 48" className="h-8 w-8 md:h-10 md:w-10" fill="none">
+      <rect x="8" y="10" width="32" height="22" rx="3" stroke="#5BB5B0" strokeWidth="2.5" fill="#E8F5F4" />
+      <rect x="12" y="14" width="24" height="14" rx="1" fill="#5BB5B0" opacity="0.2" />
+      <line x1="18" y1="36" x2="30" y2="36" stroke="#5BB5B0" strokeWidth="2.5" strokeLinecap="round" />
+      <line x1="24" y1="32" x2="24" y2="36" stroke="#5BB5B0" strokeWidth="2.5" />
+      <rect x="16" y="18" width="16" height="3" rx="1" fill="#5BB5B0" opacity="0.5" />
+      <rect x="16" y="23" width="10" height="2" rx="1" fill="#5BB5B0" opacity="0.3" />
+    </svg>
+  );
+}
+
+function HistoryIcon() {
+  return (
+    <svg viewBox="0 0 48 48" className="h-8 w-8 md:h-10 md:w-10" fill="none">
+      <rect x="12" y="8" width="24" height="32" rx="2" fill="#F5ECD7" stroke="#C4A06A" strokeWidth="2" />
+      <line x1="16" y1="16" x2="32" y2="16" stroke="#C4A06A" strokeWidth="1.5" />
+      <line x1="16" y1="21" x2="32" y2="21" stroke="#C4A06A" strokeWidth="1.5" />
+      <line x1="16" y1="26" x2="28" y2="26" stroke="#C4A06A" strokeWidth="1.5" />
+      <path d="M20 8V6a4 4 0 0 1 8 0v2" stroke="#C4A06A" strokeWidth="2" />
+      <circle cx="24" cy="34" r="3" fill="#C4A06A" opacity="0.3" />
+    </svg>
+  );
+}
+
+function MedicineIcon() {
+  return (
+    <svg viewBox="0 0 48 48" className="h-8 w-8 md:h-10 md:w-10" fill="none">
+      <circle cx="24" cy="24" r="16" fill="#E8F5F4" stroke="#5BB5B0" strokeWidth="2" />
+      <path d="M24 14v20M14 24h20" stroke="#5BB5B0" strokeWidth="3" strokeLinecap="round" />
+      <circle cx="24" cy="12" r="2" fill="#5BB5B0" opacity="0.4" />
+      <path d="M18 16l-2-2M30 16l2-2M18 32l-2 2M30 32l2 2" stroke="#5BB5B0" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function ArtsIcon() {
+  return (
+    <svg viewBox="0 0 48 48" className="h-8 w-8 md:h-10 md:w-10" fill="none">
+      <circle cx="24" cy="24" r="16" fill="#FFF0E8" stroke="#D4765A" strokeWidth="2" />
+      <path d="M20 18l-6 14h4l2-5h8l2 5h4l-6-14h-8z" fill="#D4765A" opacity="0.3" />
+      <line x1="18" y1="30" x2="30" y2="30" stroke="#D4765A" strokeWidth="2" strokeLinecap="round" />
+      <path d="M22 18v-4M26 18v-4" stroke="#D4765A" strokeWidth="1.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+function LiteratureIcon() {
+  return (
+    <svg viewBox="0 0 48 48" className="h-8 w-8 md:h-10 md:w-10" fill="none">
+      <path d="M10 12c4-2 8-2 14 1v24c-6-3-10-3-14-1V12z" fill="#F3E8F5" stroke="#9B6DBF" strokeWidth="2" />
+      <path d="M24 13c6-3 10-3 14-1v24c-4-2-8-2-14 1V13z" fill="#F3E8F5" stroke="#9B6DBF" strokeWidth="2" />
+      <line x1="14" y1="18" x2="20" y2="20" stroke="#9B6DBF" strokeWidth="1" opacity="0.5" />
+      <line x1="14" y1="22" x2="20" y2="24" stroke="#9B6DBF" strokeWidth="1" opacity="0.5" />
+      <line x1="28" y1="20" x2="34" y2="18" stroke="#9B6DBF" strokeWidth="1" opacity="0.5" />
+      <line x1="28" y1="24" x2="34" y2="22" stroke="#9B6DBF" strokeWidth="1" opacity="0.5" />
+    </svg>
+  );
+}
+
+function ScienceIcon() {
+  return (
+    <svg viewBox="0 0 48 48" className="h-8 w-8 md:h-10 md:w-10" fill="none">
+      <circle cx="24" cy="24" r="16" fill="#F3E8F5" stroke="#9B6DBF" strokeWidth="2" />
+      <circle cx="24" cy="24" r="4" fill="#9B6DBF" opacity="0.3" stroke="#9B6DBF" strokeWidth="1.5" />
+      <ellipse cx="24" cy="24" rx="14" ry="6" fill="none" stroke="#9B6DBF" strokeWidth="1.5" opacity="0.5" />
+      <ellipse cx="24" cy="24" rx="14" ry="6" fill="none" stroke="#9B6DBF" strokeWidth="1.5" opacity="0.5" transform="rotate(60 24 24)" />
+      <ellipse cx="24" cy="24" rx="14" ry="6" fill="none" stroke="#9B6DBF" strokeWidth="1.5" opacity="0.5" transform="rotate(120 24 24)" />
+    </svg>
+  );
+}

app/forge/page.tsx

@@ -0,0 +1,355 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useRouter } from "next/navigation";
+
+/* ═══════════════════ Constants ═══════════════════ */
+
+const STEPS = [
+  "Scanning document...",
+  "Extracting key concepts...",
+  "Building knowledge graph...",
+  "Forging interactive stages...",
+  "Polishing your universe...",
+];
+
+const STEP_DURATION = 2000; // ms per step
+
+/* ═══════════════════ Page ═══════════════════ */
+
+export default function ForgePage() {
+  const router = useRouter();
+  const [stepIdx, setStepIdx] = useState(0);
+  const [charIdx, setCharIdx] = useState(0);
+  const [flash, setFlash] = useState(false);
+
+  /* Typewriter per step */
+  useEffect(() => {
+    if (charIdx < STEPS[stepIdx].length) {
+      const t = setTimeout(() => setCharIdx((c) => c + 1), 38);
+      return () => clearTimeout(t);
+    }
+  }, [charIdx, stepIdx]);
+
+  /* Advance steps */
+  useEffect(() => {
+    if (stepIdx >= STEPS.length) return;
+    const t = setTimeout(() => {
+      if (stepIdx < STEPS.length - 1) {
+        setStepIdx((s) => s + 1);
+        setCharIdx(0);
+      } else {
+        // Last step done → flash + navigate
+        setFlash(true);
+        setTimeout(() => router.push("/map/med-u1"), 800);
+      }
+    }, STEP_DURATION);
+    return () => clearTimeout(t);
+  }, [stepIdx, router]);
+
+  const progress = ((stepIdx + 1) / STEPS.length) * 100;
+
+  return (
+    <div className="relative min-h-screen flex flex-col items-center justify-center overflow-hidden bg-gradient-to-br from-[#edf7fb] via-[#c9e6f2] to-[#a3d5e8]">
+      {/* ── Background particles ── */}
+      <ForgeBg />
+
+      {/* ── Flash overlay ── */}
+      <AnimatePresence>
+        {flash && (
+          <motion.div
+            className="fixed inset-0 z-[200] bg-white"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.5 }}
+          />
+        )}
+      </AnimatePresence>
+
+      {/* ── Main content ── */}
+      <div className="relative z-10 flex flex-col items-center gap-8 px-4">
+        {/* Anvil animation */}
+        <motion.div
+          animate={{
+            scale: [1, 1.04, 1],
+          }}
+          transition={{
+            repeat: Infinity,
+            duration: 2.5,
+            ease: "easeInOut",
+          }}
+        >
+          <ForgeAnvil progress={progress} />
+        </motion.div>
+
+        {/* Typewriter text */}
+        <div className="h-10 flex items-center">
+          <motion.p
+            key={stepIdx}
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="font-heading text-xl md:text-2xl font-bold text-brand-gray-700 tracking-wide"
+          >
+            {STEPS[stepIdx].slice(0, charIdx)}
+            <motion.span
+              animate={{ opacity: [1, 0] }}
+              transition={{ repeat: Infinity, duration: 0.6 }}
+              className="inline-block w-0.5 h-5 bg-brand-teal ml-0.5 align-middle"
+            />
+          </motion.p>
+        </div>
+
+        {/* Progress dots */}
+        <div className="flex gap-2.5">
+          {STEPS.map((_, i) => (
+            <motion.div
+              key={i}
+              className={`h-2.5 rounded-full transition-all duration-500 ${
+                i <= stepIdx
+                  ? "bg-brand-teal w-8"
+                  : "bg-brand-gray-200 w-2.5"
+              }`}
+              layout
+            />
+          ))}
+        </div>
+
+        {/* Subtle sub-text */}
+        <p className="text-sm text-brand-gray-400 mt-2">
+          Forging your personalised learning universe…
+        </p>
+      </div>
+    </div>
+  );
+}
+
+/* ═══════════════════ Anvil SVG ═══════════════════ */
+
+function ForgeAnvil({ progress }: { progress: number }) {
+  return (
+    <div className="relative w-72 h-72 md:w-80 md:h-80">
+      {/* Glow behind anvil */}
+      <div
+        className="absolute inset-0 rounded-full blur-3xl"
+        style={{
+          background: `radial-gradient(circle, rgba(122,199,196,${0.12 + progress * 0.002}) 0%, rgba(212,169,106,${0.08 + progress * 0.002}) 50%, transparent 70%)`,
+        }}
+      />
+
+      <svg viewBox="0 0 400 400" className="w-full h-full" fill="none">
+        <defs>
+          {/* Runic circle path */}
+          <path
+            id="forgeRune"
+            d="M 200,200 m -155,0 a 155,155 0 1,1 310,0 a 155,155 0 1,1 -310,0"
+          />
+          <radialGradient id="anvilGlow" cx="50%" cy="40%" r="50%">
+            <stop offset="0%" stopColor="#FFD5B0" stopOpacity="0.5" />
+            <stop offset="60%" stopColor="#F5C8A0" stopOpacity="0.2" />
+            <stop offset="100%" stopColor="transparent" />
+          </radialGradient>
+          <linearGradient id="anvilBody" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor="#E8D5B7" />
+            <stop offset="100%" stopColor="#C4A882" />
+          </linearGradient>
+          <linearGradient id="anvilTop" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor="#F0E0CC" />
+            <stop offset="100%" stopColor="#D4B896" />
+          </linearGradient>
+          <linearGradient id="ringGrad" x1="0" y1="0" x2="1" y2="1">
+            <stop offset="0%" stopColor="#7AC7C4" />
+            <stop offset="100%" stopColor="#D4A96A" />
+          </linearGradient>
+        </defs>
+
+        {/* Outer runic ring */}
+        <circle cx="200" cy="200" r="170" fill="none" stroke="#D4BC8B" strokeWidth="1" opacity="0.25" />
+        <circle cx="200" cy="200" r="160" fill="none" stroke="#D4BC8B" strokeWidth="0.5" opacity="0.2" />
+
+        {/* Runic text rotating */}
+        <g opacity="0.3">
+          <animateTransform
+            attributeName="transform"
+            type="rotate"
+            from="0 200 200"
+            to="360 200 200"
+            dur="40s"
+            repeatCount="indefinite"
+          />
+          <text fill="#C4A87A" fontSize="13" fontWeight="500" letterSpacing="5">
+            <textPath href="#forgeRune">
+              ᚠᚢᚦᚨᚱᚲᚷᚹᚺᚾᛁᛃᛇᛈᛉᛊᛏᛒᛖᛗᛚᛜᛝᛞᛟᚠᚢᚦᚨᚱᚲᚷᚹᚺᚾᛁᛃᛇᛈᛉᛊᛏᛒᛖᛗᛚᛜᛝᛞᛟᚠᚢᚦᚨᚱ
+            </textPath>
+          </text>
+        </g>
+
+        {/* Inner glow disc */}
+        <circle cx="200" cy="200" r="120" fill="url(#anvilGlow)" />
+
+        {/* ── The Anvil ── */}
+        {/* Base */}
+        <rect x="155" y="280" width="90" height="35" rx="4" fill="url(#anvilBody)" />
+        <rect x="170" y="260" width="60" height="24" rx="3" fill="#D4B896" />
+
+        {/* Anvil body – the working surface */}
+        <path
+          d="M120 260 Q125 230 140 225 L155 220 L155 240 Q165 250 200 250 Q235 250 245 240 L245 220 L260 225 Q275 230 280 260 Z"
+          fill="url(#anvilTop)"
+        />
+        {/* Horn (left beak) */}
+        <path
+          d="M120 260 Q105 255 90 248 Q85 246 88 244 Q95 240 120 245 Z"
+          fill="#D4B896"
+        />
+        {/* Top face highlight */}
+        <path
+          d="M140 225 L155 220 L155 240 Q165 250 200 250 Q235 250 245 240 L245 220 L260 225 Q255 228 245 230 Q220 238 200 238 Q180 238 155 230 Q145 228 140 225 Z"
+          fill="white"
+          opacity="0.15"
+        />
+
+        {/* ── Wireframe / neural-net overlay on anvil ── */}
+        {/* Nodes */}
+        {[
+          [170, 185], [200, 170], [230, 185],
+          [155, 210], [200, 200], [245, 210],
+          [175, 230], [225, 230],
+        ].map(([cx, cy], i) => (
+          <g key={i}>
+            <circle cx={cx} cy={cy} r="4" fill="#7AC7C4" opacity="0.5">
+              <animate
+                attributeName="opacity"
+                values="0.3;0.7;0.3"
+                dur={`${1.5 + i * 0.3}s`}
+                repeatCount="indefinite"
+              />
+            </circle>
+            <circle cx={cx} cy={cy} r="2" fill="white" opacity="0.6" />
+          </g>
+        ))}
+
+        {/* Edges */}
+        {[
+          [170, 185, 200, 170], [200, 170, 230, 185],
+          [155, 210, 200, 200], [200, 200, 245, 210],
+          [170, 185, 155, 210], [230, 185, 245, 210],
+          [170, 185, 200, 200], [200, 200, 230, 185],
+          [155, 210, 175, 230], [245, 210, 225, 230],
+          [175, 230, 200, 200], [225, 230, 200, 200],
+        ].map(([x1, y1, x2, y2], i) => (
+          <line
+            key={i}
+            x1={x1} y1={y1} x2={x2} y2={y2}
+            stroke="#7AC7C4"
+            strokeWidth="1"
+            opacity="0.25"
+          />
+        ))}
+
+        {/* ── Forging rings (orbit) ── */}
+        <g>
+          <animateTransform
+            attributeName="transform"
+            type="rotate"
+            from="0 200 210"
+            to="360 200 210"
+            dur="6s"
+            repeatCount="indefinite"
+          />
+          <ellipse cx="200" cy="210" rx="90" ry="30" fill="none" stroke="url(#ringGrad)" strokeWidth="1.5" opacity="0.3" />
+          <circle cx="290" cy="210" r="3" fill="#7AC7C4" opacity="0.7">
+            <animate attributeName="opacity" values="0.4;1;0.4" dur="2s" repeatCount="indefinite" />
+          </circle>
+        </g>
+        <g>
+          <animateTransform
+            attributeName="transform"
+            type="rotate"
+            from="0 200 210"
+            to="-360 200 210"
+            dur="8s"
+            repeatCount="indefinite"
+          />
+          <ellipse cx="200" cy="210" rx="105" ry="22" fill="none" stroke="#D4A96A" strokeWidth="1" opacity="0.2" />
+          <circle cx="305" cy="210" r="2.5" fill="#D4A96A" opacity="0.6">
+            <animate attributeName="opacity" values="0.3;0.8;0.3" dur="2.5s" repeatCount="indefinite" />
+          </circle>
+        </g>
+
+        {/* ── Center spark ── */}
+        <circle cx="200" cy="210" r="8" fill="#FFD5B0" opacity="0.3">
+          <animate attributeName="r" values="6;10;6" dur="2s" repeatCount="indefinite" />
+          <animate attributeName="opacity" values="0.2;0.5;0.2" dur="2s" repeatCount="indefinite" />
+        </circle>
+
+        {/* Sparkles */}
+        <g opacity="0.5">
+          <circle cx="145" cy="175" r="2" fill="#D4A96A">
+            <animate attributeName="opacity" values="0;0.7;0" dur="3s" repeatCount="indefinite" />
+          </circle>
+          <circle cx="260" cy="185" r="1.5" fill="#7AC7C4">
+            <animate attributeName="opacity" values="0;0.8;0" dur="2.5s" begin="0.5s" repeatCount="indefinite" />
+          </circle>
+          <circle cx="200" cy="155" r="2" fill="#D4A96A">
+            <animate attributeName="opacity" values="0;0.6;0" dur="3.5s" begin="1s" repeatCount="indefinite" />
+          </circle>
+          <circle cx="165" cy="245" r="1.5" fill="#7AC7C4">
+            <animate attributeName="opacity" values="0;0.7;0" dur="2.8s" begin="0.3s" repeatCount="indefinite" />
+          </circle>
+          <circle cx="240" cy="250" r="2" fill="#D4A96A">
+            <animate attributeName="opacity" values="0;0.6;0" dur="3.2s" begin="0.8s" repeatCount="indefinite" />
+          </circle>
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+/* ═══════════════════ Background ═══════════════════ */
+
+function ForgeBg() {
+  return (
+    <div className="pointer-events-none absolute inset-0 z-0 overflow-hidden" aria-hidden="true">
+      {/* Floating particles */}
+      {[...Array(14)].map((_, i) => (
+        <div
+          key={`p-${i}`}
+          className="absolute rounded-full particle"
+          style={{
+            width: `${2 + Math.random() * 4}px`,
+            height: `${2 + Math.random() * 4}px`,
+            left: `${5 + Math.random() * 90}%`,
+            bottom: `${Math.random() * 15}%`,
+            opacity: 0.3 + Math.random() * 0.3,
+            background: i % 2 === 0 ? "#7AC7C4" : "#D4A96A",
+            animationDelay: `${Math.random() * 6}s`,
+            animationDuration: `${5 + Math.random() * 5}s`,
+          }}
+        />
+      ))}
+
+      {/* Sparkles */}
+      {[...Array(8)].map((_, i) => (
+        <div
+          key={`s-${i}`}
+          className="absolute sparkle"
+          style={{
+            width: `${3 + Math.random() * 4}px`,
+            height: `${3 + Math.random() * 4}px`,
+            left: `${10 + Math.random() * 80}%`,
+            top: `${10 + Math.random() * 80}%`,
+            opacity: 0.2 + Math.random() * 0.3,
+            background: i % 3 === 0 ? "#D4A96A" : "#7AC7C4",
+            borderRadius: "50%",
+            animationDelay: `${Math.random() * 4}s`,
+          }}
+        />
+      ))}
+
+      {/* Soft radial glows */}
+      <div className="absolute top-1/4 left-1/4 w-96 h-96 rounded-full bg-brand-teal/5 blur-3xl" />
+      <div className="absolute bottom-1/4 right-1/4 w-80 h-80 rounded-full bg-[#D4A96A]/5 blur-3xl" />
+    </div>
+  );
+}

app/globals.css

@@ -0,0 +1,125 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* ── Hide scrollbar but keep scroll functionality ── */
+.scrollbar-hide {
+  -ms-overflow-style: none;  /* IE/Edge */
+  scrollbar-width: none;     /* Firefox */
+}
+.scrollbar-hide::-webkit-scrollbar {
+  display: none;             /* Chrome/Safari/Opera */
+}
+
+@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Open+Sans:wght@400;500;600;700&display=swap");
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  font-family: "Open Sans", sans-serif;
+}
+
+/* Custom utility classes */
+@layer utilities {
+  .text-shadow-sm {
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  }
+}
+
+/* ── Particle animations ── */
+@keyframes float-up {
+  0% {
+    transform: translateY(0) translateX(0) scale(1);
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(-100vh) translateX(var(--drift, 20px)) scale(0.4);
+    opacity: 0;
+  }
+}
+
+@keyframes shimmer {
+  0%, 100% {
+    opacity: 0.3;
+    transform: scale(0.8);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.2);
+  }
+}
+
+@keyframes drift {
+  0% {
+    transform: translateY(0) translateX(0);
+    opacity: 0;
+  }
+  15% {
+    opacity: 0.7;
+  }
+  85% {
+    opacity: 0.7;
+  }
+  100% {
+    transform: translateY(var(--float-y, -80px)) translateX(var(--float-x, 30px));
+    opacity: 0;
+  }
+}
+
+.particle {
+  animation: float-up var(--duration, 12s) var(--delay, 0s) infinite ease-in-out;
+}
+
+.sparkle {
+  animation: shimmer var(--duration, 3s) var(--delay, 0s) infinite ease-in-out;
+}
+
+.floater {
+  animation: drift var(--duration, 8s) var(--delay, 0s) infinite ease-in-out;
+}
+
+/* ── GameButton pulse ── */
+@keyframes pulse-subtle {
+  0%, 100% {
+    transform: scale(1);
+    box-shadow: 0 4px 14px rgba(88, 204, 2, 0.3);
+  }
+  50% {
+    transform: scale(1.03);
+    box-shadow: 0 6px 20px rgba(88, 204, 2, 0.5);
+  }
+}
+
+.animate-pulse-subtle {
+  animation: pulse-subtle 2s ease-in-out infinite;
+}
+
+/* ── Shake animation (wrong answer) ── */
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  20% { transform: translateX(-4px); }
+  40% { transform: translateX(4px); }
+  60% { transform: translateX(-3px); }
+  80% { transform: translateX(3px); }
+}
+
+.animate-shake {
+  animation: shake 0.4s ease-in-out;
+}
+
+/* ── XP bar shimmer ── */
+@keyframes shimmer-bar {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(200%); }
+}
+
+.animate-shimmer-bar {
+  animation: shimmer-bar 1.5s ease-in-out infinite;
+}

app/layout.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "Learn8",
+  description: "Convert your notes into a dynamic Skill Tree and master any subject through immersive mini-games.",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className="min-h-screen bg-brand-teal-bg antialiased">
+        {children}
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+export default function RootPage() {
+  const router = useRouter();
+
+  useEffect(() => {
+    router.replace("/login");
+  }, [router]);
+
+  return null;
+}

components/arena/LogicChain.tsx

@@ -0,0 +1,352 @@
+"use client";
+
+import React, { useState, useCallback, useRef } from "react";
+import { motion, AnimatePresence, Reorder } from "framer-motion";
+import GameButton from "@/components/ui/GameButton";
+
+/* ═══════════════════ Types ═══════════════════ */
+
+export interface LogicChainProps {
+  stageIndex: number;
+  totalStages: number;
+  topic: string;
+  description: string;
+  nodes: string[];          // correct order
+  feedbackMsg: { success: string; error: string; hint: string };
+  onComplete: () => void;
+  onError?: () => void;
+  onHintUse: () => boolean;
+}
+
+/* ═══════════════════ Helpers ═══════════════════ */
+
+function shuffle<T>(arr: T[]): T[] {
+  const a = [...arr];
+  for (let i = a.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [a[i], a[j]] = [a[j], a[i]];
+  }
+  return a;
+}
+
+/* Owl mascot (inline SVG) */
+function OwlMascotSmall() {
+  return (
+    <svg viewBox="0 0 40 44" className="w-12 h-14 flex-shrink-0">
+      <ellipse cx="20" cy="32" rx="14" ry="12" fill="#C47F17" />
+      <ellipse cx="20" cy="30" rx="14" ry="12" fill="#E8A817" />
+      <circle cx="14" cy="26" r="6" fill="white" />
+      <circle cx="26" cy="26" r="6" fill="white" />
+      <circle cx="14" cy="26" r="3" fill="#2D2D2D" />
+      <circle cx="26" cy="26" r="3" fill="#2D2D2D" />
+      <circle cx="15" cy="25" r="1.2" fill="white" />
+      <circle cx="27" cy="25" r="1.2" fill="white" />
+      <polygon points="20,28 18,31 22,31" fill="#FF9500" />
+      <path d="M6,20 Q4,8 14,16" fill="#C47F17" />
+      <path d="M34,20 Q36,8 26,16" fill="#C47F17" />
+    </svg>
+  );
+}
+
+/* ═══════════════════ Accent colours per step ═══════════════════ */
+
+const STEP_COLORS = [
+  "from-sky-400 to-sky-500",
+  "from-brand-teal to-[#5fb3af]",
+  "from-amber-400 to-amber-500",
+  "from-brand-coral to-red-400",
+  "from-violet-400 to-purple-500",
+  "from-brand-green to-emerald-500",
+];
+
+const STEP_BORDER = [
+  "border-sky-300",
+  "border-brand-teal",
+  "border-amber-300",
+  "border-brand-coral",
+  "border-violet-300",
+  "border-brand-green",
+];
+
+/* ═══════════════════ Component ═══════════════════ */
+
+export default function LogicChain({
+  stageIndex,
+  totalStages,
+  topic,
+  description,
+  nodes,
+  feedbackMsg,
+  onComplete,
+  onError,
+  onHintUse,
+}: LogicChainProps) {
+  // Shuffle on first render (useRef so it only shuffles once)
+  const initialOrder = useRef(shuffle(nodes));
+  const [order, setOrder] = useState<string[]>(initialOrder.current);
+  const [result, setResult] = useState<"correct" | "wrong" | null>(null);
+  const [wrongIndices, setWrongIndices] = useState<number[]>([]);
+  const [hintUsed, setHintUsed] = useState(false);
+  const [completed, setCompleted] = useState(false);
+  const [lockedCount, setLockedCount] = useState(0); // how many from the top are locked (via hints)
+
+  /* CHECK */
+  const handleCheck = useCallback(() => {
+    if (completed) return;
+
+    // Compare with correct order
+    const isCorrect = order.every((n, i) => n === nodes[i]);
+
+    if (isCorrect) {
+      setResult("correct");
+      setCompleted(true);
+      setWrongIndices([]);
+      setTimeout(() => onComplete(), 600);
+    } else {
+      // Find wrong positions
+      const wrong: number[] = [];
+      order.forEach((n, i) => {
+        if (n !== nodes[i]) wrong.push(i);
+      });
+      setWrongIndices(wrong);
+      setResult("wrong");
+      onError?.();
+      setTimeout(() => {
+        setResult(null);
+        setWrongIndices([]);
+      }, 1200);
+    }
+  }, [order, nodes, completed, onComplete]);
+
+  /* Hint: lock the next correct item in place */
+  const handleHint = useCallback(() => {
+    if (hintUsed || completed) return;
+    const canAfford = onHintUse();
+    if (!canAfford) return;
+    setHintUsed(true);
+
+    // Place the next correct node at the right position
+    const nextCorrect = nodes[lockedCount];
+    const newOrder = [...order];
+    const currentIdx = newOrder.indexOf(nextCorrect);
+    if (currentIdx !== lockedCount) {
+      // Swap
+      [newOrder[lockedCount], newOrder[currentIdx]] = [newOrder[currentIdx], newOrder[lockedCount]];
+      setOrder(newOrder);
+    }
+    setLockedCount((c) => c + 1);
+  }, [hintUsed, completed, onHintUse, nodes, lockedCount, order]);
+
+  /* Arrow connector between items */
+  const Arrow = ({ idx }: { idx: number }) => {
+    const isWrong = wrongIndices.includes(idx) || wrongIndices.includes(idx + 1);
+    return (
+      <div className="flex justify-center py-1">
+        <motion.div
+          animate={isWrong && result === "wrong" ? { opacity: [1, 0.3, 1] } : {}}
+          transition={{ duration: 0.4, repeat: 2 }}
+        >
+          <svg viewBox="0 0 24 28" className="w-5 h-7" fill="none">
+            <path
+              d="M12 4 L12 20 M6 16 L12 22 L18 16"
+              stroke={isWrong && result === "wrong" ? "#EF4444" : "#7AC7C4"}
+              strokeWidth="2.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </motion.div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="flex flex-col flex-1">
+      {/* ── Stage header ── */}
+      <motion.div
+        initial={{ opacity: 0, y: -10 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="mt-4 mb-5 flex items-center gap-4"
+      >
+        <div className="flex-shrink-0 w-11 h-11 rounded-2xl bg-gradient-to-br from-sky-400 to-blue-500 flex items-center justify-center shadow-md shadow-sky-300/30">
+          <span className="font-heading font-extrabold text-white text-base">
+            {stageIndex + 1}
+          </span>
+        </div>
+        <div>
+          <p className="text-[11px] font-bold text-sky-500 uppercase tracking-wider mb-0.5">
+            Stage {stageIndex + 1} of {totalStages}
+          </p>
+          <h2 className="font-heading font-bold text-xl text-brand-gray-700 leading-snug">
+            {topic}
+          </h2>
+          <p className="text-xs text-brand-gray-400 mt-0.5">{description}</p>
+        </div>
+      </motion.div>
+
+      {/* ── Instruction ── */}
+      <div className="mb-4 flex items-center gap-2 px-1">
+        <span className="text-lg">🔗</span>
+        <p className="text-sm text-brand-gray-500 font-medium">
+          Drag to reorder the steps into the correct sequence
+        </p>
+      </div>
+
+      {/* ── Chain list (Reorder) ── */}
+      <div className="mx-auto w-full max-w-[500px]">
+        <Reorder.Group
+          axis="y"
+          values={order}
+          onReorder={(newOrder) => {
+            if (completed) return;
+            // Don't allow reordering locked items
+            const locked = order.slice(0, lockedCount);
+            const reorderUnlocked = newOrder.filter((n) => !locked.includes(n));
+            setOrder([...locked, ...reorderUnlocked]);
+          }}
+          className="flex flex-col"
+        >
+          {order.map((node, idx) => {
+            const isLocked = idx < lockedCount;
+            const isWrong = wrongIndices.includes(idx) && result === "wrong";
+            const isCorrectResult = result === "correct";
+            const colorIdx = idx % STEP_COLORS.length;
+
+            return (
+              <React.Fragment key={node}>
+                <Reorder.Item
+                  value={node}
+                  dragListener={!isLocked && !completed}
+                  className="select-none"
+                >
+                  <motion.div
+                    layout
+                    animate={
+                      isWrong
+                        ? { x: [0, -8, 8, -5, 5, 0] }
+                        : isCorrectResult
+                        ? { scale: [1, 1.02, 1] }
+                        : {}
+                    }
+                    transition={isWrong ? { duration: 0.5 } : { duration: 0.3, delay: idx * 0.05 }}
+                    className={`relative flex items-center gap-3 rounded-2xl border-2 px-5 py-4 transition-all duration-200
+                      ${
+                        isCorrectResult
+                          ? "border-brand-green/60 bg-green-50/60 shadow-md shadow-green-200/30"
+                          : isWrong
+                          ? "border-red-400 bg-red-50/50 shadow-md"
+                          : isLocked
+                          ? `${STEP_BORDER[colorIdx]} bg-white/80 shadow-sm opacity-80`
+                          : "border-white/60 bg-white/70 backdrop-blur-sm shadow-sm hover:shadow-md hover:border-brand-teal/40 cursor-grab active:cursor-grabbing"
+                      }`}
+                  >
+                    {/* Step number badge */}
+                    <div
+                      className={`flex-shrink-0 w-8 h-8 rounded-xl bg-gradient-to-br ${STEP_COLORS[colorIdx]} flex items-center justify-center shadow-sm`}
+                    >
+                      <span className="font-heading font-extrabold text-white text-sm">
+                        {idx + 1}
+                      </span>
+                    </div>
+
+                    {/* Label */}
+                    <span
+                      className={`font-heading font-bold text-[15px] flex-1 ${
+                        isCorrectResult
+                          ? "text-brand-green"
+                          : isWrong
+                          ? "text-red-500"
+                          : "text-brand-gray-700"
+                      }`}
+                    >
+                      {node}
+                    </span>
+
+                    {/* Drag handle / lock icon */}
+                    {isLocked ? (
+                      <svg viewBox="0 0 20 20" className="w-4 h-4 text-brand-gray-300 flex-shrink-0" fill="currentColor">
+                        <path fillRule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clipRule="evenodd" />
+                      </svg>
+                    ) : !completed ? (
+                      <svg viewBox="0 0 20 20" className="w-5 h-5 text-brand-gray-300 flex-shrink-0" fill="currentColor">
+                        <path d="M3 5h14M3 10h14M3 15h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" fill="none" />
+                      </svg>
+                    ) : (
+                      <motion.div
+                        initial={{ scale: 0 }}
+                        animate={{ scale: 1 }}
+                        className="w-5 h-5 rounded-full bg-brand-green flex items-center justify-center"
+                      >
+                        <span className="text-white text-[10px] font-bold">✓</span>
+                      </motion.div>
+                    )}
+                  </motion.div>
+                </Reorder.Item>
+
+                {/* Arrow between items */}
+                {idx < order.length - 1 && <Arrow idx={idx} />}
+              </React.Fragment>
+            );
+          })}
+        </Reorder.Group>
+      </div>
+
+      {/* ── Feedback text ── */}
+      <AnimatePresence mode="wait">
+        {result === "correct" && (
+          <motion.div
+            key="chain-ok"
+            initial={{ opacity: 0, y: 6 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0 }}
+            className="mt-5 mx-auto max-w-md text-center"
+          >
+            <p className="text-sm font-bold text-brand-green">{feedbackMsg.success}</p>
+          </motion.div>
+        )}
+        {result === "wrong" && (
+          <motion.div
+            key="chain-err"
+            initial={{ opacity: 0, y: 6 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0 }}
+            className="mt-5 mx-auto max-w-md text-center"
+          >
+            <p className="text-sm font-bold text-red-500">{feedbackMsg.error}</p>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* spacer */}
+      <div className="flex-1 min-h-[40px]" />
+
+      {/* ── Bottom bar ── */}
+      <div className="relative pt-4 pb-6 flex items-end justify-between">
+        <div className="flex items-end gap-2">
+          <OwlMascotSmall />
+          <button
+            onClick={handleHint}
+            disabled={hintUsed || completed}
+            className={`mb-1 flex items-center gap-1 text-xs font-bold px-3 py-1.5 rounded-full border transition ${
+              hintUsed
+                ? "bg-brand-gray-100 text-brand-gray-400 border-brand-gray-200 cursor-not-allowed"
+                : "bg-amber-50 text-amber-600 border-amber-200 hover:bg-amber-100"
+            }`}
+          >
+            💡 Hint
+            <span className="text-[10px] opacity-60">(10 💎)</span>
+          </button>
+        </div>
+
+        <GameButton
+          variant="primary"
+          onClick={handleCheck}
+          disabled={completed}
+          className="min-w-[140px]"
+        >
+          {completed ? "CORRECT ✓" : "CHECK"}
+        </GameButton>
+      </div>
+    </div>
+  );
+}

components/arena/SpatialAnatomy.tsx

@@ -0,0 +1,327 @@
+"use client";
+
+import React, { useState, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import GameButton from "@/components/ui/GameButton";
+
+/* ═══════════════════ Types ═══════════════════ */
+
+export interface AnatomyLabel {
+  id: string;
+  label: string;
+}
+
+export interface SpatialAnatomyProps {
+  stageIndex: number;
+  totalStages: number;
+  topic: string;
+  description: string;
+  model: string;            // e.g. "heart-cross-section"
+  labels: AnatomyLabel[];
+  targetId: string;         // correct answer id
+  feedbackMsg: { success: string; error: string; hint: string };
+  onComplete: () => void;
+  onError?: () => void;
+  onHintUse: () => boolean;
+}
+
+/* ═══════════════════ Heart region positions (relative %) ═══════════════════ */
+
+const HEART_REGIONS: Record<string, { x: number; y: number; w: number; h: number; color: string }> = {
+  ra: { x: 14, y: 18, w: 30, h: 28, color: "#60B5FF" },    // Right Atrium – top-left
+  la: { x: 56, y: 18, w: 30, h: 28, color: "#A78BFA" },    // Left Atrium  – top-right
+  rv: { x: 14, y: 52, w: 30, h: 30, color: "#F59E0B" },    // Right Ventricle – bottom-left
+  lv: { x: 56, y: 52, w: 30, h: 30, color: "#58CC02" },    // Left Ventricle – bottom-right
+};
+
+/* ═══════════════════ Owl mascot (inline SVG) ═══════════════════ */
+
+function OwlMascotSmall() {
+  return (
+    <svg viewBox="0 0 40 44" className="w-12 h-14 flex-shrink-0">
+      <ellipse cx="20" cy="32" rx="14" ry="12" fill="#C47F17" />
+      <ellipse cx="20" cy="30" rx="14" ry="12" fill="#E8A817" />
+      <circle cx="14" cy="26" r="6" fill="white" />
+      <circle cx="26" cy="26" r="6" fill="white" />
+      <circle cx="14" cy="26" r="3" fill="#2D2D2D" />
+      <circle cx="26" cy="26" r="3" fill="#2D2D2D" />
+      <circle cx="15" cy="25" r="1.2" fill="white" />
+      <circle cx="27" cy="25" r="1.2" fill="white" />
+      <polygon points="20,28 18,31 22,31" fill="#FF9500" />
+      <path d="M6,20 Q4,8 14,16" fill="#C47F17" />
+      <path d="M34,20 Q36,8 26,16" fill="#C47F17" />
+    </svg>
+  );
+}
+
+/* ═══════════════════ Component ═══════════════════ */
+
+export default function SpatialAnatomy({
+  stageIndex,
+  totalStages,
+  topic,
+  description,
+  model,
+  labels,
+  targetId,
+  feedbackMsg,
+  onComplete,
+  onError,
+  onHintUse,
+}: SpatialAnatomyProps) {
+  const [selected, setSelected] = useState<string | null>(null);
+  const [result, setResult] = useState<"correct" | "wrong" | null>(null);
+  const [hintUsed, setHintUsed] = useState(false);
+  const [hintTarget, setHintTarget] = useState<string | null>(null);
+  const [completed, setCompleted] = useState(false);
+
+  /* Pick a region */
+  const handleSelect = useCallback(
+    (id: string) => {
+      if (completed) return;
+      setSelected(id);
+      setResult(null);
+    },
+    [completed],
+  );
+
+  /* CHECK */
+  const handleCheck = useCallback(() => {
+    if (!selected || completed) return;
+    if (selected === targetId) {
+      setResult("correct");
+      setCompleted(true);
+      setTimeout(() => onComplete(), 600);
+    } else {
+      setResult("wrong");
+      onError?.();
+      // shake then reset
+      setTimeout(() => {
+        setResult(null);
+        setSelected(null);
+      }, 1000);
+    }
+  }, [selected, targetId, completed, onComplete]);
+
+  /* Hint */
+  const handleHint = useCallback(() => {
+    if (hintUsed || completed) return;
+    const canAfford = onHintUse();
+    if (!canAfford) return;
+    setHintUsed(true);
+    setHintTarget(targetId);
+    // highlight the answer briefly
+    setTimeout(() => {
+      setSelected(targetId);
+    }, 800);
+  }, [hintUsed, completed, onHintUse, targetId]);
+
+  /* Label for selected */
+  const selectedLabel = labels.find((l) => l.id === selected)?.label ?? "";
+
+  return (
+    <div className="flex flex-col flex-1">
+      {/* ── Stage header ── */}
+      <motion.div
+        initial={{ opacity: 0, y: -10 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="mt-4 mb-5 flex items-center gap-4"
+      >
+        <div className="flex-shrink-0 w-11 h-11 rounded-2xl bg-gradient-to-br from-rose-400 to-red-500 flex items-center justify-center shadow-md shadow-rose-300/30">
+          <span className="font-heading font-extrabold text-white text-base">
+            {stageIndex + 1}
+          </span>
+        </div>
+        <div>
+          <p className="text-[11px] font-bold text-rose-500 uppercase tracking-wider mb-0.5">
+            Stage {stageIndex + 1} of {totalStages}
+          </p>
+          <h2 className="font-heading font-bold text-xl text-brand-gray-700 leading-snug">
+            {topic}
+          </h2>
+          <p className="text-xs text-brand-gray-400 mt-0.5">{description}</p>
+        </div>
+      </motion.div>
+
+      {/* ── Interactive heart diagram ── */}
+      <motion.div
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ delay: 0.15 }}
+        className="relative mx-auto w-full max-w-[480px] aspect-square rounded-3xl bg-white/70 backdrop-blur-md border border-white/50 shadow-lg shadow-rose-100/30 overflow-hidden"
+      >
+        {/* Background heart shape SVG */}
+        <svg viewBox="0 0 200 200" className="absolute inset-0 w-full h-full opacity-[0.08]">
+          <path
+            d="M100,180 C60,140 10,110 10,70 A45,45,0,0,1,100,50 A45,45,0,0,1,190,70 C190,110 140,140 100,180Z"
+            fill="#E8734A"
+          />
+        </svg>
+
+        {/* Divider lines */}
+        <div className="absolute left-1/2 top-[15%] bottom-[15%] w-px bg-brand-gray-200/50" />
+        <div className="absolute top-1/2 left-[12%] right-[12%] h-px bg-brand-gray-200/50" />
+
+        {/* Clickable regions */}
+        {labels.map((label) => {
+          const pos = HEART_REGIONS[label.id];
+          if (!pos) return null;
+          const isSelected = selected === label.id;
+          const isCorrectResult = result === "correct" && isSelected;
+          const isWrongResult = result === "wrong" && isSelected;
+          const isHinted = hintTarget === label.id;
+
+          return (
+            <motion.button
+              key={label.id}
+              onClick={() => handleSelect(label.id)}
+              animate={
+                isWrongResult
+                  ? { x: [0, -6, 6, -4, 4, 0] }
+                  : isCorrectResult
+                  ? { scale: [1, 1.05, 1] }
+                  : {}
+              }
+              transition={isWrongResult ? { duration: 0.5 } : { duration: 0.4 }}
+              className={`absolute rounded-2xl border-2 transition-all duration-200 flex flex-col items-center justify-center gap-1 cursor-pointer
+                ${
+                  isCorrectResult
+                    ? "border-brand-green bg-brand-green/15 shadow-lg shadow-green-300/30 ring-2 ring-brand-green/40"
+                    : isWrongResult
+                    ? "border-red-400 bg-red-50/60 shadow-md"
+                    : isSelected
+                    ? "border-brand-teal bg-brand-teal/10 shadow-md shadow-teal-200/30 ring-2 ring-brand-teal/30"
+                    : isHinted
+                    ? "border-amber-400 bg-amber-50/50 shadow-md animate-pulse"
+                    : "border-white/60 bg-white/40 hover:bg-white/60 hover:border-brand-teal/40 hover:shadow-sm"
+                }`}
+              style={{
+                left: `${pos.x}%`,
+                top: `${pos.y}%`,
+                width: `${pos.w}%`,
+                height: `${pos.h}%`,
+              }}
+            >
+              {/* Colour dot */}
+              <div
+                className="w-3 h-3 rounded-full opacity-70"
+                style={{ backgroundColor: pos.color }}
+              />
+              <span
+                className={`font-heading font-bold text-sm leading-tight text-center px-1 ${
+                  isCorrectResult
+                    ? "text-brand-green"
+                    : isWrongResult
+                    ? "text-red-500"
+                    : isSelected
+                    ? "text-teal-700"
+                    : "text-brand-gray-600"
+                }`}
+              >
+                {label.label}
+              </span>
+
+              {/* Selected indicator */}
+              {isSelected && !result && (
+                <motion.div
+                  layoutId="anatomy-sel"
+                  className="absolute -top-2 -right-2 w-5 h-5 rounded-full bg-brand-teal flex items-center justify-center shadow"
+                >
+                  <span className="text-white text-[10px] font-bold">✓</span>
+                </motion.div>
+              )}
+
+              {/* Correct icon */}
+              {isCorrectResult && (
+                <motion.div
+                  initial={{ scale: 0 }}
+                  animate={{ scale: 1 }}
+                  className="absolute -top-2 -right-2 w-6 h-6 rounded-full bg-brand-green flex items-center justify-center shadow-md"
+                >
+                  <span className="text-white text-xs font-bold">✓</span>
+                </motion.div>
+              )}
+            </motion.button>
+          );
+        })}
+
+        {/* Model label */}
+        <div className="absolute bottom-3 left-1/2 -translate-x-1/2 bg-white/70 backdrop-blur rounded-full px-4 py-1">
+          <span className="text-[10px] font-bold text-brand-gray-400 uppercase tracking-wider">
+            {model.replace(/-/g, " ")}
+          </span>
+        </div>
+      </motion.div>
+
+      {/* ── Selection feedback text ── */}
+      <AnimatePresence mode="wait">
+        {result === "correct" && (
+          <motion.div
+            key="fb-ok"
+            initial={{ opacity: 0, y: 6 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0 }}
+            className="mt-4 mx-auto max-w-md text-center"
+          >
+            <p className="text-sm font-bold text-brand-green">{feedbackMsg.success}</p>
+          </motion.div>
+        )}
+        {result === "wrong" && (
+          <motion.div
+            key="fb-err"
+            initial={{ opacity: 0, y: 6 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0 }}
+            className="mt-4 mx-auto max-w-md text-center"
+          >
+            <p className="text-sm font-bold text-red-500">{feedbackMsg.error}</p>
+          </motion.div>
+        )}
+        {!result && selected && (
+          <motion.div
+            key="fb-sel"
+            initial={{ opacity: 0, y: 6 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0 }}
+            className="mt-4 mx-auto text-center"
+          >
+            <p className="text-sm text-brand-gray-500">
+              Selected: <span className="font-bold text-teal-700">{selectedLabel}</span>
+            </p>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* spacer */}
+      <div className="flex-1 min-h-[40px]" />
+
+      {/* ── Bottom bar ── */}
+      <div className="relative pt-4 pb-6 flex items-end justify-between">
+        <div className="flex items-end gap-2">
+          <OwlMascotSmall />
+          <button
+            onClick={handleHint}
+            disabled={hintUsed || completed}
+            className={`mb-1 flex items-center gap-1 text-xs font-bold px-3 py-1.5 rounded-full border transition ${
+              hintUsed
+                ? "bg-brand-gray-100 text-brand-gray-400 border-brand-gray-200 cursor-not-allowed"
+                : "bg-amber-50 text-amber-600 border-amber-200 hover:bg-amber-100"
+            }`}
+          >
+            💡 Hint
+            <span className="text-[10px] opacity-60">(10 💎)</span>
+          </button>
+        </div>
+
+        <GameButton
+          variant="primary"
+          onClick={handleCheck}
+          disabled={!selected || completed}
+          className="min-w-[140px]"
+        >
+          {completed ? "CORRECT ✓" : "CHECK"}
+        </GameButton>
+      </div>
+    </div>
+  );
+}

components/arena/TaxonomyMatrix.tsx

@@ -0,0 +1,463 @@
+"use client";
+
+import React, { useState, useCallback } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import GameButton from "@/components/ui/GameButton";
+
+/* ═══════════════════ Types ═══════════════════ */
+
+export interface TaxonomyItem {
+  id: string;
+  content: string;
+}
+
+export interface TaxonomyMatrixProps {
+  stageIndex: number;
+  totalStages: number;
+  topic: string;
+  description: string;
+  buckets: string[];
+  items: TaxonomyItem[];
+  correctAssignments: Record<string, string>; // itemId → bucket name
+  feedbackMsg: { success: string; error: string; hint: string };
+  onComplete: () => void;
+  onError?: () => void;
+  onHintUse: () => boolean; // returns false if can't afford
+}
+
+/* ═══════════════════ Bucket accent colours ═══════════════════ */
+
+const BUCKET_ACCENTS = [
+  {
+    border: "border-brand-teal",
+    borderDash: "border-brand-teal/40",
+    bg: "bg-brand-teal/5",
+    bgHover: "hover:bg-brand-teal/10",
+    text: "text-teal-700",
+    tagBg: "bg-brand-teal/10",
+    tagBorder: "border-brand-teal/40",
+    icon: "✓",
+  },
+  {
+    border: "border-brand-coral",
+    borderDash: "border-brand-coral/40",
+    bg: "bg-brand-coral/5",
+    bgHover: "hover:bg-brand-coral/10",
+    text: "text-red-700",
+    tagBg: "bg-brand-coral/10",
+    tagBorder: "border-brand-coral/40",
+    icon: "✗",
+  },
+];
+
+/* ═══════════════════ Component ═══════════════════ */
+
+export default function TaxonomyMatrix({
+  stageIndex,
+  totalStages,
+  topic,
+  description,
+  buckets,
+  items,
+  correctAssignments,
+  feedbackMsg,
+  onComplete,
+  onError,
+  onHintUse,
+}: TaxonomyMatrixProps) {
+  /* ── State ── */
+  const [assignments, setAssignments] = useState<Record<string, string[]>>(
+    () => {
+      const init: Record<string, string[]> = {};
+      buckets.forEach((b) => (init[b] = []));
+      return init;
+    }
+  );
+  const [unclassified, setUnclassified] = useState<string[]>(
+    items.map((i) => i.id)
+  );
+  const [selectedItem, setSelectedItem] = useState<string | null>(null);
+  const [wrongItems, setWrongItems] = useState<string[]>([]);
+  const [completed, setCompleted] = useState(false);
+  const [hintUsed, setHintUsed] = useState(false);
+  const [hintItem, setHintItem] = useState<string | null>(null);
+  const [errorMsg, setErrorMsg] = useState<string | null>(null);
+
+  const allPlaced = unclassified.length === 0;
+
+  const getItem = useCallback(
+    (id: string) => items.find((i) => i.id === id)!,
+    [items]
+  );
+
+  /* ── Select item from pool ── */
+  const selectItem = useCallback(
+    (id: string) => {
+      if (completed) return;
+      setSelectedItem((prev) => (prev === id ? null : id));
+      setWrongItems([]);
+      setErrorMsg(null);
+    },
+    [completed]
+  );
+
+  /* ── Place selected item into a bucket ── */
+  const placeInBucket = useCallback(
+    (bucket: string) => {
+      if (!selectedItem || completed) return;
+
+      setUnclassified((prev) => prev.filter((id) => id !== selectedItem));
+      setAssignments((prev) => {
+        const next: Record<string, string[]> = {};
+        for (const b of Object.keys(prev)) {
+          next[b] = prev[b].filter((id) => id !== selectedItem);
+        }
+        next[bucket] = [...(next[bucket] || []), selectedItem];
+        return next;
+      });
+      setSelectedItem(null);
+    },
+    [selectedItem, completed]
+  );
+
+  /* ── Remove item from bucket back to pool ── */
+  const removeFromBucket = useCallback(
+    (itemId: string, e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (completed) return;
+      setAssignments((prev) => {
+        const next: Record<string, string[]> = {};
+        for (const b of Object.keys(prev)) {
+          next[b] = prev[b].filter((id) => id !== itemId);
+        }
+        return next;
+      });
+      setUnclassified((prev) => [...prev, itemId]);
+    },
+    [completed]
+  );
+
+  /* ── Check all assignments ── */
+  const handleCheck = useCallback(() => {
+    if (!allPlaced || completed) return;
+
+    const wrong: string[] = [];
+    for (const [bucket, itemIds] of Object.entries(assignments)) {
+      for (const id of itemIds) {
+        if (correctAssignments[id] !== bucket) wrong.push(id);
+      }
+    }
+
+    if (wrong.length === 0) {
+      setCompleted(true);
+      onComplete();
+    } else {
+      setWrongItems(wrong);
+      setErrorMsg(feedbackMsg.error);
+      onError?.();
+      setTimeout(() => {
+        setAssignments((prev) => {
+          const next: Record<string, string[]> = {};
+          for (const b of Object.keys(prev)) {
+            next[b] = prev[b].filter((id) => !wrong.includes(id));
+          }
+          return next;
+        });
+        setUnclassified((prev) => [...prev, ...wrong]);
+        setWrongItems([]);
+      }, 900);
+    }
+  }, [allPlaced, completed, assignments, correctAssignments, onComplete, feedbackMsg]);
+
+  /* ── Hint ── */
+  const handleHint = useCallback(() => {
+    if (hintUsed || completed || unclassified.length === 0) return;
+    if (!onHintUse()) return;
+    setHintUsed(true);
+
+    const itemId = unclassified[0];
+    const correctBucket = correctAssignments[itemId];
+    setHintItem(itemId);
+    setSelectedItem(itemId);
+
+    setTimeout(() => {
+      setUnclassified((prev) => prev.filter((id) => id !== itemId));
+      setAssignments((prev) => {
+        const next = { ...prev };
+        next[correctBucket] = [...next[correctBucket], itemId];
+        return next;
+      });
+      setSelectedItem(null);
+      setHintItem(null);
+    }, 800);
+  }, [hintUsed, completed, onHintUse, unclassified, correctAssignments]);
+
+  /* ═══════════════════ Render ═══════════════════ */
+  return (
+    <div className="flex-1 flex flex-col min-w-0">
+      {/* ─── Question card ─── */}
+      <motion.div
+        initial={{ opacity: 0, y: -10 }}
+        animate={{ opacity: 1, y: 0 }}
+        className="mt-4 mb-6 flex items-center gap-4"
+      >
+        <div className="flex-shrink-0 w-11 h-11 rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center shadow-md shadow-purple-300/30">
+          <span className="font-heading font-extrabold text-white text-base">
+            {stageIndex + 1}
+          </span>
+        </div>
+        <div>
+          <p className="text-[11px] font-bold text-indigo-500 uppercase tracking-wider mb-0.5">
+            Stage {stageIndex + 1} of {totalStages} · {topic}
+          </p>
+          <h2 className="font-heading font-bold text-xl text-brand-gray-700 leading-snug">
+            {description}
+          </h2>
+        </div>
+      </motion.div>
+
+      {/* ─── Instruction chip ─── */}
+      <AnimatePresence>
+        {!allPlaced && !completed && (
+          <motion.div
+            initial={{ opacity: 0, y: -6 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, height: 0 }}
+            className="mb-4 flex items-center gap-2"
+          >
+            <span className="inline-flex items-center gap-1.5 text-xs font-bold text-brand-gray-500 bg-white/60 backdrop-blur border border-brand-gray-200 rounded-full px-3 py-1.5">
+              <span className="text-brand-teal">①</span> Tap an item below
+              <span className="text-brand-teal mx-0.5">→</span>
+              <span className="text-brand-teal">②</span> Tap a bucket to classify
+            </span>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* ─── Bucket zones ─── */}
+      <div className="grid grid-cols-2 gap-4 mb-5">
+        {buckets.map((bucket, bi) => {
+          const accent = BUCKET_ACCENTS[bi % BUCKET_ACCENTS.length];
+          const bucketItems = assignments[bucket] || [];
+          const isTarget = !!selectedItem;
+
+          return (
+            <motion.div
+              key={bucket}
+              onClick={() => placeInBucket(bucket)}
+              whileHover={isTarget ? { scale: 1.02 } : {}}
+              whileTap={isTarget ? { scale: 0.98 } : {}}
+              className={`relative rounded-2xl border-2 border-dashed p-4 min-h-[160px] transition-all cursor-pointer ${
+                isTarget
+                  ? `${accent.borderDash} ${accent.bg} ${accent.bgHover} shadow-md`
+                  : "border-brand-gray-200 bg-white/40 backdrop-blur-sm"
+              } ${completed ? "opacity-80" : ""}`}
+            >
+              {/* Bucket label */}
+              <div className="flex items-center gap-2 mb-3">
+                <div
+                  className={`h-6 w-6 rounded-lg flex items-center justify-center text-xs font-bold text-white ${
+                    bi === 0
+                      ? "bg-gradient-to-br from-brand-teal to-[#5fb3af]"
+                      : "bg-gradient-to-br from-brand-coral to-[#d4654a]"
+                  }`}
+                >
+                  {bi === 0 ? "✓" : "✗"}
+                </div>
+                <h4 className="font-heading font-bold text-brand-gray-700 text-sm">
+                  {bucket}
+                </h4>
+              </div>
+
+              {/* Items in this bucket */}
+              <div className="flex flex-wrap gap-2">
+                <AnimatePresence mode="popLayout">
+                  {bucketItems.map((itemId) => {
+                    const item = getItem(itemId);
+                    const isWrong = wrongItems.includes(itemId);
+                    const isHint = hintItem === itemId;
+                    return (
+                      <motion.button
+                        key={itemId}
+                        layout
+                        initial={{ scale: 0.8, opacity: 0 }}
+                        animate={{
+                          scale: 1,
+                          opacity: 1,
+                          x: isWrong ? [0, -6, 6, -6, 6, 0] : 0,
+                        }}
+                        exit={{ scale: 0.8, opacity: 0 }}
+                        transition={
+                          isWrong
+                            ? { x: { duration: 0.5 } }
+                            : { type: "spring", damping: 18 }
+                        }
+                        onClick={(e) => removeFromBucket(itemId, e)}
+                        className={`px-3 py-2 rounded-xl text-xs font-semibold border transition group ${
+                          completed
+                            ? "bg-brand-green/10 text-brand-green border-brand-green/40"
+                            : isWrong
+                            ? "bg-red-50 text-red-500 border-red-400"
+                            : isHint
+                            ? "bg-amber-50 text-amber-600 border-amber-300"
+                            : `${accent.tagBg} ${accent.text} ${accent.tagBorder}`
+                        }`}
+                      >
+                        {item.content}
+                        {!completed && (
+                          <span className="ml-1.5 text-[10px] opacity-0 group-hover:opacity-60 transition">
+                            ×
+                          </span>
+                        )}
+                        {completed && (
+                          <span className="ml-1.5">✓</span>
+                        )}
+                      </motion.button>
+                    );
+                  })}
+                </AnimatePresence>
+              </div>
+
+              {/* Empty state */}
+              {bucketItems.length === 0 && (
+                <div className="flex items-center justify-center h-16 text-xs text-brand-gray-300 italic">
+                  {isTarget ? "← Tap to place here" : "No items yet"}
+                </div>
+              )}
+            </motion.div>
+          );
+        })}
+      </div>
+
+      {/* ─── Error message ─── */}
+      <AnimatePresence>
+        {errorMsg && (
+          <motion.div
+            initial={{ opacity: 0, y: -8 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -8 }}
+            className="mb-3 px-4 py-2.5 rounded-xl bg-red-50 border border-red-200 text-xs text-red-600 font-medium"
+          >
+            💡 {errorMsg}
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* ─── Unclassified items pool ─── */}
+      <AnimatePresence mode="popLayout">
+        {unclassified.length > 0 && (
+          <motion.div layout>
+            <p className="text-[10px] font-bold uppercase tracking-widest text-brand-gray-400 mb-2">
+              Classify these items ↑
+            </p>
+            <div className="flex flex-col gap-2.5">
+              {unclassified.map((itemId) => {
+                const item = getItem(itemId);
+                const isSelected = selectedItem === itemId;
+                const isHint = hintItem === itemId;
+                return (
+                  <motion.button
+                    key={itemId}
+                    layout
+                    initial={{ opacity: 0, x: -20 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    exit={{ opacity: 0, x: 20, height: 0 }}
+                    transition={{ type: "spring", damping: 20 }}
+                    onClick={() => selectItem(itemId)}
+                    whileTap={{ scale: 0.97 }}
+                    className={`w-full text-left rounded-2xl px-5 py-4 border-2 border-b-4 font-heading font-bold text-base transition-all ${
+                      isHint
+                        ? "border-amber-400 bg-amber-50 text-amber-700 shadow-md shadow-amber-200/40"
+                        : isSelected
+                        ? "border-brand-teal bg-brand-teal/10 text-brand-teal shadow-md shadow-teal-200/40"
+                        : "border-brand-gray-200 bg-white text-brand-gray-700 hover:border-brand-teal/40 hover:shadow-sm"
+                    }`}
+                  >
+                    <div className="flex items-center gap-3">
+                      <span
+                        className={`flex-shrink-0 h-7 w-7 rounded-lg flex items-center justify-center text-xs font-bold transition ${
+                          isSelected
+                            ? "bg-brand-teal text-white"
+                            : "bg-brand-gray-100 text-brand-gray-400"
+                        }`}
+                      >
+                        {isSelected ? "↑" : "?"}
+                      </span>
+                      <span className="text-sm">{item.content}</span>
+                    </div>
+                  </motion.button>
+                );
+              })}
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      {/* ─── All placed message ─── */}
+      {allPlaced && !completed && (
+        <motion.div
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="mt-3 text-center text-sm text-brand-teal font-semibold"
+        >
+          All items classified! Tap CHECK to verify.
+        </motion.div>
+      )}
+
+      {/* Spacer */}
+      <div className="flex-1 min-h-[40px]" />
+
+      {/* ─── Bottom Bar ─── */}
+      <div className="relative pt-4 pb-6 flex items-end justify-between">
+        {/* Mascot + hint */}
+        <div className="flex items-end gap-2">
+          <OwlMascotSmall />
+          <button
+            onClick={handleHint}
+            disabled={hintUsed || completed || unclassified.length === 0}
+            className={`mb-1 flex items-center gap-1 text-xs font-bold px-3 py-1.5 rounded-full border transition ${
+              hintUsed
+                ? "bg-brand-gray-100 text-brand-gray-400 border-brand-gray-200 cursor-not-allowed"
+                : "bg-amber-50 text-amber-600 border-amber-200 hover:bg-amber-100"
+            }`}
+          >
+            💡 Hint
+            <span className="text-[10px] opacity-60">(10 💎)</span>
+          </button>
+        </div>
+
+        {/* CHECK button */}
+        <GameButton
+          variant="primary"
+          onClick={handleCheck}
+          disabled={!allPlaced || completed}
+          className="min-w-[140px]"
+        >
+          CHECK
+        </GameButton>
+      </div>
+    </div>
+  );
+}
+
+/* ═══════════════════ Owl Mascot (compact) ═══════════════════ */
+
+function OwlMascotSmall() {
+  return (
+    <svg viewBox="0 0 80 80" className="h-14 w-14 flex-shrink-0" fill="none">
+      <ellipse cx="40" cy="52" rx="22" ry="20" fill="#E8A855" />
+      <ellipse cx="40" cy="54" rx="16" ry="14" fill="#F5DEB3" />
+      <circle cx="32" cy="40" r="9" fill="white" />
+      <circle cx="48" cy="40" r="9" fill="white" />
+      <circle cx="33" cy="40" r="5" fill="#2D2D2D" />
+      <circle cx="47" cy="40" r="5" fill="#2D2D2D" />
+      <circle cx="34.5" cy="38.5" r="1.8" fill="white" />
+      <circle cx="48.5" cy="38.5" r="1.8" fill="white" />
+      <polygon points="40,44 37,48 43,48" fill="#E8734A" />
+      <polygon points="22,30 26,38 18,36" fill="#D4943D" />
+      <polygon points="58,30 54,38 62,36" fill="#D4943D" />
+      <ellipse cx="33" cy="72" rx="5" ry="3" fill="#E8734A" />
+      <ellipse cx="47" cy="72" rx="5" ry="3" fill="#E8734A" />
+    </svg>
+  );
+}

components/shared/ProfileModal.tsx

@@ -0,0 +1,214 @@
+"use client";
+
+import React from "react";
+import { useRouter } from "next/navigation";
+import { motion, AnimatePresence } from "framer-motion";
+import useUserStore from "@/stores/useUserStore";
+
+interface ProfileModalProps {
+  onClose: () => void;
+}
+
+export default function ProfileModal({ onClose }: ProfileModalProps) {
+  const router = useRouter();
+  const {
+    name,
+    title,
+    level,
+    xp,
+    longestStreak,
+    coursesCompleted,
+    preferences,
+    setPreferences,
+    logout,
+  } = useUserStore();
+
+  const { soundOn, darkGlass, difficulty } = preferences;
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        className="fixed inset-0 z-[100] flex items-center justify-center"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+      >
+        {/* Backdrop */}
+        <motion.div
+          className="absolute inset-0 bg-black/30"
+          onClick={onClose}
+          initial={{ opacity: 0, backdropFilter: "blur(0px)" }}
+          animate={{ opacity: 1, backdropFilter: "blur(6px)" }}
+          exit={{ opacity: 0, backdropFilter: "blur(0px)" }}
+          transition={{ duration: 0.6, ease: "easeOut" }}
+        />
+
+        {/* Modal card */}
+        <motion.div
+          className="relative z-10 w-full max-w-sm mx-4"
+          initial={{ scale: 0.9, opacity: 0, y: 30 }}
+          animate={{ scale: 1, opacity: 1, y: 0 }}
+          exit={{ scale: 0.9, opacity: 0, y: 30 }}
+          transition={{ type: "spring", damping: 25, stiffness: 300 }}
+        >
+          {/* Floating avatar – overlaps top edge */}
+          <div className="flex justify-center -mb-12 relative z-20">
+            <div className="relative">
+              <div className="h-24 w-24 rounded-full bg-[#e8ddd0] border-4 border-white shadow-lg flex items-center justify-center overflow-hidden">
+                <OwlAvatar />
+              </div>
+              {/* Edit badge */}
+              <button className="absolute bottom-0 right-0 h-7 w-7 rounded-full bg-white shadow-md border border-brand-gray-100 flex items-center justify-center hover:bg-brand-gray-50 transition">
+                <svg viewBox="0 0 16 16" className="h-3.5 w-3.5 text-brand-gray-500" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M11.5 1.5l3 3L5 14H2v-3L11.5 1.5z" />
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          {/* Glass card body */}
+          <div className="rounded-2xl border border-white/40 bg-white/80 backdrop-blur-xl shadow-2xl ring-1 ring-white/20 overflow-hidden pt-14 pb-5 px-6">
+            {/* Name & title */}
+            <div className="text-center mb-5">
+              <h2 className="font-heading text-xl font-extrabold text-brand-gray-700">
+                Level {level} {title}
+              </h2>
+              <p className="text-sm text-brand-gray-400 mt-0.5">
+                {name}
+              </p>
+            </div>
+
+            {/* ── Stats Grid ── */}
+            <div className="mb-5">
+              <h3 className="font-heading font-bold text-brand-gray-600 text-sm mb-2.5">
+                Stats Grid
+              </h3>
+              <div className="grid grid-cols-3 gap-2.5">
+                <StatBox label="Total XP Earned" value={xp.toLocaleString()} />
+                <StatBox label="Longest Streak" value={`${longestStreak} Days`} />
+                <StatBox label="Courses Completed" value={String(coursesCompleted)} />
+              </div>
+            </div>
+
+            {/* ── Preferences ── */}
+            <div className="mb-4">
+              <h3 className="font-heading font-bold text-brand-gray-600 text-sm mb-3">
+                Preferences
+              </h3>
+              <div className="space-y-3.5">
+                {/* Sound Effects */}
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-brand-gray-600">Sound Effects</span>
+                  <Toggle on={soundOn} onChange={() => setPreferences({ soundOn: !soundOn })} />
+                </div>
+
+                {/* Dark/Light Theme */}
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-brand-gray-600">Dark/Light Theme</span>
+                  <div className="flex items-center gap-2">
+                    <span className="text-xs text-brand-gray-400 font-medium">Dark/Glass</span>
+                    <Toggle on={darkGlass} onChange={() => setPreferences({ darkGlass: !darkGlass })} />
+                  </div>
+                </div>
+
+                {/* Difficulty Scaling */}
+                <div className="flex items-center justify-between gap-4">
+                  <span className="text-sm text-brand-gray-600 shrink-0">Difficulty Scaling</span>
+                  <input
+                    type="range"
+                    min="0"
+                    max="100"
+                    value={difficulty}
+                    onChange={(e) => setPreferences({ difficulty: Number(e.target.value) })}
+                    className="w-full h-1.5 rounded-full appearance-none cursor-pointer accent-brand-teal bg-brand-gray-200"
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* ── Log Out ── */}
+            <div className="pt-2 border-t border-brand-gray-100">
+              <button
+                onClick={() => { logout(); onClose(); router.push("/login"); }}
+                className="w-full text-center text-sm text-brand-teal font-semibold hover:text-brand-teal/70 transition py-2"
+              >
+                Log Out
+              </button>
+            </div>
+          </div>
+        </motion.div>
+      </motion.div>
+    </AnimatePresence>
+  );
+}
+
+/* ── Stat box ── */
+
+function StatBox({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="bg-gradient-to-b from-white/60 to-brand-gray-50 border border-brand-gray-100 rounded-xl px-2 py-3 text-center">
+      <p className="text-[10px] text-brand-gray-400 leading-tight mb-1">{label}</p>
+      <p className="font-heading font-extrabold text-brand-gray-700 text-sm">
+        {value}
+      </p>
+    </div>
+  );
+}
+
+/* ── Toggle switch ── */
+
+function Toggle({ on, onChange }: { on: boolean; onChange: () => void }) {
+  return (
+    <button
+      onClick={onChange}
+      className={`relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors duration-200 ${
+        on ? "bg-brand-teal" : "bg-brand-gray-200"
+      }`}
+    >
+      <span
+        className={`inline-block h-4.5 w-4.5 rounded-full bg-white shadow-sm transform transition-transform duration-200 ${
+          on ? "translate-x-5.5" : "translate-x-1"
+        }`}
+        style={{
+          width: "18px",
+          height: "18px",
+          transform: on ? "translateX(22px)" : "translateX(3px)",
+        }}
+      />
+    </button>
+  );
+}
+
+/* ── Owl avatar (large) ── */
+
+function OwlAvatar() {
+  return (
+    <svg viewBox="0 0 96 96" className="h-20 w-20" fill="none">
+      {/* Body */}
+      <ellipse cx="48" cy="56" rx="22" ry="26" fill="#C4A882" />
+      <ellipse cx="48" cy="53" rx="17" ry="20" fill="#E8D5B7" />
+      {/* Eyes bg */}
+      <circle cx="39" cy="44" r="8" fill="white" />
+      <circle cx="57" cy="44" r="8" fill="white" />
+      {/* Eye rims (glasses) */}
+      <circle cx="39" cy="44" r="8.5" fill="none" stroke="#8B7355" strokeWidth="1.8" />
+      <circle cx="57" cy="44" r="8.5" fill="none" stroke="#8B7355" strokeWidth="1.8" />
+      <line x1="47.5" y1="44" x2="48.5" y2="44" stroke="#8B7355" strokeWidth="1.8" />
+      {/* Pupils */}
+      <circle cx="40" cy="44" r="4" fill="#333" />
+      <circle cx="56" cy="44" r="4" fill="#333" />
+      {/* Highlights */}
+      <circle cx="41.5" cy="42.5" r="1.5" fill="white" />
+      <circle cx="57.5" cy="42.5" r="1.5" fill="white" />
+      {/* Beak */}
+      <polygon points="48,50 45,54 51,54" fill="#E8734A" />
+      {/* Ear tufts */}
+      <polygon points="35,32 38,24 42,34" fill="#C4A882" />
+      <polygon points="61,32 58,24 54,34" fill="#C4A882" />
+      {/* Feet */}
+      <ellipse cx="42" cy="80" rx="6" ry="2.5" fill="#E8734A" opacity="0.7" />
+      <ellipse cx="54" cy="80" rx="6" ry="2.5" fill="#E8734A" opacity="0.7" />
+    </svg>
+  );
+}
+

components/shared/TopStatsBar.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+import React, { useState } from "react";
+import Link from "next/link";
+import ProfileModal from "./ProfileModal";
+import useUserStore from "@/stores/useUserStore";
+
+interface TopStatsBarProps {
+  backHref?: string;
+  pageTitle?: string;
+}
+
+export default function TopStatsBar({ backHref, pageTitle }: TopStatsBarProps = {}) {
+  const [profileOpen, setProfileOpen] = useState(false);
+  const { streak, gems, level } = useUserStore();
+
+  /* Compute rank label from level */
+  const rankLabel =
+    level >= 15 ? "Diamond Rank" :
+    level >= 10 ? "Platinum Rank" :
+    level >= 7  ? "Gold Rank" :
+    level >= 4  ? "Silver Rank" :
+    "Bronze Rank";
+
+  return (
+    <>
+      <nav className="sticky top-0 z-50 flex items-center justify-between px-4 md:px-8 py-3 bg-white/70 backdrop-blur-lg border-b border-white/40 shadow-sm">
+        {/* Left: back arrow or avatar + logo */}
+        <div className="flex items-center gap-3 relative">
+          {backHref ? (
+            /* Back arrow mode (e.g. store, map) */
+            <>
+              <Link
+                href={backHref}
+                className="h-10 w-10 rounded-full flex items-center justify-center hover:bg-brand-gray-50 transition text-brand-gray-600"
+              >
+                <svg viewBox="0 0 24 24" className="h-6 w-6" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M15 18l-6-6 6-6" />
+                </svg>
+              </Link>
+              <OwlLogoSmall />
+              <span className="font-heading text-xl font-extrabold text-brand-gray-700">
+                {pageTitle}
+              </span>
+            </>
+          ) : (
+            /* Default avatar + logo mode */
+            <>
+              <button
+                onClick={() => setProfileOpen(true)}
+                className="relative h-11 w-11 rounded-full overflow-hidden border-2 border-brand-teal shadow-md hover:shadow-lg transition"
+              >
+                <MascotAvatar />
+              </button>
+
+              <Link href="/home" className="flex items-center gap-2">
+                <span className="font-heading text-xl font-extrabold text-brand-teal hidden sm:inline">
+                  Learn8
+                </span>
+              </Link>
+            </>
+          )}
+        </div>
+
+        {/* Right: stats */}
+        <div className="flex items-center gap-4 md:gap-6">
+          {/* Streak */}
+          <div className="flex items-center gap-1.5">
+            <span className="text-lg">🔥</span>
+            <span className="font-heading font-bold text-brand-gray-700 text-sm md:text-base">
+              {streak} Days
+            </span>
+          </div>
+
+          {/* Gems */}
+          <Link
+            href="/store"
+            className="flex items-center gap-1.5 hover:opacity-80 transition"
+          >
+            <span className="text-lg">💎</span>
+            <span className="font-heading font-bold text-brand-gray-700 text-sm md:text-base">
+              {gems.toLocaleString()}
+            </span>
+          </Link>
+
+          {/* Rank badge */}
+          <div className="flex items-center gap-1.5">
+            <div className="h-8 w-8 rounded-full bg-gradient-to-br from-yellow-300 to-yellow-500 flex items-center justify-center shadow-md">
+              <span className="font-heading font-extrabold text-white text-xs">
+                {level}
+              </span>
+            </div>
+            <span className="font-heading font-bold text-brand-gray-700 text-sm md:text-base hidden md:inline">
+              {rankLabel}
+            </span>
+          </div>
+        </div>
+      </nav>
+
+      {/* Profile modal */}
+      {profileOpen && (
+        <ProfileModal onClose={() => setProfileOpen(false)} />
+      )}
+    </>
+  );
+}
+
+/* ── Small mascot avatar ── */
+function MascotAvatar() {
+  return (
+    <svg viewBox="0 0 64 64" className="h-full w-full" fill="none">
+      <rect width="64" height="64" rx="32" fill="#E8F5F4" />
+      <ellipse cx="32" cy="36" rx="16" ry="18" fill="#C4A882" />
+      <ellipse cx="32" cy="34" rx="12" ry="14" fill="#E8D5B7" />
+      <circle cx="26" cy="29" r="5" fill="white" />
+      <circle cx="38" cy="29" r="5" fill="white" />
+      <circle cx="26" cy="29" r="5.5" fill="none" stroke="#6B6B6B" strokeWidth="1.2" />
+      <circle cx="38" cy="29" r="5.5" fill="none" stroke="#6B6B6B" strokeWidth="1.2" />
+      <line x1="31" y1="29" x2="33" y2="29" stroke="#6B6B6B" strokeWidth="1.2" />
+      <circle cx="27" cy="29" r="2.5" fill="#333" />
+      <circle cx="37" cy="29" r="2.5" fill="#333" />
+      <circle cx="28" cy="28" r="0.8" fill="white" />
+      <circle cx="38" cy="28" r="0.8" fill="white" />
+      <polygon points="32,33 30,36 34,36" fill="#E8734A" />
+      <polygon points="25,22 28,17 30,24" fill="#C4A882" />
+      <polygon points="39,22 36,17 34,24" fill="#C4A882" />
+    </svg>
+  );
+}
+
+/* ── Small owl logo icon ── */
+function OwlLogoSmall() {
+  return (
+    <svg viewBox="0 0 32 32" className="h-8 w-8" fill="none">
+      <circle cx="16" cy="16" r="15" fill="#7AC7C4" opacity="0.2" />
+      <ellipse cx="16" cy="18" rx="9" ry="10" fill="#C4A882" />
+      <ellipse cx="16" cy="17" rx="7" ry="8" fill="#E8D5B7" />
+      <circle cx="13" cy="14" r="3" fill="white" />
+      <circle cx="19" cy="14" r="3" fill="white" />
+      <circle cx="13.5" cy="14" r="1.5" fill="#333" />
+      <circle cx="18.5" cy="14" r="1.5" fill="#333" />
+      <polygon points="16,16 14.5,18 17.5,18" fill="#E8734A" />
+    </svg>
+  );
+}

components/ui/DeepGlassCard.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+interface DeepGlassCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export default function DeepGlassCard({
+  children,
+  className = "",
+  ...props
+}: DeepGlassCardProps) {
+  return (
+    <div
+      className={`relative rounded-3xl border border-white/40 bg-white/60 backdrop-blur-xl shadow-2xl ring-1 ring-white/20 ${className}`}
+      {...props}
+    >
+      {/* Inner highlight edge */}
+      <div className="pointer-events-none absolute inset-0 rounded-3xl bg-gradient-to-br from-white/30 via-transparent to-transparent" />
+      <div className="relative z-10">{children}</div>
+    </div>
+  );
+}

components/ui/GameButton.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import React from "react";
+
+interface GameButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: "primary" | "secondary";
+  pulse?: boolean;
+}
+
+export default function GameButton({
+  children,
+  variant = "primary",
+  pulse = false,
+  className = "",
+  ...props
+}: GameButtonProps) {
+  const base =
+    "relative font-heading font-bold uppercase tracking-wider rounded-xl px-8 py-3.5 text-white shadow-lg transition-all duration-200 active:translate-y-0.5 active:shadow-md disabled:opacity-50 disabled:pointer-events-none";
+
+  const variants = {
+    primary:
+      "bg-gradient-to-b from-[#58CC02] to-[#46a302] hover:from-[#62d406] hover:to-[#4fb803] border-b-4 border-[#3a8a02]",
+    secondary:
+      "bg-gradient-to-b from-[#7AC7C4] to-[#5fb3af] hover:from-[#88d1ce] hover:to-[#6bbdb9] border-b-4 border-[#4a9e9a]",
+  };
+
+  return (
+    <button
+      className={`${base} ${variants[variant]} ${pulse ? "animate-pulse-subtle" : ""} ${className}`}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

components/ui/MascotHint.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+
+interface MascotHintProps {
+  message: string;
+}
+
+export default function MascotHint({ message }: MascotHintProps) {
+  return (
+    <div className="flex items-start gap-3">
+      {/* Small owl avatar */}
+      <div className="shrink-0">
+        <svg
+          viewBox="0 0 64 64"
+          className="h-12 w-12"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <ellipse cx="32" cy="36" rx="18" ry="20" fill="#C4A882" />
+          <ellipse cx="32" cy="34" rx="14" ry="16" fill="#E8D5B7" />
+          <circle cx="25" cy="28" r="6" fill="white" />
+          <circle cx="39" cy="28" r="6" fill="white" />
+          <circle cx="25" cy="28" r="6.5" fill="none" stroke="#6B6B6B" strokeWidth="1.5" />
+          <circle cx="39" cy="28" r="6.5" fill="none" stroke="#6B6B6B" strokeWidth="1.5" />
+          <line x1="31.5" y1="28" x2="32.5" y2="28" stroke="#6B6B6B" strokeWidth="1.5" />
+          <circle cx="26" cy="28" r="3" fill="#333" />
+          <circle cx="38" cy="28" r="3" fill="#333" />
+          <circle cx="27" cy="27" r="1" fill="white" />
+          <circle cx="39" cy="27" r="1" fill="white" />
+          <polygon points="32,32 29,36 35,36" fill="#E8734A" />
+          <polygon points="24,20 28,14 30,22" fill="#C4A882" />
+          <polygon points="40,20 36,14 34,22" fill="#C4A882" />
+        </svg>
+      </div>
+      {/* Speech bubble */}
+      <div className="relative rounded-2xl bg-white/90 backdrop-blur-sm px-5 py-3 shadow-md border border-white/50">
+        <div className="absolute -left-2 top-4 h-3 w-3 rotate-45 bg-white/90 border-l border-b border-white/50" />
+        <p className="text-sm text-brand-gray-600 font-medium relative z-10">
+          {message}
+        </p>
+      </div>
+    </div>
+  );
+}

components/ui/TopProgressBar.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+interface TopProgressBarProps {
+  progress: number; // 0-100
+  className?: string;
+}
+
+export default function TopProgressBar({
+  progress,
+  className = "",
+}: TopProgressBarProps) {
+  return (
+    <div
+      className={`w-full h-3 rounded-full bg-brand-gray-200 overflow-hidden ${className}`}
+    >
+      <div
+        className="h-full rounded-full bg-gradient-to-r from-brand-teal to-brand-green transition-all duration-500 ease-out"
+        style={{ width: `${Math.min(100, Math.max(0, progress))}%` }}
+      />
+    </div>
+  );
+}

data/mock_calculus.ts

@@ -0,0 +1,383 @@
+export const mockCalculusUnit = {
+    unitId: "calc-u1",
+    unitTitle: "Limits & Derivatives",
+    nodes: [
+        {
+            id: "calc-n1",
+            title: "Concept of Limits",
+            description: "Classify scenarios where limits exist or fail.",
+            type: "concept",
+            status: "available",
+            stages: [
+                {
+                    stageId: "calc-s1",
+                    topic: "Limit Existence",
+                    module: "Instruction",
+                    component: "TaxonomyMatrix",
+                    skin: "Code",
+                    config: {
+                        data: {
+                            buckets: ["Limit Exists", "Limit Does Not Exist"],
+                            items: [
+                                { id: "limit1", content: "Left limit = 5, Right = 5" },
+                                { id: "limit2", content: "Left limit = 3, Right = -3 (Jump)" },
+                                { id: "limit3", content: "Approaches infinity (Asymptote)" },
+                                { id: "limit4", content: "Continuous polynomial" }
+                            ]
+                        },
+                        initialState: { assignments: {} }
+                    },
+                    validation: { type: "exact", condition: {} },
+                    feedback: { 
+                        success: "Excellent classification! Limits require agreement from both sides.", 
+                        error: "Check the definitions of jumps and asymptotes.",
+                        hint: "If left and right don't match, it doesn't exist."
+                    }
+                }
+            ]
+        },
+        {
+            id: "calc-n2",
+            title: "Derivative Rules",
+            description: "Match base functions to their derivatives.",
+            type: "exercise",
+            status: "locked",
+            stages: [
+                {
+                    stageId: "calc-s2",
+                    topic: "Basic Differentiation",
+                    module: "Practice",
+                    component: "PatternMatcher",
+                    skin: "Scientific",
+                    config: {
+                        data: {
+                            pairs: [
+                                { id: "diff1", left: "f(x) = x³", right: "f'(x) = 3x²" },
+                                { id: "diff2", left: "f(x) = sin(x)", right: "f'(x) = cos(x)" },
+                                { id: "diff3", left: "f(x) = eˣ", right: "f'(x) = eˣ" },
+                                { id: "diff4", left: "f(x) = ln(x)", right: "f'(x) = 1/x" }
+                            ]
+                        },
+                        initialState: {}
+                    },
+                    validation: { type: "exact", condition: {} },
+                    feedback: { 
+                        success: "All matched! You master the basic power and transcendental rules.", 
+                        error: "Review your trig and exponential derivatives.",
+                        hint: "The derivative of eˣ is special!"
+                    }
+                }
+            ]
+        },
+        {
+            id: "calc-n3",
+            title: "Squeeze Theorem",
+            description: "Apply the squeeze theorem to find limits.",
+            type: "concept",
+            status: "locked",
+            stages: [
+                {
+                    stageId: "calc-s3",
+                    topic: "Squeeze Theorem Application",
+                    module: "Instruction",
+                    component: "LogicChain",
+                    skin: "Code",
+                    config: {
+                        data: { nodes: ["Find lower bound g(x)", "Find upper bound h(x)", "Show g(x) ≤ f(x) ≤ h(x)", "Evaluate lim g(x) = lim h(x)", "Conclude lim f(x)"] },
+                        initialState: {}
+                    },
+                    validation: { type: "exact", condition: {} },
+                    feedback: { success: "Perfect squeeze theorem steps!", error: "Review the theorem conditions.", hint: "Both bounds must converge to the same value." }
+                }
+            ]
+        },
+        {
+            id: "calc-n4",
+            title: "Continuity",
+            description: "Determine where functions are continuous.",
+            type: "exercise",
+            status: "locked",
+            stages: [
+                {
+                    stageId: "calc-s4",
+                    topic: "Continuity Conditions",
+                    module: "Practice",
+                    component: "TaxonomyMatrix",
+                    skin: "Code",
+                    config: {
+                        data: {
+                            buckets: ["Continuous", "Discontinuous"],
+                            items: [
+                                { id: "cont1", content: "f(a) is defined, lim = f(a)" },
+                                { id: "cont2", content: "Jump at x = 2" },
+                                { id: "cont3", content: "Removable hole at x = 0" },
+                                { id: "cont4", content: "Polynomial on all reals" }
+                            ]
+                        },
+                        initialState: { assignments: {} }
+                    },
+                    validation: { type: "exact", condition: {} },
+                    feedback: { success: "Great continuity analysis!", error: "Check the three conditions.", hint: "All three conditions must hold." }
+                }
+            ]
+        },
+        {
+            id: "calc-n5",
+            title: "Power Rule",
+            description: "Master the power rule for differentiation.",
+            type: "concept",
+            status: "locked",
+            stages: [
+                {
+                    stageId: "calc-s5",
+                    topic: "Power Rule Practice",
+                    module: "Instruction",
+                    component: "LogicChain",
+                    skin: "Code",
+                    config: {
+                        data: { nodes: ["f(x) = xⁿ", "Bring down exponent", "Multiply by coefficient", "Reduce exponent by 1", "f'(x) = nxⁿ⁻¹"] },
+                        initialState: {}
+                    },
+                    validation: { type: "exact", condition: {} },
+                    feedback: { success: "Power rule mastered!", error: "Review the power rule steps.", hint: "d/dx[xⁿ] = nxⁿ⁻¹" }
+                }
+            ]
+        },
+        {
+            id: "calc-n6",
+            title: "Product Rule",
+            description: "Apply the product rule to differentiate.",
+            type: "exercise",
+            status: "locked",
+            stages: [
+                {
+                    stageId: "calc-s6",
+                    topic: "Product Rule",
+                    module: "Practice",
+                    component: "LogicChain",
+                    skin: "Scientific",
+                    config: {
+                        data: { nodes: ["Identify u and v", "Find u'", "Find v'", "Apply u'v + uv'", "Simplify"] },
+                        initialState: {}
+                    },
+                    validation: { type: "exact", condition: {} },
+                    feedback: { success: "Product rule applied correctly!", error: "Remember: (uv)' = u'v + uv'", hint: "Don't forget both terms." }
+                }
+            ]
+        },
+        {
+            id: "calc-n7",
+            title: "Quotient Rule",
+            description: "Differentiate rational functions.",
+            type: "concept",
+            status: "locked",
+            stages: [
+                {
+                    stageId: "calc-s7",
+                    topic: "Quotient Rule",
+                    module: "Instruction",
+                    component: "LogicChain",
+                    skin: "Code",
+                    config: {
+                        data: { nodes: ["Identify numerator u", "Identify denominator v", "Compute u'v - uv'", "Divide by v²", "Simplify"] },
+                        initialState: {}
+                    },
+                    validation: { type: "exact", condition: {} },
+                    feedback: { success: "Quotient rule nailed!", error: "Review: (u/v)' = (u'v - uv')/v²", hint: "Lo dHi minus Hi dLo over Lo Lo." }
+                }
+            ]
+        },
+        {
+            id: "calc-n8",
+            title: "Chain Rule",
+            description: "Differentiate composite functions.",
+            type: "exercise",
+            status: "locked",
+            stages: [
+                {
+                    stageId: "calc-s8",
+                    topic: "Chain Rule",
+                    module: "Practice",
+                    component: "LogicChain",
+                    skin: "Scientific",
+                    config: {
+                        data: { nodes: ["Identify outer function f", "Identify inner function g", "Differentiate f'(g(x))", "Multiply by g'(x)", "Final answer"] },
+                        initialState: {}
+                    },
+                    validation: { type: "exact", condition: {} },
+                    feedback: { success: "Chain rule mastered!", error: "Don't forget the inner derivative!", hint: "d/dx[f(g(x))] = f'(g(x))·g'(x)" }
+                }
+            ]
+        },
+        {
+            id: "calc-n9",
+            title: "Implicit Differentiation",
+            description: "Differentiate implicitly defined functions.",
+            type: "concept",
+            status: "locked",
+            stages: [
+                {
+                    stageId: "calc-s9",
+                    topic: "Implicit Differentiation Steps",
+                    module: "Instruction",
+                    component: "LogicChain",
+                    skin: "Code",
+                    config: {
+                        data: { nodes: ["Differentiate both sides", "Apply chain rule to y terms", "Collect dy/dx terms", "Factor out dy/dx", "Solve for dy/dx"] },
+                        initialState: {}
+                    },
+                    validation: { type: "exact", condition: {} },
+                    feedback: { success: "Implicit differentiation complete!", error: "Remember to treat y as a function of x.", hint: "Every y term needs dy/dx." }
+                }
+            ]
+        },
+        {
+            id: "calc-n10",
+            title: "Related Rates",
+            description: "Solve related rates problems.",
+            type: "exercise",
+            status: "locked",
+            stages: [
+                {
+                    stageId: "calc-s10",
+                    topic: "Related Rates Strategy",
+                    module: "Practice",
+                    component: "LogicChain",
+                    skin: "Scientific",
+                    config: {
+                        data: { nodes: ["Draw diagram", "Write equation relating variables", "Differentiate with respect to t", "Substitute known values", "Solve for unknown rate"] },
+                        initialState: {}
+                    },
+                    validation: { type: "exact", condition: {} },
+                    feedback: { success: "Related rates solved!", error: "Make sure to differentiate with respect to time.", hint: "Everything changes with time." }
+                }
+            ]
+        },
+        {
+            id: "calc-n11",
+            title: "Trig Derivatives",
+            description: "Differentiate trigonometric functions.",
+            type: "concept",
+            status: "locked",
+            stages: [
+                {
+                    stageId: "calc-s11",
+                    topic: "Trig Function Derivatives",
+                    module: "Instruction",
+                    component: "TaxonomyMatrix",
+                    skin: "Code",
+                    config: {
+                        data: {
+                            buckets: ["Positive Cosine Family", "Negative Sine Family"],
+                            items: [
+                                { id: "trig1", content: "d/dx[sin x] = cos x" },
+                                { id: "trig2", content: "d/dx[cos x] = -sin x" },
+                                { id: "trig3", content: "d/dx[tan x] = sec²x" },
+                                { id: "trig4", content: "d/dx[cot x] = -csc²x" }
+                            ]
+                        },
+                        initialState: { assignments: {} }
+                    },
+                    validation: { type: "exact", condition: {} },
+                    feedback: { success: "Trig derivatives classified!", error: "Review co-function patterns.", hint: "Co-functions have negative derivatives." }
+                }
+            ]
+        },
+        {
+            id: "calc-n12",
+            title: "Higher-Order Derivatives",
+            description: "Compute second and third derivatives.",
+            type: "exercise",
+            status: "locked",
+            stages: [
+                {
+                    stageId: "calc-s12",
+                    topic: "Higher-Order Derivatives",
+                    module: "Practice",
+                    component: "LogicChain",
+                    skin: "Code",
+                    config: {
+                        data: { nodes: ["f(x)", "f'(x) — First derivative", "f''(x) — Second derivative", "f'''(x) — Third derivative"] },
+                        initialState: {}
+                    },
+                    validation: { type: "exact", condition: {} },
+                    feedback: { success: "Higher-order derivatives done!", error: "Just keep differentiating!", hint: "Differentiate the previous result." }
+                }
+            ]
+        },
+        {
+            id: "calc-n13",
+            title: "L'Hôpital's Rule",
+            description: "Evaluate indeterminate limits.",
+            type: "concept",
+            status: "locked",
+            stages: [
+                {
+                    stageId: "calc-s13",
+                    topic: "L'Hôpital's Rule",
+                    module: "Instruction",
+                    component: "LogicChain",
+                    skin: "Scientific",
+                    config: {
+                        data: { nodes: ["Check 0/0 or ∞/∞ form", "Differentiate numerator", "Differentiate denominator", "Re-evaluate limit", "Repeat if needed"] },
+                        initialState: {}
+                    },
+                    validation: { type: "exact", condition: {} },
+                    feedback: { success: "L'Hôpital's applied correctly!", error: "Only works for indeterminate forms.", hint: "Must be 0/0 or ∞/∞ first." }
+                }
+            ]
+        },
+        {
+            id: "calc-n14",
+            title: "Mean Value Theorem",
+            description: "Understand and apply MVT.",
+            type: "exercise",
+            status: "locked",
+            stages: [
+                {
+                    stageId: "calc-s14",
+                    topic: "MVT Application",
+                    module: "Practice",
+                    component: "LogicChain",
+                    skin: "Code",
+                    config: {
+                        data: { nodes: ["Verify continuity on [a,b]", "Verify differentiability on (a,b)", "Compute [f(b)-f(a)]/(b-a)", "Set f'(c) equal to slope", "Solve for c"] },
+                        initialState: {}
+                    },
+                    validation: { type: "exact", condition: {} },
+                    feedback: { success: "MVT applied perfectly!", error: "Check the theorem conditions.", hint: "There exists a c where the tangent equals the secant." }
+                }
+            ]
+        },
+        {
+            id: "calc-n15",
+            title: "Final Challenge",
+            description: "Comprehensive limits & derivatives assessment.",
+            type: "challenge",
+            status: "locked",
+            stages: [
+                {
+                    stageId: "calc-s15",
+                    topic: "Comprehensive Review",
+                    module: "Assessment",
+                    component: "TaxonomyMatrix",
+                    skin: "Code",
+                    config: {
+                        data: {
+                            buckets: ["Differentiation Technique", "Limit Technique"],
+                            items: [
+                                { id: "final1", content: "Chain Rule" },
+                                { id: "final2", content: "L'Hôpital's Rule" },
+                                { id: "final3", content: "Product Rule" },
+                                { id: "final4", content: "Squeeze Theorem" }
+                            ]
+                        },
+                        initialState: { assignments: {} }
+                    },
+                    validation: { type: "exact", condition: {} },
+                    feedback: { success: "Congratulations! Calculus mastered!", error: "Review the course material.", hint: "Classify each technique by its primary use." }
+                }
+            ]
+        }
+    ]
+};

data/mock_medicine.ts

@@ -0,0 +1,416 @@
+export const mockMedicineUnit = {
+    unitId: "med-u1",
+    unitTitle: "The Heart & Blood Flow",
+    nodes: [
+        {
+            id: "med-n1",
+            title: "Heart Chambers (心臟結構)",
+            description: "Identify the spatial anatomy of the heart.",
+            type: "concept",
+            status: "available",
+            stages: [
+                {
+                    stageId: "med-s1",
+                    topic: "Identify the Left Ventricle",
+                    module: "Instruction",
+                    component: "SpatialAnatomy",
+                    skin: "Scientific",
+                    config: {
+                        data: {
+                            model: "heart-cross-section",
+                            labels: [
+                                { id: "ra", label: "Right Atrium" },
+                                { id: "rv", label: "Right Ventricle" },
+                                { id: "la", label: "Left Atrium" },
+                                { id: "lv", label: "Left Ventricle" }
+                            ]
+                        },
+                        initialState: {}
+                    },
+                    validation: { type: "exact", condition: { target: "lv" } },
+                    feedback: { 
+                        success: "Correct! The Left Ventricle pumps blood to the entire body.", 
+                        error: "Incorrect. Hint: Look at the thicker muscular wall at the bottom right of the diagram.",
+                        hint: "Where is the thickest muscle needed?"
+                    }
+                }
+            ]
+        },
+        {
+            id: "med-n2",
+            title: "Circulation Path (血液循環)",
+            description: "Arrange the flow of deoxygenated blood.",
+            type: "exercise",
+            status: "locked",
+            stages: [
+                {
+                    stageId: "med-s2",
+                    topic: "Pulmonary Circulation",
+                    module: "Practice",
+                    component: "LogicChain",
+                    skin: "Classic",
+                    config: {
+                        data: {
+                            nodes: [
+                                "Superior Vena Cava", 
+                                "Right Atrium", 
+                                "Right Ventricle", 
+                                "Pulmonary Artery",
+                                "Lungs"
+                            ]
+                        },
+                        initialState: {}
+                    },
+                    validation: { type: "exact", condition: {} },
+                    feedback: { 
+                        success: "Perfect Sequence! You understand the path to the lungs.", 
+                        error: "Not quite. Remember blood enters the atrium before the ventricle.",
+                        hint: "Veins -> Atrium -> Ventricle -> Artery"
+                    }
+                }
+            ]
+        },
+        {
+            id: "med-n3",
+            title: "Blood Pressure (血壓)",
+            description: "Understand systolic and diastolic pressure.",
+            type: "concept",
+            status: "locked",
+            stages: [
+                {
+                    stageId: "med-s3",
+                    topic: "Blood Pressure Basics",
+                    module: "Instruction",
+                    component: "TaxonomyMatrix",
+                    skin: "Scientific",
+                    config: {
+                        data: {
+                            buckets: ["Systolic", "Diastolic"],
+                            items: [
+                                { id: "bp1", content: "Heart contracts" },
+                                { id: "bp2", content: "Heart relaxes" },
+                                { id: "bp3", content: "Higher number" },
+                                { id: "bp4", content: "Lower number" }
+                            ]
+                        },
+                        initialState: { assignments: {} }
+                    },
+                    validation: { type: "exact", condition: {} },
+                    feedback: { success: "Great job!", error: "Review the cardiac cycle phases.", hint: "Systolic = contraction" }
+                }
+            ]
+        },
+        {
+            id: "med-n4",
+            title: "Heart Valves (心臟瓣膜)",
+            description: "Learn the four valves of the heart.",
+            type: "concept",
+            status: "locked",
+            stages: [
+                {
+                    stageId: "med-s4",
+                    topic: "Heart Valve Identification",
+                    module: "Instruction",
+                    component: "SpatialAnatomy",
+                    skin: "Scientific",
+                    config: {
+                        data: {
+                            model: "heart-valves",
+                            labels: [
+                                { id: "tv", label: "Tricuspid Valve" },
+                                { id: "mv", label: "Mitral Valve" },
+                                { id: "pv", label: "Pulmonary Valve" },
+                                { id: "av", label: "Aortic Valve" }
+                            ]
+                        },
+                        initialState: {}
+                    },
+                    validation: { type: "exact", condition: { target: "mv" } },
+                    feedback: { success: "Correct! The Mitral Valve is between the left atrium and ventricle.", error: "Try again.", hint: "Also called the bicuspid valve." }
+                }
+            ]
+        },
+        {
+            id: "med-n5",
+            title: "Cardiac Output (心輸出量)",
+            description: "Calculate and understand cardiac output.",
+            type: "exercise",
+            status: "locked",
+            stages: [
+                {
+                    stageId: "med-s5",
+                    topic: "Cardiac Output Formula",
+                    module: "Practice",
+                    component: "LogicChain",
+                    skin: "Scientific",
+                    config: {
+                        data: { nodes: ["Heart Rate", "×", "Stroke Volume", "=", "Cardiac Output"] },
+                        initialState: {}
+                    },
+                    validation: { type: "exact", condition: {} },
+                    feedback: { success: "CO = HR × SV!", error: "Review the formula.", hint: "CO = HR × SV" }
+                }
+            ]
+        },
+        {
+            id: "med-n6",
+            title: "ECG Basics (心電圖基礎)",
+            description: "Identify basic ECG waveforms.",
+            type: "concept",
+            status: "locked",
+            stages: [
+                {
+                    stageId: "med-s6",
+                    topic: "ECG Waveforms",
+                    module: "Instruction",
+                    component: "LogicChain",
+                    skin: "Scientific",
+                    config: {
+                        data: { nodes: ["P Wave", "QRS Complex", "T Wave", "U Wave"] },
+                        initialState: {}
+                    },
+                    validation: { type: "exact", condition: {} },
+                    feedback: { success: "Correct ECG sequence!", error: "Review ECG basics.", hint: "P comes before QRS" }
+                }
+            ]
+        },
+        {
+            id: "med-n7",
+            title: "Coronary Arteries (冠狀動脈)",
+            description: "Map the coronary artery system.",
+            type: "concept",
+            status: "locked",
+            stages: [
+                {
+                    stageId: "med-s7",
+                    topic: "Coronary Anatomy",
+                    module: "Instruction",
+                    component: "SpatialAnatomy",
+                    skin: "Scientific",
+                    config: {
+                        data: {
+                            model: "coronary-arteries",
+                            labels: [
+                                { id: "lad", label: "Left Anterior Descending" },
+                                { id: "lcx", label: "Left Circumflex" },
+                                { id: "rca", label: "Right Coronary Artery" },
+                                { id: "lm", label: "Left Main" }
+                            ]
+                        },
+                        initialState: {}
+                    },
+                    validation: { type: "exact", condition: { target: "lad" } },
+                    feedback: { success: "The LAD supplies the anterior wall!", error: "Try again.", hint: "The 'widow maker' artery." }
+                }
+            ]
+        },
+        {
+            id: "med-n8",
+            title: "Blood Types (血型)",
+            description: "Classify ABO blood groups and compatibility.",
+            type: "exercise",
+            status: "locked",
+            stages: [
+                {
+                    stageId: "med-s8",
+                    topic: "Blood Type Compatibility",
+                    module: "Practice",
+                    component: "TaxonomyMatrix",
+                    skin: "Classic",
+                    config: {
+                        data: {
+                            buckets: ["Universal Donor", "Universal Recipient"],
+                            items: [
+                                { id: "bt1", content: "Type O-" },
+                                { id: "bt2", content: "Type AB+" },
+                                { id: "bt3", content: "Type A+" },
+                                { id: "bt4", content: "Type B-" }
+                            ]
+                        },
+                        initialState: { assignments: {} }
+                    },
+                    validation: { type: "exact", condition: {} },
+                    feedback: { success: "Correct classification!", error: "Review blood type antigens.", hint: "O- has no antigens." }
+                }
+            ]
+        },
+        {
+            id: "med-n9",
+            title: "Hemoglobin (血紅素)",
+            description: "Understand oxygen transport by hemoglobin.",
+            type: "concept",
+            status: "locked",
+            stages: [
+                {
+                    stageId: "med-s9",
+                    topic: "Hemoglobin Function",
+                    module: "Instruction",
+                    component: "LogicChain",
+                    skin: "Scientific",
+                    config: {
+                        data: { nodes: ["Lungs", "O₂ binds Hemoglobin", "Arteries", "Tissue Delivery", "CO₂ Return"] },
+                        initialState: {}
+                    },
+                    validation: { type: "exact", condition: {} },
+                    feedback: { success: "You understand O₂ transport!", error: "Review the oxygen-hemoglobin curve.", hint: "Hemoglobin picks up O₂ in the lungs." }
+                }
+            ]
+        },
+        {
+            id: "med-n10",
+            title: "Heart Failure (心衰竭)",
+            description: "Differentiate left vs right heart failure.",
+            type: "exercise",
+            status: "locked",
+            stages: [
+                {
+                    stageId: "med-s10",
+                    topic: "Heart Failure Types",
+                    module: "Practice",
+                    component: "TaxonomyMatrix",
+                    skin: "Scientific",
+                    config: {
+                        data: {
+                            buckets: ["Left Heart Failure", "Right Heart Failure"],
+                            items: [
+                                { id: "hf1", content: "Pulmonary edema" },
+                                { id: "hf2", content: "Peripheral edema" },
+                                { id: "hf3", content: "Orthopnea" },
+                                { id: "hf4", content: "Jugular venous distension" }
+                            ]
+                        },
+                        initialState: { assignments: {} }
+                    },
+                    validation: { type: "exact", condition: {} },
+                    feedback: { success: "Great classification!", error: "Think about which side backs up where.", hint: "Left = lungs, Right = body" }
+                }
+            ]
+        },
+        {
+            id: "med-n11",
+            title: "Arrhythmias (心律不整)",
+            description: "Identify common cardiac arrhythmias.",
+            type: "concept",
+            status: "locked",
+            stages: [
+                {
+                    stageId: "med-s11",
+                    topic: "Common Arrhythmias",
+                    module: "Instruction",
+                    component: "LogicChain",
+                    skin: "Scientific",
+                    config: {
+                        data: { nodes: ["Sinus Tachycardia", "Atrial Fibrillation", "Ventricular Tachycardia", "Ventricular Fibrillation"] },
+                        initialState: {}
+                    },
+                    validation: { type: "exact", condition: {} },
+                    feedback: { success: "Correct severity ordering!", error: "Review arrhythmia severity.", hint: "VF is the most dangerous." }
+                }
+            ]
+        },
+        {
+            id: "med-n12",
+            title: "Vascular System (血管系統)",
+            description: "Compare arteries, veins, and capillaries.",
+            type: "exercise",
+            status: "locked",
+            stages: [
+                {
+                    stageId: "med-s12",
+                    topic: "Vessel Comparison",
+                    module: "Practice",
+                    component: "TaxonomyMatrix",
+                    skin: "Classic",
+                    config: {
+                        data: {
+                            buckets: ["Arteries", "Veins"],
+                            items: [
+                                { id: "vs1", content: "Thick muscular walls" },
+                                { id: "vs2", content: "Contain valves" },
+                                { id: "vs3", content: "Carry oxygenated blood (mostly)" },
+                                { id: "vs4", content: "Low pressure system" }
+                            ]
+                        },
+                        initialState: { assignments: {} }
+                    },
+                    validation: { type: "exact", condition: {} },
+                    feedback: { success: "Well done!", error: "Review vessel anatomy.", hint: "Arteries have thicker walls." }
+                }
+            ]
+        },
+        {
+            id: "med-n13",
+            title: "Cardiac Drugs (心臟藥物)",
+            description: "Classify common cardiac medications.",
+            type: "concept",
+            status: "locked",
+            stages: [
+                {
+                    stageId: "med-s13",
+                    topic: "Cardiac Medications",
+                    module: "Instruction",
+                    component: "TaxonomyMatrix",
+                    skin: "Scientific",
+                    config: {
+                        data: {
+                            buckets: ["Beta Blockers", "ACE Inhibitors"],
+                            items: [
+                                { id: "cd1", content: "Metoprolol" },
+                                { id: "cd2", content: "Lisinopril" },
+                                { id: "cd3", content: "Atenolol" },
+                                { id: "cd4", content: "Enalapril" }
+                            ]
+                        },
+                        initialState: { assignments: {} }
+                    },
+                    validation: { type: "exact", condition: {} },
+                    feedback: { success: "Correct drug classification!", error: "Review cardiac pharmacology.", hint: "Beta blockers end in -olol." }
+                }
+            ]
+        },
+        {
+            id: "med-n14",
+            title: "Cardiac Cycle (心動週期)",
+            description: "Sequence the phases of the cardiac cycle.",
+            type: "exercise",
+            status: "locked",
+            stages: [
+                {
+                    stageId: "med-s14",
+                    topic: "Cardiac Cycle Phases",
+                    module: "Practice",
+                    component: "LogicChain",
+                    skin: "Scientific",
+                    config: {
+                        data: { nodes: ["Atrial Systole", "Isovolumetric Contraction", "Ventricular Ejection", "Isovolumetric Relaxation", "Ventricular Filling"] },
+                        initialState: {}
+                    },
+                    validation: { type: "exact", condition: {} },
+                    feedback: { success: "Perfect cardiac cycle sequence!", error: "Review the Wiggers diagram.", hint: "Atrial systole comes first." }
+                }
+            ]
+        },
+        {
+            id: "med-n15",
+            title: "Final Challenge (總複習)",
+            description: "Comprehensive review of heart & blood flow.",
+            type: "challenge",
+            status: "locked",
+            stages: [
+                {
+                    stageId: "med-s15",
+                    topic: "Comprehensive Heart Review",
+                    module: "Assessment",
+                    component: "LogicChain",
+                    skin: "Scientific",
+                    config: {
+                        data: { nodes: ["Vena Cava", "Right Atrium", "Right Ventricle", "Pulmonary Artery", "Lungs", "Pulmonary Vein", "Left Atrium", "Left Ventricle", "Aorta"] },
+                        initialState: {}
+                    },
+                    validation: { type: "exact", condition: {} },
+                    feedback: { success: "You've mastered the circulatory system!", error: "Review the complete circulation path.", hint: "Follow the blood from body back to body." }
+                }
+            ]
+        }
+    ]
+};

global.d.ts

@@ -0,0 +1 @@
+declare module "*.css" {}

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

next.config.mjs

@@ -0,0 +1,11 @@
+/** @type {import('next').NextConfig} */
+const isHuggingFaceSpace = process.env.HUGGINGFACE_SPACE === "1";
+
+const nextConfig = {
+  output: "export",
+  trailingSlash: true,
+  ...(isHuggingFaceSpace ? {} : { basePath: "/UI" }),
+  images: { unoptimized: true },
+};
+
+export default nextConfig;

package-lock.json

@@ -0,0 +1,1711 @@
+{
+  "name": "lingualearn-ui",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "lingualearn-ui",
+      "version": "0.1.0",
+      "dependencies": {
+        "framer-motion": "^12.34.3",
+        "next": "^14.2.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-icons": "^5.3.0",
+        "zustand": "^4.5.0"
+      },
+      "devDependencies": {
+        "@types/node": "^20.0.0",
+        "@types/react": "^18.2.0",
+        "@types/react-dom": "^18.2.0",
+        "autoprefixer": "^10.4.0",
+        "postcss": "^8.4.0",
+        "tailwindcss": "^3.4.0",
+        "typescript": "^5.0.0"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@next/env": {
+      "version": "14.2.35",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.35.tgz",
+      "integrity": "sha512-DuhvCtj4t9Gwrx80dmz2F4t/zKQ4ktN8WrMwOuVzkJfBilwAwGr6v16M5eI8yCuZ63H9TTuEU09Iu2HqkzFPVQ==",
+      "license": "MIT"
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.33.tgz",
+      "integrity": "sha512-HqYnb6pxlsshoSTubdXKu15g3iivcbsMXg4bYpjL2iS/V6aQot+iyF4BUc2qA/J/n55YtvE4PHMKWBKGCF/+wA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.33.tgz",
+      "integrity": "sha512-8HGBeAE5rX3jzKvF593XTTFg3gxeU4f+UWnswa6JPhzaR6+zblO5+fjltJWIZc4aUalqTclvN2QtTC37LxvZAA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.33.tgz",
+      "integrity": "sha512-JXMBka6lNNmqbkvcTtaX8Gu5by9547bukHQvPoLe9VRBx1gHwzf5tdt4AaezW85HAB3pikcvyqBToRTDA4DeLw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.33.tgz",
+      "integrity": "sha512-Bm+QulsAItD/x6Ih8wGIMfRJy4G73tu1HJsrccPW6AfqdZd0Sfm5Imhgkgq2+kly065rYMnCOxTBvmvFY1BKfg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.33.tgz",
+      "integrity": "sha512-FnFn+ZBgsVMbGDsTqo8zsnRzydvsGV8vfiWwUo1LD8FTmPTdV+otGSWKc4LJec0oSexFnCYVO4hX8P8qQKaSlg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.33.tgz",
+      "integrity": "sha512-345tsIWMzoXaQndUTDv1qypDRiebFxGYx9pYkhwY4hBRaOLt8UGfiWKr9FSSHs25dFIf8ZqIFaPdy5MljdoawA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.33.tgz",
+      "integrity": "sha512-nscpt0G6UCTkrT2ppnJnFsYbPDQwmum4GNXYTeoTIdsmMydSKFz9Iny2jpaRupTb+Wl298+Rh82WKzt9LCcqSQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.33.tgz",
+      "integrity": "sha512-pc9LpGNKhJ0dXQhZ5QMmYxtARwwmWLpeocFmVG5Z0DzWq5Uf0izcI8tLc+qOpqxO1PWqZ5A7J1blrUIKrIFc7Q==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.33.tgz",
+      "integrity": "sha512-nOjfZMy8B94MdisuzZo9/57xuFVLHJaDj5e/xrduJp9CV2/HrfxTRH2fbyLe+K9QT41WBLUd4iXX3R7jBp0EUg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@swc/counter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz",
+      "integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/counter": "^0.1.3",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "20.19.34",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.34.tgz",
+      "integrity": "sha512-by3/Z0Qp+L9cAySEsSNNwZ6WWw8ywgGLPQGgbQDhNRSitqYgkgp4pErd23ZSCavbtUA2CN4jQtoB3T8nk4j3Rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.21.0"
+      }
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.15",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "18.3.28",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.28.tgz",
+      "integrity": "sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "18.3.7",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
+      "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^18.0.0"
+      }
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.4.27",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.27.tgz",
+      "integrity": "sha512-NP9APE+tO+LuJGn7/9+cohklunJsXWiaWEfV3si4Gi/XHDwVNgkwr1J3RQYFIvPy76GmJ9/bW8vyoU1LcxwKHA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.28.1",
+        "caniuse-lite": "^1.0.30001774",
+        "fraction.js": "^5.3.4",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.0.tgz",
+      "integrity": "sha512-lIyg0szRfYbiy67j9KN8IyeD7q7hcmqnJ1ddWmNt19ItGpNN64mnllmxUNFIOdOm6by97jlL6wfpTTJrmnjWAA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
+      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "baseline-browser-mapping": "^2.9.0",
+        "caniuse-lite": "^1.0.30001759",
+        "electron-to-chromium": "^1.5.263",
+        "node-releases": "^2.0.27",
+        "update-browserslist-db": "^1.2.0"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "dependencies": {
+        "streamsearch": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001774",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001774.tgz",
+      "integrity": "sha512-DDdwPGz99nmIEv216hKSgLD+D4ikHQHjBC/seF98N9CPqRX4M5mSxT9eTV6oyisnJcuzxtZy4n17yKKQYmYQOA==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+      "license": "MIT"
+    },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "devOptional": true,
+      "license": "MIT"
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.302",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.302.tgz",
+      "integrity": "sha512-sM6HAN2LyK82IyPBpznDRqlTQAtuSaO+ShzFiWTvoMJLHyZ+Y39r8VMfHzwbU8MVBzQ4Wdn85+wlZl2TLGIlwg==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/framer-motion": {
+      "version": "12.34.3",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.34.3.tgz",
+      "integrity": "sha512-v81ecyZKYO/DfpTwHivqkxSUBzvceOpoI+wLfgCgoUIKxlFKEXdg0oR9imxwXumT4SFy8vRk9xzJ5l3/Du/55Q==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.34.3",
+        "motion-utils": "^12.29.2",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/motion-dom": {
+      "version": "12.34.3",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.34.3.tgz",
+      "integrity": "sha512-sYgFe+pR9aIM7o4fhs2aXtOI+oqlUd33N9Yoxcgo1Fv7M20sRkHtCmzE/VRNIcq7uNJ+qio+Xubt1FXH3pQ+eQ==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.29.2"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.29.2",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.29.2.tgz",
+      "integrity": "sha512-G3kc34H2cX2gI63RqU+cZq+zWRRPSsNIOjpdl9TN4AQwC4sgwYPl/Q/Obf/d53nOm569T0fYK+tcoSV50BWx8A==",
+      "license": "MIT"
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/next": {
+      "version": "14.2.35",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.35.tgz",
+      "integrity": "sha512-KhYd2Hjt/O1/1aZVX3dCwGXM1QmOV4eNM2UTacK5gipDdPN/oHHK/4oVGy7X8GMfPMsUTUEmGlsy0EY1YGAkig==",
+      "license": "MIT",
+      "dependencies": {
+        "@next/env": "14.2.35",
+        "@swc/helpers": "0.5.5",
+        "busboy": "1.6.0",
+        "caniuse-lite": "^1.0.30001579",
+        "graceful-fs": "^4.2.11",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.1"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "14.2.33",
+        "@next/swc-darwin-x64": "14.2.33",
+        "@next/swc-linux-arm64-gnu": "14.2.33",
+        "@next/swc-linux-arm64-musl": "14.2.33",
+        "@next/swc-linux-x64-gnu": "14.2.33",
+        "@next/swc-linux-x64-musl": "14.2.33",
+        "@next/swc-win32-arm64-msvc": "14.2.33",
+        "@next/swc-win32-ia32-msvc": "14.2.33",
+        "@next/swc-win32-x64-msvc": "14.2.33"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.41.2",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@playwright/test": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/next/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.27",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
+      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
+      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.1.1"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "jiti": ">=1.21.0",
+        "postcss": ">=8.0.9",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.11",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
+      "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/styled-jsx": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
+      "integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/sucrase": {
+      "version": "3.35.1",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "tinyglobby": "^0.2.11",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
+      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.7",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "6.21.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+      "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,28 @@
+{
+  "name": "lingualearn-ui",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "framer-motion": "^12.34.3",
+    "next": "^14.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^5.3.0",
+    "zustand": "^4.5.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.0.0"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,9 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+
+export default config;

stores/useArenaStore.ts

@@ -0,0 +1,171 @@
+import { create } from "zustand";
+
+/* ═══════════════════ Types ═══════════════════ */
+
+export interface ArenaState {
+  /* ── Session ── */
+  nodeId: string | null;
+  courseId: string | null;
+  totalStages: number;
+  currentStageIndex: number;
+  /* ── Stage state ── */
+  isCorrect: boolean | null;
+  showFeedback: boolean;
+  /* ── Score tracking ── */
+  correctCount: number;
+  incorrectCount: number;
+  consecutiveErrors: number;
+  remedyTriggered: boolean;
+  hintsUsed: number;
+  /* ── Timing ── */
+  startTime: number | null;
+  endTime: number | null;
+  /* ── Animation triggers ── */
+  showConfetti: boolean;
+  shakeScreen: boolean;
+}
+
+export interface ArenaActions {
+  /* ── Session lifecycle ── */
+  startSession: (opts: {
+    nodeId: string;
+    courseId: string;
+    totalStages: number;
+  }) => void;
+  endSession: () => void;
+  /* ── Stage progression ── */
+  nextStage: () => void;
+  /* ── Answer evaluation ── */
+  markCorrect: () => void;
+  markIncorrect: () => void;
+  /* ── Feedback ── */
+  showFeedbackPanel: () => void;
+  hideFeedbackPanel: () => void;
+  /* ── Hints ── */
+  useHint: () => void;
+  /* ── Animation triggers ── */
+  triggerConfetti: () => void;
+  triggerShake: () => void;
+  clearAnimations: () => void;
+  /* ── Reset ── */
+  resetArena: () => void;
+}
+
+/* ═══════════════════ Initial State ═══════════════════ */
+
+/** How many consecutive wrong answers before remedy is triggered */
+export const REMEDY_THRESHOLD = 3;
+
+const INITIAL_STATE: ArenaState = {
+  nodeId: null,
+  courseId: null,
+  totalStages: 0,
+  currentStageIndex: 0,
+  isCorrect: null,
+  showFeedback: false,
+  correctCount: 0,
+  incorrectCount: 0,
+  consecutiveErrors: 0,
+  remedyTriggered: false,
+  hintsUsed: 0,
+  startTime: null,
+  endTime: null,
+  showConfetti: false,
+  shakeScreen: false,
+};
+
+/* ═══════════════════ Store ═══════════════════ */
+
+const useArenaStore = create<ArenaState & ArenaActions>()((set, get) => ({
+  ...INITIAL_STATE,
+
+  /* ── Session lifecycle ── */
+  startSession: ({ nodeId, courseId, totalStages }) =>
+    set({
+      ...INITIAL_STATE,
+      nodeId,
+      courseId,
+      totalStages,
+      startTime: Date.now(),
+    }),
+
+  endSession: () =>
+    set({
+      endTime: Date.now(),
+    }),
+
+  /* ── Stage progression ── */
+  nextStage: () =>
+    set((s) => ({
+      currentStageIndex: Math.min(s.currentStageIndex + 1, s.totalStages - 1),
+      isCorrect: null,
+      showFeedback: false,
+      showConfetti: false,
+      shakeScreen: false,
+    })),
+
+  /* ── Answer evaluation ── */
+  markCorrect: () =>
+    set((s) => ({
+      isCorrect: true,
+      correctCount: s.correctCount + 1,
+      consecutiveErrors: 0,
+    })),
+
+  markIncorrect: () =>
+    set((s) => {
+      const next = s.consecutiveErrors + 1;
+      return {
+        isCorrect: false,
+        incorrectCount: s.incorrectCount + 1,
+        consecutiveErrors: next,
+        remedyTriggered: next >= REMEDY_THRESHOLD ? true : s.remedyTriggered,
+      };
+    }),
+
+  /* ── Feedback ── */
+  showFeedbackPanel: () => set({ showFeedback: true }),
+  hideFeedbackPanel: () => set({ showFeedback: false }),
+
+  /* ── Hints ── */
+  useHint: () => set((s) => ({ hintsUsed: s.hintsUsed + 1 })),
+
+  /* ── Animation triggers ── */
+  triggerConfetti: () => set({ showConfetti: true }),
+  triggerShake: () => {
+    set({ shakeScreen: true });
+    setTimeout(() => set({ shakeScreen: false }), 500);
+  },
+  clearAnimations: () => set({ showConfetti: false, shakeScreen: false }),
+
+  /* ── Reset ── */
+  resetArena: () => set(INITIAL_STATE),
+}));
+
+/** Derived: compute accuracy percentage */
+export function getAccuracy(state: ArenaState): number {
+  const total = state.correctCount + state.incorrectCount;
+  if (total === 0) return 100;
+  return Math.round((state.correctCount / total) * 100);
+}
+
+/** Derived: compute elapsed time string (e.g. "2m 14s") */
+export function getElapsedTime(state: ArenaState): string {
+  const start = state.startTime ?? Date.now();
+  const end = state.endTime ?? Date.now();
+  const secs = Math.floor((end - start) / 1000);
+  const m = Math.floor(secs / 60);
+  const s = secs % 60;
+  return `${m}m ${s.toString().padStart(2, "0")}s`;
+}
+
+/** Derived: compute XP gained */
+export function getXpGained(state: ArenaState): number {
+  const accuracy = getAccuracy(state);
+  const baseXp = 30;
+  const bonus = Math.floor((accuracy / 100) * 20);
+  const hintPenalty = state.hintsUsed * 5;
+  return Math.max(10, baseXp + bonus - hintPenalty);
+}
+
+export default useArenaStore;

stores/useCourseStore.ts

@@ -0,0 +1,259 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { mockMedicineUnit } from "@/data/mock_medicine";
+import { mockCalculusUnit } from "@/data/mock_calculus";
+
+/* ═══════════════════ Types ═══════════════════ */
+
+export interface StageData {
+  stageId: string;
+  topic: string;
+  module: string;
+  component: string;
+  skin: string;
+  config: {
+    data: Record<string, unknown>;
+    initialState: Record<string, unknown>;
+  };
+  validation: { type: string; condition: Record<string, unknown> };
+  feedback: { success: string; error: string; hint: string };
+}
+
+export interface CourseNode {
+  id: string;
+  title: string;
+  description: string;
+  type: string;
+  status: "completed" | "available" | "locked";
+  stages: StageData[];
+}
+
+export interface Course {
+  unitId: string;
+  unitTitle: string;
+  nodes: CourseNode[];
+}
+
+export interface RemedyNode {
+  id: string;
+  courseId: string;
+  sourceNodeId: string;
+  title: string;
+  status: "available" | "completed";
+}
+
+export interface CourseState {
+  /* ── Data ── */
+  courses: Record<string, Course>; // keyed by unitId
+  /* ── Progress ── */
+  nodeStatuses: Record<string, "completed" | "available" | "locked">; // keyed by node id
+  completedNodes: string[];
+  /* ── Remedy ── */
+  remedyNodes: RemedyNode[];
+}
+
+export interface CourseActions {
+  /* ── Load ── */
+  loadMockCourses: () => void;
+  /* ── Query ── */
+  getCourse: (unitId: string) => Course | undefined;
+  getNode: (nodeId: string) => CourseNode | undefined;
+  getNodeStatus: (nodeId: string) => "completed" | "available" | "locked";
+  getNodesForCourse: (unitId: string) => CourseNode[];
+  getCourseProgress: (unitId: string) => number; // 0-100
+  /* ── Mutations ── */
+  completeNode: (nodeId: string) => void;
+  unlockNode: (nodeId: string) => void;
+  resetProgress: () => void;
+  /* ── Remedy ── */
+  addRemedyNode: (courseId: string, sourceNodeId: string, sourceTitle: string) => void;
+  completeRemedyNode: (remedyId: string) => void;
+  getRemedyNodesForCourse: (courseId: string) => RemedyNode[];
+}
+
+/* ═══════════════════ Helpers ═══════════════════ */
+
+function buildInitialStatuses(courses: Record<string, Course>): Record<string, string> {
+  const statuses: Record<string, string> = {};
+  for (const course of Object.values(courses)) {
+    for (const node of course.nodes) {
+      statuses[node.id] = node.status;
+    }
+  }
+  return statuses;
+}
+
+/* ═══════════════════ Store ═══════════════════ */
+
+const useCourseStore = create<CourseState & CourseActions>()(
+  persist(
+    (set, get) => ({
+      courses: {},
+      nodeStatuses: {},
+      completedNodes: [],
+      remedyNodes: [],
+
+      /* ── Load mock data ── */
+      loadMockCourses: () => {
+        const medCourse = mockMedicineUnit as unknown as Course;
+        const calcCourse = mockCalculusUnit as unknown as Course;
+
+        const courses: Record<string, Course> = {
+          [medCourse.unitId]: medCourse,
+          [calcCourse.unitId]: calcCourse,
+        };
+
+        // Only initialize statuses if they haven't been set yet
+        const currentStatuses = get().nodeStatuses;
+        const hasExisting = Object.keys(currentStatuses).length > 0;
+
+        set({
+          courses,
+          nodeStatuses: hasExisting
+            ? currentStatuses
+            : (buildInitialStatuses(courses) as Record<string, "completed" | "available" | "locked">),
+        });
+      },
+
+      /* ── Query ── */
+      getCourse: (unitId) => get().courses[unitId],
+
+      getNode: (nodeId) => {
+        for (const course of Object.values(get().courses)) {
+          const node = course.nodes.find((n) => n.id === nodeId);
+          if (node) {
+            // Merge stored status
+            return {
+              ...node,
+              status: get().nodeStatuses[node.id] ?? node.status,
+            };
+          }
+        }
+        return undefined;
+      },
+
+      getNodeStatus: (nodeId) =>
+        get().nodeStatuses[nodeId] ?? "locked",
+
+      getNodesForCourse: (unitId) => {
+        const course = get().courses[unitId];
+        if (!course) return [];
+        return course.nodes.map((n) => ({
+          ...n,
+          status: get().nodeStatuses[n.id] ?? n.status,
+        }));
+      },
+
+      getCourseProgress: (unitId) => {
+        const course = get().courses[unitId];
+        if (!course || course.nodes.length === 0) return 0;
+        const completed = course.nodes.filter(
+          (n) => get().nodeStatuses[n.id] === "completed"
+        ).length;
+        return Math.round((completed / course.nodes.length) * 100);
+      },
+
+      /* ── Mutations ── */
+      completeNode: (nodeId) => {
+        const state = get();
+
+        // Always mark remedy nodes for this source as completed (regardless of courses loaded)
+        const updatedRemedyNodes = state.remedyNodes.map((r) =>
+          r.sourceNodeId === nodeId && r.status === "available"
+            ? { ...r, status: "completed" as const }
+            : r
+        );
+        const remedyChanged = updatedRemedyNodes.some(
+          (r, i) => r.status !== state.remedyNodes[i].status
+        );
+        if (remedyChanged) {
+          set({ remedyNodes: updatedRemedyNodes });
+        }
+
+        // Find which course this node belongs to
+        let courseId: string | null = null;
+        let nodeIndex = -1;
+        for (const course of Object.values(state.courses)) {
+          const idx = course.nodes.findIndex((n) => n.id === nodeId);
+          if (idx !== -1) {
+            courseId = course.unitId;
+            nodeIndex = idx;
+            break;
+          }
+        }
+
+        if (!courseId || nodeIndex === -1) return;
+
+        const course = state.courses[courseId];
+        const newStatuses = { ...state.nodeStatuses, [nodeId]: "completed" as const };
+        const newCompleted = [...state.completedNodes];
+        if (!newCompleted.includes(nodeId)) {
+          newCompleted.push(nodeId);
+        }
+
+        // Auto-unlock the next node in the same course
+        if (nodeIndex < course.nodes.length - 1) {
+          const nextNode = course.nodes[nodeIndex + 1];
+          if (newStatuses[nextNode.id] === "locked") {
+            newStatuses[nextNode.id] = "available";
+          }
+        }
+
+        set({
+          nodeStatuses: newStatuses,
+          completedNodes: newCompleted,
+          remedyNodes: updatedRemedyNodes,
+        });
+      },
+
+      unlockNode: (nodeId) =>
+        set((s) => ({
+          nodeStatuses: { ...s.nodeStatuses, [nodeId]: "available" },
+        })),
+
+      resetProgress: () => {
+        const courses = get().courses;
+        set({
+          nodeStatuses: buildInitialStatuses(courses) as Record<string, "completed" | "available" | "locked">,
+          completedNodes: [],
+          remedyNodes: [],
+        });
+      },
+
+      /* ── Remedy ── */
+      addRemedyNode: (courseId, sourceNodeId, sourceTitle) => {
+        const existing = get().remedyNodes;
+        // Don't add duplicate remedy for same source
+        if (existing.some((r) => r.sourceNodeId === sourceNodeId && r.status === "available")) return;
+        const id = `remedy-${sourceNodeId}-${Date.now()}`;
+        set({
+          remedyNodes: [
+            ...existing,
+            { id, courseId, sourceNodeId, title: `📚 補強: ${sourceTitle}`, status: "available" },
+          ],
+        });
+      },
+
+      completeRemedyNode: (remedyId) => {
+        set({
+          remedyNodes: get().remedyNodes.map((r) =>
+            r.id === remedyId ? { ...r, status: "completed" } : r
+          ),
+        });
+      },
+
+      getRemedyNodesForCourse: (courseId) =>
+        get().remedyNodes.filter((r) => r.courseId === courseId),
+    }),
+    {
+      name: "learn8-courses",
+      partialize: (state) => ({
+        nodeStatuses: state.nodeStatuses,
+        completedNodes: state.completedNodes,
+        remedyNodes: state.remedyNodes,
+      }),
+    }
+  )
+);
+
+export default useCourseStore;

stores/useUserStore.ts

@@ -0,0 +1,184 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+/* ═══════════════════ Types ═══════════════════ */
+
+export interface UserPreferences {
+  soundOn: boolean;
+  darkGlass: boolean;
+  difficulty: number; // 0-100
+}
+
+export interface UserState {
+  /* ── Identity ── */
+  name: string;
+  title: string;
+  /* ── Progression ── */
+  xp: number;
+  level: number;
+  xpToNextLevel: number;
+  streak: number;
+  longestStreak: number;
+  gems: number;
+  coursesCompleted: number;
+  /* ── Navigation ── */
+  lastActiveCourseId: string | null;
+  lastActiveNodeId: string | null;
+  /* ── Preferences ── */
+  preferences: UserPreferences;
+  /* ── Onboarding ── */
+  onboarded: boolean;
+  selectedTopics: string[];
+  dailyGoal: string;
+}
+
+export interface UserActions {
+  /* ── Identity ── */
+  setName: (name: string) => void;
+  setTitle: (title: string) => void;
+  /* ── XP & Leveling ── */
+  addXp: (amount: number) => void;
+  /* ── Gems ── */
+  addGems: (amount: number) => void;
+  spendGems: (amount: number) => boolean; // returns false if insufficient
+  /* ── Streak ── */
+  incrementStreak: () => void;
+  resetStreak: () => void;
+  /* ── Courses ── */
+  incrementCoursesCompleted: () => void;
+  /* ── Navigation ── */
+  setLastActiveCourse: (courseId: string) => void;
+  setLastActiveNode: (nodeId: string) => void;
+  /* ── Preferences ── */
+  setPreferences: (prefs: Partial<UserPreferences>) => void;
+  /* ── Onboarding ── */
+  completeOnboarding: (data: {
+    name: string;
+    topics: string[];
+    goal: string;
+  }) => void;
+  /* ── Reset ── */
+  logout: () => void;
+}
+
+/* ═══════════════════ Helpers ═══════════════════ */
+
+/** XP required for a given level */
+function xpForLevel(level: number): number {
+  return 100 + (level - 1) * 50; // Level 1 = 100, Level 2 = 150, etc.
+}
+
+const INITIAL_STATE: UserState = {
+  name: "Explorer",
+  title: "Novice Learner",
+  xp: 0,
+  level: 1,
+  xpToNextLevel: xpForLevel(1),
+  streak: 12,
+  longestStreak: 28,
+  gems: 1500,
+  coursesCompleted: 3,
+  lastActiveCourseId: null,
+  lastActiveNodeId: null,
+  preferences: {
+    soundOn: true,
+    darkGlass: true,
+    difficulty: 50,
+  },
+  onboarded: false,
+  selectedTopics: [],
+  dailyGoal: "",
+};
+
+/* ═══════════════════ Store ═══════════════════ */
+
+const useUserStore = create<UserState & UserActions>()(
+  persist(
+    (set, get) => ({
+      ...INITIAL_STATE,
+
+      /* ── Identity ── */
+      setName: (name) => set({ name }),
+      setTitle: (title) => set({ title }),
+
+      /* ── XP & Leveling ── */
+      addXp: (amount) => {
+        const state = get();
+        let newXp = state.xp + amount;
+        let newLevel = state.level;
+        let xpNeeded = state.xpToNextLevel;
+        let newTitle = state.title;
+
+        // Level-up loop (handle multi-level jumps)
+        while (newXp >= xpNeeded) {
+          newXp -= xpNeeded;
+          newLevel += 1;
+          xpNeeded = xpForLevel(newLevel);
+          // Update title based on level
+          if (newLevel >= 20) newTitle = "Grandmaster Scholar";
+          else if (newLevel >= 15) newTitle = "Master Scholar";
+          else if (newLevel >= 10) newTitle = "Expert Scholar";
+          else if (newLevel >= 5) newTitle = "Quantum Scholar";
+          else if (newLevel >= 3) newTitle = "Apprentice Scholar";
+          else newTitle = "Novice Learner";
+        }
+
+        set({
+          xp: newXp,
+          level: newLevel,
+          xpToNextLevel: xpNeeded,
+          title: newTitle,
+        });
+      },
+
+      /* ── Gems ── */
+      addGems: (amount) => set((s) => ({ gems: s.gems + amount })),
+      spendGems: (amount) => {
+        const state = get();
+        if (state.gems < amount) return false;
+        set({ gems: state.gems - amount });
+        return true;
+      },
+
+      /* ── Streak ── */
+      incrementStreak: () =>
+        set((s) => ({
+          streak: s.streak + 1,
+          longestStreak: Math.max(s.longestStreak, s.streak + 1),
+        })),
+      resetStreak: () => set({ streak: 0 }),
+
+      /* ── Courses ── */
+      incrementCoursesCompleted: () =>
+        set((s) => ({ coursesCompleted: s.coursesCompleted + 1 })),
+
+      /* ── Navigation ── */
+      setLastActiveCourse: (courseId) =>
+        set({ lastActiveCourseId: courseId }),
+      setLastActiveNode: (nodeId) => set({ lastActiveNodeId: nodeId }),
+
+      /* ── Preferences ── */
+      setPreferences: (prefs) =>
+        set((s) => ({
+          preferences: { ...s.preferences, ...prefs },
+        })),
+
+      /* ── Onboarding ── */
+      completeOnboarding: ({ name, topics, goal }) =>
+        set({
+          name,
+          selectedTopics: topics,
+          dailyGoal: goal,
+          onboarded: true,
+        }),
+
+      /* ── Reset ── */
+      logout: () => set(INITIAL_STATE),
+    }),
+    {
+      name: "learn8-user",
+    }
+  )
+);
+
+export default useUserStore;

tailwind.config.ts

@@ -0,0 +1,39 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        brand: {
+          green: "#58CC02",
+          "green-dark": "#46a302",
+          coral: "#E8734A",
+          "coral-dark": "#d4623c",
+          teal: "#7AC7C4",
+          "teal-light": "#B8E6E3",
+          "teal-bg": "#E8F5F4",
+          gray: {
+            50: "#F7F7F7",
+            100: "#EEEEEE",
+            200: "#E2E2E2",
+            300: "#CBCBCB",
+            400: "#AFAFAF",
+            500: "#6B6B6B",
+            600: "#545454",
+            700: "#333333",
+          },
+        },
+      },
+      fontFamily: {
+        heading: ["'Nunito'", "sans-serif"],
+        body: ["'Open Sans'", "sans-serif"],
+      },
+    },
+  },
+  plugins: [],
+};
+export default config;

tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}