@heyramzi/ui 2.11.1 → 2.11.2

package/dist/effects/border-beam/presets.js

@@ -1,1736 +1,1719 @@
 export const sizePresets = {
-    sm: {
-        borderRadius: 18,
-        borderWidth: 1,
-        width: 70,
-        height: 36
-    },
-    md: {
-        borderRadius: 16,
-        borderWidth: 1
-    },
-    line: {
-        borderRadius: 16,
-        borderWidth: 1
-    }
+	sm: {
+		borderRadius: 18,
+		borderWidth: 1,
+		width: 70,
+		height: 36
+	},
+	md: {
+		borderRadius: 16,
+		borderWidth: 1
+	},
+	line: {
+		borderRadius: 16,
+		borderWidth: 1
+	}
 };
 export const sizeThemePresets = {
-    sm: {
-        dark: {
-            strokeOpacity: 0.48,
-            innerOpacity: 0.7,
-            bloomOpacity: 0.8,
-            innerShadow: "rgba(255, 255, 255, 0.3)",
-            saturation: 1.2
-        },
-        light: {
-            strokeOpacity: 0.33,
-            innerOpacity: 0.46,
-            bloomOpacity: 0.54,
-            innerShadow: "rgba(0, 0, 0, 0.14)",
-            saturation: 0.96
-        }
-    },
-    md: {
-        dark: {
-            strokeOpacity: 0.48,
-            innerOpacity: 0.7,
-            bloomOpacity: 0.8,
-            innerShadow: "rgba(255, 255, 255, 0.27)",
-            saturation: 1.2
-        },
-        light: {
-            strokeOpacity: 0.33,
-            innerOpacity: 0.46,
-            bloomOpacity: 0.54,
-            innerShadow: "rgba(0, 0, 0, 0.14)",
-            saturation: 0.96
-        }
-    },
-    line: {
-        dark: {
-            strokeOpacity: 0.72,
-            innerOpacity: 0.7,
-            bloomOpacity: 0.8,
-            innerShadow: "rgba(255, 255, 255, 0.1)",
-            saturation: 1.2
-        },
-        light: {
-            strokeOpacity: 0.72,
-            innerOpacity: 0.7,
-            bloomOpacity: 0.8,
-            innerShadow: "rgba(0, 0, 0, 0.14)",
-            saturation: 1.2
-        }
-    }
+	sm: {
+		dark: {
+			strokeOpacity: .48,
+			innerOpacity: .7,
+			bloomOpacity: .8,
+			innerShadow: "rgba(255, 255, 255, 0.3)",
+			saturation: 1.2
+		},
+		light: {
+			strokeOpacity: .33,
+			innerOpacity: .46,
+			bloomOpacity: .54,
+			innerShadow: "rgba(0, 0, 0, 0.14)",
+			saturation: .96
+		}
+	},
+	md: {
+		dark: {
+			strokeOpacity: .48,
+			innerOpacity: .7,
+			bloomOpacity: .8,
+			innerShadow: "rgba(255, 255, 255, 0.27)",
+			saturation: 1.2
+		},
+		light: {
+			strokeOpacity: .33,
+			innerOpacity: .46,
+			bloomOpacity: .54,
+			innerShadow: "rgba(0, 0, 0, 0.14)",
+			saturation: .96
+		}
+	},
+	line: {
+		dark: {
+			strokeOpacity: .72,
+			innerOpacity: .7,
+			bloomOpacity: .8,
+			innerShadow: "rgba(255, 255, 255, 0.1)",
+			saturation: 1.2
+		},
+		light: {
+			strokeOpacity: .72,
+			innerOpacity: .7,
+			bloomOpacity: .8,
+			innerShadow: "rgba(0, 0, 0, 0.14)",
+			saturation: 1.2
+		}
+	}
 };
 export const themeColors = {
-    dark: {
-        ...sizeThemePresets.md.dark
-    },
-    light: {
-        ...sizeThemePresets.md.light
-    }
+	dark: { ...sizeThemePresets.md.dark },
+	light: { ...sizeThemePresets.md.light }
 };
 const borderColors = {
-    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)"
-        }
-    }
+	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)"
+		}
+	}
 };
 const smGradients = {
-    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"
-            }
-        ]
-    }
+	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"
+			}
+		]
+	}
 };
