diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index 3e32c06fb03..dc9433606f5 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -19,7 +19,7 @@
 		"@cap/utils": "workspace:*",
 		"@cap/web-api-contract": "workspace:*",
 		"@corvu/tooltip": "^0.2.1",
-		"@kobalte/core": "^0.13.7",
+		"@kobalte/core": "^0.13.11",
 		"@radix-ui/colors": "^3.0.0",
 		"@rive-app/canvas": "^2.32.2",
 		"@solid-primitives/bounds": "^0.0.122",
@@ -75,13 +75,16 @@
 	},
 	"devDependencies": {
 		"@fontsource/geist-sans": "^5.0.3",
-		"@webgpu/types": "^0.1.44",
 		"@iconify/json": "^2.2.239",
+		"@tailwindcss/postcss": "^4.2.2",
+		"@tailwindcss/typography": "^0.5.9",
 		"@tauri-apps/cli": ">=2.1.0",
 		"@total-typescript/ts-reset": "^0.6.1",
 		"@types/dom-webcodecs": "^0.1.11",
 		"@types/uuid": "^9.0.8",
+		"@webgpu/types": "^0.1.44",
 		"cross-env": "^7.0.3",
+		"tailwind-scrollbar": "^3.1.0",
 		"typescript": "^5.8.3",
 		"vite": "^6.3.5",
 		"vite-plugin-top-level-await": "^1.4.4",
diff --git a/apps/desktop/postcss.config.cjs b/apps/desktop/postcss.config.cjs
index a1d89157e45..eebbe271c7d 100644
--- a/apps/desktop/postcss.config.cjs
+++ b/apps/desktop/postcss.config.cjs
@@ -1 +1,6 @@
-module.exports = require("@cap/ui/postcss");
+module.exports = {
+	plugins: {
+		"@tailwindcss/postcss": {},
+		autoprefixer: {},
+	},
+};
diff --git a/apps/desktop/src/components/CapErrorBoundary.tsx b/apps/desktop/src/components/CapErrorBoundary.tsx
index 5bf7fc132e6..2dca68d1d47 100644
--- a/apps/desktop/src/components/CapErrorBoundary.tsx
+++ b/apps/desktop/src/components/CapErrorBoundary.tsx
@@ -9,9 +9,9 @@ export function CapErrorBoundary(props: ParentProps) {
 			fallback={(e: Error) => {
 				console.error(e);
 				return (
-					<div class="w-full h-full flex flex-col justify-center items-center bg-gray-2 border-gray-3 max-h-screen overflow-hidden transition-[border-radius] duration-200 text-[--text-secondary] gap-y-4 max-sm:gap-y-2 px-8 text-center">
+					<div class="w-full h-full flex flex-col justify-center items-center bg-gray-2 border-gray-3 max-h-screen overflow-hidden transition-[border-radius] duration-200 text-(--text-secondary) gap-y-4 max-sm:gap-y-2 px-8 text-center">
 						<IconCapLogo class="max-sm:size-16" />
-						<h1 class="text-[--text-primary] text-3xl max-sm:text-xl font-bold">
+						<h1 class="text-(--text-primary) text-3xl max-sm:text-xl font-bold">
 							An Error Occured
 						</h1>
 						<p class="mb-2 max-sm:text-sm">
diff --git a/apps/desktop/src/components/Cropper.tsx b/apps/desktop/src/components/Cropper.tsx
index 6509ce71cf6..2a22e1b5f90 100644
--- a/apps/desktop/src/components/Cropper.tsx
+++ b/apps/desktop/src/components/Cropper.tsx
@@ -1018,7 +1018,7 @@ export function Cropper(
 	return (
 		<div
 			ref={containerRef}
-			class="relative w-full h-full select-none overscroll-contain focus:outline-none touch-none"
+			class="relative w-full h-full select-none overscroll-contain focus:outline-hidden touch-none"
 			style={{
 				cursor: cursorStyle() ?? (props.aspectRatio ? "default" : "crosshair"),
 			}}
@@ -1031,11 +1031,11 @@ export function Cropper(
 			<Transition
 				appear
 				enterActiveClass="transition-opacity duration-300 ease-in-out"
-				enterClass="opacity-0 blur-sm"
+				enterClass="opacity-0 blur-xs"
 				enterToClass="opacity-100 blur-none"
 				exitActiveClass="transition-opacity duration-300 ease-in-out"
 				exitClass="opacity-100 blur-none"
-				exitToClass="opacity-0 blur-sm"
+				exitToClass="opacity-0 blur-xs"
 			>
 				<Show when={props.showBounds && labelTransform()}>
 					{(transform) => (
@@ -1110,7 +1110,7 @@ export function Cropper(
 							handle.isCorner ? (
 								<button
 									type="button"
-									class="fixed z-50 flex h-[30px] w-[30px] focus:ring-0 outline-none"
+									class="fixed z-50 flex h-[30px] w-[30px] focus:ring-0 outline-hidden"
 									tabIndex={-1}
 									classList={{ "opacity-0": mouseState.drag === "overlay" }}
 									style={{
@@ -1136,7 +1136,7 @@ export function Cropper(
 								>
 									<svg
 										aria-hidden="true"
-										class="absolute pointer-events-none drop-shadow-sm shadow-black"
+										class="absolute pointer-events-none drop-shadow-xs shadow-black"
 										classList={{
 											"size-1": boundsTooSmall(),
 											"size-6": !boundsTooSmall(),
@@ -1172,7 +1172,7 @@ export function Cropper(
 							) : (
 								<button
 									type="button"
-									class="absolute focus:outline-none focus:ring-0 outline-none"
+									class="absolute focus:outline-hidden focus:ring-0 outline-hidden"
 									tabIndex={-1}
 									style={{
 										visibility:
@@ -1239,9 +1239,9 @@ export function Cropper(
 								aria-live="polite"
 							>
 								<div
-									class="h-[18px] w-11 rounded-full text-center text-xs text-gray-12 border border-white/70 dark:border-white/20 drop-shadow-md outline-1 outline outline-black/80"
+									class="h-[18px] w-11 rounded-full text-center text-xs text-gray-12 border border-white/70 dark:border-white/20 drop-shadow-md outline-1 outline-solid outline-black/80"
 									classList={{
-										"backdrop-blur-sm bg-white/50 dark:bg-black/50 dark:backdrop-brightness-90 backdrop-brightness-200":
+										"backdrop-blur-xs bg-white/50 dark:bg-black/50 dark:backdrop-brightness-90 backdrop-brightness-200":
 											props.useBackdropFilter,
 										"bg-gray-3 opacity-80": !props.useBackdropFilter,
 									}}
diff --git a/apps/desktop/src/components/Loader.tsx b/apps/desktop/src/components/Loader.tsx
index f88661a0e0e..b8da544d803 100644
--- a/apps/desktop/src/components/Loader.tsx
+++ b/apps/desktop/src/components/Loader.tsx
@@ -2,7 +2,7 @@ export function AbsoluteInsetLoader() {
 	return (
 		<div class="w-full h-full flex items-center justify-center">
 			<div class="animate-spin">
-				<IconCapLogo class="size-[4rem]" />
+				<IconCapLogo class="size-16" />
 			</div>
 		</div>
 	);
diff --git a/apps/desktop/src/components/SignInButton.tsx b/apps/desktop/src/components/SignInButton.tsx
index 08fc3f12a9e..2c9f0b834eb 100644
--- a/apps/desktop/src/components/SignInButton.tsx
+++ b/apps/desktop/src/components/SignInButton.tsx
@@ -11,7 +11,7 @@ export function SignInButton(
 	return (
 		<Button
 			size="md"
-			class="flex flex-grow justify-center items-center"
+			class="flex grow justify-center items-center"
 			{...props}
 			variant={signIn.isPending ? "gray" : "primary"}
 			onClick={() => {
diff --git a/apps/desktop/src/components/Toggle.tsx b/apps/desktop/src/components/Toggle.tsx
index c16036fd330..e2966b63e36 100644
--- a/apps/desktop/src/components/Toggle.tsx
+++ b/apps/desktop/src/components/Toggle.tsx
@@ -3,13 +3,13 @@ import { cva } from "cva";
 import { type ComponentProps, splitProps } from "solid-js";
 
 const toggleControlStyles = cva(
-	"rounded-full bg-gray-6 ui-disabled:bg-gray-3 ui-checked:bg-blue-500 transition-colors outline-2 outline-offset-2 outline-blue-300",
+	"rounded-full bg-gray-6 data-disabled:bg-gray-3 data-checked:bg-blue-500 transition-colors",
 	{
 		variants: {
 			size: {
-				sm: "w-9 h-[1.25rem] p-[0.125rem]",
-				md: "w-11 h-[1.5rem] p-[0.125rem]",
-				lg: "w-14 h-[1.75rem] p-[0.1875rem]",
+				sm: "w-9 h-5 p-0.5",
+				md: "w-11 h-6 p-0.5",
+				lg: "w-14 h-7 p-0.75",
 			},
 		},
 		defaultVariants: {
@@ -19,13 +19,13 @@ const toggleControlStyles = cva(
 );
 
 const toggleThumbStyles = cva(
-	"bg-white rounded-full transition-transform ui-checked:translate-x-[calc(100%)]",
+	"bg-white rounded-full transition-transform data-checked:translate-x-[calc(100%)]",
 	{
 		variants: {
 			size: {
-				sm: "size-[1rem]",
-				md: "size-[1.25rem]",
-				lg: "size-[1.5rem]",
+				sm: "size-4",
+				md: "size-5",
+				lg: "size-6",
 			},
 		},
 		defaultVariants: {
diff --git a/apps/desktop/src/components/titlebar/Titlebar.tsx b/apps/desktop/src/components/titlebar/Titlebar.tsx
index 4e89ac0883a..a6522d3c015 100644
--- a/apps/desktop/src/components/titlebar/Titlebar.tsx
+++ b/apps/desktop/src/components/titlebar/Titlebar.tsx
@@ -29,13 +29,13 @@ export default function Titlebar() {
 		>
 			{left() ? (
 				<>
-					<WindowControls class="!ml-0" />
-					<div class="!ml-auto">{titlebarState.items}</div>
+					<WindowControls class="ml-0!" />
+					<div class="ml-auto!">{titlebarState.items}</div>
 				</>
 			) : (
 				<>
 					{titlebarState.items}
-					<WindowControls class="!ml-auto" />
+					<WindowControls class="ml-auto!" />
 				</>
 			)}
 		</header>
diff --git a/apps/desktop/src/components/titlebar/controls/CaptionControlsWindows11.tsx b/apps/desktop/src/components/titlebar/controls/CaptionControlsWindows11.tsx
index 667e92b9037..680e1b62cc4 100644
--- a/apps/desktop/src/components/titlebar/controls/CaptionControlsWindows11.tsx
+++ b/apps/desktop/src/components/titlebar/controls/CaptionControlsWindows11.tsx
@@ -34,7 +34,7 @@ export default function (
 	return (
 		<div
 			class={cx(
-				"flex flex-row items-stretch h-full align-baseline cursor-default rounded-none select-none *:outline-none *:transition-all *:duration-200",
+				"flex flex-row items-stretch h-full align-baseline cursor-default rounded-none select-none *:outline-hidden *:transition-all *:duration-200",
 				local.class,
 				focused()
 					? "*:text-black-transparent-80"
diff --git a/apps/desktop/src/entry-server.tsx b/apps/desktop/src/entry-server.tsx
index 5617725739d..7533dd90e73 100644
--- a/apps/desktop/src/entry-server.tsx
+++ b/apps/desktop/src/entry-server.tsx
@@ -23,7 +23,7 @@ export default createHandler(() => (
 					{assets}
 				</head>
 				<body class="w-screen h-screen cursor-default select-none">
-					<div id="app" class="h-full text-[--text-primary]">
+					<div id="app" class="h-full text-(--text-primary)">
 						{children}
 					</div>
 					{scripts}
diff --git a/apps/desktop/src/routes/(window-chrome).tsx b/apps/desktop/src/routes/(window-chrome).tsx
index 43cb16a88dd..f430779b68a 100644
--- a/apps/desktop/src/routes/(window-chrome).tsx
+++ b/apps/desktop/src/routes/(window-chrome).tsx
@@ -95,10 +95,10 @@ function Header() {
 			data-tauri-drag-region
 		>
 			{ctx.state()?.items}
-			{isWindows && <CaptionControlsWindows11 class="!ml-auto" />}
+			{isWindows && <CaptionControlsWindows11 class="ml-auto!" />}
 			{isMacOS && (
 				<CaptionControlsMacOS
-					class="!mr-auto ml-3"
+					class="mr-auto! ml-3"
 					showMinimize={false}
 					showZoom={false}
 				/>
diff --git a/apps/desktop/src/routes/(window-chrome)/new-main/CameraSelect.tsx b/apps/desktop/src/routes/(window-chrome)/new-main/CameraSelect.tsx
index c83ba904941..0f3a09e95b8 100644
--- a/apps/desktop/src/routes/(window-chrome)/new-main/CameraSelect.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/new-main/CameraSelect.tsx
@@ -112,7 +112,7 @@ export default function CameraSelect(props: {
 	const isDisabled = () => !!currentRecording.data || props.disabled;
 
 	return (
-		<div class="flex flex-col items-stretch text-[--text-primary]">
+		<div class="flex flex-col items-stretch text-(--text-primary)">
 			<button
 				type="button"
 				disabled={isDisabled()}
@@ -262,7 +262,7 @@ export function CameraSelectBase(props: {
 		!props.hidePreviewButton;
 
 	return (
-		<div class="flex flex-col gap-[0.25rem] items-stretch text-[--text-primary]">
+		<div class="flex flex-col gap-1 items-stretch text-(--text-primary)">
 			<button
 				type="button"
 				disabled={!!currentRecording.data || props.disabled}
diff --git a/apps/desktop/src/routes/(window-chrome)/new-main/DeviceSelectOverlay.tsx b/apps/desktop/src/routes/(window-chrome)/new-main/DeviceSelectOverlay.tsx
index cd842f71edd..174a37fb2a1 100644
--- a/apps/desktop/src/routes/(window-chrome)/new-main/DeviceSelectOverlay.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/new-main/DeviceSelectOverlay.tsx
@@ -175,7 +175,7 @@ export default function DeviceSelectOverlay<T>(
 								placeholder="Search..."
 								value={searchQuery()}
 								onInput={(e) => setSearchQuery(e.currentTarget.value)}
-								class="w-full px-3 py-1.5 text-sm rounded-lg outline-none placeholder:text-white/40 text-white"
+								class="w-full px-3 py-1.5 text-sm rounded-lg outline-hidden placeholder:text-white/40 text-white"
 								style={{
 									"background-color": "rgba(255, 255, 255, 0.1)",
 									border: "1px solid rgba(255, 255, 255, 0.1)",
diff --git a/apps/desktop/src/routes/(window-chrome)/new-main/MicrophoneSelect.tsx b/apps/desktop/src/routes/(window-chrome)/new-main/MicrophoneSelect.tsx
index 7e41d0fadbe..4084064b06a 100644
--- a/apps/desktop/src/routes/(window-chrome)/new-main/MicrophoneSelect.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/new-main/MicrophoneSelect.tsx
@@ -70,7 +70,7 @@ export default function MicrophoneSelect(props: {
 	const isDisabled = () => !!currentRecording.data || props.disabled;
 
 	return (
-		<div class="flex flex-col items-stretch text-[--text-primary]">
+		<div class="flex flex-col items-stretch text-(--text-primary)">
 			<button
 				type="button"
 				disabled={isDisabled()}
@@ -181,7 +181,7 @@ export function MicrophoneSelectBase(props: {
 		(1 - Math.max((dbs() ?? 0) + DB_SCALE, 0) / DB_SCALE) ** 0.5;
 
 	return (
-		<div class="flex flex-col gap-[0.25rem] items-stretch text-[--text-primary]">
+		<div class="flex flex-col gap-1 items-stretch text-(--text-primary)">
 			<button
 				type="button"
 				disabled={!!currentRecording.data || props.disabled}
diff --git a/apps/desktop/src/routes/(window-chrome)/new-main/ModeInfoPanel.tsx b/apps/desktop/src/routes/(window-chrome)/new-main/ModeInfoPanel.tsx
index 67da1aeab5b..34c4f7ee349 100644
--- a/apps/desktop/src/routes/(window-chrome)/new-main/ModeInfoPanel.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/new-main/ModeInfoPanel.tsx
@@ -49,7 +49,7 @@ export default function ModeInfoPanel(props: ModeInfoPanelProps) {
 					onClick={() => props.onBack()}
 					class="flex gap-1 items-center rounded-md px-1.5 text-xs cursor-pointer
 					text-gray-11 transition-opacity hover:opacity-70 hover:text-gray-12
-					focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-9 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-1"
+					focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-9 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-1"
 				>
 					<IconLucideArrowLeft class="size-3 text-gray-11" />
 					<span class="font-medium text-gray-12">Back</span>
@@ -89,7 +89,7 @@ export default function ModeInfoPanel(props: ModeInfoPanelProps) {
 													</div>
 												)}
 
-												<div class="flex-shrink-0">
+												<div class="shrink-0">
 													<option.icon
 														class={cx(
 															"size-5 invert dark:invert-0",
diff --git a/apps/desktop/src/routes/(window-chrome)/new-main/TargetCard.tsx b/apps/desktop/src/routes/(window-chrome)/new-main/TargetCard.tsx
index aa662ec9acb..34798d53d36 100644
--- a/apps/desktop/src/routes/(window-chrome)/new-main/TargetCard.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/new-main/TargetCard.tsx
@@ -198,7 +198,7 @@ export default function TargetCard(props: TargetCardProps) {
 		return parts.map((part) => {
 			if (part.toLowerCase() === lowercaseQuery) {
 				return (
-					<span class="rounded bg-blue-9/20 px-[1px] text-gray-12">{part}</span>
+					<span class="rounded-sm bg-blue-9/20 px-px text-gray-12">{part}</span>
 				);
 			}
 			return part;
@@ -314,12 +314,12 @@ export default function TargetCard(props: TargetCardProps) {
 			disabled={local.disabled}
 			data-variant={local.variant}
 			class={cx(
-				"group flex flex-col overflow-hidden rounded-lg border border-transparent bg-gray-3 text-left outline-none transition-colors duration-100 hover:bg-gray-4 focus-visible:ring-2 focus-visible:ring-blue-9 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-1",
+				"group flex flex-col overflow-hidden rounded-lg border border-transparent bg-gray-3 text-left outline-hidden transition-colors duration-100 hover:bg-gray-4 focus-visible:ring-2 focus-visible:ring-blue-9 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-1",
 				local.disabled && "pointer-events-none opacity-60",
 				local.class,
 			)}
 		>
-			<div class="relative h-[4.75rem] w-full overflow-hidden bg-gray-4/40">
+			<div class="relative h-19 w-full overflow-hidden bg-gray-4/40">
 				<Show
 					when={imageExists() ? thumbnailSrc() : undefined}
 					fallback={
@@ -354,10 +354,10 @@ export default function TargetCard(props: TargetCardProps) {
 					)}
 				</Show>
 				<div class="absolute inset-0 border opacity-60 pointer-events-none border-black/5" />
-				<div class="absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t to-transparent pointer-events-none from-black/40" />
+				<div class="absolute inset-x-0 bottom-0 h-10 bg-linear-to-t to-transparent pointer-events-none from-black/40" />
 				<Show when={recordingFailed() || recordingUploadFailed()}>
 					<div class="absolute inset-0 flex items-center justify-center bg-black/75">
-						<div class="flex items-center gap-1 px-1.5 py-0.5 rounded bg-red-9/20 text-red-11">
+						<div class="flex items-center gap-1 px-1.5 py-0.5 rounded-sm bg-red-9/20 text-red-11">
 							<IconPhWarningBold class="size-2.5" />
 							<span class="text-[10px] font-medium">
 								{recordingFailed() ? "Recording failed" : "Upload failed"}
@@ -391,7 +391,7 @@ export default function TargetCard(props: TargetCardProps) {
 								role="button"
 								tabIndex={-1}
 								onClick={handleOpenEditor}
-								class="flex-1 flex items-center justify-center p-1 rounded hover:bg-gray-5 text-gray-11 hover:text-gray-12 transition-colors"
+								class="flex-1 flex items-center justify-center p-1 rounded-sm hover:bg-gray-5 text-gray-11 hover:text-gray-12 transition-colors"
 							>
 								<IconLucideEdit class="size-3.5" />
 							</div>
@@ -401,7 +401,7 @@ export default function TargetCard(props: TargetCardProps) {
 								role="button"
 								tabIndex={-1}
 								onClick={handleCopy}
-								class="flex-1 flex items-center justify-center p-1 rounded hover:bg-gray-5 text-gray-11 hover:text-gray-12 transition-colors"
+								class="flex-1 flex items-center justify-center p-1 rounded-sm hover:bg-gray-5 text-gray-11 hover:text-gray-12 transition-colors"
 							>
 								<IconLucideCopy class="size-3.5" />
 							</div>
@@ -411,7 +411,7 @@ export default function TargetCard(props: TargetCardProps) {
 								role="button"
 								tabIndex={-1}
 								onClick={handleSave}
-								class="flex-1 flex items-center justify-center p-1 rounded hover:bg-gray-5 text-gray-11 hover:text-gray-12 transition-colors"
+								class="flex-1 flex items-center justify-center p-1 rounded-sm hover:bg-gray-5 text-gray-11 hover:text-gray-12 transition-colors"
 							>
 								<IconLucideSave class="size-3.5" />
 							</div>
@@ -436,7 +436,7 @@ export default function TargetCard(props: TargetCardProps) {
 											role="button"
 											tabIndex={-1}
 											onClick={handleOpenRecordingEditor}
-											class="flex-1 flex items-center justify-center p-1 rounded hover:bg-gray-5 text-gray-11 hover:text-gray-12 transition-colors"
+											class="flex-1 flex items-center justify-center p-1 rounded-sm hover:bg-gray-5 text-gray-11 hover:text-gray-12 transition-colors"
 										>
 											<IconLucideEdit class="size-3.5" />
 										</div>
@@ -453,7 +453,7 @@ export default function TargetCard(props: TargetCardProps) {
 													role="button"
 													tabIndex={-1}
 													onClick={handleReupload}
-													class="flex-1 flex items-center justify-center p-1 rounded hover:bg-gray-5 text-gray-11 hover:text-gray-12 transition-colors"
+													class="flex-1 flex items-center justify-center p-1 rounded-sm hover:bg-gray-5 text-gray-11 hover:text-gray-12 transition-colors"
 												>
 													<IconLucideRotateCcw class="size-3.5" />
 												</div>
@@ -475,7 +475,7 @@ export default function TargetCard(props: TargetCardProps) {
 											role="button"
 											tabIndex={-1}
 											onClick={handleOpenRecordingLink}
-											class="flex-1 flex items-center justify-center p-1 rounded hover:bg-gray-5 text-gray-11 hover:text-gray-12 transition-colors"
+											class="flex-1 flex items-center justify-center p-1 rounded-sm hover:bg-gray-5 text-gray-11 hover:text-gray-12 transition-colors"
 										>
 											<IconCapLink class="size-3.5" />
 										</div>
@@ -486,7 +486,7 @@ export default function TargetCard(props: TargetCardProps) {
 										role="button"
 										tabIndex={-1}
 										onClick={handleOpenRecordingFolder}
-										class="flex-1 flex items-center justify-center p-1 rounded hover:bg-gray-5 text-gray-11 hover:text-gray-12 transition-colors"
+										class="flex-1 flex items-center justify-center p-1 rounded-sm hover:bg-gray-5 text-gray-11 hover:text-gray-12 transition-colors"
 									>
 										<IconLucideFolder class="size-3.5" />
 									</div>
@@ -496,7 +496,7 @@ export default function TargetCard(props: TargetCardProps) {
 										role="button"
 										tabIndex={-1}
 										onClick={handleDeleteRecording}
-										class="flex-1 flex items-center justify-center p-1 rounded hover:bg-gray-5 text-gray-11 hover:text-gray-12 transition-colors"
+										class="flex-1 flex items-center justify-center p-1 rounded-sm hover:bg-gray-5 text-gray-11 hover:text-gray-12 transition-colors"
 									>
 										<IconCapTrash class="size-3.5" />
 									</div>
@@ -522,12 +522,12 @@ export function TargetCardSkeleton(props: { class?: string }) {
 				props.class,
 			)}
 		>
-			<div class="h-[4.75rem] w-full animate-pulse bg-gray-4" />
+			<div class="h-19 w-full animate-pulse bg-gray-4" />
 			<div class="flex flex-row items-start gap-2 px-2 py-1.5">
 				<div class="flex-1 space-y-1">
-					<div class="w-3/4 h-3 rounded bg-gray-4" />
-					<div class="h-2.5 w-1/2 rounded bg-gray-4" />
-					<div class="h-2.5 w-2/5 rounded bg-gray-4" />
+					<div class="w-3/4 h-3 rounded-sm bg-gray-4" />
+					<div class="h-2.5 w-1/2 rounded-sm bg-gray-4" />
+					<div class="h-2.5 w-2/5 rounded-sm bg-gray-4" />
 				</div>
 			</div>
 		</div>
diff --git a/apps/desktop/src/routes/(window-chrome)/new-main/TargetDropdownButton.tsx b/apps/desktop/src/routes/(window-chrome)/new-main/TargetDropdownButton.tsx
index 5865e5c8602..4c6c7b26194 100644
--- a/apps/desktop/src/routes/(window-chrome)/new-main/TargetDropdownButton.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/new-main/TargetDropdownButton.tsx
@@ -27,7 +27,7 @@ export default function TargetDropdownButton<
 			aria-expanded={local.expanded ? "true" : "false"}
 			data-expanded={local.expanded ? "true" : "false"}
 			class={cx(
-				"flex w-5 shrink-0 items-center justify-center rounded-lg bg-gray-4 text-gray-12 transition-colors duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-9 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-1 hover:bg-gray-5",
+				"flex w-5 shrink-0 items-center justify-center rounded-lg bg-gray-4 text-gray-12 transition-colors duration-150 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-9 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-1 hover:bg-gray-5",
 				local.expanded && "bg-gray-5",
 				local.disabled && "pointer-events-none opacity-60",
 				local.class,
diff --git a/apps/desktop/src/routes/(window-chrome)/new-main/TargetTypeButton.tsx b/apps/desktop/src/routes/(window-chrome)/new-main/TargetTypeButton.tsx
index eea046c313b..c295d46de89 100644
--- a/apps/desktop/src/routes/(window-chrome)/new-main/TargetTypeButton.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/new-main/TargetTypeButton.tsx
@@ -24,7 +24,7 @@ function TargetTypeButton(props: TargetTypeButtonProps) {
 			disabled={local.disabled}
 			aria-pressed={local.selected ? "true" : "false"}
 			class={cx(
-				"flex flex-1 flex-col items-center justify-end gap-1 rounded-lg border border-gray-5 bg-gray-3 py-2 text-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-9 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-1",
+				"flex flex-1 flex-col items-center justify-end gap-1 rounded-lg border border-gray-5 bg-gray-3 py-2 text-center transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-9 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-1",
 				local.selected ? "text-gray-12" : "text-gray-12 hover:bg-gray-4",
 				local.disabled && "pointer-events-none opacity-60",
 				local.class,
diff --git a/apps/desktop/src/routes/(window-chrome)/new-main/index.tsx b/apps/desktop/src/routes/(window-chrome)/new-main/index.tsx
index 82ce03f14f0..e7540576503 100644
--- a/apps/desktop/src/routes/(window-chrome)/new-main/index.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/new-main/index.tsx
@@ -327,7 +327,7 @@ function CameraListItem(props: {
 	return (
 		<div
 			class={cx(
-				"group flex items-stretch rounded-lg text-sm outline-none overflow-hidden transition-colors",
+				"group flex items-stretch rounded-lg text-sm outline-hidden overflow-hidden transition-colors",
 				props.isSelected
 					? "bg-blue-500 text-white"
 					: props.isFocused
@@ -413,7 +413,7 @@ function MicrophoneListItem(props: {
 	return (
 		<div
 			class={cx(
-				"relative overflow-hidden flex items-stretch rounded-lg text-sm outline-none",
+				"relative overflow-hidden flex items-stretch rounded-lg text-sm outline-hidden",
 				props.isSelected
 					? "bg-blue-500 text-white"
 					: props.isFocused
@@ -987,7 +987,7 @@ function DeviceListPanel(props: DeviceListPanelProps) {
 	return (
 		<div
 			ref={containerRef}
-			class="flex flex-col gap-1 outline-none"
+			class="flex flex-col gap-1 outline-hidden"
 			tabIndex={0}
 			onKeyDown={handleKeyDown}
 		>
@@ -1016,7 +1016,7 @@ function DeviceListPanel(props: DeviceListPanelProps) {
 					disabled={props.disabled}
 					onClick={() => handleSelect(null)}
 					class={cx(
-						"flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-left outline-none",
+						"flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-left outline-hidden",
 						isNoneSelected()
 							? "bg-blue-500 text-white"
 							: focusedIndex() === 0
@@ -1289,7 +1289,7 @@ function TargetMenuPanel(props: TargetMenuPanelProps & SharedTargetMenuProps) {
 					onClick={() => props.onBack()}
 					class="flex gap-1 items-center rounded-md px-1.5 text-xs
 					text-gray-11 transition-opacity hover:opacity-70 hover:text-gray-12
-					focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-9 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-1"
+					focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-blue-9 focus-visible:ring-offset-2 focus-visible:ring-offset-gray-1"
 				>
 					<IconLucideArrowLeft class="size-3 text-gray-11" />
 					<span class="font-medium text-gray-12">Back</span>
@@ -1497,7 +1497,7 @@ function MainWindowHelpButton() {
 				onClick={() => {
 					commands.showWindow("Onboarding");
 				}}
-				class="flex shrink-0 justify-center items-center size-5 focus:outline-none"
+				class="flex shrink-0 justify-center items-center size-5 focus:outline-hidden"
 			>
 				<IconLucideCircleHelp class="transition-colors text-gray-11 size-4 hover:text-gray-12" />
 			</button>
@@ -2415,7 +2415,7 @@ function Page() {
 	return (
 		<div
 			onMouseEnter={handleMouseEnter}
-			class="flex relative flex-col px-[13px] gap-2 pb-[8px] h-full min-h-0 text-[--text-primary]"
+			class="flex relative flex-col px-[13px] gap-2 pb-[8px] h-full min-h-0 text-(--text-primary)"
 		>
 			<WindowChromeHeader hideMaximize>
 				<div
@@ -2432,7 +2432,7 @@ function Page() {
 									await commands.showWindow({ Settings: { page: "general" } });
 									getCurrentWindow().hide();
 								}}
-								class="flex items-center justify-center size-5 focus:outline-none"
+								class="flex items-center justify-center size-5 focus:outline-hidden"
 							>
 								<IconLucideSettings class="transition-colors text-gray-11 size-4 hover:text-gray-12" />
 							</button>
@@ -2451,7 +2451,7 @@ function Page() {
 										return next;
 									});
 								}}
-								class="flex justify-center items-center size-5 focus:outline-none"
+								class="flex justify-center items-center size-5 focus:outline-hidden"
 							>
 								<IconLucideImage class="transition-colors text-gray-11 size-4 hover:text-gray-12" />
 							</button>
@@ -2470,7 +2470,7 @@ function Page() {
 										return next;
 									});
 								}}
-								class="flex justify-center items-center size-5 focus:outline-none"
+								class="flex justify-center items-center size-5 focus:outline-hidden"
 							>
 								<IconLucideSquarePlay class="transition-colors text-gray-11 size-4 hover:text-gray-12" />
 							</button>
@@ -2482,7 +2482,7 @@ function Page() {
 								onClick={() => {
 									new WebviewWindow("debug", { url: "/debug" });
 								}}
-								class="flex justify-center items-center focus:outline-none"
+								class="flex justify-center items-center focus:outline-hidden"
 							>
 								<IconLucideBug class="transition-colors text-gray-11 size-4 hover:text-gray-12" />
 							</button>
@@ -2494,7 +2494,7 @@ function Page() {
 				<div class="flex items-center justify-between mt-[16px] mb-[6px]">
 					<div class="flex items-center space-x-1">
 						<a
-							class="*:w-[92px] *:h-auto text-[--text-primary]"
+							class="*:w-[92px] *:h-auto text-(--text-primary)"
 							target="_blank"
 							href={
 								auth.data
@@ -2516,7 +2516,7 @@ function Page() {
 									class={cx(
 										"text-[0.6rem] ml-2 rounded-lg border border-gray-5 px-1 py-0.5",
 										license.data?.type === "pro"
-											? "bg-[--blue-400] text-gray-1 dark:text-gray-12"
+											? "bg-(--blue-400) text-gray-1 dark:text-gray-12"
 											: "bg-gray-3 cursor-pointer hover:bg-gray-5",
 									)}
 								>
@@ -2735,7 +2735,7 @@ function Page() {
 				</Show>
 			</div>
 			<Show when={isActivelyRecording()}>
-				<div class="absolute inset-0 z-10 flex flex-col justify-end bg-gray-1/80 px-6 pb-8 backdrop-blur-sm">
+				<div class="absolute inset-0 z-10 flex flex-col justify-end bg-gray-1/80 px-6 pb-8 backdrop-blur-xs">
 					<div class="pointer-events-auto">
 						<button
 							type="button"
diff --git a/apps/desktop/src/routes/(window-chrome)/onboarding.tsx b/apps/desktop/src/routes/(window-chrome)/onboarding.tsx
index 6d741d097c2..68bc3b57809 100644
--- a/apps/desktop/src/routes/(window-chrome)/onboarding.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/onboarding.tsx
@@ -271,25 +271,25 @@ function OnboardingAmbientBackdrop() {
 			<div class="startup-grain" />
 			<div
 				ref={bindCloud1}
-				class="absolute top-0 right-0 opacity-70 pointer-events-none z-[1]"
+				class="absolute top-0 right-0 opacity-70 pointer-events-none z-1"
 			>
 				<img
-					class="startup-cloud-image w-[100vw] md:w-[80vw] -mr-40"
+					class="startup-cloud-image w-screen md:w-[80vw] -mr-40"
 					src={cloud1}
 					alt=""
 				/>
 			</div>
 			<div
 				ref={bindCloud2}
-				class="absolute top-0 left-0 opacity-70 pointer-events-none z-[1]"
+				class="absolute top-0 left-0 opacity-70 pointer-events-none z-1"
 			>
 				<img
-					class="startup-cloud-image w-[100vw] md:w-[80vw] -ml-40"
+					class="startup-cloud-image w-screen md:w-[80vw] -ml-40"
 					src={cloud2}
 					alt=""
 				/>
 			</div>
-			<div class="absolute -bottom-[15%] left-1/2 -translate-x-1/2 opacity-70 pointer-events-none z-[1]">
+			<div class="absolute -bottom-[15%] left-1/2 -translate-x-1/2 opacity-70 pointer-events-none z-1">
 				<div ref={bindCloud3Inner}>
 					<img
 						class="startup-cloud-image w-[180vw] md:w-[180vw]"
@@ -616,7 +616,7 @@ function StepNavigation(props: {
 							onClick={props.onNext}
 							variant="primary"
 							size="md"
-							class="gap-2 px-10 py-3 min-h-12 min-w-[9.5rem] text-[15px] font-medium"
+							class="gap-2 px-10 py-3 min-h-12 min-w-38 text-[15px] font-medium"
 							disabled={props.nextDisabled}
 						>
 							{props.nextLabel}
@@ -709,7 +709,7 @@ function ModesOverviewStep(props: { active: boolean }) {
 				<For each={modes}>
 					{(mode, index) => (
 						<div
-							class="flex-1 flex flex-col items-center gap-3 p-5 rounded-2xl border border-gray-4 bg-white dark:bg-gray-2 transition-all duration-500 ease-out shadow-sm"
+							class="flex-1 flex flex-col items-center gap-3 p-5 rounded-2xl border border-gray-4 bg-white dark:bg-gray-2 transition-all duration-500 ease-out shadow-xs"
 							style={{
 								"transition-delay": `${200 + index() * 100}ms`,
 								opacity: visible() ? 1 : 0,
@@ -802,7 +802,7 @@ function ModeDetailStep(props: {
 			</div>
 
 			<div class="flex-1 min-w-0 flex items-center justify-center">
-				<div class="w-full h-full relative rounded-2xl bg-white dark:bg-gray-2 border border-gray-4 overflow-visible shadow-sm">
+				<div class="w-full h-full relative rounded-2xl bg-white dark:bg-gray-2 border border-gray-4 overflow-visible shadow-xs">
 					{props.children}
 				</div>
 			</div>
@@ -1005,7 +1005,7 @@ function ShortcutsStep(props: { active: boolean }) {
 				<For each={settingsAreas}>
 					{(area, index) => (
 						<div
-							class="flex flex-col gap-1 px-4 py-3 rounded-xl border border-gray-4 bg-white dark:bg-gray-2 transition-all duration-500 shadow-sm"
+							class="flex flex-col gap-1 px-4 py-3 rounded-xl border border-gray-4 bg-white dark:bg-gray-2 transition-all duration-500 shadow-xs"
 							style={{
 								"transition-delay": `${150 + index() * 80}ms`,
 								opacity: visible() ? 1 : 0,
@@ -1066,7 +1066,7 @@ function FaqStep(props: { active: boolean }) {
 
 			<div
 				class={cx(
-					"w-full max-w-[480px] rounded-xl border border-gray-4 bg-white dark:bg-gray-2 overflow-hidden transition-all duration-500 delay-100 shadow-sm",
+					"w-full max-w-[480px] rounded-xl border border-gray-4 bg-white dark:bg-gray-2 overflow-hidden transition-all duration-500 delay-100 shadow-xs",
 					visible() ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4",
 				)}
 			>
@@ -1229,7 +1229,7 @@ function StartRecordingClickMock(props: {
 			<div class="relative w-full">
 				<div
 					class={cx(
-						"flex h-11 w-full overflow-hidden rounded-full bg-gradient-to-r from-blue-10 via-blue-10 to-blue-11 text-white transition-transform duration-500 ease-out dark:from-blue-9 dark:via-blue-9 dark:to-blue-10",
+						"flex h-11 w-full overflow-hidden rounded-full bg-linear-to-r from-blue-10 via-blue-10 to-blue-11 text-white transition-transform duration-500 ease-out dark:from-blue-9 dark:via-blue-9 dark:to-blue-10",
 						cursorStage() === 2 && "scale-[0.98]",
 					)}
 				>
@@ -1289,28 +1289,28 @@ function RecordingBar(props: {
 	class?: string;
 }) {
 	const actionIconWrap =
-		"h-8 w-8 flex shrink-0 items-center justify-center rounded-lg p-[0.25rem] text-gray-11";
+		"h-8 w-8 flex shrink-0 items-center justify-center rounded-lg p-1 text-gray-11";
 
 	return (
 		<div class={cx("h-10 w-full min-w-[280px] rounded-2xl", props.class)}>
 			<div class="flex h-full w-full flex-row items-stretch overflow-hidden rounded-2xl border border-gray-5 bg-white dark:bg-gray-1 shadow-[0_1px_3px_rgba(0,0,0,0.1)]">
-				<div class="flex min-w-0 flex-1 flex-col gap-2 p-[0.25rem]">
+				<div class="flex min-w-0 flex-1 flex-col gap-2 p-1">
 					<div class="flex min-h-0 flex-1 flex-row items-center justify-between">
 						<Show
 							when={!props.stopped}
 							fallback={
-								<div class="flex flex-row items-center gap-[0.375rem] rounded-lg px-[0.5rem] py-[0.25rem] text-gray-10">
+								<div class="flex flex-row items-center gap-1.5 rounded-lg px-2 py-1 text-gray-10">
 									<div class="size-2 shrink-0 rounded-full bg-gray-8" />
-									<span class="text-[0.875rem] font-[500]">Stopped</span>
+									<span class="text-[0.875rem] font-medium">Stopped</span>
 								</div>
 							}
 						>
 							<button
 								type="button"
-								class="flex shrink-0 flex-row items-center gap-[0.25rem] rounded-lg px-[0.5rem] py-[0.25rem] text-red-300 transition-colors duration-100 hover:bg-red-500/[0.08] active:bg-red-500/[0.12]"
+								class="flex shrink-0 flex-row items-center gap-1 rounded-lg px-2 py-1 text-red-300 transition-colors duration-100 hover:bg-red-500/8 active:bg-red-500/12"
 							>
 								<IconCapStopCircle class="size-5 shrink-0" />
-								<span class="text-[0.875rem] font-[500] tabular-nums">
+								<span class="text-[0.875rem] font-medium tabular-nums">
 									{props.time}
 								</span>
 							</button>
@@ -1347,7 +1347,7 @@ function RecordingBar(props: {
 				</div>
 				<div
 					class={cx(
-						"flex w-9 shrink-0 cursor-default items-center justify-center border-l border-gray-5 p-[0.25rem] text-gray-10",
+						"flex w-9 shrink-0 cursor-default items-center justify-center border-l border-gray-5 p-1 text-gray-10",
 						props.stopped && "opacity-45",
 					)}
 					aria-hidden="true"
@@ -1400,20 +1400,20 @@ function InstantMockup(props: { active: boolean }) {
 					<div class="relative min-h-[52px] w-full max-w-[400px]">
 						<div
 							class={cx(
-								"flex w-full justify-center transition-all duration-[720ms] ease-[cubic-bezier(0.34,1.3,0.64,1)]",
+								"flex w-full justify-center transition-all duration-720 ease-[cubic-bezier(0.34,1.3,0.64,1)]",
 								phase() === 1
-									? "relative z-[2] translate-y-0 scale-100 opacity-100"
-									: "pointer-events-none absolute inset-0 z-[1] flex items-center justify-center opacity-0 scale-[0.94] -translate-y-2",
+									? "relative z-2 translate-y-0 scale-100 opacity-100"
+									: "pointer-events-none absolute inset-0 z-1 flex items-center justify-center opacity-0 scale-[0.94] -translate-y-2",
 							)}
 						>
 							<StartRecordingClickMock active={phase() === 1} mode="instant" />
 						</div>
 						<div
 							class={cx(
-								"w-full transition-all duration-[720ms] ease-[cubic-bezier(0.34,1.3,0.64,1)]",
+								"w-full transition-all duration-720 ease-[cubic-bezier(0.34,1.3,0.64,1)]",
 								phase() >= 2 && phase() < 7
-									? "relative z-[2] translate-y-0 scale-100 opacity-100"
-									: "pointer-events-none absolute inset-0 z-[1] flex items-center justify-center opacity-0 scale-[0.94] translate-y-3",
+									? "relative z-2 translate-y-0 scale-100 opacity-100"
+									: "pointer-events-none absolute inset-0 z-1 flex items-center justify-center opacity-0 scale-[0.94] translate-y-3",
 							)}
 						>
 							<div class="w-full shadow-[0_8px_30px_rgba(0,0,0,0.08)]">
@@ -1520,7 +1520,7 @@ function StudioMockup(props: { active: boolean }) {
 			<div class="relative flex-1 w-full max-w-[420px] min-h-[248px] mx-auto flex items-center justify-center">
 				<div
 					class={cx(
-						"absolute inset-0 z-[1] flex flex-col items-center justify-center transition-opacity duration-[600ms] ease-out",
+						"absolute inset-0 z-1 flex flex-col items-center justify-center transition-opacity duration-600 ease-out",
 						showRecording()
 							? "opacity-100 blur-0"
 							: "pointer-events-none opacity-0 blur-[2px]",
@@ -1529,20 +1529,20 @@ function StudioMockup(props: { active: boolean }) {
 					<div class="relative min-h-[52px] w-full max-w-[400px]">
 						<div
 							class={cx(
-								"flex w-full justify-center transition-all duration-[720ms] ease-[cubic-bezier(0.34,1.3,0.64,1)]",
+								"flex w-full justify-center transition-all duration-720 ease-[cubic-bezier(0.34,1.3,0.64,1)]",
 								phase() === 1
-									? "relative z-[2] translate-y-0 scale-100 opacity-100"
-									: "pointer-events-none absolute inset-0 z-[1] flex items-center justify-center opacity-0 scale-[0.94] -translate-y-2",
+									? "relative z-2 translate-y-0 scale-100 opacity-100"
+									: "pointer-events-none absolute inset-0 z-1 flex items-center justify-center opacity-0 scale-[0.94] -translate-y-2",
 							)}
 						>
 							<StartRecordingClickMock active={phase() === 1} mode="studio" />
 						</div>
 						<div
 							class={cx(
-								"w-full transition-all duration-[720ms] ease-[cubic-bezier(0.34,1.3,0.64,1)]",
+								"w-full transition-all duration-720 ease-[cubic-bezier(0.34,1.3,0.64,1)]",
 								phase() >= 2 && phase() < 7
-									? "relative z-[2] translate-y-0 scale-100 opacity-100"
-									: "pointer-events-none absolute inset-0 z-[1] flex items-center justify-center opacity-0 scale-[0.94] translate-y-3",
+									? "relative z-2 translate-y-0 scale-100 opacity-100"
+									: "pointer-events-none absolute inset-0 z-1 flex items-center justify-center opacity-0 scale-[0.94] translate-y-3",
 							)}
 						>
 							<div class="w-full shadow-[0_8px_30px_rgba(0,0,0,0.08)]">
@@ -1557,7 +1557,7 @@ function StudioMockup(props: { active: boolean }) {
 
 				<div
 					class={cx(
-						"absolute inset-0 flex flex-col rounded-xl overflow-hidden border border-gray-3 bg-white dark:bg-gray-1 shadow-lg transition-all duration-[600ms] ease-out z-[2]",
+						"absolute inset-0 flex flex-col rounded-xl overflow-hidden border border-gray-3 bg-white dark:bg-gray-1 shadow-lg transition-all duration-600 ease-out z-2",
 						showEditor()
 							? "opacity-100 scale-100 translate-y-0 blur-0"
 							: "opacity-0 scale-[0.96] translate-y-3 blur-[2px] pointer-events-none",
@@ -1605,7 +1605,7 @@ function StudioMockup(props: { active: boolean }) {
 									<div class="flex flex-col gap-1.5 p-3 w-full">
 										<div class="w-3/4 h-1.5 rounded-full bg-gray-5/50" />
 										<div class="w-1/2 h-1.5 rounded-full bg-gray-5/30" />
-										<div class="w-full h-5 rounded bg-gray-5/20 mt-1" />
+										<div class="w-full h-5 rounded-sm bg-gray-5/20 mt-1" />
 									</div>
 								</div>
 							</div>
@@ -1622,13 +1622,13 @@ function StudioMockup(props: { active: boolean }) {
 							<div class="text-[8px] text-gray-9 font-medium uppercase tracking-wider">
 								Style
 							</div>
-							<div class="h-5 rounded border border-gray-3 bg-white dark:bg-gray-2" />
+							<div class="h-5 rounded-sm border border-gray-3 bg-white dark:bg-gray-2" />
 							<div class="text-[8px] text-gray-9 font-medium uppercase tracking-wider mt-1">
 								Background
 							</div>
 							<div class="flex gap-1">
-								<div class="size-4 rounded-full bg-gradient-to-br from-blue-400 to-purple-500 border border-gray-3" />
-								<div class="size-4 rounded-full bg-gradient-to-br from-pink-400 to-orange-400 border border-gray-3" />
+								<div class="size-4 rounded-full bg-linear-to-br from-blue-400 to-purple-500 border border-gray-3" />
+								<div class="size-4 rounded-full bg-linear-to-br from-pink-400 to-orange-400 border border-gray-3" />
 								<div class="size-4 rounded-full bg-gray-4 border border-gray-3" />
 							</div>
 						</div>
@@ -1835,14 +1835,14 @@ function StartupOverlay(props: {
 	return (
 		<div
 			class={cx(
-				"absolute inset-0 z-50 flex flex-col min-h-full h-full overflow-hidden custom-bg transition-all duration-[600ms] text-solid-white bg-white",
+				"absolute inset-0 z-50 flex flex-col min-h-full h-full overflow-hidden custom-bg transition-all duration-600 text-solid-white bg-white",
 				props.isExiting && "opacity-0 scale-105 pointer-events-none",
 			)}
 		>
 			<div class="startup-grain" />
 
 			<div
-				class="absolute top-3 z-[210]"
+				class="absolute top-3 z-210"
 				style={{
 					[ostype() === "macos" ? "right" : "left"]: "12px",
 				}}
@@ -1866,12 +1866,12 @@ function StartupOverlay(props: {
 			<div
 				ref={bindCloud1}
 				class={cx(
-					"absolute top-0 right-0 opacity-70 pointer-events-none startup-cloud-1 z-[1]",
+					"absolute top-0 right-0 opacity-70 pointer-events-none startup-cloud-1 z-1",
 					props.isExiting && "startup-cloud-transition exiting",
 				)}
 			>
 				<img
-					class="startup-cloud-image w-[100vw] md:w-[80vw] -mr-40"
+					class="startup-cloud-image w-screen md:w-[80vw] -mr-40"
 					src={cloud1}
 					alt=""
 				/>
@@ -1879,19 +1879,19 @@ function StartupOverlay(props: {
 			<div
 				ref={bindCloud2}
 				class={cx(
-					"absolute top-0 left-0 opacity-70 pointer-events-none startup-cloud-2 z-[1]",
+					"absolute top-0 left-0 opacity-70 pointer-events-none startup-cloud-2 z-1",
 					props.isExiting && "startup-cloud-transition exiting",
 				)}
 			>
 				<img
-					class="startup-cloud-image w-[100vw] md:w-[80vw] -ml-40"
+					class="startup-cloud-image w-screen md:w-[80vw] -ml-40"
 					src={cloud2}
 					alt=""
 				/>
 			</div>
 			<div
 				class={cx(
-					"absolute -bottom-[15%] left-1/2 -translate-x-1/2 opacity-70 pointer-events-none z-[1]",
+					"absolute -bottom-[15%] left-1/2 -translate-x-1/2 opacity-70 pointer-events-none z-1",
 					props.isExiting && "startup-cloud-transition startup-cloud-3 exiting",
 				)}
 			>
@@ -1906,7 +1906,7 @@ function StartupOverlay(props: {
 
 			<div
 				class={cx(
-					"flex flex-col items-center justify-center flex-1 relative px-4 z-[5]",
+					"flex flex-col items-center justify-center flex-1 relative px-4 z-5",
 					props.isExiting && "opacity-0 scale-[1.1]",
 				)}
 				style={{ transition: "all 600ms cubic-bezier(0.4, 0, 0.2, 1)" }}
@@ -1929,7 +1929,7 @@ function StartupOverlay(props: {
 				</div>
 
 				<Button
-					class="mt-14 px-16 py-4 min-h-[3.75rem] min-w-[15rem] text-xl font-medium shadow-[0_0_30px_rgba(0,0,0,0.12)] bg-white border border-white/30 text-[#161b26] hover:bg-white/95 hover:border-white/40 flex-col gap-0.5"
+					class="mt-14 px-16 py-4 min-h-15 min-w-60 text-xl font-medium shadow-[0_0_30px_rgba(0,0,0,0.12)] bg-white border border-white/30 text-[#161b26] hover:bg-white/95 hover:border-white/40 flex-col gap-0.5"
 					variant="white"
 					size="lg"
 					onClick={handleGetStarted}
@@ -1937,7 +1937,7 @@ function StartupOverlay(props: {
 					<span>Get Started</span>
 					<span class="text-[11px] font-normal text-[rgba(22,27,38,0.58)] leading-tight inline-flex items-center justify-center gap-1">
 						<span>Click here, or press</span>
-						<kbd class="rounded border border-[rgba(22,27,38,0.14)] bg-[rgba(22,27,38,0.08)] px-1 py-px text-[10px] font-medium text-[#161b26] shadow-[0_1px_0_rgba(255,255,255,0.7)_inset]">
+						<kbd class="rounded border border-gray-6 bg-white dark:bg-gray-3 px-1 py-px text-[10px] font-medium text-gray-11 shadow-[0_1px_0_rgba(0,0,0,0.04)]">
 							Space
 						</kbd>
 					</span>
@@ -2093,7 +2093,7 @@ function PermissionsStep(props: {
 						return (
 							<Show when={permStatus() !== "notNeeded"}>
 								<div
-									class="flex items-center gap-4 px-4 py-3 rounded-xl border border-gray-4 bg-white dark:bg-gray-2 transition-all duration-500 shadow-sm"
+									class="flex items-center gap-4 px-4 py-3 rounded-xl border border-gray-4 bg-white dark:bg-gray-2 transition-all duration-500 shadow-xs"
 									style={{
 										"transition-delay": `${150 + index() * 80}ms`,
 										opacity: visible() ? 1 : 0,
@@ -2305,13 +2305,13 @@ function ScreenshotMockup(props: { active: boolean }) {
 								<div class="size-2 rounded-full bg-gray-6" />
 							</div>
 							<div class="flex items-center gap-1.5 absolute left-1/2 -translate-x-1/2">
-								<div class="size-4 rounded bg-white dark:bg-gray-3 border border-gray-4" />
-								<div class="size-4 rounded bg-white dark:bg-gray-3 border border-gray-4" />
+								<div class="size-4 rounded-sm bg-white dark:bg-gray-3 border border-gray-4" />
+								<div class="size-4 rounded-sm bg-white dark:bg-gray-3 border border-gray-4" />
 								<div class="w-px h-5 bg-gray-4 mx-0.5" />
-								<div class="size-4 rounded bg-blue-3 border border-blue-5" />
-								<div class="size-4 rounded bg-white dark:bg-gray-3 border border-gray-4" />
+								<div class="size-4 rounded-sm bg-blue-3 border border-blue-5" />
+								<div class="size-4 rounded-sm bg-white dark:bg-gray-3 border border-gray-4" />
 								<div class="w-px h-5 bg-gray-4 mx-0.5" />
-								<div class="size-4 rounded bg-white dark:bg-gray-3 border border-gray-4" />
+								<div class="size-4 rounded-sm bg-white dark:bg-gray-3 border border-gray-4" />
 							</div>
 							<div class="flex flex-1 flex-row items-center justify-end gap-1.5">
 								<div class="flex items-center gap-1 px-2 py-1 rounded-md bg-white dark:bg-gray-3 border border-gray-4 text-[9px] text-gray-11 font-medium">
@@ -2326,9 +2326,9 @@ function ScreenshotMockup(props: { active: boolean }) {
 						</div>
 
 						<div class="p-3 flex items-center justify-center">
-							<div class="relative w-full h-[140px] rounded overflow-hidden">
+							<div class="relative w-full h-[140px] rounded-sm overflow-hidden">
 								<div
-									class="absolute inset-0 transition-opacity duration-[1000ms] ease-out"
+									class="absolute inset-0 transition-opacity duration-1000 ease-out"
 									style={{
 										background:
 											"linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
@@ -2337,7 +2337,7 @@ function ScreenshotMockup(props: { active: boolean }) {
 								/>
 
 								<div
-									class="absolute transition-all duration-[1000ms] ease-out"
+									class="absolute transition-all duration-1000 ease-out"
 									style={{
 										top: phase() >= 8 ? "8%" : "0",
 										left: phase() >= 8 ? "8%" : "0",
@@ -2346,7 +2346,7 @@ function ScreenshotMockup(props: { active: boolean }) {
 									}}
 								>
 									<div
-										class="w-full h-full bg-white dark:bg-gray-3 flex flex-col gap-2 p-3 transition-all duration-[1000ms]"
+										class="w-full h-full bg-white dark:bg-gray-3 flex flex-col gap-2 p-3 transition-all duration-1000"
 										style={{
 											"border-radius": phase() >= 8 ? "8px" : "0px",
 											"box-shadow":
@@ -2357,8 +2357,8 @@ function ScreenshotMockup(props: { active: boolean }) {
 										<div class="w-28 h-2 rounded-full bg-gray-5/40" />
 										<div class="w-20 h-2 rounded-full bg-gray-5/50" />
 										<div class="mt-1 flex gap-2">
-											<div class="flex-1 h-8 rounded bg-gray-5/30" />
-											<div class="flex-1 h-8 rounded bg-gray-5/20" />
+											<div class="flex-1 h-8 rounded-sm bg-gray-5/30" />
+											<div class="flex-1 h-8 rounded-sm bg-gray-5/20" />
 										</div>
 									</div>
 								</div>
diff --git a/apps/desktop/src/routes/(window-chrome)/settings.tsx b/apps/desktop/src/routes/(window-chrome)/settings.tsx
index 2bddbee2091..df6e6b3f642 100644
--- a/apps/desktop/src/routes/(window-chrome)/settings.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/settings.tsx
@@ -22,9 +22,9 @@ export default function Settings(props: RouteSectionProps) {
 	};
 
 	return (
-		<div class="flex-1 flex flex-row divide-x divide-gray-3 text-[0.875rem] leading-[1.25rem] overflow-y-hidden">
+		<div class="flex-1 flex flex-row divide-x divide-gray-3 text-[0.875rem] leading-5 overflow-y-hidden">
 			<div class="flex flex-col h-full bg-gray-2">
-				<ul class="min-w-[12rem] h-full p-[0.625rem] space-y-1 text-gray-12">
+				<ul class="min-w-48 h-full p-2.5 space-y-1 text-gray-12">
 					<For
 						each={[
 							{
@@ -84,7 +84,7 @@ export default function Settings(props: RouteSectionProps) {
 								<A
 									href={item.href}
 									activeClass="bg-gray-5 pointer-events-none"
-									class="rounded-lg h-[2rem] hover:bg-gray-3 text-[13px] px-2 flex flex-row items-center gap-[0.375rem] transition-colors"
+									class="rounded-lg h-8 hover:bg-gray-3 text-[13px] px-2 flex flex-row items-center gap-1.5 transition-colors"
 								>
 									<item.icon class="opacity-60 size-4" />
 									<span>{item.name}</span>
@@ -93,7 +93,7 @@ export default function Settings(props: RouteSectionProps) {
 						)}
 					</For>
 				</ul>
-				<div class="p-[0.625rem] text-left flex flex-col">
+				<div class="p-2.5 text-left flex flex-col">
 					<Show when={version()}>
 						{(v) => (
 							<div class="mb-2 text-xs text-gray-11 flex flex-col items-start gap-0.5">
diff --git a/apps/desktop/src/routes/(window-chrome)/settings/changelog.tsx b/apps/desktop/src/routes/(window-chrome)/settings/changelog.tsx
index 958ae70ef3d..130c3e505c4 100644
--- a/apps/desktop/src/routes/(window-chrome)/settings/changelog.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/settings/changelog.tsx
@@ -58,7 +58,7 @@ export default function Page() {
 					>
 						<ErrorBoundary
 							fallback={(e) => (
-								<div class="text-[--text-primary] font-medium">
+								<div class="text-(--text-primary) font-medium">
 									{e.toString()}
 								</div>
 							)}
@@ -66,20 +66,20 @@ export default function Page() {
 							<ul class="space-y-8">
 								<For each={changelog.data}>
 									{(entry, i) => (
-										<li class="border-b-2 border-[--gray-200] pb-8 last:border-b-0">
+										<li class="border-b-2 border-(--gray-200) pb-8 last:border-b-0">
 											<div class="flex mb-2">
 												<Show when={i() === 0}>
-													<div class="bg-[--blue-400] text-[--text-primary] px-2 py-1 rounded-md uppercase font-bold">
+													<div class="bg-(--blue-400) text-(--text-primary) px-2 py-1 rounded-md uppercase font-bold">
 														<span style="color: #fff" class="text-xs">
 															New
 														</span>
 													</div>
 												</Show>
 											</div>
-											<h3 class="font-semibold text-[--text-primary] mb-2">
+											<h3 class="font-semibold text-(--text-primary) mb-2">
 												{entry.title}
 											</h3>
-											<div class="text-[--text-tertiary] text-sm mb-4">
+											<div class="text-(--text-tertiary) text-sm mb-4">
 												Version {entry.version} -{" "}
 												{new Date(entry.publishedAt).toLocaleDateString()}
 											</div>
@@ -87,7 +87,7 @@ export default function Page() {
 												components={{
 													a: (props) => <a {...props} target="_blank" />,
 												}}
-												class="prose dark:prose-invert prose-sm max-w-none text-[--text-tertiary]"
+												class="prose dark:prose-invert prose-sm max-w-none text-(--text-tertiary)"
 											>
 												{entry.content}
 											</SolidMarkdown>
diff --git a/apps/desktop/src/routes/(window-chrome)/settings/feedback.tsx b/apps/desktop/src/routes/(window-chrome)/settings/feedback.tsx
index 8e59e5af91f..1c2f5deb1c6 100644
--- a/apps/desktop/src/routes/(window-chrome)/settings/feedback.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/settings/feedback.tsx
@@ -81,7 +81,7 @@ export default function FeedbackTab() {
 									placeholder="Tell us what you think about Cap..."
 									required
 									minLength={10}
-									class="p-2 w-full h-32 text-[13px] rounded-md border transition-colors duration-200 resize-none bg-gray-2 placeholder:text-gray-10 border-gray-3 text-primary focus:outline-none focus:ring-1 focus:ring-gray-8 hover:border-gray-6"
+									class="p-2 w-full h-32 text-[13px] rounded-md border transition-colors duration-200 resize-none bg-gray-2 placeholder:text-gray-10 border-gray-3 text-primary focus:outline-hidden focus:ring-1 focus:ring-gray-8 hover:border-gray-6"
 								/>
 							</div>
 
@@ -176,7 +176,7 @@ export default function FeedbackTab() {
 													<p class="text-gray-11 font-medium">
 														Operating System
 													</p>
-													<p class="text-gray-10 bg-gray-2 px-2 py-1.5 rounded font-mono text-xs">
+													<p class="text-gray-10 bg-gray-2 px-2 py-1.5 rounded-sm font-mono text-xs">
 														{ver().displayName}
 													</p>
 												</div>
@@ -207,7 +207,7 @@ export default function FeedbackTab() {
 												<div class="flex gap-1.5 flex-wrap">
 													<For each={d.availableEncoders as string[]}>
 														{(encoder) => (
-															<span class="px-2 py-1 bg-gray-2 rounded text-xs text-gray-10 font-mono">
+															<span class="px-2 py-1 bg-gray-2 rounded-sm text-xs text-gray-10 font-mono">
 																{encoder}
 															</span>
 														)}
diff --git a/apps/desktop/src/routes/(window-chrome)/settings/general.tsx b/apps/desktop/src/routes/(window-chrome)/settings/general.tsx
index d0345a90793..7cc3878e792 100644
--- a/apps/desktop/src/routes/(window-chrome)/settings/general.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/settings/general.tsx
@@ -1041,11 +1041,11 @@ function DefaultProjectNameCard(props: {
 
 					<Collapsible class="w-full rounded-lg">
 						<Collapsible.Trigger class="inline-flex gap-1 items-center text-xs transition-colors text-gray-10 hover:text-gray-12 group">
-							<IconCapChevronDown class="size-3.5 ui-group-expanded:rotate-180 transition-transform duration-200" />
+							<IconCapChevronDown class="size-3.5 data-group-expanded:rotate-180 transition-transform duration-200" />
 							<span>Available placeholders</span>
 						</Collapsible.Trigger>
 
-						<Collapsible.Content class="space-y-3 pt-3 text-xs text-gray-12 opacity-0 transition animate-collapsible-up ui-expanded:animate-collapsible-down ui-expanded:opacity-100">
+						<Collapsible.Content class="space-y-3 pt-3 text-xs text-gray-12 opacity-0 transition animate-collapsible-up data-expanded:animate-collapsible-down data-expanded:opacity-100">
 							<p class="text-gray-10">
 								Click any placeholder to copy it. Time supports custom formats
 								via <code class="text-gray-12">{"{moment:HH:mm}"}</code>.
@@ -1249,8 +1249,8 @@ function ExcludedWindowsSkeleton() {
 				{(width) => (
 					<div class="flex gap-2 items-center pr-1 pl-3 py-1.5 rounded-full border bg-gray-3 border-gray-4 animate-pulse">
 						<div class="flex flex-col gap-1 leading-tight">
-							<div class={cx("h-2.5 rounded bg-gray-4", width)} />
-							<div class="w-14 h-2 rounded bg-gray-4" />
+							<div class={cx("h-2.5 rounded-sm bg-gray-4", width)} />
+							<div class="w-14 h-2 rounded-sm bg-gray-4" />
 						</div>
 						<div class="rounded-full size-5 bg-gray-4" />
 					</div>
diff --git a/apps/desktop/src/routes/(window-chrome)/settings/hotkeys.tsx b/apps/desktop/src/routes/(window-chrome)/settings/hotkeys.tsx
index 02dc94e7530..1e4c4ce797d 100644
--- a/apps/desktop/src/routes/(window-chrome)/settings/hotkeys.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/settings/hotkeys.tsx
@@ -133,7 +133,7 @@ function Inner(props: { initialStore: HotkeysStore | null }) {
 												>
 													{(binding) => <HotkeyText binding={binding()} />}
 												</Show>
-												<div class="flex flex-row items-center gap-[0.125rem]">
+												<div class="flex flex-row items-center gap-0.5">
 													<Show when={hotkeys[item()]}>
 														<button
 															class="w-fit"
@@ -237,7 +237,7 @@ function HotkeyText(props: { binding: Hotkey }) {
 		<div class="flex gap-1 items-center w-fit group">
 			<For each={keys}>
 				{(key) => (
-					<kbd class="inline-flex justify-center text-xs items-center px-1.5 text-[13px] font-medium rounded border h-6 min-w-6 text-gray-11 bg-gray-5 border-gray-6 group-hover:border-gray-8 transition-colors duration-200 group-hover:bg-gray-7">
+					<kbd class="inline-flex justify-center w-fit text-xs items-center p-2 text-[13px] font-medium rounded-sm border size-6 text-gray-11 bg-gray-5 border-gray-6 group-hover:border-gray-8 transition-colors duration-200 group-hover:bg-gray-7">
 						{key}
 					</kbd>
 				)}
diff --git a/apps/desktop/src/routes/(window-chrome)/settings/integrations/s3-config.tsx b/apps/desktop/src/routes/(window-chrome)/settings/integrations/s3-config.tsx
index a76ed4b1740..6c11ed5fe2a 100644
--- a/apps/desktop/src/routes/(window-chrome)/settings/integrations/s3-config.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/settings/integrations/s3-config.tsx
@@ -134,7 +134,7 @@ export default function S3ConfigPage() {
 		<div class="space-y-2">
 			<label class="text-[13px] text-gray-12">{label}</label>
 			<Input
-				class="!bg-gray-3"
+				class="bg-gray-3!"
 				type={type}
 				value={s3Config()[key] ?? ""}
 				disabled={!!managedByOrganization()}
@@ -201,7 +201,7 @@ export default function S3ConfigPage() {
 												provider: e.currentTarget.value,
 											}))
 										}
-										class="px-3 py-2 pr-10 w-full rounded-lg border border-transparent transition-all duration-200 appearance-none outline-none bg-gray-3 focus:border-gray-8"
+										class="px-3 py-2 pr-10 w-full rounded-lg border border-transparent transition-all duration-200 appearance-none outline-hidden bg-gray-3 focus:border-gray-8"
 									>
 										<option value="aws">AWS S3</option>
 										<option value="cloudflare">Cloudflare R2</option>
@@ -245,7 +245,7 @@ export default function S3ConfigPage() {
 					</Suspense>
 				</div>
 			</div>
-			<div class="flex-shrink-0 mt-5">
+			<div class="shrink-0 mt-5">
 				<fieldset
 					class="flex justify-between items-center"
 					disabled={
diff --git a/apps/desktop/src/routes/(window-chrome)/settings/license.tsx b/apps/desktop/src/routes/(window-chrome)/settings/license.tsx
index 1b33c3653cb..052f4f26816 100644
--- a/apps/desktop/src/routes/(window-chrome)/settings/license.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/settings/license.tsx
@@ -206,7 +206,7 @@ function CommercialLicensePurchase() {
 
 	return (
 		<>
-			<div class="w-full max-w-[700px] rounded-xl shadow-sm bg-gray-2">
+			<div class="w-full max-w-[700px] rounded-xl shadow-xs bg-gray-2">
 				<div class="flex flex-col md:flex-row">
 					{/* Left Column */}
 					<div
@@ -235,7 +235,7 @@ function CommercialLicensePurchase() {
 							<h3 class="text-2xl font-medium tracking-tight leading-5">
 								Commercial License
 							</h3>
-							<p class="mt-2 text-sm text-[--text-tertiary]">
+							<p class="mt-2 text-sm text-(--text-tertiary)">
 								For commercial use
 							</p>
 						</div>
@@ -263,7 +263,7 @@ function CommercialLicensePurchase() {
 							onClick={() => openCommercialCheckout.mutate()}
 							disabled={openCommercialCheckout.isPending}
 							variant="dark"
-							class="w-full !rounded-full mt-10 !h-[48px] text-lg font-medium"
+							class="w-full rounded-full! mt-10 h-[48px]! text-lg font-medium"
 							size="lg"
 						>
 							{openCommercialCheckout.isPending
@@ -283,9 +283,9 @@ function CommercialLicensePurchase() {
 							].map((feature) => (
 								<li class="flex justify-start items-center">
 									<div class="flex justify-center items-center p-0 m-0 w-6 h-6">
-										<IconLucideCheck class="w-4 h-4 text-[--text-primary]" />
+										<IconLucideCheck class="w-4 h-4 text-(--text-primary)" />
 									</div>
-									<span class="ml-1 text-[0.9rem] text-[--text-primary]">
+									<span class="ml-1 text-[0.9rem] text-(--text-primary)">
 										{feature}
 									</span>
 								</li>
diff --git a/apps/desktop/src/routes/(window-chrome)/settings/recordings.tsx b/apps/desktop/src/routes/(window-chrome)/settings/recordings.tsx
index d1e8d570b8e..b26eb60c969 100644
--- a/apps/desktop/src/routes/(window-chrome)/settings/recordings.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/settings/recordings.tsx
@@ -194,7 +194,7 @@ export default function Recordings() {
 			<Show
 				when={recordings.data && recordings.data.length > 0}
 				fallback={
-					<p class="text-center text-[--text-tertiary] absolute flex items-center justify-center w-full h-full">
+					<p class="text-center text-(--text-tertiary) absolute flex items-center justify-center w-full h-full">
 						No recordings found
 					</p>
 				}
@@ -243,11 +243,11 @@ export default function Recordings() {
 
 				<div class="flex relative flex-col flex-1 mt-4 rounded-xl border custom-scroll bg-gray-2 border-gray-3">
 					<Show when={filteredRecordings().length === 0}>
-						<p class="text-center text-[--text-tertiary] absolute flex items-center justify-center w-full h-full">
+						<p class="text-center text-(--text-tertiary) absolute flex items-center justify-center w-full h-full">
 							{emptyMessage()}
 						</p>
 					</Show>
-					<ul class="flex flex-col w-full text-[--text-primary]">
+					<ul class="flex flex-col w-full text-(--text-primary)">
 						<For each={visibleRecordings()}>
 							{(recording) => (
 								<RecordingItem
@@ -315,7 +315,7 @@ function RecordingItem(props: {
 				}
 			}}
 			class={cx(
-				"flex flex-row justify-between p-3 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-gray-3 items-center w-full  transition-colors duration-200",
+				"flex flex-row justify-between p-3 not-last:border-b not-last:border-gray-3 items-center w-full  transition-colors duration-200",
 				studioCompleteCheck()
 					? "cursor-pointer hover:bg-gray-3"
 					: "cursor-default",
@@ -324,10 +324,10 @@ function RecordingItem(props: {
 			<div class="flex gap-5 items-center">
 				<Show
 					when={imageExists()}
-					fallback={<div class="mr-4 rounded bg-gray-10 size-11" />}
+					fallback={<div class="mr-4 rounded-sm bg-gray-10 size-11" />}
 				>
 					<img
-						class="object-cover rounded size-12"
+						class="object-cover rounded-sm size-12"
 						alt="Recording thumbnail"
 						src={`${convertFileSrc(
 							props.recording.thumbnailPath,
diff --git a/apps/desktop/src/routes/(window-chrome)/settings/screenshots.tsx b/apps/desktop/src/routes/(window-chrome)/settings/screenshots.tsx
index 7f63566dcde..1b7720fdb37 100644
--- a/apps/desktop/src/routes/(window-chrome)/settings/screenshots.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/settings/screenshots.tsx
@@ -146,7 +146,7 @@ export default function Screenshots() {
 				when={screenshots.data && screenshots.data.length > 0}
 				fallback={
 					<div class="flex flex-1 items-center justify-center">
-						<p class="text-center text-[--text-tertiary]">
+						<p class="text-center text-(--text-tertiary)">
 							No screenshots found
 						</p>
 					</div>
@@ -178,11 +178,11 @@ export default function Screenshots() {
 
 				<div class="flex relative flex-col flex-1 mt-4 rounded-xl border custom-scroll bg-gray-2 border-gray-3">
 					<Show when={filteredScreenshots().length === 0}>
-						<p class="text-center text-[--text-tertiary] absolute flex items-center justify-center w-full h-full">
+						<p class="text-center text-(--text-tertiary) absolute flex items-center justify-center w-full h-full">
 							{emptyMessage()}
 						</p>
 					</Show>
-					<ul class="flex flex-col w-full text-[--text-primary]">
+					<ul class="flex flex-col w-full text-(--text-primary)">
 						<For each={visibleScreenshots()}>
 							{(screenshot) => (
 								<ScreenshotItem
@@ -231,15 +231,15 @@ function ScreenshotItem(props: {
 	return (
 		<li
 			onClick={props.onClick}
-			class="flex flex-row justify-between p-3 [&:not(:last-child)]:border-b [&:not(:last-child)]:border-gray-3 items-center w-full cursor-pointer hover:bg-gray-3 transition-colors duration-200"
+			class="flex flex-row justify-between p-3 not-last:border-b not-last:border-gray-3 items-center w-full cursor-pointer hover:bg-gray-3 transition-colors duration-200"
 		>
 			<div class="flex gap-5 items-center">
 				<Show
 					when={imageExists()}
-					fallback={<div class="mr-4 rounded bg-gray-10 size-11" />}
+					fallback={<div class="mr-4 rounded-sm bg-gray-10 size-11" />}
 				>
 					<img
-						class="object-cover rounded size-12"
+						class="object-cover rounded-sm size-12"
 						alt="Screenshot thumbnail"
 						src={convertFileSrc(props.screenshot.path)}
 						onError={() => setImageExists(false)}
diff --git a/apps/desktop/src/routes/(window-chrome)/settings/transcription.tsx b/apps/desktop/src/routes/(window-chrome)/settings/transcription.tsx
index b94500d1a63..d189c52ee56 100644
--- a/apps/desktop/src/routes/(window-chrome)/settings/transcription.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/settings/transcription.tsx
@@ -129,7 +129,7 @@ function Inner(props: { initialStore: GeneralSettingsStore | null }) {
 										Clear
 									</Button>
 								</Show>
-								<span class="text-xs text-gray-11 min-w-[3.75rem] text-right">
+								<span class="text-xs text-gray-11 min-w-15 text-right">
 									{saveState() === "saving"
 										? "Saving..."
 										: saveState() === "saved"
@@ -154,7 +154,7 @@ function Inner(props: { initialStore: GeneralSettingsStore | null }) {
 								autocapitalize="off"
 								autocomplete="off"
 								autocorrect="off"
-								class="flex-1 px-3 py-2 bg-gray-1 border border-gray-3 rounded-md text-gray-12 placeholder:text-gray-10 focus:outline-none focus:ring-1 focus:ring-gray-8 hover:border-gray-6"
+								class="flex-1 px-3 py-2 bg-gray-1 border border-gray-3 rounded-md text-gray-12 placeholder:text-gray-10 focus:outline-hidden focus:ring-1 focus:ring-gray-8 hover:border-gray-6"
 							/>
 							<Button
 								onClick={addHint}
diff --git a/apps/desktop/src/routes/(window-chrome)/update.tsx b/apps/desktop/src/routes/(window-chrome)/update.tsx
index b6f58baddac..0ff90cd6cde 100644
--- a/apps/desktop/src/routes/(window-chrome)/update.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/update.tsx
@@ -22,15 +22,15 @@ export default function () {
 	});
 
 	return (
-		<div class="flex flex-col justify-center flex-1 items-center gap-[3rem] p-[1rem] text-[0.875rem] font-[400] h-full">
+		<div class="flex flex-col justify-center flex-1 items-center gap-12 p-4 text-[0.875rem] font-normal h-full">
 			<Show when={updateError()}>
 				<div class="flex flex-col gap-4 items-center text-center max-w-md">
-					<p class="text-[--text-primary]">{updateError()}</p>
-					<p class="text-[--text-tertiary]">
+					<p class="text-(--text-primary)">{updateError()}</p>
+					<p class="text-(--text-tertiary)">
 						Please download the latest version manually from cap.so/download.
 						Your data will not be lost.
 					</p>
-					<p class="text-[--text-tertiary] text-xs">
+					<p class="text-(--text-tertiary) text-xs">
 						If this issue persists, please contact support.
 					</p>
 					<Button onClick={() => navigate("/")}>Go Back</Button>
@@ -40,7 +40,7 @@ export default function () {
 				when={!updateError() && update()}
 				fallback={
 					!updateError() && (
-						<span class="text-[--text-tertiary]">No update available</span>
+						<span class="text-(--text-tertiary)">No update available</span>
 					)
 				}
 				keyed
@@ -95,12 +95,12 @@ export default function () {
 						<div>
 							<Switch
 								fallback={
-									<IconCapLogo class="animate-spin size-4 text-[--text-primary]" />
+									<IconCapLogo class="animate-spin size-4 text-(--text-primary)" />
 								}
 							>
 								<Match when={updateStatus()?.type === "done"}>
 									<div class="flex flex-col gap-4 items-center">
-										<p class="text-[--text-tertiary]">
+										<p class="text-(--text-tertiary)">
 											Update has been installed. Restart Cap to finish updating.
 										</p>
 										<Button onClick={() => relaunch()}>Restart Now</Button>
@@ -119,7 +119,7 @@ export default function () {
 								>
 									{(status) => (
 										<>
-											<h1 class="text-[--text-primary] mb-4">
+											<h1 class="text-(--text-primary) mb-4">
 												Installing Update
 											</h1>
 
diff --git a/apps/desktop/src/routes/(window-chrome)/upgrade.tsx b/apps/desktop/src/routes/(window-chrome)/upgrade.tsx
index a48a27d00e3..13a57bcb2cf 100644
--- a/apps/desktop/src/routes/(window-chrome)/upgrade.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/upgrade.tsx
@@ -274,7 +274,7 @@ export default function Page() {
 			)}
 			{!upgradeComplete() &&
 				(license.data?.type === "commercial" ? (
-					<div class="p-8 mx-auto w-full max-w-[700px] rounded-xl border shadow-sm bg-gray-2 border-gray-3">
+					<div class="p-8 mx-auto w-full max-w-[700px] rounded-xl border shadow-xs bg-gray-2 border-gray-3">
 						<div class="space-y-6">
 							<div class="flex flex-col items-center mb-6 text-center">
 								<h3 class="text-2xl font-medium">Commercial License</h3>
@@ -327,7 +327,7 @@ export default function Page() {
 				) : (
 					<>
 						<div class="text-center">
-							<h1 class="text-4xl md:text-4xl mb-6 tracking-[-.05em] font-medium text-[--text-primary]">
+							<h1 class="text-4xl md:text-4xl mb-6 tracking-[-.05em] font-medium text-(--text-primary)">
 								Early Adopter Pricing
 							</h1>
 						</div>
@@ -351,7 +351,7 @@ export default function Page() {
 										riveInstance.play("card-stack");
 									}
 								}}
-								class="flex flex-col flex-1 justify-between p-3 h-[700px ] bg-gray-3 rounded-2xl border border-gray-3 shadow-sm text-card-foreground md:p-3"
+								class="flex flex-col flex-1 justify-between p-3 h-[700px ] bg-gray-3 rounded-2xl border border-gray-3 shadow-xs text-card-foreground md:p-3"
 							>
 								<div class="space-y-5">
 									<div class="flex flex-col gap-6 items-center">
@@ -360,7 +360,7 @@ export default function Page() {
 											<h3 class="text-2xl font-medium tracking-tight leading-5">
 												Commercial License
 											</h3>
-											<p class="mt-2 text-sm text-[--text-tertiary]">
+											<p class="mt-2 text-sm text-(--text-tertiary)">
 												For commercial use
 											</p>
 										</div>
@@ -401,9 +401,9 @@ export default function Page() {
 											].map((feature) => (
 												<li class="flex justify-start items-center">
 													<div class="flex justify-center items-center p-0 m-0 w-6 h-6">
-														<IconLucideCheck class="w-4 h-4 text-[--text-primary]" />
+														<IconLucideCheck class="w-4 h-4 text-(--text-primary)" />
 													</div>
-													<span class="ml-1 text-[0.9rem] text-[--text-primary]">
+													<span class="ml-1 text-[0.9rem] text-(--text-primary)">
 														{feature}
 													</span>
 												</li>
@@ -420,7 +420,7 @@ export default function Page() {
 										onClick={() => openCommercialCheckout.mutate()}
 										disabled={openCommercialCheckout.isPending}
 										variant="dark"
-										class="w-full !rounded-full !h-[48px] text-lg font-medium"
+										class="w-full rounded-full! h-[48px]! text-lg font-medium"
 										size="lg"
 									>
 										{openCommercialCheckout.isPending
@@ -456,7 +456,7 @@ export default function Page() {
 										riveInstance.play("items-coming-in");
 									}
 								}}
-								class="flex-grow p-3 h-[700px] flex-1 bg-gray-12 rounded-2xl border shadow-sm text-card-foreground md:p-3"
+								class="grow p-3 h-[700px] flex-1 bg-gray-12 rounded-2xl border shadow-xs text-card-foreground md:p-3"
 							>
 								<div class="flex flex-col justify-between space-y-5 h-full">
 									<div class="flex flex-col gap-6 items-center px-6">
@@ -511,7 +511,7 @@ export default function Page() {
 									</div>
 									<Button
 										variant="blue"
-										class="!rounded-full !text-lg w-full mx-auto"
+										class="rounded-full! text-lg! w-full mx-auto"
 										onClick={openCheckoutInExternalBrowser}
 									>
 										{loading() ? "Loading..." : "Upgrade to Cap Pro"}
diff --git a/apps/desktop/src/routes/camera.tsx b/apps/desktop/src/routes/camera.tsx
index e00313436e0..9c53a80b8e5 100644
--- a/apps/desktop/src/routes/camera.tsx
+++ b/apps/desktop/src/routes/camera.tsx
@@ -474,7 +474,7 @@ function ControlButton(
 	return (
 		<KToggleButton
 			type="button"
-			class="p-2 rounded-lg ui-pressed:bg-gray-3 ui-pressed:text-gray-12"
+			class="p-2 rounded-lg data-pressed:bg-gray-3 data-pressed:text-gray-12"
 			{...props}
 		/>
 	);
@@ -1003,7 +1003,7 @@ function LegacyCameraPreviewPage(props: {
 	const chrome = createCameraWindowChromeVisibility();
 	const toolbarClass = () =>
 		cx(
-			"flex flex-row gap-[0.25rem] p-[0.25rem] rounded-xl transition-[opacity,transform] bg-gray-1 border border-white-transparent-20 text-gray-10",
+			"flex flex-row gap-1 p-1 rounded-xl transition-[opacity,transform] bg-gray-1 border border-white-transparent-20 text-gray-10",
 			chrome.visible()
 				? "opacity-100 translate-y-0"
 				: "opacity-0 translate-y-2",
@@ -1364,7 +1364,7 @@ function CameraIssueOverlay(props: {
 	return (
 		<div
 			class={cx(
-				"absolute z-10 flex items-center justify-center overflow-hidden bg-black/75 backdrop-blur-sm px-4 pointer-events-none",
+				"absolute z-10 flex items-center justify-center overflow-hidden bg-black/75 backdrop-blur-xs px-4 pointer-events-none",
 				props.class ?? "inset-0",
 			)}
 			style={style()}
diff --git a/apps/desktop/src/routes/capture-area.tsx b/apps/desktop/src/routes/capture-area.tsx
index 9f9cb76cd63..0a2a3feeb17 100644
--- a/apps/desktop/src/routes/capture-area.tsx
+++ b/apps/desktop/src/routes/capture-area.tsx
@@ -179,10 +179,10 @@ export default function CaptureArea() {
 				<Transition
 					appear
 					enterClass="-translate-y-5 scale-75 opacity-0 blur-lg"
-					enterActiveClass="duration-500 [transition-timing-function:cubic-bezier(0.175,0.885,0.12,1.175)]"
+					enterActiveClass="duration-500 ease-[cubic-bezier(0.175,0.885,0.12,1.175)]"
 					enterToClass="translate-y-0 scale-100 opacity-100"
 					exitClass="translate-y-0 scale-100 opacity-100"
-					exitActiveClass="duration-500 [transition-timing-function:cubic-bezier(0.275,0.05,0.22,1.3)]"
+					exitActiveClass="duration-500 ease-[cubic-bezier(0.275,0.05,0.22,1.3)]"
 					exitToClass="-translate-y-5 scale-75 opacity-0 blur-lg"
 				>
 					<Show when={visible()}>
@@ -208,7 +208,7 @@ export default function CaptureArea() {
 									>
 										<IconLucideRotateCcw class="group-active:scale-90 transition-transform size-5 *:pointer-events-none" />
 									</button>
-									<div class="inline-block my-3 w-[1px] self-stretch bg-gray-3" />
+									<div class="inline-block my-3 w-px self-stretch bg-gray-3" />
 									<button
 										title="Fill"
 										class="group flex items-center justify-center size-10 text-gray-11 hover:bg-gray-5 active:bg-gray-6 rounded-full transition-colors duration-200 cursor-default"
@@ -217,7 +217,7 @@ export default function CaptureArea() {
 									>
 										<IconLucideExpand class="group-active:scale-90 transition-transform size-5 *:pointer-events-none" />
 									</button>
-									<div class="inline-block my-3 w-[1px] self-stretch bg-gray-3" />
+									<div class="inline-block my-3 w-px self-stretch bg-gray-3" />
 									<button
 										title="Aspect Ratio"
 										class="group flex items-center justify-center size-10 text-gray-11 hover:bg-gray-5 active:bg-gray-6 rounded-full transition-colors duration-200 cursor-default"
@@ -230,7 +230,7 @@ export default function CaptureArea() {
 											</Show>
 											<Transition
 												enterClass="scale-50 opacity-0 blur-md"
-												enterActiveClass="duration-200 [transition-timing-function:cubic-bezier(0.215,0.61,0.355,1)]"
+												enterActiveClass="duration-200 ease-[cubic-bezier(0.215,0.61,0.355,1)]"
 												enterToClass="scale-100 opacity-100 blur-0"
 												exitClass="opacity-0"
 												exitActiveClass="duration-0"
diff --git a/apps/desktop/src/routes/debug.tsx b/apps/desktop/src/routes/debug.tsx
index 9598426a3f6..dcb1c4a2bce 100644
--- a/apps/desktop/src/routes/debug.tsx
+++ b/apps/desktop/src/routes/debug.tsx
@@ -57,17 +57,17 @@ export default function Debug() {
 	const orderedFails = () => Object.entries(fails.data ?? {});
 
 	return (
-		<main class="w-full h-full bg-gray-2 text-[--text-primary] p-4">
+		<main class="w-full h-full bg-gray-2 text-(--text-primary) p-4">
 			<h2 class="text-2xl font-bold">Debug Windows</h2>
 			<div class="p-2 mb-4">
 				<button
-					class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded"
+					class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-sm"
 					onClick={() => commands.showWindow("Onboarding")}
 				>
 					Show Onboarding Window
 				</button>
 				<button
-					class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded"
+					class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-sm"
 					onClick={() =>
 						commands.showWindow({ InProgressRecording: { countdown: 3 } })
 					}
@@ -78,25 +78,25 @@ export default function Debug() {
 
 			<h2 class="text-2xl font-bold mt-4">Updates</h2>
 			<div class="p-2 mb-4">
-				<p class="mb-2 text-sm text-[--text-secondary]">
+				<p class="mb-2 text-sm text-(--text-secondary)">
 					Current version: v{version()}
 				</p>
 				<div class="flex flex-row gap-2 items-center">
 					<button
-						class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded disabled:opacity-50"
+						class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-sm disabled:opacity-50"
 						onClick={checkForUpdates}
 						disabled={isChecking()}
 					>
 						Check for Updates
 					</button>
 					<button
-						class="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4 rounded"
+						class="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4 rounded-sm"
 						onClick={() => navigate("/update")}
 					>
 						Go to Update Page
 					</button>
 					<button
-						class="bg-purple-500 hover:bg-purple-600 text-white font-medium py-2 px-4 rounded disabled:opacity-50"
+						class="bg-purple-500 hover:bg-purple-600 text-white font-medium py-2 px-4 rounded-sm disabled:opacity-50"
 						onClick={simulateUpdatePopup}
 						disabled={isChecking()}
 					>
diff --git a/apps/desktop/src/routes/editor/AspectRatioSelect.tsx b/apps/desktop/src/routes/editor/AspectRatioSelect.tsx
index 92e2348eabe..fe558038c39 100644
--- a/apps/desktop/src/routes/editor/AspectRatioSelect.tsx
+++ b/apps/desktop/src/routes/editor/AspectRatioSelect.tsx
@@ -90,7 +90,7 @@ function AspectRatioSelect() {
 					>
 						<MenuItemList<typeof KSelect.Listbox>
 							as={KSelect.Listbox}
-							class="w-[12.5rem]"
+							class="w-50"
 						/>
 					</PopperContent>
 				</KSelect.Portal>
diff --git a/apps/desktop/src/routes/editor/CaptionsTab.tsx b/apps/desktop/src/routes/editor/CaptionsTab.tsx
index abe941bc0d2..5144abaa5a4 100644
--- a/apps/desktop/src/routes/editor/CaptionsTab.tsx
+++ b/apps/desktop/src/routes/editor/CaptionsTab.tsx
@@ -540,7 +540,7 @@ export function CaptionsTab(props: {
 										</span>
 									</Show>
 									<KSelect.Icon>
-										<IconCapChevronDown class="size-4 shrink-0 transform transition-transform ui-expanded:rotate-180" />
+										<IconCapChevronDown class="size-4 shrink-0 transform transition-transform data-expanded:rotate-180" />
 									</KSelect.Icon>
 								</KSelect.Trigger>
 								<KSelect.Portal>
@@ -597,7 +597,7 @@ export function CaptionsTab(props: {
 										}}
 									</KSelect.Value>
 									<KSelect.Icon>
-										<IconCapChevronDown class="size-4 shrink-0 transform transition-transform ui-expanded:rotate-180" />
+										<IconCapChevronDown class="size-4 shrink-0 transform transition-transform data-expanded:rotate-180" />
 									</KSelect.Icon>
 								</KSelect.Trigger>
 								<KSelect.Portal>
@@ -914,7 +914,7 @@ export function CaptionsTab(props: {
 									</MenuItem>
 								)}
 							>
-								<KSelect.Trigger class="flex w-full items-center justify-between rounded-md border border-gray-3 bg-gray-2 px-3 py-2 text-sm text-gray-12 transition-colors hover:border-gray-4 hover:bg-gray-3 focus:border-blue-9 focus:outline-none focus:ring-1 focus:ring-blue-9">
+								<KSelect.Trigger class="flex w-full items-center justify-between rounded-md border border-gray-3 bg-gray-2 px-3 py-2 text-sm text-gray-12 transition-colors hover:border-gray-4 hover:bg-gray-3 focus:border-blue-9 focus:outline-hidden focus:ring-1 focus:ring-blue-9">
 									<KSelect.Value<{
 										label: string;
 										value: number;
@@ -925,7 +925,7 @@ export function CaptionsTab(props: {
 										}
 									</KSelect.Value>
 									<KSelect.Icon>
-										<IconCapChevronDown class="size-4 shrink-0 transform transition-transform ui-expanded:rotate-180 text-[--gray-500]" />
+										<IconCapChevronDown class="size-4 shrink-0 transform transition-transform data-expanded:rotate-180 text-(--gray-500)" />
 									</KSelect.Icon>
 								</KSelect.Trigger>
 								<KSelect.Portal>
diff --git a/apps/desktop/src/routes/editor/ConfigSidebar.tsx b/apps/desktop/src/routes/editor/ConfigSidebar.tsx
index bcc9e619e9b..3bfb1fd7d88 100644
--- a/apps/desktop/src/routes/editor/ConfigSidebar.tsx
+++ b/apps/desktop/src/routes/editor/ConfigSidebar.tsx
@@ -407,9 +407,9 @@ export function ConfigSidebar() {
 	return (
 		<KTabs
 			value={editorState.timeline.selection ? undefined : state.selectedTab}
-			class="flex flex-col min-h-0 shrink-0 flex-1 max-w-[26rem] overflow-hidden rounded-xl z-10 bg-gray-1 dark:bg-gray-2 border border-gray-3"
+			class="flex flex-col min-h-0 shrink-0 flex-1 max-w-104 overflow-hidden rounded-xl z-10 bg-gray-1 dark:bg-gray-2 border border-gray-3"
 		>
-			<KTabs.List class="flex overflow-hidden sticky top-0 z-[60] flex-row items-center h-16 text-lg border-b border-gray-3 shrink-0 bg-gray-1 dark:bg-gray-2">
+			<KTabs.List class="flex overflow-hidden sticky top-0 z-60 flex-row items-center h-16 text-lg border-b border-gray-3 shrink-0 bg-gray-1 dark:bg-gray-2">
 				<For
 					each={[
 						{ id: TAB_IDS.background, icon: IconCapImage },
@@ -441,10 +441,10 @@ export function ConfigSidebar() {
 						<KTabs.Trigger
 							value={item.id}
 							class={cx(
-								"flex relative z-10 flex-1 justify-center items-center px-4 py-2 transition-colors group disabled:opacity-50 focus:outline-none",
+								"flex relative z-10 flex-1 justify-center items-center px-4 py-2 transition-colors group disabled:opacity-50 focus:outline-hidden",
 								editorState.timeline.selection
 									? "text-gray-11"
-									: "text-gray-11 ui-selected:text-gray-12",
+									: "text-gray-11 data-selected:text-gray-12",
 							)}
 							onClick={() => {
 								// Clear any active selection first
@@ -535,14 +535,14 @@ export function ConfigSidebar() {
 										<KSelect.Value<{
 											name: string;
 											value: StereoMode;
-										}> class="flex-1 text-sm text-left truncate text-[--gray-500] font-normal">
+										}> class="flex-1 text-sm text-left truncate text-(--gray-500) font-normal">
 											{(state) => <span>{state.selectedOption().name}</span>}
 										</KSelect.Value>
 										<KSelect.Icon<ValidComponent>
 											as={(props) => (
 												<IconCapChevronDown
 													{...props}
-													class="size-4 shrink-0 transform transition-transform ui-expanded:rotate-180 text-[--gray-500]"
+													class="size-4 shrink-0 transform transition-transform data-expanded:rotate-180 text-(--gray-500)"
 												/>
 											)}
 										/>
@@ -639,11 +639,11 @@ export function ConfigSidebar() {
 								{CURSOR_TYPE_OPTIONS.map((option) => (
 									<RadioGroup.Item
 										value={option.value}
-										class="rounded-lg border border-gray-3 transition-colors ui-checked:border-blue-8 ui-checked:bg-blue-3/40"
+										class="rounded-lg border border-gray-3 transition-colors data-checked:border-blue-8 data-checked:bg-blue-3/40"
 									>
 										<RadioGroup.ItemInput class="sr-only" />
 										<RadioGroup.ItemLabel class="flex cursor-pointer items-start gap-3 p-3">
-											<RadioGroup.ItemControl class="mt-1 size-4 rounded-full border border-gray-7 ui-checked:border-blue-9 ui-checked:bg-blue-9" />
+											<RadioGroup.ItemControl class="mt-1 size-4 rounded-full border border-gray-7 data-checked:border-blue-9 data-checked:bg-blue-9" />
 											<div class="flex flex-col text-left">
 												<span class="text-sm font-medium text-gray-12">
 													{option.label}
@@ -723,11 +723,11 @@ export function ConfigSidebar() {
 								{CURSOR_ANIMATION_STYLE_OPTIONS.map((option) => (
 									<RadioGroup.Item
 										value={option.value}
-										class="rounded-lg border border-gray-3 transition-colors ui-checked:border-blue-8 ui-checked:bg-blue-3/40"
+										class="rounded-lg border border-gray-3 transition-colors data-checked:border-blue-8 data-checked:bg-blue-3/40"
 									>
 										<RadioGroup.ItemInput class="sr-only" />
 										<RadioGroup.ItemLabel class="flex cursor-pointer items-start gap-3 p-3">
-											<RadioGroup.ItemControl class="mt-1 size-4 rounded-full border border-gray-7 ui-checked:border-blue-9 ui-checked:bg-blue-9" />
+											<RadioGroup.ItemControl class="mt-1 size-4 rounded-full border border-gray-7 data-checked:border-blue-9 data-checked:bg-blue-9" />
 											<div class="flex flex-col text-left">
 												<span class="text-sm font-medium text-gray-12">
 													{option.label}
@@ -754,7 +754,7 @@ export function ConfigSidebar() {
 									/>
 								}
 							/>
-							<KCollapsible.Content class="overflow-hidden border-b opacity-0 transition-opacity border-gray-3 animate-collapsible-up ui-expanded:animate-collapsible-down ui-expanded:opacity-100">
+							<KCollapsible.Content class="overflow-hidden border-b opacity-0 transition-opacity border-gray-3 animate-collapsible-up data-expanded:animate-collapsible-down data-expanded:opacity-100">
 								{/* if Content has padding or margin the animation doesn't look as good */}
 								<div class="flex flex-col gap-4 pt-4 pb-6">
 									<Field name="Tension">
@@ -1660,12 +1660,12 @@ function BackgroundConfig(props: {
 						}
 					}}
 				>
-					<KTabs.List class="flex flex-row gap-2 items-center rounded-[0.5rem] relative">
+					<KTabs.List class="flex flex-row gap-2 items-center rounded-lg relative">
 						<For each={BACKGROUND_SOURCES_LIST}>
 							{(item) => {
 								const el = (props?: object) => (
 									<KTabs.Trigger
-										class="z-10 flex-1 py-2.5 px-2 text-xs text-gray-11  ui-selected:border-gray-3 ui-selected:bg-gray-3 ui-not-selected:hover:border-gray-7 rounded-[10px] transition-colors duration-200 outline-none border ui-selected:text-gray-12 peer"
+										class="z-10 flex-1 py-2.5 px-2 text-xs text-gray-11  data-selected:border-gray-3 data-selected:bg-gray-3 not-data-selected:hover:border-gray-7 rounded-[10px] transition-colors duration-200 outline-hidden border data-selected:text-gray-12 peer"
 										value={item}
 										{...props}
 									>
@@ -1687,7 +1687,7 @@ function BackgroundConfig(props: {
 
 													return (
 														<div
-															class="size-3.5 rounded"
+															class="size-3.5 rounded-sm"
 															style={{
 																background: `linear-gradient(${angle}deg, rgb(${fromColor}), rgb(${toColor}))`,
 															}}
@@ -1750,7 +1750,7 @@ function BackgroundConfig(props: {
 														<img
 															loading="eager"
 															alt={BACKGROUND_SOURCES[item]}
-															class="size-3.5 rounded"
+															class="size-3.5 rounded-sm"
 															src={imageSrc}
 														/>
 													);
@@ -1809,7 +1809,7 @@ function BackgroundConfig(props: {
 													)
 												}
 												value={key}
-												class="flex relative z-10 flex-1 justify-center items-center px-4 py-2 bg-transparent rounded-lg border transition-colors duration-200 text-gray-11 ui-not-selected:hover:border-gray-7 ui-selected:bg-gray-3 ui-selected:border-gray-3 group ui-selected:text-gray-12 disabled:opacity-50 focus:outline-none"
+												class="flex relative z-10 flex-1 justify-center items-center px-4 py-2 bg-transparent rounded-lg border transition-colors duration-200 text-gray-11 not-data-selected:hover:border-gray-7 data-selected:bg-gray-3 data-selected:border-gray-3 group data-selected:text-gray-12 disabled:opacity-50 focus:outline-hidden"
 											>
 												{value}
 											</KTabs.Trigger>
@@ -1865,7 +1865,7 @@ function BackgroundConfig(props: {
 											class="relative aspect-square group"
 										>
 											<KRadioGroup.ItemInput class="peer" />
-											<KRadioGroup.ItemControl class="overflow-hidden w-full h-full rounded-lg transition cursor-pointer ui-not-checked:ring-offset-1 ui-not-checked:ring-offset-gray-200 ui-not-checked:hover:ring-1 ui-not-checked:hover:ring-gray-400 ui-checked:ring-2 ui-checked:ring-gray-500 ui-checked:ring-offset-2 ui-checked:ring-offset-gray-200">
+											<KRadioGroup.ItemControl class="overflow-hidden w-full h-full rounded-lg transition cursor-pointer not-data-checked:ring-offset-1 not-data-checked:ring-offset-gray-200 not-data-checked:hover:ring-1 not-data-checked:hover:ring-gray-400 data-checked:ring-2 data-checked:ring-gray-500 data-checked:ring-offset-2 data-checked:ring-offset-gray-200">
 												<img
 													src={photo.url}
 													loading="eager"
@@ -1886,7 +1886,7 @@ function BackgroundConfig(props: {
 														class="relative aspect-square group"
 													>
 														<KRadioGroup.ItemInput class="peer" />
-														<KRadioGroup.ItemControl class="overflow-hidden w-full h-full rounded-lg border cursor-pointer border-gray-5 ui-checked:border-blue-9 ui-checked:ring-2 ui-checked:ring-blue-9 peer-focus-visible:border-2 peer-focus-visible:border-blue-9">
+														<KRadioGroup.ItemControl class="overflow-hidden w-full h-full rounded-lg border cursor-pointer border-gray-5 data-checked:border-blue-9 data-checked:ring-2 data-checked:ring-blue-9 peer-focus-visible:border-2 peer-focus-visible:border-blue-9">
 															<img
 																src={photo.url}
 																alt="Wallpaper option"
@@ -1913,7 +1913,7 @@ function BackgroundConfig(props: {
 								<button
 									type="button"
 									onClick={() => fileInput.click()}
-									class="p-6 bg-gray-2 text-[13px] w-full rounded-[0.5rem] border border-gray-5 border-dashed flex flex-col items-center justify-center gap-[0.5rem] hover:bg-gray-3 transition-colors duration-100"
+									class="p-6 bg-gray-2 text-[13px] w-full rounded-lg border border-gray-5 border-dashed flex flex-col items-center justify-center gap-2 hover:bg-gray-3 transition-colors duration-100"
 								>
 									<IconCapImage class="text-gray-11 size-6" />
 									<span class="text-gray-12">
@@ -1956,9 +1956,9 @@ function BackgroundConfig(props: {
 								if (!file) return;
 
 								/*
-                    this is a Tauri bug in WebKit so we need to validate the file type manually
-                    https://github.com/tauri-apps/tauri/issues/9158
-                    */
+					this is a Tauri bug in WebKit so we need to validate the file type manually
+					https://github.com/tauri-apps/tauri/issues/9158
+					*/
 								const validExtensions = [
 									"jpg",
 									"jpeg",
@@ -2051,7 +2051,7 @@ function BackgroundConfig(props: {
 													}}
 												/>
 												<div
-													class="rounded-lg transition-all duration-200 cursor-pointer size-8 peer-checked:hover:opacity-100 peer-hover:opacity-70 peer-checked:ring-2 peer-checked:ring-gray-500 peer-checked:ring-offset-2 peer-checked:ring-offset-gray-200"
+													class="rounded-lg transition-all duration-200 cursor-pointer size-8 hover:peer-checked:opacity-100 peer-hover:opacity-70 peer-checked:ring-2 peer-checked:ring-gray-500 peer-checked:ring-offset-2 peer-checked:ring-offset-gray-200"
 													style={{
 														background:
 															color === "#00000000"
@@ -2170,7 +2170,7 @@ function BackgroundConfig(props: {
 				}
 			/>
 			<KCollapsible open={project.background.border?.enabled ?? false}>
-				<KCollapsible.Content class="overflow-hidden opacity-0 transition-opacity animate-collapsible-up ui-expanded:animate-collapsible-down ui-expanded:opacity-100">
+				<KCollapsible.Content class="overflow-hidden opacity-0 transition-opacity animate-collapsible-up data-expanded:animate-collapsible-down data-expanded:opacity-100">
 					<div class="flex flex-col gap-6 pb-6">
 						<Field name="Border Width" icon={<IconCapEnlarge class="size-4" />}>
 							<Slider
@@ -2348,7 +2348,7 @@ function CameraConfig(props: { scrollRef: HTMLDivElement }) {
 									y: yPosition,
 								});
 							}}
-							class="mt-[0.75rem] rounded-[0.5rem] border border-gray-3 bg-gray-2 w-full h-[7.5rem] relative"
+							class="mt-3 rounded-lg border border-gray-3 bg-gray-2 w-full h-30 relative"
 						>
 							<For
 								each={[
@@ -2365,7 +2365,7 @@ function CameraConfig(props: { scrollRef: HTMLDivElement }) {
 										<RadioGroup.ItemInput class="peer" />
 										<RadioGroup.ItemControl
 											class={cx(
-												"cursor-pointer size-6 shrink-0 rounded-[0.375rem] bg-gray-5 absolute flex justify-center items-center ui-checked:bg-blue-9 focus-visible:outline peer-focus-visible:outline outline-2 outline-blue-9 outline-offset-2 transition-colors duration-100",
+												"cursor-pointer size-6 shrink-0 rounded-md bg-gray-5 absolute flex justify-center items-center data-checked:bg-blue-9 focus-visible:outline-solid peer-focus-visible:outline-solid outline-2 outline-blue-9 outline-offset-2 transition-colors duration-100",
 												item.x === "left"
 													? "left-2"
 													: item.x === "right"
@@ -2374,7 +2374,7 @@ function CameraConfig(props: { scrollRef: HTMLDivElement }) {
 												item.y === "top" ? "top-2" : "bottom-2",
 											)}
 										>
-											<div class="size-[0.5rem] shrink-0 bg-solid-white rounded-full" />
+											<div class="size-2 shrink-0 bg-solid-white rounded-full" />
 										</RadioGroup.ItemControl>
 									</RadioGroup.Item>
 								)}
@@ -2436,14 +2436,14 @@ function CameraConfig(props: { scrollRef: HTMLDivElement }) {
 								<KSelect.Value<{
 									name: string;
 									value: string;
-								}> class="flex-1 text-sm text-left truncate text-[--gray-500] font-normal">
+								}> class="flex-1 text-sm text-left truncate text-(--gray-500) font-normal">
 									{(state) => <span>{state.selectedOption().name}</span>}
 								</KSelect.Value>
 								<KSelect.Icon<ValidComponent>
 									as={(iconProps) => (
 										<IconCapChevronDown
 											{...iconProps}
-											class="size-4 shrink-0 transform transition-transform ui-expanded:rotate-180 text-[--gray-500]"
+											class="size-4 shrink-0 transform transition-transform data-expanded:rotate-180 text-(--gray-500)"
 										/>
 									)}
 								/>
@@ -2488,14 +2488,14 @@ function CameraConfig(props: { scrollRef: HTMLDivElement }) {
 								<KSelect.Value<{
 									name: string;
 									value: StereoMode;
-								}> class="flex-1 text-sm text-left truncate text-[--gray-500] font-normal">
+								}> class="flex-1 text-sm text-left truncate text-(--gray-500) font-normal">
 									{(state) => <span>{state.selectedOption().name}</span>}
 								</KSelect.Value>
 								<KSelect.Icon<ValidComponent>
 									as={(props) => (
 										<IconCapChevronDown
 											{...props}
-											class="size-4 shrink-0 transform transition-transform ui-expanded:rotate-180 text-[--gray-500]"
+											class="size-4 shrink-0 transform transition-transform data-expanded:rotate-180 text-(--gray-500)"
 										/>
 									)}
 								/>
@@ -2668,14 +2668,14 @@ function CornerStyleSelect(props: {
 					<KSelect.Value<{
 						name: string;
 						value: CornerRoundingType;
-					}> class="flex-1 text-sm text-left truncate text-[--gray-500] font-normal">
+					}> class="flex-1 text-sm text-left truncate text-(--gray-500) font-normal">
 						{(state) => <span>{state.selectedOption().name}</span>}
 					</KSelect.Value>
 					<KSelect.Icon<ValidComponent>
 						as={(iconProps) => (
 							<IconCapChevronDown
 								{...iconProps}
-								class="size-4 shrink-0 transform transition-transform ui-expanded:rotate-180 text-[--gray-500]"
+								class="size-4 shrink-0 transform transition-transform data-expanded:rotate-180 text-(--gray-500)"
 							/>
 						)}
 					/>
@@ -2877,7 +2877,7 @@ function TextSegmentConfig(props: {
 							</MenuItem>
 						)}
 					>
-						<KSelect.Trigger class="flex w-full items-center justify-between rounded-md border border-gray-3 bg-gray-2 px-3 py-2 text-sm text-gray-12 transition-colors hover:border-gray-4 hover:bg-gray-3 focus:border-blue-9 focus:outline-none focus:ring-1 focus:ring-blue-9">
+						<KSelect.Trigger class="flex w-full items-center justify-between rounded-md border border-gray-3 bg-gray-2 px-3 py-2 text-sm text-gray-12 transition-colors hover:border-gray-4 hover:bg-gray-3 focus:border-blue-9 focus:outline-hidden focus:ring-1 focus:ring-blue-9">
 							<KSelect.Value<{ label: string; value: number }> class="truncate">
 								{(state) => {
 									const selected = state.selectedOption();
@@ -2894,7 +2894,7 @@ function TextSegmentConfig(props: {
 								}}
 							</KSelect.Value>
 							<KSelect.Icon>
-								<IconCapChevronDown class="size-4 shrink-0 transform transition-transform ui-expanded:rotate-180 text-[--gray-500]" />
+								<IconCapChevronDown class="size-4 shrink-0 transform transition-transform data-expanded:rotate-180 text-(--gray-500)" />
 							</KSelect.Icon>
 						</KSelect.Trigger>
 						<KSelect.Portal>
@@ -3251,11 +3251,11 @@ function MaskSegmentConfig(props: {
 						].map((option) => (
 							<RadioGroup.Item
 								value={option.value}
-								class="rounded-lg border border-gray-3 transition-colors ui-checked:border-blue-8 ui-checked:bg-blue-3/40"
+								class="rounded-lg border border-gray-3 transition-colors data-checked:border-blue-8 data-checked:bg-blue-3/40"
 							>
 								<RadioGroup.ItemInput class="sr-only" />
 								<RadioGroup.ItemLabel class="flex cursor-pointer items-center gap-2 p-2 text-sm text-gray-12">
-									<RadioGroup.ItemControl class="size-4 rounded-full border border-gray-7 ui-checked:border-blue-9 ui-checked:bg-blue-9" />
+									<RadioGroup.ItemControl class="size-4 rounded-full border border-gray-7 data-checked:border-blue-9 data-checked:bg-blue-9" />
 									{option.label}
 								</RadioGroup.ItemLabel>
 							</RadioGroup.Item>
@@ -3431,7 +3431,7 @@ function ZoomSegmentPreview(props: {
 				<div class="text-xs font-medium text-center text-gray-12">
 					Zoom {props.segmentIndex + 1}
 				</div>
-				<div class="overflow-hidden relative rounded border aspect-video border-gray-3 bg-gray-3">
+				<div class="overflow-hidden relative rounded-sm border aspect-video border-gray-3 bg-gray-3">
 					<canvas
 						ref={canvasRef}
 						width={160}
@@ -3506,21 +3506,21 @@ function ZoomSegmentConfig(props: {
 						);
 					}}
 				>
-					<KTabs.List class="flex flex-row items-center rounded-[0.5rem] relative border">
+					<KTabs.List class="flex flex-row items-center rounded-lg relative border">
 						<KTabs.Trigger
 							value="auto"
-							class="z-10 flex-1 py-2.5 text-gray-11 transition-colors duration-100 outline-none ui-selected:text-gray-12 peer"
+							class="z-10 flex-1 py-2.5 text-gray-11 transition-colors duration-100 outline-hidden data-selected:text-gray-12 peer"
 							disabled={!generalSettings.data?.custom_cursor_capture2}
 						>
 							Auto
 						</KTabs.Trigger>
 						<KTabs.Trigger
 							value="manual"
-							class="z-10 flex-1 py-2.5 text-gray-11 transition-colors duration-100 outline-none ui-selected:text-gray-12 peer"
+							class="z-10 flex-1 py-2.5 text-gray-11 transition-colors duration-100 outline-hidden data-selected:text-gray-12 peer"
 						>
 							Manual
 						</KTabs.Trigger>
-						<KTabs.Indicator class="absolute flex p-px inset-0 transition-transform peer-focus-visible:outline outline-2 outline-blue-9 outline-offset-2 rounded-[0.6rem] overflow-hidden">
+						<KTabs.Indicator class="absolute flex p-px inset-0 transition-transform peer-focus-visible:outline-solid outline-2 outline-blue-9 outline-offset-2 rounded-[0.6rem] overflow-hidden">
 							<div class="flex-1 bg-gray-3" />
 						</KTabs.Indicator>
 					</KTabs.List>
@@ -3837,7 +3837,7 @@ function ClipSegmentConfig(props: {
 					<For each={[0.25, 0.5, 1, 1.5, 2, 4, 8]}>
 						{(mult) => (
 							<KRadioGroup.Item value={mult.toString()}>
-								<KRadioGroup.ItemControl class="px-2 py-1 text-gray-11 hover:text-gray-12 bg-gray-1 border border-gray-3 rounded-md ui-checked:bg-gray-3 ui-checked:border-gray-4 ui-checked:text-gray-12">
+								<KRadioGroup.ItemControl class="px-2 py-1 text-gray-11 hover:text-gray-12 bg-gray-1 border border-gray-3 rounded-md data-checked:bg-gray-3 data-checked:border-gray-4 data-checked:text-gray-12">
 									{mult}x
 								</KRadioGroup.ItemControl>
 							</KRadioGroup.Item>
@@ -3924,7 +3924,7 @@ function SourceOffsetField(props: {
 									props.onChange(0);
 								}
 							}}
-							class="w-[5rem] p-[0.375rem] border rounded-[0.5rem] bg-gray-1 focus-visible:outline-none"
+							class="w-20 p-1.5 border rounded-lg bg-gray-1 focus-visible:outline-hidden"
 						/>
 					</NumberField.Root>
 					<span class="text-gray-11">ms</span>
@@ -3938,7 +3938,7 @@ function SourceOffsetField(props: {
 								props.onChange(currentValue);
 								setValue(currentValue.toString());
 							}}
-							class="text-gray-11 hover:text-gray-12 text-xs px-1 py-0.5 bg-gray-1 border border-gray-3 rounded"
+							class="text-gray-11 hover:text-gray-12 text-xs px-1 py-0.5 bg-gray-1 border border-gray-3 rounded-sm"
 						>
 							{Math.sign(v) > 0 ? "+" : "-"}
 							{Math.abs(v)}ms
@@ -3992,26 +3992,26 @@ function SceneSegmentConfig(props: {
 					}}
 				>
 					<KTabs.List class="flex flex-col gap-3">
-						<div class="flex flex-row items-center rounded-[0.5rem] relative border">
+						<div class="flex flex-row items-center rounded-lg relative border">
 							<KTabs.Trigger
 								value="default"
-								class="z-10 flex-1 py-2.5 text-gray-11 transition-colors duration-100 outline-none ui-selected:text-gray-12 peer"
+								class="z-10 flex-1 py-2.5 text-gray-11 transition-colors duration-100 outline-hidden data-selected:text-gray-12 peer"
 							>
 								Default
 							</KTabs.Trigger>
 							<KTabs.Trigger
 								value="cameraOnly"
-								class="z-10 flex-1 py-2.5 text-gray-11 transition-colors duration-100 outline-none ui-selected:text-gray-12 peer"
+								class="z-10 flex-1 py-2.5 text-gray-11 transition-colors duration-100 outline-hidden data-selected:text-gray-12 peer"
 							>
 								Camera Only
 							</KTabs.Trigger>
 							<KTabs.Trigger
 								value="hideCamera"
-								class="z-10 flex-1 py-2.5 text-gray-11 transition-colors duration-100 outline-none ui-selected:text-gray-12 peer"
+								class="z-10 flex-1 py-2.5 text-gray-11 transition-colors duration-100 outline-hidden data-selected:text-gray-12 peer"
 							>
 								Hide Camera
 							</KTabs.Trigger>
-							<KTabs.Indicator class="absolute flex p-px inset-0 transition-transform peer-focus-visible:outline outline-2 outline-blue-9 outline-offset-2 rounded-[0.6rem] overflow-hidden">
+							<KTabs.Indicator class="absolute flex p-px inset-0 transition-transform peer-focus-visible:outline-solid outline-2 outline-blue-9 outline-offset-2 rounded-[0.6rem] overflow-hidden">
 								<div class="flex-1 bg-gray-3" />
 							</KTabs.Indicator>
 						</div>
diff --git a/apps/desktop/src/routes/editor/Editor.tsx b/apps/desktop/src/routes/editor/Editor.tsx
index 59927c4456f..15373fe6e61 100644
--- a/apps/desktop/src/routes/editor/Editor.tsx
+++ b/apps/desktop/src/routes/editor/Editor.tsx
@@ -571,7 +571,7 @@ function Inner() {
 								</div>
 							</div>
 							<Show when={!isTranscriptMode()}>
-								<div class="ml-2 flex min-h-0 w-[26rem] min-w-[26rem] flex-none overflow-hidden">
+								<div class="ml-2 flex min-h-0 w-104 min-w-104 flex-none overflow-hidden">
 									<ConfigSidebar />
 								</div>
 							</Show>
@@ -1024,7 +1024,7 @@ function Dialogs() {
 											format={false}
 										>
 											<NumberField.Input
-												class="rounded-[0.5rem] bg-gray-2 hover:ring-1 py-[18px] hover:ring-gray-5 h-[2rem] font-normal placeholder:text-black-transparent-40 text-xs caret-gray-500 transition-shadow duration-200 focus:ring-offset-1 focus:bg-gray-3 focus:ring-offset-gray-100 focus:ring-1 focus:ring-gray-10 px-[0.5rem] w-full text-[0.875rem] outline-none text-gray-12"
+												class="rounded-lg bg-gray-2 hover:ring-1 py-[18px] hover:ring-gray-5 h-8 font-normal placeholder:text-black-transparent-40 text-xs caret-gray-500 transition-shadow duration-200 focus:ring-offset-1 focus:bg-gray-3 focus:ring-offset-gray-100 focus:ring-1 focus:ring-gray-10 px-2 w-full text-[0.875rem] outline-hidden text-gray-12"
 												onKeyDown={composeEventHandlers<HTMLInputElement>([
 													(e) => e.stopPropagation(),
 												])}
@@ -1036,35 +1036,35 @@ function Dialogs() {
 								return (
 									<>
 										<Dialog.Header>
-											<div class="flex flex-row space-x-[2rem]">
-												<div class="flex flex-row items-center space-x-[0.75rem] text-gray-11">
+											<div class="flex flex-row space-x-8">
+												<div class="flex flex-row items-center space-x-3 text-gray-11">
 													<span>Size</span>
-													<div class="w-[3.25rem]">
+													<div class="w-13">
 														<BoundInput field="width" max={display.width} />
 													</div>
 													<span>×</span>
-													<div class="w-[3.25rem]">
+													<div class="w-13">
 														<BoundInput field="height" max={display.height} />
 													</div>
 												</div>
-												<div class="flex flex-row items-center space-x-[0.75rem] text-gray-11">
+												<div class="flex flex-row items-center space-x-3 text-gray-11">
 													<span>Position</span>
-													<div class="w-[3.25rem]">
+													<div class="w-13">
 														<BoundInput field="x" />
 													</div>
 													<span>×</span>
-													<div class="w-[3.25rem]">
+													<div class="w-13">
 														<BoundInput field="y" />
 													</div>
 												</div>
 											</div>
 											<div class="flex flex-row gap-3 justify-end items-center w-full">
-												<div class="flex flex-row items-center space-x-[0.5rem] text-gray-11"></div>
+												<div class="flex flex-row items-center space-x-2 text-gray-11"></div>
 
 												<Button
 													variant="white"
 													size="xs"
-													class="flex items-center justify-center text-center rounded-full h-[2rem] w-[2rem] border focus:border-blue-9"
+													class="flex items-center justify-center text-center rounded-full h-8 w-8 border focus:border-blue-9"
 													onClick={showCropOptionsMenu}
 												>
 													<div class="relative pointer-events-none size-4">
@@ -1073,7 +1073,7 @@ function Dialogs() {
 														</Show>
 														<Transition
 															enterClass="scale-50 opacity-0 blur-md"
-															enterActiveClass="duration-200 [transition-timing-function:cubic-bezier(0.215,0.61,0.355,1)]"
+															enterActiveClass="duration-200 ease-[cubic-bezier(0.215,0.61,0.355,1)]"
 															enterToClass="scale-100 opacity-100 blur-0"
 															exitClass="opacity-0"
 															exitActiveClass="duration-0"
@@ -1119,7 +1119,7 @@ function Dialogs() {
 										</Dialog.Header>
 										<Dialog.Content>
 											<div class="flex flex-row justify-center">
-												<div class="rounded divide-black-transparent-10">
+												<div class="rounded-sm divide-black-transparent-10">
 													<Cropper
 														ref={cropperRef}
 														onCropChange={setCrop}
@@ -1132,7 +1132,7 @@ function Dialogs() {
 														onContextMenu={(e) => showCropOptionsMenu(e, true)}
 													>
 														<img
-															class="shadow pointer-events-none max-h-[70vh]"
+															class="shadow-sm pointer-events-none max-h-[70vh]"
 															alt="Current frame"
 															onError={() => {
 																const failedSource = frameSource();
diff --git a/apps/desktop/src/routes/editor/EditorErrorScreen.tsx b/apps/desktop/src/routes/editor/EditorErrorScreen.tsx
index 04505a8b27b..197891c257d 100644
--- a/apps/desktop/src/routes/editor/EditorErrorScreen.tsx
+++ b/apps/desktop/src/routes/editor/EditorErrorScreen.tsx
@@ -44,7 +44,7 @@ export function EditorErrorScreen(props: {
 				data-tauri-drag-region
 				class="flex relative flex-row items-center w-full h-14 px-4"
 			>
-				{isMac() && <div class="h-full w-[4rem]" />}
+				{isMac() && <div class="h-full w-16" />}
 				<div data-tauri-drag-region class="flex-1 h-full" />
 				{ostype() === "windows" && <CaptionControlsWindows11 />}
 			</div>
diff --git a/apps/desktop/src/routes/editor/ExportPage.tsx b/apps/desktop/src/routes/editor/ExportPage.tsx
index 6023d5e836c..e21c74b5efe 100644
--- a/apps/desktop/src/routes/editor/ExportPage.tsx
+++ b/apps/desktop/src/routes/editor/ExportPage.tsx
@@ -750,7 +750,7 @@ export function ExportPage() {
 						ostype() !== "windows" && "pr-2",
 					)}
 				>
-					{ostype() === "macos" && <div class="h-full w-[4rem]" />}
+					{ostype() === "macos" && <div class="h-full w-16" />}
 					<Button
 						variant="gray"
 						onClick={handleBack}
@@ -791,7 +791,7 @@ export function ExportPage() {
 										}
 									>
 										<div class="absolute inset-4 rounded-lg bg-gray-4 overflow-hidden">
-											<div class="absolute inset-y-0 w-full animate-shimmer bg-gradient-to-r from-transparent from-30% via-gray-6 via-50% to-transparent to-70%" />
+											<div class="absolute inset-y-0 w-full animate-shimmer bg-linear-to-r from-transparent from-30% via-gray-6 via-50% to-transparent to-70%" />
 										</div>
 									</Show>
 								</div>
@@ -806,7 +806,7 @@ export function ExportPage() {
 									/>
 									<Show when={previewLoading()}>
 										<div class="absolute inset-0 z-50 overflow-hidden pointer-events-none">
-											<div class="absolute inset-y-0 w-full animate-shimmer bg-gradient-to-r from-transparent from-30% via-white/60 via-50% to-transparent to-70%" />
+											<div class="absolute inset-y-0 w-full animate-shimmer bg-linear-to-r from-transparent from-30% via-white/60 via-50% to-transparent to-70%" />
 										</div>
 									</Show>
 									<button
@@ -829,19 +829,19 @@ export function ExportPage() {
 							<div class="flex items-center justify-center gap-4 mt-4 h-4 text-xs text-gray-11">
 								<span class="flex items-center gap-1.5">
 									<IconLucideClock class="size-3.5" />
-									<span class="h-3.5 w-10 bg-gray-4 rounded animate-pulse" />
+									<span class="h-3.5 w-10 bg-gray-4 rounded-sm animate-pulse" />
 								</span>
 								<span class="flex items-center gap-1.5">
 									<IconLucideMonitor class="size-3.5" />
-									<span class="h-3.5 w-20 bg-gray-4 rounded animate-pulse" />
+									<span class="h-3.5 w-20 bg-gray-4 rounded-sm animate-pulse" />
 								</span>
 								<span class="flex items-center gap-1.5">
 									<IconLucideHardDrive class="size-3.5" />
-									<span class="h-3.5 w-16 bg-gray-4 rounded animate-pulse" />
+									<span class="h-3.5 w-16 bg-gray-4 rounded-sm animate-pulse" />
 								</span>
 								<span class="flex items-center gap-1.5">
 									<IconLucideZap class="size-3.5" />
-									<span class="h-3.5 w-12 bg-gray-4 rounded animate-pulse" />
+									<span class="h-3.5 w-12 bg-gray-4 rounded-sm animate-pulse" />
 								</span>
 							</div>
 						}
@@ -1186,7 +1186,7 @@ export function ExportPage() {
 								>
 									<div
 										class={cx(
-											"w-8 h-4 rounded-full transition-colors relative flex-shrink-0",
+											"w-8 h-4 rounded-full transition-colors relative shrink-0",
 											settings.optimizeFilesize ? "bg-blue-9" : "bg-gray-5",
 										)}
 									>
@@ -1243,7 +1243,7 @@ export function ExportPage() {
 									>
 										<div
 											class={cx(
-												"w-8 h-4 rounded-full transition-colors relative flex-shrink-0",
+												"w-8 h-4 rounded-full transition-colors relative shrink-0",
 												cursorOnly() ? "bg-blue-9" : "bg-gray-5",
 											)}
 										>
@@ -1266,7 +1266,7 @@ export function ExportPage() {
 									<Show when={cursorOnly()}>
 										<div class="rounded-lg border border-amber-6 bg-amber-3/30 px-3 py-2.5">
 											<div class="flex items-start gap-2">
-												<IconLucideAlertTriangle class="mt-0.5 size-4 flex-shrink-0 text-amber-11" />
+												<IconLucideAlertTriangle class="mt-0.5 size-4 shrink-0 text-amber-11" />
 												<div class="text-left">
 													<p class="text-xs font-medium text-amber-11">
 														Warning
@@ -1333,7 +1333,7 @@ export function ExportPage() {
 													>
 														<div
 															class={cx(
-																"w-8 h-4 rounded-full transition-colors relative flex-shrink-0",
+																"w-8 h-4 rounded-full transition-colors relative shrink-0",
 																forceFfmpegDecoder()
 																	? "bg-blue-9"
 																	: "bg-gray-5",
@@ -1485,7 +1485,7 @@ export function ExportPage() {
 
 					return (
 						<div
-							class="absolute inset-0 z-50 flex flex-col items-center justify-center p-6 text-gray-12 backdrop-blur-sm"
+							class="absolute inset-0 z-50 flex flex-col items-center justify-center p-6 text-gray-12 backdrop-blur-xs"
 							style={{
 								"background-color":
 									"color-mix(in srgb, var(--gray-1) 85%, transparent)",
diff --git a/apps/desktop/src/routes/editor/Header.tsx b/apps/desktop/src/routes/editor/Header.tsx
index c314b2dc642..c2e0a05b67b 100644
--- a/apps/desktop/src/routes/editor/Header.tsx
+++ b/apps/desktop/src/routes/editor/Header.tsx
@@ -267,7 +267,7 @@ export function Header() {
 				data-tauri-drag-region
 				class={cx("flex flex-row flex-1 gap-2 items-center px-4 h-full")}
 			>
-				{ostype() === "macos" && <div class="h-full w-[4rem]" />}
+				{ostype() === "macos" && <div class="h-full w-16" />}
 				<EditorButton
 					onClick={async () => {
 						clearTimelineSelection();
@@ -689,7 +689,7 @@ function NameEditor(props: { name: string }) {
 				<input
 					ref={prettyNameRef}
 					class={cx(
-						"absolute inset-0 px-px m-0 opacity-0 overflow-hidden focus:opacity-100 bg-transparent border-b border-transparent focus:border-gray-7 focus:outline-none peer whitespace-pre",
+						"absolute inset-0 px-px m-0 opacity-0 overflow-hidden focus:opacity-100 bg-transparent border-b border-transparent focus:border-gray-7 focus:outline-hidden peer whitespace-pre",
 						truncated() && "truncate",
 						(prettyName().length < 5 || prettyName().length > 100) &&
 							"focus:border-red-500",
diff --git a/apps/desktop/src/routes/editor/KeyboardTab.tsx b/apps/desktop/src/routes/editor/KeyboardTab.tsx
index 00dd0ad2950..5b5af46feac 100644
--- a/apps/desktop/src/routes/editor/KeyboardTab.tsx
+++ b/apps/desktop/src/routes/editor/KeyboardTab.tsx
@@ -315,7 +315,7 @@ export function KeyboardTab(props: {
 								</MenuItem>
 							)}
 						>
-							<KSelect.Trigger class="flex w-full items-center justify-between rounded-md border border-gray-3 bg-gray-2 px-3 py-2 text-sm text-gray-12 transition-colors hover:border-gray-4 hover:bg-gray-3 focus:border-blue-9 focus:outline-none focus:ring-1 focus:ring-blue-9">
+							<KSelect.Trigger class="flex w-full items-center justify-between rounded-md border border-gray-3 bg-gray-2 px-3 py-2 text-sm text-gray-12 transition-colors hover:border-gray-4 hover:bg-gray-3 focus:border-blue-9 focus:outline-hidden focus:ring-1 focus:ring-blue-9">
 								<KSelect.Value<{
 									label: string;
 									value: number;
@@ -326,7 +326,7 @@ export function KeyboardTab(props: {
 									}
 								</KSelect.Value>
 								<KSelect.Icon>
-									<IconCapChevronDown class="size-4 shrink-0 transform transition-transform ui-expanded:rotate-180 text-[--gray-500]" />
+									<IconCapChevronDown class="size-4 shrink-0 transform transition-transform data-expanded:rotate-180 text-(--gray-500)" />
 								</KSelect.Icon>
 							</KSelect.Trigger>
 							<KSelect.Portal>
diff --git a/apps/desktop/src/routes/editor/MaskOverlay.tsx b/apps/desktop/src/routes/editor/MaskOverlay.tsx
index 8778ebb81a0..db61f67965f 100644
--- a/apps/desktop/src/routes/editor/MaskOverlay.tsx
+++ b/apps/desktop/src/routes/editor/MaskOverlay.tsx
@@ -351,7 +351,7 @@ function ResizeHandle(props: {
 	return (
 		<div
 			class={cx(
-				"absolute w-3 h-3 bg-gray-12 border border-white rounded-full shadow-sm transition-transform hover:scale-125",
+				"absolute w-3 h-3 bg-gray-12 border border-white rounded-full shadow-xs transition-transform hover:scale-125",
 				props.class,
 			)}
 			onMouseDown={props.onMouseDown}
diff --git a/apps/desktop/src/routes/editor/PerformanceOverlay.tsx b/apps/desktop/src/routes/editor/PerformanceOverlay.tsx
index 6f3307a28b1..c9b48a70958 100644
--- a/apps/desktop/src/routes/editor/PerformanceOverlay.tsx
+++ b/apps/desktop/src/routes/editor/PerformanceOverlay.tsx
@@ -218,7 +218,7 @@ export function PerformanceOverlay(_props: PerformanceOverlayProps) {
 				}}
 			>
 				<div
-					class="rounded-md px-2 py-1.5 shadow-lg backdrop-blur-sm pointer-events-auto cursor-pointer hover:brightness-110 transition-[filter]"
+					class="rounded-md px-2 py-1.5 shadow-lg backdrop-blur-xs pointer-events-auto cursor-pointer hover:brightness-110 transition-[filter]"
 					style={{
 						"background-color": "rgba(0, 0, 0, 0.8)",
 						border: "1px solid rgba(255, 255, 255, 0.15)",
diff --git a/apps/desktop/src/routes/editor/PresetsDropdown.tsx b/apps/desktop/src/routes/editor/PresetsDropdown.tsx
index cc3bf3cfe08..6d9b6896ddd 100644
--- a/apps/desktop/src/routes/editor/PresetsDropdown.tsx
+++ b/apps/desktop/src/routes/editor/PresetsDropdown.tsx
@@ -58,7 +58,7 @@ export function PresetsDropdown() {
 										<KDropdownMenu.Sub gutter={16}>
 											<MenuItem<typeof KDropdownMenu.SubTrigger>
 												as={KDropdownMenu.SubTrigger}
-												class="h-[2.5rem]"
+												class="h-10"
 												onClick={() => {
 													applyPreset();
 												}}
diff --git a/apps/desktop/src/routes/editor/ShadowSettings.tsx b/apps/desktop/src/routes/editor/ShadowSettings.tsx
index 2633ce61c1e..cdef3c41e66 100644
--- a/apps/desktop/src/routes/editor/ShadowSettings.tsx
+++ b/apps/desktop/src/routes/editor/ShadowSettings.tsx
@@ -50,7 +50,7 @@ const ShadowSettings = (props: Props) => {
 				/>
 			</button>
 			<KCollapsible open={isOpen()}>
-				<KCollapsible.Content class="overflow-hidden opacity-0 transition-opacity animate-collapsible-up ui-expanded:animate-collapsible-down ui-expanded:opacity-100">
+				<KCollapsible.Content class="overflow-hidden opacity-0 transition-opacity animate-collapsible-up data-expanded:animate-collapsible-down data-expanded:opacity-100">
 					<div class="mt-4 space-y-6 font-medium">
 						<Field name="Size">
 							<Slider
diff --git a/apps/desktop/src/routes/editor/ShareButton.tsx b/apps/desktop/src/routes/editor/ShareButton.tsx
index a8e7c9818ee..bebe10b5a3b 100644
--- a/apps/desktop/src/routes/editor/ShareButton.tsx
+++ b/apps/desktop/src/routes/editor/ShareButton.tsx
@@ -206,7 +206,7 @@ function ShareButton() {
 										upload.mutate();
 									}}
 									variant="dark"
-									class="flex justify-center items-center size-[41px] !px-0 !py-0 space-x-1"
+									class="flex justify-center items-center size-[41px] px-0! py-0! space-x-1"
 								>
 									{upload.isPending ? (
 										<IconLucideLoaderCircle class="animate-spin size-4" />
@@ -216,7 +216,7 @@ function ShareButton() {
 								</Button>
 							</Tooltip>
 							<Tooltip content="Open link">
-								<div class="rounded-xl px-3 py-2 flex flex-row items-center gap-[0.375rem] bg-gray-3 hover:bg-gray-4 transition-colors duration-100">
+								<div class="rounded-xl px-3 py-2 flex flex-row items-center gap-1.5 bg-gray-3 hover:bg-gray-4 transition-colors duration-100">
 									<a
 										href={
 											linkToDisplay() === customLink
@@ -257,9 +257,9 @@ function ShareButton() {
 												placement="bottom-end"
 												gutter={4}
 											>
-												<KSelect.Trigger class="flex justify-center items-center transition-colors duration-200 rounded-lg size-[22px] text-gray-12 bg-gray-6 hover:bg-gray-7 group focus:outline-none focus-visible:outline-none">
+												<KSelect.Trigger class="flex justify-center items-center transition-colors duration-200 rounded-lg size-[22px] text-gray-12 bg-gray-6 hover:bg-gray-7 group focus:outline-hidden focus-visible:outline-hidden">
 													<KSelect.Icon>
-														<IconCapChevronDown class="size-4 transition-transform duration-200 group-data-[expanded]:rotate-180" />
+														<IconCapChevronDown class="size-4 transition-transform duration-200 group-data-expanded:rotate-180" />
 													</KSelect.Icon>
 												</KSelect.Trigger>
 												<KSelect.Portal>
diff --git a/apps/desktop/src/routes/editor/TextOverlay.tsx b/apps/desktop/src/routes/editor/TextOverlay.tsx
index c478e928e90..c05ad892cc7 100644
--- a/apps/desktop/src/routes/editor/TextOverlay.tsx
+++ b/apps/desktop/src/routes/editor/TextOverlay.tsx
@@ -540,7 +540,7 @@ function ResizeHandle(props: {
 	return (
 		<div
 			class={cx(
-				"absolute w-3 h-3 bg-blue-9 border border-white rounded-full shadow-sm transition-transform hover:scale-125",
+				"absolute w-3 h-3 bg-blue-9 border border-white rounded-full shadow-xs transition-transform hover:scale-125",
 				props.class,
 			)}
 			onMouseDown={props.onMouseDown}
diff --git a/apps/desktop/src/routes/editor/Timeline/CaptionsTrack.tsx b/apps/desktop/src/routes/editor/Timeline/CaptionsTrack.tsx
index c7f67ca76aa..f0438c8a645 100644
--- a/apps/desktop/src/routes/editor/Timeline/CaptionsTrack.tsx
+++ b/apps/desktop/src/routes/editor/Timeline/CaptionsTrack.tsx
@@ -134,7 +134,7 @@ export function CaptionsTrack(props: {
 			<For
 				each={captionSegments()}
 				fallback={
-					<div class="text-center text-sm text-[--text-tertiary] flex flex-col gap-2 justify-center items-center inset-0 w-full bg-gray-3/20 dark:bg-gray-3/10 rounded-xl">
+					<div class="text-center text-sm text-(--text-tertiary) flex flex-col gap-2 justify-center items-center inset-0 w-full bg-gray-3/20 dark:bg-gray-3/10 rounded-xl">
 						<div>No captions</div>
 						<button
 							class="h-8 px-3 rounded-lg border border-green-7/50 bg-green-6/15 text-green-11 text-xs font-medium transition-colors hover:bg-green-6/25 disabled:opacity-50 disabled:cursor-not-allowed"
@@ -165,7 +165,7 @@ export function CaptionsTrack(props: {
 							data-index={i()}
 							class={cx(
 								"border duration-200 hover:border-green-6 transition-colors group",
-								"bg-gradient-to-r from-[#0d1f12] via-[#162618] to-[#0d1f12]",
+								"bg-linear-to-r from-[#0d1f12] via-[#162618] to-[#0d1f12]",
 								isSelected() ? "border-green-7" : "border-transparent",
 							)}
 							innerClass="ring-green-6"
diff --git a/apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx b/apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx
index 69559a25daf..cdeef7f13e4 100644
--- a/apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx
+++ b/apps/desktop/src/routes/editor/Timeline/ClipTrack.tsx
@@ -469,7 +469,7 @@ export function ClipTrack(
 											transform: `translateX(${segmentX()}px)`,
 										}}
 									>
-										<div class="w-[2px] bottom-0 -top-2 rounded-full from-red-300 to-transparent bg-gradient-to-b -translate-x-1/2" />
+										<div class="w-[2px] bottom-0 -top-2 rounded-full from-red-300 to-transparent bg-linear-to-b -translate-x-1/2" />
 										<Switch>
 											<Match
 												when={(() => {
@@ -527,7 +527,7 @@ export function ClipTrack(
 														<div class="flex absolute -top-8 flex-row w-0 h-7 rounded-full">
 															<CutOffsetButton
 																value={value()}
-																class="-left-px absolute rounded-r-full !pl-1.5 rounded-tl-full"
+																class="-left-px absolute rounded-r-full pl-1.5! rounded-tl-full"
 																onClick={() => {
 																	setProject(
 																		"timeline",
@@ -549,7 +549,7 @@ export function ClipTrack(
 							<SegmentRoot
 								class={cx(
 									"border transition-colors duration-200 group hover:border-gray-12",
-									"bg-gradient-to-r from-[#2675DB] via-[#4FA0FF] to-[#2675DB] shadow-[inset_0_5px_10px_5px_rgba(255,255,255,0.2)]",
+									"bg-linear-to-r from-[#2675DB] via-[#4FA0FF] to-[#2675DB] shadow-[inset_0_5px_10px_5px_rgba(255,255,255,0.2)]",
 									isSelected() ? "border-gray-12" : "border-transparent",
 								)}
 								innerClass="ring-blue-9"
@@ -885,11 +885,11 @@ export function ClipTrack(
 												transform: `translateX(${segmentX() + segmentWidth()}px)`,
 											}}
 										>
-											<div class="w-[2px] bottom-0 -top-2 rounded-full from-red-300 to-transparent bg-gradient-to-b -translate-x-1/2" />
+											<div class="w-[2px] bottom-0 -top-2 rounded-full from-red-300 to-transparent bg-linear-to-b -translate-x-1/2" />
 											<div class="flex absolute -top-8 flex-row w-0 h-7 rounded-full">
 												<CutOffsetButton
 													value={value()}
-													class="-right-px absolute rounded-l-full !pr-1.5 rounded-tr-full"
+													class="-right-px absolute rounded-l-full pr-1.5! rounded-tr-full"
 													onClick={() => {
 														setProject(
 															"timeline",
@@ -946,7 +946,7 @@ function Markings(props: { segment: TimelineSegment; prevDuration: number }) {
 						style={{
 							transform: `translateX(${translateX()}px)`,
 						}}
-						class="absolute z-10 w-px h-12 bg-gradient-to-b from-transparent to-transparent via-white-transparent-40 dark:via-black-transparent-60"
+						class="absolute z-10 w-px h-12 bg-linear-to-b from-transparent to-transparent via-white-transparent-40 dark:via-black-transparent-60"
 					/>
 				);
 			}}
diff --git a/apps/desktop/src/routes/editor/Timeline/KeyboardTrack.tsx b/apps/desktop/src/routes/editor/Timeline/KeyboardTrack.tsx
index 52c3d6feb2d..77abb75a07c 100644
--- a/apps/desktop/src/routes/editor/Timeline/KeyboardTrack.tsx
+++ b/apps/desktop/src/routes/editor/Timeline/KeyboardTrack.tsx
@@ -134,9 +134,9 @@ export function KeyboardTrack(props: {
 			<For
 				each={keyboardSegments()}
 				fallback={
-					<div class="text-center text-sm text-[--text-tertiary] flex flex-col justify-center items-center inset-0 w-full bg-gray-3/20 dark:bg-gray-3/10 rounded-xl pointer-events-none">
+					<div class="text-center text-sm text-(--text-tertiary) flex flex-col justify-center items-center inset-0 w-full bg-gray-3/20 dark:bg-gray-3/10 rounded-xl pointer-events-none">
 						<div>No keyboard events</div>
-						<div class="text-[10px] text-[--text-tertiary]/40 mt-0.5">
+						<div class="text-[10px] text-(--text-tertiary)/40 mt-0.5">
 							Record keyboard presses or generate from recording
 						</div>
 					</div>
@@ -157,7 +157,7 @@ export function KeyboardTrack(props: {
 							data-index={i()}
 							class={cx(
 								"border duration-200 hover:border-sky-6 transition-colors group",
-								"bg-gradient-to-r from-[#0d1830] via-[#142445] to-[#0d1830] shadow-[inset_0_8px_12px_3px_rgba(120,180,255,0.16)]",
+								"bg-linear-to-r from-[#0d1830] via-[#142445] to-[#0d1830] shadow-[inset_0_8px_12px_3px_rgba(120,180,255,0.16)]",
 								isSelected() ? "border-sky-7" : "border-transparent",
 							)}
 							innerClass="ring-sky-6"
diff --git a/apps/desktop/src/routes/editor/Timeline/MaskTrack.tsx b/apps/desktop/src/routes/editor/Timeline/MaskTrack.tsx
index 2c9359cade0..9ce8fefbb2b 100644
--- a/apps/desktop/src/routes/editor/Timeline/MaskTrack.tsx
+++ b/apps/desktop/src/routes/editor/Timeline/MaskTrack.tsx
@@ -307,9 +307,9 @@ export function MaskTrack(props: {
 						when={!newSegmentDetails()}
 						fallback={<div class="w-full rounded-xl bg-transparent" />}
 					>
-						<div class="text-center text-sm text-[--text-tertiary] flex flex-col justify-center items-center inset-0 w-full bg-gray-3/20 dark:bg-gray-3/10 hover:bg-gray-3/30 dark:hover:bg-gray-3/20 transition-colors rounded-xl pointer-events-none">
+						<div class="text-center text-sm text-(--text-tertiary) flex flex-col justify-center items-center inset-0 w-full bg-gray-3/20 dark:bg-gray-3/10 hover:bg-gray-3/30 dark:hover:bg-gray-3/20 transition-colors rounded-xl pointer-events-none">
 							<div>Click to add a mask</div>
-							<div class="text-[10px] text-[--text-tertiary]/40 mt-0.5">
+							<div class="text-[10px] text-(--text-tertiary)/40 mt-0.5">
 								(Combine sensitive blur or highlight masks)
 							</div>
 						</div>
@@ -334,10 +334,10 @@ export function MaskTrack(props: {
 							data-index={index}
 							class={cx(
 								"duration-200 transition-colors group",
-								"bg-gradient-to-r from-[#1f2022] via-[#2c2d30] to-[#1f2022]",
+								"bg-linear-to-r from-[#1f2022] via-[#2c2d30] to-[#1f2022]",
 								isSelected()
 									? "border border-gray-12"
-									: "!border-0 hover:!border hover:border-gray-12",
+									: "border-0! hover:border! hover:border-gray-12",
 							)}
 							innerClass="ring-red-5"
 							segment={segment}
@@ -505,7 +505,7 @@ export function MaskTrack(props: {
 						innerClass="ring-red-300"
 						segment={details()}
 					>
-						<SegmentContent class="bg-gradient-to-r from-[#1f2022] via-[#2c2d30] to-[#1f2022] shadow-[inset_0_8px_12px_3px_rgba(255,255,255,0.16)]">
+						<SegmentContent class="bg-linear-to-r from-[#1f2022] via-[#2c2d30] to-[#1f2022] shadow-[inset_0_8px_12px_3px_rgba(255,255,255,0.16)]">
 							<p class="w-full text-center text-gray-1 dark:text-gray-12 text-md">
 								+
 							</p>
diff --git a/apps/desktop/src/routes/editor/Timeline/SceneTrack.tsx b/apps/desktop/src/routes/editor/Timeline/SceneTrack.tsx
index b0a24f7dbae..714bd0f3819 100644
--- a/apps/desktop/src/routes/editor/Timeline/SceneTrack.tsx
+++ b/apps/desktop/src/routes/editor/Timeline/SceneTrack.tsx
@@ -209,9 +209,9 @@ export function SceneTrack(props: {
 			<For
 				each={project.timeline?.sceneSegments}
 				fallback={
-					<div class="text-center text-sm text-[--text-tertiary] flex flex-col justify-center items-center inset-0 w-full bg-gray-3/20 dark:bg-gray-3/10 hover:bg-gray-3/30 dark:hover:bg-gray-3/20 transition-colors rounded-xl pointer-events-none">
+					<div class="text-center text-sm text-(--text-tertiary) flex flex-col justify-center items-center inset-0 w-full bg-gray-3/20 dark:bg-gray-3/10 hover:bg-gray-3/30 dark:hover:bg-gray-3/20 transition-colors rounded-xl pointer-events-none">
 						<div>Click to add scene segment</div>
-						<div class="text-[10px] text-[--text-tertiary]/40 mt-0.5">
+						<div class="text-[10px] text-(--text-tertiary)/40 mt-0.5">
 							(Make the camera full screen, or hide it)
 						</div>
 					</div>
@@ -363,7 +363,7 @@ export function SceneTrack(props: {
 						<SegmentRoot
 							class={cx(
 								"border transition-colors duration-200 hover:border-gray-12 group",
-								`bg-gradient-to-r from-[#5C1BC4] via-[#975CFA] to-[#5C1BC4] shadow-[inset_0_8px_12px_3px_rgba(255,255,255,0.2)]`,
+								`bg-linear-to-r from-[#5C1BC4] via-[#975CFA] to-[#5C1BC4] shadow-[inset_0_8px_12px_3px_rgba(255,255,255,0.2)]`,
 								isSelected() ? "border-gray-12" : "border-transparent",
 							)}
 							innerClass="ring-blue-5"
@@ -571,7 +571,7 @@ export function SceneTrack(props: {
 							end: time() + maxAvailableDuration(),
 						}}
 					>
-						<SegmentContent class="bg-gradient-to-r hover:border duration-200 hover:border-gray-500 from-[#5C1BC4] via-[#975CFA] to-[#5C1BC4] transition-colors group shadow-[inset_0_8px_12px_3px_rgba(255,255,255,0.2)]">
+						<SegmentContent class="bg-linear-to-r hover:border duration-200 hover:border-gray-500 from-[#5C1BC4] via-[#975CFA] to-[#5C1BC4] transition-colors group shadow-[inset_0_8px_12px_3px_rgba(255,255,255,0.2)]">
 							<p class="w-full text-center text-gray-1 dark:text-gray-12 text-md text-primary">
 								+
 							</p>
diff --git a/apps/desktop/src/routes/editor/Timeline/TextTrack.tsx b/apps/desktop/src/routes/editor/Timeline/TextTrack.tsx
index 46646b75701..70334a1121c 100644
--- a/apps/desktop/src/routes/editor/Timeline/TextTrack.tsx
+++ b/apps/desktop/src/routes/editor/Timeline/TextTrack.tsx
@@ -280,9 +280,9 @@ export function TextTrack(props: {
 						when={!newSegmentDetails()}
 						fallback={<div class="w-full rounded-xl bg-transparent" />}
 					>
-						<div class="text-center text-sm text-[--text-tertiary] flex flex-col justify-center items-center inset-0 w-full bg-gray-3/20 dark:bg-gray-3/10 hover:bg-gray-3/30 dark:hover:bg-gray-3/20 transition-colors rounded-xl pointer-events-none">
+						<div class="text-center text-sm text-(--text-tertiary) flex flex-col justify-center items-center inset-0 w-full bg-gray-3/20 dark:bg-gray-3/10 hover:bg-gray-3/30 dark:hover:bg-gray-3/20 transition-colors rounded-xl pointer-events-none">
 							<div>Click to add text</div>
-							<div class="text-[10px] text-[--text-tertiary]/40 mt-0.5">
+							<div class="text-[10px] text-(--text-tertiary)/40 mt-0.5">
 								(Set a label over your video)
 							</div>
 						</div>
@@ -304,7 +304,7 @@ export function TextTrack(props: {
 							data-index={index}
 							class={cx(
 								"border duration-200 hover:border-blue-6 transition-colors group",
-								"bg-gradient-to-r from-[#111826] via-[#1c2232] to-[#111826]",
+								"bg-linear-to-r from-[#111826] via-[#1c2232] to-[#111826]",
 								isSelected() ? "border-blue-7" : "border-transparent",
 								!segment.enabled && "opacity-60",
 							)}
@@ -448,7 +448,7 @@ export function TextTrack(props: {
 						innerClass="ring-blue-300"
 						segment={details()}
 					>
-						<SegmentContent class="bg-gradient-to-r from-[#111826] via-[#1c2232] to-[#111826] shadow-[inset_0_8px_12px_3px_rgba(255,255,255,0.16)]">
+						<SegmentContent class="bg-linear-to-r from-[#111826] via-[#1c2232] to-[#111826] shadow-[inset_0_8px_12px_3px_rgba(255,255,255,0.16)]">
 							<p class="w-full text-center text-gray-1 dark:text-gray-12 text-md">
 								+
 							</p>
diff --git a/apps/desktop/src/routes/editor/Timeline/Track.tsx b/apps/desktop/src/routes/editor/Timeline/Track.tsx
index ad65243ef63..0953269d2b7 100644
--- a/apps/desktop/src/routes/editor/Timeline/Track.tsx
+++ b/apps/desktop/src/routes/editor/Timeline/Track.tsx
@@ -101,8 +101,8 @@ export function SegmentContent(props: ComponentProps<"div">) {
 		<div
 			{...props}
 			class={cx(
-				"relative w-full h-full flex flex-row items-center py-[0.25rem]",
-				ctx.width() < 100 ? "px-0" : "px-[0.5rem]",
+				"relative w-full h-full flex flex-row items-center py-1",
+				ctx.width() < 100 ? "px-0" : "px-2",
 				props.class,
 			)}
 		/>
diff --git a/apps/desktop/src/routes/editor/Timeline/TrackManager.tsx b/apps/desktop/src/routes/editor/Timeline/TrackManager.tsx
index df79616ba31..8ece70cf03f 100644
--- a/apps/desktop/src/routes/editor/Timeline/TrackManager.tsx
+++ b/apps/desktop/src/routes/editor/Timeline/TrackManager.tsx
@@ -80,7 +80,7 @@ export function TrackIcon(props: { icon: JSX.Element; class?: string }) {
 	return (
 		<div
 			class={cx(
-				"relative z-10 w-[3.5rem] h-[3.25rem] flex items-center justify-center rounded-xl border border-gray-4/70 bg-gray-2/60 text-gray-12 shadow-[0_4px_16px_-12px_rgba(0,0,0,0.8)] dark:border-gray-4/60 dark:bg-gray-3/40",
+				"relative z-10 w-14 h-13 flex items-center justify-center rounded-xl border border-gray-4/70 bg-gray-2/60 text-gray-12 shadow-[0_4px_16px_-12px_rgba(0,0,0,0.8)] dark:border-gray-4/60 dark:bg-gray-3/40",
 				props.class,
 			)}
 			onMouseDown={(e) => e.stopPropagation()}
diff --git a/apps/desktop/src/routes/editor/Timeline/ZoomTrack.tsx b/apps/desktop/src/routes/editor/Timeline/ZoomTrack.tsx
index 805f28632c1..c86ade95616 100644
--- a/apps/desktop/src/routes/editor/Timeline/ZoomTrack.tsx
+++ b/apps/desktop/src/routes/editor/Timeline/ZoomTrack.tsx
@@ -305,7 +305,7 @@ export function ZoomTrack(props: {
 			<Show
 				when={hasZoomSegments()}
 				fallback={
-					<div class="relative z-[1] isolate text-center text-sm text-[--text-tertiary] flex flex-col gap-2 justify-center items-center inset-0 w-full bg-gray-3/20 dark:bg-gray-3/10 hover:bg-gray-3/30 dark:hover:bg-gray-3/20 transition-colors rounded-xl pointer-events-auto px-2 py-1">
+					<div class="relative z-1 isolate text-center text-sm text-(--text-tertiary) flex flex-col gap-2 justify-center items-center inset-0 w-full bg-gray-3/20 dark:bg-gray-3/10 hover:bg-gray-3/30 dark:hover:bg-gray-3/20 transition-colors rounded-xl pointer-events-auto px-2 py-1">
 						<Show
 							when={
 								hasRecordedCursorData() && !sessionDismissedGenerateZoomPrompt()
@@ -332,7 +332,7 @@ export function ZoomTrack(props: {
 								</Button>
 								<button
 									type="button"
-									class="flex shrink-0 justify-center items-center rounded-full outline-none text-gray-11 hover:text-gray-12 hover:bg-gray-5 focus-visible:ring-2 focus-visible:ring-gray-8 size-8 transition-colors"
+									class="flex shrink-0 justify-center items-center rounded-full outline-hidden text-gray-11 hover:text-gray-12 hover:bg-gray-5 focus-visible:ring-2 focus-visible:ring-gray-8 size-8 transition-colors"
 									disabled={isGeneratingAutoZoom()}
 									aria-label="Dismiss for this session"
 									onClick={() => setSessionDismissedGenerateZoomPrompt(true)}
@@ -479,7 +479,7 @@ export function ZoomTrack(props: {
 							<SegmentRoot
 								class={cx(
 									"border duration-200 hover:border-gray-12 transition-colors group",
-									"bg-gradient-to-r from-[#292929] via-[#434343] to-[#292929] shadow-[inset_0_8px_12px_3px_rgba(255,255,255,0.2)]",
+									"bg-linear-to-r from-[#292929] via-[#434343] to-[#292929] shadow-[inset_0_8px_12px_3px_rgba(255,255,255,0.2)]",
 									isSelected() ? "border-gray-12" : "border-transparent",
 								)}
 								innerClass="ring-red-5"
@@ -684,7 +684,7 @@ export function ZoomTrack(props: {
 						innerClass="ring-red-300"
 						segment={details()}
 					>
-						<SegmentContent class="bg-gradient-to-r hover:border duration-200 hover:border-gray-500 from-[#292929] via-[#434343] to-[#292929] transition-colors group shadow-[inset_0_8px_12px_3px_rgba(255,255,255,0.2)]">
+						<SegmentContent class="bg-linear-to-r hover:border duration-200 hover:border-gray-500 from-[#292929] via-[#434343] to-[#292929] transition-colors group shadow-[inset_0_8px_12px_3px_rgba(255,255,255,0.2)]">
 							<p class="w-full text-center text-gray-1 dark:text-gray-12 text-md text-primary">
 								+
 							</p>
diff --git a/apps/desktop/src/routes/editor/Timeline/index.tsx b/apps/desktop/src/routes/editor/Timeline/index.tsx
index 67d9b8edf0c..379d207ba2b 100644
--- a/apps/desktop/src/routes/editor/Timeline/index.tsx
+++ b/apps/desktop/src/routes/editor/Timeline/index.tsx
@@ -776,7 +776,7 @@ export function Timeline(props: {
 		>
 			<div
 				ref={setTimelineContainerRef}
-				class="pt-[2rem] relative overflow-hidden flex flex-col gap-2 h-full"
+				class="pt-8 relative overflow-hidden flex flex-col gap-2 h-full"
 				style={{
 					"padding-left": `${TIMELINE_PADDING}px`,
 					"padding-right": `${TIMELINE_PADDING}px`,
@@ -854,7 +854,7 @@ export function Timeline(props: {
 					{(time) => (
 						<div
 							class={cx(
-								"flex absolute bottom-0 z-20 justify-center items-center w-px pointer-events-none bg-gradient-to-b to-[120%]",
+								"flex absolute bottom-0 z-20 justify-center items-center w-px pointer-events-none bg-linear-to-b to-120%",
 								split() ? "from-red-300" : "from-gray-400",
 							)}
 							style={{
@@ -876,7 +876,7 @@ export function Timeline(props: {
 				</Show>
 				<div
 					class={cx(
-						"absolute bottom-0 rounded-full z-20 w-px pointer-events-none bg-gradient-to-b to-[120%] from-[rgb(226,64,64)]",
+						"absolute bottom-0 rounded-full z-20 w-px pointer-events-none bg-linear-to-b to-120% from-[rgb(226,64,64)]",
 						split() && "opacity-50",
 					)}
 					style={{
@@ -1082,7 +1082,7 @@ function TimelineMarkings() {
 							}}
 						>
 							<Show when={showLabel()}>
-								<div class="absolute -top-[1.125rem] -translate-x-1/2">
+								<div class="absolute -top-4.5 -translate-x-1/2">
 									{formatTime(second())}
 								</div>
 							</Show>
diff --git a/apps/desktop/src/routes/editor/TranscriptPage.tsx b/apps/desktop/src/routes/editor/TranscriptPage.tsx
index c364de58800..1c903efe65b 100644
--- a/apps/desktop/src/routes/editor/TranscriptPage.tsx
+++ b/apps/desktop/src/routes/editor/TranscriptPage.tsx
@@ -298,7 +298,7 @@ export function TranscriptPanel() {
 				<div class="flex items-center gap-1">
 					<button
 						type="button"
-						class="flex items-center justify-center size-5 rounded hover:bg-gray-3 text-gray-9 hover:text-gray-12 transition-colors disabled:opacity-30 disabled:pointer-events-none"
+						class="flex items-center justify-center size-5 rounded-sm hover:bg-gray-3 text-gray-9 hover:text-gray-12 transition-colors disabled:opacity-30 disabled:pointer-events-none"
 						disabled={textSizeIndex() <= 0}
 						onClick={() => setTextSizeIndex(Math.max(0, textSizeIndex() - 1))}
 					>
@@ -306,7 +306,7 @@ export function TranscriptPanel() {
 					</button>
 					<button
 						type="button"
-						class="flex items-center justify-center size-5 rounded hover:bg-gray-3 text-gray-9 hover:text-gray-12 transition-colors disabled:opacity-30 disabled:pointer-events-none"
+						class="flex items-center justify-center size-5 rounded-sm hover:bg-gray-3 text-gray-9 hover:text-gray-12 transition-colors disabled:opacity-30 disabled:pointer-events-none"
 						disabled={textSizeIndex() >= TEXT_SIZES.length - 1}
 						onClick={() =>
 							setTextSizeIndex(
@@ -360,7 +360,7 @@ function WordWithTooltip(props: {
 		<span
 			ref={props.ref}
 			class={cx(
-				"cursor-pointer transition-colors duration-100 rounded-sm relative",
+				"cursor-pointer transition-colors duration-100 rounded-xs relative",
 				props.isSelected && "bg-blue-4/50",
 				props.isActive
 					? "text-blue-11"
@@ -551,7 +551,7 @@ function TranscriptEditor(props: {
 	return (
 		<div
 			ref={scrollContainerRef}
-			class="flex-1 overflow-y-auto overflow-x-hidden px-4 py-3 pb-8 focus:outline-none w-full"
+			class="flex-1 overflow-y-auto overflow-x-hidden px-4 py-3 pb-8 focus:outline-hidden w-full"
 			tabIndex={0}
 			onKeyDown={handleKeyDown}
 			onClick={handleContainerClick}
diff --git a/apps/desktop/src/routes/editor/color-utils.tsx b/apps/desktop/src/routes/editor/color-utils.tsx
index b8c7e804e43..7a490da63f5 100644
--- a/apps/desktop/src/routes/editor/color-utils.tsx
+++ b/apps/desktop/src/routes/editor/color-utils.tsx
@@ -37,10 +37,10 @@ export function RgbInput(props: {
 	};
 
 	return (
-		<div class="flex flex-row items-center gap-[0.75rem] relative">
+		<div class="flex flex-row items-center gap-3 relative">
 			<button
 				type="button"
-				class="size-[2rem] rounded-[0.5rem]"
+				class="size-8 rounded-lg"
 				style={{
 					"background-color": rgbToHex(props.value),
 					"box-shadow": `inset 0 0 0 1px ${getColorPreviewBorderColor(
@@ -52,7 +52,7 @@ export function RgbInput(props: {
 			<input
 				ref={colorInput}
 				type="color"
-				class="absolute left-0 bottom-0 w-[3rem] opacity-0"
+				class="absolute left-0 bottom-0 w-12 opacity-0"
 				value={rgbToHex(props.value)}
 				onChange={(e) => {
 					const value = hexToRgb(e.target.value);
@@ -63,7 +63,7 @@ export function RgbInput(props: {
 				}}
 			/>
 			<TextInput
-				class="w-[4.60rem] p-[0.375rem] text-gray-12 text-[13px] border rounded-[0.5rem] bg-gray-1 outline-none focus:ring-1 transition-shadows duration-200 focus:ring-gray-500 focus:ring-offset-1 focus:ring-offset-gray-200"
+				class="w-[4.60rem] p-1.5 text-gray-12 text-[13px] border rounded-lg bg-gray-1 outline-hidden focus:ring-1 transition-shadows duration-200 focus:ring-gray-500 focus:ring-offset-1 focus:ring-offset-gray-200"
 				value={text()}
 				onFocus={() => {
 					prevHex = rgbToHex(props.value);
diff --git a/apps/desktop/src/routes/editor/editor-skeleton.tsx b/apps/desktop/src/routes/editor/editor-skeleton.tsx
index a6b2c67fbd9..94b57eaacc6 100644
--- a/apps/desktop/src/routes/editor/editor-skeleton.tsx
+++ b/apps/desktop/src/routes/editor/editor-skeleton.tsx
@@ -9,7 +9,10 @@ const RESIZE_HANDLE_HEIGHT = 16;
 function SkeletonPulse(props: { class?: string }) {
 	return (
 		<div
-			class={cx("animate-pulse rounded bg-gray-3 dark:bg-gray-4", props.class)}
+			class={cx(
+				"animate-pulse rounded-sm bg-gray-3 dark:bg-gray-4",
+				props.class,
+			)}
 		/>
 	);
 }
@@ -32,7 +35,7 @@ function HeaderSkeleton() {
 				data-tauri-drag-region
 				class="flex flex-row flex-1 gap-2 items-center px-4 h-full"
 			>
-				{ostype() === "macos" && <div class="h-full w-[4rem]" />}
+				{ostype() === "macos" && <div class="h-full w-16" />}
 				<SkeletonButton />
 				<SkeletonButton />
 				<SkeletonPulse class="h-5 w-32" />
@@ -59,7 +62,7 @@ function HeaderSkeleton() {
 				<SkeletonButton />
 				<SkeletonButton />
 				<div data-tauri-drag-region class="flex-1 h-full" />
-				<SkeletonPulse class="h-[40px] w-[100px] rounded-[0.5rem]" />
+				<SkeletonPulse class="h-[40px] w-[100px] rounded-lg" />
 				{ostype() === "windows" && <CaptionControlsWindows11 />}
 			</div>
 		</div>
@@ -87,7 +90,7 @@ function VideoPreviewSkeleton() {
 			<div class="relative w-full h-full flex justify-center items-center p-4">
 				<div class="relative bg-gray-3 dark:bg-gray-4 rounded-lg w-full max-w-[85%] aspect-video flex items-center justify-center">
 					<div class="animate-spin grayscale opacity-60">
-						<IconCapLogo class="size-[4rem] text-gray-6" />
+						<IconCapLogo class="size-16 text-gray-6" />
 					</div>
 				</div>
 			</div>
@@ -104,16 +107,16 @@ function PlayerControlsSkeleton() {
 				<SkeletonPulse class="h-4 w-12" />
 			</div>
 			<div class="flex flex-row items-center justify-center gap-8">
-				<SkeletonPulse class="size-3 rounded" />
+				<SkeletonPulse class="size-3 rounded-sm" />
 				<SkeletonPulse class="size-9 rounded-full" />
-				<SkeletonPulse class="size-3 rounded" />
+				<SkeletonPulse class="size-3 rounded-sm" />
 			</div>
 			<div class="flex flex-row flex-1 gap-4 justify-end items-center">
 				<div class="flex-1" />
 				<SkeletonButton />
 				<SkeletonPulse class="w-px h-8 rounded-full" />
-				<SkeletonPulse class="size-5 rounded" />
-				<SkeletonPulse class="size-5 rounded" />
+				<SkeletonPulse class="size-5 rounded-sm" />
+				<SkeletonPulse class="size-5 rounded-sm" />
 				<SkeletonPulse class="w-24 h-2 rounded-full" />
 			</div>
 		</div>
@@ -144,8 +147,8 @@ function PlayerSkeleton() {
 
 function SidebarSkeleton() {
 	return (
-		<div class="flex flex-col min-h-0 shrink-0 flex-1 max-w-[26rem] overflow-hidden rounded-xl z-10 bg-gray-1 dark:bg-gray-2 border border-gray-3">
-			<div class="flex overflow-hidden sticky top-0 z-[60] flex-row items-center justify-center gap-4 h-16 border-b border-gray-3 shrink-0 bg-gray-1 dark:bg-gray-2">
+		<div class="flex flex-col min-h-0 shrink-0 flex-1 max-w-104 overflow-hidden rounded-xl z-10 bg-gray-1 dark:bg-gray-2 border border-gray-3">
+			<div class="flex overflow-hidden sticky top-0 z-60 flex-row items-center justify-center gap-4 h-16 border-b border-gray-3 shrink-0 bg-gray-1 dark:bg-gray-2">
 				<SkeletonPulse class="size-9 rounded-lg" />
 				<SkeletonPulse class="size-9 rounded-lg" />
 				<SkeletonPulse class="size-9 rounded-lg" />
@@ -164,14 +167,14 @@ function SidebarSkeleton() {
 				<SkeletonPulse class="h-px w-full" />
 				<SkeletonPulse class="h-4 w-16" />
 				<div class="grid grid-cols-4 gap-2">
-					<SkeletonPulse class="aspect-video rounded" />
-					<SkeletonPulse class="aspect-video rounded" />
-					<SkeletonPulse class="aspect-video rounded" />
-					<SkeletonPulse class="aspect-video rounded" />
-					<SkeletonPulse class="aspect-video rounded" />
-					<SkeletonPulse class="aspect-video rounded" />
-					<SkeletonPulse class="aspect-video rounded" />
-					<SkeletonPulse class="aspect-video rounded" />
+					<SkeletonPulse class="aspect-video rounded-sm" />
+					<SkeletonPulse class="aspect-video rounded-sm" />
+					<SkeletonPulse class="aspect-video rounded-sm" />
+					<SkeletonPulse class="aspect-video rounded-sm" />
+					<SkeletonPulse class="aspect-video rounded-sm" />
+					<SkeletonPulse class="aspect-video rounded-sm" />
+					<SkeletonPulse class="aspect-video rounded-sm" />
+					<SkeletonPulse class="aspect-video rounded-sm" />
 				</div>
 			</div>
 		</div>
@@ -180,9 +183,9 @@ function SidebarSkeleton() {
 
 function TimelineTrackSkeleton() {
 	return (
-		<div class="flex items-center gap-2 h-[3.25rem]">
+		<div class="flex items-center gap-2 h-13">
 			<div class="w-16 flex items-center justify-center">
-				<SkeletonPulse class="size-4 rounded" />
+				<SkeletonPulse class="size-4 rounded-sm" />
 			</div>
 			<div class="flex-1 h-full py-1">
 				<SkeletonPulse class="h-full w-full rounded-lg" />
@@ -194,7 +197,7 @@ function TimelineTrackSkeleton() {
 function TimelineSkeleton() {
 	return (
 		<div class="h-full rounded-xl border bg-gray-1 dark:bg-gray-2 border-gray-3 overflow-hidden">
-			<div class="pt-[2rem] relative flex flex-col gap-2 h-full px-4">
+			<div class="pt-8 relative flex flex-col gap-2 h-full px-4">
 				<div class="relative h-[32px] flex items-end">
 					<div class="flex items-center gap-8 w-full pl-16">
 						<SkeletonPulse class="h-3 w-8" />
diff --git a/apps/desktop/src/routes/editor/ui.tsx b/apps/desktop/src/routes/editor/ui.tsx
index 42cae1c27e9..eddde42a066 100644
--- a/apps/desktop/src/routes/editor/ui.tsx
+++ b/apps/desktop/src/routes/editor/ui.tsx
@@ -36,7 +36,7 @@ export function Field(
 		<div class={cx("flex flex-col gap-4", props.class)}>
 			<span
 				data-disabled={props.disabled}
-				class="flex flex-row items-center gap-[0.375rem] text-gray-12 data-[disabled='true']:text-gray-10 font-medium text-sm"
+				class="flex flex-row items-center gap-1.5 text-gray-12 data-[disabled='true']:text-gray-10 font-medium text-sm"
 			>
 				{props.icon}
 				{props.name}
@@ -115,7 +115,7 @@ export function Slider(
 					});
 				}}
 			>
-				<KSlider.Fill class="absolute -ml-2 h-full rounded-full bg-blue-9 ui-disabled:bg-gray-8" />
+				<KSlider.Fill class="absolute -ml-2 h-full rounded-full bg-blue-9 data-disabled:bg-gray-8" />
 				<Tooltip
 					open={dragging() ? true : undefined}
 					getAnchorRect={() => {
@@ -145,7 +145,7 @@ export function Slider(
 							setDragging(false);
 						}}
 						class={cx(
-							"bg-gray-1 dark:bg-gray-12 border border-gray-6 shadow-md rounded-full outline-none size-4 -top-[6.3px] ui-disabled:bg-gray-9 after:content-[''] after:absolute after:inset-0 after:-m-3 after:cursor-pointer",
+							"bg-gray-1 dark:bg-gray-12 border border-gray-6 shadow-md rounded-full outline-hidden size-4 -top-[6.3px] data-disabled:bg-gray-9 after:content-[''] after:absolute after:inset-0 after:-m-3 after:cursor-pointer",
 						)}
 					/>
 				</Tooltip>
@@ -160,7 +160,7 @@ export function Input(props: ComponentProps<"input">) {
 			{...props}
 			class={cx(
 				props.class,
-				"rounded-[0.5rem] bg-gray-2 hover:ring-1 py-[18px] hover:ring-gray-5 h-[2rem] font-normal placeholder:text-black-transparent-40 text-xs caret-gray-500 transition-shadow duration-200 focus:ring-offset-1 focus:bg-gray-3 focus:ring-offset-gray-100 focus:ring-1 focus:ring-gray-10 px-[0.5rem] w-full text-[0.875rem] outline-none text-gray-12",
+				"rounded-lg bg-gray-2 hover:ring-1 py-[18px] hover:ring-gray-5 h-8 font-normal placeholder:text-black-transparent-40 text-xs caret-gray-500 transition-shadow duration-200 focus:ring-offset-1 focus:bg-gray-3 focus:ring-offset-gray-100 focus:ring-1 focus:ring-gray-10 px-2 w-full text-[0.875rem] outline-hidden text-gray-12",
 			)}
 		/>
 	);
@@ -178,13 +178,13 @@ export const Dialog = {
 			<KDialog {...props}>
 				<KDialog.Portal>
 					{!props.hideOverlay && (
-						<KDialog.Overlay class="fixed inset-0 z-50 bg-[#000]/80 ui-expanded:animate-in ui-expanded:fade-in ui-closed:animate-out ui-closed:fade-out" />
+						<KDialog.Overlay class="fixed inset-0 z-50 bg-black/80 data-expanded:animate-in data-expanded:fade-in data-closed:animate-out data-closed:fade-out" />
 					)}
 					<div class="flex fixed inset-0 z-50 justify-center items-center">
 						<KDialog.Content
 							class={cx(
 								props.contentClass,
-								"z-50 text-sm rounded-[1.25rem] overflow-hidden border border-gray-3 bg-gray-1 min-w-[22rem] ui-expanded:animate-in ui-expanded:fade-in ui-expanded:zoom-in-95 origin-top ui-closed:animate-out ui-closed:fade-out ui-closed:zoom-out-95",
+								"z-50 text-sm rounded-[1.25rem] overflow-hidden border border-gray-3 bg-gray-1 min-w-88 data-expanded:animate-in data-expanded:fade-in data-expanded:zoom-in-95 origin-top data-closed:animate-out data-closed:fade-out data-closed:zoom-out-95",
 								(props.size ?? "sm") === "sm" ? "max-w-96" : "max-w-3xl",
 							)}
 						>
@@ -218,7 +218,7 @@ export const Dialog = {
 		return (
 			<div
 				class={cx(
-					"h-[4rem] px-[1rem] gap-3 flex flex-row items-center",
+					"h-16 px-4 gap-3 flex flex-row items-center",
 					props.leftFooterContent ? "justify-between" : "justify-center",
 					props.class,
 				)}
@@ -230,15 +230,13 @@ export const Dialog = {
 		);
 	},
 	Header(props: ComponentProps<"div">) {
-		return (
-			<div {...props} class="h-[3.5rem] px-[1rem] flex flex-row items-center" />
-		);
+		return <div {...props} class="h-14 px-4 flex flex-row items-center" />;
 	},
 	Content(props: ComponentProps<"div">) {
 		return (
 			<div
 				{...props}
-				class={cx("p-[1rem] flex flex-col border-y border-gray-3", props.class)}
+				class={cx("p-4 flex flex-col border-y border-gray-3", props.class)}
 			/>
 		);
 	},
@@ -279,8 +277,8 @@ export function MenuItem<T extends ValidComponent = "button">(
 			{...props}
 			class={cx(
 				props.class,
-				"flex flex-row shrink-0 items-center gap-[0.375rem] px-[0.675rem] py-[0.375rem] rounded-[0.5rem] outline-none text-nowrap overflow-hidden text-ellipsis w-full max-w-full",
-				"text-[0.875rem] text-gray-10 disabled:text-gray-10 ui-highlighted:bg-gray-3 ui-highlighted:text-gray-12",
+				"flex flex-row shrink-0 items-center gap-1.5 px-[0.675rem] py-1.5 rounded-lg outline-hidden text-nowrap overflow-hidden text-ellipsis w-full max-w-full",
+				"text-[0.875rem] text-gray-10 disabled:text-gray-10 data-highlighted:bg-gray-3 data-highlighted:text-gray-12",
 			)}
 		/>
 	);
@@ -310,7 +308,7 @@ export function MenuItemList<T extends ValidComponent = "div">(
 			{...props}
 			class={cx(
 				props.class,
-				"space-y-[0.375rem] p-[0.375rem] overflow-y-auto outline-none",
+				"space-y-1.5 p-1.5 overflow-y-auto outline-hidden",
 			)}
 		/>
 	);
@@ -318,17 +316,17 @@ export function MenuItemList<T extends ValidComponent = "div">(
 
 const editorButtonStyles = cva(
 	[
-		"group flex flex-row items-center px-[0.375rem] gap-[0.375rem] h-[2rem] rounded-[0.5rem] text-[0.875rem]",
-		"focus:outline focus:outline-2 focus:outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 transition-colors duration-100",
+		"group flex flex-row items-center px-1.5 gap-1.5 h-8 rounded-lg text-[0.875rem]",
+		"focus:outline-solid focus:outline-2 focus:outline-offset-2 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 transition-colors duration-100",
 		"disabled:opacity-50 disabled:text-gray-11",
 	],
 	{
 		variants: {
 			variant: {
 				primary:
-					"text-gray-12 enabled:hover:ui-not-pressed:bg-gray-3 ui-expanded:bg-gray-3 outline-blue-300 focus:bg-transparent",
+					"text-gray-12 enabled:hover:not-data-pressed:bg-gray-3 data-expanded:bg-gray-3 outline-blue-300 focus:bg-transparent",
 				danger:
-					"text-gray-12 enabled:hover:ui-not-pressed:bg-gray-3 ui-expanded:bg-red-300 ui-pressed:bg-red-300 ui-expanded:text-gray-1 ui-pressed:text-gray-1 outline-red-300",
+					"text-gray-12 enabled:hover:not-data-pressed:bg-gray-3 data-expanded:bg-red-300 data-pressed:bg-red-300 data-expanded:text-gray-1 data-pressed:text-gray-1 outline-red-300",
 			},
 		},
 		defaultVariants: { variant: "primary" },
@@ -339,9 +337,9 @@ const editorButtonLeftIconStyles = cva("transition-colors duration-100", {
 	variants: {
 		variant: {
 			primary:
-				"text-gray-12 enabled:group-hover:not-ui-group-disabled:text-gray-12 ui-group-expanded:text-gray-12",
+				"text-gray-12 enabled:group-hover:not-data-group-disabled:text-gray-12 data-group-expanded:text-gray-12",
 			danger:
-				"text-gray-12 enabled:group-hover:text-gray-12 ui-group-expanded:text-gray-1 ui-group-pressed:text-gray-1",
+				"text-gray-12 group-hover:enabled:text-gray-12 data-group-expanded:text-gray-1 data-group-pressed:text-gray-1",
 		},
 	},
 	defaultVariants: { variant: "primary" },
@@ -426,19 +424,19 @@ export function EditorButton<T extends ValidComponent = "button">(
 }
 
 export const dropdownContainerClasses =
-	"z-[60] flex flex-col rounded-[0.75rem] border border-gray-3 bg-gray-1 shadow-s overflow-y-hidden outline-none";
+	"z-60 flex flex-col rounded-xl border border-gray-3 bg-gray-1 shadow-s overflow-y-hidden outline-hidden";
 
 export const topLeftAnimateClasses =
-	"ui-expanded:animate-in ui-expanded:fade-in ui-expanded:zoom-in-95 ui-closed:animate-out ui-closed:fade-out ui-closed:zoom-out-95 origin-top-left";
+	"data-expanded:animate-in data-expanded:fade-in data-expanded:zoom-in-95 data-closed:animate-out data-closed:fade-out data-closed:zoom-out-95 origin-top-left";
 
 export const topCenterAnimateClasses =
-	"ui-expanded:animate-in ui-expanded:fade-in ui-expanded:zoom-in-95 ui-closed:animate-out ui-closed:fade-out ui-closed:zoom-out-95 origin-top-center";
+	"data-expanded:animate-in data-expanded:fade-in data-expanded:zoom-in-95 data-closed:animate-out data-closed:fade-out data-closed:zoom-out-95 origin-top-center";
 
 export const topRightAnimateClasses =
-	"ui-expanded:animate-in ui-expanded:fade-in ui-expanded:zoom-in-95 ui-closed:animate-out ui-closed:fade-out ui-closed:zoom-out-95 origin-top-right";
+	"data-expanded:animate-in data-expanded:fade-in data-expanded:zoom-in-95 data-closed:animate-out data-closed:fade-out data-closed:zoom-out-95 origin-top-right";
 
 export const topSlideAnimateClasses =
-	"ui-expanded:animate-in ui-expanded:fade-in ui-expanded:slide-in-from-top-1 ui-closed:animate-out ui-closed:fade-out ui-closed:slide-out-to-top-1 origin-top-center";
+	"data-expanded:animate-in data-expanded:fade-in data-expanded:slide-in-from-top-1 data-closed:animate-out data-closed:fade-out data-closed:slide-out-to-top-1 origin-top-center";
 
 export function ComingSoonTooltip(
 	props: ComponentProps<typeof KTooltip> & { as?: ValidComponent },
@@ -450,7 +448,7 @@ export function ComingSoonTooltip(
 				{trigger.children}
 			</KTooltip.Trigger>
 			<KTooltip.Portal>
-				<KTooltip.Content class="p-2 font-medium bg-gray-12 text-gray-1 ui-expanded:animate-in ui-expanded:slide-in-from-bottom-1 ui-expanded:fade-in ui-closed:animate-out ui-closed:slide-out-to-bottom-1 ui-closed:fade-out rounded-lg text-xs z-[1000]">
+				<KTooltip.Content class="p-2 font-medium bg-gray-12 text-gray-1 data-expanded:animate-in data-expanded:slide-in-from-bottom-1 data-expanded:fade-in data-closed:animate-out data-closed:slide-out-to-bottom-1 data-closed:fade-out rounded-lg text-xs z-1000">
 					Coming Soon
 				</KTooltip.Content>
 			</KTooltip.Portal>
diff --git a/apps/desktop/src/routes/in-progress-recording.tsx b/apps/desktop/src/routes/in-progress-recording.tsx
index 4fa431574c2..6f33452c6b8 100644
--- a/apps/desktop/src/routes/in-progress-recording.tsx
+++ b/apps/desktop/src/routes/in-progress-recording.tsx
@@ -669,14 +669,14 @@ function InProgressRecordingInner() {
 				</Show>
 				<div class="h-10 w-full rounded-2xl">
 					<div class="flex h-full w-full flex-row items-stretch overflow-hidden rounded-2xl bg-gray-1 border border-gray-5 shadow-[0_1px_3px_rgba(0,0,0,0.1)] animate-in fade-in">
-						<div class="flex flex-1 flex-col gap-2 p-[0.25rem]">
+						<div class="flex flex-1 flex-col gap-2 p-1">
 							<div class="flex flex-1 flex-row justify-between">
 								<Show
 									when={!isInitializing()}
 									fallback={
-										<div class="flex flex-row items-center gap-[0.375rem] rounded-lg py-[0.25rem] px-[0.5rem] text-gray-12">
+										<div class="flex flex-row items-center gap-1.5 rounded-lg py-1 px-2 text-gray-12">
 											<IconLucideLoader2 class="size-4 animate-spin" />
-											<span class="text-[0.875rem] font-[500] tabular-nums">
+											<span class="text-[0.875rem] font-medium tabular-nums">
 												Starting
 											</span>
 										</div>
@@ -688,7 +688,7 @@ function InProgressRecordingInner() {
 											stopRecording.isPending ||
 											isCountdown()
 										}
-										class="flex flex-row items-center gap-[0.25rem] rounded-lg py-[0.25rem] px-[0.5rem] text-red-300 transition-colors duration-100 hover:bg-red-500/[0.08] active:bg-red-500/[0.12] disabled:opacity-60 disabled:hover:bg-transparent"
+										class="flex flex-row items-center gap-1 rounded-lg py-1 px-2 text-red-300 transition-colors duration-100 hover:bg-red-500/8 active:bg-red-500/12 disabled:opacity-60 disabled:hover:bg-transparent"
 										type="button"
 										onPointerDown={(event) => {
 											if (event.button !== 0) return;
@@ -701,7 +701,7 @@ function InProgressRecordingInner() {
 										aria-label="Stop recording"
 									>
 										<IconCapStopCircle />
-										<span class="text-[0.875rem] font-[500] tabular-nums">
+										<span class="text-[0.875rem] font-medium tabular-nums">
 											<Show
 												when={!isCountdown()}
 												fallback={
@@ -897,7 +897,7 @@ function InProgressRecordingInner() {
 							</div>
 						</div>
 						<div
-							class="non-styled-move flex cursor-move items-center justify-center border-l border-gray-5 p-[0.25rem] hover:cursor-move transition-colors duration-100 hover:bg-gray-12/[0.04] dark:hover:bg-white/[0.06]"
+							class="non-styled-move flex cursor-move items-center justify-center border-l border-gray-5 p-1 hover:cursor-move transition-colors duration-100 hover:bg-gray-12/4 dark:hover:bg-white/6"
 							data-tauri-drag-region
 						>
 							<IconCapMoreVertical class="pointer-events-none text-gray-10" />
@@ -914,10 +914,10 @@ function ActionButton(props: ComponentProps<"button">) {
 		<button
 			{...props}
 			class={cx(
-				"p-[0.25rem] rounded-lg transition-colors duration-100",
+				"p-1 rounded-lg transition-colors duration-100",
 				"text-gray-11 hover:text-gray-12",
-				"hover:bg-gray-12/[0.06] dark:hover:bg-white/[0.08]",
-				"active:bg-gray-12/[0.1] dark:active:bg-white/[0.12]",
+				"hover:bg-gray-12/6 dark:hover:bg-white/8",
+				"active:bg-gray-12/10 dark:active:bg-white/12",
 				"h-8 w-8 flex items-center justify-center",
 				"disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-transparent",
 				props.class,
diff --git a/apps/desktop/src/routes/recordings-overlay.tsx b/apps/desktop/src/routes/recordings-overlay.tsx
index d2e05c9fc02..ab0a71a1ac5 100644
--- a/apps/desktop/src/routes/recordings-overlay.tsx
+++ b/apps/desktop/src/routes/recordings-overlay.tsx
@@ -99,7 +99,7 @@ export default function () {
 
 	return (
 		<div
-			class="w-screen h-[100vh] bg-transparent relative overflow-y-hidden"
+			class="w-screen h-screen bg-transparent relative overflow-y-hidden"
 			style={{
 				"scrollbar-color": "auto transparent",
 			}}
@@ -165,13 +165,13 @@ export default function () {
 											ref={setRef}
 											style={{ "border-color": "rgba(255, 255, 255, 0.1)" }}
 											class={cx(
-												"overflow-hidden relative rounded-xl shadow transition-all duration-200 w-[260px] h-[150px] bg-gray-12 border-[1px] group",
+												"overflow-hidden relative rounded-xl shadow-sm transition-all duration-200 w-[260px] h-[150px] bg-gray-12 border group",
 											)}
 										>
 											<div
 												class={cx(
 													"w-full h-full flex relative bg-transparent z-10 overflow-hidden transition-all",
-													isLoading() && "backdrop-blur bg-gray-12",
+													isLoading() && "backdrop-blur-sm bg-gray-12",
 												)}
 												style={{
 													"pointer-events": "auto",
@@ -287,7 +287,7 @@ export default function () {
 														showUpgradeTooltip()
 															? "opacity-100"
 															: "opacity-0 group-hover:opacity-100",
-														"backdrop-blur p-2",
+														"backdrop-blur-sm p-2",
 													)}
 												>
 													<TooltipIconButton
@@ -310,7 +310,7 @@ export default function () {
 															);
 														}}
 													>
-														<IconCapCircleX class="size-[1rem]" />
+														<IconCapCircleX class="size-4" />
 													</TooltipIconButton>
 													{isRecording ? (
 														<TooltipIconButton
@@ -336,7 +336,7 @@ export default function () {
 																});
 															}}
 														>
-															<IconCapEditor class="size-[1rem]" />
+															<IconCapEditor class="size-4" />
 														</TooltipIconButton>
 													) : (
 														<TooltipIconButton
@@ -347,7 +347,7 @@ export default function () {
 																commands.openFilePath(media.path);
 															}}
 														>
-															<IconLucideEye class="size-[1rem]" />
+															<IconLucideEye class="size-4" />
 														</TooltipIconButton>
 													)}
 													<TooltipIconButton
@@ -360,10 +360,10 @@ export default function () {
 														tooltipPlacement="left"
 														onClick={() => copy.mutate()}
 													>
-														<IconCapCopy class="size-[1rem]" />
+														<IconCapCopy class="size-4" />
 													</TooltipIconButton>
 													<TooltipIconButton
-														class="absolute right-3 bottom-3 z-[998]"
+														class="absolute right-3 bottom-3 z-998"
 														tooltipText={
 															recordingMeta.data?.sharing
 																? "Copy Shareable Link"
@@ -372,7 +372,7 @@ export default function () {
 														tooltipPlacement="left"
 														onClick={() => upload.mutate()}
 													>
-														<IconCapUpload class="size-[1rem]" />
+														<IconCapUpload class="size-4" />
 													</TooltipIconButton>
 													<div class="flex absolute inset-0 justify-center items-center">
 														<Button
@@ -448,7 +448,7 @@ function ActionProgressOverlay(props: {
 			style={{
 				"background-color": "rgba(0, 0, 0, 0.85)",
 			}}
-			class="absolute inset-0 flex items-center justify-center z-[999999] pointer-events-auto"
+			class="absolute inset-0 flex items-center justify-center z-999999 pointer-events-auto"
 		>
 			<div class="w-[80%] text-center">
 				<h3 class="mb-3 text-sm font-medium text-gray-1 dark:text-gray-12">
diff --git a/apps/desktop/src/routes/screenshot-editor/AnnotationConfig.tsx b/apps/desktop/src/routes/screenshot-editor/AnnotationConfig.tsx
index 2dee4442a6b..cfa13212ccc 100644
--- a/apps/desktop/src/routes/screenshot-editor/AnnotationConfig.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/AnnotationConfig.tsx
@@ -209,7 +209,7 @@ function ColorPickerButton(props: {
 
 	return (
 		<Popover placement="bottom" gutter={8}>
-			<Popover.Trigger class="outline-none group">
+			<Popover.Trigger class="outline-hidden group">
 				<div class="size-5 rounded-full border border-gray-5 transition-all group-hover:scale-110 group-hover:border-gray-7 group-active:scale-95 overflow-hidden">
 					<div
 						class="w-full h-full"
@@ -224,7 +224,7 @@ function ColorPickerButton(props: {
 				</div>
 			</Popover.Trigger>
 			<Popover.Portal>
-				<Popover.Content class="z-[200] w-[220px] overflow-hidden rounded-lg border border-gray-4 bg-gray-1 dark:bg-gray-2 shadow-lg animate-in fade-in zoom-in-95 p-2.5">
+				<Popover.Content class="z-200 w-[220px] overflow-hidden rounded-lg border border-gray-4 bg-gray-1 dark:bg-gray-2 shadow-lg animate-in fade-in zoom-in-95 p-2.5">
 					<div class="flex flex-col gap-2.5">
 						<RgbInput
 							value={rgbValue()}
diff --git a/apps/desktop/src/routes/screenshot-editor/AnnotationLayer.tsx b/apps/desktop/src/routes/screenshot-editor/AnnotationLayer.tsx
index 2bf44cbec6e..0a6f93c7312 100644
--- a/apps/desktop/src/routes/screenshot-editor/AnnotationLayer.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/AnnotationLayer.tsx
@@ -589,7 +589,7 @@ export function AnnotationLayer(props: {
 								class="overflow-visible"
 							>
 								<div
-									class="text-editor bg-transparent outline-none p-0 m-0"
+									class="text-editor bg-transparent outline-hidden p-0 m-0"
 									contentEditable
 									style={{
 										"font-size": `${ann.height}px`,
diff --git a/apps/desktop/src/routes/screenshot-editor/AnnotationTools.tsx b/apps/desktop/src/routes/screenshot-editor/AnnotationTools.tsx
index 22acae883a3..905a0824e7d 100644
--- a/apps/desktop/src/routes/screenshot-editor/AnnotationTools.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/AnnotationTools.tsx
@@ -23,7 +23,7 @@ export function AnnotationTools() {
 					type="button"
 					onClick={() => setLayersPanelOpen(!layersPanelOpen())}
 					class={cx(
-						"flex items-center justify-center rounded-[0.5rem] transition-all size-8",
+						"flex items-center justify-center rounded-lg transition-all size-8",
 						layersPanelOpen()
 							? "bg-blue-3 text-blue-11"
 							: "bg-transparent hover:bg-gray-3 text-gray-11",
@@ -90,7 +90,7 @@ function ToolButton(props: {
 					}
 				}}
 				class={cx(
-					"flex items-center justify-center rounded-[0.5rem] transition-all size-8",
+					"flex items-center justify-center rounded-lg transition-all size-8",
 					activeTool() === props.tool
 						? "bg-blue-3 text-blue-11"
 						: "bg-transparent hover:bg-gray-3 text-gray-11",
diff --git a/apps/desktop/src/routes/screenshot-editor/ColorPicker.tsx b/apps/desktop/src/routes/screenshot-editor/ColorPicker.tsx
index 5e7f4b6c6e9..9ee1c0cbb35 100644
--- a/apps/desktop/src/routes/screenshot-editor/ColorPicker.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/ColorPicker.tsx
@@ -45,10 +45,10 @@ export function RgbInput(props: {
 	};
 
 	return (
-		<div class="flex flex-row items-center gap-[0.75rem] relative">
+		<div class="flex flex-row items-center gap-3 relative">
 			<button
 				type="button"
-				class="size-[2rem] rounded-[0.5rem] border border-gray-4"
+				class="size-8 rounded-lg border border-gray-4"
 				style={{
 					"background-color": rgbToHex(props.value),
 				}}
@@ -57,7 +57,7 @@ export function RgbInput(props: {
 			<input
 				ref={colorInput}
 				type="color"
-				class="absolute left-0 bottom-0 w-[3rem] opacity-0"
+				class="absolute left-0 bottom-0 w-12 opacity-0"
 				value={rgbToHex(props.value)}
 				onChange={(e) => {
 					const value = hexToRgb(e.target.value);
@@ -67,7 +67,7 @@ export function RgbInput(props: {
 				}}
 			/>
 			<TextInput
-				class="w-[4.60rem] p-[0.375rem] text-gray-12 text-[13px] border rounded-[0.5rem] bg-gray-1 outline-none focus:ring-1 transition-shadows duration-200 focus:ring-gray-500 focus:ring-offset-1 focus:ring-offset-gray-200"
+				class="w-[4.60rem] p-1.5 text-gray-12 text-[13px] border rounded-lg bg-gray-1 outline-hidden focus:ring-1 transition-shadows duration-200 focus:ring-gray-500 focus:ring-offset-1 focus:ring-offset-gray-200"
 				value={text()}
 				onFocus={() => {
 					prevHex = rgbToHex(props.value);
diff --git a/apps/desktop/src/routes/screenshot-editor/Editor.tsx b/apps/desktop/src/routes/screenshot-editor/Editor.tsx
index 543d6e453e3..ad0402d74c3 100644
--- a/apps/desktop/src/routes/screenshot-editor/Editor.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/Editor.tsx
@@ -329,7 +329,7 @@ function Dialogs() {
 											format={false}
 										>
 											<NumberField.Input
-												class="rounded-[0.5rem] bg-gray-2 hover:ring-1 py-[18px] hover:ring-gray-5 h-[2rem] font-normal placeholder:text-black-transparent-40 text-xs caret-gray-500 transition-shadow duration-200 focus:ring-offset-1 focus:bg-gray-3 focus:ring-offset-gray-100 focus:ring-1 focus:ring-gray-10 px-[0.5rem] w-full text-[0.875rem] outline-none text-gray-12"
+												class="rounded-lg bg-gray-2 hover:ring-1 py-[18px] hover:ring-gray-5 h-8 font-normal placeholder:text-black-transparent-40 text-xs caret-gray-500 transition-shadow duration-200 focus:ring-offset-1 focus:bg-gray-3 focus:ring-offset-gray-100 focus:ring-1 focus:ring-gray-10 px-2 w-full text-[0.875rem] outline-hidden text-gray-12"
 												onKeyDown={composeEventHandlers<HTMLInputElement>([
 													(e) => e.stopPropagation(),
 												])}
@@ -341,35 +341,35 @@ function Dialogs() {
 								return (
 									<>
 										<Dialog.Header>
-											<div class="flex flex-row space-x-[2rem]">
-												<div class="flex flex-row items-center space-x-[0.75rem] text-gray-11">
+											<div class="flex flex-row space-x-8">
+												<div class="flex flex-row items-center space-x-3 text-gray-11">
 													<span>Size</span>
-													<div class="w-[3.25rem]">
+													<div class="w-13">
 														<BoundInput field="width" max={originalSize.x} />
 													</div>
 													<span>×</span>
-													<div class="w-[3.25rem]">
+													<div class="w-13">
 														<BoundInput field="height" max={originalSize.y} />
 													</div>
 												</div>
-												<div class="flex flex-row items-center space-x-[0.75rem] text-gray-11">
+												<div class="flex flex-row items-center space-x-3 text-gray-11">
 													<span>Position</span>
-													<div class="w-[3.25rem]">
+													<div class="w-13">
 														<BoundInput field="x" />
 													</div>
 													<span>×</span>
-													<div class="w-[3.25rem]">
+													<div class="w-13">
 														<BoundInput field="y" />
 													</div>
 												</div>
 											</div>
 											<div class="flex flex-row gap-3 justify-end items-center w-full">
-												<div class="flex flex-row items-center space-x-[0.5rem] text-gray-11"></div>
+												<div class="flex flex-row items-center space-x-2 text-gray-11"></div>
 
 												<Button
 													variant="white"
 													size="xs"
-													class="flex items-center justify-center text-center rounded-full h-[2rem] w-[2rem] border focus:border-blue-9"
+													class="flex items-center justify-center text-center rounded-full h-8 w-8 border focus:border-blue-9"
 													onClick={showCropOptionsMenu}
 												>
 													<div class="relative pointer-events-none size-4">
@@ -378,7 +378,7 @@ function Dialogs() {
 														</Show>
 														<Transition
 															enterClass="scale-50 opacity-0 blur-md"
-															enterActiveClass="duration-200 [transition-timing-function:cubic-bezier(0.215,0.61,0.355,1)]"
+															enterActiveClass="duration-200 ease-[cubic-bezier(0.215,0.61,0.355,1)]"
 															enterToClass="scale-100 opacity-100 blur-0"
 															exitClass="opacity-0"
 															exitActiveClass="duration-0"
@@ -424,9 +424,9 @@ function Dialogs() {
 										</Dialog.Header>
 										<Dialog.Content>
 											<div class="flex flex-row justify-center items-center">
-												<div class="rounded-[1.25rem] bg-gray-2/80 p-3 shadow-sm ring-1 ring-black/5 dark:bg-gray-3/80">
+												<div class="rounded-[1.25rem] bg-gray-2/80 p-3 shadow-xs ring-1 ring-black/5 dark:bg-gray-3/80">
 													<div
-														class="relative rounded overflow-visible select-none"
+														class="relative rounded-sm overflow-visible select-none"
 														style={previewSize()}
 													>
 														<Cropper
@@ -447,7 +447,7 @@ function Dialogs() {
 															}
 														>
 															<img
-																class="w-full h-full pointer-events-none select-none shadow"
+																class="w-full h-full pointer-events-none select-none shadow-sm"
 																alt="screenshot"
 																src={convertFileSrc(imagePath())}
 															/>
diff --git a/apps/desktop/src/routes/screenshot-editor/LayersPanel.tsx b/apps/desktop/src/routes/screenshot-editor/LayersPanel.tsx
index 93d949717a1..36a83cbe69e 100644
--- a/apps/desktop/src/routes/screenshot-editor/LayersPanel.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/LayersPanel.tsx
@@ -206,7 +206,7 @@ export function LayersPanel() {
 				<button
 					type="button"
 					onClick={() => setLayersPanelOpen(false)}
-					class="p-1 rounded hover:bg-gray-3 text-gray-11 hover:text-gray-12 transition-colors"
+					class="p-1 rounded-sm hover:bg-gray-3 text-gray-11 hover:text-gray-12 transition-colors"
 				>
 					<IconLucideX class="size-4" />
 				</button>
@@ -272,7 +272,7 @@ export function LayersPanel() {
 
 										<div
 											class={cx(
-												"flex items-center justify-center size-6 rounded",
+												"flex items-center justify-center size-6 rounded-sm",
 												isSelected()
 													? "bg-blue-5 text-blue-11"
 													: "bg-gray-3 text-gray-11",
@@ -293,7 +293,7 @@ export function LayersPanel() {
 										<button
 											type="button"
 											onClick={(e) => handleDelete(ann.id, e)}
-											class="opacity-0 group-hover:opacity-100 p-0.5 rounded hover:bg-red-3 text-gray-9 hover:text-red-11 transition-all"
+											class="opacity-0 group-hover:opacity-100 p-0.5 rounded-sm hover:bg-red-3 text-gray-9 hover:text-red-11 transition-all"
 										>
 											<IconLucideX class="size-3" />
 										</button>
diff --git a/apps/desktop/src/routes/screenshot-editor/Preview.tsx b/apps/desktop/src/routes/screenshot-editor/Preview.tsx
index 2b353d3c8f6..e46a1fef600 100644
--- a/apps/desktop/src/routes/screenshot-editor/Preview.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/Preview.tsx
@@ -430,11 +430,11 @@ export function Preview(props: { zoom: number; setZoom: (z: number) => void }) {
 			{/* Preview Area */}
 			<div
 				ref={setCanvasContainerRef}
-				class="flex-1 relative flex items-center justify-center overflow-hidden outline-none"
+				class="flex-1 relative flex items-center justify-center overflow-hidden outline-hidden"
 				style={gridStyle}
 				onMouseDown={handleMiddleMouseDown}
 			>
-				<div class="absolute left-4 bottom-4 z-10 flex items-center gap-2 bg-gray-1 dark:bg-gray-3 rounded-lg shadow-sm p-1 border border-gray-4">
+				<div class="absolute left-4 bottom-4 z-10 flex items-center gap-2 bg-gray-1 dark:bg-gray-3 rounded-lg shadow-xs p-1 border border-gray-4">
 					<EditorButton
 						tooltipText="Zoom Out"
 						kbd={["meta", "-"]}
diff --git a/apps/desktop/src/routes/screenshot-editor/popovers/AspectRatioSelect.tsx b/apps/desktop/src/routes/screenshot-editor/popovers/AspectRatioSelect.tsx
index b218c21b2dd..d4d298fb6b8 100644
--- a/apps/desktop/src/routes/screenshot-editor/popovers/AspectRatioSelect.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/popovers/AspectRatioSelect.tsx
@@ -94,7 +94,7 @@ export function AspectRatioSelect() {
 				>
 					<MenuItemList<typeof KSelect.Listbox>
 						as={KSelect.Listbox}
-						class="w-[12.5rem]"
+						class="w-50"
 					/>
 				</PopperContent>
 			</KSelect.Portal>
diff --git a/apps/desktop/src/routes/screenshot-editor/popovers/BackgroundSettingsPopover.tsx b/apps/desktop/src/routes/screenshot-editor/popovers/BackgroundSettingsPopover.tsx
index cfaf0649320..bcfc855385b 100644
--- a/apps/desktop/src/routes/screenshot-editor/popovers/BackgroundSettingsPopover.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/popovers/BackgroundSettingsPopover.tsx
@@ -276,12 +276,12 @@ export function BackgroundSettingsPopover() {
 									}
 								}}
 							>
-								<KTabs.List class="flex flex-row gap-2 items-center rounded-[0.5rem] relative">
+								<KTabs.List class="flex flex-row gap-2 items-center rounded-lg relative">
 									<For each={BACKGROUND_SOURCES_LIST}>
 										{(item) => {
 											return (
 												<KTabs.Trigger
-													class="z-10 flex-1 py-2.5 px-2 text-xs text-gray-11  ui-selected:border-gray-3 ui-selected:bg-gray-3 ui-not-selected:hover:border-gray-7 rounded-[10px] transition-colors duration-200 outline-none border ui-selected:text-gray-12 peer"
+													class="z-10 flex-1 py-2.5 px-2 text-xs text-gray-11 data-selected:border-gray-3 data-selected:bg-gray-3 not-data-selected:hover:border-gray-7 rounded-[10px] transition-colors duration-200 outline-hidden border data-selected:text-gray-12 peer"
 													value={item}
 												>
 													{BACKGROUND_SOURCES[item]}
@@ -308,7 +308,7 @@ export function BackgroundSettingsPopover() {
 															)
 														}
 														value={key}
-														class="flex relative z-10 flex-1 justify-center items-center px-4 py-2 bg-transparent rounded-lg border transition-colors duration-200 text-gray-11 ui-not-selected:hover:border-gray-7 ui-selected:bg-gray-3 ui-selected:border-gray-3 group ui-selected:text-gray-12 disabled:opacity-50 focus:outline-none"
+														class="flex relative z-10 flex-1 justify-center items-center px-4 py-2 bg-transparent rounded-lg border transition-colors duration-200 text-gray-11 not-data-selected:hover:border-gray-7 data-selected:bg-gray-3 data-selected:border-gray-3 group data-selected:text-gray-12 disabled:opacity-50 focus:outline-hidden"
 													>
 														{value}
 													</KTabs.Trigger>
@@ -345,7 +345,7 @@ export function BackgroundSettingsPopover() {
 													class="relative aspect-square group"
 												>
 													<KRadioGroup.ItemInput class="peer" />
-													<KRadioGroup.ItemControl class="overflow-hidden w-full h-full rounded-lg transition cursor-pointer ui-not-checked:ring-offset-1 ui-not-checked:ring-offset-gray-200 ui-not-checked:hover:ring-1 ui-not-checked:hover:ring-gray-400 ui-checked:ring-2 ui-checked:ring-gray-500 ui-checked:ring-offset-2 ui-checked:ring-offset-gray-200">
+													<KRadioGroup.ItemControl class="overflow-hidden w-full h-full rounded-lg transition cursor-pointer not-data-checked:ring-offset-1 not-data-checked:ring-offset-gray-200 not-data-checked:hover:ring-1 not-data-checked:hover:ring-gray-400 data-checked:ring-2 data-checked:ring-gray-500 data-checked:ring-offset-2 data-checked:ring-offset-gray-200">
 														<img
 															src={photo.url}
 															loading="eager"
@@ -369,7 +369,7 @@ export function BackgroundSettingsPopover() {
 											<button
 												type="button"
 												onClick={() => fileInput.click()}
-												class="p-6 bg-gray-2 text-[13px] w-full rounded-[0.5rem] border border-gray-5 border-dashed flex flex-col items-center justify-center gap-[0.5rem] hover:bg-gray-3 transition-colors duration-100"
+												class="p-6 bg-gray-2 text-[13px] w-full rounded-lg border border-gray-5 border-dashed flex flex-col items-center justify-center gap-2 hover:bg-gray-3 transition-colors duration-100"
 											>
 												<IconCapImage class="text-gray-11 size-6" />
 												<span class="text-gray-12">
@@ -464,7 +464,7 @@ export function BackgroundSettingsPopover() {
 															}}
 														/>
 														<div
-															class="rounded-lg transition-all duration-200 cursor-pointer size-8 peer-checked:hover:opacity-100 peer-hover:opacity-70 peer-checked:ring-2 peer-checked:ring-gray-500 peer-checked:ring-offset-2 peer-checked:ring-offset-gray-200"
+															class="rounded-lg transition-all duration-200 cursor-pointer size-8 hover:peer-checked:opacity-100 peer-hover:opacity-70 peer-checked:ring-2 peer-checked:ring-gray-500 peer-checked:ring-offset-2 peer-checked:ring-offset-gray-200"
 															style={{ background: color }}
 														/>
 													</label>
@@ -519,7 +519,7 @@ export function BackgroundSettingsPopover() {
 																		}}
 																	/>
 																	<div
-																		class="rounded-lg transition-all duration-200 cursor-pointer size-8 peer-checked:hover:opacity-100 peer-hover:opacity-70 peer-checked:ring-2 peer-checked:ring-gray-500 peer-checked:ring-offset-2 peer-checked:ring-offset-gray-200"
+																		class="rounded-lg transition-all duration-200 cursor-pointer size-8 hover:peer-checked:opacity-100 peer-hover:opacity-70 peer-checked:ring-2 peer-checked:ring-gray-500 peer-checked:ring-offset-2 peer-checked:ring-offset-gray-200"
 																		style={{
 																			background: `linear-gradient(${angle()}deg, rgb(${gradient.from.join(
 																				",",
diff --git a/apps/desktop/src/routes/screenshot-editor/popovers/BorderPopover.tsx b/apps/desktop/src/routes/screenshot-editor/popovers/BorderPopover.tsx
index 212a87c5ded..9105980a9b2 100644
--- a/apps/desktop/src/routes/screenshot-editor/popovers/BorderPopover.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/popovers/BorderPopover.tsx
@@ -53,7 +53,7 @@ export function BorderPopover() {
 						</div>
 
 						<Collapsible open={project.background.border?.enabled ?? false}>
-							<Collapsible.Content class="overflow-hidden opacity-0 transition-opacity animate-collapsible-up ui-expanded:animate-collapsible-down ui-expanded:opacity-100">
+							<Collapsible.Content class="overflow-hidden opacity-0 transition-opacity animate-collapsible-up data-expanded:animate-collapsible-down data-expanded:opacity-100">
 								<div class="flex flex-col gap-4">
 									<Field name="Width" icon={<IconCapEnlarge class="size-4" />}>
 										<Slider
diff --git a/apps/desktop/src/routes/screenshot-editor/popovers/RoundingPopover.tsx b/apps/desktop/src/routes/screenshot-editor/popovers/RoundingPopover.tsx
index 85d0aec3a2a..f86f91ed0bd 100644
--- a/apps/desktop/src/routes/screenshot-editor/popovers/RoundingPopover.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/popovers/RoundingPopover.tsx
@@ -144,14 +144,14 @@ function CornerStyleSelect(props: {
 					<KSelect.Value<{
 						name: string;
 						value: CornerRoundingType;
-					}> class="flex-1 text-sm text-left truncate text-[--gray-500] font-normal">
+					}> class="flex-1 text-sm text-left truncate text-(--gray-500) font-normal">
 						{(state) => <span>{state.selectedOption().name}</span>}
 					</KSelect.Value>
 					<KSelect.Icon<ValidComponent>
 						as={(iconProps) => (
 							<IconCapChevronDown
 								{...iconProps}
-								class="size-4 shrink-0 transform transition-transform ui-expanded:rotate-180 text-[--gray-500]"
+								class="size-4 shrink-0 transform transition-transform data-expanded:rotate-180 text-(--gray-500)"
 							/>
 						)}
 					/>
diff --git a/apps/desktop/src/routes/screenshot-editor/popovers/ShadowSettings.tsx b/apps/desktop/src/routes/screenshot-editor/popovers/ShadowSettings.tsx
index e2eca87f227..2392ebb95b6 100644
--- a/apps/desktop/src/routes/screenshot-editor/popovers/ShadowSettings.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/popovers/ShadowSettings.tsx
@@ -51,7 +51,7 @@ const ShadowSettings = (props: Props) => {
 				/>
 			</button>
 			<KCollapsible open={isOpen()}>
-				<KCollapsible.Content class="overflow-hidden opacity-0 transition-opacity animate-collapsible-up ui-expanded:animate-collapsible-down ui-expanded:opacity-100">
+				<KCollapsible.Content class="overflow-hidden opacity-0 transition-opacity animate-collapsible-up data-expanded:animate-collapsible-down data-expanded:opacity-100">
 					<div class="mt-4 space-y-6 font-medium">
 						<Field name="Size">
 							<Slider
diff --git a/apps/desktop/src/routes/screenshot-editor/screenshot-editor-skeleton.tsx b/apps/desktop/src/routes/screenshot-editor/screenshot-editor-skeleton.tsx
index 4682750f851..28257ed849c 100644
--- a/apps/desktop/src/routes/screenshot-editor/screenshot-editor-skeleton.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/screenshot-editor-skeleton.tsx
@@ -5,7 +5,10 @@ import IconCapLogo from "~icons/cap/logo";
 function SkeletonPulse(props: { class?: string }) {
 	return (
 		<div
-			class={cx("animate-pulse rounded bg-gray-3 dark:bg-gray-4", props.class)}
+			class={cx(
+				"animate-pulse rounded-sm bg-gray-3 dark:bg-gray-4",
+				props.class,
+			)}
 		/>
 	);
 }
@@ -64,7 +67,7 @@ function PreviewSkeleton() {
 	return (
 		<div class="flex flex-col flex-1 overflow-hidden bg-gray-1 dark:bg-gray-2">
 			<div class="flex-1 relative flex items-center justify-center overflow-hidden bg-gray-2 dark:bg-gray-3">
-				<div class="absolute left-4 bottom-4 z-10 flex items-center gap-2 bg-gray-1 dark:bg-gray-3 rounded-lg shadow-sm p-1 border border-gray-4">
+				<div class="absolute left-4 bottom-4 z-10 flex items-center gap-2 bg-gray-1 dark:bg-gray-3 rounded-lg shadow-xs p-1 border border-gray-4">
 					<SkeletonButton />
 					<SkeletonPulse class="w-20 h-2 rounded-full" />
 					<SkeletonButton />
diff --git a/apps/desktop/src/routes/screenshot-editor/ui.tsx b/apps/desktop/src/routes/screenshot-editor/ui.tsx
index 1f35bba049d..eb9da13e76f 100644
--- a/apps/desktop/src/routes/screenshot-editor/ui.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/ui.tsx
@@ -35,7 +35,7 @@ export function Field(
 		<div class={cx("flex flex-col gap-4", props.class)}>
 			<span
 				data-disabled={props.disabled}
-				class="flex flex-row items-center gap-[0.375rem] text-gray-12 data-[disabled='true']:text-gray-10 font-medium text-sm"
+				class="flex flex-row items-center gap-1.5 text-gray-12 data-[disabled='true']:text-gray-10 font-medium text-sm"
 			>
 				{props.icon}
 				{props.name}
@@ -107,7 +107,7 @@ export function Slider(
 					});
 				}}
 			>
-				<KSlider.Fill class="absolute -ml-2 h-full rounded-full bg-blue-9 ui-disabled:bg-gray-8" />
+				<KSlider.Fill class="absolute -ml-2 h-full rounded-full bg-blue-9 data-disabled:bg-gray-8" />
 				<Tooltip
 					open={dragging() ? true : undefined}
 					getAnchorRect={() => {
@@ -137,7 +137,7 @@ export function Slider(
 							setDragging(false);
 						}}
 						class={cx(
-							"bg-gray-1 dark:bg-gray-12 border border-gray-6 shadow-md rounded-full outline-none size-4 -top-[6.3px] ui-disabled:bg-gray-9 after:content-[''] after:absolute after:inset-0 after:-m-3 after:cursor-pointer",
+							"bg-gray-1 dark:bg-gray-12 border border-gray-6 shadow-md rounded-full outline-hidden size-4 -top-[6.3px] data-disabled:bg-gray-9 after:content-[''] after:absolute after:inset-0 after:-m-3 after:cursor-pointer",
 						)}
 					/>
 				</Tooltip>
@@ -152,7 +152,7 @@ export function Input(props: ComponentProps<"input">) {
 			{...props}
 			class={cx(
 				props.class,
-				"rounded-[0.5rem] bg-gray-2 hover:ring-1 py-[18px] hover:ring-gray-5 h-[2rem] font-normal placeholder:text-black-transparent-40 text-xs caret-gray-500 transition-shadow duration-200 focus:ring-offset-1 focus:bg-gray-3 focus:ring-offset-gray-100 focus:ring-1 focus:ring-gray-10 px-[0.5rem] w-full text-[0.875rem] outline-none text-gray-12",
+				"rounded-lg bg-gray-2 hover:ring-1 py-[18px] hover:ring-gray-5 h-8 font-normal placeholder:text-black-transparent-40 text-xs caret-gray-500 transition-shadow duration-200 focus:ring-offset-1 focus:bg-gray-3 focus:ring-offset-gray-100 focus:ring-1 focus:ring-gray-10 px-2 w-full text-[0.875rem] outline-hidden text-gray-12",
 			)}
 		/>
 	);
@@ -170,13 +170,13 @@ export const Dialog = {
 			<KDialog {...props}>
 				<KDialog.Portal>
 					{!props.hideOverlay && (
-						<KDialog.Overlay class="fixed inset-0 z-50 bg-[#000]/80 ui-expanded:animate-in ui-expanded:fade-in ui-closed:animate-out ui-closed:fade-out" />
+						<KDialog.Overlay class="fixed inset-0 z-50 bg-black/80 data-expanded:animate-in data-expanded:fade-in data-closed:animate-out data-closed:fade-out" />
 					)}
 					<div class="flex fixed inset-0 z-50 justify-center items-center">
 						<KDialog.Content
 							class={cx(
 								props.contentClass,
-								"z-50 text-sm rounded-[1.25rem] overflow-hidden border border-gray-3 bg-gray-1 min-w-[22rem] ui-expanded:animate-in ui-expanded:fade-in ui-expanded:zoom-in-95 origin-top ui-closed:animate-out ui-closed:fade-out ui-closed:zoom-out-95",
+								"z-50 text-sm rounded-[1.25rem] overflow-hidden border border-gray-3 bg-gray-1 min-w-88 data-expanded:animate-in data-expanded:fade-in data-expanded:zoom-in-95 origin-top data-closed:animate-out data-closed:fade-out data-closed:zoom-out-95",
 								(props.size ?? "sm") === "sm" ? "max-w-96" : "max-w-3xl",
 							)}
 						>
@@ -210,7 +210,7 @@ export const Dialog = {
 		return (
 			<div
 				class={cx(
-					"h-[4rem] px-[1rem] gap-3 flex flex-row items-center",
+					"h-16 px-4 gap-3 flex flex-row items-center",
 					props.leftFooterContent ? "justify-between" : "justify-center",
 					props.class,
 				)}
@@ -222,15 +222,13 @@ export const Dialog = {
 		);
 	},
 	Header(props: ComponentProps<"div">) {
-		return (
-			<div {...props} class="h-[3.5rem] px-[1rem] flex flex-row items-center" />
-		);
+		return <div {...props} class="h-14 px-4 flex flex-row items-center" />;
 	},
 	Content(props: ComponentProps<"div">) {
 		return (
 			<div
 				{...props}
-				class={cx("p-[1rem] flex flex-col border-y border-gray-3", props.class)}
+				class={cx("p-4 flex flex-col border-y border-gray-3", props.class)}
 			/>
 		);
 	},
@@ -271,8 +269,8 @@ export function MenuItem<T extends ValidComponent = "button">(
 			{...props}
 			class={cx(
 				props.class,
-				"flex flex-row shrink-0 items-center gap-[0.375rem] px-[0.675rem] py-[0.375rem] rounded-[0.5rem] outline-none text-nowrap overflow-hidden text-ellipsis w-full max-w-full",
-				"text-[0.875rem] text-gray-10 disabled:text-gray-10 ui-highlighted:bg-gray-3 ui-highlighted:text-gray-12",
+				"flex flex-row shrink-0 items-center gap-1.5 px-[0.675rem] py-1.5 rounded-lg outline-hidden text-nowrap overflow-hidden text-ellipsis w-full max-w-full",
+				"text-[0.875rem] text-gray-10 disabled:text-gray-10 data-highlighted:bg-gray-3 data-highlighted:text-gray-12",
 			)}
 		/>
 	);
@@ -302,7 +300,7 @@ export function MenuItemList<T extends ValidComponent = "div">(
 			{...props}
 			class={cx(
 				props.class,
-				"space-y-[0.375rem] p-[0.375rem] overflow-y-auto outline-none",
+				"space-y-1.5 p-1.5 overflow-y-auto outline-hidden",
 			)}
 		/>
 	);
@@ -310,17 +308,17 @@ export function MenuItemList<T extends ValidComponent = "div">(
 
 const editorButtonStyles = cva(
 	[
-		"group flex flex-row items-center px-[0.375rem] gap-[0.375rem] h-[2rem] rounded-[0.5rem] text-[0.875rem]",
-		"focus:outline focus:outline-2 focus:outline-offset-2 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 transition-colors duration-100",
+		"group flex flex-row items-center px-1.5 gap-1.5 h-8 rounded-lg text-[0.875rem]",
+		"focus:outline-solid focus:outline-2 focus:outline-offset-2 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 transition-colors duration-100",
 		"disabled:opacity-50 disabled:text-gray-11",
 	],
 	{
 		variants: {
 			variant: {
 				primary:
-					"text-gray-12 enabled:hover:ui-not-pressed:bg-gray-3 ui-expanded:bg-gray-3 outline-blue-300 focus:bg-transparent",
+					"text-gray-12 enabled:hover:not-data-pressed:bg-gray-3 data-expanded:bg-gray-3 outline-blue-300 focus:bg-transparent",
 				danger:
-					"text-gray-12 enabled:hover:ui-not-pressed:bg-gray-3 ui-expanded:bg-red-300 ui-pressed:bg-red-300 ui-expanded:text-gray-1 ui-pressed:text-gray-1 outline-red-300",
+					"text-gray-12 enabled:hover:not-data-pressed:bg-gray-3 data-expanded:bg-red-300 data-pressed:bg-red-300 data-expanded:text-gray-1 data-pressed:text-gray-1 outline-red-300",
 			},
 		},
 		defaultVariants: { variant: "primary" },
@@ -331,9 +329,9 @@ const editorButtonLeftIconStyles = cva("transition-colors duration-100", {
 	variants: {
 		variant: {
 			primary:
-				"text-gray-12 enabled:group-hover:not-ui-group-disabled:text-gray-12 ui-group-expanded:text-gray-12",
+				"text-gray-12 enabled:group-hover:not-data-group-disabled:text-gray-12 data-group-expanded:text-gray-12",
 			danger:
-				"text-gray-12 enabled:group-hover:text-gray-12 ui-group-expanded:text-gray-1 ui-group-pressed:text-gray-1",
+				"text-gray-12 group-hover:enabled:text-gray-12 data-group-expanded:text-gray-1 data-group-pressed:text-gray-1",
 		},
 	},
 	defaultVariants: { variant: "primary" },
@@ -420,19 +418,19 @@ export function EditorButton<T extends ValidComponent = "button">(
 }
 
 export const dropdownContainerClasses =
-	"z-10 flex flex-col rounded-[0.75rem] border border-gray-3 bg-gray-1 shadow-s overflow-y-hidden outline-none";
+	"z-10 flex flex-col rounded-xl border border-gray-3 bg-gray-1 shadow-s overflow-y-hidden outline-hidden";
 
 export const topLeftAnimateClasses =
-	"ui-expanded:animate-in ui-expanded:fade-in ui-expanded:zoom-in-95 ui-closed:animate-out ui-closed:fade-out ui-closed:zoom-out-95 origin-top-left";
+	"data-expanded:animate-in data-expanded:fade-in data-expanded:zoom-in-95 data-closed:animate-out data-closed:fade-out data-closed:zoom-out-95 origin-top-left";
 
 export const topCenterAnimateClasses =
-	"ui-expanded:animate-in ui-expanded:fade-in ui-expanded:zoom-in-95 ui-closed:animate-out ui-closed:fade-out ui-closed:zoom-out-95 origin-top-center";
+	"data-expanded:animate-in data-expanded:fade-in data-expanded:zoom-in-95 data-closed:animate-out data-closed:fade-out data-closed:zoom-out-95 origin-top-center";
 
 export const topRightAnimateClasses =
-	"ui-expanded:animate-in ui-expanded:fade-in ui-expanded:zoom-in-95 ui-closed:animate-out ui-closed:fade-out ui-closed:zoom-out-95 origin-top-right";
+	"data-expanded:animate-in data-expanded:fade-in data-expanded:zoom-in-95 data-closed:animate-out data-closed:fade-out data-closed:zoom-out-95 origin-top-right";
 
 export const topSlideAnimateClasses =
-	"ui-expanded:animate-in ui-expanded:fade-in ui-expanded:slide-in-from-top-1 ui-closed:animate-out ui-closed:fade-out ui-closed:slide-out-to-top-1 origin-top-center";
+	"data-expanded:animate-in data-expanded:fade-in data-expanded:slide-in-from-top-1 data-closed:animate-out data-closed:fade-out data-closed:slide-out-to-top-1 origin-top-center";
 
 export function ComingSoonTooltip(
 	props: ComponentProps<typeof KTooltip> & { as?: ValidComponent },
@@ -444,7 +442,7 @@ export function ComingSoonTooltip(
 				{trigger.children}
 			</KTooltip.Trigger>
 			<KTooltip.Portal>
-				<KTooltip.Content class="p-2 font-medium bg-gray-12 text-gray-1 ui-expanded:animate-in ui-expanded:slide-in-from-bottom-1 ui-expanded:fade-in ui-closed:animate-out ui-closed:slide-out-to-bottom-1 ui-closed:fade-out rounded-lg text-xs z-[1000]">
+				<KTooltip.Content class="p-2 font-medium bg-gray-12 text-gray-1 data-expanded:animate-in data-expanded:slide-in-from-bottom-1 data-expanded:fade-in data-closed:animate-out data-closed:slide-out-to-bottom-1 data-closed:fade-out rounded-lg text-xs z-1000">
 					Coming Soon
 				</KTooltip.Content>
 			</KTooltip.Portal>
diff --git a/apps/desktop/src/routes/target-select-overlay.tsx b/apps/desktop/src/routes/target-select-overlay.tsx
index d82c06dee46..fb238041a2e 100644
--- a/apps/desktop/src/routes/target-select-overlay.tsx
+++ b/apps/desktop/src/routes/target-select-overlay.tsx
@@ -1108,7 +1108,7 @@ function Inner() {
 										/>
 									</Show>
 									<Show when={!isValid()}>
-										<div class="flex flex-col gap-1 items-center p-2.5 my-2 rounded-xl border min-w-fit w-fit bg-red-2 shadow-sm border-red-4 text-sm">
+										<div class="flex flex-col gap-1 items-center p-2.5 my-2 rounded-xl border min-w-fit w-fit bg-red-2 shadow-xs border-red-4 text-sm">
 											<p>
 												Minimum size is {minSize().width} x {minSize().height}
 											</p>
@@ -1677,7 +1677,7 @@ function RecordingControls(props: {
 
 	return (
 		<>
-			<div class="flex flex-col gap-2.5 items-stretch my-2.5 w-[26rem] max-w-[90vw]">
+			<div class="flex flex-col gap-2.5 items-stretch my-2.5 w-104 max-w-[90vw]">
 				<div class="p-3 rounded-2xl border border-white/30 dark:border-white/10 bg-white/70 dark:bg-gray-2/70 shadow-lg backdrop-blur-xl">
 					<div class="flex gap-2.5 items-center">
 						<div
@@ -1696,7 +1696,7 @@ function RecordingControls(props: {
 						<div
 							data-inactive={rawOptions.mode === "instant" && !auth.data}
 							data-disabled={startDisabled()}
-							class="flex flex-1 min-w-0 max-w-[18rem] overflow-hidden flex-row h-11 rounded-full text-white bg-gradient-to-r from-blue-10 via-blue-10 to-blue-11 dark:from-blue-9 dark:via-blue-9 dark:to-blue-10 group"
+							class="flex flex-1 min-w-0 max-w-[18rem] overflow-hidden flex-row h-11 rounded-full text-white bg-linear-to-r from-blue-10 via-blue-10 to-blue-11 dark:from-blue-9 dark:via-blue-9 dark:to-blue-10 group"
 							onClick={async () => {
 								if (rawOptions.mode === "instant" && !auth.data) {
 									emit("start-sign-in");
@@ -1765,13 +1765,13 @@ function RecordingControls(props: {
 							>
 								<Switch>
 									<Match when={rawOptions.mode === "studio"}>
-										<IconCapFilmCut class="size-4 flex-shrink-0" />
+										<IconCapFilmCut class="size-4 shrink-0" />
 									</Match>
 									<Match when={rawOptions.mode === "instant"}>
-										<IconCapInstant class="size-4 flex-shrink-0" />
+										<IconCapInstant class="size-4 shrink-0" />
 									</Match>
 									<Match when={(rawOptions.mode as string) === "screenshot"}>
-										<IconCapCamera class="size-4 flex-shrink-0" />
+										<IconCapCamera class="size-4 shrink-0" />
 									</Match>
 								</Switch>
 								<div class="flex flex-col mr-2 ml-3 min-w-0">
diff --git a/apps/desktop/src/styles/theme.css b/apps/desktop/src/styles/theme.css
index 65039625c7c..c91d93a37e2 100644
--- a/apps/desktop/src/styles/theme.css
+++ b/apps/desktop/src/styles/theme.css
@@ -1,3 +1,5 @@
+@import "@cap/ui-solid/main.css";
+
 @import "@radix-ui/colors/red.css";
 @import "@radix-ui/colors/red-dark.css";
 @import "@radix-ui/colors/gray.css";
@@ -10,6 +12,9 @@
 @import "@radix-ui/colors/yellow.css";
 @import "@radix-ui/colors/yellow-dark.css";
 
+@plugin "@tailwindcss/typography";
+@plugin "tailwind-scrollbar";
+
 @tailwind utilities;
 
 :root {
@@ -414,3 +419,14 @@
 		@apply scrollbar-thin scrollbar-track-transparent scrollbar-thumb-black-transparent-40;
 	}
 }
+
+/* Preserve the same default border color from Tailwind 3 */
+@layer base {
+	*,
+	::after,
+	::before,
+	::backdrop,
+	::file-selector-button {
+		border-color: var(--color-gray-200, currentColor);
+	}
+}
diff --git a/apps/desktop/tailwind.config.js b/apps/desktop/tailwind.config.js
deleted file mode 100644
index 6ab4fa0e401..00000000000
--- a/apps/desktop/tailwind.config.js
+++ /dev/null
@@ -1,67 +0,0 @@
-const baseConfig = require("@cap/ui-solid/tailwind");
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-	...baseConfig,
-	theme: {
-		...baseConfig.theme,
-		extend: {
-			...baseConfig.theme?.extend,
-			keyframes: {
-				...baseConfig.theme?.extend?.keyframes,
-				gentleBounce: {
-					"0%, 100%": { transform: "translateY(0)" },
-					"50%": { transform: "translateY(-4px)" },
-				},
-				shimmer: {
-					"0%": { transform: "translateX(-100%)" },
-					"100%": { transform: "translateX(100%)" },
-				},
-				float: {
-					"0%, 100%": {
-						transform: "translateY(0) rotate(0deg)",
-						opacity: "0.7",
-					},
-					"50%": {
-						transform: "translateY(-20px) rotate(180deg)",
-						opacity: "1",
-					},
-				},
-				floatSlow: {
-					"0%, 100%": { transform: "translateY(0) scale(1)" },
-					"50%": { transform: "translateY(-30px) scale(1.1)" },
-				},
-				pulse3d: {
-					"0%, 100%": { transform: "scale(1)", opacity: "0.8" },
-					"50%": { transform: "scale(1.05)", opacity: "1" },
-				},
-				spin3d: {
-					"0%": { transform: "rotateY(0deg)" },
-					"100%": { transform: "rotateY(360deg)" },
-				},
-				gradientShift: {
-					"0%": { backgroundPosition: "0% 50%" },
-					"50%": { backgroundPosition: "100% 50%" },
-					"100%": { backgroundPosition: "0% 50%" },
-				},
-				dash: {
-					"0%": { strokeDasharray: "1, 150", strokeDashoffset: "0" },
-					"50%": { strokeDasharray: "90, 150", strokeDashoffset: "-35" },
-					"100%": { strokeDasharray: "90, 150", strokeDashoffset: "-124" },
-				},
-			},
-			animation: {
-				...baseConfig.theme?.extend?.animation,
-				"gentle-bounce": "gentleBounce 1.5s ease-in-out infinite",
-				shimmer: "shimmer 2s ease-in-out infinite",
-				float: "float 6s ease-in-out infinite",
-				"float-slow": "floatSlow 8s ease-in-out infinite",
-				"float-delayed": "float 6s ease-in-out 2s infinite",
-				pulse3d: "pulse3d 2s ease-in-out infinite",
-				spin3d: "spin3d 3s linear infinite",
-				"gradient-shift": "gradientShift 3s ease infinite",
-				dash: "dash 1.5s ease-in-out infinite",
-			},
-		},
-	},
-};
diff --git a/apps/web/app/(org)/dashboard/caps/components/web-recorder-dialog/CameraPreviewWindow.tsx b/apps/web/app/(org)/dashboard/caps/components/web-recorder-dialog/CameraPreviewWindow.tsx
index 85ce0c5eabf..16a4264a71c 100644
--- a/apps/web/app/(org)/dashboard/caps/components/web-recorder-dialog/CameraPreviewWindow.tsx
+++ b/apps/web/app/(org)/dashboard/caps/components/web-recorder-dialog/CameraPreviewWindow.tsx
@@ -492,7 +492,7 @@ export const CameraPreviewWindow = ({
 									e.stopPropagation();
 									handleClose();
 								}}
-								className="p-2 rounded-lg ui-pressed:bg-gray-3 ui-pressed:text-gray-12 hover:bg-gray-3 hover:text-gray-12"
+								className="p-2 rounded-lg data-pressed:bg-gray-3 data-pressed:text-gray-12 hover:bg-gray-3 hover:text-gray-12"
 							>
 								<X className="size-5.5" />
 							</button>
@@ -503,7 +503,7 @@ export const CameraPreviewWindow = ({
 									setSize((s) => (s === "sm" ? "lg" : "sm"));
 								}}
 								className={clsx(
-									"p-2 rounded-lg ui-pressed:bg-gray-3 ui-pressed:text-gray-12 hover:bg-gray-3 hover:text-gray-12",
+									"p-2 rounded-lg data-pressed:bg-gray-3 data-pressed:text-gray-12 hover:bg-gray-3 hover:text-gray-12",
 									size === "lg" && "bg-gray-3 text-gray-12",
 								)}
 							>
@@ -522,7 +522,7 @@ export const CameraPreviewWindow = ({
 									);
 								}}
 								className={clsx(
-									"p-2 rounded-lg ui-pressed:bg-gray-3 ui-pressed:text-gray-12 hover:bg-gray-3 hover:text-gray-12",
+									"p-2 rounded-lg data-pressed:bg-gray-3 data-pressed:text-gray-12 hover:bg-gray-3 hover:text-gray-12",
 									shape !== "round" && "bg-gray-3 text-gray-12",
 								)}
 							>
@@ -539,7 +539,7 @@ export const CameraPreviewWindow = ({
 									setMirrored((m) => !m);
 								}}
 								className={clsx(
-									"p-2 rounded-lg ui-pressed:bg-gray-3 ui-pressed:text-gray-12 hover:bg-gray-3 hover:text-gray-12",
+									"p-2 rounded-lg data-pressed:bg-gray-3 data-pressed:text-gray-12 hover:bg-gray-3 hover:text-gray-12",
 									mirrored && "bg-gray-3 text-gray-12",
 								)}
 							>
@@ -553,7 +553,7 @@ export const CameraPreviewWindow = ({
 										handleTogglePictureInPicture();
 									}}
 									className={clsx(
-										"p-2 rounded-lg ui-pressed:bg-gray-3 ui-pressed:text-gray-12 hover:bg-gray-3 hover:text-gray-12",
+										"p-2 rounded-lg data-pressed:bg-gray-3 data-pressed:text-gray-12 hover:bg-gray-3 hover:text-gray-12",
 										isInPictureInPicture && "bg-gray-3 text-gray-12",
 									)}
 								>
diff --git a/apps/web/app/s/[videoId]/_components/video/media-player.tsx b/apps/web/app/s/[videoId]/_components/video/media-player.tsx
index 0bd01241126..97287c5dace 100644
--- a/apps/web/app/s/[videoId]/_components/video/media-player.tsx
+++ b/apps/web/app/s/[videoId]/_components/video/media-player.tsx
@@ -3333,7 +3333,7 @@ function MediaPlayerSettings(props: MediaPlayerSettingsProps) {
 				<DropdownMenuSub>
 					<DropdownMenuSubTrigger>
 						<span className="flex-1">Speed</span>
-						<Badge variant="outline" className="rounded-sm">
+						<Badge variant="outline" className="rounded">
 							{mediaPlaybackRate}x
 						</Badge>
 					</DropdownMenuSubTrigger>
@@ -3365,7 +3365,7 @@ function MediaPlayerSettings(props: MediaPlayerSettingsProps) {
 					<DropdownMenuSub>
 						<DropdownMenuSubTrigger>
 							<span className="flex-1">Quality</span>
-							<Badge variant="outline" className="rounded-sm">
+							<Badge variant="outline" className="rounded">
 								{selectedRenditionLabel}
 							</Badge>
 						</DropdownMenuSubTrigger>
@@ -3414,7 +3414,7 @@ function MediaPlayerSettings(props: MediaPlayerSettingsProps) {
 								<GlobeIcon className="size-4" />
 								Captions
 							</span>
-							<Badge variant="outline" className="rounded-sm">
+							<Badge variant="outline" className="rounded">
 								{isCaptionLoading
 									? "..."
 									: captionLanguage === "off"
diff --git a/packages/ui-solid/package.json b/packages/ui-solid/package.json
index c8dbd63d5a1..a17666853a5 100644
--- a/packages/ui-solid/package.json
+++ b/packages/ui-solid/package.json
@@ -14,20 +14,18 @@
 		"@kobalte/core": "^0.13.7",
 		"cva": "npm:class-variance-authority@^0.7.0",
 		"solid-js": "^1.9.3",
-		"tailwindcss": "^3.4.10",
 		"zod": "^3"
 	},
 	"devDependencies": {
 		"@fontsource/geist-sans": "^5.0.3",
 		"@iconify/json": "^2.2.239",
-		"@kobalte/tailwindcss": "^0.9.0",
 		"@tailwindcss/typography": "^0.5.9",
-		"autoprefixer": "^10.4.20",
-		"postcss": "^8.4.41",
+		"autoprefixer": "^10.4.21",
+		"postcss": "^8.5.10",
 		"storybook-solidjs": "^1.0.0-beta.2",
-		"tailwind-scrollbar": "^3.1.0",
-		"tailwindcss": "^3.4.10",
-		"tailwindcss-animate": "^1.0.6",
+		"tailwind-scrollbar": "^4.0.2",
+		"tailwindcss": "^4.3",
+		"tw-animate-css": "^1.4.0",
 		"unplugin-auto-import": "^0.18.2",
 		"unplugin-fonts": "^1.1.1",
 		"unplugin-icons": "^0.19.2"
diff --git a/packages/ui-solid/src/Button.tsx b/packages/ui-solid/src/Button.tsx
index 0c9234ff182..385d8b87a0b 100644
--- a/packages/ui-solid/src/Button.tsx
+++ b/packages/ui-solid/src/Button.tsx
@@ -2,7 +2,7 @@ import { cva, type VariantProps } from "cva";
 import type { ComponentProps } from "solid-js";
 
 const styles = cva(
-	"outline-offset-2 outline-2 flex justify-center items-center focus-visible:outline rounded-full transition-all will-change-transform duration-200",
+	"outline-offset-2 flex justify-center items-center focus-visible:outline-soli rounded-full transition-all will-change-transform duration-200",
 	{
 		defaultVariants: {
 			variant: "primary",
@@ -20,18 +20,18 @@ const styles = cva(
 				white:
 					"bg-gray-1 border border-gray-6 text-gray-12 hover:bg-gray-3 disabled:bg-gray-8",
 				ghost: "hover:bg-white/20 hover:text-white",
-				gray: "bg-gray-5 data-[selected=true]:!bg-gray-8 dark:data-[selected=true]:!bg-gray-9 hover:bg-gray-7 border gray-button-border gray-button-shadow text-gray-12 disabled:bg-gray-8 disabled:text-gray-9",
+				gray: "bg-gray-5 data-[selected=true]:bg-gray-8! dark:data-[selected=true]:bg-gray-9! hover:bg-gray-7 border gray-button-border gray-button-shadow text-gray-12 disabled:bg-gray-8 disabled:text-gray-9",
 				dark: "bg-gray-12 dark-button-border dark-button-shadow hover:bg-gray-11 border text-gray-1 disabled:cursor-not-allowed disabled:text-gray-10 disabled:bg-gray-7 disabled:border-gray-8",
 				darkgradient:
-					"bg-gradient-to-t button-gradient-border from-[#0f0f0f] to-[#404040] shadow-[0_0_0_1px] hover:brightness-110 shadow-[#383838] text-gray-50 hover:bg-[#383838] disabled:bg-[#383838] border-transparent",
+					"bg-linear-to-t button-gradient-border from-[#0f0f0f] to-[#404040] shadow-[0_0_0_1px] hover:brightness-110 shadow-[#383838] text-gray-50 hover:bg-[#383838] disabled:bg-[#383838] border-transparent",
 				radialblue:
 					"text-gray-50 border button-gradient-border shadow-[0_0_0_1px] shadow-blue-400 disabled:bg-gray-1 border-0 [background:radial-gradient(90%_100%_at_15%_12%,#9BC4FF_0%,#3588FF_100%)] border-transparent hover:opacity-80",
 			},
 			size: {
-				xs: "text-[0.75rem] px-[0.5rem] h-[1.25rem]",
-				sm: "text-xs px-[0.75rem] h-[1.75rem]",
+				xs: "text-[0.75rem] px-2 h-5",
+				sm: "text-xs px-3 h-7",
 				md: "text-[13px] px-3 py-2",
-				lg: "text-[0.875rem] px-[1rem] h-[2.25rem]",
+				lg: "text-[0.875rem] px-4 h-9",
 			},
 		},
 	},
diff --git a/packages/ui-solid/src/SwitchTab.tsx b/packages/ui-solid/src/SwitchTab.tsx
index f4962153c2b..86feaf2b0b0 100644
--- a/packages/ui-solid/src/SwitchTab.tsx
+++ b/packages/ui-solid/src/SwitchTab.tsx
@@ -12,12 +12,12 @@ function List(props: ComponentProps<typeof KTabs.List>) {
 		<KTabs.List
 			{...others}
 			class={cx(
-				"flex flex-row items-center rounded-[0.5rem] relative border",
+				"flex flex-row items-center rounded-lg relative border",
 				local.class,
 			)}
 		>
 			{local.children}
-			<KTabs.Indicator class="absolute flex p-px inset-0 transition-transform peer-focus-visible:outline outline-2 outline-blue-300 outline-offset-2 rounded-[0.6rem] overflow-hidden">
+			<KTabs.Indicator class="absolute flex p-px inset-0 transition-transform peer-focus-visible:outline-solid outline-2 outline-blue-300 outline-offset-2 rounded-[0.6rem] overflow-hidden">
 				<div class="bg-gray-1 flex-1" />
 			</KTabs.Indicator>
 		</KTabs.List>
@@ -35,7 +35,7 @@ function Trigger<T extends ValidComponent = "button">(
 		<KTabs.Trigger
 			{...others}
 			class={cx(
-				"flex-1 text-gray-8 py-1 z-10 ui-selected:text-gray-1 peer outline-none transition-colors duration-100",
+				"flex-1 text-gray-8 py-1 z-10 data-selected:text-gray-1 peer outline-hidden transition-colors duration-100",
 				local.class,
 			)}
 		/>
diff --git a/packages/ui-solid/src/main.css b/packages/ui-solid/src/main.css
index 1f08258352a..76854a73073 100644
--- a/packages/ui-solid/src/main.css
+++ b/packages/ui-solid/src/main.css
@@ -1,9 +1,181 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@source "../../../apps/*/src/**/*.{js,ts,jsx,tsx,mdx}";
+@source "../../*/src/**/*.{ts,tsx,html,stories.tsx}";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+	--color-gray-a-1: var(--gray-1);
+	--color-gray-a-2: var(--gray-2);
+	--color-gray-a-3: var(--gray-3);
+	--color-gray-a-4: var(--gray-4);
+	--color-gray-a-5: var(--gray-5);
+	--color-gray-a-6: var(--gray-6);
+	--color-gray-a-7: var(--gray-7);
+	--color-gray-a-8: var(--gray-8);
+	--color-gray-a-9: var(--gray-9);
+	--color-gray-a-10: var(--gray-10);
+	--color-gray-a-11: var(--gray-11);
+	--color-gray-a-12: var(--gray-12);
+	--color-gray-a-a1: var(--gray-a1);
+	--color-gray-a-a2: var(--gray-a2);
+	--color-gray-a-a3: var(--gray-a3);
+	--color-gray-a-a4: var(--gray-a4);
+	--color-gray-a-a5: var(--gray-a5);
+	--color-gray-a-a6: var(--gray-a6);
+	--color-gray-a-a7: var(--gray-a7);
+	--color-gray-a-a8: var(--gray-a8);
+	--color-gray-a-a9: var(--gray-a9);
+	--color-gray-a-a10: var(--gray-a10);
+	--color-gray-a-a11: var(--gray-a11);
+	--color-gray-a-a12: var(--gray-a12);
+
+	--color-indigo-1: var(--indigo-1);
+	--color-indigo-2: var(--indigo-2);
+	--color-indigo-3: var(--indigo-3);
+	--color-indigo-4: var(--indigo-4);
+	--color-indigo-5: var(--indigo-5);
+	--color-indigo-6: var(--indigo-6);
+	--color-indigo-7: var(--indigo-7);
+	--color-indigo-8: var(--indigo-8);
+	--color-indigo-9: var(--indigo-9);
+	--color-indigo-10: var(--indigo-10);
+	--color-indigo-11: var(--indigo-11);
+	--color-indigo-12: var(--indigo-12);
+
+	--color-transparent: rgba(0, 0, 0, 0);
+	--color-solid-white: #ffffff;
+	--color-transparent-window: var(--transparent-window);
+
+	--color-gray-1: var(--gray-1);
+	--color-gray-2: var(--gray-2);
+	--color-gray-3: var(--gray-3);
+	--color-gray-4: var(--gray-4);
+	--color-gray-5: var(--gray-5);
+	--color-gray-6: var(--gray-6);
+	--color-gray-7: var(--gray-7);
+	--color-gray-8: var(--gray-8);
+	--color-gray-9: var(--gray-9);
+	--color-gray-10: var(--gray-10);
+	--color-gray-11: var(--gray-11);
+	--color-gray-12: var(--gray-12);
+	--color-gray-50: var(--gray-50);
+	--color-gray-100: var(--gray-100);
+	--color-gray-200: var(--gray-200);
+	--color-gray-300: var(--gray-300);
+	--color-gray-400: var(--gray-400);
+	--color-gray-450: var(--gray-450);
+	--color-gray-500: var(--gray-500);
+
+	--color-gray-transparent-50: var(--gray-50-transparent-50);
+	--color-gray-transparent-100: var(--gray-100-transparent-50);
+	--color-gray-transparent-200: var(--gray-200-transparent-50);
+	--color-gray-transparent-300: var(--gray-300-transparent-50);
+	--color-gray-transparent-400: var(--gray-400-transparent-50);
+	--color-gray-transparent-450: var(--gray-450-transparent-50);
+	--color-gray-transparent-500: var(--gray-500-transparent-50);
+
+	--color-black-transparent-5: var(--black-transparent-5);
+	--color-black-transparent-10: var(--black-transparent-10);
+	--color-black-transparent-20: var(--black-transparent-20);
+	--color-black-transparent-40: var(--black-transparent-40);
+	--color-black-transparent-60: var(--black-transparent-60);
+	--color-black-transparent-80: var(--black-transparent-80);
+
+	--color-white-transparent-5: var(--white-transparent-5);
+	--color-white-transparent-10: var(--white-transparent-10);
+	--color-white-transparent-20: var(--white-transparent-20);
+	--color-white-transparent-40: var(--white-transparent-40);
+	--color-white-transparent-60: var(--white-transparent-60);
+	--color-white-transparent-80: var(--white-transparent-80);
+
+	--color-blue-1: var(--blue-1);
+	--color-blue-2: var(--blue-2);
+	--color-blue-3: var(--blue-3);
+	--color-blue-4: var(--blue-4);
+	--color-blue-5: var(--blue-5);
+	--color-blue-6: var(--blue-6);
+	--color-blue-7: var(--blue-7);
+	--color-blue-8: var(--blue-8);
+	--color-blue-9: var(--blue-9);
+	--color-blue-10: var(--blue-10);
+	--color-blue-11: var(--blue-11);
+	--color-blue-12: var(--blue-12);
+	--color-blue-50: var(--blue-50);
+	--color-blue-100: var(--blue-100);
+	--color-blue-200: var(--blue-200);
+	--color-blue-300: var(--blue-300);
+	--color-blue-400: var(--blue-400);
+
+	--color-blue-transparent-0: var(--blue-transparent-0);
+	--color-blue-transparent-10: var(--blue-transparent-10);
+	--color-blue-transparent-20: var(--blue-transparent-20);
+
+	--color-red-1: var(--red-1);
+	--color-red-2: var(--red-2);
+	--color-red-3: var(--red-3);
+	--color-red-4: var(--red-4);
+	--color-red-5: var(--red-5);
+	--color-red-6: var(--red-6);
+	--color-red-7: var(--red-7);
+	--color-red-8: var(--red-8);
+	--color-red-9: var(--red-9);
+	--color-red-10: var(--red-10);
+	--color-red-11: var(--red-11);
+	--color-red-12: var(--red-12);
+	--color-red-50: var(--red-50);
+	--color-red-100: var(--red-100);
+	--color-red-200: var(--red-200);
+	--color-red-300: var(--red-300);
+	--color-red-400: var(--red-400);
+
+	--color-red-transparent-20: var(--red-transparent-20);
+
+	--shadow-s: var(--shadow-s);
+
+	--animate-collapsible-down: collapsible-down 0.2s ease-out;
+	--animate-collapsible-up: collapsible-up 0.2s ease-out;
+	--animate-shimmer: shimmer 2s ease-in-out infinite;
+
+	@keyframes collapsible-down {
+		from {
+			height: 0;
+			filter: blur(5px);
+		}
+		to {
+			height: var(--kb-collapsible-content-height);
+			filter: blur(0px);
+		}
+	}
+	@keyframes collapsible-up {
+		from {
+			height: var(--kb-collapsible-content-height);
+			filter: blur(0px);
+		}
+		to {
+			height: 0;
+			filter: blur(5px);
+		}
+	}
+	@keyframes shimmer {
+		0% {
+			transform: translateX(-100%);
+		}
+		100% {
+			transform: translateX(100%);
+		}
+	}
+}
+
+:root {
+	@apply antialiased;
+}
 
 body {
 	font-family: "Geist Sans", sans-serif;
+	font-weight: 500;
 }
 
 .custom-bg {
diff --git a/packages/ui-solid/tailwind.config.js b/packages/ui-solid/tailwind.config.js
deleted file mode 100644
index 094a6bad662..00000000000
--- a/packages/ui-solid/tailwind.config.js
+++ /dev/null
@@ -1,118 +0,0 @@
-function getColorScale(name, alpha = false) {
-	const scale = {};
-	for (let i = 1; i <= 12; i++) {
-		scale[i] = `var(--${name}-${i})`;
-		// next line only needed if using alpha values
-		if (alpha) scale[`a${i}`] = `var(--${name}-a${i})`;
-	}
-
-	return scale;
-}
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-	content: [
-		"../../apps/*/src/**/*.{js,ts,jsx,tsx,mdx}",
-		"../../packages/*/src/**/*.{ts,tsx,html,stories.tsx}",
-	],
-	darkMode: "class",
-	theme: {
-		extend: {
-			colors: {
-				"gray-a": getColorScale("gray", true),
-				indigo: getColorScale("indigo"),
-				transparent: "rgba(0,0,0,0)",
-				"solid-white": "#ffffff",
-				"transparent-window": "var(--transparent-window)",
-				gray: {
-					50: "var(--gray-50)",
-					100: "var(--gray-100)",
-					200: "var(--gray-200)",
-					300: "var(--gray-300)",
-					400: "var(--gray-400)",
-					450: "var(--gray-450)",
-					500: "var(--gray-500)",
-					...getColorScale("gray"),
-				},
-				"gray-transparent": {
-					50: "var(--gray-50-transparent-50)",
-					100: "var(--gray-100-transparent-50)",
-					200: "var(--gray-200-transparent-50)",
-					300: "var(--gray-300-transparent-50)",
-					400: "var(--gray-400-transparent-50)",
-					450: "var(--gray-450-transparent-50)",
-					500: "var(--gray-500-transparent-50)",
-				},
-				"black-transparent": {
-					5: "var(--black-transparent-5)",
-					10: "var(--black-transparent-10)",
-					20: "var(--black-transparent-20)",
-					40: "var(--black-transparent-40)",
-					60: "var(--black-transparent-60)",
-					80: "var(--black-transparent-80)",
-				},
-				"white-transparent": {
-					5: "var(--white-transparent-5)",
-					10: "var(--white-transparent-10)",
-					20: "var(--white-transparent-20)",
-					40: "var(--white-transparent-40)",
-					60: "var(--white-transparent-60)",
-					80: "var(--white-transparent-80)",
-				},
-				blue: {
-					50: "var(--blue-50)",
-					100: "var(--blue-100)",
-					200: "var(--blue-200)",
-					300: "var(--blue-300)",
-					400: "var(--blue-400)",
-					...getColorScale("blue"),
-				},
-				"blue-transparent": {
-					0: "var(--blue-transparent-0)",
-					10: "var(--blue-transparent-10)",
-					20: "var(--blue-transparent-20)",
-				},
-				red: {
-					50: "var(--red-50)",
-					100: "var(--red-100)",
-					200: "var(--red-200)",
-					300: "var(--red-300)",
-					400: "var(--red-400)",
-					...getColorScale("red"),
-				},
-				"red-transparent": {
-					20: "var(--red-transparent-20)",
-				},
-			},
-			boxShadow: {
-				s: "var(--shadow-s)",
-			},
-			keyframes: {
-				"collapsible-down": {
-					from: { height: 0, filter: "blur(4px)" },
-					to: {
-						height: "var(--kb-collapsible-content-height)",
-						filter: "blur(0px)",
-					},
-				},
-				"collapsible-up": {
-					from: {
-						height: "var(--kb-collapsible-content-height)",
-						filter: "blur(0px)",
-					},
-					to: { height: 0, filter: "blur(4px)" },
-				},
-			},
-			animation: {
-				"collapsible-down": "collapsible-down 0.2s ease-out",
-				"collapsible-up": "collapsible-up 0.2s ease-out",
-			},
-		},
-	},
-	plugins: [
-		require("tailwindcss-animate"),
-		require("@tailwindcss/typography"),
-		require("@kobalte/tailwindcss"),
-		require("tailwind-scrollbar"),
-	],
-};
diff --git a/packages/ui/src/components/Button.tsx b/packages/ui/src/components/Button.tsx
index 3ace455df2d..099e9bd32d9 100644
--- a/packages/ui/src/components/Button.tsx
+++ b/packages/ui/src/components/Button.tsx
@@ -5,7 +5,7 @@ import * as React from "react";
 import { LoadingSpinner } from "./LoadingSpinner";
 
 const buttonVariants = cva(
-	"flex items-center justify-center transition-colors duration-200 rounded-full disabled:cursor-not-allowed cursor-pointer font-medium px-[1.25rem] ring-offset-transparent relative gap-1",
+	"flex items-center justify-center transition-colors duration-200 rounded-full disabled:cursor-not-allowed cursor-pointer font-medium px-5 ring-offset-transparent relative gap-1",
 	{
 		defaultVariants: {
 			variant: "primary",
@@ -26,7 +26,7 @@ const buttonVariants = cva(
 				gray: "bg-gray-5 hover:bg-gray-7 border gray-button-border gray-button-shadow text-gray-12 disabled:border-gray-7 disabled:bg-gray-8 disabled:text-gray-11",
 				dark: "bg-gray-12 dark-button-shadow hover:bg-gray-11 border dark-button-border text-gray-1 disabled:cursor-not-allowed disabled:text-gray-10 disabled:bg-gray-7 disabled:border-gray-8",
 				darkgradient:
-					"bg-gradient-to-t button-gradient-border from-[#0f0f0f] to-[#404040] shadow-[0_0_0_1px] hover:brightness-110 shadow-[#383838] text-gray-50 hover:bg-[#383838] disabled:bg-[#383838] border-transparent",
+					"bg-linear-to-t button-gradient-border from-[#0f0f0f] to-[#404040] shadow-[0_0_0_1px] hover:brightness-110 shadow-[#383838] text-gray-50 hover:bg-[#383838] disabled:bg-[#383838] border-transparent",
 				radialblue:
 					"text-gray-50 border button-gradient-border shadow-[0_0_0_1px] shadow-blue-400 disabled:bg-gray-1 border-0 [background:radial-gradient(90%_100%_at_15%_12%,#9BC4FF_0%,#3588FF_100%)] border-transparent hover:opacity-80",
 				transparent:
diff --git a/packages/ui/src/components/Card.tsx b/packages/ui/src/components/Card.tsx
index ef2db789b58..7e535391466 100644
--- a/packages/ui/src/components/Card.tsx
+++ b/packages/ui/src/components/Card.tsx
@@ -50,10 +50,7 @@ const CardDescription = forwardRef<
 >(({ className, ...props }, ref) => (
 	<p
 		ref={ref}
-		className={classNames(
-			"text-[0.875rem] text-gray-10 leading-[1.25rem]",
-			className,
-		)}
+		className={classNames("text-[0.875rem] text-gray-10 leading-5", className)}
 		{...props}
 	/>
 ));
diff --git a/packages/ui/src/components/Cmdk.tsx b/packages/ui/src/components/Cmdk.tsx
index c8f1c63df6e..06d1b4d5dea 100644
--- a/packages/ui/src/components/Cmdk.tsx
+++ b/packages/ui/src/components/Cmdk.tsx
@@ -67,7 +67,7 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
 	return (
 		<Dialog {...props}>
 			<DialogContent className="overflow-hidden p-0 shadow-lg">
-				<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+				<Command className="**:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 **:[[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
 					{children}
 				</Command>
 			</DialogContent>
@@ -87,7 +87,7 @@ const CommandInput: CommandInputComponent = React.forwardRef<
 		<CommandPrimitive.Input
 			ref={ref}
 			className={classNames(
-				"flex py-3 w-full h-11 text-sm bg-transparent rounded-md outline-none text-gray-12 placeholder:text-gray-10 disabled:cursor-not-allowed disabled:opacity-50",
+				"flex py-3 w-full h-11 text-sm bg-transparent rounded-md outline-hidden text-gray-12 placeholder:text-gray-10 disabled:cursor-not-allowed disabled:opacity-50",
 				className,
 			)}
 			{...props}
@@ -133,7 +133,7 @@ const CommandGroup: CommandGroupComponent = React.forwardRef<
 	<CommandPrimitive.Group
 		ref={ref}
 		className={classNames(
-			"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+			"overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
 			className,
 		)}
 		{...props}
@@ -161,7 +161,7 @@ const CommandItem: CommandItemComponent = React.forwardRef<
 	<CommandPrimitive.Item
 		ref={ref}
 		className={classNames(
-			"relative flex cursor-pointer text-gray-8 select-none items-center rounded-sm px-2 py-2 text-[0.875rem] outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex cursor-pointer text-gray-8 select-none items-center rounded-xs px-2 py-2 text-[0.875rem] outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
 			className,
 		)}
 		{...props}
diff --git a/packages/ui/src/components/Dialog.tsx b/packages/ui/src/components/Dialog.tsx
index 0f7e818cdaa..0a67c8c6112 100644
--- a/packages/ui/src/components/Dialog.tsx
+++ b/packages/ui/src/components/Dialog.tsx
@@ -15,7 +15,7 @@ const DialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<DialogPrimitive.Overlay
 		ref={ref}
-		className={classNames("fixed inset-0 z-[500] bg-black/60", className)}
+		className={classNames("fixed inset-0 z-500 bg-black/60", className)}
 		{...props}
 	/>
 ));
@@ -27,7 +27,7 @@ const DialogContent = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
 	<DialogPortal>
 		<DialogOverlay className="animate-fadeIn" />
-		<div className="flex fixed inset-0 z-[501] justify-center items-center">
+		<div className="flex fixed inset-0 z-501 justify-center items-center">
 			<DialogPrimitive.Content
 				ref={ref}
 				className={classNames(
@@ -43,7 +43,7 @@ const DialogContent = React.forwardRef<
 				{...props}
 			>
 				{children}
-				<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+				<DialogPrimitive.Close className="absolute right-4 top-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 					<X className="w-5 h-5 text-gray-9" />
 					<span className="sr-only">Close</span>
 				</DialogPrimitive.Close>
diff --git a/packages/ui/src/components/Dropdown.tsx b/packages/ui/src/components/Dropdown.tsx
index b764298b0df..aa2669b0dec 100644
--- a/packages/ui/src/components/Dropdown.tsx
+++ b/packages/ui/src/components/Dropdown.tsx
@@ -26,7 +26,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
 	<DropdownMenuPrimitive.SubTrigger
 		ref={ref}
 		className={classNames(
-			"flex cursor-default select-none justify-between items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+			"flex cursor-default select-none justify-between items-center rounded-xs px-2 py-1.5 text-sm outline-hidden focus:bg-accent data-[state=open]:bg-accent",
 			inset && "pl-8",
 			className,
 		)}
@@ -46,7 +46,7 @@ const DropdownMenuSubContent = React.forwardRef<
 	<DropdownMenuPrimitive.SubContent
 		ref={ref}
 		className={classNames(
-			"z-50 min-w-[8rem] overflow-hidden rounded-xl border bg-gray-1 p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+			"z-50 min-w-32 overflow-hidden rounded-xl border bg-gray-1 p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 			className,
 		)}
 		{...props}
@@ -68,7 +68,7 @@ const DropdownMenuContent = React.forwardRef<
 			ref={ref}
 			sideOffset={sideOffset}
 			className={classNames(
-				"z-[1000000000] bg-gray-1 min-w-[8rem] overflow-hidden rounded-xl border border-gray-3 p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				"z-1000000000 bg-gray-1 min-w-32 overflow-hidden rounded-xl border border-gray-3 p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 				className,
 			)}
 			{...props}
@@ -86,7 +86,7 @@ const DropdownMenuItem = React.forwardRef<
 	<DropdownMenuPrimitive.Item
 		ref={ref}
 		className={classNames(
-			"relative flex cursor-pointer select-none text-gray-10 focus:text-gray-12 hover:text-gray-12 items-center rounded-xl px-2 py-1.5 text-sm outline-none transition-colors hover:bg-gray-3 focus:bg-gray-3 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex cursor-pointer select-none text-gray-10 focus:text-gray-12 hover:text-gray-12 items-center rounded-xl px-2 py-1.5 text-sm outline-hidden transition-colors hover:bg-gray-3 focus:bg-gray-3 data-disabled:pointer-events-none data-disabled:opacity-50",
 			inset && "pl-8",
 			className,
 		)}
@@ -102,7 +102,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
 	<DropdownMenuPrimitive.CheckboxItem
 		ref={ref}
 		className={classNames(
-			"relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex cursor-default select-none items-center rounded-md py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
 			className,
 		)}
 		checked={checked}
@@ -126,7 +126,7 @@ const DropdownMenuRadioItem = React.forwardRef<
 	<DropdownMenuPrimitive.RadioItem
 		ref={ref}
 		className={classNames(
-			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
 			className,
 		)}
 		{...props}
diff --git a/packages/ui/src/components/NavigationMenu.tsx b/packages/ui/src/components/NavigationMenu.tsx
index 6f31a3aaaa1..eea3baf65dd 100644
--- a/packages/ui/src/components/NavigationMenu.tsx
+++ b/packages/ui/src/components/NavigationMenu.tsx
@@ -40,7 +40,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
 const navigationMenuTriggerStyle = cva(
-	"group inline-flex text-black h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
+	"group inline-flex text-black h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
 );
 
 const NavigationMenuTrigger = React.forwardRef<
@@ -57,7 +57,7 @@ const NavigationMenuTrigger = React.forwardRef<
 		{children}{" "}
 		{caret && (
 			<ChevronDown
-				className="relative top-[-1px] ml-[3px] h-4 w-4 transition duration-200 group-data-[state=open]:rotate-180"
+				className="relative -top-px ml-[3px] h-4 w-4 transition duration-200 group-data-[state=open]:rotate-180"
 				aria-hidden="true"
 			/>
 		)}
@@ -89,7 +89,7 @@ const NavigationMenuViewport = React.forwardRef<
 	<div className={classNames("flex absolute left-0 top-full justify-center")}>
 		<NavigationMenuPrimitive.Viewport
 			className={classNames(
-				"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-lg border border-gray-5 bg-gray-1/80 backdrop-blur-md text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-200 data-[state=open]:duration-200 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 md:w-[var(--radix-navigation-menu-viewport-width)]",
+				"origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-lg border border-gray-5 bg-gray-1/80 backdrop-blur-md text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-200 data-[state=open]:duration-200 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 md:w-(--radix-navigation-menu-viewport-width)",
 				className,
 			)}
 			ref={ref}
@@ -107,7 +107,7 @@ const NavigationMenuIndicator = React.forwardRef<
 	<NavigationMenuPrimitive.Indicator
 		ref={ref}
 		className={classNames(
-			"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+			"top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
 			className,
 		)}
 		{...props}
@@ -128,7 +128,7 @@ const ListItem = React.forwardRef<
 				<a
 					ref={ref}
 					className={classNames(
-						"block p-3 space-y-1 leading-none no-underline rounded-md transition-all duration-200 outline-none select-none hover:bg-gray-2 hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+						"block p-3 space-y-1 leading-none no-underline rounded-md transition-all duration-200 outline-hidden select-none hover:bg-gray-2 hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
 						className,
 					)}
 					{...props}
diff --git a/packages/ui/src/components/Popover.tsx b/packages/ui/src/components/Popover.tsx
index 15ad75580c4..7742e6221b2 100644
--- a/packages/ui/src/components/Popover.tsx
+++ b/packages/ui/src/components/Popover.tsx
@@ -18,7 +18,7 @@ const PopoverContent = React.forwardRef<
 			align={align}
 			sideOffset={sideOffset}
 			className={classNames(
-				"z-50 w-72 rounded-xl bg-gray-3 p-4 text-gray-12 shadow-sm outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				"z-50 w-72 rounded-xl bg-gray-3 p-4 text-gray-12 shadow-xs outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 				className,
 			)}
 			{...props}
diff --git a/packages/ui/src/components/Select.tsx b/packages/ui/src/components/Select.tsx
index 6b176400ab7..f45a8227ff7 100644
--- a/packages/ui/src/components/Select.tsx
+++ b/packages/ui/src/components/Select.tsx
@@ -13,11 +13,11 @@ const SelectVariantContext = React.createContext<SelectVariant>("default");
 const selectTriggerVariants = cva(
 	cx(
 		"font-medium flex transition-all duration-200 text-[13px] outline-0",
-		"border-[1px] items-center justify-between gap-2 whitespace-nowrap",
+		"border items-center justify-between gap-2 whitespace-nowrap",
 		"disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-gray-3 disabled:text-gray-9",
 		"ring-0 ring-gray-6 ring-offset-gray-6 data-[state=open]:border-gray-7 data-[state=open]:ring-gray-7 data-[state=open]:ring-1 data-[state=open]:ring-offset-0",
-		"data-[placeholder]:text-gray-12",
-		"*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
+		"data-placeholder:text-gray-12",
+		"data-[slot=select-value]:*:line-clamp-1 data-[slot=select-value]:*:flex data-[slot=select-value]:*:items-center data-[slot=select-value]:*:gap-2",
 		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg]:transition-transform [&_svg]:duration-200",
 		"[&[data-state=open]_svg.caret-icon]:rotate-180",
 	),
@@ -50,7 +50,7 @@ const selectTriggerVariants = cva(
 
 const selectContentVariants = cva(
 	cx(
-		"rounded-xl border-[1px] overflow-hidden",
+		"rounded-xl border overflow-hidden",
 		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 		"data-[state=open]:animate-in data-[state=closed]:animate-out",
 		"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -79,8 +79,8 @@ const selectContentVariants = cva(
 const selectItemVariants = cva(
 	cx(
 		"relative flex w-full cursor-default items-center gap-2 py-2 pr-8 pl-3 text-[13px]",
-		"rounded-lg outline-none select-none transition-colors duration-200",
-		"data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[disabled]:text-gray-9",
+		"rounded-lg outline-hidden select-none transition-colors duration-200",
+		"data-disabled:pointer-events-none data-disabled:opacity-50 data-disabled:text-gray-9",
 		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
 	),
 	{
@@ -238,7 +238,7 @@ function SelectContent({
 					className={cx(
 						"p-1",
 						position === "popper" &&
-							"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1",
+							"h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width) scroll-my-1",
 					)}
 				>
 					<SelectVariantContext.Provider value={variant}>
diff --git a/packages/ui/src/components/SkeletonRows.tsx b/packages/ui/src/components/SkeletonRows.tsx
index 621d9335caa..5a6418d9b98 100644
--- a/packages/ui/src/components/SkeletonRows.tsx
+++ b/packages/ui/src/components/SkeletonRows.tsx
@@ -15,13 +15,13 @@ export const SkeletonRows = () => {
 							.map((_, index) => (
 								<div
 									key={index}
-									className="flex relative flex-col gap-4 w-full h-full bg-gray-3 rounded-2xl border-gray-4 border-[1px]"
+									className="flex relative flex-col gap-4 w-full h-full bg-gray-3 rounded-2xl border-gray-4 border"
 								>
 									{/* Thumbnail */}
 									<Skeleton
 										baseColor="var(--gray-4)"
 										highlightColor="var(--gray-5)"
-										className="h-[150px] w-full aspect-video align-top !rounded-t-2xl !leading-none !rounded-b-none"
+										className="h-[150px] w-full aspect-video align-top rounded-t-2xl! leading-none! rounded-b-none!"
 									/>
 									<div className="px-4 pb-4">
 										{/* Title */}
diff --git a/packages/ui/src/components/Switch.tsx b/packages/ui/src/components/Switch.tsx
index 950853b9156..3427ce1babd 100644
--- a/packages/ui/src/components/Switch.tsx
+++ b/packages/ui/src/components/Switch.tsx
@@ -11,9 +11,9 @@ const Switch = React.forwardRef<
 	<SwitchPrimitives.Root
 		className={classNames(
 			"peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-transparent transition-colors",
-			"w-11 h-6 p-[0.125rem]",
+			"w-11 h-6 p-0.5",
 			"bg-gray-5 data-[state=checked]:bg-blue-500",
-			"focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500",
+			"focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500",
 			"disabled:cursor-not-allowed disabled:opacity-40 disabled:bg-gray-4",
 			className,
 		)}
diff --git a/packages/ui/src/components/Table.tsx b/packages/ui/src/components/Table.tsx
index 676d7e95da8..c802742bd31 100644
--- a/packages/ui/src/components/Table.tsx
+++ b/packages/ui/src/components/Table.tsx
@@ -48,7 +48,7 @@ const TableFooter = React.forwardRef<
 	<tfoot
 		ref={ref}
 		className={classNames(
-			"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+			"border-t bg-muted/50 font-medium last:[&>tr]:border-b-0",
 			className,
 		)}
 		{...props}
@@ -78,7 +78,7 @@ const TableHead = React.forwardRef<
 	<th
 		ref={ref}
 		className={classNames(
-			"h-10 px-2 text-left text-gray-12 align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+			"h-10 px-2 text-left text-gray-12 align-middle font-medium [&:has([role=checkbox])]:pr-0 *:[[role=checkbox]]:translate-y-[2px]",
 			className,
 		)}
 		{...props}
@@ -93,7 +93,7 @@ const TableCell = React.forwardRef<
 	<td
 		ref={ref}
 		className={classNames(
-			"p-2 align-middle text-gray-10 selection:[&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+			"p-2 align-middle text-gray-10 [&:has([role=checkbox])]:selection:pr-0 *:[[role=checkbox]]:translate-y-[2px]",
 			className,
 		)}
 		{...props}
diff --git a/packages/ui/src/components/input/Input.tsx b/packages/ui/src/components/input/Input.tsx
index fc52d730e85..e804b8000fb 100644
--- a/packages/ui/src/components/input/Input.tsx
+++ b/packages/ui/src/components/input/Input.tsx
@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 				type={type}
 				className={classNames(
 					"flex px-4 w-full font-thin transition-all duration-200 text-[16px] md:text-[13px] text-gray-12 bg-gray-1 border-gray-4 outline-0 focus:bg-gray-2",
-					"rounded-xl hover:bg-gray-2 autofill:bg-gray-1 hover:border-gray-5 h-[44px] placeholder:text-gray-8 border-[1px] focus:border-gray-5",
+					"rounded-xl hover:bg-gray-2 autofill:bg-gray-1 hover:border-gray-5 h-[44px] placeholder:text-gray-8 border focus:border-gray-5",
 					"file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none",
 					"disabled:cursor-not-allowed disabled:bg-gray-2 disabled:text-gray-8 disabled:placeholder:text-gray-8 placeholder:transition-all",
 					"ring-0 ring-gray-2 focus:ring-1 focus:ring-gray-12 focus:ring-offset-2 ring-offset-gray-3 hover:placeholder:text-gray-12 placeholder:duration-200",
diff --git a/packages/ui/style/tailwind.config.js b/packages/ui/style/tailwind.config.js
index d91300eff72..0d2173c0a61 100644
--- a/packages/ui/style/tailwind.config.js
+++ b/packages/ui/style/tailwind.config.js
@@ -196,7 +196,6 @@ module.exports = (__app, _options) => {
 		plugins: [
 			require("tailwindcss-animate"),
 			require("@tailwindcss/typography"),
-			require("@kobalte/tailwindcss"),
 			require("tailwind-scrollbar"),
 		],
 	};
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e1003cb70eb..2810356dc57 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -54,8 +54,8 @@ importers:
         specifier: ^0.2.1
         version: 0.2.2(solid-js@1.9.6)
       '@kobalte/core':
-        specifier: ^0.13.7
-        version: 0.13.9(solid-js@1.9.6)
+        specifier: ^0.13.11
+        version: 0.13.11(solid-js@1.9.6)
       '@radix-ui/colors':
         specifier: ^3.0.0
         version: 3.0.0
@@ -115,7 +115,7 @@ importers:
         version: 0.14.10(solid-js@1.9.6)
       '@solidjs/start':
         specifier: ^1.1.3
-        version: 1.1.3(@testing-library/jest-dom@6.5.0)(@types/node@22.15.17)(jiti@2.6.1)(solid-js@1.9.6)(terser@5.44.0)(vinxi@0.5.6(@planetscale/database@1.19.0)(@types/node@22.15.17)(db0@0.3.2(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(mysql2@3.15.2))(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(mysql2@3.15.2)(rolldown@1.0.1)(terser@5.44.0)(xml2js@0.6.2)(yaml@2.8.1))(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1))(yaml@2.8.1)
+        version: 1.1.3(@testing-library/jest-dom@6.5.0)(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(solid-js@1.9.6)(terser@5.44.0)(vinxi@0.5.6(@planetscale/database@1.19.0)(@types/node@22.15.17)(db0@0.3.2(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(mysql2@3.15.2))(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(lightningcss@1.32.0)(mysql2@3.15.2)(rolldown@1.0.1)(terser@5.44.0)(xml2js@0.6.2)(yaml@2.8.1))(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1))(yaml@2.8.1)
       '@tanstack/solid-query':
         specifier: ^5.51.21
         version: 5.75.4(solid-js@1.9.6)
@@ -205,7 +205,7 @@ importers:
         version: 9.0.1
       vinxi:
         specifier: ^0.5.6
-        version: 0.5.6(@planetscale/database@1.19.0)(@types/node@22.15.17)(db0@0.3.2(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(mysql2@3.15.2))(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(mysql2@3.15.2)(rolldown@1.0.1)(terser@5.44.0)(xml2js@0.6.2)(yaml@2.8.1)
+        version: 0.5.6(@planetscale/database@1.19.0)(@types/node@22.15.17)(db0@0.3.2(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(mysql2@3.15.2))(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(lightningcss@1.32.0)(mysql2@3.15.2)(rolldown@1.0.1)(terser@5.44.0)(xml2js@0.6.2)(yaml@2.8.1)
       webcodecs:
         specifier: ^0.1.0
         version: 0.1.0
@@ -219,9 +219,15 @@ importers:
       '@iconify/json':
         specifier: ^2.2.239
         version: 2.2.336
+      '@tailwindcss/postcss':
+        specifier: ^4.2.2
+        version: 4.3.0
+      '@tailwindcss/typography':
+        specifier: ^0.5.9
+        version: 0.5.16(tailwindcss@4.3.0)
       '@tauri-apps/cli':
         specifier: '>=2.1.0'
-        version: 2.5.0
+        version: 2.11.0
       '@total-typescript/ts-reset':
         specifier: ^0.6.1
         version: 0.6.1
@@ -237,24 +243,27 @@ importers:
       cross-env:
         specifier: ^7.0.3
         version: 7.0.3
+      tailwind-scrollbar:
+        specifier: ^3.1.0
+        version: 3.1.0(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.15.5(@swc/helpers@0.5.17))(@swc/wasm@1.15.5)(@types/node@20.17.43)(typescript@5.8.3)))
       typescript:
         specifier: ^5.8.3
         version: 5.8.3
       vite:
         specifier: ^6.3.5
-        version: 6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)
+        version: 6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)
       vite-plugin-top-level-await:
         specifier: ^1.4.4
-        version: 1.6.0(@swc/helpers@0.5.17)(rollup@4.40.2)(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1))
+        version: 1.6.0(@swc/helpers@0.5.17)(rollup@4.40.2)(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1))
       vite-plugin-wasm:
         specifier: ^3.4.1
-        version: 3.5.0(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1))
+        version: 3.5.0(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1))
       vite-tsconfig-paths:
         specifier: ^5.0.1
-        version: 5.1.4(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1))
+        version: 5.1.4(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1))
       vitest:
         specifier: ~2.1.9
-        version: 2.1.9(@types/node@22.15.17)(jsdom@26.1.0)(terser@5.44.0)
+        version: 2.1.9(@types/node@22.15.17)(jsdom@26.1.0)(lightningcss@1.32.0)(terser@5.44.0)
 
   apps/discord-bot:
     dependencies:
@@ -285,7 +294,7 @@ importers:
     devDependencies:
       '@cloudflare/vitest-pool-workers':
         specifier: ^0.6.4
-        version: 0.6.16(@cloudflare/workers-types@4.20250507.0)(@vitest/runner@3.2.4)(@vitest/snapshot@3.2.4)(vitest@2.1.9(@types/node@22.15.17)(jsdom@26.1.0)(terser@5.44.0))
+        version: 0.6.16(@cloudflare/workers-types@4.20250507.0)(@vitest/runner@3.2.4)(@vitest/snapshot@3.2.4)(vitest@2.1.9(@types/node@22.15.17)(jsdom@26.1.0)(lightningcss@1.32.0)(terser@5.44.0))
       '@cloudflare/workers-types':
         specifier: ^4.20250214.0
         version: 4.20250507.0
@@ -294,7 +303,7 @@ importers:
         version: 5.8.3
       vitest:
         specifier: ~2.1.9
-        version: 2.1.9(@types/node@22.15.17)(jsdom@26.1.0)(terser@5.44.0)
+        version: 2.1.9(@types/node@22.15.17)(jsdom@26.1.0)(lightningcss@1.32.0)(terser@5.44.0)
       wrangler:
         specifier: ^3.109.1
         version: 3.114.8(@cloudflare/workers-types@4.20250507.0)
@@ -328,7 +337,7 @@ importers:
         version: link:../../packages/ui-solid
       postcss-pseudo-companion-classes:
         specifier: ^0.1.1
-        version: 0.1.1(postcss@8.5.3)
+        version: 0.1.1(postcss@8.5.14)
       solid-js:
         specifier: ^1.9.3
         version: 1.9.6
@@ -365,16 +374,16 @@ importers:
         version: 1.0.0-beta.7(@storybook/test@8.6.12(storybook@8.6.12(prettier@3.7.4)))(solid-js@1.9.6)(storybook@8.6.12(prettier@3.7.4))
       storybook-solidjs-vite:
         specifier: ^1.0.0-beta.2
-        version: 1.0.0-beta.7(@storybook/test@8.6.12(storybook@8.6.12(prettier@3.7.4)))(esbuild@0.25.5)(rollup@4.40.2)(solid-js@1.9.6)(storybook@8.6.12(prettier@3.7.4))(vite-plugin-solid@2.11.6(@testing-library/jest-dom@6.5.0)(solid-js@1.9.6)(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)))(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1))(webpack@5.101.3(esbuild@0.25.5))
+        version: 1.0.0-beta.7(@storybook/test@8.6.12(storybook@8.6.12(prettier@3.7.4)))(esbuild@0.25.5)(rollup@4.40.2)(solid-js@1.9.6)(storybook@8.6.12(prettier@3.7.4))(vite-plugin-solid@2.11.6(@testing-library/jest-dom@6.5.0)(solid-js@1.9.6)(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)))(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1))(webpack@5.101.3(esbuild@0.25.5))
       typescript:
         specifier: ^5.8.3
         version: 5.8.3
       vite:
         specifier: ^6.3.5
-        version: 6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)
+        version: 6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)
       vite-plugin-solid:
         specifier: ^2.10.2
-        version: 2.11.6(@testing-library/jest-dom@6.5.0)(solid-js@1.9.6)(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1))
+        version: 2.11.6(@testing-library/jest-dom@6.5.0)(solid-js@1.9.6)(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1))
 
   apps/web:
     dependencies:
@@ -674,7 +683,7 @@ importers:
         version: 4.24.11(next@16.2.1(@opentelemetry/api@1.9.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(nodemailer@6.10.1)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
       next-mdx-remote:
         specifier: ^6.0.0
-        version: 6.0.0(@types/react@19.2.14)(acorn@8.15.0)(react@19.2.4)
+        version: 6.0.0(@types/react@19.2.14)(acorn@8.16.0)(react@19.2.4)
       posthog-js:
         specifier: ^1.215.3
         version: 1.240.0
@@ -831,7 +840,7 @@ importers:
         version: 5.8.3
       vitest:
         specifier: ^3.2.0
-        version: 3.2.4(@types/debug@4.1.12)(@types/node@20.17.43)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@26.1.0)(terser@5.44.0)(yaml@2.8.1)
+        version: 3.2.4(@types/debug@4.1.12)(@types/node@20.17.43)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)
 
   apps/web-cluster:
     dependencies:
@@ -882,7 +891,7 @@ importers:
         version: 0.15.6(typescript@5.8.3)
       tsup:
         specifier: ^8.5.0
-        version: 8.5.0(@swc/core@1.15.5(@swc/helpers@0.5.17))(jiti@2.6.1)(postcss@8.5.3)(typescript@5.8.3)(yaml@2.8.1)
+        version: 8.5.0(@swc/core@1.15.5(@swc/helpers@0.5.17))(jiti@2.6.1)(postcss@8.5.14)(typescript@5.8.3)(yaml@2.8.1)
     devDependencies:
       concurrently:
         specifier: ^9.2.1
@@ -914,13 +923,13 @@ importers:
     dependencies:
       '@vitejs/plugin-react':
         specifier: ^4.0.3
-        version: 4.4.1(vite@6.3.5(@types/node@20.17.43)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1))
+        version: 4.4.1(vite@6.3.5(@types/node@20.17.43)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1))
       vite:
         specifier: ^6.3.5
-        version: 6.3.5(@types/node@20.17.43)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)
+        version: 6.3.5(@types/node@20.17.43)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)
       vite-tsconfig-paths:
         specifier: ^4.2.0
-        version: 4.3.2(typescript@5.8.3)(vite@6.3.5(@types/node@20.17.43)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1))
+        version: 4.3.2(typescript@5.8.3)(vite@6.3.5(@types/node@20.17.43)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1))
       zod:
         specifier: ^3
         version: 3.25.76
@@ -957,7 +966,7 @@ importers:
         version: 4.6.2(eslint@8.57.1)
       eslint-plugin-tailwindcss:
         specifier: ^3.12.0
-        version: 3.18.0(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.15.5(@swc/helpers@0.5.17))(@swc/wasm@1.15.5)(@types/node@20.17.43)(typescript@5.8.3)))
+        version: 3.18.0(tailwindcss@4.3.0)
       eslint-utils:
         specifier: ^3.0.0
         version: 3.0.0(eslint@8.57.1)
@@ -1094,7 +1103,7 @@ importers:
         version: 19.1.9(@types/react@19.1.13)
       tsup:
         specifier: ^8.0.0
-        version: 8.5.0(@swc/core@1.15.5(@swc/helpers@0.5.17))(jiti@2.6.1)(postcss@8.5.3)(typescript@5.8.3)(yaml@2.8.1)
+        version: 8.5.0(@swc/core@1.15.5(@swc/helpers@0.5.17))(jiti@2.6.1)(postcss@8.5.14)(typescript@5.8.3)(yaml@2.8.1)
       typescript:
         specifier: ^5.7.3
         version: 5.8.3
@@ -1113,7 +1122,7 @@ importers:
         version: 19.1.9(@types/react@19.1.13)
       tsup:
         specifier: ^8.0.0
-        version: 8.5.0(@swc/core@1.15.5(@swc/helpers@0.5.17))(jiti@2.6.1)(postcss@8.5.3)(typescript@5.8.3)(yaml@2.8.1)
+        version: 8.5.0(@swc/core@1.15.5(@swc/helpers@0.5.17))(jiti@2.6.1)(postcss@8.5.14)(typescript@5.8.3)(yaml@2.8.1)
       typescript:
         specifier: ^5.7.3
         version: 5.8.3
@@ -1191,7 +1200,7 @@ importers:
         version: 19.2.3(@types/react@19.2.14)
       '@vitejs/plugin-react':
         specifier: ^4.0.3
-        version: 4.4.1(vite@6.3.5(@types/node@20.17.43)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1))
+        version: 4.4.1(vite@6.3.5(@types/node@20.17.43)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1))
       autoprefixer:
         specifier: ^10.4.16
         version: 10.4.21(postcss@8.5.3)
@@ -1233,10 +1242,10 @@ importers:
         version: 5.8.3
       vite:
         specifier: ^6.3.5
-        version: 6.3.5(@types/node@20.17.43)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)
+        version: 6.3.5(@types/node@20.17.43)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)
       vite-tsconfig-paths:
         specifier: ^4.2.1
-        version: 4.3.2(typescript@5.8.3)(vite@6.3.5(@types/node@20.17.43)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1))
+        version: 4.3.2(typescript@5.8.3)(vite@6.3.5(@types/node@20.17.43)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1))
 
   packages/ui-solid:
     dependencies:
@@ -1249,9 +1258,6 @@ importers:
       solid-js:
         specifier: ^1.9.3
         version: 1.9.6
-      tailwindcss:
-        specifier: ^3.4.10
-        version: 3.4.17(ts-node@10.9.2(@swc/core@1.15.5(@swc/helpers@0.5.17))(@swc/wasm@1.15.5)(@types/node@22.15.17)(typescript@5.8.3))
       zod:
         specifier: ^3
         version: 3.25.76
@@ -1262,33 +1268,33 @@ importers:
       '@iconify/json':
         specifier: ^2.2.239
         version: 2.2.336
-      '@kobalte/tailwindcss':
-        specifier: ^0.9.0
-        version: 0.9.0(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.15.5(@swc/helpers@0.5.17))(@swc/wasm@1.15.5)(@types/node@22.15.17)(typescript@5.8.3)))
       '@tailwindcss/typography':
         specifier: ^0.5.9
-        version: 0.5.16(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.15.5(@swc/helpers@0.5.17))(@swc/wasm@1.15.5)(@types/node@22.15.17)(typescript@5.8.3)))
+        version: 0.5.16(tailwindcss@4.3.0)
       autoprefixer:
-        specifier: ^10.4.20
-        version: 10.4.21(postcss@8.5.3)
+        specifier: ^10.4.21
+        version: 10.4.21(postcss@8.5.14)
       postcss:
-        specifier: ^8.4.41
-        version: 8.5.3
+        specifier: ^8.5.10
+        version: 8.5.14
       storybook-solidjs:
         specifier: ^1.0.0-beta.2
         version: 1.0.0-beta.7(@storybook/test@8.6.12(storybook@8.6.12(prettier@3.7.4)))(solid-js@1.9.6)(storybook@8.6.12(prettier@3.7.4))
       tailwind-scrollbar:
-        specifier: ^3.1.0
-        version: 3.1.0(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.15.5(@swc/helpers@0.5.17))(@swc/wasm@1.15.5)(@types/node@22.15.17)(typescript@5.8.3)))
-      tailwindcss-animate:
-        specifier: ^1.0.6
-        version: 1.0.7(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.15.5(@swc/helpers@0.5.17))(@swc/wasm@1.15.5)(@types/node@22.15.17)(typescript@5.8.3)))
+        specifier: ^4.0.2
+        version: 4.0.2(react@19.2.4)(tailwindcss@4.3.0)
+      tailwindcss:
+        specifier: ^4.3
+        version: 4.3.0
+      tw-animate-css:
+        specifier: ^1.4.0
+        version: 1.4.0
       unplugin-auto-import:
         specifier: ^0.18.2
         version: 0.18.6(rollup@4.40.2)
       unplugin-fonts:
         specifier: ^1.1.1
-        version: 1.3.1(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1))
+        version: 1.3.1(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1))
       unplugin-icons:
         specifier: ^0.19.2
         version: 0.19.3
@@ -1932,10 +1938,6 @@ packages:
     resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
     engines: {node: '>=6.9.0'}
 
-  '@babel/traverse@7.27.1':
-    resolution: {integrity: sha512-ZCYtZciz1IWJB4U61UPu4KEaqyfj+r5T1Q5mqPo+IBpcG9kHv30Z0aD8LXPgC1trYa6rK0orRyAhqUgk4MjmEg==}
-    engines: {node: '>=6.9.0'}
-
   '@babel/traverse@7.27.4':
     resolution: {integrity: sha512-oNcu2QbHqts9BtOWJosOVJapWjBDSxGCpFvikNR5TGDYDQf3JwpIoMzIKrvfoti93cLfPJEG4tH9SPVeyCGgdA==}
     engines: {node: '>=6.9.0'}
@@ -2345,9 +2347,6 @@ packages:
   '@emnapi/core@1.5.0':
     resolution: {integrity: sha512-sbP8GzB1WDzacS8fgNPpHlp6C9VZe+SJP3F90W9rLemaQj2PzIuTEl1qDOYQf58YIpyjViI24y9aPWCjEzY2cg==}
 
-  '@emnapi/core@1.9.1':
-    resolution: {integrity: sha512-mukuNALVsoix/w1BJwFzwXBN/dHeejQtuVzcDsfOEsdpCumXb/E9j8w11h5S54tT1xhifGfbbSm/ICrObRb3KA==}
-
   '@emnapi/runtime@1.10.0':
     resolution: {integrity: sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==}
 
@@ -2357,18 +2356,9 @@ packages:
   '@emnapi/runtime@1.5.0':
     resolution: {integrity: sha512-97/BJ3iXHww3djw6hYIfErCZFee7qCtrneuLa20UXFCOTCfBM2cvQHjWJ2EG0s0MtdNwInarqCTz35i4wWXHsQ==}
 
-  '@emnapi/runtime@1.7.1':
-    resolution: {integrity: sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA==}
-
-  '@emnapi/runtime@1.9.1':
-    resolution: {integrity: sha512-VYi5+ZVLhpgK4hQ0TAjiQiZ6ol0oe4mBx7mVv7IflsiEp0OWoVsp/+f9Vc1hOhE0TtkORVrI1GvzyreqpgWtkA==}
-
   '@emnapi/wasi-threads@1.1.0':
     resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
 
-  '@emnapi/wasi-threads@1.2.0':
-    resolution: {integrity: sha512-N10dEJNSsUx41Z6pZsXU8FjPjpBEplgH24sfkmITrBED1/U2Esum9F3lfLrMjKHHjmi557zQn7kR9R+XWXu5Rg==}
-
   '@emnapi/wasi-threads@1.2.1':
     resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
 
@@ -4062,6 +4052,11 @@ packages:
   '@juggle/resize-observer@3.4.0':
     resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==}
 
+  '@kobalte/core@0.13.11':
+    resolution: {integrity: sha512-hK7TYpdib/XDb/r/4XDBFaO9O+3ZHz4ZWryV4/3BfES+tSQVgg2IJupDnztKXB0BqbSRy/aWlHKw1SPtNPYCFQ==}
+    peerDependencies:
+      solid-js: ^1.8.15
+
   '@kobalte/core@0.13.9':
     resolution: {integrity: sha512-TkeSpgNy7I5k8jwjqT9CK3teAxN0aFb3yyL9ODb06JVYMwXIk+UKrizoAF1ahLUP85lKnxv44B4Y5cXkHShgqw==}
     peerDependencies:
@@ -7493,6 +7488,94 @@ packages:
       zod:
         optional: true
 
+  '@tailwindcss/node@4.3.0':
+    resolution: {integrity: sha512-aFb4gUhFOgdh9AXo4IzBEOzBkkAxm9VigwDJnMIYv3lcfXCJVesNfbEaBl4BNgVRyid92AmdviqwBUBRKSeY3g==}
+
+  '@tailwindcss/oxide-android-arm64@4.3.0':
+    resolution: {integrity: sha512-TJPiq67tKlLuObP6RkwvVGDoxCMBVtDgKkLfa/uyj7/FyxvQwHS+UOnVrXXgbEsfUaMgiVvC4KbJnRr26ho4Ng==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.3.0':
+    resolution: {integrity: sha512-oMN/WZRb+SO37BmUElEgeEWuU8E/HXRkiODxJxLe1UTHVXLrdVSgfaJV7pSlhRGMSOiXLuxTIjfsF3wYvz8cgQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.3.0':
+    resolution: {integrity: sha512-N6CUmu4a6bKVADfw77p+iw6Yd9Q3OBhe0veaDX+QazfuVYlQsHfDgxBrsjQ/IW+zywL8mTrNd0SdJT/zgtvMdA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.3.0':
+    resolution: {integrity: sha512-zDL5hBkQdH5C6MpqbK3gQAgP80tsMwSI26vjOzjJtNCMUo0lFgOItzHKBIupOZNQxt3ouPH7RPhvNhiTfCe5CQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.0':
+    resolution: {integrity: sha512-R06HdNi7A7OEoMsf6d4tjZ71RCWnZQPHj2mnotSFURjNLdBC+cIgXQ7l81CqeoiQftjf6OOblxXMInMgN2VzMA==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.0':
+    resolution: {integrity: sha512-qTJHELX8jetjhRQHCLilkVLmybpzNQAtaI/gaoVoidn/ufbNDbAo8KlK2J+yPoc8wQxvDxCmh/5lr8nC1+lTbg==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.0':
+    resolution: {integrity: sha512-Z6sukiQsngnWO+l39X4pPbiWT81IC+PLKF+PHxIlyZbGNb9MODfYlXEVlFvej5BOZInWX01kVyzeLvHsXhfczQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.0':
+    resolution: {integrity: sha512-DRNdQRpSGzRGfARVuVkxvM8Q12nh19l4BF/G7zGA1oe+9wcC6saFBHTISrpIcKzhiXtSrlSrluCfvMuledoCTQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.3.0':
+    resolution: {integrity: sha512-Z0IADbDo8bh6I7h2IQMx601AdXBLfFpEdUotft86evd/8ZPflZe9COPO8Q1vw+pfLWIUo9zN/JGZvwuAJqduqg==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.3.0':
+    resolution: {integrity: sha512-HNZGOUxEmElksYR7S6sC5jTeNGpobAsy9u7Gu0AskJ8/20FR9GqebUyB+HBcU/ax6BHuiuJi+Oda4B+YX6H1yA==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.0':
+    resolution: {integrity: sha512-Pe+RPVTi1T+qymuuRpcdvwSVZjnll/f7n8gBxMMh3xLTctMDKqpdfGimbMyioqtLhUYZxdJ9wGNhV7MKHvgZsQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.0':
+    resolution: {integrity: sha512-Mvrf2kXW/yeW/OTezZlCGOirXRcUuLIBx/5Y12BaPM7wJoryG6dfS/NJL8aBPqtTEx/Vm4T4vKzFUcKDT+TKUA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.3.0':
+    resolution: {integrity: sha512-F7HZGBeN9I0/AuuJS5PwcD8xayx5ri5GhjYUDBEVYUkexyA/giwbDNjRVrxSezE3T250OU2K/wp/ltWx3UOefg==}
+    engines: {node: '>= 20'}
+
+  '@tailwindcss/postcss@4.3.0':
+    resolution: {integrity: sha512-Jm05Tjx+9yCLGv5qw1c+84Psds8MnyrEQYCB+FFk2lgGiUjlRqdxke4mVTuYrj2xnVZqKim2Apr5ySuQRYAw/w==}
+
   '@tailwindcss/typography@0.5.16':
     resolution: {integrity: sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==}
     peerDependencies:
@@ -7600,8 +7683,8 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
-  '@tauri-apps/cli-darwin-arm64@2.5.0':
-    resolution: {integrity: sha512-VuVAeTFq86dfpoBDNYAdtQVLbP0+2EKCHIIhkaxjeoPARR0sLpFHz2zs0PcFU76e+KAaxtEtAJAXGNUc8E1PzQ==}
+  '@tauri-apps/cli-darwin-arm64@2.11.0':
+    resolution: {integrity: sha512-UfMeDNlgIP252rm/KSTuu8yHatPua5TjtUEUf+jyIzVwBNcIl7Ywkdpfj+e5jVVg3EfCTp+4gwuL1dNpgF8clg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
@@ -7612,8 +7695,8 @@ packages:
     cpu: [x64]
     os: [darwin]
 
-  '@tauri-apps/cli-darwin-x64@2.5.0':
-    resolution: {integrity: sha512-hUF01sC06cZVa8+I0/VtsHOk9BbO75rd+YdtHJ48xTdcYaQ5QIwL4yZz9OR1AKBTaUYhBam8UX9Pvd5V2/4Dpw==}
+  '@tauri-apps/cli-darwin-x64@2.11.0':
+    resolution: {integrity: sha512-lY1+aPlgyMN7vgjtCdQ3+WODfZkebAcxnrCrO0HjqDpKSXieDkrJbimqeaoM4RwhTSrCLRHfVYiYrfE5E131tg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
@@ -7624,8 +7707,8 @@ packages:
     cpu: [arm]
     os: [linux]
 
-  '@tauri-apps/cli-linux-arm-gnueabihf@2.5.0':
-    resolution: {integrity: sha512-LQKqttsK252LlqYyX8R02MinUsfFcy3+NZiJwHFgi5Y3+ZUIAED9cSxJkyNtuY5KMnR4RlpgWyLv4P6akN1xhg==}
+  '@tauri-apps/cli-linux-arm-gnueabihf@2.11.0':
+    resolution: {integrity: sha512-5uCP0AusgN3NrKC8EpkuJwjek1k8pEffBdugJSpXPey/QGbPEb8vZ542n/giJ2mZPjMSllDkdhG2QIDpBY4PpQ==}
     engines: {node: '>= 10'}
     cpu: [arm]
     os: [linux]
@@ -7636,8 +7719,8 @@ packages:
     cpu: [arm64]
     os: [linux]
 
-  '@tauri-apps/cli-linux-arm64-gnu@2.5.0':
-    resolution: {integrity: sha512-mTQufsPcpdHg5RW0zypazMo4L55EfeE5snTzrPqbLX4yCK2qalN7+rnP8O8GT06xhp6ElSP/Ku1M2MR297SByQ==}
+  '@tauri-apps/cli-linux-arm64-gnu@2.11.0':
+    resolution: {integrity: sha512-loDPqtRHMSbIcrH2VBd4GgHoQlF7jJnrZj7MxA2lj1cixS/jEgMAPFqj83U6Wvjete4HfYplbE/gCpSFifA9jw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
@@ -7648,14 +7731,14 @@ packages:
     cpu: [arm64]
     os: [linux]
 
-  '@tauri-apps/cli-linux-arm64-musl@2.5.0':
-    resolution: {integrity: sha512-rQO1HhRUQqyEaal5dUVOQruTRda/TD36s9kv1hTxZiFuSq3558lsTjAcUEnMAtBcBkps20sbyTJNMT0AwYIk8Q==}
+  '@tauri-apps/cli-linux-arm64-musl@2.11.0':
+    resolution: {integrity: sha512-DtSE8ZBlB9H+L+eHkfZ3myt00EVEyAB3e41juEHoE2qT88fgVlJvyrwa9SZYc/xTwCS9TnmK+R84tpg+ZsAg7Q==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@tauri-apps/cli-linux-riscv64-gnu@2.5.0':
-    resolution: {integrity: sha512-7oS18FN46yDxyw1zX/AxhLAd7T3GrLj3Ai6s8hZKd9qFVzrAn36ESL7d3G05s8wEtsJf26qjXnVF4qleS3dYsA==}
+  '@tauri-apps/cli-linux-riscv64-gnu@2.11.0':
+    resolution: {integrity: sha512-5QdgS4LD+kntClI1aj2JmwjW38LosNXxwCe8viIHEwqYIWuMPdNEIau6/cLogI38Yzx9DnfCPRfEWLyI+5li8Q==}
     engines: {node: '>= 10'}
     cpu: [riscv64]
     os: [linux]
@@ -7666,8 +7749,8 @@ packages:
     cpu: [x64]
     os: [linux]
 
-  '@tauri-apps/cli-linux-x64-gnu@2.5.0':
-    resolution: {integrity: sha512-SG5sFNL7VMmDBdIg3nO3EzNRT306HsiEQ0N90ILe3ZABYAVoPDO/ttpCO37ApLInTzrq/DLN+gOlC/mgZvLw1w==}
+  '@tauri-apps/cli-linux-x64-gnu@2.11.0':
+    resolution: {integrity: sha512-5UynPXo3Zq9khjVdAbD+YogeLltdVUeOah2ioSIM3tu6H7wY9vMy6rgGJhv9r5R8ZXmk9GttMippdqYJWrnLnA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -7678,8 +7761,8 @@ packages:
     cpu: [x64]
     os: [linux]
 
-  '@tauri-apps/cli-linux-x64-musl@2.5.0':
-    resolution: {integrity: sha512-QXDM8zp/6v05PNWju5ELsVwF0VH1n6b5pk2E6W/jFbbiwz80Vs1lACl9pv5kEHkrxBj+aWU/03JzGuIj2g3SkQ==}
+  '@tauri-apps/cli-linux-x64-musl@2.11.0':
+    resolution: {integrity: sha512-CNz7fHbApz1Zyhhq73jtGn9JqgNEV/lIWnTnUo6h6ujw+mHsTmkLszvJSM8W6JBaDjNpTTFr/RSNoVL5FMwcTg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
@@ -7690,8 +7773,8 @@ packages:
     cpu: [arm64]
     os: [win32]
 
-  '@tauri-apps/cli-win32-arm64-msvc@2.5.0':
-    resolution: {integrity: sha512-pFSHFK6b+o9y4Un8w0gGLwVyFTZaC3P0kQ7umRt/BLDkzD5RnQ4vBM7CF8BCU5nkwmEBUCZd7Wt3TWZxe41o6Q==}
+  '@tauri-apps/cli-win32-arm64-msvc@2.11.0':
+    resolution: {integrity: sha512-K+br+VXZ+Xx0n/9FdWohpW5Ugq+2FQUpJScqcPl1hTxXfh3fgjYgt4qA2NgrjlJo+zZPNrmUMl+NLvm0ufEqBQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
@@ -7702,8 +7785,8 @@ packages:
     cpu: [ia32]
     os: [win32]
 
-  '@tauri-apps/cli-win32-ia32-msvc@2.5.0':
-    resolution: {integrity: sha512-EArv1IaRlogdLAQyGlKmEqZqm5RfHCUMhJoedWu7GtdbOMUfSAz6FMX2boE1PtEmNO4An+g188flLeVErrxEKg==}
+  '@tauri-apps/cli-win32-ia32-msvc@2.11.0':
+    resolution: {integrity: sha512-OFV+s3MLZnd75zl0ZAFU5riMpGK4waUEA8ZDuijDsnkU0btz/gHhqh5jVlOn8thyvgdtT3Xyoxqo099MMifH3g==}
     engines: {node: '>= 10'}
     cpu: [ia32]
     os: [win32]
@@ -7714,8 +7797,8 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@tauri-apps/cli-win32-x64-msvc@2.5.0':
-    resolution: {integrity: sha512-lj43EFYbnAta8pd9JnUq87o+xRUR0odz+4rixBtTUwUgdRdwQ2V9CzFtsMu6FQKpFQ6mujRK6P1IEwhL6ADRsQ==}
+  '@tauri-apps/cli-win32-x64-msvc@2.11.0':
+    resolution: {integrity: sha512-AeDTWBd2cOZ6TX133BWsoo+LutG9o0JRcgjMsIfLE13ZugpgCMv/2dJbUiBGeRvbPOGin5A3aYmsArPVV6ZSHQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
@@ -7725,8 +7808,8 @@ packages:
     engines: {node: '>= 10'}
     hasBin: true
 
-  '@tauri-apps/cli@2.5.0':
-    resolution: {integrity: sha512-rAtHqG0Gh/IWLjN2zTf3nZqYqbo81oMbqop56rGTjrlWk9pTTAjkqOjSL9XQLIMZ3RbeVjveCqqCA0s8RnLdMg==}
+  '@tauri-apps/cli@2.11.0':
+    resolution: {integrity: sha512-W5Wbuqsb2pHFPTj4TaRNKTj5rwXhDShPiLSY9T18y4ouSR/NNCptAEFxFsBtyNRgL6Vs1a/q9LzfqqYzEwC+Jw==}
     engines: {node: '>= 10'}
     hasBin: true
 
@@ -8051,6 +8134,9 @@ packages:
   '@types/normalize-package-data@2.4.4':
     resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==}
 
+  '@types/prismjs@1.26.6':
+    resolution: {integrity: sha512-vqlvI7qlMvcCBbVe0AKAb4f97//Hy0EBTaiW8AalRnG/xAN5zOiWWyrNqNXeq8+KAuvRewjCVY1+IPxk4RdNYw==}
+
   '@types/qs@6.9.18':
     resolution: {integrity: sha512-kK7dgTYDyGqS+e2Q4aK9X3D7q234CIZ1Bv0q/7Z5IwRDoADNU81xXJK/YVyLbLTZCoIwUoDoffFeF+p/eIklAA==}
 
@@ -10364,6 +10450,10 @@ packages:
     resolution: {integrity: sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==}
     engines: {node: '>=10.13.0'}
 
+  enhanced-resolve@5.21.3:
+    resolution: {integrity: sha512-QyL119InA+XXEkNLNTPCXPugSvOfhwv0JOlGNzvxs0hZaiHLNvXSpudUWsOlsXGWJh8G6ckCScEkVHfX3kw/2Q==}
+    engines: {node: '>=10.13.0'}
+
   enquirer@2.4.1:
     resolution: {integrity: sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==}
     engines: {node: '>=8.6'}
@@ -12193,6 +12283,76 @@ packages:
   lie@3.3.0:
     resolution: {integrity: sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==}
 
+  lightningcss-android-arm64@1.32.0:
+    resolution: {integrity: sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.32.0:
+    resolution: {integrity: sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.32.0:
+    resolution: {integrity: sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.32.0:
+    resolution: {integrity: sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    resolution: {integrity: sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    resolution: {integrity: sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-linux-x64-musl@1.32.0:
+    resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    resolution: {integrity: sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
+  lightningcss@1.32.0:
+    resolution: {integrity: sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==}
+    engines: {node: '>= 12.0.0'}
+
   lilconfig@3.1.3:
     resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
@@ -13589,6 +13749,10 @@ packages:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
 
+  postcss@8.5.14:
+    resolution: {integrity: sha512-SoSL4+OSEtR99LHFZQiJLkT59C5B1amGO1NzTwj7TT1qCUgUO6hxOvzkOYxD+vMrXBM3XJIKzokoERdqQq/Zmg==}
+    engines: {node: ^10 || ^12 || >=14}
+
   postcss@8.5.3:
     resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
     engines: {node: ^10 || ^12 || >=14}
@@ -13648,6 +13812,11 @@ packages:
   printable-characters@1.0.42:
     resolution: {integrity: sha512-dKp+C4iXWK4vVYZmYSd0KBH5F/h1HoZRsbJ82AVKRO3PEo8L4lBS/vLwhVtpwwuYcoIsVY+1JYKR268yn480uQ==}
 
+  prism-react-renderer@2.4.1:
+    resolution: {integrity: sha512-ey8Ls/+Di31eqzUxC46h8MksNuGx/n0AAC8uKpwFau4RPDYLuE3EXTp8N8G2vX2N7UC/+IXeNUnlWBGGcAG+Ig==}
+    peerDependencies:
+      react: '>=16.0.0'
+
   prismjs@1.30.0:
     resolution: {integrity: sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==}
     engines: {node: '>=6'}
@@ -14930,6 +15099,12 @@ packages:
     peerDependencies:
       tailwindcss: 3.x
 
+  tailwind-scrollbar@4.0.2:
+    resolution: {integrity: sha512-wAQiIxAPqk0MNTPptVe/xoyWi27y+NRGnTwvn4PQnbvB9kp8QUBiGl/wsfoVBHnQxTmhXJSNt9NHTmcz9EivFA==}
+    engines: {node: '>=12.13.0'}
+    peerDependencies:
+      tailwindcss: 4.x
+
   tailwindcss-animate@1.0.7:
     resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
     peerDependencies:
@@ -14940,10 +15115,17 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
+  tailwindcss@4.3.0:
+    resolution: {integrity: sha512-y6nxMGB1nMW9R6k96e5gdIFzcfL/gTJRNaqGes1YvkLnPVXzWgbqFF2yLC0T8G774n24cx3Pe8XrKoniCOAH+Q==}
+
   tapable@2.3.0:
     resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
     engines: {node: '>=6'}
 
+  tapable@2.3.3:
+    resolution: {integrity: sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==}
+    engines: {node: '>=6'}
+
   tar-stream@2.2.0:
     resolution: {integrity: sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==}
     engines: {node: '>=6'}
@@ -15295,6 +15477,9 @@ packages:
     resolution: {integrity: sha512-iHuaNcq5GZZnr3XDZNuu2LSyCzAOPwDuo5Qt+q64DfsTP1i3T2bKfxJhni2ZQxsvAoxRbuUK5QetJki4qc5aYA==}
     hasBin: true
 
+  tw-animate-css@1.4.0:
+    resolution: {integrity: sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==}
+
   tween-functions@1.2.0:
     resolution: {integrity: sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA==}
 
@@ -17726,18 +17911,6 @@ snapshots:
       '@babel/parser': 7.27.5
       '@babel/types': 7.27.1
 
-  '@babel/traverse@7.27.1':
-    dependencies:
-      '@babel/code-frame': 7.27.1
-      '@babel/generator': 7.27.1
-      '@babel/parser': 7.27.5
-      '@babel/template': 7.27.2
-      '@babel/types': 7.27.1
-      debug: 4.4.3(supports-color@8.1.1)
-      globals: 11.12.0
-    transitivePeerDependencies:
-      - supports-color
-
   '@babel/traverse@7.27.4':
     dependencies:
       '@babel/code-frame': 7.27.1
@@ -17871,7 +18044,7 @@ snapshots:
     optionalDependencies:
       workerd: 1.20250408.0
 
-  '@cloudflare/vitest-pool-workers@0.6.16(@cloudflare/workers-types@4.20250507.0)(@vitest/runner@3.2.4)(@vitest/snapshot@3.2.4)(vitest@2.1.9(@types/node@22.15.17)(jsdom@26.1.0)(terser@5.44.0))':
+  '@cloudflare/vitest-pool-workers@0.6.16(@cloudflare/workers-types@4.20250507.0)(@vitest/runner@3.2.4)(@vitest/snapshot@3.2.4)(vitest@2.1.9(@types/node@22.15.17)(jsdom@26.1.0)(lightningcss@1.32.0)(terser@5.44.0))':
     dependencies:
       '@vitest/runner': 3.2.4
       '@vitest/snapshot': 3.2.4
@@ -17881,7 +18054,7 @@ snapshots:
       esbuild: 0.17.19
       miniflare: 3.20250204.1
       semver: 7.7.1
-      vitest: 2.1.9(@types/node@22.15.17)(jsdom@26.1.0)(terser@5.44.0)
+      vitest: 2.1.9(@types/node@22.15.17)(jsdom@26.1.0)(lightningcss@1.32.0)(terser@5.44.0)
       wrangler: 3.109.1(@cloudflare/workers-types@4.20250507.0)
       zod: 3.25.76
     transitivePeerDependencies:
@@ -18143,12 +18316,6 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@emnapi/core@1.9.1':
-    dependencies:
-      '@emnapi/wasi-threads': 1.2.0
-      tslib: 2.8.1
-    optional: true
-
   '@emnapi/runtime@1.10.0':
     dependencies:
       tslib: 2.8.1
@@ -18164,26 +18331,11 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@emnapi/runtime@1.7.1':
-    dependencies:
-      tslib: 2.8.1
-    optional: true
-
-  '@emnapi/runtime@1.9.1':
-    dependencies:
-      tslib: 2.8.1
-    optional: true
-
   '@emnapi/wasi-threads@1.1.0':
     dependencies:
       tslib: 2.8.1
     optional: true
 
-  '@emnapi/wasi-threads@1.2.0':
-    dependencies:
-      tslib: 2.8.1
-    optional: true
-
   '@emnapi/wasi-threads@1.2.1':
     dependencies:
       tslib: 2.8.1
@@ -19171,7 +19323,7 @@ snapshots:
 
   '@img/sharp-wasm32@0.34.5':
     dependencies:
-      '@emnapi/runtime': 1.7.1
+      '@emnapi/runtime': 1.10.0
     optional: true
 
   '@img/sharp-win32-arm64@0.34.5':
@@ -19263,6 +19415,18 @@ snapshots:
 
   '@juggle/resize-observer@3.4.0': {}
 
+  '@kobalte/core@0.13.11(solid-js@1.9.6)':
+    dependencies:
+      '@floating-ui/dom': 1.7.0
+      '@internationalized/date': 3.8.0
+      '@internationalized/number': 3.6.1
+      '@kobalte/utils': 0.9.1(solid-js@1.9.6)
+      '@solid-primitives/props': 3.2.1(solid-js@1.9.6)
+      '@solid-primitives/resize-observer': 2.1.1(solid-js@1.9.6)
+      solid-js: 1.9.6
+      solid-presence: 0.1.8(solid-js@1.9.6)
+      solid-prevent-scroll: 0.1.10(solid-js@1.9.6)
+
   '@kobalte/core@0.13.9(solid-js@1.9.6)':
     dependencies:
       '@floating-ui/dom': 1.7.0
@@ -19279,10 +19443,6 @@ snapshots:
     dependencies:
       tailwindcss: 3.4.17(ts-node@10.9.2(@swc/core@1.15.5(@swc/helpers@0.5.17))(@swc/wasm@1.15.5)(@types/node@20.17.43)(typescript@5.8.3))
 
-  '@kobalte/tailwindcss@0.9.0(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.15.5(@swc/helpers@0.5.17))(@swc/wasm@1.15.5)(@types/node@22.15.17)(typescript@5.8.3)))':
-    dependencies:
-      tailwindcss: 3.4.17(ts-node@10.9.2(@swc/core@1.15.5(@swc/helpers@0.5.17))(@swc/wasm@1.15.5)(@types/node@22.15.17)(typescript@5.8.3))
-
   '@kobalte/utils@0.9.1(solid-js@1.9.6)':
     dependencies:
       '@solid-primitives/event-listener': 2.4.1(solid-js@1.9.6)
@@ -19338,7 +19498,7 @@ snapshots:
       '@planetscale/database': 1.19.0
       mysql2: 3.15.2
 
-  '@mdx-js/mdx@3.1.0(acorn@8.15.0)':
+  '@mdx-js/mdx@3.1.0(acorn@8.16.0)':
     dependencies:
       '@types/estree': 1.0.8
       '@types/estree-jsx': 1.0.5
@@ -19352,7 +19512,7 @@ snapshots:
       hast-util-to-jsx-runtime: 2.3.6
       markdown-extensions: 2.0.0
       recma-build-jsx: 1.0.0
-      recma-jsx: 1.0.0(acorn@8.15.0)
+      recma-jsx: 1.0.0(acorn@8.16.0)
       recma-stringify: 1.0.0
       rehype-recma: 1.0.0
       remark-mdx: 3.1.0
@@ -19537,8 +19697,8 @@ snapshots:
 
   '@napi-rs/wasm-runtime@0.2.9':
     dependencies:
-      '@emnapi/core': 1.9.1
-      '@emnapi/runtime': 1.9.1
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
       '@tybys/wasm-util': 0.9.0
     optional: true
 
@@ -22921,11 +23081,11 @@ snapshots:
     dependencies:
       solid-js: 1.9.6
 
-  '@solidjs/start@1.1.3(@testing-library/jest-dom@6.5.0)(@types/node@22.15.17)(jiti@2.6.1)(solid-js@1.9.6)(terser@5.44.0)(vinxi@0.5.6(@planetscale/database@1.19.0)(@types/node@22.15.17)(db0@0.3.2(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(mysql2@3.15.2))(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(mysql2@3.15.2)(rolldown@1.0.1)(terser@5.44.0)(xml2js@0.6.2)(yaml@2.8.1))(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1))(yaml@2.8.1)':
+  '@solidjs/start@1.1.3(@testing-library/jest-dom@6.5.0)(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(solid-js@1.9.6)(terser@5.44.0)(vinxi@0.5.6(@planetscale/database@1.19.0)(@types/node@22.15.17)(db0@0.3.2(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(mysql2@3.15.2))(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(lightningcss@1.32.0)(mysql2@3.15.2)(rolldown@1.0.1)(terser@5.44.0)(xml2js@0.6.2)(yaml@2.8.1))(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1))(yaml@2.8.1)':
     dependencies:
-      '@tanstack/server-functions-plugin': 1.119.2(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)
-      '@vinxi/plugin-directives': 0.5.1(vinxi@0.5.6(@planetscale/database@1.19.0)(@types/node@22.15.17)(db0@0.3.2(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(mysql2@3.15.2))(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(mysql2@3.15.2)(rolldown@1.0.1)(terser@5.44.0)(xml2js@0.6.2)(yaml@2.8.1))
-      '@vinxi/server-components': 0.5.1(vinxi@0.5.6(@planetscale/database@1.19.0)(@types/node@22.15.17)(db0@0.3.2(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(mysql2@3.15.2))(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(mysql2@3.15.2)(rolldown@1.0.1)(terser@5.44.0)(xml2js@0.6.2)(yaml@2.8.1))
+      '@tanstack/server-functions-plugin': 1.119.2(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)
+      '@vinxi/plugin-directives': 0.5.1(vinxi@0.5.6(@planetscale/database@1.19.0)(@types/node@22.15.17)(db0@0.3.2(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(mysql2@3.15.2))(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(lightningcss@1.32.0)(mysql2@3.15.2)(rolldown@1.0.1)(terser@5.44.0)(xml2js@0.6.2)(yaml@2.8.1))
+      '@vinxi/server-components': 0.5.1(vinxi@0.5.6(@planetscale/database@1.19.0)(@types/node@22.15.17)(db0@0.3.2(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(mysql2@3.15.2))(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(lightningcss@1.32.0)(mysql2@3.15.2)(rolldown@1.0.1)(terser@5.44.0)(xml2js@0.6.2)(yaml@2.8.1))
       defu: 6.1.4
       error-stack-parser: 2.1.4
       html-to-image: 1.11.13
@@ -22936,8 +23096,8 @@ snapshots:
       source-map-js: 1.2.1
       terracotta: 1.0.6(solid-js@1.9.6)
       tinyglobby: 0.2.13
-      vinxi: 0.5.6(@planetscale/database@1.19.0)(@types/node@22.15.17)(db0@0.3.2(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(mysql2@3.15.2))(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(mysql2@3.15.2)(rolldown@1.0.1)(terser@5.44.0)(xml2js@0.6.2)(yaml@2.8.1)
-      vite-plugin-solid: 2.11.6(@testing-library/jest-dom@6.5.0)(solid-js@1.9.6)(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1))
+      vinxi: 0.5.6(@planetscale/database@1.19.0)(@types/node@22.15.17)(db0@0.3.2(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(mysql2@3.15.2))(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(lightningcss@1.32.0)(mysql2@3.15.2)(rolldown@1.0.1)(terser@5.44.0)(xml2js@0.6.2)(yaml@2.8.1)
+      vite-plugin-solid: 2.11.6(@testing-library/jest-dom@6.5.0)(solid-js@1.9.6)(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1))
     transitivePeerDependencies:
       - '@testing-library/jest-dom'
       - '@types/node'
@@ -23066,12 +23226,12 @@ snapshots:
       react: 19.2.4
       react-dom: 19.2.4(react@19.2.4)
 
-  '@storybook/builder-vite@10.5.0-alpha.0(esbuild@0.25.5)(rollup@4.40.2)(storybook@8.6.12(prettier@3.7.4))(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1))(webpack@5.101.3(esbuild@0.25.5))':
+  '@storybook/builder-vite@10.5.0-alpha.0(esbuild@0.25.5)(rollup@4.40.2)(storybook@8.6.12(prettier@3.7.4))(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1))(webpack@5.101.3(esbuild@0.25.5))':
     dependencies:
-      '@storybook/csf-plugin': 10.5.0-alpha.0(esbuild@0.25.5)(rollup@4.40.2)(storybook@8.6.12(prettier@3.7.4))(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1))(webpack@5.101.3(esbuild@0.25.5))
+      '@storybook/csf-plugin': 10.5.0-alpha.0(esbuild@0.25.5)(rollup@4.40.2)(storybook@8.6.12(prettier@3.7.4))(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1))(webpack@5.101.3(esbuild@0.25.5))
       storybook: 8.6.12(prettier@3.7.4)
       ts-dedent: 2.2.0
-      vite: 6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)
+      vite: 6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)
     transitivePeerDependencies:
       - esbuild
       - rollup
@@ -23098,14 +23258,14 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  '@storybook/csf-plugin@10.5.0-alpha.0(esbuild@0.25.5)(rollup@4.40.2)(storybook@8.6.12(prettier@3.7.4))(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1))(webpack@5.101.3(esbuild@0.25.5))':
+  '@storybook/csf-plugin@10.5.0-alpha.0(esbuild@0.25.5)(rollup@4.40.2)(storybook@8.6.12(prettier@3.7.4))(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1))(webpack@5.101.3(esbuild@0.25.5))':
     dependencies:
       storybook: 8.6.12(prettier@3.7.4)
       unplugin: 2.3.11
     optionalDependencies:
       esbuild: 0.25.5
       rollup: 4.40.2
-      vite: 6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)
+      vite: 6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)
       webpack: 5.101.3(esbuild@0.25.5)
 
   '@storybook/csf-plugin@8.6.12(storybook@8.6.12(prettier@3.7.4))':
@@ -23320,6 +23480,75 @@ snapshots:
       valibot: 1.0.0-rc.1(typescript@5.8.3)
       zod: 3.25.76
 
+  '@tailwindcss/node@4.3.0':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.21.3
+      jiti: 2.6.1
+      lightningcss: 1.32.0
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.3.0
+
+  '@tailwindcss/oxide-android-arm64@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.3.0':
+    optional: true
+
+  '@tailwindcss/oxide@4.3.0':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.3.0
+      '@tailwindcss/oxide-darwin-arm64': 4.3.0
+      '@tailwindcss/oxide-darwin-x64': 4.3.0
+      '@tailwindcss/oxide-freebsd-x64': 4.3.0
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.3.0
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.3.0
+      '@tailwindcss/oxide-linux-arm64-musl': 4.3.0
+      '@tailwindcss/oxide-linux-x64-gnu': 4.3.0
+      '@tailwindcss/oxide-linux-x64-musl': 4.3.0
+      '@tailwindcss/oxide-wasm32-wasi': 4.3.0
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.3.0
+      '@tailwindcss/oxide-win32-x64-msvc': 4.3.0
+
+  '@tailwindcss/postcss@4.3.0':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.3.0
+      '@tailwindcss/oxide': 4.3.0
+      postcss: 8.5.14
+      tailwindcss: 4.3.0
+
   '@tailwindcss/typography@0.5.16(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.15.5(@swc/helpers@0.5.17))(@swc/wasm@1.15.5)(@types/node@20.17.43)(typescript@5.8.3)))':
     dependencies:
       lodash.castarray: 4.4.0
@@ -23328,13 +23557,13 @@ snapshots:
       postcss-selector-parser: 6.0.10
       tailwindcss: 3.4.17(ts-node@10.9.2(@swc/core@1.15.5(@swc/helpers@0.5.17))(@swc/wasm@1.15.5)(@types/node@20.17.43)(typescript@5.8.3))
 
-  '@tailwindcss/typography@0.5.16(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.15.5(@swc/helpers@0.5.17))(@swc/wasm@1.15.5)(@types/node@22.15.17)(typescript@5.8.3)))':
+  '@tailwindcss/typography@0.5.16(tailwindcss@4.3.0)':
     dependencies:
       lodash.castarray: 4.4.0
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       postcss-selector-parser: 6.0.10
-      tailwindcss: 3.4.17(ts-node@10.9.2(@swc/core@1.15.5(@swc/helpers@0.5.17))(@swc/wasm@1.15.5)(@types/node@22.15.17)(typescript@5.8.3))
+      tailwindcss: 4.3.0
 
   '@tanstack/devtools-event-bus@0.3.2':
     dependencies:
@@ -23364,20 +23593,20 @@ snapshots:
       - csstype
       - utf-8-validate
 
-  '@tanstack/directive-functions-plugin@1.119.2(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)':
+  '@tanstack/directive-functions-plugin@1.119.2(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)':
     dependencies:
       '@babel/code-frame': 7.26.2
       '@babel/core': 7.27.1
       '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.27.1)
       '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.27.1)
       '@babel/template': 7.27.2
-      '@babel/traverse': 7.27.4
-      '@babel/types': 7.27.1
+      '@babel/traverse': 7.28.4
+      '@babel/types': 7.28.4
       '@tanstack/router-utils': 1.115.0
       babel-dead-code-elimination: 1.0.10
       dedent: 1.6.0
       tiny-invariant: 1.3.3
-      vite: 6.1.4(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)
+      vite: 6.1.4(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)
     transitivePeerDependencies:
       - '@types/node'
       - babel-plugin-macros
@@ -23449,16 +23678,16 @@ snapshots:
       ansis: 3.17.0
       diff: 7.0.0
 
-  '@tanstack/server-functions-plugin@1.119.2(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)':
+  '@tanstack/server-functions-plugin@1.119.2(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)':
     dependencies:
       '@babel/code-frame': 7.26.2
       '@babel/core': 7.27.1
       '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.27.1)
       '@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.27.1)
       '@babel/template': 7.27.2
-      '@babel/traverse': 7.27.1
-      '@babel/types': 7.27.1
-      '@tanstack/directive-functions-plugin': 1.119.2(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)
+      '@babel/traverse': 7.28.4
+      '@babel/types': 7.28.4
+      '@tanstack/directive-functions-plugin': 1.119.2(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)
       babel-dead-code-elimination: 1.0.10
       dedent: 1.6.0
       tiny-invariant: 1.3.3
@@ -23495,64 +23724,64 @@ snapshots:
   '@tauri-apps/cli-darwin-arm64@1.6.3':
     optional: true
 
-  '@tauri-apps/cli-darwin-arm64@2.5.0':
+  '@tauri-apps/cli-darwin-arm64@2.11.0':
     optional: true
 
   '@tauri-apps/cli-darwin-x64@1.6.3':
     optional: true
 
-  '@tauri-apps/cli-darwin-x64@2.5.0':
+  '@tauri-apps/cli-darwin-x64@2.11.0':
     optional: true
 
   '@tauri-apps/cli-linux-arm-gnueabihf@1.6.3':
     optional: true
 
-  '@tauri-apps/cli-linux-arm-gnueabihf@2.5.0':
+  '@tauri-apps/cli-linux-arm-gnueabihf@2.11.0':
     optional: true
 
   '@tauri-apps/cli-linux-arm64-gnu@1.6.3':
     optional: true
 
-  '@tauri-apps/cli-linux-arm64-gnu@2.5.0':
+  '@tauri-apps/cli-linux-arm64-gnu@2.11.0':
     optional: true
 
   '@tauri-apps/cli-linux-arm64-musl@1.6.3':
     optional: true
 
-  '@tauri-apps/cli-linux-arm64-musl@2.5.0':
+  '@tauri-apps/cli-linux-arm64-musl@2.11.0':
     optional: true
 
-  '@tauri-apps/cli-linux-riscv64-gnu@2.5.0':
+  '@tauri-apps/cli-linux-riscv64-gnu@2.11.0':
     optional: true
 
   '@tauri-apps/cli-linux-x64-gnu@1.6.3':
     optional: true
 
-  '@tauri-apps/cli-linux-x64-gnu@2.5.0':
+  '@tauri-apps/cli-linux-x64-gnu@2.11.0':
     optional: true
 
   '@tauri-apps/cli-linux-x64-musl@1.6.3':
     optional: true
 
-  '@tauri-apps/cli-linux-x64-musl@2.5.0':
+  '@tauri-apps/cli-linux-x64-musl@2.11.0':
     optional: true
 
   '@tauri-apps/cli-win32-arm64-msvc@1.6.3':
     optional: true
 
-  '@tauri-apps/cli-win32-arm64-msvc@2.5.0':
+  '@tauri-apps/cli-win32-arm64-msvc@2.11.0':
     optional: true
 
   '@tauri-apps/cli-win32-ia32-msvc@1.6.3':
     optional: true
 
-  '@tauri-apps/cli-win32-ia32-msvc@2.5.0':
+  '@tauri-apps/cli-win32-ia32-msvc@2.11.0':
     optional: true
 
   '@tauri-apps/cli-win32-x64-msvc@1.6.3':
     optional: true
 
-  '@tauri-apps/cli-win32-x64-msvc@2.5.0':
+  '@tauri-apps/cli-win32-x64-msvc@2.11.0':
     optional: true
 
   '@tauri-apps/cli@1.6.3':
@@ -23570,19 +23799,19 @@ snapshots:
       '@tauri-apps/cli-win32-ia32-msvc': 1.6.3
       '@tauri-apps/cli-win32-x64-msvc': 1.6.3
 
-  '@tauri-apps/cli@2.5.0':
+  '@tauri-apps/cli@2.11.0':
     optionalDependencies:
-      '@tauri-apps/cli-darwin-arm64': 2.5.0
-      '@tauri-apps/cli-darwin-x64': 2.5.0
-      '@tauri-apps/cli-linux-arm-gnueabihf': 2.5.0
-      '@tauri-apps/cli-linux-arm64-gnu': 2.5.0
-      '@tauri-apps/cli-linux-arm64-musl': 2.5.0
-      '@tauri-apps/cli-linux-riscv64-gnu': 2.5.0
-      '@tauri-apps/cli-linux-x64-gnu': 2.5.0
-      '@tauri-apps/cli-linux-x64-musl': 2.5.0
-      '@tauri-apps/cli-win32-arm64-msvc': 2.5.0
-      '@tauri-apps/cli-win32-ia32-msvc': 2.5.0
-      '@tauri-apps/cli-win32-x64-msvc': 2.5.0
+      '@tauri-apps/cli-darwin-arm64': 2.11.0
+      '@tauri-apps/cli-darwin-x64': 2.11.0
+      '@tauri-apps/cli-linux-arm-gnueabihf': 2.11.0
+      '@tauri-apps/cli-linux-arm64-gnu': 2.11.0
+      '@tauri-apps/cli-linux-arm64-musl': 2.11.0
+      '@tauri-apps/cli-linux-riscv64-gnu': 2.11.0
+      '@tauri-apps/cli-linux-x64-gnu': 2.11.0
+      '@tauri-apps/cli-linux-x64-musl': 2.11.0
+      '@tauri-apps/cli-win32-arm64-msvc': 2.11.0
+      '@tauri-apps/cli-win32-ia32-msvc': 2.11.0
+      '@tauri-apps/cli-win32-x64-msvc': 2.11.0
 
   '@tauri-apps/plugin-clipboard-manager@2.3.0':
     dependencies:
@@ -23974,6 +24203,8 @@ snapshots:
 
   '@types/normalize-package-data@2.4.4': {}
 
+  '@types/prismjs@1.26.6': {}
+
   '@types/qs@6.9.18': {}
 
   '@types/range-parser@1.2.7': {}
@@ -24318,8 +24549,8 @@ snapshots:
     dependencies:
       '@mapbox/node-pre-gyp': 1.0.11(encoding@0.1.13)
       '@rollup/pluginutils': 5.1.4(rollup@4.40.2)
-      acorn: 8.15.0
-      acorn-import-attributes: 1.9.5(acorn@8.15.0)
+      acorn: 8.16.0
+      acorn-import-attributes: 1.9.5(acorn@8.16.0)
       async-sema: 3.1.1
       bindings: 1.5.0
       estree-walker: 2.0.2
@@ -24396,7 +24627,7 @@ snapshots:
       untun: 0.1.3
       uqr: 0.1.2
 
-  '@vinxi/plugin-directives@0.5.1(vinxi@0.5.6(@planetscale/database@1.19.0)(@types/node@22.15.17)(db0@0.3.2(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(mysql2@3.15.2))(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(mysql2@3.15.2)(rolldown@1.0.1)(terser@5.44.0)(xml2js@0.6.2)(yaml@2.8.1))':
+  '@vinxi/plugin-directives@0.5.1(vinxi@0.5.6(@planetscale/database@1.19.0)(@types/node@22.15.17)(db0@0.3.2(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(mysql2@3.15.2))(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(lightningcss@1.32.0)(mysql2@3.15.2)(rolldown@1.0.1)(terser@5.44.0)(xml2js@0.6.2)(yaml@2.8.1))':
     dependencies:
       '@babel/parser': 7.27.2
       acorn: 8.14.1
@@ -24407,18 +24638,18 @@ snapshots:
       magicast: 0.2.11
       recast: 0.23.11
       tslib: 2.8.1
-      vinxi: 0.5.6(@planetscale/database@1.19.0)(@types/node@22.15.17)(db0@0.3.2(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(mysql2@3.15.2))(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(mysql2@3.15.2)(rolldown@1.0.1)(terser@5.44.0)(xml2js@0.6.2)(yaml@2.8.1)
+      vinxi: 0.5.6(@planetscale/database@1.19.0)(@types/node@22.15.17)(db0@0.3.2(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(mysql2@3.15.2))(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(lightningcss@1.32.0)(mysql2@3.15.2)(rolldown@1.0.1)(terser@5.44.0)(xml2js@0.6.2)(yaml@2.8.1)
 
-  '@vinxi/server-components@0.5.1(vinxi@0.5.6(@planetscale/database@1.19.0)(@types/node@22.15.17)(db0@0.3.2(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(mysql2@3.15.2))(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(mysql2@3.15.2)(rolldown@1.0.1)(terser@5.44.0)(xml2js@0.6.2)(yaml@2.8.1))':
+  '@vinxi/server-components@0.5.1(vinxi@0.5.6(@planetscale/database@1.19.0)(@types/node@22.15.17)(db0@0.3.2(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(mysql2@3.15.2))(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(lightningcss@1.32.0)(mysql2@3.15.2)(rolldown@1.0.1)(terser@5.44.0)(xml2js@0.6.2)(yaml@2.8.1))':
     dependencies:
-      '@vinxi/plugin-directives': 0.5.1(vinxi@0.5.6(@planetscale/database@1.19.0)(@types/node@22.15.17)(db0@0.3.2(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(mysql2@3.15.2))(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(mysql2@3.15.2)(rolldown@1.0.1)(terser@5.44.0)(xml2js@0.6.2)(yaml@2.8.1))
+      '@vinxi/plugin-directives': 0.5.1(vinxi@0.5.6(@planetscale/database@1.19.0)(@types/node@22.15.17)(db0@0.3.2(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(mysql2@3.15.2))(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(lightningcss@1.32.0)(mysql2@3.15.2)(rolldown@1.0.1)(terser@5.44.0)(xml2js@0.6.2)(yaml@2.8.1))
       acorn: 8.14.1
       acorn-loose: 8.5.0
       acorn-typescript: 1.4.13(acorn@8.14.1)
       astring: 1.9.0
       magicast: 0.2.11
       recast: 0.23.11
-      vinxi: 0.5.6(@planetscale/database@1.19.0)(@types/node@22.15.17)(db0@0.3.2(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(mysql2@3.15.2))(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(mysql2@3.15.2)(rolldown@1.0.1)(terser@5.44.0)(xml2js@0.6.2)(yaml@2.8.1)
+      vinxi: 0.5.6(@planetscale/database@1.19.0)(@types/node@22.15.17)(db0@0.3.2(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(mysql2@3.15.2))(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(lightningcss@1.32.0)(mysql2@3.15.2)(rolldown@1.0.1)(terser@5.44.0)(xml2js@0.6.2)(yaml@2.8.1)
 
   '@virtual-grid/core@2.0.1': {}
 
@@ -24436,14 +24667,14 @@ snapshots:
 
   '@virtual-grid/shared@2.0.1': {}
 
-  '@vitejs/plugin-react@4.4.1(vite@6.3.5(@types/node@20.17.43)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1))':
+  '@vitejs/plugin-react@4.4.1(vite@6.3.5(@types/node@20.17.43)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1))':
     dependencies:
       '@babel/core': 7.27.1
       '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.27.1)
       '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.27.1)
       '@types/babel__core': 7.20.5
       react-refresh: 0.17.0
-      vite: 6.3.5(@types/node@20.17.43)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)
+      vite: 6.3.5(@types/node@20.17.43)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -24462,7 +24693,7 @@ snapshots:
       std-env: 3.9.0
       test-exclude: 7.0.1
       tinyrainbow: 2.0.0
-      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@20.17.43)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@26.1.0)(terser@5.44.0)(yaml@2.8.1)
+      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@20.17.43)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)
     transitivePeerDependencies:
       - supports-color
 
@@ -24488,21 +24719,21 @@ snapshots:
       chai: 5.2.0
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@2.1.9(vite@5.4.19(@types/node@22.15.17)(terser@5.44.0))':
+  '@vitest/mocker@2.1.9(vite@5.4.19(@types/node@22.15.17)(lightningcss@1.32.0)(terser@5.44.0))':
     dependencies:
       '@vitest/spy': 2.1.9
       estree-walker: 3.0.3
       magic-string: 0.30.17
     optionalDependencies:
-      vite: 5.4.19(@types/node@22.15.17)(terser@5.44.0)
+      vite: 5.4.19(@types/node@22.15.17)(lightningcss@1.32.0)(terser@5.44.0)
 
-  '@vitest/mocker@3.2.4(vite@6.3.5(@types/node@20.17.43)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1))':
+  '@vitest/mocker@3.2.4(vite@6.3.5(@types/node@20.17.43)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1))':
     dependencies:
       '@vitest/spy': 3.2.4
       estree-walker: 3.0.3
       magic-string: 0.30.19
     optionalDependencies:
-      vite: 6.3.5(@types/node@20.17.43)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)
+      vite: 6.3.5(@types/node@20.17.43)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)
 
   '@vitest/pretty-format@2.0.5':
     dependencies:
@@ -24560,7 +24791,7 @@ snapshots:
       sirv: 3.0.2
       tinyglobby: 0.2.15
       tinyrainbow: 2.0.0
-      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@20.17.43)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@26.1.0)(terser@5.44.0)(yaml@2.8.1)
+      vitest: 3.2.4(@types/debug@4.1.12)(@types/node@20.17.43)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)
 
   '@vitest/utils@2.0.5':
     dependencies:
@@ -25075,6 +25306,10 @@ snapshots:
     dependencies:
       acorn: 8.15.0
 
+  acorn-import-attributes@1.9.5(acorn@8.16.0):
+    dependencies:
+      acorn: 8.16.0
+
   acorn-import-phases@1.0.4(acorn@8.16.0):
     dependencies:
       acorn: 8.16.0
@@ -25092,6 +25327,10 @@ snapshots:
     dependencies:
       acorn: 8.15.0
 
+  acorn-jsx@5.3.2(acorn@8.16.0):
+    dependencies:
+      acorn: 8.16.0
+
   acorn-loose@8.5.0:
     dependencies:
       acorn: 8.15.0
@@ -25421,6 +25660,16 @@ snapshots:
 
   asynckit@0.4.0: {}
 
+  autoprefixer@10.4.21(postcss@8.5.14):
+    dependencies:
+      browserslist: 4.24.5
+      caniuse-lite: 1.0.30001717
+      fraction.js: 4.3.7
+      normalize-range: 0.1.2
+      picocolors: 1.1.1
+      postcss: 8.5.14
+      postcss-value-parser: 4.2.0
+
   autoprefixer@10.4.21(postcss@8.5.3):
     dependencies:
       browserslist: 4.24.5
@@ -25469,9 +25718,9 @@ snapshots:
   babel-dead-code-elimination@1.0.10:
     dependencies:
       '@babel/core': 7.27.1
-      '@babel/parser': 7.27.5
-      '@babel/traverse': 7.27.4
-      '@babel/types': 7.27.1
+      '@babel/parser': 7.28.4
+      '@babel/traverse': 7.28.4
+      '@babel/types': 7.28.4
     transitivePeerDependencies:
       - supports-color
 
@@ -26388,8 +26637,8 @@ snapshots:
   detective-postcss@6.1.3:
     dependencies:
       is-url: 1.2.4
-      postcss: 8.5.3
-      postcss-values-parser: 6.0.2(postcss@8.5.3)
+      postcss: 8.5.14
+      postcss-values-parser: 6.0.2(postcss@8.5.14)
 
   detective-sass@5.0.3:
     dependencies:
@@ -26615,6 +26864,11 @@ snapshots:
       graceful-fs: 4.2.11
       tapable: 2.3.0
 
+  enhanced-resolve@5.21.3:
+    dependencies:
+      graceful-fs: 4.2.11
+      tapable: 2.3.3
+
   enquirer@2.4.1:
     dependencies:
       ansi-colors: 4.1.3
@@ -26821,7 +27075,7 @@ snapshots:
   esast-util-from-js@2.0.1:
     dependencies:
       '@types/estree-jsx': 1.0.5
-      acorn: 8.15.0
+      acorn: 8.16.0
       esast-util-from-estree: 2.0.0
       vfile-message: 4.0.2
 
@@ -27100,7 +27354,7 @@ snapshots:
       eslint: 9.30.1(jiti@2.6.1)
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.2(eslint@9.30.1(jiti@2.6.1))(typescript@5.8.3))(eslint@9.30.1(jiti@2.6.1)))(eslint@9.30.1(jiti@2.6.1))
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.57.2(eslint@9.30.1(jiti@2.6.1))(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.30.1(jiti@2.6.1))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.57.2(eslint@9.30.1(jiti@2.6.1))(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.2(eslint@9.30.1(jiti@2.6.1))(typescript@5.8.3))(eslint@9.30.1(jiti@2.6.1)))(eslint@9.30.1(jiti@2.6.1)))(eslint@9.30.1(jiti@2.6.1))
       eslint-plugin-jsx-a11y: 6.10.2(eslint@9.30.1(jiti@2.6.1))
       eslint-plugin-react: 7.37.5(eslint@9.30.1(jiti@2.6.1))
       eslint-plugin-react-hooks: 7.0.1(eslint@9.30.1(jiti@2.6.1))
@@ -27157,7 +27411,7 @@ snapshots:
       tinyglobby: 0.2.15
       unrs-resolver: 1.7.2
     optionalDependencies:
-      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.57.2(eslint@9.30.1(jiti@2.6.1))(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.30.1(jiti@2.6.1))
+      eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.57.2(eslint@9.30.1(jiti@2.6.1))(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.2(eslint@9.30.1(jiti@2.6.1))(typescript@5.8.3))(eslint@9.30.1(jiti@2.6.1)))(eslint@9.30.1(jiti@2.6.1)))(eslint@9.30.1(jiti@2.6.1))
     transitivePeerDependencies:
       - supports-color
 
@@ -27212,7 +27466,7 @@ snapshots:
       - eslint-import-resolver-webpack
       - supports-color
 
-  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.2(eslint@9.30.1(jiti@2.6.1))(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1)(eslint@9.30.1(jiti@2.6.1)):
+  eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.2(eslint@9.30.1(jiti@2.6.1))(typescript@5.8.3))(eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.57.2(eslint@9.30.1(jiti@2.6.1))(typescript@5.8.3))(eslint@9.30.1(jiti@2.6.1)))(eslint@9.30.1(jiti@2.6.1)))(eslint@9.30.1(jiti@2.6.1)):
     dependencies:
       '@rtsao/scc': 1.1.0
       array-includes: 3.1.9
@@ -27346,11 +27600,11 @@ snapshots:
       string.prototype.matchall: 4.0.12
       string.prototype.repeat: 1.0.0
 
-  eslint-plugin-tailwindcss@3.18.0(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.15.5(@swc/helpers@0.5.17))(@swc/wasm@1.15.5)(@types/node@20.17.43)(typescript@5.8.3))):
+  eslint-plugin-tailwindcss@3.18.0(tailwindcss@4.3.0):
     dependencies:
       fast-glob: 3.3.3
       postcss: 8.5.3
-      tailwindcss: 3.4.17(ts-node@10.9.2(@swc/core@1.15.5(@swc/helpers@0.5.17))(@swc/wasm@1.15.5)(@types/node@20.17.43)(typescript@5.8.3))
+      tailwindcss: 4.3.0
 
   eslint-plugin-turbo@1.13.4(eslint@8.57.1):
     dependencies:
@@ -29139,6 +29393,55 @@ snapshots:
     dependencies:
       immediate: 3.0.6
 
+  lightningcss-android-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-arm64@1.32.0:
+    optional: true
+
+  lightningcss-darwin-x64@1.32.0:
+    optional: true
+
+  lightningcss-freebsd-x64@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm-gnueabihf@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-arm64-musl@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-gnu@1.32.0:
+    optional: true
+
+  lightningcss-linux-x64-musl@1.32.0:
+    optional: true
+
+  lightningcss-win32-arm64-msvc@1.32.0:
+    optional: true
+
+  lightningcss-win32-x64-msvc@1.32.0:
+    optional: true
+
+  lightningcss@1.32.0:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.32.0
+      lightningcss-darwin-arm64: 1.32.0
+      lightningcss-darwin-x64: 1.32.0
+      lightningcss-freebsd-x64: 1.32.0
+      lightningcss-linux-arm-gnueabihf: 1.32.0
+      lightningcss-linux-arm64-gnu: 1.32.0
+      lightningcss-linux-arm64-musl: 1.32.0
+      lightningcss-linux-x64-gnu: 1.32.0
+      lightningcss-linux-x64-musl: 1.32.0
+      lightningcss-win32-arm64-msvc: 1.32.0
+      lightningcss-win32-x64-msvc: 1.32.0
+
   lilconfig@3.1.3: {}
 
   lines-and-columns@1.2.4: {}
@@ -29689,8 +29992,8 @@ snapshots:
 
   micromark-extension-mdxjs@3.0.0:
     dependencies:
-      acorn: 8.15.0
-      acorn-jsx: 5.3.2(acorn@8.15.0)
+      acorn: 8.16.0
+      acorn-jsx: 5.3.2(acorn@8.16.0)
       micromark-extension-mdx-expression: 3.0.1
       micromark-extension-mdx-jsx: 3.0.2
       micromark-extension-mdx-md: 2.0.0
@@ -30149,10 +30452,10 @@ snapshots:
     optionalDependencies:
       nodemailer: 6.10.1
 
-  next-mdx-remote@6.0.0(@types/react@19.2.14)(acorn@8.15.0)(react@19.2.4):
+  next-mdx-remote@6.0.0(@types/react@19.2.14)(acorn@8.16.0)(react@19.2.4):
     dependencies:
       '@babel/code-frame': 7.27.1
-      '@mdx-js/mdx': 3.1.0(acorn@8.15.0)
+      '@mdx-js/mdx': 3.1.0(acorn@8.16.0)
       '@mdx-js/react': 3.1.0(@types/react@19.2.14)(react@19.2.4)
       react: 19.2.4
       unist-util-remove: 4.0.0
@@ -30956,20 +31259,12 @@ snapshots:
       postcss: 8.5.3
       ts-node: 10.9.2(@swc/core@1.15.5(@swc/helpers@0.5.17))(@swc/wasm@1.15.5)(@types/node@20.17.43)(typescript@5.8.3)
 
-  postcss-load-config@4.0.2(postcss@8.5.3)(ts-node@10.9.2(@swc/core@1.15.5(@swc/helpers@0.5.17))(@swc/wasm@1.15.5)(@types/node@22.15.17)(typescript@5.8.3)):
-    dependencies:
-      lilconfig: 3.1.3
-      yaml: 2.7.1
-    optionalDependencies:
-      postcss: 8.5.3
-      ts-node: 10.9.2(@swc/core@1.15.5(@swc/helpers@0.5.17))(@swc/wasm@1.15.5)(@types/node@22.15.17)(typescript@5.8.3)
-
-  postcss-load-config@6.0.1(jiti@2.6.1)(postcss@8.5.3)(yaml@2.8.1):
+  postcss-load-config@6.0.1(jiti@2.6.1)(postcss@8.5.14)(yaml@2.8.1):
     dependencies:
       lilconfig: 3.1.3
     optionalDependencies:
       jiti: 2.6.1
-      postcss: 8.5.3
+      postcss: 8.5.14
       yaml: 2.8.1
 
   postcss-nested@6.2.0(postcss@8.5.3):
@@ -30977,9 +31272,9 @@ snapshots:
       postcss: 8.5.3
       postcss-selector-parser: 6.1.2
 
-  postcss-pseudo-companion-classes@0.1.1(postcss@8.5.3):
+  postcss-pseudo-companion-classes@0.1.1(postcss@8.5.14):
     dependencies:
-      postcss: 8.5.3
+      postcss: 8.5.14
 
   postcss-selector-parser@6.0.10:
     dependencies:
@@ -30993,11 +31288,11 @@ snapshots:
 
   postcss-value-parser@4.2.0: {}
 
-  postcss-values-parser@6.0.2(postcss@8.5.3):
+  postcss-values-parser@6.0.2(postcss@8.5.14):
     dependencies:
       color-name: 1.1.4
       is-url-superb: 4.0.0
-      postcss: 8.5.3
+      postcss: 8.5.14
       quote-unquote: 1.0.0
 
   postcss@8.4.31:
@@ -31006,6 +31301,12 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  postcss@8.5.14:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
   postcss@8.5.3:
     dependencies:
       nanoid: 3.3.11
@@ -31069,6 +31370,12 @@ snapshots:
 
   printable-characters@1.0.42: {}
 
+  prism-react-renderer@2.4.1(react@19.2.4):
+    dependencies:
+      '@types/prismjs': 1.26.6
+      clsx: 2.1.1
+      react: 19.2.4
+
   prismjs@1.30.0: {}
 
   proc-log@4.2.0: {}
@@ -31519,9 +31826,9 @@ snapshots:
       estree-util-build-jsx: 3.0.1
       vfile: 6.0.3
 
-  recma-jsx@1.0.0(acorn@8.15.0):
+  recma-jsx@1.0.0(acorn@8.16.0):
     dependencies:
-      acorn-jsx: 5.3.2(acorn@8.15.0)
+      acorn-jsx: 5.3.2(acorn@8.16.0)
       estree-util-to-js: 2.0.0
       recma-parse: 1.0.0
       recma-stringify: 1.0.0
@@ -32450,16 +32757,16 @@ snapshots:
 
   stoppable@1.1.0: {}
 
-  storybook-solidjs-vite@1.0.0-beta.7(@storybook/test@8.6.12(storybook@8.6.12(prettier@3.7.4)))(esbuild@0.25.5)(rollup@4.40.2)(solid-js@1.9.6)(storybook@8.6.12(prettier@3.7.4))(vite-plugin-solid@2.11.6(@testing-library/jest-dom@6.5.0)(solid-js@1.9.6)(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)))(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1))(webpack@5.101.3(esbuild@0.25.5)):
+  storybook-solidjs-vite@1.0.0-beta.7(@storybook/test@8.6.12(storybook@8.6.12(prettier@3.7.4)))(esbuild@0.25.5)(rollup@4.40.2)(solid-js@1.9.6)(storybook@8.6.12(prettier@3.7.4))(vite-plugin-solid@2.11.6(@testing-library/jest-dom@6.5.0)(solid-js@1.9.6)(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)))(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1))(webpack@5.101.3(esbuild@0.25.5)):
     dependencies:
-      '@storybook/builder-vite': 10.5.0-alpha.0(esbuild@0.25.5)(rollup@4.40.2)(storybook@8.6.12(prettier@3.7.4))(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1))(webpack@5.101.3(esbuild@0.25.5))
+      '@storybook/builder-vite': 10.5.0-alpha.0(esbuild@0.25.5)(rollup@4.40.2)(storybook@8.6.12(prettier@3.7.4))(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1))(webpack@5.101.3(esbuild@0.25.5))
       '@storybook/types': 9.0.0-alpha.1(storybook@8.6.12(prettier@3.7.4))
       magic-string: 0.30.17
       solid-js: 1.9.6
       storybook: 8.6.12(prettier@3.7.4)
       storybook-solidjs: 1.0.0-beta.7(@storybook/test@8.6.12(storybook@8.6.12(prettier@3.7.4)))(solid-js@1.9.6)(storybook@8.6.12(prettier@3.7.4))
-      vite: 6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)
-      vite-plugin-solid: 2.11.6(@testing-library/jest-dom@6.5.0)(solid-js@1.9.6)(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1))
+      vite: 6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)
+      vite-plugin-solid: 2.11.6(@testing-library/jest-dom@6.5.0)(solid-js@1.9.6)(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1))
     transitivePeerDependencies:
       - '@storybook/test'
       - esbuild
@@ -32701,9 +33008,12 @@ snapshots:
     dependencies:
       tailwindcss: 3.4.17(ts-node@10.9.2(@swc/core@1.15.5(@swc/helpers@0.5.17))(@swc/wasm@1.15.5)(@types/node@20.17.43)(typescript@5.8.3))
 
-  tailwind-scrollbar@3.1.0(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.15.5(@swc/helpers@0.5.17))(@swc/wasm@1.15.5)(@types/node@22.15.17)(typescript@5.8.3))):
+  tailwind-scrollbar@4.0.2(react@19.2.4)(tailwindcss@4.3.0):
     dependencies:
-      tailwindcss: 3.4.17(ts-node@10.9.2(@swc/core@1.15.5(@swc/helpers@0.5.17))(@swc/wasm@1.15.5)(@types/node@22.15.17)(typescript@5.8.3))
+      prism-react-renderer: 2.4.1(react@19.2.4)
+      tailwindcss: 4.3.0
+    transitivePeerDependencies:
+      - react
 
   tailwindcss-animate@1.0.7(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.15.3(@swc/helpers@0.5.17))(@swc/wasm@1.15.5)(@types/node@20.17.43)(typescript@5.8.3))):
     dependencies:
@@ -32713,10 +33023,6 @@ snapshots:
     dependencies:
       tailwindcss: 3.4.17(ts-node@10.9.2(@swc/core@1.15.5(@swc/helpers@0.5.17))(@swc/wasm@1.15.5)(@types/node@20.17.43)(typescript@5.8.3))
 
-  tailwindcss-animate@1.0.7(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.15.5(@swc/helpers@0.5.17))(@swc/wasm@1.15.5)(@types/node@22.15.17)(typescript@5.8.3))):
-    dependencies:
-      tailwindcss: 3.4.17(ts-node@10.9.2(@swc/core@1.15.5(@swc/helpers@0.5.17))(@swc/wasm@1.15.5)(@types/node@22.15.17)(typescript@5.8.3))
-
   tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.15.3(@swc/helpers@0.5.17))(@swc/wasm@1.15.5)(@types/node@20.17.43)(typescript@5.8.3)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
@@ -32771,35 +33077,12 @@ snapshots:
     transitivePeerDependencies:
       - ts-node
 
-  tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.15.5(@swc/helpers@0.5.17))(@swc/wasm@1.15.5)(@types/node@22.15.17)(typescript@5.8.3)):
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.6.0
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.3
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.21.7
-      lilconfig: 3.1.3
-      micromatch: 4.0.8
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.1.1
-      postcss: 8.5.3
-      postcss-import: 15.1.0(postcss@8.5.3)
-      postcss-js: 4.0.1(postcss@8.5.3)
-      postcss-load-config: 4.0.2(postcss@8.5.3)(ts-node@10.9.2(@swc/core@1.15.5(@swc/helpers@0.5.17))(@swc/wasm@1.15.5)(@types/node@22.15.17)(typescript@5.8.3))
-      postcss-nested: 6.2.0(postcss@8.5.3)
-      postcss-selector-parser: 6.1.2
-      resolve: 1.22.10
-      sucrase: 3.35.0
-    transitivePeerDependencies:
-      - ts-node
+  tailwindcss@4.3.0: {}
 
   tapable@2.3.0: {}
 
+  tapable@2.3.3: {}
+
   tar-stream@2.2.0:
     dependencies:
       bl: 4.1.0
@@ -33117,7 +33400,7 @@ snapshots:
 
   tslib@2.8.1: {}
 
-  tsup@8.5.0(@swc/core@1.15.5(@swc/helpers@0.5.17))(jiti@2.6.1)(postcss@8.5.3)(typescript@5.8.3)(yaml@2.8.1):
+  tsup@8.5.0(@swc/core@1.15.5(@swc/helpers@0.5.17))(jiti@2.6.1)(postcss@8.5.14)(typescript@5.8.3)(yaml@2.8.1):
     dependencies:
       bundle-require: 5.1.0(esbuild@0.25.12)
       cac: 6.7.14
@@ -33128,7 +33411,7 @@ snapshots:
       fix-dts-default-cjs-exports: 1.0.1
       joycon: 3.1.1
       picocolors: 1.1.1
-      postcss-load-config: 6.0.1(jiti@2.6.1)(postcss@8.5.3)(yaml@2.8.1)
+      postcss-load-config: 6.0.1(jiti@2.6.1)(postcss@8.5.14)(yaml@2.8.1)
       resolve-from: 5.0.0
       rollup: 4.40.2
       source-map: 0.8.0-beta.0
@@ -33138,7 +33421,7 @@ snapshots:
       tree-kill: 1.2.2
     optionalDependencies:
       '@swc/core': 1.15.5(@swc/helpers@0.5.17)
-      postcss: 8.5.3
+      postcss: 8.5.14
       typescript: 5.8.3
     transitivePeerDependencies:
       - jiti
@@ -33190,6 +33473,8 @@ snapshots:
       turbo-windows-64: 2.5.3
       turbo-windows-arm64: 2.5.3
 
+  tw-animate-css@1.4.0: {}
+
   tween-functions@1.2.0: {}
 
   tweetnacl@1.0.3: {}
@@ -33505,11 +33790,11 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
-  unplugin-fonts@1.3.1(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)):
+  unplugin-fonts@1.3.1(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)):
     dependencies:
       fast-glob: 3.3.3
       unplugin: 2.0.0-beta.1
-      vite: 6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)
+      vite: 6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)
 
   unplugin-icons@0.19.3:
     dependencies:
@@ -33541,7 +33826,7 @@ snapshots:
   unplugin@2.3.10:
     dependencies:
       '@jridgewell/remapping': 2.3.5
-      acorn: 8.15.0
+      acorn: 8.16.0
       picomatch: 4.0.3
       webpack-virtual-modules: 0.6.2
 
@@ -33766,7 +34051,7 @@ snapshots:
       d3-time: 3.1.0
       d3-timer: 3.0.1
 
-  vinxi@0.5.6(@planetscale/database@1.19.0)(@types/node@22.15.17)(db0@0.3.2(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(mysql2@3.15.2))(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(mysql2@3.15.2)(rolldown@1.0.1)(terser@5.44.0)(xml2js@0.6.2)(yaml@2.8.1):
+  vinxi@0.5.6(@planetscale/database@1.19.0)(@types/node@22.15.17)(db0@0.3.2(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(mysql2@3.15.2))(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(lightningcss@1.32.0)(mysql2@3.15.2)(rolldown@1.0.1)(terser@5.44.0)(xml2js@0.6.2)(yaml@2.8.1):
     dependencies:
       '@babel/core': 7.27.1
       '@babel/plugin-syntax-jsx': 7.27.1(@babel/core@7.27.1)
@@ -33800,7 +34085,7 @@ snapshots:
       unctx: 2.4.1
       unenv: 1.10.0
       unstorage: 1.16.0(@planetscale/database@1.19.0)(db0@0.3.2(drizzle-orm@0.44.6(@cloudflare/workers-types@4.20250507.0)(@opentelemetry/api@1.9.0)(@planetscale/database@1.19.0)(bun-types@1.3.14)(mysql2@3.15.2))(mysql2@3.15.2))(ioredis@5.6.1)
-      vite: 6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)
+      vite: 6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)
       zod: 3.25.76
     transitivePeerDependencies:
       - '@azure/app-configuration'
@@ -33844,13 +34129,13 @@ snapshots:
       - xml2js
       - yaml
 
-  vite-node@2.1.9(@types/node@22.15.17)(terser@5.44.0):
+  vite-node@2.1.9(@types/node@22.15.17)(lightningcss@1.32.0)(terser@5.44.0):
     dependencies:
       cac: 6.7.14
       debug: 4.4.1
       es-module-lexer: 1.7.0
       pathe: 1.1.2
-      vite: 5.4.19(@types/node@22.15.17)(terser@5.44.0)
+      vite: 5.4.19(@types/node@22.15.17)(lightningcss@1.32.0)(terser@5.44.0)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -33862,13 +34147,13 @@ snapshots:
       - supports-color
       - terser
 
-  vite-node@3.2.4(@types/node@20.17.43)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1):
+  vite-node@3.2.4(@types/node@20.17.43)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1):
     dependencies:
       cac: 6.7.14
       debug: 4.4.3(supports-color@8.1.1)
       es-module-lexer: 1.7.0
       pathe: 2.0.3
-      vite: 6.3.5(@types/node@20.17.43)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)
+      vite: 6.3.5(@types/node@20.17.43)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -33883,7 +34168,7 @@ snapshots:
       - tsx
       - yaml
 
-  vite-plugin-solid@2.11.6(@testing-library/jest-dom@6.5.0)(solid-js@1.9.6)(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)):
+  vite-plugin-solid@2.11.6(@testing-library/jest-dom@6.5.0)(solid-js@1.9.6)(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)):
     dependencies:
       '@babel/core': 7.27.1
       '@types/babel__core': 7.20.5
@@ -33891,73 +34176,75 @@ snapshots:
       merge-anything: 5.1.7
       solid-js: 1.9.6
       solid-refresh: 0.6.3(solid-js@1.9.6)
-      vite: 6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)
-      vitefu: 1.0.6(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1))
+      vite: 6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)
+      vitefu: 1.0.6(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1))
     optionalDependencies:
       '@testing-library/jest-dom': 6.5.0
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-top-level-await@1.6.0(@swc/helpers@0.5.17)(rollup@4.40.2)(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)):
+  vite-plugin-top-level-await@1.6.0(@swc/helpers@0.5.17)(rollup@4.40.2)(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)):
     dependencies:
       '@rollup/plugin-virtual': 3.0.2(rollup@4.40.2)
       '@swc/core': 1.15.5(@swc/helpers@0.5.17)
       '@swc/wasm': 1.15.5
       uuid: 10.0.0
-      vite: 6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)
+      vite: 6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)
     transitivePeerDependencies:
       - '@swc/helpers'
       - rollup
 
-  vite-plugin-wasm@3.5.0(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)):
+  vite-plugin-wasm@3.5.0(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)):
     dependencies:
-      vite: 6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)
+      vite: 6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)
 
-  vite-tsconfig-paths@4.3.2(typescript@5.8.3)(vite@6.3.5(@types/node@20.17.43)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)):
+  vite-tsconfig-paths@4.3.2(typescript@5.8.3)(vite@6.3.5(@types/node@20.17.43)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)):
     dependencies:
       debug: 4.4.0
       globrex: 0.1.2
       tsconfck: 3.1.5(typescript@5.8.3)
     optionalDependencies:
-      vite: 6.3.5(@types/node@20.17.43)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)
+      vite: 6.3.5(@types/node@20.17.43)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  vite-tsconfig-paths@5.1.4(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)):
+  vite-tsconfig-paths@5.1.4(typescript@5.8.3)(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)):
     dependencies:
       debug: 4.4.0
       globrex: 0.1.2
       tsconfck: 3.1.5(typescript@5.8.3)
     optionalDependencies:
-      vite: 6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)
+      vite: 6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)
     transitivePeerDependencies:
       - supports-color
       - typescript
 
-  vite@5.4.19(@types/node@22.15.17)(terser@5.44.0):
+  vite@5.4.19(@types/node@22.15.17)(lightningcss@1.32.0)(terser@5.44.0):
     dependencies:
       esbuild: 0.21.5
-      postcss: 8.5.3
+      postcss: 8.5.14
       rollup: 4.40.2
     optionalDependencies:
       '@types/node': 22.15.17
       fsevents: 2.3.3
+      lightningcss: 1.32.0
       terser: 5.44.0
 
-  vite@6.1.4(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1):
+  vite@6.1.4(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1):
     dependencies:
       esbuild: 0.24.2
-      postcss: 8.5.3
+      postcss: 8.5.14
       rollup: 4.40.2
     optionalDependencies:
       '@types/node': 22.15.17
       fsevents: 2.3.3
       jiti: 2.6.1
+      lightningcss: 1.32.0
       terser: 5.44.0
       yaml: 2.8.1
 
-  vite@6.3.5(@types/node@20.17.43)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1):
+  vite@6.3.5(@types/node@20.17.43)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1):
     dependencies:
       esbuild: 0.25.4
       fdir: 6.4.4(picomatch@4.0.2)
@@ -33969,10 +34256,11 @@ snapshots:
       '@types/node': 20.17.43
       fsevents: 2.3.3
       jiti: 2.6.1
+      lightningcss: 1.32.0
       terser: 5.44.0
       yaml: 2.8.1
 
-  vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1):
+  vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1):
     dependencies:
       esbuild: 0.25.4
       fdir: 6.4.4(picomatch@4.0.2)
@@ -33984,17 +34272,18 @@ snapshots:
       '@types/node': 22.15.17
       fsevents: 2.3.3
       jiti: 2.6.1
+      lightningcss: 1.32.0
       terser: 5.44.0
       yaml: 2.8.1
 
-  vitefu@1.0.6(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)):
+  vitefu@1.0.6(vite@6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)):
     optionalDependencies:
-      vite: 6.3.5(@types/node@22.15.17)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)
+      vite: 6.3.5(@types/node@22.15.17)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)
 
-  vitest@2.1.9(@types/node@22.15.17)(jsdom@26.1.0)(terser@5.44.0):
+  vitest@2.1.9(@types/node@22.15.17)(jsdom@26.1.0)(lightningcss@1.32.0)(terser@5.44.0):
     dependencies:
       '@vitest/expect': 2.1.9
-      '@vitest/mocker': 2.1.9(vite@5.4.19(@types/node@22.15.17)(terser@5.44.0))
+      '@vitest/mocker': 2.1.9(vite@5.4.19(@types/node@22.15.17)(lightningcss@1.32.0)(terser@5.44.0))
       '@vitest/pretty-format': 2.1.9
       '@vitest/runner': 2.1.9
       '@vitest/snapshot': 2.1.9
@@ -34010,8 +34299,8 @@ snapshots:
       tinyexec: 0.3.2
       tinypool: 1.0.2
       tinyrainbow: 1.2.0
-      vite: 5.4.19(@types/node@22.15.17)(terser@5.44.0)
-      vite-node: 2.1.9(@types/node@22.15.17)(terser@5.44.0)
+      vite: 5.4.19(@types/node@22.15.17)(lightningcss@1.32.0)(terser@5.44.0)
+      vite-node: 2.1.9(@types/node@22.15.17)(lightningcss@1.32.0)(terser@5.44.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 22.15.17
@@ -34027,11 +34316,11 @@ snapshots:
       - supports-color
       - terser
 
-  vitest@3.2.4(@types/debug@4.1.12)(@types/node@20.17.43)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@26.1.0)(terser@5.44.0)(yaml@2.8.1):
+  vitest@3.2.4(@types/debug@4.1.12)(@types/node@20.17.43)(@vitest/ui@3.2.4)(jiti@2.6.1)(jsdom@26.1.0)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1):
     dependencies:
       '@types/chai': 5.2.3
       '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(vite@6.3.5(@types/node@20.17.43)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1))
+      '@vitest/mocker': 3.2.4(vite@6.3.5(@types/node@20.17.43)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1))
       '@vitest/pretty-format': 3.2.4
       '@vitest/runner': 3.2.4
       '@vitest/snapshot': 3.2.4
@@ -34049,8 +34338,8 @@ snapshots:
       tinyglobby: 0.2.15
       tinypool: 1.1.1
       tinyrainbow: 2.0.0
-      vite: 6.3.5(@types/node@20.17.43)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)
-      vite-node: 3.2.4(@types/node@20.17.43)(jiti@2.6.1)(terser@5.44.0)(yaml@2.8.1)
+      vite: 6.3.5(@types/node@20.17.43)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)
+      vite-node: 3.2.4(@types/node@20.17.43)(jiti@2.6.1)(lightningcss@1.32.0)(terser@5.44.0)(yaml@2.8.1)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/debug': 4.1.12
@@ -34128,7 +34417,7 @@ snapshots:
       acorn-import-phases: 1.0.4(acorn@8.16.0)
       browserslist: 4.26.3
       chrome-trace-event: 1.0.4
-      enhanced-resolve: 5.19.0
+      enhanced-resolve: 5.21.3
       es-module-lexer: 1.7.0
       eslint-scope: 5.1.1
       events: 3.3.0
@@ -34139,7 +34428,7 @@ snapshots:
       mime-types: 2.1.35
       neo-async: 2.6.2
       schema-utils: 4.3.3
-      tapable: 2.3.0
+      tapable: 2.3.3
       terser-webpack-plugin: 5.3.14(esbuild@0.25.5)(webpack@5.101.3(esbuild@0.25.5))
       watchpack: 2.5.1
       webpack-sources: 3.3.3