@neo-ui-kit/react 1.2.3 → 1.3.2

package/dist/index.js

@@ -1,8 +1,3 @@
-import {
-  ThemeProvider,
-  themes,
-  useThemePalette
-} from "./chunks/chunk-JZ4GDTH5.js";
 import {
   PianoKeyboard,
   PianoRoll,
@@ -29,18 +24,24 @@ import {
   Grid,
   Icon,
   IconButton,
+  ImageShine,
   InputBase,
   NumberField,
   PeoplePicker,
   Popover,
   RotaryKnob,
+  SegmentedControl,
   Select,
   Slider,
   SvgAsset,
   Switch,
+  Tab,
+  Tabs,
   TagInput,
   TextArea,
   TextField,
+  ThemePicker,
+  ToggleButton,
   buttonView,
   clamp01,
   defaultFieldRegistry,
@@ -60,19 +61,22 @@ import {
   useSvgId,
   variantMaterial,
   vectorElement
-} from "./chunks/chunk-RHMNSDIW.js";
+} from "./chunks/chunk-TAQHE3C5.js";
 import {
+  ThemeProvider,
   getMotionStats,
   refreshMotion,
   setMotionFrameRate,
   subscribeTick,
+  themes,
   useBorder,
   useDecoration,
   usePauseOffscreen,
   useSmoothWheel,
   useTabShape,
+  useThemePalette,
   useTick
-} from "./chunks/chunk-YKCUOZ7V.js";
+} from "./chunks/chunk-ICRXRGIW.js";
 import {
   LocaleProvider,
   addMessages,
@@ -436,7 +440,7 @@ function Loader({ src = loaderDefaultImage, animation = "spin", size, speed = 1,
   useLoaderStyles();
   const ref = useRef2(null);
   usePauseOffscreen(ref);
-  const builtIn2 = src === loaderDefaultImage;
+  const builtIn = src === loaderDefaultImage;
   const vars = {
     ...style,
     ...size !== void 0 ? { "--ad-loader-size": typeof size === "number" ? `${size / 16}rem` : Object.hasOwn(loaderSizes, size) ? loaderSizes[size] : size } : {},
@@ -444,10 +448,10 @@ function Loader({ src = loaderDefaultImage, animation = "spin", size, speed = 1,
     ...color3 ? { "--ad-loader-color": color3 } : {},
     ...palette?.[1] ? { "--ad-loader-color-2": palette[1] } : {},
     ...palette?.[2] ? { "--ad-loader-color-3": palette[2] } : {},
-    ...builtIn2 || animation === "shine" ? { "--ad-loader-src": `url("${src}")` } : {}
+    ...builtIn || animation === "shine" ? { "--ad-loader-src": `url("${src}")` } : {}
   };
   const rings = ["wave", "palette"].includes(animation) ? 2 : ["bounce", "orbit", "glow", "radar"].includes(animation) ? 1 : 0;
-  const picture = builtIn2 ? /* @__PURE__ */ jsx5("span", { className: "ad-loader-img ad-loader-default-image", "aria-hidden": "true" }) : /* @__PURE__ */ jsx5("img", { className: "ad-loader-img", src, alt: "", draggable: false });
+  const picture = builtIn ? /* @__PURE__ */ jsx5("span", { className: "ad-loader-img ad-loader-default-image", "aria-hidden": "true" }) : /* @__PURE__ */ jsx5("img", { className: "ad-loader-img", src, alt: "", draggable: false });
   return /* @__PURE__ */ jsxs4("span", { ...mark("Loader", p), ref, role: "status", "aria-label": label ?? tr2("\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430"), "data-animation": animation, style: vars, children: [
     Array.from({ length: rings }, (_, i) => /* @__PURE__ */ jsx5("span", { className: "ad-loader-ring", "aria-hidden": "true" }, i)),
     picture,
@@ -457,170 +461,11 @@ function Loader({ src = loaderDefaultImage, animation = "spin", size, speed = 1,
 }
 
 // src/components/foundation/LoaderGenerator/LoaderGenerator.tsx
-import { useEffect, useRef as useRef4, useState as useState2 } from "react";
-
-// src/components/controls/Tabs/Tabs.tsx
-import { useLayoutEffect, useRef as useRef3, useState } from "react";
-
-// src/components/controls/Tab/Tab.tsx
-import { forwardRef } from "react";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-var Tab = /* @__PURE__ */ forwardRef(function Tab2({
-  selected = false,
-  panelId,
-  icon,
-  endIcon,
-  label,
-  children,
-  tabIndex,
-  variant: _variant,
-  loading: _loading,
-  round: _round,
-  size: _size,
-  tone: _tone,
-  material: _material,
-  ...p
-}, ref) {
-  return /* @__PURE__ */ jsxs5(
-    "button",
-    {
-      ...p,
-      ...mark("Tab", { ...p, size: _size }),
-      ref,
-      type: "button",
-      role: "tab",
-      "aria-selected": selected,
-      "aria-controls": panelId,
-      tabIndex: tabIndex ?? (selected ? 0 : -1),
-      children: [
-        icon && /* @__PURE__ */ jsx6(Icon, { name: icon }),
-        /* @__PURE__ */ jsx6("span", { className: "ad-tab-label", children: children ?? label }),
-        endIcon && /* @__PURE__ */ jsx6(Icon, { name: endIcon })
-      ]
-    }
-  );
-});
-
-// src/components/controls/Tabs/Tabs.tsx
-import { Fragment, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
-function Tabs(p) {
-  const tr2 = useTr();
-  const items = p.items ?? [
-    { value: "appearance", label: tr2("\u0412\u043D\u0435\u0448\u043D\u0438\u0439 \u0432\u0438\u0434"), icon: "palette" },
-    { value: "audio", label: tr2("\u0410\u0443\u0434\u0438\u043E"), icon: "audio" },
-    { value: "advanced", label: tr2("\u0414\u043E\u043F\u043E\u043B\u043D\u0438\u0442\u0435\u043B\u044C\u043D\u043E"), icon: "wrench" }
-  ];
-  const [value, setValue] = useControllable(
-    p.value,
-    p.defaultValue ?? items.find((item) => !item.disabled)?.value ?? "",
-    p.onValueChange
-  );
-  const buttons = useRef3([]);
-  const selected = items.findIndex((item) => item.value === value && !item.disabled);
-  const firstEnabled = items.findIndex((item) => !item.disabled);
-  const fallback = items[firstEnabled]?.value;
-  useLayoutEffect(() => {
-    if (p.value === void 0 && selected < 0 && fallback !== void 0) setValue(fallback);
-  }, [p.value, selected, fallback, setValue]);
-  const [place, setPlace] = useState();
-  const [moving, setMoving] = useState(false);
-  const first = useRef3(true);
-  useLayoutEffect(() => {
-    const tab = buttons.current[selected];
-    if (!tab) return setPlace(void 0);
-    const update = () => setPlace({
-      "--ad-tabs-x": `${tab.offsetLeft}px`,
-      "--ad-tabs-w": `${tab.offsetWidth}px`
-    });
-    update();
-    const observer = createResizeObserver(update);
-    observer.observe(tab);
-    if (tab.parentElement) observer.observe(tab.parentElement);
-    let timer = 0;
-    if (!first.current) {
-      setMoving(true);
-      timer = window.setTimeout(() => setMoving(false), 420);
-    }
-    first.current = false;
-    return () => {
-      observer.disconnect();
-      clearTimeout(timer);
-    };
-  }, [selected, items.length]);
-  return /* @__PURE__ */ jsxs6(
-    "nav",
-    {
-      ...mark("Tabs", p),
-      role: "tablist",
-      "aria-label": p.label ?? tr2("\u0420\u0430\u0437\u0434\u0435\u043B\u044B"),
-      "data-moving": moving || void 0,
-      onPointerDown: (e) => {
-        const tab = e.target.closest(".ad-tab");
-        if (tab && !tab.matches(":disabled")) ripple(tab, e.clientX, e.clientY);
-      },
-      onKeyDown: (e) => {
-        if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key)) return;
-        const available = items.map((item, index) => ({ item, index })).filter((x) => !x.item.disabled);
-        if (!available.length) return;
-        e.preventDefault();
-        const current = available.findIndex(
-          (x) => buttons.current[x.index] === document.activeElement
-        );
-        const next = e.key === "Home" ? 0 : e.key === "End" ? available.length - 1 : (current + (e.key === "ArrowRight" ? 1 : -1) + available.length) % available.length;
-        setValue(available[next].item.value);
-        buttons.current[available[next].index]?.focus();
-      },
-      children: [
-        place && /* @__PURE__ */ jsxs6(Fragment, { children: [
-          /* @__PURE__ */ jsx7("span", { className: "ad-tabs-trail", style: place, "aria-hidden": true }),
-          /* @__PURE__ */ jsxs6("span", { className: "ad-tabs-indicator", style: place, "aria-hidden": true, children: [
-            /* @__PURE__ */ jsx7("span", { className: "ad-tabs-halo" }),
-            /* @__PURE__ */ jsx7("span", { className: "ad-tabs-blade", children: /* @__PURE__ */ jsx7("span", { className: "ad-tabs-blade-edge" }) })
-          ] }),
-          /* @__PURE__ */ jsx7("span", { className: "ad-tabs-rail", style: place, "aria-hidden": true })
-        ] }),
-        items.map((item, index) => /* @__PURE__ */ jsx7(
-          Tab,
-          {
-            id: item.id,
-            ref: (n) => {
-              buttons.current[index] = n;
-            },
-            icon: item.icon,
-            panelId: item.panelId,
-            disabled: item.disabled,
-            size: p.size,
-            selected: item.value === value,
-            tabIndex: index === (selected < 0 ? firstEnabled : selected) ? 0 : -1,
-            onClick: () => setValue(item.value),
-            children: item.label
-          },
-          item.value
-        ))
-      ]
-    }
-  );
-}
-
-// src/components/controls/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
-var SegmentedControl = (p) => {
-  const tr2 = useTr();
-  return /* @__PURE__ */ jsx8("div", { ...mark("SegmentedControl", p), children: /* @__PURE__ */ jsx8(
-    Tabs,
-    {
-      ...p,
-      items: p.items ?? [
-        { value: "list", label: tr2("\u0421\u043F\u0438\u0441\u043E\u043A"), icon: "list" },
-        { value: "grid", label: tr2("\u041F\u043B\u0438\u0442\u043A\u0430"), icon: "grid" }
-      ]
-    }
-  ) });
-};
+import { useEffect, useRef as useRef3, useState } from "react";
 
 // src/components/layout/Stack/Stack.tsx
-import { Children, Fragment as Fragment2, isValidElement } from "react";
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Children, Fragment, isValidElement } from "react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var flex = (value) => value === "start" || value === "end" ? `flex-${value}` : value === "between" || value === "around" || value === "evenly" ? `space-${value}` : value;
 var wrapValue = (value) => value === true ? "wrap" : value === false ? "nowrap" : value;
 function Stack({
@@ -637,11 +482,11 @@ function Stack({
   style,
   ...props
 }) {
-  const content = divider == null ? children : Children.toArray(children).map((child, index) => /* @__PURE__ */ jsxs7(Fragment2, { children: [
-    index > 0 && /* @__PURE__ */ jsx9("span", { className: "ad-stack__divider", "aria-hidden": "true", children: divider }),
+  const content = divider == null ? children : Children.toArray(children).map((child, index) => /* @__PURE__ */ jsxs5(Fragment, { children: [
+    index > 0 && /* @__PURE__ */ jsx6("span", { className: "ad-stack__divider", "aria-hidden": "true", children: divider }),
     child
   ] }, isValidElement(child) ? child.key : index));
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx6(
     Component,
     {
       ...props,
@@ -660,7 +505,7 @@ function Stack({
 }
 
 // src/components/foundation/LoaderGenerator/LoaderGenerator.tsx
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var loaderGeneratorAnimations = loaderAnimations.filter(
   (animation) => animation !== "orbit" && animation !== "radar"
 );
@@ -1074,7 +919,7 @@ ${loaderCss.trim()}
 function LoaderGenerator({ value, defaultValue, onValueChange, ...p }) {
   const tr2 = useTr();
   const theme = useThemePalette();
-  const [own, setOwn] = useState2(() => defaultValue ?? {});
+  const [own, setOwn] = useState(() => defaultValue ?? {});
   const settings = value ?? {
     src: loaderDefaultImage,
     animation: "pulse",
@@ -1084,12 +929,12 @@ function LoaderGenerator({ value, defaultValue, onValueChange, ...p }) {
     palette: [theme.primary, theme.secondary, theme.primary],
     ...own
   };
-  const [uploaded, setUploaded] = useState2();
-  const [removeBackground, setRemoveBackground] = useState2(true);
-  const [uploadState, setUploadState] = useState2({ status: "idle" });
+  const [uploaded, setUploaded] = useState();
+  const [removeBackground, setRemoveBackground] = useState(true);
+  const [uploadState, setUploadState] = useState({ status: "idle" });
   const processing = uploadState.status === "processing";
-  const uploadController = useRef4(null);
-  const latest = useRef4({ settings, removeBackground, onValueChange });
+  const uploadController = useRef3(null);
+  const latest = useRef3({ settings, removeBackground, onValueChange });
   latest.current = { settings, removeBackground, onValueChange };
   useEffect(() => () => uploadController.current?.abort(), []);
   const update = (patch) => {
@@ -1115,11 +960,11 @@ function LoaderGenerator({ value, defaultValue, onValueChange, ...p }) {
         setUploadState({ status: "error", error: cause instanceof Error ? cause.message : tr2("\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u043E\u0431\u0440\u0430\u0431\u043E\u0442\u0430\u0442\u044C \u0438\u0437\u043E\u0431\u0440\u0430\u0436\u0435\u043D\u0438\u0435.") });
     }
   };
-  return /* @__PURE__ */ jsxs8(Stack, { ...mark("LoaderGenerator", p), gap: 4, children: [
-    /* @__PURE__ */ jsxs8(Grid, { className: "ad-loader-generator-top", columns: { base: 1, sm: "minmax(12rem, 1fr) minmax(0, 1.4fr)" }, gap: 4, children: [
-      /* @__PURE__ */ jsx10(Grid, { className: "ad-loader-generator-stage", columns: 1, align: "center", justify: "center", children: /* @__PURE__ */ jsx10(Loader, { src: settings.src, animation: settings.animation, size: `${settings.size}rem`, speed: settings.speed, color: settings.color, palette: settings.palette }, loaderRenderKey(settings)) }),
-      /* @__PURE__ */ jsxs8(Stack, { className: "ad-loader-generator-controls", gap: 3, children: [
-        /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs6(Stack, { ...mark("LoaderGenerator", p), gap: 4, children: [
+    /* @__PURE__ */ jsxs6(Grid, { className: "ad-loader-generator-top", columns: { base: 1, sm: "minmax(12rem, 1fr) minmax(0, 1.4fr)" }, gap: 4, children: [
+      /* @__PURE__ */ jsx7(Grid, { className: "ad-loader-generator-stage", columns: 1, align: "center", justify: "center", children: /* @__PURE__ */ jsx7(Loader, { src: settings.src, animation: settings.animation, size: `${settings.size}rem`, speed: settings.speed, color: settings.color, palette: settings.palette }, loaderRenderKey(settings)) }),
+      /* @__PURE__ */ jsxs6(Stack, { className: "ad-loader-generator-controls", gap: 3, children: [
+        /* @__PURE__ */ jsx7(
           FilePicker,
           {
             variant: "zone",
@@ -1131,12 +976,12 @@ function LoaderGenerator({ value, defaultValue, onValueChange, ...p }) {
             onFiles: ([file]) => file && void upload(file)
           }
         ),
-        uploadState.error && /* @__PURE__ */ jsx10(Typography, { variant: "caption", tone: "danger", children: uploadState.error }),
-        /* @__PURE__ */ jsxs8(Stack, { className: "ad-loader-generator-toolbar", direction: "row", align: "end", gap: 3, children: [
-          /* @__PURE__ */ jsx10(Stack, { className: "ad-loader-generator-color", children: /* @__PURE__ */ jsx10(ColorPicker, { label: tr2("\u0426\u0432\u0435\u0442 \u044D\u0444\u0444\u0435\u043A\u0442\u043E\u0432"), value: settings.color, onValueChange: (color3) => update({ color: color3 }) }) }),
-          /* @__PURE__ */ jsxs8(Stack, { className: "ad-loader-generator-size", gap: 1, children: [
-            /* @__PURE__ */ jsx10(Typography, { variant: "label", children: tr2("\u0420\u0430\u0437\u043C\u0435\u0440") }),
-            /* @__PURE__ */ jsx10(
+        uploadState.error && /* @__PURE__ */ jsx7(Typography, { variant: "caption", tone: "danger", children: uploadState.error }),
+        /* @__PURE__ */ jsxs6(Stack, { className: "ad-loader-generator-toolbar", direction: "row", align: "end", gap: 3, children: [
+          /* @__PURE__ */ jsx7(Stack, { className: "ad-loader-generator-color", children: /* @__PURE__ */ jsx7(ColorPicker, { label: tr2("\u0426\u0432\u0435\u0442 \u044D\u0444\u0444\u0435\u043A\u0442\u043E\u0432"), value: settings.color, onValueChange: (color3) => update({ color: color3 }) }) }),
+          /* @__PURE__ */ jsxs6(Stack, { className: "ad-loader-generator-size", gap: 1, children: [
+            /* @__PURE__ */ jsx7(Typography, { variant: "label", children: tr2("\u0420\u0430\u0437\u043C\u0435\u0440") }),
+            /* @__PURE__ */ jsx7(
               SegmentedControl,
               {
                 label: tr2("\u0420\u0430\u0437\u043C\u0435\u0440"),
@@ -1147,25 +992,25 @@ function LoaderGenerator({ value, defaultValue, onValueChange, ...p }) {
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs8(Stack, { as: "label", className: "ad-loader-generator-slider", gap: 1, children: [
-            /* @__PURE__ */ jsxs8(Stack, { direction: "row", justify: "between", children: [
-              /* @__PURE__ */ jsx10(Typography, { variant: "label", children: tr2("\u0421\u043A\u043E\u0440\u043E\u0441\u0442\u044C") }),
-              /* @__PURE__ */ jsxs8(Typography, { variant: "mono", tone: "muted", children: [
+          /* @__PURE__ */ jsxs6(Stack, { as: "label", className: "ad-loader-generator-slider", gap: 1, children: [
+            /* @__PURE__ */ jsxs6(Stack, { direction: "row", justify: "between", children: [
+              /* @__PURE__ */ jsx7(Typography, { variant: "label", children: tr2("\u0421\u043A\u043E\u0440\u043E\u0441\u0442\u044C") }),
+              /* @__PURE__ */ jsxs6(Typography, { variant: "mono", tone: "muted", children: [
                 "\xD7",
                 settings.speed
               ] })
             ] }),
-            /* @__PURE__ */ jsx10(Slider, { label: tr2("\u0421\u043A\u043E\u0440\u043E\u0441\u0442\u044C"), min: 0.25, max: 3, step: 0.25, value: settings.speed, onValueChange: (speed) => update({ speed }) })
+            /* @__PURE__ */ jsx7(Slider, { label: tr2("\u0421\u043A\u043E\u0440\u043E\u0441\u0442\u044C"), min: 0.25, max: 3, step: 0.25, value: settings.speed, onValueChange: (speed) => update({ speed }) })
           ] }),
-          /* @__PURE__ */ jsx10(Switch, { label: tr2("\u0423\u0431\u0440\u0430\u0442\u044C \u0444\u043E\u043D"), checked: removeBackground, onValueChange: (enabled) => {
+          /* @__PURE__ */ jsx7(Switch, { label: tr2("\u0423\u0431\u0440\u0430\u0442\u044C \u0444\u043E\u043D"), checked: removeBackground, onValueChange: (enabled) => {
             setRemoveBackground(enabled);
             if (uploaded) update({ src: enabled ? uploaded.transparent : uploaded.original });
           } })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx10(Typography, { variant: "label", children: tr2("\u0410\u043D\u0438\u043C\u0430\u0446\u0438\u044F") }),
-    /* @__PURE__ */ jsx10(Stack, { className: "ad-loader-generator-grid", direction: "row", gap: 2, role: "radiogroup", "aria-label": tr2("\u0410\u043D\u0438\u043C\u0430\u0446\u0438\u044F"), children: loaderGeneratorAnimations.map((animation) => /* @__PURE__ */ jsxs8(
+    /* @__PURE__ */ jsx7(Typography, { variant: "label", children: tr2("\u0410\u043D\u0438\u043C\u0430\u0446\u0438\u044F") }),
+    /* @__PURE__ */ jsx7(Stack, { className: "ad-loader-generator-grid", direction: "row", gap: 2, role: "radiogroup", "aria-label": tr2("\u0410\u043D\u0438\u043C\u0430\u0446\u0438\u044F"), children: loaderGeneratorAnimations.map((animation) => /* @__PURE__ */ jsxs6(
       Button,
       {
         variant: "ghost",
@@ -1175,8 +1020,8 @@ function LoaderGenerator({ value, defaultValue, onValueChange, ...p }) {
         className: "ad-loader-generator-option",
         onClick: () => update({ animation }),
         children: [
-          /* @__PURE__ */ jsx10(Loader, { src: settings.src, animation, size: "3.5rem", speed: settings.speed, color: settings.color, palette: settings.palette }),
-          /* @__PURE__ */ jsx10(Typography, { variant: "caption", children: loaderAnimationLabel(animation, tr2) })
+          /* @__PURE__ */ jsx7(Loader, { src: settings.src, animation, size: "3.5rem", speed: settings.speed, color: settings.color, palette: settings.palette }),
+          /* @__PURE__ */ jsx7(Typography, { variant: "caption", children: loaderAnimationLabel(animation, tr2) })
         ]
       },
       animation
@@ -1195,17 +1040,17 @@ function MelodixText({ children, as = "span", finish = "silver", glow: glow3 = t
 }
 
 // src/components/foundation/ThemeEditor/ThemeEditor.tsx
-import { useEffect as useEffect2, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useState as useState3 } from "react";
+import { useEffect as useEffect2, useLayoutEffect, useRef as useRef4, useState as useState2 } from "react";
 
 // src/components/feedback/Badge/Badge.tsx
-import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
-var Badge = (p) => /* @__PURE__ */ jsxs9("span", { ...mark("Badge", p), children: [
-  p.tone && /* @__PURE__ */ jsx11("i", { className: "ad-badge-dot", "aria-hidden": true }),
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var Badge = (p) => /* @__PURE__ */ jsxs7("span", { ...mark("Badge", p), children: [
+  p.tone && /* @__PURE__ */ jsx8("i", { className: "ad-badge-dot", "aria-hidden": true }),
   p.children ?? p.label ?? "GPU"
 ] });
 
 // src/components/feedback/CollapsibleSection/CollapsibleSection.tsx
-import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var CollapsibleSection = (p) => {
   const tr2 = useTr();
   const [open, setOpen] = useControllable(
@@ -1213,7 +1058,7 @@ var CollapsibleSection = (p) => {
     p.defaultOpen ?? false,
     p.onOpenChange
   );
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs8(
     "details",
     {
       ...mark("CollapsibleSection", p, "card"),
@@ -1225,34 +1070,34 @@ var CollapsibleSection = (p) => {
         setOpen(next);
       },
       children: [
-        /* @__PURE__ */ jsxs10("summary", { children: [
-          /* @__PURE__ */ jsx12(Icon, { name: p.icon ?? "braces" }),
-          /* @__PURE__ */ jsxs10("span", { className: "ad-collapse-heading", children: [
-            /* @__PURE__ */ jsx12("span", { children: p.title ?? tr2("\u0422\u0435\u0445\u043D\u0438\u0447\u0435\u0441\u043A\u0438\u0439 JSON") }),
-            p.description && /* @__PURE__ */ jsx12("small", { children: p.description })
+        /* @__PURE__ */ jsxs8("summary", { children: [
+          /* @__PURE__ */ jsx9(Icon, { name: p.icon ?? "braces" }),
+          /* @__PURE__ */ jsxs8("span", { className: "ad-collapse-heading", children: [
+            /* @__PURE__ */ jsx9("span", { children: p.title ?? tr2("\u0422\u0435\u0445\u043D\u0438\u0447\u0435\u0441\u043A\u0438\u0439 JSON") }),
+            p.description && /* @__PURE__ */ jsx9("small", { children: p.description })
           ] }),
-          /* @__PURE__ */ jsx12(Icon, { name: "chevron", size: 18 })
+          /* @__PURE__ */ jsx9(Icon, { name: "chevron", size: 18 })
         ] }),
-        /* @__PURE__ */ jsx12("div", { className: "ad-collapse-content", children: p.children ?? tr2("\u0421\u043E\u0434\u0435\u0440\u0436\u0438\u043C\u043E\u0435 \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u044E\u0449\u0435\u0433\u043E\u0441\u044F \u0440\u0430\u0437\u0434\u0435\u043B\u0430.") })
+        /* @__PURE__ */ jsx9("div", { className: "ad-collapse-content", children: p.children ?? tr2("\u0421\u043E\u0434\u0435\u0440\u0436\u0438\u043C\u043E\u0435 \u0440\u0430\u0441\u043A\u0440\u044B\u0432\u0430\u044E\u0449\u0435\u0433\u043E\u0441\u044F \u0440\u0430\u0437\u0434\u0435\u043B\u0430.") })
       ]
     }
   );
 };
 
 // src/components/feedback/MessageBar/MessageBar.tsx
-import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var icons2 = { success: "check", error: "warning", warning: "warning" };
 var MessageBar = ({ action, tone = "warning", ...p }) => {
   const tr2 = useTr();
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       ...mark("MessageBar", { ...p, tone }),
       role: tone === "error" ? "alert" : "status",
       children: [
-        /* @__PURE__ */ jsx13("span", { className: "ad-message-bar-icon", "aria-hidden": true, children: /* @__PURE__ */ jsx13(Icon, { name: icons2[tone] ?? "info" }) }),
-        /* @__PURE__ */ jsx13("span", { className: "ad-message-bar-text", children: p.children ?? tr2("\u0414\u043B\u044F \u043E\u043F\u0435\u0440\u0430\u0446\u0438\u0438 \u043D\u0443\u0436\u043D\u043E \u0431\u043E\u043B\u044C\u0448\u0435 \u0441\u0432\u043E\u0431\u043E\u0434\u043D\u043E\u0433\u043E \u043C\u0435\u0441\u0442\u0430.") }),
-        action && /* @__PURE__ */ jsx13("span", { className: "ad-message-bar-action", children: action })
+        /* @__PURE__ */ jsx10("span", { className: "ad-message-bar-icon", "aria-hidden": true, children: /* @__PURE__ */ jsx10(Icon, { name: icons2[tone] ?? "info" }) }),
+        /* @__PURE__ */ jsx10("span", { className: "ad-message-bar-text", children: p.children ?? tr2("\u0414\u043B\u044F \u043E\u043F\u0435\u0440\u0430\u0446\u0438\u0438 \u043D\u0443\u0436\u043D\u043E \u0431\u043E\u043B\u044C\u0448\u0435 \u0441\u0432\u043E\u0431\u043E\u0434\u043D\u043E\u0433\u043E \u043C\u0435\u0441\u0442\u0430.") }),
+        action && /* @__PURE__ */ jsx10("span", { className: "ad-message-bar-action", children: action })
       ]
     }
   );
@@ -1429,7 +1274,7 @@ function resolveToken(scope, name, kind = "color") {
 }
 
 // src/components/foundation/ThemeEditor/ThemeEditor.tsx
-import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var paletteStrip = ["primary-900", "primary-800", "primary-700", "primary-600", "primary", "secondary", "secondary-200", "secondary-100", "secondary-50"];
 var neutralStrip = ["neutral-950", "neutral-900", "neutral-850", "neutral-800", "neutral-700", "neutral-600", "neutral-500", "neutral-400", "neutral-300", "neutral-200"];
 var tokensWord = (n, locale, translate2) => `${n} ${plural(n, translate2("\u0442\u043E\u043A\u0435\u043D"), translate2("\u0442\u043E\u043A\u0435\u043D\u0430"), translate2("\u0442\u043E\u043A\u0435\u043D\u043E\u0432"), locale)}`;
@@ -1438,18 +1283,18 @@ function ThemeEditor({ value: controlled, defaultValue = defaultThemeConfig, onV
   const locale = useLocale();
   const [config, setConfig] = useControllable(controlled, defaultValue, onValueChange);
   const update = (patch) => setConfig({ ...config, ...patch });
-  const root = useRef5(null);
-  const [resolved, setResolved] = useState3({});
-  const [search, setSearch] = useState3("");
-  const [notice, setNotice] = useState3();
-  const [pasteOpen, setPasteOpen] = useState3(false);
-  const [pasted, setPasted] = useState3("");
-  const pasteAnchor = useRef5(null);
-  const importVersion = useRef5(0);
+  const root = useRef4(null);
+  const [resolved, setResolved] = useState2({});
+  const [search, setSearch] = useState2("");
+  const [notice, setNotice] = useState2();
+  const [pasteOpen, setPasteOpen] = useState2(false);
+  const [pasted, setPasted] = useState2("");
+  const pasteAnchor = useRef4(null);
+  const importVersion = useRef4(0);
   useEffect2(() => () => {
     importVersion.current += 1;
   }, []);
-  useLayoutEffect2(() => {
+  useLayoutEffect(() => {
     if (config.mode !== "advanced") return;
     const node = root.current;
     if (!node) return;
@@ -1480,9 +1325,9 @@ function ThemeEditor({ value: controlled, defaultValue = defaultThemeConfig, onV
     }
   };
   const needle = search.trim().toLowerCase();
-  return /* @__PURE__ */ jsxs12("div", { ...mark("ThemeEditor", p), ref: root, children: [
-    /* @__PURE__ */ jsxs12("div", { className: "ad-theme-editor-bar", children: [
-      /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs10("div", { ...mark("ThemeEditor", p), ref: root, children: [
+    /* @__PURE__ */ jsxs10("div", { className: "ad-theme-editor-bar", children: [
+      /* @__PURE__ */ jsx11(
         SegmentedControl,
         {
           size: "sm",
@@ -1494,13 +1339,13 @@ function ThemeEditor({ value: controlled, defaultValue = defaultThemeConfig, onV
           ]
         }
       ),
-      /* @__PURE__ */ jsxs12("span", { className: "ad-theme-editor-actions", children: [
-        /* @__PURE__ */ jsx14(Button, { size: "sm", icon: "download", onClick: () => downloadFile(fileName, exportTheme(config)), children: tr2("\u042D\u043A\u0441\u043F\u043E\u0440\u0442") }),
-        /* @__PURE__ */ jsx14(IconButton, { size: "sm", icon: "copy", label: tr2("\u0421\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C JSON \u0442\u0435\u043C\u044B"), onClick: async () => {
+      /* @__PURE__ */ jsxs10("span", { className: "ad-theme-editor-actions", children: [
+        /* @__PURE__ */ jsx11(Button, { size: "sm", icon: "download", onClick: () => downloadFile(fileName, exportTheme(config)), children: tr2("\u042D\u043A\u0441\u043F\u043E\u0440\u0442") }),
+        /* @__PURE__ */ jsx11(IconButton, { size: "sm", icon: "copy", label: tr2("\u0421\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C JSON \u0442\u0435\u043C\u044B"), onClick: async () => {
           const done = await copyText(exportTheme(config));
           setNotice(done ? { tone: "success", text: tr2("JSON \u0442\u0435\u043C\u044B \u0441\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u043D.") } : { tone: "error", text: tr2("\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u0441\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C.") });
         } }),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx11(
           FilePicker,
           {
             size: "sm",
@@ -1520,28 +1365,28 @@ function ThemeEditor({ value: controlled, defaultValue = defaultThemeConfig, onV
             }
           }
         ),
-        /* @__PURE__ */ jsx14(IconButton, { ref: pasteAnchor, size: "sm", icon: "document", label: tr2("\u0412\u0441\u0442\u0430\u0432\u0438\u0442\u044C JSON \u0442\u0435\u043C\u044B"), "aria-expanded": pasteOpen, onClick: () => setPasteOpen((v) => !v) }),
-        /* @__PURE__ */ jsx14(IconButton, { size: "sm", variant: "ghost", icon: "reset", label: tr2("\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C \u0442\u0435\u043C\u0443"), onClick: () => {
+        /* @__PURE__ */ jsx11(IconButton, { ref: pasteAnchor, size: "sm", icon: "document", label: tr2("\u0412\u0441\u0442\u0430\u0432\u0438\u0442\u044C JSON \u0442\u0435\u043C\u044B"), "aria-expanded": pasteOpen, onClick: () => setPasteOpen((v) => !v) }),
+        /* @__PURE__ */ jsx11(IconButton, { size: "sm", variant: "ghost", icon: "reset", label: tr2("\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C \u0442\u0435\u043C\u0443"), onClick: () => {
           importVersion.current += 1;
           setConfig(defaultThemeConfig);
           setNotice(void 0);
         } })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs12(Popover, { open: pasteOpen, onOpenChange: setPasteOpen, anchorRef: pasteAnchor, align: "end", label: tr2("\u0412\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u043C\u0443"), className: "ad-theme-editor-paste", children: [
-      /* @__PURE__ */ jsx14(TextArea, { label: tr2("JSON \u0442\u0435\u043C\u044B"), value: pasted, onValueChange: setPasted, rows: 6, placeholder: '{ "$type": "neo-ui-theme", \u2026 }' }),
-      /* @__PURE__ */ jsx14(Button, { size: "sm", variant: "primary", icon: "check", disabled: !pasted.trim(), onClick: () => {
+    /* @__PURE__ */ jsxs10(Popover, { open: pasteOpen, onOpenChange: setPasteOpen, anchorRef: pasteAnchor, align: "end", label: tr2("\u0412\u0441\u0442\u0430\u0432\u0438\u0442\u044C \u0442\u0435\u043C\u0443"), className: "ad-theme-editor-paste", children: [
+      /* @__PURE__ */ jsx11(TextArea, { label: tr2("JSON \u0442\u0435\u043C\u044B"), value: pasted, onValueChange: setPasted, rows: 6, placeholder: '{ "$type": "neo-ui-theme", \u2026 }' }),
+      /* @__PURE__ */ jsx11(Button, { size: "sm", variant: "primary", icon: "check", disabled: !pasted.trim(), onClick: () => {
         if (load(pasted)) {
           setPasted("");
           setPasteOpen(false);
         }
       }, children: tr2("\u041F\u0440\u0438\u043C\u0435\u043D\u0438\u0442\u044C") })
     ] }),
-    notice && /* @__PURE__ */ jsx14(MessageBar, { tone: notice.tone, children: notice.text }),
-    config.mode === "simple" ? /* @__PURE__ */ jsxs12("div", { className: "ad-theme-editor-simple", children: [
-      /* @__PURE__ */ jsxs12("div", { className: "ad-theme-editor-colors", children: [
-        /* @__PURE__ */ jsx14(ColorPicker, { label: tr2("\u041E\u0441\u043D\u043E\u0432\u043D\u043E\u0439 \u0446\u0432\u0435\u0442"), value: primary, onValueChange: (hex2) => update({ primary: hex2 }) }),
-        /* @__PURE__ */ jsx14(
+    notice && /* @__PURE__ */ jsx11(MessageBar, { tone: notice.tone, children: notice.text }),
+    config.mode === "simple" ? /* @__PURE__ */ jsxs10("div", { className: "ad-theme-editor-simple", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "ad-theme-editor-colors", children: [
+        /* @__PURE__ */ jsx11(ColorPicker, { label: tr2("\u041E\u0441\u043D\u043E\u0432\u043D\u043E\u0439 \u0446\u0432\u0435\u0442"), value: primary, onValueChange: (hex2) => update({ primary: hex2 }) }),
+        /* @__PURE__ */ jsx11(
           IconButton,
           {
             round: true,
@@ -1551,7 +1396,7 @@ function ThemeEditor({ value: controlled, defaultValue = defaultThemeConfig, onV
             onClick: () => update({ primary: secondary, secondary: primary, autoSecondary: false })
           }
         ),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx11(
           ColorPicker,
           {
             label: tr2("\u0412\u0442\u043E\u0440\u043E\u0439 \u0446\u0432\u0435\u0442"),
@@ -1562,7 +1407,7 @@ function ThemeEditor({ value: controlled, defaultValue = defaultThemeConfig, onV
           }
         )
       ] }),
-      /* @__PURE__ */ jsx14(
+      /* @__PURE__ */ jsx11(
         Switch,
         {
           label: tr2("\u0412\u0442\u043E\u0440\u043E\u0439 \u0446\u0432\u0435\u0442 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044B\u0432\u0430\u0442\u044C \u0430\u0432\u0442\u043E\u043C\u0430\u0442\u0438\u0447\u0435\u0441\u043A\u0438"),
@@ -1570,29 +1415,29 @@ function ThemeEditor({ value: controlled, defaultValue = defaultThemeConfig, onV
           onValueChange: (autoSecondary) => update({ autoSecondary, primary: config.primary ?? primary, secondary })
         }
       ),
-      /* @__PURE__ */ jsx14(Typography, { variant: "caption", tone: "muted", children: tr2("\u041F\u0430\u043B\u0438\u0442\u0440\u0430, \u043F\u043E\u0441\u0442\u0440\u043E\u0435\u043D\u043D\u0430\u044F \u0438\u0437 \u044D\u0442\u0438\u0445 \u0446\u0432\u0435\u0442\u043E\u0432:") }),
-      /* @__PURE__ */ jsx14("div", { className: "ad-theme-editor-strip", children: paletteStrip.map((name) => /* @__PURE__ */ jsx14("i", { title: name, style: { background: `var(--ad-${name})` } }, name)) }),
-      /* @__PURE__ */ jsx14("div", { className: "ad-theme-editor-strip", children: neutralStrip.map((name) => /* @__PURE__ */ jsx14("i", { title: name, style: { background: `var(--ad-${name})` } }, name)) })
-    ] }) : /* @__PURE__ */ jsxs12("div", { className: "ad-theme-editor-advanced", children: [
-      /* @__PURE__ */ jsxs12("div", { className: "ad-theme-editor-search", children: [
-        /* @__PURE__ */ jsx14(TextField, { size: "sm", placeholder: tr2("\u041D\u0430\u0439\u0442\u0438 \u0442\u043E\u043A\u0435\u043D\u2026"), startAdornment: /* @__PURE__ */ jsx14(Icon, { name: "search" }), clearable: true, value: search, onValueChange: setSearch, "aria-label": tr2("\u041D\u0430\u0439\u0442\u0438 \u0442\u043E\u043A\u0435\u043D") }),
-        /* @__PURE__ */ jsx14(Badge, { tone: changed ? "warning" : void 0, children: changed ? tr2("\u0418\u0437\u043C\u0435\u043D\u0435\u043D\u043E: {count}", { count: changed }) : tr2("\u0412\u0441\u0451 \u0438\u0437 \u0442\u0435\u043C\u044B") })
+      /* @__PURE__ */ jsx11(Typography, { variant: "caption", tone: "muted", children: tr2("\u041F\u0430\u043B\u0438\u0442\u0440\u0430, \u043F\u043E\u0441\u0442\u0440\u043E\u0435\u043D\u043D\u0430\u044F \u0438\u0437 \u044D\u0442\u0438\u0445 \u0446\u0432\u0435\u0442\u043E\u0432:") }),
+      /* @__PURE__ */ jsx11("div", { className: "ad-theme-editor-strip", children: paletteStrip.map((name) => /* @__PURE__ */ jsx11("i", { title: name, style: { background: `var(--ad-${name})` } }, name)) }),
+      /* @__PURE__ */ jsx11("div", { className: "ad-theme-editor-strip", children: neutralStrip.map((name) => /* @__PURE__ */ jsx11("i", { title: name, style: { background: `var(--ad-${name})` } }, name)) })
+    ] }) : /* @__PURE__ */ jsxs10("div", { className: "ad-theme-editor-advanced", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "ad-theme-editor-search", children: [
+        /* @__PURE__ */ jsx11(TextField, { size: "sm", placeholder: tr2("\u041D\u0430\u0439\u0442\u0438 \u0442\u043E\u043A\u0435\u043D\u2026"), startAdornment: /* @__PURE__ */ jsx11(Icon, { name: "search" }), clearable: true, value: search, onValueChange: setSearch, "aria-label": tr2("\u041D\u0430\u0439\u0442\u0438 \u0442\u043E\u043A\u0435\u043D") }),
+        /* @__PURE__ */ jsx11(Badge, { tone: changed ? "warning" : void 0, children: changed ? tr2("\u0418\u0437\u043C\u0435\u043D\u0435\u043D\u043E: {count}", { count: changed }) : tr2("\u0412\u0441\u0451 \u0438\u0437 \u0442\u0435\u043C\u044B") })
       ] }),
       themeTokenGroups.map((group, index) => {
         const rows = group.tokens.filter((token) => !needle || `${token.name} ${token.label} ${group.title}`.toLowerCase().includes(needle));
         if (!rows.length) return null;
         const own = rows.filter((token) => tokens[token.name] !== void 0).length;
-        return /* @__PURE__ */ jsx14(
+        return /* @__PURE__ */ jsx11(
           CollapsibleSection,
           {
             title: tr2(group.title),
             defaultOpen: index < 2,
             open: needle ? true : void 0,
             description: own ? tr2("\u0438\u0437\u043C\u0435\u043D\u0435\u043D\u043E: {own} \u0438\u0437 {total}", { own, total: rows.length }) : tokensWord(rows.length, locale, tr2),
-            children: /* @__PURE__ */ jsx14("div", { className: "ad-theme-editor-tokens", children: rows.map((token) => {
+            children: /* @__PURE__ */ jsx11("div", { className: "ad-theme-editor-tokens", children: rows.map((token) => {
               const current = tokens[token.name] ?? resolved[token.name] ?? "";
-              return /* @__PURE__ */ jsxs12("div", { className: "ad-theme-editor-token", "data-changed": tokens[token.name] !== void 0 || void 0, children: [
-                token.kind === "color" ? /* @__PURE__ */ jsx14(
+              return /* @__PURE__ */ jsxs10("div", { className: "ad-theme-editor-token", "data-changed": tokens[token.name] !== void 0 || void 0, children: [
+                token.kind === "color" ? /* @__PURE__ */ jsx11(
                   ColorPicker,
                   {
                     size: "sm",
@@ -1600,7 +1445,7 @@ function ThemeEditor({ value: controlled, defaultValue = defaultThemeConfig, onV
                     value: /^#[0-9a-f]{6}$/i.test(current) ? current : "#000000",
                     onValueChange: (hex2) => setToken(token.name, hex2)
                   }
-                ) : /* @__PURE__ */ jsx14(
+                ) : /* @__PURE__ */ jsx11(
                   TextField,
                   {
                     size: "sm",
@@ -1610,11 +1455,11 @@ function ThemeEditor({ value: controlled, defaultValue = defaultThemeConfig, onV
                     onValueChange: (value) => setToken(token.name, value)
                   }
                 ),
-                /* @__PURE__ */ jsxs12("code", { children: [
+                /* @__PURE__ */ jsxs10("code", { children: [
                   "--ad-",
                   token.name
                 ] }),
-                tokens[token.name] !== void 0 && /* @__PURE__ */ jsx14(IconButton, { size: "xs", variant: "ghost", icon: "reset", label: tr2("\u0412\u0435\u0440\u043D\u0443\u0442\u044C {name}", { name: tr2(token.label) }), onClick: () => setToken(token.name, void 0) })
+                tokens[token.name] !== void 0 && /* @__PURE__ */ jsx11(IconButton, { size: "xs", variant: "ghost", icon: "reset", label: tr2("\u0412\u0435\u0440\u043D\u0443\u0442\u044C {name}", { name: tr2(token.label) }), onClick: () => setToken(token.name, void 0) })
               ] }, token.name);
             }) })
           },
@@ -1626,7 +1471,7 @@ function ThemeEditor({ value: controlled, defaultValue = defaultThemeConfig, onV
 }
 
 // src/components/effects/Tilt/Tilt.tsx
-import { createElement as createElement5, useRef as useRef6 } from "react";
+import { createElement as createElement5, useRef as useRef5 } from "react";
 function Tilt({
   as = "div",
   max = 14,
@@ -1634,7 +1479,7 @@ function Tilt({
   children,
   ...p
 }) {
-  const pauseRef = useRef6(null);
+  const pauseRef = useRef5(null);
   const motion = useMotion();
   usePauseOffscreen(pauseRef);
   const set = (el, x, y) => {
@@ -1666,28 +1511,28 @@ function Tilt({
 }
 
 // src/components/layout/StatTile/StatTile.tsx
-import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function StatTile({ icon = "music", value, label, onClick, tilt = true, badge, badgeLabel, ...p }) {
-  const card = /* @__PURE__ */ jsxs13(Card, { border: true, padding: "sm", className: "ad-stat-tile-card", children: [
-    /* @__PURE__ */ jsxs13("span", { className: "ad-stat-tile-icon", "aria-hidden": "true", children: [
-      /* @__PURE__ */ jsx15(Icon, { name: icon }),
-      /* @__PURE__ */ jsx15(Icon, { name: "sparkle", className: "ad-stat-tile-spark" })
+  const card = /* @__PURE__ */ jsxs11(Card, { border: true, padding: "sm", className: "ad-stat-tile-card", children: [
+    /* @__PURE__ */ jsxs11("span", { className: "ad-stat-tile-icon", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx12(Icon, { name: icon }),
+      /* @__PURE__ */ jsx12(Icon, { name: "sparkle", className: "ad-stat-tile-spark" })
     ] }),
-    /* @__PURE__ */ jsxs13("span", { className: "ad-stat-tile-text", children: [
-      /* @__PURE__ */ jsx15(Typography, { as: "strong", variant: "h2", children: value }),
-      /* @__PURE__ */ jsx15(Typography, { variant: "body-sm", tone: "muted", children: label })
+    /* @__PURE__ */ jsxs11("span", { className: "ad-stat-tile-text", children: [
+      /* @__PURE__ */ jsx12(Typography, { as: "strong", variant: "h2", children: value }),
+      /* @__PURE__ */ jsx12(Typography, { variant: "body-sm", tone: "muted", children: label })
     ] })
   ] });
-  const body = /* @__PURE__ */ jsxs13(Fragment3, { children: [
-    tilt ? /* @__PURE__ */ jsx15(Tilt, { max: 8, children: card }) : card,
-    badge !== void 0 && badge !== null && /* @__PURE__ */ jsx15("span", { className: "ad-stat-tile-badge", "aria-label": badgeLabel, children: badge })
+  const body = /* @__PURE__ */ jsxs11(Fragment2, { children: [
+    tilt ? /* @__PURE__ */ jsx12(Tilt, { max: 8, children: card }) : card,
+    badge !== void 0 && badge !== null && /* @__PURE__ */ jsx12("span", { className: "ad-stat-tile-badge", "aria-label": badgeLabel, children: badge })
   ] });
-  return onClick ? /* @__PURE__ */ jsx15("button", { type: "button", ...mark("StatTile", p), onClick, children: body }) : /* @__PURE__ */ jsx15("div", { ...mark("StatTile", p), children: body });
+  return onClick ? /* @__PURE__ */ jsx12("button", { type: "button", ...mark("StatTile", p), onClick, children: body }) : /* @__PURE__ */ jsx12("div", { ...mark("StatTile", p), children: body });
 }
 
 // src/components/effects/Equalizer/Equalizer.tsx
-import { useRef as useRef7 } from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { useRef as useRef6 } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function Equalizer({
   bars = 5,
   playing = true,
@@ -1697,9 +1542,9 @@ function Equalizer({
   ...p
 }) {
   const tr2 = useTr();
-  const pauseRef = useRef7(null);
+  const pauseRef = useRef6(null);
   usePauseOffscreen(pauseRef);
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx13(
     "span",
     {
       ...mark("Equalizer", p),
@@ -1708,7 +1553,7 @@ function Equalizer({
       "aria-label": label ?? (playing ? tr2("\u0418\u0433\u0440\u0430\u0435\u0442") : tr2("\u041F\u0430\u0443\u0437\u0430")),
       "data-playing": playing && !levels || void 0,
       "data-live": levels ? "" : void 0,
-      children: Array.from({ length: bars }, (_, i) => /* @__PURE__ */ jsx16(
+      children: Array.from({ length: bars }, (_, i) => /* @__PURE__ */ jsx13(
         "i",
         {
           style: levels ? { scale: `1 ${Math.max(0.08, Math.min(1, levels[Math.floor(i / bars * levels.length)] ?? 0))}` } : {
@@ -1723,26 +1568,26 @@ function Equalizer({
 }
 
 // src/components/media/MediaCard/MediaCard.tsx
-import { jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
 function MediaCard({ title, subtitle, image, levels, phase = 0, badge, actions, tilt = true, children, ...p }) {
-  const card = /* @__PURE__ */ jsxs14(Card, { border: true, padding: "none", className: "ad-media-card-card", "data-image": image ? "" : void 0, children: [
-    image && /* @__PURE__ */ jsx17("img", { className: "ad-media-card-image", src: image, alt: "", loading: "lazy" }),
-    /* @__PURE__ */ jsx17("span", { className: "ad-media-card-art", "aria-hidden": "true", children: /* @__PURE__ */ jsx17(Equalizer, { bars: 16, levels, phase }) }),
-    /* @__PURE__ */ jsxs14("div", { className: "ad-media-card-content", children: [
-      /* @__PURE__ */ jsxs14("div", { className: "ad-media-card-head", children: [
-        /* @__PURE__ */ jsxs14("div", { className: "ad-media-card-title", children: [
-          /* @__PURE__ */ jsx17(Typography, { as: "strong", variant: "title", truncate: true, children: title }),
-          subtitle && /* @__PURE__ */ jsx17(Typography, { variant: "body-sm", tone: "muted", truncate: true, children: subtitle })
+  const card = /* @__PURE__ */ jsxs12(Card, { border: true, padding: "none", className: "ad-media-card-card", "data-image": image ? "" : void 0, children: [
+    image && /* @__PURE__ */ jsx14("img", { className: "ad-media-card-image", src: image, alt: "", loading: "lazy" }),
+    /* @__PURE__ */ jsx14("span", { className: "ad-media-card-art", "aria-hidden": "true", children: /* @__PURE__ */ jsx14(Equalizer, { bars: 16, levels, phase }) }),
+    /* @__PURE__ */ jsxs12("div", { className: "ad-media-card-content", children: [
+      /* @__PURE__ */ jsxs12("div", { className: "ad-media-card-head", children: [
+        /* @__PURE__ */ jsxs12("div", { className: "ad-media-card-title", children: [
+          /* @__PURE__ */ jsx14(Typography, { as: "strong", variant: "title", truncate: true, children: title }),
+          subtitle && /* @__PURE__ */ jsx14(Typography, { variant: "body-sm", tone: "muted", truncate: true, children: subtitle })
         ] }),
         badge
       ] }),
-      (children || actions) && /* @__PURE__ */ jsxs14("div", { className: "ad-media-card-actions", children: [
+      (children || actions) && /* @__PURE__ */ jsxs12("div", { className: "ad-media-card-actions", children: [
         children,
         actions
       ] })
     ] })
   ] });
-  return /* @__PURE__ */ jsx17("div", { ...mark("MediaCard", p), children: tilt ? /* @__PURE__ */ jsx17(Tilt, { max: typeof tilt === "number" ? tilt : 10, children: card }) : card });
+  return /* @__PURE__ */ jsx14("div", { ...mark("MediaCard", p), children: tilt ? /* @__PURE__ */ jsx14(Tilt, { max: typeof tilt === "number" ? tilt : 10, children: card }) : card });
 }
 
 // src/components/layout/DialogActions/DialogActions.tsx
@@ -1752,8 +1597,8 @@ var DialogActions = part("DialogActions", "footer");
 var DialogBody = part("DialogBody", "div");
 
 // src/components/layout/Divider/Divider.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
-var Divider = (p) => /* @__PURE__ */ jsx18(
+import { jsx as jsx15 } from "react/jsx-runtime";
+var Divider = (p) => /* @__PURE__ */ jsx15(
   "div",
   {
     ...mark("Divider", p),
@@ -1763,13 +1608,13 @@ var Divider = (p) => /* @__PURE__ */ jsx18(
 );
 
 // src/components/layout/ScrollArea/ScrollArea.tsx
-import { useRef as useRef8 } from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { useRef as useRef7 } from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var scrollHeight = (height) => typeof height === "number" ? `calc(var(--ad-fluid-unit) * ${height})` : height ?? "clamp(10rem, 32dvh, 18rem)";
 function ScrollArea(p) {
-  const ref = useRef8(null);
+  const ref = useRef7(null);
   useSmoothWheel(ref);
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx16(
     "div",
     {
       ...mark("ScrollArea", p),
@@ -1783,8 +1628,8 @@ function ScrollArea(p) {
 }
 
 // src/components/layout/TabPanel/TabPanel.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
-var TabPanel = (p) => /* @__PURE__ */ jsx20(
+import { jsx as jsx17 } from "react/jsx-runtime";
+var TabPanel = (p) => /* @__PURE__ */ jsx17(
   "div",
   {
     ...mark("TabPanel", p),
@@ -1792,7 +1637,7 @@ var TabPanel = (p) => /* @__PURE__ */ jsx20(
     "aria-labelledby": p.labelledBy,
     hidden: p.hidden,
     tabIndex: 0,
-    children: /* @__PURE__ */ jsx20("div", { className: "ad-tab-panel-content", children: p.children }, p.labelledBy)
+    children: /* @__PURE__ */ jsx17("div", { className: "ad-tab-panel-content", children: p.children }, p.labelledBy)
   }
 );
 
@@ -1808,7 +1653,7 @@ var Text = ({ as = "span", ...p }) => createElement6(
 var Toolbar = part("Toolbar", "div");
 
 // src/components/controls/Link/Link.tsx
-import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 function Link({
   href = "#",
   icon,
@@ -1818,7 +1663,7 @@ function Link({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsxs13(
     "a",
     {
       ...props,
@@ -1828,23 +1673,23 @@ function Link({
       rel: external ? "noreferrer" : props.rel,
       "data-ad-underline": underline,
       children: [
-        icon && /* @__PURE__ */ jsx21(Icon, { name: icon }),
+        icon && /* @__PURE__ */ jsx18(Icon, { name: icon }),
         children,
-        endIcon && /* @__PURE__ */ jsx21(Icon, { name: endIcon })
+        endIcon && /* @__PURE__ */ jsx18(Icon, { name: endIcon })
       ]
     }
   );
 }
 
 // src/components/controls/SplitButton/SplitButton.tsx
-import { useRef as useRef9, useState as useState4 } from "react";
+import { useRef as useRef8, useState as useState3 } from "react";
 
 // src/components/feedback/MenuItem/MenuItem.tsx
-import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 var MenuItem = (p) => {
   const tr2 = useTr();
   const label = p.label ?? p.children ?? tr2("\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0435");
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs14(
     "button",
     {
       ...mark("MenuItem", { ...p, tone: p.danger ? "error" : p.tone }),
@@ -1853,17 +1698,17 @@ var MenuItem = (p) => {
       disabled: p.disabled,
       onClick: p.onSelect,
       children: [
-        /* @__PURE__ */ jsx22("span", { className: "ad-menu-item-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx22(Icon, { name: p.icon ?? "more" }) }),
-        /* @__PURE__ */ jsx22("span", { className: "ad-menu-item-label", children: label }),
-        p.endIcon && /* @__PURE__ */ jsx22("span", { className: "ad-menu-item-end", "aria-hidden": "true", children: /* @__PURE__ */ jsx22(Icon, { name: p.endIcon }) })
+        /* @__PURE__ */ jsx19("span", { className: "ad-menu-item-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx19(Icon, { name: p.icon ?? "more" }) }),
+        /* @__PURE__ */ jsx19("span", { className: "ad-menu-item-label", children: label }),
+        p.endIcon && /* @__PURE__ */ jsx19("span", { className: "ad-menu-item-end", "aria-hidden": "true", children: /* @__PURE__ */ jsx19(Icon, { name: p.endIcon }) })
       ]
     }
   );
 };
 
 // src/components/feedback/Menu/Menu.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
-var Menu = (p) => /* @__PURE__ */ jsx23(
+import { jsx as jsx20 } from "react/jsx-runtime";
+var Menu = (p) => /* @__PURE__ */ jsx20(
   Popover,
   {
     ...p,
@@ -1887,7 +1732,7 @@ var Menu = (p) => /* @__PURE__ */ jsx23(
       buttons[next]?.focus();
     },
     children: (p.items ?? []).map(
-      (item, i) => item.separator ? /* @__PURE__ */ jsx23(Divider, {}, item.id ?? String(i)) : /* @__PURE__ */ jsx23(
+      (item, i) => item.separator ? /* @__PURE__ */ jsx20(Divider, {}, item.id ?? String(i)) : /* @__PURE__ */ jsx20(
         MenuItem,
         {
           ...item,
@@ -1904,19 +1749,19 @@ var Menu = (p) => /* @__PURE__ */ jsx23(
 );
 
 // src/components/controls/SplitButton/SplitButton.tsx
-import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 var SplitButton = (p) => {
   const tr2 = useTr();
-  const [open, setOpen] = useState4(false);
-  const anchor = useRef9(null);
+  const [open, setOpen] = useState3(false);
+  const anchor = useRef8(null);
   const variant = p.variant ?? "primary";
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       ...mark("SplitButton", p, variantMaterial[variant]),
       "data-ad-variant": variant,
       children: [
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx21(
           Button,
           {
             className: "ad-split-button-main",
@@ -1927,7 +1772,7 @@ var SplitButton = (p) => {
             children: p.children ?? p.label ?? tr2("\u0421\u043E\u0445\u0440\u0430\u043D\u0438\u0442\u044C")
           }
         ),
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx21(
           IconButton,
           {
             className: "ad-split-button-trigger",
@@ -1941,7 +1786,7 @@ var SplitButton = (p) => {
             onClick: () => setOpen((v) => !v)
           }
         ),
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx21(
           Menu,
           {
             open,
@@ -1956,132 +1801,9 @@ var SplitButton = (p) => {
   );
 };
 
-// src/components/effects/ImageShine/ImageShine.tsx
-import { useRef as useRef10 } from "react";
-import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
-function ImageShine({ src, glow: glow3 = true, label, style, ...p }) {
-  const pauseRef = useRef10(null);
-  usePauseOffscreen(pauseRef);
-  return /* @__PURE__ */ jsxs18(
-    "span",
-    {
-      ...mark("ImageShine", p),
-      ref: pauseRef,
-      style: { ...style, "--ad-shine-src": `url("${src}")` },
-      "data-glow": glow3 || void 0,
-      role: label ? "img" : void 0,
-      "aria-label": label,
-      "aria-hidden": label ? void 0 : true,
-      children: [
-        glow3 && /* @__PURE__ */ jsx25("img", { className: "ad-image-shine-glow", src, alt: "", draggable: false }),
-        /* @__PURE__ */ jsx25("img", { className: "ad-image-shine-picture", src, alt: "", draggable: false }),
-        /* @__PURE__ */ jsx25("span", { className: "ad-image-shine-sweep", children: /* @__PURE__ */ jsx25("i", {}) })
-      ]
-    }
-  );
-}
-
-// src/components/controls/ThemePicker/ThemePicker.tsx
-import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
-var builtIn = {
-  ruby: "Ruby",
-  light: "Light",
-  green: "Green",
-  violet: "Violet"
-};
-function ThemePicker(p) {
-  const tr2 = useTr();
-  const first = p.options?.[0]?.value ?? "ruby";
-  const [value, setValue] = useControllable(p.value, p.defaultValue ?? first, p.onValueChange);
-  const options = p.options ?? Object.keys(builtIn).map((key) => ({
-    value: key,
-    label: builtIn[key],
-    color: themes[key][0]
-  }));
-  const active = Math.max(0, options.findIndex((option) => option.value === value));
-  return /* @__PURE__ */ jsx26(
-    "div",
-    {
-      ...mark("ThemePicker", p),
-      "data-gallery": p.options ? "" : void 0,
-      role: "radiogroup",
-      "aria-label": p.label ?? tr2("\u0422\u0435\u043C\u0430"),
-      onKeyDown: (event) => {
-        const buttons = [...event.currentTarget.querySelectorAll('[role="radio"]:not(:disabled)')];
-        const index = buttons.indexOf(document.activeElement);
-        const moves = { ArrowRight: 1, ArrowDown: 1, ArrowLeft: -1, ArrowUp: -1, Home: -index, End: buttons.length - index - 1 };
-        const move = moves[event.key];
-        if (move === void 0 || !buttons.length) return;
-        event.preventDefault();
-        const next = buttons[(index + move + buttons.length) % buttons.length];
-        next.focus();
-        next.click();
-      },
-      children: options.map((option, index) => {
-        const chosen = option.value === value;
-        const radio = { role: "radio", "aria-checked": chosen, tabIndex: index === active ? 0 : -1, disabled: p.disabled, onClick: () => setValue(option.value) };
-        if (!p.options) return /* @__PURE__ */ jsxs19(Button, { size: p.size ?? "sm", ...radio, children: [
-          /* @__PURE__ */ jsx26("span", { className: "ad-theme-swatch", style: { background: option.color } }),
-          option.label
-        ] }, option.value);
-        return /* @__PURE__ */ jsxs19(
-          "button",
-          {
-            type: "button",
-            className: "ad-theme-card",
-            "aria-label": option.label,
-            ...radio,
-            style: option.color ? { "--ad-theme-card": option.color } : void 0,
-            children: [
-              /* @__PURE__ */ jsx26("span", { className: "ad-theme-card-preview", children: option.image && (chosen ? /* @__PURE__ */ jsx26(ImageShine, { src: option.image, glow: false }) : /* @__PURE__ */ jsx26("img", { src: option.image, alt: "", loading: "lazy" })) }),
-              /* @__PURE__ */ jsxs19("span", { className: "ad-theme-card-caption", children: [
-                /* @__PURE__ */ jsx26("strong", { children: option.label }),
-                option.description && /* @__PURE__ */ jsx26("span", { "aria-hidden": "true", children: option.description })
-              ] }),
-              chosen && /* @__PURE__ */ jsx26("span", { className: "ad-theme-card-check", "aria-hidden": "true", children: /* @__PURE__ */ jsx26(Icon, { name: "check" }) })
-            ]
-          },
-          option.value
-        );
-      })
-    }
-  );
-}
-
-// src/components/controls/ToggleButton/ToggleButton.tsx
-import { forwardRef as forwardRef2 } from "react";
-var ToggleButton = /* @__PURE__ */ forwardRef2(function ToggleButton2({
-  checked,
-  defaultChecked = false,
-  onValueChange,
-  onClick,
-  ...p
-}, ref) {
-  const [value, setValue] = useControllable(
-    checked,
-    defaultChecked,
-    onValueChange
-  );
-  return buttonView(
-    {
-      ...p,
-      ref,
-      "aria-label": p["aria-label"] ?? (!p.children ? p.label : void 0),
-      "aria-pressed": value,
-      children: p.children ?? (p.icon ? null : p.label),
-      label: void 0,
-      onClick: (e) => {
-        onClick?.(e);
-        if (!e.defaultPrevented) setValue(!value);
-      }
-    },
-    "ToggleButton"
-  );
-});
-
 // src/components/feedback/DataTable/DataTable.tsx
-import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef11, useState as useState5 } from "react";
-import { Fragment as Fragment4, jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef9, useState as useState4 } from "react";
+import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 var sortStates = {
   asc: { next: "desc", aria: "ascending" },
   desc: { next: null, aria: "descending" }
@@ -2124,7 +1846,7 @@ function FilterEditor({
   onChange
 }) {
   const tr2 = useTr();
-  const [search, setSearch] = useState5("");
+  const [search, setSearch] = useState4("");
   const text = filter?.kind === "text" ? filter.text : "";
   const chosen = filter?.kind === "values" ? filter.values : [];
   const query = (kind === "text" ? text : search).trim().toLocaleLowerCase();
@@ -2133,13 +1855,13 @@ function FilterEditor({
     (value) => (!query || value.toLocaleLowerCase().includes(query)) && !excluded.has(value)
   ).slice(0, 100);
   if (kind === "text")
-    return /* @__PURE__ */ jsx27(
+    return /* @__PURE__ */ jsx22(
       Autocomplete,
       {
         size: "sm",
         autoFocus: true,
         placeholder: tr2("\u0421\u043E\u0434\u0435\u0440\u0436\u0438\u0442\u2026"),
-        startAdornment: /* @__PURE__ */ jsx27(Icon, { name: "search" }),
+        startAdornment: /* @__PURE__ */ jsx22(Icon, { name: "search" }),
         clearable: true,
         options: suggestions,
         value: text,
@@ -2152,19 +1874,19 @@ function FilterEditor({
       const next = { ...range, [part2]: value === "" ? void 0 : value };
       onChange(next.min === void 0 && next.max === void 0 ? void 0 : next);
     };
-    return /* @__PURE__ */ jsxs20("div", { className: "ad-data-table-range", children: [
-      /* @__PURE__ */ jsx27(NumberField, { size: "sm", label: tr2("\u041E\u0442"), controls: false, value: range.min ?? "", onValueChange: (v) => set("min", v) }),
-      /* @__PURE__ */ jsx27(NumberField, { size: "sm", label: tr2("\u0414\u043E"), controls: false, value: range.max ?? "", onValueChange: (v) => set("max", v) })
+    return /* @__PURE__ */ jsxs16("div", { className: "ad-data-table-range", children: [
+      /* @__PURE__ */ jsx22(NumberField, { size: "sm", label: tr2("\u041E\u0442"), controls: false, value: range.min ?? "", onValueChange: (v) => set("min", v) }),
+      /* @__PURE__ */ jsx22(NumberField, { size: "sm", label: tr2("\u0414\u043E"), controls: false, value: range.max ?? "", onValueChange: (v) => set("max", v) })
     ] });
   }
-  return /* @__PURE__ */ jsxs20("div", { className: "ad-data-table-values", children: [
-    /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsxs16("div", { className: "ad-data-table-values", children: [
+    /* @__PURE__ */ jsx22(
       Autocomplete,
       {
         size: "sm",
         autoFocus: true,
         placeholder: tr2("\u041D\u0430\u0439\u0442\u0438 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435\u2026"),
-        startAdornment: /* @__PURE__ */ jsx27(Icon, { name: "search" }),
+        startAdornment: /* @__PURE__ */ jsx22(Icon, { name: "search" }),
         options: suggestions,
         value: search,
         onValueChange: setSearch,
@@ -2174,9 +1896,9 @@ function FilterEditor({
         }
       }
     ),
-    chosen.length > 0 && /* @__PURE__ */ jsx27("div", { className: "ad-data-table-values-list", children: chosen.map((value) => /* @__PURE__ */ jsxs20("span", { className: "ad-data-table-chip", children: [
+    chosen.length > 0 && /* @__PURE__ */ jsx22("div", { className: "ad-data-table-values-list", children: chosen.map((value) => /* @__PURE__ */ jsxs16("span", { className: "ad-data-table-chip", children: [
       value || "\u2014",
-      /* @__PURE__ */ jsx27(
+      /* @__PURE__ */ jsx22(
         "button",
         {
           type: "button",
@@ -2185,7 +1907,7 @@ function FilterEditor({
             const next = chosen.filter((item) => item !== value);
             onChange(next.length ? { kind: "values", values: next } : void 0);
           },
-          children: /* @__PURE__ */ jsx27(Icon, { name: "close" })
+          children: /* @__PURE__ */ jsx22(Icon, { name: "close" })
         }
       )
     ] }, value)) })
@@ -2200,15 +1922,15 @@ function ColumnFilter({
   onChange
 }) {
   const tr2 = useTr();
-  const [open, setOpen] = useState5(false);
-  const anchor = useRef11(null);
+  const [open, setOpen] = useState4(false);
+  const anchor = useRef9(null);
   const title = typeof column.title === "string" ? column.title : column.key;
   const suggestions = useMemo2(
     () => open && kind !== "range" && !options.length ? distinct(column, rows) : options,
     [open, kind, column, rows, options]
   );
-  return /* @__PURE__ */ jsxs20(Fragment4, { children: [
-    /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsxs16(Fragment3, { children: [
+    /* @__PURE__ */ jsx22(
       IconButton,
       {
         ref: anchor,
@@ -2222,7 +1944,7 @@ function ColumnFilter({
         onClick: () => setOpen((v) => !v)
       }
     ),
-    /* @__PURE__ */ jsx27(Popover, { open, onOpenChange: setOpen, anchorRef: anchor, label: tr2("\u0424\u0438\u043B\u044C\u0442\u0440: {title}", { title }), className: "ad-data-table-filter-popover", children: /* @__PURE__ */ jsx27(FilterEditor, { kind, options: suggestions, filter, onChange }) })
+    /* @__PURE__ */ jsx22(Popover, { open, onOpenChange: setOpen, anchorRef: anchor, label: tr2("\u0424\u0438\u043B\u044C\u0442\u0440: {title}", { title }), className: "ad-data-table-filter-popover", children: /* @__PURE__ */ jsx22(FilterEditor, { kind, options: suggestions, filter, onChange }) })
   ] });
 }
 var field = (row, key) => Object.hasOwn(row, key) ? row[key] : void 0;
@@ -2344,8 +2066,8 @@ function DataTable({
     defaultSelected,
     onSelectionChange
   );
-  const generatedKeys = useRef11(/* @__PURE__ */ new WeakMap());
-  const nextGeneratedKey = useRef11(0);
+  const generatedKeys = useRef9(/* @__PURE__ */ new WeakMap());
+  const nextGeneratedKey = useRef9(0);
   const keyed = useMemo2(() => {
     const identify = (row, index) => {
       if (rowKey) return rowKey(row, index);
@@ -2364,17 +2086,17 @@ function DataTable({
     return rows.map((row, index) => ({ row, index, key: identify(row, index) }));
   }, [rows, rowKey]);
   const [query, setQuery] = useControllable(controlledQuery, defaultQuery, onQueryChange);
-  const [hiddenColumns, setHiddenColumns] = useState5([]);
+  const [hiddenColumns, setHiddenColumns] = useState4([]);
   const [columnOrder, setColumnOrder] = useControllable(controlledColumnOrder, defaultColumnOrder, onColumnOrderChange);
   const [columnPinning, setColumnPinning] = useControllable(controlledColumnPinning, defaultColumnPinning, onColumnPinningChange);
   const [expandedRows, setExpandedRows] = useControllable(controlledExpandedRows, defaultExpandedRows, onExpandedRowsChange);
   const [dense, setDense] = useControllable(controlledDense, false, onDenseChange);
-  const [columnWidths, setColumnWidths] = useState5({});
+  const [columnWidths, setColumnWidths] = useState4({});
   const customWidth = (key) => Object.hasOwn(columnWidths, key) ? columnWidths[key] : void 0;
-  const [containerWidth, setContainerWidth] = useState5(0);
-  const resizing = useRef11(null);
-  const [columnsOpen, setColumnsOpen] = useState5(false);
-  const columnsAnchor = useRef11(null);
+  const [containerWidth, setContainerWidth] = useState4(0);
+  const resizing = useRef9(null);
+  const [columnsOpen, setColumnsOpen] = useState4(false);
+  const columnsAnchor = useRef9(null);
   const orderedCols = useMemo2(() => {
     const byKey = new Map(cols.map((column) => [column.key, column]));
     return [.../* @__PURE__ */ new Set([...columnOrder, ...cols.map((column) => column.key)])].flatMap((key) => byKey.has(key) ? [byKey.get(key)] : []);
@@ -2407,7 +2129,7 @@ function DataTable({
   }, [pageSize]);
   const [filters, setFilters] = useControllable(controlledFilters, defaultFilters, onFiltersChange);
   const [groupBy, setGroupBy] = useControllable(controlledGroupBy, defaultGroupBy, onGroupByChange);
-  const [collapsed, setCollapsed] = useState5(/* @__PURE__ */ new Set());
+  const [collapsed, setCollapsed] = useState4(/* @__PURE__ */ new Set());
   const setFilter = (key, filter) => {
     const next = filter ? { ...filters, [key]: filter } : { ...filters };
     if (!filter) delete next[key];
@@ -2508,15 +2230,15 @@ function DataTable({
     return side ? { [side]: `var(--ad-table-pin-${side}, ${preceding.reduce((sum, key) => sum + widthOf(key), side === "left" ? leading * 40 : renderRowActions ? actionWidth : 0)}px)` } : {};
   };
   const pinnedSide = (key) => pinning.left.includes(key) ? "left" : pinning.right.includes(key) ? "right" : void 0;
-  const groupRow = (group, viewIndex) => /* @__PURE__ */ jsx27("tr", { "data-virtual-key": `g:${group.name}`, "aria-rowindex": virtualize ? viewIndex + 2 : void 0, className: "ad-data-table-group", "data-collapsed": collapsed.has(group.name) || void 0, children: /* @__PURE__ */ jsx27("td", { colSpan: span, children: /* @__PURE__ */ jsxs20("div", { className: "ad-data-table-group-content", children: [
-    /* @__PURE__ */ jsxs20("button", { type: "button", className: "ad-data-table-group-toggle", "aria-expanded": !collapsed.has(group.name), onClick: () => toggleGroup(group.name), children: [
-      /* @__PURE__ */ jsx27(Icon, { name: "chevron" }),
-      /* @__PURE__ */ jsx27("span", { children: group.name || "\u2014" }),
-      /* @__PURE__ */ jsx27("span", { className: "ad-data-table-group-count", children: group.items.length })
+  const groupRow = (group, viewIndex) => /* @__PURE__ */ jsx22("tr", { "data-virtual-key": `g:${group.name}`, "aria-rowindex": virtualize ? viewIndex + 2 : void 0, className: "ad-data-table-group", "data-collapsed": collapsed.has(group.name) || void 0, children: /* @__PURE__ */ jsx22("td", { colSpan: span, children: /* @__PURE__ */ jsxs16("div", { className: "ad-data-table-group-content", children: [
+    /* @__PURE__ */ jsxs16("button", { type: "button", className: "ad-data-table-group-toggle", "aria-expanded": !collapsed.has(group.name), onClick: () => toggleGroup(group.name), children: [
+      /* @__PURE__ */ jsx22(Icon, { name: "chevron" }),
+      /* @__PURE__ */ jsx22("span", { children: group.name || "\u2014" }),
+      /* @__PURE__ */ jsx22("span", { className: "ad-data-table-group-count", children: group.items.length })
     ] }),
-    /* @__PURE__ */ jsx27("div", { className: "ad-data-table-group-summaries", children: visibleCols.filter((column) => column.aggregate && column.key !== visibleCols[0]?.key).map((column) => /* @__PURE__ */ jsxs20("span", { className: "ad-data-table-group-summary", children: [
-      /* @__PURE__ */ jsx27("span", { children: column.title }),
-      /* @__PURE__ */ jsx27("strong", { children: group.summaries.get(column.key) })
+    /* @__PURE__ */ jsx22("div", { className: "ad-data-table-group-summaries", children: visibleCols.filter((column) => column.aggregate && column.key !== visibleCols[0]?.key).map((column) => /* @__PURE__ */ jsxs16("span", { className: "ad-data-table-group-summary", children: [
+      /* @__PURE__ */ jsx22("span", { children: column.title }),
+      /* @__PURE__ */ jsx22("strong", { children: group.summaries.get(column.key) })
     ] }, column.key)) })
   ] }) }) }, `g:${group.name}`);
   const chosen = useMemo2(() => new Set(selection), [selection]);
@@ -2574,7 +2296,7 @@ function DataTable({
     });
   }, [visible, groupColumn, groupNames, groups, collapsed, current, perPage, expanded, !!renderRowDetails]);
   const viewIndexes = useMemo2(() => new Map(viewItems.map((item, index) => [item.key, index])), [viewItems]);
-  const scrollRef = useRef11(null);
+  const scrollRef = useRef9(null);
   useEffect3(() => {
     const element = scrollRef.current;
     if (!pinned || !element) return;
@@ -2585,15 +2307,15 @@ function DataTable({
     observer.observe(element);
     return () => observer.disconnect();
   }, [pinned]);
-  const bodyRef = useRef11(null);
-  const headerRef = useRef11(null);
-  const heights = useRef11(/* @__PURE__ */ new Map());
-  const headerHeight = useRef11(44);
-  const frameRef = useRef11(0);
-  const measuredWidth = useRef11(0);
-  const geometryChanged = useRef11(false);
-  const [geometryVersion, setGeometryVersion] = useState5(0);
-  const [viewport, setViewport] = useState5({ top: 0, height: typeof maxHeight === "number" ? maxHeight : 480, width: 0 });
+  const bodyRef = useRef9(null);
+  const headerRef = useRef9(null);
+  const heights = useRef9(/* @__PURE__ */ new Map());
+  const headerHeight = useRef9(44);
+  const frameRef = useRef9(0);
+  const measuredWidth = useRef9(0);
+  const geometryChanged = useRef9(false);
+  const [geometryVersion, setGeometryVersion] = useState4(0);
+  const [viewport, setViewport] = useState4({ top: 0, height: typeof maxHeight === "number" ? maxHeight : 480, width: 0 });
   const scheduleViewport = () => {
     if (!virtualize || frameRef.current) return;
     frameRef.current = requestAnimationFrame(() => {
@@ -2654,8 +2376,8 @@ function DataTable({
     }
   }, [virtualize, viewItems, virtualHeight, viewport.height]);
   const measurementIdentity = JSON.stringify([dense, estimatedRowHeight, columnWidths, visibleCols.map((column) => column.key)]);
-  const previousMeasurementIdentity = useRef11(measurementIdentity);
-  const previousOffsets = useRef11(offsets);
+  const previousMeasurementIdentity = useRef9(measurementIdentity);
+  const previousOffsets = useRef9(offsets);
   useEffect3(() => {
     if (previousMeasurementIdentity.current === measurementIdentity) return;
     previousMeasurementIdentity.current = measurementIdentity;
@@ -2716,12 +2438,12 @@ function DataTable({
   }, [virtualize]);
   const toggleDetails = (key) => setExpandedRows(expanded.has(key) ? expandedRows.filter((item) => item !== key) : [...expandedRows, key]);
   const specialStyle = (index) => pinning.left.length ? { position: "sticky", left: `var(--ad-table-pin-left, ${index * 40}px)`, zIndex: 2 } : {};
-  const body = loading ? Array.from({ length: Math.min(perPage ?? 4, 6) }, (_, i) => /* @__PURE__ */ jsx27("tr", { className: "ad-data-table-loading", children: Array.from({ length: span }, (__, j) => /* @__PURE__ */ jsx27("td", { children: /* @__PURE__ */ jsx27("i", {}) }, j)) }, i)) : visible.length === 0 && !groups.some((group) => collapsed.has(group.name)) ? /* @__PURE__ */ jsx27("tr", { children: /* @__PURE__ */ jsx27("td", { className: "ad-data-table-empty", colSpan: span, children: empty }) }) : viewItems.slice(start, end).map((entry, indexInWindow) => {
+  const body = loading ? Array.from({ length: Math.min(perPage ?? 4, 6) }, (_, i) => /* @__PURE__ */ jsx22("tr", { className: "ad-data-table-loading", children: Array.from({ length: span }, (__, j) => /* @__PURE__ */ jsx22("td", { children: /* @__PURE__ */ jsx22("i", {}) }, j)) }, i)) : visible.length === 0 && !groups.some((group) => collapsed.has(group.name)) ? /* @__PURE__ */ jsx22("tr", { children: /* @__PURE__ */ jsx22("td", { className: "ad-data-table-empty", colSpan: span, children: empty }) }) : viewItems.slice(start, end).map((entry, indexInWindow) => {
     const viewIndex = start + indexInWindow;
     if (entry.kind === "group") return groupRow(entry.group, viewIndex);
     const { row, index, key } = entry.item;
-    if (entry.kind === "details") return /* @__PURE__ */ jsx27("tr", { "data-virtual-key": entry.key, "aria-rowindex": virtualize ? viewIndex + 2 : void 0, "data-details-key": key, className: "ad-data-table-details", children: /* @__PURE__ */ jsx27("td", { colSpan: span, children: renderRowDetails?.(row, index) }) }, entry.key);
-    return /* @__PURE__ */ jsxs20(
+    if (entry.kind === "details") return /* @__PURE__ */ jsx22("tr", { "data-virtual-key": entry.key, "aria-rowindex": virtualize ? viewIndex + 2 : void 0, "data-details-key": key, className: "ad-data-table-details", children: /* @__PURE__ */ jsx22("td", { colSpan: span, children: renderRowDetails?.(row, index) }) }, entry.key);
+    return /* @__PURE__ */ jsxs16(
       "tr",
       {
         "data-virtual-key": entry.key,
@@ -2741,7 +2463,7 @@ function DataTable({
           }
         } : void 0,
         children: [
-          renderRowDetails && /* @__PURE__ */ jsx27("td", { className: "ad-data-table-expand", "data-label": tr2("\u041F\u043E\u0434\u0440\u043E\u0431\u043D\u043E\u0441\u0442\u0438"), style: specialStyle(0), onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx27(
+          renderRowDetails && /* @__PURE__ */ jsx22("td", { className: "ad-data-table-expand", "data-label": tr2("\u041F\u043E\u0434\u0440\u043E\u0431\u043D\u043E\u0441\u0442\u0438"), style: specialStyle(0), onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsx22(
             IconButton,
             {
               size: "xs",
@@ -2753,25 +2475,25 @@ function DataTable({
               onClick: () => toggleDetails(key)
             }
           ) }),
-          rowNumbers && /* @__PURE__ */ jsx27("td", { className: "ad-data-table-row-number", style: specialStyle(Number(!!renderRowDetails)), "data-label": tr2("\u041D\u043E\u043C\u0435\u0440 \u0441\u0442\u0440\u043E\u043A\u0438"), children: entry.position + 1 }),
-          selectable && /* @__PURE__ */ jsx27(
+          rowNumbers && /* @__PURE__ */ jsx22("td", { className: "ad-data-table-row-number", style: specialStyle(Number(!!renderRowDetails)), "data-label": tr2("\u041D\u043E\u043C\u0435\u0440 \u0441\u0442\u0440\u043E\u043A\u0438"), children: entry.position + 1 }),
+          selectable && /* @__PURE__ */ jsx22(
             "td",
             {
               className: "ad-data-table-check",
               style: specialStyle(Number(!!renderRowDetails) + Number(rowNumbers)),
               onClick: (e) => e.stopPropagation(),
-              children: /* @__PURE__ */ jsx27(
+              children: /* @__PURE__ */ jsx22(
                 Checkbox,
                 {
                   size: "sm",
                   checked: chosen.has(key),
                   onValueChange: () => toggle(key),
-                  label: /* @__PURE__ */ jsx27("span", { className: "ad-sr-only", children: tr2("\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0441\u0442\u0440\u043E\u043A\u0443") })
+                  label: /* @__PURE__ */ jsx22("span", { className: "ad-sr-only", children: tr2("\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0441\u0442\u0440\u043E\u043A\u0443") })
                 }
               )
             }
           ),
-          visibleCols.map((column) => /* @__PURE__ */ jsx27(
+          visibleCols.map((column) => /* @__PURE__ */ jsx22(
             "td",
             {
               "data-align": column.align,
@@ -2784,13 +2506,13 @@ function DataTable({
             },
             column.key
           )),
-          renderRowActions && /* @__PURE__ */ jsx27("td", { className: "ad-data-table-actions", "data-label": tr2("\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044F"), style: pinning.right.length ? { position: "sticky", right: "var(--ad-table-pin-right, 0px)", zIndex: 2 } : void 0, onClick: (event) => event.stopPropagation(), children: renderRowActions(row, index) })
+          renderRowActions && /* @__PURE__ */ jsx22("td", { className: "ad-data-table-actions", "data-label": tr2("\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044F"), style: pinning.right.length ? { position: "sticky", right: "var(--ad-table-pin-right, 0px)", zIndex: 2 } : void 0, onClick: (event) => event.stopPropagation(), children: renderRowActions(row, index) })
         ]
       },
       entry.key
     );
   });
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       ...mark("DataTable", p),
@@ -2801,9 +2523,9 @@ function DataTable({
       "data-pinned": pinned || void 0,
       "aria-busy": loading || void 0,
       children: [
-        (caption || searchable || groupable || densityToggle || cols.length > 1 || viewChanged) && /* @__PURE__ */ jsxs20("div", { className: "ad-data-table-bar", children: [
-          caption && /* @__PURE__ */ jsx27("strong", { children: caption }),
-          groupable && /* @__PURE__ */ jsx27(
+        (caption || searchable || groupable || densityToggle || cols.length > 1 || viewChanged) && /* @__PURE__ */ jsxs16("div", { className: "ad-data-table-bar", children: [
+          caption && /* @__PURE__ */ jsx22("strong", { children: caption }),
+          groupable && /* @__PURE__ */ jsx22(
             Select,
             {
               size: "sm",
@@ -2822,7 +2544,7 @@ function DataTable({
               ]
             }
           ),
-          searchable && /* @__PURE__ */ jsx27(
+          searchable && /* @__PURE__ */ jsx22(
             TextField,
             {
               size: "sm",
@@ -2832,13 +2554,13 @@ function DataTable({
                 setQuery(value);
                 setPage(0);
               },
-              startAdornment: /* @__PURE__ */ jsx27(Icon, { name: "search" }),
+              startAdornment: /* @__PURE__ */ jsx22(Icon, { name: "search" }),
               clearable: true,
               "aria-label": tr2("\u041F\u043E\u0438\u0441\u043A \u043F\u043E \u0442\u0430\u0431\u043B\u0438\u0446\u0435")
             }
           ),
-          /* @__PURE__ */ jsxs20("span", { className: "ad-data-table-tools", children: [
-            viewChanged && /* @__PURE__ */ jsx27(
+          /* @__PURE__ */ jsxs16("span", { className: "ad-data-table-tools", children: [
+            viewChanged && /* @__PURE__ */ jsx22(
               IconButton,
               {
                 size: "sm",
@@ -2848,9 +2570,9 @@ function DataTable({
                 onClick: resetView
               }
             ),
-            densityToggle && /* @__PURE__ */ jsx27(IconButton, { size: "sm", variant: "ghost", icon: "list", label: tr2("\u041A\u043E\u043C\u043F\u0430\u043A\u0442\u043D\u044B\u0435 \u0441\u0442\u0440\u043E\u043A\u0438"), "aria-pressed": dense, onClick: () => setDense(!dense) }),
-            cols.length > 1 && /* @__PURE__ */ jsxs20(Fragment4, { children: [
-              /* @__PURE__ */ jsx27(
+            densityToggle && /* @__PURE__ */ jsx22(IconButton, { size: "sm", variant: "ghost", icon: "list", label: tr2("\u041A\u043E\u043C\u043F\u0430\u043A\u0442\u043D\u044B\u0435 \u0441\u0442\u0440\u043E\u043A\u0438"), "aria-pressed": dense, onClick: () => setDense(!dense) }),
+            cols.length > 1 && /* @__PURE__ */ jsxs16(Fragment3, { children: [
+              /* @__PURE__ */ jsx22(
                 IconButton,
                 {
                   ref: columnsAnchor,
@@ -2862,8 +2584,8 @@ function DataTable({
                   onClick: () => setColumnsOpen((open) => !open)
                 }
               ),
-              /* @__PURE__ */ jsx27(Popover, { open: columnsOpen, onOpenChange: setColumnsOpen, anchorRef: columnsAnchor, label: tr2("\u0421\u0442\u043E\u043B\u0431\u0446\u044B"), children: /* @__PURE__ */ jsx27("div", { className: "ad-data-table-columns", children: orderedCols.map((column, index) => /* @__PURE__ */ jsxs20("div", { className: "ad-data-table-column-option", children: [
-                /* @__PURE__ */ jsx27(
+              /* @__PURE__ */ jsx22(Popover, { open: columnsOpen, onOpenChange: setColumnsOpen, anchorRef: columnsAnchor, label: tr2("\u0421\u0442\u043E\u043B\u0431\u0446\u044B"), children: /* @__PURE__ */ jsx22("div", { className: "ad-data-table-columns", children: orderedCols.map((column, index) => /* @__PURE__ */ jsxs16("div", { className: "ad-data-table-column-option", children: [
+                /* @__PURE__ */ jsx22(
                   Checkbox,
                   {
                     size: "sm",
@@ -2872,7 +2594,7 @@ function DataTable({
                     onValueChange: (shown) => setHiddenColumns((current2) => shown ? current2.filter((key) => key !== column.key) : visibleCols.length > 1 ? [...current2, column.key] : current2)
                   }
                 ),
-                /* @__PURE__ */ jsx27("span", { className: "ad-data-table-column-actions", children: [
+                /* @__PURE__ */ jsx22("span", { className: "ad-data-table-column-actions", children: [
                   { label: "\u041F\u0435\u0440\u0435\u043C\u0435\u0441\u0442\u0438\u0442\u044C \u0432\u043B\u0435\u0432\u043E: {title}", icon: "prev", disabled: index === 0, action: () => {
                     const next = orderedCols.map((column2) => column2.key);
                     [next[index - 1], next[index]] = [next[index], next[index - 1]];
@@ -2891,7 +2613,7 @@ function DataTable({
                     right: pinning.right.includes(column.key) ? pinning.right.filter((key) => key !== column.key) : [...pinning.right, column.key],
                     left: pinning.left.filter((key) => key !== column.key)
                   }) }
-                ].map((action) => /* @__PURE__ */ jsx27(
+                ].map((action) => /* @__PURE__ */ jsx22(
                   IconButton,
                   {
                     size: "xs",
@@ -2906,7 +2628,7 @@ function DataTable({
                 )) })
               ] }, column.key)) }) })
             ] }),
-            /* @__PURE__ */ jsx27(
+            /* @__PURE__ */ jsx22(
               IconButton,
               {
                 size: "sm",
@@ -2925,38 +2647,38 @@ function DataTable({
             )
           ] })
         ] }),
-        activeFilters.length > 0 && /* @__PURE__ */ jsxs20("div", { className: "ad-data-table-chips", children: [
-          activeFilters.map((column) => /* @__PURE__ */ jsxs20("span", { className: "ad-data-table-chip", children: [
-            /* @__PURE__ */ jsx27("strong", { children: column.title }),
+        activeFilters.length > 0 && /* @__PURE__ */ jsxs16("div", { className: "ad-data-table-chips", children: [
+          activeFilters.map((column) => /* @__PURE__ */ jsxs16("span", { className: "ad-data-table-chip", children: [
+            /* @__PURE__ */ jsx22("strong", { children: column.title }),
             " ",
             describe(filters[column.key], tr2),
-            /* @__PURE__ */ jsx27("button", { type: "button", "aria-label": tr2("\u0423\u0431\u0440\u0430\u0442\u044C \u0444\u0438\u043B\u044C\u0442\u0440"), onClick: () => setFilter(column.key, void 0), children: /* @__PURE__ */ jsx27(Icon, { name: "close" }) })
+            /* @__PURE__ */ jsx22("button", { type: "button", "aria-label": tr2("\u0423\u0431\u0440\u0430\u0442\u044C \u0444\u0438\u043B\u044C\u0442\u0440"), onClick: () => setFilter(column.key, void 0), children: /* @__PURE__ */ jsx22(Icon, { name: "close" }) })
           ] }, column.key)),
-          /* @__PURE__ */ jsx27(Button, { size: "xs", variant: "ghost", icon: "reset", onClick: () => {
+          /* @__PURE__ */ jsx22(Button, { size: "xs", variant: "ghost", icon: "reset", onClick: () => {
             setFilters({});
             setPage(0);
           }, children: tr2("\u0421\u0431\u0440\u043E\u0441\u0438\u0442\u044C \u0444\u0438\u043B\u044C\u0442\u0440\u044B") })
         ] }),
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx22(
           "div",
           {
             ref: scrollRef,
             className: "ad-data-table-scroll",
             onScroll: virtualize ? scheduleViewport : void 0,
             style: { maxHeight: maxHeight ?? (virtualize ? 480 : void 0), height: virtualize ? maxHeight ?? 480 : void 0 },
-            children: /* @__PURE__ */ jsxs20("table", { "aria-rowcount": knownTotal ? (virtualize ? viewItems.length : total + viewItems.length - visible.length) + 1 : -1, style: pinned ? { width: visibleCols.reduce((sum, column) => sum + widthOf(column.key), leading * 40 + (renderRowActions ? actionWidth : 0)) } : void 0, children: [
-              /* @__PURE__ */ jsxs20("colgroup", { children: [
-                Array.from({ length: leading }, (_, index) => /* @__PURE__ */ jsx27("col", { style: { width: 40 } }, `leading:${index}`)),
-                visibleCols.map((column) => /* @__PURE__ */ jsx27("col", { style: { width: columnWidth(column) } }, column.key)),
-                renderRowActions && /* @__PURE__ */ jsx27("col", { style: { width: actionWidth } })
+            children: /* @__PURE__ */ jsxs16("table", { "aria-rowcount": knownTotal ? (virtualize ? viewItems.length : total + viewItems.length - visible.length) + 1 : -1, style: pinned ? { width: visibleCols.reduce((sum, column) => sum + widthOf(column.key), leading * 40 + (renderRowActions ? actionWidth : 0)) } : void 0, children: [
+              /* @__PURE__ */ jsxs16("colgroup", { children: [
+                Array.from({ length: leading }, (_, index) => /* @__PURE__ */ jsx22("col", { style: { width: 40 } }, `leading:${index}`)),
+                visibleCols.map((column) => /* @__PURE__ */ jsx22("col", { style: { width: columnWidth(column) } }, column.key)),
+                renderRowActions && /* @__PURE__ */ jsx22("col", { style: { width: actionWidth } })
               ] }),
-              /* @__PURE__ */ jsx27("thead", { ref: headerRef, children: /* @__PURE__ */ jsxs20("tr", { children: [
-                renderRowDetails && /* @__PURE__ */ jsx27("th", { className: "ad-data-table-expand", style: specialStyle(0), children: /* @__PURE__ */ jsx27("span", { className: "ad-sr-only", children: tr2("\u041F\u043E\u0434\u0440\u043E\u0431\u043D\u043E\u0441\u0442\u0438") }) }),
-                rowNumbers && /* @__PURE__ */ jsxs20("th", { className: "ad-data-table-row-number", style: specialStyle(Number(!!renderRowDetails)), scope: "col", children: [
-                  /* @__PURE__ */ jsx27("span", { className: "ad-sr-only", children: tr2("\u041D\u043E\u043C\u0435\u0440 \u0441\u0442\u0440\u043E\u043A\u0438") }),
+              /* @__PURE__ */ jsx22("thead", { ref: headerRef, children: /* @__PURE__ */ jsxs16("tr", { children: [
+                renderRowDetails && /* @__PURE__ */ jsx22("th", { className: "ad-data-table-expand", style: specialStyle(0), children: /* @__PURE__ */ jsx22("span", { className: "ad-sr-only", children: tr2("\u041F\u043E\u0434\u0440\u043E\u0431\u043D\u043E\u0441\u0442\u0438") }) }),
+                rowNumbers && /* @__PURE__ */ jsxs16("th", { className: "ad-data-table-row-number", style: specialStyle(Number(!!renderRowDetails)), scope: "col", children: [
+                  /* @__PURE__ */ jsx22("span", { className: "ad-sr-only", children: tr2("\u041D\u043E\u043C\u0435\u0440 \u0441\u0442\u0440\u043E\u043A\u0438") }),
                   "#"
                 ] }),
-                selectable && /* @__PURE__ */ jsx27("th", { className: "ad-data-table-check", style: specialStyle(Number(!!renderRowDetails) + Number(rowNumbers)), children: /* @__PURE__ */ jsx27(
+                selectable && /* @__PURE__ */ jsx22("th", { className: "ad-data-table-check", style: specialStyle(Number(!!renderRowDetails) + Number(rowNumbers)), children: /* @__PURE__ */ jsx22(
                   Checkbox,
                   {
                     size: "sm",
@@ -2964,7 +2686,7 @@ function DataTable({
                     indeterminate: someChosen,
                     onValueChange: toggleAll,
                     "aria-label": tr2("\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0432\u0441\u0435"),
-                    label: /* @__PURE__ */ jsx27("span", { className: "ad-data-table-select-all-label", children: tr2("\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0432\u0441\u0435") })
+                    label: /* @__PURE__ */ jsx22("span", { className: "ad-data-table-select-all-label", children: tr2("\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0432\u0441\u0435") })
                   }
                 ) }),
                 visibleCols.map((column) => {
@@ -2974,7 +2696,7 @@ function DataTable({
                   const filter = columnFilters.get(column.key);
                   const width = customWidth(column.key);
                   const resize = (delta, base) => setColumnWidths((current2) => ({ ...current2, [column.key]: Math.max(96, Math.min(800, Math.round(base + delta))) }));
-                  return /* @__PURE__ */ jsxs20(
+                  return /* @__PURE__ */ jsxs16(
                     "th",
                     {
                       scope: "col",
@@ -2984,8 +2706,8 @@ function DataTable({
                       style: columnStyle(column),
                       "aria-sort": direction ? sortStates[direction].aria : void 0,
                       children: [
-                        /* @__PURE__ */ jsxs20("span", { className: "ad-data-table-head", children: [
-                          sortable ? /* @__PURE__ */ jsxs20(
+                        /* @__PURE__ */ jsxs16("span", { className: "ad-data-table-head", children: [
+                          sortable ? /* @__PURE__ */ jsxs16(
                             "button",
                             {
                               type: "button",
@@ -2994,12 +2716,12 @@ function DataTable({
                               onClick: (event) => cycleSort(column.key, !!event?.shiftKey),
                               children: [
                                 column.title,
-                                /* @__PURE__ */ jsx27(Icon, { name: "chevron" }),
-                                sorting.length > 1 && sortIndex >= 0 && /* @__PURE__ */ jsx27("small", { className: "ad-data-table-sort-priority", children: sortIndex + 1 })
+                                /* @__PURE__ */ jsx22(Icon, { name: "chevron" }),
+                                sorting.length > 1 && sortIndex >= 0 && /* @__PURE__ */ jsx22("small", { className: "ad-data-table-sort-priority", children: sortIndex + 1 })
                               ]
                             }
                           ) : column.title,
-                          filter?.kind && /* @__PURE__ */ jsx27(
+                          filter?.kind && /* @__PURE__ */ jsx22(
                             ColumnFilter,
                             {
                               column,
@@ -3011,7 +2733,7 @@ function DataTable({
                             }
                           )
                         ] }),
-                        resizableColumns && column.resizable !== false && /* @__PURE__ */ jsx27(
+                        resizableColumns && column.resizable !== false && /* @__PURE__ */ jsx22(
                           "span",
                           {
                             className: "ad-data-table-resize",
@@ -3059,21 +2781,21 @@ function DataTable({
                     column.key
                   );
                 }),
-                renderRowActions && /* @__PURE__ */ jsx27("th", { className: "ad-data-table-actions", scope: "col", style: pinning.right.length ? { right: "var(--ad-table-pin-right, 0px)", zIndex: 3 } : void 0, children: tr2("\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044F") })
+                renderRowActions && /* @__PURE__ */ jsx22("th", { className: "ad-data-table-actions", scope: "col", style: pinning.right.length ? { right: "var(--ad-table-pin-right, 0px)", zIndex: 3 } : void 0, children: tr2("\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044F") })
               ] }) }),
-              /* @__PURE__ */ jsxs20("tbody", { ref: bodyRef, children: [
-                virtualize && !loading && start > 0 && /* @__PURE__ */ jsx27("tr", { className: "ad-data-table-spacer", "aria-hidden": "true", children: /* @__PURE__ */ jsx27("td", { colSpan: span, style: { height: offsets[start] } }) }),
+              /* @__PURE__ */ jsxs16("tbody", { ref: bodyRef, children: [
+                virtualize && !loading && start > 0 && /* @__PURE__ */ jsx22("tr", { className: "ad-data-table-spacer", "aria-hidden": "true", children: /* @__PURE__ */ jsx22("td", { colSpan: span, style: { height: offsets[start] } }) }),
                 body,
-                virtualize && !loading && end < viewItems.length && /* @__PURE__ */ jsx27("tr", { className: "ad-data-table-spacer", "aria-hidden": "true", children: /* @__PURE__ */ jsx27("td", { colSpan: span, style: { height: virtualHeight - offsets[end] } }) })
+                virtualize && !loading && end < viewItems.length && /* @__PURE__ */ jsx22("tr", { className: "ad-data-table-spacer", "aria-hidden": "true", children: /* @__PURE__ */ jsx22("td", { colSpan: span, style: { height: virtualHeight - offsets[end] } }) })
               ] })
             ] })
           }
         ),
-        (perPage || activeFilters.length > 0 || selectable && selection.length > 0) && /* @__PURE__ */ jsxs20("div", { className: "ad-data-table-foot", children: [
-          /* @__PURE__ */ jsx27("span", { children: selectable && selection.length > 0 ? tr2("\u0412\u044B\u0431\u0440\u0430\u043D\u043E: {count}", { count: selection.length }) : perPage ? tr2(knownTotal ? "{from}\u2013{to} \u0438\u0437 {count}" : "{from}\u2013{to}", { from: visible.length ? current * perPage + 1 : 0, to: visible.length ? current * perPage + visible.length : 0, count: total }) : tr2(query || activeFilters.length ? "{count} \u043D\u0430\u0439\u0434\u0435\u043D\u043E" : "{count} \u0432\u0441\u0435\u0433\u043E", { count: sorted.length }) }),
-          selectable && selection.length > 0 && /* @__PURE__ */ jsx27(Button, { size: "xs", variant: "ghost", icon: "close", onClick: () => setSelection([]), children: tr2("\u0421\u043D\u044F\u0442\u044C \u0432\u044B\u0434\u0435\u043B\u0435\u043D\u0438\u0435") }),
-          perPage && /* @__PURE__ */ jsxs20("span", { className: "ad-data-table-page-controls", children: [
-            /* @__PURE__ */ jsx27(
+        (perPage || activeFilters.length > 0 || selectable && selection.length > 0) && /* @__PURE__ */ jsxs16("div", { className: "ad-data-table-foot", children: [
+          /* @__PURE__ */ jsx22("span", { children: selectable && selection.length > 0 ? tr2("\u0412\u044B\u0431\u0440\u0430\u043D\u043E: {count}", { count: selection.length }) : perPage ? tr2(knownTotal ? "{from}\u2013{to} \u0438\u0437 {count}" : "{from}\u2013{to}", { from: visible.length ? current * perPage + 1 : 0, to: visible.length ? current * perPage + visible.length : 0, count: total }) : tr2(query || activeFilters.length ? "{count} \u043D\u0430\u0439\u0434\u0435\u043D\u043E" : "{count} \u0432\u0441\u0435\u0433\u043E", { count: sorted.length }) }),
+          selectable && selection.length > 0 && /* @__PURE__ */ jsx22(Button, { size: "xs", variant: "ghost", icon: "close", onClick: () => setSelection([]), children: tr2("\u0421\u043D\u044F\u0442\u044C \u0432\u044B\u0434\u0435\u043B\u0435\u043D\u0438\u0435") }),
+          perPage && /* @__PURE__ */ jsxs16("span", { className: "ad-data-table-page-controls", children: [
+            /* @__PURE__ */ jsx22(
               Select,
               {
                 size: "sm",
@@ -3085,8 +2807,8 @@ function DataTable({
                 }
               }
             ),
-            pages > 1 && /* @__PURE__ */ jsxs20("span", { className: "ad-data-table-pages", children: [
-              /* @__PURE__ */ jsx27(
+            pages > 1 && /* @__PURE__ */ jsxs16("span", { className: "ad-data-table-pages", children: [
+              /* @__PURE__ */ jsx22(
                 IconButton,
                 {
                   size: "xs",
@@ -3097,12 +2819,12 @@ function DataTable({
                   onClick: () => setPage(current - 1)
                 }
               ),
-              /* @__PURE__ */ jsxs20("span", { children: [
+              /* @__PURE__ */ jsxs16("span", { children: [
                 current + 1,
                 " / ",
                 knownTotal ? pages : "\u2026"
               ] }),
-              /* @__PURE__ */ jsx27(
+              /* @__PURE__ */ jsx22(
                 IconButton,
                 {
                   size: "xs",
@@ -3123,8 +2845,8 @@ function DataTable({
 }
 
 // src/components/feedback/Dialog/Dialog.tsx
-import { useId, useLayoutEffect as useLayoutEffect3, useRef as useRef12, useState as useState6 } from "react";
-import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+import { useId, useLayoutEffect as useLayoutEffect2, useRef as useRef10, useState as useState5 } from "react";
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
 var outside = (dialog, x, y, target) => {
   if (target !== dialog) return false;
   const box = dialog.getBoundingClientRect();
@@ -3136,9 +2858,9 @@ var Dialog = (p) => {
     p.open,
     p.defaultOpen ?? false,
     p.onOpenChange
-  ), [pending, setPending] = useState6(false), [error, setError] = useState6();
-  const ref = useRef12(null), confirmation = useRef12(0), confirming = useRef12(false), pressedOutside = useRef12(false), titleId = useId(), descId = useId();
-  useLayoutEffect3(() => {
+  ), [pending, setPending] = useState5(false), [error, setError] = useState5();
+  const ref = useRef10(null), confirmation = useRef10(0), confirming = useRef10(false), pressedOutside = useRef10(false), titleId = useId(), descId = useId();
+  useLayoutEffect2(() => {
     confirming.current = false;
     setPending(false);
     setError(void 0);
@@ -3147,7 +2869,7 @@ var Dialog = (p) => {
       confirming.current = false;
     };
   }, [open]);
-  useLayoutEffect3(() => {
+  useLayoutEffect2(() => {
     const d = ref.current;
     if (!d) return;
     const opener = document.activeElement instanceof HTMLElement ? document.activeElement : null;
@@ -3167,7 +2889,7 @@ var Dialog = (p) => {
     };
   }, [open]);
   if (!open) return null;
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs17(
     "dialog",
     {
       ...mark("Dialog", p, "dialog"),
@@ -3197,14 +2919,14 @@ var Dialog = (p) => {
         if (!pending) setOpen(false);
       },
       children: [
-        p.art && /* @__PURE__ */ jsx28("div", { className: "ad-dialog-art", "aria-hidden": "true", children: p.art }),
-        /* @__PURE__ */ jsx28(
+        p.art && /* @__PURE__ */ jsx23("div", { className: "ad-dialog-art", "aria-hidden": "true", children: p.art }),
+        /* @__PURE__ */ jsx23(
           Header,
           {
-            title: /* @__PURE__ */ jsx28("span", { id: titleId, children: p.title ?? tr2("\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043D\u0438\u0435") }),
+            title: /* @__PURE__ */ jsx23("span", { id: titleId, children: p.title ?? tr2("\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043D\u0438\u0435") }),
             icon: p.icon,
             level: 2,
-            actions: /* @__PURE__ */ jsx28(
+            actions: /* @__PURE__ */ jsx23(
               IconButton,
               {
                 variant: "ghost",
@@ -3216,14 +2938,14 @@ var Dialog = (p) => {
             )
           }
         ),
-        /* @__PURE__ */ jsxs21(DialogBody, { children: [
-          p.description && /* @__PURE__ */ jsx28("p", { id: descId, children: p.description }),
+        /* @__PURE__ */ jsxs17(DialogBody, { children: [
+          p.description && /* @__PURE__ */ jsx23("p", { id: descId, children: p.description }),
           p.children,
-          error && /* @__PURE__ */ jsx28(MessageBar, { tone: "error", children: error })
+          error && /* @__PURE__ */ jsx23(MessageBar, { tone: "error", children: error })
         ] }),
-        (p.cancelLabel !== false || p.confirmLabel !== false) && /* @__PURE__ */ jsxs21(DialogActions, { children: [
-          p.cancelLabel !== false && /* @__PURE__ */ jsx28(Button, { disabled: pending, onClick: () => setOpen(false), children: p.cancelLabel ?? tr2("\u041E\u0442\u043C\u0435\u043D\u0430") }),
-          p.confirmLabel !== false && /* @__PURE__ */ jsx28(
+        (p.cancelLabel !== false || p.confirmLabel !== false) && /* @__PURE__ */ jsxs17(DialogActions, { children: [
+          p.cancelLabel !== false && /* @__PURE__ */ jsx23(Button, { disabled: pending, onClick: () => setOpen(false), children: p.cancelLabel ?? tr2("\u041E\u0442\u043C\u0435\u043D\u0430") }),
+          p.confirmLabel !== false && /* @__PURE__ */ jsx23(
             Button,
             {
               variant: p.danger ? "danger" : "primary",
@@ -3263,28 +2985,28 @@ var Dialog = (p) => {
 };
 
 // src/components/feedback/EmptyState/EmptyState.tsx
-import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
 var EmptyState = (p) => {
   const tr2 = useTr();
-  return /* @__PURE__ */ jsxs22("div", { ...mark("EmptyState", p), children: [
-    /* @__PURE__ */ jsx29(Icon, { name: p.icon ?? "music", size: 44 }),
-    /* @__PURE__ */ jsx29("h3", { children: p.title ?? tr2("\u041F\u043E\u043A\u0430 \u043D\u0435\u0442 \u0437\u0430\u043F\u0438\u0441\u0435\u0439") }),
-    /* @__PURE__ */ jsx29("p", { children: p.description ?? tr2("\u0414\u043E\u0431\u0430\u0432\u044C\u0442\u0435 \u0437\u0430\u043F\u0438\u0441\u044C, \u0447\u0442\u043E\u0431\u044B \u043D\u0430\u0447\u0430\u0442\u044C.") }),
+  return /* @__PURE__ */ jsxs18("div", { ...mark("EmptyState", p), children: [
+    /* @__PURE__ */ jsx24(Icon, { name: p.icon ?? "music", size: 44 }),
+    /* @__PURE__ */ jsx24("h3", { children: p.title ?? tr2("\u041F\u043E\u043A\u0430 \u043D\u0435\u0442 \u0437\u0430\u043F\u0438\u0441\u0435\u0439") }),
+    /* @__PURE__ */ jsx24("p", { children: p.description ?? tr2("\u0414\u043E\u0431\u0430\u0432\u044C\u0442\u0435 \u0437\u0430\u043F\u0438\u0441\u044C, \u0447\u0442\u043E\u0431\u044B \u043D\u0430\u0447\u0430\u0442\u044C.") }),
     p.action
   ] });
 };
 
 // src/components/feedback/KeyValueList/KeyValueList.tsx
-import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
 var KeyValueList = (p) => {
   const tr2 = useTr();
-  return /* @__PURE__ */ jsx30("dl", { ...mark("KeyValueList", p), children: (p.items ?? [
+  return /* @__PURE__ */ jsx25("dl", { ...mark("KeyValueList", p), children: (p.items ?? [
     ["Python Backend", "Ready"],
     ["AudioService", "Running"],
     [tr2("\u0411\u0430\u0437\u0430 \u0434\u0430\u043D\u043D\u044B\u0445"), tr2("\u0418\u0441\u043F\u0440\u0430\u0432\u043D\u043E")]
-  ]).map(([key, value], i) => /* @__PURE__ */ jsxs23("div", { children: [
-    /* @__PURE__ */ jsx30("dt", { children: key }),
-    /* @__PURE__ */ jsx30("dd", { children: value })
+  ]).map(([key, value], i) => /* @__PURE__ */ jsxs19("div", { children: [
+    /* @__PURE__ */ jsx25("dt", { children: key }),
+    /* @__PURE__ */ jsx25("dd", { children: value })
   ] }, i)) });
 };
 
@@ -3293,11 +3015,11 @@ import {
   cloneElement,
   isValidElement as isValidElement2,
   useId as useId2,
-  useLayoutEffect as useLayoutEffect4,
-  useRef as useRef13,
-  useState as useState7
+  useLayoutEffect as useLayoutEffect3,
+  useRef as useRef11,
+  useState as useState6
 } from "react";
-import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
 function Tooltip({
   content,
   children,
@@ -3305,11 +3027,11 @@ function Tooltip({
   ...p
 }) {
   const id = useId2();
-  const trigger = useRef13(null);
-  const tip = useRef13(null);
-  const hovered = useRef13(false);
-  const [open, setOpen] = useState7(false);
-  useLayoutEffect4(() => {
+  const trigger = useRef11(null);
+  const tip = useRef11(null);
+  const hovered = useRef11(false);
+  const [open, setOpen] = useState6(false);
+  useLayoutEffect3(() => {
     const node = tip.current;
     const target = trigger.current;
     if (!open || !node || !target) return;
@@ -3358,7 +3080,7 @@ function Tooltip({
   }, [open, placement]);
   const show = () => setOpen(true);
   const hide = () => setOpen(false);
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs20(
     "span",
     {
       ref: trigger,
@@ -3388,7 +3110,7 @@ function Tooltip({
             "aria-describedby": [children.props["aria-describedby"], open ? id : void 0].filter(Boolean).join(" ") || void 0
           }
         ) : children,
-        open && /* @__PURE__ */ jsx31(
+        open && /* @__PURE__ */ jsx26(
           "span",
           {
             ...mark("Tooltip", p),
@@ -3406,7 +3128,7 @@ function Tooltip({
 
 // src/components/feedback/ProgressBar/ProgressBar.tsx
 import { useId as useId3 } from "react";
-import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
 var WAVE = Array.from(
   { length: 64 },
   (_, i) => 0.25 + 0.75 * Math.abs(Math.sin(i * 0.37) * Math.cos(i * 0.11 + 1.3))
@@ -3422,7 +3144,7 @@ var ProgressBar = (p) => {
   const value = clamp(p.value ?? 56, 0, max);
   const share = p.indeterminate ? 35 : value / max * 100;
   const clip = `ad-wave-${useId3().replace(/:/g, "")}`;
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx27(
     "div",
     {
       ...mark("ProgressBar", p),
@@ -3433,17 +3155,17 @@ var ProgressBar = (p) => {
       "aria-valuenow": p.indeterminate ? void 0 : value,
       "data-indeterminate": p.indeterminate || void 0,
       "data-variant": p.variant === "wave" ? "wave" : void 0,
-      children: p.variant === "wave" ? /* @__PURE__ */ jsxs25("svg", { viewBox: "0 0 128 24", preserveAspectRatio: "none", "aria-hidden": "true", children: [
-        /* @__PURE__ */ jsx32("defs", { children: /* @__PURE__ */ jsx32("clipPath", { id: clip, children: /* @__PURE__ */ jsx32("rect", { width: 128 * share / 100, height: "24" }) }) }),
-        /* @__PURE__ */ jsx32("path", { className: "ad-progress-wave-idle", d: wavePath }),
-        /* @__PURE__ */ jsx32("path", { className: "ad-progress-wave-done", d: wavePath, clipPath: `url(#${clip})` })
-      ] }) : /* @__PURE__ */ jsx32("span", { style: { width: `${share}%` } })
+      children: p.variant === "wave" ? /* @__PURE__ */ jsxs21("svg", { viewBox: "0 0 128 24", preserveAspectRatio: "none", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx27("defs", { children: /* @__PURE__ */ jsx27("clipPath", { id: clip, children: /* @__PURE__ */ jsx27("rect", { width: 128 * share / 100, height: "24" }) }) }),
+        /* @__PURE__ */ jsx27("path", { className: "ad-progress-wave-idle", d: wavePath }),
+        /* @__PURE__ */ jsx27("path", { className: "ad-progress-wave-done", d: wavePath, clipPath: `url(#${clip})` })
+      ] }) : /* @__PURE__ */ jsx27("span", { style: { width: `${share}%` } })
     }
   );
 };
 
 // src/components/feedback/StatusIndicator/StatusIndicator.tsx
-import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
 var StatusIndicator = ({
   status = "success",
   ...p
@@ -3458,14 +3180,14 @@ var StatusIndicator = ({
     offline: tr2("\u041D\u0435 \u043F\u043E\u0434\u043A\u043B\u044E\u0447\u0435\u043D\u043E"),
     info: tr2("\u0418\u043D\u0444\u043E\u0440\u043C\u0430\u0446\u0438\u044F")
   };
-  return /* @__PURE__ */ jsxs26("span", { ...mark("StatusIndicator", { ...p, tone: status }), children: [
-    /* @__PURE__ */ jsx33("span", { className: "ad-status-dot", "aria-hidden": true, children: /* @__PURE__ */ jsx33("i", {}) }),
-    /* @__PURE__ */ jsx33("span", { children: p.label ?? labels[status] })
+  return /* @__PURE__ */ jsxs22("span", { ...mark("StatusIndicator", { ...p, tone: status }), children: [
+    /* @__PURE__ */ jsx28("span", { className: "ad-status-dot", "aria-hidden": true, children: /* @__PURE__ */ jsx28("i", {}) }),
+    /* @__PURE__ */ jsx28("span", { children: p.label ?? labels[status] })
   ] });
 };
 
 // src/components/feedback/Steps/Steps.tsx
-import { jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
 var Steps = (p) => {
   const tr2 = useTr();
   const steps = p.steps ?? [
@@ -3476,17 +3198,17 @@ var Steps = (p) => {
     tr2("\u041F\u0440\u043E\u0432\u0435\u0440\u043A\u0430")
   ];
   const current = p.current ?? 3;
-  return /* @__PURE__ */ jsx34("ol", { ...mark("Steps", p), children: steps.map((label, i) => {
+  return /* @__PURE__ */ jsx29("ol", { ...mark("Steps", p), children: steps.map((label, i) => {
     const state = i < current ? "done" : i === current ? "current" : "todo";
-    return /* @__PURE__ */ jsxs27(
+    return /* @__PURE__ */ jsxs23(
       "li",
       {
         "data-state": state,
         "aria-current": state === "current" ? "step" : void 0,
         children: [
-          /* @__PURE__ */ jsx34("span", { className: "ad-step-node", "aria-hidden": true, children: state === "done" ? /* @__PURE__ */ jsx34(Icon, { name: "check" }) : i + 1 }),
-          /* @__PURE__ */ jsx34("span", { className: "ad-step-label", children: label }),
-          state === "current" && i > 0 && /* @__PURE__ */ jsx34("span", { className: "ad-steps-glint", "aria-hidden": true })
+          /* @__PURE__ */ jsx29("span", { className: "ad-step-node", "aria-hidden": true, children: state === "done" ? /* @__PURE__ */ jsx29(Icon, { name: "check" }) : i + 1 }),
+          /* @__PURE__ */ jsx29("span", { className: "ad-step-label", children: label }),
+          state === "current" && i > 0 && /* @__PURE__ */ jsx29("span", { className: "ad-steps-glint", "aria-hidden": true })
         ]
       },
       `${i}-${label}`
@@ -3495,8 +3217,8 @@ var Steps = (p) => {
 };
 
 // src/components/feedback/Toast/Toast.tsx
-import { useEffect as useEffect4, useRef as useRef14 } from "react";
-import { jsx as jsx35, jsxs as jsxs28 } from "react/jsx-runtime";
+import { useEffect as useEffect4, useRef as useRef12 } from "react";
+import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
 var Toast = ({
   open = true,
   duration = 3600,
@@ -3504,7 +3226,7 @@ var Toast = ({
   ...p
 }) => {
   const tr2 = useTr();
-  const close = useRef14(onClose);
+  const close = useRef12(onClose);
   close.current = onClose;
   useEffect4(() => {
     if (!open || !onClose || duration <= 0) return;
@@ -3512,7 +3234,7 @@ var Toast = ({
     return () => clearTimeout(id);
   }, [open, duration, !!onClose]);
   if (!open) return null;
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs24(
     "div",
     {
       ...mark(
@@ -3524,14 +3246,14 @@ var Toast = ({
       role: p.tone === "error" ? "alert" : "status",
       "aria-live": p.tone === "error" ? "assertive" : "polite",
       children: [
-        /* @__PURE__ */ jsx35("span", { className: "ad-toast-icon", "aria-hidden": true, children: /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx30("span", { className: "ad-toast-icon", "aria-hidden": true, children: /* @__PURE__ */ jsx30(
           Icon,
           {
             name: p.tone === "error" || p.tone === "warning" ? "warning" : p.tone === "info" ? "info" : "check"
           }
         ) }),
-        /* @__PURE__ */ jsx35("span", { children: p.message ?? p.children ?? tr2("\u041D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438 \u0441\u043E\u0445\u0440\u0430\u043D\u0435\u043D\u044B") }),
-        onClose && duration > 0 && /* @__PURE__ */ jsx35(
+        /* @__PURE__ */ jsx30("span", { children: p.message ?? p.children ?? tr2("\u041D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438 \u0441\u043E\u0445\u0440\u0430\u043D\u0435\u043D\u044B") }),
+        onClose && duration > 0 && /* @__PURE__ */ jsx30(
           "span",
           {
             className: "ad-toast-timer",
@@ -3545,7 +3267,7 @@ var Toast = ({
 };
 
 // src/components/effects/AnimatedBorder/AnimatedBorder.tsx
-import { createElement as createElement7, useRef as useRef15 } from "react";
+import { createElement as createElement7, useRef as useRef13 } from "react";
 function AnimatedBorder({
   as = "div",
   shell = false,
@@ -3553,7 +3275,7 @@ function AnimatedBorder({
   children,
   ...props
 }) {
-  const ref = useRef15(null);
+  const ref = useRef13(null);
   useBorder(ref, true, shell, round);
   usePauseOffscreen(ref);
   return createElement7(
@@ -3604,8 +3326,8 @@ import {
   createElement as createElement9,
   isValidElement as isValidElement3,
   useEffect as useEffect5,
-  useRef as useRef16,
-  useState as useState8
+  useRef as useRef14,
+  useState as useState7
 } from "react";
 function Reveal({
   as = "div",
@@ -3616,8 +3338,8 @@ function Reveal({
   children,
   ...p
 }) {
-  const ref = useRef16(null);
-  const [shown, setShown] = useState8(false);
+  const ref = useRef14(null);
+  const [shown, setShown] = useState7(false);
   useEffect5(() => {
     const node = ref.current;
     if (!node) return;
@@ -3657,15 +3379,15 @@ function Reveal({
 }
 
 // src/components/effects/GlowText/GlowText.tsx
-import { createElement as createElement10, useRef as useRef17 } from "react";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { createElement as createElement10, useRef as useRef15 } from "react";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function GlowText({
   as = "span",
   flicker = false,
   children,
   ...p
 }) {
-  const pauseRef = useRef17(null);
+  const pauseRef = useRef15(null);
   usePauseOffscreen(pauseRef);
   return createElement10(
     as,
@@ -3676,32 +3398,32 @@ function GlowText({
     },
     // The halo is a still copy of the text on a layer of its own, painted once: the flowing
     // gradient repaints only the letters and never re-blurs the glow.
-    /* @__PURE__ */ jsx36("span", { className: "ad-glow-text-halo", "aria-hidden": "true", children }),
+    /* @__PURE__ */ jsx31("span", { className: "ad-glow-text-halo", "aria-hidden": "true", children }),
     children
   );
 }
 
 // src/components/feedback/SignalBars/SignalBars.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function SignalBars({ level = 3, bars = 4, weak = false, label, ...p }) {
   const tr2 = useTr();
   const count = Math.max(1, Number.isFinite(bars) ? Math.floor(bars) : 4);
   const strength = Math.max(0, Math.min(count, Number.isFinite(level) ? Math.round(level) : 0));
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx32(
     "span",
     {
       ...mark("SignalBars", p),
       role: "img",
       "aria-label": label ?? tr2("\u0421\u0438\u0433\u043D\u0430\u043B: {level} \u0438\u0437 {bars}", { level: strength, bars: count }),
       "data-weak": weak || void 0,
-      children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx37("i", { "data-lit": i < strength || void 0, style: { height: `${(i + 1) / count * 100}%` } }, i))
+      children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx32("i", { "data-lit": i < strength || void 0, style: { height: `${(i + 1) / count * 100}%` } }, i))
     }
   );
 }
 
 // src/components/effects/Shimmer/Shimmer.tsx
-import { useRef as useRef18 } from "react";
-import { jsx as jsx38, jsxs as jsxs29 } from "react/jsx-runtime";
+import { useRef as useRef16 } from "react";
+import { jsx as jsx33, jsxs as jsxs25 } from "react/jsx-runtime";
 function Shimmer({
   lines = 3,
   circle = false,
@@ -3709,9 +3431,9 @@ function Shimmer({
   ...p
 }) {
   const tr2 = useTr();
-  const ref = useRef18(null);
+  const ref = useRef16(null);
   usePauseOffscreen(ref);
-  return /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
       ...mark("Shimmer", p),
@@ -3720,8 +3442,8 @@ function Shimmer({
       "aria-label": label ?? tr2("\u0417\u0430\u0433\u0440\u0443\u0437\u043A\u0430"),
       "aria-busy": "true",
       children: [
-        circle && /* @__PURE__ */ jsx38("i", { className: "ad-shimmer-circle" }),
-        /* @__PURE__ */ jsx38("span", { className: "ad-shimmer-lines", children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx38(
+        circle && /* @__PURE__ */ jsx33("i", { className: "ad-shimmer-circle" }),
+        /* @__PURE__ */ jsx33("span", { className: "ad-shimmer-lines", children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx33(
           "i",
           {
             style: { width: i === lines - 1 && lines > 1 ? "60%" : "100%" }
@@ -3734,8 +3456,8 @@ function Shimmer({
 }
 
 // src/components/effects/Sparkles/Sparkles.tsx
-import { useRef as useRef19 } from "react";
-import { jsx as jsx39, jsxs as jsxs30 } from "react/jsx-runtime";
+import { useRef as useRef17 } from "react";
+import { jsx as jsx34, jsxs as jsxs26 } from "react/jsx-runtime";
 function Sparkles({
   count = 10,
   color: color3,
@@ -3743,9 +3465,9 @@ function Sparkles({
   children,
   ...p
 }) {
-  const pauseRef = useRef19(null);
+  const pauseRef = useRef17(null);
   usePauseOffscreen(pauseRef);
-  return /* @__PURE__ */ jsxs30(
+  return /* @__PURE__ */ jsxs26(
     "span",
     {
       ...mark("Sparkles", p),
@@ -3756,7 +3478,7 @@ function Sparkles({
         Array.from({ length: count }, (_, i) => {
           const angle = i * 137.5;
           const reach = 55 + i * 29 % 40;
-          return /* @__PURE__ */ jsx39(
+          return /* @__PURE__ */ jsx34(
             "svg",
             {
               className: "ad-sparkle",
@@ -3768,7 +3490,7 @@ function Sparkles({
                 width: `${0.45 + i * 7 % 5 / 10}em`,
                 animationDelay: `${(i * 0.37 % 2.4).toFixed(2)}s`
               },
-              children: /* @__PURE__ */ jsx39("path", { d: "M5 0C5.6 3.6 6.4 4.4 10 5C6.4 5.6 5.6 6.4 5 10C4.4 6.4 3.6 5.6 0 5C3.6 4.4 4.4 3.6 5 0Z" })
+              children: /* @__PURE__ */ jsx34("path", { d: "M5 0C5.6 3.6 6.4 4.4 10 5C6.4 5.6 5.6 6.4 5 10C4.4 6.4 3.6 5.6 0 5C3.6 4.4 4.4 3.6 5 0Z" })
             },
             i
           );
@@ -3779,8 +3501,8 @@ function Sparkles({
 }
 
 // src/components/effects/Beacon/Beacon.tsx
-import { useRef as useRef20 } from "react";
-import { jsx as jsx40, jsxs as jsxs31 } from "react/jsx-runtime";
+import { useRef as useRef18 } from "react";
+import { jsx as jsx35, jsxs as jsxs27 } from "react/jsx-runtime";
 function Beacon({
   active = true,
   color: color3,
@@ -3788,9 +3510,9 @@ function Beacon({
   children,
   ...p
 }) {
-  const pauseRef = useRef20(null);
+  const pauseRef = useRef18(null);
   usePauseOffscreen(pauseRef);
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs27(
     "span",
     {
       ...mark("Beacon", p),
@@ -3798,9 +3520,9 @@ function Beacon({
       style: { ...style, "--ad-beacon": color3 },
       "data-active": active || void 0,
       children: [
-        /* @__PURE__ */ jsx40("i", { "aria-hidden": true }),
-        /* @__PURE__ */ jsx40("i", { "aria-hidden": true }),
-        /* @__PURE__ */ jsx40("i", { "aria-hidden": true }),
+        /* @__PURE__ */ jsx35("i", { "aria-hidden": true }),
+        /* @__PURE__ */ jsx35("i", { "aria-hidden": true }),
+        /* @__PURE__ */ jsx35("i", { "aria-hidden": true }),
         children
       ]
     }
@@ -3808,8 +3530,8 @@ function Beacon({
 }
 
 // src/components/effects/Marquee/Marquee.tsx
-import { useRef as useRef21 } from "react";
-import { jsx as jsx41, jsxs as jsxs32 } from "react/jsx-runtime";
+import { useRef as useRef19 } from "react";
+import { jsx as jsx36, jsxs as jsxs28 } from "react/jsx-runtime";
 function Marquee({
   duration = 20,
   reverse = false,
@@ -3817,7 +3539,7 @@ function Marquee({
   children,
   ...p
 }) {
-  const pauseRef = useRef21(null);
+  const pauseRef = useRef19(null);
   const motion = useMotion();
   usePauseOffscreen(pauseRef);
   const updatePause = () => {
@@ -3826,7 +3548,7 @@ function Marquee({
     node.toggleAttribute("data-ad-paused", node.matches(":hover, :focus-within"));
     refreshMotion();
   };
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx36(
     "div",
     {
       ...mark("Marquee", p),
@@ -3838,9 +3560,9 @@ function Marquee({
       onPointerLeave: updatePause,
       onFocus: updatePause,
       onBlur: updatePause,
-      children: /* @__PURE__ */ jsxs32("div", { className: "ad-marquee-track", children: [
-        /* @__PURE__ */ jsx41("div", { className: "ad-marquee-group", children }),
-        /* @__PURE__ */ jsx41("div", { className: "ad-marquee-group", "aria-hidden": true, ref: (node) => {
+      children: /* @__PURE__ */ jsxs28("div", { className: "ad-marquee-track", children: [
+        /* @__PURE__ */ jsx36("div", { className: "ad-marquee-group", children }),
+        /* @__PURE__ */ jsx36("div", { className: "ad-marquee-group", "aria-hidden": true, ref: (node) => {
           if (node) node.inert = true;
         }, children })
       ] })
@@ -3849,7 +3571,7 @@ function Marquee({
 }
 
 // src/components/artwork/Landscape/Landscape.tsx
-import { useRef as useRef22 } from "react";
+import { useRef as useRef20 } from "react";
 
 // src/components/artwork/useArtwork.ts
 import { useEffect as useEffect6 } from "react";
@@ -3897,7 +3619,7 @@ function useArtwork(ref, key, width, height, painting) {
 }
 
 // src/components/artwork/Landscape/Landscape.tsx
-import { jsx as jsx42, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs29 } from "react/jsx-runtime";
 var W = 1220;
 var H = 168;
 var centerX = 1129;
@@ -4091,20 +3813,20 @@ var NEAR_RIDGE = [
   [1220, 132]
 ];
 function Landscape({ shade = true, children, ...p }) {
-  const pauseRef = useRef22(null);
+  const pauseRef = useRef20(null);
   usePauseOffscreen(pauseRef);
-  const ref = useRef22(null);
+  const ref = useRef20(null);
   useArtwork(ref, "landscape", W, H, landscape);
-  return /* @__PURE__ */ jsxs33("div", { ...mark("Landscape", p), ref: pauseRef, "data-shade": shade || void 0, children: [
-    /* @__PURE__ */ jsx42("canvas", { ref, "aria-hidden": true }),
-    /* @__PURE__ */ jsx42("span", { className: "ad-landscape-glow", "aria-hidden": true }),
-    children && /* @__PURE__ */ jsx42("div", { className: "ad-landscape-content", children })
+  return /* @__PURE__ */ jsxs29("div", { ...mark("Landscape", p), ref: pauseRef, "data-shade": shade || void 0, children: [
+    /* @__PURE__ */ jsx37("canvas", { ref, "aria-hidden": true }),
+    /* @__PURE__ */ jsx37("span", { className: "ad-landscape-glow", "aria-hidden": true }),
+    children && /* @__PURE__ */ jsx37("div", { className: "ad-landscape-content", children })
   ] });
 }
 
 // src/components/artwork/Planet/Planet.tsx
-import { useRef as useRef23 } from "react";
-import { jsx as jsx43, jsxs as jsxs34 } from "react/jsx-runtime";
+import { useRef as useRef21 } from "react";
+import { jsx as jsx38, jsxs as jsxs30 } from "react/jsx-runtime";
 var W2 = 515;
 var H2 = 114;
 var planet = {
@@ -4146,19 +3868,19 @@ var planet = {
   }
 };
 function Planet({ children, ...p }) {
-  const pauseRef = useRef23(null);
+  const pauseRef = useRef21(null);
   usePauseOffscreen(pauseRef);
-  const ref = useRef23(null);
+  const ref = useRef21(null);
   useArtwork(ref, "planet", W2, H2, planet);
-  return /* @__PURE__ */ jsxs34("div", { ...mark("Planet", p), ref: pauseRef, children: [
-    /* @__PURE__ */ jsx43("canvas", { ref, "aria-hidden": true }),
-    children && /* @__PURE__ */ jsx43("div", { className: "ad-planet-content", children })
+  return /* @__PURE__ */ jsxs30("div", { ...mark("Planet", p), ref: pauseRef, children: [
+    /* @__PURE__ */ jsx38("canvas", { ref, "aria-hidden": true }),
+    children && /* @__PURE__ */ jsx38("div", { className: "ad-planet-content", children })
   ] });
 }
 
 // src/components/artwork/NeonWaves/NeonWaves.tsx
-import { useEffect as useEffect7, useMemo as useMemo3, useRef as useRef24 } from "react";
-import { jsx as jsx44, jsxs as jsxs35 } from "react/jsx-runtime";
+import { useEffect as useEffect7, useMemo as useMemo3, useRef as useRef22 } from "react";
+import { jsx as jsx39, jsxs as jsxs31 } from "react/jsx-runtime";
 var W3 = 600;
 var H3 = 120;
 var SKYLINE = [[0, 0.93], [0.16, 0.86], [0.3, 0.82], [0.42, 0.72], [0.55, 0.64], [0.64, 0.7], [0.74, 0.52], [0.84, 0.1], [0.9, 0.56], [0.95, 0.46], [1, 0.08]];
@@ -4260,15 +3982,15 @@ function NeonWaves({
   comets = 0,
   ...p
 }) {
-  const rootRef = useRef24(null);
-  const ref = useRef24(null);
-  const cometsRef = useRef24(null);
-  const lastDraw = useRef24(-1);
-  const tracks = useRef24(/* @__PURE__ */ new Map());
-  const paths = useRef24(null);
-  const cometElements = useRef24(null);
-  const size = useRef24({ width: 0, height: 0 });
-  const lastTime = useRef24(0);
+  const rootRef = useRef22(null);
+  const ref = useRef22(null);
+  const cometsRef = useRef22(null);
+  const lastDraw = useRef22(-1);
+  const tracks = useRef22(/* @__PURE__ */ new Map());
+  const paths = useRef22(null);
+  const cometElements = useRef22(null);
+  const size = useRef22({ width: 0, height: 0 });
+  const lastTime = useRef22(0);
   const motion = useMotion();
   const id = useSvgId();
   const dots = useMemo3(() => {
@@ -4333,11 +4055,11 @@ function NeonWaves({
       comet.style.opacity = Math.min(1, Math.max(0, (x + 20) / ((W3 + 40) * 0.35))).toFixed(3);
     });
   };
-  const painter = useRef24(paint);
+  const painter = useRef22(paint);
   painter.current = paint;
   useDecoration(ref, paint);
-  return /* @__PURE__ */ jsxs35("span", { ...mark("NeonWaves", p), ref: rootRef, "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs31("span", { ...mark("NeonWaves", p), ref: rootRef, "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxs31(
       "svg",
       {
         ref,
@@ -4345,14 +4067,14 @@ function NeonWaves({
         viewBox: `0 0 ${W3} ${H3}`,
         preserveAspectRatio: "none",
         children: [
-          /* @__PURE__ */ jsx44("defs", { children: /* @__PURE__ */ jsxs35("linearGradient", { id: `${id}-strand`, children: [
-            /* @__PURE__ */ jsx44("stop", { stopColor: "var(--ad-primary-700)", stopOpacity: "0" }),
-            /* @__PURE__ */ jsx44("stop", { offset: ".16", stopColor: "var(--ad-primary-600)", stopOpacity: ".35" }),
-            /* @__PURE__ */ jsx44("stop", { offset: ".57", stopColor: "var(--ad-red)", stopOpacity: ".74" }),
-            /* @__PURE__ */ jsx44("stop", { offset: ".78", stopColor: "var(--ad-pink)", stopOpacity: ".85" }),
-            /* @__PURE__ */ jsx44("stop", { offset: "1", stopColor: "var(--ad-primary-600)", stopOpacity: ".44" })
+          /* @__PURE__ */ jsx39("defs", { children: /* @__PURE__ */ jsxs31("linearGradient", { id: `${id}-strand`, children: [
+            /* @__PURE__ */ jsx39("stop", { stopColor: "var(--ad-primary-700)", stopOpacity: "0" }),
+            /* @__PURE__ */ jsx39("stop", { offset: ".16", stopColor: "var(--ad-primary-600)", stopOpacity: ".35" }),
+            /* @__PURE__ */ jsx39("stop", { offset: ".57", stopColor: "var(--ad-red)", stopOpacity: ".74" }),
+            /* @__PURE__ */ jsx39("stop", { offset: ".78", stopColor: "var(--ad-pink)", stopOpacity: ".85" }),
+            /* @__PURE__ */ jsx39("stop", { offset: "1", stopColor: "var(--ad-primary-600)", stopOpacity: ".44" })
           ] }) }),
-          Array.from({ length: strands }, (_, i) => /* @__PURE__ */ jsx44(
+          Array.from({ length: strands }, (_, i) => /* @__PURE__ */ jsx39(
             "path",
             {
               className: "ad-neon-waves-strand",
@@ -4367,8 +4089,8 @@ function NeonWaves({
         ]
       }
     ),
-    comets > 0 && motion && /* @__PURE__ */ jsx44("span", { ref: cometsRef, className: "ad-neon-waves-comets", children: Array.from({ length: comets }, (_, i) => /* @__PURE__ */ jsx44("i", { className: "ad-neon-waves-comet" }, i)) }),
-    dots.map((d, i) => /* @__PURE__ */ jsx44(
+    comets > 0 && motion && /* @__PURE__ */ jsx39("span", { ref: cometsRef, className: "ad-neon-waves-comets", children: Array.from({ length: comets }, (_, i) => /* @__PURE__ */ jsx39("i", { className: "ad-neon-waves-comet" }, i)) }),
+    dots.map((d, i) => /* @__PURE__ */ jsx39(
       "i",
       {
         className: "ad-neon-waves-star",
@@ -4386,7 +4108,7 @@ function NeonWaves({
 }
 
 // src/components/artwork/QuantumField/QuantumField.tsx
-import { useEffect as useEffect8, useRef as useRef25, useState as useState9 } from "react";
+import { useEffect as useEffect8, useRef as useRef23, useState as useState8 } from "react";
 
 // src/components/artwork/QuantumField/renderer.ts
 var TAU = Math.PI * 2;
@@ -4729,7 +4451,7 @@ function createQuantumFieldRenderer(canvas, mode, count) {
 }
 
 // src/components/artwork/QuantumField/QuantumField.tsx
-import { jsx as jsx45, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs32 } from "react/jsx-runtime";
 var quantumFieldModes = ["orbit", "vortex", "lattice", "wave", "bloom", "helix", "terrain"];
 var PIXEL_BUDGET = { low: 32e4, high: 96e4 };
 var POINT_BUDGET = { low: 1400, high: 2800 };
@@ -4820,18 +4542,18 @@ function QuantumField({
 }) {
   const theme = useThemePalette();
   const motion = useMotion();
-  const canvas = useRef25(null);
-  const root = useRef25(null);
-  const paint = useRef25(() => void 0);
-  const pointer = useRef25({ x: 0, y: 0, active: false });
-  const camera = useRef25({ zoom: 3.5, yaw: 0, pitch: 0.16 });
-  const drag = useRef25(null);
-  const visible = useRef25(false);
-  const [onscreen, setOnscreen] = useState9(typeof IntersectionObserver === "undefined");
-  const frame = useRef25({ last: 0, time: 0 });
-  const connectedAudio = useRef25(null);
-  const live = useRef25({ speed, audio, palette, theme });
-  const updatePalette = useRef25(() => void 0);
+  const canvas = useRef23(null);
+  const root = useRef23(null);
+  const paint = useRef23(() => void 0);
+  const pointer = useRef23({ x: 0, y: 0, active: false });
+  const camera = useRef23({ zoom: 3.5, yaw: 0, pitch: 0.16 });
+  const drag = useRef23(null);
+  const visible = useRef23(false);
+  const [onscreen, setOnscreen] = useState8(typeof IntersectionObserver === "undefined");
+  const frame = useRef23({ last: 0, time: 0 });
+  const connectedAudio = useRef23(null);
+  const live = useRef23({ speed, audio, palette, theme });
+  const updatePalette = useRef23(() => void 0);
   const followsTheme = !palette?.[0] || !palette?.[1];
   live.current = { speed, audio, palette, theme };
   useEffect8(() => {
@@ -5029,7 +4751,7 @@ function QuantumField({
     doc.addEventListener("wheel", wheel, { passive: false, capture: true });
     return () => doc.removeEventListener("wheel", wheel, true);
   }, [interactive, motion, paused]);
-  return /* @__PURE__ */ jsxs36(
+  return /* @__PURE__ */ jsxs32(
     "div",
     {
       ...mark("QuantumField", p),
@@ -5065,7 +4787,7 @@ function QuantumField({
         }
       } : void 0,
       children: [
-        /* @__PURE__ */ jsx45("canvas", { ref: canvas, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx40("canvas", { ref: canvas, "aria-hidden": "true" }),
         p.children
       ]
     }
@@ -5073,13 +4795,13 @@ function QuantumField({
 }
 
 // src/components/artwork/QuantumField/QuantumFieldExperience.tsx
-import { forwardRef as forwardRef3, useCallback, useEffect as useEffect9, useImperativeHandle, useLayoutEffect as useLayoutEffect5, useRef as useRef26, useState as useState10 } from "react";
+import { forwardRef, useCallback, useEffect as useEffect9, useImperativeHandle, useLayoutEffect as useLayoutEffect4, useRef as useRef24, useState as useState9 } from "react";
 
 // src/components/artwork/QuantumField/reference.html?raw
-var reference_default = "<!DOCTYPE html>\n<!-- Quantum Fields Contributors, MIT License. Full notice: UPSTREAM-LICENSE.txt in this package. -->\n<html lang=\"en\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <title>Quantum Field: Interactive</title>\n    <style>\n        /* The kit hides this page's own interface, so it loads no web fonts: the scene makes no requests beyond three.js. */\n\n        * {\n            box-sizing: border-box;\n        }\n\n        :root {\n            --ar: 167; --ag: 139; --ab: 250;\n        }\n\n        html, body {\n            margin: 0;\n            overflow: hidden;\n            background: transparent !important;\n            color-scheme: dark;\n            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n        }\n\n        canvas {\n            display: block;\n        }\n\n        #scanlines {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: radial-gradient(ellipse at center, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.5) 100%);\n            pointer-events: none;\n            z-index: 10;\n        }\n\n        #overlay {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n            background: linear-gradient(180deg, rgba(15, 10, 25, 0.97) 0%, rgba(10, 10, 20, 0.98) 100%);\n            z-index: 100;\n            backdrop-filter: blur(20px);\n            transition: opacity 1s ease;\n            pointer-events: none;\n            /* Allow clicks to pass through to canvas */\n        }\n\n        .hud-panel {\n            background: linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);\n            border: 1px solid rgba(255, 255, 255, 0.07);\n            padding: 55px 75px;\n            text-align: center;\n            border-radius: 28px;\n            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);\n            pointer-events: auto;\n            /* Re-enable clicks for buttons */\n        }\n\n        h1 {\n            font-family: 'Space Grotesk', sans-serif;\n            font-weight: 500;\n            letter-spacing: 1px;\n            font-size: 34px;\n            margin: 0 0 8px 0;\n            background: linear-gradient(135deg, #ffffff 0%, rgba(var(--ar),var(--ag),var(--ab),0.75) 40%, rgb(var(--ar),var(--ag),var(--ab)) 100%);\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n            background-clip: text;\n        }\n\n        .hud-panel p {\n            color: rgba(255, 255, 255, 0.35);\n            font-size: 13px;\n            margin-bottom: 40px;\n            letter-spacing: 0.5px;\n            font-weight: 300;\n        }\n\n        .btn-group {\n            display: flex;\n            gap: 14px;\n            justify-content: center;\n        }\n\n        button,\n        .file-upload {\n            background: linear-gradient(135deg, rgba(var(--ar),var(--ag),var(--ab),0.12) 0%, rgba(var(--ar),var(--ag),var(--ab),0.06) 100%);\n            border: 1px solid rgba(var(--ar),var(--ag),var(--ab),0.25);\n            color: rgba(255, 255, 255, 0.85);\n            padding: 15px 30px;\n            font-size: 13px;\n            font-weight: 500;\n            cursor: pointer;\n            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n            letter-spacing: 0.3px;\n            border-radius: 14px;\n            font-family: 'Inter', sans-serif;\n        }\n\n        button:hover,\n        .file-upload:hover {\n            background: linear-gradient(135deg, rgba(var(--ar),var(--ag),var(--ab),0.25) 0%, rgba(var(--ar),var(--ag),var(--ab),0.18) 100%);\n            border-color: rgba(var(--ar),var(--ag),var(--ab),0.45);\n            transform: translateY(-2px);\n            box-shadow: 0 12px 35px rgba(139, 92, 246, 0.2);\n        }\n\n        input[type=\"file\"] {\n            display: none;\n        }\n\n        #status-bar {\n            position: absolute;\n            bottom: 80px;\n            left: 28px;\n            color: rgba(255, 255, 255, 0.3);\n            font-size: 10px;\n            letter-spacing: 0.5px;\n            z-index: 200;\n            pointer-events: none;\n        }\n\n        #status-bar span {\n            color: rgba(196, 181, 253, 0.7);\n            font-weight: 500;\n        }\n\n        #interaction-hint {\n            position: absolute;\n            top: 28px;\n            width: 100%;\n            text-align: center;\n            color: rgba(255, 255, 255, 0.5);\n            font-size: 11px;\n            letter-spacing: 2px;\n            pointer-events: none;\n            z-index: 9;\n            text-transform: lowercase;\n        }\n\n        #zoom-indicator {\n            position: absolute;\n            bottom: 80px;\n            right: 28px;\n            color: rgba(255, 255, 255, 0.3);\n            font-size: 10px;\n            z-index: 20;\n            pointer-events: none;\n        }\n\n        #zoom-indicator span {\n            color: rgba(196, 181, 253, 0.7);\n        }\n\n        #audio-controls {\n            position: fixed;\n            bottom: 24px;\n            left: 50%;\n            transform: translateX(-50%);\n            display: flex;\n            gap: 10px;\n            align-items: center;\n            padding: 12px 20px;\n            background: linear-gradient(180deg, rgba(35, 28, 50, 0.88) 0%, rgba(22, 20, 38, 0.92) 100%);\n            border: 1px solid rgba(255, 255, 255, 0.05);\n            border-radius: 18px;\n            z-index: 200;\n            opacity: 0;\n            pointer-events: none;\n            transition: all 0.4s ease;\n            backdrop-filter: blur(25px);\n        }\n\n        #audio-controls.visible {\n            opacity: 1;\n            pointer-events: auto;\n        }\n\n        #audio-controls button,\n        #audio-controls .file-upload {\n            padding: 9px 14px;\n            font-size: 11px;\n            background: rgba(255, 255, 255, 0.03);\n            border: 1px solid rgba(255, 255, 255, 0.07);\n            color: rgba(255, 255, 255, 0.65);\n            border-radius: 10px;\n        }\n\n        #play-pause-btn {\n            min-width: 78px;\n            background: linear-gradient(135deg, rgba(var(--ar),var(--ag),var(--ab),0.18) 0%, rgba(var(--ar),var(--ag),var(--ab),0.10) 100%) !important;\n            border-color: rgba(var(--ar),var(--ag),var(--ab),0.28) !important;\n            color: #e9d5ff !important;\n        }\n\n        #play-pause-btn.playing {\n            background: linear-gradient(135deg, rgba(251, 113, 133, 0.18) 0%, rgba(244, 114, 182, 0.12) 100%) !important;\n            border-color: rgba(251, 113, 133, 0.35) !important;\n        }\n\n        #progress-container {\n            width: 85px;\n            height: 4px;\n            background: rgba(255, 255, 255, 0.06);\n            border-radius: 4px;\n            cursor: pointer;\n        }\n\n        #progress-bar {\n            height: 100%;\n            background: linear-gradient(90deg, rgb(var(--ar),var(--ag),var(--ab)), rgba(var(--ar),var(--ag),var(--ab),0.6), rgba(var(--ar),var(--ag),var(--ab),0.3));\n            border-radius: 4px;\n            width: 0%;\n        }\n\n        #time-display {\n            color: rgba(255, 255, 255, 0.35);\n            font-size: 10px;\n            min-width: 62px;\n            text-align: center;\n        }\n\n        #track-name {\n            color: rgba(255, 255, 255, 0.3);\n            font-size: 10px;\n            max-width: 85px;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n        }\n\n        /* --- Center Panel Refinement --- */\n        .hud-panel {\n            background: rgba(15, 10, 25, 0.85);\n            border: 1px solid rgba(255, 255, 255, 0.08);\n            /* Darkened container */\n            padding: 24px;\n            /* Reduced padding */\n            border-radius: 24px;\n            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);\n            backdrop-filter: blur(40px);\n            min-width: 420px;\n            /* Wider for buttons */\n        }\n\n        .hud-panel h1,\n        .hud-panel p {\n            display: none;\n            /* Hide title as per screenshot showing only buttons */\n        }\n\n        .btn-group {\n            display: flex;\n            gap: 16px;\n            justify-content: center;\n            width: 100%;\n        }\n\n        .btn-group button {\n            flex: 1;\n            background: transparent;\n            border: 1px solid rgba(var(--ar),var(--ag),var(--ab),0.3);\n            color: rgb(var(--ar),var(--ag),var(--ab));\n            padding: 14px 0;\n            border-radius: 12px;\n            font-size: 12px;\n            letter-spacing: 1px;\n            text-transform: uppercase;\n            font-weight: 600;\n            transition: all 0.3s ease;\n        }\n\n        .btn-group button:hover {\n            background: rgba(var(--ar),var(--ag),var(--ab),0.1);\n            border-color: rgb(var(--ar),var(--ag),var(--ab));\n            box-shadow: 0 0 20px rgba(var(--ar),var(--ag),var(--ab),0.2);\n        }\n        #interaction-hint, #audio-controls, #status-bar, #zoom-indicator { display: none !important; }\n    </style>\n</head>\n\n<body>\n    <div id=\"scanlines\" style=\"display:none\"></div>\n    <div id=\"interaction-hint\">space \xB7 play/pause &nbsp;\xB7&nbsp; scroll \xB7 zoom &nbsp;\xB7&nbsp; drag \xB7 rotate &nbsp;\xB7&nbsp; F \xB7 focus mode</div>\n    <div id=\"overlay\" style=\"display:none\">\n        <div class=\"hud-panel\">\n            <h1>Quantum Fields</h1>\n            <p>Audio-reactive particle simulation</p>\n            <div class=\"btn-group\">\n                <button id=\"enter-btn\">Enter</button>\n            </div>\n        </div>\n    </div>\n    <div id=\"audio-controls\">\n        <button id=\"play-pause-btn\" class=\"playing\">\u23F8 pause</button>\n        <div id=\"progress-container\">\n            <div id=\"progress-bar\"></div>\n        </div>\n        <span id=\"time-display\">0:00 / 0:00</span>\n        <span id=\"track-name\">no track</span>\n        <label class=\"file-upload\" title=\"Load audio\">\u{1F4C1}<input type=\"file\" id=\"file-input-2\" accept=\"audio/*\"></label>\n        <button id=\"mic-btn-2\" title=\"Microphone\">\u{1F399}</button>\n        <button id=\"screenshot-btn\" title=\"Screenshot\">\u{1F4F7}</button>\n        <button id=\"fullscreen-btn\" title=\"Fullscreen\">\u26F6</button>\n    </div>\n    <div id=\"status-bar\"><span>ready</span> \xB7 awaiting input</div>\n    <div id=\"zoom-indicator\">zoom <span id=\"zoom-level\">100%</span></div>\n\n    <!-- Global Error Handler (Must be before module imports) -->\n    <script>\n        window.onerror = function (msg, url, lineNo, columnNo, error) {\n            const status = document.getElementById('status-bar');\n            if (status) {\n                status.innerHTML = `ERROR: <span style=\"color:#ff6b6b\">${msg}</span>`;\n                status.style.opacity = 1;\n            }\n            console.error('Global Error:', msg, url, lineNo, error);\n            return false;\n        };\n        // Catch unhandled promise rejections\n        window.onunhandledrejection = function (event) {\n            const status = document.getElementById('status-bar');\n            if (status) {\n                status.innerHTML = `ERROR: <span style=\"color:#ff6b6b\">${event.reason}</span>`;\n                status.style.opacity = 1;\n            }\n            console.error('Unhandled Rejection:', event.reason);\n        };\n    <\/script>\n\n    <script type=\"importmap\">\n{\n    \"imports\": {\n        \"three\": \"https://unpkg.com/three@0.182.0/build/three.module.js\",\n        \"three/addons/\": \"https://unpkg.com/three@0.182.0/examples/jsm/\"\n    }\n}\n<\/script>\n\n    <script type=\"module\">\n        import * as THREE from 'three';\n        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';\n        import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';\n        import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';\n        import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';\n        import { AfterimagePass } from 'three/addons/postprocessing/AfterimagePass.js';\n        import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';\n        // BokehPass removed - using custom DOF shader\n        import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';\n\n        function fitPixelRatio() {\n            return Math.min(window.devicePixelRatio || 1, 1.5,\n                Math.sqrt(2_100_000 / Math.max(1, window.innerWidth * window.innerHeight)));\n        }\n\n        const CONFIG = {\n            maxParticles: 250000,\n            maxDensity: 0.14,\n            secondaryParticles: 50000,\n            initialDensity: 0.043,\n            fieldRadius: 90,\n            minZoom: 1,\n            maxZoom: 250,\n            defaultZoom: 200\n        };\n        let particleBudget = Number(window.frameElement?.getAttribute('data-particle-budget') ?? Infinity);\n        particleBudget = Number.isFinite(particleBudget) ? Math.max(0, Math.floor(particleBudget)) : Infinity;\n        // Requested number of particles across both layers; null follows the density setting.\n        let particleCount = window.frameElement?.getAttribute('data-particle-count');\n        particleCount = particleCount != null && Number.isFinite(Number(particleCount)) ? Math.max(0, Math.floor(Number(particleCount))) : null;\n\n        const STATE = {\n            field: 'Gluon (Strong)',\n            density: CONFIG.initialDensity,\n            fieldSize: 0.78,\n            sensitivity: 1.1,\n            trails: 0.66144,\n            bloom: 0.3,\n            timeScale: 1,\n            pixelRatio: fitPixelRatio(),\n            chromaticAberration: 0.004,\n            filmGrain: 0.001,\n            cameraShake: 0.65,\n            vortexStrength: 0.73,\n            pulseIntensity: 0.15,\n            anamorphicStretch: 0.1,\n            bassGateThreshold: 0.12,\n            bassGateAttack: 0.3,\n            bassGateRelease: 0.136,\n            bassGateRatio: 2.142,\n            bassGateEnabled: false,\n            // NEW EFFECTS\n            godRaysEnabled: false,\n            godRaysIntensity: 0.078,\n            godRaysDecay: 0.92,\n            dofEnabled: false,\n            dofFocus: 0.04,\n            dofFocalLength: 0.40,\n            dofBokehStrength: 0.36,\n            lensFlareEnabled: true,\n            lensFlareIntensity: 0.1,\n            particleTrailsEnabled: true,\n            particleTrailOpacity: 1,\n            nebulaEnabled: false,\n            nebulaIntensity: 0.3,\n            connectionsEnabled: true,\n            connectionThreshold: 20.0,\n            connectionOpacity: 0.75,\n            // === ENHANCEMENT PACK v2.0 ===\n            // 1. Motion Blur\n            motionBlurEnabled: true,\n            motionBlurStrength: 0.1,\n            // 2. Adaptive Quality\n            adaptiveQualityEnabled: true,\n            targetFPS: 45,\n            qualityLevel: 1,\n            // 3. Onset Detection\n            onsetSensitivity: 1,\n            onsetDecay: 0.92,\n            // 4. Audio-Reactive Camera\n            audioCameraEnabled: true,\n            audioCameraSmoothing: 0.2,\n            audioCameraIntensity: 0.3,\n            // 5. Waveform Terrain\n            waveformTerrainScale: 1.0,\n            waveformTerrainHeight: 20.0\n        };\n\n        // --- AUDIO SYSTEM ---\n        // Spectrum supplied by the host app (e.g. a native audio engine the iframe cannot hear):\n        // band levels 0..1, log-spaced from `low` to `high` Hz. It is turned into the same frequency\n        // array an analyser would give, so bands, beats, flux, onsets and the terrain all follow it.\n        const EXTERNAL = {\n            target: null, low: 40, high: 12000,\n            sampleRate: 48000, data: new Uint8Array(2048), smoothed: new Float32Array(2048), prev: new Float32Array(2048),\n            fresh() { return this.target !== null; },\n            set(bands, range) {\n                this.target = Array.isArray(bands) && bands.length ? bands.map((v) => Math.max(0, Math.min(1, Number(v) || 0))) : null;\n                if (Array.isArray(range) && range[0] > 0 && range[1] > range[0]) [this.low, this.high] = range;\n            },\n            // Host frames arrive at their own pace (often 20 Hz); easing toward them every rendered\n            // frame keeps the flux continuous, like an analyser's smoothing does.\n            fill() {\n                const bands = this.target, n = bands.length, len = this.data.length, nyquist = this.sampleRate / 2;\n                const span = Math.log(this.high / this.low);\n                for (let i = 0; i < len; i++) {\n                    const freq = Math.max(1, (i + 0.5) / len * nyquist);\n                    const pos = Math.log(freq / this.low) / span * (n - 1);\n                    let level;\n                    if (pos <= 0) level = bands[0];\n                    else if (pos >= n - 1) level = bands[n - 1] * Math.max(0, 1 - Math.log(freq / this.high) / Math.log(nyquist / this.high));\n                    else { const k = Math.floor(pos), t = pos - k; level = bands[k] * (1 - t) + bands[k + 1] * t; }\n                    this.smoothed[i] += (level - this.smoothed[i]) * 0.35;\n                    this.data[i] = Math.min(255, Math.round(this.smoothed[i] * 255));\n                }\n            }\n        };\n\n        const AUDIO = {\n            ctx: null, analyser: null, source: null, gainNode: null, data: null,\n            audioBuffer: null, isPlaying: false, isPaused: false,\n            startTime: 0, pauseTime: 0, currentTrackName: 'No Track',\n            mode: null, micStream: null,\n            bands: { subBass: 0, bass: 0, lowMid: 0, mid: 0, highMid: 0, high: 0, ultraHigh: 0 },\n            gatedBands: { subBass: 0, bass: 0, lowMid: 0, mid: 0, highMid: 0, high: 0, ultraHigh: 0 },\n            beatThreshold: 0.15, beatDecay: 0.93, beatEnergy: 0,\n            lastBeatTime: 0, beatDetected: false, peakHistory: [],\n            spectralCentroid: 0, spectralFlux: 0, prevSpectrum: null, active: false, idleCleared: false,\n            // === ENHANCEMENT: Onset Detection ===\n            onsetEnergy: 0, onsetDetected: false, onsetHistory: [], onsetThreshold: 0,\n            // === ENHANCEMENT: Waveform Data ===\n            waveformData: new Float32Array(128), waveformSmoothed: new Float32Array(128),\n            gateState: {\n                isOpen: false, envelope: 0, holdTime: 0, noiseFloor: 0.05,\n                calibrationSamples: [], isCalibrating: true, calibrationFrames: 30\n            },\n\n            init() {\n                if (this.ctx) return;\n                this.ctx = new (window.AudioContext || window.webkitAudioContext)();\n                this.analyser = this.ctx.createAnalyser();\n                this.analyser.fftSize = 4096;\n                this.analyser.smoothingTimeConstant = 0.65;\n                this.data = new Uint8Array(this.analyser.frequencyBinCount);\n                this.prevSpectrum = new Float32Array(this.analyser.frequencyBinCount);\n                this.active = true;\n            },\n\n            loadTrack(arrayBuffer, fileName) {\n                return new Promise((resolve, reject) => {\n                    this.ctx.decodeAudioData(arrayBuffer, (buffer) => {\n                        this.stopCurrentSource();\n                        this.audioBuffer = buffer;\n                        this.currentTrackName = fileName || 'Unknown';\n                        this.mode = 'file';\n                        this.pauseTime = 0;\n                        this.resetCalibration();\n                        resolve(buffer);\n                    }, reject);\n                });\n            },\n\n            play() {\n                if (!this.audioBuffer || this.mode !== 'file' || this.isPlaying) return;\n                this.source = this.ctx.createBufferSource();\n                this.source.buffer = this.audioBuffer;\n                this.source.loop = true;\n                this.source.connect(this.analyser);\n                this.analyser.connect(this.ctx.destination);\n                this.source.start(0, this.pauseTime);\n                this.startTime = this.ctx.currentTime - this.pauseTime;\n                this.isPlaying = true;\n                this.isPaused = false;\n            },\n\n            pause() {\n                if (!this.isPlaying || this.mode !== 'file') return;\n                this.pauseTime = this.getCurrentTime();\n                this.isPaused = true;\n                this.isPlaying = false;\n                if (this.source) { try { this.source.stop(); } catch (e) { } this.source.disconnect(); this.source = null; }\n            },\n\n            togglePlayPause() {\n                if (this.mode === 'mic') return false;\n                if (this.isPlaying) { this.pause(); return false; }\n                else { this.play(); return true; }\n            },\n\n            getCurrentTime() {\n                if (!this.isPlaying) return this.pauseTime;\n                if (!this.audioBuffer) return 0;\n                return (this.ctx.currentTime - this.startTime) % this.audioBuffer.duration;\n            },\n\n            getDuration() { return this.audioBuffer ? this.audioBuffer.duration : 0; },\n\n            seek(time) {\n                if (this.mode !== 'file' || !this.audioBuffer) return;\n                const wasPlaying = this.isPlaying;\n                if (wasPlaying) this.pause();\n                this.pauseTime = Math.max(0, Math.min(time, this.audioBuffer.duration));\n                if (wasPlaying) this.play();\n            },\n\n            stopCurrentSource() {\n                if (this.source) { try { this.source.stop(); this.source.disconnect(); } catch (e) { } this.source = null; }\n                if (this.gainNode) { try { this.gainNode.disconnect(); } catch (e) { } this.gainNode = null; }\n                if (this.micStream) { this.micStream.getTracks().forEach(t => t.stop()); this.micStream = null; }\n                this.isPlaying = false; this.isPaused = false; this.pauseTime = 0;\n            },\n\n            async startMic(preferredLabel = null) {\n                console.log('startMic called with preferredLabel:', preferredLabel);\n                const status = document.getElementById('status-bar');\n                if (status) status.innerHTML = 'SYSTEM: <span>REQUESTING ACCESS...</span>';\n\n                try {\n                    // Ensure context is running\n                    if (this.ctx.state === 'suspended') {\n                        console.log('Resuming AudioContext...');\n                        await this.ctx.resume();\n                    }\n\n                    // 1. Get initial stream (activates permissions so labels are visible)\n                    console.log('Requesting initial getUserMedia...');\n                    let stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n                    console.log('Initial stream obtained:', stream.id);\n\n                    // 2. Search for preferred device (loopback)\n                    let target = null;\n                    if (preferredLabel) {\n                        const devices = await navigator.mediaDevices.enumerateDevices();\n                        console.log(\"Audio Devices Found:\", devices.length, devices.map(d => `${d.label} (${d.kind})`));\n\n                        target = devices.find(d => d.kind === 'audioinput' &&\n                            d.label.toLowerCase().includes(preferredLabel.toLowerCase()));\n                    }\n\n                    if (target) {\n                        console.log(`Switching audio input to: ${target.label} [${target.deviceId}]`);\n                        stream.getTracks().forEach(t => t.stop()); // Stop generic stream\n\n                        // Request specific device - being explicit with constraints\n                        stream = await navigator.mediaDevices.getUserMedia({\n                            audio: {\n                                deviceId: { exact: target.deviceId },\n                                echoCancellation: false,\n                                noiseSuppression: false,\n                                autoGainControl: false,\n                                channelCount: 2\n                            }\n                        });\n                        this.currentTrackName = target.label;\n                    } else {\n                        if (preferredLabel) console.warn(`Preferred device '${preferredLabel}' not found. Using default.`);\n                        // Keep the initial stream\n                        this.currentTrackName = stream.getAudioTracks()[0]?.label || 'Live Microphone';\n                    }\n\n                    this.stopCurrentSource();\n                    this.micStream = stream;\n                    this.source = this.ctx.createMediaStreamSource(stream);\n                    this.gainNode = this.ctx.createGain();\n                    this.gainNode.gain.value = 3.0; // Boost loopback/mic signal before FFT \u2014 tune via sensitivity slider\n                    this.source.connect(this.gainNode);\n                    this.gainNode.connect(this.analyser);\n                    this.mode = 'mic';\n                    this.isPlaying = true;\n                    this.resetCalibration();\n\n                    if (status) status.innerHTML = 'SYSTEM: <span>LISTENING (' + (preferredLabel ? 'Loopback' : 'Mic') + ')</span>';\n                    updateUI();\n\n                    return stream;\n                } catch (e) {\n                    console.error(\"AUDIO.startMic failed:\", e);\n                    throw e;\n                }\n            },\n\n            resetCalibration() { this.gateState.isCalibrating = true; this.gateState.calibrationSamples = []; },\n\n            applyBassGate(rawValue) {\n                if (!STATE.bassGateEnabled) return rawValue;\n                const { bassGateThreshold: threshold, bassGateAttack: attack, bassGateRelease: release, bassGateRatio: ratio } = STATE;\n                if (this.gateState.isCalibrating) {\n                    this.gateState.calibrationSamples.push(rawValue);\n                    if (this.gateState.calibrationSamples.length >= this.gateState.calibrationFrames) {\n                        const sorted = [...this.gateState.calibrationSamples].sort((a, b) => a - b);\n                        this.gateState.noiseFloor = sorted.slice(0, Math.floor(sorted.length * 0.2)).reduce((a, b) => a + b, 0) / Math.floor(sorted.length * 0.2);\n                        this.gateState.isCalibrating = false;\n                    }\n                }\n                const effectiveThreshold = Math.max(threshold, this.gateState.noiseFloor * 1.5);\n                if (rawValue > effectiveThreshold) { this.gateState.isOpen = true; this.gateState.holdTime = 10; }\n                else if (rawValue < effectiveThreshold * 0.7 && this.gateState.holdTime <= 0) { this.gateState.isOpen = false; }\n                if (this.gateState.holdTime > 0) this.gateState.holdTime--;\n                this.gateState.envelope += ((this.gateState.isOpen ? 1.0 : 0.0) - this.gateState.envelope) * (this.gateState.isOpen ? attack : release);\n                let output = rawValue;\n                if (this.gateState.isOpen && rawValue > effectiveThreshold) {\n                    output = effectiveThreshold + (rawValue - effectiveThreshold) / ratio;\n                }\n                return output * this.gateState.envelope;\n            },\n\n            update() {\n                const own = this.active && this.isPlaying && this.source;\n                this.externalActive = !own && EXTERNAL.fresh();\n                if (!own && !this.externalActive) {\n                    if (!this.idleCleared) {\n                        for (const band in this.bands) this.bands[band] = this.gatedBands[band] = 0;\n                        this.spectralCentroid = this.spectralFlux = 0;\n                        this.beatDetected = this.onsetDetected = false;\n                        this.idleCleared = true;\n                    }\n                    this.beatEnergy *= this.beatDecay;\n                    this.onsetEnergy *= STATE.onsetDecay;\n                    return;\n                }\n                this.idleCleared = false;\n                let data = this.data, prevSpectrum = this.prevSpectrum, nyquist;\n                if (this.externalActive) {\n                    EXTERNAL.fill();\n                    data = EXTERNAL.data; prevSpectrum = EXTERNAL.prev; nyquist = EXTERNAL.sampleRate / 2;\n                } else {\n                    this.analyser.getByteFrequencyData(this.data);\n                    nyquist = this.ctx.sampleRate / 2;\n                }\n                const len = data.length;\n                const getFreqIndex = (freq) => Math.round(freq / nyquist * len);\n                const ranges = { subBass: [50, 120], bass: [120, 200], lowMid: [200, 450], mid: [450, 2000], highMid: [2000, 3500], high: [3500, 12000], ultraHigh: [12000, 20000] };\n                let totalEnergy = 0, weightedFreqSum = 0;\n                for (const [band, [low, high]] of Object.entries(ranges)) {\n                    const lowIdx = getFreqIndex(low), highIdx = getFreqIndex(high);\n                    let sum = 0;\n                    for (let i = lowIdx; i < highIdx && i < len; i++) {\n                        const v = data[i] / 255.0;\n                        sum += v; totalEnergy += v; weightedFreqSum += v * i;\n                    }\n                    const rawBand = sum / (highIdx - lowIdx);\n                    this.bands[band] = rawBand;\n                    this.gatedBands[band] = (band === 'subBass' || band === 'bass' || band === 'lowMid') ? this.applyBassGate(rawBand) : rawBand;\n                }\n                this.spectralCentroid = totalEnergy > 0 ? weightedFreqSum / totalEnergy / len : 0;\n                let flux = 0;\n                for (let i = 0; i < len; i++) {\n                    const current = data[i] / 255.0, diff = current - prevSpectrum[i];\n                    flux += diff > 0 ? diff * diff : 0;\n                    prevSpectrum[i] = current;\n                }\n                this.spectralFlux = Math.sqrt(flux / len);\n                const currentEnergy = this.gatedBands.bass * 0.6 + this.gatedBands.subBass * 0.4;\n                this.peakHistory.push(currentEnergy);\n                if (this.peakHistory.length > 50) this.peakHistory.shift();\n                const avgEnergy = this.peakHistory.reduce((a, b) => a + b, 0) / this.peakHistory.length;\n                const variance = this.peakHistory.reduce((a, b) => a + Math.pow(b - avgEnergy, 2), 0) / this.peakHistory.length;\n                const dynamicThreshold = avgEnergy + Math.sqrt(variance) * 1.8;\n                const now = performance.now();\n                if (currentEnergy > dynamicThreshold && currentEnergy > this.beatThreshold && now - this.lastBeatTime > 120) {\n                    this.beatDetected = true; this.beatEnergy = 1.0; this.lastBeatTime = now;\n                } else { this.beatDetected = false; }\n                this.beatEnergy *= this.beatDecay;\n\n                // === ENHANCEMENT: Improved Onset Detection ===\n                // Uses spectral flux derivative for sharper transient response\n                const onsetSens = STATE.onsetSensitivity;\n                this.onsetHistory.push(this.spectralFlux);\n                if (this.onsetHistory.length > 8) this.onsetHistory.shift();\n                const recentAvg = this.onsetHistory.slice(-4).reduce((a, b) => a + b, 0) / 4;\n                const olderAvg = this.onsetHistory.slice(0, 4).reduce((a, b) => a + b, 0) / Math.max(1, this.onsetHistory.slice(0, 4).length);\n                const onsetDelta = (recentAvg - olderAvg) * onsetSens;\n                this.onsetDetected = onsetDelta > 0.015 && now - this.lastBeatTime > 50;\n                this.onsetEnergy = this.onsetDetected ? 1.0 : this.onsetEnergy * STATE.onsetDecay;\n\n                // === ENHANCEMENT: Waveform Data for Terrain Field ===\n                const waveformBins = 128;\n                const binSize = Math.floor(len / waveformBins);\n                for (let i = 0; i < waveformBins; i++) {\n                    let sum = 0;\n                    for (let j = 0; j < binSize; j++) {\n                        sum += data[i * binSize + j] / 255.0;\n                    }\n                    const target = sum / binSize;\n                    this.waveformSmoothed[i] += (target - this.waveformSmoothed[i]) * 0.3;\n                    this.waveformData[i] = this.waveformSmoothed[i];\n                }\n            }\n        };\n\n        // --- SCENE SETUP ---\n        const scene = new THREE.Scene();\n        scene.fog = new THREE.FogExp2(0x000508, 0.005);\n        const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1, 800);\n        camera.position.set(0, 12, CONFIG.defaultZoom);\n        const cameraShakeOffset = new THREE.Vector3();\n        const baseCameraPos = camera.position.clone();\n        const zoomIndicator = document.getElementById('zoom-level');\n\n        const renderer = new THREE.WebGLRenderer({ powerPreference: \"high-performance\", antialias: true, alpha: true });\n        renderer.setClearColor(0x000000, 0);\n        renderer.setSize(window.innerWidth, window.innerHeight);\n        renderer.setPixelRatio(STATE.pixelRatio);\n        renderer.toneMapping = THREE.ACESFilmicToneMapping;\n        renderer.toneMappingExposure = 2.1;\n        document.body.appendChild(renderer.domElement);\n\n        const controls = new OrbitControls(camera, renderer.domElement);\n        controls.enableDamping = true;\n        controls.dampingFactor = 0.06;\n        controls.autoRotate = false;\n        controls.autoRotateSpeed = 0.3;\n        controls.minDistance = CONFIG.minZoom;\n        controls.maxDistance = CONFIG.maxZoom;\n        controls.maxPolarAngle = Math.PI * 0.85;\n        controls.minPolarAngle = Math.PI * 0.15;\n\n        controls.addEventListener('change', () => {\n            const dist = camera.position.length();\n            const zoomPercent = Math.round((1 - (dist - CONFIG.minZoom) / (CONFIG.maxZoom - CONFIG.minZoom)) * 100);\n            zoomIndicator.textContent = Math.max(0, Math.min(100, zoomPercent)) + '%';\n            baseCameraPos.copy(camera.position);\n        });\n\n        const raycaster = new THREE.Raycaster();\n        const mouse = new THREE.Vector2(9999, 9999);\n        const plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);\n        const mouseWorldPos = new THREE.Vector3();\n        let mouseVelocity = new THREE.Vector2();\n        let prevMouse = new THREE.Vector2();\n\n        window.addEventListener('mousemove', (e) => {\n            const newMouse = new THREE.Vector2((e.clientX / window.innerWidth) * 2 - 1, -(e.clientY / window.innerHeight) * 2 + 1);\n            mouseVelocity.subVectors(newMouse, prevMouse);\n            prevMouse.copy(newMouse);\n            mouse.copy(newMouse);\n            raycaster.setFromCamera(mouse, camera);\n            const target = new THREE.Vector3();\n            raycaster.ray.intersectPlane(plane, target);\n            if (target) mouseWorldPos.copy(target);\n        });\n\n        window.addEventListener('keydown', (e) => {\n            if (e.key === '+' || e.key === '=') { camera.position.multiplyScalar(0.9); controls.update(); }\n            else if (e.key === '-' || e.key === '_') { camera.position.multiplyScalar(1.1); controls.update(); }\n            else if (e.key === '0') { camera.position.normalize().multiplyScalar(CONFIG.defaultZoom); controls.update(); }\n            else if (e.key === ' ') { e.preventDefault(); togglePlayPause(); }\n            else if (e.key === 'f' || e.key === 'F') { STATE.dofEnabled = !STATE.dofEnabled; customDOFPass.enabled = STATE.dofEnabled; }\n        });\n\n        // Every field type shares one screen-fitted footprint; switching presets never reallocates particles.\n        // uFieldFill: share of the viewport the field spans; above 1.0 it runs past the edges.\n        const shapeFunction = `\nuniform float uFieldFill;\nvec3 shapedPosition(vec3 seed) {\n    vec2 plane = seed.xy * 2.0 - 1.0;\n    return vec3(plane.x * uViewportAspect * uViewportHalfHeight * uFieldFill,\n                plane.y * uViewportHalfHeight * uFieldFill,\n                (seed.z - 0.5) * 12.0);\n}`;\n\n        // --- PARTICLE VERTEX SHADER ---\n        const vertexShader = `\nuniform float uTime, uPixelRatio, uSizeBase, uNoiseScale, uCurlStrength;\nuniform float uViewportAspect, uViewportHalfHeight;\nuniform vec3 uColor1, uColor2, uColor3;\nuniform float uSubBass, uBass, uLowMid, uMid, uHighMid, uHigh, uUltraHigh;\nuniform float uBeatEnergy, uSpectralCentroid, uSpectralFlux;\nuniform float uOnsetEnergy, uTerrainMode, uTerrainHeight;\nuniform float uVortexStrength, uPulseIntensity, uZoomFactor;\nuniform vec3 uMousePos;\nuniform vec2 uMouseVelocity;\nattribute vec3 aRandom;\nattribute float aPhase, aLayer;\nvarying vec3 vColor;\nvarying float vAlpha, vEnergy, vDepth, vRimLight, vGlint;\n\nvec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }\nvec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }\n\nfloat snoise(vec3 v) {\n    const vec2 C = vec2(1.0/6.0, 1.0/3.0);\n    const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);\n    vec3 i = floor(v + dot(v, C.yyy));\n    vec3 x0 = v - i + dot(i, C.xxx);\n    vec3 g = step(x0.yzx, x0.xyz);\n    vec3 l = 1.0 - g;\n    vec3 i1 = min(g.xyz, l.zxy);\n    vec3 i2 = max(g.xyz, l.zxy);\n    vec3 x1 = x0 - i1 + C.xxx;\n    vec3 x2 = x0 - i2 + C.yyy;\n    vec3 x3 = x0 - D.yyy;\n    i = mod289(i);\n    vec4 p = permute(permute(permute(i.z + vec4(0.0, i1.z, i2.z, 1.0)) + i.y + vec4(0.0, i1.y, i2.y, 1.0)) + i.x + vec4(0.0, i1.x, i2.x, 1.0));\n    float n_ = 0.142857142857;\n    vec3 ns = n_ * D.wyz - D.xzx;\n    vec4 j = p - 49.0 * floor(p * ns.z * ns.z);\n    vec4 x_ = floor(j * ns.z);\n    vec4 y_ = floor(j - 7.0 * x_);\n    vec4 x = x_ * ns.x + ns.yyyy;\n    vec4 y = y_ * ns.x + ns.yyyy;\n    vec4 h = 1.0 - abs(x) - abs(y);\n    vec4 b0 = vec4(x.xy, y.xy);\n    vec4 b1 = vec4(x.zw, y.zw);\n    vec4 s0 = floor(b0) * 2.0 + 1.0;\n    vec4 s1 = floor(b1) * 2.0 + 1.0;\n    vec4 sh = -step(h, vec4(0.0));\n    vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;\n    vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;\n    vec3 p0 = vec3(a0.xy, h.x);\n    vec3 p1 = vec3(a0.zw, h.y);\n    vec3 p2 = vec3(a1.xy, h.z);\n    vec3 p3 = vec3(a1.zw, h.w);\n    vec4 norm = taylorInvSqrt(vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));\n    p0 *= norm.x; p1 *= norm.y; p2 *= norm.z; p3 *= norm.w;\n    vec4 m = max(0.6 - vec4(dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3)), 0.0);\n    m = m * m;\n    return 42.0 * dot(m * m, vec4(dot(p0, x0), dot(p1, x1), dot(p2, x2), dot(p3, x3)));\n}\n\nvec3 curl(float x, float y, float z) {\n    float eps = 0.08;\n    return vec3(\n        snoise(vec3(x, y+eps, z)) - snoise(vec3(x, y-eps, z)),\n        snoise(vec3(x, y, z+eps)) - snoise(vec3(x, y, z-eps)),\n        snoise(vec3(x+eps, y, z)) - snoise(vec3(x-eps, y, z))\n    );\n}\n\n${shapeFunction}\n\nvoid main() {\n    float t = uTime * (1.0 + uMid * 0.5);\n    vec3 noisePos = position * 0.035 + aRandom;\n    float layerMod = 1.0 + aLayer * 0.5;\n\n    vec3 flow1 = curl(noisePos.x * uNoiseScale + t*0.1, noisePos.y * uNoiseScale, noisePos.z * uNoiseScale);\n    vec3 flow2 = curl(noisePos.x * uNoiseScale * 2.2 + t*0.07, noisePos.y * uNoiseScale * 2.2 + t*0.08, noisePos.z * uNoiseScale * 2.2) * 0.4;\n    vec3 flow3 = curl(noisePos.x * uNoiseScale * 0.5 - t*0.05, noisePos.y * uNoiseScale * 0.5, noisePos.z * uNoiseScale * 0.5) * 0.6 * uLowMid;\n    vec3 flow = flow1 + flow2 * uHigh + flow3;\n\n    vec3 newPos = shapedPosition(aRandom) + (flow * uCurlStrength * layerMod * (1.0 + uSpectralFlux * 2.5));\n\n    float vortexAngle = uVortexStrength * uBass * 0.45 * (0.75 + aRandom.z * 0.5);\n    float cosA = cos(vortexAngle), sinA = sin(vortexAngle);\n    vec2 rotated = vec2(newPos.x * cosA - newPos.z * sinA, newPos.x * sinA + newPos.z * cosA);\n    newPos.xz = mix(newPos.xz, rotated, uBass * uVortexStrength);\n\n    float yVortex = sin(newPos.y * 0.1 + uTime) * uMid * uVortexStrength * 2.0;\n    newPos.x += cos(newPos.y * 0.15) * yVortex;\n    newPos.z += sin(newPos.y * 0.15) * yVortex;\n\n    float distToMouse = distance(newPos, uMousePos);\n    float repulsion = smoothstep(25.0, 0.0, distToMouse);\n    vec3 repelDir = normalize(newPos - uMousePos + vec3(0.001));\n    newPos += repelDir * repulsion * (12.0 + length(uMouseVelocity) * 360.0);\n\n    // Audio changes depth throughout the plane, without evacuating its centre.\n    float beatWave = sin(aRandom.x * 12.0 + aRandom.y * 7.0 - uTime * 6.0);\n    float bassDepth = (beatWave * uBeatEnergy * uPulseIntensity * 3.5\n        + sin(uTime * 1.8 + aPhase) * uSubBass * 4.0\n        + smoothstep(0.3, 0.8, uBass) * 6.0\n        + uOnsetEnergy * 8.0) * (0.6 + aRandom.z * 0.4);\n    newPos.z += bassDepth;\n    float fieldWave = sin(aRandom.x * 11.0 - uTime * 0.8 + sin(aRandom.y * 7.0 + uTime * 0.35));\n    newPos.z += fieldWave * (1.8 + uBass * 2.4 + uBeatEnergy * 1.6);\n\n    // Waveform relief moves toward the camera while retaining the shared rectangular footprint.\n    if (uTerrainMode > 0.5) {\n        float freqBin = aRandom.x;\n        float waveHeight = uBass * sin(freqBin * 6.28 * 8.0 + uTime * 3.0) * 0.5;\n        waveHeight += uMid * sin(freqBin * 6.28 * 16.0 + uTime * 5.0) * 0.3;\n        waveHeight += uHigh * sin(freqBin * 6.28 * 32.0 + uTime * 8.0) * 0.2;\n        waveHeight *= (1.0 + uSpectralFlux * 3.0);\n        newPos.z += waveHeight * uTerrainHeight;\n        newPos.z += sin(aRandom.y * 6.28 * 4.0 + uTime) * uSubBass * 5.0;\n    }\n\n    vec4 mvPosition = modelViewMatrix * vec4(newPos, 1.0);\n    gl_Position = projectionMatrix * mvPosition;\n\n    float size = uSizeBase * (0.85 + uBass * 0.5 + uBeatEnergy * 0.5) * (1.0 + (uZoomFactor - 1.0) * 0.3);\n    size *= 1.0 + sin(uTime * 10.0 + aPhase * 6.28) * uHigh * 0.35;\n    vGlint = smoothstep(0.985, 0.998, aRandom.z) * (0.7 + 0.3 * sin(uTime * 3.0 + aPhase * 6.28)) * (0.75 + uHigh * 0.15 + uOnsetEnergy * 0.1);\n    size *= 0.85 + vGlint * 2.1;\n    gl_PointSize = clamp(max(size * uPixelRatio * (90.0 / -mvPosition.z) * layerMod, vGlint * 4.5 * uPixelRatio), 0.5, 120.0);\n\n    float colorMix = smoothstep(0.0, 2.8, length(flow) + uHighMid * 3.0);\n    vec3 baseColor = mix(uColor1, uColor2, colorMix);\n    baseColor = mix(baseColor, uColor3, uSpectralCentroid * uHigh * 2.5);\n\n    float energyLevel = uBeatEnergy * 0.35 + repulsion * uMid * 2.0 + uSpectralFlux * 0.8;\n    vColor = mix(baseColor, vec3(1.0), energyLevel * 0.4);\n    vColor += vec3(0.08, 0.04, 0.12) * uUltraHigh * 2.5;\n\n    vRimLight = pow(1.0 - max(0.0, dot(normalize(-mvPosition.xyz), normalize(newPos))), 3.0);\n    vEnergy = energyLevel;\n    vDepth = clamp(-mvPosition.z / 120.0, 0.0, 1.0);\n\n    float alpha = 1.0 - smoothstep(0.92, 1.05, max(abs(newPos.x) / (uViewportAspect * uViewportHalfHeight * uFieldFill * 1.05), abs(newPos.y) / (uViewportHalfHeight * uFieldFill * 1.05)));\n    float sparkle = 1.0 + (aRandom.x > 0.8 ? sin(uTime * 20.0 + aRandom.y * 150.0) * uHigh * 2.5 : 0.0);\n    vAlpha = alpha * sparkle * (0.7 + uMid * 0.35) * layerMod;\n}`;\n\n        const fragmentShader = `\nvarying vec3 vColor;\nvarying float vAlpha, vEnergy, vDepth, vRimLight, vGlint;\n\nvoid main() {\n    vec2 xy = gl_PointCoord.xy - vec2(0.5);\n    float r = length(xy);\n    if(r > 0.5) discard;\n\n    float core = smoothstep(0.16 - vEnergy * 0.04, 0.12 - vEnergy * 0.04, r);\n    float glow = exp(-r * r * (20.0 - vEnergy * 10.0));\n    float halo = exp(-r * r * 5.0) * 0.35 + exp(-r * r * 2.5) * 0.15;\n    float glint = vGlint * (1.0 - smoothstep(0.012, 0.045, min(abs(xy.x), abs(xy.y)))) * (1.0 - smoothstep(0.16, 0.48, r));\n\n    vec3 finalColor = mix(vColor, vec3(1.0), core * 0.58 + glint * 0.38);\n    finalColor += vColor * vRimLight * 0.1;\n    finalColor = mix(finalColor, vec3(0.02, 0.03, 0.05), vDepth * 0.4);\n\n    float finalAlpha = clamp(vAlpha * (glow * 0.85 + halo * 0.55 + pow(1.0 - r * 2.0, 2.5) * 0.55 + glint * 0.9), 0.0, 1.0);\n    gl_FragColor = vec4(finalColor, finalAlpha);\n}`;\n\n        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 POST-PROCESSING SHADERS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\n        // GOD RAYS SHADER (Radial Light Scattering)\n        const GodRaysShader = {\n            uniforms: {\n                tDiffuse: { value: null },\n                uCenter: { value: new THREE.Vector2(0.5, 0.5) },\n                uIntensity: { value: 0.35 },\n                uDecay: { value: 0.94 },\n                uBeatEnergy: { value: 0.0 }\n            },\n            vertexShader: `varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`,\n            fragmentShader: `\n        uniform sampler2D tDiffuse;\n        uniform vec2 uCenter;\n        uniform float uIntensity, uDecay, uBeatEnergy;\n        varying vec2 vUv;\n\n        void main() {\n            vec4 color = texture2D(tDiffuse, vUv);\n            vec2 dir = vUv - uCenter;\n            float dist = length(dir);\n            dir = normalize(dir);\n\n            vec3 rays = vec3(0.0);\n            float decay = 1.0;\n\n            for(int i = 0; i < 32; i++) {\n                float t = float(i) / 32.0;\n                vec2 samplePos = vUv - dir * t * 0.15 * (1.0 + uBeatEnergy);\n                vec4 s = texture2D(tDiffuse, samplePos);\n                float lum = dot(s.rgb, vec3(0.3, 0.59, 0.11));\n                rays += s.rgb * decay * step(0.35, lum);\n                decay *= uDecay;\n            }\n            rays /= 16.0;\n            rays *= (1.0 - smoothstep(0.3, 0.9, dist));\n\n            gl_FragColor = vec4(color.rgb + rays * uIntensity * (1.0 + uBeatEnergy * 0.8), color.a);\n        }`\n        };\n\n        // LENS FLARE POST-PROCESS SHADER (Cinematic)\n        const LensFlareShader = {\n            uniforms: {\n                tDiffuse: { value: null },\n                uIntensity: { value: 1.0 },\n                uBeatEnergy: { value: 0.0 },\n                uTime: { value: 0.0 },\n                uTint: { value: new THREE.Color(0.6, 0.7, 1.0) }\n            },\n            vertexShader: `varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`,\n            fragmentShader: `\n        uniform sampler2D tDiffuse;\n        uniform float uIntensity, uBeatEnergy, uTime;\n        uniform vec3 uTint;\n        varying vec2 vUv;\n\n        float sdHex(vec2 p) {\n            p = abs(p);\n            return max(p.x * 0.866 + p.y * 0.5, p.y) - 1.0;\n        }\n\n        void main() {\n            vec4 color = texture2D(tDiffuse, vUv);\n            vec2 center = vec2(0.5);\n            vec2 toCenter = center - vUv;\n            float dist = length(toCenter);\n            vec2 dir = normalize(toCenter + 0.0001);\n\n            vec3 flare = vec3(0.0);\n\n            // Sample bright areas for flare source\n            float brightness = dot(color.rgb, vec3(0.299, 0.587, 0.114));\n            float threshold = smoothstep(0.6, 0.9, brightness);\n\n            // Anamorphic horizontal streak\n            float streak = 0.0;\n            for(float i = -8.0; i <= 8.0; i += 1.0) {\n                vec2 streakUV = vUv + vec2(i * 0.012, 0.0);\n                vec4 streakSample = texture2D(tDiffuse, streakUV);\n                float streakBright = dot(streakSample.rgb, vec3(0.299, 0.587, 0.114));\n                float falloff = 1.0 - abs(i) / 10.0;\n                streak += smoothstep(0.7, 1.0, streakBright) * falloff * falloff;\n            }\n            flare += uTint * streak * 0.08;\n\n            // Subtle ghosts (reflections through lens elements)\n            for(int i = 1; i <= 3; i++) {\n                float scale = 1.0 - float(i) * 0.25;\n                vec2 ghostUV = center + (center - vUv) * scale * 0.8;\n                if(ghostUV.x > 0.0 && ghostUV.x < 1.0 && ghostUV.y > 0.0 && ghostUV.y < 1.0) {\n                    vec4 ghostSample = texture2D(tDiffuse, ghostUV);\n                    float ghostBright = dot(ghostSample.rgb, vec3(0.299, 0.587, 0.114));\n                    float ghostAlpha = smoothstep(0.5, 0.8, ghostBright) * (0.25 / float(i));\n                    vec3 ghostTint = mix(vec3(1.0), uTint, 0.6) * (1.0 - float(i) * 0.2);\n                    flare += ghostSample.rgb * ghostTint * ghostAlpha;\n                }\n            }\n\n            // Soft circular halo around bright center\n            float halo = smoothstep(0.25, 0.15, abs(dist - 0.2)) * threshold * 0.25;\n            flare += uTint * 0.85 * halo;\n\n            // Subtle vignette-edge glow\n            float edgeGlow = smoothstep(0.5, 0.7, dist) * (1.0 - smoothstep(0.7, 0.85, dist));\n            flare += uTint * 0.55 * edgeGlow * brightness * 0.15;\n\n            gl_FragColor = vec4(color.rgb + flare * uIntensity * (1.0 + uBeatEnergy * 0.3), color.a);\n        }`\n        };\n\n        // ANAMORPHIC FLARE SHADER\n        const AnamorphicShader = {\n            uniforms: {\n                tDiffuse: { value: null },\n                uStretch: { value: 0.1 },\n                uThreshold: { value: 0.7 },\n                uIntensity: { value: 0.4 },\n                uTint: { value: new THREE.Color(0.6, 0.8, 1.0) }\n            },\n            vertexShader: `varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`,\n            fragmentShader: `\n        uniform sampler2D tDiffuse;\n        uniform float uStretch, uThreshold, uIntensity;\n        uniform vec3 uTint;\n        varying vec2 vUv;\n        void main() {\n            vec4 color = texture2D(tDiffuse, vUv);\n            vec3 streak = vec3(0.0);\n            for(float i = -15.0; i <= 15.0; i++) {\n                vec4 s = texture2D(tDiffuse, vUv + vec2(i * uStretch * 0.01, 0.0));\n                float bright = dot(s.rgb, vec3(0.299, 0.587, 0.114));\n                if(bright > uThreshold) {\n                    float w = 1.0 - abs(i) / 15.0;\n                    streak += s.rgb * w * w;\n                }\n            }\n            gl_FragColor = vec4(color.rgb + streak / 7.5 * uTint * uIntensity, color.a);\n        }`\n        };\n\n        // CHROMATIC ABERRATION SHADER\n        const ChromaticShader = {\n            uniforms: {\n                tDiffuse: { value: null },\n                uIntensity: { value: 0.004 },\n                uBeatEnergy: { value: 0.0 }\n            },\n            vertexShader: `varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`,\n            fragmentShader: `\n        uniform sampler2D tDiffuse;\n        uniform float uIntensity, uBeatEnergy;\n        varying vec2 vUv;\n        void main() {\n            vec2 dir = vUv - vec2(0.5);\n            float dist = length(dir);\n            vec2 offset = dir * dist * uIntensity * (1.0 + uBeatEnergy * 1.5);\n            gl_FragColor = vec4(\n                texture2D(tDiffuse, vUv + offset * 1.2).r,\n                texture2D(tDiffuse, vUv).g,\n                texture2D(tDiffuse, vUv - offset * 1.2).b,\n                texture2D(tDiffuse, vUv).a\n            );\n        }`\n        };\n\n        // FILM GRAIN SHADER\n        const GrainShader = {\n            uniforms: {\n                tDiffuse: { value: null },\n                uTime: { value: 0.0 },\n                uIntensity: { value: 0.0 }\n            },\n            vertexShader: `varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`,\n            fragmentShader: `\n        uniform sampler2D tDiffuse;\n        uniform float uTime, uIntensity;\n        varying vec2 vUv;\n        float rand(vec2 co) { return fract(sin(dot(co, vec2(12.9898,78.233))) * 43758.5453); }\n        void main() {\n            vec4 color = texture2D(tDiffuse, vUv);\n            float grain = (rand(vUv + fract(uTime)) * 2.0 - 1.0) * uIntensity;\n            gl_FragColor = vec4(color.rgb + grain * (1.0 - dot(color.rgb, vec3(0.299, 0.587, 0.114)) * 0.5), color.a);\n        }`\n        };\n\n        // CUSTOM DEPTH OF FIELD SHADER (Radial + Edge blur)\n        const CustomDOFShader = {\n            uniforms: {\n                tDiffuse: { value: null },\n                uFocus: { value: 0.05 },\n                uFocalLength: { value: 0.25 },\n                uBokehStrength: { value: 0.5 },\n                uResolution: { value: new THREE.Vector2() },\n                uBeatEnergy: { value: 0.0 }\n            },\n            vertexShader: `\n        varying vec2 vUv;\n        void main() {\n            vUv = uv;\n            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n        }\n    `,\n            fragmentShader: `\n        uniform sampler2D tDiffuse;\n        uniform float uFocus;\n        uniform float uFocalLength;\n        uniform float uBokehStrength;\n        uniform vec2 uResolution;\n        uniform float uBeatEnergy;\n        varying vec2 vUv;\n\n        void main() {\n            vec2 center = vec2(0.5);\n            float dist = length(vUv - center);\n\n            // Focus ring - sharp in a ring around center, blurry inside and outside\n            float focusRing = abs(dist - uFocus);\n            float blur = smoothstep(0.0, uFocalLength, focusRing) * uBokehStrength;\n\n            vec3 color = vec3(0.0);\n            float total = 0.0;\n            vec2 texel = 1.0 / uResolution;\n\n            if(blur < 0.01) {\n                color = texture2D(tDiffuse, vUv).rgb;\n                total = 1.0;\n            } else {\n                // Golden angle spiral sampling\n                const float GOLDEN_ANGLE = 2.39996323;\n                const int SAMPLES = 24;\n                float radius = blur * 20.0 * (1.0 + uBeatEnergy * 0.1);\n\n                for(int i = 0; i < SAMPLES; i++) {\n                    float angle = float(i) * GOLDEN_ANGLE;\n                    float r = sqrt(float(i) / float(SAMPLES)) * radius;\n                    vec2 offset = vec2(cos(angle), sin(angle)) * r * texel;\n                    vec3 s = texture2D(tDiffuse, vUv + offset).rgb;\n\n                    // Subtle highlight boost\n                    float lum = dot(s, vec3(0.299, 0.587, 0.114));\n                    s *= 1.0 + smoothstep(0.7, 1.0, lum) * blur * 0.3;\n\n                    color += s;\n                    total += 1.0;\n                }\n            }\n\n            gl_FragColor = vec4(color / total, texture2D(tDiffuse, vUv).a);\n        }\n    `\n        };\n\n        // VIGNETTE + GLOW SHADER\n        const VignetteShader = {\n            uniforms: {\n                tDiffuse: { value: null },\n                uBeatEnergy: { value: 0.0 }\n            },\n            vertexShader: `varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`,\n            fragmentShader: `\n        uniform sampler2D tDiffuse;\n        uniform float uBeatEnergy;\n        varying vec2 vUv;\n        void main() {\n            vec4 color = texture2D(tDiffuse, vUv);\n            vec2 uv = vUv * (1.0 - vUv.yx);\n            float vig = pow(uv.x * uv.y * 15.0, 0.38 * (1.0 - uBeatEnergy * 0.15));\n            float lum = dot(color.rgb, vec3(0.299, 0.587, 0.114));\n            float glow = smoothstep(0.5, 0.9, lum) * 0.1 * (1.0 + uBeatEnergy * 0.5);\n            gl_FragColor = vec4(color.rgb * vig * (1.0 + glow), color.a);\n        }`\n        };\n\n        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 GEOMETRY \u2550\u2550\u2550\u2550\u2550\u2550\u2550\n        const geometry = new THREE.BufferGeometry();\n        const mainCapacity = Math.ceil(CONFIG.maxParticles * CONFIG.maxDensity);\n        const pos = new Float32Array(mainCapacity * 3);\n        const rnd = new Float32Array(mainCapacity * 3);\n        const phase = new Float32Array(mainCapacity);\n        const layer = new Float32Array(mainCapacity);\n        const vec = new THREE.Vector3();\n\n        for (let i = 0; i < mainCapacity; i++) {\n            vec.setFromSphericalCoords(\n                CONFIG.fieldRadius * Math.pow(Math.random(), 0.33),\n                Math.acos(2 * Math.random() - 1),\n                Math.random() * Math.PI * 2\n            );\n            pos[i * 3] = vec.x;\n            pos[i * 3 + 1] = vec.y;\n            pos[i * 3 + 2] = vec.z;\n            rnd[i * 3] = Math.random();\n            rnd[i * 3 + 1] = Math.random();\n            rnd[i * 3 + 2] = Math.random();\n            phase[i] = Math.random() * Math.PI * 2;\n        }\n\n        // Secondary particles now use separate instanced system below\n\n        geometry.setAttribute('position', new THREE.BufferAttribute(pos, 3));\n        geometry.setAttribute('aRandom', new THREE.BufferAttribute(rnd, 3));\n        geometry.setAttribute('aPhase', new THREE.BufferAttribute(phase, 1));\n        geometry.setAttribute('aLayer', new THREE.BufferAttribute(layer, 1));\n        geometry.setDrawRange(0, Math.floor(CONFIG.maxParticles * STATE.density));\n\n        const FIELD_TYPES = {\n            'Photon (EM)': { c1: '#00f2ff', c2: '#0051ff', c3: '#ffffff', s: 1.0, curl: 1.0, sz: 3.0, sc1: '#66d9ff', sc2: '#99eeff' },\n            'Gluon (Strong)': { c1: '#ff0055', c2: '#7000ff', c3: '#ff8800', s: 2.5, curl: 2.4, sz: 3.4, sc1: '#cc66ff', sc2: '#ff6699' },\n            'Higgs (Mass)': { c1: '#ffae00', c2: '#ff4800', c3: '#ffff00', s: 0.6, curl: 0.3, sz: 4.0, sc1: '#ffcc66', sc2: '#ffdd99' },\n            'Gravity': { c1: '#ffffff', c2: '#4466ff', c3: '#8844ff', s: 0.75, curl: 0.18, sz: 2.8, sc1: '#aabbff', sc2: '#ccaaff' },\n            'Dark Energy': { c1: '#1a0033', c2: '#6600ff', c3: '#ff00ff', s: 1.9, curl: 1.6, sz: 3.1, sc1: '#9933ff', sc2: '#cc66ff' },\n            'Neutrino': { c1: '#00ff88', c2: '#00ffcc', c3: '#88ffff', s: 3.0, curl: 3.0, sz: 2.6, sc1: '#66ffbb', sc2: '#99ffdd' },\n            // === ENHANCEMENT: Waveform Terrain Field ===\n            'Waveform Terrain': { c1: '#ff3366', c2: '#33ff99', c3: '#6633ff', s: 0.4, curl: 0.15, sz: 2.4, sc1: '#ff6699', sc2: '#66ffcc', terrain: true }\n        };\n\n        // === ENHANCEMENT: Adaptive Quality System ===\n        const QUALITY_SYSTEM = {\n            frameCount: 0,\n            frameTimes: [],\n            lastAdjustTime: 0,\n            currentFPS: 60,\n\n            update(deltaTime) {\n                this.frameCount++;\n                this.frameTimes.push(deltaTime);\n                if (this.frameTimes.length > 30) this.frameTimes.shift();\n\n                if (this.frameCount % 30 === 0) {\n                    const avgDelta = this.frameTimes.reduce((a, b) => a + b, 0) / this.frameTimes.length;\n                    this.currentFPS = 1000 / avgDelta;\n\n                    if (STATE.adaptiveQualityEnabled && performance.now() - this.lastAdjustTime > 1000) {\n                        if (this.currentFPS < STATE.targetFPS - 10 && STATE.qualityLevel > 0.3) {\n                            STATE.qualityLevel = Math.max(0.3, STATE.qualityLevel - (this.currentFPS < STATE.targetFPS * 0.6 ? 0.2 : 0.1));\n                            this.applyQuality();\n                            this.lastAdjustTime = performance.now();\n                        } else if (this.currentFPS > STATE.targetFPS + 5 && STATE.qualityLevel < 1.0) {\n                            STATE.qualityLevel = Math.min(1.0, STATE.qualityLevel + 0.05);\n                            this.applyQuality();\n                            this.lastAdjustTime = performance.now();\n                        }\n                    }\n                }\n            },\n\n            applyQuality() {\n                const q = STATE.qualityLevel;\n                const pixelRatio = Math.min(STATE.pixelRatio, Math.max(0.35, STATE.pixelRatio * q));\n                const requestedMain = Math.floor(CONFIG.maxParticles * Math.min(STATE.density, CONFIG.maxDensity));\n                const densityTotal = requestedMain + CONFIG.secondaryParticles;\n                const requestedTotal = particleCount === null ? densityTotal : Math.min(particleCount, mainCapacity + CONFIG.secondaryParticles);\n                const visibleParticles = Math.floor(Math.min(requestedTotal, particleBudget) * q);\n                // Both layers keep the density's mix; whatever one layer cannot hold goes to the other.\n                let mainCount = Math.min(mainCapacity, Math.round(visibleParticles * requestedMain / densityTotal));\n                mainCount = Math.min(mainCapacity, Math.max(mainCount, visibleParticles - CONFIG.secondaryParticles));\n                geometry.setDrawRange(0, mainCount);\n                secondaryGeometry.instanceCount = visibleParticles - mainCount;\n                if (renderer.getPixelRatio() !== pixelRatio) {\n                    renderer.setPixelRatio(pixelRatio);\n                    composer.setPixelRatio(pixelRatio);\n                }\n                material.uniforms.uPixelRatio.value = pixelRatio;\n                secondaryMaterial.uniforms.uPixelRatio.value = pixelRatio;\n            }\n        };\n\n        // === ENHANCEMENT: Audio-Reactive Camera System ===\n        const AUDIO_CAMERA = {\n            targetOffset: new THREE.Vector3(),\n            currentOffset: new THREE.Vector3(),\n            targetFOV: 55,\n            baseFOV: 55,\n            breathPhase: 0,\n\n            update(deltaTime) {\n                if (!STATE.audioCameraEnabled || !(AUDIO.active || AUDIO.externalActive)) return;\n\n                const bass = AUDIO.gatedBands.bass;\n                const mid = AUDIO.gatedBands.mid;\n                const high = AUDIO.gatedBands.high;\n                const intensity = STATE.audioCameraIntensity;\n                const smooth = STATE.audioCameraSmoothing;\n\n                // Bass-driven zoom pulse\n                this.targetFOV = this.baseFOV - bass * 8 * intensity + AUDIO.beatEnergy * 5 * intensity;\n                camera.fov += (this.targetFOV - camera.fov) * smooth;\n                camera.updateProjectionMatrix();\n\n                // Subtle sway based on mid frequencies\n                this.breathPhase += deltaTime * 0.001 * (1 + mid * 2);\n                this.targetOffset.x = Math.sin(this.breathPhase * 0.7) * mid * 3 * intensity;\n                this.targetOffset.y = Math.cos(this.breathPhase * 0.5) * high * 2 * intensity;\n                this.targetOffset.z = Math.sin(this.breathPhase * 0.3) * bass * 4 * intensity;\n\n                // Smooth interpolation\n                this.currentOffset.lerp(this.targetOffset, smooth);\n\n                // Apply onset punch\n                if (AUDIO.onsetDetected) {\n                    this.currentOffset.z -= AUDIO.onsetEnergy * 2 * intensity;\n                }\n            }\n        };\n\n        const def = FIELD_TYPES[STATE.field];\n        const material = new THREE.ShaderMaterial({\n            vertexShader, fragmentShader,\n            uniforms: {\n                uTime: { value: 0 },\n                uPixelRatio: { value: STATE.pixelRatio },\n                uSizeBase: { value: def.sz },\n                uNoiseScale: { value: def.s },\n                uCurlStrength: { value: def.curl },\n                uViewportAspect: { value: window.innerWidth / window.innerHeight },\n                uViewportHalfHeight: { value: Math.tan(camera.fov * Math.PI / 360) * CONFIG.defaultZoom },\n                uFieldFill: { value: STATE.fieldSize },\n                uColor1: { value: new THREE.Color(def.c1) },\n                uColor2: { value: new THREE.Color(def.c2) },\n                uColor3: { value: new THREE.Color(def.c3) },\n                uSubBass: { value: 0 }, uBass: { value: 0 }, uLowMid: { value: 0 },\n                uMid: { value: 0 }, uHighMid: { value: 0 }, uHigh: { value: 0 }, uUltraHigh: { value: 0 },\n                uBeatEnergy: { value: 0 }, uSpectralCentroid: { value: 0 }, uSpectralFlux: { value: 0 },\n                uOnsetEnergy: { value: 0 }, uTerrainMode: { value: 0 }, uTerrainHeight: { value: 15.0 },\n                uVortexStrength: { value: STATE.vortexStrength },\n                uPulseIntensity: { value: STATE.pulseIntensity },\n                uZoomFactor: { value: 1.0 },\n                uMousePos: { value: new THREE.Vector3(999, 999, 999) },\n                uMouseVelocity: { value: new THREE.Vector2(0, 0) }\n            },\n            transparent: true, depthWrite: false, blending: THREE.AdditiveBlending\n        });\n\n        const points = new THREE.Points(geometry, material);\n        scene.add(points);\n\n        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 INSTANCED SECONDARY PARTICLES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\n        const secondaryVertexShader = `\nuniform float uTime, uPixelRatio;\nuniform float uViewportAspect, uViewportHalfHeight;\nuniform float uSubBass, uBass, uLowMid, uMid, uHighMid, uHigh, uUltraHigh;\nuniform float uBeatEnergy, uSpectralCentroid, uSpectralFlux, uOnsetEnergy;\nuniform vec3 uColor1, uColor2;\nuniform float uVortexStrength;\n\nattribute vec3 instancePosition;\nattribute vec3 instanceRandom;\nattribute float instancePhase;\n\nvarying vec3 vColor;\nvarying float vAlpha;\nvarying float vEnergy;\nvarying float vDepth;\n\nvec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }\nvec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }\n\nfloat snoise(vec3 v) {\n    const vec2 C = vec2(1.0/6.0, 1.0/3.0);\n    const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);\n    vec3 i = floor(v + dot(v, C.yyy));\n    vec3 x0 = v - i + dot(i, C.xxx);\n    vec3 g = step(x0.yzx, x0.xyz);\n    vec3 l = 1.0 - g;\n    vec3 i1 = min(g.xyz, l.zxy);\n    vec3 i2 = max(g.xyz, l.zxy);\n    vec3 x1 = x0 - i1 + C.xxx;\n    vec3 x2 = x0 - i2 + C.yyy;\n    vec3 x3 = x0 - D.yyy;\n    i = mod289(i);\n    vec4 p = permute(permute(permute(i.z + vec4(0.0, i1.z, i2.z, 1.0)) + i.y + vec4(0.0, i1.y, i2.y, 1.0)) + i.x + vec4(0.0, i1.x, i2.x, 1.0));\n    float n_ = 0.142857142857;\n    vec3 ns = n_ * D.wyz - D.xzx;\n    vec4 j = p - 49.0 * floor(p * ns.z * ns.z);\n    vec4 x_ = floor(j * ns.z);\n    vec4 y_ = floor(j - 7.0 * x_);\n    vec4 x = x_ * ns.x + ns.yyyy;\n    vec4 y = y_ * ns.x + ns.yyyy;\n    vec4 h = 1.0 - abs(x) - abs(y);\n    vec4 b0 = vec4(x.xy, y.xy);\n    vec4 b1 = vec4(x.zw, y.zw);\n    vec4 s0 = floor(b0) * 2.0 + 1.0;\n    vec4 s1 = floor(b1) * 2.0 + 1.0;\n    vec4 sh = -step(h, vec4(0.0));\n    vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;\n    vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;\n    vec3 p0 = vec3(a0.xy, h.x);\n    vec3 p1 = vec3(a0.zw, h.y);\n    vec3 p2 = vec3(a1.xy, h.z);\n    vec3 p3 = vec3(a1.zw, h.w);\n    vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2,p2), dot(p3,p3)));\n    p0 *= norm.x; p1 *= norm.y; p2 *= norm.z; p3 *= norm.w;\n    vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);\n    m = m * m;\n    return 42.0 * dot(m*m, vec4(dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3)));\n}\n\n${shapeFunction}\n\nvoid main() {\n    // Secondary particles run at a slower timescale \u2014 they are the atmosphere, not the core\n    float t = uTime * 0.45;\n\n    // Multi-scale noise flow \u2014 low freqs drive large drift, high freqs add fine turbulence\n    vec3 noisePos = instancePosition * 0.035 + instanceRandom;\n    vec3 drift    = vec3(\n        snoise(noisePos + t * 0.06),\n        snoise(noisePos * 0.9 - t * 0.05),\n        snoise(noisePos * 1.1 + t * 0.04)\n    ) * (5.0 + uSubBass * 10.0 + uLowMid * 6.0);\n\n    vec3 turbulence = vec3(\n        snoise(noisePos * 2.5 + t * 0.18),\n        snoise(noisePos * 2.5 - t * 0.14),\n        snoise(noisePos * 2.5 + t * 0.12)\n    ) * (uHigh * 5.0 + uSpectralFlux * 8.0);\n\n    vec3 offset = drift + turbulence;\n\n    // Orbital drift \u2014 vortex-aware, modulated by bass\n    float orbitSpeed = 0.12 + instanceRandom.x * 0.15 + uBass * 0.08;\n    float angle = uTime * orbitSpeed + instancePhase;\n    float orbitRadius = length(instancePosition.xz) * (1.0 + uSubBass * 0.25);\n    // Vortex coupling \u2014 secondary shell rotates with the main field vortex\n    float vortexInfluence = uVortexStrength * uBass * 0.4;\n    float vAngle = angle + vortexInfluence;\n    vec3 orbit = vec3(\n        cos(vAngle) * orbitRadius - instancePosition.x,\n        sin(uTime * 0.5 + instancePhase) * (uMid * 4.0 + uLowMid * 2.0),\n        sin(vAngle) * orbitRadius - instancePosition.z\n    ) * 0.07;\n\n    vec3 newPos = shapedPosition(instanceRandom) + offset + orbit;\n\n    // Transients and sub-bass move the atmosphere in depth, not away from the centre.\n    newPos.z += uOnsetEnergy * 14.0 * (0.6 + instanceRandom.z * 0.4);\n    newPos.z += sin(uTime * 1.2 + instancePhase) * uSubBass * 5.0;\n\n    vec4 mvPosition = modelViewMatrix * vec4(newPos, 1.0);\n    gl_Position = projectionMatrix * mvPosition;\n\n    // Size: driven by different bands than the main system\n    // Sparkle on ultraHigh, swell on subBass, punch on beatEnergy\n    float sparkle = 1.0 + (instanceRandom.x > 0.85 ? sin(uTime * 15.0 + instanceRandom.y * 200.0) * uUltraHigh * 3.0 : 0.0);\n    float swell = 1.0 + uSubBass * 0.6 + uLowMid * 0.3;\n    float size = (1.1 + uBeatEnergy * 0.7) * swell * sparkle;\n    gl_PointSize = clamp(size * uPixelRatio * (55.0 / -mvPosition.z), 0.5, 55.0);\n\n    // Colour: spectral centroid shifts hue, highMid brightens toward white\n    float centroidMix = clamp(uSpectralCentroid * 2.2 + uHighMid * 0.4, 0.0, 1.0);\n    vColor = mix(uColor1, uColor2, centroidMix);\n    // SubBass warmth \u2014 hint of deep colour saturation on heavy lows\n    vColor = mix(vColor, vColor * 1.3, uSubBass * 0.4);\n    // Beat flash \u2014 brief white-hot core\n    vColor = mix(vColor, vec3(1.0), uBeatEnergy * 0.25);\n\n    // Alpha: outer shell fades at edge, mid-frequency presence sustains visibility\n    float edgeFade = 1.0 - smoothstep(0.92, 1.05, max(abs(newPos.x) / (uViewportAspect * uViewportHalfHeight * uFieldFill * 1.05), abs(newPos.y) / (uViewportHalfHeight * uFieldFill * 1.05)));\n    vAlpha = edgeFade * (0.45 + uMid * 0.35 + uLowMid * 0.2) * sparkle;\n\n    vEnergy = uBeatEnergy * 0.4 + uHighMid * 0.3 + uOnsetEnergy * 0.3;\n    vDepth = clamp(-mvPosition.z / 160.0, 0.0, 1.0);\n}\n`;\n\n        const secondaryFragmentShader = `\nvarying vec3 vColor;\nvarying float vAlpha;\nvarying float vEnergy;\nvarying float vDepth;\n\nvoid main() {\n    vec2 xy = gl_PointCoord.xy - vec2(0.5);\n    float r = length(xy);\n    if (r > 0.5) discard;\n\n    // Wider, softer glow than main particles \u2014 atmospheric haze\n    float glow     = exp(-r * r * 8.0);\n    float softGlow = exp(-r * r * 3.0) * 0.4;\n    float core     = smoothstep(0.18 - vEnergy * 0.06, 0.10, r);\n\n    vec3 finalColor = mix(vColor, vec3(1.0, 0.97, 0.92), core * 0.55);\n    // Depth haze \u2014 far particles shift slightly cooler/dimmer\n    finalColor = mix(finalColor, vec3(0.02, 0.03, 0.06), vDepth * 0.35);\n\n    float finalAlpha = clamp(vAlpha * (glow * 0.65 + softGlow + core * 0.35), 0.0, 1.0);\n    gl_FragColor = vec4(finalColor, finalAlpha);\n}\n`;\n\n        // Create instanced geometry for secondary particles\n        const secondaryGeometry = new THREE.InstancedBufferGeometry();\n\n        // Base geometry (single point)\n        const basePositions = new Float32Array([0, 0, 0]);\n        secondaryGeometry.setAttribute('position', new THREE.BufferAttribute(basePositions, 3));\n\n        // Instance attributes\n        const instancePositions = new Float32Array(CONFIG.secondaryParticles * 3);\n        const instanceRandoms = new Float32Array(CONFIG.secondaryParticles * 3);\n        const instancePhases = new Float32Array(CONFIG.secondaryParticles);\n\n        for (let i = 0; i < CONFIG.secondaryParticles; i++) {\n            // Distribute in outer shell\n            const r = CONFIG.fieldRadius * (0.65 + Math.random() * 0.45);\n            const theta = Math.acos(2 * Math.random() - 1);\n            const phi = Math.random() * Math.PI * 2;\n\n            instancePositions[i * 3] = r * Math.sin(theta) * Math.cos(phi);\n            instancePositions[i * 3 + 1] = r * Math.sin(theta) * Math.sin(phi);\n            instancePositions[i * 3 + 2] = r * Math.cos(theta);\n\n            instanceRandoms[i * 3] = Math.random();\n            instanceRandoms[i * 3 + 1] = Math.random();\n            instanceRandoms[i * 3 + 2] = Math.random();\n\n            instancePhases[i] = Math.random() * Math.PI * 2;\n        }\n\n        secondaryGeometry.setAttribute('instancePosition', new THREE.InstancedBufferAttribute(instancePositions, 3));\n        secondaryGeometry.setAttribute('instanceRandom', new THREE.InstancedBufferAttribute(instanceRandoms, 3));\n        secondaryGeometry.setAttribute('instancePhase', new THREE.InstancedBufferAttribute(instancePhases, 1));\n\n        const secondaryMaterial = new THREE.ShaderMaterial({\n            vertexShader: secondaryVertexShader,\n            fragmentShader: secondaryFragmentShader,\n            uniforms: {\n                uTime:             { value: 0 },\n                uPixelRatio:       { value: STATE.pixelRatio },\n                uSubBass:          { value: 0 },\n                uBass:             { value: 0 },\n                uLowMid:           { value: 0 },\n                uMid:              { value: 0 },\n                uHighMid:          { value: 0 },\n                uHigh:             { value: 0 },\n                uUltraHigh:        { value: 0 },\n                uBeatEnergy:       { value: 0 },\n                uSpectralCentroid: { value: 0 },\n                uSpectralFlux:     { value: 0 },\n                uOnsetEnergy:      { value: 0 },\n                uVortexStrength:   { value: STATE.vortexStrength },\n                uColor1:           { value: new THREE.Color(def.sc1) },\n                uColor2:           { value: new THREE.Color(def.sc2) },\n                uViewportAspect:   { value: window.innerWidth / window.innerHeight },\n                uViewportHalfHeight: { value: Math.tan(camera.fov * Math.PI / 360) * CONFIG.defaultZoom },\n                uFieldFill:        { value: STATE.fieldSize }\n            },\n            transparent: true,\n            depthWrite: false,\n            blending: THREE.AdditiveBlending\n        });\n\n        const secondaryPoints = new THREE.Points(secondaryGeometry, secondaryMaterial);\n        scene.add(secondaryPoints);\n\n        // Expose secondary-layer controls to the host component.\n        STATE.secondaryEnabled = true;\n        STATE.secondaryOpacity = 1.0;\n\n        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 PARTICLE TRAIL SYSTEM \u2550\u2550\u2550\u2550\u2550\u2550\u2550\n        const particleSeeds = geometry.getAttribute('aRandom');\n        function fieldParticlePosition(index, target) {\n            const halfHeight = material.uniforms.uViewportHalfHeight.value * STATE.fieldSize;\n            const halfWidth = halfHeight * material.uniforms.uViewportAspect.value;\n            return target.set(\n                (particleSeeds.getX(index) * 2 - 1) * halfWidth,\n                (particleSeeds.getY(index) * 2 - 1) * halfHeight,\n                (particleSeeds.getZ(index) - 0.5) * 12\n            );\n        }\n\n        class TrailSystem {\n            constructor(count, length) {\n                this.trails = [];\n                this.meshes = [];\n                this.nextPosition = new THREE.Vector3();\n\n                for (let i = 0; i < count; i++) {\n                    const anchor = new THREE.Vector2(Math.random() * 1.5 - 0.75, Math.random() * 1.5 - 0.75);\n                    const start = new THREE.Vector3(\n                        anchor.x * material.uniforms.uViewportAspect.value * material.uniforms.uViewportHalfHeight.value * STATE.fieldSize,\n                        anchor.y * material.uniforms.uViewportHalfHeight.value * STATE.fieldSize,\n                        0\n                    );\n                    const trail = {\n                        positions: Array.from({ length }, () => start.clone()),\n                        anchor,\n                        phase: Math.random() * Math.PI * 2,\n                        speed: 0.3 + Math.random() * 0.7,\n                        color: new THREE.Color(def.c1).lerp(new THREE.Color(def.c2), i / Math.max(1, count - 1))\n                    };\n                    this.trails.push(trail);\n\n                    const geom = new THREE.BufferGeometry();\n                    const positions = new Float32Array(length * 3);\n                    const alphas = new Float32Array(length);\n                    for (let j = 0; j < length; j++) alphas[j] = 1.0 - j / length;\n\n                    geom.setAttribute('position', new THREE.BufferAttribute(positions, 3));\n                    geom.setAttribute('alpha', new THREE.BufferAttribute(alphas, 1));\n\n                    const mat = new THREE.ShaderMaterial({\n                        vertexShader: `attribute float alpha; varying float vAlpha; void main() { vAlpha = alpha; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`,\n                        fragmentShader: `uniform vec3 uColor; uniform float uOpacity, uBeat; varying float vAlpha; void main() { gl_FragColor = vec4(uColor * (1.0 + uBeat * 0.3), vAlpha * uOpacity * 0.6 * (1.0 + uBeat * 0.5)); }`,\n                        uniforms: { uColor: { value: trail.color }, uOpacity: { value: 0.4 }, uBeat: { value: 0 } },\n                        transparent: true, depthWrite: false, blending: THREE.AdditiveBlending\n                    });\n\n                    const line = new THREE.Line(geom, mat);\n                    this.meshes.push(line);\n                    scene.add(line);\n                }\n            }\n\n            update(time, audio, fieldColor) {\n                const halfHeight = material.uniforms.uViewportHalfHeight.value * STATE.fieldSize;\n                const halfWidth = halfHeight * material.uniforms.uViewportAspect.value;\n                for (let i = 0; i < this.trails.length; i++) {\n                    const trail = this.trails[i], mesh = this.meshes[i];\n                    mesh.visible = STATE.particleTrailsEnabled && i < this.trails.length * STATE.qualityLevel;\n                    if (!mesh.visible) continue;\n\n                    const angle = time * 0.5 * trail.speed + trail.phase;\n                    const newPos = this.nextPosition.set(\n                        trail.anchor.x * halfWidth + Math.cos(angle) * (4 + audio.bass * 8),\n                        trail.anchor.y * halfHeight + Math.sin(time * 0.3 + trail.phase) * (4 + audio.mid * 8),\n                        Math.sin(angle) * (4 + audio.high * 7)\n                    );\n                    newPos.x = THREE.MathUtils.clamp(newPos.x, -halfWidth * 0.94, halfWidth * 0.94);\n                    newPos.y = THREE.MathUtils.clamp(newPos.y, -halfHeight * 0.94, halfHeight * 0.94);\n\n                    for (let j = trail.positions.length - 1; j > 0; j--) trail.positions[j].copy(trail.positions[j - 1]);\n                    trail.positions[0].copy(newPos);\n\n                    const posAttr = mesh.geometry.getAttribute('position');\n                    for (let j = 0; j < trail.positions.length; j++) {\n                        posAttr.setXYZ(j, trail.positions[j].x, trail.positions[j].y, trail.positions[j].z);\n                    }\n                    posAttr.needsUpdate = true;\n\n                    mesh.material.uniforms.uBeat.value = audio.beat;\n                    mesh.material.uniforms.uOpacity.value = STATE.particleTrailOpacity;\n                }\n            }\n        }\n\n        const trailSystem = new TrailSystem(50, 12);\n\n        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 PARTICLE CONNECTIONS (Force Network) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\n        const connectionCount = 500;  // Number of particles to check for connections\n        const maxConnections = 800;   // Maximum line segments\n        const connectionGeometry = new THREE.BufferGeometry();\n        const connectionPositions = new Float32Array(maxConnections * 6);  // 2 points per line, 3 coords each\n        const connectionAlphas = new Float32Array(maxConnections * 2);     // Alpha per vertex\n        connectionGeometry.setAttribute('position', new THREE.BufferAttribute(connectionPositions, 3));\n        connectionGeometry.setAttribute('alpha', new THREE.BufferAttribute(connectionAlphas, 1));\n        connectionGeometry.setDrawRange(0, 0);\n\n        const connectionMaterial = new THREE.ShaderMaterial({\n            vertexShader: `\n        attribute float alpha;\n        varying float vAlpha;\n        void main() {\n            vAlpha = alpha;\n            vec4 mvPos = modelViewMatrix * vec4(position, 1.0);\n            gl_Position = projectionMatrix * mvPos;\n        }\n    `,\n            fragmentShader: `\n        uniform vec3 uColor;\n        uniform vec3 uColor2;\n        uniform float uOpacity;\n        uniform float uBeatEnergy;\n        uniform float uHighMid;\n        uniform float uSpectralCentroid;\n        varying float vAlpha;\n        void main() {\n            // Blend hue with spectral centroid (brighter/higher = more c2)\n            vec3 color = mix(uColor, uColor2, clamp(uSpectralCentroid * 2.0, 0.0, 1.0));\n            // Beat pulse flash\n            float beatFlash = 1.0 + uBeatEnergy * 1.2;\n            color *= beatFlash;\n            // Per-line alpha reacts to highMid (attack/presence energy)\n            float lineAlpha = vAlpha * uOpacity * (0.4 + uHighMid * 0.5 + uBeatEnergy * 0.4);\n            gl_FragColor = vec4(color, clamp(lineAlpha, 0.0, 1.0));\n        }\n    `,\n            uniforms: {\n                uColor:  { value: new THREE.Color(def.c2) },\n                uColor2: { value: new THREE.Color(def.c1) },\n                uOpacity: { value: 1.0 },\n                uBeatEnergy: { value: 0 },\n                uHighMid: { value: 0 },\n                uSpectralCentroid: { value: 0 }\n            },\n            transparent: true,\n            depthWrite: false,\n            blending: THREE.AdditiveBlending\n        });\n\n        const connectionMesh = new THREE.LineSegments(connectionGeometry, connectionMaterial);\n        scene.add(connectionMesh);\n\n        // Particle indices to track for connections \u2014 refreshed periodically\n        const trackedParticles = [];\n        const positions = Array.from({ length: connectionCount }, () => new THREE.Vector3());\n        let connectionRefreshCounter = 0;\n        const CONNECTION_REFRESH_INTERVAL = 40; // 20 Hz updates preserve the original ~2 s selection cycle\n\n        function refreshTrackedParticles() {\n            trackedParticles.length = 0;\n            const visibleParticles = Math.max(1, geometry.drawRange.count);\n            const visibleFraction = Math.sqrt(visibleParticles / (CONFIG.maxParticles * CONFIG.initialDensity));\n            const trackedCount = Math.max(2, Math.floor(connectionCount * Math.min(1, STATE.qualityLevel, visibleFraction)));\n            for (let i = 0; i < trackedCount; i++) {\n                trackedParticles.push(Math.floor(Math.random() * visibleParticles));\n            }\n        }\n        refreshTrackedParticles();\n        let lastConnectionState = null;\n\n        function shouldRebuildConnections(activeAudio, current, previous, idleElapsed) {\n            return activeAudio || idleElapsed >= 2 || !previous || current.some((value, index) => value !== previous[index]);\n        }\n\n        function updateConnections(threshold, bassBoost, highMid, mid, forceRefresh = false) {\n            // Refresh particle selection every N frames \u2014 network evolves over time\n            connectionRefreshCounter++;\n            if (forceRefresh || connectionRefreshCounter >= CONNECTION_REFRESH_INTERVAL) {\n                refreshTrackedParticles();\n                connectionRefreshCounter = 0;\n            }\n\n            // Mirror the shader's screen-fitted seed mapping for the line systems.\n            for (let i = 0; i < trackedParticles.length; i++) {\n                fieldParticlePosition(trackedParticles[i], positions[i]);\n            }\n\n            // Threshold breathes with bass, tightens on high energy\n            const effectiveThreshold = threshold * (1.0 + bassBoost * 0.6) * (1.0 - highMid * 0.15);\n            const thresholdSq = effectiveThreshold * effectiveThreshold;\n\n            // Dynamic connection cap \u2014 expands with mid+highMid energy\n            const dynamicMax = Math.floor(maxConnections * (0.3 + (mid + highMid) * 0.7));\n\n            let connIdx = 0;\n            for (let i = 0; i < trackedParticles.length && connIdx < dynamicMax; i++) {\n                for (let j = i + 1; j < trackedParticles.length && connIdx < dynamicMax; j++) {\n                    const distSq = positions[i].distanceToSquared(positions[j]);\n                    if (distSq < thresholdSq && distSq > 0.1) {\n                        const dist = Math.sqrt(distSq);\n                        const alpha = (1.0 - dist / effectiveThreshold) * 0.8;\n\n                        connectionPositions[connIdx * 6 + 0] = positions[i].x;\n                        connectionPositions[connIdx * 6 + 1] = positions[i].y;\n                        connectionPositions[connIdx * 6 + 2] = positions[i].z;\n                        connectionPositions[connIdx * 6 + 3] = positions[j].x;\n                        connectionPositions[connIdx * 6 + 4] = positions[j].y;\n                        connectionPositions[connIdx * 6 + 5] = positions[j].z;\n\n                        connectionAlphas[connIdx * 2 + 0] = alpha;\n                        connectionAlphas[connIdx * 2 + 1] = alpha;\n\n                        connIdx++;\n                    }\n                }\n            }\n\n            connectionGeometry.attributes.position.needsUpdate = true;\n            connectionGeometry.attributes.alpha.needsUpdate = true;\n            connectionGeometry.setDrawRange(0, connIdx * 2);\n        }\n\n        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 NETWORK CRAWLERS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\n        const CRAWLER_COUNT    = 24;   // concurrent crawlers\n        const CRAWLER_TAIL     = 10;   // trail positions per crawler\n        const crawlerMaxSegs   = CRAWLER_COUNT * (CRAWLER_TAIL - 1);\n\n        const crawlerGeo = new THREE.BufferGeometry();\n        const crawlerPos = new Float32Array(crawlerMaxSegs * 6);\n        const crawlerAlp = new Float32Array(crawlerMaxSegs * 2);\n        crawlerGeo.setAttribute('position', new THREE.BufferAttribute(crawlerPos, 3));\n        crawlerGeo.setAttribute('alpha',    new THREE.BufferAttribute(crawlerAlp, 1));\n        crawlerGeo.setDrawRange(0, 0);\n\n        // Bloom only lights pixels above 0.85 luminance. Preset greens and cyans got there on their own;\n        // a theme's reds and violets carry the same energy at a fraction of the luminance, so reaction\n        // colours keep the theme's hue but are lifted (past 1.0 if needed) to the brightness of the originals.\n        function glowColor(color, luminance) {\n            const current = 0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b;\n            return color.multiplyScalar(Math.min(4, Math.max(1, luminance / Math.max(current, 0.02))));\n        }\n        const crawlerLow = new THREE.Color(def.c1), crawlerHigh = new THREE.Color(def.c3);\n        const crawlerTarget = new THREE.Color();\n        const crawlerMaterial = new THREE.ShaderMaterial({\n            vertexShader: `\n                attribute float alpha;\n                varying float vAlpha;\n                void main() {\n                    vAlpha = alpha;\n                    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n                }\n            `,\n            fragmentShader: `\n                uniform vec3 uColor;\n                uniform float uBeatEnergy;\n                varying float vAlpha;\n                void main() {\n                    vec3 c = uColor * (1.2 + uBeatEnergy * 1.5);\n                    gl_FragColor = vec4(c, vAlpha);\n                }\n            `,\n            uniforms: {\n                uColor:      { value: new THREE.Color(def.c1) },\n                uBeatEnergy: { value: 0 }\n            },\n            transparent: true,\n            depthWrite:  false,\n            blending:    THREE.AdditiveBlending\n        });\n\n        const crawlerMesh = new THREE.LineSegments(crawlerGeo, crawlerMaterial);\n        scene.add(crawlerMesh);\n\n        // Initialise crawler agents\n        const crawlers = [];\n        const CRAWLER_MIN_STEP = 1.8; // min world-space distance before adding a tail point\n        for (let i = 0; i < CRAWLER_COUNT; i++) {\n            crawlers.push({\n                fromIdx:   Math.floor(Math.random() * connectionCount),\n                toIdx:     Math.floor(Math.random() * connectionCount),\n                t:         Math.random(),\n                speed:     0.0015 + Math.random() * 0.002,\n                tail:      [],\n                lastTailPos: null, // last world position a tail point was recorded\n                hue:       Math.random()\n            });\n        }\n\n        function updateCrawlers(dt, highMid, beatEnergy, spectralCentroid) {\n            // Helper: world position of a tracked particle\n            function particlePos(idx) {\n                return positions[idx % trackedParticles.length];\n            }\n\n            // Helper: find nearest neighbour within threshold\n            function nearestNeighbour(fromIdx, excludeIdx) {\n                const origin = particlePos(fromIdx);\n                const threshold = STATE.connectionThreshold * (1.2 + highMid * 0.4);\n                const threshSq  = threshold * threshold;\n                let bestDist = Infinity, bestIdx = -1;\n                const check = Math.min(trackedParticles.length, 80); // sample subset for perf\n                const start  = Math.floor(Math.random() * (trackedParticles.length - check));\n                for (let k = start; k < start + check; k++) {\n                    const ki = k % trackedParticles.length;\n                    if (ki === fromIdx || ki === excludeIdx) continue;\n                    const d = origin.distanceToSquared(particlePos(ki));\n                    if (d < threshSq && d < bestDist) { bestDist = d; bestIdx = ki; }\n                }\n                // fallback: pick random if no neighbour in range\n                return bestIdx === -1 ? Math.floor(Math.random() * trackedParticles.length) : bestIdx;\n            }\n\n            let segIdx = 0;\n\n            for (let i = 0; i < crawlers.length; i++) {\n                const c = crawlers[i];\n\n                // Speed reacts to highMid (attack energy) and beat\n                const spd = c.speed * (1.0 + highMid * 0.8 + beatEnergy * 0.5);\n                c.t += spd;\n\n                // Reached target \u2014 advance to next node\n                if (c.t >= 1.0) {\n                    c.t -= 1.0;\n                    c.fromIdx = c.toIdx;\n                    c.toIdx   = nearestNeighbour(c.fromIdx, c.fromIdx);\n                    // Occasionally teleport to keep crawlers spread across the field\n                    if (Math.random() < 0.04) {\n                        c.fromIdx    = Math.floor(Math.random() * trackedParticles.length);\n                        c.toIdx      = nearestNeighbour(c.fromIdx, c.fromIdx);\n                        c.tail       = [];\n                        c.lastTailPos = null;\n                    }\n                }\n\n                // Current head position\n                const from = particlePos(c.fromIdx);\n                const to   = particlePos(c.toIdx);\n                const head = new THREE.Vector3().lerpVectors(from, to, c.t);\n\n                // Only record a tail point when head has moved far enough in world space\n                const distMoved = c.lastTailPos ? head.distanceTo(c.lastTailPos) : Infinity;\n                if (distMoved >= CRAWLER_MIN_STEP) {\n                    c.tail.push(head.clone());\n                    if (c.tail.length > CRAWLER_TAIL) c.tail.shift();\n                    c.lastTailPos = head.clone();\n                }\n\n                // Write tail segments\n                const tailLen = c.tail.length;\n                for (let s = 0; s < tailLen - 1 && segIdx < crawlerMaxSegs; s++) {\n                    const p0 = c.tail[s];\n                    const p1 = c.tail[s + 1];\n                    // Alpha: head is brightest, tail fades\n                    const baseAlpha = ((s + 1) / (tailLen - 1));\n                    const alpha = baseAlpha * (0.25 + spectralCentroid * 0.3 + beatEnergy * 0.4);\n\n                    crawlerPos[segIdx * 6 + 0] = p0.x; crawlerPos[segIdx * 6 + 1] = p0.y; crawlerPos[segIdx * 6 + 2] = p0.z;\n                    crawlerPos[segIdx * 6 + 3] = p1.x; crawlerPos[segIdx * 6 + 4] = p1.y; crawlerPos[segIdx * 6 + 5] = p1.z;\n                    crawlerAlp[segIdx * 2 + 0] = alpha;\n                    crawlerAlp[segIdx * 2 + 1] = alpha;\n                    segIdx++;\n                }\n            }\n\n            crawlerGeo.attributes.position.needsUpdate = true;\n            crawlerGeo.attributes.alpha.needsUpdate    = true;\n            crawlerGeo.setDrawRange(0, segIdx * 2);\n        }\n\n        STATE.crawlersEnabled = true;\n\n        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 NEBULA BACKGROUND \u2550\u2550\u2550\u2550\u2550\u2550\u2550\n        const nebulaVertexShader = `\nvarying vec3 vWorldPosition;\nvarying vec2 vUv;\nvoid main() {\n    vUv = uv;\n    vec4 worldPos = modelMatrix * vec4(position, 1.0);\n    vWorldPosition = worldPos.xyz;\n    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}\n`;\n\n        const nebulaFragmentShader = `\nuniform float uTime;\nuniform vec3 uColor1;\nuniform vec3 uColor2;\nuniform vec3 uColor3;\nuniform float uBass;\nuniform float uMid;\nuniform float uHigh;\nuniform float uBeatEnergy;\nuniform float uIntensity;\nvarying vec3 vWorldPosition;\nvarying vec2 vUv;\n\n// Simplex 3D noise\nvec4 permute(vec4 x) { return mod(((x*34.0)+1.0)*x, 289.0); }\nvec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }\n\nfloat snoise(vec3 v) {\n    const vec2 C = vec2(1.0/6.0, 1.0/3.0);\n    const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);\n    vec3 i = floor(v + dot(v, C.yyy));\n    vec3 x0 = v - i + dot(i, C.xxx);\n    vec3 g = step(x0.yzx, x0.xyz);\n    vec3 l = 1.0 - g;\n    vec3 i1 = min(g.xyz, l.zxy);\n    vec3 i2 = max(g.xyz, l.zxy);\n    vec3 x1 = x0 - i1 + C.xxx;\n    vec3 x2 = x0 - i2 + C.yyy;\n    vec3 x3 = x0 - D.yyy;\n    i = mod(i, 289.0);\n    vec4 p = permute(permute(permute(i.z + vec4(0.0, i1.z, i2.z, 1.0)) + i.y + vec4(0.0, i1.y, i2.y, 1.0)) + i.x + vec4(0.0, i1.x, i2.x, 1.0));\n    float n_ = 1.0/7.0;\n    vec3 ns = n_ * D.wyz - D.xzx;\n    vec4 j = p - 49.0 * floor(p * ns.z * ns.z);\n    vec4 x_ = floor(j * ns.z);\n    vec4 y_ = floor(j - 7.0 * x_);\n    vec4 x = x_ *ns.x + ns.yyyy;\n    vec4 y = y_ *ns.x + ns.yyyy;\n    vec4 h = 1.0 - abs(x) - abs(y);\n    vec4 b0 = vec4(x.xy, y.xy);\n    vec4 b1 = vec4(x.zw, y.zw);\n    vec4 s0 = floor(b0)*2.0 + 1.0;\n    vec4 s1 = floor(b1)*2.0 + 1.0;\n    vec4 sh = -step(h, vec4(0.0));\n    vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy;\n    vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww;\n    vec3 p0 = vec3(a0.xy, h.x);\n    vec3 p1 = vec3(a0.zw, h.y);\n    vec3 p2 = vec3(a1.xy, h.z);\n    vec3 p3 = vec3(a1.zw, h.w);\n    vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2,p2), dot(p3,p3)));\n    p0 *= norm.x; p1 *= norm.y; p2 *= norm.z; p3 *= norm.w;\n    vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);\n    return 42.0 * dot(m*m*m*m, vec4(dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3)));\n}\n\nfloat fbm(vec3 p) {\n    float value = 0.0;\n    float amplitude = 0.5;\n    float frequency = 1.0;\n    for(int i = 0; i < 3; i++) {\n        value += amplitude * snoise(p * frequency);\n        amplitude *= 0.5;\n        frequency *= 2.0;\n    }\n    return value;\n}\n\nvoid main() {\n    vec3 dir = normalize(vWorldPosition);\n    float t = uTime * 0.02;\n\n    // Layered nebula clouds\n    vec3 p1 = dir * 2.0 + t * 0.5;\n    vec3 p2 = dir * 4.0 - t * 0.3;\n    vec3 p3 = dir * 1.5 + vec3(t * 0.2, -t * 0.1, t * 0.15);\n\n    float n1 = fbm(p1) * 0.5 + 0.5;\n    float n2 = fbm(p2) * 0.5 + 0.5;\n    float n3 = fbm(p3) * 0.5 + 0.5;\n\n    // Create cloud density\n    float density = n1 * n2;\n    density = pow(density, 1.5) * 1.5;\n\n    // Wispy tendrils\n    float tendrils = pow(n3, 3.0) * 0.8;\n\n    // Color mixing based on field colors\n    vec3 nebulaColor = mix(uColor1 * 0.3, uColor2 * 0.5, n1);\n    nebulaColor = mix(nebulaColor, uColor3 * 0.4, n2 * 0.5);\n\n    // Add some complementary deep space colors\n    vec3 deepSpace = vec3(0.02, 0.01, 0.05);\n    vec3 starGlow = vec3(0.1, 0.08, 0.15);\n\n    // Audio reactivity\n    float bassGlow = uBass * 0.3;\n    float midShimmer = uMid * 0.2 * sin(uTime * 2.0 + n1 * 10.0);\n    float beatPulse = uBeatEnergy * 0.4;\n\n    // Combine layers\n    vec3 color = deepSpace;\n    color += nebulaColor * density * (0.4 + bassGlow + beatPulse);\n    color += uColor2 * 0.15 * tendrils * (1.0 + uHigh * 0.5);\n    color += starGlow * pow(n1 * n2, 4.0) * (1.0 + midShimmer);\n\n    // Scattered stars\n    float stars = pow(snoise(dir * 50.0) * 0.5 + 0.5, 20.0);\n    stars += pow(snoise(dir * 80.0 + 100.0) * 0.5 + 0.5, 25.0) * 0.5;\n    color += vec3(1.0, 0.95, 0.9) * stars * (0.5 + uHigh * 0.5);\n\n    // Vignette toward horizon\n    float horizonFade = 1.0 - pow(abs(dir.y), 0.5) * 0.3;\n    color *= horizonFade;\n\n    // Apply intensity\n    color *= uIntensity;\n\n    gl_FragColor = vec4(color, 1.0);\n}\n`;\n\n        const nebulaMaterial = new THREE.ShaderMaterial({\n            vertexShader: nebulaVertexShader,\n            fragmentShader: nebulaFragmentShader,\n            uniforms: {\n                uTime: { value: 0 },\n                uColor1: { value: new THREE.Color(def.c1) },\n                uColor2: { value: new THREE.Color(def.c2) },\n                uColor3: { value: new THREE.Color(def.c3) },\n                uBass: { value: 0 },\n                uMid: { value: 0 },\n                uHigh: { value: 0 },\n                uBeatEnergy: { value: 0 },\n                uIntensity: { value: STATE.nebulaIntensity }\n            },\n            side: THREE.BackSide,\n            depthWrite: false\n        });\n\n        const nebulaSphere = new THREE.Mesh(\n            new THREE.SphereGeometry(500, 64, 64),\n            nebulaMaterial\n        );\n        scene.add(nebulaSphere);\n\n        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 POST-PROCESSING COMPOSER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\n        const composer = new EffectComposer(renderer);\n        composer.addPass(new RenderPass(scene, camera));\n\n        const afterimagePass = new AfterimagePass();\n        afterimagePass.uniforms['damp'].value = STATE.trails;\n        composer.addPass(afterimagePass);\n\n        const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);\n        bloomPass.threshold = 0.25;\n        bloomPass.strength = STATE.bloom;\n        bloomPass.radius = 0.45;\n        composer.addPass(bloomPass);\n\n        const godRaysPass = new ShaderPass(GodRaysShader);\n        godRaysPass.enabled = false;\n        composer.addPass(godRaysPass);\n\n        const lensFlarePass = new ShaderPass(LensFlareShader);\n        lensFlarePass.enabled = STATE.lensFlareEnabled && STATE.lensFlareIntensity > 0;\n        composer.addPass(lensFlarePass);\n\n        const anamorphicPass = new ShaderPass(AnamorphicShader);\n        composer.addPass(anamorphicPass);\n\n        const chromaticPass = new ShaderPass(ChromaticShader);\n        chromaticPass.enabled = STATE.chromaticAberration > 0;\n        composer.addPass(chromaticPass);\n\n        // Custom DOF pass (radial focus)\n        const customDOFPass = new ShaderPass(CustomDOFShader);\n        customDOFPass.uniforms.uFocus.value = STATE.dofFocus;\n        customDOFPass.uniforms.uFocalLength.value = STATE.dofFocalLength;\n        customDOFPass.uniforms.uBokehStrength.value = STATE.dofBokehStrength;\n        customDOFPass.uniforms.uResolution.value.set(window.innerWidth, window.innerHeight);\n        customDOFPass.enabled = STATE.dofEnabled;\n        composer.addPass(customDOFPass);\n\n        const vignettePass = new ShaderPass(VignetteShader);\n        composer.addPass(vignettePass);\n\n        const grainPass = new ShaderPass(GrainShader);\n        grainPass.enabled = STATE.filmGrain > 0;\n        composer.addPass(grainPass);\n\n        const AlphaFromLumaShader = {\n            uniforms: { tDiffuse: { value: null } },\n            vertexShader: `varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`,\n            fragmentShader: `uniform sampler2D tDiffuse; varying vec2 vUv;\n                void main() {\n                    vec3 rgb = texture2D(tDiffuse, vUv).rgb;\n                    float luminance = max(max(rgb.r, rgb.g), rgb.b);\n                    float alpha = smoothstep(0.004, 0.06, luminance);\n                    gl_FragColor = vec4(rgb, alpha);\n                }`\n        };\n        composer.addPass(new OutputPass());\n        composer.addPass(new ShaderPass(AlphaFromLumaShader));\n\n        // Keep the embedded CSS accents aligned with the kit palette.\n        function applyCssTheme(accent) {\n            const luminance = accent.r * 0.299 + accent.g * 0.587 + accent.b * 0.114;\n            const boost = luminance < 0.35 ? 0.35 / Math.max(luminance, 0.001) : 1;\n            for (const [channel, value] of Object.entries({ ar: accent.r, ag: accent.g, ab: accent.b })) {\n                document.documentElement.style.setProperty(`--${channel}`, Math.min(Math.round(value * boost * 255), 255));\n            }\n        }\n        applyCssTheme(new THREE.Color(def.c1));\n\n        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 UI & EVENTS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\n        const overlay = document.getElementById('overlay');\n        const audioControls = document.getElementById('audio-controls');\n        const playPauseBtn = document.getElementById('play-pause-btn');\n        const progressBar = document.getElementById('progress-bar');\n        const progressContainer = document.getElementById('progress-container');\n        const timeDisplay = document.getElementById('time-display');\n        const trackName = document.getElementById('track-name');\n        const status = document.getElementById('status-bar');\n\n        const formatTime = s => `${Math.floor(s / 60)}:${Math.floor(s % 60).toString().padStart(2, '0')}`;\n\n        function updateUI() {\n            if (AUDIO.mode === 'mic') {\n                playPauseBtn.textContent = '\u{1F399} live';\n                playPauseBtn.disabled = true;\n            } else {\n                playPauseBtn.textContent = AUDIO.isPlaying ? '\u23F8 pause' : '\u25B6 play';\n                playPauseBtn.classList.toggle('playing', AUDIO.isPlaying);\n                playPauseBtn.disabled = false;\n            }\n            if (AUDIO.mode === 'file' && AUDIO.audioBuffer) {\n                const cur = AUDIO.getCurrentTime(), dur = AUDIO.getDuration();\n                progressBar.style.width = (cur / dur * 100) + '%';\n                timeDisplay.textContent = `${formatTime(cur)} / ${formatTime(dur)}`;\n            } else {\n                progressBar.style.width = '0%';\n                timeDisplay.textContent = AUDIO.mode === 'mic' ? 'LIVE' : '0:00 / 0:00';\n            }\n        }\n\n        function togglePlayPause() {\n            if (AUDIO.mode !== 'file') return;\n            AUDIO.togglePlayPause();\n            updateUI();\n            status.innerHTML = AUDIO.isPlaying ? 'SYSTEM: <span>PLAYING</span>' : 'SYSTEM: <span>PAUSED</span>';\n        }\n\n        function activate() {\n            AUDIO.init();\n            if (AUDIO.ctx.state === 'suspended') AUDIO.ctx.resume();\n            overlay.style.opacity = 0;\n            setTimeout(() => overlay.style.display = 'none', 800);\n            audioControls.classList.add('visible');\n        }\n\n        async function loadTrack(file) {\n            activate();\n            const buffer = await AUDIO.loadTrack(await file.arrayBuffer(), file.name);\n            const samples = buffer.getChannelData(0);\n            const bars = 160;\n            const peaks = Array.from({ length: bars }, (_, bar) => {\n                const from = Math.floor(bar * samples.length / bars);\n                const to = Math.floor((bar + 1) * samples.length / bars);\n                const stride = Math.max(1, Math.floor((to - from) / 64));\n                let peak = 0;\n                for (let i = from; i < to; i += stride) peak = Math.max(peak, Math.abs(samples[i]));\n                return peak;\n            });\n            parent.postMessage({ type: 'ad-qf-waveform', value: peaks }, '*');\n            AUDIO.play();\n            trackName.textContent = file.name.length > 25 ? file.name.slice(0, 22) + '...' : file.name;\n            updateUI();\n            status.innerHTML = 'SYSTEM: <span>PLAYING</span>';\n        }\n\n        async function startMic(preferredLabel = null) {\n            console.log('Global startMic requested:', preferredLabel);\n            try {\n                activate();\n                await AUDIO.startMic(preferredLabel);\n                trackName.textContent = AUDIO.currentTrackName;\n                updateUI();\n                // status update handled in AUDIO.startMic\n            } catch (e) {\n                console.error(\"Global startMic failed:\", e);\n                const status = document.getElementById('status-bar');\n                status.innerHTML = `ERROR: <span style=\"color:#ff6b6b\">${e.message}</span>`;\n            }\n        }\n\n        // Using optional chaining/checks because one input was replaced by a button\n        const enterBtn = document.getElementById('enter-btn');\n        if (enterBtn) enterBtn.onclick = () => startMic(null);\n\n        const fileInput = document.getElementById('file-input');\n        if (fileInput) fileInput.onchange = e => e.target.files[0] && loadTrack(e.target.files[0]);\n\n        document.getElementById('file-input-2').onchange = e => { if (e.target.files[0]) loadTrack(e.target.files[0]); e.target.value = ''; };\n        document.getElementById('mic-btn-2').onclick = () => startMic(null);\n        playPauseBtn.onclick = togglePlayPause;\n        progressContainer.onclick = e => {\n            if (AUDIO.mode !== 'file' || !AUDIO.audioBuffer) return;\n            const rect = progressContainer.getBoundingClientRect();\n            AUDIO.seek((e.clientX - rect.left) / rect.width * AUDIO.getDuration());\n        };\n        document.getElementById('screenshot-btn')?.addEventListener('click', () => {\n            composer.render();\n            const a = document.createElement('a');\n            a.download = 'quantum-' + Date.now() + '.png';\n            a.href = renderer.domElement.toDataURL('image/png');\n            a.click();\n        });\n        document.getElementById('fullscreen-btn')?.addEventListener('click', () => {\n            document.fullscreenElement ? document.exitFullscreen() : document.documentElement.requestFullscreen();\n        });\n\n        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 ANIMATION LOOP \u2550\u2550\u2550\u2550\u2550\u2550\u2550\n        let renderVisible = true;\n        let connectionElapsed = 1 / 20;\n        let idleConnectionElapsed = 2;\n        let frameRequest = 0;\n        let nextFrameAt = 0;\n        let lastRenderedAt = -1;\n        let elapsed = 0;\n\n        function startFrames() {\n            if (!frameRequest && renderVisible && !document.hidden) frameRequest = requestAnimationFrame(animate);\n        }\n\n        function stopFrames() {\n            if (frameRequest) cancelAnimationFrame(frameRequest);\n            frameRequest = 0;\n            nextFrameAt = 0;\n            lastRenderedAt = -1;\n        }\n\n        document.addEventListener('visibilitychange', () => {\n            if (document.hidden) stopFrames();\n            else startFrames();\n        });\n\n        function animate(now) {\n            frameRequest = 0;\n            if (!renderVisible || document.hidden) return;\n            startFrames();\n            const frameInterval = 1000 / Math.max(1, STATE.targetFPS);\n            if (now < nextFrameAt) return;\n            nextFrameAt = Math.max(nextFrameAt + frameInterval, now);\n            const dt = lastRenderedAt < 0 ? 0 : Math.min((now - lastRenderedAt) / 1000, 0.05);\n            lastRenderedAt = now;\n            elapsed += dt;\n\n            material.uniforms.uTime.value += dt * STATE.timeScale;\n            grainPass.uniforms.uTime.value = elapsed;\n            lensFlarePass.uniforms.uTime.value = elapsed;\n\n            material.uniforms.uZoomFactor.value = camera.position.length() / CONFIG.defaultZoom;\n            material.uniforms.uMousePos.value.lerp(mouseWorldPos, 0.1);\n            material.uniforms.uMouseVelocity.value.lerp(mouseVelocity, 0.08);\n\n            AUDIO.update();\n\n            const s = STATE.sensitivity, lf = 0.16;\n            material.uniforms.uSubBass.value = THREE.MathUtils.lerp(material.uniforms.uSubBass.value, AUDIO.gatedBands.subBass * s, lf);\n            material.uniforms.uBass.value = THREE.MathUtils.lerp(material.uniforms.uBass.value, AUDIO.gatedBands.bass * s, lf);\n            material.uniforms.uLowMid.value = THREE.MathUtils.lerp(material.uniforms.uLowMid.value, AUDIO.gatedBands.lowMid * s, lf);\n            material.uniforms.uMid.value = THREE.MathUtils.lerp(material.uniforms.uMid.value, AUDIO.gatedBands.mid * s, lf);\n            material.uniforms.uHighMid.value = THREE.MathUtils.lerp(material.uniforms.uHighMid.value, AUDIO.gatedBands.highMid * s, lf);\n            material.uniforms.uHigh.value = THREE.MathUtils.lerp(material.uniforms.uHigh.value, AUDIO.gatedBands.high * s, lf);\n            material.uniforms.uUltraHigh.value = THREE.MathUtils.lerp(material.uniforms.uUltraHigh.value, AUDIO.gatedBands.ultraHigh * s, lf);\n            material.uniforms.uBeatEnergy.value = THREE.MathUtils.lerp(material.uniforms.uBeatEnergy.value, AUDIO.beatEnergy, 0.22);\n            material.uniforms.uSpectralCentroid.value = THREE.MathUtils.lerp(material.uniforms.uSpectralCentroid.value, AUDIO.spectralCentroid, lf);\n            material.uniforms.uSpectralFlux.value = THREE.MathUtils.lerp(material.uniforms.uSpectralFlux.value, AUDIO.spectralFlux * s, lf);\n\n            // === ENHANCEMENT: Update new uniforms ===\n            material.uniforms.uOnsetEnergy.value = THREE.MathUtils.lerp(material.uniforms.uOnsetEnergy.value, AUDIO.onsetEnergy, 0.25);\n            material.uniforms.uTerrainMode.value = FIELD_TYPES[STATE.field]?.terrain ? 1.0 : 0.0;\n            material.uniforms.uTerrainHeight.value = STATE.waveformTerrainHeight;\n\n            // Update secondary particles\n            secondaryPoints.visible = STATE.secondaryEnabled;\n            secondaryMaterial.uniforms.uTime.value             = material.uniforms.uTime.value;\n            secondaryMaterial.uniforms.uSubBass.value          = material.uniforms.uSubBass.value;\n            secondaryMaterial.uniforms.uBass.value             = material.uniforms.uBass.value;\n            secondaryMaterial.uniforms.uLowMid.value           = material.uniforms.uLowMid.value;\n            secondaryMaterial.uniforms.uMid.value              = material.uniforms.uMid.value;\n            secondaryMaterial.uniforms.uHighMid.value          = material.uniforms.uHighMid.value;\n            secondaryMaterial.uniforms.uHigh.value             = material.uniforms.uHigh.value;\n            secondaryMaterial.uniforms.uUltraHigh.value        = material.uniforms.uUltraHigh.value;\n            secondaryMaterial.uniforms.uBeatEnergy.value       = material.uniforms.uBeatEnergy.value;\n            secondaryMaterial.uniforms.uSpectralCentroid.value = material.uniforms.uSpectralCentroid.value;\n            secondaryMaterial.uniforms.uSpectralFlux.value     = material.uniforms.uSpectralFlux.value;\n            secondaryMaterial.uniforms.uOnsetEnergy.value      = material.uniforms.uOnsetEnergy.value;\n            secondaryMaterial.uniforms.uVortexStrength.value   = STATE.vortexStrength;\n\n            // Update nebula background\n            nebulaSphere.visible = STATE.nebulaEnabled;\n            if (STATE.nebulaEnabled) {\n                nebulaMaterial.uniforms.uTime.value = material.uniforms.uTime.value;\n                nebulaMaterial.uniforms.uBass.value = material.uniforms.uBass.value;\n                nebulaMaterial.uniforms.uMid.value = material.uniforms.uMid.value;\n                nebulaMaterial.uniforms.uHigh.value = material.uniforms.uHigh.value;\n                nebulaMaterial.uniforms.uBeatEnergy.value = material.uniforms.uBeatEnergy.value;\n            }\n\n            // Update particle connections\n            connectionMesh.visible = STATE.connectionsEnabled;\n            if (STATE.connectionsEnabled) {\n                const activeAudio = AUDIO.mode === 'mic' || AUDIO.isPlaying || AUDIO.externalActive;\n                const connectionState = [\n                    STATE.field, STATE.connectionThreshold, geometry.drawRange.count,\n                    material.uniforms.uViewportAspect.value, material.uniforms.uViewportHalfHeight.value, STATE.fieldSize,\n                    STATE.qualityLevel, activeAudio\n                ];\n                connectionElapsed = Math.min(1 / 20, connectionElapsed + dt);\n                idleConnectionElapsed = Math.min(2, idleConnectionElapsed + dt);\n                if (connectionElapsed >= 1 / 20 && shouldRebuildConnections(activeAudio, connectionState, lastConnectionState, idleConnectionElapsed)) {\n                    const refreshSelection = !lastConnectionState || connectionState[2] !== lastConnectionState[2]\n                        || connectionState[6] !== lastConnectionState[6] || (!activeAudio && idleConnectionElapsed >= 2);\n                    updateConnections(\n                        STATE.connectionThreshold,\n                        activeAudio ? material.uniforms.uBass.value : 0,\n                        activeAudio ? material.uniforms.uHighMid.value : 0,\n                        activeAudio ? material.uniforms.uMid.value : 0,\n                        refreshSelection\n                    );\n                    lastConnectionState = connectionState;\n                    connectionElapsed = 0;\n                    idleConnectionElapsed = 0;\n                }\n                connectionMaterial.uniforms.uBeatEnergy.value = material.uniforms.uBeatEnergy.value;\n                connectionMaterial.uniforms.uHighMid.value = material.uniforms.uHighMid.value;\n                connectionMaterial.uniforms.uSpectralCentroid.value = material.uniforms.uSpectralCentroid.value;\n                connectionMaterial.uniforms.uOpacity.value = STATE.connectionOpacity;\n            } else {\n                connectionElapsed = 1 / 20;\n                idleConnectionElapsed = 2;\n                lastConnectionState = null;\n            }\n\n            // Update crawlers\n            crawlerMesh.visible = STATE.crawlersEnabled && STATE.connectionsEnabled && (AUDIO.externalActive || AUDIO.active && (AUDIO.isPlaying || AUDIO.mode === 'mic'));\n            if (crawlerMesh.visible) {\n                updateCrawlers(\n                    dt,\n                    material.uniforms.uHighMid.value,\n                    material.uniforms.uBeatEnergy.value,\n                    material.uniforms.uSpectralCentroid.value\n                );\n                crawlerTarget.lerpColors(crawlerLow, crawlerHigh, material.uniforms.uSpectralCentroid.value);\n                crawlerMaterial.uniforms.uColor.value.lerp(crawlerTarget, 0.05);\n                crawlerMaterial.uniforms.uBeatEnergy.value = material.uniforms.uBeatEnergy.value;\n            }\n\n            // Update post-processing\n            chromaticPass.uniforms.uBeatEnergy.value = material.uniforms.uBeatEnergy.value;\n            godRaysPass.uniforms.uBeatEnergy.value = material.uniforms.uBeatEnergy.value;\n            lensFlarePass.uniforms.uBeatEnergy.value = material.uniforms.uBeatEnergy.value;\n            vignettePass.uniforms.uBeatEnergy.value = material.uniforms.uBeatEnergy.value;\n            customDOFPass.uniforms.uBeatEnergy.value = material.uniforms.uBeatEnergy.value;\n\n\n\n            // Update trails\n            trailSystem.update(elapsed, {\n                bass: material.uniforms.uBass.value,\n                mid: material.uniforms.uMid.value,\n                high: material.uniforms.uHigh.value,\n                beat: material.uniforms.uBeatEnergy.value\n            }, material.uniforms.uColor1.value);\n\n            // === ENHANCEMENT: Adaptive Quality System ===\n            QUALITY_SYSTEM.update(dt * 1000);\n\n            // === ENHANCEMENT: Audio-Reactive Camera ===\n            AUDIO_CAMERA.update(dt * 1000);\n\n            // Camera shake\n            if (STATE.cameraShake > 0 && AUDIO.beatEnergy > 0.1) {\n                const shake = AUDIO.beatEnergy * STATE.cameraShake;\n                cameraShakeOffset.set((Math.random() - 0.5) * shake * 0.6, (Math.random() - 0.5) * shake * 0.4, (Math.random() - 0.5) * shake * 0.25);\n                camera.position.copy(baseCameraPos).add(cameraShakeOffset);\n            }\n\n            controls.autoRotateSpeed = 0.35 + material.uniforms.uMid.value * 2.0 + material.uniforms.uBeatEnergy.value * 2.0;\n            bloomPass.strength = STATE.bloom + (AUDIO.gatedBands.bass + AUDIO.gatedBands.mid + AUDIO.beatEnergy) / 6;\n            bloomPass.enabled = bloomPass.strength > 0;\n            anamorphicPass.uniforms.uIntensity.value = STATE.anamorphicStretch + AUDIO.gatedBands.bass * 0.4;\n            anamorphicPass.enabled = anamorphicPass.uniforms.uIntensity.value > 0;\n\n            controls.update();\n            composer.render();\n        }\n\n        window.addEventListener('resize', () => {\n            camera.aspect = window.innerWidth / window.innerHeight;\n            camera.updateProjectionMatrix();\n            material.uniforms.uViewportAspect.value = window.innerWidth / window.innerHeight;\n            secondaryMaterial.uniforms.uViewportAspect.value = material.uniforms.uViewportAspect.value;\n            material.uniforms.uViewportHalfHeight.value = Math.tan(camera.fov * Math.PI / 360) * CONFIG.defaultZoom;\n            secondaryMaterial.uniforms.uViewportHalfHeight.value = material.uniforms.uViewportHalfHeight.value;\n            renderer.setSize(window.innerWidth, window.innerHeight);\n            composer.setSize(window.innerWidth, window.innerHeight);\n            STATE.pixelRatio = fitPixelRatio();\n            QUALITY_SYSTEM.applyQuality();\n            customDOFPass.uniforms.uResolution.value.set(window.innerWidth, window.innerHeight);\n            baseCameraPos.copy(camera.position);\n        });\n\n        let pausedFromKit = false;\n        let requestedTimeScale = STATE.timeScale;\n        const sideEffects = {\n            trails: value => afterimagePass.uniforms['damp'].value = value,\n            chromaticAberration: value => { chromaticPass.uniforms.uIntensity.value = value; chromaticPass.enabled = value > 0; },\n            filmGrain: value => { grainPass.uniforms.uIntensity.value = value; grainPass.enabled = value > 0; },\n            nebulaIntensity: value => nebulaMaterial.uniforms.uIntensity.value = value,\n            lensFlareEnabled: value => lensFlarePass.enabled = value && STATE.lensFlareIntensity > 0,\n            lensFlareIntensity: value => { lensFlarePass.uniforms.uIntensity.value = value; lensFlarePass.enabled = STATE.lensFlareEnabled && value > 0; },\n            dofEnabled: value => customDOFPass.enabled = value,\n            dofFocus: value => customDOFPass.uniforms.uFocus.value = value,\n            dofFocalLength: value => customDOFPass.uniforms.uFocalLength.value = value,\n            dofBokehStrength: value => customDOFPass.uniforms.uBokehStrength.value = value,\n            godRaysEnabled: value => godRaysPass.enabled = value && STATE.godRaysIntensity > 0,\n            godRaysIntensity: value => { godRaysPass.uniforms.uIntensity.value = value; godRaysPass.enabled = STATE.godRaysEnabled && value > 0; },\n            vortexStrength: value => material.uniforms.uVortexStrength.value = value,\n            pulseIntensity: value => material.uniforms.uPulseIntensity.value = value,\n            fieldSize: value => { material.uniforms.uFieldFill.value = value; secondaryMaterial.uniforms.uFieldFill.value = value; },\n        };\n        window.addEventListener('message', ({ source, data }) => {\n            if (source !== parent || data?.type !== 'ad-qf-control') return;\n            const { key, value } = data;\n            if (key === 'field' && FIELD_TYPES[value]) {\n                STATE.field = value;\n                const selected = FIELD_TYPES[value];\n                material.uniforms.uNoiseScale.value = selected.s;\n                material.uniforms.uCurlStrength.value = selected.curl;\n                material.uniforms.uSizeBase.value = selected.sz;\n            } else if (key === 'visible') {\n                renderVisible = !!value;\n                if (renderVisible) startFrames();\n                else stopFrames();\n            }\n            else if (key === 'interactive') controls.enabled = !!value;\n            else if (key === 'spectrum') EXTERNAL.set(value?.bands, value?.range);\n            else if (key === 'particleCount') {\n                particleCount = Number.isFinite(value) ? Math.max(0, Math.floor(value)) : null;\n                QUALITY_SYSTEM.applyQuality();\n            }\n            else if (key === 'particleBudget') {\n                particleBudget = Number.isFinite(value) ? Math.max(0, Math.floor(value)) : Infinity;\n                QUALITY_SYSTEM.applyQuality();\n            }\n            else if (key === 'timeScale') { requestedTimeScale = value; if (!pausedFromKit) STATE.timeScale = value; }\n            else if (key === 'paused') { pausedFromKit = !!value; STATE.timeScale = pausedFromKit ? 0 : requestedTimeScale; }\n            else if (key === 'play') togglePlayPause();\n            else if (key === 'file' && value) loadTrack(value);\n            else if (key === 'mic') {\n                if (AUDIO.mode === 'mic') { AUDIO.stopCurrentSource(); AUDIO.mode = null; }\n                else startMic(null);\n            }\n            else if (key === 'seek') { AUDIO.seek(value); updateUI(); }\n            else if (key === 'screenshot') document.getElementById('screenshot-btn').click();\n            else if (key === 'palette' && Array.isArray(value)) {\n                const main = new THREE.Color(value[0]), light = new THREE.Color(value[1]);\n                applyCssTheme(main);\n                material.uniforms.uColor1.value.copy(main);\n                material.uniforms.uColor2.value.copy(light);\n                material.uniforms.uColor3.value.copy(light).lerp(new THREE.Color('#ffffff'), 0.32);\n                secondaryMaterial.uniforms.uColor1.value.copy(main);\n                secondaryMaterial.uniforms.uColor2.value.copy(light);\n                nebulaMaterial.uniforms.uColor1.value.copy(main);\n                nebulaMaterial.uniforms.uColor2.value.copy(light);\n                nebulaMaterial.uniforms.uColor3.value.copy(main);\n                connectionMaterial.uniforms.uColor.value.copy(light);\n                connectionMaterial.uniforms.uColor2.value.copy(main);\n                const white = new THREE.Color('#ffffff');\n                const tint = glowColor(light.clone().lerp(white, 0.35), 0.75);\n                lensFlarePass.uniforms.uTint.value.copy(tint);\n                anamorphicPass.uniforms.uTint.value.copy(tint);\n                // Reaction lines stand out from the field like the presets' contrasting colours did:\n                // a luminous tint of the theme's light colour with a near-white core on bright passages.\n                glowColor(crawlerLow.copy(light).lerp(white, 0.2), 0.75);\n                glowColor(crawlerHigh.copy(light).lerp(white, 0.5), 0.95);\n                crawlerMaterial.uniforms.uColor.value.copy(crawlerLow);\n                trailSystem.trails.forEach((trail, i) => glowColor(trail.color.copy(main).lerp(light, i / Math.max(1, trailSystem.trails.length - 1)).lerp(white, 0.15), 0.6));\n            } else if (Object.prototype.hasOwnProperty.call(STATE, key)) {\n                STATE[key] = value;\n                if (key === 'density') QUALITY_SYSTEM.applyQuality();\n                sideEffects[key]?.(value);\n            }\n        });\n        let lastTransport = '';\n        setInterval(() => {\n            if (!renderVisible || document.hidden) return;\n            const value = {\n                mode: AUDIO.mode, playing: AUDIO.isPlaying,\n                current: AUDIO.mode === 'file' ? AUDIO.getCurrentTime() : 0,\n                duration: AUDIO.mode === 'file' ? AUDIO.getDuration() : 0,\n                track: AUDIO.mode ? AUDIO.currentTrackName : ''\n            };\n            const snapshot = JSON.stringify(value);\n            if (snapshot !== lastTransport) {\n                lastTransport = snapshot;\n                parent.postMessage({ type: 'ad-qf-transport', value }, '*');\n            }\n        }, 250);\n        parent.postMessage({ type: 'ad-qf-ready' }, '*');\n\n        QUALITY_SYSTEM.applyQuality();\n        startFrames();\n    <\/script>\n</body>\n\n</html>\n";
+var reference_default = "<!DOCTYPE html>\n<!-- Quantum Fields Contributors, MIT License. Full notice: UPSTREAM-LICENSE.txt in this package. -->\n<html lang=\"en\">\n\n<head>\n    <meta charset=\"UTF-8\">\n    <title>Quantum Field: Interactive</title>\n    <style>\n        /* The kit hides this page's own interface, so it loads no web fonts: the scene makes no requests beyond three.js. */\n\n        * {\n            box-sizing: border-box;\n        }\n\n        :root {\n            --ar: 167; --ag: 139; --ab: 250;\n        }\n\n        html, body {\n            margin: 0;\n            overflow: hidden;\n            background: transparent !important;\n            color-scheme: dark;\n            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n        }\n\n        canvas {\n            display: block;\n        }\n\n        #scanlines {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: radial-gradient(ellipse at center, transparent 0%, transparent 50%, rgba(0, 0, 0, 0.5) 100%);\n            pointer-events: none;\n            z-index: 10;\n        }\n\n        #overlay {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n            background: linear-gradient(180deg, rgba(15, 10, 25, 0.97) 0%, rgba(10, 10, 20, 0.98) 100%);\n            z-index: 100;\n            backdrop-filter: blur(20px);\n            transition: opacity 1s ease;\n            pointer-events: none;\n            /* Allow clicks to pass through to canvas */\n        }\n\n        .hud-panel {\n            background: linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);\n            border: 1px solid rgba(255, 255, 255, 0.07);\n            padding: 55px 75px;\n            text-align: center;\n            border-radius: 28px;\n            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);\n            pointer-events: auto;\n            /* Re-enable clicks for buttons */\n        }\n\n        h1 {\n            font-family: 'Space Grotesk', sans-serif;\n            font-weight: 500;\n            letter-spacing: 1px;\n            font-size: 34px;\n            margin: 0 0 8px 0;\n            background: linear-gradient(135deg, #ffffff 0%, rgba(var(--ar),var(--ag),var(--ab),0.75) 40%, rgb(var(--ar),var(--ag),var(--ab)) 100%);\n            -webkit-background-clip: text;\n            -webkit-text-fill-color: transparent;\n            background-clip: text;\n        }\n\n        .hud-panel p {\n            color: rgba(255, 255, 255, 0.35);\n            font-size: 13px;\n            margin-bottom: 40px;\n            letter-spacing: 0.5px;\n            font-weight: 300;\n        }\n\n        .btn-group {\n            display: flex;\n            gap: 14px;\n            justify-content: center;\n        }\n\n        button,\n        .file-upload {\n            background: linear-gradient(135deg, rgba(var(--ar),var(--ag),var(--ab),0.12) 0%, rgba(var(--ar),var(--ag),var(--ab),0.06) 100%);\n            border: 1px solid rgba(var(--ar),var(--ag),var(--ab),0.25);\n            color: rgba(255, 255, 255, 0.85);\n            padding: 15px 30px;\n            font-size: 13px;\n            font-weight: 500;\n            cursor: pointer;\n            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n            letter-spacing: 0.3px;\n            border-radius: 14px;\n            font-family: 'Inter', sans-serif;\n        }\n\n        button:hover,\n        .file-upload:hover {\n            background: linear-gradient(135deg, rgba(var(--ar),var(--ag),var(--ab),0.25) 0%, rgba(var(--ar),var(--ag),var(--ab),0.18) 100%);\n            border-color: rgba(var(--ar),var(--ag),var(--ab),0.45);\n            transform: translateY(-2px);\n            box-shadow: 0 12px 35px rgba(139, 92, 246, 0.2);\n        }\n\n        input[type=\"file\"] {\n            display: none;\n        }\n\n        #status-bar {\n            position: absolute;\n            bottom: 80px;\n            left: 28px;\n            color: rgba(255, 255, 255, 0.3);\n            font-size: 10px;\n            letter-spacing: 0.5px;\n            z-index: 200;\n            pointer-events: none;\n        }\n\n        #status-bar span {\n            color: rgba(196, 181, 253, 0.7);\n            font-weight: 500;\n        }\n\n        #interaction-hint {\n            position: absolute;\n            top: 28px;\n            width: 100%;\n            text-align: center;\n            color: rgba(255, 255, 255, 0.5);\n            font-size: 11px;\n            letter-spacing: 2px;\n            pointer-events: none;\n            z-index: 9;\n            text-transform: lowercase;\n        }\n\n        #zoom-indicator {\n            position: absolute;\n            bottom: 80px;\n            right: 28px;\n            color: rgba(255, 255, 255, 0.3);\n            font-size: 10px;\n            z-index: 20;\n            pointer-events: none;\n        }\n\n        #zoom-indicator span {\n            color: rgba(196, 181, 253, 0.7);\n        }\n\n        #audio-controls {\n            position: fixed;\n            bottom: 24px;\n            left: 50%;\n            transform: translateX(-50%);\n            display: flex;\n            gap: 10px;\n            align-items: center;\n            padding: 12px 20px;\n            background: linear-gradient(180deg, rgba(35, 28, 50, 0.88) 0%, rgba(22, 20, 38, 0.92) 100%);\n            border: 1px solid rgba(255, 255, 255, 0.05);\n            border-radius: 18px;\n            z-index: 200;\n            opacity: 0;\n            pointer-events: none;\n            transition: all 0.4s ease;\n            backdrop-filter: blur(25px);\n        }\n\n        #audio-controls.visible {\n            opacity: 1;\n            pointer-events: auto;\n        }\n\n        #audio-controls button,\n        #audio-controls .file-upload {\n            padding: 9px 14px;\n            font-size: 11px;\n            background: rgba(255, 255, 255, 0.03);\n            border: 1px solid rgba(255, 255, 255, 0.07);\n            color: rgba(255, 255, 255, 0.65);\n            border-radius: 10px;\n        }\n\n        #play-pause-btn {\n            min-width: 78px;\n            background: linear-gradient(135deg, rgba(var(--ar),var(--ag),var(--ab),0.18) 0%, rgba(var(--ar),var(--ag),var(--ab),0.10) 100%) !important;\n            border-color: rgba(var(--ar),var(--ag),var(--ab),0.28) !important;\n            color: #e9d5ff !important;\n        }\n\n        #play-pause-btn.playing {\n            background: linear-gradient(135deg, rgba(251, 113, 133, 0.18) 0%, rgba(244, 114, 182, 0.12) 100%) !important;\n            border-color: rgba(251, 113, 133, 0.35) !important;\n        }\n\n        #progress-container {\n            width: 85px;\n            height: 4px;\n            background: rgba(255, 255, 255, 0.06);\n            border-radius: 4px;\n            cursor: pointer;\n        }\n\n        #progress-bar {\n            height: 100%;\n            background: linear-gradient(90deg, rgb(var(--ar),var(--ag),var(--ab)), rgba(var(--ar),var(--ag),var(--ab),0.6), rgba(var(--ar),var(--ag),var(--ab),0.3));\n            border-radius: 4px;\n            width: 0%;\n        }\n\n        #time-display {\n            color: rgba(255, 255, 255, 0.35);\n            font-size: 10px;\n            min-width: 62px;\n            text-align: center;\n        }\n\n        #track-name {\n            color: rgba(255, 255, 255, 0.3);\n            font-size: 10px;\n            max-width: 85px;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n        }\n\n        /* --- Center Panel Refinement --- */\n        .hud-panel {\n            background: rgba(15, 10, 25, 0.85);\n            border: 1px solid rgba(255, 255, 255, 0.08);\n            /* Darkened container */\n            padding: 24px;\n            /* Reduced padding */\n            border-radius: 24px;\n            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);\n            backdrop-filter: blur(40px);\n            min-width: 420px;\n            /* Wider for buttons */\n        }\n\n        .hud-panel h1,\n        .hud-panel p {\n            display: none;\n            /* Hide title as per screenshot showing only buttons */\n        }\n\n        .btn-group {\n            display: flex;\n            gap: 16px;\n            justify-content: center;\n            width: 100%;\n        }\n\n        .btn-group button {\n            flex: 1;\n            background: transparent;\n            border: 1px solid rgba(var(--ar),var(--ag),var(--ab),0.3);\n            color: rgb(var(--ar),var(--ag),var(--ab));\n            padding: 14px 0;\n            border-radius: 12px;\n            font-size: 12px;\n            letter-spacing: 1px;\n            text-transform: uppercase;\n            font-weight: 600;\n            transition: all 0.3s ease;\n        }\n\n        .btn-group button:hover {\n            background: rgba(var(--ar),var(--ag),var(--ab),0.1);\n            border-color: rgb(var(--ar),var(--ag),var(--ab));\n            box-shadow: 0 0 20px rgba(var(--ar),var(--ag),var(--ab),0.2);\n        }\n        #interaction-hint, #audio-controls, #status-bar, #zoom-indicator { display: none !important; }\n    </style>\n</head>\n\n<body>\n    <div id=\"scanlines\" style=\"display:none\"></div>\n    <div id=\"interaction-hint\">space \xB7 play/pause &nbsp;\xB7&nbsp; scroll \xB7 zoom &nbsp;\xB7&nbsp; drag \xB7 rotate &nbsp;\xB7&nbsp; F \xB7 focus mode</div>\n    <div id=\"overlay\" style=\"display:none\">\n        <div class=\"hud-panel\">\n            <h1>Quantum Fields</h1>\n            <p>Audio-reactive particle simulation</p>\n            <div class=\"btn-group\">\n                <button id=\"enter-btn\">Enter</button>\n            </div>\n        </div>\n    </div>\n    <div id=\"audio-controls\">\n        <button id=\"play-pause-btn\" class=\"playing\">\u23F8 pause</button>\n        <div id=\"progress-container\">\n            <div id=\"progress-bar\"></div>\n        </div>\n        <span id=\"time-display\">0:00 / 0:00</span>\n        <span id=\"track-name\">no track</span>\n        <label class=\"file-upload\" title=\"Load audio\">\u{1F4C1}<input type=\"file\" id=\"file-input-2\" accept=\"audio/*\"></label>\n        <button id=\"mic-btn-2\" title=\"Microphone\">\u{1F399}</button>\n        <button id=\"screenshot-btn\" title=\"Screenshot\">\u{1F4F7}</button>\n        <button id=\"fullscreen-btn\" title=\"Fullscreen\">\u26F6</button>\n    </div>\n    <div id=\"status-bar\"><span>ready</span> \xB7 awaiting input</div>\n    <div id=\"zoom-indicator\">zoom <span id=\"zoom-level\">100%</span></div>\n\n    <!-- Global Error Handler (Must be before module imports) -->\n    <script>\n        window.onerror = function (msg, url, lineNo, columnNo, error) {\n            const status = document.getElementById('status-bar');\n            if (status) {\n                status.innerHTML = `ERROR: <span style=\"color:#ff6b6b\">${msg}</span>`;\n                status.style.opacity = 1;\n            }\n            console.error('Global Error:', msg, url, lineNo, error);\n            return false;\n        };\n        // Catch unhandled promise rejections\n        window.onunhandledrejection = function (event) {\n            const status = document.getElementById('status-bar');\n            if (status) {\n                status.innerHTML = `ERROR: <span style=\"color:#ff6b6b\">${event.reason}</span>`;\n                status.style.opacity = 1;\n            }\n            console.error('Unhandled Rejection:', event.reason);\n        };\n    <\/script>\n\n    <script type=\"importmap\">\n{\n    \"imports\": {\n        \"three\": \"https://unpkg.com/three@0.182.0/build/three.module.js\",\n        \"three/addons/\": \"https://unpkg.com/three@0.182.0/examples/jsm/\"\n    }\n}\n<\/script>\n\n    <script type=\"module\">\n        import * as THREE from 'three';\n        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';\n        import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';\n        import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';\n        import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';\n        import { AfterimagePass } from 'three/addons/postprocessing/AfterimagePass.js';\n        import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';\n        // BokehPass removed - using custom DOF shader\n        import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';\n\n        function fitPixelRatio() {\n            return Math.min(window.devicePixelRatio || 1, 1.5,\n                Math.sqrt(2_100_000 / Math.max(1, window.innerWidth * window.innerHeight)));\n        }\n\n        const CONFIG = {\n            maxParticles: 250000,\n            maxDensity: 0.14,\n            secondaryParticles: 50000,\n            initialDensity: 0.043,\n            fieldRadius: 90,\n            minZoom: 1,\n            maxZoom: 250,\n            defaultZoom: 200\n        };\n        let particleBudget = Number(window.frameElement?.getAttribute('data-particle-budget') ?? Infinity);\n        particleBudget = Number.isFinite(particleBudget) ? Math.max(0, Math.floor(particleBudget)) : Infinity;\n        // Requested number of particles across both layers; null follows the density setting.\n        let particleCount = window.frameElement?.getAttribute('data-particle-count');\n        particleCount = particleCount != null && Number.isFinite(Number(particleCount)) ? Math.max(0, Math.floor(Number(particleCount))) : null;\n\n        const STATE = {\n            field: 'Gluon (Strong)',\n            density: CONFIG.initialDensity,\n            fieldSize: 0.78,\n            particleDepth: 0,\n            particleScale: 1,\n            particleSharpness: 0,\n            sensitivity: 1.1,\n            trails: 0.66144,\n            bloom: 0.3,\n            timeScale: 1,\n            pixelRatio: fitPixelRatio(),\n            chromaticAberration: 0.004,\n            filmGrain: 0.001,\n            cameraShake: 0.65,\n            vortexStrength: 0.73,\n            pulseIntensity: 0.15,\n            anamorphicStretch: 0.1,\n            bassGateThreshold: 0.12,\n            bassGateAttack: 0.3,\n            bassGateRelease: 0.136,\n            bassGateRatio: 2.142,\n            bassGateEnabled: false,\n            // NEW EFFECTS\n            godRaysEnabled: false,\n            godRaysIntensity: 0.078,\n            godRaysDecay: 0.92,\n            dofEnabled: false,\n            dofFocus: 0.04,\n            dofFocalLength: 0.40,\n            dofBokehStrength: 0.36,\n            lensFlareEnabled: true,\n            lensFlareIntensity: 0.1,\n            particleTrailsEnabled: true,\n            particleTrailOpacity: 1,\n            nebulaEnabled: false,\n            nebulaIntensity: 0.3,\n            connectionsEnabled: true,\n            connectionThreshold: 20.0,\n            connectionOpacity: 0.75,\n            // === ENHANCEMENT PACK v2.0 ===\n            // 1. Motion Blur\n            motionBlurEnabled: true,\n            motionBlurStrength: 0.1,\n            // 2. Adaptive Quality\n            adaptiveQualityEnabled: true,\n            targetFPS: 45,\n            qualityLevel: 1,\n            // 3. Onset Detection\n            onsetSensitivity: 1,\n            onsetDecay: 0.92,\n            // 4. Audio-Reactive Camera\n            audioCameraEnabled: true,\n            audioCameraSmoothing: 0.2,\n            audioCameraIntensity: 0.3,\n            // 5. Waveform Terrain\n            waveformTerrainScale: 1.0,\n            waveformTerrainHeight: 20.0\n        };\n\n        // --- AUDIO SYSTEM ---\n        // Spectrum supplied by the host app (e.g. a native audio engine the iframe cannot hear):\n        // band levels 0..1, log-spaced from `low` to `high` Hz. It is turned into the same frequency\n        // array an analyser would give, so bands, beats, flux, onsets and the terrain all follow it.\n        const EXTERNAL = {\n            target: null, low: 40, high: 12000,\n            sampleRate: 48000, data: new Uint8Array(2048), smoothed: new Float32Array(2048), prev: new Float32Array(2048),\n            fresh() { return this.target !== null; },\n            set(bands, range) {\n                this.target = Array.isArray(bands) && bands.length ? bands.map((v) => Math.max(0, Math.min(1, Number(v) || 0))) : null;\n                if (Array.isArray(range) && range[0] > 0 && range[1] > range[0]) [this.low, this.high] = range;\n            },\n            // Host frames arrive at their own pace (often 20 Hz); easing toward them every rendered\n            // frame keeps the flux continuous, like an analyser's smoothing does.\n            fill() {\n                const bands = this.target, n = bands.length, len = this.data.length, nyquist = this.sampleRate / 2;\n                const span = Math.log(this.high / this.low);\n                for (let i = 0; i < len; i++) {\n                    const freq = Math.max(1, (i + 0.5) / len * nyquist);\n                    const pos = Math.log(freq / this.low) / span * (n - 1);\n                    let level;\n                    if (pos <= 0) level = bands[0];\n                    else if (pos >= n - 1) level = bands[n - 1] * Math.max(0, 1 - Math.log(freq / this.high) / Math.log(nyquist / this.high));\n                    else { const k = Math.floor(pos), t = pos - k; level = bands[k] * (1 - t) + bands[k + 1] * t; }\n                    this.smoothed[i] += (level - this.smoothed[i]) * 0.35;\n                    this.data[i] = Math.min(255, Math.round(this.smoothed[i] * 255));\n                }\n            }\n        };\n\n        const AUDIO = {\n            ctx: null, analyser: null, source: null, gainNode: null, data: null,\n            audioBuffer: null, isPlaying: false, isPaused: false,\n            startTime: 0, pauseTime: 0, currentTrackName: 'No Track',\n            mode: null, micStream: null,\n            bands: { subBass: 0, bass: 0, lowMid: 0, mid: 0, highMid: 0, high: 0, ultraHigh: 0 },\n            gatedBands: { subBass: 0, bass: 0, lowMid: 0, mid: 0, highMid: 0, high: 0, ultraHigh: 0 },\n            beatThreshold: 0.15, beatDecay: 0.93, beatEnergy: 0,\n            lastBeatTime: 0, beatDetected: false, peakHistory: [],\n            spectralCentroid: 0, spectralFlux: 0, prevSpectrum: null, active: false, idleCleared: false,\n            // === ENHANCEMENT: Onset Detection ===\n            onsetEnergy: 0, onsetDetected: false, onsetHistory: [], onsetThreshold: 0,\n            // === ENHANCEMENT: Waveform Data ===\n            waveformData: new Float32Array(128), waveformSmoothed: new Float32Array(128),\n            gateState: {\n                isOpen: false, envelope: 0, holdTime: 0, noiseFloor: 0.05,\n                calibrationSamples: [], isCalibrating: true, calibrationFrames: 30\n            },\n\n            init() {\n                if (this.ctx) return;\n                this.ctx = new (window.AudioContext || window.webkitAudioContext)();\n                this.analyser = this.ctx.createAnalyser();\n                this.analyser.fftSize = 4096;\n                this.analyser.smoothingTimeConstant = 0.65;\n                this.data = new Uint8Array(this.analyser.frequencyBinCount);\n                this.prevSpectrum = new Float32Array(this.analyser.frequencyBinCount);\n                this.active = true;\n            },\n\n            loadTrack(arrayBuffer, fileName) {\n                return new Promise((resolve, reject) => {\n                    this.ctx.decodeAudioData(arrayBuffer, (buffer) => {\n                        this.stopCurrentSource();\n                        this.audioBuffer = buffer;\n                        this.currentTrackName = fileName || 'Unknown';\n                        this.mode = 'file';\n                        this.pauseTime = 0;\n                        this.resetCalibration();\n                        resolve(buffer);\n                    }, reject);\n                });\n            },\n\n            play() {\n                if (!this.audioBuffer || this.mode !== 'file' || this.isPlaying) return;\n                this.source = this.ctx.createBufferSource();\n                this.source.buffer = this.audioBuffer;\n                this.source.loop = true;\n                this.source.connect(this.analyser);\n                this.analyser.connect(this.ctx.destination);\n                this.source.start(0, this.pauseTime);\n                this.startTime = this.ctx.currentTime - this.pauseTime;\n                this.isPlaying = true;\n                this.isPaused = false;\n            },\n\n            pause() {\n                if (!this.isPlaying || this.mode !== 'file') return;\n                this.pauseTime = this.getCurrentTime();\n                this.isPaused = true;\n                this.isPlaying = false;\n                if (this.source) { try { this.source.stop(); } catch (e) { } this.source.disconnect(); this.source = null; }\n            },\n\n            togglePlayPause() {\n                if (this.mode === 'mic') return false;\n                if (this.isPlaying) { this.pause(); return false; }\n                else { this.play(); return true; }\n            },\n\n            getCurrentTime() {\n                if (!this.isPlaying) return this.pauseTime;\n                if (!this.audioBuffer) return 0;\n                return (this.ctx.currentTime - this.startTime) % this.audioBuffer.duration;\n            },\n\n            getDuration() { return this.audioBuffer ? this.audioBuffer.duration : 0; },\n\n            seek(time) {\n                if (this.mode !== 'file' || !this.audioBuffer) return;\n                const wasPlaying = this.isPlaying;\n                if (wasPlaying) this.pause();\n                this.pauseTime = Math.max(0, Math.min(time, this.audioBuffer.duration));\n                if (wasPlaying) this.play();\n            },\n\n            stopCurrentSource() {\n                if (this.source) { try { this.source.stop(); this.source.disconnect(); } catch (e) { } this.source = null; }\n                if (this.gainNode) { try { this.gainNode.disconnect(); } catch (e) { } this.gainNode = null; }\n                if (this.micStream) { this.micStream.getTracks().forEach(t => t.stop()); this.micStream = null; }\n                this.isPlaying = false; this.isPaused = false; this.pauseTime = 0;\n            },\n\n            async startMic(preferredLabel = null) {\n                console.log('startMic called with preferredLabel:', preferredLabel);\n                const status = document.getElementById('status-bar');\n                if (status) status.innerHTML = 'SYSTEM: <span>REQUESTING ACCESS...</span>';\n\n                try {\n                    // Ensure context is running\n                    if (this.ctx.state === 'suspended') {\n                        console.log('Resuming AudioContext...');\n                        await this.ctx.resume();\n                    }\n\n                    // 1. Get initial stream (activates permissions so labels are visible)\n                    console.log('Requesting initial getUserMedia...');\n                    let stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n                    console.log('Initial stream obtained:', stream.id);\n\n                    // 2. Search for preferred device (loopback)\n                    let target = null;\n                    if (preferredLabel) {\n                        const devices = await navigator.mediaDevices.enumerateDevices();\n                        console.log(\"Audio Devices Found:\", devices.length, devices.map(d => `${d.label} (${d.kind})`));\n\n                        target = devices.find(d => d.kind === 'audioinput' &&\n                            d.label.toLowerCase().includes(preferredLabel.toLowerCase()));\n                    }\n\n                    if (target) {\n                        console.log(`Switching audio input to: ${target.label} [${target.deviceId}]`);\n                        stream.getTracks().forEach(t => t.stop()); // Stop generic stream\n\n                        // Request specific device - being explicit with constraints\n                        stream = await navigator.mediaDevices.getUserMedia({\n                            audio: {\n                                deviceId: { exact: target.deviceId },\n                                echoCancellation: false,\n                                noiseSuppression: false,\n                                autoGainControl: false,\n                                channelCount: 2\n                            }\n                        });\n                        this.currentTrackName = target.label;\n                    } else {\n                        if (preferredLabel) console.warn(`Preferred device '${preferredLabel}' not found. Using default.`);\n                        // Keep the initial stream\n                        this.currentTrackName = stream.getAudioTracks()[0]?.label || 'Live Microphone';\n                    }\n\n                    this.stopCurrentSource();\n                    this.micStream = stream;\n                    this.source = this.ctx.createMediaStreamSource(stream);\n                    this.gainNode = this.ctx.createGain();\n                    this.gainNode.gain.value = 3.0; // Boost loopback/mic signal before FFT \u2014 tune via sensitivity slider\n                    this.source.connect(this.gainNode);\n                    this.gainNode.connect(this.analyser);\n                    this.mode = 'mic';\n                    this.isPlaying = true;\n                    this.resetCalibration();\n\n                    if (status) status.innerHTML = 'SYSTEM: <span>LISTENING (' + (preferredLabel ? 'Loopback' : 'Mic') + ')</span>';\n                    updateUI();\n\n                    return stream;\n                } catch (e) {\n                    console.error(\"AUDIO.startMic failed:\", e);\n                    throw e;\n                }\n            },\n\n            resetCalibration() { this.gateState.isCalibrating = true; this.gateState.calibrationSamples = []; },\n\n            applyBassGate(rawValue) {\n                if (!STATE.bassGateEnabled) return rawValue;\n                const { bassGateThreshold: threshold, bassGateAttack: attack, bassGateRelease: release, bassGateRatio: ratio } = STATE;\n                if (this.gateState.isCalibrating) {\n                    this.gateState.calibrationSamples.push(rawValue);\n                    if (this.gateState.calibrationSamples.length >= this.gateState.calibrationFrames) {\n                        const sorted = [...this.gateState.calibrationSamples].sort((a, b) => a - b);\n                        this.gateState.noiseFloor = sorted.slice(0, Math.floor(sorted.length * 0.2)).reduce((a, b) => a + b, 0) / Math.floor(sorted.length * 0.2);\n                        this.gateState.isCalibrating = false;\n                    }\n                }\n                const effectiveThreshold = Math.max(threshold, this.gateState.noiseFloor * 1.5);\n                if (rawValue > effectiveThreshold) { this.gateState.isOpen = true; this.gateState.holdTime = 10; }\n                else if (rawValue < effectiveThreshold * 0.7 && this.gateState.holdTime <= 0) { this.gateState.isOpen = false; }\n                if (this.gateState.holdTime > 0) this.gateState.holdTime--;\n                this.gateState.envelope += ((this.gateState.isOpen ? 1.0 : 0.0) - this.gateState.envelope) * (this.gateState.isOpen ? attack : release);\n                let output = rawValue;\n                if (this.gateState.isOpen && rawValue > effectiveThreshold) {\n                    output = effectiveThreshold + (rawValue - effectiveThreshold) / ratio;\n                }\n                return output * this.gateState.envelope;\n            },\n\n            update() {\n                const own = this.active && this.isPlaying && this.source;\n                this.externalActive = !own && EXTERNAL.fresh();\n                if (!own && !this.externalActive) {\n                    if (!this.idleCleared) {\n                        for (const band in this.bands) this.bands[band] = this.gatedBands[band] = 0;\n                        this.spectralCentroid = this.spectralFlux = 0;\n                        this.beatDetected = this.onsetDetected = false;\n                        this.idleCleared = true;\n                    }\n                    this.beatEnergy *= this.beatDecay;\n                    this.onsetEnergy *= STATE.onsetDecay;\n                    return;\n                }\n                this.idleCleared = false;\n                let data = this.data, prevSpectrum = this.prevSpectrum, nyquist;\n                if (this.externalActive) {\n                    EXTERNAL.fill();\n                    data = EXTERNAL.data; prevSpectrum = EXTERNAL.prev; nyquist = EXTERNAL.sampleRate / 2;\n                } else {\n                    this.analyser.getByteFrequencyData(this.data);\n                    nyquist = this.ctx.sampleRate / 2;\n                }\n                const len = data.length;\n                const getFreqIndex = (freq) => Math.round(freq / nyquist * len);\n                const ranges = { subBass: [50, 120], bass: [120, 200], lowMid: [200, 450], mid: [450, 2000], highMid: [2000, 3500], high: [3500, 12000], ultraHigh: [12000, 20000] };\n                let totalEnergy = 0, weightedFreqSum = 0;\n                for (const [band, [low, high]] of Object.entries(ranges)) {\n                    const lowIdx = getFreqIndex(low), highIdx = getFreqIndex(high);\n                    let sum = 0;\n                    for (let i = lowIdx; i < highIdx && i < len; i++) {\n                        const v = data[i] / 255.0;\n                        sum += v; totalEnergy += v; weightedFreqSum += v * i;\n                    }\n                    const rawBand = sum / (highIdx - lowIdx);\n                    this.bands[band] = rawBand;\n                    this.gatedBands[band] = (band === 'subBass' || band === 'bass' || band === 'lowMid') ? this.applyBassGate(rawBand) : rawBand;\n                }\n                this.spectralCentroid = totalEnergy > 0 ? weightedFreqSum / totalEnergy / len : 0;\n                let flux = 0;\n                for (let i = 0; i < len; i++) {\n                    const current = data[i] / 255.0, diff = current - prevSpectrum[i];\n                    flux += diff > 0 ? diff * diff : 0;\n                    prevSpectrum[i] = current;\n                }\n                this.spectralFlux = Math.sqrt(flux / len);\n                const currentEnergy = this.gatedBands.bass * 0.6 + this.gatedBands.subBass * 0.4;\n                this.peakHistory.push(currentEnergy);\n                if (this.peakHistory.length > 50) this.peakHistory.shift();\n                const avgEnergy = this.peakHistory.reduce((a, b) => a + b, 0) / this.peakHistory.length;\n                const variance = this.peakHistory.reduce((a, b) => a + Math.pow(b - avgEnergy, 2), 0) / this.peakHistory.length;\n                const dynamicThreshold = avgEnergy + Math.sqrt(variance) * 1.8;\n                const now = performance.now();\n                if (currentEnergy > dynamicThreshold && currentEnergy > this.beatThreshold && now - this.lastBeatTime > 120) {\n                    this.beatDetected = true; this.beatEnergy = 1.0; this.lastBeatTime = now;\n                } else { this.beatDetected = false; }\n                this.beatEnergy *= this.beatDecay;\n\n                // === ENHANCEMENT: Improved Onset Detection ===\n                // Uses spectral flux derivative for sharper transient response\n                const onsetSens = STATE.onsetSensitivity;\n                this.onsetHistory.push(this.spectralFlux);\n                if (this.onsetHistory.length > 8) this.onsetHistory.shift();\n                const recentAvg = this.onsetHistory.slice(-4).reduce((a, b) => a + b, 0) / 4;\n                const olderAvg = this.onsetHistory.slice(0, 4).reduce((a, b) => a + b, 0) / Math.max(1, this.onsetHistory.slice(0, 4).length);\n                const onsetDelta = (recentAvg - olderAvg) * onsetSens;\n                this.onsetDetected = onsetDelta > 0.015 && now - this.lastBeatTime > 50;\n                this.onsetEnergy = this.onsetDetected ? 1.0 : this.onsetEnergy * STATE.onsetDecay;\n\n                // === ENHANCEMENT: Waveform Data for Terrain Field ===\n                const waveformBins = 128;\n                const binSize = Math.floor(len / waveformBins);\n                for (let i = 0; i < waveformBins; i++) {\n                    let sum = 0;\n                    for (let j = 0; j < binSize; j++) {\n                        sum += data[i * binSize + j] / 255.0;\n                    }\n                    const target = sum / binSize;\n                    this.waveformSmoothed[i] += (target - this.waveformSmoothed[i]) * 0.3;\n                    this.waveformData[i] = this.waveformSmoothed[i];\n                }\n            }\n        };\n\n        // --- SCENE SETUP ---\n        const scene = new THREE.Scene();\n        scene.fog = new THREE.FogExp2(0x000508, 0.005);\n        const camera = new THREE.PerspectiveCamera(55, window.innerWidth / window.innerHeight, 0.1, 800);\n        camera.position.set(0, 12, CONFIG.defaultZoom);\n        const cameraShakeOffset = new THREE.Vector3();\n        const baseCameraPos = camera.position.clone();\n        const zoomIndicator = document.getElementById('zoom-level');\n\n        const renderer = new THREE.WebGLRenderer({ powerPreference: \"high-performance\", antialias: true, alpha: true });\n        renderer.setClearColor(0x000000, 0);\n        renderer.setSize(window.innerWidth, window.innerHeight);\n        renderer.setPixelRatio(STATE.pixelRatio);\n        renderer.toneMapping = THREE.ACESFilmicToneMapping;\n        renderer.toneMappingExposure = 2.1;\n        document.body.appendChild(renderer.domElement);\n\n        const controls = new OrbitControls(camera, renderer.domElement);\n        controls.enableDamping = true;\n        controls.dampingFactor = 0.06;\n        controls.autoRotate = false;\n        controls.autoRotateSpeed = 0.3;\n        controls.minDistance = CONFIG.minZoom;\n        controls.maxDistance = CONFIG.maxZoom;\n        controls.maxPolarAngle = Math.PI * 0.85;\n        controls.minPolarAngle = Math.PI * 0.15;\n\n        controls.addEventListener('change', () => {\n            const dist = camera.position.length();\n            const zoomPercent = Math.round((1 - (dist - CONFIG.minZoom) / (CONFIG.maxZoom - CONFIG.minZoom)) * 100);\n            zoomIndicator.textContent = Math.max(0, Math.min(100, zoomPercent)) + '%';\n            baseCameraPos.copy(camera.position);\n        });\n\n        const raycaster = new THREE.Raycaster();\n        const mouse = new THREE.Vector2(9999, 9999);\n        const plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);\n        const mouseWorldPos = new THREE.Vector3();\n        let mouseVelocity = new THREE.Vector2();\n        let prevMouse = new THREE.Vector2();\n\n        window.addEventListener('mousemove', (e) => {\n            const newMouse = new THREE.Vector2((e.clientX / window.innerWidth) * 2 - 1, -(e.clientY / window.innerHeight) * 2 + 1);\n            mouseVelocity.subVectors(newMouse, prevMouse);\n            prevMouse.copy(newMouse);\n            mouse.copy(newMouse);\n            raycaster.setFromCamera(mouse, camera);\n            const target = new THREE.Vector3();\n            raycaster.ray.intersectPlane(plane, target);\n            if (target) mouseWorldPos.copy(target);\n        });\n\n        window.addEventListener('keydown', (e) => {\n            if (e.key === '+' || e.key === '=') { camera.position.multiplyScalar(0.9); controls.update(); }\n            else if (e.key === '-' || e.key === '_') { camera.position.multiplyScalar(1.1); controls.update(); }\n            else if (e.key === '0') { camera.position.normalize().multiplyScalar(CONFIG.defaultZoom); controls.update(); }\n            else if (e.key === ' ') { e.preventDefault(); togglePlayPause(); }\n            else if (e.key === 'f' || e.key === 'F') { STATE.dofEnabled = !STATE.dofEnabled; customDOFPass.enabled = STATE.dofEnabled; }\n        });\n\n        // Every field type shares one screen-fitted footprint; switching presets never reallocates particles.\n        // uFieldFill: share of the viewport the field spans; above 1.0 it runs past the edges.\n        const shapeFunction = `\nuniform float uFieldFill, uParticleDepth, uParticleScale;\nfloat particleProximity(vec3 seed) {\n    // Most points stay distant; only a small share enters the foreground.\n    return pow(seed.z, 4.0);\n}\nfloat particleTime(float time, float proximity) {\n    return time * mix(1.0, 0.25 + proximity * 1.35, uParticleDepth);\n}\nfloat particleProjection(float proximity) {\n    return 1.0 - mix(-100.0, 125.0, proximity) * uParticleDepth / ${CONFIG.defaultZoom.toFixed(1)};\n}\nvec3 shapedPosition(vec3 seed, float proximity, float time) {\n    vec2 plane = seed.xy * 2.0 - 1.0;\n    plane += vec2(sin(time * 0.16 + seed.x * 6.28), cos(time * 0.12 + seed.y * 6.28))\n        * mix(0.006, 0.045, proximity) * uParticleDepth;\n    float projection = particleProjection(proximity);\n    // Compensate the footprint for perspective, so nearby points also fill the viewport.\n    return vec3(plane * vec2(uViewportAspect, 1.0) * uViewportHalfHeight * uFieldFill * projection,\n                (seed.z - 0.5) * 12.0 + mix(-100.0, 125.0, proximity) * uParticleDepth);\n}\nfloat particleEdge(vec3 position, float proximity) {\n    vec2 extent = vec2(uViewportAspect, 1.0) * uViewportHalfHeight * uFieldFill * 1.05 * particleProjection(proximity);\n    return 1.0 - smoothstep(0.92, 1.05, max(abs(position.x) / extent.x, abs(position.y) / extent.y));\n}`;\n\n        const particleLight = `\nuniform float uParticleSharpness;\nvec4 crispParticle(vec3 tint, float radius, float alpha) {\n    float core = 1.0 - smoothstep(0.05, 0.2, radius);\n    float halo = exp(-radius * radius * 45.0) * 0.22;\n    float edge = 1.0 - smoothstep(0.42, 0.5, radius);\n    return vec4(mix(tint, vec3(1.0), core * 0.65), clamp(alpha * (core + halo) * edge, 0.0, 1.0));\n}`;\n\n        // --- PARTICLE VERTEX SHADER ---\n        const vertexShader = `\nuniform float uTime, uPixelRatio, uSizeBase, uNoiseScale, uCurlStrength;\nuniform float uViewportAspect, uViewportHalfHeight;\nuniform vec3 uColor1, uColor2, uColor3;\nuniform float uSubBass, uBass, uLowMid, uMid, uHighMid, uHigh, uUltraHigh;\nuniform float uBeatEnergy, uSpectralCentroid, uSpectralFlux;\nuniform float uOnsetEnergy, uTerrainMode, uTerrainHeight;\nuniform float uVortexStrength, uPulseIntensity, uZoomFactor;\nuniform vec3 uMousePos;\nuniform vec2 uMouseVelocity;\nattribute vec3 aRandom;\nattribute float aPhase, aLayer;\nvarying vec3 vColor;\nvarying float vAlpha, vEnergy, vDepth, vRimLight, vGlint;\n\nvec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }\nvec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }\n\nfloat snoise(vec3 v) {\n    const vec2 C = vec2(1.0/6.0, 1.0/3.0);\n    const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);\n    vec3 i = floor(v + dot(v, C.yyy));\n    vec3 x0 = v - i + dot(i, C.xxx);\n    vec3 g = step(x0.yzx, x0.xyz);\n    vec3 l = 1.0 - g;\n    vec3 i1 = min(g.xyz, l.zxy);\n    vec3 i2 = max(g.xyz, l.zxy);\n    vec3 x1 = x0 - i1 + C.xxx;\n    vec3 x2 = x0 - i2 + C.yyy;\n    vec3 x3 = x0 - D.yyy;\n    i = mod289(i);\n    vec4 p = permute(permute(permute(i.z + vec4(0.0, i1.z, i2.z, 1.0)) + i.y + vec4(0.0, i1.y, i2.y, 1.0)) + i.x + vec4(0.0, i1.x, i2.x, 1.0));\n    float n_ = 0.142857142857;\n    vec3 ns = n_ * D.wyz - D.xzx;\n    vec4 j = p - 49.0 * floor(p * ns.z * ns.z);\n    vec4 x_ = floor(j * ns.z);\n    vec4 y_ = floor(j - 7.0 * x_);\n    vec4 x = x_ * ns.x + ns.yyyy;\n    vec4 y = y_ * ns.x + ns.yyyy;\n    vec4 h = 1.0 - abs(x) - abs(y);\n    vec4 b0 = vec4(x.xy, y.xy);\n    vec4 b1 = vec4(x.zw, y.zw);\n    vec4 s0 = floor(b0) * 2.0 + 1.0;\n    vec4 s1 = floor(b1) * 2.0 + 1.0;\n    vec4 sh = -step(h, vec4(0.0));\n    vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;\n    vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;\n    vec3 p0 = vec3(a0.xy, h.x);\n    vec3 p1 = vec3(a0.zw, h.y);\n    vec3 p2 = vec3(a1.xy, h.z);\n    vec3 p3 = vec3(a1.zw, h.w);\n    vec4 norm = taylorInvSqrt(vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));\n    p0 *= norm.x; p1 *= norm.y; p2 *= norm.z; p3 *= norm.w;\n    vec4 m = max(0.6 - vec4(dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3)), 0.0);\n    m = m * m;\n    return 42.0 * dot(m * m, vec4(dot(p0, x0), dot(p1, x1), dot(p2, x2), dot(p3, x3)));\n}\n\nvec3 curl(float x, float y, float z) {\n    float eps = 0.08;\n    return vec3(\n        snoise(vec3(x, y+eps, z)) - snoise(vec3(x, y-eps, z)),\n        snoise(vec3(x, y, z+eps)) - snoise(vec3(x, y, z-eps)),\n        snoise(vec3(x+eps, y, z)) - snoise(vec3(x-eps, y, z))\n    );\n}\n\n${shapeFunction}\n\nvoid main() {\n    float proximity = particleProximity(aRandom);\n    float depthTime = particleTime(uTime, proximity);\n    float t = depthTime * (1.0 + uMid * 0.5);\n    vec3 noisePos = position * 0.035 + aRandom;\n    float layerMod = 1.0 + aLayer * 0.5;\n\n    vec3 flow1 = curl(noisePos.x * uNoiseScale + t*0.1, noisePos.y * uNoiseScale, noisePos.z * uNoiseScale);\n    vec3 flow2 = curl(noisePos.x * uNoiseScale * 2.2 + t*0.07, noisePos.y * uNoiseScale * 2.2 + t*0.08, noisePos.z * uNoiseScale * 2.2) * 0.4;\n    vec3 flow3 = curl(noisePos.x * uNoiseScale * 0.5 - t*0.05, noisePos.y * uNoiseScale * 0.5, noisePos.z * uNoiseScale * 0.5) * 0.6 * uLowMid;\n    vec3 flow = flow1 + flow2 * uHigh + flow3;\n\n    vec3 newPos = shapedPosition(aRandom, proximity, depthTime) + (flow * uCurlStrength * layerMod * (1.0 + uSpectralFlux * 2.5));\n\n    float vortexAngle = uVortexStrength * uBass * 0.45 * (0.75 + aRandom.z * 0.5);\n    float cosA = cos(vortexAngle), sinA = sin(vortexAngle);\n    vec2 rotated = vec2(newPos.x * cosA - newPos.z * sinA, newPos.x * sinA + newPos.z * cosA);\n    newPos.xz = mix(newPos.xz, rotated, uBass * uVortexStrength);\n\n    float yVortex = sin(newPos.y * 0.1 + depthTime) * uMid * uVortexStrength * 2.0;\n    newPos.x += cos(newPos.y * 0.15) * yVortex;\n    newPos.z += sin(newPos.y * 0.15) * yVortex;\n\n    float distToMouse = distance(newPos, uMousePos);\n    float repulsion = smoothstep(25.0, 0.0, distToMouse);\n    vec3 repelDir = normalize(newPos - uMousePos + vec3(0.001));\n    newPos += repelDir * repulsion * (12.0 + length(uMouseVelocity) * 360.0);\n\n    // Audio changes depth throughout the plane, without evacuating its centre.\n    float beatWave = sin(aRandom.x * 12.0 + aRandom.y * 7.0 - uTime * 6.0);\n    float bassDepth = (beatWave * uBeatEnergy * uPulseIntensity * 3.5\n        + sin(uTime * 1.8 + aPhase) * uSubBass * 4.0\n        + smoothstep(0.3, 0.8, uBass) * 6.0\n        + uOnsetEnergy * 8.0) * (0.6 + aRandom.z * 0.4);\n    newPos.z += bassDepth;\n    float fieldWave = sin(aRandom.x * 11.0 - depthTime * 0.8 + sin(aRandom.y * 7.0 + depthTime * 0.35));\n    newPos.z += fieldWave * (1.8 + uBass * 2.4 + uBeatEnergy * 1.6);\n\n    // Waveform relief moves toward the camera while retaining the shared rectangular footprint.\n    if (uTerrainMode > 0.5) {\n        float freqBin = aRandom.x;\n        float waveHeight = uBass * sin(freqBin * 6.28 * 8.0 + uTime * 3.0) * 0.5;\n        waveHeight += uMid * sin(freqBin * 6.28 * 16.0 + uTime * 5.0) * 0.3;\n        waveHeight += uHigh * sin(freqBin * 6.28 * 32.0 + uTime * 8.0) * 0.2;\n        waveHeight *= (1.0 + uSpectralFlux * 3.0);\n        newPos.z += waveHeight * uTerrainHeight;\n        newPos.z += sin(aRandom.y * 6.28 * 4.0 + uTime) * uSubBass * 5.0;\n    }\n\n    vec4 mvPosition = modelViewMatrix * vec4(newPos, 1.0);\n    gl_Position = projectionMatrix * mvPosition;\n\n    float size = uSizeBase * (0.85 + uBass * 0.5 + uBeatEnergy * 0.5) * (1.0 + (uZoomFactor - 1.0) * 0.3);\n    size *= 1.0 + sin(uTime * 10.0 + aPhase * 6.28) * uHigh * 0.35;\n    vGlint = smoothstep(mix(0.985, 0.993, uParticleDepth), mix(0.998, 0.999, uParticleDepth), aRandom.z) * (0.7 + 0.3 * sin(uTime * 3.0 + aPhase * 6.28)) * (0.75 + uHigh * 0.15 + uOnsetEnergy * 0.1);\n    size *= 0.85 + vGlint * mix(2.1, 0.7, uParticleDepth);\n    size = max(size * uPixelRatio * (90.0 / -mvPosition.z) * layerMod, vGlint * 4.5 * uPixelRatio);\n    gl_PointSize = clamp(size * uParticleScale * mix(1.0, 0.7 + proximity * 1.8, uParticleDepth), 0.5, 120.0);\n\n    float colorMix = smoothstep(0.0, 2.8, length(flow) + uHighMid * 3.0);\n    vec3 baseColor = mix(uColor1, uColor2, colorMix);\n    baseColor = mix(baseColor, uColor3, uSpectralCentroid * uHigh * 2.5);\n\n    float energyLevel = uBeatEnergy * 0.35 + repulsion * uMid * 2.0 + uSpectralFlux * 0.8;\n    vColor = mix(baseColor, vec3(1.0), energyLevel * 0.4);\n    vColor += vec3(0.08, 0.04, 0.12) * uUltraHigh * 2.5;\n\n    vRimLight = pow(1.0 - max(0.0, dot(normalize(-mvPosition.xyz), normalize(newPos))), 3.0);\n    vEnergy = energyLevel;\n    vDepth = mix(clamp(-mvPosition.z / 120.0, 0.0, 1.0), 1.0 - proximity, uParticleDepth);\n\n    float alpha = particleEdge(newPos, proximity);\n    float sparkle = 1.0 + (aRandom.x > 0.8 ? sin(uTime * 20.0 + aRandom.y * 150.0) * uHigh * 2.5 : 0.0);\n    vAlpha = alpha * sparkle * (0.7 + uMid * 0.35) * layerMod * mix(1.0, 0.5 + proximity * 0.5, uParticleDepth);\n}`;\n\n        const fragmentShader = `\nvarying vec3 vColor;\nvarying float vAlpha, vEnergy, vDepth, vRimLight, vGlint;\n\n${particleLight}\n\nvoid main() {\n    vec2 xy = gl_PointCoord.xy - vec2(0.5);\n    float r = length(xy);\n    if(r > 0.5) discard;\n\n    float core = smoothstep(0.16 - vEnergy * 0.04, 0.12 - vEnergy * 0.04, r);\n    float glow = exp(-r * r * (20.0 - vEnergy * 10.0));\n    float halo = exp(-r * r * 5.0) * 0.35 + exp(-r * r * 2.5) * 0.15;\n    float glint = vGlint * (1.0 - smoothstep(0.012, 0.045, min(abs(xy.x), abs(xy.y)))) * (1.0 - smoothstep(0.16, 0.48, r));\n\n    vec3 finalColor = mix(vColor, vec3(1.0), core * 0.58 + glint * 0.38);\n    finalColor += vColor * vRimLight * 0.1;\n    finalColor = mix(finalColor, vec3(0.02, 0.03, 0.05), vDepth * 0.4);\n\n    float finalAlpha = clamp(vAlpha * (glow * 0.85 + halo * 0.55 + pow(1.0 - r * 2.0, 2.5) * 0.55 + glint * 0.9), 0.0, 1.0);\n    gl_FragColor = mix(vec4(finalColor, finalAlpha), crispParticle(vColor, r, vAlpha), uParticleSharpness);\n}`;\n\n        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 POST-PROCESSING SHADERS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\n        // GOD RAYS SHADER (Radial Light Scattering)\n        const GodRaysShader = {\n            uniforms: {\n                tDiffuse: { value: null },\n                uCenter: { value: new THREE.Vector2(0.5, 0.5) },\n                uIntensity: { value: 0.35 },\n                uDecay: { value: 0.94 },\n                uBeatEnergy: { value: 0.0 }\n            },\n            vertexShader: `varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`,\n            fragmentShader: `\n        uniform sampler2D tDiffuse;\n        uniform vec2 uCenter;\n        uniform float uIntensity, uDecay, uBeatEnergy;\n        varying vec2 vUv;\n\n        void main() {\n            vec4 color = texture2D(tDiffuse, vUv);\n            vec2 dir = vUv - uCenter;\n            float dist = length(dir);\n            dir = normalize(dir);\n\n            vec3 rays = vec3(0.0);\n            float decay = 1.0;\n\n            for(int i = 0; i < 32; i++) {\n                float t = float(i) / 32.0;\n                vec2 samplePos = vUv - dir * t * 0.15 * (1.0 + uBeatEnergy);\n                vec4 s = texture2D(tDiffuse, samplePos);\n                float lum = dot(s.rgb, vec3(0.3, 0.59, 0.11));\n                rays += s.rgb * decay * step(0.35, lum);\n                decay *= uDecay;\n            }\n            rays /= 16.0;\n            rays *= (1.0 - smoothstep(0.3, 0.9, dist));\n\n            gl_FragColor = vec4(color.rgb + rays * uIntensity * (1.0 + uBeatEnergy * 0.8), color.a);\n        }`\n        };\n\n        // LENS FLARE POST-PROCESS SHADER (Cinematic)\n        const LensFlareShader = {\n            uniforms: {\n                tDiffuse: { value: null },\n                uIntensity: { value: 1.0 },\n                uBeatEnergy: { value: 0.0 },\n                uTime: { value: 0.0 },\n                uTint: { value: new THREE.Color(0.6, 0.7, 1.0) }\n            },\n            vertexShader: `varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`,\n            fragmentShader: `\n        uniform sampler2D tDiffuse;\n        uniform float uIntensity, uBeatEnergy, uTime;\n        uniform vec3 uTint;\n        varying vec2 vUv;\n\n        float sdHex(vec2 p) {\n            p = abs(p);\n            return max(p.x * 0.866 + p.y * 0.5, p.y) - 1.0;\n        }\n\n        void main() {\n            vec4 color = texture2D(tDiffuse, vUv);\n            vec2 center = vec2(0.5);\n            vec2 toCenter = center - vUv;\n            float dist = length(toCenter);\n            vec2 dir = normalize(toCenter + 0.0001);\n\n            vec3 flare = vec3(0.0);\n\n            // Sample bright areas for flare source\n            float brightness = dot(color.rgb, vec3(0.299, 0.587, 0.114));\n            float threshold = smoothstep(0.6, 0.9, brightness);\n\n            // Anamorphic horizontal streak\n            float streak = 0.0;\n            for(float i = -8.0; i <= 8.0; i += 1.0) {\n                vec2 streakUV = vUv + vec2(i * 0.012, 0.0);\n                vec4 streakSample = texture2D(tDiffuse, streakUV);\n                float streakBright = dot(streakSample.rgb, vec3(0.299, 0.587, 0.114));\n                float falloff = 1.0 - abs(i) / 10.0;\n                streak += smoothstep(0.7, 1.0, streakBright) * falloff * falloff;\n            }\n            flare += uTint * streak * 0.08;\n\n            // Subtle ghosts (reflections through lens elements)\n            for(int i = 1; i <= 3; i++) {\n                float scale = 1.0 - float(i) * 0.25;\n                vec2 ghostUV = center + (center - vUv) * scale * 0.8;\n                if(ghostUV.x > 0.0 && ghostUV.x < 1.0 && ghostUV.y > 0.0 && ghostUV.y < 1.0) {\n                    vec4 ghostSample = texture2D(tDiffuse, ghostUV);\n                    float ghostBright = dot(ghostSample.rgb, vec3(0.299, 0.587, 0.114));\n                    float ghostAlpha = smoothstep(0.5, 0.8, ghostBright) * (0.25 / float(i));\n                    vec3 ghostTint = mix(vec3(1.0), uTint, 0.6) * (1.0 - float(i) * 0.2);\n                    flare += ghostSample.rgb * ghostTint * ghostAlpha;\n                }\n            }\n\n            // Soft circular halo around bright center\n            float halo = smoothstep(0.25, 0.15, abs(dist - 0.2)) * threshold * 0.25;\n            flare += uTint * 0.85 * halo;\n\n            // Subtle vignette-edge glow\n            float edgeGlow = smoothstep(0.5, 0.7, dist) * (1.0 - smoothstep(0.7, 0.85, dist));\n            flare += uTint * 0.55 * edgeGlow * brightness * 0.15;\n\n            gl_FragColor = vec4(color.rgb + flare * uIntensity * (1.0 + uBeatEnergy * 0.3), color.a);\n        }`\n        };\n\n        // ANAMORPHIC FLARE SHADER\n        const AnamorphicShader = {\n            uniforms: {\n                tDiffuse: { value: null },\n                uStretch: { value: 0.1 },\n                uThreshold: { value: 0.7 },\n                uIntensity: { value: 0.4 },\n                uTint: { value: new THREE.Color(0.6, 0.8, 1.0) }\n            },\n            vertexShader: `varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`,\n            fragmentShader: `\n        uniform sampler2D tDiffuse;\n        uniform float uStretch, uThreshold, uIntensity;\n        uniform vec3 uTint;\n        varying vec2 vUv;\n        void main() {\n            vec4 color = texture2D(tDiffuse, vUv);\n            vec3 streak = vec3(0.0);\n            for(float i = -15.0; i <= 15.0; i++) {\n                vec4 s = texture2D(tDiffuse, vUv + vec2(i * uStretch * 0.01, 0.0));\n                float bright = dot(s.rgb, vec3(0.299, 0.587, 0.114));\n                if(bright > uThreshold) {\n                    float w = 1.0 - abs(i) / 15.0;\n                    streak += s.rgb * w * w;\n                }\n            }\n            gl_FragColor = vec4(color.rgb + streak / 7.5 * uTint * uIntensity, color.a);\n        }`\n        };\n\n        // CHROMATIC ABERRATION SHADER\n        const ChromaticShader = {\n            uniforms: {\n                tDiffuse: { value: null },\n                uIntensity: { value: 0.004 },\n                uBeatEnergy: { value: 0.0 }\n            },\n            vertexShader: `varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`,\n            fragmentShader: `\n        uniform sampler2D tDiffuse;\n        uniform float uIntensity, uBeatEnergy;\n        varying vec2 vUv;\n        void main() {\n            vec2 dir = vUv - vec2(0.5);\n            float dist = length(dir);\n            vec2 offset = dir * dist * uIntensity * (1.0 + uBeatEnergy * 1.5);\n            gl_FragColor = vec4(\n                texture2D(tDiffuse, vUv + offset * 1.2).r,\n                texture2D(tDiffuse, vUv).g,\n                texture2D(tDiffuse, vUv - offset * 1.2).b,\n                texture2D(tDiffuse, vUv).a\n            );\n        }`\n        };\n\n        // FILM GRAIN SHADER\n        const GrainShader = {\n            uniforms: {\n                tDiffuse: { value: null },\n                uTime: { value: 0.0 },\n                uIntensity: { value: 0.0 }\n            },\n            vertexShader: `varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`,\n            fragmentShader: `\n        uniform sampler2D tDiffuse;\n        uniform float uTime, uIntensity;\n        varying vec2 vUv;\n        float rand(vec2 co) { return fract(sin(dot(co, vec2(12.9898,78.233))) * 43758.5453); }\n        void main() {\n            vec4 color = texture2D(tDiffuse, vUv);\n            float grain = (rand(vUv + fract(uTime)) * 2.0 - 1.0) * uIntensity;\n            gl_FragColor = vec4(color.rgb + grain * (1.0 - dot(color.rgb, vec3(0.299, 0.587, 0.114)) * 0.5), color.a);\n        }`\n        };\n\n        // CUSTOM DEPTH OF FIELD SHADER (Radial + Edge blur)\n        const CustomDOFShader = {\n            uniforms: {\n                tDiffuse: { value: null },\n                uFocus: { value: 0.05 },\n                uFocalLength: { value: 0.25 },\n                uBokehStrength: { value: 0.5 },\n                uResolution: { value: new THREE.Vector2() },\n                uBeatEnergy: { value: 0.0 }\n            },\n            vertexShader: `\n        varying vec2 vUv;\n        void main() {\n            vUv = uv;\n            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n        }\n    `,\n            fragmentShader: `\n        uniform sampler2D tDiffuse;\n        uniform float uFocus;\n        uniform float uFocalLength;\n        uniform float uBokehStrength;\n        uniform vec2 uResolution;\n        uniform float uBeatEnergy;\n        varying vec2 vUv;\n\n        void main() {\n            vec2 center = vec2(0.5);\n            float dist = length(vUv - center);\n\n            // Focus ring - sharp in a ring around center, blurry inside and outside\n            float focusRing = abs(dist - uFocus);\n            float blur = smoothstep(0.0, uFocalLength, focusRing) * uBokehStrength;\n\n            vec3 color = vec3(0.0);\n            float total = 0.0;\n            vec2 texel = 1.0 / uResolution;\n\n            if(blur < 0.01) {\n                color = texture2D(tDiffuse, vUv).rgb;\n                total = 1.0;\n            } else {\n                // Golden angle spiral sampling\n                const float GOLDEN_ANGLE = 2.39996323;\n                const int SAMPLES = 24;\n                float radius = blur * 20.0 * (1.0 + uBeatEnergy * 0.1);\n\n                for(int i = 0; i < SAMPLES; i++) {\n                    float angle = float(i) * GOLDEN_ANGLE;\n                    float r = sqrt(float(i) / float(SAMPLES)) * radius;\n                    vec2 offset = vec2(cos(angle), sin(angle)) * r * texel;\n                    vec3 s = texture2D(tDiffuse, vUv + offset).rgb;\n\n                    // Subtle highlight boost\n                    float lum = dot(s, vec3(0.299, 0.587, 0.114));\n                    s *= 1.0 + smoothstep(0.7, 1.0, lum) * blur * 0.3;\n\n                    color += s;\n                    total += 1.0;\n                }\n            }\n\n            gl_FragColor = vec4(color / total, texture2D(tDiffuse, vUv).a);\n        }\n    `\n        };\n\n        // VIGNETTE + GLOW SHADER\n        const VignetteShader = {\n            uniforms: {\n                tDiffuse: { value: null },\n                uBeatEnergy: { value: 0.0 }\n            },\n            vertexShader: `varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`,\n            fragmentShader: `\n        uniform sampler2D tDiffuse;\n        uniform float uBeatEnergy;\n        varying vec2 vUv;\n        void main() {\n            vec4 color = texture2D(tDiffuse, vUv);\n            vec2 uv = vUv * (1.0 - vUv.yx);\n            float vig = pow(uv.x * uv.y * 15.0, 0.38 * (1.0 - uBeatEnergy * 0.15));\n            float lum = dot(color.rgb, vec3(0.299, 0.587, 0.114));\n            float glow = smoothstep(0.5, 0.9, lum) * 0.1 * (1.0 + uBeatEnergy * 0.5);\n            gl_FragColor = vec4(color.rgb * vig * (1.0 + glow), color.a);\n        }`\n        };\n\n        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 GEOMETRY \u2550\u2550\u2550\u2550\u2550\u2550\u2550\n        const geometry = new THREE.BufferGeometry();\n        const mainCapacity = Math.ceil(CONFIG.maxParticles * CONFIG.maxDensity);\n        const pos = new Float32Array(mainCapacity * 3);\n        const rnd = new Float32Array(mainCapacity * 3);\n        const phase = new Float32Array(mainCapacity);\n        const layer = new Float32Array(mainCapacity);\n        const vec = new THREE.Vector3();\n\n        for (let i = 0; i < mainCapacity; i++) {\n            vec.setFromSphericalCoords(\n                CONFIG.fieldRadius * Math.pow(Math.random(), 0.33),\n                Math.acos(2 * Math.random() - 1),\n                Math.random() * Math.PI * 2\n            );\n            pos[i * 3] = vec.x;\n            pos[i * 3 + 1] = vec.y;\n            pos[i * 3 + 2] = vec.z;\n            rnd[i * 3] = Math.random();\n            rnd[i * 3 + 1] = Math.random();\n            rnd[i * 3 + 2] = Math.random();\n            phase[i] = Math.random() * Math.PI * 2;\n        }\n\n        // Secondary particles now use separate instanced system below\n\n        geometry.setAttribute('position', new THREE.BufferAttribute(pos, 3));\n        geometry.setAttribute('aRandom', new THREE.BufferAttribute(rnd, 3));\n        geometry.setAttribute('aPhase', new THREE.BufferAttribute(phase, 1));\n        geometry.setAttribute('aLayer', new THREE.BufferAttribute(layer, 1));\n        geometry.setDrawRange(0, Math.floor(CONFIG.maxParticles * STATE.density));\n\n        const FIELD_TYPES = {\n            'Photon (EM)': { c1: '#00f2ff', c2: '#0051ff', c3: '#ffffff', s: 1.0, curl: 1.0, sz: 3.0, sc1: '#66d9ff', sc2: '#99eeff' },\n            'Gluon (Strong)': { c1: '#ff0055', c2: '#7000ff', c3: '#ff8800', s: 2.5, curl: 2.4, sz: 3.4, sc1: '#cc66ff', sc2: '#ff6699' },\n            'Higgs (Mass)': { c1: '#ffae00', c2: '#ff4800', c3: '#ffff00', s: 0.6, curl: 0.3, sz: 4.0, sc1: '#ffcc66', sc2: '#ffdd99' },\n            'Gravity': { c1: '#ffffff', c2: '#4466ff', c3: '#8844ff', s: 0.75, curl: 0.18, sz: 2.8, sc1: '#aabbff', sc2: '#ccaaff' },\n            'Dark Energy': { c1: '#1a0033', c2: '#6600ff', c3: '#ff00ff', s: 1.9, curl: 1.6, sz: 3.1, sc1: '#9933ff', sc2: '#cc66ff' },\n            'Neutrino': { c1: '#00ff88', c2: '#00ffcc', c3: '#88ffff', s: 3.0, curl: 3.0, sz: 2.6, sc1: '#66ffbb', sc2: '#99ffdd' },\n            // === ENHANCEMENT: Waveform Terrain Field ===\n            'Waveform Terrain': { c1: '#ff3366', c2: '#33ff99', c3: '#6633ff', s: 0.4, curl: 0.15, sz: 2.4, sc1: '#ff6699', sc2: '#66ffcc', terrain: true }\n        };\n\n        // === ENHANCEMENT: Adaptive Quality System ===\n        const QUALITY_SYSTEM = {\n            frameCount: 0,\n            frameTimes: [],\n            lastAdjustTime: 0,\n            currentFPS: 60,\n\n            update(deltaTime) {\n                this.frameCount++;\n                this.frameTimes.push(deltaTime);\n                if (this.frameTimes.length > 30) this.frameTimes.shift();\n\n                if (this.frameCount % 30 === 0) {\n                    const avgDelta = this.frameTimes.reduce((a, b) => a + b, 0) / this.frameTimes.length;\n                    this.currentFPS = 1000 / avgDelta;\n\n                    if (STATE.adaptiveQualityEnabled && performance.now() - this.lastAdjustTime > 1000) {\n                        if (this.currentFPS < STATE.targetFPS - 10 && STATE.qualityLevel > 0.3) {\n                            STATE.qualityLevel = Math.max(0.3, STATE.qualityLevel - (this.currentFPS < STATE.targetFPS * 0.6 ? 0.2 : 0.1));\n                            this.applyQuality();\n                            this.lastAdjustTime = performance.now();\n                        } else if (this.currentFPS > STATE.targetFPS + 5 && STATE.qualityLevel < 1.0) {\n                            STATE.qualityLevel = Math.min(1.0, STATE.qualityLevel + 0.05);\n                            this.applyQuality();\n                            this.lastAdjustTime = performance.now();\n                        }\n                    }\n                }\n            },\n\n            applyQuality() {\n                const q = STATE.qualityLevel;\n                const pixelRatio = Math.min(STATE.pixelRatio, Math.max(0.35, STATE.pixelRatio * q));\n                const requestedMain = Math.floor(CONFIG.maxParticles * Math.min(STATE.density, CONFIG.maxDensity));\n                const densityTotal = requestedMain + CONFIG.secondaryParticles;\n                const requestedTotal = particleCount === null ? densityTotal : Math.min(particleCount, mainCapacity + CONFIG.secondaryParticles);\n                const visibleParticles = Math.floor(Math.min(requestedTotal, particleBudget) * q);\n                // Both layers keep the density's mix; whatever one layer cannot hold goes to the other.\n                let mainCount = Math.min(mainCapacity, Math.round(visibleParticles * requestedMain / densityTotal));\n                mainCount = Math.min(mainCapacity, Math.max(mainCount, visibleParticles - CONFIG.secondaryParticles));\n                geometry.setDrawRange(0, mainCount);\n                secondaryGeometry.instanceCount = visibleParticles - mainCount;\n                if (renderer.getPixelRatio() !== pixelRatio) {\n                    renderer.setPixelRatio(pixelRatio);\n                    composer.setPixelRatio(pixelRatio);\n                }\n                material.uniforms.uPixelRatio.value = pixelRatio;\n                secondaryMaterial.uniforms.uPixelRatio.value = pixelRatio;\n            }\n        };\n\n        // === ENHANCEMENT: Audio-Reactive Camera System ===\n        const AUDIO_CAMERA = {\n            targetOffset: new THREE.Vector3(),\n            currentOffset: new THREE.Vector3(),\n            targetFOV: 55,\n            baseFOV: 55,\n            breathPhase: 0,\n\n            update(deltaTime) {\n                if (!STATE.audioCameraEnabled || !(AUDIO.active || AUDIO.externalActive)) return;\n\n                const bass = AUDIO.gatedBands.bass;\n                const mid = AUDIO.gatedBands.mid;\n                const high = AUDIO.gatedBands.high;\n                const intensity = STATE.audioCameraIntensity;\n                const smooth = STATE.audioCameraSmoothing;\n\n                // Bass-driven zoom pulse\n                this.targetFOV = this.baseFOV - bass * 8 * intensity + AUDIO.beatEnergy * 5 * intensity;\n                camera.fov += (this.targetFOV - camera.fov) * smooth;\n                camera.updateProjectionMatrix();\n\n                // Subtle sway based on mid frequencies\n                this.breathPhase += deltaTime * 0.001 * (1 + mid * 2);\n                this.targetOffset.x = Math.sin(this.breathPhase * 0.7) * mid * 3 * intensity;\n                this.targetOffset.y = Math.cos(this.breathPhase * 0.5) * high * 2 * intensity;\n                this.targetOffset.z = Math.sin(this.breathPhase * 0.3) * bass * 4 * intensity;\n\n                // Smooth interpolation\n                this.currentOffset.lerp(this.targetOffset, smooth);\n\n                // Apply onset punch\n                if (AUDIO.onsetDetected) {\n                    this.currentOffset.z -= AUDIO.onsetEnergy * 2 * intensity;\n                }\n            }\n        };\n\n        const def = FIELD_TYPES[STATE.field];\n        // Both particle layers share the same controls and light profile.\n        const particleUniforms = {\n            uParticleDepth: { value: STATE.particleDepth },\n            uParticleScale: { value: STATE.particleScale },\n            uParticleSharpness: { value: STATE.particleSharpness }\n        };\n        const material = new THREE.ShaderMaterial({\n            vertexShader, fragmentShader,\n            uniforms: {\n                ...particleUniforms,\n                uTime: { value: 0 },\n                uPixelRatio: { value: STATE.pixelRatio },\n                uSizeBase: { value: def.sz },\n                uNoiseScale: { value: def.s },\n                uCurlStrength: { value: def.curl },\n                uViewportAspect: { value: window.innerWidth / window.innerHeight },\n                uViewportHalfHeight: { value: Math.tan(camera.fov * Math.PI / 360) * CONFIG.defaultZoom },\n                uFieldFill: { value: STATE.fieldSize },\n                uColor1: { value: new THREE.Color(def.c1) },\n                uColor2: { value: new THREE.Color(def.c2) },\n                uColor3: { value: new THREE.Color(def.c3) },\n                uSubBass: { value: 0 }, uBass: { value: 0 }, uLowMid: { value: 0 },\n                uMid: { value: 0 }, uHighMid: { value: 0 }, uHigh: { value: 0 }, uUltraHigh: { value: 0 },\n                uBeatEnergy: { value: 0 }, uSpectralCentroid: { value: 0 }, uSpectralFlux: { value: 0 },\n                uOnsetEnergy: { value: 0 }, uTerrainMode: { value: 0 }, uTerrainHeight: { value: 15.0 },\n                uVortexStrength: { value: STATE.vortexStrength },\n                uPulseIntensity: { value: STATE.pulseIntensity },\n                uZoomFactor: { value: 1.0 },\n                uMousePos: { value: new THREE.Vector3(999, 999, 999) },\n                uMouseVelocity: { value: new THREE.Vector2(0, 0) }\n            },\n            transparent: true, depthWrite: false, blending: THREE.AdditiveBlending\n        });\n\n        const points = new THREE.Points(geometry, material);\n        scene.add(points);\n\n        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 INSTANCED SECONDARY PARTICLES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\n        const secondaryVertexShader = `\nuniform float uTime, uPixelRatio;\nuniform float uViewportAspect, uViewportHalfHeight;\nuniform float uSubBass, uBass, uLowMid, uMid, uHighMid, uHigh, uUltraHigh;\nuniform float uBeatEnergy, uSpectralCentroid, uSpectralFlux, uOnsetEnergy;\nuniform vec3 uColor1, uColor2;\nuniform float uVortexStrength;\n\nattribute vec3 instancePosition;\nattribute vec3 instanceRandom;\nattribute float instancePhase;\n\nvarying vec3 vColor;\nvarying float vAlpha;\nvarying float vEnergy;\nvarying float vDepth;\n\nvec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }\nvec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }\n\nfloat snoise(vec3 v) {\n    const vec2 C = vec2(1.0/6.0, 1.0/3.0);\n    const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);\n    vec3 i = floor(v + dot(v, C.yyy));\n    vec3 x0 = v - i + dot(i, C.xxx);\n    vec3 g = step(x0.yzx, x0.xyz);\n    vec3 l = 1.0 - g;\n    vec3 i1 = min(g.xyz, l.zxy);\n    vec3 i2 = max(g.xyz, l.zxy);\n    vec3 x1 = x0 - i1 + C.xxx;\n    vec3 x2 = x0 - i2 + C.yyy;\n    vec3 x3 = x0 - D.yyy;\n    i = mod289(i);\n    vec4 p = permute(permute(permute(i.z + vec4(0.0, i1.z, i2.z, 1.0)) + i.y + vec4(0.0, i1.y, i2.y, 1.0)) + i.x + vec4(0.0, i1.x, i2.x, 1.0));\n    float n_ = 0.142857142857;\n    vec3 ns = n_ * D.wyz - D.xzx;\n    vec4 j = p - 49.0 * floor(p * ns.z * ns.z);\n    vec4 x_ = floor(j * ns.z);\n    vec4 y_ = floor(j - 7.0 * x_);\n    vec4 x = x_ * ns.x + ns.yyyy;\n    vec4 y = y_ * ns.x + ns.yyyy;\n    vec4 h = 1.0 - abs(x) - abs(y);\n    vec4 b0 = vec4(x.xy, y.xy);\n    vec4 b1 = vec4(x.zw, y.zw);\n    vec4 s0 = floor(b0) * 2.0 + 1.0;\n    vec4 s1 = floor(b1) * 2.0 + 1.0;\n    vec4 sh = -step(h, vec4(0.0));\n    vec4 a0 = b0.xzyw + s0.xzyw * sh.xxyy;\n    vec4 a1 = b1.xzyw + s1.xzyw * sh.zzww;\n    vec3 p0 = vec3(a0.xy, h.x);\n    vec3 p1 = vec3(a0.zw, h.y);\n    vec3 p2 = vec3(a1.xy, h.z);\n    vec3 p3 = vec3(a1.zw, h.w);\n    vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2,p2), dot(p3,p3)));\n    p0 *= norm.x; p1 *= norm.y; p2 *= norm.z; p3 *= norm.w;\n    vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);\n    m = m * m;\n    return 42.0 * dot(m*m, vec4(dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3)));\n}\n\n${shapeFunction}\n\nvoid main() {\n    // Secondary particles run at a slower timescale \u2014 they are the atmosphere, not the core\n    float proximity = particleProximity(instanceRandom) * 0.22;\n    float depthTime = particleTime(uTime, proximity);\n    float t = depthTime * 0.45;\n\n    // Multi-scale noise flow \u2014 low freqs drive large drift, high freqs add fine turbulence\n    vec3 noisePos = instancePosition * 0.035 + instanceRandom;\n    vec3 drift    = vec3(\n        snoise(noisePos + t * 0.06),\n        snoise(noisePos * 0.9 - t * 0.05),\n        snoise(noisePos * 1.1 + t * 0.04)\n    ) * (5.0 + uSubBass * 10.0 + uLowMid * 6.0);\n\n    vec3 turbulence = vec3(\n        snoise(noisePos * 2.5 + t * 0.18),\n        snoise(noisePos * 2.5 - t * 0.14),\n        snoise(noisePos * 2.5 + t * 0.12)\n    ) * (uHigh * 5.0 + uSpectralFlux * 8.0);\n\n    vec3 offset = drift + turbulence;\n\n    // Orbital drift \u2014 vortex-aware, modulated by bass\n    float orbitSpeed = 0.12 + instanceRandom.x * 0.15 + uBass * 0.08;\n    float angle = depthTime * orbitSpeed + instancePhase;\n    float orbitRadius = length(instancePosition.xz) * (1.0 + uSubBass * 0.25);\n    // Vortex coupling \u2014 secondary shell rotates with the main field vortex\n    float vortexInfluence = uVortexStrength * uBass * 0.4;\n    float vAngle = angle + vortexInfluence;\n    vec3 orbit = vec3(\n        cos(vAngle) * orbitRadius - instancePosition.x,\n        sin(uTime * 0.5 + instancePhase) * (uMid * 4.0 + uLowMid * 2.0),\n        sin(vAngle) * orbitRadius - instancePosition.z\n    ) * 0.07;\n\n    vec3 newPos = shapedPosition(instanceRandom, proximity, depthTime) + offset + orbit;\n\n    // Transients and sub-bass move the atmosphere in depth, not away from the centre.\n    newPos.z += uOnsetEnergy * 14.0 * (0.6 + instanceRandom.z * 0.4);\n    newPos.z += sin(uTime * 1.2 + instancePhase) * uSubBass * 5.0;\n\n    vec4 mvPosition = modelViewMatrix * vec4(newPos, 1.0);\n    gl_Position = projectionMatrix * mvPosition;\n\n    // Size: driven by different bands than the main system\n    // Sparkle on ultraHigh, swell on subBass, punch on beatEnergy\n    float sparkle = 1.0 + (instanceRandom.x > 0.85 ? sin(uTime * 15.0 + instanceRandom.y * 200.0) * uUltraHigh * 3.0 : 0.0);\n    float swell = 1.0 + uSubBass * 0.6 + uLowMid * 0.3;\n    float size = (1.1 + uBeatEnergy * 0.7) * swell * sparkle;\n    gl_PointSize = clamp(size * uPixelRatio * (55.0 / -mvPosition.z) * uParticleScale, 0.5, 55.0);\n\n    // Colour: spectral centroid shifts hue, highMid brightens toward white\n    float centroidMix = clamp(uSpectralCentroid * 2.2 + uHighMid * 0.4, 0.0, 1.0);\n    vColor = mix(uColor1, uColor2, centroidMix);\n    // SubBass warmth \u2014 hint of deep colour saturation on heavy lows\n    vColor = mix(vColor, vColor * 1.3, uSubBass * 0.4);\n    // Beat flash \u2014 brief white-hot core\n    vColor = mix(vColor, vec3(1.0), uBeatEnergy * 0.25);\n\n    // Alpha: outer shell fades at edge, mid-frequency presence sustains visibility\n    float edgeFade = particleEdge(newPos, proximity);\n    vAlpha = edgeFade * (0.45 + uMid * 0.35 + uLowMid * 0.2) * sparkle * mix(1.0, 0.6, uParticleDepth);\n\n    vEnergy = uBeatEnergy * 0.4 + uHighMid * 0.3 + uOnsetEnergy * 0.3;\n    vDepth = clamp(-mvPosition.z / 160.0, 0.0, 1.0);\n}\n`;\n\n        const secondaryFragmentShader = `\nvarying vec3 vColor;\nvarying float vAlpha;\nvarying float vEnergy;\nvarying float vDepth;\n\n${particleLight}\n\nvoid main() {\n    vec2 xy = gl_PointCoord.xy - vec2(0.5);\n    float r = length(xy);\n    if (r > 0.5) discard;\n\n    // Wider, softer glow than main particles \u2014 atmospheric haze\n    float glow     = exp(-r * r * 8.0);\n    float softGlow = exp(-r * r * 3.0) * 0.4;\n    float core     = smoothstep(0.18 - vEnergy * 0.06, 0.10, r);\n\n    vec3 finalColor = mix(vColor, vec3(1.0, 0.97, 0.92), core * 0.55);\n    // Depth haze \u2014 far particles shift slightly cooler/dimmer\n    finalColor = mix(finalColor, vec3(0.02, 0.03, 0.06), vDepth * 0.35);\n\n    float finalAlpha = clamp(vAlpha * (glow * 0.65 + softGlow + core * 0.35), 0.0, 1.0);\n    gl_FragColor = mix(vec4(finalColor, finalAlpha), crispParticle(vColor, r, vAlpha), uParticleSharpness);\n}\n`;\n\n        // Create instanced geometry for secondary particles\n        const secondaryGeometry = new THREE.InstancedBufferGeometry();\n\n        // Base geometry (single point)\n        const basePositions = new Float32Array([0, 0, 0]);\n        secondaryGeometry.setAttribute('position', new THREE.BufferAttribute(basePositions, 3));\n\n        // Instance attributes\n        const instancePositions = new Float32Array(CONFIG.secondaryParticles * 3);\n        const instanceRandoms = new Float32Array(CONFIG.secondaryParticles * 3);\n        const instancePhases = new Float32Array(CONFIG.secondaryParticles);\n\n        for (let i = 0; i < CONFIG.secondaryParticles; i++) {\n            // Distribute in outer shell\n            const r = CONFIG.fieldRadius * (0.65 + Math.random() * 0.45);\n            const theta = Math.acos(2 * Math.random() - 1);\n            const phi = Math.random() * Math.PI * 2;\n\n            instancePositions[i * 3] = r * Math.sin(theta) * Math.cos(phi);\n            instancePositions[i * 3 + 1] = r * Math.sin(theta) * Math.sin(phi);\n            instancePositions[i * 3 + 2] = r * Math.cos(theta);\n\n            instanceRandoms[i * 3] = Math.random();\n            instanceRandoms[i * 3 + 1] = Math.random();\n            instanceRandoms[i * 3 + 2] = Math.random();\n\n            instancePhases[i] = Math.random() * Math.PI * 2;\n        }\n\n        secondaryGeometry.setAttribute('instancePosition', new THREE.InstancedBufferAttribute(instancePositions, 3));\n        secondaryGeometry.setAttribute('instanceRandom', new THREE.InstancedBufferAttribute(instanceRandoms, 3));\n        secondaryGeometry.setAttribute('instancePhase', new THREE.InstancedBufferAttribute(instancePhases, 1));\n\n        const secondaryMaterial = new THREE.ShaderMaterial({\n            vertexShader: secondaryVertexShader,\n            fragmentShader: secondaryFragmentShader,\n            uniforms: {\n                ...particleUniforms,\n                uTime:             { value: 0 },\n                uPixelRatio:       { value: STATE.pixelRatio },\n                uSubBass:          { value: 0 },\n                uBass:             { value: 0 },\n                uLowMid:           { value: 0 },\n                uMid:              { value: 0 },\n                uHighMid:          { value: 0 },\n                uHigh:             { value: 0 },\n                uUltraHigh:        { value: 0 },\n                uBeatEnergy:       { value: 0 },\n                uSpectralCentroid: { value: 0 },\n                uSpectralFlux:     { value: 0 },\n                uOnsetEnergy:      { value: 0 },\n                uVortexStrength:   { value: STATE.vortexStrength },\n                uColor1:           { value: new THREE.Color(def.sc1) },\n                uColor2:           { value: new THREE.Color(def.sc2) },\n                uViewportAspect:   { value: window.innerWidth / window.innerHeight },\n                uViewportHalfHeight: { value: Math.tan(camera.fov * Math.PI / 360) * CONFIG.defaultZoom },\n                uFieldFill:        { value: STATE.fieldSize }\n            },\n            transparent: true,\n            depthWrite: false,\n            blending: THREE.AdditiveBlending\n        });\n\n        const secondaryPoints = new THREE.Points(secondaryGeometry, secondaryMaterial);\n        scene.add(secondaryPoints);\n\n        // Expose secondary-layer controls to the host component.\n        STATE.secondaryEnabled = true;\n        STATE.secondaryOpacity = 1.0;\n\n        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 PARTICLE TRAIL SYSTEM \u2550\u2550\u2550\u2550\u2550\u2550\u2550\n        const particleSeeds = geometry.getAttribute('aRandom');\n        function fieldParticlePosition(index, target) {\n            const halfHeight = material.uniforms.uViewportHalfHeight.value * STATE.fieldSize;\n            const halfWidth = halfHeight * material.uniforms.uViewportAspect.value;\n            const x = particleSeeds.getX(index), y = particleSeeds.getY(index), z = particleSeeds.getZ(index);\n            const proximity = z ** 4, depth = particleUniforms.uParticleDepth.value;\n            const offset = (-100 + proximity * 225) * depth;\n            const projection = 1 - offset / CONFIG.defaultZoom;\n            const time = material.uniforms.uTime.value * (1 + (proximity * 1.35 - 0.75) * depth);\n            const drift = (0.006 + proximity * 0.039) * depth;\n            return target.set(\n                (x * 2 - 1 + Math.sin(time * 0.16 + x * 6.28) * drift) * halfWidth * projection,\n                (y * 2 - 1 + Math.cos(time * 0.12 + y * 6.28) * drift) * halfHeight * projection,\n                (z - 0.5) * 12 + offset\n            );\n        }\n\n        class TrailSystem {\n            constructor(count, length) {\n                this.trails = [];\n                this.meshes = [];\n                this.nextPosition = new THREE.Vector3();\n\n                for (let i = 0; i < count; i++) {\n                    const anchor = new THREE.Vector2(Math.random() * 1.5 - 0.75, Math.random() * 1.5 - 0.75);\n                    const start = new THREE.Vector3(\n                        anchor.x * material.uniforms.uViewportAspect.value * material.uniforms.uViewportHalfHeight.value * STATE.fieldSize,\n                        anchor.y * material.uniforms.uViewportHalfHeight.value * STATE.fieldSize,\n                        0\n                    );\n                    const trail = {\n                        positions: Array.from({ length }, () => start.clone()),\n                        anchor,\n                        phase: Math.random() * Math.PI * 2,\n                        speed: 0.3 + Math.random() * 0.7,\n                        color: new THREE.Color(def.c1).lerp(new THREE.Color(def.c2), i / Math.max(1, count - 1))\n                    };\n                    this.trails.push(trail);\n\n                    const geom = new THREE.BufferGeometry();\n                    const positions = new Float32Array(length * 3);\n                    const alphas = new Float32Array(length);\n                    for (let j = 0; j < length; j++) alphas[j] = 1.0 - j / length;\n\n                    geom.setAttribute('position', new THREE.BufferAttribute(positions, 3));\n                    geom.setAttribute('alpha', new THREE.BufferAttribute(alphas, 1));\n\n                    const mat = new THREE.ShaderMaterial({\n                        vertexShader: `attribute float alpha; varying float vAlpha; void main() { vAlpha = alpha; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`,\n                        fragmentShader: `uniform vec3 uColor; uniform float uOpacity, uBeat; varying float vAlpha; void main() { gl_FragColor = vec4(uColor * (1.0 + uBeat * 0.3), vAlpha * uOpacity * 0.6 * (1.0 + uBeat * 0.5)); }`,\n                        uniforms: { uColor: { value: trail.color }, uOpacity: { value: 0.4 }, uBeat: { value: 0 } },\n                        transparent: true, depthWrite: false, blending: THREE.AdditiveBlending\n                    });\n\n                    const line = new THREE.Line(geom, mat);\n                    this.meshes.push(line);\n                    scene.add(line);\n                }\n            }\n\n            update(time, audio, fieldColor) {\n                const halfHeight = material.uniforms.uViewportHalfHeight.value * STATE.fieldSize;\n                const halfWidth = halfHeight * material.uniforms.uViewportAspect.value;\n                for (let i = 0; i < this.trails.length; i++) {\n                    const trail = this.trails[i], mesh = this.meshes[i];\n                    mesh.visible = STATE.particleTrailsEnabled && i < this.trails.length * STATE.qualityLevel;\n                    if (!mesh.visible) continue;\n\n                    const angle = time * 0.5 * trail.speed + trail.phase;\n                    const newPos = this.nextPosition.set(\n                        trail.anchor.x * halfWidth + Math.cos(angle) * (4 + audio.bass * 8),\n                        trail.anchor.y * halfHeight + Math.sin(time * 0.3 + trail.phase) * (4 + audio.mid * 8),\n                        Math.sin(angle) * (4 + audio.high * 7)\n                    );\n                    newPos.x = THREE.MathUtils.clamp(newPos.x, -halfWidth * 0.94, halfWidth * 0.94);\n                    newPos.y = THREE.MathUtils.clamp(newPos.y, -halfHeight * 0.94, halfHeight * 0.94);\n\n                    for (let j = trail.positions.length - 1; j > 0; j--) trail.positions[j].copy(trail.positions[j - 1]);\n                    trail.positions[0].copy(newPos);\n\n                    const posAttr = mesh.geometry.getAttribute('position');\n                    for (let j = 0; j < trail.positions.length; j++) {\n                        posAttr.setXYZ(j, trail.positions[j].x, trail.positions[j].y, trail.positions[j].z);\n                    }\n                    posAttr.needsUpdate = true;\n\n                    mesh.material.uniforms.uBeat.value = audio.beat;\n                    mesh.material.uniforms.uOpacity.value = STATE.particleTrailOpacity;\n                }\n            }\n        }\n\n        const trailSystem = new TrailSystem(50, 12);\n\n        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 PARTICLE CONNECTIONS (Force Network) \u2550\u2550\u2550\u2550\u2550\u2550\u2550\n        const connectionCount = 500;  // Number of particles to check for connections\n        const maxConnections = 800;   // Maximum line segments\n        const connectionGeometry = new THREE.BufferGeometry();\n        const connectionPositions = new Float32Array(maxConnections * 6);  // 2 points per line, 3 coords each\n        const connectionAlphas = new Float32Array(maxConnections * 2);     // Alpha per vertex\n        connectionGeometry.setAttribute('position', new THREE.BufferAttribute(connectionPositions, 3));\n        connectionGeometry.setAttribute('alpha', new THREE.BufferAttribute(connectionAlphas, 1));\n        connectionGeometry.setDrawRange(0, 0);\n\n        const connectionMaterial = new THREE.ShaderMaterial({\n            vertexShader: `\n        attribute float alpha;\n        varying float vAlpha;\n        void main() {\n            vAlpha = alpha;\n            vec4 mvPos = modelViewMatrix * vec4(position, 1.0);\n            gl_Position = projectionMatrix * mvPos;\n        }\n    `,\n            fragmentShader: `\n        uniform vec3 uColor;\n        uniform vec3 uColor2;\n        uniform float uOpacity;\n        uniform float uBeatEnergy;\n        uniform float uHighMid;\n        uniform float uSpectralCentroid;\n        varying float vAlpha;\n        void main() {\n            // Blend hue with spectral centroid (brighter/higher = more c2)\n            vec3 color = mix(uColor, uColor2, clamp(uSpectralCentroid * 2.0, 0.0, 1.0));\n            // Beat pulse flash\n            float beatFlash = 1.0 + uBeatEnergy * 1.2;\n            color *= beatFlash;\n            // Per-line alpha reacts to highMid (attack/presence energy)\n            float lineAlpha = vAlpha * uOpacity * (0.4 + uHighMid * 0.5 + uBeatEnergy * 0.4);\n            gl_FragColor = vec4(color, clamp(lineAlpha, 0.0, 1.0));\n        }\n    `,\n            uniforms: {\n                uColor:  { value: new THREE.Color(def.c2) },\n                uColor2: { value: new THREE.Color(def.c1) },\n                uOpacity: { value: 1.0 },\n                uBeatEnergy: { value: 0 },\n                uHighMid: { value: 0 },\n                uSpectralCentroid: { value: 0 }\n            },\n            transparent: true,\n            depthWrite: false,\n            blending: THREE.AdditiveBlending\n        });\n\n        const connectionMesh = new THREE.LineSegments(connectionGeometry, connectionMaterial);\n        scene.add(connectionMesh);\n\n        // Particle indices to track for connections \u2014 refreshed periodically\n        const trackedParticles = [];\n        const positions = Array.from({ length: connectionCount }, () => new THREE.Vector3());\n        let connectionRefreshCounter = 0;\n        const CONNECTION_REFRESH_INTERVAL = 40; // 20 Hz updates preserve the original ~2 s selection cycle\n\n        function refreshTrackedParticles() {\n            trackedParticles.length = 0;\n            const visibleParticles = Math.max(1, geometry.drawRange.count);\n            const visibleFraction = Math.sqrt(visibleParticles / (CONFIG.maxParticles * CONFIG.initialDensity));\n            const trackedCount = Math.max(2, Math.floor(connectionCount * Math.min(1, STATE.qualityLevel, visibleFraction)));\n            for (let i = 0; i < trackedCount; i++) {\n                trackedParticles.push(Math.floor(Math.random() * visibleParticles));\n            }\n        }\n        refreshTrackedParticles();\n        let lastConnectionState = null;\n\n        function shouldRebuildConnections(moving, current, previous, idleElapsed) {\n            return moving || idleElapsed >= 2 || !previous || current.some((value, index) => value !== previous[index]);\n        }\n\n        function updateConnections(threshold, bassBoost, highMid, mid, forceRefresh = false) {\n            // Refresh particle selection every N frames \u2014 network evolves over time\n            connectionRefreshCounter++;\n            if (forceRefresh || connectionRefreshCounter >= CONNECTION_REFRESH_INTERVAL) {\n                refreshTrackedParticles();\n                connectionRefreshCounter = 0;\n            }\n\n            // Mirror the shader's screen-fitted seed mapping for the line systems.\n            for (let i = 0; i < trackedParticles.length; i++) {\n                fieldParticlePosition(trackedParticles[i], positions[i]);\n            }\n\n            // Threshold breathes with bass, tightens on high energy\n            const effectiveThreshold = threshold * (1.0 + bassBoost * 0.6) * (1.0 - highMid * 0.15);\n            const thresholdSq = effectiveThreshold * effectiveThreshold;\n\n            // Dynamic connection cap \u2014 expands with mid+highMid energy\n            const dynamicMax = Math.floor(maxConnections * (0.3 + (mid + highMid) * 0.7));\n\n            let connIdx = 0;\n            for (let i = 0; i < trackedParticles.length && connIdx < dynamicMax; i++) {\n                for (let j = i + 1; j < trackedParticles.length && connIdx < dynamicMax; j++) {\n                    const distSq = positions[i].distanceToSquared(positions[j]);\n                    if (distSq < thresholdSq && distSq > 0.1) {\n                        const dist = Math.sqrt(distSq);\n                        const alpha = (1.0 - dist / effectiveThreshold) * 0.8;\n\n                        connectionPositions[connIdx * 6 + 0] = positions[i].x;\n                        connectionPositions[connIdx * 6 + 1] = positions[i].y;\n                        connectionPositions[connIdx * 6 + 2] = positions[i].z;\n                        connectionPositions[connIdx * 6 + 3] = positions[j].x;\n                        connectionPositions[connIdx * 6 + 4] = positions[j].y;\n                        connectionPositions[connIdx * 6 + 5] = positions[j].z;\n\n                        connectionAlphas[connIdx * 2 + 0] = alpha;\n                        connectionAlphas[connIdx * 2 + 1] = alpha;\n\n                        connIdx++;\n                    }\n                }\n            }\n\n            connectionGeometry.attributes.position.needsUpdate = true;\n            connectionGeometry.attributes.alpha.needsUpdate = true;\n            connectionGeometry.setDrawRange(0, connIdx * 2);\n        }\n\n        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 NETWORK CRAWLERS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\n        const CRAWLER_COUNT    = 24;   // concurrent crawlers\n        const CRAWLER_TAIL     = 10;   // trail positions per crawler\n        const crawlerMaxSegs   = CRAWLER_COUNT * (CRAWLER_TAIL - 1);\n\n        const crawlerGeo = new THREE.BufferGeometry();\n        const crawlerPos = new Float32Array(crawlerMaxSegs * 6);\n        const crawlerAlp = new Float32Array(crawlerMaxSegs * 2);\n        crawlerGeo.setAttribute('position', new THREE.BufferAttribute(crawlerPos, 3));\n        crawlerGeo.setAttribute('alpha',    new THREE.BufferAttribute(crawlerAlp, 1));\n        crawlerGeo.setDrawRange(0, 0);\n\n        // Bloom only lights pixels above 0.85 luminance. Preset greens and cyans got there on their own;\n        // a theme's reds and violets carry the same energy at a fraction of the luminance, so reaction\n        // colours keep the theme's hue but are lifted (past 1.0 if needed) to the brightness of the originals.\n        function glowColor(color, luminance) {\n            const current = 0.2126 * color.r + 0.7152 * color.g + 0.0722 * color.b;\n            return color.multiplyScalar(Math.min(4, Math.max(1, luminance / Math.max(current, 0.02))));\n        }\n        const crawlerLow = new THREE.Color(def.c1), crawlerHigh = new THREE.Color(def.c3);\n        const crawlerTarget = new THREE.Color();\n        const crawlerMaterial = new THREE.ShaderMaterial({\n            vertexShader: `\n                attribute float alpha;\n                varying float vAlpha;\n                void main() {\n                    vAlpha = alpha;\n                    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n                }\n            `,\n            fragmentShader: `\n                uniform vec3 uColor;\n                uniform float uBeatEnergy;\n                varying float vAlpha;\n                void main() {\n                    vec3 c = uColor * (1.2 + uBeatEnergy * 1.5);\n                    gl_FragColor = vec4(c, vAlpha);\n                }\n            `,\n            uniforms: {\n                uColor:      { value: new THREE.Color(def.c1) },\n                uBeatEnergy: { value: 0 }\n            },\n            transparent: true,\n            depthWrite:  false,\n            blending:    THREE.AdditiveBlending\n        });\n\n        const crawlerMesh = new THREE.LineSegments(crawlerGeo, crawlerMaterial);\n        scene.add(crawlerMesh);\n\n        // Initialise crawler agents\n        const crawlers = [];\n        const CRAWLER_MIN_STEP = 1.8; // min world-space distance before adding a tail point\n        for (let i = 0; i < CRAWLER_COUNT; i++) {\n            crawlers.push({\n                fromIdx:   Math.floor(Math.random() * connectionCount),\n                toIdx:     Math.floor(Math.random() * connectionCount),\n                t:         Math.random(),\n                speed:     0.0015 + Math.random() * 0.002,\n                tail:      [],\n                lastTailPos: null, // last world position a tail point was recorded\n                hue:       Math.random()\n            });\n        }\n\n        function updateCrawlers(dt, highMid, beatEnergy, spectralCentroid) {\n            // Helper: world position of a tracked particle\n            function particlePos(idx) {\n                return positions[idx % trackedParticles.length];\n            }\n\n            // Helper: find nearest neighbour within threshold\n            function nearestNeighbour(fromIdx, excludeIdx) {\n                const origin = particlePos(fromIdx);\n                const threshold = STATE.connectionThreshold * (1.2 + highMid * 0.4);\n                const threshSq  = threshold * threshold;\n                let bestDist = Infinity, bestIdx = -1;\n                const check = Math.min(trackedParticles.length, 80); // sample subset for perf\n                const start  = Math.floor(Math.random() * (trackedParticles.length - check));\n                for (let k = start; k < start + check; k++) {\n                    const ki = k % trackedParticles.length;\n                    if (ki === fromIdx || ki === excludeIdx) continue;\n                    const d = origin.distanceToSquared(particlePos(ki));\n                    if (d < threshSq && d < bestDist) { bestDist = d; bestIdx = ki; }\n                }\n                // fallback: pick random if no neighbour in range\n                return bestIdx === -1 ? Math.floor(Math.random() * trackedParticles.length) : bestIdx;\n            }\n\n            let segIdx = 0;\n\n            for (let i = 0; i < crawlers.length; i++) {\n                const c = crawlers[i];\n\n                // Speed reacts to highMid (attack energy) and beat\n                const spd = c.speed * (1.0 + highMid * 0.8 + beatEnergy * 0.5);\n                c.t += spd;\n\n                // Reached target \u2014 advance to next node\n                if (c.t >= 1.0) {\n                    c.t -= 1.0;\n                    c.fromIdx = c.toIdx;\n                    c.toIdx   = nearestNeighbour(c.fromIdx, c.fromIdx);\n                    // Occasionally teleport to keep crawlers spread across the field\n                    if (Math.random() < 0.04) {\n                        c.fromIdx    = Math.floor(Math.random() * trackedParticles.length);\n                        c.toIdx      = nearestNeighbour(c.fromIdx, c.fromIdx);\n                        c.tail       = [];\n                        c.lastTailPos = null;\n                    }\n                }\n\n                // Current head position\n                const from = particlePos(c.fromIdx);\n                const to   = particlePos(c.toIdx);\n                const head = new THREE.Vector3().lerpVectors(from, to, c.t);\n\n                // Only record a tail point when head has moved far enough in world space\n                const distMoved = c.lastTailPos ? head.distanceTo(c.lastTailPos) : Infinity;\n                if (distMoved >= CRAWLER_MIN_STEP) {\n                    c.tail.push(head.clone());\n                    if (c.tail.length > CRAWLER_TAIL) c.tail.shift();\n                    c.lastTailPos = head.clone();\n                }\n\n                // Write tail segments\n                const tailLen = c.tail.length;\n                for (let s = 0; s < tailLen - 1 && segIdx < crawlerMaxSegs; s++) {\n                    const p0 = c.tail[s];\n                    const p1 = c.tail[s + 1];\n                    // Alpha: head is brightest, tail fades\n                    const baseAlpha = ((s + 1) / (tailLen - 1));\n                    const alpha = baseAlpha * (0.25 + spectralCentroid * 0.3 + beatEnergy * 0.4);\n\n                    crawlerPos[segIdx * 6 + 0] = p0.x; crawlerPos[segIdx * 6 + 1] = p0.y; crawlerPos[segIdx * 6 + 2] = p0.z;\n                    crawlerPos[segIdx * 6 + 3] = p1.x; crawlerPos[segIdx * 6 + 4] = p1.y; crawlerPos[segIdx * 6 + 5] = p1.z;\n                    crawlerAlp[segIdx * 2 + 0] = alpha;\n                    crawlerAlp[segIdx * 2 + 1] = alpha;\n                    segIdx++;\n                }\n            }\n\n            crawlerGeo.attributes.position.needsUpdate = true;\n            crawlerGeo.attributes.alpha.needsUpdate    = true;\n            crawlerGeo.setDrawRange(0, segIdx * 2);\n        }\n\n        STATE.crawlersEnabled = true;\n\n        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 NEBULA BACKGROUND \u2550\u2550\u2550\u2550\u2550\u2550\u2550\n        const nebulaVertexShader = `\nvarying vec3 vWorldPosition;\nvarying vec2 vUv;\nvoid main() {\n    vUv = uv;\n    vec4 worldPos = modelMatrix * vec4(position, 1.0);\n    vWorldPosition = worldPos.xyz;\n    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}\n`;\n\n        const nebulaFragmentShader = `\nuniform float uTime;\nuniform vec3 uColor1;\nuniform vec3 uColor2;\nuniform vec3 uColor3;\nuniform float uBass;\nuniform float uMid;\nuniform float uHigh;\nuniform float uBeatEnergy;\nuniform float uIntensity;\nvarying vec3 vWorldPosition;\nvarying vec2 vUv;\n\n// Simplex 3D noise\nvec4 permute(vec4 x) { return mod(((x*34.0)+1.0)*x, 289.0); }\nvec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }\n\nfloat snoise(vec3 v) {\n    const vec2 C = vec2(1.0/6.0, 1.0/3.0);\n    const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);\n    vec3 i = floor(v + dot(v, C.yyy));\n    vec3 x0 = v - i + dot(i, C.xxx);\n    vec3 g = step(x0.yzx, x0.xyz);\n    vec3 l = 1.0 - g;\n    vec3 i1 = min(g.xyz, l.zxy);\n    vec3 i2 = max(g.xyz, l.zxy);\n    vec3 x1 = x0 - i1 + C.xxx;\n    vec3 x2 = x0 - i2 + C.yyy;\n    vec3 x3 = x0 - D.yyy;\n    i = mod(i, 289.0);\n    vec4 p = permute(permute(permute(i.z + vec4(0.0, i1.z, i2.z, 1.0)) + i.y + vec4(0.0, i1.y, i2.y, 1.0)) + i.x + vec4(0.0, i1.x, i2.x, 1.0));\n    float n_ = 1.0/7.0;\n    vec3 ns = n_ * D.wyz - D.xzx;\n    vec4 j = p - 49.0 * floor(p * ns.z * ns.z);\n    vec4 x_ = floor(j * ns.z);\n    vec4 y_ = floor(j - 7.0 * x_);\n    vec4 x = x_ *ns.x + ns.yyyy;\n    vec4 y = y_ *ns.x + ns.yyyy;\n    vec4 h = 1.0 - abs(x) - abs(y);\n    vec4 b0 = vec4(x.xy, y.xy);\n    vec4 b1 = vec4(x.zw, y.zw);\n    vec4 s0 = floor(b0)*2.0 + 1.0;\n    vec4 s1 = floor(b1)*2.0 + 1.0;\n    vec4 sh = -step(h, vec4(0.0));\n    vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy;\n    vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww;\n    vec3 p0 = vec3(a0.xy, h.x);\n    vec3 p1 = vec3(a0.zw, h.y);\n    vec3 p2 = vec3(a1.xy, h.z);\n    vec3 p3 = vec3(a1.zw, h.w);\n    vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2,p2), dot(p3,p3)));\n    p0 *= norm.x; p1 *= norm.y; p2 *= norm.z; p3 *= norm.w;\n    vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);\n    return 42.0 * dot(m*m*m*m, vec4(dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3)));\n}\n\nfloat fbm(vec3 p) {\n    float value = 0.0;\n    float amplitude = 0.5;\n    float frequency = 1.0;\n    for(int i = 0; i < 3; i++) {\n        value += amplitude * snoise(p * frequency);\n        amplitude *= 0.5;\n        frequency *= 2.0;\n    }\n    return value;\n}\n\nvoid main() {\n    vec3 dir = normalize(vWorldPosition);\n    float t = uTime * 0.02;\n\n    // Layered nebula clouds\n    vec3 p1 = dir * 2.0 + t * 0.5;\n    vec3 p2 = dir * 4.0 - t * 0.3;\n    vec3 p3 = dir * 1.5 + vec3(t * 0.2, -t * 0.1, t * 0.15);\n\n    float n1 = fbm(p1) * 0.5 + 0.5;\n    float n2 = fbm(p2) * 0.5 + 0.5;\n    float n3 = fbm(p3) * 0.5 + 0.5;\n\n    // Create cloud density\n    float density = n1 * n2;\n    density = pow(density, 1.5) * 1.5;\n\n    // Wispy tendrils\n    float tendrils = pow(n3, 3.0) * 0.8;\n\n    // Color mixing based on field colors\n    vec3 nebulaColor = mix(uColor1 * 0.3, uColor2 * 0.5, n1);\n    nebulaColor = mix(nebulaColor, uColor3 * 0.4, n2 * 0.5);\n\n    // Add some complementary deep space colors\n    vec3 deepSpace = vec3(0.02, 0.01, 0.05);\n    vec3 starGlow = vec3(0.1, 0.08, 0.15);\n\n    // Audio reactivity\n    float bassGlow = uBass * 0.3;\n    float midShimmer = uMid * 0.2 * sin(uTime * 2.0 + n1 * 10.0);\n    float beatPulse = uBeatEnergy * 0.4;\n\n    // Combine layers\n    vec3 color = deepSpace;\n    color += nebulaColor * density * (0.4 + bassGlow + beatPulse);\n    color += uColor2 * 0.15 * tendrils * (1.0 + uHigh * 0.5);\n    color += starGlow * pow(n1 * n2, 4.0) * (1.0 + midShimmer);\n\n    // Scattered stars\n    float stars = pow(snoise(dir * 50.0) * 0.5 + 0.5, 20.0);\n    stars += pow(snoise(dir * 80.0 + 100.0) * 0.5 + 0.5, 25.0) * 0.5;\n    color += vec3(1.0, 0.95, 0.9) * stars * (0.5 + uHigh * 0.5);\n\n    // Vignette toward horizon\n    float horizonFade = 1.0 - pow(abs(dir.y), 0.5) * 0.3;\n    color *= horizonFade;\n\n    // Apply intensity\n    color *= uIntensity;\n\n    gl_FragColor = vec4(color, 1.0);\n}\n`;\n\n        const nebulaMaterial = new THREE.ShaderMaterial({\n            vertexShader: nebulaVertexShader,\n            fragmentShader: nebulaFragmentShader,\n            uniforms: {\n                uTime: { value: 0 },\n                uColor1: { value: new THREE.Color(def.c1) },\n                uColor2: { value: new THREE.Color(def.c2) },\n                uColor3: { value: new THREE.Color(def.c3) },\n                uBass: { value: 0 },\n                uMid: { value: 0 },\n                uHigh: { value: 0 },\n                uBeatEnergy: { value: 0 },\n                uIntensity: { value: STATE.nebulaIntensity }\n            },\n            side: THREE.BackSide,\n            depthWrite: false\n        });\n\n        const nebulaSphere = new THREE.Mesh(\n            new THREE.SphereGeometry(500, 64, 64),\n            nebulaMaterial\n        );\n        scene.add(nebulaSphere);\n\n        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 POST-PROCESSING COMPOSER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\n        const composer = new EffectComposer(renderer);\n        composer.addPass(new RenderPass(scene, camera));\n\n        const afterimagePass = new AfterimagePass();\n        afterimagePass.uniforms['damp'].value = STATE.trails;\n        composer.addPass(afterimagePass);\n\n        const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.5, 0.4, 0.85);\n        bloomPass.threshold = 0.25;\n        bloomPass.strength = STATE.bloom;\n        bloomPass.radius = 0.45;\n        composer.addPass(bloomPass);\n\n        const godRaysPass = new ShaderPass(GodRaysShader);\n        godRaysPass.enabled = false;\n        composer.addPass(godRaysPass);\n\n        const lensFlarePass = new ShaderPass(LensFlareShader);\n        lensFlarePass.enabled = STATE.lensFlareEnabled && STATE.lensFlareIntensity > 0;\n        composer.addPass(lensFlarePass);\n\n        const anamorphicPass = new ShaderPass(AnamorphicShader);\n        composer.addPass(anamorphicPass);\n\n        const chromaticPass = new ShaderPass(ChromaticShader);\n        chromaticPass.enabled = STATE.chromaticAberration > 0;\n        composer.addPass(chromaticPass);\n\n        // Custom DOF pass (radial focus)\n        const customDOFPass = new ShaderPass(CustomDOFShader);\n        customDOFPass.uniforms.uFocus.value = STATE.dofFocus;\n        customDOFPass.uniforms.uFocalLength.value = STATE.dofFocalLength;\n        customDOFPass.uniforms.uBokehStrength.value = STATE.dofBokehStrength;\n        customDOFPass.uniforms.uResolution.value.set(window.innerWidth, window.innerHeight);\n        customDOFPass.enabled = STATE.dofEnabled;\n        composer.addPass(customDOFPass);\n\n        const vignettePass = new ShaderPass(VignetteShader);\n        composer.addPass(vignettePass);\n\n        const grainPass = new ShaderPass(GrainShader);\n        grainPass.enabled = STATE.filmGrain > 0;\n        composer.addPass(grainPass);\n\n        const AlphaFromLumaShader = {\n            uniforms: { tDiffuse: { value: null } },\n            vertexShader: `varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`,\n            fragmentShader: `uniform sampler2D tDiffuse; varying vec2 vUv;\n                void main() {\n                    vec3 rgb = texture2D(tDiffuse, vUv).rgb;\n                    float luminance = max(max(rgb.r, rgb.g), rgb.b);\n                    float alpha = smoothstep(0.004, 0.06, luminance);\n                    gl_FragColor = vec4(rgb, alpha);\n                }`\n        };\n        composer.addPass(new OutputPass());\n        composer.addPass(new ShaderPass(AlphaFromLumaShader));\n\n        // Keep the embedded CSS accents aligned with the kit palette.\n        function applyCssTheme(accent) {\n            const luminance = accent.r * 0.299 + accent.g * 0.587 + accent.b * 0.114;\n            const boost = luminance < 0.35 ? 0.35 / Math.max(luminance, 0.001) : 1;\n            for (const [channel, value] of Object.entries({ ar: accent.r, ag: accent.g, ab: accent.b })) {\n                document.documentElement.style.setProperty(`--${channel}`, Math.min(Math.round(value * boost * 255), 255));\n            }\n        }\n        applyCssTheme(new THREE.Color(def.c1));\n\n        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 UI & EVENTS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\n        const overlay = document.getElementById('overlay');\n        const audioControls = document.getElementById('audio-controls');\n        const playPauseBtn = document.getElementById('play-pause-btn');\n        const progressBar = document.getElementById('progress-bar');\n        const progressContainer = document.getElementById('progress-container');\n        const timeDisplay = document.getElementById('time-display');\n        const trackName = document.getElementById('track-name');\n        const status = document.getElementById('status-bar');\n\n        const formatTime = s => `${Math.floor(s / 60)}:${Math.floor(s % 60).toString().padStart(2, '0')}`;\n\n        function updateUI() {\n            if (AUDIO.mode === 'mic') {\n                playPauseBtn.textContent = '\u{1F399} live';\n                playPauseBtn.disabled = true;\n            } else {\n                playPauseBtn.textContent = AUDIO.isPlaying ? '\u23F8 pause' : '\u25B6 play';\n                playPauseBtn.classList.toggle('playing', AUDIO.isPlaying);\n                playPauseBtn.disabled = false;\n            }\n            if (AUDIO.mode === 'file' && AUDIO.audioBuffer) {\n                const cur = AUDIO.getCurrentTime(), dur = AUDIO.getDuration();\n                progressBar.style.width = (cur / dur * 100) + '%';\n                timeDisplay.textContent = `${formatTime(cur)} / ${formatTime(dur)}`;\n            } else {\n                progressBar.style.width = '0%';\n                timeDisplay.textContent = AUDIO.mode === 'mic' ? 'LIVE' : '0:00 / 0:00';\n            }\n        }\n\n        function togglePlayPause() {\n            if (AUDIO.mode !== 'file') return;\n            AUDIO.togglePlayPause();\n            updateUI();\n            status.innerHTML = AUDIO.isPlaying ? 'SYSTEM: <span>PLAYING</span>' : 'SYSTEM: <span>PAUSED</span>';\n        }\n\n        function activate() {\n            AUDIO.init();\n            if (AUDIO.ctx.state === 'suspended') AUDIO.ctx.resume();\n            overlay.style.opacity = 0;\n            setTimeout(() => overlay.style.display = 'none', 800);\n            audioControls.classList.add('visible');\n        }\n\n        async function loadTrack(file) {\n            activate();\n            const buffer = await AUDIO.loadTrack(await file.arrayBuffer(), file.name);\n            const samples = buffer.getChannelData(0);\n            const bars = 160;\n            const peaks = Array.from({ length: bars }, (_, bar) => {\n                const from = Math.floor(bar * samples.length / bars);\n                const to = Math.floor((bar + 1) * samples.length / bars);\n                const stride = Math.max(1, Math.floor((to - from) / 64));\n                let peak = 0;\n                for (let i = from; i < to; i += stride) peak = Math.max(peak, Math.abs(samples[i]));\n                return peak;\n            });\n            parent.postMessage({ type: 'ad-qf-waveform', value: peaks }, '*');\n            AUDIO.play();\n            trackName.textContent = file.name.length > 25 ? file.name.slice(0, 22) + '...' : file.name;\n            updateUI();\n            status.innerHTML = 'SYSTEM: <span>PLAYING</span>';\n        }\n\n        async function startMic(preferredLabel = null) {\n            console.log('Global startMic requested:', preferredLabel);\n            try {\n                activate();\n                await AUDIO.startMic(preferredLabel);\n                trackName.textContent = AUDIO.currentTrackName;\n                updateUI();\n                // status update handled in AUDIO.startMic\n            } catch (e) {\n                console.error(\"Global startMic failed:\", e);\n                const status = document.getElementById('status-bar');\n                status.innerHTML = `ERROR: <span style=\"color:#ff6b6b\">${e.message}</span>`;\n            }\n        }\n\n        // Using optional chaining/checks because one input was replaced by a button\n        const enterBtn = document.getElementById('enter-btn');\n        if (enterBtn) enterBtn.onclick = () => startMic(null);\n\n        const fileInput = document.getElementById('file-input');\n        if (fileInput) fileInput.onchange = e => e.target.files[0] && loadTrack(e.target.files[0]);\n\n        document.getElementById('file-input-2').onchange = e => { if (e.target.files[0]) loadTrack(e.target.files[0]); e.target.value = ''; };\n        document.getElementById('mic-btn-2').onclick = () => startMic(null);\n        playPauseBtn.onclick = togglePlayPause;\n        progressContainer.onclick = e => {\n            if (AUDIO.mode !== 'file' || !AUDIO.audioBuffer) return;\n            const rect = progressContainer.getBoundingClientRect();\n            AUDIO.seek((e.clientX - rect.left) / rect.width * AUDIO.getDuration());\n        };\n        document.getElementById('screenshot-btn')?.addEventListener('click', () => {\n            composer.render();\n            const a = document.createElement('a');\n            a.download = 'quantum-' + Date.now() + '.png';\n            a.href = renderer.domElement.toDataURL('image/png');\n            a.click();\n        });\n        document.getElementById('fullscreen-btn')?.addEventListener('click', () => {\n            document.fullscreenElement ? document.exitFullscreen() : document.documentElement.requestFullscreen();\n        });\n\n        // \u2550\u2550\u2550\u2550\u2550\u2550\u2550 ANIMATION LOOP \u2550\u2550\u2550\u2550\u2550\u2550\u2550\n        let renderVisible = true;\n        let connectionElapsed = 1 / 20;\n        let idleConnectionElapsed = 2;\n        let frameRequest = 0;\n        let nextFrameAt = 0;\n        let lastRenderedAt = -1;\n        let elapsed = 0;\n\n        function startFrames() {\n            if (!frameRequest && renderVisible && !document.hidden) frameRequest = requestAnimationFrame(animate);\n        }\n\n        function stopFrames() {\n            if (frameRequest) cancelAnimationFrame(frameRequest);\n            frameRequest = 0;\n            nextFrameAt = 0;\n            lastRenderedAt = -1;\n        }\n\n        document.addEventListener('visibilitychange', () => {\n            if (document.hidden) stopFrames();\n            else startFrames();\n        });\n\n        function animate(now) {\n            frameRequest = 0;\n            if (!renderVisible || document.hidden) return;\n            startFrames();\n            const frameInterval = 1000 / Math.max(1, STATE.targetFPS);\n            if (now < nextFrameAt) return;\n            nextFrameAt = Math.max(nextFrameAt + frameInterval, now);\n            const dt = lastRenderedAt < 0 ? 0 : Math.min((now - lastRenderedAt) / 1000, 0.05);\n            lastRenderedAt = now;\n            elapsed += dt;\n\n            material.uniforms.uTime.value += dt * STATE.timeScale;\n            grainPass.uniforms.uTime.value = elapsed;\n            lensFlarePass.uniforms.uTime.value = elapsed;\n\n            material.uniforms.uZoomFactor.value = camera.position.length() / CONFIG.defaultZoom;\n            material.uniforms.uMousePos.value.lerp(mouseWorldPos, 0.1);\n            material.uniforms.uMouseVelocity.value.lerp(mouseVelocity, 0.08);\n\n            AUDIO.update();\n\n            const s = STATE.sensitivity, lf = 0.16;\n            material.uniforms.uSubBass.value = THREE.MathUtils.lerp(material.uniforms.uSubBass.value, AUDIO.gatedBands.subBass * s, lf);\n            material.uniforms.uBass.value = THREE.MathUtils.lerp(material.uniforms.uBass.value, AUDIO.gatedBands.bass * s, lf);\n            material.uniforms.uLowMid.value = THREE.MathUtils.lerp(material.uniforms.uLowMid.value, AUDIO.gatedBands.lowMid * s, lf);\n            material.uniforms.uMid.value = THREE.MathUtils.lerp(material.uniforms.uMid.value, AUDIO.gatedBands.mid * s, lf);\n            material.uniforms.uHighMid.value = THREE.MathUtils.lerp(material.uniforms.uHighMid.value, AUDIO.gatedBands.highMid * s, lf);\n            material.uniforms.uHigh.value = THREE.MathUtils.lerp(material.uniforms.uHigh.value, AUDIO.gatedBands.high * s, lf);\n            material.uniforms.uUltraHigh.value = THREE.MathUtils.lerp(material.uniforms.uUltraHigh.value, AUDIO.gatedBands.ultraHigh * s, lf);\n            material.uniforms.uBeatEnergy.value = THREE.MathUtils.lerp(material.uniforms.uBeatEnergy.value, AUDIO.beatEnergy, 0.22);\n            material.uniforms.uSpectralCentroid.value = THREE.MathUtils.lerp(material.uniforms.uSpectralCentroid.value, AUDIO.spectralCentroid, lf);\n            material.uniforms.uSpectralFlux.value = THREE.MathUtils.lerp(material.uniforms.uSpectralFlux.value, AUDIO.spectralFlux * s, lf);\n\n            // === ENHANCEMENT: Update new uniforms ===\n            material.uniforms.uOnsetEnergy.value = THREE.MathUtils.lerp(material.uniforms.uOnsetEnergy.value, AUDIO.onsetEnergy, 0.25);\n            material.uniforms.uTerrainMode.value = FIELD_TYPES[STATE.field]?.terrain ? 1.0 : 0.0;\n            material.uniforms.uTerrainHeight.value = STATE.waveformTerrainHeight;\n\n            // Update secondary particles\n            secondaryPoints.visible = STATE.secondaryEnabled;\n            secondaryMaterial.uniforms.uTime.value             = material.uniforms.uTime.value;\n            secondaryMaterial.uniforms.uSubBass.value          = material.uniforms.uSubBass.value;\n            secondaryMaterial.uniforms.uBass.value             = material.uniforms.uBass.value;\n            secondaryMaterial.uniforms.uLowMid.value           = material.uniforms.uLowMid.value;\n            secondaryMaterial.uniforms.uMid.value              = material.uniforms.uMid.value;\n            secondaryMaterial.uniforms.uHighMid.value          = material.uniforms.uHighMid.value;\n            secondaryMaterial.uniforms.uHigh.value             = material.uniforms.uHigh.value;\n            secondaryMaterial.uniforms.uUltraHigh.value        = material.uniforms.uUltraHigh.value;\n            secondaryMaterial.uniforms.uBeatEnergy.value       = material.uniforms.uBeatEnergy.value;\n            secondaryMaterial.uniforms.uSpectralCentroid.value = material.uniforms.uSpectralCentroid.value;\n            secondaryMaterial.uniforms.uSpectralFlux.value     = material.uniforms.uSpectralFlux.value;\n            secondaryMaterial.uniforms.uOnsetEnergy.value      = material.uniforms.uOnsetEnergy.value;\n            secondaryMaterial.uniforms.uVortexStrength.value   = STATE.vortexStrength;\n\n            // Update nebula background\n            nebulaSphere.visible = STATE.nebulaEnabled;\n            if (STATE.nebulaEnabled) {\n                nebulaMaterial.uniforms.uTime.value = material.uniforms.uTime.value;\n                nebulaMaterial.uniforms.uBass.value = material.uniforms.uBass.value;\n                nebulaMaterial.uniforms.uMid.value = material.uniforms.uMid.value;\n                nebulaMaterial.uniforms.uHigh.value = material.uniforms.uHigh.value;\n                nebulaMaterial.uniforms.uBeatEnergy.value = material.uniforms.uBeatEnergy.value;\n            }\n\n            // Update particle connections\n            connectionMesh.visible = STATE.connectionsEnabled;\n            if (STATE.connectionsEnabled) {\n                const activeAudio = AUDIO.mode === 'mic' || AUDIO.isPlaying || AUDIO.externalActive;\n                const moving = activeAudio || particleUniforms.uParticleDepth.value > 0;\n                const connectionState = [\n                    STATE.field, STATE.connectionThreshold, geometry.drawRange.count,\n                    material.uniforms.uViewportAspect.value, material.uniforms.uViewportHalfHeight.value, STATE.fieldSize,\n                    STATE.qualityLevel, activeAudio, particleUniforms.uParticleDepth.value\n                ];\n                connectionElapsed = Math.min(1 / 20, connectionElapsed + dt);\n                idleConnectionElapsed = Math.min(2, idleConnectionElapsed + dt);\n                if (connectionElapsed >= 1 / 20 && shouldRebuildConnections(moving, connectionState, lastConnectionState, idleConnectionElapsed)) {\n                    const refreshSelection = !lastConnectionState || connectionState[2] !== lastConnectionState[2]\n                        || connectionState[6] !== lastConnectionState[6] || (!activeAudio && idleConnectionElapsed >= 2);\n                    updateConnections(\n                        STATE.connectionThreshold,\n                        activeAudio ? material.uniforms.uBass.value : 0,\n                        activeAudio ? material.uniforms.uHighMid.value : 0,\n                        activeAudio ? material.uniforms.uMid.value : 0,\n                        refreshSelection\n                    );\n                    lastConnectionState = connectionState;\n                    connectionElapsed = 0;\n                    idleConnectionElapsed = 0;\n                }\n                connectionMaterial.uniforms.uBeatEnergy.value = material.uniforms.uBeatEnergy.value;\n                connectionMaterial.uniforms.uHighMid.value = material.uniforms.uHighMid.value;\n                connectionMaterial.uniforms.uSpectralCentroid.value = material.uniforms.uSpectralCentroid.value;\n                connectionMaterial.uniforms.uOpacity.value = STATE.connectionOpacity;\n            } else {\n                connectionElapsed = 1 / 20;\n                idleConnectionElapsed = 2;\n                lastConnectionState = null;\n            }\n\n            // Update crawlers\n            crawlerMesh.visible = STATE.crawlersEnabled && STATE.connectionsEnabled && (AUDIO.externalActive || AUDIO.active && (AUDIO.isPlaying || AUDIO.mode === 'mic'));\n            if (crawlerMesh.visible) {\n                updateCrawlers(\n                    dt,\n                    material.uniforms.uHighMid.value,\n                    material.uniforms.uBeatEnergy.value,\n                    material.uniforms.uSpectralCentroid.value\n                );\n                crawlerTarget.lerpColors(crawlerLow, crawlerHigh, material.uniforms.uSpectralCentroid.value);\n                crawlerMaterial.uniforms.uColor.value.lerp(crawlerTarget, 0.05);\n                crawlerMaterial.uniforms.uBeatEnergy.value = material.uniforms.uBeatEnergy.value;\n            }\n\n            // Update post-processing\n            chromaticPass.uniforms.uBeatEnergy.value = material.uniforms.uBeatEnergy.value;\n            godRaysPass.uniforms.uBeatEnergy.value = material.uniforms.uBeatEnergy.value;\n            lensFlarePass.uniforms.uBeatEnergy.value = material.uniforms.uBeatEnergy.value;\n            vignettePass.uniforms.uBeatEnergy.value = material.uniforms.uBeatEnergy.value;\n            customDOFPass.uniforms.uBeatEnergy.value = material.uniforms.uBeatEnergy.value;\n\n\n\n            // Update trails\n            trailSystem.update(elapsed, {\n                bass: material.uniforms.uBass.value,\n                mid: material.uniforms.uMid.value,\n                high: material.uniforms.uHigh.value,\n                beat: material.uniforms.uBeatEnergy.value\n            }, material.uniforms.uColor1.value);\n\n            // === ENHANCEMENT: Adaptive Quality System ===\n            QUALITY_SYSTEM.update(dt * 1000);\n\n            // === ENHANCEMENT: Audio-Reactive Camera ===\n            AUDIO_CAMERA.update(dt * 1000);\n\n            // Camera shake\n            if (STATE.cameraShake > 0 && AUDIO.beatEnergy > 0.1) {\n                const shake = AUDIO.beatEnergy * STATE.cameraShake;\n                cameraShakeOffset.set((Math.random() - 0.5) * shake * 0.6, (Math.random() - 0.5) * shake * 0.4, (Math.random() - 0.5) * shake * 0.25);\n                camera.position.copy(baseCameraPos).add(cameraShakeOffset);\n            }\n\n            controls.autoRotateSpeed = 0.35 + material.uniforms.uMid.value * 2.0 + material.uniforms.uBeatEnergy.value * 2.0;\n            bloomPass.strength = STATE.bloom + (AUDIO.gatedBands.bass + AUDIO.gatedBands.mid + AUDIO.beatEnergy) / 6;\n            bloomPass.enabled = bloomPass.strength > 0;\n            anamorphicPass.uniforms.uIntensity.value = STATE.anamorphicStretch + AUDIO.gatedBands.bass * 0.4;\n            anamorphicPass.enabled = anamorphicPass.uniforms.uIntensity.value > 0;\n\n            controls.update();\n            composer.render();\n        }\n\n        window.addEventListener('resize', () => {\n            camera.aspect = window.innerWidth / window.innerHeight;\n            camera.updateProjectionMatrix();\n            material.uniforms.uViewportAspect.value = window.innerWidth / window.innerHeight;\n            secondaryMaterial.uniforms.uViewportAspect.value = material.uniforms.uViewportAspect.value;\n            material.uniforms.uViewportHalfHeight.value = Math.tan(camera.fov * Math.PI / 360) * CONFIG.defaultZoom;\n            secondaryMaterial.uniforms.uViewportHalfHeight.value = material.uniforms.uViewportHalfHeight.value;\n            renderer.setSize(window.innerWidth, window.innerHeight);\n            composer.setSize(window.innerWidth, window.innerHeight);\n            STATE.pixelRatio = fitPixelRatio();\n            QUALITY_SYSTEM.applyQuality();\n            customDOFPass.uniforms.uResolution.value.set(window.innerWidth, window.innerHeight);\n            baseCameraPos.copy(camera.position);\n        });\n\n        let pausedFromKit = false;\n        let requestedTimeScale = STATE.timeScale;\n        const sideEffects = {\n            particleDepth: value => particleUniforms.uParticleDepth.value = THREE.MathUtils.clamp(value, 0, 1),\n            particleScale: value => particleUniforms.uParticleScale.value = THREE.MathUtils.clamp(value, 0.5, 3),\n            particleSharpness: value => particleUniforms.uParticleSharpness.value = THREE.MathUtils.clamp(value, 0, 1),\n            trails: value => afterimagePass.uniforms['damp'].value = value,\n            chromaticAberration: value => { chromaticPass.uniforms.uIntensity.value = value; chromaticPass.enabled = value > 0; },\n            filmGrain: value => { grainPass.uniforms.uIntensity.value = value; grainPass.enabled = value > 0; },\n            nebulaIntensity: value => nebulaMaterial.uniforms.uIntensity.value = value,\n            lensFlareEnabled: value => lensFlarePass.enabled = value && STATE.lensFlareIntensity > 0,\n            lensFlareIntensity: value => { lensFlarePass.uniforms.uIntensity.value = value; lensFlarePass.enabled = STATE.lensFlareEnabled && value > 0; },\n            dofEnabled: value => customDOFPass.enabled = value,\n            dofFocus: value => customDOFPass.uniforms.uFocus.value = value,\n            dofFocalLength: value => customDOFPass.uniforms.uFocalLength.value = value,\n            dofBokehStrength: value => customDOFPass.uniforms.uBokehStrength.value = value,\n            godRaysEnabled: value => godRaysPass.enabled = value && STATE.godRaysIntensity > 0,\n            godRaysIntensity: value => { godRaysPass.uniforms.uIntensity.value = value; godRaysPass.enabled = STATE.godRaysEnabled && value > 0; },\n            vortexStrength: value => material.uniforms.uVortexStrength.value = value,\n            pulseIntensity: value => material.uniforms.uPulseIntensity.value = value,\n            fieldSize: value => { material.uniforms.uFieldFill.value = value; secondaryMaterial.uniforms.uFieldFill.value = value; },\n        };\n        window.addEventListener('message', ({ source, data }) => {\n            if (source !== parent || data?.type !== 'ad-qf-control') return;\n            const { key, value } = data;\n            if (key === 'field' && FIELD_TYPES[value]) {\n                STATE.field = value;\n                const selected = FIELD_TYPES[value];\n                material.uniforms.uNoiseScale.value = selected.s;\n                material.uniforms.uCurlStrength.value = selected.curl;\n                material.uniforms.uSizeBase.value = selected.sz;\n            } else if (key === 'visible') {\n                renderVisible = !!value;\n                if (renderVisible) startFrames();\n                else stopFrames();\n            }\n            else if (key === 'interactive') controls.enabled = !!value;\n            else if (key === 'spectrum') EXTERNAL.set(value?.bands, value?.range);\n            else if (key === 'particleCount') {\n                particleCount = Number.isFinite(value) ? Math.max(0, Math.floor(value)) : null;\n                QUALITY_SYSTEM.applyQuality();\n            }\n            else if (key === 'particleBudget') {\n                particleBudget = Number.isFinite(value) ? Math.max(0, Math.floor(value)) : Infinity;\n                QUALITY_SYSTEM.applyQuality();\n            }\n            else if (key === 'timeScale') { requestedTimeScale = value; if (!pausedFromKit) STATE.timeScale = value; }\n            else if (key === 'paused') { pausedFromKit = !!value; STATE.timeScale = pausedFromKit ? 0 : requestedTimeScale; }\n            else if (key === 'play') togglePlayPause();\n            else if (key === 'file' && value) loadTrack(value);\n            else if (key === 'mic') {\n                if (AUDIO.mode === 'mic') { AUDIO.stopCurrentSource(); AUDIO.mode = null; }\n                else startMic(null);\n            }\n            else if (key === 'seek') { AUDIO.seek(value); updateUI(); }\n            else if (key === 'screenshot') document.getElementById('screenshot-btn').click();\n            else if (key === 'palette' && Array.isArray(value)) {\n                const main = new THREE.Color(value[0]), light = new THREE.Color(value[1]);\n                applyCssTheme(main);\n                material.uniforms.uColor1.value.copy(main);\n                material.uniforms.uColor2.value.copy(light);\n                material.uniforms.uColor3.value.copy(light).lerp(new THREE.Color('#ffffff'), 0.32);\n                secondaryMaterial.uniforms.uColor1.value.copy(main);\n                secondaryMaterial.uniforms.uColor2.value.copy(light);\n                nebulaMaterial.uniforms.uColor1.value.copy(main);\n                nebulaMaterial.uniforms.uColor2.value.copy(light);\n                nebulaMaterial.uniforms.uColor3.value.copy(main);\n                connectionMaterial.uniforms.uColor.value.copy(light);\n                connectionMaterial.uniforms.uColor2.value.copy(main);\n                const white = new THREE.Color('#ffffff');\n                const tint = glowColor(light.clone().lerp(white, 0.35), 0.75);\n                lensFlarePass.uniforms.uTint.value.copy(tint);\n                anamorphicPass.uniforms.uTint.value.copy(tint);\n                // Reaction lines stand out from the field like the presets' contrasting colours did:\n                // a luminous tint of the theme's light colour with a near-white core on bright passages.\n                glowColor(crawlerLow.copy(light).lerp(white, 0.2), 0.75);\n                glowColor(crawlerHigh.copy(light).lerp(white, 0.5), 0.95);\n                crawlerMaterial.uniforms.uColor.value.copy(crawlerLow);\n                trailSystem.trails.forEach((trail, i) => glowColor(trail.color.copy(main).lerp(light, i / Math.max(1, trailSystem.trails.length - 1)).lerp(white, 0.15), 0.6));\n            } else if (Object.prototype.hasOwnProperty.call(STATE, key)) {\n                STATE[key] = value;\n                if (key === 'density') QUALITY_SYSTEM.applyQuality();\n                sideEffects[key]?.(value);\n            }\n        });\n        let lastTransport = '';\n        setInterval(() => {\n            if (!renderVisible || document.hidden) return;\n            const value = {\n                mode: AUDIO.mode, playing: AUDIO.isPlaying,\n                current: AUDIO.mode === 'file' ? AUDIO.getCurrentTime() : 0,\n                duration: AUDIO.mode === 'file' ? AUDIO.getDuration() : 0,\n                track: AUDIO.mode ? AUDIO.currentTrackName : ''\n            };\n            const snapshot = JSON.stringify(value);\n            if (snapshot !== lastTransport) {\n                lastTransport = snapshot;\n                parent.postMessage({ type: 'ad-qf-transport', value }, '*');\n            }\n        }, 250);\n        parent.postMessage({ type: 'ad-qf-ready' }, '*');\n\n        QUALITY_SYSTEM.applyQuality();\n        startFrames();\n    <\/script>\n</body>\n\n</html>\n";
 
 // src/components/artwork/QuantumField/QuantumFieldExperience.tsx
-import { jsx as jsx46, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs33 } from "react/jsx-runtime";
 var quantumBackgroundThreeUrl = "https://unpkg.com/three@0.182.0/";
 var sceneDocument = (threeUrl) => {
   const base = threeUrl.endsWith("/") ? threeUrl : `${threeUrl}/`;
@@ -5092,7 +4814,10 @@ var quantumBackgroundControls = [
     { key: "sensitivity", label: "\u0427\u0443\u0432\u0441\u0442\u0432\u0438\u0442\u0435\u043B\u044C\u043D\u043E\u0441\u0442\u044C", value: 1.1, min: 0.1, max: 3, step: 0.01 },
     { key: "density", label: "\u041F\u043B\u043E\u0442\u043D\u043E\u0441\u0442\u044C", value: 0.043, min: 0.017, max: 0.14, step: 1e-3 },
     { key: "timeScale", label: "\u0421\u043A\u043E\u0440\u043E\u0441\u0442\u044C", value: 1, min: 0, max: 3, step: 0.01 },
-    { key: "fieldSize", label: "\u0420\u0430\u0437\u043C\u0435\u0440 \u043F\u043E\u043B\u044F", value: 0.78, min: 0.3, max: 1.2, step: 0.01 }
+    { key: "fieldSize", label: "\u0420\u0430\u0437\u043C\u0435\u0440 \u043F\u043E\u043B\u044F", value: 0.78, min: 0.3, max: 1.2, step: 0.01 },
+    { key: "particleDepth", label: "\u0413\u043B\u0443\u0431\u0438\u043D\u0430 \u0447\u0430\u0441\u0442\u0438\u0446", value: 0, min: 0, max: 1, step: 0.01 },
+    { key: "particleScale", label: "\u0420\u0430\u0437\u043C\u0435\u0440 \u0447\u0430\u0441\u0442\u0438\u0446", value: 1, min: 0.5, max: 3, step: 0.01 },
+    { key: "particleSharpness", label: "\u0427\u0451\u0442\u043A\u043E\u0441\u0442\u044C \u0447\u0430\u0441\u0442\u0438\u0446", value: 0, min: 0, max: 1, step: 0.01 }
   ] },
   { id: "environment", label: "\u0421\u0440\u0435\u0434\u0430", controls: [
     { key: "nebulaEnabled", label: "\u0422\u0443\u043C\u0430\u043D\u043D\u043E\u0441\u0442\u044C", value: false },
@@ -5149,7 +4874,7 @@ var quantumBackgroundDefaults = Object.freeze(Object.fromEntries(
 var settingKeys = Object.keys(quantumBackgroundDefaults);
 var quantumBackgroundFullscreenFieldSize = 1.1;
 var quantumBackgroundMaxParticles = 85e3;
-var QuantumBackground = /* @__PURE__ */ forwardRef3(function QuantumBackground2(props, ref) {
+var QuantumBackground = /* @__PURE__ */ forwardRef(function QuantumBackground2(props, ref) {
   const {
     className = "",
     particleCount,
@@ -5172,13 +4897,13 @@ var QuantumBackground = /* @__PURE__ */ forwardRef3(function QuantumBackground2(
   }
   if (fullscreen) settings.fieldSize ??= quantumBackgroundFullscreenFieldSize;
   for (const key of settingKeys) settings[key] ??= quantumBackgroundDefaults[key];
-  const frame = useRef26(null);
-  const root = useRef26(null);
+  const frame = useRef24(null);
+  const root = useRef24(null);
   const theme = useThemePalette();
-  const [mounted, setMounted] = useState10(typeof IntersectionObserver === "undefined");
-  const [ready, setReady] = useState10(false);
-  const sent = useRef26({});
-  const callbacks = useRef26({ onTransportChange, onWaveformChange, onFullscreenChange });
+  const [mounted, setMounted] = useState9(typeof IntersectionObserver === "undefined");
+  const [ready, setReady] = useState9(false);
+  const sent = useRef24({});
+  const callbacks = useRef24({ onTransportChange, onWaveformChange, onFullscreenChange });
   callbacks.current = { onTransportChange, onWaveformChange, onFullscreenChange };
   const normalizedBudget = typeof particleBudget === "number" && Number.isFinite(particleBudget) ? Math.max(0, Math.floor(particleBudget)) : void 0;
   const normalizedCount = typeof particleCount === "number" && Number.isFinite(particleCount) ? Math.min(quantumBackgroundMaxParticles, Math.max(0, Math.floor(particleCount))) : void 0;
@@ -5231,7 +4956,7 @@ var QuantumBackground = /* @__PURE__ */ forwardRef3(function QuantumBackground2(
   useEffect9(() => {
     if (ready) send("spectrum", { bands: spectrum ? [...spectrum] : null, range: [low, high] });
   }, [ready, spectrum, low, high]);
-  useLayoutEffect5(() => {
+  useLayoutEffect4(() => {
     const node = root.current;
     if (!fullscreen || !node?.showPopover) return;
     node.showPopover();
@@ -5259,7 +4984,7 @@ var QuantumBackground = /* @__PURE__ */ forwardRef3(function QuantumBackground2(
     if (!ready) return;
     send("palette", [theme.primary, theme.secondary]);
   }, [ready, theme.primary, theme.secondary]);
-  return /* @__PURE__ */ jsxs37(
+  return /* @__PURE__ */ jsxs33(
     "div",
     {
       "data-ad-component": "QuantumBackground",
@@ -5269,7 +4994,7 @@ var QuantumBackground = /* @__PURE__ */ forwardRef3(function QuantumBackground2(
       popover: fullscreen ? "manual" : void 0,
       ...attributes,
       children: [
-        mounted && /* @__PURE__ */ jsx46(
+        mounted && /* @__PURE__ */ jsx41(
           "iframe",
           {
             ref: frame,
@@ -5280,7 +5005,7 @@ var QuantumBackground = /* @__PURE__ */ forwardRef3(function QuantumBackground2(
             "data-particle-count": normalizedCount
           }
         ),
-        children != null && /* @__PURE__ */ jsx46("div", { className: "ad-qb-content", children })
+        children != null && /* @__PURE__ */ jsx41("div", { className: "ad-qb-content", children })
       ]
     }
   );
@@ -5371,8 +5096,8 @@ function createQuantumFieldAudio() {
 }
 
 // src/components/artwork/Spectrum/Spectrum.tsx
-import { useRef as useRef27 } from "react";
-import { jsx as jsx47, jsxs as jsxs38 } from "react/jsx-runtime";
+import { useRef as useRef25 } from "react";
+import { jsx as jsx42, jsxs as jsxs34 } from "react/jsx-runtime";
 var COLUMNS = 27;
 var ROWS = 29;
 var BARS = 23;
@@ -5384,11 +5109,11 @@ var barHeight = (i, time) => {
   return 9 + 100 * envelope * (0.53 + 0.47 * rhythm) + 15 * Math.sin(i * 0.67 + time * 0.58) ** 2;
 };
 function Spectrum({ variant = "segmented", ...p }) {
-  return variant === "segmented" ? /* @__PURE__ */ jsx47(Segmented, { ...p }) : /* @__PURE__ */ jsx47(Bars, { ...p });
+  return variant === "segmented" ? /* @__PURE__ */ jsx42(Segmented, { ...p }) : /* @__PURE__ */ jsx42(Bars, { ...p });
 }
 function Segmented(p) {
-  const ref = useRef27(null);
-  const columns2 = useRef27(null);
+  const ref = useRef25(null);
+  const columns2 = useRef25(null);
   usePauseOffscreen(ref);
   useDecoration(ref, (time) => {
     if (!ref.current) return;
@@ -5399,19 +5124,19 @@ function Segmented(p) {
       column.firstElementChild?.style.setProperty("transform", `translateY(${(-hidden).toFixed(2)}%)`);
     });
   });
-  return /* @__PURE__ */ jsx47("div", { ...mark("Spectrum", p), ref, "data-variant": "segmented", "aria-hidden": "true", children: Array.from({ length: COLUMNS }, (_, i) => /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx42("div", { ...mark("Spectrum", p), ref, "data-variant": "segmented", "aria-hidden": "true", children: Array.from({ length: COLUMNS }, (_, i) => /* @__PURE__ */ jsx42(
     "span",
     {
       className: "ad-spectrum-column",
       style: { left: `${(i * 12 + 3) / 325 * 100}%`, width: `${8 / 325 * 100}%` },
-      children: /* @__PURE__ */ jsx47("svg", { viewBox: "0 0 8 232", preserveAspectRatio: "none", children: Array.from({ length: ROWS }, (__, row) => /* @__PURE__ */ jsx47("rect", { y: 224 - row * 7, width: "8", height: "5", rx: ".35", opacity: 0.17 + row / 35 }, row)) })
+      children: /* @__PURE__ */ jsx42("svg", { viewBox: "0 0 8 232", preserveAspectRatio: "none", children: Array.from({ length: ROWS }, (__, row) => /* @__PURE__ */ jsx42("rect", { y: 224 - row * 7, width: "8", height: "5", rx: ".35", opacity: 0.17 + row / 35 }, row)) })
     },
     i
   )) });
 }
 function Bars(p) {
-  const ref = useRef27(null);
-  const layers = useRef27(null);
+  const ref = useRef25(null);
+  const layers = useRef25(null);
   const id = useSvgId();
   usePauseOffscreen(ref);
   useDecoration(ref, (time) => {
@@ -5429,7 +5154,7 @@ function Bars(p) {
       });
     });
   });
-  return /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs34(
     "svg",
     {
       ...mark("Spectrum", p),
@@ -5439,23 +5164,23 @@ function Bars(p) {
       preserveAspectRatio: "none",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsxs38("defs", { children: [
-          /* @__PURE__ */ jsxs38("linearGradient", { id: `${id}-bar`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
-            /* @__PURE__ */ jsx47("stop", { stopColor: "var(--ad-secondary-200)" }),
-            /* @__PURE__ */ jsx47("stop", { offset: ".24", stopColor: "var(--ad-red)" }),
-            /* @__PURE__ */ jsx47("stop", { offset: "1", stopColor: "var(--ad-primary-600)", stopOpacity: "0" })
+        /* @__PURE__ */ jsxs34("defs", { children: [
+          /* @__PURE__ */ jsxs34("linearGradient", { id: `${id}-bar`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx42("stop", { stopColor: "var(--ad-secondary-200)" }),
+            /* @__PURE__ */ jsx42("stop", { offset: ".24", stopColor: "var(--ad-red)" }),
+            /* @__PURE__ */ jsx42("stop", { offset: "1", stopColor: "var(--ad-primary-600)", stopOpacity: "0" })
           ] }),
-          /* @__PURE__ */ jsxs38("linearGradient", { id: `${id}-halo`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
-            /* @__PURE__ */ jsx47("stop", { stopColor: "var(--ad-red)", stopOpacity: ".6" }),
-            /* @__PURE__ */ jsx47("stop", { offset: ".24", stopColor: "var(--ad-red)", stopOpacity: ".6" }),
-            /* @__PURE__ */ jsx47("stop", { offset: "1", stopColor: "var(--ad-red)", stopOpacity: "0" })
+          /* @__PURE__ */ jsxs34("linearGradient", { id: `${id}-halo`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx42("stop", { stopColor: "var(--ad-red)", stopOpacity: ".6" }),
+            /* @__PURE__ */ jsx42("stop", { offset: ".24", stopColor: "var(--ad-red)", stopOpacity: ".6" }),
+            /* @__PURE__ */ jsx42("stop", { offset: "1", stopColor: "var(--ad-red)", stopOpacity: "0" })
           ] })
         ] }),
         Array.from({ length: BARS }, (_, i) => {
           const x = 4 + i * 6.75;
           const opacity = 0.55 + i / 55;
-          return /* @__PURE__ */ jsxs38("g", { "data-bar": true, children: [
-            HALO.map(([grow, halo]) => /* @__PURE__ */ jsx47(
+          return /* @__PURE__ */ jsxs34("g", { "data-bar": true, children: [
+            HALO.map(([grow, halo]) => /* @__PURE__ */ jsx42(
               "rect",
               {
                 "data-grow": grow,
@@ -5469,7 +5194,7 @@ function Bars(p) {
               },
               grow
             )),
-            /* @__PURE__ */ jsx47("rect", { x, y: "40", width: "2.8", height: "100", rx: "1.3", fill: `url(#${id}-bar)`, opacity })
+            /* @__PURE__ */ jsx42("rect", { x, y: "40", width: "2.8", height: "100", rx: "1.3", fill: `url(#${id}-bar)`, opacity })
           ] }, i);
         })
       ]
@@ -5478,7 +5203,7 @@ function Bars(p) {
 }
 
 // src/components/artwork/layers.tsx
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 function ArtLayer({
   viewBox,
   className,
@@ -5487,7 +5212,7 @@ function ArtLayer({
   children
 }) {
   const [, , width, height] = viewBox.split(" ").map(Number);
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx43(
     "svg",
     {
       className: className ? `ad-art-layer ${className}` : "ad-art-layer",
@@ -5501,7 +5226,7 @@ function ArtLayer({
 }
 
 // src/components/artwork/DatabaseArt/DatabaseArt.tsx
-import { jsx as jsx49, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs35 } from "react/jsx-runtime";
 var SPARKS = [
   [42, 84, 1, -1],
   [44, 111, 1, -2.7],
@@ -5515,7 +5240,7 @@ function DatabaseArt({ label, ...p }) {
   const ref = (name) => `url(#${id}-${name})`;
   const rings = "M39 83C39 106 134 106 134 83M39 108C39 132 134 132 134 108M39 133C39 155 134 155 134 133";
   const box = "0 0 170 179";
-  return /* @__PURE__ */ jsxs39(
+  return /* @__PURE__ */ jsxs35(
     "div",
     {
       ...mark("DatabaseArt", p),
@@ -5523,42 +5248,42 @@ function DatabaseArt({ label, ...p }) {
       "aria-label": label,
       "aria-hidden": !label,
       children: [
-        /* @__PURE__ */ jsx49(ArtLayer, { viewBox: box, children: /* @__PURE__ */ jsxs39("defs", { children: [
-          /* @__PURE__ */ jsx49("filter", { id: `${id}-bloom`, x: "-50%", y: "-50%", width: "200%", height: "200%", children: /* @__PURE__ */ jsx49("feGaussianBlur", { stdDeviation: "3" }) }),
-          /* @__PURE__ */ jsxs39("linearGradient", { id: `${id}-body`, children: [
-            /* @__PURE__ */ jsx49("stop", { stopColor: "var(--ad-primary-600)" }),
-            /* @__PURE__ */ jsx49("stop", { offset: ".12", stopColor: "var(--ad-primary-800)" }),
-            /* @__PURE__ */ jsx49("stop", { offset: ".3", stopColor: "var(--ad-primary-900)" }),
-            /* @__PURE__ */ jsx49("stop", { offset: ".72", stopColor: "var(--ad-neutral-950)" }),
-            /* @__PURE__ */ jsx49("stop", { offset: "1", stopColor: "var(--ad-primary-800)" })
+        /* @__PURE__ */ jsx44(ArtLayer, { viewBox: box, children: /* @__PURE__ */ jsxs35("defs", { children: [
+          /* @__PURE__ */ jsx44("filter", { id: `${id}-bloom`, x: "-50%", y: "-50%", width: "200%", height: "200%", children: /* @__PURE__ */ jsx44("feGaussianBlur", { stdDeviation: "3" }) }),
+          /* @__PURE__ */ jsxs35("linearGradient", { id: `${id}-body`, children: [
+            /* @__PURE__ */ jsx44("stop", { stopColor: "var(--ad-primary-600)" }),
+            /* @__PURE__ */ jsx44("stop", { offset: ".12", stopColor: "var(--ad-primary-800)" }),
+            /* @__PURE__ */ jsx44("stop", { offset: ".3", stopColor: "var(--ad-primary-900)" }),
+            /* @__PURE__ */ jsx44("stop", { offset: ".72", stopColor: "var(--ad-neutral-950)" }),
+            /* @__PURE__ */ jsx44("stop", { offset: "1", stopColor: "var(--ad-primary-800)" })
           ] }),
-          /* @__PURE__ */ jsxs39("radialGradient", { id: `${id}-top`, cx: ".3", cy: ".27", r: ".9", children: [
-            /* @__PURE__ */ jsx49("stop", { stopColor: "var(--ad-primary-600)" }),
-            /* @__PURE__ */ jsx49("stop", { offset: ".23", stopColor: "var(--ad-primary-800)" }),
-            /* @__PURE__ */ jsx49("stop", { offset: ".66", stopColor: "var(--ad-neutral-900)" }),
-            /* @__PURE__ */ jsx49("stop", { offset: "1", stopColor: "var(--ad-primary-900)" })
+          /* @__PURE__ */ jsxs35("radialGradient", { id: `${id}-top`, cx: ".3", cy: ".27", r: ".9", children: [
+            /* @__PURE__ */ jsx44("stop", { stopColor: "var(--ad-primary-600)" }),
+            /* @__PURE__ */ jsx44("stop", { offset: ".23", stopColor: "var(--ad-primary-800)" }),
+            /* @__PURE__ */ jsx44("stop", { offset: ".66", stopColor: "var(--ad-neutral-900)" }),
+            /* @__PURE__ */ jsx44("stop", { offset: "1", stopColor: "var(--ad-primary-900)" })
           ] }),
-          /* @__PURE__ */ jsxs39("linearGradient", { id: `${id}-edge`, children: [
-            /* @__PURE__ */ jsx49("stop", { stopColor: "var(--ad-neutral-200)" }),
-            /* @__PURE__ */ jsx49("stop", { offset: ".16", stopColor: "var(--ad-secondary)" }),
-            /* @__PURE__ */ jsx49("stop", { offset: ".47", stopColor: "var(--ad-primary-700)" }),
-            /* @__PURE__ */ jsx49("stop", { offset: ".8", stopColor: "var(--ad-primary)" }),
-            /* @__PURE__ */ jsx49("stop", { offset: "1", stopColor: "var(--ad-secondary-200)" })
+          /* @__PURE__ */ jsxs35("linearGradient", { id: `${id}-edge`, children: [
+            /* @__PURE__ */ jsx44("stop", { stopColor: "var(--ad-neutral-200)" }),
+            /* @__PURE__ */ jsx44("stop", { offset: ".16", stopColor: "var(--ad-secondary)" }),
+            /* @__PURE__ */ jsx44("stop", { offset: ".47", stopColor: "var(--ad-primary-700)" }),
+            /* @__PURE__ */ jsx44("stop", { offset: ".8", stopColor: "var(--ad-primary)" }),
+            /* @__PURE__ */ jsx44("stop", { offset: "1", stopColor: "var(--ad-secondary-200)" })
           ] }),
-          /* @__PURE__ */ jsxs39("radialGradient", { id: `${id}-aura`, children: [
-            /* @__PURE__ */ jsx49("stop", { stopColor: "var(--ad-primary)", stopOpacity: ".3" }),
-            /* @__PURE__ */ jsx49("stop", { offset: ".5", stopColor: "var(--ad-primary)", stopOpacity: ".12" }),
-            /* @__PURE__ */ jsx49("stop", { offset: "1", stopColor: "var(--ad-primary)", stopOpacity: "0" })
+          /* @__PURE__ */ jsxs35("radialGradient", { id: `${id}-aura`, children: [
+            /* @__PURE__ */ jsx44("stop", { stopColor: "var(--ad-primary)", stopOpacity: ".3" }),
+            /* @__PURE__ */ jsx44("stop", { offset: ".5", stopColor: "var(--ad-primary)", stopOpacity: ".12" }),
+            /* @__PURE__ */ jsx44("stop", { offset: "1", stopColor: "var(--ad-primary)", stopOpacity: "0" })
           ] }),
-          /* @__PURE__ */ jsxs39("g", { id: `${id}-spark`, children: [
-            /* @__PURE__ */ jsx49("path", { d: "M-7 0H7M0-8V8", stroke: "var(--ad-secondary-200)", strokeWidth: ".7" }),
-            /* @__PURE__ */ jsx49("circle", { r: "3.4", fill: "var(--ad-primary)", filter: ref("bloom") }),
-            /* @__PURE__ */ jsx49("circle", { r: "1.4", fill: "var(--ad-neutral-200)" })
+          /* @__PURE__ */ jsxs35("g", { id: `${id}-spark`, children: [
+            /* @__PURE__ */ jsx44("path", { d: "M-7 0H7M0-8V8", stroke: "var(--ad-secondary-200)", strokeWidth: ".7" }),
+            /* @__PURE__ */ jsx44("circle", { r: "3.4", fill: "var(--ad-primary)", filter: ref("bloom") }),
+            /* @__PURE__ */ jsx44("circle", { r: "1.4", fill: "var(--ad-neutral-200)" })
           ] })
         ] }) }),
-        /* @__PURE__ */ jsx49(ArtLayer, { viewBox: box, className: "ad-art-aura-layer", origin: [85, 120], children: /* @__PURE__ */ jsx49("ellipse", { cx: "85", cy: "120", rx: "83", ry: "71", fill: ref("aura") }) }),
-        /* @__PURE__ */ jsx49(ArtLayer, { viewBox: box, children: /* @__PURE__ */ jsxs39("g", { transform: "translate(0 2)", children: [
-          /* @__PURE__ */ jsx49(
+        /* @__PURE__ */ jsx44(ArtLayer, { viewBox: box, className: "ad-art-aura-layer", origin: [85, 120], children: /* @__PURE__ */ jsx44("ellipse", { cx: "85", cy: "120", rx: "83", ry: "71", fill: ref("aura") }) }),
+        /* @__PURE__ */ jsx44(ArtLayer, { viewBox: box, children: /* @__PURE__ */ jsxs35("g", { transform: "translate(0 2)", children: [
+          /* @__PURE__ */ jsx44(
             "path",
             {
               d: "M39 57V133C39 156 134 156 134 133V57Z",
@@ -5567,7 +5292,7 @@ function DatabaseArt({ label, ...p }) {
               strokeWidth: ".75"
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx44(
             "path",
             {
               d: rings,
@@ -5577,8 +5302,8 @@ function DatabaseArt({ label, ...p }) {
               filter: ref("bloom")
             }
           ),
-          /* @__PURE__ */ jsx49("path", { d: rings, stroke: ref("edge"), strokeWidth: "1.4" }),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx44("path", { d: rings, stroke: ref("edge"), strokeWidth: "1.4" }),
+          /* @__PURE__ */ jsx44(
             "ellipse",
             {
               cx: "86.5",
@@ -5590,7 +5315,7 @@ function DatabaseArt({ label, ...p }) {
               strokeWidth: "1.1"
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx44(
             "ellipse",
             {
               cx: "86.5",
@@ -5603,7 +5328,7 @@ function DatabaseArt({ label, ...p }) {
               filter: ref("bloom")
             }
           ),
-          /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx44(
             "ellipse",
             {
               cx: "86.5",
@@ -5615,7 +5340,7 @@ function DatabaseArt({ label, ...p }) {
               opacity: ".8"
             }
           ),
-          [81, 106, 132].map((cy) => /* @__PURE__ */ jsx49(
+          [81, 106, 132].map((cy) => /* @__PURE__ */ jsx44(
             "ellipse",
             {
               cx: "86.5",
@@ -5629,7 +5354,7 @@ function DatabaseArt({ label, ...p }) {
             cy
           ))
         ] }) }),
-        /* @__PURE__ */ jsx49(ArtLayer, { viewBox: box, className: "ad-art-orbits", children: /* @__PURE__ */ jsx49("g", { transform: "translate(0 2)", stroke: "var(--ad-neutral-200)", strokeWidth: "1.45", children: [57, 106, 132].map((cy, i) => /* @__PURE__ */ jsx49(
+        /* @__PURE__ */ jsx44(ArtLayer, { viewBox: box, className: "ad-art-orbits", children: /* @__PURE__ */ jsx44("g", { transform: "translate(0 2)", stroke: "var(--ad-neutral-200)", strokeWidth: "1.45", children: [57, 106, 132].map((cy, i) => /* @__PURE__ */ jsx44(
           "ellipse",
           {
             className: "ad-art-orbit",
@@ -5642,8 +5367,8 @@ function DatabaseArt({ label, ...p }) {
           },
           cy
         )) }) }),
-        /* @__PURE__ */ jsx49(ArtLayer, { viewBox: box, children: /* @__PURE__ */ jsxs39("g", { transform: "translate(0 2)", children: [
-          /* @__PURE__ */ jsx49(
+        /* @__PURE__ */ jsx44(ArtLayer, { viewBox: box, children: /* @__PURE__ */ jsxs35("g", { transform: "translate(0 2)", children: [
+          /* @__PURE__ */ jsx44(
             "ellipse",
             {
               cx: "86.5",
@@ -5654,16 +5379,16 @@ function DatabaseArt({ label, ...p }) {
               filter: ref("bloom")
             }
           ),
-          /* @__PURE__ */ jsx49("ellipse", { cx: "86.5", cy: "53.5", rx: "3.4", ry: ".8", fill: "var(--ad-secondary-200)" })
+          /* @__PURE__ */ jsx44("ellipse", { cx: "86.5", cy: "53.5", rx: "3.4", ry: ".8", fill: "var(--ad-secondary-200)" })
         ] }) }),
-        SPARKS.map(([x, y, scale, delay]) => /* @__PURE__ */ jsx49(
+        SPARKS.map(([x, y, scale, delay]) => /* @__PURE__ */ jsx44(
           ArtLayer,
           {
             viewBox: box,
             className: "ad-art-spark-layer",
             origin: [x, y],
             style: { "--ad-delay": `${delay}s` },
-            children: /* @__PURE__ */ jsx49("use", { href: `#${id}-spark`, transform: `translate(${x} ${y}) scale(${scale})` })
+            children: /* @__PURE__ */ jsx44("use", { href: `#${id}-spark`, transform: `translate(${x} ${y}) scale(${scale})` })
           },
           `${x}-${y}`
         ))
@@ -5673,7 +5398,7 @@ function DatabaseArt({ label, ...p }) {
 }
 
 // src/components/artwork/ServerArt/ServerArt.tsx
-import { jsx as jsx50, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs36 } from "react/jsx-runtime";
 var rackRows = Array.from({ length: 15 }, (_, row) => row);
 var rackLines = rackRows.map((row) => `M33 ${50 + row * 3.35} 90 ${38.8 + row * 3.35}`).join(" ");
 var rackHatches = rackRows.flatMap((row) => Array.from({ length: 9 }, (_, col) => `M${34 + col * 6.15} ${49.8 + row * 3.35 - col * 1.205}l2.6-.51`)).join(" ");
@@ -5683,7 +5408,7 @@ function ServerArt({ upload = false, label, ...p }) {
   const box = "0 0 180 170";
   const lift = upload ? "translate(0 15)" : void 0;
   const dy = upload ? 15 : 0;
-  return /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsxs36(
     "div",
     {
       ...mark("ServerArt", p),
@@ -5691,40 +5416,40 @@ function ServerArt({ upload = false, label, ...p }) {
       "aria-label": label,
       "aria-hidden": !label,
       children: [
-        /* @__PURE__ */ jsx50(ArtLayer, { viewBox: box, children: /* @__PURE__ */ jsxs40("defs", { children: [
-          /* @__PURE__ */ jsxs40("linearGradient", { id: `${id}-front`, x1: "0", y1: "0", x2: "1", y2: "1", children: [
-            /* @__PURE__ */ jsx50("stop", { stopColor: "var(--ad-primary-700)" }),
-            /* @__PURE__ */ jsx50("stop", { offset: ".22", stopColor: "var(--ad-primary-900)" }),
-            /* @__PURE__ */ jsx50("stop", { offset: ".72", stopColor: "var(--ad-neutral-900)" }),
-            /* @__PURE__ */ jsx50("stop", { offset: "1", stopColor: "var(--ad-primary-800)" })
+        /* @__PURE__ */ jsx45(ArtLayer, { viewBox: box, children: /* @__PURE__ */ jsxs36("defs", { children: [
+          /* @__PURE__ */ jsxs36("linearGradient", { id: `${id}-front`, x1: "0", y1: "0", x2: "1", y2: "1", children: [
+            /* @__PURE__ */ jsx45("stop", { stopColor: "var(--ad-primary-700)" }),
+            /* @__PURE__ */ jsx45("stop", { offset: ".22", stopColor: "var(--ad-primary-900)" }),
+            /* @__PURE__ */ jsx45("stop", { offset: ".72", stopColor: "var(--ad-neutral-900)" }),
+            /* @__PURE__ */ jsx45("stop", { offset: "1", stopColor: "var(--ad-primary-800)" })
           ] }),
-          /* @__PURE__ */ jsxs40("linearGradient", { id: `${id}-side`, x1: "0", y1: "0", x2: ".9", y2: "1", children: [
-            /* @__PURE__ */ jsx50("stop", { stopColor: "var(--ad-primary-800)" }),
-            /* @__PURE__ */ jsx50("stop", { offset: ".27", stopColor: "var(--ad-primary-900)" }),
-            /* @__PURE__ */ jsx50("stop", { offset: "1", stopColor: "var(--ad-neutral-950)" })
+          /* @__PURE__ */ jsxs36("linearGradient", { id: `${id}-side`, x1: "0", y1: "0", x2: ".9", y2: "1", children: [
+            /* @__PURE__ */ jsx45("stop", { stopColor: "var(--ad-primary-800)" }),
+            /* @__PURE__ */ jsx45("stop", { offset: ".27", stopColor: "var(--ad-primary-900)" }),
+            /* @__PURE__ */ jsx45("stop", { offset: "1", stopColor: "var(--ad-neutral-950)" })
           ] }),
-          /* @__PURE__ */ jsxs40("linearGradient", { id: `${id}-top`, x1: "0", y1: "0", x2: ".7", y2: "1", children: [
-            /* @__PURE__ */ jsx50("stop", { stopColor: "var(--ad-secondary-200)" }),
-            /* @__PURE__ */ jsx50("stop", { offset: ".23", stopColor: "var(--ad-primary-600)" }),
-            /* @__PURE__ */ jsx50("stop", { offset: ".57", stopColor: "var(--ad-primary-800)" }),
-            /* @__PURE__ */ jsx50("stop", { offset: "1", stopColor: "var(--ad-neutral-900)" })
+          /* @__PURE__ */ jsxs36("linearGradient", { id: `${id}-top`, x1: "0", y1: "0", x2: ".7", y2: "1", children: [
+            /* @__PURE__ */ jsx45("stop", { stopColor: "var(--ad-secondary-200)" }),
+            /* @__PURE__ */ jsx45("stop", { offset: ".23", stopColor: "var(--ad-primary-600)" }),
+            /* @__PURE__ */ jsx45("stop", { offset: ".57", stopColor: "var(--ad-primary-800)" }),
+            /* @__PURE__ */ jsx45("stop", { offset: "1", stopColor: "var(--ad-neutral-900)" })
           ] }),
-          /* @__PURE__ */ jsxs40("linearGradient", { id: `${id}-edge`, x1: "0", y1: "0", x2: "1", y2: "1", children: [
-            /* @__PURE__ */ jsx50("stop", { stopColor: "var(--ad-secondary-200)" }),
-            /* @__PURE__ */ jsx50("stop", { offset: ".29", stopColor: "var(--ad-primary)" }),
-            /* @__PURE__ */ jsx50("stop", { offset: ".52", stopColor: "var(--ad-primary-700)" }),
-            /* @__PURE__ */ jsx50("stop", { offset: ".8", stopColor: "var(--ad-primary)" }),
-            /* @__PURE__ */ jsx50("stop", { offset: "1", stopColor: "var(--ad-primary-700)" })
+          /* @__PURE__ */ jsxs36("linearGradient", { id: `${id}-edge`, x1: "0", y1: "0", x2: "1", y2: "1", children: [
+            /* @__PURE__ */ jsx45("stop", { stopColor: "var(--ad-secondary-200)" }),
+            /* @__PURE__ */ jsx45("stop", { offset: ".29", stopColor: "var(--ad-primary)" }),
+            /* @__PURE__ */ jsx45("stop", { offset: ".52", stopColor: "var(--ad-primary-700)" }),
+            /* @__PURE__ */ jsx45("stop", { offset: ".8", stopColor: "var(--ad-primary)" }),
+            /* @__PURE__ */ jsx45("stop", { offset: "1", stopColor: "var(--ad-primary-700)" })
           ] }),
-          /* @__PURE__ */ jsxs40("radialGradient", { id: `${id}-aura`, children: [
-            /* @__PURE__ */ jsx50("stop", { stopColor: "var(--ad-primary)", stopOpacity: ".28" }),
-            /* @__PURE__ */ jsx50("stop", { offset: ".6", stopColor: "var(--ad-primary)", stopOpacity: ".06" }),
-            /* @__PURE__ */ jsx50("stop", { offset: "1", stopColor: "var(--ad-primary)", stopOpacity: "0" })
+          /* @__PURE__ */ jsxs36("radialGradient", { id: `${id}-aura`, children: [
+            /* @__PURE__ */ jsx45("stop", { stopColor: "var(--ad-primary)", stopOpacity: ".28" }),
+            /* @__PURE__ */ jsx45("stop", { offset: ".6", stopColor: "var(--ad-primary)", stopOpacity: ".06" }),
+            /* @__PURE__ */ jsx45("stop", { offset: "1", stopColor: "var(--ad-primary)", stopOpacity: "0" })
           ] }),
-          /* @__PURE__ */ jsx50("filter", { id: `${id}-bloom`, x: "-35%", y: "-35%", width: "170%", height: "170%", children: /* @__PURE__ */ jsx50("feGaussianBlur", { stdDeviation: "2.4" }) })
+          /* @__PURE__ */ jsx45("filter", { id: `${id}-bloom`, x: "-35%", y: "-35%", width: "170%", height: "170%", children: /* @__PURE__ */ jsx45("feGaussianBlur", { stdDeviation: "2.4" }) })
         ] }) }),
-        upload && /* @__PURE__ */ jsxs40(ArtLayer, { viewBox: box, className: "ad-server-cloud", children: [
-          /* @__PURE__ */ jsx50(
+        upload && /* @__PURE__ */ jsxs36(ArtLayer, { viewBox: box, className: "ad-server-cloud", children: [
+          /* @__PURE__ */ jsx45(
             "path",
             {
               d: "M57 40C37 42 40 16 58 20 63-5 96-4 102 18 120 13 132 32 117 42Z",
@@ -5734,11 +5459,11 @@ function ServerArt({ upload = false, label, ...p }) {
               strokeWidth: ".7"
             }
           ),
-          /* @__PURE__ */ jsx50("path", { d: "M80 37V18m-7 7 7-7 7 7", stroke: "var(--ad-secondary)", strokeWidth: "1.5" })
+          /* @__PURE__ */ jsx45("path", { d: "M80 37V18m-7 7 7-7 7 7", stroke: "var(--ad-secondary)", strokeWidth: "1.5" })
         ] }),
-        /* @__PURE__ */ jsx50(ArtLayer, { viewBox: box, className: "ad-art-aura-layer", origin: [89, 124 + dy], children: /* @__PURE__ */ jsx50("ellipse", { cx: "89", cy: 124 + dy, rx: "76", ry: "22", fill: url("aura") }) }),
-        /* @__PURE__ */ jsx50(ArtLayer, { viewBox: box, children: /* @__PURE__ */ jsxs40("g", { transform: lift, children: [
-          /* @__PURE__ */ jsx50(
+        /* @__PURE__ */ jsx45(ArtLayer, { viewBox: box, className: "ad-art-aura-layer", origin: [89, 124 + dy], children: /* @__PURE__ */ jsx45("ellipse", { cx: "89", cy: 124 + dy, rx: "76", ry: "22", fill: url("aura") }) }),
+        /* @__PURE__ */ jsx45(ArtLayer, { viewBox: box, children: /* @__PURE__ */ jsxs36("g", { transform: lift, children: [
+          /* @__PURE__ */ jsx45(
             "path",
             {
               d: "M26 43 98 29 150 45 75 61Z",
@@ -5747,7 +5472,7 @@ function ServerArt({ upload = false, label, ...p }) {
               strokeWidth: ".75"
             }
           ),
-          /* @__PURE__ */ jsx50(
+          /* @__PURE__ */ jsx45(
             "path",
             {
               d: "M98 29 150 45 150 119 98 107Z",
@@ -5756,7 +5481,7 @@ function ServerArt({ upload = false, label, ...p }) {
               strokeWidth: ".7"
             }
           ),
-          /* @__PURE__ */ jsx50(
+          /* @__PURE__ */ jsx45(
             "path",
             {
               d: "M26 43 98 29 98 107 26 121Z",
@@ -5765,7 +5490,7 @@ function ServerArt({ upload = false, label, ...p }) {
               strokeWidth: "1"
             }
           ),
-          /* @__PURE__ */ jsx50(
+          /* @__PURE__ */ jsx45(
             "path",
             {
               d: "M29 46 94 33 94 105 29 117Z",
@@ -5775,9 +5500,9 @@ function ServerArt({ upload = false, label, ...p }) {
               strokeWidth: ".65"
             }
           ),
-          /* @__PURE__ */ jsx50("path", { d: rackLines, stroke: "var(--ad-primary-700)", strokeOpacity: ".58" }),
-          /* @__PURE__ */ jsx50("path", { d: rackHatches, stroke: "var(--ad-neutral-950)", strokeWidth: "1.65" }),
-          /* @__PURE__ */ jsx50(
+          /* @__PURE__ */ jsx45("path", { d: rackLines, stroke: "var(--ad-primary-700)", strokeOpacity: ".58" }),
+          /* @__PURE__ */ jsx45("path", { d: rackHatches, stroke: "var(--ad-neutral-950)", strokeWidth: "1.65" }),
+          /* @__PURE__ */ jsx45(
             "path",
             {
               d: "M27 44 98 30 147 45",
@@ -5787,8 +5512,8 @@ function ServerArt({ upload = false, label, ...p }) {
               filter: url("bloom")
             }
           ),
-          /* @__PURE__ */ jsx50("path", { d: "M27 44 98 30 147 45", stroke: "var(--ad-secondary-200)", strokeWidth: ".75" }),
-          Array.from({ length: 8 }, (_, i) => /* @__PURE__ */ jsx50(
+          /* @__PURE__ */ jsx45("path", { d: "M27 44 98 30 147 45", stroke: "var(--ad-secondary-200)", strokeWidth: ".75" }),
+          Array.from({ length: 8 }, (_, i) => /* @__PURE__ */ jsx45(
             "path",
             {
               d: `M107 ${52 + i * 7.5}l34 9v4l-34-9Z`,
@@ -5798,7 +5523,7 @@ function ServerArt({ upload = false, label, ...p }) {
             },
             i
           )),
-          /* @__PURE__ */ jsx50(
+          /* @__PURE__ */ jsx45(
             "path",
             {
               d: "M31 108 93 96v8l-62 12Z",
@@ -5807,7 +5532,7 @@ function ServerArt({ upload = false, label, ...p }) {
               strokeWidth: ".55"
             }
           ),
-          /* @__PURE__ */ jsx50(
+          /* @__PURE__ */ jsx45(
             "path",
             {
               d: "M26 125 98 112 150 126v14l-73 10-51-10Z",
@@ -5816,7 +5541,7 @@ function ServerArt({ upload = false, label, ...p }) {
               strokeWidth: ".6"
             }
           ),
-          /* @__PURE__ */ jsx50(
+          /* @__PURE__ */ jsx45(
             "path",
             {
               d: "M26 125 98 112v15l-72 13Z",
@@ -5825,7 +5550,7 @@ function ServerArt({ upload = false, label, ...p }) {
               strokeWidth: ".65"
             }
           ),
-          /* @__PURE__ */ jsx50(
+          /* @__PURE__ */ jsx45(
             "path",
             {
               d: "M33 130 83 121m-50 13 41-7",
@@ -5834,8 +5559,8 @@ function ServerArt({ upload = false, label, ...p }) {
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsx50(ArtLayer, { viewBox: box, children: /* @__PURE__ */ jsxs40("g", { transform: lift, children: [
-          Array.from({ length: 8 }, (_, i) => /* @__PURE__ */ jsx50(
+        /* @__PURE__ */ jsx45(ArtLayer, { viewBox: box, children: /* @__PURE__ */ jsxs36("g", { transform: lift, children: [
+          Array.from({ length: 8 }, (_, i) => /* @__PURE__ */ jsx45(
             "path",
             {
               d: `M109 ${54 + i * 7.5}l3 .8`,
@@ -5845,8 +5570,8 @@ function ServerArt({ upload = false, label, ...p }) {
             },
             i
           )),
-          /* @__PURE__ */ jsx50("path", { d: "M35 110l20-4", className: "ad-server-glow", strokeWidth: "1.1" }),
-          /* @__PURE__ */ jsx50(
+          /* @__PURE__ */ jsx45("path", { d: "M35 110l20-4", className: "ad-server-glow", strokeWidth: "1.1" }),
+          /* @__PURE__ */ jsx45(
             "path",
             {
               d: "M27 43 98 29 98 107 27 121Z",
@@ -5855,10 +5580,10 @@ function ServerArt({ upload = false, label, ...p }) {
             }
           )
         ] }) }),
-        [[85, 103.5, 1.5, 0], [91, 121.5, 1.3, -1.7]].map(([cx, cy, r, delay]) => /* @__PURE__ */ jsx50(ArtLayer, { viewBox: box, className: "ad-server-dot", style: { animationDelay: `${delay}s` }, children: /* @__PURE__ */ jsx50("circle", { cx, cy: cy + dy, r }) }, cx)),
-        /* @__PURE__ */ jsxs40(ArtLayer, { viewBox: box, className: "ad-art-spark-layer", origin: [121, 27], children: [
-          /* @__PURE__ */ jsx50("path", { d: "M114 27h14m-7-10v20", stroke: "var(--ad-secondary-100)", strokeWidth: ".65" }),
-          /* @__PURE__ */ jsx50("circle", { cx: "121", cy: "27", r: "2.6", fill: "var(--ad-neutral-200)" })
+        [[85, 103.5, 1.5, 0], [91, 121.5, 1.3, -1.7]].map(([cx, cy, r, delay]) => /* @__PURE__ */ jsx45(ArtLayer, { viewBox: box, className: "ad-server-dot", style: { animationDelay: `${delay}s` }, children: /* @__PURE__ */ jsx45("circle", { cx, cy: cy + dy, r }) }, cx)),
+        /* @__PURE__ */ jsxs36(ArtLayer, { viewBox: box, className: "ad-art-spark-layer", origin: [121, 27], children: [
+          /* @__PURE__ */ jsx45("path", { d: "M114 27h14m-7-10v20", stroke: "var(--ad-secondary-100)", strokeWidth: ".65" }),
+          /* @__PURE__ */ jsx45("circle", { cx: "121", cy: "27", r: "2.6", fill: "var(--ad-neutral-200)" })
         ] })
       ]
     }
@@ -5866,13 +5591,13 @@ function ServerArt({ upload = false, label, ...p }) {
 }
 
 // src/components/media/AudioPlayer/AudioPlayer.tsx
-import { useEffect as useEffect12, useRef as useRef29, useState as useState13 } from "react";
+import { useEffect as useEffect12, useRef as useRef27, useState as useState12 } from "react";
 
 // src/components/media/Waveform/Waveform.tsx
-import { useEffect as useEffect11, useMemo as useMemo4, useRef as useRef28, useState as useState12 } from "react";
+import { useEffect as useEffect11, useMemo as useMemo4, useRef as useRef26, useState as useState11 } from "react";
 
 // src/components/media/Waveform/useWaveformPeaks.ts
-import { useEffect as useEffect10, useState as useState11 } from "react";
+import { useEffect as useEffect10, useState as useState10 } from "react";
 async function decode(src, bins, signal) {
   const data = typeof src === "string" ? await (await fetch(src, { signal })).arrayBuffer() : await src.arrayBuffer();
   signal.throwIfAborted();
@@ -5915,7 +5640,7 @@ async function decode(src, bins, signal) {
   };
 }
 function useWaveformPeaks(src, bins = 600) {
-  const [data, setData] = useState11(null);
+  const [data, setData] = useState10(null);
   useEffect10(() => {
     setData(null);
     if (!src) return;
@@ -5932,7 +5657,7 @@ function useWaveformPeaks(src, bins = 600) {
 }
 
 // src/components/media/Waveform/Waveform.tsx
-import { jsx as jsx51, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs37 } from "react/jsx-runtime";
 var W4 = 1e3;
 var H4 = 100;
 var MID = H4 / 2;
@@ -6000,9 +5725,9 @@ function Waveform({
 }) {
   const tr2 = useTr();
   const id = useSvgId();
-  const surface = useRef28(null);
-  const drag = useRef28(null);
-  const [hover, setHover] = useState12(null);
+  const surface = useRef26(null);
+  const drag = useRef26(null);
+  const [hover, setHover] = useState11(null);
   const decoded = useWaveformPeaks(points ? null : src, bins);
   const loading = !points && !!src && decoded === null;
   const { peaksPath, corePath } = useMemo4(() => {
@@ -6023,8 +5748,8 @@ function Waveform({
   const progress = clamp(position / duration, 0, 1);
   const played = progress * W4;
   const ahead = Math.max(0, (hover ?? 0) * W4 - played);
-  const [playing, setPlaying] = useState12(false);
-  const previous = useRef28(position);
+  const [playing, setPlaying] = useState11(false);
+  const previous = useRef26(position);
   useEffect11(() => {
     const step = position - previous.current;
     previous.current = position;
@@ -6047,7 +5772,7 @@ function Waveform({
     if (cancelled && !disabled) seek(clamp(current.position, 0, duration));
     setHover(null);
   };
-  return /* @__PURE__ */ jsxs41(
+  return /* @__PURE__ */ jsxs37(
     "div",
     {
       ...mark("Waveform", p),
@@ -6064,8 +5789,6 @@ function Waveform({
       "data-playing": playing || void 0,
       style: {
         ...p.style,
-        "--ad-wave-played": `${progress * 100}%`,
-        "--ad-wave-progress": progress,
         "--ad-wave-hover": hover === null ? void 0 : `${hover * 100}%`,
         ...color3 ? { "--ad-wave-color": color3 } : {}
       },
@@ -6111,8 +5834,8 @@ function Waveform({
         seek(clamp(next, 0, duration));
       },
       children: [
-        /* @__PURE__ */ jsx51("span", { className: "ad-waveform-floor", "aria-hidden": true }),
-        /* @__PURE__ */ jsxs41(
+        /* @__PURE__ */ jsx46("span", { className: "ad-waveform-floor", style: { transform: `scaleX(${progress})` }, "aria-hidden": true }),
+        /* @__PURE__ */ jsxs37(
           "svg",
           {
             className: "ad-waveform-base",
@@ -6120,63 +5843,63 @@ function Waveform({
             preserveAspectRatio: "none",
             "aria-hidden": "true",
             children: [
-              /* @__PURE__ */ jsxs41("defs", { children: [
-                /* @__PURE__ */ jsx51("clipPath", { id: `${id}-track`, children: /* @__PURE__ */ jsx51("path", { d: peaksPath }) }),
-                /* @__PURE__ */ jsxs41("linearGradient", { id: `${id}-silver`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
-                  /* @__PURE__ */ jsx51("stop", { offset: "0", stopColor: "var(--ad-neutral-300)", stopOpacity: "0.35" }),
-                  /* @__PURE__ */ jsx51("stop", { offset: "0.5", stopColor: "#fff", stopOpacity: "0.95" }),
-                  /* @__PURE__ */ jsx51("stop", { offset: "1", stopColor: "var(--ad-neutral-300)", stopOpacity: "0.35" })
+              /* @__PURE__ */ jsxs37("defs", { children: [
+                /* @__PURE__ */ jsx46("clipPath", { id: `${id}-track`, children: /* @__PURE__ */ jsx46("path", { d: peaksPath }) }),
+                /* @__PURE__ */ jsxs37("linearGradient", { id: `${id}-silver`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
+                  /* @__PURE__ */ jsx46("stop", { offset: "0", stopColor: "var(--ad-neutral-300)", stopOpacity: "0.35" }),
+                  /* @__PURE__ */ jsx46("stop", { offset: "0.5", stopColor: "#fff", stopOpacity: "0.95" }),
+                  /* @__PURE__ */ jsx46("stop", { offset: "1", stopColor: "var(--ad-neutral-300)", stopOpacity: "0.35" })
                 ] }),
-                /* @__PURE__ */ jsxs41("linearGradient", { id: `${id}-solid`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
-                  /* @__PURE__ */ jsx51("stop", { offset: "0", stopColor: "var(--ad-neutral-200)", stopOpacity: "0.8" }),
-                  /* @__PURE__ */ jsx51("stop", { offset: "0.5", stopColor: "#fff" }),
-                  /* @__PURE__ */ jsx51("stop", { offset: "1", stopColor: "var(--ad-neutral-200)", stopOpacity: "0.8" })
+                /* @__PURE__ */ jsxs37("linearGradient", { id: `${id}-solid`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
+                  /* @__PURE__ */ jsx46("stop", { offset: "0", stopColor: "var(--ad-neutral-200)", stopOpacity: "0.8" }),
+                  /* @__PURE__ */ jsx46("stop", { offset: "0.5", stopColor: "#fff" }),
+                  /* @__PURE__ */ jsx46("stop", { offset: "1", stopColor: "var(--ad-neutral-200)", stopOpacity: "0.8" })
                 ] }),
-                /* @__PURE__ */ jsxs41("linearGradient", { id: `${id}-depth`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
-                  /* @__PURE__ */ jsx51("stop", { offset: "0", stopColor: "#fff", stopOpacity: "0.16" }),
-                  /* @__PURE__ */ jsx51("stop", { offset: "0.42", stopColor: "#fff", stopOpacity: "0" }),
-                  /* @__PURE__ */ jsx51("stop", { offset: "0.56", stopColor: "#000", stopOpacity: "0" }),
-                  /* @__PURE__ */ jsx51("stop", { offset: "1", stopColor: "#000", stopOpacity: "0.6" })
+                /* @__PURE__ */ jsxs37("linearGradient", { id: `${id}-depth`, x1: "0", x2: "0", y1: "0", y2: "1", children: [
+                  /* @__PURE__ */ jsx46("stop", { offset: "0", stopColor: "#fff", stopOpacity: "0.16" }),
+                  /* @__PURE__ */ jsx46("stop", { offset: "0.42", stopColor: "#fff", stopOpacity: "0" }),
+                  /* @__PURE__ */ jsx46("stop", { offset: "0.56", stopColor: "#000", stopOpacity: "0" }),
+                  /* @__PURE__ */ jsx46("stop", { offset: "1", stopColor: "#000", stopOpacity: "0.6" })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx51("line", { className: "ad-waveform-axis", x2: W4, y1: MID, y2: MID }),
-              /* @__PURE__ */ jsx51("path", { className: "ad-waveform-peaks", d: peaksPath, fill: `url(#${id}-silver)` }),
-              /* @__PURE__ */ jsx51("path", { className: "ad-waveform-core", d: corePath, fill: `url(#${id}-solid)` }),
-              /* @__PURE__ */ jsx51("path", { className: "ad-waveform-edge", d: peaksPath })
+              /* @__PURE__ */ jsx46("line", { className: "ad-waveform-axis", x2: W4, y1: MID, y2: MID }),
+              /* @__PURE__ */ jsx46("path", { className: "ad-waveform-peaks", d: peaksPath, fill: `url(#${id}-silver)` }),
+              /* @__PURE__ */ jsx46("path", { className: "ad-waveform-core", d: corePath, fill: `url(#${id}-solid)` }),
+              /* @__PURE__ */ jsx46("path", { className: "ad-waveform-edge", d: peaksPath })
             ]
           },
           shape
         ),
-        ahead > 0 && /* @__PURE__ */ jsxs41("svg", { className: "ad-waveform-overlay", viewBox: `0 0 ${W4} ${H4}`, preserveAspectRatio: "none", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx51("clipPath", { id: `${id}-ahead`, children: /* @__PURE__ */ jsx51("rect", { x: played, width: ahead, height: H4 }) }),
-          /* @__PURE__ */ jsxs41("g", { clipPath: `url(#${id}-ahead)`, className: "ad-waveform-ahead", children: [
-            /* @__PURE__ */ jsx51("path", { d: peaksPath }),
-            /* @__PURE__ */ jsx51("path", { d: corePath })
+        ahead > 0 && /* @__PURE__ */ jsxs37("svg", { className: "ad-waveform-overlay", viewBox: `0 0 ${W4} ${H4}`, preserveAspectRatio: "none", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx46("clipPath", { id: `${id}-ahead`, children: /* @__PURE__ */ jsx46("rect", { x: played, width: ahead, height: H4 }) }),
+          /* @__PURE__ */ jsxs37("g", { clipPath: `url(#${id}-ahead)`, className: "ad-waveform-ahead", children: [
+            /* @__PURE__ */ jsx46("path", { d: peaksPath }),
+            /* @__PURE__ */ jsx46("path", { d: corePath })
           ] })
         ] }),
-        /* @__PURE__ */ jsx51("span", { className: "ad-waveform-layer ad-waveform-bloom", style: { maskImage: masks.bloom, WebkitMaskImage: masks.bloom }, "aria-hidden": true, children: /* @__PURE__ */ jsx51("i", {}) }),
-        /* @__PURE__ */ jsx51("span", { className: "ad-waveform-layer ad-waveform-lit", style: { maskImage: masks.peaks, WebkitMaskImage: masks.peaks }, "aria-hidden": true, children: /* @__PURE__ */ jsx51("i", {}) }),
-        /* @__PURE__ */ jsx51("span", { className: "ad-waveform-layer ad-waveform-lit ad-waveform-lit-core", style: { maskImage: masks.core, WebkitMaskImage: masks.core }, "aria-hidden": true, children: /* @__PURE__ */ jsx51("i", {}) }),
-        /* @__PURE__ */ jsx51("span", { className: "ad-waveform-layer ad-waveform-sheen-clip", style: { maskImage: masks.peaks, WebkitMaskImage: masks.peaks }, "aria-hidden": true, children: /* @__PURE__ */ jsx51("span", { className: "ad-waveform-window", children: /* @__PURE__ */ jsx51("span", { className: "ad-waveform-window-inner", children: /* @__PURE__ */ jsx51("i", { className: "ad-waveform-sheen" }) }) }) }),
-        /* @__PURE__ */ jsx51("span", { className: "ad-waveform-layer ad-waveform-depth", style: { maskImage: masks.peaks, WebkitMaskImage: masks.peaks }, "aria-hidden": true }),
-        /* @__PURE__ */ jsx51("span", { className: "ad-waveform-layer ad-waveform-shade", style: { maskImage: masks.peaks, WebkitMaskImage: masks.peaks }, "aria-hidden": true, children: /* @__PURE__ */ jsx51("span", { className: "ad-waveform-follow", children: /* @__PURE__ */ jsx51("i", { className: "ad-waveform-spot" }) }) }),
-        /* @__PURE__ */ jsx51("span", { className: "ad-waveform-follow", "aria-hidden": true, children: /* @__PURE__ */ jsx51("span", { className: "ad-waveform-cursor", children: /* @__PURE__ */ jsx51("span", { className: "ad-waveform-sparks", children: Array.from({ length: 8 }, (_, i) => /* @__PURE__ */ jsx51("i", {}, i)) }) }) }),
-        hover !== null && !disabled && /* @__PURE__ */ jsx51("span", { className: "ad-waveform-hover", "aria-hidden": true, children: /* @__PURE__ */ jsx51("span", { className: "ad-waveform-tip", children: timeText(hover * duration) }) })
+        /* @__PURE__ */ jsx46("span", { className: "ad-waveform-layer ad-waveform-bloom", style: { maskImage: masks.bloom, WebkitMaskImage: masks.bloom }, "aria-hidden": true, children: /* @__PURE__ */ jsx46("i", { style: { transform: `scaleX(${progress})` } }) }),
+        /* @__PURE__ */ jsx46("span", { className: "ad-waveform-layer ad-waveform-lit", style: { maskImage: masks.peaks, WebkitMaskImage: masks.peaks }, "aria-hidden": true, children: /* @__PURE__ */ jsx46("i", { style: { transform: `scaleX(${progress})` } }) }),
+        /* @__PURE__ */ jsx46("span", { className: "ad-waveform-layer ad-waveform-lit ad-waveform-lit-core", style: { maskImage: masks.core, WebkitMaskImage: masks.core }, "aria-hidden": true, children: /* @__PURE__ */ jsx46("i", { style: { transform: `scaleX(${progress})` } }) }),
+        /* @__PURE__ */ jsx46("span", { className: "ad-waveform-layer ad-waveform-sheen-clip", "data-ad-paused": progress === 0 ? "" : void 0, style: { maskImage: masks.peaks, WebkitMaskImage: masks.peaks }, "aria-hidden": true, children: /* @__PURE__ */ jsx46("span", { className: "ad-waveform-window", style: { transform: `translateX(calc(${progress * 100}% - 100%))` }, children: /* @__PURE__ */ jsx46("span", { className: "ad-waveform-window-inner", style: { transform: `translateX(calc(100% - ${progress * 100}%))` }, children: /* @__PURE__ */ jsx46("i", { className: "ad-waveform-sheen" }) }) }) }),
+        /* @__PURE__ */ jsx46("span", { className: "ad-waveform-layer ad-waveform-depth", style: { maskImage: masks.peaks, WebkitMaskImage: masks.peaks }, "aria-hidden": true }),
+        /* @__PURE__ */ jsx46("span", { className: "ad-waveform-layer ad-waveform-shade", style: { maskImage: masks.peaks, WebkitMaskImage: masks.peaks }, "aria-hidden": true, children: /* @__PURE__ */ jsx46("span", { className: "ad-waveform-follow", style: { transform: `translateX(${progress * 100}%)` }, children: /* @__PURE__ */ jsx46("i", { className: "ad-waveform-spot" }) }) }),
+        /* @__PURE__ */ jsx46("span", { className: "ad-waveform-follow", style: { transform: `translateX(${progress * 100}%)` }, "aria-hidden": true, children: /* @__PURE__ */ jsx46("span", { className: "ad-waveform-cursor", children: /* @__PURE__ */ jsx46("span", { className: "ad-waveform-sparks", "data-ad-paused": playing ? void 0 : "", children: Array.from({ length: 8 }, (_, i) => /* @__PURE__ */ jsx46("i", {}, i)) }) }) }),
+        hover !== null && !disabled && /* @__PURE__ */ jsx46("span", { className: "ad-waveform-hover", "aria-hidden": true, children: /* @__PURE__ */ jsx46("span", { className: "ad-waveform-tip", children: timeText(hover * duration) }) })
       ]
     }
   );
 }
 
 // src/components/media/AudioPlayer/AudioPlayer.tsx
-import { jsx as jsx52, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs38 } from "react/jsx-runtime";
 var AudioPlayer = (p) => {
   const tr2 = useTr();
-  const audio = useRef29(null);
-  const [playing, setPlaying] = useState13(false), [muted, setMuted] = useState13(false);
+  const audio = useRef27(null);
+  const [playing, setPlaying] = useState12(false), [muted, setMuted] = useState12(false);
   const [volume, setVolume] = useControllable(p.volume, p.defaultVolume ?? 0.7, p.onVolumeChange);
-  const onPlayingChange = useRef29(p.onPlayingChange);
+  const onPlayingChange = useRef27(p.onPlayingChange);
   onPlayingChange.current = p.onPlayingChange;
-  const [fileDuration, setFileDuration] = useState13();
+  const [fileDuration, setFileDuration] = useState12();
   const duration = p.duration ?? fileDuration ?? 51;
   const controlled = p.playing !== void 0;
   const active = p.playing ?? playing;
@@ -6225,8 +5948,8 @@ var AudioPlayer = (p) => {
       else audio.current.pause();
     }
   };
-  return /* @__PURE__ */ jsxs42("div", { ...mark("AudioPlayer", p), "data-playing": active || void 0, children: [
-    /* @__PURE__ */ jsx52("span", { className: "ad-player-play", children: /* @__PURE__ */ jsx52(
+  return /* @__PURE__ */ jsxs38("div", { ...mark("AudioPlayer", p), "data-playing": active || void 0, children: [
+    /* @__PURE__ */ jsx47("span", { className: "ad-player-play", children: /* @__PURE__ */ jsx47(
       IconButton,
       {
         variant: "primary",
@@ -6237,7 +5960,7 @@ var AudioPlayer = (p) => {
         onClick: toggle
       }
     ) }),
-    /* @__PURE__ */ jsx52(
+    /* @__PURE__ */ jsx47(
       PlaybackTrack,
       {
         audio,
@@ -6255,8 +5978,8 @@ var AudioPlayer = (p) => {
       },
       p.src
     ),
-    p.showVolume !== false && /* @__PURE__ */ jsxs42("div", { className: "ad-player-volume", children: [
-      /* @__PURE__ */ jsx52(
+    p.showVolume !== false && /* @__PURE__ */ jsxs38("div", { className: "ad-player-volume", children: [
+      /* @__PURE__ */ jsx47(
         IconButton,
         {
           variant: "ghost",
@@ -6268,7 +5991,7 @@ var AudioPlayer = (p) => {
           onClick: () => setMuted((v) => !v)
         }
       ),
-      /* @__PURE__ */ jsx52(
+      /* @__PURE__ */ jsx47(
         Slider,
         {
           size: "sm",
@@ -6288,10 +6011,10 @@ var AudioPlayer = (p) => {
   ] });
 };
 function PlaybackTrack({ audio, playing, position: controlledPosition, disabled, duration, points, src, onTimeChange, onEnded }) {
-  const [localPosition, setPosition] = useState13(0);
+  const [localPosition, setPosition] = useState12(0);
   const position = controlledPosition ?? localPosition;
-  const current = useRef29(0);
-  const lastTick = useRef29(void 0);
+  const current = useRef27(0);
+  const lastTick = useRef27(void 0);
   useTick((now) => {
     const media = audio.current;
     const next = media?.currentTime ?? current.current + (now - (lastTick.current ?? now)) / 1e3;
@@ -6314,11 +6037,11 @@ function PlaybackTrack({ audio, playing, position: controlledPosition, disabled,
     if (audio.current) audio.current.currentTime = next;
     onTimeChange?.(next);
   };
-  return /* @__PURE__ */ jsxs42("div", { className: "ad-player-track", children: [
-    /* @__PURE__ */ jsx52(Waveform, { duration, position, onSeek: seek, points, src: points ? void 0 : src, disabled }),
-    /* @__PURE__ */ jsxs42("div", { className: "ad-player-times", children: [
-      /* @__PURE__ */ jsx52("span", { className: "ad-time", children: timeText(position) }),
-      /* @__PURE__ */ jsxs42("span", { className: "ad-time", children: [
+  return /* @__PURE__ */ jsxs38("div", { className: "ad-player-track", children: [
+    /* @__PURE__ */ jsx47(Waveform, { duration, position, onSeek: seek, points, src: points ? void 0 : src, disabled }),
+    /* @__PURE__ */ jsxs38("div", { className: "ad-player-times", children: [
+      /* @__PURE__ */ jsx47("span", { className: "ad-time", children: timeText(position) }),
+      /* @__PURE__ */ jsxs38("span", { className: "ad-time", children: [
         "\u2212",
         timeText(duration - position)
       ] })
@@ -6327,8 +6050,8 @@ function PlaybackTrack({ audio, playing, position: controlledPosition, disabled,
 }
 
 // src/components/media/LevelMeter/LevelMeter.tsx
-import { useEffect as useEffect13, useRef as useRef30 } from "react";
-import { jsx as jsx53, jsxs as jsxs43 } from "react/jsx-runtime";
+import { useEffect as useEffect13, useRef as useRef28 } from "react";
+import { jsx as jsx48, jsxs as jsxs39 } from "react/jsx-runtime";
 var SAMPLES2 = 64;
 var WIDTH = 256;
 var HEIGHT = 24;
@@ -6357,9 +6080,9 @@ function LevelMeter({
 }) {
   const tr2 = useTr();
   const id = useSvgId();
-  const path = useRef30(null);
-  const target = useRef30(0);
-  const wake = useRef30(() => void 0);
+  const path = useRef28(null);
+  const target = useRef28(0);
+  const wake = useRef28(() => void 0);
   const level = clamp(value) / 100;
   useEffect13(() => {
     target.current = active ? level : 0;
@@ -6424,7 +6147,7 @@ function LevelMeter({
       void context?.close();
     };
   }, [active, stream]);
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx48(
     "div",
     {
       ...mark("LevelMeter", p),
@@ -6435,20 +6158,20 @@ function LevelMeter({
       "aria-valuenow": stream ? void 0 : Math.round(active ? level * 100 : 0),
       "data-active": active,
       "data-compact": compact || void 0,
-      children: /* @__PURE__ */ jsxs43(
+      children: /* @__PURE__ */ jsxs39(
         "svg",
         {
           viewBox: `0 0 ${WIDTH} ${HEIGHT}`,
           preserveAspectRatio: "none",
           "aria-hidden": "true",
           children: [
-            /* @__PURE__ */ jsx53("defs", { children: /* @__PURE__ */ jsxs43("linearGradient", { id: `${id}-wave`, children: [
-              /* @__PURE__ */ jsx53("stop", { stopColor: "var(--ad-primary-700)" }),
-              /* @__PURE__ */ jsx53("stop", { offset: "0.52", stopColor: "var(--ad-red)" }),
-              /* @__PURE__ */ jsx53("stop", { offset: "1", stopColor: "var(--ad-secondary-100)" })
+            /* @__PURE__ */ jsx48("defs", { children: /* @__PURE__ */ jsxs39("linearGradient", { id: `${id}-wave`, children: [
+              /* @__PURE__ */ jsx48("stop", { stopColor: "var(--ad-primary-700)" }),
+              /* @__PURE__ */ jsx48("stop", { offset: "0.52", stopColor: "var(--ad-red)" }),
+              /* @__PURE__ */ jsx48("stop", { offset: "1", stopColor: "var(--ad-secondary-100)" })
             ] }) }),
-            /* @__PURE__ */ jsx53("line", { className: "ad-level-meter-axis", x2: WIDTH, y1: MID2, y2: MID2 }),
-            /* @__PURE__ */ jsx53(
+            /* @__PURE__ */ jsx48("line", { className: "ad-level-meter-axis", x2: WIDTH, y1: MID2, y2: MID2 }),
+            /* @__PURE__ */ jsx48(
               "path",
               {
                 ref: path,
@@ -6464,13 +6187,13 @@ function LevelMeter({
 }
 
 // src/components/media/KaraokeLyrics/KaraokeLyrics.tsx
-import { jsx as jsx54, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs40 } from "react/jsx-runtime";
 var DEMO = [
   { id: "1", text: "\u041D\u043E\u0447\u044C", progress: 1 },
   { id: "2", text: "\u0433\u043E\u0440\u0438\u0442", progress: 0.55 },
   { id: "3", text: "\u043E\u0433\u043D\u044F\u043C\u0438", progress: 0 }
 ];
-var line = (words, sung) => words.map((word) => /* @__PURE__ */ jsxs44(
+var line = (words, sung) => words.map((word) => /* @__PURE__ */ jsxs40(
   "span",
   {
     className: "ad-lyric-word",
@@ -6492,22 +6215,22 @@ var KaraokeLyrics = ({
   snare = 0,
   pulse = 0,
   ...p
-}) => /* @__PURE__ */ jsxs44(
+}) => /* @__PURE__ */ jsxs40(
   "div",
   {
     ...mark("KaraokeLyrics", p),
     "aria-live": "off",
     style: { ...p.style, "--ad-lyric-kick": kick, "--ad-lyric-snare": snare, "--ad-lyric-pulse": pulse },
     children: [
-      /* @__PURE__ */ jsx54("p", { className: "ad-lyrics-current", "data-message": message !== void 0 || void 0, children: message ?? line(current, true) }, currentKey),
-      /* @__PURE__ */ jsx54("p", { className: "ad-lyrics-next", "aria-hidden": message !== void 0 || void 0, children: message === void 0 && line(next, false) }, nextKey)
+      /* @__PURE__ */ jsx49("p", { className: "ad-lyrics-current", "data-message": message !== void 0 || void 0, children: message ?? line(current, true) }, currentKey),
+      /* @__PURE__ */ jsx49("p", { className: "ad-lyrics-next", "aria-hidden": message !== void 0 || void 0, children: message === void 0 && line(next, false) }, nextKey)
     ]
   }
 );
 
 // src/components/media/MelodyRoll/MelodyRoll.tsx
-import { useRef as useRef31 } from "react";
-import { jsx as jsx55, jsxs as jsxs45 } from "react/jsx-runtime";
+import { useRef as useRef29 } from "react";
+import { jsx as jsx50, jsxs as jsxs41 } from "react/jsx-runtime";
 var DEMO2 = [
   { id: "1", start: 0.4, end: 1.1, pitch: 64, lyric: "\u041D\u043E\u0447\u044C" },
   { id: "2", start: 1.2, end: 1.6, pitch: 67, lyric: "\u0433\u043E" },
@@ -6549,7 +6272,7 @@ var MelodyRoll = ({
   const x = (seconds) => (seconds - from) / span * 100;
   const y = (pitch) => (high - pitch) / rows * 100;
   const visible = notes.filter((note) => note.end >= from && note.start <= from + span);
-  const trail = useRef31([]);
+  const trail = useRef29([]);
   if (trail.current.at(-1)?.t !== position) {
     const kept = trail.current.filter((point) => point.t > position - TRAIL && point.t < position);
     trail.current = [...kept, { t: position, pitch: livePitch }];
@@ -6566,7 +6289,7 @@ var MelodyRoll = ({
     if (!event.deltaY) return;
     setSpan(clamp(span * (event.deltaY > 0 ? 1.12 : 1 / 1.12), 2, 20));
   };
-  return /* @__PURE__ */ jsxs45(
+  return /* @__PURE__ */ jsxs41(
     "div",
     {
       ...mark("MelodyRoll", p),
@@ -6583,7 +6306,7 @@ var MelodyRoll = ({
         "--ad-roll-shift": `${-((from % 1 + 1) % 1) / span * 100}cqw`
       },
       children: [
-        /* @__PURE__ */ jsx55(
+        /* @__PURE__ */ jsx50(
           PianoKeyboard,
           {
             className: "ad-melody-roll-keys",
@@ -6595,9 +6318,9 @@ var MelodyRoll = ({
             onKeyPress
           }
         ),
-        /* @__PURE__ */ jsxs45("div", { className: "ad-melody-roll-lane", "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx55("span", { className: "ad-melody-roll-seconds" }),
-          /* @__PURE__ */ jsx55("div", { className: "ad-melody-roll-strip", style: { transform: `translateX(${(-from / span * 100).toFixed(3)}%)` }, children: visible.map((note) => /* @__PURE__ */ jsx55(
+        /* @__PURE__ */ jsxs41("div", { className: "ad-melody-roll-lane", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx50("span", { className: "ad-melody-roll-seconds" }),
+          /* @__PURE__ */ jsx50("div", { className: "ad-melody-roll-strip", style: { transform: `translateX(${(-from / span * 100).toFixed(3)}%)` }, children: visible.map((note) => /* @__PURE__ */ jsx50(
             "span",
             {
               className: "ad-melody-note",
@@ -6609,17 +6332,17 @@ var MelodyRoll = ({
                 width: `${Math.max(0.6, (note.end - note.start) / span * 100)}%`,
                 top: `${y(note.pitch)}%`
               },
-              children: showLyrics && note.lyric && /* @__PURE__ */ jsx55("span", { children: note.lyric })
+              children: showLyrics && note.lyric && /* @__PURE__ */ jsx50("span", { children: note.lyric })
             },
             note.id
           )) }),
-          /* @__PURE__ */ jsx55("svg", { className: "ad-melody-trail", viewBox: "0 0 100 100", preserveAspectRatio: "none", children: segments.flatMap((d, i) => [
-            /* @__PURE__ */ jsx55("path", { "data-halo": "wide", d, vectorEffect: "non-scaling-stroke" }, `${i}-wide`),
-            /* @__PURE__ */ jsx55("path", { "data-halo": "near", d, vectorEffect: "non-scaling-stroke" }, `${i}-near`),
-            /* @__PURE__ */ jsx55("path", { d, vectorEffect: "non-scaling-stroke" }, i)
+          /* @__PURE__ */ jsx50("svg", { className: "ad-melody-trail", viewBox: "0 0 100 100", preserveAspectRatio: "none", children: segments.flatMap((d, i) => [
+            /* @__PURE__ */ jsx50("path", { "data-halo": "wide", d, vectorEffect: "non-scaling-stroke" }, `${i}-wide`),
+            /* @__PURE__ */ jsx50("path", { "data-halo": "near", d, vectorEffect: "non-scaling-stroke" }, `${i}-near`),
+            /* @__PURE__ */ jsx50("path", { d, vectorEffect: "non-scaling-stroke" }, i)
           ]) }),
-          /* @__PURE__ */ jsx55("span", { className: "ad-melody-playhead", style: { left: `${lead * 100}%` } }),
-          livePitch !== void 0 && /* @__PURE__ */ jsx55(
+          /* @__PURE__ */ jsx50("span", { className: "ad-melody-playhead", style: { left: `${lead * 100}%` } }),
+          livePitch !== void 0 && /* @__PURE__ */ jsx50(
             "span",
             {
               className: "ad-melody-voice",
@@ -6634,26 +6357,26 @@ var MelodyRoll = ({
 };
 
 // src/components/layout/FloatingPanel/FloatingPanel.tsx
-import { useRef as useRef33 } from "react";
+import { useRef as useRef31 } from "react";
 
 // src/components/layout/FloatingPanel/useFloatingPanel.ts
-import { useCallback as useCallback2, useEffect as useEffect14, useLayoutEffect as useLayoutEffect6, useRef as useRef32, useState as useState14 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect14, useLayoutEffect as useLayoutEffect5, useRef as useRef30, useState as useState13 } from "react";
 var resizeEdges = ["n", "s", "e", "w", "ne", "nw", "se", "sw"];
 var threshold = 3;
 var panelControls = "button, a, input, select, textarea, [role=slider], [role=button], [role=switch], [role=listbox], [contenteditable=true], .ad-rotary-knob";
 var useFloatingPanel = (frameRef, options = {}) => {
-  const [active, setActive] = useState14(false);
-  const [live, setLive] = useState14(null);
-  const drag = useRef32(null);
-  const moved = useRef32(false);
-  const latest = useRef32(options);
+  const [active, setActive] = useState13(false);
+  const [live, setLive] = useState13(null);
+  const drag = useRef30(null);
+  const moved = useRef30(false);
+  const latest = useRef30(options);
   latest.current = options;
   const saved = options.layout;
-  useLayoutEffect6(() => {
+  useLayoutEffect5(() => {
     drag.current = null;
     setLive(null);
   }, [saved?.left, saved?.top, saved?.width, saved?.height]);
-  const [, setViewport] = useState14(0);
+  const [, setViewport] = useState13(0);
   useEffect14(() => {
     const onResize = () => setViewport((n) => n + 1);
     window.addEventListener("resize", onResize);
@@ -6776,9 +6499,9 @@ var useFloatingPanel = (frameRef, options = {}) => {
 };
 
 // src/components/layout/FloatingPanel/FloatingPanel.tsx
-import { jsx as jsx56, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs42 } from "react/jsx-runtime";
 var FloatingPanel = ({ layout: saved, onLayoutChange, defaultSize, limits, onDragOutside, ignore, resizable = false, label, children, ...p }) => {
-  const frame = useRef33(null);
+  const frame = useRef31(null);
   const { layout, active, beginMove, beginResize, handleMove, handleUp, handleCancel, handleKeyDown } = useFloatingPanel(frame, {
     layout: saved,
     onLayoutChange,
@@ -6787,7 +6510,7 @@ var FloatingPanel = ({ layout: saved, onLayoutChange, defaultSize, limits, onDra
     onDragOutside,
     ignore
   });
-  return /* @__PURE__ */ jsxs46(
+  return /* @__PURE__ */ jsxs42(
     "div",
     {
       ...mark("FloatingPanel", p),
@@ -6804,20 +6527,20 @@ var FloatingPanel = ({ layout: saved, onLayoutChange, defaultSize, limits, onDra
       onKeyDown: (event) => handleKeyDown(event, resizable),
       children: [
         children,
-        resizable && active && resizeEdges.map((edge) => /* @__PURE__ */ jsx56("span", { className: "ad-floating-panel-handle", "data-edge": edge, "aria-hidden": "true", onPointerDown: beginResize(edge) }, edge))
+        resizable && active && resizeEdges.map((edge) => /* @__PURE__ */ jsx51("span", { className: "ad-floating-panel-handle", "data-edge": edge, "aria-hidden": "true", onPointerDown: beginResize(edge) }, edge))
       ]
     }
   );
 };
 
 // src/components/media/Sparkline/Sparkline.tsx
-import { useMemo as useMemo5, useRef as useRef34 } from "react";
-import { Fragment as Fragment5, jsx as jsx57, jsxs as jsxs47 } from "react/jsx-runtime";
+import { useMemo as useMemo5, useRef as useRef32 } from "react";
+import { Fragment as Fragment4, jsx as jsx52, jsxs as jsxs43 } from "react/jsx-runtime";
 var DEMO3 = [12, 23, 17, 31, 43, 24, 28, 20, 41, 29, 51, 34, 38, 22, 31, 16, 23];
 var Sparkline = (p) => {
   const values = p.values ?? DEMO3;
   const id = useSvgId();
-  const ref = useRef34(null);
+  const ref = useRef32(null);
   usePauseOffscreen(ref);
   const { line: line2, lastX, lastY } = useMemo5(() => {
     if (!values.length) return { line: "", lastX: 0, lastY: 0 };
@@ -6854,7 +6577,7 @@ var Sparkline = (p) => {
     };
   }, [values, p.fit]);
   const box = { viewBox: "0 0 240 70", preserveAspectRatio: "none", "aria-hidden": true };
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx52(
     "span",
     {
       ...mark("Sparkline", p),
@@ -6863,13 +6586,13 @@ var Sparkline = (p) => {
       "aria-label": p.label,
       "aria-hidden": !p.label,
       style: { ...p.style, "--ad-spark": p.color ?? "var(--ad-primary)" },
-      children: line2 && /* @__PURE__ */ jsxs47(Fragment5, { children: [
-        /* @__PURE__ */ jsxs47("svg", { ...box, children: [
-          /* @__PURE__ */ jsx57("defs", { children: /* @__PURE__ */ jsxs47("linearGradient", { id: `${id}-area`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
-            /* @__PURE__ */ jsx57("stop", { offset: "0", stopColor: "var(--ad-spark)", stopOpacity: "0.45" }),
-            /* @__PURE__ */ jsx57("stop", { offset: "1", stopColor: "var(--ad-spark)", stopOpacity: "0" })
+      children: line2 && /* @__PURE__ */ jsxs43(Fragment4, { children: [
+        /* @__PURE__ */ jsxs43("svg", { ...box, children: [
+          /* @__PURE__ */ jsx52("defs", { children: /* @__PURE__ */ jsxs43("linearGradient", { id: `${id}-area`, x1: "0", y1: "0", x2: "0", y2: "1", children: [
+            /* @__PURE__ */ jsx52("stop", { offset: "0", stopColor: "var(--ad-spark)", stopOpacity: "0.45" }),
+            /* @__PURE__ */ jsx52("stop", { offset: "1", stopColor: "var(--ad-spark)", stopOpacity: "0" })
           ] }) }),
-          /* @__PURE__ */ jsx57(
+          /* @__PURE__ */ jsx52(
             "path",
             {
               className: "ad-sparkline-area",
@@ -6877,18 +6600,18 @@ var Sparkline = (p) => {
               fill: `url(#${id}-area)`
             }
           ),
-          /* @__PURE__ */ jsx57("path", { className: "ad-sparkline-line", d: line2, pathLength: 1 })
+          /* @__PURE__ */ jsx52("path", { className: "ad-sparkline-line", d: line2, pathLength: 1 })
         ] }),
-        /* @__PURE__ */ jsx57("svg", { ...box, children: /* @__PURE__ */ jsx57("circle", { className: "ad-sparkline-ping", cx: lastX, cy: lastY, r: "3" }) }),
-        /* @__PURE__ */ jsx57("svg", { ...box, children: /* @__PURE__ */ jsx57("circle", { className: "ad-sparkline-dot", cx: lastX, cy: lastY, r: "3" }) })
+        /* @__PURE__ */ jsx52("svg", { ...box, children: /* @__PURE__ */ jsx52("circle", { className: "ad-sparkline-ping", cx: lastX, cy: lastY, r: "3" }) }),
+        /* @__PURE__ */ jsx52("svg", { ...box, children: /* @__PURE__ */ jsx52("circle", { className: "ad-sparkline-dot", cx: lastX, cy: lastY, r: "3" }) })
       ] })
     }
   );
 };
 
 // src/components/media/WaveDecoration/WaveDecoration.tsx
-import { useRef as useRef35 } from "react";
-import { jsx as jsx58, jsxs as jsxs48 } from "react/jsx-runtime";
+import { useRef as useRef33 } from "react";
+import { jsx as jsx53, jsxs as jsxs44 } from "react/jsx-runtime";
 var POINTS = 23;
 var STEP2 = 65 / (POINTS - 1);
 var X = Array.from({ length: POINTS }, (_, k) => k * STEP2 / 65 * 600);
@@ -6906,8 +6629,8 @@ var strand = (j, t) => {
   return d;
 };
 var WaveDecoration = (p) => {
-  const ref = useRef35(null);
-  const paths = useRef35(null);
+  const ref = useRef33(null);
+  const paths = useRef33(null);
   const uid = useSvgId();
   const paint = (t) => {
     if (!ref.current) return;
@@ -6916,7 +6639,7 @@ var WaveDecoration = (p) => {
   };
   usePauseOffscreen(ref);
   useDecoration(ref, paint);
-  return /* @__PURE__ */ jsxs48(
+  return /* @__PURE__ */ jsxs44(
     "svg",
     {
       ...mark("WaveDecoration", p),
@@ -6924,12 +6647,12 @@ var WaveDecoration = (p) => {
       viewBox: "0 0 600 130",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx58("defs", { children: /* @__PURE__ */ jsx58("linearGradient", { id: `wave-${uid}`, children: [
+        /* @__PURE__ */ jsx53("defs", { children: /* @__PURE__ */ jsx53("linearGradient", { id: `wave-${uid}`, children: [
           [0, 0],
           [0.2, 0.3],
           [0.7, 1],
           [1, 0.35]
-        ].map(([offset, opacity]) => /* @__PURE__ */ jsx58(
+        ].map(([offset, opacity]) => /* @__PURE__ */ jsx53(
           "stop",
           {
             offset,
@@ -6938,7 +6661,7 @@ var WaveDecoration = (p) => {
           },
           offset
         )) }) }),
-        Array.from({ length: 22 }, (_, j) => /* @__PURE__ */ jsx58(
+        Array.from({ length: 22 }, (_, j) => /* @__PURE__ */ jsx53(
           "path",
           {
             d: "M0 65H600",
@@ -7100,6 +6823,7 @@ export {
   quantumFieldExperienceControls,
   quantumFieldModes,
   quantumFieldResolution,
+  refreshMotion,
   resizeEdges,
   resolveToken,
   resolveTokens,