diff --git a/.prettierrc b/.prettierrc
index cfc71534a..f8e67df07 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -7,5 +7,6 @@
   "arrowParens": "always",
 
   "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
-  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }],
+  "tailwindStylesheet": "./src/lib/app.css"
 }
diff --git a/package.json b/package.json
index 918727183..f0bb81846 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,10 @@
     "lib:build": "node scripts/build.js --run",
     "prepare": "husky"
   },
+  "imports": {
+    "#app.css": "./src/lib/app.css",
+    "#tailwind.config.js": "./tailwind.config.js"
+  },
   "exports": {
     "./app.css": "./dist/app.css",
     "./ui/*": {
@@ -55,6 +59,7 @@
     "dist",
     "plugins",
     "scripts",
+    "tailwind.config.js",
     "!*.config.ts",
     "!dist/**/*.test.*",
     "!dist/**/*.spec.*"
@@ -85,7 +90,7 @@
     "rxjs": "^7.8.1",
     "svelte": "^5.0.0-next.1",
     "tailwind-merge": "^2.3.0",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^4.3.0",
     "uuid": "^11.1.0",
     "viem": "~2.21.7",
     "vite": "^5.4.8",
@@ -113,6 +118,7 @@
     "@sveltejs/kit": "^2.20.7",
     "@sveltejs/package": "^2.3.5",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
+    "@tailwindcss/postcss": "^4.3.0",
     "@types/cloudflare-turnstile": "^0.2.2",
     "@types/eslint": "^9.6.1",
     "@types/gtag.js": "^0.0.20",
@@ -120,7 +126,6 @@
     "@types/ua-parser-js": "^0.7.39",
     "@wagmi/connectors": "^5.3.3",
     "@wagmi/core": "^2.14.1",
-    "autoprefixer": "^10.4.19",
     "bits-ui": "^1.3.4",
     "driver.js": "^1.4.0",
     "eslint": "^9.28.0",
@@ -146,9 +151,9 @@
     "phoenix": "^1.8.5",
     "photoswipe": "^5.4.4",
     "postcss": "^8.4.38",
-    "prettier": "^3.5.2",
-    "prettier-plugin-svelte": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.8",
+    "prettier": "^3.8.3",
+    "prettier-plugin-svelte": "^3.5.2",
+    "prettier-plugin-tailwindcss": "^0.8.0",
     "publint": "^0.1.9",
     "rxjs": "^7.8.2",
     "storybook": "^8.6.0",
@@ -158,7 +163,7 @@
     "svg-sprite": "^2.0.4",
     "svgo": "^3.3.2",
     "tailwind-merge": "^2.3.0",
-    "tailwindcss": "^3.4.3",
+    "tailwindcss": "^4.3.0",
     "tslib": "^2.8.1",
     "tsx": "^4.20.3",
     "typescript": "^5.7.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 34e56b0cd..8bfc8f924 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -51,10 +51,10 @@ dependencies:
     version: 0.3.28(svelte@5.35.4)
   tailwind-variants:
     specifier: ^0.3.0
-    version: 0.3.0(patch_hash=277oyanjyyxcufsnp2uhvrjhjy)(tailwindcss@3.4.3)
+    version: 0.3.0(patch_hash=277oyanjyyxcufsnp2uhvrjhjy)(tailwindcss@4.3.0)
   tailwindcss-animate:
     specifier: ^1.0.7
-    version: 1.0.7(tailwindcss@3.4.3)
+    version: 1.0.7(tailwindcss@4.3.0)
   ua-parser-js:
     specifier: 1.0.39
     version: 1.0.39
@@ -129,6 +129,9 @@ devDependencies:
   '@sveltejs/vite-plugin-svelte':
     specifier: ^5.0.3
     version: 5.0.3(svelte@5.35.4)(vite@6.2.5)
+  '@tailwindcss/postcss':
+    specifier: ^4.3.0
+    version: 4.3.0
   '@types/cloudflare-turnstile':
     specifier: ^0.2.2
     version: 0.2.2
@@ -150,9 +153,6 @@ devDependencies:
   '@wagmi/core':
     specifier: ^2.14.1
     version: 2.14.1(typescript@5.7.3)(use-sync-external-store@1.2.0)(viem@2.21.38)
-  autoprefixer:
-    specifier: ^10.4.19
-    version: 10.4.19(postcss@8.5.3)
   bits-ui:
     specifier: ^1.3.4
     version: 1.3.4(svelte@5.35.4)
@@ -173,7 +173,7 @@ devDependencies:
     version: 2.31.0(eslint-import-resolver-typescript@4.3.4)(eslint@9.28.0)
   eslint-plugin-prettier:
     specifier: ^5.2.6
-    version: 5.2.6(@types/eslint@9.6.1)(eslint-config-prettier@10.1.2)(eslint@9.28.0)(prettier@3.5.2)
+    version: 5.2.6(@types/eslint@9.6.1)(eslint-config-prettier@10.1.2)(eslint@9.28.0)(prettier@3.8.3)
   eslint-plugin-svelte:
     specifier: ^3.5.1
     version: 3.5.1(eslint@9.28.0)(svelte@5.35.4)
@@ -229,14 +229,14 @@ devDependencies:
     specifier: ^8.4.38
     version: 8.5.3
   prettier:
-    specifier: ^3.5.2
-    version: 3.5.2
+    specifier: ^3.8.3
+    version: 3.8.3
   prettier-plugin-svelte:
-    specifier: ^3.3.3
-    version: 3.3.3(prettier@3.5.2)(svelte@5.35.4)
+    specifier: ^3.5.2
+    version: 3.5.2(prettier@3.8.3)(svelte@5.35.4)
   prettier-plugin-tailwindcss:
-    specifier: ^0.6.8
-    version: 0.6.8(prettier-plugin-svelte@3.3.3)(prettier@3.5.2)
+    specifier: ^0.8.0
+    version: 0.8.0(prettier-plugin-svelte@3.5.2)(prettier@3.8.3)
   publint:
     specifier: ^0.1.9
     version: 0.1.16
@@ -245,7 +245,7 @@ devDependencies:
     version: 7.8.2
   storybook:
     specifier: ^8.6.0
-    version: 8.6.0(prettier@3.5.2)
+    version: 8.6.0(prettier@3.8.3)
   svelte:
     specifier: 5.35.4
     version: 5.35.4
@@ -265,8 +265,8 @@ devDependencies:
     specifier: ^2.3.0
     version: 2.5.4
   tailwindcss:
-    specifier: ^3.4.3
-    version: 3.4.3
+    specifier: ^4.3.0
+    version: 4.3.0
   tslib:
     specifier: ^2.8.1
     version: 2.8.1
@@ -310,6 +310,7 @@ packages:
   /@alloc/quick-lru@5.2.0:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
+    dev: true
 
   /@amplitude/analytics-browser@2.11.2:
     resolution: {integrity: sha512-RC3sAYDPZQrzyGWTyvDU+6vN2svHFSCzvpRMVm3TxyM1UWdw+WWXq+XR1R3FHAEhE8BszgUUv5CaXQ6F5Ng0CA==}
@@ -1291,17 +1292,6 @@ packages:
     dependencies:
       '@swc/helpers': 0.5.15
 
-  /@isaacs/cliui@8.0.2:
-    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
-    engines: {node: '>=12'}
-    dependencies:
-      string-width: 5.1.2
-      string-width-cjs: /string-width@4.2.3
-      strip-ansi: 7.1.0
-      strip-ansi-cjs: /strip-ansi@6.0.1
-      wrap-ansi: 8.1.0
-      wrap-ansi-cjs: /wrap-ansi@7.0.0
-
   /@jest/schemas@29.6.3:
     resolution: {integrity: sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -1322,6 +1312,14 @@ packages:
       '@jridgewell/set-array': 1.2.1
       '@jridgewell/sourcemap-codec': 1.5.0
       '@jridgewell/trace-mapping': 0.3.25
+    dev: true
+
+  /@jridgewell/remapping@2.3.5:
+    resolution: {integrity: sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==}
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.12
+      '@jridgewell/trace-mapping': 0.3.29
+    dev: true
 
   /@jridgewell/resolve-uri@3.1.2:
     resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
@@ -1330,6 +1328,7 @@ packages:
   /@jridgewell/set-array@1.2.1:
     resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
     engines: {node: '>=6.0.0'}
+    dev: true
 
   /@jridgewell/sourcemap-codec@1.5.0:
     resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}
@@ -1337,11 +1336,16 @@ packages:
   /@jridgewell/sourcemap-codec@1.5.4:
     resolution: {integrity: sha512-VT2+G1VQs/9oz078bLrYbecdZKs912zQlkelYpuf+SXF+QvZDYJlbx/LSx+meSAwdDFnF8FVXW92AVjjkVmgFw==}
 
+  /@jridgewell/sourcemap-codec@1.5.5:
+    resolution: {integrity: sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==}
+    dev: true
+
   /@jridgewell/trace-mapping@0.3.25:
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
     dependencies:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
+    dev: true
 
   /@jridgewell/trace-mapping@0.3.29:
     resolution: {integrity: sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==}
@@ -2398,12 +2402,6 @@ packages:
       '@parcel/watcher-win32-ia32': 2.4.1
       '@parcel/watcher-win32-x64': 2.4.1
 
-  /@pkgjs/parseargs@0.11.0:
-    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
-    engines: {node: '>=14'}
-    requiresBuild: true
-    optional: true
-
   /@pkgr/core@0.2.4:
     resolution: {integrity: sha512-ROFF39F6ZrnzSUEmQQZUar0Jt4xVoP9WnDRdWwF4NNcXs3xBTLgBUDoOwW141y1jP+S8nahIbdxbFC7IShw9Iw==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
@@ -3525,7 +3523,7 @@ packages:
       '@types/uuid': 9.0.8
       dequal: 2.0.3
       polished: 4.3.1
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.8.3)
       uuid: 9.0.1
     dev: true
 
@@ -3536,7 +3534,7 @@ packages:
     dependencies:
       '@storybook/global': 5.0.0
       memoizerific: 1.11.3
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.8.3)
       ts-dedent: 2.2.0
     dev: true
 
@@ -3547,7 +3545,7 @@ packages:
     dependencies:
       '@storybook/global': 5.0.0
       dequal: 2.0.3
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.8.3)
       ts-dedent: 2.2.0
     dev: true
 
@@ -3562,7 +3560,7 @@ packages:
       '@storybook/react-dom-shim': 8.6.0(react-dom@19.1.0)(react@19.1.0)(storybook@8.6.0)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.8.3)
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - '@types/react'
@@ -3582,7 +3580,7 @@ packages:
       '@storybook/addon-outline': 8.6.0(storybook@8.6.0)
       '@storybook/addon-toolbars': 8.6.0(storybook@8.6.0)
       '@storybook/addon-viewport': 8.6.0(storybook@8.6.0)
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.8.3)
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - '@types/react'
@@ -3594,7 +3592,7 @@ packages:
       storybook: ^8.6.0
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.8.3)
     dev: true
 
   /@storybook/addon-interactions@8.6.0(storybook@8.6.0):
@@ -3606,7 +3604,7 @@ packages:
       '@storybook/instrumenter': 8.6.0(storybook@8.6.0)
       '@storybook/test': 8.6.0(storybook@8.6.0)
       polished: 4.3.1
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.8.3)
       ts-dedent: 2.2.0
     dev: true
 
@@ -3620,7 +3618,7 @@ packages:
         optional: true
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.8.3)
       ts-dedent: 2.2.0
     dev: true
 
@@ -3630,7 +3628,7 @@ packages:
       storybook: ^8.6.0
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.8.3)
       tiny-invariant: 1.3.3
     dev: true
 
@@ -3640,7 +3638,7 @@ packages:
       storybook: ^8.6.0
     dependencies:
       '@storybook/global': 5.0.0
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.8.3)
       ts-dedent: 2.2.0
     dev: true
 
@@ -3649,7 +3647,7 @@ packages:
     peerDependencies:
       storybook: ^8.6.0
     dependencies:
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.8.3)
       ts-dedent: 2.2.0
     dev: true
 
@@ -3658,7 +3656,7 @@ packages:
     peerDependencies:
       storybook: ^8.6.0
     dependencies:
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.8.3)
     dev: true
 
   /@storybook/addon-viewport@8.6.0(storybook@8.6.0):
@@ -3667,7 +3665,7 @@ packages:
       storybook: ^8.6.0
     dependencies:
       memoizerific: 1.11.3
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.8.3)
     dev: true
 
   /@storybook/blocks@8.6.0(react-dom@19.1.0)(react@19.1.0)(storybook@8.6.0):
@@ -3685,7 +3683,7 @@ packages:
       '@storybook/icons': 1.3.2(react-dom@19.1.0)(react@19.1.0)
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.8.3)
       ts-dedent: 2.2.0
     dev: true
 
@@ -3697,7 +3695,7 @@ packages:
     dependencies:
       '@storybook/csf-plugin': 8.6.0(storybook@8.6.0)
       browser-assert: 1.2.1
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.8.3)
       ts-dedent: 2.2.0
       vite: 6.2.5(tsx@4.20.3)
     dev: true
@@ -3707,10 +3705,10 @@ packages:
     peerDependencies:
       storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
     dependencies:
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.8.3)
     dev: true
 
-  /@storybook/core@8.6.0(prettier@3.5.2)(storybook@8.6.0):
+  /@storybook/core@8.6.0(prettier@3.8.3)(storybook@8.6.0):
     resolution: {integrity: sha512-UzVo2sNz8PZuDp++/R9NBtjupSXhvxS8lptYcwtk51b6MvcM4AL/b4V3PGryOVJDru9sMwz+pzaj7Jg8RVFMJA==}
     peerDependencies:
       prettier: ^2 || ^3
@@ -3724,7 +3722,7 @@ packages:
       esbuild: 0.25.2
       esbuild-register: 3.6.0(esbuild@0.25.2)
       jsdoc-type-pratt-parser: 4.1.0
-      prettier: 3.5.2
+      prettier: 3.8.3
       process: 0.11.10
       recast: 0.23.10
       semver: 7.7.2
@@ -3742,7 +3740,7 @@ packages:
     peerDependencies:
       storybook: ^8.6.0
     dependencies:
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.8.3)
       unplugin: 1.16.1
     dev: true
 
@@ -3774,7 +3772,7 @@ packages:
     dependencies:
       '@storybook/global': 5.0.0
       '@vitest/utils': 2.1.9
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.8.3)
     dev: true
 
   /@storybook/manager-api@8.6.0(storybook@8.6.0):
@@ -3782,7 +3780,7 @@ packages:
     peerDependencies:
       storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
     dependencies:
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.8.3)
     dev: true
 
   /@storybook/preview-api@8.6.0(storybook@8.6.0):
@@ -3790,7 +3788,7 @@ packages:
     peerDependencies:
       storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
     dependencies:
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.8.3)
     dev: true
 
   /@storybook/react-dom-shim@8.6.0(react-dom@19.1.0)(react@19.1.0)(storybook@8.6.0):
@@ -3802,7 +3800,7 @@ packages:
     dependencies:
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.8.3)
     dev: true
 
   /@storybook/svelte-vite@8.6.0(@sveltejs/vite-plugin-svelte@5.0.3)(postcss@8.5.3)(storybook@8.6.0)(svelte@5.35.4)(vite@6.2.5):
@@ -3818,7 +3816,7 @@ packages:
       '@storybook/svelte': 8.6.0(storybook@8.6.0)(svelte@5.35.4)
       '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.35.4)(vite@6.2.5)
       magic-string: 0.30.17
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.8.3)
       svelte: 5.35.4
       svelte-preprocess: 5.1.4(postcss@8.5.3)(svelte@5.35.4)(typescript@5.7.3)
       svelte2tsx: 0.7.36(svelte@5.35.4)(typescript@5.7.3)
@@ -3852,7 +3850,7 @@ packages:
       '@storybook/manager-api': 8.6.0(storybook@8.6.0)
       '@storybook/preview-api': 8.6.0(storybook@8.6.0)
       '@storybook/theming': 8.6.0(storybook@8.6.0)
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.8.3)
       svelte: 5.35.4
       sveltedoc-parser: 4.2.1
       ts-dedent: 2.2.0
@@ -3873,7 +3871,7 @@ packages:
       '@storybook/builder-vite': 8.6.0(storybook@8.6.0)(vite@6.2.5)
       '@storybook/svelte': 8.6.0(storybook@8.6.0)(svelte@5.35.4)
       '@storybook/svelte-vite': 8.6.0(@sveltejs/vite-plugin-svelte@5.0.3)(postcss@8.5.3)(storybook@8.6.0)(svelte@5.35.4)(vite@6.2.5)
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.8.3)
       svelte: 5.35.4
       vite: 6.2.5(tsx@4.20.3)
     transitivePeerDependencies:
@@ -3902,7 +3900,7 @@ packages:
       '@testing-library/user-event': 14.5.2(@testing-library/dom@10.4.0)
       '@vitest/expect': 2.0.5
       '@vitest/spy': 2.0.5
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.8.3)
     dev: true
 
   /@storybook/theming@8.6.0(storybook@8.6.0):
@@ -3910,7 +3908,7 @@ packages:
     peerDependencies:
       storybook: ^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0
     dependencies:
-      storybook: 8.6.0(prettier@3.5.2)
+      storybook: 8.6.0(prettier@3.8.3)
     dev: true
 
   /@stripe/stripe-js@4.1.0:
@@ -4028,6 +4026,160 @@ packages:
     dependencies:
       tslib: 2.8.1
 
