add cssnano for CSS optimization and implement performance monitoring

- Added `cssnano` to `.cspell.json`, `package.json`, and `package-lock.json` for CSS optimization.
- Updated `postcss.config.js` to conditionally include `cssnano` in production.
- Enhanced performance monitoring in `+layout.svelte` to log metrics after page load.
- Introduced a debugging utility system for structured logging and performance tracking.
- Implemented dynamic imports for markdown processing and utility functions to optimize loading.
- Added service worker for caching and offline support.
- Created sitemap and robots.txt for better SEO.

remove function configuration from vercel.json to streamline deployment settings

.cspell.json

···
     "Centralised",
     "colour",
     "CRSV",
+    "cssnano",
     "customised",
     "dbaeumer",
     "Decentralised",

package-lock.json

···
         "@types/node": "^22.10.1",
         "@types/sanitize-html": "^2.13.0",
         "autoprefixer": "^10.4.21",
+        "cssnano": "^7.1.0",
         "eslint": "^9.7.0",
         "eslint-plugin-svelte": "^2.36.0",
         "globals": "^15.0.0",
···
         "file-uri-to-path": "1.0.0"
       }
     },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
···
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/caniuse-api": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
+      "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.0.0",
+        "caniuse-lite": "^1.0.0",
+        "lodash.memoize": "^4.1.2",
+        "lodash.uniq": "^4.5.0"
       }
     },
     "node_modules/caniuse-lite": {
···
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "license": "MIT"
     },
+    "node_modules/colord": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
+      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/comma-separated-tokens": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
···
         "node": ">=4"
       }
     },
+    "node_modules/css-declaration-sorter": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-7.2.0.tgz",
+      "integrity": "sha512-h70rUM+3PNFuaBDTLe8wF/cdWu+dOZmb7pJt8Z2sedYbAcQVQV/tEchueg3GWxwqS0cxtbxmaHEdkNACqcvsow==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.9"
+      }
+    },
     "node_modules/css-gradient-parser": {
       "version": "0.0.16",
       "resolved": "https://registry.npmjs.org/css-gradient-parser/-/css-gradient-parser-0.0.16.tgz",
···
         "node": ">=16"
       }
     },
+    "node_modules/css-select": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz",
+      "integrity": "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0",
+        "css-what": "^6.1.0",
+        "domhandler": "^5.0.2",
+        "domutils": "^3.0.1",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/css-to-react-native": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz",
···
         "postcss-value-parser": "^4.0.2"
       }
     },
+    "node_modules/css-tree": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.1.0.tgz",
+      "integrity": "sha512-0eW44TGN5SQXU1mWSkKwFstI/22X2bG1nYzZTYMAWjylYURhse752YgbE4Cx46AC+bAvI+/dYTPRk1LqSUnu6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.12.2",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/css-what": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.2.2.tgz",
+      "integrity": "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
···
         "node": ">=4"
       }
     },
+    "node_modules/cssnano": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-7.1.0.tgz",
+      "integrity": "sha512-Pu3rlKkd0ZtlCUzBrKL1Z4YmhKppjC1H9jo7u1o4qaKqyhvixFgu5qLyNIAOjSTg9DjVPtUqdROq2EfpVMEe+w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssnano-preset-default": "^7.0.8",
+        "lilconfig": "^3.1.3"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/cssnano"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/cssnano-preset-default": {
+      "version": "7.0.8",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-7.0.8.tgz",
+      "integrity": "sha512-d+3R2qwrUV3g4LEMOjnndognKirBZISylDZAF/TPeCWVjEwlXS2e4eN4ICkoobRe7pD3H6lltinKVyS1AJhdjQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.25.1",
+        "css-declaration-sorter": "^7.2.0",
+        "cssnano-utils": "^5.0.1",
+        "postcss-calc": "^10.1.1",
+        "postcss-colormin": "^7.0.4",
+        "postcss-convert-values": "^7.0.6",
+        "postcss-discard-comments": "^7.0.4",
+        "postcss-discard-duplicates": "^7.0.2",
+        "postcss-discard-empty": "^7.0.1",
+        "postcss-discard-overridden": "^7.0.1",
+        "postcss-merge-longhand": "^7.0.5",
+        "postcss-merge-rules": "^7.0.6",
+        "postcss-minify-font-values": "^7.0.1",
+        "postcss-minify-gradients": "^7.0.1",
+        "postcss-minify-params": "^7.0.4",
+        "postcss-minify-selectors": "^7.0.5",
+        "postcss-normalize-charset": "^7.0.1",
+        "postcss-normalize-display-values": "^7.0.1",
+        "postcss-normalize-positions": "^7.0.1",
+        "postcss-normalize-repeat-style": "^7.0.1",
+        "postcss-normalize-string": "^7.0.1",
+        "postcss-normalize-timing-functions": "^7.0.1",
+        "postcss-normalize-unicode": "^7.0.4",
+        "postcss-normalize-url": "^7.0.1",
+        "postcss-normalize-whitespace": "^7.0.1",
+        "postcss-ordered-values": "^7.0.2",
+        "postcss-reduce-initial": "^7.0.4",
+        "postcss-reduce-transforms": "^7.0.1",
+        "postcss-svgo": "^7.1.0",
+        "postcss-unique-selectors": "^7.0.4"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/cssnano-utils": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-5.0.1.tgz",
+      "integrity": "sha512-ZIP71eQgG9JwjVZsTPSqhc6GHgEr53uJ7tK5///VfyWj6Xp2DBmixWHqJgPno+PqATzn48pL42ww9x5SSGmhZg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/cssnano/node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/csso": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz",
+      "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "css-tree": "~2.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/css-tree": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz",
+      "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "mdn-data": "2.0.28",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/csso/node_modules/mdn-data": {
+      "version": "2.0.28",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz",
+      "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==",
+      "dev": true,
+      "license": "CC0-1.0"
+    },
     "node_modules/debug": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
···
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash.memoize": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
+      "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.uniq": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
+      "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==",
       "dev": true,
       "license": "MIT"
     },
···
         "type": "opencollective",
         "url": "https://opencollective.com/unified"
       }
+    },
+    "node_modules/mdn-data": {
+      "version": "2.12.2",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.12.2.tgz",
+      "integrity": "sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA==",
+      "dev": true,
+      "license": "CC0-1.0"
     },
     "node_modules/merge2": {
       "version": "1.4.1",
···
         "node": ">=0.10.0"
       }
     },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
···
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-calc": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-10.1.1.tgz",
+      "integrity": "sha512-NYEsLHh8DgG/PRH2+G9BTuUdtf9ViS+vdoQ0YA5OQdGsfN4ztiwtDWNtBl9EKeqNMFnIu8IKZ0cLxEQ5r5KVMw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^7.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12 || ^20.9 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.38"
+      }
+    },
+    "node_modules/postcss-calc/node_modules/postcss-selector-parser": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
+      "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-colormin": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-7.0.4.tgz",
+      "integrity": "sha512-ziQuVzQZBROpKpfeDwmrG+Vvlr0YWmY/ZAk99XD+mGEBuEojoFekL41NCsdhyNUtZI7DPOoIWIR7vQQK9xwluw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.25.1",
+        "caniuse-api": "^3.0.0",
+        "colord": "^2.9.3",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-convert-values": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-7.0.6.tgz",
+      "integrity": "sha512-MD/eb39Mr60hvgrqpXsgbiqluawYg/8K4nKsqRsuDX9f+xN1j6awZCUv/5tLH8ak3vYp/EMXwdcnXvfZYiejCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.25.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-discard-comments": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-7.0.4.tgz",
+      "integrity": "sha512-6tCUoql/ipWwKtVP/xYiFf1U9QgJ0PUvxN7pTcsQ8Ns3Fnwq1pU5D5s1MhT/XySeLq6GXNvn37U46Ded0TckWg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^7.1.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-discard-comments/node_modules/postcss-selector-parser": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
+      "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-discard-duplicates": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-7.0.2.tgz",
+      "integrity": "sha512-eTonaQvPZ/3i1ASDHOKkYwAybiM45zFIc7KXils4mQmHLqIswXD9XNOKEVxtTFnsmwYzF66u4LMgSr0abDlh5w==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-discard-empty": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-7.0.1.tgz",
+      "integrity": "sha512-cFrJKZvcg/uxB6Ijr4l6qmn3pXQBna9zyrPC+sK0zjbkDUZew+6xDltSF7OeB7rAtzaaMVYSdbod+sZOCWnMOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-discard-overridden": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-7.0.1.tgz",
+      "integrity": "sha512-7c3MMjjSZ/qYrx3uc1940GSOzN1Iqjtlqe8uoSg+qdVPYyRb0TILSqqmtlSFuE4mTDECwsm397Ya7iXGzfF7lg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
     "node_modules/postcss-import": {
       "version": "16.1.1",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-16.1.1.tgz",
···
         }
       }
     },
+    "node_modules/postcss-merge-longhand": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-7.0.5.tgz",
+      "integrity": "sha512-Kpu5v4Ys6QI59FxmxtNB/iHUVDn9Y9sYw66D6+SZoIk4QTz1prC4aYkhIESu+ieG1iylod1f8MILMs1Em3mmIw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0",
+        "stylehacks": "^7.0.5"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-merge-rules": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-7.0.6.tgz",
+      "integrity": "sha512-2jIPT4Tzs8K87tvgCpSukRQ2jjd+hH6Bb8rEEOUDmmhOeTcqDg5fEFK8uKIu+Pvc3//sm3Uu6FRqfyv7YF7+BQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.25.1",
+        "caniuse-api": "^3.0.0",
+        "cssnano-utils": "^5.0.1",
+        "postcss-selector-parser": "^7.1.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-merge-rules/node_modules/postcss-selector-parser": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
+      "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-minify-font-values": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-7.0.1.tgz",
+      "integrity": "sha512-2m1uiuJeTplll+tq4ENOQSzB8LRnSUChBv7oSyFLsJRtUgAAJGP6LLz0/8lkinTgxrmJSPOEhgY1bMXOQ4ZXhQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-minify-gradients": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-7.0.1.tgz",
+      "integrity": "sha512-X9JjaysZJwlqNkJbUDgOclyG3jZEpAMOfof6PUZjPnPrePnPG62pS17CjdM32uT1Uq1jFvNSff9l7kNbmMSL2A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "colord": "^2.9.3",
+        "cssnano-utils": "^5.0.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-minify-params": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-7.0.4.tgz",
+      "integrity": "sha512-3OqqUddfH8c2e7M35W6zIwv7jssM/3miF9cbCSb1iJiWvtguQjlxZGIHK9JRmc8XAKmE2PFGtHSM7g/VcW97sw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.25.1",
+        "cssnano-utils": "^5.0.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-minify-selectors": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-7.0.5.tgz",
+      "integrity": "sha512-x2/IvofHcdIrAm9Q+p06ZD1h6FPcQ32WtCRVodJLDR+WMn8EVHI1kvLxZuGKz/9EY5nAmI6lIQIrpo4tBy5+ug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "postcss-selector-parser": "^7.1.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-minify-selectors/node_modules/postcss-selector-parser": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
+      "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/postcss-nested": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
···
         "postcss": "^8.2.14"
       }
     },
+    "node_modules/postcss-normalize-charset": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-7.0.1.tgz",
+      "integrity": "sha512-sn413ofhSQHlZFae//m9FTOfkmiZ+YQXsbosqOWRiVQncU2BA3daX3n0VF3cG6rGLSFVc5Di/yns0dFfh8NFgQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-normalize-display-values": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-7.0.1.tgz",
+      "integrity": "sha512-E5nnB26XjSYz/mGITm6JgiDpAbVuAkzXwLzRZtts19jHDUBFxZ0BkXAehy0uimrOjYJbocby4FVswA/5noOxrQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-normalize-positions": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-7.0.1.tgz",
+      "integrity": "sha512-pB/SzrIP2l50ZIYu+yQZyMNmnAcwyYb9R1fVWPRxm4zcUFCY2ign7rcntGFuMXDdd9L2pPNUgoODDk91PzRZuQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-normalize-repeat-style": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-7.0.1.tgz",
+      "integrity": "sha512-NsSQJ8zj8TIDiF0ig44Byo3Jk9e4gNt9x2VIlJudnQQ5DhWAHJPF4Tr1ITwyHio2BUi/I6Iv0HRO7beHYOloYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-normalize-string": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-7.0.1.tgz",
+      "integrity": "sha512-QByrI7hAhsoze992kpbMlJSbZ8FuCEc1OT9EFbZ6HldXNpsdpZr+YXC5di3UEv0+jeZlHbZcoCADgb7a+lPmmQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-normalize-timing-functions": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-7.0.1.tgz",
+      "integrity": "sha512-bHifyuuSNdKKsnNJ0s8fmfLMlvsQwYVxIoUBnowIVl2ZAdrkYQNGVB4RxjfpvkMjipqvbz0u7feBZybkl/6NJg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-normalize-unicode": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-7.0.4.tgz",
+      "integrity": "sha512-LvIURTi1sQoZqj8mEIE8R15yvM+OhbR1avynMtI9bUzj5gGKR/gfZFd8O7VMj0QgJaIFzxDwxGl/ASMYAkqO8g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.25.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-normalize-url": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-7.0.1.tgz",
+      "integrity": "sha512-sUcD2cWtyK1AOL/82Fwy1aIVm/wwj5SdZkgZ3QiUzSzQQofrbq15jWJ3BA7Z+yVRwamCjJgZJN0I9IS7c6tgeQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-normalize-whitespace": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-7.0.1.tgz",
+      "integrity": "sha512-vsbgFHMFQrJBJKrUFJNZ2pgBeBkC2IvvoHjz1to0/0Xk7sII24T0qFOiJzG6Fu3zJoq/0yI4rKWi7WhApW+EFA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-ordered-values": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-7.0.2.tgz",
+      "integrity": "sha512-AMJjt1ECBffF7CEON/Y0rekRLS6KsePU6PRP08UqYW4UGFRnTXNrByUzYK1h8AC7UWTZdQ9O3Oq9kFIhm0SFEw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssnano-utils": "^5.0.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-reduce-initial": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-7.0.4.tgz",
+      "integrity": "sha512-rdIC9IlMBn7zJo6puim58Xd++0HdbvHeHaPgXsimMfG1ijC5A9ULvNLSE0rUKVJOvNMcwewW4Ga21ngyJjY/+Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.25.1",
+        "caniuse-api": "^3.0.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-reduce-transforms": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-7.0.1.tgz",
+      "integrity": "sha512-MhyEbfrm+Mlp/36hvZ9mT9DaO7dbncU0CvWI8V93LRkY6IYlu38OPg3FObnuKTUxJ4qA8HpurdQOo5CyqqO76g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
     "node_modules/postcss-safe-parser": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz",
