diff --git a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Grid-visibility-Grid-turned-off-to-on-via-command-bar-1-Google-Chrome-linux.png b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Grid-visibility-Grid-turned-off-to-on-via-command-bar-1-Google-Chrome-linux.png
index 29ded0e889c..830a504baab 100644
Binary files a/e2e/playwright/snapshot-tests.spec.ts-snapshots/Grid-visibility-Grid-turned-off-to-on-via-command-bar-1-Google-Chrome-linux.png and b/e2e/playwright/snapshot-tests.spec.ts-snapshots/Grid-visibility-Grid-turned-off-to-on-via-command-bar-1-Google-Chrome-linux.png differ
diff --git a/package-lock.json b/package-lock.json
index cec28b382f5..be897705ff1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -90,6 +90,7 @@
         "@lezer/generator": "^1.7.3",
         "@nabla/vite-plugin-eslint": "^2.0.5",
         "@playwright/test": "^1.52.0",
+        "@tailwindcss/postcss": "^4.1.12",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^15.0.7",
         "@types/diff": "^7.0.2",
@@ -113,7 +114,6 @@
         "@vitejs/plugin-react": "^4.4.1",
         "@vitest/web-worker": "^3.1.2",
         "@xstate/cli": "^0.5.17",
-        "autoprefixer": "^10.4.21",
         "babel-preset-vite": "^1.1.3",
         "cross-env": "^7.0.3",
         "dpdm": "^3.14.0",
@@ -145,7 +145,7 @@
         "postcss": "^8.4.43",
         "postinstall-postinstall": "^2.1.0",
         "setimmediate": "^1.0.5",
-        "tailwindcss": "^3.4.17",
+        "tailwindcss": "^4.1.12",
         "ts-jest": "^29.3.2",
         "ts-node": "^10.0.0",
         "typescript": "^5.8.3",
@@ -4530,6 +4530,29 @@
         "url": "https://github.com/chalk/strip-ansi?sponsor=1"
       }
     },
+    "node_modules/@isaacs/fs-minipass": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
+      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "minipass": "^7.0.4"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/@isaacs/fs-minipass/node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
     "node_modules/@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -5058,6 +5081,17 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
     "node_modules/@jridgewell/resolve-uri": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
@@ -7150,6 +7184,359 @@
         "node": ">=10"
       }
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.12.tgz",
+      "integrity": "sha512-3hm9brwvQkZFe++SBt+oLjo4OLDtkvlE8q2WalaD/7QWaeM7KEJbAiY/LJZUaCs7Xa8aUu4xy3uoyX4q54UVdQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.4",
+        "enhanced-resolve": "^5.18.3",
+        "jiti": "^2.5.1",
+        "lightningcss": "1.30.1",
+        "magic-string": "^0.30.17",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.1.12"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.12.tgz",
+      "integrity": "sha512-gM5EoKHW/ukmlEtphNwaGx45fGoEmP10v51t9unv55voWh6WrOL19hfuIdo2FjxIaZzw776/BUQg7Pck++cIVw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "detect-libc": "^2.0.4",
+        "tar": "^7.4.3"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.12",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.12",
+        "@tailwindcss/oxide-darwin-x64": "4.1.12",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.12",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.12",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.12",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.12",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.12",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.12",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.12",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.12",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.12"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.12.tgz",
+      "integrity": "sha512-oNY5pq+1gc4T6QVTsZKwZaGpBb2N1H1fsc1GD4o7yinFySqIuRZ2E4NvGasWc6PhYJwGK2+5YT1f9Tp80zUQZQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.12.tgz",
+      "integrity": "sha512-cq1qmq2HEtDV9HvZlTtrj671mCdGB93bVY6J29mwCyaMYCP/JaUBXxrQQQm7Qn33AXXASPUb2HFZlWiiHWFytw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.12.tgz",
+      "integrity": "sha512-6UCsIeFUcBfpangqlXay9Ffty9XhFH1QuUFn0WV83W8lGdX8cD5/+2ONLluALJD5+yJ7k8mVtwy3zMZmzEfbLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.12.tgz",
+      "integrity": "sha512-JOH/f7j6+nYXIrHobRYCtoArJdMJh5zy5lr0FV0Qu47MID/vqJAY3r/OElPzx1C/wdT1uS7cPq+xdYYelny1ww==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.12.tgz",
+      "integrity": "sha512-v4Ghvi9AU1SYgGr3/j38PD8PEe6bRfTnNSUE3YCMIRrrNigCFtHZ2TCm8142X8fcSqHBZBceDx+JlFJEfNg5zQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.12.tgz",
+      "integrity": "sha512-YP5s1LmetL9UsvVAKusHSyPlzSRqYyRB0f+Kl/xcYQSPLEw/BvGfxzbH+ihUciePDjiXwHh+p+qbSP3SlJw+6g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.12.tgz",
+      "integrity": "sha512-V8pAM3s8gsrXcCv6kCHSuwyb/gPsd863iT+v1PGXC4fSL/OJqsKhfK//v8P+w9ThKIoqNbEnsZqNy+WDnwQqCA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.12.tgz",
+      "integrity": "sha512-xYfqYLjvm2UQ3TZggTGrwxjYaLB62b1Wiysw/YE3Yqbh86sOMoTn0feF98PonP7LtjsWOWcXEbGqDL7zv0uW8Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.12.tgz",
+      "integrity": "sha512-ha0pHPamN+fWZY7GCzz5rKunlv9L5R8kdh+YNvP5awe3LtuXb5nRi/H27GeL2U+TdhDOptU7T6Is7mdwh5Ar3A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.12.tgz",
+      "integrity": "sha512-4tSyu3dW+ktzdEpuk6g49KdEangu3eCYoqPhWNsZgUhyegEda3M9rG0/j1GV/JjVVsj+lG7jWAyrTlLzd/WEBg==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.4.5",
+        "@emnapi/runtime": "^1.4.5",
+        "@emnapi/wasi-threads": "^1.0.4",
+        "@napi-rs/wasm-runtime": "^0.2.12",
+        "@tybys/wasm-util": "^0.10.0",
+        "tslib": "^2.8.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.12.tgz",
+      "integrity": "sha512-iGLyD/cVP724+FGtMWslhcFyg4xyYyM+5F4hGvKA7eifPkXHRAUDFaimu53fpNg9X8dfP75pXx/zFt/jlNF+lg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.12.tgz",
+      "integrity": "sha512-NKIh5rzw6CpEodv/++r0hGLlfgT/gFN+5WNdZtvh6wpU2BpGNgdjvj6H2oFc8nCM839QM1YOhjpgbAONUb4IxA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide/node_modules/chownr": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
+      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@tailwindcss/oxide/node_modules/minipass": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
+      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/@tailwindcss/oxide/node_modules/minizlib": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.2.tgz",
+      "integrity": "sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/@tailwindcss/oxide/node_modules/mkdirp": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
+      "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "mkdirp": "dist/cjs/src/bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@tailwindcss/oxide/node_modules/tar": {
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.4.3.tgz",
+      "integrity": "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.2",
+        "minizlib": "^3.0.1",
+        "mkdirp": "^3.0.1",
+        "yallist": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@tailwindcss/oxide/node_modules/yallist": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
+      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
+      "dev": true,
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.12.tgz",
+      "integrity": "sha512-5PpLYhCAwf9SJEeIsSmCDLgyVfdBhdBpzX1OJ87anT9IVR0Z9pjM0FNixCAUAHGnMBGB8K99SwAheXrT0Kh6QQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.1.12",
+        "@tailwindcss/oxide": "4.1.12",
+        "postcss": "^8.4.41",
+        "tailwindcss": "4.1.12"
+      }
+    },
     "node_modules/@tanstack/react-virtual": {
       "version": "3.13.6",
       "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.6.tgz",
@@ -9310,13 +9697,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/any-promise": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -9637,13 +10017,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/arg": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -9936,44 +10309,6 @@
         "node": ">=0.8"
       }
     },
-    "node_modules/autoprefixer": {
-      "version": "10.4.21",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
-      "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "browserslist": "^4.24.4",
-        "caniuse-lite": "^1.0.30001702",
-        "fraction.js": "^4.3.7",
-        "normalize-range": "^0.1.2",
-        "picocolors": "^1.1.1",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "bin": {
-        "autoprefixer": "bin/autoprefixer"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -10947,16 +11282,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/camelcase-css": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001713",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001713.tgz",
@@ -11796,19 +12121,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/cssesc": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "cssesc": "bin/cssesc"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/cssfontparser": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/cssfontparser/-/cssfontparser-1.2.1.tgz",
@@ -12222,9 +12534,9 @@
       }
     },
     "node_modules/detect-libc": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
-      "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
+      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
       "dev": true,
       "license": "Apache-2.0",
       "engines": {
@@ -12249,13 +12561,6 @@
       "license": "MIT",
       "optional": true
     },
-    "node_modules/didyoumean": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true,
-      "license": "Apache-2.0"
-    },
     "node_modules/diff": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/diff/-/diff-7.0.0.tgz",
@@ -12286,13 +12591,6 @@
         "p-limit": "^3.1.0 "
       }
     },
-    "node_modules/dlv": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/dmg-builder": {
       "version": "26.0.12",
       "resolved": "https://registry.npmjs.org/dmg-builder/-/dmg-builder-26.0.12.tgz",
@@ -13015,6 +13313,20 @@
         }
       }
     },
+    "node_modules/enhanced-resolve": {
+      "version": "5.18.3",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
+      "integrity": "sha512-d4lC8xfavMeBjzGr2vECC3fsGXziXZQyJxD868h2M/mBI3PwAuODxAkLkq5HYuvrPYcUtiLzsTo8U3PgX3Ocww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -14676,20 +14988,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/fraction.js": {
-      "version": "4.3.7",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
-      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "type": "patreon",
-        "url": "https://github.com/sponsors/rawify"
-      }
-    },
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@@ -17754,13 +18052,13 @@
       }
     },
     "node_modules/jiti": {
-      "version": "1.21.7",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
-      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.5.1.tgz",
+      "integrity": "sha512-twQoecYPiVA5K/h6SxtORw/Bs3ar+mLUtoPSc7iMXzQzK8d7eJ/R09wmTwAjiamETn1cXYPGfNnu7DMoHgu12w==",
       "dev": true,
       "license": "MIT",
       "bin": {
-        "jiti": "bin/jiti.js"
+        "jiti": "lib/jiti-cli.mjs"
       }
     },
     "node_modules/jose": {
@@ -18244,17 +18542,243 @@
         "immediate": "~3.0.5"
       }
     },
-    "node_modules/lilconfig": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
-      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+    "node_modules/lightningcss": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
+      "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
       "dev": true,
-      "license": "MIT",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
       "engines": {
-        "node": ">=14"
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-darwin-arm64": "1.30.1",
+        "lightningcss-darwin-x64": "1.30.1",
+        "lightningcss-freebsd-x64": "1.30.1",
+        "lightningcss-linux-arm-gnueabihf": "1.30.1",
+        "lightningcss-linux-arm64-gnu": "1.30.1",
+        "lightningcss-linux-arm64-musl": "1.30.1",
+        "lightningcss-linux-x64-gnu": "1.30.1",
+        "lightningcss-linux-x64-musl": "1.30.1",
+        "lightningcss-win32-arm64-msvc": "1.30.1",
+        "lightningcss-win32-x64-msvc": "1.30.1"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz",
+      "integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz",
+      "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz",
+      "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz",
+      "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz",
+      "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz",
+      "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz",
+      "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz",
+      "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz",
+      "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz",
+      "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/antonk52"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
     "node_modules/lines-and-columns": {
@@ -19497,18 +20021,6 @@
       "dev": true,
       "license": "ISC"
     },
-    "node_modules/mz": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
-      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "any-promise": "^1.0.0",
-        "object-assign": "^4.0.1",
-        "thenify-all": "^1.0.0"
-      }
-    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -19722,20 +20234,10 @@
         "semver": "bin/semver"
       }
     },
-    "node_modules/normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/normalize-range": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -20855,120 +21357,6 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/postcss-import": {
-      "version": "15.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
-      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "postcss-value-parser": "^4.0.0",
-        "read-cache": "^1.0.0",
-        "resolve": "^1.1.7"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.0.0"
-      }
-    },
-    "node_modules/postcss-js": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
-      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "camelcase-css": "^2.0.1"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >= 16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.21"
-      }
-    },
-    "node_modules/postcss-load-config": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
-      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "lilconfig": "^3.0.0",
-        "yaml": "^2.3.4"
-      },
-      "engines": {
-        "node": ">= 14"
-      },
-      "peerDependencies": {
-        "postcss": ">=8.0.9",
-        "ts-node": ">=9.0.0"
-      },
-      "peerDependenciesMeta": {
-        "postcss": {
-          "optional": true
-        },
-        "ts-node": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/postcss-nested": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
-      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "postcss-selector-parser": "^6.1.1"
-      },
-      "engines": {
-        "node": ">=12.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.14"
-      }
-    },
-    "node_modules/postcss-selector-parser": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
-      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -21662,16 +22050,6 @@
         "read-binary-file-arch": "cli.js"
       }
     },
-    "node_modules/read-cache": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
-      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "pify": "^2.3.0"
-      }
-    },
     "node_modules/read-pkg": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-2.0.0.tgz",
@@ -23625,96 +24003,6 @@
       "integrity": "sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw==",
       "license": "MIT"
     },
-    "node_modules/sucrase": {
-      "version": "3.35.0",
-      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
-      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "commander": "^4.0.0",
-        "glob": "^10.3.10",
-        "lines-and-columns": "^1.1.6",
-        "mz": "^2.7.0",
-        "pirates": "^4.0.1",
-        "ts-interface-checker": "^0.1.9"
-      },
-      "bin": {
-        "sucrase": "bin/sucrase",
-        "sucrase-node": "bin/sucrase-node"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/sucrase/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/sucrase/node_modules/commander": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/sucrase/node_modules/glob": {
-      "version": "10.4.5",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
-      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "package-json-from-dist": "^1.0.0",
-        "path-scurry": "^1.11.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/sucrase/node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/sucrase/node_modules/minipass": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "dev": true,
-      "license": "ISC",
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
     "node_modules/sudo-prompt": {
       "version": "9.2.1",
       "resolved": "https://registry.npmjs.org/sudo-prompt/-/sudo-prompt-9.2.1.tgz",
@@ -23775,102 +24063,20 @@
       "license": "MIT"
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.17",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
-      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "arg": "^5.0.2",
-        "chokidar": "^3.6.0",
-        "didyoumean": "^1.2.2",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.3.2",
-        "glob-parent": "^6.0.2",
-        "is-glob": "^4.0.3",
-        "jiti": "^1.21.6",
-        "lilconfig": "^3.1.3",
-        "micromatch": "^4.0.8",
-        "normalize-path": "^3.0.0",
-        "object-hash": "^3.0.0",
-        "picocolors": "^1.1.1",
-        "postcss": "^8.4.47",
-        "postcss-import": "^15.1.0",
-        "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.2",
-        "postcss-nested": "^6.2.0",
-        "postcss-selector-parser": "^6.1.2",
-        "resolve": "^1.22.8",
-        "sucrase": "^3.35.0"
-      },
-      "bin": {
-        "tailwind": "lib/cli.js",
-        "tailwindcss": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/tailwindcss/node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "engines": {
-        "node": ">= 8.10.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/tailwindcss/node_modules/chokidar/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/tailwindcss/node_modules/object-hash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
-      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "version": "4.1.12",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.12.tgz",
+      "integrity": "sha512-DzFtxOi+7NsFf7DBtI3BJsynR+0Yp6etH+nRPTbpWnS2pZBaSksv/JGctNwSWzbFjp0vxSqknaUylseZqMDGrA==",
       "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
+      "license": "MIT"
     },
-    "node_modules/tailwindcss/node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+    "node_modules/tapable": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz",
+      "integrity": "sha512-Re10+NauLTMCudc7T5WLFLAwDhQ0JWdrMK+9B2M8zR5hRExKmsRDCBA7/aV/pNJFltmBFO5BAMlQFi/vq3nKOg==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
       "engines": {
-        "node": ">=8.10.0"
+        "node": ">=6"
       }
     },
     "node_modules/tar": {
@@ -24006,29 +24212,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/thenify": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
-      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "any-promise": "^1.0.0"
-      }
-    },
-    "node_modules/thenify-all": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
-      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "thenify": ">= 3.1.0 < 4"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
     "node_modules/three": {
       "version": "0.175.0",
       "resolved": "https://registry.npmjs.org/three/-/three-0.175.0.tgz",
@@ -24280,13 +24463,6 @@
         "typescript": ">=4.8.4"
       }
     },
-    "node_modules/ts-interface-checker": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true,
-      "license": "Apache-2.0"
-    },
     "node_modules/ts-jest": {
       "version": "29.3.2",
       "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-29.3.2.tgz",
@@ -26512,19 +26688,6 @@
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
       "license": "ISC"
     },
-    "node_modules/yaml": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.1.tgz",
-      "integrity": "sha512-10ULxpnOCQXxJvBgxsn9ptjq6uviG/htZKk9veJGhlqn3w/DxQ631zFF+nlQXLwmImeS5amR2dl2U8sg6U9jsQ==",
-      "dev": true,
-      "license": "ISC",
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
     "node_modules/yaml-ast-parser": {
       "version": "0.0.43",
       "resolved": "https://registry.npmjs.org/yaml-ast-parser/-/yaml-ast-parser-0.0.43.tgz",
diff --git a/package.json b/package.json
index c3ce2de5786..ea68b1e1612 100644
--- a/package.json
+++ b/package.json
@@ -167,6 +167,7 @@
     "@lezer/generator": "^1.7.3",
     "@nabla/vite-plugin-eslint": "^2.0.5",
     "@playwright/test": "^1.52.0",
+    "@tailwindcss/postcss": "^4.1.12",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^15.0.7",
     "@types/diff": "^7.0.2",
@@ -190,7 +191,6 @@
     "@vitejs/plugin-react": "^4.4.1",
     "@vitest/web-worker": "^3.1.2",
     "@xstate/cli": "^0.5.17",
-    "autoprefixer": "^10.4.21",
     "babel-preset-vite": "^1.1.3",
     "cross-env": "^7.0.3",
     "dpdm": "^3.14.0",
@@ -222,7 +222,7 @@
     "postcss": "^8.4.43",
     "postinstall-postinstall": "^2.1.0",
     "setimmediate": "^1.0.5",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.1.12",
     "ts-jest": "^29.3.2",
     "ts-node": "^10.0.0",
     "typescript": "^5.8.3",
diff --git a/postcss.config.js b/postcss.config.js
index 1fa852e1ffe..91ef49d1e0a 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,7 +1,6 @@
 module.exports = {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
     '@csstools/postcss-oklab-function': { preserve: true },
-    autoprefixer: {},
   },
 }
