extracted terminal to a widget

2026-02-17 18:46:18 +00:00
parent c6999ea66f
commit 0746844d6f
98 changed files with 487 additions and 3513 deletions
@@ -99,10 +99,10 @@
        "sounds": "workspace:*",
        "tailwind-merge": "^3.3.1",
        "tailwindcss-animate": "^1.0.7",
-        "themes": "workspace:*",
        "three": "^0.182.0",
        "types": "workspace:*",
        "vaul": "^1.1.2",
+        "widgets": "workspace:*",
        "ws": "^8.18.1",
        "zod": "^4.2.1",
      },
@@ -240,13 +240,13 @@
      "name": "sounds",
      "version": "1.0.0",
    },
-    "src/workspaces/themes": {
-      "name": "themes",
-    },
    "src/workspaces/types": {
      "name": "types",
      "version": "0.0.1",
    },
+    "src/workspaces/widgets": {
+      "name": "widgets",
+    },
  },
  "packages": {
    "@alloc/quick-lru": ["@alloc/quick-lru@5.2.0", "", {}, "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw=="],
@@ -2003,8 +2003,6 @@

    "text-segmentation": ["text-segmentation@1.0.3", "", { "dependencies": { "utrie": "^1.0.2" } }, "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw=="],

-    "themes": ["themes@workspace:src/workspaces/themes"],
-
    "thenify": ["thenify@3.3.1", "", { "dependencies": { "any-promise": "^1.0.0" } }, "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw=="],

    "thenify-all": ["thenify-all@1.6.0", "", { "dependencies": { "thenify": ">= 3.1.0 < 4" } }, "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA=="],
@@ -2115,6 +2113,8 @@

    "which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="],

+    "widgets": ["widgets@workspace:src/workspaces/widgets"],
+
    "wrap-ansi": ["wrap-ansi@8.1.0", "", { "dependencies": { "ansi-styles": "^6.1.0", "string-width": "^5.0.1", "strip-ansi": "^7.0.1" } }, "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ=="],

    "wrap-ansi-cjs": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
@@ -99,6 +99,7 @@
    "pg": "^8.16.3",
    "postgres": "^3.4.5",
    "plugins": "workspace:*",
+    "widgets": "workspace:*",
    "react": "^19",
    "react-countup": "^6.5.3",
    "react-day-picker": "^9.13.0",
@@ -117,7 +118,6 @@
    "sonner": "^2.0.7",
    "sounds": "workspace:*",
    "tailwind-merge": "^3.3.1",
-    "themes": "workspace:*",
    "tailwindcss-animate": "^1.0.7",
    "three": "^0.182.0",
    "types": "workspace:*",
@@ -1,9 +1,6 @@
-import { BrowserRouter, Routes, Route, Navigate, Link } from 'react-router';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router';
 import * as Authentication from './Screens/Authentication';
-// import { Home } from './Screens/Dashboard/Home';
-
-// import { ChatList } from './Screens/Dashboard/Chat/ChatList';
-
+import * as Dashboard from './Screens/Dashboard';
 import { useAuth } from 'hooks/useAuth';
 import { useServerSettings } from '@/state/useServerSettings';
 import { useInitialData } from '@/state/useInitialData';
@@ -36,38 +33,28 @@ export function App() {
      {/*   </Routes> */}
      {/* )} */}
      {isAuthenticated && onboardingComplete && (
-        <Routes>
-          <Route path="/" element={<HomeScreen />} />
-          {/* <Route path="/settings/profile" element={<ProfileSettings />} /> */}
-          {/* <Route path="/settings/ai" element={<AISettings />} /> */}
-          {/* <Route path="/settings/server" element={<ServerSettings />} /> */}
-          {/* <Route path="/settings/resources" element={<ResourceSettings />} /> */}
-          {/* <Route path="/chat" element={<ChatList />} /> */}
-          {/* <Route path="/chat/new" element={<NewChat />} /> */}
-          {/* <Route path="/chat/:sessionId" element={<ClaudeChat />} /> */}
-          {/* <Route path="/chat/opencode/new" element={<OpenCodeChat />} /> */}
-          {/* <Route path="/chat/opencode/:sessionId" element={<OpenCodeChat />} /> */}
-          {/* <Route path="/files" element={<Files />} /> */}
-          {/* <Route path="/terminal" element={<Terminal />} /> */}
-          {/* <Route path="/plans" element={<Plans />} /> */}
-          {/* <Route path="/skills" element={<Skills />} /> */}
-          {/* <Route path="/tasks" element={<Tasks />} /> */}
-          {/* <Route path="/processes" element={<Processes />} /> */}
-          {/* <Route path="/task-logs" element={<TaskLogs />} /> */}
-          <Route path="/auth/signout" element={<Authentication.SignoutScreen />} />
-          <Route path="*" element={<Navigate to="/" replace />} />
-        </Routes>
+        <Dashboard.DashboardLayout>
+          <Routes>
+            <Route path="/" element={<Dashboard.HomeScreen />} />
+            <Route path="/settings/profile" element={<Dashboard.ProfileSettings />} />
+            <Route path="/settings/ai" element={<Dashboard.AISettings />} />
+            <Route path="/settings/server" element={<Dashboard.ServerSettings />} />
+            <Route path="/settings/resources" element={<Dashboard.ResourceSettings />} />
+            <Route path="/chat/new" element={<Dashboard.NewChat />} />
+            <Route path="/chat/:sessionId" element={<Dashboard.ClaudeChat />} />
+            <Route path="/chat/opencode/new" element={<Dashboard.OpenCodeChat />} />
+            <Route path="/chat/opencode/:sessionId" element={<Dashboard.OpenCodeChat />} />
+            <Route path="/plans" element={<Dashboard.Plans />} />
+            <Route path="/terminal" element={<Dashboard.Terminal />} />
+            <Route path="/skills" element={<Dashboard.Skills />} />
+            <Route path="/tasks" element={<Dashboard.Tasks />} />
+            <Route path="/processes" element={<Dashboard.Processes />} />
+            <Route path="/task-logs" element={<Dashboard.TaskLogs />} />
+            <Route path="/auth/signout" element={<Authentication.SignoutScreen />} />
+            <Route path="*" element={<Navigate to="/" replace />} />
+          </Routes>
+        </Dashboard.DashboardLayout>
      )}
    </BrowserRouter>
  );
 }
-
-
-const HomeScreen = () => {
-  return (
-    <div>
-      <h1>Home</h1>
-      <Link to="/auth/signout">Signout</Link>
-    </div>
-  );
-};
@@ -1,11 +1,4 @@
-import { DashboardLayout } from '@/Screens/Dashboard/Layout';
-
 export const ChatList = () => {
-
-  return (
-    <DashboardLayout mobileFull>
-      <h1>ChatList</h1>
-    </DashboardLayout>
-  );
+  return <h1>ChatList</h1>;
 };

@@ -3,7 +3,6 @@ import { useParams } from 'react-router';
 import { useQueryClient } from '@tanstack/react-query';
 import { useClaude, useOpenCode, type SessionEntry } from 'plugins/Chat/client';
 import { ChatPanel } from 'plugins/ChatHistory/client';
-import { DashboardLayout } from '../Layout';
 import { useVisibleClaudeModels, useVisibleOpenCodeModels } from '@/state/useModels';

 export const ClaudeChat = () => {
@@ -15,13 +14,11 @@ export const ClaudeChat = () => {
  const claudeModels = useVisibleClaudeModels();

  return (
-    <DashboardLayout mobileFull>
-      <div className="flex items-center justify-center h-full md:p-4">
-        <div className="flex flex-col w-full h-full md:w-3/4 md:h-3/4 lg:w-1/2 lg:h-1/2">
-          <ChatPanel chat={claude} provider="claude" availableModels={claudeModels} />
-        </div>
+    <div className="flex items-center justify-center h-full md:p-4">
+      <div className="flex flex-col w-full h-full md:w-3/4 md:h-3/4 lg:w-1/2 lg:h-1/2">
+        <ChatPanel chat={claude} provider="claude" availableModels={claudeModels} />
      </div>
-    </DashboardLayout>
+    </div>
  );
 };

@@ -34,13 +31,11 @@ export const OpenCodeChat = () => {
  const openCodeModels = useVisibleOpenCodeModels();

  return (
-    <DashboardLayout mobileFull>
-      <div className="flex items-center justify-center h-full md:p-4">
-        <div className="flex flex-col w-full h-full md:w-3/4 md:h-3/4 lg:w-1/2 lg:h-1/2">
-          <ChatPanel chat={opencode} provider="opencode" availableModels={openCodeModels} />
-        </div>
+    <div className="flex items-center justify-center h-full md:p-4">
+      <div className="flex flex-col w-full h-full md:w-3/4 md:h-3/4 lg:w-1/2 lg:h-1/2">
+        <ChatPanel chat={opencode} provider="opencode" availableModels={openCodeModels} />
      </div>
-    </DashboardLayout>
+    </div>
  );
 };

@@ -69,16 +64,14 @@ export const NewChat = () => {
  const [provider, setProvider] = useState<'claude' | 'opencode'>('claude');

  return (
-    <DashboardLayout mobileFull>
-      <div className="flex items-center justify-center h-full md:p-4">
-        <div className="flex flex-col w-full h-full md:w-3/4 md:h-3/4 lg:w-1/2 lg:h-1/2">
-          {provider === 'claude' ? (
-            <ClaudeNewChatInner key="claude" onProviderChange={setProvider} />
-          ) : (
-            <OpenCodeNewChatInner key="opencode" onProviderChange={setProvider} />
-          )}
-        </div>
+    <div className="flex items-center justify-center h-full md:p-4">
+      <div className="flex flex-col w-full h-full md:w-3/4 md:h-3/4 lg:w-1/2 lg:h-1/2">
+        {provider === 'claude' ? (
+          <ClaudeNewChatInner key="claude" onProviderChange={setProvider} />
+        ) : (
+          <OpenCodeNewChatInner key="opencode" onProviderChange={setProvider} />
+        )}
      </div>
-    </DashboardLayout>
+    </div>
  );
 };
@@ -1,25 +1,19 @@
-import { DashboardLayout } from '../Layout';
 import { ChatLauncher } from './ChatLauncher';
 import { Widget as FileBrowser } from 'plugins/FileBrowser/client';
 import { Widget as ChatHistory } from 'plugins/ChatHistory/client';
 import { Catalog } from 'sounds';
-import { useServerSettings } from '@/state/useServerSettings';
-
-export const Home = () => {
-  const { plugins } = useServerSettings();

+export const HomeScreen = () => {
  return (
-    <DashboardLayout>
-      <div className="flex flex-col md:flex-row gap-4 md:gap-8 h-full p-4 pt-6 md:p-8 md:pt-12 overflow-y-auto">
-        <div className="flex flex-col gap-8 flex-1 min-w-0">
-          <ChatLauncher />
-          {plugins?.FileBrowser !== false && <FileBrowser />}
-        </div>
-        <div className="flex flex-col gap-8 flex-1 min-w-0">
-          <ChatHistory />
-          <Catalog />
-        </div>
+    <div className="flex flex-col md:flex-row gap-4 md:gap-8 h-full p-4 pt-6 md:p-8 md:pt-12 overflow-y-auto">
+      <div className="flex flex-col gap-8 flex-1 min-w-0">
+        <ChatLauncher />
+        <FileBrowser />
      </div>
-    </DashboardLayout>
+      <div className="flex flex-col gap-8 flex-1 min-w-0">
+        <ChatHistory />
+        <Catalog />
+      </div>
+    </div>
  );
 };
@@ -1,21 +0,0 @@
-import { Background } from './Background';
-type AuthenticationLayoutProps = {
-  children?: React.ReactNode;
-};
-export function AuthenticationLayout({ children }: AuthenticationLayoutProps) {
-  return (
-    <div className="relative overflow-hidden h-dvh outline-none inset-0">
-      <section className="relative h-dvh snap-start overflow-hidden">
-        <Background />
-        <div className="absolute inset-0 z-520">
-          <div className="absolute inset-x-0 bottom-0 z-20 flex justify-center pb-8 md:pb-12">
-            {children}
-          </div>
-        </div>
-      </section>
-
-    </div>
-  );
-};
-
-
@@ -1,4 +1,3 @@
-import { DuckAvatar } from "./DuckAvatar";
 import { PixelGrid } from "@/components/PixelGrid";
 import landscapebg from './landscape1.jpg';

@@ -13,7 +12,6 @@ export function Background() {
      }}
    >
      <PixelGrid />
-      <DuckAvatar showDebug={false} fullControlMode={false} currentSection={0} />
    </div>
  );
 };
