diff --git a/app/components/aggregation-filter.tsx b/app/components/aggregation-filter.tsx
index 2e8ecf575..7cd9cfad4 100644
--- a/app/components/aggregation-filter.tsx
+++ b/app/components/aggregation-filter.tsx
@@ -57,10 +57,10 @@ export function AggregationFilter() {
 		>
 			<SelectPrimitive.Trigger
 				className={
-					'flex h-10 items-center justify-between bg-transparent px-3 py-2 text-sm placeholder:text-slate-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:placeholder:text-slate-400'
+					'flex h-10 items-center justify-between bg-transparent px-3 py-2 text-sm placeholder:text-slate-500 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:placeholder:text-slate-400'
 				}
 			>
-				<div className="inline-flex h-8 items-center justify-center whitespace-nowrap rounded-md border border-slate-200 bg-white text-sm font-medium ring-offset-white transition-colors hover:bg-slate-100 hover:text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50 dark:focus-visible:ring-slate-300">
+				<div className="inline-flex h-8 items-center justify-center whitespace-nowrap rounded-md border border-slate-200 bg-white text-sm font-medium ring-offset-white transition-colors hover:bg-slate-100 hover:text-slate-900 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50 dark:focus-visible:ring-slate-300">
 					<Filter className="mr-2 h-4 w-4" />
 					Aggregation
 					<>
diff --git a/app/components/color-picker.tsx b/app/components/color-picker.tsx
index 7b62dfa3f..b11ad6a66 100644
--- a/app/components/color-picker.tsx
+++ b/app/components/color-picker.tsx
@@ -67,7 +67,7 @@ export function ColorPicker({
 				<Input
 					id="custom"
 					value={colorPickerState.color}
-					className="flex-grow"
+					className="grow"
 					onChange={(e) => {
 						handleColorChange(e.target.value, colorPickerState.index)
 						setColorPickerState({ ...colorPickerState, color: e.target.value })
diff --git a/app/components/daterange-filter.tsx b/app/components/daterange-filter.tsx
index 40f4f159d..584190efa 100644
--- a/app/components/daterange-filter.tsx
+++ b/app/components/daterange-filter.tsx
@@ -156,7 +156,7 @@ export function DateRangeFilter() {
 					</div>
 					<div className="flex w-full items-center justify-evenly py-2 dark:bg-zinc-800 dark:text-zinc-200 dark:opacity-95">
 						<PopoverClose
-							className="inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+							className="inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
 							onClick={() => {
 								void submit(searchParams)
 							}}
diff --git a/app/components/device-detail/device-detail-box.tsx b/app/components/device-detail/device-detail-box.tsx
index 4075da110..e7f57bd3d 100644
--- a/app/components/device-detail/device-detail-box.tsx
+++ b/app/components/device-detail/device-detail-box.tsx
@@ -198,11 +198,11 @@ export default function DeviceDetailBox() {
 						<div
 							id="deviceDetailBox"
 							className={
-								'shadow-zinc-800/5 ring-zinc-900/5 relative float-left flex h-full max-h-[calc(100vh-4rem)] w-auto flex-col gap-4 rounded-xl bg-white px-4 py-2 text-sm font-medium text-zinc-800 shadow-lg ring-1 dark:bg-zinc-800 dark:text-zinc-200 dark:opacity-95 dark:ring-white dark:backdrop-blur-sm md:max-h-[calc(100vh-8rem)]'
+								'shadow-zinc-800/5 ring-zinc-900/5 relative float-left flex h-full max-h-[calc(100vh-4rem)] w-auto flex-col gap-4 rounded-xl bg-white px-4 py-2 text-sm font-medium text-zinc-800 shadow-lg ring-1 dark:bg-zinc-800 dark:text-zinc-200 dark:opacity-95 dark:ring-white dark:backdrop-blur-xs md:max-h-[calc(100vh-8rem)]'
 							}
 						>
 							{navigation.state === 'loading' && (
-								<div className="bg-white/30 dark:bg-zinc-800/30 absolute inset-0 z-50 flex items-center justify-center backdrop-blur-sm">
+								<div className="bg-white/30 dark:bg-zinc-800/30 absolute inset-0 z-50 flex items-center justify-center backdrop-blur-xs">
 									<Spinner />
 								</div>
 							)}
@@ -507,7 +507,7 @@ export default function DeviceDetailBox() {
 																						className="ml-2 h-4 w-4 shrink-0 text-muted-foreground"
 																					/>
 																				</CardHeader>
-																				<CardContent className="flex-grow">
+																				<CardContent className="grow">
 																					<div className="flex flex-row items-center space-x-2">
 																						<div className="text-2xl font-bold">
 																							{sensor.lastMeasurement?.value ??
@@ -584,7 +584,7 @@ export default function DeviceDetailBox() {
 																						className="ml-2 h-4 w-4 shrink-0 text-muted-foreground"
 																					/>
 																				</CardHeader>
-																				<CardContent className="flex-grow">
+																				<CardContent className="grow">
 																					<div className="flex flex-row items-center space-x-2">
 																						<div className="text-2xl font-bold">
 																							{sensor.lastMeasurement?.value ??
diff --git a/app/components/device-detail/entry-logs.tsx b/app/components/device-detail/entry-logs.tsx
index 098923d73..223da5e22 100644
--- a/app/components/device-detail/entry-logs.tsx
+++ b/app/components/device-detail/entry-logs.tsx
@@ -47,7 +47,7 @@ export default function EntryLogs({
 						<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full border-4 border-muted-foreground text-muted-foreground">
 							<Activity className="h-5 w-5" />
 						</div>
-						<div className="flex-grow">
+						<div className="grow">
 							<p className="mb-2 text-sm font-medium">
 								{entryLogs[entryLogs.length - 1].content}
 							</p>
@@ -99,7 +99,7 @@ export default function EntryLogs({
 					<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary">
 						<Activity className="h-5 w-5 text-primary-foreground" />
 					</div>
-					<div className="flex-grow">
+					<div className="grow">
 						<p className="mb-2 text-sm font-medium">{entryLogs[0].content}</p>
 						<div className="flex items-center text-xs text-muted-foreground">
 							<Clock className="mr-1 h-3 w-3" />
@@ -144,7 +144,7 @@ function LogList({ entryLogs = [] }: { entryLogs: LogEntry[] }) {
 						<div className="z-10 flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary">
 							<Activity className="h-5 w-5 text-primary-foreground" />
 						</div>
-						<div className="flex-grow">
+						<div className="grow">
 							<Card className="p-4 shadow-lg transition-all duration-300 hover:-translate-y-1 hover:shadow-xl">
 								<p className="mb-2 text-sm font-medium">{log.content}</p>
 								<div className="flex items-center text-xs text-muted-foreground">
@@ -155,7 +155,7 @@ function LogList({ entryLogs = [] }: { entryLogs: LogEntry[] }) {
 						</div>
 						{index < entryLogs.length - 1 && (
 							<div
-								className="absolute bottom-0 left-5 top-10 w-[1px] bg-border"
+								className="absolute bottom-0 left-5 top-10 w-px bg-border"
 								aria-hidden="true"
 							/>
 						)}
diff --git a/app/components/device-detail/graph.tsx b/app/components/device-detail/graph.tsx
index 6b4474017..66e862132 100644
--- a/app/components/device-detail/graph.tsx
+++ b/app/components/device-detail/graph.tsx
@@ -534,7 +534,7 @@ export default function Graph({
 			>
 				<div
 					ref={nodeRef}
-					className="shadow-zinc-800/5 ring-zinc-900/5 absolute bottom-6 left-4 right-4 top-14 z-40 flex flex-col gap-2 rounded-xl bg-white px-4 pt-2 text-sm font-medium text-zinc-800 shadow-lg ring-1 dark:bg-zinc-800 dark:text-zinc-200 dark:opacity-95 dark:ring-white dark:backdrop-blur-sm md:bottom-[30px] md:left-auto md:right-4 md:top-auto md:h-[35%] md:max-h-[35%] md:w-[60vw]"
+					className="shadow-zinc-800/5 ring-zinc-900/5 absolute bottom-6 left-4 right-4 top-14 z-40 flex flex-col gap-2 rounded-xl bg-white px-4 pt-2 text-sm font-medium text-zinc-800 shadow-lg ring-1 dark:bg-zinc-800 dark:text-zinc-200 dark:opacity-95 dark:ring-white dark:backdrop-blur-xs md:bottom-[30px] md:left-auto md:right-4 md:top-auto md:h-[35%] md:max-h-[35%] md:w-[60vw]"
 				>
 					{navigation.state === 'loading' && (
 						<div className="bg-gray-100/30 absolute inset-0 z-50 flex items-center justify-center backdrop-blur-[1.5px]">
@@ -545,7 +545,7 @@ export default function Graph({
 						className="flex cursor-move flex-wrap items-center justify-between gap-2 px-2 pt-2"
 						id="graphTop"
 					>
-						<div className="flex flex-grow flex-wrap items-center gap-2">
+						<div className="flex grow flex-wrap items-center gap-2">
 							<DateRangeFilter />
 							<AggregationFilter />
 						</div>
diff --git a/app/components/device-detail/share-link.tsx b/app/components/device-detail/share-link.tsx
index bd4d5077a..aa2eb512c 100644
--- a/app/components/device-detail/share-link.tsx
+++ b/app/components/device-detail/share-link.tsx
@@ -75,7 +75,7 @@ export default function ShareLink() {
 			<div className="mt-4 flex items-center justify-between gap-2 py-2">
 				<Link className="mr-2 h-5 w-5" />
 				<Input
-					className="w-full bg-transparent outline-none"
+					className="w-full bg-transparent outline-hidden"
 					type="text"
 					disabled={true}
 					defaultValue={window.location.href}
@@ -88,7 +88,7 @@ export default function ShareLink() {
 							description: 'Go ahead and share your link! 🎉',
 						})
 					}}
-					className="inline-flex h-9 transform items-center justify-center rounded-md bg-primary px-2 py-2 text-sm font-medium text-primary-foreground shadow transition-transform active:scale-75"
+					className="inline-flex h-9 transform items-center justify-center rounded-md bg-primary px-2 py-2 text-sm font-medium text-primary-foreground shadow-sm transition-transform active:scale-75"
 				>
 					<Copy className="mr-2 h-5 w-5" />
 					Copy
diff --git a/app/components/device/new/device-info.tsx b/app/components/device/new/device-info.tsx
index a56cac9b0..6fc1a7b48 100644
--- a/app/components/device/new/device-info.tsx
+++ b/app/components/device/new/device-info.tsx
@@ -159,7 +159,7 @@ export function DeviceSelectionStep() {
 											<X className="h-4 w-4" />
 										</Button>
 									)}
-									<h3 className="break-words text-lg font-semibold">
+									<h3 className="wrap-break-word text-lg font-semibold">
 										{device.name}
 									</h3>
 									{device.name === 'senseBox:Home' &&
diff --git a/app/components/device/new/general-info.tsx b/app/components/device/new/general-info.tsx
index 7967c0b27..136558ac4 100644
--- a/app/components/device/new/general-info.tsx
+++ b/app/components/device/new/general-info.tsx
@@ -185,7 +185,7 @@ export function GeneralInfoStep() {
 						</TooltipProvider>
 					</div>
 					{temporaryExpirationDate && (
-						<div className="flex flex-grow items-center space-x-2">
+						<div className="flex grow items-center space-x-2">
 							<Label
 								htmlFor="temporaryExpirationDate"
 								className="whitespace-nowrap text-sm font-medium"
@@ -199,7 +199,7 @@ export function GeneralInfoStep() {
 								onChange={(e) => handleExpirationDateChange(e.target.value)}
 								min={new Date().toISOString().split('T')[0]}
 								max={maxExpirationDate.toISOString().split('T')[0]}
-								className="flex-grow rounded-md border p-2"
+								className="grow rounded-md border p-2"
 							/>
 						</div>
 					)}
diff --git a/app/components/device/new/location-info.tsx b/app/components/device/new/location-info.tsx
index 6d2ce5823..315f7102c 100644
--- a/app/components/device/new/location-info.tsx
+++ b/app/components/device/new/location-info.tsx
@@ -96,7 +96,7 @@ export function LocationStep() {
 
 	return (
 		<div className="flex h-full w-full flex-col">
-			<div className="flex-grow">
+			<div className="grow">
 				<Map
 					ref={mapRef}
 					initialViewState={{
diff --git a/app/components/device/new/summary-info.tsx b/app/components/device/new/summary-info.tsx
index 567f1769b..ab5d3007e 100644
--- a/app/components/device/new/summary-info.tsx
+++ b/app/components/device/new/summary-info.tsx
@@ -63,10 +63,10 @@ export function SummaryInfo() {
 		<div className="space-y-6">
 			<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
 				{sections.map((section, index) => (
-					<Card key={index} className="overflow-hidden border border-border bg-card shadow-sm">
+					<Card key={index} className="overflow-hidden border border-border bg-card shadow-xs">
 						<CardContent className="p-0">
 							<div className="flex items-center gap-3 border-b bg-muted/40 px-4 py-3">
-								<div className="flex h-9 w-9 items-center justify-center rounded-md bg-background text-muted-foreground shadow-sm">
+								<div className="flex h-9 w-9 items-center justify-center rounded-md bg-background text-muted-foreground shadow-xs">
 									{section.icon}
 								</div>
 								<h4 className="text-sm font-semibold tracking-tight text-foreground">
diff --git a/app/components/error-message.tsx b/app/components/error-message.tsx
index 168780f5f..9c034779c 100644
--- a/app/components/error-message.tsx
+++ b/app/components/error-message.tsx
@@ -157,7 +157,7 @@ export default function ErrorMessage() {
 	return (
 		<div className="flex min-h-[400px] w-full items-center justify-center p-4">
 			<Card
-				className={`w-full max-w-md bg-gradient-to-br ${getGradient()} shadow-2xl border-2 border-white/60 dark:border-zinc-700/80 backdrop-blur-sm ring-1 ring-black/10`}
+				className={`w-full max-w-md bg-linear-to-br ${getGradient()} shadow-2xl border-2 border-white/60 dark:border-zinc-700/80 backdrop-blur-xs ring-1 ring-black/10`}
 			>
 				<CardHeader className="text-center">
 					<div className="mx-auto mb-4 flex h-20 w-20 items-center justify-center rounded-full bg-white shadow-md dark:bg-zinc-800">
diff --git a/app/components/header/menu/index.tsx b/app/components/header/menu/index.tsx
index 2442107c8..2545b39e5 100644
--- a/app/components/header/menu/index.tsx
+++ b/app/components/header/menu/index.tsx
@@ -96,7 +96,7 @@ export default function Menu() {
 					{user && (
 						<DropdownMenuGroup>
 							{navigation.state === 'loading' && (
-								<div className="bg-white/30 dark:bg-zinc-800/30 absolute inset-0 z-50 flex items-center justify-center backdrop-blur-sm">
+								<div className="bg-white/30 dark:bg-zinc-800/30 absolute inset-0 z-50 flex items-center justify-center backdrop-blur-xs">
 									<Spinner />
 								</div>
 							)}
@@ -196,7 +196,7 @@ export default function Menu() {
 									onClick={() => setOpen(false)}
 									className="w-full cursor-pointer"
 								>
-									<button className="relative flex w-full select-none items-center rounded-sm text-sm outline-none transition-colors hover:bg-accent focus:bg-accent focus:text-accent-foreground">
+									<button className="relative flex w-full select-none items-center rounded-sm text-sm outline-hidden transition-colors hover:bg-accent focus:bg-accent focus:text-accent-foreground">
 										<LogIn className="mr-2 h-5 w-5" />
 										<span className="text-light-green">{t('login_label')}</span>
 									</button>
@@ -216,7 +216,7 @@ export default function Menu() {
 									<input type="hidden" name="redirectTo" value={redirectTo} />
 									<button
 										type="submit"
-										className="relative flex w-full select-none items-center rounded-sm text-sm outline-none transition-colors hover:bg-accent focus:bg-accent focus:text-accent-foreground"
+										className="relative flex w-full select-none items-center rounded-sm text-sm outline-hidden transition-colors hover:bg-accent focus:bg-accent focus:text-accent-foreground"
 										disabled={isLoggingOut}
 									>
 										<LogOut className="mr-2 h-5 w-5" />
diff --git a/app/components/header/nav-bar/filter-options/filter-options.tsx b/app/components/header/nav-bar/filter-options/filter-options.tsx
index 874850095..7aadf7582 100644
--- a/app/components/header/nav-bar/filter-options/filter-options.tsx
+++ b/app/components/header/nav-bar/filter-options/filter-options.tsx
@@ -61,7 +61,7 @@ export default function FilterOptions() {
 	return (
 		<div className="flex h-full flex-1 flex-col justify-around gap-2 dark:text-zinc-200">
 			{navigation.state === 'loading' && (
-				<div className="bg-white/30 dark:bg-zinc-800/30 absolute inset-0 z-50 flex items-center justify-center backdrop-blur-sm">
+				<div className="bg-white/30 dark:bg-zinc-800/30 absolute inset-0 z-50 flex items-center justify-center backdrop-blur-xs">
 					<Spinner />
 				</div>
 			)}
@@ -151,7 +151,7 @@ export default function FilterOptions() {
 			<div className="flex justify-end gap-4 align-bottom">
 				<Button
 					variant="outline"
-					className="rounded-[5px] border-[1px] border-[#e2e8f0] px-2 py-[1px] text-base"
+					className="rounded-[5px] border border-slate-200 px-2 py-px text-base"
 					onClick={handleResetFilters}
 				>
 					<span className="flex items-center">
@@ -159,7 +159,7 @@ export default function FilterOptions() {
 					</span>
 				</Button>
 				<Button
-					className="rounded-[5px] px-2 py-[1px] text-base"
+					className="rounded-[5px] px-2 py-px text-base"
 					onClick={handleApplyChanges}
 					disabled={!isChanged}
 				>
diff --git a/app/components/header/nav-bar/filter-options/filter-tags.tsx b/app/components/header/nav-bar/filter-options/filter-tags.tsx
index ca42bfb30..a322372af 100644
--- a/app/components/header/nav-bar/filter-options/filter-tags.tsx
+++ b/app/components/header/nav-bar/filter-options/filter-tags.tsx
@@ -60,7 +60,7 @@ export default function FilterTags() {
 	return (
 		<div className="flex h-full flex-1 flex-col justify-around gap-2 dark:text-zinc-200">
 			{navigation.state === 'loading' && (
-				<div className="bg-white/30 dark:bg-zinc-800/30 absolute inset-0 z-50 flex items-center justify-center backdrop-blur-sm">
+				<div className="bg-white/30 dark:bg-zinc-800/30 absolute inset-0 z-50 flex items-center justify-center backdrop-blur-xs">
 					<Spinner />
 				</div>
 			)}
@@ -108,7 +108,7 @@ export default function FilterTags() {
 			<div className="flex justify-end gap-4 align-bottom">
 				<Button
 					variant="outline"
-					className="rounded-[5px] border-[1px] border-[#e2e8f0] px-2 py-[1px] text-base"
+					className="rounded-[5px] border border-slate-200 px-2 py-px text-base"
 					onClick={handleResetFilters}
 				>
 					<span className="flex items-center">
@@ -116,7 +116,7 @@ export default function FilterTags() {
 					</span>
 				</Button>
 				<Button
-					className="rounded-[5px] px-2 py-[1px] text-base"
+					className="rounded-[5px] px-2 py-px text-base"
 					onClick={handleApplyChanges}
 					disabled={!isChanged}
 				>
diff --git a/app/components/header/nav-bar/index.tsx b/app/components/header/nav-bar/index.tsx
index ec9d94ffc..cffab86ae 100644
--- a/app/components/header/nav-bar/index.tsx
+++ b/app/components/header/nav-bar/index.tsx
@@ -63,7 +63,7 @@ export default function NavBar(props: NavBarProps) {
 	return (
 		<div className="pointer-events-auto relative w-full md:w-1/2">
 			<div className="absolute left-0 top-0 flex w-full flex-col gap-2">
-				<div className="w-full rounded-2xl border border-gray-100 bg-white px-2 py-2 shadow-xl dark:bg-zinc-800 dark:text-zinc-200 dark:opacity-90 dark:ring-white dark:backdrop-blur-sm md:px-4">
+				<div className="w-full rounded-2xl border border-gray-100 bg-white px-2 py-2 shadow-xl dark:bg-zinc-800 dark:text-zinc-200 dark:opacity-90 dark:ring-white dark:backdrop-blur-xs md:px-4">
 					<div className="flex w-full items-center gap-2 px-2 text-black dark:text-zinc-200 md:gap-4">
 						<SearchIcon className="aspect-square h-6 dark:text-zinc-200" />
 						<input
@@ -71,7 +71,7 @@ export default function NavBar(props: NavBarProps) {
 							placeholder={t('placeholder') || undefined}
 							onFocus={() => setOpen(true)}
 							onChange={(e) => setSearchString(e.target.value)}
-							className="h-fit w-full flex-1 border-none bg-white focus:border-none focus:outline-none focus:ring-0 dark:bg-zinc-800 dark:text-zinc-200"
+							className="h-fit w-full flex-1 border-none bg-white focus:border-none focus:outline-hidden focus:ring-0 dark:bg-zinc-800 dark:text-zinc-200"
 							value={searchString}
 						/>
 						{!open && (
diff --git a/app/components/header/nav-bar/phenomenon-select/phenomenon-select.tsx b/app/components/header/nav-bar/phenomenon-select/phenomenon-select.tsx
index 7a5e9ef2a..99b3f62f9 100644
--- a/app/components/header/nav-bar/phenomenon-select/phenomenon-select.tsx
+++ b/app/components/header/nav-bar/phenomenon-select/phenomenon-select.tsx
@@ -75,12 +75,12 @@ export function PhenomenonSelect() {
         </div>
       </ScrollArea>
       <div className="flex justify-between py-1">
-        <Label className="rounded-[5px] border-[1px] border-[#e2e8f0] px-2 py-[1px] text-base leading-[2.2]">
+        <Label className="rounded-[5px] border border-slate-200 px-2 py-px text-base leading-[2.2]">
           Results {data.filteredDevices.features.length}
         </Label>
         <Button
           variant="outline"
-          className=" px-2 py-[1px] text-base rounded-[5px] border-[1px] border-[#e2e8f0]"
+          className=" px-2 py-px text-base rounded-[5px] border border-slate-200"
           onClick={() => {
             searchParams.delete("exposure");
             searchParams.delete("status");
diff --git a/app/components/header/nav-bar/time-filter/index.tsx b/app/components/header/nav-bar/time-filter/index.tsx
index 15a5918b0..d1b103599 100644
--- a/app/components/header/nav-bar/time-filter/index.tsx
+++ b/app/components/header/nav-bar/time-filter/index.tsx
@@ -154,9 +154,9 @@ export function TimeFilter(props: TimeFilterProps) {
 							<div className="flex h-16 justify-center p-1">
 								<span className="w-10/12">{t('pointintime_description')}</span>
 							</div>
-							<div className="mx-auto min-h-[2.5rem] w-2/3 items-center justify-center rounded-t-lg border border-b-0 border-gray-100 p-2">
+							<div className="mx-auto min-h-10 w-2/3 items-center justify-center rounded-t-lg border border-b-0 border-gray-100 p-2">
 								{props.singleDate === undefined ? (
-									<div className="flex min-h-[2.5rem] items-center justify-center p-1">
+									<div className="flex min-h-10 items-center justify-center p-1">
 										{t('date_picker_label')}
 									</div>
 								) : (
@@ -264,10 +264,10 @@ export function TimeFilter(props: TimeFilterProps) {
 							<div className="flex h-16 justify-center p-1">
 								<span className="w-10/12">{t('timeperiod_description')}</span>
 							</div>
-							<div className="mx-auto min-h-[2.5rem] w-2/3 items-center justify-center rounded-t-lg border border-b-0 border-gray-100 p-2">
+							<div className="mx-auto min-h-10 w-2/3 items-center justify-center rounded-t-lg border border-b-0 border-gray-100 p-2">
 								{props.dateRange === undefined ||
 								props.dateRange.from === undefined ? (
-									<div className="flex min-h-[2.5rem] items-center justify-center p-1">
+									<div className="flex min-h-10 items-center justify-center p-1">
 										{t('date_range_picker_label')}
 									</div>
 								) : (
diff --git a/app/components/header/nav-bar/time-filter/time-filter.tsx b/app/components/header/nav-bar/time-filter/time-filter.tsx
index d2b3fd7f6..64d669551 100644
--- a/app/components/header/nav-bar/time-filter/time-filter.tsx
+++ b/app/components/header/nav-bar/time-filter/time-filter.tsx
@@ -94,9 +94,9 @@ export function TimeFilter(props: TimeFilterProps) {
 				<div className="flex h-16 justify-center p-1">
 					<span className="w-10/12">{t('pointintime_description')}</span>
 				</div>
-				<div className="mx-auto min-h-[2.5rem] w-2/3 items-center justify-center rounded-t-lg border border-b-0 border-gray-100 p-2">
+				<div className="mx-auto min-h-10 w-2/3 items-center justify-center rounded-t-lg border border-b-0 border-gray-100 p-2">
 					{props.singleDate === undefined ? (
-						<div className="flex min-h-[2.5rem] items-center justify-center p-1">
+						<div className="flex min-h-10 items-center justify-center p-1">
 							{t('date_picker_label')}
 						</div>
 					) : (
@@ -204,10 +204,10 @@ export function TimeFilter(props: TimeFilterProps) {
 				<div className="flex h-16 justify-center p-1">
 					<span className="w-10/12">{t('timeperiod_description')}</span>
 				</div>
-				<div className="mx-auto min-h-[2.5rem] w-2/3 items-center justify-center rounded-t-lg border border-b-0 border-gray-100 p-2">
+				<div className="mx-auto min-h-10 w-2/3 items-center justify-center rounded-t-lg border border-b-0 border-gray-100 p-2">
 					{props.dateRange === undefined ||
 					props.dateRange.from === undefined ? (
-						<div className="flex min-h-[2.5rem] items-center justify-center p-1">
+						<div className="flex min-h-10 items-center justify-center p-1">
 							{t('date_range_picker_label')}
 						</div>
 					) : (
diff --git a/app/components/landing/footer.tsx b/app/components/landing/footer.tsx
index 2d0178f9a..63a4697cd 100644
--- a/app/components/landing/footer.tsx
+++ b/app/components/landing/footer.tsx
@@ -8,7 +8,7 @@ export default function Footer() {
 			className="w-full bg-white px-4 text-gray-300 dark:bg-black dark:text-gray-100 sm:p-6 lg:text-lg"
 		>
 			<hr className="my-6 border-gray-300 dark:border-gray-100 sm:mx-auto lg:my-8" />
-			<div className="mx-auto w-full max-w-screen-xl p-4 md:flex md:items-center md:justify-between">
+			<div className="mx-auto w-full max-w-(--breakpoint-xl) p-4 md:flex md:items-center md:justify-between">
 				<span className="text-sm text-gray-500 dark:text-gray-400 sm:text-center">
 					© 2025{' '}
 					<a href="https://opensenselab.org/" className="hover:underline">
diff --git a/app/components/landing/header/header.tsx b/app/components/landing/header/header.tsx
index 5dd8a99e0..d1426401b 100644
--- a/app/components/landing/header/header.tsx
+++ b/app/components/landing/header/header.tsx
@@ -42,7 +42,7 @@ export default function Header() {
 		>
 			<div className="container z-50 mx-auto flex flex-wrap items-center justify-between px-4 font-serif">
 				{/* Osem Logo*/}
-				<div className="flex max-w-screen-xl flex-wrap items-center justify-between">
+				<div className="flex max-w-(--breakpoint-xl) flex-wrap items-center justify-between">
 					{/* Osem Logo*/}
 					<Link to="/" className="flex items-center md:pr-10">
 						<img src="/logo.png" className="mr-3 h-6 sm:h-9" alt="osem Logo" />
@@ -84,7 +84,7 @@ export default function Header() {
 							onClick={() => setOpenMenu(!openMenu)}
 							data-collapse-toggle="navbar-cta"
 							type="button"
-							className="inline-flex items-center rounded-lg p-2 px-6 text-sm text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 lg:hidden"
+							className="inline-flex items-center rounded-lg p-2 px-6 text-sm text-gray-500 hover:bg-gray-100 focus:outline-hidden focus:ring-2 focus:ring-gray-200 lg:hidden"
 							aria-controls="navbar-cta"
 							aria-expanded="false"
 						>
diff --git a/app/components/landing/sections/features-card.tsx b/app/components/landing/sections/features-card.tsx
index 289b42ce2..80a8d5c39 100644
--- a/app/components/landing/sections/features-card.tsx
+++ b/app/components/landing/sections/features-card.tsx
@@ -4,7 +4,7 @@ export default function FeatureCard(item: Feature) {
 	return (
 		<div
 			key={item.id}
-			className="flex flex-col items-center justify-center rounded-xl border-4 border-solid border-light-green bg-white p-4 text-center text-4xl text-gray-300 shadow-[5px_5px_rgba(0,_98,_90,_0.4),_8px_8px_rgba(0,_98,_90,_0.3),_11px_11px_rgba(0,_98,_90,_0.2),_14px_14px_rgba(0,_98,_90,_0.1),_17px_17px_rgba(0,_98,_90,_0.05)] dark:bg-gray-900 dark:text-gray-100"
+			className="flex flex-col items-center justify-center rounded-xl border-4 border-solid border-light-green bg-white p-4 text-center text-4xl text-gray-300 shadow-[5px_5px_rgba(0,98,90,0.4),8px_8px_rgba(0,98,90,0.3),11px_11px_rgba(0,98,90,0.2),14px_14px_rgba(0,98,90,0.1),17px_17px_rgba(0,98,90,0.05)] dark:bg-gray-900 dark:text-gray-100"
 		>
 			<div className="pb-4 font-serif text-2xl font-extrabold text-light-green subpixel-antialiased dark:text-green-200">
 				{item.title}
diff --git a/app/components/landing/stats.tsx b/app/components/landing/stats.tsx
index fe79afecb..e74e95c78 100644
--- a/app/components/landing/stats.tsx
+++ b/app/components/landing/stats.tsx
@@ -27,7 +27,7 @@ export default function Stats(stats: number[]) {
 	]
 
 	return (
-		<div className="mx-auto px-4 sm:max-w-xl md:max-w-full md:px-24 lg:max-w-screen-xl lg:px-8 lg:py-12">
+		<div className="mx-auto px-4 sm:max-w-xl md:max-w-full md:px-24 lg:max-w-(--breakpoint-xl) lg:px-8 lg:py-12">
 			<div className="row-gap-8 grid gap-10 lg:grid-cols-3">
 				{osemStats.map((stat) => (
 					<div key={stat.id} id={stat.name}>
diff --git a/app/components/map/filter-visualization.tsx b/app/components/map/filter-visualization.tsx
index b618662c3..b03dde981 100644
--- a/app/components/map/filter-visualization.tsx
+++ b/app/components/map/filter-visualization.tsx
@@ -100,7 +100,7 @@ export default function FilterVisualization() {
 					</div>
 					<button
 						onClick={() => onRemoveFilter(key)}
-						className="ml-2 text-blue-500 hover:text-blue-700 focus:outline-none"
+						className="ml-2 text-blue-500 hover:text-blue-700 focus:outline-hidden"
 						aria-label={`Remove ${key} filter`}
 					>
 						<X className="text-white" size={14} />
diff --git a/app/components/map/layers/cluster/box-marker.tsx b/app/components/map/layers/cluster/box-marker.tsx
index 6e8b4751f..d3eb6205d 100644
--- a/app/components/map/layers/cluster/box-marker.tsx
+++ b/app/components/map/layers/cluster/box-marker.tsx
@@ -64,7 +64,7 @@ export default function BoxMarker({ device, ...props }: BoxMarkerProps) {
 			<AnimatePresence mode="popLayout">
 				<motion.div
 					className={cn(
-						'group absolute flex w-fit cursor-pointer items-center rounded-full bg-white p-1 text-sm shadow hover:z-10 hover:shadow-lg',
+						'group absolute flex w-fit cursor-pointer items-center rounded-full bg-white p-1 text-sm shadow-sm hover:z-10 hover:shadow-lg',
 						isFullZoom ? '-left-4 -top-4' : '-left-[10px] -top-[10px]',
 					)}
 					onClick={() => {
@@ -109,7 +109,7 @@ export default function BoxMarker({ device, ...props }: BoxMarkerProps) {
 					{isFullZoom ? (
 						<motion.span
 							layoutId={device.id}
-							className="max-w-[100px] overflow-hidden overflow-ellipsis whitespace-nowrap px-1 text-black group-hover:max-w-fit group-hover:overflow-auto"
+							className="max-w-[100px] overflow-hidden text-ellipsis whitespace-nowrap px-1 text-black group-hover:max-w-fit group-hover:overflow-auto"
 							initial={{ opacity: 0, translateX: -20 }}
 							animate={{ opacity: 1, translateX: 0 }}
 							exit={{ opacity: 0, translateX: -20 }}
diff --git a/app/components/map/layers/mobile/mobile-box-view.tsx b/app/components/map/layers/mobile/mobile-box-view.tsx
index f1929596a..f208bb08b 100644
--- a/app/components/map/layers/mobile/mobile-box-view.tsx
+++ b/app/components/map/layers/mobile/mobile-box-view.tsx
@@ -106,7 +106,7 @@ function Legend({
 	const maxValue = Math.max(...sensorData.map((d) => Number(d.value)))
 
 	return (
-		<div className="z-50 flex w-40 flex-col gap-2 rounded-lg border-gray-200 bg-white p-2 shadow-sm">
+		<div className="z-50 flex w-40 flex-col gap-2 rounded-lg border-gray-200 bg-white p-2 shadow-xs">
 			<span className="font-semibold">{sensor.title}</span>
 			<div
 				className="flex w-full items-center justify-between rounded-sm p-1"
@@ -115,7 +115,7 @@ function Legend({
 				}}
 			>
 				<div
-					className="cursor-pointer rounded bg-white px-0.5 shadow-sm"
+					className="cursor-pointer rounded bg-white px-0.5 shadow-xs"
 					onClick={() => minColorInputRef.current?.click()}
 				>
 					{minValue}
@@ -129,7 +129,7 @@ function Legend({
 					/>
 				</div>
 				<span
-					className="cursor-pointer rounded bg-white px-0.5 shadow-sm"
+					className="cursor-pointer rounded bg-white px-0.5 shadow-xs"
 					onClick={() => maxColorInputRef.current?.click()}
 				>
 					{maxValue}
diff --git a/app/components/map/legend.tsx b/app/components/map/legend.tsx
index cf30e5eaf..4a9fea8a5 100644
--- a/app/components/map/legend.tsx
+++ b/app/components/map/legend.tsx
@@ -51,7 +51,7 @@ export default function Legend({ title, values }: LegendProps) {
 				ref={nodeRef}
 				defaultValue="item-1"
 				onValueChange={() => setIsOpen(!isOpen)}
-				className="absolute bottom-[15%] right-4 z-10 w-1/5 rounded-lg bg-white shadow"
+				className="absolute bottom-[15%] right-4 z-10 w-1/5 rounded-lg bg-white shadow-sm"
 			>
 				<AccordionItem value="item-1">
 					<AccordionTrigger
@@ -62,7 +62,7 @@ export default function Legend({ title, values }: LegendProps) {
 					</AccordionTrigger>
 					<AccordionContent>
 						<div className="mx-5 px-4">
-							<div className="relative h-[3.625rem]">
+							<div className="relative h-14.5">
 								{values?.map((v, i) => {
 									return (
 										<div
@@ -74,7 +74,7 @@ export default function Legend({ title, values }: LegendProps) {
 										>
 											<svg
 												viewBox="0 0 32 34"
-												className={`w-8 flex-none drop-shadow`}
+												className={`w-8 flex-none drop-shadow-sm`}
 												fill={v.color}
 											>
 												<path d="M1 4a4 4 0 0 1 4-4h22a4 4 0 0 1 4 4v19.6a4 4 0 0 1-2.118 3.53L16 34 3.118 27.13A4 4 0 0 1 1 23.6V4Z" />
diff --git a/app/components/nav-bar.tsx b/app/components/nav-bar.tsx
index fd44db05a..0cb9da1ab 100644
--- a/app/components/nav-bar.tsx
+++ b/app/components/nav-bar.tsx
@@ -34,7 +34,7 @@ export function NavBar() {
 	return (
 		<div className="border-b bg-white p-4 dark:bg-dark-background dark:text-dark-text">
 			<div className="flex h-16 items-center justify-between">
-				<div className="flex max-w-screen-xl flex-wrap items-center justify-between">
+				<div className="flex max-w-(--breakpoint-xl) flex-wrap items-center justify-between">
 					<Link to="/explore" className="flex items-center md:pr-4">
 						<img src="/logo.png" className="mr-3 h-6 sm:h-9" alt="osem Logo" />
 					</Link>
diff --git a/app/components/rjsf/inputTemplate.tsx b/app/components/rjsf/inputTemplate.tsx
index 31163494f..a49a04846 100644
--- a/app/components/rjsf/inputTemplate.tsx
+++ b/app/components/rjsf/inputTemplate.tsx
@@ -31,7 +31,7 @@ export function BaseInputTemplate(props: BaseInputTemplateProps) {
       className="
         w-full rounded-md border border-gray-300
         px-3 py-2 text-sm
-        focus:outline-none focus:ring-2 focus:ring-green-500
+        focus:outline-hidden focus:ring-2 focus:ring-green-500
         disabled:bg-gray-100 disabled:cursor-not-allowed
       "
     />
diff --git a/app/components/rjsf/numberWidget.tsx b/app/components/rjsf/numberWidget.tsx
index 3dd407e84..cc69c8de6 100644
--- a/app/components/rjsf/numberWidget.tsx
+++ b/app/components/rjsf/numberWidget.tsx
@@ -10,7 +10,7 @@ export function NumberWidget(props: WidgetProps) {
       disabled={props.disabled || props.readonly}
       min={props.schema.minimum}
       max={props.schema.maximum}
-      className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-green-500"
+      className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-hidden focus:ring-2 focus:ring-green-500"
     />
   );
 }
\ No newline at end of file
diff --git a/app/components/rjsf/textareaWidget.tsx b/app/components/rjsf/textareaWidget.tsx
index a351d9361..83226cef1 100644
--- a/app/components/rjsf/textareaWidget.tsx
+++ b/app/components/rjsf/textareaWidget.tsx
@@ -7,7 +7,7 @@ export function TextareaWidget(props: WidgetProps) {
       value={props.value ?? ""}
       onChange={(e) => props.onChange(e.target.value)}
       rows={4}
-      className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-green-500"
+      className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-hidden focus:ring-2 focus:ring-green-500"
     />
   );
 }
\ No newline at end of file
diff --git a/app/components/search/search-list-item.tsx b/app/components/search/search-list-item.tsx
index 764bbc611..f20258ba8 100644
--- a/app/components/search/search-list-item.tsx
+++ b/app/components/search/search-list-item.tsx
@@ -48,7 +48,7 @@ export default function SearchListItem({
 			<div className="h-8 w-8 p-1">
 				<Icon className="h-full" />
 			</div>
-			<span className="inline-block overflow-hidden overflow-ellipsis whitespace-nowrap align-middle">
+			<span className="inline-block overflow-hidden text-ellipsis whitespace-nowrap align-middle">
 				{name}
 			</span>
 		</div>
diff --git a/app/components/ui/alert-dialog.tsx b/app/components/ui/alert-dialog.tsx
index 1aa744981..eaf72ffc7 100644
--- a/app/components/ui/alert-dialog.tsx
+++ b/app/components/ui/alert-dialog.tsx
@@ -18,7 +18,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<AlertDialogPrimitive.Overlay
 		className={cn(
-			'bg-white/80 fixed inset-0 z-50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 dark:bg-slate-950/80',
+			'bg-white/80 fixed inset-0 z-50 backdrop-blur-xs data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 dark:bg-slate-950/80',
 			className,
 		)}
 		{...props}
diff --git a/app/components/ui/badge.tsx b/app/components/ui/badge.tsx
index 6d9a3dece..5517de2c6 100644
--- a/app/components/ui/badge.tsx
+++ b/app/components/ui/badge.tsx
@@ -4,7 +4,7 @@ import * as React from 'react'
 import { cn } from '@/lib/utils'
 
 const badgeVariants = cva(
-	'inline-flex items-center rounded-full border border-zinc-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-zinc-400 focus:ring-offset-2 dark:border-white dark:focus:ring-zinc-800',
+	'inline-flex items-center rounded-full border border-zinc-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-zinc-400 focus:ring-offset-2 dark:border-white dark:focus:ring-zinc-800',
 	{
 		variants: {
 			variant: {
diff --git a/app/components/ui/breadcrumb.tsx b/app/components/ui/breadcrumb.tsx
index 4534724e7..573751762 100644
--- a/app/components/ui/breadcrumb.tsx
+++ b/app/components/ui/breadcrumb.tsx
@@ -19,7 +19,7 @@ const BreadcrumbList = React.forwardRef<
 	<ol
 		ref={ref}
 		className={cn(
-			'flex flex-wrap items-center gap-1.5 break-words text-sm text-slate-500 dark:text-slate-400 sm:gap-2.5',
+			'flex flex-wrap items-center gap-1.5 wrap-break-word text-sm text-slate-500 dark:text-slate-400 sm:gap-2.5',
 			className,
 		)}
 		{...props}
diff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx
index efc496a2b..017ed51ae 100644
--- a/app/components/ui/button.tsx
+++ b/app/components/ui/button.tsx
@@ -5,7 +5,7 @@ import * as React from 'react'
 import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
-	'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+	'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
 	{
 		variants: {
 			variant: {
diff --git a/app/components/ui/card.tsx b/app/components/ui/card.tsx
index 4a27df212..46fc9d31d 100644
--- a/app/components/ui/card.tsx
+++ b/app/components/ui/card.tsx
@@ -9,7 +9,7 @@ const Card = React.forwardRef<
 	<div
 		ref={ref}
 		className={cn(
-			'rounded-lg border border-slate-200 bg-white text-slate-950 shadow-sm dark:border-slate-800 dark:bg-dark-boxes dark:text-slate-50',
+			'rounded-lg border border-slate-200 bg-white text-slate-950 shadow-xs dark:border-slate-800 dark:bg-dark-boxes dark:text-slate-50',
 			className,
 		)}
 		{...props}
diff --git a/app/components/ui/checkbox.tsx b/app/components/ui/checkbox.tsx
index a9334f0d4..2c710e397 100644
--- a/app/components/ui/checkbox.tsx
+++ b/app/components/ui/checkbox.tsx
@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
 	<CheckboxPrimitive.Root
 		ref={ref}
 		className={cn(
-			'peer h-4 w-4 shrink-0 rounded-sm border border-slate-200 border-slate-900 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-slate-900 data-[state=checked]:text-slate-50 dark:border-slate-50 dark:border-slate-800 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-800 dark:data-[state=checked]:bg-slate-50 dark:data-[state=checked]:text-slate-900',
+			'peer h-4 w-4 shrink-0 rounded-sm border border-slate-200 border-slate-900 ring-offset-white focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-slate-900 data-[state=checked]:text-slate-50 dark:border-slate-50 dark:border-slate-800 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-800 dark:data-[state=checked]:bg-slate-50 dark:data-[state=checked]:text-slate-900',
 			className,
 		)}
 		{...props}
diff --git a/app/components/ui/command.tsx b/app/components/ui/command.tsx
index a3c419040..22ca2a1b4 100644
--- a/app/components/ui/command.tsx
+++ b/app/components/ui/command.tsx
@@ -29,7 +29,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-slate-500 dark:[&_[cmdk-group-heading]]:text-slate-400 [&_[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-slate-500 dark:**:[[cmdk-group-heading]]:text-slate-400 [&_[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>
@@ -46,7 +46,7 @@ const CommandInput = React.forwardRef<
 		<CommandPrimitive.Input
 			ref={ref}
 			className={cn(
-				'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-slate-500 disabled:cursor-not-allowed disabled:opacity-50 dark:placeholder:text-slate-400',
+				'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-slate-500 disabled:cursor-not-allowed disabled:opacity-50 dark:placeholder:text-slate-400',
 				className,
 			)}
 			{...props}
@@ -89,7 +89,7 @@ const CommandGroup = React.forwardRef<
 	<CommandPrimitive.Group
 		ref={ref}
 		className={cn(
-			'overflow-hidden p-1 text-slate-950 dark:text-slate-50 [&_[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-slate-500 dark:[&_[cmdk-group-heading]]:text-slate-400',
+			'overflow-hidden p-1 text-slate-950 dark:text-slate-50 **:[[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-slate-500 dark:**:[[cmdk-group-heading]]:text-slate-400',
 			className,
 		)}
 		{...props}
@@ -118,7 +118,7 @@ const CommandItem = React.forwardRef<
 	<CommandPrimitive.Item
 		ref={ref}
 		className={cn(
-			"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-slate-100 aria-selected:text-slate-900 data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50 dark:aria-selected:bg-slate-800 dark:aria-selected:text-slate-50",
+			"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden aria-selected:bg-slate-100 aria-selected:text-slate-900 data-[disabled='true']:pointer-events-none data-[disabled='true']:opacity-50 dark:aria-selected:bg-slate-800 dark:aria-selected:text-slate-50",
 			className,
 		)}
 		{...props}
diff --git a/app/components/ui/dialog.tsx b/app/components/ui/dialog.tsx
index 7b73cf862..3ade50cf9 100644
--- a/app/components/ui/dialog.tsx
+++ b/app/components/ui/dialog.tsx
@@ -29,7 +29,7 @@ const DialogOverlay = React.forwardRef<
 	<DialogPrimitive.Overlay
 		ref={ref}
 		className={cn(
-			'fixed inset-0 z-50 h-full w-full bg-black opacity-25 backdrop-blur-sm transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in',
+			'fixed inset-0 z-50 h-full w-full bg-black opacity-25 backdrop-blur-xs transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in',
 			className,
 		)}
 		{...props}
@@ -46,14 +46,14 @@ const DialogContent = React.forwardRef<
 		<DialogPrimitive.Content
 			ref={ref}
 			className={cn(
-				'fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0',
+				'fixed z-50 grid w-full gap-4 rounded-b-lg border bg-background p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:rounded-lg sm:zoom-in-90 sm:data-[state=open]:slide-in-from-bottom-0',
 				className,
 			)}
 			{...props}
 		>
 			{children}
 			{!hideClose &&( 
-			<DialogPrimitive.Close className="absolute right-3 top-3 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-3 top-3 rounded-sm 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="h-4 w-4" />
 				<span className="sr-only">Close</span>
 			</DialogPrimitive.Close>
diff --git a/app/components/ui/dropdown-menu.tsx b/app/components/ui/dropdown-menu.tsx
index ac57eff38..2c93d62de 100644
--- a/app/components/ui/dropdown-menu.tsx
+++ b/app/components/ui/dropdown-menu.tsx
@@ -27,7 +27,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
 	<DropdownMenuPrimitive.SubTrigger
 		ref={ref}
 		className={cn(
-			'flex cursor-default select-none 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 items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent data-[state=open]:bg-accent',
 			inset && 'pl-8',
 			className,
 		)}
@@ -47,7 +47,7 @@ const DropdownMenuSubContent = React.forwardRef<
 	<DropdownMenuPrimitive.SubContent
 		ref={ref}
 		className={cn(
-			'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1',
+			'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1',
 			className,
 		)}
 		{...props}
@@ -65,7 +65,7 @@ const DropdownMenuContent = React.forwardRef<
 			ref={ref}
 			sideOffset={sideOffset}
 			className={cn(
-				'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in 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-md border bg-popover p-1 text-popover-foreground shadow-md animate-in 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}
@@ -83,7 +83,7 @@ const DropdownMenuItem = React.forwardRef<
 	<DropdownMenuPrimitive.Item
 		ref={ref}
 		className={cn(
-			'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 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-sm px-2 py-1.5 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50',
 			inset && 'pl-8',
 			className,
 		)}
@@ -99,7 +99,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
 	<DropdownMenuPrimitive.CheckboxItem
 		ref={ref}
 		className={cn(
-			'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-sm 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}
@@ -123,7 +123,7 @@ const DropdownMenuRadioItem = React.forwardRef<
 	<DropdownMenuPrimitive.RadioItem
 		ref={ref}
 		className={cn(
-			'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-sm 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/app/components/ui/hover-card.tsx b/app/components/ui/hover-card.tsx
index 9ecb05f0d..afb054efd 100644
--- a/app/components/ui/hover-card.tsx
+++ b/app/components/ui/hover-card.tsx
@@ -18,7 +18,7 @@ const HoverCardContent = React.forwardRef<
 		align={align}
 		sideOffset={sideOffset}
 		className={cn(
-			'z-50 w-64 rounded-md border border-slate-200 bg-white p-4 text-slate-950 shadow-md 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 dark:border-slate-800 dark:bg-dark-boxes dark:text-slate-50',
+			'z-50 w-64 rounded-md border border-slate-200 bg-white p-4 text-slate-950 shadow-md 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 dark:border-slate-800 dark:bg-dark-boxes dark:text-slate-50',
 			className,
 		)}
 		{...props}
diff --git a/app/components/ui/input.tsx b/app/components/ui/input.tsx
index b3f10173a..5ba784c9c 100644
--- a/app/components/ui/input.tsx
+++ b/app/components/ui/input.tsx
@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 			<input
 				type={type}
 				className={cn(
-					'flex h-10 w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300',
+					'flex h-10 w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300',
 					className,
 				)}
 				ref={ref}
diff --git a/app/components/ui/popover.tsx b/app/components/ui/popover.tsx
index e688d2056..ac1d9e148 100644
--- a/app/components/ui/popover.tsx
+++ b/app/components/ui/popover.tsx
@@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
 			align={align}
 			sideOffset={sideOffset}
 			className={cn(
-				'z-50 w-72 rounded-md border border-slate-200 bg-white p-4 text-slate-950 shadow-md 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 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50',
+				'z-50 w-72 rounded-md border border-slate-200 bg-white p-4 text-slate-950 shadow-md 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 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50',
 				className,
 			)}
 			{...props}
diff --git a/app/components/ui/radio-group.tsx b/app/components/ui/radio-group.tsx
index b183ad6c5..84635839c 100644
--- a/app/components/ui/radio-group.tsx
+++ b/app/components/ui/radio-group.tsx
@@ -28,7 +28,7 @@ const RadioGroupItem = React.forwardRef<
 		<RadioGroupPrimitive.Item
 			ref={ref}
 			className={cn(
-				'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+				'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
 				className,
 			)}
 			{...props}
diff --git a/app/components/ui/scroll-area.tsx b/app/components/ui/scroll-area.tsx
index 3ef85e436..f16d1a756 100644
--- a/app/components/ui/scroll-area.tsx
+++ b/app/components/ui/scroll-area.tsx
@@ -33,9 +33,9 @@ const ScrollBar = React.forwardRef<
 		className={cn(
 			'flex touch-none select-none transition-colors',
 			orientation === 'vertical' &&
-				'h-full w-2.5 border-l border-l-transparent p-[1px]',
+				'h-full w-2.5 border-l border-l-transparent p-px',
 			orientation === 'horizontal' &&
-				'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+				'h-2.5 flex-col border-t border-t-transparent p-px',
 			className,
 		)}
 		{...props}
diff --git a/app/components/ui/select.tsx b/app/components/ui/select.tsx
index c2a3452e5..65865ac17 100644
--- a/app/components/ui/select.tsx
+++ b/app/components/ui/select.tsx
@@ -19,7 +19,7 @@ const SelectTrigger = React.forwardRef<
 	<SelectPrimitive.Trigger
 		ref={ref}
 		className={cn(
-			'flex h-10 w-full items-center justify-between rounded-md border border-slate-200 bg-transparent px-3 py-2 text-sm placeholder:text-slate-500 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:placeholder:text-slate-400',
+			'flex h-10 w-full items-center justify-between rounded-md border border-slate-200 bg-transparent px-3 py-2 text-sm placeholder:text-slate-500 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:placeholder:text-slate-400',
 			className,
 		)}
 		{...props}
@@ -40,7 +40,7 @@ const SelectContent = React.forwardRef<
 		<SelectPrimitive.Content
 			ref={ref}
 			className={cn(
-				'relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-200 bg-white text-slate-950 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 dark:border-slate-800 dark:bg-zinc-800 dark:text-zinc-200 dark:opacity-95',
+				'relative z-50 min-w-32 overflow-hidden rounded-md border border-slate-200 bg-white text-slate-950 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 dark:border-slate-800 dark:bg-zinc-800 dark:text-zinc-200 dark:opacity-95',
 				position === 'popper' &&
 					'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
 				className,
@@ -52,7 +52,7 @@ const SelectContent = React.forwardRef<
 				className={cn(
 					'p-1',
 					position === 'popper' &&
-						'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
+						'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)',
 				)}
 			>
 				{children}
@@ -81,7 +81,7 @@ const SelectItem = React.forwardRef<
 	<SelectPrimitive.Item
 		ref={ref}
 		className={cn(
-			'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50',
+			'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-slate-100 focus:text-slate-900 data-disabled:pointer-events-none data-disabled:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50',
 			className,
 		)}
 		{...props}
diff --git a/app/components/ui/separator.tsx b/app/components/ui/separator.tsx
index 848fa1d5f..c979c1288 100644
--- a/app/components/ui/separator.tsx
+++ b/app/components/ui/separator.tsx
@@ -19,7 +19,7 @@ const Separator = React.forwardRef<
 			orientation={orientation}
 			className={cn(
 				'shrink-0 bg-slate-200 dark:bg-slate-800',
-				orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+				orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
 				className,
 			)}
 			{...props}
diff --git a/app/components/ui/sheet.tsx b/app/components/ui/sheet.tsx
index 306266a1a..7a23a2ad4 100644
--- a/app/components/ui/sheet.tsx
+++ b/app/components/ui/sheet.tsx
@@ -24,7 +24,7 @@ const SheetOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<SheetPrimitive.Overlay
 		className={cn(
-			'bg-white/80 fixed inset-0 z-50 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 dark:bg-slate-950/80',
+			'bg-white/80 fixed inset-0 z-50 backdrop-blur-xs data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 dark:bg-slate-950/80',
 			className,
 		)}
 		{...props}
@@ -68,7 +68,7 @@ const SheetContent = React.forwardRef<
 			{...props}
 		>
 			{children}
-			<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 dark:ring-offset-slate-950 dark:focus:ring-slate-800 dark:data-[state=open]:bg-slate-800">
+			<SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-slate-100 dark:ring-offset-slate-950 dark:focus:ring-slate-800 dark:data-[state=open]:bg-slate-800">
 				<X className="h-4 w-4" />
 				<span className="sr-only">Close</span>
 			</SheetPrimitive.Close>
diff --git a/app/components/ui/switch.tsx b/app/components/ui/switch.tsx
index fecdceaaa..05f6d27a7 100644
--- a/app/components/ui/switch.tsx
+++ b/app/components/ui/switch.tsx
@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
 	<SwitchPrimitives.Root
 		className={cn(
-			'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=checked]:bg-dark-green',
+			'peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=checked]:bg-dark-green',
 			className,
 		)}
 		{...props}
diff --git a/app/components/ui/tabs.tsx b/app/components/ui/tabs.tsx
index 166207983..a96e4aa37 100644
--- a/app/components/ui/tabs.tsx
+++ b/app/components/ui/tabs.tsx
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
 	<TabsPrimitive.Trigger
 		ref={ref}
 		className={cn(
-			'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-white transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-slate-950 data-[state=active]:shadow-sm dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 dark:data-[state=active]:bg-slate-950 dark:data-[state=active]:text-slate-50',
+			'inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-white transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-slate-950 data-[state=active]:shadow-xs dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300 dark:data-[state=active]:bg-slate-950 dark:data-[state=active]:text-slate-50',
 			className,
 		)}
 		{...props}
@@ -44,7 +44,7 @@ const TabsContent = React.forwardRef<
 	<TabsPrimitive.Content
 		ref={ref}
 		className={cn(
-			'mt-2 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300',
+			'mt-2 ring-offset-white focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300',
 			className,
 		)}
 		{...props}
diff --git a/app/components/ui/textarea.tsx b/app/components/ui/textarea.tsx
index 96a16ea79..18305c129 100644
--- a/app/components/ui/textarea.tsx
+++ b/app/components/ui/textarea.tsx
@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 		return (
 			<textarea
 				className={cn(
-					'flex min-h-[80px] w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300',
+					'flex min-h-[80px] w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-slate-500 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:ring-offset-slate-950 dark:placeholder:text-slate-400 dark:focus-visible:ring-slate-300',
 					className,
 				)}
 				ref={ref}
diff --git a/app/components/ui/toast.tsx b/app/components/ui/toast.tsx
index b25baad39..b5894ec8b 100644
--- a/app/components/ui/toast.tsx
+++ b/app/components/ui/toast.tsx
@@ -14,7 +14,7 @@ const ToastViewport = React.forwardRef<
 	<ToastPrimitives.Viewport
 		ref={ref}
 		className={cn(
-			'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
+			'fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
 			className,
 		)}
 		{...props}
@@ -23,7 +23,7 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 
 const toastVariants = cva(
-	'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+	'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full',
 	{
 		variants: {
 			variant: {
@@ -61,7 +61,7 @@ const ToastAction = React.forwardRef<
 	<ToastPrimitives.Action
 		ref={ref}
 		className={cn(
-			'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-destructive/30 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
+			'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-destructive/30 hover:group-[.destructive]:border-destructive/30 hover:group-[.destructive]:bg-destructive hover:group-[.destructive]:text-destructive-foreground focus:group-[.destructive]:ring-destructive',
 			className,
 		)}
 		{...props}
@@ -76,7 +76,7 @@ const ToastClose = React.forwardRef<
 	<ToastPrimitives.Close
 		ref={ref}
 		className={cn(
-			'group-[.destructive]:focus:ring-offset-red-600 absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400',
+			'group-[.destructive]:focus:ring-offset-red-600 absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-hidden focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-50 focus:group-[.destructive]:ring-red-400',
 			className,
 		)}
 		toast-close=""
diff --git a/app/components/ui/toggle.tsx b/app/components/ui/toggle.tsx
index 09ffbdf3d..247b4c65a 100644
--- a/app/components/ui/toggle.tsx
+++ b/app/components/ui/toggle.tsx
@@ -7,7 +7,7 @@ import * as React from 'react'
 import { cn } from '@/lib/utils'
 
 const toggleVariants = cva(
-	'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors hover:bg-slate-100 hover:text-slate-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-slate-100 data-[state=on]:text-slate-900 dark:ring-offset-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-400 dark:focus-visible:ring-slate-300 dark:data-[state=on]:bg-slate-800 dark:data-[state=on]:text-slate-50',
+	'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors hover:bg-slate-100 hover:text-slate-500 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-slate-100 data-[state=on]:text-slate-900 dark:ring-offset-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-400 dark:focus-visible:ring-slate-300 dark:data-[state=on]:bg-slate-800 dark:data-[state=on]:text-slate-50',
 	{
 		variants: {
 			variant: {
diff --git a/app/routes/account.password-reset.tsx b/app/routes/account.password-reset.tsx
index c11db418a..40b74a3a3 100644
--- a/app/routes/account.password-reset.tsx
+++ b/app/routes/account.password-reset.tsx
@@ -193,7 +193,7 @@ export default function PasswordResetRoute() {
 
 			<Card className="z-50 w-full max-w-md">
 				{busy && (
-					<div className="bg-white/30 dark:bg-zinc-800/30 absolute inset-0 z-50 flex items-center justify-center backdrop-blur-sm">
+					<div className="bg-white/30 dark:bg-zinc-800/30 absolute inset-0 z-50 flex items-center justify-center backdrop-blur-xs">
 						<Spinner />
 					</div>
 				)}
diff --git a/app/routes/admin.devices.$deviceId.tsx b/app/routes/admin.devices.$deviceId.tsx
index 7b7b987dc..3e666db0a 100644
--- a/app/routes/admin.devices.$deviceId.tsx
+++ b/app/routes/admin.devices.$deviceId.tsx
@@ -169,7 +169,7 @@ export default function AdminDeviceDetailRoute({
 
 					<div className="mt-5 md:col-span-2 md:mt-0">
 						<Form method="post">
-							<div className="overflow-hidden shadow sm:rounded-md">
+							<div className="overflow-hidden shadow-sm sm:rounded-md">
 								<div className="bg-white px-4 py-5 sm:p-6">
 									<div className="grid grid-cols-6 gap-6">
 										<div className="col-span-6 sm:col-span-3">
@@ -184,7 +184,7 @@ export default function AdminDeviceDetailRoute({
 												name="name"
 												id="name"
 												defaultValue={device.name}
-												className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
+												className="mt-1 block w-full rounded-md border-gray-300 shadow-xs"
 											/>
 											{actionData?.fieldErrors?.name ? (
 												<p className="text-red-600 mt-1 text-sm">
@@ -205,7 +205,7 @@ export default function AdminDeviceDetailRoute({
 												onChange={(e) => setDeviceOwner(e.target.value)}
 												id="owner"
 												disabled
-												className="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 shadow-sm disabled:bg-gray-100"
+												className="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 shadow-xs disabled:bg-gray-100"
 											>
 												{users.map((user) => (
 													<option key={user.id} value={user.id}>
@@ -233,7 +233,7 @@ export default function AdminDeviceDetailRoute({
 												name="grouptag"
 												id="grouptag"
 												defaultValue={(device.tags ?? []).join(',')}
-												className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
+												className="mt-1 block w-full rounded-md border-gray-300 shadow-xs"
 											/>
 											<p className="mt-1 text-xs text-gray-500">
 												Comma-separated
@@ -252,7 +252,7 @@ export default function AdminDeviceDetailRoute({
 												id="description"
 												defaultValue={device.description ?? ''}
 												rows={4}
-												className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
+												className="mt-1 block w-full rounded-md border-gray-300 shadow-xs"
 											/>
 										</div>
 
@@ -268,7 +268,7 @@ export default function AdminDeviceDetailRoute({
 												name="website"
 												id="website"
 												defaultValue={device.website ?? ''}
-												className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
+												className="mt-1 block w-full rounded-md border-gray-300 shadow-xs"
 											/>
 										</div>
 
@@ -284,7 +284,7 @@ export default function AdminDeviceDetailRoute({
 												name="link"
 												id="link"
 												defaultValue={device.link ?? ''}
-												className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
+												className="mt-1 block w-full rounded-md border-gray-300 shadow-xs"
 											/>
 										</div>
 
@@ -300,7 +300,7 @@ export default function AdminDeviceDetailRoute({
 												name="image"
 												id="image"
 												defaultValue={device.image ?? ''}
-												className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
+												className="mt-1 block w-full rounded-md border-gray-300 shadow-xs"
 											/>
 										</div>
 
@@ -316,7 +316,7 @@ export default function AdminDeviceDetailRoute({
 												name="model"
 												id="model"
 												defaultValue={device.model ?? ''}
-												className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
+												className="mt-1 block w-full rounded-md border-gray-300 shadow-xs"
 											/>
 										</div>
 
@@ -432,7 +432,7 @@ export default function AdminDeviceDetailRoute({
 													const [, lat] = deviceLocation
 													setDeviceLocation([Number(e.target.value), lat])
 												}}
-												className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
+												className="mt-1 block w-full rounded-md border-gray-300 shadow-xs"
 											/>
 											{actionData?.fieldErrors?.longitude ? (
 												<p className="text-red-600 mt-1 text-sm">
@@ -458,7 +458,7 @@ export default function AdminDeviceDetailRoute({
 													const [lng] = deviceLocation
 													setDeviceLocation([lng, Number(e.target.value)])
 												}}
-												className="mt-1 block w-full rounded-md border-gray-300 shadow-sm"
+												className="mt-1 block w-full rounded-md border-gray-300 shadow-xs"
 											/>
 											{actionData?.fieldErrors?.latitude ? (
 												<p className="text-red-600 mt-1 text-sm">
@@ -480,7 +480,7 @@ export default function AdminDeviceDetailRoute({
 												id="device-id"
 												defaultValue={device.id}
 												disabled
-												className="mt-1 block w-full rounded-md border-gray-300 bg-gray-100 shadow-sm"
+												className="mt-1 block w-full rounded-md border-gray-300 bg-gray-100 shadow-xs"
 											/>
 										</div>
 
@@ -497,7 +497,7 @@ export default function AdminDeviceDetailRoute({
 												id="status"
 												defaultValue={device.status ?? ''}
 												disabled
-												className="mt-1 block w-full rounded-md border-gray-300 bg-gray-100 shadow-sm"
+												className="mt-1 block w-full rounded-md border-gray-300 bg-gray-100 shadow-xs"
 											/>
 										</div>
 
@@ -514,7 +514,7 @@ export default function AdminDeviceDetailRoute({
 												id="created-at"
 												defaultValue={String(device.createdAt)}
 												disabled
-												className="mt-1 block w-full rounded-md border-gray-300 bg-gray-100 shadow-sm"
+												className="mt-1 block w-full rounded-md border-gray-300 bg-gray-100 shadow-xs"
 											/>
 										</div>
 
@@ -531,7 +531,7 @@ export default function AdminDeviceDetailRoute({
 												id="updated-at"
 												defaultValue={String(device.updatedAt)}
 												disabled
-												className="mt-1 block w-full rounded-md border-gray-300 bg-gray-100 shadow-sm"
+												className="mt-1 block w-full rounded-md border-gray-300 bg-gray-100 shadow-xs"
 											/>
 										</div>
 
@@ -548,7 +548,7 @@ export default function AdminDeviceDetailRoute({
 												id="public"
 												defaultValue={device.public ? 'yes' : 'no'}
 												disabled
-												className="mt-1 block w-full rounded-md border-gray-300 bg-gray-100 shadow-sm"
+												className="mt-1 block w-full rounded-md border-gray-300 bg-gray-100 shadow-xs"
 											/>
 										</div>
 									</div>
@@ -559,7 +559,7 @@ export default function AdminDeviceDetailRoute({
 										type="submit"
 										name="_action"
 										value="delete"
-										className="inline-flex justify-center rounded-md border border-transparent bg-red-700 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-red-700"
+										className="inline-flex justify-center rounded-md border border-transparent bg-red-700 px-4 py-2 text-sm font-medium text-white shadow-xs hover:bg-red-700"
 										onClick={(e) => {
 											const ok = window.confirm(
 												'Are you sure you want to delete this device?',
@@ -574,7 +574,7 @@ export default function AdminDeviceDetailRoute({
 										type="submit"
 										name="_action"
 										value="update"
-										className="inline-flex justify-center rounded-md border border-transparent bg-blue-700 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700"
+										className="inline-flex justify-center rounded-md border border-transparent bg-blue-700 px-4 py-2 text-sm font-medium text-white shadow-xs hover:bg-blue-700"
 									>
 										Update device
 									</button>
diff --git a/app/routes/admin.users.$userId.tsx b/app/routes/admin.users.$userId.tsx
index f82d2d260..39081f07c 100644
--- a/app/routes/admin.users.$userId.tsx
+++ b/app/routes/admin.users.$userId.tsx
@@ -173,7 +173,7 @@ export default function AdminUserDetailRoute({
 						) : null}
 
 						<Form method="post">
-							<div className="overflow-hidden shadow sm:rounded-md">
+							<div className="overflow-hidden shadow-sm sm:rounded-md">
 								<div className="bg-white px-4 py-5 sm:p-6">
 									<fieldset>
 										<div className="grid grid-cols-6 gap-6">
@@ -189,7 +189,7 @@ export default function AdminUserDetailRoute({
 													name="name"
 													id="name"
 													defaultValue={user.name}
-													className="mt-1 block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
+													className="mt-1 block w-full rounded-md border-gray-300 shadow-xs sm:text-sm"
 												/>
 												{actionData?.fieldErrors?.name ? (
 													<p className="text-red-600 mt-1 text-sm">
@@ -210,7 +210,7 @@ export default function AdminUserDetailRoute({
 													name="email"
 													id="email"
 													defaultValue={user.email}
-													className="mt-1 block w-full rounded-md border-gray-300 shadow-sm sm:text-sm"
+													className="mt-1 block w-full rounded-md border-gray-300 shadow-xs sm:text-sm"
 												/>
 												{actionData?.fieldErrors?.email ? (
 													<p className="text-red-600 mt-1 text-sm">
@@ -255,7 +255,7 @@ export default function AdminUserDetailRoute({
 													id="language"
 													name="language"
 													defaultValue={user.language ?? ''}
-													className="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 shadow-sm sm:text-sm"
+													className="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 shadow-xs sm:text-sm"
 												/>
 												{actionData?.fieldErrors?.language ? (
 													<p className="text-red-600 mt-1 text-sm">
@@ -274,7 +274,7 @@ export default function AdminUserDetailRoute({
 												<select
 													id="role"
 													name="role"
-													className="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 shadow-sm sm:text-sm"
+													className="mt-1 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 shadow-xs sm:text-sm"
 													defaultValue={user.role ?? 'user'}
 												>
 													<option value="admin">Admin</option>
@@ -295,7 +295,7 @@ export default function AdminUserDetailRoute({
 													id="user-id"
 													defaultValue={user.id}
 													disabled
-													className="mt-1 block w-full rounded-md border-gray-300 bg-gray-100 shadow-sm sm:text-sm"
+													className="mt-1 block w-full rounded-md border-gray-300 bg-gray-100 shadow-xs sm:text-sm"
 												/>
 											</div>
 
@@ -312,7 +312,7 @@ export default function AdminUserDetailRoute({
 													id="created-at"
 													defaultValue={String(user.createdAt)}
 													disabled
-													className="mt-1 block w-full rounded-md border-gray-300 bg-gray-100 shadow-sm sm:text-sm"
+													className="mt-1 block w-full rounded-md border-gray-300 bg-gray-100 shadow-xs sm:text-sm"
 												/>
 											</div>
 
@@ -329,7 +329,7 @@ export default function AdminUserDetailRoute({
 													id="updated-at"
 													defaultValue={String(user.updatedAt)}
 													disabled
-													className="mt-1 block w-full rounded-md border-gray-300 bg-gray-100 shadow-sm sm:text-sm"
+													className="mt-1 block w-full rounded-md border-gray-300 bg-gray-100 shadow-xs sm:text-sm"
 												/>
 											</div>
 										</div>
@@ -342,7 +342,7 @@ export default function AdminUserDetailRoute({
 											type="submit"
 											name="_action"
 											value="passwordReset"
-											className="hover:bg-indigo-700 inline-flex justify-center rounded-md border border-transparent bg-violet-700 px-4 py-2 text-sm font-medium text-white shadow-sm"
+											className="hover:bg-indigo-700 inline-flex justify-center rounded-md border border-transparent bg-violet-700 px-4 py-2 text-sm font-medium text-white shadow-xs"
 										>
 											Reset password
 										</button>
@@ -351,7 +351,7 @@ export default function AdminUserDetailRoute({
 											type="submit"
 											name="_action"
 											value="resendWelcomeMail"
-											className="hover:bg-indigo-700 inline-flex justify-center rounded-md border border-transparent bg-violet-700 px-4 py-2 text-sm font-medium text-white shadow-sm"
+											className="hover:bg-indigo-700 inline-flex justify-center rounded-md border border-transparent bg-violet-700 px-4 py-2 text-sm font-medium text-white shadow-xs"
 										>
 											Resend Welcome Mail
 										</button>
@@ -360,7 +360,7 @@ export default function AdminUserDetailRoute({
 											type="submit"
 											name="_action"
 											value="resendEmailConfirmation"
-											className="hover:bg-indigo-700 inline-flex justify-center rounded-md border border-transparent bg-violet-700 px-4 py-2 text-sm font-medium text-white shadow-sm"
+											className="hover:bg-indigo-700 inline-flex justify-center rounded-md border border-transparent bg-violet-700 px-4 py-2 text-sm font-medium text-white shadow-xs"
 										>
 											Resend Email Confirmation
 										</button>
@@ -371,7 +371,7 @@ export default function AdminUserDetailRoute({
 											type="submit"
 											name="_action"
 											value="delete"
-											className="inline-flex justify-center rounded-md border border-transparent bg-red-700 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-red-700"
+											className="inline-flex justify-center rounded-md border border-transparent bg-red-700 px-4 py-2 text-sm font-medium text-white shadow-xs hover:bg-red-700"
 											onClick={(e) => {
 												const ok = window.confirm(
 													'Are you sure you want to delete this user?',
@@ -386,7 +386,7 @@ export default function AdminUserDetailRoute({
 											type="submit"
 											name="_action"
 											value="update"
-											className="inline-flex justify-center rounded-md border border-transparent bg-blue-700 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700"
+											className="inline-flex justify-center rounded-md border border-transparent bg-blue-700 px-4 py-2 text-sm font-medium text-white shadow-xs hover:bg-blue-700"
 										>
 											Update user
 										</button>
@@ -415,7 +415,7 @@ export default function AdminUserDetailRoute({
 					</div>
 
 					<div className="mt-5 md:col-span-2 md:mt-0">
-						<div className="overflow-hidden shadow sm:rounded-md">
+						<div className="overflow-hidden shadow-sm sm:rounded-md">
 							<div className="space-y-6 bg-white px-4 py-5 sm:p-6">
 								<table>
 									<thead className="border-2 border-black">
diff --git a/app/routes/device.$deviceId.edit.location.tsx b/app/routes/device.$deviceId.edit.location.tsx
index cf773e82d..988dda848 100644
--- a/app/routes/device.$deviceId.edit.location.tsx
+++ b/app/routes/device.$deviceId.edit.location.tsx
@@ -192,7 +192,7 @@ export default function EditLocation() {
 											className={
 												'w-full rounded border border-gray-200 px-2 py-1 text-base' +
 												(!marker.latitude
-													? ' border-[#FF0000] shadow-[#FF0000] focus:border-[#FF0000] focus:shadow focus:shadow-[#FF0000]'
+													? ' border-[#FF0000] shadow-[#FF0000] focus:border-[#FF0000] focus:shadow-sm focus:shadow-[#FF0000]'
 													: '')
 											}
 										/>
@@ -230,7 +230,7 @@ export default function EditLocation() {
 											className={
 												'w-full rounded border border-gray-200 px-2 py-1 text-base' +
 												(!marker.longitude
-													? ' border-[#FF0000] shadow-[#FF0000] focus:border-[#FF0000] focus:shadow focus:shadow-[#FF0000]'
+													? ' border-[#FF0000] shadow-[#FF0000] focus:border-[#FF0000] focus:shadow-sm focus:shadow-[#FF0000]'
 													: '')
 											}
 										/>
diff --git a/app/routes/device.$deviceId.edit.script.tsx b/app/routes/device.$deviceId.edit.script.tsx
index 6877fc673..39e2489ed 100644
--- a/app/routes/device.$deviceId.edit.script.tsx
+++ b/app/routes/device.$deviceId.edit.script.tsx
@@ -109,7 +109,7 @@ export default function EditBoxSensors() {
 	return (
 		<div className="grid grid-rows-1">
 			<div className="flex min-h-full items-center justify-center">
-				<div className="flex-grow bg-white p-4 dark:bg-dark-boxes dark:text-dark-text">
+				<div className="grow bg-white p-4 dark:bg-dark-boxes dark:text-dark-text">
 					{deviceData?.model !== 'homeV2Wifi' ? (
 						<div className="flex flex-col items-center justify-center gap-4 py-16 text-center text-gray-500">
 							<p className="text-base">{t('no_script_for_model')}</p>
@@ -310,7 +310,7 @@ export default function EditBoxSensors() {
 								<Textarea
 									id="mqtt-connection-options"
 									placeholder={t('enter_connection_options')}
-									className="!min-h-[320px] resize-none"
+									className="min-h-[320px]! resize-none"
 									value={sketch}
 									readOnly
 								/>
diff --git a/app/routes/device.$deviceId.edit.sensors.tsx b/app/routes/device.$deviceId.edit.sensors.tsx
index 5b5e31839..1908b0d77 100644
--- a/app/routes/device.$deviceId.edit.sensors.tsx
+++ b/app/routes/device.$deviceId.edit.sensors.tsx
@@ -196,7 +196,7 @@ export default function EditBoxSensors() {
 							</p>
 						</div>
 
-						<ul className="mt-0 rounded-[3px] border-[1px] border-solid border-[#d1d5da] pt-0">
+						<ul className="mt-0 rounded-[3px] border border-solid border-[#d1d5da] pt-0">
 							{sensorsData?.map((sensor: any, index: number) => {
 								return (
 									<li
@@ -217,7 +217,7 @@ export default function EditBoxSensors() {
 											setSensorsData(reordered)
 											dragIndexRef.current = null
 										}}
-										className="border-t-[1px] border-solid border-[#e1e4e8] p-4"
+										className="border-t border-solid border-[#e1e4e8] p-4"
 									>
 										<div className="grid grid-cols-12">
 											{/* drag handle */}
@@ -256,7 +256,7 @@ export default function EditBoxSensors() {
 																		id="dropdownDefaultButton"
 																		type="button"
 																		// className="btn btn-default"
-																		className="btn btn-default rounded-bl-none rounded-tl-none border-l-[0px] px-[1px] pb-[4px] pt-[5px]"
+																		className="btn btn-default rounded-bl-none rounded-tl-none border-l-0 px-px pb-[4px] pt-[5px]"
 																		data-dropdown-toggle="dropdown"
 																	>
 																		<ChevronDownIcon className="m-0 inline h-6 w-6 p-0" />
@@ -296,7 +296,7 @@ export default function EditBoxSensors() {
 												)}
 											</div>
 											{/* middle -> sensor attributes */}
-											<div className="col-span-8 border-r-[1px] border-solid border-[#e1e4e8] sm:col-span-8">
+											<div className="col-span-8 border-r border-solid border-[#e1e4e8] sm:col-span-8">
 												{/* shown by default */}
 												{!sensor?.editing && (
 													<span className="table-cell align-middle leading-[1.75]">
@@ -339,7 +339,7 @@ export default function EditBoxSensors() {
 														<div className="mb-4">
 															<label
 																htmlFor="phenomenom"
-																className="mb-1 inline-block font-[700]"
+																className="mb-1 inline-block font-bold"
 															>
 																Phenomenon:
 															</label>
@@ -362,7 +362,7 @@ export default function EditBoxSensors() {
 														<div className="mb-4">
 															<label
 																htmlFor="unit"
-																className="mb-1 inline-block font-[700]"
+																className="mb-1 inline-block font-bold"
 															>
 																Unit:
 															</label>
@@ -385,7 +385,7 @@ export default function EditBoxSensors() {
 														<div className="mb-4">
 															<label
 																htmlFor="type"
-																className="mb-1 inline-block font-[700]"
+																className="mb-1 inline-block font-bold"
 															>
 																Type
 															</label>
diff --git a/app/routes/device.$deviceId.edit.tsx b/app/routes/device.$deviceId.edit.tsx
index 12c819626..b35ea4203 100644
--- a/app/routes/device.$deviceId.edit.tsx
+++ b/app/routes/device.$deviceId.edit.tsx
@@ -104,7 +104,7 @@ export default function EditBox() {
 						duration={3000}
 						onOpenChange={setToastOpen}
 						className={clsx(
-							'inset-x-4 bottom-4 z-50 w-auto rounded-lg border-[1px] border-[#bce8f1] shadow-lg md:bottom-auto md:left-auto md:right-4 md:top-4 md:w-full',
+							'inset-x-4 bottom-4 z-50 w-auto rounded-lg border border-[#bce8f1] shadow-lg md:bottom-auto md:left-auto md:right-4 md:top-4 md:w-full',
 							'bg-[#d9edf7] dark:bg-gray-800',
 							'radix-state-open:animate-toast-slide-in-bottom md:radix-state-open:animate-toast-slide-in-right',
 							'radix-state-closed:animate-toast-hide',
@@ -113,7 +113,7 @@ export default function EditBox() {
 							'radix-swipe-direction-down:radix-swipe-end:animate-toast-swipe-out-y',
 							'radix-swipe-direction-down:translate-y-radix-toast-swipe-move-y',
 							'radix-swipe-cancel:translate-x-0 radix-swipe-cancel:duration-200 radix-swipe-cancel:ease-&lsqb;ease&rsqb;',
-							'focus-visible:ring-purple-500 focus:outline-none focus-visible:ring focus-visible:ring-opacity-75',
+							'focus-visible:ring-purple-500 focus:outline-hidden focus-visible:ring-3 focus-visible:ring-opacity-75',
 						)}
 					>
 						<div className="flex">
diff --git a/app/routes/device.$deviceId.overview.tsx b/app/routes/device.$deviceId.overview.tsx
index 045c9cbc3..9ccbc06cb 100644
--- a/app/routes/device.$deviceId.overview.tsx
+++ b/app/routes/device.$deviceId.overview.tsx
@@ -64,7 +64,7 @@ export default function DeviceOverview() {
 				<Link to="/profile/me">{t('back_to_dashboard')}</Link>
 			</p>
 
-			<main className="mx-auto max-w-screen-xl">
+			<main className="mx-auto max-w-(--breakpoint-xl)">
 				<div className="space-y-0.5 text-center">
 					<h2 className="text-3xl font-bold tracking-normal">
 						{t('device_overview')}
@@ -78,14 +78,14 @@ export default function DeviceOverview() {
 					</CardHeader>
 					<CardContent>
 						<Table>
-							<TableBody className="border-[1px]">
+							<TableBody className="border">
 								<TableRow>
-									<TableCell className="border-r-[1px]">
+									<TableCell className="border-r">
 										{t('name_label')}
 									</TableCell>
-									<TableCell className="border-r-[1px] font-semibold">
+									<TableCell className="border-r font-semibold">
 										<div className="flex items-center">
-											<div className="flex-grow">{deviceData?.name}</div>
+											<div className="grow">{deviceData?.name}</div>
 											<div>
 												{copiedToClipboard === 'name' ? (
 													<CopyCheck />
@@ -102,37 +102,37 @@ export default function DeviceOverview() {
 								</TableRow>
 
 								<TableRow>
-									<TableCell className="border-r-[1px]">
+									<TableCell className="border-r">
 										{t('model_label')}
 									</TableCell>
-									<TableCell className="border-r-[1px] font-semibold">
+									<TableCell className="border-r font-semibold">
 										{deviceData?.model}
 									</TableCell>
 								</TableRow>
 
 								<TableRow>
-									<TableCell className="border-r-[1px]">
+									<TableCell className="border-r">
 										{t('tags_label')}
 									</TableCell>
-									<TableCell className="border-r-[1px] font-semibold">
+									<TableCell className="border-r font-semibold">
 										{deviceData?.tags?.join(', ')}
 									</TableCell>
 								</TableRow>
 
 								<TableRow>
-									<TableCell className="border-r-[1px]">
+									<TableCell className="border-r">
 										{t('exposure')}
 									</TableCell>
-									<TableCell className="border-r-[1px] font-semibold">
+									<TableCell className="border-r font-semibold">
 										{deviceData?.exposure}
 									</TableCell>
 								</TableRow>
 
 								<TableRow>
-									<TableCell className="border-r-[1px]">ID</TableCell>
-									<TableCell className="border-r-[1px] font-semibold">
+									<TableCell className="border-r">ID</TableCell>
+									<TableCell className="border-r font-semibold">
 										<div className="flex items-center">
-											<div className="flex-grow">{deviceData?.id}</div>
+											<div className="grow">{deviceData?.id}</div>
 											<div>
 												{copiedToClipboard === 'id' ? (
 													<CopyCheck />
@@ -150,12 +150,12 @@ export default function DeviceOverview() {
 
 								{userId === deviceData?.userId && (
 									<TableRow>
-										<TableCell className="border-r-[1px]">
+										<TableCell className="border-r">
 											{t('api_key_label')}
 										</TableCell>
-										<TableCell className="border-r-[1px] font-semibold">
+										<TableCell className="border-r font-semibold">
 											<div className="flex items-center">
-												<div className="flex-grow">{deviceData?.apiKey}</div>
+												<div className="grow">{deviceData?.apiKey}</div>
 												<div>
 													{copiedToClipboard === 'apiKey' ? (
 														<CopyCheck />
@@ -182,15 +182,15 @@ export default function DeviceOverview() {
 					</CardHeader>
 					<CardContent className="pt-0">
 						<Table>
-							<TableBody className="border-[1px]">
+							<TableBody className="border">
 								{sensorsData.map((sensor) => (
 									<TableRow key={sensor.id}>
-										<TableCell className="border-r-[1px]">
+										<TableCell className="border-r">
 											{sensor?.title}
 										</TableCell>
-										<TableCell className="border-r-[1px] font-semibold">
+										<TableCell className="border-r font-semibold">
 											<div className="flex items-center">
-												<div className="flex-grow">{sensor?.id}</div>
+												<div className="grow">{sensor?.id}</div>
 												<div>
 													{copiedToClipboard ===
 													`${sensor?.title}_${sensor?.id}` ? (
diff --git a/app/routes/device.dashboard.$deviceId.tsx b/app/routes/device.dashboard.$deviceId.tsx
index cba819f22..a6ed6224f 100644
--- a/app/routes/device.dashboard.$deviceId.tsx
+++ b/app/routes/device.dashboard.$deviceId.tsx
@@ -218,7 +218,7 @@ export default function DeviceDashboard() {
 											<span className="align-bottom text-[18px]">
 												{sensor.title}{' '}
 											</span>
-											<span className="rounded border px-[2px] py-[1px] text-xs">
+											<span className="rounded border px-[2px] py-px text-xs">
 												{sensor.sensorType}
 											</span>
 										</CardDescription>
diff --git a/app/routes/device.new.tsx b/app/routes/device.new.tsx
index c1f40bf77..2a4d749a9 100644
--- a/app/routes/device.new.tsx
+++ b/app/routes/device.new.tsx
@@ -78,7 +78,7 @@ export default function NewDevice() {
 	return (
 		<div className="flex h-screen flex-col">
 			<NavBar />
-			<div className="flex-grow overflow-auto bg-gray-100">
+			<div className="grow overflow-auto bg-gray-100">
 				<div className="flex h-full w-full justify-center py-10">
 					<div className="flex h-full w-full items-center justify-center rounded-lg p-6 dark:bg-transparent dark:text-dark-text dark:shadow-none">
 						<ValidationStepperForm />
diff --git a/app/routes/explore.forgot.tsx b/app/routes/explore.forgot.tsx
index 642ae1465..5c8ba4f5f 100644
--- a/app/routes/explore.forgot.tsx
+++ b/app/routes/explore.forgot.tsx
@@ -99,7 +99,7 @@ export default function ForgotPasswordPage() {
 			</Link>
 			<Card className="z-50 w-full max-w-md">
 				{navigation.state === 'loading' && (
-					<div className="bg-white/30 dark:bg-zinc-800/30 absolute inset-0 z-50 flex items-center justify-center backdrop-blur-sm">
+					<div className="bg-white/30 dark:bg-zinc-800/30 absolute inset-0 z-50 flex items-center justify-center backdrop-blur-xs">
 						<Spinner />
 					</div>
 				)}
diff --git a/app/routes/explore.login.tsx b/app/routes/explore.login.tsx
index b5594eeee..bf157adde 100644
--- a/app/routes/explore.login.tsx
+++ b/app/routes/explore.login.tsx
@@ -143,7 +143,7 @@ export default function LoginPage() {
 			</Link>
 			<Card className="z-50 w-full max-w-md">
 				{navigation.state === 'loading' && (
-					<div className="bg-white/30 dark:bg-zinc-800/30 absolute inset-0 z-50 flex items-center justify-center backdrop-blur-sm">
+					<div className="bg-white/30 dark:bg-zinc-800/30 absolute inset-0 z-50 flex items-center justify-center backdrop-blur-xs">
 						<Spinner />
 					</div>
 				)}
diff --git a/app/routes/explore.register.tsx b/app/routes/explore.register.tsx
index 0f63908e2..220ad1310 100644
--- a/app/routes/explore.register.tsx
+++ b/app/routes/explore.register.tsx
@@ -292,7 +292,7 @@ export default function RegisterDialog() {
 			</Link>
 			<Card className="z-50 w-full max-w-md">
 				{navigation.state === 'loading' && (
-					<div className="bg-white/30 dark:bg-zinc-800/30 absolute inset-0 z-50 flex items-center justify-center backdrop-blur-sm">
+					<div className="bg-white/30 dark:bg-zinc-800/30 absolute inset-0 z-50 flex items-center justify-center backdrop-blur-xs">
 						<Spinner />
 					</div>
 				)}
diff --git a/app/routes/imprint.tsx b/app/routes/imprint.tsx
index 21a2d7937..2a38c3a09 100644
--- a/app/routes/imprint.tsx
+++ b/app/routes/imprint.tsx
@@ -75,7 +75,7 @@ export default function Imprint({
 			<header>
 				<nav className="relative mx-auto flex h-16 max-w-7xl justify-between py-6 dark:border-gray-300 dark:bg-black">
 					<div className="container flex flex-wrap items-center justify-between px-4 font-serif">
-						<div className="flex max-w-screen-xl flex-wrap items-center justify-between">
+						<div className="flex max-w-(--breakpoint-xl) flex-wrap items-center justify-between">
 							<Link to="/" className="flex items-center md:pr-10">
 								<img
 									src="/logo.png"
diff --git a/app/styles/tailwind.css b/app/styles/tailwind.css
index 1cba1b01e..241b9e713 100644
--- a/app/styles/tailwind.css
+++ b/app/styles/tailwind.css
@@ -1,6 +1,379 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@plugin 'tailwindcss-animate';
+@plugin '@tailwindcss/typography';
+
+@custom-variant dark (&:is(.dark *));
+
+@utility container {
+  margin-inline: auto;
+  padding-inline: 2rem;
+  @media (width >= --theme(--breakpoint-sm)) {
+    max-width: none;
+  }
+  @media (width >= 1400px) {
+    max-width: 1400px;
+  }
+}
+
+@theme {
+  --color-*: initial;
+  --color-transparent: transparent;
+  --color-current: currentColor;
+  --color-white: var(--color-white);
+  --color-black: var(--color-black);
+
+  --color-gray-50: var(--color-gray-50);
+  --color-gray-100: var(--color-gray-100);
+  --color-gray-200: var(--color-gray-200);
+  --color-gray-300: var(--color-gray-300);
+  --color-gray-400: var(--color-gray-400);
+  --color-gray-500: var(--color-gray-500);
+  --color-gray-600: var(--color-gray-600);
+  --color-gray-700: var(--color-gray-700);
+  --color-gray-800: var(--color-gray-800);
+  --color-gray-900: var(--color-gray-900);
+  --color-gray-950: var(--color-gray-950);
+
+  --color-zinc-50: var(--color-zinc-50);
+  --color-zinc-100: var(--color-zinc-100);
+  --color-zinc-200: var(--color-zinc-200);
+  --color-zinc-300: var(--color-zinc-300);
+  --color-zinc-400: var(--color-zinc-400);
+  --color-zinc-500: var(--color-zinc-500);
+  --color-zinc-600: var(--color-zinc-600);
+  --color-zinc-700: var(--color-zinc-700);
+  --color-zinc-800: var(--color-zinc-800);
+  --color-zinc-900: var(--color-zinc-900);
+
+  --color-slate-50: #f8fafc;
+  --color-slate-100: #f1f5f9;
+  --color-slate-200: #e2e8f0;
+  --color-slate-300: #cbd5e1;
+  --color-slate-400: #94a3b8;
+  --color-slate-500: #64748b;
+  --color-slate-600: #475569;
+  --color-slate-700: #334155;
+  --color-slate-800: #1e293b;
+  --color-slate-900: #0f172a;
+  --color-slate-950: #020617;
+
+  --color-green-50: var(--color-green-50);
+  --color-green-100: var(--color-green-100);
+  --color-green-200: var(--color-green-200);
+  --color-green-300: var(--color-green-300);
+  --color-green-400: var(--color-green-400);
+  --color-green-500: var(--color-green-500);
+  --color-green-700: var(--color-green-700);
+  --color-green-900: var(--color-green-900);
+  --color-green-950: var(--color-green-950);
+
+  --color-blue-50: var(--color-blue-50);
+  --color-blue-100: var(--color-blue-100);
+  --color-blue-200: var(--color-blue-200);
+  --color-blue-300: var(--color-blue-300);
+  --color-blue-400: var(--color-blue-400);
+  --color-blue-500: var(--color-blue-500);
+  --color-blue-700: var(--color-blue-700);
+  --color-blue-900: var(--color-blue-900);
+
+  --color-red-50: var(--color-red-50);
+  --color-red-100: var(--color-red-100);
+  --color-red-200: var(--color-red-200);
+  --color-red-300: var(--color-red-300);
+  --color-red-400: var(--color-red-400);
+  --color-red-500: var(--color-red-500);
+  --color-red-700: var(--color-red-700);
+  --color-red-900: var(--color-red-900);
+
+  --color-orange-500: var(--color-orange-500);
+
+  --color-violet-50: var(--color-violet-50);
+  --color-violet-100: var(--color-violet-100);
+  --color-violet-200: var(--color-violet-200);
+  --color-violet-300: var(--color-violet-300);
+  --color-violet-400: var(--color-violet-400);
+  --color-violet-500: var(--color-violet-500);
+  --color-violet-700: var(--color-violet-700);
+  --color-violet-900: var(--color-violet-900);
+
+  --color-yellow-50: var(--color-yellow-50);
+  --color-yellow-100: var(--color-yellow-100);
+  --color-yellow-200: var(--color-yellow-200);
+  --color-yellow-300: var(--color-yellow-300);
+  --color-yellow-400: var(--color-yellow-400);
+  --color-yellow-500: var(--color-yellow-500);
+  --color-yellow-700: var(--color-yellow-700);
+  --color-yellow-900: var(--color-yellow-900);
+
+  --color-sensorWiki: var(--color-yellow-sensorWiki);
+  --color-headerBorder: var(--color-headerBorder);
+
+  --color-logo-green: #4fae48;
+  --color-logo-blue: #00b4e4;
+
+  --color-light-menu: #727373;
+  --color-light-text: #363636;
+  --color-light-green: #3d843f;
+  --color-light-blue: #037ea1;
+
+  --color-dark-title: FFFFFF;
+  --color-dark-menu: #d2d1d0;
+  --color-dark-text: #d2d1d0;
+  --color-dark-green: #6fa161;
+  --color-dark-blue: #0386aa;
+  --color-dark-background: #242424;
+  --color-dark-boxes: #3b3a3a;
+
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+
+  --font-sans:
+    Urbanist, ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-serif:
+    RobotoSlab, ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
+  --font-monospace: Courier New, Courier, monospace;
+  --font-helvetica: Helvetica, Arial, sans-serif;
+
+  --animate-fade-in-up: fade-in-up 1s ease-out;
+  --animate-sidebarOpen: sidebarOpen 300ms ease-out;
+  --animate-sidebarClose: sidebarClose 300ms ease-out;
+  --animate-contentShow: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-contentClose: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+
+  @keyframes sidebarOpen {
+    from {
+      transform: translateX(100%);
+    }
+    to {
+      transform: translateX(O);
+    }
+  }
+  @keyframes sidebarClose {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(100%);
+    }
+  }
+  @keyframes contentShow {
+    from {
+      opacity: 0;
+      transform: translate(-50%, 0%) scale(0.5);
+    }
+    to {
+      opacity: 1;
+      transform: translate(-50%, 0%) scale(1);
+    }
+  }
+  @keyframes contentClose {
+    from {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: translate(-50%, -48%) scale(0.5);
+    }
+  }
+  @keyframes fade-in-up {
+    0% {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  @keyframes pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+  }
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+/*
+  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);
+  }
+}
+
+@utility appearance-auto {
+  appearance: auto;
+}
+@utility btn {
+  display: inline-block;
+  padding: 6px 12px;
+  margin-bottom: 0;
+  font-size: 14.5px;
+  font-weight: 400;
+  line-height: 1.42857143;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-image: none;
+  border: 1px solid transparent;
+  border-radius: 4px;
+}
+@utility btn-primary {
+  color: #fff;
+  background-color: #337ab7;
+  border-color: #2e6da4;
+}
+@utility btn-default {
+  color: #333;
+  background-color: #fff;
+  border-color: #ccc;
+}
+@utility kbd {
+  padding: 3px 4px;
+  font-size: 90%;
+  color: #fff;
+  background-color: #333;
+  border-radius: 3px;
+  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+@utility form-control {
+  display: block;
+  width: 100%;
+  height: 34px;
+  padding: 6px 12px;
+  font-size: 14px;
+  line-height: 1.42857143;
+  color: #555;
+  background-color: #fff;
+  background-image: none;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  -webkit-transition:
+    border-color ease-in-out 0.15s,
+    -webkit-box-shadow ease-in-out 0.15s;
+  -o-transition:
+    border-color ease-in-out 0.15s,
+    box-shadow ease-in-out 0.15s;
+  transition:
+    border-color ease-in-out 0.15s,
+    box-shadow ease-in-out 0.15s;
+
+  &:focus {
+    border-color: #66afe9;
+    outline: 0;
+    -webkit-box-shadow:
+      inset 0 1px 1px rgba(0, 0, 0, 0.075),
+      0 0 8px rgba(102, 175, 233, 0.6);
+    box-shadow:
+      inset 0 1px 1px rgba(0, 0, 0, 0.075),
+      0 0 8px rgba(102, 175, 233, 0.6);
+  }
+}
+@utility input-group-btn {
+  width: 1%;
+  white-space: nowrap;
+  vertical-align: middle;
+  position: relative;
+  display: table-cell;
+}
+@utility donate-dev {
+  background: transparent
+    url('https://www.betterplace.org/assets/new_spinner.gif') 275px 20px
+    no-repeat;
+}
+@utility donate-iframe {
+  max-width: 600px;
+  max-height: none;
+  width: 100%;
+  background-color: transparent;
+  overflow: hidden;
+  height: 994px;
+}
+
+/* Custom utilities */
+@utility no-scrollbar {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
 
 @layer base {
 	* {
@@ -80,7 +453,8 @@
 	}
 }
 
-/* @layer base {
+@layer utilities {
+  /* @layer base {
   * {
     @apply border-border;
   }
@@ -90,165 +464,46 @@
   }
 } */
 
-/* tailwind is configured to prefer this font */
-@font-face {
-	font-family: 'RobotoSlab';
-	src:
-		url('/fonts/RobotoSlab-Medium.woff2') format('woff2'),
-		url('/fonts/RobotoSlab-Medium.woff') format('woff');
-	font-weight: 500;
-	font-style: normal;
-	font-display: swap;
-}
-
-@font-face {
-	font-family: 'Matter';
-	src:
-		url('/fonts/RobotoSlab-Regular.woff2') format('woff2'),
-		url('/fonts/RobotoSlab-Regular.woff') format('woff');
-	font-weight: normal;
-	font-style: normal;
-	font-display: swap;
-}
-
-@font-face {
-	font-family: 'Urbanist';
-	src:
-		url('/fonts/Urbanist-Medium.woff2') format('woff2'),
-		url('/fonts/Urbanist-Medium.woff') format('woff');
-	font-weight: 500;
-	font-style: normal;
-	font-display: swap;
-}
-
-@font-face {
-	font-family: 'Matter';
-	src:
-		url('/fonts/Urbanist-Regular.woff2') format('woff2'),
-		url('/fonts/Urbanist-Regular.woff') format('woff');
-	font-weight: normal;
-	font-style: normal;
-	font-display: swap;
-}
-
-/* Custom styles */
-@layer components {
-	.appearance-auto {
-		appearance: auto;
-	}
-	.btn {
-		display: inline-block;
-		padding: 6px 12px;
-		margin-bottom: 0;
-		font-size: 14.5px;
-		font-weight: 400;
-		line-height: 1.42857143;
-		text-align: center;
-		white-space: nowrap;
-		vertical-align: middle;
-		-ms-touch-action: manipulation;
-		touch-action: manipulation;
-		cursor: pointer;
-		-webkit-user-select: none;
-		-moz-user-select: none;
-		-ms-user-select: none;
-		user-select: none;
-		background-image: none;
-		border: 1px solid transparent;
-		border-radius: 4px;
-	}
-
-	.btn-primary {
-		color: #fff;
-		background-color: #337ab7;
-		border-color: #2e6da4;
-	}
-
-	.btn-default {
-		color: #333;
-		background-color: #fff;
-		border-color: #ccc;
-	}
-	.kbd {
-		padding: 3px 4px;
-		font-size: 90%;
-		color: #fff;
-		background-color: #333;
-		border-radius: 3px;
-		-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
-		box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
-	}
-
-	.form-control {
-		display: block;
-		width: 100%;
-		height: 34px;
-		padding: 6px 12px;
-		font-size: 14px;
-		line-height: 1.42857143;
-		color: #555;
-		background-color: #fff;
-		background-image: none;
-		border: 1px solid #ccc;
-		border-radius: 4px;
-		-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-		box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-		-webkit-transition:
-			border-color ease-in-out 0.15s,
-			-webkit-box-shadow ease-in-out 0.15s;
-		-o-transition:
-			border-color ease-in-out 0.15s,
-			box-shadow ease-in-out 0.15s;
-		transition:
-			border-color ease-in-out 0.15s,
-			box-shadow ease-in-out 0.15s;
-	}
-
-	.form-control:focus {
-		border-color: #66afe9;
-		outline: 0;
-		-webkit-box-shadow:
-			inset 0 1px 1px rgba(0, 0, 0, 0.075),
-			0 0 8px rgba(102, 175, 233, 0.6);
-		box-shadow:
-			inset 0 1px 1px rgba(0, 0, 0, 0.075),
-			0 0 8px rgba(102, 175, 233, 0.6);
-	}
-
-	.input-group-btn {
-		width: 1%;
-		white-space: nowrap;
-		vertical-align: middle;
-		position: relative;
-		display: table-cell;
-	}
+  /* tailwind is configured to prefer this font */
+  @font-face {
+    font-family: 'RobotoSlab';
+    src:
+      url('/fonts/RobotoSlab-Medium.woff2') format('woff2'),
+      url('/fonts/RobotoSlab-Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+  }
 
-	.donate-dev {
-		background: transparent
-			url('https://www.betterplace.org/assets/new_spinner.gif') 275px 20px
-			no-repeat;
-	}
+  @font-face {
+    font-family: 'Matter';
+    src:
+      url('/fonts/RobotoSlab-Regular.woff2') format('woff2'),
+      url('/fonts/RobotoSlab-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+  }
 
-	.donate-iframe {
-		max-width: 600px;
-		max-height: none;
-		width: 100%;
-		background-color: transparent;
-		overflow: hidden;
-		height: 994px;
-	}
-}
+  @font-face {
+    font-family: 'Urbanist';
+    src:
+      url('/fonts/Urbanist-Medium.woff2') format('woff2'),
+      url('/fonts/Urbanist-Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+  }
 
-/* Custom utilities */
-@layer utilities {
-	/* Hide scrollbar for Chrome, Safari and Opera */
-	.no-scrollbar::-webkit-scrollbar {
-		display: none;
-	}
+  @font-face {
+    font-family: 'Matter';
+    src:
+      url('/fonts/Urbanist-Regular.woff2') format('woff2'),
+      url('/fonts/Urbanist-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+    font-display: swap;
+  }
 
-	/* Hide scrollbar for IE, Edge and Firefox */
-	.no-scrollbar {
-		-ms-overflow-style: none; /* IE and Edge */
-		scrollbar-width: none; /* Firefox */
-	}
+  /* Custom styles */
 }
diff --git a/package-lock.json b/package-lock.json
index 001038748..4b6a23a86 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -143,6 +143,7 @@
         "@react-router/dev": "^7.12.0",
         "@react-router/fs-routes": "^7.12.0",
         "@tailwindcss/forms": "^0.5.10",
+        "@tailwindcss/postcss": "^4.2.2",
         "@tailwindcss/typography": "^0.5.16",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.6.3",
@@ -171,7 +172,6 @@
         "@vitejs/plugin-react": "^5.1.4",
         "@vitest/coverage-v8": "^4.0.15",
         "@vitest/ui": "^4.0.15",
-        "autoprefixer": "^10.4.21",
         "cookie": "^1.0.2",
         "cssnano": "^7.0.7",
         "csvtojson": "^2.0.14",
@@ -188,12 +188,12 @@
         "postcss": "^8.5.8",
         "postcss-cli": "^11.0.1",
         "prettier": "3.6.2",
-        "prettier-plugin-tailwindcss": "^0.6.14",
+        "prettier-plugin-tailwindcss": "^0.7.2",
         "react-email": "5.0.6",
         "remark-frontmatter": "^5.0.0",
         "shadcn-ui": "^0.9.5",
         "start-server-and-test": "^2.1.5",
-        "tailwindcss": "^3.4.18",
+        "tailwindcss": "^4.2.2",
         "tsconfig-paths": "^4.2.0",
         "tsx": "^4.20.6",
         "typescript": "5.8.3",
@@ -3132,6 +3132,93 @@
         "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
       }
     },
+    "node_modules/@epic-web/config/node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.6.14",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.14.tgz",
+      "integrity": "sha512-pi2e/+ZygeIqntN+vC573BcW5Cve8zUB0SSAGxqpB4f96boZF4M3phPVoOFCeypwkpRYdi7+jQ5YJJUwrkGUAg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-hermes": "*",
+        "@prettier/plugin-oxc": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "@zackad/prettier-plugin-twig": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-multiline-arrays": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-sort-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-hermes": {
+          "optional": true
+        },
+        "@prettier/plugin-oxc": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@zackad/prettier-plugin-twig": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-multiline-arrays": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@esbuild-kit/core-utils": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/@esbuild-kit/core-utils/-/core-utils-3.3.2.tgz",
@@ -5914,17 +6001,6 @@
         "@noble/hashes": "^1.1.5"
       }
     },
-    "node_modules/@pkgjs/parseargs": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
-      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=14"
-      }
-    },
     "node_modules/@playwright/test": {
       "version": "1.56.0",
       "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.56.0.tgz",
@@ -7527,12 +7603,6 @@
         }
       }
     },
-    "node_modules/@react-email/tailwind/node_modules/tailwindcss": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
-      "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
-      "license": "MIT"
-    },
     "node_modules/@react-email/text": {
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/@react-email/text/-/text-0.1.6.tgz",
@@ -9736,140 +9806,411 @@
         "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1 || >= 4.0.0-alpha.20 || >= 4.0.0-beta.1"
       }
     },
-    "node_modules/@tailwindcss/typography": {
-      "version": "0.5.19",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.19.tgz",
-      "integrity": "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==",
+    "node_modules/@tailwindcss/node": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.2.2.tgz",
+      "integrity": "sha512-pXS+wJ2gZpVXqFaUEjojq7jzMpTGf8rU6ipJz5ovJV6PUGmlJ+jvIwGrzdHdQ80Sg+wmQxUFuoW1UAAwHNEdFA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "postcss-selector-parser": "6.0.10"
-      },
-      "peerDependencies": {
-        "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
-      }
-    },
-    "node_modules/@tanstack/query-core": {
-      "version": "4.41.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.41.0.tgz",
-      "integrity": "sha512-193R4Jp9hjvlij6LryxrB5Mpbffd2L9PeWh3KlIy/hJV4SkBOfiQZ+jc5qAZLDCrdbkA5FjGj+UoDYw6TcNnyA==",
-      "license": "MIT",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
+        "@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"
       }
     },
-    "node_modules/@tanstack/react-query": {
-      "version": "4.41.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.41.0.tgz",
-      "integrity": "sha512-4/euCZAv8zeaB5P/nQiySzB0JHM3tiraU9KjSvSlJAX7oIE9uPDZlHCkDg/bHYNXewzvsg0FtOMq0VUq8XMMOQ==",
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.2.2.tgz",
+      "integrity": "sha512-qEUA07+E5kehxYp9BVMpq9E8vnJuBHfJEC0vPC5e7iL/hw7HR61aDKoVoKzrG+QKp56vhNZe4qwkRmMC0zDLvg==",
+      "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@tanstack/query-core": "4.41.0",
-        "use-sync-external-store": "^1.2.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-native": "*"
+      "engines": {
+        "node": ">= 20"
       },
-      "peerDependenciesMeta": {
-        "react-dom": {
-          "optional": true
-        },
-        "react-native": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@tanstack/react-table": {
-      "version": "8.21.3",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.21.3.tgz",
-      "integrity": "sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==",
+      "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"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.2.2.tgz",
+      "integrity": "sha512-dXGR1n+P3B6748jZO/SvHZq7qBOqqzQ+yFrXpoOWWALWndF9MoSKAT3Q0fYgAzYzGhxNYOoysRvYlpixRBBoDg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@tanstack/table-core": "8.21.3"
-      },
+      "optional": true,
+      "os": [
+        "android"
+      ],
       "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
-      },
-      "peerDependencies": {
-        "react": ">=16.8",
-        "react-dom": ">=16.8"
+        "node": ">= 20"
       }
     },
-    "node_modules/@tanstack/table-core": {
-      "version": "8.21.3",
-      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.21.3.tgz",
-      "integrity": "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==",
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.2.2.tgz",
+      "integrity": "sha512-iq9Qjr6knfMpZHj55/37ouZeykwbDqF21gPFtfnhCCKGDcPI/21FKC9XdMO/XyBM7qKORx6UIhGgg6jLl7BZlg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
       "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
       "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/tannerlinsley"
+        "node": ">= 20"
       }
     },
-    "node_modules/@testing-library/dom": {
-      "version": "10.4.1",
-      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
-      "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.2.2.tgz",
+      "integrity": "sha512-BlR+2c3nzc8f2G639LpL89YY4bdcIdUmiOOkv2GQv4/4M0vJlpXEa0JXNHhCHU7VWOKWT/CjqHdTP8aUuDJkuw==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@babel/code-frame": "^7.10.4",
-        "@babel/runtime": "^7.12.5",
-        "@types/aria-query": "^5.0.1",
-        "aria-query": "5.3.0",
-        "dom-accessibility-api": "^0.5.9",
-        "lz-string": "^1.5.0",
-        "picocolors": "1.1.1",
-        "pretty-format": "^27.0.2"
-      },
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
       "engines": {
-        "node": ">=18"
+        "node": ">= 20"
       }
     },
-    "node_modules/@testing-library/jest-dom": {
-      "version": "6.9.1",
-      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.9.1.tgz",
-      "integrity": "sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==",
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.2.2.tgz",
+      "integrity": "sha512-YUqUgrGMSu2CDO82hzlQ5qSb5xmx3RUrke/QgnoEx7KvmRJHQuZHZmZTLSuuHwFf0DJPybFMXMYf+WJdxHy/nQ==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@adobe/css-tools": "^4.4.0",
-        "aria-query": "^5.0.0",
-        "css.escape": "^1.5.1",
-        "dom-accessibility-api": "^0.6.3",
-        "picocolors": "^1.1.1",
-        "redent": "^3.0.0"
-      },
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
       "engines": {
-        "node": ">=14",
-        "npm": ">=6",
-        "yarn": ">=1"
+        "node": ">= 20"
       }
     },
-    "node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": {
-      "version": "0.6.3",
-      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
-      "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/@testing-library/react": {
-      "version": "16.3.0",
-      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.0.tgz",
-      "integrity": "sha512-kFSyxiEDwv1WLl2fgsq6pPBbw5aWKrsY2/noi1Id0TK0UParSF62oFQFGHXIyaG4pp2tEub/Zlel+fjjZILDsw==",
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.2.2.tgz",
+      "integrity": "sha512-FPdhvsW6g06T9BWT0qTwiVZYE2WIFo2dY5aCSpjG/S/u1tby+wXoslXS0kl3/KXnULlLr1E3NPRRw0g7t2kgaQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.2.2.tgz",
+      "integrity": "sha512-4og1V+ftEPXGttOO7eCmW7VICmzzJWgMx+QXAJRAhjrSjumCwWqMfkDrNu1LXEQzNAwz28NCUpucgQPrR4S2yw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.2.2.tgz",
+      "integrity": "sha512-oCfG/mS+/+XRlwNjnsNLVwnMWYH7tn/kYPsNPh+JSOMlnt93mYNCKHYzylRhI51X+TbR+ufNhhKKzm6QkqX8ag==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.2.2.tgz",
+      "integrity": "sha512-rTAGAkDgqbXHNp/xW0iugLVmX62wOp2PoE39BTCGKjv3Iocf6AFbRP/wZT/kuCxC9QBh9Pu8XPkv/zCZB2mcMg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.2.2.tgz",
+      "integrity": "sha512-XW3t3qwbIwiSyRCggeO2zxe3KWaEbM0/kW9e8+0XpBgyKU4ATYzcVSMKteZJ1iukJ3HgHBjbg9P5YPRCVUxlnQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.2.2.tgz",
+      "integrity": "sha512-eKSztKsmEsn1O5lJ4ZAfyn41NfG7vzCg496YiGtMDV86jz1q/irhms5O0VrY6ZwTUkFy/EKG3RfWgxSI3VbZ8Q==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.8.1",
+        "@emnapi/runtime": "^1.8.1",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.1.1",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.2.2.tgz",
+      "integrity": "sha512-qPmaQM4iKu5mxpsrWZMOZRgZv1tOZpUm+zdhhQP0VhJfyGGO3aUKdbh3gDZc/dPLQwW4eSqWGrrcWNBZWUWaXQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.2.2.tgz",
+      "integrity": "sha512-1T/37VvI7WyH66b+vqHj/cLwnCxt7Qt3WFu5Q8hk65aOvlwAhs7rAp1VkulBJw/N4tMirXjVnylTR72uI0HGcA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.2.2.tgz",
+      "integrity": "sha512-n4goKQbW8RVXIbNKRB/45LzyUqN451deQK0nzIeauVEqjlI49slUlgKYJM2QyUzap/PcpnS7kzSUmPb1sCRvYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.2.2",
+        "@tailwindcss/oxide": "4.2.2",
+        "postcss": "^8.5.6",
+        "tailwindcss": "4.2.2"
+      }
+    },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.19",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.19.tgz",
+      "integrity": "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
+      }
+    },
+    "node_modules/@tanstack/query-core": {
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.41.0.tgz",
+      "integrity": "sha512-193R4Jp9hjvlij6LryxrB5Mpbffd2L9PeWh3KlIy/hJV4SkBOfiQZ+jc5qAZLDCrdbkA5FjGj+UoDYw6TcNnyA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/react-query": {
+      "version": "4.41.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.41.0.tgz",
+      "integrity": "sha512-4/euCZAv8zeaB5P/nQiySzB0JHM3tiraU9KjSvSlJAX7oIE9uPDZlHCkDg/bHYNXewzvsg0FtOMq0VUq8XMMOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/query-core": "4.41.0",
+        "use-sync-external-store": "^1.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-native": "*"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@tanstack/react-table": {
+      "version": "8.21.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.21.3.tgz",
+      "integrity": "sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/table-core": "8.21.3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
+    "node_modules/@tanstack/table-core": {
+      "version": "8.21.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.21.3.tgz",
+      "integrity": "sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@testing-library/dom": {
+      "version": "10.4.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
+      "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "5.3.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "picocolors": "1.1.1",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@testing-library/jest-dom": {
+      "version": "6.9.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-6.9.1.tgz",
+      "integrity": "sha512-zIcONa+hVtVSSep9UT3jZ5rizo2BsxgyDYU7WFD5eICBE7no3881HGeb/QkGfsJs6JTkY1aQhT7rIPC7e+0nnA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@adobe/css-tools": "^4.4.0",
+        "aria-query": "^5.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.6.3",
+        "picocolors": "^1.1.1",
+        "redent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/dom-accessibility-api": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.6.3.tgz",
+      "integrity": "sha512-7ZgogeTnjuHbo+ct10G9Ffp0mif17idi0IyWNVA/wcwcm7NPOD/WEHVP3n7n3MhXqxoIYm8d6MuZohYWIZ4T3w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@testing-library/react": {
+      "version": "16.3.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-16.3.0.tgz",
+      "integrity": "sha512-kFSyxiEDwv1WLl2fgsq6pPBbw5aWKrsY2/noi1Id0TK0UParSF62oFQFGHXIyaG4pp2tEub/Zlel+fjjZILDsw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -11589,13 +11930,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/any-promise": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -11881,48 +12215,10 @@
     "node_modules/autolinker": {
       "version": "3.16.2",
       "resolved": "https://registry.npmjs.org/autolinker/-/autolinker-3.16.2.tgz",
-      "integrity": "sha512-JiYl7j2Z19F9NdTmirENSUUIIL/9MytEWtmzhfmsKPCp9E+G35Y0UNCMoM9tFigxT59qSc8Ml2dlZXOCVTYwuA==",
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "^2.3.0"
-      }
-    },
-    "node_modules/autoprefixer": {
-      "version": "10.4.21",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz",
-      "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "browserslist": "^4.24.4",
-        "caniuse-lite": "^1.0.30001702",
-        "fraction.js": "^4.3.7",
-        "normalize-range": "^0.1.2",
-        "picocolors": "^1.1.1",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "bin": {
-        "autoprefixer": "bin/autoprefixer"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
+      "integrity": "sha512-JiYl7j2Z19F9NdTmirENSUUIIL/9MytEWtmzhfmsKPCp9E+G35Y0UNCMoM9tFigxT59qSc8Ml2dlZXOCVTYwuA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
       }
     },
     "node_modules/available-typed-arrays": {
@@ -12464,16 +12760,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/camelcase-css": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/camelcase-keys": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
@@ -14173,7 +14459,6 @@
       "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
       "dev": true,
       "license": "Apache-2.0",
-      "optional": true,
       "engines": {
         "node": ">=8"
       }
@@ -14198,20 +14483,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/didyoumean": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true,
-      "license": "Apache-2.0"
-    },
-    "node_modules/dlv": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/doctrine": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
@@ -15170,6 +15441,20 @@
         }
       }
     },
+    "node_modules/enhanced-resolve": {
+      "version": "5.20.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.20.1.tgz",
+      "integrity": "sha512-Qohcme7V1inbAfvjItgw0EaxVX5q2rdVEZHRBrEQdRZTssLDGsL8Lwrznl8oQ/6kuTJONLaDcGjkNP247XEhcA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/entities": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
@@ -16733,20 +17018,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/fraction.js": {
-      "version": "4.3.7",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
-      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "type": "patreon",
-        "url": "https://github.com/sponsors/rawify"
-      }
-    },
     "node_modules/frame-ticker": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/frame-ticker/-/frame-ticker-1.0.3.tgz",
@@ -17100,27 +17371,6 @@
       "integrity": "sha512-latSnyDNt/8zYUB6VIJ6PCh2jBjJX6gnDsoCZ7LyW7GkqrD51EWwa9qCoGixj8YqBtETQK/xY7OmpTF8xz1DdQ==",
       "license": "MIT"
     },
-    "node_modules/glob": {
-      "version": "10.4.5",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
-      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "package-json-from-dist": "^1.0.0",
-        "path-scurry": "^1.11.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -17134,32 +17384,6 @@
         "node": ">=10.13.0"
       }
     },
-    "node_modules/glob/node_modules/brace-expansion": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
-      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/glob/node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/globals": {
       "version": "16.4.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-16.4.0.tgz",
@@ -18606,22 +18830,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/jackspeak": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
-      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "@isaacs/cliui": "^8.0.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      },
-      "optionalDependencies": {
-        "@pkgjs/parseargs": "^0.11.0"
-      }
-    },
     "node_modules/jerrypick": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/jerrypick/-/jerrypick-1.1.2.tgz",
@@ -18632,13 +18840,13 @@
       }
     },
     "node_modules/jiti": {
-      "version": "1.21.7",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
-      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
       "dev": true,
       "license": "MIT",
       "bin": {
-        "jiti": "bin/jiti.js"
+        "jiti": "lib/jiti-cli.mjs"
       }
     },
     "node_modules/joi": {
@@ -18940,21 +19148,282 @@
       "integrity": "sha512-y+SqErxb8h7nE/fiEX07jsbuhrpO9lL8eca7/Y1nuWV2moNlXhyd59iDGcRf6moVyDMbmTNzL40SUyrFU/yDpg==",
       "license": "MIT",
       "funding": {
-        "url": "https://ko-fi.com/killymxi"
+        "url": "https://ko-fi.com/killymxi"
+      }
+    },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "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"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/levn": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
-      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "cpu": [
+        "x64"
+      ],
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "prelude-ls": "^1.2.1",
-        "type-check": "~0.4.0"
-      },
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
       "engines": {
-        "node": ">= 0.8.0"
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
     "node_modules/lilconfig": {
@@ -20589,18 +21058,6 @@
         "node": "^18.17.0 || >=20.5.0"
       }
     },
-    "node_modules/mz": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
-      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "any-promise": "^1.0.0",
-        "object-assign": "^4.0.1",
-        "thenify-all": "^1.0.0"
-      }
-    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -20858,16 +21315,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/normalize-range": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/normalize-url": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
@@ -21121,16 +21568,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/object-hash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
-      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/object-inspect": {
       "version": "1.13.4",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
@@ -21662,30 +22099,6 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "license": "MIT"
     },
-    "node_modules/path-scurry": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
-      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
-      "dev": true,
-      "license": "BlueOak-1.0.0",
-      "dependencies": {
-        "lru-cache": "^10.2.0",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/path-scurry/node_modules/lru-cache": {
-      "version": "10.4.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
-      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
-      "dev": true,
-      "license": "ISC"
-    },
     "node_modules/path-to-regexp": {
       "version": "0.1.12",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
@@ -21873,16 +22286,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/pirates": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
-      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/pkg-types": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.0.tgz",
@@ -22236,32 +22639,6 @@
         "postcss": "^8.0.0"
       }
     },
-    "node_modules/postcss-js": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
-      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "camelcase-css": "^2.0.1"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >= 16"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.21"
-      }
-    },
     "node_modules/postcss-load-config": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-5.1.0.tgz",
@@ -22448,46 +22825,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/postcss-nested": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
-      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "postcss-selector-parser": "^6.1.1"
-      },
-      "engines": {
-        "node": ">=12.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.14"
-      }
-    },
-    "node_modules/postcss-nested/node_modules/postcss-selector-parser": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
-      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/postcss-normalize-charset": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-7.0.1.tgz",
@@ -22868,13 +23205,13 @@
       }
     },
     "node_modules/prettier-plugin-tailwindcss": {
-      "version": "0.6.14",
-      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.14.tgz",
-      "integrity": "sha512-pi2e/+ZygeIqntN+vC573BcW5Cve8zUB0SSAGxqpB4f96boZF4M3phPVoOFCeypwkpRYdi7+jQ5YJJUwrkGUAg==",
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.7.2.tgz",
+      "integrity": "sha512-LkphyK3Fw+q2HdMOoiEHWf93fNtYJwfamoKPl7UwtjFQdei/iIBoX11G6j706FzN3ymX9mPVi97qIY8328vdnA==",
       "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">=14.21.3"
+        "node": ">=20.19"
       },
       "peerDependencies": {
         "@ianvs/prettier-plugin-sort-imports": "*",
@@ -22887,14 +23224,12 @@
         "prettier": "^3.0",
         "prettier-plugin-astro": "*",
         "prettier-plugin-css-order": "*",
-        "prettier-plugin-import-sort": "*",
         "prettier-plugin-jsdoc": "*",
         "prettier-plugin-marko": "*",
         "prettier-plugin-multiline-arrays": "*",
         "prettier-plugin-organize-attributes": "*",
         "prettier-plugin-organize-imports": "*",
         "prettier-plugin-sort-imports": "*",
-        "prettier-plugin-style-order": "*",
         "prettier-plugin-svelte": "*"
       },
       "peerDependenciesMeta": {
@@ -22925,9 +23260,6 @@
         "prettier-plugin-css-order": {
           "optional": true
         },
-        "prettier-plugin-import-sort": {
-          "optional": true
-        },
         "prettier-plugin-jsdoc": {
           "optional": true
         },
@@ -22946,9 +23278,6 @@
         "prettier-plugin-sort-imports": {
           "optional": true
         },
-        "prettier-plugin-style-order": {
-          "optional": true
-        },
         "prettier-plugin-svelte": {
           "optional": true
         }
@@ -26636,39 +26965,6 @@
       "integrity": "sha512-CaIBcTSb/nyk4xiiSOtZYz1B+F12ZxW8NEp54CdT+84vmh/h4sUnHGC6+KQXUfED8u22PQjCYWfZny8d2ELXwg==",
       "license": "ISC"
     },
-    "node_modules/sucrase": {
-      "version": "3.35.0",
-      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
-      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "commander": "^4.0.0",
-        "glob": "^10.3.10",
-        "lines-and-columns": "^1.1.6",
-        "mz": "^2.7.0",
-        "pirates": "^4.0.1",
-        "ts-interface-checker": "^0.1.9"
-      },
-      "bin": {
-        "sucrase": "bin/sucrase",
-        "sucrase-node": "bin/sucrase-node"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/sucrase/node_modules/commander": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/suggestions": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/suggestions/-/suggestions-1.7.1.tgz",
@@ -26946,42 +27242,10 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.18",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.18.tgz",
-      "integrity": "sha512-6A2rnmW5xZMdw11LYjhcI5846rt9pbLSabY5XPxo+XWdxwZaFEn47Go4NzFiHu9sNNmr/kXivP1vStfvMaK1GQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "arg": "^5.0.2",
-        "chokidar": "^3.6.0",
-        "didyoumean": "^1.2.2",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.3.2",
-        "glob-parent": "^6.0.2",
-        "is-glob": "^4.0.3",
-        "jiti": "^1.21.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.4.47",
-        "postcss-import": "^15.1.0",
-        "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
-        "postcss-nested": "^6.2.0",
-        "postcss-selector-parser": "^6.1.2",
-        "resolve": "^1.22.8",
-        "sucrase": "^3.35.0"
-      },
-      "bin": {
-        "tailwind": "lib/cli.js",
-        "tailwindcss": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.2.tgz",
+      "integrity": "sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==",
+      "license": "MIT"
     },
     "node_modules/tailwindcss-animate": {
       "version": "1.0.7",
@@ -26992,87 +27256,18 @@
         "tailwindcss": ">=3.0.0 || insiders"
       }
     },
-    "node_modules/tailwindcss/node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+    "node_modules/tapable": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.2.tgz",
+      "integrity": "sha512-1MOpMXuhGzGL5TTCZFItxCc0AARf1EZFQkGqMm7ERKj8+Hgr5oLvJOVFcC+lRmR8hCe2S3jC4T5D7Vg/d7/fhA==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
       "engines": {
-        "node": ">= 8.10.0"
+        "node": ">=6"
       },
       "funding": {
-        "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/tailwindcss/node_modules/chokidar/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/tailwindcss/node_modules/postcss-import": {
-      "version": "15.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
-      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "postcss-value-parser": "^4.0.0",
-        "read-cache": "^1.0.0",
-        "resolve": "^1.1.7"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.0.0"
-      }
-    },
-    "node_modules/tailwindcss/node_modules/postcss-selector-parser": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
-      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/tailwindcss/node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8.10.0"
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
       }
     },
     "node_modules/tdigest": {
@@ -27091,29 +27286,6 @@
       "dev": true,
       "license": "Apache-2.0"
     },
-    "node_modules/thenify": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
-      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "any-promise": "^1.0.0"
-      }
-    },
-    "node_modules/thenify-all": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
-      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "thenify": ">= 3.1.0 < 4"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
     "node_modules/three": {
       "version": "0.183.2",
       "resolved": "https://registry.npmjs.org/three/-/three-0.183.2.tgz",
@@ -27520,13 +27692,6 @@
         "typescript": ">=4.8.4"
       }
     },
-    "node_modules/ts-interface-checker": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true,
-      "license": "Apache-2.0"
-    },
     "node_modules/ts-mixer": {
       "version": "6.0.4",
       "resolved": "https://registry.npmjs.org/ts-mixer/-/ts-mixer-6.0.4.tgz",
diff --git a/package.json b/package.json
index b851bc36f..b3be4ee22 100644
--- a/package.json
+++ b/package.json
@@ -167,6 +167,7 @@
     "@react-router/dev": "^7.12.0",
     "@react-router/fs-routes": "^7.12.0",
     "@tailwindcss/forms": "^0.5.10",
+    "@tailwindcss/postcss": "^4.2.2",
     "@tailwindcss/typography": "^0.5.16",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
@@ -195,7 +196,6 @@
     "@vitejs/plugin-react": "^5.1.4",
     "@vitest/coverage-v8": "^4.0.15",
     "@vitest/ui": "^4.0.15",
-    "autoprefixer": "^10.4.21",
     "cookie": "^1.0.2",
     "cssnano": "^7.0.7",
     "csvtojson": "^2.0.14",
@@ -212,12 +212,12 @@
     "postcss": "^8.5.8",
     "postcss-cli": "^11.0.1",
     "prettier": "3.6.2",
-    "prettier-plugin-tailwindcss": "^0.6.14",
+    "prettier-plugin-tailwindcss": "^0.7.2",
     "react-email": "5.0.6",
     "remark-frontmatter": "^5.0.0",
     "shadcn-ui": "^0.9.5",
     "start-server-and-test": "^2.1.5",
-    "tailwindcss": "^3.4.18",
+    "tailwindcss": "^4.2.2",
     "tsconfig-paths": "^4.2.0",
     "tsx": "^4.20.6",
     "typescript": "5.8.3",
diff --git a/postcss.config.js b/postcss.config.js
index 5ebad5143..9bc55c56f 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,7 +1,5 @@
 export default {
 	plugins: {
-		'tailwindcss/nesting': {},
-		tailwindcss: {},
-		autoprefixer: {},
+		'@tailwindcss/postcss': {},
 	},
 }
diff --git a/tailwind.config.ts b/tailwind.config.ts
deleted file mode 100644
index fbe2bde3a..000000000
--- a/tailwind.config.ts
+++ /dev/null
@@ -1,266 +0,0 @@
-import tailwindTypography from '@tailwindcss/typography'
-import { type Config } from 'tailwindcss'
-import defaultTheme from 'tailwindcss/defaultTheme'
-import tailwindcssAnimate from 'tailwindcss-animate'
-
-export default {
-	darkMode: ['class'],
-	content: ['./app/**/*.{ts,tsx,js,jsx}'],
-	theme: {
-		// shadcn container
-		container: {
-			center: true,
-			padding: '2rem',
-			screens: {
-				'2xl': '1400px',
-			},
-		},
-		colors: {
-			// Color schem is defined in /styles/app.css
-			transparent: 'transparent',
-			current: 'currentColor',
-			white: 'var(--color-white)',
-			black: 'var(--color-black)',
-			gray: {
-				50: 'var(--color-gray-50)',
-				100: 'var(--color-gray-100)',
-				200: 'var(--color-gray-200)',
-				300: 'var(--color-gray-300)',
-				400: 'var(--color-gray-400)',
-				500: 'var(--color-gray-500)',
-				600: 'var(--color-gray-600)',
-				700: 'var(--color-gray-700)',
-				800: 'var(--color-gray-800)',
-				900: 'var(--color-gray-900)',
-				950: 'var(--color-gray-950)',
-			},
-			zinc: {
-				50: 'var(--color-zinc-50)',
-				100: 'var(--color-zinc-100)',
-				200: 'var(--color-zinc-200)',
-				300: 'var(--color-zinc-300)',
-				400: 'var(--color-zinc-400)',
-				500: 'var(--color-zinc-500)',
-				600: 'var(--color-zinc-600)',
-				700: 'var(--color-zinc-700)',
-				800: 'var(--color-zinc-800)',
-				900: 'var(--color-zinc-900)',
-			},
-			slate: {
-				50: '#f8fafc',
-				100: '#f1f5f9',
-				200: '#e2e8f0',
-				300: '#cbd5e1',
-				400: '#94a3b8',
-				500: '#64748b',
-				600: '#475569',
-				700: '#334155',
-				800: '#1e293b',
-				900: '#0f172a',
-				950: '#020617',
-			},
-			green: {
-				50: 'var(--color-green-50)',
-				100: 'var(--color-green-100)',
-				200: 'var(--color-green-200)',
-				300: 'var(--color-green-300)',
-				400: 'var(--color-green-400)',
-				500: 'var(--color-green-500)',
-				700: 'var(--color-green-700)',
-				900: 'var(--color-green-900)',
-				950: 'var(--color-green-950)',
-			},
-			blue: {
-				50: 'var(--color-blue-50)',
-				100: 'var(--color-blue-100)',
-				200: 'var(--color-blue-200)',
-				300: 'var(--color-blue-300)',
-				400: 'var(--color-blue-400)',
-				500: 'var(--color-blue-500)',
-				700: 'var(--color-blue-700)',
-				900: 'var(--color-blue-900)',
-			},
-			red: {
-				50: 'var(--color-red-50)',
-				100: 'var(--color-red-100)',
-				200: 'var(--color-red-200)',
-				300: 'var(--color-red-300)',
-				400: 'var(--color-red-400)',
-				500: 'var(--color-red-500)',
-				700: 'var(--color-red-700)',
-				900: 'var(--color-red-900)',
-			},
-			orange: {
-				500: 'var(--color-orange-500)',
-			},
-			violet: {
-				50: 'var(--color-violet-50)',
-				100: 'var(--color-violet-100)',
-				200: 'var(--color-violet-200)',
-				300: 'var(--color-violet-300)',
-				400: 'var(--color-violet-400)',
-				500: 'var(--color-violet-500)',
-				700: 'var(--color-violet-700)',
-				900: 'var(--color-violet-900)',
-			},
-			yellow: {
-				50: 'var(--color-yellow-50)',
-				100: 'var(--color-yellow-100)',
-				200: 'var(--color-yellow-200)',
-				300: 'var(--color-yellow-300)',
-				400: 'var(--color-yellow-400)',
-				500: 'var(--color-yellow-500)',
-				700: 'var(--color-yellow-700)',
-				900: 'var(--color-yellow-900)',
-			},
-			sensorWiki: 'var(--color-yellow-sensorWiki)',
-			headerBorder: 'var(--color-headerBorder)',
-			logo: {
-				green: '#4fae48',
-				blue: '#00b4e4',
-			},
-			light: {
-				menu: '#727373',
-				text: '#363636',
-				green: '#3D843F',
-				blue: '#037EA1',
-			},
-			dark: {
-				title: 'FFFFFF',
-				menu: '#D2D1D0',
-				text: '#D2D1D0',
-				green: '#6FA161',
-				blue: '#0386AA',
-				background: '#242424',
-				boxes: '#3B3A3A',
-			},
-		},
-		extend: {
-			colors: {
-				//osem color scheme
-				logo: {
-					green: '#4fae48',
-					blue: '#00b4e4',
-				},
-				light: {
-					menu: '#727373',
-					text: '#363636',
-					green: '#3D843F',
-					blue: '#037EA1',
-				},
-				dark: {
-					menu: '#D2D1D0',
-					text: '#D2D1D0',
-					green: '#6FA161',
-					blue: '#0386AA',
-					background: '#242424',
-					boxes: '#3B3A3A',
-				},
-				// shadcn colors
-				border: 'hsl(var(--border))',
-				input: 'hsl(var(--input))',
-				ring: 'hsl(var(--ring))',
-				background: 'hsl(var(--background))',
-				foreground: 'hsl(var(--foreground))',
-				primary: {
-					DEFAULT: 'hsl(var(--primary))',
-					foreground: 'hsl(var(--primary-foreground))',
-				},
-				secondary: {
-					DEFAULT: 'hsl(var(--secondary))',
-					foreground: 'hsl(var(--secondary-foreground))',
-				},
-				destructive: {
-					DEFAULT: 'hsl(var(--destructive))',
-					foreground: 'hsl(var(--destructive-foreground))',
-				},
-				muted: {
-					DEFAULT: 'hsl(var(--muted))',
-					foreground: 'hsl(var(--muted-foreground))',
-				},
-				accent: {
-					DEFAULT: 'hsl(var(--accent))',
-					foreground: 'hsl(var(--accent-foreground))',
-				},
-				popover: {
-					DEFAULT: 'hsl(var(--popover))',
-					foreground: 'hsl(var(--popover-foreground))',
-				},
-				card: {
-					DEFAULT: 'hsl(var(--card))',
-					foreground: 'hsl(var(--card-foreground))',
-				},
-			},
-			// shadcn brder radius
-			borderRadius: {
-				lg: 'var(--radius)',
-				md: 'calc(var(--radius) - 2px)',
-				sm: 'calc(var(--radius) - 4px)',
-			},
-			fontFamily: {
-				sans: ['Urbanist', ...defaultTheme.fontFamily.sans],
-				serif: ['RobotoSlab', ...defaultTheme.fontFamily.serif],
-				monospace: ['Courier New', 'Courier', 'monospace'],
-				helvetica: ['Helvetica', 'Arial', 'sans-serif'],
-			},
-			keyframes: {
-				sidebarOpen: {
-					from: { transform: 'translateX(100%)' },
-					to: { transform: 'translateX(O)' },
-				},
-				sidebarClose: {
-					from: { transform: 'translateX(0)' },
-					to: { transform: 'translateX(100%)' },
-				},
-				contentShow: {
-					from: { opacity: '0', transform: 'translate(-50%, 0%) scale(0.5)' },
-					to: { opacity: '1', transform: 'translate(-50%, 0%) scale(1)' },
-				},
-				contentClose: {
-					from: { opacity: '1', transform: 'translate(-50%, -50%) scale(1)' },
-					to: { opacity: '0', transform: 'translate(-50%, -48%) scale(0.5)' },
-				},
-				'fade-in-up': {
-					'0%': {
-						opacity: '0',
-						transform: 'translateY(10px)',
-					},
-					'100%': {
-						opacity: '1',
-						transform: 'translateY(0)',
-					},
-				},
-				pulse: {
-					'0%, 100%': {
-						opacity: '1',
-					},
-					'50%': {
-						opacity: '.5',
-					},
-				},
-
-				// shadcn accordion animation
-				'accordion-down': {
-					from: { height: '0' },
-					to: { height: 'var(--radix-accordion-content-height)' },
-				},
-				'accordion-up': {
-					from: { height: 'var(--radix-accordion-content-height)' },
-					to: { height: '0' },
-				},
-			},
-			animation: {
-				'fade-in-up': 'fade-in-up 1s ease-out',
-				sidebarOpen: 'sidebarOpen 300ms ease-out',
-				sidebarClose: 'sidebarClose 300ms ease-out',
-				contentShow: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-				contentClose: 'contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-				pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-				// shadcn accordion animation
-				'accordion-down': 'accordion-down 0.2s ease-out',
-				'accordion-up': 'accordion-up 0.2s ease-out',
-			},
-		},
-	},
-	plugins: [tailwindcssAnimate, tailwindTypography],
-} satisfies Config