From 21f023dd487ebfb6c730d228b0004885ae3ba7aa Mon Sep 17 00:00:00 2001
From: Ilya <47112191+ItsEeleeya@users.noreply.github.com>
Date: Fri, 3 Apr 2026 02:55:31 +0330
Subject: [PATCH 1/7] Auto migrate with `@tailwindcss/upgrade`

---
 .../src/components/CapErrorBoundary.tsx       |   4 +-
 apps/desktop/src/components/Cropper.tsx       |  16 +--
 apps/desktop/src/components/Loader.tsx        |   2 +-
 apps/desktop/src/components/SignInButton.tsx  |   2 +-
 apps/desktop/src/components/Toggle.tsx        |  12 +-
 .../src/components/titlebar/Titlebar.tsx      |   6 +-
 .../controls/CaptionControlsWindows11.tsx     |   2 +-
 apps/desktop/src/entry-server.tsx             |   2 +-
 apps/desktop/src/routes/(window-chrome).tsx   |   4 +-
 .../(window-chrome)/new-main/CameraSelect.tsx |   4 +-
 .../new-main/DeviceSelectOverlay.tsx          |   2 +-
 .../new-main/MicrophoneSelect.tsx             |   4 +-
 .../new-main/ModeInfoPanel.tsx                |   4 +-
 .../(window-chrome)/new-main/TargetCard.tsx   |  34 ++---
 .../new-main/TargetDropdownButton.tsx         |   2 +-
 .../new-main/TargetTypeButton.tsx             |   2 +-
 .../routes/(window-chrome)/new-main/index.tsx |  28 ++--
 .../src/routes/(window-chrome)/onboarding.tsx | 124 +++++++++---------
 .../src/routes/(window-chrome)/settings.tsx   |   8 +-
 .../(window-chrome)/settings/changelog.tsx    |  12 +-
 .../(window-chrome)/settings/feedback.tsx     |   6 +-
 .../(window-chrome)/settings/general.tsx      |  14 +-
 .../(window-chrome)/settings/hotkeys.tsx      |   4 +-
 .../settings/integrations/s3-config.tsx       |   6 +-
 .../(window-chrome)/settings/license.tsx      |  10 +-
 .../(window-chrome)/settings/recordings.tsx   |  12 +-
 .../(window-chrome)/settings/screenshots.tsx  |  12 +-
 .../settings/transcription.tsx                |   4 +-
 .../src/routes/(window-chrome)/update.tsx     |  16 +--
 .../src/routes/(window-chrome)/upgrade.tsx    |  18 +--
 apps/desktop/src/routes/camera.tsx            |   6 +-
 apps/desktop/src/routes/capture-area.tsx      |  10 +-
 apps/desktop/src/routes/debug.tsx             |  14 +-
 .../src/routes/editor/AspectRatioSelect.tsx   |   2 +-
 .../desktop/src/routes/editor/CaptionsTab.tsx |   4 +-
 .../src/routes/editor/ConfigSidebar.tsx       |  78 +++++------
 apps/desktop/src/routes/editor/Editor.tsx     |  26 ++--
 .../src/routes/editor/EditorErrorScreen.tsx   |   2 +-
 apps/desktop/src/routes/editor/ExportPage.tsx |  24 ++--
 apps/desktop/src/routes/editor/Header.tsx     |   4 +-
 .../desktop/src/routes/editor/KeyboardTab.tsx |   4 +-
 .../desktop/src/routes/editor/MaskOverlay.tsx |   2 +-
 .../src/routes/editor/PerformanceOverlay.tsx  |   2 +-
 .../src/routes/editor/PresetsDropdown.tsx     |   2 +-
 .../desktop/src/routes/editor/ShareButton.tsx |   8 +-
 .../desktop/src/routes/editor/TextOverlay.tsx |   2 +-
 .../routes/editor/Timeline/CaptionsTrack.tsx  |   4 +-
 .../src/routes/editor/Timeline/ClipTrack.tsx  |  12 +-
 .../routes/editor/Timeline/KeyboardTrack.tsx  |   6 +-
 .../src/routes/editor/Timeline/MaskTrack.tsx  |  10 +-
 .../src/routes/editor/Timeline/SceneTrack.tsx |   8 +-
 .../src/routes/editor/Timeline/TextTrack.tsx  |   8 +-
 .../src/routes/editor/Timeline/Track.tsx      |   4 +-
 .../routes/editor/Timeline/TrackManager.tsx   |   2 +-
 .../src/routes/editor/Timeline/ZoomTrack.tsx  |   8 +-
 .../src/routes/editor/Timeline/index.tsx      |   8 +-
 .../src/routes/editor/TranscriptPage.tsx      |   8 +-
 .../desktop/src/routes/editor/color-utils.tsx |   8 +-
 apps/desktop/src/routes/editor/context.ts     |   2 +-
 .../src/routes/editor/editor-skeleton.tsx     |  42 +++---
 apps/desktop/src/routes/editor/text-style.tsx |   8 +-
 apps/desktop/src/routes/editor/ui.tsx         |  30 ++---
 .../src/routes/in-progress-recording.tsx      |  18 +--
 .../desktop/src/routes/recordings-overlay.tsx |  22 ++--
 .../screenshot-editor/AnnotationConfig.tsx    |  10 +-
 .../screenshot-editor/AnnotationLayer.tsx     |   2 +-
 .../screenshot-editor/AnnotationTools.tsx     |   4 +-
 .../routes/screenshot-editor/ColorPicker.tsx  |   8 +-
 .../src/routes/screenshot-editor/Editor.tsx   |  30 ++---
 .../routes/screenshot-editor/LayersPanel.tsx  |   8 +-
 .../src/routes/screenshot-editor/Preview.tsx  |   6 +-
 .../src/routes/screenshot-editor/context.tsx  |   2 +-
 .../popovers/AspectRatioSelect.tsx            |   2 +-
 .../popovers/BackgroundSettingsPopover.tsx    |  14 +-
 .../popovers/RoundingPopover.tsx              |   8 +-
 .../popovers/ShadowPopover.tsx                |   8 +-
 .../screenshot-editor-skeleton.tsx            |   4 +-
 .../src/routes/screenshot-editor/ui.tsx       |  30 ++---
 .../screenshot-editor/useScreenshotExport.ts  |   2 +-
 .../src/routes/target-select-overlay.tsx      |  12 +-
 apps/desktop/src/utils/tauri.ts               |   4 +-
 packages/ui-solid/package.json                |   2 +-
 packages/ui-solid/src/Button.tsx              |  12 +-
 packages/ui-solid/src/SwitchTab.tsx           |   6 +-
 packages/ui-solid/src/main.css                |  24 +++-
 packages/ui-solid/tailwind.config.js          |   6 +-
 packages/ui/src/components/Button.tsx         |   4 +-
 packages/ui/src/components/Card.tsx           |   2 +-
 packages/ui/src/components/Cmdk.tsx           |   8 +-
 packages/ui/src/components/Dialog.tsx         |   6 +-
 packages/ui/src/components/Dropdown.tsx       |  12 +-
 packages/ui/src/components/NavigationMenu.tsx |  10 +-
 packages/ui/src/components/Popover.tsx        |   2 +-
 packages/ui/src/components/Select.tsx         |  14 +-
 packages/ui/src/components/SkeletonRows.tsx   |   4 +-
 packages/ui/src/components/Switch.tsx         |   4 +-
 packages/ui/src/components/Table.tsx          |   6 +-
 packages/ui/src/components/input/Input.tsx    |   2 +-
 98 files changed, 535 insertions(+), 517 deletions(-)

diff --git a/apps/desktop/src/components/CapErrorBoundary.tsx b/apps/desktop/src/components/CapErrorBoundary.tsx
index 5bf7fc132e..2dca68d1d4 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 6509ce71cf..2a22e1b5f9 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 f88661a0e0..b8da544d80 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 08fc3f12a9..2c9f0b834e 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 c16036fd33..36937a4afe 100644
--- a/apps/desktop/src/components/Toggle.tsx
+++ b/apps/desktop/src/components/Toggle.tsx
@@ -7,9 +7,9 @@ const toggleControlStyles = cva(
 	{
 		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: {
@@ -23,9 +23,9 @@ const toggleThumbStyles = cva(
 	{
 		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 4e89ac0883..a6522d3c01 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 667e92b903..680e1b62cc 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 5617725739..7533dd90e7 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 7ab785b379..50d4896511 100644
--- a/apps/desktop/src/routes/(window-chrome).tsx
+++ b/apps/desktop/src/routes/(window-chrome).tsx
@@ -106,10 +106,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 559002ea78..fa9f778218 100644
--- a/apps/desktop/src/routes/(window-chrome)/new-main/CameraSelect.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/new-main/CameraSelect.tsx
@@ -84,7 +84,7 @@ export default function CameraSelect(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}
@@ -213,7 +213,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 cd842f71ed..174a37fb2a 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 4f8ac47066..502bdcbbd3 100644
--- a/apps/desktop/src/routes/(window-chrome)/new-main/MicrophoneSelect.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/new-main/MicrophoneSelect.tsx
@@ -54,7 +54,7 @@ export default function MicrophoneSelect(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}
@@ -145,7 +145,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 67da1aeab5..34c4f7ee34 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 aa662ec9ac..34798d53d3 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 5865e5c860..4c6c7b2619 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 eea046c313..c295d46de8 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 a140812d75..aefb782ef7 100644
--- a/apps/desktop/src/routes/(window-chrome)/new-main/index.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/new-main/index.tsx
@@ -239,7 +239,7 @@ function CameraListItem(props: {
 			disabled={props.disabled}
 			onClick={props.onSelect}
 			class={cx(
-				"flex flex-col gap-0.5 px-3 py-2.5 rounded-lg text-sm text-left outline-none",
+				"flex flex-col gap-0.5 px-3 py-2.5 rounded-lg text-sm text-left outline-hidden",
 				props.isSelected
 					? "bg-blue-500 text-white"
 					: props.isFocused
@@ -298,7 +298,7 @@ function MicrophoneListItem(props: {
 			disabled={props.disabled}
 			onClick={props.onSelect}
 			class={cx(
-				"relative overflow-hidden flex flex-col gap-0.5 px-3 py-2.5 rounded-lg text-sm text-left outline-none",
+				"relative overflow-hidden flex flex-col gap-0.5 px-3 py-2.5 rounded-lg text-sm text-left outline-hidden",
 				props.isSelected
 					? "bg-blue-500 text-white"
 					: props.isFocused
@@ -481,7 +481,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}
 		>
@@ -508,7 +508,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
@@ -777,7 +777,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>
@@ -967,7 +967,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>
@@ -1715,7 +1715,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
@@ -1732,7 +1732,7 @@ function Page() {
 									await commands.showWindow({ Settings: { page: "general" } });
 									getCurrentWindow().hide();
 								}}
-								class="flex items-center justify-center size-5 -ml-[1.5px] focus:outline-none"
+								class="flex items-center justify-center size-5 -ml-[1.5px] focus:outline-hidden"
 							>
 								<IconCapSettings class="transition-colors text-gray-11 size-4 hover:text-gray-12" />
 							</button>
@@ -1751,7 +1751,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>
@@ -1770,7 +1770,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>
@@ -1782,7 +1782,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>
@@ -1794,7 +1794,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
@@ -1816,7 +1816,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",
 									)}
 								>
@@ -2013,7 +2013,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 0f761e6de2..81e98219e4 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]"
@@ -611,7 +611,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}
@@ -704,7 +704,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,
@@ -797,7 +797,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>
@@ -1000,7 +1000,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,
@@ -1061,7 +1061,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",
 				)}
 			>
@@ -1224,7 +1224,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]",
 					)}
 				>
@@ -1284,28 +1284,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>
@@ -1342,7 +1342,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"
@@ -1395,20 +1395,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)]">
@@ -1515,7 +1515,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]",
@@ -1524,20 +1524,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)]">
@@ -1552,7 +1552,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",
@@ -1600,7 +1600,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>
@@ -1617,13 +1617,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>
@@ -1782,7 +1782,7 @@ function StartupOverlay(props: {
 
 		const tryPlay = () => {
 			if (!audioEl || audioEl.muted) return;
-			void audioEl.play().catch(() => {});
+			void audioEl.play().catch(() => { });
 		};
 
 		tryPlay();
@@ -1804,7 +1804,7 @@ function StartupOverlay(props: {
 		setAudioState("isMuted", next);
 		if (audioEl) {
 			audioEl.muted = next;
-			if (!next) void audioEl.play().catch(() => {});
+			if (!next) void audioEl.play().catch(() => { });
 		}
 	};
 
@@ -1830,14 +1830,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",
 				}}
@@ -1861,12 +1861,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=""
 				/>
@@ -1874,19 +1874,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",
 				)}
 			>
@@ -1901,7 +1901,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)" }}
@@ -1932,7 +1932,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>
@@ -2029,7 +2029,7 @@ function PermissionsStep(props: {
 			}
 		} catch (err) {
 			console.error(`Error requesting permission: ${err}`);
-			fetchPermissions().catch(() => {});
+			fetchPermissions().catch(() => { });
 		} finally {
 			setRequestingPermission(false);
 		}
