@formant/aesthetics 0.0.1 → 0.0.4

package/dist/index.js

@@ -1,6 +1,5 @@
 import { Accordion as Accordion$1, Slot, AlertDialog as AlertDialog$1, AspectRatio as AspectRatio$1, Avatar as Avatar$1, Checkbox as Checkbox$1, Collapsible as Collapsible$1, Dialog as Dialog$1, ContextMenu as ContextMenu$1, DropdownMenu as DropdownMenu$1, HoverCard as HoverCard$1, Label as Label$1, Menubar as Menubar$1, NavigationMenu as NavigationMenu$1, Popover as Popover$1, Progress as Progress$1, RadioGroup as RadioGroup$1, ScrollArea as ScrollArea$1, Select as Select$1, Separator, Slider as Slider$1, Switch as Switch$1, Tabs as Tabs$1, Toggle as Toggle$1, ToggleGroup as ToggleGroup$1, Tooltip } from 'radix-ui';
 import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 import { ChevronDownIcon, ChevronUpIcon, ChevronRightIcon, MoreHorizontalIcon, ChevronLeftIcon, CheckIcon, XIcon, SearchIcon, MinusIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, InfoIcon, CircleCheckIcon } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
@@ -16,7 +15,7 @@ import { useTheme, ThemeProvider as ThemeProvider$1 } from 'next-themes';
 import { Toaster as Toaster$1 } from 'sonner';
 
 function cn(...inputs) {
-  return twMerge(clsx(inputs));
+  return clsx(inputs);
 }
 function Accordion({
   className,
@@ -3918,7 +3917,8 @@ function ThemeHotkey() {
   return null;
 }
 var FORMANT_FONTS = "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500&display=swap";
-var FORMANT_THEME_CSS = `
+var FORMANT_UTILITY_CSS = `
+/* CSS Variables */
 :root {
   --background: #202428;
   --foreground: #F2F3F4;
@@ -3939,69 +3939,348 @@ var FORMANT_THEME_CSS = `
   --border: rgba(163, 171, 169, 0.1);
   --input: rgba(163, 171, 169, 0.2);
   --ring: #ACC3B3;
-  --chart-1: #ACC3B3;
-  --chart-2: #4B5E53;
-  --chart-3: #2C4142;
-  --chart-4: #E8AB7F;
-  --chart-5: #8B8CF4;
   --radius: 0.25rem;
-  --sidebar: #0A0F11;
-  --sidebar-foreground: #F2F3F4;
-  --sidebar-primary: #ACC3B3;
-  --sidebar-primary-foreground: #0A0F11;
-  --sidebar-accent: #202428;
-  --sidebar-accent-foreground: #F2F3F4;
-  --sidebar-border: rgba(163, 171, 169, 0.1);
-  --sidebar-ring: #ACC3B3;
-  --deep-command: #0A0F11;
-  --slate-mist: #202428;
-  --formant-white: #F2F3F4;
-  --system-neutral: #A3ABA9;
-  --fog-green: #4B5E53;
-  --ethereal-teal: #2C4142;
-  --horizon-glow: #ACC3B3;
-  --terminal-amber: #E8AB7F;
-  --interface-iris: #8B8CF4;
+  --radius-sm: calc(0.25rem * 0.6);
+  --radius-md: calc(0.25rem * 0.8);
+  --radius-lg: 0.25rem;
+  --radius-xl: calc(0.25rem * 1.4);
 }
 
-* {
-  border-color: var(--border);
-  outline-color: var(--ring);
-}
+/* Base */
+* { border-color: var(--border); outline-color: var(--ring); }
+body { background-color: var(--background); color: var(--foreground); font-family: 'Inter', sans-serif; }
+html { font-family: 'Inter', sans-serif; }
+h1, h2, h3, h4, h5, h6 { font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.02em; }
+code, pre, .font-mono { font-family: 'JetBrains Mono', monospace; }
 
-body {
-  background-color: var(--background);
-  color: var(--foreground);
-  font-family: 'Inter', sans-serif;
-}
+/* Display */
+.block { display: block; }
+.inline-block { display: inline-block; }
+.inline { display: inline; }
+.flex { display: flex; }
+.inline-flex { display: inline-flex; }
+.grid { display: grid; }
+.contents { display: contents; }
+.hidden { display: none; }
+.table { display: table; }
 
-html {
-  font-family: 'Inter', sans-serif;
-}
+/* Flexbox */
+.flex-1 { flex: 1 1 0%; }
+.flex-auto { flex: 1 1 auto; }
+.flex-initial { flex: 0 1 auto; }
+.flex-none { flex: none; }
+.flex-col { flex-direction: column; }
+.flex-row { flex-direction: row; }
+.flex-wrap { flex-wrap: wrap; }
+.flex-nowrap { flex-wrap: nowrap; }
+.grow { flex-grow: 1; }
+.grow-0 { flex-grow: 0; }
+.shrink { flex-shrink: 1; }
+.shrink-0 { flex-shrink: 0; }
+.justify-start { justify-content: flex-start; }
+.justify-end { justify-content: flex-end; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.justify-around { justify-content: space-around; }
+.items-start { align-items: flex-start; }
+.items-end { align-items: flex-end; }
+.items-center { align-items: center; }
+.items-baseline { align-items: baseline; }
+.items-stretch { align-items: stretch; }
 
-h1, h2, h3, h4, h5, h6 {
-  font-family: 'Space Grotesk', sans-serif;
-  letter-spacing: -0.02em;
-}
+/* Grid */
+.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.grid-cols-none { grid-template-columns: none; }
+.grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
+.grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
+.auto-rows-min { grid-auto-rows: min-content; }
 
-code, pre, .font-mono {
-  font-family: 'JetBrains Mono', monospace;
-}
+/* Gap */
+.gap-0 { gap: 0px; }
+.gap-0_5 { gap: 0.125rem; }
+.gap-1 { gap: 0.25rem; }
+.gap-1_5 { gap: 0.375rem; }
+.gap-2 { gap: 0.5rem; }
+.gap-2_5 { gap: 0.625rem; }
+.gap-3 { gap: 0.75rem; }
+.gap-3_5 { gap: 0.875rem; }
+.gap-4 { gap: 1rem; }
+.gap-5 { gap: 1.25rem; }
+.gap-6 { gap: 1.5rem; }
+.gap-8 { gap: 2rem; }
+.gap-10 { gap: 2.5rem; }
+.gap-12 { gap: 3rem; }
 
-.font-heading {
-  font-family: 'Space Grotesk', sans-serif;
-  letter-spacing: -0.02em;
-}
+/* Padding */
+.p-0 { padding: 0px; }
+.p-0_5 { padding: 0.125rem; }
+.p-1 { padding: 0.25rem; }
+.p-1_5 { padding: 0.375rem; }
+.p-2 { padding: 0.5rem; }
+.p-2_5 { padding: 0.625rem; }
+.p-3 { padding: 0.75rem; }
+.p-3_5 { padding: 0.875rem; }
+.p-4 { padding: 1rem; }
+.p-5 { padding: 1.25rem; }
+.p-6 { padding: 1.5rem; }
+.p-8 { padding: 2rem; }
+.px-0 { padding-left: 0px; padding-right: 0px; }
+.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
+.px-1_5 { padding-left: 0.375rem; padding-right: 0.375rem; }
+.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
+.px-2_5 { padding-left: 0.625rem; padding-right: 0.625rem; }
+.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
+.px-3_5 { padding-left: 0.875rem; padding-right: 0.875rem; }
+.px-4 { padding-left: 1rem; padding-right: 1rem; }
+.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
+.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
+.px-8 { padding-left: 2rem; padding-right: 2rem; }
+.py-0 { padding-top: 0px; padding-bottom: 0px; }
+.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
+.py-1_5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
+.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
+.py-2_5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
+.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
+.py-3_5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
+.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
+.pt-0 { padding-top: 0px; }
+.pt-1 { padding-top: 0.25rem; }
+.pt-2 { padding-top: 0.5rem; }
+.pt-3 { padding-top: 0.75rem; }
+.pt-4 { padding-top: 1rem; }
+.pr-0 { padding-right: 0px; }
+.pr-1 { padding-right: 0.25rem; }
+.pr-1_5 { padding-right: 0.375rem; }
+.pr-2 { padding-right: 0.5rem; }
+.pr-2_5 { padding-right: 0.625rem; }
+.pr-3 { padding-right: 0.75rem; }
+.pr-4 { padding-right: 1rem; }
+.pr-8 { padding-right: 2rem; }
+.pr-10 { padding-right: 2.5rem; }
+.pb-0 { padding-bottom: 0px; }
+.pb-1 { padding-bottom: 0.25rem; }
+.pb-2 { padding-bottom: 0.5rem; }
+.pb-3 { padding-bottom: 0.75rem; }
+.pb-4 { padding-bottom: 1rem; }
+.pl-0 { padding-left: 0px; }
+.pl-1 { padding-left: 0.25rem; }
+.pl-1_5 { padding-left: 0.375rem; }
+.pl-2 { padding-left: 0.5rem; }
+.pl-2_5 { padding-left: 0.625rem; }
+.pl-3 { padding-left: 0.75rem; }
+.pl-4 { padding-left: 1rem; }
+.pl-7 { padding-left: 1.75rem; }
+.pl-10 { padding-left: 2.5rem; }
 
-.font-sans {
-  font-family: 'Inter', sans-serif;
-}
+/* Margin */
+.m-0 { margin: 0px; }
+.m-1 { margin: 0.25rem; }
+.m-2 { margin: 0.5rem; }
+.m-3 { margin: 0.75rem; }
+.m-4 { margin: 1rem; }
+.m-auto { margin: auto; }
+.mx-auto { margin-left: auto; margin-right: auto; }
+.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
+.mx-4 { margin-left: 1rem; margin-right: 1rem; }
+.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }
+.my-4 { margin-top: 1rem; margin-bottom: 1rem; }
+.mt-0 { margin-top: 0px; }
+.mt-1 { margin-top: 0.25rem; }
+.mt-2 { margin-top: 0.5rem; }
+.mt-3 { margin-top: 0.75rem; }
+.mt-4 { margin-top: 1rem; }
+.mt-6 { margin-top: 1.5rem; }
+.mt-8 { margin-top: 2rem; }
+.mt-24 { margin-top: 6rem; }
+.mr-0 { margin-right: 0px; }
+.mr-1 { margin-right: 0.25rem; }
+.mr-2 { margin-right: 0.5rem; }
+.mr-3 { margin-right: 0.75rem; }
+.mr-4 { margin-right: 1rem; }
+.mr-auto { margin-right: auto; }
+.ml-auto { margin-left: auto; }
+.ml-1 { margin-left: 0.25rem; }
+.ml-2 { margin-left: 0.5rem; }
+.ml-3 { margin-left: 0.75rem; }
+.ml-4 { margin-left: 1rem; }
+.mb-0 { margin-bottom: 0px; }
+.mb-1 { margin-bottom: 0.25rem; }
+.mb-2 { margin-bottom: 0.5rem; }
+.mb-3 { margin-bottom: 0.75rem; }
+.mb-4 { margin-bottom: 1rem; }
+.-mx-1 { margin-left: -0.25rem; margin-right: -0.25rem; }
+.-mx-4 { margin-left: -1rem; margin-right: -1rem; }
+.-my-1 { margin-top: -0.25rem; margin-bottom: -0.25rem; }
+.-mb-4 { margin-bottom: -1rem; }
+.-ml-4 { margin-left: -1rem; }
+.-mt-4 { margin-top: -1rem; }
+.-ml-12 { margin-left: -3rem; }
+.-mr-12 { margin-right: -3rem; }
+.-mt-12 { margin-top: -3rem; }
+.-mb-12 { margin-bottom: -3rem; }
 
-.font-mono {
-  font-family: 'JetBrains Mono', monospace;
-  letter-spacing: 0.02em;
-}
+/* Width */
+.w-0 { width: 0px; }
+.w-1 { width: 0.25rem; }
+.w-2 { width: 0.5rem; }
+.w-3 { width: 0.75rem; }
+.w-4 { width: 1rem; }
+.w-5 { width: 1.25rem; }
+.w-6 { width: 1.5rem; }
+.w-7 { width: 1.75rem; }
+.w-8 { width: 2rem; }
+.w-9 { width: 2.25rem; }
+.w-10 { width: 2.5rem; }
+.w-11 { width: 2.75rem; }
+.w-12 { width: 3rem; }
+.w-14 { width: 3.5rem; }
+.w-16 { width: 4rem; }
+.w-20 { width: 5rem; }
+.w-24 { width: 6rem; }
+.w-28 { width: 7rem; }
+.w-32 { width: 8rem; }
+.w-36 { width: 9rem; }
+.w-40 { width: 10rem; }
+.w-48 { width: 12rem; }
+.w-56 { width: 14rem; }
+.w-64 { width: 16rem; }
+.w-72 { width: 18rem; }
+.w-80 { width: 20rem; }
+.w-96 { width: 24rem; }
+.w-auto { width: auto; }
+.w-full { width: 100%; }
+.w-fit { width: fit-content; }
+.w-max { width: max-content; }
+.w-min { width: min-content; }
+.w-screen { width: 100vw; }
+.w-px { width: 1px; }
+.w-1_2 { width: 50%; }
+.w-1_3 { width: 33.333333%; }
+.w-2_3 { width: 66.666667%; }
+.w-1_4 { width: 25%; }
+.w-3_4 { width: 75%; }
+.min-w-0 { min-width: 0px; }
+.min-w-full { min-width: 100%; }
+.min-w-fit { min-width: fit-content; }
+.min-w-32 { min-width: 8rem; }
+.min-w-36 { min-width: 9rem; }
+.max-w-0 { max-width: 0px; }
+.max-w-xs { max-width: 20rem; }
+.max-w-sm { max-width: 24rem; }
+.max-w-md { max-width: 28rem; }
+.max-w-lg { max-width: 32rem; }
+.max-w-xl { max-width: 36rem; }
+.max-w-2xl { max-width: 42rem; }
+.max-w-3xl { max-width: 48rem; }
+.max-w-4xl { max-width: 56rem; }
+.max-w-5xl { max-width: 64rem; }
+.max-w-6xl { max-width: 72rem; }
+.max-w-7xl { max-width: 80rem; }
+.max-w-full { max-width: 100%; }
+.max-w-max { max-width: max-content; }
+.max-w-fit { max-width: fit-content; }
+.max-w-prose { max-width: 65ch; }
+.max-w-screen-sm { max-width: 640px; }
+.max-w-screen-md { max-width: 768px; }
+.max-w-screen-lg { max-width: 1024px; }
+.max-w-screen-xl { max-width: 1280px; }
+.max-w-screen-2xl { max-width: 1536px; }
+.max-w-[calc(100%-2rem)] { max-width: calc(100% - 2rem); }
+
+/* Height */
+.h-0 { height: 0px; }
+.h-1 { height: 0.25rem; }
+.h-2 { height: 0.5rem; }
+.h-2_5 { height: 0.625rem; }
+.h-3 { height: 0.75rem; }
+.h-3_5 { height: 0.875rem; }
+.h-4 { height: 1rem; }
+.h-5 { height: 1.25rem; }
+.h-6 { height: 1.5rem; }
+.h-7 { height: 1.75rem; }
+.h-8 { height: 2rem; }
+.h-9 { height: 2.25rem; }
+.h-10 { height: 2.5rem; }
+.h-11 { height: 2.75rem; }
+.h-12 { height: 3rem; }
+.h-14 { height: 3.5rem; }
+.h-16 { height: 4rem; }
+.h-20 { height: 5rem; }
+.h-24 { height: 6rem; }
+.h-28 { height: 7rem; }
+.h-32 { height: 8rem; }
+.h-36 { height: 9rem; }
+.h-40 { height: 10rem; }
+.h-44 { height: 11rem; }
+.h-48 { height: 12rem; }
+.h-56 { height: 14rem; }
+.h-64 { height: 16rem; }
+.h-72 { height: 18rem; }
+.h-80 { height: 20rem; }
+.h-96 { height: 24rem; }
+.h-auto { height: auto; }
+.h-full { height: 100%; }
+.h-fit { height: fit-content; }
+.h-max { height: max-content; }
+.h-min { height: min-content; }
+.h-screen { height: 100vh; }
+.h-px { height: 1px; }
+.h-[14px] { height: 14px; }
+.h-[18.4px] { height: 18.4px; }
+.h-[80vh] { height: 80vh; }
+.h-[100px] { height: 100px; }
+.h-[180px] { height: 180px; }
+.h-[200px] { height: 200px; }
+.min-h-0 { min-height: 0px; }
+.min-h-full { min-height: 100%; }
+.min-h-screen { min-height: 100vh; }
+.min-h-20 { min-height: 5rem; }
+.max-h-full { max-height: 100%; }
+.max-h-screen { max-height: 100vh; }
+.max-h-72 { max-height: 18rem; }
+.max-h-[80vh] { max-height: 80vh; }
 
+/* Size (width + height) */
+.size-0 { width: 0px; height: 0px; }
+.size-1 { width: 0.25rem; height: 0.25rem; }
+.size-2 { width: 0.5rem; height: 0.5rem; }
+.size-2_5 { width: 0.625rem; height: 0.625rem; }
+.size-3 { width: 0.75rem; height: 0.75rem; }
+.size-3_5 { width: 0.875rem; height: 0.875rem; }
+.size-4 { width: 1rem; height: 1rem; }
+.size-5 { width: 1.25rem; height: 1.25rem; }
+.size-6 { width: 1.5rem; height: 1.5rem; }
+.size-7 { width: 1.75rem; height: 1.75rem; }
+.size-8 { width: 2rem; height: 2rem; }
+.size-9 { width: 2.25rem; height: 2.25rem; }
+.size-10 { width: 2.5rem; height: 2.5rem; }
+.size-full { width: 100%; height: 100%; }
+
+/* Background Colors */
+.bg-transparent { background-color: transparent; }
+.bg-black { background-color: #000; }
+.bg-white { background-color: #fff; }
+.bg-background { background-color: var(--background); }
+.bg-foreground { background-color: var(--foreground); }
+.bg-card { background-color: var(--card); }
+.bg-card-foreground { background-color: var(--card-foreground); }
+.bg-popover { background-color: var(--popover); }
+.bg-popover-foreground { background-color: var(--popover-foreground); }
+.bg-primary { background-color: var(--primary); }
+.bg-primary-foreground { background-color: var(--primary-foreground); }
+.bg-secondary { background-color: var(--secondary); }
+.bg-secondary-foreground { background-color: var(--secondary-foreground); }
+.bg-muted { background-color: var(--muted); }
+.bg-muted-50 { background-color: rgba(32, 36, 40, 0.5); }
+.bg-muted-foreground { background-color: var(--muted-foreground); }
+.bg-accent { background-color: var(--accent); }
+.bg-accent-foreground { background-color: var(--accent-foreground); }
+.bg-destructive { background-color: var(--destructive); }
+.bg-destructive-foreground { background-color: var(--destructive-foreground); }
+.bg-border { background-color: var(--border); }
+.bg-input { background-color: var(--input); }
+.bg-ring { background-color: var(--ring); }
 .bg-deep-command { background-color: #0A0F11; }
 .bg-slate-mist { background-color: #202428; }
 .bg-formant-white { background-color: #F2F3F4; }
@@ -4011,7 +4290,43 @@ code, pre, .font-mono {
 .bg-horizon-glow { background-color: #ACC3B3; }
 .bg-terminal-amber { background-color: #E8AB7F; }
 .bg-interface-iris { background-color: #8B8CF4; }
+.bg-black-10 { background-color: rgba(0, 0, 0, 0.1); }
+.bg-[#0A0F11] { background-color: #0A0F11; }
+.bg-[#1A2A22] { background-color: #1A2A22; }
+.bg-[#151B1C] { background-color: #151B1C; }
+.bg-[#202428] { background-color: #202428; }
+.bg-[#2A1E14] { background-color: #2A1E14; }
+.bg-[rgba(172,195,179,0.08)] { background-color: rgba(172, 195, 179, 0.08); }
+.bg-[rgba(172,195,179,0.1)] { background-color: rgba(172, 195, 179, 0.1); }
+.bg-[rgba(139,140,244,0.1)] { background-color: rgba(139, 140, 244, 0.1); }
+.bg-[rgba(232,171,127,0.1)] { background-color: rgba(232, 171, 127, 0.1); }
+.bg-[rgba(44,65,66,0.3)] { background-color: rgba(44, 65, 66, 0.3); }
+.bg-[rgba(44,65,66,0.4)] { background-color: rgba(44, 65, 66, 0.4); }
+.bg-[rgba(75,94,83,0.3)] { background-color: rgba(75, 94, 83, 0.3); }
 
+/* Text Colors */
+.text-transparent { color: transparent; }
+.text-black { color: #000; }
+.text-white { color: #fff; }
+.text-background { color: var(--background); }
+.text-foreground { color: var(--foreground); }
+.text-card { color: var(--card); }
+.text-card-foreground { color: var(--card-foreground); }
+.text-popover { color: var(--popover); }
+.text-popover-foreground { color: var(--popover-foreground); }
+.text-primary { color: var(--primary); }
+.text-primary-foreground { color: var(--primary-foreground); }
+.text-secondary { color: var(--secondary); }
+.text-secondary-foreground { color: var(--secondary-foreground); }
+.text-muted { color: var(--muted); }
+.text-muted-foreground { color: var(--muted-foreground); }
+.text-accent { color: var(--accent); }
+.text-accent-foreground { color: var(--accent-foreground); }
+.text-destructive { color: var(--destructive); }
+.text-destructive-foreground { color: var(--destructive-foreground); }
+.text-border { color: var(--border); }
+.text-input { color: var(--input); }
+.text-ring { color: var(--ring); }
 .text-deep-command { color: #0A0F11; }
 .text-slate-mist { color: #202428; }
 .text-formant-white { color: #F2F3F4; }
@@ -4021,11 +4336,679 @@ code, pre, .font-mono {
 .text-horizon-glow { color: #ACC3B3; }
 .text-terminal-amber { color: #E8AB7F; }
 .text-interface-iris { color: #8B8CF4; }
+.text-[#A3ABA9] { color: #A3ABA9; }
+.text-[#ACC3B3] { color: #ACC3B3; }
+.text-[#E8AB7F] { color: #E8AB7F; }
+.text-[#F2F3F4] { color: #F2F3F4; }
+.text-[#8B8CF4] { color: #8B8CF4; }
+.text-[rgba(163,171,169,0.5)] { color: rgba(163, 171, 169, 0.5); }
 
+/* Border Colors */
+.border-transparent { border-color: transparent; }
+.border-black { border-color: #000; }
+.border-white { border-color: #fff; }
+.border-background { border-color: var(--background); }
+.border-foreground { border-color: var(--foreground); }
+.border-card { border-color: var(--card); }
+.border-card-foreground { border-color: var(--card-foreground); }
+.border-popover { border-color: var(--popover); }
+.border-popover-foreground { border-color: var(--popover-foreground); }
+.border-primary { border-color: var(--primary); }
+.border-primary-foreground { border-color: var(--primary-foreground); }
+.border-secondary { border-color: var(--secondary); }
+.border-secondary-foreground { border-color: var(--secondary-foreground); }
+.border-muted { border-color: var(--muted); }
+.border-muted-foreground { border-color: var(--muted-foreground); }
+.border-accent { border-color: var(--accent); }
+.border-accent-foreground { border-color: var(--accent-foreground); }
+.border-destructive { border-color: var(--destructive); }
+.border-destructive-foreground { border-color: var(--destructive-foreground); }
+.border-border { border-color: var(--border); }
+.border-border-50 { border-color: rgba(163, 171, 169, 0.05); }
+.border-input { border-color: var(--input); }
+.border-ring { border-color: var(--ring); }
+.border-foreground-10 { border-color: rgba(242, 243, 244, 0.1); }
 .border-fog-green { border-color: rgba(75, 94, 83, 0.4); }
 .border-terminal-amber { border-color: rgba(232, 171, 127, 0.25); }
 .border-interface-iris { border-color: rgba(139, 140, 244, 0.25); }
+.border-[#ACC3B3] { border-color: #ACC3B3; }
+.border-[#A3ABA9] { border-color: #A3ABA9; }
+.border-[rgba(163,171,169,0.1)] { border-color: rgba(163, 171, 169, 0.1); }
+.border-[rgba(163,171,169,0.2)] { border-color: rgba(163, 171, 169, 0.2); }
+.border-[rgba(75,94,83,0.4)] { border-color: rgba(75, 94, 83, 0.4); }
+.border-[rgba(44,65,66,0.6)] { border-color: rgba(44, 65, 66, 0.6); }
+.border-[rgba(172,195,179,0.4)] { border-color: rgba(172, 195, 179, 0.4); }
+.border-[rgba(232,171,127,0.2)] { border-color: rgba(232, 171, 127, 0.2); }
+.border-[rgba(139,140,244,0.25)] { border-color: rgba(139, 140, 244, 0.25); }
+
+/* Border Width */
+.border-0 { border-width: 0px; }
+.border-2 { border-width: 2px; }
+.border { border-width: 1px; }
+.border-t { border-top-width: 1px; }
+.border-t-0 { border-top-width: 0px; }
+.border-r { border-right-width: 1px; }
+.border-r-0 { border-right-width: 0px; }
+.border-b { border-bottom-width: 1px; }
+.border-b-0 { border-bottom-width: 0px; }
+.border-l { border-left-width: 1px; }
+.border-l-0 { border-left-width: 0px; }
+.border-x { border-left-width: 1px; border-right-width: 1px; }
+.border-y { border-top-width: 1px; border-bottom-width: 1px; }
+.border-y-0 { border-top-width: 0px; border-bottom-width: 0px; }
+.border-[1.5px] { border-width: 1.5px; }
+
+/* Border Style */
+.border-solid { border-style: solid; }
+.border-dashed { border-style: dashed; }
+.border-dotted { border-style: dotted; }
+.border-double { border-style: double; }
+.border-hidden { border-style: hidden; }
+.border-none { border-style: none; }
+
+/* Border Radius */
+.rounded-none { border-radius: 0; }
+.rounded-sm { border-radius: var(--radius-sm); }
+.rounded { border-radius: var(--radius); }
+.rounded-md { border-radius: var(--radius-md); }
+.rounded-lg { border-radius: var(--radius-lg); }
+.rounded-xl { border-radius: var(--radius-xl); }
+.rounded-2xl { border-radius: var(--radius-2xl); }
+.rounded-3xl { border-radius: var(--radius-3xl); }
+.rounded-4xl { border-radius: var(--radius-4xl); }
+.rounded-full { border-radius: 9999px; }
+.rounded-[2px] { border-radius: 2px; }
+.rounded-[3px] { border-radius: 3px; }
+.rounded-[4px] { border-radius: 4px; }
+.rounded-[calc(var(--radius)-3px)] { border-radius: calc(var(--radius) - 3px); }
+.rounded-[calc(var(--radius)-5px)] { border-radius: calc(var(--radius) - 5px); }
+.rounded-[min(var(--radius-md),10px)] { border-radius: min(var(--radius-md), 10px); }
+.rounded-[min(var(--radius-md),12px)] { border-radius: min(var(--radius-md), 12px); }
+.rounded-t-lg { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }
+.rounded-t-xl { border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl); }
+.rounded-b-lg { border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }
+.rounded-b-xl { border-bottom-left-radius: var(--radius-xl); border-bottom-right-radius: var(--radius-xl); }
+.rounded-l-lg { border-top-left-radius: var(--radius-lg); border-bottom-left-radius: var(--radius-lg); }
+.rounded-l-md { border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); }
+.rounded-r-lg { border-top-right-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }
+.rounded-r-md { border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
+
+/* Typography - Font Size */
+.text-xs { font-size: 0.75rem; line-height: 1rem; }
+.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
+.text-base { font-size: 1rem; line-height: 1.5rem; }
+.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
+.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
+.text-2xl { font-size: 1.5rem; line-height: 2rem; }
+.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
+.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
+.text-5xl { font-size: 3rem; line-height: 1; }
+.text-[10px] { font-size: 10px; }
+.text-[11px] { font-size: 11px; }
+.text-[12px] { font-size: 12px; }
+.text-[13px] { font-size: 13px; }
+.text-[0.8rem] { font-size: 0.8rem; }
+
+/* Typography - Font Weight */
+.font-thin { font-weight: 100; }
+.font-extralight { font-weight: 200; }
+.font-light { font-weight: 300; }
+.font-normal { font-weight: 400; }
+.font-medium { font-weight: 500; }
+.font-semibold { font-weight: 600; }
+.font-bold { font-weight: 700; }
+.font-extrabold { font-weight: 800; }
+.font-black { font-weight: 900; }
+
+/* Typography - Letter Spacing */
+.tracking-tighter { letter-spacing: -0.05em; }
+.tracking-tight { letter-spacing: -0.025em; }
+.tracking-normal { letter-spacing: 0em; }
+.tracking-wide { letter-spacing: 0.025em; }
+.tracking-wider { letter-spacing: 0.05em; }
+.tracking-widest { letter-spacing: 0.1em; }
+.tracking-[0.04em] { letter-spacing: 0.04em; }
+.tracking-[0.08em] { letter-spacing: 0.08em; }
+.tracking-[0.1em] { letter-spacing: 0.1em; }
+.tracking-[0.15em] { letter-spacing: 0.15em; }
+.tracking-[0.3em] { letter-spacing: 0.3em; }
+
+/* Typography - Line Height */
+.leading-3 { line-height: .75rem; }
+.leading-4 { line-height: 1rem; }
+.leading-5 { line-height: 1.25rem; }
+.leading-6 { line-height: 1.5rem; }
+.leading-7 { line-height: 1.75rem; }
+.leading-8 { line-height: 2rem; }
+.leading-9 { line-height: 2.25rem; }
+.leading-10 { line-height: 2.5rem; }
+.leading-none { line-height: 1; }
+.leading-tight { line-height: 1.25; }
+.leading-snug { line-height: 1.375; }
+.leading-normal { line-height: 1.5; }
+.leading-relaxed { line-height: 1.625; }
+.leading-loose { line-height: 2; }
+
+/* Typography - Text Align */
+.text-left { text-align: left; }
+.text-center { text-align: center; }
+.text-right { text-align: right; }
+.text-justify { text-align: justify; }
+.text-start { text-align: start; }
+.text-end { text-align: end; }
+
+/* Typography - Text Transform */
+.uppercase { text-transform: uppercase; }
+.lowercase { text-transform: lowercase; }
+.capitalize { text-transform: capitalize; }
+.normal-case { text-transform: none; }
 
+/* Typography - Text Decoration */
+.underline { text-decoration-line: underline; }
+.overline { text-decoration-line: overline; }
+.line-through { text-decoration-line: line-through; }
+.no-underline { text-decoration-line: none; }
+.underline-offset-1 { text-underline-offset: 1px; }
+.underline-offset-2 { text-underline-offset: 2px; }
+.underline-offset-3 { text-underline-offset: 3px; }
+.underline-offset-4 { text-underline-offset: 4px; }
+.underline-offset-8 { text-underline-offset: 8px; }
+
+/* Typography - Text Overflow */
+.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.text-ellipsis { text-overflow: ellipsis; }
+.text-clip { text-overflow: clip; }
+.whitespace-normal { white-space: normal; }
+.whitespace-nowrap { white-space: nowrap; }
+.whitespace-pre { white-space: pre; }
+.whitespace-pre-line { white-space: pre-line; }
+.whitespace-pre-wrap { white-space: pre-wrap; }
+.break-normal { overflow-wrap: normal; word-break: normal; }
+.break-words { overflow-wrap: break-word; }
+.break-all { word-break: break-all; }
+.break-keep { word-break: keep-all; }
+
+/* Typography - Others */
+.text-balance { text-wrap: balance; }
+.text-pretty { text-wrap: pretty; }
+.tabular-nums { font-variant-numeric: tabular-nums; }
+.select-none { user-select: none; }
+.select-text { user-select: text; }
+.select-all { user-select: all; }
+.select-auto { user-select: auto; }
+`;
+var FORMANT_UTILITY_CSS_PART2 = `
+/* Opacity */
+.opacity-0 { opacity: 0; }
+.opacity-5 { opacity: 0.05; }
+.opacity-10 { opacity: 0.1; }
+.opacity-15 { opacity: 0.15; }
+.opacity-20 { opacity: 0.2; }
+.opacity-25 { opacity: 0.25; }
+.opacity-30 { opacity: 0.3; }
+.opacity-35 { opacity: 0.35; }
+.opacity-40 { opacity: 0.4; }
+.opacity-45 { opacity: 0.45; }
+.opacity-50 { opacity: 0.5; }
+.opacity-55 { opacity: 0.55; }
+.opacity-60 { opacity: 0.6; }
+.opacity-65 { opacity: 0.65; }
+.opacity-70 { opacity: 0.7; }
+.opacity-75 { opacity: 0.75; }
+.opacity-80 { opacity: 0.8; }
+.opacity-85 { opacity: 0.85; }
+.opacity-90 { opacity: 0.9; }
+.opacity-95 { opacity: 0.95; }
+.opacity-100 { opacity: 1; }
+
+/* Shadow */
+.shadow-none { box-shadow: none; }
+.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
+.shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); }
+.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
+.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
+.shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); }
+.shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }
+.shadow-inner { box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05); }
+
+/* Ring */
+.ring-0 { box-shadow: 0 0 0 0px; }
+.ring-1 { box-shadow: 0 0 0 1px; }
+.ring-2 { box-shadow: 0 0 0 2px; }
+.ring-3 { box-shadow: 0 0 0 3px; }
+.ring-4 { box-shadow: 0 0 0 4px; }
+.ring { box-shadow: 0 0 0 3px; }
+.ring-offset-0 { --tw-ring-offset-width: 0px; }
+.ring-offset-1 { --tw-ring-offset-width: 1px; }
+.ring-offset-2 { --tw-ring-offset-width: 2px; }
+.ring-offset-4 { --tw-ring-offset-width: 4px; }
+.ring-offset-8 { --tw-ring-offset-width: 8px; }
+.ring-offset-background { --tw-ring-offset-color: var(--background); }
+.ring-background { --tw-ring-color: var(--background); }
+.ring-ring { --tw-ring-color: var(--ring); }
+
+/* Backdrop Blur */
+.backdrop-blur-sm { backdrop-filter: blur(4px); }
+.backdrop-blur { backdrop-filter: blur(8px); }
+.backdrop-blur-md { backdrop-filter: blur(12px); }
+.backdrop-blur-lg { backdrop-filter: blur(16px); }
+.backdrop-blur-xl { backdrop-filter: blur(24px); }
+
+/* Transitions */
+.transition-none { transition-property: none; }
+.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
+.transition-colors { transition-property: background-color, border-color, color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
+.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
+.transition-shadow { transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
+.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
+.duration-0 { transition-duration: 0s; }
+.duration-75 { transition-duration: 75ms; }
+.duration-100 { transition-duration: 100ms; }
+.duration-150 { transition-duration: 150ms; }
+.duration-200 { transition-duration: 200ms; }
+.duration-300 { transition-duration: 300ms; }
+.duration-500 { transition-duration: 500ms; }
+.duration-700 { transition-duration: 700ms; }
+.duration-1000 { transition-duration: 1000ms; }
+.ease-linear { transition-timing-function: linear; }
+.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
+.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
+.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
+
+/* Animations */
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+@keyframes ping {
+  75%, 100% { transform: scale(2); opacity: 0; }
+}
+@keyframes pulse {
+  50% { opacity: .5; }
+}
+@keyframes bounce {
+  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); }
+  50% { transform: translateY(0); animation-timing-function: cubic-bezier(0,0,0.2,1); }
+}
+@keyframes caret-blink {
+  0%, 70%, 100% { opacity: 1; }
+  20%, 50% { opacity: 0; }
+}
+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(24px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+@keyframes zoomIn {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+@keyframes zoomOut {
+  from { opacity: 1; transform: scale(1); }
+  to { opacity: 0; transform: scale(0.95); }
+}
+@keyframes accordion-down {
+  from { height: 0; }
+  to { height: var(--radix-accordion-content-height); }
+}
+@keyframes accordion-up {
+  from { height: var(--radix-accordion-content-height); }
+  to { height: 0; }
+}
+
+.animate-spin { animation: spin 1s linear infinite; }
+.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
+.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+.animate-bounce { animation: bounce 1s infinite; }
+.animate-caret-blink { animation: caret-blink 1s infinite; }
+.animate-fade-up { animation: fadeUp 0.7s ease forwards; }
+.animate-fade-in { animation: fadeIn 0.15s ease-out; }
+.animate-fade-out { animation: fadeOut 0.15s ease-out; }
+.animate-zoom-in { animation: zoomIn 0.15s ease-out; }
+.animate-zoom-out { animation: zoomOut 0.15s ease-out; }
+.animate-accordion-down { animation: accordion-down 0.2s ease-out; }
+.animate-accordion-up { animation: accordion-up 0.2s ease-out; }
+
+/* Transforms */
+.transform { transform: translateX(var(--tw-translate-x, 0)) translateY(var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1)); }
+.transform-none { transform: none; }
+.translate-x-0 { --tw-translate-x: 0; }
+.translate-x-1 { --tw-translate-x: 0.25rem; }
+.translate-x-1_2 { --tw-translate-x: 50%; }
+.translate-x-full { --tw-translate-x: 100%; }
+.-translate-x-1 { --tw-translate-x: -0.25rem; }
+.-translate-x-1_2 { --tw-translate-x: -50%; }
+.-translate-x-full { --tw-translate-x: -100%; }
+.translate-y-0 { --tw-translate-y: 0; }
+.translate-y-1 { --tw-translate-y: 0.25rem; }
+.translate-y-4 { --tw-translate-y: 1rem; }
+.-translate-y-1 { --tw-translate-y: -0.25rem; }
+.-translate-y-1_2 { --tw-translate-y: -50%; }
+.-translate-y-full { --tw-translate-y: -100%; }
+.rotate-0 { --tw-rotate: 0deg; }
+.rotate-45 { --tw-rotate: 45deg; }
+.rotate-90 { --tw-rotate: 90deg; }
+.rotate-180 { --tw-rotate: 180deg; }
+.scale-0 { --tw-scale-x: 0; --tw-scale-y: 0; }
+.scale-50 { --tw-scale-x: .5; --tw-scale-y: .5; }
+.scale-75 { --tw-scale-x: .75; --tw-scale-y: .75; }
+.scale-95 { --tw-scale-x: .95; --tw-scale-y: .95; }
+.scale-100 { --tw-scale-x: 1; --tw-scale-y: 1; }
+.scale-105 { --tw-scale-x: 1.05; --tw-scale-y: 1.05; }
+.scale-110 { --tw-scale-x: 1.1; --tw-scale-y: 1.1; }
+.scale-125 { --tw-scale-x: 1.25; --tw-scale-y: 1.25; }
+
+/* Z-Index */
+.z-0 { z-index: 0; }
+.z-10 { z-index: 10; }
+.z-1 { z-index: 1; }
+.z-50 { z-index: 50; }
+.z-auto { z-index: auto; }
+.isolate { isolation: isolate; }
+.isolation-auto { isolation: auto; }
+
+/* Overflow */
+.overflow-auto { overflow: auto; }
+.overflow-hidden { overflow: hidden; }
+.overflow-clip { overflow: clip; }
+.overflow-visible { overflow: visible; }
+.overflow-scroll { overflow: scroll; }
+.overflow-x-auto { overflow-x: auto; }
+.overflow-x-hidden { overflow-x: hidden; }
+.overflow-x-clip { overflow-x: clip; }
+.overflow-x-visible { overflow-x: visible; }
+.overflow-x-scroll { overflow-x: scroll; }
+.overflow-y-auto { overflow-y: auto; }
+.overflow-y-hidden { overflow-y: hidden; }
+.overflow-y-clip { overflow-y: clip; }
+.overflow-y-visible { overflow-y: visible; }
+.overflow-y-scroll { overflow-y: scroll; }
+
+/* Positioning */
+.static { position: static; }
+.fixed { position: fixed; }
+.absolute { position: absolute; }
+.relative { position: relative; }
+.sticky { position: sticky; }
+.inset-0 { inset: 0px; }
+.inset-1 { inset: 0.25rem; }
+.inset-2 { inset: 0.5rem; }
+.inset-3 { inset: 0.75rem; }
+.inset-4 { inset: 1rem; }
+.inset-auto { inset: auto; }
+.inset-x-0 { left: 0px; right: 0px; }
+.inset-x-1 { left: 0.25rem; right: 0.25rem; }
+.inset-x-2 { left: 0.5rem; right: 0.5rem; }
+.inset-x-3 { left: 0.75rem; right: 0.75rem; }
+.inset-x-4 { left: 1rem; right: 1rem; }
+.inset-y-0 { top: 0px; bottom: 0px; }
+.inset-y-1 { top: 0.25rem; bottom: 0.25rem; }
+.inset-y-2 { top: 0.5rem; bottom: 0.5rem; }
+.inset-y-3 { top: 0.75rem; bottom: 0.75rem; }
+.inset-y-4 { top: 1rem; bottom: 1rem; }
+.-inset-1 { inset: -0.25rem; }
+.-inset-2 { inset: -0.5rem; }
+.-inset-3 { inset: -0.75rem; }
+.-inset-4 { inset: -1rem; }
+.-inset-x-3 { left: -0.75rem; right: -0.75rem; }
+.-inset-y-2 { top: -0.5rem; bottom: -0.5rem; }
+.top-0 { top: 0px; }
+.top-1 { top: 0.25rem; }
+.top-1_2 { top: 50%; }
+.top-2 { top: 0.5rem; }
+.top-2_5 { top: 0.625rem; }
+.top-3 { top: 0.75rem; }
+.top-4 { top: 1rem; }
+.top-5 { top: 1.25rem; }
+.top-6 { top: 1.5rem; }
+.top-8 { top: 2rem; }
+.top-10 { top: 2.5rem; }
+.top-12 { top: 3rem; }
+.top-24 { top: 6rem; }
+.top-full { top: 100%; }
+.right-0 { right: 0px; }
+.right-1 { right: 0.25rem; }
+.right-2 { right: 0.5rem; }
+.right-3 { right: 0.75rem; }
+.right-4 { right: 1rem; }
+.bottom-0 { bottom: 0px; }
+.bottom-3 { bottom: 0.75rem; }
+.bottom-4 { bottom: 1rem; }
+.bottom-12 { bottom: 3rem; }
+.bottom-full { bottom: 100%; }
+.left-0 { left: 0px; }
+.left-1 { left: 0.25rem; }
+.left-1_2 { left: 50%; }
+.left-1_5 { left: 0.375rem; }
+.left-2 { left: 0.5rem; }
+.left-3 { left: 0.75rem; }
+.left-4 { left: 1rem; }
+.left-12 { left: 3rem; }
+.left-full { left: 100%; }
+.-left-12 { left: -3rem; }
+.-right-12 { right: -3rem; }
+.-top-12 { top: -3rem; }
+.-bottom-12 { bottom: -3rem; }
+
+/* Interactivity */
+.cursor-auto { cursor: auto; }
+.cursor-default { cursor: default; }
+.cursor-pointer { cursor: pointer; }
+.cursor-wait { cursor: wait; }
+.cursor-text { cursor: text; }
+.cursor-move { cursor: move; }
+.cursor-help { cursor: help; }
+.cursor-not-allowed { cursor: not-allowed; }
+.cursor-none { cursor: none; }
+.cursor-progress { cursor: progress; }
+.pointer-events-none { pointer-events: none; }
+.pointer-events-auto { pointer-events: auto; }
+.touch-manipulation { touch-action: manipulation; }
+.resize-none { resize: none; }
+.resize-y { resize: vertical; }
+.resize-x { resize: horizontal; }
+.resize { resize: both; }
+.scroll-py-1 { scroll-padding-top: 0.25rem; scroll-padding-bottom: 0.25rem; }
+.scroll-my-1 { scroll-margin-top: 0.25rem; scroll-margin-bottom: 0.25rem; }
+
+/* Accessibility */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/* Outline */
+.outline-none { outline: 2px solid transparent; outline-offset: 2px; }
+.outline-hidden { outline-style: none; }
+.outline-1 { outline-width: 1px; }
+.outline-2 { outline-width: 2px; }
+.outline-4 { outline-width: 4px; }
+.outline { outline-width: 3px; }
+
+/* Focus Visible */
+.focus-visible:outline-none:focus-visible { outline: 2px solid transparent; outline-offset: 2px; }
+.focus-visible:outline-1:focus-visible { outline-width: 1px; }
+.focus-visible:outline-ring:focus-visible { outline-color: var(--ring); }
+.focus-visible:ring-1:focus-visible { box-shadow: 0 0 0 1px; }
+.focus-visible:ring-2:focus-visible { box-shadow: 0 0 0 2px; }
+.focus-visible:ring-3:focus-visible { box-shadow: 0 0 0 3px; }
+.focus-visible:ring-ring:focus-visible { box-shadow: 0 0 0 3px var(--ring); }
+.focus-visible:ring-ring/50:focus-visible { box-shadow: 0 0 0 3px rgba(172, 195, 179, 0.5); }
+.focus-visible:border-ring:focus-visible { border-color: var(--ring); }
+
+/* Visibility */
+.visible { visibility: visible; }
+.invisible { visibility: hidden; }
+.collapse { visibility: collapse; }
+
+/* Aspect Ratio */
+.aspect-auto { aspect-ratio: auto; }
+.aspect-square { aspect-ratio: 1 / 1; }
+.aspect-video { aspect-ratio: 16 / 9; }
+
+/* Object Fit/Position */
+.object-contain { object-fit: contain; }
+.object-cover { object-fit: cover; }
+.object-fill { object-fit: fill; }
+.object-none { object-fit: none; }
+.object-scale-down { object-fit: scale-down; }
+.object-bottom { object-position: bottom; }
+.object-center { object-position: center; }
+.object-left { object-position: left; }
+.object-left-bottom { object-position: left bottom; }
+.object-left-top { object-position: left top; }
+.object-right { object-position: right; }
+.object-right-bottom { object-position: right bottom; }
+.object-right-top { object-position: right top; }
+.object-top { object-position: top; }
+
+/* List Style */
+.list-none { list-style-type: none; }
+.list-disc { list-style-type: disc; }
+.list-decimal { list-style-type: decimal; }
+
+/* Scrollbar */
+.no-scrollbar::-webkit-scrollbar { display: none; }
+.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+`;
+var FORMANT_UTILITY_CSS_PART3 = `
+/* Data attribute selectors */
+.data-open:animate-in[data-state="open"],
+.data-open:animate-in[data-open="true"] { animation: fadeIn 0.15s ease-out, zoomIn 0.15s ease-out; }
+.data-closed:animate-out[data-state="closed"],
+.data-closed:animate-out[data-open="false"] { animation: fadeOut 0.15s ease-out, zoomOut 0.15s ease-out; }
+.data-open:fade-in-0[data-state="open"] { animation: fadeIn 0.15s ease-out; }
+.data-closed:fade-out-0[data-state="closed"] { animation: fadeOut 0.15s ease-out; }
+.data-open:zoom-in-95[data-state="open"] { animation: zoomIn 0.15s ease-out; }
+.data-closed:zoom-out-95[data-state="closed"] { animation: zoomOut 0.15s ease-out; }
+.data-[side=bottom]:slide-in-from-top-2[data-side="bottom"] { animation: slideInFromTop 0.2s ease-out; }
+.data-[side=left]:slide-in-from-right-2[data-side="left"] { animation: slideInFromRight 0.2s ease-out; }
+.data-[side=right]:slide-in-from-left-2[data-side="right"] { animation: slideInFromLeft 0.2s ease-out; }
+.data-[side=top]:slide-in-from-bottom-2[data-side="top"] { animation: slideInFromBottom 0.2s ease-out; }
+.data-[state=visible]:animate-in[data-state="visible"] { animation: fadeIn 0.15s ease-out; }
+.data-[state=hidden]:animate-out[data-state="hidden"] { animation: fadeOut 0.15s ease-out; }
+.data-disabled:pointer-events-none[data-disabled="true"] { pointer-events: none; }
+.data-disabled:opacity-50[data-disabled="true"] { opacity: 0.5; }
+.data-selected:bg-muted[data-selected="true"] { background-color: var(--muted); }
+.data-selected:text-foreground[data-selected="true"] { color: var(--foreground); }
+.data-[disabled=true]:pointer-events-none[data-disabled="true"] { pointer-events: none; }
+.data-[disabled=true]:opacity-50[data-disabled="true"] { opacity: 0.5; }
+
+/* ARIA selectors */
+.aria-invalid:border-destructive[aria-invalid="true"] { border-color: var(--destructive); }
+.aria-invalid:ring-2[aria-invalid="true"] { box-shadow: 0 0 0 2px; }
+.aria-invalid:ring-destructive-20[aria-invalid="true"] { box-shadow: 0 0 0 2px rgba(232, 171, 127, 0.2); }
+.aria-invalid:ring-destructive/20[aria-invalid="true"] { box-shadow: 0 0 0 2px rgba(232, 171, 127, 0.2); }
+.aria-disabled:opacity-50[aria-disabled="true"] { opacity: 0.5; }
+
+/* Disabled selectors */
+.disabled:pointer-events-none:disabled { pointer-events: none; }
+.disabled:opacity-50:disabled { opacity: 0.5; }
+.disabled:cursor-not-allowed:disabled { cursor: not-allowed; }
+
+/* Focus selectors */
+.focus:bg-accent:focus { background-color: var(--accent); }
+.focus:text-accent-foreground:focus { color: var(--accent-foreground); }
+.focus:ring-2:focus { box-shadow: 0 0 0 2px; }
+.focus:z-10:focus { z-index: 10; }
+
+/* Hover selectors */
+.hover:bg-muted:hover { background-color: var(--muted); }
+.hover:text-foreground:hover { color: var(--foreground); }
+.hover:underline:hover { text-decoration-line: underline; }
+.hover:opacity-90:hover { opacity: 0.9; }
+.hover:ring-3:hover { box-shadow: 0 0 0 3px; }
+
+/* Active selectors */
+.active:translate-y-px:active { transform: translateY(1px); }
+
+/* Has selectors */
+.has-[>svg]:pl-10:has(>svg) { padding-left: 2.5rem; }
+.has-data-[slot=card-footer]:pb-0:has([data-slot="card-footer"]) { padding-bottom: 0; }
+.has-data-[slot=card-action]:grid-cols-[1fr_auto]:has([data-slot="card-action"]) { grid-template-columns: 1fr auto; }
+.has-data-[slot=card-description]:grid-rows-[auto_auto]:has([data-slot="card-description"]) { grid-template-rows: auto auto; }
+.has-[>img:first-child]:pt-0:has(>img:first-child) { padding-top: 0; }
+.has-aria-expanded:bg-muted-50:has([aria-expanded="true"]) { background-color: rgba(32, 36, 40, 0.5); }
+
+/* Group selectors */
+.group:hover .group-hover:opacity-100 { opacity: 1; }
+
+/* Complex child selectors */
+.[&_svg]:pointer-events-none svg { pointer-events: none; }
+.[&_svg]:shrink-0 svg { flex-shrink: 0; }
+.[&_svg]:size-3 svg { width: 0.75rem; height: 0.75rem; }
+.[&_svg]:size-4 svg { width: 1rem; height: 1rem; }
+.[&_svg]:text-muted-foreground svg { color: var(--muted-foreground); }
+.[&_svg:not([class*='size-'])]:size-4 svg:not([class*="size-"]) { width: 1rem; height: 1rem; }
+.[&>svg:not([class*='size-'])]:size-4 > svg:not([class*="size-"]) { width: 1rem; height: 1rem; }
+.[&>svg]:h-2_5 > svg { height: 0.625rem; }
+.[&>svg]:w-2_5 > svg { width: 0.625rem; }
+.[&>svg]:h-3 > svg { height: 0.75rem; }
+.[&>svg]:w-3 > svg { width: 0.75rem; }
+.[&>svg]:text-muted-foreground > svg { color: var(--muted-foreground); }
+.[&_p:not(:last-child)]:mb-4 p:not(:last-child) { margin-bottom: 1rem; }
+.[&_a]:underline a { text-decoration-line: underline; }
+.[&_a]:underline-offset-3 a { text-underline-offset: 3px; }
+.[&_a]:hover:text-foreground a:hover { color: var(--foreground); }
+
+/* Responsive variants */
+@media (min-width: 640px) {
+  .sm:flex { display: flex; }
+  .sm:grid { display: grid; }
+  .sm:hidden { display: none; }
+  .sm:w-auto { width: auto; }
+  .sm:max-w-sm { max-width: 24rem; }
+  .sm:flex-row { flex-direction: row; }
+  .sm:flex-col { flex-direction: column; }
+  .sm:justify-end { justify-content: flex-end; }
+  .sm:text-left { text-align: left; }
+  .sm:block { display: block; }
+  .sm:gap-3 { gap: 0.75rem; }
+  .sm:rounded-lg { border-radius: var(--radius-lg); }
+  .sm:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
+  .sm:py-4 { padding-top: 1rem; padding-bottom: 1rem; }
+  .sm:p-4 { padding: 1rem; }
+  .sm:pr-1_5 { padding-right: 0.375rem; }
+  .sm:pl-1_5 { padding-left: 0.375rem; }
+}
+
+@media (min-width: 768px) {
+  .md:absolute { position: absolute; }
+  .md:flex-row { flex-direction: row; }
+  .md:w-auto { width: auto; }
+  .md:text-pretty { text-wrap: pretty; }
+  .md:gap-0_5 { gap: 0.125rem; }
+  .md:text-left { text-align: left; }
+}
+
+@media (min-width: 1024px) {
+  .lg:flex { display: flex; }
+  .lg:flex-row { flex-direction: row; }
+  .lg:w-[400px] { width: 400px; }
+  .lg:w-[420px] { width: 420px; }
+}
+
+/* In-data selectors */
+.in-data-[slot=card-content]:bg-transparent[data-slot="card-content"] { background-color: transparent; }
+.in-data-[slot=popover-content]:bg-transparent[data-slot="popover-content"] { background-color: transparent; }
+.in-data-[slot=dialog-content]:rounded-lg[data-slot="dialog-content"] { border-radius: var(--radius-lg); }
+.in-data-[slot=combobox-content]:focus-within:border-inherit[data-slot="combobox-content"]:focus-within { border-color: inherit; }
+.in-data-[slot=combobox-content]:focus-within:ring-0[data-slot="combobox-content"]:focus-within { box-shadow: none; }
+
+/* Formant Animation Utilities */
 @keyframes fadeUp {
   from { opacity: 0; transform: translateY(24px); }
   to { opacity: 1; transform: translateY(0); }
@@ -4035,6 +5018,7 @@ code, pre, .font-mono {
   animation: fadeUp 0.7s ease forwards;
 }
 
+/* Formant Section Label Style */
 .section-label {
   font-family: 'JetBrains Mono', monospace;
   font-size: 10px;
@@ -4054,19 +5038,49 @@ code, pre, .font-mono {
   background: #E8AB7F;
 }
 
+/* Custom scrollbar for dark theme */
 ::-webkit-scrollbar { width: 8px; height: 8px; }
 ::-webkit-scrollbar-track { background: #0A0F11; }
 ::-webkit-scrollbar-thumb { background: #4B5E53; border-radius: 4px; }
 ::-webkit-scrollbar-thumb:hover { background: #ACC3B3; }
+
+/* Origin utilities */
+.origin-(--radix-context-menu-content-transform-origin) { transform-origin: var(--radix-context-menu-content-transform-origin); }
+.origin-(--radix-dropdown-menu-content-transform-origin) { transform-origin: var(--radix-dropdown-menu-content-transform-origin); }
+.origin-(--radix-hover-card-content-transform-origin) { transform-origin: var(--radix-hover-card-content-transform-origin); }
+.origin-(--radix-popover-content-transform-origin) { transform-origin: var(--radix-popover-content-transform-origin); }
+.origin-(--radix-select-content-transform-origin) { transform-origin: var(--radix-select-content-transform-origin); }
+.origin-top-center { transform-origin: top center; }
+
+/* Utility for height with CSS variable */
+.h-(--radix-accordion-content-height) { height: var(--radix-accordion-content-height); }
+
+/* Size with CSS variable */
+.size-(--cell-size) { width: var(--cell-size); height: var(--cell-size); }
+
+/* Border radius with CSS variable */
+.rounded-(--cell-radius) { border-radius: var(--cell-radius); }
+
+/* Specific component utility overrides */
+.bg-blend-color { background-blend-mode: color; }
+.mix-blend-darken { mix-blend-mode: darken; }
+.mix-blend-lighten { mix-blend-mode: lighten; }
+
+/* Additional specific styles */
+@keyframes slideInFromTop { from { transform: translateY(-100%); } to { transform: translateY(0); } }
+@keyframes slideInFromBottom { from { transform: translateY(100%); } to { transform: translateY(0); } }
+@keyframes slideInFromLeft { from { transform: translateX(-100%); } to { transform: translateX(0); } }
+@keyframes slideInFromRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
 `;
+var FORMANT_COMPLETE_CSS = FORMANT_UTILITY_CSS + FORMANT_UTILITY_CSS_PART2 + FORMANT_UTILITY_CSS_PART3;
 function FormantAesthetics({ children }) {
   return /* @__PURE__ */ jsxs(ThemeProvider, { children: [
     /* @__PURE__ */ jsx("link", { rel: "stylesheet", href: FORMANT_FONTS }),
-    /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: FORMANT_THEME_CSS } }),
+    /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: FORMANT_COMPLETE_CSS } }),
     children
   ] });
 }
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FormantAesthetics, FormantLogo, FormantLogoWithText, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Skeleton, Slider, Toaster as Sonner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, Toggle, ToggleGroup, ToggleGroupItem, Tooltip2 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, navigationMenuTriggerStyle, toggleVariants };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FORMANT_COMPLETE_CSS, FORMANT_FONTS, FormantAesthetics, FormantLogo, FormantLogoWithText, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Skeleton, Slider, Toaster as Sonner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, Toggle, ToggleGroup, ToggleGroupItem, Tooltip2 as Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cn, navigationMenuTriggerStyle, toggleVariants };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map