From e079ab4556bd378cdc6161355a8d489a5b1bda10 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <benji@oxide.computer>
Date: Fri, 16 May 2025 15:25:18 +0100
Subject: [PATCH 1/3] Initial tailwind upgrade blockout

---
 app/components/AttachFloatingIpModal.tsx      |    2 +-
 app/components/CapacityBar.tsx                |   28 +-
 app/components/CapacityBars.tsx               |    2 +-
 app/components/CopyCode.tsx                   |    2 +-
 app/components/DocsPopover.tsx                |   20 +-
 app/components/ErrorBoundary.tsx              |    2 +-
 app/components/ErrorPage.tsx                  |    2 +-
 app/components/InstanceAutoRestartPopover.tsx |    4 +-
 app/components/IpPoolUtilization.tsx          |    4 +-
 app/components/MswBanner.tsx                  |    6 +-
 app/components/RefetchIntervalPicker.tsx      |    2 +-
 app/components/RouteTabs.tsx                  |    2 +-
 app/components/Sidebar.tsx                    |   25 +-
 app/components/TimeSeriesChart.tsx            |    4 +-
 app/components/ToastStack.tsx                 |    2 +-
 app/components/TopBar.tsx                     |    6 +-
 app/components/form/Form.tsx                  |    9 +-
 .../form/fields/DateTimeRangePicker.tsx       |    4 +-
 app/forms/idp/create.tsx                      |    2 +-
 app/forms/image-upload.tsx                    |   20 +-
 app/forms/instance-create.tsx                 |    4 +-
 app/layouts/LoginLayout.tsx                   |    8 +-
 app/layouts/helpers.tsx                       |    8 +-
 app/pages/DeviceAuthSuccessPage.tsx           |    2 +-
 app/pages/DeviceAuthVerifyPage.tsx            |    4 +-
 app/pages/project/instances/InstancesPage.tsx |    2 +-
 .../project/instances/SerialConsolePage.tsx   |    4 +-
 .../project/vpcs/internet-gateway-edit.tsx    |    6 +-
 app/pages/settings/ProfilePage.tsx            |    4 +-
 app/pages/system/UtilizationPage.tsx          |    6 +-
 app/pages/system/networking/IpPoolPage.tsx    |    2 +-
 app/table/cells/TypeValueCell.tsx             |    2 +-
 app/table/columns/action-col.tsx              |    2 +-
 app/ui/lib/ActionMenu.tsx                     |   20 +-
 app/ui/lib/Badge.tsx                          |   18 +-
 app/ui/lib/BulkActionMenu.tsx                 |    6 +-
 app/ui/lib/CalendarCell.tsx                   |   10 +-
 app/ui/lib/CardBlock.tsx                      |    6 +-
 app/ui/lib/Combobox.tsx                       |   12 +-
 app/ui/lib/DateField.tsx                      |    2 +-
 app/ui/lib/DatePicker.tsx                     |    2 +-
 app/ui/lib/DateRangePicker.tsx                |    2 +-
 app/ui/lib/DialogOverlay.tsx                  |    2 +-
 app/ui/lib/Divider.tsx                        |    2 +-
 app/ui/lib/EmptyMessage.tsx                   |    2 +-
 app/ui/lib/FileInput.tsx                      |   20 +-
 app/ui/lib/InlineCode.tsx                     |    2 +-
 app/ui/lib/Listbox.tsx                        |   10 +-
 app/ui/lib/Message.tsx                        |   12 +-
 app/ui/lib/MiniTable.tsx                      |    2 +-
 app/ui/lib/Modal.tsx                          |   14 +-
 app/ui/lib/NumberInput.tsx                    |    6 +-
 app/ui/lib/Pagination.tsx                     |    2 +-
 app/ui/lib/Popover.tsx                        |    2 +-
 app/ui/lib/PropertiesTable.tsx                |   10 +-
 app/ui/lib/Radio.tsx                          |   12 +-
 app/ui/lib/SideModal.tsx                      |   22 +-
 app/ui/lib/Table.tsx                          |   14 +-
 app/ui/lib/TextInput.tsx                      |    6 +-
 app/ui/lib/Toast.tsx                          |   14 +-
 app/ui/styles/components/Tabs.css             |   10 +-
 app/ui/styles/components/form.css             |    2 +-
 app/ui/styles/components/menu-button.css      |    6 +-
 app/ui/styles/components/menu-list.css        |    2 +-
 app/ui/styles/components/mini-table.css       |    2 +-
 app/ui/styles/components/spinner.css          |    2 +-
 app/ui/styles/components/table.css            |    6 +-
 app/ui/styles/index.css                       |  313 +--
 app/ui/styles/vars.css                        |   13 +
 package-lock.json                             | 1695 ++++++++---------
 package.json                                  |    7 +-
 postcss.config.mjs                            |   17 -
 tailwind.config.ts                            |   91 -
 vite.config.ts                                |    2 +
 74 files changed, 1192 insertions(+), 1410 deletions(-)
 create mode 100644 app/ui/styles/vars.css
 delete mode 100644 postcss.config.mjs
 delete mode 100644 tailwind.config.ts

