@theproductguy/create-mission-control 1.0.0

package/src/template/agent-os-ui/src/components/ThemeToggle.tsx

@@ -0,0 +1,72 @@
+import { useState, useEffect } from 'react'
+import { Moon, Sun } from 'lucide-react'
+
+export type Theme = 'light' | 'dark' | 'system'
+
+interface ThemeToggleProps {
+    onThemeChange?: (theme: Theme) => void
+    className?: string
+}
+
+export function ThemeToggle({ onThemeChange, className }: ThemeToggleProps) {
+    const [theme, setTheme] = useState<Theme>(() => {
+        if (typeof window !== 'undefined') {
+            return (localStorage.getItem('theme') as Theme) || 'system'
+        }
+        return 'system'
+    })
+
+    useEffect(() => {
+        const root = document.documentElement
+
+        const applyTheme = (targetTheme: Theme) => {
+            if (targetTheme === 'system') {
+                const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches
+                root.classList.toggle('dark', systemDark)
+            } else {
+                root.classList.toggle('dark', targetTheme === 'dark')
+            }
+        }
+
+        applyTheme(theme)
+        localStorage.setItem('theme', theme)
+
+        // Notify parent
+        onThemeChange?.(theme)
+
+        // Listen for system theme changes when in system mode
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+        const handleChange = () => {
+            if (theme === 'system') {
+                applyTheme('system')
+            }
+        }
+        mediaQuery.addEventListener('change', handleChange)
+
+        return () => mediaQuery.removeEventListener('change', handleChange)
+    }, [theme, onThemeChange])
+
+    const toggleTheme = () => {
+        setTheme((prev) => {
+            if (prev === 'light') return 'dark'
+            if (prev === 'dark') return 'system'
+            return 'light'
+        })
+    }
+
+    const isDark = theme === 'dark' || (theme === 'system' && typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+
+    return (
+        <button
+            onClick={toggleTheme}
+            className={`w-9 h-9 flex items-center justify-center rounded-md text-stone-500 hover:text-stone-900 dark:text-stone-400 dark:hover:text-stone-100 hover:bg-stone-100 dark:hover:bg-stone-800 transition-colors ${className || ''}`}
+            title={`Theme: ${theme}`}
+        >
+            {isDark ? (
+                <Moon className="w-5 h-5" strokeWidth={1.5} />
+            ) : (
+                <Sun className="w-5 h-5" strokeWidth={1.5} />
+            )}
+        </button>
+    )
+}

package/src/template/agent-os-ui/src/index.ts

@@ -0,0 +1,11 @@
+import './style.css'
+
+export { AgentShell } from './components/AgentShell'
+export { AgentSidebar } from './components/AgentSidebar'
+export { GuidanceCard } from './components/GuidanceCard'
+export { ThemeToggle } from './components/ThemeToggle'
+export { PromptButton } from './components/PromptButton'
+export { StatusItem } from './components/StatusItem'
+export { MarkdownViewer } from './components/MarkdownViewer'
+// Export types if needed
+export type { Theme } from './components/ThemeToggle'

package/src/template/agent-os-ui/src/style.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/template/agent-os-ui/tsconfig.json

@@ -0,0 +1,33 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "lib": [
+            "ES2020",
+            "DOM",
+            "DOM.Iterable"
+        ],
+        "module": "ESNext",
+        "skipLibCheck": true,
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx",
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true,
+        "declaration": true,
+        "baseUrl": ".",
+        "paths": {
+            "@/*": [
+                "./src/*"
+            ]
+        }
+    },
+    "include": [
+        "src"
+    ]
+}

package/src/template/agent-os-ui/vite.config.ts