+// WHY: parses #rgb, #rrggbb, rgb(...), rgba(...) into rgba(...) at the given
+// alpha. Used to recolor inner/spike gradients with caller-supplied colors
+// while preserving the alpha cadence the existing presets rely on.
 function toRgba(input, alpha) {
-    const hex = input.trim().match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
-    if (hex) {
-        const h = hex[1];
-        const r = parseInt(h.length === 3 ? h[0] + h[0] : h.slice(0, 2), 16);
-        const g = parseInt(h.length === 3 ? h[1] + h[1] : h.slice(2, 4), 16);
-        const b = parseInt(h.length === 3 ? h[2] + h[2] : h.slice(4, 6), 16);
-        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
-    }
-    const rgba = input.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/);
-    if (rgba) return `rgba(${rgba[1]}, ${rgba[2]}, ${rgba[3]}, ${alpha})`;
-    return input;
+	const hex = input.trim().match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+	if (hex) {
+		const h = hex[1];
+		const r = parseInt(h.length === 3 ? h[0] + h[0] : h.slice(0, 2), 16);
+		const g = parseInt(h.length === 3 ? h[1] + h[1] : h.slice(2, 4), 16);
+		const b = parseInt(h.length === 3 ? h[2] + h[2] : h.slice(4, 6), 16);
+		return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+	}
+	const rgba = input.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/);
+	if (rgba) return `rgba(${rgba[1]}, ${rgba[2]}, ${rgba[3]}, ${alpha})`;
+	return input;
 }
 function pickColor(customColors, presetColor, index) {
-    if (!customColors || customColors.length === 0) return presetColor;
-    return customColors[index % customColors.length];
+	if (!customColors || customColors.length === 0) return presetColor;
+	return customColors[index % customColors.length];
 }
 function pickColorAtAlpha(customColors, presetColor, index, alpha) {
-    if (!customColors || customColors.length === 0) {
-        return presetColor.replace("rgb(", "rgba(").replace(")", `, ${alpha})`);
-    }
-    return toRgba(customColors[index % customColors.length], alpha);
+	if (!customColors || customColors.length === 0) {
+		return presetColor.replace("rgb(", "rgba(").replace(")", `, ${alpha})`);
+	}
+	return toRgba(customColors[index % customColors.length], alpha);
 }
 export function smBorderGradient(variant, customColors) {
-    return smGradients[variant].border.map((s, i)=>`radial-gradient(ellipse ${s.size} at ${s.pos}, ${pickColor(customColors, s.color, i)}, transparent)`).join(",\n    ");
+	return smGradients[variant].border.map((s, i) => `radial-gradient(ellipse ${s.size} at ${s.pos}, ${pickColor(customColors, s.color, i)}, transparent)`).join(",\n    ");
 }
 export function smInnerGradient(variant, customColors) {
-    return smGradients[variant].inner.map((s, i)=>{
-        if (!customColors || customColors.length === 0) {
-            return `radial-gradient(ellipse ${s.size} at ${s.pos}, ${s.color}, transparent)`;
-        }
-        const alphaMatch = s.color.match(/[\d.]+\s*\)$/);
-        const alpha = alphaMatch ? parseFloat(alphaMatch[0]) : 0.4;
-        return `radial-gradient(ellipse ${s.size} at ${s.pos}, ${toRgba(customColors[i % customColors.length], alpha)}, transparent)`;
-    }).join(",\n    ");
+	return smGradients[variant].inner.map((s, i) => {
+		if (!customColors || customColors.length === 0) {
+			return `radial-gradient(ellipse ${s.size} at ${s.pos}, ${s.color}, transparent)`;
+		}
+		const alphaMatch = s.color.match(/[\d.]+\s*\)$/);
+		const alpha = alphaMatch ? parseFloat(alphaMatch[0]) : .4;
+		return `radial-gradient(ellipse ${s.size} at ${s.pos}, ${toRgba(customColors[i % customColors.length], alpha)}, transparent)`;
+	}).join(",\n    ");
 }
 export function mdBorderGradient(variant, customColors) {
-    return borderColors[variant].border.map((s, i)=>`radial-gradient(ellipse ${s.size} at ${s.pos}, ${pickColor(customColors, s.color, i)}, transparent)`).join(",\n    ");
+	return borderColors[variant].border.map((s, i) => `radial-gradient(ellipse ${s.size} at ${s.pos}, ${pickColor(customColors, s.color, i)}, transparent)`).join(",\n    ");
 }
 export function mdInnerGradient(variant, customColors) {
-    const cfg = borderColors[variant];
-    const alpha = variant === "mono" ? 0.225 : 0.45;
-    return cfg.border.map((s, i)=>{
-        const color = pickColorAtAlpha(customColors, s.color, i, alpha);
-        const size = s.size.split(" ").map((v)=>`${Math.round(parseInt(v) * 0.9)}px`).join(" ");
-        return `radial-gradient(ellipse ${size} at ${s.pos}, ${color}, transparent)`;
-    }).join(",\n    ");
+	const cfg = borderColors[variant];
+	const alpha = variant === "mono" ? .225 : .45;
+	return cfg.border.map((s, i) => {
+		const color = pickColorAtAlpha(customColors, s.color, i, alpha);
+		const size = s.size.split(" ").map((v) => `${Math.round(parseInt(v) * .9)}px`).join(" ");
+		return `radial-gradient(ellipse ${size} at ${s.pos}, ${color}, transparent)`;
+	}).join(",\n    ");
 }
 export function spikeColors(variant, dark, customColors) {
-    if (customColors && customColors.length > 0) {
-        const primary = customColors[0];
-        const secondary = customColors[customColors.length - 1] ?? customColors[0];
-        return {
-            primary,
-            secondary
-        };
-    }
-    const cfg = borderColors[variant];
-    return dark ? cfg.spike : cfg.spikeLt;
+	if (customColors && customColors.length > 0) {
+		const primary = customColors[0];
+		const secondary = customColors[customColors.length - 1] ?? customColors[0];
+		return {
+			primary,
+			secondary
+		};
+	}
+	const cfg = borderColors[variant];
+	return dark ? cfg.spike : cfg.spikeLt;
 }
 const lineBorderGradients = {
-    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
-            }
-        ]
-    }
+	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
+			}
+		]
+	}
 };
 export function lineBorderGradient(variant, dark, id, customColors) {
-    return lineBorderGradients[variant][dark ? "dark" : "light"].map((s, i)=>{
-        const ox = s.offsetX === 0 ? "" : s.offsetX > 0 ? ` + ${s.offsetX}px` : ` - ${Math.abs(s.offsetX)}px`;
-        const oy = s.offsetY === 0 ? "" : s.offsetY > 0 ? ` + ${s.offsetY}px` : ` - ${Math.abs(s.offsetY)}px`;
-        const color = pickColor(customColors, s.color, i);
-        return `radial-gradient(ellipse calc(${s.sizeW}px * var(--beam-w-${id})) calc(${s.sizeH}px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%${ox}) calc(100%${oy}), ${color}, transparent)`;
-    }).join(",\n       ");
+	return lineBorderGradients[variant][dark ? "dark" : "light"].map((s, i) => {
+		const ox = s.offsetX === 0 ? "" : s.offsetX > 0 ? ` + ${s.offsetX}px` : ` - ${Math.abs(s.offsetX)}px`;
+		const oy = s.offsetY === 0 ? "" : s.offsetY > 0 ? ` + ${s.offsetY}px` : ` - ${Math.abs(s.offsetY)}px`;
+		const color = pickColor(customColors, s.color, i);
+		return `radial-gradient(ellipse calc(${s.sizeW}px * var(--beam-w-${id})) calc(${s.sizeH}px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%${ox}) calc(100%${oy}), ${color}, transparent)`;
+	}).join(",\n       ");
 }
 const lineInnerGradients = {
-    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
-        }
-    ]
+	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
+		}
+	]
 };
 export function lineInnerGradient(variant, id, customColors) {
-    return lineInnerGradients[variant].map((s, i)=>{
-        const ox = s.offsetX === 0 ? "" : s.offsetX > 0 ? ` + ${s.offsetX}px` : ` - ${Math.abs(s.offsetX)}px`;
-        const oy = s.offsetY === 0 ? "" : ` - ${Math.abs(s.offsetY)}px`;
-        let color = s.color;
-        if (customColors && customColors.length > 0) {
-            const alphaMatch = s.color.match(/[\d.]+\s*\)$/);
-            const alpha = alphaMatch ? parseFloat(alphaMatch[0]) : 0.45;
-            color = toRgba(customColors[i % customColors.length], alpha);
-        }
-        return `radial-gradient(ellipse calc(${s.sizeW}px * var(--beam-w-${id})) calc(${s.sizeH}px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%${ox}) calc(100%${oy}), ${color}, transparent)`;
-    }).join(",\n    ");
+	return lineInnerGradients[variant].map((s, i) => {
+		const ox = s.offsetX === 0 ? "" : s.offsetX > 0 ? ` + ${s.offsetX}px` : ` - ${Math.abs(s.offsetX)}px`;
+		const oy = s.offsetY === 0 ? "" : ` - ${Math.abs(s.offsetY)}px`;
+		let color = s.color;
+		if (customColors && customColors.length > 0) {
+			const alphaMatch = s.color.match(/[\d.]+\s*\)$/);
+			const alpha = alphaMatch ? parseFloat(alphaMatch[0]) : .45;
+			color = toRgba(customColors[i % customColors.length], alpha);
+		}
+		return `radial-gradient(ellipse calc(${s.sizeW}px * var(--beam-w-${id})) calc(${s.sizeH}px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%${ox}) calc(100%${oy}), ${color}, transparent)`;
+	}).join(",\n    ");
 }
 const lineSpikeColors = {
-    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)"
-                }
-            ]
-        }
-    }
+	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)"
+			}
+		] }
+	}
 };
 function colorWithAlpha(color, alpha) {
-    const rgba = color.match(/^rgba\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*[\d.]+\s*\)$/);
-    if (rgba) return `rgba(${rgba[1]}, ${rgba[2]}, ${rgba[3]}, ${alpha})`;
-    const rgb = color.match(/^rgb\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/);
-    return rgb ? `rgba(${rgb[1]}, ${rgb[2]}, ${rgb[3]}, ${alpha})` : color;
+	const rgba = color.match(/^rgba\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*[\d.]+\s*\)$/);
+	if (rgba) return `rgba(${rgba[1]}, ${rgba[2]}, ${rgba[3]}, ${alpha})`;
+	const rgb = color.match(/^rgb\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/);
+	return rgb ? `rgba(${rgb[1]}, ${rgb[2]}, ${rgb[3]}, ${alpha})` : color;
 }
 function monoLineBloom(dark, id) {
-    return dark ? `radial-gradient(ellipse calc(18px * var(--beam-spike-${id})) calc(30px * var(--beam-h-${id})) at 8% calc(100% - 2px), rgba(200, 200, 200, 0.35), rgba(200, 200, 200, 0.12) 50%, transparent 100%),
+	return dark ? `radial-gradient(ellipse calc(18px * var(--beam-spike-${id})) calc(30px * var(--beam-h-${id})) at 8% calc(100% - 2px), rgba(200, 200, 200, 0.35), rgba(200, 200, 200, 0.12) 50%, transparent 100%),
        radial-gradient(ellipse calc(14px * var(--beam-spike2-${id})) calc(28px * var(--beam-h-${id})) at 22% calc(100% - 4px), rgba(170, 170, 170, 0.3), rgba(170, 170, 170, 0.1) 50%, transparent 100%),
        radial-gradient(ellipse calc(16px * var(--beam-spike-${id})) calc(32px * var(--beam-h-${id})) at 36% calc(100% - 3px), rgba(190, 190, 190, 0.35), rgba(190, 190, 190, 0.12) 50%, transparent 100%),
        radial-gradient(ellipse calc(20px * var(--beam-spike2-${id})) calc(25px * var(--beam-h-${id})) at 50% calc(100% - 2px), rgba(180, 180, 180, 0.25), rgba(180, 180, 180, 0.08) 55%, transparent 100%),
@@ -1748,26 +1731,28 @@ function monoLineBloom(dark, id) {
        radial-gradient(ellipse calc(50px * var(--beam-w-${id})) calc(32px * 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%)`;
 }
 export function lineBloomGradient(variant, dark, id, customColors) {
-    const spike = spikeColors(variant, dark, customColors);
-    const primary = spike.primary;
-    const secondary = spike.secondary;
-    const presetSpikes = lineSpikeColors[variant][dark ? "dark" : "light"].spikes;
-    const spikes = customColors && customColors.length > 0 ? presetSpikes.map((s, i)=>{
-        const c = customColors[i % customColors.length];
-        const a1 = parseFloat(s.color1.match(/[\d.]+\s*\)$/)?.[0] ?? "1");
-        const a2 = parseFloat(s.color2.match(/[\d.]+\s*\)$/)?.[0] ?? "1");
-        return {
-            color1: toRgba(c, a1),
-            color2: toRgba(c, a2)
-        };
-    }) : presetSpikes;
-    if (variant === "mono" && (!customColors || customColors.length === 0)) return monoLineBloom(dark, id);
-    if (dark) {
-        const c = primary;
-        const f = primary;
-        const i = secondary;
-        const n = colorWithAlpha(secondary, 0.49);
-        return `radial-gradient(ellipse calc(0.8px * var(--beam-spike-${id})) calc(92px * var(--beam-h-${id})) at 8% calc(100% - 2px), ${c}, ${f} 30%, transparent 88%),
+	const spike = spikeColors(variant, dark, customColors);
+	const primary = spike.primary;
+	const secondary = spike.secondary;
+	// WHY: when callers supply colors, recolor the 5 paired spike stops by cycling the palette and reusing the preset's alpha cadence so the shimmer rhythm is preserved.
+	// Mono is the tonal exception.
+	const presetSpikes = lineSpikeColors[variant][dark ? "dark" : "light"].spikes;
+	const spikes = customColors && customColors.length > 0 ? presetSpikes.map((s, i) => {
+		const c = customColors[i % customColors.length];
+		const a1 = parseFloat(s.color1.match(/[\d.]+\s*\)$/)?.[0] ?? "1");
+		const a2 = parseFloat(s.color2.match(/[\d.]+\s*\)$/)?.[0] ?? "1");
+		return {
+			color1: toRgba(c, a1),
+			color2: toRgba(c, a2)
+		};
+	}) : presetSpikes;
+	if (variant === "mono" && (!customColors || customColors.length === 0)) return monoLineBloom(dark, id);
+	if (dark) {
+		const c = primary;
+		const f = primary;
+		const i = secondary;
+		const n = colorWithAlpha(secondary, .49);
+		return `radial-gradient(ellipse calc(0.8px * var(--beam-spike-${id})) calc(92px * var(--beam-h-${id})) at 8% calc(100% - 2px), ${c}, ${f} 30%, transparent 88%),
        radial-gradient(ellipse calc(10px * var(--beam-spike2-${id})) calc(35px * var(--beam-h-${id})) at 22% calc(100% - 4px), ${i}, ${n} 50%, transparent 95%),
        radial-gradient(ellipse calc(2px * (2 - var(--beam-spike-${id}))) calc(72px * 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-spike2-${id})) calc(28px * var(--beam-h-${id})) at 50% calc(100% - 2px), ${spikes[1].color1}, ${spikes[1].color2} 55%, transparent 96%),
@@ -1776,12 +1761,12 @@ export function lineBloomGradient(variant, dark, id, customColors) {
        radial-gradient(ellipse calc(0.6px * (2 - var(--beam-spike-${id}))) calc(60px * 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-spike-${id})) calc(15px * var(--beam-spike2-${id})) at calc(var(--beam-x-${id}) * 100%) calc(100% + 1px), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.5) 50%, transparent 100%),
        radial-gradient(ellipse calc(42px * var(--beam-w-${id})) calc(40px * var(--beam-h-${id})) at calc(var(--beam-x-${id}) * 100%) 100%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.12) 25%, rgba(255, 255, 255, 0.03) 55%, transparent 80%)`;
-    }
-    const c = primary;
-    const f = colorWithAlpha(primary, 0.85);
-    const i = secondary;
-    const n = colorWithAlpha(secondary, 0.7);
-    return `radial-gradient(ellipse calc(0.8px * var(--beam-spike-${id})) calc(92px * var(--beam-h-${id})) at 8% calc(100% - 2px), ${c}, ${f} 30%, transparent 88%),
+	}
+	const c = primary;
+	const f = colorWithAlpha(primary, .85);
+	const i = secondary;
+	const n = colorWithAlpha(secondary, .7);
+	return `radial-gradient(ellipse calc(0.8px * var(--beam-spike-${id})) calc(92px * var(--beam-h-${id})) at 8% calc(100% - 2px), ${c}, ${f} 30%, transparent 88%),
        radial-gradient(ellipse calc(10px * var(--beam-spike2-${id})) calc(35px * var(--beam-h-${id})) at 22% calc(100% - 4px), ${i}, ${n} 50%, transparent 95%),
        radial-gradient(ellipse calc(2px * (2 - var(--beam-spike-${id}))) calc(72px * 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-spike2-${id})) calc(28px * var(--beam-h-${id})) at 50% calc(100% - 2px), ${spikes[1].color1}, ${spikes[1].color2} 55%, transparent 96%),