diff --git a/astro.config.mjs b/astro.config.mjs
index 89e8133ef..5fa7600b3 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,10 +1,10 @@
 // https://astro.build/config
 import sitemap from '@astrojs/sitemap';
-import tailwind from '@astrojs/tailwind';
 import node from '@astrojs/node';
 import { defineConfig } from 'astro/config';
 import rehypeExternalLinks from 'rehype-external-links';
 import { serializeSitemap, shouldIndexPage } from './sitemap.mjs';
+import tailwindcss from '@tailwindcss/vite';
 
 import react from '@astrojs/react';
 
@@ -46,15 +46,13 @@ export default defineConfig({
   }),
   trailingSlash: 'never',
   integrations: [
-    tailwind({
-      config: {
-        applyBaseStyles: false,
-      },
-    }),
     sitemap({
       filter: shouldIndexPage,
       serialize: serializeSitemap,
     }),
     react(),
   ],
+  vite: {
+    plugins: [tailwindcss()],
+  },
 });
diff --git a/package.json b/package.json
index 3d7f367fc..dafc9dc6c 100644
--- a/package.json
+++ b/package.json
@@ -32,11 +32,11 @@
     "@astrojs/node": "^8.3.4",
     "@astrojs/react": "^3.6.2",
     "@astrojs/sitemap": "^3.2.0",
-    "@astrojs/tailwind": "^5.1.2",
     "@fingerprintjs/fingerprintjs": "^4.5.0",
     "@nanostores/react": "^0.8.0",
     "@napi-rs/image": "^1.9.2",
     "@resvg/resvg-js": "^2.6.2",
+    "@tailwindcss/vite": "^4.0.0",
     "@tanstack/react-query": "^5.59.16",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
@@ -72,9 +72,9 @@
     "satori-html": "^0.3.2",
     "sharp": "^0.33.5",
     "slugify": "^1.6.6",
-    "tiptap-markdown": "^0.8.10",
     "tailwind-merge": "^2.5.3",
-    "tailwindcss": "^3.4.13",
+    "tailwindcss": "^4.0.0",
+    "tiptap-markdown": "^0.8.10",
     "turndown": "^7.2.0",
     "unified": "^11.0.5",
     "zustand": "^4.5.5"
@@ -97,7 +97,7 @@
     "openai": "^4.67.3",
     "prettier": "^3.3.3",
     "prettier-plugin-astro": "^0.14.1",
-    "prettier-plugin-tailwindcss": "^0.6.8",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "tsx": "^4.19.1"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7169ac841..ebe5e9af4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,16 +10,13 @@ importers:
     dependencies:
       '@astrojs/node':
         specifier: ^8.3.4
-        version: 8.3.4(astro@4.16.18)
+        version: 8.3.4(astro@4.16.18(@types/node@18.19.74)(lightningcss@1.29.1)(rollup@4.32.0)(typescript@5.7.3))
       '@astrojs/react':
         specifier: ^3.6.2