@@ -0,0 +1,24 @@
+import { Background } from './Background';
+import { Header } from './Header';
+import { Dock, dockItems } from './Dock';
+
+type DashboardLayoutProps = {
+  children?: React.ReactNode;
+};
+export function DashboardLayout({ children }: DashboardLayoutProps) {
+  return (
+    <div className="relative overflow-hidden h-dvh outline-none inset-0">
+      <Header />
+      <section className="relative h-dvh snap-start overflow-hidden">
+        <Background />
+        <Dock items={dockItems} />
+        <div className="absolute inset-0 z-2 pt-[52px] md:pt-[64px] pb-[80px] overflow-y-auto">
+          {children}
+        </div>
+      </section>
+
+    </div>
+  );
+};
+
+
@@ -46,7 +46,7 @@ export const Dock = ({ items, className }: DockProps) => {
      ref={dockRef}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
-      className={`fixed bottom-4 left-1/2 -translate-x-1/2 z-[550] items-end gap-2 md:gap-6 px-2 py-1.5 md:px-3 md:py-2 rounded-2xl border backdrop-blur-xl shadow-lg ${className ?? 'flex'}`}
+      className={`fixed bottom-4 left-1/2 -translate-x-1/2 z-5 items-end gap-2 md:gap-6 px-2 py-1.5 md:px-3 md:py-2 rounded-2xl border backdrop-blur-xl shadow-lg ${className ?? 'flex'}`}
      style={{ backgroundColor: 'var(--dock-bg)', borderColor: 'var(--dock-border)' }}
    >
      {items.map((item, index) => {
@@ -89,3 +89,18 @@ export const Dock = ({ items, className }: DockProps) => {
    </div>
  );
 };
+
+
+import { Terminal, TerminalSquare, FileText, FolderOpen } from 'lucide-react';
+import { Sparkles, ClipboardList, ScrollText, Workflow } from 'lucide-react';
+
+export const dockItems: DockItem[] = [
+  { label: 'Chat', to: '/chat', icon: Terminal, color: '#60a5fa' },
+  { label: 'Files', to: '/files', icon: FolderOpen, color: '#fbbf24' },
+  { label: 'Terminal', to: '/terminal', icon: TerminalSquare, color: '#34d399' },
+  { label: 'Plans', to: '/plans', icon: FileText, color: '#f472b6' },
+  { label: 'Skills', to: '/skills', icon: Sparkles, color: '#c084fc' },
+  { label: 'Tasks', to: '/tasks', icon: ClipboardList, color: '#fb923c' },
+  { label: 'Processes', to: '/processes', icon: Workflow, color: '#2dd4bf' },
+  { label: 'Logs', to: '/task-logs', icon: ScrollText, color: '#94a3b8' },
+];
@@ -1,43 +0,0 @@
-type DebugPanelProps = {
-  fullControlMode: boolean;
-  cameraInfo: {
-    cameraPosition: number[];
-    target: number[];
-    zoom: number;
-  };
-  modelInfo: {
-    position: number[];
-    rotation: number[];
-    scale: number;
-  };
-};
-
-export function DebugPanel({ fullControlMode, cameraInfo, modelInfo }: DebugPanelProps) {
-  return (
-    <div className="fixed top-4 left-4 bg-black/80 text-white p-4 rounded text-xs font-mono space-y-2 z-[100]">
-      <div className="font-bold text-blue-400">Controls:</div>
-      <div className={fullControlMode ? 'text-green-300' : 'text-yellow-300'}>
-        Mode: {fullControlMode ? 'FULL CONTROL' : 'ROTATION ONLY'}
-      </div>
-      <div>* Left-click/Touch + drag: Rotate</div>
-      {fullControlMode && (
-        <>
-          <div>* Right-click + drag: Pan</div>
-          <div>* Scroll: Zoom</div>
-        </>
-      )}
-      <div>* Ctrl+Alt+Enter: Toggle full control</div>
-      <div>* Ctrl+Alt+D: Toggle debug panel</div>
-
-      <div className="font-bold text-green-400 pt-2">Camera:</div>
-      <div>Position: [{cameraInfo.cameraPosition.map((v) => v.toFixed(2)).join(', ')}]</div>
-      <div>Target: [{cameraInfo.target.map((v) => v.toFixed(2)).join(', ')}]</div>
-      <div>Zoom: {cameraInfo.zoom.toFixed(2)}</div>
-
-      <div className="font-bold text-yellow-400 pt-2">Model:</div>
-      <div>Position: [{modelInfo.position.map((v) => v.toFixed(2)).join(', ')}]</div>
-      <div>Rotation: [{modelInfo.rotation.map((v) => v.toFixed(2)).join(', ')}]</div>
-      <div>Scale: {modelInfo.scale.toFixed(2)}</div>
-    </div>
-  );
-}
@@ -1,118 +0,0 @@
-import { Canvas, useThree } from '@react-three/fiber';
-import { OrbitControls } from '@react-three/drei';
-import { useEffect, useState, useRef } from 'react';
-import { DuckModel } from './DuckModel';
-import { DebugPanel } from './DebugPanel';
-
-type CameraInfoProps = {
-  onUpdate: (info: { cameraPosition: number[]; target: number[]; zoom: number }) => void;
-  initialTarget: [number, number, number];
-  fullControlMode: boolean;
-  initialPosition: [number, number, number];
-};
-
-function CameraInfo({ onUpdate, initialTarget, fullControlMode, initialPosition }: CameraInfoProps) {
-  const { camera } = useThree();
-  const controlsRef = useRef<any>(null);
-
-  useEffect(() => {
-    if (controlsRef.current) {
-      controlsRef.current.target.set(...initialTarget);
-      camera.position.set(...initialPosition);
-      controlsRef.current.update();
-    }
-  }, [initialTarget, initialPosition, camera]);
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      if (controlsRef.current) {
-        const controls = controlsRef.current;
-        onUpdate({
-          cameraPosition: camera.position.toArray(),
-          target: controls.target.toArray(),
-          zoom: camera.zoom,
-        });
-      }
-    }, 100);
-
-    return () => clearInterval(interval);
-  }, [camera, onUpdate]);
-
-  return (
-    <OrbitControls
-      ref={controlsRef}
-      enabled={fullControlMode}
-      enableRotate={fullControlMode}
-      enableZoom={fullControlMode}
-      enablePan={fullControlMode}
-      target={initialTarget}
-    />
-  );
-}
-
-type DuckAvatarProps = {
-  showDebug: boolean;
-  fullControlMode: boolean;
-  currentSection: number;
-};
-
-export function DuckAvatar({ showDebug, fullControlMode, currentSection }: DuckAvatarProps) {
-  const isHeroSection = currentSection === 0;
-  const [cameraInfo, setCameraInfo] = useState({
-    cameraPosition: [2.89, 5.24, 7.38],
-    target: [0.3, 3.29, -0.4],
-    zoom: 1,
-  });
-
-  const [modelInfo, setModelInfo] = useState({
-    position: [0, -0.2, 0],
-    rotation: [-0.1, -0.75, 0],
-    scale: 4.5,
-  });
-
-  const [isLoaded, setIsLoaded] = useState(false);
-
-  const heroClasses = 'fixed top-12 md:top-auto md:bottom-0 left-1/2 -translate-x-1/2 w-[60vh] h-[75vh]';
-  const miniClasses = 'fixed bottom-4 right-4 w-[20vh] h-[25vh]';
-
-  return (
-    <div
-      className={`${isHeroSection ? heroClasses : miniClasses} overflow-visible z-1 pointer-events-none`}
-      style={{
-        background: 'transparent',
-        opacity: isLoaded ? 1 : 0,
-      }}
-    >
-      <div className="w-full h-full pointer-events-none overflow-visible" style={{ background: 'transparent' }}>
-        <Canvas
-          camera={{
-            position: [2.89, 5.24, 7.38],
-            fov: 65,
-            near: 0.1,
-            far: 1000,
-          }}
-          style={{ background: 'transparent' }}
-        >
-          <ambientLight intensity={1.5} />
-          <directionalLight position={[10, 10, 5]} intensity={2} />
-          <directionalLight position={[-10, -10, -5]} intensity={1} />
-          <pointLight position={[0, 5, 0]} intensity={1.5} />
-          <CameraInfo
-            onUpdate={setCameraInfo}
-            initialTarget={[0.3, 3.29, -0.4]}
-            fullControlMode={fullControlMode}
-            initialPosition={[2.89, 5.24, 7.38]}
-          />
-          <DuckModel
-            onUpdate={setModelInfo}
-            onAssetsLoaded={() => {
-              setIsLoaded(true);
-            }}
-            currentSection={currentSection}
-          />
-        </Canvas>
-      </div>
-      {showDebug && <DebugPanel fullControlMode={fullControlMode} cameraInfo={cameraInfo} modelInfo={modelInfo} />}
-    </div>
-  );
-}
@@ -1,68 +0,0 @@
-import { useRef, useEffect } from 'react';
-import { useGLTF, useAnimations } from '@react-three/drei';
-
-type DuckModelProps = {
-  onUpdate: (info: { position: number[]; rotation: number[]; scale: number }) => void;
-  onAssetsLoaded: () => void;
-  currentSection: number;
-};
-
-export function DuckModel({ onUpdate, onAssetsLoaded, currentSection }: DuckModelProps) {
-  const character = useGLTF('/static/duck3D/Character_output.glb');
-  const animations = useGLTF('/static/duck3D/Meshy_Merged_Animations.glb');
-  const meshRef = useRef<any>(null);
-  const { actions } = useAnimations(animations.animations, meshRef);
-
-  useEffect(() => {
-    onAssetsLoaded();
-  }, [character, animations, onAssetsLoaded]);
-
-  useEffect(() => {
-    if (!actions) return;
-
-    const isContactSection = currentSection === 6;
-
-    if (isContactSection) {
-      Object.values(actions).forEach((a) => a?.fadeOut(0.4));
-      return;
-    }
-
-    const action = actions['Walking'];
-    if (!action) return;
-
-    Object.values(actions).forEach((a) => a?.fadeOut(0.4));
-
-    action.reset();
-    action.setLoop(2201, Infinity);
-    action.clampWhenFinished = false;
-    action.fadeIn(0.4);
-    action.play();
-  }, [actions, currentSection]);
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      if (meshRef.current) {
-        onUpdate({
-          position: meshRef.current.position.toArray(),
-          rotation: meshRef.current.rotation.toArray().slice(0, 3),
-          scale: meshRef.current.scale.x,
-        });
-      }
-    }, 100);
-
-    return () => clearInterval(interval);
-  }, [onUpdate]);
-
-  const isContactSection = currentSection === 6;
-  const rotationY = isContactSection ? 0 : (10 * Math.PI) / 180;
-
-  return (
-    <primitive
-      ref={meshRef}
-      object={character.scene}
-      position={[0, -0.2, 0]}
-      scale={4.5}
-      rotation={[-0.1, rotationY, 0]}
-    />
-  );
-}
@@ -1 +0,0 @@
-export * from './DuckAvatar';
@@ -0,0 +1,25 @@
+import { Link } from 'react-router';
+import { UserMenu } from './UserMenu';
+
+export function Header() {
+  return (
+    <header className="fixed z-10 w-full">
+      <div
+        className="shrink-0 border-b backdrop-blur-xl shadow-lg px-3 py-2 md:px-6 md:py-3 flex items-center justify-between"
+        style={{ backgroundColor: 'rgba(255, 255, 255, 0.25)', borderColor: 'rgba(255, 255, 255, 0.35)' }}
+      >
+        <Link to="/">
+          <img
+            src="/static/officer-logo.svg"
+            alt="Officer"
+            className="h-8 md:h-12 w-auto"
+            style={{ transform: 'skew(-15deg, -2deg)' }}
+          />
+        </Link>
+        <UserMenu />
+
+      </div>
+    </header>
+  );
+}
+
@@ -0,0 +1,59 @@
+import { Link } from 'react-router';
+import * as Dropdown from '@/components/ui/dropdown-menu';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { User, LogOut, Server, Package, Bot } from 'lucide-react';
+import { useAuth } from 'hooks/useAuth';
+
+const { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } = Dropdown;
+
+export function UserMenu() {
+  const { user, isLoading } = useAuth();
+  if (isLoading) return null;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <button className="rounded-full outline-none focus-visible:ring-2 focus-visible:ring-duck-yellow cursor-pointer">
+          <Avatar className="h-9 w-9 rounded-full">
+            <AvatarImage src={user?.avatar ?? undefined} />
+            <AvatarFallback className="bg-duck-teal text-duck-yellow text-sm font-bold rounded-full">
+              {user?.name?.charAt(0).toUpperCase() ?? '?'}
+            </AvatarFallback>
+          </Avatar>
+        </button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="z-10 w-48">
+        <DropdownMenuItem asChild className="cursor-pointer">
+          <Link to="/settings/profile">
+            <User className="mr-2 h-4 w-4" />
+            Profile
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild className="cursor-pointer">
+          <Link to="/settings/ai">
+            <Bot className="mr-2 h-4 w-4" />
+            AI Settings
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild className="cursor-pointer">
+          <Link to="/settings/server">
+            <Server className="mr-2 h-4 w-4" />
+            Server Settings
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild className="cursor-pointer">
+          <Link to="/settings/resources">
+            <Package className="mr-2 h-4 w-4" />
+            Resources
+          </Link>
+        </DropdownMenuItem>
+        <DropdownMenuItem asChild className="cursor-pointer">
+          <Link to="/auth/signout">
+            <LogOut className="mr-2 h-4 w-4" />
+            Sign Out
+          </Link>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
@@ -0,0 +1 @@
+export * from './Header';
@@ -1 +1 @@
-export * from './AuthenticationLayout';
+export * from './DashboardLayout';
@@ -1,6 +1,5 @@
 import { useState, useEffect } from 'react';
 import { useServerSettings } from '@/state/useServerSettings';
-import { DashboardLayout } from '../Layout';
 import { ServerTypeCard } from './ServerTypeCard';
 import { AIHarnessesCard } from './AIHarnessesCard';

@@ -46,15 +45,13 @@ export const OnboardingAdmin = () => {
  };

  return (
-    <DashboardLayout>
-      <div className="flex items-center justify-center h-full px-4">
-        <div className="w-full max-w-lg">
-          {step === 'server-type' && <ServerTypeCard onNext={nextStep} saveSettings={saveSettings} />}
-          {step === 'ai-harnesses' && (
-            <AIHarnessesCard onNext={nextStep} onBack={prevStep} saveSettings={saveSettings} />
-          )}
-        </div>
+    <div className="flex items-center justify-center h-full px-4">
+      <div className="w-full max-w-lg">
+        {step === 'server-type' && <ServerTypeCard onNext={nextStep} saveSettings={saveSettings} />}
+        {step === 'ai-harnesses' && (
+          <AIHarnessesCard onNext={nextStep} onBack={prevStep} saveSettings={saveSettings} />
+        )}
      </div>
-    </DashboardLayout>
+    </div>
  );
 };
@@ -5,8 +5,6 @@ import remarkGfm from 'remark-gfm';
 import rehypeRaw from 'rehype-raw';
 import { useClient } from 'hooks/useClient';
 import { Card } from '@/components/Card';
-import { DashboardLayout } from '../Layout';
-
 export const Plans = () => {
  const client = useClient();
  const [selectedPlan, setSelectedPlan] = useState<string | null>(null);
@@ -29,8 +27,7 @@ export const Plans = () => {
  });

  return (
-    <DashboardLayout>
-      <div className="flex flex-col h-full p-4">
+    <div className="flex flex-col h-full p-4">
        <Card className="flex-1 overflow-hidden">
          {/* Header with plan selector */}
          <div className="shrink-0 flex items-center gap-3 px-4 py-2 border-b border-duck-dark/10 bg-white/60">
@@ -59,7 +56,6 @@ export const Plans = () => {
            </div>
          </div>
        </Card>
-      </div>
-    </DashboardLayout>
+    </div>
  );
 };
@@ -11,8 +11,6 @@ import { useClient } from 'hooks/useClient';
 import { useVisibleClaudeModels } from '@/state/useModels';
 import { Card } from '@/components/Card';
 import { useClaude, EmbeddableChat, type ChatMessage } from 'plugins/Chat/client';
-import { DashboardLayout } from './Layout';
-
 type ResourceSummary = {
  dirName: string;
  name: string;
@@ -180,7 +178,7 @@ export const ResourcePage = ({ kind, endpoint, queryKey }: ResourcePageProps) =>
  );

  return (
-    <DashboardLayout mobileFull={editing}>
+    <>
      <div className="flex h-full p-2 md:p-4 gap-2 md:gap-4">
        {/* Left panel — list */}
        <Card
@@ -377,6 +375,6 @@ export const ResourcePage = ({ kind, endpoint, queryKey }: ResourcePageProps) =>
          </div>
        </DialogContent>
      </Dialog>
-    </DashboardLayout>
+    </>
  );
 };
@@ -11,7 +11,6 @@ import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/ui/accordion';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Card } from '@/components/Card';
-import { DashboardLayout } from '../Layout';
 import { useSettings } from '@/state/useSettings';
 import { useUserState } from '@/state/useUserState';
 import {
@@ -26,9 +25,8 @@ export const AISettings = () => {
  const [mainTab, setMainTab] = useUserState('ai-settings-tab', 'chat-defaults');

  return (
-    <DashboardLayout>
-      <div className="flex justify-center h-full px-4 py-8 overflow-y-auto">
-        <Card className="w-full max-w-2xl h-fit p-6">
+    <div className="flex justify-center h-full px-4 py-8 overflow-y-auto">
+      <Card className="w-full max-w-2xl h-fit p-6">
          <Tabs value={mainTab} onValueChange={setMainTab}>
            <TabsList className="w-full mb-6">
              <TabsTrigger value="chat-defaults" className="flex-1 gap-2 cursor-pointer">
@@ -49,9 +47,8 @@ export const AISettings = () => {
              <ModelVisibilitySection />
            </TabsContent>
          </Tabs>
-        </Card>
-      </div>
-    </DashboardLayout>
+      </Card>
+    </div>
  );
 };

@@ -3,12 +3,10 @@ import { Search, User, Lock, Globe, ListChecks, Palette } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/ui/accordion';
 import { Card } from '@/components/Card';
-import { DashboardLayout } from '../../Layout';
 import { UserData } from './UserData';
 import { ChangePassword } from './ChangePassword';
 import { Languages } from './Languages';
 import { TaskDefaults } from './TaskDefaults';
-import { Appearance } from './Appearance';

 const sections = [
  {
@@ -19,11 +17,11 @@ const sections = [
    content: <UserData />,
  },
  {
-    key: 'appearance',
-    icon: Palette,
-    title: 'Appearance',
-    description: 'Color theme and light/dark mode.',
-    content: <Appearance />,
+    key: 'change-password',
+    icon: Lock,
+    title: 'Change Password',
+    description: 'Update your account password.',
+    content: <ChangePassword />,
  },
  {
    key: 'tasks',
@@ -39,13 +37,6 @@ const sections = [
    description: 'Set your spoken languages and translation preferences.',
    content: <Languages />,
  },
-  {
-    key: 'change-password',
-    icon: Lock,
-    title: 'Change Password',
-    description: 'Update your account password.',
-    content: <ChangePassword />,
-  },
 ];

 const allKeys = sections.map((s) => s.key);
@@ -71,42 +62,40 @@ export const ProfileSettings = () => {
  }, [search, matchingKeys]);

  return (
-    <DashboardLayout>
-      <div className="flex justify-center h-full px-4 py-8 overflow-y-auto">
-        <Card className="w-full max-w-2xl h-fit p-6">
-          <div className="relative mb-6">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-duck-dark/40" />
-            <Input
-              placeholder="Search settings..."
-              value={search}
-              onChange={(ev) => setSearch(ev.target.value)}
-              className="pl-9"
-            />
-          </div>
+    <div className="flex justify-center h-full px-4 py-8 overflow-y-auto">
+      <Card className="w-full max-w-2xl h-fit p-6">
+        <div className="relative mb-6">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-duck-dark/40" />
+          <Input
+            placeholder="Search settings..."
+            value={search}
+            onChange={(ev) => setSearch(ev.target.value)}
+            className="pl-9"
+          />
+        </div>

-          <Accordion type="multiple" value={expanded} onValueChange={setExpanded}>
-            {sections.map((section) => (
-              <div
-                key={section.key}
-                ref={(el) => {
-                  sectionRefs.current[section.key] = el;
-                }}
-                className={search && !matchingKeys.includes(section.key) ? 'hidden' : ''}
-              >
-                <AccordionItem value={section.key}>
-                  <AccordionTrigger className="hover:no-underline">
-                    <div className="flex items-center gap-3">
-                      <section.icon className="h-5 w-5 text-duck-forest shrink-0" />
-                      <div className="text-base font-bold text-duck-dark">{section.title}</div>
-                    </div>
-                  </AccordionTrigger>
-                  <AccordionContent>{section.content}</AccordionContent>
-                </AccordionItem>
-              </div>
-            ))}
-          </Accordion>
-        </Card>
-      </div>
-    </DashboardLayout>
+        <Accordion type="multiple" value={expanded} onValueChange={setExpanded}>
+          {sections.map((section) => (
+            <div
+              key={section.key}
+              ref={(el) => {
+                sectionRefs.current[section.key] = el;
+              }}
+              className={search && !matchingKeys.includes(section.key) ? 'hidden' : ''}
+            >
+              <AccordionItem value={section.key}>
+                <AccordionTrigger className="hover:no-underline">
+                  <div className="flex items-center gap-3">
+                    <section.icon className="h-5 w-5 text-duck-forest shrink-0" />
+                    <div className="text-base font-bold text-duck-dark">{section.title}</div>
+                  </div>
+                </AccordionTrigger>
+                <AccordionContent>{section.content}</AccordionContent>
+              </AccordionItem>
+            </div>
+          ))}
+        </Accordion>
+      </Card>
+    </div>
  );
 };
@@ -5,7 +5,6 @@ import { toast } from 'sonner';
 import { Button } from '@/components/ui/button';
 import { Card } from '@/components/Card';
 import { useClient } from 'hooks/useClient';
-import { DashboardLayout } from '../../Layout';
 import { EmbeddableChat, useClaude, useOpenCode } from 'plugins/Chat/client';
 import { useVisibleClaudeModels, useVisibleOpenCodeModels } from '@/state/useModels';

@@ -82,8 +81,7 @@ export const ResourceSettings = () => {
  const [provider, setProvider] = useState<'claude' | 'opencode'>('claude');

  return (
-    <DashboardLayout>
-      <div className="flex h-full gap-4 px-4 py-8 overflow-hidden">
+    <div className="flex h-full gap-4 px-4 py-8 overflow-hidden">
        <Card className="w-full max-w-2xl h-fit p-6 overflow-y-auto">
          <h2 className="text-lg font-bold text-duck-dark mb-1">Applications</h2>
          <p className="text-sm text-duck-dark/60 mb-6">System tools and dependencies used by Officer.dev</p>
@@ -175,8 +173,7 @@ export const ResourceSettings = () => {
            <OpenCodeChat key="opencode" onProviderChange={setProvider} />
          )}
        </Card>
-      </div>
-    </DashboardLayout>
+    </div>
  );
 };

@@ -1,11 +1,10 @@
 import { useState, useEffect, useRef, useMemo } from 'react';
-import { Search, Terminal, Puzzle, Shield } from 'lucide-react';
+import { Search, Terminal, Shield } from 'lucide-react';
 import { Input } from '@/components/ui/input';
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@/components/ui/accordion';
 import { Card } from '@/components/Card';
-import { DashboardLayout } from '../../Layout';
 import { AIHarnessesSection } from './AIHarnessesSection';
-import { PluginsSection } from './PluginsSection';
+// import { PluginsSection } from './PluginsSection';
 import { TerminalSection } from './TerminalSection';

 const sections = [
@@ -16,13 +15,13 @@ const sections = [
    description: 'Which AI coding tools do you use?',
    content: <AIHarnessesSection />,
  },
-  {
-    key: 'plugins',
-    icon: Puzzle,
-    title: 'Plugins',
-    description: 'Enable or disable installed plugins.',
-    content: <PluginsSection />,
-  },
+  // {
+  //   key: 'plugins',
+  //   icon: Puzzle,
+  //   title: 'Plugins',
+  //   description: 'Enable or disable installed plugins.',
+  //   content: <PluginsSection />,
+  // },
  {
    key: 'terminal',
    icon: Shield,
@@ -55,45 +54,43 @@ export const ServerSettings = () => {
  }, [search, matchingKeys]);

  return (
-    <DashboardLayout>
-      <div className="flex justify-center h-full px-4 py-8 overflow-y-auto">
-        <Card className="w-full max-w-2xl h-fit p-6">
-          <div className="relative mb-6">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-duck-dark/40" />
-            <Input
-              placeholder="Search settings..."
-              value={search}
-              onChange={(ev) => setSearch(ev.target.value)}
-              className="pl-9"
-            />
-          </div>
+    <div className="flex justify-center h-full px-4 py-8 overflow-y-auto">
+      <Card className="w-full max-w-2xl h-fit p-6">
+        <div className="relative mb-6">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-duck-dark/40" />
+          <Input
+            placeholder="Search settings..."
+            value={search}
+            onChange={(ev) => setSearch(ev.target.value)}
+            className="pl-9"
+          />
+        </div>

-          <Accordion type="multiple" value={expanded} onValueChange={setExpanded}>
-            {sections.map((section) => (
-              <div
-                key={section.key}
-                ref={(el) => {
-                  sectionRefs.current[section.key] = el;
-                }}
-                className={search && !matchingKeys.includes(section.key) ? 'hidden' : ''}
-              >
-                <AccordionItem value={section.key}>
-                  <AccordionTrigger className="hover:no-underline">
-                    <div className="flex items-center gap-3">
-                      <section.icon className="h-5 w-5 text-duck-forest shrink-0" />
-                      <div className="text-left">
-                        <div className="text-base font-bold text-duck-dark">{section.title}</div>
-                        <div className="text-sm font-normal text-duck-dark/70">{section.description}</div>
-                      </div>
+        <Accordion type="multiple" value={expanded} onValueChange={setExpanded}>
+          {sections.map((section) => (
+            <div
+              key={section.key}
+              ref={(el) => {
+                sectionRefs.current[section.key] = el;
+              }}
+              className={search && !matchingKeys.includes(section.key) ? 'hidden' : ''}
+            >
+              <AccordionItem value={section.key}>
+                <AccordionTrigger className="hover:no-underline">
+                  <div className="flex items-center gap-3">
+                    <section.icon className="h-5 w-5 text-duck-forest shrink-0" />
+                    <div className="text-left">
+                      <div className="text-base font-bold text-duck-dark">{section.title}</div>
+                      <div className="text-sm font-normal text-duck-dark/70">{section.description}</div>
                    </div>
-                  </AccordionTrigger>
-                  <AccordionContent forceMount>{section.content}</AccordionContent>
-                </AccordionItem>
-              </div>
-            ))}
-          </Accordion>
-        </Card>
-      </div>
-    </DashboardLayout>
+                  </div>
+                </AccordionTrigger>
+                <AccordionContent forceMount>{section.content}</AccordionContent>
+              </AccordionItem>
+            </div>
+          ))}
+        </Accordion>
+      </Card>
+    </div>
  );
 };
@@ -1,29 +1,4 @@
-import { Link } from 'react-router';
-import { Bot, ChevronRight } from 'lucide-react';
-import { Card } from '@/components/Card';
-import { DashboardLayout } from '../Layout';
-
-export const Settings = () => {
-  return (
-    <DashboardLayout>
-      <div className="flex items-center justify-center h-full px-4">
-        <div className="w-full max-w-4xl grid grid-cols-1 lg:grid-cols-2 gap-8">
-          <Link to="/settings/ai">
-            <Card className="p-6 hover:border-duck-teal/50 transition-colors cursor-pointer">
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-3">
-                  <Bot className="h-5 w-5 text-duck-forest" />
-                  <div>
-                    <h2 className="text-xl font-bold text-duck-dark">AI Settings</h2>
-                    <p className="text-sm text-duck-dark/60">Chat defaults, model visibility</p>
-                  </div>
-                </div>
-                <ChevronRight className="h-5 w-5 text-duck-dark/40" />
-              </div>
-            </Card>
-          </Link>
-        </div>
-      </div>
-    </DashboardLayout>
-  );
-};
+export * from './ProfileSettings';
+export * from './AISettings';
+export * from './ServerSettings';
+export * from './ResourceSettings';
@@ -1,7 +1,6 @@
 import { useState, useEffect } from 'react';
 import { Search, AlertCircle, CheckCircle2, Clock, ArrowLeft } from 'lucide-react';
 import { useClient } from 'hooks/useClient';
-import { DashboardLayout } from '../Layout';
 import { Card } from '@/components/Card';
 import { MessageBubble, type ChatMessage } from 'plugins/Chat/client';

@@ -77,8 +76,7 @@ export const TaskLogs = () => {
    : logs;

  return (
-    <DashboardLayout>
-      <div className="flex h-full p-3 md:p-6 gap-4">
+    <div className="flex h-full p-3 md:p-6 gap-4">
        {/* Left panel: list */}
        <Card
          className={`md:w-80 shrink-0 flex flex-col overflow-hidden ${showDetail ? 'hidden md:flex' : 'flex-1 md:flex-none'}`}
@@ -174,7 +172,6 @@ export const TaskLogs = () => {
            </>
          )}
        </Card>
-      </div>
-    </DashboardLayout>
+    </div>
  );
 };