@@ -2088,7 +2088,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,
@@ -2127,13 +2127,13 @@ function PermissionsStep(props: {
 											disabled={requestingPermission()}
 											onClick={() =>
 												permission.requiresManualGrant ||
-												permStatus() === "denied"
+													permStatus() === "denied"
 													? openSettings(permission.key)
 													: requestPermission(permission.key)
 											}
 										>
 											{permission.requiresManualGrant ||
-											permStatus() === "denied"
+												permStatus() === "denied"
 												? "Open Settings"
 												: "Grant"}
 										</Button>
@@ -2300,13 +2300,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">
@@ -2321,9 +2321,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%)",
@@ -2332,7 +2332,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",
@@ -2341,7 +2341,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":
@@ -2352,8 +2352,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 2bddbee209..df6e6b3f64 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 958ae70ef3..130c3e505c 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 8e59e5af91..1c2f5deb1c 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 fbd86ba973..3ee7e0f461 100644
--- a/apps/desktop/src/routes/(window-chrome)/settings/general.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/settings/general.tsx
@@ -144,12 +144,12 @@ function AppearanceSection(props: {
 								<button
 									type="button"
 									aria-checked={props.currentTheme === theme.id}
-									class="flex flex-col items-center rounded-md group focus:outline-none focus-visible:ring-gray-300 focus-visible:ring-offset-gray-50 focus-visible:ring-offset-2 focus-visible:ring-4"
+									class="flex flex-col items-center rounded-md group focus:outline-hidden focus-visible:ring-gray-300 focus-visible:ring-offset-gray-50 focus-visible:ring-offset-2 focus-visible:ring-4"
 									onClick={() => props.onThemeChange(theme.id)}
 								>
 									<div
 										class={cx(
-											`w-24 h-[4.8rem] rounded-md overflow-hidden focus:outline-none ring-offset-gray-50 transition-all duration-200`,
+											`w-24 h-[4.8rem] rounded-md overflow-hidden focus:outline-hidden ring-offset-gray-50 transition-all duration-200`,
 											{
 												"ring-2 ring-gray-12 ring-offset-2":
 													props.currentTheme === theme.id,
@@ -779,7 +779,7 @@ function DefaultProjectNameCard(props: {
 						Choose the template to use as the default project and file name.
 					</p>
 				</div>
-				<div class="flex flex-shrink-0 gap-2">
+				<div class="flex shrink-0 gap-2">
 					<Button
 						size="sm"
 						variant="gray"
@@ -831,7 +831,7 @@ function DefaultProjectNameCard(props: {
 				</div>
 
 				<Collapsible class="w-full rounded-lg">
-					<Collapsible.Trigger class="group inline-flex items-center w-full text-xs rounded-lg outline-none px-0.5 py-1">
+					<Collapsible.Trigger class="group inline-flex items-center w-full text-xs rounded-lg outline-hidden px-0.5 py-1">
 						<IconCapChevronDown class="size-4 ui-group-expanded:rotate-180 transition-transform duration-300 ease-in-out" />
 						<p class="py-0.5 px-1">How to customize?</p>
 					</Collapsible.Trigger>
@@ -979,7 +979,7 @@ function ExcludedWindowsCard(props: {
 						</p>
 					</Show>
 				</div>
-				<div class="flex flex-shrink-0 gap-2">
+				<div class="flex shrink-0 gap-2">
 					<Button
 						variant="gray"
 						size="sm"
@@ -1055,8 +1055,8 @@ function ExcludedWindowsSkeleton() {
 				{(width) => (
 					<div class="flex items-center gap-2 rounded-full border border-gray-4 bg-gray-3 px-3 py-1.5 animate-pulse">
 						<div class="flex flex-col gap-1 leading-tight">
-							<div class={cx("h-3 rounded bg-gray-4", width)} />
-							<div class="h-2 w-16 rounded bg-gray-4" />
+							<div class={cx("h-3 rounded-sm bg-gray-4", width)} />
+							<div class="h-2 w-16 rounded-sm bg-gray-4" />
 						</div>
 						<div class="size-6 rounded-full 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 02dc94e753..1e4c4ce797 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 70a6849d3e..95b1bba890 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
@@ -124,7 +124,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] ?? ""}
 				onInput={(e: InputEvent & { currentTarget: HTMLInputElement }) =>
@@ -181,7 +181,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>
@@ -225,7 +225,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 1b33c3653c..052f4f2681 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 d1e8d570b8..b26eb60c96 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 4d191bd7ad..d867bba73f 100644
--- a/apps/desktop/src/routes/(window-chrome)/settings/screenshots.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/settings/screenshots.tsx
@@ -124,7 +124,7 @@ export default function Screenshots() {
 			<Show
 				when={screenshots.data && screenshots.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 screenshots found
 					</p>
 				}
@@ -155,11 +155,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
@@ -208,15 +208,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 b94500d1a6..d189c52ee5 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 b6f58badda..0ff90cd6cd 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 a48a27d00e..13a57bcb2c 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 18c063c46c..0f2297917f 100644
--- a/apps/desktop/src/routes/camera.tsx
+++ b/apps/desktop/src/routes/camera.tsx
@@ -319,7 +319,7 @@ function NativeCameraPreviewPage(props: { disconnected: Accessor<boolean> }) {
 			<div class="h-13">
 				<div class="flex flex-row justify-center items-center">
 					<div
-						class="flex flex-row gap-[0.25rem] p-[0.25rem] opacity-0 group-hover:opacity-100 translate-y-2 group-hover:translate-y-0 rounded-xl transition-[opacity,transform] bg-gray-1 border border-white-transparent-20 text-gray-10"
+						class="flex flex-row gap-1 p-1 opacity-0 group-hover:opacity-100 translate-y-2 group-hover:translate-y-0 rounded-xl transition-[opacity,transform] bg-gray-1 border border-white-transparent-20 text-gray-10"
 						style={{ transform: `scale(${scale()})` }}
 					>
 						<ControlButton onClick={() => getCurrentWindow().close()}>
@@ -1059,7 +1059,7 @@ function LegacyCameraPreviewPage(props: { disconnected: Accessor<boolean> }) {
 			<div class="h-14">
 				<div class="flex flex-row justify-center items-center">
 					<div
-						class="flex flex-row gap-[0.25rem] p-[0.25rem] opacity-0 group-hover:opacity-100 translate-y-2 group-hover:translate-y-0 rounded-xl transition-[opacity,transform] bg-gray-1 border border-white-transparent-20 text-gray-10"
+						class="flex flex-row gap-1 p-1 opacity-0 group-hover:opacity-100 translate-y-2 group-hover:translate-y-0 rounded-xl transition-[opacity,transform] bg-gray-1 border border-white-transparent-20 text-gray-10"
 						style={{ transform: `scale(${scale()})` }}
 					>
 						<ControlButton onClick={() => getCurrentWindow().close()}>
@@ -1246,7 +1246,7 @@ function cameraBorderRadius(state: CameraWindowState) {
 function CameraDisconnectedOverlay() {
 	return (
 		<div
-			class="absolute inset-0 z-50 flex items-center justify-center bg-black/75 backdrop-blur-sm px-4 pointer-events-none"
+			class="absolute inset-0 z-50 flex items-center justify-center bg-black/75 backdrop-blur-xs px-4 pointer-events-none"
 			style={{ "border-radius": "inherit" }}
 		>
 			<p class="text-center text-sm font-medium text-white/90">
diff --git a/apps/desktop/src/routes/capture-area.tsx b/apps/desktop/src/routes/capture-area.tsx
index 280ad95e2b..c5abe8bcb6 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"
@@ -231,7 +231,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 9598426a3f..dcb1c4a2bc 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 92e2348eab..fe558038c3 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 85d21084cd..16b3501927 100644
--- a/apps/desktop/src/routes/editor/CaptionsTab.tsx
+++ b/apps/desktop/src/routes/editor/CaptionsTab.tsx
@@ -908,7 +908,7 @@ export function CaptionsTab() {
 									</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;
@@ -919,7 +919,7 @@ export function CaptionsTab() {
 										}
 									</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 ui-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 5a05dce99e..32ac3f64ec 100644
--- a/apps/desktop/src/routes/editor/ConfigSidebar.tsx
+++ b/apps/desktop/src/routes/editor/ConfigSidebar.tsx
@@ -213,7 +213,7 @@ const CAMERA_SHAPES = [
 
 const CORNER_STYLE_OPTIONS = [
 	{ name: "Squircle", value: "squircle" },
-	{ name: "Rounded", value: "rounded" },
+	{ name: "Rounded", value: "rounded-sm" },
 ] satisfies Array<{ name: string; value: CornerRoundingType }>;
 
 const BACKGROUND_THEMES = {
@@ -386,9 +386,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 },
@@ -422,7 +422,7 @@ 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",
@@ -513,14 +513,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 ui-expanded:rotate-180 text-(--gray-500)"
 												/>
 											)}
 										/>
@@ -1589,12 +1589,12 @@ function BackgroundConfig(props: { scrollRef: HTMLDivElement }) {
 						}
 					}}
 				>
-					<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  ui-selected:border-gray-3 ui-selected:bg-gray-3 ui-not-selected:hover:border-gray-7 rounded-[10px] transition-colors duration-200 outline-hidden border ui-selected:text-gray-12 peer"
 										value={item}
 										{...props}
 									>
@@ -1616,7 +1616,7 @@ function BackgroundConfig(props: { scrollRef: HTMLDivElement }) {
 
 													return (
 														<div
-															class="size-3.5 rounded"
+															class="size-3.5 rounded-sm"
 															style={{
 																background: `linear-gradient(${angle}deg, rgb(${fromColor}), rgb(${toColor}))`,
 															}}
@@ -1679,7 +1679,7 @@ function BackgroundConfig(props: { scrollRef: HTMLDivElement }) {
 														<img
 															loading="eager"
 															alt={BACKGROUND_SOURCES[item]}
-															class="size-3.5 rounded"
+															class="size-3.5 rounded-sm"
 															src={imageSrc}
 														/>
 													);
@@ -1738,7 +1738,7 @@ function BackgroundConfig(props: { scrollRef: HTMLDivElement }) {
 													)
 												}
 												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 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-hidden"
 											>
 												{value}
 											</KTabs.Trigger>
@@ -1842,7 +1842,7 @@ function BackgroundConfig(props: { scrollRef: HTMLDivElement }) {
 								<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">
@@ -1976,7 +1976,7 @@ function BackgroundConfig(props: { scrollRef: HTMLDivElement }) {
 													}}
 												/>
 												<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"
@@ -2013,7 +2013,7 @@ function BackgroundConfig(props: { scrollRef: HTMLDivElement }) {
 			<Field name="Background Blur" icon={<IconCapBgBlur />}>
 				<Slider
 					value={[project.background.blur]}
-					onChange={(v) => setProject("background", "blur", v[0])}
+					onChange={(v) => setProject("background", "blur-sm", v[0])}
 					minValue={0}
 					maxValue={100}
 					step={0.1}
@@ -2164,7 +2164,7 @@ function BackgroundConfig(props: { scrollRef: HTMLDivElement }) {
 					value={[project.background.shadow!]}
 					onChange={(v) => {
 						batch(() => {
-							setProject("background", "shadow", v[0]);
+							setProject("background", "shadow-sm", v[0]);
 							// Initialize advanced shadow settings if they don't exist and shadow is enabled
 							if (v[0] > 0 && !project.background.advancedShadow) {
 								setProject("background", "advancedShadow", {
@@ -2257,7 +2257,7 @@ function CameraConfig(props: { scrollRef: HTMLDivElement }) {
 								const [x, y] = v.split(":");
 								setProject("camera", "position", { x, y } as any);
 							}}
-							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={[
@@ -2274,7 +2274,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 ui-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"
@@ -2283,7 +2283,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>
 								)}
@@ -2397,14 +2397,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 ui-expanded:rotate-180 text-(--gray-500)"
 										/>
 									)}
 								/>
@@ -2474,7 +2474,7 @@ function CameraConfig(props: { scrollRef: HTMLDivElement }) {
 				<div class="space-y-8">
 					<Slider
 						value={[project.camera.shadow!]}
-						onChange={(v) => setProject("camera", "shadow", v[0])}
+						onChange={(v) => setProject("camera", "shadow-sm", v[0])}
 						minValue={0}
 						maxValue={100}
 						step={0.1}
@@ -2529,7 +2529,7 @@ function CameraConfig(props: { scrollRef: HTMLDivElement }) {
               <Slider
                 disabled
                 value={[project.camera.shadow]}
-                onChange={(v) => setProject("camera", "shadow", v[0])}
+                onChange={(v) => setProject("camera", "shadow-sm", v[0])}
                 minValue={0}
                 maxValue={100}
               />
@@ -2577,14 +2577,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 ui-expanded:rotate-180 text-(--gray-500)"
 							/>
 						)}
 					/>
@@ -2618,7 +2618,7 @@ function HexColorInput(props: {
 			<div class="relative">
 				<button
 					type="button"
-					class="size-[2rem] rounded-[0.5rem] cursor-pointer transition-[box-shadow]"
+					class="size-8 rounded-lg cursor-pointer transition-shadow"
 					style={{
 						"background-color": text(),
 						"box-shadow": `inset 0 0 0 1px ${getColorPreviewBorderColor(text())}`,
@@ -2771,7 +2771,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<any> class="truncate">
 								{(state) => {
 									const selected = state.selectedOption();
@@ -2788,7 +2788,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 ui-expanded:rotate-180 text-(--gray-500)" />
 							</KSelect.Icon>
 						</KSelect.Trigger>
 						<KSelect.Portal>
@@ -3324,7 +3324,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}
@@ -3404,21 +3404,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 ui-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 ui-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>
@@ -3821,7 +3821,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>
@@ -3835,7 +3835,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
@@ -3889,26 +3889,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 ui-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 ui-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 ui-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 2c7865b75b..e5da242c9c 100644
--- a/apps/desktop/src/routes/editor/Editor.tsx
+++ b/apps/desktop/src/routes/editor/Editor.tsx
@@ -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"
 													onMouseDown={showCropOptionsMenu}
 													onClick={showCropOptionsMenu}
 												>
@@ -1074,7 +1074,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"
@@ -1120,7 +1120,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}
@@ -1133,7 +1133,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 04505a8b27..197891c257 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 bc74aa0873..4edbdc0794 100644
--- a/apps/desktop/src/routes/editor/ExportPage.tsx
+++ b/apps/desktop/src/routes/editor/ExportPage.tsx
@@ -707,7 +707,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}
@@ -744,7 +744,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>
@@ -759,7 +759,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
@@ -780,19 +780,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>
 						}
@@ -1134,7 +1134,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",
 										)}
 									>
@@ -1191,7 +1191,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",
 											)}
 										>
@@ -1214,7 +1214,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
@@ -1281,7 +1281,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",
@@ -1433,7 +1433,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 42358cd5a5..aface777c8 100644
--- a/apps/desktop/src/routes/editor/Header.tsx
+++ b/apps/desktop/src/routes/editor/Header.tsx
@@ -141,7 +141,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();
@@ -394,7 +394,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 6bc74d8886..cd9546afe8 100644
--- a/apps/desktop/src/routes/editor/KeyboardTab.tsx
+++ b/apps/desktop/src/routes/editor/KeyboardTab.tsx
@@ -310,7 +310,7 @@ export function KeyboardTab() {
 								</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;
@@ -321,7 +321,7 @@ export function KeyboardTab() {
 									}
 								</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 ui-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 8778ebb81a..db61f67965 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 6f3307a28b..c9b48a7095 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 cc3bf3cfe0..6d9b6896dd 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/ShareButton.tsx b/apps/desktop/src/routes/editor/ShareButton.tsx
index a8e7c9818e..bebe10b5a3 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 3e2fa4922b..51b69ab66e 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 c7f67ca76a..f0438c8a64 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 69559a25da..cdeef7f13e 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 52c3d6feb2..77abb75a07 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 2c9359cade..9ce8fefbb2 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 b0a24f7dba..714bd0f381 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 46646b7570..70334a1121 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 ad65243ef6..0953269d2b 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 df79616ba3..8ece70cf03 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 805f28632c..c86ade9561 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 67d9b8edf0..379d207ba2 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 c364de5880..1c903efe65 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 b8c7e804e4..7a490da63f 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/context.ts b/apps/desktop/src/routes/editor/context.ts
index 24987bd5f1..2999b94777 100644
--- a/apps/desktop/src/routes/editor/context.ts
+++ b/apps/desktop/src/routes/editor/context.ts
@@ -132,7 +132,7 @@ export type CustomDomainResponse = {
 	domain_verified: boolean | null;
 };
 
-export type CornerRoundingType = "rounded" | "squircle";
+export type CornerRoundingType = "rounded-sm" | "squircle";
 
 type WithCornerStyle<T> = T & { roundingType: CornerRoundingType };
 
diff --git a/apps/desktop/src/routes/editor/editor-skeleton.tsx b/apps/desktop/src/routes/editor/editor-skeleton.tsx
index a6b2c67fbd..1bd8c3f0e4 100644
--- a/apps/desktop/src/routes/editor/editor-skeleton.tsx
+++ b/apps/desktop/src/routes/editor/editor-skeleton.tsx
@@ -9,7 +9,7 @@ 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 +32,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 +59,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 +87,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 +104,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 +144,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 +164,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 +180,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 +194,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/text-style.tsx b/apps/desktop/src/routes/editor/text-style.tsx
index eea166b5e3..1063f79828 100644
--- a/apps/desktop/src/routes/editor/text-style.tsx
+++ b/apps/desktop/src/routes/editor/text-style.tsx
@@ -62,10 +62,10 @@ export function HexColorInput(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": text(),
 					"box-shadow": `inset 0 0 0 1px ${getColorPreviewBorderColor(text())}`,
@@ -75,7 +75,7 @@ export function HexColorInput(props: {
 			<input
 				ref={colorInput}
 				type="color"
-				class="absolute left-0 bottom-0 size-[2rem] opacity-0"
+				class="absolute left-0 bottom-0 size-8 opacity-0"
 				value={text()}
 				onChange={(e) => {
 					setText(e.target.value);
@@ -83,7 +83,7 @@ export function HexColorInput(props: {
 				}}
 			/>
 			<TextInput
-				class="w-[5rem] p-[0.375rem] border border-gray-3 text-gray-12 rounded-[0.5rem] bg-gray-2"
+				class="w-20 p-1.5 border border-gray-3 text-gray-12 rounded-lg bg-gray-2"
 				value={text()}
 				onFocus={() => {
 					prevColor = props.value;
diff --git a/apps/desktop/src/routes/editor/ui.tsx b/apps/desktop/src/routes/editor/ui.tsx
index 42cae1c27e..8aefae2853 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}
@@ -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] ui-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 ui-expanded:animate-in ui-expanded:fade-in ui-closed:animate-out ui-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 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",
 								(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,
 				)}
@@ -231,14 +231,14 @@ export const Dialog = {
 	},
 	Header(props: ComponentProps<"div">) {
 		return (
-			<div {...props} class="h-[3.5rem] px-[1rem] flex flex-row items-center" />
+			<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,7 +279,7 @@ 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",
+				"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 ui-highlighted:bg-gray-3 ui-highlighted:text-gray-12",
 			)}
 		/>
@@ -310,7 +310,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,8 +318,8 @@ 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",
 	],
 	{
@@ -341,7 +341,7 @@ const editorButtonLeftIconStyles = cva("transition-colors duration-100", {
 			primary:
 				"text-gray-12 enabled:group-hover:not-ui-group-disabled:text-gray-12 ui-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 ui-group-expanded:text-gray-1 ui-group-pressed:text-gray-1",
 		},
 	},
 	defaultVariants: { variant: "primary" },
@@ -426,7 +426,7 @@ 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";
@@ -450,7 +450,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 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">
 					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 f1a8aacbac..9db3377ca2 100644
--- a/apps/desktop/src/routes/in-progress-recording.tsx
+++ b/apps/desktop/src/routes/in-progress-recording.tsx
@@ -655,14 +655,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>
@@ -670,14 +670,14 @@ function InProgressRecordingInner() {
 								>
 									<button
 										disabled={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"
 										onClick={() => stopRecording.mutate()}
 										title="Stop recording"
 										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={
@@ -873,7 +873,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" />
@@ -890,10 +890,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 93fe63d792..6b2f70667b 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 2dee4442a6..4e4332a6ea 100644
--- a/apps/desktop/src/routes/screenshot-editor/AnnotationConfig.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/AnnotationConfig.tsx
@@ -33,7 +33,7 @@ export function AnnotationConfigBar() {
 			{(ann) => {
 				const type = () => ann().type;
 				const isMask = () => type() === "mask";
-				const maskType = () => ann().maskType ?? "blur";
+				const maskType = () => ann().maskType ?? "blur-sm";
 				const maskLevel = () => ann().maskLevel ?? 16;
 				return (
 					<div
@@ -101,11 +101,11 @@ export function AnnotationConfigBar() {
 											type="button"
 											class={cx(
 												"px-2.5 h-6 rounded-md text-xs font-medium transition-colors",
-												maskType() === "blur"
+												maskType() === "blur-sm"
 													? "bg-blue-9 text-white"
 													: "bg-gray-3 text-gray-11 hover:bg-gray-4",
 											)}
-											onClick={() => update("maskType", "blur")}
+											onClick={() => update("maskType", "blur-sm")}
 										>
 											Blur
 										</button>
@@ -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 1a13181a9d..b309c25a44 100644
--- a/apps/desktop/src/routes/screenshot-editor/AnnotationLayer.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/AnnotationLayer.tsx
@@ -586,7 +586,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 37c0ed861b..171829fa67 100644
--- a/apps/desktop/src/routes/screenshot-editor/AnnotationTools.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/AnnotationTools.tsx
@@ -20,7 +20,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",
@@ -87,7 +87,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 5e7f4b6c6e..9ee1c0cbb3 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 10fb1337b3..0e9cc18e51 100644
--- a/apps/desktop/src/routes/screenshot-editor/Editor.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/Editor.tsx
@@ -120,7 +120,7 @@ export function Editor() {
 						setLayersPanelOpen(!layersPanelOpen());
 						break;
 					case "h":
-						setActivePopover(activePopover() === "shadow" ? null : "shadow");
+						setActivePopover(activePopover() === "shadow-sm" ? null : "shadow-sm");
 						break;
 					case "e":
 						setActivePopover(activePopover() === "border" ? null : "border");
@@ -291,7 +291,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(),
 												])}
@@ -303,35 +303,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"
 													onMouseDown={showCropOptionsMenu}
 													onClick={showCropOptionsMenu}
 												>
@@ -341,7 +341,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"
@@ -387,9 +387,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
@@ -410,7 +410,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 93d949717a..dfddb25f00 100644
--- a/apps/desktop/src/routes/screenshot-editor/LayersPanel.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/LayersPanel.tsx
@@ -144,7 +144,7 @@ export function LayersPanel() {
 			onCleanup(() => {
 				window.removeEventListener("mousemove", handleDragMove);
 				window.removeEventListener("mouseup", handleDragEnd);
-				window.removeEventListener("blur", handleWindowBlur);
+				window.removeEventListener("blur-sm", handleWindowBlur);
 				document.documentElement.removeEventListener(
 					"mouseleave",
 					handleMouseLeave,
@@ -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 a2164a3545..1567bca084 100644
--- a/apps/desktop/src/routes/screenshot-editor/Preview.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/Preview.tsx
@@ -325,12 +325,12 @@ 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}
 				onWheel={handleWheel}
 				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", "-"]}
@@ -489,7 +489,7 @@ export function Preview(props: { zoom: number; setZoom: (z: number) => void }) {
 								if (regionWidth <= 0 || regionHeight <= 0) continue;
 
 								const level = Math.max(1, mask.maskLevel ?? 16);
-								const type = mask.maskType ?? "blur";
+								const type = mask.maskType ?? "blur-sm";
 
 								if (type === "pixelate") {
 									const blockSize = Math.max(2, Math.round(level));
diff --git a/apps/desktop/src/routes/screenshot-editor/context.tsx b/apps/desktop/src/routes/screenshot-editor/context.tsx
index f3dc0e13b1..7e83c4b541 100644
--- a/apps/desktop/src/routes/screenshot-editor/context.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/context.tsx
@@ -182,7 +182,7 @@ function createScreenshotEditorContext() {
 	);
 
 	const [activePopover, setActivePopover] = createSignal<
-		"background" | "padding" | "rounding" | "shadow" | "border" | null
+		"background" | "padding" | "rounding" | "shadow-sm" | "border" | null
 	>(null);
 
 	const [dialog, setDialog] = createSignal<DialogState>({
diff --git a/apps/desktop/src/routes/screenshot-editor/popovers/AspectRatioSelect.tsx b/apps/desktop/src/routes/screenshot-editor/popovers/AspectRatioSelect.tsx
index b218c21b2d..d4d298fb6b 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 cfaf064932..20f1cd8737 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  ui-selected:border-gray-3 ui-selected:bg-gray-3 ui-not-selected:hover:border-gray-7 rounded-[10px] transition-colors duration-200 outline-hidden border ui-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 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-hidden"
 													>
 														{value}
 													</KTabs.Trigger>
@@ -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(
 																				",",
@@ -541,7 +541,7 @@ export function BackgroundSettingsPopover() {
 						<Field name="Background Blur" icon={<IconCapBgBlur />}>
 							<Slider
 								value={[project.background.blur]}
-								onChange={(v) => setProject("background", "blur", v[0])}
+								onChange={(v) => setProject("background", "blur-sm", v[0])}
 								minValue={0}
 								maxValue={100}
 								step={0.1}
diff --git a/apps/desktop/src/routes/screenshot-editor/popovers/RoundingPopover.tsx b/apps/desktop/src/routes/screenshot-editor/popovers/RoundingPopover.tsx
index 85d0aec3a2..dbc72a6706 100644
--- a/apps/desktop/src/routes/screenshot-editor/popovers/RoundingPopover.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/popovers/RoundingPopover.tsx
@@ -14,10 +14,10 @@ import {
 	topSlideAnimateClasses,
 } from "../ui";
 
-export type CornerRoundingType = "rounded" | "squircle";
+export type CornerRoundingType = "rounded-sm" | "squircle";
 const CORNER_STYLE_OPTIONS = [
 	{ name: "Squircle", value: "squircle" },
-	{ name: "Rounded", value: "rounded" },
+	{ name: "Rounded", value: "rounded-sm" },
 ] satisfies Array<{ name: string; value: CornerRoundingType }>;
 
 function hasNoVisibleBackground(source: {
@@ -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 ui-expanded:rotate-180 text-(--gray-500)"
 							/>
 						)}
 					/>
diff --git a/apps/desktop/src/routes/screenshot-editor/popovers/ShadowPopover.tsx b/apps/desktop/src/routes/screenshot-editor/popovers/ShadowPopover.tsx
index 2d442fbd3e..a903d84fd1 100644
--- a/apps/desktop/src/routes/screenshot-editor/popovers/ShadowPopover.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/popovers/ShadowPopover.tsx
@@ -13,15 +13,15 @@ export function ShadowPopover() {
 	return (
 		<Popover
 			placement="bottom-start"
-			open={activePopover() === "shadow"}
+			open={activePopover() === "shadow-sm"}
 			onOpenChange={(open) => {
-				if (!open && activePopover() === "shadow") setActivePopover(null);
+				if (!open && activePopover() === "shadow-sm") setActivePopover(null);
 			}}
 		>
 			<Popover.Anchor
 				as={EditorButton}
 				onClick={() =>
-					setActivePopover(activePopover() === "shadow" ? null : "shadow")
+					setActivePopover(activePopover() === "shadow-sm" ? null : "shadow-sm")
 				}
 				leftIcon={<IconCapShadow class="size-4" />}
 				tooltipText="Shadow"
@@ -36,7 +36,7 @@ export function ShadowPopover() {
 								value={[project.background.shadow ?? 0]}
 								onChange={(v) => {
 									batch(() => {
-										setProject("background", "shadow", v[0]);
+										setProject("background", "shadow-sm", v[0]);
 										if (v[0] > 0 && !project.background.advancedShadow) {
 											setProject("background", "advancedShadow", {
 												size: 50,
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 4682750f85..6c94d5b739 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,7 @@ 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 +64,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 1f35bba049..d81341bea8 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}
@@ -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] ui-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 ui-expanded:animate-in ui-expanded:fade-in ui-closed:animate-out ui-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 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",
 								(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,
 				)}
@@ -223,14 +223,14 @@ export const Dialog = {
 	},
 	Header(props: ComponentProps<"div">) {
 		return (
-			<div {...props} class="h-[3.5rem] px-[1rem] flex flex-row items-center" />
+			<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,7 +271,7 @@ 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",
+				"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 ui-highlighted:bg-gray-3 ui-highlighted:text-gray-12",
 			)}
 		/>
@@ -302,7 +302,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,8 +310,8 @@ 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",
 	],
 	{
@@ -333,7 +333,7 @@ const editorButtonLeftIconStyles = cva("transition-colors duration-100", {
 			primary:
 				"text-gray-12 enabled:group-hover:not-ui-group-disabled:text-gray-12 ui-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 ui-group-expanded:text-gray-1 ui-group-pressed:text-gray-1",
 		},
 	},
 	defaultVariants: { variant: "primary" },
@@ -420,7 +420,7 @@ 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";
@@ -444,7 +444,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 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">
 					Coming Soon
 				</KTooltip.Content>
 			</KTooltip.Portal>
diff --git a/apps/desktop/src/routes/screenshot-editor/useScreenshotExport.ts b/apps/desktop/src/routes/screenshot-editor/useScreenshotExport.ts
index 28c4c8ad7f..f512096f92 100644
--- a/apps/desktop/src/routes/screenshot-editor/useScreenshotExport.ts
+++ b/apps/desktop/src/routes/screenshot-editor/useScreenshotExport.ts
@@ -146,7 +146,7 @@ export function useScreenshotExport() {
 			if (regionWidth <= 0 || regionHeight <= 0) continue;
 
 			const level = Math.max(1, ann.maskLevel ?? 16);
-			const type = ann.maskType ?? "blur";
+			const type = ann.maskType ?? "blur-sm";
 
 			if (type === "pixelate") {
 				const blockSize = Math.max(2, Math.round(level));
diff --git a/apps/desktop/src/routes/target-select-overlay.tsx b/apps/desktop/src/routes/target-select-overlay.tsx
index 621772ab23..099a255dff 100644
--- a/apps/desktop/src/routes/target-select-overlay.tsx
+++ b/apps/desktop/src/routes/target-select-overlay.tsx
@@ -1112,7 +1112,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>
@@ -1679,7 +1679,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
@@ -1698,7 +1698,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");
@@ -1767,13 +1767,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/utils/tauri.ts b/apps/desktop/src/utils/tauri.ts
index c1f1153e32..29ababde84 100644
--- a/apps/desktop/src/utils/tauri.ts
+++ b/apps/desktop/src/utils/tauri.ts
@@ -466,7 +466,7 @@ export type ClickSpringConfig = { tension: number; mass: number; friction: numbe
 export type ClipConfiguration = { index: number; offsets: ClipOffsets }
 export type ClipOffsets = { camera?: number; mic?: number; system_audio?: number }
 export type CommercialLicense = { licenseKey: string; expiryDate: number | null; refresh: number; activatedOn: number }
-export type CornerStyle = "squircle" | "rounded"
+export type CornerStyle = "squircle" | "rounded-sm"
 export type Crop = { position: XY<number>; size: XY<number> }
 export type CurrentRecording = { target: CurrentRecordingTarget; mode: RecordingMode; status: RecordingStatus }
 export type CurrentRecordingChanged = null
@@ -526,7 +526,7 @@ export type MaskKeyframes = { position?: MaskVectorKeyframe[]; size?: MaskVector
 export type MaskKind = "sensitive" | "highlight"
 export type MaskScalarKeyframe = { time: number; value: number }
 export type MaskSegment = { start: number; end: number; track?: number; enabled?: boolean; maskType: MaskKind; center: XY<number>; size: XY<number>; feather?: number; opacity?: number; pixelation?: number; darkness?: number; fadeDuration?: number; keyframes?: MaskKeyframes }
-export type MaskType = "blur" | "pixelate"
+export type MaskType = "blur-sm" | "pixelate"
 export type MaskVectorKeyframe = { time: number; x: number; y: number }
 export type MicrophoneInfo = { name: string; sampleRate: number; channels: number }
 export type ModelIDType = string
diff --git a/packages/ui-solid/package.json b/packages/ui-solid/package.json
index c8dbd63d5a..d447a468f8 100644
--- a/packages/ui-solid/package.json
+++ b/packages/ui-solid/package.json
@@ -14,7 +14,7 @@
 		"@kobalte/core": "^0.13.7",
 		"cva": "npm:class-variance-authority@^0.7.0",
 		"solid-js": "^1.9.3",
-		"tailwindcss": "^3.4.10",
+		"tailwindcss": "^4.2.2",
 		"zod": "^3"
 	},
 	"devDependencies": {
diff --git a/packages/ui-solid/src/Button.tsx b/packages/ui-solid/src/Button.tsx
index 0c9234ff18..3c27a407ef 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 outline-2 flex justify-center items-center focus-visible:outline-solid 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 f4962153c2..9a753a1387 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 ui-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 1f08258352..5bf6ccb8af 100644
--- a/packages/ui-solid/src/main.css
+++ b/packages/ui-solid/src/main.css
@@ -1,6 +1,24 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@config '../tailwind.config.js';
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
 
 body {
 	font-family: "Geist Sans", sans-serif;
diff --git a/packages/ui-solid/tailwind.config.js b/packages/ui-solid/tailwind.config.js
index 094a6bad66..cc01eb9624 100644
--- a/packages/ui-solid/tailwind.config.js
+++ b/packages/ui-solid/tailwind.config.js
@@ -110,9 +110,9 @@ module.exports = {
 		},
 	},
 	plugins: [
-		require("tailwindcss-animate"),
+		// require("tailwindcss-animate"),
 		require("@tailwindcss/typography"),
-		require("@kobalte/tailwindcss"),
-		require("tailwind-scrollbar"),
+		// require("@kobalte/tailwindcss"),
+		// require("tailwind-scrollbar"),
 	],
 };
diff --git a/packages/ui/src/components/Button.tsx b/packages/ui/src/components/Button.tsx
index 3ace455df2..099e9bd32d 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 ef2db789b5..309548cc4d 100644
--- a/packages/ui/src/components/Card.tsx
+++ b/packages/ui/src/components/Card.tsx
@@ -51,7 +51,7 @@ const CardDescription = forwardRef<
 	<p
 		ref={ref}
 		className={classNames(
-			"text-[0.875rem] text-gray-10 leading-[1.25rem]",
+			"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 c8f1c63df6..06d1b4d5de 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 0f7e818cda..0a67c8c611 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 b764298b0d..aa2669b0de 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 6f31a3aaaa..eea3baf65d 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 15ad75580c..7742e6221b 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 6b176400ab..f45a8227ff 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 621d9335ca..5a6418d9b9 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 950853b915..3427ce1bab 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 676d7e95da..c802742bd3 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 fc52d730e8..e804b8000f 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",

From 0e1cfbf356f05af40624c28f765a04e8407abaf6 Mon Sep 17 00:00:00 2001
From: Ilya <47112191+ItsEeleeya@users.noreply.github.com>
Date: Fri, 17 Apr 2026 22:31:38 +0330
Subject: [PATCH 2/7] Upgrade desktop app to Tailwind 4 + Format

---
 apps/desktop/package.json                     |   5 +-
 apps/desktop/postcss.config.cjs               |   7 +-
 .../src/routes/(window-chrome)/onboarding.tsx |  12 +-
 apps/desktop/src/routes/editor/Editor.tsx     |   2 +-
 .../src/routes/editor/editor-skeleton.tsx     |   5 +-
 apps/desktop/src/routes/editor/ui.tsx         |   4 +-
 .../src/routes/screenshot-editor/Editor.tsx   |   4 +-
 .../screenshot-editor-skeleton.tsx            |   5 +-
 .../src/routes/screenshot-editor/ui.tsx       |   4 +-
 apps/desktop/src/styles/theme.css             |   5 +
 apps/desktop/src/utils/tauri.ts               |   4 +-
 apps/desktop/tailwind.config.js               |  67 --
 packages/ui-solid/package.json                |   9 +-
 packages/ui-solid/src/main.css                | 176 +++-
 packages/ui-solid/tailwind.config.js          | 118 ---
 packages/ui/src/components/Card.tsx           |   5 +-
 pnpm-lock.yaml                                | 842 ++++++++++++------
 17 files changed, 774 insertions(+), 500 deletions(-)
 delete mode 100644 apps/desktop/tailwind.config.js
 delete mode 100644 packages/ui-solid/tailwind.config.js

diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index 49eb8f37a8..d77f526846 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -74,13 +74,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 a1d89157e4..eebbe271c7 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/routes/(window-chrome)/onboarding.tsx b/apps/desktop/src/routes/(window-chrome)/onboarding.tsx
index 81e98219e4..d9b8c58e16 100644
--- a/apps/desktop/src/routes/(window-chrome)/onboarding.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/onboarding.tsx
@@ -1782,7 +1782,7 @@ function StartupOverlay(props: {
 
 		const tryPlay = () => {
 			if (!audioEl || audioEl.muted) return;
-			void audioEl.play().catch(() => { });
+			void audioEl.play().catch(() => {});
 		};
 
 		tryPlay();
@@ -1804,7 +1804,7 @@ function StartupOverlay(props: {
 		setAudioState("isMuted", next);
 		if (audioEl) {
 			audioEl.muted = next;
-			if (!next) void audioEl.play().catch(() => { });
+			if (!next) void audioEl.play().catch(() => {});
 		}
 	};
 
@@ -1924,7 +1924,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}
@@ -2029,7 +2029,7 @@ function PermissionsStep(props: {
 			}
 		} catch (err) {
 			console.error(`Error requesting permission: ${err}`);
-			fetchPermissions().catch(() => { });
+			fetchPermissions().catch(() => {});
 		} finally {
 			setRequestingPermission(false);
 		}
@@ -2127,13 +2127,13 @@ function PermissionsStep(props: {
 											disabled={requestingPermission()}
 											onClick={() =>
 												permission.requiresManualGrant ||
-													permStatus() === "denied"
+												permStatus() === "denied"
 													? openSettings(permission.key)
 													: requestPermission(permission.key)
 											}
 										>
 											{permission.requiresManualGrant ||
-												permStatus() === "denied"
+											permStatus() === "denied"
 												? "Open Settings"
 												: "Grant"}
 										</Button>
diff --git a/apps/desktop/src/routes/editor/Editor.tsx b/apps/desktop/src/routes/editor/Editor.tsx
index e5da242c9c..de8e38cf8f 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>
diff --git a/apps/desktop/src/routes/editor/editor-skeleton.tsx b/apps/desktop/src/routes/editor/editor-skeleton.tsx
index 1bd8c3f0e4..94b57eaacc 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-sm bg-gray-3 dark:bg-gray-4", props.class)}
+			class={cx(
+				"animate-pulse rounded-sm bg-gray-3 dark:bg-gray-4",
+				props.class,
+			)}
 		/>
 	);
 }
diff --git a/apps/desktop/src/routes/editor/ui.tsx b/apps/desktop/src/routes/editor/ui.tsx
index 8aefae2853..845638caba 100644
--- a/apps/desktop/src/routes/editor/ui.tsx
+++ b/apps/desktop/src/routes/editor/ui.tsx
@@ -230,9 +230,7 @@ export const Dialog = {
 		);
 	},
 	Header(props: ComponentProps<"div">) {
-		return (
-			<div {...props} class="h-14 px-4 flex flex-row items-center" />
-		);
+		return <div {...props} class="h-14 px-4 flex flex-row items-center" />;
 	},
 	Content(props: ComponentProps<"div">) {
 		return (
diff --git a/apps/desktop/src/routes/screenshot-editor/Editor.tsx b/apps/desktop/src/routes/screenshot-editor/Editor.tsx
index 0e9cc18e51..1454b4a0b5 100644
--- a/apps/desktop/src/routes/screenshot-editor/Editor.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/Editor.tsx
@@ -120,7 +120,9 @@ export function Editor() {
 						setLayersPanelOpen(!layersPanelOpen());
 						break;
 					case "h":
-						setActivePopover(activePopover() === "shadow-sm" ? null : "shadow-sm");
+						setActivePopover(
+							activePopover() === "shadow-sm" ? null : "shadow-sm",
+						);
 						break;
 					case "e":
 						setActivePopover(activePopover() === "border" ? null : "border");
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 6c94d5b739..28257ed849 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-sm bg-gray-3 dark:bg-gray-4", props.class)}
+			class={cx(
+				"animate-pulse rounded-sm bg-gray-3 dark:bg-gray-4",
+				props.class,
+			)}
 		/>
 	);
 }
diff --git a/apps/desktop/src/routes/screenshot-editor/ui.tsx b/apps/desktop/src/routes/screenshot-editor/ui.tsx
index d81341bea8..ef464d2586 100644
--- a/apps/desktop/src/routes/screenshot-editor/ui.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/ui.tsx
@@ -222,9 +222,7 @@ export const Dialog = {
 		);
 	},
 	Header(props: ComponentProps<"div">) {
-		return (
-			<div {...props} class="h-14 px-4 flex flex-row items-center" />
-		);
+		return <div {...props} class="h-14 px-4 flex flex-row items-center" />;
 	},
 	Content(props: ComponentProps<"div">) {
 		return (
diff --git a/apps/desktop/src/styles/theme.css b/apps/desktop/src/styles/theme.css
index e5152122a3..2add6f246f 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 {
diff --git a/apps/desktop/src/utils/tauri.ts b/apps/desktop/src/utils/tauri.ts
index 29ababde84..c1f1153e32 100644
--- a/apps/desktop/src/utils/tauri.ts
+++ b/apps/desktop/src/utils/tauri.ts
@@ -466,7 +466,7 @@ export type ClickSpringConfig = { tension: number; mass: number; friction: numbe
 export type ClipConfiguration = { index: number; offsets: ClipOffsets }
 export type ClipOffsets = { camera?: number; mic?: number; system_audio?: number }
 export type CommercialLicense = { licenseKey: string; expiryDate: number | null; refresh: number; activatedOn: number }
-export type CornerStyle = "squircle" | "rounded-sm"
+export type CornerStyle = "squircle" | "rounded"
 export type Crop = { position: XY<number>; size: XY<number> }
 export type CurrentRecording = { target: CurrentRecordingTarget; mode: RecordingMode; status: RecordingStatus }
 export type CurrentRecordingChanged = null
@@ -526,7 +526,7 @@ export type MaskKeyframes = { position?: MaskVectorKeyframe[]; size?: MaskVector
 export type MaskKind = "sensitive" | "highlight"
 export type MaskScalarKeyframe = { time: number; value: number }
 export type MaskSegment = { start: number; end: number; track?: number; enabled?: boolean; maskType: MaskKind; center: XY<number>; size: XY<number>; feather?: number; opacity?: number; pixelation?: number; darkness?: number; fadeDuration?: number; keyframes?: MaskKeyframes }
-export type MaskType = "blur-sm" | "pixelate"
+export type MaskType = "blur" | "pixelate"
 export type MaskVectorKeyframe = { time: number; x: number; y: number }
 export type MicrophoneInfo = { name: string; sampleRate: number; channels: number }
 export type ModelIDType = string
diff --git a/apps/desktop/tailwind.config.js b/apps/desktop/tailwind.config.js
deleted file mode 100644
index 6ab4fa0e40..0000000000
--- 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/packages/ui-solid/package.json b/packages/ui-solid/package.json
index d447a468f8..548ebe38dd 100644
--- a/packages/ui-solid/package.json
+++ b/packages/ui-solid/package.json
@@ -14,7 +14,6 @@
 		"@kobalte/core": "^0.13.7",
 		"cva": "npm:class-variance-authority@^0.7.0",
 		"solid-js": "^1.9.3",
-		"tailwindcss": "^4.2.2",
 		"zod": "^3"
 	},
 	"devDependencies": {
@@ -22,12 +21,12 @@
 		"@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",
+		"tailwindcss": "^4.2.2",
+		"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/main.css b/packages/ui-solid/src/main.css
index 5bf6ccb8af..76c68daeb1 100644
--- a/packages/ui-solid/src/main.css
+++ b/packages/ui-solid/src/main.css
@@ -1,23 +1,159 @@
-@import 'tailwindcss';
-
-@config '../tailwind.config.js';
-
-/*
-  The default border color has changed to `currentcolor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentcolor);
-  }
+@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;
+
+	@keyframes collapsible-down {
+		from {
+			height: 0;
+		}
+		to {
+			height: var(--kb-collapsible-content-height);
+		}
+	}
+	@keyframes collapsible-up {
+		from {
+			height: var(--kb-collapsible-content-height);
+		}
+		to {
+			height: 0;
+		}
+	}
 }
 
 body {
diff --git a/packages/ui-solid/tailwind.config.js b/packages/ui-solid/tailwind.config.js
deleted file mode 100644
index cc01eb9624..0000000000
--- 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/Card.tsx b/packages/ui/src/components/Card.tsx
index 309548cc4d..7e53539146 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-5",
-			className,
-		)}
+		className={classNames("text-[0.875rem] text-gray-10 leading-5", className)}
 		{...props}
 	/>
 ));
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fb43a78d38..b2853f2fc4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -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.11)(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.11)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(mysql2@3.15.2)(rolldown@1.0.0-rc.13)(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.11)(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.11)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(lightningcss@1.32.0)(mysql2@3.15.2)(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.11)(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.11)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(mysql2@3.15.2)(rolldown@1.0.0-rc.13)(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.11)(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.11)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(lightningcss@1.32.0)(mysql2@3.15.2)(terser@5.44.0)(xml2js@0.6.2)(yaml@2.8.1)
       webcodecs:
         specifier: ^0.1.0
         version: 0.1.0
@@ -219,6 +219,12 @@ importers:
       '@iconify/json':
         specifier: ^2.2.239
         version: 2.2.336
+      '@tailwindcss/postcss':
+        specifier: ^4.2.2
+        version: 4.2.2
+      '@tailwindcss/typography':
+        specifier: ^0.5.9
+        version: 0.5.16(tailwindcss@4.2.4)
       '@tauri-apps/cli':
         specifier: '>=2.1.0'
         version: 2.5.0
@@ -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@4.2.4)
       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)
@@ -319,7 +328,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.10)
       solid-js:
         specifier: ^1.9.3
         version: 1.9.6
@@ -356,16 +365,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:
@@ -819,7 +828,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:
@@ -870,7 +879,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.10)(typescript@5.8.3)(yaml@2.8.1)
     devDependencies:
       concurrently:
         specifier: ^9.2.1
@@ -902,13 +911,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
@@ -945,7 +954,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.2.4)
       eslint-utils:
         specifier: ^3.0.0
         version: 3.0.0(eslint@8.57.1)
@@ -1082,7 +1091,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.10)(typescript@5.8.3)(yaml@2.8.1)
       typescript:
         specifier: ^5.7.3
         version: 5.8.3
@@ -1101,7 +1110,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.10)(typescript@5.8.3)(yaml@2.8.1)
       typescript:
         specifier: ^5.7.3
         version: 5.8.3
@@ -1179,7 +1188,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)
@@ -1221,10 +1230,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:
@@ -1237,9 +1246,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
@@ -1252,31 +1258,34 @@ importers:
         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)))
+        version: 0.9.0(tailwindcss@4.2.4)
       '@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.2.4)
       autoprefixer:
-        specifier: ^10.4.20
-        version: 10.4.21(postcss@8.5.3)
+        specifier: ^10.4.21
+        version: 10.4.21(postcss@8.5.10)
       postcss:
-        specifier: ^8.4.41
-        version: 8.5.3
+        specifier: ^8.5.10
+        version: 8.5.10
       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)))
+        version: 3.1.0(tailwindcss@4.2.4)
+      tailwindcss:
+        specifier: ^4.2.2
+        version: 4.2.4
+      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
@@ -2327,12 +2336,18 @@ packages:
       '@effect/rpc': ^0.71.0
       effect: ^3.18.1
 
+  '@emnapi/core@1.10.0':
+    resolution: {integrity: sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==}
+
   '@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==}
+
   '@emnapi/runtime@1.4.3':
     resolution: {integrity: sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ==}
 
@@ -2351,6 +2366,9 @@ packages:
   '@emnapi/wasi-threads@1.2.0':
     resolution: {integrity: sha512-N10dEJNSsUx41Z6pZsXU8FjPjpBEplgH24sfkmITrBED1/U2Esum9F3lfLrMjKHHjmi557zQn7kR9R+XWXu5Rg==}
 
+  '@emnapi/wasi-threads@1.2.1':
+    resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
+
   '@esbuild-kit/core-utils@3.3.2':
     resolution: {integrity: sha512-sPRAnw9CdSsRmEtnsl2WXWdyquogVpB3yZ3dgwJfe8zrOzTsV7cJvmwrKVa+0ma5BoiGJ+BoqkMvawbayKUsqQ==}
     deprecated: 'Merged into tsx: https://tsx.is'
@@ -4255,8 +4273,8 @@ packages:
   '@napi-rs/wasm-runtime@1.0.6':
     resolution: {integrity: sha512-DXj75ewm11LIWUk198QSKUTxjyRjsBwk09MuMk5DGK+GDUtyPhhEHOGP/Xwwj3DjQXXkivoBirmOnKrLfc0+9g==}
 
-  '@napi-rs/wasm-runtime@1.1.2':
-    resolution: {integrity: sha512-sNXv5oLJ7ob93xkZ1XnxisYhGYXfaG9f65/ZgYuAu3qt7b3NadcOEhLvx28hv31PgX8SZJRYrAIPQilQmFpLVw==}
+  '@napi-rs/wasm-runtime@1.1.4':
+    resolution: {integrity: sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==}
     peerDependencies:
       '@emnapi/core': ^1.7.1
       '@emnapi/runtime': ^1.7.1
@@ -4868,8 +4886,8 @@ packages:
     resolution: {integrity: sha512-JD6DerIKdJGmRp4jQyX5FlrQjA4tjOw1cvfsPAZXfOOEErMUHjPcPSICS+6WnM0nB0efSFARh0KAZss+bvExOA==}
     engines: {node: '>=14'}
 
-  '@oxc-project/types@0.123.0':
-    resolution: {integrity: sha512-YtECP/y8Mj1lSHiUWGSRzy/C6teUKlS87dEfuVKT09LgQbUsBW1rNg+MiJ4buGu3yuADV60gbIvo9/HplA56Ew==}
+  '@oxc-project/types@0.127.0':
+    resolution: {integrity: sha512-aIYXQBo4lCbO4z0R3FHeucQHpF46l2LbMdxRvqvuRuW2OxdnSkcng5B8+K12spgLDj93rtN3+J2Vac/TIO+ciQ==}
 
   '@oxc-project/types@0.94.0':
     resolution: {integrity: sha512-+UgQT/4o59cZfH6Cp7G0hwmqEQ0wE+AdIwhikdwnhWI9Dp8CgSY081+Q3O67/wq3VJu8mgUEB93J9EHHn70fOw==}
@@ -5819,8 +5837,8 @@ packages:
     cpu: [arm64]
     os: [android]
 
-  '@rolldown/binding-android-arm64@1.0.0-rc.13':
-    resolution: {integrity: sha512-5ZiiecKH2DXAVJTNN13gNMUcCDg4Jy8ZjbXEsPnqa248wgOVeYRX0iqXXD5Jz4bI9BFHgKsI2qmyJynstbmr+g==}
+  '@rolldown/binding-android-arm64@1.0.0-rc.17':
+    resolution: {integrity: sha512-s70pVGhw4zqGeFnXWvAzJDlvxhlRollagdCCKRgOsgUOH3N1l0LIxf83AtGzmb5SiVM4Hjl5HyarMRfdfj3DaQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [android]
@@ -5831,8 +5849,8 @@ packages:
     cpu: [arm64]
     os: [darwin]
 
-  '@rolldown/binding-darwin-arm64@1.0.0-rc.13':
-    resolution: {integrity: sha512-tz/v/8G77seu8zAB3A5sK3UFoOl06zcshEzhUO62sAEtrEuW/H1CcyoupOrD+NbQJytYgA4CppXPzlrmp4JZKA==}
+  '@rolldown/binding-darwin-arm64@1.0.0-rc.17':
+    resolution: {integrity: sha512-4ksWc9n0mhlZpZ9PMZgTGjeOPRu8MB1Z3Tz0Mo02eWfWCHMW1zN82Qz/pL/rC+yQa+8ZnutMF0JjJe7PjwasYw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [darwin]
@@ -5843,8 +5861,8 @@ packages:
     cpu: [x64]
     os: [darwin]
 
-  '@rolldown/binding-darwin-x64@1.0.0-rc.13':
-    resolution: {integrity: sha512-8DakphqOz8JrMYWTJmWA+vDJxut6LijZ8Xcdc4flOlAhU7PNVwo2MaWBF9iXjJAPo5rC/IxEFZDhJ3GC7NHvug==}
+  '@rolldown/binding-darwin-x64@1.0.0-rc.17':
+    resolution: {integrity: sha512-SUSDOI6WwUVNcWxd02QEBjLdY1VPHvlEkw6T/8nYG322iYWCTxRb1vzk4E+mWWYehTp7ERibq54LSJGjmouOsw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [darwin]
@@ -5855,8 +5873,8 @@ packages:
     cpu: [x64]
     os: [freebsd]
 
-  '@rolldown/binding-freebsd-x64@1.0.0-rc.13':
-    resolution: {integrity: sha512-4wBQFfjDuXYN/SVI8inBF3Aa+isq40rc6VMFbk5jcpolUBTe5cYnMsHZ51nFWsx3PVyyNN3vgoESki0Hmr/4BA==}
+  '@rolldown/binding-freebsd-x64@1.0.0-rc.17':
+    resolution: {integrity: sha512-hwnz3nw9dbJ05EDO/PvcjaaewqqDy7Y1rn1UO81l8iIK1GjenME75dl16ajbvSSMfv66WXSRCYKIqfgq2KCfxw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [freebsd]
@@ -5867,8 +5885,8 @@ packages:
     cpu: [arm]
     os: [linux]
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.13':
-    resolution: {integrity: sha512-JW/e4yPIXLms+jmnbwwy5LA/LxVwZUWLN8xug+V200wzaVi5TEGIWQlh8o91gWYFxW609euI98OCCemmWGuPrw==}
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.17':
+    resolution: {integrity: sha512-IS+W7epTcwANmFSQFrS1SivEXHtl1JtuQA9wlxrZTcNi6mx+FDOYrakGevvvTwgj2JvWiK8B29/qD9BELZPyXQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm]
     os: [linux]
@@ -5879,8 +5897,8 @@ packages:
     cpu: [arm64]
     os: [linux]
 
-  '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.13':
-    resolution: {integrity: sha512-ZfKWpXiUymDnavepCaM6KG/uGydJ4l2nBmMxg60Ci4CbeefpqjPWpfaZM7PThOhk2dssqBAcwLc6rAyr0uTdXg==}
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.17':
+    resolution: {integrity: sha512-e6usGaHKW5BMNZOymS1UcEYGowQMWcgZ71Z17Sl/h2+ZziNJ1a9n3Zvcz6LdRyIW5572wBCTH/Z+bKuZouGk9Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
@@ -5891,20 +5909,20 @@ packages:
     cpu: [arm64]
     os: [linux]
 
-  '@rolldown/binding-linux-arm64-musl@1.0.0-rc.13':
-    resolution: {integrity: sha512-bmRg3O6Z0gq9yodKKWCIpnlH051sEfdVwt+6m5UDffAQMUUqU0xjnQqqAUm+Gu7ofAAly9DqiQDtKu2nPDEABA==}
+  '@rolldown/binding-linux-arm64-musl@1.0.0-rc.17':
+    resolution: {integrity: sha512-b/CgbwAJpmrRLp02RPfhbudf5tZnN9nsPWK82znefso832etkem8H7FSZwxrOI9djcdTP7U6YfNhbRnh7djErg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
 
-  '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.13':
-    resolution: {integrity: sha512-8Wtnbw4k7pMYN9B/mOEAsQ8HOiq7AZ31Ig4M9BKn2So4xRaFEhtCSa4ZJaOutOWq50zpgR4N5+L/opnlaCx8wQ==}
+  '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.17':
+    resolution: {integrity: sha512-4EII1iNGRUN5WwGbF/kOh/EIkoDN9HsupgLQoXfY+D1oyJm7/F4t5PYU5n8SWZgG0FEwakyM8pGgwcBYruGTlA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
 
-  '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.13':
-    resolution: {integrity: sha512-D/0Nlo8mQuxSMohNJUF2lDXWRsFDsHldfRRgD9bRgktj+EndGPj4DOV37LqDKPYS+osdyhZEH7fTakTAEcW7qg==}
+  '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.17':
+    resolution: {integrity: sha512-AH8oq3XqQo4IibpVXvPeLDI5pzkpYn0WiZAfT05kFzoJ6tQNzwRdDYQ45M8I/gslbodRZwW8uxLhbSBbkv96rA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
@@ -5915,8 +5933,8 @@ packages:
     cpu: [x64]
     os: [linux]
 
-  '@rolldown/binding-linux-x64-gnu@1.0.0-rc.13':
-    resolution: {integrity: sha512-eRrPvat2YaVQcwwKi/JzOP6MKf1WRnOCr+VaI3cTWz3ZoLcP/654z90lVCJ4dAuMEpPdke0n+qyAqXDZdIC4rA==}
+  '@rolldown/binding-linux-x64-gnu@1.0.0-rc.17':
+    resolution: {integrity: sha512-cLnjV3xfo7KslbU41Z7z8BH/E1y5mzUYzAqih1d1MDaIGZRCMqTijqLv76/P7fyHuvUcfGsIpqCdddbxLLK9rA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
@@ -5927,8 +5945,8 @@ packages:
     cpu: [x64]
     os: [linux]
 
-  '@rolldown/binding-linux-x64-musl@1.0.0-rc.13':
-    resolution: {integrity: sha512-PsdONiFRp8hR8KgVjTWjZ9s7uA3uueWL0t74/cKHfM4dR5zXYv4AjB8BvA+QDToqxAFg4ZkcVEqeu5F7inoz5w==}
+  '@rolldown/binding-linux-x64-musl@1.0.0-rc.17':
+    resolution: {integrity: sha512-0phclDw1spsL7dUB37sIARuis2tAgomCJXAHZlpt8PXZ4Ba0dRP1e+66lsRqrfhISeN9bEGNjQs+T/Fbd7oYGw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
@@ -5939,8 +5957,8 @@ packages:
     cpu: [arm64]
     os: [openharmony]
 
-  '@rolldown/binding-openharmony-arm64@1.0.0-rc.13':
-    resolution: {integrity: sha512-hCNXgC5dI3TVOLrPT++PKFNZ+1EtS0mLQwfXXXSUD/+rGlB65gZDwN/IDuxLpQP4x8RYYHqGomlUXzpO8aVI2w==}
+  '@rolldown/binding-openharmony-arm64@1.0.0-rc.17':
+    resolution: {integrity: sha512-0ag/hEgXOwgw4t8QyQvUCxvEg+V0KBcA6YuOx9g0r02MprutRF5dyljgm3EmR02O292UX7UeS6HzWHAl6KgyhA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [openharmony]
@@ -5950,9 +5968,9 @@ packages:
     engines: {node: '>=14.0.0'}
     cpu: [wasm32]
 
-  '@rolldown/binding-wasm32-wasi@1.0.0-rc.13':
-    resolution: {integrity: sha512-viLS5C5et8NFtLWw9Sw3M/w4vvnVkbWkO7wSNh3C+7G1+uCkGpr6PcjNDSFcNtmXY/4trjPBqUfcOL+P3sWy/g==}
-    engines: {node: '>=14.0.0'}
+  '@rolldown/binding-wasm32-wasi@1.0.0-rc.17':
+    resolution: {integrity: sha512-LEXei6vo0E5wTGwpkJ4KoT3OZJRnglwldt5ziLzOlc6qqb55z4tWNq2A+PFqCJuvWWdP53CVhG1Z9NtToDPJrA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [wasm32]
 
   '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.42':
@@ -5961,8 +5979,8 @@ packages:
     cpu: [arm64]
     os: [win32]
 
-  '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.13':
-    resolution: {integrity: sha512-Fqa3Tlt1xL4wzmAYxGNFV36Hb+VfPc9PYU+E25DAnswXv3ODDu/yyWjQDbXMo5AGWkQVjLgQExuVu8I/UaZhPQ==}
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.17':
+    resolution: {integrity: sha512-gUmyzBl3SPMa6hrqFUth9sVfcLBlYsbMzBx5PlexMroZStgzGqlZ26pYG89rBb45Mnia+oil6YAIFeEWGWhoZA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [win32]
@@ -5979,8 +5997,8 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@rolldown/binding-win32-x64-msvc@1.0.0-rc.13':
-    resolution: {integrity: sha512-/pLI5kPkGEi44TDlnbio3St/5gUFeN51YWNAk/Gnv6mEQBOahRBh52qVFVBpmrnU01n2yysvBML9Ynu7K4kGAQ==}
+  '@rolldown/binding-win32-x64-msvc@1.0.0-rc.17':
+    resolution: {integrity: sha512-3hkiolcUAvPB9FLb3UZdfjVVNWherN1f/skkGWJP/fgSQhYUZpSIRr0/I8ZK9TkF3F7kxvJAk0+IcKvPHk9qQg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [win32]
@@ -5988,8 +6006,8 @@ packages:
   '@rolldown/pluginutils@1.0.0-beta.42':
     resolution: {integrity: sha512-N7pQzk9CyE7q0bBN/q0J8s6Db279r5kUZc6d7/wWRe9/zXqC52HQovVyu6iXPIDY4BEzzgbVLhVFXrOuGJ22ZQ==}
 
-  '@rolldown/pluginutils@1.0.0-rc.13':
-    resolution: {integrity: sha512-3ngTAv6F/Py35BsYbeeLeecvhMKdsKm4AoOETVhAA+Qc8nrA2I0kF7oa93mE9qnIurngOSpMnQ0x2nQY2FPviA==}
+  '@rolldown/pluginutils@1.0.0-rc.17':
+    resolution: {integrity: sha512-n8iosDOt6Ig1UhJ2AYqoIhHWh/isz0xpicHTzpKBeotdVsTEcxsSA/i3EVM7gQAj0rU27OLAxCjzlj15IWY7bg==}
 
   '@rollup/plugin-alias@5.1.1':
     resolution: {integrity: sha512-PR9zDb+rOzkRb2VD+EuKB7UC41vU5DIwZ5qqCpk0KJudcWAyi8rvYOhS7+L5aZCspw1stTViLgN5v6FF1p5cgQ==}
@@ -7060,10 +7078,10 @@ packages:
       react-dom:
         optional: true
 
-  '@storybook/builder-vite@10.4.0-alpha.8':
-    resolution: {integrity: sha512-weLrxdNknHwHZrGMVfWjAcN48kIG5ipYJAWjKrx2nzhCaZY30DQ1SuVVaDiwVSUfTmncK/MX5weerJjb8Ny66g==}
+  '@storybook/builder-vite@10.4.0-alpha.10':
+    resolution: {integrity: sha512-yEH145GAEVrynuCprGbUIeryDv2bGB15RXyu/Yc6gbCAj98cIgCwNnSbH8HAK6AbPy0g9evKhAtCZyK132hCFQ==}
     peerDependencies:
-      storybook: ^10.4.0-alpha.8
+      storybook: ^10.4.0-alpha.10
       vite: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
 
   '@storybook/core@8.6.12':
@@ -7074,12 +7092,12 @@ packages:
       prettier:
         optional: true
 
-  '@storybook/csf-plugin@10.4.0-alpha.8':
-    resolution: {integrity: sha512-h5GXJaAQGNRhko09qvoVAxPBLvKlQkgDFBgc/3TPZKd2t0fZMErdJPX6ixn4cOONn5SpDqeI/uej0OHC5uazlg==}
+  '@storybook/csf-plugin@10.4.0-alpha.10':
+    resolution: {integrity: sha512-YGRRAkZi5cH/eqggvG7u/N6zzJmxThveQ4DZfKxrlyiCTzKW6CTKedyzoHPnDpEf2XWzVz8IZvnM0D1UUs0EFg==}
     peerDependencies:
       esbuild: '*'
       rollup: '*'
-      storybook: ^10.4.0-alpha.8
+      storybook: ^10.4.0-alpha.10
       vite: '*'
       webpack: '*'
     peerDependenciesMeta:
@@ -7357,6 +7375,94 @@ packages:
       zod:
         optional: true
 
+  '@tailwindcss/node@4.2.2':
+    resolution: {integrity: sha512-pXS+wJ2gZpVXqFaUEjojq7jzMpTGf8rU6ipJz5ovJV6PUGmlJ+jvIwGrzdHdQ80Sg+wmQxUFuoW1UAAwHNEdFA==}
+
+  '@tailwindcss/oxide-android-arm64@4.2.2':
+    resolution: {integrity: sha512-dXGR1n+P3B6748jZO/SvHZq7qBOqqzQ+yFrXpoOWWALWndF9MoSKAT3Q0fYgAzYzGhxNYOoysRvYlpixRBBoDg==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.2':
+    resolution: {integrity: sha512-iq9Qjr6knfMpZHj55/37ouZeykwbDqF21gPFtfnhCCKGDcPI/21FKC9XdMO/XyBM7qKORx6UIhGgg6jLl7BZlg==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.2.2':
+    resolution: {integrity: sha512-BlR+2c3nzc8f2G639LpL89YY4bdcIdUmiOOkv2GQv4/4M0vJlpXEa0JXNHhCHU7VWOKWT/CjqHdTP8aUuDJkuw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.2.2':
+    resolution: {integrity: sha512-YUqUgrGMSu2CDO82hzlQ5qSb5xmx3RUrke/QgnoEx7KvmRJHQuZHZmZTLSuuHwFf0DJPybFMXMYf+WJdxHy/nQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.2':
+    resolution: {integrity: sha512-FPdhvsW6g06T9BWT0qTwiVZYE2WIFo2dY5aCSpjG/S/u1tby+wXoslXS0kl3/KXnULlLr1E3NPRRw0g7t2kgaQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.2':
+    resolution: {integrity: sha512-4og1V+ftEPXGttOO7eCmW7VICmzzJWgMx+QXAJRAhjrSjumCwWqMfkDrNu1LXEQzNAwz28NCUpucgQPrR4S2yw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.2':
+    resolution: {integrity: sha512-oCfG/mS+/+XRlwNjnsNLVwnMWYH7tn/kYPsNPh+JSOMlnt93mYNCKHYzylRhI51X+TbR+ufNhhKKzm6QkqX8ag==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.2':
+    resolution: {integrity: sha512-rTAGAkDgqbXHNp/xW0iugLVmX62wOp2PoE39BTCGKjv3Iocf6AFbRP/wZT/kuCxC9QBh9Pu8XPkv/zCZB2mcMg==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.2.2':
+    resolution: {integrity: sha512-XW3t3qwbIwiSyRCggeO2zxe3KWaEbM0/kW9e8+0XpBgyKU4ATYzcVSMKteZJ1iukJ3HgHBjbg9P5YPRCVUxlnQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.2.2':
+    resolution: {integrity: sha512-eKSztKsmEsn1O5lJ4ZAfyn41NfG7vzCg496YiGtMDV86jz1q/irhms5O0VrY6ZwTUkFy/EKG3RfWgxSI3VbZ8Q==}
+    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.2.2':
+    resolution: {integrity: sha512-qPmaQM4iKu5mxpsrWZMOZRgZv1tOZpUm+zdhhQP0VhJfyGGO3aUKdbh3gDZc/dPLQwW4eSqWGrrcWNBZWUWaXQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.2':
+    resolution: {integrity: sha512-1T/37VvI7WyH66b+vqHj/cLwnCxt7Qt3WFu5Q8hk65aOvlwAhs7rAp1VkulBJw/N4tMirXjVnylTR72uI0HGcA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.2.2':
+    resolution: {integrity: sha512-qEUA07+E5kehxYp9BVMpq9E8vnJuBHfJEC0vPC5e7iL/hw7HR61aDKoVoKzrG+QKp56vhNZe4qwkRmMC0zDLvg==}
+    engines: {node: '>= 20'}
+
+  '@tailwindcss/postcss@4.2.2':
+    resolution: {integrity: sha512-n4goKQbW8RVXIbNKRB/45LzyUqN451deQK0nzIeauVEqjlI49slUlgKYJM2QyUzap/PcpnS7kzSUmPb1sCRvYQ==}
+
   '@tailwindcss/typography@0.5.16':
     resolution: {integrity: sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==}
     peerDependencies:
@@ -8928,6 +9034,7 @@ packages:
   aws-sdk@2.1692.0:
     resolution: {integrity: sha512-x511uiJ/57FIsbgUe5csJ13k3uzu25uWQE+XqfBis/sB0SFoiElJWXRkgEAUh0U6n40eT3ay5Ue4oPkRMu1LYw==}
     engines: {node: '>= 10.0.0'}
+    deprecated: The AWS SDK for JavaScript (v2) has reached end-of-support, and no longer receives updates. Please migrate your code to use AWS SDK for JavaScript (v3). More info https://a.co/cUPnyil
 
   aws-ssl-profiles@1.1.2:
     resolution: {integrity: sha512-NZKeq9AfyQvEeNlN0zSYAaWrmBffJh3IELMZfRpJVWgrpEbtEpnjvzqBPf+mxoI287JohRDoa+/nsfqqiZmF6g==}
@@ -12019,6 +12126,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'}
@@ -13402,6 +13579,10 @@ packages:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
 
+  postcss@8.5.10:
+    resolution: {integrity: sha512-pMMHxBOZKFU6HgAZ4eyGnwXF/EvPGGqUr0MnZ5+99485wwW41kW91A4LOGxSHhgugZmSChL5AlElNdwlNgcnLQ==}
+    engines: {node: ^10 || ^12 || >=14}
+
   postcss@8.5.3:
     resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
     engines: {node: ^10 || ^12 || >=14}
@@ -14026,8 +14207,8 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
-  rolldown@1.0.0-rc.13:
-    resolution: {integrity: sha512-bvVj8YJmf0rq4pSFmH7laLa6pYrhghv3PRzrCdRAr23g66zOKVJ4wkvFtgohtPLWmthgg8/rkaqRHrpUEh0Zbw==}
+  rolldown@1.0.0-rc.17:
+    resolution: {integrity: sha512-ZrT53oAKrtA4+YtBWPQbtPOxIbVDbxT0orcYERKd63VJTF13zPcgXTvD4843L8pcsI7M6MErt8QtON6lrB9tyA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
 
@@ -14750,6 +14931,12 @@ packages:
     engines: {node: '>=14.0.0'}
     hasBin: true
 
+  tailwindcss@4.2.2:
+    resolution: {integrity: sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==}
+
+  tailwindcss@4.2.4:
+    resolution: {integrity: sha512-HhKppgO81FQof5m6TEnuBWCZGgfRAWbaeOaGT00KOy/Pf/j6oUihdvBpA7ltCeAvZpFhW3j0PTclkxsd4IXYDA==}
+
   tapable@2.3.0:
     resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
     engines: {node: '>=6'}
@@ -14764,12 +14951,12 @@ packages:
   tar@6.2.1:
     resolution: {integrity: sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==}
     engines: {node: '>=10'}
-    deprecated: Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exhorbitant rates) by contacting i@izs.me
+    deprecated: Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
 
   tar@7.4.3:
     resolution: {integrity: sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==}
     engines: {node: '>=18'}
-    deprecated: Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exhorbitant rates) by contacting i@izs.me
+    deprecated: Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
 
   tauri-plugin-context-menu@0.5.0:
     resolution: {integrity: sha512-CkAjSyxLx26hTXabG5Unbv+GWeH0XYNQB3zTqRxHpp257mWX8I4oASp8YF5T3zxFQEK++ZHqMZHpLrQ3usShRQ==}
@@ -15098,6 +15285,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==}
 
@@ -17644,7 +17834,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
@@ -17654,7 +17844,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:
@@ -17904,6 +18094,12 @@ snapshots:
       '@effect/rpc': 0.71.0(@effect/platform@0.92.1(effect@3.18.4))(effect@3.18.4)
       effect: 3.18.4
 
+  '@emnapi/core@1.10.0':
+    dependencies:
+      '@emnapi/wasi-threads': 1.2.1
+      tslib: 2.8.1
+    optional: true
+
   '@emnapi/core@1.5.0':
     dependencies:
       '@emnapi/wasi-threads': 1.1.0
@@ -17916,6 +18112,11 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@emnapi/runtime@1.10.0':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
   '@emnapi/runtime@1.4.3':
     dependencies:
       tslib: 2.8.1
@@ -17946,6 +18147,11 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@emnapi/wasi-threads@1.2.1':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
   '@esbuild-kit/core-utils@3.3.2':
     dependencies:
       esbuild: 0.18.20
@@ -19029,9 +19235,9 @@ 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)))':
+  '@kobalte/tailwindcss@0.9.0(tailwindcss@4.2.4)':
     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: 4.2.4
 
   '@kobalte/utils@0.9.1(solid-js@1.9.6)':
     dependencies:
@@ -19288,10 +19494,10 @@ snapshots:
       '@tybys/wasm-util': 0.10.1
     optional: true
 
-  '@napi-rs/wasm-runtime@1.1.2(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)':
+  '@napi-rs/wasm-runtime@1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)':
     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.10.1
     optional: true
 
@@ -20071,7 +20277,7 @@ snapshots:
 
   '@opentelemetry/semantic-conventions@1.37.0': {}
 
-  '@oxc-project/types@0.123.0': {}
+  '@oxc-project/types@0.127.0': {}
 
   '@oxc-project/types@0.94.0': {}
 
@@ -21162,67 +21368,67 @@ snapshots:
   '@rolldown/binding-android-arm64@1.0.0-beta.42':
     optional: true
 
-  '@rolldown/binding-android-arm64@1.0.0-rc.13':
+  '@rolldown/binding-android-arm64@1.0.0-rc.17':
     optional: true
 
   '@rolldown/binding-darwin-arm64@1.0.0-beta.42':
     optional: true
 
-  '@rolldown/binding-darwin-arm64@1.0.0-rc.13':
+  '@rolldown/binding-darwin-arm64@1.0.0-rc.17':
     optional: true
 
   '@rolldown/binding-darwin-x64@1.0.0-beta.42':
     optional: true
 
-  '@rolldown/binding-darwin-x64@1.0.0-rc.13':
+  '@rolldown/binding-darwin-x64@1.0.0-rc.17':
     optional: true
 
   '@rolldown/binding-freebsd-x64@1.0.0-beta.42':
     optional: true
 
-  '@rolldown/binding-freebsd-x64@1.0.0-rc.13':
+  '@rolldown/binding-freebsd-x64@1.0.0-rc.17':
     optional: true
 
   '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.42':
     optional: true
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.13':
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-rc.17':
     optional: true
 
   '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.42':
     optional: true
 
-  '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.13':
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-rc.17':
     optional: true
 
   '@rolldown/binding-linux-arm64-musl@1.0.0-beta.42':
     optional: true
 
-  '@rolldown/binding-linux-arm64-musl@1.0.0-rc.13':
+  '@rolldown/binding-linux-arm64-musl@1.0.0-rc.17':
     optional: true
 
-  '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.13':
+  '@rolldown/binding-linux-ppc64-gnu@1.0.0-rc.17':
     optional: true
 
-  '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.13':
+  '@rolldown/binding-linux-s390x-gnu@1.0.0-rc.17':
     optional: true
 
   '@rolldown/binding-linux-x64-gnu@1.0.0-beta.42':
     optional: true
 
-  '@rolldown/binding-linux-x64-gnu@1.0.0-rc.13':
+  '@rolldown/binding-linux-x64-gnu@1.0.0-rc.17':
     optional: true
 
   '@rolldown/binding-linux-x64-musl@1.0.0-beta.42':
     optional: true
 
-  '@rolldown/binding-linux-x64-musl@1.0.0-rc.13':
+  '@rolldown/binding-linux-x64-musl@1.0.0-rc.17':
     optional: true
 
   '@rolldown/binding-openharmony-arm64@1.0.0-beta.42':
     optional: true
 
-  '@rolldown/binding-openharmony-arm64@1.0.0-rc.13':
+  '@rolldown/binding-openharmony-arm64@1.0.0-rc.17':
     optional: true
 
   '@rolldown/binding-wasm32-wasi@1.0.0-beta.42':
@@ -21230,17 +21436,17 @@ snapshots:
       '@napi-rs/wasm-runtime': 1.0.6
     optional: true
 
-  '@rolldown/binding-wasm32-wasi@1.0.0-rc.13':
+  '@rolldown/binding-wasm32-wasi@1.0.0-rc.17':
     dependencies:
-      '@emnapi/core': 1.9.1
-      '@emnapi/runtime': 1.9.1
-      '@napi-rs/wasm-runtime': 1.1.2(@emnapi/core@1.9.1)(@emnapi/runtime@1.9.1)
+      '@emnapi/core': 1.10.0
+      '@emnapi/runtime': 1.10.0
+      '@napi-rs/wasm-runtime': 1.1.4(@emnapi/core@1.10.0)(@emnapi/runtime@1.10.0)
     optional: true
 
   '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.42':
     optional: true
 
-  '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.13':
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-rc.17':
     optional: true
 
   '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.42':
@@ -21249,12 +21455,12 @@ snapshots:
   '@rolldown/binding-win32-x64-msvc@1.0.0-beta.42':
     optional: true
 
-  '@rolldown/binding-win32-x64-msvc@1.0.0-rc.13':
+  '@rolldown/binding-win32-x64-msvc@1.0.0-rc.17':
     optional: true
 
   '@rolldown/pluginutils@1.0.0-beta.42': {}
 
-  '@rolldown/pluginutils@1.0.0-rc.13': {}
+  '@rolldown/pluginutils@1.0.0-rc.17': {}
 
   '@rollup/plugin-alias@5.1.1(rollup@4.40.2)':
     optionalDependencies:
@@ -22531,11 +22737,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.11)(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.11)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(mysql2@3.15.2)(rolldown@1.0.0-rc.13)(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.11)(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.11)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(lightningcss@1.32.0)(mysql2@3.15.2)(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.11)(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.11)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(mysql2@3.15.2)(rolldown@1.0.0-rc.13)(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.11)(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.11)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(mysql2@3.15.2)(rolldown@1.0.0-rc.13)(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.11)(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.11)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(lightningcss@1.32.0)(mysql2@3.15.2)(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.11)(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.11)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(lightningcss@1.32.0)(mysql2@3.15.2)(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
@@ -22546,8 +22752,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.11)(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.11)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(mysql2@3.15.2)(rolldown@1.0.0-rc.13)(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.11)(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.11)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(lightningcss@1.32.0)(mysql2@3.15.2)(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'
@@ -22676,12 +22882,12 @@ snapshots:
       react: 19.2.4
       react-dom: 19.2.4(react@19.2.4)
 
-  '@storybook/builder-vite@10.4.0-alpha.8(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.4.0-alpha.10(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.4.0-alpha.8(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.4.0-alpha.10(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
@@ -22708,14 +22914,14 @@ snapshots:
       - supports-color
       - utf-8-validate
 
-  '@storybook/csf-plugin@10.4.0-alpha.8(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.4.0-alpha.10(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))':
@@ -22930,6 +23136,75 @@ snapshots:
       valibot: 1.0.0-rc.1(typescript@5.8.3)
       zod: 3.25.76
 
+  '@tailwindcss/node@4.2.2':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.19.0
+      jiti: 2.6.1
+      lightningcss: 1.32.0
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.2.2
+
+  '@tailwindcss/oxide-android-arm64@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide@4.2.2':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.2.2
+      '@tailwindcss/oxide-darwin-arm64': 4.2.2
+      '@tailwindcss/oxide-darwin-x64': 4.2.2
+      '@tailwindcss/oxide-freebsd-x64': 4.2.2
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.2.2
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.2.2
+      '@tailwindcss/oxide-linux-arm64-musl': 4.2.2
+      '@tailwindcss/oxide-linux-x64-gnu': 4.2.2
+      '@tailwindcss/oxide-linux-x64-musl': 4.2.2
+      '@tailwindcss/oxide-wasm32-wasi': 4.2.2
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.2.2
+      '@tailwindcss/oxide-win32-x64-msvc': 4.2.2
+
+  '@tailwindcss/postcss@4.2.2':
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      '@tailwindcss/node': 4.2.2
+      '@tailwindcss/oxide': 4.2.2
+      postcss: 8.5.10
+      tailwindcss: 4.2.2
+
   '@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
@@ -22938,13 +23213,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.2.4)':
     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.2.4
 
   '@tanstack/devtools-event-bus@0.3.2':
     dependencies:
@@ -22974,7 +23249,7 @@ 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
@@ -22987,7 +23262,7 @@ snapshots:
       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
@@ -23059,7 +23334,7 @@ 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
@@ -23068,7 +23343,7 @@ snapshots:
       '@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)
+      '@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
@@ -24000,7 +24275,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.11)(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.11)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(mysql2@3.15.2)(rolldown@1.0.0-rc.13)(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.11)(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.11)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(lightningcss@1.32.0)(mysql2@3.15.2)(terser@5.44.0)(xml2js@0.6.2)(yaml@2.8.1))':
     dependencies:
       '@babel/parser': 7.27.2
       acorn: 8.14.1
@@ -24011,18 +24286,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.11)(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.11)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(mysql2@3.15.2)(rolldown@1.0.0-rc.13)(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.11)(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.11)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(lightningcss@1.32.0)(mysql2@3.15.2)(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.11)(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.11)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(mysql2@3.15.2)(rolldown@1.0.0-rc.13)(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.11)(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.11)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(lightningcss@1.32.0)(mysql2@3.15.2)(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.11)(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.11)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(mysql2@3.15.2)(rolldown@1.0.0-rc.13)(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.11)(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.11)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(lightningcss@1.32.0)(mysql2@3.15.2)(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.11)(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.11)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(mysql2@3.15.2)(rolldown@1.0.0-rc.13)(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.11)(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.11)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(lightningcss@1.32.0)(mysql2@3.15.2)(terser@5.44.0)(xml2js@0.6.2)(yaml@2.8.1)
 
   '@virtual-grid/core@2.0.1': {}
 
@@ -24040,14 +24315,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
 
@@ -24066,7 +24341,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
 
@@ -24092,21 +24367,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:
@@ -24164,7 +24439,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:
@@ -25023,6 +25298,16 @@ snapshots:
 
   asynckit@0.4.0: {}
 
+  autoprefixer@10.4.21(postcss@8.5.10):
+    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.10
+      postcss-value-parser: 4.2.0
+
   autoprefixer@10.4.21(postcss@8.5.3):
     dependencies:
       browserslist: 4.24.5
@@ -25984,8 +26269,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.10
+      postcss-values-parser: 6.0.2(postcss@8.5.10)
 
   detective-sass@5.0.3:
     dependencies:
@@ -26687,7 +26972,7 @@ snapshots:
       '@next/eslint-plugin-next': 16.2.1
       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)(eslint@9.30.1(jiti@2.6.1))
+      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-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))
@@ -26734,7 +27019,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-import-resolver-typescript@3.10.1(eslint-plugin-import@2.32.0)(eslint@9.30.1(jiti@2.6.1)):
+  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)):
     dependencies:
       '@nolyfill/is-core-module': 1.0.39
       debug: 4.4.3(supports-color@8.1.1)
@@ -26760,14 +27045,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.57.2(eslint@9.30.1(jiti@2.6.1))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.30.1(jiti@2.6.1)):
+  eslint-module-utils@2.12.1(@typescript-eslint/parser@8.57.2(eslint@9.30.1(jiti@2.6.1))(typescript@5.8.3))(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@9.30.1(jiti@2.6.1)):
     dependencies:
       debug: 3.2.7
     optionalDependencies:
       '@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-import-resolver-node: 0.3.9
-      eslint-import-resolver-typescript: 3.10.1(eslint-plugin-import@2.32.0)(eslint@9.30.1(jiti@2.6.1))
+      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))
     transitivePeerDependencies:
       - supports-color
 
@@ -26811,7 +27096,7 @@ snapshots:
       doctrine: 2.1.0
       eslint: 9.30.1(jiti@2.6.1)
       eslint-import-resolver-node: 0.3.9
-      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.57.2(eslint@9.30.1(jiti@2.6.1))(typescript@5.8.3))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.10.1)(eslint@9.30.1(jiti@2.6.1))
+      eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.57.2(eslint@9.30.1(jiti@2.6.1))(typescript@5.8.3))(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@9.30.1(jiti@2.6.1))
       hasown: 2.0.2
       is-core-module: 2.16.1
       is-glob: 4.0.3
@@ -26934,11 +27219,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.2.4):
     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.2.4
 
   eslint-plugin-turbo@1.13.4(eslint@8.57.1):
     dependencies:
@@ -28717,6 +29002,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: {}
@@ -29805,7 +30139,7 @@ snapshots:
       - '@babel/core'
       - babel-plugin-macros
 
-  nitropack@2.11.11(@planetscale/database@1.19.0)(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.11)(mysql2@3.15.2))(encoding@0.1.13)(mysql2@3.15.2)(rolldown@1.0.0-rc.13)(xml2js@0.6.2):
+  nitropack@2.11.11(@planetscale/database@1.19.0)(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.11)(mysql2@3.15.2))(encoding@0.1.13)(mysql2@3.15.2)(xml2js@0.6.2):
     dependencies:
       '@cloudflare/kv-asset-handler': 0.4.0
       '@netlify/functions': 3.1.5(encoding@0.1.13)(rollup@4.40.2)
@@ -29859,7 +30193,7 @@ snapshots:
       pretty-bytes: 6.1.1
       radix3: 1.1.2
       rollup: 4.40.2
-      rollup-plugin-visualizer: 5.14.0(rolldown@1.0.0-rc.13)(rollup@4.40.2)
+      rollup-plugin-visualizer: 5.14.0(rollup@4.40.2)
       scule: 1.3.0
       semver: 7.7.2
       serve-placeholder: 2.0.2
@@ -30506,20 +30840,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.10)(yaml@2.8.1):
     dependencies:
       lilconfig: 3.1.3
     optionalDependencies:
       jiti: 2.6.1
-      postcss: 8.5.3
+      postcss: 8.5.10
       yaml: 2.8.1
 
   postcss-nested@6.2.0(postcss@8.5.3):
@@ -30527,9 +30853,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.10):
     dependencies:
-      postcss: 8.5.3
+      postcss: 8.5.10
 
   postcss-selector-parser@6.0.10:
     dependencies:
@@ -30543,11 +30869,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.10):
     dependencies:
       color-name: 1.1.4
       is-url-superb: 4.0.0
-      postcss: 8.5.3
+      postcss: 8.5.10
       quote-unquote: 1.0.0
 
   postcss@8.4.31:
@@ -30556,6 +30882,12 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  postcss@8.5.10:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
   postcss@8.5.3:
     dependencies:
       nanoid: 3.3.11
@@ -31297,7 +31629,7 @@ snapshots:
     dependencies:
       glob: 7.2.3
 
-  rolldown-plugin-dts@0.16.11(rolldown@1.0.0-rc.13)(typescript@5.8.3):
+  rolldown-plugin-dts@0.16.11(rolldown@1.0.0-rc.17)(typescript@5.8.3):
     dependencies:
       '@babel/generator': 7.28.3
       '@babel/parser': 7.28.4
@@ -31308,7 +31640,7 @@ snapshots:
       dts-resolver: 2.1.2
       get-tsconfig: 4.11.0
       magic-string: 0.30.19
-      rolldown: 1.0.0-rc.13
+      rolldown: 1.0.0-rc.17
     optionalDependencies:
       typescript: 5.8.3
     transitivePeerDependencies:
@@ -31336,26 +31668,26 @@ snapshots:
       '@rolldown/binding-win32-ia32-msvc': 1.0.0-beta.42
       '@rolldown/binding-win32-x64-msvc': 1.0.0-beta.42
 
-  rolldown@1.0.0-rc.13:
+  rolldown@1.0.0-rc.17:
     dependencies:
-      '@oxc-project/types': 0.123.0
-      '@rolldown/pluginutils': 1.0.0-rc.13
+      '@oxc-project/types': 0.127.0
+      '@rolldown/pluginutils': 1.0.0-rc.17
     optionalDependencies:
-      '@rolldown/binding-android-arm64': 1.0.0-rc.13
-      '@rolldown/binding-darwin-arm64': 1.0.0-rc.13
-      '@rolldown/binding-darwin-x64': 1.0.0-rc.13
-      '@rolldown/binding-freebsd-x64': 1.0.0-rc.13
-      '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-rc.13
-      '@rolldown/binding-linux-arm64-gnu': 1.0.0-rc.13
-      '@rolldown/binding-linux-arm64-musl': 1.0.0-rc.13
-      '@rolldown/binding-linux-ppc64-gnu': 1.0.0-rc.13
-      '@rolldown/binding-linux-s390x-gnu': 1.0.0-rc.13
-      '@rolldown/binding-linux-x64-gnu': 1.0.0-rc.13
-      '@rolldown/binding-linux-x64-musl': 1.0.0-rc.13
-      '@rolldown/binding-openharmony-arm64': 1.0.0-rc.13
-      '@rolldown/binding-wasm32-wasi': 1.0.0-rc.13
-      '@rolldown/binding-win32-arm64-msvc': 1.0.0-rc.13
-      '@rolldown/binding-win32-x64-msvc': 1.0.0-rc.13
+      '@rolldown/binding-android-arm64': 1.0.0-rc.17
+      '@rolldown/binding-darwin-arm64': 1.0.0-rc.17
+      '@rolldown/binding-darwin-x64': 1.0.0-rc.17
+      '@rolldown/binding-freebsd-x64': 1.0.0-rc.17
+      '@rolldown/binding-linux-arm-gnueabihf': 1.0.0-rc.17
+      '@rolldown/binding-linux-arm64-gnu': 1.0.0-rc.17
+      '@rolldown/binding-linux-arm64-musl': 1.0.0-rc.17
+      '@rolldown/binding-linux-ppc64-gnu': 1.0.0-rc.17
+      '@rolldown/binding-linux-s390x-gnu': 1.0.0-rc.17
+      '@rolldown/binding-linux-x64-gnu': 1.0.0-rc.17
+      '@rolldown/binding-linux-x64-musl': 1.0.0-rc.17
+      '@rolldown/binding-openharmony-arm64': 1.0.0-rc.17
+      '@rolldown/binding-wasm32-wasi': 1.0.0-rc.17
+      '@rolldown/binding-win32-arm64-msvc': 1.0.0-rc.17
+      '@rolldown/binding-win32-x64-msvc': 1.0.0-rc.17
 
   rollup-plugin-inject@3.0.2:
     dependencies:
@@ -31367,14 +31699,13 @@ snapshots:
     dependencies:
       rollup-plugin-inject: 3.0.2
 
-  rollup-plugin-visualizer@5.14.0(rolldown@1.0.0-rc.13)(rollup@4.40.2):
+  rollup-plugin-visualizer@5.14.0(rollup@4.40.2):
     dependencies:
       open: 8.4.2
       picomatch: 4.0.3
       source-map: 0.7.4
       yargs: 17.7.2
     optionalDependencies:
-      rolldown: 1.0.0-rc.13
       rollup: 4.40.2
 
   rollup-pluginutils@2.8.2:
@@ -31998,16 +32329,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.4.0-alpha.8(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.4.0-alpha.10(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
@@ -32249,9 +32580,9 @@ 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@3.1.0(tailwindcss@4.2.4):
     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: 4.2.4
 
   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:
@@ -32261,10 +32592,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
@@ -32319,32 +32646,9 @@ 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.2.2: {}
+
+  tailwindcss@4.2.4: {}
 
   tapable@2.3.0: {}
 
@@ -32641,8 +32945,8 @@ snapshots:
       diff: 8.0.2
       empathic: 2.0.0
       hookable: 5.5.3
-      rolldown: 1.0.0-rc.13
-      rolldown-plugin-dts: 0.16.11(rolldown@1.0.0-rc.13)(typescript@5.8.3)
+      rolldown: 1.0.0-rc.17
+      rolldown-plugin-dts: 0.16.11(rolldown@1.0.0-rc.17)(typescript@5.8.3)
       semver: 7.7.2
       tinyexec: 1.0.1
       tinyglobby: 0.2.15
@@ -32663,7 +32967,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.10)(typescript@5.8.3)(yaml@2.8.1):
     dependencies:
       bundle-require: 5.1.0(esbuild@0.25.12)
       cac: 6.7.14
@@ -32674,7 +32978,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.10)(yaml@2.8.1)
       resolve-from: 5.0.0
       rollup: 4.40.2
       source-map: 0.8.0-beta.0
@@ -32684,7 +32988,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.10
       typescript: 5.8.3
     transitivePeerDependencies:
       - jiti
@@ -32732,6 +33036,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: {}
@@ -33047,11 +33353,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:
@@ -33131,7 +33437,7 @@ snapshots:
       lru-cache: 10.4.3
       node-fetch-native: 1.6.6
       ofetch: 1.4.1
-      ufo: 1.6.1
+      ufo: 1.6.3
     optionalDependencies:
       '@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.11)(mysql2@3.15.2))(mysql2@3.15.2)
@@ -33300,7 +33606,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.11)(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.11)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(mysql2@3.15.2)(rolldown@1.0.0-rc.13)(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.11)(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.11)(mysql2@3.15.2))(encoding@0.1.13)(ioredis@5.6.1)(jiti@2.6.1)(lightningcss@1.32.0)(mysql2@3.15.2)(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)
@@ -33322,7 +33628,7 @@ snapshots:
       hookable: 5.5.3
       http-proxy: 1.18.1
       micromatch: 4.0.8
-      nitropack: 2.11.11(@planetscale/database@1.19.0)(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.11)(mysql2@3.15.2))(encoding@0.1.13)(mysql2@3.15.2)(rolldown@1.0.0-rc.13)(xml2js@0.6.2)
+      nitropack: 2.11.11(@planetscale/database@1.19.0)(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.11)(mysql2@3.15.2))(encoding@0.1.13)(mysql2@3.15.2)(xml2js@0.6.2)
       node-fetch-native: 1.6.6
       path-to-regexp: 6.3.0
       pathe: 1.1.2
@@ -33334,7 +33640,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.11)(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'
@@ -33378,13 +33684,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
@@ -33396,13 +33702,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
@@ -33417,7 +33723,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
@@ -33425,51 +33731,51 @@ 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
@@ -33477,21 +33783,23 @@ snapshots:
     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.10
       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)
@@ -33503,10 +33811,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)
@@ -33518,17 +33827,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
@@ -33544,8 +33854,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
@@ -33561,11 +33871,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
@@ -33583,8 +33893,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

From 552bc43f52a79b426432b6002707f4c41b30fdea Mon Sep 17 00:00:00 2001
From: Ilya <47112191+ItsEeleeya@users.noreply.github.com>
Date: Wed, 29 Apr 2026 10:52:04 +0330
Subject: [PATCH 3/7] Use data- attributes instead of ui-

Also fix accidental renames inside strings
Update tailwind-scrollbar
Update Kobalte
Use Tailwind 3's default border color selection
Remove Kobalte's tailwind plugin as it's no longer needed with Tailwind 4
---
 apps/desktop/package.json                     |   2 +-
 apps/desktop/src/components/Toggle.tsx        |   4 +-
 .../(window-chrome)/settings/general.tsx      |  12 +-
 .../desktop/src/routes/editor/CaptionsTab.tsx |   8 +-
 .../src/routes/editor/ConfigSidebar.tsx       | 110 +++++++++---------
 .../desktop/src/routes/editor/KeyboardTab.tsx |   2 +-
 .../src/routes/editor/ShadowSettings.tsx      |   2 +-
 apps/desktop/src/routes/editor/context.ts     |   2 +-
 apps/desktop/src/routes/editor/ui.tsx         |  22 ++--
 .../screenshot-editor/AnnotationConfig.tsx    |   6 +-
 .../src/routes/screenshot-editor/Editor.tsx   |  22 ++--
 .../routes/screenshot-editor/LayersPanel.tsx  |   2 +-
 .../src/routes/screenshot-editor/Preview.tsx  |   6 +-
 .../src/routes/screenshot-editor/context.tsx  |  12 +-
 .../popovers/BackgroundSettingsPopover.tsx    |  16 +--
 .../popovers/BorderPopover.tsx                |   2 +-
 .../popovers/RoundingPopover.tsx              |   6 +-
 .../popovers/ShadowPopover.tsx                |   8 +-
 .../popovers/ShadowSettings.tsx               |   2 +-
 .../src/routes/screenshot-editor/ui.tsx       |  28 ++---
 .../screenshot-editor/useScreenshotExport.ts  |   2 +-
 apps/desktop/src/styles/theme.css             |  11 ++
 .../_components/video/media-player.tsx        |  46 ++++----
 packages/ui-solid/package.json                |   3 +-
 packages/ui-solid/src/Button.tsx              |   2 +-
 packages/ui-solid/src/SwitchTab.tsx           |   2 +-
 packages/ui-solid/src/main.css                |   4 +
 packages/ui/style/tailwind.config.js          |   1 -
 pnpm-lock.yaml                                |  69 ++++++++---
 29 files changed, 228 insertions(+), 186 deletions(-)

diff --git a/apps/desktop/package.json b/apps/desktop/package.json
index d77f526846..5a3388bc64 100644
--- a/apps/desktop/package.json
+++ b/apps/desktop/package.json
@@ -18,7 +18,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",
diff --git a/apps/desktop/src/components/Toggle.tsx b/apps/desktop/src/components/Toggle.tsx
index 36937a4afe..e2966b63e3 100644
--- a/apps/desktop/src/components/Toggle.tsx
+++ b/apps/desktop/src/components/Toggle.tsx
@@ -3,7 +3,7 @@ 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: {
@@ -19,7 +19,7 @@ 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: {
diff --git a/apps/desktop/src/routes/(window-chrome)/settings/general.tsx b/apps/desktop/src/routes/(window-chrome)/settings/general.tsx
index 3ee7e0f461..acb3735a51 100644
--- a/apps/desktop/src/routes/(window-chrome)/settings/general.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/settings/general.tsx
@@ -326,11 +326,11 @@ function Inner(props: { initialStore: GeneralSettingsStore | null }) {
 	// Helper function to render select dropdown for recording behaviors
 	const SelectSettingItem = <
 		T extends
-			| MainWindowRecordingStartBehaviour
-			| PostStudioRecordingBehaviour
-			| PostDeletionBehaviour
-			| StudioRecordingQuality
-			| number,
+		| MainWindowRecordingStartBehaviour
+		| PostStudioRecordingBehaviour
+		| PostDeletionBehaviour
+		| StudioRecordingQuality
+		| number,
 	>(props: {
 		label: string;
 		description: string;
@@ -836,7 +836,7 @@ function DefaultProjectNameCard(props: {
 						<p class="py-0.5 px-1">How to customize?</p>
 					</Collapsible.Trigger>
 
-					<Collapsible.Content class="opacity-0 transition animate-collapsible-up ui-expanded:animate-collapsible-down ui-expanded:opacity-100 text-xs text-gray-12 space-y-3 px-1 pb-2">
+					<Collapsible.Content class="opacity-0 transition animate-collapsible-up data-expanded:animate-collapsible-down data-expanded:opacity-100 text-xs text-gray-12 space-y-3 px-1 pb-2">
 						<p class="border-t pt-3">
 							Use placeholders in your template that will be automatically
 							filled in.
diff --git a/apps/desktop/src/routes/editor/CaptionsTab.tsx b/apps/desktop/src/routes/editor/CaptionsTab.tsx
index 16b3501927..de40d6acd3 100644
--- a/apps/desktop/src/routes/editor/CaptionsTab.tsx
+++ b/apps/desktop/src/routes/editor/CaptionsTab.tsx
@@ -138,7 +138,7 @@ export function CaptionsTab() {
 
 	const selectedCaptionIndex = () =>
 		editorState.timeline.selection?.type === "caption" &&
-		editorState.timeline.selection.indices.length === 1
+			editorState.timeline.selection.indices.length === 1
 			? editorState.timeline.selection.indices[0]
 			: -1;
 
@@ -537,7 +537,7 @@ export function CaptionsTab() {
 										</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>
@@ -594,7 +594,7 @@ export function CaptionsTab() {
 										}}
 									</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>
@@ -919,7 +919,7 @@ export function CaptionsTab() {
 										}
 									</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 32ac3f64ec..db6bfd0b75 100644
--- a/apps/desktop/src/routes/editor/ConfigSidebar.tsx
+++ b/apps/desktop/src/routes/editor/ConfigSidebar.tsx
@@ -213,7 +213,7 @@ const CAMERA_SHAPES = [
 
 const CORNER_STYLE_OPTIONS = [
 	{ name: "Squircle", value: "squircle" },
-	{ name: "Rounded", value: "rounded-sm" },
+	{ name: "Rounded", value: "rounded" },
 ] satisfies Array<{ name: string; value: CornerRoundingType }>;
 
 const BACKGROUND_THEMES = {
@@ -296,11 +296,11 @@ const findCursorPreset = (
 		(option) =>
 			option.preset &&
 			Math.abs(option.preset.tension - values.tension) <=
-				CURSOR_PRESET_TOLERANCE.tension &&
+			CURSOR_PRESET_TOLERANCE.tension &&
 			Math.abs(option.preset.mass - values.mass) <=
-				CURSOR_PRESET_TOLERANCE.mass &&
+			CURSOR_PRESET_TOLERANCE.mass &&
 			Math.abs(option.preset.friction - values.friction) <=
-				CURSOR_PRESET_TOLERANCE.friction,
+			CURSOR_PRESET_TOLERANCE.friction,
 	);
 
 	return preset?.value ?? null;
@@ -425,7 +425,7 @@ export function ConfigSidebar() {
 								"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
@@ -443,7 +443,7 @@ export function ConfigSidebar() {
 								class={cx(
 									"flex justify-center relative border-transparent border z-10 items-center rounded-md size-9 transition will-change-transform",
 									state.selectedTab !== item.id &&
-										"group-hover:border-gray-300 group-disabled:border-none",
+									"group-hover:border-gray-300 group-disabled:border-none",
 								)}
 							>
 								<Dynamic component={item.icon} />
@@ -520,7 +520,7 @@ export function ConfigSidebar() {
 											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)"
 												/>
 											)}
 										/>
@@ -617,11 +617,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}
@@ -701,11 +701,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}
@@ -732,7 +732,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">
@@ -1594,7 +1594,7 @@ function BackgroundConfig(props: { scrollRef: HTMLDivElement }) {
 							{(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-hidden 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}
 									>
@@ -1715,17 +1715,13 @@ function BackgroundConfig(props: { scrollRef: HTMLDivElement }) {
 								ref={setBackgroundRef}
 								class="flex overflow-x-auto overscroll-contain relative z-10 flex-row gap-2 items-center mb-3 text-xs hide-scroll"
 								style={{
-									"-webkit-mask-image": `linear-gradient(to right, transparent, black ${
-										scrollX() > 0 ? "24px" : "0"
-									}, black calc(100% - ${
-										reachedEndOfScroll() ? "0px" : "24px"
-									}), transparent)`,
-
-									"mask-image": `linear-gradient(to right, transparent, black ${
-										scrollX() > 0 ? "24px" : "0"
-									}, black calc(100% - ${
-										reachedEndOfScroll() ? "0px" : "24px"
-									}), transparent);`,
+									"-webkit-mask-image": `linear-gradient(to right, transparent, black ${scrollX() > 0 ? "24px" : "0"
+										}, black calc(100% - ${reachedEndOfScroll() ? "0px" : "24px"
+										}), transparent)`,
+
+									"mask-image": `linear-gradient(to right, transparent, black ${scrollX() > 0 ? "24px" : "0"
+										}, black calc(100% - ${reachedEndOfScroll() ? "0px" : "24px"
+										}), transparent);`,
 								}}
 							>
 								<For each={Object.entries(BACKGROUND_THEMES)}>
@@ -1738,7 +1734,7 @@ function BackgroundConfig(props: { scrollRef: HTMLDivElement }) {
 													)
 												}
 												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-hidden"
+												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>
@@ -1752,10 +1748,10 @@ function BackgroundConfig(props: { scrollRef: HTMLDivElement }) {
 							value={
 								project.background.source.type === "wallpaper"
 									? (wallpapers()?.find((w) =>
-											(
-												project.background.source as { path?: string }
-											).path?.includes(w.id),
-										)?.url ?? undefined)
+										(
+											project.background.source as { path?: string }
+										).path?.includes(w.id),
+									)?.url ?? undefined)
 									: undefined
 							}
 							onChange={(photoUrl) => {
@@ -1794,7 +1790,7 @@ function BackgroundConfig(props: { scrollRef: HTMLDivElement }) {
 											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"
@@ -1815,7 +1811,7 @@ function BackgroundConfig(props: { scrollRef: HTMLDivElement }) {
 														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"
@@ -1885,9 +1881,9 @@ function BackgroundConfig(props: { scrollRef: HTMLDivElement }) {
 								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",
@@ -2013,7 +2009,7 @@ function BackgroundConfig(props: { scrollRef: HTMLDivElement }) {
 			<Field name="Background Blur" icon={<IconCapBgBlur />}>
 				<Slider
 					value={[project.background.blur]}
-					onChange={(v) => setProject("background", "blur-sm", v[0])}
+					onChange={(v) => setProject("background", "blur", v[0])}
 					minValue={0}
 					maxValue={100}
 					step={0.1}
@@ -2095,7 +2091,7 @@ function BackgroundConfig(props: { scrollRef: HTMLDivElement }) {
 				}
 			/>
 			<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
@@ -2164,7 +2160,7 @@ function BackgroundConfig(props: { scrollRef: HTMLDivElement }) {
 					value={[project.background.shadow!]}
 					onChange={(v) => {
 						batch(() => {
-							setProject("background", "shadow-sm", v[0]);
+							setProject("background", "shadow", v[0]);
 							// Initialize advanced shadow settings if they don't exist and shadow is enabled
 							if (v[0] > 0 && !project.background.advancedShadow) {
 								setProject("background", "advancedShadow", {
@@ -2274,7 +2270,7 @@ function CameraConfig(props: { scrollRef: HTMLDivElement }) {
 										<RadioGroup.ItemInput class="peer" />
 										<RadioGroup.ItemControl
 											class={cx(
-												"cursor-pointer size-6 shrink-0 rounded-md bg-gray-5 absolute flex justify-center items-center ui-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",
+												"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"
@@ -2352,7 +2348,7 @@ function CameraConfig(props: { scrollRef: HTMLDivElement }) {
 									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]"
 										/>
 									)}
 								/>
@@ -2404,7 +2400,7 @@ function CameraConfig(props: { scrollRef: HTMLDivElement }) {
 									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)"
 										/>
 									)}
 								/>
@@ -2474,7 +2470,7 @@ function CameraConfig(props: { scrollRef: HTMLDivElement }) {
 				<div class="space-y-8">
 					<Slider
 						value={[project.camera.shadow!]}
-						onChange={(v) => setProject("camera", "shadow-sm", v[0])}
+						onChange={(v) => setProject("camera", "shadow", v[0])}
 						minValue={0}
 						maxValue={100}
 						step={0.1}
@@ -2529,7 +2525,7 @@ function CameraConfig(props: { scrollRef: HTMLDivElement }) {
               <Slider
                 disabled
                 value={[project.camera.shadow]}
-                onChange={(v) => setProject("camera", "shadow-sm", v[0])}
+                onChange={(v) => setProject("camera", "shadow", v[0])}
                 minValue={0}
                 maxValue={100}
               />
@@ -2584,7 +2580,7 @@ function CornerStyleSelect(props: {
 						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)"
 							/>
 						)}
 					/>
@@ -2788,7 +2784,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>
@@ -3144,11 +3140,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>
@@ -3253,8 +3249,7 @@ function ZoomSegmentPreview(props: {
 	createEffect(() => {
 		// TODO: make this not hardcoded
 		const path = convertFileSrc(
-			`${editorInstance.path}/content/segments/segment-${
-				clipSegment()?.recordingSegment ?? 0
+			`${editorInstance.path}/content/segments/segment-${clipSegment()?.recordingSegment ?? 0
 			}/display.mp4`,
 		);
 		video.src = path;
@@ -3407,14 +3402,14 @@ function ZoomSegmentConfig(props: {
 					<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-hidden 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-hidden 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>
@@ -3462,8 +3457,7 @@ function ZoomSegmentConfig(props: {
 								createEffect(() => {
 									const path = convertFileSrc(
 										// TODO: this shouldn't be so hardcoded
-										`${
-											editorInstance.path
+										`${editorInstance.path
 										}/content/segments/segment-${segmentIndex()}/display.mp4`,
 									);
 									video.src = path;
@@ -3593,7 +3587,7 @@ function ZoomSegmentConfig(props: {
 																x: Math.max(
 																	Math.min(
 																		(moveEvent.clientX - bounds.left) /
-																			bounds.width,
+																		bounds.width,
 																		1,
 																	),
 																	0,
@@ -3601,7 +3595,7 @@ function ZoomSegmentConfig(props: {
 																y: Math.max(
 																	Math.min(
 																		(moveEvent.clientY - bounds.top) /
-																			bounds.height,
+																		bounds.height,
 																		1,
 																	),
 																	0,
@@ -3734,7 +3728,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>
@@ -3892,19 +3886,19 @@ function SceneSegmentConfig(props: {
 						<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-hidden 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-hidden 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-hidden 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>
diff --git a/apps/desktop/src/routes/editor/KeyboardTab.tsx b/apps/desktop/src/routes/editor/KeyboardTab.tsx
index cd9546afe8..ad4dff5fad 100644
--- a/apps/desktop/src/routes/editor/KeyboardTab.tsx
+++ b/apps/desktop/src/routes/editor/KeyboardTab.tsx
@@ -321,7 +321,7 @@ export function KeyboardTab() {
 									}
 								</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/ShadowSettings.tsx b/apps/desktop/src/routes/editor/ShadowSettings.tsx
index 2633ce61c1..cdef3c41e6 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/context.ts b/apps/desktop/src/routes/editor/context.ts
index 2999b94777..24987bd5f1 100644
--- a/apps/desktop/src/routes/editor/context.ts
+++ b/apps/desktop/src/routes/editor/context.ts
@@ -132,7 +132,7 @@ export type CustomDomainResponse = {
 	domain_verified: boolean | null;
 };
 
-export type CornerRoundingType = "rounded-sm" | "squircle";
+export type CornerRoundingType = "rounded" | "squircle";
 
 type WithCornerStyle<T> = T & { roundingType: CornerRoundingType };
 
diff --git a/apps/desktop/src/routes/editor/ui.tsx b/apps/desktop/src/routes/editor/ui.tsx
index 845638caba..a969f115cf 100644
--- a/apps/desktop/src/routes/editor/ui.tsx
+++ b/apps/desktop/src/routes/editor/ui.tsx
@@ -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-hidden 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>
@@ -178,13 +178,13 @@ export const Dialog = {
 			<KDialog {...props}>
 				<KDialog.Portal>
 					{!props.hideOverlay && (
-						<KDialog.Overlay class="fixed inset-0 z-50 bg-black/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 ui-closed:animate-out ui-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-88 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 ui-closed:animate-out ui-closed:fade-out ui-closed:zoom-out-95",
 								(props.size ?? "sm") === "sm" ? "max-w-96" : "max-w-3xl",
 							)}
 						>
@@ -324,9 +324,9 @@ const editorButtonStyles = cva(
 		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 ui-pressed:bg-red-300 data-expanded:text-gray-1 ui-pressed:text-gray-1 outline-red-300",
 			},
 		},
 		defaultVariants: { variant: "primary" },
@@ -427,16 +427,16 @@ export const dropdownContainerClasses =
 	"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 ui-closed:animate-out ui-closed:fade-out ui-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 ui-closed:animate-out ui-closed:fade-out ui-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 ui-closed:animate-out ui-closed:fade-out ui-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 ui-closed:animate-out ui-closed:fade-out ui-closed:slide-out-to-top-1 origin-top-center";
 
 export function ComingSoonTooltip(
 	props: ComponentProps<typeof KTooltip> & { as?: ValidComponent },
@@ -448,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 ui-closed:animate-out ui-closed:slide-out-to-bottom-1 ui-closed:fade-out rounded-lg text-xs z-1000">
 					Coming Soon
 				</KTooltip.Content>
 			</KTooltip.Portal>
diff --git a/apps/desktop/src/routes/screenshot-editor/AnnotationConfig.tsx b/apps/desktop/src/routes/screenshot-editor/AnnotationConfig.tsx
index 4e4332a6ea..cfa13212cc 100644
--- a/apps/desktop/src/routes/screenshot-editor/AnnotationConfig.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/AnnotationConfig.tsx
@@ -33,7 +33,7 @@ export function AnnotationConfigBar() {
 			{(ann) => {
 				const type = () => ann().type;
 				const isMask = () => type() === "mask";
-				const maskType = () => ann().maskType ?? "blur-sm";
+				const maskType = () => ann().maskType ?? "blur";
 				const maskLevel = () => ann().maskLevel ?? 16;
 				return (
 					<div
@@ -101,11 +101,11 @@ export function AnnotationConfigBar() {
 											type="button"
 											class={cx(
 												"px-2.5 h-6 rounded-md text-xs font-medium transition-colors",
-												maskType() === "blur-sm"
+												maskType() === "blur"
 													? "bg-blue-9 text-white"
 													: "bg-gray-3 text-gray-11 hover:bg-gray-4",
 											)}
-											onClick={() => update("maskType", "blur-sm")}
+											onClick={() => update("maskType", "blur")}
 										>
 											Blur
 										</button>
diff --git a/apps/desktop/src/routes/screenshot-editor/Editor.tsx b/apps/desktop/src/routes/screenshot-editor/Editor.tsx
index 1454b4a0b5..d5c4b36b4d 100644
--- a/apps/desktop/src/routes/screenshot-editor/Editor.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/Editor.tsx
@@ -121,7 +121,7 @@ export function Editor() {
 						break;
 					case "h":
 						setActivePopover(
-							activePopover() === "shadow-sm" ? null : "shadow-sm",
+							activePopover() === "shadow" ? null : "shadow",
 						);
 						break;
 					case "e":
@@ -223,17 +223,17 @@ function Dialogs() {
 								const existingCrop = cropDialog().currentCrop;
 								const initialBounds = existingCrop
 									? {
-											x: existingCrop.position.x,
-											y: existingCrop.position.y,
-											width: existingCrop.size.x,
-											height: existingCrop.size.y,
-										}
+										x: existingCrop.position.x,
+										y: existingCrop.position.y,
+										width: existingCrop.size.x,
+										height: existingCrop.size.y,
+									}
 									: {
-											x: 0,
-											y: 0,
-											width: originalSize.x,
-											height: originalSize.y,
-										};
+										x: 0,
+										y: 0,
+										width: originalSize.x,
+										height: originalSize.y,
+									};
 
 								const previewSize = () => {
 									const srcW = originalSize.x;
diff --git a/apps/desktop/src/routes/screenshot-editor/LayersPanel.tsx b/apps/desktop/src/routes/screenshot-editor/LayersPanel.tsx
index dfddb25f00..36a83cbe69 100644
--- a/apps/desktop/src/routes/screenshot-editor/LayersPanel.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/LayersPanel.tsx
@@ -144,7 +144,7 @@ export function LayersPanel() {
 			onCleanup(() => {
 				window.removeEventListener("mousemove", handleDragMove);
 				window.removeEventListener("mouseup", handleDragEnd);
-				window.removeEventListener("blur-sm", handleWindowBlur);
+				window.removeEventListener("blur", handleWindowBlur);
 				document.documentElement.removeEventListener(
 					"mouseleave",
 					handleMouseLeave,
diff --git a/apps/desktop/src/routes/screenshot-editor/Preview.tsx b/apps/desktop/src/routes/screenshot-editor/Preview.tsx
index 1567bca084..4527786d8d 100644
--- a/apps/desktop/src/routes/screenshot-editor/Preview.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/Preview.tsx
@@ -228,13 +228,13 @@ export function Preview(props: { zoom: number; setZoom: (z: number) => void }) {
 					(pointerX -
 						(sizeData.width - sizeData.width * props.zoom) / 2 -
 						currentPan.x) /
-						currentScale;
+					currentScale;
 				const contentY =
 					boundsData.y +
 					(pointerY -
 						(sizeData.height - sizeData.height * props.zoom) / 2 -
 						currentPan.y) /
-						currentScale;
+					currentScale;
 
 				setPan({
 					x:
@@ -489,7 +489,7 @@ export function Preview(props: { zoom: number; setZoom: (z: number) => void }) {
 								if (regionWidth <= 0 || regionHeight <= 0) continue;
 
 								const level = Math.max(1, mask.maskLevel ?? 16);
-								const type = mask.maskType ?? "blur-sm";
+								const type = mask.maskType ?? "blur";
 
 								if (type === "pixelate") {
 									const blockSize = Math.max(2, Math.round(level));
diff --git a/apps/desktop/src/routes/screenshot-editor/context.tsx b/apps/desktop/src/routes/screenshot-editor/context.tsx
index 7e83c4b541..bc3934957b 100644
--- a/apps/desktop/src/routes/screenshot-editor/context.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/context.tsx
@@ -88,10 +88,10 @@ export type CurrentDialog =
 	| { type: "renamePreset"; presetIndex: number }
 	| { type: "deletePreset"; presetIndex: number }
 	| {
-			type: "crop";
-			originalSize: XY<number>;
-			currentCrop: { position: XY<number>; size: XY<number> } | null;
-	  };
+		type: "crop";
+		originalSize: XY<number>;
+		currentCrop: { position: XY<number>; size: XY<number> } | null;
+	};
 
 export type DialogState = { open: false } | ({ open: boolean } & CurrentDialog);
 
@@ -182,7 +182,7 @@ function createScreenshotEditorContext() {
 	);
 
 	const [activePopover, setActivePopover] = createSignal<
-		"background" | "padding" | "rounding" | "shadow-sm" | "border" | null
+		"background" | "padding" | "rounding" | "shadow" | "border" | null
 	>(null);
 
 	const [dialog, setDialog] = createSignal<DialogState>({
@@ -348,7 +348,7 @@ function createScreenshotEditorContext() {
 					existing.bitmap.close();
 				}
 				setLatestFrame({ width, height, bitmap, revision });
-			} catch {}
+			} catch { }
 		};
 
 		return instance;
diff --git a/apps/desktop/src/routes/screenshot-editor/popovers/BackgroundSettingsPopover.tsx b/apps/desktop/src/routes/screenshot-editor/popovers/BackgroundSettingsPopover.tsx
index 20f1cd8737..4362da7f20 100644
--- a/apps/desktop/src/routes/screenshot-editor/popovers/BackgroundSettingsPopover.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/popovers/BackgroundSettingsPopover.tsx
@@ -281,7 +281,7 @@ export function BackgroundSettingsPopover() {
 										{(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-hidden 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-hidden"
+														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>
@@ -321,10 +321,10 @@ export function BackgroundSettingsPopover() {
 										value={
 											project.background.source.type === "wallpaper"
 												? (wallpapers()?.find((w) =>
-														(
-															project.background.source as { path?: string }
-														).path?.includes(w.id),
-													)?.url ?? undefined)
+													(
+														project.background.source as { path?: string }
+													).path?.includes(w.id),
+												)?.url ?? undefined)
 												: undefined
 										}
 										onChange={(photoUrl) => {
@@ -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"
@@ -541,7 +541,7 @@ export function BackgroundSettingsPopover() {
 						<Field name="Background Blur" icon={<IconCapBgBlur />}>
 							<Slider
 								value={[project.background.blur]}
-								onChange={(v) => setProject("background", "blur-sm", v[0])}
+								onChange={(v) => setProject("background", "blur", v[0])}
 								minValue={0}
 								maxValue={100}
 								step={0.1}
diff --git a/apps/desktop/src/routes/screenshot-editor/popovers/BorderPopover.tsx b/apps/desktop/src/routes/screenshot-editor/popovers/BorderPopover.tsx
index 212a87c5de..9105980a9b 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 dbc72a6706..f86f91ed0b 100644
--- a/apps/desktop/src/routes/screenshot-editor/popovers/RoundingPopover.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/popovers/RoundingPopover.tsx
@@ -14,10 +14,10 @@ import {
 	topSlideAnimateClasses,
 } from "../ui";
 
-export type CornerRoundingType = "rounded-sm" | "squircle";
+export type CornerRoundingType = "rounded" | "squircle";
 const CORNER_STYLE_OPTIONS = [
 	{ name: "Squircle", value: "squircle" },
-	{ name: "Rounded", value: "rounded-sm" },
+	{ name: "Rounded", value: "rounded" },
 ] satisfies Array<{ name: string; value: CornerRoundingType }>;
 
 function hasNoVisibleBackground(source: {
@@ -151,7 +151,7 @@ function CornerStyleSelect(props: {
 						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/ShadowPopover.tsx b/apps/desktop/src/routes/screenshot-editor/popovers/ShadowPopover.tsx
index a903d84fd1..2d442fbd3e 100644
--- a/apps/desktop/src/routes/screenshot-editor/popovers/ShadowPopover.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/popovers/ShadowPopover.tsx
@@ -13,15 +13,15 @@ export function ShadowPopover() {
 	return (
 		<Popover
 			placement="bottom-start"
-			open={activePopover() === "shadow-sm"}
+			open={activePopover() === "shadow"}
 			onOpenChange={(open) => {
-				if (!open && activePopover() === "shadow-sm") setActivePopover(null);
+				if (!open && activePopover() === "shadow") setActivePopover(null);
 			}}
 		>
 			<Popover.Anchor
 				as={EditorButton}
 				onClick={() =>
-					setActivePopover(activePopover() === "shadow-sm" ? null : "shadow-sm")
+					setActivePopover(activePopover() === "shadow" ? null : "shadow")
 				}
 				leftIcon={<IconCapShadow class="size-4" />}
 				tooltipText="Shadow"
@@ -36,7 +36,7 @@ export function ShadowPopover() {
 								value={[project.background.shadow ?? 0]}
 								onChange={(v) => {
 									batch(() => {
-										setProject("background", "shadow-sm", v[0]);
+										setProject("background", "shadow", v[0]);
 										if (v[0] > 0 && !project.background.advancedShadow) {
 											setProject("background", "advancedShadow", {
 												size: 50,
diff --git a/apps/desktop/src/routes/screenshot-editor/popovers/ShadowSettings.tsx b/apps/desktop/src/routes/screenshot-editor/popovers/ShadowSettings.tsx
index e2eca87f22..2392ebb95b 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/ui.tsx b/apps/desktop/src/routes/screenshot-editor/ui.tsx
index ef464d2586..eb9da13e76 100644
--- a/apps/desktop/src/routes/screenshot-editor/ui.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/ui.tsx
@@ -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-hidden 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>
@@ -170,13 +170,13 @@ export const Dialog = {
 			<KDialog {...props}>
 				<KDialog.Portal>
 					{!props.hideOverlay && (
-						<KDialog.Overlay class="fixed inset-0 z-50 bg-black/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-88 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",
 							)}
 						>
@@ -270,7 +270,7 @@ export function MenuItem<T extends ValidComponent = "button">(
 			class={cx(
 				props.class,
 				"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 ui-highlighted:bg-gray-3 ui-highlighted:text-gray-12",
+				"text-[0.875rem] text-gray-10 disabled:text-gray-10 data-highlighted:bg-gray-3 data-highlighted:text-gray-12",
 			)}
 		/>
 	);
@@ -316,9 +316,9 @@ const editorButtonStyles = cva(
 		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" },
@@ -329,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 group-hover:enabled: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" },
@@ -421,16 +421,16 @@ export const dropdownContainerClasses =
 	"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 },
@@ -442,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/screenshot-editor/useScreenshotExport.ts b/apps/desktop/src/routes/screenshot-editor/useScreenshotExport.ts
index f512096f92..28c4c8ad7f 100644
--- a/apps/desktop/src/routes/screenshot-editor/useScreenshotExport.ts
+++ b/apps/desktop/src/routes/screenshot-editor/useScreenshotExport.ts
@@ -146,7 +146,7 @@ export function useScreenshotExport() {
 			if (regionWidth <= 0 || regionHeight <= 0) continue;
 
 			const level = Math.max(1, ann.maskLevel ?? 16);
-			const type = ann.maskType ?? "blur-sm";
+			const type = ann.maskType ?? "blur";
 
 			if (type === "pixelate") {
 				const blockSize = Math.max(2, Math.round(level));
diff --git a/apps/desktop/src/styles/theme.css b/apps/desktop/src/styles/theme.css
index 2add6f246f..fcd3ddc514 100644
--- a/apps/desktop/src/styles/theme.css
+++ b/apps/desktop/src/styles/theme.css
@@ -404,3 +404,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/web/app/s/[videoId]/_components/video/media-player.tsx b/apps/web/app/s/[videoId]/_components/video/media-player.tsx
index 0bd0124112..b3ba470ce6 100644
--- a/apps/web/app/s/[videoId]/_components/video/media-player.tsx
+++ b/apps/web/app/s/[videoId]/_components/video/media-player.tsx
@@ -138,7 +138,7 @@ function useMediaSelector<T>(selector: (state: Partial<MediaState>) => T): T {
 
 	const subscribe = React.useCallback(
 		(cb: () => void) => {
-			if (!store?.subscribe) return () => {};
+			if (!store?.subscribe) return () => { };
 			return store.subscribe(cb);
 		},
 		[store],
@@ -1347,7 +1347,7 @@ function MediaPlayerControlsOverlay(props: MediaPlayerControlsOverlayProps) {
 	);
 }
 
-interface MediaPlayerPlayProps extends React.ComponentProps<typeof Button> {}
+interface MediaPlayerPlayProps extends React.ComponentProps<typeof Button> { }
 
 function MediaPlayerPlay(props: MediaPlayerPlayProps) {
 	const { asChild, children, className, disabled, ...playButtonProps } = props;
@@ -1540,8 +1540,8 @@ interface MediaPlayerSeekProps
 	tooltipSideOffset?: number;
 	tooltipCollisionBoundary?: Element | Element[];
 	tooltipCollisionPadding?:
-		| number
-		| Partial<Record<"top" | "right" | "bottom" | "left", number>>;
+	| number
+	| Partial<Record<"top" | "right" | "bottom" | "left", number>>;
 }
 
 function MediaPlayerSeek(props: MediaPlayerSeekProps) {
@@ -1669,11 +1669,11 @@ function MediaPlayerSeek(props: MediaPlayerSeekProps) {
 		const padding =
 			typeof tooltipCollisionPadding === "number"
 				? {
-						top: tooltipCollisionPadding,
-						right: tooltipCollisionPadding,
-						bottom: tooltipCollisionPadding,
-						left: tooltipCollisionPadding,
-					}
+					top: tooltipCollisionPadding,
+					right: tooltipCollisionPadding,
+					bottom: tooltipCollisionPadding,
+					left: tooltipCollisionPadding,
+				}
 				: { top: 0, right: 0, bottom: 0, left: 0, ...tooltipCollisionPadding };
 
 		const boundaries = tooltipCollisionBoundary
@@ -2599,9 +2599,9 @@ function MediaPlayerTime(props: MediaPlayerTimeProps) {
 
 interface MediaPlayerPlaybackSpeedProps
 	extends React.ComponentProps<typeof DropdownMenuTrigger>,
-		React.ComponentProps<typeof Button>,
-		Omit<React.ComponentProps<typeof DropdownMenu>, "dir">,
-		Pick<React.ComponentProps<typeof DropdownMenuContent>, "sideOffset"> {
+	React.ComponentProps<typeof Button>,
+	Omit<React.ComponentProps<typeof DropdownMenu>, "dir">,
+	Pick<React.ComponentProps<typeof DropdownMenuContent>, "sideOffset"> {
 	speeds?: number[];
 }
 
@@ -2689,7 +2689,7 @@ function MediaPlayerPlaybackSpeed(props: MediaPlayerPlaybackSpeedProps) {
 	);
 }
 
-interface MediaPlayerLoopProps extends React.ComponentProps<typeof Button> {}
+interface MediaPlayerLoopProps extends React.ComponentProps<typeof Button> { }
 
 function MediaPlayerLoop(props: MediaPlayerLoopProps) {
 	const { children, className, disabled, ...loopProps } = props;
@@ -2765,7 +2765,7 @@ function MediaPlayerLoop(props: MediaPlayerLoopProps) {
 }
 
 interface MediaPlayerFullscreenProps
-	extends React.ComponentProps<typeof Button> {}
+	extends React.ComponentProps<typeof Button> { }
 
 function MediaPlayerFullscreen(props: MediaPlayerFullscreenProps) {
 	const { children, className, disabled, ...fullscreenProps } = props;
@@ -3046,7 +3046,7 @@ function EnhancedAudioSync({
 				audio.pause();
 				return;
 			}
-			audio.play().catch(() => {});
+			audio.play().catch(() => { });
 		};
 
 		const handlePause = () => {
@@ -3097,7 +3097,7 @@ function EnhancedAudioSync({
 				if (enhancedAudioMuted) {
 					audio.pause();
 				} else {
-					audio.play().catch(() => {});
+					audio.play().catch(() => { });
 				}
 			}
 
@@ -3124,7 +3124,7 @@ function EnhancedAudioSync({
 }
 
 interface MediaPlayerDownloadProps
-	extends React.ComponentProps<typeof Button> {}
+	extends React.ComponentProps<typeof Button> { }
 
 function MediaPlayerDownload(props: MediaPlayerDownloadProps) {
 	const { children, className, disabled, ...downloadProps } = props;
@@ -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"
@@ -3422,8 +3422,8 @@ function MediaPlayerSettings(props: MediaPlayerSettingsProps) {
 										: captionLanguage === "original"
 											? "Original"
 											: (availableCaptions.find(
-													(c) => c.code === captionLanguage,
-												)?.name ?? captionLanguage)}
+												(c) => c.code === captionLanguage,
+											)?.name ?? captionLanguage)}
 							</Badge>
 						</DropdownMenuSubTrigger>
 						<DropdownMenuSubContent className="max-h-64 overflow-y-auto">
@@ -3477,7 +3477,7 @@ function MediaPlayerPortal(props: MediaPlayerPortalProps) {
 
 interface MediaPlayerTooltipProps
 	extends React.ComponentProps<typeof Tooltip>,
-		Pick<React.ComponentProps<typeof TooltipContent>, "sideOffset"> {
+	Pick<React.ComponentProps<typeof TooltipContent>, "sideOffset"> {
 	tooltip?: string;
 	shortcut?: string | string[];
 }
diff --git a/packages/ui-solid/package.json b/packages/ui-solid/package.json
index 548ebe38dd..92c6d6006f 100644
--- a/packages/ui-solid/package.json
+++ b/packages/ui-solid/package.json
@@ -19,12 +19,11 @@
 	"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.21",
 		"postcss": "^8.5.10",
 		"storybook-solidjs": "^1.0.0-beta.2",
-		"tailwind-scrollbar": "^3.1.0",
+		"tailwind-scrollbar": "^4.0.2",
 		"tailwindcss": "^4.2.2",
 		"tw-animate-css": "^1.4.0",
 		"unplugin-auto-import": "^0.18.2",
diff --git a/packages/ui-solid/src/Button.tsx b/packages/ui-solid/src/Button.tsx
index 3c27a407ef..385d8b87a0 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-solid 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",
diff --git a/packages/ui-solid/src/SwitchTab.tsx b/packages/ui-solid/src/SwitchTab.tsx
index 9a753a1387..86feaf2b0b 100644
--- a/packages/ui-solid/src/SwitchTab.tsx
+++ b/packages/ui-solid/src/SwitchTab.tsx
@@ -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-hidden 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 76c68daeb1..4792b8cb2e 100644
--- a/packages/ui-solid/src/main.css
+++ b/packages/ui-solid/src/main.css
@@ -141,17 +141,21 @@
 	@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);
 		}
 	}
 }
diff --git a/packages/ui/style/tailwind.config.js b/packages/ui/style/tailwind.config.js
index d91300eff7..0d2173c0a6 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 b2853f2fc4..53455c22f1 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
@@ -245,7 +245,7 @@ importers:
         version: 7.0.3
       tailwind-scrollbar:
         specifier: ^3.1.0
-        version: 3.1.0(tailwindcss@4.2.4)
+        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
@@ -1256,9 +1256,6 @@ importers:
       '@iconify/json':
         specifier: ^2.2.239
         version: 2.2.336
-      '@kobalte/tailwindcss':
-        specifier: ^0.9.0
-        version: 0.9.0(tailwindcss@4.2.4)
       '@tailwindcss/typography':
         specifier: ^0.5.9
         version: 0.5.16(tailwindcss@4.2.4)
@@ -1272,8 +1269,8 @@ importers:
         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@4.2.4)
+        specifier: ^4.0.2
+        version: 4.0.2(react@19.2.4)(tailwindcss@4.2.4)
       tailwindcss:
         specifier: ^4.2.2
         version: 4.2.4
@@ -4051,6 +4048,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:
@@ -8015,6 +8017,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==}
 
@@ -13642,6 +13647,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'}
@@ -14921,6 +14931,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:
@@ -19219,6 +19235,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
@@ -19235,10 +19263,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@4.2.4)':
-    dependencies:
-      tailwindcss: 4.2.4
-
   '@kobalte/utils@0.9.1(solid-js@1.9.6)':
     dependencies:
       '@solid-primitives/event-listener': 2.4.1(solid-js@1.9.6)
@@ -22656,7 +22680,7 @@ snapshots:
 
   '@solid-primitives/props@3.2.1(solid-js@1.9.6)':
     dependencies:
-      '@solid-primitives/utils': 6.3.1(solid-js@1.9.6)
+      '@solid-primitives/utils': 6.3.2(solid-js@1.9.6)
       solid-js: 1.9.6
 
   '@solid-primitives/refs@1.1.1(solid-js@1.9.6)':
@@ -23853,6 +23877,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': {}
@@ -26973,7 +26999,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))
@@ -27030,7 +27056,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
 
@@ -27085,7 +27111,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
@@ -30951,6 +30977,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: {}
@@ -32580,9 +32612,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@4.2.4):
+  tailwind-scrollbar@4.0.2(react@19.2.4)(tailwindcss@4.2.4):
     dependencies:
+      prism-react-renderer: 2.4.1(react@19.2.4)
       tailwindcss: 4.2.4
+    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:

From f8838e2a22eaa4bc583ff46b1fbbff8eaafaa95c Mon Sep 17 00:00:00 2001
From: Ilya <47112191+ItsEeleeya@users.noreply.github.com>
Date: Wed, 29 Apr 2026 11:02:55 +0330
Subject: [PATCH 4/7] Use antialiased font smoothing

---
 packages/ui-solid/src/main.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/ui-solid/src/main.css b/packages/ui-solid/src/main.css
index 4792b8cb2e..0aedf20b8d 100644
--- a/packages/ui-solid/src/main.css
+++ b/packages/ui-solid/src/main.css
@@ -160,6 +160,10 @@
 	}
 }
 
+:root {
+	@apply antialiased;
+}
+
 body {
 	font-family: "Geist Sans", sans-serif;
 }

From 3ab5cda431df296b30e408124e585cf12e63fcdc Mon Sep 17 00:00:00 2001
From: Ilya <47112191+ItsEeleeya@users.noreply.github.com>
Date: Wed, 29 Apr 2026 11:09:19 +0330
Subject: [PATCH 5/7] Update ConfigSidebar.tsx

---
 apps/desktop/src/routes/editor/ConfigSidebar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/desktop/src/routes/editor/ConfigSidebar.tsx b/apps/desktop/src/routes/editor/ConfigSidebar.tsx
index db6bfd0b75..ceac100bda 100644
--- a/apps/desktop/src/routes/editor/ConfigSidebar.tsx
+++ b/apps/desktop/src/routes/editor/ConfigSidebar.tsx
@@ -2341,14 +2341,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 data-expanded:rotate-180 text-[--gray-500]"
+											class="size-4 shrink-0 transform transition-transform data-expanded:rotate-180 text-(--gray-500)"
 										/>
 									)}
 								/>

From da9ce1234fe130d3f24c31bbd6a46320008e41c7 Mon Sep 17 00:00:00 2001
From: Ilya <47112191+ItsEeleeya@users.noreply.github.com>
Date: Fri, 1 May 2026 13:02:53 +0330
Subject: [PATCH 6/7] Fix for remaining `ui-` classes to `data-`

---
 .../(window-chrome)/settings/general.tsx      |  2 +-
 apps/desktop/src/routes/camera.tsx            | 28 +++++++++----------
 apps/desktop/src/routes/editor/ui.tsx         | 22 +++++++--------
 .../CameraPreviewWindow.tsx                   | 16 +++++------
 4 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/apps/desktop/src/routes/(window-chrome)/settings/general.tsx b/apps/desktop/src/routes/(window-chrome)/settings/general.tsx
index 39067ab42d..61496f6e13 100644
--- a/apps/desktop/src/routes/(window-chrome)/settings/general.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/settings/general.tsx
@@ -1041,7 +1041,7 @@ 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>
 
diff --git a/apps/desktop/src/routes/camera.tsx b/apps/desktop/src/routes/camera.tsx
index f738c30a5d..e09082ceab 100644
--- a/apps/desktop/src/routes/camera.tsx
+++ b/apps/desktop/src/routes/camera.tsx
@@ -213,11 +213,11 @@ function NativeCameraPreviewPage(props: { disconnected: Accessor<boolean> }) {
 			isCameraOnlyMode()
 				? getCameraOnlyInitialState()
 				: {
-						size: CAMERA_DEFAULT_SIZE,
-						shape: "round",
-						mirrored: false,
-						backgroundBlur: "off" as BackgroundBlurMode,
-					},
+					size: CAMERA_DEFAULT_SIZE,
+					shape: "round",
+					mirrored: false,
+					backgroundBlur: "off" as BackgroundBlurMode,
+				},
 		),
 		{ name: "cameraWindowState" },
 	);
@@ -246,7 +246,7 @@ function NativeCameraPreviewPage(props: { disconnected: Accessor<boolean> }) {
 		const handleVisibilityChange = () => {
 			if (!document.hidden) {
 				setTimeout(() => {
-					commands.refreshCameraFeed().catch(() => {});
+					commands.refreshCameraFeed().catch(() => { });
 				}, 500);
 			}
 		};
@@ -407,7 +407,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}
 		/>
 	);
@@ -570,11 +570,11 @@ function LegacyCameraPreviewPage(props: { disconnected: Accessor<boolean> }) {
 			isCameraOnlyMode()
 				? getCameraOnlyInitialState()
 				: {
-						size: CAMERA_DEFAULT_SIZE,
-						shape: "round",
-						mirrored: false,
-						backgroundBlur: "off" as BackgroundBlurMode,
-					},
+					size: CAMERA_DEFAULT_SIZE,
+					shape: "round",
+					mirrored: false,
+					backgroundBlur: "off" as BackgroundBlurMode,
+				},
 		),
 		{ name: "cameraWindowState" },
 	);
@@ -757,7 +757,7 @@ function LegacyCameraPreviewPage(props: { disconnected: Accessor<boolean> }) {
 			setIsWindowVisible(!document.hidden);
 			if (!document.hidden) {
 				lastFrameTime = Date.now();
-				commands.refreshCameraFeed().catch(() => {});
+				commands.refreshCameraFeed().catch(() => { });
 			}
 		};
 		document.addEventListener("visibilitychange", handleVisibilityChange);
@@ -896,7 +896,7 @@ function LegacyCameraPreviewPage(props: { disconnected: Accessor<boolean> }) {
 				Date.now() - lastFrameTime > STALL_TIMEOUT_MS
 			) {
 				lastFrameTime = Date.now();
-				commands.refreshCameraFeed().catch(() => {});
+				commands.refreshCameraFeed().catch(() => { });
 				if (ws) ws.close();
 				ws = createSocket();
 			}
diff --git a/apps/desktop/src/routes/editor/ui.tsx b/apps/desktop/src/routes/editor/ui.tsx
index a969f115cf..eddde42a06 100644
--- a/apps/desktop/src/routes/editor/ui.tsx
+++ b/apps/desktop/src/routes/editor/ui.tsx
@@ -178,13 +178,13 @@ export const Dialog = {
 			<KDialog {...props}>
 				<KDialog.Portal>
 					{!props.hideOverlay && (
-						<KDialog.Overlay class="fixed inset-0 z-50 bg-black/80 data-expanded:animate-in data-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-88 data-expanded:animate-in data-expanded:fade-in data-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",
 							)}
 						>
@@ -278,7 +278,7 @@ export function MenuItem<T extends ValidComponent = "button">(
 			class={cx(
 				props.class,
 				"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 ui-highlighted:bg-gray-3 ui-highlighted:text-gray-12",
+				"text-[0.875rem] text-gray-10 disabled:text-gray-10 data-highlighted:bg-gray-3 data-highlighted:text-gray-12",
 			)}
 		/>
 	);
@@ -326,7 +326,7 @@ const editorButtonStyles = cva(
 				primary:
 					"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:not-data-pressed:bg-gray-3 data-expanded:bg-red-300 ui-pressed:bg-red-300 data-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" },
@@ -337,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 group-hover:enabled: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" },
@@ -427,16 +427,16 @@ export const dropdownContainerClasses =
 	"z-60 flex flex-col rounded-xl border border-gray-3 bg-gray-1 shadow-s overflow-y-hidden outline-hidden";
 
 export const topLeftAnimateClasses =
-	"data-expanded:animate-in data-expanded:fade-in data-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 =
-	"data-expanded:animate-in data-expanded:fade-in data-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 =
-	"data-expanded:animate-in data-expanded:fade-in data-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 =
-	"data-expanded:animate-in data-expanded:fade-in data-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 },
@@ -448,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 data-expanded:animate-in data-expanded:slide-in-from-bottom-1 data-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/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 85ce0c5eab..44a432bc2b 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
@@ -438,9 +438,9 @@ export const CameraPreviewWindow = ({
 	const totalHeight = metrics.height + BAR_HEIGHT;
 	const videoStyle = videoDimensions
 		? {
-				transform: mirrored ? "scaleX(-1)" : "scaleX(1)",
-				opacity: isInPictureInPicture ? 0 : 1,
-			}
+			transform: mirrored ? "scaleX(-1)" : "scaleX(1)",
+			opacity: isInPictureInPicture ? 0 : 1,
+		}
 		: { opacity: 0 };
 	// Keep the video node rendered even in PiP mode so the track keeps producing frames.
 
@@ -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",
 									)}
 								>

From 542216f4eece825306fd215215fc4f165884a168 Mon Sep 17 00:00:00 2001
From: Ilya <47112191+ItsEeleeya@users.noreply.github.com>
Date: Fri, 1 May 2026 13:03:45 +0330
Subject: [PATCH 7/7] format

---
 .../(window-chrome)/settings/general.tsx      | 16 +++----
 apps/desktop/src/routes/camera.tsx            | 26 +++++------
 .../desktop/src/routes/editor/CaptionsTab.tsx |  2 +-
 .../src/routes/editor/ConfigSidebar.tsx       | 44 +++++++++++--------
 .../src/routes/in-progress-recording.tsx      | 21 ++++-----
 .../src/routes/screenshot-editor/Editor.tsx   | 24 +++++-----
 .../src/routes/screenshot-editor/Preview.tsx  |  4 +-
 .../src/routes/screenshot-editor/context.tsx  | 10 ++---
 .../popovers/BackgroundSettingsPopover.tsx    |  8 ++--
 9 files changed, 80 insertions(+), 75 deletions(-)

diff --git a/apps/desktop/src/routes/(window-chrome)/settings/general.tsx b/apps/desktop/src/routes/(window-chrome)/settings/general.tsx
index 61496f6e13..7cc3878e79 100644
--- a/apps/desktop/src/routes/(window-chrome)/settings/general.tsx
+++ b/apps/desktop/src/routes/(window-chrome)/settings/general.tsx
@@ -182,7 +182,7 @@ function Inner(props: { initialStore: GeneralSettingsStore | null }) {
 	const scrollToSection = (section: string) => {
 		try {
 			localStorage.removeItem("cap.settings.scrollToSection");
-		} catch { }
+		} catch {}
 		const attempt = (remaining: number) => {
 			const target = document.getElementById(`settings-section-${section}`);
 			const container = scrollContainerRef;
@@ -209,7 +209,7 @@ function Inner(props: { initialStore: GeneralSettingsStore | null }) {
 		let pending: string | null = null;
 		try {
 			pending = localStorage.getItem("cap.settings.scrollToSection");
-		} catch { }
+		} catch {}
 		if (pending) {
 			scrollToSection(pending);
 		}
@@ -218,7 +218,7 @@ function Inner(props: { initialStore: GeneralSettingsStore | null }) {
 			scrollToSection(event.payload.section);
 		});
 		onCleanup(() => {
-			unlisten.then((cb) => cb()).catch(() => { });
+			unlisten.then((cb) => cb()).catch(() => {});
 		});
 	});
 
@@ -349,11 +349,11 @@ function Inner(props: { initialStore: GeneralSettingsStore | null }) {
 	// Helper function to render select dropdown for recording behaviors
 	const SelectSettingItem = <
 		T extends
-		| MainWindowRecordingStartBehaviour
-		| PostStudioRecordingBehaviour
-		| PostDeletionBehaviour
-		| StudioRecordingQuality
-		| number,
+			| MainWindowRecordingStartBehaviour
+			| PostStudioRecordingBehaviour
+			| PostDeletionBehaviour
+			| StudioRecordingQuality
+			| number,
 	>(props: {
 		label: string;
 		description: string;
diff --git a/apps/desktop/src/routes/camera.tsx b/apps/desktop/src/routes/camera.tsx
index e09082ceab..cbff806377 100644
--- a/apps/desktop/src/routes/camera.tsx
+++ b/apps/desktop/src/routes/camera.tsx
@@ -213,11 +213,11 @@ function NativeCameraPreviewPage(props: { disconnected: Accessor<boolean> }) {
 			isCameraOnlyMode()
 				? getCameraOnlyInitialState()
 				: {
-					size: CAMERA_DEFAULT_SIZE,
-					shape: "round",
-					mirrored: false,
-					backgroundBlur: "off" as BackgroundBlurMode,
-				},
+						size: CAMERA_DEFAULT_SIZE,
+						shape: "round",
+						mirrored: false,
+						backgroundBlur: "off" as BackgroundBlurMode,
+					},
 		),
 		{ name: "cameraWindowState" },
 	);
@@ -246,7 +246,7 @@ function NativeCameraPreviewPage(props: { disconnected: Accessor<boolean> }) {
 		const handleVisibilityChange = () => {
 			if (!document.hidden) {
 				setTimeout(() => {
-					commands.refreshCameraFeed().catch(() => { });
+					commands.refreshCameraFeed().catch(() => {});
 				}, 500);
 			}
 		};
@@ -570,11 +570,11 @@ function LegacyCameraPreviewPage(props: { disconnected: Accessor<boolean> }) {
 			isCameraOnlyMode()
 				? getCameraOnlyInitialState()
 				: {
-					size: CAMERA_DEFAULT_SIZE,
-					shape: "round",
-					mirrored: false,
-					backgroundBlur: "off" as BackgroundBlurMode,
-				},
+						size: CAMERA_DEFAULT_SIZE,
+						shape: "round",
+						mirrored: false,
+						backgroundBlur: "off" as BackgroundBlurMode,
+					},
 		),
 		{ name: "cameraWindowState" },
 	);
@@ -757,7 +757,7 @@ function LegacyCameraPreviewPage(props: { disconnected: Accessor<boolean> }) {
 			setIsWindowVisible(!document.hidden);
 			if (!document.hidden) {
 				lastFrameTime = Date.now();
-				commands.refreshCameraFeed().catch(() => { });
+				commands.refreshCameraFeed().catch(() => {});
 			}
 		};
 		document.addEventListener("visibilitychange", handleVisibilityChange);
@@ -896,7 +896,7 @@ function LegacyCameraPreviewPage(props: { disconnected: Accessor<boolean> }) {
 				Date.now() - lastFrameTime > STALL_TIMEOUT_MS
 			) {
 				lastFrameTime = Date.now();
-				commands.refreshCameraFeed().catch(() => { });
+				commands.refreshCameraFeed().catch(() => {});
 				if (ws) ws.close();
 				ws = createSocket();
 			}
diff --git a/apps/desktop/src/routes/editor/CaptionsTab.tsx b/apps/desktop/src/routes/editor/CaptionsTab.tsx
index de40d6acd3..73d88b786e 100644
--- a/apps/desktop/src/routes/editor/CaptionsTab.tsx
+++ b/apps/desktop/src/routes/editor/CaptionsTab.tsx
@@ -138,7 +138,7 @@ export function CaptionsTab() {
 
 	const selectedCaptionIndex = () =>
 		editorState.timeline.selection?.type === "caption" &&
-			editorState.timeline.selection.indices.length === 1
+		editorState.timeline.selection.indices.length === 1
 			? editorState.timeline.selection.indices[0]
 			: -1;
 
diff --git a/apps/desktop/src/routes/editor/ConfigSidebar.tsx b/apps/desktop/src/routes/editor/ConfigSidebar.tsx
index eab539341d..c8780f55d4 100644
--- a/apps/desktop/src/routes/editor/ConfigSidebar.tsx
+++ b/apps/desktop/src/routes/editor/ConfigSidebar.tsx
@@ -305,11 +305,11 @@ const findCursorPreset = (
 		(option) =>
 			option.preset &&
 			Math.abs(option.preset.tension - values.tension) <=
-			CURSOR_PRESET_TOLERANCE.tension &&
+				CURSOR_PRESET_TOLERANCE.tension &&
 			Math.abs(option.preset.mass - values.mass) <=
-			CURSOR_PRESET_TOLERANCE.mass &&
+				CURSOR_PRESET_TOLERANCE.mass &&
 			Math.abs(option.preset.friction - values.friction) <=
-			CURSOR_PRESET_TOLERANCE.friction,
+				CURSOR_PRESET_TOLERANCE.friction,
 	);
 
 	return preset?.value ?? null;
@@ -450,7 +450,7 @@ export function ConfigSidebar() {
 								class={cx(
 									"flex justify-center relative border-transparent border z-10 items-center rounded-md size-9 transition will-change-transform",
 									state.selectedTab !== item.id &&
-									"group-hover:border-gray-300 group-disabled:border-none",
+										"group-hover:border-gray-300 group-disabled:border-none",
 								)}
 							>
 								<Dynamic component={item.icon} />
@@ -1737,13 +1737,17 @@ function BackgroundConfig(props: { scrollRef: HTMLDivElement }) {
 								ref={setBackgroundRef}
 								class="flex overflow-x-auto overscroll-contain relative z-10 flex-row gap-2 items-center mb-3 text-xs hide-scroll"
 								style={{
-									"-webkit-mask-image": `linear-gradient(to right, transparent, black ${scrollX() > 0 ? "24px" : "0"
-										}, black calc(100% - ${reachedEndOfScroll() ? "0px" : "24px"
-										}), transparent)`,
-
-									"mask-image": `linear-gradient(to right, transparent, black ${scrollX() > 0 ? "24px" : "0"
-										}, black calc(100% - ${reachedEndOfScroll() ? "0px" : "24px"
-										}), transparent);`,
+									"-webkit-mask-image": `linear-gradient(to right, transparent, black ${
+										scrollX() > 0 ? "24px" : "0"
+									}, black calc(100% - ${
+										reachedEndOfScroll() ? "0px" : "24px"
+									}), transparent)`,
+
+									"mask-image": `linear-gradient(to right, transparent, black ${
+										scrollX() > 0 ? "24px" : "0"
+									}, black calc(100% - ${
+										reachedEndOfScroll() ? "0px" : "24px"
+									}), transparent);`,
 								}}
 							>
 								<For each={Object.entries(BACKGROUND_THEMES)}>
@@ -1770,10 +1774,10 @@ function BackgroundConfig(props: { scrollRef: HTMLDivElement }) {
 							value={
 								project.background.source.type === "wallpaper"
 									? (wallpapers()?.find((w) =>
-										(
-											project.background.source as { path?: string }
-										).path?.includes(w.id),
-									)?.url ?? undefined)
+											(
+												project.background.source as { path?: string }
+											).path?.includes(w.id),
+										)?.url ?? undefined)
 									: undefined
 							}
 							onChange={(photoUrl) => {
@@ -3281,7 +3285,8 @@ function ZoomSegmentPreview(props: {
 	createEffect(() => {
 		// TODO: make this not hardcoded
 		const path = convertFileSrc(
-			`${editorInstance.path}/content/segments/segment-${clipSegment()?.recordingSegment ?? 0
+			`${editorInstance.path}/content/segments/segment-${
+				clipSegment()?.recordingSegment ?? 0
 			}/display.mp4`,
 		);
 		video.src = path;
@@ -3484,7 +3489,8 @@ function ZoomSegmentConfig(props: {
 								createEffect(() => {
 									const path = convertFileSrc(
 										// TODO: this shouldn't be so hardcoded
-										`${editorInstance.path
+										`${
+											editorInstance.path
 										}/content/segments/segment-${segmentIndex()}/display.mp4`,
 									);
 									video.src = path;
@@ -3614,7 +3620,7 @@ function ZoomSegmentConfig(props: {
 																x: Math.max(
 																	Math.min(
 																		(moveEvent.clientX - bounds.left) /
-																		bounds.width,
+																			bounds.width,
 																		1,
 																	),
 																	0,
@@ -3622,7 +3628,7 @@ function ZoomSegmentConfig(props: {
 																y: Math.max(
 																	Math.min(
 																		(moveEvent.clientY - bounds.top) /
-																		bounds.height,
+																			bounds.height,
 																		1,
 																	),
 																	0,
diff --git a/apps/desktop/src/routes/in-progress-recording.tsx b/apps/desktop/src/routes/in-progress-recording.tsx
index 1ac98309c0..2962877633 100644
--- a/apps/desktop/src/routes/in-progress-recording.tsx
+++ b/apps/desktop/src/routes/in-progress-recording.tsx
@@ -75,10 +75,10 @@ function InProgressRecordingInner() {
 		window.COUNTDOWN === 0
 			? { variant: "initializing" }
 			: {
-				variant: "countdown",
-				from: window.COUNTDOWN,
-				current: window.COUNTDOWN,
-			},
+					variant: "countdown",
+					from: window.COUNTDOWN,
+					current: window.COUNTDOWN,
+				},
 	);
 	const [start, setStart] = createSignal(Date.now());
 	const [time, setTime] = createSignal(Date.now());
@@ -163,9 +163,9 @@ function InProgressRecordingInner() {
 	const [pauseResumes, setPauseResumes] = createStore<
 		| []
 		| [
-			...Array<{ pause: number; resume?: number }>,
-			{ pause: number; resume?: number },
-		]
+				...Array<{ pause: number; resume?: number }>,
+				{ pause: number; resume?: number },
+		  ]
 	>([]);
 
 	createEffect(() => {
@@ -777,8 +777,9 @@ function InProgressRecordingInner() {
 														<div
 															class="absolute inset-0 bg-blue-9 transition-transform duration-100"
 															style={{
-																transform: `translateX(-${(1 - audioLevel()) * 100
-																	}%)`,
+																transform: `translateX(-${
+																	(1 - audioLevel()) * 100
+																}%)`,
 															}}
 														/>
 													</div>
@@ -829,7 +830,7 @@ function InProgressRecordingInner() {
 												class={cx(
 													"text-red-10 hover:bg-red-3/40",
 													issuePanelVisible() &&
-													"bg-red-3/40 ring-1 ring-red-8",
+														"bg-red-3/40 ring-1 ring-red-8",
 												)}
 												onClick={() => toggleIssuePanel()}
 												title={issueMessages().join(", ")}
diff --git a/apps/desktop/src/routes/screenshot-editor/Editor.tsx b/apps/desktop/src/routes/screenshot-editor/Editor.tsx
index d5c4b36b4d..dcf15b801a 100644
--- a/apps/desktop/src/routes/screenshot-editor/Editor.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/Editor.tsx
@@ -120,9 +120,7 @@ export function Editor() {
 						setLayersPanelOpen(!layersPanelOpen());
 						break;
 					case "h":
-						setActivePopover(
-							activePopover() === "shadow" ? null : "shadow",
-						);
+						setActivePopover(activePopover() === "shadow" ? null : "shadow");
 						break;
 					case "e":
 						setActivePopover(activePopover() === "border" ? null : "border");
@@ -223,17 +221,17 @@ function Dialogs() {
 								const existingCrop = cropDialog().currentCrop;
 								const initialBounds = existingCrop
 									? {
-										x: existingCrop.position.x,
-										y: existingCrop.position.y,
-										width: existingCrop.size.x,
-										height: existingCrop.size.y,
-									}
+											x: existingCrop.position.x,
+											y: existingCrop.position.y,
+											width: existingCrop.size.x,
+											height: existingCrop.size.y,
+										}
 									: {
-										x: 0,
-										y: 0,
-										width: originalSize.x,
-										height: originalSize.y,
-									};
+											x: 0,
+											y: 0,
+											width: originalSize.x,
+											height: originalSize.y,
+										};
 
 								const previewSize = () => {
 									const srcW = originalSize.x;
diff --git a/apps/desktop/src/routes/screenshot-editor/Preview.tsx b/apps/desktop/src/routes/screenshot-editor/Preview.tsx
index 4527786d8d..f856a3eb80 100644
--- a/apps/desktop/src/routes/screenshot-editor/Preview.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/Preview.tsx
@@ -228,13 +228,13 @@ export function Preview(props: { zoom: number; setZoom: (z: number) => void }) {
 					(pointerX -
 						(sizeData.width - sizeData.width * props.zoom) / 2 -
 						currentPan.x) /
-					currentScale;
+						currentScale;
 				const contentY =
 					boundsData.y +
 					(pointerY -
 						(sizeData.height - sizeData.height * props.zoom) / 2 -
 						currentPan.y) /
-					currentScale;
+						currentScale;
 
 				setPan({
 					x:
diff --git a/apps/desktop/src/routes/screenshot-editor/context.tsx b/apps/desktop/src/routes/screenshot-editor/context.tsx
index bc3934957b..f3dc0e13b1 100644
--- a/apps/desktop/src/routes/screenshot-editor/context.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/context.tsx
@@ -88,10 +88,10 @@ export type CurrentDialog =
 	| { type: "renamePreset"; presetIndex: number }
 	| { type: "deletePreset"; presetIndex: number }
 	| {
-		type: "crop";
-		originalSize: XY<number>;
-		currentCrop: { position: XY<number>; size: XY<number> } | null;
-	};
+			type: "crop";
+			originalSize: XY<number>;
+			currentCrop: { position: XY<number>; size: XY<number> } | null;
+	  };
 
 export type DialogState = { open: false } | ({ open: boolean } & CurrentDialog);
 
@@ -348,7 +348,7 @@ function createScreenshotEditorContext() {
 					existing.bitmap.close();
 				}
 				setLatestFrame({ width, height, bitmap, revision });
-			} catch { }
+			} catch {}
 		};
 
 		return instance;
diff --git a/apps/desktop/src/routes/screenshot-editor/popovers/BackgroundSettingsPopover.tsx b/apps/desktop/src/routes/screenshot-editor/popovers/BackgroundSettingsPopover.tsx
index 4362da7f20..bcfc855385 100644
--- a/apps/desktop/src/routes/screenshot-editor/popovers/BackgroundSettingsPopover.tsx
+++ b/apps/desktop/src/routes/screenshot-editor/popovers/BackgroundSettingsPopover.tsx
@@ -321,10 +321,10 @@ export function BackgroundSettingsPopover() {
 										value={
 											project.background.source.type === "wallpaper"
 												? (wallpapers()?.find((w) =>
-													(
-														project.background.source as { path?: string }
-													).path?.includes(w.id),
-												)?.url ?? undefined)
+														(
+															project.background.source as { path?: string }
+														).path?.includes(w.id),
+													)?.url ?? undefined)
 												: undefined
 										}
 										onChange={(photoUrl) => {