Initial commit

2026-01-10 09:13:28 +11:00
commit 0c53496e9b
49 changed files with 3947 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/README.md
+++ b/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...
+    },
+  },
+])
+```
--- a/bun.lock
+++ b/bun.lock
@@ -0,0 +1,478 @@
+{
+  "lockfileVersion": 1,
+  "configVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "evolution",
+      "dependencies": {
+        "react": "^19.2.0",
+        "react-dom": "^19.2.0",
+      },
+      "devDependencies": {
+        "@eslint/js": "^9.39.1",
+        "@types/node": "^24.10.1",
+        "@types/react": "^19.2.5",
+        "@types/react-dom": "^19.2.3",
+        "@vitejs/plugin-react": "^5.1.1",
+        "eslint": "^9.39.1",
+        "eslint-plugin-react-hooks": "^7.0.1",
+        "eslint-plugin-react-refresh": "^0.4.24",
+        "globals": "^16.5.0",
+        "typescript": "~5.9.3",
+        "typescript-eslint": "^8.46.4",
+        "vite": "^7.2.4",
+      },
+    },
+  },
+  "packages": {
+    "@babel/code-frame": ["@babel/code-frame@7.27.1", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.27.1", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg=="],
+
+    "@babel/compat-data": ["@babel/compat-data@7.28.5", "", {}, "sha512-6uFXyCayocRbqhZOB+6XcuZbkMNimwfVGFji8CTZnCzOHVGvDqzvitu1re2AU5LROliz7eQPhB8CpAMvnx9EjA=="],
+
+    "@babel/core": ["@babel/core@7.28.5", "", { "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", "@babel/helper-compilation-targets": "^7.27.2", "@babel/helper-module-transforms": "^7.28.3", "@babel/helpers": "^7.28.4", "@babel/parser": "^7.28.5", "@babel/template": "^7.27.2", "@babel/traverse": "^7.28.5", "@babel/types": "^7.28.5", "@jridgewell/remapping": "^2.3.5", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw=="],
+
+    "@babel/generator": ["@babel/generator@7.28.5", "", { "dependencies": { "@babel/parser": "^7.28.5", "@babel/types": "^7.28.5", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-3EwLFhZ38J4VyIP6WNtt2kUdW9dokXA9Cr4IVIFHuCpZ3H8/YFOl5JjZHisrn1fATPBmKKqXzDFvh9fUwHz6CQ=="],
+
+    "@babel/helper-compilation-targets": ["@babel/helper-compilation-targets@7.27.2", "", { "dependencies": { "@babel/compat-data": "^7.27.2", "@babel/helper-validator-option": "^7.27.1", "browserslist": "^4.24.0", "lru-cache": "^5.1.1", "semver": "^6.3.1" } }, "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ=="],
+
+    "@babel/helper-globals": ["@babel/helper-globals@7.28.0", "", {}, "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw=="],
+
+    "@babel/helper-module-imports": ["@babel/helper-module-imports@7.27.1", "", { "dependencies": { "@babel/traverse": "^7.27.1", "@babel/types": "^7.27.1" } }, "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w=="],
+
+    "@babel/helper-module-transforms": ["@babel/helper-module-transforms@7.28.3", "", { "dependencies": { "@babel/helper-module-imports": "^7.27.1", "@babel/helper-validator-identifier": "^7.27.1", "@babel/traverse": "^7.28.3" }, "peerDependencies": { "@babel/core": "^7.0.0" } }, "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw=="],
+
+    "@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.27.1", "", {}, "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw=="],
+
+    "@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
+
+    "@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "@babel/helper-validator-option": ["@babel/helper-validator-option@7.27.1", "", {}, "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg=="],
+
+    "@babel/helpers": ["@babel/helpers@7.28.4", "", { "dependencies": { "@babel/template": "^7.27.2", "@babel/types": "^7.28.4" } }, "sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w=="],
+
+    "@babel/parser": ["@babel/parser@7.28.5", "", { "dependencies": { "@babel/types": "^7.28.5" }, "bin": "./bin/babel-parser.js" }, "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ=="],
+
+    "@babel/plugin-transform-react-jsx-self": ["@babel/plugin-transform-react-jsx-self@7.27.1", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw=="],
+
+    "@babel/plugin-transform-react-jsx-source": ["@babel/plugin-transform-react-jsx-source@7.27.1", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw=="],
+
+    "@babel/template": ["@babel/template@7.27.2", "", { "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/parser": "^7.27.2", "@babel/types": "^7.27.1" } }, "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw=="],
+
+    "@babel/traverse": ["@babel/traverse@7.28.5", "", { "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.28.5", "@babel/template": "^7.27.2", "@babel/types": "^7.28.5", "debug": "^4.3.1" } }, "sha512-TCCj4t55U90khlYkVV/0TfkJkAkUg3jZFA3Neb7unZT8CPok7iiRfaX0F+WnqWqt7OxhOn0uBKXCw4lbL8W0aQ=="],
+
+    "@babel/types": ["@babel/types@7.28.5", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA=="],
+
+    "@esbuild/aix-ppc64": ["@esbuild/aix-ppc64@0.27.2", "", { "os": "aix", "cpu": "ppc64" }, "sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw=="],
+
+    "@esbuild/android-arm": ["@esbuild/android-arm@0.27.2", "", { "os": "android", "cpu": "arm" }, "sha512-DVNI8jlPa7Ujbr1yjU2PfUSRtAUZPG9I1RwW4F4xFB1Imiu2on0ADiI/c3td+KmDtVKNbi+nffGDQMfcIMkwIA=="],
+
+    "@esbuild/android-arm64": ["@esbuild/android-arm64@0.27.2", "", { "os": "android", "cpu": "arm64" }, "sha512-pvz8ZZ7ot/RBphf8fv60ljmaoydPU12VuXHImtAs0XhLLw+EXBi2BLe3OYSBslR4rryHvweW5gmkKFwTiFy6KA=="],
+
+    "@esbuild/android-x64": ["@esbuild/android-x64@0.27.2", "", { "os": "android", "cpu": "x64" }, "sha512-z8Ank4Byh4TJJOh4wpz8g2vDy75zFL0TlZlkUkEwYXuPSgX8yzep596n6mT7905kA9uHZsf/o2OJZubl2l3M7A=="],
+
+    "@esbuild/darwin-arm64": ["@esbuild/darwin-arm64@0.27.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-davCD2Zc80nzDVRwXTcQP/28fiJbcOwvdolL0sOiOsbwBa72kegmVU0Wrh1MYrbuCL98Omp5dVhQFWRKR2ZAlg=="],
+
+    "@esbuild/darwin-x64": ["@esbuild/darwin-x64@0.27.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-ZxtijOmlQCBWGwbVmwOF/UCzuGIbUkqB1faQRf5akQmxRJ1ujusWsb3CVfk/9iZKr2L5SMU5wPBi1UWbvL+VQA=="],
+
+    "@esbuild/freebsd-arm64": ["@esbuild/freebsd-arm64@0.27.2", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-lS/9CN+rgqQ9czogxlMcBMGd+l8Q3Nj1MFQwBZJyoEKI50XGxwuzznYdwcav6lpOGv5BqaZXqvBSiB/kJ5op+g=="],
+
+    "@esbuild/freebsd-x64": ["@esbuild/freebsd-x64@0.27.2", "", { "os": "freebsd", "cpu": "x64" }, "sha512-tAfqtNYb4YgPnJlEFu4c212HYjQWSO/w/h/lQaBK7RbwGIkBOuNKQI9tqWzx7Wtp7bTPaGC6MJvWI608P3wXYA=="],
+
+    "@esbuild/linux-arm": ["@esbuild/linux-arm@0.27.2", "", { "os": "linux", "cpu": "arm" }, "sha512-vWfq4GaIMP9AIe4yj1ZUW18RDhx6EPQKjwe7n8BbIecFtCQG4CfHGaHuh7fdfq+y3LIA2vGS/o9ZBGVxIDi9hw=="],
+
+    "@esbuild/linux-arm64": ["@esbuild/linux-arm64@0.27.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-hYxN8pr66NsCCiRFkHUAsxylNOcAQaxSSkHMMjcpx0si13t1LHFphxJZUiGwojB1a/Hd5OiPIqDdXONia6bhTw=="],
+
+    "@esbuild/linux-ia32": ["@esbuild/linux-ia32@0.27.2", "", { "os": "linux", "cpu": "ia32" }, "sha512-MJt5BRRSScPDwG2hLelYhAAKh9imjHK5+NE/tvnRLbIqUWa+0E9N4WNMjmp/kXXPHZGqPLxggwVhz7QP8CTR8w=="],
+
+    "@esbuild/linux-loong64": ["@esbuild/linux-loong64@0.27.2", "", { "os": "linux", "cpu": "none" }, "sha512-lugyF1atnAT463aO6KPshVCJK5NgRnU4yb3FUumyVz+cGvZbontBgzeGFO1nF+dPueHD367a2ZXe1NtUkAjOtg=="],
+
+    "@esbuild/linux-mips64el": ["@esbuild/linux-mips64el@0.27.2", "", { "os": "linux", "cpu": "none" }, "sha512-nlP2I6ArEBewvJ2gjrrkESEZkB5mIoaTswuqNFRv/WYd+ATtUpe9Y09RnJvgvdag7he0OWgEZWhviS1OTOKixw=="],
+
+    "@esbuild/linux-ppc64": ["@esbuild/linux-ppc64@0.27.2", "", { "os": "linux", "cpu": "ppc64" }, "sha512-C92gnpey7tUQONqg1n6dKVbx3vphKtTHJaNG2Ok9lGwbZil6DrfyecMsp9CrmXGQJmZ7iiVXvvZH6Ml5hL6XdQ=="],
+
+    "@esbuild/linux-riscv64": ["@esbuild/linux-riscv64@0.27.2", "", { "os": "linux", "cpu": "none" }, "sha512-B5BOmojNtUyN8AXlK0QJyvjEZkWwy/FKvakkTDCziX95AowLZKR6aCDhG7LeF7uMCXEJqwa8Bejz5LTPYm8AvA=="],
+
+    "@esbuild/linux-s390x": ["@esbuild/linux-s390x@0.27.2", "", { "os": "linux", "cpu": "s390x" }, "sha512-p4bm9+wsPwup5Z8f4EpfN63qNagQ47Ua2znaqGH6bqLlmJ4bx97Y9JdqxgGZ6Y8xVTixUnEkoKSHcpRlDnNr5w=="],
+
+    "@esbuild/linux-x64": ["@esbuild/linux-x64@0.27.2", "", { "os": "linux", "cpu": "x64" }, "sha512-uwp2Tip5aPmH+NRUwTcfLb+W32WXjpFejTIOWZFw/v7/KnpCDKG66u4DLcurQpiYTiYwQ9B7KOeMJvLCu/OvbA=="],
+
+    "@esbuild/netbsd-arm64": ["@esbuild/netbsd-arm64@0.27.2", "", { "os": "none", "cpu": "arm64" }, "sha512-Kj6DiBlwXrPsCRDeRvGAUb/LNrBASrfqAIok+xB0LxK8CHqxZ037viF13ugfsIpePH93mX7xfJp97cyDuTZ3cw=="],
+
+    "@esbuild/netbsd-x64": ["@esbuild/netbsd-x64@0.27.2", "", { "os": "none", "cpu": "x64" }, "sha512-HwGDZ0VLVBY3Y+Nw0JexZy9o/nUAWq9MlV7cahpaXKW6TOzfVno3y3/M8Ga8u8Yr7GldLOov27xiCnqRZf0tCA=="],
+
+    "@esbuild/openbsd-arm64": ["@esbuild/openbsd-arm64@0.27.2", "", { "os": "openbsd", "cpu": "arm64" }, "sha512-DNIHH2BPQ5551A7oSHD0CKbwIA/Ox7+78/AWkbS5QoRzaqlev2uFayfSxq68EkonB+IKjiuxBFoV8ESJy8bOHA=="],
+
+    "@esbuild/openbsd-x64": ["@esbuild/openbsd-x64@0.27.2", "", { "os": "openbsd", "cpu": "x64" }, "sha512-/it7w9Nb7+0KFIzjalNJVR5bOzA9Vay+yIPLVHfIQYG/j+j9VTH84aNB8ExGKPU4AzfaEvN9/V4HV+F+vo8OEg=="],
+
+    "@esbuild/openharmony-arm64": ["@esbuild/openharmony-arm64@0.27.2", "", { "os": "none", "cpu": "arm64" }, "sha512-LRBbCmiU51IXfeXk59csuX/aSaToeG7w48nMwA6049Y4J4+VbWALAuXcs+qcD04rHDuSCSRKdmY63sruDS5qag=="],
+
+    "@esbuild/sunos-x64": ["@esbuild/sunos-x64@0.27.2", "", { "os": "sunos", "cpu": "x64" }, "sha512-kMtx1yqJHTmqaqHPAzKCAkDaKsffmXkPHThSfRwZGyuqyIeBvf08KSsYXl+abf5HDAPMJIPnbBfXvP2ZC2TfHg=="],
+
+    "@esbuild/win32-arm64": ["@esbuild/win32-arm64@0.27.2", "", { "os": "win32", "cpu": "arm64" }, "sha512-Yaf78O/B3Kkh+nKABUF++bvJv5Ijoy9AN1ww904rOXZFLWVc5OLOfL56W+C8F9xn5JQZa3UX6m+IktJnIb1Jjg=="],
+
+    "@esbuild/win32-ia32": ["@esbuild/win32-ia32@0.27.2", "", { "os": "win32", "cpu": "ia32" }, "sha512-Iuws0kxo4yusk7sw70Xa2E2imZU5HoixzxfGCdxwBdhiDgt9vX9VUCBhqcwY7/uh//78A1hMkkROMJq9l27oLQ=="],
+
+    "@esbuild/win32-x64": ["@esbuild/win32-x64@0.27.2", "", { "os": "win32", "cpu": "x64" }, "sha512-sRdU18mcKf7F+YgheI/zGf5alZatMUTKj/jNS6l744f9u3WFu4v7twcUI9vu4mknF4Y9aDlblIie0IM+5xxaqQ=="],
+
+    "@eslint-community/eslint-utils": ["@eslint-community/eslint-utils@4.9.1", "", { "dependencies": { "eslint-visitor-keys": "^3.4.3" }, "peerDependencies": { "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0" } }, "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ=="],
+
+    "@eslint-community/regexpp": ["@eslint-community/regexpp@4.12.2", "", {}, "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew=="],
+
+    "@eslint/config-array": ["@eslint/config-array@0.21.1", "", { "dependencies": { "@eslint/object-schema": "^2.1.7", "debug": "^4.3.1", "minimatch": "^3.1.2" } }, "sha512-aw1gNayWpdI/jSYVgzN5pL0cfzU02GT3NBpeT/DXbx1/1x7ZKxFPd9bwrzygx/qiwIQiJ1sw/zD8qY/kRvlGHA=="],
+
+    "@eslint/config-helpers": ["@eslint/config-helpers@0.4.2", "", { "dependencies": { "@eslint/core": "^0.17.0" } }, "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw=="],
+
+    "@eslint/core": ["@eslint/core@0.17.0", "", { "dependencies": { "@types/json-schema": "^7.0.15" } }, "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ=="],
+
+    "@eslint/eslintrc": ["@eslint/eslintrc@3.3.3", "", { "dependencies": { "ajv": "^6.12.4", "debug": "^4.3.2", "espree": "^10.0.1", "globals": "^14.0.0", "ignore": "^5.2.0", "import-fresh": "^3.2.1", "js-yaml": "^4.1.1", "minimatch": "^3.1.2", "strip-json-comments": "^3.1.1" } }, "sha512-Kr+LPIUVKz2qkx1HAMH8q1q6azbqBAsXJUxBl/ODDuVPX45Z9DfwB8tPjTi6nNZ8BuM3nbJxC5zCAg5elnBUTQ=="],
+
+    "@eslint/js": ["@eslint/js@9.39.2", "", {}, "sha512-q1mjIoW1VX4IvSocvM/vbTiveKC4k9eLrajNEuSsmjymSDEbpGddtpfOoN7YGAqBK3NG+uqo8ia4PDTt8buCYA=="],
+
+    "@eslint/object-schema": ["@eslint/object-schema@2.1.7", "", {}, "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA=="],
+
+    "@eslint/plugin-kit": ["@eslint/plugin-kit@0.4.1", "", { "dependencies": { "@eslint/core": "^0.17.0", "levn": "^0.4.1" } }, "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA=="],
+
+    "@humanfs/core": ["@humanfs/core@0.19.1", "", {}, "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA=="],
+
+    "@humanfs/node": ["@humanfs/node@0.16.7", "", { "dependencies": { "@humanfs/core": "^0.19.1", "@humanwhocodes/retry": "^0.4.0" } }, "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ=="],
+
+    "@humanwhocodes/module-importer": ["@humanwhocodes/module-importer@1.0.1", "", {}, "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA=="],
+
+    "@humanwhocodes/retry": ["@humanwhocodes/retry@0.4.3", "", {}, "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ=="],
+
+    "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
+
+    "@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="],
+
+    "@jridgewell/resolve-uri": ["@jridgewell/resolve-uri@3.1.2", "", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="],
+
+    "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="],
+
+    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
+
+    "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-beta.53", "", {}, "sha512-vENRlFU4YbrwVqNDZ7fLvy+JR1CRkyr01jhSiDpE1u6py3OMzQfztQU2jxykW3ALNxO4kSlqIDeYyD0Y9RcQeQ=="],
+
+    "@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.55.1", "", { "os": "android", "cpu": "arm" }, "sha512-9R0DM/ykwfGIlNu6+2U09ga0WXeZ9MRC2Ter8jnz8415VbuIykVuc6bhdrbORFZANDmTDvq26mJrEVTl8TdnDg=="],
+
+    "@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.55.1", "", { "os": "android", "cpu": "arm64" }, "sha512-eFZCb1YUqhTysgW3sj/55du5cG57S7UTNtdMjCW7LwVcj3dTTcowCsC8p7uBdzKsZYa8J7IDE8lhMI+HX1vQvg=="],
+
+    "@rollup/rollup-darwin-arm64": ["@rollup/rollup-darwin-arm64@4.55.1", "", { "os": "darwin", "cpu": "arm64" }, "sha512-p3grE2PHcQm2e8PSGZdzIhCKbMCw/xi9XvMPErPhwO17vxtvCN5FEA2mSLgmKlCjHGMQTP6phuQTYWUnKewwGg=="],
+
+    "@rollup/rollup-darwin-x64": ["@rollup/rollup-darwin-x64@4.55.1", "", { "os": "darwin", "cpu": "x64" }, "sha512-rDUjG25C9qoTm+e02Esi+aqTKSBYwVTaoS1wxcN47/Luqef57Vgp96xNANwt5npq9GDxsH7kXxNkJVEsWEOEaQ=="],
+
+    "@rollup/rollup-freebsd-arm64": ["@rollup/rollup-freebsd-arm64@4.55.1", "", { "os": "freebsd", "cpu": "arm64" }, "sha512-+JiU7Jbp5cdxekIgdte0jfcu5oqw4GCKr6i3PJTlXTCU5H5Fvtkpbs4XJHRmWNXF+hKmn4v7ogI5OQPaupJgOg=="],
+
+    "@rollup/rollup-freebsd-x64": ["@rollup/rollup-freebsd-x64@4.55.1", "", { "os": "freebsd", "cpu": "x64" }, "sha512-V5xC1tOVWtLLmr3YUk2f6EJK4qksksOYiz/TCsFHu/R+woubcLWdC9nZQmwjOAbmExBIVKsm1/wKmEy4z4u4Bw=="],
+
+    "@rollup/rollup-linux-arm-gnueabihf": ["@rollup/rollup-linux-arm-gnueabihf@4.55.1", "", { "os": "linux", "cpu": "arm" }, "sha512-Rn3n+FUk2J5VWx+ywrG/HGPTD9jXNbicRtTM11e/uorplArnXZYsVifnPPqNNP5BsO3roI4n8332ukpY/zN7rQ=="],
+
+    "@rollup/rollup-linux-arm-musleabihf": ["@rollup/rollup-linux-arm-musleabihf@4.55.1", "", { "os": "linux", "cpu": "arm" }, "sha512-grPNWydeKtc1aEdrJDWk4opD7nFtQbMmV7769hiAaYyUKCT1faPRm2av8CX1YJsZ4TLAZcg9gTR1KvEzoLjXkg=="],
+
+    "@rollup/rollup-linux-arm64-gnu": ["@rollup/rollup-linux-arm64-gnu@4.55.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-a59mwd1k6x8tXKcUxSyISiquLwB5pX+fJW9TkWU46lCqD/GRDe9uDN31jrMmVP3feI3mhAdvcCClhV8V5MhJFQ=="],
+
+    "@rollup/rollup-linux-arm64-musl": ["@rollup/rollup-linux-arm64-musl@4.55.1", "", { "os": "linux", "cpu": "arm64" }, "sha512-puS1MEgWX5GsHSoiAsF0TYrpomdvkaXm0CofIMG5uVkP6IBV+ZO9xhC5YEN49nsgYo1DuuMquF9+7EDBVYu4uA=="],
+
+    "@rollup/rollup-linux-loong64-gnu": ["@rollup/rollup-linux-loong64-gnu@4.55.1", "", { "os": "linux", "cpu": "none" }, "sha512-r3Wv40in+lTsULSb6nnoudVbARdOwb2u5fpeoOAZjFLznp6tDU8kd+GTHmJoqZ9lt6/Sys33KdIHUaQihFcu7g=="],
+
+    "@rollup/rollup-linux-loong64-musl": ["@rollup/rollup-linux-loong64-musl@4.55.1", "", { "os": "linux", "cpu": "none" }, "sha512-MR8c0+UxAlB22Fq4R+aQSPBayvYa3+9DrwG/i1TKQXFYEaoW3B5b/rkSRIypcZDdWjWnpcvxbNaAJDcSbJU3Lw=="],
+
+    "@rollup/rollup-linux-ppc64-gnu": ["@rollup/rollup-linux-ppc64-gnu@4.55.1", "", { "os": "linux", "cpu": "ppc64" }, "sha512-3KhoECe1BRlSYpMTeVrD4sh2Pw2xgt4jzNSZIIPLFEsnQn9gAnZagW9+VqDqAHgm1Xc77LzJOo2LdigS5qZ+gw=="],
+
+    "@rollup/rollup-linux-ppc64-musl": ["@rollup/rollup-linux-ppc64-musl@4.55.1", "", { "os": "linux", "cpu": "ppc64" }, "sha512-ziR1OuZx0vdYZZ30vueNZTg73alF59DicYrPViG0NEgDVN8/Jl87zkAPu4u6VjZST2llgEUjaiNl9JM6HH1Vdw=="],
+
+    "@rollup/rollup-linux-riscv64-gnu": ["@rollup/rollup-linux-riscv64-gnu@4.55.1", "", { "os": "linux", "cpu": "none" }, "sha512-uW0Y12ih2XJRERZ4jAfKamTyIHVMPQnTZcQjme2HMVDAHY4amf5u414OqNYC+x+LzRdRcnIG1YodLrrtA8xsxw=="],
+
+    "@rollup/rollup-linux-riscv64-musl": ["@rollup/rollup-linux-riscv64-musl@4.55.1", "", { "os": "linux", "cpu": "none" }, "sha512-u9yZ0jUkOED1BFrqu3BwMQoixvGHGZ+JhJNkNKY/hyoEgOwlqKb62qu+7UjbPSHYjiVy8kKJHvXKv5coH4wDeg=="],
+
+    "@rollup/rollup-linux-s390x-gnu": ["@rollup/rollup-linux-s390x-gnu@4.55.1", "", { "os": "linux", "cpu": "s390x" }, "sha512-/0PenBCmqM4ZUd0190j7J0UsQ/1nsi735iPRakO8iPciE7BQ495Y6msPzaOmvx0/pn+eJVVlZrNrSh4WSYLxNg=="],
+
+    "@rollup/rollup-linux-x64-gnu": ["@rollup/rollup-linux-x64-gnu@4.55.1", "", { "os": "linux", "cpu": "x64" }, "sha512-a8G4wiQxQG2BAvo+gU6XrReRRqj+pLS2NGXKm8io19goR+K8lw269eTrPkSdDTALwMmJp4th2Uh0D8J9bEV1vg=="],
+
+    "@rollup/rollup-linux-x64-musl": ["@rollup/rollup-linux-x64-musl@4.55.1", "", { "os": "linux", "cpu": "x64" }, "sha512-bD+zjpFrMpP/hqkfEcnjXWHMw5BIghGisOKPj+2NaNDuVT+8Ds4mPf3XcPHuat1tz89WRL+1wbcxKY3WSbiT7w=="],
+
+    "@rollup/rollup-openbsd-x64": ["@rollup/rollup-openbsd-x64@4.55.1", "", { "os": "openbsd", "cpu": "x64" }, "sha512-eLXw0dOiqE4QmvikfQ6yjgkg/xDM+MdU9YJuP4ySTibXU0oAvnEWXt7UDJmD4UkYialMfOGFPJnIHSe/kdzPxg=="],
+
+    "@rollup/rollup-openharmony-arm64": ["@rollup/rollup-openharmony-arm64@4.55.1", "", { "os": "none", "cpu": "arm64" }, "sha512-xzm44KgEP11te3S2HCSyYf5zIzWmx3n8HDCc7EE59+lTcswEWNpvMLfd9uJvVX8LCg9QWG67Xt75AuHn4vgsXw=="],
+
+    "@rollup/rollup-win32-arm64-msvc": ["@rollup/rollup-win32-arm64-msvc@4.55.1", "", { "os": "win32", "cpu": "arm64" }, "sha512-yR6Bl3tMC/gBok5cz/Qi0xYnVbIxGx5Fcf/ca0eB6/6JwOY+SRUcJfI0OpeTpPls7f194as62thCt/2BjxYN8g=="],
+
+    "@rollup/rollup-win32-ia32-msvc": ["@rollup/rollup-win32-ia32-msvc@4.55.1", "", { "os": "win32", "cpu": "ia32" }, "sha512-3fZBidchE0eY0oFZBnekYCfg+5wAB0mbpCBuofh5mZuzIU/4jIVkbESmd2dOsFNS78b53CYv3OAtwqkZZmU5nA=="],
+
+    "@rollup/rollup-win32-x64-gnu": ["@rollup/rollup-win32-x64-gnu@4.55.1", "", { "os": "win32", "cpu": "x64" }, "sha512-xGGY5pXj69IxKb4yv/POoocPy/qmEGhimy/FoTpTSVju3FYXUQQMFCaZZXJVidsmGxRioZAwpThl/4zX41gRKg=="],
+
+    "@rollup/rollup-win32-x64-msvc": ["@rollup/rollup-win32-x64-msvc@4.55.1", "", { "os": "win32", "cpu": "x64" }, "sha512-SPEpaL6DX4rmcXtnhdrQYgzQ5W2uW3SCJch88lB2zImhJRhIIK44fkUrgIV/Q8yUNfw5oyZ5vkeQsZLhCb06lw=="],
+
+    "@types/babel__core": ["@types/babel__core@7.20.5", "", { "dependencies": { "@babel/parser": "^7.20.7", "@babel/types": "^7.20.7", "@types/babel__generator": "*", "@types/babel__template": "*", "@types/babel__traverse": "*" } }, "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA=="],
+
+    "@types/babel__generator": ["@types/babel__generator@7.27.0", "", { "dependencies": { "@babel/types": "^7.0.0" } }, "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg=="],
+
+    "@types/babel__template": ["@types/babel__template@7.4.4", "", { "dependencies": { "@babel/parser": "^7.1.0", "@babel/types": "^7.0.0" } }, "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A=="],
+
+    "@types/babel__traverse": ["@types/babel__traverse@7.28.0", "", { "dependencies": { "@babel/types": "^7.28.2" } }, "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q=="],
+
+    "@types/estree": ["@types/estree@1.0.8", "", {}, "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w=="],
+
+    "@types/json-schema": ["@types/json-schema@7.0.15", "", {}, "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="],
+
+    "@types/node": ["@types/node@24.10.4", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-vnDVpYPMzs4wunl27jHrfmwojOGKya0xyM3sH+UE5iv5uPS6vX7UIoh6m+vQc5LGBq52HBKPIn/zcSZVzeDEZg=="],
+
+    "@types/react": ["@types/react@19.2.7", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg=="],
+
+    "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],
+
+    "@typescript-eslint/eslint-plugin": ["@typescript-eslint/eslint-plugin@8.52.0", "", { "dependencies": { "@eslint-community/regexpp": "^4.12.2", "@typescript-eslint/scope-manager": "8.52.0", "@typescript-eslint/type-utils": "8.52.0", "@typescript-eslint/utils": "8.52.0", "@typescript-eslint/visitor-keys": "8.52.0", "ignore": "^7.0.5", "natural-compare": "^1.4.0", "ts-api-utils": "^2.4.0" }, "peerDependencies": { "@typescript-eslint/parser": "^8.52.0", "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-okqtOgqu2qmZJ5iN4TWlgfF171dZmx2FzdOv2K/ixL2LZWDStL8+JgQerI2sa8eAEfoydG9+0V96m7V+P8yE1Q=="],
+
+    "@typescript-eslint/parser": ["@typescript-eslint/parser@8.52.0", "", { "dependencies": { "@typescript-eslint/scope-manager": "8.52.0", "@typescript-eslint/types": "8.52.0", "@typescript-eslint/typescript-estree": "8.52.0", "@typescript-eslint/visitor-keys": "8.52.0", "debug": "^4.4.3" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-iIACsx8pxRnguSYhHiMn2PvhvfpopO9FXHyn1mG5txZIsAaB6F0KwbFnUQN3KCiG3Jcuad/Cao2FAs1Wp7vAyg=="],
+
+    "@typescript-eslint/project-service": ["@typescript-eslint/project-service@8.52.0", "", { "dependencies": { "@typescript-eslint/tsconfig-utils": "^8.52.0", "@typescript-eslint/types": "^8.52.0", "debug": "^4.4.3" }, "peerDependencies": { "typescript": ">=4.8.4 <6.0.0" } }, "sha512-xD0MfdSdEmeFa3OmVqonHi+Cciab96ls1UhIF/qX/O/gPu5KXD0bY9lu33jj04fjzrXHcuvjBcBC+D3SNSadaw=="],
+
+    "@typescript-eslint/scope-manager": ["@typescript-eslint/scope-manager@8.52.0", "", { "dependencies": { "@typescript-eslint/types": "8.52.0", "@typescript-eslint/visitor-keys": "8.52.0" } }, "sha512-ixxqmmCcc1Nf8S0mS0TkJ/3LKcC8mruYJPOU6Ia2F/zUUR4pApW7LzrpU3JmtePbRUTes9bEqRc1Gg4iyRnDzA=="],
+
+    "@typescript-eslint/tsconfig-utils": ["@typescript-eslint/tsconfig-utils@8.52.0", "", { "peerDependencies": { "typescript": ">=4.8.4 <6.0.0" } }, "sha512-jl+8fzr/SdzdxWJznq5nvoI7qn2tNYV/ZBAEcaFMVXf+K6jmXvAFrgo/+5rxgnL152f//pDEAYAhhBAZGrVfwg=="],
+
+    "@typescript-eslint/type-utils": ["@typescript-eslint/type-utils@8.52.0", "", { "dependencies": { "@typescript-eslint/types": "8.52.0", "@typescript-eslint/typescript-estree": "8.52.0", "@typescript-eslint/utils": "8.52.0", "debug": "^4.4.3", "ts-api-utils": "^2.4.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-JD3wKBRWglYRQkAtsyGz1AewDu3mTc7NtRjR/ceTyGoPqmdS5oCdx/oZMWD5Zuqmo6/MpsYs0wp6axNt88/2EQ=="],
+
+    "@typescript-eslint/types": ["@typescript-eslint/types@8.52.0", "", {}, "sha512-LWQV1V4q9V4cT4H5JCIx3481iIFxH1UkVk+ZkGGAV1ZGcjGI9IoFOfg3O6ywz8QqCDEp7Inlg6kovMofsNRaGg=="],
+
+    "@typescript-eslint/typescript-estree": ["@typescript-eslint/typescript-estree@8.52.0", "", { "dependencies": { "@typescript-eslint/project-service": "8.52.0", "@typescript-eslint/tsconfig-utils": "8.52.0", "@typescript-eslint/types": "8.52.0", "@typescript-eslint/visitor-keys": "8.52.0", "debug": "^4.4.3", "minimatch": "^9.0.5", "semver": "^7.7.3", "tinyglobby": "^0.2.15", "ts-api-utils": "^2.4.0" }, "peerDependencies": { "typescript": ">=4.8.4 <6.0.0" } }, "sha512-XP3LClsCc0FsTK5/frGjolyADTh3QmsLp6nKd476xNI9CsSsLnmn4f0jrzNoAulmxlmNIpeXuHYeEQv61Q6qeQ=="],
+
+    "@typescript-eslint/utils": ["@typescript-eslint/utils@8.52.0", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.9.1", "@typescript-eslint/scope-manager": "8.52.0", "@typescript-eslint/types": "8.52.0", "@typescript-eslint/typescript-estree": "8.52.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-wYndVMWkweqHpEpwPhwqE2lnD2DxC6WVLupU/DOt/0/v+/+iQbbzO3jOHjmBMnhu0DgLULvOaU4h4pwHYi2oRQ=="],
+
+    "@typescript-eslint/visitor-keys": ["@typescript-eslint/visitor-keys@8.52.0", "", { "dependencies": { "@typescript-eslint/types": "8.52.0", "eslint-visitor-keys": "^4.2.1" } }, "sha512-ink3/Zofus34nmBsPjow63FP5M7IGff0RKAgqR6+CFpdk22M7aLwC9gOcLGYqr7MczLPzZVERW9hRog3O4n1sQ=="],
+
+    "@vitejs/plugin-react": ["@vitejs/plugin-react@5.1.2", "", { "dependencies": { "@babel/core": "^7.28.5", "@babel/plugin-transform-react-jsx-self": "^7.27.1", "@babel/plugin-transform-react-jsx-source": "^7.27.1", "@rolldown/pluginutils": "1.0.0-beta.53", "@types/babel__core": "^7.20.5", "react-refresh": "^0.18.0" }, "peerDependencies": { "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" } }, "sha512-EcA07pHJouywpzsoTUqNh5NwGayl2PPVEJKUSinGGSxFGYn+shYbqMGBg6FXDqgXum9Ou/ecb+411ssw8HImJQ=="],
+
+    "acorn": ["acorn@8.15.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg=="],
+
+    "acorn-jsx": ["acorn-jsx@5.3.2", "", { "peerDependencies": { "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="],
+
+    "ajv": ["ajv@6.12.6", "", { "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", "json-schema-traverse": "^0.4.1", "uri-js": "^4.2.2" } }, "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g=="],
+
+    "ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
+
+    "argparse": ["argparse@2.0.1", "", {}, "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="],
+
+    "balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
+
+    "baseline-browser-mapping": ["baseline-browser-mapping@2.9.13", "", { "bin": { "baseline-browser-mapping": "dist/cli.js" } }, "sha512-WhtvB2NG2wjr04+h77sg3klAIwrgOqnjS49GGudnUPGFFgg7G17y7Qecqp+2Dr5kUDxNRBca0SK7cG8JwzkWDQ=="],
+
+    "brace-expansion": ["brace-expansion@1.1.12", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg=="],
+
+    "browserslist": ["browserslist@4.28.1", "", { "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", "electron-to-chromium": "^1.5.263", "node-releases": "^2.0.27", "update-browserslist-db": "^1.2.0" }, "bin": { "browserslist": "cli.js" } }, "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA=="],
+
+    "callsites": ["callsites@3.1.0", "", {}, "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="],
+
+    "caniuse-lite": ["caniuse-lite@1.0.30001763", "", {}, "sha512-mh/dGtq56uN98LlNX9qdbKnzINhX0QzhiWBFEkFfsFO4QyCvL8YegrJAazCwXIeqkIob8BlZPGM3xdnY+sgmvQ=="],
+
+    "chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
+
+    "color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],
+
+    "color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
+
+    "concat-map": ["concat-map@0.0.1", "", {}, "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="],
+
+    "convert-source-map": ["convert-source-map@2.0.0", "", {}, "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="],
+
+    "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],
+
+    "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
+
+    "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
+
+    "deep-is": ["deep-is@0.1.4", "", {}, "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="],
+
+    "electron-to-chromium": ["electron-to-chromium@1.5.267", "", {}, "sha512-0Drusm6MVRXSOJpGbaSVgcQsuB4hEkMpHXaVstcPmhu5LIedxs1xNK/nIxmQIU/RPC0+1/o0AVZfBTkTNJOdUw=="],
+
+    "esbuild": ["esbuild@0.27.2", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.27.2", "@esbuild/android-arm": "0.27.2", "@esbuild/android-arm64": "0.27.2", "@esbuild/android-x64": "0.27.2", "@esbuild/darwin-arm64": "0.27.2", "@esbuild/darwin-x64": "0.27.2", "@esbuild/freebsd-arm64": "0.27.2", "@esbuild/freebsd-x64": "0.27.2", "@esbuild/linux-arm": "0.27.2", "@esbuild/linux-arm64": "0.27.2", "@esbuild/linux-ia32": "0.27.2", "@esbuild/linux-loong64": "0.27.2", "@esbuild/linux-mips64el": "0.27.2", "@esbuild/linux-ppc64": "0.27.2", "@esbuild/linux-riscv64": "0.27.2", "@esbuild/linux-s390x": "0.27.2", "@esbuild/linux-x64": "0.27.2", "@esbuild/netbsd-arm64": "0.27.2", "@esbuild/netbsd-x64": "0.27.2", "@esbuild/openbsd-arm64": "0.27.2", "@esbuild/openbsd-x64": "0.27.2", "@esbuild/openharmony-arm64": "0.27.2", "@esbuild/sunos-x64": "0.27.2", "@esbuild/win32-arm64": "0.27.2", "@esbuild/win32-ia32": "0.27.2", "@esbuild/win32-x64": "0.27.2" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw=="],
+
+    "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
+
+    "escape-string-regexp": ["escape-string-regexp@4.0.0", "", {}, "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="],
+
+    "eslint": ["eslint@9.39.2", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", "@eslint/config-array": "^0.21.1", "@eslint/config-helpers": "^0.4.2", "@eslint/core": "^0.17.0", "@eslint/eslintrc": "^3.3.1", "@eslint/js": "9.39.2", "@eslint/plugin-kit": "^0.4.1", "@humanfs/node": "^0.16.6", "@humanwhocodes/module-importer": "^1.0.1", "@humanwhocodes/retry": "^0.4.2", "@types/estree": "^1.0.6", "ajv": "^6.12.4", "chalk": "^4.0.0", "cross-spawn": "^7.0.6", "debug": "^4.3.2", "escape-string-regexp": "^4.0.0", "eslint-scope": "^8.4.0", "eslint-visitor-keys": "^4.2.1", "espree": "^10.4.0", "esquery": "^1.5.0", "esutils": "^2.0.2", "fast-deep-equal": "^3.1.3", "file-entry-cache": "^8.0.0", "find-up": "^5.0.0", "glob-parent": "^6.0.2", "ignore": "^5.2.0", "imurmurhash": "^0.1.4", "is-glob": "^4.0.0", "json-stable-stringify-without-jsonify": "^1.0.1", "lodash.merge": "^4.6.2", "minimatch": "^3.1.2", "natural-compare": "^1.4.0", "optionator": "^0.9.3" }, "peerDependencies": { "jiti": "*" }, "optionalPeers": ["jiti"], "bin": { "eslint": "bin/eslint.js" } }, "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw=="],
+
+    "eslint-plugin-react-hooks": ["eslint-plugin-react-hooks@7.0.1", "", { "dependencies": { "@babel/core": "^7.24.4", "@babel/parser": "^7.24.4", "hermes-parser": "^0.25.1", "zod": "^3.25.0 || ^4.0.0", "zod-validation-error": "^3.5.0 || ^4.0.0" }, "peerDependencies": { "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0" } }, "sha512-O0d0m04evaNzEPoSW+59Mezf8Qt0InfgGIBJnpC0h3NH/WjUAR7BIKUfysC6todmtiZ/A0oUVS8Gce0WhBrHsA=="],
+
+    "eslint-plugin-react-refresh": ["eslint-plugin-react-refresh@0.4.26", "", { "peerDependencies": { "eslint": ">=8.40" } }, "sha512-1RETEylht2O6FM/MvgnyvT+8K21wLqDNg4qD51Zj3guhjt433XbnnkVttHMyaVyAFD03QSV4LPS5iE3VQmO7XQ=="],
+
+    "eslint-scope": ["eslint-scope@8.4.0", "", { "dependencies": { "esrecurse": "^4.3.0", "estraverse": "^5.2.0" } }, "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg=="],
+
+    "eslint-visitor-keys": ["eslint-visitor-keys@4.2.1", "", {}, "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ=="],
+
+    "espree": ["espree@10.4.0", "", { "dependencies": { "acorn": "^8.15.0", "acorn-jsx": "^5.3.2", "eslint-visitor-keys": "^4.2.1" } }, "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ=="],
+
+    "esquery": ["esquery@1.7.0", "", { "dependencies": { "estraverse": "^5.1.0" } }, "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g=="],
+
+    "esrecurse": ["esrecurse@4.3.0", "", { "dependencies": { "estraverse": "^5.2.0" } }, "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag=="],
+
+    "estraverse": ["estraverse@5.3.0", "", {}, "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA=="],
+
+    "esutils": ["esutils@2.0.3", "", {}, "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="],
+
+    "fast-deep-equal": ["fast-deep-equal@3.1.3", "", {}, "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="],
+
+    "fast-json-stable-stringify": ["fast-json-stable-stringify@2.1.0", "", {}, "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="],
+
+    "fast-levenshtein": ["fast-levenshtein@2.0.6", "", {}, "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="],
+
+    "fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
+
+    "file-entry-cache": ["file-entry-cache@8.0.0", "", { "dependencies": { "flat-cache": "^4.0.0" } }, "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ=="],
+
+    "find-up": ["find-up@5.0.0", "", { "dependencies": { "locate-path": "^6.0.0", "path-exists": "^4.0.0" } }, "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng=="],
+
+    "flat-cache": ["flat-cache@4.0.1", "", { "dependencies": { "flatted": "^3.2.9", "keyv": "^4.5.4" } }, "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw=="],
+
+    "flatted": ["flatted@3.3.3", "", {}, "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg=="],
+
+    "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
+
+    "gensync": ["gensync@1.0.0-beta.2", "", {}, "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="],
+
+    "glob-parent": ["glob-parent@6.0.2", "", { "dependencies": { "is-glob": "^4.0.3" } }, "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A=="],
+
+    "globals": ["globals@16.5.0", "", {}, "sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ=="],
+
+    "has-flag": ["has-flag@4.0.0", "", {}, "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="],
+
+    "hermes-estree": ["hermes-estree@0.25.1", "", {}, "sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw=="],
+
+    "hermes-parser": ["hermes-parser@0.25.1", "", { "dependencies": { "hermes-estree": "0.25.1" } }, "sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA=="],
+
+    "ignore": ["ignore@5.3.2", "", {}, "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g=="],
+
+    "import-fresh": ["import-fresh@3.3.1", "", { "dependencies": { "parent-module": "^1.0.0", "resolve-from": "^4.0.0" } }, "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ=="],
+
+    "imurmurhash": ["imurmurhash@0.1.4", "", {}, "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA=="],
+
+    "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="],
+
+    "is-glob": ["is-glob@4.0.3", "", { "dependencies": { "is-extglob": "^2.1.1" } }, "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="],
+
+    "isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="],
+
+    "js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
+
+    "js-yaml": ["js-yaml@4.1.1", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA=="],
+
+    "jsesc": ["jsesc@3.1.0", "", { "bin": { "jsesc": "bin/jsesc" } }, "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA=="],
+
+    "json-buffer": ["json-buffer@3.0.1", "", {}, "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ=="],
+
+    "json-schema-traverse": ["json-schema-traverse@0.4.1", "", {}, "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="],
+
+    "json-stable-stringify-without-jsonify": ["json-stable-stringify-without-jsonify@1.0.1", "", {}, "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="],
+
+    "json5": ["json5@2.2.3", "", { "bin": { "json5": "lib/cli.js" } }, "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="],
+
+    "keyv": ["keyv@4.5.4", "", { "dependencies": { "json-buffer": "3.0.1" } }, "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw=="],
+
+    "levn": ["levn@0.4.1", "", { "dependencies": { "prelude-ls": "^1.2.1", "type-check": "~0.4.0" } }, "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ=="],
+
+    "locate-path": ["locate-path@6.0.0", "", { "dependencies": { "p-locate": "^5.0.0" } }, "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw=="],
+
+    "lodash.merge": ["lodash.merge@4.6.2", "", {}, "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="],
+
+    "lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
+
+    "minimatch": ["minimatch@3.1.2", "", { "dependencies": { "brace-expansion": "^1.1.7" } }, "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw=="],
+
+    "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
+
+    "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
+
+    "natural-compare": ["natural-compare@1.4.0", "", {}, "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="],
+
+    "node-releases": ["node-releases@2.0.27", "", {}, "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA=="],
+
+    "optionator": ["optionator@0.9.4", "", { "dependencies": { "deep-is": "^0.1.3", "fast-levenshtein": "^2.0.6", "levn": "^0.4.1", "prelude-ls": "^1.2.1", "type-check": "^0.4.0", "word-wrap": "^1.2.5" } }, "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g=="],
+
+    "p-limit": ["p-limit@3.1.0", "", { "dependencies": { "yocto-queue": "^0.1.0" } }, "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ=="],
+
+    "p-locate": ["p-locate@5.0.0", "", { "dependencies": { "p-limit": "^3.0.2" } }, "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw=="],
+
+    "parent-module": ["parent-module@1.0.1", "", { "dependencies": { "callsites": "^3.0.0" } }, "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g=="],
+
+    "path-exists": ["path-exists@4.0.0", "", {}, "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="],
+
+    "path-key": ["path-key@3.1.1", "", {}, "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="],
+
+    "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
+
+    "picomatch": ["picomatch@4.0.3", "", {}, "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q=="],
+
+    "postcss": ["postcss@8.5.6", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg=="],
+
+    "prelude-ls": ["prelude-ls@1.2.1", "", {}, "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="],
+
+    "punycode": ["punycode@2.3.1", "", {}, "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="],
+
+    "react": ["react@19.2.3", "", {}, "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA=="],
+
+    "react-dom": ["react-dom@19.2.3", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.3" } }, "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg=="],
+
+    "react-refresh": ["react-refresh@0.18.0", "", {}, "sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw=="],
+
+    "resolve-from": ["resolve-from@4.0.0", "", {}, "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="],
+
+    "rollup": ["rollup@4.55.1", "", { "dependencies": { "@types/estree": "1.0.8" }, "optionalDependencies": { "@rollup/rollup-android-arm-eabi": "4.55.1", "@rollup/rollup-android-arm64": "4.55.1", "@rollup/rollup-darwin-arm64": "4.55.1", "@rollup/rollup-darwin-x64": "4.55.1", "@rollup/rollup-freebsd-arm64": "4.55.1", "@rollup/rollup-freebsd-x64": "4.55.1", "@rollup/rollup-linux-arm-gnueabihf": "4.55.1", "@rollup/rollup-linux-arm-musleabihf": "4.55.1", "@rollup/rollup-linux-arm64-gnu": "4.55.1", "@rollup/rollup-linux-arm64-musl": "4.55.1", "@rollup/rollup-linux-loong64-gnu": "4.55.1", "@rollup/rollup-linux-loong64-musl": "4.55.1", "@rollup/rollup-linux-ppc64-gnu": "4.55.1", "@rollup/rollup-linux-ppc64-musl": "4.55.1", "@rollup/rollup-linux-riscv64-gnu": "4.55.1", "@rollup/rollup-linux-riscv64-musl": "4.55.1", "@rollup/rollup-linux-s390x-gnu": "4.55.1", "@rollup/rollup-linux-x64-gnu": "4.55.1", "@rollup/rollup-linux-x64-musl": "4.55.1", "@rollup/rollup-openbsd-x64": "4.55.1", "@rollup/rollup-openharmony-arm64": "4.55.1", "@rollup/rollup-win32-arm64-msvc": "4.55.1", "@rollup/rollup-win32-ia32-msvc": "4.55.1", "@rollup/rollup-win32-x64-gnu": "4.55.1", "@rollup/rollup-win32-x64-msvc": "4.55.1", "fsevents": "~2.3.2" }, "bin": { "rollup": "dist/bin/rollup" } }, "sha512-wDv/Ht1BNHB4upNbK74s9usvl7hObDnvVzknxqY/E/O3X6rW1U1rV1aENEfJ54eFZDTNo7zv1f5N4edCluH7+A=="],
+
+    "scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
+
+    "semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
+
+    "shebang-command": ["shebang-command@2.0.0", "", { "dependencies": { "shebang-regex": "^3.0.0" } }, "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA=="],
+
+    "shebang-regex": ["shebang-regex@3.0.0", "", {}, "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="],
+
+    "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
+
+    "strip-json-comments": ["strip-json-comments@3.1.1", "", {}, "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="],
+
+    "supports-color": ["supports-color@7.2.0", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="],
+
+    "tinyglobby": ["tinyglobby@0.2.15", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.3" } }, "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ=="],
+
+    "ts-api-utils": ["ts-api-utils@2.4.0", "", { "peerDependencies": { "typescript": ">=4.8.4" } }, "sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA=="],
+
+    "type-check": ["type-check@0.4.0", "", { "dependencies": { "prelude-ls": "^1.2.1" } }, "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew=="],
+
+    "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
+
+    "typescript-eslint": ["typescript-eslint@8.52.0", "", { "dependencies": { "@typescript-eslint/eslint-plugin": "8.52.0", "@typescript-eslint/parser": "8.52.0", "@typescript-eslint/typescript-estree": "8.52.0", "@typescript-eslint/utils": "8.52.0" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-atlQQJ2YkO4pfTVQmQ+wvYQwexPDOIgo+RaVcD7gHgzy/IQA+XTyuxNM9M9TVXvttkF7koBHmcwisKdOAf2EcA=="],
+
+    "undici-types": ["undici-types@7.16.0", "", {}, "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw=="],
+
+    "update-browserslist-db": ["update-browserslist-db@1.2.3", "", { "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.1" }, "peerDependencies": { "browserslist": ">= 4.21.0" }, "bin": { "update-browserslist-db": "cli.js" } }, "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w=="],
+
+    "uri-js": ["uri-js@4.4.1", "", { "dependencies": { "punycode": "^2.1.0" } }, "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg=="],
+
+    "vite": ["vite@7.3.1", "", { "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA=="],
+
+    "which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="],
+
+    "word-wrap": ["word-wrap@1.2.5", "", {}, "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA=="],
+
+    "yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
+
+    "yocto-queue": ["yocto-queue@0.1.0", "", {}, "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="],
+
+    "zod": ["zod@4.3.5", "", {}, "sha512-k7Nwx6vuWx1IJ9Bjuf4Zt1PEllcwe7cls3VNzm4CQ1/hgtFUK2bRNG3rvnpPUhFjmqJKAKtjV576KnUkHocg/g=="],
+
+    "zod-validation-error": ["zod-validation-error@4.0.2", "", { "peerDependencies": { "zod": "^3.25.0 || ^4.0.0" } }, "sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ=="],
+
+    "@eslint-community/eslint-utils/eslint-visitor-keys": ["eslint-visitor-keys@3.4.3", "", {}, "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag=="],
+
+    "@eslint/eslintrc/globals": ["globals@14.0.0", "", {}, "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ=="],
+
+    "@typescript-eslint/eslint-plugin/ignore": ["ignore@7.0.5", "", {}, "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg=="],
+
+    "@typescript-eslint/typescript-estree/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
+
+    "@typescript-eslint/typescript-estree/semver": ["semver@7.7.3", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-SdsKMrI9TdgjdweUSR9MweHA4EJ8YxHn8DFaDisvhVlUOe4BF1tLD7GAj0lIqWVl+dPb/rExr0Btby5loQm20Q=="],
+
+    "@typescript-eslint/typescript-estree/minimatch/brace-expansion": ["brace-expansion@2.0.2", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ=="],
+  }
+}
--- a/eslint.config.js
+++ b/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,
+    },
+  },
+])
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>evolution</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "evolution",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.4",
+    "vite": "^7.2.4"
+  }
+}
--- a/public/vite.svg
+++ b/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>
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,11 @@
+.app-layout {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.app-main {
+  flex: 1;
+  overflow: hidden;
+}
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -0,0 +1,29 @@
+import { useState } from 'react';
+import Sidebar, { type AppId } from './components/Sidebar';
+import ImageApprox from './apps/ImageApprox/ImageApprox';
+import SnakeAI from './apps/SnakeAI/SnakeAI';
+import './App.css';
+
+function App() {
+  const [currentApp, setCurrentApp] = useState<AppId>('image-approx');
+
+  const renderApp = () => {
+    switch (currentApp) {
+      case 'image-approx':
+        return <ImageApprox />;
+      case 'snake-ai':
+        return <SnakeAI />;
+      default:
+        return <div>App not found</div>;
+    }
+  };
+
+  return (
+    <div className="app-layout">
+      <Sidebar currentApp={currentApp} onAppChange={setCurrentApp} />
+      <main className="app-main">{renderApp()}</main>
+    </div>
+  );
+}
+
+export default App;
--- a/src/apps/ImageApprox/Controls.css
+++ b/src/apps/ImageApprox/Controls.css
@@ -0,0 +1,161 @@
+.controls-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+}
+
+.control-section {
+    background: var(--bg-card);
+    border: 1px solid var(--border-color);
+    border-radius: 16px;
+    padding: 1.5rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.section-title {
+    margin: 0 0 1rem;
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.file-input {
+    width: 100%;
+    padding: 0.75rem;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--border-color);
+    border-radius: 8px;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.file-input:hover {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: var(--primary-gradient-start);
+}
+
+.button-group {
+    display: flex;
+    gap: 0.75rem;
+}
+
+.control-button {
+    flex: 1;
+    padding: 0.875rem 1.5rem;
+    font-size: 1rem;
+    font-weight: 600;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.control-button.start {
+    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
+    color: white;
+}
+
+.control-button.start:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
+}
+
+.control-button.pause {
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    color: white;
+}
+
+.control-button.pause:hover:not(:disabled) {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(240, 147, 251, 0.4);
+}
+
+.control-button.reset {
+    background: rgba(255, 255, 255, 0.1);
+    color: var(--text-primary);
+    border: 1px solid var(--border-color);
+}
+
+.control-button.reset:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.15);
+}
+
+.control-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.slider-control {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+}
+
+.slider-control:last-child {
+    margin-bottom: 0;
+}
+
+.slider-label {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.875rem;
+    color: var(--text-secondary);
+}
+
+.slider-value {
+    font-weight: 600;
+    color: var(--primary-gradient-start);
+    font-family: 'Courier New', monospace;
+}
+
+.slider {
+    width: 100%;
+    height: 6px;
+    border-radius: 3px;
+    background: rgba(255, 255, 255, 0.1);
+    outline: none;
+    -webkit-appearance: none;
+    appearance: none;
+}
+
+.slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
+    cursor: pointer;
+    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.5);
+    transition: all 0.2s ease;
+}
+
+.slider::-webkit-slider-thumb:hover {
+    transform: scale(1.2);
+    box-shadow: 0 3px 10px rgba(99, 102, 241, 0.7);
+}
+
+.slider::-moz-range-thumb {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
+    cursor: pointer;
+    border: none;
+    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.5);
+    transition: all 0.2s ease;
+}
+
+.slider::-moz-range-thumb:hover {
+    transform: scale(1.2);
+    box-shadow: 0 3px 10px rgba(99, 102, 241, 0.7);
+}
+
+.slider:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
--- a/src/apps/ImageApprox/Controls.tsx
+++ b/src/apps/ImageApprox/Controls.tsx
@@ -0,0 +1,140 @@
+import './Controls.css';
+
+interface ControlsProps {
+    isRunning: boolean;
+    hasTarget: boolean;
+    mutationStrength: number;
+    childrenCount: number;
+    triangleCount: number;
+    sampleStep: number;
+    generationsPerFrame: number;
+    onToggleRunning: () => void;
+    onReset: () => void;
+    onMutationStrengthChange: (value: number) => void;
+    onChildrenCountChange: (value: number) => void;
+    onTriangleCountChange: (value: number) => void;
+    onSampleStepChange: (value: number) => void;
+    onGenerationsPerFrameChange: (value: number) => void;
+}
+
+export default function Controls({
+    isRunning,
+    hasTarget,
+    mutationStrength,
+    childrenCount,
+    triangleCount,
+    sampleStep,
+    generationsPerFrame,
+    onToggleRunning,
+    onReset,
+    onMutationStrengthChange,
+    onChildrenCountChange,
+    onTriangleCountChange,
+    onSampleStepChange,
+    onGenerationsPerFrameChange,
+}: ControlsProps) {
+    return (
+        <div className="controls-panel">
+            <div className="control-section">
+                <h3 className="section-title">Evolution Controls</h3>
+                <div className="button-group">
+                    <button
+                        onClick={onToggleRunning}
+                        disabled={!hasTarget}
+                        className={`control-button ${isRunning ? 'pause' : 'start'}`}
+                    >
+                        {isRunning ? '⏸ Pause' : '▶ Start'}
+                    </button>
+                    <button onClick={onReset} disabled={!hasTarget} className="control-button reset">
+                        🔄 Reset
+                    </button>
+                </div>
+            </div>
+
+            <div className="control-section">
+                <h3 className="section-title">Parameters</h3>
+
+                <div className="slider-control">
+                    <label className="slider-label">
+                        <span>Mutation Strength:</span>
+                        <span className="slider-value">{mutationStrength.toFixed(2)}</span>
+                    </label>
+                    <input
+                        type="range"
+                        min="0.01"
+                        max="1"
+                        step="0.01"
+                        value={mutationStrength}
+                        onChange={(e) => onMutationStrengthChange(parseFloat(e.target.value))}
+                        className="slider"
+                    />
+                </div>
+
+                <div className="slider-control">
+                    <label className="slider-label">
+                        <span>Children per Gen (λ):</span>
+                        <span className="slider-value">{childrenCount}</span>
+                    </label>
+                    <input
+                        type="range"
+                        min="1"
+                        max="30"
+                        step="1"
+                        value={childrenCount}
+                        onChange={(e) => onChildrenCountChange(parseInt(e.target.value))}
+                        className="slider"
+                    />
+                </div>
+
+                <div className="slider-control">
+                    <label className="slider-label">
+                        <span>Triangle Count:</span>
+                        <span className="slider-value">{triangleCount}</span>
+                    </label>
+                    <input
+                        type="range"
+                        min="50"
+                        max="200"
+                        step="10"
+                        value={triangleCount}
+                        onChange={(e) => onTriangleCountChange(parseInt(e.target.value))}
+                        className="slider"
+                        disabled={isRunning}
+                    />
+                </div>
+
+                <div className="slider-control">
+                    <label className="slider-label">
+                        <span>Sample Step:</span>
+                        <span className="slider-value">{sampleStep}px</span>
+                    </label>
+                    <input
+                        type="range"
+                        min="1"
+                        max="8"
+                        step="1"
+                        value={sampleStep}
+                        onChange={(e) => onSampleStepChange(parseInt(e.target.value))}
+                        className="slider"
+                    />
+                </div>
+
+                <div className="slider-control">
+                    <label className="slider-label">
+                        <span>Speed (Gen/Frame):</span>
+                        <span className="slider-value">{generationsPerFrame}</span>
+                    </label>
+                    <input
+                        type="range"
+                        min="1"
+                        max="100"
+                        step="1"
+                        value={generationsPerFrame}
+                        onChange={(e) => onGenerationsPerFrameChange(parseInt(e.target.value))}
+                        className="slider"
+                    />
+                </div>
+            </div>
+        </div>
+    );
+}
--- a/src/apps/ImageApprox/FitnessChart.css
+++ b/src/apps/ImageApprox/FitnessChart.css
@@ -0,0 +1,23 @@
+.fitness-chart-container {
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 16px;
+    padding: 1.5rem;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+}
+
+.chart-title {
+    margin: 0 0 1rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--text-secondary);
+}
+
+.fitness-chart {
+    width: 100%;
+    height: auto;
+    border-radius: 8px;
+    background: rgba(0, 0, 0, 0.2);
+}
--- a/src/apps/ImageApprox/FitnessChart.tsx
+++ b/src/apps/ImageApprox/FitnessChart.tsx
@@ -0,0 +1,152 @@
+import { useEffect, useRef } from 'react';
+import './FitnessChart.css';
+
+interface FitnessChartProps {
+    fitnessHistory: number[];
+    maxPoints?: number;
+}
+
+export default function FitnessChart({ fitnessHistory, maxPoints = 500 }: FitnessChartProps) {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas) return;
+
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return;
+
+        const width = canvas.width;
+        const height = canvas.height;
+
+        // Clear canvas
+        ctx.fillStyle = '#0f0f1e';
+        ctx.fillRect(0, 0, width, height);
+
+        if (fitnessHistory.length < 2) return;
+
+        const maxMSE = 255 * 255 * 3;
+
+        // Convert fitness (error) to similarity percentage
+        const similarityHistory = fitnessHistory.map(fitness =>
+            Math.max(0, Math.min(100, ((maxMSE - fitness) / maxMSE) * 100))
+        );
+
+        // ALL-TIME scale: fixed 0-100%
+        const allTimeMin = 0;
+        const allTimeMax = 100;
+        const allTimeRange = 100;
+
+        // RECENT scale: auto-scaled to recent data
+        const recentHistory = similarityHistory.slice(-maxPoints);
+        const recentMin = Math.min(...recentHistory);
+        const recentMax = Math.max(...recentHistory);
+        const recentRange = recentMax - recentMin || 1;
+
+        // Draw grid lines and left axis (0-100%)
+        ctx.strokeStyle = 'rgba(255, 255, 255, 0.05)';
+        ctx.lineWidth = 1;
+        ctx.fillStyle = 'rgba(255, 255, 255, 0.4)';
+        ctx.font = '10px Inter, sans-serif';
+        ctx.textAlign = 'left';
+
+        for (let i = 0; i <= 5; i++) {
+            const y = (height / 5) * i;
+            ctx.beginPath();
+            ctx.moveTo(0, y);
+            ctx.lineTo(width, y);
+            ctx.stroke();
+
+            // Left axis labels (0-100%)
+            const value = allTimeMax - (allTimeRange / 5) * i;
+            ctx.fillText(value.toFixed(0) + '%', 5, y - 2);
+        }
+
+        // LAYER 1: All-time history (0-100% scale, faded)
+        const downsampleRate = Math.max(1, Math.floor(similarityHistory.length / 100));
+        const downsampledHistory = similarityHistory.filter((_, i) => i % downsampleRate === 0);
+
+        if (downsampledHistory.length >= 2) {
+            ctx.strokeStyle = 'rgba(102, 126, 234, 0.2)';
+            ctx.lineWidth = 1.5;
+            ctx.beginPath();
+
+            downsampledHistory.forEach((similarity, index) => {
+                const x = (index / (downsampledHistory.length - 1)) * width;
+                const normalizedSimilarity = (similarity - allTimeMin) / allTimeRange;
+                const y = height - normalizedSimilarity * height;
+
+                if (index === 0) {
+                    ctx.moveTo(x, y);
+                } else {
+                    ctx.lineTo(x, y);
+                }
+            });
+
+            ctx.stroke();
+        }
+
+        // LAYER 2: Recent progress (auto-scaled, bright)
+        if (recentHistory.length >= 2) {
+            ctx.strokeStyle = '#667eea';
+            ctx.lineWidth = 2.5;
+            ctx.beginPath();
+
+            recentHistory.forEach((similarity, index) => {
+                const x = (index / (recentHistory.length - 1)) * width;
+                const normalizedSimilarity = (similarity - recentMin) / recentRange;
+                const y = height - normalizedSimilarity * height;
+
+                if (index === 0) {
+                    ctx.moveTo(x, y);
+                } else {
+                    ctx.lineTo(x, y);
+                }
+            });
+
+            ctx.stroke();
+
+            // Gradient fill under recent line
+            const gradient = ctx.createLinearGradient(0, 0, 0, height);
+            gradient.addColorStop(0, 'rgba(102, 126, 234, 0.25)');
+            gradient.addColorStop(1, 'rgba(102, 126, 234, 0)');
+
+            ctx.fillStyle = gradient;
+            ctx.beginPath();
+
+            recentHistory.forEach((similarity, index) => {
+                const x = (index / (recentHistory.length - 1)) * width;
+                const normalizedSimilarity = (similarity - recentMin) / recentRange;
+                const y = height - normalizedSimilarity * height;
+
+                if (index === 0) {
+                    ctx.moveTo(x, y);
+                } else {
+                    ctx.lineTo(x, y);
+                }
+            });
+
+            ctx.lineTo(width, height);
+            ctx.lineTo(0, height);
+            ctx.closePath();
+            ctx.fill();
+        }
+
+        // Right axis labels (recent auto-scale)
+        ctx.fillStyle = 'rgba(102, 126, 234, 0.7)';
+        ctx.textAlign = 'right';
+
+        for (let i = 0; i <= 5; i++) {
+            const y = (height / 5) * i;
+            const value = recentMax - (recentRange / 5) * i;
+            ctx.fillText(value.toFixed(2) + '%', width - 5, y - 2);
+        }
+    }, [fitnessHistory, maxPoints]);
+
+    return (
+        <div className="fitness-chart-container">
+            <h3 className="chart-title">Similarity Progress</h3>
+            <canvas ref={canvasRef} width={600} height={200} className="fitness-chart" />
+        </div>
+    );
+}
--- a/src/apps/ImageApprox/ImageApprox.css
+++ b/src/apps/ImageApprox/ImageApprox.css
@@ -0,0 +1,35 @@
+.image-approx-layout {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    max-width: 1600px;
+    margin: 0 auto;
+}
+
+.left-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.right-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.canvases-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+}
+
+@media (max-width: 1200px) {
+    .image-approx-layout {
+        grid-template-columns: 1fr;
+    }
+
+    .canvases-row {
+        grid-template-columns: 1fr;
+    }
+}
--- a/src/apps/ImageApprox/ImageApprox.tsx
+++ b/src/apps/ImageApprox/ImageApprox.tsx
@@ -0,0 +1,283 @@
+import { useRef, useState, useEffect, useCallback } from 'react';
+import AppContainer from '../../components/AppContainer';
+import ImageCanvas from './ImageCanvas';
+import Controls from './Controls';
+import Stats from './Stats';
+import FitnessChart from './FitnessChart';
+import Tips from './Tips';
+import { createRandomGenome, type Genome } from '../../lib/imageApprox/genome';
+import { renderGenome } from '../../lib/imageApprox/renderer';
+import { calculateFitness } from '../../lib/imageApprox/fitness';
+import { evolve, type EvolutionConfig } from '../../lib/imageApprox/evolution';
+import './ImageApprox.css';
+
+const CANVAS_SIZE = 256; // Increased from 128 for better visibility
+
+export default function ImageApprox() {
+    const targetCanvasRef = useRef<HTMLCanvasElement>(null);
+    const evolvedCanvasRef = useRef<HTMLCanvasElement>(null);
+    const offscreenCanvasRef = useRef<HTMLCanvasElement | null>(null);
+    const animationFrameRef = useRef<number | null>(null);
+
+    const [targetImageData, setTargetImageData] = useState<ImageData | null>(null);
+    const [bestGenome, setBestGenome] = useState<Genome | null>(null);
+    const [bestFitness, setBestFitness] = useState<number>(Infinity);
+    const [fitnessHistory, setFitnessHistory] = useState<number[]>([]);
+    const [generation, setGeneration] = useState<number>(0);
+    const [isRunning, setIsRunning] = useState<boolean>(false);
+
+    // Configuration
+    const [mutationStrength, setMutationStrength] = useState<number>(0.2);
+    const [childrenCount, setChildrenCount] = useState<number>(15);
+    const [triangleCount, setTriangleCount] = useState<number>(100);
+    const [sampleStep, setSampleStep] = useState<number>(2);
+    const [generationsPerFrame, setGenerationsPerFrame] = useState<number>(20);
+
+    // Initialize offscreen canvas
+    useEffect(() => {
+        offscreenCanvasRef.current = document.createElement('canvas');
+        offscreenCanvasRef.current.width = CANVAS_SIZE;
+        offscreenCanvasRef.current.height = CANVAS_SIZE;
+
+        // Load default image
+        loadDefaultImage();
+    }, []);
+
+    const loadDefaultImage = () => {
+        const img = new Image();
+        img.onload = () => {
+            const canvas = targetCanvasRef.current;
+            if (!canvas) return;
+
+            const ctx = canvas.getContext('2d');
+            if (!ctx) return;
+
+            // Draw image to target canvas
+            ctx.drawImage(img, 0, 0, CANVAS_SIZE, CANVAS_SIZE);
+            const imageData = ctx.getImageData(0, 0, CANVAS_SIZE, CANVAS_SIZE);
+            setTargetImageData(imageData);
+
+            // Initialize genome
+            const genome = createRandomGenome(CANVAS_SIZE, CANVAS_SIZE, triangleCount);
+            setBestGenome(genome);
+
+            // Calculate initial fitness
+            const offscreenCanvas = offscreenCanvasRef.current;
+            if (offscreenCanvas) {
+                const offscreenCtx = offscreenCanvas.getContext('2d');
+                if (offscreenCtx) {
+                    renderGenome(offscreenCtx, genome, CANVAS_SIZE, CANVAS_SIZE);
+                    const candidateData = offscreenCtx.getImageData(0, 0, CANVAS_SIZE, CANVAS_SIZE);
+                    const fitness = calculateFitness(imageData, candidateData, sampleStep);
+                    setBestFitness(fitness);
+                    setFitnessHistory([fitness]);
+                }
+            }
+
+            setGeneration(0);
+            setIsRunning(false);
+        };
+
+        // Create a simple default image (yellow circle on blue background)
+        const defaultCanvas = document.createElement('canvas');
+        defaultCanvas.width = CANVAS_SIZE;
+        defaultCanvas.height = CANVAS_SIZE;
+        const defaultCtx = defaultCanvas.getContext('2d');
+        if (defaultCtx) {
+            // Blue background
+            defaultCtx.fillStyle = '#4A90E2';
+            defaultCtx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE);
+
+            // Yellow circle
+            defaultCtx.fillStyle = '#FFD700';
+            defaultCtx.beginPath();
+            defaultCtx.arc(CANVAS_SIZE / 2, CANVAS_SIZE / 2, 40, 0, Math.PI * 2);
+            defaultCtx.fill();
+        }
+
+        img.src = defaultCanvas.toDataURL();
+    };
+
+    const handleImageUpload = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+        const file = e.target.files?.[0];
+        if (!file) return;
+
+        const img = new Image();
+        img.onload = () => {
+            const canvas = targetCanvasRef.current;
+            if (!canvas) return;
+
+            const ctx = canvas.getContext('2d');
+            if (!ctx) return;
+
+            // Draw image to target canvas
+            ctx.drawImage(img, 0, 0, CANVAS_SIZE, CANVAS_SIZE);
+            const imageData = ctx.getImageData(0, 0, CANVAS_SIZE, CANVAS_SIZE);
+            setTargetImageData(imageData);
+
+            // Initialize genome
+            const genome = createRandomGenome(CANVAS_SIZE, CANVAS_SIZE, triangleCount);
+            setBestGenome(genome);
+
+            // Calculate initial fitness
+            const offscreenCanvas = offscreenCanvasRef.current;
+            if (offscreenCanvas) {
+                const offscreenCtx = offscreenCanvas.getContext('2d');
+                if (offscreenCtx) {
+                    renderGenome(offscreenCtx, genome, CANVAS_SIZE, CANVAS_SIZE);
+                    const candidateData = offscreenCtx.getImageData(0, 0, CANVAS_SIZE, CANVAS_SIZE);
+                    const fitness = calculateFitness(imageData, candidateData, sampleStep);
+                    setBestFitness(fitness);
+                    setFitnessHistory([fitness]);
+                }
+            }
+
+            setGeneration(0);
+            setIsRunning(false);
+        };
+
+        img.src = URL.createObjectURL(file);
+    }, [triangleCount, sampleStep]);
+
+    const handleReset = useCallback(() => {
+        if (!targetImageData) return;
+
+        const genome = createRandomGenome(CANVAS_SIZE, CANVAS_SIZE, triangleCount);
+        setBestGenome(genome);
+
+        // Calculate initial fitness
+        const offscreenCanvas = offscreenCanvasRef.current;
+        if (offscreenCanvas) {
+            const offscreenCtx = offscreenCanvas.getContext('2d');
+            if (offscreenCtx) {
+                renderGenome(offscreenCtx, genome, CANVAS_SIZE, CANVAS_SIZE);
+                const candidateData = offscreenCtx.getImageData(0, 0, CANVAS_SIZE, CANVAS_SIZE);
+                const fitness = calculateFitness(targetImageData, candidateData, sampleStep);
+                setBestFitness(fitness);
+                setFitnessHistory([fitness]);
+            }
+        }
+
+        setGeneration(0);
+        setIsRunning(false);
+    }, [targetImageData, triangleCount, sampleStep]);
+
+    // Evolution loop - batched for performance
+    useEffect(() => {
+        if (!isRunning || !targetImageData || !bestGenome || !offscreenCanvasRef.current) {
+            return;
+        }
+
+        const DISPLAY_UPDATE_INTERVAL = 5; // Update display every 5 frames
+        let frameCount = 0;
+
+        const runEvolution = () => {
+            let currentGenome = bestGenome;
+            let currentFitness = bestFitness;
+
+            // Run multiple generations per frame (user configurable)
+            for (let i = 0; i < generationsPerFrame; i++) {
+                const config: EvolutionConfig = {
+                    width: CANVAS_SIZE,
+                    height: CANVAS_SIZE,
+                    mutationStrength,
+                    childrenCount,
+                    sampleStep,
+                };
+
+                const result = evolve(
+                    currentGenome,
+                    currentFitness,
+                    targetImageData,
+                    config,
+                    offscreenCanvasRef.current!
+                );
+
+                currentGenome = result.genome;
+                currentFitness = result.fitness;
+
+                // Update state
+                setBestGenome(result.genome);
+                setBestFitness(result.fitness);
+                // Only keep last 1000 fitness values to prevent memory bloat
+                setFitnessHistory((prev) => {
+                    const newHistory = [...prev, result.fitness];
+                    return newHistory.length > 1000 ? newHistory.slice(-1000) : newHistory;
+                });
+                setGeneration((g) => g + 1);
+            }
+
+            // Only update display canvas periodically, not every generation
+            frameCount++;
+            if (frameCount % DISPLAY_UPDATE_INTERVAL === 0) {
+                const canvas = evolvedCanvasRef.current;
+                if (canvas) {
+                    const ctx = canvas.getContext('2d', { willReadFrequently: false });
+                    if (ctx) {
+                        renderGenome(ctx, currentGenome, CANVAS_SIZE, CANVAS_SIZE);
+                    }
+                }
+            }
+
+            animationFrameRef.current = requestAnimationFrame(runEvolution);
+        };
+
+        animationFrameRef.current = requestAnimationFrame(runEvolution);
+
+        return () => {
+            if (animationFrameRef.current !== null) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
+        };
+    }, [isRunning, targetImageData, bestGenome, bestFitness, mutationStrength, childrenCount, sampleStep, generationsPerFrame]);
+
+    // Initial render of evolved canvas
+    useEffect(() => {
+        if (bestGenome && evolvedCanvasRef.current) {
+            const ctx = evolvedCanvasRef.current.getContext('2d');
+            if (ctx) {
+                renderGenome(ctx, bestGenome, CANVAS_SIZE, CANVAS_SIZE);
+            }
+        }
+    }, [bestGenome]);
+
+    return (
+        <AppContainer title="Image Approximation">
+            <div className="image-approx-layout">
+                <div className="left-panel">
+                    <Controls
+                        isRunning={isRunning}
+                        hasTarget={targetImageData !== null}
+                        mutationStrength={mutationStrength}
+                        childrenCount={childrenCount}
+                        triangleCount={triangleCount}
+                        sampleStep={sampleStep}
+                        generationsPerFrame={generationsPerFrame}
+                        onToggleRunning={() => setIsRunning(!isRunning)}
+                        onReset={handleReset}
+                        onMutationStrengthChange={setMutationStrength}
+                        onChildrenCountChange={setChildrenCount}
+                        onTriangleCountChange={setTriangleCount}
+                        onSampleStepChange={setSampleStep}
+                        onGenerationsPerFrameChange={setGenerationsPerFrame}
+                    />
+                    <Tips />
+                </div>
+
+                <div className="right-panel">
+                    <Stats generation={generation} fitness={bestFitness} />
+                    <FitnessChart fitnessHistory={fitnessHistory} />
+                    <div className="canvases-row">
+                        <ImageCanvas
+                            label="Target Image"
+                            canvasRef={targetCanvasRef}
+                            showFileUpload={true}
+                            onImageUpload={handleImageUpload}
+                        />
+                        <ImageCanvas label="Evolved Image" canvasRef={evolvedCanvasRef} />
+                    </div>
+                </div>
+            </div>
+        </AppContainer>
+    );
+}
--- a/src/apps/ImageApprox/ImageCanvas.css
+++ b/src/apps/ImageApprox/ImageCanvas.css
@@ -0,0 +1,66 @@
+.image-canvas-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.canvas-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.canvas-label {
+    margin: 0;
+    font-size: 0.875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--text-secondary);
+    flex: 1;
+}
+
+.file-input-hidden {
+    display: none;
+}
+
+.upload-icon-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    background: rgba(99, 102, 241, 0.15);
+    border: 1px solid rgba(99, 102, 241, 0.3);
+    border-radius: 8px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.upload-icon-button:hover {
+    background: rgba(99, 102, 241, 0.25);
+    border-color: var(--primary);
+    transform: scale(1.05);
+}
+
+.image-canvas {
+    display: block;
+    border-radius: 12px;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid var(--border-color);
+    image-rendering: pixelated;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+    width: 256px;
+    height: 256px;
+}
+
+.pixel-canvas {
+    display: block;
+    width: 256px;
+    height: 256px;
+    image-rendering: pixelated;
+    image-rendering: -moz-crisp-edges;
+    image-rendering: crisp-edges;
+    border-radius: 4px;
+}
--- a/src/apps/ImageApprox/ImageCanvas.tsx
+++ b/src/apps/ImageApprox/ImageCanvas.tsx
@@ -0,0 +1,33 @@
+import './ImageCanvas.css';
+
+interface ImageCanvasProps {
+    label: string;
+    canvasRef: React.RefObject<HTMLCanvasElement | null>;
+    showFileUpload?: boolean;
+    onImageUpload?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export default function ImageCanvas({ label, canvasRef, showFileUpload, onImageUpload }: ImageCanvasProps) {
+    return (
+        <div className="image-canvas-container">
+            <div className="canvas-header">
+                <h3 className="canvas-label">{label}</h3>
+                {showFileUpload && (
+                    <>
+                        <input
+                            type="file"
+                            accept="image/*"
+                            onChange={onImageUpload}
+                            className="file-input-hidden"
+                            id="image-upload"
+                        />
+                        <label htmlFor="image-upload" className="upload-icon-button" title="Choose Image">
+                            📁
+                        </label>
+                    </>
+                )}
+            </div>
+            <canvas ref={canvasRef} width={256} height={256} className="image-canvas" />
+        </div>
+    );
+}
--- a/src/apps/ImageApprox/Stats.css
+++ b/src/apps/ImageApprox/Stats.css
@@ -0,0 +1,49 @@
+.stats-panel {
+    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
+    border-radius: 16px;
+    padding: 1.5rem 2rem;
+    box-shadow: 0 8px 32px rgba(99, 102, 241, 0.3);
+}
+
+.stats-title {
+    margin: 0 0 1rem;
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.stats-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+}
+
+.stat-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.stat-item.highlight {
+    text-align: right;
+}
+
+.stat-item:last-child {
+    border-bottom: none;
+}
+
+.stat-label {
+    font-size: 0.75rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.stat-value {
+    font-size: 2.25rem;
+    font-weight: 700;
+    line-height: 1;
+    color: #fff;
+    font-family: 'Inter', system-ui, sans-serif;
+}
--- a/src/apps/ImageApprox/Stats.tsx
+++ b/src/apps/ImageApprox/Stats.tsx
@@ -0,0 +1,29 @@
+import './Stats.css';
+
+interface StatsProps {
+    generation: number;
+    fitness: number;
+}
+
+export default function Stats({ generation, fitness }: StatsProps) {
+    // Convert fitness (MSE) to similarity percentage
+    // MSE is mean squared error per pixel, so max possible is 255^2 * 3 (RGB channels)
+    // Lower fitness = better, so we invert it
+    const maxMSE = 255 * 255 * 3; // Max error per pixel across RGB
+    const similarity = Math.max(0, Math.min(100, ((maxMSE - fitness) / maxMSE) * 100));
+
+    return (
+        <div className="stats-panel">
+            <div className="stats-grid">
+                <div className="stat-item">
+                    <span className="stat-label">Generation</span>
+                    <span className="stat-value">{generation.toLocaleString()}</span>
+                </div>
+                <div className="stat-item highlight">
+                    <span className="stat-label">Similarity</span>
+                    <span className="stat-value">{similarity.toFixed(1)}%</span>
+                </div>
+            </div>
+        </div>
+    );
+}
--- a/src/apps/ImageApprox/Tips.css
+++ b/src/apps/ImageApprox/Tips.css
@@ -0,0 +1,44 @@
+.tips-panel {
+    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
+    border: 1px solid rgba(99, 102, 241, 0.2);
+    border-radius: 16px;
+    padding: 1.5rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.tips-title {
+    margin: 0 0 0.75rem;
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.tips-list {
+    margin: 0;
+    padding-left: 1.25rem;
+    list-style: none;
+}
+
+.tips-list li {
+    position: relative;
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+    margin-bottom: 0.5rem;
+    line-height: 1.4;
+}
+
+.tips-list li:before {
+    content: '→';
+    position: absolute;
+    left: -1.25rem;
+    color: var(--primary);
+}
+
+.tips-list li:last-child {
+    margin-bottom: 0;
+}
+
+.tips-list strong {
+    color: var(--text-primary);
+    font-weight: 600;
+}
--- a/src/apps/ImageApprox/Tips.tsx
+++ b/src/apps/ImageApprox/Tips.tsx
@@ -0,0 +1,16 @@
+import './Tips.css';
+
+export default function Tips() {
+    return (
+        <div className="tips-panel">
+            <h3 className="tips-title">💡 Tips</h3>
+            <ul className="tips-list">
+                <li>Start with simple images (circles, logos) for best results</li>
+                <li>Increase <strong>Speed slider to 50-100</strong> for max performance!</li>
+                <li>Increase <strong>Children per Gen</strong> to 20-30 for faster convergence</li>
+                <li>Visible shapes typically appear after <strong>5k-10k</strong> generations</li>
+                <li>Lower mutation strength once you see rough shapes forming</li>
+            </ul>
+        </div>
+    );
+}
--- a/src/apps/SnakeAI/BestSnakeDisplay.tsx
+++ b/src/apps/SnakeAI/BestSnakeDisplay.tsx
@@ -0,0 +1,33 @@
+import SnakeCanvas from './SnakeCanvas';
+import type { Network } from '../../lib/snakeAI/network';
+
+interface BestSnakeDisplayProps {
+    network: Network | null;
+    gridSize: number;
+    fitness: number;
+}
+
+export default function BestSnakeDisplay({ network, gridSize, fitness }: BestSnakeDisplayProps) {
+    if (!network) return null;
+
+    return (
+        <div className="best-snake-panel">
+            <div className="best-header">
+                <h3>👑 All-Time Best</h3>
+                <div className="best-stats">
+                    <span className="label">Fitness Record:</span>
+                    <span className="value">{Math.round(fitness)}</span>
+                </div>
+            </div>
+            <div className="best-canvas-wrapper">
+                <SnakeCanvas
+                    network={network}
+                    gridSize={gridSize}
+                    size="large"
+                    showGrid={true}
+                    showStats={true}
+                />
+            </div>
+        </div>
+    );
+}
--- a/src/apps/SnakeAI/Controls.tsx
+++ b/src/apps/SnakeAI/Controls.tsx
@@ -0,0 +1,86 @@
+interface ControlsProps {
+    isRunning: boolean;
+    onToggleRunning: () => void;
+    onReset: () => void;
+    speed: number;
+    onSpeedChange: (speed: number) => void;
+    mutationRate: number;
+    onMutationRateChange: (rate: number) => void;
+    populationSize: number;
+}
+
+export default function Controls({
+    isRunning,
+    onToggleRunning,
+    onReset,
+    speed,
+    onSpeedChange,
+    mutationRate,
+    onMutationRateChange,
+    populationSize,
+}: ControlsProps) {
+    return (
+        <div className="controls-panel">
+            <h3>Evolution Controls</h3>
+
+            <div className="control-group">
+                <div className="button-group">
+                    <button
+                        className={`btn ${isRunning ? 'btn-pause' : 'btn-play'}`}
+                        onClick={onToggleRunning}
+                    >
+                        {isRunning ? '⏸ Pause' : '▶ Play'}
+                    </button>
+                    <button className="btn btn-reset" onClick={onReset}>
+                        🔄 Reset
+                    </button>
+                </div>
+            </div>
+
+            <div className="control-group">
+                <label htmlFor="speed-slider">
+                    Playback Speed: <strong>{speed}x</strong>
+                </label>
+                <input
+                    id="speed-slider"
+                    type="range"
+                    min="1"
+                    max="20"
+                    step="1"
+                    value={speed}
+                    onChange={(e) => onSpeedChange(Number(e.target.value))}
+                />
+                <div className="slider-labels">
+                    <span>Slow</span>
+                    <span>Fast</span>
+                </div>
+            </div>
+
+            <div className="control-group">
+                <label htmlFor="mutation-slider">
+                    Mutation Rate: <strong>{(mutationRate * 100).toFixed(0)}%</strong>
+                </label>
+                <input
+                    id="mutation-slider"
+                    type="range"
+                    min="0.01"
+                    max="0.5"
+                    step="0.01"
+                    value={mutationRate}
+                    onChange={(e) => onMutationRateChange(Number(e.target.value))}
+                />
+                <div className="slider-labels">
+                    <span>1%</span>
+                    <span>50%</span>
+                </div>
+            </div>
+
+            <div className="control-info">
+                <div className="info-row">
+                    <span className="info-label">Population Size:</span>
+                    <span className="info-value">{populationSize}</span>
+                </div>
+            </div>
+        </div>
+    );
+}
--- a/src/apps/SnakeAI/SnakeAI.css
+++ b/src/apps/SnakeAI/SnakeAI.css
@@ -0,0 +1,476 @@
+.snake-ai-layout {
+    display: grid;
+    grid-template-columns: 2fr 1fr;
+    gap: 2rem;
+    height: 100%;
+    padding: 1rem;
+}
+
+.left-panel,
+.right-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+/* Canvas */
+.snake-canvas-container {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    align-items: center;
+}
+
+/* Snake Grid */
+.snake-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+    width: 100%;
+    max-width: 700px;
+}
+
+.snake-grid-cell {
+    position: relative;
+    background: linear-gradient(135deg, #2a2a3e 0%, #1a1a2e 100%);
+    border-radius: 8px;
+    border: 2px solid #3a3a4e;
+    padding: 0.5rem;
+    transition: all 0.3s ease;
+}
+
+.snake-grid-cell:hover {
+    transform: scale(1.05);
+    border-color: #4ecdc4;
+    box-shadow: 0 4px 12px rgba(78, 205, 196, 0.3);
+    z-index: 10;
+}
+
+.snake-grid-cell.best {
+    border-color: #4ecdc4;
+    background: linear-gradient(135deg, rgba(78, 205, 196, 0.15) 0%, #1a1a2e 100%);
+    box-shadow: 0 0 20px rgba(78, 205, 196, 0.2);
+}
+
+.snake-grid-label {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: #4ecdc4;
+}
+
+.snake-grid-cell.best .snake-grid-label {
+    color: #4ecdc4;
+    text-shadow: 0 0 10px rgba(78, 205, 196, 0.5);
+}
+
+.fitness-badge {
+    background: #3a3a4e;
+    padding: 0.2rem 0.5rem;
+    border-radius: 12px;
+    font-size: 0.75rem;
+    color: #fff;
+}
+
+.snake-grid-cell.best .fitness-badge {
+    background: linear-gradient(135deg, #4ecdc4 0%, #44a59d 100%);
+}
+
+.snake-grid-cell canvas {
+    width: 100%;
+    height: auto;
+}
+
+
+.canvas-info {
+    display: flex;
+    gap: 2rem;
+    padding: 0.75rem 1.5rem;
+    background: linear-gradient(135deg, #2a2a3e 0%, #1a1a2e 100%);
+    border-radius: 8px;
+    border: 1px solid #3a3a4e;
+}
+
+.info-item {
+    display: flex;
+    gap: 0.5rem;
+    align-items: baseline;
+}
+
+.info-item .label {
+    color: #888;
+    font-size: 0.9rem;
+}
+
+.info-item .value {
+    color: #4ecdc4;
+    font-weight: 600;
+    font-size: 1.1rem;
+}
+
+/* Controls */
+.controls-panel {
+    background: linear-gradient(135deg, #2a2a3e 0%, #1a1a2e 100%);
+    padding: 1.5rem;
+    border-radius: 12px;
+    border: 1px solid #3a3a4e;
+}
+
+.controls-panel h3 {
+    margin: 0 0 1.5rem 0;
+    color: #fff;
+    font-size: 1.2rem;
+}
+
+.control-group {
+    margin-bottom: 1.5rem;
+}
+
+.control-group:last-child {
+    margin-bottom: 0;
+}
+
+.button-group {
+    display: flex;
+    gap: 0.75rem;
+}
+
+.btn {
+    flex: 1;
+    padding: 0.75rem 1.5rem;
+    border: none;
+    border-radius: 8px;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    font-family: inherit;
+}
+
+.btn-play {
+    background: linear-gradient(135deg, #4ecdc4 0%, #44a59d 100%);
+    color: #fff;
+}
+
+.btn-play:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(78, 205, 196, 0.4);
+}
+
+.btn-pause {
+    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
+    color: #fff;
+}
+
+.btn-pause:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(243, 156, 18, 0.4);
+}
+
+.btn-reset {
+    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
+    color: #fff;
+}
+
+.btn-reset:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
+}
+
+.control-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    color: #ccc;
+    font-size: 0.95rem;
+}
+
+.control-group label strong {
+    color: #4ecdc4;
+}
+
+input[type='range'] {
+    width: 100%;
+    height: 6px;
+    border-radius: 3px;
+    background: #3a3a4e;
+    outline: none;
+    -webkit-appearance: none;
+}
+
+input[type='range']::-webkit-slider-thumb {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #4ecdc4 0%, #44a59d 100%);
+    cursor: pointer;
+    box-shadow: 0 2px 8px rgba(78, 205, 196, 0.4);
+    transition: all 0.2s ease;
+}
+
+input[type='range']::-webkit-slider-thumb:hover {
+    transform: scale(1.2);
+}
+
+input[type='range']::-moz-range-thumb {
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #4ecdc4 0%, #44a59d 100%);
+    cursor: pointer;
+    border: none;
+    box-shadow: 0 2px 8px rgba(78, 205, 196, 0.4);
+}
+
+.slider-labels {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 0.25rem;
+    font-size: 0.8rem;
+    color: #888;
+}
+
+.control-info {
+    background: #1a1a2e;
+    padding: 1rem;
+    border-radius: 8px;
+    border: 1px solid #3a3a4e;
+}
+
+.info-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.info-label {
+    color: #888;
+    font-size: 0.9rem;
+}
+
+.info-value {
+    color: #4ecdc4;
+    font-weight: 600;
+    font-size: 1.1rem;
+}
+
+/* Stats */
+.stats-panel {
+    background: linear-gradient(135deg, #2a2a3e 0%, #1a1a2e 100%);
+    padding: 1.5rem;
+    border-radius: 12px;
+    border: 1px solid #3a3a4e;
+}
+
+.stats-panel h3 {
+    margin: 0 0 1.5rem 0;
+    color: #fff;
+    font-size: 1.2rem;
+}
+
+.stat-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+    margin-bottom: 1.5rem;
+}
+
+.stat-item {
+    background: #1a1a2e;
+    padding: 1rem;
+    border-radius: 8px;
+    border: 1px solid #3a3a4e;
+    text-align: center;
+}
+
+.stat-item.highlight {
+    border-color: #4ecdc4;
+    background: linear-gradient(135deg, rgba(78, 205, 196, 0.1) 0%, #1a1a2e 100%);
+}
+
+.stat-label {
+    color: #888;
+    font-size: 0.85rem;
+    margin-bottom: 0.5rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.stat-value {
+    color: #4ecdc4;
+    font-size: 1.8rem;
+    font-weight: 700;
+}
+
+.progress-indicator {
+    background: #1a1a2e;
+    padding: 1rem;
+    border-radius: 8px;
+    border: 1px solid #3a3a4e;
+}
+
+.progress-label {
+    color: #ccc;
+    font-size: 0.9rem;
+    margin-bottom: 0.5rem;
+}
+
+.progress-bar {
+    width: 100%;
+    height: 8px;
+    background: #3a3a4e;
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, #4ecdc4 0%, #44a59d 100%);
+    transition: width 0.3s ease;
+    box-shadow: 0 0 10px rgba(78, 205, 196, 0.5);
+}
+
+/* Tips */
+.tips-panel {
+    background: linear-gradient(135deg, #2a2a3e 0%, #1a1a2e 100%);
+    padding: 1.5rem;
+    border-radius: 12px;
+    border: 1px solid #3a3a4e;
+    max-height: 600px;
+    overflow-y: auto;
+}
+
+.tips-panel h3 {
+    margin: 0 0 1.5rem 0;
+    color: #fff;
+    font-size: 1.2rem;
+}
+
+.tip-section {
+    margin-bottom: 1.5rem;
+}
+
+.tip-section:last-child {
+    margin-bottom: 0;
+}
+
+.tip-section h4 {
+    color: #4ecdc4;
+    font-size: 1rem;
+    margin: 0 0 0.75rem 0;
+}
+
+.tip-section p {
+    color: #ccc;
+    line-height: 1.6;
+    margin: 0 0 0.75rem 0;
+}
+
+.tip-section ul,
+.tip-section ol {
+    color: #ccc;
+    line-height: 1.8;
+    margin: 0;
+    padding-left: 1.5rem;
+}
+
+.tip-section li {
+    margin-bottom: 0.5rem;
+}
+
+.tip-section strong {
+    color: #4ecdc4;
+    font-weight: 600;
+}
+
+/* Scrollbar styling for tips panel */
+.tips-panel::-webkit-scrollbar {
+    width: 8px;
+}
+
+.tips-panel::-webkit-scrollbar-track {
+    background: #1a1a2e;
+    border-radius: 4px;
+}
+
+.tips-panel::-webkit-scrollbar-thumb {
+    background: #3a3a4e;
+    border-radius: 4px;
+}
+
+.tips-panel::-webkit-scrollbar-thumb:hover {
+    background: #4a4a5e;
+}
+
+/* Responsive */
+@media (max-width: 1200px) {
+    .snake-ai-layout {
+        grid-template-columns: 1fr;
+    }
+
+    .stat-grid {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+/* Best Snake Display */
+.best-snake-panel {
+    background: linear-gradient(135deg, #2a2a3e 0%, #1a1a2e 100%);
+    padding: 1.5rem;
+    border-radius: 12px;
+    border: 2px solid #4ecdc4;
+    box-shadow: 0 0 20px rgba(78, 205, 196, 0.15);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+}
+
+.best-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 0.5rem;
+}
+
+.best-header h3 {
+    margin: 0;
+    color: #4ecdc4;
+    font-size: 1.4rem;
+    text-shadow: 0 0 10px rgba(78, 205, 196, 0.3);
+}
+
+.best-stats {
+    display: flex;
+    gap: 0.75rem;
+    align-items: baseline;
+    background: rgba(78, 205, 196, 0.1);
+    padding: 0.5rem 1rem;
+    border-radius: 20px;
+    border: 1px solid rgba(78, 205, 196, 0.3);
+}
+
+.best-stats .label {
+    color: #ccc;
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.best-stats .value {
+    color: #fff;
+    font-weight: 700;
+    font-size: 1.2rem;
+}
+
+.best-canvas-wrapper {
+    padding: 1rem;
+    background: #151525;
+    border-radius: 12px;
+    border: 1px solid #3a3a4e;
+}
--- a/src/apps/SnakeAI/SnakeAI.tsx
+++ b/src/apps/SnakeAI/SnakeAI.tsx
@@ -0,0 +1,164 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import AppContainer from '../../components/AppContainer';
+import SnakeGrid from './SnakeGrid';
+import Controls from './Controls';
+import Stats from './Stats';
+import Tips from './Tips';
+import BestSnakeDisplay from './BestSnakeDisplay';
+import {
+    createPopulation,
+    evaluatePopulation,
+    evolveGeneration,
+    getBestIndividual,
+    getAverageFitness,
+    type Population,
+} from '../../lib/snakeAI/evolution';
+import type { EvolutionConfig } from '../../lib/snakeAI/types';
+import './SnakeAI.css';
+
+const DEFAULT_CONFIG: EvolutionConfig = {
+    populationSize: 25,
+    mutationRate: 0.1,
+    eliteCount: 5,
+    gridSize: 20,
+    maxGameSteps: 500,
+};
+
+export default function SnakeAI() {
+    const [population, setPopulation] = useState<Population>(() =>
+        createPopulation(DEFAULT_CONFIG)
+    );
+    const [config, setConfig] = useState<EvolutionConfig>(DEFAULT_CONFIG);
+    const [isRunning, setIsRunning] = useState(false);
+    const [speed, setSpeed] = useState(5);
+    const [gamesPlayed, setGamesPlayed] = useState(0);
+
+    // Compute derived values from population
+    const bestIndividual = getBestIndividual(population);
+    const averageFitness = getAverageFitness(population);
+
+    const animationFrameRef = useRef<number>();
+    const lastUpdateRef = useRef<number>(0);
+
+    const runGeneration = useCallback(() => {
+        setPopulation((prev) => {
+            try {
+                // Evaluate current generation
+                const evaluated = evaluatePopulation(prev, config);
+
+                // Evolve to next generation
+                const nextGen = evolveGeneration(evaluated, config);
+
+                return nextGen;
+            } catch (error) {
+                console.error("SnakeAI: Generation update failed", error);
+                return prev;
+            }
+        });
+    }, [config]);
+
+    // Update stats when generation changes
+    useEffect(() => {
+        if (population.generation > 1) {
+            setGamesPlayed((count) => count + config.populationSize);
+        }
+    }, [population.generation, config.populationSize]);
+
+    useEffect(() => {
+        if (!isRunning) {
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
+            return;
+        }
+
+        const animate = (timestamp: number) => {
+            const elapsed = timestamp - lastUpdateRef.current;
+
+            // Non-linear speed scaling:
+            // Speed 1: ~5000ms (5s) per generation - Observation mode
+            // Speed 5: ~1000ms (1s)
+            // Speed 20: ~50ms - Turbo training
+            // Formula: Base delay divided by speed, with a visual observation bias
+
+            let updateInterval;
+            if (speed <= 5) {
+                // Speeds 1-5: 10s down to 2s
+                updateInterval = 12000 / speed;
+            } else {
+                // Speeds 6-20: Linear fast
+                updateInterval = 1000 / (speed - 4);
+            }
+
+            if (elapsed >= updateInterval) {
+                runGeneration();
+                lastUpdateRef.current = timestamp;
+            }
+
+            animationFrameRef.current = requestAnimationFrame(animate);
+        };
+
+        animationFrameRef.current = requestAnimationFrame(animate);
+
+        return () => {
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
+        };
+    }, [isRunning, speed, runGeneration]);
+
+    const handleReset = () => {
+        setIsRunning(false);
+        setPopulation(createPopulation(config));
+        setGamesPlayed(0);
+    };
+
+    const handleMutationRateChange = (rate: number) => {
+        setConfig((prev) => ({ ...prev, mutationRate: rate }));
+    };
+
+    return (
+        <AppContainer title="Neural Network Snake Evolution">
+            <div className="snake-ai-layout">
+                <div className="left-panel">
+                    <BestSnakeDisplay
+                        network={population.bestNetworkEver}
+                        gridSize={config.gridSize}
+                        fitness={population.bestFitnessEver}
+                    />
+                    <SnakeGrid
+                        individuals={population.individuals}
+                        gridSize={config.gridSize}
+                        count={config.populationSize}
+                        columns={5}
+                    />
+
+                </div>
+
+                <div className="right-panel">
+                    <Controls
+                        isRunning={isRunning}
+                        onToggleRunning={() => setIsRunning(!isRunning)}
+                        onReset={handleReset}
+                        speed={speed}
+                        onSpeedChange={setSpeed}
+                        mutationRate={config.mutationRate}
+                        onMutationRateChange={handleMutationRateChange}
+                        populationSize={config.populationSize}
+                    />
+
+                    <Stats
+                        generation={population.generation}
+                        bestFitness={bestIndividual.fitness}
+                        bestFitnessEver={population.bestFitnessEver}
+                        averageFitness={averageFitness}
+                        gamesPlayed={gamesPlayed}
+                    />
+
+                    <Tips />
+
+                </div>
+            </div>
+        </AppContainer>
+    );
+}
--- a/src/apps/SnakeAI/SnakeCanvas.tsx
+++ b/src/apps/SnakeAI/SnakeCanvas.tsx
@@ -0,0 +1,196 @@
+import { useRef, useEffect, useState } from 'react';
+import type { GameState } from '../../lib/snakeAI/game';
+import { createGame, step, getInputs } from '../../lib/snakeAI/game';
+import { getAction, type Network } from '../../lib/snakeAI/network';
+
+interface SnakeCanvasProps {
+    network: Network | null;
+    gridSize: number;
+    showGrid?: boolean;
+    size?: 'small' | 'normal' | 'large';
+    showStats?: boolean; // Show score/length/steps even in small mode
+}
+
+const CELL_SIZES = {
+    small: 8,
+    normal: 20,
+    large: 30,
+};
+
+const CANVAS_PADDING = 10;
+
+export default function SnakeCanvas({ network, gridSize, showGrid = true, size = 'normal', showStats = false }: SnakeCanvasProps) {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    const [currentGame, setCurrentGame] = useState<GameState | null>(null);
+    const animationFrameRef = useRef<number>();
+    const lastUpdateRef = useRef<number>(0);
+
+    const CELL_SIZE = CELL_SIZES[size];
+
+    // Initialize game when network or gridSize changes
+    useEffect(() => {
+        if (network) {
+            setCurrentGame(createGame(gridSize));
+        }
+    }, [network, gridSize]);
+
+    // Animation loop to step through game
+    useEffect(() => {
+        if (!network || !currentGame) return;
+
+        const STEPS_PER_SECOND = 10; // Speed of game playback
+        const UPDATE_INTERVAL = 1000 / STEPS_PER_SECOND;
+
+        const animate = (timestamp: number) => {
+            const elapsed = timestamp - lastUpdateRef.current;
+
+            if (elapsed >= UPDATE_INTERVAL) {
+                setCurrentGame((prevGame) => {
+                    if (!prevGame) return prevGame;
+
+                    // If game is over, start a new one
+                    if (!prevGame.alive) {
+                        return createGame(gridSize);
+                    }
+
+                    // Get neural network decision
+                    const inputs = getInputs(prevGame);
+                    const action = getAction(network, inputs);
+
+                    // Step the game forward
+                    return step(prevGame, action);
+                });
+
+                lastUpdateRef.current = timestamp;
+            }
+
+            animationFrameRef.current = requestAnimationFrame(animate);
+        };
+
+        animationFrameRef.current = requestAnimationFrame(animate);
+
+        return () => {
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
+        };
+    }, [network, currentGame, gridSize]);
+
+    // Set canvas size once when props change (not on every render)
+    useEffect(() => {
+        if (!canvasRef.current) return;
+        const canvas = canvasRef.current;
+        const canvasSize = gridSize * CELL_SIZE + CANVAS_PADDING * 2;
+        canvas.width = canvasSize;
+        canvas.height = canvasSize;
+    }, [gridSize, size]);
+
+    // Render game to canvas
+    useEffect(() => {
+        if (!currentGame || !canvasRef.current) return;
+
+        const canvas = canvasRef.current;
+        const ctx = canvas.getContext('2d');
+        if (!ctx) return;
+
+        const canvasSize = gridSize * CELL_SIZE + CANVAS_PADDING * 2;
+
+        // Clear canvas
+        ctx.fillStyle = '#1a1a2e';
+        ctx.fillRect(0, 0, canvasSize, canvasSize);
+
+        // Draw grid
+        if (showGrid) {
+            ctx.strokeStyle = '#2a2a3e';
+            ctx.lineWidth = 1;
+            for (let i = 0; i <= currentGame.gridSize; i++) {
+                const pos = i * CELL_SIZE + CANVAS_PADDING;
+                ctx.beginPath();
+                ctx.moveTo(pos, CANVAS_PADDING);
+                ctx.lineTo(pos, currentGame.gridSize * CELL_SIZE + CANVAS_PADDING);
+                ctx.stroke();
+                ctx.beginPath();
+                ctx.moveTo(CANVAS_PADDING, pos);
+                ctx.lineTo(currentGame.gridSize * CELL_SIZE + CANVAS_PADDING, pos);
+                ctx.stroke();
+            }
+        }
+
+        // Draw food
+        ctx.fillStyle = '#ff6b6b';
+        ctx.shadowBlur = 15;
+        ctx.shadowColor = '#ff6b6b';
+        const foodX = currentGame.food.x * CELL_SIZE + CANVAS_PADDING + CELL_SIZE / 2;
+        const foodY = currentGame.food.y * CELL_SIZE + CANVAS_PADDING + CELL_SIZE / 2;
+        ctx.beginPath();
+        ctx.arc(foodX, foodY, CELL_SIZE / 3, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.shadowBlur = 0;
+
+        // Draw snake
+        currentGame.snake.forEach((segment, index) => {
+            const x = segment.x * CELL_SIZE + CANVAS_PADDING;
+            const y = segment.y * CELL_SIZE + CANVAS_PADDING;
+
+            if (index === 0) {
+                // Head - brighter and larger
+                ctx.fillStyle = currentGame.alive ? '#4ecdc4' : '#e74c3c';
+                ctx.shadowBlur = 10;
+                ctx.shadowColor = currentGame.alive ? '#4ecdc4' : '#e74c3c';
+            } else {
+                // Body - gradient from head to tail
+                const alpha = 1 - (index / currentGame.snake.length) * 0.5;
+                ctx.fillStyle = `rgba(78, 205, 196, ${alpha})`;
+                ctx.shadowBlur = 0;
+            }
+
+            ctx.fillRect(x + 2, y + 2, CELL_SIZE - 4, CELL_SIZE - 4);
+        });
+
+        ctx.shadowBlur = 0;
+
+        // Draw death overlay if dead
+        if (!currentGame.alive) {
+            ctx.fillStyle = 'rgba(231, 76, 60, 0.2)';
+            ctx.fillRect(0, 0, canvasSize, canvasSize);
+
+            ctx.fillStyle = '#e74c3c';
+            ctx.font = `bold ${size === 'small' ? '16' : '24'}px Inter, sans-serif`;
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillText('DEAD', canvasSize / 2, canvasSize / 2);
+        }
+    }, [currentGame, showGrid]);
+
+    // Calculate canvas size from props, not state, to prevent shaking
+    const canvasSize = gridSize * CELL_SIZE + CANVAS_PADDING * 2;
+
+    return (
+        <div className="snake-canvas-container">
+            <canvas
+                ref={canvasRef}
+                width={canvasSize}
+                height={canvasSize}
+                style={{
+                    width: `${canvasSize}px`,
+                    height: `${canvasSize}px`,
+                    border: '2px solid #3a3a4e',
+                    borderRadius: '8px',
+                    backgroundColor: '#1a1a2e',
+                }}
+            />
+            {currentGame && (size !== 'small' || showStats) && (
+                <div className="canvas-info" style={size === 'small' ? { fontSize: '0.7rem', gap: '0.5rem', padding: '0.4rem 0.8rem' } : {}}>
+                    <div className="info-item">
+                        <span className="label">Score:</span>
+                        <span className="value" style={{ fontVariantNumeric: 'tabular-nums', minWidth: '2ch', display: 'inline-block' }}>{currentGame.score}</span>
+                    </div>
+                    <div className="info-item">
+                        <span className="label">Steps:</span>
+                        <span className="value" style={{ fontVariantNumeric: 'tabular-nums', minWidth: '3ch', display: 'inline-block' }}>{currentGame.steps}</span>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}
--- a/src/apps/SnakeAI/SnakeGrid.tsx
+++ b/src/apps/SnakeAI/SnakeGrid.tsx
@@ -0,0 +1,38 @@
+import SnakeCanvas from './SnakeCanvas';
+import type { Individual } from '../../lib/snakeAI/evolution';
+
+interface SnakeGridProps {
+    individuals: Individual[];
+    gridSize: number;
+    count?: number; // How many snakes to show (default: 9)
+    columns?: number; // Number of columns in grid (default: 3)
+}
+
+export default function SnakeGrid({ individuals, gridSize, count = 9, columns = 3 }: SnakeGridProps) {
+    // Take the top N individuals (sorted by fitness)
+    const topIndividuals = [...individuals]
+        .sort((a, b) => b.fitness - a.fitness)
+        .slice(0, count);
+
+    return (
+        <div className="snake-grid" style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
+            {topIndividuals.map((individual, index) => (
+                <div key={index} className={`snake-grid-cell ${index === 0 ? 'best' : ''}`}>
+                    <div className="snake-grid-label">
+                        #{index + 1}
+                        {individual.fitness > 0 && (
+                            <span className="fitness-badge">{Math.round(individual.fitness)}</span>
+                        )}
+                    </div>
+                    <SnakeCanvas
+                        network={individual.network}
+                        gridSize={gridSize}
+                        size="small"
+                        showGrid={false}
+                        showStats={true}
+                    />
+                </div>
+            ))}
+        </div>
+    );
+}
--- a/src/apps/SnakeAI/Stats.tsx
+++ b/src/apps/SnakeAI/Stats.tsx
@@ -0,0 +1,62 @@
+interface StatsProps {
+    generation: number;
+    bestFitness: number;
+    bestFitnessEver: number;
+    averageFitness: number;
+    gamesPlayed: number;
+}
+
+export default function Stats({
+    generation,
+    bestFitness,
+    bestFitnessEver,
+    averageFitness,
+    gamesPlayed,
+}: StatsProps) {
+    return (
+        <div className="stats-panel">
+            <h3>Evolution Statistics</h3>
+
+            <div className="stat-grid">
+                <div className="stat-item highlight">
+                    <div className="stat-label">Generation</div>
+                    <div className="stat-value">{generation}</div>
+                </div>
+
+                <div className="stat-item highlight">
+                    <div className="stat-label">Best Ever</div>
+                    <div className="stat-value">{Math.round(bestFitnessEver)}</div>
+                </div>
+
+                <div className="stat-item">
+                    <div className="stat-label">Current Best</div>
+                    <div className="stat-value">{Math.round(bestFitness)}</div>
+                </div>
+
+                <div className="stat-item">
+                    <div className="stat-label">Average</div>
+                    <div className="stat-value">{Math.round(averageFitness)}</div>
+                </div>
+
+                <div className="stat-item">
+                    <div className="stat-label">Games Played</div>
+                    <div className="stat-value">{gamesPlayed.toLocaleString()}</div>
+                </div>
+            </div>
+
+            <div className="progress-indicator">
+                <div className="progress-label">
+                    Improvement: {bestFitnessEver > 0 ? ((bestFitness / bestFitnessEver) * 100).toFixed(1) : 0}%
+                </div>
+                <div className="progress-bar">
+                    <div
+                        className="progress-fill"
+                        style={{
+                            width: `${bestFitnessEver > 0 ? Math.min(100, (bestFitness / bestFitnessEver) * 100) : 0}%`,
+                        }}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+}
--- a/src/apps/SnakeAI/Tips.tsx
+++ b/src/apps/SnakeAI/Tips.tsx
@@ -0,0 +1,54 @@
+export default function Tips() {
+    return (
+        <div className="tips-panel">
+            <h3>How It Works</h3>
+
+            <div className="tip-section">
+                <h4>🧠 Neural Network</h4>
+                <p>
+                    Each snake is controlled by a neural network with <strong>8 inputs</strong>:
+                </p>
+                <ul>
+                    <li>Direction to food (X and Y)</li>
+                    <li>Danger sensors (up, down, left, right)</li>
+                    <li>Current direction</li>
+                    <li>Snake length</li>
+                </ul>
+                <p>
+                    The network outputs <strong>3 actions</strong>: turn left, go straight, or turn right.
+                </p>
+            </div>
+
+            <div className="tip-section">
+                <h4>🧬 Evolution Process</h4>
+                <ol>
+                    <li><strong>Play:</strong> All snakes play until they die</li>
+                    <li><strong>Evaluate:</strong> Calculate fitness score</li>
+                    <li><strong>Select:</strong> Best performers become parents</li>
+                    <li><strong>Reproduce:</strong> Create new generation via crossover and mutation</li>
+                    <li><strong>Repeat:</strong> New generation plays the game</li>
+                </ol>
+            </div>
+
+            <div className="tip-section">
+                <h4>📊 Fitness Function</h4>
+                <p>Snakes are scored based on:</p>
+                <ul>
+                    <li><strong>Food collected</strong> × 100 (primary goal)</li>
+                    <li><strong>Survival time</strong> × 1 (stay alive)</li>
+                    <li><strong>Snake length</strong> × 10 (growth bonus)</li>
+                </ul>
+            </div>
+
+            <div className="tip-section">
+                <h4>💡 Tips for Best Results</h4>
+                <ul>
+                    <li>Higher mutation rate = more exploration</li>
+                    <li>Lower mutation rate = refine existing strategies</li>
+                    <li>Evolution improves around generation 10-20</li>
+                    <li>Watch for emergent behaviors and patterns!</li>
+                </ul>
+            </div>
+        </div>
+    );
+}
--- a/src/assets/react.svg
+++ b/src/assets/react.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="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/src/components/AppContainer.css
+++ b/src/components/AppContainer.css
@@ -0,0 +1,28 @@
+.app-container {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    background: var(--bg-dark);
+}
+
+.app-header {
+    padding: 2rem 3rem;
+    background: rgba(255, 255, 255, 0.02);
+    border-bottom: 1px solid var(--border-color);
+}
+
+.app-title {
+    margin: 0;
+    font-size: 2rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.app-content {
+    flex: 1;
+    padding: 2rem 3rem;
+    overflow-y: auto;
+}
--- a/src/components/AppContainer.tsx
+++ b/src/components/AppContainer.tsx
@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import './AppContainer.css';
+
+interface AppContainerProps {
+    title: string;
+    children: ReactNode;
+}
+
+export default function AppContainer({ title, children }: AppContainerProps) {
+    return (
+        <div className="app-container">
+            <header className="app-header">
+                <h2 className="app-title">{title}</h2>
+            </header>
+            <div className="app-content">{children}</div>
+        </div>
+    );
+}
--- a/src/components/Sidebar.css
+++ b/src/components/Sidebar.css
@@ -0,0 +1,92 @@
+.sidebar {
+  width: 280px;
+  height: 100vh;
+  background: var(--bg-darker);
+  border-right: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  padding: 2rem 0;
+  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
+}
+
+.sidebar-header {
+  padding: 0 1.5rem 2rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.sidebar-logo {
+  font-size: 1.75rem;
+  font-weight: 700;
+  margin: 0;
+  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.sidebar-tagline {
+  margin: 0.25rem 0 0;
+  font-size: 0.875rem;
+  color: rgba(255, 255, 255, 0.5);
+  font-weight: 300;
+}
+
+.sidebar-nav {
+  flex: 1;
+  padding: 2rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem 1.25rem;
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  color: rgba(255, 255, 255, 0.7);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  font-size: 1rem;
+  text-align: left;
+}
+
+.nav-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: var(--primary);
+  color: rgba(255, 255, 255, 0.9);
+  transform: translateX(4px);
+}
+
+.nav-item.active {
+  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
+  border-color: var(--primary);
+  color: #fff;
+  box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3);
+}
+
+.nav-icon {
+  font-size: 1.5rem;
+  line-height: 1;
+}
+
+.nav-name {
+  font-weight: 500;
+}
+
+.sidebar-footer {
+  padding: 0 1.5rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  padding-top: 1.5rem;
+}
+
+.footer-text {
+  margin: 0;
+  font-size: 0.75rem;
+  color: rgba(255, 255, 255, 0.4);
+  text-align: center;
+  font-style: italic;
+}
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -0,0 +1,59 @@
+import './Sidebar.css';
+
+export type AppId = 'image-approx' | 'snake-ai';
+
+export interface AppInfo {
+  id: AppId;
+  name: string;
+  icon: string;
+  description: string;
+}
+
+export const APPS: AppInfo[] = [
+  {
+    id: 'image-approx',
+    name: 'Image Approximation',
+    icon: '🎨',
+    description: 'Evolve triangles to approximate images',
+  },
+  {
+    id: 'snake-ai',
+    name: 'Neural Network Snake',
+    icon: '🐍',
+    description: 'Evolve neural networks to play Snake',
+  },
+];
+
+interface SidebarProps {
+  currentApp: AppId;
+  onAppChange: (appId: AppId) => void;
+}
+
+export default function Sidebar({ currentApp, onAppChange }: SidebarProps) {
+  return (
+    <aside className="sidebar">
+      <div className="sidebar-header">
+        <h1 className="sidebar-logo">🧬 Evolution</h1>
+        <p className="sidebar-tagline">Mini-Apps</p>
+      </div>
+
+      <nav className="sidebar-nav">
+        {APPS.map((app) => (
+          <button
+            key={app.id}
+            className={`nav-item ${currentApp === app.id ? 'active' : ''}`}
+            onClick={() => onAppChange(app.id)}
+            title={app.description}
+          >
+            <span className="nav-icon">{app.icon}</span>
+            <span className="nav-name">{app.name}</span>
+          </button>
+        ))}
+      </nav>
+
+      <div className="sidebar-footer">
+        <p className="footer-text">Select an app to begin</p>
+      </div>
+    </aside>
+  );
+}
--- a/src/index.css
+++ b/src/index.css
@@ -0,0 +1,55 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+:root {
+  /* Color palette - lighter, less dark */
+  --primary: #6366f1;
+  --primary-dark: #4f46e5;
+  --primary-light: #818cf8;
+  --accent: #8b5cf6;
+  --bg-dark: #1a1a2e;
+  --bg-darker: #0f1729;
+  --bg-card: rgba(255, 255, 255, 0.05);
+  --text-primary: rgba(255, 255, 255, 0.95);
+  --text-secondary: rgba(255, 255, 255, 0.7);
+  --text-muted: rgba(255, 255, 255, 0.5);
+  --border-color: rgba(255, 255, 255, 0.12);
+
+  /* Typography */
+  font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  line-height: 1.6;
+  font-weight: 400;
+  color: var(--text-primary);
+
+  /* Rendering */
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  margin: 0;
+  background: var(--bg-dark);
+  color: var(--text-primary);
+  overflow: hidden;
+}
+
+#root {
+  width: 100vw;
+  height: 100vh;
+}
+
+button {
+  font-family: inherit;
+  cursor: pointer;
+}
+
+input {
+  font-family: inherit;
+}
--- a/src/lib/imageApprox/evolution.ts
+++ b/src/lib/imageApprox/evolution.ts
@@ -0,0 +1,61 @@
+import type { Genome } from './genome';
+import { mutateGenome } from './mutation';
+import { renderGenome } from './renderer';
+import { calculateFitness } from './fitness';
+
+export interface EvolutionConfig {
+  width: number;
+  height: number;
+  mutationStrength: number;
+  childrenCount: number;
+  sampleStep: number;
+}
+
+export interface EvolutionResult {
+  genome: Genome;
+  fitness: number;
+  improved: boolean;
+}
+
+export function evolve(
+  parent: Genome,
+  parentFitness: number,
+  targetData: ImageData,
+  config: EvolutionConfig,
+  offscreenCanvas: HTMLCanvasElement
+): EvolutionResult {
+  const ctx = offscreenCanvas.getContext('2d');
+  if (!ctx) {
+    return { genome: parent, fitness: parentFitness, improved: false };
+  }
+
+  let bestGenome = parent;
+  let bestFitness = parentFitness;
+  let improved = false;
+
+  // Generate and evaluate λ (lambda) children
+  for (let i = 0; i < config.childrenCount; i++) {
+    const child = mutateGenome(
+      parent,
+      config.mutationStrength,
+      config.width,
+      config.height
+    );
+
+    // Render child to offscreen canvas
+    renderGenome(ctx, child, config.width, config.height);
+    const childData = ctx.getImageData(0, 0, config.width, config.height);
+
+    // Evaluate fitness
+    const childFitness = calculateFitness(targetData, childData, config.sampleStep);
+
+    // Keep if better (lower error)
+    if (childFitness < bestFitness) {
+      bestGenome = child;
+      bestFitness = childFitness;
+      improved = true;
+    }
+  }
+
+  return { genome: bestGenome, fitness: bestFitness, improved };
+}
--- a/src/lib/imageApprox/fitness.ts
+++ b/src/lib/imageApprox/fitness.ts
@@ -0,0 +1,29 @@
+/**
+ * Calculate fitness using mean squared error on RGB channels
+ * @param targetData - ImageData from target image
+ * @param candidateData - ImageData from candidate genome
+ * @param sampleStep - Sample every N pixels for performance (1 = sample all)
+ * @returns Fitness score (lower is better)
+ */
+export function calculateFitness(
+  targetData: ImageData,
+  candidateData: ImageData,
+  sampleStep: number = 1
+): number {
+  const target = targetData.data;
+  const candidate = candidateData.data;
+
+  let totalError = 0;
+  let sampleCount = 0;
+
+  for (let i = 0; i < target.length; i += 4 * sampleStep) {
+    const rDiff = target[i] - candidate[i];
+    const gDiff = target[i + 1] - candidate[i + 1];
+    const bDiff = target[i + 2] - candidate[i + 2];
+
+    totalError += rDiff * rDiff + gDiff * gDiff + bDiff * bDiff;
+    sampleCount++;
+  }
+
+  return totalError / sampleCount;
+}
--- a/src/lib/imageApprox/genome.ts
+++ b/src/lib/imageApprox/genome.ts
@@ -0,0 +1,43 @@
+export interface Triangle {
+  x1: number;
+  y1: number;
+  x2: number;
+  y2: number;
+  x3: number;
+  y3: number;
+  r: number;
+  g: number;
+  b: number;
+  a: number;
+}
+
+export type Genome = Triangle[];
+
+export function createRandomGenome(
+  width: number,
+  height: number,
+  count: number
+): Genome {
+  const genome: Genome = [];
+
+  for (let i = 0; i < count; i++) {
+    genome.push({
+      x1: Math.random() * width,
+      y1: Math.random() * height,
+      x2: Math.random() * width,
+      y2: Math.random() * height,
+      x3: Math.random() * width,
+      y3: Math.random() * height,
+      r: Math.floor(Math.random() * 256),
+      g: Math.floor(Math.random() * 256),
+      b: Math.floor(Math.random() * 256),
+      a: Math.random(),
+    });
+  }
+
+  return genome;
+}
+
+export function cloneGenome(genome: Genome): Genome {
+  return genome.map((triangle) => ({ ...triangle }));
+}
--- a/src/lib/imageApprox/mutation.ts
+++ b/src/lib/imageApprox/mutation.ts
@@ -0,0 +1,85 @@
+import type { Genome, Triangle } from './genome';
+import { cloneGenome } from './genome';
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}
+
+function mutateTriangle(
+  triangle: Triangle,
+  strength: number,
+  width: number,
+  height: number
+): Triangle {
+  const mutated = { ...triangle };
+
+  // Occasionally replace entire triangle (15% chance - increased from 10%)
+  if (Math.random() < 0.15) {
+    return {
+      x1: Math.random() * width,
+      y1: Math.random() * height,
+      x2: Math.random() * width,
+      y2: Math.random() * height,
+      x3: Math.random() * width,
+      y3: Math.random() * height,
+      r: Math.floor(Math.random() * 256),
+      g: Math.floor(Math.random() * 256),
+      b: Math.floor(Math.random() * 256),
+      a: Math.random(),
+    };
+  }
+
+  // Otherwise, perturb existing values
+  const mutationType = Math.random();
+
+  if (mutationType < 0.5) {
+    // Mutate vertex positions - allow bigger jumps
+    const vertexChoice = Math.floor(Math.random() * 3);
+    // Occasional large jump (20% of the time)
+    const multiplier = Math.random() < 0.2 ? 30 : 15;
+    const delta = (Math.random() - 0.5) * 2 * strength * multiplier;
+
+    if (vertexChoice === 0) {
+      mutated.x1 = clamp(mutated.x1 + delta, 0, width);
+      mutated.y1 = clamp(mutated.y1 + delta, 0, height);
+    } else if (vertexChoice === 1) {
+      mutated.x2 = clamp(mutated.x2 + delta, 0, width);
+      mutated.y2 = clamp(mutated.y2 + delta, 0, height);
+    } else {
+      mutated.x3 = clamp(mutated.x3 + delta, 0, width);
+      mutated.y3 = clamp(mutated.y3 + delta, 0, height);
+    }
+  } else {
+    // Mutate color/alpha - more aggressive
+    const colorMultiplier = Math.random() < 0.2 ? 100 : 50;
+    const colorDelta = (Math.random() - 0.5) * 2 * strength * colorMultiplier;
+    const colorChoice = Math.floor(Math.random() * 4);
+
+    if (colorChoice === 0) {
+      mutated.r = clamp(Math.floor(mutated.r + colorDelta), 0, 255);
+    } else if (colorChoice === 1) {
+      mutated.g = clamp(Math.floor(mutated.g + colorDelta), 0, 255);
+    } else if (colorChoice === 2) {
+      mutated.b = clamp(Math.floor(mutated.b + colorDelta), 0, 255);
+    } else {
+      mutated.a = clamp(mutated.a + (Math.random() - 0.5) * 2 * strength * 0.3, 0, 1);
+    }
+  }
+
+  return mutated;
+}
+
+export function mutateGenome(
+  genome: Genome,
+  strength: number,
+  width: number,
+  height: number
+): Genome {
+  const mutated = cloneGenome(genome);
+
+  // Randomly select one triangle to mutate
+  const index = Math.floor(Math.random() * mutated.length);
+  mutated[index] = mutateTriangle(mutated[index], strength, width, height);
+
+  return mutated;
+}
--- a/src/lib/imageApprox/renderer.ts
+++ b/src/lib/imageApprox/renderer.ts
@@ -0,0 +1,24 @@
+import type { Genome } from './genome';
+
+export function renderGenome(
+  ctx: CanvasRenderingContext2D,
+  genome: Genome,
+  width: number,
+  height: number
+): void {
+  // Clear canvas
+  ctx.fillStyle = '#000';
+  ctx.fillRect(0, 0, width, height);
+
+  // Draw each triangle
+  for (const triangle of genome) {
+    ctx.beginPath();
+    ctx.moveTo(triangle.x1, triangle.y1);
+    ctx.lineTo(triangle.x2, triangle.y2);
+    ctx.lineTo(triangle.x3, triangle.y3);
+    ctx.closePath();
+
+    ctx.fillStyle = `rgba(${triangle.r}, ${triangle.g}, ${triangle.b}, ${triangle.a})`;
+    ctx.fill();
+  }
+}
--- a/src/lib/snakeAI/evolution.ts
+++ b/src/lib/snakeAI/evolution.ts
@@ -0,0 +1,234 @@
+import { createNetwork, cloneNetwork, getAction, type Network } from './network';
+import { createGame, step, getInputs, calculateFitness, type GameState } from './game';
+import type { EvolutionConfig } from './types';
+
+export interface Individual {
+  network: Network;
+  fitness: number;
+  game: GameState;
+}
+
+export interface Population {
+  individuals: Individual[];
+  generation: number;
+  bestFitnessEver: number;
+  bestNetworkEver: Network | null;
+}
+
+export function createPopulation(config: EvolutionConfig): Population {
+  const individuals: Individual[] = [];
+  
+  for (let i = 0; i < config.populationSize; i++) {
+    individuals.push({
+      network: createNetwork(),
+      fitness: 0,
+      game: createGame(config.gridSize),
+    });
+  }
+
+  return {
+    individuals,
+    generation: 1,
+    bestFitnessEver: 0,
+    bestNetworkEver: null,
+  };
+}
+
+export function evaluatePopulation(
+  population: Population,
+  config: EvolutionConfig
+): Population {
+  // Create a working copy of individuals to avoid mutating state
+  const evaluatedIndividuals = population.individuals.map(ind => ({ ...ind }));
+
+  // Play each individual's game to completion or max steps
+  for (const individual of evaluatedIndividuals) {
+    let game = individual.game;
+    
+    while (game.alive && game.steps < config.maxGameSteps) {
+      const inputs = getInputs(game);
+      const action = getAction(individual.network, inputs);
+      game = step(game, action);
+    }
+    
+    individual.game = game;
+    individual.fitness = calculateFitness(game);
+  }
+
+  // Update best ever
+  let newBestEver = population.bestFitnessEver;
+  let newBestNetwork = population.bestNetworkEver;
+
+  for (const individual of evaluatedIndividuals) {
+    if (individual.fitness > newBestEver) {
+      newBestEver = individual.fitness;
+      newBestNetwork = cloneNetwork(individual.network);
+    }
+  }
+
+  return {
+    ...population,
+    individuals: evaluatedIndividuals,
+    bestFitnessEver: newBestEver,
+    bestNetworkEver: newBestNetwork,
+  };
+}
+
+export function evolveGeneration(
+  population: Population,
+  config: EvolutionConfig
+): Population {
+  // Sort by fitness (descending)
+  const sorted = [...population.individuals].sort((a, b) => b.fitness - a.fitness);
+
+  const newIndividuals: Individual[] = [];
+
+  // Elite preservation (top performers survive unchanged)
+  for (let i = 0; i < config.eliteCount; i++) {
+    newIndividuals.push({
+      network: cloneNetwork(sorted[i].network),
+      fitness: 0,
+      game: createGame(config.gridSize),
+    });
+  }
+
+  // Fill rest with offspring
+  while (newIndividuals.length < config.populationSize) {
+    const parent1 = selectParent(sorted);
+    const parent2 = selectParent(sorted);
+
+    let childNetwork: Network;
+
+    if (Math.random() < 0.7) {
+      // 70% chance of crossover
+      childNetwork = crossover(parent1.network, parent2.network);
+    } else {
+      // 30% chance of just cloning
+      childNetwork = cloneNetwork(parent1.network);
+    }
+
+    // Mutate
+    childNetwork = mutate(childNetwork, config.mutationRate);
+
+    newIndividuals.push({
+      network: childNetwork,
+      fitness: 0,
+      game: createGame(config.gridSize),
+    });
+  }
+
+  return {
+    individuals: newIndividuals,
+    generation: population.generation + 1,
+    bestFitnessEver: population.bestFitnessEver,
+    bestNetworkEver: population.bestNetworkEver,
+  };
+}
+
+function selectParent(sorted: Individual[]): Individual {
+  // Tournament selection: pick best of 3 random individuals
+  const tournamentSize = 3;
+  let best = sorted[Math.floor(Math.random() * Math.min(sorted.length, 20))];
+
+  for (let i = 1; i < tournamentSize; i++) {
+    const competitor = sorted[Math.floor(Math.random() * Math.min(sorted.length, 20))];
+    if (competitor.fitness > best.fitness) {
+      best = competitor;
+    }
+  }
+
+  return best;
+}
+
+function crossover(parent1: Network, parent2: Network): Network {
+  const child = cloneNetwork(parent1);
+
+  // Single-point crossover on weights and biases
+  const crossoverRate = 0.5;
+
+  // Crossover input-hidden weights
+  for (let i = 0; i < child.weightsIH.length; i++) {
+    for (let j = 0; j < child.weightsIH[i].length; j++) {
+      if (Math.random() < crossoverRate) {
+        child.weightsIH[i][j] = parent2.weightsIH[i][j];
+      }
+    }
+  }
+
+  // Crossover hidden-output weights
+  for (let i = 0; i < child.weightsHO.length; i++) {
+    for (let j = 0; j < child.weightsHO[i].length; j++) {
+      if (Math.random() < crossoverRate) {
+        child.weightsHO[i][j] = parent2.weightsHO[i][j];
+      }
+    }
+  }
+
+  // Crossover biases
+  for (let i = 0; i < child.biasH.length; i++) {
+    if (Math.random() < crossoverRate) {
+      child.biasH[i] = parent2.biasH[i];
+    }
+  }
+
+  for (let i = 0; i < child.biasO.length; i++) {
+    if (Math.random() < crossoverRate) {
+      child.biasO[i] = parent2.biasO[i];
+    }
+  }
+
+  return child;
+}
+
+function mutate(network: Network, mutationRate: number): Network {
+  const mutated = cloneNetwork(network);
+
+  // Mutate input-hidden weights
+  for (let i = 0; i < mutated.weightsIH.length; i++) {
+    for (let j = 0; j < mutated.weightsIH[i].length; j++) {
+      if (Math.random() < mutationRate) {
+        mutated.weightsIH[i][j] += (Math.random() * 2 - 1) * 0.5;
+        // Clamp to reasonable range
+        mutated.weightsIH[i][j] = Math.max(-2, Math.min(2, mutated.weightsIH[i][j]));
+      }
+    }
+  }
+
+  // Mutate hidden-output weights
+  for (let i = 0; i < mutated.weightsHO.length; i++) {
+    for (let j = 0; j < mutated.weightsHO[i].length; j++) {
+      if (Math.random() < mutationRate) {
+        mutated.weightsHO[i][j] += (Math.random() * 2 - 1) * 0.5;
+        mutated.weightsHO[i][j] = Math.max(-2, Math.min(2, mutated.weightsHO[i][j]));
+      }
+    }
+  }
+
+  // Mutate biases
+  for (let i = 0; i < mutated.biasH.length; i++) {
+    if (Math.random() < mutationRate) {
+      mutated.biasH[i] += (Math.random() * 2 - 1) * 0.5;
+      mutated.biasH[i] = Math.max(-2, Math.min(2, mutated.biasH[i]));
+    }
+  }
+
+  for (let i = 0; i < mutated.biasO.length; i++) {
+    if (Math.random() < mutationRate) {
+      mutated.biasO[i] += (Math.random() * 2 - 1) * 0.5;
+      mutated.biasO[i] = Math.max(-2, Math.min(2, mutated.biasO[i]));
+    }
+  }
+
+  return mutated;
+}
+
+export function getBestIndividual(population: Population): Individual {
+  return population.individuals.reduce((best, current) =>
+    current.fitness > best.fitness ? current : best
+  );
+}
+
+export function getAverageFitness(population: Population): number {
+  const sum = population.individuals.reduce((acc, ind) => acc + ind.fitness, 0);
+  return sum / population.individuals.length;
+}
--- a/src/lib/snakeAI/game.ts
+++ b/src/lib/snakeAI/game.ts
@@ -0,0 +1,179 @@
+import { Direction, Action, type Position } from './types';
+
+export interface GameState {
+  snake: Position[];
+  food: Position;
+  direction: Direction;
+  score: number;
+  steps: number;
+  stepsSinceLastFood: number;
+  alive: boolean;
+  gridSize: number;
+}
+
+export function createGame(gridSize: number = 20): GameState {
+  const center = Math.floor(gridSize / 2);
+  return {
+    snake: [
+      { x: center, y: center },
+      { x: center - 1, y: center },
+      { x: center - 2, y: center },
+    ],
+    food: spawnFood(gridSize, [
+      { x: center, y: center },
+      { x: center - 1, y: center },
+      { x: center - 2, y: center },
+    ]),
+    direction: Direction.RIGHT,
+    score: 0,
+    steps: 0,
+    stepsSinceLastFood: 0,
+    alive: true,
+    gridSize,
+  };
+}
+
+export function step(state: GameState, action: Action): GameState {
+  if (!state.alive) return state;
+
+  const STARVATION_LIMIT = 200; // Die if no food for 200 steps
+
+  // Update direction based on action (turn left/right or go straight)
+  const newDirection = (state.direction + action + 4) % 4;
+
+  // Calculate new head position
+  const head = state.snake[0];
+  let newHead: Position;
+
+  switch (newDirection) {
+    case Direction.UP:
+      newHead = { x: head.x, y: head.y - 1 };
+      break;
+    case Direction.DOWN:
+      newHead = { x: head.x, y: head.y + 1 };
+      break;
+    case Direction.LEFT:
+      newHead = { x: head.x - 1, y: head.y };
+      break;
+    case Direction.RIGHT:
+      newHead = { x: head.x + 1, y: head.y };
+      break;
+    default:
+      newHead = head;
+  }
+
+  // Check wall collision
+  if (
+    newHead.x < 0 ||
+    newHead.x >= state.gridSize ||
+    newHead.y < 0 ||
+    newHead.y >= state.gridSize
+  ) {
+    return { ...state, alive: false, steps: state.steps + 1, stepsSinceLastFood: state.stepsSinceLastFood + 1 };
+  }
+
+  // Check self-collision
+  if (state.snake.some((seg) => seg.x === newHead.x && seg.y === newHead.y)) {
+    return { ...state, alive: false, steps: state.steps + 1, stepsSinceLastFood: state.stepsSinceLastFood + 1 };
+  }
+
+  // Check starvation (no food for too long)
+  if (state.stepsSinceLastFood >= STARVATION_LIMIT) {
+    return { ...state, alive: false, steps: state.steps + 1, stepsSinceLastFood: state.stepsSinceLastFood + 1 };
+  }
+
+  // Create new snake body
+  const newSnake = [newHead, ...state.snake];
+
+  // Check if food was eaten
+  const ateFood = newHead.x === state.food.x && newHead.y === state.food.y;
+
+  if (ateFood) {
+    // Grow snake, spawn new food, reset starvation counter
+    return {
+      ...state,
+      snake: newSnake,
+      food: spawnFood(state.gridSize, newSnake),
+      direction: newDirection,
+      score: state.score + 1,
+      steps: state.steps + 1,
+      stepsSinceLastFood: 0,
+    };
+  } else {
+    // Remove tail (no growth), increment starvation counter
+    newSnake.pop();
+    return {
+      ...state,
+      snake: newSnake,
+      direction: newDirection,
+      steps: state.steps + 1,
+      stepsSinceLastFood: state.stepsSinceLastFood + 1,
+    };
+  }
+}
+
+function spawnFood(gridSize: number, snake: Position[]): Position {
+  let food: Position;
+  let attempts = 0;
+  const maxAttempts = 1000;
+
+  do {
+    food = {
+      x: Math.floor(Math.random() * gridSize),
+      y: Math.floor(Math.random() * gridSize),
+    };
+    attempts++;
+  } while (
+    attempts < maxAttempts &&
+    snake.some((seg) => seg.x === food.x && seg.y === food.y)
+  );
+
+  return food;
+}
+
+export function getInputs(state: GameState): number[] {
+  const head = state.snake[0];
+  const food = state.food;
+
+  // 8 inputs for the neural network:
+  // 4 food direction indicators (normalized -1 to 1)
+  const foodDirX = (food.x - head.x) / state.gridSize;
+  const foodDirY = (food.y - head.y) / state.gridSize;
+
+  // 4 danger sensors (1 if danger, 0 if safe)
+  const dangerUp = isDanger(state, head.x, head.y - 1);
+  const dangerDown = isDanger(state, head.x, head.y + 1);
+  const dangerLeft = isDanger(state, head.x - 1, head.y);
+  const dangerRight = isDanger(state, head.x + 1, head.y);
+
+  return [
+    foodDirX,
+    foodDirY,
+    dangerUp ? 1 : 0,
+    dangerDown ? 1 : 0,
+    dangerLeft ? 1 : 0,
+    dangerRight ? 1 : 0,
+    state.direction / 3, // Normalized direction
+    state.snake.length / (state.gridSize * state.gridSize), // Normalized length
+  ];
+}
+
+function isDanger(state: GameState, x: number, y: number): boolean {
+  // Check wall
+  if (x < 0 || x >= state.gridSize || y < 0 || y >= state.gridSize) {
+    return true;
+  }
+  // Check self-collision
+  return state.snake.some((seg) => seg.x === x && seg.y === y);
+}
+
+export function calculateFitness(state: GameState): number {
+  // Fitness formula balancing food collection and survival
+  const foodScore = state.score * 100;
+  const survivalScore = state.steps;
+  
+  // Bonus for longer snakes
+  const lengthBonus = state.snake.length * 10;
+  
+  return foodScore + survivalScore + lengthBonus;
+}
--- a/src/lib/snakeAI/network.ts
+++ b/src/lib/snakeAI/network.ts
@@ -0,0 +1,110 @@
+import { Action } from './types';
+
+export interface Network {
+  inputSize: number;
+  hiddenSize: number;
+  outputSize: number;
+  weightsIH: number[][]; // Input to Hidden weights
+  weightsHO: number[][]; // Hidden to Output weights
+  biasH: number[]; // Hidden layer biases
+  biasO: number[]; // Output layer biases
+}
+
+export function createNetwork(
+  inputSize: number = 8,
+  hiddenSize: number = 12,
+  outputSize: number = 3
+): Network {
+  return {
+    inputSize,
+    hiddenSize,
+    outputSize,
+    weightsIH: createRandomMatrix(inputSize, hiddenSize),
+    weightsHO: createRandomMatrix(hiddenSize, outputSize),
+    biasH: createRandomArray(hiddenSize),
+    biasO: createRandomArray(outputSize),
+  };
+}
+
+function createRandomMatrix(rows: number, cols: number): number[][] {
+  const matrix: number[][] = [];
+  for (let i = 0; i < rows; i++) {
+    matrix[i] = [];
+    for (let j = 0; j < cols; j++) {
+      matrix[i][j] = Math.random() * 2 - 1; // Random between -1 and 1
+    }
+  }
+  return matrix;
+}
+
+function createRandomArray(size: number): number[] {
+  const array: number[] = [];
+  for (let i = 0; i < size; i++) {
+    array[i] = Math.random() * 2 - 1;
+  }
+  return array;
+}
+
+export function forward(network: Network, inputs: number[]): number[] {
+  // Hidden layer activation
+  const hidden: number[] = [];
+  for (let h = 0; h < network.hiddenSize; h++) {
+    let sum = network.biasH[h];
+    for (let i = 0; i < network.inputSize; i++) {
+      sum += inputs[i] * network.weightsIH[i][h];
+    }
+    hidden[h] = tanh(sum);
+  }
+
+  // Output layer activation
+  const outputs: number[] = [];
+  for (let o = 0; o < network.outputSize; o++) {
+    let sum = network.biasO[o];
+    for (let h = 0; h < network.hiddenSize; h++) {
+      sum += hidden[h] * network.weightsHO[h][o];
+    }
+    outputs[o] = tanh(sum);
+  }
+
+  return outputs;
+}
+
+function tanh(x: number): number {
+  return Math.tanh(x);
+}
+
+export function getAction(network: Network, inputs: number[]): Action {
+  const outputs = forward(network, inputs);
+  
+  // Find index of maximum output
+  let maxIndex = 0;
+  for (let i = 1; i < outputs.length; i++) {
+    if (outputs[i] > outputs[maxIndex]) {
+      maxIndex = i;
+    }
+  }
+
+  // Map output index to action
+  switch (maxIndex) {
+    case 0:
+      return Action.TURN_LEFT;
+    case 1:
+      return Action.STRAIGHT;
+    case 2:
+      return Action.TURN_RIGHT;
+    default:
+      return Action.STRAIGHT;
+  }
+}
+
+export function cloneNetwork(network: Network): Network {
+  return {
+    inputSize: network.inputSize,
+    hiddenSize: network.hiddenSize,
+    outputSize: network.outputSize,
+    weightsIH: network.weightsIH.map((row) => [...row]),
+    weightsHO: network.weightsHO.map((row) => [...row]),
+    biasH: [...network.biasH],
+    biasO: [...network.biasO],
+  };
+}
--- a/src/lib/snakeAI/types.ts
+++ b/src/lib/snakeAI/types.ts
@@ -0,0 +1,29 @@
+export type Direction = 0 | 1 | 2 | 3;
+
+export const Direction = {
+  UP: 0 as Direction,
+  RIGHT: 1 as Direction,
+  DOWN: 2 as Direction,
+  LEFT: 3 as Direction,
+};
+
+export type Action = -1 | 0 | 1;
+
+export const Action = {
+  TURN_LEFT: -1 as Action,
+  STRAIGHT: 0 as Action,
+  TURN_RIGHT: 1 as Action,
+};
+
+export interface Position {
+  x: number;
+  y: number;
+}
+
+export interface EvolutionConfig {
+  populationSize: number;
+  mutationRate: number;
+  eliteCount: number;
+  gridSize: number;
+  maxGameSteps: number;
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
				`@@ -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>