@@ -0,0 +1,5 @@
+import { TerminalView } from 'widgets/TerminalView';
+
+export const Terminal = () => {
+  return <TerminalView className="h-full w-full p-2" />;
+};
@@ -0,0 +1,13 @@
+export * from './Layout';
+export * from './Home';
+export * from './Chat';
+export * from './OnboardingAdmin';
+export * from './PasskeyGate';
+export * from './Plans';
+export * from './Processes';
+export * from './ResourcePage';
+export * from './Settings';
+export * from './Skills';
+export * from './TaskLogs';
+export * from './Tasks';
+export * from './Terminal';
@@ -6,18 +6,6 @@ import { ThemeProvider } from '@/components/ui/ThemeProvider';
 import { Toaster } from '@/components/ui/toaster';
 import { Toaster as Sonner } from 'sonner';
 import { TooltipProvider } from '@/components/ui/tooltip';
-import 'themes/DuckPond/client';
-import 'themes/TokyoNight/client';
-import 'themes/CatppuccinLatte/client';
-import 'themes/CatppuccinMocha/client';
-import 'themes/Everforest/client';
-import 'themes/Gruvbox/client';
-import 'themes/Kanagawa/client';
-import 'themes/MatteBlack/client';
-import 'themes/Nord/client';
-import 'themes/OsakaJade/client';
-import 'themes/Ristretto/client';
-import 'themes/RosePine/client';
 import './styles/index.css';

 const headLinks = [
@@ -2,47 +2,12 @@ import { useEffect } from 'react';
 import { useTheme } from '@/components/ui/ThemeProvider';
 import { useSettings } from './useSettings';

-const THEME_MODES: Record<string, 'light' | 'dark'> = {
-  DuckPond: 'light',
-  TokyoNight: 'dark',
-  CatppuccinLatte: 'light',
-  CatppuccinMocha: 'dark',
-  Everforest: 'dark',
-  Gruvbox: 'dark',
-  Kanagawa: 'dark',
-  MatteBlack: 'dark',
-  Nord: 'dark',
-  OsakaJade: 'dark',
-  Ristretto: 'dark',
-  RosePine: 'dark',
-};
-
-const BG_IMAGES: Record<string, string> = {
-  DuckPond: 'url(/static/landscape1.jpg)',
-};
-
 export const useThemeSync = () => {
  const { settings } = useSettings();
  const { setTheme } = useTheme();

  useEffect(() => {
    if (!settings) return;
-    const colorTheme = settings.appearance.colorTheme ?? 'DuckPond';
-    const root = document.documentElement;
-
-    // Set data attribute for CSS scoping (DuckPond uses :root as default)
-    if (colorTheme === 'DuckPond') {
-      root.removeAttribute('data-color-theme');
-    } else {
-      root.setAttribute('data-color-theme', colorTheme);
-    }
-
-    // Set light/dark class based on theme mode
-    const mode = THEME_MODES[colorTheme] ?? 'light';
-    setTheme(mode);
-
-    // Set background image
-    const bgImage = BG_IMAGES[colorTheme] ?? 'none';
-    root.style.setProperty('--page-bg-image', bgImage);
+    setTheme('light');
  }, [settings?.appearance?.colorTheme]);
 };
@@ -121,6 +121,169 @@
 }

