@sdata/web-vue 2.3.1 → 2.8.0

package/es/border-beam/styles.js

@@ -0,0 +1,3545 @@
+import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
+//#region components/border-beam/styles.ts
+/**
+* Size presets for border radius and dimensions
+*/
+var sizePresets = {
+	"sm": {
+		borderRadius: 32,
+		borderWidth: 1,
+		width: 70,
+		height: 36
+	},
+	"md": {
+		borderRadius: 16,
+		borderWidth: 1
+	},
+	"line": {
+		borderRadius: 16,
+		borderWidth: 1
+	},
+	"pulse-outside": {
+		borderRadius: 16,
+		borderWidth: 1
+	},
+	"pulse-inner": {
+		borderRadius: 16,
+		borderWidth: 1
+	}
+};
+/**
+* Per-size theme presets matching the tuned v5 control panel defaults
+*/
+var sizeThemePresets = {
+	"sm": {
+		dark: {
+			strokeOpacity: .72,
+			innerOpacity: .46,
+			bloomOpacity: .58,
+			innerShadow: "rgba(255, 255, 255, 0.3)",
+			saturation: 1.3,
+			brightness: 1.5
+		},
+		light: {
+			strokeOpacity: .18,
+			innerOpacity: .38,
+			bloomOpacity: .26,
+			innerShadow: "rgba(0, 0, 0, 0.14)",
+			saturation: 1.8
+		}
+	},
+	"md": {
+		dark: {
+			strokeOpacity: .56,
+			innerOpacity: .6,
+			bloomOpacity: .44,
+			innerShadow: "rgba(255, 255, 255, 0.27)",
+			saturation: 1.3,
+			brightness: 1.5
+		},
+		light: {
+			strokeOpacity: .18,
+			innerOpacity: .36,
+			bloomOpacity: .42,
+			innerShadow: "rgba(0, 0, 0, 0.14)",
+			saturation: 1.5
+		}
+	},
+	"line": {
+		dark: {
+			strokeOpacity: 1.14,
+			innerOpacity: .7,
+			bloomOpacity: .8,
+			innerShadow: "rgba(255, 255, 255, 0.1)",
+			saturation: 1.2
+		},
+		light: {
+			strokeOpacity: .16,
+			innerOpacity: .32,
+			bloomOpacity: .3,
+			innerShadow: "rgba(0, 0, 0, 0.14)",
+			saturation: 1.95
+		}
+	},
+	"pulse-outside": {
+		dark: {
+			strokeOpacity: .94,
+			innerOpacity: .5,
+			bloomOpacity: .5,
+			innerShadow: "transparent",
+			saturation: 1.3,
+			brightness: 2,
+			hairlineOpacity: 0
+		},
+		light: {
+			strokeOpacity: 1.96,
+			innerOpacity: 1.04,
+			bloomOpacity: .42,
+			innerShadow: "transparent",
+			saturation: .6,
+			brightness: 1.7,
+			hairlineOpacity: 0
+		}
+	},
+	"pulse-inner": {
+		dark: {
+			strokeOpacity: 1.54,
+			innerOpacity: .56,
+			bloomOpacity: .72,
+			innerShadow: "transparent",
+			saturation: 1.3,
+			brightness: 1
+		},
+		light: {
+			strokeOpacity: .32,
+			innerOpacity: .4,
+			bloomOpacity: .8,
+			innerShadow: "transparent",
+			saturation: .75,
+			brightness: 1.3
+		}
+	}
+};
+_objectSpread2({}, sizeThemePresets.md.dark), _objectSpread2({}, sizeThemePresets.md.light);
+/**
+* Color palettes for each color variant
+*/
+var colorPalettes = {
+	colorful: {
+		border: [
+			{
+				color: "rgb(255, 50, 100)",
+				pos: "33% -7.4%",
+				size: "70px 40px"
+			},
+			{
+				color: "rgb(40, 140, 255)",
+				pos: "12% -5%",
+				size: "60px 35px"
+			},
+			{
+				color: "rgb(50, 200, 80)",
+				pos: "2.1% 68.3%",
+				size: "40px 70px"
+			},
+			{
+				color: "rgb(30, 185, 170)",
+				pos: "2.1% 68.3%",
+				size: "20px 35px"
+			},
+			{
+				color: "rgb(100, 70, 255)",
+				pos: "74.4% 100%",
+				size: "180px 32px"
+			},
+			{
+				color: "rgb(40, 140, 255)",
+				pos: "55% 100%",
+				size: "85px 26px"
+			},
+			{
+				color: "rgb(255, 120, 40)",
+				pos: "93.9% 0%",
+				size: "74px 32px"
+			},
+			{
+				color: "rgb(240, 50, 180)",
+				pos: "100% 27.1%",
+				size: "26px 42px"
+			},
+			{
+				color: "rgb(180, 40, 240)",
+				pos: "100% 27.1%",
+				size: "52px 48px"
+			}
+		],
+		spike: {
+			primary: "rgb(255, 60, 80)",
+			secondary: "rgba(40, 190, 180, 0.98)"
+		},
+		spikeLt: {
+			primary: "rgb(200, 30, 60)",
+			secondary: "rgb(20, 150, 140)"
+		}
+	},
+	mono: {
+		border: [
+			{
+				color: "rgb(180, 180, 180)",
+				pos: "33% -7.4%",
+				size: "70px 40px"
+			},
+			{
+				color: "rgb(140, 140, 140)",
+				pos: "12% -5%",
+				size: "60px 35px"
+			},
+			{
+				color: "rgb(160, 160, 160)",
+				pos: "2.1% 68.3%",
+				size: "40px 70px"
+			},
+			{
+				color: "rgb(130, 130, 130)",
+				pos: "2.1% 68.3%",
+				size: "20px 35px"
+			},
+			{
+				color: "rgb(170, 170, 170)",
+				pos: "74.4% 100%",
+				size: "180px 32px"
+			},
+			{
+				color: "rgb(150, 150, 150)",
+				pos: "55% 100%",
+				size: "85px 26px"
+			},
+			{
+				color: "rgb(190, 190, 190)",
+				pos: "93.9% 0%",
+				size: "74px 32px"
+			},
+			{
+				color: "rgb(145, 145, 145)",
+				pos: "100% 27.1%",
+				size: "26px 42px"
+			},
+			{
+				color: "rgb(165, 165, 165)",
+				pos: "100% 27.1%",
+				size: "52px 48px"
+			}
+		],
+		spike: {
+			primary: "rgb(200, 200, 200)",
+			secondary: "rgb(170, 170, 170)"
+		},
+		spikeLt: {
+			primary: "rgb(80, 80, 80)",
+			secondary: "rgb(120, 120, 120)"
+		}
+	},
+	ocean: {
+		border: [
+			{
+				color: "rgb(100, 80, 220)",
+				pos: "33% -7.4%",
+				size: "70px 40px"
+			},
+			{
+				color: "rgb(60, 120, 255)",
+				pos: "12% -5%",
+				size: "60px 35px"
+			},
+			{
+				color: "rgb(80, 100, 200)",
+				pos: "2.1% 68.3%",
+				size: "40px 70px"
+			},
+			{
+				color: "rgb(50, 140, 220)",
+				pos: "2.1% 68.3%",
+				size: "20px 35px"
+			},
+			{
+				color: "rgb(120, 80, 255)",
+				pos: "74.4% 100%",
+				size: "180px 32px"
+			},
+			{
+				color: "rgb(70, 130, 255)",
+				pos: "55% 100%",
+				size: "85px 26px"
+			},
+			{
+				color: "rgb(140, 100, 240)",
+				pos: "93.9% 0%",
+				size: "74px 32px"
+			},
+			{
+				color: "rgb(90, 110, 230)",
+				pos: "100% 27.1%",
+				size: "26px 42px"
+			},
+			{
+				color: "rgb(130, 70, 255)",
+				pos: "100% 27.1%",
+				size: "52px 48px"
+			}
+		],
+		spike: {
+			primary: "rgb(100, 120, 255)",
+			secondary: "rgba(130, 100, 220, 0.98)"
+		},
+		spikeLt: {
+			primary: "rgb(60, 60, 180)",
+			secondary: "rgb(80, 100, 200)"
+		}
+	},
+	sunset: {
+		border: [
+			{
+				color: "rgb(255, 80, 50)",
+				pos: "33% -7.4%",
+				size: "70px 40px"
+			},
+			{
+				color: "rgb(255, 160, 40)",
+				pos: "12% -5%",
+				size: "60px 35px"
+			},
+			{
+				color: "rgb(255, 120, 60)",
+				pos: "2.1% 68.3%",
+				size: "40px 70px"
+			},
+			{
+				color: "rgb(255, 200, 50)",
+				pos: "2.1% 68.3%",
+				size: "20px 35px"
+			},
+			{
+				color: "rgb(255, 100, 80)",
+				pos: "74.4% 100%",
+				size: "180px 32px"
+			},
+			{
+				color: "rgb(255, 180, 60)",
+				pos: "55% 100%",
+				size: "85px 26px"
+			},
+			{
+				color: "rgb(255, 60, 60)",
+				pos: "93.9% 0%",
+				size: "74px 32px"
+			},
+			{
+				color: "rgb(255, 140, 50)",
+				pos: "100% 27.1%",
+				size: "26px 42px"
+			},
+			{
+				color: "rgb(255, 90, 70)",
+				pos: "100% 27.1%",
+				size: "52px 48px"
+			}
+		],
+		spike: {
+			primary: "rgb(255, 140, 80)",
+			secondary: "rgba(255, 100, 60, 0.98)"
+		},
+		spikeLt: {
+			primary: "rgb(200, 80, 40)",
+			secondary: "rgb(220, 120, 30)"
+		}
+	}
+};
+/**
+* Small size color palettes (compact gradients for button-sized elements)
+*/
+var smallColorPalettes = {
+	colorful: {
+		border: [
+			{
+				color: "rgb(50, 200, 80)",
+				pos: "2% 68%",
+				size: "9px 18px"
+			},
+			{
+				color: "rgb(30, 185, 170)",
+				pos: "2% 68%",
+				size: "4px 8px"
+			},
+			{
+				color: "rgb(255, 120, 40)",
+				pos: "72% -3%",
+				size: "59px 9px"
+			},
+			{
+				color: "rgb(100, 70, 255)",
+				pos: "74% 100%",
+				size: "42px 7px"
+			},
+			{
+				color: "rgb(240, 50, 180)",
+				pos: "100% 27%",
+				size: "10px 17px"
+			},
+			{
+				color: "rgb(180, 40, 240)",
+				pos: "100% 27%",
+				size: "10px 18px"
+			},
+			{
+				color: "rgb(40, 140, 255)",
+				pos: "100% 27%",
+				size: "5px 10px"
+			},
+			{
+				color: "rgb(255, 50, 100)",
+				pos: "100% 27%",
+				size: "11px 12px"
+			}
+		],
+		inner: [
+			{
+				color: "rgba(50, 200, 80, 0.5)",
+				pos: "2% 68%",
+				size: "9px 18px"
+			},
+			{
+				color: "rgba(30, 185, 170, 0.45)",
+				pos: "2% 68%",
+				size: "4px 8px"
+			},
+			{
+				color: "rgba(255, 120, 40, 0.35)",
+				pos: "72% -3%",
+				size: "59px 9px"
+			},
+			{
+				color: "rgba(100, 70, 255, 0.35)",
+				pos: "74% 100%",
+				size: "42px 7px"
+			},
+			{
+				color: "rgba(240, 50, 180, 0.3)",
+				pos: "100% 27%",
+				size: "10px 17px"
+			},
+			{
+				color: "rgba(180, 40, 240, 0.4)",
+				pos: "100% 27%",
+				size: "10px 18px"
+			},
+			{
+				color: "rgba(40, 140, 255, 0.3)",
+				pos: "100% 27%",
+				size: "5px 10px"
+			},
+			{
+				color: "rgba(255, 50, 100, 0.3)",
+				pos: "100% 27%",
+				size: "11px 12px"
+			}
+		]
+	},
+	mono: {
+		border: [
+			{
+				color: "rgb(160, 160, 160)",
+				pos: "2% 68%",
+				size: "9px 18px"
+			},
+			{
+				color: "rgb(140, 140, 140)",
+				pos: "2% 68%",
+				size: "4px 8px"
+			},
+			{
+				color: "rgb(180, 180, 180)",
+				pos: "72% -3%",
+				size: "59px 9px"
+			},
+			{
+				color: "rgb(150, 150, 150)",
+				pos: "74% 100%",
+				size: "42px 7px"
+			},
+			{
+				color: "rgb(170, 170, 170)",
+				pos: "100% 27%",
+				size: "10px 17px"
+			},
+			{
+				color: "rgb(155, 155, 155)",
+				pos: "100% 27%",
+				size: "10px 18px"
+			},
+			{
+				color: "rgb(145, 145, 145)",
+				pos: "100% 27%",
+				size: "5px 10px"
+			},
+			{
+				color: "rgb(165, 165, 165)",
+				pos: "100% 27%",
+				size: "11px 12px"
+			}
+		],
+		inner: [
+			{
+				color: "rgba(160, 160, 160, 0.25)",
+				pos: "2% 68%",
+				size: "9px 18px"
+			},
+			{
+				color: "rgba(140, 140, 140, 0.22)",
+				pos: "2% 68%",
+				size: "4px 8px"
+			},
+			{
+				color: "rgba(180, 180, 180, 0.17)",
+				pos: "72% -3%",
+				size: "59px 9px"
+			},
+			{
+				color: "rgba(150, 150, 150, 0.17)",
+				pos: "74% 100%",
+				size: "42px 7px"
+			},
+			{
+				color: "rgba(170, 170, 170, 0.15)",
+				pos: "100% 27%",
+				size: "10px 17px"
+			},
+			{
+				color: "rgba(155, 155, 155, 0.20)",
+				pos: "100% 27%",
+				size: "10px 18px"
+			},
+			{
+				color: "rgba(145, 145, 145, 0.15)",
+				pos: "100% 27%",
+				size: "5px 10px"
+			},
+			{
+				color: "rgba(165, 165, 165, 0.15)",
+				pos: "100% 27%",
+				size: "11px 12px"
+			}
+		]
+	},
+	ocean: {
+		border: [
+			{
+				color: "rgb(60, 140, 200)",
+				pos: "2% 68%",
+				size: "9px 18px"
+			},
+			{
+				color: "rgb(50, 120, 180)",
+				pos: "2% 68%",
+				size: "4px 8px"
+			},
+			{
+				color: "rgb(100, 80, 220)",
+				pos: "72% -3%",
+				size: "59px 9px"
+			},
+			{
+				color: "rgb(80, 100, 255)",
+				pos: "74% 100%",
+				size: "42px 7px"
+			},
+			{
+				color: "rgb(120, 70, 240)",
+				pos: "100% 27%",
+				size: "10px 17px"
+			},
+			{
+				color: "rgb(90, 80, 220)",
+				pos: "100% 27%",
+				size: "10px 18px"
+			},
+			{
+				color: "rgb(70, 110, 255)",
+				pos: "100% 27%",
+				size: "5px 10px"
+			},
+			{
+				color: "rgb(110, 90, 230)",
+				pos: "100% 27%",
+				size: "11px 12px"
+			}
+		],
+		inner: [
+			{
+				color: "rgba(60, 140, 200, 0.5)",
+				pos: "2% 68%",
+				size: "9px 18px"
+			},
+			{
+				color: "rgba(50, 120, 180, 0.45)",
+				pos: "2% 68%",
+				size: "4px 8px"
+			},
+			{
+				color: "rgba(100, 80, 220, 0.35)",
+				pos: "72% -3%",
+				size: "59px 9px"
+			},
+			{
+				color: "rgba(80, 100, 255, 0.35)",
+				pos: "74% 100%",
+				size: "42px 7px"
+			},
+			{
+				color: "rgba(120, 70, 240, 0.3)",
+				pos: "100% 27%",
+				size: "10px 17px"
+			},
+			{
+				color: "rgba(90, 80, 220, 0.4)",
+				pos: "100% 27%",
+				size: "10px 18px"
+			},
+			{
+				color: "rgba(70, 110, 255, 0.3)",
+				pos: "100% 27%",
+				size: "5px 10px"
+			},
+			{
+				color: "rgba(110, 90, 230, 0.3)",
+				pos: "100% 27%",
+				size: "11px 12px"
+			}
+		]
+	},
+	sunset: {
+		border: [
+			{
+				color: "rgb(255, 180, 50)",
+				pos: "2% 68%",
+				size: "9px 18px"
+			},
+			{
+				color: "rgb(255, 150, 40)",
+				pos: "2% 68%",
+				size: "4px 8px"
+			},
+			{
+				color: "rgb(255, 80, 60)",
+				pos: "72% -3%",
+				size: "59px 9px"
+			},
+			{
+				color: "rgb(255, 100, 80)",
+				pos: "74% 100%",
+				size: "42px 7px"
+			},
+			{
+				color: "rgb(255, 60, 80)",
+				pos: "100% 27%",
+				size: "10px 17px"
+			},
+			{
+				color: "rgb(255, 120, 60)",
+				pos: "100% 27%",
+				size: "10px 18px"
+			},
+			{
+				color: "rgb(255, 200, 50)",
+				pos: "100% 27%",
+				size: "5px 10px"
+			},
+			{
+				color: "rgb(255, 90, 70)",
+				pos: "100% 27%",
+				size: "11px 12px"
+			}
+		],
+		inner: [
+			{
+				color: "rgba(255, 180, 50, 0.5)",
+				pos: "2% 68%",
+				size: "9px 18px"
+			},
+			{
+				color: "rgba(255, 150, 40, 0.45)",
+				pos: "2% 68%",
+				size: "4px 8px"
+			},
+			{
+				color: "rgba(255, 80, 60, 0.35)",
+				pos: "72% -3%",
+				size: "59px 9px"
+			},
+			{
+				color: "rgba(255, 100, 80, 0.35)",
+				pos: "74% 100%",
+				size: "42px 7px"
+			},
+			{
+				color: "rgba(255, 60, 80, 0.3)",
+				pos: "100% 27%",
+				size: "10px 17px"
+			},
+			{
+				color: "rgba(255, 120, 60, 0.4)",
+				pos: "100% 27%",
+				size: "10px 18px"
+			},
+			{
+				color: "rgba(255, 200, 50, 0.3)",
+				pos: "100% 27%",
+				size: "5px 10px"
+			},
+			{
+				color: "rgba(255, 90, 70, 0.3)",
+				pos: "100% 27%",
+				size: "11px 12px"
+			}
+		]
+	}
+};
+/**
+*
+* @param colorVariant
+*/
+function getSmallColorGradients(colorVariant) {
+	return smallColorPalettes[colorVariant].border.map((c) => {
+		const [w, h] = c.size.split(" ").map((s) => parseFloat(s));
+		return `radial-gradient(ellipse calc(${w}px * var(--beam-density, 1)) calc(${h}px * var(--beam-density, 1)) at ${c.pos}, ${c.color}, transparent)`;
+	}).join(",\n    ");
+}
+/**
+*
+* @param colorVariant
+*/
+function getSmallInnerGradients(colorVariant) {
+	return smallColorPalettes[colorVariant].inner.map((c) => {
+		const [w, h] = c.size.split(" ").map((s) => parseFloat(s));
+		return `radial-gradient(ellipse calc(${w}px * var(--beam-density, 1)) calc(${h}px * var(--beam-density, 1)) at ${c.pos}, ${c.color}, transparent)`;
+	}).join(",\n    ");
+}
+/**
+*
+* @param colorVariant
+*/
+function getColorGradients(colorVariant) {
+	return colorPalettes[colorVariant].border.map((c) => {
+		const [w, h] = c.size.split(" ").map((s) => parseFloat(s));
+		return `radial-gradient(ellipse calc(${w}px * var(--beam-density, 1)) calc(${h}px * var(--beam-density, 1)) at ${c.pos}, ${c.color}, transparent)`;
+	}).join(",\n    ");
+}
+/**
+*
+* @param colorVariant
+*/
+function getInnerGradients(colorVariant) {
+	const palette = colorPalettes[colorVariant];
+	const baseOpacity = colorVariant === "mono" ? .225 : .45;
+	return palette.border.map((c) => {
+		const rgba = c.color.replace("rgb(", "rgba(").replace(")", `, ${baseOpacity})`);
+		return `radial-gradient(ellipse ${c.size.split(" ").map((s) => {
+			return `calc(${Math.round(parseInt(s) * .9)}px * var(--beam-density, 1))`;
+		}).join(" ")} at ${c.pos}, ${rgba}, transparent)`;
+	}).join(",\n    ");
+}
+/**
+*
+* @param colorVariant
+* @param isDark
+*/
+function getSpikeColors(colorVariant, isDark) {
+	const palette = colorPalettes[colorVariant];
+	return isDark ? palette.spike : palette.spikeLt;
+}
+var lineColorPalettes = {
+	colorful: {
+		dark: [
+			{
+				color: "rgb(255, 50, 100)",
+				sizeW: 36,
+				sizeH: 36,
+				offsetX: 0,
+				offsetY: 2
+			},
+			{
+				color: "rgb(40, 180, 220)",
+				sizeW: 30,
+				sizeH: 32,
+				offsetX: 39,
+				offsetY: 0
+			},
+			{
+				color: "rgb(50, 200, 80)",
+				sizeW: 33,
+				sizeH: 28,
+				offsetX: -36,
+				offsetY: 2
+			},
+			{
+				color: "rgb(180, 40, 240)",
+				sizeW: 29,
+				sizeH: 34,
+				offsetX: -54,
+				offsetY: 0
+			},
+			{
+				color: "rgb(255, 160, 30)",
+				sizeW: 27,
+				sizeH: 30,
+				offsetX: 51,
+				offsetY: -1
+			},
+			{
+				color: "rgb(100, 70, 255)",
+				sizeW: 36,
+				sizeH: 24,
+				offsetX: 21,
+				offsetY: 1
+			},
+			{
+				color: "rgb(40, 140, 255)",
+				sizeW: 30,
+				sizeH: 22,
+				offsetX: -21,
+				offsetY: 0
+			},
+			{
+				color: "rgb(240, 50, 180)",
+				sizeW: 25,
+				sizeH: 28,
+				offsetX: 66,
+				offsetY: 1
+			},
+			{
+				color: "rgb(30, 185, 170)",
+				sizeW: 23,
+				sizeH: 30,
+				offsetX: -66,
+				offsetY: -1
+			}
+		],
+		light: [
+			{
+				color: "rgb(255, 50, 100)",
+				sizeW: 45,
+				sizeH: 36,
+				offsetX: 0,
+				offsetY: 2
+			},
+			{
+				color: "rgb(40, 140, 255)",
+				sizeW: 35,
+				sizeH: 32,
+				offsetX: 65,
+				offsetY: 0
+			},
+			{
+				color: "rgb(50, 200, 80)",
+				sizeW: 40,
+				sizeH: 28,
+				offsetX: -60,
+				offsetY: 2
+			},
+			{
+				color: "rgb(180, 40, 240)",
+				sizeW: 35,
+				sizeH: 34,
+				offsetX: -90,
+				offsetY: 0
+			},
+			{
+				color: "rgb(30, 185, 170)",
+				sizeW: 38,
+				sizeH: 30,
+				offsetX: 85,
+				offsetY: -1
+			},
+			{
+				color: "rgb(100, 70, 255)",
+				sizeW: 50,
+				sizeH: 24,
+				offsetX: 35,
+				offsetY: 1
+			},
+			{
+				color: "rgb(40, 140, 255)",
+				sizeW: 40,
+				sizeH: 22,
+				offsetX: -35,
+				offsetY: 0
+			},
+			{
+				color: "rgb(255, 120, 40)",
+				sizeW: 35,
+				sizeH: 28,
+				offsetX: 110,
+				offsetY: 1
+			},
+			{
+				color: "rgb(240, 50, 180)",
+				sizeW: 30,
+				sizeH: 30,
+				offsetX: -110,
+				offsetY: -1
+			}
+		]
+	},
+	mono: {
+		dark: [
+			{
+				color: "rgb(200, 200, 200)",
+				sizeW: 36,
+				sizeH: 36,
+				offsetX: 0,
+				offsetY: 2
+			},
+			{
+				color: "rgb(170, 170, 170)",
+				sizeW: 30,
+				sizeH: 32,
+				offsetX: 39,
+				offsetY: 0
+			},
+			{
+				color: "rgb(155, 155, 155)",
+				sizeW: 33,
+				sizeH: 28,
+				offsetX: -36,
+				offsetY: 2
+			},
+			{
+				color: "rgb(185, 185, 185)",
+				sizeW: 29,
+				sizeH: 34,
+				offsetX: -54,
+				offsetY: 0
+			},
+			{
+				color: "rgb(165, 165, 165)",
+				sizeW: 27,
+				sizeH: 30,
+				offsetX: 51,
+				offsetY: -1
+			},
+			{
+				color: "rgb(180, 180, 180)",
+				sizeW: 36,
+				sizeH: 24,
+				offsetX: 21,
+				offsetY: 1
+			},
+			{
+				color: "rgb(160, 160, 160)",
+				sizeW: 30,
+				sizeH: 22,
+				offsetX: -21,
+				offsetY: 0
+			},
+			{
+				color: "rgb(175, 175, 175)",
+				sizeW: 25,
+				sizeH: 28,
+				offsetX: 66,
+				offsetY: 1
+			},
+			{
+				color: "rgb(190, 190, 190)",
+				sizeW: 23,
+				sizeH: 30,
+				offsetX: -66,
+				offsetY: -1
+			}
+		],
+		light: [
+			{
+				color: "rgb(100, 100, 100)",
+				sizeW: 45,
+				sizeH: 36,
+				offsetX: 0,
+				offsetY: 2
+			},
+			{
+				color: "rgb(80, 80, 80)",
+				sizeW: 35,
+				sizeH: 32,
+				offsetX: 65,
+				offsetY: 0
+			},
+			{
+				color: "rgb(90, 90, 90)",
+				sizeW: 40,
+				sizeH: 28,
+				offsetX: -60,
+				offsetY: 2
+			},
+			{
+				color: "rgb(70, 70, 70)",
+				sizeW: 35,
+				sizeH: 34,
+				offsetX: -90,
+				offsetY: 0
+			},
+			{
+				color: "rgb(85, 85, 85)",
+				sizeW: 38,
+				sizeH: 30,
+				offsetX: 85,
+				offsetY: -1
+			},
+			{
+				color: "rgb(95, 95, 95)",
+				sizeW: 50,
+				sizeH: 24,
+				offsetX: 35,
+				offsetY: 1
+			},
+			{
+				color: "rgb(75, 75, 75)",
+				sizeW: 40,
+				sizeH: 22,
+				offsetX: -35,
+				offsetY: 0
+			},
+			{
+				color: "rgb(105, 105, 105)",
+				sizeW: 35,
+				sizeH: 28,
+				offsetX: 110,
+				offsetY: 1
+			},
+			{
+				color: "rgb(65, 65, 65)",
+				sizeW: 30,
+				sizeH: 30,
+				offsetX: -110,
+				offsetY: -1
+			}
+		]
+	},
+	ocean: {
+		dark: [
+			{
+				color: "rgb(100, 80, 220)",
+				sizeW: 36,
+				sizeH: 36,
+				offsetX: 0,
+				offsetY: 2
+			},
+			{
+				color: "rgb(60, 120, 255)",
+				sizeW: 30,
+				sizeH: 32,
+				offsetX: 39,
+				offsetY: 0
+			},
+			{
+				color: "rgb(80, 100, 200)",
+				sizeW: 33,
+				sizeH: 28,
+				offsetX: -36,
+				offsetY: 2
+			},
+			{
+				color: "rgb(130, 70, 255)",
+				sizeW: 29,
+				sizeH: 34,
+				offsetX: -54,
+				offsetY: 0
+			},
+			{
+				color: "rgb(70, 130, 255)",
+				sizeW: 27,
+				sizeH: 30,
+				offsetX: 51,
+				offsetY: -1
+			},
+			{
+				color: "rgb(120, 80, 255)",
+				sizeW: 36,
+				sizeH: 24,
+				offsetX: 21,
+				offsetY: 1
+			},
+			{
+				color: "rgb(90, 110, 230)",
+				sizeW: 30,
+				sizeH: 22,
+				offsetX: -21,
+				offsetY: 0
+			},
+			{
+				color: "rgb(110, 90, 240)",
+				sizeW: 25,
+				sizeH: 28,
+				offsetX: 66,
+				offsetY: 1
+			},
+			{
+				color: "rgb(140, 100, 255)",
+				sizeW: 23,
+				sizeH: 30,
+				offsetX: -66,
+				offsetY: -1
+			}
+		],
+		light: [
+			{
+				color: "rgb(80, 60, 200)",
+				sizeW: 45,
+				sizeH: 36,
+				offsetX: 0,
+				offsetY: 2
+			},
+			{
+				color: "rgb(50, 100, 220)",
+				sizeW: 35,
+				sizeH: 32,
+				offsetX: 65,
+				offsetY: 0
+			},
+			{
+				color: "rgb(70, 90, 190)",
+				sizeW: 40,
+				sizeH: 28,
+				offsetX: -60,
+				offsetY: 2
+			},
+			{
+				color: "rgb(110, 60, 220)",
+				sizeW: 35,
+				sizeH: 34,
+				offsetX: -90,
+				offsetY: 0
+			},
+			{
+				color: "rgb(60, 110, 230)",
+				sizeW: 38,
+				sizeH: 30,
+				offsetX: 85,
+				offsetY: -1
+			},
+			{
+				color: "rgb(100, 70, 240)",
+				sizeW: 50,
+				sizeH: 24,
+				offsetX: 35,
+				offsetY: 1
+			},
+			{
+				color: "rgb(80, 100, 210)",
+				sizeW: 40,
+				sizeH: 22,
+				offsetX: -35,
+				offsetY: 0
+			},
+			{
+				color: "rgb(90, 80, 225)",
+				sizeW: 35,
+				sizeH: 28,
+				offsetX: 110,
+				offsetY: 1
+			},
+			{
+				color: "rgb(120, 90, 245)",
+				sizeW: 30,
+				sizeH: 30,
+				offsetX: -110,
+				offsetY: -1
+			}
+		]
+	},
+	sunset: {
+		dark: [
+			{
+				color: "rgb(255, 100, 60)",
+				sizeW: 36,
+				sizeH: 36,
+				offsetX: 0,
+				offsetY: 2
+			},
+			{
+				color: "rgb(255, 180, 50)",
+				sizeW: 30,
+				sizeH: 32,
+				offsetX: 39,
+				offsetY: 0
+			},
+			{
+				color: "rgb(255, 140, 70)",
+				sizeW: 33,
+				sizeH: 28,
+				offsetX: -36,
+				offsetY: 2
+			},
+			{
+				color: "rgb(255, 80, 80)",
+				sizeW: 29,
+				sizeH: 34,
+				offsetX: -54,
+				offsetY: 0
+			},
+			{
+				color: "rgb(255, 200, 60)",
+				sizeW: 27,
+				sizeH: 30,
+				offsetX: 51,
+				offsetY: -1
+			},
+			{
+				color: "rgb(255, 120, 50)",
+				sizeW: 36,
+				sizeH: 24,
+				offsetX: 21,
+				offsetY: 1
+			},
+			{
+				color: "rgb(255, 160, 80)",
+				sizeW: 30,
+				sizeH: 22,
+				offsetX: -21,
+				offsetY: 0
+			},
+			{
+				color: "rgb(255, 90, 60)",
+				sizeW: 25,
+				sizeH: 28,
+				offsetX: 66,
+				offsetY: 1
+			},
+			{
+				color: "rgb(255, 70, 70)",
+				sizeW: 23,
+				sizeH: 30,
+				offsetX: -66,
+				offsetY: -1
+			}
+		],
+		light: [
+			{
+				color: "rgb(220, 80, 40)",
+				sizeW: 45,
+				sizeH: 36,
+				offsetX: 0,
+				offsetY: 2
+			},
+			{
+				color: "rgb(230, 150, 30)",
+				sizeW: 35,
+				sizeH: 32,
+				offsetX: 65,
+				offsetY: 0
+			},
+			{
+				color: "rgb(210, 110, 50)",
+				sizeW: 40,
+				sizeH: 28,
+				offsetX: -60,
+				offsetY: 2
+			},
+			{
+				color: "rgb(200, 60, 60)",
+				sizeW: 35,
+				sizeH: 34,
+				offsetX: -90,
+				offsetY: 0
+			},
+			{
+				color: "rgb(220, 170, 40)",
+				sizeW: 38,
+				sizeH: 30,
+				offsetX: 85,
+				offsetY: -1
+			},
+			{
+				color: "rgb(210, 100, 30)",
+				sizeW: 50,
+				sizeH: 24,
+				offsetX: 35,
+				offsetY: 1
+			},
+			{
+				color: "rgb(230, 130, 60)",
+				sizeW: 40,
+				sizeH: 22,
+				offsetX: -35,
+				offsetY: 0
+			},
+			{
+				color: "rgb(190, 70, 50)",
+				sizeW: 35,
+				sizeH: 28,
+				offsetX: 110,
+				offsetY: 1
+			},
+			{
+				color: "rgb(180, 50, 50)",
+				sizeW: 30,
+				sizeH: 30,
+				offsetX: -110,
+				offsetY: -1
+			}
+		]
+	}
+};
+/**
+*
+* @param colorVariant
+* @param isDark
+* @param id
+*/
+function getLineColorGradients(colorVariant, isDark, id) {
+	return lineColorPalettes[colorVariant][isDark ? "dark" : "light"].map((c) => {
+		const offsetXStr = c.offsetX === 0 ? "" : c.offsetX > 0 ? ` + ${c.offsetX}px` : ` - ${Math.abs(c.offsetX)}px`;
+		const offsetYStr = c.offsetY === 0 ? "" : c.offsetY > 0 ? ` + ${c.offsetY}px` : ` - ${Math.abs(c.offsetY)}px`;
+		return `radial-gradient(ellipse calc(${c.sizeW}px * var(--beam-density, 1) * var(--beam-w-${id})) calc(${c.sizeH}px * var(--beam-density, 1) * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%${offsetXStr}) calc(100%${offsetYStr}), ${c.color}, transparent)`;
+	}).join(",\n       ");
+}
+var lineInnerGradientData = {
+	colorful: [
+		{
+			color: "rgba(255, 50, 100, 0.48)",
+			sizeW: 33,
+			sizeH: 30,
+			offsetX: 0,
+			offsetY: 0
+		},
+		{
+			color: "rgba(40, 180, 220, 0.42)",
+			sizeW: 24,
+			sizeH: 26,
+			offsetX: 39,
+			offsetY: -3
+		},
+		{
+			color: "rgba(50, 200, 80, 0.48)",
+			sizeW: 27,
+			sizeH: 24,
+			offsetX: -36,
+			offsetY: 0
+		},
+		{
+			color: "rgba(180, 40, 240, 0.42)",
+			sizeW: 23,
+			sizeH: 28,
+			offsetX: -54,
+			offsetY: -2
+		},
+		{
+			color: "rgba(255, 160, 30, 0.50)",
+			sizeW: 24,
+			sizeH: 24,
+			offsetX: 51,
+			offsetY: -1
+		},
+		{
+			color: "rgba(100, 70, 255, 0.45)",
+			sizeW: 30,
+			sizeH: 20,
+			offsetX: 21,
+			offsetY: 0
+		},
+		{
+			color: "rgba(40, 140, 255, 0.40)",
+			sizeW: 25,
+			sizeH: 18,
+			offsetX: -21,
+			offsetY: -2
+		},
+		{
+			color: "rgba(240, 50, 180, 0.45)",
+			sizeW: 21,
+			sizeH: 24,
+			offsetX: 66,
+			offsetY: 0
+		},
+		{
+			color: "rgba(30, 185, 170, 0.52)",
+			sizeW: 18,
+			sizeH: 26,
+			offsetX: -66,
+			offsetY: -1
+		}
+	],
+	mono: [
+		{
+			color: "rgba(200, 200, 200, 0.48)",
+			sizeW: 33,
+			sizeH: 30,
+			offsetX: 0,
+			offsetY: 0
+		},
+		{
+			color: "rgba(170, 170, 170, 0.42)",
+			sizeW: 24,
+			sizeH: 26,
+			offsetX: 39,
+			offsetY: -3
+		},
+		{
+			color: "rgba(155, 155, 155, 0.48)",
+			sizeW: 27,
+			sizeH: 24,
+			offsetX: -36,
+			offsetY: 0
+		},
+		{
+			color: "rgba(185, 185, 185, 0.42)",
+			sizeW: 23,
+			sizeH: 28,
+			offsetX: -54,
+			offsetY: -2
+		},
+		{
+			color: "rgba(165, 165, 165, 0.50)",
+			sizeW: 24,
+			sizeH: 24,
+			offsetX: 51,
+			offsetY: -1
+		},
+		{
+			color: "rgba(180, 180, 180, 0.45)",
+			sizeW: 30,
+			sizeH: 20,
+			offsetX: 21,
+			offsetY: 0
+		},
+		{
+			color: "rgba(160, 160, 160, 0.40)",
+			sizeW: 25,
+			sizeH: 18,
+			offsetX: -21,
+			offsetY: -2
+		},
+		{
+			color: "rgba(175, 175, 175, 0.45)",
+			sizeW: 21,
+			sizeH: 24,
+			offsetX: 66,
+			offsetY: 0
+		},
+		{
+			color: "rgba(190, 190, 190, 0.52)",
+			sizeW: 18,
+			sizeH: 26,
+			offsetX: -66,
+			offsetY: -1
+		}
+	],
+	ocean: [
+		{
+			color: "rgba(100, 80, 220, 0.48)",
+			sizeW: 33,
+			sizeH: 30,
+			offsetX: 0,
+			offsetY: 0
+		},
+		{
+			color: "rgba(60, 120, 255, 0.42)",
+			sizeW: 24,
+			sizeH: 26,
+			offsetX: 39,
+			offsetY: -3
+		},
+		{
+			color: "rgba(80, 100, 200, 0.48)",
+			sizeW: 27,
+			sizeH: 24,
+			offsetX: -36,
+			offsetY: 0
+		},
+		{
+			color: "rgba(130, 70, 255, 0.42)",
+			sizeW: 23,
+			sizeH: 28,
+			offsetX: -54,
+			offsetY: -2
+		},
+		{
+			color: "rgba(70, 130, 255, 0.50)",
+			sizeW: 24,
+			sizeH: 24,
+			offsetX: 51,
+			offsetY: -1
+		},
+		{
+			color: "rgba(120, 80, 255, 0.45)",
+			sizeW: 30,
+			sizeH: 20,
+			offsetX: 21,
+			offsetY: 0
+		},
+		{
+			color: "rgba(90, 110, 230, 0.40)",
+			sizeW: 25,
+			sizeH: 18,
+			offsetX: -21,
+			offsetY: -2
+		},
+		{
+			color: "rgba(110, 90, 240, 0.45)",
+			sizeW: 21,
+			sizeH: 24,
+			offsetX: 66,
+			offsetY: 0
+		},
+		{
+			color: "rgba(140, 100, 255, 0.52)",
+			sizeW: 18,
+			sizeH: 26,
+			offsetX: -66,
+			offsetY: -1
+		}
+	],
+	sunset: [
+		{
+			color: "rgba(255, 100, 60, 0.48)",
+			sizeW: 33,
+			sizeH: 30,
+			offsetX: 0,
+			offsetY: 0
+		},
+		{
+			color: "rgba(255, 180, 50, 0.42)",
+			sizeW: 24,
+			sizeH: 26,
+			offsetX: 39,
+			offsetY: -3
+		},
+		{
+			color: "rgba(255, 140, 70, 0.48)",
+			sizeW: 27,
+			sizeH: 24,
+			offsetX: -36,
+			offsetY: 0
+		},
+		{
+			color: "rgba(255, 80, 80, 0.42)",
+			sizeW: 23,
+			sizeH: 28,
+			offsetX: -54,
+			offsetY: -2
+		},
+		{
+			color: "rgba(255, 200, 60, 0.50)",
+			sizeW: 24,
+			sizeH: 24,
+			offsetX: 51,
+			offsetY: -1
+		},
+		{
+			color: "rgba(255, 120, 50, 0.45)",
+			sizeW: 30,
+			sizeH: 20,
+			offsetX: 21,
+			offsetY: 0
+		},
+		{
+			color: "rgba(255, 160, 80, 0.40)",
+			sizeW: 25,
+			sizeH: 18,
+			offsetX: -21,
+			offsetY: -2
+		},
+		{
+			color: "rgba(255, 90, 60, 0.45)",
+			sizeW: 21,
+			sizeH: 24,
+			offsetX: 66,
+			offsetY: 0
+		},
+		{
+			color: "rgba(255, 70, 70, 0.52)",
+			sizeW: 18,
+			sizeH: 26,
+			offsetX: -66,
+			offsetY: -1
+		}
+	]
+};
+/**
+*
+* @param colorVariant
+* @param id
+*/
+function getLineInnerGradients(colorVariant, id) {
+	return lineInnerGradientData[colorVariant].map((c) => {
+		const offsetXStr = c.offsetX === 0 ? "" : c.offsetX > 0 ? ` + ${c.offsetX}px` : ` - ${Math.abs(c.offsetX)}px`;
+		const offsetYStr = c.offsetY === 0 ? "" : ` - ${Math.abs(c.offsetY)}px`;
+		return `radial-gradient(ellipse calc(${c.sizeW}px * var(--beam-density, 1) * var(--beam-w-${id})) calc(${c.sizeH}px * var(--beam-density, 1) * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%${offsetXStr}) calc(100%${offsetYStr}), ${c.color}, transparent)`;
+	}).join(",\n    ");
+}
+var lineBloomColors = {
+	colorful: {
+		dark: { spikes: [
+			{
+				color1: "rgb(100, 70, 255)",
+				color2: "rgba(100, 70, 255, 1)"
+			},
+			{
+				color1: "rgba(255, 170, 40, 0.59)",
+				color2: "rgba(255, 170, 40, 0.29)"
+			},
+			{
+				color1: "rgb(50, 200, 100)",
+				color2: "rgba(50, 200, 100, 1)"
+			},
+			{
+				color1: "rgba(200, 50, 240, 0.91)",
+				color2: "rgba(200, 50, 240, 0.45)"
+			},
+			{
+				color1: "rgb(40, 140, 255)",
+				color2: "rgba(40, 140, 255, 1)"
+			}
+		] },
+		light: { spikes: [
+			{
+				color1: "rgb(80, 50, 200)",
+				color2: "rgba(80, 50, 200, 0.8)"
+			},
+			{
+				color1: "rgba(210, 130, 0, 0.7)",
+				color2: "rgba(210, 130, 0, 0.46)"
+			},
+			{
+				color1: "rgb(30, 160, 70)",
+				color2: "rgba(30, 160, 70, 0.82)"
+			},
+			{
+				color1: "rgb(160, 30, 190)",
+				color2: "rgba(160, 30, 190, 0.7)"
+			},
+			{
+				color1: "rgb(30, 100, 200)",
+				color2: "rgba(30, 100, 200, 0.78)"
+			}
+		] }
+	},
+	mono: {
+		dark: { spikes: [
+			{
+				color1: "rgb(200, 200, 200)",
+				color2: "rgba(200, 200, 200, 1)"
+			},
+			{
+				color1: "rgba(180, 180, 180, 0.59)",
+				color2: "rgba(180, 180, 180, 0.29)"
+			},
+			{
+				color1: "rgb(190, 190, 190)",
+				color2: "rgba(190, 190, 190, 1)"
+			},
+			{
+				color1: "rgba(170, 170, 170, 0.91)",
+				color2: "rgba(170, 170, 170, 0.45)"
+			},
+			{
+				color1: "rgb(185, 185, 185)",
+				color2: "rgba(185, 185, 185, 1)"
+			}
+		] },
+		light: { spikes: [
+			{
+				color1: "rgb(80, 80, 80)",
+				color2: "rgba(80, 80, 80, 0.8)"
+			},
+			{
+				color1: "rgba(100, 100, 100, 0.7)",
+				color2: "rgba(100, 100, 100, 0.46)"
+			},
+			{
+				color1: "rgb(70, 70, 70)",
+				color2: "rgba(70, 70, 70, 0.82)"
+			},
+			{
+				color1: "rgb(90, 90, 90)",
+				color2: "rgba(90, 90, 90, 0.7)"
+			},
+			{
+				color1: "rgb(85, 85, 85)",
+				color2: "rgba(85, 85, 85, 0.78)"
+			}
+		] }
+	},
+	ocean: {
+		dark: { spikes: [
+			{
+				color1: "rgb(100, 80, 255)",
+				color2: "rgb(100, 80, 255)"
+			},
+			{
+				color1: "rgba(80, 130, 220, 0.59)",
+				color2: "rgba(80, 130, 220, 0.29)"
+			},
+			{
+				color1: "rgb(60, 100, 255)",
+				color2: "rgb(60, 100, 255)"
+			},
+			{
+				color1: "rgba(90, 120, 200, 0.91)",
+				color2: "rgba(90, 120, 200, 0.45)"
+			},
+			{
+				color1: "rgb(120, 90, 255)",
+				color2: "rgb(120, 90, 255)"
+			}
+		] },
+		light: { spikes: [
+			{
+				color1: "rgb(50, 40, 180)",
+				color2: "rgba(50, 40, 180, 0.8)"
+			},
+			{
+				color1: "rgba(40, 80, 200, 0.7)",
+				color2: "rgba(40, 80, 200, 0.46)"
+			},
+			{
+				color1: "rgb(30, 50, 190)",
+				color2: "rgba(30, 50, 190, 0.82)"
+			},
+			{
+				color1: "rgb(60, 90, 180)",
+				color2: "rgba(60, 90, 180, 0.7)"
+			},
+			{
+				color1: "rgb(70, 60, 200)",
+				color2: "rgba(70, 60, 200, 0.78)"
+			}
+		] }
+	},
+	sunset: {
+		dark: { spikes: [
+			{
+				color1: "rgb(255, 100, 80)",
+				color2: "rgb(255, 100, 80)"
+			},
+			{
+				color1: "rgba(255, 150, 80, 0.59)",
+				color2: "rgba(255, 150, 80, 0.29)"
+			},
+			{
+				color1: "rgb(255, 80, 60)",
+				color2: "rgb(255, 80, 60)"
+			},
+			{
+				color1: "rgba(255, 120, 50, 0.91)",
+				color2: "rgba(255, 120, 50, 0.45)"
+			},
+			{
+				color1: "rgb(255, 140, 70)",
+				color2: "rgb(255, 140, 70)"
+			}
+		] },
+		light: { spikes: [
+			{
+				color1: "rgb(200, 60, 30)",
+				color2: "rgba(200, 60, 30, 0.8)"
+			},
+			{
+				color1: "rgba(220, 100, 20, 0.7)",
+				color2: "rgba(220, 100, 20, 0.46)"
+			},
+			{
+				color1: "rgb(180, 40, 20)",
+				color2: "rgba(180, 40, 20, 0.82)"
+			},
+			{
+				color1: "rgb(210, 80, 10)",
+				color2: "rgba(210, 80, 10, 0.7)"
+			},
+			{
+				color1: "rgb(190, 70, 30)",
+				color2: "rgba(190, 70, 30, 0.78)"
+			}
+		] }
+	}
+};
+/**
+*
+* @param color
+* @param alpha
+*/
+function withAlpha(color, alpha) {
+	const rgbaMatch = color.match(/^rgba\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*[\d.]+\s*\)$/);
+	if (rgbaMatch) return `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, ${alpha})`;
+	const rgbMatch = color.match(/^rgb\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/);
+	if (rgbMatch) return `rgba(${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}, ${alpha})`;
+	return color;
+}
+/**
+*
+* @param color
+* @param factor
+*/
+function attenuateSpike(color, factor) {
+	const rgbaMatch = color.match(/^rgba\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/);
+	if (rgbaMatch) return `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, ${(parseFloat(rgbaMatch[4]) * factor).toFixed(2)})`;
+	const rgbMatch = color.match(/^rgb\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/);
+	if (rgbMatch) return `rgba(${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]}, ${factor.toFixed(2)})`;
+	return color;
+}
+/**
+*
+* @param colorVariant
+* @param isDark
+* @param id
+*/
+function getLineBloomGradients(colorVariant, isDark, id) {
+	const spikeColors = getSpikeColors(colorVariant, isDark);
+	const bloomData = lineBloomColors[colorVariant][isDark ? "dark" : "light"];
+	const isMono = colorVariant === "mono";
+	const att = isMono ? .14 : 1;
+	const sc1 = isMono ? attenuateSpike(spikeColors.primary, .14) : spikeColors.primary;
+	const sc1_mid = isMono ? attenuateSpike(spikeColors.primary, .09) : spikeColors.primary;
+	const sc2 = isMono ? attenuateSpike(spikeColors.secondary, .12) : spikeColors.secondary;
+	const sc2_mid = isMono ? withAlpha(spikeColors.secondary, .06) : withAlpha(spikeColors.secondary, .49);
+	const spikes = bloomData.spikes.map((s) => isMono ? {
+		color1: attenuateSpike(s.color1, att),
+		color2: attenuateSpike(s.color2, att * .7)
+	} : s);
+	const thinW1 = isMono ? "12px" : "0.8px";
+	const thinW2 = isMono ? "14px" : "2px";
+	const thinW3 = isMono ? "12px" : "1.2px";
+	const thinW4 = isMono ? "10px" : "0.6px";
+	const thinH1 = isMono ? "42px" : "92px";
+	const thinH2 = isMono ? "38px" : "72px";
+	const thinH3 = isMono ? "40px" : "85px";
+	const thinH4 = isMono ? "32px" : "60px";
+	const thinLW = isMono ? "12px" : "1px";
+	const glowDotC = isMono ? "rgba(255, 255, 255, 0.5)" : "rgba(255, 255, 255, 1)";
+	const glowDot20 = isMono ? "rgba(255, 255, 255, 0.45)" : "rgba(255, 255, 255, 0.9)";
+	const glowDot50 = isMono ? "rgba(255, 255, 255, 0.25)" : "rgba(255, 255, 255, 0.5)";
+	const glowAmbC = isMono ? "rgba(255, 255, 255, 0.15)" : "rgba(255, 255, 255, 0.3)";
+	const glowAmb25 = isMono ? "rgba(255, 255, 255, 0.06)" : "rgba(255, 255, 255, 0.12)";
+	const glowAmb55 = isMono ? "rgba(255, 255, 255, 0.015)" : "rgba(255, 255, 255, 0.03)";
+	if (isDark) return `radial-gradient(ellipse calc(${thinW1} * var(--beam-density, 1) * var(--beam-spike-${id})) calc(${thinH1} * var(--beam-density, 1) * var(--beam-h-${id})) at 8% calc(100% - 2px), ${sc1}, ${sc1_mid} 30%, transparent 88%),
+       radial-gradient(ellipse calc(10px * var(--beam-density, 1) * var(--beam-spike2-${id})) calc(35px * var(--beam-density, 1) * var(--beam-h-${id})) at 22% calc(100% - 4px), ${sc2}, ${sc2_mid} 50%, transparent 95%),
+       radial-gradient(ellipse calc(${thinW2} * var(--beam-density, 1) * (2 - var(--beam-spike-${id}))) calc(${thinH2} * var(--beam-density, 1) * var(--beam-h-${id})) at 36% calc(100% - 3px), ${spikes[0].color1}, ${spikes[0].color2} 40%, transparent 90%),
+       radial-gradient(ellipse calc(14px * var(--beam-density, 1) * var(--beam-spike2-${id})) calc(28px * var(--beam-density, 1) * var(--beam-h-${id})) at 50% calc(100% - 2px), ${spikes[1].color1}, ${spikes[1].color2} 55%, transparent 96%),
+       radial-gradient(ellipse calc(${thinW3} * var(--beam-density, 1) * (2 - var(--beam-spike2-${id}))) calc(${thinH3} * var(--beam-density, 1) * var(--beam-h-${id})) at 64% calc(100% - 4px), ${spikes[2].color1}, ${spikes[2].color2} 35%, transparent 89%),
+       radial-gradient(ellipse calc(7px * var(--beam-density, 1) * var(--beam-spike-${id})) calc(45px * var(--beam-density, 1) * var(--beam-h-${id})) at 78% calc(100% - 2px), ${spikes[3].color1}, ${spikes[3].color2} 48%, transparent 94%),
+       radial-gradient(ellipse calc(${thinW4} * var(--beam-density, 1) * (2 - var(--beam-spike-${id}))) calc(${thinH4} * var(--beam-density, 1) * var(--beam-h-${id})) at 92% calc(100% - 3px), ${spikes[4].color1}, ${spikes[4].color2} 42%, transparent 91%),
+       radial-gradient(ellipse calc(21px * var(--beam-density, 1) * var(--beam-spike-${id})) calc(15px * var(--beam-density, 1) * var(--beam-spike2-${id})) at calc(var(--beam-x-${id}) * 100%) calc(100% + 1px), ${glowDotC} 0%, ${glowDot20} 20%, ${glowDot50} 50%, transparent 100%),
+       radial-gradient(ellipse calc(42px * var(--beam-density, 1) * var(--beam-w-${id})) calc(40px * var(--beam-density, 1) * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) 100%, ${glowAmbC} 0%, ${glowAmb25} 25%, ${glowAmb55} 55%, transparent 80%)`;
+	else return `radial-gradient(ellipse calc(${thinW1} * var(--beam-density, 1) * var(--beam-spike-${id})) calc(${thinH1} * var(--beam-density, 1) * var(--beam-h-${id})) at 8% calc(100% - 2px), ${sc1}, ${isMono ? attenuateSpike(spikeColors.primary, .11) : withAlpha(spikeColors.primary, .85)} 30%, transparent 88%),
+       radial-gradient(ellipse calc(10px * var(--beam-density, 1) * var(--beam-spike2-${id})) calc(35px * var(--beam-density, 1) * var(--beam-h-${id})) at 22% calc(100% - 4px), ${sc2}, ${isMono ? attenuateSpike(spikeColors.secondary, .09) : withAlpha(spikeColors.secondary, .7)} 50%, transparent 95%),
+       radial-gradient(ellipse calc(${thinW2} * var(--beam-density, 1) * (2 - var(--beam-spike-${id}))) calc(${thinH2} * var(--beam-density, 1) * var(--beam-h-${id})) at 36% calc(100% - 3px), ${spikes[0].color1}, ${spikes[0].color2} 40%, transparent 90%),
+       radial-gradient(ellipse calc(14px * var(--beam-density, 1) * var(--beam-spike2-${id})) calc(28px * var(--beam-density, 1) * var(--beam-h-${id})) at 50% calc(100% - 2px), ${spikes[1].color1}, ${spikes[1].color2} 55%, transparent 96%),
+       radial-gradient(ellipse calc(${thinW3} * var(--beam-density, 1) * (2 - var(--beam-spike2-${id}))) calc(${thinH3} * var(--beam-density, 1) * var(--beam-h-${id})) at 64% calc(100% - 4px), ${spikes[2].color1}, ${spikes[2].color2} 35%, transparent 89%),
+       radial-gradient(ellipse calc(7px * var(--beam-density, 1) * var(--beam-spike-${id})) calc(45px * var(--beam-density, 1) * var(--beam-h-${id})) at 78% calc(100% - 2px), ${spikes[3].color1}, ${spikes[3].color2} 48%, transparent 94%),
+       radial-gradient(ellipse calc(${thinLW} * var(--beam-density, 1) * (2 - var(--beam-spike-${id}))) calc(${thinH4} * var(--beam-density, 1) * var(--beam-h-${id})) at 92% calc(100% - 3px), ${spikes[4].color1}, ${spikes[4].color2} 42%, transparent 91%),
+       radial-gradient(ellipse calc(50px * var(--beam-density, 1) * var(--beam-w-${id})) calc(32px * var(--beam-density, 1) * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) calc(100%), rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 30%, rgba(0, 0, 0, 0.03) 60%, transparent 85%)`;
+}
+var PULSE_RING_MAP = [
+	{
+		region: 1,
+		quad: "tl"
+	},
+	{
+		region: 2,
+		quad: "tl"
+	},
+	{
+		region: 3,
+		quad: "bl"
+	},
+	{
+		region: 1,
+		quad: "bl"
+	},
+	{
+		region: 2,
+		quad: "br"
+	},
+	{
+		region: 3,
+		quad: "br"
+	},
+	{
+		region: 1,
+		quad: "tr"
+	},
+	{
+		region: 2,
+		quad: "tr"
+	},
+	{
+		region: 3,
+		quad: "tr"
+	}
+];
+var PULSE_INNER_SIZES = [
+	[65, 35],
+	[55, 30],
+	[35, 65],
+	[15, 30],
+	[173, 28],
+	[80, 22],
+	[69, 28],
+	[22, 38],
+	[47, 44]
+];
+var PULSE_INNER_BLOOM = [
+	{
+		ci: 0,
+		region: 1,
+		quad: "tl",
+		w: 84,
+		h: 48
+	},
+	{
+		ci: 1,
+		region: 2,
+		quad: "tl",
+		w: 72,
+		h: 42
+	},
+	{
+		ci: 2,
+		region: 3,
+		quad: "bl",
+		w: 48,
+		h: 84
+	},
+	{
+		ci: 4,
+		region: 2,
+		quad: "br",
+		w: 216,
+		h: 38
+	},
+	{
+		ci: 5,
+		region: 3,
+		quad: "br",
+		w: 102,
+		h: 31
+	},
+	{
+		ci: 6,
+		region: 1,
+		quad: "tr",
+		w: 89,
+		h: 38
+	},
+	{
+		ci: 8,
+		region: 3,
+		quad: "tr",
+		w: 62,
+		h: 58
+	}
+];
+var PULSE_OUTER_CORE = [
+	{
+		ci: 0,
+		region: 1,
+		quad: "tl",
+		w: 80,
+		h: 19,
+		x: "27%",
+		y: "0%"
+	},
+	{
+		ci: 6,
+		region: 2,
+		quad: "tr",
+		w: 74,
+		h: 11,
+		x: "73%",
+		y: "-1%"
+	},
+	{
+		ci: 7,
+		region: 3,
+		quad: "tr",
+		w: 15,
+		h: 44,
+		x: "100%",
+		y: "33%"
+	},
+	{
+		ci: 8,
+		region: 1,
+		quad: "br",
+		w: 19,
+		h: 38,
+		x: "101%",
+		y: "72%"
+	},
+	{
+		ci: 4,
+		region: 2,
+		quad: "br",
+		w: 84,
+		h: 13,
+		x: "67%",
+		y: "100%"
+	},
+	{
+		ci: 1,
+		region: 3,
+		quad: "bl",
+		w: 60,
+		h: 21,
+		x: "24%",
+		y: "101%"
+	},
+	{
+		ci: 2,
+		region: 1,
+		quad: "bl",
+		w: 17,
+		h: 40,
+		x: "0%",
+		y: "60%"
+	},
+	{
+		ci: 3,
+		region: 2,
+		quad: "tl",
+		w: 13,
+		h: 32,
+		x: "-1%",
+		y: "28%"
+	}
+];
+var PULSE_OUTER_BLOOM = [
+	{
+		ci: 0,
+		region: 1,
+		quad: "tl",
+		w: 110,
+		h: 30,
+		x: "27%",
+		y: "3%"
+	},
+	{
+		ci: 6,
+		region: 2,
+		quad: "tr",
+		w: 100,
+		h: 20,
+		x: "73%",
+		y: "1%"
+	},
+	{
+		ci: 7,
+		region: 3,
+		quad: "tr",
+		w: 26,
+		h: 62,
+		x: "100%",
+		y: "33%"
+	},
+	{
+		ci: 8,
+		region: 1,
+		quad: "br",
+		w: 30,
+		h: 56,
+		x: "101%",
+		y: "72%"
+	},
+	{
+		ci: 4,
+		region: 2,
+		quad: "br",
+		w: 120,
+		h: 22,
+		x: "67%",
+		y: "99%"
+	},
+	{
+		ci: 1,
+		region: 3,
+		quad: "bl",
+		w: 88,
+		h: 32,
+		x: "24%",
+		y: "99%"
+	},
+	{
+		ci: 2,
+		region: 1,
+		quad: "bl",
+		w: 28,
+		h: 58,
+		x: "0%",
+		y: "60%"
+	}
+];
+/**
+*
+* @param color
+* @param quad
+* @param id
+*/
+function withAlphaVar(color, quad, id) {
+	const m = color.match(/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/);
+	return `rgba(${m ? `${m[1]}, ${m[2]}, ${m[3]}` : "255, 255, 255"}, var(--bop-${quad}-${id}))`;
+}
+/**
+*
+* @param color
+* @param w
+* @param h
+* @param region
+* @param quad
+* @param x
+* @param y
+* @param id
+*/
+function pulseGrad(color, w, h, region, quad, x, y, id) {
+	return `radial-gradient(ellipse calc(${w}px * var(--beam-density, 1) * var(--bw${region}-${id}) * var(--pulse-glow-sx, 1)) calc(${h}px * var(--beam-density, 1) * var(--bh${region}-${id}) * var(--bgh-${id}) * var(--pulse-glow-sy, 1)) at calc(${x} + var(--bx${region}-${id})) calc(${y} + var(--by${region}-${id})), ${withAlphaVar(color, quad, id)}, transparent)`;
+}
+/**
+*
+* @param variant
+* @param id
+*/
+function pulseRingGradients(variant, id) {
+	return colorPalettes[variant].border.map((c, i) => {
+		const { region, quad } = PULSE_RING_MAP[i];
+		const [x, y] = c.pos.split(" ");
+		const [w, h] = c.size.split(" ").map(parseFloat);
+		return pulseGrad(c.color, w, h, region, quad, x, y, id);
+	}).join(",\n    ");
+}
+/**
+*
+* @param variant
+* @param id
+* @param isDark
+*/
+function pulseInnerGradients(variant, id, isDark) {
+	const grads = colorPalettes[variant].border.map((c, i) => {
+		const { region, quad } = PULSE_RING_MAP[i];
+		const [x, y] = c.pos.split(" ");
+		const [w, h] = PULSE_INNER_SIZES[i];
+		return pulseGrad(c.color, w, h, region, quad, x, y, id);
+	});
+	const cornerRGB = isDark ? "255, 255, 255" : "0, 0, 0";
+	const cornerAlpha = isDark ? .18 : .08;
+	const cornerGrads = [
+		[
+			"0%",
+			"0%",
+			"tl"
+		],
+		[
+			"100%",
+			"0%",
+			"tr"
+		],
+		[
+			"0%",
+			"100%",
+			"bl"
+		],
+		[
+			"100%",
+			"100%",
+			"br"
+		]
+	].map(([x, y, q]) => `radial-gradient(ellipse calc(60px * var(--beam-density, 1)) calc(60px * var(--beam-density, 1)) at ${x} ${y}, rgba(${cornerRGB}, calc(${cornerAlpha} * var(--bop-${q}-${id}))), transparent 70%)`);
+	return [...grads, ...cornerGrads].join(",\n    ");
+}
+/**
+*
+* @param table
+* @param variant
+* @param id
+*/
+function pulseTableGradients(table, variant, id) {
+	const palette = colorPalettes[variant].border;
+	return table.map((e) => {
+		var _e$x, _e$y;
+		const c = palette[e.ci];
+		const [px, py] = c.pos.split(" ");
+		return pulseGrad(c.color, e.w, e.h, e.region, e.quad, (_e$x = e.x) !== null && _e$x !== void 0 ? _e$x : px, (_e$y = e.y) !== null && _e$y !== void 0 ? _e$y : py, id);
+	}).join(",\n    ");
+}
+/**
+*
+* @param table
+* @param variant
+* @param frozenAlpha
+*/
+function pulseTableGradientsStatic(table, variant, frozenAlpha) {
+	const palette = colorPalettes[variant].border;
+	const a = +frozenAlpha.toFixed(3);
+	return table.map((e) => {
+		var _e$x2, _e$y2;
+		const c = palette[e.ci];
+		const [px, py] = c.pos.split(" ");
+		const x = (_e$x2 = e.x) !== null && _e$x2 !== void 0 ? _e$x2 : px;
+		const y = (_e$y2 = e.y) !== null && _e$y2 !== void 0 ? _e$y2 : py;
+		const m = c.color.match(/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/);
+		const rgb = m ? `${m[1]}, ${m[2]}, ${m[3]}` : "255, 255, 255";
+		return `radial-gradient(ellipse calc(${e.w}px * var(--beam-density, 1) * var(--pulse-glow-sx, 1)) calc(${e.h}px * var(--beam-density, 1) * var(--pulse-glow-sy, 1)) at ${x} ${y}, rgba(${rgb}, ${a}), transparent)`;
+	}).join(",\n    ");
+}
+/**
+*
+* @param id
+*/
+function pausedAnimationsRule(id) {
+	return `
+[data-beam="${id}"][data-paused],
+[data-beam="${id}"][data-paused]::after,
+[data-beam="${id}"][data-paused]::before,
+[data-beam="${id}"][data-paused] [data-beam-bloom] {
+  animation-play-state: paused !important;
+}`;
+}
+/**
+*
+* @param id
+*/
+function pulsePropertyRegs(id) {
+	return `${[
+		"bw1",
+		"bh1",
+		"bw2",
+		"bh2",
+		"bw3",
+		"bh3",
+		"bgh",
+		"bop-tl",
+		"bop-tr",
+		"bop-bl",
+		"bop-br"
+	].map((n) => `@property --${n}-${id} {\n  syntax: "<number>";\n  initial-value: 1;\n  inherits: true;\n}`).join("\n\n")}\n\n${[
+		"bx1",
+		"by1",
+		"bx2",
+		"by2",
+		"bx3",
+		"by3"
+	].map((n) => `@property --${n}-${id} {\n  syntax: "<length>";\n  initial-value: 0px;\n  inherits: true;\n}`).join("\n\n")}\n\n@property --beam-opacity-${id} {\n  syntax: "<number>";\n  initial-value: 0;\n  inherits: true;\n}\n\n@property --beam-hue-${id} {\n  syntax: "<angle>";\n  initial-value: 0deg;\n  inherits: true;\n}`;
+}
+/**
+* Theme/size/duration-tuned breathing parameters (shared by CSS + JS driver).
+* @param size
+* @param theme
+* @param duration
+*/
+function pulseParams(size, theme, duration) {
+	const isDark = theme === "dark";
+	const durScale = duration / 2.3;
+	if (size === "pulse-inner") return {
+		sp: .28,
+		dr: isDark ? 33 : 40,
+		op: isDark ? .48 : .45,
+		gh: isDark ? .34 : .22,
+		bs: (isDark ? 1.9 : 2.6) * durScale,
+		ss: (isDark ? 2.6 : 4.6) * durScale,
+		ghs: (isDark ? 2.4 : 5.5) * durScale,
+		huePeriod: 16
+	};
+	return {
+		sp: isDark ? .28 : .36,
+		dr: isDark ? 14 : 19,
+		op: isDark ? .46 : 0,
+		gh: isDark ? .16 : .58,
+		bs: (isDark ? 2.3 : 3.7) * durScale,
+		ss: (isDark ? 6.4 : 4.6) * durScale,
+		ghs: (isDark ? 2.4 : 3.8) * durScale,
+		huePeriod: 14
+	};
+}
+/**
+* Build the oscillator table for an instance (matches the former keyframes).
+* @param id
+* @param p
+*/
+function pulseOscillatorDefs(id, p) {
+	const { sp, dr, op, gh, bs, ss, ghs } = p;
+	return [
+		{
+			prop: `--bw1-${id}`,
+			a: 1 - sp,
+			b: 1 + sp * 1.1,
+			period: ss * .9,
+			delay: 0,
+			unit: ""
+		},
+		{
+			prop: `--bh1-${id}`,
+			a: 1 + sp * .9,
+			b: 1 - sp * .85,
+			period: ss * 1.26,
+			delay: 0,
+			unit: ""
+		},
+		{
+			prop: `--bx1-${id}`,
+			a: -dr,
+			b: dr * .9,
+			period: bs * 1.6,
+			delay: 0,
+			unit: "px"
+		},
+		{
+			prop: `--by1-${id}`,
+			a: dr * .55,
+			b: -dr * .7,
+			period: bs * 1.6,
+			delay: 0,
+			unit: "px"
+		},
+		{
+			prop: `--bw2-${id}`,
+			a: 1 + sp,
+			b: 1 - sp * .85,
+			period: ss * 1.1,
+			delay: 0,
+			unit: ""
+		},
+		{
+			prop: `--bh2-${id}`,
+			a: 1 - sp * .8,
+			b: 1 + sp * 1.05,
+			period: ss * .81,
+			delay: 0,
+			unit: ""
+		},
+		{
+			prop: `--bx2-${id}`,
+			a: dr * .8,
+			b: -dr * .9,
+			period: bs * 1.88,
+			delay: 0,
+			unit: "px"
+		},
+		{
+			prop: `--by2-${id}`,
+			a: -dr,
+			b: dr * .65,
+			period: bs * 1.88,
+			delay: 0,
+			unit: "px"
+		},
+		{
+			prop: `--bw3-${id}`,
+			a: 1 - sp * .6,
+			b: 1 + sp * 1.15,
+			period: ss * .98,
+			delay: 0,
+			unit: ""
+		},
+		{
+			prop: `--bh3-${id}`,
+			a: 1 + sp * .75,
+			b: 1 - sp,
+			period: ss * 1.4,
+			delay: 0,
+			unit: ""
+		},
+		{
+			prop: `--bx3-${id}`,
+			a: -dr * .6,
+			b: dr,
+			period: bs * 1.45,
+			delay: 0,
+			unit: "px"
+		},
+		{
+			prop: `--by3-${id}`,
+			a: -dr * .85,
+			b: dr * .45,
+			period: bs * 1.45,
+			delay: 0,
+			unit: "px"
+		},
+		{
+			prop: `--bgh-${id}`,
+			a: 1 - gh,
+			b: 1 + gh,
+			period: ghs,
+			delay: 0,
+			unit: ""
+		},
+		{
+			prop: `--bop-tl-${id}`,
+			a: 1 - op,
+			b: 1,
+			period: bs,
+			delay: 0,
+			unit: ""
+		},
+		{
+			prop: `--bop-tr-${id}`,
+			a: 1 - op,
+			b: 1,
+			period: bs * 1.32,
+			delay: bs * .28,
+			unit: ""
+		},
+		{
+			prop: `--bop-bl-${id}`,
+			a: 1 - op,
+			b: 1,
+			period: bs * .84,
+			delay: bs * .55,
+			unit: ""
+		},
+		{
+			prop: `--bop-br-${id}`,
+			a: 1 - op,
+			b: 1,
+			period: bs * 1.58,
+			delay: bs * .83,
+			unit: ""
+		}
+	];
+}
+/**
+* Returns the runtime config the JS driver needs to animate a pulse instance,
+* or null for non-pulse sizes.
+* @param size
+* @param theme
+* @param duration
+* @param hueRange
+* @param staticColors
+* @param id
+*/
+function getPulseDriverConfig(size, theme, duration, hueRange, staticColors, id) {
+	if (size !== "pulse-inner" && size !== "pulse-outside") return null;
+	const p = pulseParams(size, theme, duration);
+	return {
+		oscillators: pulseOscillatorDefs(id, p),
+		hue: staticColors ? null : {
+			prop: `--beam-hue-${id}`,
+			range: 360,
+			period: p.huePeriod,
+			continuous: true
+		}
+	};
+}
+/**
+*
+* @param id
+* @param fadeName
+* @param fadeDur
+*/
+function pulseWrapperAnimation(id, fadeName, fadeDur) {
+	return `  animation: ${fadeName}-${id} ${fadeDur}s ease forwards;`;
+}
+function flowOverlayCSS(options) {
+	const { id, borderRadius } = options;
+	return `
+[data-beam="${id}"] [data-beam-flow] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: ${borderRadius}px;
+  pointer-events: none;
+  z-index: 4;
+  overflow: hidden;
+  opacity: 0;
+  transform: translateZ(0);
+  will-change: opacity, filter;
+  animation: beam-flow-spread-${id} 0.62s linear forwards;
+}
+
+[data-beam="${id}"] [data-beam-flow-sheet] {
+  opacity: 0.92;
+  filter: blur(1.1px) drop-shadow(0 18px 34px rgba(255, 255, 255, 0.16));
+}
+
+[data-beam="${id}"] [data-beam-flow-front] {
+  opacity: 0.78;
+  stroke-linecap: round;
+  transform-box: fill-box;
+  transform-origin: center;
+  filter: blur(2.2px) drop-shadow(0 0 18px currentColor);
+  animation: beam-flow-front-${id} 0.62s linear forwards;
+}
+
+[data-beam="${id}"] [data-beam-flow-front="highlight"] {
+  opacity: 0.7;
+  filter: blur(1.2px);
+  animation-name: beam-flow-front-highlight-${id};
+}
+
+[data-beam="${id}"] [data-beam-flow-blob] {
+  fill: white;
+  opacity: 0.82;
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: beam-flow-blob-${id} 0.62s linear forwards;
+}
+
+[data-beam="${id}"] [data-beam-flow-blob="shore-a"] {
+  opacity: 0.44;
+  animation-name: beam-flow-shore-a-${id};
+}
+
+[data-beam="${id}"] [data-beam-flow-blob="shore-b"] {
+  opacity: 0.34;
+  animation-name: beam-flow-shore-b-${id};
+}
+
+[data-beam="${id}"] [data-beam-flow-specular] {
+  opacity: 0;
+  filter: blur(18px);
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: beam-flow-specular-${id} 0.62s linear forwards;
+}
+
+@keyframes beam-flow-spread-${id} {
+  0% {
+    opacity: calc(0.56 * var(--beam-strength, 1));
+    filter: blur(1.4px) saturate(1.18);
+  }
+  35% {
+    opacity: calc(0.5 * var(--beam-strength, 1));
+    filter: blur(2.3px) saturate(1.24);
+  }
+  70% {
+    opacity: calc(0.34 * var(--beam-strength, 1));
+    filter: blur(3.4px) saturate(1.2);
+  }
+  100% {
+    opacity: 0;
+    filter: blur(6px) saturate(1.05);
+  }
+}
+
+@keyframes beam-flow-blob-${id} {
+  0% { transform: scale(0.02); }
+  25% { transform: scale(0.34, 0.3) rotate(-2deg); }
+  50% { transform: scale(0.66, 0.58) rotate(-1deg); }
+  75% { transform: scale(0.94, 0.88) rotate(1deg); }
+  100% { transform: scale(1.18, 1.12); }
+}
+
+@keyframes beam-flow-shore-a-${id} {
+  0% { transform: translate(0, 0) scale(0.01); }
+  25% { transform: translate(5px, -3px) scale(0.38, 0.26) rotate(3deg); }
+  50% { transform: translate(8px, -4px) scale(0.72, 0.52) rotate(2deg); }
+  75% { transform: translate(4px, -2px) scale(1, 0.78) rotate(1deg); }
+  100% { transform: translate(0, 0) scale(1.24, 1); }
+}
+
+@keyframes beam-flow-shore-b-${id} {
+  0% { transform: translate(0, 0) scale(0.01); }
+  25% { transform: translate(-6px, 4px) scale(0.28, 0.42) rotate(-4deg); }
+  50% { transform: translate(-8px, 5px) scale(0.58, 0.78) rotate(-2deg); }
+  75% { transform: translate(-4px, 2px) scale(0.9, 1.04) rotate(-1deg); }
+  100% { transform: translate(0, 0) scale(1.16, 1.12); }
+}
+
+@keyframes beam-flow-specular-${id} {
+  0% { opacity: 0.28; transform: scale(0.2); }
+  35% { opacity: 0.2; transform: scale(0.86, 0.42) rotate(-3deg); }
+  70% { opacity: 0.1; transform: scale(1.45, 0.64) rotate(2deg); }
+  100% { opacity: 0; transform: scale(2.2, 0.86); }
+}
+
+@keyframes beam-flow-front-${id} {
+  0% { opacity: 0; transform: scale(0.03); stroke-opacity: 0.95; }
+  18% { opacity: 0.86; transform: scale(0.28, 0.22) rotate(-3deg); stroke-opacity: 0.92; }
+  46% { opacity: 0.82; transform: scale(0.6, 0.5) rotate(-1deg); stroke-opacity: 0.8; }
+  74% { opacity: 0.54; transform: scale(0.9, 0.84) rotate(1deg); stroke-opacity: 0.52; }
+  100% { opacity: 0; transform: scale(1.16, 1.08); stroke-opacity: 0; }
+}
+
+@keyframes beam-flow-front-highlight-${id} {
+  0% { opacity: 0; transform: scale(0.04); stroke-opacity: 0.86; }
+  22% { opacity: 0.78; transform: scale(0.3, 0.2) rotate(2deg); stroke-opacity: 0.8; }
+  52% { opacity: 0.62; transform: scale(0.65, 0.52) rotate(-2deg); stroke-opacity: 0.58; }
+  80% { opacity: 0.3; transform: scale(0.96, 0.82) rotate(1deg); stroke-opacity: 0.26; }
+  100% { opacity: 0; transform: scale(1.18, 1); stroke-opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-beam="${id}"] [data-beam-flow],
+  [data-beam="${id}"] [data-beam-flow-blob],
+  [data-beam="${id}"] [data-beam-flow-front],
+  [data-beam="${id}"] [data-beam-flow-specular] {
+    display: none;
+    animation: none !important;
+  }
+}
+`;
+}
+/**
+* Generate complete CSS for a BorderBeam instance
+* @param options
+*/
+function generateBeamCSS(options) {
+	const { size } = options;
+	if (size === "line") return generateLineVariantCSS(options);
+	if (size === "sm") return generateSmallVariantCSS(options);
+	if (size === "pulse-inner") return generatePulseInnerVariantCSS(options);
+	if (size === "pulse-outside") return generatePulseOuterVariantCSS(options);
+	return generateBorderVariantCSS(options);
+}
+/**
+*
+* @param options
+*/
+function generateSmallVariantCSS(options) {
+	const { id, borderRadius, borderWidth, duration, strokeOpacity, innerOpacity, bloomOpacity, innerShadow, colorVariant, staticColors, brightness, saturation, hueRange, theme } = options;
+	const innerRadius = Math.max(0, borderRadius - borderWidth);
+	const monoOpacityMultiplier = colorVariant === "mono" ? .5 : 1;
+	const finalStrokeOpacity = strokeOpacity * monoOpacityMultiplier;
+	const finalInnerOpacity = innerOpacity * monoOpacityMultiplier;
+	const finalBloomOpacity = bloomOpacity * monoOpacityMultiplier;
+	const hueShiftAnimation = staticColors ? "" : `animation: beam-hue-shift-${id} 12s ease-in-out infinite;`;
+	const hueShiftKeyframes = staticColors ? "" : `
+@keyframes beam-hue-shift-${id} {
+  0% { filter: hue-rotate(-${hueRange}deg) brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)}); }
+  50% { filter: hue-rotate(${hueRange}deg) brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)}); }
+  100% { filter: hue-rotate(-${hueRange}deg) brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)}); }
+}`;
+	const isDark = theme === "dark";
+	const whiteGradient = isDark ? `conic-gradient(
+        from var(--beam-angle-${id}),
+        transparent 0%, transparent 54%,
+        rgba(255, 255, 255, 0.1) 57%,
+        rgba(255, 255, 255, 0.3) 60%,
+        rgba(255, 255, 255, 0.6) 63%,
+        rgba(255, 255, 255, 0.75) 66%,
+        rgba(255, 255, 255, 0.6) 69%,
+        rgba(255, 255, 255, 0.3) 72%,
+        rgba(255, 255, 255, 0.1) 75%,
+        transparent 78%, transparent 100%
+      )` : `conic-gradient(
+        from var(--beam-angle-${id}),
+        transparent 0%, transparent 54%,
+        rgba(0, 0, 0, 0.08) 57%,
+        rgba(0, 0, 0, 0.2) 60%,
+        rgba(0, 0, 0, 0.4) 63%,
+        rgba(0, 0, 0, 0.55) 66%,
+        rgba(0, 0, 0, 0.4) 69%,
+        rgba(0, 0, 0, 0.2) 72%,
+        rgba(0, 0, 0, 0.08) 75%,
+        transparent 78%, transparent 100%
+      )`;
+	const colorGradients = getSmallColorGradients(colorVariant);
+	const innerGradients = getSmallInnerGradients(colorVariant);
+	const bloomGradient = isDark ? `conic-gradient(
+        from var(--beam-angle-${id}),
+        transparent 0%, transparent 58%,
+        rgba(255, 255, 255, 0.03) 62%,
+        rgba(255, 255, 255, 0.08) 65%,
+        rgba(255, 255, 255, 0.2) 67%,
+        rgba(255, 255, 255, 0.45) 69%,
+        rgba(255, 255, 255, 0.85) 70%,
+        rgba(255, 255, 255, 0.85) 70.5%,
+        rgba(255, 255, 255, 0.45) 71.5%,
+        rgba(255, 255, 255, 0.2) 73%,
+        rgba(255, 255, 255, 0.08) 75%,
+        rgba(255, 255, 255, 0.03) 78%,
+        transparent 82%
+      )` : `conic-gradient(
+        from var(--beam-angle-${id}),
+        transparent 0%, transparent 58%,
+        rgba(0, 0, 0, 0.02) 62%,
+        rgba(0, 0, 0, 0.08) 65%,
+        rgba(0, 0, 0, 0.2) 67%,
+        rgba(0, 0, 0, 0.4) 69%,
+        rgba(0, 0, 0, 0.6) 70%,
+        rgba(0, 0, 0, 0.6) 70.5%,
+        rgba(0, 0, 0, 0.4) 71.5%,
+        rgba(0, 0, 0, 0.2) 73%,
+        rgba(0, 0, 0, 0.08) 75%,
+        rgba(0, 0, 0, 0.02) 78%,
+        transparent 82%
+      )`;
+	const smallMask = `conic-gradient(
+    from var(--beam-angle-${id}),
+    transparent 0%, transparent 22%,
+    rgba(255, 255, 255, 0.12) 28%, rgba(255, 255, 255, 0.4) 36%,
+    white 46%, white 82%,
+    rgba(255, 255, 255, 0.4) 88%, rgba(255, 255, 255, 0.12) 94%,
+    transparent 97%, transparent 100%
+  )`;
+	return `
+@property --beam-angle-${id} {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: true;
+}
+
+@property --beam-opacity-${id} {
+  syntax: "<number>";
+  initial-value: 0;
+  inherits: true;
+}
+
+[data-beam="${id}"] {
+  position: relative;
+  border-radius: ${borderRadius}px;
+  overflow: hidden;
+}
+
+[data-beam="${id}"][data-active] {
+  animation:
+    beam-spin-${id} ${duration}s linear infinite,
+    beam-fade-in-${id} 0.6s ease forwards;
+}
+
+[data-beam="${id}"][data-fading] {
+  animation:
+    beam-spin-${id} ${duration}s linear infinite,
+    beam-fade-out-${id} 0.5s ease forwards;
+}
+
+[data-beam="${id}"][data-active]::after,
+[data-beam="${id}"][data-fading]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: ${innerRadius}px;
+  padding: ${borderWidth}px;
+  clip-path: inset(0 round ${borderRadius}px);
+  background: ${whiteGradient},${colorGradients};
+  -webkit-mask:
+    conic-gradient(
+      from var(--beam-angle-${id}),
+      transparent 0%, transparent 30%,
+      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
+      white 52%, white 80%,
+      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
+      transparent 95%, transparent 100%
+    ),
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: source-in, xor;
+  mask:
+    conic-gradient(
+      from var(--beam-angle-${id}),
+      transparent 0%, transparent 30%,
+      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
+      white 52%, white 80%,
+      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
+      transparent 95%, transparent 100%
+    ),
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: intersect, exclude;
+  pointer-events: none;
+  z-index: 2;
+  opacity: calc(var(--beam-opacity-${id}) * ${finalStrokeOpacity.toFixed(2)} * var(--beam-strength, 1));
+  ${hueShiftAnimation}
+}
+
+[data-beam="${id}"][data-active]::before,
+[data-beam="${id}"][data-fading]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: ${borderRadius}px;
+  clip-path: inset(0 round ${borderRadius}px);
+  background: ${innerGradients};
+  box-shadow: inset 0 0 5px 1px ${innerShadow};
+  -webkit-mask-image: ${smallMask};
+  -webkit-mask-composite: source-over;
+  mask-image: ${smallMask};
+  mask-composite: add;
+  pointer-events: none;
+  z-index: 1;
+  opacity: calc(var(--beam-opacity-${id}) * ${finalInnerOpacity.toFixed(2)} * var(--beam-strength, 1));
+  ${hueShiftAnimation}
+}
+
+[data-beam="${id}"] [data-beam-bloom] {
+  display: none;
+  position: absolute;
+  inset: 0;
+  border-radius: ${innerRadius}px;
+  clip-path: inset(0 round ${borderRadius}px);
+  background: ${bloomGradient};
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  padding: ${borderWidth}px;
+  filter: blur(8px) brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)});
+  pointer-events: none;
+  z-index: 3;
+  opacity: 0;
+}
+
+[data-beam="${id}"][data-active] [data-beam-bloom],
+[data-beam="${id}"][data-fading] [data-beam-bloom] {
+  display: block;
+  opacity: calc(var(--beam-opacity-${id}) * ${finalBloomOpacity.toFixed(2)} * var(--beam-strength, 1));
+}
+
+@keyframes beam-spin-${id} {
+  to { --beam-angle-${id}: 360deg; }
+}
+
+@keyframes beam-fade-in-${id} {
+  to { --beam-opacity-${id}: 1; }
+}
+
+@keyframes beam-fade-out-${id} {
+  from { --beam-opacity-${id}: 1; }
+  to { --beam-opacity-${id}: 0; }
+}
+${hueShiftKeyframes}
+${pausedAnimationsRule(id)}
+${flowOverlayCSS(options)}
+`;
+}
+/**
+*
+* @param options
+*/
+function generateBorderVariantCSS(options) {
+	const { id, borderRadius, borderWidth, duration, strokeOpacity, innerOpacity, bloomOpacity, innerShadow, colorVariant, staticColors, brightness, saturation, hueRange, theme } = options;
+	const innerRadius = Math.max(0, borderRadius - borderWidth);
+	const monoOpacityMultiplier = colorVariant === "mono" ? .5 : 1;
+	const finalStrokeOpacity = strokeOpacity * monoOpacityMultiplier;
+	const finalInnerOpacity = innerOpacity * monoOpacityMultiplier;
+	const finalBloomOpacity = bloomOpacity * monoOpacityMultiplier;
+	const hueShiftAnimation = staticColors ? "" : `animation: beam-hue-shift-${id} 12s ease-in-out infinite;`;
+	const hueShiftKeyframes = staticColors ? "" : `
+@keyframes beam-hue-shift-${id} {
+  0% { filter: hue-rotate(-${hueRange}deg) brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)}); }
+  50% { filter: hue-rotate(${hueRange}deg) brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)}); }
+  100% { filter: hue-rotate(-${hueRange}deg) brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)}); }
+}`;
+	const isDark = theme === "dark";
+	const whiteGradient = isDark ? `conic-gradient(
+        from var(--beam-angle-${id}),
+        transparent 0%, transparent 54%,
+        rgba(255, 255, 255, 0.1) 57%,
+        rgba(255, 255, 255, 0.3) 60%,
+        rgba(255, 255, 255, 0.6) 63%,
+        rgba(255, 255, 255, 0.75) 66%,
+        rgba(255, 255, 255, 0.6) 69%,
+        rgba(255, 255, 255, 0.3) 72%,
+        rgba(255, 255, 255, 0.1) 75%,
+        transparent 78%, transparent 100%
+      )` : `conic-gradient(
+        from var(--beam-angle-${id}),
+        transparent 0%, transparent 54%,
+        rgba(0, 0, 0, 0.08) 57%,
+        rgba(0, 0, 0, 0.2) 60%,
+        rgba(0, 0, 0, 0.4) 63%,
+        rgba(0, 0, 0, 0.55) 66%,
+        rgba(0, 0, 0, 0.4) 69%,
+        rgba(0, 0, 0, 0.2) 72%,
+        rgba(0, 0, 0, 0.08) 75%,
+        transparent 78%, transparent 100%
+      )`;
+	const colorGradients = getColorGradients(colorVariant);
+	const innerGradients = getInnerGradients(colorVariant);
+	const bloomGradient = isDark ? `conic-gradient(
+        from var(--beam-angle-${id}),
+        transparent 0%, transparent 58%,
+        rgba(255, 255, 255, 0.03) 62%,
+        rgba(255, 255, 255, 0.08) 65%,
+        rgba(255, 255, 255, 0.2) 67%,
+        rgba(255, 255, 255, 0.45) 69%,
+        rgba(255, 255, 255, 0.85) 70%,
+        rgba(255, 255, 255, 0.85) 70.5%,
+        rgba(255, 255, 255, 0.45) 71.5%,
+        rgba(255, 255, 255, 0.2) 73%,
+        rgba(255, 255, 255, 0.08) 75%,
+        rgba(255, 255, 255, 0.03) 78%,
+        transparent 82%
+      )` : `conic-gradient(
+        from var(--beam-angle-${id}),
+        transparent 0%, transparent 58%,
+        rgba(0, 0, 0, 0.02) 62%,
+        rgba(0, 0, 0, 0.08) 65%,
+        rgba(0, 0, 0, 0.2) 67%,
+        rgba(0, 0, 0, 0.4) 69%,
+        rgba(0, 0, 0, 0.6) 70%,
+        rgba(0, 0, 0, 0.6) 70.5%,
+        rgba(0, 0, 0, 0.4) 71.5%,
+        rgba(0, 0, 0, 0.2) 73%,
+        rgba(0, 0, 0, 0.08) 75%,
+        rgba(0, 0, 0, 0.02) 78%,
+        transparent 82%
+      )`;
+	return `
+@property --beam-angle-${id} {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: true;
+}
+
+@property --beam-opacity-${id} {
+  syntax: "<number>";
+  initial-value: 0;
+  inherits: true;
+}
+
+[data-beam="${id}"] {
+  position: relative;
+  border-radius: ${borderRadius}px;
+  overflow: hidden;
+}
+
+[data-beam="${id}"][data-active] {
+  animation:
+    beam-spin-${id} ${duration}s linear infinite,
+    beam-fade-in-${id} 0.6s ease forwards;
+}
+
+[data-beam="${id}"][data-fading] {
+  animation:
+    beam-spin-${id} ${duration}s linear infinite,
+    beam-fade-out-${id} 0.5s ease forwards;
+}
+
+[data-beam="${id}"][data-active]::after,
+[data-beam="${id}"][data-fading]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: ${innerRadius}px;
+  padding: ${borderWidth}px;
+  clip-path: inset(0 round ${borderRadius}px);
+  background: ${whiteGradient},${colorGradients};
+  -webkit-mask:
+    conic-gradient(
+      from var(--beam-angle-${id}),
+      transparent 0%, transparent 30%,
+      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
+      white 52%, white 80%,
+      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
+      transparent 95%, transparent 100%
+    ),
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: source-in, xor;
+  mask:
+    conic-gradient(
+      from var(--beam-angle-${id}),
+      transparent 0%, transparent 30%,
+      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
+      white 52%, white 80%,
+      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
+      transparent 95%, transparent 100%
+    ),
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: intersect, exclude;
+  pointer-events: none;
+  z-index: 2;
+  opacity: calc(var(--beam-opacity-${id}) * ${finalStrokeOpacity.toFixed(2)} * var(--beam-strength, 1));
+  ${hueShiftAnimation}
+}
+
+[data-beam="${id}"][data-active]::before,
+[data-beam="${id}"][data-fading]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: ${borderRadius}px;
+  background: ${innerGradients};
+  box-shadow: inset 0 0 9px 1px ${innerShadow};
+  -webkit-mask-image:
+    conic-gradient(
+      from var(--beam-angle-${id}),
+      transparent 0%, transparent 30%,
+      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
+      white 52%, white 80%,
+      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
+      transparent 95%, transparent 100%
+    ),
+    linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
+    linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
+  -webkit-mask-composite: source-in, source-over;
+  mask-image:
+    conic-gradient(
+      from var(--beam-angle-${id}),
+      transparent 0%, transparent 30%,
+      rgba(255, 255, 255, 0.1) 36%, rgba(255, 255, 255, 0.35) 44%,
+      white 52%, white 80%,
+      rgba(255, 255, 255, 0.35) 86%, rgba(255, 255, 255, 0.1) 92%,
+      transparent 95%, transparent 100%
+    ),
+    linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
+    linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
+  mask-composite: intersect, add;
+  pointer-events: none;
+  z-index: 1;
+  opacity: calc(var(--beam-opacity-${id}) * ${finalInnerOpacity.toFixed(2)} * var(--beam-strength, 1));
+  clip-path: inset(0 round ${borderRadius}px);
+  ${hueShiftAnimation}
+}
+
+[data-beam="${id}"] [data-beam-bloom] {
+  display: none;
+  position: absolute;
+  inset: 0;
+  border-radius: ${innerRadius}px;
+  clip-path: inset(0 round ${borderRadius}px);
+  background: ${bloomGradient};
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  padding: ${borderWidth}px;
+  filter: blur(8px) brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)});
+  pointer-events: none;
+  z-index: 3;
+  opacity: 0;
+}
+
+[data-beam="${id}"][data-active] [data-beam-bloom],
+[data-beam="${id}"][data-fading] [data-beam-bloom] {
+  display: block;
+  opacity: calc(var(--beam-opacity-${id}) * ${finalBloomOpacity.toFixed(2)} * var(--beam-strength, 1));
+}
+
+@keyframes beam-spin-${id} {
+  to { --beam-angle-${id}: 360deg; }
+}
+
+@keyframes beam-fade-in-${id} {
+  to { --beam-opacity-${id}: 1; }
+}
+
+@keyframes beam-fade-out-${id} {
+  from { --beam-opacity-${id}: 1; }
+  to { --beam-opacity-${id}: 0; }
+}
+${hueShiftKeyframes}
+${pausedAnimationsRule(id)}
+${flowOverlayCSS(options)}
+`;
+}
+/**
+* Pulse Inner — contained breathing glow
+* @param options
+*/
+function generatePulseInnerVariantCSS(options) {
+	const { id, borderRadius, borderWidth, duration, strokeOpacity, innerOpacity, bloomOpacity, colorVariant, staticColors, brightness, saturation, theme } = options;
+	const isDark = theme === "dark";
+	const monoMul = colorVariant === "mono" ? .5 : 1;
+	const sStroke = (strokeOpacity * monoMul).toFixed(2);
+	const sInner = (innerOpacity * monoMul).toFixed(2);
+	const sBloom = (bloomOpacity * monoMul).toFixed(2);
+	const { op } = pulseParams("pulse-inner", theme, duration);
+	const bloomBlur = 8;
+	const b = brightness.toFixed(2);
+	const s = saturation.toFixed(2);
+	const ringAnim = staticColors ? `filter: brightness(${b}) saturate(${s});` : `filter: hue-rotate(var(--beam-hue-${id})) brightness(${b}) saturate(${s});`;
+	const bloomAnim = staticColors ? `filter: blur(${bloomBlur}px) brightness(${b}) saturate(${s});` : `filter: blur(${bloomBlur}px) hue-rotate(var(--beam-hue-${id})) brightness(${b}) saturate(${s});`;
+	const ringGradients = pulseRingGradients(colorVariant, id);
+	const innerGradients = pulseInnerGradients(colorVariant, id, isDark);
+	const bloomGradients = pulseTableGradientsStatic(PULSE_INNER_BLOOM, colorVariant, 1 - op * .5);
+	return `
+${pulsePropertyRegs(id)}
+
+[data-beam="${id}"] {
+  position: relative;
+  border-radius: ${borderRadius}px;
+  overflow: hidden;
+  isolation: isolate;
+}
+
+[data-beam="${id}"][data-active] {
+${pulseWrapperAnimation(id, "beam-fade-in", .6)}
+}
+
+[data-beam="${id}"][data-fading] {
+${pulseWrapperAnimation(id, "beam-fade-out", .5)}
+}
+
+[data-beam="${id}"][data-active]::after,
+[data-beam="${id}"][data-fading]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: ${borderRadius}px;
+  padding: ${borderWidth}px;
+  clip-path: inset(0 round ${borderRadius}px);
+  background: ${ringGradients};
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+  z-index: 2;
+  will-change: opacity, filter;
+  opacity: calc(var(--beam-opacity-${id}) * ${sStroke} * var(--beam-strength, 1));
+  ${ringAnim}
+}
+
+[data-beam="${id}"][data-active]::before,
+[data-beam="${id}"][data-fading]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: ${borderRadius}px;
+  clip-path: inset(0 round ${borderRadius}px);
+  background: ${innerGradients};
+  -webkit-mask-image:
+    linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
+    linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
+  -webkit-mask-composite: source-over;
+  mask-image:
+    linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
+    linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
+  mask-composite: add;
+  pointer-events: none;
+  z-index: 1;
+  will-change: opacity, filter;
+  opacity: calc(var(--beam-opacity-${id}) * ${sInner} * var(--beam-strength, 1));
+  ${ringAnim}
+}
+
+[data-beam="${id}"] [data-beam-bloom] {
+  display: none;
+  position: absolute;
+  inset: 0;
+  border-radius: ${borderRadius}px;
+  clip-path: inset(0 round ${borderRadius}px);
+  background: ${bloomGradients};
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  padding: ${borderWidth}px;
+  pointer-events: none;
+  z-index: 3;
+  will-change: opacity;
+  opacity: 0;
+}
+
+[data-beam="${id}"][data-active] [data-beam-bloom],
+[data-beam="${id}"][data-fading] [data-beam-bloom] {
+  display: block;
+  opacity: calc(var(--beam-opacity-${id}) * ${sBloom} * var(--beam-strength, 1));
+  ${bloomAnim}
+}
+
+@keyframes beam-fade-in-${id} { to { --beam-opacity-${id}: 1; } }
+@keyframes beam-fade-out-${id} { from { --beam-opacity-${id}: 1; } to { --beam-opacity-${id}: 0; } }
+${pausedAnimationsRule(id)}
+${flowOverlayCSS(options)}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-beam="${id}"][data-active],
+  [data-beam="${id}"][data-fading],
+  [data-beam="${id}"][data-active]::after,
+  [data-beam="${id}"][data-fading]::after,
+  [data-beam="${id}"][data-active]::before,
+  [data-beam="${id}"][data-fading]::before,
+  [data-beam="${id}"][data-active] [data-beam-bloom],
+  [data-beam="${id}"][data-fading] [data-beam-bloom] {
+    animation: none !important;
+  }
+}
+`;
+}
+/**
+* Pulse Outside — outward-blooming breathing glow
+* @param options
+*/
+function generatePulseOuterVariantCSS(options) {
+	const { id, borderRadius, duration, strokeOpacity, innerOpacity, bloomOpacity, colorVariant, staticColors, brightness, saturation, theme, hairlineOpacity = 0 } = options;
+	const isDark = theme === "dark";
+	const monoMul = colorVariant === "mono" ? .5 : 1;
+	const sStroke = (strokeOpacity * monoMul).toFixed(2);
+	const sInner = (innerOpacity * monoMul).toFixed(2);
+	const sBloom = (bloomOpacity * monoMul).toFixed(2);
+	const hairRGB = isDark ? "70, 70, 70" : "0, 0, 0";
+	const hairOp = hairlineOpacity.toFixed(2);
+	const hairlineLine = `linear-gradient(rgba(${hairRGB}, ${hairOp}), rgba(${hairRGB}, ${hairOp}))`;
+	const { op } = pulseParams("pulse-outside", theme, duration);
+	const sw = .95;
+	const sh = .9;
+	const glowBlur = isDark ? 3 : 6;
+	const bloomBlur = isDark ? 22.5 : 15;
+	const b = brightness.toFixed(2);
+	const s = saturation.toFixed(2);
+	const strokeAnim = staticColors ? `filter: brightness(${b}) saturate(${s});` : `filter: hue-rotate(var(--beam-hue-${id})) brightness(${b}) saturate(${s});`;
+	const coreAnim = staticColors ? `filter: blur(${glowBlur}px) brightness(${b}) saturate(${s});` : `filter: blur(${glowBlur}px) hue-rotate(var(--beam-hue-${id})) brightness(${b}) saturate(${s});`;
+	const bloomAnim = staticColors ? `filter: blur(${bloomBlur}px) brightness(${b}) saturate(${s});` : `filter: blur(${bloomBlur}px) hue-rotate(var(--beam-hue-${id})) brightness(${b}) saturate(${s});`;
+	const strokeGradients = pulseTableGradients(PULSE_OUTER_CORE, colorVariant, id);
+	const coreGradients = pulseTableGradients(PULSE_OUTER_CORE, colorVariant, id);
+	const bloomGradients = pulseTableGradientsStatic(PULSE_OUTER_BLOOM, colorVariant, 1 - op * .5);
+	const strokeBackground = hairlineOpacity > 0 ? `${strokeGradients},\n    ${hairlineLine}` : strokeGradients;
+	return `
+${pulsePropertyRegs(id)}
+
+[data-beam="${id}"] {
+  position: relative;
+  border-radius: ${borderRadius}px;
+  overflow: visible;
+  isolation: isolate;
+}
+
+[data-beam="${id}"][data-active] {
+${pulseWrapperAnimation(id, "beam-fade-in", .6)}
+}
+
+[data-beam="${id}"][data-fading] {
+${pulseWrapperAnimation(id, "beam-fade-out", .5)}
+}
+${hairlineOpacity > 0 ? `
+[data-beam="${id}"]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: ${borderRadius}px;
+  padding: 1px;
+  clip-path: inset(0 round ${borderRadius}px);
+  background: ${hairlineLine};
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+  z-index: 2;
+}
+` : ""}
+[data-beam="${id}"][data-active]::after,
+[data-beam="${id}"][data-fading]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: ${borderRadius}px;
+  padding: 1px;
+  clip-path: inset(0 round ${borderRadius}px);
+  background: ${strokeBackground};
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+  z-index: 2;
+  will-change: opacity, filter;
+  opacity: calc(var(--beam-opacity-${id}) * ${sStroke} * var(--beam-strength, 1));
+  ${strokeAnim}
+}
+
+[data-beam="${id}"][data-active]::before,
+[data-beam="${id}"][data-fading]::before {
+  content: "";
+  position: absolute;
+  inset: -10px;
+  z-index: -1;
+  border-radius: ${borderRadius + 10}px;
+  background: ${coreGradients};
+  transform: scale(${sw}, ${sh});
+  pointer-events: none;
+  will-change: opacity, filter;
+  opacity: calc(var(--beam-opacity-${id}) * ${sInner} * var(--beam-strength, 1));
+  ${coreAnim}
+}
+
+[data-beam="${id}"] [data-beam-bloom] {
+  display: none;
+  position: absolute;
+  inset: -30px;
+  z-index: -1;
+  border-radius: ${borderRadius + 30}px;
+  background: ${bloomGradients};
+  transform: scale(${sw}, ${sh});
+  pointer-events: none;
+  will-change: transform;
+  opacity: 0;
+}
+
+[data-beam="${id}"][data-active] [data-beam-bloom],
+[data-beam="${id}"][data-fading] [data-beam-bloom] {
+  display: block;
+  opacity: calc(var(--beam-opacity-${id}) * ${sBloom} * var(--beam-strength, 1));
+  ${bloomAnim}
+}
+
+@keyframes beam-fade-in-${id} { to { --beam-opacity-${id}: 1; } }
+@keyframes beam-fade-out-${id} { from { --beam-opacity-${id}: 1; } to { --beam-opacity-${id}: 0; } }
+${pausedAnimationsRule(id)}
+${flowOverlayCSS(options)}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-beam="${id}"][data-active],
+  [data-beam="${id}"][data-fading],
+  [data-beam="${id}"][data-active]::after,
+  [data-beam="${id}"][data-fading]::after,
+  [data-beam="${id}"][data-active]::before,
+  [data-beam="${id}"][data-fading]::before,
+  [data-beam="${id}"][data-active] [data-beam-bloom],
+  [data-beam="${id}"][data-fading] [data-beam-bloom] {
+    animation: none !important;
+  }
+}
+`;
+}
+/**
+*
+* @param options
+*/
+function generateLineVariantCSS(options) {
+	const { id, borderRadius, borderWidth, duration, strokeOpacity, innerOpacity, bloomOpacity, innerShadow, colorVariant, staticColors, brightness, saturation, hueRange, theme } = options;
+	const innerRadius = Math.max(0, borderRadius - borderWidth);
+	const isDark = theme === "dark";
+	const finalStrokeOpacity = strokeOpacity;
+	const finalInnerOpacity = innerOpacity;
+	const finalBloomOpacity = bloomOpacity;
+	const hueShiftAnimation = staticColors ? "" : `animation: beam-hue-shift-${id} 12s ease-in-out infinite;`;
+	const hueShiftBloomAnimation = staticColors ? "" : `animation: beam-hue-shift-bloom-${id} 8s ease-in-out infinite;`;
+	const hueShiftKeyframes = staticColors ? "" : `
+@keyframes beam-hue-shift-${id} {
+  0% { filter: hue-rotate(-${hueRange}deg) brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)}); }
+  50% { filter: hue-rotate(${hueRange}deg) brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)}); }
+  100% { filter: hue-rotate(-${hueRange}deg) brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)}); }
+}
+
+@keyframes beam-hue-shift-bloom-${id} {
+  0% { filter: blur(8px) hue-rotate(-${hueRange + 10}deg) brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)}); }
+  50% { filter: blur(8px) hue-rotate(${hueRange + 10}deg) brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)}); }
+  100% { filter: blur(8px) hue-rotate(-${hueRange + 10}deg) brightness(${brightness.toFixed(2)}) saturate(${saturation.toFixed(2)}); }
+}`;
+	const whiteHighlight = isDark ? `radial-gradient(
+        ellipse calc(24px * var(--beam-density, 1) * var(--beam-w-${id})) calc(28px * var(--beam-density, 1) * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) calc(100% + 2px),
+        rgba(255, 255, 255, 0.38) 0%,
+        rgba(255, 255, 255, 0.12) 30%,
+        transparent 65%
+      )` : `radial-gradient(
+        ellipse calc(35px * var(--beam-density, 1) * var(--beam-w-${id})) calc(28px * var(--beam-density, 1) * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) calc(100% + 2px),
+        rgba(0, 0, 0, 0.6) 0%,
+        rgba(0, 0, 0, 0.25) 35%,
+        transparent 70%
+      )`;
+	const colorGradients = getLineColorGradients(colorVariant, isDark, id);
+	const innerGradients = getLineInnerGradients(colorVariant, id);
+	const bloomGradients = getLineBloomGradients(colorVariant, isDark, id);
+	const monoBloomBlur = colorVariant === "mono" ? "filter: blur(6px);" : "";
+	return `
+@property --beam-x-${id} {
+  syntax: "<number>";
+  initial-value: 0;
+  inherits: true;
+}
+
+@property --beam-w-${id} {
+  syntax: "<number>";
+  initial-value: 1;
+  inherits: true;
+}
+
+@property --beam-h-${id} {
+  syntax: "<number>";
+  initial-value: 1;
+  inherits: true;
+}
+
+@property --beam-spike-${id} {
+  syntax: "<number>";
+  initial-value: 1;
+  inherits: true;
+}
+
+@property --beam-spike2-${id} {
+  syntax: "<number>";
+  initial-value: 1;
+  inherits: true;
+}
+
+@property --beam-edge-${id} {
+  syntax: "<number>";
+  initial-value: 1;
+  inherits: true;
+}
+
+@property --beam-opacity-${id} {
+  syntax: "<number>";
+  initial-value: 0;
+  inherits: true;
+}
+
+[data-beam="${id}"] {
+  position: relative;
+  border-radius: ${borderRadius}px;
+  overflow: hidden;
+}
+
+[data-beam="${id}"][data-active] {
+  animation:
+    beam-travel-${id} ${duration}s linear infinite,
+    beam-edge-fade-${id} ${duration}s linear infinite,
+    beam-breathe-${id} ${(duration * 1.3).toFixed(1)}s ease-in-out infinite,
+    beam-spike-${id} ${(duration * 1.33).toFixed(1)}s ease-in-out infinite,
+    beam-spike2-${id} ${(duration * 1.7).toFixed(1)}s ease-in-out infinite,
+    beam-fade-in-${id} 0.6s ease forwards;
+}
+
+[data-beam="${id}"][data-fading] {
+  animation:
+    beam-travel-${id} ${duration}s linear infinite,
+    beam-edge-fade-${id} ${duration}s linear infinite,
+    beam-breathe-${id} ${(duration * 1.3).toFixed(1)}s ease-in-out infinite,
+    beam-spike-${id} ${(duration * 1.33).toFixed(1)}s ease-in-out infinite,
+    beam-spike2-${id} ${(duration * 1.7).toFixed(1)}s ease-in-out infinite,
+    beam-fade-out-${id} 0.5s ease forwards;
+}
+
+[data-beam="${id}"][data-active]::after,
+[data-beam="${id}"][data-fading]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: ${innerRadius}px;
+  padding: ${borderWidth}px;
+  clip-path: inset(0 round ${borderRadius}px);
+  background: ${whiteHighlight}, ${colorGradients};
+  -webkit-mask:
+    radial-gradient(
+      ellipse calc(78px * var(--beam-density, 1) * var(--beam-w-${id})) calc(60px * var(--beam-density, 1) * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) 100%,
+      white 0%, rgba(255, 255, 255, 0.5) 45%, transparent 100%
+    ),
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: source-in, xor;
+  mask:
+    radial-gradient(
+      ellipse calc(78px * var(--beam-density, 1) * var(--beam-w-${id})) calc(60px * var(--beam-density, 1) * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) 100%,
+      white 0%, rgba(255, 255, 255, 0.5) 45%, transparent 100%
+    ),
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: intersect, exclude;
+  pointer-events: none;
+  z-index: 2;
+  opacity: calc(var(--beam-opacity-${id}) * var(--beam-edge-${id}) * ${finalStrokeOpacity.toFixed(2)} * var(--beam-strength, 1));
+  ${hueShiftAnimation}
+}
+
+[data-beam="${id}"][data-active]::before,
+[data-beam="${id}"][data-fading]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: ${borderRadius}px;
+  background: ${innerGradients};
+  box-shadow: inset 0 0 9px 1px ${innerShadow};
+  -webkit-mask-image:
+    radial-gradient(
+      ellipse calc(78px * var(--beam-density, 1) * var(--beam-w-${id})) calc(60px * var(--beam-density, 1) * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) 100%,
+      white 0%, rgba(255, 255, 255, 0.5) 45%, transparent 100%
+    ),
+    linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
+    linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
+  -webkit-mask-composite: source-in, source-over;
+  mask-image:
+    radial-gradient(
+      ellipse calc(78px * var(--beam-density, 1) * var(--beam-w-${id})) calc(60px * var(--beam-density, 1) * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) 100%,
+      white 0%, rgba(255, 255, 255, 0.5) 45%, transparent 100%
+    ),
+    linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white),
+    linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white);
+  mask-composite: intersect, add;
+  pointer-events: none;
+  z-index: 1;
+  opacity: calc(var(--beam-opacity-${id}) * var(--beam-edge-${id}) * ${finalInnerOpacity.toFixed(2)} * var(--beam-strength, 1));
+  clip-path: inset(0 round ${borderRadius}px);
+  ${hueShiftAnimation}
+}
+
+[data-beam="${id}"] [data-beam-bloom] {
+  display: none;
+  position: absolute;
+  inset: 0;
+  border-radius: ${innerRadius}px;
+  clip-path: inset(0 round ${borderRadius}px);
+  padding: 0;
+  -webkit-mask: radial-gradient(
+    ellipse calc(84px * var(--beam-density, 1) * var(--beam-w-${id})) calc(110px * var(--beam-density, 1) * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) 100%,
+    white 0%, rgba(255, 255, 255, 0.5) 35%, transparent 100%
+  );
+  -webkit-mask-composite: source-over;
+  mask: radial-gradient(
+    ellipse calc(84px * var(--beam-density, 1) * var(--beam-w-${id})) calc(110px * var(--beam-density, 1) * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) 100%,
+    white 0%, rgba(255, 255, 255, 0.5) 35%, transparent 100%
+  );
+  mask-composite: add;
+  background: ${bloomGradients};
+  ${monoBloomBlur}
+  pointer-events: none;
+  z-index: 3;
+  opacity: 0;
+}
+
+[data-beam="${id}"][data-active] [data-beam-bloom],
+[data-beam="${id}"][data-fading] [data-beam-bloom] {
+  display: block;
+  opacity: calc(var(--beam-opacity-${id}) * var(--beam-edge-${id}) * ${finalBloomOpacity.toFixed(2)} * var(--beam-strength, 1));
+  ${hueShiftBloomAnimation}
+}
+
+@keyframes beam-travel-${id} {
+  0%   { --beam-x-${id}: 0.06;  --beam-w-${id}: 0.5; }
+  10%  { --beam-x-${id}: 0.15;  --beam-w-${id}: 0.8; }
+  20%  { --beam-x-${id}: 0.25;  --beam-w-${id}: 1.1; }
+  30%  { --beam-x-${id}: 0.35;  --beam-w-${id}: 1.3; }
+  40%  { --beam-x-${id}: 0.44;  --beam-w-${id}: 1.45; }
+  50%  { --beam-x-${id}: 0.5;   --beam-w-${id}: 1.5; }
+  60%  { --beam-x-${id}: 0.56;  --beam-w-${id}: 1.45; }
+  70%  { --beam-x-${id}: 0.65;  --beam-w-${id}: 1.3; }
+  80%  { --beam-x-${id}: 0.75;  --beam-w-${id}: 1.1; }
+  90%  { --beam-x-${id}: 0.85;  --beam-w-${id}: 0.8; }
+  100% { --beam-x-${id}: 0.94;  --beam-w-${id}: 0.5; }
+}
+
+@keyframes beam-edge-fade-${id} {
+  0%    { --beam-edge-${id}: 0; }
+  12.5% { --beam-edge-${id}: 0; }
+  32.5% { --beam-edge-${id}: 1; }
+  67.5% { --beam-edge-${id}: 1; }
+  87.5% { --beam-edge-${id}: 0; }
+  100%  { --beam-edge-${id}: 0; }
+}
+
+@keyframes beam-breathe-${id} {
+  0%, 100% { --beam-h-${id}: 0.8; }
+  25%      { --beam-h-${id}: 1.25; }
+  55%      { --beam-h-${id}: 0.85; }
+  80%      { --beam-h-${id}: 1.3; }
+}
+
+@keyframes beam-spike-${id} {
+  0%   { --beam-spike-${id}: 0.8; }
+  25%  { --beam-spike-${id}: 1.3; }
+  50%  { --beam-spike-${id}: 0.9; }
+  75%  { --beam-spike-${id}: 1.4; }
+  100% { --beam-spike-${id}: 0.8; }
+}
+
+@keyframes beam-spike2-${id} {
+  0%   { --beam-spike2-${id}: 1.2; }
+  25%  { --beam-spike2-${id}: 0.7; }
+  50%  { --beam-spike2-${id}: 1.4; }
+  75%  { --beam-spike2-${id}: 0.8; }
+  100% { --beam-spike2-${id}: 1.2; }
+}
+
+@keyframes beam-fade-in-${id} {
+  to { --beam-opacity-${id}: 1; }
+}
+
+@keyframes beam-fade-out-${id} {
+  from { --beam-opacity-${id}: 1; }
+  to { --beam-opacity-${id}: 0; }
+}
+${hueShiftKeyframes}
+${pausedAnimationsRule(id)}
+${flowOverlayCSS(options)}
+`;
+}
+//#endregion
+export { generateBeamCSS, getPulseDriverConfig, sizePresets, sizeThemePresets };