diff --git a/app/components/AttachFloatingIpModal.tsx b/app/components/AttachFloatingIpModal.tsx
index a2022fe94c..671331b535 100644
--- a/app/components/AttachFloatingIpModal.tsx
+++ b/app/components/AttachFloatingIpModal.tsx
@@ -26,7 +26,7 @@ function FloatingIpLabel({ fip }: { fip: FloatingIp }) {
         {fip.description && (
           <>
             <Slash />
-            <div className="grow overflow-hidden overflow-ellipsis whitespace-pre text-left">
+            <div className="grow overflow-hidden text-ellipsis whitespace-pre text-left">
               {fip.description}
             </div>
           </>
diff --git a/app/components/CapacityBar.tsx b/app/components/CapacityBar.tsx
index 39fc075cd7..a9acc848d1 100644
--- a/app/components/CapacityBar.tsx
+++ b/app/components/CapacityBar.tsx
@@ -34,15 +34,15 @@ export const CapacityBar = <T extends number | bigint>({
   const unitElt = includeUnit ? <>&nbsp;{unit}</> : null
 
   return (
-    <div className="w-full min-w-min rounded-lg border border-default lg+:max-w-[50%]">
+    <div className="border-default 1000:max-w-[50%] w-full min-w-min rounded-lg border">
       <div className="flex justify-between p-3">
         <TitleCell icon={icon} title={title} unit={unit} />
         <PctCell pct={pct} />
       </div>
-      <div className="p-3 pb-4 pt-1">
+      <div className="p-3 pt-1 pb-4">
         <Bar pct={pct} />
       </div>
-      <div className="flex justify-between border-t border-secondary">
+      <div className="border-secondary flex justify-between border-t">
         <ValueCell label={provisionedLabel} value={provisioned} unit={unitElt} />
         <ValueCell label={capacityLabel} value={capacity} unit={unitElt} />
       </div>
@@ -55,9 +55,9 @@ function TitleCell({ icon, title, unit }: TitleCellProps) {
   return (
     <div>
       <div className="flex grow items-center">
-        <span className="mr-2 flex h-4 w-4 items-center text-accent">{icon}</span>
-        <span className="!normal-case text-mono-sm text-default">{title}</span>
-        <span className="ml-1 !normal-case text-mono-sm text-tertiary">({unit})</span>
+        <span className="text-accent mr-2 flex h-4 w-4 items-center">{icon}</span>
+        <span className="text-mono-sm text-default normal-case!">{title}</span>
+        <span className="text-mono-sm text-tertiary ml-1 normal-case!">({unit})</span>
       </div>
     </div>
   )
@@ -67,8 +67,8 @@ function PctCell({ pct }: { pct: number }) {
   // NaN happens when both top and bottom are 0
   if (Number.isNaN(pct)) {
     return (
-      <div className="flex -translate-y-0.5 items-baseline text-tertiary">
-        <div className="font-light text-sans-2xl text-raise">—</div>
+      <div className="text-tertiary flex -translate-y-0.5 items-baseline">
+        <div className="text-sans-2xl text-raise font-light">—</div>
         <div className="text-sans-xl">%</div>
       </div>
     )
@@ -77,7 +77,7 @@ function PctCell({ pct }: { pct: number }) {
   const [wholeNumber, decimal] = splitDecimal(pct)
   return (
     <div className="flex -translate-y-0.5 items-baseline">
-      <div className="font-light text-sans-2xl text-raise">{wholeNumber}</div>
+      <div className="text-sans-2xl text-raise font-light">{wholeNumber}</div>
       <div className="text-sans-xl text-tertiary">{decimal}%</div>
     </div>
   )
@@ -87,10 +87,10 @@ function Bar({ pct }: { pct: number }) {
   return (
     <div className="flex w-full gap-0.5">
       <div
-        className="h-3 rounded-l border bg-accent-secondary border-accent-secondary"
+        className="bg-accent-secondary border-accent-secondary h-3 rounded-l border"
         style={{ width: `${pct.toFixed(2)}%` }}
       ></div>
-      <div className="h-3 grow rounded-r border bg-info-secondary border-info-secondary"></div>
+      <div className="bg-info-secondary border-info-secondary h-3 grow rounded-r border"></div>
     </div>
   )
 }
@@ -103,9 +103,9 @@ type ValueCellProps = {
 
 function ValueCell({ label, value, unit }: ValueCellProps) {
   return (
-    <div className="p-3 text-mono-sm">
-      <div className="mb-px text-tertiary">{label}</div>
-      <div className="!normal-case text-default">
+    <div className="text-mono-sm p-3">
+      <div className="text-tertiary mb-px">{label}</div>
+      <div className="text-default normal-case!">
         <BigNum num={value} />
         {unit}
       </div>
diff --git a/app/components/CapacityBars.tsx b/app/components/CapacityBars.tsx
index f5d415cf1c..b78da863ec 100644
--- a/app/components/CapacityBars.tsx
+++ b/app/components/CapacityBars.tsx
@@ -23,7 +23,7 @@ export const CapacityBars = ({
   allocatedLabel: string
 }) => {
   return (
-    <div className="mb-12 flex min-w-min flex-col gap-3 lg+:flex-row">
+    <div className="1000:flex-row mb-12 flex min-w-min flex-col gap-3">
       <CapacityBar
         icon={<Cpu16Icon />}
         title="CPU"
diff --git a/app/components/CopyCode.tsx b/app/components/CopyCode.tsx
index 15187abe37..9e7f303e6c 100644
--- a/app/components/CopyCode.tsx
+++ b/app/components/CopyCode.tsx
@@ -46,7 +46,7 @@ export function CopyCodeModal({
   return (
     <Modal isOpen={isOpen} onDismiss={onDismiss} title={modalTitle} width="free">
       <Modal.Section>
-        <pre className="w-full rounded border px-4 py-3 !normal-case !tracking-normal text-mono-md bg-default border-secondary">
+        <pre className="w-full rounded border px-4 py-3 normal-case! tracking-normal! text-mono-md bg-default border-secondary">
           {children}
         </pre>
       </Modal.Section>
diff --git a/app/components/DocsPopover.tsx b/app/components/DocsPopover.tsx
index 5086597ff6..1ec1e8555c 100644
--- a/app/components/DocsPopover.tsx
+++ b/app/components/DocsPopover.tsx
@@ -22,14 +22,14 @@ type DocsPopoverLinkProps = {
 export const DocsPopoverLink = ({ href, linkText }: DocsPopoverLinkProps) => (
   <a
     href={href}
-    className="group block px-4 children:last:border-0"
+    className="group block px-4 *:last:border-0"
     target="_blank"
     rel="noreferrer"
   >
-    <div className="mx-2 border-b py-1.5 border-secondary">
-      <div className="relative -ml-2 inline-block rounded py-1 pl-2 pr-7 text-sans-md text-raise group-hover:bg-tertiary">
+    <div className="border-secondary mx-2 border-b py-1.5">
+      <div className="text-sans-md text-raise group-hover:bg-tertiary relative -ml-2 inline-block rounded py-1 pr-7 pl-2">
         <span className="inline-block max-w-[300px] truncate align-middle">{linkText}</span>
-        <OpenLink12Icon className="absolute top-1.5 ml-2 translate-y-[1px] text-secondary" />
+        <OpenLink12Icon className="text-secondary absolute top-1.5 ml-2 translate-y-px" />
       </div>
     </div>
   </a>
@@ -53,18 +53,18 @@ export const DocsPopover = ({ heading, icon, summary, links }: DocsPopoverProps)
       </PopoverButton>
       <PopoverPanel
         // popover-panel needed for enter animation
-        className="popover-panel z-10 w-96 rounded-lg border bg-raise border-secondary elevation-2"
+        className="popover-panel bg-raise border-secondary elevation-2 z-10 w-96 rounded-lg border"
         anchor={{ to: 'bottom end', gap: 12 }}
       >
         <div className="px-4">
-          <h2 className="mt-4 flex items-center gap-1 text-sans-md">
-            <div className="mr-1 flex items-center text-accent-secondary">{icon}</div>
+          <h2 className="text-sans-md mt-4 flex items-center gap-1">
+            <div className="text-accent-secondary mr-1 flex items-center">{icon}</div>
             {title}
           </h2>
-          <p className="mb-3 mt-2 text-sans-md text-default">{summary}</p>
+          <p className="text-sans-md text-default mt-2 mb-3">{summary}</p>
         </div>
-        <div className="border-t pb-1 border-secondary">
-          <h3 className="mb-1 mt-3 px-4 text-mono-sm text-tertiary">Guides</h3>
+        <div className="border-secondary border-t pb-1">
+          <h3 className="text-mono-sm text-tertiary mt-3 mb-1 px-4">Guides</h3>
           {links.map((link) => (
             <DocsPopoverLink key={link.href} {...link} />
           ))}
diff --git a/app/components/ErrorBoundary.tsx b/app/components/ErrorBoundary.tsx
index be419ffa09..00cb74b893 100644
--- a/app/components/ErrorBoundary.tsx
+++ b/app/components/ErrorBoundary.tsx
@@ -19,7 +19,7 @@ import { ErrorPage, NotFound } from './ErrorPage'
 const IdpMisconfig = () => (
   <Message
     variant="notice"
-    className="!mt-6"
+    className="mt-6!"
     showIcon={false}
     content={
       <p>
diff --git a/app/components/ErrorPage.tsx b/app/components/ErrorPage.tsx
index 3e6b6522c1..ef2f725b63 100644
--- a/app/components/ErrorPage.tsx
+++ b/app/components/ErrorPage.tsx
@@ -41,7 +41,7 @@ export function ErrorPage({ children }: Props) {
         </Link>
         <SignOutButton className="mr-6 mt-4" />
       </div>
-      <div className="absolute left-1/2 top-1/2 flex w-96 -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center space-y-4 rounded-lg border p-8 !bg-raise border-secondary elevation-3">
+      <div className="absolute left-1/2 top-1/2 flex w-96 -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center space-y-4 rounded-lg border p-8 bg-raise! border-secondary elevation-3">
         <div className="my-2 flex h-12 w-12 items-center justify-center">
           <div className="absolute h-12 w-12 rounded-full opacity-20 bg-destructive motion-safe:animate-[ping_2s_cubic-bezier(0,0,0.2,1)_infinite]" />
           <Error12Icon className="relative h-8 w-8 text-error" />
diff --git a/app/components/InstanceAutoRestartPopover.tsx b/app/components/InstanceAutoRestartPopover.tsx
index 54599937ba..0971d3a312 100644
--- a/app/components/InstanceAutoRestartPopover.tsx
+++ b/app/components/InstanceAutoRestartPopover.tsx
@@ -112,7 +112,7 @@ export const InstanceAutoRestartPopover = ({ instance }: { instance: Instance })
                 Instance Auto-Restart
               </span>
             </span>
-            <OpenLink12Icon className="ml-1 translate-y-[1px] text-secondary" />
+            <OpenLink12Icon className="ml-1 translate-y-px text-secondary" />
           </a>
         </div>
       </PopoverPanel>
@@ -123,7 +123,7 @@ export const InstanceAutoRestartPopover = ({ instance }: { instance: Instance })
 const PopoverRow = ({ label, children }: { label: string; children: ReactNode }) => (
   <div className="flex h-10 items-center border-b border-b-secondary">
     <div className="w-32 pl-3 pr-2 text-mono-sm text-tertiary">{label}</div>
-    <div className="flex h-10 flex-grow items-center gap-1.5 pr-2 text-sans-md">
+    <div className="flex h-10 grow items-center gap-1.5 pr-2 text-sans-md">
       {children}
     </div>
   </div>
diff --git a/app/components/IpPoolUtilization.tsx b/app/components/IpPoolUtilization.tsx
index 1a9530e6f1..927b28f263 100644
--- a/app/components/IpPoolUtilization.tsx
+++ b/app/components/IpPoolUtilization.tsx
@@ -34,13 +34,13 @@ export function IpUtilCell(util: IpPoolUtilization) {
   return (
     <div className="flex gap-4">
       <div>
-        <Badge color="neutral" className="mr-2 !normal-case">
+        <Badge color="neutral" className="mr-2 normal-case!">
           v4
         </Badge>
         <IpUtilFrac {...ipv4} />
       </div>
       <div>
-        <Badge color="neutral" className="mr-2 !normal-case">
+        <Badge color="neutral" className="mr-2 normal-case!">
           v6
         </Badge>
         <IpUtilFrac {...ipv6} />
diff --git a/app/components/MswBanner.tsx b/app/components/MswBanner.tsx
index 58cf8eec14..d2fdf771e7 100644
--- a/app/components/MswBanner.tsx
+++ b/app/components/MswBanner.tsx
@@ -49,11 +49,11 @@ export function MswBanner({ disableButton }: Props) {
   return (
     <>
       {/* The [&+*]:pt-10 style is to ensure the page container isn't pushed out of screen as it uses 100vh for layout */}
-      <label className="absolute z-topBar flex h-10 w-full items-center justify-center text-sans-md text-info-secondary bg-info-secondary [&+*]:pt-10">
+      <label className="text-sans-md text-info-secondary bg-info-secondary absolute z-(--top-bar) flex h-10 w-full items-center justify-center [&+*]:pt-10">
         <Info16Icon className="mr-2" /> This is a technical preview.
         <button
           type="button"
-          className="ml-2 flex items-center gap-0.5 text-sans-md hover:text-info"
+          className="text-sans-md hover:text-info ml-2 flex items-center gap-0.5"
           onClick={() => setIsOpen(true)}
           disabled={disableButton}
         >
@@ -91,7 +91,7 @@ export function MswBanner({ disableButton }: Props) {
             />
           </ModalLinks>
         </Modal.Section>
-        <footer className="flex items-center justify-end border-t px-3 py-3 border-secondary">
+        <footer className="border-secondary flex items-center justify-end border-t px-3 py-3">
           <Button size="sm" onClick={closeModal}>
             Close
           </Button>
diff --git a/app/components/RefetchIntervalPicker.tsx b/app/components/RefetchIntervalPicker.tsx
index 389583a0d4..27bb636b63 100644
--- a/app/components/RefetchIntervalPicker.tsx
+++ b/app/components/RefetchIntervalPicker.tsx
@@ -65,7 +65,7 @@ export function useIntervalPicker({ enabled, isLoading, fn, className }: Props)
         </button>
         <Listbox
           selected={enabled ? intervalPreset : 'Off'}
-          className="[&_button]:!rounded-l-none"
+          className="[&_button]:rounded-l-none!"
           items={intervalItems}
           onChange={setIntervalPreset}
           disabled={!enabled}
diff --git a/app/components/RouteTabs.tsx b/app/components/RouteTabs.tsx
index 8e9e5e7a4c..ae2f22537e 100644
--- a/app/components/RouteTabs.tsx
+++ b/app/components/RouteTabs.tsx
@@ -67,7 +67,7 @@ export function RouteTabs({
       </div>
 
       <div
-        className={cn('ox-tabs-panel @container', { 'ml-5 flex-grow': sideTabs })}
+        className={cn('ox-tabs-panel @container', { 'ml-5 grow': sideTabs })}
         role="tabpanel"
         tabIndex={0}
       >
diff --git a/app/components/Sidebar.tsx b/app/components/Sidebar.tsx
index 5a18b1080d..5a596cf84f 100644
--- a/app/components/Sidebar.tsx
+++ b/app/components/Sidebar.tsx
@@ -15,15 +15,20 @@ import { openQuickActions } from '~/hooks/use-quick-actions'
 import { Button } from '~/ui/lib/Button'
 import { Truncate } from '~/ui/lib/Truncate'
 
-const linkStyles =
-  'flex h-7 items-center rounded px-2 text-sans-md hover:bg-hover [&>svg]:mr-2 [&>svg]:text-quaternary text-default'
+const linkStyles = (isActive: boolean) =>
+  cn(
+    'flex h-7 items-center rounded px-2 text-sans-md [&>svg]:mr-2',
+    isActive
+      ? 'text-accent bg-accent-secondary hover:bg-accent-secondary-hover [&>svg]:text-accent-tertiary!'
+      : '[&>svg]:text-quaternary text-default hover:bg-hover'
+  )
 
 // TODO: this probably doesn't go to the docs root. maybe it even opens a
 // menu with links to several relevant docs for the page
 export const DocsLinkItem = () => (
   <li>
     <a
-      className={linkStyles}
+      className={linkStyles(false)}
       href="https://docs.oxide.computer"
       target="_blank"
       rel="noreferrer"
@@ -43,12 +48,12 @@ const JumpToButton = () => {
       variant="ghost"
       size="sm"
       onClick={openQuickActions}
-      className="w-full !px-2"
+      className="w-full px-2!"
       // TODO: the more I use innerClassName the wronger it feels
       innerClassName="w-full justify-between text-tertiary"
     >
       <span className="flex items-center">
-        <Action16Icon className="mr-2 text-quaternary" /> Jump to
+        <Action16Icon className="text-quaternary mr-2" /> Jump to
       </span>
       <div className="text-mono-xs">{modKey}+K</div>
     </Button>
@@ -57,7 +62,7 @@ const JumpToButton = () => {
 
 export function Sidebar({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex flex-col border-r text-sans-md text-raise border-secondary">
+    <div className="text-sans-md text-raise border-secondary flex flex-col border-r">
       <div className="mx-3 mt-4">
         <JumpToButton />
       </div>
@@ -74,7 +79,7 @@ interface SidebarNav {
 Sidebar.Nav = ({ children, heading }: SidebarNav) => (
   <div className="mx-3 my-4 space-y-1">
     {heading && (
-      <div className="mb-2 text-mono-sm text-tertiary">
+      <div className="text-mono-sm text-tertiary mb-2">
         <Truncate text={heading} maxLength={24} />
       </div>
     )}
@@ -109,10 +114,8 @@ export const NavLinkItem = ({
     <li>
       <Link
         to={to}
-        className={cn(linkStyles, {
-          'text-accent !bg-accent-secondary hover:!bg-accent-secondary-hover [&>svg]:!text-accent-tertiary':
-            isActive || currentPathIsCreateForm,
-          'pointer-events-none text-disabled': disabled,
+        className={cn(linkStyles(isActive || currentPathIsCreateForm), {
+          'text-disabled pointer-events-none': disabled,
         })}
         aria-current={isActive ? 'page' : undefined}
       >
diff --git a/app/components/TimeSeriesChart.tsx b/app/components/TimeSeriesChart.tsx
index 7f77c5cf7d..dfbed87672 100644
--- a/app/components/TimeSeriesChart.tsx
+++ b/app/components/TimeSeriesChart.tsx
@@ -150,12 +150,12 @@ const SkeletonMetric = ({
     >
       <div className="flex h-full flex-col justify-between">
         {[...Array(4)].map((_e, i) => (
-          <div key={i} className="h-px w-full bg-[--stroke-secondary]" />
+          <div key={i} className="h-px w-full bg-(--stroke-secondary)" />
         ))}
       </div>
       <div className="flex justify-between">
         {[...Array(8)].map((_e, i) => (
-          <div key={i} className="h-1.5 w-px bg-[--stroke-secondary]" />
+          <div key={i} className="h-1.5 w-px bg-(--stroke-secondary)" />
         ))}
       </div>
     </div>
diff --git a/app/components/ToastStack.tsx b/app/components/ToastStack.tsx
index 39a95919e7..d2f94ebc30 100644
--- a/app/components/ToastStack.tsx
+++ b/app/components/ToastStack.tsx
@@ -16,7 +16,7 @@ export function ToastStack() {
 
   return (
     <div
-      className="pointer-events-auto fixed bottom-4 left-4 z-toast flex flex-col items-end space-y-2"
+      className="pointer-events-auto fixed bottom-4 left-4 z-(--z-toast) flex flex-col items-end space-y-2"
       data-testid="Toasts"
     >
       <AnimatePresence>
diff --git a/app/components/TopBar.tsx b/app/components/TopBar.tsx
index 08144a23ce..4841d972c0 100644
--- a/app/components/TopBar.tsx
+++ b/app/components/TopBar.tsx
@@ -136,7 +136,7 @@ function UserMenu() {
         <div
           className={cn(
             buttonStyle({ size: 'sm', variant: 'ghost' }),
-            'flex items-center gap-1.5 !px-2 !border-secondary'
+            'flex items-center gap-1.5 px-2! border-secondary!'
           )}
         >
           <Profile16Icon className="text-tertiary" />
@@ -183,10 +183,10 @@ function SystemSiloItem(props: { label: string; to: string; isSelected: boolean
   return (
     <DropdownMenu.LinkItem
       to={props.to}
-      className={cn('!pr-3', { 'is-selected': props.isSelected })}
+      className={cn('pr-3!', { 'is-selected': props.isSelected })}
     >
       <div className="flex w-full items-center gap-2">
-        <div className="flex-grow">{props.label}</div>
+        <div className="grow">{props.label}</div>
         {props.isSelected && <Success12Icon className="block" />}
       </div>
     </DropdownMenu.LinkItem>
diff --git a/app/components/form/Form.tsx b/app/components/form/Form.tsx
index ce69718f9e..e1037f7563 100644
--- a/app/components/form/Form.tsx
+++ b/app/components/form/Form.tsx
@@ -52,12 +52,7 @@ export const Form = {
     invariant(submit, 'Form.Actions must contain a Form.Submit component')
 
     return (
-      <div
-        className={cn(
-          'flex w-full items-center gap-[0.625rem] children:shrink-0',
-          className
-        )}
-      >
+      <div className={cn('flex w-full items-center gap-2.5 *:shrink-0', className)}>
         {cloneElement(submit, {
           form: formId,
           disabled: !!submitDisabled,
@@ -66,7 +61,7 @@ export const Form = {
         })}
         {childArray}
         {error && (
-          <div className="flex !shrink grow items-start justify-end text-mono-sm text-error 2xl+:justify-start">
+          <div className="text-mono-sm text-error 1400:justify-start flex shrink! grow items-start justify-end">
             <Error12Icon className="mx-2 mt-0.5 shrink-0" />
             <span>{error.message}</span>
           </div>
diff --git a/app/components/form/fields/DateTimeRangePicker.tsx b/app/components/form/fields/DateTimeRangePicker.tsx
index 82c89ad4b3..6db6672627 100644
--- a/app/components/form/fields/DateTimeRangePicker.tsx
+++ b/app/components/form/fields/DateTimeRangePicker.tsx
@@ -122,7 +122,7 @@ export function DateTimeRangePicker({
   return (
     <form className="flex">
       <Listbox
-        className="z-10 w-[10rem] [&_button]:!rounded-r-none [&_button]:!border-r-0"
+        className="z-10 w-40 [&_button]:rounded-r-none! [&_button]:border-r-0!"
         name="preset"
         selected={preset}
         aria-label="Choose a time range preset"
@@ -146,7 +146,7 @@ export function DateTimeRangePicker({
           minValue={minValue}
           maxValue={maxValue}
           hideTimeZone
-          className="[&_.rounded-l]:!rounded-l-none"
+          className="[&_.rounded-l]:rounded-l-none!"
         />
       </div>
     </form>
diff --git a/app/forms/idp/create.tsx b/app/forms/idp/create.tsx
index 04d230abfa..181f72fc0b 100644
--- a/app/forms/idp/create.tsx
+++ b/app/forms/idp/create.tsx
@@ -185,7 +185,7 @@ export default function CreateIdpSideModalForm() {
           name="acsUrl"
           label="ACS URL"
           description={
-            <div className="children:inline-block">
+            <div className="*:inline-block">
               <span>
                 Oxide endpoint for the identity provider to send the SAML response.{' '}
               </span>
diff --git a/app/forms/image-upload.tsx b/app/forms/image-upload.tsx
index 6ad5a37e97..01eb1efe37 100644
--- a/app/forms/image-upload.tsx
+++ b/app/forms/image-upload.tsx
@@ -612,28 +612,28 @@ export default function ImageCreate() {
       </div>
       {file && modalOpen && (
         <Modal isOpen onDismiss={closeModal} title="Image upload progress">
-          <Modal.Body className="!p-0">
-            <Modal.Section className="!p-0">
-              <div className="children:border-b children:border-b-secondary last:children:border-b-0">
+          <Modal.Body className="p-0!">
+            <Modal.Section className="p-0!">
+              <div className="*:border-b-secondary *:border-b last:*:border-b-0">
                 {modalError && (
                   <Message
                     variant="error"
                     title="Error"
                     content={modalError}
-                    className="!rounded-none !shadow-none"
+                    className="rounded-none! shadow-none!"
                   />
                 )}
                 <Step state={createDisk} label="Create temporary disk" />
                 <Step state={startImport} label="Put disk in import mode" />
                 <Step state={syntheticUploadState} label="Upload image file">
-                  <div className="rounded-lg border bg-default border-default">
-                    <div className="flex justify-between border-b p-3 pb-2 border-b-secondary">
+                  <div className="bg-default border-default rounded-lg border">
+                    <div className="border-b-secondary flex justify-between border-b p-3 pb-2">
                       <div className="text-sans-md text-raise">{file.name}</div>
                       {/* cancel and/or pause buttons could go here */}
                     </div>
                     <div className="p-3 pt-2">
-                      <div className="flex justify-between text-mono-sm">
-                        <div className="!normal-case text-default">
+                      <div className="text-mono-sm flex justify-between">
+                        <div className="text-default normal-case!">
                           {fsize((uploadProgress / 100) * file.size)}{' '}
                           <span className="text-quaternary">/</span> {fsize(file.size)}
                         </div>
@@ -667,7 +667,7 @@ export default function ImageCreate() {
                   label="Image uploaded successfully"
                   className={
                     allDone
-                      ? 'transition-colors bg-accent-secondary children:text-accent'
+                      ? 'bg-accent-secondary *:text-accent transition-colors'
                       : 'transition-colors'
                   }
                 />
@@ -771,7 +771,7 @@ function BootableNotice({
     <Message
       variant="info"
       title="This image might not be bootable"
-      className="[&>*]:space-y-2"
+      className="*:space-y-2"
       content={content}
     />
   )
diff --git a/app/forms/instance-create.tsx b/app/forms/instance-create.tsx
index ca4e39efa9..a916677357 100644
--- a/app/forms/instance-create.tsx
+++ b/app/forms/instance-create.tsx
@@ -263,7 +263,7 @@ export default function CreateInstanceForm() {
   // additional form elements for projectImage and siloImage tabs
   const bootDiskSizeAndName = (
     <>
-      <div key="divider" className="!my-12 content-['a']" />
+      <div key="divider" className="my-12! content-['a']" />
       <DiskSizeField
         key="diskSizeField"
         label="Disk size"
@@ -621,7 +621,7 @@ const FloatingIpLabel = ({ ip }: { ip: FloatingIp }) => (
       {ip.description && (
         <>
           <Slash />
-          <div className="grow overflow-hidden overflow-ellipsis whitespace-pre text-left">
+          <div className="grow overflow-hidden text-ellipsis whitespace-pre text-left">
             {ip.description}
           </div>
         </>
diff --git a/app/layouts/LoginLayout.tsx b/app/layouts/LoginLayout.tsx
index 47bcfe8f6f..47cf588f7b 100644
--- a/app/layouts/LoginLayout.tsx
+++ b/app/layouts/LoginLayout.tsx
@@ -13,19 +13,19 @@ import { OxideLogo } from '~/components/OxideLogo'
 export default function LoginLayout() {
   return (
     <main className="layout relative flex h-screen">
-      <div className="hero-bg relative flex w-1/2 justify-end text-accent sm-:hidden">
+      <div className="hero-bg text-accent max-800:hidden relative flex w-1/2 justify-end">
         <div className="hero-rack-wrapper">
           <img src={heroRackImg} alt="A populated Oxide rack" className="hero-rack" />
         </div>
       </div>
-      <div className="z-10 flex h-full w-1/2 justify-start sm-:w-full sm-:justify-center">
-        <div className="flex h-full w-full max-w-[480px] items-center justify-center sm+:pr-10">
+      <div className="max-800:w-full max-800:justify-center z-10 flex h-full w-1/2 justify-start">
+        <div className="600:pr-10 flex h-full w-full max-w-[480px] items-center justify-center">
           <div className="flex w-[320px] flex-col items-center">
             <Outlet />
           </div>
         </div>
       </div>
-      <OxideLogo className="absolute bottom-8 left-1/2 hidden -translate-x-1/2 sm-:block" />
+      <OxideLogo className="max-800:block absolute bottom-8 left-1/2 hidden -translate-x-1/2" />
     </main>
   )
 }
diff --git a/app/layouts/helpers.tsx b/app/layouts/helpers.tsx
index ae08a2e69d..12583e6dac 100644
--- a/app/layouts/helpers.tsx
+++ b/app/layouts/helpers.tsx
@@ -14,7 +14,7 @@ import { useScrollRestoration } from '~/hooks/use-scroll-restoration'
 import { SkipLinkTarget } from '~/ui/lib/SkipLink'
 import { classed } from '~/util/classed'
 
-export const PageContainer = classed.div`grid h-screen grid-cols-[14.25rem,1fr] grid-rows-[--top-bar-height,1fr]`
+export const PageContainer = classed.div`grid h-screen grid-cols-[14.25rem_1fr] grid-rows-(--top-bar-height,1fr)`
 
 export function ContentPane() {
   const ref = useRef<HTMLDivElement>(null)
@@ -28,11 +28,11 @@ export function ContentPane() {
     >
       <div className="flex grow flex-col pb-8">
         <SkipLinkTarget />
-        <main className="[&>*]:gutter">
+        <main className="*:gutter">
           <Outlet />
         </main>
       </div>
-      <div className="sticky bottom-0 z-topBar shrink-0 justify-between overflow-hidden border-t bg-default border-secondary empty:border-t-0">
+      <div className="bg-default border-secondary sticky bottom-0 z-(--top-bar) shrink-0 justify-between overflow-hidden border-t empty:border-t-0">
         <Pagination.Target />
         <PageActionsTarget />
       </div>
@@ -50,7 +50,7 @@ export const SerialConsoleContentPane = () => (
   <div className="flex flex-col overflow-auto">
     <div className="flex grow flex-col">
       <SkipLinkTarget />
-      <main className="[&>*]:gutter h-full">
+      <main className="*:gutter h-full">
         <Outlet />
       </main>
     </div>
diff --git a/app/pages/DeviceAuthSuccessPage.tsx b/app/pages/DeviceAuthSuccessPage.tsx
index ca54d99353..61949882ff 100644
--- a/app/pages/DeviceAuthSuccessPage.tsx
+++ b/app/pages/DeviceAuthSuccessPage.tsx
@@ -12,7 +12,7 @@ import { Success12Icon } from '@oxide/design-system/icons/react'
  */
 export default function DeviceAuthSuccessPage() {
   return (
-    <div className="flex w-full max-w-[470px] flex-col items-center rounded-lg border p-9 text-center !bg-raise border-secondary elevation-3">
+    <div className="flex w-full max-w-[470px] flex-col items-center rounded-lg border p-9 text-center bg-raise! border-secondary elevation-3">
       <div className="my-2 flex h-12 w-12 items-center justify-center">
         <div className="absolute h-12 w-12 rounded-full opacity-20 bg-accent motion-safe:animate-[ping_2s_cubic-bezier(0,0,0.2,1)_infinite]" />
         <Success12Icon className="relative h-8 w-8 text-accent" />
diff --git a/app/pages/DeviceAuthVerifyPage.tsx b/app/pages/DeviceAuthVerifyPage.tsx
index e023c5f170..24ef9e3f4c 100644
--- a/app/pages/DeviceAuthVerifyPage.tsx
+++ b/app/pages/DeviceAuthVerifyPage.tsx
@@ -33,7 +33,7 @@ export default function DeviceAuthVerifyPage() {
 
   return (
     <form
-      className="w-full max-w-[470px] rounded-lg border p-9 text-center !bg-raise border-secondary elevation-3"
+      className="w-full max-w-[470px] rounded-lg border p-9 text-center bg-raise! border-secondary elevation-3"
       onSubmit={(event) => {
         event.preventDefault()
 
@@ -56,7 +56,7 @@ export default function DeviceAuthVerifyPage() {
         dashAfterIdxs={DASH_AFTER_IDXS}
       />
       <Button
-        className="w-full !text-mono-sm"
+        className="w-full text-mono-sm!"
         type="submit"
         loading={confirmPost.isPending}
         disabled={confirmPost.isPending || confirmPost.isSuccess || userCode.length < 8}
diff --git a/app/pages/project/instances/InstancesPage.tsx b/app/pages/project/instances/InstancesPage.tsx
index d8d421d49c..99e75e7435 100644
--- a/app/pages/project/instances/InstancesPage.tsx
+++ b/app/pages/project/instances/InstancesPage.tsx
@@ -219,7 +219,7 @@ export default function InstancesPage() {
       </PageHeader>
       {/* Avoid changing justify-end on TableActions for this one case. We can
        * fix this properly when we add refresh and filtering for all tables. */}
-      <TableActions className="!justify-between">
+      <TableActions className="justify-between!">
         <div className="flex items-center gap-2">
           <RefreshButton onClick={refetchInstances} />
           <Tooltip
diff --git a/app/pages/project/instances/SerialConsolePage.tsx b/app/pages/project/instances/SerialConsolePage.tsx
index 229c69f5d5..221d6442e1 100644
--- a/app/pages/project/instances/SerialConsolePage.tsx
+++ b/app/pages/project/instances/SerialConsolePage.tsx
@@ -135,7 +135,7 @@ export default function SerialConsolePage() {
   }, [canConnect])
 
   return (
-    <div className="!mx-0 flex h-full max-h-[calc(100vh-var(--top-bar-height))] !w-full flex-col">
+    <div className="mx-0! flex h-full max-h-[calc(100vh-var(--top-bar-height))] w-full! flex-col">
       <Link
         to={pb.instance(instanceSelector)}
         className="mx-3 mb-6 mt-3 flex h-10 shrink-0 items-center rounded px-3 bg-accent-secondary"
@@ -198,7 +198,7 @@ function SerialSkeleton({ children, animate }: SkeletonProps) {
           background: 'linear-gradient(180deg, rgba(8, 15, 17, 0) 0%, #080F11 100%)',
         }}
       />
-      <div className="absolute left-1/2 top-1/2 flex w-96 -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center rounded-lg border p-12 !bg-raise border-secondary elevation-3">
+      <div className="absolute left-1/2 top-1/2 flex w-96 -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center rounded-lg border p-12 bg-raise! border-secondary elevation-3">
         {children}
       </div>
     </div>
diff --git a/app/pages/project/vpcs/internet-gateway-edit.tsx b/app/pages/project/vpcs/internet-gateway-edit.tsx
index 59af8c3e0a..527cdf0101 100644
--- a/app/pages/project/vpcs/internet-gateway-edit.tsx
+++ b/app/pages/project/vpcs/internet-gateway-edit.tsx
@@ -39,7 +39,7 @@ export const handle = titleCrumb('Edit Internet Gateway')
 
 const RoutesEmpty = () => (
   <Table.Row>
-    <Table.Cell colSpan={2} className="!bg-raise">
+    <Table.Cell colSpan={2} className="bg-raise!">
       No VPC router routes target this gateway.
     </Table.Cell>
   </Table.Row>
@@ -53,7 +53,7 @@ function RouteRows({ project, vpc, gateway }: PP.VpcInternetGateway) {
 
   return matchingRoutes.map(([router, route]) => (
     <Table.Row key={route.id}>
-      <Table.Cell className="!bg-raise">
+      <Table.Cell className="bg-raise!">
         <Link
           to={pb.vpcRouter({ project, vpc, router })}
           className="link-with-underline text-sans-md"
@@ -61,7 +61,7 @@ function RouteRows({ project, vpc, gateway }: PP.VpcInternetGateway) {
           {router}
         </Link>
       </Table.Cell>
-      <Table.Cell className="!bg-raise">{route.name}</Table.Cell>
+      <Table.Cell className="bg-raise!">{route.name}</Table.Cell>
     </Table.Row>
   ))
 }
diff --git a/app/pages/settings/ProfilePage.tsx b/app/pages/settings/ProfilePage.tsx
index cf07e080ef..4aa8294126 100644
--- a/app/pages/settings/ProfilePage.tsx
+++ b/app/pages/settings/ProfilePage.tsx
@@ -55,9 +55,9 @@ export default function ProfilePage() {
         Groups
       </TableTitle>
       <Table table={groupsTable} aria-labelledby="groups-label" />
-      <p className="inline-block max-w-md text-sans-md text-default">
+      <p className="text-sans-md text-default inline-block max-w-md">
         Your user information is managed by your organization.{' '}
-        <span className="md+:block">
+        <span className="800:block">
           To update your information, contact your administrator.
         </span>
       </p>
diff --git a/app/pages/system/UtilizationPage.tsx b/app/pages/system/UtilizationPage.tsx
index a1471303a2..418fba536f 100644
--- a/app/pages/system/UtilizationPage.tsx
+++ b/app/pages/system/UtilizationPage.tsx
@@ -125,7 +125,7 @@ const MetricsTab = () => {
 
   return (
     <>
-      <div className="mb-3 mt-8 flex flex-wrap justify-between gap-3">
+      <div className="mt-8 mb-3 flex flex-wrap justify-between gap-3">
         <div className="flex gap-2">
           {intervalPicker}
 
@@ -240,7 +240,7 @@ function UsageTab() {
                 unit="TiB"
               />
             </Table.Cell>
-            <Table.Cell className="action-col w-10 children:p-0" height="large">
+            <Table.Cell className="action-col w-10 *:p-0" height="large">
               <RowActions id={silo.siloId} copyIdLabel="Copy silo ID" />
             </Table.Cell>
           </Table.Row>
@@ -259,7 +259,7 @@ const UsageCell = ({
   allocated: number
   unit?: string
 }) => (
-  <div className="flex flex-col text-secondary">
+  <div className="text-secondary flex flex-col">
     <div>
       <span className="text-raise">{provisioned}</span> /
     </div>
diff --git a/app/pages/system/networking/IpPoolPage.tsx b/app/pages/system/networking/IpPoolPage.tsx
index a99961dee5..bf65595402 100644
--- a/app/pages/system/networking/IpPoolPage.tsx
+++ b/app/pages/system/networking/IpPoolPage.tsx
@@ -152,7 +152,7 @@ function UtilizationBars() {
   if (ipv4.capacity === 0 && ipv6.capacity === 0n) return null
 
   return (
-    <div className="-mt-8 mb-8 flex min-w-min flex-col gap-3 lg+:flex-row">
+    <div className="1000:flex-row -mt-8 mb-8 flex min-w-min flex-col gap-3">
       {ipv4.capacity > 0 && (
         <CapacityBar
           icon={<IpGlobal16Icon />}
diff --git a/app/table/cells/TypeValueCell.tsx b/app/table/cells/TypeValueCell.tsx
index f48ca41bae..40b1a34c41 100644
--- a/app/table/cells/TypeValueCell.tsx
+++ b/app/table/cells/TypeValueCell.tsx
@@ -16,7 +16,7 @@ export type TypeValue = {
 export const TypeValueCell = ({ type, value }: TypeValue) => (
   <div className="space-x-0.5">
     <Badge>{type}</Badge>
-    <Badge variant="solid" className="!normal-case">
+    <Badge variant="solid" className="normal-case!">
       {value}
     </Badge>
   </div>
diff --git a/app/table/columns/action-col.tsx b/app/table/columns/action-col.tsx
index a782ec05f2..cae806ec1e 100644
--- a/app/table/columns/action-col.tsx
+++ b/app/table/columns/action-col.tsx
@@ -60,7 +60,7 @@ export const getActionsCol = <TData extends Record<string, unknown>>(
     header: '',
     meta: {
       thClassName: 'action-col',
-      tdClassName: 'action-col children:p-0 w-10',
+      tdClassName: 'action-col *:p-0 w-10',
     },
 
     cell: ({ row }) => {
diff --git a/app/ui/lib/ActionMenu.tsx b/app/ui/lib/ActionMenu.tsx
index aee7a8b1d4..7949635e8e 100644
--- a/app/ui/lib/ActionMenu.tsx
+++ b/app/ui/lib/ActionMenu.tsx
@@ -92,7 +92,7 @@ export function ActionMenu(props: ActionMenuProps) {
     >
       <Dialog.Portal>
         <DialogOverlay />
-        <Dialog.Content className="fixed inset-0 z-modal mx-auto mt-[20vh] w-[46rem] bg-transparent p-0">
+        <Dialog.Content className="fixed inset-0 z-(--z-modal) mx-auto mt-[20vh] w-184 bg-transparent p-0">
           <div
             onKeyDown={(e) => {
               const lastIdx = itemsInOrder.length - 1
@@ -117,13 +117,13 @@ export function ActionMenu(props: ActionMenuProps) {
           >
             <div
               className={cn(
-                'flex h-14 w-full overflow-y-auto rounded-lg border bg-raise border-secondary elevation-3'
+                'bg-raise border-secondary elevation-3 flex h-14 w-full overflow-y-auto rounded-lg border'
               )}
             >
               <input
                 ref={inputRef}
                 className={cn(
-                  'mousetrap caret-gray-100 w-full bg-transparent px-4 text-sans-xl focus:outline-none',
+                  'mousetrap text-sans-xl w-full bg-transparent px-4 caret-gray-100 focus:outline-none',
                   props.inputClassName
                 )}
                 value={input}
@@ -138,7 +138,7 @@ export function ActionMenu(props: ActionMenuProps) {
               {input.length > 0 && (
                 <button
                   type="button"
-                  className="flex items-center py-6 pl-6 pr-4 text-default"
+                  className="text-default flex items-center py-6 pr-4 pl-6"
                   onClick={() => {
                     setInput('')
                     inputRef.current?.focus()
@@ -151,14 +151,14 @@ export function ActionMenu(props: ActionMenuProps) {
               <button
                 type="button"
                 onClick={onDismiss}
-                className="flex h-full items-center border-l px-6 align-middle text-mono-sm text-default border-secondary"
+                className="text-mono-sm text-default border-secondary flex h-full items-center border-l px-6 align-middle"
               >
                 Dismiss
               </button>
             </div>
 
             {items.length > 0 && (
-              <div className="relative mt-5 transform-gpu overflow-hidden rounded-lg elevation-3">
+              <div className="elevation-3 relative mt-5 transform-gpu overflow-hidden rounded-lg">
                 <div
                   className="overflow-y-auto"
                   ref={divRef}
@@ -167,7 +167,7 @@ export function ActionMenu(props: ActionMenuProps) {
                   <ul ref={ulRef}>
                     {allGroups.map(([label, items]) => (
                       <div key={label}>
-                        <h3 className="sticky top-0 z-20 h-[32px] px-4 py-2 text-mono-sm text-default bg-tertiary">
+                        <h3 className="text-mono-sm text-default bg-tertiary sticky top-0 z-20 h-[32px] px-4 py-2">
                           {label}
                         </h3>
                         {items.map((item) => (
@@ -187,7 +187,7 @@ export function ActionMenu(props: ActionMenuProps) {
                             <li
                               role="option"
                               className={cn(
-                                'box-border block h-full w-full cursor-pointer select-none overflow-visible border p-4 text-sans-md text-default bg-raise border-secondary hover:bg-hover',
+                                'text-sans-md text-default bg-raise border-secondary hover:bg-hover box-border block h-full w-full cursor-pointer overflow-visible border p-4 select-none',
                                 item.value === selectedItem?.value &&
                                   'text-accent bg-accent-secondary hover:bg-accent-secondary-hover'
                               )}
@@ -205,7 +205,7 @@ export function ActionMenu(props: ActionMenuProps) {
                     ))}
                   </ul>
                 </div>
-                <div className="flex justify-between rounded-b-[3px] px-4 py-2 text-default bg-tertiary">
+                <div className="text-default bg-tertiary flex justify-between rounded-b-[3px] px-4 py-2">
                   <ActionMenuHotkey keys={['Enter']} action="submit" />
                   <ActionMenuHotkey keys={['Arrow Up', 'Arrow Down']} action="select" />
                   <ActionMenuHotkey keys={['Esc']} action="close" />
@@ -230,7 +230,7 @@ export const ActionMenuHotkey = ({ keys, action }: ActionMenuHotkeyProps) => (
       {keys.map((hotkey) => (
         <kbd
           key={hotkey}
-          className="mr-1 inline-block rounded border border-[rgba(255,255,255,.15)] px-2 py-1 text-mono-xs text-raise"
+          className="text-mono-xs text-raise mr-1 inline-block rounded border border-[rgba(255,255,255,.15)] px-2 py-1"
         >
           {hotkey}
         </kbd>
diff --git a/app/ui/lib/Badge.tsx b/app/ui/lib/Badge.tsx
index 92ffc05cd8..e3d21e183d 100644
--- a/app/ui/lib/Badge.tsx
+++ b/app/ui/lib/Badge.tsx
@@ -25,19 +25,19 @@ export interface BadgeProps {
 
 export const badgeColors: Record<BadgeVariant, Record<BadgeColor, string>> = {
   default: {
-    default: `ring-1 ring-inset bg-accent-secondary text-accent ring-[rgba(var(--base-green-800-rgb),0.15)]`,
-    destructive: `ring-1 ring-inset bg-destructive-secondary text-destructive ring-[rgba(var(--base-red-800-rgb),0.15)]`,
-    notice: `ring-1 ring-inset bg-notice-secondary text-notice ring-[rgba(var(--base-yellow-800-rgb),0.15)]`,
-    neutral: `ring-1 ring-inset bg-secondary text-default ring-[rgba(var(--base-neutral-700-rgb),0.15)]`,
-    purple: `ring-1 ring-inset bg-[--base-purple-200] text-[--base-purple-700] ring-[rgba(var(--base-purple-800-rgb),0.15)]`,
-    blue: `ring-1 ring-inset bg-info-secondary text-info ring-[rgba(var(--base-blue-800-rgb),0.15)]`,
+    default: `ring ring-inset bg-accent-secondary text-accent ring-accent/15`,
+    destructive: `ring ring-inset bg-destructive-secondary text-destructive ring-destructive/15`,
+    notice: `ring ring-inset bg-notice-secondary text-notice ring-notice/15`,
+    neutral: 'ring ring-inset bg-secondary text-default ring-neutral-700/15',
+    purple: `ring ring-inset bg-purple-200 text-purple-800 ring-purple-800/15`,
+    blue: `ring ring-inset bg-info-secondary text-info ring-blue-800/15`,
   },
   solid: {
     default: 'bg-accent text-inverse',
     destructive: 'bg-destructive text-inverse',
     notice: 'bg-notice text-inverse',
-    neutral: 'bg-[--base-neutral-700] text-inverse',
-    purple: 'bg-[--base-purple-700] text-inverse',
+    neutral: 'bg-neutral-700 text-inverse',
+    purple: 'bg-purple-700 text-inverse',
     blue: 'bg-info text-inverse',
   },
 }
@@ -53,7 +53,7 @@ export const Badge = ({
       className={cn(
         'ox-badge',
         `variant-${variant}`,
-        'inline-flex h-4 items-center whitespace-nowrap rounded-sm px-[3px] py-[1px] uppercase text-mono-sm',
+        'text-mono-sm inline-flex h-4 items-center rounded-sm px-[3px] py-px whitespace-nowrap uppercase',
         badgeColors[variant][color],
         className
       )}
diff --git a/app/ui/lib/BulkActionMenu.tsx b/app/ui/lib/BulkActionMenu.tsx
index c987083a16..05ed7eb7fa 100644
--- a/app/ui/lib/BulkActionMenu.tsx
+++ b/app/ui/lib/BulkActionMenu.tsx
@@ -18,8 +18,8 @@ export interface BulkActionMenuProps {
 export function BulkActionMenu({ children, selectedCount }: BulkActionMenuProps) {
   const actionButtons = flattenChildren(children)
   return (
-    <div className="flex w-fit rounded border bg-accent-secondary border-accent children:items-center children:space-x-2 children:p-3">
-      <div className="flex border-r border-accent-tertiary">{actionButtons}</div>
+    <div className="bg-accent-secondary border-accent flex w-fit rounded border *:items-center *:space-x-2 *:p-3">
+      <div className="border-accent-tertiary flex border-r">{actionButtons}</div>
       <div className="flex">
         <span className="text-sans-sm text-accent">{selectedCount} selected</span>
       </div>
@@ -31,7 +31,7 @@ BulkActionMenu.Button = (props: Omit<ButtonProps, 'size' | 'variant'>) => (
   <Button
     size="sm"
     // TODO: Remove this border once the proper button styles are available
-    className="rounded border !border-accent-secondary"
+    className="border-accent-secondary! rounded border"
     {...props}
   />
 )
diff --git a/app/ui/lib/CalendarCell.tsx b/app/ui/lib/CalendarCell.tsx
index cf3f28dca3..511952241b 100644
--- a/app/ui/lib/CalendarCell.tsx
+++ b/app/ui/lib/CalendarCell.tsx
@@ -79,8 +79,8 @@ export function CalendarCell({ state, date }: CalendarCellProps) {
           'my-0.5 h-8 w-10 text-center text-mono-md',
           isSelectionStart || isSelectionEnd
             ? isInvalid
-              ? '!text-error'
-              : '!text-accent'
+              ? 'text-error!'
+              : 'text-accent!'
             : '',
           isSelected && !isDisabled
             ? isInvalid
@@ -113,7 +113,7 @@ export function CalendarCell({ state, date }: CalendarCellProps) {
           className={cn(
             'relative z-10 flex h-full w-full items-center justify-center',
             isDisabled && !isInvalid
-              ? 'disabled cursor-not-allowed text-disabled !bg-raise'
+              ? 'disabled cursor-not-allowed text-disabled bg-raise!'
               : ''
           )}
         >
@@ -125,8 +125,8 @@ export function CalendarCell({ state, date }: CalendarCellProps) {
             className={cn(
               "absolute bottom-[5px] left-1/2 h-[3px] w-[3px] -translate-x-1/2 rounded-full content-['']",
               isInvalid
-                ? 'bg-[var(--content-error-tertiary)]'
-                : 'bg-[var(--content-accent-tertiary)]'
+                ? 'bg-(--content-error-tertiary)'
+                : 'bg-(--content-accent-tertiary)'
             )}
           />
         )}
diff --git a/app/ui/lib/CardBlock.tsx b/app/ui/lib/CardBlock.tsx
index 500bb81a88..bf584ee54d 100644
--- a/app/ui/lib/CardBlock.tsx
+++ b/app/ui/lib/CardBlock.tsx
@@ -28,7 +28,7 @@ export function CardBlock({ children, width = 'full' }: CardBlockProps) {
   return (
     <div
       className={cn(
-        'flex flex-col rounded-lg border py-5 text-sans-md border-default children:border-b children:border-b-secondary last:children:border-0 last:children:pb-0',
+        'text-sans-md border-default *:border-b-secondary flex flex-col rounded-lg border py-5 *:border-b last:*:border-0 last:*:pb-0',
         widthClass[width]
       )}
     >
@@ -45,7 +45,7 @@ type HeaderProps = {
 }
 
 CardBlock.Header = ({ title, description, children, titleId }: HeaderProps) => (
-  <header className="flex items-start justify-between px-5 pb-4 text-secondary">
+  <header className="text-secondary flex items-start justify-between px-5 pb-4">
     <div className="flex flex-col gap-0.5">
       <div className="text-sans-semi-lg text-raise" id={titleId}>
         {title}
@@ -67,7 +67,7 @@ export const LearnMore = ({ href, text }: { href: string; text: React.ReactNode
     Learn more about{' '}
     <a
       href={href}
-      className="inline-flex items-center text-accent-secondary hover:text-accent"
+      className="text-accent-secondary hover:text-accent inline-flex items-center"
       target="_blank"
       rel="noreferrer"
     >
diff --git a/app/ui/lib/Combobox.tsx b/app/ui/lib/Combobox.tsx
index d146c09129..62189c84a4 100644
--- a/app/ui/lib/Combobox.tsx
+++ b/app/ui/lib/Combobox.tsx
@@ -181,9 +181,9 @@ export const Combobox = ({
                 ? 'focus-error border-error-secondary focus-within:ring-error-secondary hover:border-error'
                 : 'border-default focus-within:ring-accent-secondary hover:border-hover',
               disabled
-                ? 'cursor-not-allowed text-disabled bg-disabled !border-default'
+                ? 'cursor-not-allowed text-disabled bg-disabled border-default!'
                 : 'bg-default',
-              disabled && hasError && '!border-error-secondary'
+              disabled && hasError && 'border-error-secondary!'
             )}
             // Putting the inputRef on the div makes it so the div can be focused by RHF when there's an error.
             // We want to focus on the div (rather than the input) so the combobox doesn't open automatically
@@ -226,9 +226,9 @@ export const Combobox = ({
               placeholder={placeholder}
               disabled={disabled || isLoading}
               className={cn(
-                `h-10 w-full rounded !border-none px-3 py-2 !outline-none text-sans-md text-raise placeholder:text-tertiary`,
+                `h-10 w-full rounded border-none! px-3 py-2 outline-none! text-sans-md text-raise placeholder:text-tertiary`,
                 disabled
-                  ? 'cursor-not-allowed text-disabled bg-disabled !border-default'
+                  ? 'cursor-not-allowed text-disabled bg-disabled border-default!'
                   : 'bg-default',
                 hasError && 'focus-error'
               )}
@@ -249,7 +249,7 @@ export const Combobox = ({
             <ComboboxOptions
               anchor="bottom start"
               // 13px gap is presumably because it's measured from inside the outline or something
-              className={`ox-menu pointer-events-auto ${zIndex} relative w-[calc(var(--input-width)+var(--button-width))] overflow-y-auto border !outline-none border-secondary [--anchor-gap:13px] empty:hidden`}
+              className={`ox-menu pointer-events-auto ${zIndex} relative w-[calc(var(--input-width)+var(--button-width))] overflow-y-auto border outline-none! border-secondary [--anchor-gap:13px] empty:hidden`}
               modal={false}
             >
               {filteredItems.map((item) => (
@@ -276,7 +276,7 @@ export const Combobox = ({
               ))}
               {!allowArbitraryValues && filteredItems.length === 0 && (
                 <ComboboxOption disabled value="no-matches" className="relative">
-                  <div className="ox-menu-item !text-disabled">No items match</div>
+                  <div className="ox-menu-item text-disabled!">No items match</div>
                 </ComboboxOption>
               )}
             </ComboboxOptions>
diff --git a/app/ui/lib/DateField.tsx b/app/ui/lib/DateField.tsx
index c84fd15064..02e136bacb 100644
--- a/app/ui/lib/DateField.tsx
+++ b/app/ui/lib/DateField.tsx
@@ -129,7 +129,7 @@ function DateSegment({
           (segment.maxValue != null && String(segment.maxValue).length + 'ch') || undefined,
       }}
       className={cn(
-        'group box-content rounded px-[1px] text-right tabular-nums outline-none',
+        'group box-content rounded px-px text-right tabular-nums outline-none',
         !readOnly && 'focus:text-raise focus:bg-accent-secondary-hover',
         segment.type === 'timeZoneName' ? 'ml-1 text-sans-sm' : 'text-sans-md'
       )}
diff --git a/app/ui/lib/DatePicker.tsx b/app/ui/lib/DatePicker.tsx
index ae50282ff2..138d73e989 100644
--- a/app/ui/lib/DatePicker.tsx
+++ b/app/ui/lib/DatePicker.tsx
@@ -61,7 +61,7 @@ export function DatePicker(props: DatePickerProps) {
               : 'border-default ring-accent-secondary'
           )}
         >
-          <div className={cn('relative flex w-[10rem] items-center px-3 text-sans-md')}>
+          <div className={cn('relative flex w-40 items-center px-3 text-sans-md')}>
             {label}
             {state.isInvalid && (
               <div className="absolute bottom-0 right-2 top-0 flex items-center text-error">
diff --git a/app/ui/lib/DateRangePicker.tsx b/app/ui/lib/DateRangePicker.tsx
index ff7e2c71c7..269c6a9f56 100644
--- a/app/ui/lib/DateRangePicker.tsx
+++ b/app/ui/lib/DateRangePicker.tsx
@@ -69,7 +69,7 @@ export function DateRangePicker(props: DateRangePickerProps) {
               : 'border-default ring-accent-secondary'
           )}
         >
-          <div className="relative flex w-[16rem] items-center px-3 text-sans-md">
+          <div className="relative flex w-64 items-center px-3 text-sans-md">
             <div className="truncate">{label}</div>
             {state.isInvalid && (
               <div className="absolute bottom-0 right-2 top-0 flex items-center text-error">
diff --git a/app/ui/lib/DialogOverlay.tsx b/app/ui/lib/DialogOverlay.tsx
index e0dfd12ce0..06272e7bb5 100644
--- a/app/ui/lib/DialogOverlay.tsx
+++ b/app/ui/lib/DialogOverlay.tsx
@@ -17,7 +17,7 @@ export const DialogOverlay = ({ ref }: Props) => (
   <m.div
     ref={ref}
     aria-hidden
-    className="fixed inset-0 z-modalOverlay overflow-auto bg-scrim"
+    className="bg-scrim fixed inset-0 z-(--modal-overlay) overflow-auto"
     initial={{ opacity: 0 }}
     animate={{ opacity: 1 }}
     exit={{ opacity: 0 }}
diff --git a/app/ui/lib/Divider.tsx b/app/ui/lib/Divider.tsx
index ac95245899..97e7f2d5c3 100644
--- a/app/ui/lib/Divider.tsx
+++ b/app/ui/lib/Divider.tsx
@@ -11,4 +11,4 @@ import { classed } from '~/util/classed'
 export const FormDivider = classed.hr`ox-divider w-full border-t border-secondary`
 
 /** Needs !important styles to override :gutter thing on `<main>` */
-export const Divider = classed.hr`!mx-0 !w-full border-t border-secondary`
+export const Divider = classed.hr`mx-0! w-full! border-t border-secondary`
diff --git a/app/ui/lib/EmptyMessage.tsx b/app/ui/lib/EmptyMessage.tsx
index 8e46af3249..36a58e34ad 100644
--- a/app/ui/lib/EmptyMessage.tsx
+++ b/app/ui/lib/EmptyMessage.tsx
@@ -41,7 +41,7 @@ export function EmptyMessage(props: Props) {
     )
   }
   return (
-    <div className="m-4 flex max-w-[18rem] flex-col items-center text-center">
+    <div className="m-4 flex max-w-72 flex-col items-center text-center">
       {props.icon && (
         <div className="mb-4 rounded p-1 leading-[0] text-accent bg-accent-secondary">
           {props.icon}
diff --git a/app/ui/lib/FileInput.tsx b/app/ui/lib/FileInput.tsx
index 38302be29f..bcb83422e8 100644
--- a/app/ui/lib/FileInput.tsx
+++ b/app/ui/lib/FileInput.tsx
@@ -69,7 +69,7 @@ export function FileInput({
         type="file"
         name="file"
         className={cn(
-          '-z-1 absolute inset-0 w-full cursor-pointer rounded',
+          'absolute inset-0 -z-1 w-full cursor-pointer rounded',
           error && 'focus-error'
         )}
         {...inputProps}
@@ -80,32 +80,32 @@ export function FileInput({
       />
       <div
         className={cn(
-          'z-1 pointer-events-none relative flex flex-col items-center justify-center space-y-2 rounded border px-4 py-6 text-raise bg-default',
-          dragOver && 'bg-accent-secondary !border-accent-secondary',
+          'text-raise bg-default pointer-events-none relative z-1 flex flex-col items-center justify-center space-y-2 rounded border px-4 py-6',
+          dragOver && 'bg-accent-secondary border-accent-secondary!',
           error
-            ? '!border-error-secondary group-hover:border-error'
+            ? 'border-error-secondary! group-hover:border-error'
             : 'border-default group-hover:border-hover'
         )}
       >
         <div
           className={cn(
-            'flex items-center justify-center rounded p-1 text-accent bg-accent-secondary',
+            'text-accent bg-accent-secondary flex items-center justify-center rounded p-1',
             dragOver && 'bg-accent-secondary-hover'
           )}
         >
           <Document16Icon className="h-4 w-4" />
         </div>
-        <div className="flex h-8 items-center text-sans-md">
+        <div className="text-sans-md flex h-8 items-center">
           {file && !dragOver ? (
-            <div className="flex items-center text-raise">
+            <div className="text-raise flex items-center">
               <Truncate text={file.name} maxLength={32} position="middle" />
-              <span className="ml-1 text-tertiary">
+              <span className="text-tertiary ml-1">
                 ({filesize(file.size, { base: 2, pad: true })})
               </span>
               <button
                 type="button"
                 onClick={handleResetInput}
-                className="pointer-events-auto ml-1 inline-flex rounded p-1 hover:children:text-secondary"
+                className="hover:*:text-secondary pointer-events-auto ml-1 inline-flex rounded p-1"
                 aria-label="Clear file"
               >
                 <Error16Icon className="text-tertiary" />
@@ -115,7 +115,7 @@ export function FileInput({
             <>
               Drop a file or click to browse{' '}
               {accept && (
-                <span className="ml-1 text-tertiary">({removeLeadingPeriods(accept)})</span>
+                <span className="text-tertiary ml-1">({removeLeadingPeriods(accept)})</span>
               )}
             </>
           )}
diff --git a/app/ui/lib/InlineCode.tsx b/app/ui/lib/InlineCode.tsx
index ccbb60429a..4d6d286494 100644
--- a/app/ui/lib/InlineCode.tsx
+++ b/app/ui/lib/InlineCode.tsx
@@ -8,4 +8,4 @@
 
 import { classed } from '~/util/classed'
 
-export const InlineCode = classed.code`whitespace-nowrap rounded-sm px-[3px] py-[1px] text-mono-sm !normal-case bg-raise border border-secondary mx-px`
+export const InlineCode = classed.code`whitespace-nowrap rounded-sm px-[3px] py-px text-mono-sm normal-case! bg-raise border border-secondary mx-px`
diff --git a/app/ui/lib/Listbox.tsx b/app/ui/lib/Listbox.tsx
index 71aef4a94f..814a880605 100644
--- a/app/ui/lib/Listbox.tsx
+++ b/app/ui/lib/Listbox.tsx
@@ -108,9 +108,9 @@ export const Listbox = <Value extends string = string>({
                 open && 'ring-2 ring-accent-secondary',
                 open && hasError && 'ring-error-secondary',
                 isDisabled
-                  ? 'cursor-not-allowed text-disabled bg-disabled !border-default'
+                  ? 'cursor-not-allowed text-disabled bg-disabled border-default!'
                   : 'bg-default',
-                isDisabled && hasError && '!border-error-secondary',
+                isDisabled && hasError && 'border-error-secondary!',
                 hideSelected ? 'w-auto' : 'w-full'
               )}
               ref={buttonRef}
@@ -118,7 +118,7 @@ export const Listbox = <Value extends string = string>({
             >
               {!hideSelected && (
                 <>
-                  <div className="w-full overflow-hidden overflow-ellipsis whitespace-pre px-3 text-left">
+                  <div className="w-full overflow-hidden text-ellipsis whitespace-pre px-3 text-left">
                     {selectedItem ? (
                       // selectedLabel is one line, which is what we need when label is a ReactNode
                       selectedItem.selectedLabel || selectedItem.label
@@ -145,8 +145,8 @@ export const Listbox = <Value extends string = string>({
               anchor={{ gap: 12, to: 'bottom start' }}
               className={cn(
                 zIndex,
-                'ox-menu pointer-events-auto overflow-y-auto !outline-none',
-                !hideSelected ? 'w-[var(--button-width)]' : 'min-w-24'
+                'ox-menu pointer-events-auto overflow-y-auto outline-none!',
+                !hideSelected ? 'w-(--button-width)' : 'min-w-24'
               )}
               // This is to prevent the `useOthersInert` call in ListboxOptions.
               // Without this, when the listbox options box scrolls under the
diff --git a/app/ui/lib/Message.tsx b/app/ui/lib/Message.tsx
index 0f48a57cc6..5971caeef5 100644
--- a/app/ui/lib/Message.tsx
+++ b/app/ui/lib/Message.tsx
@@ -45,10 +45,10 @@ const color: Record<Variant, string> = {
 }
 
 const textColor: Record<Variant, string> = {
-  success: 'text-accent children:text-accent',
-  error: 'text-error children:text-error',
-  notice: 'text-notice children:text-notice',
-  info: 'text-info children:text-info',
+  success: 'text-accent *:text-accent',
+  error: 'text-error *:text-error',
+  notice: 'text-notice *:text-notice',
+  info: 'text-info *:text-info',
 }
 
 const secondaryTextColor: Record<Variant, string> = {
@@ -77,7 +77,7 @@ export const Message = ({
   return (
     <div
       className={cn(
-        'relative flex items-start gap-2.5 overflow-hidden rounded-lg p-4 elevation-1',
+        'elevation-1 relative flex items-start gap-2.5 overflow-hidden rounded-lg p-4',
         color[variant],
         textColor[variant],
         className
@@ -100,7 +100,7 @@ export const Message = ({
         {cta && (
           <Link
             className={cn(
-              'mt-1 flex items-center underline text-sans-md',
+              'text-sans-md mt-1 flex items-center underline',
               linkColor[variant]
             )}
             to={cta.link}
diff --git a/app/ui/lib/MiniTable.tsx b/app/ui/lib/MiniTable.tsx
index 824e239475..582bd897d4 100644
--- a/app/ui/lib/MiniTable.tsx
+++ b/app/ui/lib/MiniTable.tsx
@@ -26,7 +26,7 @@ export const HeadCell = BigTable.HeadCell
 
 export const Body = classed.tbody``
 
-export const Row = classed.tr`is-selected children:border-default first:children:border-l children:last:border-b last:children:border-r`
+export const Row = classed.tr`is-selected *:border-default first:*:border-l *:last:border-b last:*:border-r`
 
 export const Cell = ({ children }: Children) => {
   return (
diff --git a/app/ui/lib/Modal.tsx b/app/ui/lib/Modal.tsx
index 9247c40b7b..b18f6be394 100644
--- a/app/ui/lib/Modal.tsx
+++ b/app/ui/lib/Modal.tsx
@@ -21,9 +21,9 @@ import { ModalContext } from './modal-context'
 type Width = 'narrow' | 'medium' | 'free'
 
 const widthClass: Record<Width, string> = {
-  narrow: 'w-full max-w-[24rem]',
-  medium: 'w-full max-w-[28rem]',
-  free: 'min-w-[24rem] max-w-[48rem]', // give it a big max just to be safe
+  narrow: 'w-full max-w-96',
+  medium: 'w-full max-w-112',
+  free: 'min-w-96 max-w-192', // give it a big max just to be safe
 }
 
 export type ModalProps = {
@@ -74,16 +74,16 @@ export function Modal({
               animate={{ x: '-50%', y: '-50%' }}
               transition={{ type: 'spring', duration: 0.3, bounce: 0 }}
               className={cn(
-                'pointer-events-auto fixed left-1/2 top-[min(50%,500px)] z-modal m-0 flex max-h-[min(800px,80vh)] flex-col justify-between rounded-lg border p-0 bg-raise border-secondary elevation-2',
+                'bg-raise border-secondary elevation-2 pointer-events-auto fixed top-[min(50%,500px)] left-1/2 z-(--z-modal) m-0 flex max-h-[min(800px,80vh)] flex-col justify-between rounded-lg border p-0',
                 widthClass[width]
               )}
             >
-              <Dialog.Title className="border-b px-4 py-4 text-sans-semi-lg bg-secondary border-b-secondary">
+              <Dialog.Title className="text-sans-semi-lg bg-secondary border-b-secondary border-b px-4 py-4">
                 {title}
               </Dialog.Title>
               {children}
               <Dialog.Close
-                className="absolute right-2 top-3.5 flex items-center justify-center rounded p-2 hover:bg-hover"
+                className="hover:bg-hover absolute top-3.5 right-2 flex items-center justify-center rounded p-2"
                 aria-label="Close"
               >
                 <Close12Icon className="text-default" />
@@ -126,7 +126,7 @@ Modal.Footer = ({
   disabled,
   formId,
 }: FooterProps) => (
-  <footer className="flex items-center justify-between border-t px-4 py-3 border-secondary">
+  <footer className="border-secondary flex items-center justify-between border-t px-4 py-3">
     <div className="mr-4">{children}</div>
     <div className="space-x-2">
       <Button variant="secondary" size="sm" onClick={onDismiss}>
diff --git a/app/ui/lib/NumberInput.tsx b/app/ui/lib/NumberInput.tsx
index 477552965c..51a30578f7 100644
--- a/app/ui/lib/NumberInput.tsx
+++ b/app/ui/lib/NumberInput.tsx
@@ -38,7 +38,7 @@ export function NumberInput(props: NumberInputProps) {
         props.error
           ? 'border-error-secondary hover:border-error'
           : 'border-default hover:border-hover',
-        props.isDisabled && '!border-default',
+        props.isDisabled && 'border-default!',
         props.className
       )}
       {...groupProps}
@@ -47,7 +47,7 @@ export function NumberInput(props: NumberInputProps) {
         {...inputProps}
         ref={mergeRefs([props.ref, inputRef])}
         className={cn(
-          `w-full rounded border-none px-3 py-[0.6875rem] !outline-offset-1 text-sans-md text-raise bg-default placeholder:text-tertiary focus:outline-none disabled:cursor-not-allowed disabled:text-secondary disabled:bg-disabled`,
+          `w-full rounded border-none px-3 py-2.75 outline-offset-1! text-sans-md text-raise bg-default placeholder:text-tertiary focus:outline-none disabled:cursor-not-allowed disabled:text-secondary disabled:bg-disabled`,
           props.error && 'focus-error',
           props.isDisabled && 'text-disabled bg-disabled'
         )}
@@ -56,7 +56,7 @@ export function NumberInput(props: NumberInputProps) {
         <IncrementButton {...incrementButtonProps}>
           <InputArrowIcon />
         </IncrementButton>
-        <div className="h-[1px] w-full border-t border-t-default" />
+        <div className="h-px w-full border-t border-t-default" />
         <IncrementButton {...decrementButtonProps}>
           <InputArrowIcon className="rotate-180" />
         </IncrementButton>
diff --git a/app/ui/lib/Pagination.tsx b/app/ui/lib/Pagination.tsx
index 99a6355cfd..3d1d45f54a 100644
--- a/app/ui/lib/Pagination.tsx
+++ b/app/ui/lib/Pagination.tsx
@@ -19,7 +19,7 @@ const PageInput = ({ number, className }: PageInputProps) => {
   return (
     <span
       className={cn(
-        'h-4 whitespace-nowrap rounded px-[3px] pb-[3px] pt-[1px] ring-1 ring-inset text-mono-sm text-default bg-tertiary ring-secondary',
+        'h-4 whitespace-nowrap rounded px-[3px] pb-[3px] pt-px ring-1 ring-inset text-mono-sm text-default bg-tertiary ring-secondary',
         className
       )}
     >
diff --git a/app/ui/lib/Popover.tsx b/app/ui/lib/Popover.tsx
index c46c48be4f..9387fcba74 100644
--- a/app/ui/lib/Popover.tsx
+++ b/app/ui/lib/Popover.tsx
@@ -39,7 +39,7 @@ export function Popover(props: PopoverProps) {
       <div
         {...popoverProps}
         ref={ref}
-        className="rounded-md absolute top-full z-popover mt-2 rounded-lg border bg-raise border-secondary elevation-2"
+        className="bg-raise border-secondary elevation-2 absolute top-full z-(--z-popover) mt-2 rounded-lg rounded-md border"
       >
         <DismissButton onDismiss={state.close} />
         {children}
diff --git a/app/ui/lib/PropertiesTable.tsx b/app/ui/lib/PropertiesTable.tsx
index 8101ea8b30..54eebde213 100644
--- a/app/ui/lib/PropertiesTable.tsx
+++ b/app/ui/lib/PropertiesTable.tsx
@@ -39,11 +39,11 @@ export function PropertiesTable({
     <div
       className={cn(
         className,
-        'properties-table min-w-min basis-6/12 rounded-lg border border-default',
-        'children:border-t children:pl-3 children:pr-6 children:border-secondary [&>*:nth-child(-n+2)]:!border-t-0',
+        'properties-table border-default min-w-min basis-6/12 rounded-lg border',
+        '*:border-secondary *:border-t *:pr-6 *:pl-3 [&>*:nth-child(-n+2)]:border-t-0!',
         'grid grid-cols-[minmax(min-content,1fr)_3fr]',
         {
-          'lg+:grid-cols-[minmax(min-content,1fr)_3fr_minmax(min-content,1fr)_3fr] lg+:[&>*:nth-child(-n+4)]:!border-t-0 lg+:[&>*:nth-child(4n-2)]:border-r':
+          '1000:grid-cols-[minmax(min-content,1fr)_3fr_minmax(min-content,1fr)_3fr] 1000:[&>*:nth-child(-n+4)]:!border-t-0 1000:[&>*:nth-child(4n-2)]:border-r':
             columns === 2,
         }
       )}
@@ -59,10 +59,10 @@ interface PropertiesTableRowProps {
 }
 PropertiesTable.Row = ({ label, children }: PropertiesTableRowProps) => (
   <>
-    <span className="flex items-center whitespace-nowrap text-mono-sm text-secondary">
+    <span className="text-mono-sm text-secondary flex items-center whitespace-nowrap">
       {label}
     </span>
-    <div className="flex h-[38px] items-center overflow-hidden whitespace-nowrap pr-4 text-sans-md text-default">
+    <div className="text-sans-md text-default flex h-[38px] items-center overflow-hidden pr-4 whitespace-nowrap">
       {children}
     </div>
   </>
diff --git a/app/ui/lib/Radio.tsx b/app/ui/lib/Radio.tsx
index c23caea8c7..015a455798 100644
--- a/app/ui/lib/Radio.tsx
+++ b/app/ui/lib/Radio.tsx
@@ -31,10 +31,10 @@ export const Radio = ({ children, className, ...inputProps }: RadioProps) => (
     <span className="relative h-4 w-4">
       <input className={cn(fieldStyles, className)} type="radio" {...inputProps} />
       {/* the dot in the middle. hide by default, use peer-checked to show if checked */}
-      <div className="pointer-events-none absolute left-1 top-1 hidden h-2 w-2 rounded-full bg-accent peer-checked:block" />
+      <div className="bg-accent pointer-events-none absolute top-1 left-1 hidden h-2 w-2 rounded-full peer-checked:block" />
     </span>
 
-    {children && <span className="ml-2.5 text-sans-md text-default">{children}</span>}
+    {children && <span className="text-sans-md text-default ml-2.5">{children}</span>}
   </label>
 )
 
@@ -42,11 +42,11 @@ const cardLabelStyles = `
   py-2 px-4 text-sans-md border rounded border-default bg-default hover:border-hover
   peer-focus:ring-2 peer-focus:ring-accent-secondary w-44 text-raise
 
-  children:py-3 children:px-3 children:-mx-4 children:border-secondary
-  first:children:-mt-2 last:children:-mb-2 cursor-pointer
+  *:py-3 *:px-3 *:-mx-4 *:border-secondary
+  first:*:-mt-2 last:*:-mb-2 cursor-pointer
 
   peer-checked:bg-accent-secondary
-  peer-checked:border-accent-secondary peer-checked:hover:border-accent peer-checked:children:border-accent peer-checked:children:border-accent-secondary
+  peer-checked:border-accent-secondary peer-checked:hover:border-accent peer-checked:*:border-accent peer-checked:*:border-accent-secondary
   peer-checked:text-accent peer-checked:[&>*_.text-default]:text-accent-secondary
 
   peer-disabled:cursor-not-allowed
@@ -70,7 +70,7 @@ export function RadioCard({ children, className, ...inputProps }: RadioProps) {
 
 // TODO: Remove importants after tailwind variantOrder bug fixed
 RadioCard.Unit = ({ children, className, ...props }: ComponentProps<'span'>) => (
-  <span className={cn('!m-0 !p-0 text-default', className)} {...props}>
+  <span className={cn('text-default m-0! p-0!', className)} {...props}>
     {children}
   </span>
 )
diff --git a/app/ui/lib/SideModal.tsx b/app/ui/lib/SideModal.tsx
index f1848c8874..88f56664df 100644
--- a/app/ui/lib/SideModal.tsx
+++ b/app/ui/lib/SideModal.tsx
@@ -23,10 +23,10 @@ export function usePopoverZIndex() {
   const isInModal = useIsInModal()
   const isInSideModal = useIsInSideModal()
   return isInModal
-    ? 'z-modalDropdown'
+    ? 'z-(--z-modal-dropdown)'
     : isInSideModal
-      ? 'z-sideModalDropdown'
-      : 'z-contentDropdown'
+      ? 'z-(--z-side-modal)'
+      : 'z-(--z-content-dropdown)'
 }
 
 export type SideModalProps = {
@@ -69,10 +69,10 @@ export function SideModal({
               initial={{ x: animate ? 40 : 0 }}
               animate={{ x: 0 }}
               transition={{ type: 'spring', duration: 0.4, bounce: 0 }}
-              className="DialogContent ox-side-modal pointer-events-auto fixed bottom-0 right-0 top-0 z-sideModal m-0 flex w-[32rem] flex-col justify-between border-l p-0 bg-raise border-secondary elevation-2"
+              className="DialogContent ox-side-modal bg-raise border-secondary elevation-2 pointer-events-auto fixed top-0 right-0 bottom-0 z-(--z-side-modal) m-0 flex w-128 flex-col justify-between border-l p-0"
             >
-              <div className="items-top mb-4 mt-8">
-                <Dialog.Title className="flex w-full items-center justify-between break-words pr-8 text-sans-2xl text-raise">
+              <div className="items-top mt-8 mb-4">
+                <Dialog.Title className="text-sans-2xl text-raise flex w-full items-center justify-between pr-8 break-words">
                   {title}
                 </Dialog.Title>
                 {subtitle}
@@ -103,7 +103,7 @@ export function SideModal({
 
               {/* Close button is here at the end so we aren't automatically focusing on it when the side modal is opened. Positioned in the safe area at the top */}
               <Dialog.Close
-                className="absolute right-[var(--content-gutter)] top-10 -m-2 flex rounded p-2 hover:bg-hover"
+                className="hover:bg-hover absolute top-10 right-(--content-gutter) -m-2 flex rounded p-2"
                 aria-label="Close"
               >
                 <Close12Icon className="text-default" />
@@ -128,8 +128,8 @@ function SideModalBody({ children }: { children?: ReactNode }) {
     <div
       ref={overflowRef}
       className={cn(
-        'body relative h-full overflow-y-auto pb-12 pt-8',
-        !scrollStart && 'border-t border-t-secondary'
+        'body relative h-full overflow-y-auto pt-8 pb-12',
+        !scrollStart && 'border-t-secondary border-t'
       )}
       data-testid="sidemodal-scroll-container"
     >
@@ -145,9 +145,9 @@ SideModal.Heading = classed.div`text-sans-semi-xl text-raise`
 SideModal.Section = classed.div`p-8 space-y-6 border-secondary`
 
 SideModal.Footer = ({ children, error }: { children: ReactNode; error?: boolean }) => (
-  <footer className="flex w-full items-center justify-end gap-[0.625rem] border-t py-5 border-secondary children:shrink-0">
+  <footer className="border-secondary flex w-full items-center justify-end gap-2.5 border-t py-5 *:shrink-0">
     {error && (
-      <div className="flex grow items-center gap-1.5 text-sans-md text-error">
+      <div className="text-sans-md text-error flex grow items-center gap-1.5">
         <Error12Icon className="shrink-0" />
         <span>Error</span>
       </div>
diff --git a/app/ui/lib/Table.tsx b/app/ui/lib/Table.tsx
index b48d13771d..6744f077da 100644
--- a/app/ui/lib/Table.tsx
+++ b/app/ui/lib/Table.tsx
@@ -28,7 +28,7 @@ export function Table({ className, ...props }: TableProps) {
       autoHide={false}
     >
       <table
-        className={cn(className, 'ox-table w-full border-separate text-sans-md')}
+        className={cn(className, 'ox-table text-sans-md w-full border-separate')}
         {...props}
       />
     </SimpleBar>
@@ -40,7 +40,7 @@ Table.HeaderRow = (props: TableHeaderRowProps) => <Table.Row {...props} />
 
 export type TableHeaderProps = JSX.IntrinsicElements['thead']
 Table.Header = ({ children, className }: TableHeaderProps) => (
-  <thead className={cn('text-left text-mono-sm text-secondary', className)}>
+  <thead className={cn('text-mono-sm text-secondary text-left', className)}>
     {children}
   </thead>
 )
@@ -50,11 +50,11 @@ Table.HeadCell = ({ className, children, ...props }: TableHeadCellProps) => (
   <th
     className={cn(
       className,
-      'border border-x-0 pl-0 text-left text-mono-sm bg-secondary border-default children:first:border-0'
+      'text-mono-sm bg-secondary border-default border border-x-0 pl-0 text-left *:first:border-0'
     )}
     {...props}
   >
-    <div className="-my-[1px] flex h-9 items-center border-l px-3 border-secondary">
+    <div className="border-secondary -my-px flex h-9 items-center border-l px-3">
       {children}
     </div>
   </th>
@@ -98,13 +98,13 @@ Table.Cell = ({ height = 'small', className, children, ...props }: TableCellProp
   <td
     className={cn(
       className,
-      'pl-0 text-raise border-default children:first:border-l-0 children:last:-mr-[1px]'
+      'text-raise border-default pl-0 *:first:border-l-0 *:last:-mr-px'
     )}
     {...props}
   >
     <div
       className={cn(
-        'relative -my-[1px] -mr-[2px] flex items-center border-b border-l px-3 py-2 border-secondary',
+        'border-secondary relative -my-px -mr-[2px] flex items-center border-b border-l px-3 py-2',
         { 'h-11': height === 'small', 'h-14': height === 'large' }
       )}
     >
@@ -127,7 +127,7 @@ type TableEmptyBoxProps = {
 export const TableEmptyBox = ({ children, border = true }: TableEmptyBoxProps) => (
   <div
     className={cn('flex h-full max-h-[480px] items-center justify-center rounded-lg px-4', {
-      'border py-4 border-secondary': border,
+      'border-secondary border py-4': border,
     })}
   >
     {children}
diff --git a/app/ui/lib/TextInput.tsx b/app/ui/lib/TextInput.tsx
index d602f7ffde..5fa512a542 100644
--- a/app/ui/lib/TextInput.tsx
+++ b/app/ui/lib/TextInput.tsx
@@ -69,7 +69,7 @@ export function TextInput({
         error
           ? 'border-error-secondary hover:border-error'
           : 'border-default hover:border-hover',
-        disabled && '!border-default',
+        disabled && 'border-default!',
         className
       )}
     >
@@ -79,7 +79,7 @@ export function TextInput({
         type={type}
         value={value}
         className={cn(
-          `w-full rounded border-none px-3 py-[0.6875rem] !outline-offset-1 text-sans-md text-raise bg-default placeholder:text-tertiary focus:outline-none disabled:cursor-not-allowed disabled:text-secondary disabled:bg-disabled`,
+          `w-full rounded border-none px-3 py-2.75 outline-offset-1! text-sans-md text-raise bg-default placeholder:text-tertiary focus:outline-none disabled:cursor-not-allowed disabled:text-secondary disabled:bg-disabled`,
           error && 'focus-error',
           fieldClassName,
           disabled && 'text-disabled bg-disabled',
@@ -93,7 +93,7 @@ export function TextInput({
       {copyable && (
         <CopyToClipboard
           text={value || ''}
-          className="!h-10 rounded-none border-l border-solid px-4 bg-disabled border-default"
+          className="h-10! rounded-none border-l border-solid px-4 bg-disabled border-default"
         />
       )}
     </div>
diff --git a/app/ui/lib/Toast.tsx b/app/ui/lib/Toast.tsx
index 8c0a727cd8..ac5f73e0f4 100644
--- a/app/ui/lib/Toast.tsx
+++ b/app/ui/lib/Toast.tsx
@@ -55,9 +55,9 @@ const color: Record<Variant, string> = {
 }
 
 const textColor: Record<Variant, string> = {
-  success: 'text-accent children:text-accent',
-  error: 'text-error children:text-error',
-  info: 'text-notice children:text-notice',
+  success: 'text-accent *:text-accent',
+  error: 'text-error *:text-error',
+  info: 'text-notice *:text-notice',
 }
 
 const secondaryTextColor: Record<Variant, string> = {
@@ -84,7 +84,7 @@ export const Toast = ({
   return (
     <div
       className={cn(
-        'relative flex w-96 items-start overflow-hidden rounded-lg p-4 elevation-2',
+        'elevation-2 relative flex w-96 items-start overflow-hidden rounded-lg p-4',
         color[variant],
         textColor[variant]
       )}
@@ -101,19 +101,19 @@ export const Toast = ({
 
         {cta && (
           <Link
-            className="mt-3 block text-mono-sm text-accent-secondary hover:text-accent"
+            className="text-mono-sm text-accent-secondary hover:text-accent mt-3 block"
             to={cta.link}
           >
             <Truncate text={cta.text} maxLength={36} />
           </Link>
         )}
       </div>
-      <div className="mr-[2px] mt-[3px] flex items-center self-baseline">
+      <div className="mt-[3px] mr-[2px] flex items-center self-baseline">
         <button
           type="button"
           aria-label="Dismiss notification"
           className={cn(
-            '-m-2 flex items-center rounded !border-transparent p-2 hover:bg-accent-secondary-hover',
+            'hover:bg-accent-secondary-hover -m-2 flex items-center rounded border-transparent! p-2',
             textColor[variant]
           )}
           onClick={onClose}
diff --git a/app/ui/styles/components/Tabs.css b/app/ui/styles/components/Tabs.css
index cf077ce06d..0af27eb3d2 100644
--- a/app/ui/styles/components/Tabs.css
+++ b/app/ui/styles/components/Tabs.css
@@ -18,12 +18,12 @@
 
 /* Panel styles */
 .ox-tabs-panel:focus-visible {
-  @apply outline outline-2 outline-offset-[1rem] outline-accent-secondary;
+  @apply outline-solid outline-2 outline-offset-[1rem] outline-accent-secondary;
 }
 
 /* Base tab styles */
 .ox-tab {
-  @apply h-10 space-x-2 whitespace-nowrap border-b px-1.5 pb-1 pt-2 uppercase !no-underline text-mono-sm text-secondary border-secondary;
+  @apply h-10 space-x-2 whitespace-nowrap border-b px-1.5 pb-1 pt-2 uppercase no-underline! text-mono-sm text-secondary border-secondary;
 }
 
 .ox-tabs-list .ox-tab > * {
@@ -59,11 +59,11 @@
 
 /* Full width variants */
 .ox-tabs.full-width {
-  @apply !mx-0 !w-full;
+  @apply mx-0! w-full!;
 }
 
 .ox-tabs.full-width > .ox-tabs-panel {
-  @apply mx-[var(--content-gutter)];
+  @apply mx-(--content-gutter);
 }
 
 .ox-tabs.full-width .ox-tabs-list:before {
@@ -77,7 +77,7 @@
 }
 
 .ox-side-tabs-list .ox-tab {
-  @apply h-auto whitespace-nowrap rounded p-2 py-1.5 normal-case !no-underline text-sans-md text-secondary;
+  @apply h-auto whitespace-nowrap rounded p-2 py-1.5 normal-case no-underline! text-sans-md text-secondary;
   border-bottom: none;
 }
 
diff --git a/app/ui/styles/components/form.css b/app/ui/styles/components/form.css
index 98d74b7798..c89523c3e8 100644
--- a/app/ui/styles/components/form.css
+++ b/app/ui/styles/components/form.css
@@ -23,5 +23,5 @@
 }
 
 .ox-form .ox-divider {
-  @apply !my-10; /* important overrides space-y-* on .ox-form */
+  @apply my-10!; /* important overrides space-y-* on .ox-form */
 }
diff --git a/app/ui/styles/components/menu-button.css b/app/ui/styles/components/menu-button.css
index 8d1d35a061..7689a408ac 100644
--- a/app/ui/styles/components/menu-button.css
+++ b/app/ui/styles/components/menu-button.css
@@ -8,17 +8,17 @@
 
 .dropdown-menu-content {
   /* we want menu popover to be on top of top bar and pagination bar too */
-  @apply z-topBarDropdown min-w-36 rounded border p-0 bg-raise border-secondary;
+  @apply bg-raise border-secondary z-(--z-top-bar-dropdown) min-w-36 rounded border p-0;
 
   & .DropdownMenuItem {
-    @apply flex w-full cursor-pointer select-none items-center border-b py-2 pl-3 pr-6 text-left text-sans-md text-default border-secondary last:border-b-0;
+    @apply text-sans-md text-default border-secondary flex w-full cursor-pointer items-center border-b py-2 pr-6 pl-3 text-left select-none last:border-b-0;
 
     &.destructive {
       @apply text-destructive;
     }
 
     &[data-disabled] {
-      @apply cursor-not-allowed text-disabled;
+      @apply text-disabled cursor-not-allowed;
     }
 
     &.destructive[data-disabled] {
diff --git a/app/ui/styles/components/menu-list.css b/app/ui/styles/components/menu-list.css
index 8f678db7d3..f7c8c0a59c 100644
--- a/app/ui/styles/components/menu-list.css
+++ b/app/ui/styles/components/menu-list.css
@@ -7,7 +7,7 @@
  */
 
 .ox-menu {
-  @apply !max-h-[17.5rem] overflow-y-auto rounded border bg-raise border-secondary elevation-2;
+  @apply max-h-70! overflow-y-auto rounded border bg-raise border-secondary elevation-2;
 }
 
 .ox-menu-item {
diff --git a/app/ui/styles/components/mini-table.css b/app/ui/styles/components/mini-table.css
index 27f2098bbf..fc5cb18e91 100644
--- a/app/ui/styles/components/mini-table.css
+++ b/app/ui/styles/components/mini-table.css
@@ -20,7 +20,7 @@
   }
 
   & td + td:before {
-    @apply absolute bottom-[2px] top-[calc(0.5rem+1px)] block w-[1px] border-l opacity-40 border-accent-tertiary;
+    @apply absolute bottom-[2px] top-[calc(0.5rem+1px)] block w-px border-l opacity-40 border-accent-tertiary;
     content: ' ';
   }
 
diff --git a/app/ui/styles/components/spinner.css b/app/ui/styles/components/spinner.css
index 495e45363e..d5771436d1 100644
--- a/app/ui/styles/components/spinner.css
+++ b/app/ui/styles/components/spinner.css
@@ -92,7 +92,7 @@
 }
 
 .metrics-loading-indicator span {
-  @apply block h-1 w-[3px] rounded-[1px] bg-[--theme-accent-500];
+  @apply block h-1 w-[3px] rounded-[1px] bg-(--theme-accent-500);
   animation: stretch 1.8s infinite both;
 }
 
diff --git a/app/ui/styles/components/table.css b/app/ui/styles/components/table.css
index 3061c67d78..1e588c03cc 100644
--- a/app/ui/styles/components/table.css
+++ b/app/ui/styles/components/table.css
@@ -103,7 +103,7 @@ table.ox-table {
   }
 
   & tr:last-of-type td:first-of-type {
-    @apply !border-b-0 !border-l-0;
+    @apply border-b-0! border-l-0!;
   }
 
   & tr:last-of-type td:first-of-type:after {
@@ -112,7 +112,7 @@ table.ox-table {
   }
 
   & th:first-of-type {
-    @apply border-l-0 border-t-0 !bg-default;
+    @apply border-l-0 border-t-0 bg-default!;
   }
 
   & th:first-of-type > div {
@@ -126,7 +126,7 @@ table.ox-table {
   }
 
   & th:last-of-type.action-col {
-    @apply !border-r-0 !border-t-0 !bg-default;
+    @apply border-r-0! border-t-0! bg-default!;
   }
 
   & th:last-of-type.action-col > div {
diff --git a/app/ui/styles/index.css b/app/ui/styles/index.css
index cbfba33207..25a06a014d 100644
--- a/app/ui/styles/index.css
+++ b/app/ui/styles/index.css
@@ -16,61 +16,114 @@
  * inlined into a single file by postcss-import.
  */
 
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@import 'tailwindcss';
 
 @import '@oxide/design-system/styles/main.css';
-@import 'simplebar-react/dist/simplebar.min.css';
-
-@import './fonts.css';
-@import './components/button.css';
-@import './components/menu-button.css';
-@import './components/menu-list.css';
-@import './components/loading-bar.css';
-@import './components/Tabs.css';
-@import './components/form.css';
-@import './components/login-page.css';
-@import './components/mini-table.css';
-@import './components/side-modal.css';
-@import './components/spinner.css';
-@import './components/table.css';
-@import './components/tooltip.css';
-
-@import './themes/selection.css';
-
-@import '@xterm/xterm/css/xterm.css';
-
-:root {
-  --content-gutter: 2.5rem;
-  --top-bar-height: 54px;
-
-  /* Nicer easing from: https://twitter.com/bdc */
-  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
-  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
-  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
-  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
-  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
-  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
-
-  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
-  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
-  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
-  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
-  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
-
-  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
-  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
-  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
-  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
-  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
-  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+@import '@oxide/design-system/styles/tailwind.css';
+@import 'simplebar-react/dist/simplebar.min.css' layer(components);
+
+@import './fonts.css' layer(base);
+@import './vars.css' layer(base);
+@import './components/button.css' layer(components);
+@import './components/menu-button.css' layer(components);
+@import './components/menu-list.css' layer(components);
+@import './components/loading-bar.css' layer(components);
+@import './components/Tabs.css' layer(components);
+@import './components/form.css' layer(components);
+@import './components/login-page.css' layer(components);
+@import './components/mini-table.css' layer(components);
+@import './components/side-modal.css' layer(components);
+@import './components/spinner.css' layer(components);
+@import './components/table.css' layer(components);
+@import './components/tooltip.css' layer(components);
+@import './themes/selection.css' layer(components);
+
+@import '@xterm/xterm/css/xterm.css' layer(components);
+
+@source '../../node_modules/@oxide/design-system/dist/components';
+
+@theme {
+  --animate-spin-slow: spin 5s linear infinite;
+  --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  /* used by PageSkeleton */
+  --animate-pulse2: pulse2 1.3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+
+  @keyframes pulse2 {
+    0%,
+    100% {
+      opacity: 0.75;
+    }
+    50%: {
+      opacity: 1;
+    }
+  }
+}
+
+@custom-variant selected {
+  .is-selected & {
+    @slot;
+  }
+}
+
+@custom-variant disabled {
+  &.visually-disabled,
+  &:disabled {
+    @slot;
+  }
+}
+
+@utility external-link {
+  @apply text-accent-secondary hover:text-accent;
+}
+
+@utility gutter {
+  width: calc(100% - var(--content-gutter) * 2);
+  margin-left: var(--content-gutter);
+  margin-right: var(--content-gutter);
+}
+
+@utility link-with-underline {
+  @apply text-raise;
+  text-decoration: underline;
+  text-decoration-color: var(--content-quaternary);
+
+  &:hover {
+    text-decoration-color: var(--content-tertiary);
+  }
+}
+
+@layer utilities {
+  :root {
+    --content-gutter: 2.5rem;
+    --top-bar-height: 54px;
+
+    /* Nicer easing from: https://twitter.com/bdc */
+    --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
+    --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+    --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
+    --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
+    --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
+
+    --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
+    --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
+    --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
+    --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
+
+    --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+    --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
+    --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
+    --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
+    --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
+    --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+  }
 }
 
 @layer base {
   body {
-    @apply overflow-y-hidden text-default bg-default;
+    @apply text-default bg-default overflow-y-hidden;
     font-family:
       SuisseIntl,
       -apple-system,
@@ -91,107 +144,85 @@
     display: inline;
     vertical-align: baseline;
   }
-}
 
-@layer utilities {
-  .external-link {
-    @apply text-accent-secondary hover:text-accent;
+  /**
+ * Remove focus ring for non-explicit scenarios.
+ */
+  a:focus-visible,
+  button:focus-visible,
+  .ox-tabs-panel:focus-visible,
+  [role='listbox']:focus-visible,
+  [role='option']:focus-visible,
+  [role='button']:focus-visible,
+  input[type='text']:focus-visible,
+  input[type='textarea']:focus-visible,
+  textarea[type='text']:focus-visible,
+  input[type='file']:focus-visible,
+  input[type='radio']:focus-visible,
+  input[type='checkbox']:focus-visible,
+  input[type='number']:focus-visible {
+    @apply outline-accent-secondary outline-2 outline-offset-0 outline-solid;
+
+    &.focus-error {
+      @apply outline-error-secondary;
+    }
   }
 
-  .gutter {
-    width: calc(100% - var(--content-gutter) * 2);
-    margin-left: var(--content-gutter);
-    margin-right: var(--content-gutter);
+  a,
+  button,
+  .ox-tabs-panel,
+  [role='listbox'],
+  [role='option'],
+  [role='button'],
+  input[type='text'],
+  input[type='textarea'],
+  textarea[type='text'],
+  input[type='file'],
+  input[type='radio'],
+  input[type='checkbox'],
+  input[type='number'] {
+    @apply transition-[outline-width] duration-100 ease-out;
   }
 
-  .link-with-underline {
-    @apply text-raise;
-    text-decoration: underline;
-    text-decoration-color: var(--content-quaternary);
-
-    &:hover {
-      text-decoration-color: var(--content-tertiary);
+  a:focus,
+  button:focus,
+  .ox-tabs-panel:focus,
+  [role='listbox']:focus,
+  [role='option']:focus,
+  [role='button']:focus,
+  input[type='text']:focus,
+  input[type='textarea']:focus,
+  textarea[type='text']:focus,
+  input[type='file']:focus,
+  input[type='radio']:focus,
+  input[type='checkbox']:focus,
+  input[type='number']:focus {
+    @apply outline-accent-secondary outline-2 outline-offset-0 outline-solid;
+
+    &.focus-error {
+      @apply outline-error-secondary;
     }
   }
-}
 
-/**
- * Remove focus ring for non-explicit scenarios.
- */
-a:focus-visible,
-button:focus-visible,
-.ox-tabs-panel:focus-visible,
-[role='listbox']:focus-visible,
-[role='option']:focus-visible,
-[role='button']:focus-visible,
-input[type='text']:focus-visible,
-input[type='textarea']:focus-visible,
-textarea[type='text']:focus-visible,
-input[type='file']:focus-visible,
-input[type='radio']:focus-visible,
-input[type='checkbox']:focus-visible,
-input[type='number']:focus-visible {
-  @apply outline outline-2 outline-offset-0 outline-accent-secondary;
-
-  &.focus-error {
-    @apply outline-error-secondary;
+  a:focus:not(:focus-visible),
+  button:focus:not(:focus-visible),
+  .ox-tabs-panel:focus:not(:focus-visible),
+  [role='listbox']:focus:not(:focus-visible),
+  [role='option']:focus:not(:focus-visible),
+  [role='button']:focus:not(:focus-visible),
+  input[type='text']:focus:not(:focus-visible),
+  input[type='textarea']:focus:not(:focus-visible),
+  textarea[type='text']:focus:not(:focus-visible),
+  input[type='radio']:focus:not(:focus-visible),
+  input[type='checkbox']:focus:not(:focus-visible) {
+    @apply outline-transparent;
   }
-}
 
-a,
-button,
-.ox-tabs-panel,
-[role='listbox'],
-[role='option'],
-[role='button'],
-input[type='text'],
-input[type='textarea'],
-textarea[type='text'],
-input[type='file'],
-input[type='radio'],
-input[type='checkbox'],
-input[type='number'] {
-  @apply transition-[outline-width] duration-100 ease-out;
-}
-
-a:focus,
-button:focus,
-.ox-tabs-panel:focus,
-[role='listbox']:focus,
-[role='option']:focus,
-[role='button']:focus,
-input[type='text']:focus,
-input[type='textarea']:focus,
-textarea[type='text']:focus,
-input[type='file']:focus,
-input[type='radio']:focus,
-input[type='checkbox']:focus,
-input[type='number']:focus {
-  @apply outline outline-2 outline-offset-0 outline-accent-secondary;
-
-  &.focus-error {
-    @apply outline-error-secondary;
+  h1,
+  h2,
+  h3,
+  h4,
+  h5 {
+    @apply text-raise;
   }
 }
-
-a:focus:not(:focus-visible),
-button:focus:not(:focus-visible),
-.ox-tabs-panel:focus:not(:focus-visible),
-[role='listbox']:focus:not(:focus-visible),
-[role='option']:focus:not(:focus-visible),
-[role='button']:focus:not(:focus-visible),
-input[type='text']:focus:not(:focus-visible),
-input[type='textarea']:focus:not(:focus-visible),
-textarea[type='text']:focus:not(:focus-visible),
-input[type='radio']:focus:not(:focus-visible),
-input[type='checkbox']:focus:not(:focus-visible) {
-  @apply outline-transparent;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5 {
-  @apply text-raise;
-}
diff --git a/app/ui/styles/vars.css b/app/ui/styles/vars.css
new file mode 100644
index 0000000000..3da2340bde
--- /dev/null
+++ b/app/ui/styles/vars.css
@@ -0,0 +1,13 @@
+:root {
+  --z-toast: 50;
+  --z-modal-dropdown: 50;
+  --z-modal: 40;
+  --z-side-modal-dropdown: 40;
+  --z-side-modal: 30;
+  --z-modal-overlay: 25;
+  --z-top-bar-dropdown: 20;
+  --z-top-bar: 15;
+  --z-popover: 10;
+  --z-content-dropdown: 10;
+  --z-content: 0;
+}
diff --git a/package-lock.json b/package-lock.json
index 21223b24d4..8906ab0bab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,12 +12,13 @@
       "dependencies": {
         "@floating-ui/react": "^0.26.23",
         "@headlessui/react": "^2.2.0",
-        "@oxide/design-system": "^2.5.1",
+        "@oxide/design-system": "^2.5.2--canary.374c845.0",
         "@radix-ui/react-accordion": "^1.2.0",
         "@radix-ui/react-dialog": "^1.1.6",
         "@radix-ui/react-tabs": "^1.1.0",
         "@react-aria/live-announcer": "^3.3.4",
         "@tailwindcss/container-queries": "^0.1.1",
+        "@tailwindcss/vite": "^4.1.7",
         "@tanstack/react-query": "^5.56.2",
         "@tanstack/react-query-devtools": "^5.56.2",
         "@tanstack/react-table": "^8.20.5",
@@ -95,10 +96,10 @@
         "postcss-nesting": "^13.0.1",
         "postcss-pseudo-classes": "^0.4.0",
         "prettier": "^3.4.2",
-        "prettier-plugin-tailwindcss": "^0.6.9",
+        "prettier-plugin-tailwindcss": "^0.6.11",
         "resize-observer-polyfill": "^1.5.1",
         "semver": "^7.6.3",
-        "tailwindcss": "^3.4.17",
+        "tailwindcss": "^4.1.7",
         "tsx": "^4.19.2",
         "type-fest": "^4.33.0",
         "typescript": "~5.8.3",
@@ -118,16 +119,17 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@alloc/quick-lru": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
-      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
+    "node_modules/@ampproject/remapping": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
+      "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+      "engines": {
+        "node": ">=6.0.0"
       }
     },
     "node_modules/@apidevtools/json-schema-ref-parser": {
@@ -383,7 +385,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -400,7 +401,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -417,7 +417,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -434,7 +433,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -451,7 +449,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -468,7 +465,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -485,7 +481,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -502,7 +497,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -519,7 +513,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -536,7 +529,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -553,7 +545,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -570,7 +561,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -587,7 +577,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -604,7 +593,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -621,7 +609,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -638,7 +625,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -655,7 +641,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -672,7 +657,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -689,7 +673,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -706,7 +689,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -723,7 +705,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -740,7 +721,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -757,7 +737,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -774,7 +753,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -791,7 +769,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1332,48 +1309,16 @@
         "@swc/helpers": "^0.5.0"
       }
     },
-    "node_modules/@isaacs/cliui": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
-      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+    "node_modules/@isaacs/fs-minipass": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/@isaacs/fs-minipass/-/fs-minipass-4.0.1.tgz",
+      "integrity": "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w==",
       "license": "ISC",
       "dependencies": {
-        "string-width": "^5.1.2",
-        "string-width-cjs": "npm:string-width@^4.2.0",
-        "strip-ansi": "^7.0.1",
-        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
-        "wrap-ansi": "^8.1.0",
-        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
-      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
+        "minipass": "^7.0.4"
       },
       "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+        "node": ">=18.0.0"
       }
     },
     "node_modules/@jridgewell/gen-mapping": {
@@ -1412,7 +1357,7 @@
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
       "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
@@ -1481,6 +1426,7 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
@@ -1494,6 +1440,7 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 8"
@@ -1503,6 +1450,7 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
@@ -1538,9 +1486,9 @@
       "license": "MIT"
     },
     "node_modules/@oxide/design-system": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/@oxide/design-system/-/design-system-2.5.1.tgz",
-      "integrity": "sha512-QbuRsvqs5z4K4bkRRmYpWTb5Bo4BnDfJwsphqbWC/rIimcc5gMal3/8sBS8fk4Uq2tOJObKzMR05OQCUxyonbg==",
+      "version": "2.5.2--canary.374c845.0",
+      "resolved": "https://registry.npmjs.org/@oxide/design-system/-/design-system-2.5.2--canary.374c845.0.tgz",
+      "integrity": "sha512-TyrUvq4Kv3ZPwNH4gV+EBsjVSZIS7I+I68rlW2rZNpqC3Rvd2f1I92M3do6v6FRIs8oc/45XcmON98aQgfDwKA==",
       "license": "MPL 2.0",
       "dependencies": {
         "@floating-ui/react": "^0.27.4",
@@ -1548,6 +1496,7 @@
         "@radix-ui/react-accordion": "^1.2.2",
         "@radix-ui/react-tabs": "^1.1.3",
         "classnames": "^2.5.1",
+        "culori": "^4.0.1",
         "shiki": "^1.24.0"
       },
       "peerDependencies": {
@@ -1734,16 +1683,6 @@
         "win32"
       ]
     },
-    "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==",
-      "license": "MIT",
-      "optional": true,
-      "engines": {
-        "node": ">=14"
-      }
-    },
     "node_modules/@pkgr/core": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz",
@@ -3748,7 +3687,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3762,7 +3700,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3776,7 +3713,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3790,7 +3726,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3804,7 +3739,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3818,7 +3752,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3832,7 +3765,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3846,7 +3778,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3860,7 +3791,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3874,7 +3804,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3888,7 +3817,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3902,7 +3830,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3916,7 +3843,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3930,7 +3856,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3944,7 +3869,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3958,7 +3882,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3972,7 +3895,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3986,7 +3908,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4000,7 +3921,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4014,7 +3934,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -4323,6 +4242,268 @@
         "tailwindcss": ">=3.2.0"
       }
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.7.tgz",
+      "integrity": "sha512-9rsOpdY9idRI2NH6CL4wORFY0+Q6fnx9XP9Ju+iq/0wJwGD5IByIgFmwVbyy4ymuyprj8Qh4ErxMKTUL4uNh3g==",
+      "license": "MIT",
+      "dependencies": {
+        "@ampproject/remapping": "^2.3.0",
+        "enhanced-resolve": "^5.18.1",
+        "jiti": "^2.4.2",
+        "lightningcss": "1.30.1",
+        "magic-string": "^0.30.17",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.1.7"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.7.tgz",
+      "integrity": "sha512-5SF95Ctm9DFiUyjUPnDGkoKItPX/k+xifcQhcqX5RA85m50jw1pT/KzjdvlqxRja45Y52nR4MR9fD1JYd7f8NQ==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "detect-libc": "^2.0.4",
+        "tar": "^7.4.3"
+      },
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.7",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.7",
+        "@tailwindcss/oxide-darwin-x64": "4.1.7",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.7",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.7",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.7",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.7",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.7",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.7",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.7",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.7",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.7"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.7.tgz",
+      "integrity": "sha512-IWA410JZ8fF7kACus6BrUwY2Z1t1hm0+ZWNEzykKmMNM09wQooOcN/VXr0p/WJdtHZ90PvJf2AIBS/Ceqx1emg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.7.tgz",
+      "integrity": "sha512-81jUw9To7fimGGkuJ2W5h3/oGonTOZKZ8C2ghm/TTxbwvfSiFSDPd6/A/KE2N7Jp4mv3Ps9OFqg2fEKgZFfsvg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.7.tgz",
+      "integrity": "sha512-q77rWjEyGHV4PdDBtrzO0tgBBPlQWKY7wZK0cUok/HaGgbNKecegNxCGikuPJn5wFAlIywC3v+WMBt0PEBtwGw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.7.tgz",
+      "integrity": "sha512-RfmdbbK6G6ptgF4qqbzoxmH+PKfP4KSVs7SRlTwcbRgBwezJkAO3Qta/7gDy10Q2DcUVkKxFLXUQO6J3CRvBGw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.7.tgz",
+      "integrity": "sha512-OZqsGvpwOa13lVd1z6JVwQXadEobmesxQ4AxhrwRiPuE04quvZHWn/LnihMg7/XkN+dTioXp/VMu/p6A5eZP3g==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.7.tgz",
+      "integrity": "sha512-voMvBTnJSfKecJxGkoeAyW/2XRToLZ227LxswLAwKY7YslG/Xkw9/tJNH+3IVh5bdYzYE7DfiaPbRkSHFxY1xA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.7.tgz",
+      "integrity": "sha512-PjGuNNmJeKHnP58M7XyjJyla8LPo+RmwHQpBI+W/OxqrwojyuCQ+GUtygu7jUqTEexejZHr/z3nBc/gTiXBj4A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.7.tgz",
+      "integrity": "sha512-HMs+Va+ZR3gC3mLZE00gXxtBo3JoSQxtu9lobbZd+DmfkIxR54NO7Z+UQNPsa0P/ITn1TevtFxXTpsRU7qEvWg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.7.tgz",
+      "integrity": "sha512-MHZ6jyNlutdHH8rd+YTdr3QbXrHXqwIhHw9e7yXEBcQdluGwhpQY2Eku8UZK6ReLaWtQ4gijIv5QoM5eE+qlsA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.7.tgz",
+      "integrity": "sha512-ANaSKt74ZRzE2TvJmUcbFQ8zS201cIPxUDm5qez5rLEwWkie2SkGtA4P+GPTj+u8N6JbPrC8MtY8RmJA35Oo+A==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.4.3",
+        "@emnapi/runtime": "^1.4.3",
+        "@emnapi/wasi-threads": "^1.0.2",
+        "@napi-rs/wasm-runtime": "^0.2.9",
+        "@tybys/wasm-util": "^0.9.0",
+        "tslib": "^2.8.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.7.tgz",
+      "integrity": "sha512-HUiSiXQ9gLJBAPCMVRk2RT1ZrBjto7WvqsPBwUrNK2BcdSxMnk19h4pjZjI7zgPhDxlAbJSumTC4ljeA9y0tEw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.7.tgz",
+      "integrity": "sha512-rYHGmvoHiLJ8hWucSfSOEmdCBIGZIq7SpkPRSqLsH2Ab2YUNgKeAPT1Fi2cx3+hnYOrAb0jp9cRyode3bBW4mQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.7.tgz",
+      "integrity": "sha512-tYa2fO3zDe41I7WqijyVbRd8oWT0aEID1Eokz5hMT6wShLIHj3yvwj9XbfuloHP9glZ6H+aG2AN/+ZrxJ1Y5RQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.1.7",
+        "@tailwindcss/oxide": "4.1.7",
+        "tailwindcss": "4.1.7"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6"
+      }
+    },
     "node_modules/@tanstack/query-core": {
       "version": "5.56.2",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.56.2.tgz",
@@ -4742,7 +4923,6 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
       "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/hast": {
@@ -4820,7 +5000,7 @@
       "version": "22.5.5",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.5.tgz",
       "integrity": "sha512-Xjs4y5UPO/CLdzpgR6GirZJx36yScjh73+2NlLlkFRSoQN8B0DpfXPdZGnvVmLRLOsqDpOfTNv7D9trgGhmOIA==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "peer": true,
       "dependencies": {
@@ -5289,7 +5469,7 @@
       "version": "8.12.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
       "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "bin": {
         "acorn": "bin/acorn"
@@ -5342,36 +5522,12 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
       }
     },
-    "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==",
-      "license": "MIT"
-    },
-    "node_modules/anymatch": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "license": "ISC",
-      "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/arg": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "license": "MIT"
-    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -5686,18 +5842,6 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "license": "MIT"
     },
-    "node_modules/binary-extensions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
-      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/body-parser": {
       "version": "1.20.3",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
@@ -5760,6 +5904,7 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fill-range": "^7.1.1"
@@ -5805,7 +5950,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
       "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/bytes": {
@@ -5906,15 +6051,6 @@
         "tslib": "^2.0.3"
       }
     },
-    "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==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001716",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001716.tgz",
@@ -6002,28 +6138,13 @@
         "node": ">= 16"
       }
     },
-    "node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "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"
-      },
+    "node_modules/chownr": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-3.0.0.tgz",
+      "integrity": "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g==",
+      "license": "BlueOak-1.0.0",
       "engines": {
-        "node": ">= 8.10.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
+        "node": ">=18"
       }
     },
     "node_modules/ci-info": {
@@ -6289,6 +6410,7 @@
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
       "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "path-key": "^3.1.0",
@@ -6405,6 +6527,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
       "license": "MIT",
       "bin": {
         "cssesc": "bin/cssesc"
@@ -6432,6 +6555,15 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/culori": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/culori/-/culori-4.0.1.tgz",
+      "integrity": "sha512-LSnjA6HuIUOlkfKVbzi2OlToZE8OjFi667JWN9qNymXVXzGDmvuP60SSgC+e92sd7B7158f7Fy3Mb6rXS5EDPw==",
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      }
+    },
     "node_modules/d3-array": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
@@ -6761,6 +6893,15 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
+      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/detect-node-es": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
@@ -6780,18 +6921,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==",
-      "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==",
-      "license": "MIT"
-    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -6929,12 +7058,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/eastasianwidth": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "license": "MIT"
-    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -6969,6 +7092,7 @@
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/emoji-regex-xs": {
@@ -6987,6 +7111,19 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/enhanced-resolve": {
+      "version": "5.18.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz",
+      "integrity": "sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==",
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -7181,7 +7318,6 @@
       "version": "0.25.2",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.2.tgz",
       "integrity": "sha512-16854zccKPnC+toMywC+uKNeYSv+/eXkevRAfwRD/G9Cleq66m8XFIrigkbvauLLlCfDL45Q2cWegSg53gGBnQ==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "bin": {
@@ -8088,6 +8224,7 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
       "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
@@ -8118,6 +8255,7 @@
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
       "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
         "reusify": "^1.0.4"
@@ -8172,6 +8310,7 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -8275,22 +8414,6 @@
         "is-callable": "^1.1.3"
       }
     },
-    "node_modules/foreground-child": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
-      "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
-      "license": "ISC",
-      "dependencies": {
-        "cross-spawn": "^7.0.0",
-        "signal-exit": "^4.0.1"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/form-data": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
@@ -8407,6 +8530,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
@@ -8523,7 +8647,7 @@
       "version": "4.8.1",
       "resolved": "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.8.1.tgz",
       "integrity": "sha512-k9PN+cFBmaLWtVz29SkUoqU5O0slLuHJXt/2P+tMVFT+phsSGXGkp9t3rQIqdz0e+06EHNGs3oM6ZX1s2zHxRg==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "resolve-pkg-maps": "^1.0.0"
@@ -8557,6 +8681,7 @@
       "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"
@@ -8629,7 +8754,6 @@
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/graphemer": {
@@ -8731,6 +8855,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "function-bind": "^1.1.2"
@@ -9177,18 +9302,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "license": "MIT",
-      "dependencies": {
-        "binary-extensions": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/is-boolean-object": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.1.tgz",
@@ -9229,6 +9342,7 @@
       "version": "2.15.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz",
       "integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "hasown": "^2.0.2"
@@ -9279,6 +9393,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -9323,6 +9438,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-extglob": "^2.1.1"
@@ -9367,6 +9483,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
@@ -9562,6 +9679,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true,
       "license": "ISC"
     },
     "node_modules/iterator.prototype": {
@@ -9582,21 +9700,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==",
-      "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/jake": {
       "version": "10.9.2",
       "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.2.tgz",
@@ -9717,12 +9820,12 @@
       }
     },
     "node_modules/jiti": {
-      "version": "1.21.6",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz",
-      "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==",
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
+      "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
       "license": "MIT",
       "bin": {
-        "jiti": "bin/jiti.js"
+        "jiti": "lib/jiti-cli.mjs"
       }
     },
     "node_modules/js-tokens": {
@@ -9944,111 +10047,321 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/lilconfig": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
-      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
-      "license": "MIT",
+    "node_modules/lightningcss": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
+      "integrity": "sha512-xi6IyHML+c9+Q3W0S4fCQJOym42pyurFiJUHEcEyHS0CeKzia4yZDEsLlqOFykxOdHpNy0NmvVO31vcSqAxJCg==",
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
       "engines": {
-        "node": ">=14"
+        "node": ">= 12.0.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/antonk52"
-      }
-    },
-    "node_modules/lines-and-columns": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "license": "MIT"
-    },
-    "node_modules/locate-path": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
-      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "p-locate": "^5.0.0"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       },
+      "optionalDependencies": {
+        "lightningcss-darwin-arm64": "1.30.1",
+        "lightningcss-darwin-x64": "1.30.1",
+        "lightningcss-freebsd-x64": "1.30.1",
+        "lightningcss-linux-arm-gnueabihf": "1.30.1",
+        "lightningcss-linux-arm64-gnu": "1.30.1",
+        "lightningcss-linux-arm64-musl": "1.30.1",
+        "lightningcss-linux-x64-gnu": "1.30.1",
+        "lightningcss-linux-x64-musl": "1.30.1",
+        "lightningcss-win32-arm64-msvc": "1.30.1",
+        "lightningcss-win32-x64-msvc": "1.30.1"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.1.tgz",
+      "integrity": "sha512-c8JK7hyE65X1MHMN+Viq9n11RRC7hgin3HhYKhrMyaXflk5GVplZ60IxyoVtzILeKr+xAJwg6zK6sjTBJ0FKYQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
       "engines": {
-        "node": ">=10"
+        "node": ">= 12.0.0"
       },
       "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "license": "MIT"
-    },
-    "node_modules/lodash-es": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
-      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
-      "license": "MIT"
-    },
-    "node_modules/lodash.get": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
-      "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/lodash.isequal": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
-      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/lodash.merge": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
-      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/lodash.throttle": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
-      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==",
-      "license": "MIT"
-    },
-    "node_modules/loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "license": "MIT",
-      "dependencies": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.1.tgz",
+      "integrity": "sha512-k1EvjakfumAQoTfcXUcHQZhSpLlkAuEkdMBsI/ivWw9hL+7FtilQc0Cy3hrx0AAQrVtQAbMI7YjCgYgvn37PzA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
       },
-      "bin": {
-        "loose-envify": "cli.js"
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/loupe": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.3.tgz",
-      "integrity": "sha512-kkIp7XSkP78ZxJEsSxW3712C6teJVoeHHwgo9zJ380de7IYyJ2ISlxojcH2pC5OFLewESmnRi/+XCDIEEVyoug==",
-      "dev": true,
-      "license": "MIT"
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.1.tgz",
+      "integrity": "sha512-kmW6UGCGg2PcyUE59K5r0kWfKPAVy4SltVeut+umLCFoJ53RdCUWxcRDzO1eTaxf/7Q2H7LTquFHPL5R+Gjyig==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
     },
-    "node_modules/lower-case": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
-      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "tslib": "^2.0.3"
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.1.tgz",
+      "integrity": "sha512-MjxUShl1v8pit+6D/zSPq9S9dQ2NPFSQwGvxBCYaBYLPlCWuPh9/t1MRS8iUaR8i+a6w7aps+B4N0S1TYP/R+Q==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/lz-string": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.1.tgz",
+      "integrity": "sha512-gB72maP8rmrKsnKYy8XUuXi/4OctJiuQjcuqWNlJQ6jZiWqtPvqFziskH3hnajfvKB27ynbVCucKSm2rkQp4Bw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.1.tgz",
+      "integrity": "sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.1.tgz",
+      "integrity": "sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.1.tgz",
+      "integrity": "sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.1.tgz",
+      "integrity": "sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.30.1",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.1.tgz",
+      "integrity": "sha512-PVqXh48wh4T53F/1CCu8PIPCxLzWyCnn/9T5W1Jpmdy5h9Cwd+0YQS6/LwhHXSafuc61/xg9Lv5OrCby6a++jg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/locate-path": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
+      "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "p-locate": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "license": "MIT"
+    },
+    "node_modules/lodash-es": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
+      "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.get": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+      "integrity": "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.throttle": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
+      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==",
+      "license": "MIT"
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/loupe": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.3.tgz",
+      "integrity": "sha512-kkIp7XSkP78ZxJEsSxW3712C6teJVoeHHwgo9zJ380de7IYyJ2ISlxojcH2pC5OFLewESmnRi/+XCDIEEVyoug==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
+    "node_modules/lz-string": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
       "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
       "dev": true,
       "license": "MIT",
@@ -10060,7 +10373,6 @@
       "version": "0.30.17",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
       "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0"
@@ -10142,6 +10454,7 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 8"
@@ -10250,6 +10563,7 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
       "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "braces": "^3.0.3",
@@ -10309,6 +10623,7 @@
       "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"
@@ -10339,6 +10654,33 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/minizlib": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.2.tgz",
+      "integrity": "sha512-oG62iEk+CYt5Xj2YqI5Xi9xWUeZhDI8jjQmC5oThVH5JGCTgIjr7ciJDzC7MBzYd//WvR1OTmP5Q38Q8ShQtVA==",
+      "license": "MIT",
+      "dependencies": {
+        "minipass": "^7.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
+    "node_modules/mkdirp": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-3.0.1.tgz",
+      "integrity": "sha512-+NsyUUAZDmo6YVHzL/stxSu3t9YS1iljliy3BSDrXJ/dkn1KYdmtZODGGjLcc9XLgVVpH4KshHB8XmZgMhaBXg==",
+      "license": "MIT",
+      "bin": {
+        "mkdirp": "dist/cjs/src/bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/motion": {
       "version": "11.16.2",
       "resolved": "https://registry.npmjs.org/motion/-/motion-11.16.2.tgz",
@@ -10455,17 +10797,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==",
-      "license": "MIT",
-      "dependencies": {
-        "any-promise": "^1.0.0",
-        "object-assign": "^4.0.1",
-        "thenify-all": "^1.0.0"
-      }
-    },
     "node_modules/nanoid": {
       "version": "3.3.8",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
@@ -10530,15 +10861,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/normalize-range": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
@@ -10578,15 +10900,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==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/object-inspect": {
       "version": "1.13.3",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.3.tgz",
@@ -10881,12 +11194,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/package-json-from-dist": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
-      "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==",
-      "license": "BlueOak-1.0.0"
-    },
     "node_modules/param-case": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
@@ -11205,6 +11512,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -11214,30 +11522,9 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true,
       "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==",
-      "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==",
-      "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",
@@ -11271,6 +11558,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8.6"
@@ -11283,20 +11571,12 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
       }
     },
-    "node_modules/pirates": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
-      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/playwright": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.52.0.tgz",
@@ -11400,97 +11680,6 @@
         "postcss": "^8.0.0"
       }
     },
-    "node_modules/postcss-js": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
-      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "license": "MIT",
-      "dependencies": {
-        "camelcase-css": "^2.0.1"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >= 16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.21"
-      }
-    },
-    "node_modules/postcss-load-config": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
-      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "lilconfig": "^3.0.0",
-        "yaml": "^2.3.4"
-      },
-      "engines": {
-        "node": ">= 14"
-      },
-      "peerDependencies": {
-        "postcss": ">=8.0.9",
-        "ts-node": ">=9.0.0"
-      },
-      "peerDependenciesMeta": {
-        "postcss": {
-          "optional": true
-        },
-        "ts-node": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/postcss-load-config/node_modules/yaml": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.1.tgz",
-      "integrity": "sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q==",
-      "license": "ISC",
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
-    "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==",
-      "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-nesting": {
       "version": "13.0.1",
       "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-13.0.1.tgz",
@@ -11589,23 +11778,11 @@
         "postcss": "^8.0.0"
       }
     },
-    "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==",
-      "license": "MIT",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/prelude-ls": {
@@ -11648,9 +11825,9 @@
       }
     },
     "node_modules/prettier-plugin-tailwindcss": {
-      "version": "0.6.9",
-      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.9.tgz",
-      "integrity": "sha512-r0i3uhaZAXYP0At5xGfJH876W3HHGHDp+LCRUJrs57PBeQ6mYHMwr25KH8NPX44F2yGTvdnH7OqCshlQx183Eg==",
+      "version": "0.6.11",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.11.tgz",
+      "integrity": "sha512-YxaYSIvZPAqhrrEpRtonnrXdghZg1irNg4qrjboCXrpybLWVs55cW2N3juhspVJiO0JBvYJT8SYsJpc8OQSnsA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -11661,7 +11838,7 @@
         "@prettier/plugin-pug": "*",
         "@shopify/prettier-plugin-liquid": "*",
         "@trivago/prettier-plugin-sort-imports": "*",
-        "@zackad/prettier-plugin-twig-melody": "*",
+        "@zackad/prettier-plugin-twig": "*",
         "prettier": "^3.0",
         "prettier-plugin-astro": "*",
         "prettier-plugin-css-order": "*",
@@ -11688,7 +11865,7 @@
         "@trivago/prettier-plugin-sort-imports": {
           "optional": true
         },
-        "@zackad/prettier-plugin-twig-melody": {
+        "@zackad/prettier-plugin-twig": {
           "optional": true
         },
         "prettier-plugin-astro": {
@@ -11846,6 +12023,7 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -12179,23 +12357,12 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "pify": "^2.3.0"
       }
     },
-    "node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "license": "MIT",
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
     "node_modules/recharts": {
       "version": "2.15.1",
       "resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.1.tgz",
@@ -12385,6 +12552,7 @@
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-core-module": "^2.13.0",
@@ -12412,7 +12580,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz",
       "integrity": "sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
@@ -12431,6 +12599,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "iojs": ">=1.0.0",
@@ -12504,7 +12673,6 @@
       "version": "4.40.0",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.40.0.tgz",
       "integrity": "sha512-Noe455xmA96nnqH5piFtLobsGbCij7Tu+tb3c1vYjNbTkfzGqXqQXG3wJaYXkRZuQ0vEYN4bhwg7QnIrqB5B+w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/estree": "1.0.7"
@@ -12551,6 +12719,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -12819,6 +12988,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "shebang-regex": "^3.0.0"
@@ -12831,6 +13001,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8"
@@ -12937,6 +13108,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
       "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
       "license": "ISC",
       "engines": {
         "node": ">=14"
@@ -12981,7 +13153,7 @@
       "version": "0.5.21",
       "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
       "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "buffer-from": "^1.0.0",
@@ -12992,7 +13164,7 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
@@ -13004,115 +13176,41 @@
       "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
       "license": "MIT",
       "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
-    "node_modules/stackback": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
-      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/statuses": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
-      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.8"
-      }
-    },
-    "node_modules/std-env": {
-      "version": "3.9.0",
-      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.9.0.tgz",
-      "integrity": "sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/strict-event-emitter": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/strict-event-emitter/-/strict-event-emitter-0.5.1.tgz",
-      "integrity": "sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/string-width": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "license": "MIT",
-      "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/string-width-cjs": {
-      "name": "string-width",
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "license": "MIT",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/string-width-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "license": "MIT"
-    },
-    "node_modules/string-width-cjs/node_modules/is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/string-width/node_modules/ansi-regex": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
-      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/string-width/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/statuses": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
+      "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
       "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+        "node": ">= 0.8"
       }
     },
+    "node_modules/std-env": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.9.0.tgz",
+      "integrity": "sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/strict-event-emitter": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/strict-event-emitter/-/strict-event-emitter-0.5.1.tgz",
+      "integrity": "sha512-vMgjE/GGEPEFnhFub6pa4FmJBRBVOLpIII2hvCZ8Kzb7K0hlHo7mQv6xYrBvCL2LtAIBwFUK8wvuJgTVSQ5MFQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/string.prototype.includes": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/string.prototype.includes/-/string.prototype.includes-2.0.1.tgz",
@@ -13244,19 +13342,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/strip-ansi-cjs": {
-      "name": "strip-ansi",
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ansi-regex": "^5.0.1"
@@ -13321,61 +13407,11 @@
         "inline-style-parser": "0.2.4"
       }
     },
-    "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==",
-      "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==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/sucrase/node_modules/glob": {
-      "version": "10.4.5",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
-      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
-      "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/supports-preserve-symlinks-flag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 0.4"
@@ -13428,76 +13464,42 @@
       "license": "MIT"
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.17",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
-      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.7.tgz",
+      "integrity": "sha512-kr1o/ErIdNhTz8uzAYL7TpaUuzKIE6QPQ4qmSdxnoX/lo+5wmUHQA6h3L5yIqEImSRnAAURDirLu/BgiXGPAhg==",
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
+      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
       "license": "MIT",
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "arg": "^5.0.2",
-        "chokidar": "^3.6.0",
-        "didyoumean": "^1.2.2",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.3.2",
-        "glob-parent": "^6.0.2",
-        "is-glob": "^4.0.3",
-        "jiti": "^1.21.6",
-        "lilconfig": "^3.1.3",
-        "micromatch": "^4.0.8",
-        "normalize-path": "^3.0.0",
-        "object-hash": "^3.0.0",
-        "picocolors": "^1.1.1",
-        "postcss": "^8.4.47",
-        "postcss-import": "^15.1.0",
-        "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.2",
-        "postcss-nested": "^6.2.0",
-        "postcss-selector-parser": "^6.1.2",
-        "resolve": "^1.22.8",
-        "sucrase": "^3.35.0"
-      },
-      "bin": {
-        "tailwind": "lib/cli.js",
-        "tailwindcss": "lib/cli.js"
-      },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=6"
       }
     },
-    "node_modules/tailwindcss/node_modules/glob-parent": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
-      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+    "node_modules/tar": {
+      "version": "7.4.3",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-7.4.3.tgz",
+      "integrity": "sha512-5S7Va8hKfV7W5U6g3aYxXmlPoZVAwUMy9AOKyF2fVuZa2UD3qZjg578OrLRt8PcNN1PleVaL/5/yYATNL0ICUw==",
       "license": "ISC",
       "dependencies": {
-        "is-glob": "^4.0.3"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
-    "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==",
-      "license": "MIT",
-      "dependencies": {
-        "postcss-value-parser": "^4.0.0",
-        "read-cache": "^1.0.0",
-        "resolve": "^1.1.7"
+        "@isaacs/fs-minipass": "^4.0.0",
+        "chownr": "^3.0.0",
+        "minipass": "^7.1.2",
+        "minizlib": "^3.0.1",
+        "mkdirp": "^3.0.1",
+        "yallist": "^5.0.0"
       },
       "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.0.0"
+        "node": ">=18"
       }
     },
     "node_modules/terser": {
       "version": "5.32.0",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.32.0.tgz",
       "integrity": "sha512-v3Gtw3IzpBJ0ugkxEX8U0W6+TnPKRRCWGh1jC/iM/e3Ki5+qvO1L1EAZ56bZasc64aXHwRHNIQEzm6//i5cemQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
@@ -13516,7 +13518,7 @@
       "version": "2.20.3",
       "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/text-table": {
@@ -13526,27 +13528,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/thenify": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
-      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "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==",
-      "license": "MIT",
-      "dependencies": {
-        "thenify": ">= 3.1.0 < 4"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
@@ -13571,7 +13552,6 @@
       "version": "0.2.13",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.13.tgz",
       "integrity": "sha512-mEwzpUgrLySlveBwEVDMKk5B57bhLPYovRfPAXD5gA/98Opn0rCDj3GtLwFvCvH5RK9uPCExUROW5NjDwvqkxw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.4.4",
@@ -13588,7 +13568,6 @@
       "version": "6.4.4",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.4.tgz",
       "integrity": "sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==",
-      "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "picomatch": "^3 || ^4"
@@ -13603,7 +13582,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
       "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -13679,6 +13657,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
@@ -13759,12 +13738,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==",
-      "license": "Apache-2.0"
-    },
     "node_modules/ts-pattern": {
       "version": "5.7.0",
       "resolved": "https://registry.npmjs.org/ts-pattern/-/ts-pattern-5.7.0.tgz",
@@ -13828,7 +13801,7 @@
       "version": "4.19.3",
       "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.19.3.tgz",
       "integrity": "sha512-4H8vUNGNjQ4V2EOoGw005+c+dGuPSnhpPBPHBtsZdGZBk/iJb4kguGlPWaZTZ3q5nMtFOEsY0nRDlh9PJyd6SQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "~0.25.0",
@@ -14041,7 +14014,7 @@
       "version": "6.19.8",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz",
       "integrity": "sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
       "peer": true
     },
@@ -14263,6 +14236,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/utils-merge": {
@@ -14362,7 +14336,6 @@
       "version": "6.3.4",
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.4.tgz",
       "integrity": "sha512-BiReIiMS2fyFqbqNT/Qqt4CVITDU9M9vE+DKcVAsB+ZV0wvTKd+3hMbkpxz1b+NmEDMegpVbisKiAZOnvO92Sw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
@@ -14526,7 +14499,6 @@
       "version": "6.4.4",
       "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.4.tgz",
       "integrity": "sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==",
-      "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "picomatch": "^3 || ^4"
@@ -14541,7 +14513,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
       "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -14705,6 +14676,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
       "license": "ISC",
       "dependencies": {
         "isexe": "^2.0.0"
@@ -14831,142 +14803,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/wrap-ansi": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
-      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^6.1.0",
-        "string-width": "^5.0.1",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs": {
-      "name": "wrap-ansi",
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "license": "MIT",
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "license": "MIT",
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "license": "MIT"
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "license": "MIT"
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "license": "MIT",
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/wrap-ansi/node_modules/ansi-regex": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
-      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi/node_modules/ansi-styles": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
-      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi/node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "license": "MIT",
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
     "node_modules/wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -15022,6 +14858,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/yallist": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-5.0.0.tgz",
+      "integrity": "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw==",
+      "license": "BlueOak-1.0.0",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/yargs": {
       "version": "17.7.2",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
diff --git a/package.json b/package.json
index 2ac361121d..54aa91aa8f 100644
--- a/package.json
+++ b/package.json
@@ -35,12 +35,13 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.23",
     "@headlessui/react": "^2.2.0",
-    "@oxide/design-system": "^2.5.1",
+    "@oxide/design-system": "^2.5.2--canary.374c845.0",
     "@radix-ui/react-accordion": "^1.2.0",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-tabs": "^1.1.0",
     "@react-aria/live-announcer": "^3.3.4",
     "@tailwindcss/container-queries": "^0.1.1",
+    "@tailwindcss/vite": "^4.1.7",
     "@tanstack/react-query": "^5.56.2",
     "@tanstack/react-query-devtools": "^5.56.2",
     "@tanstack/react-table": "^8.20.5",
@@ -118,10 +119,10 @@
     "postcss-nesting": "^13.0.1",
     "postcss-pseudo-classes": "^0.4.0",
     "prettier": "^3.4.2",
-    "prettier-plugin-tailwindcss": "^0.6.9",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "resize-observer-polyfill": "^1.5.1",
     "semver": "^7.6.3",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.1.7",
     "tsx": "^4.19.2",
     "type-fest": "^4.33.0",
     "typescript": "~5.8.3",
diff --git a/postcss.config.mjs b/postcss.config.mjs
deleted file mode 100644
index f95bae1aaa..0000000000
--- a/postcss.config.mjs
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, you can obtain one at https://mozilla.org/MPL/2.0/.
- *
- * Copyright Oxide Computer Company
- */
-
-export default {
-  plugins: {
-    'postcss-import': {},
-    // https://tailwindcss.com/docs/using-with-preprocessors#nesting
-    'tailwindcss/nesting': 'postcss-nesting',
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
diff --git a/tailwind.config.ts b/tailwind.config.ts
deleted file mode 100644
index 967c8f030d..0000000000
--- a/tailwind.config.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-/*
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, you can obtain one at https://mozilla.org/MPL/2.0/.
- *
- * Copyright Oxide Computer Company
- */
-
-import containerQueriesPlugin from '@tailwindcss/container-queries'
-import { type Config } from 'tailwindcss'
-import plugin from 'tailwindcss/plugin'
-
-import {
-  borderRadiusTokens,
-  colorUtilities,
-  elevationUtilities,
-  textUtilities,
-} from '@oxide/design-system/styles/tailwind-tokens.ts'
-
-export default {
-  corePlugins: {
-    fontFamily: false,
-    fontSize: false,
-  },
-  content: ['./app/**/*.{ts,tsx}'],
-  theme: {
-    extend: {
-      screens: {
-        'xl-': { max: '1535px' },
-        'lg-': { max: '1279px' },
-        'md-': { max: '1023px' },
-        'sm-': { max: '767px' },
-        'sm+': { min: '640px' },
-        'md+': { min: '768px' },
-        'lg+': { min: '1024px' },
-        'xl+': { min: '1280px' },
-        '2xl+': { min: '1536px' },
-        sm: { min: '640px', max: '767px' },
-        md: { min: '768px', max: '1023px' },
-        lg: { min: '1024px', max: '1279px' },
-        xl: { min: '1280px', max: '1535px' },
-      },
-      zIndex: {
-        toast: '50',
-        modalDropdown: '50',
-        modal: '40',
-        sideModalDropdown: '40',
-        sideModal: '30',
-        modalOverlay: '25',
-        topBarDropdown: '20',
-        topBar: '15',
-        popover: '10',
-        contentDropdown: '10',
-        content: '0',
-      },
-    },
-    borderRadius: {
-      none: '0',
-      ...borderRadiusTokens,
-    },
-    colors: {
-      transparent: 'transparent',
-      current: 'currentColor',
-    },
-    animation: {
-      'spin-slow': 'spin 5s linear infinite',
-      pulse: 'pulse 2s cubic-bezier(.4,0,.6,1) infinite',
-      // used by PageSkeleton
-      pulse2: 'pulse2 1.3s cubic-bezier(.4,0,.6,1) infinite',
-    },
-    keyframes: {
-      // different from pulse in that we go up a little before we go back down.
-      // pulse starts at opacity 1
-      pulse2: {
-        '0%, 100%': { opacity: '0.75' },
-        '50%': { opacity: '1' },
-      },
-    },
-  },
-  plugins: [
-    plugin(({ addVariant, addUtilities }) => {
-      addVariant('children', '& > *')
-      addVariant('selected', '.is-selected &')
-      addVariant('disabled', ['&.visually-disabled', '&:disabled'])
-      addUtilities(textUtilities)
-      addUtilities(colorUtilities)
-      addUtilities(elevationUtilities)
-    }),
-    containerQueriesPlugin,
-  ],
-} satisfies Config
diff --git a/vite.config.ts b/vite.config.ts
index 6a1607f4a7..2c1ab11c28 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -7,6 +7,7 @@
  */
 import { randomBytes } from 'crypto'
 import { resolve } from 'path'
+import tailwindcss from '@tailwindcss/vite'
 import basicSsl from '@vitejs/plugin-basic-ssl'
 import react from '@vitejs/plugin-react-swc'
 import { defineConfig } from 'vite'
@@ -126,6 +127,7 @@ export default defineConfig(({ mode }) => ({
     'process.env.CHAOS': JSON.stringify(mode !== 'production' && process.env.CHAOS),
   },
   plugins: [
+    tailwindcss(),
     tsconfigPaths(),
     createHtmlPlugin({
       inject: {

From a49469cfe458fe7c88d045f28e4a3844e2558e27 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <benji@oxide.computer>
Date: Fri, 16 May 2025 15:30:19 +0100
Subject: [PATCH 2/3] Not using any DS components

---
 app/ui/styles/index.css | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/ui/styles/index.css b/app/ui/styles/index.css
index 25a06a014d..c8623a3b94 100644
--- a/app/ui/styles/index.css
+++ b/app/ui/styles/index.css
@@ -40,8 +40,6 @@
 
 @import '@xterm/xterm/css/xterm.css' layer(components);
 
-@source '../../node_modules/@oxide/design-system/dist/components';
-
 @theme {
   --animate-spin-slow: spin 5s linear infinite;
   --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

From 727ff63e0b802823d412d7880ea0778972c20248 Mon Sep 17 00:00:00 2001
From: Benjamin Leonard <benji@oxide.computer>
Date: Fri, 16 May 2025 15:31:30 +0100
Subject: [PATCH 3/3] Use sans var

---
 app/ui/styles/index.css | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/app/ui/styles/index.css b/app/ui/styles/index.css
index c8623a3b94..24a8400dd1 100644
--- a/app/ui/styles/index.css
+++ b/app/ui/styles/index.css
@@ -121,14 +121,7 @@
 
 @layer base {
   body {
-    @apply text-default bg-default overflow-y-hidden;
-    font-family:
-      SuisseIntl,
-      -apple-system,
-      BlinkMacSystemFont,
-      Helvetica,
-      Arial,
-      sans-serif;
+    @apply text-default bg-default overflow-y-hidden font-sans;
   }
 
   /* https://github.com/tailwindlabs/tailwindcss/blob/v2.2.4/src/plugins/css/preflight.css#L57 */