···
         "node": ">=4"
       }
     },
+    "node_modules/postcss-svgo": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-7.1.0.tgz",
+      "integrity": "sha512-KnAlfmhtoLz6IuU3Sij2ycusNs4jPW+QoFE5kuuUOK8awR6tMxZQrs5Ey3BUz7nFCzT3eqyFgqkyrHiaU2xx3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0",
+        "svgo": "^4.0.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >= 18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-unique-selectors": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-7.0.4.tgz",
+      "integrity": "sha512-pmlZjsmEAG7cHd7uK3ZiNSW6otSZ13RHuZ/4cDN/bVglS5EpF2r2oxY99SuOHa8m7AWoBCelTS3JPpzsIs8skQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^7.1.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/postcss-unique-selectors/node_modules/postcss-selector-parser": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
+      "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
···
       "integrity": "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw==",
       "license": "MIT"
     },
+    "node_modules/sax": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
+      "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/semver": {
       "version": "7.6.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
···
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/stylehacks": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-7.0.6.tgz",
+      "integrity": "sha512-iitguKivmsueOmTO0wmxURXBP8uqOO+zikLGZ7Mm9e/94R4w5T999Js2taS/KBOnQ/wdC3jN3vNSrkGDrlnqQg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.25.1",
+        "postcss-selector-parser": "^7.1.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.32"
+      }
+    },
+    "node_modules/stylehacks/node_modules/postcss-selector-parser": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz",
+      "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/sucrase": {
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
···
       },
       "funding": {
         "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/svgo": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-4.0.0.tgz",
+      "integrity": "sha512-VvrHQ+9uniE+Mvx3+C9IEe/lWasXCU0nXMY2kZeLrHNICuRiC8uMPyM14UEaMOFA5mhyQqEkB02VoQ16n3DLaw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^11.1.0",
+        "css-select": "^5.1.0",
+        "css-tree": "^3.0.1",
+        "css-what": "^6.1.0",
+        "csso": "^5.0.5",
+        "picocolors": "^1.1.1",
+        "sax": "^1.4.1"
+      },
+      "bin": {
+        "svgo": "bin/svgo.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/svgo"
+      }
+    },
+    "node_modules/svgo/node_modules/commander": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
+      "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=16"
       }
     },
     "node_modules/tailwindcss": {

package.json

···
     "@types/node": "^22.10.1",
     "@types/sanitize-html": "^2.13.0",
     "autoprefixer": "^10.4.21",
+    "cssnano": "^7.1.0",
     "eslint": "^9.7.0",
     "eslint-plugin-svelte": "^2.36.0",
     "globals": "^15.0.0",

postcss.config.js

···
     'postcss-import': {},
     'tailwindcss/nesting': {},
     tailwindcss: {},
-    autoprefixer: {}
-  }
-};
+    autoprefixer: {},
+    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
+  },
+}

src/app.html

···
       content="%sveltekit.assets%/favicon/ms-icon-144x144.png"
     />
 
+    <!-- Preload critical fonts -->
+    <link 
+      rel="preload" 
+      href="%sveltekit.assets%/fonts/ArrowType-Recursive-1.085/Recursive_Web/woff2_variable/Recursive_VF_1.085.woff2" 
+      as="font" 
+      type="font/woff2" 
+      crossorigin
+    />
+
     <!-- THEME LOADER - MUST BE FIRST SCRIPT -->
     <script src="%sveltekit.assets%/scripts/themeLoader.js"></script>
+
+    <!-- Service Worker Registration -->
+    <script>
+      // Enhanced debugging for service worker registration
+      console.log('🔍 Service Worker registration script loaded');
+      console.log('📍 Current location:', window.location.href);
+      console.log('🌐 Protocol:', window.location.protocol);
+      console.log('🏠 Hostname:', window.location.hostname);
+      
+      if ('serviceWorker' in navigator) {
+        console.log('✅ Service Worker API supported');
+        
+        // Check for existing service workers
+        navigator.serviceWorker.getRegistrations().then(registrations => {
+          console.log('📋 Existing service worker registrations:', registrations.length);
+          registrations.forEach((registration, index) => {
+            console.log(`  ${index + 1}. Scope: ${registration.scope}, Active: ${!!registration.active}`);
+          });
+        });
+        
+        window.addEventListener('load', () => {
+          console.log('🚀 Page loaded, attempting to register service worker at /scripts/sw.js');
+          
+          // Test if the service worker file is accessible
+          fetch('/scripts/sw.js')
+            .then(response => {
+              console.log('✅ Service worker file accessible:', {
+                status: response.status,
+                statusText: response.statusText,
+                url: response.url
+              });
+            })
+            .catch(error => {
+              console.error('❌ Service worker file not accessible:', error);
+            });
+          
+          navigator.serviceWorker.register('/scripts/sw.js')
+            .then((registration) => {
+              console.log('✅ Service Worker registered successfully:', {
+                scope: registration.scope,
+                active: !!registration.active,
+                waiting: !!registration.waiting,
+                installing: !!registration.installing
+              });
+              
+              // Listen for updates
+              registration.addEventListener('updatefound', () => {
+                console.log('🔄 Service Worker update found');
+                const newWorker = registration.installing;
+                
+                newWorker.addEventListener('statechange', () => {
+                  if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
+                    console.log('🆕 New Service Worker installed and ready');
+                  }
+                });
+              });
+            })
+            .catch((registrationError) => {
+              console.error('❌ Service Worker registration failed:', {
+                error: registrationError.message,
+                name: registrationError.name,
+                stack: registrationError.stack
+              });
+              
+              // Log additional debugging info
+              console.log('🔍 Debug info:', {
+                location: window.location.href,
+                userAgent: navigator.userAgent,
+                serviceWorkerSupported: 'serviceWorker' in navigator,
+                https: window.location.protocol === 'https:',
+                localhost: window.location.hostname === 'localhost'
+              });
+            });
+        });
+      } else {
+        console.warn('⚠️ Service Worker not supported in this browser');
+      }
+    </script>
 
     <!-- Favicon and Icons -->
     <link rel="icon" href="%sveltekit.assets%/favicon/favicon-32x32.png" />

src/lib/components/profile/profile.ts