@@ -0,0 +1,32 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import { resolve } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = resolve(__filename, '..');
+
+export default defineConfig({
+    plugins: [
+        react(),
+        dts({ include: ['src'] })
+    ],
+    build: {
+        lib: {
+            entry: resolve(__dirname, 'src/index.ts'),
+            name: 'AgentOSUI',
+            fileName: 'agent-os-ui',
+        },
+        rollupOptions: {
+            external: ['react', 'react-dom', 'react/jsx-runtime'],
+            output: {
+                globals: {
+                    react: 'React',
+                    'react-dom': 'ReactDOM',
+                    'react/jsx-runtime': 'jsxRuntime',
+                },
+            },
+        },
+    },
+});

package/src/template/control-center/backend/index.js

@@ -0,0 +1,253 @@
+const express = require('express');
+const cors = require('cors');
+const fs = require('fs');
+const path = require('path');
+const { glob } = require('glob');
+
+const app = express();
+const PORT = process.env.PORT || 5403;
+const DESIGN_PORT = process.env.DESIGN_PORT || 5400;
+const APP_PORT = process.env.APP_PORT || 5402;
+
+// Configuration
+const PROJECT_ROOT = path.resolve(__dirname, '../..'); // learning-agent-os root
+const APP_DIR = path.join(PROJECT_ROOT, 'app');
+const AGENT_OS_DIR = path.join(PROJECT_ROOT, 'agent-os');
+
+app.use(cors());
+app.use(express.json());
+
+// Helper to check file existence
+const checkFile = (filePath) => {
+    return fs.existsSync(path.join(AGENT_OS_DIR, filePath));
+};
+
+// Helper to parse markdown checkboxes
+const parseStatus = (relativePath) => {
+    const fullPath = path.join(AGENT_OS_DIR, relativePath);
+    console.log(`Reading path: ${fullPath}`);
+    if (!fs.existsSync(fullPath)) {
+        console.log(`File not found: ${fullPath}`);
+        return { exists: false, completed: 0, total: 0, nextItem: null, items: [] };
+    }
+    const content = fs.readFileSync(fullPath, 'utf-8');
+    const total = (content.match(/- \[ \]/g) || []).length + (content.match(/- \[x\]/g) || []).length;
+    const completed = (content.match(/- \[x\]/g) || []).length;
+
+    // Find next incomplete item and all items
+    let nextItem = null;
+    const items = [];
+    const lines = content.split('\n');
+
+    for (const line of lines) {
+        const match = line.match(/^\s*-\s*\[([ x])\]\s*(.+)$/);
+        if (match) {
+            const isCompleted = match[1] === 'x';
+            const text = match[2].trim();
+            // Clean up text (remove bolding, etc)
+            const cleanText = text.replace(/\*\*/g, '').replace(/^\d+\.\s*/, '');
+
+            items.push({ name: cleanText, completed: isCompleted });
+
+            if (!nextItem && !isCompleted) {
+                nextItem = cleanText;
+            }
+        }
+    }
+
+    // Check for boilerplate indicators
+    const boilerplateMarkers = [
+        '[Your Product Name]',
+        '[Database choice]',
+        '[Role]',
+        '[Feature 1]',
+        '[Target Audience]',
+        '[Unique Value Proposition',
+        'MVP Launch',
+        'First User',
+        'Feature A'
+    ];
+    const isBoilerplate = boilerplateMarkers.some(marker => content.includes(marker));
+
+    return { exists: true, isBoilerplate, completed, total, nextItem, items };
+};
+
+// Helper to check service health
+const checkService = (port) => {
+    return new Promise((resolve) => {
+        const http = require('http');
+        const req = http.get(`http://localhost:${port}/`, { timeout: 2000 }, (res) => {
+            // If we get any response, the port is active and serving HTTP
+            resolve(true);
+            // conn.destroy(); // Not needed if we just consume/ignore. 
+            // Actually, we should consume resume to avoid hanging? 
+            // Or just destroy.
+            res.resume();
+        });
+
+        req.on('error', (e) => {
+            resolve(false);
+        });
+
+        req.on('timeout', () => {
+            req.destroy();
+            resolve(false);
+        });
+    });
+};
+
+// API: Get Project Status
+app.get('/api/status', async (req, res) => {
+    try {
+        const productFiles = {
+            mission: parseStatus('product/mission.md').exists ? parseStatus('product/mission.md') : parseStatus('product/product-overview.md'),
+            roadmap: parseStatus('product/roadmap.md').exists ? parseStatus('product/roadmap.md') : parseStatus('product/product-roadmap.md'),
+            techStack: parseStatus('product/tech-stack.md'),
+        };
+
+        // Get Specs
+        const specDirs = glob.sync('specs/*/', { cwd: AGENT_OS_DIR });
+        const specs = specDirs.map(dir => {
+            const name = path.basename(dir);
+            return {
+                name,
+                spec: parseStatus(`specs/${name}/spec.md`),
+                tasks: parseStatus(`specs/${name}/tasks.md`),
+            };
+        });
+
+        // Check Services
+        const services = {
+            api: true, // We are responding, so we are alive
+            design: await checkService(DESIGN_PORT),
+            app: await checkService(APP_PORT)
+        };
+
+        // Check for Design OS export and steps
+        const designDir = path.join(PROJECT_ROOT, 'design-system');
+        // Note: In dev, these files are in design/public/product. In prod, injected elsewhere.
+        // But for this local dev setup, we check where the initialize-design command puts them?
+        // Actually, initialize-design puts them in `design/public/product`.
+
+        const hasDesignExport = fs.existsSync(path.join(PROJECT_ROOT, 'product-plan'));
+        const hasDesignInit = fs.existsSync(path.join(designDir, 'product/product-overview.md'));
+        const hasTokens = fs.existsSync(path.join(designDir, 'product/design-system/colors.json'));
+        const hasShell = fs.existsSync(path.join(designDir, 'product/shell/spec.md'));
+
+        res.json({
+            product: productFiles,
+            services,
+            design: {
+                exists: hasTokens,
+                initialized: hasDesignInit || fs.existsSync(path.join(designDir, 'product/mission.md')) || fs.existsSync(path.join(designDir, 'product/product-overview.md')),
+                tokens: hasTokens,
+                shell: hasShell,
+                exported: hasDesignExport,
+                exportPrompts: {
+                    oneShot: fs.existsSync(path.join(PROJECT_ROOT, 'product-plan/prompts/one-shot-prompt.md')),
+                    section: fs.existsSync(path.join(PROJECT_ROOT, 'product-plan/prompts/section-prompt.md'))
+                }
+            },
+            implementation: {
+                scaffolded: fs.existsSync(path.join(APP_DIR, 'src/lib/utils.ts'))
+            },
+            specs,
+            projectRoot: PROJECT_ROOT
+        });
+    } catch (error) {
+        console.error(error);
+        res.status(500).json({ error: error.message });
+    }
+});
+
+// API: Scaffold New Spec
+app.post('/api/scaffold/spec', (req, res) => {
+    const { name } = req.body;
+    if (!name) return res.status(400).json({ error: 'Spec name required' });
+
+    const specDir = path.join(AGENT_OS_DIR, 'specs', name);
+    if (fs.existsSync(specDir)) return res.status(400).json({ error: 'Spec already exists' });
+
+    fs.mkdirSync(specDir, { recursive: true });
+    // Create empty placeholders
+    fs.writeFileSync(path.join(specDir, 'spec.md'), '# Spec: ' + name);
+    fs.writeFileSync(path.join(specDir, 'tasks.md'), '# Tasks\n\n- [ ] Initial task');
+
+    res.json({ success: true, path: specDir });
+});
+
+// API: Delete Spec
+app.delete('/api/scaffold/spec/:name', (req, res) => {
+    const { name } = req.params;
+    if (!name) return res.status(400).json({ error: 'Spec name required' });
+
+    // Validate name to prevent directory traversal or deleting non-spec files
+    // Allow alphanumeric, hyphens, underscores
+    if (!/^[a-zA-Z0-9-_]+$/.test(name)) {
+        return res.status(400).json({ error: 'Invalid spec name' });
+    }
+
+    const specDir = path.join(AGENT_OS_DIR, 'specs', name);
+    if (!fs.existsSync(specDir)) {
+        return res.status(404).json({ error: 'Spec not found' });
+    }
+
+    try {
+        fs.rmSync(specDir, { recursive: true, force: true });
+        res.json({ success: true });
+    } catch (error) {
+        console.error('Delete error:', error);
+        res.status(500).json({ error: 'Failed to delete spec' });
+    }
+});
+
+// API: Get File Content
+app.get('/api/files', (req, res) => {
+    const { path: filePath } = req.query;
+    if (!filePath) return res.status(400).json({ error: 'File path required' });
+
+    // Prevent directory traversal
+    const safePath = path.normalize(filePath).replace(/^(\.\.(\/|\\|$))+/, '');
+    const absolutePath = path.join(AGENT_OS_DIR, safePath);
+
+    if (!absolutePath.startsWith(AGENT_OS_DIR)) {
+        return res.status(403).json({ error: 'Access denied' });
+    }
+
+    if (!fs.existsSync(absolutePath)) {
+        return res.status(404).json({ error: 'File not found' });
+    }
+
+    try {
+        const content = fs.readFileSync(absolutePath, 'utf-8');
+        res.json({ content });
+    } catch (error) {
+        res.status(500).json({ error: error.message });
+    }
+});
+
+// API: Save File Content
+app.post('/api/files', (req, res) => {
+    const { path: filePath, content } = req.body;
+    if (!filePath || content === undefined) return res.status(400).json({ error: 'File path and content required' });
+
+    // Prevent directory traversal
+    const safePath = path.normalize(filePath).replace(/^(\.\.(\/|\\|$))+/, '');
+    const absolutePath = path.join(AGENT_OS_DIR, safePath);
+
+    if (!absolutePath.startsWith(AGENT_OS_DIR)) {
+        return res.status(403).json({ error: 'Access denied' });
+    }
+
+    try {
+        fs.writeFileSync(absolutePath, content, 'utf-8');
+        res.json({ success: true });
+    } catch (error) {
+        res.status(500).json({ error: error.message });
+    }
+});
+
+app.listen(PORT, () => {
+    console.log(`Control Center Backend running on http://localhost:${PORT}`);
+    console.log(`Monitoring Agent OS at: ${AGENT_OS_DIR}`);
+});