+  /@tailwindcss/node@4.3.0:
+    resolution: {integrity: sha512-aFb4gUhFOgdh9AXo4IzBEOzBkkAxm9VigwDJnMIYv3lcfXCJVesNfbEaBl4BNgVRyid92AmdviqwBUBRKSeY3g==}
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.22.2
+      jiti: 2.7.0
+      lightningcss: 1.32.0
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.3.0
+    dev: true
+
+  /@tailwindcss/oxide-android-arm64@4.3.0:
+    resolution: {integrity: sha512-TJPiq67tKlLuObP6RkwvVGDoxCMBVtDgKkLfa/uyj7/FyxvQwHS+UOnVrXXgbEsfUaMgiVvC4KbJnRr26ho4Ng==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@tailwindcss/oxide-darwin-arm64@4.3.0:
+    resolution: {integrity: sha512-oMN/WZRb+SO37BmUElEgeEWuU8E/HXRkiODxJxLe1UTHVXLrdVSgfaJV7pSlhRGMSOiXLuxTIjfsF3wYvz8cgQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@tailwindcss/oxide-darwin-x64@4.3.0:
+    resolution: {integrity: sha512-N6CUmu4a6bKVADfw77p+iw6Yd9Q3OBhe0veaDX+QazfuVYlQsHfDgxBrsjQ/IW+zywL8mTrNd0SdJT/zgtvMdA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@tailwindcss/oxide-freebsd-x64@4.3.0:
+    resolution: {integrity: sha512-zDL5hBkQdH5C6MpqbK3gQAgP80tsMwSI26vjOzjJtNCMUo0lFgOItzHKBIupOZNQxt3ouPH7RPhvNhiTfCe5CQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@tailwindcss/oxide-linux-arm-gnueabihf@4.3.0:
+    resolution: {integrity: sha512-R06HdNi7A7OEoMsf6d4tjZ71RCWnZQPHj2mnotSFURjNLdBC+cIgXQ7l81CqeoiQftjf6OOblxXMInMgN2VzMA==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@tailwindcss/oxide-linux-arm64-gnu@4.3.0:
+    resolution: {integrity: sha512-qTJHELX8jetjhRQHCLilkVLmybpzNQAtaI/gaoVoidn/ufbNDbAo8KlK2J+yPoc8wQxvDxCmh/5lr8nC1+lTbg==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@tailwindcss/oxide-linux-arm64-musl@4.3.0:
+    resolution: {integrity: sha512-Z6sukiQsngnWO+l39X4pPbiWT81IC+PLKF+PHxIlyZbGNb9MODfYlXEVlFvej5BOZInWX01kVyzeLvHsXhfczQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@tailwindcss/oxide-linux-x64-gnu@4.3.0:
+    resolution: {integrity: sha512-DRNdQRpSGzRGfARVuVkxvM8Q12nh19l4BF/G7zGA1oe+9wcC6saFBHTISrpIcKzhiXtSrlSrluCfvMuledoCTQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@tailwindcss/oxide-linux-x64-musl@4.3.0:
+    resolution: {integrity: sha512-Z0IADbDo8bh6I7h2IQMx601AdXBLfFpEdUotft86evd/8ZPflZe9COPO8Q1vw+pfLWIUo9zN/JGZvwuAJqduqg==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@tailwindcss/oxide-wasm32-wasi@4.3.0:
+    resolution: {integrity: sha512-HNZGOUxEmElksYR7S6sC5jTeNGpobAsy9u7Gu0AskJ8/20FR9GqebUyB+HBcU/ax6BHuiuJi+Oda4B+YX6H1yA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    requiresBuild: true
+    dev: true
+    optional: true
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  /@tailwindcss/oxide-win32-arm64-msvc@4.3.0:
+    resolution: {integrity: sha512-Pe+RPVTi1T+qymuuRpcdvwSVZjnll/f7n8gBxMMh3xLTctMDKqpdfGimbMyioqtLhUYZxdJ9wGNhV7MKHvgZsQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@tailwindcss/oxide-win32-x64-msvc@4.3.0:
+    resolution: {integrity: sha512-Mvrf2kXW/yeW/OTezZlCGOirXRcUuLIBx/5Y12BaPM7wJoryG6dfS/NJL8aBPqtTEx/Vm4T4vKzFUcKDT+TKUA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@tailwindcss/oxide@4.3.0:
+    resolution: {integrity: sha512-F7HZGBeN9I0/AuuJS5PwcD8xayx5ri5GhjYUDBEVYUkexyA/giwbDNjRVrxSezE3T250OU2K/wp/ltWx3UOefg==}
+    engines: {node: '>= 20'}
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.3.0
+      '@tailwindcss/oxide-darwin-arm64': 4.3.0
+      '@tailwindcss/oxide-darwin-x64': 4.3.0
+      '@tailwindcss/oxide-freebsd-x64': 4.3.0
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.3.0
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.3.0
+      '@tailwindcss/oxide-linux-arm64-musl': 4.3.0
+      '@tailwindcss/oxide-linux-x64-gnu': 4.3.0
+      '@tailwindcss/oxide-linux-x64-musl': 4.3.0
+      '@tailwindcss/oxide-wasm32-wasi': 4.3.0
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.3.0
+      '@tailwindcss/oxide-win32-x64-msvc': 4.3.0
+    dev: true
+
+  /@tailwindcss/postcss@4.3.0:
+    resolution: {integrity: sha512-Jm05Tjx+9yCLGv5qw1c+84Psds8MnyrEQYCB+FFk2lgGiUjlRqdxke4mVTuYrj2xnVZqKim2Apr5ySuQRYAw/w==}
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.3.0
+      '@tailwindcss/oxide': 4.3.0
+      postcss: 8.5.15
+      tailwindcss: 4.3.0
+    dev: true
+
   /@testing-library/dom@10.4.0:
     resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
     engines: {node: '>=18'}
@@ -5063,6 +5215,7 @@ packages:
   /ansi-regex@6.0.1:
     resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
     engines: {node: '>=12'}
+    dev: true
 
   /ansi-styles@4.3.0:
     resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
@@ -5078,9 +5231,7 @@ packages:
   /ansi-styles@6.2.1:
     resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
     engines: {node: '>=12'}
-
-  /any-promise@1.3.0:
-    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
+    dev: true
 
   /anymatch@3.1.3:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
@@ -5089,9 +5240,6 @@ packages:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
-  /arg@5.0.2:
-    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
-
   /argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
     dev: true
@@ -5210,22 +5358,6 @@ packages:
     resolution: {integrity: sha512-kNOjDqAh7px0XWNI+4QbzoiR/nTkHAWNud2uvnJquD1/x5a7EQZMJT0AczqK0Qn67oY/TTQ1LbUKajZpp3I9tQ==}
     engines: {node: '>=8.0.0'}
 
-  /autoprefixer@10.4.19(postcss@8.5.3):
-    resolution: {integrity: sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==}
-    engines: {node: ^10 || ^12 || >=14}
-    hasBin: true
-    peerDependencies:
-      postcss: ^8.1.0
-    dependencies:
-      browserslist: 4.24.5
-      caniuse-lite: 1.0.30001718
-      fraction.js: 4.3.7
-      normalize-range: 0.1.2
-      picocolors: 1.1.1
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
-    dev: true
-
   /available-typed-arrays@1.0.7:
     resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
     engines: {node: '>= 0.4'}
@@ -5248,6 +5380,7 @@ packages:
 
   /balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
+    dev: true
 
   /base64-arraybuffer@1.0.2:
     resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==}
@@ -5316,6 +5449,7 @@ packages:
     resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
     dependencies:
       balanced-match: 1.0.2
+    dev: true
 
   /braces@3.0.3:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
@@ -5401,10 +5535,6 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /camelcase-css@2.0.1:
-    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
-    engines: {node: '>= 6'}
-
   /camelcase@5.3.1:
     resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
     engines: {node: '>=6'}
@@ -5637,10 +5767,6 @@ packages:
     engines: {node: '>=16'}
     dev: true
 
-  /commander@4.1.1:
-    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
-    engines: {node: '>= 6'}
-
   /commander@7.2.0:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
     engines: {node: '>= 10'}
@@ -5781,6 +5907,7 @@ packages:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
     hasBin: true
+    dev: true
 
   /csso@4.2.0:
     resolution: {integrity: sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==}
@@ -5984,13 +6111,15 @@ packages:
     engines: {node: '>=0.10'}
     hasBin: true
 
+  /detect-libc@2.1.2:
+    resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
+    engines: {node: '>=8'}
+    dev: true
+
   /devalue@5.1.1:
     resolution: {integrity: sha512-maua5KUiapvEwiEAe+XnlZ3Rh0GD+qI1J/nb9vrJc3muPXvcF/8gXYTWF76+5DAqHyDUtOIImEuo0YKE9mshVw==}
     dev: true
 
-  /didyoumean@1.2.2:
-    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-
   /diff-sequences@29.6.3:
     resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -5999,9 +6128,6 @@ packages:
   /dijkstrajs@1.0.3:
     resolution: {integrity: sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==}
 
-  /dlv@1.1.3:
-    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-
   /doctrine@2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
     engines: {node: '>=0.10.0'}
@@ -6120,9 +6246,6 @@ packages:
       readable-stream: 3.6.2
       stream-shift: 1.0.3
 
-  /eastasianwidth@0.2.0:
-    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
-
   /eciesjs@0.4.10:
     resolution: {integrity: sha512-dYAgdXAC7/d9fEC0w6kpRWj5vHah2BQgMM639g78JI0FUUffMN2Mq60HEHPkyH8ah+FX+cQd6ouDK4kWiatzyw==}
     engines: {node: '>=16.0.0'}
@@ -6154,9 +6277,6 @@ packages:
   /emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
-  /emoji-regex@9.2.2:
-    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
-
   /enabled@2.0.0:
     resolution: {integrity: sha512-AKrN98kuwOzMIdAizXGI86UFBoo26CL21UM763y1h/GMSJ4/OHU9k2YlsmBpyScFo/wbLzWQJBMCW4+IO3/+OQ==}
     dev: true
@@ -6186,6 +6306,14 @@ packages:
     resolution: {integrity: sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==}
     engines: {node: '>=10.0.0'}
 
+  /enhanced-resolve@5.22.2:
+    resolution: {integrity: sha512-0rxICaFZ7NQho/sHely2bvOPRP0Eu2B0NZ9zM54YvRvWMn7jfz3DmnOZDR9LlXDdDcqntAVc6Hfy4gr/tdH/Ag==}
+    engines: {node: '>=10.13.0'}
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.3
+    dev: true
+
   /enquirer@2.4.1:
     resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==}
     engines: {node: '>=8.6'}
@@ -6506,7 +6634,7 @@ packages:
       - supports-color
     dev: true
 
-  /eslint-plugin-prettier@5.2.6(@types/eslint@9.6.1)(eslint-config-prettier@10.1.2)(eslint@9.28.0)(prettier@3.5.2):
+  /eslint-plugin-prettier@5.2.6(@types/eslint@9.6.1)(eslint-config-prettier@10.1.2)(eslint@9.28.0)(prettier@3.8.3):
     resolution: {integrity: sha512-mUcf7QG2Tjk7H055Jk0lGBjbgDnfrvqjhXh9t2xLMSCjZVcw9Rb1V6sVNXO0th3jgeO7zllWPTNRil3JW94TnQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -6523,7 +6651,7 @@ packages:
       '@types/eslint': 9.6.1
       eslint: 9.28.0
       eslint-config-prettier: 10.1.2(eslint@9.28.0)
-      prettier: 3.5.2
+      prettier: 3.8.3
       prettier-linter-helpers: 1.0.0
       synckit: 0.11.4
     dev: true
@@ -6993,13 +7121,6 @@ packages:
     dependencies:
       is-callable: 1.2.7
 
-  /foreground-child@3.1.1:
-    resolution: {integrity: sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==}
-    engines: {node: '>=14'}
-    dependencies:
-      cross-spawn: 7.0.6
-      signal-exit: 4.1.0
-
   /form-data@4.0.0:
     resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==}
     engines: {node: '>= 6'}
@@ -7013,10 +7134,6 @@ packages:
     resolution: {integrity: sha512-alTFZZQDKMporBH77856pXgzhEzaUVmLCDk+egLgIgHst3Tpndzz8MnKe+GzRJRfvVdn69HhpW7cmXzvtLvJAw==}
     dev: true
 
-  /fraction.js@4.3.7:
-    resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
-    dev: true
-
   /fraction.js@5.2.2:
     resolution: {integrity: sha512-uXBDv5knpYmv/2gLzWQ5mBHGBRk9wcKTeWu6GLTUEQfjCxO09uM/mHDrojlL+Q1mVGIIFo149Gba7od1XPgSzQ==}
     engines: {node: '>= 12'}
@@ -7137,17 +7254,7 @@ packages:
     engines: {node: '>=10.13.0'}
     dependencies:
       is-glob: 4.0.3
-
-  /glob@10.3.15:
-    resolution: {integrity: sha512-0c6RlJt1TICLyvJYIApxb8GsXoai0KUP7AxKKAtsYXdgJR1mGEUa7DgwShbdk1nly0PYoZj01xd4hzbq3fsjpw==}
-    engines: {node: '>=16 || 14 >=14.18'}
-    hasBin: true
-    dependencies:
-      foreground-child: 3.1.1
-      jackspeak: 2.3.6
-      minimatch: 9.0.5
-      minipass: 7.1.1
-      path-scurry: 1.11.1
+    dev: true
 
   /glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
@@ -7517,6 +7624,7 @@ packages:
     engines: {node: '>= 0.4'}
     dependencies:
       hasown: 2.0.2
+    dev: true
 
   /is-data-view@1.0.2:
     resolution: {integrity: sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==}
@@ -7734,14 +7842,6 @@ packages:
     dependencies:
       ws: 8.18.0
 
-  /jackspeak@2.3.6:
-    resolution: {integrity: sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==}
-    engines: {node: '>=14'}
-    dependencies:
-      '@isaacs/cliui': 8.0.2
-    optionalDependencies:
-      '@pkgjs/parseargs': 0.11.0
-
   /javascript-natural-sort@0.7.1:
     resolution: {integrity: sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==}
     dev: true
@@ -7750,6 +7850,11 @@ packages:
     resolution: {integrity: sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==}
     hasBin: true
 
+  /jiti@2.7.0:
+    resolution: {integrity: sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ==}
+    hasBin: true
+    dev: true
+
   /js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -7857,22 +7962,134 @@ packages:
       type-check: 0.4.0
     dev: true
 
+  /lightningcss-android-arm64@1.32.0:
+    resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /lightningcss-darwin-arm64@1.32.0:
+    resolution: {integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /lightningcss-darwin-x64@1.32.0:
+    resolution: {integrity: sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /lightningcss-freebsd-x64@1.32.0:
+    resolution: {integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /lightningcss-linux-arm-gnueabihf@1.32.0:
+    resolution: {integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /lightningcss-linux-arm64-gnu@1.32.0:
+    resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /lightningcss-linux-arm64-musl@1.32.0:
+    resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /lightningcss-linux-x64-gnu@1.32.0:
+    resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /lightningcss-linux-x64-musl@1.32.0:
+    resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /lightningcss-win32-arm64-msvc@1.32.0:
+    resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /lightningcss-win32-x64-msvc@1.32.0:
+    resolution: {integrity: sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /lightningcss@1.32.0:
+    resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
+    engines: {node: '>= 12.0.0'}
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.32.0
+      lightningcss-darwin-arm64: 1.32.0
+      lightningcss-darwin-x64: 1.32.0
+      lightningcss-freebsd-x64: 1.32.0
+      lightningcss-linux-arm-gnueabihf: 1.32.0
+      lightningcss-linux-arm64-gnu: 1.32.0
+      lightningcss-linux-arm64-musl: 1.32.0
+      lightningcss-linux-x64-gnu: 1.32.0
+      lightningcss-linux-x64-musl: 1.32.0
+      lightningcss-win32-arm64-msvc: 1.32.0
+      lightningcss-win32-x64-msvc: 1.32.0
+    dev: true
+
   /lilconfig@2.1.0:
     resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
     engines: {node: '>=10'}
+    dev: true
 
   /lilconfig@3.0.0:
     resolution: {integrity: sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==}
     engines: {node: '>=14'}
     dev: true
 
-  /lilconfig@3.1.1:
-    resolution: {integrity: sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==}
-    engines: {node: '>=14'}
-
-  /lines-and-columns@1.2.4:
-    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-
   /lint-staged@15.2.2:
     resolution: {integrity: sha512-TiTt93OPh1OZOsb5B7k96A/ATl2AjIZo+vnzFZ6oHK5FuTk63ByDtxGQpHm+kFETjEWqgkF95M8FRXKR/LEBcw==}
     engines: {node: '>=18.12.0'}
@@ -8078,6 +8295,12 @@ packages:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  /magic-string@0.30.21:
+    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
+    dev: true
+
   /magic-string@0.30.7:
     resolution: {integrity: sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==}
     engines: {node: '>=12'}
@@ -8243,6 +8466,7 @@ packages:
     engines: {node: '>=16 || 14 >=14.17'}
     dependencies:
       brace-expansion: 2.0.1
+    dev: true
 
   /minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
@@ -8256,6 +8480,7 @@ packages:
   /minipass@7.1.1:
     resolution: {integrity: sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==}
     engines: {node: '>=16 || 14 >=14.17'}
+    dev: true
 
   /mipd@0.0.7(typescript@5.7.3):
     resolution: {integrity: sha512-aAPZPNDQ3uMTdKbuO2YmAw2TxLHO0moa4YKAyETM/DTj5FloZo+a+8tU+iv4GmW+sOxKLSRwcSFuczk+Cpt6fg==}
@@ -8328,17 +8553,17 @@ packages:
     hasBin: true
     dev: true
 
-  /mz@2.7.0:
-    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
-    dependencies:
-      any-promise: 1.3.0
-      object-assign: 4.1.1
-      thenify-all: 1.6.0
-
   /nanoid@3.3.11:
     resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
+    dev: true
+
+  /nanoid@3.3.12:
+    resolution: {integrity: sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+    dev: true
 
   /nanoid@5.0.8:
     resolution: {integrity: sha512-TcJPw+9RV9dibz1hHUzlLVy8N4X9TnwirAjrU08Juo6BNKggzVfP2ZJ/3ZUSq15Xl5i85i+Z89XBO90pB2PghQ==}
@@ -8398,11 +8623,6 @@ packages:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
 
-  /normalize-range@0.1.2:
-    resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
-    engines: {node: '>=0.10.0'}
-    dev: true
-
   /npm-bundled@2.0.1:
     resolution: {integrity: sha512-gZLxXdjEzE/+mOstGDqR6b0EkhJ+kM6fxM6vUuckuctuVPh80Q6pw/rSZj9s4Gex9GxWtIicO1pc8DB9KZWudw==}
     engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0}
@@ -8445,14 +8665,6 @@ packages:
       once: 1.4.0
       readable-stream: 2.3.8
 
-  /object-assign@4.1.1:
-    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
-    engines: {node: '>=0.10.0'}
-
-  /object-hash@3.0.0:
-    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
-    engines: {node: '>= 6'}
-
   /object-inspect@1.13.4:
     resolution: {integrity: sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==}
     engines: {node: '>= 0.4'}
@@ -8646,6 +8858,7 @@ packages:
 
   /path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+    dev: true
 
   /path-scurry@1.11.1:
     resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
@@ -8653,6 +8866,7 @@ packages:
     dependencies:
       lru-cache: 10.4.3
       minipass: 7.1.1
+    dev: true
 
   /pathe@1.1.2:
     resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
@@ -8697,6 +8911,7 @@ packages:
 
   /picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
+    dev: true
 
   /picomatch@2.3.1:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
@@ -8713,10 +8928,6 @@ packages:
     hasBin: true
     dev: true
 
-  /pify@2.3.0:
-    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
-    engines: {node: '>=0.10.0'}
-
   /pify@3.0.0:
     resolution: {integrity: sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==}
     engines: {node: '>=4'}
@@ -8777,10 +8988,6 @@ packages:
       sonic-boom: 2.8.0
       thread-stream: 0.15.2
 
-  /pirates@4.0.7:
-    resolution: {integrity: sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==}
-    engines: {node: '>= 6'}
-
   /pkg-types@1.1.1:
     resolution: {integrity: sha512-ko14TjmDuQJ14zsotODv7dBlwxKhUKQEhuhmbqo1uCi9BB0Z2alo/wAXg6q1dTR5TyuqYyWhjtfe/Tsh+X28jQ==}
     dependencies:
@@ -8823,26 +9030,6 @@ packages:
     resolution: {integrity: sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==}
     engines: {node: '>= 0.4'}
 
-  /postcss-import@15.1.0(postcss@8.5.3):
-    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      postcss: ^8.0.0
-    dependencies:
-      postcss: 8.5.3
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.10
-
-  /postcss-js@4.0.1(postcss@8.5.3):
-    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
-    engines: {node: ^12 || ^14 || >= 16}
-    peerDependencies:
-      postcss: ^8.4.21
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.5.3
-
   /postcss-load-config@3.1.4(postcss@8.5.3):
     resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
     engines: {node: '>= 10'}
@@ -8860,31 +9047,6 @@ packages:
       yaml: 1.10.2
     dev: true
 
-  /postcss-load-config@4.0.2(postcss@8.5.3):
-    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
-    engines: {node: '>= 14'}
-    peerDependencies:
-      postcss: '>=8.0.9'
-      ts-node: '>=9.0.0'
-    peerDependenciesMeta:
-      postcss:
-        optional: true
-      ts-node:
-        optional: true
-    dependencies:
-      lilconfig: 3.1.1
-      postcss: 8.5.3
-      yaml: 2.4.2
-
-  /postcss-nested@6.0.1(postcss@8.5.3):
-    resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.2.14
-    dependencies:
-      postcss: 8.5.3
-      postcss-selector-parser: 6.0.16
-
   /postcss-safe-parser@7.0.1(postcss@8.5.3):
     resolution: {integrity: sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==}
     engines: {node: '>=18.0'}
@@ -8903,13 +9065,6 @@ packages:
       postcss: 8.5.3
     dev: true
 
-  /postcss-selector-parser@6.0.16:
-    resolution: {integrity: sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==}
-    engines: {node: '>=4'}
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-
   /postcss-selector-parser@7.1.0:
     resolution: {integrity: sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==}
     engines: {node: '>=4'}
@@ -8918,8 +9073,14 @@ packages:
       util-deprecate: 1.0.2
     dev: true
 
-  /postcss-value-parser@4.2.0:
-    resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
+  /postcss@8.5.15:
+    resolution: {integrity: sha512-FfR8sjd4em2T6fb3I2MwAJU7HWVMr9zba+enmQeeWFfCbm+UOC/0X4DS8XtpUTMwWMGbjKYP7xjfNekzyGmB3A==}
+    engines: {node: ^10 || ^12 || >=14}
+    dependencies:
+      nanoid: 3.3.12
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+    dev: true
 
   /postcss@8.5.3:
     resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
@@ -8928,6 +9089,7 @@ packages:
       nanoid: 3.3.11
       picocolors: 1.1.1
       source-map-js: 1.2.1
+    dev: true
 
   /postgres-array@2.0.0:
     resolution: {integrity: sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==}
@@ -8980,54 +9142,56 @@ packages:
       fast-diff: 1.3.0
     dev: true
 
-  /prettier-plugin-svelte@3.3.3(prettier@3.5.2)(svelte@5.35.4):
-    resolution: {integrity: sha512-yViK9zqQ+H2qZD1w/bH7W8i+bVfKrD8GIFjkFe4Thl6kCT9SlAsXVNmt3jCvQOCsnOhcvYgsoVlRV/Eu6x5nNw==}
+  /prettier-plugin-svelte@3.5.2(prettier@3.8.3)(svelte@5.35.4):
+    resolution: {integrity: sha512-ItFouLvzSFE3ulNl4DKoWM3BGcbDCNVpIyy/Y3F2gC3aNiGLxtFUdffVqO5Z5hhYG+DFT5KULWaxmeFFpdbvaQ==}
     peerDependencies:
       prettier: ^3.0.0
       svelte: ^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0
     dependencies:
-      prettier: 3.5.2
+      prettier: 3.8.3
       svelte: 5.35.4
     dev: true
 
-  /prettier-plugin-tailwindcss@0.6.8(prettier-plugin-svelte@3.3.3)(prettier@3.5.2):
-    resolution: {integrity: sha512-dGu3kdm7SXPkiW4nzeWKCl3uoImdd5CTZEJGxyypEPL37Wj0HT2pLqjrvSei1nTeuQfO4PUfjeW5cTUNRLZ4sA==}
-    engines: {node: '>=14.21.3'}
+  /prettier-plugin-tailwindcss@0.8.0(prettier-plugin-svelte@3.5.2)(prettier@3.8.3):
+    resolution: {integrity: sha512-V8ITGH87yuBDF6JpEZTOVlUz/saAwqb8f3HRgUj8Lh+tGCcrmorhsLpYqzygwFwK0PE2Ib6Mv3M7T/uE2tZV1g==}
+    engines: {node: '>=20.19'}
     peerDependencies:
       '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-hermes': '*'
+      '@prettier/plugin-oxc': '*'
       '@prettier/plugin-pug': '*'
       '@shopify/prettier-plugin-liquid': '*'
       '@trivago/prettier-plugin-sort-imports': '*'
-      '@zackad/prettier-plugin-twig-melody': '*'
+      '@zackad/prettier-plugin-twig': '*'
       prettier: ^3.0
       prettier-plugin-astro: '*'
       prettier-plugin-css-order: '*'
-      prettier-plugin-import-sort: '*'
       prettier-plugin-jsdoc: '*'
       prettier-plugin-marko: '*'
       prettier-plugin-multiline-arrays: '*'
       prettier-plugin-organize-attributes: '*'
       prettier-plugin-organize-imports: '*'
       prettier-plugin-sort-imports: '*'
-      prettier-plugin-style-order: '*'
       prettier-plugin-svelte: '*'
     peerDependenciesMeta:
       '@ianvs/prettier-plugin-sort-imports':
         optional: true
+      '@prettier/plugin-hermes':
+        optional: true
+      '@prettier/plugin-oxc':
+        optional: true
       '@prettier/plugin-pug':
         optional: true
       '@shopify/prettier-plugin-liquid':
         optional: true
       '@trivago/prettier-plugin-sort-imports':
         optional: true
-      '@zackad/prettier-plugin-twig-melody':
+      '@zackad/prettier-plugin-twig':
         optional: true
       prettier-plugin-astro:
         optional: true
       prettier-plugin-css-order:
         optional: true
-      prettier-plugin-import-sort:
-        optional: true
       prettier-plugin-jsdoc:
         optional: true
       prettier-plugin-marko:
@@ -9040,17 +9204,15 @@ packages:
         optional: true
       prettier-plugin-sort-imports:
         optional: true
-      prettier-plugin-style-order:
-        optional: true
       prettier-plugin-svelte:
         optional: true
     dependencies:
-      prettier: 3.5.2
-      prettier-plugin-svelte: 3.3.3(prettier@3.5.2)(svelte@5.35.4)
+      prettier: 3.8.3
+      prettier-plugin-svelte: 3.5.2(prettier@3.8.3)(svelte@5.35.4)
     dev: true
 
-  /prettier@3.5.2:
-    resolution: {integrity: sha512-lc6npv5PH7hVqozBR7lkBNOGXV9vMwROAPlumdBkX0wTbbzPu/U1hk5yL8p2pt4Xoc+2mkT8t/sow2YrV/M5qg==}
+  /prettier@3.8.3:
+    resolution: {integrity: sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw==}
     engines: {node: '>=14'}
     hasBin: true
     dev: true
@@ -9206,11 +9368,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /read-cache@1.0.0:
-    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
-    dependencies:
-      pify: 2.3.0
-
   /readable-stream@2.3.8:
     resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
     dependencies:
@@ -9344,6 +9501,7 @@ packages:
       is-core-module: 2.16.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
+    dev: true
 
   /restore-cursor@4.0.0:
     resolution: {integrity: sha512-I9fPXU9geO9bHOt9pHHOhOkYerIMsmVaWB0rA2AI9ERh/+x/i7MV5HKBNrg+ljO5eoPVgCcnFuRjJ9uH6I/3eg==}
@@ -9710,6 +9868,7 @@ packages:
   /source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
+    dev: true
 
   /source-map@0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
@@ -9744,7 +9903,7 @@ packages:
   /std-env@3.7.0:
     resolution: {integrity: sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==}
 
-  /storybook@8.6.0(prettier@3.5.2):
+  /storybook@8.6.0(prettier@3.8.3):
     resolution: {integrity: sha512-NEHCK2nXogw7WxAkJfMwPnc5Cmh/KqVNrdaFeXBAKhC2Zr1FTZIiCR5nSUT85run44Wkpmo7qvUoKvII9GOWbA==}
     hasBin: true
     peerDependencies:
@@ -9753,8 +9912,8 @@ packages:
       prettier:
         optional: true
     dependencies:
-      '@storybook/core': 8.6.0(prettier@3.5.2)(storybook@8.6.0)
-      prettier: 3.5.2
+      '@storybook/core': 8.6.0(prettier@3.8.3)(storybook@8.6.0)
+      prettier: 3.8.3
     transitivePeerDependencies:
       - bufferutil
       - supports-color
@@ -9781,14 +9940,6 @@ packages:
       is-fullwidth-code-point: 3.0.0
       strip-ansi: 6.0.1
 
-  /string-width@5.1.2:
-    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
-    engines: {node: '>=12'}
-    dependencies:
-      eastasianwidth: 0.2.0
-      emoji-regex: 9.2.2
-      strip-ansi: 7.1.0
-
   /string-width@7.1.0:
     resolution: {integrity: sha512-SEIJCWiX7Kg4c129n48aDRwLbFb2LJmXXFrWBG4NGaRtMQ3myKPKbwrD1BKqQn74oCoNMBVrfDEr5M9YxCsrkw==}
     engines: {node: '>=18'}
@@ -9851,6 +10002,7 @@ packages:
     engines: {node: '>=12'}
     dependencies:
       ansi-regex: 6.0.1
+    dev: true
 
   /strip-bom@3.0.0:
     resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
@@ -9885,19 +10037,6 @@ packages:
       inline-style-parser: 0.2.4
     dev: true
 
-  /sucrase@3.35.0:
-    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
-    engines: {node: '>=16 || 14 >=14.17'}
-    hasBin: true
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.8
-      commander: 4.1.1
-      glob: 10.3.15
-      lines-and-columns: 1.2.4
-      mz: 2.7.0
-      pirates: 4.0.7
-      ts-interface-checker: 0.1.13
-
   /superstruct@1.0.4:
     resolution: {integrity: sha512-7JpaAoX2NGyoFlI9NBh66BQXGONc+uE+MRS5i2iOBKuS4e+ccgMDjATgZldkah+33DakBxDHiss9kvUcGAO8UQ==}
     engines: {node: '>=14.0.0'}
@@ -9912,6 +10051,7 @@ packages:
   /supports-preserve-symlinks-flag@1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
+    dev: true
 
   /svelte-check@4.1.6(svelte@5.35.4)(typescript@5.7.3):
     resolution: {integrity: sha512-P7w/6tdSfk3zEVvfsgrp3h3DFC75jCdZjTQvgGJtjPORs1n7/v2VMPIoty3PWv7jnfEm3x0G/p9wH4pecTb0Wg==}
@@ -10139,54 +10279,32 @@ packages:
   /tailwind-merge@2.5.4:
     resolution: {integrity: sha512-0q8cfZHMu9nuYP/b5Shb7Y7Sh1B7Nnl5GqNr1U+n2p6+mybvRtayrQ+0042Z5byvTA8ihjlP8Odo8/VnHbZu4Q==}
 
-  /tailwind-variants@0.3.0(patch_hash=277oyanjyyxcufsnp2uhvrjhjy)(tailwindcss@3.4.3):
+  /tailwind-variants@0.3.0(patch_hash=277oyanjyyxcufsnp2uhvrjhjy)(tailwindcss@4.3.0):
     resolution: {integrity: sha512-ho2k5kn+LB1fT5XdNS3Clb96zieWxbStE9wNLK7D0AV64kdZMaYzAKo0fWl6fXLPY99ffF9oBJnIj5escEl/8A==}
     engines: {node: '>=16.x', pnpm: '>=7.x'}
     peerDependencies:
       tailwindcss: '*'
     dependencies:
       tailwind-merge: 2.5.4
-      tailwindcss: 3.4.3
+      tailwindcss: 4.3.0
     dev: false
     patched: true
 
-  /tailwindcss-animate@1.0.7(tailwindcss@3.4.3):
+  /tailwindcss-animate@1.0.7(tailwindcss@4.3.0):
     resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders'
     dependencies:
-      tailwindcss: 3.4.3
+      tailwindcss: 4.3.0
     dev: false
 
-  /tailwindcss@3.4.3:
-    resolution: {integrity: sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.6.0
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.2
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.21.0
-      lilconfig: 2.1.0
-      micromatch: 4.0.8
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.1.1
-      postcss: 8.5.3
-      postcss-import: 15.1.0(postcss@8.5.3)
-      postcss-js: 4.0.1(postcss@8.5.3)
-      postcss-load-config: 4.0.2(postcss@8.5.3)
-      postcss-nested: 6.0.1(postcss@8.5.3)
-      postcss-selector-parser: 6.0.16
-      resolve: 1.22.10
-      sucrase: 3.35.0
-    transitivePeerDependencies:
-      - ts-node
+  /tailwindcss@4.3.0:
+    resolution: {integrity: sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q==}
+
+  /tapable@2.3.3:
+    resolution: {integrity: sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==}
+    engines: {node: '>=6'}
+    dev: true
 
   /text-hex@1.0.0:
     resolution: {integrity: sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg==}
@@ -10196,17 +10314,6 @@ packages:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
     dev: true
 
-  /thenify-all@1.6.0:
-    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
-    engines: {node: '>=0.8'}
-    dependencies:
-      thenify: 3.3.1
-
-  /thenify@3.3.1:
-    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
-    dependencies:
-      any-promise: 1.3.0
-
   /thread-stream@0.15.2:
     resolution: {integrity: sha512-UkEhKIg2pD+fjkHQKyJO3yoIvAP3N6RlNFt2dUhcS1FGvCD1cQa1M/PGknCLFIyZdtJOWQjejp7bdNqmN7zwdA==}
     dependencies:
@@ -10306,9 +10413,6 @@ packages:
     engines: {node: '>=6.10'}
     dev: true
 
-  /ts-interface-checker@0.1.13:
-    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
-
   /tsconfig-paths@3.15.0:
     resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
     dependencies:
@@ -11141,14 +11245,7 @@ packages:
       ansi-styles: 4.3.0
       string-width: 4.2.3
       strip-ansi: 6.0.1
-
-  /wrap-ansi@8.1.0:
-    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
-    engines: {node: '>=12'}
-    dependencies:
-      ansi-styles: 6.2.1
-      string-width: 5.1.2
-      strip-ansi: 7.1.0
+    dev: true
 
   /wrap-ansi@9.0.0:
     resolution: {integrity: sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==}
@@ -11246,11 +11343,6 @@ packages:
     engines: {node: '>= 14'}
     dev: true
 
-  /yaml@2.4.2:
-    resolution: {integrity: sha512-B3VqDZ+JAg1nZpaEmWtTXUlBneoGx6CPM9b0TENK6aoSu5t73dItudwdgmi6tHlIZZId4dZ9skcAQ2UbcyAeVA==}
-    engines: {node: '>= 14'}
-    hasBin: true
-
   /yargs-parser@18.1.3:
     resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
     engines: {node: '>=6'}
diff --git a/postcss.config.js b/postcss.config.js
index 2e7af2b7f..a7f73a2d1 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }
diff --git a/src/lib/app.css b/src/lib/app.css
index 329cebc23..9b3a077f5 100644
--- a/src/lib/app.css
+++ b/src/lib/app.css
@@ -1,6 +1,6 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@config '#tailwind.config.js';
 
 @font-face {
   font-family: 'Proxima Nova';
@@ -26,39 +26,58 @@
   font-display: swap;
 }
 
-*::-webkit-scrollbar {
-  background: transparent !important;
-  width: 4px !important;
-}
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
 
-*::-webkit-scrollbar-track {
-  border-radius: 4px !important;
-  background: var(--porcelain) !important;
-}
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
 
-*::-webkit-scrollbar-thumb {
-  width: 4px !important;
-  border-radius: 4px !important;
-  background: var(--casper) !important;
-}
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--porcelain);
+  }
 
-*::-webkit-scrollbar:horizontal {
-  height: 4px !important;
-}
+  *::-webkit-scrollbar {
+    background: transparent !important;
+    width: 4px !important;
+  }
 
-*::-webkit-scrollbar-thumb:hover {
-  cursor: pointer !important;
-  background: var(--waterloo) !important;
-}
+  *::-webkit-scrollbar-track {
+    border-radius: 4px !important;
+    background: var(--porcelain) !important;
+  }
 
-body.theme-transition {
-  &,
-  & * {
-    @apply transition-colors duration-500;
+  *::-webkit-scrollbar-thumb {
+    width: 4px !important;
+    border-radius: 4px !important;
+    background: var(--casper) !important;
+  }
+
+  *::-webkit-scrollbar:horizontal {
+    height: 4px !important;
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    cursor: pointer !important;
+    background: var(--waterloo) !important;
+  }
+
+  body.theme-transition {
+
+    &,
+    & * {
+      @apply transition-colors duration-500;
+    }
   }
-}
 
-/* 
+  /* 
 * {
   text-align: left;
   align-items: start;
@@ -66,187 +85,193 @@ body.theme-transition {
 }
  */
 
-html {
-  @apply text-base;
-}
-
-body {
-  color: var(--black);
-  fill: var(--black);
-  overflow-x: hidden;
-  background-color: var(--white);
-  font-size: 14px;
-  line-height: 20px;
-}
+  html {
+    @apply text-base;
+  }
 
-.loading {
-  position: relative;
-  color: transparent !important;
-  fill: transparent !important;
-  pointer-events: none;
+  body {
+    color: var(--black);
+    fill: var(--black);
+    overflow-x: hidden;
+    background-color: var(--white);
+    font-size: 14px;
+    line-height: 20px;
+  }
 }
 
-.loading::after {
-  --dot-color: var(--loading-color, var(--color, var(--black)));
-  font-size: var(--loading-size, 4px);
-  position: absolute;
-  content: '';
-  left: 50%;
-  top: calc(50% - 2em);
-  width: 1em;
-  transform: translate(-50%, -50%);
-  height: 1em;
-  border-radius: 50%;
-  animation: SAN-load ease 0.8s infinite;
-}
+@layer components {
+  .loading {
+    position: relative;
+    color: transparent !important;
+    fill: transparent !important;
+    pointer-events: none;
+  }
 
-loading-spin,
-.loading-spin {
-  width: var(--loading-size, 16px);
-  height: var(--loading-size, 16px);
-  border-radius: 50%;
-  border-top: 2px solid var(--mystic);
-  border-right: 2px solid var(--mystic);
-  border-bottom: 2px solid var(--mystic);
-  border-left: 2px solid var(--casper);
-  animation: SAN-load-spin 0.9s infinite linear;
-}
+  .loading::after {
+    --dot-color: var(--loading-color, var(--color, var(--black)));
+    font-size: var(--loading-size, 4px);
+    position: absolute;
+    content: '';
+    left: 50%;
+    top: calc(50% - 2em);
+    width: 1em;
+    transform: translate(-50%, -50%);
+    height: 1em;
+    border-radius: 50%;
+    animation: SAN-load ease 0.8s infinite;
+  }
 
-@keyframes SAN-load {
-  0% {
-    box-shadow:
-      -2em 2em 0 -10px var(--dot-color),
-      -2em 2em var(--dot-color),
-      0 2em var(--dot-color),
-      2em 2em var(--dot-color);
+  loading-spin,
+  .loading-spin {
+    width: var(--loading-size, 16px);
+    height: var(--loading-size, 16px);
+    border-radius: 50%;
+    border-top: 2px solid var(--mystic);
+    border-right: 2px solid var(--mystic);
+    border-bottom: 2px solid var(--mystic);
+    border-left: 2px solid var(--casper);
+    animation: SAN-load-spin 0.9s infinite linear;
   }
 
-  100% {
-    box-shadow:
-      -2em 2em 0 0 var(--dot-color),
-      0 2em var(--dot-color),
-      2em 2em var(--dot-color),
-      2em 2em 0 -5px var(--dot-color);
+  @keyframes SAN-load {
+    0% {
+      box-shadow:
+        -2em 2em 0 -10px var(--dot-color),
+        -2em 2em var(--dot-color),
+        0 2em var(--dot-color),
+        2em 2em var(--dot-color);
+    }
+
+    100% {
+      box-shadow:
+        -2em 2em 0 0 var(--dot-color),
+        0 2em var(--dot-color),
+        2em 2em var(--dot-color),
+        2em 2em 0 -5px var(--dot-color);
+    }
   }
-}
 
-@keyframes SAN-load-spin {
-  0% {
-    transform: rotate(0deg);
+  @keyframes SAN-load-spin {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
   }
 
-  100% {
-    transform: rotate(360deg);
+  .expl-tooltip {
+    position: relative;
   }
-}
 
-.expl-tooltip {
-  position: relative;
-}
+  .expl-tooltip:hover::before {
+    position: absolute;
+    content: attr(aria-label);
+    font-size: 12px;
+    line-height: 16px;
+    background: #505573;
+    color: #fff;
+    border-radius: 4px;
+    padding: 5px 12px;
+    width: var(--expl-width, auto);
+    white-space: var(--expl-white-space, nowrap);
+    right: var(--expl-right);
+    left: var(--expl-left);
+    bottom: var(--expl-bottom);
+    top: var(--expl-position-y, -6px);
+    transform: translate(var(--expl-align-x, 0), var(--expl-align-y, -100%));
+    z-index: var(--expl-z-index, 30);
+  }
 
-.expl-tooltip:hover::before {
-  position: absolute;
-  content: attr(aria-label);
-  font-size: 12px;
-  line-height: 16px;
-  background: #505573;
-  color: #fff;
-  border-radius: 4px;
-  padding: 5px 12px;
-  width: var(--expl-width, auto);
-  white-space: var(--expl-white-space, nowrap);
-  right: var(--expl-right);
-  left: var(--expl-left);
-  bottom: var(--expl-bottom);
-  top: var(--expl-position-y, -6px);
-  transform: translate(var(--expl-align-x, 0), var(--expl-align-y, -100%));
-  z-index: var(--expl-z-index, 30);
-}
+  .expl-tooltip[aria-expanded='true']:hover::before {
+    display: none;
+  }
 
-.expl-tooltip[aria-expanded='true']:hover::before {
-  display: none;
-}
+  skeleton {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+  }
 
-skeleton {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-}
+  skeleton,
+  .skeleton {
+    border-radius: 4px;
+    background: linear-gradient(90deg,
+        var(--porcelain) 29%,
+        var(--white) 37%,
+        var(--porcelain) 60%);
+    animation: SAN-move-gradient 1.4s ease infinite;
+    background-size: 400% 100%;
+  }
 
-skeleton,
-.skeleton {
-  border-radius: 4px;
-  background: linear-gradient(90deg, var(--porcelain) 29%, var(--white) 37%, var(--porcelain) 60%);
-  animation: SAN-move-gradient 1.4s ease infinite;
-  background-size: 400% 100%;
-}
+  @keyframes SAN-move-gradient {
+    0% {
+      background-position: 100% 50%;
+    }
 
-@keyframes SAN-move-gradient {
-  0% {
-    background-position: 100% 50%;
+    100% {
+      background-position: 0 50%;
+    }
   }
 
-  100% {
-    background-position: 0 50%;
+  .fly-and-scale-animation {
+    @apply origin-(--bits-popover-content-transform-origin) data-[side=bottom]:slide-in-from-top-2 data-[side=bottom]:slide-out-to-top-1 data-[side=left]:slide-in-from-right-2 data-[side=left]:slide-out-to-right-1 data-[side=right]:slide-in-from-left-2 data-[side=right]:slide-out-to-left-1 data-[side=top]:slide-in-from-bottom-2 data-[side=top]:slide-out-to-bottom-1 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95;
   }
-}
-
-.fly-and-scale-animation {
-  @apply origin-[--bits-popover-content-transform-origin] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=bottom]:slide-out-to-top-1 data-[side=left]:slide-in-from-right-2 data-[side=left]:slide-out-to-right-1 data-[side=right]:slide-in-from-left-2 data-[side=right]:slide-out-to-left-1 data-[side=top]:slide-in-from-bottom-2 data-[side=top]:slide-out-to-bottom-1;
-}
 
-.dialog-animation {
-  @apply data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-90 data-[state=open]:zoom-in-90;
+  .dialog-animation {
+    @apply data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-90 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-90;
 
-  --tw-enter-translate-x: -50% !important;
-  --tw-enter-translate-y: -50% !important;
-  --tw-exit-translate-x: -50% !important;
-  --tw-exit-translate-y: -50% !important;
-}
+    --tw-enter-translate-x: 0 !important;
+    --tw-enter-translate-y: 0 !important;
+    --tw-exit-translate-x: 0 !important;
+    --tw-exit-translate-y: 0 !important;
+  }
 
-.animated {
-  @apply fill-mode-both;
-  animation-duration: 0.2s !important;
-}
+  .animated {
+    @apply fill-mode-both;
+    animation-duration: 0.2s !important;
+  }
 
-.ai-chatbot-content ul {
-  @apply mb-2 list-disc pl-6;
-}
+  .ai-chatbot-content ul {
+    @apply mb-2 list-disc pl-6;
+  }
 
-.ai-chatbot-content ol {
-  @apply mb-2 list-decimal pl-6;
-}
+  .ai-chatbot-content ol {
+    @apply mb-2 list-decimal pl-6;
+  }
 
-.ai-chatbot-content li {
-  @apply mb-1;
-}
+  .ai-chatbot-content li {
+    @apply mb-1;
+  }
 
-.ai-chatbot-content pre {
-  @apply my-6 overflow-x-auto rounded-md;
-  font-size: 14px;
-}
+  .ai-chatbot-content pre {
+    @apply my-6 overflow-x-auto rounded-md;
+    font-size: 14px;
+  }
 
-.ai-chatbot-content code {
-  @apply rounded-md bg-athens px-1 py-0.5;
-}
+  .ai-chatbot-content code {
+    @apply rounded-md bg-athens px-1 py-0.5;
+  }
 
-.ai-chatbot-content p {
-  @apply mb-2;
-}
+  .ai-chatbot-content p {
+    @apply mb-2;
+  }
 
-.ai-chatbot-content p:last-child {
-  @apply mb-0;
-}
+  .ai-chatbot-content p:last-child {
+    @apply mb-0;
+  }
 
-.ai-chatbot-content a {
-  @apply link-pointer;
-}
+  .ai-chatbot-content a {
+    @apply link-pointer;
+  }
 
-.ai-chatbot-content h2 {
-  @apply mb-2 text-lg font-semibold;
-}
+  .ai-chatbot-content h2 {
+    @apply mb-2 text-lg font-semibold;
+  }
 
-.ai-chatbot-content h3 {
-  @apply mb-1.5 text-base font-semibold;
+  .ai-chatbot-content h3 {
+    @apply mb-1.5 text-base font-semibold;
+  }
 }
diff --git a/src/lib/ui/app/AIChatbot/variants/academyQA/AskAIButton.svelte b/src/lib/ui/app/AIChatbot/variants/academyQA/AskAIButton.svelte
index fc6e5468f..0b042d063 100644
--- a/src/lib/ui/app/AIChatbot/variants/academyQA/AskAIButton.svelte
+++ b/src/lib/ui/app/AIChatbot/variants/academyQA/AskAIButton.svelte
@@ -12,7 +12,7 @@
 
 <Button
   variant="border"
-  class="ask-ai-academy-button rounded-md border-2 border-transparent px-6 transition-colors md:!px-4 sm:!px-6"
+  class="ask-ai-academy-button rounded-md border-2 border-transparent px-6 transition-colors md:px-4! sm:px-6!"
   onclick={() => aiChatbot.openWithPrompt()}
 >
   {isPhone ? 'AI Chat' : 'Chat with AI'}
diff --git a/src/lib/ui/app/AIChatbot/variants/academyQA/ChatFeedback.svelte b/src/lib/ui/app/AIChatbot/variants/academyQA/ChatFeedback.svelte
index 045eb85f0..a2d86570d 100644
--- a/src/lib/ui/app/AIChatbot/variants/academyQA/ChatFeedback.svelte
+++ b/src/lib/ui/app/AIChatbot/variants/academyQA/ChatFeedback.svelte
@@ -43,7 +43,7 @@
     <p class="text-sm text-waterloo">Did Turtoshi answer correctly?</p>
 
     <div class="flex gap-2">
-      <Tooltip position="top" class="z-[99999] rounded" noStyles>
+      <Tooltip position="top" class="z-99999 rounded-sm" noStyles>
         {#snippet children({ ref })}
           <Button
             {ref}
@@ -54,11 +54,11 @@
         {/snippet}
 
         {#snippet content()}
-          <p class="rounded bg-fiord px-3 py-[5px] text-xs text-white">Good answer</p>
+          <p class="rounded-sm bg-fiord px-3 py-[5px] text-xs text-white">Good answer</p>
         {/snippet}
       </Tooltip>
 
-      <Tooltip position="top" class="z-[99999] rounded" noStyles>
+      <Tooltip position="top" class="z-99999 rounded-sm" noStyles>
         {#snippet children({ ref })}
           <Button
             {ref}
@@ -69,7 +69,7 @@
         {/snippet}
 
         {#snippet content()}
-          <p class="rounded bg-fiord px-3 py-[5px] text-xs text-white">Bad answer</p>
+          <p class="rounded-sm bg-fiord px-3 py-[5px] text-xs text-white">Bad answer</p>
         {/snippet}
       </Tooltip>
     </div>
@@ -80,7 +80,7 @@
       class={cn(
         'relative mt-5 flex items-center justify-center gap-[90px]',
         'rounded-md border border-porcelain bg-whale px-6 py-5',
-        'sm:!gap-8 xs:!flex-col xs:!text-center',
+        'sm:gap-8! xs:flex-col! xs:text-center!',
       )}
     >
       <Button
diff --git a/src/lib/ui/app/AIChatbot/variants/academyQA/ChatInput.svelte b/src/lib/ui/app/AIChatbot/variants/academyQA/ChatInput.svelte
index f6dba0145..c26dca3f1 100644
--- a/src/lib/ui/app/AIChatbot/variants/academyQA/ChatInput.svelte
+++ b/src/lib/ui/app/AIChatbot/variants/academyQA/ChatInput.svelte
@@ -136,11 +136,11 @@
           'qa-academy-border-gradient',
           'flex-1 items-center overflow-hidden overscroll-auto rounded-lg pr-14',
           'border-2 border-transparent py-5 focus-within:border-transparent hover:border-transparent',
-          'bg-white placeholder-casper outline-none focus-within:fill-waterloo [&>svg]:bottom-5 [&>svg]:fill-rhino',
-          'sm:!h-[88px] sm:!items-start sm:!px-3 sm:!py-2 sm:!pr-[50px]',
+          'bg-white placeholder-casper outline-hidden focus-within:fill-waterloo [&>svg]:bottom-5 [&>svg]:fill-rhino',
+          'sm:h-[88px]! sm:items-start! sm:px-3! sm:py-2! sm:pr-[50px]!',
         )}
         inputClass={cn(
-          'resize-none py-0 pr-0 pl-12 sm:!pl-0 sm:!h-full max-h-[72px] text-base',
+          'resize-none py-0 pr-0 pl-12 sm:pl-0! sm:h-full! max-h-[72px] text-base',
           !initialIcon && 'pl-4',
         )}
         rows={1}
@@ -159,7 +159,7 @@
             'absolute right-4 top-1/2 h-8 w-8 -translate-y-1/2 rounded-full',
             'border border-green fill-green hover:bg-green hover:fill-white',
             'active:border-green-hover active:bg-green-hover',
-            'sm:!bottom-1.5 sm:!right-1.5 sm:!translate-y-0',
+            'sm:bottom-1.5! sm:right-1.5! sm:translate-y-0!',
           )}
           onclick={() => handleSubmit(value)}
           disabled={loading}
@@ -171,16 +171,16 @@
   {#snippet content()}
     <div
       bind:this={contentRef.$}
-      class="w-[var(--bits-popover-anchor-width)] rounded-md border border-porcelain bg-white px-6 py-4"
+      class="w-(--bits-popover-anchor-width) rounded-md border border-porcelain bg-white px-6 py-4"
     >
-      <h4 class="mb-3 text-base font-semibold text-rhino sm:!text-sm">Suggested</h4>
+      <h4 class="mb-3 text-base font-semibold text-rhino sm:text-sm!">Suggested</h4>
 
-      <ul class="[&>li]:mb-3 last:[&>li]:mb-0 sm:[&>li]:mb-2.5">
+      <ul class="[&>li]:mb-3 [&>li]:last:mb-0 sm:[&>li]:mb-2.5">
         {#each predictions as prediction}
           <li>
             <Button
               variant="link"
-              class="inline-block h-auto p-0 text-left text-sm sm:!text-base"
+              class="inline-block h-auto p-0 text-left text-sm sm:text-base!"
               onclick={() => handleSubmit(prediction.question)}
             >
               {prediction.question}
diff --git a/src/lib/ui/app/AIChatbot/variants/academyQA/ChatMessage.svelte b/src/lib/ui/app/AIChatbot/variants/academyQA/ChatMessage.svelte
index ef538d05b..636209e4a 100644
--- a/src/lib/ui/app/AIChatbot/variants/academyQA/ChatMessage.svelte
+++ b/src/lib/ui/app/AIChatbot/variants/academyQA/ChatMessage.svelte
@@ -26,25 +26,25 @@
 </script>
 
 <div
-  class={cn('rounded-md px-8 py-4', role === 'USER' ? 'bg-athens sm:!px-3' : 'bg-white sm:!px-0')}
+  class={cn('rounded-md px-8 py-4', role === 'USER' ? 'bg-athens sm:px-3!' : 'bg-white sm:px-0!')}
 >
-  <header class="flex items-start gap-4 sm:!mb-1.5 sm:!items-center sm:!gap-2.5">
+  <header class="flex items-start gap-4 sm:mb-1.5! sm:items-center! sm:gap-2.5!">
     <Picture
-      class="h-8 w-8 flex-shrink-0 border border-transparent bg-white fill-rhino sm:!h-6 sm:!w-6"
+      class="h-8 w-8 shrink-0 border border-transparent bg-white fill-rhino sm:h-6! sm:w-6!"
     >
       <Svg id={role === 'ASSISTANT' ? 'turtoshi' : 'user'} w={iconSize} />
     </Picture>
 
     <div class="flex items-center gap-2">
-      <h4 class="text-base font-semibold text-rhino sm:!text-sm">
+      <h4 class="text-base font-semibold text-rhino sm:text-sm!">
         {role === 'USER' ? 'You' : 'Turtoshi'}
       </h4>
-      <p class="text-xs text-waterloo sm:!text-2xs">Today {formatChatTime(insertedAt)}</p>
+      <p class="text-xs text-waterloo sm:text-2xs!">Today {formatChatTime(insertedAt)}</p>
     </div>
   </header>
 
-  <div class="gap-8 pl-12 md:!pl-9 sm:!pl-0">
-    <div class="flex flex-col-reverse gap-y-8 sm:!flex-col">
+  <div class="gap-8 pl-12 md:pl-9! sm:pl-0!">
+    <div class="flex flex-col-reverse gap-y-8 sm:flex-col!">
       <p
         class={cn(
           'ai-chatbot-content w-fit max-w-full text-base text-rhino [word-break:break-word]',
diff --git a/src/lib/ui/app/AIChatbot/variants/academyQA/ChatSource.svelte b/src/lib/ui/app/AIChatbot/variants/academyQA/ChatSource.svelte
index ef50ecc1c..3cc5af935 100644
--- a/src/lib/ui/app/AIChatbot/variants/academyQA/ChatSource.svelte
+++ b/src/lib/ui/app/AIChatbot/variants/academyQA/ChatSource.svelte
@@ -10,7 +10,7 @@
 <Button
   target="_blank"
   href={source.url}
-  class="group grid h-auto w-full max-w-[calc(50%-14px)] grid-cols-[1fr_auto] items-start gap-x-3 bg-green-light-1 py-3 pl-5 pr-2 xs:!max-w-[364px]"
+  class="group grid h-auto w-full max-w-[calc(50%-14px)] grid-cols-[1fr_auto] items-start gap-x-3 bg-green-light-1 py-3 pl-5 pr-2 xs:max-w-[364px]!"
   {onclick}
 >
   <div class="min-w-0 pt-1">
diff --git a/src/lib/ui/app/AIChatbot/variants/academyQA/ChatSuggestions.svelte b/src/lib/ui/app/AIChatbot/variants/academyQA/ChatSuggestions.svelte
index 7b8b88fc8..4a92d393d 100644
--- a/src/lib/ui/app/AIChatbot/variants/academyQA/ChatSuggestions.svelte
+++ b/src/lib/ui/app/AIChatbot/variants/academyQA/ChatSuggestions.svelte
@@ -15,7 +15,7 @@
 <div class={cn('py-4', className)}>
   <h4 class="mb-4 text-base font-semibold text-rhino">{title}</h4>
 
-  <ul class="sm:![&>li]:mb-2.5 [&>li]:mb-3 last:[&>li]:mb-0">
+  <ul class="sm:![&>li]:mb-2.5 [&>li]:mb-3 [&>li]:last:mb-0">
     {#each suggestions as suggestion}
       <li>
         <Button
diff --git a/src/lib/ui/app/AIChatbot/variants/academyQA/ChatbotUI.svelte b/src/lib/ui/app/AIChatbot/variants/academyQA/ChatbotUI.svelte
index 3e80242ce..8e392645d 100644
--- a/src/lib/ui/app/AIChatbot/variants/academyQA/ChatbotUI.svelte
+++ b/src/lib/ui/app/AIChatbot/variants/academyQA/ChatbotUI.svelte
@@ -206,8 +206,8 @@
 <Dialog
   class={cn(
     'flex h-full w-full max-w-[1024px]',
-    'flex-col rounded-lg border border-porcelain bg-white px-8 pb-4 pt-[14px] text-base shadow',
-    'sm:!px-5',
+    'flex-col rounded-lg border border-porcelain bg-white px-8 pb-4 pt-[14px] text-base shadow-sm',
+    'sm:px-5!',
     className,
   )}
 >
@@ -298,7 +298,7 @@
 
               <div class="flex-1" aria-hidden="true"></div>
 
-              <div class="sticky bottom-0 z-10 bg-gradient-to-t from-white/95 to-transparent pt-3">
+              <div class="sticky bottom-0 z-10 bg-linear-to-t from-white/95 to-transparent pt-3">
                 <div class="flex items-end justify-center transition-opacity duration-75">
                   <ChatLoader />
                 </div>
@@ -313,7 +313,7 @@
           class="absolute bottom-[10px] left-1/2 -translate-x-1/2"
           transition:fade={{ duration: 300 }}
         >
-          <Tooltip position="top" class="z-[99999] rounded" noStyles>
+          <Tooltip position="top" class="z-99999 rounded-sm" noStyles>
             {#snippet children({ ref })}
               <Button
                 {ref}
@@ -324,7 +324,7 @@
             {/snippet}
 
             {#snippet content()}
-              <p class="rounded bg-fiord px-3 py-[5px] text-xs text-white">Scroll to latest</p>
+              <p class="rounded-sm bg-fiord px-3 py-[5px] text-xs text-white">Scroll to latest</p>
             {/snippet}
           </Tooltip>
         </div>
@@ -338,7 +338,7 @@
     />
   </div>
 
-  <p class="mt-2 text-center text-sm text-casper sm:!text-sm">
+  <p class="mt-2 text-center text-sm text-casper sm:text-sm!">
     {isPhone
       ? 'Check important info for mistakes'
       : 'Turtoshi surfs only through our Academy. Check important info for mistakes.'}
diff --git a/src/lib/ui/app/AIChatbot/variants/dyorDashboard/ChatScreen.svelte b/src/lib/ui/app/AIChatbot/variants/dyorDashboard/ChatScreen.svelte
index 7b83a58de..f06e8b3c2 100644
--- a/src/lib/ui/app/AIChatbot/variants/dyorDashboard/ChatScreen.svelte
+++ b/src/lib/ui/app/AIChatbot/variants/dyorDashboard/ChatScreen.svelte
@@ -44,7 +44,7 @@
 </div>
 
 <div
-  class="flex-1 overflow-y-auto pr-1 [&>div]:my-8 first:[&>div]:mt-0"
+  class="flex-1 overflow-y-auto pr-1 [&>div]:my-8 [&>div]:first:mt-0"
   bind:this={chatMessagesRef.$}
 >
   {#if aiChatbot.$$.session}
@@ -52,7 +52,7 @@
       {#if msg.role === 'USER'}
         {@render userInput(msg.content)}
       {:else}
-        <div class="ai-chatbot-content w-fit break-words">
+        <div class="ai-chatbot-content w-fit wrap-break-word">
           {#await import('marked') then { marked }}
             {@html marked(msg.content)}
           {/await}
@@ -72,7 +72,7 @@
 
 {#snippet userInput(message: string)}
   <div
-    class="m-0 ml-auto w-fit self-end whitespace-pre-wrap break-words rounded-lg bg-porcelain px-2.5 py-2"
+    class="m-0 ml-auto w-fit self-end whitespace-pre-wrap wrap-break-word rounded-lg bg-porcelain px-2.5 py-2"
   >
     {message}
   </div>
@@ -82,7 +82,7 @@
   <div
     class={cn(
       'h-[2.4px] w-[2.4px] rounded-full',
-      'shadow-[9.6px_0_0_2.4px_#14c393,_-9.6px_0_0_2.4px_#14c393]',
+      'shadow-[9.6px_0_0_2.4px_#14c393,-9.6px_0_0_2.4px_#14c393]',
       'animate-[spin_1.2s_linear_infinite]',
     )}
   ></div>
diff --git a/src/lib/ui/app/AIChatbot/variants/dyorDashboard/ChatTrigger.svelte b/src/lib/ui/app/AIChatbot/variants/dyorDashboard/ChatTrigger.svelte
index 6164cecd6..05ed870cb 100644
--- a/src/lib/ui/app/AIChatbot/variants/dyorDashboard/ChatTrigger.svelte
+++ b/src/lib/ui/app/AIChatbot/variants/dyorDashboard/ChatTrigger.svelte
@@ -36,7 +36,7 @@
         placeholder="Ask AI for insights"
         value={aiChatbot.$$.message}
         type="text"
-        class="pr-13 h-10 w-56 rounded-full shadow"
+        class="pr-13 h-10 w-56 rounded-full shadow-sm"
         inputClass={cn(
           'text-base placeholder-casper pr-4 transition-all',
           focused ? 'pl-4' : 'pl-8',
@@ -70,7 +70,7 @@
   {#if !aiChatbot.$$.session}
     <Button
       icon="social-trend"
-      class="h-10 w-10 shrink-0 rounded-full bg-white shadow hover:fill-green"
+      class="h-10 w-10 shrink-0 rounded-full bg-white shadow-sm hover:fill-green"
       onclick={() => aiChatbot.openWithPrompt()}
     ></Button>
   {/if}
diff --git a/src/lib/ui/app/AIChatbot/variants/dyorDashboard/ChatbotUI.svelte b/src/lib/ui/app/AIChatbot/variants/dyorDashboard/ChatbotUI.svelte
index 3d123a54b..ce315fafd 100644
--- a/src/lib/ui/app/AIChatbot/variants/dyorDashboard/ChatbotUI.svelte
+++ b/src/lib/ui/app/AIChatbot/variants/dyorDashboard/ChatbotUI.svelte
@@ -34,7 +34,7 @@
 <Dialog
   class={cn(
     'bottom-6 left-auto right-6 top-auto flex h-[600px] w-[600px]',
-    'transform-none flex-col rounded-lg border border-porcelain bg-white px-6 pb-6 pt-[14px] text-base shadow',
+    'transform-none flex-col rounded-lg border border-porcelain bg-white px-6 pb-6 pt-[14px] text-base shadow-sm',
   )}
 >
   <div class="flex h-6 items-center justify-end">
@@ -55,7 +55,7 @@
   <div class="relative mt-3 flex items-center">
     <Textarea
       ref={triggerRef}
-      class="min-h-16 flex-1 resize-none rounded-lg border border-porcelain bg-transparent px-3 py-2.5 placeholder-casper outline-none"
+      class="min-h-16 flex-1 resize-none rounded-lg border border-porcelain bg-transparent px-3 py-2.5 placeholder-casper outline-hidden"
       placeholder="Ask Santiment AI..."
       rows={2}
       value={aiChatbot.$$.message}
diff --git a/src/lib/ui/app/AIChatbot/variants/dyorDashboard/SelectionTooltip.svelte b/src/lib/ui/app/AIChatbot/variants/dyorDashboard/SelectionTooltip.svelte
index 33b23b0e8..164b438e5 100644
--- a/src/lib/ui/app/AIChatbot/variants/dyorDashboard/SelectionTooltip.svelte
+++ b/src/lib/ui/app/AIChatbot/variants/dyorDashboard/SelectionTooltip.svelte
@@ -139,7 +139,7 @@
 
   {#snippet content()}
     <Button
-      class="w-full select-none rounded-full border border-porcelain bg-white px-2.5 py-1.5 text-sm shadow transition-opacity hover:border-green-hover"
+      class="w-full select-none rounded-full border border-porcelain bg-white px-2.5 py-1.5 text-sm shadow-sm transition-opacity hover:border-green-hover"
       onclick={clickTooltip}
     >
       🤖 Ask&nbsp;AI
diff --git a/src/lib/ui/app/AccountDropdown/AccountDropdown.svelte b/src/lib/ui/app/AccountDropdown/AccountDropdown.svelte
index 7fe7755aa..49bdff5d5 100644
--- a/src/lib/ui/app/AccountDropdown/AccountDropdown.svelte
+++ b/src/lib/ui/app/AccountDropdown/AccountDropdown.svelte
@@ -34,7 +34,7 @@
   }
 </script>
 
-<Tooltip class="z-[100] w-[240px] divide-y overflow-auto p-0 text-fiord column">
+<Tooltip class="z-100 w-[240px] divide-y overflow-auto p-0 text-fiord column">
   {#snippet children({ ref })}
     <ProfilePicture class={className} {ref}></ProfilePicture>
   {/snippet}
diff --git a/src/lib/ui/app/AccountDropdown/ProfilePicture.svelte b/src/lib/ui/app/AccountDropdown/ProfilePicture.svelte
index 1b579404d..1ffdd2799 100644
--- a/src/lib/ui/app/AccountDropdown/ProfilePicture.svelte
+++ b/src/lib/ui/app/AccountDropdown/ProfilePicture.svelte
@@ -25,7 +25,7 @@
   variant="plain"
   style="--tw-ring-color:var(--{isBusinessPro ? 'blue' : isPro ? 'orange' : 'casper'})"
   class={cn(
-    'flex size-8 rounded-full !fill-waterloo p-0 !text-waterloo center md:size-12',
+    'flex size-8 rounded-full fill-waterloo! p-0 text-waterloo! center md:size-12',
     currentUser.$$
       ? 'ring-[1.5px] ring-inset hover:ring-[2.5px] data-[state=open]:ring-[2.5px] md:ring-2'
       : 'bg-athens hover:bg-porcelain data-[state=open]:bg-porcelain',
diff --git a/src/lib/ui/app/AcknowledgmentsDialog/AcknowledgmentsDialog.svelte b/src/lib/ui/app/AcknowledgmentsDialog/AcknowledgmentsDialog.svelte
index bd433c851..d220c7010 100644
--- a/src/lib/ui/app/AcknowledgmentsDialog/AcknowledgmentsDialog.svelte
+++ b/src/lib/ui/app/AcknowledgmentsDialog/AcknowledgmentsDialog.svelte
@@ -25,7 +25,7 @@
   </header>
 
   <div class="gap-8 p-5 column">
-    <p class="rounded bg-athens p-4 text-fiord">
+    <p class="rounded-sm bg-athens p-4 text-fiord">
       TradingView Lightweight Charts™ <br />
       Copyright (с) 2026 TradingView, Inc. https://www.tradingview.com/
     </p>
diff --git a/src/lib/ui/app/Alerts/Dialog/CategoriesScreen.svelte b/src/lib/ui/app/Alerts/Dialog/CategoriesScreen.svelte
index f25a6af4a..e32999a0b 100644
--- a/src/lib/ui/app/Alerts/Dialog/CategoriesScreen.svelte
+++ b/src/lib/ui/app/Alerts/Dialog/CategoriesScreen.svelte
@@ -15,7 +15,7 @@
     {#each SCHEMAS as schema (schema.name)}
       <Button
         variant="plain"
-        class="h-auto flex-col items-start rounded border px-8 pb-8 pt-5 text-start text-fiord hover:border-green"
+        class="h-auto flex-col items-start rounded-sm border px-8 pb-8 pt-5 text-start text-fiord hover:border-green"
         onclick={() => onSelect(schema)}
       >
         <h3 class="mb-3 flex items-center gap-3 text-lg text-black">
diff --git a/src/lib/ui/app/Alerts/Dialog/StepValue.svelte b/src/lib/ui/app/Alerts/Dialog/StepValue.svelte
index 1bf0e038a..50b546b26 100644
--- a/src/lib/ui/app/Alerts/Dialog/StepValue.svelte
+++ b/src/lib/ui/app/Alerts/Dialog/StepValue.svelte
@@ -8,6 +8,6 @@
   const { children }: TProps = $props()
 </script>
 
-<span class="inline-flex items-center gap-2 rounded border fill-waterloo px-3 py-1.5">
+<span class="inline-flex items-center gap-2 rounded-sm border fill-waterloo px-3 py-1.5">
   {@render children()}
 </span>
diff --git a/src/lib/ui/app/Alerts/categories/wallet/wallet-form-step/ui/Info.svelte b/src/lib/ui/app/Alerts/categories/wallet/wallet-form-step/ui/Info.svelte
index 849473fbe..90a881c27 100644
--- a/src/lib/ui/app/Alerts/categories/wallet/wallet-form-step/ui/Info.svelte
+++ b/src/lib/ui/app/Alerts/categories/wallet/wallet-form-step/ui/Info.svelte
@@ -11,7 +11,7 @@
   const { children, description }: TProps = $props()
 </script>
 
-<section class="rounded bg-athens fill-waterloo px-4 pb-3 pt-4">
+<section class="rounded-sm bg-athens fill-waterloo px-4 pb-3 pt-4">
   <div class="flex items-center gap-3">
     <Svg id="info" w="12" />
     {@render children?.()}
diff --git a/src/lib/ui/app/Alerts/categories/wallet/wallet-form-step/ui/index.svelte b/src/lib/ui/app/Alerts/categories/wallet/wallet-form-step/ui/index.svelte
index 2a0bdfcfe..c81c5c858 100644
--- a/src/lib/ui/app/Alerts/categories/wallet/wallet-form-step/ui/index.svelte
+++ b/src/lib/ui/app/Alerts/categories/wallet/wallet-form-step/ui/index.svelte
@@ -72,7 +72,7 @@
       <Button
         variant="plain"
         class={cn(
-          'group flex flex-col items-stretch gap-1 rounded border px-4 py-3',
+          'group flex flex-col items-stretch gap-1 rounded-sm border px-4 py-3',
           disabled ? 'bg-athens text-casper' : 'hover:border-green',
           active && 'active',
         )}
diff --git a/src/lib/ui/app/Alerts/categories/watchlist/watchlist-form-step/ui/ListOfWatchlists.svelte b/src/lib/ui/app/Alerts/categories/watchlist/watchlist-form-step/ui/ListOfWatchlists.svelte
index f9de86d19..6de926a94 100644
--- a/src/lib/ui/app/Alerts/categories/watchlist/watchlist-form-step/ui/ListOfWatchlists.svelte
+++ b/src/lib/ui/app/Alerts/categories/watchlist/watchlist-form-step/ui/ListOfWatchlists.svelte
@@ -58,7 +58,7 @@
         {disabled}
         explanation={disabled ? 'Alert for this screener already created' : undefined}
         class={cn(
-          'group flex-col items-start gap-0 rounded border bg-white px-3 py-2 hover:border-green hover:text-green',
+          'group flex-col items-start gap-0 rounded-sm border bg-white px-3 py-2 hover:border-green hover:text-green',
           isActive && 'border-green',
           disabled && 'bg-athens text-mystic hover:border-porcelain hover:text-mystic',
         )}
diff --git a/src/lib/ui/app/Alerts/form-steps/metric-conditions/ui/AlertPreview/PreviewChart.svelte b/src/lib/ui/app/Alerts/form-steps/metric-conditions/ui/AlertPreview/PreviewChart.svelte
index d0bbbac72..aac506ccd 100644
--- a/src/lib/ui/app/Alerts/form-steps/metric-conditions/ui/AlertPreview/PreviewChart.svelte
+++ b/src/lib/ui/app/Alerts/form-steps/metric-conditions/ui/AlertPreview/PreviewChart.svelte
@@ -78,7 +78,7 @@
 
 <article
   bind:clientWidth={containerWidth}
-  class="relative flex h-44 w-full flex-col rounded border pb-9 pt-3"
+  class="relative flex h-44 w-full flex-col rounded-sm border pb-9 pt-3"
 >
   {#if loading}
     <div class="skeleton absolute inset-0"></div>
diff --git a/src/lib/ui/app/Alerts/form-steps/metric-conditions/ui/Metric.svelte b/src/lib/ui/app/Alerts/form-steps/metric-conditions/ui/Metric.svelte
index 156cae237..5a5383611 100644
--- a/src/lib/ui/app/Alerts/form-steps/metric-conditions/ui/Metric.svelte
+++ b/src/lib/ui/app/Alerts/form-steps/metric-conditions/ui/Metric.svelte
@@ -14,7 +14,7 @@
 <Button
   variant="plain"
   class={cn(
-    'flex w-full cursor-auto flex-col items-stretch gap-1 rounded border fill-green px-4 py-2',
+    'flex w-full cursor-auto flex-col items-stretch gap-1 rounded-sm border fill-green px-4 py-2',
     onclick && 'cursor-pointer hover:border-green',
   )}
   {onclick}
diff --git a/src/lib/ui/app/Alerts/form-steps/metric-conditions/ui/Metrics.svelte b/src/lib/ui/app/Alerts/form-steps/metric-conditions/ui/Metrics.svelte
index ac84ce1d3..1f0089ae7 100644
--- a/src/lib/ui/app/Alerts/form-steps/metric-conditions/ui/Metrics.svelte
+++ b/src/lib/ui/app/Alerts/form-steps/metric-conditions/ui/Metrics.svelte
@@ -49,7 +49,7 @@
       <Button
         variant="plain"
         class={cn(
-          'rounded bg-athens px-4 py-2.5 font-semibold hover:text-green',
+          'rounded-sm bg-athens px-4 py-2.5 font-semibold hover:text-green',
           isOpened && 'bg-green-light-1',
         )}
         onclick={() => onCategoryClick(category)}
@@ -63,7 +63,7 @@
             {@const { group } = metrics[0]}
 
             {#if group}
-              <h4 class="text-xs font-semibold text-waterloo [line-height:32px]">{group}</h4>
+              <h4 class="text-xs font-semibold text-waterloo leading-[32px]">{group}</h4>
             {/if}
 
             {#each metrics as metric (metric.key)}
diff --git a/src/lib/ui/app/Alerts/form-steps/name-description/ui/index.svelte b/src/lib/ui/app/Alerts/form-steps/name-description/ui/index.svelte
index 63ed3429c..0cfb77d1b 100644
--- a/src/lib/ui/app/Alerts/form-steps/name-description/ui/index.svelte
+++ b/src/lib/ui/app/Alerts/form-steps/name-description/ui/index.svelte
@@ -36,7 +36,7 @@
 </section>
 
 {#snippet textarea(title: string, name: keyof TNameDescriptionState, rows: number)}
-  <label class="title flex flex-col rounded border px-4 py-3">
+  <label class="title flex flex-col rounded-sm border px-4 py-3">
     <p class="text-xs text-waterloo">{title}</p>
     <Textarea
       class="border-none"
diff --git a/src/lib/ui/app/Alerts/form-steps/notifications-privacy/ui/Section.svelte b/src/lib/ui/app/Alerts/form-steps/notifications-privacy/ui/Section.svelte
index 5a1453990..db9fbb437 100644
--- a/src/lib/ui/app/Alerts/form-steps/notifications-privacy/ui/Section.svelte
+++ b/src/lib/ui/app/Alerts/form-steps/notifications-privacy/ui/Section.svelte
@@ -12,7 +12,7 @@
   const { class: className, title, children }: TProps = $props()
 </script>
 
-<section class={cn('overflow-clip rounded border', className)}>
+<section class={cn('overflow-clip rounded-sm border', className)}>
   <h4 class="bg-athens px-4 py-2 text-xs font-medium text-waterloo">{title}</h4>
 
   {@render children()}
diff --git a/src/lib/ui/app/CancelSubscriptionDialog/FeedbackScreen.svelte b/src/lib/ui/app/CancelSubscriptionDialog/FeedbackScreen.svelte
index 6be4095f6..5c0444f1b 100644
--- a/src/lib/ui/app/CancelSubscriptionDialog/FeedbackScreen.svelte
+++ b/src/lib/ui/app/CancelSubscriptionDialog/FeedbackScreen.svelte
@@ -66,7 +66,7 @@
         cols="30"
         rows="3"
         placeholder="Tell us how we can make Santiment better for you in the future"
-        class="min-h-[72px] w-full rounded border bg-white px-2 py-1.5 outline-none hover:border-green focus:border-green"
+        class="min-h-[72px] w-full rounded-sm border bg-white px-2 py-1.5 outline-hidden hover:border-green focus:border-green"
       ></textarea>
     </section>
   </Layout>
diff --git a/src/lib/ui/app/CancelSubscriptionDialog/Layout.svelte b/src/lib/ui/app/CancelSubscriptionDialog/Layout.svelte
index b9a56964a..a3504d32b 100644
--- a/src/lib/ui/app/CancelSubscriptionDialog/Layout.svelte
+++ b/src/lib/ui/app/CancelSubscriptionDialog/Layout.svelte
@@ -14,7 +14,7 @@
 <section class="flex-1 text-center">
   <h2 class="mb-6 text-2xl font-medium">{title}</h2>
 
-  <section class="mb-8 rounded bg-athens px-8 py-6">
+  <section class="mb-8 rounded-sm bg-athens px-8 py-6">
     {@render children()}
   </section>
 
diff --git a/src/lib/ui/app/Chart/Chart.svelte b/src/lib/ui/app/Chart/Chart.svelte
index 0b199307d..a14a24ee6 100644
--- a/src/lib/ui/app/Chart/Chart.svelte
+++ b/src/lib/ui/app/Chart/Chart.svelte
@@ -131,7 +131,7 @@
 
   onMount(() => {
     window.addEventListener('blur', resetChartInteractionMode)
-    return () => window.removeEventListener('blur', resetChartInteractionMode)
+    return () => window.removeEventListener('blur-sm', resetChartInteractionMode)
   })
 
   function _onRangeSelectChange(
@@ -200,7 +200,7 @@
 
 <div
   bind:this={chartContainerNode}
-  class={cn('relative z-[1] column [&>div]:!overflow-visible', className)}
+  class={cn('relative z-1 column [&>div]:overflow-visible!', className)}
 >
   {#if chart.$}
     {@render children()}
diff --git a/src/lib/ui/app/Chart/FormulaEditorDialog/Definitions.svelte b/src/lib/ui/app/Chart/FormulaEditorDialog/Definitions.svelte
index 924d2f283..752fa11eb 100644
--- a/src/lib/ui/app/Chart/FormulaEditorDialog/Definitions.svelte
+++ b/src/lib/ui/app/Chart/FormulaEditorDialog/Definitions.svelte
@@ -51,7 +51,7 @@
         iconSize="14"
         class={cn(
           'scroll-m-4 px-2 hover:bg-white',
-          hoveredDefinitionIndex.$ === index && 'active-definition !bg-athens',
+          hoveredDefinitionIndex.$ === index && 'active-definition bg-athens!',
         )}
         onmouseenter={() => (hoveredDefinitionIndex.$ = index)}
         onclick={() => onItemClick(item)}
diff --git a/src/lib/ui/app/Chart/FormulaEditorDialog/Documentation.svelte b/src/lib/ui/app/Chart/FormulaEditorDialog/Documentation.svelte
index 31dfbdb2f..8ab82b871 100644
--- a/src/lib/ui/app/Chart/FormulaEditorDialog/Documentation.svelte
+++ b/src/lib/ui/app/Chart/FormulaEditorDialog/Documentation.svelte
@@ -47,7 +47,7 @@
   })
 </script>
 
-<section class="flex-1 gap-3 overflow-auto p-4 column">
+<section class="column flex-1 gap-3 overflow-auto p-4">
   <h2 class="flex items-center gap-2 fill-waterloo text-base font-medium text-rhino">
     {#if definition.metric}
       <span class="rounded-md bg-athens px-2.5 text-fiord">
@@ -60,22 +60,24 @@
     {/if}
   </h2>
 
-  <div bind:this={docsElement} class="docs relative gap-2 text-fiord column">
+  <div bind:this={docsElement} class="docs relative column gap-2 text-fiord">
     {@html definition.documentation || ''}
 
     <Button
       icon="copy"
       explanation={copyLabel}
-      class="invisible !absolute right-1.5 top-1.5 bg-athens hover:bg-mystic/50"
+      class="invisible absolute! top-1.5 right-1.5 bg-athens hover:bg-mystic/50"
       onclick={onCopy}
     ></Button>
   </div>
 </section>
 
 <style lang="postcss">
+  @reference '#app.css';
+
   .docs :global {
     pre {
-      @apply relative whitespace-break-spaces break-all rounded bg-athens p-3 text-black;
+      @apply relative rounded bg-athens p-3 break-all whitespace-break-spaces text-black;
     }
 
     p code {
diff --git a/src/lib/ui/app/Chart/FormulaEditorDialog/FormulaEditorDialog.svelte b/src/lib/ui/app/Chart/FormulaEditorDialog/FormulaEditorDialog.svelte
index 4f9356412..cfb058628 100644
--- a/src/lib/ui/app/Chart/FormulaEditorDialog/FormulaEditorDialog.svelte
+++ b/src/lib/ui/app/Chart/FormulaEditorDialog/FormulaEditorDialog.svelte
@@ -134,7 +134,7 @@
   }
 </script>
 
-<Dialog class="w-[900px] !overflow-visible column">
+<Dialog class="w-[900px] overflow-visible! column">
   <form onsubmit={onFormSubmit} class="h-[750px] min-h-0 column">
     <div class="gap-4 p-4 column">
       <label>
diff --git a/src/lib/ui/app/Chart/FormulaEditorDialog/TextEditor.svelte b/src/lib/ui/app/Chart/FormulaEditorDialog/TextEditor.svelte
index e1693ca44..a26cb9e76 100644
--- a/src/lib/ui/app/Chart/FormulaEditorDialog/TextEditor.svelte
+++ b/src/lib/ui/app/Chart/FormulaEditorDialog/TextEditor.svelte
@@ -35,13 +35,13 @@
 
 <div
   use:mount
-  class="group relative max-h-[202px] min-h-8 rounded border bg-white fill-waterloo focus-within:border-green focus-within:fill-green hover:border-green"
+  class="group relative max-h-[202px] min-h-8 rounded-sm border bg-white fill-waterloo focus-within:border-green focus-within:fill-green hover:border-green"
 >
   <pre class="py-[5px] pl-3">{value}</pre>
 
   {#if !value}
     <div
-      class="pointer-events-none absolute left-[12px] top-[5px] z-[1] text-waterloo group-focus-within:hidden"
+      class="pointer-events-none absolute left-[12px] top-[5px] z-1 text-waterloo group-focus-within:hidden"
     >
       Write formula here...
     </div>
diff --git a/src/lib/ui/app/Chart/Minimap/Canvas.svelte b/src/lib/ui/app/Chart/Minimap/Canvas.svelte
index 40af8dd42..f25bea079 100644
--- a/src/lib/ui/app/Chart/Minimap/Canvas.svelte
+++ b/src/lib/ui/app/Chart/Minimap/Canvas.svelte
@@ -65,7 +65,7 @@
 
 <canvas
   bind:this={canvasNode}
-  class="z-[1] h-[40px] min-w-0 flex-1 cursor-ew-resize bg-transparent"
+  class="z-1 h-[40px] min-w-0 flex-1 cursor-ew-resize bg-transparent"
   {onpointerdown}
 ></canvas>
 
diff --git a/src/lib/ui/app/Chart/Minimap/Handles.svelte b/src/lib/ui/app/Chart/Minimap/Handles.svelte
index 8fe4b3b96..77797728c 100644
--- a/src/lib/ui/app/Chart/Minimap/Handles.svelte
+++ b/src/lib/ui/app/Chart/Minimap/Handles.svelte
@@ -40,7 +40,7 @@
     style: '--expl-align-x:34px;--expl-right:0',
   })}
 
-  <div class="absolute inset-0 z-[0] bg-athens"></div>
+  <div class="absolute inset-0 z-0 bg-athens"></div>
 
   {@render handle({
     date: rightHandleDate,
@@ -53,7 +53,7 @@
   <Button
     variant="plain"
     explanation={formatDate(date)}
-    class={cn('chart-minimap-handle z-[2] rounded-sm text-center', className)}
+    class={cn('chart-minimap-handle z-2 rounded-xs text-center', className)}
     {style}
     {onpointerdown}
   ></Button>
diff --git a/src/lib/ui/app/Chart/Minimap/Minimap.svelte b/src/lib/ui/app/Chart/Minimap/Minimap.svelte
index fc79cce61..791d59980 100644
--- a/src/lib/ui/app/Chart/Minimap/Minimap.svelte
+++ b/src/lib/ui/app/Chart/Minimap/Minimap.svelte
@@ -140,7 +140,7 @@
 </script>
 
 <section
-  class={cn('relative flex h-[40px] select-none bg-white center', className)}
+  class={cn('relative flex h-[40px] center bg-white select-none', className)}
   bind:clientWidth={minimapWidth}
 >
   {#if minimapWidth && (viewportPriorityCtx?.checkIsInViewport$() ?? true)}
@@ -160,7 +160,9 @@
 </section>
 
 <style lang="postcss">
+  @reference '#app.css';
+
   :global(.chart-minimap-handle) {
-    @apply absolute z-[2] h-5 w-2 cursor-grab bg-waterloo;
+    @apply absolute z-2 h-5 w-2 cursor-grab bg-waterloo;
   }
 </style>
diff --git a/src/lib/ui/app/Chart/Minimap/YearMarks.svelte b/src/lib/ui/app/Chart/Minimap/YearMarks.svelte
index 4c03e503f..1216380cb 100644
--- a/src/lib/ui/app/Chart/Minimap/YearMarks.svelte
+++ b/src/lib/ui/app/Chart/Minimap/YearMarks.svelte
@@ -5,7 +5,7 @@
 </script>
 
 <div
-  class="marks pointer-events-none absolute inset-0 z-[1] flex items-end justify-around border bg-transparent text-2xs text-waterloo"
+  class="marks pointer-events-none absolute inset-0 z-1 flex items-end justify-around border bg-transparent text-2xs text-waterloo"
 >
   {#each MARKS as mark}
     <span class="mark">{mark}</span>
@@ -13,6 +13,8 @@
 </div>
 
 <style lang="postcss">
+  @reference '#app.css';
+
   .mark {
     @apply relative;
   }
diff --git a/src/lib/ui/app/Chart/PaneLegend/Metric/Metric.svelte b/src/lib/ui/app/Chart/PaneLegend/Metric/Metric.svelte
index c2d0e6f7e..4a29ebe9c 100644
--- a/src/lib/ui/app/Chart/PaneLegend/Metric/Metric.svelte
+++ b/src/lib/ui/app/Chart/PaneLegend/Metric/Metric.svelte
@@ -33,13 +33,13 @@
   onMount(() => () => rest.onmouseleave?.())
 </script>
 
-<div {...rest} class="inline-flex gap-1.5 whitespace-nowrap rounded bg-white/70 center">
+<div {...rest} class="inline-flex center gap-1.5 rounded-sm bg-white/70 whitespace-nowrap">
   <div
     style:---metric-color={metric.ui.$$.color}
     class={cn(
-      'group/pane-metric relative flex whitespace-nowrap rounded border border-transparent bg-transparent p-0.5 px-1.5 center hover:border-[var(---metric-color)] hover:bg-white hover:shadow [&+span]:hover:hidden',
+      'group/pane-metric relative flex center rounded-sm border border-transparent bg-transparent p-0.5 px-1.5 whitespace-nowrap hover:border-(---metric-color) hover:bg-white hover:shadow-sm hover:[&+span]:hidden',
       (isFocused || openedMetric.$ === metric) &&
-        'metric-opened border-[var(---metric-color)] bg-white shadow [&+span]:hidden',
+        'metric-opened border-(---metric-color) bg-white shadow-sm [&+span]:hidden',
       !metric.visible.$ && 'text-casper',
     )}
   >
@@ -60,7 +60,7 @@
 
       <Tooltip
         position="bottom"
-        class="z-[10000] w-[360px] px-6 py-5 pt-4 text-rhino shadow-dropdown"
+        class="z-10000 w-[360px] px-6 py-5 pt-4 text-rhino shadow-dropdown"
       >
         {#snippet children({ ref })}
           <Button
@@ -88,10 +88,7 @@
   {/if}
 
   {#if !!metric.warnings.$?.length}
-    <Tooltip
-      position="bottom"
-      class="z-[10000] w-[360px] px-6 py-5 pt-4 text-rhino shadow-dropdown"
-    >
+    <Tooltip position="bottom" class="z-10000 w-[360px] px-6 py-5 pt-4 text-rhino shadow-dropdown">
       {#snippet children({ ref })}
         <Button
           {ref}
@@ -116,8 +113,10 @@
 {/snippet}
 
 <style lang="postcss">
+  @reference '#app.css';
+
   .warnings :global(code) {
-    @apply rounded bg-athens px-1.5 py-0.5 text-xs font-medium text-fiord text-mono;
+    @apply rounded bg-athens px-1.5 py-0.5 text-mono text-xs font-medium text-fiord;
   }
 
   :global(.group\/pane-metric.relative) {
diff --git a/src/lib/ui/app/Chart/PaneLegend/Pane.svelte b/src/lib/ui/app/Chart/PaneLegend/Pane.svelte
index 2613d5c13..d6e533495 100644
--- a/src/lib/ui/app/Chart/PaneLegend/Pane.svelte
+++ b/src/lib/ui/app/Chart/PaneLegend/Pane.svelte
@@ -30,7 +30,7 @@
 </script>
 
 <section
-  class={cn('absolute left-1 top-1 z-[3] hidden items-start gap-0.5 column', className)}
+  class={cn('absolute left-1 top-1 z-3 hidden items-start gap-0.5 column', className)}
   use:mountToPane
 >
   {#if mounted}
diff --git a/src/lib/ui/app/Chart/RestrictedDataDialog/RestrictedDataDialog.svelte b/src/lib/ui/app/Chart/RestrictedDataDialog/RestrictedDataDialog.svelte
index f0ac97d3f..df2cea300 100644
--- a/src/lib/ui/app/Chart/RestrictedDataDialog/RestrictedDataDialog.svelte
+++ b/src/lib/ui/app/Chart/RestrictedDataDialog/RestrictedDataDialog.svelte
@@ -34,7 +34,7 @@
   </h2>
 
   <section class="min-h-0 gap-4 px-6 py-5 column">
-    <article class="overflow-auto rounded border column">
+    <article class="overflow-auto rounded-sm border column">
       <div class="flex bg-athens text-fiord">
         <section class="cell">Metric</section>
         <section class="cell">Period of restricted data</section>
diff --git a/src/lib/ui/app/Chart/Tooltip/Tooltip.svelte b/src/lib/ui/app/Chart/Tooltip/Tooltip.svelte
index 424422ff2..f0d876367 100644
--- a/src/lib/ui/app/Chart/Tooltip/Tooltip.svelte
+++ b/src/lib/ui/app/Chart/Tooltip/Tooltip.svelte
@@ -44,7 +44,7 @@
 
 {#if hoverPoint}
   {@const { datetime, seriesData } = hoverPoint}
-  <div class="pointer-events-none absolute left-1 top-2 z-10 rounded border text-sm">
+  <div class="pointer-events-none absolute left-1 top-2 z-10 rounded-sm border text-sm">
     <section class="bg-athens/90 p-1 px-2">
       {formatDate(datetime)}
     </section>
diff --git a/src/lib/ui/app/Chart/ViewportChart.svelte b/src/lib/ui/app/Chart/ViewportChart.svelte
index 0d78f5bc5..fadda5f1b 100644
--- a/src/lib/ui/app/Chart/ViewportChart.svelte
+++ b/src/lib/ui/app/Chart/ViewportChart.svelte
@@ -25,5 +25,5 @@
 {#if viewportPriorityCtx?.checkIsInViewport$()}
   <Chart bind:mode {...props}></Chart>
 {:else}
-  <div class={cn('relative z-[1] column [&>div]:!overflow-visible', props.class)}></div>
+  <div class={cn('relative z-1 column [&>div]:overflow-visible!', props.class)}></div>
 {/if}
diff --git a/src/lib/ui/app/ColorPicker/HexInput.svelte b/src/lib/ui/app/ColorPicker/HexInput.svelte
index 253a8af14..fdd90c56c 100644
--- a/src/lib/ui/app/ColorPicker/HexInput.svelte
+++ b/src/lib/ui/app/ColorPicker/HexInput.svelte
@@ -66,7 +66,7 @@
 </script>
 
 <Input
-  class={cn('mb-2', error && '!border-red')}
+  class={cn('mb-2', error && 'border-red!')}
   type="text"
   defaultValue={color}
   onblur={onBlur}
diff --git a/src/lib/ui/app/Footer/Bottom.svelte b/src/lib/ui/app/Footer/Bottom.svelte
index bfac00287..4b9f2cf1e 100644
--- a/src/lib/ui/app/Footer/Bottom.svelte
+++ b/src/lib/ui/app/Footer/Bottom.svelte
@@ -36,7 +36,7 @@
     </div>
 
     <div
-      class="ml-[72px] flex flex-wrap items-center gap-x-9 gap-y-1 md:ml-0 md:justify-end sm:justify-center xs:gap-4 hover:[&>a]:text-mirage hover:[&>a]:underline"
+      class="ml-[72px] flex flex-wrap items-center gap-x-9 gap-y-1 md:ml-0 md:justify-end sm:justify-center xs:gap-4 [&>a]:hover:text-mirage [&>a]:hover:underline"
     >
       <a href="https://santiment.net/terms/" target="_blank">Terms</a>
       <a href={`${SANBASE_ORIGIN}/privacy-policy/`} target="_blank">Privacy</a>
diff --git a/src/lib/ui/app/Footer/Footer.svelte b/src/lib/ui/app/Footer/Footer.svelte
index 47da7d921..1241d36c6 100644
--- a/src/lib/ui/app/Footer/Footer.svelte
+++ b/src/lib/ui/app/Footer/Footer.svelte
@@ -33,7 +33,7 @@
       </div>
 
       <div
-        class="grid grid-flow-col grid-rows-5 gap-x-[70px] gap-y-4 sm:my-10 sm:grid-rows-7 hover:[&>a]:text-mirage hover:[&>a]:underline"
+        class="grid grid-flow-col grid-rows-5 gap-x-[70px] gap-y-4 sm:my-10 sm:grid-rows-7 [&>a]:hover:text-mirage [&>a]:hover:underline"
       >
         {#each resourcesLinks as { href, title, onclick }}
           <a {href} {onclick} target="_blank">{title}</a>
diff --git a/src/lib/ui/app/Footer/HoldTokensBanner.svelte b/src/lib/ui/app/Footer/HoldTokensBanner.svelte
index 9379a3c00..41c46c58d 100644
--- a/src/lib/ui/app/Footer/HoldTokensBanner.svelte
+++ b/src/lib/ui/app/Footer/HoldTokensBanner.svelte
@@ -12,7 +12,7 @@
 
   <p class="max-w-[250px]">
     Discover all the benefits of holding SAN tokens <a
-      class="text-[var(--accent)] hover:text-[var(--accent)] hover:underline"
+      class="text-(--accent) hover:text-(--accent) hover:underline"
       href="https://academy.santiment.net/san-tokens/#how-to-buy-san-tokens">on Academy.</a
     >
   </p>
diff --git a/src/lib/ui/app/HelpFeedback/HelpFeedback.svelte b/src/lib/ui/app/HelpFeedback/HelpFeedback.svelte
index 8ae43c76f..715fec965 100644
--- a/src/lib/ui/app/HelpFeedback/HelpFeedback.svelte
+++ b/src/lib/ui/app/HelpFeedback/HelpFeedback.svelte
@@ -15,7 +15,7 @@
 <Button
   variant="fill"
   class={cn(
-    'z-[1] mb-2 h-auto px-1.5 py-3 [writing-mode:vertical-lr] [&>svg]:rotate-90',
+    'z-1 mb-2 h-auto px-1.5 py-3 [writing-mode:vertical-lr] [&>svg]:rotate-90',
     className,
   )}
   icon="chat"
diff --git a/src/lib/ui/app/InsightCard/InsightCard.svelte b/src/lib/ui/app/InsightCard/InsightCard.svelte
index ef8b52fad..f24f42239 100644
--- a/src/lib/ui/app/InsightCard/InsightCard.svelte
+++ b/src/lib/ui/app/InsightCard/InsightCard.svelte
@@ -30,7 +30,7 @@
   )
 </script>
 
-<article class="rounded border border-porcelain p-6">
+<article class="rounded-sm border border-porcelain p-6">
   <header>
     <a
       {href}
diff --git a/src/lib/ui/app/InsightCard/Tags.svelte b/src/lib/ui/app/InsightCard/Tags.svelte
index 5b40a7693..470075b24 100644
--- a/src/lib/ui/app/InsightCard/Tags.svelte
+++ b/src/lib/ui/app/InsightCard/Tags.svelte
@@ -8,7 +8,7 @@
   {#each items as { name }}
     <a
       href="{INSIGHTS_ORIGIN}/?tags={name}"
-      class="inline-flex items-center gap-1.5 rounded border border-porcelain px-1 py-2 text-xs hover:text-green"
+      class="inline-flex items-center gap-1.5 rounded-sm border border-porcelain px-1 py-2 text-xs hover:text-green"
     >
       {name}
     </a>
diff --git a/src/lib/ui/app/ListOfAssets/Tabs.svelte b/src/lib/ui/app/ListOfAssets/Tabs.svelte
index a5d0f06b4..b6aa72a92 100644
--- a/src/lib/ui/app/ListOfAssets/Tabs.svelte
+++ b/src/lib/ui/app/ListOfAssets/Tabs.svelte
@@ -41,7 +41,7 @@
     <Button
       variant="plain"
       class={cn(
-        '-mb-[1px] border-b-2 border-b-transparent px-0.5 pb-2.5 pt-3 hover:text-green',
+        '-mb-px border-b-2 border-b-transparent px-0.5 pb-2.5 pt-3 hover:text-green',
         selected === tab && 'border-b-green text-green',
       )}
       onclick={() => onSelect(tab)}
diff --git a/src/lib/ui/app/LoginForm/Section.svelte b/src/lib/ui/app/LoginForm/Section.svelte
index 9fc143b2b..a8926aef1 100644
--- a/src/lib/ui/app/LoginForm/Section.svelte
+++ b/src/lib/ui/app/LoginForm/Section.svelte
@@ -30,7 +30,7 @@
 
 <section
   class={cn(
-    'flex min-w-[408px] flex-col justify-center rounded px-14 py-10 text-center',
+    'flex min-w-[408px] flex-col justify-center rounded-sm px-14 py-10 text-center',
     'md:relative md:h-[85vh] md:min-w-0 md:flex-1 md:self-start md:p-6',
     className,
   )}
diff --git a/src/lib/ui/app/MiniChart/InteractiveArea.svelte b/src/lib/ui/app/MiniChart/InteractiveArea.svelte
index f04368539..8a2a84466 100644
--- a/src/lib/ui/app/MiniChart/InteractiveArea.svelte
+++ b/src/lib/ui/app/MiniChart/InteractiveArea.svelte
@@ -34,7 +34,7 @@
         <SvgTooltip {valueFormatted}>
           {#snippet value()}
             <div class="flex items-center gap-1">
-              <div class="h-4 w-0.5 rounded bg-[var(--line-color)]"></div>
+              <div class="h-4 w-0.5 rounded-sm bg-(--line-color)"></div>
               <span class="text-fiord">{valueFormatted}</span>
             </div>
           {/snippet}
diff --git a/src/lib/ui/app/MiniChart/MultiArea.svelte b/src/lib/ui/app/MiniChart/MultiArea.svelte
index 188ac0779..c1605f455 100644
--- a/src/lib/ui/app/MiniChart/MultiArea.svelte
+++ b/src/lib/ui/app/MiniChart/MultiArea.svelte
@@ -66,7 +66,7 @@
               {@const valueFormatted = formatter(currentValue)}
 
               <div style:--line-color="var(--{color})" class="flex items-center gap-1">
-                <div class="h-4 w-0.5 rounded bg-[var(--line-color)]"></div>
+                <div class="h-4 w-0.5 rounded-sm bg-(--line-color)"></div>
                 <span class="text-fiord">{valueFormatted}</span>
                 <span class="text-waterloo">{title}</span>
               </div>
diff --git a/src/lib/ui/app/MiniChart/index.svelte b/src/lib/ui/app/MiniChart/index.svelte
index d39c783d9..85ac0f54f 100644
--- a/src/lib/ui/app/MiniChart/index.svelte
+++ b/src/lib/ui/app/MiniChart/index.svelte
@@ -74,7 +74,7 @@
     {onmouseleave}
   >
     <g width={graphWidth} height={graphHeight} transform="translate({margin}, {margin})">
-      <polyline class="fill-none stroke-[var(--line-color)] stroke-2" points={linePoints} />
+      <polyline class="fill-none stroke-(--line-color) stroke-2" points={linePoints} />
       {@render children?.({ points, linePoints })}
     </g>
   </svg>
diff --git a/src/lib/ui/app/PaymentForm/PaymentScreen/OrderSummary/index.svelte b/src/lib/ui/app/PaymentForm/PaymentScreen/OrderSummary/index.svelte
index 52f367ed7..57412404d 100644
--- a/src/lib/ui/app/PaymentForm/PaymentScreen/OrderSummary/index.svelte
+++ b/src/lib/ui/app/PaymentForm/PaymentScreen/OrderSummary/index.svelte
@@ -78,7 +78,7 @@
 </script>
 
 <div
-  class="min-w-[400px] max-w-[480px] gap-4 self-start column md:mt-10 md:min-w-0 md:max-w-full md:gap-2 md:[&>*]:-mx-5 md:[&>*]:rounded-none"
+  class="min-w-[400px] max-w-[480px] gap-4 self-start column md:mt-10 md:min-w-0 md:max-w-full md:gap-2 md:*:-mx-5 md:*:rounded-none"
 >
   <section class="gap-8 rounded-lg bg-athens px-8 py-6 column">
     <h2 class="text-lg font-semibold text-rhino">
diff --git a/src/lib/ui/app/PaymentForm/PaymentScreen/PaymentMethodSelector/Card/index.svelte b/src/lib/ui/app/PaymentForm/PaymentScreen/PaymentMethodSelector/Card/index.svelte
index 3af1cd770..b28902439 100644
--- a/src/lib/ui/app/PaymentForm/PaymentScreen/PaymentMethodSelector/Card/index.svelte
+++ b/src/lib/ui/app/PaymentForm/PaymentScreen/PaymentMethodSelector/Card/index.svelte
@@ -140,7 +140,7 @@
   </LabelInput>
 
   <div id="address-element" class="min-h-[210px]">
-    <div class="gap-4 column">
+    <div class="column gap-4">
       <LabelInput label="Full name" placeholder="First and last name"></LabelInput>
       <LabelInput label="Country or region" placeholder="Country or region"></LabelInput>
       <LabelInput label="Address" placeholder="Street address"></LabelInput>
@@ -149,6 +149,8 @@
 </div>
 
 <style lang="postcss">
+  @reference '#app.css';
+
   :global {
     .StripeElement--focus {
       @apply border-green;
diff --git a/src/lib/ui/app/Product/Product.svelte b/src/lib/ui/app/Product/Product.svelte
index 29d294b39..f624e65b5 100644
--- a/src/lib/ui/app/Product/Product.svelte
+++ b/src/lib/ui/app/Product/Product.svelte
@@ -12,7 +12,7 @@
 
 <a href="/" class={cn('relative flex items-center text-base font-medium text-black', className)}>
   {#if isXmas}
-    <Svg illus id="christmas/xmas-hat" w={33} h={18} class="absolute -top-[7px] left-[9px]" />
+    <Svg illus id="christmas/xmas-hat" w={33} h={18} class="absolute top-[-7px] left-[9px]" />
   {/if}
 
   <img class="mr-2 size-8" src={sanLogo} alt="SAN" />
diff --git a/src/lib/ui/app/Products/ProductCard.svelte b/src/lib/ui/app/Products/ProductCard.svelte
index f46b0ac95..526c457a9 100644
--- a/src/lib/ui/app/Products/ProductCard.svelte
+++ b/src/lib/ui/app/Products/ProductCard.svelte
@@ -38,8 +38,8 @@
   class={cn(
     'pointer group relative flex',
     isCompact
-      ? 'bg-orage-light-1 mb-3 inline-block w-[260px] rounded text-orange last:m-0'
-      : 'w-[292px] rounded px-4 py-3 hover:bg-athens',
+      ? 'bg-orage-light-1 mb-3 inline-block w-[260px] rounded-sm text-orange last:m-0'
+      : 'w-[292px] rounded-sm px-4 py-3 hover:bg-athens',
   )}
   target="_blank"
   data-type={`open_${id}`}
@@ -48,10 +48,10 @@
   {#if isLarge}
     <div
       class={cn(
-        'mr-3 flex h-10 w-10 min-w-10 rounded center group-hover:bg-white',
+        'mr-3 flex h-10 w-10 min-w-10 rounded-sm center group-hover:bg-white',
         active
           ? [
-              'bg-[var(--accent-light-1)]',
+              'bg-(--accent-light-1)',
               '[--product-color-1:var(--accent)]',
               '[--product-color-2:var(--accent-light-3)]',
               '[--product-color-3:var(--accent)',
@@ -76,7 +76,7 @@
       id="pointer"
       w="14"
       h="9"
-      class="absolute right-0 top-[9px] hidden group-hover:block group-hover:fill-[var(--accent-hover)]"
+      class="absolute right-0 top-[9px] hidden group-hover:block group-hover:fill-(--accent-hover)"
     />
   {/if}
 
@@ -84,7 +84,7 @@
     <h2
       class={cn(
         'text-base font-semibold text-black',
-        isCompact && 'group-hover:text-[var(--accent-hover)]',
+        isCompact && 'group-hover:text-(--accent-hover)',
       )}
     >
       {title}
@@ -93,7 +93,7 @@
     <p class="text-waterloo">{desc}</p>
 
     {#if note}
-      <span class="mt-1 inline-block rounded bg-orange-light-1 px-2 py-1 text-xs text-orange">
+      <span class="mt-1 inline-block rounded-sm bg-orange-light-1 px-2 py-1 text-xs text-orange">
         {note}
       </span>
     {/if}
diff --git a/src/lib/ui/app/Products/Products.svelte b/src/lib/ui/app/Products/Products.svelte
index e413c7c23..3117c2642 100644
--- a/src/lib/ui/app/Products/Products.svelte
+++ b/src/lib/ui/app/Products/Products.svelte
@@ -58,7 +58,7 @@
   {#if isColumn}
     <section class="max-w-[260px] border-t border-porcelain pt-6 text-base text-waterloo">
       To learn more about Santiment's products, team, or available jobs, visit
-      <a class="hover:text-[var(--accent-hover)]" target="_blank" href="https://santiment.net/"
+      <a class="hover:text-(--accent-hover)" target="_blank" href="https://santiment.net/"
         >santiment.net</a
       >
     </section>
diff --git a/src/lib/ui/app/ScreenTransition/ScreenTransition.svelte b/src/lib/ui/app/ScreenTransition/ScreenTransition.svelte
index 0a4061929..6dad642f3 100644
--- a/src/lib/ui/app/ScreenTransition/ScreenTransition.svelte
+++ b/src/lib/ui/app/ScreenTransition/ScreenTransition.svelte
@@ -138,7 +138,7 @@
 </script>
 
 {#key screen.index$}
-  <div out:out in:flyIn class="max-h-full min-h-0 flex-grow column" {style}>
+  <div out:out in:flyIn class="max-h-full min-h-0 grow column" {style}>
     <OnlyOnDevice tablet phone>
       {#if backScreen}
         <div class="sticky top-0 flex items-center bg-white px-2 py-3">
diff --git a/src/lib/ui/app/SubscriptionPlan/BreakdownTable/Table.svelte b/src/lib/ui/app/SubscriptionPlan/BreakdownTable/Table.svelte
index 37616e85a..8b7406706 100644
--- a/src/lib/ui/app/SubscriptionPlan/BreakdownTable/Table.svelte
+++ b/src/lib/ui/app/SubscriptionPlan/BreakdownTable/Table.svelte
@@ -21,14 +21,14 @@
 </script>
 
 <div class="table w-full text-base">
-  <header class="sticky top-[var(--plans-sticky-top,0)] z-10 flex w-full border-b">
+  <header class="sticky top-(--plans-sticky-top,0) z-10 flex w-full border-b">
     {@render children()}
   </header>
 
   {#each breakdown as { category, features, link } (category)}
     <section
       class={cn(
-        'category-section pt-10 sm:border-none sm:pt-0 [&:not(:last-child)]:border-b [&>.tr:last-child>*]:sm:!pb-10',
+        'category-section pt-10 not-last:border-b sm:border-none sm:pt-0 sm:[&>.tr:last-child>*]:pb-10!',
         features.length === 0 && 'border-none',
       )}
     >
@@ -39,7 +39,7 @@
           icon="pointer"
           href={url}
           target="_blank"
-          class={cn('flex !fill-green text-base font-normal text-green', className)}
+          class={cn('flex fill-green! text-base font-normal text-green', className)}
           data-type={title}
           data-source="{source}_plans_breakdown"
         >
@@ -48,7 +48,7 @@
       {/snippet}
 
       <h4
-        class="td-h min-w-full items-center !pt-0 text-lg font-semibold sm:bg-athens sm:!py-[13px]"
+        class="td-h min-w-full items-center pt-0! text-lg font-semibold sm:bg-athens sm:py-[13px]!"
       >
         {category}
 
@@ -58,7 +58,7 @@
       </h4>
 
       {#if link && link.url}
-        <div class="tr !hidden sm:!flex">
+        <div class="tr hidden! sm:flex!">
           {@render pointerSnippet(link, 'td-h')}
 
           {#each plans as _}
@@ -77,24 +77,28 @@
 </div>
 
 <style lang="postcss">
-  .table :global {
-    .tr {
-      @apply flex w-full divide-x text-center sm:divide-x-0;
-    }
+  @reference '#app.css';
 
-    .td,
-    .td-h {
-      fill: var(--accent);
+  .table :global(.tr) {
+    @apply flex w-full text-center;
+  }
+
+  .table :global(.tr > :not(:last-child)) {
+    @apply border-r sm:border-r-0;
+  }
 
-      @apply flex items-center px-6 py-4 sm:px-5;
-    }
+  .table :global(.td),
+  .table :global(.td-h) {
+    fill: var(--accent);
 
-    .td {
-      @apply flex-1;
-    }
+    @apply flex items-center px-6 py-4 sm:px-5;
+  }
+
+  .table :global(.td) {
+    @apply flex-1;
+  }
 
-    .td-h {
-      @apply max-w-80 flex-1 text-start sm:w-60 sm:border-r;
-    }
+  .table :global(.td-h) {
+    @apply max-w-80 flex-1 text-start sm:w-60 sm:border-r;
   }
 </style>
diff --git a/src/lib/ui/app/SubscriptionPlan/BreakdownTable/index.svelte b/src/lib/ui/app/SubscriptionPlan/BreakdownTable/index.svelte
index 343d9fba4..c13230bd1 100644
--- a/src/lib/ui/app/SubscriptionPlan/BreakdownTable/index.svelte
+++ b/src/lib/ui/app/SubscriptionPlan/BreakdownTable/index.svelte
@@ -65,7 +65,7 @@
   <h2 class="mb-16 text-center text-3xl font-medium sm:hidden">Detailed breakdown of plans</h2>
 
   <section
-    class="flex overflow-clip rounded border sm:rounded-none sm:border-x-0"
+    class="flex overflow-clip rounded-sm border sm:rounded-none sm:border-x-0"
     class:business={!isConsumerPlans}
   >
     <Table
diff --git a/src/lib/ui/app/SubscriptionPlan/PlanButton.svelte b/src/lib/ui/app/SubscriptionPlan/PlanButton.svelte
index 7cf8288d9..5d09faca4 100644
--- a/src/lib/ui/app/SubscriptionPlan/PlanButton.svelte
+++ b/src/lib/ui/app/SubscriptionPlan/PlanButton.svelte
@@ -87,7 +87,7 @@
       Sign up
     </Button>
   {:else}
-    <Button variant="fill" size="lg" disabled class={cn('!text-fiord center', className)}>
+    <Button variant="fill" size="lg" disabled class={cn('text-fiord! center', className)}>
       Your current plan
     </Button>
   {/if}
diff --git a/src/lib/ui/app/SubscriptionPlan/PricingSection.svelte b/src/lib/ui/app/SubscriptionPlan/PricingSection.svelte
index 24c9e75cd..c8576ac0a 100644
--- a/src/lib/ui/app/SubscriptionPlan/PricingSection.svelte
+++ b/src/lib/ui/app/SubscriptionPlan/PricingSection.svelte
@@ -73,7 +73,7 @@
       <Button
         class={cn(
           'h-[38px] px-4 py-[8px] hover:bg-athens sm:py-3.5',
-          isActive && cn('z-10 rounded-md text-rhino outline outline-1', info.className),
+          isActive && cn('z-10 rounded-md text-rhino outline-solid outline-1', info.className),
         )}
         onclick={() => handlePlanClick(item)}
       >
diff --git a/src/lib/ui/app/ThemeSwitch/ThemeSwitch.svelte b/src/lib/ui/app/ThemeSwitch/ThemeSwitch.svelte
index 2ee3c88c5..7733213cb 100644
--- a/src/lib/ui/app/ThemeSwitch/ThemeSwitch.svelte
+++ b/src/lib/ui/app/ThemeSwitch/ThemeSwitch.svelte
@@ -55,7 +55,7 @@
 
   <Switch.Thumb
     style="opacity: {opacity.current};transition-duration: {ANIMATION_DURATION}ms"
-    class={cn('transition-transform', checked && '-translate-x-[36px]')}
+    class={cn('transition-transform', checked && 'translate-x-[-36px]')}
   >
     <Svg id={internalNightMode ? 'moon' : 'sun'} illus w="20" />
   </Switch.Thumb>
diff --git a/src/lib/ui/app/classic/MobileHeader/MobileHeader.svelte b/src/lib/ui/app/classic/MobileHeader/MobileHeader.svelte
index f937a4f64..df4f86ac5 100644
--- a/src/lib/ui/app/classic/MobileHeader/MobileHeader.svelte
+++ b/src/lib/ui/app/classic/MobileHeader/MobileHeader.svelte
@@ -20,7 +20,7 @@
 </script>
 
 <header
-  class="sticky left-0 top-0 z-[98] flex w-full items-center justify-between border-b border-b-athens bg-white px-4 py-5"
+  class="sticky left-0 top-0 z-98 flex w-full items-center justify-between border-b border-b-athens bg-white px-4 py-5"
   id="mobile-header"
 >
   <section class="min-w-0 items-center row">
diff --git a/src/lib/ui/core/Button/Button.svelte b/src/lib/ui/core/Button/Button.svelte
index d228f3428..96f4ab8cb 100644
--- a/src/lib/ui/core/Button/Button.svelte
+++ b/src/lib/ui/core/Button/Button.svelte
@@ -75,8 +75,8 @@
       accent: { green: '', blue: '', orange: '', custom: '' },
       variant: {
         fill: 'px-5 fill-white-day text-white-day',
-        border: 'border bg-transparent px-2.5 fill-waterloo hover:bg-[var(--ghost-active-bg)]',
-        ghost: 'px-2.5 fill-waterloo hover:bg-[var(--ghost-active-bg)]',
+        border: 'border bg-transparent px-2.5 fill-waterloo hover:bg-(--ghost-active-bg)',
+        ghost: 'px-2.5 fill-waterloo hover:bg-(--ghost-active-bg)',
         title: 'rounded-none hover:underline',
         link: 'rounded-none inline-flex text-green fill-green hover:underline select-text',
         plain: 'rounded-none',
@@ -115,13 +115,13 @@
       {
         variant: 'fill',
         accent: 'custom',
-        class: 'bg-[var(--accent,var(--green))] hover:bg-[var(--accent-hover,var(--green-hover))]',
+        class: 'bg-(--accent,var(--green)) hover:bg-(--accent-hover,var(--green-hover))',
       },
       {
         variant: ['fill', 'border'],
         disabled: true,
         class:
-          'text-mystic fill-mystic bg-[var(--ghost-active-bg)] hover:bg-[var(--ghost-active-bg)]',
+          'text-mystic fill-mystic bg-(--ghost-active-bg) hover:bg-(--ghost-active-bg)',
       },
       {
         variant: 'ghost',
@@ -232,8 +232,8 @@
     <div class="ml-auto pl-0.5">
       <div
         class={cn(
-          'flex size-4 items-center justify-center rounded transition-colors',
-          !loading && 'group-data-[state="open"]/button:bg-[var(--ghost-active-bg)]',
+          'flex size-4 items-center justify-center rounded-sm transition-colors',
+          !loading && 'group-data-[state="open"]/button:bg-(--ghost-active-bg)',
         )}
       >
         <Svg
diff --git a/src/lib/ui/core/Calendar/Calendar.svelte b/src/lib/ui/core/Calendar/Calendar.svelte
index 3a9b2d5ee..fed9b4375 100644
--- a/src/lib/ui/core/Calendar/Calendar.svelte
+++ b/src/lib/ui/core/Calendar/Calendar.svelte
@@ -37,7 +37,7 @@
 <Calendar.Root
   --active-ghost-button-bg={ui.$$.isNightMode ? 'var(--porcelain)' : undefined}
   type="single"
-  class={cn('max-w-max rounded border bg-white sm:border-0 dark:bg-athens', className)}
+  class={cn('max-w-max rounded-sm border bg-white sm:border-0 dark:bg-athens', className)}
   weekdayFormat="short"
   fixedWeeks
   {value}
diff --git a/src/lib/ui/core/Calendar/CalendarBody.svelte b/src/lib/ui/core/Calendar/CalendarBody.svelte
index feb2c004a..a2fcbe3b8 100644
--- a/src/lib/ui/core/Calendar/CalendarBody.svelte
+++ b/src/lib/ui/core/Calendar/CalendarBody.svelte
@@ -18,15 +18,15 @@
 </script>
 
 <div
-  class="month flex space-x-4 space-y-0 px-3 pb-3 pt-4 sm:px-5 sm:pb-0 sm:pt-6 sm:text-base xs:flex-col xs:space-y-4"
+  class="month flex space-y-0 space-x-4 px-3 pt-4 pb-3 sm:px-5 sm:pt-6 sm:pb-0 sm:text-base xs:flex-col xs:space-y-4"
 >
   {#each months as month}
-    <Base.Grid class="w-full border-collapse select-none space-y-1">
+    <Base.Grid class="w-full border-collapse space-y-1 select-none">
       <Base.GridHead>
         <Base.GridRow class="mb-1 flex justify-between">
           {#each weekdays as day}
             <Base.HeadCell
-              class="w-8 rounded-md text-xs font-normal uppercase text-waterloo sm:text-sm"
+              class="w-8 rounded-md text-xs font-normal text-waterloo uppercase sm:text-sm"
             >
               {day.slice(0, 2)}
             </Base.HeadCell>
@@ -44,14 +44,14 @@
               >
                 <Base.Day
                   class={cn(
-                    'relative inline-flex size-full items-center justify-center whitespace-nowrap rounded',
+                    'relative inline-flex size-full items-center justify-center rounded-sm whitespace-nowrap',
                     'hover:bg-athens hover:text-green dark:hover:bg-porcelain',
-                    'data-[unavailable]:text-mystic data-[unavailable]:line-through',
-                    'data-[disabled]:pointer-events-none data-[disabled]:text-mystic',
-                    'data-[outside-month]:pointer-events-none',
-                    'data-[highlighted]:rounded-none data-[highlighted]:bg-green-light-1',
+                    'data-unavailable:text-mystic data-unavailable:line-through',
+                    'data-disabled:pointer-events-none data-disabled:text-mystic',
+                    'data-outside-month:pointer-events-none',
+                    'data-highlighted:rounded-none data-highlighted:bg-green-light-1',
                     range &&
-                      'data-[selected]:[&:not([data-selection-start])]:[&:not([data-selection-end])]:rounded-none',
+                      'data-selected:[&:not([data-selection-start])]:[&:not([data-selection-end])]:rounded-none',
                   )}
                 />
               </Base.Cell>
@@ -64,6 +64,8 @@
 </div>
 
 <style lang="postcss">
+  @reference '#app.css';
+
   .month {
     & :global([data-today]:not([data-highlighted]):not([data-selected]):not(:hover)) {
       @apply text-blue;
@@ -74,11 +76,11 @@
     }
 
     & :global([data-selection-start]) {
-      @apply rounded-e-none rounded-s;
+      @apply rounded-s rounded-e-none;
     }
 
     & :global([data-selection-end]) {
-      @apply rounded-e rounded-s-none;
+      @apply rounded-s-none rounded-e;
     }
   }
 </style>
diff --git a/src/lib/ui/core/Calendar/RangeCalendar.svelte b/src/lib/ui/core/Calendar/RangeCalendar.svelte
index 537aad717..85a89bd32 100644
--- a/src/lib/ui/core/Calendar/RangeCalendar.svelte
+++ b/src/lib/ui/core/Calendar/RangeCalendar.svelte
@@ -55,7 +55,7 @@
 
 <RangeCalendar.Root
   --active-ghost-button-bg={ui.$$.isNightMode ? 'var(--porcelain)' : undefined}
-  class={cn('h-full max-w-max rounded border bg-white dark:bg-athens', className)}
+  class={cn('h-full max-w-max rounded-sm border bg-white dark:bg-athens', className)}
   weekdayFormat="short"
   fixedWeeks
   {value}
diff --git a/src/lib/ui/core/Checkbox/Checkbox.svelte b/src/lib/ui/core/Checkbox/Checkbox.svelte
index 919c93f0b..c73fab5a2 100644
--- a/src/lib/ui/core/Checkbox/Checkbox.svelte
+++ b/src/lib/ui/core/Checkbox/Checkbox.svelte
@@ -35,8 +35,8 @@
   bind:checked={isActive}
   bind:indeterminate
   class={cn(
-    'flex size-4 min-w-4 items-center justify-center rounded border border-mystic bg-[inherit] fill-athens-day transition-colors',
-    'hover:border-casper hover:bg-athens group-hover/label:border-casper group-hover/label:bg-[inherit]',
+    'flex size-4 min-w-4 items-center justify-center rounded-sm border border-mystic bg-inherit fill-athens-day transition-colors',
+    'hover:border-casper hover:bg-athens group-hover/label:border-casper group-hover/label:bg-inherit',
     error && 'relative border-red hover:border-red-hover group-hover/label:border-red-hover',
     selected &&
       'border-green bg-green bg-center bg-no-repeat hover:border-green-hover hover:bg-green-hover group-hover/label:border-green-hover group-hover/label:bg-green-hover',
diff --git a/src/lib/ui/core/CookiesPopup/CookiesPopup.svelte b/src/lib/ui/core/CookiesPopup/CookiesPopup.svelte
index abc7aad0b..c1adbe0e1 100644
--- a/src/lib/ui/core/CookiesPopup/CookiesPopup.svelte
+++ b/src/lib/ui/core/CookiesPopup/CookiesPopup.svelte
@@ -61,7 +61,7 @@
 {#if isVisible}
   <div
     class={cn(
-      'fixed bottom-5 left-5 right-0 z-[101] max-w-[450px] pb-5 pl-[110px] pr-[43px] pt-5',
+      'fixed bottom-5 left-5 right-0 z-101 max-w-[450px] pb-5 pl-[110px] pr-[43px] pt-5',
       'rounded-lg border bg-white shadow-modal dark:bg-athens',
       'md:bottom-0 md:left-0 md:max-w-full md:rounded-b-none md:rounded-t-[10px] md:px-5 md:py-6 md:text-center md:text-base',
       className,
diff --git a/src/lib/ui/core/Dialog/Responsive/DesktopDialog.svelte b/src/lib/ui/core/Dialog/Responsive/DesktopDialog.svelte
index c470180af..fbec43ee9 100644
--- a/src/lib/ui/core/Dialog/Responsive/DesktopDialog.svelte
+++ b/src/lib/ui/core/Dialog/Responsive/DesktopDialog.svelte
@@ -37,7 +37,7 @@
 </script>
 
 {#if $open}
-  <div class="relative z-[10000]" {...$portalled} use:portalled>
+  <div class="relative z-10000" {...$portalled} use:portalled>
     <div
       {...$overlay}
       use:overlay
@@ -54,7 +54,7 @@
     ></div>
     <div
       class={cn(
-        'animated dialog-animation fixed left-1/2 top-1/2 z-50 max-h-[92vh] max-w-[92vw] origin-center translate-x-[round(-50%,1px)] translate-y-[round(-50%,1px)] overflow-hidden rounded bg-white shadow-lg dark:shadow-none',
+        'animated dialog-animation fixed left-1/2 top-1/2 z-50 max-h-[92vh] max-w-[92vw] origin-center translate-x-[round(-50%,1px)] translate-y-[round(-50%,1px)] overflow-hidden rounded-sm bg-white shadow-lg dark:shadow-none',
         className,
       )}
       {...$content}
diff --git a/src/lib/ui/core/Dialog/Responsive/MobileDialog.svelte b/src/lib/ui/core/Dialog/Responsive/MobileDialog.svelte
index 9287fe38b..101c277f4 100644
--- a/src/lib/ui/core/Dialog/Responsive/MobileDialog.svelte
+++ b/src/lib/ui/core/Dialog/Responsive/MobileDialog.svelte
@@ -47,11 +47,11 @@
 </script>
 
 {#if $open}
-  <div class="relative z-[10000]" {...$portalled} use:portalled in:inTransition out:outTransition>
+  <div class="relative z-10000" {...$portalled} use:portalled in:inTransition out:outTransition>
     <div
       {...$overlay}
       use:overlay
-      class={cn('fixed inset-0 z-[10000] bg-shark/60 dark:bg-[#00000067]', overlayClass)}
+      class={cn('fixed inset-0 z-10000 bg-shark/60 dark:bg-[#00000067]', overlayClass)}
       onclick={() => Controller.close()}
     ></div>
 
@@ -59,14 +59,14 @@
       {...$content}
       use:content
       class={cn(
-        'fixed bottom-0 left-0 right-0 z-[10001] mt-24 h-full max-h-[96%] rounded-t-[10px] bg-white column',
+        'fixed bottom-0 left-0 right-0 z-10001 mt-24 h-full max-h-[96%] rounded-t-[10px] bg-white column',
 
         className,
       )}
     >
-      <div use:dragOverlay class="z-[100]">
+      <div use:dragOverlay class="z-100">
         <span
-          class="handle fixed left-1/2 top-[6px] z-[100] mx-auto flex h-1.5 w-12 flex-shrink-0 -translate-x-1/2 rounded-full bg-mystic center dark:bg-casper"
+          class="handle fixed left-1/2 top-[6px] z-100 mx-auto flex h-1.5 w-12 shrink-0 -translate-x-1/2 rounded-full bg-mystic center dark:bg-casper"
         ></span>
       </div>
 
diff --git a/src/lib/ui/core/Dialog/Responsive/MobileLandscapeModal.svelte b/src/lib/ui/core/Dialog/Responsive/MobileLandscapeModal.svelte
index 5a3f892d9..8de3904a4 100644
--- a/src/lib/ui/core/Dialog/Responsive/MobileLandscapeModal.svelte
+++ b/src/lib/ui/core/Dialog/Responsive/MobileLandscapeModal.svelte
@@ -45,7 +45,7 @@
 </script>
 
 {#if $open}
-  <div class="relative z-[10000]" {...$portalled} use:portalled>
+  <div class="relative z-10000" {...$portalled} use:portalled>
     <div
       class={cn(
         'fixed inset-0 z-50 overflow-hidden bg-white',
diff --git a/src/lib/ui/core/Dropdown/Item.svelte b/src/lib/ui/core/Dropdown/Item.svelte
index dc25a59a0..7cc745e92 100644
--- a/src/lib/ui/core/Dropdown/Item.svelte
+++ b/src/lib/ui/core/Dropdown/Item.svelte
@@ -64,7 +64,7 @@
   {#if icon}
     <Svg
       --margin={`${iconMargin}px`}
-      class="mx-[var(--margin)] text-white-day"
+      class="mx-(--margin) text-white-day"
       id={isSelected ? 'checkmark-circle-filled' : icon}
       w={iconSize}
     />
diff --git a/src/lib/ui/core/ExplanationTooltip/CursorFollowing.svelte b/src/lib/ui/core/ExplanationTooltip/CursorFollowing.svelte
index 959194d81..39a2ab12b 100644
--- a/src/lib/ui/core/ExplanationTooltip/CursorFollowing.svelte
+++ b/src/lib/ui/core/ExplanationTooltip/CursorFollowing.svelte
@@ -117,7 +117,7 @@
     class={cn('pointer-events-none fixed left-0 top-0 z-10 will-change-transform')}
     style:transform="translate3d({Math.round(x)}px, {Math.round(y)}px, 0)"
   >
-    <article class={cn('rounded bg-fiord-day px-3 py-1.5 text-xs text-white-day', className)}>
+    <article class={cn('rounded-sm bg-fiord-day px-3 py-1.5 text-xs text-white-day', className)}>
       {explanation}
     </article>
   </div>
diff --git a/src/lib/ui/core/ExplanationTooltip/Static.svelte b/src/lib/ui/core/ExplanationTooltip/Static.svelte
index 841712e76..192b26688 100644
--- a/src/lib/ui/core/ExplanationTooltip/Static.svelte
+++ b/src/lib/ui/core/ExplanationTooltip/Static.svelte
@@ -17,7 +17,7 @@
 {#if explanation}
   <Tooltip position="top" children={trigger} noStyles disableHoverableContent {...rest}>
     {#snippet content()}
-      <article class={cn('rounded bg-fiord-day px-3 py-1.5 text-xs text-white-day', contentClass)}>
+      <article class={cn('rounded-sm bg-fiord-day px-3 py-1.5 text-xs text-white-day', contentClass)}>
         {explanation}
       </article>
     {/snippet}
diff --git a/src/lib/ui/core/ImageViewer/Controls.svelte b/src/lib/ui/core/ImageViewer/Controls.svelte
index 295e2f5fe..7e2e95e97 100644
--- a/src/lib/ui/core/ImageViewer/Controls.svelte
+++ b/src/lib/ui/core/ImageViewer/Controls.svelte
@@ -18,13 +18,13 @@
 <!-- svelte-ignore a11y_click_events_have_key_events -->
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
-  class="fixed bottom-4 left-1/2 z-[100001] -translate-x-1/2"
+  class="fixed bottom-4 left-1/2 z-100001 -translate-x-1/2"
   onclick={(e) => e.stopPropagation()}
 >
   <div
-    class="flex gap-2 duration-200 animate-in fade-in slide-in-from-bottom-2 hover:[&_button:not(:disabled)]:fill-white [&_button]:fill-mystic"
+    class="flex gap-2 duration-200 animate-in fade-in slide-in-from-bottom-2 [&_button:not(:disabled)]:hover:fill-white [&_button]:fill-mystic"
   >
-    <div class="flex items-center justify-between rounded bg-rhino text-mystic">
+    <div class="flex items-center justify-between rounded-sm bg-rhino text-mystic">
       <Button
         class="size-8 center disabled:fill-waterloo"
         icon="minus"
@@ -47,7 +47,7 @@
     </div>
 
     <Button
-      class="size-8 rounded bg-rhino center"
+      class="size-8 rounded-sm bg-rhino center"
       icon="download"
       variant="plain"
       onclick={() => downloadFile(src, alt ?? 'download')}
@@ -55,7 +55,7 @@
     />
 
     <Button
-      class="size-8 rounded bg-rhino center"
+      class="size-8 rounded-sm bg-rhino center"
       icon="shrink"
       variant="plain"
       onclick={onclose}
diff --git a/src/lib/ui/core/ImageViewer/PswpViewer.svelte b/src/lib/ui/core/ImageViewer/PswpViewer.svelte
index 624d813ac..0be34a6c8 100644
--- a/src/lib/ui/core/ImageViewer/PswpViewer.svelte
+++ b/src/lib/ui/core/ImageViewer/PswpViewer.svelte
@@ -76,8 +76,10 @@
   />
 {/if}
 
-<style>
+<style lang="postcss">
+  @reference '#app.css';
+
   :global(.pswp) {
-    --pswp-bg: theme('colors.shark.DEFAULT');
+    --pswp-bg: var(--color-shark);
   }
 </style>
diff --git a/src/lib/ui/core/Input/UniversalInput.svelte b/src/lib/ui/core/Input/UniversalInput.svelte
index b96fd793e..32f0b9490 100644
--- a/src/lib/ui/core/Input/UniversalInput.svelte
+++ b/src/lib/ui/core/Input/UniversalInput.svelte
@@ -79,7 +79,7 @@
     {type}
     {placeholder}
     class={cn(
-      'w-full rounded-md bg-transparent py-[5px] pl-2.5 pr-3 outline-none placeholder:text-waterloo',
+      'w-full rounded-md bg-transparent py-[5px] pl-2.5 pr-3 outline-hidden placeholder:text-waterloo',
       '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
       icon && 'pl-8',
       inputClass,
@@ -91,7 +91,7 @@
 
     <section
       class={cn(
-        'absolute right-[9px] flex h-full flex-col justify-center gap-[3px] bg-[inherit]',
+        'absolute right-[9px] flex h-full flex-col justify-center gap-[3px] bg-inherit',
         'opacity-0 transition-opacity hover:fill-waterloo group-hover:opacity-100',
       )}
     >
@@ -119,7 +119,7 @@
     class={cn(
       'w-2.5 justify-center transition-[transform,fill]',
       'hover:scale-150 hover:fill-black',
-      'group-focus-within:fill-waterloo group-focus-within:hover:fill-black',
+      'group-focus-within:fill-waterloo hover:group-focus-within:fill-black',
       className,
     )}
   />
diff --git a/src/lib/ui/core/InputCalendar/InputCalendar.svelte b/src/lib/ui/core/InputCalendar/InputCalendar.svelte
index c7f9bd8c3..fe03ca683 100644
--- a/src/lib/ui/core/InputCalendar/InputCalendar.svelte
+++ b/src/lib/ui/core/InputCalendar/InputCalendar.svelte
@@ -47,7 +47,7 @@
 >
   <!-- prettier-ignore-end -->
   <input
-    class={cn("cursor-pointer select-none bg-transparent outline-none", inputClass)}
+    class={cn("cursor-pointer select-none bg-transparent outline-hidden", inputClass)}
     bind:this={inputNode.$}
     type="text"
     value={formatValue(date)}
diff --git a/src/lib/ui/core/Notifications/Notification.svelte b/src/lib/ui/core/Notifications/Notification.svelte
index 35f186abf..dcd1a5f9e 100644
--- a/src/lib/ui/core/Notifications/Notification.svelte
+++ b/src/lib/ui/core/Notifications/Notification.svelte
@@ -85,7 +85,7 @@
     aria-label="Close notification"
     icon="close"
     iconSize={10}
-    class="-ml-2 -mt-2.5 flex size-5 rounded !fill-waterloo center hover:bg-porcelain xs:size-8"
+    class="-ml-2 -mt-2.5 flex size-5 rounded-sm fill-waterloo! center hover:bg-porcelain xs:size-8"
     onclick={close}
   />
 </section>
diff --git a/src/lib/ui/core/Popover/Popover.svelte b/src/lib/ui/core/Popover/Popover.svelte
index b1251f056..ae1a55978 100644
--- a/src/lib/ui/core/Popover/Popover.svelte
+++ b/src/lib/ui/core/Popover/Popover.svelte
@@ -63,8 +63,8 @@
       class={cn(
         'popover-content-ui',
         !noStyles &&
-          'z-10 flex rounded border bg-white p-2 shadow-dropdown dark:bg-athens dark:shadow-none',
-        matchTriggerWidth && 'w-[--bits-floating-anchor-width]',
+          'z-10 flex rounded-sm border bg-white p-2 shadow-dropdown dark:bg-athens dark:shadow-none',
+        matchTriggerWidth && 'w-(--bits-floating-anchor-width)',
         className,
       )}
     >
diff --git a/src/lib/ui/core/Select/Select.svelte b/src/lib/ui/core/Select/Select.svelte
index 1b873dbda..74cf7eb07 100644
--- a/src/lib/ui/core/Select/Select.svelte
+++ b/src/lib/ui/core/Select/Select.svelte
@@ -38,7 +38,7 @@
     selected = $bindable(),
     side = 'bottom',
     align = 'center',
-    zIndexClass = 'z-[100]',
+    zIndexClass = 'z-100',
     matchTriggerWidth,
     beforeOptionChildren,
 
@@ -92,9 +92,9 @@
   <Select.Content
     {customAnchor}
     class={cn(
-      'overflow-auto rounded border bg-white p-2 shadow-dropdown dark:bg-athens dark:shadow-none',
+      'overflow-auto rounded-sm border bg-white p-2 shadow-dropdown dark:bg-athens dark:shadow-none',
       zIndexClass,
-      matchTriggerWidth && 'w-[--bits-floating-anchor-width]',
+      matchTriggerWidth && 'w-(--bits-floating-anchor-width)',
     )}
     sideOffset={8}
     collisionPadding={8}
@@ -119,7 +119,7 @@
                 label={item.label}
                 onclick={() => onItemSelect(item)}
                 class={cn(
-                  'z-50 cursor-pointer rounded px-3 py-2 text-black hover:bg-athens dark:hover:bg-porcelain [&[data-selected]]:text-green',
+                  'z-50 cursor-pointer rounded-sm px-3 py-2 text-black hover:bg-athens dark:hover:bg-porcelain data-selected:text-green',
                   contentClass,
                 )}
               >
diff --git a/src/lib/ui/core/Share/ShareDialog.svelte b/src/lib/ui/core/Share/ShareDialog.svelte
index 5f6f87862..7780de9c9 100644
--- a/src/lib/ui/core/Share/ShareDialog.svelte
+++ b/src/lib/ui/core/Share/ShareDialog.svelte
@@ -98,7 +98,7 @@
   <div class="w-[600px] px-6 py-5 md:w-full md:px-5 md:py-6 sm:w-auto">
     {#if disabled}
       <div
-        class="mb-4 rounded bg-orange-light-1 px-4 py-3 font-medium text-rhino md:flex md:gap-2 md:fill-orange-hover md:px-3 md:py-2"
+        class="mb-4 rounded-sm bg-orange-light-1 px-4 py-3 font-medium text-rhino md:flex md:gap-2 md:fill-orange-hover md:px-3 md:py-2"
       >
         {#if !isDesktop}
           <Svg id="warning" w="16" h="20" class="py-[3px]" />
@@ -111,7 +111,7 @@
     {#if isDesktop}
       <div
         class={cn(
-          'link mb-6 flex h-10 items-center overflow-hidden rounded border',
+          'link mb-6 flex h-10 items-center overflow-hidden rounded-sm border',
           disabled && 'pointer-events-none bg-athens',
         )}
       >
@@ -120,7 +120,7 @@
           type="text"
           value={link}
           class={cn(
-            'h-full w-full border-none bg-transparent px-2.5 py-1.5 focus:outline-none',
+            'h-full w-full border-none bg-transparent px-2.5 py-1.5 focus:outline-hidden',
             disabled ? 'text-mystic' : 'text-waterloo',
           )}
           bind:this={inputNode}
@@ -180,7 +180,7 @@
             <div
               style:--bg={color}
               class={cn(
-                'flex size-5 rounded-full bg-[var(--bg)] transition-colors center',
+                'flex size-5 rounded-full bg-(--bg) transition-colors center',
                 disabled && 'bg-mystic',
               )}
             >
diff --git a/src/lib/ui/core/Switch/Switch.svelte b/src/lib/ui/core/Switch/Switch.svelte
index d40cd02ac..961d0a405 100644
--- a/src/lib/ui/core/Switch/Switch.svelte
+++ b/src/lib/ui/core/Switch/Switch.svelte
@@ -43,7 +43,7 @@
   class={cn(
     'group/switch relative flex items-center rounded-full bg-casper hover:bg-waterloo',
     'fill-porcelain-day hover:fill-white-day',
-    'h-5 w-[var(--width)] min-w-[var(--width)] md:h-6',
+    'h-5 w-(--width) min-w-(--width) md:h-6',
     checked && 'bg-green fill-athens-day hover:bg-green-hover hover:fill-white-day',
     disabled && 'bg-porcelain fill-white hover:bg-porcelain hover:fill-white',
     className,
@@ -56,7 +56,7 @@
     --translate-x="{thumbX}px"
     class={cn(
       'absolute left-0 z-10 flex rounded-full bg-porcelain transition-transform will-change-transform',
-      'size-[var(--size)] translate-x-[var(--translate-x)]',
+      'size-(--size) translate-x-(--translate-x)',
       !checked && !disabled && 'dark:bg-mystic-day',
       checked ? 'bg-green-light-2-day' : '',
       disabled && 'bg-whale',
diff --git a/src/lib/ui/core/Tooltip/Tooltip.svelte b/src/lib/ui/core/Tooltip/Tooltip.svelte
index 930a3e7cd..2bd465a6c 100644
--- a/src/lib/ui/core/Tooltip/Tooltip.svelte
+++ b/src/lib/ui/core/Tooltip/Tooltip.svelte
@@ -93,7 +93,7 @@
     class={cn(
       'fly-and-scale-animation animated',
       !noStyles &&
-        'z-10 flex rounded border bg-white p-2 drop-shadow-dropdown dark:bg-athens dark:drop-shadow-none',
+        'z-10 flex rounded-sm border bg-white p-2 drop-shadow-dropdown dark:bg-athens dark:drop-shadow-none',
       className,
     )}
   >
diff --git a/src/lib/ui/core/ValidationError/ValidationError.svelte b/src/lib/ui/core/ValidationError/ValidationError.svelte
index d717b36e5..3012226c6 100644
--- a/src/lib/ui/core/ValidationError/ValidationError.svelte
+++ b/src/lib/ui/core/ValidationError/ValidationError.svelte
@@ -15,7 +15,7 @@
   class={cn(
     'absolute -left-px top-[calc(100%+4px)]',
     'w-max max-w-72 px-[9px] py-[7px]',
-    'pointer-events-none flex gap-2 rounded border border-red-light-3 bg-white fill-red text-start text-xs text-black shadow-dropdown',
+    'pointer-events-none flex gap-2 rounded-sm border border-red-light-3 bg-white fill-red text-start text-xs text-black shadow-dropdown',
     'dark:bg-porcelain dark:shadow-none',
     className,
   )}
diff --git a/src/stories/Design System - App UI/Chart/ChartWidget.svelte b/src/stories/Design System - App UI/Chart/ChartWidget.svelte
index 44594997e..bba4f849a 100644
--- a/src/stories/Design System - App UI/Chart/ChartWidget.svelte	
+++ b/src/stories/Design System - App UI/Chart/ChartWidget.svelte	
@@ -133,7 +133,7 @@
       <!-- svelte-ignore a11y_click_events_have_key_events -->
       <!-- svelte-ignore a11y_no_static_element_interactions -->
       <div
-        class="rounded border p-1"
+        class="rounded-sm border p-1"
         style="border-color:{metric.ui.$$.color}"
         onmouseenter={() => onMetricEnter(metric)}
         onmouseleave={onMetricLeave}
diff --git a/src/stories/Design System - App UI/Products/index.svelte b/src/stories/Design System - App UI/Products/index.svelte
index beaf6be97..d6b01bbfb 100644
--- a/src/stories/Design System - App UI/Products/index.svelte	
+++ b/src/stories/Design System - App UI/Products/index.svelte	
@@ -21,28 +21,28 @@
 
   <div>
     <h2 class="text-xl">Regular</h2>
-    <div class="rounded border">
+    <div class="rounded-sm border">
       <Products active="sanapi" variant="blue" />
     </div>
   </div>
 
   <div>
     <h2 class="text-xl">Column</h2>
-    <div class="rounded border">
+    <div class="rounded-sm border">
       <Products isColumn />
     </div>
   </div>
 
   <div>
     <h2 class="text-xl">Compact</h2>
-    <div class="rounded border">
+    <div class="rounded-sm border">
       <Products isCompact />
     </div>
   </div>
 
   <div>
     <h2 class="text-xl">Column + Compact</h2>
-    <div class="rounded border">
+    <div class="rounded-sm border">
       <Products isCompact isColumn />
     </div>
   </div>
diff --git a/src/stories/Design System - Core UI/Buttons/index.svelte b/src/stories/Design System - Core UI/Buttons/index.svelte
index fd895ad8f..f98dd758b 100644
--- a/src/stories/Design System - Core UI/Buttons/index.svelte	
+++ b/src/stories/Design System - Core UI/Buttons/index.svelte	
@@ -119,7 +119,7 @@
         Write Insight
       </Button>
 
-      <div class="flex gap-[1px]">
+      <div class="flex gap-px">
         <Button variant="fill" class="rounded-r-none px-3">Share</Button>
         <Button variant="fill" class="rounded-l-none" icon="link" />
       </div>
diff --git a/src/stories/Design System - Core UI/Colors/index.svelte b/src/stories/Design System - Core UI/Colors/index.svelte
index 7fc45618b..fd284fc4e 100644
--- a/src/stories/Design System - Core UI/Colors/index.svelte	
+++ b/src/stories/Design System - Core UI/Colors/index.svelte	
@@ -54,7 +54,7 @@
     <div class="mb-10 flex flex-wrap gap-4 text-xs">
       {#each colors as color}
         <div class="color gap-1 column text-mono">
-          <div class="h-[100px] w-[160px] rounded border" style="background:var(--{color})"></div>
+          <div class="h-[100px] w-[160px] rounded-sm border" style="background:var(--{color})"></div>
           <div>
             var(--{color})
           </div>
diff --git a/src/stories/Design System - Core UI/Icons/index.svelte b/src/stories/Design System - Core UI/Icons/index.svelte
index b2571a99a..7b762d39c 100644
--- a/src/stories/Design System - Core UI/Icons/index.svelte	
+++ b/src/stories/Design System - Core UI/Icons/index.svelte	
@@ -12,7 +12,7 @@
       <div class="flex flex-wrap gap-6">
         {#each ICON_CATEGORIES[category] as { key, sprite }}
           <div class="flex flex-col text-xs center">
-            <div class="flex size-12 rounded bg-athens p-2.5 center">
+            <div class="flex size-12 rounded-sm bg-athens p-2.5 center">
               <!-- <Svg id={key} w={width} h={height} /> -->
 
               {@html sprite}
diff --git a/src/stories/Design System - Core UI/Illustrations/index.svelte b/src/stories/Design System - Core UI/Illustrations/index.svelte
index c8901acfe..923c16ddb 100644
--- a/src/stories/Design System - Core UI/Illustrations/index.svelte	
+++ b/src/stories/Design System - Core UI/Illustrations/index.svelte	
@@ -13,7 +13,7 @@
       <div class="flex flex-wrap gap-6">
         {#each ILLUS_CATEGORIES[category] as { key, width, height }}
           <div class="flex flex-col text-xs center">
-            <div class="flex rounded bg-athens p-2.5 center">
+            <div class="flex rounded-sm bg-athens p-2.5 center">
               <Svg illus id={key} w={width} h={height} />
             </div>
             {key}
diff --git a/src/stories/Design System - Core UI/ImageViewer/ImageViewer.svelte b/src/stories/Design System - Core UI/ImageViewer/ImageViewer.svelte
index 3dea86179..539acefa3 100644
--- a/src/stories/Design System - Core UI/ImageViewer/ImageViewer.svelte	
+++ b/src/stories/Design System - Core UI/ImageViewer/ImageViewer.svelte	
@@ -16,7 +16,7 @@
     {#snippet children({ mountAction })}
       <div use:mountAction class="columns-3 gap-4 space-y-4">
         {#each IMAGES as image}
-          <img src={image.src} alt={image.alt} class="w-full cursor-zoom-in rounded" />
+          <img src={image.src} alt={image.alt} class="w-full cursor-zoom-in rounded-sm" />
         {/each}
       </div>
     {/snippet}
diff --git a/src/stories/UI Utilities/VirtualList/index.svelte b/src/stories/UI Utilities/VirtualList/index.svelte
index 95804f573..5dc306ad8 100644
--- a/src/stories/UI Utilities/VirtualList/index.svelte	
+++ b/src/stories/UI Utilities/VirtualList/index.svelte	
@@ -11,9 +11,9 @@
   const data = Array.from({ length: 1000 }).map((_, i) => ({ id: i, size: sizes[i % 4] + 'px' }))
 </script>
 
-<div class="flex min-h-[100vh] p-6 column">
+<div class="flex min-h-screen p-6 column">
   <VirtualList
-    class={cn('rounded border border-red', className)}
+    class={cn('rounded-sm border border-red', className)}
     {...props}
     {data}
     getKey={(item) => item.id}