···
 
 export async function safeFetch(url: string, fetch: typeof globalThis.fetch) {
   try {
-    const response = await fetch(url);
-    if (!response.ok)
-      throw new Error(`HTTP error! status: ${response.status}, statusText: ${response.statusText}`);
-    return await response.json();
+    // Add timeout to prevent hanging requests
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout
+
+    try {
+      const response = await fetch(url, { 
+        signal: controller.signal,
+        headers: {
+          'Accept': 'application/json'
+        }
+      });
+      
+      clearTimeout(timeoutId);
+      
+      if (!response.ok)
+        throw new Error(`HTTP error! status: ${response.status}, statusText: ${response.statusText}`);
+      return await response.json();
+    } catch (error) {
+      clearTimeout(timeoutId);
+      if (error.name === 'AbortError') {
+        throw new Error(`Request timed out for ${url}`);
+      }
+      throw error;
+    }
   } catch (error: unknown) {
     // Catch network errors (e.g., connection refused, timeout)
     console.error(`Network error fetching ${url}:`, error);

src/lib/css/app.css

···
 @import "$css/variables.css";
 @import "$css/animations.css";
 
-/* KaTeX CSS for rendering mathematical expressions */
-@import url('https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css');
-
 /* Minimalist flat styles with gentle dark pastel green theme */
 @tailwind base;
 @tailwind components;
···
   font-weight: 300 800;
   font-stretch: 100%;
   font-display: swap;
+  font-preload: true;
 }
+
+/* KaTeX CSS - will be loaded dynamically when needed */
+/* @import url('https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css'); */
 
 @layer base {
 
···
     font-family: "Recursive", sans-serif;
     font-variation-settings: "MONO" 0, "CASL" 0, "wght" 300, "slnt" 0,
       "CRSV" 0.5;
+    /* Optimize font rendering */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
   }
 
   /* This is to ensure KaTeX renders correctly.

src/lib/server/ogImage.ts

···
-import satori from 'satori';
-import { Resvg } from '@resvg/resvg-js';
 import { dev } from '$app/environment';
-
-// Font URLs for production (served from static folder)
-const FONT_BASE_URL = '/fonts/ArrowType-Recursive-1.085/Recursive_Desktop/separate_statics/TTF';
-const FONT_FILES = {
-  regular: 'RecursiveSansCslSt-Regular.ttf',
-  bold: 'RecursiveSansCslSt-Bold.ttf',
-  italic: 'RecursiveSansCslSt-Italic.ttf'
-};
-
-// Preload fonts (cache in memory for performance)
-let fontCache: { regular?: Buffer; bold?: Buffer; italic?: Buffer } = {};
-
-async function loadSingleFont(fileName: string, baseUrl?: string): Promise<Buffer> {
-  try {
-    if (dev) {
-      // In development, try to load from filesystem first
-      const fs = await import('fs/promises');
-      const path = await import('path');
-      const fontPath = path.resolve(`static${FONT_BASE_URL}/${fileName}`);
-      console.log(`Loading font from filesystem: ${fontPath}`);
-      return await fs.readFile(fontPath);
-    } else {
-      // In production, fetch from the served static files
-      const fontUrl = `${baseUrl || ''}${FONT_BASE_URL}/${fileName}`;
-      console.log(`Fetching font from URL: ${fontUrl}`);
-      
-      const response = await fetch(fontUrl);
-      if (!response.ok) {
-        throw new Error(`Failed to fetch font: ${response.status} ${response.statusText}`);
-      }
-      
-      const arrayBuffer = await response.arrayBuffer();
-      return Buffer.from(arrayBuffer);
-    }
-  } catch (error) {
-    console.error(`Failed to load font ${fileName}:`, error);
-    throw error;
-  }
-}
+import { createFileDebugger } from '../utils/debug.js';
 
-async function loadFonts(baseUrl?: string) {
-  try {
-    // Load fonts if not already cached
-    if (!fontCache.regular) {
-      fontCache.regular = await loadSingleFont(FONT_FILES.regular, baseUrl);
-    }
-    if (!fontCache.bold) {
-      fontCache.bold = await loadSingleFont(FONT_FILES.bold, baseUrl);
-    }
-    if (!fontCache.italic) {
-      fontCache.italic = await loadSingleFont(FONT_FILES.italic, baseUrl);
-    }
-
-    // Defensive: throw if any font is missing
-    if (!fontCache.regular || !fontCache.bold || !fontCache.italic) {
-      throw new Error('Failed to load all required font files for OG image');
-    }
-    
-    return fontCache as { regular: Buffer; bold: Buffer; italic: Buffer };
-  } catch (error) {
-    console.error('Font loading error:', error);
-    throw error;
-  }
-}
+const debug = createFileDebugger('ogImage.ts');
 
 export interface OgImageOptions {
   title: string;
···
 }
 
 /**
- * Calculate optimal font size based on text length and available space
+ * Generate OG image with dynamic sizing and layout
+ * @param options OgImageOptions
+ * @param baseUrl Optional base URL for font loading
+ * @returns Promise<Buffer> PNG image buffer
  */
-function calculateTitleFontSize(title: string, maxWidth: number = 1000): number {
-  const baseSize = 64;
-  const charThreshold = 45;
-  const minSize = 36;
-  
-  if (title.length <= charThreshold) {
-    return baseSize;
-  }
-  
-  const scaleFactor = Math.max(0.5, 1 - ((title.length - charThreshold) * 0.012));
-  return Math.max(minSize, Math.floor(baseSize * scaleFactor));
-}
-
-/**
- * Calculate optimal subtitle font size
- */
-function calculateSubtitleFontSize(subtitle: string, titleSize: number): number {
-  const baseRatio = 0.57;
-  const charThreshold = 80;
-  const minSize = 20;
-  
-  let size = Math.floor(titleSize * baseRatio);
+export async function generateOgImage(options: OgImageOptions, baseUrl?: string): Promise<Buffer> {
+  debug.enter('generateOgImage', { 
+    title: options.title?.substring(0, 50) + (options.title?.length > 50 ? '...' : ''),
+    hasSubtitle: !!options.subtitle,
+    hasAuthor: !!options.author,
+    hasExtraMeta: !!options.extraMeta?.length,
+    baseUrl: baseUrl || 'none'
+  });
   
-  if (subtitle.length > charThreshold) {
-    const scaleFactor = Math.max(0.7, 1 - ((subtitle.length - charThreshold) * 0.01));
-    size = Math.floor(size * scaleFactor);
-  }
+  const timer = debug.time('generateOgImage');
   
-  return Math.max(minSize, size);
-}
+  try {
+    debug.info('Starting OG image generation', {
+      titleLength: options.title?.length,
+      subtitleLength: options.subtitle?.length,
+      authorName: options.author?.name,
+      extraMetaCount: options.extraMeta?.length || 0
+    });
 
-/**
- * Estimate content height to ensure it fits
- */
-function estimateContentHeight(options: OgImageOptions): {
-  titleHeight: number;
-  subtitleHeight: number;
-  metaHeight: number;
-  authorHeight: number;
-  totalContentHeight: number;
-} {
-  const titleFontSize = calculateTitleFontSize(options.title);
-  const titleLines = Math.ceil(options.title.length / 40);
-  const titleHeight = titleLines * titleFontSize * 1.25 + 32;
-  
-  let subtitleHeight = 0;
-  if (options.subtitle) {
-    const subtitleFontSize = calculateSubtitleFontSize(options.subtitle, titleFontSize);
-    const subtitleLines = Math.ceil(options.subtitle.length / 60);
-    subtitleHeight = subtitleLines * subtitleFontSize * 1.2 + 24;
-  }
-  
-  let metaHeight = 0;
-  if (options.metaLine || (options.extraMeta && options.extraMeta.length > 0)) {
-    metaHeight = 32 + 24;
+    // Dynamically import the actual implementation to avoid build-time analysis
+    debug.debug('Attempting to import OG image implementation');
+    const { generateOgImageImpl } = await import('./ogImageImpl');
+    
+    debug.info('Successfully imported OG image implementation, calling main function');
+    const result = await generateOgImageImpl(options, baseUrl);
+    
+    debug.info('OG image generation completed successfully', {
+      resultType: typeof result,
+      resultLength: result?.length,
+      resultIsBuffer: Buffer.isBuffer(result)
+    });
+    
+    timer();
+    debug.exit('generateOgImage', { 
+      success: true, 
+      resultType: typeof result,
+      resultLength: result?.length 
+    });
+    
+    return result;
+  } catch (error) {
+    debug.errorWithContext('Failed to generate OG image with main implementation', error as Error, {
+      function: 'generateOgImage',
+      options: {
+        title: options.title?.substring(0, 100),
+        hasSubtitle: !!options.subtitle,
+        hasAuthor: !!options.author
+      }
+    });
+    
+    debug.info('Falling back to SVG-based OG image generation');
+    
+    try {
+      // Fallback: create a simple SVG-based OG image without external dependencies
+      const fallbackSvg = createFallbackSvg(options);
+      const svgBuffer = Buffer.from(fallbackSvg, 'utf-8');
+      
+      debug.info('Fallback SVG generation successful', {
+        svgLength: fallbackSvg.length,
+        bufferLength: svgBuffer.length,
+        fallbackType: 'svg'
+      });
+      
+      timer();
+      debug.exit('generateOgImage', { 
+        success: true, 
+        fallback: true,
+        resultType: 'svg',
+        resultLength: svgBuffer.length 
+      });
+      
+      // For now, return SVG as-is. In production, you might want to convert this to PNG
+      // or handle the error differently
+      return svgBuffer;
+    } catch (fallbackError) {
+      debug.errorWithContext('Fallback SVG generation also failed', fallbackError as Error, {
+        function: 'generateOgImage',
+        fallback: true
+      });
+      
+      timer();
+      debug.exit('generateOgImage', { 
+        success: false, 
+        fallback: true,
+        error: fallbackError 
+      });
+      
+      throw fallbackError;
+    }
   }
-  
-  let authorHeight = options.author ? 120 : 28;
-  
-  return {
-    titleHeight,
-    subtitleHeight,
-    metaHeight,
-    authorHeight,
-    totalContentHeight: titleHeight + subtitleHeight + metaHeight + authorHeight
-  };
 }
 
 /**
- * Generates a PNG buffer for an OG image with unified styling.
- * @param options OgImageOptions
- * @param baseUrl Base URL for fetching fonts in production (e.g., 'https://ewancroft.uk')
- * @returns Buffer (PNG)
+ * Create a fallback SVG-based OG image when the main generator fails
  */
-export async function generateOgImage(options: OgImageOptions, baseUrl?: string): Promise<Buffer> {
-  const fonts = await loadFonts(baseUrl);
+function createFallbackSvg(options: OgImageOptions): string {
+  debug.enter('createFallbackSvg', { 
+    title: options.title?.substring(0, 30),
+    hasSubtitle: !!options.subtitle 
+  });
   
-  // Calculate optimal sizing
-  const titleFontSize = calculateTitleFontSize(options.title);
-  const subtitleFontSize = options.subtitle ? calculateSubtitleFontSize(options.subtitle, titleFontSize) : 0;
-  
-  // Estimate if content will fit and adjust if needed
-  const contentEstimate = estimateContentHeight(options);
-  const availableHeight = 630 - 96;
-  
-  let titleMarginBottom = 32;
-  let subtitleMarginBottom = 24;
-  let metaMarginBottom = 24;
-  
-  if (contentEstimate.totalContentHeight > availableHeight) {
-    const compressionRatio = availableHeight / contentEstimate.totalContentHeight;
-    titleMarginBottom = Math.max(8, Math.floor(titleMarginBottom * compressionRatio));
-    subtitleMarginBottom = Math.max(6, Math.floor(subtitleMarginBottom * compressionRatio));
-    metaMarginBottom = Math.max(8, Math.floor(metaMarginBottom * compressionRatio));
-  }
-
-  // Layout children
-  let children: any[] = [];
-
-  // Title with dynamic sizing
-  children.push({
-    type: 'h1',
-    props: {
-      style: {
-        fontSize: `${titleFontSize}px`,
-        fontWeight: 700,
-        fontStyle: 'normal',
-        margin: `0 0 ${titleMarginBottom}px 0`,
-        textAlign: 'center',
-        lineHeight: 1.25,
-        maxWidth: '1000px',
-        overflow: 'hidden',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        textWrap: 'balance',
-        hyphens: 'auto',
-        paddingLeft: '48px',
-        paddingRight: '48px',
-      },
-      children: options.title,
-    },
-  });
-
-  // Subtitle/description with dynamic sizing
-  if (options.subtitle) {
-    children.push({
-      type: 'div',
-      props: {
-        style: {
-          fontSize: `${subtitleFontSize}px`,
-          fontWeight: 400,
-          margin: `0 0 ${subtitleMarginBottom}px 0`,
-          textAlign: 'center',
-          opacity: 0.8,
-          maxWidth: '900px',
-          lineHeight: 1.3,
-          textWrap: 'balance',
-          paddingLeft: '48px',
-          paddingRight: '48px',
-        },
-        children: options.subtitle,
-      },
+  try {
+    const title = options.title || 'OG Image';
+    const subtitle = options.subtitle || '';
+    
+    debug.debug('Creating fallback SVG', {
+      title,
+      subtitle,
+      titleLength: title.length,
+      subtitleLength: subtitle.length
+    });
+    
+    const svg = `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1200" height="630" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <style>
+      .title { font-family: Arial, sans-serif; font-size: 48px; font-weight: bold; fill: #ffffff; }
+      .subtitle { font-family: Arial, sans-serif; font-size: 24px; fill: #8fd0a0; }
+    </style>
+  </defs>
+  <rect width="1200" height="630" fill="#0f1a0f"/>
+  <text x="600" y="300" text-anchor="middle" class="title">${title}</text>
+  ${subtitle ? `<text x="600" y="350" text-anchor="middle" class="subtitle">${subtitle}</text>` : ''}
+</svg>`;
+    
+    debug.debug('Fallback SVG created successfully', {
+      svgLength: svg.length,
+      hasSubtitle: !!subtitle
+    });
+    
+    debug.exit('createFallbackSvg', { 
+      success: true, 
+      svgLength: svg.length 
     });
-  }
-
-  // Meta line (e.g., reading time, word count)
-  if (options.metaLine || (options.extraMeta && options.extraMeta.length > 0)) {
-    children.push({
-      type: 'div',
-      props: {
-        style: {
-          fontSize: '24px',
-          opacity: 0.75,
-          margin: `0 0 ${metaMarginBottom}px 0`,
-          display: 'flex',
-          flexDirection: 'row',
-          alignItems: 'center',
-          justifyContent: 'center',
-          flexWrap: 'wrap',
-          gap: '8px',
-        },
-        children: options.metaLine || options.extraMeta?.join(' • '),
-      },
+    
+    return svg;
+  } catch (error) {
+    debug.errorWithContext('Failed to create fallback SVG', error as Error, {
+      function: 'createFallbackSvg'
     });
-  }
-
-  // Custom children (for advanced layouts)
-  if (options.customChildren) {
-    children.push(options.customChildren);
-  }
-
-  // Decorative line (optional, for index pages) - only if no author
-  if (!options.author && !options.customChildren) {
-    children.push({
-      type: 'div',
-      props: {
-        style: {
-          width: '120px',
-          height: '4px',
-          background: '#2d4839',
-          borderRadius: '2px',
-          margin: '0 auto',
-          flexShrink: 0,
-        },
-      },
+    
+    debug.exit('createFallbackSvg', { 
+      success: false, 
+      error: error 
     });
+    
+    // Return a minimal error SVG if even the fallback fails
+    return `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="1200" height="630" xmlns="http://www.w3.org/2000/svg">
+  <rect width="1200" height="630" fill="#ff0000"/>
+  <text x="600" y="315" text-anchor="middle" font-family="Arial" font-size="24" fill="white">OG Image Generation Failed</text>
+</svg>`;
   }
-
-  // Create main container with efficient spacing
-  const mainContainer = {
-    type: 'div',
-    props: {
-      style: {
-        width: '1200px',
-        height: '630px',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        background: '#121c17',
-        color: '#d8e8d8',
-        fontFamily: 'Recursive',
-        position: 'relative',
-        padding: options.author ? '60px 0 48px 0' : '48px 0',
-        boxSizing: 'border-box',
-      },
-      children: [
-        // Main content container - takes up most space
-        {
-          type: 'div',
-          props: {
-            style: {
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-              justifyContent: 'center',
-              width: '100%',
-              flex: '1',
-            },
-            children,
-          },
-        },
-        // Author info at bottom
-        options.author && {
-          type: 'div',
-          props: {
-            style: {
-              width: '100%',
-              display: 'flex',
-              flexDirection: 'row',
-              alignItems: 'center',
-              justifyContent: 'center',
-              gap: '18px',
-              textAlign: 'center',
-              opacity: 0.85,
-              flexShrink: 0,
-            },
-            children: [
-              options.author.avatar && {
-                type: 'img',
-                props: {
-                  src: options.author.avatar,
-                  width: 64,
-                  height: 64,
-                  style: {
-                    borderRadius: '50%',
-                    border: '3px solid #2d4839',
-                    boxShadow: '0 2px 12px rgba(0,0,0,0.18)',
-                    background: '#1e2c23',
-                    flexShrink: 0,
-                  },
-                },
-              },
-              {
-                type: 'div',
-                props: {
-                  style: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'flex-start',
-                    gap: '2px',
-                  },
-                  children: [
-                    {
-                      type: 'span',
-                      props: {
-                        style: {
-                          fontSize: '22px',
-                          fontWeight: 700,
-                          fontStyle: 'normal',
-                          lineHeight: 1.1,
-                        },
-                        children: options.author.name,
-                      },
-                    },
-                    options.author.handle && {
-                      type: 'span',
-                      props: {
-                        style: {
-                          fontSize: '16px',
-                          color: '#8fd0a0',
-                          fontWeight: 400,
-                          fontStyle: 'italic',
-                        },
-                        children: '@' + options.author.handle,
-                      },
-                    },
-                  ].filter(Boolean),
-                },
-              },
-            ].filter(Boolean),
-          },
-        },
-      ].filter(Boolean),
-    },
-  };
-
-  // Compose SVG
-  const svg = await satori(mainContainer, {
-    width: 1200,
-    height: 630,
-    fonts: [
-      {
-        name: 'Recursive',
-        data: fonts.regular,
-        weight: 400,
-        style: 'normal',
-      },
-      {
-        name: 'Recursive',
-        data: fonts.bold,
-        weight: 700,
-        style: 'normal',
-      },
-      {
-        name: 'Recursive',
-        data: fonts.italic,
-        weight: 400,
-        style: 'italic',
-      },
-    ],
-  });
-
-  // Convert SVG to PNG
-  const resvg = new Resvg(svg, { fitTo: { mode: 'width', value: 1200 } });
-  const png = resvg.render();
-  return png.asPng();
 }

src/lib/server/ogImageImpl.ts

···
+import { dev } from '$app/environment';
+import { createFileDebugger } from '../utils/debug.js';
+
+const debug = createFileDebugger('ogImageImpl.ts');
+
+// Font URLs for production (served from static folder)
+const FONT_BASE_URL = '/fonts/ArrowType-Recursive-1.085/Recursive_Desktop/separate_statics/TTF';
+const FONT_FILES = {
+  regular: 'RecursiveSansCslSt-Regular.ttf',
+  bold: 'RecursiveSansCslSt-Bold.ttf',
+  italic: 'RecursiveSansCslSt-Italic.ttf'
+};
+
+// Preload fonts (cache in memory for performance)
+let fontCache: { regular?: Buffer; bold?: Buffer; italic?: Buffer } = {};
+
+async function loadSingleFont(fileName: string, baseUrl?: string): Promise<Buffer> {
+  debug.enter('loadSingleFont', { fileName, baseUrl: baseUrl || 'none' });
+  
+  try {
+    if (dev) {
+      // In development, try to load from filesystem first
+      debug.debug('Loading font from filesystem in development mode');
+      const fs = await import('fs/promises');
+      const path = await import('path');
+      const fontPath = path.resolve(`static${FONT_BASE_URL}/${fileName}`);
+      
+      debug.debug('Font filesystem path resolved', { fontPath });
+      console.log(`Loading font from filesystem: ${fontPath}`);
+      
+      const fontBuffer = await fs.readFile(fontPath);
+      debug.debug('Font loaded successfully from filesystem', { 
+        fileName, 
+        bufferLength: fontBuffer.length 
+      });
+      
+      debug.exit('loadSingleFont', { 
+        success: true, 
+        source: 'filesystem',
+        bufferLength: fontBuffer.length 
+      });
+      
+      return fontBuffer;
+    } else {
+      // In production, fetch from the served static files
+      debug.debug('Loading font from URL in production mode');
+      const fontUrl = `${baseUrl || ''}${FONT_BASE_URL}/${fileName}`;
+      
+      debug.debug('Font URL constructed', { fontUrl });
+      console.log(`Fetching font from URL: ${fontUrl}`);
+      
+      const response = await fetch(fontUrl);
+      if (!response.ok) {
+        const error = new Error(`Failed to fetch font: ${response.status} ${response.statusText}`);
+        debug.error('Font fetch failed', { 
+          fileName, 
+          fontUrl, 
+          status: response.status, 
+          statusText: response.statusText 
+        });
+        throw error;
+      }
+      
+      const arrayBuffer = await response.arrayBuffer();
+      const fontBuffer = Buffer.from(arrayBuffer);
+      
+      debug.debug('Font loaded successfully from URL', { 
+        fileName, 
+        fontUrl,
+        arrayBufferLength: arrayBuffer.byteLength,
+        bufferLength: fontBuffer.length 
+      });
+      
+      debug.exit('loadSingleFont', { 
+        success: true, 
+        source: 'url',
+        bufferLength: fontBuffer.length 
+      });
+      
+      return fontBuffer;
+    }
+  } catch (error) {
+    debug.errorWithContext(`Failed to load font ${fileName}`, error as Error, {
+      function: 'loadSingleFont',
+      fileName,
+      baseUrl,
+      dev
+    });
+    
+    debug.exit('loadSingleFont', { 
+      success: false, 
+      fileName, 
+      error: error 
+    });
+    
+    throw error;
+  }
+}
+
+async function loadFonts(baseUrl?: string) {
+  debug.enter('loadFonts', { baseUrl: baseUrl || 'none' });
+  const timer = debug.time('loadFonts');
+  
+  try {
+    debug.info('Starting font loading process', {
+      baseUrl,
+      cacheStatus: {
+        regular: !!fontCache.regular,
+        bold: !!fontCache.bold,
+        italic: !!fontCache.italic
+      }
+    });
+    
+    // Load fonts if not already cached
+    if (!fontCache.regular) {
+      debug.debug('Loading regular font');
+      fontCache.regular = await loadSingleFont(FONT_FILES.regular, baseUrl);
+    } else {
+      debug.debug('Regular font already cached');
+    }
+    
+    if (!fontCache.bold) {
+      debug.debug('Loading bold font');
+      fontCache.bold = await loadSingleFont(FONT_FILES.bold, baseUrl);
+    } else {
+      debug.debug('Bold font already cached');
+    }
+    
+    if (!fontCache.italic) {
+      debug.debug('Loading italic font');
+      fontCache.italic = await loadSingleFont(FONT_FILES.italic, baseUrl);
+    } else {
+      debug.debug('Italic font already cached');
+    }
+
+    // Defensive: throw if any font is missing
+    if (!fontCache.regular || !fontCache.bold || !fontCache.italic) {
+      const error = new Error('Failed to load all required font files for OG image');
+      debug.error('Font validation failed', {
+        regular: !!fontCache.regular,
+        bold: !!fontCache.bold,
+        italic: !!fontCache.italic
+      });
+      throw error;
+    }
+    
+    debug.info('All fonts loaded successfully', {
+      regularLength: fontCache.regular?.length,
+      boldLength: fontCache.bold?.length,
+      italicLength: fontCache.italic?.length
+    });
+    
+    timer();
+    debug.exit('loadFonts', { 
+      success: true, 
+      fontCount: 3,
+      totalSize: (fontCache.regular?.length || 0) + (fontCache.bold?.length || 0) + (fontCache.italic?.length || 0)
+    });
+    
+    return fontCache as { regular: Buffer; bold: Buffer; italic: Buffer };
+  } catch (error) {
+    debug.errorWithContext('Font loading error', error as Error, {
+      function: 'loadFonts',
+      baseUrl
+    });
+    
+    timer();
+    debug.exit('loadFonts', { 
+      success: false, 
+      error: error 
+    });
+    
+    throw error;
+  }
+}
+
+export interface OgImageOptions {
+  title: string;
+  subtitle?: string;
+  metaLine?: string;
+  author?: {
+    name: string;
+    handle?: string;
+    avatar?: string;
+  };
+  // For blog posts: wordCount, readingTime, date, etc.
+  extraMeta?: string[];
+  // For custom layouts
+  customChildren?: any;
+}
+
+/**
+ * Calculate optimal font size based on text length and available space
+ */
+function calculateTitleFontSize(title: string, maxWidth: number = 1000): number {
+  debug.enter('calculateTitleFontSize', { titleLength: title.length, maxWidth });
+  
+  const baseSize = 64;
+  const charThreshold = 45;
+  const minSize = 36;
+  
+  let fontSize: number;
+  
+  if (title.length <= charThreshold) {
+    fontSize = baseSize;
+    debug.debug('Title within threshold, using base size', { 
+      titleLength: title.length, 
+      charThreshold, 
+      fontSize 
+    });
+  } else {
+    const scaleFactor = Math.max(0.5, 1 - ((title.length - charThreshold) * 0.012));
+    fontSize = Math.max(minSize, Math.floor(baseSize * scaleFactor));
+    debug.debug('Title exceeds threshold, calculating scaled size', { 
+      titleLength: title.length, 
+      charThreshold, 
+      scaleFactor, 
+      fontSize 
+    });
+  }
+  
+  debug.exit('calculateTitleFontSize', { 
+    success: true, 
+    titleLength: title.length,
+    fontSize 
+  });
+  
+  return fontSize;
+}
+
+/**
+ * Calculate subtitle font size based on title size
+ */
+function calculateSubtitleFontSize(subtitle: string, titleSize: number): number {
+  debug.enter('calculateSubtitleFontSize', { subtitleLength: subtitle.length, titleSize });
+  
+  const baseRatio = 0.6;
+  const minSize = 24;
+  const maxSize = 48;
+  
+  const calculatedSize = Math.floor(titleSize * baseRatio);
+  const fontSize = Math.max(minSize, Math.min(maxSize, calculatedSize));
+  
+  debug.debug('Subtitle font size calculated', { 
+    subtitleLength: subtitle.length,
+    titleSize,
+    baseRatio,
+    calculatedSize,
+    fontSize,
+    constrained: fontSize !== calculatedSize
+  });
+  
+  debug.exit('calculateSubtitleFontSize', { 
+    success: true, 
+    fontSize 
+  });
+  
+  return fontSize;
+}
+
+/**
+ * Estimate content height for proper vertical centering
+ */
+function estimateContentHeight(options: OgImageOptions): {
+  titleHeight: number;
+  subtitleHeight: number;
+  metaHeight: number;
+  authorHeight: number;
+  totalContentHeight: number;
+} {
+  debug.enter('estimateContentHeight', { 
+    title: options.title?.substring(0, 30),
+    hasSubtitle: !!options.subtitle,
+    hasMeta: !!(options.metaLine || options.extraMeta?.length),
+    hasAuthor: !!options.author
+  });
+  
+  const titleSize = calculateTitleFontSize(options.title);
+  const titleHeight = titleSize * 1.2; // Line height factor
+  
+  let subtitleHeight = 0;
+  if (options.subtitle) {
+    const subtitleSize = calculateSubtitleFontSize(options.subtitle, titleSize);
+    subtitleHeight = subtitleSize * 1.3 + 16; // Line height + margin
+  }
+  
+  let metaHeight = 0;
+  if (options.metaLine || options.extraMeta?.length) {
+    metaHeight = 32 + 8; // Base height + margin
+  }
+  
+  let authorHeight = 0;
+  if (options.author) {
+    authorHeight = 80 + 24; // Avatar + name + margins
+  }
+  
+  const totalContentHeight = titleHeight + subtitleHeight + metaHeight + authorHeight;
+  
+  debug.debug('Content height estimation completed', {
+    titleSize,
+    titleHeight,
+    subtitleHeight,
+    metaHeight,
+    authorHeight,
+    totalContentHeight
+  });
+  
+  debug.exit('estimateContentHeight', { 
+    success: true, 
+    totalContentHeight 
+  });
+  
+  return {
+    titleHeight,
+    subtitleHeight,
+    metaHeight,
+    authorHeight,
+    totalContentHeight
+  };
+}
+
+/**
+ * Generate OG image with dynamic sizing and layout
+ * @param options OgImageOptions
+ * @param baseUrl Optional base URL for font loading
+ * @returns Promise<Buffer> PNG image buffer
+ */
+export async function generateOgImageImpl(options: OgImageOptions, baseUrl?: string): Promise<Buffer> {
+  debug.enter('generateOgImageImpl', { 
+    title: options.title?.substring(0, 50) + (options.title?.length > 50 ? '...' : ''),
+    hasSubtitle: !!options.subtitle,
+    hasAuthor: !!options.author,
+    baseUrl: baseUrl || 'none'
+  });
+  
+  const totalTimer = debug.time('generateOgImageImpl');
+  
+  try {
+    debug.info('Starting OG image implementation', {
+      titleLength: options.title?.length,
+      subtitleLength: options.subtitle?.length,
+      extraMetaCount: options.extraMeta?.length || 0
+    });
+    
+    // Load dependencies only when this function is called
+    debug.debug('Loading external dependencies');
+    const depTimer = debug.time('loadDependencies');
+    
+    const [satori, { Resvg }] = await Promise.all([
+      import('satori').then(module => {
+        debug.debug('Satori module loaded', { hasDefault: !!module.default });
+        return module.default;
+      }),
+      import('@resvg/resvg-js').then(module => {
+        debug.debug('Resvg module loaded', { hasResvg: !!module.Resvg });
+        return module;
+      })
+    ]);
+    
+    depTimer();
+    debug.info('External dependencies loaded successfully');
+
+    // Load fonts
+    debug.debug('Loading fonts');
+    const fonts = await loadFonts(baseUrl);
+    
+    // Calculate layout
+    debug.debug('Calculating content layout');
+    const contentHeight = estimateContentHeight(options);
+    
+    // Calculate vertical positioning for centering
+    const totalHeight = 630;
+    const startY = Math.max(80, (totalHeight - contentHeight.totalContentHeight) / 2);
+    
+    debug.debug('Layout calculations completed', {
+      totalHeight,
+      contentHeight: contentHeight.totalContentHeight,
+      startY
+    });
+    
+    // Build the main container with dynamic positioning
+    debug.debug('Building SVG container structure');
+    const mainContainer = {
+      type: 'div',
+      props: {
+        style: {
+          display: 'flex',
+          flexDirection: 'column',
+          width: '100%',
+          height: '100%',
+          backgroundColor: '#0f1a0f',
+          color: '#e8f5e8',
+          fontFamily: 'Recursive',
+          padding: '80px',
+          boxSizing: 'border-box',
+          position: 'relative',
+        },
+        children: [
+          // Title
+          {
+            type: 'h1',
+            props: {
+              style: {
+                fontSize: `${calculateTitleFontSize(options.title)}px`,
+                fontWeight: 700,
+                lineHeight: 1.1,
+                margin: '0 0 16px 0',
+                textAlign: 'center',
+                color: '#ffffff',
+                textShadow: '0 2px 8px rgba(0,0,0,0.3)',
+              },
+              children: options.title,
+            },
+          },
+          // Subtitle
+          options.subtitle && {
+            type: 'h2',
+            props: {
+              style: {
+                fontSize: `${calculateSubtitleFontSize(options.subtitle, calculateTitleFontSize(options.title))}px`,
+                fontWeight: 400,
+                lineHeight: 1.3,
+                margin: '0 0 24px 0',
+                textAlign: 'center',
+                color: '#8fd0a0',
+                opacity: 0.9,
+              },
+              children: options.subtitle,
+            },
+          },
+          // Meta information
+          (options.metaLine || options.extraMeta?.length) && {
+            type: 'div',
+            props: {
+              style: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: '8px',
+                margin: '0 0 32px 0',
+                opacity: 0.8,
+              },
+              children: [
+                options.metaLine && {
+                  type: 'p',
+                  props: {
+                    style: {
+                      fontSize: '18px',
+                      margin: '0',
+                      color: '#a8d5b8',
+                      fontWeight: 500,
+                    },
+                    children: options.metaLine,
+                  },
+                },
+                ...(options.extraMeta?.map(meta => ({
+                  type: 'p',
+                  props: {
+                    style: {
+                      fontSize: '16px',
+                      margin: '0',
+                      color: '#8fd0a0',
+                      fontWeight: 400,
+                    },
+                    children: meta,
+                  },
+                })) || []),
+              ].filter(Boolean),
+            },
+          },
+          // Author section
+          options.author && {
+            type: 'div',
+            props: {
+              style: {
+                display: 'flex',
+                flexDirection: 'row',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: '18px',
+                textAlign: 'center',
+                opacity: 0.85,
+                flexShrink: 0,
+              },
+              children: [
+                options.author.avatar && {
+                  type: 'img',
+                  props: {
+                    src: options.author.avatar,
+                    width: 64,
+                    height: 64,
+                    style: {
+                      borderRadius: '50%',
+                      border: '3px solid #2d4839',
+                      boxShadow: '0 2px 12px rgba(0,0,0,0.18)',
+                      background: '#1e2c23',
+                      flexShrink: 0,
+                    },
+                  },
+                },
+                {
+                  type: 'div',
+                  props: {
+                    style: {
+                      display: 'flex',
+                      flexDirection: 'column',
+                      alignItems: 'flex-start',
+                      gap: '2px',
+                    },
+                    children: [
+                      {
+                        type: 'span',
+                        props: {
+                          style: {
+                            fontSize: '22px',
+                            fontWeight: 700,
+                            fontStyle: 'normal',
+                            lineHeight: 1.1,
+                          },
+                          children: options.author.name,
+                        },
+                      },
+                      options.author.handle && {
+                        type: 'span',
+                        props: {
+                          style: {
+                            fontSize: '16px',
+                            color: '#8fd0a0',
+                            fontWeight: 400,
+                            fontStyle: 'italic',
+                          },
+                          children: '@' + options.author.handle,
+                        },
+                      },
+                    ].filter(Boolean),
+                  },
+                },
+              ].filter(Boolean),
+            },
+          },
+        ].filter(Boolean),
+      },
+    };
+
+    debug.debug('SVG container structure built', {
+      hasTitle: true,
+      hasSubtitle: !!options.subtitle,
+      hasMeta: !!(options.metaLine || options.extraMeta?.length),
+      hasAuthor: !!options.author
+    });
+
+    // Compose SVG
+    debug.debug('Composing SVG with Satori');
+    const svgTimer = debug.time('satoriSvgComposition');
+    
+    const svg = await satori(mainContainer, {
+      width: 1200,
+      height: 630,
+      fonts: [
+        {
+          name: 'Recursive',
+          data: fonts.regular,
+          weight: 400,
+          style: 'normal',
+        },
+        {
+          name: 'Recursive',
+          data: fonts.bold,
+          weight: 700,
+          style: 'normal',
+        },
+        {
+          name: 'Recursive',
+          data: fonts.italic,
+          weight: 400,
+          style: 'italic',
+        },
+      ],
+    });
+    
+    svgTimer();
+    debug.debug('SVG composition completed', { svgLength: svg.length });
+
+    // Convert SVG to PNG
+    debug.debug('Converting SVG to PNG with Resvg');
+    const pngTimer = debug.time('svgToPngConversion');
+    
+    const resvg = new Resvg(svg, { fitTo: { mode: 'width', value: 1200 } });
+    const png = resvg.render();
+    const pngBuffer = png.asPng();
+    
+    pngTimer();
+    debug.debug('PNG conversion completed', { 
+      pngBufferLength: pngBuffer.length,
+      isBuffer: Buffer.isBuffer(pngBuffer)
+    });
+
+    totalTimer();
+    debug.info('OG image generation completed successfully', {
+      finalBufferLength: pngBuffer.length,
+      isBuffer: Buffer.isBuffer(pngBuffer)
+    });
+    
+    debug.exit('generateOgImageImpl', { 
+      success: true, 
+      resultType: typeof pngBuffer,
+      resultLength: pngBuffer?.length 
+    });
+    
+    return pngBuffer;
+  } catch (error) {
+    debug.errorWithContext('Failed to generate OG image', error as Error, {
+      function: 'generateOgImageImpl',
+      options: {
+        title: options.title?.substring(0, 100),
+        hasSubtitle: !!options.subtitle,
+        hasAuthor: !!options.author
+      }
+    });
+    
+    totalTimer();
+    debug.exit('generateOgImageImpl', { 
+      success: false, 
+      error: error 
+    });
+    
+    throw error;
+  }
+}

src/lib/services/blogService.ts

···
 async function loadAllPages(fetch: typeof window.fetch): Promise<any[]> {
   let allRecords: any[] = [];
   let cursor: string | undefined | null = undefined;
+  let pageCount = 0;
+  const MAX_PAGES = 10; // Prevent infinite loops
 
   do {
     // Construct request URL with optional cursor
···
       url.searchParams.set("cursor", cursor);
     }
 
-    const res = await fetch(url.toString());
-    if (!res.ok) throw new Error(`Failed to fetch page: ${res.status}`);
-    const body = await res.json();
+    // Add timeout to fetch request
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 8000); // 8 second timeout
 
-    // Append new records
-    if (body.records && Array.isArray(body.records)) {
-      allRecords = allRecords.concat(body.records);
+    try {
+      const res = await fetch(url.toString(), { 
+        signal: controller.signal,
+        headers: {
+          'Accept': 'application/json'
+        }
+      });
+      
+      clearTimeout(timeoutId);
+      
+      if (!res.ok) throw new Error(`Failed to fetch page: ${res.status}`);
+      const body = await res.json();
+
+      // Append new records
+      if (body.records && Array.isArray(body.records)) {
+        allRecords = allRecords.concat(body.records);
+      }
+
+      // Update cursor for next page
+      cursor = body.cursor ?? null;
+      pageCount++;
+      
+      // Safety check to prevent infinite loops
+      if (pageCount >= MAX_PAGES) {
+        console.warn(`Reached maximum page limit (${MAX_PAGES}), stopping pagination`);
+        break;
+      }
+    } catch (error) {
+      clearTimeout(timeoutId);
+      if (error instanceof Error && error.name === 'AbortError') {
+        console.warn('Request timed out, returning partial results');
+        break;
+      }
+      throw error;
     }
-
-    // Update cursor for next page
-    cursor = body.cursor ?? null;
   } while (cursor);
 
   return allRecords;
···
  */
 export async function loadAllPosts(fetch: typeof window.fetch): Promise<BlogServiceResult> {
   try {
-    // Load profile once
-    if (profile === undefined) {
-      profile = await getProfile(fetch);
-    }
+    // Add overall timeout for the entire operation
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 25000); // 25 second total timeout
+
+    try {
+      // Load profile once
+      if (profile === undefined) {
+        profile = await getProfile(fetch);
+      }
 
-    // Always fetch fresh data for blog posts
-    const records = await loadAllPages(fetch);
+      // Always fetch fresh data for blog posts
+      const records = await loadAllPages(fetch);
 
-    const mdposts: Map<string, MarkdownPost> = new Map();
-    for (const data of records) {
-      const processed = processRecord(data);
-      if (processed) {
-        mdposts.set(processed.rkey, processed);
+      const mdposts: Map<string, MarkdownPost> = new Map();
+      for (const data of records) {
+        const processed = processRecord(data);
+        if (processed) {
+          mdposts.set(processed.rkey, processed);
+        }
       }
-    }
 
-    // Convert markdown posts to full post format
-    allPosts = await parse(mdposts);
+      // Convert markdown posts to full post format
+      allPosts = await parse(mdposts);
 
-    // Sort posts chronologically (newest first)
-    sortedPosts = Array.from(allPosts.values()).sort(
-      (a, b) => b.createdAt.getTime() - a.createdAt.getTime()
-    );
+      // Sort posts chronologically (newest first)
+      sortedPosts = Array.from(allPosts.values()).sort(
+        (a, b) => b.createdAt.getTime() - a.createdAt.getTime()
+      );
 
-    // Assign reverse post numbers
-    const total = sortedPosts.length;
-    sortedPosts.forEach((post, index) => {
-      post.postNumber = total - index;
-    });
+      // Assign reverse post numbers
+      const total = sortedPosts.length;
+      sortedPosts.forEach((post, index) => {
+        post.postNumber = total - index;
+      });
 
-    return {
-      posts: allPosts,
-      profile,
-      sortedPosts,
-      getPost: (rkey: string) => allPosts?.get(rkey) ?? null,
-      getAdjacentPosts: (rkey: string) => {
-        const idx = sortedPosts.findIndex(p => p.rkey === rkey);
-        return {
-          previous: idx > 0 ? sortedPosts[idx - 1] : null,
-          next: idx < sortedPosts.length - 1 ? sortedPosts[idx + 1] : null,
-        };
-      },
-    };
+      clearTimeout(timeoutId);
+      
+      return {
+        posts: allPosts,
+        profile,
+        sortedPosts,
+        getPost: (rkey: string) => allPosts?.get(rkey) ?? null,
+        getAdjacentPosts: (rkey: string) => {
+          const idx = sortedPosts.findIndex(p => p.rkey === rkey);
+          return {
+            previous: idx > 0 ? sortedPosts[idx - 1] : null,
+            next: idx < sortedPosts.length - 1 ? sortedPosts[idx + 1] : null,
+          };
+        },
+      };
+    } catch (error) {
+      clearTimeout(timeoutId);
+      if (error instanceof Error && error.name === 'AbortError') {
+        console.warn('Blog loading timed out, returning cached data if available');
+        // Return cached data if available, otherwise empty result
+        if (allPosts && sortedPosts.length > 0) {
+          return {
+            posts: allPosts,
+            profile: profile || ({} as Profile),
+            sortedPosts,
+            getPost: (rkey: string) => allPosts!.get(rkey) ?? null,
+            getAdjacentPosts: (rkey: string) => {
+              const idx = sortedPosts.findIndex(p => p.rkey === rkey);
+              return {
+                previous: idx > 0 ? sortedPosts[idx - 1] : null,
+                next: idx < sortedPosts.length - 1 ? sortedPosts[idx + 1] : null,
+              };
+            },
+          };
+        }
+      }
+      throw error;
+    }
   } catch (err) {
     console.error("Error in loadAllPosts:", err);
     return {

src/lib/utils/README.md

···
+# Debugging Utility System
+
+This directory contains a comprehensive debugging utility system that provides structured logging, performance monitoring, and debugging capabilities across your application.
+
+## Features
+
+- **Multi-level logging**: error, warn, info, debug, trace
+- **Performance timing**: Built-in timing for functions and operations
+- **Context tracking**: File, function, and component-specific debugging
+- **Environment awareness**: Automatic detection of development/production modes
+- **Memory monitoring**: Track memory usage when available
+- **Structured output**: Consistent formatting with emojis and timestamps
+- **Error context**: Rich error logging with stack traces
+- **Circular reference handling**: Safe object serialization
+
+## Quick Start
+
+### Basic Usage
+
+```typescript
+import { debug, quickDebug } from '$lib/utils/debug.js';
+
+// Simple logging
+debug.info('Application started');
+debug.warn('Deprecated feature used');
+debug.error('Something went wrong');
+
+// Quick debugging
+quickDebug.log('Quick message');
+quickDebug.error('Quick error');
+```
+
+### File-Specific Debugging
+
+```typescript
+import { createFileDebugger } from '$lib/utils/debug.js';
+
+const debug = createFileDebugger('myFile.ts');
+
+debug.enter('myFunction', { param1: 'value' });
+debug.debug('Processing data...');
+debug.exit('myFunction', { result: 'success' });
+```
+
+### Component Debugging
+
+```typescript
+import { createComponentDebugger } from '$lib/utils/debug.js';
+
+const debug = createComponentDebugger('MyComponent');
+
+debug.lifecycle('MyComponent', 'mounted', { props: componentProps });
+debug.state('MyComponent', 'userData', { oldValue, newValue });
+debug.interaction('click', 'submitButton', { formData });
+```
+
+### Performance Timing
+
+```typescript
+const timer = debug.time('expensiveOperation');
+// ... do work ...
+timer(); // Logs the duration
+```
+
+### Error Handling
+
+```typescript
+try {
+  // ... risky operation ...
+} catch (error) {
+  debug.errorWithContext('Operation failed', error, {
+    function: 'myFunction',
+    additionalContext: 'extra info'
+  });
+}
+```
+
+## Configuration
+
+The debugger automatically configures itself based on environment variables:
+
+- `NODE_ENV=development` - Enables debugging
+- `DEBUG=true` - Forces debugging on in production
+- `DEBUG_LEVEL` - Set minimum log level (error, warn, info, debug, trace)
+
+### Custom Configuration
+
+```typescript
+import { Debugger } from '$lib/utils/debug.js';
+
+const customDebug = new Debugger({
+  enabled: true,
+  level: 'debug',
+  prefix: '[CUSTOM]',
+  includeTimestamp: true,
+  includeStack: true,
+  maxDepth: 5
+});
+```
+
+## Log Levels
+
+1. **error** ❌ - Critical errors that need immediate attention
+2. **warn** ⚠️ - Warnings about potential issues
+3. **info** ℹ️ - General information about application state
+4. **debug** 🐛 - Detailed debugging information
+5. **trace** 🔍 - Most verbose logging for deep debugging
+
+## Best Practices
+
+### 1. Use Appropriate Log Levels
+
+```typescript
+// Good
+debug.error('Database connection failed', error);
+debug.warn('API rate limit approaching');
+debug.info('User logged in successfully');
+debug.debug('Processing request data');
+debug.trace('Entering inner loop iteration');
+
+// Avoid
+debug.debug('CRITICAL ERROR: System down'); // Should be error
+debug.info('Debug: variable value is 42'); // Should be debug
+```
+
+### 2. Provide Context
+
+```typescript
+// Good
+debug.error('Failed to save user', error, {
+  userId: user.id,
+  operation: 'save',
+  timestamp: new Date().toISOString()
+});
+
+// Avoid
+debug.error('Failed to save user'); // No context
+```
+
+### 3. Use Function Entry/Exit
+
+```typescript
+async function processUser(userId: string) {
+  debug.enter('processUser', { userId });
+  
+  try {
+    const result = await doWork(userId);
+    debug.exit('processUser', { success: true, result });
+    return result;
+  } catch (error) {
+    debug.exit('processUser', { success: false, error });
+    throw error;
+  }
+}
+```
+
+### 4. Performance Monitoring
+
+```typescript
+async function fetchData() {
+  const timer = debug.time('fetchData');
+  const memory = debug.memory('before fetch');
+  
+  try {
+    const data = await api.get('/data');
+    memory('after fetch');
+    timer();
+    return data;
+  } catch (error) {
+    timer();
+    throw error;
+  }
+}
+```
+
+## Examples
+
+### API Route Debugging
+
+```typescript
+// src/routes/api/users/+server.ts
+import { createFileDebugger } from '$lib/utils/debug.js';
+
+const debug = createFileDebugger('api/users/+server.ts');
+
+export const GET = async ({ url }) => {
+  debug.enter('GET', { url: url.toString() });
+  
+  try {
+    const users = await getUsers();
+    debug.info('Users retrieved successfully', { count: users.length });
+    
+    debug.exit('GET', { success: true, userCount: users.length });
+    return json(users);
+  } catch (error) {
+    debug.errorWithContext('Failed to get users', error, { function: 'GET' });
+    debug.exit('GET', { success: false, error });
+    throw error;
+  }
+};
+```
+
+### Component Debugging
+
+```typescript
+// MyComponent.svelte
+<script>
+  import { createComponentDebugger } from '$lib/utils/debug.js';
+  import { onMount } from 'svelte';
+  
+  const debug = createComponentDebugger('MyComponent');
+  
+  export let data;
+  
+  onMount(() => {
+    debug.lifecycle('MyComponent', 'mounted', { hasData: !!data });
+  });
+  
+  $effect(() => {
+    debug.state('MyComponent', 'data', { data });
+  });
+</script>
+```
+
+### Service Layer Debugging
+
+```typescript
+// userService.ts
+import { createFileDebugger } from '$lib/utils/debug.js';
+
+const debug = createFileDebugger('userService.ts');
+
+export class UserService {
+  async createUser(userData: UserData) {
+    debug.enter('createUser', { email: userData.email });
+    const timer = debug.time('createUser');
+    
+    try {
+      const user = await this.db.users.create(userData);
+      debug.info('User created successfully', { userId: user.id });
+      
+      timer();
+      debug.exit('createUser', { success: true, userId: user.id });
+      return user;
+    } catch (error) {
+      debug.errorWithContext('Failed to create user', error, {
+        function: 'createUser',
+        userData: { email: userData.email }
+      });
+      
+      timer();
+      debug.exit('createUser', { success: false, error });
+      throw error;
+    }
+  }
+}
+```
+
+## Environment Variables
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `NODE_ENV` | - | Set to 'development' to enable debugging |
+| `DEBUG` | false | Force enable debugging |
+| `DEBUG_LEVEL` | 'info' | Minimum log level |
+| `DEBUG_PREFIX` | '[DEBUG]' | Custom log prefix |
+| `DEBUG_TIMESTAMP` | true | Include timestamps |
+| `DEBUG_STACK` | false | Include stack traces |
+
+## Production Considerations
+
+- Debugging is automatically disabled in production unless `DEBUG=true`
+- Performance impact is minimal when disabled
+- Sensitive data should never be logged
+- Consider log aggregation services for production debugging
+
+## Troubleshooting
+
+### Debugging Not Working
+
+1. Check `NODE_ENV` is set to 'development'
+2. Verify `DEBUG=true` if in production
+3. Ensure debug utility is imported correctly
+4. Check browser console for any errors
+
+### Too Much Logging
+
+1. Increase log level: `DEBUG_LEVEL=warn`
+2. Use more specific debuggers for targeted logging
+3. Disable specific debuggers in production
+
+### Performance Issues
+
+1. Use `debug.time()` to identify slow operations
+2. Monitor memory usage with `debug.memory()`
+3. Consider reducing log level in performance-critical sections

src/lib/utils/debug.ts

···
+/**
+ * Comprehensive debugging utility for development and production
+ */
+
+export interface DebugOptions {
+  enabled?: boolean;
+  level?: 'error' | 'warn' | 'info' | 'debug' | 'trace';
+  prefix?: string;
+  includeTimestamp?: boolean;
+  includeStack?: boolean;
+  maxDepth?: number;
+}
+
+export interface DebugContext {
+  file: string;
+  function: string;
+  line?: number;
+  component?: string;
+  userAgent?: string;
+  timestamp: string;
+}
+
+class Debugger {
+  private options: DebugOptions;
+  private context: Partial<DebugContext> = {};
+
+  constructor(options: DebugOptions = {}) {
+    this.options = {
+      enabled: process.env.NODE_ENV === 'development' || process.env.DEBUG === 'true',
+      level: 'info',
+      prefix: '[DEBUG]',
+      includeTimestamp: true,
+      includeStack: false,
+      maxDepth: 3,
+      ...options
+    };
+  }
+
+  /**
+   * Set context for all subsequent debug calls
+   */
+  setContext(context: Partial<DebugContext>): void {
+    this.context = { ...this.context, ...context };
+  }
+
+  /**
+   * Create a new debugger instance with specific context
+   */
+  withContext(context: Partial<DebugContext>): Debugger {
+    const newDebugger = new Debugger(this.options);
+    newDebugger.setContext({ ...this.context, ...context });
+    return newDebugger;
+  }
+
+  /**
+   * Log error messages
+   */
+  error(message: string, data?: any, error?: Error): void {
+    if (!this.shouldLog('error')) return;
+    this.log('error', message, data, error);
+  }
+
+  /**
+   * Log warning messages
+   */
+  warn(message: string, data?: any): void {
+    if (!this.shouldLog('warn')) return;
+    this.log('warn', message, data);
+  }
+
+  /**
+   * Log info messages
+   */
+  info(message: string, data?: any): void {
+    if (!this.shouldLog('info')) return;
+    this.log('info', message, data);
+  }
+
+  /**
+   * Log debug messages
+   */
+  debug(message: string, data?: any): void {
+    if (!this.shouldLog('debug')) return;
+    this.log('debug', message, data);
+  }
+
+  /**
+   * Log trace messages (most verbose)
+   */
+  trace(message: string, data?: any): void {
+    if (!this.shouldLog('trace')) return;
+    this.log('trace', message, data);
+  }
+
+  /**
+   * Log function entry
+   */
+  enter(functionName: string, params?: any): void {
+    if (!this.shouldLog('debug')) return;
+    this.debug(`→ Entering ${functionName}`, params);
+  }
+
+  /**
+   * Log function exit
+   */
+  exit(functionName: string, result?: any): void {
+    if (!this.shouldLog('debug')) return;
+    this.debug(`← Exiting ${functionName}`, result);
+  }
+
+  /**
+   * Log performance timing
+   */
+  time(label: string): () => void {
+    if (!this.shouldLog('debug')) return () => {};
+    
+    const start = performance.now();
+    this.debug(`⏱️ Starting timer: ${label}`);
+    
+    return () => {
+      const duration = performance.now() - start;
+      this.debug(`⏱️ Timer ${label}: ${duration.toFixed(2)}ms`);
+    };
+  }
+
+  /**
+   * Log memory usage (if available)
+   */
+  memory(label?: string): void {
+    if (!this.shouldLog('debug')) return;
+    
+    if (typeof performance !== 'undefined' && 'memory' in performance) {
+      const mem = (performance as any).memory;
+      this.debug(`💾 Memory ${label || 'usage'}:`, {
+        used: `${(mem.usedJSHeapSize / 1024 / 1024).toFixed(2)}MB`,
+        total: `${(mem.totalJSHeapSize / 1024 / 1024).toFixed(2)}MB`,
+        limit: `${(mem.jsHeapSizeLimit / 1024 / 1024).toFixed(2)}MB`
+      });
+    }
+  }
+
+  /**
+   * Log API calls
+   */
+  api(method: string, url: string, data?: any, response?: any): void {
+    if (!this.shouldLog('debug')) return;
+    this.debug(`🌐 API ${method} ${url}`, { request: data, response });
+  }
+
+  /**
+   * Log component lifecycle events
+   */
+  lifecycle(component: string, event: string, data?: any): void {
+    if (!this.shouldLog('debug')) return;
+    this.debug(`🔄 ${component} ${event}`, data);
+  }
+
+  /**
+   * Log state changes
+   */
+  state(component: string, oldState: any, newState: any): void {
+    if (!this.shouldLog('debug')) return;
+    this.debug(`📊 ${component} state change`, { from: oldState, to: newState });
+  }
+
+  /**
+   * Log user interactions
+   */
+  interaction(action: string, target: string, data?: any): void {
+    if (!this.shouldLog('debug')) return;
+    this.debug(`👆 User interaction: ${action} on ${target}`, data);
+  }
+
+  /**
+   * Log errors with full context
+   */
+  errorWithContext(message: string, error: Error, context?: any): void {
+    if (!this.shouldLog('error')) return;
+    
+    this.error(message, {
+      ...context,
+      error: {
+        name: error.name,
+        message: error.message,
+        stack: this.options.includeStack ? error.stack : undefined
+      }
+    });
+  }
+
+  /**
+   * Check if logging should occur for given level
+   */
+  private shouldLog(level: string): boolean {
+    if (!this.options.enabled) return false;
+    
+    const levels = ['error', 'warn', 'info', 'debug', 'trace'];
+    const currentLevelIndex = levels.indexOf(this.options.level || 'info');
+    const messageLevelIndex = levels.indexOf(level);
+    
+    return messageLevelIndex <= currentLevelIndex;
+  }
+
+  /**
+   * Format and output log message
+   */
+  private log(level: string, message: string, data?: any, error?: Error): void {
+    const timestamp = this.options.includeTimestamp ? new Date().toISOString() : '';
+    const prefix = this.options.prefix || '[DEBUG]';
+    const levelEmoji = this.getLevelEmoji(level);
+    
+    let output = `${prefix} ${levelEmoji} ${level.toUpperCase()}`;
+    
+    if (timestamp) {
+      output += ` [${timestamp}]`;
+    }
+    
+    if (this.context.file) {
+      output += ` [${this.context.file}`;
+      if (this.context.function) output += `:${this.context.function}`;
+      if (this.context.line) output += `:${this.context.line}`;
+      output += ']';
+    }
+    
+    output += ` ${message}`;
+    
+    // Console output based on level
+    switch (level) {
+      case 'error':
+        console.error(output, data || '');
+        if (error) console.error(error);
+        break;
+      case 'warn':
+        console.warn(output, data || '');
+        break;
+      case 'info':
+        console.info(output, data || '');
+        break;
+      case 'debug':
+      case 'trace':
+        console.log(output, data || '');
+        break;
+    }
+  }
+
+  /**
+   * Get emoji for log level
+   */
+  private getLevelEmoji(level: string): string {
+    switch (level) {
+      case 'error': return '❌';
+      case 'warn': return '⚠️';
+      case 'info': return 'ℹ️';
+      case 'debug': return '🐛';
+      case 'trace': return '🔍';
+      default: return '📝';
+    }
+  }
+
+  /**
+   * Safely stringify objects with circular reference handling
+   */
+  private safeStringify(obj: any, depth: number = 0): string {
+    if (depth > (this.options.maxDepth || 3)) return '[Max Depth Reached]';
+    if (obj === null) return 'null';
+    if (typeof obj === 'undefined') return 'undefined';
+    if (typeof obj === 'string') return obj;
+    if (typeof obj === 'number' || typeof obj === 'boolean') return String(obj);
+    
+    try {
+      if (obj instanceof Error) {
+        return `Error: ${obj.message}`;
+      }
+      
+      if (Array.isArray(obj)) {
+        return `[${obj.map(item => this.safeStringify(item, depth + 1)).join(', ')}]`;
+      }
+      
+      if (typeof obj === 'object') {
+        const entries = Object.entries(obj).map(([key, value]) => 
+          `${key}: ${this.safeStringify(value, depth + 1)}`
+        );
+        return `{${entries.join(', ')}}`;
+      }
+      
+      return String(obj);
+    } catch (error) {
+      return '[Circular Reference or Unstringifiable]';
+    }
+  }
+}
+
+// Create default debugger instance
+export const debug = new Debugger();
+
+// Create specialized debuggers for common use cases
+export const createFileDebugger = (file: string) => debug.withContext({ file });
+export const createComponentDebugger = (component: string) => debug.withContext({ component });
+export const createFunctionDebugger = (file: string, functionName: string) => 
+  debug.withContext({ file, function: functionName });
+
+// Export the Debugger class for custom instances
+export { Debugger };
+
+// Utility functions for quick debugging
+export const quickDebug = {
+  log: (message: string, data?: any) => debug.debug(message, data),
+  error: (message: string, error?: Error) => debug.error(message, undefined, error),
+  warn: (message: string, data?: any) => debug.warn(message, data),
+  info: (message: string, data?: any) => debug.info(message, data),
+  trace: (message: string, data?: any) => debug.trace(message, data)
+};
+
+// Environment detection helpers
+export const isDevelopment = () => process.env.NODE_ENV === 'development';
+export const isProduction = () => process.env.NODE_ENV === 'production';
+export const isTest = () => process.env.NODE_ENV === 'test';
+export const isDebugEnabled = () => process.env.DEBUG === 'true';

src/lib/utils/dynamicImports.ts

···
+/**
+ * Dynamic import utilities for code splitting and reducing initial bundle size
+ */
+
+import { createFileDebugger } from './debug.js';
+
+const debug = createFileDebugger('dynamicImports.ts');
+
+// Lazy load markdown processing libraries
+export const loadMarkdownProcessor = async () => {
+  debug.enter('loadMarkdownProcessor');
+  const timer = debug.time('loadMarkdownProcessor');
+  
+  try {
+    debug.info('Loading markdown processing libraries...');
+    
+    const [
+      { unified },
+      { remark },
+      remarkGfm,
+      remarkMath,
+      remarkEmoji,
+      remarkBreaks,
+      remarkRehype,
+      rehypeStringify,
+      rehypeRaw,
+      rehypeSanitize,
+      rehypeHighlight,
+      rehypeKatex,
+      rehypeSlug,
+      rehypeAutolinkHeadings
+    ] = await Promise.all([
+      import('unified').then(module => {
+        debug.debug('Loaded unified module', { hasUnified: !!module.unified });
+        return module;
+      }),
+      import('remark').then(module => {
+        debug.debug('Loaded remark module', { hasRemark: !!module.remark });
+        return module;
+      }),
+      import('remark-gfm').then(module => {
+        debug.debug('Loaded remark-gfm module', { hasDefault: !!module.default });
+        return module.default;
+      }),
+      import('remark-math').then(module => {
+        debug.debug('Loaded remark-math module', { hasDefault: !!module.default });
+        return module.default;
+      }),
+      import('remark-emoji').then(module => {
+        debug.debug('Loaded remark-emoji module', { hasDefault: !!module.default });
+        return module.default;
+      }),
+      import('remark-breaks').then(module => {
+        debug.debug('Loaded remark-breaks module', { hasDefault: !!module.default });
+        return module.default;
+      }),
+      import('remark-rehype').then(module => {
+        debug.debug('Loaded remark-rehype module', { hasDefault: !!module.default });
+        return module.default;
+      }),
+      import('rehype-stringify').then(module => {
+        debug.debug('Loaded rehype-stringify module', { hasDefault: !!module.default });
+        return module.default;
+      }),
+      import('rehype-raw').then(module => {
+        debug.debug('Loaded rehype-raw module', { hasDefault: !!module.default });
+        return module.default;
+      }),
+      import('rehype-sanitize').then(module => {
+        debug.debug('Loaded rehype-sanitize module', { hasDefault: !!module.default });
+        return module.default;
+      }),
+      import('rehype-highlight').then(module => {
+        debug.debug('Loaded rehype-highlight module', { hasDefault: !!module.default });
+        return module.default;
+      }),
+      import('rehype-katex').then(module => {
+        debug.debug('Loaded rehype-katex module', { hasDefault: !!module.default });
+        return module.default;
+      }),
+      import('rehype-slug').then(module => {
+        debug.debug('Loaded rehype-slug module', { hasDefault: !!module.default });
+        return module.default;
+      }),
+      import('rehype-autolink-headings').then(module => {
+        debug.debug('Loaded rehype-autolink-headings module', { hasDefault: !!module.default });
+        return module.default;
+      })
+    ]);
+
+    const result = {
+      unified,
+      remark,
+      remarkGfm,
+      remarkMath,
+      remarkEmoji,
+      remarkBreaks,
+      remarkRehype,
+      rehypeStringify,
+      rehypeRaw,
+      rehypeSanitize,
+      rehypeHighlight,
+      rehypeKatex,
+      rehypeSlug,
+      rehypeAutolinkHeadings
+    };
+
+    debug.info('Successfully loaded all markdown processing libraries', {
+      loadedModules: Object.keys(result).filter(key => result[key as keyof typeof result])
+    });
+
+    timer();
+    debug.exit('loadMarkdownProcessor', { success: true, moduleCount: Object.keys(result).length });
+    return result;
+  } catch (error) {
+    debug.errorWithContext('Failed to load markdown processing libraries', error as Error, {
+      function: 'loadMarkdownProcessor'
+    });
+    timer();
+    debug.exit('loadMarkdownProcessor', { success: false, error: error });
+    throw error;
+  }
+};
+
+// Lazy load OG image generation libraries
+export const loadOGImageGenerator = async () => {
+  debug.enter('loadOGImageGenerator');
+  const timer = debug.time('loadOGImageGenerator');
+  
+  try {
+    debug.info('Loading OG image generation libraries...');
+    
+    const [satori] = await Promise.all([
+      import('satori').then(module => {
+        debug.debug('Loaded satori module', { hasDefault: !!module.default });
+        return module.default;
+      })
+    ]);
+
+    const result = { satori };
+    
+    debug.info('Successfully loaded OG image generation libraries', {
+      loadedModules: Object.keys(result)
+    });
+
+    timer();
+    debug.exit('loadOGImageGenerator', { success: true, moduleCount: Object.keys(result).length });
+    return result;
+  } catch (error) {
+    debug.errorWithContext('Failed to load OG image generation libraries', error as Error, {
+      function: 'loadOGImageGenerator'
+    });
+    timer();
+    debug.exit('loadOGImageGenerator', { success: false, error: error });
+    throw error;
+  }
+};
+
+// Lazy load utility libraries
+export const loadUtilities = async () => {
+  debug.enter('loadUtilities');
+  const timer = debug.time('loadUtilities');
+  
+  try {
+    debug.info('Loading utility libraries...');
+    
+    const [sanitizeHtml] = await Promise.all([
+      import('sanitize-html').then(module => {
+        debug.debug('Loaded sanitize-html module', { hasDefault: !!module.default });
+        return module.default;
+      })
+    ]);
+
+    const result = { sanitizeHtml };
+    
+    debug.info('Successfully loaded utility libraries', {
+      loadedModules: Object.keys(result)
+    });
+
+    timer();
+    debug.exit('loadUtilities', { success: true, moduleCount: Object.keys(result).length });
+    return result;
+  } catch (error) {
+    debug.errorWithContext('Failed to load utility libraries', error as Error, {
+      function: 'loadUtilities'
+    });
+    timer();
+    debug.exit('loadUtilities', { success: false, error: error });
+    throw error;
+  }
+};
+
+// Preload critical dependencies when needed
+export const preloadDependencies = async (type: 'markdown' | 'og' | 'utilities') => {
+  debug.enter('preloadDependencies', { type });
+  const timer = debug.time(`preloadDependencies:${type}`);
+  
+  try {
+    debug.info(`Preloading dependencies for type: ${type}`);
+    
+    let result;
+    switch (type) {
+      case 'markdown':
+        result = await loadMarkdownProcessor();
+        break;
+      case 'og':
+        result = await loadOGImageGenerator();
+        break;
+      case 'utilities':
+        result = await loadUtilities();
+        break;
+      default:
+        const error = new Error(`Unknown dependency type: ${type}`);
+        debug.error(`Unknown dependency type: ${type}`);
+        throw error;
+    }
+
+    debug.info(`Successfully preloaded dependencies for type: ${type}`, {
+      type,
+      resultKeys: Object.keys(result || {})
+    });
+
+    timer();
+    debug.exit('preloadDependencies', { success: true, type, resultKeys: Object.keys(result || {}) });
+    return result;
+  } catch (error) {
+    debug.errorWithContext(`Failed to preload dependencies for type: ${type}`, error as Error, {
+      function: 'preloadDependencies',
+      type
+    });
+    timer();
+    debug.exit('preloadDependencies', { success: false, type, error: error });
+    throw error;
+  }
+};
+
+// Check if dependencies are already loaded
+export const isDependencyLoaded = (type: string): boolean => {
+  debug.enter('isDependencyLoaded', { type });
+  
+  let result = false;
+  try {
+    switch (type) {
+      case 'markdown':
+        result = typeof window !== 'undefined' && 'unified' in window;
+        break;
+      case 'og':
+        result = typeof window !== 'undefined' && 'satori' in window;
+        break;
+      case 'utilities':
+        result = typeof window !== 'undefined' && 'sanitizeHtml' in window;
+        break;
+      default:
+        debug.warn(`Unknown dependency type: ${type}`);
+        result = false;
+    }
+
+    debug.debug(`Dependency ${type} loaded status: ${result}`, {
+      type,
+      isWindow: typeof window !== 'undefined',
+      result
+    });
+
+    debug.exit('isDependencyLoaded', { type, result });
+    return result;
+  } catch (error) {
+    debug.errorWithContext(`Error checking if dependency ${type} is loaded`, error as Error, {
+      function: 'isDependencyLoaded',
+      type
+    });
+    debug.exit('isDependencyLoaded', { type, result: false, error: error });
+    return false;
+  }
+};

src/lib/utils/index.ts

···
+// Export all utility functions
+export * from './cache';
+export * from './formatters';
+export * from './milestones';
+export * from './tally';
+export * from './textProcessor';
+export * from './xml';
+export * from './mathLoader';
+export * from './performance';
+export * from './dynamicImports';

src/lib/utils/mathLoader.ts

···
+/**
+ * Dynamic KaTeX CSS loader for math content
+ * Only loads KaTeX styles when needed, improving initial page load performance
+ */
+
+let katexLoaded = false;
+
+export async function loadKaTeX(): Promise<void> {
+  if (katexLoaded) return;
+  
+  try {
+    // Check if KaTeX CSS is already loaded
+    if (document.querySelector('link[href*="katex"]')) {
+      katexLoaded = true;
+      return;
+    }
+    
+    // Dynamically load KaTeX CSS
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = 'https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css';
+    link.crossOrigin = 'anonymous';
+    
+    // Add loading promise
+    const loadPromise = new Promise<void>((resolve, reject) => {
+      link.onload = () => {
+        katexLoaded = true;
+        resolve();
+      };
+      link.onerror = () => reject(new Error('Failed to load KaTeX CSS'));
+    });
+    
+    // Append to head
+    document.head.appendChild(link);
+    
+    // Wait for load to complete
+    await loadPromise;
+  } catch (error) {
+    console.warn('Failed to load KaTeX CSS:', error);
+    // Fallback: try to load from a different CDN or local file
+  }
+}
+
+export function isKaTeXLoaded(): boolean {
+  return katexLoaded;
+}
+
+/**
+ * Check if content contains math expressions and load KaTeX if needed
+ */
+export async function loadKaTeXIfNeeded(content: string): Promise<void> {
+  // Simple regex to detect potential math content
+  const mathPatterns = [
+    /\$\$[\s\S]*?\$\$/, // Display math
+    /\$[^$\n]*\$/, // Inline math
+    /\\\([\s\S]*?\\\)/, // LaTeX inline
+    /\\\[[\s\S]*?\\\]/, // LaTeX display
+    /\\begin\{.*?\}[\s\S]*?\\end\{.*?\}/, // LaTeX environments
+  ];
+  
+  const hasMath = mathPatterns.some(pattern => pattern.test(content));
+  
+  if (hasMath) {
+    await loadKaTeX();
+  }
+}

src/lib/utils/performance.ts

···
+/**
+ * Performance monitoring utilities for tracking Core Web Vitals and performance metrics
+ */
+
+export interface PerformanceMetrics {
+  fcp: number | null;
+  lcp: number | null;
+  fid: number | null;
+  cls: number | null;
+  ttfb: number | null;
+  fcpScore: string | null;
+  lcpScore: string | null;
+  fidScore: string | null;
+  clsScore: string | null;
+}
+
+/**
+ * Get performance score based on metric value and thresholds
+ */
+function getPerformanceScore(metric: number, thresholds: { good: number; needsImprovement: number }): string {
+  if (metric <= thresholds.good) return 'good';
+  if (metric <= thresholds.needsImprovement) return 'needs-improvement';
+  return 'poor';
+}
+
+/**
+ * Calculate First Contentful Paint score
+ */
+function getFCPScore(fcp: number): string {
+  return getPerformanceScore(fcp, { good: 1800, needsImprovement: 3000 });
+}
+
+/**
+ * Calculate Largest Contentful Paint score
+ */
+function getLCPScore(lcp: number): string {
+  return getPerformanceScore(lcp, { good: 2500, needsImprovement: 4000 });
+}
+
+/**
+ * Calculate First Input Delay score
+ */
+function getFIDScore(fid: number): string {
+  return getPerformanceScore(fid, { good: 100, needsImprovement: 300 });
+}
+
+/**
+ * Calculate Cumulative Layout Shift score
+ */
+function getCLSScore(cls: number): string {
+  return getPerformanceScore(cls, { good: 0.1, needsImprovement: 0.25 });
+}
+
+/**
+ * Measure Core Web Vitals and other performance metrics
+ */
+export function measurePerformance(): Promise<PerformanceMetrics> {
+  return new Promise((resolve) => {
+    const metrics: PerformanceMetrics = {
+      fcp: null,
+      lcp: null,
+      fid: null,
+      cls: null,
+      ttfb: null,
+      fcpScore: null,
+      lcpScore: null,
+      fidScore: null,
+      clsScore: null
+    };
+
+    // Measure TTFB (Time to First Byte)
+    const navigationEntry = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
+    if (navigationEntry) {
+      metrics.ttfb = navigationEntry.responseStart - navigationEntry.requestStart;
+    }
+
+    // Measure FCP (First Contentful Paint)
+    const fcpObserver = new PerformanceObserver((list) => {
+      const entries = list.getEntries();
+      const fcpEntry = entries.find(entry => entry.name === 'first-contentful-paint') as PerformanceEntry;
+      if (fcpEntry) {
+        metrics.fcp = fcpEntry.startTime;
+        metrics.fcpScore = getFCPScore(metrics.fcp);
+      }
+    });
+    fcpObserver.observe({ entryTypes: ['paint'] });
+
+    // Measure LCP (Largest Contentful Paint)
+    const lcpObserver = new PerformanceObserver((list) => {
+      const entries = list.getEntries();
+      const lastEntry = entries[entries.length - 1] as PerformanceEntry;
+      if (lastEntry) {
+        metrics.lcp = lastEntry.startTime;
+        metrics.lcpScore = getLCPScore(metrics.lcp);
+      }
+    });
+    lcpObserver.observe({ entryTypes: ['largest-contentful-paint'] });
+
+    // Measure FID (First Input Delay)
+    const fidObserver = new PerformanceObserver((list) => {
+      const entries = list.getEntries();
+      const fidEntry = entries[0] as PerformanceEntry;
+      if (fidEntry) {
+        metrics.fid = fidEntry.processingStart - fidEntry.startTime;
+        metrics.fidScore = getFIDScore(metrics.fid);
+      }
+    });
+    fidObserver.observe({ entryTypes: ['first-input'] });
+
+    // Measure CLS (Cumulative Layout Shift)
+    let clsValue = 0;
+    const clsObserver = new PerformanceObserver((list) => {
+      for (const entry of list.getEntries()) {
+        if (!(entry as any).hadRecentInput) {
+          clsValue += (entry as any).value;
+        }
+      }
+      metrics.cls = clsValue;
+      metrics.clsScore = getCLSScore(metrics.cls);
+    });
+    clsObserver.observe({ entryTypes: ['layout-shift'] });
+
+    // Wait for all metrics to be collected
+    setTimeout(() => {
+      fcpObserver.disconnect();
+      lcpObserver.disconnect();
+      fidObserver.disconnect();
+      clsObserver.disconnect();
+      resolve(metrics);
+    }, 5000); // Wait up to 5 seconds for metrics
+  });
+}
+
+/**
+ * Log performance metrics to console
+ */
+export function logPerformanceMetrics(metrics: PerformanceMetrics): void {
+  console.group('🚀 Performance Metrics');
+  console.log(`FCP: ${metrics.fcp?.toFixed(2)}ms (${metrics.fcpScore})`);
+  console.log(`LCP: ${metrics.lcp?.toFixed(2)}ms (${metrics.lcpScore})`);
+  console.log(`FID: ${metrics.fid?.toFixed(2)}ms (${metrics.fidScore})`);
+  console.log(`CLS: ${metrics.cls?.toFixed(3)} (${metrics.clsScore})`);
+  console.log(`TTFB: ${metrics.ttfb?.toFixed(2)}ms`);
+  console.groupEnd();
+}
+
+/**
+ * Send performance metrics to analytics (if configured)
+ */
+export function sendPerformanceMetrics(metrics: PerformanceMetrics, endpoint?: string): void {
+  if (!endpoint) return;
+
+  fetch(endpoint, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      timestamp: Date.now(),
+      url: window.location.href,
+      userAgent: navigator.userAgent,
+      ...metrics
+    })
+  }).catch(error => {
+    console.warn('Failed to send performance metrics:', error);
+  });
+}

src/routes/+layout.svelte

···
 <script lang="ts">
   import "$css/app.css";
   import { getStores } from "$app/stores";
+  import { onMount } from "svelte";
   const { page } = getStores();
   import Profile from "$components/profile/Profile.svelte";
   import { Footer, HeaderMain } from "$components/layout";
   import { NoScriptMessage } from "$components/shared";
+  import { measurePerformance, logPerformanceMetrics } from "$utils/performance";
 
   let { data, children } = $props();
 
···
   );
   const isHomePage = $derived($page.route.id === "/");
   const isBlogIndex = $derived($page.route.id === "/blog");
+
+  // Performance monitoring
+  onMount(() => {
+    // Measure performance after page load
+    setTimeout(async () => {
+      try {
+        const metrics = await measurePerformance();
+        logPerformanceMetrics(metrics);
+        
+        // Send metrics to analytics if configured
+        // sendPerformanceMetrics(metrics, '/api/analytics/performance');
+      } catch (error) {
+        console.warn('Performance measurement failed:', error);
+      }
+    }, 1000);
+  });
 </script>
 
 <!-- NoScript fallback -->

src/routes/+page.svelte

···
 <script lang="ts">
   import { onMount } from "svelte";
   import { getStores } from "$app/stores";
+  import { createComponentDebugger } from "$lib/utils/debug.js";
+  
   const { page } = getStores();
   import { DynamicLinks, LatestBlogPost } from "$components/layout/main";
+
+  // Create debugger for this component
+  const debug = createComponentDebugger('MainPage');
 
   let { data } = $props();
 
···
   let localeLoaded = $state(false);
 
   onMount(() => {
+    debug.lifecycle('MainPage', 'mounted', {
+      hasData: !!data,
+      dataKeys: data ? Object.keys(data) : [],
+      latestPostsCount: data?.latestPosts?.length || 0,
+      dynamicLinksCount: data?.dynamicLinks ? 'hasData' : 'noData'
+    });
+    
     // Set a brief timeout to ensure the browser has time to determine locale
     setTimeout(() => {
       localeLoaded = true;
+      debug.debug('Locale loaded state updated', { localeLoaded: true });
     }, 10);
   });
+
+  // Debug data changes
+  $effect(() => {
+    if (data) {
+      debug.state('MainPage', 'data', {
+        latestPostsCount: data.latestPosts?.length || 0,
+        dynamicLinksType: typeof data.dynamicLinks,
+        hasLatestPosts: !!data.latestPosts?.length,
+        hasDynamicLinks: !!data.dynamicLinks
+      });
+    }
+  });
+
+  // Debug locale changes
+  $effect(() => {
+    debug.state('MainPage', 'localeLoaded', { localeLoaded });
+  });
 </script>
 
 <svelte:head>
···
 <!-- Latest Blog Post section (only show if we have posts) -->
 {#if data.latestPosts && data.latestPosts.length > 0}
   <LatestBlogPost posts={data.latestPosts} {localeLoaded} />
+{:else}
+  {#if data.latestPosts !== undefined}
+    <div class="text-center py-8 text-gray-500">
+      No blog posts available
+    </div>
+  {/if}
 {/if}
 
 <DynamicLinks data={data.dynamicLinks} />

src/routes/api/og/main.png/+server.ts

···
 import { generateOgImage } from '$lib/server/ogImage';
 import { dev } from '$app/environment';
+import { createFileDebugger } from '$lib/utils/debug.js';
+
+const debug = createFileDebugger('api/og/main.png/+server.ts');
 
 export const GET = async ({ url }) => {
-  const baseUrl = dev ? url.origin : 'https://ewancroft.uk';
+  debug.enter('GET', { 
+    url: url.toString(),
+    userAgent: url.searchParams.get('user-agent') || 'unknown',
+    referer: url.searchParams.get('referer') || 'none'
+  });
   
-  const pngBuffer = await generateOgImage({
-    title: "Ewan's Corner",
-    subtitle: 'personal site, blog, and digital garden',
-  }, baseUrl);
+  const timer = debug.time('mainOgImageGeneration');
   
-  return new Response(new Uint8Array(pngBuffer), {
-    headers: {
-      'Content-Type': 'image/png',
-      'Cache-Control': 'public, max-age=86400',
-    },
-  });
+  try {
+    debug.info('Processing main OG image request', {
+      dev,
+      urlOrigin: url.origin,
+      baseUrl: dev ? url.origin : 'https://ewancroft.uk'
+    });
+    
+    const baseUrl = dev ? url.origin : 'https://ewancroft.uk';
+    
+    debug.debug('Calling generateOgImage with main site options');
+    const pngBuffer = await generateOgImage({
+      title: "Ewan's Corner",
+      subtitle: 'personal site, blog, and digital garden',
+    }, baseUrl);
+    
+    debug.info('OG image generated successfully', {
+      bufferLength: pngBuffer?.length,
+      isBuffer: Buffer.isBuffer(pngBuffer),
+      contentType: 'image/png'
+    });
+    
+    const response = new Response(new Uint8Array(pngBuffer), {
+      headers: {
+        'Content-Type': 'image/png',
+        'Cache-Control': 'public, max-age=86400',
+      },
+    });
+    
+    debug.debug('Response created successfully', {
+      status: response.status,
+      headers: Object.fromEntries(response.headers.entries())
+    });
+    
+    timer();
+    debug.exit('GET', { 
+      success: true, 
+      responseStatus: response.status,
+      bufferLength: pngBuffer?.length 
+    });
+    
+    return response;
+  } catch (error) {
+    debug.errorWithContext('Failed to generate main OG image', error as Error, {
+      function: 'GET',
+      url: url.toString()
+    });
+    
+    timer();
+    debug.exit('GET', { 
+      success: false, 
+      error: error 
+    });
+    
+    // Return an error response
+    return new Response('Failed to generate OG image', {
+      status: 500,
+      headers: {
+        'Content-Type': 'text/plain',
+      },
+    });
+  }
 };

static/robots.txt

···
+User-agent: *
+Allow: /
+
+# Sitemap
+Sitemap: https://ewancroft.uk/sitemap.xml

static/scripts/sw.js

···
+// Service Worker for website performance optimization
+const CACHE_NAME = 'website-cache-v1';
+const STATIC_CACHE = 'static-cache-v1';
+const DYNAMIC_CACHE = 'dynamic-cache-v1';
+
+// Files to cache immediately
+const STATIC_FILES = [
+  '/',
+  '/fonts/ArrowType-Recursive-1.085/Recursive_Web/woff2_variable/Recursive_VF_1.085.woff2',
+  '/scripts/themeLoader.js',
+  '/favicon/favicon-32x32.png',
+  '/favicon/apple-touch-icon.png'
+];
+
+// Install event - cache static files
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(STATIC_CACHE)
+      .then((cache) => {
+        console.log('Caching static files');
+        return cache.addAll(STATIC_FILES);
+      })
+      .catch((error) => {
+        console.log('Failed to cache static files:', error);
+      })
+  );
+});
+
+// Activate event - clean up old caches
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames.map((cacheName) => {
+          if (cacheName !== STATIC_CACHE && cacheName !== DYNAMIC_CACHE) {
+            console.log('Deleting old cache:', cacheName);
+            return caches.delete(cacheName);
+          }
+        })
+      );
+    })
+  );
+});
+
+// Fetch event - serve from cache when possible
+self.addEventListener('fetch', (event) => {
+  const { request } = event;
+  const url = new URL(request.url);
+
+  // Skip non-GET requests
+  if (request.method !== 'GET') {
+    return;
+  }
+
+  // Skip non-HTTP requests
+  if (!url.protocol.startsWith('http')) {
+    return;
+  }
+
+  // Handle different types of requests
+  if (request.destination === 'font') {
+    // Cache fonts aggressively
+    event.respondWith(cacheFirst(request, STATIC_CACHE));
+  } else if (request.destination === 'image') {
+    // Cache images with network fallback
+    event.respondWith(cacheFirst(request, DYNAMIC_CACHE));
+  } else if (request.destination === 'script' || request.destination === 'style') {
+    // Cache scripts and styles
+    event.respondWith(cacheFirst(request, STATIC_CACHE));
+  } else {
+    // For other requests, try network first
+    event.respondWith(networkFirst(request, DYNAMIC_CACHE));
+  }
+});
+
+// Cache first strategy - check cache first, fallback to network
+async function cacheFirst(request, cacheName) {
+  const cachedResponse = await caches.match(request);
+  if (cachedResponse) {
+    return cachedResponse;
+  }
+
+  try {
+    const networkResponse = await fetch(request);
+    if (networkResponse.ok) {
+      const cache = await caches.open(cacheName);
+      cache.put(request, networkResponse.clone());
+    }
+    return networkResponse;
+  } catch (error) {
+    // Return a fallback response if available
+    return new Response('Network error', { status: 408 });
+  }
+}
+
+// Network first strategy - try network first, fallback to cache
+async function networkFirst(request, cacheName) {
+  try {
+    const networkResponse = await fetch(request);
+    if (networkResponse.ok) {
+      const cache = await caches.open(cacheName);
+      cache.put(request, networkResponse.clone());
+    }
+    return networkResponse;
+  } catch (error) {
+    const cachedResponse = await caches.match(request);
+    if (cachedResponse) {
+      return cachedResponse;
+    }
+    return new Response('Network error', { status: 408 });
+  }
+}
+
+// Background sync for offline actions
+self.addEventListener('sync', (event) => {
+  if (event.tag === 'background-sync') {
+    event.waitUntil(doBackgroundSync());
+  }
+});
+
+async function doBackgroundSync() {
+  // Handle any background sync tasks
+  console.log('Background sync triggered');
+}

static/scripts/themeLoader.js

···
     COLOR: "color-theme",
   };
 