@layer base {
+  :root {
+    /* Duck brand hex colors */
+    --duck-yellow: #F4C430;
+    --duck-orange: #EA580C;
+    --duck-teal: #0891B2;
+    --duck-forest: #166534;
+    --duck-dark: #14532D;
+    --duck-beige: #E7D4B5;
+
+    /* Page background */
+    --pixel-grid-color: rgba(20, 83, 45, 0.1);
+
+    /* Glass surfaces */
+    --glass-bg: rgba(255, 255, 255, 0.1);
+    --glass-border: rgba(255, 255, 255, 0.2);
+    --dock-bg: rgba(0, 0, 0, 0.15);
+    --dock-border: rgba(255, 255, 255, 0.1);
+    --dock-tooltip-bg: rgba(0, 0, 0, 0.75);
+
+    /* Card component */
+    --card-bg: rgba(255, 255, 255, 0.9);
+    --card-grid-color: rgba(20, 83, 45, 0.08);
+
+    --cta: 211 74.77% 45.58%;
+    --cta-foreground: 0 0% 100%;
+
+    --naturegreen: 145 79% 38%;
+    --naturegreen-foreground: 0 0% 100%;
+
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 211 74.77% 45.58%;
+    --accent-foreground: 0 0% 0%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --success: 142.1 76.2% 36.3%;
+    --success-foreground: 355.7 100% 97.3%;
+
+    --brand: 145 79% 38%;
+    --brand-foreground: 0 0% 100%;
+    --brand-muted: 145 40% 90%;
+
+    --warning: 43 96% 56%;
+    --warning-foreground: 0 0% 0%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.5rem;
+
+    /* Chart gradients */
+    --chart-primary: 211 82% 64%;
+    --chart-secondary: 211 82% 84%;
+
+    /* Status colors */
+    --status-success: 142 76% 36%;
+    --status-warning: 43 96% 56%;
+    --status-in-progress: 211 82% 64%;
+
+    --sidebar-background: 0 0% 98%;
+    --sidebar-foreground: 240 5.3% 26.1%;
+    --sidebar-primary: 240 5.9% 10%;
+    --sidebar-primary-foreground: 0 0% 98%;
+    --sidebar-accent: 240 4.8% 95.9%;
+    --sidebar-accent-foreground: 240 5.9% 10%;
+    --sidebar-border: 220 13% 91%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+
+    /* Hover Effect */
+    --ctahover: 211 91.53% 34.82%;
+  }
+
+  .dark {
+    /* Page background */
+    --pixel-grid-color: rgba(200, 230, 210, 0.08);
+
+    /* Glass surfaces */
+    --glass-bg: rgba(0, 0, 0, 0.2);
+    --glass-border: rgba(255, 255, 255, 0.1);
+    --dock-bg: rgba(0, 0, 0, 0.3);
+    --dock-border: rgba(255, 255, 255, 0.08);
+    --dock-tooltip-bg: rgba(0, 0, 0, 0.85);
+
+    /* Card component */
+    --card-bg: rgba(10, 20, 15, 0.9);
+    --card-grid-color: rgba(200, 230, 210, 0.06);
+
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 211 82% 64%;
+    --accent-foreground: 0 0% 0%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --success: 142.1 76.2% 36.3%;
+    --success-foreground: 355.7 100% 97.3%;
+
+    --brand: 145 60% 45%;
+    --brand-foreground: 0 0% 100%;
+    --brand-muted: 145 30% 25%;
+
+    --warning: 43 96% 56%;
+    --warning-foreground: 0 0% 0%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+
+    /* Chart gradients */
+    --chart-primary: 211 82% 64%;
+    --chart-secondary: 211 82% 84%;
+
+    /* Status colors */
+    --status-success: 142 76% 36%;
+    --status-warning: 43 96% 56%;
+    --status-in-progress: 211 82% 64%;
+
+    --sidebar-background: 240 5.9% 10%;
+    --sidebar-foreground: 240 4.8% 95.9%;
+    --sidebar-primary: 224.3 76.3% 48%;
+    --sidebar-primary-foreground: 0 0% 100%;
+    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent-foreground: 240 4.8% 95.9%;
+    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-ring: 217.2 91.2% 59.8%;
+  }
+
  * {
    @apply border-border;
  }
@@ -1 +1,2 @@
@import "./globals.css";
+@import "./prose.css";
@@ -7,7 +7,7 @@ import { verify } from './servers/jwt';
 import { officerdb, TokenBlacklist } from 'officerdb';
 import { claudeWebsocket } from './servers/api/claude/websocket';
 import { opencodeWebsocket } from './servers/api/opencode/websocket';
-import { terminalWebsocket } from 'plugins/Terminal/server';
+import { terminalWebsocket } from './servers/api/terminal/websocket';
 import officerWeb from './apps/officer-web/index.html';

 const { PORT = '5000' } = process.env;
@@ -171,6 +171,11 @@ const startDockerSidecar = (port: number, homeDir: string, userId: number): { do
  const dockerId = `officer-terminal-${userId}`;
  const tag = 'officer-terminal-sidecar:v1';

+  // Remove stale container with same name if it exists
+  if (dockerContainerExists(dockerId)) {
+    Bun.spawnSync({ cmd: [dockerPath, 'rm', '-f', dockerId], stdout: 'ignore', stderr: 'ignore' });
+  }
+
  let userArgs: string[] = [];
  try {
    const stats = statSync(homeDir);
@@ -268,6 +273,7 @@ const ensureDockerContainer = async (email: string, userId: number, homeDir: str

  if (existing && dockerContainerExists(existing.dockerId)) {
    if (dockerStart(existing.dockerId)) return existing;
+    stopDockerSidecar(existing.dockerId);
  }

  const port = existing?.port ?? getAvailablePort(map, userId);
@@ -1,308 +0,0 @@
-# Terminal Plugin Spec
-
-This document describes the Terminal plugin implementation, architecture, and integration points. It is a reference for continuing work later.
-
-## Goals
-
- Provide a browser terminal (xterm.js) inside Officer.
- Support two execution modes:
-  - Host mode: shell runs on the host machine.
-  - Sandbox mode: shell runs inside a Docker sidecar container.
- Keep host mode working and optional; sandbox is enabled via admin settings.
- Keep all terminal logic self-contained in the plugin.
- Allow the terminal UI to be rendered anywhere with a reusable component.
-
-## File Layout
-
- `src/workspaces/plugins/Terminal/index.ts`
-  - Exports plugin metadata, client screen, and server websocket handler.
- `src/workspaces/plugins/Terminal/client/TerminalView.tsx`
-  - Reusable terminal component (xterm + websocket bridge).
- `src/workspaces/plugins/Terminal/client/Screen/index.tsx`
-  - Page wrapper that renders `TerminalView` inside `DashboardLayout`.
- `src/workspaces/plugins/Terminal/client/index.ts`
-  - Exports `Screen` and `TerminalView`.
- `src/workspaces/plugins/Terminal/server/websocket.ts`
-  - WebSocket handler for terminal sessions and sidecar orchestration.
- `src/workspaces/plugins/Terminal/server/pty-sidecar.mjs`
-  - Node sidecar process that owns `node-pty` and shell spawn.
- `src/workspaces/plugins/Terminal/server/Dockerfile.terminal-sidecar`
-  - Docker image for sandbox mode.
- `src/workspaces/plugins/Terminal/server/templates/.zshrc`
- `src/workspaces/plugins/Terminal/server/templates/starship-officer.toml`
-  - Template configs copied into user home for stable shell UX.
-
-## Client Architecture
-
-### TerminalView
-
-`TerminalView` is the reusable component that can be rendered anywhere.
-
-Props:
-
- `className?: string`
- `style?: CSSProperties`
- `wsPath?: string` (default: `/api/terminal/ws`)
- `fontSize?: number` (default: 14)
- `fontFamily?: string`
- `theme?: { background?; foreground?; cursor?; selectionBackground? }`
- `autoFocus?: boolean` (default: true)
- `onReady?: (term: XTerm) => void`
- `onExit?: () => void`
- `onDisconnect?: () => void`
-
-Behavior:
-
- Initializes xterm after mount for StrictMode compatibility.
- Connects to websocket at `wsPath`, appending `token` from localStorage.
- Sends `resize` on open, and on ResizeObserver changes.
- Forwards terminal input as `{ type: 'input', data }` JSON.
- Writes server output on `{ type: 'output', data }`.
- Emits `onExit` when `{ type: 'exit' }` is received.
- Emits `onDisconnect` when the websocket closes.
-
-### Screen
-
-`Screen` is a thin wrapper around `TerminalView` for the full-page route:
-
-```
-<DashboardLayout>
-  <TerminalView className="h-full w-full p-2" />
-</DashboardLayout>
-```
-
-This matches plugin conventions used by FileBrowser.
-
-## Server Architecture
-
-### WebSocket Flow
-
-The terminal websocket is mounted in `src/server.tsx`:
-
- Path: `/api/terminal/ws`
- Auth: `token` query parameter, validated with `verify()`.
- Server handler: `terminalWebsocket` from `plugins/Terminal/server`.
-
-Message formats between client and server:
-
- Client -> server:
-  - `{ type: 'input', data: string }`
-  - `{ type: 'resize', cols: number, rows: number }`
- Server -> client:
-  - `{ type: 'output', data: string }`
-  - `{ type: 'exit' }`
-
-### Sidecar Model
-
-The Bun server does not spawn PTYs directly. Instead it proxies to a Node sidecar
-that runs `node-pty` for reliability.
-
-There are two sidecar modes:
-
-1. Host mode
-   - Spawns a local Node sidecar on the host via Bun.
-   - Sidecar binds to `127.0.0.1`.
-
-2. Docker sandbox mode
-   - Runs a Docker container per user.
-   - Container binds to `0.0.0.0` and is mapped to a host port.
-   - Container runs the same Node sidecar and shell inside the container.
-
-### Mode Selection
-
- Settings are stored in `~/.config/officer.dev/server-settings.json`.
- `terminalSandboxed: true` enables Docker mode.
- If `terminalSandboxed` is falsy, host mode is used.
-
-### Sidecar Handshake
-
-On websocket open:
-
- Determine user home: `getHomeDir(email)`.
- Ensure the home directory exists.
- Determine mode (host or docker).
- Connect to sidecar on a port (host: default 5337; docker: user-specific).
- Send init payload to sidecar:
-
-```
-{
-  type: 'init',
-  shell: { command, args, name },
-  cwd,
-  homeDir,
-  userLabel
-}
-```
-
- `userLabel` is the email used by the prompt template.
- `cwd` and `homeDir` are `/home/officer` in Docker, or the user home on host.
-
-### Docker Container Lifecycle
-
-Containers are named `officer-terminal-${userId}` and stored per user in:
-
-`data/terminal-containers.json`
-
-Rules:
-
- Reuse an existing container if it exists and is running.
- Restart the container if it exists but stopped.
- Start a new container if none exists; allocate a port starting at 54000.
- Containers are left running for reuse when websocket closes.
-
-### Docker Image
-
- Tag: `officer-terminal-sidecar:v1`
- Built from `Dockerfile.terminal-sidecar` when missing.
-
-Includes:
-
- zsh, git, curl, ca-certificates
- oh-my-zsh
- starship
- fortune-mod, cowsay
- eza
- node, ws, node-pty
-
-### Shell Configuration
-
-Templates are copied into the user's home if missing:
-
- `.zshrc`
- `.config/starship-officer.toml`
-
-This provides a stable base for all users while allowing per-user customization.
-
-Prompt requirement:
-
- Format: `email@domain:officer.dev`
- Email colored in button blue (#0891B2)
-
-## Plugin Conventions
-
- `index.ts` exports `plugin` metadata with `id` matching folder name.
- Client exports use `Widget`/`Screen` conventions. Terminal only exports `Screen`
-  and `TerminalView` (no widget).
- Server exports a websocket handler (not a router). This is a special-case
-  plugin that is mounted in `src/server.tsx`.
-
-## Known Constraints
-
- Terminal mode is global via server settings; no per-component mode selection.
- `TerminalView` builds the websocket URL from `window.location` and localStorage
-  token; custom auth is not supported yet.
- Sidecar connection retries are bounded; errors are printed to the terminal.
-
-## Potential Future Enhancements
-
- Allow `TerminalView` to request mode/cwd via websocket init payload.
- Add a read-only mode or initial command support.
- Add per-component theme presets or allow app-level defaults.
- Add better telemetry/logging for sidecar startup failures.
-
-## API Contract
-
-This section describes the messages across each layer.
-
-### Client <-> Server (Bun)
-
-Client -> server:
-
- `input`
-  - `{ type: 'input', data: string }`
-  - `data` is raw terminal input from xterm.
- `resize`
-  - `{ type: 'resize', cols: number, rows: number }`
-
-Server -> client:
-
- `output`
-  - `{ type: 'output', data: string }`
-  - `data` is raw PTY output to be written to xterm.
- `exit`
-  - `{ type: 'exit' }`
-  - Signals terminal process termination.
-
-### Server <-> Sidecar (Node)
-
-Server -> sidecar:
-
- `init`
-  - `{ type: 'init', shell, cwd, homeDir, userLabel }`
-  - `shell`: `{ command: string; args: string[]; name: string }`
-  - `cwd`: initial current working directory
-  - `homeDir`: home directory to set in the sidecar
-  - `userLabel`: email for the prompt template
- `input`
-  - `{ type: 'input', data: string }`
- `resize`
-  - `{ type: 'resize', cols: number, rows: number }`
-
-Sidecar -> server:
-
- `output`
-  - `{ type: 'output', data: string }`
- `exit`
-  - `{ type: 'exit' }`
-
-## Sequence Diagram
-
-```
-Client (xterm)     Bun Server          Sidecar (Node)          Shell
-     |                 |                     |                  |
-     | WS connect      |                     |                  |
-     |---------------> |                     |                  |
-     |                 | connect sidecar     |                  |
-     |                 |-------------------> |                  |
-     |                 | init (shell/cwd)    |                  |
-     |                 |-------------------> | spawn PTY        |
-     |                 |                     |----------------->|
-     | input           |                     |                  |
-     |---------------> | input               |                  |
-     |                 |-------------------> | write to PTY     |
-     | output          |                     |                  |
-     |<--------------- | output              | read from PTY    |
-     |                 |<------------------- |                  |
-     | resize          |                     |                  |
-     |---------------> | resize              |                  |
-     |                 |-------------------> | set PTY size     |
-```
-
-## Docker Troubleshooting
-
-Common failure modes and checks:
-
- Docker not installed or not in PATH
-  - `ensureDockerImage()` will throw. Install Docker or fix PATH.
-
- Image build fails
-  - Build uses `Dockerfile.terminal-sidecar` and tag `officer-terminal-sidecar:v1`.
-  - Check for network access (apt), and that build context is the plugin folder.
-
- Container starts but sidecar is unreachable
-  - Container binds to `0.0.0.0`, host maps `127.0.0.1:${port}:${port}`.
-  - Port is user-specific, stored in `data/terminal-containers.json`.
-  - Verify with `docker ps` and `docker logs` for the container name.
-
- Permissions inside container
-  - Container runs with host UID/GID derived from the mounted user home.
-  - If home dir ownership is incorrect, zsh history may fail to write.
-
- Shell missing
-  - Container must have zsh installed; the Dockerfile includes zsh.
-  - Host mode resolves shell from `$SHELL` or known paths.
-
-## Per-User Template Rules
-
-Templates are copied into user home on first launch only.
-
-Files:
-
- `.zshrc`
- `.config/starship-officer.toml`
-
-Rules:
-
- If a file already exists, it is not overwritten.
- This lets the admin provide a stable default while allowing user customization.
- To reset a user to defaults, delete the per-user files and reconnect.
@@ -1,10 +0,0 @@
-import { DashboardLayout } from '@/Screens/Dashboard/Layout';
-import { TerminalView } from '../TerminalView';
-
-export const Terminal = () => {
-  return (
-    <DashboardLayout>
-      <TerminalView className="h-full w-full p-2" />
-    </DashboardLayout>
-  );
-};
@@ -1,2 +0,0 @@
-export { Terminal as Screen } from './Screen';
-export { TerminalView } from './TerminalView';
@@ -1,8 +0,0 @@
-export { Screen } from './client';
-export { terminalWebsocket } from './server';
-
-export const plugin = {
-  id: 'Terminal',
-  name: 'Terminal',
-  description: 'Browser-based terminal emulator',
-};
@@ -1 +0,0 @@
-export { terminalWebsocket } from './websocket';
@@ -7,9 +7,6 @@
    "./FileBrowser": "./FileBrowser/index.ts",
    "./FileBrowser/client": "./FileBrowser/client/index.ts",
    "./FileBrowser/server": "./FileBrowser/server/index.ts",
-    "./Terminal": "./Terminal/index.ts",
-    "./Terminal/client": "./Terminal/client/index.ts",
-    "./Terminal/server": "./Terminal/server/index.ts",
    "./Chat": "./Chat/index.ts",
    "./Chat/client": "./Chat/client/index.ts",
    "./ChatHistory": "./ChatHistory/index.ts",
@@ -1,2 +0,0 @@
-import './variables.css';
-import './prose.css';
@@ -1 +0,0 @@
-export const meta = { id: 'CatppuccinLatte', name: 'Catppuccin Latte', description: 'Warm pastel tones on a creamy light canvas.' };
@@ -1,124 +0,0 @@
-/* File Viewer — Markdown Prose */
-[data-color-theme="CatppuccinLatte"] .file-viewer-md {
-  color: #4c4f69;
-}
-
-[data-color-theme="CatppuccinLatte"] .file-viewer-md h1 {
-  border-bottom-color: rgba(204, 208, 218, 0.4);
-}
-
-[data-color-theme="CatppuccinLatte"] .file-viewer-md h2 {
-  border-bottom-color: rgba(204, 208, 218, 0.3);
-}
-
-[data-color-theme="CatppuccinLatte"] .file-viewer-md a {
-  color: #1e66f5;
-}
-
-[data-color-theme="CatppuccinLatte"] .file-viewer-md a:hover {
-  color: #04a5e5;
-}
-
-[data-color-theme="CatppuccinLatte"] .file-viewer-md strong {
-  color: #4c4f69;
-}
-
-[data-color-theme="CatppuccinLatte"] .file-viewer-md blockquote {
-  border-left-color: #1e66f5;
-  background: rgba(30, 102, 245, 0.06);
-  color: #6c6f85;
-}
-
-[data-color-theme="CatppuccinLatte"] .file-viewer-md li::marker {
-  color: #1e66f5;
-}
-
-[data-color-theme="CatppuccinLatte"] .file-viewer-md hr {
-  background: rgba(204, 208, 218, 0.4);
-}
-
-[data-color-theme="CatppuccinLatte"] .file-viewer-md th {
-  background: rgba(30, 102, 245, 0.08);
-  border-color: rgba(204, 208, 218, 0.4);
-}
-
-[data-color-theme="CatppuccinLatte"] .file-viewer-md td {
-  border-color: rgba(204, 208, 218, 0.3);
-}
-
-[data-color-theme="CatppuccinLatte"] .file-viewer-md tr:nth-child(even) {
-  background: rgba(204, 208, 218, 0.1);
-}
-
-[data-color-theme="CatppuccinLatte"] .file-viewer-md input[type="checkbox"] {
-  accent-color: #1e66f5;
-}
-
-/* Skills — Markdown Prose */
-[data-color-theme="CatppuccinLatte"] .skill-md {
-  color: #4c4f69;
-}
-
-[data-color-theme="CatppuccinLatte"] .skill-md h1 {
-  border-bottom-color: rgba(204, 208, 218, 0.4);
-}
-
-[data-color-theme="CatppuccinLatte"] .skill-md h2 {
-  border-bottom-color: rgba(204, 208, 218, 0.3);
-}
-
-[data-color-theme="CatppuccinLatte"] .skill-md a {
-  color: #1e66f5;
-}
-
-[data-color-theme="CatppuccinLatte"] .skill-md a:hover {
-  color: #04a5e5;
-}
-
-[data-color-theme="CatppuccinLatte"] .skill-md strong {
-  color: #4c4f69;
-}
-
-[data-color-theme="CatppuccinLatte"] .skill-md blockquote {
-  border-left-color: #1e66f5;
-  background: rgba(30, 102, 245, 0.06);
-  color: #6c6f85;
-}
-
-[data-color-theme="CatppuccinLatte"] .skill-md li::marker {
-  color: #1e66f5;
-}
-
-[data-color-theme="CatppuccinLatte"] .skill-md code {
-  background: rgba(30, 102, 245, 0.1);
-  color: #1e66f5;
-}
-
-[data-color-theme="CatppuccinLatte"] .skill-md pre {
-  background: #e6e9ef;
-}
-
-[data-color-theme="CatppuccinLatte"] .skill-md pre code {
-  color: #4c4f69;
-}
-
-[data-color-theme="CatppuccinLatte"] .skill-md hr {
-  background: rgba(204, 208, 218, 0.4);
-}
-
-[data-color-theme="CatppuccinLatte"] .skill-md th {
-  background: rgba(30, 102, 245, 0.08);
-  border-color: rgba(204, 208, 218, 0.4);
-}
-
-[data-color-theme="CatppuccinLatte"] .skill-md td {
-  border-color: rgba(204, 208, 218, 0.3);
-}
-
-[data-color-theme="CatppuccinLatte"] .skill-md tr:nth-child(even) {
-  background: rgba(204, 208, 218, 0.1);
-}
-
-[data-color-theme="CatppuccinLatte"] .skill-md input[type="checkbox"] {
-  accent-color: #1e66f5;
-}
@@ -1,92 +0,0 @@
-@layer base {
-  [data-color-theme="CatppuccinLatte"] {
-    /* Brand colors */
-    --duck-yellow: #df8e1d;
-    --duck-orange: #d20f39;
-    --duck-teal: #1e66f5;
-    --duck-forest: #6c6f85;
-    --duck-dark: #4c4f69;
-    --duck-beige: #dce0e8;
-
-    /* Page background */
-    --pixel-grid-color: rgba(30, 102, 245, 0.08);
-
-    /* Glass surfaces */
-    --glass-bg: rgba(255, 255, 255, 0.1);
-    --glass-border: rgba(30, 102, 245, 0.2);
-    --dock-bg: rgba(0, 0, 0, 0.15);
-    --dock-border: rgba(30, 102, 245, 0.1);
-    --dock-tooltip-bg: rgba(0, 0, 0, 0.75);
-
-    /* Card component */
-    --card-bg: rgba(230, 233, 239, 0.92);
-    --card-grid-color: rgba(30, 102, 245, 0.06);
-
-    --cta: 219.9 91.5% 53.9%;
-    --cta-foreground: 220 23.1% 94.9%;
-
-    --naturegreen: 197.1 96.6% 45.7%;
-    --naturegreen-foreground: 220 23.1% 94.9%;
-
-    --background: 220 23.1% 94.9%;
-    --foreground: 233.8 16% 35.5%;
-
-    --card: 220 22% 92%;
-    --card-foreground: 233.8 16% 35.5%;
-
-    --popover: 220 22% 92%;
-    --popover-foreground: 233.8 16% 35.5%;
-
-    --primary: 219.9 91.5% 53.9%;
-    --primary-foreground: 220 23.1% 94.9%;
-
-    --secondary: 222.9 15.9% 82.7%;
-    --secondary-foreground: 233.8 16% 35.5%;
-
-    --muted: 220 20.7% 88.6%;
-    --muted-foreground: 232.8 10.4% 47.3%;
-
-    --accent: 197.1 96.6% 45.7%;
-    --accent-foreground: 220 23.1% 94.9%;
-
-    --destructive: 347.1 86.7% 44.1%;
-    --destructive-foreground: 220 23.1% 94.9%;
-
-    --success: 109.2 57.6% 39.8%;
-    --success-foreground: 220 23.1% 94.9%;
-
-    --brand: 219.9 91.5% 53.9%;
-    --brand-foreground: 220 23.1% 94.9%;
-    --brand-muted: 220 20.7% 88.6%;
-
-    --warning: 34.9 77% 49.4%;
-    --warning-foreground: 233.8 16% 35.5%;
-
-    --border: 222.9 15.9% 82.7%;
-    --input: 222.9 15.9% 82.7%;
-    --ring: 219.9 91.5% 53.9%;
-
-    --radius: 0.5rem;
-
-    /* Chart gradients */
-    --chart-primary: 219.9 91.5% 53.9%;
-    --chart-secondary: 34.9 77% 49.4%;
-
-    /* Status colors */
-    --status-success: 109.2 57.6% 39.8%;
-    --status-warning: 34.9 77% 49.4%;
-    --status-in-progress: 219.9 91.5% 53.9%;
-
-    --sidebar-background: 220 22% 92%;
-    --sidebar-foreground: 232.8 10.4% 47.3%;
-    --sidebar-primary: 219.9 91.5% 53.9%;
-    --sidebar-primary-foreground: 220 23.1% 94.9%;
-    --sidebar-accent: 220 20.7% 88.6%;
-    --sidebar-accent-foreground: 233.8 16% 35.5%;
-    --sidebar-border: 222.9 15.9% 82.7%;
-    --sidebar-ring: 219.9 91.5% 53.9%;
-
-    /* Hover Effect */
-    --ctahover: 197.1 96.6% 45.7%;
-  }
-}
@@ -1,2 +0,0 @@
-import './variables.css';
-import './prose.css';
@@ -1 +0,0 @@
-export const meta = { id: 'CatppuccinMocha', name: 'Catppuccin Mocha', description: 'Rich dark chocolate with pastel neon accents.' };
@@ -1,124 +0,0 @@
-/* File Viewer — Markdown Prose */
-[data-color-theme="CatppuccinMocha"] .file-viewer-md {
-  color: #cdd6f4;
-}
-
-[data-color-theme="CatppuccinMocha"] .file-viewer-md h1 {
-  border-bottom-color: rgba(69, 71, 90, 0.4);
-}
-
-[data-color-theme="CatppuccinMocha"] .file-viewer-md h2 {
-  border-bottom-color: rgba(69, 71, 90, 0.3);
-}
-
-[data-color-theme="CatppuccinMocha"] .file-viewer-md a {
-  color: #89b4fa;
-}
-
-[data-color-theme="CatppuccinMocha"] .file-viewer-md a:hover {
-  color: #89dceb;
-}
-
-[data-color-theme="CatppuccinMocha"] .file-viewer-md strong {
-  color: #cdd6f4;
-}
-
-[data-color-theme="CatppuccinMocha"] .file-viewer-md blockquote {
-  border-left-color: #89b4fa;
-  background: rgba(137, 180, 250, 0.06);
-  color: #7f849c;
-}
-
-[data-color-theme="CatppuccinMocha"] .file-viewer-md li::marker {
-  color: #89b4fa;
-}
-
-[data-color-theme="CatppuccinMocha"] .file-viewer-md hr {
-  background: rgba(69, 71, 90, 0.4);
-}
-
-[data-color-theme="CatppuccinMocha"] .file-viewer-md th {
-  background: rgba(137, 180, 250, 0.08);
-  border-color: rgba(69, 71, 90, 0.4);
-}
-
-[data-color-theme="CatppuccinMocha"] .file-viewer-md td {
-  border-color: rgba(69, 71, 90, 0.3);
-}
-
-[data-color-theme="CatppuccinMocha"] .file-viewer-md tr:nth-child(even) {
-  background: rgba(69, 71, 90, 0.1);
-}
-
-[data-color-theme="CatppuccinMocha"] .file-viewer-md input[type="checkbox"] {
-  accent-color: #89b4fa;
-}
-
-/* Skills — Markdown Prose */
-[data-color-theme="CatppuccinMocha"] .skill-md {
-  color: #cdd6f4;
-}
-
-[data-color-theme="CatppuccinMocha"] .skill-md h1 {
-  border-bottom-color: rgba(69, 71, 90, 0.4);
-}
-
-[data-color-theme="CatppuccinMocha"] .skill-md h2 {
-  border-bottom-color: rgba(69, 71, 90, 0.3);
-}
-
-[data-color-theme="CatppuccinMocha"] .skill-md a {
-  color: #89b4fa;
-}
-
-[data-color-theme="CatppuccinMocha"] .skill-md a:hover {
-  color: #89dceb;
-}
-
-[data-color-theme="CatppuccinMocha"] .skill-md strong {
-  color: #cdd6f4;
-}
-
-[data-color-theme="CatppuccinMocha"] .skill-md blockquote {
-  border-left-color: #89b4fa;
-  background: rgba(137, 180, 250, 0.06);
-  color: #7f849c;
-}
-
-[data-color-theme="CatppuccinMocha"] .skill-md li::marker {
-  color: #89b4fa;
-}
-
-[data-color-theme="CatppuccinMocha"] .skill-md code {
-  background: rgba(137, 180, 250, 0.1);
-  color: #89b4fa;
-}
-
-[data-color-theme="CatppuccinMocha"] .skill-md pre {
-  background: #181825;
-}
-
-[data-color-theme="CatppuccinMocha"] .skill-md pre code {
-  color: #cdd6f4;
-}
-
-[data-color-theme="CatppuccinMocha"] .skill-md hr {
-  background: rgba(69, 71, 90, 0.4);
-}
-
-[data-color-theme="CatppuccinMocha"] .skill-md th {
-  background: rgba(137, 180, 250, 0.08);
-  border-color: rgba(69, 71, 90, 0.4);
-}
-
-[data-color-theme="CatppuccinMocha"] .skill-md td {
-  border-color: rgba(69, 71, 90, 0.3);
-}
-
-[data-color-theme="CatppuccinMocha"] .skill-md tr:nth-child(even) {
-  background: rgba(69, 71, 90, 0.1);
-}
-
-[data-color-theme="CatppuccinMocha"] .skill-md input[type="checkbox"] {
-  accent-color: #89b4fa;
-}
@@ -1,92 +0,0 @@
-@layer base {
-  [data-color-theme="CatppuccinMocha"] {
-    /* Brand colors */
-    --duck-yellow: #f9e2af;
-    --duck-orange: #fab387;
-    --duck-teal: #89b4fa;
-    --duck-forest: #7f849c;
-    --duck-dark: #cdd6f4;
-    --duck-beige: #313244;
-
-    /* Page background */
-    --pixel-grid-color: rgba(137, 180, 250, 0.06);
-
-    /* Glass surfaces */
-    --glass-bg: rgba(0, 0, 0, 0.25);
-    --glass-border: rgba(137, 180, 250, 0.12);
-    --dock-bg: rgba(0, 0, 0, 0.35);
-    --dock-border: rgba(137, 180, 250, 0.08);
-    --dock-tooltip-bg: rgba(0, 0, 0, 0.9);
-
-    /* Card component */
-    --card-bg: rgba(24, 24, 37, 0.92);
-    --card-grid-color: rgba(137, 180, 250, 0.04);
-
-    --cta: 217.2 91.9% 75.9%;
-    --cta-foreground: 240 21.1% 14.9%;
-
-    --naturegreen: 189.2 71% 72.9%;
-    --naturegreen-foreground: 240 21.1% 14.9%;
-
-    --background: 240 21.1% 14.9%;
-    --foreground: 226.2 63.9% 88%;
-
-    --card: 240 21.3% 12%;
-    --card-foreground: 226.2 63.9% 88%;
-
-    --popover: 240 21.3% 12%;
-    --popover-foreground: 226.2 63.9% 88%;
-
-    --primary: 217.2 91.9% 75.9%;
-    --primary-foreground: 240 21.1% 14.9%;
-
-    --secondary: 234.3 13.2% 31.2%;
-    --secondary-foreground: 226.2 63.9% 88%;
-
-    --muted: 236.8 16.2% 22.9%;
-    --muted-foreground: 229.7 12.8% 55.5%;
-
-    --accent: 189.2 71% 72.9%;
-    --accent-foreground: 240 21.1% 14.9%;
-
-    --destructive: 343.3 81.2% 74.9%;
-    --destructive-foreground: 240 21.1% 14.9%;
-
-    --success: 115.5 54.1% 76.1%;
-    --success-foreground: 240 21.1% 14.9%;
-
-    --brand: 217.2 91.9% 75.9%;
-    --brand-foreground: 240 21.1% 14.9%;
-    --brand-muted: 236.8 16.2% 22.9%;
-
-    --warning: 41.4 86% 83.1%;
-    --warning-foreground: 240 21.1% 14.9%;
-
-    --border: 234.3 13.2% 31.2%;
-    --input: 234.3 13.2% 31.2%;
-    --ring: 217.2 91.9% 75.9%;
-
-    --radius: 0.5rem;
-
-    /* Chart gradients */
-    --chart-primary: 217.2 91.9% 75.9%;
-    --chart-secondary: 41.4 86% 83.1%;
-
-    /* Status colors */
-    --status-success: 115.5 54.1% 76.1%;
-    --status-warning: 41.4 86% 83.1%;
-    --status-in-progress: 217.2 91.9% 75.9%;
-
-    --sidebar-background: 240 21.3% 12%;
-    --sidebar-foreground: 229.7 12.8% 55.5%;
-    --sidebar-primary: 217.2 91.9% 75.9%;
-    --sidebar-primary-foreground: 240 21.1% 14.9%;
-    --sidebar-accent: 236.8 16.2% 22.9%;
-    --sidebar-accent-foreground: 226.2 63.9% 88%;
-    --sidebar-border: 234.3 13.2% 31.2%;
-    --sidebar-ring: 217.2 91.9% 75.9%;
-
-    /* Hover Effect */
-    --ctahover: 189.2 71% 72.9%;
-  }
-}
@@ -1,4 +0,0 @@
-import './variables.css';
-import './prose.css';
-
-document.documentElement.style.setProperty('--page-bg-image', 'url(/static/landscape1.jpg)');
@@ -1 +0,0 @@
-export const meta = { id: 'DuckPond', name: 'Duck Pond', description: 'Warm greens and teals inspired by a forest pond.' };
@@ -1,164 +0,0 @@
-@layer base {
-  :root {
-    /* Duck brand hex colors */
-    --duck-yellow: #F4C430;
-    --duck-orange: #EA580C;
-    --duck-teal: #0891B2;
-    --duck-forest: #166534;
-    --duck-dark: #14532D;
-    --duck-beige: #E7D4B5;
-
-    /* Page background (--page-bg-image set via client.ts to avoid bundler url() resolution) */
-    --pixel-grid-color: rgba(20, 83, 45, 0.1);
-
-    /* Glass surfaces */
-    --glass-bg: rgba(255, 255, 255, 0.1);
-    --glass-border: rgba(255, 255, 255, 0.2);
-    --dock-bg: rgba(0, 0, 0, 0.15);
-    --dock-border: rgba(255, 255, 255, 0.1);
-    --dock-tooltip-bg: rgba(0, 0, 0, 0.75);
-
-    /* Card component */
-    --card-bg: rgba(255, 255, 255, 0.9);
-    --card-grid-color: rgba(20, 83, 45, 0.08);
-
-    --cta: 211 74.77% 45.58%;
-    --cta-foreground: 0 0% 100%;
-
-    --naturegreen: 145 79% 38%;
-    --naturegreen-foreground: 0 0% 100%;
-
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --accent: 211 74.77% 45.58%;
-    --accent-foreground: 0 0% 0%;
-
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-
-    --success: 142.1 76.2% 36.3%;
-    --success-foreground: 355.7 100% 97.3%;
-
-    --brand: 145 79% 38%;
-    --brand-foreground: 0 0% 100%;
-    --brand-muted: 145 40% 90%;
-
-    --warning: 43 96% 56%;
-    --warning-foreground: 0 0% 0%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-
-    --radius: 0.5rem;
-
-    /* Chart gradients */
-    --chart-primary: 211 82% 64%;
-    --chart-secondary: 211 82% 84%;
-
-    /* Status colors */
-    --status-success: 142 76% 36%;
-    --status-warning: 43 96% 56%;
-    --status-in-progress: 211 82% 64%;
-
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-
-    /* Hover Effect */
-    --ctahover: 211 91.53% 34.82%;
-  }
-
-  .dark {
-    /* Page background */
-    --pixel-grid-color: rgba(200, 230, 210, 0.08);
-
-    /* Glass surfaces */
-    --glass-bg: rgba(0, 0, 0, 0.2);
-    --glass-border: rgba(255, 255, 255, 0.1);
-    --dock-bg: rgba(0, 0, 0, 0.3);
-    --dock-border: rgba(255, 255, 255, 0.08);
-    --dock-tooltip-bg: rgba(0, 0, 0, 0.85);
-
-    /* Card component */
-    --card-bg: rgba(10, 20, 15, 0.9);
-    --card-grid-color: rgba(200, 230, 210, 0.06);
-
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-
-    --accent: 211 82% 64%;
-    --accent-foreground: 0 0% 0%;
-
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-
-    --success: 142.1 76.2% 36.3%;
-    --success-foreground: 355.7 100% 97.3%;
-
-    --brand: 145 60% 45%;
-    --brand-foreground: 0 0% 100%;
-    --brand-muted: 145 30% 25%;
-
-    --warning: 43 96% 56%;
-    --warning-foreground: 0 0% 0%;
-
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-
-    /* Chart gradients */
-    --chart-primary: 211 82% 64%;
-    --chart-secondary: 211 82% 84%;
-
-    /* Status colors */
-    --status-success: 142 76% 36%;
-    --status-warning: 43 96% 56%;
-    --status-in-progress: 211 82% 64%;
-
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-}
@@ -1,2 +0,0 @@
-import './variables.css';
-import './prose.css';
@@ -1 +0,0 @@
-export const meta = { id: 'Everforest', name: 'Everforest', description: 'Soft earthy greens from a quiet forest floor.' };
@@ -1,124 +0,0 @@
-/* File Viewer — Markdown Prose */
-[data-color-theme="Everforest"] .file-viewer-md {
-  color: #d3c6aa;
-}
-
-[data-color-theme="Everforest"] .file-viewer-md h1 {
-  border-bottom-color: rgba(61, 72, 77, 0.4);
-}
-
-[data-color-theme="Everforest"] .file-viewer-md h2 {
-  border-bottom-color: rgba(61, 72, 77, 0.3);
-}
-
-[data-color-theme="Everforest"] .file-viewer-md a {
-  color: #a7c080;
-}
-
-[data-color-theme="Everforest"] .file-viewer-md a:hover {
-  color: #83c092;
-}
-
-[data-color-theme="Everforest"] .file-viewer-md strong {
-  color: #d3c6aa;
-}
-
-[data-color-theme="Everforest"] .file-viewer-md blockquote {
-  border-left-color: #a7c080;
-  background: rgba(167, 192, 128, 0.06);
-  color: #859289;
-}
-
-[data-color-theme="Everforest"] .file-viewer-md li::marker {
-  color: #a7c080;
-}
-
-[data-color-theme="Everforest"] .file-viewer-md hr {
-  background: rgba(61, 72, 77, 0.4);
-}
-
-[data-color-theme="Everforest"] .file-viewer-md th {
-  background: rgba(167, 192, 128, 0.08);
-  border-color: rgba(61, 72, 77, 0.4);
-}
-
-[data-color-theme="Everforest"] .file-viewer-md td {
-  border-color: rgba(61, 72, 77, 0.3);
-}
-
-[data-color-theme="Everforest"] .file-viewer-md tr:nth-child(even) {
-  background: rgba(61, 72, 77, 0.1);
-}
-
-[data-color-theme="Everforest"] .file-viewer-md input[type="checkbox"] {
-  accent-color: #a7c080;
-}
-
-/* Skills — Markdown Prose */
-[data-color-theme="Everforest"] .skill-md {
-  color: #d3c6aa;
-}
-
-[data-color-theme="Everforest"] .skill-md h1 {
-  border-bottom-color: rgba(61, 72, 77, 0.4);
-}
-
-[data-color-theme="Everforest"] .skill-md h2 {
-  border-bottom-color: rgba(61, 72, 77, 0.3);
-}
-
-[data-color-theme="Everforest"] .skill-md a {
-  color: #a7c080;
-}
-
-[data-color-theme="Everforest"] .skill-md a:hover {
-  color: #83c092;
-}
-
-[data-color-theme="Everforest"] .skill-md strong {
-  color: #d3c6aa;
-}
-
-[data-color-theme="Everforest"] .skill-md blockquote {
-  border-left-color: #a7c080;
-  background: rgba(167, 192, 128, 0.06);
-  color: #859289;
-}
-
-[data-color-theme="Everforest"] .skill-md li::marker {
-  color: #a7c080;
-}
-
-[data-color-theme="Everforest"] .skill-md code {
-  background: rgba(167, 192, 128, 0.1);
-  color: #a7c080;
-}
-
-[data-color-theme="Everforest"] .skill-md pre {
-  background: #272e33;
-}
-
-[data-color-theme="Everforest"] .skill-md pre code {
-  color: #d3c6aa;
-}
-
-[data-color-theme="Everforest"] .skill-md hr {
-  background: rgba(61, 72, 77, 0.4);
-}
-
-[data-color-theme="Everforest"] .skill-md th {
-  background: rgba(167, 192, 128, 0.08);
-  border-color: rgba(61, 72, 77, 0.4);
-}
-
-[data-color-theme="Everforest"] .skill-md td {
-  border-color: rgba(61, 72, 77, 0.3);
-}
-
-[data-color-theme="Everforest"] .skill-md tr:nth-child(even) {
-  background: rgba(61, 72, 77, 0.1);
-}
-
-[data-color-theme="Everforest"] .skill-md input[type="checkbox"] {
-  accent-color: #a7c080;
-}
@@ -1,92 +0,0 @@
-@layer base {
-  [data-color-theme="Everforest"] {
-    /* Brand colors */
-    --duck-yellow: #dbbc7f;
-    --duck-orange: #e69875;
-    --duck-teal: #a7c080;
-    --duck-forest: #859289;
-    --duck-dark: #d3c6aa;
-    --duck-beige: #374247;
-
-    /* Page background */
-    --pixel-grid-color: rgba(167, 192, 128, 0.06);
-
-    /* Glass surfaces */
-    --glass-bg: rgba(0, 0, 0, 0.25);
-    --glass-border: rgba(167, 192, 128, 0.12);
-    --dock-bg: rgba(0, 0, 0, 0.35);
-    --dock-border: rgba(167, 192, 128, 0.08);
-    --dock-tooltip-bg: rgba(0, 0, 0, 0.9);
-
-    /* Card component */
-    --card-bg: rgba(39, 46, 51, 0.92);
-    --card-grid-color: rgba(167, 192, 128, 0.04);
-
-    --cta: 83.4 33.7% 62.7%;
-    --cta-foreground: 205.7 13.5% 20.4%;
-
-    --naturegreen: 134.8 32.6% 63.3%;
-    --naturegreen-foreground: 205.7 13.5% 20.4%;
-
-    --background: 205.7 13.5% 20.4%;
-    --foreground: 41 31.8% 74.7%;
-
-    --card: 205 13.3% 17.6%;
-    --card-foreground: 41 31.8% 74.7%;
-
-    --popover: 205 13.3% 17.6%;
-    --popover-foreground: 41 31.8% 74.7%;
-
-    --primary: 83.4 33.7% 62.7%;
-    --primary-foreground: 205.7 13.5% 20.4%;
-
-    --secondary: 198.8 11.6% 27.1%;
-    --secondary-foreground: 41 31.8% 74.7%;
-
-    --muted: 198.8 12.7% 24.7%;
-    --muted-foreground: 138.5 5.6% 54.7%;
-
-    --accent: 134.8 32.6% 63.3%;
-    --accent-foreground: 205.7 13.5% 20.4%;
-
-    --destructive: 358.8 67.5% 69.8%;
-    --destructive-foreground: 41 31.8% 74.7%;
-
-    --success: 134.8 32.6% 63.3%;
-    --success-foreground: 205.7 13.5% 20.4%;
-
-    --brand: 83.4 33.7% 62.7%;
-    --brand-foreground: 205.7 13.5% 20.4%;
-    --brand-muted: 198.8 12.7% 24.7%;
-
-    --warning: 39.8 56.1% 67.8%;
-    --warning-foreground: 205.7 13.5% 20.4%;
-
-    --border: 198.8 11.6% 27.1%;
-    --input: 198.8 11.6% 27.1%;
-    --ring: 83.4 33.7% 62.7%;
-
-    --radius: 0.5rem;
-
-    /* Chart gradients */
-    --chart-primary: 83.4 33.7% 62.7%;
-    --chart-secondary: 39.8 56.1% 67.8%;
-
-    /* Status colors */
-    --status-success: 134.8 32.6% 63.3%;
-    --status-warning: 39.8 56.1% 67.8%;
-    --status-in-progress: 83.4 33.7% 62.7%;
-
-    --sidebar-background: 205 13.3% 17.6%;
-    --sidebar-foreground: 138.5 5.6% 54.7%;
-    --sidebar-primary: 83.4 33.7% 62.7%;
-    --sidebar-primary-foreground: 205.7 13.5% 20.4%;
-    --sidebar-accent: 198.8 12.7% 24.7%;
-    --sidebar-accent-foreground: 41 31.8% 74.7%;
-    --sidebar-border: 198.8 11.6% 27.1%;
-    --sidebar-ring: 83.4 33.7% 62.7%;
-
-    /* Hover Effect */
-    --ctahover: 134.8 32.6% 63.3%;
-  }
-}
@@ -1,2 +0,0 @@
-import './variables.css';
-import './prose.css';
@@ -1 +0,0 @@
-export const meta = { id: 'Gruvbox', name: 'Gruvbox', description: 'Retro warm tones with earthy browns and muted accents.' };
@@ -1,124 +0,0 @@
-/* File Viewer — Markdown Prose */
-[data-color-theme="Gruvbox"] .file-viewer-md {
-  color: #ebdbb2;
-}
-
-[data-color-theme="Gruvbox"] .file-viewer-md h1 {
-  border-bottom-color: rgba(80, 73, 69, 0.4);
-}
-
-[data-color-theme="Gruvbox"] .file-viewer-md h2 {
-  border-bottom-color: rgba(80, 73, 69, 0.3);
-}
-
-[data-color-theme="Gruvbox"] .file-viewer-md a {
-  color: #83a598;
-}
-
-[data-color-theme="Gruvbox"] .file-viewer-md a:hover {
-  color: #8ec07c;
-}
-
-[data-color-theme="Gruvbox"] .file-viewer-md strong {
-  color: #ebdbb2;
-}
-
-[data-color-theme="Gruvbox"] .file-viewer-md blockquote {
-  border-left-color: #83a598;
-  background: rgba(131, 165, 152, 0.06);
-  color: #a89984;
-}
-
-[data-color-theme="Gruvbox"] .file-viewer-md li::marker {
-  color: #83a598;
-}
-
-[data-color-theme="Gruvbox"] .file-viewer-md hr {
-  background: rgba(80, 73, 69, 0.4);
-}
-
-[data-color-theme="Gruvbox"] .file-viewer-md th {
-  background: rgba(131, 165, 152, 0.08);
-  border-color: rgba(80, 73, 69, 0.4);
-}
-
-[data-color-theme="Gruvbox"] .file-viewer-md td {
-  border-color: rgba(80, 73, 69, 0.3);
-}
-
-[data-color-theme="Gruvbox"] .file-viewer-md tr:nth-child(even) {
-  background: rgba(80, 73, 69, 0.1);
-}
-
-[data-color-theme="Gruvbox"] .file-viewer-md input[type="checkbox"] {
-  accent-color: #83a598;
-}
-
-/* Skills — Markdown Prose */
-[data-color-theme="Gruvbox"] .skill-md {
-  color: #ebdbb2;
-}
-
-[data-color-theme="Gruvbox"] .skill-md h1 {
-  border-bottom-color: rgba(80, 73, 69, 0.4);
-}
-
-[data-color-theme="Gruvbox"] .skill-md h2 {
-  border-bottom-color: rgba(80, 73, 69, 0.3);
-}
-
-[data-color-theme="Gruvbox"] .skill-md a {
-  color: #83a598;
-}
-
-[data-color-theme="Gruvbox"] .skill-md a:hover {
-  color: #8ec07c;
-}
-
-[data-color-theme="Gruvbox"] .skill-md strong {
-  color: #ebdbb2;
-}
-
-[data-color-theme="Gruvbox"] .skill-md blockquote {
-  border-left-color: #83a598;
-  background: rgba(131, 165, 152, 0.06);
-  color: #a89984;
-}
-
-[data-color-theme="Gruvbox"] .skill-md li::marker {
-  color: #83a598;
-}
-
-[data-color-theme="Gruvbox"] .skill-md code {
-  background: rgba(131, 165, 152, 0.1);
-  color: #83a598;
-}
-
-[data-color-theme="Gruvbox"] .skill-md pre {
-  background: #1d2021;
-}
-
-[data-color-theme="Gruvbox"] .skill-md pre code {
-  color: #ebdbb2;
-}
-
-[data-color-theme="Gruvbox"] .skill-md hr {
-  background: rgba(80, 73, 69, 0.4);
-}
-
-[data-color-theme="Gruvbox"] .skill-md th {
-  background: rgba(131, 165, 152, 0.08);
-  border-color: rgba(80, 73, 69, 0.4);
-}
-
-[data-color-theme="Gruvbox"] .skill-md td {
-  border-color: rgba(80, 73, 69, 0.3);
-}
-
-[data-color-theme="Gruvbox"] .skill-md tr:nth-child(even) {
-  background: rgba(80, 73, 69, 0.1);
-}
-
-[data-color-theme="Gruvbox"] .skill-md input[type="checkbox"] {
-  accent-color: #83a598;
-}
@@ -1,92 +0,0 @@
-@layer base {
-  [data-color-theme="Gruvbox"] {
-    /* Brand colors */
-    --duck-yellow: #fabd2f;
-    --duck-orange: #fe8019;
-    --duck-teal: #83a598;
-    --duck-forest: #a89984;
-    --duck-dark: #ebdbb2;
-    --duck-beige: #3c3836;
-
-    /* Page background */
-    --pixel-grid-color: rgba(131, 165, 152, 0.06);
-
-    /* Glass surfaces */
-    --glass-bg: rgba(0, 0, 0, 0.25);
-    --glass-border: rgba(131, 165, 152, 0.12);
-    --dock-bg: rgba(0, 0, 0, 0.35);
-    --dock-border: rgba(131, 165, 152, 0.08);
-    --dock-tooltip-bg: rgba(0, 0, 0, 0.9);
-
-    /* Card component */
-    --card-bg: rgba(29, 32, 33, 0.92);
-    --card-grid-color: rgba(131, 165, 152, 0.04);
-
-    --cta: 157.1 15.9% 58%;
-    --cta-foreground: 0 0% 15.7%;
-
-    --naturegreen: 104.1 35.1% 62%;
-    --naturegreen-foreground: 0 0% 15.7%;
-
-    --background: 0 0% 15.7%;
-    --foreground: 43.2 58.8% 81%;
-
-    --card: 195 6.5% 12.2%;
-    --card-foreground: 43.2 58.8% 81%;
-
-    --popover: 195 6.5% 12.2%;
-    --popover-foreground: 43.2 58.8% 81%;
-
-    --primary: 157.1 15.9% 58%;
-    --primary-foreground: 0 0% 15.7%;
-
-    --secondary: 21.8 7.4% 29.2%;
-    --secondary-foreground: 43.2 58.8% 81%;
-
-    --muted: 20 5.3% 22.4%;
-    --muted-foreground: 35 17.1% 58.8%;
-
-    --accent: 104.1 35.1% 62%;
-    --accent-foreground: 0 0% 15.7%;
-
-    --destructive: 6.3 96.1% 59.4%;
-    --destructive-foreground: 43.2 58.8% 81%;
-
-    --success: 61.2 66.2% 44.1%;
-    --success-foreground: 0 0% 15.7%;
-
-    --brand: 157.1 15.9% 58%;
-    --brand-foreground: 0 0% 15.7%;
-    --brand-muted: 20 5.3% 22.4%;
-
-    --warning: 42 95.3% 58.2%;
-    --warning-foreground: 0 0% 15.7%;
-
-    --border: 21.8 7.4% 29.2%;
-    --input: 21.8 7.4% 29.2%;
-    --ring: 157.1 15.9% 58%;
-
-    --radius: 0.5rem;
-
-    /* Chart gradients */
-    --chart-primary: 157.1 15.9% 58%;
-    --chart-secondary: 42 95.3% 58.2%;
-
-    /* Status colors */
-    --status-success: 61.2 66.2% 44.1%;
-    --status-warning: 42 95.3% 58.2%;
-    --status-in-progress: 157.1 15.9% 58%;
-
-    --sidebar-background: 195 6.5% 12.2%;
-    --sidebar-foreground: 35 17.1% 58.8%;
-    --sidebar-primary: 157.1 15.9% 58%;
-    --sidebar-primary-foreground: 0 0% 15.7%;
-    --sidebar-accent: 20 5.3% 22.4%;
-    --sidebar-accent-foreground: 43.2 58.8% 81%;
-    --sidebar-border: 21.8 7.4% 29.2%;
-    --sidebar-ring: 157.1 15.9% 58%;
-
-    /* Hover Effect */
-    --ctahover: 104.1 35.1% 62%;
-  }
-}
@@ -1,2 +0,0 @@
-import './variables.css';
-import './prose.css';
@@ -1 +0,0 @@
-export const meta = { id: 'Kanagawa', name: 'Kanagawa', description: 'Deep indigo waves and ink-wash inspired hues.' };
@@ -1,124 +0,0 @@
-/* File Viewer — Markdown Prose */
-[data-color-theme="Kanagawa"] .file-viewer-md {
-  color: #dcd7ba;
-}
-
-[data-color-theme="Kanagawa"] .file-viewer-md h1 {
-  border-bottom-color: rgba(42, 42, 55, 0.4);
-}
-
-[data-color-theme="Kanagawa"] .file-viewer-md h2 {
-  border-bottom-color: rgba(42, 42, 55, 0.3);
-}
-
-[data-color-theme="Kanagawa"] .file-viewer-md a {
-  color: #7e9cd8;
-}
-
-[data-color-theme="Kanagawa"] .file-viewer-md a:hover {
-  color: #7fb4ca;
-}
-
-[data-color-theme="Kanagawa"] .file-viewer-md strong {
-  color: #dcd7ba;
-}
-
-[data-color-theme="Kanagawa"] .file-viewer-md blockquote {
-  border-left-color: #7e9cd8;
-  background: rgba(126, 156, 216, 0.06);
-  color: #727169;
-}
-
-[data-color-theme="Kanagawa"] .file-viewer-md li::marker {
-  color: #7e9cd8;
-}
-
-[data-color-theme="Kanagawa"] .file-viewer-md hr {
-  background: rgba(42, 42, 55, 0.4);
-}
-
-[data-color-theme="Kanagawa"] .file-viewer-md th {
-  background: rgba(126, 156, 216, 0.08);
-  border-color: rgba(42, 42, 55, 0.4);
-}
-
-[data-color-theme="Kanagawa"] .file-viewer-md td {
-  border-color: rgba(42, 42, 55, 0.3);
-}
-
-[data-color-theme="Kanagawa"] .file-viewer-md tr:nth-child(even) {
-  background: rgba(42, 42, 55, 0.1);
-}
-
-[data-color-theme="Kanagawa"] .file-viewer-md input[type="checkbox"] {
-  accent-color: #7e9cd8;
-}
-
-/* Skills — Markdown Prose */
-[data-color-theme="Kanagawa"] .skill-md {
-  color: #dcd7ba;
-}
-
-[data-color-theme="Kanagawa"] .skill-md h1 {
-  border-bottom-color: rgba(42, 42, 55, 0.4);
-}
-
-[data-color-theme="Kanagawa"] .skill-md h2 {
-  border-bottom-color: rgba(42, 42, 55, 0.3);
-}
-
-[data-color-theme="Kanagawa"] .skill-md a {
-  color: #7e9cd8;
-}
-
-[data-color-theme="Kanagawa"] .skill-md a:hover {
-  color: #7fb4ca;
-}
-
-[data-color-theme="Kanagawa"] .skill-md strong {
-  color: #dcd7ba;
-}
-
-[data-color-theme="Kanagawa"] .skill-md blockquote {
-  border-left-color: #7e9cd8;
-  background: rgba(126, 156, 216, 0.06);
-  color: #727169;
-}
-
-[data-color-theme="Kanagawa"] .skill-md li::marker {
-  color: #7e9cd8;
-}
-
-[data-color-theme="Kanagawa"] .skill-md code {
-  background: rgba(126, 156, 216, 0.1);
-  color: #7e9cd8;
-}
-
-[data-color-theme="Kanagawa"] .skill-md pre {
-  background: #16161d;
-}
-
-[data-color-theme="Kanagawa"] .skill-md pre code {
-  color: #dcd7ba;
-}
-
-[data-color-theme="Kanagawa"] .skill-md hr {
-  background: rgba(42, 42, 55, 0.4);
-}
-
-[data-color-theme="Kanagawa"] .skill-md th {
-  background: rgba(126, 156, 216, 0.08);
-  border-color: rgba(42, 42, 55, 0.4);
-}
-
-[data-color-theme="Kanagawa"] .skill-md td {
-  border-color: rgba(42, 42, 55, 0.3);
-}
-
-[data-color-theme="Kanagawa"] .skill-md tr:nth-child(even) {
-  background: rgba(42, 42, 55, 0.1);
-}
-
-[data-color-theme="Kanagawa"] .skill-md input[type="checkbox"] {
-  accent-color: #7e9cd8;
-}
@@ -1,92 +0,0 @@
-@layer base {
-  [data-color-theme="Kanagawa"] {
-    /* Brand colors */
-    --duck-yellow: #ffa066;
-    --duck-orange: #ff5d62;
-    --duck-teal: #7e9cd8;
-    --duck-forest: #727169;
-    --duck-dark: #dcd7ba;
-    --duck-beige: #223249;
-
-    /* Page background */
-    --pixel-grid-color: rgba(126, 156, 216, 0.06);
-
-    /* Glass surfaces */
-    --glass-bg: rgba(0, 0, 0, 0.25);
-    --glass-border: rgba(126, 156, 216, 0.12);
-    --dock-bg: rgba(0, 0, 0, 0.35);
-    --dock-border: rgba(126, 156, 216, 0.08);
-    --dock-tooltip-bg: rgba(0, 0, 0, 0.9);
-
-    /* Card component */
-    --card-bg: rgba(22, 22, 29, 0.92);
-    --card-grid-color: rgba(126, 156, 216, 0.04);
-
-    --cta: 220 53.6% 67.1%;
-    --cta-foreground: 240 12.7% 13.9%;
-
-    --naturegreen: 197.6 41.4% 64.5%;
-    --naturegreen-foreground: 240 12.7% 13.9%;
-
-    --background: 240 12.7% 13.9%;
-    --foreground: 51.2 32.7% 79.6%;
-
-    --card: 240 13.7% 10%;
-    --card-foreground: 51.2 32.7% 79.6%;
-
-    --popover: 240 13.7% 10%;
-    --popover-foreground: 51.2 32.7% 79.6%;
-
-    --primary: 220 53.6% 67.1%;
-    --primary-foreground: 240 12.7% 13.9%;
-
-    --secondary: 240 13.4% 19%;
-    --secondary-foreground: 51.2 32.7% 79.6%;
-
-    --muted: 215.4 36.4% 21%;
-    --muted-foreground: 53.3 4.1% 42.9%;
-
-    --accent: 197.6 41.4% 64.5%;
-    --accent-foreground: 240 12.7% 13.9%;
-
-    --destructive: 0 81% 52.5%;
-    --destructive-foreground: 51.2 32.7% 79.6%;
-
-    --success: 86.6 36.7% 57.8%;
-    --success-foreground: 240 12.7% 13.9%;
-
-    --brand: 220 53.6% 67.1%;
-    --brand-foreground: 240 12.7% 13.9%;
-    --brand-muted: 215.4 36.4% 21%;
-
-    --warning: 22.7 100% 70%;
-    --warning-foreground: 240 12.7% 13.9%;
-
-    --border: 240 13.4% 19%;
-    --input: 240 13.4% 19%;
-    --ring: 220 53.6% 67.1%;
-
-    --radius: 0.5rem;
-
-    /* Chart gradients */
-    --chart-primary: 220 53.6% 67.1%;
-    --chart-secondary: 22.7 100% 70%;
-
-    /* Status colors */
-    --status-success: 86.6 36.7% 57.8%;
-    --status-warning: 22.7 100% 70%;
-    --status-in-progress: 220 53.6% 67.1%;
-
-    --sidebar-background: 240 13.7% 10%;
-    --sidebar-foreground: 53.3 4.1% 42.9%;
-    --sidebar-primary: 220 53.6% 67.1%;
-    --sidebar-primary-foreground: 240 12.7% 13.9%;
-    --sidebar-accent: 215.4 36.4% 21%;
-    --sidebar-accent-foreground: 51.2 32.7% 79.6%;
-    --sidebar-border: 240 13.4% 19%;
-    --sidebar-ring: 220 53.6% 67.1%;
-
-    /* Hover Effect */
-    --ctahover: 197.6 41.4% 64.5%;
-  }
-}
@@ -1,2 +0,0 @@
-import './variables.css';
-import './prose.css';
@@ -1 +0,0 @@
-export const meta = { id: 'MatteBlack', name: 'Matte Black', description: 'Pure minimal monochrome with a matte finish.' };
@@ -1,124 +0,0 @@
-/* File Viewer — Markdown Prose */
-[data-color-theme="MatteBlack"] .file-viewer-md {
-  color: #e0e0e0;
-}
-
-[data-color-theme="MatteBlack"] .file-viewer-md h1 {
-  border-bottom-color: rgba(42, 42, 42, 0.4);
-}
-
-[data-color-theme="MatteBlack"] .file-viewer-md h2 {
-  border-bottom-color: rgba(42, 42, 42, 0.3);
-}
-
-[data-color-theme="MatteBlack"] .file-viewer-md a {
-  color: #ffffff;
-}
-
-[data-color-theme="MatteBlack"] .file-viewer-md a:hover {
-  color: #d0d0d0;
-}
-
-[data-color-theme="MatteBlack"] .file-viewer-md strong {
-  color: #e0e0e0;
-}
-
-[data-color-theme="MatteBlack"] .file-viewer-md blockquote {
-  border-left-color: #ffffff;
-  background: rgba(255, 255, 255, 0.06);
-  color: #9a9a9a;
-}
-
-[data-color-theme="MatteBlack"] .file-viewer-md li::marker {
-  color: #ffffff;
-}
-
-[data-color-theme="MatteBlack"] .file-viewer-md hr {
-  background: rgba(42, 42, 42, 0.4);
-}
-
-[data-color-theme="MatteBlack"] .file-viewer-md th {
-  background: rgba(255, 255, 255, 0.08);
-  border-color: rgba(42, 42, 42, 0.4);
-}
-
-[data-color-theme="MatteBlack"] .file-viewer-md td {
-  border-color: rgba(42, 42, 42, 0.3);
-}
-
-[data-color-theme="MatteBlack"] .file-viewer-md tr:nth-child(even) {
-  background: rgba(42, 42, 42, 0.1);
-}
-
-[data-color-theme="MatteBlack"] .file-viewer-md input[type="checkbox"] {
-  accent-color: #ffffff;
-}
-
-/* Skills — Markdown Prose */
-[data-color-theme="MatteBlack"] .skill-md {
-  color: #e0e0e0;
-}
-
-[data-color-theme="MatteBlack"] .skill-md h1 {
-  border-bottom-color: rgba(42, 42, 42, 0.4);
-}
-
-[data-color-theme="MatteBlack"] .skill-md h2 {
-  border-bottom-color: rgba(42, 42, 42, 0.3);
-}
-
-[data-color-theme="MatteBlack"] .skill-md a {
-  color: #ffffff;
-}
-
-[data-color-theme="MatteBlack"] .skill-md a:hover {
-  color: #d0d0d0;
-}
-
-[data-color-theme="MatteBlack"] .skill-md strong {
-  color: #e0e0e0;
-}
-
-[data-color-theme="MatteBlack"] .skill-md blockquote {
-  border-left-color: #ffffff;
-  background: rgba(255, 255, 255, 0.06);
-  color: #9a9a9a;
-}
-
-[data-color-theme="MatteBlack"] .skill-md li::marker {
-  color: #ffffff;
-}
-
-[data-color-theme="MatteBlack"] .skill-md code {
-  background: rgba(255, 255, 255, 0.1);
-  color: #ffffff;
-}
-
-[data-color-theme="MatteBlack"] .skill-md pre {
-  background: #121212;
-}
-
-[data-color-theme="MatteBlack"] .skill-md pre code {
-  color: #e0e0e0;
-}
-
-[data-color-theme="MatteBlack"] .skill-md hr {
-  background: rgba(42, 42, 42, 0.4);
-}
-
-[data-color-theme="MatteBlack"] .skill-md th {
-  background: rgba(255, 255, 255, 0.08);
-  border-color: rgba(42, 42, 42, 0.4);
-}
-
-[data-color-theme="MatteBlack"] .skill-md td {
-  border-color: rgba(42, 42, 42, 0.3);
-}
-
-[data-color-theme="MatteBlack"] .skill-md tr:nth-child(even) {
-  background: rgba(42, 42, 42, 0.1);
-}
-
-[data-color-theme="MatteBlack"] .skill-md input[type="checkbox"] {
-  accent-color: #ffffff;
-}
@@ -1,92 +0,0 @@
-@layer base {
-  [data-color-theme="MatteBlack"] {
-    /* Brand colors */
-    --duck-yellow: #e0e0e0;
-    --duck-orange: #cccccc;
-    --duck-teal: #ffffff;
-    --duck-forest: #9a9a9a;
-    --duck-dark: #e0e0e0;
-    --duck-beige: #1a1a1a;
-
-    /* Page background */
-    --pixel-grid-color: rgba(255, 255, 255, 0.06);
-
-    /* Glass surfaces */
-    --glass-bg: rgba(0, 0, 0, 0.25);
-    --glass-border: rgba(255, 255, 255, 0.12);
-    --dock-bg: rgba(0, 0, 0, 0.35);
-    --dock-border: rgba(255, 255, 255, 0.08);
-    --dock-tooltip-bg: rgba(0, 0, 0, 0.9);
-
-    /* Card component */
-    --card-bg: rgba(18, 18, 18, 0.92);
-    --card-grid-color: rgba(255, 255, 255, 0.04);
-
-    --cta: 0 0% 100%;
-    --cta-foreground: 0 0% 3.9%;
-
-    --naturegreen: 0 0% 81.6%;
-    --naturegreen-foreground: 0 0% 3.9%;
-
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 87.8%;
-
-    --card: 0 0% 7.1%;
-    --card-foreground: 0 0% 87.8%;
-
-    --popover: 0 0% 7.1%;
-    --popover-foreground: 0 0% 87.8%;
-
-    --primary: 0 0% 100%;
-    --primary-foreground: 0 0% 3.9%;
-
-    --secondary: 0 0% 16.5%;
-    --secondary-foreground: 0 0% 87.8%;
-
-    --muted: 0 0% 10.2%;
-    --muted-foreground: 0 0% 60.4%;
-
-    --accent: 0 0% 81.6%;
-    --accent-foreground: 0 0% 3.9%;
-
-    --destructive: 0 100% 63.3%;
-    --destructive-foreground: 0 0% 87.8%;
-
-    --success: 0 0% 60%;
-    --success-foreground: 0 0% 3.9%;
-
-    --brand: 0 0% 100%;
-    --brand-foreground: 0 0% 3.9%;
-    --brand-muted: 0 0% 10.2%;
-
-    --warning: 0 0% 80%;
-    --warning-foreground: 0 0% 3.9%;
-
-    --border: 0 0% 16.5%;
-    --input: 0 0% 16.5%;
-    --ring: 0 0% 100%;
-
-    --radius: 0.5rem;
-
-    /* Chart gradients */
-    --chart-primary: 0 0% 100%;
-    --chart-secondary: 0 0% 80%;
-
-    /* Status colors */
-    --status-success: 0 0% 60%;
-    --status-warning: 0 0% 80%;
-    --status-in-progress: 0 0% 100%;
-
-    --sidebar-background: 0 0% 7.1%;
-    --sidebar-foreground: 0 0% 60.4%;
-    --sidebar-primary: 0 0% 100%;
-    --sidebar-primary-foreground: 0 0% 3.9%;
-    --sidebar-accent: 0 0% 10.2%;
-    --sidebar-accent-foreground: 0 0% 87.8%;
-    --sidebar-border: 0 0% 16.5%;
-    --sidebar-ring: 0 0% 100%;
-
-    /* Hover Effect */
-    --ctahover: 0 0% 81.6%;
-  }
-}
@@ -1,2 +0,0 @@
-import './variables.css';
-import './prose.css';
@@ -1 +0,0 @@
-export const meta = { id: 'Nord', name: 'Nord', description: 'Cool arctic blues and frosty Nordic tones.' };
@@ -1,124 +0,0 @@
-/* File Viewer — Markdown Prose */
-[data-color-theme="Nord"] .file-viewer-md {
-  color: #eceff4;
-}
-
-[data-color-theme="Nord"] .file-viewer-md h1 {
-  border-bottom-color: rgba(67, 76, 94, 0.4);
-}
-
-[data-color-theme="Nord"] .file-viewer-md h2 {
-  border-bottom-color: rgba(67, 76, 94, 0.3);
-}
-
-[data-color-theme="Nord"] .file-viewer-md a {
-  color: #88c0d0;
-}
-
-[data-color-theme="Nord"] .file-viewer-md a:hover {
-  color: #8fbcbb;
-}
-
-[data-color-theme="Nord"] .file-viewer-md strong {
-  color: #eceff4;
-}
-
-[data-color-theme="Nord"] .file-viewer-md blockquote {
-  border-left-color: #88c0d0;
-  background: rgba(136, 192, 208, 0.06);
-  color: #d8dee9;
-}
-
-[data-color-theme="Nord"] .file-viewer-md li::marker {
-  color: #88c0d0;
-}
-
-[data-color-theme="Nord"] .file-viewer-md hr {
-  background: rgba(67, 76, 94, 0.4);
-}
-
-[data-color-theme="Nord"] .file-viewer-md th {
-  background: rgba(136, 192, 208, 0.08);
-  border-color: rgba(67, 76, 94, 0.4);
-}
-
-[data-color-theme="Nord"] .file-viewer-md td {
-  border-color: rgba(67, 76, 94, 0.3);
-}
-
-[data-color-theme="Nord"] .file-viewer-md tr:nth-child(even) {
-  background: rgba(67, 76, 94, 0.1);
-}
-
-[data-color-theme="Nord"] .file-viewer-md input[type="checkbox"] {
-  accent-color: #88c0d0;
-}
-
-/* Skills — Markdown Prose */
-[data-color-theme="Nord"] .skill-md {
-  color: #eceff4;
-}
-
-[data-color-theme="Nord"] .skill-md h1 {
-  border-bottom-color: rgba(67, 76, 94, 0.4);
-}
-
-[data-color-theme="Nord"] .skill-md h2 {
-  border-bottom-color: rgba(67, 76, 94, 0.3);
-}
-
-[data-color-theme="Nord"] .skill-md a {
-  color: #88c0d0;
-}
-
-[data-color-theme="Nord"] .skill-md a:hover {
-  color: #8fbcbb;
-}
-
-[data-color-theme="Nord"] .skill-md strong {
-  color: #eceff4;
-}
-
-[data-color-theme="Nord"] .skill-md blockquote {
-  border-left-color: #88c0d0;
-  background: rgba(136, 192, 208, 0.06);
-  color: #d8dee9;
-}
-
-[data-color-theme="Nord"] .skill-md li::marker {
-  color: #88c0d0;
-}
-
-[data-color-theme="Nord"] .skill-md code {
-  background: rgba(136, 192, 208, 0.1);
-  color: #88c0d0;
-}
-
-[data-color-theme="Nord"] .skill-md pre {
-  background: #3b4252;
-}
-
-[data-color-theme="Nord"] .skill-md pre code {
-  color: #eceff4;
-}
-
-[data-color-theme="Nord"] .skill-md hr {
-  background: rgba(67, 76, 94, 0.4);
-}
-
-[data-color-theme="Nord"] .skill-md th {
-  background: rgba(136, 192, 208, 0.08);
-  border-color: rgba(67, 76, 94, 0.4);
-}
-
-[data-color-theme="Nord"] .skill-md td {
-  border-color: rgba(67, 76, 94, 0.3);
-}
-
-[data-color-theme="Nord"] .skill-md tr:nth-child(even) {
-  background: rgba(67, 76, 94, 0.1);
-}
-
-[data-color-theme="Nord"] .skill-md input[type="checkbox"] {
-  accent-color: #88c0d0;
-}
@@ -1,92 +0,0 @@
-@layer base {
-  [data-color-theme="Nord"] {
-    /* Brand colors */
-    --duck-yellow: #ebcb8b;
-    --duck-orange: #d08770;
-    --duck-teal: #88c0d0;
-    --duck-forest: #d8dee9;
-    --duck-dark: #eceff4;
-    --duck-beige: #3b4252;
-
-    /* Page background */
-    --pixel-grid-color: rgba(136, 192, 208, 0.06);
-
-    /* Glass surfaces */
-    --glass-bg: rgba(0, 0, 0, 0.25);
-    --glass-border: rgba(136, 192, 208, 0.12);
-    --dock-bg: rgba(0, 0, 0, 0.35);
-    --dock-border: rgba(136, 192, 208, 0.08);
-    --dock-tooltip-bg: rgba(0, 0, 0, 0.9);
-
-    /* Card component */
-    --card-bg: rgba(59, 66, 82, 0.92);
-    --card-grid-color: rgba(136, 192, 208, 0.04);
-
-    --cta: 193.3 43.4% 67.5%;
-    --cta-foreground: 220 16.4% 21.6%;
-
-    --naturegreen: 178.7 25.1% 64.9%;
-    --naturegreen-foreground: 220 16.4% 21.6%;
-
-    --background: 220 16.4% 21.6%;
-    --foreground: 217.5 26.7% 94.1%;
-
-    --card: 221.7 16.3% 27.6%;
-    --card-foreground: 217.5 26.7% 94.1%;
-
-    --popover: 221.7 16.3% 27.6%;
-    --popover-foreground: 217.5 26.7% 94.1%;
-
-    --primary: 193.3 43.4% 67.5%;
-    --primary-foreground: 220 16.4% 21.6%;
-
-    --secondary: 220 16.8% 31.6%;
-    --secondary-foreground: 217.5 26.7% 94.1%;
-
-    --muted: 221.7 16.3% 27.6%;
-    --muted-foreground: 218.8 27.9% 88%;
-
-    --accent: 178.7 25.1% 64.9%;
-    --accent-foreground: 220 16.4% 21.6%;
-
-    --destructive: 354.3 42.3% 56.5%;
-    --destructive-foreground: 217.5 26.7% 94.1%;
-
-    --success: 92.4 27.8% 64.7%;
-    --success-foreground: 220 16.4% 21.6%;
-
-    --brand: 193.3 43.4% 67.5%;
-    --brand-foreground: 220 16.4% 21.6%;
-    --brand-muted: 221.7 16.3% 27.6%;
-
-    --warning: 40 70.6% 73.3%;
-    --warning-foreground: 220 16.4% 21.6%;
-
-    --border: 220 16.8% 31.6%;
-    --input: 220 16.8% 31.6%;
-    --ring: 193.3 43.4% 67.5%;
-
-    --radius: 0.5rem;
-
-    /* Chart gradients */
-    --chart-primary: 193.3 43.4% 67.5%;
-    --chart-secondary: 40 70.6% 73.3%;
-
-    /* Status colors */
-    --status-success: 92.4 27.8% 64.7%;
-    --status-warning: 40 70.6% 73.3%;
-    --status-in-progress: 193.3 43.4% 67.5%;
-
-    --sidebar-background: 221.7 16.3% 27.6%;
-    --sidebar-foreground: 218.8 27.9% 88%;
-    --sidebar-primary: 193.3 43.4% 67.5%;
-    --sidebar-primary-foreground: 220 16.4% 21.6%;
-    --sidebar-accent: 220 16.8% 31.6%;
-    --sidebar-accent-foreground: 217.5 26.7% 94.1%;
-    --sidebar-border: 220 16.5% 35.7%;
-    --sidebar-ring: 193.3 43.4% 67.5%;
-
-    /* Hover Effect */
-    --ctahover: 178.7 25.1% 64.9%;
-  }
-}
@@ -1,2 +0,0 @@
-import './variables.css';
-import './prose.css';
@@ -1 +0,0 @@
-export const meta = { id: 'OsakaJade', name: 'Osaka Jade', description: 'Electric jade and neon cyan on a midnight canvas.' };
@@ -1,124 +0,0 @@
-/* File Viewer — Markdown Prose */
-[data-color-theme="OsakaJade"] .file-viewer-md {
-  color: #c5cdd9;
-}
-
-[data-color-theme="OsakaJade"] .file-viewer-md h1 {
-  border-bottom-color: rgba(41, 46, 66, 0.4);
-}
-
-[data-color-theme="OsakaJade"] .file-viewer-md h2 {
-  border-bottom-color: rgba(41, 46, 66, 0.3);
-}
-
-[data-color-theme="OsakaJade"] .file-viewer-md a {
-  color: #2ac3de;
-}
-
-[data-color-theme="OsakaJade"] .file-viewer-md a:hover {
-  color: #0db9d7;
-}
-
-[data-color-theme="OsakaJade"] .file-viewer-md strong {
-  color: #c5cdd9;
-}
-
-[data-color-theme="OsakaJade"] .file-viewer-md blockquote {
-  border-left-color: #2ac3de;
-  background: rgba(42, 195, 222, 0.06);
-  color: #565f89;
-}
-
-[data-color-theme="OsakaJade"] .file-viewer-md li::marker {
-  color: #2ac3de;
-}
-
-[data-color-theme="OsakaJade"] .file-viewer-md hr {
-  background: rgba(41, 46, 66, 0.4);
-}
-
-[data-color-theme="OsakaJade"] .file-viewer-md th {
-  background: rgba(42, 195, 222, 0.08);
-  border-color: rgba(41, 46, 66, 0.4);
-}
-
-[data-color-theme="OsakaJade"] .file-viewer-md td {
-  border-color: rgba(41, 46, 66, 0.3);
-}
-
-[data-color-theme="OsakaJade"] .file-viewer-md tr:nth-child(even) {
-  background: rgba(41, 46, 66, 0.1);
-}
-
-[data-color-theme="OsakaJade"] .file-viewer-md input[type="checkbox"] {
-  accent-color: #2ac3de;
-}
-
-/* Skills — Markdown Prose */
-[data-color-theme="OsakaJade"] .skill-md {
-  color: #c5cdd9;
-}
-
-[data-color-theme="OsakaJade"] .skill-md h1 {
-  border-bottom-color: rgba(41, 46, 66, 0.4);
-}
-
-[data-color-theme="OsakaJade"] .skill-md h2 {
-  border-bottom-color: rgba(41, 46, 66, 0.3);
-}
-
-[data-color-theme="OsakaJade"] .skill-md a {
-  color: #2ac3de;
-}
-
-[data-color-theme="OsakaJade"] .skill-md a:hover {
-  color: #0db9d7;
-}
-
-[data-color-theme="OsakaJade"] .skill-md strong {
-  color: #c5cdd9;
-}
-
-[data-color-theme="OsakaJade"] .skill-md blockquote {
-  border-left-color: #2ac3de;
-  background: rgba(42, 195, 222, 0.06);
-  color: #565f89;
-}
-
-[data-color-theme="OsakaJade"] .skill-md li::marker {
-  color: #2ac3de;
-}
-
-[data-color-theme="OsakaJade"] .skill-md code {
-  background: rgba(42, 195, 222, 0.1);
-  color: #2ac3de;
-}
-
-[data-color-theme="OsakaJade"] .skill-md pre {
-  background: #16161e;
-}
-
-[data-color-theme="OsakaJade"] .skill-md pre code {
-  color: #c5cdd9;
-}
-
-[data-color-theme="OsakaJade"] .skill-md hr {
-  background: rgba(41, 46, 66, 0.4);
-}
-
-[data-color-theme="OsakaJade"] .skill-md th {
-  background: rgba(42, 195, 222, 0.08);
-  border-color: rgba(41, 46, 66, 0.4);
-}
-
-[data-color-theme="OsakaJade"] .skill-md td {
-  border-color: rgba(41, 46, 66, 0.3);
-}
-
-[data-color-theme="OsakaJade"] .skill-md tr:nth-child(even) {
-  background: rgba(41, 46, 66, 0.1);
-}
-
-[data-color-theme="OsakaJade"] .skill-md input[type="checkbox"] {
-  accent-color: #2ac3de;
-}
@@ -1,92 +0,0 @@
-@layer base {
-  [data-color-theme="OsakaJade"] {
-    /* Brand colors */
-    --duck-yellow: #e0af68;
-    --duck-orange: #f7768e;
-    --duck-teal: #2ac3de;
-    --duck-forest: #565f89;
-    --duck-dark: #c5cdd9;
-    --duck-beige: #1f2335;
-
-    /* Page background */
-    --pixel-grid-color: rgba(42, 195, 222, 0.06);
-
-    /* Glass surfaces */
-    --glass-bg: rgba(0, 0, 0, 0.25);
-    --glass-border: rgba(42, 195, 222, 0.12);
-    --dock-bg: rgba(0, 0, 0, 0.35);
-    --dock-border: rgba(42, 195, 222, 0.08);
-    --dock-tooltip-bg: rgba(0, 0, 0, 0.9);
-
-    /* Card component */
-    --card-bg: rgba(22, 22, 30, 0.92);
-    --card-grid-color: rgba(42, 195, 222, 0.04);
-
-    --cta: 189 73.2% 51.8%;
-    --cta-foreground: 235 18.8% 12.5%;
-
-    --naturegreen: 188.9 88.6% 44.7%;
-    --naturegreen-foreground: 235 18.8% 12.5%;
-
-    --background: 235 18.8% 12.5%;
-    --foreground: 216 20.8% 81.2%;
-
-    --card: 240 15.4% 10.2%;
-    --card-foreground: 216 20.8% 81.2%;
-
-    --popover: 240 15.4% 10.2%;
-    --popover-foreground: 216 20.8% 81.2%;
-
-    --primary: 189 73.2% 51.8%;
-    --primary-foreground: 235 18.8% 12.5%;
-
-    --secondary: 228 23.4% 21%;
-    --secondary-foreground: 216 20.8% 81.2%;
-
-    --muted: 229.1 26.2% 16.5%;
-    --muted-foreground: 229.4 22.9% 43.7%;
-
-    --accent: 188.9 88.6% 44.7%;
-    --accent-foreground: 235 18.8% 12.5%;
-
-    --destructive: 348.8 89% 71.6%;
-    --destructive-foreground: 216 20.8% 81.2%;
-
-    --success: 88.8 50.5% 61.2%;
-    --success-foreground: 235 18.8% 12.5%;
-
-    --brand: 189 73.2% 51.8%;
-    --brand-foreground: 235 18.8% 12.5%;
-    --brand-muted: 229.1 26.2% 16.5%;
-
-    --warning: 35.5 65.9% 64.3%;
-    --warning-foreground: 235 18.8% 12.5%;
-
-    --border: 228 23.4% 21%;
-    --input: 228 23.4% 21%;
-    --ring: 189 73.2% 51.8%;
-
-    --radius: 0.5rem;
-
-    /* Chart gradients */
-    --chart-primary: 189 73.2% 51.8%;
-    --chart-secondary: 35.5 65.9% 64.3%;
-
-    /* Status colors */
-    --status-success: 88.8 50.5% 61.2%;
-    --status-warning: 35.5 65.9% 64.3%;
-    --status-in-progress: 189 73.2% 51.8%;
-
-    --sidebar-background: 240 15.4% 10.2%;
-    --sidebar-foreground: 229.4 22.9% 43.7%;
-    --sidebar-primary: 189 73.2% 51.8%;
-    --sidebar-primary-foreground: 235 18.8% 12.5%;
-    --sidebar-accent: 229.1 26.2% 16.5%;
-    --sidebar-accent-foreground: 216 20.8% 81.2%;
-    --sidebar-border: 228 23.4% 21%;
-    --sidebar-ring: 189 73.2% 51.8%;
-
-    /* Hover Effect */
-    --ctahover: 188.9 88.6% 44.7%;
-  }
-}
@@ -1,2 +0,0 @@
-import './variables.css';
-import './prose.css';
@@ -1 +0,0 @@
-export const meta = { id: 'Ristretto', name: 'Ristretto', description: 'Warm coffee tones with amber and burnt orange.' };
@@ -1,124 +0,0 @@
-/* File Viewer — Markdown Prose */
-[data-color-theme="Ristretto"] .file-viewer-md {
-  color: #ebe5df;
-}
-
-[data-color-theme="Ristretto"] .file-viewer-md h1 {
-  border-bottom-color: rgba(95, 87, 79, 0.4);
-}
-
-[data-color-theme="Ristretto"] .file-viewer-md h2 {
-  border-bottom-color: rgba(95, 87, 79, 0.3);
-}
-
-[data-color-theme="Ristretto"] .file-viewer-md a {
-  color: #fc9867;
-}
-
-[data-color-theme="Ristretto"] .file-viewer-md a:hover {
-  color: #fbb360;
-}
-
-[data-color-theme="Ristretto"] .file-viewer-md strong {
-  color: #ebe5df;
-}
-
-[data-color-theme="Ristretto"] .file-viewer-md blockquote {
-  border-left-color: #fc9867;
-  background: rgba(252, 152, 103, 0.06);
-  color: #ada49d;
-}
-
-[data-color-theme="Ristretto"] .file-viewer-md li::marker {
-  color: #fc9867;
-}
-
-[data-color-theme="Ristretto"] .file-viewer-md hr {
-  background: rgba(95, 87, 79, 0.4);
-}
-
-[data-color-theme="Ristretto"] .file-viewer-md th {
-  background: rgba(252, 152, 103, 0.08);
-  border-color: rgba(95, 87, 79, 0.4);
-}
-
-[data-color-theme="Ristretto"] .file-viewer-md td {
-  border-color: rgba(95, 87, 79, 0.3);
-}
-
-[data-color-theme="Ristretto"] .file-viewer-md tr:nth-child(even) {
-  background: rgba(95, 87, 79, 0.1);
-}
-
-[data-color-theme="Ristretto"] .file-viewer-md input[type="checkbox"] {
-  accent-color: #fc9867;
-}
-
-/* Skills — Markdown Prose */
-[data-color-theme="Ristretto"] .skill-md {
-  color: #ebe5df;
-}
-
-[data-color-theme="Ristretto"] .skill-md h1 {
-  border-bottom-color: rgba(95, 87, 79, 0.4);
-}
-
-[data-color-theme="Ristretto"] .skill-md h2 {
-  border-bottom-color: rgba(95, 87, 79, 0.3);
-}
-
-[data-color-theme="Ristretto"] .skill-md a {
-  color: #fc9867;
-}
-
-[data-color-theme="Ristretto"] .skill-md a:hover {
-  color: #fbb360;
-}
-
-[data-color-theme="Ristretto"] .skill-md strong {
-  color: #ebe5df;
-}
-
-[data-color-theme="Ristretto"] .skill-md blockquote {
-  border-left-color: #fc9867;
-  background: rgba(252, 152, 103, 0.06);
-  color: #ada49d;
-}
-
-[data-color-theme="Ristretto"] .skill-md li::marker {
-  color: #fc9867;
-}
-
-[data-color-theme="Ristretto"] .skill-md code {
-  background: rgba(252, 152, 103, 0.1);
-  color: #fc9867;
-}
-
-[data-color-theme="Ristretto"] .skill-md pre {
-  background: #352f2a;
-}
-
-[data-color-theme="Ristretto"] .skill-md pre code {
-  color: #ebe5df;
-}
-
-[data-color-theme="Ristretto"] .skill-md hr {
-  background: rgba(95, 87, 79, 0.4);
-}
-
-[data-color-theme="Ristretto"] .skill-md th {
-  background: rgba(252, 152, 103, 0.08);
-  border-color: rgba(95, 87, 79, 0.4);
-}
-
-[data-color-theme="Ristretto"] .skill-md td {
-  border-color: rgba(95, 87, 79, 0.3);
-}
-
-[data-color-theme="Ristretto"] .skill-md tr:nth-child(even) {
-  background: rgba(95, 87, 79, 0.1);
-}
-
-[data-color-theme="Ristretto"] .skill-md input[type="checkbox"] {
-  accent-color: #fc9867;
-}
@@ -1,92 +0,0 @@
-@layer base {
-  [data-color-theme="Ristretto"] {
-    /* Brand colors */
-    --duck-yellow: #fbb360;
-    --duck-orange: #fc9867;
-    --duck-teal: #fc9867;
-    --duck-forest: #ada49d;
-    --duck-dark: #ebe5df;
-    --duck-beige: #4d4743;
-
-    /* Page background */
-    --pixel-grid-color: rgba(252, 152, 103, 0.06);
-
-    /* Glass surfaces */
-    --glass-bg: rgba(0, 0, 0, 0.25);
-    --glass-border: rgba(252, 152, 103, 0.12);
-    --dock-bg: rgba(0, 0, 0, 0.35);
-    --dock-border: rgba(252, 152, 103, 0.08);
-    --dock-tooltip-bg: rgba(0, 0, 0, 0.9);
-
-    /* Card component */
-    --card-bg: rgba(53, 47, 42, 0.92);
-    --card-grid-color: rgba(252, 152, 103, 0.04);
-
-    --cta: 19.7 96.1% 69.6%;
-    --cta-foreground: 34.3 5.8% 23.7%;
-
-    --naturegreen: 32.1 95.1% 68%;
-    --naturegreen-foreground: 34.3 5.8% 23.7%;
-
-    --background: 34.3 5.8% 23.7%;
-    --foreground: 30 23.1% 89.8%;
-
-    --card: 27.3 11.6% 18.6%;
-    --card-foreground: 30 23.1% 89.8%;
-
-    --popover: 27.3 11.6% 18.6%;
-    --popover-foreground: 30 23.1% 89.8%;
-
-    --primary: 19.7 96.1% 69.6%;
-    --primary-foreground: 34.3 5.8% 23.7%;
-
-    --secondary: 30 9.2% 34.1%;
-    --secondary-foreground: 30 23.1% 89.8%;
-
-    --muted: 24 6.9% 28.2%;
-    --muted-foreground: 26.3 8.9% 64.7%;
-
-    --accent: 32.1 95.1% 68%;
-    --accent-foreground: 34.3 5.8% 23.7%;
-
-    --destructive: 0 57.2% 63.3%;
-    --destructive-foreground: 30 23.1% 89.8%;
-
-    --success: 113.6 13.5% 59.2%;
-    --success-foreground: 34.3 5.8% 23.7%;
-
-    --brand: 19.7 96.1% 69.6%;
-    --brand-foreground: 34.3 5.8% 23.7%;
-    --brand-muted: 24 6.9% 28.2%;
-
-    --warning: 32.1 95.1% 68%;
-    --warning-foreground: 34.3 5.8% 23.7%;
-
-    --border: 30 9.2% 34.1%;
-    --input: 30 9.2% 34.1%;
-    --ring: 19.7 96.1% 69.6%;
-
-    --radius: 0.5rem;
-
-    /* Chart gradients */
-    --chart-primary: 19.7 96.1% 69.6%;
-    --chart-secondary: 32.1 95.1% 68%;
-
-    /* Status colors */
-    --status-success: 113.6 13.5% 59.2%;
-    --status-warning: 32.1 95.1% 68%;
-    --status-in-progress: 19.7 96.1% 69.6%;
-
-    --sidebar-background: 27.3 11.6% 18.6%;
-    --sidebar-foreground: 26.3 8.9% 64.7%;
-    --sidebar-primary: 19.7 96.1% 69.6%;
-    --sidebar-primary-foreground: 34.3 5.8% 23.7%;
-    --sidebar-accent: 24 6.9% 28.2%;
-    --sidebar-accent-foreground: 30 23.1% 89.8%;
-    --sidebar-border: 30 9.2% 34.1%;
-    --sidebar-ring: 19.7 96.1% 69.6%;
-
-    /* Hover Effect */
-    --ctahover: 32.1 95.1% 68%;
-  }
-}
@@ -1,2 +0,0 @@
-import './variables.css';
-import './prose.css';
@@ -1 +0,0 @@
-export const meta = { id: 'RosePine', name: 'Rose Pine', description: 'Romantic purples and dusty rose on a moonlit base.' };
@@ -1,124 +0,0 @@
-/* File Viewer — Markdown Prose */
-[data-color-theme="RosePine"] .file-viewer-md {
-  color: #e0def4;
-}
-
-[data-color-theme="RosePine"] .file-viewer-md h1 {
-  border-bottom-color: rgba(38, 35, 58, 0.4);
-}
-
-[data-color-theme="RosePine"] .file-viewer-md h2 {
-  border-bottom-color: rgba(38, 35, 58, 0.3);
-}
-
-[data-color-theme="RosePine"] .file-viewer-md a {
-  color: #c4a7e7;
-}
-
-[data-color-theme="RosePine"] .file-viewer-md a:hover {
-  color: #ebbcba;
-}
-
-[data-color-theme="RosePine"] .file-viewer-md strong {
-  color: #e0def4;
-}
-
-[data-color-theme="RosePine"] .file-viewer-md blockquote {
-  border-left-color: #c4a7e7;
-  background: rgba(196, 167, 231, 0.06);
-  color: #908caa;
-}
-
-[data-color-theme="RosePine"] .file-viewer-md li::marker {
-  color: #c4a7e7;
-}
-
-[data-color-theme="RosePine"] .file-viewer-md hr {
-  background: rgba(38, 35, 58, 0.4);
-}
-
-[data-color-theme="RosePine"] .file-viewer-md th {
-  background: rgba(196, 167, 231, 0.08);
-  border-color: rgba(38, 35, 58, 0.4);
-}
-
-[data-color-theme="RosePine"] .file-viewer-md td {
-  border-color: rgba(38, 35, 58, 0.3);
-}
-
-[data-color-theme="RosePine"] .file-viewer-md tr:nth-child(even) {
-  background: rgba(38, 35, 58, 0.1);
-}
-
-[data-color-theme="RosePine"] .file-viewer-md input[type="checkbox"] {
-  accent-color: #c4a7e7;
-}
-
-/* Skills — Markdown Prose */
-[data-color-theme="RosePine"] .skill-md {
-  color: #e0def4;
-}
-
-[data-color-theme="RosePine"] .skill-md h1 {
-  border-bottom-color: rgba(38, 35, 58, 0.4);
-}
-
-[data-color-theme="RosePine"] .skill-md h2 {
-  border-bottom-color: rgba(38, 35, 58, 0.3);
-}
-
-[data-color-theme="RosePine"] .skill-md a {
-  color: #c4a7e7;
-}
-
-[data-color-theme="RosePine"] .skill-md a:hover {
-  color: #ebbcba;
-}
-
-[data-color-theme="RosePine"] .skill-md strong {
-  color: #e0def4;
-}
-
-[data-color-theme="RosePine"] .skill-md blockquote {
-  border-left-color: #c4a7e7;
-  background: rgba(196, 167, 231, 0.06);
-  color: #908caa;
-}
-
-[data-color-theme="RosePine"] .skill-md li::marker {
-  color: #c4a7e7;
-}
-
-[data-color-theme="RosePine"] .skill-md code {
-  background: rgba(196, 167, 231, 0.1);
-  color: #c4a7e7;
-}
-
-[data-color-theme="RosePine"] .skill-md pre {
-  background: #1f1d2e;
-}
-
-[data-color-theme="RosePine"] .skill-md pre code {
-  color: #e0def4;
-}
-
-[data-color-theme="RosePine"] .skill-md hr {
-  background: rgba(38, 35, 58, 0.4);
-}
-
-[data-color-theme="RosePine"] .skill-md th {
-  background: rgba(196, 167, 231, 0.08);
-  border-color: rgba(38, 35, 58, 0.4);
-}
-
-[data-color-theme="RosePine"] .skill-md td {
-  border-color: rgba(38, 35, 58, 0.3);
-}
-
-[data-color-theme="RosePine"] .skill-md tr:nth-child(even) {
-  background: rgba(38, 35, 58, 0.1);
-}
-
-[data-color-theme="RosePine"] .skill-md input[type="checkbox"] {
-  accent-color: #c4a7e7;
-}
@@ -1,92 +0,0 @@
-@layer base {
-  [data-color-theme="RosePine"] {
-    /* Brand colors */
-    --duck-yellow: #f6c177;
-    --duck-orange: #eb6f92;
-    --duck-teal: #c4a7e7;
-    --duck-forest: #908caa;
-    --duck-dark: #e0def4;
-    --duck-beige: #26233a;
-
-    /* Page background */
-    --pixel-grid-color: rgba(196, 167, 231, 0.06);
-
-    /* Glass surfaces */
-    --glass-bg: rgba(0, 0, 0, 0.25);
-    --glass-border: rgba(196, 167, 231, 0.12);
-    --dock-bg: rgba(0, 0, 0, 0.35);
-    --dock-border: rgba(196, 167, 231, 0.08);
-    --dock-tooltip-bg: rgba(0, 0, 0, 0.9);
-
-    /* Card component */
-    --card-bg: rgba(31, 29, 46, 0.92);
-    --card-grid-color: rgba(196, 167, 231, 0.04);
-
-    --cta: 267.2 57.1% 78%;
-    --cta-foreground: 249.2 22% 11.6%;
-
-    --naturegreen: 2.4 55.1% 82.5%;
-    --naturegreen-foreground: 249.2 22% 11.6%;
-
-    --background: 249.2 22% 11.6%;
-    --foreground: 245.5 50% 91.4%;
-
-    --card: 247.1 22.7% 14.7%;
-    --card-foreground: 245.5 50% 91.4%;
-
-    --popover: 247.1 22.7% 14.7%;
-    --popover-foreground: 245.5 50% 91.4%;
-
-    --primary: 267.2 57.1% 78%;
-    --primary-foreground: 249.2 22% 11.6%;
-
-    --secondary: 247.8 24.7% 18.2%;
-    --secondary-foreground: 245.5 50% 91.4%;
-
-    --muted: 247.8 24.7% 18.2%;
-    --muted-foreground: 248 15% 60.8%;
-
-    --accent: 2.4 55.1% 82.5%;
-    --accent-foreground: 249.2 22% 11.6%;
-
-    --destructive: 343.1 75.6% 67.8%;
-    --destructive-foreground: 245.5 50% 91.4%;
-
-    --success: 189 43.5% 72.9%;
-    --success-foreground: 249.2 22% 11.6%;
-
-    --brand: 267.2 57.1% 78%;
-    --brand-foreground: 249.2 22% 11.6%;
-    --brand-muted: 247.8 24.7% 18.2%;
-
-    --warning: 35 87.6% 71.6%;
-    --warning-foreground: 249.2 22% 11.6%;
-
-    --border: 247.8 24.7% 18.2%;
-    --input: 247.8 24.7% 18.2%;
-    --ring: 267.2 57.1% 78%;
-
-    --radius: 0.5rem;
-
-    /* Chart gradients */
-    --chart-primary: 267.2 57.1% 78%;
-    --chart-secondary: 35 87.6% 71.6%;
-
-    /* Status colors */
-    --status-success: 189 43.5% 72.9%;
-    --status-warning: 35 87.6% 71.6%;
-    --status-in-progress: 267.2 57.1% 78%;
-
-    --sidebar-background: 247.1 22.7% 14.7%;
-    --sidebar-foreground: 248 15% 60.8%;
-    --sidebar-primary: 267.2 57.1% 78%;
-    --sidebar-primary-foreground: 249.2 22% 11.6%;
-    --sidebar-accent: 247.8 24.7% 18.2%;
-    --sidebar-accent-foreground: 245.5 50% 91.4%;
-    --sidebar-border: 248.6 14.7% 28%;
-    --sidebar-ring: 267.2 57.1% 78%;
-
-    /* Hover Effect */
-    --ctahover: 2.4 55.1% 82.5%;
-  }
-}
@@ -1,2 +0,0 @@
-import './variables.css';
-import './prose.css';
@@ -1 +0,0 @@
-export const meta = { id: 'TokyoNight', name: 'Tokyo Night', description: 'Moonlight blues and soft purples from a Tokyo evening.' };
@@ -1,124 +0,0 @@
-/* File Viewer — Markdown Prose */
-[data-color-theme="TokyoNight"] .file-viewer-md {
-  color: #c8d3f5;
-}
-
-[data-color-theme="TokyoNight"] .file-viewer-md h1 {
-  border-bottom-color: rgba(59, 66, 97, 0.4);
-}
-
-[data-color-theme="TokyoNight"] .file-viewer-md h2 {
-  border-bottom-color: rgba(59, 66, 97, 0.3);
-}
-
-[data-color-theme="TokyoNight"] .file-viewer-md a {
-  color: #82aaff;
-}
-
-[data-color-theme="TokyoNight"] .file-viewer-md a:hover {
-  color: #86e1fc;
-}
-
-[data-color-theme="TokyoNight"] .file-viewer-md strong {
-  color: #c8d3f5;
-}
-
-[data-color-theme="TokyoNight"] .file-viewer-md blockquote {
-  border-left-color: #82aaff;
-  background: rgba(130, 170, 255, 0.06);
-  color: #828bb8;
-}
-
-[data-color-theme="TokyoNight"] .file-viewer-md li::marker {
-  color: #82aaff;
-}
-
-[data-color-theme="TokyoNight"] .file-viewer-md hr {
-  background: rgba(59, 66, 97, 0.4);
-}
-
-[data-color-theme="TokyoNight"] .file-viewer-md th {
-  background: rgba(130, 170, 255, 0.08);
-  border-color: rgba(59, 66, 97, 0.4);
-}
-
-[data-color-theme="TokyoNight"] .file-viewer-md td {
-  border-color: rgba(59, 66, 97, 0.3);
-}
-
-[data-color-theme="TokyoNight"] .file-viewer-md tr:nth-child(even) {
-  background: rgba(59, 66, 97, 0.1);
-}
-
-[data-color-theme="TokyoNight"] .file-viewer-md input[type="checkbox"] {
-  accent-color: #82aaff;
-}
-
-/* Skills — Markdown Prose */
-[data-color-theme="TokyoNight"] .skill-md {
-  color: #c8d3f5;
-}
-
-[data-color-theme="TokyoNight"] .skill-md h1 {
-  border-bottom-color: rgba(59, 66, 97, 0.4);
-}
-
-[data-color-theme="TokyoNight"] .skill-md h2 {
-  border-bottom-color: rgba(59, 66, 97, 0.3);
-}
-
-[data-color-theme="TokyoNight"] .skill-md a {
-  color: #82aaff;
-}
-
-[data-color-theme="TokyoNight"] .skill-md a:hover {
-  color: #86e1fc;
-}
-
-[data-color-theme="TokyoNight"] .skill-md strong {
-  color: #c8d3f5;
-}
-
-[data-color-theme="TokyoNight"] .skill-md blockquote {
-  border-left-color: #82aaff;
-  background: rgba(130, 170, 255, 0.06);
-  color: #828bb8;
-}
-
-[data-color-theme="TokyoNight"] .skill-md li::marker {
-  color: #82aaff;
-}
-
-[data-color-theme="TokyoNight"] .skill-md code {
-  background: rgba(130, 170, 255, 0.1);
-  color: #82aaff;
-}
-
-[data-color-theme="TokyoNight"] .skill-md pre {
-  background: #1e2030;
-}
-
-[data-color-theme="TokyoNight"] .skill-md pre code {
-  color: #c8d3f5;
-}
-
-[data-color-theme="TokyoNight"] .skill-md hr {
-  background: rgba(59, 66, 97, 0.4);
-}
-
-[data-color-theme="TokyoNight"] .skill-md th {
-  background: rgba(130, 170, 255, 0.08);
-  border-color: rgba(59, 66, 97, 0.4);
-}
-
-[data-color-theme="TokyoNight"] .skill-md td {
-  border-color: rgba(59, 66, 97, 0.3);
-}
-
-[data-color-theme="TokyoNight"] .skill-md tr:nth-child(even) {
-  background: rgba(59, 66, 97, 0.1);
-}
-
-[data-color-theme="TokyoNight"] .skill-md input[type="checkbox"] {
-  accent-color: #82aaff;
-}
@@ -1,92 +0,0 @@
-@layer base {
-  [data-color-theme="TokyoNight"] {
-    /* Brand colors */
-    --duck-yellow: #ffc777;
-    --duck-orange: #ff966c;
-    --duck-teal: #82aaff;
-    --duck-forest: #828bb8;
-    --duck-dark: #c8d3f5;
-    --duck-beige: #2f334d;
-
-    /* Page background */
-    --pixel-grid-color: rgba(130, 170, 255, 0.06);
-
-    /* Glass surfaces */
-    --glass-bg: rgba(0, 0, 0, 0.25);
-    --glass-border: rgba(130, 170, 255, 0.12);
-    --dock-bg: rgba(0, 0, 0, 0.35);
-    --dock-border: rgba(130, 170, 255, 0.08);
-    --dock-tooltip-bg: rgba(0, 0, 0, 0.9);
-
-    /* Card component */
-    --card-bg: rgba(30, 32, 48, 0.92);
-    --card-grid-color: rgba(130, 170, 255, 0.04);
-
-    --cta: 220.8 100% 75.5%;
-    --cta-foreground: 232.5 22.9% 13.7%;
-
-    --naturegreen: 193.7 95.2% 75.7%;
-    --naturegreen-foreground: 232.5 22.9% 13.7%;
-
-    --background: 234 22.7% 17.3%;
-    --foreground: 225.3 69.2% 87.3%;
-
-    --card: 233.3 23.1% 15.3%;
-    --card-foreground: 225.3 69.2% 87.3%;
-
-    --popover: 233.3 23.1% 15.3%;
-    --popover-foreground: 225.3 69.2% 87.3%;
-
-    --primary: 220.8 100% 75.5%;
-    --primary-foreground: 232.5 22.9% 13.7%;
-
-    --secondary: 228.9 24.4% 30.6%;
-    --secondary-foreground: 225.3 69.2% 87.3%;
-
-    --muted: 232 24.2% 24.3%;
-    --muted-foreground: 230 27.6% 61.6%;
-
-    --accent: 193.7 95.2% 75.7%;
-    --accent-foreground: 232.5 22.9% 13.7%;
-
-    --destructive: 349.6 54.3% 50.2%;
-    --destructive-foreground: 225.3 69.2% 87.3%;
-
-    --success: 84.4 66.4% 73.1%;
-    --success-foreground: 232.5 22.9% 13.7%;
-
-    --brand: 220.8 100% 75.5%;
-    --brand-foreground: 232.5 22.9% 13.7%;
-    --brand-muted: 232 24.2% 24.3%;
-
-    --warning: 35.3 100% 73.3%;
-    --warning-foreground: 234 22.7% 17.3%;
-
-    --border: 228.9 24.4% 30.6%;
-    --input: 228.9 24.4% 30.6%;
-    --ring: 220.8 100% 75.5%;
-
-    --radius: 0.5rem;
-
-    /* Chart gradients */
-    --chart-primary: 220.8 100% 75.5%;
-    --chart-secondary: 35.3 100% 73.3%;
-
-    /* Status colors */
-    --status-success: 84.4 66.4% 73.1%;
-    --status-warning: 35.3 100% 73.3%;
-    --status-in-progress: 220.8 100% 75.5%;
-
-    --sidebar-background: 233.3 23.1% 15.3%;
-    --sidebar-foreground: 230 27.6% 61.6%;
-    --sidebar-primary: 220.8 100% 75.5%;
-    --sidebar-primary-foreground: 232.5 22.9% 13.7%;
-    --sidebar-accent: 232 24.2% 24.3%;
-    --sidebar-accent-foreground: 225.3 69.2% 87.3%;
-    --sidebar-border: 228.9 24.4% 30.6%;
-    --sidebar-ring: 220.8 100% 75.5%;
-
-    /* Hover Effect */
-    --ctahover: 193.7 95.2% 75.7%;
-  }
-}
@@ -1,14 +0,0 @@
-export const themes = [
-  { id: 'DuckPond', name: 'Duck Pond' },
-  { id: 'TokyoNight', name: 'Tokyo Night' },
-  { id: 'CatppuccinLatte', name: 'Catppuccin Latte' },
-  { id: 'CatppuccinMocha', name: 'Catppuccin Mocha' },
-  { id: 'Everforest', name: 'Everforest' },
-  { id: 'Gruvbox', name: 'Gruvbox' },
-  { id: 'Kanagawa', name: 'Kanagawa' },
-  { id: 'MatteBlack', name: 'Matte Black' },
-  { id: 'Nord', name: 'Nord' },
-  { id: 'OsakaJade', name: 'Osaka Jade' },
-  { id: 'Ristretto', name: 'Ristretto' },
-  { id: 'RosePine', name: 'Rose Pine' },
-] as const;
@@ -1,31 +0,0 @@
-{
-  "name": "themes",
-  "private": true,
-  "exports": {
-    ".": "./index.ts",
-    "./DuckPond": "./DuckPond/index.ts",
-    "./DuckPond/client": "./DuckPond/client.ts",
-    "./TokyoNight": "./TokyoNight/index.ts",
-    "./TokyoNight/client": "./TokyoNight/client.ts",
-    "./CatppuccinLatte": "./CatppuccinLatte/index.ts",
-    "./CatppuccinLatte/client": "./CatppuccinLatte/client.ts",
-    "./CatppuccinMocha": "./CatppuccinMocha/index.ts",
-    "./CatppuccinMocha/client": "./CatppuccinMocha/client.ts",
-    "./Everforest": "./Everforest/index.ts",
-    "./Everforest/client": "./Everforest/client.ts",
-    "./Gruvbox": "./Gruvbox/index.ts",
-    "./Gruvbox/client": "./Gruvbox/client.ts",
-    "./Kanagawa": "./Kanagawa/index.ts",
-    "./Kanagawa/client": "./Kanagawa/client.ts",
-    "./MatteBlack": "./MatteBlack/index.ts",
-    "./MatteBlack/client": "./MatteBlack/client.ts",
-    "./Nord": "./Nord/index.ts",
-    "./Nord/client": "./Nord/client.ts",
-    "./OsakaJade": "./OsakaJade/index.ts",
-    "./OsakaJade/client": "./OsakaJade/client.ts",
-    "./Ristretto": "./Ristretto/index.ts",
-    "./Ristretto/client": "./Ristretto/client.ts",
-    "./RosePine": "./RosePine/index.ts",
-    "./RosePine/client": "./RosePine/client.ts"
-  }
-}
@@ -0,0 +1,7 @@
+{
+  "name": "widgets",
+  "private": true,
+  "exports": {
+    "./TerminalView": "./TerminalView.tsx"
+  }
+}
				`@@ -1 +0,0 @@`
				`export { terminalWebsocket } from './websocket';`
				`@@ -1 +0,0 @@`
				`export const meta = { id: 'CatppuccinLatte', name: 'Catppuccin Latte', description: 'Warm pastel tones on a creamy light canvas.' };`
				`@@ -1 +0,0 @@`
				`export const meta = { id: 'CatppuccinMocha', name: 'Catppuccin Mocha', description: 'Rich dark chocolate with pastel neon accents.' };`
				`@@ -1 +0,0 @@`
				`export const meta = { id: 'DuckPond', name: 'Duck Pond', description: 'Warm greens and teals inspired by a forest pond.' };`
				`@@ -1 +0,0 @@`
				`export const meta = { id: 'Everforest', name: 'Everforest', description: 'Soft earthy greens from a quiet forest floor.' };`
				`@@ -1 +0,0 @@`
				`export const meta = { id: 'Gruvbox', name: 'Gruvbox', description: 'Retro warm tones with earthy browns and muted accents.' };`
				`@@ -1 +0,0 @@`
				`export const meta = { id: 'Kanagawa', name: 'Kanagawa', description: 'Deep indigo waves and ink-wash inspired hues.' };`
				`@@ -1 +0,0 @@`
				`export const meta = { id: 'MatteBlack', name: 'Matte Black', description: 'Pure minimal monochrome with a matte finish.' };`
				`@@ -1 +0,0 @@`
				`export const meta = { id: 'Nord', name: 'Nord', description: 'Cool arctic blues and frosty Nordic tones.' };`
				`@@ -1 +0,0 @@`
				`export const meta = { id: 'OsakaJade', name: 'Osaka Jade', description: 'Electric jade and neon cyan on a midnight canvas.' };`