react-marketing-ui 0.0.2 → 0.0.4

package/dist/index.mjs

@@ -1,34 +1,2644 @@
-export { ArrowLeft, ArrowRight, FlowDiamond, FlowNode, FlowPill, JoinArrow, SplitArrow, TurnDown } from './chunk-KNPOZ34H.mjs';
-export { NavigationMenu, NavigationMenuArrow, NavigationMenuBackdrop, NavigationMenuContent, NavigationMenuIcon, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPortal, NavigationMenuSub, NavigationMenuSubTrigger, NavigationMenuTrigger, NavigationMenuViewport } from './chunk-AYLCYDUM.mjs';
-export { navigationMenuSubTriggerStyle, navigationMenuTriggerStyle } from './chunk-KBHYXLRG.mjs';
-export { ArrowSvg, ChevronDownIcon, ChevronRightIcon } from './chunk-JVXJ6SFX.mjs';
-export { BREAKPOINTS, getBreakpoint, onBreakpointChange, useBreakpoint } from './chunk-IHLGCS63.mjs';
-export { PasswordInput } from './chunk-VJENJHXJ.mjs';
-export { Input } from './chunk-W22G7XHR.mjs';
-export { RangeSlider } from './chunk-4PBVBXGY.mjs';
-export { SavingsBadge } from './chunk-6MB4UKRX.mjs';
-export { ThemeToggle } from './chunk-KMXUQYR3.mjs';
-export { Button } from './chunk-AYY7D2RJ.mjs';
-export { ActionSwapRollIcon, ActionSwapRollText } from './chunk-DA3I3Y5O.mjs';
-export { grainient_default as Grainient } from './chunk-CTZEI2YS.mjs';
-export { DiaTextReveal } from './chunk-YKGP5JIL.mjs';
-export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger } from './chunk-KRNWCJ4D.mjs';
-export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-YM3U2OBE.mjs';
-export { solidSurface } from './chunk-XZEDZVXT.mjs';
-export { AnimatedBeam } from './chunk-M5MESV26.mjs';
-export { GlossyButton, glossyButtonVariants } from './chunk-WDR5VPZJ.mjs';
-export { FeatureCard } from './chunk-3SB6HUBA.mjs';
-export { RollingBadge } from './chunk-TPGLLSYV.mjs';
-export { ElevatedInput } from './chunk-6T5LR34O.mjs';
-export { SparklesText } from './chunk-OCZFHVVD.mjs';
-export { RainbowButton, rainbowButtonVariants } from './chunk-4VCFWVSJ.mjs';
-export { ShineBorder } from './chunk-R2E2J42H.mjs';
-export { LiquidMetal } from './chunk-WLUGKBH7.mjs';
-export { Tabs } from './chunk-MJYBPJBA.mjs';
-export { Highlighter } from './chunk-5QQAPGR2.mjs';
-import './chunk-EYHT2EWJ.mjs';
-export { cn, hasKey, noop, validCssVars } from './chunk-QAWSH567.mjs';
-export { FadeIn, Stagger, StaggerItem } from './chunk-WYJYLDUA.mjs';
-export { EASE_OUT, EASE_OUT_CSS, SPRING_SWAP, easeOut, easeOutBack } from './chunk-NNHPQ67J.mjs';
+"use client";
+import { Accordion as Accordion$1 } from '@base-ui/react/accordion';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useReducedMotion, AnimatePresence, motion, useInView, useSpring, useTransform } from 'framer-motion';
+import { createContext, useRef, useState, useLayoutEffect, useId, useEffect, useMemo, useCallback, useContext, useSyncExternalStore } from 'react';
+import { cva } from 'class-variance-authority';
+import { Renderer, Triangle, Mesh, Program } from 'ogl';
+import { annotate } from 'rough-notation';
+import { LiquidMetal as LiquidMetal$1 } from '@paper-design/shaders-react';
+import { NavigationMenu as NavigationMenu$1 } from '@base-ui/react/navigation-menu';
+import { Slot } from '@radix-ui/react-slot';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function validCssVars(style) {
+  return style;
+}
+function hasKey(key, obj) {
+  return obj !== null && typeof obj === "object" && Object.hasOwn(obj, key);
+}
+function noop() {
+}
+function Accordion({
+  className,
+  multiple = false,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Accordion$1.Root,
+    {
+      "data-slot": "accordion",
+      "data-variant": variant,
+      multiple,
+      className: cn(
+        "group flex w-full flex-col",
+        variant === "split" && "space-y-2",
+        variant === "outline" && "overflow-hidden rounded-lg border bg-(--surface)",
+        variant === "nested" && "rounded-lg border bg-muted p-1",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AccordionItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Accordion$1.Item,
+    {
+      "data-slot": "accordion-item",
+      className: cn(
+        "transition-[margin,border-radius,border] duration-250 ease-out-expo",
+        // Default variant styles
+        "group-data-[variant=default]:border-(--border) group-data-[variant=default]:border-b group-data-[variant=default]:last:border-b-0",
+        // Split variant styles (individual cards)
+        "group-data-[variant=split]:overflow-hidden group-data-[variant=split]:rounded-lg group-data-[variant=split]:border group-data-[variant=split]:border-(--border) group-data-[variant=split]:bg-(--surface)",
+        // Outline variant styles (items within single card)
+        "group-data-[variant=outline]:border-(--border) group-data-[variant=outline]:border-b group-data-[variant=outline]:last:border-b-0",
+        // Nested variant styles - items within the single outer card
+        "group-data-[variant=nested]:mt-0.5 group-data-[variant=nested]:first:mt-0",
+        // Isolated bordered variant styles - dynamically separates open items from closed ones
+        // Base styles: all items have borders and background to look like cards
+        "group-data-[variant=isolated-bordered]:overflow-hidden group-data-[variant=isolated-bordered]:border group-data-[variant=isolated-bordered]:border-(--border) group-data-[variant=isolated-bordered]:bg-(--surface)",
+        // Closed items: group together by overlapping borders with negative margin
+        // Only apply to closed items that follow another closed item (not open items, first item, or items after open items)
+        "group-data-[variant=isolated-bordered]:relative group-data-[variant=isolated-bordered]:not-first:not-data-open:not-[[data-open]+&]:-mt-px",
+        // Opened item - separated with margins
+        "group-data-[variant=isolated-bordered]:data-open:mt-2 group-data-[variant=isolated-bordered]:data-open:mb-2 group-data-[variant=isolated-bordered]:data-open:rounded-lg",
+        // First item
+        "group-data-[variant=isolated-bordered]:first:rounded-t-lg group-data-[variant=isolated-bordered]:data-open:first:mt-0",
+        // Last item
+        "group-data-[variant=isolated-bordered]:last:rounded-b-lg group-data-[variant=isolated-bordered]:data-open:last:mb-0",
+        // Item after open item: round top corners (start of new group)
+        "group-data-[variant=isolated-bordered]:[[data-open]+&]:rounded-t-lg",
+        // Item before open item: round bottom corners (end of group)
+        "group-data-[variant=isolated-bordered]:[&:has(+_[data-open])]:rounded-b-lg",
+        // Isolated filled variant
+        "group-data-[variant=isolated-filled]:overflow-hidden group-data-[variant=isolated-filled]:bg-muted",
+        // Opened item - separated with margins and rounded
+        "group-data-[variant=isolated-filled]:data-open:my-2 group-data-[variant=isolated-filled]:data-open:rounded-lg",
+        // First item
+        "group-data-[variant=isolated-filled]:first:rounded-t-lg group-data-[variant=isolated-filled]:data-open:first:mt-0",
+        // Last item
+        "group-data-[variant=isolated-filled]:last:rounded-b-lg group-data-[variant=isolated-filled]:data-open:last:mb-0",
+        // Item after open item: round top corners (start of new group)
+        "group-data-[variant=isolated-filled]:[[data-open]+&]:rounded-t-lg",
+        // Item before open item: round bottom corners (end of group)
+        "group-data-[variant=isolated-filled]:[&:has(+_[data-open])]:rounded-b-lg",
+        // Isolated filled bordered variant - filled background with borders between closed items
+        "group-data-[variant=isolated-filled-bordered]:overflow-hidden group-data-[variant=isolated-filled-bordered]:bg-muted",
+        // All items except last have border-bottom to prevent layout shift, default to visible border
+        "group-data-[variant=isolated-filled-bordered]:not-last:border-(--border) group-data-[variant=isolated-filled-bordered]:not-last:border-b",
+        // Make border transparent (invisible) for: items before open items, and open items themselves
+        "group-data-[variant=isolated-filled-bordered]:[&:has(+_[data-open])]:border-transparent",
+        "group-data-[variant=isolated-filled-bordered]:data-open:border-transparent",
+        // Opened item - separated with margins and rounded
+        "group-data-[variant=isolated-filled-bordered]:data-open:my-2 group-data-[variant=isolated-filled-bordered]:data-open:rounded-lg",
+        // First item
+        "group-data-[variant=isolated-filled-bordered]:first:rounded-t-lg group-data-[variant=isolated-filled-bordered]:data-open:first:mt-0",
+        // Last item
+        "group-data-[variant=isolated-filled-bordered]:last:rounded-b-lg group-data-[variant=isolated-filled-bordered]:data-open:last:mb-0",
+        // Item after open item: round top corners (start of new group)
+        "group-data-[variant=isolated-filled-bordered]:[[data-open]+&]:rounded-t-lg",
+        // Item before open item: round bottom corners (end of group)
+        "group-data-[variant=isolated-filled-bordered]:[&:has(+_[data-open])]:rounded-b-lg",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AccordionHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Accordion$1.Header,
+    {
+      "data-slot": "accordion-header",
+      className: cn("not-prose", className),
+      ...props
+    }
+  );
+}
+function AccordionTrigger({
+  children,
+  className,
+  showIndicator = true,
+  indicatorType = "plus",
+  indicatorPosition = "end",
+  indicatorColor,
+  icon,
+  subtitle,
+  ...props
+}) {
+  const hasStartIndicator = showIndicator && indicatorPosition === "start";
+  const hasEndIndicator = showIndicator && indicatorPosition === "end";
+  const renderIndicator = () => {
+    if (!showIndicator) return null;
+    const indicatorClassName = cn("size-4 shrink-0 transition-transform duration-200 ease-out-expo", indicatorColor);
+    const indicatorIcon = indicatorType === "chevron" ? /* @__PURE__ */ jsx(ChevronDownIcon, { "data-slot": "accordion-indicator", className: indicatorClassName }) : /* @__PURE__ */ jsx(PlusIcon, { "data-slot": "accordion-indicator", className: indicatorClassName });
+    return /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", "aria-hidden": "true", children: indicatorIcon });
+  };
+  return /* @__PURE__ */ jsx(AccordionHeader, { children: /* @__PURE__ */ jsxs(
+    Accordion$1.Trigger,
+    {
+      "data-slot": "accordion-trigger",
+      "data-has-icon": hasStartIndicator ? "true" : void 0,
+      className: cn(
+        "group/trigger flex w-full cursor-pointer items-center justify-between gap-3 py-5 px-3.5 text-left font-medium text-sm outline-none disabled:pointer-events-none disabled:opacity-60",
+        // Default variant styles
+        "group-data-[variant=default]:px-0",
+        // Split variant styles
+        "group-data-[variant=split]:rounded-t-lg",
+        // Nested variant styles - trigger with subtle interaction
+        "group-data-[variant=nested]:rounded-sm group-data-[variant=nested]:px-3 group-data-[variant=nested]:py-2.5 group-data-[variant=nested]:hover:bg-background group-data-[variant=nested]:dark:hover:bg-background/50",
+        // Indicator rotation animations
+        indicatorType === "chevron" && "[&[data-panel-open]_[data-slot=accordion-indicator]]:rotate-180",
+        indicatorType === "plus" && "[&[data-panel-open]_[data-slot=accordion-indicator]]:rotate-90",
+        className
+      ),
+      ...props,
+      children: [
+        hasStartIndicator ? renderIndicator() : null,
+        icon && !hasStartIndicator && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", "aria-hidden": "true", children: icon }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "underline-offset-2 group-hover/trigger:underline", children }),
+          subtitle ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm no-underline", children: subtitle }) : null
+        ] }),
+        hasEndIndicator ? renderIndicator() : null
+      ]
+    }
+  ) });
+}
+function AccordionContent({ children, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Accordion$1.Panel,
+    {
+      "data-slot": "accordion-content",
+      className: cn(
+        "h-(--accordion-panel-height) overflow-hidden text-sm transition-[height,opacity] duration-250 ease-out-expo data-ending-style:h-0 data-starting-style:h-0 data-ending-style:opacity-0 data-starting-style:opacity-0"
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "p-3.5 text-muted-foreground",
+            "group-data-[variant=default]:px-0 group-data-[variant=default]:pt-0",
+            "group-data-[variant=split]:pt-0",
+            "group-data-[variant=outline]:pt-0",
+            // Nested variant
+            "group-data-[variant=nested]:mt-1 group-data-[variant=nested]:mb-0.5 group-data-[variant=nested]:rounded-sm group-data-[variant=nested]:border group-data-[variant=nested]:bg-background group-data-[variant=nested]:p-3 group-data-[variant=nested]:[[data-slot=accordion-item]:last-child_&]:mb-0",
+            // Isolated bordered variant
+            "group-data-[variant=isolated-bordered]:pt-0",
+            // Isolated filled variant
+            "group-data-[variant=isolated-filled]:pt-0",
+            // Isolated filled bordered variant
+            "group-data-[variant=isolated-filled-bordered]:pt-0",
+            // Icon alignment - add left padding when parent item contains a trigger with icon
+            "[[data-slot=accordion-item]:has([data-has-icon])_&]:pl-[calc(1rem+0.75rem)]",
+            "[[data-slot=accordion-item]:has([data-has-icon])_&]:group-data-[variant=default]:pl-[calc(1rem+0.75rem)]",
+            className
+          ),
+          children
+        }
+      )
+    }
+  );
+}
+function PlusIcon(props) {
+  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", ...props, children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M2.75 12C2.75 11.3096 3.30964 10.75 4 10.75H20C20.6904 10.75 21.25 11.3096 21.25 12C21.25 12.6904 20.6904 13.25 20 13.25H4C3.30964 13.25 2.75 12.6904 2.75 12Z",
+        fill: "currentColor",
+        className: "in-data-panel-open:opacity-0 transition-opacity duration-200 ease-out-expo"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M12 2.75C12.6904 2.75 13.25 3.30964 13.25 4V20C13.25 20.6904 12.6904 21.25 12 21.25C11.3096 21.25 10.75 20.6904 10.75 20V4C10.75 3.30964 11.3096 2.75 12 2.75Z",
+        fill: "currentColor"
+      }
+    )
+  ] });
+}
+function ChevronDownIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", ...props, children: /* @__PURE__ */ jsx("path", { d: "M1 3.5L5 7.5L9 3.5", stroke: "currentColor", strokeWidth: "1.5" }) });
+}
+
+// src/lib/ease.ts
+var easeOut = [0.22, 1, 0.36, 1];
+var easeOutBack = [0.34, 1.56, 0.64, 1];
+var EASE_OUT = [0.16, 1, 0.3, 1];
+var EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)";
+var SPRING_SWAP = { type: "spring", stiffness: 460, damping: 30, mass: 0.55 };
+var ROLL_EXIT_TRANSITION = { duration: 0.14, ease: EASE_OUT };
+var ROLL_BLUR = "blur(3px)";
+var AT_REST = { opacity: 1, y: 0, filter: "blur(0px)" };
+var TEXT_VARIANTS = {
+  initial: { opacity: 0, y: "90%", filter: ROLL_BLUR },
+  animate: { opacity: 1, y: "0%", filter: "blur(0px)", transition: SPRING_SWAP },
+  exit: { opacity: 0, y: "-90%", filter: ROLL_BLUR, transition: ROLL_EXIT_TRANSITION }
+};
+var ICON_VARIANTS = {
+  initial: { opacity: 0, y: 12, filter: ROLL_BLUR },
+  animate: { opacity: 1, y: 0, filter: "blur(0px)", transition: SPRING_SWAP },
+  exit: { opacity: 0, y: -12, filter: ROLL_BLUR, transition: ROLL_EXIT_TRANSITION }
+};
+function ActionSwapRollText({ value, children, className }) {
+  const reduce = useReducedMotion() ?? false;
+  const measureRef = useRef(null);
+  const [width, setWidth] = useState();
+  useLayoutEffect(() => {
+    const nextWidth = measureRef.current?.offsetWidth;
+    if (!nextWidth) return;
+    setWidth((current) => current === nextWidth ? current : nextWidth);
+  });
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn("relative inline-block overflow-hidden whitespace-nowrap align-bottom", className),
+      style: { width, transition: reduce ? void 0 : `width 220ms ${EASE_OUT_CSS}` },
+      children: [
+        /* @__PURE__ */ jsx("span", { ref: measureRef, "aria-hidden": true, className: "invisible inline-block whitespace-nowrap", children }),
+        /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            variants: TEXT_VARIANTS,
+            initial: reduce ? false : "initial",
+            animate: reduce ? AT_REST : "animate",
+            exit: reduce ? void 0 : "exit",
+            className: "absolute top-0 left-0 inline-block will-change-[opacity,filter,transform]",
+            children
+          },
+          value
+        ) })
+      ]
+    }
+  );
+}
+function ActionSwapRollIcon({ value, children, className }) {
+  const reduce = useReducedMotion() ?? false;
+  return /* @__PURE__ */ jsx("span", { className: cn("relative inline-grid shrink-0 place-items-center overflow-hidden", className), children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      "aria-hidden": true,
+      variants: ICON_VARIANTS,
+      initial: reduce ? false : "initial",
+      animate: reduce ? AT_REST : "animate",
+      exit: reduce ? void 0 : "exit",
+      className: "col-start-1 row-start-1 inline-flex items-center justify-center will-change-[opacity,filter,transform]",
+      children
+    },
+    value
+  ) }) });
+}
+function AnimatedBeam({
+  className,
+  containerRef,
+  fromRef,
+  toRef,
+  curvature = 0,
+  reverse = false,
+  duration = 5,
+  delay = 0,
+  pathColor = "gray",
+  pathWidth = 2,
+  pathOpacity = 0.2,
+  gradientStartColor = "#ffaa40",
+  gradientStopColor = "#9c40ff",
+  repeat = Number.POSITIVE_INFINITY,
+  repeatDelay = 0,
+  startXOffset = 0,
+  startYOffset = 0,
+  endXOffset = 0,
+  endYOffset = 0
+}) {
+  const id = useId();
+  const [pathD, setPathD] = useState("");
+  const [svgDimensions, setSvgDimensions] = useState({
+    width: 0,
+    height: 0
+  });
+  const gradientCoordinates = reverse ? {
+    x1: ["90%", "-10%"],
+    x2: ["100%", "0%"],
+    y1: ["0%", "0%"],
+    y2: ["0%", "0%"]
+  } : {
+    x1: ["10%", "110%"],
+    x2: ["0%", "100%"],
+    y1: ["0%", "0%"],
+    y2: ["0%", "0%"]
+  };
+  useEffect(() => {
+    const updatePath = () => {
+      if (containerRef.current && fromRef.current && toRef.current) {
+        const containerRect = containerRef.current.getBoundingClientRect();
+        const rectA = fromRef.current.getBoundingClientRect();
+        const rectB = toRef.current.getBoundingClientRect();
+        const svgWidth = containerRect.width;
+        const svgHeight = containerRect.height;
+        setSvgDimensions({ width: svgWidth, height: svgHeight });
+        const startX = rectA.left - containerRect.left + rectA.width / 2 + startXOffset;
+        const startY = rectA.top - containerRect.top + rectA.height / 2 + startYOffset;
+        const endX = rectB.left - containerRect.left + rectB.width / 2 + endXOffset;
+        const endY = rectB.top - containerRect.top + rectB.height / 2 + endYOffset;
+        const controlY = startY - curvature;
+        const d = `M ${startX},${startY} Q ${(startX + endX) / 2},${controlY} ${endX},${endY}`;
+        setPathD(d);
+      }
+    };
+    const resizeObserver = new ResizeObserver(() => {
+      updatePath();
+    });
+    if (containerRef.current) resizeObserver.observe(containerRef.current);
+    updatePath();
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [containerRef, fromRef, toRef, curvature, startXOffset, startYOffset, endXOffset, endYOffset]);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      fill: "none",
+      width: svgDimensions.width,
+      height: svgDimensions.height,
+      xmlns: "http://www.w3.org/2000/svg",
+      className: cn("pointer-events-none absolute top-0 left-0 transform-gpu stroke-2", className),
+      viewBox: `0 0 ${svgDimensions.width} ${svgDimensions.height}`,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: pathD, stroke: pathColor, strokeWidth: pathWidth, strokeOpacity: pathOpacity, strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("path", { d: pathD, strokeWidth: pathWidth, stroke: `url(#${id})`, strokeOpacity: "1", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+          motion.linearGradient,
+          {
+            className: "transform-gpu",
+            id,
+            gradientUnits: "userSpaceOnUse",
+            initial: {
+              x1: "0%",
+              x2: "0%",
+              y1: "0%",
+              y2: "0%"
+            },
+            animate: {
+              x1: gradientCoordinates.x1,
+              x2: gradientCoordinates.x2,
+              y1: gradientCoordinates.y1,
+              y2: gradientCoordinates.y2
+            },
+            transition: {
+              delay,
+              duration,
+              ease: [0.16, 1, 0.3, 1],
+              repeat,
+              repeatDelay
+            },
+            children: [
+              /* @__PURE__ */ jsx("stop", { stopColor: gradientStartColor, stopOpacity: "0" }),
+              /* @__PURE__ */ jsx("stop", { stopColor: gradientStartColor }),
+              /* @__PURE__ */ jsx("stop", { offset: "32.5%", stopColor: gradientStopColor }),
+              /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: gradientStopColor, stopOpacity: "0" })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+var buttonVariants = cva(
+  "group inline-flex items-center justify-center gap-1.5 font-medium [transition:opacity_.24s_80ms,transform_.15s_cubic-bezier(.4,0,.2,1),box-shadow_.15s_cubic-bezier(.4,0,.2,1),filter_.15s_cubic-bezier(.4,0,.2,1)] disabled:[transition:opacity_.1s]",
+  {
+    variants: {
+      variant: {
+        filled: "bg-(--foreground) text-(--primary-foreground) shadow-elevated-3 hover:opacity-90",
+        bordered: "border border-(--border-hi) bg-surface-3 text-foreground shadow-elevated-3 hover:bg-(--muted)",
+        ghost: "text-(--foreground-secondary) hover:bg-(--surface-hover) hover:text-(--foreground)"
+      },
+      size: {
+        sm: "h-8 px-3.5 text-[15px]",
+        md: "h-9 px-5 text-[17px]",
+        lg: "h-11 px-6 text-[17px]",
+        icon: "size-11"
+      },
+      shape: {
+        rounded: "rounded-interactive",
+        pill: "rounded-full"
+      }
+    },
+    // Pill is the house standard — every CTA is fully rounded.
+    defaultVariants: { variant: "filled", size: "md", shape: "pill" }
+  }
+);
+function Button({
+  variant,
+  size,
+  shape,
+  showArrow = false,
+  external = false,
+  title,
+  actionOrLink,
+  children,
+  className,
+  "aria-label": ariaLabel,
+  "aria-expanded": ariaExpanded
+}) {
+  const buttonClassName = cn(buttonVariants({ variant, size, shape }), className);
+  const arrowSlot = showArrow && /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 14 14",
+      width: "14",
+      height: "14",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      className: "shrink-0",
+      children: [
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: "0",
+            y1: "7",
+            x2: "9",
+            y2: "7",
+            strokeDasharray: "9",
+            className: "[stroke-dashoffset:9] [transition:stroke-dashoffset_.08s_cubic-bezier(.22,1,.36,1)] group-hover:[stroke-dashoffset:0] group-hover:[transition-duration:.22s]"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M5 3l4 4-4 4",
+            className: "[transform:translateX(0)] [transition:transform_.22s_cubic-bezier(.22,1,.36,1)] group-hover:[transform:translateX(2px)]"
+          }
+        )
+      ]
+    }
+  );
+  if (typeof actionOrLink === "string")
+    return /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: actionOrLink,
+        className: cn(buttonClassName, "no-underline"),
+        "aria-label": ariaLabel,
+        title,
+        ...external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+        children: [
+          children,
+          arrowSlot
+        ]
+      }
+    );
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: buttonClassName,
+      onClick: actionOrLink,
+      "aria-label": ariaLabel,
+      "aria-expanded": ariaExpanded,
+      title,
+      children: [
+        children,
+        arrowSlot
+      ]
+    }
+  );
+}
+
+// src/lib/surface.ts
+var SURFACE_BG = {
+  1: "bg-surface-1",
+  2: "bg-surface-2",
+  3: "bg-surface-3",
+  4: "bg-surface-4",
+  5: "bg-surface-5",
+  6: "bg-surface-6",
+  7: "bg-surface-7",
+  8: "bg-surface-8"
+};
+var SURFACE_VAR = {
+  1: "[--popup-surface:var(--surface-1)]",
+  2: "[--popup-surface:var(--surface-2)]",
+  3: "[--popup-surface:var(--surface-3)]",
+  4: "[--popup-surface:var(--surface-4)]",
+  5: "[--popup-surface:var(--surface-5)]",
+  6: "[--popup-surface:var(--surface-6)]",
+  7: "[--popup-surface:var(--surface-7)]",
+  8: "[--popup-surface:var(--surface-8)]"
+};
+var SURFACE_SHADOW_COMBINED = {
+  1: "shadow-elevated-1",
+  2: "shadow-elevated-2",
+  3: "shadow-elevated-3",
+  4: "shadow-elevated-4",
+  5: "shadow-elevated-5",
+  6: "shadow-elevated-6",
+  7: "shadow-elevated-7",
+  8: "shadow-elevated-8"
+};
+function solidSurface(level, shadowLevel = level) {
+  return `${SURFACE_BG[level]} ${SURFACE_SHADOW_COMBINED[shadowLevel]} ${SURFACE_VAR[level]}`;
+}
+var cardVariants = cva("text-foreground flex flex-col", {
+  variants: {
+    variant: {
+      default: "gap-6 rounded-2xl py-6",
+      inset: "rounded-2xl p-1"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+function Card({ className, variant = "default", level = 3, shadowLevel = 1, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card",
+      "data-variant": variant,
+      "data-level": level,
+      className: cn(
+        cardVariants({ variant }),
+        solidSurface(level, shadowLevel),
+        // bg-muted overrides solidSurface's bg, making the outer a gray frame
+        // while keeping its shadow, rim, and --popup-surface.
+        variant === "inset" && "bg-muted",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-header",
+      className: cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start has-[[data-slot=card-action]]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        "[[data-variant=default]>_&]:gap-1.5 [[data-variant=default]>_&]:px-6",
+        "[[data-variant=inset]>_&]:px-3 [[data-variant=inset]>_&]:py-2 [[data-variant=inset]>_&]:pt-1",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "card-title", className: cn("font-semibold [[data-variant=default]_&]:leading-none", className), ...props });
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "card-description", className: cn("text-muted-foreground text-sm", className), ...props });
+}
+function CardAction({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-action",
+      className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className),
+      ...props
+    }
+  );
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-content",
+      className: cn(
+        "[[data-variant=default]>_&]:px-6",
+        "[[data-variant=inset]>_&]:flex [[data-variant=inset]>_&]:flex-1 [[data-variant=inset]>_&]:flex-col [[data-variant=inset]>_&]:rounded-lg [[data-variant=inset]>_&]:bg-surface-3 [[data-variant=inset]>_&]:p-4 [[data-variant=inset]>_&]:shadow-elevated-3 [[data-variant=inset]>_&]:[--popup-surface:var(--surface-3)]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "card-footer",
+      className: cn(
+        "flex items-center [.border-t]:pt-6",
+        "[[data-variant=default]>_&]:px-6",
+        "[[data-variant=inset]>_&]:mt-auto [[data-variant=inset]>_&]:justify-end [[data-variant=inset]>_&]:pt-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function HeightClipper({ height, delay, children }) {
+  return /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      className: "block w-full overflow-hidden",
+      animate: height === void 0 ? {} : { height },
+      transition: {
+        height: { duration: 0.4, ease: [0.4, 0, 0.2, 1], delay }
+      },
+      children
+    }
+  );
+}
+function ExitingLine({ text, textColor, duration, fallDuration, opacityEase, wrap = false, onDone }) {
+  return /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      "aria-hidden": true,
+      className: cn(
+        wrap ? "pointer-events-none absolute top-0 left-0 w-full" : "pointer-events-none absolute top-0 left-1/2 whitespace-nowrap"
+      ),
+      style: { color: textColor },
+      initial: wrap ? { opacity: 1, y: 0 } : { opacity: 1, x: "-50%", y: 0 },
+      animate: wrap ? { opacity: 0, y: 14 } : { opacity: 0, x: "-50%", y: 14 },
+      transition: {
+        opacity: { duration, ease: opacityEase },
+        y: { duration: fallDuration, ease: [0.22, 0.61, 0.36, 1] }
+      },
+      onAnimationComplete: onDone,
+      children: text
+    }
+  );
+}
+function WidthReservation({ texts }) {
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "invisible block h-0 overflow-hidden", children: texts.map((t) => /* @__PURE__ */ jsx("span", { className: "block", children: t }, t)) });
+}
+
+// src/components/dia-text-reveal.sweep.ts
+var BAND_HALF = 17;
+var SWEEP_START = -BAND_HALF;
+var SWEEP_END = 100 + BAND_HALF;
+var sweepEaseFn = (t) => t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2;
+var coverageAt = (progress) => Math.min(1, sweepEaseFn(progress) * (SWEEP_END - SWEEP_START) / 100);
+var COVERAGE_SPAN = (() => {
+  let lo = 0;
+  let hi = 1;
+  for (let i = 0; i < 40; i += 1) {
+    const mid = (lo + hi) / 2;
+    if (coverageAt(mid) < 1) lo = mid;
+    else hi = mid;
+  }
+  return hi;
+})();
+var EXIT_FADE_BIAS = 0.4;
+var exitEase = (t) => coverageAt(t * COVERAGE_SPAN) ** EXIT_FADE_BIAS;
+var makeExitEase = (leadFraction) => {
+  if (leadFraction <= 0) return exitEase;
+  if (leadFraction >= 1) return () => 0;
+  return (t) => t <= leadFraction ? 0 : exitEase((t - leadFraction) / (1 - leadFraction));
+};
+var SWEEP_SCALE = 3;
+var BAND_HALF_IMAGE = BAND_HALF / SWEEP_SCALE;
+var positionFor = (pos) => (pos - 50 * SWEEP_SCALE) / (1 - SWEEP_SCALE);
+var SWEEP_FROM = `${positionFor(SWEEP_START).toFixed(3)}%`;
+var SWEEP_TO = `${positionFor(SWEEP_END).toFixed(3)}%`;
+var SWEEP_SIZE = `${SWEEP_SCALE * 100}% 100%`;
+var EASE_SAMPLES = 24;
+var sweepEaseCss = `linear(${Array.from({ length: EASE_SAMPLES + 1 }, (_, i) => sweepEaseFn(i / EASE_SAMPLES).toFixed(5)).join(
+  ", "
+)})`;
+function buildSweepGradient(colors, textColor) {
+  const bandStart = 50 - BAND_HALF_IMAGE;
+  const bandEnd = 50 + BAND_HALF_IMAGE;
+  const n = colors.length;
+  const parts = [`${textColor} 0%`, `${textColor} ${bandStart.toFixed(3)}%`];
+  for (const [i, c] of colors.entries()) {
+    const pct = n === 1 ? 50 : bandStart + i / (n - 1) * BAND_HALF_IMAGE * 2;
+    parts.push(`${c} ${pct.toFixed(3)}%`);
+  }
+  parts.push(`transparent ${bandEnd.toFixed(3)}%`, "transparent 100%");
+  return `linear-gradient(90deg, ${parts.join(", ")})`;
+}
+function buildSweepStyle({ colors, textColor, duration, delay, sweep, paused, reduced }) {
+  return {
+    color: "transparent",
+    backgroundClip: "text",
+    WebkitBackgroundClip: "text",
+    backgroundImage: buildSweepGradient(colors, textColor),
+    backgroundRepeat: "no-repeat",
+    backgroundSize: SWEEP_SIZE,
+    backgroundPositionX: reduced ? SWEEP_TO : SWEEP_FROM,
+    "--dia-sweep-from": SWEEP_FROM,
+    "--dia-sweep-to": SWEEP_TO,
+    ...sweep !== null && !reduced && {
+      animationName: sweep.cycle % 2 === 0 ? "dia-sweep-a" : "dia-sweep-b",
+      animationDuration: `${duration}s`,
+      animationDelay: `${delay}s`,
+      animationTimingFunction: sweepEaseCss,
+      animationFillMode: "both",
+      animationIterationCount: 1,
+      animationPlayState: paused ? "paused" : "running"
+    }
+  };
+}
+
+// src/components/dia-text-reveal.utils.ts
+function measureWidths(el, texts) {
+  const parent = el.parentElement;
+  if (!parent) return texts.map(() => 0);
+  const ghost = el.cloneNode();
+  if (!(ghost instanceof HTMLElement)) return texts.map(() => 0);
+  Object.assign(ghost.style, {
+    position: "absolute",
+    visibility: "hidden",
+    pointerEvents: "none",
+    width: "auto",
+    whiteSpace: "nowrap"
+  });
+  parent.appendChild(ghost);
+  const widths = texts.map((t) => {
+    ghost.textContent = t;
+    return ghost.getBoundingClientRect().width;
+  });
+  ghost.remove();
+  return widths;
+}
+var DEFAULT_COLORS = ["#c679c4", "#fa3d1d", "#ffb005", "#e1e1fe", "#0358f7"];
+var EXIT_LEAD_RATIO = 0.3;
+function DiaTextReveal({
+  text,
+  colors = DEFAULT_COLORS,
+  textColor = "var(--color-foreground)",
+  duration = 1,
+  delay = 0,
+  repeat = false,
+  repeatDelay = 0.5,
+  exitDuration,
+  exitLead,
+  startOnView = true,
+  start = true,
+  once = true,
+  className,
+  fixedWidth = false,
+  wrap = false,
+  ...props
+}) {
+  const texts = Array.isArray(text) ? text : [text];
+  const isMulti = texts.length > 1;
+  const prefersReducedMotion2 = useReducedMotion();
+  const exitSpan = exitDuration ?? duration * COVERAGE_SPAN;
+  const lead = Math.max(0, exitLead ?? duration * EXIT_LEAD_RATIO);
+  const exitTotal = lead + exitSpan;
+  const leadFraction = exitTotal > 0 ? lead / exitTotal : 0;
+  const exitOpacityEase = useMemo(() => makeExitEase(leadFraction), [leadFraction]);
+  const spanRef = useRef(null);
+  const optsRef = useRef({ repeat, repeatDelay, texts });
+  optsRef.current = { repeat, repeatDelay, texts };
+  const indexRef = useRef(0);
+  const hasPlayedRef = useRef(false);
+  const timerRef = useRef(void 0);
+  const pendingRepeatRef = useRef(false);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [sweep, setSweep] = useState(null);
+  const [exiting, setExiting] = useState(null);
+  const clearExiting = useCallback(() => setExiting(null), []);
+  const [measuredWidths, setMeasuredWidths] = useState([]);
+  const [wrapHeight, setWrapHeight] = useState(null);
+  const innerRef = useRef(null);
+  const isInView = useInView(spanRef, { once, amount: 0.1 });
+  const isLiveInView = useInView(spanRef, {
+    once: false,
+    amount: 0.1
+  });
+  useEffect(() => {
+    const el = spanRef.current;
+    if (!(el && isMulti) || wrap) return;
+    const measure = () => setMeasuredWidths(measureWidths(el, texts));
+    measure();
+    if (document.fonts.status !== "loaded") document.fonts.ready.then(measure);
+  }, [Array.isArray(text) ? text.join("\0") : text, isMulti, wrap, texts]);
+  useEffect(() => {
+    const el = innerRef.current;
+    if (!(el && wrap && isMulti)) return;
+    const observer = new ResizeObserver(([entry]) => {
+      if (!entry) return;
+      const h = entry.contentRect.height;
+      setWrapHeight(
+        (prev) => prev !== null && prev.h === h ? prev : {
+          h,
+          shrink: prev !== null && h < prev.h
+        }
+      );
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [wrap, isMulti]);
+  const advance = useCallback(() => {
+    const opts = optsRef.current;
+    const current = indexRef.current;
+    const next = (current + 1) % opts.texts.length;
+    indexRef.current = next;
+    setExiting({ index: current, token: Date.now() });
+    setActiveIndex(next);
+    setSweep((prev) => ({
+      cycle: (prev?.cycle ?? 0) + 1,
+      lead: true
+    }));
+  }, []);
+  const scheduleRepeat = useCallback(() => {
+    timerRef.current = setTimeout(() => {
+      timerRef.current = void 0;
+      advance();
+    }, optsRef.current.repeatDelay * 1e3);
+  }, [advance]);
+  const onSweepEnd = useCallback(
+    (event) => {
+      if (!event.animationName.startsWith("dia-sweep")) return;
+      if (!optsRef.current.repeat) return;
+      scheduleRepeat();
+    },
+    [scheduleRepeat]
+  );
+  useEffect(() => {
+    if (prefersReducedMotion2) return;
+    if (startOnView && !isInView) return;
+    if (!start) return;
+    if (once && hasPlayedRef.current) return;
+    hasPlayedRef.current = true;
+    setSweep((prev) => prev === null ? { cycle: 0, lead: false } : { cycle: prev.cycle + 1, lead: false });
+  }, [isInView, start, startOnView, once, prefersReducedMotion2]);
+  useEffect(() => {
+    if (!repeat || prefersReducedMotion2) return;
+    if (!isLiveInView) {
+      if (timerRef.current === void 0) return;
+      clearTimeout(timerRef.current);
+      timerRef.current = void 0;
+      pendingRepeatRef.current = true;
+    } else if (pendingRepeatRef.current) {
+      pendingRepeatRef.current = false;
+      scheduleRepeat();
+    }
+  }, [isLiveInView, repeat, prefersReducedMotion2, scheduleRepeat]);
+  useEffect(() => () => clearTimeout(timerRef.current), []);
+  const paused = repeat && sweep !== null && !isLiveInView;
+  const revealStyle = buildSweepStyle({
+    colors,
+    textColor,
+    duration,
+    delay: delay + (sweep?.lead ? lead : 0),
+    sweep,
+    paused,
+    reduced: prefersReducedMotion2 === true
+  });
+  if (!isMulti)
+    return /* @__PURE__ */ jsx(
+      motion.span,
+      {
+        ref: spanRef,
+        className: cn("align-baseline text-inherit leading-[100%]", className),
+        style: revealStyle,
+        ...props,
+        onAnimationEnd: onSweepEnd,
+        children: texts[activeIndex]
+      }
+    );
+  const fixedW = !wrap && fixedWidth && measuredWidths.length > 0 ? Math.max(...measuredWidths) : void 0;
+  const animatedW = wrap || fixedWidth ? void 0 : measuredWidths[activeIndex];
+  const animatedH = wrap ? wrapHeight?.h : void 0;
+  const heightDelay = exiting !== null && wrapHeight?.shrink ? exitTotal : 0;
+  const incoming = /* @__PURE__ */ jsx(
+    "span",
+    {
+      ref: innerRef,
+      className: cn("inline-block", wrap && "w-full", !wrap && "whitespace-nowrap"),
+      style: revealStyle,
+      onAnimationEnd: onSweepEnd,
+      children: texts[activeIndex]
+    }
+  );
+  return /* @__PURE__ */ jsxs(
+    motion.span,
+    {
+      ref: spanRef,
+      className: cn(
+        wrap ? "relative inline-block w-full text-center align-baseline text-inherit" : "relative inline-block whitespace-nowrap text-center align-baseline text-inherit leading-[100%]",
+        className
+      ),
+      style: {
+        ...fixedW !== void 0 && { width: fixedW }
+      },
+      animate: {
+        ...animatedW !== void 0 && { width: animatedW }
+      },
+      transition: {
+        width: { duration: 0.4, ease: [0.4, 0, 0.2, 1] }
+      },
+      ...props,
+      children: [
+        wrap ? /* @__PURE__ */ jsxs(HeightClipper, { height: animatedH, delay: heightDelay, children: [
+          /* @__PURE__ */ jsx(WidthReservation, { texts }),
+          incoming
+        ] }) : incoming,
+        exiting && !prefersReducedMotion2 && /* @__PURE__ */ jsx(
+          ExitingLine,
+          {
+            text: texts[exiting.index],
+            textColor,
+            duration: 0.4,
+            fallDuration: 0.25,
+            opacityEase: exitOpacityEase,
+            wrap,
+            onDone: clearExiting
+          },
+          exiting.token
+        )
+      ]
+    }
+  );
+}
+function ElevatedInput({
+  className,
+  type = "text",
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref,
+      type,
+      className: cn(
+        // Layout & shape
+        "relative w-full overflow-hidden rounded-lg",
+        // Typography
+        "text-(--color-foreground) text-sm placeholder:text-(--color-muted-foreground)",
+        // Sizing
+        "h-9 px-3",
+        // Reset native input chrome
+        "appearance-none border-none outline-none",
+        // Background — a barely-there top darkening that reads as cavity depth.
+        "bg-[linear-gradient(to_bottom,oklch(0_0_0/0.04),transparent)]",
+        "dark:bg-[linear-gradient(to_bottom,oklch(1_0_0/0.04),transparent)]",
+        // Shadow stack — light mode
+        "shadow-[inset_0_1px_0_0_oklch(1_0_0/0.08),inset_0_2px_2px_-1px_oklch(0_0_0/0.08),inset_0_4px_4px_-2px_oklch(0_0_0/0.08),0_1px_0_0_oklch(0_0_0/0.12),inset_0_0_0_1px_oklch(0_0_0/0.16)]",
+        // Shadow stack — dark mode
+        "dark:shadow-[inset_0_1px_0_0_oklch(1_0_0/0.1),inset_0_2px_2px_-1px_oklch(0_0_0/0.28),inset_0_4px_4px_-2px_oklch(0_0_0/0.22),0_1px_0_0_oklch(0_0_0/0.36),inset_0_0_0_1px_oklch(1_0_0/0.16)]",
+        // Focus
+        "focus-visible:shadow-[inset_0_1px_0_0_oklch(1_0_0/0.08),inset_0_2px_2px_-1px_oklch(0_0_0/0.04),inset_0_4px_4px_-2px_oklch(0_0_0/0.04),0_0_0_3px_oklch(0_0_0/0.08),inset_0_0_0_1.5px_oklch(0_0_0/0.36)]",
+        "dark:focus-visible:shadow-[inset_0_1px_0_0_oklch(1_0_0/0.12),inset_0_2px_2px_-1px_oklch(0_0_0/0.16),inset_0_4px_4px_-2px_oklch(0_0_0/0.12),0_0_0_3px_oklch(1_0_0/0.08),inset_0_0_0_1.5px_oklch(1_0_0/0.28)]",
+        "transition-shadow duration-150",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var viewport = { once: true, margin: "-60px" };
+var ROW_TOLERANCE = 8;
+var StaggerContext = createContext(null);
+function FadeIn({ children, className, delay = 0, duration = 1, yOffset = 20, start = true }) {
+  const ref = useRef(null);
+  const inView = useInView(ref, viewport);
+  const hidden = { opacity: 0, y: yOffset };
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      ref,
+      className,
+      initial: hidden,
+      animate: inView && start ? { opacity: 1, y: 0 } : hidden,
+      transition: { duration, delay, ease: easeOut },
+      children
+    }
+  );
+}
+function Stagger({ children, className, staggerDelay = 0.15, baseDelay = 0, start = true }) {
+  const queue = useRef([]);
+  const frame = useRef(null);
+  const started = useRef(start);
+  started.current = start;
+  const flush = useCallback(() => {
+    frame.current = null;
+    const batch = queue.current;
+    queue.current = [];
+    const positioned = batch.map((entry) => ({
+      ...entry,
+      rect: entry.element.getBoundingClientRect()
+    }));
+    positioned.sort(
+      (a, b) => Math.abs(a.rect.top - b.rect.top) > ROW_TOLERANCE ? a.rect.top - b.rect.top : a.rect.left - b.rect.left
+    );
+    for (const [index, entry] of positioned.entries()) entry.reveal(baseDelay + index * staggerDelay);
+  }, [baseDelay, staggerDelay]);
+  const register = useCallback(
+    (element, reveal) => {
+      queue.current.push({ element, reveal });
+      if (started.current) frame.current ??= requestAnimationFrame(flush);
+    },
+    [flush]
+  );
+  useEffect(() => {
+    if (start && queue.current.length > 0) frame.current ??= requestAnimationFrame(flush);
+  }, [start, flush]);
+  return /* @__PURE__ */ jsx(StaggerContext, { value: register, children: /* @__PURE__ */ jsx("div", { className, children }) });
+}
+function StaggerItem({ children, className }) {
+  const register = useContext(StaggerContext);
+  const ref = useRef(null);
+  const claimed = useRef(false);
+  const [delay, setDelay] = useState(null);
+  const onViewportEnter = useCallback(() => {
+    if (claimed.current) return;
+    claimed.current = true;
+    const element = ref.current;
+    if (register && element) register(element, setDelay);
+    else setDelay(0);
+  }, [register]);
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      ref,
+      className,
+      initial: { opacity: 0, y: 18 },
+      animate: delay === null ? { opacity: 0, y: 18 } : { opacity: 1, y: 0 },
+      transition: { duration: 0.45, delay: delay ?? 0, ease: easeOut },
+      viewport,
+      onViewportEnter,
+      children
+    }
+  );
+}
+function FeatureCard({ icon, title, body, iconColor, className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex w-full flex-col justify-between gap-6 rounded-[20px] bg-(--muted) p-6 lg:gap-8 lg:rounded-3xl lg:p-8 xl:gap-10 xl:p-10",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex size-10 items-center justify-center rounded-[10px] bg-(--surface) shadow-(--shadow-sm) lg:size-12 lg:rounded-md", children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn("flex h-5 w-5 items-center justify-center lg:h-6 lg:w-6", iconColor ?? "text-(--foreground-secondary)"),
+            children: icon
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx("h3", { className: "font-semibold text-[15px] text-foreground lg:text-base", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "text-(--foreground-secondary) text-[13px] leading-relaxed lg:text-sm", children: body })
+        ] })
+      ]
+    }
+  );
+}
+var downChevronClass = "absolute left-1/2 top-full size-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-r border-(--foreground-muted)";
+var rightChevronClass = "absolute right-0 top-1/2 size-2 translate-x-1/2 -translate-y-1/2 rotate-45 border-t border-r border-(--foreground-muted)";
+var leftChevronClass = "absolute left-0 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 -rotate-45 border-t border-l border-(--foreground-muted)";
+var microLabelClass = "absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 whitespace-nowrap rounded-full border border-(--border) bg-(--muted) px-1.5 py-px font-mono text-[8.5px] leading-tight text-(--foreground-secondary)";
+function ArrowRight({ label, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative flex items-center", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "h-px w-full bg-(--foreground-muted)" }),
+    /* @__PURE__ */ jsx("span", { className: rightChevronClass }),
+    label ? /* @__PURE__ */ jsx("span", { className: microLabelClass, children: label }) : null
+  ] });
+}
+function ArrowLeft({ label, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative flex items-center", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "h-px w-full bg-(--foreground-muted)" }),
+    /* @__PURE__ */ jsx("span", { className: leftChevronClass }),
+    label ? /* @__PURE__ */ jsx("span", { className: microLabelClass, children: label }) : null
+  ] });
+}
+function TurnDown({ className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative h-4", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "absolute left-1/2 top-0 h-full w-px -translate-x-1/2 bg-(--foreground-muted)" }),
+    /* @__PURE__ */ jsx("span", { className: downChevronClass })
+  ] });
+}
+function SplitArrow({ leftLabel, rightLabel, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative h-12", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "absolute left-1/2 top-0 h-1/2 w-px -translate-x-1/2 bg-(--foreground-muted)" }),
+    /* @__PURE__ */ jsx("span", { className: "absolute left-[25%] right-[25%] top-1/2 h-px -translate-y-1/2 bg-(--foreground-muted)" }),
+    /* @__PURE__ */ jsx("span", { className: "absolute left-[25%] top-1/2 h-1/2 w-px -translate-x-1/2 bg-(--foreground-muted)" }),
+    /* @__PURE__ */ jsx("span", { className: "absolute left-[75%] top-1/2 h-1/2 w-px -translate-x-1/2 bg-(--foreground-muted)" }),
+    /* @__PURE__ */ jsx("span", { className: "absolute left-[25%] top-full size-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-r border-(--foreground-muted)" }),
+    /* @__PURE__ */ jsx("span", { className: "absolute left-[75%] top-full size-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-r border-(--foreground-muted)" }),
+    leftLabel ? /* @__PURE__ */ jsx("span", { className: "absolute left-[30%] top-1/2 -translate-y-1/2 rounded-full border border-(--border) bg-(--muted) px-2 py-0.5 font-mono text-[10px] text-(--foreground-secondary)", children: leftLabel }) : null,
+    rightLabel ? /* @__PURE__ */ jsx("span", { className: "absolute right-[30%] top-1/2 -translate-y-1/2 rounded-full border border-(--border) bg-(--muted) px-2 py-0.5 font-mono text-[10px] text-(--foreground-secondary)", children: rightLabel }) : null
+  ] });
+}
+function JoinArrow({ className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative h-12", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "absolute left-[25%] top-0 h-1/2 w-px -translate-x-1/2 bg-(--foreground-muted)" }),
+    /* @__PURE__ */ jsx("span", { className: "absolute left-[75%] top-0 h-1/2 w-px -translate-x-1/2 bg-(--foreground-muted)" }),
+    /* @__PURE__ */ jsx("span", { className: "absolute left-[25%] right-[25%] top-1/2 h-px -translate-y-1/2 bg-(--foreground-muted)" }),
+    /* @__PURE__ */ jsx("span", { className: "absolute left-1/2 top-1/2 h-1/2 w-px -translate-x-1/2 bg-(--foreground-muted)" }),
+    /* @__PURE__ */ jsx("span", { className: "absolute left-1/2 top-full size-2 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-r border-(--foreground-muted)" })
+  ] });
+}
+function FlowNode({ icon, chipClass, title, body, tag, children, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex h-full flex-col rounded-[12px] border border-(--border) bg-(--surface) p-2.5", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2", children: [
+      icon ? /* @__PURE__ */ jsx("div", { className: cn("flex size-7 shrink-0 items-center justify-center rounded-[8px]", chipClass ?? "bg-(--muted)"), children: icon }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-1.5 gap-y-0.5", children: [
+          /* @__PURE__ */ jsx("p", { className: "font-semibold text-[11px] leading-snug text-foreground sm:text-[12px]", children: title }),
+          tag ? /* @__PURE__ */ jsx("span", { className: "rounded-full border border-(--border) px-1.5 py-px font-mono text-[8.5px] text-(--foreground-muted)", children: tag }) : null
+        ] }),
+        body ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-[9.5px] leading-snug text-(--foreground-secondary) sm:text-[10px]", children: body }) : null
+      ] })
+    ] }),
+    children ? /* @__PURE__ */ jsx("div", { className: "mt-2", children }) : null
+  ] });
+}
+function FlowPill({ title, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "mx-auto flex w-fit max-w-full items-center justify-center rounded-full border border-(--border) bg-(--surface) px-4 py-2 text-center",
+        className
+      ),
+      children: /* @__PURE__ */ jsx("p", { className: "text-[12px] font-semibold leading-snug text-foreground", children: title })
+    }
+  );
+}
+function FlowDiamond({ label, sub, className }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative h-14 w-36 justify-self-center sm:h-16 sm:w-44", className), children: [
+    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-(--border-hi) [clip-path:polygon(50%_0,100%_50%,50%_100%,0_50%)]" }),
+    /* @__PURE__ */ jsxs("div", { className: "absolute inset-[1px] flex flex-col items-center justify-center gap-0.5 bg-(--surface) px-6 text-center [clip-path:polygon(50%_0,100%_50%,50%_100%,0_50%)]", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-[11px] font-semibold leading-tight text-foreground sm:text-[12px]", children: label }),
+      sub ? /* @__PURE__ */ jsx("p", { className: "text-[8.5px] leading-tight text-(--foreground-muted)", children: sub }) : null
+    ] })
+  ] });
+}
+var glossLayer = cn(
+  "pointer-events-none absolute inset-0 z-[-1] rounded-[inherit]",
+  "[background-color:var(--btn-face)] [box-shadow:var(--shadow-button)]",
+  "transition-shadow duration-150",
+  // Pressed (and disabled): bevel + cast go transparent, the rim stays.
+  "group-active/glossy:[box-shadow:var(--shadow-button-pressed)]",
+  "group-disabled/glossy:[box-shadow:var(--shadow-button-pressed)]",
+  // Dome — fixed direction, per-variant stops. Above the face, below the tint.
+  "before:absolute before:inset-0 before:rounded-[inherit] before:content-[''] before:[background-image:var(--gradient-button)]",
+  // Interaction tint. Hidden outright when disabled, and on touch (no hover
+  // state to speak of) so the root's active:opacity can carry the press instead.
+  "after:absolute after:inset-0 after:rounded-[inherit] after:content-[''] after:opacity-0",
+  "after:[background-color:var(--btn-tint-hover)] after:transition-opacity after:duration-150 after:[will-change:opacity]",
+  "group-hover/glossy:after:opacity-100",
+  "group-active/glossy:after:[background-color:var(--btn-tint-active)]",
+  "group-disabled/glossy:after:hidden [@media(hover:none)]:after:hidden"
+);
+var glossyButtonVariants = cva(
+  cn(
+    "glossy group/glossy relative isolate inline-flex cursor-pointer select-none items-center justify-center gap-1 whitespace-nowrap rounded-full font-normal",
+    // Label colour rides the variant. Kept as a utility rather than a plain
+    // declaration on `.glossy` so a caller's own text-* class still wins.
+    "[color:var(--btn-fg)]",
+    "disabled:cursor-default disabled:opacity-50",
+    // Touch devices get no hover layer, so the whole key dims on press instead.
+    "[@media(hover:none)]:active:opacity-80"
+  ),
+  {
+    variants: {
+      size: {
+        sm: "h-8 px-2.5 text-sm",
+        md: "h-9 px-5 text-[17px]",
+        lg: "h-11 px-6 text-[17px]"
+      },
+      /**
+       * Written out as literal class names — Tailwind's scanner is static, so a
+       * `glossy-${variant}` template would never make it into the stylesheet.
+       * `neutral` is the bare recipe, so it needs no class of its own.
+       */
+      variant: {
+        neutral: "",
+        accent: "glossy-accent",
+        destructive: "glossy-destructive",
+        special: "glossy-special",
+        positive: "glossy-positive",
+        attention: "glossy-attention",
+        highlight: "glossy-highlight",
+        inverse: "glossy-inverse"
+      }
+    },
+    defaultVariants: { size: "md", variant: "neutral" }
+  }
+);
+function GlossyButton({
+  size,
+  variant,
+  actionOrLink,
+  children,
+  disabled,
+  className,
+  "aria-label": ariaLabel
+}) {
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { "data-fx-layer": "gloss", "aria-hidden": true, className: glossLayer }),
+    /* @__PURE__ */ jsx("span", { className: "px-0.5", children })
+  ] });
+  const buttonClassName = cn(glossyButtonVariants({ size, variant }), className);
+  if (typeof actionOrLink === "string")
+    return /* @__PURE__ */ jsx("a", { href: actionOrLink, className: cn(buttonClassName, "no-underline"), "aria-label": ariaLabel, children: content });
+  return /* @__PURE__ */ jsx("button", { type: "button", className: buttonClassName, onClick: actionOrLink, disabled, "aria-label": ariaLabel, children: content });
+}
+var vertex = `#version 300 es
+in vec2 position;
+void main() {
+  gl_Position = vec4(position, 0.0, 1.0);
+}
+`;
+var fragment = `#version 300 es
+precision highp float;
+uniform vec2 iResolution;
+uniform float iTime;
+uniform float uTimeSpeed;
+uniform float uColorBalance;
+uniform float uWarpStrength;
+uniform float uWarpFrequency;
+uniform float uWarpSpeed;
+uniform float uWarpAmplitude;
+uniform float uBlendAngle;
+uniform float uBlendSoftness;
+uniform float uRotationAmount;
+uniform float uNoiseScale;
+uniform float uGrainAmount;
+uniform float uGrainScale;
+uniform float uGrainAnimated;
+uniform float uContrast;
+uniform float uGamma;
+uniform float uSaturation;
+uniform vec2 uCenterOffset;
+uniform float uZoom;
+uniform vec3 uColor1;
+uniform vec3 uColor2;
+uniform vec3 uColor3;
+out vec4 fragColor;
+#define S(a,b,t) smoothstep(a,b,t)
+mat2 Rot(float a){float s=sin(a),c=cos(a);return mat2(c,-s,s,c);}
+vec2 hash(vec2 p){p=vec2(dot(p,vec2(2127.1,81.17)),dot(p,vec2(1269.5,283.37)));return fract(sin(p)*43758.5453);}
+float noise(vec2 p){vec2 i=floor(p),f=fract(p),u=f*f*(3.0-2.0*f);float n=mix(mix(dot(-1.0+2.0*hash(i+vec2(0.0,0.0)),f-vec2(0.0,0.0)),dot(-1.0+2.0*hash(i+vec2(1.0,0.0)),f-vec2(1.0,0.0)),u.x),mix(dot(-1.0+2.0*hash(i+vec2(0.0,1.0)),f-vec2(0.0,1.0)),dot(-1.0+2.0*hash(i+vec2(1.0,1.0)),f-vec2(1.0,1.0)),u.x),u.y);return 0.5+0.5*n;}
+void mainImage(out vec4 o, vec2 C){
+  float t=iTime*uTimeSpeed;
+  vec2 uv=C/iResolution.xy;
+  float ratio=iResolution.x/iResolution.y;
+  vec2 tuv=uv-0.5+uCenterOffset;
+  tuv/=max(uZoom,0.001);
+  float degree=noise(vec2(t*0.1,tuv.x*tuv.y)*uNoiseScale);
+  tuv.y*=1.0/ratio;
+  tuv*=Rot(radians((degree-0.5)*uRotationAmount+180.0));
+  tuv.y*=ratio;
+  float frequency=uWarpFrequency;
+  float ws=max(uWarpStrength,0.001);
+  float amplitude=uWarpAmplitude/ws;
+  float warpTime=t*uWarpSpeed;
+  tuv.x+=sin(tuv.y*frequency+warpTime)/amplitude;
+  tuv.y+=sin(tuv.x*(frequency*1.5)+warpTime)/(amplitude*0.5);
+  vec3 colLav=uColor1;
+  vec3 colOrg=uColor2;
+  vec3 colDark=uColor3;
+  float b=uColorBalance;
+  float s=max(uBlendSoftness,0.0);
+  mat2 blendRot=Rot(radians(uBlendAngle));
+  float blendX=(tuv*blendRot).x;
+  float edge0=-0.3-b-s;
+  float edge1=0.2-b+s;
+  float v0=0.5-b+s;
+  float v1=-0.3-b-s;
+  vec3 layer1=mix(colDark,colOrg,S(edge0,edge1,blendX));
+  vec3 layer2=mix(colOrg,colLav,S(edge0,edge1,blendX));
+  vec3 col=mix(layer1,layer2,S(v0,v1,tuv.y));
+  vec2 grainUv=uv*max(uGrainScale,0.001);
+  if(uGrainAnimated>0.5){grainUv+=vec2(iTime*0.05);}
+  float grain=fract(sin(dot(grainUv,vec2(12.9898,78.233)))*43758.5453);
+  col+=(grain-0.5)*uGrainAmount;
+  col=(col-0.5)*uContrast+0.5;
+  float luma=dot(col,vec3(0.2126,0.7152,0.0722));
+  col=mix(vec3(luma),col,uSaturation);
+  col=pow(max(col,0.0),vec3(1.0/max(uGamma,0.001)));
+  col=clamp(col,0.0,1.0);
+  o=vec4(col,1.0);
+}
+void main(){
+  vec4 o=vec4(0.0);
+  mainImage(o,gl_FragCoord.xy);
+  fragColor=o;
+}
+`;
+function createGrainientProgram(gl) {
+  return new Program(gl, {
+    vertex,
+    fragment,
+    uniforms: {
+      iTime: { value: 0 },
+      iResolution: { value: new Float32Array([1, 1]) },
+      uTimeSpeed: { value: 0.25 },
+      uColorBalance: { value: 0 },
+      uWarpStrength: { value: 1 },
+      uWarpFrequency: { value: 5 },
+      uWarpSpeed: { value: 2 },
+      uWarpAmplitude: { value: 50 },
+      uBlendAngle: { value: 0 },
+      uBlendSoftness: { value: 0.05 },
+      uRotationAmount: { value: 500 },
+      uNoiseScale: { value: 2 },
+      uGrainAmount: { value: 0.1 },
+      uGrainScale: { value: 2 },
+      uGrainAnimated: { value: 0 },
+      uContrast: { value: 1.5 },
+      uGamma: { value: 1 },
+      uSaturation: { value: 1 },
+      uCenterOffset: { value: new Float32Array([0, 0]) },
+      uZoom: { value: 0.9 },
+      uColor1: { value: new Float32Array([1, 1, 1]) },
+      uColor2: { value: new Float32Array([1, 1, 1]) },
+      uColor3: { value: new Float32Array([1, 1, 1]) }
+    }
+  });
+}
+var ctxMap = /* @__PURE__ */ new WeakMap();
+var HEX_COLOR_RE = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
+var hexToRgb = (hex) => {
+  const result = HEX_COLOR_RE.exec(hex);
+  if (!result) return [1, 1, 1];
+  const [, r = "ff", g = "ff", b = "ff"] = result;
+  return [Number.parseInt(r, 16) / 255, Number.parseInt(g, 16) / 255, Number.parseInt(b, 16) / 255];
+};
+var prefersReducedMotion = () => typeof globalThis !== "undefined" && globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true;
+var isLowPowerClient = () => {
+  if (typeof globalThis === "undefined") return false;
+  const narrow = globalThis.matchMedia?.("(max-width: 1023px)").matches === true;
+  const fewCores = typeof navigator !== "undefined" && typeof navigator.hardwareConcurrency === "number" && navigator.hardwareConcurrency <= 4;
+  return narrow || fewCores;
+};
+var GRAIN_LAYER = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E")`;
+var fallbackGradient = (c1, c2, c3) => `${GRAIN_LAYER}, linear-gradient(135deg, ${c1} 0%, ${c2} 55%, ${c3} 100%)`;
+var applyStaticBg = (el, src) => {
+  el.style.backgroundImage = `url(${src})`;
+  el.style.backgroundSize = "cover";
+  el.style.backgroundPosition = "center";
+};
+function initGrainient(container) {
+  const renderer = new Renderer({
+    webgl: 2,
+    alpha: true,
+    antialias: false,
+    dpr: Math.min(globalThis.devicePixelRatio || 1, 2)
+  });
+  const gl = renderer.gl;
+  const canvas = gl.canvas;
+  canvas.style.width = "100%";
+  canvas.style.height = "100%";
+  canvas.style.display = "block";
+  container.appendChild(canvas);
+  const geometry = new Triangle(gl);
+  const program = createGrainientProgram(gl);
+  const mesh = new Mesh(gl, { geometry, program });
+  ctxMap.set(container, { renderer, program, mesh });
+  const setSize = () => {
+    const rect = container.getBoundingClientRect();
+    renderer.setSize(Math.max(1, Math.floor(rect.width)), Math.max(1, Math.floor(rect.height)));
+    const res = program.uniforms.iResolution.value;
+    res[0] = gl.drawingBufferWidth;
+    res[1] = gl.drawingBufferHeight;
+    renderer.render({ scene: mesh });
+  };
+  const ro = new ResizeObserver(setSize);
+  ro.observe(container);
+  setSize();
+  let raf = 0;
+  let isVisible = true;
+  let isPageVisible = !document.hidden;
+  const t0 = performance.now();
+  const loop = (t) => {
+    program.uniforms.iTime.value = (t - t0) * 1e-3;
+    renderer.render({ scene: mesh });
+    raf = requestAnimationFrame(loop);
+  };
+  const tryStart = () => {
+    if (isVisible && isPageVisible && raf === 0) raf = requestAnimationFrame(loop);
+  };
+  const tryStop = () => {
+    if (raf !== 0) {
+      cancelAnimationFrame(raf);
+      raf = 0;
+    }
+  };
+  const reduce = prefersReducedMotion();
+  const io = new IntersectionObserver(
+    ([entry]) => {
+      if (!entry) return;
+      isVisible = entry.isIntersecting;
+      if (isVisible) tryStart();
+      else tryStop();
+    },
+    { threshold: 0 }
+  );
+  if (!reduce) io.observe(container);
+  const onVisibility = () => {
+    isPageVisible = !document.hidden;
+    if (isPageVisible) tryStart();
+    else tryStop();
+  };
+  if (!reduce) document.addEventListener("visibilitychange", onVisibility);
+  if (!reduce) tryStart();
+  return () => {
+    tryStop();
+    ro.disconnect();
+    io.disconnect();
+    document.removeEventListener("visibilitychange", onVisibility);
+    ctxMap.delete(container);
+    try {
+      container.removeChild(canvas);
+    } catch {
+    }
+  };
+}
+var Grainient = (props) => {
+  const {
+    timeSpeed = 0.25,
+    colorBalance = 0,
+    warpStrength = 1,
+    warpFrequency = 5,
+    warpSpeed = 2,
+    warpAmplitude = 50,
+    blendAngle = 0,
+    blendSoftness = 0.05,
+    rotationAmount = 500,
+    noiseScale = 2,
+    grainAmount = 0.1,
+    grainScale = 2,
+    grainAnimated = false,
+    contrast = 1.5,
+    gamma = 1,
+    saturation = 1,
+    centerX = 0,
+    centerY = 0,
+    zoom = 0.9,
+    color1 = "#FF9FFC",
+    color2 = "#5227FF",
+    color3 = "#B497CF",
+    staticSrc = "",
+    className = ""
+  } = props;
+  const containerRef = useRef(null);
+  const fallbackRef = useRef(false);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    if (isLowPowerClient() || prefersReducedMotion()) {
+      fallbackRef.current = true;
+      container.dataset.fallback = "true";
+      if (staticSrc) applyStaticBg(container, staticSrc);
+      else container.style.background = fallbackGradient(color1, color2, color3);
+      return;
+    }
+    return initGrainient(container);
+  }, []);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    if (fallbackRef.current) {
+      if (staticSrc) applyStaticBg(container, staticSrc);
+      else container.style.background = fallbackGradient(color1, color2, color3);
+      return;
+    }
+    const ctx = ctxMap.get(container);
+    if (!ctx) return;
+    const { program, renderer, mesh } = ctx;
+    const u = program.uniforms;
+    u.uTimeSpeed.value = timeSpeed;
+    u.uColorBalance.value = colorBalance;
+    u.uWarpStrength.value = warpStrength;
+    u.uWarpFrequency.value = warpFrequency;
+    u.uWarpSpeed.value = warpSpeed;
+    u.uWarpAmplitude.value = warpAmplitude;
+    u.uBlendAngle.value = blendAngle;
+    u.uBlendSoftness.value = blendSoftness;
+    u.uRotationAmount.value = rotationAmount;
+    u.uNoiseScale.value = noiseScale;
+    u.uGrainAmount.value = grainAmount;
+    u.uGrainScale.value = grainScale;
+    u.uGrainAnimated.value = grainAnimated ? 1 : 0;
+    u.uContrast.value = contrast;
+    u.uGamma.value = gamma;
+    u.uSaturation.value = saturation;
+    u.uCenterOffset.value = new Float32Array([centerX, centerY]);
+    u.uZoom.value = zoom;
+    u.uColor1.value = new Float32Array(hexToRgb(color1));
+    u.uColor2.value = new Float32Array(hexToRgb(color2));
+    u.uColor3.value = new Float32Array(hexToRgb(color3));
+    if (prefersReducedMotion()) renderer.render({ scene: mesh });
+  }, [
+    timeSpeed,
+    colorBalance,
+    warpStrength,
+    warpFrequency,
+    warpSpeed,
+    warpAmplitude,
+    blendAngle,
+    blendSoftness,
+    rotationAmount,
+    noiseScale,
+    grainAmount,
+    grainScale,
+    grainAnimated,
+    contrast,
+    gamma,
+    saturation,
+    centerX,
+    centerY,
+    zoom,
+    color1,
+    color2,
+    color3,
+    staticSrc
+  ]);
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, className: cn("grainient-container", className) });
+};
+var grainient_default = Grainient;
+function useMediaQuery(query, defaultState = false) {
+  const [matches, setMatches] = useState(defaultState);
+  useEffect(() => {
+    const mql = globalThis.matchMedia(query);
+    setMatches(mql.matches);
+    const onChange = (e) => setMatches(e.matches);
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [query]);
+  return matches;
+}
+function resolveColor(element, color) {
+  if (!color.startsWith("var(")) return color;
+  const token = color.slice(4, -1).trim();
+  return globalThis.getComputedStyle(element).getPropertyValue(token).trim() || color;
+}
+var BREAKPOINTS = [
+  ["xs", 30],
+  ["sm", 40],
+  ["md", 50],
+  ["lg", 64],
+  ["xl", 80],
+  ["2xl", 96]
+];
+function getBreakpoint() {
+  let current = "base";
+  for (const [name, rem] of BREAKPOINTS) {
+    if (globalThis.matchMedia(`(min-width: ${rem}rem)`).matches) current = name;
+  }
+  return current;
+}
+function onBreakpointChange(listener) {
+  const queries = BREAKPOINTS.map(([, rem]) => globalThis.matchMedia(`(min-width: ${rem}rem)`));
+  for (const query of queries) query.addEventListener("change", listener);
+  return () => {
+    for (const query of queries) query.removeEventListener("change", listener);
+  };
+}
+function Highlighter({
+  children,
+  className,
+  action = "highlight",
+  color = "var(--marker-highlight)",
+  strokeWidth = 1.5,
+  animationDuration = 600,
+  delay = 0,
+  iterations = 2,
+  padding = 2,
+  multiline = true,
+  isView = false
+}) {
+  const elementRef = useRef(null);
+  const isInView = useInView(elementRef, { once: true, margin: "-10%" });
+  const reducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+  const [themeVersion, setThemeVersion] = useState(0);
+  const shouldShow = !isView || isInView;
+  useLayoutEffect(() => {
+    const observer = new MutationObserver(() => setThemeVersion((v) => v + 1));
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
+  useLayoutEffect(() => {
+    const element = elementRef.current;
+    if (!(shouldShow && element)) return;
+    let annotation;
+    let untrack;
+    const draw = () => {
+      annotation = annotate(element, {
+        type: action,
+        color: resolveColor(element, color),
+        strokeWidth,
+        animationDuration,
+        animate: !reducedMotion,
+        iterations,
+        padding,
+        multiline
+      });
+      annotation.show();
+      let drawnAt = getBreakpoint();
+      untrack = onBreakpointChange(() => {
+        const current = getBreakpoint();
+        if (current === drawnAt) return;
+        drawnAt = current;
+        annotation?.show();
+      });
+    };
+    const startDelay = reducedMotion ? 0 : delay;
+    const timer2 = startDelay > 0 ? globalThis.setTimeout(draw, startDelay) : void 0;
+    if (timer2 === void 0) draw();
+    return () => {
+      globalThis.clearTimeout(timer2);
+      untrack?.();
+      annotation?.remove();
+    };
+  }, [
+    shouldShow,
+    action,
+    color,
+    strokeWidth,
+    animationDuration,
+    delay,
+    iterations,
+    padding,
+    multiline,
+    reducedMotion,
+    themeVersion
+  ]);
+  return /* @__PURE__ */ jsx("span", { className: cn("relative inline-block bg-transparent", className), children: /* @__PURE__ */ jsx("span", { ref: elementRef, children }) });
+}
+var FIELD_BORDER = {
+  idle: "border-(--color-border)",
+  focused: "border-(--color-foreground)/40",
+  error: "border-(--color-destructive)"
+};
+var FIELD_HEIGHT = {
+  sm: "h-8",
+  md: "h-9",
+  lg: "h-11"
+};
+var FIELD_SHAPE = {
+  rounded: "rounded-lg",
+  pill: "rounded-full"
+};
+var INPUT_SIZE = {
+  sm: "text-xs",
+  md: "text-sm",
+  lg: "text-base"
+};
+var INPUT_PAD = {
+  sm: "px-2.5",
+  md: "px-3",
+  lg: "px-3.5"
+};
+function Input({
+  label,
+  error,
+  hint,
+  leftAdornment,
+  rightAdornment,
+  size = "md",
+  shape = "rounded",
+  className,
+  inputClassName,
+  inputType = "text",
+  id: idProp,
+  onFocus,
+  onBlur,
+  disabled,
+  autoFocus,
+  ...inputProps
+}) {
+  const autoId = useId();
+  const id = idProp ?? autoId;
+  const [focused, setFocused] = useState(false);
+  const hasError = Boolean(error);
+  const errorMessage = typeof error === "string" ? error : null;
+  const state = hasError ? "error" : focused ? "focused" : "idle";
+  const hasLeft = Boolean(leftAdornment);
+  const hasRight = Boolean(rightAdornment);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", className), children: [
+    label ? /* @__PURE__ */ jsx("label", { htmlFor: id, className: "px-1 font-medium text-(--color-foreground) text-sm", children: label }) : null,
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "relative flex flex-row items-center overflow-hidden border",
+          FIELD_BORDER[state],
+          FIELD_HEIGHT[size],
+          FIELD_SHAPE[shape],
+          disabled && "opacity-60"
+        ),
+        children: [
+          hasLeft ? /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute top-0 bottom-0 left-3 z-10 flex items-center justify-center", children: leftAdornment }) : null,
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id,
+              type: inputType,
+              disabled,
+              autoFocus,
+              onFocus: (event_) => {
+                setFocused(true);
+                onFocus?.(event_);
+              },
+              onBlur: (event_) => {
+                setFocused(false);
+                onBlur?.(event_);
+              },
+              className: cn(
+                "h-full min-w-0 flex-1 bg-transparent text-(--color-foreground) outline-none",
+                INPUT_SIZE[size],
+                hasLeft ? "pl-10" : INPUT_PAD[size],
+                hasRight ? "pr-10" : INPUT_PAD[size],
+                inputClassName
+              ),
+              ...inputProps
+            }
+          ),
+          hasRight ? /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute top-0 right-3 bottom-0 z-10 flex items-center justify-center", children: rightAdornment }) : null
+        ]
+      }
+    ),
+    errorMessage ? /* @__PURE__ */ jsx("p", { role: "alert", className: "px-1 text-(--color-destructive) text-xs", children: errorMessage }) : hint ? /* @__PURE__ */ jsx("p", { className: "px-1 text-(--color-muted-foreground) text-xs", children: hint }) : null
+  ] });
+}
+function LiquidMetal({
+  colorBack = "#aaaaac",
+  colorTint = "#ffffff",
+  speed = 0.5,
+  repetition = 4,
+  distortion = 0.1,
+  scale = 1,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: cn("pointer-events-none absolute inset-0 z-0 overflow-hidden", className), style, children: /* @__PURE__ */ jsx(
+    LiquidMetal$1,
+    {
+      colorBack,
+      colorTint,
+      speed,
+      repetition,
+      distortion,
+      softness: 0,
+      shiftRed: 0.3,
+      shiftBlue: -0.3,
+      angle: 45,
+      shape: "none",
+      scale,
+      fit: "cover",
+      style: { width: "100%", height: "100%" }
+    }
+  ) });
+}
+function ChevronDownIcon2(props) {
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", ...props, children: /* @__PURE__ */ jsx("path", { d: "M1 3.5L5 7.5L9 3.5", stroke: "currentColor", strokeWidth: "1.5" }) });
+}
+function ChevronRightIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", ...props, children: /* @__PURE__ */ jsx("path", { d: "M3.5 1L7.5 5L3.5 9", stroke: "currentColor", strokeWidth: "1.5" }) });
+}
+function ArrowSvg(props) {
+  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", width: "20", height: "10", viewBox: "0 0 20 10", fill: "none", ...props, children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
+        className: "fill-(--popup-surface,var(--surface-3))"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",
+        className: "fill-border"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",
+        className: "fill-border"
+      }
+    )
+  ] });
+}
+var navigationMenuTriggerStyle = cva(
+  "box-border flex items-center justify-center gap-1.5 h-10 px-2.5 xs:px-3 m-0 rounded-md text-foreground font-medium !text-[15px] leading-6 select-none no-underline hover:text-foreground data-[popup-open]:bg-black/[0.07] dark:data-[popup-open]:bg-white/[0.07] data-[popup-open]:text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring focus-visible:relative"
+);
+var navigationMenuSubTriggerStyle = cva(
+  "w-full text-left relative block rounded-md p-2.5 xs:p-3 no-underline text-inherit hover:bg-black/[0.07] dark:hover:bg-white/[0.07] hover:text-foreground active:bg-black/[0.11] dark:active:bg-white/[0.11] focus-visible:relative focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-ring data-[popup-open]:bg-black/[0.07] dark:data-[popup-open]:bg-white/[0.07] data-[popup-open]:text-foreground"
+);
+function NavigationMenu({
+  className,
+  children,
+  side,
+  sideOffset = 10,
+  align,
+  alignOffset,
+  collisionPadding = { top: 5, bottom: 5, left: 20, right: 20 },
+  collisionBoundary,
+  arrow = false,
+  positionMethod = "fixed",
+  level = 2,
+  shadowLevel = 2,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    NavigationMenu$1.Root,
+    {
+      "data-slot": "navigation-menu",
+      "data-level": level,
+      className: cn("min-w-max rounded-md p-1 text-foreground", solidSurface(level, shadowLevel), className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          NavigationMenuViewport,
+          {
+            side,
+            sideOffset,
+            align,
+            alignOffset,
+            collisionPadding,
+            collisionBoundary,
+            arrow,
+            positionMethod
+          }
+        )
+      ]
+    }
+  );
+}
+function NavigationMenuList({ className, ...props }) {
+  return /* @__PURE__ */ jsx(NavigationMenu$1.List, { "data-slot": "navigation-menu-list", className: cn("relative flex", className), ...props });
+}
+function NavigationMenuItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(NavigationMenu$1.Item, { "data-slot": "navigation-menu-item", className: cn("relative", className), ...props });
+}
+function NavigationMenuTrigger({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    NavigationMenu$1.Trigger,
+    {
+      "data-slot": "navigation-menu-trigger",
+      className: cn(navigationMenuTriggerStyle(), className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(NavigationMenuIcon, {})
+      ]
+    }
+  );
+}
+function NavigationMenuIcon({
+  className,
+  render = /* @__PURE__ */ jsx(ChevronDownIcon2, {}),
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    NavigationMenu$1.Icon,
+    {
+      className: cn("transition-transform duration-200 ease-in-out data-[popup-open]:rotate-180", className),
+      render,
+      ...props
+    }
+  );
+}
+function NavigationMenuSubTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    NavigationMenu$1.Trigger,
+    {
+      "data-slot": "navigation-menu-sub-trigger",
+      className: cn(navigationMenuSubTriggerStyle(), className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          NavigationMenu$1.Icon,
+          {
+            className: "absolute top-1/2 right-2.5 flex h-2.5 w-2.5 -translate-y-1/2 items-center justify-center transition-transform duration-200 ease-in-out data-[popup-open]:rotate-180",
+            render: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+          }
+        )
+      ]
+    }
+  );
+}
+function NavigationMenuContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    NavigationMenu$1.Content,
+    {
+      "data-slot": "navigation-menu-content",
+      className: cn(
+        "h-full w-[calc(100vw-2.5rem)] p-4 sm:w-max",
+        // Transitions for opacity/transform/filter
+        "transition-[opacity,transform,filter,scale,translate] duration-(--duration) ease-(--easing)",
+        // Starting/ending opacity
+        "data-ending-style:opacity-0 data-starting-style:opacity-0",
+        // Direction-aware slide (starting)
+        "data-starting-style:data-[activation-direction=left]:-translate-x-1/2",
+        "data-starting-style:data-[activation-direction=right]:translate-x-1/2",
+        // Direction-aware slide (ending)
+        "data-ending-style:data-[activation-direction=left]:translate-x-1/2",
+        "data-ending-style:data-[activation-direction=right]:-translate-x-1/2",
+        // Blur effect during transitions
+        "data-ending-style:blur-[4px] data-starting-style:blur-[4px]",
+        // scale effect during transitions
+        "data-ending-style:scale-97 data-starting-style:scale-97",
+        // Motion reduce support
+        "motion-reduce:transition-none",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function NavigationMenuLink({ className, standalone, ...props }) {
+  return /* @__PURE__ */ jsx(
+    NavigationMenu$1.Link,
+    {
+      "data-slot": "navigation-menu-link",
+      className: cn(
+        standalone ? navigationMenuTriggerStyle() : "block rounded-md p-2.5 xs:p-3 text-inherit no-underline duration-150 hover:text-foreground hover:duration-0 focus-visible:relative focus-visible:outline-2 focus-visible:outline-ring focus-visible:-outline-offset-1",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function NavigationMenuBackdrop({ ...props }) {
+  return /* @__PURE__ */ jsx(NavigationMenu$1.Backdrop, { "data-slot": "navigation-menu-backdrop", ...props });
+}
+function NavigationMenuPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(NavigationMenu$1.Portal, { "data-slot": "navigation-menu-portal", ...props });
+}
+function NavigationMenuArrow({ ...props }) {
+  return /* @__PURE__ */ jsx(
+    NavigationMenu$1.Arrow,
+    {
+      className: "flex transition-[left] duration-[var(--duration)] ease-[var(--easing)] data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=top]:bottom-[-8px] data-[side=right]:left-[-13px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180",
+      ...props,
+      children: /* @__PURE__ */ jsx(ArrowSvg, {})
+    }
+  );
+}
+function NavigationMenuViewport({
+  className,
+  children,
+  side,
+  sideOffset,
+  align,
+  alignOffset,
+  collisionPadding,
+  collisionBoundary,
+  arrow = false,
+  positionMethod = "fixed",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(NavigationMenuPortal, { children: /* @__PURE__ */ jsx(
+    NavigationMenu$1.Positioner,
+    {
+      "data-slot": "navigation-menu-positioner",
+      side,
+      sideOffset,
+      align,
+      alignOffset,
+      collisionPadding,
+      collisionBoundary,
+      positionMethod,
+      className: "z-50 box-border h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-(--duration) ease-(--easing) before:absolute before:content-[''] data-instant:transition-none data-[side=bottom]:before:-top-2.5 data-[side=left]:before:top-0 data-[side=right]:before:top-0 data-[side=bottom]:before:right-0 data-[side=left]:before:-right-2.5 data-[side=top]:before:right-0 data-[side=left]:before:bottom-0 data-[side=right]:before:bottom-0 data-[side=top]:before:-bottom-2.5 data-[side=bottom]:before:left-0 data-[side=right]:before:-left-2.5 data-[side=top]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=top]:before:h-2.5 data-[side=left]:before:w-2.5 data-[side=right]:before:w-2.5",
+      style: validCssVars({ "--duration": "0.35s", "--easing": "cubic-bezier(0.22, 1, 0.36, 1)" }),
+      children: /* @__PURE__ */ jsxs(
+        NavigationMenu$1.Popup,
+        {
+          "data-slot": "navigation-menu-content",
+          className: cn(
+            "relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) overflow-hidden rounded-md text-foreground transition-[opacity,transform,width,height,scale,translate] duration-(--duration) ease-(--easing) data-ending-style:scale-90 data-starting-style:scale-90 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-150",
+            solidSurface(3, 3)
+          ),
+          children: [
+            arrow ? /* @__PURE__ */ jsx(NavigationMenuArrow, {}) : null,
+            /* @__PURE__ */ jsx(
+              NavigationMenu$1.Viewport,
+              {
+                "data-slot": "navigation-menu-viewport",
+                className: cn("relative h-full w-full overflow-hidden", className),
+                ...props,
+                children
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) });
+}
+function NavigationMenuSub({
+  className,
+  children,
+  orientation = "vertical",
+  side = "right",
+  sideOffset = 24,
+  align = "end",
+  alignOffset = -24,
+  arrow = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    NavigationMenu$1.Root,
+    {
+      "data-slot": "navigation-menu-sub",
+      className: cn("", className),
+      orientation,
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(NavigationMenuPortal, { children: /* @__PURE__ */ jsx(
+          NavigationMenu$1.Positioner,
+          {
+            "data-slot": "navigation-menu-sub-positioner",
+            sideOffset,
+            alignOffset,
+            align,
+            side,
+            className: "box-border h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-(--duration) ease-(--easing) before:absolute before:content-[''] data-instant:transition-none data-[side=bottom]:before:-top-2.5 data-[side=left]:before:top-0 data-[side=right]:before:top-0 data-[side=bottom]:before:right-0 data-[side=left]:before:-right-2.5 data-[side=top]:before:right-0 data-[side=left]:before:bottom-0 data-[side=right]:before:bottom-0 data-[side=top]:before:-bottom-2.5 data-[side=bottom]:before:left-0 data-[side=right]:before:-left-2.5 data-[side=top]:before:left-0 data-[side=bottom]:before:h-2.5 data-[side=top]:before:h-2.5 data-[side=left]:before:w-2.5 data-[side=right]:before:w-2.5",
+            style: validCssVars({ "--duration": "0.35s", "--easing": "cubic-bezier(0.22, 1, 0.36, 1)" }),
+            children: /* @__PURE__ */ jsxs(
+              NavigationMenu$1.Popup,
+              {
+                "data-slot": "navigation-menu-sub-content",
+                className: cn(
+                  "relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) overflow-hidden rounded-md text-foreground transition-[opacity,transform,width,height,scale,translate] duration-(--duration) ease-(--easing) data-ending-style:scale-90 data-starting-style:scale-90 data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-150",
+                  solidSurface(5, 5)
+                ),
+                children: [
+                  arrow ? /* @__PURE__ */ jsx(NavigationMenuArrow, {}) : null,
+                  /* @__PURE__ */ jsx(
+                    NavigationMenu$1.Viewport,
+                    {
+                      "data-slot": "navigation-menu-sub-viewport",
+                      className: "relative h-full w-full overflow-hidden"
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+}
+function PasswordInput({ inputType = "password", ...props }) {
+  const [visible, setVisible] = useState(false);
+  const toggle = useCallback(() => setVisible((v) => !v), []);
+  const eye = /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: toggle,
+      className: "pointer-events-auto cursor-pointer text-(--color-muted-foreground) hover:text-(--color-foreground)",
+      "aria-label": visible ? "Hide password" : "Show password",
+      tabIndex: -1,
+      children: visible ? /* @__PURE__ */ jsx(EyeOffIcon, { className: "size-5" }) : /* @__PURE__ */ jsx(EyeIcon, { className: "size-5" })
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      ...props,
+      inputType: visible ? "text" : "password",
+      rightAdornment: eye,
+      autoComplete: inputType === "new-password" ? "new-password" : "current-password"
+    }
+  );
+}
+function EyeIcon(props) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" }),
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+      ]
+    }
+  );
+}
+function EyeOffIcon(props) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" }),
+        /* @__PURE__ */ jsx("path", { d: "M14.084 14.158a3 3 0 0 1-4.242-4.242" }),
+        /* @__PURE__ */ jsx("path", { d: "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" }),
+        /* @__PURE__ */ jsx("path", { d: "m2 2 20 20" })
+      ]
+    }
+  );
+}
+var rainbowButtonVariants = cva(
+  cn(
+    "relative cursor-pointer group transition-transform animate-rainbow",
+    "inline-flex items-center justify-center gap-2 shrink-0",
+    "rounded-sm outline-none focus-visible:ring-[3px] aria-invalid:border-destructive",
+    "text-sm font-medium whitespace-nowrap",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0"
+  ),
+  {
+    variants: {
+      variant: {
+        default: "border-0 bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,var(--color-rainbow-1),var(--color-rainbow-5),var(--color-rainbow-3),var(--color-rainbow-4),var(--color-rainbow-2))] bg-[length:200%] text-primary-foreground [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.125rem)_solid_transparent] before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,var(--color-rainbow-1),var(--color-rainbow-5),var(--color-rainbow-3),var(--color-rainbow-4),var(--color-rainbow-2))] before:bg-[length:200%] before:[filter:blur(0.75rem)] dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,var(--color-rainbow-1),var(--color-rainbow-5),var(--color-rainbow-3),var(--color-rainbow-4),var(--color-rainbow-2))]",
+        outline: "border border-input border-b-transparent bg-[linear-gradient(#ffffff,#ffffff),linear-gradient(#ffffff_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,var(--color-rainbow-1),var(--color-rainbow-5),var(--color-rainbow-3),var(--color-rainbow-4),var(--color-rainbow-2))] bg-[length:200%] text-accent-foreground [background-clip:padding-box,border-box,border-box] [background-origin:border-box] before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,var(--color-rainbow-1),var(--color-rainbow-5),var(--color-rainbow-3),var(--color-rainbow-4),var(--color-rainbow-2))] before:bg-[length:200%] before:[filter:blur(0.75rem)] dark:bg-[linear-gradient(#0a0a0a,#0a0a0a),linear-gradient(#0a0a0a_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,var(--color-rainbow-1),var(--color-rainbow-5),var(--color-rainbow-3),var(--color-rainbow-4),var(--color-rainbow-2))]"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-11 rounded-md px-8",
+        icon: "size-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function RainbowButton({ className, variant, size, asChild = false, ref, ...props }) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(Comp, { "data-slot": "button", className: cn(rainbowButtonVariants({ variant, size, className })), ref, ...props });
+}
+RainbowButton.displayName = "RainbowButton";
+function nearestIndex(steps, value) {
+  return steps.reduce((best, s, i) => Math.abs(s - value) < Math.abs(steps[best] - value) ? i : best, 0);
+}
+function RangeSlider({ label, value, steps, ticks, valueLabel, onChange }) {
+  const min = steps[0];
+  const max = steps.at(-1) ?? min;
+  const pct = (value - min) / (max - min) * 100;
+  const index = nearestIndex(steps, value);
+  const handleChange = useCallback(
+    (event_) => onChange(steps[Number(event_.target.value)]),
+    [onChange, steps]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-5 flex items-baseline justify-between gap-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "font-semibold text-[15px] text-(--color-foreground)", children: label }),
+      /* @__PURE__ */ jsx("p", { className: "font-bold font-numeric text-[20px] text-(--color-foreground) tabular-nums", children: valueLabel })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", style: { height: 20 }, children: [
+      /* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-1/2 h-1.5 -translate-y-1/2 rounded-full bg-(--color-border)" }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "pointer-events-none absolute top-1/2 left-0 h-1.5 -translate-y-1/2 rounded-full bg-(--color-foreground)",
+          style: { width: `${pct}%` }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          min: 0,
+          max: steps.length - 1,
+          step: 1,
+          value: index,
+          onChange: handleChange,
+          className: "peer absolute inset-0 z-10 h-full w-full cursor-pointer opacity-0",
+          "aria-label": label,
+          "aria-valuetext": valueLabel
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "pointer-events-none absolute top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-(--color-foreground) peer-focus-visible:outline-2 peer-focus-visible:outline-(--color-foreground) peer-focus-visible:outline-offset-2",
+          style: {
+            left: `${pct}%`,
+            width: 16,
+            height: 16,
+            boxShadow: "0 2px 8px rgba(0,0,0,0.15)"
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "relative mt-2", style: { height: 16 }, children: ticks.map((tick2, i) => {
+      const tp = (tick2.value - min) / (max - min) * 100;
+      const isFirst = i === 0;
+      const isLast = i === ticks.length - 1;
+      let left = `${tp}%`;
+      if (isFirst) left = 0;
+      else if (isLast) left = void 0;
+      return /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "absolute font-numeric text-(--color-muted-foreground) text-[11px] tabular-nums",
+          style: {
+            left,
+            right: isLast ? 0 : void 0,
+            transform: isFirst || isLast ? void 0 : "translateX(-50%)"
+          },
+          children: tick2.label
+        },
+        tick2.value
+      );
+    }) })
+  ] });
+}
+var tick = 0;
+var listeners = /* @__PURE__ */ new Set();
+var timer = null;
+function subscribe(onChange) {
+  listeners.add(onChange);
+  if (timer === null)
+    timer = setInterval(() => {
+      tick += 1;
+      for (const l of listeners) l();
+    }, ROTATE_MS);
+  return () => {
+    listeners.delete(onChange);
+    if (listeners.size === 0 && timer !== null) {
+      clearInterval(timer);
+      timer = null;
+    }
+  };
+}
+var getSnapshot = () => tick;
+var getServerSnapshot = () => 0;
+var ROTATE_MS = 4e3;
+function RollingBadge({ badges, className }) {
+  const index = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot) % badges.length;
+  const badge = badges[index];
+  if (badges.length === 0 || !badge) return null;
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      layout: true,
+      className: cn(
+        "relative inline-flex h-8 items-center overflow-hidden rounded-full border border-(--color-border) bg-background px-3.5 shadow-sm",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "popLayout", children: /* @__PURE__ */ jsxs(
+        motion.span,
+        {
+          layout: "position",
+          initial: { y: "120%", opacity: 0 },
+          animate: { y: "0%", opacity: 1 },
+          exit: { y: "-120%", opacity: 0 },
+          transition: {
+            type: "spring",
+            stiffness: 320,
+            damping: 32
+          },
+          className: "flex items-center gap-1.5 whitespace-nowrap font-medium text-[12.5px]",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": true, children: badge.icon }),
+            badge.label
+          ]
+        },
+        index
+      ) })
+    }
+  );
+}
+function SavingsBadge({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "rounded-full bg-emerald-500/15 px-2.5 py-0.5 font-numeric font-semibold text-[11px] text-emerald-500 tabular-nums",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ShineBorder({
+  borderWidth = 1,
+  duration = 14,
+  shineColor = "#000000",
+  className,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: validCssVars({
+        "--border-width": `${borderWidth}px`,
+        "--duration": `${duration}s`,
+        backgroundImage: `radial-gradient(transparent,transparent, ${Array.isArray(shineColor) ? shineColor.join(",") : shineColor},transparent,transparent)`,
+        backgroundSize: "300% 300%",
+        mask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+        WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+        WebkitMaskComposite: "xor",
+        maskComposite: "exclude",
+        padding: "var(--border-width)",
+        ...style
+      }),
+      className: cn(
+        "pointer-events-none absolute inset-0 size-full rounded-[inherit] will-change-[background-position] motion-safe:animate-shine",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var STAR_PATH = "M9.82531 0.843845C10.0553 0.215178 10.9446 0.215178 11.1746 0.843845L11.8618 2.72026C12.4006 4.19229 12.3916 6.39157 13.5 7.5C14.6084 8.60843 16.8077 8.59935 18.2797 9.13822L20.1561 9.82534C20.7858 10.0553 20.7858 10.9447 20.1561 11.1747L18.2797 11.8618C16.8077 12.4007 14.6084 12.3916 13.5 13.5C12.3916 14.6084 12.4006 16.8077 11.8618 18.2798L11.1746 20.1562C10.9446 20.7858 10.0553 20.7858 9.82531 20.1562L9.13819 18.2798C8.59932 16.8077 8.60843 14.6084 7.5 13.5C6.39157 12.3916 4.19225 12.4007 2.72023 11.8618L0.843814 11.1747C0.215148 10.9447 0.215148 10.0553 0.843814 9.82534L2.72023 9.13822C4.19225 8.59935 6.39157 8.60843 7.5 7.5C8.60843 6.39157 8.59932 4.19229 9.13819 2.72026L9.82531 0.843845Z";
+var DEFAULT_COLORS2 = {
+  first: "var(--color-accent-brand)",
+  second: "var(--color-accent-brand-soft)"
+};
+function SparkleStar({ x, y, color, delay, scale }) {
+  return /* @__PURE__ */ jsx(
+    motion.svg,
+    {
+      className: "pointer-events-none absolute z-20",
+      initial: { opacity: 0, left: x, top: y },
+      animate: {
+        opacity: [0, 1, 0],
+        scale: [0, scale, 0],
+        rotate: [75, 120, 150]
+      },
+      transition: {
+        duration: 0.8,
+        repeat: Number.POSITIVE_INFINITY,
+        delay
+      },
+      width: "21",
+      height: "21",
+      viewBox: "0 0 21 21",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx("path", { d: STAR_PATH, fill: color })
+    }
+  );
+}
+function SparklesText({ children, className, sparklesCount = 10, colors = DEFAULT_COLORS2 }) {
+  const reducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+  const [sparkles, setSparkles] = useState([]);
+  const { first, second } = colors;
+  useEffect(() => {
+    if (reducedMotion) {
+      setSparkles([]);
+      return;
+    }
+    const spawn = () => ({
+      x: `${Math.random() * 100}%`,
+      y: `${Math.random() * 100}%`,
+      color: Math.random() > 0.5 ? first : second,
+      delay: Math.random() * 2,
+      scale: Math.random() + 0.3,
+      expiresAt: performance.now() + (Math.random() * 10 + 5) * 1e3
+    });
+    setSparkles(Array.from({ length: sparklesCount }, spawn));
+    const interval = setInterval(() => {
+      setSparkles((current) => {
+        const now = performance.now();
+        if (!current.some((sparkle) => sparkle.expiresAt <= now)) return current;
+        return current.map((sparkle) => sparkle.expiresAt <= now ? spawn() : sparkle);
+      });
+    }, 500);
+    return () => clearInterval(interval);
+  }, [first, second, sparklesCount, reducedMotion]);
+  return /* @__PURE__ */ jsxs("span", { className: cn("relative inline-block", className), children: [
+    sparkles.map((sparkle) => /* @__PURE__ */ jsx(SparkleStar, { ...sparkle }, `${sparkle.x}-${sparkle.y}-${sparkle.expiresAt}`)),
+    children
+  ] });
+}
+var PULL = 0.035;
+function pillTarget(activeIdx, hoverIdx, rects, pull) {
+  const active = rects[activeIdx];
+  if (!active) throw new Error(`No rect at index ${activeIdx}`);
+  if (hoverIdx === null || hoverIdx === activeIdx) return active;
+  const hover = rects[hoverIdx];
+  if (!hover) return active;
+  const activeRight = active.left + active.width;
+  const hoverRight = hover.left + hover.width;
+  const left = Math.min(active.left, active.left + (hover.left - active.left) * pull);
+  const right = Math.max(activeRight, activeRight + (hoverRight - activeRight) * pull);
+  return { left, width: right - left };
+}
+var labelBox = "flex items-center gap-2.5 px-5 py-1.5 font-semibold text-[13px]";
+var badgeBox = "font-bold text-(--color-accent-brand-soft) text-[11px] whitespace-nowrap";
+function Tabs({ tabs, value, onChange, label, className }) {
+  const reduced = useReducedMotion();
+  const pull = reduced ? 0 : PULL;
+  const trackRef = useRef(null);
+  const [rects, setRects] = useState([]);
+  const [trackWidth, setTrackWidth] = useState(0);
+  const [hovered, setHovered] = useState(null);
+  const [ready, setReady] = useState(false);
+  const foundIdx = tabs.findIndex((t) => t.id === value);
+  const activeIdx = foundIdx === -1 ? 0 : foundIdx;
+  const springConfig = reduced ? { stiffness: 700, damping: 60 } : { stiffness: 420, damping: 34, mass: 0.7 };
+  const pillLeft = useSpring(0, springConfig);
+  const pillWidth = useSpring(0, springConfig);
+  const innerX = useTransform(pillLeft, (v) => -v);
+  const measure = useCallback(() => {
+    const track = trackRef.current;
+    if (!track) return;
+    setTrackWidth(track.offsetWidth);
+    const btns = track.querySelectorAll("button[data-index]");
+    setRects(
+      Array.from(btns, (el) => ({
+        left: el.offsetLeft,
+        width: el.offsetWidth
+      }))
+    );
+  }, []);
+  useEffect(() => {
+    measure();
+    const track = trackRef.current;
+    if (!track) return;
+    const ro = new ResizeObserver(measure);
+    ro.observe(track);
+    return () => ro.disconnect();
+  }, [measure]);
+  useEffect(() => {
+    if (rects.length !== tabs.length) return;
+    const target = pillTarget(activeIdx, hovered, rects, pull);
+    if (ready) {
+      pillLeft.set(target.left);
+      pillWidth.set(target.width);
+    } else {
+      pillLeft.jump(target.left);
+      pillWidth.jump(target.width);
+      setReady(true);
+    }
+  }, [rects, tabs.length, activeIdx, hovered, pull, ready, pillLeft, pillWidth]);
+  const handleClick = useCallback(
+    (e) => onChange(tabs[Number(e.currentTarget.dataset.index)].id),
+    [onChange, tabs]
+  );
+  const handleEnter = useCallback((e) => setHovered(Number(e.currentTarget.dataset.index)), []);
+  const handleLeave = useCallback(() => setHovered(null), []);
+  return /* @__PURE__ */ jsx(
+    "fieldset",
+    {
+      "aria-label": label,
+      className: cn("inline-flex items-center rounded-full border border-(--color-border) bg-(--color-surface) p-1", className),
+      children: /* @__PURE__ */ jsxs("div", { ref: trackRef, className: "relative inline-flex items-center", children: [
+        tabs.map((tab, i) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "data-index": i,
+            onClick: handleClick,
+            onMouseEnter: handleEnter,
+            onMouseLeave: handleLeave,
+            "aria-pressed": value === tab.id,
+            className: cn(labelBox, "text-(--color-muted-foreground) hover:text-(--color-foreground)"),
+            children: [
+              tab.label,
+              tab.badge ? /* @__PURE__ */ jsx("span", { className: badgeBox, children: tab.badge }) : null
+            ]
+          },
+          tab.id
+        )),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-y-0 select-none overflow-hidden rounded-full bg-(--color-foreground)",
+            style: { left: pillLeft, width: pillWidth, opacity: ready ? 1 : 0 },
+            children: /* @__PURE__ */ jsx(motion.div, { className: "absolute inset-y-0 left-0 flex items-center", style: { width: trackWidth, x: innerX }, children: tabs.map((tab) => /* @__PURE__ */ jsxs("span", { className: cn(labelBox, "text-(--color-surface)"), children: [
+              tab.label,
+              tab.badge ? /* @__PURE__ */ jsx("span", { className: badgeBox, children: tab.badge }) : null
+            ] }, tab.id)) })
+          }
+        )
+      ] })
+    }
+  );
+}
+var ICON_LAYOUT = "w-8 p-0";
+var LABELED_LAYOUT = "gap-2 px-3 text-[13px]";
+function SunIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: 14,
+      height: 14,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "3", x2: "12", y2: "1" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "23", x2: "12", y2: "21" }),
+        /* @__PURE__ */ jsx("line", { x1: "3", y1: "12", x2: "1", y2: "12" }),
+        /* @__PURE__ */ jsx("line", { x1: "23", y1: "12", x2: "21", y2: "12" }),
+        /* @__PURE__ */ jsx("line", { x1: "5", y1: "5", x2: "3.5", y2: "3.5" }),
+        /* @__PURE__ */ jsx("line", { x1: "20.5", y1: "20.5", x2: "19", y2: "19" }),
+        /* @__PURE__ */ jsx("line", { x1: "19", y1: "5", x2: "20.5", y2: "3.5" }),
+        /* @__PURE__ */ jsx("line", { x1: "4.5", y1: "20.5", x2: "3", y2: "19" })
+      ]
+    }
+  );
+}
+function MoonIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: 14,
+      height: 14,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx("path", { d: "M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8z" })
+    }
+  );
+}
+function ThemeToggle({ theme, onToggle, showLabel = false }) {
+  const size = showLabel ? "md" : "sm";
+  const layoutClassName = showLabel ? LABELED_LAYOUT : ICON_LAYOUT;
+  const isDark = theme === "dark";
+  const label = isDark ? "Switch to light mode" : "Switch to dark mode";
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: "filled",
+      size,
+      actionOrLink: onToggle,
+      className: layoutClassName,
+      "aria-label": label,
+      children: [
+        /* @__PURE__ */ jsx(ActionSwapRollIcon, { value: theme, className: "h-4 w-4", children: isDark ? /* @__PURE__ */ jsx(SunIcon, {}) : /* @__PURE__ */ jsx(MoonIcon, {}) }),
+        showLabel ? /* @__PURE__ */ jsx(ActionSwapRollText, { value: theme, children: label }) : null
+      ]
+    }
+  );
+}
+var BREAKPOINTS2 = [
+  ["xs", 30],
+  ["sm", 40],
+  ["md", 50],
+  ["lg", 64],
+  ["xl", 80],
+  ["2xl", 96]
+];
+function getBreakpoint2() {
+  let current = "base";
+  for (const [name, rem] of BREAKPOINTS2) {
+    if (globalThis.matchMedia(`(min-width: ${rem}rem)`).matches) current = name;
+  }
+  return current;
+}
+function onBreakpointChange2(listener) {
+  const queries = BREAKPOINTS2.map(([, rem]) => globalThis.matchMedia(`(min-width: ${rem}rem)`));
+  for (const query of queries) query.addEventListener("change", listener);
+  return () => {
+    for (const query of queries) query.removeEventListener("change", listener);
+  };
+}
+function getBreakpointServer() {
+  return "base";
+}
+function useBreakpoint() {
+  const subscribe2 = useCallback(onBreakpointChange2, []);
+  return useSyncExternalStore(subscribe2, getBreakpoint2, getBreakpointServer);
+}
+
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger, ActionSwapRollIcon, ActionSwapRollText, AnimatedBeam, ArrowLeft, ArrowRight, ArrowSvg, BREAKPOINTS2 as BREAKPOINTS, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChevronDownIcon2 as ChevronDownIcon, ChevronRightIcon, DiaTextReveal, EASE_OUT, EASE_OUT_CSS, ElevatedInput, FadeIn, FeatureCard, FlowDiamond, FlowNode, FlowPill, GlossyButton, grainient_default as Grainient, Highlighter, Input, JoinArrow, LiquidMetal, NavigationMenu, NavigationMenuArrow, NavigationMenuBackdrop, NavigationMenuContent, NavigationMenuIcon, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPortal, NavigationMenuSub, NavigationMenuSubTrigger, NavigationMenuTrigger, NavigationMenuViewport, PasswordInput, RainbowButton, RangeSlider, RollingBadge, SPRING_SWAP, SavingsBadge, ShineBorder, SparklesText, SplitArrow, Stagger, StaggerItem, Tabs, ThemeToggle, TurnDown, cn, easeOut, easeOutBack, getBreakpoint2 as getBreakpoint, glossyButtonVariants, hasKey, navigationMenuSubTriggerStyle, navigationMenuTriggerStyle, noop, onBreakpointChange2 as onBreakpointChange, rainbowButtonVariants, solidSurface, useBreakpoint, validCssVars };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map