+  // Cache DOM element for better performance
+  const docElement = document.documentElement;
+  const themeClassList = docElement.classList;
+
   /**
    * Applies theme classes to the document element
    */
   function applyTheme(isDarkMode, themeId) {
-    // Remove all existing theme classes
-    document.documentElement.classList.remove("light");
-    THEMES.forEach((theme) => {
-      if (theme.id !== "default") {
-        document.documentElement.classList.remove(theme.id);
-      }
-    });
+    // Remove all existing theme classes efficiently
+    themeClassList.remove("light");
+    
+    // Only remove non-default themes to reduce DOM operations
+    if (themeId !== "default") {
+      THEMES.forEach((theme) => {
+        if (theme.id !== "default") {
+          themeClassList.remove(theme.id);
+        }
+      });
+    }
 
     // Apply light mode class if needed
     if (!isDarkMode) {
-      document.documentElement.classList.add("light");
+      themeClassList.add("light");
     }
 
     // Apply color theme class if not default
     if (themeId !== "default") {
-      document.documentElement.classList.add(themeId);
+      themeClassList.add(themeId);
     }
   }
 

static/sitemap.xml

···
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://ewancroft.uk/</loc>
+    <lastmod>2025-01-11</lastmod>
+    <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://ewancroft.uk/blog</loc>
+    <lastmod>2025-01-11</lastmod>
+    <changefreq>daily</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://ewancroft.uk/now</loc>
+    <lastmod>2025-01-11</lastmod>
+    <changefreq>monthly</changefreq>
+    <priority>0.6</priority>
+  </url>
+</urlset>