diff --git a/src/Toolbar.tsx b/src/Toolbar.tsx
index ffe8ecd65cc..c88dfbc1696 100644
--- a/src/Toolbar.tsx
+++ b/src/Toolbar.tsx
@@ -34,11 +34,11 @@ export function Toolbar({
 }: React.HTMLAttributes<HTMLElement>) {
   const { state, send, context } = useModelingContext()
   const iconClassName =
-    'group-disabled:text-chalkboard-50 !text-inherit dark:group-enabled:group-hover:!text-inherit'
-  const bgClassName = '!bg-transparent'
+    'group-disabled:text-chalkboard-50 text-inherit! dark:group-hover:group-enabled:text-inherit!'
+  const bgClassName = 'bg-transparent!'
   const buttonBgClassName =
-    'bg-chalkboard-transparent dark:bg-transparent disabled:bg-transparent dark:disabled:bg-transparent enabled:hover:bg-chalkboard-10 dark:enabled:hover:bg-chalkboard-100 pressed:!bg-primary pressed:enabled:hover:!text-chalkboard-10'
-  const buttonBorderClassName = '!border-transparent'
+    'bg-chalkboard-transparent dark:bg-transparent disabled:bg-transparent dark:disabled:bg-transparent enabled:hover:bg-chalkboard-10 dark:enabled:hover:bg-chalkboard-100 pressed:bg-primary! pressed:enabled:hover:text-chalkboard-10!'
+  const buttonBorderClassName = 'border-transparent!'
 
   const isInTemporaryWorkspace = codeManager.isBufferMode
 
@@ -104,7 +104,7 @@ export function Toolbar({
 
   const tooltipContentClassName = !showRichContent
     ? ''
-    : '!text-left text-wrap !text-xs !p-0 !pb-2 flex !max-w-none !w-72 flex-col items-stretch'
+    : 'text-left! text-wrap text-xs! p-0! pb-2! flex max-w-none! w-72! flex-col items-stretch'
   const richContentTimeout = useRef<number | null>(null)
   const richContentClearTimeout = useRef<number | null>(null)
   // On mouse enter, show rich content after a 1s delay
@@ -207,13 +207,13 @@ export function Toolbar({
     <menu
       data-current-mode={currentMode}
       data-onboarding-id="toolbar"
-      className="z-[19] max-w-full whitespace-nowrap rounded-b px-2 py-1 mx-auto bg-chalkboard-10 dark:bg-chalkboard-90 relative border border-chalkboard-30 dark:border-chalkboard-80 border-t-0 shadow-sm"
+      className="z-19 max-w-full whitespace-nowrap rounded-b px-2 py-1 mx-auto bg-chalkboard-10 dark:bg-chalkboard-90 relative border border-chalkboard-30 dark:border-chalkboard-80 border-t-0 shadow-xs"
     >
       <ul
         {...props}
         ref={toolbarButtonsRef}
         className={
-          'has-[[aria-expanded=true]]:!pointer-events-none m-0 py-1 rounded-l-sm flex gap-1.5 items-center ' +
+          'has-aria-expanded:pointer-events-none! m-0 py-1 rounded-l-sm flex gap-1.5 items-center ' +
           className
         }
       >
@@ -224,7 +224,7 @@ export function Toolbar({
             return (
               <div
                 key={'break-' + i}
-                className="h-5 w-[1px] block bg-chalkboard-30 dark:bg-chalkboard-80"
+                className="h-5 w-px block bg-chalkboard-30 dark:bg-chalkboard-80"
               />
             )
           } else if (isToolbarItemResolvedDropdown(maybeIconConfig)) {
@@ -249,10 +249,10 @@ export function Toolbar({
                 className={
                   (maybeIconConfig.array[0].alwaysDark
                     ? 'dark bg-chalkboard-90 '
-                    : '!bg-transparent ') +
+                    : 'bg-transparent! ') +
                   'group/wrapper ' +
                   buttonBorderClassName +
-                  ' relative group !gap-0'
+                  ' relative group gap-0!'
                 }
                 splitMenuItems={maybeIconConfig.array.map((itemConfig) => ({
                   id: itemConfig.id,
@@ -287,7 +287,7 @@ export function Toolbar({
                       bgClassName: bgClassName,
                     }}
                     className={
-                      '!border-transparent !px-0 pressed:!text-chalkboard-10 pressed:enabled:hovered:!text-chalkboard-10 ' +
+                      'border-transparent! px-0! pressed:text-chalkboard-10! pressed:enabled:hovered:text-chalkboard-10! ' +
                       buttonBgClassName
                     }
                     aria-pressed={selectedIcon.isActive}
@@ -310,7 +310,7 @@ export function Toolbar({
                     <ToolbarItemTooltip
                       itemConfig={selectedIcon}
                       configCallbackProps={configCallbackProps}
-                      wrapperClassName="ui-open:!hidden"
+                      wrapperClassName="ui-open:hidden!"
                       contentClassName={tooltipContentClassName}
                     >
                       {showRichContent ? (
@@ -354,11 +354,11 @@ export function Toolbar({
                   bgClassName: bgClassName,
                 }}
                 className={
-                  'pressed:!text-chalkboard-10 pressed:enabled:hovered:!text-chalkboard-10 ' +
+                  'pressed:text-chalkboard-10! pressed:enabled:hovered:text-chalkboard-10! ' +
                   buttonBorderClassName +
                   ' ' +
                   buttonBgClassName +
-                  (!itemConfig.showTitle ? ' !px-0' : '')
+                  (!itemConfig.showTitle ? ' px-0!' : '')
                 }
                 name={itemConfig.title}
                 // aria-description is still in ARIA 1.3 draft.
@@ -404,14 +404,14 @@ export function Toolbar({
             <button
               data-testid="tws-save"
               onClick={onClickSave}
-              className="mt-2 py-1 rounded-sm border-solid border border-chalkboard-30 hover:border-chalkboard-40 dark:hover:border-chalkboard-60 dark:bg-chalkboard-90/50 text-chalkboard-100 dark:text-chalkboard-10 bg-chalkboard-10 dark:bg-chalkboard-90 px-2"
+              className="mt-2 py-1 rounded-xs border-solid border border-chalkboard-30 hover:border-chalkboard-40 dark:hover:border-chalkboard-60 dark:bg-chalkboard-90/50 text-chalkboard-100 dark:text-chalkboard-10 bg-chalkboard-10 dark:bg-chalkboard-90 px-2"
             >
               Save
             </button>
           </div>
         )}
         {state.matches('Sketch no face') && (
-          <div className="mt-2 py-1 px-2 bg-chalkboard-10 dark:bg-chalkboard-90 border border-chalkboard-20 dark:border-chalkboard-80 rounded shadow-lg">
+          <div className="mt-2 py-1 px-2 bg-chalkboard-10 dark:bg-chalkboard-90 border border-chalkboard-20 dark:border-chalkboard-80 rounded-sm shadow-lg">
             <p className="text-xs">Select a plane or face to start sketching</p>
           </div>
         )}
@@ -467,7 +467,7 @@ const ToolbarItemTooltip = memo(function ToolbarItemContents({
       }
       hoverOnly
       position="bottom"
-      wrapperClassName={'!p-4 !pointer-events-auto ' + wrapperClassName}
+      wrapperClassName={'p-4! pointer-events-auto! ' + wrapperClassName}
       contentClassName={contentClassName}
     >
       {children}
@@ -606,7 +606,7 @@ const ToolbarItemTooltipRichContent = ({
                   onClick={openExternalBrowserIfDesktop(link.url)}
                   target="_blank"
                   rel="noreferrer"
-                  className="flex items-center rounded-sm p-1 no-underline text-inherit hover:bg-primary/10 hover:text-primary dark:hover:bg-chalkboard-70 dark:hover:text-inherit"
+                  className="flex items-center rounded-xs p-1 no-underline text-inherit hover:bg-primary/10 hover:text-primary dark:hover:bg-chalkboard-70 dark:hover:text-inherit"
                 >
                   <span className="flex-1">Open {link.label}</span>
                   <CustomIcon name="link" className="w-4 h-4" />
diff --git a/src/clientSideScene/ClientSideSceneComp.tsx b/src/clientSideScene/ClientSideSceneComp.tsx
index 622c07b9bfa..78d64e8ee1b 100644
--- a/src/clientSideScene/ClientSideSceneComp.tsx
+++ b/src/clientSideScene/ClientSideSceneComp.tsx
@@ -201,7 +201,7 @@ const Overlays = () => {
   // Set a large zIndex, the overlay for hover dropdown menu on line segments needs to render
   // over the length labels on the line segments
   return (
-    <div className="absolute inset-0 pointer-events-none z-sketchOverlayDropdown">
+    <div className="absolute inset-0 pointer-events-none z-sketch-overlay-dropdown">
       {Object.entries(context.segmentOverlays)
         .flatMap(([pathToNodeString, overlays]) =>
           overlays.map((b) => ({ pathToNodeString, overlay: b }))
@@ -378,7 +378,7 @@ const SegmentMenu = ({
           <Popover.Button
             data-testid="overlay-menu"
             data-stdlib-fn-name={stdLibFnName}
-            className="bg-chalkboard-10 dark:bg-chalkboard-100 border !border-transparent hover:!border-chalkboard-40 dark:hover:!border-chalkboard-70 ui-open:!border-chalkboard-40 dark:ui-open:!border-chalkboard-70 h-[26px] w-[26px] rounded-sm p-0 m-0"
+            className="bg-chalkboard-10 dark:bg-chalkboard-100 border border-transparent! hover:border-chalkboard-40! dark:hover:border-chalkboard-70! ui-open:border-chalkboard-40! dark:ui-open:border-chalkboard-70! h-[26px] w-[26px] rounded-xs p-0 m-0"
           >
             <CustomIcon name={'three-dots'} />
           </Popover.Button>
@@ -386,11 +386,11 @@ const SegmentMenu = ({
             as="menu"
             className={`absolute ${
               verticalPosition === 'top' ? 'bottom-full' : 'top-full'
-            } z-10 w-36 flex flex-col gap-1 divide-y divide-chalkboard-20 dark:divide-chalkboard-70 align-stretch px-0 py-1 bg-chalkboard-10 dark:bg-chalkboard-100 rounded-sm shadow-lg border border-solid border-chalkboard-20/50 dark:border-chalkboard-80/50`}
+            } z-10 w-36 flex flex-col gap-1 divide-y divide-chalkboard-20 dark:divide-chalkboard-70 align-stretch px-0 py-1 bg-chalkboard-10 dark:bg-chalkboard-100 rounded-xs shadow-lg border border-solid border-chalkboard-20/50 dark:border-chalkboard-80/50`}
           >
             {stdLibFnName !== 'arcTo' && (
               <button
-                className="!border-transparent rounded-sm text-left p-1 text-nowrap"
+                className="border-transparent! rounded-xs text-left p-1 text-nowrap"
                 onClick={() => {
                   send({
                     type: 'Constrain remove constraints',
@@ -402,7 +402,7 @@ const SegmentMenu = ({
               </button>
             )}
             <button
-              className="!border-transparent rounded-sm text-left p-1 text-nowrap"
+              className="border-transparent! rounded-xs text-left p-1 text-nowrap"
               title={
                 dependentSourceRanges.length > 0
                   ? `At least ${dependentSourceRanges.length} segment rely on this segment's tag.`
@@ -533,11 +533,11 @@ const ConstraintSymbol = ({
         data-is-constrained={isConstrained ? 'true' : 'false'}
         className={`${
           implicitDesc
-            ? 'bg-chalkboard-10 dark:bg-chalkboard-100 border-transparent border-0 rounded'
+            ? 'bg-chalkboard-10 dark:bg-chalkboard-100 border-transparent border-0 rounded-sm'
             : isConstrained
-              ? 'bg-chalkboard-10 dark:bg-chalkboard-90 dark:hover:bg-chalkboard-80 border-chalkboard-40 dark:border-chalkboard-70 rounded-sm'
+              ? 'bg-chalkboard-10 dark:bg-chalkboard-90 dark:hover:bg-chalkboard-80 border-chalkboard-40 dark:border-chalkboard-70 rounded-xs'
               : 'bg-primary/30 dark:bg-primary text-primary dark:text-chalkboard-10 dark:border-transparent group-hover:bg-primary/40 group-hover:border-primary/50 group-hover:brightness-125'
-        } h-[26px] w-[26px] rounded-sm relative m-0 p-0`}
+        } h-[26px] w-[26px] rounded-xs relative m-0 p-0`}
         onMouseEnter={() => {
           editorManager.setHighlightRange([range])
         }}
@@ -622,7 +622,7 @@ const ConstraintSymbol = ({
         }}
       >
         <div
-          className="bg-chalkboard-10 dark:bg-chalkboard-90 p-2 px-3 rounded-sm border border-solid border-chalkboard-20 dark:border-chalkboard-80 shadow-sm"
+          className="bg-chalkboard-10 dark:bg-chalkboard-90 p-2 px-3 rounded-xs border border-solid border-chalkboard-20 dark:border-chalkboard-80 shadow-xs"
           data-testid="constraint-symbol-popover"
         >
           {implicitDesc ? (
diff --git a/src/clientSideScene/sceneInfra.ts b/src/clientSideScene/sceneInfra.ts
index 442aec7239c..b4cd62a1188 100644
--- a/src/clientSideScene/sceneInfra.ts
+++ b/src/clientSideScene/sceneInfra.ts
@@ -283,7 +283,7 @@ export class SceneInfra {
     this.labelRenderer.domElement.style.pointerEvents = 'none'
     this.renderer.domElement.style.width = '100%'
     this.renderer.domElement.style.height = '100%'
-    this.labelRenderer.domElement.className = 'z-sketchSegmentIndicators'
+    this.labelRenderer.domElement.className = 'z-sketch-segment-indicators'
 
     window.addEventListener('resize', this.onWindowResize)
 
diff --git a/src/codemirror.css b/src/codemirror.css
new file mode 100644
index 00000000000..2cce95f51aa
--- /dev/null
+++ b/src/codemirror.css
@@ -0,0 +1,150 @@
+/*
+ * The first descendent of the CodeMirror wrapper is the theme,
+ * but its identifying class can change depending on the theme.
+*/
+#code-mirror-override > div,
+#code-mirror-override .cm-editor {
+  @apply bg-transparent h-full;
+  @apply select-auto;
+}
+
+#code-mirror-override .cm-scroller {
+  overflow: auto;
+}
+
+#code-mirror-override .cm-gutter {
+  @apply select-none;
+}
+
+#code-mirror-override .cm-activeLine,
+#code-mirror-override .cm-activeLineGutter {
+  @apply bg-primary/5;
+}
+
+#code-mirror-override .cm-scroller,
+#code-mirror-override .cm-editor {
+  height: 100% !important;
+}
+
+.dark #code-mirror-override .cm-activeLine,
+.dark #code-mirror-override .cm-activeLineGutter {
+  @apply bg-chalkboard-70/20;
+  mix-blend-mode: lighten;
+}
+
+#code-mirror-override .cm-focused .cm-activeLine,
+#code-mirror-override .cm-focused .cm-activeLineGutter {
+  @apply bg-primary/10;
+}
+
+.dark #code-mirror-override .cm-focused .cm-activeLine,
+.dark #code-mirror-override .cm-focused .cm-activeLineGutter {
+  @apply bg-chalkboard-70/40;
+}
+
+#code-mirror-override .cm-matchingBracket {
+  @apply bg-primary/20;
+}
+
+.dark #code-mirror-override .cm-matchingBracket {
+  @apply bg-chalkboard-70/60;
+}
+
+#code-mirror-override .cm-gutters {
+  @apply bg-chalkboard-10/30;
+}
+
+.dark #code-mirror-override .cm-gutters {
+  @apply bg-chalkboard-110/50;
+}
+
+#code-mirror-override .cm-content {
+  @apply caret-primary;
+}
+
+.dark #code-mirror-override .cm-content {
+  @apply caret-chalkboard-10;
+}
+
+#code-mirror-override .cm-focused {
+  outline: none;
+}
+
+.cm-rename-popup {
+  /* we want to overpower anything else */
+  z-index: 99999999999 !important;
+}
+
+.cm-rename-popup input {
+  /* use black text on white background in both light and dark mode */
+  color: black !important;
+  background: white !important;
+}
+
+@keyframes blink {
+  0%,
+  100% {
+    opacity: 0;
+  }
+
+  10% {
+    opacity: 1;
+  }
+}
+
+.react-json-view {
+  @apply bg-transparent!;
+}
+
+#code-mirror-override .cm-tooltip,
+.cm-tooltip {
+  @apply text-xs shadow-md;
+  @apply bg-chalkboard-10 text-chalkboard-80;
+  @apply rounded-xs border-solid border border-chalkboard-40/30 border-l-liquid-10;
+}
+
+.dark #code-mirror-override .cm-tooltip,
+.dark .cm-tooltip {
+  @apply bg-chalkboard-110 text-chalkboard-40;
+  @apply border-chalkboard-70/20 border-l-liquid-70;
+}
+
+#code-mirror-override .cm-tooltip-hover,
+#code-mirror-override .cm-signature-tooltip,
+.cm-signature-tooltip {
+  @apply py-1 px-2 w-max max-w-md;
+}
+
+#code-mirror-override .cm-completionInfo {
+  @apply px-4 rounded-l-none;
+  @apply bg-chalkboard-10 text-liquid-90;
+  @apply border-liquid-40/30;
+}
+
+.dark #code-mirror-override .cm-completionInfo {
+  @apply bg-liquid-120 text-liquid-50;
+  @apply border-liquid-90/60;
+}
+
+#code-mirror-override .cm-tooltip-autocomplete li {
+  @apply px-2 py-1;
+}
+
+#code-mirror-override .cm-tooltip-autocomplete li[aria-selected="true"] {
+  @apply bg-liquid-10 text-liquid-110;
+}
+
+.dark #code-mirror-override .cm-tooltip-autocomplete li[aria-selected="true"] {
+  @apply bg-liquid-100 text-liquid-20;
+}
+
+#code-mirror-override .cm-content {
+  white-space: pre-wrap;
+  word-break: normal;
+  word-wrap: break-word;
+}
+
+.cm-ghostText,
+.cm-ghostText * {
+  color: rgb(120, 120, 120, 0.8) !important;
+}
diff --git a/src/components/ActionButton.tsx b/src/components/ActionButton.tsx
index 705b6c25ff8..cd4c0aa013c 100644
--- a/src/components/ActionButton.tsx
+++ b/src/components/ActionButton.tsx
@@ -44,7 +44,7 @@ export type ActionButtonProps =
   | ActionButtonAsElement
 
 export const ActionButton = forwardRef((props: ActionButtonProps, ref) => {
-  const classNames = `action-button leading-[0.7] p-0 m-0 group text-xs leading-none flex items-center gap-2 rounded-sm border-solid border border-chalkboard-30 hover:border-chalkboard-40 enabled:dark:border-chalkboard-70 dark:hover:border-chalkboard-60 dark:bg-chalkboard-90/50 text-chalkboard-100 dark:text-chalkboard-10 ${
+  const classNames = `action-button leading-[0.7] p-0 m-0 group text-xs leading-none flex items-center gap-2 rounded-xs border-solid border border-chalkboard-30 hover:border-chalkboard-40 enabled:dark:border-chalkboard-70 dark:hover:border-chalkboard-60 dark:bg-chalkboard-90/50 text-chalkboard-100 dark:text-chalkboard-10 ${
     props.iconStart
       ? props.iconEnd
         ? 'px-0' // No padding if both icons are present
diff --git a/src/components/ActionButtonDropdown.tsx b/src/components/ActionButtonDropdown.tsx
index c3525cdfc5b..2f62c32fe75 100644
--- a/src/components/ActionButtonDropdown.tsx
+++ b/src/components/ActionButtonDropdown.tsx
@@ -26,7 +26,7 @@ export function ActionButtonDropdown({
   children,
   ...props
 }: ActionButtonSplitProps) {
-  const baseClassNames = `action-button p-0 m-0 group mono text-xs leading-none flex items-center gap-2 rounded-sm border-solid border border-chalkboard-30 hover:border-chalkboard-40 enabled:dark:border-chalkboard-70 dark:hover:border-chalkboard-60 dark:bg-chalkboard-90/50 text-chalkboard-100 dark:text-chalkboard-10`
+  const baseClassNames = `action-button p-0 m-0 group mono text-xs leading-none flex items-center gap-2 rounded-xs border-solid border border-chalkboard-30 hover:border-chalkboard-40 dark:enabled:border-chalkboard-70 dark:hover:border-chalkboard-60 dark:bg-chalkboard-90/50 text-chalkboard-100 dark:text-chalkboard-10`
   return (
     <Popover
       className={`${baseClassNames} ${className}`}
@@ -37,10 +37,10 @@ export function ActionButtonDropdown({
           {children}
           <Popover.Button
             className={
-              '!border-transparent dark:!border-transparent ' +
+              'border-transparent! dark:border-transparent! ' +
               'bg-chalkboard-transparent dark:bg-transparent disabled:bg-transparent dark:disabled:bg-transparent ' +
               'enabled:hover:bg-chalkboard-10 dark:enabled:hover:bg-chalkboard-100 ' +
-              'pressed:!bg-primary pressed:enabled:hover:!text-chalkboard-10 p-0 m-0 rounded-none !outline-none ui-open:border-primary ui-open:bg-primary'
+              'pressed:bg-primary! pressed:enabled:hover:text-chalkboard-10! p-0 m-0 rounded-none outline-hidden! ui-open:border-primary ui-open:bg-primary dark:ui-open:bg-transparent'
             }
             data-onboarding-id={`${props.name}-dropdown-button`}
           >
@@ -48,7 +48,7 @@ export function ActionButtonDropdown({
               name="caretDown"
               className={
                 'w-3.5 h-5 text-chalkboard-70 dark:text-chalkboard-40 rounded-none ' +
-                'ui-open:rotate-180 ui-open:!text-chalkboard-10'
+                'ui-open:rotate-180 ui-open:text-chalkboard-10!'
               }
             />
             <span className="sr-only">
@@ -57,14 +57,14 @@ export function ActionButtonDropdown({
             <Tooltip
               position="bottom"
               hoverOnly
-              wrapperClassName="ui-open:!hidden"
+              wrapperClassName="ui-open:hidden!"
             >
               {dropdownTooltipText}
             </Tooltip>
           </Popover.Button>
           <Popover.Panel
             as="ul"
-            className="!pointer-events-auto absolute z-20 left-1/2 -translate-x-1/2 top-full mt-4 w-fit max-w-[280px] max-h-[80vh] overflow-y-auto py-2 flex flex-col align-stretch text-inherit dark:text-chalkboard-10 bg-chalkboard-10 dark:bg-chalkboard-100 rounded shadow-lg border border-solid border-chalkboard-30 dark:border-chalkboard-80 text-sm m-0 p-0"
+            className="pointer-events-auto! absolute z-20 left-1/2 -translate-x-1/2 top-full mt-4 w-fit max-w-[280px] max-h-[80vh] overflow-y-auto py-2 flex flex-col align-stretch text-inherit dark:text-chalkboard-10 bg-chalkboard-10 dark:bg-chalkboard-100 rounded-sm shadow-lg border border-solid border-chalkboard-30 dark:border-chalkboard-80 text-sm m-0 p-0"
             unmount={false}
           >
             {splitMenuItems.map((item, index) => (
@@ -110,13 +110,13 @@ function ActionButtonDropdownListItem({
       <button
         type="button"
         onClick={onClick}
-        className="group/button flex items-center gap-6 px-3 py-1 font-sans text-xs hover:bg-primary/10 dark:hover:bg-chalkboard-80 border-0 m-0 w-full rounded-none text-left disabled:!bg-transparent dark:disabled:text-chalkboard-60"
+        className="group/button flex items-center gap-6 px-3 py-1 font-sans text-xs hover:bg-primary/10 dark:hover:bg-chalkboard-80 border-0 m-0 w-full rounded-none text-left disabled:bg-transparent! dark:disabled:text-chalkboard-60"
         tabIndex={-1}
         disabled={item.disabled}
         data-testid={'dropdown-' + item.id}
         data-onboarding-id={`${item.id}-dropdown-item`}
       >
-        <span className="capitalize flex-grow text-left">{item.label}</span>
+        <span className="capitalize grow text-left">{item.label}</span>
         {item.status === 'unavailable' ? (
           <div className="flex flex-none items-center gap-1">
             <span className="text-chalkboard-70 dark:text-chalkboard-40">
diff --git a/src/components/AppHeader.module.css b/src/components/AppHeader.module.css
index 177e3089ac5..5446c1d0d68 100644
--- a/src/components/AppHeader.module.css
+++ b/src/components/AppHeader.module.css
@@ -1,3 +1,4 @@
+@reference "../index.css";
 /*
   Some CSS cannot be represented
   in Tailwind, such as complex grid layouts.
diff --git a/src/components/AvailableVarsHelpers.tsx b/src/components/AvailableVarsHelpers.tsx
index 9cd6c216e4a..9e5a82544a8 100644
--- a/src/components/AvailableVarsHelpers.tsx
+++ b/src/components/AvailableVarsHelpers.tsx
@@ -127,7 +127,7 @@ export const CreateNewVariable = ({
           autoFocus={true}
           autoCapitalize="off"
           autoCorrect="off"
-          className={`flex-1 sm:text-sm px-2 py-1 rounded-sm bg-chalkboard-10 dark:bg-chalkboard-90 text-chalkboard-90 dark:text-chalkboard-10 ${
+          className={`flex-1 sm:text-sm px-2 py-1 rounded-xs bg-chalkboard-10 dark:bg-chalkboard-90 text-chalkboard-90 dark:text-chalkboard-10 ${
             !shouldCreateVariable ? 'opacity-50' : ''
           }`}
           value={newVariableName}
@@ -137,7 +137,7 @@ export const CreateNewVariable = ({
         />
       </div>
       {!isNewVariableNameUnique && (
-        <div className="bg-pink-200 dark:bg-chalkboard-80 dark:text-pink-200 rounded px-2 py-0.5 text-xs">
+        <div className="bg-pink-200 dark:bg-chalkboard-80 dark:text-pink-200 rounded-sm px-2 py-0.5 text-xs">
           Sorry, that's not a unique variable name. Please try something else
         </div>
       )}
diff --git a/src/components/BillingDialog.tsx b/src/components/BillingDialog.tsx
index 0d13474ca30..f59107b6a84 100644
--- a/src/components/BillingDialog.tsx
+++ b/src/components/BillingDialog.tsx
@@ -20,9 +20,9 @@ export const BillingDialog = (props: { billingActor: BillingActor }) => {
       <div>
         <div className="rounded bg-ml-black p-1">
           {hasUnlimited ? (
-            <CustomIcon name="infinity" className="!text-ml-white w-5 h-5" />
+            <CustomIcon name="infinity" className="text-ml-white! w-5 h-5" />
           ) : (
-            <CustomIcon name="star" className="!text-ml-white w-5 h-5" />
+            <CustomIcon name="star" className="text-ml-white! w-5 h-5" />
           )}
         </div>
       </div>
diff --git a/src/components/BillingRemaining.tsx b/src/components/BillingRemaining.tsx
index c58e8dfecd5..bdddb77e694 100644
--- a/src/components/BillingRemaining.tsx
+++ b/src/components/BillingRemaining.tsx
@@ -57,7 +57,7 @@ const ProgressBar = (props: { max: number; value: number }) => {
   const ratio = props.value / props.max
 
   return (
-    <div className="h-1.5 rounded w-full border-ml-black bg-ml-black border">
+    <div className="h-1.5 rounded-sm w-full border-ml-black bg-ml-black border">
       <div
         data-testid="billing-remaining-progress-bar-inner"
         className="bg-ml-green rounded-full"
@@ -92,10 +92,10 @@ export const BillingRemaining = (props: BillingRemainingProps) => {
     'dark:bg-transparent',
     'select-none',
     'cursor-pointer',
-    '!no-underline',
+    'no-underline!',
     'text-xs',
-    '!text-chalkboard-100',
-    'dark:!text-ml-green',
+    'text-chalkboard-100!',
+    'dark:text-ml-green!',
   ]
 
   return (
@@ -116,7 +116,7 @@ export const BillingRemaining = (props: BillingRemainingProps) => {
             <Spinner className="text-inherit w-4 h-4" />
           ))}
         {billingContext.credits !== Infinity && (
-          <div className={[isFlex ? 'flex-grow' : 'w-9'].join(' ')}>
+          <div className={[isFlex ? 'grow' : 'w-9'].join(' ')}>
             <ProgressBar
               max={billingContext.allowance ?? 1}
               value={billingContext.credits ?? 0}
diff --git a/src/components/CameraProjectionToggle.tsx b/src/components/CameraProjectionToggle.tsx
index 865e0b1c2ed..318a04f527d 100644
--- a/src/components/CameraProjectionToggle.tsx
+++ b/src/components/CameraProjectionToggle.tsx
@@ -26,7 +26,7 @@ export function CameraProjectionToggle() {
           },
         })
       }}
-      className={`pointer-events-auto p-0 text-xs text-chalkboard-60 dark:text-chalkboard-40 bg-chalkboard-10/70 hover:bg-chalkboard-10 dark:bg-chalkboard-100/80 dark:hover:bg-chalkboard-100 backdrop-blur-sm 
+      className={`pointer-events-auto p-0 text-xs text-chalkboard-60 dark:text-chalkboard-40 bg-chalkboard-10/70 hover:bg-chalkboard-10 dark:bg-chalkboard-100/80 dark:hover:bg-chalkboard-100 backdrop-blur-xs 
         border border-primary/10 hover:border-primary/50 focus-visible:border-primary/50 rounded-full`}
     >
       <span className="sr-only">Camera projection: </span>
@@ -34,7 +34,7 @@ export function CameraProjectionToggle() {
         <span
           aria-hidden={checked}
           className={
-            'border border-solid m-[-1px] rounded-full px-2 py-1 ' +
+            'border border-solid -m-px rounded-full px-2 py-1 ' +
             (!checked
               ? 'text-primary border-primary -mr-2'
               : 'border-transparent')
@@ -45,7 +45,7 @@ export function CameraProjectionToggle() {
         <span
           aria-hidden={checked}
           className={
-            'border border-solid m-[-1px] rounded-full px-2 py-1 ' +
+            'border border-solid -m-px rounded-full px-2 py-1 ' +
             (checked
               ? 'text-primary border-primary -ml-2'
               : 'border-transparent')
diff --git a/src/components/CommandBar/CommandArgOptionInput.tsx b/src/components/CommandBar/CommandArgOptionInput.tsx
index 02be8f700cf..900d39a5287 100644
--- a/src/components/CommandBar/CommandArgOptionInput.tsx
+++ b/src/components/CommandBar/CommandArgOptionInput.tsx
@@ -148,7 +148,7 @@ function CommandArgOptionInput({
             onChange={(event) =>
               !event.target.disabled && setQuery(event.target.value)
             }
-            className="flex-grow px-2 py-1 border-b border-b-chalkboard-100 dark:border-b-chalkboard-80 !bg-transparent focus:outline-none"
+            className="grow px-2 py-1 border-b border-b-chalkboard-100 dark:border-b-chalkboard-80 bg-transparent! focus:outline-hidden"
             onKeyDown={(event) => {
               if (event.metaKey && event.key === 'k')
                 commandBarActor.send({ type: 'Close' })
@@ -192,7 +192,7 @@ function CommandArgOptionInput({
                 className="flex items-center gap-2 px-4 py-1 first:mt-2 last:mb-2 ui-active:bg-primary/10 dark:ui-active:bg-chalkboard-90"
               >
                 <p
-                  className={`flex-grow ${
+                  className={`grow ${
                     (option.disabled &&
                       'text-chalkboard-70 dark:text-chalkboard-50 cursor-not-allowed') ||
                     ''
diff --git a/src/components/CommandBar/CommandBar.tsx b/src/components/CommandBar/CommandBar.tsx
index 92617a68d74..ed8becadcbf 100644
--- a/src/components/CommandBar/CommandBar.tsx
+++ b/src/components/CommandBar/CommandBar.tsx
@@ -152,7 +152,7 @@ export const CommandBar = () => {
           leaveTo="opacity-0 scale-95"
         >
           <WrapperComponent.Panel
-            className="relative z-50 pointer-events-auto w-full max-w-xl pt-2 mx-auto border rounded rounded-tl-none shadow-lg bg-chalkboard-10 dark:bg-chalkboard-100 dark:border-chalkboard-70"
+            className="relative z-50 pointer-events-auto w-full max-w-xl pt-2 mx-auto border rounded-sm rounded-tl-none shadow-lg bg-chalkboard-10 dark:bg-chalkboard-100 dark:border-chalkboard-70"
             as="div"
             data-testid="command-bar"
           >
@@ -174,7 +174,7 @@ export const CommandBar = () => {
                 <CommandBarReview stepBack={stepBack} />
               )
             )}
-            <div className="flex flex-col gap-2 !absolute left-auto right-full top-[-3px] m-2.5 p-0 border-none bg-transparent hover:bg-transparent">
+            <div className="flex flex-col gap-2 absolute! left-auto right-full top-[-3px] m-2.5 p-0 border-none bg-transparent hover:bg-transparent">
               <button
                 data-testid="command-bar-close-button"
                 onClick={() => commandBarActor.send({ type: 'Close' })}
@@ -182,11 +182,11 @@ export const CommandBar = () => {
               >
                 <CustomIcon
                   name="close"
-                  className="w-5 h-5 rounded-sm bg-destroy-10 text-destroy-80 dark:bg-destroy-80 dark:text-destroy-10 group-hover:brightness-110"
+                  className="w-5 h-5 rounded-xs bg-destroy-10 text-destroy-80 dark:bg-destroy-80 dark:text-destroy-10 group-hover:brightness-110"
                 />
                 <Tooltip position="bottom">
                   Cancel{' '}
-                  <kbd className="hotkey ml-4 dark:!bg-chalkboard-80">esc</kbd>
+                  <kbd className="hotkey ml-4 dark:bg-chalkboard-80!">esc</kbd>
                 </Tooltip>
               </button>
             </div>
diff --git a/src/components/CommandBar/CommandBarBasicInput.tsx b/src/components/CommandBar/CommandBarBasicInput.tsx
index c4a8c08fd7b..bcbbff8b436 100644
--- a/src/components/CommandBar/CommandBarBasicInput.tsx
+++ b/src/components/CommandBar/CommandBarBasicInput.tsx
@@ -77,7 +77,7 @@ function CommandBarBasicInput({
           ref={inputRef}
           type={arg.inputType}
           required
-          className={`flex-grow ${arg.inputType === 'color' ? 'h-[41px]' : 'px-2 py-1 border-b border-b-chalkboard-100 dark:border-b-chalkboard-80'} !bg-transparent focus:outline-none`}
+          className={`grow ${arg.inputType === 'color' ? 'h-[41px]' : 'px-2 py-1 border-b border-b-chalkboard-100 dark:border-b-chalkboard-80'} bg-transparent! focus:outline-hidden`}
           placeholder="Enter a value"
           defaultValue={defaultValue}
           onKeyDown={(event) => {
diff --git a/src/components/CommandBar/CommandBarDivider.tsx b/src/components/CommandBar/CommandBarDivider.tsx
index 1ba511bb148..dbe95703dee 100644
--- a/src/components/CommandBar/CommandBarDivider.tsx
+++ b/src/components/CommandBar/CommandBarDivider.tsx
@@ -1,5 +1,5 @@
 export default function CommandBarDivider() {
   return (
-    <div className="block w-full my-2 h-[1px] bg-chalkboard-20 dark:bg-chalkboard-80" />
+    <div className="block w-full my-2 h-px bg-chalkboard-20 dark:bg-chalkboard-80" />
   )
 }
diff --git a/src/components/CommandBar/CommandBarHeaderFooter.tsx b/src/components/CommandBar/CommandBarHeaderFooter.tsx
index f3676a9a8f7..912897d0e48 100644
--- a/src/components/CommandBar/CommandBarHeaderFooter.tsx
+++ b/src/components/CommandBar/CommandBarHeaderFooter.tsx
@@ -150,7 +150,7 @@ function CommandBarHeaderFooter({
                       })
                     }}
                     key={argName}
-                    className={`relative w-fit px-2 py-1 rounded-sm flex gap-2 items-center border ${
+                    className={`relative w-fit px-2 py-1 rounded-xs flex gap-2 items-center border ${
                       argName === currentArgument?.name
                         ? selectedCommand.status === 'experimental'
                           ? 'disabled:bg-ml-green/10 dark:disabled:bg-ml-green/20 disabled:border-ml-green dark:disabled:border-ml-green disabled:text-chalkboard-100 dark:disabled:text-chalkboard-10'
@@ -196,7 +196,7 @@ function CommandBarHeaderFooter({
                       ) : null}
                     </span>
                     {showShortcuts && (
-                      <small className="absolute -top-[1px] right-full translate-x-1/2 px-0.5 rounded-sm bg-chalkboard-80 text-chalkboard-10 dark:bg-primary dark:text-chalkboard-100">
+                      <small className="absolute -top-px right-full translate-x-1/2 px-0.5 rounded-xs bg-chalkboard-80 text-chalkboard-10 dark:bg-primary dark:text-chalkboard-100">
                         <span className="sr-only">Hotkey: </span>
                         {i + 1}
                       </small>
@@ -233,31 +233,31 @@ function CommandBarHeaderFooter({
         <div className="px-4 pb-2 flex items-center gap-2">
           <StepBackButton stepBack={stepBack} />
           {!isCurrentArgRequired && clear && <ClearButton clear={clear} />}
-          <div className="flex-grow"></div>
+          <div className="grow"></div>
           {isReviewing ? (
             <ReviewingButton
               bgClassName={
                 selectedCommand.status === 'experimental'
-                  ? '!bg-ml-green'
-                  : '!bg-primary'
+                  ? 'bg-ml-green!'
+                  : 'bg-primary!'
               }
               iconClassName={
                 selectedCommand.status === 'experimental'
-                  ? '!text-ml-black'
-                  : '!text-chalkboard-10'
+                  ? 'text-ml-black!'
+                  : 'text-chalkboard-10!'
               }
             />
           ) : (
             <GatheringArgsButton
               bgClassName={
                 selectedCommand.status === 'experimental'
-                  ? '!bg-ml-green'
-                  : '!bg-primary'
+                  ? 'bg-ml-green!'
+                  : 'bg-primary!'
               }
               iconClassName={
                 selectedCommand.status === 'experimental'
-                  ? '!text-ml-black'
-                  : '!text-chalkboard-10'
+                  ? 'text-ml-black!'
+                  : 'text-chalkboard-10!'
               }
             />
           )}
@@ -281,12 +281,12 @@ function ReviewingButton({ bgClassName, iconClassName }: ButtonProps) {
       ref={buttonRef}
       type="submit"
       form="review-form"
-      className={`w-fit !p-0 rounded-sm hover:brightness-110 hover:shadow focus:outline-current ${bgClassName}`}
+      className={`w-fit p-0! rounded-xs hover:brightness-110 hover:shadow-sm focus:outline-current ${bgClassName}`}
       tabIndex={0}
       data-testid="command-bar-submit"
       iconEnd={{
         icon: 'checkmark',
-        bgClassName: `p-1 rounded-sm ${bgClassName}`,
+        bgClassName: `p-1 rounded-xs ${bgClassName}`,
         iconClassName: `${iconClassName}`,
       }}
     >
@@ -301,12 +301,12 @@ function GatheringArgsButton({ bgClassName, iconClassName }: ButtonProps) {
       Element="button"
       type="submit"
       form="arg-form"
-      className={`w-fit !p-0 rounded-sm hover:brightness-110 hover:shadow focus:outline-current ${bgClassName}`}
+      className={`w-fit p-0! rounded-xs hover:brightness-110 hover:shadow-sm focus:outline-current ${bgClassName}`}
       tabIndex={0}
       data-testid="command-bar-continue"
       iconEnd={{
         icon: 'arrowRight',
-        bgClassName: `p-1 rounded-sm ${bgClassName}`,
+        bgClassName: `p-1 rounded-xs ${bgClassName}`,
         iconClassName: `${iconClassName}`,
       }}
     >
@@ -325,12 +325,12 @@ function StepBackButton({
       Element="button"
       type="button"
       form="arg-form"
-      className={`w-fit !p-0 rounded-sm hover:brightness-110 hover:shadow focus:outline-current bg-chalkboard-20/50 dark:bg-chalkboard-80/50 border-chalkboard-20 dark:border-chalkboard-80 ${bgClassName}`}
+      className={`w-fit p-0! rounded-xs hover:brightness-110 hover:shadow-sm focus:outline-current bg-chalkboard-20/50 dark:bg-chalkboard-80/50 border-chalkboard-20 dark:border-chalkboard-80 ${bgClassName}`}
       tabIndex={0}
       data-testid="command-bar-step-back"
       iconStart={{
         icon: 'arrowLeft',
-        bgClassName: `p-1 rounded-sm bg-chalkboard-20/50 dark:bg-chalkboard-80/50 ${bgClassName}`,
+        bgClassName: `p-1 rounded-xs bg-chalkboard-20/50 dark:bg-chalkboard-80/50 ${bgClassName}`,
         iconClassName: `${iconClassName}`,
       }}
       onClick={stepBack}
@@ -338,8 +338,8 @@ function StepBackButton({
       <span className={`pr-2 ${iconClassName}`}>Step back</span>
       <Tooltip position="bottom">
         Step back
-        <kbd className="hotkey ml-4 dark:!bg-chalkboard-80">Shift</kbd>
-        <kbd className="hotkey ml-2 dark:!bg-chalkboard-80">Bksp</kbd>
+        <kbd className="hotkey ml-4 dark:bg-chalkboard-80!">Shift</kbd>
+        <kbd className="hotkey ml-2 dark:bg-chalkboard-80!">Bksp</kbd>
       </Tooltip>
     </ActionButton>
   )
@@ -355,12 +355,12 @@ function ClearButton({
       Element="button"
       type="button"
       form="arg-form"
-      className={`w-fit !p-0 rounded-sm hover:brightness-110 hover:shadow focus:outline-current bg-chalkboard-20/50 dark:bg-chalkboard-80/50 border-chalkboard-20 dark:border-chalkboard-80 ${bgClassName}`}
+      className={`w-fit p-0! rounded-xs hover:brightness-110 hover:shadow-sm focus:outline-current bg-chalkboard-20/50 dark:bg-chalkboard-80/50 border-chalkboard-20 dark:border-chalkboard-80 ${bgClassName}`}
       tabIndex={0}
       data-testid="command-bar-clear-non-required-button"
       iconStart={{
         icon: 'trash',
-        bgClassName: `p-1 rounded-sm bg-chalkboard-20/50 dark:bg-chalkboard-80/50 ${bgClassName}`,
+        bgClassName: `p-1 rounded-xs bg-chalkboard-20/50 dark:bg-chalkboard-80/50 ${bgClassName}`,
         iconClassName: `${iconClassName}`,
       }}
       onClick={clear}
diff --git a/src/components/CommandBar/CommandBarKclInput.module.css b/src/components/CommandBar/CommandBarKclInput.module.css
index 2ba67d01061..23faf9b6380 100644
--- a/src/components/CommandBar/CommandBarKclInput.module.css
+++ b/src/components/CommandBar/CommandBarKclInput.module.css
@@ -1,3 +1,4 @@
+@reference "../../index.css";
 .editor {
   @apply text-base flex-1 overflow-auto;
   scrollbar-width: thin;
diff --git a/src/components/CommandBar/CommandBarKclInput.tsx b/src/components/CommandBar/CommandBarKclInput.tsx
index 257de1f0915..68905cd4b8f 100644
--- a/src/components/CommandBar/CommandBarKclInput.tsx
+++ b/src/components/CommandBar/CommandBarKclInput.tsx
@@ -331,7 +331,7 @@ function CommandBarKclInput({
                 type="text"
                 id="variable-name"
                 name="variable-name"
-                className="flex-1  border-solid border-0 border-b border-chalkboard-50 bg-transparent focus:outline-none"
+                className="flex-1  border-solid border-0 border-b border-chalkboard-50 bg-transparent focus:outline-hidden"
                 placeholder="Variable name"
                 value={newVariableName}
                 autoCapitalize="off"
diff --git a/src/components/CommandBar/CommandBarPathInput.tsx b/src/components/CommandBar/CommandBarPathInput.tsx
index 00506b1b2d3..f05cca5d1cf 100644
--- a/src/components/CommandBar/CommandBarPathInput.tsx
+++ b/src/components/CommandBar/CommandBarPathInput.tsx
@@ -96,7 +96,7 @@ function CommandBarPathInput({
           name={arg.inputType}
           ref={inputRef}
           required
-          className="flex-grow px-2 py-1 !bg-transparent focus:outline-none"
+          className="grow px-2 py-1 bg-transparent! focus:outline-hidden"
           placeholder="Enter a path"
           defaultValue={defaultValue}
           onKeyDown={(event) => {
diff --git a/src/components/CommandBar/CommandBarReview.tsx b/src/components/CommandBar/CommandBarReview.tsx
index 4b5c92f107a..b774e2b4f18 100644
--- a/src/components/CommandBar/CommandBarReview.tsx
+++ b/src/components/CommandBar/CommandBarReview.tsx
@@ -111,7 +111,7 @@ function CommandBarReview({ stepBack }: { stepBack: () => void }) {
                       })
                     }}
                     key={argName}
-                    className="w-fit px-2 py-1 m-0 rounded-sm flex gap-2 items-center border"
+                    className="w-fit px-2 py-1 m-0 rounded-xs flex gap-2 items-center border"
                   >
                     <span className="capitalize">
                       {arg.displayName || argName}
diff --git a/src/components/CommandBar/CommandBarSelectionMixedInput.tsx b/src/components/CommandBar/CommandBarSelectionMixedInput.tsx
index f17ee5a8f14..eb84eef7e6b 100644
--- a/src/components/CommandBar/CommandBarSelectionMixedInput.tsx
+++ b/src/components/CommandBar/CommandBarSelectionMixedInput.tsx
@@ -149,7 +149,7 @@ export default function CommandBarSelectionMixedInput({
           <button
             type="button"
             onClick={() => onSubmit(null)}
-            className="mt-2 px-4 py-2 rounded border border-chalkboard-30 text-chalkboard-90 dark:text-chalkboard-10 hover:bg-chalkboard-10 dark:hover:bg-chalkboard-90 transition-colors"
+            className="mt-2 px-4 py-2 rounded-sm border border-chalkboard-30 text-chalkboard-90 dark:text-chalkboard-10 hover:bg-chalkboard-10 dark:hover:bg-chalkboard-90 transition-colors"
           >
             Continue without selection
           </button>
diff --git a/src/components/CommandBar/CommandBarTextareaInput.tsx b/src/components/CommandBar/CommandBarTextareaInput.tsx
index b209f83dd78..41872564063 100644
--- a/src/components/CommandBar/CommandBarTextareaInput.tsx
+++ b/src/components/CommandBar/CommandBarTextareaInput.tsx
@@ -42,7 +42,7 @@ function CommandBarTextareaInput({
       onSubmit={handleSubmit}
       ref={formRef}
     >
-      <label className="flex items-start rounded border border-chalkboard-100 dark:border-chalkboard-80">
+      <label className="flex items-start rounded-sm border border-chalkboard-100 dark:border-chalkboard-80">
         <span
           data-testid="cmd-bar-arg-name"
           className="capitalize px-2 py-1 rounded-br bg-chalkboard-100 dark:bg-chalkboard-80 text-chalkboard-10 border-b border-b-chalkboard-100 dark:border-b-chalkboard-80"
@@ -55,7 +55,7 @@ function CommandBarTextareaInput({
           name={arg.inputType}
           ref={inputRef}
           required
-          className="flex-grow mx-2 my-1 !bg-transparent focus:outline-none min-h-12"
+          className="grow mx-2 my-1 bg-transparent! focus:outline-hidden min-h-12"
           placeholder="Enter a value"
           defaultValue={
             (commandBarState.context.argumentsToSubmit[arg.name] as
diff --git a/src/components/CommandBarOpenButton.tsx b/src/components/CommandBarOpenButton.tsx
index dcc207886fb..cf894bd78dc 100644
--- a/src/components/CommandBarOpenButton.tsx
+++ b/src/components/CommandBarOpenButton.tsx
@@ -16,7 +16,7 @@ export function CommandBarOpenButton() {
     >
       <CustomIcon name="command" className="w-5 h-5" />
       <span>Commands</span>
-      <kbd className="hidden sm:block dark:bg-chalkboard-80 font-mono rounded-sm text-primary/70 dark:text-inherit inline-block px-1">
+      <kbd className="hidden sm:block dark:bg-chalkboard-80 font-mono rounded-xs text-primary/70 dark:text-inherit inline-block px-1">
         {hotkeyDisplay(COMMAND_PALETTE_HOTKEY, platform)}
       </kbd>
     </button>
diff --git a/src/components/CommandComboBox.tsx b/src/components/CommandComboBox.tsx
index 7a9316052b3..61549f20297 100644
--- a/src/components/CommandComboBox.tsx
+++ b/src/components/CommandComboBox.tsx
@@ -59,7 +59,7 @@ function CommandComboBox({
         <Combobox.Input
           data-testid="cmd-bar-search"
           onChange={(event) => setQuery(event.target.value)}
-          className="w-full bg-transparent focus:outline-none selection:bg-primary/20 dark:selection:bg-primary/40 dark:focus:outline-none"
+          className="w-full bg-transparent focus:outline-hidden selection:bg-primary/20 dark:selection:bg-primary/40 dark:focus:outline-hidden"
           onKeyDown={(event) => {
             if (
               (event.metaKey && event.key === 'k') ||
@@ -90,14 +90,14 @@ function CommandComboBox({
             <Combobox.Option
               key={option.groupId + option.name + (option.displayName || '')}
               value={option}
-              className="flex items-center gap-4 px-4 py-1.5 first:mt-2 last:mb-2 ui-active:bg-primary/10 dark:ui-active:bg-chalkboard-90 ui-disabled:!text-chalkboard-50"
+              className="flex items-center gap-4 px-4 py-1.5 first:mt-2 last:mb-2 ui-active:bg-primary/10 dark:ui-active:bg-chalkboard-90 ui-disabled:text-chalkboard-50!"
               disabled={optionIsDisabled(option)}
               data-testid={`cmd-bar-option`}
             >
               {'icon' in option && option.icon && (
                 <CustomIcon name={option.icon} className="w-5 h-5" />
               )}
-              <div className="flex-grow flex flex-col">
+              <div className="grow flex flex-col">
                 <p className="my-0 leading-tight">
                   {option.displayName || option.name}{' '}
                 </p>
diff --git a/src/components/ContextMenu.tsx b/src/components/ContextMenu.tsx
index cf2d33fae34..af6f346d6b4 100644
--- a/src/components/ContextMenu.tsx
+++ b/src/components/ContextMenu.tsx
@@ -184,7 +184,7 @@ export function ContextMenuItem(props: ContextMenuItemProps) {
       className="flex items-center gap-2 py-1 px-2 cursor-pointer hover:bg-chalkboard-20 dark:hover:bg-chalkboard-80 border-none text-left"
       onClick={disabled ? undefined : onClick}
     >
-      {icon && <ActionIcon icon={icon} bgClassName="!bg-transparent" />}
+      {icon && <ActionIcon icon={icon} bgClassName="bg-transparent!" />}
       <div className="flex-1">{children}</div>
       {hotkey && (
         <kbd className="hotkey">{hotkeyDisplay(hotkey, platform)}</kbd>
diff --git a/src/components/DownloadAppToast.tsx b/src/components/DownloadAppToast.tsx
index 6cb34513ac8..242bd12eb50 100644
--- a/src/components/DownloadAppToast.tsx
+++ b/src/components/DownloadAppToast.tsx
@@ -32,7 +32,7 @@ export function DownloadAppToast({
                 href="https://www.google.com/chrome/"
                 rel="noopener noreferrer"
                 target="_blank"
-                className="!text-warn-80 dark:!text-warn-80 dark:hover:!text-warn-70 underline"
+                className="text-warn-80! dark:text-warn-80! dark:hover:text-warn-70! underline"
               >
                 this link
               </a>{' '}
diff --git a/src/components/Explorer/FileExplorer.tsx b/src/components/Explorer/FileExplorer.tsx
index 177d91915d6..695b3aa1da9 100644
--- a/src/components/Explorer/FileExplorer.tsx
+++ b/src/components/Explorer/FileExplorer.tsx
@@ -169,7 +169,7 @@ function RenameForm({
           autoCapitalize="off"
           autoCorrect="off"
           placeholder={formattedPlaceHolder}
-          className="p-1 overflow-hidden whitespace-nowrap text-ellipsis py-1 bg-transparent outline outline-primary -outline-offset-4 text-chalkboard-100 placeholder:text-chalkboard-70 dark:text-chalkboard-10 dark:placeholder:text-chalkboard-50 focus:ring-0"
+          className="p-1 overflow-hidden whitespace-nowrap text-ellipsis py-1 bg-transparent outline-solid outline-primary -outline-offset-4 text-chalkboard-100 placeholder:text-chalkboard-70 dark:text-chalkboard-10 dark:placeholder:text-chalkboard-50 focus:ring-0"
           onKeyDown={handleKeyDown}
           onBlur={onSubmit}
         />
@@ -234,8 +234,8 @@ export const FileExplorerRowElement = ({
 
   const outlineCSS =
     isIndexActive && !isMyRowRenaming
-      ? 'outline outline-1 outline-primary'
-      : 'outline-0 outline-none'
+      ? 'outline-solid outline-1 outline-primary'
+      : 'outline-0 outline-hidden'
   // Complaining about role="treeitem" focus but it is reimplemented aria labels
   /* eslint-disable */
   return (
@@ -243,7 +243,7 @@ export const FileExplorerRowElement = ({
       ref={rowElementRef}
       role="treeitem"
       data-testid="file-tree-item"
-      className={`h-5 flex flex-row items-center text-xs cursor-pointer -outline-offset-1 ${outlineCSS} hover:outline hover:outline-1 hover:bg-gray-300/50 hover:bg-gray-300/50 ${isSelected ? 'bg-primary/10' : ''}`}
+      className={`h-5 flex flex-row items-center text-xs cursor-pointer -outline-offset-1 ${outlineCSS} hover:outline-solid hover:outline-1 hover:bg-gray-300/50 hover:bg-gray-300/50 ${isSelected ? 'bg-primary/10' : ''}`}
       data-index={row.domIndex}
       data-last-element={row.domIndex === row.domLength - 1}
       data-parity={row.domIndex % 2 === 0}
diff --git a/src/components/Explorer/FileExplorerHeaderActions.tsx b/src/components/Explorer/FileExplorerHeaderActions.tsx
index 6358edcb4da..b2f578eb1b6 100644
--- a/src/components/Explorer/FileExplorerHeaderActions.tsx
+++ b/src/components/Explorer/FileExplorerHeaderActions.tsx
@@ -25,10 +25,10 @@ export const FileExplorerHeaderActions = ({
         data-testid="create-file-button"
         iconStart={{
           icon: 'filePlus',
-          iconClassName: '!text-current',
+          iconClassName: 'text-current!',
           bgClassName: 'bg-transparent',
         }}
-        className="!p-0 !bg-transparent hover:text-primary border-transparent hover:border-primary !outline-none"
+        className="p-0! bg-transparent! hover:text-primary border-transparent hover:border-primary outline-hidden!"
         onClick={onCreateFile}
       >
         <Tooltip position="bottom-right">New File...</Tooltip>
@@ -39,10 +39,10 @@ export const FileExplorerHeaderActions = ({
         data-testid="create-folder-button"
         iconStart={{
           icon: 'folderPlus',
-          iconClassName: '!text-current',
+          iconClassName: 'text-current!',
           bgClassName: 'bg-transparent',
         }}
-        className="!p-0 !bg-transparent hover:text-primary border-transparent hover:border-primary !outline-none"
+        className="p-0! bg-transparent! hover:text-primary border-transparent hover:border-primary outline-hidden!"
         onClick={onCreateFolder}
       >
         <Tooltip position="bottom-right">New Folder...</Tooltip>
@@ -53,10 +53,10 @@ export const FileExplorerHeaderActions = ({
         data-testid="refresh-explorer"
         iconStart={{
           icon: 'subtract',
-          iconClassName: '!text-current',
+          iconClassName: 'text-current!',
           bgClassName: 'bg-transparent',
         }}
-        className="!p-0 !bg-transparent hover:text-primary border-transparent hover:border-primary !outline-none"
+        className="p-0! bg-transparent! hover:text-primary border-transparent hover:border-primary outline-hidden!"
         onClick={onRefreshExplorer}
       >
         <Tooltip position="bottom-right">Refresh Explorer</Tooltip>
@@ -67,10 +67,10 @@ export const FileExplorerHeaderActions = ({
         data-testid="collapse-all-folders-explorer"
         iconStart={{
           icon: 'collapse',
-          iconClassName: '!text-current',
+          iconClassName: 'text-current!',
           bgClassName: 'bg-transparent',
         }}
-        className="!p-0 !bg-transparent hover:text-primary border-transparent hover:border-primary !outline-none"
+        className="p-0! bg-transparent! hover:text-primary border-transparent hover:border-primary outline-hidden!"
         onClick={onCollapseExplorer}
       >
         <Tooltip position="bottom-right">Collapse Folders in Explorer</Tooltip>
diff --git a/src/components/Gizmo.tsx b/src/components/Gizmo.tsx
index de305568379..9592b9957c0 100644
--- a/src/components/Gizmo.tsx
+++ b/src/components/Gizmo.tsx
@@ -137,7 +137,7 @@ export default function Gizmo() {
         ref={wrapperRef}
         aria-label="View orientation gizmo"
         data-testid={`gizmo${disableOrbitRef.current ? '-disabled' : ''}`}
-        className="grid place-content-center rounded-full overflow-hidden border border-solid border-primary/50 pointer-events-auto bg-chalkboard-10/70 dark:bg-chalkboard-100/80 backdrop-blur-sm"
+        className="grid place-content-center rounded-full overflow-hidden border border-solid border-primary/50 pointer-events-auto bg-chalkboard-10/70 dark:bg-chalkboard-100/80 backdrop-blur-xs"
       >
         <canvas ref={canvasRef} />
         <ViewControlContextMenu menuTargetElement={wrapperRef} />
diff --git a/src/components/HelpMenu.tsx b/src/components/HelpMenu.tsx
index 4d0c2c091e8..ad129f95766 100644
--- a/src/components/HelpMenu.tsx
+++ b/src/components/HelpMenu.tsx
@@ -18,7 +18,7 @@ import { isDesktop } from '@src/lib/isDesktop'
 import { withSiteBaseURL } from '@src/lib/withBaseURL'
 
 const HelpMenuDivider = () => (
-  <div className="h-[1px] bg-chalkboard-110 dark:bg-chalkboard-80" />
+  <div className="h-px bg-chalkboard-110 dark:bg-chalkboard-80" />
 )
 
 export function HelpMenu() {
@@ -48,7 +48,7 @@ export function HelpMenu() {
   return (
     <Popover className="relative flex items-stretch">
       <Popover.Button
-        className="flex items-stretch px-2 py-1 m-0 border-none !bg-chalkboard-110 dark:!bg-chalkboard-80 text-chalkboard-10 rounded-none"
+        className="flex items-stretch px-2 py-1 m-0 border-none bg-chalkboard-110! dark:bg-chalkboard-80! text-chalkboard-10 rounded-none"
         data-testid="help-button"
       >
         <CustomIcon name="questionMark" className="w-5 h-5" />
@@ -59,7 +59,7 @@ export function HelpMenu() {
       </Popover.Button>
       <Popover.Panel
         as="ul"
-        className="absolute right-0 left-auto flex flex-col w-64 gap-1 p-0 py-2 m-0 mb-1 text-sm border border-solid rounded shadow-lg bottom-full align-stretch text-chalkboard-10 dark:text-inherit bg-chalkboard-110 dark:bg-chalkboard-100 border-chalkboard-110 dark:border-chalkboard-80"
+        className="absolute right-0 left-auto flex flex-col w-64 gap-1 p-0 py-2 m-0 mb-1 text-sm border border-solid rounded-sm shadow-lg bottom-full align-stretch text-chalkboard-10 dark:text-inherit bg-chalkboard-110 dark:bg-chalkboard-100 border-chalkboard-110 dark:border-chalkboard-80"
       >
         {({ close }) => (
           <>
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
index f7d27695cea..cb5901d574c 100644
--- a/src/components/Loading.tsx
+++ b/src/components/Loading.tsx
@@ -219,7 +219,7 @@ const Loading = ({
       {isUnrecoverableError ? (
         <CustomIcon
           name="exclamationMark"
-          className="w-8 h-8 !text-chalkboard-10 bg-destroy-60 rounded-full"
+          className="w-8 h-8 text-chalkboard-10! bg-destroy-60 rounded-full"
         />
       ) : (
         <Spinner />
diff --git a/src/components/ModelingSidebar/ModelingPane.module.css b/src/components/ModelingSidebar/ModelingPane.module.css
index d4254416086..bf8fa91535f 100644
--- a/src/components/ModelingSidebar/ModelingPane.module.css
+++ b/src/components/ModelingSidebar/ModelingPane.module.css
@@ -1,3 +1,4 @@
+@reference "../../index.css";
 .panel {
   @apply relative z-0 max-w-full flex-auto;
   display: grid;
diff --git a/src/components/ModelingSidebar/ModelingPane.tsx b/src/components/ModelingSidebar/ModelingPane.tsx
index 64fc4dc9afe..e3e22802772 100644
--- a/src/components/ModelingSidebar/ModelingPane.tsx
+++ b/src/components/ModelingSidebar/ModelingPane.tsx
@@ -33,8 +33,8 @@ export const ModelingPaneHeader = ({
           <ActionIcon
             icon={icon}
             size="sm"
-            iconClassName="!text-chalkboard-80 dark:!text-chalkboard-30"
-            bgClassName="!bg-transparent"
+            iconClassName="text-chalkboard-80! dark:text-chalkboard-30!"
+            bgClassName="bg-transparent!"
           />
         )}
         <span data-testid={id + '-header'}>{title}</span>
@@ -44,10 +44,10 @@ export const ModelingPaneHeader = ({
         Element="button"
         iconStart={{
           icon: 'close',
-          iconClassName: '!text-current',
+          iconClassName: 'text-current!',
           bgClassName: 'bg-transparent dark:bg-transparent',
         }}
-        className="!p-0 !bg-transparent hover:text-primary border-transparent dark:!border-transparent hover:!border-primary dark:hover:!border-chalkboard-70 !outline-none"
+        className="p-0! bg-transparent! hover:text-primary border-transparent dark:border-transparent! hover:border-primary! dark:hover:border-chalkboard-70! outline-hidden!"
         onClick={() => onClose()}
       >
         <Tooltip position="bottom-right">Close</Tooltip>
diff --git a/src/components/ModelingSidebar/ModelingPanes/FeatureTreeMenu.tsx b/src/components/ModelingSidebar/ModelingPanes/FeatureTreeMenu.tsx
index bfd99f176cd..8d6ab50a76e 100644
--- a/src/components/ModelingSidebar/ModelingPanes/FeatureTreeMenu.tsx
+++ b/src/components/ModelingSidebar/ModelingPanes/FeatureTreeMenu.tsx
@@ -20,16 +20,16 @@ export const FeatureTreeMenu = ({ children }: PropsWithChildren) => {
           }
         }}
       >
-        <Menu.Button className="!p-0 !bg-transparent hover:text-primary border-transparent dark:!border-transparent hover:!border-primary dark:hover:!border-chalkboard-70 ui-open:!border-primary dark:ui-open:!border-chalkboard-70 !outline-none">
+        <Menu.Button className="p-0! bg-transparent! hover:text-primary border-transparent dark:border-transparent! hover:border-primary! dark:hover:border-chalkboard-70! ui-open:border-primary! dark:ui-open:border-chalkboard-70! outline-hidden!">
           <ActionIcon
             icon="three-dots"
             className="p-1"
             size="sm"
             bgClassName="bg-transparent dark:bg-transparent"
-            iconClassName={'!text-chalkboard-90 dark:!text-chalkboard-40'}
+            iconClassName={'text-chalkboard-90! dark:text-chalkboard-40!'}
           />
         </Menu.Button>
-        <Menu.Items className="absolute right-0 left-auto w-72 flex flex-col gap-1 divide-y divide-chalkboard-20 dark:divide-chalkboard-70 align-stretch px-0 py-1 bg-chalkboard-10 dark:bg-chalkboard-100 rounded-sm shadow-lg border border-solid border-chalkboard-20/50 dark:border-chalkboard-80/50">
+        <Menu.Items className="absolute right-0 left-auto w-72 flex flex-col gap-1 divide-y divide-chalkboard-20 dark:divide-chalkboard-70 align-stretch px-0 py-1 bg-chalkboard-10 dark:bg-chalkboard-100 rounded-xs shadow-lg border border-solid border-chalkboard-20/50 dark:border-chalkboard-80/50">
           <Menu.Item>
             <button
               onClick={() =>
diff --git a/src/components/ModelingSidebar/ModelingPanes/FeatureTreePane.tsx b/src/components/ModelingSidebar/ModelingPanes/FeatureTreePane.tsx
index ac8655e50ab..2cf5e10e19f 100644
--- a/src/components/ModelingSidebar/ModelingPanes/FeatureTreePane.tsx
+++ b/src/components/ModelingSidebar/ModelingPanes/FeatureTreePane.tsx
@@ -221,7 +221,7 @@ export const FeatureTreePane = () => {
                   `bg-destroy-10/40 dark:bg-destroy-80/40`
                 }`}
               >
-                <div className="text-sm bg-destroy-80 text-chalkboard-10 py-1 px-2 rounded flex gap-2 items-center">
+                <div className="text-sm bg-destroy-80 text-chalkboard-10 py-1 px-2 rounded-sm flex gap-2 items-center">
                   <p className="flex-1">
                     Errors found in KCL code.
                     <br />
@@ -229,7 +229,7 @@ export const FeatureTreePane = () => {
                   </p>
                   <button
                     onClick={goToError}
-                    className="bg-chalkboard-10 text-destroy-80 p-1 rounded-sm flex-none hover:bg-chalkboard-10 hover:border-destroy-70 hover:text-destroy-80 border-transparent"
+                    className="bg-chalkboard-10 text-destroy-80 p-1 rounded-xs flex-none hover:bg-chalkboard-10 hover:border-destroy-70 hover:text-destroy-80 border-transparent"
                   >
                     View error
                   </button>
@@ -280,7 +280,7 @@ const VisibilityToggle = (props: VisibilityToggleProps) => {
   return (
     <button
       onClick={handleToggleVisible}
-      className="p-0 m-0"
+      className="p-0 m-0 border-transparent!"
       data-testid="feature-tree-visibility-toggle"
     >
       <CustomIcon
@@ -331,7 +331,7 @@ const OperationItemWrapper = ({
     >
       <button
         {...props}
-        className={`reset !py-0.5 !px-1 flex-1 flex items-center gap-2 text-left text-base ${selectable ? 'border-transparent dark:border-transparent' : '!border-transparent cursor-default'} ${className}`}
+        className={`reset py-0.5! px-1! flex-1 flex items-center gap-2 text-left text-base border-transparent! bg-transparent! ${selectable ? 'cursor-pointer' : 'cursor-default'} ${className}`}
       >
         <CustomIcon name={icon} className="w-5 h-5 block" />
         <div className="flex flex-1 items-baseline align-baseline">
diff --git a/src/components/ModelingSidebar/ModelingPanes/KclEditorMenu.module.css b/src/components/ModelingSidebar/ModelingPanes/KclEditorMenu.module.css
index c6771f93f03..ec3fa8cf08f 100644
--- a/src/components/ModelingSidebar/ModelingPanes/KclEditorMenu.module.css
+++ b/src/components/ModelingSidebar/ModelingPanes/KclEditorMenu.module.css
@@ -1,3 +1,4 @@
+@reference "../../../index.css";
 .button {
   @apply flex justify-between items-center gap-2 px-2 py-1 text-left border-none rounded-sm;
   @apply !no-underline text-xs select-none text-chalkboard-90;
diff --git a/src/components/ModelingSidebar/ModelingPanes/KclEditorMenu.tsx b/src/components/ModelingSidebar/ModelingPanes/KclEditorMenu.tsx
index 4363e654932..e5dcde6864f 100644
--- a/src/components/ModelingSidebar/ModelingPanes/KclEditorMenu.tsx
+++ b/src/components/ModelingSidebar/ModelingPanes/KclEditorMenu.tsx
@@ -31,16 +31,16 @@ export const KclEditorMenu = ({ children }: PropsWithChildren) => {
           }
         }}
       >
-        <Menu.Button className="!p-0 !bg-transparent hover:text-primary border-transparent dark:!border-transparent hover:!border-primary dark:hover:!border-chalkboard-70 ui-open:!border-primary dark:ui-open:!border-chalkboard-70 !outline-none">
+        <Menu.Button className="p-0! bg-transparent! hover:text-primary border-transparent dark:border-transparent! hover:border-primary! dark:hover:border-chalkboard-70! ui-open:border-primary! dark:ui-open:border-chalkboard-70! outline-hidden!">
           <ActionIcon
             icon="three-dots"
             className="p-1"
             size="sm"
             bgClassName="bg-transparent dark:bg-transparent"
-            iconClassName={'!text-chalkboard-90 dark:!text-chalkboard-40'}
+            iconClassName={'text-chalkboard-90! dark:text-chalkboard-40!'}
           />
         </Menu.Button>
-        <Menu.Items className="absolute right-0 left-auto w-72 flex flex-col gap-1 divide-y divide-chalkboard-20 dark:divide-chalkboard-70 align-stretch px-0 py-1 bg-chalkboard-10 dark:bg-chalkboard-100 rounded-sm shadow-lg border border-solid border-chalkboard-20/50 dark:border-chalkboard-80/50">
+        <Menu.Items className="absolute right-0 left-auto w-72 flex flex-col gap-1 divide-y divide-chalkboard-20 dark:divide-chalkboard-70 align-stretch px-0 py-1 bg-chalkboard-10 dark:bg-chalkboard-100 rounded-xs shadow-lg border border-solid border-chalkboard-20/50 dark:border-chalkboard-80/50">
           <Menu.Item>
             <button
               onClick={() => {
diff --git a/src/components/ModelingSidebar/ModelingPanes/MemoryPane.tsx b/src/components/ModelingSidebar/ModelingPanes/MemoryPane.tsx
index 2143fa9d49e..fc922b21f8d 100644
--- a/src/components/ModelingSidebar/ModelingPanes/MemoryPane.tsx
+++ b/src/components/ModelingSidebar/ModelingPanes/MemoryPane.tsx
@@ -34,10 +34,10 @@ export const MemoryPaneMenu = () => {
         Element="button"
         iconStart={{
           icon: 'clipboardPlus',
-          iconClassName: '!text-current',
+          iconClassName: 'text-current!',
           bgClassName: 'bg-transparent',
         }}
-        className="!p-0 !bg-transparent hover:text-primary border-transparent hover:border-primary !outline-none"
+        className="p-0! bg-transparent! hover:text-primary border-transparent hover:border-primary outline-hidden!"
         onClick={copyProgramMemoryToClipboard}
       >
         <Tooltip position="bottom-right">Copy to clipboard</Tooltip>
diff --git a/src/components/ModelingSidebar/ModelingSidebar.module.css b/src/components/ModelingSidebar/ModelingSidebar.module.css
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/src/components/ModelingSidebar/ModelingSidebar.tsx b/src/components/ModelingSidebar/ModelingSidebar.tsx
index 85af8a7662a..cc1040b53e1 100644
--- a/src/components/ModelingSidebar/ModelingSidebar.tsx
+++ b/src/components/ModelingSidebar/ModelingSidebar.tsx
@@ -222,7 +222,7 @@ export function ModelingSidebar() {
 
   return (
     <Resizable
-      className={`group z-10 flex flex-col ${pointerEventsCssClass} ${context.store?.openPanes.length ? undefined : '!w-auto'}`}
+      className={`group z-10 flex flex-col ${pointerEventsCssClass} ${context.store?.openPanes.length ? undefined : 'w-auto!'}`}
       defaultSize={{
         width: '550px',
         height: 'auto',
@@ -252,7 +252,7 @@ export function ModelingSidebar() {
       <div id="app-sidebar" className="flex flex-row flex-1">
         <ul
           className={
-            'relative pointer-events-auto p-0 col-start-1 col-span-1 flex flex-col items-stretch ' +
+            'relative z-2 pointer-events-auto p-0 col-start-1 col-span-1 flex flex-col items-stretch ' +
             'bg-chalkboard-10 border-r border-chalkboard-30 dark:bg-chalkboard-90 dark:border-chalkboard-80 '
           }
         >
@@ -294,7 +294,7 @@ export function ModelingSidebar() {
         <ul
           id="pane-section"
           className={
-            'ml-[-1px] col-start-2 col-span-1 flex flex-col items-stretch border-x border-chalkboard-30 dark:border-chalkboard-80 ' +
+            '-ml-px col-start-2 col-span-1 flex flex-col items-stretch border-x border-chalkboard-30 dark:border-chalkboard-80 ' +
             (context.store?.openPanes.length >= 1 ? `w-full` : `hidden`)
           }
         >
@@ -356,11 +356,11 @@ function ModelingPaneButton({
   return (
     <div
       id={paneConfig.id + '-button-holder'}
-      className="relative py-[1px]"
+      className="relative py-px"
       data-onboarding-id={`${paneConfig.id}-pane-button`}
     >
       <button
-        className={`group pointer-events-auto flex items-center justify-center border-0 border-r-2 rounded-none border-transparent dark:border-transparent p-2 m-0 !outline-0 ${paneIsOpen ? ' !border-primary' : ''}`}
+        className={`group pointer-events-auto flex items-center justify-center border-0 border-r-2 rounded-none border-transparent dark:border-transparent p-2 m-0 outline-0! ${paneIsOpen ? ' border-primary!' : ''}`}
         onClick={onClick}
         name={paneConfig.sidebarName}
         data-testid={paneConfig.id + SIDEBAR_BUTTON_SUFFIX}
@@ -371,7 +371,7 @@ function ModelingPaneButton({
         <ActionIcon
           icon={paneConfig.icon}
           size={paneConfig.iconSize || 'md'}
-          bgClassName="rounded-sm !bg-transparent"
+          bgClassName="rounded-xs bg-transparent!"
         />
         <span className="sr-only">
           {paneConfig.sidebarName}
@@ -433,10 +433,10 @@ function ResizeHandle(props: HTMLProps<HTMLDivElement>) {
       {...props}
       className={'group/grip absolute inset-0 ' + props.className}
     >
-      <div className="hidden group-hover/grip:block absolute bg-chalkboard-30 dark:bg-chalkboard-70 w-[1px] h-auto left-1/2 top-0 bottom-0" />
+      <div className="hidden group-hover/grip:block absolute bg-chalkboard-30 dark:bg-chalkboard-70 w-px h-auto left-1/2 top-0 bottom-0" />
       <div
         className={
-          'hidden group-hover/grip:block py-1 absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 rounded-sm w-fit group-hover/grip:bg-chalkboard-30 group-hover/grip:dark:bg-chalkboard-70 bg-transparent transition-colors border border-transparent group-hover/grip:border-chalkboard-40 dark:group-hover/grip:border-chalkboard-90 duration-75 transition-ease-out delay-100'
+          'hidden group-hover/grip:block py-1 absolute top-1/2 -translate-y-1/2 left-1/2 -translate-x-1/2 rounded-xs w-fit group-hover/grip:bg-chalkboard-30 dark:group-hover/grip:bg-chalkboard-70 bg-transparent transition-colors border border-transparent group-hover/grip:border-chalkboard-40 dark:group-hover/grip:border-chalkboard-90 duration-75 transition-ease-out delay-100'
         }
       >
         <CustomIcon className="w-5 -mx-0.5 rotate-90" name="sixDots" />
diff --git a/src/components/NetworkHealthIndicator.tsx b/src/components/NetworkHealthIndicator.tsx
index 74cdb6979e7..3cc7cce0a26 100644
--- a/src/components/NetworkHealthIndicator.tsx
+++ b/src/components/NetworkHealthIndicator.tsx
@@ -39,7 +39,7 @@ const hasIssueToIconColors: Record<string | number | symbol, IconColorConfig> =
       bg: 'bg-chalkboard-30 dark:bg-chalkboard-70',
     },
     false: {
-      icon: '!text-chalkboard-110 dark:!text-chalkboard-10',
+      icon: 'text-chalkboard-110! dark:text-chalkboard-10!',
       bg: 'bg-transparent dark:bg-transparent',
     },
   }
@@ -102,7 +102,7 @@ function NetworkHealthPopoverContent() {
 
   return (
     <div
-      className="absolute left-2 bottom-full mb-1 w-64 flex flex-col gap-1 align-stretch bg-chalkboard-10 dark:bg-chalkboard-90 rounded shadow-lg border border-solid border-chalkboard-20/50 dark:border-chalkboard-80/50 text-sm"
+      className="absolute left-2 bottom-full mb-1 w-64 flex flex-col gap-1 align-stretch bg-chalkboard-10 dark:bg-chalkboard-90 rounded-sm shadow-lg border border-solid border-chalkboard-20/50 dark:border-chalkboard-80/50 text-sm"
       data-testid="network-popover"
     >
       <div
@@ -111,7 +111,7 @@ function NetworkHealthPopoverContent() {
         <h2 className="text-sm font-sans font-normal">Network health</h2>
         <p
           data-testid="network"
-          className="font-bold text-xs uppercase px-2 py-1 rounded-sm"
+          className="font-bold text-xs uppercase px-2 py-1 rounded-xs"
         >
           {NETWORK_HEALTH_TEXT[overallState]}
         </p>
@@ -124,7 +124,7 @@ function NetworkHealthPopoverContent() {
         </h2>
         <p
           data-testid="network"
-          className={`font-bold text-xs uppercase px-2 py-1 rounded-sm ${overallConnectionStateColor[overallState].icon}`}
+          className={`font-bold text-xs uppercase px-2 py-1 rounded-xs ${overallConnectionStateColor[overallState].icon}`}
         >
           {ping ?? 'N/A'}
         </p>
@@ -145,7 +145,7 @@ function NetworkHealthPopoverContent() {
                       String(issues[name as ConnectingTypeGroup])
                     ].icon
                   }
-                  bgClassName={`rounded-sm ${
+                  bgClassName={`rounded-xs ${
                     hasIssueToIconColors[
                       String(issues[name as ConnectingTypeGroup])
                     ].bg
@@ -176,7 +176,7 @@ function NetworkHealthPopoverContent() {
                   size="lg"
                   icon={hasCopied ? 'clipboardCheckmark' : 'clipboardPlus'}
                   iconClassName="text-inherit dark:text-inherit"
-                  bgClassName="!bg-transparent"
+                  bgClassName="bg-transparent!"
                 />
               </button>
             )}
diff --git a/src/components/NetworkMachineIndicator.tsx b/src/components/NetworkMachineIndicator.tsx
index 1128515805c..7ca723cc72a 100644
--- a/src/components/NetworkMachineIndicator.tsx
+++ b/src/components/NetworkMachineIndicator.tsx
@@ -29,14 +29,14 @@ function NetworkMachinesPopoverContent({
 }: { machines: components['schemas']['MachineInfoResponse'][] }) {
   return (
     <div
-      className="absolute left-2 bottom-full mb-1 w-64 flex flex-col gap-1 align-stretch bg-chalkboard-10 dark:bg-chalkboard-90 rounded shadow-lg border border-solid border-chalkboard-20/50 dark:border-chalkboard-80/50 text-sm"
+      className="absolute left-2 bottom-full mb-1 w-64 flex flex-col gap-1 align-stretch bg-chalkboard-10 dark:bg-chalkboard-90 rounded-sm shadow-lg border border-solid border-chalkboard-20/50 dark:border-chalkboard-80/50 text-sm"
       data-testid="network-popover"
     >
       <div className="flex items-center justify-between p-2 rounded-t-sm bg-chalkboard-20 dark:bg-chalkboard-80">
         <h2 className="text-sm font-sans font-normal">Network machines</h2>
         <p
           data-testid="network"
-          className="font-bold text-xs uppercase px-2 py-1 rounded-sm"
+          className="font-bold text-xs uppercase px-2 py-1 rounded-xs"
         >
           {machines.length}
         </p>
diff --git a/src/components/OpenInDesktopAppHandler.tsx b/src/components/OpenInDesktopAppHandler.tsx
index 24ac619ad72..4a7f0dbc0ad 100644
--- a/src/components/OpenInDesktopAppHandler.tsx
+++ b/src/components/OpenInDesktopAppHandler.tsx
@@ -122,7 +122,7 @@ export const OpenInDesktopAppHandler = (props: React.PropsWithChildren) => {
             <div className="flex flex-col gap-2">
               <ActionButton
                 Element="button"
-                className={buttonClasses + ' !text-base'}
+                className={buttonClasses + ' text-base!'}
                 onClick={onOpenInDesktopApp}
                 iconEnd={{ icon: 'arrowRight' }}
               >
@@ -135,14 +135,14 @@ export const OpenInDesktopAppHandler = (props: React.PropsWithChildren) => {
                   ' text-sm border-transparent justify-center dark:bg-transparent'
                 }
                 to={withSiteBaseURL(`/${APP_DOWNLOAD_PATH}`)}
-                iconEnd={{ icon: 'link', bgClassName: '!bg-transparent' }}
+                iconEnd={{ icon: 'link', bgClassName: 'bg-transparent!' }}
               >
                 Download desktop app
               </ActionButton>
             </div>
             <ActionButton
               Element="button"
-              className={buttonClasses + ' -order-1 !text-base'}
+              className={buttonClasses + ' -order-1 text-base!'}
               onClick={continueToWebApp}
               iconStart={{ icon: 'arrowLeft' }}
               data-testid="continue-to-web-app-button"
diff --git a/src/components/ProjectCard/DeleteProjectDialog.tsx b/src/components/ProjectCard/DeleteProjectDialog.tsx
index 74d9ed1028b..323791b5b6e 100644
--- a/src/components/ProjectCard/DeleteProjectDialog.tsx
+++ b/src/components/ProjectCard/DeleteProjectDialog.tsx
@@ -17,7 +17,7 @@ export function DeleteConfirmationDialog({
   return (
     <Dialog open={true} onClose={onDismiss} className="relative z-50">
       <div className="fixed inset-0 grid bg-chalkboard-110/80 place-content-center">
-        <Dialog.Panel className="max-w-2xl p-4 border rounded bg-chalkboard-10 dark:bg-chalkboard-100 border-destroy-80">
+        <Dialog.Panel className="max-w-2xl p-4 border rounded-sm bg-chalkboard-10 dark:bg-chalkboard-100 border-destroy-80">
           <Dialog.Title as="h2" className="mb-4 text-2xl font-bold">
             {title}
           </Dialog.Title>
@@ -30,7 +30,7 @@ export function DeleteConfirmationDialog({
               iconStart={{
                 icon: 'trash',
                 bgClassName: 'bg-destroy-10 dark:bg-destroy-80',
-                iconClassName: '!text-destroy-80 dark:!text-destroy-20',
+                iconClassName: 'text-destroy-80! dark:text-destroy-20!',
               }}
               className="hover:border-destroy-40 dark:hover:border-destroy-40 hover:bg-destroy-10/20 dark:hover:bg-destroy-80/20"
               data-testid="delete-confirmation"
diff --git a/src/components/ProjectCard/ProjectCard.tsx b/src/components/ProjectCard/ProjectCard.tsx
index 7ac02516962..fd42e5c0993 100644
--- a/src/components/ProjectCard/ProjectCard.tsx
+++ b/src/components/ProjectCard/ProjectCard.tsx
@@ -95,7 +95,7 @@ function ProjectCard({
   return (
     <li
       {...props}
-      className="group relative flex flex-col rounded-sm border border-chalkboard-50 dark:border-chalkboard-80 hover:!border-primary"
+      className="group relative flex flex-col rounded-xs border border-chalkboard-50 dark:border-chalkboard-80 hover:border-primary!"
     >
       <Link
         data-testid="project-link"
@@ -104,13 +104,13 @@ function ProjectCard({
             ? `${PATHS.FILE}/${encodeURIComponent(project.default_file)}`
             : ''
         }
-        className={`flex flex-col flex-1 !no-underline !text-chalkboard-110 dark:!text-chalkboard-10 min-h-[5em] divide-y divide-chalkboard-50 dark:divide-chalkboard-80  ${
+        className={`flex flex-col flex-1 no-underline! text-chalkboard-110! dark:text-chalkboard-10! min-h-[5em] divide-y divide-chalkboard-50 dark:divide-chalkboard-80  ${
           project.readWriteAccess
-            ? 'group-hover:!divide-primary group-hover:!hue-rotate-0'
+            ? 'group-hover:divide-primary! group-hover:hue-rotate-0!'
             : 'cursor-not-allowed'
         }`}
       >
-        <div className="h-36 relative overflow-hidden bg-gradient-to-b from-transparent to-primary/10 rounded-t-sm">
+        <div className="h-36 relative overflow-hidden bg-linear-to-b from-transparent to-primary/10 rounded-t-xs">
           {imageUrl && (
             <img
               src={imageUrl}
@@ -119,7 +119,7 @@ function ProjectCard({
             />
           )}
         </div>
-        <div className="pb-2 flex flex-col flex-grow flex-auto gap-2 rounded-b-sm">
+        <div className="pb-2 flex flex-col grow flex-auto gap-2 rounded-b-sm">
           {isEditing ? (
             <ProjectCardRenameForm
               onSubmit={handleSave}
@@ -173,15 +173,15 @@ function ProjectCard({
             Element="button"
             iconStart={{
               icon: 'sketch',
-              iconClassName: 'dark:!text-chalkboard-20',
-              bgClassName: '!bg-transparent',
+              iconClassName: 'dark:text-chalkboard-20!',
+              bgClassName: 'bg-transparent!',
             }}
             onClick={(e) => {
               e.stopPropagation()
               e.nativeEvent.stopPropagation()
               setIsEditing(true)
             }}
-            className="!p-0"
+            className="p-0!"
           >
             <Tooltip position="top-right">Rename project</Tooltip>
           </ActionButton>
@@ -190,10 +190,10 @@ function ProjectCard({
             Element="button"
             iconStart={{
               icon: 'trash',
-              iconClassName: 'dark:!text-chalkboard-30',
-              bgClassName: '!bg-transparent',
+              iconClassName: 'dark:text-chalkboard-30!',
+              bgClassName: 'bg-transparent!',
             }}
-            className="!p-0"
+            className="p-0!"
             onClick={(e) => {
               e.stopPropagation()
               e.nativeEvent.stopPropagation()
diff --git a/src/components/ProjectCard/ProjectCardRenameForm.tsx b/src/components/ProjectCard/ProjectCardRenameForm.tsx
index af578f3f6f9..13e4013781a 100644
--- a/src/components/ProjectCard/ProjectCardRenameForm.tsx
+++ b/src/components/ProjectCard/ProjectCardRenameForm.tsx
@@ -18,7 +18,7 @@ export const ProjectCardRenameForm = forwardRef(
     return (
       <form {...props}>
         <input
-          className="min-w-0 dark:bg-chalkboard-80 dark:border-chalkboard-40 focus:outline-none"
+          className="min-w-0 dark:bg-chalkboard-80 dark:border-chalkboard-40 focus:outline-hidden"
           type="text"
           data-testid="project-rename-input"
           id="newProjectName"
@@ -41,9 +41,9 @@ export const ProjectCardRenameForm = forwardRef(
             type="submit"
             iconStart={{
               icon: 'checkmark',
-              bgClassName: '!bg-transparent',
+              bgClassName: 'bg-transparent!',
             }}
-            className="!p-0"
+            className="p-0!"
           >
             <Tooltip position="left">Rename project</Tooltip>
           </ActionButton>
@@ -51,10 +51,10 @@ export const ProjectCardRenameForm = forwardRef(
             Element="button"
             iconStart={{
               icon: 'close',
-              iconClassName: 'dark:!text-chalkboard-20',
-              bgClassName: '!bg-transparent',
+              iconClassName: 'dark:text-chalkboard-20!',
+              bgClassName: 'bg-transparent!',
             }}
-            className="!p-0"
+            className="p-0!"
             onClick={onDismiss}
           >
             <Tooltip position="left">Cancel</Tooltip>
diff --git a/src/components/ProjectSearchBar.tsx b/src/components/ProjectSearchBar.tsx
index 83ae5b9977e..a471b6c8854 100644
--- a/src/components/ProjectSearchBar.tsx
+++ b/src/components/ProjectSearchBar.tsx
@@ -44,15 +44,15 @@ export function ProjectSearchBar({
 
   return (
     <div className="relative group">
-      <div className="flex items-center gap-2 py-0.5 pl-0.5 pr-2 rounded border-solid border border-primary/10 dark:border-chalkboard-80 focus-within:border-primary dark:focus-within:border-chalkboard-30">
+      <div className="flex items-center gap-2 py-0.5 pl-0.5 pr-2 rounded-sm border-solid border border-primary/10 dark:border-chalkboard-80 focus-within:border-primary dark:focus-within:border-chalkboard-30">
         <CustomIcon
           name="search"
-          className="w-5 h-5 rounded-sm bg-primary/10 dark:bg-transparent text-primary dark:text-chalkboard-10 group-focus-within:bg-primary group-focus-within:text-chalkboard-10"
+          className="w-5 h-5 rounded-xs bg-primary/10 dark:bg-transparent text-primary dark:text-chalkboard-10 group-focus-within:bg-primary group-focus-within:text-chalkboard-10"
         />
         <input
           ref={inputRef}
           onChange={(event) => setQuery(event.target.value)}
-          className="w-full text-sm bg-transparent focus:outline-none selection:bg-primary/20 dark:selection:bg-primary/40 dark:focus:outline-none"
+          className="w-full text-sm bg-transparent focus:outline-hidden selection:bg-primary/20 dark:selection:bg-primary/40 dark:focus:outline-hidden"
           placeholder="Search projects (Ctrl+.)"
           autoCapitalize="off"
           autoComplete="off"
diff --git a/src/components/ProjectSidebarMenu.tsx b/src/components/ProjectSidebarMenu.tsx
index 4e52c347441..e6636d424c5 100644
--- a/src/components/ProjectSidebarMenu.tsx
+++ b/src/components/ProjectSidebarMenu.tsx
@@ -37,7 +37,7 @@ const ProjectSidebarMenu = ({
   const trafficLightsOffset =
     isDesktop() && window.electron.os.isMac ? 'ml-20' : ''
   return (
-    <div className={'!no-underline flex gap-2 ' + trafficLightsOffset}>
+    <div className={'no-underline! flex gap-2 ' + trafficLightsOffset}>
       <AppLogoLink project={project} file={file} />
       {enableMenu ? (
         <ProjectMenuPopover project={project} file={file} />
@@ -148,7 +148,7 @@ function ProjectMenuPopover({
               {!findCommand(insertCommandInfo) && (
                 <Tooltip
                   position="right"
-                  wrapperClassName="!max-w-none min-w-fit"
+                  wrapperClassName="max-w-none! min-w-fit"
                 >
                   Awaiting engine connection
                 </Tooltip>
@@ -171,7 +171,7 @@ function ProjectMenuPopover({
               {!findCommand(exportCommandInfo) && (
                 <Tooltip
                   position="right"
-                  wrapperClassName="!max-w-none min-w-fit"
+                  wrapperClassName="max-w-none! min-w-fit"
                 >
                   Awaiting engine connection
                 </Tooltip>
@@ -195,7 +195,7 @@ function ProjectMenuPopover({
               {!findCommand(makeCommandInfo) && (
                 <Tooltip
                   position="right"
-                  wrapperClassName="!max-w-none min-w-fit"
+                  wrapperClassName="max-w-none! min-w-fit"
                 >
                   Awaiting engine connection
                 </Tooltip>
@@ -251,7 +251,7 @@ function ProjectMenuPopover({
   return (
     <Popover className="relative">
       <Popover.Button
-        className="gap-1 rounded-sm mr-auto max-h-min min-w-max border-0 py-1 px-2 flex items-center  focus-visible:outline-appForeground dark:hover:bg-chalkboard-90"
+        className="gap-1 rounded-xs mr-auto max-h-min min-w-max border-0 py-1 px-2 flex items-center  focus-visible:outline-appForeground dark:hover:bg-chalkboard-90"
         data-testid="project-sidebar-toggle"
       >
         <div
@@ -310,7 +310,7 @@ function ProjectMenuPopover({
                     <ActionButton
                       {...rest}
                       className={
-                        'relative !font-sans flex items-center gap-2 rounded-sm py-1.5 px-2 cursor-pointer hover:bg-chalkboard-20 dark:hover:bg-chalkboard-80 border-none text-left ' +
+                        'relative font-sans! flex items-center gap-2 rounded-xs py-1.5 px-2 cursor-pointer hover:bg-chalkboard-20 dark:hover:bg-chalkboard-80 border-none text-left ' +
                         className
                       }
                       onMouseUp={() => {
diff --git a/src/components/SetAngleLengthModal.tsx b/src/components/SetAngleLengthModal.tsx
index 19e5359bb45..53a8c3009b0 100644
--- a/src/components/SetAngleLengthModal.tsx
+++ b/src/components/SetAngleLengthModal.tsx
@@ -125,7 +125,7 @@ export const SetAngleLengthModal = ({
                     type="text"
                     name="val"
                     id="val"
-                    className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md font-mono pl-1 text-gray-900"
+                    className="shadow-xs focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md font-mono pl-1 text-gray-900"
                     value={value}
                     onChange={(e) => {
                       setValue(e.target.value)
@@ -144,7 +144,7 @@ export const SetAngleLengthModal = ({
                   <button
                     type="button"
                     disabled={isDisabled}
-                    className={`inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 ${
+                    className={`inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 ${
                       isDisabled ? 'opacity-50 cursor-not-allowed' : ''
                     }`}
                     onClick={() =>
diff --git a/src/components/SetHorVertDistanceModal.tsx b/src/components/SetHorVertDistanceModal.tsx
index f764a723b53..78ab62dd64f 100644
--- a/src/components/SetHorVertDistanceModal.tsx
+++ b/src/components/SetHorVertDistanceModal.tsx
@@ -127,7 +127,7 @@ export const GetInfoModal = ({
                     name="val"
                     id="val"
                     ref={inputRef}
-                    className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm text-gray-900 border-gray-300 rounded-md font-mono"
+                    className="shadow-xs focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm text-gray-900 border-gray-300 rounded-md font-mono"
                     value={value}
                     onChange={(e) => {
                       setValue(e.target.value)
@@ -147,7 +147,7 @@ export const GetInfoModal = ({
                     name="segName"
                     id="segName"
                     disabled={!isSegNameEditable}
-                    className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm text-gray-900 border-gray-300 rounded-md font-mono"
+                    className="shadow-xs focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm text-gray-900 border-gray-300 rounded-md font-mono"
                     value={segName}
                     onChange={(e) => {
                       setSegName(e.target.value)
@@ -165,7 +165,7 @@ export const GetInfoModal = ({
                 <div className="mt-4">
                   <button
                     type="button"
-                    className="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                    className="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
                     onClick={() =>
                       valueNode &&
                       onResolve({
diff --git a/src/components/Settings/AllKeybindingsFields.tsx b/src/components/Settings/AllKeybindingsFields.tsx
index 004bc437fb4..4958261dfdb 100644
--- a/src/components/Settings/AllKeybindingsFields.tsx
+++ b/src/components/Settings/AllKeybindingsFields.tsx
@@ -78,7 +78,7 @@ function KeybindingField({
         {item.sequence.split(' ').map((chord, i) => (
           <kbd
             key={`${category}-${item.name}-${chord}-${i}`}
-            className="py-0.5 px-1.5 rounded bg-primary/10 dark:bg-chalkboard-80"
+            className="py-0.5 px-1.5 rounded-sm bg-primary/10 dark:bg-chalkboard-80"
           >
             {chord}
           </kbd>
diff --git a/src/components/Settings/SettingsFieldInput.tsx b/src/components/Settings/SettingsFieldInput.tsx
index 545c0279cf3..ca46e30929e 100644
--- a/src/components/Settings/SettingsFieldInput.tsx
+++ b/src/components/Settings/SettingsFieldInput.tsx
@@ -92,7 +92,7 @@ export function SettingsFieldInput({
         <select
           name={`${category}-${settingName}`}
           data-testid={`${category}-${settingName}`}
-          className="p-1 bg-transparent border rounded-sm border-chalkboard-30 w-full"
+          className="p-1 bg-transparent border rounded-xs border-chalkboard-30 w-full"
           value={String(
             setting[settingsLevel] || setting.getFallback(settingsLevel)
           )}
@@ -124,7 +124,7 @@ export function SettingsFieldInput({
           name={`${category}-${settingName}`}
           data-testid={`${category}-${settingName}`}
           type="text"
-          className="p-1 bg-transparent border rounded-sm border-chalkboard-30 w-full"
+          className="p-1 bg-transparent border rounded-xs border-chalkboard-30 w-full"
           defaultValue={String(
             setting[settingsLevel] || setting.getFallback(settingsLevel)
           )}
diff --git a/src/components/Settings/SettingsSearchBar.tsx b/src/components/Settings/SettingsSearchBar.tsx
index b61f78877e2..b331bc1bb38 100644
--- a/src/components/Settings/SettingsSearchBar.tsx
+++ b/src/components/Settings/SettingsSearchBar.tsx
@@ -88,11 +88,11 @@ export function SettingsSearchBar() {
   return (
     <Combobox onChange={handleSelection}>
       <div className="relative group">
-        <div className="flex items-center gap-2 py-0.5 pr-1 pl-2 rounded border-solid border border-primary/10 dark:border-chalkboard-80 focus-within:border-primary dark:focus-within:border-chalkboard-30">
+        <div className="flex items-center gap-2 py-0.5 pr-1 pl-2 rounded-sm border-solid border border-primary/10 dark:border-chalkboard-80 focus-within:border-primary dark:focus-within:border-chalkboard-30">
           <Combobox.Input
             ref={inputRef}
             onChange={(event) => setQuery(event.target.value)}
-            className="w-full bg-transparent focus:outline-none selection:bg-primary/20 dark:selection:bg-primary/40 dark:focus:outline-none"
+            className="w-full bg-transparent focus:outline-hidden selection:bg-primary/20 dark:selection:bg-primary/40 dark:focus:outline-hidden"
             placeholder="Search settings (Ctrl+.)"
             autoCapitalize="off"
             autoComplete="off"
@@ -102,17 +102,17 @@ export function SettingsSearchBar() {
           />
           <CustomIcon
             name="search"
-            className="w-5 h-5 rounded-sm bg-primary/10 text-primary group-focus-within:bg-primary group-focus-within:text-chalkboard-10"
+            className="w-5 h-5 rounded-xs bg-primary/10 text-primary group-focus-within:bg-primary group-focus-within:text-chalkboard-10"
           />
         </div>
-        <Combobox.Options className="absolute top-full mt-2 right-0 w-80 overflow-y-auto z-50 max-h-96 cursor-pointer bg-chalkboard-10 dark:bg-chalkboard-100 border border-solid border-primary dark:border-chalkboard-30 rounded">
+        <Combobox.Options className="absolute top-full mt-2 right-0 w-80 overflow-y-auto z-50 max-h-96 cursor-pointer bg-chalkboard-10 dark:bg-chalkboard-100 border border-solid border-primary dark:border-chalkboard-30 rounded-sm">
           {searchResults?.map((option) => (
             <Combobox.Option
               key={`${option.category}-${option.name}-${option.level}`}
               value={option}
               className="flex flex-col items-start gap-2 px-4 py-2 ui-active:bg-primary/10 dark:ui-active:bg-chalkboard-90"
             >
-              <p className="flex-grow text-base capitalize m-0 leading-none">
+              <p className="grow text-base capitalize m-0 leading-none">
                 {option.level} ·{' '}
                 {decamelize(option.category, { separator: ' ' })} ·{' '}
                 {option.displayName}
diff --git a/src/components/Settings/SettingsSection.tsx b/src/components/Settings/SettingsSection.tsx
index ff5743411cc..5a04fdf2ecb 100644
--- a/src/components/Settings/SettingsSection.tsx
+++ b/src/components/Settings/SettingsSection.tsx
@@ -39,7 +39,7 @@ export function SettingsSection({
           {onFallback && parentLevel && settingHasChanged && (
             <button
               onClick={onFallback}
-              className="hidden group-hover:block group-focus-within:block border-none p-0 hover:bg-warn-10 dark:hover:bg-warn-80 focus:bg-warn-10 dark:focus:bg-warn-80 focus:outline-none"
+              className="hidden group-hover:block group-focus-within:block border-none p-0 hover:bg-warn-10 dark:hover:bg-warn-80 focus:bg-warn-10 dark:focus:bg-warn-80 focus:outline-hidden"
             >
               <CustomIcon name="refresh" className="w-4 h-4" />
               <span className="sr-only">Roll back {title}</span>
diff --git a/src/components/Settings/SettingsTabButton.tsx b/src/components/Settings/SettingsTabButton.tsx
index f873ab499ab..e8801b46606 100644
--- a/src/components/Settings/SettingsTabButton.tsx
+++ b/src/components/Settings/SettingsTabButton.tsx
@@ -11,7 +11,7 @@ export function SettingsTabButton(props: SettingsTabButtonProps) {
   const { checked, icon, text } = props
   return (
     <div
-      className={`cursor-pointer select-none flex items-center gap-1 p-1 pr-2 -mb-[1px] border-0 border-b ${
+      className={`cursor-pointer select-none flex items-center gap-1 p-1 pr-2 -mb-px border-0 border-b ${
         checked
           ? 'border-primary'
           : 'border-chalkboard-20 dark:border-chalkboard-30 hover:bg-primary/20 dark:hover:bg-primary/50'
@@ -20,7 +20,7 @@ export function SettingsTabButton(props: SettingsTabButtonProps) {
       <CustomIcon
         name={icon}
         className={
-          'w-5 h-5 ' + (checked ? 'bg-primary !text-chalkboard-10' : '')
+          'w-5 h-5 ' + (checked ? 'bg-primary text-chalkboard-10!' : '')
         }
       />
       <span>{text}</span>
diff --git a/src/components/ShareButton.tsx b/src/components/ShareButton.tsx
index 4f1be3864c3..6ee3cb71477 100644
--- a/src/components/ShareButton.tsx
+++ b/src/components/ShareButton.tsx
@@ -132,7 +132,7 @@ export const ShareButton = memo(function ShareButton() {
                 autoComplete="off"
                 autoCorrect="off"
                 spellCheck="false"
-                className={`${allowPassword ? 'cursor-pointer' : 'cursor-not-allowed'} text-xs w-full py-1 bg-transparent text-chalkboard-100 placeholder:text-chalkboard-70 dark:text-chalkboard-10 dark:placeholder:text-chalkboard-50 focus:outline-none focus:ring-0`}
+                className={`${allowPassword ? 'cursor-pointer' : 'cursor-not-allowed'} text-xs w-full py-1 bg-transparent text-chalkboard-100 placeholder:text-chalkboard-70 dark:text-chalkboard-10 dark:placeholder:text-chalkboard-50 focus:outline-hidden focus:ring-0`}
                 type="text"
                 placeholder="Set a password"
               />
diff --git a/src/components/SketchOnImportToast.tsx b/src/components/SketchOnImportToast.tsx
index fd51dc0e1d7..6d0a918219d 100644
--- a/src/components/SketchOnImportToast.tsx
+++ b/src/components/SketchOnImportToast.tsx
@@ -8,7 +8,7 @@ export function SketchOnImportToast({ fileName }: SketchOnImportToastProps) {
   return (
     <div className="flex flex-col gap-2">
       <span>This face is from an import</span>
-      <span className="font-mono text-sm bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">
+      <span className="font-mono text-sm bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-sm">
         {fileName}
       </span>
       <span>Please select this from the files pane to edit</span>
diff --git a/src/components/StatusBar/StatusBar.tsx b/src/components/StatusBar/StatusBar.tsx
index b4e19abbbd9..77cbb742b76 100644
--- a/src/components/StatusBar/StatusBar.tsx
+++ b/src/components/StatusBar/StatusBar.tsx
@@ -14,14 +14,14 @@ export function StatusBar({
   return (
     <footer
       id="statusbar"
-      className="relative z-10 flex justify-between items-center bg-chalkboard-20 dark:bg-chalkboard-90 text-chalkboard-80 dark:text-chalkboard-30 border-t border-t-chalkboard-30 dark:border-t-chalkboard-80"
+      className="relative z-10 flex justify-between bg-chalkboard-20 dark:bg-chalkboard-90 text-chalkboard-80 dark:text-chalkboard-30 border-t border-t-chalkboard-30 dark:border-t-chalkboard-80"
     >
-      <menu id="statusbar-globals" className="flex items-stretch">
+      <menu id="statusbar-globals" className="flex">
         {globalItems.map((item) => (
           <StatusBarItem key={item.id} {...item} position="left" />
         ))}
       </menu>
-      <menu id="statusbar-locals" className="flex items-stretch">
+      <menu id="statusbar-locals" className="flex">
         {localItems.map((item) => (
           <StatusBarItem key={item.id} {...item} position="right" />
         ))}
@@ -34,7 +34,7 @@ function StatusBarItem(
   props: StatusBarItemType & { position: 'left' | 'middle' | 'right' }
 ) {
   const defaultClassNames =
-    'flex items-center px-2 py-1 text-xs text-chalkboard-80 dark:text-chalkboard-30 rounded-none border-none hover:bg-chalkboard-30 dark:hover:bg-chalkboard-80 focus:bg-chalkboard-30 dark:focus:bg-chalkboard-80 hover:text-chalkboard-100 dark:hover:text-chalkboard-10 focus:text-chalkboard-100 dark:focus:text-chalkboard-10  focus:outline-none focus-visible:ring-2 focus:ring-primary focus:ring-opacity-50'
+    'flex items-center px-2 py-1 text-xs text-chalkboard-80 dark:text-chalkboard-30 rounded-none! border-none! hover:bg-chalkboard-30 dark:hover:bg-chalkboard-80 focus:bg-chalkboard-30 dark:focus:bg-chalkboard-80 hover:text-chalkboard-100 dark:hover:text-chalkboard-10 focus:text-chalkboard-100 dark:focus:text-chalkboard-10  focus:outline-hidden focus-visible:ring-2 focus:ring-primary focus:ring-opacity-50'
   const tooltipPosition: TooltipProps['position'] =
     props.position === 'middle' ? 'top' : `top-${props.position}`
 
diff --git a/src/components/StatusBar/defaultStatusBarItems.tsx b/src/components/StatusBar/defaultStatusBarItems.tsx
index e260ea46f67..1808a89ea1f 100644
--- a/src/components/StatusBar/defaultStatusBarItems.tsx
+++ b/src/components/StatusBar/defaultStatusBarItems.tsx
@@ -97,7 +97,7 @@ function BillingStatusBarItem() {
           position="top"
           contentClassName="text-xs"
           hoverOnly
-          wrapperClassName="ui-open:!hidden"
+          wrapperClassName="ui-open:hidden!"
         >
           Text-to-CAD credits
         </Tooltip>
diff --git a/src/components/ToastInsert.tsx b/src/components/ToastInsert.tsx
index ef4f8a77812..c7612f921f8 100644
--- a/src/components/ToastInsert.tsx
+++ b/src/components/ToastInsert.tsx
@@ -4,8 +4,8 @@ import { ActionButton } from '@src/components/ActionButton'
 
 export function ToastInsert({ onInsert }: { onInsert: () => void }) {
   return (
-    <div className="inset-0 z-50 grid place-content-center rounded bg-chalkboard-110/50 shadow-md">
-      <div className="max-w-3xl min-w-[35rem] p-8 rounded bg-chalkboard-10 dark:bg-chalkboard-90">
+    <div className="inset-0 z-50 grid place-content-center rounded-sm bg-chalkboard-110/50 shadow-md">
+      <div className="max-w-3xl min-w-140 p-8 rounded-sm bg-chalkboard-10 dark:bg-chalkboard-90">
         <p className="text-md">
           Non-KCL files aren't editable here in Zoo Studio, but you may insert
           them using the button below or the Insert command.
diff --git a/src/components/ToastQuestion.tsx b/src/components/ToastQuestion.tsx
index c0fc400394c..0af2a63dbd1 100644
--- a/src/components/ToastQuestion.tsx
+++ b/src/components/ToastQuestion.tsx
@@ -15,7 +15,7 @@ export function ToastQuestion(props: ToastQuestionProps) {
       <div className="mb-3">{props.question}</div>
       <div className="flex gap-2">
         <button
-          className="bg-chalkboard-20 dark:bg-chalkboard-80 px-3 py-1 rounded"
+          className="bg-chalkboard-20 dark:bg-chalkboard-80 px-3 py-1 rounded-sm"
           onClick={() => {
             toast.dismiss(TOAST_ID)
             props.onYes()
@@ -24,7 +24,7 @@ export function ToastQuestion(props: ToastQuestionProps) {
           Yes
         </button>
         <button
-          className="bg-chalkboard-20 dark:bg-chalkboard-80 px-3 py-1 rounded"
+          className="bg-chalkboard-20 dark:bg-chalkboard-80 px-3 py-1 rounded-sm"
           onClick={() => {
             toast.dismiss(TOAST_ID)
             props.onNo()
diff --git a/src/components/ToastUnsupportedSelection.tsx b/src/components/ToastUnsupportedSelection.tsx
index 717eb3384c0..feb05d13a9b 100644
--- a/src/components/ToastUnsupportedSelection.tsx
+++ b/src/components/ToastUnsupportedSelection.tsx
@@ -10,7 +10,7 @@ export function ToastUnsupportedSelection({
   const githubIssueUrl = 'https://github.com/KittyCAD/modeling-app/issues/6368'
 
   return (
-    <div className="inset-0 z-50 grid place-content-center rounded bg-chalkboard-10 dark:bg-chalkboard-90 shadow-md p-3">
+    <div className="inset-0 z-50 grid place-content-center rounded-sm bg-chalkboard-10 dark:bg-chalkboard-90 shadow-md p-3">
       <section>
         <p className="text-sm text-chalkboard-70 dark:text-chalkboard-30">
           Some faces and edges are not currently selectable.{' '}
diff --git a/src/components/ToastUpdate.tsx b/src/components/ToastUpdate.tsx
index c973adaaed4..2f62524e7bd 100644
--- a/src/components/ToastUpdate.tsx
+++ b/src/components/ToastUpdate.tsx
@@ -31,8 +31,8 @@ export function ToastUpdate({
   }
 
   return (
-    <div className="inset-0 z-50 grid place-content-center rounded bg-chalkboard-110/50 shadow-md">
-      <div className="max-w-3xl min-w-[35rem] p-8 rounded bg-chalkboard-10 dark:bg-chalkboard-90">
+    <div className="inset-0 z-50 grid place-content-center rounded-sm bg-chalkboard-110/50 shadow-md">
+      <div className="max-w-3xl min-w-140 p-8 rounded-sm bg-chalkboard-10 dark:bg-chalkboard-90">
         <div className="my-4 flex items-baseline">
           <span
             className="px-3 py-1 text-xl rounded-full bg-primary text-chalkboard-10"
@@ -60,7 +60,7 @@ export function ToastUpdate({
         </div>
         {releaseNotes && (
           <details
-            className="my-4 border border-chalkboard-30 dark:border-chalkboard-60 rounded"
+            className="my-4 border border-chalkboard-30 dark:border-chalkboard-60 rounded-sm"
             open={containsBreakingChanges}
             data-testid="release-notes"
           >
diff --git a/src/components/Toggle/Toggle.module.css b/src/components/Toggle/Toggle.module.css
index 331a9d44ea8..274039e2ada 100644
--- a/src/components/Toggle/Toggle.module.css
+++ b/src/components/Toggle/Toggle.module.css
@@ -1,3 +1,4 @@
+@reference "../../index.css";
 .toggle {
   @apply flex items-center gap-2 w-fit;
   @apply text-chalkboard-110;
diff --git a/src/components/Tooltip.module.css b/src/components/Tooltip.module.css
index aacdb218074..796b1afcfaa 100644
--- a/src/components/Tooltip.module.css
+++ b/src/components/Tooltip.module.css
@@ -1,3 +1,4 @@
+@reference "../index.css";
 /* Adapted from https://github.com/argyleink/gui-challenges/blob/main/tooltips/tool-tip.css */
 
 .tooltipWrapper {
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
index 4de1ce45200..b22135315fd 100644
--- a/src/components/Tooltip.tsx
+++ b/src/components/Tooltip.tsx
@@ -43,7 +43,7 @@ export default function Tooltip({
         wrapperStyle
       )}
     >
-      <div className={`rounded ${styles.tooltip} ${contentClassName || ''}`}>
+      <div className={`rounded-sm ${styles.tooltip} ${contentClassName || ''}`}>
         {children}
       </div>
     </div>
diff --git a/src/components/UnitsMenu.tsx b/src/components/UnitsMenu.tsx
index cd08b804962..98347c780a5 100644
--- a/src/components/UnitsMenu.tsx
+++ b/src/components/UnitsMenu.tsx
@@ -26,12 +26,12 @@ export function UnitsMenu() {
           <Popover.Button
             data-testid="units-menu"
             className={`flex items-center gap-2 px-3 py-1 
-        text-xs text-primary bg-chalkboard-10/70 dark:bg-chalkboard-100/80 backdrop-blur-sm 
-        border !border-primary/50 rounded-full`}
+        text-xs text-primary bg-chalkboard-10/70 dark:bg-chalkboard-100/80 backdrop-blur-xs 
+        border border-primary/50! rounded-full`}
           >
-            <div className="w-4 h-[1px] bg-primary relative">
-              <div className="absolute w-[1px] h-[1em] bg-primary left-0 top-1/2 -translate-y-1/2"></div>
-              <div className="absolute w-[1px] h-[1em] bg-primary right-0 top-1/2 -translate-y-1/2"></div>
+            <div className="w-4 h-px bg-primary relative">
+              <div className="absolute w-px h-[1em] bg-primary left-0 top-1/2 -translate-y-1/2"></div>
+              <div className="absolute w-px h-[1em] bg-primary right-0 top-1/2 -translate-y-1/2"></div>
             </div>
             <span className="sr-only">Current units are:&nbsp;</span>
             {fileSettings.defaultLengthUnit ?? DEFAULT_DEFAULT_LENGTH_UNIT}
diff --git a/src/components/UpdaterRestartModal.tsx b/src/components/UpdaterRestartModal.tsx
index 7901c080b8f..88107091c92 100644
--- a/src/components/UpdaterRestartModal.tsx
+++ b/src/components/UpdaterRestartModal.tsx
@@ -24,7 +24,7 @@ export const UpdaterRestartModal = ({
   version,
 }: UpdaterRestartModalProps) => (
   <div className="fixed inset-0 z-50 grid place-content-center bg-chalkboard-110/50">
-    <div className="max-w-3xl p-8 rounded bg-chalkboard-10 dark:bg-chalkboard-90">
+    <div className="max-w-3xl p-8 rounded-sm bg-chalkboard-10 dark:bg-chalkboard-90">
       <h1 className="text-3xl font-bold">Ready to restart?</h1>
       <p className="my-4" data-testid="update-restart-version">
         v{version} is now installed. Restart the app to use the new features.
diff --git a/src/components/UserSidebarMenu.tsx b/src/components/UserSidebarMenu.tsx
index b37e2212ca4..b5da851c8b2 100644
--- a/src/components/UserSidebarMenu.tsx
+++ b/src/components/UserSidebarMenu.tsx
@@ -286,7 +286,7 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
                   </p>
                   {displayedName !== user.email && (
                     <p
-                      className="m-0 overflow-ellipsis overflow-hidden text-chalkboard-70 dark:text-chalkboard-40 text-xs"
+                      className="m-0 text-ellipsis overflow-hidden text-chalkboard-70 dark:text-chalkboard-40 text-xs"
                       data-testid="email"
                     >
                       {user.email}
@@ -309,7 +309,7 @@ const UserSidebarMenu = ({ user }: { user?: User }) => {
                     <li key={id} className="contents">
                       <ActionButton
                         {...rest}
-                        className="!font-sans flex items-center gap-2 rounded-sm py-1.5 px-2 cursor-pointer hover:bg-chalkboard-20 dark:hover:bg-chalkboard-80 !border-none text-left focus-visible:outline-appForeground"
+                        className="font-sans! flex items-center gap-2 rounded-xs py-1.5 px-2 cursor-pointer hover:bg-chalkboard-20 dark:hover:bg-chalkboard-80 border-none! text-left focus-visible:outline-appForeground"
                         onMouseUp={() => {
                           close()
                         }}
diff --git a/src/components/WasmErrToast.tsx b/src/components/WasmErrToast.tsx
index bb65347b407..f59c53137ef 100644
--- a/src/components/WasmErrToast.tsx
+++ b/src/components/WasmErrToast.tsx
@@ -18,7 +18,7 @@ export function WasmErrToast({ onDismiss }: WasmErrorToastProps) {
               href="https://webassembly.org/"
               rel="noopener noreferrer"
               target="_blank"
-              className="!text-warn-80 dark:!text-warn-80 dark:hover:!text-warn-70 underline"
+              className="text-warn-80! dark:text-warn-80! dark:hover:text-warn-70! underline"
             >
               WASM or web assembly
             </a>{' '}
@@ -29,7 +29,7 @@ export function WasmErrToast({ onDismiss }: WasmErrorToastProps) {
               href="https://github.com/KittyCAD/modeling-app"
               rel="noopener noreferrer"
               target="_blank"
-              className="!text-warn-80 dark:!text-warn-80 dark:hover:!text-warn-70 underline"
+              className="text-warn-80! dark:text-warn-80! dark:hover:text-warn-70! underline"
             >
               our Github
             </a>
diff --git a/src/components/environment/Environment.tsx b/src/components/environment/Environment.tsx
index 93db223bfe2..283633b274f 100644
--- a/src/components/environment/Environment.tsx
+++ b/src/components/environment/Environment.tsx
@@ -8,7 +8,7 @@ export function EnvironmentChip() {
   const shorthand = env().VITE_KITTYCAD_BASE_DOMAIN
   const pool = env().POOL
   return (
-    <div className="flex items-center px-2 py-1 text-xs text-chalkboard-80 dark:text-chalkboard-30 rounded-none border-none hover:bg-chalkboard-30 dark:hover:bg-chalkboard-80 focus:bg-chalkboard-30 dark:focus:bg-chalkboard-80 hover:text-chalkboard-100 dark:hover:text-chalkboard-10 focus:text-chalkboard-100 dark:focus:text-chalkboard-10  focus:outline-none focus-visible:ring-2 focus:ring-primary focus:ring-opacity-50">
+    <div className="flex items-center px-2 py-1 text-xs text-chalkboard-80 dark:text-chalkboard-30 rounded-none border-none hover:bg-chalkboard-30 dark:hover:bg-chalkboard-80 focus:bg-chalkboard-30 dark:focus:bg-chalkboard-80 hover:text-chalkboard-100 dark:hover:text-chalkboard-10 focus:text-chalkboard-100 dark:focus:text-chalkboard-10  focus:outline-hidden focus-visible:ring-2 focus:ring-primary focus:ring-opacity-50">
       <span className="">
         {shorthand} {pool ? `+ Pool` : ''}
       </span>
@@ -19,7 +19,7 @@ export function EnvironmentChip() {
 export function EnvironmentDescription() {
   const fullEnvironmentName = env().VITE_KITTYCAD_BASE_DOMAIN
   return (
-    <div className="absolute left-2 bottom-full mb-1 flex-col gap-1 align-stretch bg-chalkboard-10 dark:bg-chalkboard-90 rounded shadow-lg border border-solid border-chalkboard-20/50 dark:border-chalkboard-80/50 text-sm">
+    <div className="absolute left-2 bottom-full mb-1 flex-col gap-1 align-stretch bg-chalkboard-10 dark:bg-chalkboard-90 rounded-sm shadow-lg border border-solid border-chalkboard-20/50 dark:border-chalkboard-80/50 text-sm">
       <div
         className={`flex flex-col p-2 mb-2 rounded-t-sm bg-chalkboard-20 text-chalkboard-100 dark:bg-chalkboard-80 dark:text-chalkboard-10`}
       >
@@ -27,7 +27,7 @@ export function EnvironmentDescription() {
           <h2 className="text-sm font-sans font-normal">Environment</h2>
           <p
             data-testid="environment"
-            className="text-xs rounded-sm flex flex-row items-center"
+            className="text-xs rounded-xs flex flex-row items-center"
           >
             <ActionButton
               Element="button"
@@ -46,7 +46,7 @@ export function EnvironmentDescription() {
                   })
                 }
               }}
-              iconEnd={{ icon: 'sketch', bgClassName: '!bg-transparent' }}
+              iconEnd={{ icon: 'sketch', bgClassName: 'bg-transparent!' }}
               className="ml-1 py-0.5 pr-0.5"
             >
               {fullEnvironmentName}
diff --git a/src/hooks/useDocumentHasFocus.ts b/src/hooks/useDocumentHasFocus.ts
index f97045bad63..4ee7072f930 100644
--- a/src/hooks/useDocumentHasFocus.ts
+++ b/src/hooks/useDocumentHasFocus.ts
@@ -21,7 +21,7 @@ export const useDocumentHasFocus = () => {
     return () => {
       if (globalThis.window && typeof globalThis.window !== 'undefined') {
         globalThis.window.removeEventListener('focus', onFocus)
-        globalThis.window.removeEventListener('blur', onBlur)
+        globalThis.window.removeEventListener('blur-sm', onBlur)
       }
     }
   }, [])
diff --git a/src/index.css b/src/index.css
index 38e9f69eb91..4eb0b6d1f36 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,392 +1,297 @@
-@import "./colors.css";
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-button,
-input,
-select,
-textarea,
-a {
-  /* Make all interactive elements not act as handles
-   * to drag the electron app window by default,
-   * per the electron docs: https://www.electronjs.org/docs/latest/tutorial/window-customization#set-custom-draggable-region
-  */
-  -webkit-app-region: no-drag;
-}
+@import "./colors.css" layer(base);
+@import "./codemirror.css";
+@import "tailwindcss";
 
-body {
-  margin: 0;
-  @apply font-sans;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  @apply text-chalkboard-110;
-  overflow: hidden;
-  scrollbar-width: thin;
-  scrollbar-color: var(--color-chalkboard-20) var(--color-chalkboard-40);
-}
+@config '../tailwind.config.js';
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  @apply font-sans;
-}
-
-.body-bg {
-  @apply bg-chalkboard-10;
-}
-
-.body-bg.dark,
-.dark .body-bg {
-  @apply bg-chalkboard-100;
-}
+@custom-variant pressed (&:where([aria-pressed='true']));
 
-body.dark {
-  scrollbar-color: var(--color-chalkboard-70) var(--color-chalkboard-90);
-  @apply text-chalkboard-10;
-}
-
-select {
-  @apply bg-chalkboard-20;
-}
-
-.dark select {
-  @apply bg-chalkboard-90;
-}
+/*
+  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.
 
-/* We hide the cursor if the user has turned off the textEditor.blinkingCursor setting
- * any elements that could present a blinking cursor to the user
+  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.
 */
-input,
-textarea,
-*[contenteditable] {
-  caret-color: var(--cursor-color, auto);
-}
-
-::-webkit-scrollbar {
-  @apply w-2 h-2 rounded-sm;
-  @apply bg-chalkboard-20;
-}
-
-::-webkit-scrollbar-thumb {
-  @apply bg-chalkboard-40 rounded-sm;
-}
-
-.dark ::-webkit-scrollbar {
-  @apply bg-chalkboard-90;
-}
-
-.dark ::-webkit-scrollbar-thumb {
-  @apply bg-chalkboard-70;
-}
-
-button {
-  @apply border border-chalkboard-30 m-0.5 px-3 rounded text-xs;
-  @apply focus-visible:outline-none;
-}
-
-button:hover {
-  @apply border-chalkboard-40 bg-primary/5;
-}
-
-.dark button {
-  @apply border-chalkboard-70;
-}
-
-.dark button:hover {
-  @apply border-chalkboard-60;
-}
-
-button:disabled {
-  @apply cursor-not-allowed bg-chalkboard-20/50 text-chalkboard-60 border-chalkboard-20;
-}
-
-.dark button:disabled {
-  @apply bg-chalkboard-90 text-chalkboard-40 border-chalkboard-70;
-}
-
-a {
-  @apply text-primary hover:hue-rotate-15;
-}
-
-.dark a {
-  @apply hover:brightness-110 hover:hue-rotate-0;
-}
-
-a.action-button,
-.dark a.action-button {
-  @apply text-inherit no-underline hover:hue-rotate-0;
-}
-
-input {
-  @apply selection:bg-primary/50;
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
 }
 
-.dark input {
-  @apply selection:bg-primary/40;
-}
+.hotkey {
+  @apply font-mono text-xs inline-block px-0.5 py-[2px] rounded-sm;
 
-.mono {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
-}
+  /* This is the only place in our code where layout is impacted by theme.
+     * We may not want that later, if hotkeys are possibly visible
+     * while switching theme, but more padding feels better in dark mode.
+     */
+  @apply dark:px-1;
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
+  @apply text-chalkboard-70 dark:text-chalkboard-40;
+  @apply bg-chalkboard-20 dark:bg-chalkboard-90;
+  @apply border border-t-0 border-b-2 border-chalkboard-30 dark:border-chalkboard-80;
 }
 
-/*
- * The first descendent of the CodeMirror wrapper is the theme,
- * but its identifying class can change depending on the theme.
-*/
-#code-mirror-override > div,
-#code-mirror-override .cm-editor {
-  @apply bg-transparent h-full;
-  @apply select-auto;
+@utility home-layout {
+  @apply grid lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-x-16;
+  grid-template-rows: auto 1fr;
 }
 
-#code-mirror-override .cm-scroller {
-  overflow: auto;
-}
+@utility parsed-markdown {
+  /*
+    This is where your own custom Tailwind utility classes can go,
+    which lets you use them with @apply in your CSS, and get
+    autocomplete in classNames in your JSX.
+  */
+  & ul {
+    @apply list-outside pl-4 lg:pl-8 my-2;
+  }
+  & ol {
+    @apply list-outside pl-4 lg:pl-8 my-2;
+  }
 
-#code-mirror-override .cm-gutter {
-  @apply select-none;
-}
+  & ul li {
+    @apply list-disc;
+  }
 
-#code-mirror-override .cm-activeLine,
-#code-mirror-override .cm-activeLineGutter {
-  @apply bg-primary/5;
-}
+  & li p {
+    @apply inline;
+  }
 
-.dark #code-mirror-override .cm-activeLine,
-.dark #code-mirror-override .cm-activeLineGutter {
-  @apply bg-chalkboard-70/20;
-  mix-blend-mode: lighten;
+  & code {
+    @apply px-1 py-0.5 rounded-xs;
+    @apply bg-chalkboard-20 text-chalkboard-80;
+    @apply dark:bg-chalkboard-80 dark:text-chalkboard-30;
+  }
 }
 
-#code-mirror-override .cm-focused .cm-activeLine,
-#code-mirror-override .cm-focused .cm-activeLineGutter {
-  @apply bg-primary/10;
-}
+@utility reset {
+  &button {
+    @apply bg-transparent border-transparent m-0 p-0 rounded-none text-base;
+  }
 
-.dark #code-mirror-override .cm-focused .cm-activeLine,
-.dark #code-mirror-override .cm-focused .cm-activeLineGutter {
-  @apply bg-chalkboard-70/40;
+  &button:hover {
+    @apply bg-transparent border-transparent;
+  }
 }
 
-#code-mirror-override .cm-matchingBracket {
-  @apply bg-primary/20;
+@utility outline-appForeground {
+  /* Add an outline that matches the app foreground (or text) color */
+  @apply outline-chalkboard-100 dark:outline-chalkboard-10;
 }
 
-.dark #code-mirror-override .cm-matchingBracket {
-  @apply bg-chalkboard-70/60;
+@utility onboarding-highlight {
+  /* highlight an object with a moving dashed outline */
+  @apply outline-solid outline-2;
+  animation: onboarding-highlight 0.7s ease-in-out infinite alternate-reverse;
 }
 
-#code-mirror-override .cm-gutters {
-  @apply bg-chalkboard-10/30;
-}
+@utility body-bg {
+  @apply bg-chalkboard-10;
 
-.dark #code-mirror-override .cm-gutters {
-  @apply bg-chalkboard-110/50;
-}
+  &.dark {
+    @apply bg-chalkboard-100;
+  }
 
-#code-mirror-override .cm-content {
-  @apply caret-primary;
-}
+  .dark & {
+    @apply bg-chalkboard-100;
+  }
 
-.dark #code-mirror-override .cm-content {
-  @apply caret-chalkboard-10;
+  /* Can't use #code-mirror-override here as we're outside of this div */
+  & .cm-diagnosticAction {
+    @apply bg-primary;
+  }
 }
 
-#code-mirror-override .cm-focused {
-  outline: none;
-}
+@utility dark {
+  &.body-bg {
+    @apply bg-chalkboard-100;
+  }
 
-.cm-rename-popup {
-  /* we want to overpower anything else */
-  z-index: 99999999999 !important;
+  & .body-bg {
+    @apply bg-chalkboard-100;
+  }
 }
 
-.cm-rename-popup input {
-  /* use black text on white background in both light and dark mode */
-  color: black !important;
-  background: white !important;
+@utility cm-diagnosticAction {
+  /* Can't use #code-mirror-override here as we're outside of this div */
+  .body-bg & {
+    @apply bg-primary;
+  }
 }
 
-@keyframes blink {
-  0%,
-  100% {
-    opacity: 0;
+@layer utilities {
+  button,
+  input,
+  select,
+  textarea,
+  a {
+    /* Make all interactive elements not act as handles
+   * to drag the electron app window by default,
+   * per the electron docs: https://www.electronjs.org/docs/latest/tutorial/window-customization#set-custom-draggable-region
+  */
+    -webkit-app-region: no-drag;
   }
 
-  10% {
-    opacity: 1;
+  body {
+    margin: 0;
+    @apply font-sans;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    @apply text-chalkboard-110;
+    overflow: hidden;
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-chalkboard-20) var(--color-chalkboard-40);
   }
-}
 
-.react-json-view {
-  @apply bg-transparent !important;
-}
-
-#code-mirror-override .cm-tooltip,
-.cm-tooltip {
-  @apply text-xs shadow-md;
-  @apply bg-chalkboard-10 text-chalkboard-80;
-  @apply rounded-sm border-solid border border-chalkboard-40/30 border-l-liquid-10;
-}
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply font-sans;
+  }
 
-.dark #code-mirror-override .cm-tooltip,
-.dark .cm-tooltip {
-  @apply bg-chalkboard-110 text-chalkboard-40;
-  @apply border-chalkboard-70/20 border-l-liquid-70;
-}
+  body.dark {
+    scrollbar-color: var(--color-chalkboard-70) var(--color-chalkboard-90);
+    @apply text-chalkboard-10;
+  }
 
-#code-mirror-override .cm-tooltip-hover,
-#code-mirror-override .cm-signature-tooltip,
-.cm-signature-tooltip {
-  @apply py-1 px-2 w-max max-w-md;
-}
+  select {
+    @apply bg-chalkboard-20;
+  }
 
-#code-mirror-override .cm-completionInfo {
-  @apply px-4 rounded-l-none;
-  @apply bg-chalkboard-10 text-liquid-90;
-  @apply border-liquid-40/30;
-}
+  .dark select {
+    @apply bg-chalkboard-90;
+  }
 
-.dark #code-mirror-override .cm-completionInfo {
-  @apply bg-liquid-120 text-liquid-50;
-  @apply border-liquid-90/60;
-}
+  /* We hide the cursor if the user has turned off the textEditor.blinkingCursor setting
+ * any elements that could present a blinking cursor to the user
+*/
+  input,
+  textarea,
+  *[contenteditable] {
+    caret-color: var(--cursor-color, auto);
+  }
 
-#code-mirror-override .cm-tooltip-autocomplete li {
-  @apply px-2 py-1;
-}
+  ::-webkit-scrollbar {
+    @apply w-2 h-2 rounded-xs;
+    @apply bg-chalkboard-20;
+  }
 
-#code-mirror-override .cm-tooltip-autocomplete li[aria-selected="true"] {
-  @apply bg-liquid-10 text-liquid-110;
-}
+  ::-webkit-scrollbar-thumb {
+    @apply bg-chalkboard-40 rounded-xs;
+  }
 
-.dark #code-mirror-override .cm-tooltip-autocomplete li[aria-selected="true"] {
-  @apply bg-liquid-100 text-liquid-20;
-}
+  .dark ::-webkit-scrollbar {
+    @apply bg-chalkboard-90;
+  }
 
-#code-mirror-override .cm-content {
-  white-space: pre-wrap;
-  word-break: normal;
-  word-wrap: break-word;
-}
+  .dark ::-webkit-scrollbar-thumb {
+    @apply bg-chalkboard-70;
+  }
 
-.cm-ghostText,
-.cm-ghostText * {
-  color: rgb(120, 120, 120, 0.8) !important;
-}
+  button {
+    @apply border border-chalkboard-30 m-0.5 px-3 rounded-sm text-xs;
+    @apply focus-visible:outline-hidden;
+  }
 
-.extra-segment-handle {
-  position: absolute;
-  pointer-events: auto;
-  width: 12px;
-  height: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 12px;
-  opacity: 0;
-  color: red;
-  background: #ffff00 url("/clientSideSceneAssets/extra-segment-texture.svg")
-    center / 10px 10px no-repeat;
-  border-radius: 100%;
-  background-size: 10px 10px;
-}
+  button:hover {
+    @apply border-chalkboard-40 bg-primary/5;
+  }
 
-.extra-segment-handle.hoveringLine {
-  opacity: 0.7;
-}
+  .dark button {
+    @apply border-chalkboard-70;
+  }
 
-.extra-segment-handle.selected:not(.hoveringLine) {
-  opacity: 0.7;
-  background-color: #0000ff;
-  background-image: url("/clientSideSceneAssets/extra-segment-texture-selected.svg");
-}
+  .dark button:hover {
+    @apply border-chalkboard-60;
+  }
 
-.extra-segment-handle:hover {
-  opacity: 1;
-}
+  button:disabled {
+    @apply cursor-not-allowed bg-chalkboard-20/50 text-chalkboard-60 border-chalkboard-20;
+  }
 
-.segment-length-label-text {
-  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--degree, 0));
-  @apply font-mono body-bg px-2 pt-0.5 rounded-sm border border-chalkboard-110 dark:border-chalkboard-10;
-}
+  .dark button:disabled {
+    @apply bg-chalkboard-90 text-chalkboard-40 border-chalkboard-70;
+  }
 
-@layer components {
-  kbd.hotkey {
-    @apply font-mono text-xs inline-block px-0.5 py-[2px] rounded;
+  a {
+    @apply text-primary hover:hue-rotate-15;
+  }
 
-    /* This is the only place in our code where layout is impacted by theme.
-     * We may not want that later, if hotkeys are possibly visible
-     * while switching theme, but more padding feels better in dark mode.
-     */
-    @apply dark:px-1;
+  .dark a {
+    @apply hover:brightness-110 hover:hue-rotate-0;
+  }
 
-    @apply text-chalkboard-70 dark:text-chalkboard-40;
-    @apply bg-chalkboard-20 dark:bg-chalkboard-90;
-    @apply border border-t-0 border-b-2 border-chalkboard-30 dark:border-chalkboard-80;
+  a.action-button,
+  .dark a.action-button {
+    @apply text-inherit no-underline hover:hue-rotate-0;
   }
 
-  .home-layout {
-    @apply grid lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-x-16;
-    grid-template-rows: auto 1fr;
+  input {
+    @apply selection:bg-primary/50;
   }
-}
 
-@layer utilities {
-  /*
-    This is where your own custom Tailwind utility classes can go,
-    which lets you use them with @apply in your CSS, and get
-    autocomplete in classNames in your JSX.
-  */
-  .parsed-markdown ul,
-  .parsed-markdown ol {
-    @apply list-outside pl-4 lg:pl-8 my-2;
+  .dark input {
+    @apply selection:bg-primary/40;
   }
 
-  .parsed-markdown ul li {
-    @apply list-disc;
+  .mono {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+      monospace;
   }
 
-  .parsed-markdown li p {
-    @apply inline;
+  code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+      monospace;
   }
 
-  .parsed-markdown code {
-    @apply px-1 py-0.5 rounded-sm;
-    @apply bg-chalkboard-20 text-chalkboard-80;
-    @apply dark:bg-chalkboard-80 dark:text-chalkboard-30;
+  .extra-segment-handle {
+    position: absolute;
+    pointer-events: auto;
+    width: 12px;
+    height: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    opacity: 0;
+    color: red;
+    background: #ffff00 url("/clientSideSceneAssets/extra-segment-texture.svg")
+      center / 10px 10px no-repeat;
+    border-radius: 100%;
+    background-size: 10px 10px;
   }
 
-  button.reset {
-    @apply bg-transparent border-transparent m-0 p-0 rounded-none text-base;
+  .extra-segment-handle.hoveringLine {
+    opacity: 0.7;
   }
 
-  button.reset:hover {
-    @apply bg-transparent border-transparent;
+  .extra-segment-handle.selected:not(.hoveringLine) {
+    opacity: 0.7;
+    background-color: #0000ff;
+    background-image: url("/clientSideSceneAssets/extra-segment-texture-selected.svg");
   }
 
-  /* Add an outline that matches the app foreground (or text) color */
-  .outline-appForeground {
-    @apply outline-chalkboard-100 dark:outline-chalkboard-10;
+  .extra-segment-handle:hover {
+    opacity: 1;
   }
 
-  /* highlight an object with a moving dashed outline */
-  .onboarding-highlight {
-    @apply outline outline-2;
-    animation: onboarding-highlight 0.7s ease-in-out infinite alternate-reverse;
+  .segment-length-label-text {
+    transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--degree, 0));
+    @apply font-mono body-bg px-2 pt-0.5 rounded-xs border border-chalkboard-110 dark:border-chalkboard-10;
   }
+}
 
+@layer utilities {
   @keyframes onboarding-highlight {
     0% {
       outline-offset: 0px;
@@ -397,13 +302,3 @@ code {
     }
   }
 }
-
-#code-mirror-override .cm-scroller,
-#code-mirror-override .cm-editor {
-  height: 100% !important;
-}
-
-/* Can't use #code-mirror-override here as we're outside of this div */
-.body-bg .cm-diagnosticAction {
-  @apply bg-primary;
-}
diff --git a/src/index.tsx b/src/index.tsx
index 7c51042bf2b..daf20eada77 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -50,7 +50,7 @@ root.render(
             maxInlineSize: 'min(480px, 100%)',
           },
           className:
-            'bg-chalkboard-10 dark:bg-chalkboard-90 text-chalkboard-110 dark:text-chalkboard-10 rounded-sm border-chalkboard-20/50 dark:border-chalkboard-80/50',
+            'bg-chalkboard-10 dark:bg-chalkboard-90 text-chalkboard-110 dark:text-chalkboard-10 rounded-xs border-chalkboard-20/50 dark:border-chalkboard-80/50',
           success: {
             iconTheme: {
               primary: 'oklch(89% 0.16 143.4deg)',
diff --git a/src/lib/settings/initialSettings.tsx b/src/lib/settings/initialSettings.tsx
index 48983811b0f..50481a06c60 100644
--- a/src/lib/settings/initialSettings.tsx
+++ b/src/lib/settings/initialSettings.tsx
@@ -313,9 +313,9 @@ export function createSettings() {
         Component: ({ value, updateValue }) => {
           const inputRef = useRef<HTMLInputElement>(null)
           return (
-            <div className="flex gap-4 p-1 border rounded-sm border-chalkboard-30">
+            <div className="flex gap-4 p-1 border rounded-xs border-chalkboard-30">
               <input
-                className="flex-grow text-xs px-2 bg-transparent"
+                className="grow text-xs px-2 bg-transparent"
                 value={value}
                 disabled
                 data-testid="project-directory-input"
@@ -667,9 +667,9 @@ export function createSettings() {
         validate: (v) => REGEXP_UUIDV4.test(v),
         Component: ({ value }) => {
           return (
-            <div className="flex gap-4 p-1 border rounded-sm border-chalkboard-30">
+            <div className="flex gap-4 p-1 border rounded-xs border-chalkboard-30">
               <input
-                className="flex-grow text-xs px-2 bg-chalkboard-30 dark:bg-chalkboard-80 cursor-not-allowed"
+                className="grow text-xs px-2 bg-chalkboard-30 dark:bg-chalkboard-80 cursor-not-allowed"
                 value={value}
                 disabled
                 data-testid="project-id"
diff --git a/src/routes/AdvancedSignInOptions.tsx b/src/routes/AdvancedSignInOptions.tsx
index d3c65bc655c..b3660fd4e35 100644
--- a/src/routes/AdvancedSignInOptions.tsx
+++ b/src/routes/AdvancedSignInOptions.tsx
@@ -27,7 +27,7 @@ export const AdvancedSignInOptions = ({
       </span>
       <Popover className="relative ml-8">
         <Popover.Button
-          className="gap-1 rounded h-9 mr-auto max-h-min min-w-max border py-1 px-2 flex items-center dark:hover:bg-chalkboard-90"
+          className="gap-1 rounded-sm h-9 mr-auto max-h-min min-w-max border py-1 px-2 flex items-center dark:hover:bg-chalkboard-90"
           data-testid="project-sidebar-toggle"
         >
           <div className="flex flex-col items-start py-0.5">
@@ -67,7 +67,7 @@ export const AdvancedSignInOptions = ({
                   onChange={setSelectedEnvironment}
                 >
                   <Combobox.Input
-                    className="gap-1 rounded h-9 mr-auto max-h-min min-w-max border py-1 flex items-center dark:hover:bg-chalkboard-90 text-xs text-chalkboard-70 dark:text-chalkboard-30"
+                    className="gap-1 rounded-sm h-9 mr-auto max-h-min min-w-max border py-1 flex items-center dark:hover:bg-chalkboard-90 text-xs text-chalkboard-70 dark:text-chalkboard-30"
                     placeholder="auto"
                     onChange={(event) =>
                       setSelectedEnvironment(event.target.value)
diff --git a/src/routes/Home.tsx b/src/routes/Home.tsx
index 1f416f83cf6..7fd2fdf4a2f 100644
--- a/src/routes/Home.tsx
+++ b/src/routes/Home.tsx
@@ -247,11 +247,11 @@ const Home = () => {
                       kclManager,
                     }).catch(reportRejection)
                   }}
-                  className={`${sidebarButtonClasses} !text-primary flex-1`}
+                  className={`${sidebarButtonClasses} text-primary! flex-1`}
                   iconStart={{
                     icon: 'play',
-                    bgClassName: '!bg-primary rounded-sm',
-                    iconClassName: '!text-white',
+                    bgClassName: 'bg-primary! rounded-xs',
+                    iconClassName: 'text-white!',
                   }}
                   data-testid="home-tutorial-button"
                 >
@@ -263,7 +263,7 @@ const Home = () => {
                   className={`${sidebarButtonClasses} hidden group-hover:flex flex-none ml-auto`}
                   iconStart={{
                     icon: 'close',
-                    bgClassName: '!bg-transparent rounded-sm',
+                    bgClassName: 'bg-transparent! rounded-xs',
                   }}
                   data-testid="onboarding-dismiss"
                 >
@@ -286,7 +286,7 @@ const Home = () => {
                 className={sidebarButtonClasses}
                 iconStart={{
                   icon: 'plus',
-                  bgClassName: '!bg-transparent rounded-sm',
+                  bgClassName: 'bg-transparent! rounded-xs',
                 }}
                 data-testid="home-new-file"
               >
@@ -313,7 +313,7 @@ const Home = () => {
                 className={sidebarButtonClasses}
                 iconStart={{
                   icon: 'sparkles',
-                  bgClassName: '!bg-transparent rounded-sm',
+                  bgClassName: 'bg-transparent! rounded-xs',
                 }}
                 data-testid="home-text-to-cad"
               >
@@ -347,7 +347,7 @@ const Home = () => {
                 className={sidebarButtonClasses}
                 iconStart={{
                   icon: 'importFile',
-                  bgClassName: '!bg-transparent rounded-sm',
+                  bgClassName: 'bg-transparent! rounded-xs',
                 }}
                 data-testid="home-create-from-sample"
               >
@@ -373,7 +373,7 @@ const Home = () => {
                 className={sidebarButtonClasses}
                 iconStart={{
                   icon: 'person',
-                  bgClassName: '!bg-transparent rounded-sm',
+                  bgClassName: 'bg-transparent! rounded-xs',
                 }}
                 data-testid="home-account"
               >
@@ -388,7 +388,7 @@ const Home = () => {
                 className={sidebarButtonClasses}
                 iconStart={{
                   icon: 'glasses',
-                  bgClassName: '!bg-transparent rounded-sm',
+                  bgClassName: 'bg-transparent! rounded-xs',
                 }}
                 data-testid="home-blog"
               >
@@ -457,7 +457,7 @@ function HomeHeader({
                 icon: getSortIcon(sort, 'name'),
                 bgClassName: 'bg-transparent',
                 iconClassName: !sort.includes('name')
-                  ? '!text-chalkboard-90 dark:!text-chalkboard-30'
+                  ? 'text-chalkboard-90! dark:text-chalkboard-30!'
                   : '',
               }}
             >
@@ -478,7 +478,7 @@ function HomeHeader({
                 icon: sort ? getSortIcon(sort, 'modified') : 'arrowDown',
                 bgClassName: 'bg-transparent',
                 iconClassName: !isSortByModified
-                  ? '!text-chalkboard-90 dark:!text-chalkboard-30'
+                  ? 'text-chalkboard-90! dark:text-chalkboard-30!'
                   : '',
               }}
             >
@@ -501,7 +501,7 @@ function HomeHeader({
       {!readWriteProjectDir.value && (
         <section>
           <div className="flex items-center select-none">
-            <div className="flex gap-8 items-center justify-between grow bg-destroy-80 text-white py-1 px-4 my-2 rounded-sm">
+            <div className="flex gap-8 items-center justify-between grow bg-destroy-80 text-white py-1 px-4 my-2 rounded-xs">
               <p className="">{errorMessage(readWriteProjectDir.error)}</p>
               <Link
                 data-testid="project-directory-settings-link"
@@ -552,7 +552,7 @@ function ProjectGrid({
               ))}
             </ul>
           ) : (
-            <p className="p-4 my-8 border border-dashed rounded border-chalkboard-30 dark:border-chalkboard-70">
+            <p className="p-4 my-8 border border-dashed rounded-sm border-chalkboard-30 dark:border-chalkboard-70">
               No projects found
               {projects.length === 0
                 ? ', ready to make your first one?'
diff --git a/src/routes/Onboarding/BrowserOnboardingRoutes.tsx b/src/routes/Onboarding/BrowserOnboardingRoutes.tsx
index 7468f06d79f..748db20ac38 100644
--- a/src/routes/Onboarding/BrowserOnboardingRoutes.tsx
+++ b/src/routes/Onboarding/BrowserOnboardingRoutes.tsx
@@ -150,7 +150,7 @@ function Toolbar() {
   useOnboardingPanes()
 
   return (
-    <div className="cursor-not-allowed fixed inset-0 z-[99] grid items-start justify-center p-24">
+    <div className="cursor-not-allowed fixed inset-0 z-99 grid items-start justify-center p-24">
       <OnboardingCard>
         <h1 className="text-xl font-bold">This is the toolbar</h1>
         <p className="my-4">
@@ -230,7 +230,7 @@ function TextToCadPrompt() {
   useAdvanceOnboardingOnFormSubmit(thisOnboardingStatus)
 
   return (
-    <div className="cursor-not-allowed fixed inset-0 z-[99] grid items-center justify-center">
+    <div className="cursor-not-allowed fixed inset-0 z-99 grid items-center justify-center">
       <OnboardingCard>
         <h1 className="text-xl font-bold">Text-to-CAD prompt</h1>
         <p className="my-4">
@@ -276,7 +276,7 @@ function FeatureTreePane() {
   }, [])
 
   return (
-    <div className="fixed inset-0 z-[99] p-8 grid justify-center items-end">
+    <div className="fixed inset-0 z-99 p-8 grid justify-center items-end">
       <OnboardingCard className="col-start-3 col-span-2">
         <h1 className="text-xl font-bold">CPU Fan Housing</h1>
         <p className="my-4">
@@ -382,11 +382,11 @@ function PromptToEditPrompt() {
   useAdvanceOnboardingOnFormSubmit(thisOnboardingStatus)
 
   return (
-    <div className="cursor-not-allowed fixed inset-0 z-[99] grid items-center justify-center">
+    <div className="cursor-not-allowed fixed inset-0 z-99 grid items-center justify-center">
       <OnboardingCard className="pointer-events-auto">
         <h1 className="text-xl font-bold">Modify with Text-to-CAD prompt</h1>
         {!isReady && (
-          <p className="absolute top-0 right-0 m-4 w-fit flex items-center py-1 px-2 rounded bg-chalkboard-20 dark:bg-chalkboard-80">
+          <p className="absolute top-0 right-0 m-4 w-fit flex items-center py-1 px-2 rounded-sm bg-chalkboard-20 dark:bg-chalkboard-80">
             <Spinner className="w-5 h-5 inline-block mr-2" />
             Waiting for connection...
           </p>
@@ -430,7 +430,7 @@ function PromptToEditResult() {
   }, [])
 
   return (
-    <div className="cursor-not-allowed fixed inset-0 z-[99] p-8 grid justify-center items-end">
+    <div className="cursor-not-allowed fixed inset-0 z-99 p-8 grid justify-center items-end">
       <OnboardingCard className="col-start-3 col-span-2">
         <h1 className="text-xl font-bold">Result</h1>
         <p className="my-4">
diff --git a/src/routes/Onboarding/DesktopOnboardingRoutes.tsx b/src/routes/Onboarding/DesktopOnboardingRoutes.tsx
index 42ca4b15187..eb297346d07 100644
--- a/src/routes/Onboarding/DesktopOnboardingRoutes.tsx
+++ b/src/routes/Onboarding/DesktopOnboardingRoutes.tsx
@@ -145,7 +145,7 @@ function Toolbar() {
   useOnboardingPanes()
 
   return (
-    <div className="cursor-not-allowed fixed inset-0 z-[99] grid items-start justify-center p-24">
+    <div className="cursor-not-allowed fixed inset-0 z-99 grid items-start justify-center p-24">
       <OnboardingCard>
         <h1 className="text-xl font-bold">This is the toolbar</h1>
         <p className="my-4">
@@ -225,7 +225,7 @@ function TextToCadPrompt() {
   useAdvanceOnboardingOnFormSubmit(thisOnboardingStatus, 'desktop')
 
   return (
-    <div className="cursor-not-allowed fixed inset-0 z-[99] grid items-center justify-center">
+    <div className="cursor-not-allowed fixed inset-0 z-99 grid items-center justify-center">
       <OnboardingCard className="pointer-events-auto">
         <h1 className="text-xl font-bold">Text-to-CAD prompt</h1>
         <p className="my-4">
@@ -271,7 +271,7 @@ function FeatureTreePane() {
   }, [])
 
   return (
-    <div className="cursor-not-allowed fixed inset-0 z-[99] p-8 grid justify-center items-end">
+    <div className="cursor-not-allowed fixed inset-0 z-99 p-8 grid justify-center items-end">
       <OnboardingCard className="col-start-3 col-span-2">
         <h1 className="text-xl font-bold">CPU Fan Housing</h1>
         <p className="my-4">
@@ -473,11 +473,11 @@ function PromptToEditPrompt() {
   useAdvanceOnboardingOnFormSubmit(thisOnboardingStatus, 'desktop')
 
   return (
-    <div className="cursor-not-allowed fixed inset-0 z-[99] grid items-center justify-center">
+    <div className="cursor-not-allowed fixed inset-0 z-99 grid items-center justify-center">
       <OnboardingCard className="pointer-events-auto">
         <h1 className="text-xl font-bold">Modify with Text-to-CAD prompt</h1>
         {!isReady && (
-          <p className="absolute top-0 right-0 m-4 w-fit flex items-center py-1 px-2 rounded bg-chalkboard-20 dark:bg-chalkboard-80">
+          <p className="absolute top-0 right-0 m-4 w-fit flex items-center py-1 px-2 rounded-sm bg-chalkboard-20 dark:bg-chalkboard-80">
             <Spinner className="w-5 h-5 inline-block mr-2" />
             Waiting for connection...
           </p>
@@ -536,7 +536,7 @@ function PromptToEditResult() {
   }, [])
 
   return (
-    <div className="cursor-not-allowed fixed inset-0 z-[99] p-8 grid justify-center items-end">
+    <div className="cursor-not-allowed fixed inset-0 z-99 p-8 grid justify-center items-end">
       <OnboardingCard className="col-start-3 col-span-2">
         <h1 className="text-xl font-bold">Result</h1>
         <p className="my-4">
diff --git a/src/routes/Onboarding/utils.tsx b/src/routes/Onboarding/utils.tsx
index 3d02e0cee25..abcdde72ae9 100644
--- a/src/routes/Onboarding/utils.tsx
+++ b/src/routes/Onboarding/utils.tsx
@@ -39,7 +39,7 @@ import { useModelingContext } from '@src/hooks/useModelingContext'
 import type { SidebarType } from '@src/components/ModelingSidebar/ModelingPanes'
 
 export const kbdClasses =
-  'py-0.5 px-1 text-sm rounded bg-chalkboard-10 dark:bg-chalkboard-100 border border-chalkboard-50 border-b-2'
+  'py-0.5 px-1 text-sm rounded-sm bg-chalkboard-10 dark:bg-chalkboard-100 border border-chalkboard-50 border-b-2'
 
 // Get the 1-indexed step number of the current onboarding step
 function getStepNumber(
@@ -55,7 +55,7 @@ export const OnboardingCard = ({
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={`relative max-w-3xl min-w-80 cursor-auto bg-chalkboard-10 dark:bg-chalkboard-90 py-6 px-8 rounded border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg ${className || ''}`}
+    className={`relative max-w-3xl min-w-80 cursor-auto bg-chalkboard-10 dark:bg-chalkboard-90 py-6 px-8 rounded-sm border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg ${className || ''}`}
     {...props}
   >
     {children}
@@ -186,10 +186,10 @@ export function OnboardingButtons({
       >
         <CustomIcon
           name="close"
-          className="w-5 h-5 rounded-sm bg-destroy-10 text-destroy-80 dark:bg-destroy-80 dark:text-destroy-10 group-hover:brightness-110"
+          className="w-5 h-5 rounded-xs bg-destroy-10 text-destroy-80 dark:bg-destroy-80 dark:text-destroy-10 group-hover:brightness-110"
         />
         <Tooltip position="bottom">
-          Dismiss <kbd className="hotkey ml-4 dark:!bg-chalkboard-80">esc</kbd>
+          Dismiss <kbd className="hotkey ml-4 dark:bg-chalkboard-80!">esc</kbd>
         </Tooltip>
       </button>
       <div
diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx
index db3d3978190..59d1113e2b4 100644
--- a/src/routes/Settings.tsx
+++ b/src/routes/Settings.tsx
@@ -86,7 +86,7 @@ export const Settings = () => {
                 <SettingsSearchBar />
                 <button
                   onClick={close}
-                  className="p-0 m-0 focus:ring-0 focus:outline-none border-none hover:bg-destroy-10 focus:bg-destroy-10 dark:hover:bg-destroy-80/50 dark:focus:bg-destroy-80/50"
+                  className="p-0 m-0 focus:ring-0 focus:outline-hidden border-none hover:bg-destroy-10 focus:bg-destroy-10 dark:hover:bg-destroy-80/50 dark:focus:bg-destroy-80/50"
                   data-testid="settings-close-button"
                 >
                   <CustomIcon name="close" className="w-5 h-5" />
diff --git a/src/routes/SignIn.tsx b/src/routes/SignIn.tsx
index 3c6cfe55a91..d19b68969cc 100644
--- a/src/routes/SignIn.tsx
+++ b/src/routes/SignIn.tsx
@@ -184,7 +184,7 @@ const SignIn = () => {
                       onClick={toSync(signInDesktop, reportRejection)}
                       className={
                         'm-0 mt-8 w-fit flex gap-4 items-center px-3 py-1 ' +
-                        '!border-transparent !text-lg !text-chalkboard-10 !bg-primary hover:hue-rotate-15'
+                        'border-transparent! text-lg! text-chalkboard-10! bg-primary! hover:hue-rotate-15'
                       }
                       data-testid="sign-in-button"
                     >
@@ -225,7 +225,7 @@ const SignIn = () => {
                       onClick={toSync(cancelSignIn, reportRejection)}
                       className={
                         'm-0 mt-8 w-fit flex gap-4 items-center px-3 py-1 ' +
-                        '!border-transparent !text-lg !text-chalkboard-10 !bg-primary hover:hue-rotate-15'
+                        'border-transparent! text-lg! text-chalkboard-10! bg-primary! hover:hue-rotate-15'
                       }
                       data-testid="cancel-sign-in-button"
                     >
@@ -249,7 +249,7 @@ const SignIn = () => {
                   to={signInUrl}
                   className={
                     'w-fit m-0 mt-8 hidden md:flex gap-4 items-center px-3 py-1 ' +
-                    '!border-transparent !text-lg !text-chalkboard-10 !bg-primary hover:hue-rotate-15'
+                    'border-transparent! text-lg! text-chalkboard-10! bg-primary! hover:hue-rotate-15'
                   }
                   data-testid="sign-in-button"
                 >
@@ -285,7 +285,7 @@ const SignIn = () => {
                 'absolute bottom-0 left-0 right-0 transition translate-y-4 opacity-0 ' +
                 'group-hover:translate-y-0 group-hover:opacity-100 ' +
                 'm-0 mt-8 flex gap-4 items-center px-3 py-1 ' +
-                '!border-transparent !text-lg !text-chalkboard-10 !bg-primary hover:hue-rotate-15'
+                'border-transparent! text-lg! text-chalkboard-10! bg-primary! hover:hue-rotate-15'
               }
               data-testid="view-sample-button"
             >
@@ -304,8 +304,8 @@ const SignIn = () => {
                 <ActionButton
                   Element="externalLink"
                   to="https://github.com/KittyCAD/modeling-app"
-                  iconStart={{ icon: 'code', bgClassName: '!bg-transparent' }}
-                  className="!bg-primary !text-chalkboard-10 !border-transarent"
+                  iconStart={{ icon: 'code', bgClassName: 'bg-transparent!' }}
+                  className="bg-primary! text-chalkboard-10! !border-transarent"
                 >
                   <span className="py-2 lg:py-0">Read our source code</span>
                 </ActionButton>
@@ -314,9 +314,9 @@ const SignIn = () => {
                   to="https://discord.gg/JQEpHR7Nt2"
                   iconStart={{
                     icon: 'keyboard',
-                    bgClassName: '!bg-transparent',
+                    bgClassName: 'bg-transparent!',
                   }}
-                  className="!bg-primary !text-chalkboard-10 !border-transarent"
+                  className="bg-primary! text-chalkboard-10! !border-transarent"
                 >
                   <span className="py-2 lg:py-0">Join our community</span>
                 </ActionButton>
@@ -334,9 +334,9 @@ const SignIn = () => {
                   to={withSiteBaseURL('/docs/kcl-samples/pillow-block-bearing')}
                   iconStart={{
                     icon: 'settings',
-                    bgClassName: '!bg-transparent',
+                    bgClassName: 'bg-transparent!',
                   }}
-                  className="!bg-primary !text-chalkboard-10 !border-transarent"
+                  className="bg-primary! text-chalkboard-10! !border-transarent"
                 >
                   <span className="py-2 lg:py-0">
                     Parametric design with KCL
@@ -347,9 +347,9 @@ const SignIn = () => {
                   to={withSiteBaseURL('/docs/zoo-design-studio/text-to-cad')}
                   iconStart={{
                     icon: 'sparkles',
-                    bgClassName: '!bg-transparent',
+                    bgClassName: 'bg-transparent!',
                   }}
-                  className="!bg-primary !text-chalkboard-10 !border-transarent"
+                  className="bg-primary! text-chalkboard-10! !border-transarent"
                 >
                   <span className="py-2 lg:py-0">ML-unlocked CAD</span>
                 </ActionButton>
@@ -368,8 +368,8 @@ const SignIn = () => {
                 <ActionButton
                   Element="externalLink"
                   to={withSiteBaseURL('/design-api')}
-                  iconStart={{ icon: 'sketch', bgClassName: '!bg-transparent' }}
-                  className="!bg-primary !text-chalkboard-10 !border-transarent"
+                  iconStart={{ icon: 'sketch', bgClassName: 'bg-transparent!' }}
+                  className="bg-primary! text-chalkboard-10! !border-transarent"
                 >
                   <span className="py-2 lg:py-0">KittyCAD Design API</span>
                 </ActionButton>
@@ -378,9 +378,9 @@ const SignIn = () => {
                   to={withSiteBaseURL('/machine-learning-api')}
                   iconStart={{
                     icon: 'elephant',
-                    bgClassName: '!bg-transparent',
+                    bgClassName: 'bg-transparent!',
                   }}
-                  className="!bg-primary !text-chalkboard-10 !border-transarent"
+                  className="bg-primary! text-chalkboard-10! !border-transarent"
                 >
                   <span className="py-2 lg:py-0">
                     ML-ephant Machine Learning API
diff --git a/src/routes/Telemetry.tsx b/src/routes/Telemetry.tsx
index a0e5aed96b3..84fcebec707 100644
--- a/src/routes/Telemetry.tsx
+++ b/src/routes/Telemetry.tsx
@@ -49,7 +49,7 @@ export const Telemetry = () => {
               <div className="flex gap-4 items-start">
                 <button
                   onClick={close}
-                  className="p-0 m-0 focus:ring-0 focus:outline-none border-none hover:bg-destroy-10 focus:bg-destroy-10 dark:hover:bg-destroy-80/50 dark:focus:bg-destroy-80/50"
+                  className="p-0 m-0 focus:ring-0 focus:outline-hidden border-none hover:bg-destroy-10 focus:bg-destroy-10 dark:hover:bg-destroy-80/50 dark:focus:bg-destroy-80/50"
                   data-testid="settings-close-button"
                 >
                   <CustomIcon name="close" className="w-5 h-5" />
diff --git a/tailwind.config.js b/tailwind.config.js
index 8cf9736608f..7fe36058333 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -62,24 +62,5 @@ module.exports = {
     },
   },
   darkMode: 'class',
-  plugins: [
-    require('@headlessui/tailwindcss'),
-    // custom plugin to add variants for aria-pressed
-    // To use, just add a class of 'group-pressed:<some-tailwind-class>' or 'pressed:<some-tailwind-class>'
-    // to your element. Based on https://dev.to/philw_/tying-tailwind-styling-to-aria-attributes-502f
-    plugin(function ({ addVariant, e }) {
-      addVariant('group-pressed', ({ modifySelectors, separator }) => {
-        modifySelectors(({ className }) => {
-          return `.group[aria-pressed='true'] .${e(
-            `group-pressed${separator}${className}`
-          )}`
-        })
-      })
-      addVariant('pressed', ({ modifySelectors, separator }) => {
-        modifySelectors(({ className }) => {
-          return `.${e(`pressed${separator}${className}`)}[aria-pressed='true']`
-        })
-      })
-    }),
-  ],
+  plugins: [require('@headlessui/tailwindcss')],
 }