package/src/template/control-center/backend/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "backend",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "node index.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "cors": "^2.8.5",
+    "dotenv": "^17.2.3",
+    "express": "^5.2.1",
+    "glob": "^10.3.10"
+  }
+}

package/src/template/control-center/frontend/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/src/template/control-center/frontend/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

package/src/template/control-center/frontend/index.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=IBM+Plex+Mono:wght@400;500&display=swap"
+    rel="stylesheet">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Control Center</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>

package/src/template/control-center/frontend/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@builderos/agent-os-ui": "*",
+    "@tailwindcss/typography": "^0.5.19",
+    "axios": "^1.13.2",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.23.26",
+    "lucide-react": "^0.562.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-markdown": "^9.0.1",
+    "remark-breaks": "^4.0.0",
+    "remark-gfm": "^4.0.1",
+    "tailwind-merge": "^3.4.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.23",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.17",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  }
+}

package/src/template/control-center/frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {},
+    },
+}

package/src/template/control-center/frontend/public/favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <rect width="100" height="100" rx="20" fill="#1c1917"/>
+  <path d="M50 20 L75 80 L50 65 L25 80 Z" fill="white" stroke="none"/>
+</svg>

package/src/template/control-center/frontend/public/runtime-config.json

@@ -0,0 +1,11 @@
+{
+  "api": "",
+  "app": "http://localhost:3002",
+  "design": "http://localhost:3000",
+  "ports": {
+    "design": 3000,
+    "api": 3003,
+    "app": 3002,
+    "ui": 5173
+  }
+}

package/src/template/control-center/frontend/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/template/control-center/frontend/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}