svelte.config.js

···
 		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
 		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
-		adapter: adapter(),
+		adapter: adapter({
+			runtime: 'nodejs20.x'
+		}),
 		prerender: {
 			entries: ['*'],
 			origin: 'https://ewancroft.uk'

vercel.json

···
+{
+  "routes": [
+    {
+      "src": "/favicon.ico",
+      "dest": "/static/favicon/favicon-32x32.png"
+    },
+    {
+      "src": "/apple-touch-icon.png",
+      "dest": "/static/favicon/apple-touch-icon.png"
+    },
+    {
+      "src": "/apple-touch-icon-precomposed.png",
+      "dest": "/static/favicon/apple-touch-icon.png"
+    },
+    {
+      "src": "/robots.txt",
+      "dest": "/static/robots.txt"
+    },
+    {
+      "src": "/sitemap.xml",
+      "dest": "/static/sitemap.xml"
+    }
+  ]
+}

vite.config.ts

···
   },
   build: {
     target: "esnext",
+    // Increase chunk size warning limit while we optimize
+    chunkSizeWarningLimit: 800,
+    // Enable source maps for debugging (disable in production if needed)
+    sourcemap: false,
+    // Optimize chunk splitting
+    rollupOptions: {
+      output: {
+        // Better chunk naming for caching
+        chunkFileNames: (chunkInfo) => {
+          const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/').pop() : 'chunk';
+          return `js/${facadeModuleId}-[hash].js`;
+        },
+        // Optimize asset naming
+        assetFileNames: (assetInfo) => {
+          if (!assetInfo.name) return 'assets/[name]-[hash].[ext]';
+          
+          const info = assetInfo.name.split('.');
+          const ext = info[info.length - 1];
+          if (/\.(css)$/.test(assetInfo.name)) {
+            return `css/[name]-[hash].${ext}`;
+          }
+          if (/\.(png|jpe?g|gif|svg|webp|avif)$/.test(assetInfo.name)) {
+            return `images/[name]-[hash].${ext}`;
+          }
+          if (/\.(woff2?|eot|ttf|otf)$/.test(assetInfo.name)) {
+            return `fonts/[name]-[hash].${ext}`;
+          }
+          return `assets/[name]-[hash].${ext}`;
+        }
+      }
+    }
   },
+  // Optimize dependencies
+  optimizeDeps: {
+    include: ['svelte'],
+    exclude: ['@resvg/resvg-js'] // Exclude heavy dependencies from pre-bundling
+  },
+  // Server optimizations for development
+  server: {
+    hmr: {
+      overlay: false
+    }
+  },
+  // Define environment variables for build optimization
+  define: {
+    __BUILD_TIME__: JSON.stringify(new Date().toISOString())
+  }
 });