diff --git a/package-lock.json b/package-lock.json
index d79e5d87..98a0f897 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "lodash-es": "^4.17.21",
         "ng-apexcharts": "^1.9.0",
         "rxjs": "~7.8.0",
+        "tailwindcss-scoped-preflight": "^3.2.5",
         "tslib": "^2.3.0",
         "zone.js": "~0.14.3"
       },
@@ -80,7 +81,6 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
       "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -3123,7 +3123,6 @@
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
       "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-      "dev": true,
       "dependencies": {
         "string-width": "^5.1.2",
         "string-width-cjs": "npm:string-width@^4.2.0",
@@ -3140,7 +3139,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
       "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
-      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -3152,7 +3150,6 @@
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
       "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
-      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -3163,14 +3160,12 @@
     "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "dev": true
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
     },
     "node_modules/@isaacs/cliui/node_modules/string-width": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
       "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "dev": true,
       "dependencies": {
         "eastasianwidth": "^0.2.0",
         "emoji-regex": "^9.2.2",
@@ -3187,7 +3182,6 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^6.0.1"
       },
@@ -3202,7 +3196,6 @@
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
       "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^6.1.0",
         "string-width": "^5.0.1",
@@ -3279,7 +3272,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -3306,8 +3298,7 @@
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
-      "dev": true
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
@@ -3365,7 +3356,6 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -3378,7 +3368,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -3387,7 +3376,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -3836,7 +3824,6 @@
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
       "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "dev": true,
       "optional": true,
       "engines": {
         "node": ">=14"
@@ -5762,7 +5749,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -5782,14 +5768,12 @@
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
     },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -5802,7 +5786,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -5828,8 +5811,7 @@
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
     },
     "node_modules/argparse": {
       "version": "1.0.10",
@@ -6094,8 +6076,7 @@
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
     "node_modules/bare-events": {
       "version": "2.2.2",
@@ -6318,7 +6299,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
       "dependencies": {
         "fill-range": "^7.0.1"
       },
@@ -6516,7 +6496,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -6650,7 +6629,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
       "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -7349,7 +7327,6 @@
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
       "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -7426,7 +7403,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
       "bin": {
         "cssesc": "bin/cssesc"
       },
@@ -7627,8 +7603,7 @@
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
     },
     "node_modules/diff": {
       "version": "5.2.0",
@@ -7663,8 +7638,7 @@
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
     },
     "node_modules/dns-packet": {
       "version": "5.6.1",
@@ -7775,8 +7749,7 @@
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "dev": true
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
     },
     "node_modules/ee-first": {
       "version": "1.1.1",
@@ -7808,8 +7781,7 @@
     "node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
     },
     "node_modules/emojis-list": {
       "version": "3.0.0",
@@ -8776,7 +8748,6 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
       "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -8804,7 +8775,6 @@
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
       "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
-      "dev": true,
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -8882,7 +8852,6 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -9026,7 +8995,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
       "integrity": "sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==",
-      "dev": true,
       "dependencies": {
         "cross-spawn": "^7.0.0",
         "signal-exit": "^4.0.1"
@@ -9131,7 +9099,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -9145,7 +9112,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -9249,7 +9215,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -9891,7 +9856,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -9918,7 +9882,6 @@
       "version": "2.13.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
       "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
-      "dev": true,
       "dependencies": {
         "hasown": "^2.0.0"
       },
@@ -9945,7 +9908,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -9954,7 +9916,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -9978,7 +9939,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -10011,7 +9971,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -10112,8 +10071,7 @@
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
     "node_modules/isobject": {
       "version": "3.0.1",
@@ -10210,7 +10168,6 @@
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
       "integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==",
-      "dev": true,
       "dependencies": {
         "@isaacs/cliui": "^8.0.2"
       },
@@ -10476,7 +10433,6 @@
       "version": "1.21.0",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz",
       "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==",
-      "dev": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -10889,7 +10845,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
       "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       }
@@ -11251,7 +11206,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -11269,7 +11223,6 @@
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
       "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-      "dev": true,
       "dependencies": {
         "braces": "^3.0.2",
         "picomatch": "^2.3.1"
@@ -11282,7 +11235,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -11395,7 +11347,6 @@
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
       "integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
-      "dev": true,
       "engines": {
         "node": ">=16 || 14 >=14.17"
       }
@@ -11637,7 +11588,6 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
       "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0",
         "object-assign": "^4.0.1",
@@ -11654,7 +11604,6 @@
       "version": "3.3.7",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
       "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -11879,7 +11828,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -12211,7 +12159,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -12220,7 +12167,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -12684,7 +12630,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -12692,8 +12637,7 @@
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "node_modules/path-scurry": {
       "version": "1.10.2",
@@ -12744,8 +12688,7 @@
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-      "dev": true
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
     "node_modules/picomatch": {
       "version": "4.0.1",
@@ -12772,7 +12715,6 @@
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
       "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
-      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -12959,7 +12901,6 @@
       "version": "15.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
       "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.0.0",
         "read-cache": "^1.0.0",
@@ -12976,7 +12917,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
       "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dev": true,
       "dependencies": {
         "camelcase-css": "^2.0.1"
       },
@@ -12995,7 +12935,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
       "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -13030,7 +12969,6 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.1.tgz",
       "integrity": "sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==",
-      "dev": true,
       "engines": {
         "node": ">=14"
       },
@@ -13138,7 +13076,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
       "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
-      "dev": true,
       "dependencies": {
         "postcss-selector-parser": "^6.0.11"
       },
@@ -13169,8 +13106,7 @@
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
@@ -13450,7 +13386,6 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -13540,7 +13475,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
       "dependencies": {
         "pify": "^2.3.0"
       }
@@ -13591,7 +13525,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -13603,7 +13536,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -13728,7 +13660,6 @@
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "dev": true,
       "dependencies": {
         "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
@@ -13870,7 +13801,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
@@ -13981,7 +13911,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -14371,7 +14300,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
       "dependencies": {
         "shebang-regex": "^3.0.0"
       },
@@ -14383,7 +14311,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -14745,7 +14672,6 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -14760,7 +14686,6 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -14774,7 +14699,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -14787,7 +14711,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -14846,7 +14769,6 @@
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
       "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.2",
         "commander": "^4.0.0",
@@ -14886,7 +14808,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -15086,11 +15007,19 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/tailwindcss-scoped-preflight": {
+      "version": "3.2.5",
+      "resolved": "https://registry.npmjs.org/tailwindcss-scoped-preflight/-/tailwindcss-scoped-preflight-3.2.5.tgz",
+      "integrity": "sha512-vhh9csxo2CK+FJFIFQC6jVLabGnLLG75JAMTBFjlC4oz02tmAnCbgWZdAVTnW1cym2QJgZNAVcz0wbDPPKdxsw==",
+      "peerDependencies": {
+        "postcss": "^8",
+        "tailwindcss": "^3"
+      }
+    },
     "node_modules/tailwindcss/node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -15377,7 +15306,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
       "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0"
       }
@@ -15386,7 +15314,6 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
       "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
       "dependencies": {
         "thenify": ">= 3.1.0 < 4"
       },
@@ -15428,7 +15355,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -15481,8 +15407,7 @@
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
     },
     "node_modules/tsconfig-paths": {
       "version": "4.2.0",
@@ -15746,8 +15671,7 @@
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
     "node_modules/utils-merge": {
       "version": "1.0.1",
@@ -16761,7 +16685,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
@@ -16778,7 +16701,6 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -16793,7 +16715,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -16804,8 +16725,7 @@
     "node_modules/wrap-ansi-cjs/node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "node_modules/wrap-ansi/node_modules/ansi-styles": {
       "version": "4.3.0",
diff --git a/package.json b/package.json
index d9f326c3..7e950873 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "lodash-es": "^4.17.21",
     "ng-apexcharts": "^1.9.0",
     "rxjs": "~7.8.0",
+    "tailwindcss-scoped-preflight": "^3.2.5",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"
   },
diff --git a/src/app/assumptions-and-limitation/assumptions-and-limitation.component.html b/src/app/assumptions-and-limitation/assumptions-and-limitation.component.html
index 8ba4b1cb..f437296b 100644
--- a/src/app/assumptions-and-limitation/assumptions-and-limitation.component.html
+++ b/src/app/assumptions-and-limitation/assumptions-and-limitation.component.html
@@ -1,183 +1,189 @@
-<div #assumptionsLimitation class="flex flex-col gap-4" tabindex="0">
-  <h2 class="text-2xl">Assumptions and Limitations</h2>
-  <p class="text-sm">
+<div #assumptionsLimitation class="tce-flex tce-flex-col tce-gap-4" tabindex="0">
+  <h2 class="tce-text-2xl">Assumptions and Limitations</h2>
+  <p class="tce-text-sm">
     The Technology Carbon Estimator tool is designed to give a high-level overview of the possible areas of carbon
     impact within your IT estate. We use a minimal number of questions to present this view, so we must make some
     assumptions based on that, which we list here for clarity. Where there are aspects that cannot be covered by this
     methodology, we also call out its limitations.
   </p>
 
-  <h3 class="text-xl">Assumptions</h3>
+  <h3 class="tce-text-xl">Assumptions</h3>
 
-  <h4 class="text-lg">Time period</h4>
-  <p class="text-sm">
+  <h4 class="tce-text-lg">Time period</h4>
+  <p class="tce-text-sm">
     The estimation is based on a typical year's utilization. Where relevant for energy calculations, we use different
     typical numbers of hours for different classes of hardware:
   </p>
-  <ul class="list-disc list-inside">
-    <li class="text-sm">
+  <ul class="tce-list-disc tce-list-inside">
+    <li class="tce-text-sm">
       Desktops, Laptops and Monitors - These both assume 8 hours of daily usage, for 230 days a year.
     </li>
-    <li class="text-sm">
+    <li class="tce-text-sm">
       Servers and Networking Devices - These both assume 24 hours of daily usage, for 365 days a year.
     </li>
   </ul>
-  <p class="text-sm">
+  <p class="tce-text-sm">
     Obviously, this may not match up with your organisation's usage, either due to different working hours or whether
     equipment is turned off during out of work hours.
   </p>
-  <h4 class="text-lg">Number of Employee Devices</h4>
-  <p class="text-sm">
+  <h4 class="tce-text-lg">Number of Employee Devices</h4>
+  <p class="tce-text-sm">
     Without a specified number of devices, we estimate based on the number of employees and the proportion of desktops
     to laptops specified. This may be an overestimate if a significant number of employees are not provided with
     devices, or an underestimate if they typically have more than one.
   </p>
-  <h4 class="text-lg">Number of Servers</h4>
-  <p class="text-sm">
+  <h4 class="tce-text-lg">Number of Servers</h4>
+  <p class="tce-text-sm">
     Without a specified number of servers, we give an initial estimate based on the 10% of the number of employees. This
     is reduced based on the percentage of cloud services that you report you make use of.
   </p>
-  <h4 class="text-lg">Number of Networking Devices</h4>
-  <p class="text-sm">
+  <h4 class="tce-text-lg">Number of Networking Devices</h4>
+  <p class="tce-text-sm">
     At present, we estimate a number of large networking devices based on the combined number of desktop devices and
     servers, applying a 50% ratio.
   </p>
-  <h4 class="text-lg">Power consumption</h4>
-  <p class="text-sm">
+  <h4 class="tce-text-lg">Power consumption</h4>
+  <p class="tce-text-sm">
     Each class of device is given an average power demand, based on data compiled from multiple sources and our own
-    research. The figures are rounded to the nearest Watt:
+    research. The figures are tce-rounded to the nearest Watt:
   </p>
-  <table class="w-fit">
+  <table class="tce-w-fit">
     <thead>
       <tr>
-        <th class="text-sm border border-slate-300 px-2 py-1 font-medium">Device Type</th>
-        <th class="text-sm border border-slate-300 px-2 py-1 font-medium">Average Power (Watts)</th>
+        <th class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1 tce-font-medium">Device Type</th>
+        <th class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1 tce-font-medium">
+          Average Power (Watts)
+        </th>
       </tr>
     </thead>
     <tbody>
       <tr>
-        <td class="text-sm border border-slate-300 px-2 py-1">Laptop</td>
-        <td class="text-sm border border-slate-300 px-2 py-1">17</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Laptop</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">17</td>
       </tr>
       <tr>
-        <td class="text-sm border border-slate-300 px-2 py-1">Desktop</td>
-        <td class="text-sm border border-slate-300 px-2 py-1">72</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Desktop</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">72</td>
       </tr>
       <tr>
-        <td class="text-sm border border-slate-300 px-2 py-1">Server</td>
-        <td class="text-sm border border-slate-300 px-2 py-1">400</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Server</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">400</td>
       </tr>
       <tr>
-        <td class="text-sm border border-slate-300 px-2 py-1">Network</td>
-        <td class="text-sm border border-slate-300 px-2 py-1">150</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Network</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">150</td>
       </tr>
       <tr>
-        <td class="text-sm border border-slate-300 px-2 py-1">Mobile</td>
-        <td class="text-sm border border-slate-300 px-2 py-1">1</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Mobile</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">1</td>
       </tr>
       <tr>
-        <td class="text-sm border border-slate-300 px-2 py-1">Tablet</td>
-        <td class="text-sm border border-slate-300 px-2 py-1">3</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Tablet</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">3</td>
       </tr>
       <tr>
-        <td class="text-sm border border-slate-300 px-2 py-1">Monitor</td>
-        <td class="text-sm border border-slate-300 px-2 py-1">30</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Monitor</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">30</td>
       </tr>
     </tbody>
   </table>
-  <p class="text-sm">
+  <p class="tce-text-sm">
     In the case of servers and network devices, we also apply an on-premises PUE factor of {{ ON_PREMISE_AVERAGE_PUE }},
     based on an average across all data centers.
   </p>
-  <h4 class="text-lg">Carbon Intensity</h4>
-  <p class="text-sm">
+  <h4 class="tce-text-lg">Carbon Intensity</h4>
+  <p class="tce-text-sm">
     We make use of the latest available Carbon Intensity figures from the
-    <a class="underline" href="https://ember-climate.org/data/data-tools/data-explorer/">Ember Data Explorer</a> for the
-    regions we make available. At present these are:
+    <a class="tce-underline" href="https://ember-climate.org/data/data-tools/data-explorer/">Ember Data Explorer</a> for
+    the regions we make available. At present these are:
   </p>
-  <table class="w-fit">
+  <table class="tce-w-fit">
     <thead>
       <tr>
-        <th class="text-sm border border-slate-300 px-2 py-1 font-medium">World Location</th>
-        <th class="text-sm border border-slate-300 px-2 py-1 font-medium">Carbon Intensity (Kg CO2e/kWh)</th>
+        <th class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1 tce-font-medium">World Location</th>
+        <th class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1 tce-font-medium">
+          Carbon Intensity (Kg CO2e/kWh)
+        </th>
       </tr>
     </thead>
     <tbody>
       @for (item of locationCarbonInfo; track $index) {
         <tr>
-          <td class="text-sm border border-slate-300 px-2 py-1">{{ item.location }}</td>
-          <td class="text-sm border border-slate-300 px-2 py-1">{{ item.carbonIntensity }}</td>
+          <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">{{ item.location }}</td>
+          <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">{{ item.carbonIntensity }}</td>
         </tr>
       }
     </tbody>
   </table>
-  <h4 class="text-lg">Upstream Emissions</h4>
-  <p class="text-sm">
+  <h4 class="tce-text-lg">Upstream Emissions</h4>
+  <p class="tce-text-sm">
     Each class of device is given an average amount of embodied carbon and a lifespan, based on averages taken from
     manufacturer provided Product Carbon Footprint documentation. At present these are:
   </p>
-  <table class="w-fit">
+  <table class="tce-w-fit">
     <thead>
       <tr>
-        <th class="text-sm border border-slate-300 px-2 py-1 font-medium">Device Type</th>
-        <th class="text-sm border border-slate-300 px-2 py-1 font-medium">Embodied Carbon (Kg Co2e)</th>
-        <th class="text-sm border border-slate-300 px-2 py-1 font-medium">Lifespan (Years)</th>
+        <th class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1 tce-font-medium">Device Type</th>
+        <th class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1 tce-font-medium">
+          Embodied Carbon (Kg Co2e)
+        </th>
+        <th class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1 tce-font-medium">Lifespan (Years)</th>
       </tr>
     </thead>
     <tbody>
       <tr>
-        <td class="text-sm border border-slate-300 px-2 py-1">Laptop</td>
-        <td class="text-sm border border-slate-300 px-2 py-1">230</td>
-        <td class="text-sm border border-slate-300 px-2 py-1">4</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Laptop</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">230</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">4</td>
       </tr>
       <tr>
-        <td class="text-sm border border-slate-300 px-2 py-1">Desktop</td>
-        <td class="text-sm border border-slate-300 px-2 py-1">400</td>
-        <td class="text-sm border border-slate-300 px-2 py-1">4</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Desktop</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">400</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">4</td>
       </tr>
       <tr>
-        <td class="text-sm border border-slate-300 px-2 py-1">Server</td>
-        <td class="text-sm border border-slate-300 px-2 py-1">1450</td>
-        <td class="text-sm border border-slate-300 px-2 py-1">4</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Server</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">1450</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">4</td>
       </tr>
       <tr>
-        <td class="text-sm border border-slate-300 px-2 py-1">Network</td>
-        <td class="text-sm border border-slate-300 px-2 py-1">650 *</td>
-        <td class="text-sm border border-slate-300 px-2 py-1">4</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Network</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">650 *</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">4</td>
       </tr>
       <tr>
-        <td class="text-sm border border-slate-300 px-2 py-1">Mobile</td>
-        <td class="text-sm border border-slate-300 px-2 py-1">54</td>
-        <td class="text-sm border border-slate-300 px-2 py-1">3</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Mobile</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">54</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">3</td>
       </tr>
       <tr>
-        <td class="text-sm border border-slate-300 px-2 py-1">Tablet</td>
-        <td class="text-sm border border-slate-300 px-2 py-1">134</td>
-        <td class="text-sm border border-slate-300 px-2 py-1">3</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Tablet</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">134</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">3</td>
       </tr>
       <tr>
-        <td class="text-sm border border-slate-300 px-2 py-1">Monitor</td>
-        <td class="text-sm border border-slate-300 px-2 py-1">350</td>
-        <td class="text-sm border border-slate-300 px-2 py-1">6</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Monitor</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">350</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">6</td>
       </tr>
     </tbody>
   </table>
-  <p class="text-sm italic">
+  <p class="tce-text-sm tce-italic">
     * The network device figure is reverse engineered from typical yearly energy and embodied carbon ratios as published
     values are difficult to find
   </p>
-  <h4 class="text-lg">Cloud Services</h4>
-  <p class="text-sm">
+  <h4 class="tce-text-lg">Cloud Services</h4>
+  <p class="tce-text-sm">
     We have derived average figures to convert from US dollars spent, to kWh of energy and kg of embodied CO2e.
     Beginning with a list of AWS EC2 instance prices, we combined this with
     <a
-      class="underline"
+      class="tce-underline"
       href="https://github.com/cloud-carbon-footprint/cloud-carbon-coefficients/blob/main/data/aws-instances.csv">
       power</a
     >
     and
     <a
-      class="underline"
+      class="tce-underline"
       href="https://github.com/cloud-carbon-footprint/ccf-coefficients/blob/main/output/coefficients-aws-embodied.csv">
       embodied</a
     >
@@ -188,43 +194,43 @@ <h4 class="text-lg">Cloud Services</h4>
     instance.<br />
     Some of the results from this were as follows:
   </p>
-  <table class="w-fit">
+  <table class="tce-w-fit">
     <thead>
       <tr>
-        <th class="text-sm border border-slate-300 px-2 py-1 font-medium">Figure</th>
-        <th class="text-sm border border-slate-300 px-2 py-1 font-medium">kWh per $</th>
-        <th class="text-sm border border-slate-300 px-2 py-1 font-medium">kg CO2e per $</th>
+        <th class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1 tce-font-medium">Figure</th>
+        <th class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1 tce-font-medium">kWh per $</th>
+        <th class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1 tce-font-medium">kg CO2e per $</th>
       </tr>
     </thead>
     <tbody>
       <tr>
-        <td class="text-sm border border-slate-300 px-2 py-1">Mean</td>
-        <td class="text-sm border border-slate-300 px-2 py-1">0.155819</td>
-        <td class="text-sm border border-slate-300 px-2 py-1">0.0164479</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Mean</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">0.155819</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">0.0164479</td>
       </tr>
       <tr>
-        <td class="text-sm border border-slate-300 px-2 py-1">Median</td>
-        <td class="text-sm border border-slate-300 px-2 py-1">0.097193</td>
-        <td class="text-sm border border-slate-300 px-2 py-1">0.00957173</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Median</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">0.097193</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">0.00957173</td>
       </tr>
       <tr>
-        <td class="text-sm border border-slate-300 px-2 py-1">Standard Deviation</td>
-        <td class="text-sm border border-slate-300 px-2 py-1">0.516504</td>
-        <td class="text-sm border border-slate-300 px-2 py-1">0.0910805</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Standard Deviation</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">0.516504</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">0.0910805</td>
       </tr>
       <tr>
-        <td class="text-sm border border-slate-300 px-2 py-1">Minimum</td>
-        <td class="text-sm border border-slate-300 px-2 py-1">0.007634</td>
-        <td class="text-sm border border-slate-300 px-2 py-1">0.000725901</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Minimum</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">0.007634</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">0.000725901</td>
       </tr>
       <tr>
-        <td class="text-sm border border-slate-300 px-2 py-1">Maximum</td>
-        <td class="text-sm border border-slate-300 px-2 py-1">48.9952</td>
-        <td class="text-sm border border-slate-300 px-2 py-1">8.17118</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">Maximum</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">48.9952</td>
+        <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">8.17118</td>
       </tr>
     </tbody>
   </table>
-  <p class="text-sm">
+  <p class="tce-text-sm">
     Clearly there is a large amount of variation here, with a wide variety of pricing options available based on lease
     period and upfront payment etc. This also only covers a single service that AWS provides but could be seen as the
     simplest available, with the most direct link between pricing and kWh of power available. Other services may cost
@@ -232,42 +238,50 @@ <h4 class="text-lg">Cloud Services</h4>
     power used. For these reasons we have decided to use the mean figures of ~0.156 kWh/$ and ~0.0164 kg CO2e/$ as the
     method of transforming cloud costs to kWh and kg CO2e for the purposes of Cloud Emissions.
   </p>
-  <p class="text-sm">
+  <p class="tce-text-sm">
     The estimated kWh of cloud usage is combined with an average Cloud PUE figure of {{ CLOUD_AVERAGE_PUE }} and the
     relevant Carbon Intensity figure for the selected Cloud Location to give a final kg CO2e estimation.
   </p>
-  <h4 class="text-lg">Downstream Emissions</h4>
-  <p class="text-sm">
+  <h4 class="tce-text-lg">Downstream Emissions</h4>
+  <p class="tce-text-sm">
     At present we focus on the downstream impact of web based services, estimating an amount time spent in hours and of
     Data transferred in Gb per month. To do this we have collated some average usage figures for different kinds of web
     services from online sources and our own research:
   </p>
-  <table class="w-fit">
+  <table class="tce-w-fit">
     <thead>
       <tr>
-        <th class="text-sm border border-slate-300 px-2 py-1 font-medium">Type</th>
-        <th class="text-sm border border-slate-300 px-2 py-1 font-medium">Average User Time (hours/month)</th>
-        <th class="text-sm border border-slate-300 px-2 py-1 font-medium">Average User Data (Gb/month)</th>
+        <th class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1 tce-font-medium">Type</th>
+        <th class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1 tce-font-medium">
+          Average User Time (hours/month)
+        </th>
+        <th class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1 tce-font-medium">
+          Average User Data (Gb/month)
+        </th>
       </tr>
     </thead>
     <tbody>
       @for (item of siteTypeInfo; track $index) {
         <tr>
-          <td class="text-sm border border-slate-300 px-2 py-1">{{ item.type }}</td>
-          <td class="text-sm border border-slate-300 px-2 py-1">{{ item.time | number: '1.0-6' }}</td>
-          <td class="text-sm border border-slate-300 px-2 py-1">{{ item.data | number: '1.0-6' }}</td>
+          <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">{{ item.type }}</td>
+          <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">
+            {{ item.time | number: '1.0-6' }}
+          </td>
+          <td class="tce-text-sm tce-border tce-border-slate-300 tce-px-2 tce-py-1">
+            {{ item.data | number: '1.0-6' }}
+          </td>
         </tr>
       }
     </tbody>
   </table>
-  <p class="text-sm">
+  <p class="tce-text-sm">
     These figures are combined with the provided Monthly active user number and service type to estimate figures for a
     full year. It should be noted that the 'Unspecified' option uses an average of the above figures and is not an
     attempt to describe an average website. For a general purpose static website the most appropriate option is
     'Information'.
   </p>
-  <h4 class="text-lg">Network Data Transfer</h4>
-  <p class="text-sm">
+  <h4 class="tce-text-lg">Network Data Transfer</h4>
+  <p class="tce-text-sm">
     Our outgoing network data estimation makes use of the
     <a href="https://developers.thegreenwebfoundation.org/co2js/overview/">CO2.js</a> library, specifically using the
     <a href="https://sustainablewebdesign.org/calculating-digital-emissions/">Sustainable Web Design</a> model. This
@@ -276,51 +290,53 @@ <h4 class="text-lg">Network Data Transfer</h4>
     point in time, due to the difficulties involved in making a more specific estimation of the Downstream Network
     infrastructure used by an organisation.
   </p>
-  <h4 class="text-lg">End-User Devices</h4>
-  <p class="text-sm">
+  <h4 class="tce-text-lg">End-User Devices</h4>
+  <p class="tce-text-sm">
     We combine device information to give an average power demand for a typical user of web services. Mobile phones are
     called out specifically as a separate percentage, due to their relatively low power demand. This is also an aspect
     that we want to break down further as there can be significant differences based on the method of data transfer
     (Wifi vs 3/4/5G).
   </p>
-  <h3 class="text-xl">Limitations</h3>
-  <p class="text-sm">Here are some aspects of the Tech Carbon Standard, which the tool currently does not consider.</p>
-  <h4 class="text-lg">Upstream Emissions</h4>
-  <h5 class="text-base">Off the Shelf Software</h5>
-  <p class="text-sm">
+  <h3 class="tce-text-xl">Limitations</h3>
+  <p class="tce-text-sm">
+    Here are some aspects of the Tech Carbon Standard, which the tool currently does not consider.
+  </p>
+  <h4 class="tce-text-lg">Upstream Emissions</h4>
+  <h5 class="tce-text-base">Off the Shelf Software</h5>
+  <p class="tce-text-sm">
     This is a tough area to estimate even with a detailed breakdown of the commercial software that an organisation
     makes use of. It is uncommon for organisations to publish the carbon footprint information for a piece of software.
     Even if this was available, there is still a question of how to apportion a given total to an organisation making
     use of it.
   </p>
-  <p class="text-sm">
+  <p class="tce-text-sm">
     Without this kind of detailed information, we could only make limited guesses about the typical software that might
     be used by an organisation of a given size within a specific industry. At this point in time, we do not feel that we
     have enough information to make an educated guess at its impact, although we welcome any contributions towards
     taking this into account.
   </p>
-  <h4 class="text-lg">Operational Emissions - Direct</h4>
-  <h5 class="text-base">Generators</h5>
-  <p class="text-sm">
+  <h4 class="tce-text-lg">Operational Emissions - Direct</h4>
+  <h5 class="tce-text-base">Generators</h5>
+  <p class="tce-text-sm">
     In the interests of using information that should be easy to source, we have omitted questions about whether your
     data centers have fossil fuel based generators and how often they are used. This is something we could investigate
     further in future, either via new questions or by using more fine-grained location data to estimate an average
     amount of electricity network downtime that might be typical and what effect that might have on your average Carbon
     Intensity.
   </p>
-  <h4 class="text-lg">Operational Emissions - Indirect</h4>
-  <h5 class="text-base">SaaS</h5>
-  <p class="text-sm">
+  <h4 class="tce-text-lg">Operational Emissions - Indirect</h4>
+  <h5 class="tce-text-base">SaaS</h5>
+  <p class="tce-text-sm">
     Like Off the shelf and open source software, this can be a difficult area to estimate even with the knowledge of the
     software services in use. This aspect is excluded at this point in time but we hope to consider more in future. Some
     aspects can be similar to Cloud Services that follow best practices.
   </p>
-  <h5 class="text-base">Managed Services</h5>
-  <p class="text-sm">
+  <h5 class="tce-text-base">Managed Services</h5>
+  <p class="tce-text-sm">
     We currently do not make a distinction between on-premises data centers and those ran by a third party.
   </p>
   <button
-    class="px-3 py-2 bg-sky-800 text-white rounded hover:bg-sky-900 self-end"
+    class="tce-px-3 tce-py-2 tce-bg-sky-800 tce-text-white tce-rounded hover:tce-bg-sky-900 tce-self-end"
     (click)="onClose()"
     aria-label="Close assumptions and limitations">
     Close
diff --git a/src/app/carbon-estimation/carbon-estimation.component.html b/src/app/carbon-estimation/carbon-estimation.component.html
index 3b8ed8a7..2aca2326 100644
--- a/src/app/carbon-estimation/carbon-estimation.component.html
+++ b/src/app/carbon-estimation/carbon-estimation.component.html
@@ -1,19 +1,23 @@
-<div class="flex flex-col" aria-live="polite">
-  <expansion-panel #detailsPanel (expandedChanged)="onExpanded()" class="flex justify-between gap-2 flex-col">
+<div class="tce-flex tce-flex-col" aria-live="polite">
+  <expansion-panel
+    #detailsPanel
+    (expandedChanged)="onExpanded()"
+    class="tce-flex tce-justify-between tce-gap-2 tce-flex-col">
     <div header>
-      <h2 class="text-2xl">Estimations</h2>
+      <h2 class="tce-text-2xl">Estimations</h2>
     </div>
     <div content>
       <p>
         The estimations are divided into 4 categories:
-        <a class="underline" href="https://www.techcarbonstandard.org/categories/upstream">Upstream Emissions</a>,
-        <a class="underline" href="https://www.techcarbonstandard.org/categories/operational#direct-emissions"
+        <a class="tce-underline" href="https://www.techcarbonstandard.org/categories/upstream">Upstream Emissions</a>,
+        <a class="tce-underline" href="https://www.techcarbonstandard.org/categories/operational#direct-emissions"
           >Operational Direct Emissions</a
         >,
-        <a class="underline" href="https://www.techcarbonstandard.org/categories/operational#indirect-emissions"
+        <a class="tce-underline" href="https://www.techcarbonstandard.org/categories/operational#indirect-emissions"
           >Operational Indirect Emissions</a
         >, and
-        <a class="underline" href="https://www.techcarbonstandard.org/categories/downstream">Downstream Emissions</a>.
+        <a class="tce-underline" href="https://www.techcarbonstandard.org/categories/downstream">Downstream Emissions</a
+        >.
       </p>
     </div>
   </expansion-panel>
diff --git a/src/app/carbon-estimator-form/carbon-estimator-form.component.html b/src/app/carbon-estimator-form/carbon-estimator-form.component.html
index c4f93252..0ea14939 100644
--- a/src/app/carbon-estimator-form/carbon-estimator-form.component.html
+++ b/src/app/carbon-estimator-form/carbon-estimator-form.component.html
@@ -1,26 +1,28 @@
-<form (ngSubmit)="handleSubmit()" [formGroup]="estimatorForm" class="w-full flex flex-col gap-6">
+<form (ngSubmit)="handleSubmit()" [formGroup]="estimatorForm" class="tce-w-full tce-flex tce-flex-col tce-gap-6">
   <div formGroupName="upstream">
     <ng-container *ngTemplateOutlet="sectionHeader; context: formContext.upstream"></ng-container>
 
-    <div class="flex flex-col gap-4">
-      <div class="flex flex-col gap-2">
-        <label class="text-sm text-slate-600" for="headCount">How many employees are in the organisation? </label>
+    <div class="tce-flex tce-flex-col tce-gap-4">
+      <div class="tce-flex tce-flex-col tce-gap-2">
+        <label class="tce-text-sm tce-text-slate-600" for="headCount"
+          >How many employees are in the organisation?
+        </label>
         <input
           id="headCount"
-          class="border border-slate-400 rounded"
+          class="tce-border tce-border-slate-400 tce-rounded"
           formControlName="headCount"
           name="headCount"
           type="number"
           min="1" />
       </div>
 
-      <div class="flex flex-col gap-2">
-        <label for="desktopPercentage" class="text-sm text-slate-600">
+      <div class="tce-flex tce-flex-col tce-gap-2">
+        <label for="desktopPercentage" class="tce-text-sm tce-text-slate-600">
           What percentage of those employee devices are desktops or laptops?
         </label>
         <input
           id="desktopPercentage"
-          class="cursor-pointer"
+          class="tce-cursor-pointer"
           formControlName="desktopPercentage"
           name="desktopPercentage"
           type="range"
@@ -28,7 +30,7 @@
           max="100"
           step="5"
           [attr.aria-valuetext]="'Desktops ' + desktopPercentage + '%, Laptops ' + laptopPercentage + '%'" />
-        <div class="flex justify-between text-sm text-slate-600">
+        <div class="tce-flex tce-justify-between tce-text-sm tce-text-slate-600">
           <span>Desktops {{ desktopPercentage }}%</span><span>Laptops {{ laptopPercentage }}%</span>
         </div>
       </div>
@@ -40,16 +42,16 @@
   <div formGroupName="onPremise">
     <ng-container *ngTemplateOutlet="sectionHeader; context: formContext.onPremise"></ng-container>
 
-    <div class="flex flex-col gap-4">
+    <div class="tce-flex tce-flex-col tce-gap-4">
       <p id="on-prem-servers-question">How many on-premise servers do you use?</p>
-      <div class="flex gap-2 items-center">
+      <div class="tce-flex tce-gap-2 tce-items-center">
         <input
           id="estimateServerCount"
           type="checkbox"
-          class="rounded-sm cursor-pointer"
+          class="tce-rounded-sm tce-cursor-pointer"
           formControlName="estimateServerCount"
           aria-describedby="on-prem-servers-question" />
-        <label for="estimateServerCount" class="cursor-pointer select-none">I don't know</label>
+        <label for="estimateServerCount" class="tce-cursor-pointer tce-select-none">I don't know</label>
       </div>
 
       @if (estimateServerCount) {
@@ -63,11 +65,11 @@
         </note>
       }
 
-      <div class="flex flex-col gap-2">
-        <label class="text-sm text-slate-600" for="numberOfServers">Number of Servers:</label>
+      <div class="tce-flex tce-flex-col tce-gap-2">
+        <label class="tce-text-sm tce-text-slate-600" for="numberOfServers">Number of Servers:</label>
         <input
           id="numberOfServers"
-          class="border border-slate-400 rounded disabled:bg-gray-200 disabled:text-slate-400 disabled:cursor-not-allowed"
+          class="tce-border tce-border-slate-400 tce-rounded disabled:tce-bg-gray-200 disabled:tce-text-slate-400 disabled:tce-cursor-not-allowed"
           formControlName="numberOfServers"
           name="numberOfServers"
           type="number"
@@ -81,24 +83,24 @@
   <div formGroupName="cloud">
     <ng-container *ngTemplateOutlet="sectionHeader; context: formContext.cloud"></ng-container>
 
-    <div class="flex flex-col gap-4">
-      <div class="flex gap-2 items-center">
+    <div class="tce-flex tce-flex-col tce-gap-4">
+      <div class="tce-flex tce-gap-2 tce-items-center">
         <input
           id="noCloudServices"
           type="checkbox"
           formControlName="noCloudServices"
-          class="rounded-sm cursor-pointer" />
-        <label for="noCloudServices" class="cursor-pointer select-none">We don't use cloud services</label>
+          class="tce-rounded-sm tce-cursor-pointer" />
+        <label for="noCloudServices" class="tce-cursor-pointer tce-select-none">We don't use cloud services</label>
       </div>
 
       @if (!noCloudServices) {
-        <div class="flex flex-col gap-2">
-          <label for="cloudPercentage" class="text-sm text-slate-600"
+        <div class="tce-flex tce-flex-col tce-gap-2">
+          <label for="cloudPercentage" class="tce-text-sm tce-text-slate-600"
             >What percentage of your servers are cloud services vs on-premise?</label
           >
           <input
             id="cloudPercentage"
-            class="cursor-pointer disabled:bg-gray-200 disabled:text-slate-400 disabled:cursor-not-allowed"
+            class="tce-cursor-pointer disabled:tce-bg-gray-200 disabled:tce-text-slate-400 disabled:tce-cursor-not-allowed"
             formControlName="cloudPercentage"
             name="cloudPercentage"
             type="range"
@@ -106,7 +108,7 @@
             max="100"
             step="5"
             [attr.aria-valuetext]="'Cloud ' + cloudPercentage + '%, On-premise' + onPremisePercentage + '%'" />
-          <div class="flex justify-between text-sm text-slate-600">
+          <div class="tce-flex tce-justify-between tce-text-sm tce-text-slate-600">
             <span>Cloud {{ cloudPercentage }}%</span>
             <span>On-premise {{ onPremisePercentage }}%</span>
           </div>
@@ -120,11 +122,11 @@
           </p>
         </div>
 
-        <div class="flex flex-col gap-2">
-          <label for="monthlyCloudBill" class="text-sm text-slate-600">What is your monthly cloud bill?</label>
+        <div class="tce-flex tce-flex-col tce-gap-2">
+          <label for="monthlyCloudBill" class="tce-text-sm tce-text-slate-600">What is your monthly cloud bill?</label>
           <select
             id="monthlyCloudBill"
-            class="border border-slate-400 rounded disabled:bg-gray-200 disabled:text-slate-400 disabled:cursor-not-allowed"
+            class="tce-border tce-border-slate-400 tce-rounded disabled:tce-bg-gray-200 disabled:tce-text-slate-400 disabled:tce-cursor-not-allowed tce-px-3 tce-py-2"
             formControlName="monthlyCloudBill"
             name="monthlyCloudBill"
             required>
@@ -139,33 +141,37 @@
 
   <div formGroupName="downstream">
     <ng-container *ngTemplateOutlet="sectionHeader; context: formContext.downstream"></ng-container>
-    <div class="flex flex-col gap-4">
-      <div class="flex gap-2 items-center">
-        <input id="noDownstream" type="checkbox" formControlName="noDownstream" class="rounded-sm cursor-pointer" />
+    <div class="tce-flex tce-flex-col tce-gap-4">
+      <div class="tce-flex tce-gap-2 tce-items-center">
+        <input
+          id="noDownstream"
+          type="checkbox"
+          formControlName="noDownstream"
+          class="tce-rounded-sm tce-cursor-pointer" />
         <label for="noDownstream" class="cursor-pointer select-none"
           >We don't have any external users of our digital services</label
         >
       </div>
 
       @if (!noDownstream) {
-        <div class="flex flex-col gap-2">
-          <div class="flex">
-            <label for="purposeOfSite" class="text-sm text-slate-600"
+        <div class="tce-flex tce-flex-col tce-gap-2">
+          <div class="tce-flex">
+            <label for="purposeOfSite" class="tce-text-sm tce-text-slate-600"
               >What's the primary purpose of your digital services?</label
             >
-            <helper-info class="ml-auto" inputLabel="What's the purpose of your website">
-              <p class="text-sm text-slate-600">
+            <helper-info class="tce-ml-auto" inputLabel="What's the purpose of your website">
+              <p class="tce-text-sm tce-text-slate-600">
                 The purpose of your digital services is used to determine the typical amount of time a user might spend
                 on them and the amount of data that may be transferred.
               </p>
-              <p class="text-sm text-slate-600">
+              <p class="tce-text-sm tce-text-slate-600">
                 This can affect the amount of energy used by end user devices and how much energy from network traffic
                 is attributable to your organisation
               </p>
             </helper-info>
           </div>
           <select
-            class="border border-slate-400 rounded"
+            class="tce-border tce-border-slate-400 tce-rounded"
             formControlName="purposeOfSite"
             name="purposeOfSite"
             id="purposeOfSite">
@@ -178,12 +184,12 @@
         </div>
         <ng-container *ngTemplateOutlet="locationInput; context: formContext.downstream"></ng-container>
 
-        <div class="flex flex-col gap-2">
-          <label for="monthlyActiveUsers" class="text-sm text-slate-600">
+        <div class="tce-flex tce-flex-col tce-gap-2">
+          <label for="monthlyActiveUsers" class="tce-text-sm tce-text-slate-600">
             How many monthly active users do your digital services have?
           </label>
           <input
-            class="border border-slate-400 rounded"
+            class="tce-border tce-border-slate-400 tce-rounded"
             formControlName="monthlyActiveUsers"
             name="monthlyActiveUsers"
             type="number"
@@ -191,19 +197,19 @@
             min="1" />
         </div>
 
-        <div class="flex flex-col gap-2">
-          <div class="flex">
-            <label for="mobilePercentage" class="text-sm text-slate-600">
+        <div class="tce-flex tce-flex-col tce-gap-2">
+          <div class="tce-flex">
+            <label for="mobilePercentage" class="tce-text-sm tce-text-slate-600">
               What percentage of your end-users are mobile or personal computer users?
             </label>
             <helper-info
-              class="ml-auto"
+              class="tce-ml-auto"
               inputLabel="What percentage of your users are mobile or personal computer users">
-              <p class="text-sm text-slate-600">
+              <p class="tce-text-sm tce-text-slate-600">
                 The percentage of mobile users will affect the energy used by end user devices and network
                 infrastructure.
               </p>
-              <p class="text-sm text-slate-600">
+              <p class="tce-text-sm tce-text-slate-600">
                 While the power demand of mobile devices is often much lower, the use of mobile networks can increase
                 the power used when transferring data.
               </p>
@@ -218,7 +224,7 @@
             max="100"
             step="5"
             [attr.aria-valuetext]="'Mobile ' + mobilePercentage + '%, Computer' + computerPercentage + '%'" />
-          <div class="flex justify-between text-sm text-slate-600">
+          <div class="tce-flex tce-justify-between tce-text-sm tce-text-slate-600">
             <span>Mobile {{ mobilePercentage }}%</span>
             <span>Computer {{ computerPercentage }}%</span>
           </div>
@@ -227,15 +233,15 @@
     </div>
   </div>
 
-  <div class="flex gap-4 flex-row-reverse">
+  <div class="tce-flex tce-gap-4 tce-flex-row-reverse">
     <button
-      class="px-3 py-2 !bg-sky-800 text-white rounded disabled:opacity-50 disabled:cursor-not-allowed hover:bg-sky-900"
+      class="tce-px-3 tce-py-2 tce-bg-sky-800 tce-text-white tce-rounded disabled:tce-opacity-50 disabled:tce-cursor-not-allowed hover:tce-bg-sky-900"
       type="submit"
       [disabled]="!estimatorForm.valid">
       Calculate
     </button>
     <button
-      class="px-3 py-2 !bg-slate-200 text-slate-800 rounded hover:bg-slate-300"
+      class="tce-px-3 tce-py-2 tce-bg-slate-200 tce-text-slate-800 tce-rounded hover:tce-bg-slate-300"
       type="button"
       (click)="resetForm()">
       Reset
@@ -249,14 +255,14 @@
     let-hasUnknown="location.hasUnknown"
     let-formControlName="location.formControlName"
     let-formGroupName="formGroupName">
-    <div formGroupName="{{ formGroupName }}" class="flex flex-col gap-2">
-      <div class="flex">
-        <label for="{{ formControlName }}" class="text-sm text-slate-600">{{ label }} </label>
+    <div formGroupName="{{ formGroupName }}" class="tce-flex tce-flex-col tce-gap-2">
+      <div class="tce-flex">
+        <label for="{{ formControlName }}" class="tce-text-sm tce-text-slate-600">{{ label }} </label>
         @if (helperText) {
-          <helper-info class="ml-auto" [inputLabel]="label">
-            <p class="text-sm text-slate-600">
+          <helper-info class="tce-ml-auto" [inputLabel]="label">
+            <p class="tce-text-sm tce-text-slate-600">
               This will affect the average
-              <a class="underline" href="https://www.techcarbonstandard.org/glossary#carbon-intensity"
+              <a class="tce-underline" href="https://www.techcarbonstandard.org/glossary#carbon-intensity"
                 >Carbon Intensity</a
               >
               of the energy used by your {{ helperText }}.
@@ -265,7 +271,7 @@
         }
       </div>
       <select
-        class="border border-slate-400 rounded"
+        class="tce-border tce-border-slate-400 tce-rounded tce-px-3 tce-py-2"
         name="{{ formControlName }}"
         formControlName="{{ formControlName }}"
         id="{{ formControlName }}">
@@ -286,9 +292,9 @@
 </form>
 
 <ng-template #sectionHeader let-heading="heading" let-sectionDetails="details">
-  <expansion-panel class="flex justify-between gap-2 flex-col mb-4">
+  <expansion-panel class="tce-flex tce-justify-between tce-gap-2 tce-flex-col tce-mb-4">
     <div header>
-      <h2 class="text-2xl">{{ heading }}</h2>
+      <h2 class="tce-text-2xl">{{ heading }}</h2>
     </div>
     <div content>
       <p>{{ sectionDetails }}</p>
diff --git a/src/app/expansion-panel/expansion-panel.component.html b/src/app/expansion-panel/expansion-panel.component.html
index 2d9f1596..568d8173 100644
--- a/src/app/expansion-panel/expansion-panel.component.html
+++ b/src/app/expansion-panel/expansion-panel.component.html
@@ -1,10 +1,10 @@
-<div class="flex justify-between">
+<div class="tce-flex tce-justify-between">
   <ng-content select="[header]"></ng-content>
   <button
     type="button"
     (click)="toggle()"
     (keydown.enter)="toggle()"
-    class="material-icons-outlined text text-slate-600 hover:bg-slate-200 hover:rounded"
+    class="material-icons-outlined tce-text tce-text-slate-600 hover:tce-bg-slate-200 hover:tce-rounded"
     [attr.aria-label]="expanded ? 'Hide details' : 'Show details'">
     {{ expanded ? 'expand_less' : 'expand_more' }}
   </button>
diff --git a/src/app/helper-info/helper-info.component.html b/src/app/helper-info/helper-info.component.html
index 5cdaef12..5a221051 100644
--- a/src/app/helper-info/helper-info.component.html
+++ b/src/app/helper-info/helper-info.component.html
@@ -3,19 +3,19 @@
   (click)="helperInfo.toggle()"
   type="button"
   [attr.aria-label]="inputLabel + ' helper popup'"
-  class="material-icons-outlined text-base text-slate-600 hover:bg-slate-300 rounded">
+  class="material-icons-outlined tce-text-base tce-text-slate-600 hover:tce-bg-slate-300 tce-rounded">
   help_outline
 </button>
 
 <sat-popover #helperInfo verticalAlign="above" hasBackdrop>
   <div
-    class="max-w-64 bg-white border border-slate-600 rounded p-2 before:w-4 before:h-4 before:rotate-45 before:bg-slate-600 before:absolute before:z-[-10] before:-bottom-1 before:left-0 before:right-0 before:mx-auto">
+    class="tce-max-w-64 tce-bg-white tce-border tce-border-slate-600 tce-rounded tce-p-2 before:tce-w-4 before:tce-h-4 before:tce-rotate-45 before:tce-bg-slate-600 before:tce-absolute before:tce-z-[-10] before:-tce-bottom-1 before:tce-left-0 before:tce-right-0 before:tce-mx-auto">
     <ng-content></ng-content>
   </div>
   <button
     (click)="helperInfo.close()"
     aria-label="Close helper popup"
-    class="absolute top-1 right-1 h-4 w-4 text-slate-800 rounded hover:bg-slate-300 text-base leading-4 text-slate-600 material-icons-outlined">
+    class="tce-absolute tce-top-1 tce-right-1 tce-h-4 tce-w-4 tce-text-slate-800 tce-rounded hover:tce-bg-slate-300 tce-text-base leading-4 tce-text-slate-600 material-icons-outlined">
     close
   </button>
 </sat-popover>
diff --git a/src/app/note/note.component.html b/src/app/note/note.component.html
index a97f4634..982b0f1f 100644
--- a/src/app/note/note.component.html
+++ b/src/app/note/note.component.html
@@ -1,4 +1,5 @@
-<div class="p-4 flex gap-4 bg-sky-200 border border-sky-400 rounded text-sm text-slate-800">
-  <span class="material-icons-outlined flex my-auto">info</span>
+<div
+  class="tce-p-4 tce-flex tce-gap-4 tce-bg-sky-200 tce-border tce-border-sky-400 tce-rounded tce-text-sm tce-text-slate-800">
+  <span class="material-icons-outlined tce-flex tce-my-auto">info</span>
   <ng-content></ng-content>
 </div>
diff --git a/src/app/tech-carbon-estimator/tech-carbon-estimator.component.html b/src/app/tech-carbon-estimator/tech-carbon-estimator.component.html
index 425789d0..2dd91f1b 100644
--- a/src/app/tech-carbon-estimator/tech-carbon-estimator.component.html
+++ b/src/app/tech-carbon-estimator/tech-carbon-estimator.component.html
@@ -1,25 +1,27 @@
-<div class="flex flex-col px-4 pt-4 md:pb-4 h-full">
-  <h1 class="text-3xl mb-6">Technology Carbon Estimator</h1>
-  <div class="flex w-full grow flex-wrap md:flex-nowrap">
+<div id="techCarbonEstimator" class="tce-flex tce-flex-col tce-px-4 tce-pt-4 md:tce-pb-4 tce-h-full">
+  <h1 class="tce-text-3xl tce-mb-6">Technology Carbon Estimator</h1>
+  <div class="tce-flex tce-w-full tce-grow tce-flex-wrap md:tce-flex-nowrap">
     @if (showAssumptionsAndLimitationView) {
       <assumptions-and-limitation
         #assumptionsLimitation
         aria-live="polite"
         (closeEvent)="closeAssumptionsAndLimitation($event)"
-        class="w-full md:w-1/2 pb-4 md:pb-0 md:pr-4"></assumptions-and-limitation>
+        class="tce-w-full md:tce-w-1/2 tce-pb-4 md:tce-pb-0 md:tce-pr-4"></assumptions-and-limitation>
     } @else {
       <carbon-estimator-form
         [formValue]="formValue"
         (formSubmit)="handleFormSubmit($event)"
-        class="w-full md:w-1/2 pb-4 md:pb-0 md:pr-4"></carbon-estimator-form>
+        class="tce-w-full md:tce-w-1/2 tce-pb-4 md:tce-pb-0 md:tce-pr-4"></carbon-estimator-form>
     }
     @if (showEstimation) {
-      <div #estimations class="w-full md:w-1/2 flex flex-col h-dvh md:h-fit py-4 md:py-0 md:pl-4 md:sticky md:top-0">
+      <div
+        #estimations
+        class="tce-w-full md:tce-w-1/2 tce-flex tce-flex-col tce-h-dvh md:tce-h-fit tce-py-4 md:tce-py-0 md:tce-pl-4 md:tce-sticky md:tce-top-0">
         <carbon-estimation [carbonEstimation]="carbonEstimation" [extraHeight]="extraHeight"></carbon-estimation>
         @if (!showAssumptionsAndLimitationView) {
           <button
             id="showAssumptionsAndLimitationButton"
-            class="px-3 py-2 bg-slate-200 text-slate-800 rounded hover:bg-slate-300 w-fit self-end"
+            class="tce-px-3 tce-py-2 tce-bg-slate-200 tce-text-slate-800 tce-rounded hover:tce-bg-slate-300 tce-w-fit tce-self-end"
             (click)="showAssumptionsAndLimitation()">
             Assumptions and limitations
           </button>
diff --git a/tailwind.config.js b/tailwind.config.js
index 876bde14..72992b1e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,8 +1,16 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
+import { isolateInsideOfContainer, scopedPreflightStyles } from 'tailwindcss-scoped-preflight';
+import  form  from '@tailwindcss/forms';
+
+export default {
   content: ['./src/**/*.{html,ts}'],
   theme: {
     extend: {},
   },
-  plugins: [require('@tailwindcss/forms')],
+  plugins: [
+    scopedPreflightStyles({
+      isolationStrategy: isolateInsideOfContainer('tech-carbon-estimator'),
+    }),
+    form
+],
+  prefix: 'tce-',
 };