-        version: 3.6.3(@types/react-dom@18.3.5)(@types/react@18.3.18)(react-dom@18.3.1)(react@18.3.1)
+        version: 3.6.3(@types/node@18.19.74)(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(lightningcss@1.29.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@astrojs/sitemap':
         specifier: ^3.2.0
         version: 3.2.1
-      '@astrojs/tailwind':
-        specifier: ^5.1.2
-        version: 5.1.5(astro@4.16.18)(tailwindcss@3.4.17)
       '@fingerprintjs/fingerprintjs':
         specifier: ^4.5.0
         version: 4.5.1
@@ -32,6 +29,9 @@ importers:
       '@resvg/resvg-js':
         specifier: ^2.6.2
         version: 2.6.2
+      '@tailwindcss/vite':
+        specifier: ^4.0.0
+        version: 4.0.0(vite@5.4.14(@types/node@18.19.74)(lightningcss@1.29.1))
       '@tanstack/react-query':
         specifier: ^5.59.16
         version: 5.64.2(react@18.3.1)
@@ -43,7 +43,7 @@ importers:
         version: 18.3.5(@types/react@18.3.18)
       astro:
         specifier: ^4.16.1
-        version: 4.16.18(typescript@5.7.3)
+        version: 4.16.18(@types/node@18.19.74)(lightningcss@1.29.1)(rollup@4.32.0)(typescript@5.7.3)
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
@@ -109,10 +109,10 @@ importers:
         version: 18.3.1(react@18.3.1)
       react-tooltip:
         specifier: ^5.28.0
-        version: 5.28.0(react-dom@18.3.1)(react@18.3.1)
+        version: 5.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       reactflow:
         specifier: ^11.11.4
-        version: 11.11.4(@types/react@18.3.18)(react-dom@18.3.1)(react@18.3.1)
+        version: 11.11.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       rehype-external-links:
         specifier: ^3.0.0
         version: 3.0.0
@@ -141,11 +141,11 @@ importers:
         specifier: ^2.5.3
         version: 2.6.0
       tailwindcss:
-        specifier: ^3.4.13
-        version: 3.4.17
+        specifier: ^4.0.0
+        version: 4.0.0
       tiptap-markdown:
         specifier: ^0.8.10
-        version: 0.8.10(@tiptap/core@2.11.3)
+        version: 0.8.10(@tiptap/core@2.11.3(@tiptap/pm@2.11.3))
       turndown:
         specifier: ^7.2.0
         version: 7.2.0
@@ -161,7 +161,7 @@ importers:
         version: 1.50.0
       '@tailwindcss/typography':
         specifier: ^0.5.15
-        version: 0.5.16(tailwindcss@3.4.17)
+        version: 0.5.16(tailwindcss@4.0.0)
       '@types/dom-to-image':
         specifier: ^2.6.7
         version: 2.6.7
@@ -208,7 +208,7 @@ importers:
         specifier: ^0.14.1
         version: 0.14.1
       prettier-plugin-tailwindcss:
-        specifier: ^0.6.8
+        specifier: ^0.6.11
         version: 0.6.11(prettier-plugin-astro@0.14.1)(prettier@3.4.2)
       tsx:
         specifier: ^4.19.1
@@ -216,10 +216,6 @@ importers:
 
 packages:
 
-  '@alloc/quick-lru@5.2.0':
-    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
-    engines: {node: '>=10'}
-
   '@ampproject/remapping@2.3.0':
     resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
     engines: {node: '>=6.0.0'}
@@ -254,12 +250,6 @@ packages:
   '@astrojs/sitemap@3.2.1':
     resolution: {integrity: sha512-uxMfO8f7pALq0ADL6Lk68UV6dNYjJ2xGUzyjjVj60JLBs5a6smtlkBYv3tQ0DzoqwS7c9n4FUx5lgv0yPo/fgA==}
 
-  '@astrojs/tailwind@5.1.5':
-    resolution: {integrity: sha512-1diguZEau7FZ9vIjzE4BwavGdhD3+JkdS8zmibl1ene+EHgIU5hI0NMgRYG3yea+Niaf7cyMwjeWeLvzq/maxg==}
-    peerDependencies:
-      astro: ^3.0.0 || ^4.0.0 || ^5.0.0
-      tailwindcss: ^3.0.24
-
   '@astrojs/telemetry@3.1.0':
     resolution: {integrity: sha512-/ca/+D8MIKEC8/A9cSaPUqQNZm+Es/ZinRv0ZAzvu2ios7POQSsVD+VOj7/hypWNsNM3T7RpfgNq7H2TU1KEHA==}
     engines: {node: ^18.17.1 || ^20.3.0 || >=21.0.0}
@@ -767,10 +757,6 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@isaacs/cliui@8.0.2':
-    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
-    engines: {node: '>=12'}
-
   '@jridgewell/gen-mapping@0.3.8':
     resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
     engines: {node: '>=6.0.0'}
@@ -892,10 +878,6 @@ packages:
   '@oslojs/encoding@1.1.0':
     resolution: {integrity: sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ==}
 
-  '@pkgjs/parseargs@0.11.0':
-    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
-    engines: {node: '>=14'}
-
   '@playwright/test@1.50.0':
     resolution: {integrity: sha512-ZGNXbt+d65EGjBORQHuYKj+XhCewlwpnSd/EDuLPZGSiEWmgOJB5RmMCCYGy5aMfTs9wx61RivfDKi8H/hcMvw==}
     engines: {node: '>=18'}
@@ -1146,11 +1128,89 @@ packages:
     engines: {node: '>= 8.0.0'}
     hasBin: true
 
+  '@tailwindcss/node@4.0.0':
+    resolution: {integrity: sha512-tfG2uBvo6j6kDIPmntxwXggCOZAt7SkpAXJ6pTIYirNdk5FBqh/CZZ9BZPpgcl/tNFLs6zc4yghM76sqiELG9g==}
+
+  '@tailwindcss/oxide-android-arm64@4.0.0':
+    resolution: {integrity: sha512-EAhjU0+FIdyGPR+7MbBWubLLPtmOu+p7c2egTTFBRk/n//zYjNvVK0WhcBK5Y7oUB5mo4EjA2mCbY7dcEMWSRw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.0.0':
+    resolution: {integrity: sha512-hdz4xnSWS11cIp+7ye+3dGHqs0X33z+BXXTtgPOguDWVa+TdXUzwxonklSzf5wlJFuot3dv5eWzhlNai0oYYQg==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.0.0':
+    resolution: {integrity: sha512-+dOUUaXTkPKKhtUI9QtVaYg+MpmLh2CN0dHohiYXaBirEyPMkjaT0zbRgzQlNnQWjCVVXPQluIEb0OMEjSTH+Q==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.0.0':
+    resolution: {integrity: sha512-CJhGDhxnrmu4SwyC62fA+wP24MhA/TZlIhRHqg1kRuIHoGoVR2uSSm1qxTxU37tSSZj8Up0q6jsBJCAP4k7rgQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.0':
+    resolution: {integrity: sha512-Wy7Av0xzXfY2ujZBcYy4+7GQm25/J1iHvlQU2CfwdDCuPWfIjYzR6kggz+uVdSJyKV2s64znchBxRE8kV4uXSA==}
+    engines: {node: '>= 10'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.0.0':
+    resolution: {integrity: sha512-srwBo2l6pvM0swBntc1ucuhGsfFOLkqPRFQ3dWARRTfSkL1U9nAsob2MKc/n47Eva/W9pZZgMOuf7rDw8pK1Ew==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.0.0':
+    resolution: {integrity: sha512-abhusswkduYWuezkBmgo0K0/erGq3M4Se5xP0fhc/0dKs0X/rJUYYCFWntHb3IGh3aVzdQ0SXJs93P76DbUqtw==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.0.0':
+    resolution: {integrity: sha512-hGtRYIUEx377/HlU49+jvVKKwU1MDSKYSMMs0JFO2Wp7LGxk5+0j5+RBk9NFnmp/lbp32yPTgIOO5m1BmDq36A==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.0.0':
+    resolution: {integrity: sha512-7xgQgSAThs0I14VAgmxpJnK6XFSZBxHMGoDXkLyYkEnu+8WRQMbCP93dkCUn2PIv+Q+JulRgc00PJ09uORSLXQ==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.0.0':
+    resolution: {integrity: sha512-qEcgTIPcWY5ZE7f6VxQ/JPrSFMcehzVIlZj7sGE3mVd5YWreAT+Fl1vSP8q2pjnWXn0avZG3Iw7a2hJQAm+fTQ==}
+    engines: {node: '>= 10'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.0.0':
+    resolution: {integrity: sha512-bqT0AY8RXb8GMDy28JtngvqaOSB2YixbLPLvUo6I6lkvvUwA6Eqh2Tj60e2Lh7O/k083f8tYiB0WEK4wmTI7Jg==}
+    engines: {node: '>= 10'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.0.0':
+    resolution: {integrity: sha512-W3FjpJgy4VV1JiL7iBYDf2n/WkeDg1Il+0Q7eWnqPyvkPPCo/Mbwc5BiaT7dfBNV6tQKAhVE34rU5xl8pSl50w==}
+    engines: {node: '>= 10'}
+
   '@tailwindcss/typography@0.5.16':
     resolution: {integrity: sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==}
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
 
+  '@tailwindcss/vite@4.0.0':
+    resolution: {integrity: sha512-4uukMiU9gHui8KMPMdWic5SP1O/tmQ1NFSRNrQWmcop5evAVl/LZ6/LuWL3quEiecp2RBcRWwqJrG+mFXlRlew==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6
+
   '@tanstack/query-core@5.64.2':
     resolution: {integrity: sha512-hdO8SZpWXoADNTWXV9We8CwTkXU88OVWRBcsiFrk7xJQnhm6WRlweDzMD+uH+GnuieTBVSML6xFa17C2cNV8+g==}
 
@@ -1400,21 +1460,10 @@ packages:
     resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==}
     engines: {node: '>=12'}
 
-  ansi-styles@4.3.0:
-    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
-    engines: {node: '>=8'}
-
   ansi-styles@6.2.1:
     resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
     engines: {node: '>=12'}
 
-  any-promise@1.3.0:
-    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
-
-  anymatch@3.1.3:
-    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
-    engines: {node: '>= 8'}
-
   arg@5.0.2:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
 
@@ -1446,13 +1495,6 @@ packages:
   asynckit@0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
 
-  autoprefixer@10.4.20:
-    resolution: {integrity: sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==}
-    engines: {node: ^10 || ^12 || >=14}
-    hasBin: true
-    peerDependencies:
-      postcss: ^8.1.0
-
   axobject-query@4.1.0:
     resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
     engines: {node: '>= 0.4'}
@@ -1460,9 +1502,6 @@ packages:
   bail@2.0.2:
     resolution: {integrity: sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==}
 
-  balanced-match@1.0.2:
-    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
-
   base-64@1.0.0:
     resolution: {integrity: sha512-kwDPIFCGx0NZHog36dj+tHiwP4QMzsZ3AgMViUBKI0+V5n4U0ufTCUMhnQ04diaRI8EX/QcPfql7zlhZ7j4zgg==}
 
@@ -1470,10 +1509,6 @@ packages:
     resolution: {integrity: sha512-3XSA2cR/h/73EzlXXdU6YNycmYI7+kicTxks4eJg2g39biHR84slg2+des+p7iHYhbRg/udIS4TD53WabcOUkw==}
     engines: {node: '>= 0.4'}
 
-  binary-extensions@2.3.0:
-    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
-    engines: {node: '>=8'}
-
   boolbase@1.0.0:
     resolution: {integrity: sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==}
 
@@ -1481,9 +1516,6 @@ packages:
     resolution: {integrity: sha512-F3PH5k5juxom4xktynS7MoFY+NUWH5LC4CnH11YB8NPew+HLpmBLCybSAEyb2F+4pRXhuhWqFesoQd6DAyc2hw==}
     engines: {node: '>=18'}
 
-  brace-expansion@2.0.1:
-    resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
-
   braces@3.0.3:
     resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==}
     engines: {node: '>=8'}
@@ -1493,10 +1525,6 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
 
-  camelcase-css@2.0.1:
-    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
-    engines: {node: '>= 6'}
-
   camelcase@8.0.0:
     resolution: {integrity: sha512-8WB3Jcas3swSvjIeA2yvCJ+Miyz5l1ZmB6HFb9R1317dt9LCQoswg/BGrmAmkWVEszSrrg4RwmO46qIm2OEnSA==}
     engines: {node: '>=16'}
@@ -1523,10 +1551,6 @@ packages:
   character-entities@2.0.2:
     resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
 
-  chokidar@3.6.0:
-    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
-    engines: {node: '>= 8.10.0'}
-
   ci-info@4.1.0:
     resolution: {integrity: sha512-HutrvTNsF48wnxkzERIXOe5/mlcfFcbfCmwcg6CJnizbSue78AbDt+1cgl26zwn61WFxhcPykPfZrbqjGmBb4A==}
     engines: {node: '>=8'}
@@ -1578,10 +1602,6 @@ packages:
     resolution: {integrity: sha512-/rFeCpNJQbhSZjGVwO9RFV3xPqbnERS8MmIQzCtD/zl6gpJuV/bMLuN92oG3F7d8oDEHHRrujSXNUr8fpjntKw==}
     engines: {node: '>=18'}
 
-  commander@4.1.1:
-    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
-    engines: {node: '>= 6'}
-
   common-ancestor-path@1.0.1:
     resolution: {integrity: sha512-L3sHRo1pXXEqX8VU28kfgUY+YGsk09hPqZiZmLacNib6XNTCM8ubYeT7ryXQw8asB1sKgcU5lkB7ONug08aB8w==}
 
@@ -1598,10 +1618,6 @@ packages:
   crelt@1.0.6:
     resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
 
-  cross-spawn@7.0.6:
-    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
-    engines: {node: '>= 8'}
-
   css-background-parser@0.1.0:
     resolution: {integrity: sha512-2EZLisiZQ+7m4wwur/qiYJRniHX4K5Tc9w93MT3AS0WS1u5kaZ4FKXlOTBhOjc+CgEgPiGY+fX1yWD8UwpEqUA==}
 
@@ -1720,6 +1736,11 @@ packages:
     resolution: {integrity: sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==}
     engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
 
+  detect-libc@1.0.3:
+    resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
+    engines: {node: '>=0.10'}
+    hasBin: true
+
   detect-libc@2.0.3:
     resolution: {integrity: sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==}
     engines: {node: '>=8'}
@@ -1734,9 +1755,6 @@ packages:
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
-  didyoumean@1.2.2:
-    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-
   diff@5.2.0:
     resolution: {integrity: sha512-uIFDxqpRZGZ6ThOk84hEfqWoHx2devRFvpTZcTHur85vImfaxUbTW9Ryh4CpCuDnToOP1CEtXKIgytHBPVff5A==}
     engines: {node: '>=0.3.1'}
@@ -1771,9 +1789,6 @@ packages:
     resolution: {integrity: sha512-2QF/g9/zTaPDc3BjNcVTGoBbXBgYfMTTceLaYcFJ/W9kggFUkhxD/hMEeuLKbugyef9SqAx8cpgwlIP/jinUTA==}
     engines: {node: '>=4'}
 
-  eastasianwidth@0.2.0:
-    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
-
   ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
 
@@ -1792,13 +1807,14 @@ packages:
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
-  emoji-regex@9.2.2:
-    resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
-
   encodeurl@2.0.0:
     resolution: {integrity: sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==}
     engines: {node: '>= 0.8'}
 
+  enhanced-resolve@5.18.0:
+    resolution: {integrity: sha512-0/r0MySGYG8YqlayBZ6MuCfECmHFdJ5qyPh8s8wa5Hnm6SaFLSK1VYCbj+NKp090Nm1caZhD+QTnmxO7esYGyQ==}
+    engines: {node: '>=10.13.0'}
+
   entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
@@ -1905,10 +1921,6 @@ packages:
     resolution: {integrity: sha512-9UbaD6XdAL97+k/n+N7JwX46K/M6Zc6KcFYskrYL8wbBV/Uyk0CTAMY0VT+qiK5PM7AIc9aTWYtq65U7T+aCNQ==}
     engines: {node: '>=8'}
 
-  foreground-child@3.3.0:
-    resolution: {integrity: sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==}
-    engines: {node: '>=14'}
-
   form-data-encoder@1.7.2:
     resolution: {integrity: sha512-qfqtYan3rxrnCk1VYaA4H+Ms9xdpPqvLZa6xmMgFvhO32x7/3J/ExcTd6qpxM0vH2GdMI+poehyBZvqfMTto8A==}
 
@@ -1920,9 +1932,6 @@ packages:
     resolution: {integrity: sha512-0iirZp3uVDjVGt9p49aTaqjk84TrglENEDuqfdlZQ1roC9CWlPk6Avf8EEnZNcAqPonwkG35x4n3ww/1THYAeQ==}
     engines: {node: '>= 12.20'}
 
-  fraction.js@4.3.7:
-    resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
-
   fresh@0.5.2:
     resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
     engines: {node: '>= 0.6'}
@@ -1941,9 +1950,6 @@ packages:
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
     os: [darwin]
 
-  function-bind@1.1.2:
-    resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
-
   gensync@1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
@@ -1967,14 +1973,6 @@ packages:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
 
-  glob-parent@6.0.2:
-    resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==}
-    engines: {node: '>=10.13.0'}
-
-  glob@10.4.5:
-    resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
-    hasBin: true
-
   globals@11.12.0:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
     engines: {node: '>=4'}
@@ -1990,10 +1988,6 @@ packages:
     resolution: {integrity: sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==}
     engines: {node: '>=6.0'}
 
-  hasown@2.0.2:
-    resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
-    engines: {node: '>= 0.4'}
-
   hast-util-from-html@2.0.3:
     resolution: {integrity: sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==}
 
@@ -2076,14 +2070,6 @@ packages:
   is-arrayish@0.3.2:
     resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
 
-  is-binary-path@2.1.0:
-    resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
-    engines: {node: '>=8'}
-
-  is-core-module@2.16.1:
-    resolution: {integrity: sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==}
-    engines: {node: '>= 0.4'}
-
   is-docker@3.0.0:
     resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -2138,14 +2124,8 @@ packages:
     resolution: {integrity: sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==}
     engines: {node: '>=16'}
 
-  isexe@2.0.0:
-    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
-
-  jackspeak@3.4.3:
-    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
-
-  jiti@1.21.7:
-    resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
+  jiti@2.4.2:
+    resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==}
     hasBin: true
 
   jose@5.9.6:
@@ -2191,16 +2171,73 @@ packages:
     resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
     engines: {node: '>=6'}
 
-  lilconfig@3.1.3:
-    resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
-    engines: {node: '>=14'}
+  lightningcss-darwin-arm64@1.29.1:
+    resolution: {integrity: sha512-HtR5XJ5A0lvCqYAoSv2QdZZyoHNttBpa5EP9aNuzBQeKGfbyH5+UipLWvVzpP4Uml5ej4BYs5I9Lco9u1fECqw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.29.1:
+    resolution: {integrity: sha512-k33G9IzKUpHy/J/3+9MCO4e+PzaFblsgBjSGlpAaFikeBFm8B/CkO3cKU9oI4g+fjS2KlkLM/Bza9K/aw8wsNA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.29.1:
+    resolution: {integrity: sha512-0SUW22fv/8kln2LnIdOCmSuXnxgxVC276W5KLTwoehiO0hxkacBxjHOL5EtHD8BAXg2BvuhsJPmVMasvby3LiQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.29.1:
+    resolution: {integrity: sha512-sD32pFvlR0kDlqsOZmYqH/68SqUMPNj+0pucGxToXZi4XZgZmqeX/NkxNKCPsswAXU3UeYgDSpGhu05eAufjDg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.29.1:
+    resolution: {integrity: sha512-0+vClRIZ6mmJl/dxGuRsE197o1HDEeeRk6nzycSy2GofC2JsY4ifCRnvUWf/CUBQmlrvMzt6SMQNMSEu22csWQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.29.1:
+    resolution: {integrity: sha512-UKMFrG4rL/uHNgelBsDwJcBqVpzNJbzsKkbI3Ja5fg00sgQnHw/VrzUTEc4jhZ+AN2BvQYz/tkHu4vt1kLuJyw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.29.1:
+    resolution: {integrity: sha512-u1S+xdODy/eEtjADqirA774y3jLcm8RPtYztwReEXoZKdzgsHYPl0s5V52Tst+GKzqjebkULT86XMSxejzfISw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.29.1:
+    resolution: {integrity: sha512-L0Tx0DtaNUTzXv0lbGCLB/c/qEADanHbu4QdcNOXLIe1i8i22rZRpbT3gpWYsCh9aSL9zFujY/WmEXIatWvXbw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.29.1:
+    resolution: {integrity: sha512-QoOVnkIEFfbW4xPi+dpdft/zAKmgLgsRHfJalEPYuJDOWf7cLQzYg0DEh8/sn737FaeMJxHZRc1oBreiwZCjog==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.29.1:
+    resolution: {integrity: sha512-NygcbThNBe4JElP+olyTI/doBNGJvLs3bFCRPdvuCcxZCcCZ71B858IHpdm7L1btZex0FvCmM17FK98Y9MRy1Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.29.1:
+    resolution: {integrity: sha512-FmGoeD4S05ewj+AkhTY+D+myDvXI6eL27FjHIjoyUkO/uw7WZD1fBVs0QxeYWa7E17CUHJaYX/RUGISCtcrG4Q==}
+    engines: {node: '>= 12.0.0'}
 
   linebreak@1.1.0:
     resolution: {integrity: sha512-MHp03UImeVhB7XZtjd0E4n6+3xr5Dq/9xI/5FptGk5FrbDR3zagPa2DS6U8ks/3HjbKWG9Q1M2ufOzxV2qLYSQ==}
 
-  lines-and-columns@1.2.4:
-    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-
   linkify-it@5.0.0:
     resolution: {integrity: sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==}
 
@@ -2232,9 +2269,6 @@ packages:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
 
-  lru-cache@10.4.3:
-    resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==}
-
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
@@ -2421,14 +2455,6 @@ packages:
     resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
     engines: {node: '>=18'}
 
-  minimatch@9.0.5:
-    resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==}
-    engines: {node: '>=16 || 14 >=14.17'}
-
-  minipass@7.1.2:
-    resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
-    engines: {node: '>=16 || 14 >=14.17'}
-
   mrmime@2.0.0:
     resolution: {integrity: sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==}
     engines: {node: '>=10'}
@@ -2439,9 +2465,6 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
-  mz@2.7.0:
-    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
-
   nanoid@3.3.8:
     resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -2482,14 +2505,6 @@ packages:
   node-releases@2.0.19:
     resolution: {integrity: sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==}
 
-  normalize-path@3.0.0:
-    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'}
-
   npm-check-updates@17.1.14:
     resolution: {integrity: sha512-dr4bXIxETubLI1tFGeock5hN8yVjahvaVpx+lPO4/O2md3zJuxB7FgH3MIoTvQSCgsgkIRpe0skti01IEAA5tA==}
     engines: {node: ^18.18.0 || >=20.0.0, npm: '>=8.12.1'}
@@ -2502,10 +2517,6 @@ packages:
     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'}
-
   on-finished@2.4.1:
     resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==}
     engines: {node: '>= 0.8'}
@@ -2560,9 +2571,6 @@ packages:
     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
     engines: {node: '>=6'}
 
-  package-json-from-dist@1.0.1:
-    resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==}
-
   pako@0.2.9:
     resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==}
 
@@ -2582,17 +2590,6 @@ packages:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
 
-  path-key@3.1.1:
-    resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
-    engines: {node: '>=8'}
-
-  path-parse@1.0.7:
-    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
-
-  path-scurry@1.11.1:
-    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
-    engines: {node: '>=16 || 14 >=14.18'}
-
   path-type@4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
@@ -2608,18 +2605,10 @@ packages:
     resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
     engines: {node: '>=12'}
 
-  pify@2.3.0:
-    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
-    engines: {node: '>=0.10.0'}
-
   pify@4.0.1:
     resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
     engines: {node: '>=6'}
 
-  pirates@4.0.6:
-    resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
-    engines: {node: '>= 6'}
-
   pkg-dir@4.2.0:
     resolution: {integrity: sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==}
     engines: {node: '>=8'}
@@ -2634,44 +2623,10 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
-  postcss-import@15.1.0:
-    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      postcss: ^8.0.0
-
-  postcss-js@4.0.1:
-    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
-    engines: {node: ^12 || ^14 || >= 16}
-    peerDependencies:
-      postcss: ^8.4.21
-
-  postcss-load-config@4.0.2:
-    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
-
-  postcss-nested@6.2.0:
-    resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.2.14
-
   postcss-selector-parser@6.0.10:
     resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==}
     engines: {node: '>=4'}
 
-  postcss-selector-parser@6.1.2:
-    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
-    engines: {node: '>=4'}
-
   postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
 
@@ -2872,13 +2827,6 @@ packages:
       react: '>=17'
       react-dom: '>=17'
 
-  read-cache@1.0.0:
-    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
-
-  readdirp@3.6.0:
-    resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
-    engines: {node: '>=8.10.0'}
-
   regex-recursion@5.1.1:
     resolution: {integrity: sha512-ae7SBCbzVNrIjgSbh7wMznPcQel1DNlDtzensnFxpiNpXt1U2ju/bHugH422r+4LAVS1FpW1YCwilmnNsjum9w==}
 
@@ -2922,11 +2870,6 @@ packages:
   resolve-pkg-maps@1.0.0:
     resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
 
-  resolve@1.22.10:
-    resolution: {integrity: sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==}
-    engines: {node: '>= 0.4'}
-    hasBin: true
-
   restore-cursor@5.1.0:
     resolution: {integrity: sha512-oMA2dcrw6u0YfxJQXm342bFKX/E4sG9rbTzO9ptUcR/e8A33cHuvStiYOwH7fszkZlZ1z/ta9AAoPk2F4qIOHA==}
     engines: {node: '>=18'}
@@ -3010,14 +2953,6 @@ packages:
     resolution: {integrity: sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
 
-  shebang-command@2.0.0:
-    resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
-    engines: {node: '>=8'}
-
-  shebang-regex@3.0.0:
-    resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
-    engines: {node: '>=8'}
-
   shiki@1.29.1:
     resolution: {integrity: sha512-TghWKV9pJTd/N+IgAIVJtr0qZkB7FfFCUrrEJc0aRmZupo3D1OCVRknQWVRVA7AX/M0Ld7QfoAruPzr3CnUJuw==}
 
@@ -3069,10 +3004,6 @@ packages:
     resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
     engines: {node: '>=8'}
 
-  string-width@5.1.2:
-    resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
-    engines: {node: '>=12'}
-
   string-width@7.2.0:
     resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
     engines: {node: '>=18'}
@@ -3103,32 +3034,18 @@ packages:
     resolution: {integrity: sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==}
     engines: {node: '>=0.10.0'}
 
-  sucrase@3.35.0:
-    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
-    engines: {node: '>=16 || 14 >=14.17'}
-    hasBin: true
-
   suf-log@2.5.3:
     resolution: {integrity: sha512-KvC8OPjzdNOe+xQ4XWJV2whQA0aM1kGVczMQ8+dStAO6KfEB140JEVQ9dE76ONZ0/Ylf67ni4tILPJB41U0eow==}
 
-  supports-preserve-symlinks-flag@1.0.0:
-    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
-    engines: {node: '>= 0.4'}
-
   tailwind-merge@2.6.0:
     resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}
 
-  tailwindcss@3.4.17:
-    resolution: {integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
+  tailwindcss@4.0.0:
+    resolution: {integrity: sha512-ULRPI3A+e39T7pSaf1xoi58AqqJxVCLg8F/uM5A3FadUbnyDTgltVnXJvdkTjwCOGA6NazqHVcwPJC5h2vRYVQ==}
 
-  thenify-all@1.6.0:
-    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
-    engines: {node: '>=0.8'}
-
-  thenify@3.3.1:
-    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+  tapable@2.2.1:
+    resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
+    engines: {node: '>=6'}
 
   tiny-inflate@1.0.3:
     resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==}
@@ -3162,9 +3079,6 @@ packages:
   trough@2.2.0:
     resolution: {integrity: sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==}
 
-  ts-interface-checker@0.1.13:
-    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
-
   tsconfck@3.1.4:
     resolution: {integrity: sha512-kdqWFGVJqe+KGYvlSO9NIaWn9jT1Ny4oKVzAJsKii5eoE9snzTJzL4+MMVOMn+fikWGFmKEylcXL710V/kIPJQ==}
     engines: {node: ^18 || >=20}
@@ -3330,23 +3244,10 @@ packages:
     resolution: {integrity: sha512-ysVYmw6+ZBhx3+ZkcPwRuJi38ZOTLJJ33PSHaitLxSKUMsh0LkKd0nC69zZCwt5D+AYUcMK2hhw4yWny20vSGg==}
     engines: {node: '>=18.12'}
 
-  which@2.0.2:
-    resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==}
-    engines: {node: '>= 8'}
-    hasBin: true
-
   widest-line@5.0.0:
     resolution: {integrity: sha512-c9bZp7b5YtRj2wOe6dlj32MK+Bx/M/d+9VB2SHM1OtsUHR0aV0tdP6DWh/iMt0kWi1t5g1Iudu6hQRNd1A4PVA==}
     engines: {node: '>=18'}
 
-  wrap-ansi@7.0.0:
-    resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
-    engines: {node: '>=10'}
-
-  wrap-ansi@8.1.0:
-    resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
-    engines: {node: '>=12'}
-
   wrap-ansi@9.0.0:
     resolution: {integrity: sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==}
     engines: {node: '>=18'}
@@ -3357,11 +3258,6 @@ packages:
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
-  yaml@2.7.0:
-    resolution: {integrity: sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==}
-    engines: {node: '>= 14'}
-    hasBin: true
-
   yargs-parser@21.1.1:
     resolution: {integrity: sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==}
     engines: {node: '>=12'}
@@ -3407,8 +3303,6 @@ packages:
 
 snapshots:
 
-  '@alloc/quick-lru@5.2.0': {}
-
   '@ampproject/remapping@2.3.0':
     dependencies:
       '@jridgewell/gen-mapping': 0.3.8
@@ -3441,9 +3335,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@astrojs/node@8.3.4(astro@4.16.18)':
+  '@astrojs/node@8.3.4(astro@4.16.18(@types/node@18.19.74)(lightningcss@1.29.1)(rollup@4.32.0)(typescript@5.7.3))':
     dependencies:
-      astro: 4.16.18(typescript@5.7.3)
+      astro: 4.16.18(@types/node@18.19.74)(lightningcss@1.29.1)(rollup@4.32.0)(typescript@5.7.3)
       send: 0.19.1
       server-destroy: 1.0.1
     transitivePeerDependencies:
@@ -3453,15 +3347,15 @@ snapshots:
     dependencies:
       prismjs: 1.29.0
 
-  '@astrojs/react@3.6.3(@types/react-dom@18.3.5)(@types/react@18.3.18)(react-dom@18.3.1)(react@18.3.1)':
+  '@astrojs/react@3.6.3(@types/node@18.19.74)(@types/react-dom@18.3.5(@types/react@18.3.18))(@types/react@18.3.18)(lightningcss@1.29.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@types/react': 18.3.18
       '@types/react-dom': 18.3.5(@types/react@18.3.18)
-      '@vitejs/plugin-react': 4.3.4(vite@5.4.14)
+      '@vitejs/plugin-react': 4.3.4(vite@5.4.14(@types/node@18.19.74)(lightningcss@1.29.1))
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
       ultrahtml: 1.5.3
-      vite: 5.4.14
+      vite: 5.4.14(@types/node@18.19.74)(lightningcss@1.29.1)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -3479,16 +3373,6 @@ snapshots:
       stream-replace-string: 2.0.0
       zod: 3.24.1
 
-  '@astrojs/tailwind@5.1.5(astro@4.16.18)(tailwindcss@3.4.17)':
-    dependencies:
-      astro: 4.16.18(typescript@5.7.3)
-      autoprefixer: 10.4.20(postcss@8.5.1)
-      postcss: 8.5.1
-      postcss-load-config: 4.0.2(postcss@8.5.1)
-      tailwindcss: 3.4.17
-    transitivePeerDependencies:
-      - ts-node
-
   '@astrojs/telemetry@3.1.0':
     dependencies:
       ci-info: 4.1.0
@@ -3878,15 +3762,6 @@ snapshots:
   '@img/sharp-win32-x64@0.33.5':
     optional: true
 
-  '@isaacs/cliui@8.0.2':
-    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
-
   '@jridgewell/gen-mapping@0.3.8':
     dependencies:
       '@jridgewell/set-array': 1.2.1
@@ -3985,16 +3860,13 @@ snapshots:
 
   '@oslojs/encoding@1.1.0': {}
 
-  '@pkgjs/parseargs@0.11.0':
-    optional: true
-
   '@playwright/test@1.50.0':
     dependencies:
       playwright: 1.50.0
 
-  '@reactflow/background@11.3.14(@types/react@18.3.18)(react-dom@18.3.1)(react@18.3.1)':
+  '@reactflow/background@11.3.14(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@reactflow/core': 11.11.4(@types/react@18.3.18)(react-dom@18.3.1)(react@18.3.1)
+      '@reactflow/core': 11.11.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       classcat: 5.0.5
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
@@ -4003,9 +3875,9 @@ snapshots:
       - '@types/react'
       - immer
 
-  '@reactflow/controls@11.2.14(@types/react@18.3.18)(react-dom@18.3.1)(react@18.3.1)':
+  '@reactflow/controls@11.2.14(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@reactflow/core': 11.11.4(@types/react@18.3.18)(react-dom@18.3.1)(react@18.3.1)
+      '@reactflow/core': 11.11.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       classcat: 5.0.5
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
@@ -4014,7 +3886,7 @@ snapshots:
       - '@types/react'
       - immer
 
-  '@reactflow/core@11.11.4(@types/react@18.3.18)(react-dom@18.3.1)(react@18.3.1)':
+  '@reactflow/core@11.11.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@types/d3': 7.4.3
       '@types/d3-drag': 3.0.7
@@ -4031,9 +3903,9 @@ snapshots:
       - '@types/react'
       - immer
 
-  '@reactflow/minimap@11.7.14(@types/react@18.3.18)(react-dom@18.3.1)(react@18.3.1)':
+  '@reactflow/minimap@11.7.14(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@reactflow/core': 11.11.4(@types/react@18.3.18)(react-dom@18.3.1)(react@18.3.1)
+      '@reactflow/core': 11.11.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@types/d3-selection': 3.0.11
       '@types/d3-zoom': 3.0.8
       classcat: 5.0.5
@@ -4046,9 +3918,9 @@ snapshots:
       - '@types/react'
       - immer
 
-  '@reactflow/node-resizer@2.2.14(@types/react@18.3.18)(react-dom@18.3.1)(react@18.3.1)':
+  '@reactflow/node-resizer@2.2.14(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@reactflow/core': 11.11.4(@types/react@18.3.18)(react-dom@18.3.1)(react@18.3.1)
+      '@reactflow/core': 11.11.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       classcat: 5.0.5
       d3-drag: 3.0.0
       d3-selection: 3.0.0
@@ -4059,9 +3931,9 @@ snapshots:
       - '@types/react'
       - immer
 
-  '@reactflow/node-toolbar@1.3.14(@types/react@18.3.18)(react-dom@18.3.1)(react@18.3.1)':
+  '@reactflow/node-toolbar@1.3.14(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
-      '@reactflow/core': 11.11.4(@types/react@18.3.18)(react-dom@18.3.1)(react@18.3.1)
+      '@reactflow/core': 11.11.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       classcat: 5.0.5
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
@@ -4123,11 +3995,13 @@ snapshots:
       '@resvg/resvg-js-win32-ia32-msvc': 2.6.2
       '@resvg/resvg-js-win32-x64-msvc': 2.6.2
 
-  '@rollup/pluginutils@5.1.4':
+  '@rollup/pluginutils@5.1.4(rollup@4.32.0)':
     dependencies:
       '@types/estree': 1.0.6
       estree-walker: 2.0.2
       picomatch: 4.0.2
+    optionalDependencies:
+      rollup: 4.32.0
 
   '@rollup/rollup-android-arm-eabi@4.32.0':
     optional: true
@@ -4226,13 +4100,74 @@ snapshots:
       fflate: 0.7.4
       string.prototype.codepointat: 0.2.1
 
-  '@tailwindcss/typography@0.5.16(tailwindcss@3.4.17)':
+  '@tailwindcss/node@4.0.0':
+    dependencies:
+      enhanced-resolve: 5.18.0
+      jiti: 2.4.2
+      tailwindcss: 4.0.0
+
+  '@tailwindcss/oxide-android-arm64@4.0.0':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.0.0':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.0.0':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.0.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.0.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.0.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.0.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.0.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.0.0':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.0.0':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.0.0':
+    optional: true
+
+  '@tailwindcss/oxide@4.0.0':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.0.0
+      '@tailwindcss/oxide-darwin-arm64': 4.0.0
+      '@tailwindcss/oxide-darwin-x64': 4.0.0
+      '@tailwindcss/oxide-freebsd-x64': 4.0.0
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.0.0
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.0.0
+      '@tailwindcss/oxide-linux-arm64-musl': 4.0.0
+      '@tailwindcss/oxide-linux-x64-gnu': 4.0.0
+      '@tailwindcss/oxide-linux-x64-musl': 4.0.0
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.0.0
+      '@tailwindcss/oxide-win32-x64-msvc': 4.0.0
+
+  '@tailwindcss/typography@0.5.16(tailwindcss@4.0.0)':
     dependencies:
       lodash.castarray: 4.4.0
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       postcss-selector-parser: 6.0.10
-      tailwindcss: 3.4.17
+      tailwindcss: 4.0.0
+
+  '@tailwindcss/vite@4.0.0(vite@5.4.14(@types/node@18.19.74)(lightningcss@1.29.1))':
+    dependencies:
+      '@tailwindcss/node': 4.0.0
+      '@tailwindcss/oxide': 4.0.0
+      lightningcss: 1.29.1
+      tailwindcss: 4.0.0
+      vite: 5.4.14(@types/node@18.19.74)(lightningcss@1.29.1)
 
   '@tanstack/query-core@5.64.2': {}
 
@@ -4503,14 +4438,14 @@ snapshots:
 
   '@ungap/structured-clone@1.3.0': {}
 
-  '@vitejs/plugin-react@4.3.4(vite@5.4.14)':
+  '@vitejs/plugin-react@4.3.4(vite@5.4.14(@types/node@18.19.74)(lightningcss@1.29.1))':
     dependencies:
       '@babel/core': 7.26.7
       '@babel/plugin-transform-react-jsx-self': 7.25.9(@babel/core@7.26.7)
       '@babel/plugin-transform-react-jsx-source': 7.25.9(@babel/core@7.26.7)
       '@types/babel__core': 7.20.5
       react-refresh: 0.14.2
-      vite: 5.4.14
+      vite: 5.4.14(@types/node@18.19.74)(lightningcss@1.29.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -4532,19 +4467,8 @@ snapshots:
 
   ansi-regex@6.1.0: {}
 
-  ansi-styles@4.3.0:
-    dependencies:
-      color-convert: 2.0.1
-
   ansi-styles@6.2.1: {}
 
-  any-promise@1.3.0: {}
-
-  anymatch@3.1.3:
-    dependencies:
-      normalize-path: 3.0.0
-      picomatch: 2.3.1
-
   arg@5.0.2: {}
 
   argparse@1.0.10:
@@ -4559,7 +4483,7 @@ snapshots:
 
   array-union@2.1.0: {}
 
-  astro@4.16.18(typescript@5.7.3):
+  astro@4.16.18(@types/node@18.19.74)(lightningcss@1.29.1)(rollup@4.32.0)(typescript@5.7.3):
     dependencies:
       '@astrojs/compiler': 2.10.3
       '@astrojs/internal-helpers': 0.4.1
@@ -4569,7 +4493,7 @@ snapshots:
       '@babel/plugin-transform-react-jsx': 7.25.9(@babel/core@7.26.7)
       '@babel/types': 7.26.7
       '@oslojs/encoding': 1.1.0
-      '@rollup/pluginutils': 5.1.4
+      '@rollup/pluginutils': 5.1.4(rollup@4.32.0)
       '@types/babel__core': 7.20.5
       '@types/cookie': 0.6.0
       acorn: 8.14.0
@@ -4615,8 +4539,8 @@ snapshots:
       tsconfck: 3.1.4(typescript@5.7.3)
       unist-util-visit: 5.0.0
       vfile: 6.0.3
-      vite: 5.4.14
-      vitefu: 1.0.5(vite@5.4.14)
+      vite: 5.4.14(@types/node@18.19.74)(lightningcss@1.29.1)
+      vitefu: 1.0.5(vite@5.4.14(@types/node@18.19.74)(lightningcss@1.29.1))
       which-pm: 3.0.0
       xxhash-wasm: 1.1.0
       yargs-parser: 21.1.1
@@ -4642,28 +4566,14 @@ snapshots:
 
   asynckit@0.4.0: {}
 
-  autoprefixer@10.4.20(postcss@8.5.1):
-    dependencies:
-      browserslist: 4.24.4
-      caniuse-lite: 1.0.30001695
-      fraction.js: 4.3.7
-      normalize-range: 0.1.2
-      picocolors: 1.1.1
-      postcss: 8.5.1
-      postcss-value-parser: 4.2.0
-
   axobject-query@4.1.0: {}
 
   bail@2.0.2: {}
 
-  balanced-match@1.0.2: {}
-
   base-64@1.0.0: {}
 
   base64-js@0.0.8: {}
 
-  binary-extensions@2.3.0: {}
-
   boolbase@1.0.0: {}
 
   boxen@8.0.1:
@@ -4677,10 +4587,6 @@ snapshots:
       widest-line: 5.0.0
       wrap-ansi: 9.0.0
 
-  brace-expansion@2.0.1:
-    dependencies:
-      balanced-match: 1.0.2
-
   braces@3.0.3:
     dependencies:
       fill-range: 7.1.1
@@ -4692,8 +4598,6 @@ snapshots:
       node-releases: 2.0.19
       update-browserslist-db: 1.1.2(browserslist@4.24.4)
 
-  camelcase-css@2.0.1: {}
-
   camelcase@8.0.0: {}
 
   camelize@1.0.1: {}
@@ -4710,18 +4614,6 @@ snapshots:
 
   character-entities@2.0.2: {}
 
-  chokidar@3.6.0:
-    dependencies:
-      anymatch: 3.1.3
-      braces: 3.0.3
-      glob-parent: 5.1.2
-      is-binary-path: 2.1.0
-      is-glob: 4.0.3
-      normalize-path: 3.0.0
-      readdirp: 3.6.0
-    optionalDependencies:
-      fsevents: 2.3.3
-
   ci-info@4.1.0: {}
 
   classcat@5.0.5: {}
@@ -4762,8 +4654,6 @@ snapshots:
 
   commander@13.1.0: {}
 
-  commander@4.1.1: {}
-
   common-ancestor-path@1.0.1: {}
 
   commondir@1.0.1: {}
@@ -4774,12 +4664,6 @@ snapshots:
 
   crelt@1.0.6: {}
 
-  cross-spawn@7.0.6:
-    dependencies:
-      path-key: 3.1.1
-      shebang-command: 2.0.0
-      which: 2.0.2
-
   css-background-parser@0.1.0: {}
 
   css-box-shadow@1.0.0-3: {}
@@ -4870,6 +4754,8 @@ snapshots:
 
   destroy@1.2.0: {}
 
+  detect-libc@1.0.3: {}
+
   detect-libc@2.0.3: {}
 
   deterministic-object-hash@2.0.2:
@@ -4882,8 +4768,6 @@ snapshots:
     dependencies:
       dequal: 2.0.3
 
-  didyoumean@1.2.2: {}
-
   diff@5.2.0: {}
 
   dir-glob@3.0.1:
@@ -4916,8 +4800,6 @@ snapshots:
 
   dset@3.1.4: {}
 
-  eastasianwidth@0.2.0: {}
-
   ee-first@1.1.1: {}
 
   electron-to-chromium@1.5.88: {}
@@ -4930,10 +4812,13 @@ snapshots:
 
   emoji-regex@8.0.0: {}
 
-  emoji-regex@9.2.2: {}
-
   encodeurl@2.0.0: {}
 
+  enhanced-resolve@5.18.0:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.2.1
+
   entities@4.5.0: {}
 
   es-module-lexer@1.6.0: {}
@@ -5067,11 +4952,6 @@ snapshots:
 
   flattie@1.1.1: {}
 
-  foreground-child@3.3.0:
-    dependencies:
-      cross-spawn: 7.0.6
-      signal-exit: 4.1.0
-
   form-data-encoder@1.7.2: {}
 
   form-data@4.0.1:
@@ -5085,8 +4965,6 @@ snapshots:
       node-domexception: 1.0.0
       web-streams-polyfill: 4.0.0-beta.3
 
-  fraction.js@4.3.7: {}
-
   fresh@0.5.2: {}
 
   fs-extra@11.3.0:
@@ -5101,8 +4979,6 @@ snapshots:
   fsevents@2.3.3:
     optional: true
 
-  function-bind@1.1.2: {}
-
   gensync@1.0.0-beta.2: {}
 
   get-east-asian-width@1.3.0: {}
@@ -5127,19 +5003,6 @@ snapshots:
     dependencies:
       is-glob: 4.0.3
 
-  glob-parent@6.0.2:
-    dependencies:
-      is-glob: 4.0.3
-
-  glob@10.4.5:
-    dependencies:
-      foreground-child: 3.3.0
-      jackspeak: 3.4.3
-      minimatch: 9.0.5
-      minipass: 7.1.2
-      package-json-from-dist: 1.0.1
-      path-scurry: 1.11.1
-
   globals@11.12.0: {}
 
   globby@11.1.0:
@@ -5160,10 +5023,6 @@ snapshots:
       section-matter: 1.0.0
       strip-bom-string: 1.0.0
 
-  hasown@2.0.2:
-    dependencies:
-      function-bind: 1.1.2
-
   hast-util-from-html@2.0.3:
     dependencies:
       '@types/hast': 3.0.4
@@ -5296,14 +5155,6 @@ snapshots:
 
   is-arrayish@0.3.2: {}
 
-  is-binary-path@2.1.0:
-    dependencies:
-      binary-extensions: 2.3.0
-
-  is-core-module@2.16.1:
-    dependencies:
-      hasown: 2.0.2
-
   is-docker@3.0.0: {}
 
   is-extendable@0.1.1: {}
@@ -5336,15 +5187,7 @@ snapshots:
     dependencies:
       is-inside-container: 1.0.0
 
-  isexe@2.0.0: {}
-
-  jackspeak@3.4.3:
-    dependencies:
-      '@isaacs/cliui': 8.0.2
-    optionalDependencies:
-      '@pkgjs/parseargs': 0.11.0
-
-  jiti@1.21.7: {}
+  jiti@2.4.2: {}
 
   jose@5.9.6: {}
 
@@ -5377,15 +5220,56 @@ snapshots:
 
   kleur@4.1.5: {}
 
-  lilconfig@3.1.3: {}
+  lightningcss-darwin-arm64@1.29.1:
+    optional: true
+
+  lightningcss-darwin-x64@1.29.1:
+    optional: true
+
+  lightningcss-freebsd-x64@1.29.1:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.29.1:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.29.1:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.29.1:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.29.1:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.29.1:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.29.1:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.29.1:
+    optional: true
+
+  lightningcss@1.29.1:
+    dependencies:
+      detect-libc: 1.0.3
+    optionalDependencies:
+      lightningcss-darwin-arm64: 1.29.1
+      lightningcss-darwin-x64: 1.29.1
+      lightningcss-freebsd-x64: 1.29.1
+      lightningcss-linux-arm-gnueabihf: 1.29.1
+      lightningcss-linux-arm64-gnu: 1.29.1
+      lightningcss-linux-arm64-musl: 1.29.1
+      lightningcss-linux-x64-gnu: 1.29.1
+      lightningcss-linux-x64-musl: 1.29.1
+      lightningcss-win32-arm64-msvc: 1.29.1
+      lightningcss-win32-x64-msvc: 1.29.1
 
   linebreak@1.1.0:
     dependencies:
       base64-js: 0.0.8
       unicode-trie: 2.0.0
 
-  lines-and-columns@1.2.4: {}
-
   linkify-it@5.0.0:
     dependencies:
       uc.micro: 2.1.0
@@ -5418,8 +5302,6 @@ snapshots:
     dependencies:
       js-tokens: 4.0.0
 
-  lru-cache@10.4.3: {}
-
   lru-cache@5.1.1:
     dependencies:
       yallist: 3.1.1
@@ -5789,24 +5671,12 @@ snapshots:
 
   mimic-function@5.0.1: {}
 
-  minimatch@9.0.5:
-    dependencies:
-      brace-expansion: 2.0.1
-
-  minipass@7.1.2: {}
-
   mrmime@2.0.0: {}
 
   ms@2.0.0: {}
 
   ms@2.1.3: {}
 
-  mz@2.7.0:
-    dependencies:
-      any-promise: 1.3.0
-      object-assign: 4.1.1
-      thenify-all: 1.6.0
-
   nanoid@3.3.8: {}
 
   nanoid@5.0.9: {}
@@ -5832,10 +5702,6 @@ snapshots:
 
   node-releases@2.0.19: {}
 
-  normalize-path@3.0.0: {}
-
-  normalize-range@0.1.2: {}
-
   npm-check-updates@17.1.14: {}
 
   nth-check@2.1.1:
@@ -5844,8 +5710,6 @@ snapshots:
 
   object-assign@4.1.1: {}
 
-  object-hash@3.0.0: {}
-
   on-finished@2.4.1:
     dependencies:
       ee-first: 1.1.1
@@ -5869,6 +5733,7 @@ snapshots:
       form-data-encoder: 1.7.2
       formdata-node: 4.4.1
       node-fetch: 2.7.0
+    optionalDependencies:
       zod: 3.24.1
     transitivePeerDependencies:
       - encoding
@@ -5908,8 +5773,6 @@ snapshots:
 
   p-try@2.2.0: {}
 
-  package-json-from-dist@1.0.1: {}
-
   pako@0.2.9: {}
 
   parse-css-color@0.2.1:
@@ -5934,15 +5797,6 @@ snapshots:
 
   path-exists@4.0.0: {}
 
-  path-key@3.1.1: {}
-
-  path-parse@1.0.7: {}
-
-  path-scurry@1.11.1:
-    dependencies:
-      lru-cache: 10.4.3
-      minipass: 7.1.2
-
   path-type@4.0.0: {}
 
   picocolors@1.1.1: {}
@@ -5951,12 +5805,8 @@ snapshots:
 
   picomatch@4.0.2: {}
 
-  pify@2.3.0: {}
-
   pify@4.0.1: {}
 
-  pirates@4.0.6: {}
-
   pkg-dir@4.2.0:
     dependencies:
       find-up: 4.1.0
@@ -5969,39 +5819,11 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.2
 
-  postcss-import@15.1.0(postcss@8.5.1):
-    dependencies:
-      postcss: 8.5.1
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.10
-
-  postcss-js@4.0.1(postcss@8.5.1):
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.5.1
-
-  postcss-load-config@4.0.2(postcss@8.5.1):
-    dependencies:
-      lilconfig: 3.1.3
-      postcss: 8.5.1
-      yaml: 2.7.0
-
-  postcss-nested@6.2.0(postcss@8.5.1):
-    dependencies:
-      postcss: 8.5.1
-      postcss-selector-parser: 6.1.2
-
   postcss-selector-parser@6.0.10:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
 
-  postcss-selector-parser@6.1.2:
-    dependencies:
-      cssesc: 3.0.0
-      util-deprecate: 1.0.2
-
   postcss-value-parser@4.2.0: {}
 
   postcss@8.5.1:
@@ -6025,6 +5847,7 @@ snapshots:
   prettier-plugin-tailwindcss@0.6.11(prettier-plugin-astro@0.14.1)(prettier@3.4.2):
     dependencies:
       prettier: 3.4.2
+    optionalDependencies:
       prettier-plugin-astro: 0.14.1
 
   prettier@3.4.2: {}
@@ -6178,7 +6001,7 @@ snapshots:
 
   react-refresh@0.14.2: {}
 
-  react-tooltip@5.28.0(react-dom@18.3.1)(react@18.3.1):
+  react-tooltip@5.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
       '@floating-ui/dom': 1.6.13
       classnames: 2.5.1
@@ -6189,28 +6012,20 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
-  reactflow@11.11.4(@types/react@18.3.18)(react-dom@18.3.1)(react@18.3.1):
+  reactflow@11.11.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
     dependencies:
-      '@reactflow/background': 11.3.14(@types/react@18.3.18)(react-dom@18.3.1)(react@18.3.1)
-      '@reactflow/controls': 11.2.14(@types/react@18.3.18)(react-dom@18.3.1)(react@18.3.1)
-      '@reactflow/core': 11.11.4(@types/react@18.3.18)(react-dom@18.3.1)(react@18.3.1)
-      '@reactflow/minimap': 11.7.14(@types/react@18.3.18)(react-dom@18.3.1)(react@18.3.1)
-      '@reactflow/node-resizer': 2.2.14(@types/react@18.3.18)(react-dom@18.3.1)(react@18.3.1)
-      '@reactflow/node-toolbar': 1.3.14(@types/react@18.3.18)(react-dom@18.3.1)(react@18.3.1)
+      '@reactflow/background': 11.3.14(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@reactflow/controls': 11.2.14(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@reactflow/core': 11.11.4(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@reactflow/minimap': 11.7.14(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@reactflow/node-resizer': 2.2.14(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@reactflow/node-toolbar': 1.3.14(@types/react@18.3.18)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
     transitivePeerDependencies:
       - '@types/react'
       - immer
 
-  read-cache@1.0.0:
-    dependencies:
-      pify: 2.3.0
-
-  readdirp@3.6.0:
-    dependencies:
-      picomatch: 2.3.1
-
   regex-recursion@5.1.1:
     dependencies:
       regex: 5.1.1
@@ -6299,12 +6114,6 @@ snapshots:
 
   resolve-pkg-maps@1.0.0: {}
 
-  resolve@1.22.10:
-    dependencies:
-      is-core-module: 2.16.1
-      path-parse: 1.0.7
-      supports-preserve-symlinks-flag: 1.0.0
-
   restore-cursor@5.1.0:
     dependencies:
       onetime: 7.0.0
@@ -6466,12 +6275,6 @@ snapshots:
       '@img/sharp-win32-ia32': 0.33.5
       '@img/sharp-win32-x64': 0.33.5
 
-  shebang-command@2.0.0:
-    dependencies:
-      shebang-regex: 3.0.0
-
-  shebang-regex@3.0.0: {}
-
   shiki@1.29.1:
     dependencies:
       '@shikijs/core': 1.29.1
@@ -6520,12 +6323,6 @@ snapshots:
       is-fullwidth-code-point: 3.0.0
       strip-ansi: 6.0.1
 
-  string-width@5.1.2:
-    dependencies:
-      eastasianwidth: 0.2.0
-      emoji-regex: 9.2.2
-      strip-ansi: 7.1.0
-
   string-width@7.2.0:
     dependencies:
       emoji-regex: 10.4.0
@@ -6555,64 +6352,21 @@ snapshots:
     dependencies:
       escape-string-regexp: 1.0.5
 
-  sucrase@3.35.0:
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.8
-      commander: 4.1.1
-      glob: 10.4.5
-      lines-and-columns: 1.2.4
-      mz: 2.7.0
-      pirates: 4.0.6
-      ts-interface-checker: 0.1.13
-
   suf-log@2.5.3:
     dependencies:
       s.color: 0.0.15
 
-  supports-preserve-symlinks-flag@1.0.0: {}
-
   tailwind-merge@2.6.0: {}
 
-  tailwindcss@3.4.17:
-    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.3
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.21.7
-      lilconfig: 3.1.3
-      micromatch: 4.0.8
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.1.1
-      postcss: 8.5.1
-      postcss-import: 15.1.0(postcss@8.5.1)
-      postcss-js: 4.0.1(postcss@8.5.1)
-      postcss-load-config: 4.0.2(postcss@8.5.1)
-      postcss-nested: 6.2.0(postcss@8.5.1)
-      postcss-selector-parser: 6.1.2
-      resolve: 1.22.10
-      sucrase: 3.35.0
-    transitivePeerDependencies:
-      - ts-node
-
-  thenify-all@1.6.0:
-    dependencies:
-      thenify: 3.3.1
+  tailwindcss@4.0.0: {}
 
-  thenify@3.3.1:
-    dependencies:
-      any-promise: 1.3.0
+  tapable@2.2.1: {}
 
   tiny-inflate@1.0.3: {}
 
   tinyexec@0.3.2: {}
 
-  tiptap-markdown@0.8.10(@tiptap/core@2.11.3):
+  tiptap-markdown@0.8.10(@tiptap/core@2.11.3(@tiptap/pm@2.11.3)):
     dependencies:
       '@tiptap/core': 2.11.3(@tiptap/pm@2.11.3)
       '@types/markdown-it': 13.0.9
@@ -6636,10 +6390,8 @@ snapshots:
 
   trough@2.2.0: {}
 
-  ts-interface-checker@0.1.13: {}
-
   tsconfck@3.1.4(typescript@5.7.3):
-    dependencies:
+    optionalDependencies:
       typescript: 5.7.3
 
   tslib@2.8.1: {}
@@ -6753,17 +6505,19 @@ snapshots:
       '@types/unist': 3.0.3
       vfile-message: 4.0.2
 
-  vite@5.4.14:
+  vite@5.4.14(@types/node@18.19.74)(lightningcss@1.29.1):
     dependencies:
       esbuild: 0.21.5
       postcss: 8.5.1
       rollup: 4.32.0
     optionalDependencies:
+      '@types/node': 18.19.74
       fsevents: 2.3.3
+      lightningcss: 1.29.1
 
-  vitefu@1.0.5(vite@5.4.14):
-    dependencies:
-      vite: 5.4.14
+  vitefu@1.0.5(vite@5.4.14(@types/node@18.19.74)(lightningcss@1.29.1)):
+    optionalDependencies:
+      vite: 5.4.14(@types/node@18.19.74)(lightningcss@1.29.1)
 
   w3c-keyname@2.2.8: {}
 
@@ -6784,26 +6538,10 @@ snapshots:
     dependencies:
       load-yaml-file: 0.2.0
 
-  which@2.0.2:
-    dependencies:
-      isexe: 2.0.0
-
   widest-line@5.0.0:
     dependencies:
       string-width: 7.2.0
 
-  wrap-ansi@7.0.0:
-    dependencies:
-      ansi-styles: 4.3.0
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-
-  wrap-ansi@8.1.0:
-    dependencies:
-      ansi-styles: 6.2.1
-      string-width: 5.1.2
-      strip-ansi: 7.1.0
-
   wrap-ansi@9.0.0:
     dependencies:
       ansi-styles: 6.2.1
@@ -6814,8 +6552,6 @@ snapshots:
 
   yallist@3.1.1: {}
 
-  yaml@2.7.0: {}
-
   yargs-parser@21.1.1: {}
 
   yocto-queue@1.1.1: {}
@@ -6835,8 +6571,9 @@ snapshots:
 
   zustand@4.5.6(@types/react@18.3.18)(react@18.3.1):
     dependencies:
+      use-sync-external-store: 1.4.0(react@18.3.1)
+    optionalDependencies:
       '@types/react': 18.3.18
       react: 18.3.1
-      use-sync-external-store: 1.4.0(react@18.3.1)
 
   zwitch@2.0.4: {}
diff --git a/src/components/AccountSidebar.astro b/src/components/AccountSidebar.astro
index 9b609304e..99463eb0e 100644
--- a/src/components/AccountSidebar.astro
+++ b/src/components/AccountSidebar.astro
@@ -153,7 +153,7 @@ const sidebarLinks = [
                         : 'border-r-transparent text-gray-500 hover:border-r-gray-300'
                     }`}
                   >
-                    <span class='flex flex-grow items-center'>
+                    <span class='flex grow items-center'>
                       {sidebarLink.icon.component ? (
                         <sidebarLink.icon.component
                           className={`${sidebarLink.icon.classes} mr-2`}
diff --git a/src/components/AccountStreak/AccountStreak.tsx b/src/components/AccountStreak/AccountStreak.tsx
index 306d660ec..1d69cf8f6 100644
--- a/src/components/AccountStreak/AccountStreak.tsx
+++ b/src/components/AccountStreak/AccountStreak.tsx
@@ -83,10 +83,10 @@ export function AccountStreak(props: AccountStreakProps) {
   const totalCircles = leftCircleCount + currentCircleCount + remainingCount;
 
   return (
-    <div className="relative z-[90] animate-fade-in">
+    <div className="relative z-90 animate-fade-in">
       <button
         className={cn(
-          'flex items-center justify-center rounded-lg p-1.5 px-2 text-purple-400 hover:bg-purple-100/10 focus:outline-none',
+          'flex items-center justify-center rounded-lg p-1.5 px-2 text-purple-400 hover:bg-purple-100/10 focus:outline-hidden',
           {
             'bg-purple-100/10': showDropdown,
           },
diff --git a/src/components/AccountStreak/AccountStreakHeatmap.tsx b/src/components/AccountStreak/AccountStreakHeatmap.tsx
index 0e7daaba4..5d05e4df6 100644
--- a/src/components/AccountStreak/AccountStreakHeatmap.tsx
+++ b/src/components/AccountStreak/AccountStreakHeatmap.tsx
@@ -128,20 +128,20 @@ export function AccountStreakHeatmap(props: AccountStreakHeatmapProps) {
         ]}
         classForValue={(value) => {
           if (!value) {
-            return 'fill-slate-700 rounded-md [rx:2px] focus:outline-none';
+            return 'fill-slate-700 rounded-md [rx:2px] focus:outline-hidden';
           }
 
           const { count } = value;
           if (count >= 20) {
-            return 'fill-slate-200 rounded-md [rx:2px] focus:outline-none';
+            return 'fill-slate-200 rounded-md [rx:2px] focus:outline-hidden';
           } else if (count >= 10) {
-            return 'fill-slate-300 rounded-md [rx:2px] focus:outline-none';
+            return 'fill-slate-300 rounded-md [rx:2px] focus:outline-hidden';
           } else if (count >= 5) {
-            return 'fill-slate-400 rounded-md [rx:2px] focus:outline-none';
+            return 'fill-slate-400 rounded-md [rx:2px] focus:outline-hidden';
           } else if (count >= 3) {
-            return 'fill-slate-500 rounded-md [rx:2px] focus:outline-none';
+            return 'fill-slate-500 rounded-md [rx:2px] focus:outline-hidden';
           } else {
-            return 'fill-slate-600 rounded-md [rx:2px] focus:outline-none';
+            return 'fill-slate-600 rounded-md [rx:2px] focus:outline-hidden';
           }
         }}
         tooltipDataAttrs={(value: any) => {
@@ -159,7 +159,7 @@ export function AccountStreakHeatmap(props: AccountStreakHeatmapProps) {
 
       <ReactTooltip
         id="user-activity-tip"
-        className="!rounded-lg !bg-slate-900 !p-1 !px-2 !text-xs"
+        className="rounded-lg! bg-slate-900! p-1! px-2! text-xs!"
       />
 
       <div className="mt-2 flex items-center justify-end">
@@ -173,14 +173,14 @@ export function AccountStreakHeatmap(props: AccountStreakHeatmapProps) {
               data-tooltip-content={`${legend.count} Updates`}
             >
               <div
-                className={`h-2.5 w-2.5 ${legend.color} mr-1 rounded-sm`}
+                className={`h-2.5 w-2.5 ${legend.color} mr-1 rounded-xs`}
               ></div>
             </div>
           ))}
           <span className="ml-2 text-xs text-slate-500">More</span>
           <ReactTooltip
             id="user-activity-tip"
-            className="!rounded-lg !bg-slate-900 !p-1 !px-2 !text-sm"
+            className="rounded-lg! bg-slate-900! p-1! px-2! text-sm!"
           />
         </div>
       </div>
diff --git a/src/components/Activity/ActivityTopicsModal.tsx b/src/components/Activity/ActivityTopicsModal.tsx
index b23ead5b2..1913a070f 100644
--- a/src/components/Activity/ActivityTopicsModal.tsx
+++ b/src/components/Activity/ActivityTopicsModal.tsx
@@ -43,7 +43,7 @@ export function ActivityTopicsModal(props: ActivityTopicDetailsProps) {
         onClose();
       }}
     >
-      <div className={`popup-body relative rounded-lg bg-white p-4 shadow`}>
+      <div className={`popup-body relative rounded-lg bg-white p-4 shadow-sm`}>
         <span className="mb-2 flex items-center justify-between text-lg font-semibold capitalize">
           <span className="flex items-center gap-2">
             {actionType.replace('_', ' ')}
diff --git a/src/components/Activity/ProjectProgress.tsx b/src/components/Activity/ProjectProgress.tsx
index 6ac20de28..222584429 100644
--- a/src/components/Activity/ProjectProgress.tsx
+++ b/src/components/Activity/ProjectProgress.tsx
@@ -37,7 +37,7 @@ export function ProjectProgress(props: ProjectProgressType) {
         target="_blank"
       >
         <ProjectStatus projectStatus={projectStatus} />
-        <span className="ml-2 flex-grow truncate">{projectStatus?.title}</span>
+        <span className="ml-2 grow truncate">{projectStatus?.title}</span>
         <span className="inline-flex items-center gap-1 text-xs text-gray-400">
           {projectStatus.upvotes}
           <ThumbsUp className="size-2.5 stroke-[2.5px]" />
diff --git a/src/components/Activity/ResourceProgress.tsx b/src/components/Activity/ResourceProgress.tsx
index 28c88ec9f..db8a4ae74 100644
--- a/src/components/Activity/ResourceProgress.tsx
+++ b/src/components/Activity/ResourceProgress.tsx
@@ -73,7 +73,7 @@ export function ResourceProgress(props: ResourceProgressType) {
           showActions ? 'pr-7' : '',
         )}
       >
-        <span className="flex-grow truncate">{title}</span>
+        <span className="grow truncate">{title}</span>
         <span className="text-xs text-gray-400">
           {parseInt(progressPercentage, 10)}%
         </span>
diff --git a/src/components/AddTeamRoadmap.tsx b/src/components/AddTeamRoadmap.tsx
index 9772d559e..da0403a7b 100644
--- a/src/components/AddTeamRoadmap.tsx
+++ b/src/components/AddTeamRoadmap.tsx
@@ -69,7 +69,7 @@ export function AddTeamRoadmap(props: AddTeamRoadmapProps) {
       <div className="relative h-full w-full max-w-md p-4 md:h-auto">
         <div
           ref={popupBodyEl}
-          className="popup-body relative rounded-lg bg-white p-4 shadow"
+          className="popup-body relative rounded-lg bg-white p-4 shadow-sm"
         >
           {isLoading && (
             <>
@@ -99,7 +99,7 @@ export function AddTeamRoadmap(props: AddTeamRoadmapProps) {
                 <button
                   onClick={onClose}
                   type="button"
-                  className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center hover:bg-gray-300"
+                  className="grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center hover:bg-gray-300"
                 >
                   Done
                 </button>
@@ -110,7 +110,7 @@ export function AddTeamRoadmap(props: AddTeamRoadmapProps) {
                     setIsLoading(false);
                   }}
                   type="button"
-                  className="flex-grow cursor-pointer rounded-lg bg-black py-2 text-center text-white"
+                  className="grow cursor-pointer rounded-lg bg-black py-2 text-center text-white"
                 >
                   + Add More
                 </button>
@@ -126,7 +126,7 @@ export function AddTeamRoadmap(props: AddTeamRoadmapProps) {
                 <button
                   onClick={onClose}
                   type="button"
-                  className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center hover:bg-gray-300"
+                  className="grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center hover:bg-gray-300"
                 >
                   Cancel
                 </button>
@@ -152,7 +152,7 @@ export function AddTeamRoadmap(props: AddTeamRoadmapProps) {
                     setSelectedRoadmap(roadmapId);
                   });
                 }}
-                inputClassName="mt-2 mb-2 block w-full rounded-md border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:border-gray-400"
+                inputClassName="mt-2 mb-2 block w-full rounded-md border border-gray-300 px-3 py-2 outline-hidden placeholder:text-gray-400 focus:border-gray-400"
                 placeholder={'Search for roadmap'}
               />
 
@@ -160,7 +160,7 @@ export function AddTeamRoadmap(props: AddTeamRoadmapProps) {
                 <button
                   onClick={onClose}
                   type="button"
-                  className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center hover:bg-gray-300"
+                  className="grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center hover:bg-gray-300"
                 >
                   Cancel
                 </button>
diff --git a/src/components/AdvertiseForm.tsx b/src/components/AdvertiseForm.tsx
index 36d132296..fa6618215 100644
--- a/src/components/AdvertiseForm.tsx
+++ b/src/components/AdvertiseForm.tsx
@@ -30,7 +30,7 @@ function Input(props: InputProps) {
           value={value}
           onChange={onChange}
           rows={rows}
-          className="mt-1 block w-full rounded-md border border-gray-300 p-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+          className="mt-1 block w-full rounded-md border border-gray-300 p-2 shadow-xs focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
           autoComplete="off"
           data-1p-ignore=""
           data-form-type="other"
@@ -45,7 +45,7 @@ function Input(props: InputProps) {
           value={value}
           onChange={onChange}
           required={required}
-          className="mt-1 block w-full rounded-md border border-gray-300 p-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+          className="mt-1 block w-full rounded-md border border-gray-300 p-2 shadow-xs focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
           autoComplete="off"
           data-1p-ignore=""
           data-form-type="other"
@@ -120,7 +120,7 @@ export function AdvertiseForm() {
         Ready to learn more? Fill out the form below to get started!
       </h2>
       {error && (
-        <div className="relative mb-4 rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700">
+        <div className="relative mb-4 rounded-sm border border-red-400 bg-red-100 px-4 py-3 text-red-700">
           {error}
         </div>
       )}
@@ -199,7 +199,7 @@ export function AdvertiseForm() {
               type="checkbox"
               checked={formData.updates}
               onChange={handleInputChange}
-              className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
+              className="h-4 w-4 rounded-sm border-gray-300 text-indigo-600 focus:ring-indigo-500"
             />
           </div>
           <div className="ml-3 text-sm">
@@ -213,7 +213,7 @@ export function AdvertiseForm() {
         <div>
           <button
             type="submit"
-            className="flex justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+            className="flex justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-xs hover:bg-indigo-700 focus:outline-hidden focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
           >
             Send
           </button>
diff --git a/src/components/AuthenticationFlow/CourseLoginPopup.tsx b/src/components/AuthenticationFlow/CourseLoginPopup.tsx
index cc344ac82..7756f9564 100644
--- a/src/components/AuthenticationFlow/CourseLoginPopup.tsx
+++ b/src/components/AuthenticationFlow/CourseLoginPopup.tsx
@@ -115,7 +115,7 @@ export function CourseLoginPopup(props: CourseLoginPopupProps) {
       <div className="flex flex-row gap-2">
         {!isUsingEmail && (
           <button
-            className="flex-grow rounded-md border border-gray-400 px-4 py-2 text-sm text-gray-600 hover:bg-gray-100"
+            className="grow rounded-md border border-gray-400 px-4 py-2 text-sm text-gray-600 hover:bg-gray-100"
             onClick={() => setIsUsingEmail(true)}
           >
             Use your email address
@@ -124,13 +124,13 @@ export function CourseLoginPopup(props: CourseLoginPopupProps) {
         {isUsingEmail && (
           <>
             <button
-              className="flex-grow rounded-md border border-gray-400 px-4 py-2 text-sm text-gray-600 hover:bg-gray-100"
+              className="grow rounded-md border border-gray-400 px-4 py-2 text-sm text-gray-600 hover:bg-gray-100"
               onClick={() => setEmailNature('login')}
             >
               Already have an account
             </button>
             <button
-              className="flex-grow rounded-md border border-gray-400 px-4 py-2 text-sm text-gray-600 hover:bg-gray-100"
+              className="grow rounded-md border border-gray-400 px-4 py-2 text-sm text-gray-600 hover:bg-gray-100"
               onClick={() => setEmailNature('signup')}
             >
               Create an account
diff --git a/src/components/AuthenticationFlow/EmailLoginForm.tsx b/src/components/AuthenticationFlow/EmailLoginForm.tsx
index 2907433fb..5b9d74979 100644
--- a/src/components/AuthenticationFlow/EmailLoginForm.tsx
+++ b/src/components/AuthenticationFlow/EmailLoginForm.tsx
@@ -72,7 +72,7 @@ export function EmailLoginForm(props: EmailLoginFormProps) {
         type="email"
         autoComplete="email"
         required
-        className="block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+        className="block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
         placeholder="Email Address"
         value={email}
         onInput={(e) => setEmail(String((e.target as any).value))}
@@ -86,7 +86,7 @@ export function EmailLoginForm(props: EmailLoginFormProps) {
         type="password"
         autoComplete="current-password"
         required
-        className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+        className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
         placeholder="Password"
         value={password}
         onInput={(e) => setPassword(String((e.target as any).value))}
@@ -108,7 +108,7 @@ export function EmailLoginForm(props: EmailLoginFormProps) {
       <button
         type="submit"
         disabled={isLoading || isDisabled}
-        className="inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-none focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
+        className="inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-hidden focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
       >
         {isLoading ? 'Please wait...' : 'Continue'}
       </button>
diff --git a/src/components/AuthenticationFlow/EmailSignupForm.tsx b/src/components/AuthenticationFlow/EmailSignupForm.tsx
index f1c0f86f6..28966228f 100644
--- a/src/components/AuthenticationFlow/EmailSignupForm.tsx
+++ b/src/components/AuthenticationFlow/EmailSignupForm.tsx
@@ -74,7 +74,7 @@ export function EmailSignupForm(props: EmailSignupFormProps) {
         min={3}
         max={50}
         required
-        className="block w-full rounded-lg border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+        className="block w-full rounded-lg border border-gray-300 px-3 py-2 outline-hidden placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
         placeholder="Full Name"
         value={name}
         onInput={(e) => setName(String((e.target as any).value))}
@@ -87,7 +87,7 @@ export function EmailSignupForm(props: EmailSignupFormProps) {
         type="email"
         autoComplete="email"
         required
-        className="block w-full rounded-lg border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+        className="block w-full rounded-lg border border-gray-300 px-3 py-2 outline-hidden placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
         placeholder="Email Address"
         value={email}
         onInput={(e) => setEmail(String((e.target as any).value))}
@@ -102,7 +102,7 @@ export function EmailSignupForm(props: EmailSignupFormProps) {
         min={6}
         max={50}
         required
-        className="block w-full rounded-lg border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+        className="block w-full rounded-lg border border-gray-300 px-3 py-2 outline-hidden placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
         placeholder="Password"
         value={password}
         onInput={(e) => setPassword(String((e.target as any).value))}
@@ -115,7 +115,7 @@ export function EmailSignupForm(props: EmailSignupFormProps) {
       <button
         type="submit"
         disabled={isLoading || isDisabled}
-        className="inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-none focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
+        className="inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-hidden focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
       >
         {isLoading ? 'Please wait...' : 'Continue to Verify Email'}
       </button>
diff --git a/src/components/AuthenticationFlow/ForgotPasswordForm.tsx b/src/components/AuthenticationFlow/ForgotPasswordForm.tsx
index b89e98890..7096ffa95 100644
--- a/src/components/AuthenticationFlow/ForgotPasswordForm.tsx
+++ b/src/components/AuthenticationFlow/ForgotPasswordForm.tsx
@@ -33,7 +33,7 @@ export function ForgotPasswordForm() {
       <input
         type="email"
         name="email"
-        className="mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+        className="mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
         required
         placeholder="Email Address"
         value={email}
@@ -55,7 +55,7 @@ export function ForgotPasswordForm() {
       <button
         type="submit"
         disabled={isLoading}
-        className="mt-3 inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-none focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
+        className="mt-3 inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-hidden focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
       >
         {isLoading ? 'Please wait...' : 'Continue'}
       </button>
diff --git a/src/components/AuthenticationFlow/GitHubButton.tsx b/src/components/AuthenticationFlow/GitHubButton.tsx
index 5ea5017e2..faa331b28 100644
--- a/src/components/AuthenticationFlow/GitHubButton.tsx
+++ b/src/components/AuthenticationFlow/GitHubButton.tsx
@@ -143,7 +143,7 @@ export function GitHubButton(props: GitHubButtonProps) {
     <>
       <button
         className={cn(
-          'inline-flex h-10 w-full items-center justify-center gap-2 rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none hover:border-gray-400 hover:bg-gray-50 focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60',
+          'inline-flex h-10 w-full items-center justify-center gap-2 rounded-sm border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-hidden hover:border-gray-400 hover:bg-gray-50 focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60',
           className,
         )}
         disabled={isLoading || isDisabled}
diff --git a/src/components/AuthenticationFlow/GoogleButton.tsx b/src/components/AuthenticationFlow/GoogleButton.tsx
index 7af4a8d24..69b806b68 100644
--- a/src/components/AuthenticationFlow/GoogleButton.tsx
+++ b/src/components/AuthenticationFlow/GoogleButton.tsx
@@ -153,7 +153,7 @@ export function GoogleButton(props: GoogleButtonProps) {
     <>
       <button
         className={cn(
-          'inline-flex h-10 w-full items-center justify-center gap-2 rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none hover:border-gray-400 hover:bg-gray-50 focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60',
+          'inline-flex h-10 w-full items-center justify-center gap-2 rounded-sm border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-hidden hover:border-gray-400 hover:bg-gray-50 focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60',
           className,
         )}
         disabled={isLoading || isDisabled}
diff --git a/src/components/AuthenticationFlow/LinkedInButton.tsx b/src/components/AuthenticationFlow/LinkedInButton.tsx
index 32c6e2b8d..3217f4b68 100644
--- a/src/components/AuthenticationFlow/LinkedInButton.tsx
+++ b/src/components/AuthenticationFlow/LinkedInButton.tsx
@@ -152,7 +152,7 @@ export function LinkedInButton(props: LinkedInButtonProps) {
     <>
       <button
         className={cn(
-          'inline-flex h-10 w-full items-center justify-center gap-2 rounded border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-none hover:border-gray-400 focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60',
+          'inline-flex h-10 w-full items-center justify-center gap-2 rounded-sm border border-slate-300 bg-white p-2 text-sm font-medium text-black outline-hidden hover:border-gray-400 focus:ring-2 focus:ring-[#333] focus:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-60',
           className,
         )}
         disabled={isLoading || isDisabled}
diff --git a/src/components/AuthenticationFlow/ResetPasswordForm.tsx b/src/components/AuthenticationFlow/ResetPasswordForm.tsx
index eaf378388..5e064ca29 100644
--- a/src/components/AuthenticationFlow/ResetPasswordForm.tsx
+++ b/src/components/AuthenticationFlow/ResetPasswordForm.tsx
@@ -61,7 +61,7 @@ export function ResetPasswordForm() {
     <form className="mx-auto w-full" onSubmit={handleSubmit}>
       <input
         type="password"
-        className="mb-2 mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+        className="mb-2 mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
         required
         minLength={6}
         placeholder="New Password"
@@ -71,7 +71,7 @@ export function ResetPasswordForm() {
 
       <input
         type="password"
-        className="mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+        className="mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden transition duration-150 ease-in-out placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
         required
         minLength={6}
         placeholder="Confirm New Password"
@@ -88,7 +88,7 @@ export function ResetPasswordForm() {
       <button
         type="submit"
         disabled={isLoading}
-        className="mt-2 inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-none focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
+        className="mt-2 inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-hidden focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
       >
         {isLoading ? 'Please wait...' : 'Reset Password'}
       </button>
diff --git a/src/components/Befriend.tsx b/src/components/Befriend.tsx
index 10c8e6ff9..548d0fa77 100644
--- a/src/components/Befriend.tsx
+++ b/src/components/Befriend.tsx
@@ -125,7 +125,7 @@ export function Befriend() {
         <div>
           <a
             href="/"
-            className="flex-grow cursor-pointer rounded-lg bg-gray-200 px-3 py-2 text-center"
+            className="grow cursor-pointer rounded-lg bg-gray-200 px-3 py-2 text-center"
           >
             Back to home
           </a>
@@ -141,7 +141,7 @@ export function Befriend() {
   const isMe = currentUser?.id === user.id;
 
   return (
-    <div className="container !max-w-[400px] text-center">
+    <div className="container max-w-[400px]! text-center">
       <img
         alt={'join team'}
         src={userAvatar}
@@ -169,7 +169,7 @@ export function Befriend() {
                 });
               }}
               type="button"
-              className="w-full flex-grow cursor-pointer rounded-lg bg-black px-3 py-2 text-center text-white disabled:cursor-not-allowed disabled:opacity-40"
+              className="w-full grow cursor-pointer rounded-lg bg-black px-3 py-2 text-center text-white disabled:cursor-not-allowed disabled:opacity-40"
             >
               {isMe ? "You can't add yourself" : 'Add Friend'}
             </button>
@@ -177,7 +177,7 @@ export function Befriend() {
 
           {user.status === 'sent' && (
             <>
-              <span className="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border  border-gray-300 px-3 py-2 text-center text-black">
+              <span className="flex w-full grow cursor-default items-center justify-center rounded-lg border  border-gray-300 px-3 py-2 text-center text-black">
                 <CheckIcon additionalClasses="mr-2 h-4 w-4" />
                 Request Sent
               </span>
@@ -188,7 +188,7 @@ export function Befriend() {
                     setIsConfirming(true);
                   }}
                   type="button"
-                  className="flex w-full flex-grow cursor-pointer items-center justify-center rounded-lg border border-red-600 bg-red-600 px-3 py-2 text-center text-white hover:bg-red-700"
+                  className="flex w-full grow cursor-pointer items-center justify-center rounded-lg border border-red-600 bg-red-600 px-3 py-2 text-center text-white hover:bg-red-700"
                 >
                   <DeleteUserIcon additionalClasses="mr-2 h-[19px] w-[19px]" />
                   Withdraw Request
@@ -196,7 +196,7 @@ export function Befriend() {
               )}
 
               {isConfirming && (
-                <span className="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
+                <span className="flex w-full grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
                   Are you sure?{' '}
                   <button
                     className="ml-2 text-red-700 underline"
@@ -225,7 +225,7 @@ export function Befriend() {
 
           {user.status === 'accepted' && (
             <>
-              <span className="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border  border-gray-300 px-3 py-2 text-center text-black">
+              <span className="flex w-full grow cursor-default items-center justify-center rounded-lg border  border-gray-300 px-3 py-2 text-center text-black">
                 <AddedUserIcon additionalClasses="mr-2 h-5 w-5" />
                 You are friends
               </span>
@@ -236,7 +236,7 @@ export function Befriend() {
                     setIsConfirming(true);
                   }}
                   type="button"
-                  className="flex w-full flex-grow cursor-pointer items-center justify-center rounded-lg border border-red-600 bg-red-600 px-3 py-2 text-center text-white hover:bg-red-700"
+                  className="flex w-full grow cursor-pointer items-center justify-center rounded-lg border border-red-600 bg-red-600 px-3 py-2 text-center text-white hover:bg-red-700"
                 >
                   <DeleteUserIcon additionalClasses="mr-2 h-[19px] w-[19px]" />
                   Remove Friend
@@ -244,7 +244,7 @@ export function Befriend() {
               )}
 
               {isConfirming && (
-                <span className="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
+                <span className="flex w-full grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
                   Are you sure?{' '}
                   <button
                     className="ml-2 text-red-700 underline"
@@ -271,12 +271,12 @@ export function Befriend() {
 
           {user.status === 'rejected' && (
             <>
-              <span className="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-gray-300 px-3 py-2 text-center text-black">
+              <span className="flex w-full grow cursor-default items-center justify-center rounded-lg border border-gray-300 px-3 py-2 text-center text-black">
                 <DeleteUserIcon additionalClasses="mr-2 h-4 w-4" />
                 Request Rejected
               </span>
 
-              <span className="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
+              <span className="flex w-full grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
                 Changed your mind?{' '}
                 <button
                   className="ml-2 text-red-700 underline"
@@ -296,7 +296,7 @@ export function Befriend() {
 
           {user.status === 'got_rejected' && (
             <>
-              <span className="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-500 px-3 py-2 text-center text-red-500">
+              <span className="flex w-full grow cursor-default items-center justify-center rounded-lg border border-red-500 px-3 py-2 text-center text-red-500">
                 <StopIcon additionalClasses="mr-2 h-4 w-4" />
                 Request Rejected
               </span>
@@ -311,7 +311,7 @@ export function Befriend() {
                     pageProgressMessage.set('');
                   });
                 }}
-                className="flex w-full flex-grow cursor-pointer items-center justify-center rounded-lg border  border-gray-800 bg-gray-800 px-3 py-2 text-center text-white hover:bg-black"
+                className="flex w-full grow cursor-pointer items-center justify-center rounded-lg border  border-gray-800 bg-gray-800 px-3 py-2 text-center text-white hover:bg-black"
               >
                 <CheckIcon additionalClasses="mr-2 h-4 w-4" />
                 Accept Request
@@ -323,7 +323,7 @@ export function Befriend() {
                     setIsConfirming(true);
                   }}
                   type="button"
-                  className="flex w-full flex-grow cursor-pointer items-center justify-center rounded-lg border border-red-600 bg-white px-3 py-2 text-center text-red-600 hover:bg-red-100"
+                  className="flex w-full grow cursor-pointer items-center justify-center rounded-lg border border-red-600 bg-white px-3 py-2 text-center text-red-600 hover:bg-red-100"
                 >
                   <DeleteUserIcon additionalClasses="mr-2 h-[19px] w-[19px]" />
                   Reject Request
@@ -331,7 +331,7 @@ export function Befriend() {
               )}
 
               {isConfirming && (
-                <span className="flex w-full flex-grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
+                <span className="flex w-full grow cursor-default items-center justify-center rounded-lg border border-red-600 px-3 py-2.5 text-center text-sm text-red-600">
                   Are you sure?{' '}
                   <button
                     className="ml-2 text-red-700 underline"
diff --git a/src/components/BestPracticeHeader.astro b/src/components/BestPracticeHeader.astro
index 919a5aea7..df7a253d6 100644
--- a/src/components/BestPracticeHeader.astro
+++ b/src/components/BestPracticeHeader.astro
@@ -27,7 +27,7 @@ const isBestPracticeReady = !isUpcoming;
         <MarkFavorite
           resourceId={bestPracticeId}
           resourceType="best-practice"
-          className="text-gray-500 !opacity-100 hover:text-gray-600 [&>svg]:stroke-[0.4] [&>svg]:stroke-gray-400 hover:[&>svg]:stroke-gray-600 [&>svg]:h-4 [&>svg]:w-4 sm:[&>svg]:h-5 sm:[&>svg]:w-5 ml-1.5 relative focus:outline-0"
+          className="text-gray-500 opacity-100! hover:text-gray-600 [&>svg]:stroke-[0.4] [&>svg]:stroke-gray-400 [&>svg]:hover:stroke-gray-600 [&>svg]:h-4 [&>svg]:w-4 sm:[&>svg]:h-5 sm:[&>svg]:w-5 ml-1.5 relative focus:outline-0"
           client:load
         />
       </h1>
diff --git a/src/components/Changelog/ChangelogItem.astro b/src/components/Changelog/ChangelogItem.astro
index f7384e36e..7b61fb5f3 100644
--- a/src/components/Changelog/ChangelogItem.astro
+++ b/src/components/Changelog/ChangelogItem.astro
@@ -17,11 +17,11 @@ const formattedDate = DateTime.fromISO(frontmatter.date).toFormat(
 
 <div class='relative mb-6' id={changelog.id}>
   <span
-    class='absolute -left-6 top-2 h-2 w-2 flex-shrink-0 rounded-full bg-gray-300'
+    class='absolute -left-6 top-2 h-2 w-2 shrink-0 rounded-full bg-gray-300'
   ></span>
 
   <div class='mb-3 flex flex-col sm:flex-row items-start sm:items-center gap-0.5 sm:gap-2'>
-    <span class='flex-shrink-0 text-xs tracking-wide text-gray-400'>
+    <span class='shrink-0 text-xs tracking-wide text-gray-400'>
       {formattedDate}
     </span>
     <span class='truncate text-base font-medium text-balance'>
diff --git a/src/components/Changelog/ChangelogLaunch.astro b/src/components/Changelog/ChangelogLaunch.astro
index 84ae93840..c75720ca1 100644
--- a/src/components/Changelog/ChangelogLaunch.astro
+++ b/src/components/Changelog/ChangelogLaunch.astro
@@ -6,13 +6,13 @@ const formattedDate = DateTime.fromISO('2024-09-13').toFormat('dd LLL, yyyy');
 
 <div class='relative mb-6'>
   <span
-    class='absolute -left-6 top-2 h-2 w-2 flex-shrink-0 rounded-full bg-gray-300'
+    class='absolute -left-6 top-2 h-2 w-2 shrink-0 rounded-full bg-gray-300'
   ></span>
 
   <div
     class='mb-3 flex flex-col items-start gap-0.5 sm:flex-row sm:items-center sm:gap-2'
   >
-    <span class='flex-shrink-0 text-xs tracking-wide text-gray-400'>
+    <span class='shrink-0 text-xs tracking-wide text-gray-400'>
       {formattedDate}
     </span>
     <span class='truncate text-balance text-base font-medium'>
diff --git a/src/components/ChangelogBanner.astro b/src/components/ChangelogBanner.astro
index cea4317c4..e1c2d2edf 100644
--- a/src/components/ChangelogBanner.astro
+++ b/src/components/ChangelogBanner.astro
@@ -7,7 +7,7 @@ const top10Changelogs = allChangelogs.slice(0, 10);
 ---
 
 <div class='border-t bg-white py-6 text-left sm:py-16 sm:text-center'>
-  <div class='container !max-w-[650px]'>
+  <div class='container max-w-[650px]!'>
     <p class='text-2xl font-bold sm:text-5xl'>
       <img
         src='/images/gifs/rocket.gif'
@@ -40,10 +40,10 @@ const top10Changelogs = allChangelogs.slice(0, 10);
                   href={`/changelog#${changelog.id}`}
                   class='flex flex-col items-start sm:flex-row sm:items-center'
                 >
-                  <span class='flex-shrink-0 pr-0 text-right text-sm tracking-wide text-gray-400 sm:w-[120px] sm:pr-4'>
+                  <span class='shrink-0 pr-0 text-right text-sm tracking-wide text-gray-400 sm:w-[120px] sm:pr-4'>
                     {formattedDate}
                   </span>
-                  <span class='hidden h-3 w-3 flex-shrink-0 rounded-full bg-gray-300 sm:block' />
+                  <span class='hidden h-3 w-3 shrink-0 rounded-full bg-gray-300 sm:block' />
                   <span class='text-balance text-base font-medium text-gray-900 sm:pl-8'>
                     {changelog.frontmatter.title}
                   </span>
diff --git a/src/components/CommandMenu/CommandMenu.tsx b/src/components/CommandMenu/CommandMenu.tsx
index b944f5029..7ddc3ea1f 100644
--- a/src/components/CommandMenu/CommandMenu.tsx
+++ b/src/components/CommandMenu/CommandMenu.tsx
@@ -194,13 +194,13 @@ export function CommandMenu() {
   return (
     <div className="fixed left-0 right-0 top-0 z-50 flex h-full justify-center overflow-y-auto overflow-x-hidden bg-black/50">
       <div className="relative top-0 h-full w-full max-w-lg p-2 sm:mt-20 md:h-auto">
-        <div className="relative rounded-lg bg-white shadow" ref={modalRef}>
+        <div className="relative rounded-lg bg-white shadow-sm" ref={modalRef}>
           <input
             ref={inputRef}
             autoFocus={true}
             type="text"
             value={searchedText}
-            className="w-full rounded-t-md border-b p-4 text-sm focus:bg-gray-50 focus:outline-none"
+            className="w-full rounded-t-md border-b p-4 text-sm focus:bg-gray-50 focus:outline-hidden"
             placeholder="Search roadmaps, guides or pages .."
             autoComplete="off"
             onInput={(e) => {
@@ -249,7 +249,7 @@ export function CommandMenu() {
                     )}
                     <a
                       className={cn(
-                        'flex w-full items-center rounded p-2 text-sm',
+                        'flex w-full items-center rounded-sm p-2 text-sm',
                         counter === activeCounter ? 'bg-gray-100' : '',
                       )}
                       onMouseOver={() => setActiveCounter(counter)}
diff --git a/src/components/CreateTeam/SelectRoadmapModal.tsx b/src/components/CreateTeam/SelectRoadmapModal.tsx
index 4642f9a40..aa1433058 100644
--- a/src/components/CreateTeam/SelectRoadmapModal.tsx
+++ b/src/components/CreateTeam/SelectRoadmapModal.tsx
@@ -68,11 +68,11 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
   );
 
   return (
-    <div className="fixed left-0 right-0 top-0 z-[100] h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
+    <div className="fixed left-0 right-0 top-0 z-100 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
       <div className="relative mx-auto h-full w-full max-w-2xl p-4 md:h-auto">
         <div
           ref={popupBodyEl}
-          className="popup-body relative mt-4 overflow-hidden rounded-lg bg-white shadow"
+          className="popup-body relative mt-4 overflow-hidden rounded-lg bg-white shadow-sm"
         >
           <button
             type="button"
@@ -86,7 +86,7 @@ export function SelectRoadmapModal(props: SelectRoadmapModalProps) {
             ref={searchInputEl}
             type="text"
             placeholder="Search roadmaps"
-            className="block w-full border-b px-5 pb-3.5 pt-4 outline-none placeholder:text-gray-400"
+            className="block w-full border-b px-5 pb-3.5 pt-4 outline-hidden placeholder:text-gray-400"
             value={searchText}
             onInput={(e) => setSearchText((e.target as HTMLInputElement).value)}
           />
diff --git a/src/components/CreateTeam/Step0.tsx b/src/components/CreateTeam/Step0.tsx
index f09102752..4143ff507 100644
--- a/src/components/CreateTeam/Step0.tsx
+++ b/src/components/CreateTeam/Step0.tsx
@@ -76,7 +76,7 @@ export function Step0(props: Step0Props) {
         {validTeamTypes.map((validTeamType) => (
           <button
             key={validTeamType.value}
-            className={`flex flex-grow flex-col items-center rounded-lg border px-5 pb-10 pt-12 ${
+            className={`flex grow flex-col items-center rounded-lg border px-5 pb-10 pt-12 ${
               validTeamType.value == selectedTeamType
                 ? 'border-gray-400 bg-gray-100'
                 : 'border-gray-300 hover:border-gray-400 hover:bg-gray-50'
diff --git a/src/components/CreateTeam/Step2.tsx b/src/components/CreateTeam/Step2.tsx
index 9efc3174e..7cf981c48 100644
--- a/src/components/CreateTeam/Step2.tsx
+++ b/src/components/CreateTeam/Step2.tsx
@@ -50,7 +50,7 @@ export function Step2(props: Step2Props) {
             onClick={onNext}
             disabled={teamResourceConfig.length !== 0}
             className={
-              'flex-grow rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-500 hover:border-gray-400 hover:text-black md:flex-auto disabled:opacity-50 disabled:pointer-events-none'
+              'grow rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-500 hover:border-gray-400 hover:text-black md:flex-auto disabled:opacity-50 disabled:pointer-events-none'
             }
           >
             Skip for Now
diff --git a/src/components/CreateTeam/Step3.tsx b/src/components/CreateTeam/Step3.tsx
index e465fcfcf..b6a0085b6 100644
--- a/src/components/CreateTeam/Step3.tsx
+++ b/src/components/CreateTeam/Step3.tsx
@@ -109,7 +109,7 @@ export function Step3(props: Step3Props) {
 
                   setUsers(newUsers);
                 }}
-                className="flex-grow rounded-md border border-gray-200 bg-white px-4 py-2 text-gray-900"
+                className="grow rounded-md border border-gray-200 bg-white px-4 py-2 text-gray-900"
               />
               <RoleDropdown
                 selectedRole={user.role}
@@ -180,7 +180,7 @@ export function Step3(props: Step3Props) {
             onClick={onNext}
             disabled={users.filter((u) => u.email).length !== 0}
             className={
-              'rounded-md flex-grow md:flex-auto border border-gray-300 bg-white px-4 py-2 text-gray-500 hover:border-gray-400 hover:text-black disabled:opacity-50 disabled:pointer-events-none'
+              'rounded-md grow md:flex-auto border border-gray-300 bg-white px-4 py-2 text-gray-500 hover:border-gray-400 hover:text-black disabled:opacity-50 disabled:pointer-events-none'
             }
           >
             Skip for Now
diff --git a/src/components/CreateTeam/UpdateTeamResourceModal.tsx b/src/components/CreateTeam/UpdateTeamResourceModal.tsx
index 9489d1278..253f621b7 100644
--- a/src/components/CreateTeam/UpdateTeamResourceModal.tsx
+++ b/src/components/CreateTeam/UpdateTeamResourceModal.tsx
@@ -148,12 +148,12 @@ export function UpdateTeamResourceModal(props: ProgressMapProps) {
   }, []);
 
   return (
-    <div className="fixed left-0 right-0 top-0 z-[100] h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
+    <div className="fixed left-0 right-0 top-0 z-100 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
       <div className="relative mx-auto h-full w-full max-w-4xl p-4 md:h-auto">
         <div
           id={'customized-roadmap'}
           ref={popupBodyEl}
-          className="popup-body relative rounded-lg bg-white shadow"
+          className="popup-body relative rounded-lg bg-white shadow-sm"
         >
           <div
             className={
diff --git a/src/components/CustomRoadmap/EmbedRoadmapModal.tsx b/src/components/CustomRoadmap/EmbedRoadmapModal.tsx
index 8e3085e2c..0de87811f 100644
--- a/src/components/CustomRoadmap/EmbedRoadmapModal.tsx
+++ b/src/components/CustomRoadmap/EmbedRoadmapModal.tsx
@@ -53,7 +53,7 @@ export function EmbedRoadmapModal(props: ShareRoadmapModalProps) {
       <div className="flex items-center justify-between px-4 pb-4 pt-2">
         <button
           className={cn(
-            'flex h-9 w-full items-center justify-center rounded-md border border-transparent px-4 py-2 text-sm font-medium text-white outline-none',
+            'flex h-9 w-full items-center justify-center rounded-md border border-transparent px-4 py-2 text-sm font-medium text-white outline-hidden',
             {
               'bg-green-500 hover:bg-green-600 focus:bg-green-600': isCopied,
               'bg-gray-900 hover:bg-gray-800 focus:bg-gray-800': !isCopied,
diff --git a/src/components/CustomRoadmap/PersonalRoadmapActionDropdown.tsx b/src/components/CustomRoadmap/PersonalRoadmapActionDropdown.tsx
index 2735de5fb..401435436 100644
--- a/src/components/CustomRoadmap/PersonalRoadmapActionDropdown.tsx
+++ b/src/components/CustomRoadmap/PersonalRoadmapActionDropdown.tsx
@@ -34,7 +34,7 @@ export function PersonalRoadmapActionDropdown(
       <button
         disabled={false}
         onClick={() => setIsOpen(!isOpen)}
-        className="flex items-center gap-1 rounded-md border border-gray-300 bg-white px-2 py-1.5 text-xs hover:bg-gray-50 focus:outline-none sm:hidden"
+        className="flex items-center gap-1 rounded-md border border-gray-300 bg-white px-2 py-1.5 text-xs hover:bg-gray-50 focus:outline-hidden sm:hidden"
       >
         <MoreVertical size={14} />
         Options
@@ -53,7 +53,7 @@ export function PersonalRoadmapActionDropdown(
                     setIsOpen(false);
                     onUpdateSharing();
                   }}
-                  className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+                  className="flex w-full cursor-pointer items-center rounded-sm p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
                 >
                   <Lock size={14} className="mr-2" />
                   Sharing
@@ -67,7 +67,7 @@ export function PersonalRoadmapActionDropdown(
                     setIsOpen(false);
                     onCustomize();
                   }}
-                  className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+                  className="flex w-full cursor-pointer items-center rounded-sm p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
                 >
                   <Shapes size={14} className="mr-2" />
                   Customize
@@ -81,7 +81,7 @@ export function PersonalRoadmapActionDropdown(
                     setIsOpen(false);
                     onDelete();
                   }}
-                  className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+                  className="flex w-full cursor-pointer items-center rounded-sm p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
                 >
                   <Trash2 size={14} className="mr-2" />
                   Delete
diff --git a/src/components/CustomRoadmap/PersonalRoadmapList.tsx b/src/components/CustomRoadmap/PersonalRoadmapList.tsx
index c50b780de..515aecc68 100644
--- a/src/components/CustomRoadmap/PersonalRoadmapList.tsx
+++ b/src/components/CustomRoadmap/PersonalRoadmapList.tsx
@@ -176,7 +176,7 @@ function CustomRoadmapItem(props: CustomRoadmapItemProps) {
         <a
           href={editorLink}
           className={
-            'ml-2 flex items-center gap-2 rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-xs text-black hover:bg-gray-50 focus:outline-none'
+            'ml-2 flex items-center gap-2 rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-xs text-black hover:bg-gray-50 focus:outline-hidden'
           }
           target={'_blank'}
         >
@@ -186,7 +186,7 @@ function CustomRoadmapItem(props: CustomRoadmapItemProps) {
         <a
           href={`/r/${roadmap?.slug}`}
           className={
-            'ml-2 flex items-center gap-2 rounded-md border border-blue-400 bg-white px-2 py-1.5 text-xs text-blue-600 hover:bg-blue-50 focus:outline-none'
+            'ml-2 flex items-center gap-2 rounded-md border border-blue-400 bg-white px-2 py-1.5 text-xs text-blue-600 hover:bg-blue-50 focus:outline-hidden'
           }
           target={'_blank'}
         >
diff --git a/src/components/CustomRoadmap/RoadmapActionButton.tsx b/src/components/CustomRoadmap/RoadmapActionButton.tsx
index 59a65e8be..145813705 100644
--- a/src/components/CustomRoadmap/RoadmapActionButton.tsx
+++ b/src/components/CustomRoadmap/RoadmapActionButton.tsx
@@ -32,7 +32,7 @@ export function RoadmapActionButton(props: RoadmapActionButtonProps) {
       {isOpen && (
         <div
           ref={menuRef}
-          className="align-right absolute right-0 top-full z-[9999] mt-1 w-[140px] rounded-md bg-slate-800 px-2 py-2 text-white shadow-md"
+          className="align-right absolute right-0 top-full z-9999 mt-1 w-[140px] rounded-md bg-slate-800 px-2 py-2 text-white shadow-md"
         >
           <ul>
             {onCustomize && (
@@ -42,7 +42,7 @@ export function RoadmapActionButton(props: RoadmapActionButtonProps) {
                     setIsOpen(false);
                     onCustomize();
                   }}
-                  className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+                  className="flex w-full cursor-pointer items-center rounded-sm p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
                 >
                   <PenSquare size={14} className="mr-2" />
                   Edit
@@ -56,7 +56,7 @@ export function RoadmapActionButton(props: RoadmapActionButtonProps) {
                     setIsOpen(false);
                     onUpdateSharing();
                   }}
-                  className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+                  className="flex w-full cursor-pointer items-center rounded-sm p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
                 >
                   <Lock size={14} className="mr-2" />
                   Sharing
@@ -70,7 +70,7 @@ export function RoadmapActionButton(props: RoadmapActionButtonProps) {
                     setIsOpen(false);
                     onDelete();
                   }}
-                  className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+                  className="flex w-full cursor-pointer items-center rounded-sm p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
                 >
                   <Trash2 size={14} className="mr-2" />
                   Delete
diff --git a/src/components/CustomRoadmap/ShareRoadmapModal.tsx b/src/components/CustomRoadmap/ShareRoadmapModal.tsx
index 271918c22..429589dc8 100644
--- a/src/components/CustomRoadmap/ShareRoadmapModal.tsx
+++ b/src/components/CustomRoadmap/ShareRoadmapModal.tsx
@@ -128,7 +128,7 @@ export function ShareRoadmapModal(props: ShareRoadmapModalProps) {
       <div className="flex items-center justify-between p-4">
         <button
           disabled={isLoading}
-          className="flex h-9 items-center rounded-md border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-black outline-none hover:border-gray-300 hover:bg-gray-50 focus:border-gray-300 focus:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-70"
+          className="flex h-9 items-center rounded-md border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-black outline-hidden hover:border-gray-300 hover:bg-gray-50 focus:border-gray-300 focus:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-70"
           onClick={onClose}
         >
           {isLoading ? (
@@ -141,7 +141,7 @@ export function ShareRoadmapModal(props: ShareRoadmapModalProps) {
           )}
         </button>
         <button
-          className="flex h-9 items-center justify-center rounded-md border border-transparent bg-gray-900 px-4 py-2 text-sm font-medium text-white outline-none hover:bg-gray-800 focus:bg-gray-800"
+          className="flex h-9 items-center justify-center rounded-md border border-transparent bg-gray-900 px-4 py-2 text-sm font-medium text-white outline-hidden hover:bg-gray-800 focus:bg-gray-800"
           onClick={handleCopy}
         >
           {isCopied ? (
diff --git a/src/components/CustomRoadmap/SharedRoadmapList.tsx b/src/components/CustomRoadmap/SharedRoadmapList.tsx
index 35ef9946d..27e3c4dcc 100644
--- a/src/components/CustomRoadmap/SharedRoadmapList.tsx
+++ b/src/components/CustomRoadmap/SharedRoadmapList.tsx
@@ -92,7 +92,7 @@ export function SharedRoadmapList(props: SharedRoadmapListProps) {
                       >
                         <a
                           href={`/r/=${roadmap?.slug}`}
-                          className="group inline-grid w-full grid-cols-[auto,16px] items-center justify-between gap-2 px-3 py-2 text-sm text-gray-600 transition-colors hover:bg-gray-100 hover:text-black"
+                          className="group inline-grid w-full grid-cols-[auto_16px] items-center justify-between gap-2 px-3 py-2 text-sm text-gray-600 transition-colors hover:bg-gray-100 hover:text-black"
                           target={'_blank'}
                         >
                           <span className="w-full truncate">
diff --git a/src/components/CustomRoadmap/Showcase/SubmitShowcaseWarning.tsx b/src/components/CustomRoadmap/Showcase/SubmitShowcaseWarning.tsx
index ddf8359af..ff748235e 100644
--- a/src/components/CustomRoadmap/Showcase/SubmitShowcaseWarning.tsx
+++ b/src/components/CustomRoadmap/Showcase/SubmitShowcaseWarning.tsx
@@ -79,7 +79,7 @@ export function SubmitShowcaseWarning(props: SubmitShowcaseWarningProps) {
 
         <div className="mt-4 grid grid-cols-2 gap-2">
           <button
-            className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center text-sm hover:bg-gray-300"
+            className="grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center text-sm hover:bg-gray-300"
             onClick={onClose}
             disabled={submit.isPending}
           >
diff --git a/src/components/Dashboard/DashboardAiRoadmaps.tsx b/src/components/Dashboard/DashboardAiRoadmaps.tsx
index bcc6ca597..abac9166b 100644
--- a/src/components/Dashboard/DashboardAiRoadmaps.tsx
+++ b/src/components/Dashboard/DashboardAiRoadmaps.tsx
@@ -62,7 +62,7 @@ export function DashboardAiRoadmaps(props: DashboardAiRoadmapsProps) {
               <a
                 key={roadmap.id}
                 href={`/ai/${roadmap.slug}`}
-                className="relative truncate rounded-md border bg-white p-2.5 text-left text-sm shadow-sm hover:border-gray-400 hover:bg-gray-50"
+                className="relative truncate rounded-md border bg-white p-2.5 text-left text-sm shadow-xs hover:border-gray-400 hover:bg-gray-50"
               >
                 {roadmap.title}
               </a>
diff --git a/src/components/Dashboard/DashboardCardLink.tsx b/src/components/Dashboard/DashboardCardLink.tsx
index 1e2066e19..88d1e9d23 100644
--- a/src/components/Dashboard/DashboardCardLink.tsx
+++ b/src/components/Dashboard/DashboardCardLink.tsx
@@ -15,7 +15,7 @@ export function DashboardCardLink(props: DashboardCardLinkProps) {
   return (
     <a
       className={cn(
-        'relative mt-4 flex min-h-[220px] flex-col justify-end rounded-lg border border-gray-300 bg-gradient-to-br from-white to-gray-50 py-5 px-6 hover:border-gray-400 hover:from-white hover:to-gray-100',
+        'relative mt-4 flex min-h-[220px] flex-col justify-end rounded-lg border border-gray-300 bg-linear-to-br from-white to-gray-50 py-5 px-6 hover:border-gray-400 hover:from-white hover:to-gray-100',
         className,
       )}
       href={href}
diff --git a/src/components/Dashboard/DashboardCustomProgressCard.tsx b/src/components/Dashboard/DashboardCustomProgressCard.tsx
index 9464d5a73..80b6556d3 100644
--- a/src/components/Dashboard/DashboardCustomProgressCard.tsx
+++ b/src/components/Dashboard/DashboardCustomProgressCard.tsx
@@ -36,7 +36,7 @@ export function DashboardCustomProgressCard(props: DashboardCustomProgressCardPr
   return (
     <a
       href={url}
-      className="group relative flex min-h-[80px] w-full flex-col justify-between overflow-hidden rounded-md border bg-white p-3 text-left text-sm shadow-sm transition-all hover:border-gray-400 hover:bg-gray-50"
+      className="group relative flex min-h-[80px] w-full flex-col justify-between overflow-hidden rounded-md border bg-white p-3 text-left text-sm shadow-xs transition-all hover:border-gray-400 hover:bg-gray-50"
     >
       <h4 className="truncate font-medium text-gray-900">{resourceTitle}</h4>
 
diff --git a/src/components/Dashboard/DashboardProgressCard.tsx b/src/components/Dashboard/DashboardProgressCard.tsx
index d243051b0..71bbdb6b1 100644
--- a/src/components/Dashboard/DashboardProgressCard.tsx
+++ b/src/components/Dashboard/DashboardProgressCard.tsx
@@ -38,7 +38,7 @@ export function DashboardProgressCard(props: DashboardProgressCardProps) {
       key={resourceId}
       className="group relative flex w-full items-center justify-between overflow-hidden rounded-md border border-gray-300 bg-white px-3 py-2 text-left text-sm transition-all hover:border-gray-400"
     >
-      <span className="flex-grow truncate">{resourceTitle}</span>
+      <span className="grow truncate">{resourceTitle}</span>
       <span className="text-xs text-gray-400">
         {parseInt(progressPercentage, 10)}%
       </span>
diff --git a/src/components/Dashboard/DashboardProjectCard.tsx b/src/components/Dashboard/DashboardProjectCard.tsx
index 81c6614f7..31228576d 100644
--- a/src/components/Dashboard/DashboardProjectCard.tsx
+++ b/src/components/Dashboard/DashboardProjectCard.tsx
@@ -25,7 +25,7 @@ export function DashboardProjectCard(props: DashboardProjectCardProps) {
     >
       <span
         className={cn(
-          'flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-full',
+          'flex h-5 w-5 shrink-0 items-center justify-center rounded-full',
           {
             'border border-green-500 bg-green-500 group-hover:border-green-600 group-hover:bg-green-600':
               status === 'submitted',
@@ -41,8 +41,8 @@ export function DashboardProjectCard(props: DashboardProjectCardProps) {
           />
         )}
       </span>
-      <span className="flex-grow truncate group-hover:underline">{title.replace(/(System)|(Service)/, '')}</span>
-      <span className="flex-shrink-0 bg-transparent text-xs text-gray-400 no-underline">
+      <span className="grow truncate group-hover:underline">{title.replace(/(System)|(Service)/, '')}</span>
+      <span className="shrink-0 bg-transparent text-xs text-gray-400 no-underline">
         {!!startedAt &&
           status === 'started' &&
           getRelativeTimeString(startedAt)}
diff --git a/src/components/Dashboard/DashboardTeamRoadmaps.tsx b/src/components/Dashboard/DashboardTeamRoadmaps.tsx
index 3b7cb7439..c60973e8f 100644
--- a/src/components/Dashboard/DashboardTeamRoadmaps.tsx
+++ b/src/components/Dashboard/DashboardTeamRoadmaps.tsx
@@ -206,7 +206,7 @@ export function DashboardTeamRoadmaps(props: DashboardTeamRoadmapsProps) {
   const roadmapHeading = (
     <div className="mb-3 flex h-[20px] items-center justify-between gap-2 text-xs">
       <h2 className="uppercase text-gray-400">Roadmaps</h2>
-      <span className="mx-3 h-[1px] flex-grow bg-gray-200" />
+      <span className="mx-3 h-[1px] grow bg-gray-200" />
       {canManageCurrentTeam && (
         <a
           href={`/team/roadmaps?t=${teamId}`}
diff --git a/src/components/Dashboard/EmptyStackMessage.tsx b/src/components/Dashboard/EmptyStackMessage.tsx
index 1552da99f..153da548c 100644
--- a/src/components/Dashboard/EmptyStackMessage.tsx
+++ b/src/components/Dashboard/EmptyStackMessage.tsx
@@ -17,7 +17,7 @@ export function EmptyStackMessage(props: EmptyStackMessageProps) {
     <div className="absolute inset-0 flex items-center justify-center rounded-md bg-black/50">
       <div
         className={cn(
-          'flex max-w-[200px] flex-col items-center justify-center rounded-md bg-white p-4 shadow-sm',
+          'flex max-w-[200px] flex-col items-center justify-center rounded-md bg-white p-4 shadow-xs',
           bodyClassName,
         )}
       >
diff --git a/src/components/Dashboard/TeamDashboard.tsx b/src/components/Dashboard/TeamDashboard.tsx
index 8315c3668..6baf1a9e3 100644
--- a/src/components/Dashboard/TeamDashboard.tsx
+++ b/src/components/Dashboard/TeamDashboard.tsx
@@ -111,7 +111,7 @@ export function TeamDashboard(props: TeamDashboardProps) {
 
       <h2 className="mb-3 mt-6 flex h-[20px] items-center justify-between text-xs uppercase text-gray-400">
         Team Members
-        <span className="flex-grow h-[1px] bg-gray-200 mx-3" />
+        <span className="grow h-[1px] bg-gray-200 mx-3" />
         {canManageCurrentTeam && (
           <a
             href={`/team/members?t=${teamId}`}
diff --git a/src/components/DeleteAccount/DeleteAccount.astro b/src/components/DeleteAccount/DeleteAccount.astro
index b2490a763..ffe8e2b7e 100644
--- a/src/components/DeleteAccount/DeleteAccount.astro
+++ b/src/components/DeleteAccount/DeleteAccount.astro
@@ -10,7 +10,7 @@ import DeleteAccountPopup from "./DeleteAccountPopup.astro";
 
 <button
   data-popup='delete-account-popup'
-  class="mt-4 w-full rounded-lg bg-red-600 py-2 text-base font-regular text-white outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-1"
+  class="mt-4 w-full rounded-lg bg-red-600 py-2 text-base font-regular text-white outline-hidden focus:ring-2 focus:ring-red-500 focus:ring-offset-1"
 >
   Delete Account
 </button>
diff --git a/src/components/DeleteAccount/DeleteAccountForm.tsx b/src/components/DeleteAccount/DeleteAccountForm.tsx
index 46e492790..a7f9aedb1 100644
--- a/src/components/DeleteAccount/DeleteAccountForm.tsx
+++ b/src/components/DeleteAccount/DeleteAccountForm.tsx
@@ -53,7 +53,7 @@ export function DeleteAccountForm() {
           type="text"
           name="delete-account"
           id="delete-account"
-          className="mt-2 block w-full rounded-md border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:border-gray-400"
+          className="mt-2 block w-full rounded-md border border-gray-300 px-3 py-2 outline-hidden placeholder:text-gray-400 focus:border-gray-400"
           placeholder={'Type "delete" to confirm'}
           required
           autoFocus
@@ -72,14 +72,14 @@ export function DeleteAccountForm() {
           type="button"
           disabled={isLoading}
           onClick={handleClosePopup}
-          className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center"
+          className="grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center"
         >
           Cancel
         </button>
         <button
           type="submit"
           disabled={isLoading || confirmationText.toUpperCase() !== 'DELETE'}
-          className="flex-grow cursor-pointer rounded-lg bg-red-500 py-2 text-white disabled:opacity-40"
+          className="grow cursor-pointer rounded-lg bg-red-500 py-2 text-white disabled:opacity-40"
         >
           {isLoading ? 'Please wait ..' : 'Confirm'}
         </button>
diff --git a/src/components/DeleteTeamPopup.tsx b/src/components/DeleteTeamPopup.tsx
index e9c96da82..96c27bcf3 100644
--- a/src/components/DeleteTeamPopup.tsx
+++ b/src/components/DeleteTeamPopup.tsx
@@ -73,7 +73,7 @@ export function DeleteTeamPopup(props: DeleteTeamPopupProps) {
         <div className="relative h-full w-full max-w-md p-4 md:h-auto">
           <div
             ref={popupBodyEl}
-            className="popup-body relative rounded-lg bg-white p-4 shadow"
+            className="popup-body relative rounded-lg bg-white p-4 shadow-sm"
           >
             <h2 className="text-2xl font-semibold text-black">Delete Team</h2>
             <p className="text-gray-500">
@@ -90,7 +90,7 @@ export function DeleteTeamPopup(props: DeleteTeamPopupProps) {
                   type="text"
                   name="delete-account"
                   id="delete-account"
-                  className="mt-2 block w-full rounded-md border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:border-gray-400"
+                  className="mt-2 block w-full rounded-md border border-gray-300 px-3 py-2 outline-hidden placeholder:text-gray-400 focus:border-gray-400"
                   placeholder={'Type "delete" to confirm'}
                   required
                   autoFocus
@@ -111,7 +111,7 @@ export function DeleteTeamPopup(props: DeleteTeamPopupProps) {
                   type="button"
                   disabled={isLoading}
                   onClick={handleClosePopup}
-                  className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center"
+                  className="grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center"
                 >
                   Cancel
                 </button>
@@ -120,7 +120,7 @@ export function DeleteTeamPopup(props: DeleteTeamPopupProps) {
                   disabled={
                     isLoading || confirmationText.toUpperCase() !== 'DELETE'
                   }
-                  className="flex-grow cursor-pointer rounded-lg bg-red-500 py-2 text-white disabled:opacity-40"
+                  className="grow cursor-pointer rounded-lg bg-red-500 py-2 text-white disabled:opacity-40"
                 >
                   {isLoading ? 'Please wait ..' : 'Confirm'}
                 </button>
diff --git a/src/components/DiscoverRoadmaps/DiscoverRoadmapSorting.tsx b/src/components/DiscoverRoadmaps/DiscoverRoadmapSorting.tsx
index 3b1c279e0..1c13257e8 100644
--- a/src/components/DiscoverRoadmaps/DiscoverRoadmapSorting.tsx
+++ b/src/components/DiscoverRoadmaps/DiscoverRoadmapSorting.tsx
@@ -41,7 +41,7 @@ export function DiscoverRoadmapSorting(props: DiscoverRoadmapSortingProps) {
 
   return (
     <div
-      className="min-auto relative flex flex-shrink-0 sm:min-w-[140px]"
+      className="min-auto relative flex shrink-0 sm:min-w-[140px]"
       ref={dropdownRef}
     >
       <button
diff --git a/src/components/DiscoverRoadmaps/SearchRoadmap.tsx b/src/components/DiscoverRoadmaps/SearchRoadmap.tsx
index c6acc01a8..f32a4dce4 100644
--- a/src/components/DiscoverRoadmaps/SearchRoadmap.tsx
+++ b/src/components/DiscoverRoadmaps/SearchRoadmap.tsx
@@ -53,7 +53,7 @@ export function SearchRoadmap(props: SearchRoadmapProps) {
           type="text"
           minLength={3}
           placeholder="Type 3 or more characters to search..."
-          className="w-full rounded-md border border-gray-200 px-3 py-2 pl-9 text-sm transition-colors focus:border-black focus:outline-none"
+          className="w-full rounded-md border border-gray-200 px-3 py-2 pl-9 text-sm transition-colors focus:border-black focus:outline-hidden"
           value={term}
           onChange={(e) => setTerm(e.target.value)}
         />
@@ -64,7 +64,7 @@ export function SearchRoadmap(props: SearchRoadmapProps) {
         )}
       </form>
       {total > 0 && (
-        <p className="hidden flex-shrink-0 text-sm text-gray-500 sm:block">
+        <p className="hidden shrink-0 text-sm text-gray-500 sm:block">
           {Intl.NumberFormat('en-US', {
             notation: 'compact',
           }).format(total)}{' '}
diff --git a/src/components/ExploreAIRoadmap/AIRoadmapsList.tsx b/src/components/ExploreAIRoadmap/AIRoadmapsList.tsx
index 7129410e6..0f2b9df41 100644
--- a/src/components/ExploreAIRoadmap/AIRoadmapsList.tsx
+++ b/src/components/ExploreAIRoadmap/AIRoadmapsList.tsx
@@ -35,7 +35,7 @@ export function AIRoadmapsList(props: AIRoadmapsListProps) {
             className="flex min-h-[95px] flex-col rounded-md border transition-colors hover:bg-gray-100"
             target={'_blank'}
           >
-            <h2 className="flex-grow px-2.5 py-2.5 text-base font-medium leading-tight">
+            <h2 className="grow px-2.5 py-2.5 text-base font-medium leading-tight">
               {roadmap.title}
             </h2>
             <div className="flex items-center justify-between gap-2 px-2.5 py-2">
diff --git a/src/components/ExploreAIRoadmap/ExploreAISearch.tsx b/src/components/ExploreAIRoadmap/ExploreAISearch.tsx
index cb3a5999b..bfa46744b 100644
--- a/src/components/ExploreAIRoadmap/ExploreAISearch.tsx
+++ b/src/components/ExploreAIRoadmap/ExploreAISearch.tsx
@@ -46,7 +46,7 @@ export function ExploreAISearch(props: ExploreAISearchProps) {
           name="search"
           type="text"
           placeholder="Type 3 or more characters to search..."
-          className="w-full rounded-md border border-gray-200 px-3 py-2 pl-9 text-sm transition-colors focus:border-black focus:outline-none"
+          className="w-full rounded-md border border-gray-200 px-3 py-2 pl-9 text-sm transition-colors focus:border-black focus:outline-hidden"
           value={term}
           onChange={(e) => setTerm(e.target.value)}
         />
@@ -57,7 +57,7 @@ export function ExploreAISearch(props: ExploreAISearchProps) {
         )}
       </div>
       {total > 0 && (
-        <p className="flex-shrink-0 text-sm text-gray-500 hidden sm:block">
+        <p className="shrink-0 text-sm text-gray-500 hidden sm:block">
           {Intl.NumberFormat('en-US', {
             notation: 'compact',
           }).format(total)}{' '}
diff --git a/src/components/ExploreAIRoadmap/ExploreAISorting.tsx b/src/components/ExploreAIRoadmap/ExploreAISorting.tsx
index 47e11f0c6..0557e1348 100644
--- a/src/components/ExploreAIRoadmap/ExploreAISorting.tsx
+++ b/src/components/ExploreAIRoadmap/ExploreAISorting.tsx
@@ -37,7 +37,7 @@ export function ExploreAISorting(props: ExploreAISortingProps) {
 
   return (
     <div
-      className="min-auto relative flex flex-shrink-0 sm:min-w-[140px]"
+      className="min-auto relative flex shrink-0 sm:min-w-[140px]"
       ref={dropdownRef}
     >
       <button
diff --git a/src/components/FeaturedGuides.astro b/src/components/FeaturedGuides.astro
index 4f0fe733e..00758d772 100644
--- a/src/components/FeaturedGuides.astro
+++ b/src/components/FeaturedGuides.astro
@@ -31,7 +31,7 @@ const sortedGuides: (QuestionGroupType | GuideFileType)[] = [
 
   <a
     href='/guides'
-    class='hidden rounded-full bg-gradient-to-r from-slate-600 to-black px-3 py-2 text-xs font-medium text-white transition-colors hover:from-blue-600 hover:to-blue-800 sm:inline'
+    class='hidden rounded-full bg-linear-to-r from-slate-600 to-black px-3 py-2 text-xs font-medium text-white transition-colors hover:from-blue-600 hover:to-blue-800 sm:inline'
   >
     View All Guides &rarr;
   </a>
diff --git a/src/components/FeaturedVideos.astro b/src/components/FeaturedVideos.astro
index dbd70b792..0c1962c43 100644
--- a/src/components/FeaturedVideos.astro
+++ b/src/components/FeaturedVideos.astro
@@ -19,7 +19,7 @@ const { heading, videos } = Astro.props;
 
   <a
     href='/videos'
-    class='hidden sm:inline transition-colors py-2 px-3 text-xs font-medium rounded-full bg-gradient-to-r from-slate-600 to-black hover:from-blue-600 hover:to-blue-800 text-white'
+    class='hidden sm:inline transition-colors py-2 px-3 text-xs font-medium rounded-full bg-linear-to-r from-slate-600 to-black hover:from-blue-600 hover:to-blue-800 text-white'
   >
     View All Videos &rarr;
   </a>
diff --git a/src/components/Feedback/SubmitFeedbackPopup.tsx b/src/components/Feedback/SubmitFeedbackPopup.tsx
index db78e4c41..cf276509b 100644
--- a/src/components/Feedback/SubmitFeedbackPopup.tsx
+++ b/src/components/Feedback/SubmitFeedbackPopup.tsx
@@ -68,7 +68,7 @@ export function SubmitFeedbackPopup(props: SubmitFeedbackPopupProps) {
       <div className="relative h-full w-full max-w-md p-4 md:h-auto">
         <div
           ref={popupBodyEl}
-          className="popup-body relative rounded-lg bg-white p-4 shadow"
+          className="popup-body relative rounded-lg bg-white p-4 shadow-sm"
         >
           {!isSuccess && (
             <>
@@ -84,7 +84,7 @@ export function SubmitFeedbackPopup(props: SubmitFeedbackPopupProps) {
                     ref={inputEl}
                     name="submit-feedback"
                     id="submit-feedback"
-                    className="mt-2 block min-h-[150px] w-full resize-none rounded-md border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400"
+                    className="mt-2 block min-h-[150px] w-full resize-none rounded-md border border-gray-300 px-3 py-2 outline-hidden placeholder:text-gray-400"
                     placeholder="Enter your feedback"
                     required
                     autoFocus
@@ -105,14 +105,14 @@ export function SubmitFeedbackPopup(props: SubmitFeedbackPopupProps) {
                     type="button"
                     disabled={isLoading}
                     onClick={handleClosePopup}
-                    className="flex-grow cursor-pointer rounded-md bg-gray-200 py-2 text-center"
+                    className="grow cursor-pointer rounded-md bg-gray-200 py-2 text-center"
                   >
                     Cancel
                   </button>
                   <button
                     disabled={isLoading}
                     type="submit"
-                    className="flex-grow cursor-pointer rounded-md bg-black py-2 text-white disabled:opacity-40"
+                    className="grow cursor-pointer rounded-md bg-black py-2 text-white disabled:opacity-40"
                   >
                     {isLoading ? 'Please wait ..' : 'Send'}
                   </button>
@@ -133,7 +133,7 @@ export function SubmitFeedbackPopup(props: SubmitFeedbackPopupProps) {
               <button
                 type="button"
                 onClick={handleClosePopup}
-                className="mt-4 w-full flex-grow cursor-pointer rounded-lg bg-black py-2 text-center text-white disabled:opacity-40"
+                className="mt-4 w-full grow cursor-pointer rounded-lg bg-black py-2 text-center text-white disabled:opacity-40"
               >
                 Close
               </button>
diff --git a/src/components/FrameRenderer/ProgressNudge.tsx b/src/components/FrameRenderer/ProgressNudge.tsx
index 04f2b01c9..cc19fefaa 100644
--- a/src/components/FrameRenderer/ProgressNudge.tsx
+++ b/src/components/FrameRenderer/ProgressNudge.tsx
@@ -88,7 +88,7 @@ export function ProgressNudge(props: ProgressNudgeProps) {
             }}
             className="group relative flex items-center gap-2 rounded-full bg-stone-900 px-3 text-sm text-yellow-400"
           >
-            <Calendar className="h-4 w-4 flex-shrink-0" strokeWidth={2.5} />
+            <Calendar className="h-4 w-4 shrink-0" strokeWidth={2.5} />
           </button>
         )}
         <button
@@ -97,7 +97,7 @@ export function ProgressNudge(props: ProgressNudgeProps) {
           }}
           className="group relative flex items-center gap-2 rounded-full bg-stone-900 px-3 text-sm text-yellow-400"
         >
-          <X className="h-4 w-4 flex-shrink-0" strokeWidth={2.5} />
+          <X className="h-4 w-4 shrink-0" strokeWidth={2.5} />
         </button>
       </div>
     </>
diff --git a/src/components/Friends/EmptyFriends.tsx b/src/components/Friends/EmptyFriends.tsx
index 740ba1904..601a05d77 100644
--- a/src/components/Friends/EmptyFriends.tsx
+++ b/src/components/Friends/EmptyFriends.tsx
@@ -28,7 +28,7 @@ export function EmptyFriends(props: EmptyFriendsProps) {
             }}
             type="text"
             value={befriendUrl}
-            className="w-full border-none bg-transparent px-1.5 outline-none"
+            className="w-full border-none bg-transparent px-1.5 outline-hidden"
             readOnly
           />
           <button
diff --git a/src/components/Friends/FriendProgressItem.tsx b/src/components/Friends/FriendProgressItem.tsx
index da60cbf27..2023066ec 100644
--- a/src/components/Friends/FriendProgressItem.tsx
+++ b/src/components/Friends/FriendProgressItem.tsx
@@ -98,7 +98,7 @@ export function FriendProgressItem(props: FriendProgressItemProps) {
                         progress?.renderer,
                       )
                     }
-                    className="group relative overflow-hidden rounded-md border p-2 hover:border-gray-300 hover:text-black focus:outline-none"
+                    className="group relative overflow-hidden rounded-md border p-2 hover:border-gray-300 hover:text-black focus:outline-hidden"
                     key={progress.resourceId}
                   >
                     <span className="relative z-10 flex items-center justify-between text-sm">
@@ -186,7 +186,7 @@ export function FriendProgressItem(props: FriendProgressItemProps) {
         {friend.status === 'rejected' && (
           <>
             <div
-              className={'flex w-full flex-grow items-center justify-center'}
+              className={'flex w-full grow items-center justify-center'}
             >
               <span className=" flex flex-col items-center text-red-500">
                 <DeleteUserIcon additionalClasses="mr-2 h-8 w-8 mb-1" />
@@ -214,7 +214,7 @@ export function FriendProgressItem(props: FriendProgressItemProps) {
         {friend.status === 'got_rejected' && (
           <>
             <div
-              className={'flex w-full flex-grow items-center justify-center'}
+              className={'flex w-full grow items-center justify-center'}
             >
               <span className=" flex flex-col items-center text-sm text-red-500">
                 <DeleteUserIcon additionalClasses="mr-2 h-8 w-8 mb-1" />
@@ -242,7 +242,7 @@ export function FriendProgressItem(props: FriendProgressItemProps) {
         {friend.status === 'sent' && (
           <>
             <div
-              className={'flex w-full flex-grow items-center justify-center'}
+              className={'flex w-full grow items-center justify-center'}
             >
               <span className=" flex flex-col items-center text-green-500">
                 <AddedUserIcon additionalClasses="mr-2 h-8 w-8 mb-1" />
@@ -296,7 +296,7 @@ export function FriendProgressItem(props: FriendProgressItemProps) {
           <>
             <div
               className={
-                'flex w-full flex-grow flex-col items-center justify-center px-4'
+                'flex w-full grow flex-col items-center justify-center px-4'
               }
             >
               <AddUserIcon additionalClasses="mr-2 h-8 w-8 mb-1 text-green-500" />
diff --git a/src/components/Friends/InviteFriendPopup.tsx b/src/components/Friends/InviteFriendPopup.tsx
index 2121a3ff8..8104c30f2 100644
--- a/src/components/Friends/InviteFriendPopup.tsx
+++ b/src/components/Friends/InviteFriendPopup.tsx
@@ -27,7 +27,7 @@ export function InviteFriendPopup(props: InviteFriendPopupProps) {
       <div className="relative h-full w-full max-w-md p-4 md:h-auto">
         <div
           ref={popupBodyRef}
-          className="popup-body relative rounded-lg bg-white p-4 shadow"
+          className="popup-body relative rounded-lg bg-white p-4 shadow-sm"
         >
           <h3 className="mb-1.5 text-xl font-medium sm:text-2xl">Invite URL</h3>
           <p className="mb-3 hidden text-sm leading-none text-gray-400 sm:block">
@@ -37,7 +37,7 @@ export function InviteFriendPopup(props: InviteFriendPopupProps) {
           <div className="mt-4 flex flex-col gap-2 sm:mt-4">
             <input
               readOnly={true}
-              className="mt-2 block w-full rounded-md border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:border-gray-400"
+              className="mt-2 block w-full rounded-md border border-gray-300 px-3 py-2 outline-hidden placeholder:text-gray-400 focus:border-gray-400"
               value={befriendUrl}
               onClick={(e: MouseEvent<HTMLInputElement>) => {
                 (e?.target as HTMLInputElement)?.select();
diff --git a/src/components/GenerateRoadmap/AITermSuggestionInput.tsx b/src/components/GenerateRoadmap/AITermSuggestionInput.tsx
index 1d183534a..357f0bfd8 100644
--- a/src/components/GenerateRoadmap/AITermSuggestionInput.tsx
+++ b/src/components/GenerateRoadmap/AITermSuggestionInput.tsx
@@ -176,7 +176,7 @@ export function AITermSuggestionInput(props: AITermSuggestionInputProps) {
         type="text"
         value={defaultValue}
         className={cn(
-          'w-full rounded-md border border-gray-400 px-3 py-2.5 pr-8 transition-colors focus:border-black focus:outline-none',
+          'w-full rounded-md border border-gray-400 px-3 py-2.5 pr-8 transition-colors focus:border-black focus:outline-hidden',
           inputClassName,
         )}
         placeholder={placeholder}
@@ -240,7 +240,7 @@ export function AITermSuggestionInput(props: AITermSuggestionInputProps) {
         searchResults.length > 0 &&
         searchedText.length > 0 && (
           <div
-            className="absolute top-full z-50 mt-1 w-full rounded-md border bg-white p-1 shadow"
+            className="absolute top-full z-50 mt-1 w-full rounded-md border bg-white p-1 shadow-sm"
             ref={dropdownRef}
           >
             <div className="flex flex-col">
@@ -250,7 +250,7 @@ export function AITermSuggestionInput(props: AITermSuggestionInputProps) {
                     key={result?._id}
                     type="button"
                     className={cn(
-                      'flex w-full items-start rounded p-2 text-left text-sm',
+                      'flex w-full items-start rounded-sm p-2 text-left text-sm',
                       counter === activeCounter ? 'bg-gray-100' : '',
                     )}
                     onMouseOver={() => setActiveCounter(counter)}
diff --git a/src/components/GenerateRoadmap/GenerateRoadmap.tsx b/src/components/GenerateRoadmap/GenerateRoadmap.tsx
index ccb2cf16f..9db6acef8 100644
--- a/src/components/GenerateRoadmap/GenerateRoadmap.tsx
+++ b/src/components/GenerateRoadmap/GenerateRoadmap.tsx
@@ -507,7 +507,7 @@ export function GenerateRoadmap(props: GenerateRoadmapProps) {
         />
       )}
 
-      <section className="flex flex-grow flex-col bg-gray-100">
+      <section className="flex grow flex-col bg-gray-100">
         <div className="flex items-center justify-center border-b bg-white py-3 sm:py-6">
           {isLoading && (
             <span className="flex items-center gap-2 rounded-full bg-black px-3 py-1 text-white">
@@ -516,7 +516,7 @@ export function GenerateRoadmap(props: GenerateRoadmapProps) {
             </span>
           )}
           {!isLoading && (
-            <div className="container flex flex-grow flex-col items-start">
+            <div className="container flex grow flex-col items-start">
               <AIRoadmapAlert />
               {isKeyOnly && isAuthenticatedUser && (
                 <div className="flex flex-row gap-4">
@@ -606,7 +606,7 @@ export function GenerateRoadmap(props: GenerateRoadmapProps) {
                 <button
                   type={'submit'}
                   className={cn(
-                    'flex min-w-[127px] flex-shrink-0 items-center justify-center gap-2 rounded-md bg-black px-4 py-2 text-white',
+                    'flex min-w-[127px] shrink-0 items-center justify-center gap-2 rounded-md bg-black px-4 py-2 text-white',
                     'disabled:cursor-not-allowed disabled:opacity-50',
                   )}
                   onClick={(e) => {
@@ -732,7 +732,7 @@ export function GenerateRoadmap(props: GenerateRoadmapProps) {
           />
           {!isAuthenticatedUser && (
             <div className="absolute bottom-0 left-0 right-0">
-              <div className="h-80 w-full bg-gradient-to-t from-gray-100 to-transparent" />
+              <div className="h-80 w-full bg-linear-to-t from-gray-100 to-transparent" />
               <div className="bg-gray-100">
                 <div className="mx-auto max-w-[600px] flex-col items-center justify-center bg-gray-100 px-5 pt-px">
                   <div className="mt-8 text-center">
diff --git a/src/components/GenerateRoadmap/OpenAISettings.tsx b/src/components/GenerateRoadmap/OpenAISettings.tsx
index 181a8347b..48957be32 100644
--- a/src/components/GenerateRoadmap/OpenAISettings.tsx
+++ b/src/components/GenerateRoadmap/OpenAISettings.tsx
@@ -32,7 +32,7 @@ export function OpenAISettings(props: OpenAISettingsProps) {
     <div className="p-4">
       <button
         onClick={onBack}
-        className="mb-5 flex items-center gap-1.5 text-sm leading-none opacity-40 transition-opacity hover:opacity-100 focus:outline-none"
+        className="mb-5 flex items-center gap-1.5 text-sm leading-none opacity-40 transition-opacity hover:opacity-100 focus:outline-hidden"
       >
         <ChevronLeft size={16} />
         Back to options
@@ -97,7 +97,7 @@ export function OpenAISettings(props: OpenAISettingsProps) {
             name="openai-api-key"
             id="openai-api-key"
             className={cn(
-              'block w-full rounded-md border border-gray-300 px-3 py-2 text-gray-800 transition-colors focus:border-black focus:outline-none',
+              'block w-full rounded-md border border-gray-300 px-3 py-2 text-gray-800 transition-colors focus:border-black focus:outline-hidden',
               {
                 'border-red-500 bg-red-100 focus:border-red-500': error,
               },
diff --git a/src/components/GenerateRoadmap/PayToBypass.tsx b/src/components/GenerateRoadmap/PayToBypass.tsx
index 204826fb4..7b40c9fff 100644
--- a/src/components/GenerateRoadmap/PayToBypass.tsx
+++ b/src/components/GenerateRoadmap/PayToBypass.tsx
@@ -22,7 +22,7 @@ export function PayToBypass(props: PayToBypassProps) {
     <div className="p-4">
       <button
         onClick={onBack}
-        className="mb-5 flex items-center gap-1.5 text-sm leading-none opacity-40 transition-opacity hover:opacity-100 focus:outline-none"
+        className="mb-5 flex items-center gap-1.5 text-sm leading-none opacity-40 transition-opacity hover:opacity-100 focus:outline-hidden"
       >
         <ChevronLeft size={16} />
         Back to options
@@ -46,7 +46,7 @@ export function PayToBypass(props: PayToBypassProps) {
             id={userId}
             name={userId}
             type="text"
-            className="block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+            className="block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
             value={user?.id}
             readOnly
           />
@@ -59,7 +59,7 @@ export function PayToBypass(props: PayToBypassProps) {
             id={nameId}
             name={nameId}
             type="text"
-            className="block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+            className="block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
             value={user?.name}
             readOnly
           />
@@ -72,7 +72,7 @@ export function PayToBypass(props: PayToBypassProps) {
             id={emailId}
             name={emailId}
             type="email"
-            className="block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+            className="block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
             value={user?.email}
             readOnly
           />
@@ -90,7 +90,7 @@ export function PayToBypass(props: PayToBypassProps) {
             name={amountId}
             type="text"
             required
-            className="block w-full rounded-lg border p-3 py-2 shadow-sm outline-none placeholder:text-sm placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+            className="block w-full rounded-lg border p-3 py-2 shadow-xs outline-hidden placeholder:text-sm placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
             placeholder="How much are you willing to pay for this?"
           />
         </div>
@@ -105,7 +105,7 @@ export function PayToBypass(props: PayToBypassProps) {
             id={roadmapCountId}
             name={roadmapCountId}
             required
-            className="placeholder-text-gray-400 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-sm focus:ring-2 focus:ring-black focus:ring-offset-1"
+            className="placeholder-text-gray-400 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden placeholder:text-sm focus:ring-2 focus:ring-black focus:ring-offset-1"
             placeholder="How many roadmaps you will be generating (daily, or monthly)?"
           />
         </div>
@@ -117,7 +117,7 @@ export function PayToBypass(props: PayToBypassProps) {
             id={usageId}
             name={usageId}
             required
-            className="placeholder-text-gray-400 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-sm focus:ring-2 focus:ring-black focus:ring-offset-1"
+            className="placeholder-text-gray-400 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden placeholder:text-sm focus:ring-2 focus:ring-black focus:ring-offset-1"
             placeholder="How will you be using this"
           />
         </div>
@@ -131,7 +131,7 @@ export function PayToBypass(props: PayToBypassProps) {
           <textarea
             id={feedbackId}
             name={feedbackId}
-            className="placeholder-text-gray-400 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-sm focus:ring-2 focus:ring-black focus:ring-offset-1"
+            className="placeholder-text-gray-400 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden placeholder:text-sm focus:ring-2 focus:ring-black focus:ring-offset-1"
             placeholder="Do you have any feedback?"
           />
         </div>
diff --git a/src/components/GenerateRoadmap/ReferYourFriend.tsx b/src/components/GenerateRoadmap/ReferYourFriend.tsx
index 045188e14..819b7bdae 100644
--- a/src/components/GenerateRoadmap/ReferYourFriend.tsx
+++ b/src/components/GenerateRoadmap/ReferYourFriend.tsx
@@ -32,7 +32,7 @@ export function ReferYourFriend(props: ReferYourFriendProps) {
     <div className="p-4">
       <button
         onClick={onBack}
-        className="mb-5 flex items-center gap-1.5 text-sm leading-none opacity-40 transition-opacity hover:opacity-100 focus:outline-none"
+        className="mb-5 flex items-center gap-1.5 text-sm leading-none opacity-40 transition-opacity hover:opacity-100 focus:outline-hidden"
       >
         <ChevronLeft size={16} />
         Back to options
@@ -49,7 +49,7 @@ export function ReferYourFriend(props: ReferYourFriendProps) {
       <label className="mt-4 flex flex-col gap-2">
         <input
           ref={inputRef}
-          className="w-full rounded-md border bg-gray-100 p-2 px-2.5 text-gray-700 focus:outline-none"
+          className="w-full rounded-md border bg-gray-100 p-2 px-2.5 text-gray-700 focus:outline-hidden"
           value={referralLink}
           readOnly={true}
           onClick={handleCopy}
diff --git a/src/components/GenerateRoadmap/RoadmapTopicDetail.tsx b/src/components/GenerateRoadmap/RoadmapTopicDetail.tsx
index 560d9e940..84a4e0957 100644
--- a/src/components/GenerateRoadmap/RoadmapTopicDetail.tsx
+++ b/src/components/GenerateRoadmap/RoadmapTopicDetail.tsx
@@ -124,7 +124,7 @@ export function RoadmapTopicDetail(props: RoadmapTopicDetailProps) {
   const openAIKey = getOpenAIKey();
 
   return (
-    <div className={'relative z-[92]'}>
+    <div className={'relative z-92'}>
       <div
         ref={topicRef}
         tabIndex={0}
diff --git a/src/components/GetStarted/RoadmapCard.tsx b/src/components/GetStarted/RoadmapCard.tsx
index 7fa6b44da..3fb2c6821 100644
--- a/src/components/GetStarted/RoadmapCard.tsx
+++ b/src/components/GetStarted/RoadmapCard.tsx
@@ -20,7 +20,7 @@ export function RoadmapCard(props: RoadmapCardProps) {
 
   if (isUpcoming) {
     return (
-      <div className="group relative block rounded-xl border border-gray-300 bg-gradient-to-br from-gray-100 to-gray-50 p-5 overflow-hidden">
+      <div className="group relative block rounded-xl border border-gray-300 bg-linear-to-br from-gray-100 to-gray-50 p-5 overflow-hidden">
         <div className="mb-2 sm:mb-5 flex flex-row items-center">
           <div className="flex h-7 w-7 sm:h-9 sm:w-9 items-center justify-center rounded-full bg-gray-900 text-white">
             <Icon className="h-3 sm:h-5" />
@@ -52,8 +52,8 @@ export function RoadmapCard(props: RoadmapCardProps) {
     <a
       href={link}
       target={'_blank'}
-      className="group relative block rounded-xl border border-gray-300 bg-gradient-to-br from-gray-100 to-gray-50
-       p-3.5 sm:p-5 transition-colors duration-200 ease-in-out hover:cursor-pointer hover:border-black/30 hover:bg-gray-50/70 hover:shadow-sm"
+      className="group relative block rounded-xl border border-gray-300 bg-linear-to-br from-gray-100 to-gray-50
+       p-3.5 sm:p-5 transition-colors duration-200 ease-in-out hover:cursor-pointer hover:border-black/30 hover:bg-gray-50/70 hover:shadow-xs"
     >
       <div className="mb-2 sm:mb-5 flex flex-row items-center">
         <div className="flex h-7 w-7 sm:h-9 sm:w-9 items-center justify-center rounded-full bg-gray-900 text-white">
diff --git a/src/components/GetStarted/RoadmapMultiCard.tsx b/src/components/GetStarted/RoadmapMultiCard.tsx
index 974d33b11..7aa6405ec 100644
--- a/src/components/GetStarted/RoadmapMultiCard.tsx
+++ b/src/components/GetStarted/RoadmapMultiCard.tsx
@@ -16,7 +16,7 @@ export function RoadmapMultiCard(props: RoadmapMultiCardProps) {
   const { roadmaps, description, secondaryRoadmaps, secondaryDescription } = props;
   return (
     <div
-      className="relative flex flex-col overflow-hidden rounded-xl border border-gray-300 bg-gradient-to-br from-gray-100
+      className="relative flex flex-col overflow-hidden rounded-xl border border-gray-300 bg-linear-to-br from-gray-100
        to-gray-50 ease-in-out"
     >
       <div className="flex flex-col divide-y">
@@ -25,7 +25,7 @@ export function RoadmapMultiCard(props: RoadmapMultiCardProps) {
             target={'_blank'}
             key={index}
             href={roadmap.link}
-            className="group text-sm sm:text-base flex w-full items-center justify-between gap-2 bg-gradient-to-br from-gray-100 to-gray-50 px-4 sm:px-5 py-2 transition-colors duration-200"
+            className="group text-sm sm:text-base flex w-full items-center justify-between gap-2 bg-linear-to-br from-gray-100 to-gray-50 px-4 sm:px-5 py-2 transition-colors duration-200"
           >
             {roadmap.title}
             <ExternalLink className="lucide lucide-external-link h-4 text-gray-300 transition group-hover:text-gray-700" />
@@ -33,7 +33,7 @@ export function RoadmapMultiCard(props: RoadmapMultiCardProps) {
         ))}
       </div>
 
-      <p className="flex-grow bg-gray-200/70 p-4 sm:p-5 text-sm text-gray-500">
+      <p className="grow bg-gray-200/70 p-4 sm:p-5 text-sm text-gray-500">
         {description}
       </p>
 
@@ -44,7 +44,7 @@ export function RoadmapMultiCard(props: RoadmapMultiCardProps) {
               target={'_blank'}
               key={index}
               href={roadmap.link}
-              className="group text-sm sm:text-base flex w-full items-center justify-between gap-2 bg-gradient-to-br from-gray-100 to-gray-50 px-5 py-2 transition-colors duration-200"
+              className="group text-sm sm:text-base flex w-full items-center justify-between gap-2 bg-linear-to-br from-gray-100 to-gray-50 px-5 py-2 transition-colors duration-200"
             >
               {roadmap.title}
               <ExternalLink className="lucide lucide-external-link h-4 text-gray-300 transition group-hover:text-gray-700" />
@@ -54,7 +54,7 @@ export function RoadmapMultiCard(props: RoadmapMultiCardProps) {
       )}
 
       {secondaryDescription && (
-        <p className="flex-grow bg-gray-200/70 p-4 sm:p-5 text-sm text-gray-500">
+        <p className="grow bg-gray-200/70 p-4 sm:p-5 text-sm text-gray-500">
           {secondaryDescription}
         </p>
       )}
diff --git a/src/components/GetStarted/RoleRoadmaps.tsx b/src/components/GetStarted/RoleRoadmaps.tsx
index 8355b142c..79abff6a7 100644
--- a/src/components/GetStarted/RoleRoadmaps.tsx
+++ b/src/components/GetStarted/RoleRoadmaps.tsx
@@ -12,7 +12,7 @@ export function RoleRoadmaps(props: RoleRoadmapsProps) {
   const { badge, title, description, children } = props;
 
   return (
-    <div className="bg-gradient-to-b from-gray-100 to-white py-5 sm:py-8 md:py-12">
+    <div className="bg-linear-to-b from-gray-100 to-white py-5 sm:py-8 md:py-12">
       <div className="container">
         <div className="text-left">
           <SectionBadge title={badge} />
diff --git a/src/components/GridItem.astro b/src/components/GridItem.astro
index 0d3804511..2b80746b4 100644
--- a/src/components/GridItem.astro
+++ b/src/components/GridItem.astro
@@ -27,7 +27,7 @@ const { url, title, description, isNew } = Astro.props;
 
   {
     isNew && (
-      <span class='flex items-center gap-1.5 absolute bottom-1.5 right-1 rounded-sm text-xs font-semibold uppercase text-purple-500 sm:px-1.5'>
+      <span class='flex items-center gap-1.5 absolute bottom-1.5 right-1 rounded-xs text-xs font-semibold uppercase text-purple-500 sm:px-1.5'>
         <span class='relative flex h-2 w-2'>
           <span class='absolute inline-flex h-full w-full animate-ping rounded-full bg-purple-400 opacity-75' />
           <span class='relative inline-flex h-2 w-2 rounded-full bg-purple-500' />
diff --git a/src/components/Guide/GuideContent.astro b/src/components/Guide/GuideContent.astro
index cc06eec4e..61ce3b047 100644
--- a/src/components/Guide/GuideContent.astro
+++ b/src/components/Guide/GuideContent.astro
@@ -22,7 +22,7 @@ const { frontmatter: guideFrontmatter, author } = guide;
 <article class='lg:grid lg:max-w-full lg:grid-cols-[1fr_minmax(0,700px)_1fr]'>
   {
     (showTableOfContent || showRelatedGuides) && (
-      <div class='sticky top-0 lg:relative bg-gradient-to-r from-gray-50 py-0 lg:col-start-3 lg:col-end-4 lg:row-start-1'>
+      <div class='sticky top-0 lg:relative bg-linear-to-r from-gray-50 py-0 lg:col-start-3 lg:col-end-4 lg:row-start-1'>
         <RelatedGuides
           relatedTitle={guideFrontmatter?.relatedTitle}
           relatedGuides={guide?.relatedGuides || {}}
diff --git a/src/components/Guide/RelatedGuides.tsx b/src/components/Guide/RelatedGuides.tsx
index fe565dfcc..f38c8f0a3 100644
--- a/src/components/Guide/RelatedGuides.tsx
+++ b/src/components/Guide/RelatedGuides.tsx
@@ -42,7 +42,7 @@ export function RelatedGuides(props: RelatedGuidesProps) {
 
       <ol
         className={cn(
-          'mt-0.5 space-y-0 max-lg:absolute max-lg:top-full max-lg:z-10 max-lg:mt-0 max-lg:w-full max-lg:bg-white max-lg:shadow',
+          'mt-0.5 space-y-0 max-lg:absolute max-lg:top-full max-lg:z-10 max-lg:mt-0 max-lg:w-full max-lg:bg-white max-lg:shadow-sm',
           !isOpen && 'hidden lg:block',
           isOpen && 'block',
         )}
diff --git a/src/components/GuideListItem.astro b/src/components/GuideListItem.astro
index a862ad354..2a930acf8 100644
--- a/src/components/GuideListItem.astro
+++ b/src/components/GuideListItem.astro
@@ -41,7 +41,7 @@ if (isQuestionGroupType(guide)) {
 
     {
       frontmatter.isNew && (
-        <span class='ml-1.5 rounded-sm bg-green-300 px-1.5 py-0.5 text-xs font-medium uppercase text-green-900'>
+        <span class='ml-1.5 rounded-xs bg-green-300 px-1.5 py-0.5 text-xs font-medium uppercase text-green-900'>
           New
           <span class='hidden sm:inline'>
             &middot;
diff --git a/src/components/HeroSection/FavoriteRoadmaps.tsx b/src/components/HeroSection/FavoriteRoadmaps.tsx
index a639be626..5d86f2f85 100644
--- a/src/components/HeroSection/FavoriteRoadmaps.tsx
+++ b/src/components/HeroSection/FavoriteRoadmaps.tsx
@@ -143,7 +143,7 @@ export function FavoriteRoadmaps() {
       className={`transition-opacity duration-500  opacity-${containerOpacity}`}
     >
       <div
-        className={`flex min-h-[192px] bg-gradient-to-b sm:min-h-[280px] ${
+        className={`flex min-h-[192px] bg-linear-to-b sm:min-h-[280px] ${
           hasProgress && `border-t border-t-[#1e293c]`
         }`}
       >
diff --git a/src/components/HeroSection/HeroSection.astro b/src/components/HeroSection/HeroSection.astro
index 1997afe75..7ed9c734a 100644
--- a/src/components/HeroSection/HeroSection.astro
+++ b/src/components/HeroSection/HeroSection.astro
@@ -14,7 +14,7 @@ import { FeatureAnnouncement } from "../FeatureAnnouncement";
     </p>
 
     <h1
-      class='mb-2 bg-gradient-to-b from-amber-50 to-purple-500 bg-clip-text text-2xl font-bold text-transparent sm:mb-4 sm:text-5xl sm:leading-tight'
+      class='mb-2 bg-linear-to-b from-amber-50 to-purple-500 bg-clip-text text-2xl font-bold text-transparent sm:mb-4 sm:text-5xl sm:leading-tight'
     >
       Developer Roadmaps
     </h1>
diff --git a/src/components/Leaderboard/LeaderboardPage.tsx b/src/components/Leaderboard/LeaderboardPage.tsx
index 5195cb567..ce39e2cf2 100644
--- a/src/components/Leaderboard/LeaderboardPage.tsx
+++ b/src/components/Leaderboard/LeaderboardPage.tsx
@@ -112,7 +112,7 @@ function LeaderboardLane(props: LeaderboardLaneProps) {
   const { users: usersToShow, emptyIcon, emptyText } = activeTab;
 
   return (
-    <div className="flex min-h-[450px] flex-col overflow-hidden rounded-xl border bg-white shadow-sm">
+    <div className="flex min-h-[450px] flex-col overflow-hidden rounded-xl border bg-white shadow-xs">
       <div className="mb-3 flex items-center justify-between gap-2 px-3 py-3">
         <h3 className="text-sm font-medium">
           {title}{' '}
@@ -149,7 +149,7 @@ function LeaderboardLane(props: LeaderboardLaneProps) {
       </div>
 
       {usersToShow.length === 0 && emptyText && (
-        <div className="flex flex-grow flex-col items-center justify-center p-8">
+        <div className="flex grow flex-col items-center justify-center p-8">
           {emptyIcon}
           <p className="mt-4 text-sm text-gray-500">{emptyText}</p>
         </div>
diff --git a/src/components/MarkdownFile.astro b/src/components/MarkdownFile.astro
index b12c5cd1a..473fb3406 100644
--- a/src/components/MarkdownFile.astro
+++ b/src/components/MarkdownFile.astro
@@ -8,7 +8,7 @@ const { class: className } = Astro.props;
 
 <div
   class:list={[
-    'container prose prose-xl prose-h2:mb-3 prose-h2:mt-10 prose-h2:scroll-mt-5 prose-h2:text-balance prose-h2:text-3xl prose-h3:mt-2 prose-h3:scroll-mt-5 prose-h3:text-balance prose-h4:text-balance prose-h5:text-balance prose-h5:font-medium prose-blockquote:font-normal prose-code:bg-transparent prose-img:mt-1 prose-h2:sm:scroll-mt-10 prose-h3:sm:scroll-mt-10',
+    'container prose prose-xl prose-h2:mb-3 prose-h2:mt-10 prose-h2:scroll-mt-5 prose-h2:text-balance prose-h2:text-3xl prose-h3:mt-2 prose-h3:scroll-mt-5 prose-h3:text-balance prose-h4:text-balance prose-h5:text-balance prose-h5:font-medium prose-blockquote:font-normal prose-code:bg-transparent prose-img:mt-1 sm:prose-h2:scroll-mt-10 sm:prose-h3:scroll-mt-10',
     className,
   ]}
 >
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index d8167ff7a..d8c05d0a0 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -33,7 +33,7 @@ export function Modal(props: ModalProps) {
   return (
     <div
       className={cn(
-        'fixed left-0 right-0 top-0 z-[99] flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50',
+        'fixed left-0 right-0 top-0 z-99 flex h-full items-center justify-center overflow-y-auto overflow-x-hidden bg-black/50',
         overlayClassName,
       )}
     >
@@ -46,7 +46,7 @@ export function Modal(props: ModalProps) {
         <div
           ref={popupBodyEl}
           className={cn(
-            'relative h-full rounded-lg bg-white shadow',
+            'relative h-full rounded-lg bg-white shadow-sm',
             bodyClassName,
           )}
         >
diff --git a/src/components/Navigation/AccountDropdown.astro b/src/components/Navigation/AccountDropdown.astro
index 547d53f01..ab4788608 100644
--- a/src/components/Navigation/AccountDropdown.astro
+++ b/src/components/Navigation/AccountDropdown.astro
@@ -4,7 +4,7 @@ import Icon from '../AstroIcon.astro';
 
 <div class='relative hidden' data-auth-required>
   <button
-    class='flex h-8 w-38 items-center justify-center rounded-full bg-gradient-to-r from-purple-500 to-purple-700 px-4 py-2 text-sm font-medium text-white hover:from-purple-500 hover:to-purple-600'
+    class='flex h-8 w-38 items-center justify-center rounded-full bg-linear-to-r from-purple-500 to-purple-700 px-4 py-2 text-sm font-medium text-white hover:from-purple-500 hover:to-purple-600'
     type='button'
     data-account-button
   >
@@ -25,7 +25,7 @@ import Icon from '../AstroIcon.astro';
       <li class='px-1'>
         <a
           href='/account'
-          class='block rounded px-4 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700'
+          class='block rounded-sm px-4 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700'
         >
           Profile
         </a>
@@ -33,7 +33,7 @@ import Icon from '../AstroIcon.astro';
       <li class='px-1'>
         <a
           href='/account/friends'
-          class='block rounded px-4 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700'
+          class='block rounded-sm px-4 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700'
         >
           Friends
         </a>
@@ -41,14 +41,14 @@ import Icon from '../AstroIcon.astro';
       <li class='px-1'>
         <a
           href='/team'
-          class='block rounded px-4 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700'
+          class='block rounded-sm px-4 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700'
         >
           Teams
         </a>
       </li>
       <li class='px-1'>
         <button
-          class='block w-full rounded px-4 py-2 text-left text-sm font-medium text-slate-100 hover:bg-slate-700'
+          class='block w-full rounded-sm px-4 py-2 text-left text-sm font-medium text-slate-100 hover:bg-slate-700'
           type='button'
           data-logout-button
         >
diff --git a/src/components/Navigation/AccountDropdown.tsx b/src/components/Navigation/AccountDropdown.tsx
index 7e24b0587..ae688ff70 100644
--- a/src/components/Navigation/AccountDropdown.tsx
+++ b/src/components/Navigation/AccountDropdown.tsx
@@ -105,7 +105,7 @@ export function AccountDropdown() {
         />
       )}
 
-      <div className="relative z-[90] animate-fade-in">
+      <div className="relative z-90 animate-fade-in">
         {isOnboardingModalOpen && onboardingConfig && (
           <OnboardingModal
             onboardingConfig={onboardingConfig}
@@ -126,7 +126,7 @@ export function AccountDropdown() {
         )}
 
         <button
-          className="relative flex h-8 w-40 items-center justify-center gap-1.5 rounded-full bg-gradient-to-r from-purple-500 to-purple-700 px-4 py-2 text-sm font-medium text-white hover:from-purple-500 hover:to-purple-600"
+          className="relative flex h-8 w-40 items-center justify-center gap-1.5 rounded-full bg-linear-to-r from-purple-500 to-purple-700 px-4 py-2 text-sm font-medium text-white hover:from-purple-500 hover:to-purple-600"
           onClick={() => {
             setIsTeamsOpen(false);
             setShowDropdown(!showDropdown);
diff --git a/src/components/Navigation/AccountDropdownList.tsx b/src/components/Navigation/AccountDropdownList.tsx
index 8b3dbe1c9..2ab7a33ba 100644
--- a/src/components/Navigation/AccountDropdownList.tsx
+++ b/src/components/Navigation/AccountDropdownList.tsx
@@ -43,7 +43,7 @@ export function AccountDropdownList(props: AccountDropdownListProps) {
         <li className="mb-1 px-1">
           <button
             className={cn(
-              'flex h-9 w-full items-center rounded py-1 pl-3 pr-2 text-sm font-medium text-slate-100 hover:opacity-80',
+              'flex h-9 w-full items-center rounded-sm py-1 pl-3 pr-2 text-sm font-medium text-slate-100 hover:opacity-80',
               isConfigLoading
                 ? 'striped-loader-darker flex border-slate-800 opacity-70'
                 : 'border-slate-600 bg-slate-700',
@@ -70,7 +70,7 @@ export function AccountDropdownList(props: AccountDropdownListProps) {
       <li className="px-1">
         <a
           href="/account"
-          className="group flex items-center gap-2 rounded py-2 pl-3 pr-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+          className="group flex items-center gap-2 rounded-sm py-2 pl-3 pr-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
         >
           <User2 className="h-4 w-4 stroke-[2.5px] text-slate-400 group-hover:text-white" />
           Account
@@ -79,13 +79,13 @@ export function AccountDropdownList(props: AccountDropdownListProps) {
       <li className="px-1">
         <a
           href="/account/update-profile"
-          className="group flex items-center justify-between gap-2 rounded py-2 pl-3 pr-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+          className="group flex items-center justify-between gap-2 rounded-sm py-2 pl-3 pr-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
         >
           <span className="flex items-center gap-2">
             <SquareUserRound className="h-4 w-4 stroke-[2.5px] text-slate-400 group-hover:text-white" />
             My Profile
           </span>
-          <span className="rounded-sm bg-yellow-300 px-1 text-xs uppercase tracking-wide text-black">
+          <span className="rounded-xs bg-yellow-300 px-1 text-xs uppercase tracking-wide text-black">
             New
           </span>
         </a>
@@ -93,7 +93,7 @@ export function AccountDropdownList(props: AccountDropdownListProps) {
       <li className="px-1">
         <a
           href="/account/friends"
-          className="group flex items-center gap-2 rounded py-2 pl-3 pr-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+          className="group flex items-center gap-2 rounded-sm py-2 pl-3 pr-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
         >
           <Users2 className="h-4 w-4 stroke-[2px] text-slate-400 group-hover:text-white" />
           Friends
@@ -104,7 +104,7 @@ export function AccountDropdownList(props: AccountDropdownListProps) {
           onClick={() => {
             onCreateRoadmap();
           }}
-          className="group flex w-full items-center gap-2 rounded py-2 pl-3 pr-2 text-left text-sm font-medium text-slate-100 hover:bg-slate-700"
+          className="group flex w-full items-center gap-2 rounded-sm py-2 pl-3 pr-2 text-left text-sm font-medium text-slate-100 hover:bg-slate-700"
         >
           <Plus className="h-4 w-4 stroke-[2px] text-slate-400 group-hover:text-white" />
           New Roadmap
@@ -113,7 +113,7 @@ export function AccountDropdownList(props: AccountDropdownListProps) {
       <li className="border-b border-b-gray-700/60 px-1 pb-1">
         <a
           href="/account/roadmaps"
-          className="group flex items-center gap-2 rounded py-2 pl-3 pr-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+          className="group flex items-center gap-2 rounded-sm py-2 pl-3 pr-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
         >
           <Map className="h-4 w-4 stroke-[2px] text-slate-400 group-hover:text-white" />
           Roadmaps
@@ -121,7 +121,7 @@ export function AccountDropdownList(props: AccountDropdownListProps) {
       </li>
       <li className="px-1 pt-1">
         <button
-          className="group flex w-full items-center justify-between rounded py-2 pl-3 pr-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+          className="group flex w-full items-center justify-between rounded-sm py-2 pl-3 pr-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
           onClick={() => setIsTeamsOpen(true)}
         >
           <span className="flex items-center gap-2.5">
@@ -133,7 +133,7 @@ export function AccountDropdownList(props: AccountDropdownListProps) {
       </li>
       <li className="px-1">
         <button
-          className="group flex w-full items-center gap-2 rounded py-2 pl-3 pr-2 text-left text-sm font-medium text-slate-100 hover:bg-slate-700"
+          className="group flex w-full items-center gap-2 rounded-sm py-2 pl-3 pr-2 text-left text-sm font-medium text-slate-100 hover:bg-slate-700"
           type="button"
           onClick={logout}
         >
diff --git a/src/components/Navigation/DropdownTeamList.tsx b/src/components/Navigation/DropdownTeamList.tsx
index 4661cfa82..3fbe3d77e 100644
--- a/src/components/Navigation/DropdownTeamList.tsx
+++ b/src/components/Navigation/DropdownTeamList.tsx
@@ -52,13 +52,13 @@ export function DropdownTeamList(props: DropdownTeamListProps) {
     <>
       <div className="flex items-center justify-between px-2">
         <button
-          className="mt-1 flex h-5 w-5 items-center justify-center rounded text-slate-400 hover:bg-slate-50/10 hover:text-slate-50"
+          className="mt-1 flex h-5 w-5 items-center justify-center rounded-sm text-slate-400 hover:bg-slate-50/10 hover:text-slate-50"
           onClick={() => setIsTeamsOpen(false)}
         >
           <ChevronLeft className="h-4 w-4 stroke-[2.5px]" />
         </button>
         <a
-          className="mt-1 flex h-5 w-5 items-center justify-center rounded text-slate-400 hover:bg-slate-50/10 hover:text-slate-50"
+          className="mt-1 flex h-5 w-5 items-center justify-center rounded-sm text-slate-400 hover:bg-slate-50/10 hover:text-slate-50"
           href="/team/new"
         >
           <Plus className="h-4 w-4 stroke-[2.5px]" />
@@ -80,7 +80,7 @@ export function DropdownTeamList(props: DropdownTeamListProps) {
               <li key={team._id} className="px-1">
                 <a
                   href={pageLink}
-                  className="block truncate rounded px-4 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+                  className="block truncate rounded-sm px-4 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
                 >
                   {team.name}
                 </a>
@@ -90,7 +90,7 @@ export function DropdownTeamList(props: DropdownTeamListProps) {
 
           {teamList.length === 0 && !isLoading && (
             <li className="mt-2 px-1 text-center">
-              <p className="block rounded px-4 py-2 text-sm font-medium text-slate-500">
+              <p className="block rounded-sm px-4 py-2 text-sm font-medium text-slate-500">
                 <Users className="mx-auto mb-2 h-7 w-7 text-slate-600" />
                 No teams found.{' '}
                 <a
diff --git a/src/components/Navigation/Navigation.astro b/src/components/Navigation/Navigation.astro
index ee39d904a..fb07535cb 100644
--- a/src/components/Navigation/Navigation.astro
+++ b/src/components/Navigation/Navigation.astro
@@ -73,7 +73,7 @@ import { AccountDropdown } from './AccountDropdown';
 
         <a
           data-guest-required
-          class='flex hidden h-8 w-28 cursor-pointer items-center justify-center rounded-full bg-gradient-to-r from-blue-500 to-blue-700 px-4 py-2 text-sm font-medium text-white hover:from-blue-500 hover:to-blue-600'
+          class='flex hidden h-8 w-28 cursor-pointer items-center justify-center rounded-full bg-linear-to-r from-blue-500 to-blue-700 px-4 py-2 text-sm font-medium text-white hover:from-blue-500 hover:to-blue-600'
           href='/signup'
         >
           <span>Sign Up</span>
diff --git a/src/components/Navigation/OnboardingModal.tsx b/src/components/Navigation/OnboardingModal.tsx
index 53e39e3b3..a8846d1b2 100644
--- a/src/components/Navigation/OnboardingModal.tsx
+++ b/src/components/Navigation/OnboardingModal.tsx
@@ -232,7 +232,7 @@ export function OnboardingModal(props: OnboardingModalProps) {
 
       <div className="mt-2 px-11 pb-5">
         <button
-          className="w-full rounded-md bg-gradient-to-r from-purple-500 to-purple-700 px-4 py-2 text-sm font-medium text-white hover:from-purple-500 hover:to-purple-600"
+          className="w-full rounded-md bg-linear-to-r from-purple-500 to-purple-700 px-4 py-2 text-sm font-medium text-white hover:from-purple-500 hover:to-purple-600"
           onClick={onClose}
         >
           Do it later
diff --git a/src/components/NavigationDropdown.tsx b/src/components/NavigationDropdown.tsx
index d9f7c99c7..8e43e54b7 100644
--- a/src/components/NavigationDropdown.tsx
+++ b/src/components/NavigationDropdown.tsx
@@ -109,7 +109,7 @@ export function NavigationDropdown() {
       </button>
       <div
         className={cn(
-          'pointer-events-none invisible absolute left-0 top-full z-[999] mt-2 w-48 min-w-[320px] -translate-y-1 rounded-lg bg-slate-800 py-2 opacity-0 shadow-xl transition-all duration-100',
+          'pointer-events-none invisible absolute left-0 top-full z-999 mt-2 w-48 min-w-[320px] -translate-y-1 rounded-lg bg-slate-800 py-2 opacity-0 shadow-xl transition-all duration-100',
           {
             'pointer-events-auto visible translate-y-2.5 opacity-100':
               $navigationDropdownOpen,
diff --git a/src/components/Notification/NotificationPage.tsx b/src/components/Notification/NotificationPage.tsx
index 281d6d51e..ea6b071e7 100644
--- a/src/components/Notification/NotificationPage.tsx
+++ b/src/components/Notification/NotificationPage.tsx
@@ -103,7 +103,7 @@ export function NotificationPage() {
               <button
                 type="button"
                 disabled={isLoading}
-                className="inline-flex rounded border p-1 hover:bg-gray-50 disabled:opacity-75"
+                className="inline-flex rounded-sm border p-1 hover:bg-gray-50 disabled:opacity-75"
                 onClick={() => respondInvitation('accept', notification?._id!)}
               >
                 <AcceptIcon className="h-4 w-4" />
@@ -111,7 +111,7 @@ export function NotificationPage() {
               <button
                 type="button"
                 disabled={isLoading}
-                className="inline-flex rounded border p-1 hover:bg-gray-50 disabled:opacity-75"
+                className="inline-flex rounded-sm border p-1 hover:bg-gray-50 disabled:opacity-75"
                 onClick={() => respondInvitation('reject', notification?._id!)}
               >
                 <XIcon className="h-4 w-4" />
diff --git a/src/components/OnboardingNudge.tsx b/src/components/OnboardingNudge.tsx
index 97fb1c330..2b40603b6 100644
--- a/src/components/OnboardingNudge.tsx
+++ b/src/components/OnboardingNudge.tsx
@@ -40,7 +40,7 @@ export function OnboardingNudge(props: OnboardingNudgeProps) {
   return (
     <div
       className={cn(
-        'fixed left-0 right-0 top-0 z-[91] flex w-full items-center justify-center border-b border-b-yellow-500/30 bg-yellow-300 pb-2 pt-1.5',
+        'fixed left-0 right-0 top-0 z-91 flex w-full items-center justify-center border-b border-b-yellow-500/30 bg-yellow-300 pb-2 pt-1.5',
         {
           'striped-loader': isLoading,
         },
diff --git a/src/components/OpenSourceBanner.astro b/src/components/OpenSourceBanner.astro
index f8ec87efd..51eeeb3c3 100644
--- a/src/components/OpenSourceBanner.astro
+++ b/src/components/OpenSourceBanner.astro
@@ -12,7 +12,7 @@ const discordInfo = await getDiscordInfo();
 ---
 
 <div class='border-b border-t bg-white py-6 text-left sm:py-16 sm:text-center'>
-  <div class='container !max-w-[650px]'>
+  <div class='container max-w-[650px]!'>
     <p class='text-2xl font-bold sm:text-5xl'>Join the Community</p>
     <p class='my-2.5 text-sm leading-relaxed text-gray-600 sm:my-5 sm:text-lg'>
       roadmap.sh is the <a
diff --git a/src/components/PageProgress.tsx b/src/components/PageProgress.tsx
index 529ffddb7..85f336e5a 100644
--- a/src/components/PageProgress.tsx
+++ b/src/components/PageProgress.tsx
@@ -28,7 +28,7 @@ export function PageProgress(props: Props) {
   return (
     <div>
       {/* Tailwind based spinner for full page */}
-      <div className="fixed left-0 top-0 z-[100] flex h-full w-full items-center justify-center bg-white bg-opacity-75">
+      <div className="fixed left-0 top-0 z-100 flex h-full w-full items-center justify-center bg-white bg-opacity-75">
         <div className="flex  items-center justify-center rounded-md border bg-white px-4 py-2 ">
           <Spinner
             className="h-4 w-4 sm:h-4 sm:w-4"
diff --git a/src/components/PageSponsors/StickyTopSponsor.tsx b/src/components/PageSponsors/StickyTopSponsor.tsx
index 817e2c8d1..3f22404cb 100644
--- a/src/components/PageSponsors/StickyTopSponsor.tsx
+++ b/src/components/PageSponsors/StickyTopSponsor.tsx
@@ -55,7 +55,7 @@ export function StickyTopSponsor(props: StickyTopSponsorProps) {
       href={sponsor.url}
       onClick={onSponsorClick}
       className={cn(
-        'fixed left-0 right-0 top-0 z-[91] flex min-h-[45px] w-full flex-row items-center justify-center px-14 pb-2 pt-1.5 text-base font-medium text-yellow-950',
+        'fixed left-0 right-0 top-0 z-91 flex min-h-[45px] w-full flex-row items-center justify-center px-14 pb-2 pt-1.5 text-base font-medium text-yellow-950',
       )}
       style={{
         backgroundImage: `linear-gradient(to bottom, ${sponsor.style?.fromColor}, ${sponsor.style?.toColor})`,
diff --git a/src/components/Popup/Popup.astro b/src/components/Popup/Popup.astro
index bcdbb3bb0..c9ef1cd58 100644
--- a/src/components/Popup/Popup.astro
+++ b/src/components/Popup/Popup.astro
@@ -15,10 +15,10 @@ const { id, title, subtitle } = Astro.props;
 <div
   id={id}
   tabindex='-1'
-  class='hidden bg-black/50 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-[999] h-full items-center justify-center popup'
+  class='hidden bg-black/50 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-999 h-full items-center justify-center popup'
 >
   <div class='relative p-4 w-full max-w-md h-full md:h-auto'>
-    <div class='relative bg-white rounded-lg shadow popup-body'>
+    <div class='relative bg-white rounded-lg shadow-sm popup-body'>
       <button
         type='button'
         class='absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center popup-close'
diff --git a/src/components/Projects/ListProjectSolutions.tsx b/src/components/Projects/ListProjectSolutions.tsx
index 2d29a4ae2..9e63324d7 100644
--- a/src/components/Projects/ListProjectSolutions.tsx
+++ b/src/components/Projects/ListProjectSolutions.tsx
@@ -271,7 +271,7 @@ export function ListProjectSolutions(props: ListProjectSolutionsProps) {
                           counter % submittedAlternatives.length
                         ] || 'submitted their solution'}
                       </span>{' '}
-                      <span className="flex-grow text-right text-gray-400 sm:flex-grow-0 sm:text-left sm:font-medium sm:text-black">
+                      <span className="grow text-right text-gray-400 sm:grow-0 sm:text-left sm:font-medium sm:text-black">
                         {getRelativeTimeString(solution?.submittedAt!)}
                       </span>
                     </div>
diff --git a/src/components/Projects/ProjectCard.tsx b/src/components/Projects/ProjectCard.tsx
index 1aaf99f85..18f6bc957 100644
--- a/src/components/Projects/ProjectCard.tsx
+++ b/src/components/Projects/ProjectCard.tsx
@@ -46,8 +46,8 @@ export function ProjectCard(props: ProjectCardProps) {
       <span className="flex min-h-[22px] items-center justify-between gap-2 text-xs text-gray-400">
         {isLoadingStatus ? (
           <>
-            <span className="h-5 w-24 animate-pulse rounded bg-gray-200" />{' '}
-            <span className="h-5 w-20 animate-pulse rounded bg-gray-200" />{' '}
+            <span className="h-5 w-24 animate-pulse rounded-sm bg-gray-200" />{' '}
+            <span className="h-5 w-20 animate-pulse rounded-sm bg-gray-200" />{' '}
           </>
         ) : (
           <>
diff --git a/src/components/Projects/ProjectsPage.tsx b/src/components/Projects/ProjectsPage.tsx
index 999b6e3c7..3a32cc722 100644
--- a/src/components/Projects/ProjectsPage.tsx
+++ b/src/components/Projects/ProjectsPage.tsx
@@ -114,7 +114,7 @@ export function ProjectsPage(props: ProjectsPageProps) {
       <div className="container relative flex flex-col gap-4 sm:flex-row">
         <div
           className={cn(
-            'hidden w-full flex-col from-gray-100 sm:w-[160px] sm:shrink-0 sm:border-r sm:bg-gradient-to-l sm:pt-6',
+            'hidden w-full flex-col from-gray-100 sm:w-[160px] sm:shrink-0 sm:border-r sm:bg-linear-to-l sm:pt-6',
             {
               'hidden sm:flex': !isFilterOpen,
               'z-50 flex': isFilterOpen,
@@ -171,7 +171,7 @@ export function ProjectsPage(props: ProjectsPageProps) {
             </div>
           </div>
         </div>
-        <div className="flex flex-grow flex-col pb-20 pt-2 sm:pt-6">
+        <div className="flex grow flex-col pb-20 pt-2 sm:pt-6">
           <div className="mb-4 flex items-center justify-between text-sm text-gray-500">
             <h3 className={'flex items-center'}>
               <Box size={15} className="mr-1" strokeWidth={2} />
diff --git a/src/components/Projects/StartProjectModal.tsx b/src/components/Projects/StartProjectModal.tsx
index 69212ee6e..820889a96 100644
--- a/src/components/Projects/StartProjectModal.tsx
+++ b/src/components/Projects/StartProjectModal.tsx
@@ -15,7 +15,7 @@ function StepLabel(props: StepLabelProps) {
   const { label } = props;
 
   return (
-    <span className="flex-shrink-0 rounded-full bg-gray-200 px-2 py-1 text-xs text-gray-600">
+    <span className="shrink-0 rounded-full bg-gray-200 px-2 py-1 text-xs text-gray-600">
       {label}
     </span>
   );
diff --git a/src/components/Projects/StatusStepper/StepperStepSeparator.tsx b/src/components/Projects/StatusStepper/StepperStepSeparator.tsx
index b169daab6..45f622ed2 100644
--- a/src/components/Projects/StatusStepper/StepperStepSeparator.tsx
+++ b/src/components/Projects/StatusStepper/StepperStepSeparator.tsx
@@ -9,7 +9,7 @@ export function StepperStepSeparator(props: StepperStepSeparatorProps) {
 
   return (
     <hr
-      className={cn('flex-grow hidden sm:flex border border-gray-300', {
+      className={cn('grow hidden sm:flex border border-gray-300', {
         'border-green-500': isActive,
       })}
     />
diff --git a/src/components/Projects/SubmissionRequirement.tsx b/src/components/Projects/SubmissionRequirement.tsx
index 778efc9a1..6d9dc9219 100644
--- a/src/components/Projects/SubmissionRequirement.tsx
+++ b/src/components/Projects/SubmissionRequirement.tsx
@@ -23,11 +23,11 @@ export function SubmissionRequirement(props: SubmissionRequirementProps) {
       {!isLoading && (
         <>
           {status === 'pending' ? (
-            <CircleDashed className="h-4 w-4 flex-shrink-0 text-gray-400" />
+            <CircleDashed className="h-4 w-4 shrink-0 text-gray-400" />
           ) : status === 'success' ? (
-            <CheckIcon className="h-4 w-4 flex-shrink-0 text-green-800" />
+            <CheckIcon className="h-4 w-4 shrink-0 text-green-800" />
           ) : (
-            <X className="h-4 w-4 flex-shrink-0 text-yellow-800" />
+            <X className="h-4 w-4 shrink-0 text-yellow-800" />
           )}
         </>
       )}
diff --git a/src/components/Projects/SubmitSuccessModal.tsx b/src/components/Projects/SubmitSuccessModal.tsx
index e271c0676..a55eff7e2 100644
--- a/src/components/Projects/SubmitSuccessModal.tsx
+++ b/src/components/Projects/SubmitSuccessModal.tsx
@@ -33,7 +33,7 @@ export function SubmitSuccessModal(props: SubmitSuccessModalProps) {
             type="text"
             readOnly={true}
             value={projectSolutionUrl}
-            className="w-full rounded-md border bg-gray-50 px-2.5 py-2 text-sm text-gray-700 focus:outline-none"
+            className="w-full rounded-md border bg-gray-50 px-2.5 py-2 text-sm text-gray-700 focus:outline-hidden"
             onClick={(e) => {
               e.currentTarget.select();
             }}
diff --git a/src/components/Projects/VoteButton.tsx b/src/components/Projects/VoteButton.tsx
index 15feb7254..28181bf35 100644
--- a/src/components/Projects/VoteButton.tsx
+++ b/src/components/Projects/VoteButton.tsx
@@ -13,7 +13,7 @@ export function VoteButton(props: VoteButtonProps) {
   return (
     <button
       className={cn(
-        'flex gap-1 px-2 py-1 text-sm text-gray-500 hover:bg-gray-100 hover:text-black focus:outline-none',
+        'flex gap-1 px-2 py-1 text-sm text-gray-500 hover:bg-gray-100 hover:text-black focus:outline-hidden',
         {
           'bg-gray-100 text-orange-600 hover:text-orange-700': isActive,
           'bg-transparent text-gray-500 hover:text-black': !isActive,
diff --git a/src/components/Questions/QuestionCard.tsx b/src/components/Questions/QuestionCard.tsx
index 067fcbc7e..04e4a6276 100644
--- a/src/components/Questions/QuestionCard.tsx
+++ b/src/components/Questions/QuestionCard.tsx
@@ -51,7 +51,7 @@ export function QuestionCard(props: QuestionCardProps) {
     <>
       <div
         ref={questionRef}
-        className={`flex flex-grow flex-col items-center justify-center py-5 sm:py-8`}
+        className={`flex grow flex-col items-center justify-center py-5 sm:py-8`}
       >
         <div className="hidden text-gray-400 sm:block">
           {question.topics?.map((topic, counter) => {
@@ -69,7 +69,7 @@ export function QuestionCard(props: QuestionCardProps) {
         </div>
 
         <div className="mx-auto flex max-w-[550px] flex-1 items-center justify-center py-3 sm:py-8">
-          <p className="px-4 text-xl font-semibold !leading-snug text-black sm:text-3xl">
+          <p className="px-4 text-xl font-semibold leading-snug! text-black sm:text-3xl">
             {question.question}
           </p>
         </div>
@@ -94,7 +94,7 @@ export function QuestionCard(props: QuestionCardProps) {
       >
         {!question.isLongAnswer && (
           <div
-            className={`mx-auto flex max-w-[600px] flex-grow flex-col items-center justify-center py-0 px-5 text-center text-base [&>p]:leading-relaxed sm:text-xl`}
+            className={`mx-auto flex max-w-[600px] grow flex-col items-center justify-center py-0 px-5 text-center text-base [&>p]:leading-relaxed sm:text-xl`}
             dangerouslySetInnerHTML={{
               __html: markdownToHtml(question.answer, false),
             }}
@@ -103,7 +103,7 @@ export function QuestionCard(props: QuestionCardProps) {
 
         {question.isLongAnswer && (
           <div
-            className={`qa-answer prose prose-sm prose-quoteless mx-auto flex w-full max-w-[600px] flex-grow flex-col items-start justify-center py-0 px-4 text-left text-sm prose-h1:mb-2.5 prose-h1:mt-7 prose-h2:mb-3 prose-h2:mt-0 prose-h3:mb-[5px] prose-h3:mt-[10px] prose-p:mb-2 prose-p:mt-0 prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:text-gray-700 prose-pre:!mb-6 prose-pre:w-full prose-ul:my-2 prose-li:m-0 prose-li:mb-0.5 sm:px-5 sm:text-lg sm:prose-p:mb-4`}
+            className={`qa-answer prose prose-sm prose-quoteless mx-auto flex w-full max-w-[600px] grow flex-col items-start justify-center py-0 px-4 text-left text-sm prose-h1:mb-2.5 prose-h1:mt-7 prose-h2:mb-3 prose-h2:mt-0 prose-h3:mb-[5px] prose-h3:mt-[10px] prose-p:mb-2 prose-p:mt-0 prose-blockquote:font-normal prose-blockquote:not-italic prose-blockquote:text-gray-700 prose-pre:mb-6! prose-pre:w-full prose-ul:my-2 prose-li:m-0 prose-li:mb-0.5 sm:px-5 sm:text-lg sm:prose-p:mb-4`}
             dangerouslySetInnerHTML={{
               __html: markdownToHtml(question.answer, false),
             }}
diff --git a/src/components/Questions/QuestionFinished.tsx b/src/components/Questions/QuestionFinished.tsx
index b9c9083cd..121b493e2 100644
--- a/src/components/Questions/QuestionFinished.tsx
+++ b/src/components/Questions/QuestionFinished.tsx
@@ -21,7 +21,7 @@ function ProgressStatLabel(props: ProgressStatButtonProps) {
   return (
     <span className="group relative flex flex-1 items-center overflow-hidden rounded-md border border-gray-300 bg-white px-2 py-2 text-sm text-black transition-colors disabled:opacity-50 sm:rounded-xl sm:px-4 sm:py-3 sm:text-base">
       {icon}
-      <span className="flex flex-grow justify-between">
+      <span className="flex grow justify-between">
         <span>{label}</span>
         <span>{count}</span>
       </span>
@@ -41,7 +41,7 @@ export function QuestionFinished(props: QuestionFinishedProps) {
   const { knowCount, didNotKnowCount, skippedCount, onReset } = props;
 
   return (
-    <div className="relative flex flex-grow flex-col items-center justify-center px-4 sm:px-0">
+    <div className="relative flex grow flex-col items-center justify-center px-4 sm:px-0">
       <PartyPopper className="mb-4 mt-10 h-14 w-14 text-gray-300 sm:mt-0 sm:h-24 sm:w-24" />
       <h1 className="text-lg font-semibold text-gray-700 sm:text-2xl">
         Questions Finished
diff --git a/src/components/Questions/QuestionGuide.astro b/src/components/Questions/QuestionGuide.astro
index ddec8fcec..66c0acde4 100644
--- a/src/components/Questions/QuestionGuide.astro
+++ b/src/components/Questions/QuestionGuide.astro
@@ -59,7 +59,7 @@ const { frontmatter: guideFrontmatter, author } = questionGroup;
 <article class='lg:grid lg:max-w-full lg:grid-cols-[1fr_minmax(0,700px)_1fr]'>
   {
     showTableOfContent && (
-      <div class='bg-gradient-to-r from-gray-50 py-0 lg:col-start-3 lg:col-end-4 lg:row-start-1'>
+      <div class='bg-linear-to-r from-gray-50 py-0 lg:col-start-3 lg:col-end-4 lg:row-start-1'>
         <RelatedGuides
           relatedTitle={guideFrontmatter?.relatedTitle}
           relatedGuides={questionGroup?.relatedGuides || {}}
diff --git a/src/components/Questions/QuestionLoader.tsx b/src/components/Questions/QuestionLoader.tsx
index 58e045edc..5d074ec2d 100644
--- a/src/components/Questions/QuestionLoader.tsx
+++ b/src/components/Questions/QuestionLoader.tsx
@@ -2,7 +2,7 @@ import {Spinner} from "../ReactIcons/Spinner";
 
 export function QuestionLoader() {
   return (
-    <div className="flex flex-grow flex-col items-center justify-center">
+    <div className="flex grow flex-col items-center justify-center">
       <p className="text-xl font-medium text-gray-500 flex items-center gap-3.5">
         <Spinner isDualRing={false} innerFill='#6b7280' className="h-5 w-5" />
         Please wait ..
diff --git a/src/components/ResourceProgressStats.astro b/src/components/ResourceProgressStats.astro
index bc9aabceb..20574000a 100644
--- a/src/components/ResourceProgressStats.astro
+++ b/src/components/ResourceProgressStats.astro
@@ -21,7 +21,7 @@ const { resourceId, resourceType } = Astro.props;
     data-progress-nums
   >
     <span
-      class='mr-2.5 hidden rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900 sm:block'
+      class='mr-2.5 hidden rounded-xs bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900 sm:block'
     >
       <span data-progress-percentage>0</span>% Done
     </span>
diff --git a/src/components/RespondInviteForm.tsx b/src/components/RespondInviteForm.tsx
index f08459baf..8e1e01850 100644
--- a/src/components/RespondInviteForm.tsx
+++ b/src/components/RespondInviteForm.tsx
@@ -95,7 +95,7 @@ export function RespondInviteForm() {
         <div>
           <a
             href="/"
-            className="flex-grow cursor-pointer rounded-lg bg-gray-200 px-3 py-2 text-center"
+            className="grow cursor-pointer rounded-lg bg-gray-200 px-3 py-2 text-center"
           >
             Back to home
           </a>
@@ -121,7 +121,7 @@ export function RespondInviteForm() {
               onClick={() => showLoginPopup()}
               data-popup="login-popup"
               type="button"
-              className="flex-grow cursor-pointer rounded-lg bg-gray-200 px-3 py-2 text-center"
+              className="grow cursor-pointer rounded-lg bg-gray-200 px-3 py-2 text-center"
             >
               Login to respond
             </button>
@@ -139,7 +139,7 @@ export function RespondInviteForm() {
                   pageProgressMessage.set('');
                 })
               }
-              className="flex-grow cursor-pointer rounded-lg hover:bg-gray-300 bg-gray-200 px-3 py-2 text-center"
+              className="grow cursor-pointer rounded-lg hover:bg-gray-300 bg-gray-200 px-3 py-2 text-center"
             >
               Accept
             </button>
@@ -150,7 +150,7 @@ export function RespondInviteForm() {
                   pageProgressMessage.set('');
                 })
               }
-              className="flex-grow cursor-pointer rounded-lg bg-red-500 hover:bg-red-600 px-3 py-2 text-white disabled:opacity-40"
+              className="grow cursor-pointer rounded-lg bg-red-500 hover:bg-red-600 px-3 py-2 text-white disabled:opacity-40"
             >
               Reject
             </button>
diff --git a/src/components/RoadCard/Editor.tsx b/src/components/RoadCard/Editor.tsx
index c5f571305..e361f5829 100644
--- a/src/components/RoadCard/Editor.tsx
+++ b/src/components/RoadCard/Editor.tsx
@@ -13,7 +13,7 @@ export function Editor(props: EditorProps) {
   const { isCopied, copyText } = useCopyText();
 
   return (
-    <div className="flex w-full flex-grow flex-col overflow-hidden rounded border border-gray-300 bg-gray-50">
+    <div className="flex w-full grow flex-col overflow-hidden rounded-sm border border-gray-300 bg-gray-50">
       <div className="flex items-center justify-between gap-2 border-b border-gray-300 px-3 py-2">
         <span className="text-xs uppercase leading-none text-gray-400">
           {title}
diff --git a/src/components/RoadCard/RoadCardPage.tsx b/src/components/RoadCard/RoadCardPage.tsx
index 724cfc2bf..6ada8c408 100644
--- a/src/components/RoadCard/RoadCardPage.tsx
+++ b/src/components/RoadCard/RoadCardPage.tsx
@@ -132,7 +132,7 @@ export function RoadCardPage() {
 
       <div className="mx-0 flex items-start gap-4 border-b px-0 py-4 sm:-mx-10 sm:px-10">
         <StepCounter step={4} />
-        <div className="flex-grow">
+        <div className="grow">
           <StepLabel label="Share your #RoadCard with others" />
           <div className={'rounded-md border bg-gray-50 p-2 text-center'}>
             <a
@@ -149,7 +149,7 @@ export function RoadCardPage() {
 
           <div className="mt-3 grid grid-cols-2 gap-2">
             <button
-              className="flex items-center justify-center rounded border border-gray-300 p-1.5 px-2 text-sm font-medium"
+              className="flex items-center justify-center rounded-sm border border-gray-300 p-1.5 px-2 text-sm font-medium"
               onClick={() => {
                 downloadImage({
                   url: badgeUrl.toString(),
@@ -163,7 +163,7 @@ export function RoadCardPage() {
             </button>
             <button
               disabled={isCopied}
-              className="flex cursor-pointer items-center justify-center rounded border border-gray-300 p-1.5 px-2 text-sm font-medium disabled:bg-blue-50"
+              className="flex cursor-pointer items-center justify-center rounded-sm border border-gray-300 p-1.5 px-2 text-sm font-medium disabled:bg-blue-50"
               onClick={() => {
                 copyText(badgeUrl.toString());
                 markRoadCardDone();
diff --git a/src/components/RoadCard/StepCounter.tsx b/src/components/RoadCard/StepCounter.tsx
index 2367cc462..c4a809329 100644
--- a/src/components/RoadCard/StepCounter.tsx
+++ b/src/components/RoadCard/StepCounter.tsx
@@ -8,7 +8,7 @@ export function StepCounter(props: StepCounterProps) {
   return (
     <span
       className={
-        'flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-gray-300 text-white'
+        'flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-gray-300 text-white'
       }
     >
       {step}
diff --git a/src/components/RoadmapHeader.astro b/src/components/RoadmapHeader.astro
index 6a0e5904a..9cc0e22fc 100644
--- a/src/components/RoadmapHeader.astro
+++ b/src/components/RoadmapHeader.astro
@@ -91,7 +91,7 @@ const roadmapTitle =
         <MarkFavorite
           resourceId={roadmapId}
           resourceType='roadmap'
-          className='relative top-px mr-2 text-gray-500 !opacity-100 hover:text-gray-600 focus:outline-0 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:stroke-gray-400 [&>svg]:stroke-[0.4] hover:[&>svg]:stroke-gray-600 sm:[&>svg]:h-4 sm:[&>svg]:w-4'
+          className='relative top-px mr-2 text-gray-500 opacity-100! hover:text-gray-600 focus:outline-0 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:stroke-gray-400 [&>svg]:stroke-[0.4] [&>svg]:hover:stroke-gray-600 sm:[&>svg]:h-4 sm:[&>svg]:w-4'
           client:only='react'
         />
         <ScheduleButton
diff --git a/src/components/RoadmapTitleQuestion.tsx b/src/components/RoadmapTitleQuestion.tsx
index 82096a0f0..0565016e8 100644
--- a/src/components/RoadmapTitleQuestion.tsx
+++ b/src/components/RoadmapTitleQuestion.tsx
@@ -46,7 +46,7 @@ export function RoadmapTitleQuestion(props: RoadmapTitleQuestionProps) {
       )}
     >
       {isAnswerVisible && (
-        <div className="fixed left-0 right-0 top-0 z-[100] h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50"></div>
+        <div className="fixed left-0 right-0 top-0 z-100 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50"></div>
       )}
       <h2
         className="z-50 flex cursor-pointer select-none items-center px-2 py-2 text-sm font-medium"
@@ -56,17 +56,17 @@ export function RoadmapTitleQuestion(props: RoadmapTitleQuestionProps) {
           setIsAnswerVisible(!isAnswerVisible);
         }}
       >
-        <span className="flex flex-grow select-none items-center">
+        <span className="flex grow select-none items-center">
           <Info className="mr-1.5 inline-block h-4 w-4" strokeWidth={2.5} />
           {question}
         </span>
-        <span className="relative -top-px flex-shrink-0 text-gray-400">
+        <span className="relative -top-px shrink-0 text-gray-400">
           <ChevronDown className={`inline-block h-5 w-5`} />
         </span>
       </h2>
 
       <div
-        className={`absolute left-0 right-0 top-0 z-[100] mt-0 border bg-white ${
+        className={`absolute left-0 right-0 top-0 z-100 mt-0 border bg-white ${
           isAnswerVisible ? 'rounded-0 block sm:rounded-md' : 'hidden'
         }`}
         ref={ref}
@@ -86,11 +86,11 @@ export function RoadmapTitleQuestion(props: RoadmapTitleQuestionProps) {
             }}
             ref={h2Ref}
           >
-            <span className="flex flex-grow items-center">
+            <span className="flex grow items-center">
               <Info className="mr-2 inline-block h-4 w-4" strokeWidth={2.5} />
               {question}
             </span>
-            <span className="relative -top-px flex-shrink-0 text-gray-400">
+            <span className="relative -top-px shrink-0 text-gray-400">
               <ChevronUp className={`inline-block h-5 w-5`} />
             </span>
           </h2>
diff --git a/src/components/Roadmaps/CategoryFilterButton.tsx b/src/components/Roadmaps/CategoryFilterButton.tsx
index d989a0d26..6522fd3f1 100644
--- a/src/components/Roadmaps/CategoryFilterButton.tsx
+++ b/src/components/Roadmaps/CategoryFilterButton.tsx
@@ -12,7 +12,7 @@ export function CategoryFilterButton(props: CategoryFilterButtonProps) {
   return (
     <button
       className={cn(
-        'border-b bg-gradient-to-l py-1.5 pr-3 text-center text-sm text-gray-500 hover:text-gray-900 sm:text-right',
+        'border-b bg-linear-to-l py-1.5 pr-3 text-center text-sm text-gray-500 hover:text-gray-900 sm:text-right',
         {
           'from-white font-semibold text-gray-900':
             selected && category !== 'All Roadmaps',
diff --git a/src/components/Roadmaps/RoadmapCard.tsx b/src/components/Roadmaps/RoadmapCard.tsx
index f7e43ccaa..c031d0c41 100644
--- a/src/components/Roadmaps/RoadmapCard.tsx
+++ b/src/components/Roadmaps/RoadmapCard.tsx
@@ -14,7 +14,7 @@ export function RoadmapCard(props: RoadmapCardProps) {
   return (
     <a
       key={roadmap.link}
-      className="relative rounded-md border bg-white px-3 py-2 text-left text-sm shadow-sm transition-all hover:border-gray-300 hover:bg-gray-50"
+      className="relative rounded-md border bg-white px-3 py-2 text-left text-sm shadow-xs transition-all hover:border-gray-300 hover:bg-gray-50"
       href={roadmap.link}
     >
       {roadmap.title}
diff --git a/src/components/Roadmaps/RoadmapsPage.tsx b/src/components/Roadmaps/RoadmapsPage.tsx
index defe3e3e8..2e1a623a4 100644
--- a/src/components/Roadmaps/RoadmapsPage.tsx
+++ b/src/components/Roadmaps/RoadmapsPage.tsx
@@ -566,7 +566,7 @@ export function RoadmapsPage() {
       <div className="container relative flex flex-col gap-4 sm:flex-row">
         <div
           className={cn(
-            'hidden w-full flex-col from-gray-100 sm:w-[180px] sm:border-r sm:bg-gradient-to-l sm:pt-6',
+            'hidden w-full flex-col from-gray-100 sm:w-[180px] sm:border-r sm:bg-linear-to-l sm:pt-6',
             {
               'hidden sm:flex': !isFilterOpen,
               'z-50 flex': isFilterOpen,
@@ -601,7 +601,7 @@ export function RoadmapsPage() {
             </div>
           </div>
         </div>
-        <div className="flex flex-grow flex-col gap-6 pb-20 pt-2 sm:pt-8">
+        <div className="flex grow flex-col gap-6 pb-20 pt-2 sm:pt-8">
           {visibleGroups.map((group) => (
             <div key={`${group.group}-${group.roadmaps.length}`}>
               <h2 className="mb-2 text-xs uppercase tracking-wide text-gray-400">
diff --git a/src/components/SQLCourse/BuyButton.tsx b/src/components/SQLCourse/BuyButton.tsx
index db99b03f6..a7b293306 100644
--- a/src/components/SQLCourse/BuyButton.tsx
+++ b/src/components/SQLCourse/BuyButton.tsx
@@ -120,7 +120,7 @@ export function BuyButton(props: BuyButtonProps) {
           onClick={onBuyClick}
           disabled={isLoadingPricing}
           className={cn(
-            'group relative inline-flex w-full min-w-[235px] items-center justify-center overflow-hidden rounded-xl bg-gradient-to-r from-yellow-500 to-yellow-300 px-8 py-3 text-base font-semibold text-black transition-all duration-300 ease-out hover:scale-[1.02] hover:shadow-[0_0_30px_rgba(234,179,8,0.4)] focus:outline-none active:ring-0 md:w-auto md:rounded-full md:text-lg',
+            'group relative inline-flex w-full min-w-[235px] items-center justify-center overflow-hidden rounded-xl bg-linear-to-r from-yellow-500 to-yellow-300 px-8 py-3 text-base font-semibold text-black transition-all duration-300 ease-out hover:scale-[1.02] hover:shadow-[0_0_30px_rgba(234,179,8,0.4)] focus:outline-hidden active:ring-0 md:w-auto md:rounded-full md:text-lg',
             (isLoadingPricing || isCreatingCheckoutSession) &&
               'striped-loader-yellow pointer-events-none scale-105 bg-yellow-500',
           )}
@@ -182,7 +182,7 @@ export function BuyButton(props: BuyButtonProps) {
         onClick={onBuyClick}
         disabled={isLoadingPricing}
         className={cn(
-          'group relative inline-flex min-w-[220px] items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-yellow-500 to-yellow-300 px-8 py-2 font-medium text-black transition-all duration-300 ease-out hover:scale-[1.02] hover:shadow-[0_0_30px_rgba(234,179,8,0.4)] focus:outline-none',
+          'group relative inline-flex min-w-[220px] items-center justify-center overflow-hidden rounded-full bg-linear-to-r from-yellow-500 to-yellow-300 px-8 py-2 font-medium text-black transition-all duration-300 ease-out hover:scale-[1.02] hover:shadow-[0_0_30px_rgba(234,179,8,0.4)] focus:outline-hidden',
           (isLoadingPricing || isCreatingCheckoutSession) &&
             'striped-loader-yellow pointer-events-none bg-yellow-500',
         )}
diff --git a/src/components/SQLCourse/ChapterRow.tsx b/src/components/SQLCourse/ChapterRow.tsx
index 181fdf85b..0a1fe251e 100644
--- a/src/components/SQLCourse/ChapterRow.tsx
+++ b/src/components/SQLCourse/ChapterRow.tsx
@@ -48,20 +48,20 @@ export function ChapterRow(props: ChapterRowProps) {
         onClick={() => isExpandable && setIsExpanded(!isExpanded)}
         className={cn(
           'relative rounded-xl border border-zinc-800 bg-zinc-800 p-6',
-          'bg-gradient-to-br from-zinc-900/90 via-zinc-900/70 to-zinc-900/50',
+          'bg-linear-to-br from-zinc-900/90 via-zinc-900/70 to-zinc-900/50',
           !isExpanded &&
-            'hover:bg-gradient-to-br hover:from-zinc-900/95 hover:via-zinc-900/80 hover:to-zinc-900/60',
+            'hover:bg-linear-to-br hover:from-zinc-900/95 hover:via-zinc-900/80 hover:to-zinc-900/60',
           !isExpanded &&
             'hover:cursor-pointer hover:shadow-[0_0_30px_rgba(0,0,0,0.2)]',
           isExpanded && 'rounded-b-none border-b-0',
         )}
       >
         <div className="flex items-start gap-4">
-          <div className="hidden flex-shrink-0 md:block">
+          <div className="hidden shrink-0 md:block">
             <div className="rounded-full bg-yellow-500/10 p-3">{icon}</div>
           </div>
 
-          <div className="flex-grow">
+          <div className="grow">
             <h3 className="text-xl font-semibold tracking-wide text-white">
               <span className="inline text-gray-500 md:hidden">
                 {counter}.{' '}
@@ -81,7 +81,7 @@ export function ChapterRow(props: ChapterRowProps) {
           </div>
 
           {isExpandable && (
-            <div className="flex-shrink-0 rounded-full bg-zinc-800/80 p-2 text-zinc-400 group-hover:bg-zinc-800 group-hover:text-yellow-500">
+            <div className="shrink-0 rounded-full bg-zinc-800/80 p-2 text-zinc-400 group-hover:bg-zinc-800 group-hover:text-yellow-500">
               <ChevronDown
                 className={cn(
                   'h-4 w-4 transition-transform',
@@ -94,7 +94,7 @@ export function ChapterRow(props: ChapterRowProps) {
       </div>
 
       {isExpanded && (
-        <div className="rounded-b-xl border border-t-0 border-zinc-800 bg-gradient-to-br from-zinc-900/50 via-zinc-900/30 to-zinc-900/20">
+        <div className="rounded-b-xl border border-t-0 border-zinc-800 bg-linear-to-br from-zinc-900/50 via-zinc-900/30 to-zinc-900/20">
           <div className="grid grid-cols-1 divide-zinc-800 md:grid-cols-2 md:divide-x">
             {regularLessons.length > 0 && (
               <div className="p-6 pb-0 md:pb-6">
diff --git a/src/components/SQLCourse/CourseFeature.tsx b/src/components/SQLCourse/CourseFeature.tsx
index a26f18a9f..d3a5ec715 100644
--- a/src/components/SQLCourse/CourseFeature.tsx
+++ b/src/components/SQLCourse/CourseFeature.tsx
@@ -34,7 +34,7 @@ export function CourseFeature(props: CourseFeatureProps) {
             setIsZoomed(false);
             setIsExpanded(false);
           }}
-          className="fixed inset-0 z-[999] flex cursor-zoom-out items-center justify-center bg-black bg-opacity-75"
+          className="fixed inset-0 z-999 flex cursor-zoom-out items-center justify-center bg-black bg-opacity-75"
         >
           <img
             src={imgUrl}
@@ -62,7 +62,7 @@ export function CourseFeature(props: CourseFeatureProps) {
             },
           )}
         >
-          <span className="flex flex-grow items-center space-x-3">
+          <span className="flex grow items-center space-x-3">
             <Icon />
             <span>{title}</span>
           </span>
diff --git a/src/components/SQLCourse/FloatingPurchase.tsx b/src/components/SQLCourse/FloatingPurchase.tsx
index ce79daac0..d15f740b3 100644
--- a/src/components/SQLCourse/FloatingPurchase.tsx
+++ b/src/components/SQLCourse/FloatingPurchase.tsx
@@ -18,7 +18,7 @@ export function FloatingPurchase() {
   return (
     <div
       className={cn(
-        'fixed bottom-0 left-0 right-0 z-[5] flex items-center justify-center transition-all duration-200 ease-out',
+        'fixed bottom-0 left-0 right-0 z-5 flex items-center justify-center transition-all duration-200 ease-out',
         {
           'pointer-events-none -bottom-10 opacity-0': isHidden,
         },
diff --git a/src/components/SQLCourse/SQLCoursePage.tsx b/src/components/SQLCourse/SQLCoursePage.tsx
index f9d218d41..df526be5b 100644
--- a/src/components/SQLCourse/SQLCoursePage.tsx
+++ b/src/components/SQLCourse/SQLCoursePage.tsx
@@ -242,7 +242,7 @@ export function SQLCoursePage() {
   ];
 
   return (
-    <div className="flex flex-grow flex-col items-center bg-gradient-to-b from-zinc-900 to-zinc-950 px-4 pb-52 pt-3 text-zinc-400 md:px-10 md:pt-8">
+    <div className="flex grow flex-col items-center bg-linear-to-b from-zinc-900 to-zinc-950 px-4 pb-52 pt-3 text-zinc-400 md:px-10 md:pt-8">
       <div className="flex w-full items-center justify-between">
         <a
           href="https://roadmap.sh"
@@ -264,7 +264,7 @@ export function SQLCoursePage() {
 
         <h1 className="mt-5 text-4xl font-bold tracking-tight text-white md:mt-8 md:text-7xl">
           Master SQL <span className="hidden min-[384px]:inline">Queries</span>
-          <div className="mt-2.5 bg-gradient-to-r from-yellow-500 to-yellow-300 bg-clip-text text-transparent md:text-6xl lg:text-7xl">
+          <div className="mt-2.5 bg-linear-to-r from-yellow-500 to-yellow-300 bg-clip-text text-transparent md:text-6xl lg:text-7xl">
             From Basic to Advanced
           </div>
         </h1>
@@ -348,7 +348,7 @@ export function SQLCoursePage() {
       <div className="mt-7 w-full max-w-3xl text-left md:mt-9">
         <p className="text-lg leading-normal md:text-xl">
           Oh, and you get the{' '}
-          <span className="bg-gradient-to-r from-yellow-500 to-yellow-300 bg-clip-text text-transparent">
+          <span className="bg-linear-to-r from-yellow-500 to-yellow-300 bg-clip-text text-transparent">
             lifetime access
           </span>{' '}
           to the course including all the future updates. Also, there is a
diff --git a/src/components/SQLCourse/SectionHeader.tsx b/src/components/SQLCourse/SectionHeader.tsx
index 8f3c50e2d..dc0610603 100644
--- a/src/components/SQLCourse/SectionHeader.tsx
+++ b/src/components/SQLCourse/SectionHeader.tsx
@@ -16,7 +16,7 @@ export function SectionHeader(props: SectionHeaderProps) {
           <div className="inline-flex items-center rounded-xl ">
             <span className="text-2xl md:text-3xl font-medium text-zinc-200">{title}</span>
           </div>
-          <div className="h-[1px] flex-grow bg-gradient-to-r from-yellow-500/20 to-transparent"></div>
+          <div className="h-[1px] grow bg-linear-to-r from-yellow-500/20 to-transparent"></div>
         </div>
       </div>
       {typeof description === 'string' ? (
diff --git a/src/components/SQLCourse/Spotlight.tsx b/src/components/SQLCourse/Spotlight.tsx
index 25be38bfc..3fccf82f4 100644
--- a/src/components/SQLCourse/Spotlight.tsx
+++ b/src/components/SQLCourse/Spotlight.tsx
@@ -11,7 +11,7 @@ export function Spotlight(props: SpotlightProps) {
   return (
     <svg
       className={cn(
-        'animate-spotlight pointer-events-none absolute z-[1] h-[169%] w-[238%] opacity-0 lg:w-[138%]',
+        'animate-spotlight pointer-events-none absolute z-1 h-[169%] w-[238%] opacity-0 lg:w-[138%]',
         className,
       )}
       xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/Schedule/ScheduleButton.tsx b/src/components/Schedule/ScheduleButton.tsx
index caf24215f..6d9ba392d 100644
--- a/src/components/Schedule/ScheduleButton.tsx
+++ b/src/components/Schedule/ScheduleButton.tsx
@@ -32,7 +32,7 @@ export function ScheduleButton(props: ScheduleButtonProps) {
           setIsModalOpen(true);
         }}
       >
-        <Calendar className="h-4 w-4 flex-shrink-0" />
+        <Calendar className="h-4 w-4 shrink-0" />
         <span className="hidden sm:inline">Schedule Learning Time</span>
       </button>
     </>
diff --git a/src/components/ShareOptions/ShareFriendList.tsx b/src/components/ShareOptions/ShareFriendList.tsx
index 4c58da83b..31f236660 100644
--- a/src/components/ShareOptions/ShareFriendList.tsx
+++ b/src/components/ShareOptions/ShareFriendList.tsx
@@ -85,8 +85,8 @@ export function ShareFriendList(props: ShareFriendListProps) {
         >
           <div className="relative top-[1px] h-10 w-10 shrink-0 rounded-full bg-gray-200" />
           <div className="inline-grid w-full">
-            <div className="h-5 w-2/4 rounded bg-gray-200" />
-            <div className="mt-1 h-5 w-3/4 rounded bg-gray-200" />
+            <div className="h-5 w-2/4 rounded-sm bg-gray-200" />
+            <div className="mt-1 h-5 w-3/4 rounded-sm bg-gray-200" />
           </div>
         </li>
       ))}
@@ -204,7 +204,7 @@ export function ShareFriendList(props: ShareFriendListProps) {
       )}
 
       {friends.length === 0 && !isLoading && (
-        <div className="flex h-full flex-grow flex-col items-center justify-center rounded-md border bg-gray-50 text-center">
+        <div className="flex h-full grow flex-col items-center justify-center rounded-md border bg-gray-50 text-center">
           <Users2 className="mb-3 h-10 w-10 text-gray-300" />
           <p className="font-medium text-gray-500">
             You do not have any friends yet. <br />{' '}
diff --git a/src/components/ShareOptions/ShareSuccess.tsx b/src/components/ShareOptions/ShareSuccess.tsx
index 20f9fa684..320623d17 100644
--- a/src/components/ShareOptions/ShareSuccess.tsx
+++ b/src/components/ShareOptions/ShareSuccess.tsx
@@ -64,7 +64,7 @@ export function ShareSuccess(props: ShareSuccessProps) {
 
       <input
         type="text"
-        className="mt-6 w-full rounded-md border bg-gray-50 p-2 px-2.5 text-gray-700 focus:outline-none"
+        className="mt-6 w-full rounded-md border bg-gray-50 p-2 px-2.5 text-gray-700 focus:outline-hidden"
         value={shareLink}
         readOnly
         onClick={(e) => {
@@ -115,7 +115,7 @@ export function ShareSuccess(props: ShareSuccessProps) {
                     href={socialShareLink.href}
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="flex h-8 w-8 items-center justify-center gap-1.5 rounded-md border bg-gray-50 text-sm text-gray-700 hover:bg-gray-100 focus:outline-none"
+                    className="flex h-8 w-8 items-center justify-center gap-1.5 rounded-md border bg-gray-50 text-sm text-gray-700 hover:bg-gray-100 focus:outline-hidden"
                   >
                     <socialShareLink.icon className="h-4 w-4" />
                   </a>
@@ -129,7 +129,7 @@ export function ShareSuccess(props: ShareSuccessProps) {
       <div className="mt-4 flex flex-col items-center justify-end gap-2">
         <button
           className={cn(
-            'flex w-full items-center justify-center gap-1.5 rounded bg-black px-4 py-2.5 text-sm font-medium text-white hover:opacity-80',
+            'flex w-full items-center justify-center gap-1.5 rounded-sm bg-black px-4 py-2.5 text-sm font-medium text-white hover:opacity-80',
             isCopied && 'bg-green-300 text-green-800',
           )}
           disabled={isCopied}
@@ -142,7 +142,7 @@ export function ShareSuccess(props: ShareSuccessProps) {
         </button>
         <button
           className={cn(
-            'flex w-full items-center justify-center gap-1.5 rounded border border-black px-4 py-2 text-sm font-medium hover:bg-gray-100',
+            'flex w-full items-center justify-center gap-1.5 rounded-sm border border-black px-4 py-2 text-sm font-medium hover:bg-gray-100',
           )}
           onClick={onClose}
         >
diff --git a/src/components/ShareOptions/ShareTeamMemberList.tsx b/src/components/ShareOptions/ShareTeamMemberList.tsx
index 27bb77893..7436967b1 100644
--- a/src/components/ShareOptions/ShareTeamMemberList.tsx
+++ b/src/components/ShareOptions/ShareTeamMemberList.tsx
@@ -91,8 +91,8 @@ export function ShareTeamMemberList(props: ShareTeamMemberListProps) {
         >
           <div className="h-8 w-8 shrink-0 rounded-full bg-gray-200" />
           <div className="inline-grid w-full">
-            <div className="h-5 w-2/4 rounded bg-gray-200" />
-            <div className="mt-1 h-5 w-3/4 rounded bg-gray-200" />
+            <div className="h-5 w-2/4 rounded-sm bg-gray-200" />
+            <div className="mt-1 h-5 w-3/4 rounded-sm bg-gray-200" />
           </div>
         </li>
       ))}
diff --git a/src/components/ShareOptions/TransferToTeamList.tsx b/src/components/ShareOptions/TransferToTeamList.tsx
index e703c2d7c..ef16a2be3 100644
--- a/src/components/ShareOptions/TransferToTeamList.tsx
+++ b/src/components/ShareOptions/TransferToTeamList.tsx
@@ -63,7 +63,7 @@ export function TransferToTeamList(props: TransferToTeamListProps) {
           <div className="relative flex w-full items-center gap-2 rounded-md border p-2">
             <div className="h-6 w-6 shrink-0 animate-pulse rounded-full bg-gray-200" />
             <div className="inline-grid w-full">
-              <div className="h-4 animate-pulse rounded bg-gray-200" />
+              <div className="h-4 animate-pulse rounded-sm bg-gray-200" />
             </div>
           </div>
         </li>
diff --git a/src/components/ShareRoadmapButton.tsx b/src/components/ShareRoadmapButton.tsx
index 58eb06c7f..569910376 100644
--- a/src/components/ShareRoadmapButton.tsx
+++ b/src/components/ShareRoadmapButton.tsx
@@ -68,14 +68,14 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
       </button>
 
       {isDropdownOpen && (
-        <div className="absolute right-0 z-[999] mt-1 w-40 rounded-md bg-slate-800 text-sm text-white shadow-lg ring-1 ring-black ring-opacity-5 w-[175px]">
+        <div className="absolute right-0 z-999 mt-1 w-40 rounded-md bg-slate-800 text-sm text-white shadow-lg ring-1 ring-black ring-opacity-5 w-[175px]">
           <div className="flex flex-col px-1 py-1">
             <button
               onClick={() => {
                 copyText(pageUrl);
                 setIsDropdownOpen(false);
               }}
-              className="flex w-full items-center gap-2 rounded-sm px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
+              className="flex w-full items-center gap-2 rounded-xs px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
             >
               <div className="flex w-[20px] items-center justify-center">
                 <Copy size="15px" className="text-slate-400" />
@@ -88,7 +88,7 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
                   setIsDropdownOpen(false);
                   setIsEmbedModalOpen(true);
                 }}
-                className="flex w-full items-center gap-2 rounded-sm px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
+                className="flex w-full items-center gap-2 rounded-xs px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
               >
                 <div className="flex w-[20px] items-center justify-center">
                   <Code2 size="15px" className="text-slate-400" />
@@ -99,9 +99,9 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
             <a
               href={twitterUrl}
               target={'_blank'}
-              className="mt-1 flex w-full items-center gap-2 rounded-sm px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
+              className="mt-1 flex w-full items-center gap-2 rounded-xs px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
             >
-              <div className="flex w-[20px] flex-shrink-0 items-center justify-center">
+              <div className="flex w-[20px] shrink-0 items-center justify-center">
                 <TwitterIcon className="h-[16px] text-slate-400" />
               </div>
               Twitter
@@ -109,7 +109,7 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
             <a
               href={fbUrl}
               target={'_blank'}
-              className="flex w-full items-center gap-2 rounded-sm px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
+              className="flex w-full items-center gap-2 rounded-xs px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
             >
               <div className="flex w-[20px] items-center justify-center">
                 <Facebook size="16px" className="text-slate-400" />
@@ -119,7 +119,7 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
             <a
               href={hnUrl}
               target={'_blank'}
-              className="flex w-full items-center gap-2 rounded-sm px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
+              className="flex w-full items-center gap-2 rounded-xs px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
             >
               <div className="flex w-[20px] items-center justify-center">
                 <img
@@ -133,7 +133,7 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
             <a
               href={redditUrl}
               target={'_blank'}
-              className="flex w-full items-center gap-2 rounded-sm px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
+              className="flex w-full items-center gap-2 rounded-xs px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
             >
               <div className="flex w-[20px] items-center justify-center">
                 <img
@@ -147,7 +147,7 @@ export function ShareRoadmapButton(props: ShareRoadmapButtonProps) {
             <a
               href={linkedinUrl}
               target={'_blank'}
-              className="flex w-full items-center gap-2 rounded-sm px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
+              className="flex w-full items-center gap-2 rounded-xs px-2 py-2 text-sm text-slate-100 hover:bg-slate-700"
             >
               <div className="flex w-[20px] items-center justify-center">
                 <Linkedin size="16px" className="text-slate-400" />
diff --git a/src/components/Stepper.tsx b/src/components/Stepper.tsx
index 80df24f6c..a7110c2f6 100644
--- a/src/components/Stepper.tsx
+++ b/src/components/Stepper.tsx
@@ -37,10 +37,10 @@ export function Stepper(props: StepperProps) {
               {!isComplete && (
                 <span className="mr-2 font-semibold">{stepCounter + 1}</span>
               )}
-              <span className="flex flex-grow">{step.label}</span>
+              <span className="flex grow">{step.label}</span>
             </li>
             {!isLast && (
-              <li className={'mx-5 flex flex-grow rounded-md bg-gray-200'}>
+              <li className={'mx-5 flex grow rounded-md bg-gray-200'}>
                 <span className={'h-1 w-full'} />
               </li>
             )}
diff --git a/src/components/TabLink.tsx b/src/components/TabLink.tsx
index 2314d02c8..59501608e 100644
--- a/src/components/TabLink.tsx
+++ b/src/components/TabLink.tsx
@@ -53,7 +53,7 @@ export function TabLink(props: TabLinkProps) {
   if (isActive) {
     return (
       <span className={className}>
-        <Icon className="h-4 w-4 flex-shrink-0" />
+        <Icon className="h-4 w-4 shrink-0" />
         <span className={textClass}>{text}</span>
         {badgeNode}
       </span>
@@ -69,7 +69,7 @@ export function TabLink(props: TabLinkProps) {
       href={url}
       className={className}
     >
-      <Icon className="h-4 w-4 flex-shrink-0" />
+      <Icon className="h-4 w-4 shrink-0" />
       <span className={textClass}>{text}</span>
       {badgeNode}
     </a>
diff --git a/src/components/TableOfContent/TableOfContent.tsx b/src/components/TableOfContent/TableOfContent.tsx
index a4a721be6..a71d01bb8 100644
--- a/src/components/TableOfContent/TableOfContent.tsx
+++ b/src/components/TableOfContent/TableOfContent.tsx
@@ -25,7 +25,7 @@ export function TableOfContent(props: TableOfContentProps) {
       className={cn(
         'relative min-w-[250px] px-5 pt-0 max-lg:min-w-full max-lg:max-w-full max-lg:border-none max-lg:px-0 lg:pt-5',
         {
-          'top-0 lg:!sticky': totalRows <= 20,
+          'top-0 lg:sticky!': totalRows <= 20,
         },
       )}
     >
@@ -46,7 +46,7 @@ export function TableOfContent(props: TableOfContentProps) {
 
       <ol
         className={cn(
-          'mt-0.5 space-y-0 max-lg:absolute max-lg:top-full max-lg:mt-0 max-lg:w-full max-lg:bg-white max-lg:shadow',
+          'mt-0.5 space-y-0 max-lg:absolute max-lg:top-full max-lg:mt-0 max-lg:w-full max-lg:bg-white max-lg:shadow-sm',
           !isOpen && 'hidden lg:block',
           isOpen && 'block',
         )}
diff --git a/src/components/TeamActivity/TeamActivityPage.tsx b/src/components/TeamActivity/TeamActivityPage.tsx
index e655536c1..f17acb1bc 100644
--- a/src/components/TeamActivity/TeamActivityPage.tsx
+++ b/src/components/TeamActivity/TeamActivityPage.tsx
@@ -192,7 +192,7 @@ export function TeamActivityPage(props: TeamActivityPageProps) {
   const sectionHeading = (
     <h3 className="mb-3 flex h-[20px] w-full items-center justify-between text-xs uppercase text-gray-400">
       Team Activity
-      <span className="mx-3 h-[1px] flex-grow bg-gray-200" />
+      <span className="mx-3 h-[1px] grow bg-gray-200" />
       {canManageCurrentTeam && (
         <a
           href={`/team/progress?t=${teamId}`}
diff --git a/src/components/TeamActivity/TeamActivityTopicsModal.tsx b/src/components/TeamActivity/TeamActivityTopicsModal.tsx
index d73c1eb17..59649bc72 100644
--- a/src/components/TeamActivity/TeamActivityTopicsModal.tsx
+++ b/src/components/TeamActivity/TeamActivityTopicsModal.tsx
@@ -35,7 +35,7 @@ export function TeamActivityTopicsModal(props: TeamActivityTopicsModalProps) {
         onClose();
       }}
     >
-      <div className={`popup-body relative rounded-lg bg-white p-4 shadow`}>
+      <div className={`popup-body relative rounded-lg bg-white p-4 shadow-sm`}>
         <span className="mb-2 flex items-center justify-between text-lg font-semibold capitalize">
           <span className="flex items-center gap-2">
             {actionType.replace('_', ' ')}
diff --git a/src/components/TeamDropdown/TeamDropdown.tsx b/src/components/TeamDropdown/TeamDropdown.tsx
index 9d6c1c82e..614ad21c8 100644
--- a/src/components/TeamDropdown/TeamDropdown.tsx
+++ b/src/components/TeamDropdown/TeamDropdown.tsx
@@ -86,7 +86,7 @@ export function TeamDropdown() {
           <span>Choose Team</span>
         </span>
         <button
-          className="relative flex w-full cursor-pointer items-center justify-between rounded border p-2 text-sm hover:bg-gray-100"
+          className="relative flex w-full cursor-pointer items-center justify-between rounded-sm border p-2 text-sm hover:bg-gray-100"
           onClick={() => setShowDropdown(!showDropdown)}
         >
           {pendingTeamIds.length > 0 && (
@@ -125,7 +125,7 @@ export function TeamDropdown() {
             <ul>
               <li>
                 <a
-                  className="flex w-full cursor-pointer items-center gap-2 truncate rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+                  className="flex w-full cursor-pointer items-center gap-2 truncate rounded-sm p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
                   href="/account"
                 >
                   <span className="truncate">Personal Account</span>
@@ -142,10 +142,10 @@ export function TeamDropdown() {
                 return (
                   <li key={team?._id}>
                     <a
-                      className="flex w-full cursor-pointer items-center gap-2 rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+                      className="flex w-full cursor-pointer items-center gap-2 rounded-sm p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
                       href={`${pageLink}`}
                     >
-                      <span className="min-w-0 flex-grow truncate">
+                      <span className="min-w-0 grow truncate">
                         {team.name}
                       </span>
                       {pendingTeamIds.includes(team._id) && (
@@ -159,7 +159,7 @@ export function TeamDropdown() {
               })}
             </ul>
             <a
-              className="mt-2 flex w-full cursor-pointer items-center justify-center gap-2 rounded bg-gray-100 p-2 text-sm font-medium text-slate-800 hover:opacity-90"
+              className="mt-2 flex w-full cursor-pointer items-center justify-center gap-2 rounded-sm bg-gray-100 p-2 text-sm font-medium text-slate-800 hover:opacity-90"
               href="/team/new"
             >
               <span>+</span>
diff --git a/src/components/TeamMarketing/TeamHeroBanner.tsx b/src/components/TeamMarketing/TeamHeroBanner.tsx
index 1e77bbee1..2f8abc56a 100644
--- a/src/components/TeamMarketing/TeamHeroBanner.tsx
+++ b/src/components/TeamMarketing/TeamHeroBanner.tsx
@@ -28,7 +28,7 @@ export function TeamHeroBanner() {
     <div className="bg-white py-8 lg:py-12">
       <div className="container">
         <div className="flex flex-row items-center justify-start text-left lg:justify-between">
-          <div className="flex flex-grow flex-col">
+          <div className="flex grow flex-col">
             <h1 className="mb-0.5 text-2xl font-bold sm:mb-2.5 sm:text-4xl lg:mb-4 lg:text-5xl">
               Roadmaps for Teams
             </h1>
diff --git a/src/components/TeamMarketing/TeamPricing.tsx b/src/components/TeamMarketing/TeamPricing.tsx
index 6f4b940c4..371ef4239 100644
--- a/src/components/TeamMarketing/TeamPricing.tsx
+++ b/src/components/TeamMarketing/TeamPricing.tsx
@@ -46,7 +46,7 @@ export function TeamPricing() {
                   localStorage.setItem('redirect', '/team/new');
                 }}
                 href={isAuthenticated ? '/team/new' : '/signup'}
-                className="block rounded-md bg-purple-600 px-6 py-2 text-center text-sm font-medium leading-6 text-white shadow transition hover:bg-gray-700 hover:shadow-lg focus:outline-none"
+                className="block rounded-md bg-purple-600 px-6 py-2 text-center text-sm font-medium leading-6 text-white shadow-sm transition hover:bg-gray-700 hover:shadow-lg focus:outline-hidden"
               >
                 {isAuthenticated ? 'Create your Team' : 'Sign up for free'}
               </a>
@@ -61,7 +61,7 @@ export function TeamPricing() {
               <p className="text-gray-600">Onboarding support</p>
             </div>
           </div>
-          <div className="flex flex-grow flex-col items-center justify-center rounded-md border border-gray-300 py-8">
+          <div className="flex grow flex-col items-center justify-center rounded-md border border-gray-300 py-8">
             <img
               alt={'waving hand'}
               src={'/images/team-promo/contact.png'}
diff --git a/src/components/TeamMembers/InviteMemberPopup.tsx b/src/components/TeamMembers/InviteMemberPopup.tsx
index eb37ad43f..97c63cc73 100644
--- a/src/components/TeamMembers/InviteMemberPopup.tsx
+++ b/src/components/TeamMembers/InviteMemberPopup.tsx
@@ -60,7 +60,7 @@ export function InviteMemberPopup(props: InviteMemberPopupProps) {
       <div className="relative h-full w-full max-w-md p-4 md:h-auto">
         <div
           ref={popupBodyRef}
-          className="popup-body relative rounded-lg bg-white p-4 shadow"
+          className="popup-body relative rounded-lg bg-white p-4 shadow-sm"
         >
           <h3 className="mb-1.5 text-xl font-medium sm:text-2xl">
             Invite Member
@@ -76,7 +76,7 @@ export function InviteMemberPopup(props: InviteMemberPopupProps) {
                 type="email"
                 name="invite-member"
                 id="invite-member"
-                className="mt-2 block w-full rounded-md border border-gray-300 px-3 py-2 outline-none placeholder:text-gray-400 focus:border-gray-400"
+                className="mt-2 block w-full rounded-md border border-gray-300 px-3 py-2 outline-hidden placeholder:text-gray-400 focus:border-gray-400"
                 placeholder="Enter email address"
                 required
                 autoFocus
@@ -104,14 +104,14 @@ export function InviteMemberPopup(props: InviteMemberPopupProps) {
                 type="button"
                 disabled={isLoading}
                 onClick={handleClosePopup}
-                className="flex-grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center"
+                className="grow cursor-pointer rounded-lg bg-gray-200 py-2 text-center"
               >
                 Cancel
               </button>
               <button
                 type="submit"
                 disabled={isLoading || !email}
-                className="flex-grow cursor-pointer rounded-lg bg-black py-2 text-center text-white disabled:opacity-40"
+                className="grow cursor-pointer rounded-lg bg-black py-2 text-center text-white disabled:opacity-40"
               >
                 {isLoading ? 'Please wait ..' : 'Invite'}
               </button>
diff --git a/src/components/TeamMembers/MemberActionDropdown.tsx b/src/components/TeamMembers/MemberActionDropdown.tsx
index ac4916eed..b2ee89177 100644
--- a/src/components/TeamMembers/MemberActionDropdown.tsx
+++ b/src/components/TeamMembers/MemberActionDropdown.tsx
@@ -94,7 +94,7 @@ export function MemberActionDropdown({
                   <button
                     onClick={action.handleClick}
                     disabled={isLoading}
-                    className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+                    className="flex w-full cursor-pointer items-center rounded-sm p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
                   >
                     {action.name}
                   </button>
diff --git a/src/components/TeamProgress/GroupRoadmapItem.tsx b/src/components/TeamProgress/GroupRoadmapItem.tsx
index 27142e6fd..c09465720 100644
--- a/src/components/TeamProgress/GroupRoadmapItem.tsx
+++ b/src/components/TeamProgress/GroupRoadmapItem.tsx
@@ -26,7 +26,7 @@ export function GroupRoadmapItem(props: GroupRoadmapItemProps) {
     <>
       <div className="flex h-full min-h-[270px] flex-col rounded-md border">
         <div className="flex items-center gap-3 border-b p-3">
-          <div className="flex min-w-0 flex-grow items-center justify-between">
+          <div className="flex min-w-0 grow items-center justify-between">
             <h3 className="truncate font-medium">{resourceTitle}</h3>
             <a
               href={roadmapLink}
@@ -47,7 +47,7 @@ export function GroupRoadmapItem(props: GroupRoadmapItemProps) {
 
             return (
               <button
-                className={`group relative w-full overflow-hidden rounded-md border p-2 hover:border-gray-300 hover:text-black focus:outline-none ${
+                className={`group relative w-full overflow-hidden rounded-md border p-2 hover:border-gray-300 hover:text-black focus:outline-hidden ${
                   isMyProgress ? 'border-green-500 hover:border-green-600' : ''
                 }`}
                 key={member?.member._id}
@@ -71,7 +71,7 @@ export function GroupRoadmapItem(props: GroupRoadmapItemProps) {
                       alt={member.member.name || ''}
                       className="h-5 w-5 shrink-0 rounded-full"
                     />
-                    <span className="inline-grid grid-cols-[auto,32px] items-center">
+                    <span className="inline-grid grid-cols-[auto_32px] items-center">
                       <span className="mr-[5px] truncate">
                         {member?.member?.name}
                       </span>
diff --git a/src/components/TeamProgress/MemberCustomProgressModal.tsx b/src/components/TeamProgress/MemberCustomProgressModal.tsx
index 95f47ffa1..9581d7875 100644
--- a/src/components/TeamProgress/MemberCustomProgressModal.tsx
+++ b/src/components/TeamProgress/MemberCustomProgressModal.tsx
@@ -218,13 +218,13 @@ export function MemberCustomProgressModal(props: ProgressMapProps) {
   }, []);
 
   return (
-    <div className="fixed left-0 right-0 top-0 z-[100] h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
+    <div className="fixed left-0 right-0 top-0 z-100 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
       <div
         id="original-roadmap"
         className="relative mx-auto h-full w-full max-w-4xl p-4 md:h-auto"
       >
         <div
-          className="relative rounded-lg bg-white pt-[1px] shadow"
+          className="relative rounded-lg bg-white pt-[1px] shadow-sm"
           ref={popupBodyEl}
         >
           <MemberProgressModalHeader
diff --git a/src/components/TeamProgress/MemberProgressItem.tsx b/src/components/TeamProgress/MemberProgressItem.tsx
index b20875999..aea8dc416 100644
--- a/src/components/TeamProgress/MemberProgressItem.tsx
+++ b/src/components/TeamProgress/MemberProgressItem.tsx
@@ -71,7 +71,7 @@ export function MemberProgressItem(props: MemberProgressItemProps) {
               </a>
             )}
             {isMyProgress && (
-              <div className="inline-grid grid-cols-[auto,32px] items-center gap-1.5">
+              <div className="inline-grid grid-cols-[auto_32px] items-center gap-1.5">
                 <a
                   href={memberDetailsUrl}
                   className={cn(
@@ -108,7 +108,7 @@ export function MemberProgressItem(props: MemberProgressItemProps) {
                       progress.isCustomResource!,
                     )
                   }
-                  className="group relative overflow-hidden rounded-md border p-2 hover:border-gray-300 hover:text-black focus:outline-none"
+                  className="group relative overflow-hidden rounded-md border p-2 hover:border-gray-300 hover:text-black focus:outline-hidden"
                   key={progress.resourceId}
                 >
                   <span className="relative z-10 flex items-center justify-between text-sm">
diff --git a/src/components/TeamProgress/MemberProgressModal.tsx b/src/components/TeamProgress/MemberProgressModal.tsx
index 09ff67389..e227adbbd 100644
--- a/src/components/TeamProgress/MemberProgressModal.tsx
+++ b/src/components/TeamProgress/MemberProgressModal.tsx
@@ -260,14 +260,14 @@ export function MemberProgressModal(props: ProgressMapProps) {
   }, [member]);
 
   return (
-    <div className="fixed left-0 right-0 top-0 z-[100] h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
+    <div className="fixed left-0 right-0 top-0 z-100 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
       <div
         id={'customized-roadmap'}
         className="relative mx-auto h-full w-full max-w-4xl p-4 md:h-auto"
       >
         <div
           ref={popupBodyEl}
-          className="popup-body relative rounded-lg bg-white pt-[1px] shadow"
+          className="popup-body relative rounded-lg bg-white pt-[1px] shadow-sm"
         >
           <MemberProgressModalHeader
             resourceId={resourceId}
diff --git a/src/components/TeamProgress/MemberProgressModalHeader.tsx b/src/components/TeamProgress/MemberProgressModalHeader.tsx
index 87f7260d1..10785d68e 100644
--- a/src/components/TeamProgress/MemberProgressModalHeader.tsx
+++ b/src/components/TeamProgress/MemberProgressModalHeader.tsx
@@ -103,7 +103,7 @@ export function MemberProgressModalHeader(
             isLoading ? 'striped-loader' : ''
           }`}
         >
-          <span className="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
+          <span className="mr-2.5 block rounded-xs bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
             <span>{progressPercentage}</span>% Done
           </span>
 
@@ -116,7 +116,7 @@ export function MemberProgressModalHeader(
             isLoading ? 'striped-loader' : ''
           }`}
         >
-          <span className="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
+          <span className="mr-2.5 block rounded-xs bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
             <span>{progressPercentage}</span>% Done
           </span>
 
diff --git a/src/components/TeamRoadmapsList/RoadmapActionDropdown.tsx b/src/components/TeamRoadmapsList/RoadmapActionDropdown.tsx
index c8561859d..7a5ccc956 100644
--- a/src/components/TeamRoadmapsList/RoadmapActionDropdown.tsx
+++ b/src/components/TeamRoadmapsList/RoadmapActionDropdown.tsx
@@ -31,7 +31,7 @@ export function RoadmapActionDropdown(props: RoadmapActionDropdownProps) {
       <button
         disabled={false}
         onClick={() => setIsOpen(!isOpen)}
-        className="flex items-center gap-1 rounded-md border border-gray-300 bg-white px-2 py-1.5 text-xs hover:bg-gray-50 focus:outline-none sm:hidden"
+        className="flex items-center gap-1 rounded-md border border-gray-300 bg-white px-2 py-1.5 text-xs hover:bg-gray-50 focus:outline-hidden sm:hidden"
       >
         <MoreVertical size={14} />
         Options
@@ -50,7 +50,7 @@ export function RoadmapActionDropdown(props: RoadmapActionDropdownProps) {
                     setIsOpen(false);
                     onUpdateSharing();
                   }}
-                  className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+                  className="flex w-full cursor-pointer items-center rounded-sm p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
                 >
                   <Lock size={14} className="mr-2" />
                   Sharing
@@ -64,7 +64,7 @@ export function RoadmapActionDropdown(props: RoadmapActionDropdownProps) {
                     setIsOpen(false);
                     onCustomize();
                   }}
-                  className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+                  className="flex w-full cursor-pointer items-center rounded-sm p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
                 >
                   <Shapes size={14} className="mr-2" />
                   Customize
@@ -78,7 +78,7 @@ export function RoadmapActionDropdown(props: RoadmapActionDropdownProps) {
                     setIsOpen(false);
                     onDelete();
                   }}
-                  className="flex w-full cursor-pointer items-center rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
+                  className="flex w-full cursor-pointer items-center rounded-sm p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
                 >
                   <Trash2 size={14} className="mr-2" />
                   Delete
diff --git a/src/components/TeamRoadmapsList/TeamRoadmaps.tsx b/src/components/TeamRoadmapsList/TeamRoadmaps.tsx
index a33156a19..9058f96c7 100644
--- a/src/components/TeamRoadmapsList/TeamRoadmaps.tsx
+++ b/src/components/TeamRoadmapsList/TeamRoadmaps.tsx
@@ -429,7 +429,7 @@ export function TeamRoadmaps() {
                             resourceConfig.resourceId
                           }`}
                           className={
-                            'flex gap-2 rounded-md border border-gray-300 bg-white px-2 py-1.5 text-xs hover:bg-gray-50 focus:outline-none'
+                            'flex gap-2 rounded-md border border-gray-300 bg-white px-2 py-1.5 text-xs hover:bg-gray-50 focus:outline-hidden'
                           }
                           target={'_blank'}
                         >
@@ -513,7 +513,7 @@ export function TeamRoadmaps() {
                     <a
                       href={`/r/${resourceConfig.roadmapSlug}`}
                       className={
-                        'ml-2 flex items-center gap-2 rounded-md border border-gray-300 bg-white px-2 py-1.5 text-xs hover:bg-gray-50 focus:outline-none'
+                        'ml-2 flex items-center gap-2 rounded-md border border-gray-300 bg-white px-2 py-1.5 text-xs hover:bg-gray-50 focus:outline-hidden'
                       }
                       target={'_blank'}
                     >
@@ -524,7 +524,7 @@ export function TeamRoadmaps() {
                       <a
                         href={editorLink}
                         className={
-                          'ml-2 flex items-center gap-2 rounded-md border border-gray-800 bg-gray-900 px-2.5 py-1.5 text-xs text-white hover:bg-gray-800 focus:outline-none'
+                          'ml-2 flex items-center gap-2 rounded-md border border-gray-800 bg-gray-900 px-2.5 py-1.5 text-xs text-white hover:bg-gray-800 focus:outline-hidden'
                         }
                         target={'_blank'}
                       >
@@ -606,7 +606,7 @@ export function TeamRoadmaps() {
                     <a
                       href={`/${resourceConfig.resourceId}?t=${teamId}`}
                       className={
-                        'ml-2 flex items-center gap-2 rounded-md border border-gray-300 bg-white px-2 py-1.5 text-xs hover:bg-gray-50 focus:outline-none'
+                        'ml-2 flex items-center gap-2 rounded-md border border-gray-300 bg-white px-2 py-1.5 text-xs hover:bg-gray-50 focus:outline-hidden'
                       }
                       target={'_blank'}
                     >
diff --git a/src/components/TeamSidebar.tsx b/src/components/TeamSidebar.tsx
index 08676c80b..611cccd7c 100644
--- a/src/components/TeamSidebar.tsx
+++ b/src/components/TeamSidebar.tsx
@@ -111,7 +111,7 @@ export function TeamSidebar({ activePageId, children }: TeamSidebarProps) {
 
             <li>
               <button
-                className={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200`}
+                className={`flex w-full items-center rounded-sm px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200`}
                 onClick={() => setShowFeedbackPopup(true)}
               >
                 <MessageCircle className="mr-2 h-4 w-4" />
@@ -147,7 +147,7 @@ export function TeamSidebar({ activePageId, children }: TeamSidebarProps) {
                           : 'border-r-transparent text-gray-500 hover:border-r-gray-300'
                       }`}
                     >
-                      <span className="flex flex-grow items-center justify-between">
+                      <span className="flex grow items-center justify-between">
                         <span className="flex">
                           {<sidebarLink.icon className="mr-2 h-4 w-4" />}
 
diff --git a/src/components/TeamsList.tsx b/src/components/TeamsList.tsx
index b784cbd00..7be66f76d 100644
--- a/src/components/TeamsList.tsx
+++ b/src/components/TeamsList.tsx
@@ -40,10 +40,10 @@ export function TeamsList() {
         <ul className="mb-3 flex flex-col gap-1">
           <li>
             <a
-              className="flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded border p-2 text-sm font-medium hover:border-gray-300 hover:bg-gray-50"
+              className="flex w-full cursor-pointer items-center justify-between gap-2 truncate rounded-sm border p-2 text-sm font-medium hover:border-gray-300 hover:bg-gray-50"
               href="/account"
             >
-              <span className="flex flex-grow items-center gap-2">
+              <span className="flex grow items-center gap-2">
                 <img
                   src={
                     user?.avatar
@@ -71,10 +71,10 @@ export function TeamsList() {
             return (
               <li key={team._id}>
                 <a
-                  className="flex w-full cursor-pointer items-center justify-between gap-2 rounded border p-2 text-sm font-medium hover:border-gray-300 hover:bg-gray-50"
+                  className="flex w-full cursor-pointer items-center justify-between gap-2 rounded-sm border p-2 text-sm font-medium hover:border-gray-300 hover:bg-gray-50"
                   href={pageLink}
                 >
-                  <span className="flex flex-grow items-center gap-2">
+                  <span className="flex grow items-center gap-2">
                     <img
                       src={
                         team.avatar
@@ -95,7 +95,7 @@ export function TeamsList() {
           })}
         </ul>
         <a
-          className="inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-none focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
+          className="inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-hidden focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
           href="/team/new"
         >
           <span className="mr-2">+</span>
diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx
index 256f1ac80..90eafc530 100644
--- a/src/components/Toast.tsx
+++ b/src/components/Toast.tsx
@@ -51,7 +51,7 @@ export function Toaster(props: Props) {
       onClick={() => {
         $toastMessage.set(undefined);
       }}
-      className={`fixed bottom-5 left-1/2 z-[9999] min-w-[375px] max-w-[375px] animate-fade-slide-up sm:min-w-[auto]`}
+      className={`fixed bottom-5 left-1/2 z-9999 min-w-[375px] max-w-[375px] animate-fade-slide-up sm:min-w-[auto]`}
     >
       <div
         className={`flex -translate-x-1/2 transform cursor-pointer items-center gap-2 rounded-md border border-gray-200 bg-white py-3 pl-4 pr-5 text-black shadow-md hover:bg-gray-50`}
@@ -74,7 +74,7 @@ export function Toaster(props: Props) {
 
         {toastMessage.type === 'loading' && <Spinner isDualRing={false} />}
 
-        <span className="flex-grow text-base">{toastMessage.message}</span>
+        <span className="grow text-base">{toastMessage.message}</span>
       </div>
     </div>
   );
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
index 7720e2b93..dff93d8b1 100644
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -52,7 +52,7 @@ export function Tooltip(props: TooltipProps) {
   return (
     <span
       className={clsx(
-        'pointer-events-none absolute z-10 block w-max transform rounded-md bg-gray-900 px-2 py-1 text-sm font-medium text-white opacity-0 shadow-sm duration-100 group-hover:opacity-100',
+        'pointer-events-none absolute z-10 block w-max transform rounded-md bg-gray-900 px-2 py-1 text-sm font-medium text-white opacity-0 shadow-xs duration-100 group-hover:opacity-100',
         positionClass,
         additionalClass,
       )}
diff --git a/src/components/TopicDetail/ContributionForm.tsx b/src/components/TopicDetail/ContributionForm.tsx
index e0bf70818..d680755a6 100644
--- a/src/components/TopicDetail/ContributionForm.tsx
+++ b/src/components/TopicDetail/ContributionForm.tsx
@@ -56,7 +56,7 @@ function ContributionInput(props: ContributionInputProps) {
         ref={titleRef}
         type="text"
         required
-        className="block w-full rounded-md border p-2 text-sm focus:border-gray-400 focus:outline-none"
+        className="block w-full rounded-md border p-2 text-sm focus:border-gray-400 focus:outline-hidden"
         placeholder="e.g. Introduction to RESTful APIs"
         onFocus={() => setFocused('title')}
         onBlur={() => setFocused('')}
@@ -72,7 +72,7 @@ function ContributionInput(props: ContributionInputProps) {
       <input
         type="url"
         required
-        className="block w-full rounded-md border p-2 text-sm focus:border-gray-400 focus:outline-none"
+        className="block w-full rounded-md border p-2 text-sm focus:border-gray-400 focus:outline-hidden"
         placeholder="e.g. https://roadmap.sh/guides/some-url"
         onFocus={() => setFocused('link')}
         onBlur={() => setFocused('')}
diff --git a/src/components/TopicDetail/ResourceListSeparator.tsx b/src/components/TopicDetail/ResourceListSeparator.tsx
index 53385575d..1b8d8d60f 100644
--- a/src/components/TopicDetail/ResourceListSeparator.tsx
+++ b/src/components/TopicDetail/ResourceListSeparator.tsx
@@ -27,7 +27,7 @@ export function ResourceListSeparator(props: ResourceSeparatorProps) {
         {Icon && <Icon className="inline-block h-3 w-3 fill-current" />}
         {text}
       </span>
-      <hr className="absolute inset-x-0 flex-grow border-current" />
+      <hr className="absolute inset-x-0 grow border-current" />
     </p>
   );
 }
diff --git a/src/components/TopicDetail/TopicDetail.tsx b/src/components/TopicDetail/TopicDetail.tsx
index c34fa7073..3d0231d27 100644
--- a/src/components/TopicDetail/TopicDetail.tsx
+++ b/src/components/TopicDetail/TopicDetail.tsx
@@ -340,7 +340,7 @@ export function TopicDetail(props: TopicDetailProps) {
   );
 
   return (
-    <div className={'relative z-[92]'}>
+    <div className={'relative z-92'}>
       <div
         ref={topicRef}
         tabIndex={0}
diff --git a/src/components/TopicDetail/TopicDetailLink.tsx b/src/components/TopicDetail/TopicDetailLink.tsx
index 121347b2b..d5b05c95e 100644
--- a/src/components/TopicDetail/TopicDetailLink.tsx
+++ b/src/components/TopicDetail/TopicDetailLink.tsx
@@ -40,7 +40,7 @@ export function TopicDetailLink(props: TopicDetailLinkProps) {
     >
       <span
         className={cn(
-          'mr-2 inline-block rounded px-1.5 py-0.5 text-xs capitalize no-underline',
+          'mr-2 inline-block rounded-sm px-1.5 py-0.5 text-xs capitalize no-underline',
           (isPaid ? paidLinkTypes[type] : linkTypes[type]) || 'bg-gray-200',
         )}
       >
diff --git a/src/components/UpdatePassword/UpdatePasswordForm.tsx b/src/components/UpdatePassword/UpdatePasswordForm.tsx
index 0509237b4..94e99bcc5 100644
--- a/src/components/UpdatePassword/UpdatePasswordForm.tsx
+++ b/src/components/UpdatePassword/UpdatePasswordForm.tsx
@@ -77,7 +77,7 @@ export default function UpdatePasswordForm(props: UpdatePasswordFormProps) {
               name="current-password"
               id="current-password"
               autoComplete={'current-password'}
-              className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-100"
+              className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-100"
               required
               minLength={6}
               placeholder="Current password"
@@ -101,7 +101,7 @@ export default function UpdatePasswordForm(props: UpdatePasswordFormProps) {
             name="new-password"
             id="new-password"
             autoComplete={'new-password'}
-            className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+            className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
             required
             minLength={6}
             placeholder="New password"
@@ -122,7 +122,7 @@ export default function UpdatePasswordForm(props: UpdatePasswordFormProps) {
             type="password"
             name="new-password-confirmation"
             id="new-password-confirmation"
-            className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+            className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
             autoComplete={'new-password'}
             required
             minLength={6}
@@ -139,7 +139,7 @@ export default function UpdatePasswordForm(props: UpdatePasswordFormProps) {
           disabled={
             isLoading || !newPassword || newPassword !== newPasswordConfirmation
           }
-          className="inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-none focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
+          className="inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-hidden focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
         >
           {isLoading ? 'Please wait...' : 'Update Password'}
         </button>
diff --git a/src/components/UpdateProfile/ProfileUsername.tsx b/src/components/UpdateProfile/ProfileUsername.tsx
index 5068ea297..aeb9b9bc4 100644
--- a/src/components/UpdateProfile/ProfileUsername.tsx
+++ b/src/components/UpdateProfile/ProfileUsername.tsx
@@ -109,7 +109,7 @@ export function ProfileUsername(props: ProfileUsernameProps) {
             type="text"
             name="username"
             id="username"
-            className="w-full px-3 py-2 outline-none placeholder:text-gray-400"
+            className="w-full px-3 py-2 outline-hidden placeholder:text-gray-400"
             placeholder="johndoe"
             spellCheck={false}
             value={username}
diff --git a/src/components/UpdateProfile/SkillProfileAlert.tsx b/src/components/UpdateProfile/SkillProfileAlert.tsx
index 978553b52..a5fd1293d 100644
--- a/src/components/UpdateProfile/SkillProfileAlert.tsx
+++ b/src/components/UpdateProfile/SkillProfileAlert.tsx
@@ -27,7 +27,7 @@ export function SkillProfileAlert() {
             key={idea}
             className="flex flex-row items-start gap-1.5 sm:items-center"
           >
-            <CheckCircle className="relative top-[3px] h-3.5 w-3.5 flex-shrink-0 stroke-[2.5] sm:top-0" />
+            <CheckCircle className="relative top-[3px] h-3.5 w-3.5 shrink-0 stroke-[2.5] sm:top-0" />
             <span>{idea}</span>
           </p>
         ))}
diff --git a/src/components/UpdateProfile/UpdateProfileForm.tsx b/src/components/UpdateProfile/UpdateProfileForm.tsx
index 36ffb5419..60066f996 100644
--- a/src/components/UpdateProfile/UpdateProfileForm.tsx
+++ b/src/components/UpdateProfile/UpdateProfileForm.tsx
@@ -97,7 +97,7 @@ export function UpdateProfileForm() {
             type="text"
             name="name"
             id="name"
-            className="mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+            className="mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
             required
             placeholder="John Doe"
             value={name}
@@ -123,7 +123,7 @@ export function UpdateProfileForm() {
             type="email"
             name="email"
             id="email"
-            className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+            className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
             required
             disabled
             placeholder="john@example.com"
@@ -144,7 +144,7 @@ export function UpdateProfileForm() {
         <button
           type="submit"
           disabled={isLoading}
-          className="inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-none focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
+          className="inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-hidden focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
         >
           {isLoading ? 'Please wait...' : 'Update Information'}
         </button>
diff --git a/src/components/UpdateProfile/UpdatePublicProfileForm.tsx b/src/components/UpdateProfile/UpdatePublicProfileForm.tsx
index 2f2323b66..465b15cde 100644
--- a/src/components/UpdateProfile/UpdatePublicProfileForm.tsx
+++ b/src/components/UpdateProfile/UpdatePublicProfileForm.tsx
@@ -201,7 +201,7 @@ export function UpdatePublicProfileForm() {
       <SkillProfileAlert />
 
       <div className="mb-8 flex flex-col justify-between gap-2 sm:mb-1 sm:flex-row">
-        <div className="flex flex-grow flex-row items-center gap-2 sm:items-center">
+        <div className="flex grow flex-row items-center gap-2 sm:items-center">
           <h3 className="mr-1 text-xl font-bold sm:text-3xl">Skill Profile</h3>
           {publicProfileUrl && (
             <>
@@ -210,7 +210,7 @@ export function UpdatePublicProfileForm() {
                 target="_blank"
                 className="flex shrink-0 flex-row items-center gap-1 rounded-lg border border-black py-0.5 pl-1.5 pr-2.5 text-xs uppercase transition-colors hover:bg-black hover:text-white"
               >
-                <ArrowUpRight className="h-3 w-3 stroke-[3]" />
+                <ArrowUpRight className="h-3 w-3 stroke-3" />
                 Visit
               </a>
               <button
@@ -262,7 +262,7 @@ export function UpdatePublicProfileForm() {
             type="text"
             name="name"
             id="name"
-            className="mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+            className="mt-2 block w-full appearance-none rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
             required
             placeholder="John Doe"
             value={name}
@@ -289,7 +289,7 @@ export function UpdatePublicProfileForm() {
             type="email"
             name="email"
             id="email"
-            className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+            className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
             required
             disabled
             placeholder="john@example.com"
@@ -306,7 +306,7 @@ export function UpdatePublicProfileForm() {
               />
               <label
                 htmlFor="isEmailVisible"
-                className="flex-grow cursor-pointer py-1.5"
+                className="grow cursor-pointer py-1.5"
               >
                 Show my email on profile
               </label>
@@ -325,7 +325,7 @@ export function UpdatePublicProfileForm() {
             type="text"
             name="headline"
             id="headline"
-            className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+            className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
             placeholder="Full Stack Developer"
             value={headline}
             onChange={(e) => setHeadline((e.target as HTMLInputElement).value)}
@@ -495,7 +495,7 @@ export function UpdatePublicProfileForm() {
             type="text"
             name="github"
             id="github"
-            className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+            className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
             placeholder="https://github.com/username"
             value={github}
             onChange={(e) => setGithub((e.target as HTMLInputElement).value)}
@@ -512,7 +512,7 @@ export function UpdatePublicProfileForm() {
             type="text"
             name="twitter"
             id="twitter"
-            className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+            className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
             placeholder="https://twitter.com/username"
             value={twitter}
             onChange={(e) => setTwitter((e.target as HTMLInputElement).value)}
@@ -530,7 +530,7 @@ export function UpdatePublicProfileForm() {
             type="text"
             name="linkedin"
             id="linkedin"
-            className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+            className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
             placeholder="https://www.linkedin.com/in/username/"
             value={linkedin}
             onChange={(e) => setLinkedin((e.target as HTMLInputElement).value)}
@@ -547,7 +547,7 @@ export function UpdatePublicProfileForm() {
             type="text"
             name="dailydev"
             id="dailydev"
-            className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+            className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
             placeholder="https://app.daily.dev/username"
             value={dailydev}
             onChange={(e) => setDailydev((e.target as HTMLInputElement).value)}
@@ -565,7 +565,7 @@ export function UpdatePublicProfileForm() {
             type="text"
             name="website"
             id="website"
-            className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+            className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-xs outline-hidden placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
             placeholder="https://example.com"
             value={website}
             onChange={(e) => setWebsite((e.target as HTMLInputElement).value)}
@@ -583,7 +583,7 @@ export function UpdatePublicProfileForm() {
             />
             <label
               htmlFor="isAvailableForHire"
-              className="flex-grow cursor-pointer py-1.5"
+              className="grow cursor-pointer py-1.5"
             >
               Available for Hire
             </label>
@@ -593,7 +593,7 @@ export function UpdatePublicProfileForm() {
         <button
           type="submit"
           disabled={isLoading}
-          className="inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-none focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
+          className="inline-flex w-full items-center justify-center rounded-lg bg-black p-2 py-3 text-sm font-medium text-white outline-hidden focus:ring-2 focus:ring-black focus:ring-offset-1 disabled:bg-gray-400"
         >
           {isLoading ? 'Please wait..' : 'Save Profile'}
         </button>
diff --git a/src/components/UpdateProfile/UploadProfilePicture.tsx b/src/components/UpdateProfile/UploadProfilePicture.tsx
index b8a91e34e..22182f401 100644
--- a/src/components/UpdateProfile/UploadProfilePicture.tsx
+++ b/src/components/UpdateProfile/UploadProfilePicture.tsx
@@ -174,7 +174,7 @@ export default function UploadProfilePicture(props: UploadProfilePictureProps) {
             <button
               disabled={isDisabled}
               type="button"
-              className="absolute bottom-1 right-0 rounded bg-gray-600 px-2 py-1 text-xs leading-none text-gray-50 ring-2 ring-white"
+              className="absolute bottom-1 right-0 rounded-sm bg-gray-600 px-2 py-1 text-xs leading-none text-gray-50 ring-2 ring-white"
               onClick={() => {
                 if (isLoading) return;
                 inputRef.current?.click();
diff --git a/src/components/UserProgress/ModalLoader.tsx b/src/components/UserProgress/ModalLoader.tsx
index 69eeda7e6..d69c0ce35 100644
--- a/src/components/UserProgress/ModalLoader.tsx
+++ b/src/components/UserProgress/ModalLoader.tsx
@@ -11,9 +11,9 @@ export function ModalLoader(props: ModalLoaderProps) {
   const { isLoading, text, error } = props;
 
   return (
-    <div className="fixed left-0 right-0 top-0 z-[100] h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
+    <div className="fixed left-0 right-0 top-0 z-100 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50">
       <div className="relative mx-auto flex h-full w-full items-center justify-center">
-        <div className="popup-body relative rounded-lg bg-white p-5 shadow">
+        <div className="popup-body relative rounded-lg bg-white p-5 shadow-sm">
           <div className="flex items-center">
             {isLoading && (
               <>
diff --git a/src/components/UserProgress/UserCustomProgressModal.tsx b/src/components/UserProgress/UserCustomProgressModal.tsx
index 2f31e8e0a..c59b0ec4b 100644
--- a/src/components/UserProgress/UserCustomProgressModal.tsx
+++ b/src/components/UserProgress/UserCustomProgressModal.tsx
@@ -156,12 +156,12 @@ export function UserCustomProgressModal(props: ProgressMapProps) {
   return (
     <div
       id={'user-progress-modal'}
-      className="fixed left-0 right-0 top-0 z-[100] h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50"
+      className="fixed left-0 right-0 top-0 z-100 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50"
     >
       <div className="relative mx-auto h-full w-full max-w-4xl p-4 md:h-auto">
         <div
           ref={popupBodyEl}
-          className={`popup-body relative rounded-lg bg-white pt-[1px] shadow`}
+          className={`popup-body relative rounded-lg bg-white pt-[1px] shadow-sm`}
         >
           <UserProgressModalHeader
             isLoading={isLoading}
diff --git a/src/components/UserProgress/UserProgressModal.tsx b/src/components/UserProgress/UserProgressModal.tsx
index e91bd34bb..b4601fb59 100644
--- a/src/components/UserProgress/UserProgressModal.tsx
+++ b/src/components/UserProgress/UserProgressModal.tsx
@@ -209,12 +209,12 @@ export function UserProgressModal(props: ProgressMapProps) {
   return (
     <div
       id={'user-progress-modal'}
-      className="fixed left-0 right-0 top-0 z-[100] h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50"
+      className="fixed left-0 right-0 top-0 z-100 h-full items-center justify-center overflow-y-auto overflow-x-hidden overscroll-contain bg-black/50"
     >
       <div className="relative mx-auto h-full w-full max-w-4xl p-4 md:h-auto">
         <div
           ref={popupBodyEl}
-          className={`popup-body relative rounded-lg bg-white pt-[1px] shadow`}
+          className={`popup-body relative rounded-lg bg-white pt-[1px] shadow-sm`}
         >
           <UserProgressModalHeader
             isLoading={isLoading}
diff --git a/src/components/UserProgress/UserProgressModalHeader.tsx b/src/components/UserProgress/UserProgressModalHeader.tsx
index cb13530c6..3142fe08a 100644
--- a/src/components/UserProgress/UserProgressModalHeader.tsx
+++ b/src/components/UserProgress/UserProgressModalHeader.tsx
@@ -35,7 +35,7 @@ export function UserProgressModalHeader(props: UserProgressModalHeaderProps) {
       <p
         className={`-mx-4 mb-3 flex items-center justify-start border-b border-t px-4 py-2 text-sm sm:hidden`}
       >
-        <span className="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
+        <span className="mr-2.5 block rounded-xs bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
           <span>{progressPercentage}</span>% Done
         </span>
 
@@ -48,7 +48,7 @@ export function UserProgressModalHeader(props: UserProgressModalHeaderProps) {
           isLoading ? 'striped-loader' : ''
         }`}
       >
-        <span className="mr-2.5 block rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
+        <span className="mr-2.5 block rounded-xs bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
           <span>{progressPercentage}</span>% Done
         </span>
 
diff --git a/src/components/UserPublicProfile/UserProfileRoadmap.tsx b/src/components/UserPublicProfile/UserProfileRoadmap.tsx
index 0d42ba79d..b9f16d724 100644
--- a/src/components/UserPublicProfile/UserProfileRoadmap.tsx
+++ b/src/components/UserPublicProfile/UserProfileRoadmap.tsx
@@ -76,7 +76,7 @@ export function UserProfileRoadmap(props: UserProfileRoadmapProps) {
 
       <div className="relative z-50 mt-10 hidden items-center justify-between border-y bg-white px-2 py-1.5 sm:flex">
         <p className="container flex text-sm">
-          <span className="mr-2.5 rounded-sm bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
+          <span className="mr-2.5 rounded-xs bg-yellow-200 px-1 py-0.5 text-xs font-medium uppercase text-yellow-900">
             <span data-progress-percentage="">{progressPercentage}</span>% Done
           </span>
 
diff --git a/src/components/UserPublicProfile/UserProfileRoadmapRenderer.tsx b/src/components/UserPublicProfile/UserProfileRoadmapRenderer.tsx
index aa6103f83..254dec0b8 100644
--- a/src/components/UserPublicProfile/UserProfileRoadmapRenderer.tsx
+++ b/src/components/UserPublicProfile/UserProfileRoadmapRenderer.tsx
@@ -86,7 +86,7 @@ export function UserProfileRoadmapRenderer(
       <div
         className={cn(
           'bg-white',
-          isCustomResource ? 'w-full' : 'container relative !max-w-[1000px]',
+          isCustomResource ? 'w-full' : 'container relative max-w-[1000px]!',
         )}
       >
         {isCustomResource ? (
diff --git a/src/components/UserPublicProfile/UserPublicActivityHeatmap.tsx b/src/components/UserPublicProfile/UserPublicActivityHeatmap.tsx
index 80be3cbaa..258a7dc68 100644
--- a/src/components/UserPublicProfile/UserPublicActivityHeatmap.tsx
+++ b/src/components/UserPublicProfile/UserPublicActivityHeatmap.tsx
@@ -48,20 +48,20 @@ export function UserActivityHeatmap(props: UserActivityHeatmapProps) {
         values={data}
         classForValue={(value) => {
           if (!value) {
-            return 'fill-gray-100 rounded-md [rx:2px] focus:outline-none';
+            return 'fill-gray-100 rounded-md [rx:2px] focus:outline-hidden';
           }
 
           const { count } = value;
           if (count >= 20) {
-            return 'fill-gray-800 rounded-md [rx:2px] focus:outline-none';
+            return 'fill-gray-800 rounded-md [rx:2px] focus:outline-hidden';
           } else if (count >= 10) {
-            return 'fill-gray-600 rounded-md [rx:2px] focus:outline-none';
+            return 'fill-gray-600 rounded-md [rx:2px] focus:outline-hidden';
           } else if (count >= 5) {
-            return 'fill-gray-500 rounded-md [rx:2px] focus:outline-none';
+            return 'fill-gray-500 rounded-md [rx:2px] focus:outline-hidden';
           } else if (count >= 3) {
-            return 'fill-gray-300 rounded-md [rx:2px] focus:outline-none';
+            return 'fill-gray-300 rounded-md [rx:2px] focus:outline-hidden';
           } else {
-            return 'fill-gray-200 rounded-md [rx:2px] focus:outline-none';
+            return 'fill-gray-200 rounded-md [rx:2px] focus:outline-hidden';
           }
         }}
         tooltipDataAttrs={(value: any) => {
@@ -79,7 +79,7 @@ export function UserActivityHeatmap(props: UserActivityHeatmapProps) {
 
       <ReactTooltip
         id="user-activity-tip"
-        className="!rounded-lg !bg-gray-900 !p-1 !px-2 !text-sm"
+        className="rounded-lg! bg-gray-900! p-1! px-2! text-sm!"
       />
 
       <div className="mt-4 flex items-center justify-between">
@@ -95,13 +95,13 @@ export function UserActivityHeatmap(props: UserActivityHeatmapProps) {
               data-tooltip-id="user-activity-tip"
               data-tooltip-content={`${legend.count} Updates`}
             >
-              <div className={`h-3 w-3 ${legend.color} mr-1 rounded-sm`}></div>
+              <div className={`h-3 w-3 ${legend.color} mr-1 rounded-xs`}></div>
             </div>
           ))}
           <span className="ml-2 text-xs text-gray-500">More</span>
           <ReactTooltip
             id="user-activity-tip"
-            className="!rounded-lg !bg-gray-900 !p-1 !px-2 !text-sm"
+            className="rounded-lg! bg-gray-900! p-1! px-2! text-sm!"
           />
         </div>
       </div>
diff --git a/src/components/UserPublicProfile/UserPublicProfilePage.tsx b/src/components/UserPublicProfile/UserPublicProfilePage.tsx
index 47ecb8005..29eafa481 100644
--- a/src/components/UserPublicProfile/UserPublicProfilePage.tsx
+++ b/src/components/UserPublicProfile/UserPublicProfilePage.tsx
@@ -22,7 +22,7 @@ export function UserPublicProfilePage(props: UserPublicProfilePageProps) {
   } = props;
 
   return (
-    <div className="min-h-full flex-grow bg-gray-200/40 pb-36 pt-10">
+    <div className="min-h-full grow bg-gray-200/40 pb-36 pt-10">
       <div className="container flex flex-col gap-8">
         <PrivateProfileBanner
           isOwnProfile={isOwnProfile}
diff --git a/src/components/VideoListItem.astro b/src/components/VideoListItem.astro
index a95bf4905..4e816a980 100644
--- a/src/components/VideoListItem.astro
+++ b/src/components/VideoListItem.astro
@@ -20,7 +20,7 @@ const { frontmatter, id } = video;
 
     {
       frontmatter.isNew && (
-        <span class='bg-green-300 text-green-900 text-xs font-medium px-1.5 py-0.5 rounded-sm uppercase ml-1.5'>
+        <span class='bg-green-300 text-green-900 text-xs font-medium px-1.5 py-0.5 rounded-xs uppercase ml-1.5'>
           New
           <span class='hidden sm:inline'>
             &middot;
diff --git a/src/components/YouTubeAlert.astro b/src/components/YouTubeAlert.astro
index cd0ec7a42..2d7896072 100644
--- a/src/components/YouTubeAlert.astro
+++ b/src/components/YouTubeAlert.astro
@@ -4,7 +4,7 @@
     class="text-md hidden sm:flex items-center text-red-600 group hover:text-red-900"
 >
     <span
-        class="bg-red-600 group-hover:bg-red-800 group-hover: px-1.5 py-0.5 rounded-sm text-white text-xs uppercase font-medium mr-2"
+        class="bg-red-600 group-hover:bg-red-800 group-hover: px-1.5 py-0.5 rounded-xs text-white text-xs uppercase font-medium mr-2"
         >New</span
     >
     <span class="underline mr-1">We also have a YouTube channel with visual content</span>
diff --git a/src/components/courses/CourseStep.astro b/src/components/courses/CourseStep.astro
index cbe947e4f..8baf74a5e 100644
--- a/src/components/courses/CourseStep.astro
+++ b/src/components/courses/CourseStep.astro
@@ -24,7 +24,7 @@ import { Swords } from 'lucide-react';
       <li>
         <a href='#' class='group font-medium text-gray-800 hover:text-black'>
           <span
-            class='mr-1.5 inline-block rounded bg-green-300 px-1.5 py-0.5 text-xs uppercase text-black no-underline'
+            class='mr-1.5 inline-block rounded-sm bg-green-300 px-1.5 py-0.5 text-xs uppercase text-black no-underline'
           >
             Course
           </span>
@@ -37,7 +37,7 @@ import { Swords } from 'lucide-react';
       <li>
         <a href='#' class='group font-medium text-gray-800 hover:text-black'>
           <span
-            class='mr-1.5 inline-block rounded bg-green-300 px-1.5 py-0.5 text-xs uppercase text-black no-underline'
+            class='mr-1.5 inline-block rounded-sm bg-green-300 px-1.5 py-0.5 text-xs uppercase text-black no-underline'
           >
             Course
           </span>
diff --git a/src/data/roadmaps/game-developer/content/cube@cv1-AwewuqJsZDBI3h84G.md b/src/data/roadmaps/game-developer/content/cube@cv1-AwewuqJsZDBI3h84G.md
index 2c092c1e3..852622491 100644
--- a/src/data/roadmaps/game-developer/content/cube@cv1-AwewuqJsZDBI3h84G.md
+++ b/src/data/roadmaps/game-developer/content/cube@cv1-AwewuqJsZDBI3h84G.md
@@ -1,6 +1,6 @@
 # Cube
 
-In computer graphics, "cube" in the context of shadows often refers to using a cube-shaped object to visualize the concept of a "shadow volume." Imagine a light source shining on a cube. The silhouette of the cube from the light's perspective, extended infinitely outwards, forms a volume. Any object inside this "shadow volume" is considered to be in shadow. While helpful for understanding, shadow volumes themselves are not always shaped like cubes - their complexity depends on the object casting the shadow.
+In computer graphics, "cube" in the context of shadows often refers to using a cube-shaped object to visualize the concept of a "shadow-sm volume." Imagine a light source shining on a cube. The silhouette of the cube from the light's perspective, extended infinitely outwards, forms a volume. Any object inside this "shadow-sm volume" is considered to be in shadow. While helpful for understanding, shadow volumes themselves are not always shaped like cubes - their complexity depends on the object casting the shadow.
 
 Visit the following resources to learn more:
 
diff --git a/src/data/roadmaps/game-developer/content/shadow-map@ygtru6fqQ3gpFZRN_I8rP.md b/src/data/roadmaps/game-developer/content/shadow-map@ygtru6fqQ3gpFZRN_I8rP.md
index ee1664212..778b9468e 100644
--- a/src/data/roadmaps/game-developer/content/shadow-map@ygtru6fqQ3gpFZRN_I8rP.md
+++ b/src/data/roadmaps/game-developer/content/shadow-map@ygtru6fqQ3gpFZRN_I8rP.md
@@ -1,6 +1,6 @@
 # Shadow Map
 
-Shadow mapping is a technique used in computer graphics to add shadows to a scene. This process involves two steps - generating the shadow map and then rendering the scene. In the shadow map generating step, the scene is rendered from the perspective of the light source capturing depth information. This results in a texture that stores the distance from the light to the nearest surface along each light direction, a “shadow map”. In the scene rendering step, the scene is rendered from the camera’s perspective. For each visible surface point, its distance from the light is calculated and compared to the corresponding stored distance in the shadow map. If the point's distance is greater than the stored distance, the point is in shadow; otherwise, it's lit. This information is used to adjust the color of the point, producing the shadow effect.
+Shadow mapping is a technique used in computer graphics to add shadows to a scene. This process involves two steps - generating the shadow map and then rendering the scene. In the shadow map generating step, the scene is rendered from the perspective of the light source capturing depth information. This results in a texture that stores the distance from the light to the nearest surface along each light direction, a “shadow map”. In the scene rendering step, the scene is rendered from the camera’s perspective. For each visible surface point, its distance from the light is calculated and compared to the corresponding stored distance in the shadow map. If the point's distance is greater than the stored distance, the point is in shadow-sm; otherwise, it's lit. This information is used to adjust the color of the point, producing the shadow effect.
 
 Visit the following resources to learn more:
 
diff --git a/src/data/roadmaps/linux/content/108-service-management/102-check-logs.md b/src/data/roadmaps/linux/content/108-service-management/102-check-logs.md
index 9aec76c6e..146f9cb01 100644
--- a/src/data/roadmaps/linux/content/108-service-management/102-check-logs.md
+++ b/src/data/roadmaps/linux/content/108-service-management/102-check-logs.md
@@ -2,7 +2,7 @@
 
 Checking Logs Under Service Management in Linux plays a vital role in systems administration and troubleshooting procedures. Logs are fundamental for an in-depth understanding of what's going on inside a Linux system. These records provide a chronological record of events related to your system for use in debugging and troubleshooting problems.
 
-Several essential logs generated by system processes, users and administrator actions can be found in `/var/log` directory. Logs can be accessed and viewed using several commands. For example, the `dmesg` command can be used to display the kernel ring buffer. Most system logs are managed by `systemd` and can be checked using the command `journalctl`.
+Several essential logs generated by system processes, users and administrator actions can be found in `/var/log` directory. Logs can be accessed and viewed using several commands. For example, the `dmesg` command can be used to display the kernel ring-3 buffer. Most system logs are managed by `systemd` and can be checked using the command `journalctl`.
 
 ```shell
 journalctl
diff --git a/src/data/roadmaps/linux/content/111-booting-linux/100-logs.md b/src/data/roadmaps/linux/content/111-booting-linux/100-logs.md
index 54a3b801f..794ef7003 100644
--- a/src/data/roadmaps/linux/content/111-booting-linux/100-logs.md
+++ b/src/data/roadmaps/linux/content/111-booting-linux/100-logs.md
@@ -6,7 +6,7 @@ The "logs under booting" in Linux refers to the messages and information that ar
 
 Linux utilizes various log message levels from `emerg` (the system is unusable) to `debug` (debug-level messages). During the boot process, messages from various components of the system like kernel, init, services, etc., are stored. Many Linux distributions use systemd logging system, `journalctl`, which holds the logs of the boot process.
 
-Viewing boot messages can occur in real-time with the `dmesg` command. It's used to read and print the kernel ring buffer. Or they can be accessed via the logging setup of your system, which often includes text files in `/var/log`. 
+Viewing boot messages can occur in real-time with the `dmesg` command. It's used to read and print the kernel ring-3 buffer. Or they can be accessed via the logging setup of your system, which often includes text files in `/var/log`. 
 
 ```shell
 dmesg | less
diff --git a/src/data/roadmaps/react-native/content/106-styling/101-layouts.md b/src/data/roadmaps/react-native/content/106-styling/101-layouts.md
index 03b018781..484ace174 100644
--- a/src/data/roadmaps/react-native/content/106-styling/101-layouts.md
+++ b/src/data/roadmaps/react-native/content/106-styling/101-layouts.md
@@ -44,7 +44,7 @@ Here are some of the most commonly used Flexbox styles:
 </View>
 ```
 
-- **`flex`**: This style determines how the child items grow or shrink when there's remaining space in the container. It's a shorthand for `flex-grow`, `flex-shrink`, and `flex-basis`.
+- **`flex`**: This style determines how the child items grow or shrink when there's remaining space in the container. It's a shorthand for `grow`, `shrink`, and `flex-basis`.
 ```jsx
 <View style={{flexDirection: 'row'}}>
   <Text style={{flex: 1}}>First child</Text>
diff --git a/src/data/roadmaps/sql/content/round@9DntFiZV1AyaRPhYP5q6u.md b/src/data/roadmaps/sql/content/round@9DntFiZV1AyaRPhYP5q6u.md
index 5e6bd8cf6..453e2fa03 100644
--- a/src/data/roadmaps/sql/content/round@9DntFiZV1AyaRPhYP5q6u.md
+++ b/src/data/roadmaps/sql/content/round@9DntFiZV1AyaRPhYP5q6u.md
@@ -1,6 +1,6 @@
 # ROUND
 
-The `ROUND` function in SQL is used to round a numeric value to a specified number of decimal places. It takes two arguments: the number to be rounded and the number of decimal places to round to. If the second argument is omitted, the function rounds the number to the nearest whole number. For positive values of the second argument, the number is rounded to the specified decimal places; for negative values, it rounds to the nearest ten, hundred, thousand, etc. The `ROUND` function is useful for formatting numerical data for reporting or ensuring consistent precision in calculations.
+The `ROUND` function in SQL is used to round a numeric value to a specified number of decimal places. It takes two arguments: the number to be rounded-sm and the number of decimal places to round to. If the second argument is omitted, the function rounds the number to the nearest whole number. For positive values of the second argument, the number is rounded-sm to the specified decimal places; for negative values, it rounds to the nearest ten, hundred, thousand, etc. The `ROUND` function is useful for formatting numerical data for reporting or ensuring consistent precision in calculations.
 
 Learn more from the following resources:
 
diff --git a/src/pages/404.astro b/src/pages/404.astro
index 203975e74..9e4261b86 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -22,7 +22,7 @@ const legacyRoadmapUrls = [...roadmapIds.map((id) => `/${id}/`), '/roadmaps/'];
       <Icon icon='construction' class='hidden md:block' />
       <div class='text-left md:text-left'>
         <h1
-          class='font-extrabold text-transparent text-2xl leading-normal md:text-5xl md:leading-normal bg-clip-text bg-gradient-to-t from-black to-gray-600'
+          class='font-extrabold text-transparent text-2xl leading-normal md:text-5xl md:leading-normal bg-clip-text bg-linear-to-t from-black to-gray-600'
         >
           Page not found!
         </h1>
diff --git a/src/pages/[roadmapId]/index.astro b/src/pages/[roadmapId]/index.astro
index ddc79a19d..c2a12140a 100644
--- a/src/pages/[roadmapId]/index.astro
+++ b/src/pages/[roadmapId]/index.astro
@@ -132,7 +132,7 @@ const projects = await getProjectsByRoadmapId(roadmapId);
       </div>
     </div>
 
-    <div class='container relative !max-w-[1000px]'>
+    <div class='container relative max-w-[1000px]!'>
       <ShareIcons
         resourceId={roadmapId}
         resourceType='roadmap'
diff --git a/src/pages/[roadmapId]/svg.astro b/src/pages/[roadmapId]/svg.astro
index 1d9823898..77fadc84d 100644
--- a/src/pages/[roadmapId]/svg.astro
+++ b/src/pages/[roadmapId]/svg.astro
@@ -42,7 +42,7 @@ const ogImageUrl =
   resourceType='roadmap'
   noIndex={true}
 >
-  <div class='container relative !max-w-[1000px]'>
+  <div class='container relative max-w-[1000px]!'>
     {
       roadmapData?.renderer === 'editor' ? (
         <EditorRoadmap
diff --git a/src/pages/authors/[authorId].astro b/src/pages/authors/[authorId].astro
index 0ed281319..daa241c08 100644
--- a/src/pages/authors/[authorId].astro
+++ b/src/pages/authors/[authorId].astro
@@ -62,7 +62,7 @@ const videos = await getVideosByAuthor(authorId);
   <div class='container pb-0 pt-4 md:pb-16 md:pt-8'>
     <div class=''>
       <div class='mb-5 flex items-center gap-8 rounded-3xl py-0 md:py-8'>
-        <div class='flex-grow'>
+        <div class='grow'>
           <h1 class='text-2xl font-bold md:text-3xl'>
             {authorFrontmatter.name}
           </h1>
@@ -121,7 +121,7 @@ const videos = await getVideosByAuthor(authorId);
             </div>
           </div>
         </div>
-        <div class='hidden flex-shrink-0 flex-col md:flex'>
+        <div class='hidden shrink-0 flex-col md:flex'>
           <img
             alt="Kamran Ahmed's profile picture"
             class='block h-[175px] w-[175px] rounded-full bg-gray-100'
@@ -131,7 +131,7 @@ const videos = await getVideosByAuthor(authorId);
       </div>
     </div>
     <div
-      class='rounded-t-xl bg-gradient-to-b from-gray-100 to-white px-3 py-2 md:px-6 md:py-3 [&>*:last-child]:border-b-0'
+      class='rounded-t-xl bg-linear-to-b from-gray-100 to-white px-3 py-2 md:px-6 md:py-3 [&>*:last-child]:border-b-0'
     >
       {
         [...guides, ...questionGuides]
diff --git a/src/pages/best-practices/[bestPracticeId]/index.astro b/src/pages/best-practices/[bestPracticeId]/index.astro
index 7fc4173b1..654d131fa 100644
--- a/src/pages/best-practices/[bestPracticeId]/index.astro
+++ b/src/pages/best-practices/[bestPracticeId]/index.astro
@@ -92,7 +92,7 @@ const ogImageUrl = getOpenGraphImageUrl({
   <div class='bg-gray-50 py-4 sm:py-12'>
     {
       !bestPracticeData.isUpcoming && bestPracticeData.jsonUrl && (
-        <div class='container relative !max-w-[1000px]'>
+        <div class='container relative max-w-[1000px]!'>
           <ShareIcons
             resourceId={bestPracticeId}
             resourceType='best-practice'
diff --git a/src/pages/get-started.astro b/src/pages/get-started.astro
index 56714b670..2d752be70 100644
--- a/src/pages/get-started.astro
+++ b/src/pages/get-started.astro
@@ -48,7 +48,7 @@ import ChangelogBanner from '../components/ChangelogBanner.astro';
   description={'Step by step guides and paths to learn different tools or technologies'}
   permalink={'/get-started'}
 >
-  <div class='bg-gradient-to-b from-gray-200 to-white py-4 sm:py-8 md:py-12'>
+  <div class='bg-linear-to-b from-gray-200 to-white py-4 sm:py-8 md:py-12'>
     <div class='container'>
       <div class='text-left'>
         <SectionBadge title='Beginner Roadmaps' />
@@ -476,21 +476,21 @@ import ChangelogBanner from '../components/ChangelogBanner.astro';
       >
         <a
           href='/roadmaps'
-          class='flex-grow rounded-lg bg-gradient-to-br from-gray-800 to-gray-700 p-4 text-sm text-white transition-all hover:from-gray-700 hover:to-gray-700 sm:text-base'
+          class='grow rounded-lg bg-linear-to-br from-gray-800 to-gray-700 p-4 text-sm text-white transition-all hover:from-gray-700 hover:to-gray-700 sm:text-base'
         >
           <Waypoints className='mb-3 h-5 w-5 text-gray-500 sm:mb-2' />
           Explore all Roadmaps
         </a>
         <a
           href='/best-practices'
-          class='flex-grow rounded-lg bg-gradient-to-br from-gray-800 to-gray-700 p-4 text-sm text-white transition-all hover:from-gray-700 hover:to-gray-700 sm:text-base'
+          class='grow rounded-lg bg-linear-to-br from-gray-800 to-gray-700 p-4 text-sm text-white transition-all hover:from-gray-700 hover:to-gray-700 sm:text-base'
         >
           <CheckSquare className='mb-3 h-5 w-5 text-gray-500 sm:mb-2' />
           Explore Best Practices
         </a>
         <a
           href='/questions'
-          class='flex-grow rounded-lg bg-gradient-to-br from-gray-800 to-gray-700 p-4 text-sm text-white transition-all hover:from-gray-700 hover:to-gray-700 sm:text-base'
+          class='grow rounded-lg bg-linear-to-br from-gray-800 to-gray-700 p-4 text-sm text-white transition-all hover:from-gray-700 hover:to-gray-700 sm:text-base'
         >
           <CheckSquare className='mb-3 h-5 w-5 text-gray-500 sm:mb-2' />
           Explore Questions
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 8a8e52ecb..60ea9986f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -38,7 +38,7 @@ const videos = await getAllVideos();
   description={'Community driven roadmaps, articles and guides for developers to grow in their career.'}
   permalink={'/'}
 >
-  <div class='bg-gradient-to-b from-slate-900 to-black'>
+  <div class='bg-linear-to-b from-slate-900 to-black'>
     <HeroSection />
 
     <FeaturedItems
diff --git a/src/pages/questions/[questionGroupId].astro b/src/pages/questions/[questionGroupId].astro
index d782db83d..4401640f6 100644
--- a/src/pages/questions/[questionGroupId].astro
+++ b/src/pages/questions/[questionGroupId].astro
@@ -42,7 +42,7 @@ const { frontmatter } = questionGroup;
   {
     !questionGroup.frontmatter.authorId && (
       <div class='flex bg-gray-50 pb-14 pt-4 sm:pb-16 sm:pt-8'>
-        <div class='container !max-w-[740px]'>
+        <div class='container max-w-[740px]!'>
           <div class='mb-3 mt-2 text-left sm:mb-5 sm:mt-8 sm:text-center'>
             <div class='mb-2 md:mb-6'>
               <a
diff --git a/src/styles/global.css b/src/styles/global.css
index ab2e901cb..f7a005404 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,29 +1,44 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
 
-@layer components {
-  .container {
-    @apply mx-auto !max-w-[830px] px-4;
-  }
+@config '../../tailwind.config.cjs';
 
-  .container-lg {
-    @apply mx-auto !max-w-[968px] px-4;
-  }
+/*
+  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.
 
-  .badge {
-    @apply rounded-sm bg-gray-400 px-1.5 py-0.5 text-xs font-medium uppercase text-white;
+  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 {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
   }
+}
 
+@utility container {
+  @apply mx-auto max-w-[830px]! px-4;
+}
+
+@utility container-lg {
+  @apply mx-auto max-w-[968px]! px-4;
+}
+
+@utility badge {
+  @apply rounded-xs bg-gray-400 px-1.5 py-0.5 text-xs font-medium uppercase text-white;
+}
+
+@utility no-scrollbar {
   /* Chrome, Safari and Opera */
-  .no-scrollbar::-webkit-scrollbar {
+  &::-webkit-scrollbar {
     display: none;
   }
-
-  .no-scrollbar {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-  }
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
 }
 
 svg {