@zhang_jifan/fanui 2.1.0

package/dist/modules/fanui-themes.css

@@ -0,0 +1,2728 @@
+/* fanUI v2.1.0 · module: themes（独立产物，自带令牌） */
+:root {
+  --fanui-primary: #0e7490;
+  --fanui-primary-fg: #ffffff;
+  --fanui-primary-hover: rgb(4.9960784314%, 41.3960784314%, 51.3882352941%);
+  --fanui-primary-active: rgb(4.5568627451%, 37.7568627451%, 46.8705882353%);
+  --fanui-primary-vivid: #06b6d4;
+  --fanui-primary-vivid-2: #0891b2;
+  --fanui-primary-soft: #ecfeff;
+  --fanui-primary-soft-2: #cffafe;
+  --fanui-primary-border: #a5f3fc;
+  --fanui-primary-ink: #155e75;
+  --fanui-primary-ring: rgba(6, 182, 212, 0.3);
+  --fanui-primary-glow: rgba(6, 182, 212, 0.42);
+  --fanui-primary-grad-a: #06b6d4;
+  --fanui-primary-grad-b: #0891b2;
+  --fanui-primary-50: #ecfeff;
+  --fanui-primary-100: #cffafe;
+  --fanui-primary-200: #a5f3fc;
+  --fanui-primary-300: #67e8f9;
+  --fanui-primary-400: #22d3ee;
+  --fanui-primary-500: #06b6d4;
+  --fanui-primary-600: #0891b2;
+  --fanui-primary-700: #0e7490;
+  --fanui-primary-800: #155e75;
+  --fanui-primary-900: #164e63;
+  --fanui-primary-950: #083344;
+  --fanui-accent: #7c3aed;
+  --fanui-accent-fg: #ffffff;
+  --fanui-accent-hover: rgb(44.2509803922%, 20.6980392157%, 84.5764705882%);
+  --fanui-accent-active: rgb(40.3607843137%, 18.8784313725%, 77.1411764706%);
+  --fanui-accent-vivid: #8b5cf6;
+  --fanui-accent-vivid-2: #7c3aed;
+  --fanui-accent-soft: #f5f3ff;
+  --fanui-accent-soft-2: #ede9fe;
+  --fanui-accent-border: #ddd6fe;
+  --fanui-accent-ink: #5b21b6;
+  --fanui-accent-ring: rgba(139, 92, 246, 0.3);
+  --fanui-accent-glow: rgba(139, 92, 246, 0.42);
+  --fanui-accent-grad-a: #8b5cf6;
+  --fanui-accent-grad-b: #7c3aed;
+  --fanui-accent-50: #f5f3ff;
+  --fanui-accent-100: #ede9fe;
+  --fanui-accent-200: #ddd6fe;
+  --fanui-accent-300: #c4b5fd;
+  --fanui-accent-400: #a78bfa;
+  --fanui-accent-500: #8b5cf6;
+  --fanui-accent-600: #7c3aed;
+  --fanui-accent-700: #6d28d9;
+  --fanui-accent-800: #5b21b6;
+  --fanui-accent-900: #4c1d95;
+  --fanui-accent-950: #2e1065;
+  --fanui-brand-grad-a: var(--fanui-primary-vivid);
+  --fanui-brand-grad-b: var(--fanui-accent-vivid);
+  --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+  --fanui-brand-grad-soft: linear-gradient(
+    120deg,
+    rgba(6, 182, 212, 0.16),
+    rgba(139, 92, 246, 0.14)
+  );
+  --fanui-brand-aura-a: rgba(6, 182, 212, 0.38);
+  --fanui-brand-aura-b: rgba(139, 92, 246, 0.3);
+  --fanui-brand-name: "cyan";
+}
+
+[data-fanui-accent=cyan],
+.fanui-accent-cyan {
+  --fanui-primary: #0e7490;
+  --fanui-primary-fg: #ffffff;
+  --fanui-primary-hover: rgb(4.9960784314%, 41.3960784314%, 51.3882352941%);
+  --fanui-primary-active: rgb(4.5568627451%, 37.7568627451%, 46.8705882353%);
+  --fanui-primary-vivid: #06b6d4;
+  --fanui-primary-vivid-2: #0891b2;
+  --fanui-primary-soft: #ecfeff;
+  --fanui-primary-soft-2: #cffafe;
+  --fanui-primary-border: #a5f3fc;
+  --fanui-primary-ink: #155e75;
+  --fanui-primary-ring: rgba(6, 182, 212, 0.3);
+  --fanui-primary-glow: rgba(6, 182, 212, 0.42);
+  --fanui-primary-grad-a: #06b6d4;
+  --fanui-primary-grad-b: #0891b2;
+  --fanui-primary-50: #ecfeff;
+  --fanui-primary-100: #cffafe;
+  --fanui-primary-200: #a5f3fc;
+  --fanui-primary-300: #67e8f9;
+  --fanui-primary-400: #22d3ee;
+  --fanui-primary-500: #06b6d4;
+  --fanui-primary-600: #0891b2;
+  --fanui-primary-700: #0e7490;
+  --fanui-primary-800: #155e75;
+  --fanui-primary-900: #164e63;
+  --fanui-primary-950: #083344;
+  --fanui-accent: #7c3aed;
+  --fanui-accent-fg: #ffffff;
+  --fanui-accent-hover: rgb(44.2509803922%, 20.6980392157%, 84.5764705882%);
+  --fanui-accent-active: rgb(40.3607843137%, 18.8784313725%, 77.1411764706%);
+  --fanui-accent-vivid: #8b5cf6;
+  --fanui-accent-vivid-2: #7c3aed;
+  --fanui-accent-soft: #f5f3ff;
+  --fanui-accent-soft-2: #ede9fe;
+  --fanui-accent-border: #ddd6fe;
+  --fanui-accent-ink: #5b21b6;
+  --fanui-accent-ring: rgba(139, 92, 246, 0.3);
+  --fanui-accent-glow: rgba(139, 92, 246, 0.42);
+  --fanui-accent-grad-a: #8b5cf6;
+  --fanui-accent-grad-b: #7c3aed;
+  --fanui-accent-50: #f5f3ff;
+  --fanui-accent-100: #ede9fe;
+  --fanui-accent-200: #ddd6fe;
+  --fanui-accent-300: #c4b5fd;
+  --fanui-accent-400: #a78bfa;
+  --fanui-accent-500: #8b5cf6;
+  --fanui-accent-600: #7c3aed;
+  --fanui-accent-700: #6d28d9;
+  --fanui-accent-800: #5b21b6;
+  --fanui-accent-900: #4c1d95;
+  --fanui-accent-950: #2e1065;
+  --fanui-brand-grad-a: var(--fanui-primary-vivid);
+  --fanui-brand-grad-b: var(--fanui-accent-vivid);
+  --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+  --fanui-brand-grad-soft: linear-gradient(
+    120deg,
+    rgba(6, 182, 212, 0.16),
+    rgba(139, 92, 246, 0.14)
+  );
+  --fanui-brand-aura-a: rgba(6, 182, 212, 0.38);
+  --fanui-brand-aura-b: rgba(139, 92, 246, 0.3);
+  --fanui-brand-name: "cyan";
+}
+
+[data-fanui-accent=sky],
+.fanui-accent-sky {
+  --fanui-primary: #0369a1;
+  --fanui-primary-fg: #ffffff;
+  --fanui-primary-hover: rgb(1.0705882353%, 37.4705882353%, 57.4549019608%);
+  --fanui-primary-active: rgb(0.9764705882%, 34.1764705882%, 52.4039215686%);
+  --fanui-primary-vivid: #0ea5e9;
+  --fanui-primary-vivid-2: #0284c7;
+  --fanui-primary-soft: #f0f9ff;
+  --fanui-primary-soft-2: #e0f2fe;
+  --fanui-primary-border: #bae6fd;
+  --fanui-primary-ink: #075985;
+  --fanui-primary-ring: rgba(14, 165, 233, 0.3);
+  --fanui-primary-glow: rgba(14, 165, 233, 0.42);
+  --fanui-primary-grad-a: #0ea5e9;
+  --fanui-primary-grad-b: #0284c7;
+  --fanui-primary-50: #f0f9ff;
+  --fanui-primary-100: #e0f2fe;
+  --fanui-primary-200: #bae6fd;
+  --fanui-primary-300: #7dd3fc;
+  --fanui-primary-400: #38bdf8;
+  --fanui-primary-500: #0ea5e9;
+  --fanui-primary-600: #0284c7;
+  --fanui-primary-700: #0369a1;
+  --fanui-primary-800: #075985;
+  --fanui-primary-900: #0c4a6e;
+  --fanui-primary-950: #082f49;
+  --fanui-accent: #7c3aed;
+  --fanui-accent-fg: #ffffff;
+  --fanui-accent-hover: rgb(44.2509803922%, 20.6980392157%, 84.5764705882%);
+  --fanui-accent-active: rgb(40.3607843137%, 18.8784313725%, 77.1411764706%);
+  --fanui-accent-vivid: #8b5cf6;
+  --fanui-accent-vivid-2: #7c3aed;
+  --fanui-accent-soft: #f5f3ff;
+  --fanui-accent-soft-2: #ede9fe;
+  --fanui-accent-border: #ddd6fe;
+  --fanui-accent-ink: #5b21b6;
+  --fanui-accent-ring: rgba(139, 92, 246, 0.3);
+  --fanui-accent-glow: rgba(139, 92, 246, 0.42);
+  --fanui-accent-grad-a: #8b5cf6;
+  --fanui-accent-grad-b: #7c3aed;
+  --fanui-accent-50: #f5f3ff;
+  --fanui-accent-100: #ede9fe;
+  --fanui-accent-200: #ddd6fe;
+  --fanui-accent-300: #c4b5fd;
+  --fanui-accent-400: #a78bfa;
+  --fanui-accent-500: #8b5cf6;
+  --fanui-accent-600: #7c3aed;
+  --fanui-accent-700: #6d28d9;
+  --fanui-accent-800: #5b21b6;
+  --fanui-accent-900: #4c1d95;
+  --fanui-accent-950: #2e1065;
+  --fanui-brand-grad-a: var(--fanui-primary-vivid);
+  --fanui-brand-grad-b: var(--fanui-accent-vivid);
+  --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+  --fanui-brand-grad-soft: linear-gradient(
+    120deg,
+    rgba(14, 165, 233, 0.16),
+    rgba(139, 92, 246, 0.14)
+  );
+  --fanui-brand-aura-a: rgba(14, 165, 233, 0.38);
+  --fanui-brand-aura-b: rgba(139, 92, 246, 0.3);
+  --fanui-brand-name: "sky";
+}
+
+[data-fanui-accent=blue],
+.fanui-accent-blue {
+  --fanui-primary: #2563eb;
+  --fanui-primary-fg: #ffffff;
+  --fanui-primary-hover: rgb(13.2039215686%, 35.3294117647%, 83.862745098%);
+  --fanui-primary-active: rgb(12.0431372549%, 32.2235294118%, 76.4901960784%);
+  --fanui-primary-vivid: #3b82f6;
+  --fanui-primary-vivid-2: #2563eb;
+  --fanui-primary-soft: #eff6ff;
+  --fanui-primary-soft-2: #dbeafe;
+  --fanui-primary-border: #bfdbfe;
+  --fanui-primary-ink: #1e40af;
+  --fanui-primary-ring: rgba(59, 130, 246, 0.3);
+  --fanui-primary-glow: rgba(59, 130, 246, 0.42);
+  --fanui-primary-grad-a: #3b82f6;
+  --fanui-primary-grad-b: #2563eb;
+  --fanui-primary-50: #eff6ff;
+  --fanui-primary-100: #dbeafe;
+  --fanui-primary-200: #bfdbfe;
+  --fanui-primary-300: #93c5fd;
+  --fanui-primary-400: #60a5fa;
+  --fanui-primary-500: #3b82f6;
+  --fanui-primary-600: #2563eb;
+  --fanui-primary-700: #1d4ed8;
+  --fanui-primary-800: #1e40af;
+  --fanui-primary-900: #1e3a8a;
+  --fanui-primary-950: #172554;
+  --fanui-accent: #0e7490;
+  --fanui-accent-fg: #ffffff;
+  --fanui-accent-hover: rgb(4.9960784314%, 41.3960784314%, 51.3882352941%);
+  --fanui-accent-active: rgb(4.5568627451%, 37.7568627451%, 46.8705882353%);
+  --fanui-accent-vivid: #06b6d4;
+  --fanui-accent-vivid-2: #0891b2;
+  --fanui-accent-soft: #ecfeff;
+  --fanui-accent-soft-2: #cffafe;
+  --fanui-accent-border: #a5f3fc;
+  --fanui-accent-ink: #155e75;
+  --fanui-accent-ring: rgba(6, 182, 212, 0.3);
+  --fanui-accent-glow: rgba(6, 182, 212, 0.42);
+  --fanui-accent-grad-a: #06b6d4;
+  --fanui-accent-grad-b: #0891b2;
+  --fanui-accent-50: #ecfeff;
+  --fanui-accent-100: #cffafe;
+  --fanui-accent-200: #a5f3fc;
+  --fanui-accent-300: #67e8f9;
+  --fanui-accent-400: #22d3ee;
+  --fanui-accent-500: #06b6d4;
+  --fanui-accent-600: #0891b2;
+  --fanui-accent-700: #0e7490;
+  --fanui-accent-800: #155e75;
+  --fanui-accent-900: #164e63;
+  --fanui-accent-950: #083344;
+  --fanui-brand-grad-a: var(--fanui-primary-vivid);
+  --fanui-brand-grad-b: var(--fanui-accent-vivid);
+  --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+  --fanui-brand-grad-soft: linear-gradient(
+    120deg,
+    rgba(59, 130, 246, 0.16),
+    rgba(6, 182, 212, 0.14)
+  );
+  --fanui-brand-aura-a: rgba(59, 130, 246, 0.38);
+  --fanui-brand-aura-b: rgba(6, 182, 212, 0.3);
+  --fanui-brand-name: "blue";
+}
+
+[data-fanui-accent=indigo],
+.fanui-accent-indigo {
+  --fanui-primary: #4f46e5;
+  --fanui-primary-fg: #ffffff;
+  --fanui-primary-hover: rgb(28.1921568627%, 24.9803921569%, 81.7215686275%);
+  --fanui-primary-active: rgb(25.7137254902%, 22.7843137255%, 74.537254902%);
+  --fanui-primary-vivid: #6366f1;
+  --fanui-primary-vivid-2: #4f46e5;
+  --fanui-primary-soft: #eef2ff;
+  --fanui-primary-soft-2: #e0e7ff;
+  --fanui-primary-border: #c7d2fe;
+  --fanui-primary-ink: #3730a3;
+  --fanui-primary-ring: rgba(99, 102, 241, 0.3);
+  --fanui-primary-glow: rgba(99, 102, 241, 0.42);
+  --fanui-primary-grad-a: #6366f1;
+  --fanui-primary-grad-b: #4f46e5;
+  --fanui-primary-50: #eef2ff;
+  --fanui-primary-100: #e0e7ff;
+  --fanui-primary-200: #c7d2fe;
+  --fanui-primary-300: #a5b4fc;
+  --fanui-primary-400: #818cf8;
+  --fanui-primary-500: #6366f1;
+  --fanui-primary-600: #4f46e5;
+  --fanui-primary-700: #4338ca;
+  --fanui-primary-800: #3730a3;
+  --fanui-primary-900: #312e81;
+  --fanui-primary-950: #1e1b4b;
+  --fanui-accent: #0e7490;
+  --fanui-accent-fg: #ffffff;
+  --fanui-accent-hover: rgb(4.9960784314%, 41.3960784314%, 51.3882352941%);
+  --fanui-accent-active: rgb(4.5568627451%, 37.7568627451%, 46.8705882353%);
+  --fanui-accent-vivid: #06b6d4;
+  --fanui-accent-vivid-2: #0891b2;
+  --fanui-accent-soft: #ecfeff;
+  --fanui-accent-soft-2: #cffafe;
+  --fanui-accent-border: #a5f3fc;
+  --fanui-accent-ink: #155e75;
+  --fanui-accent-ring: rgba(6, 182, 212, 0.3);
+  --fanui-accent-glow: rgba(6, 182, 212, 0.42);
+  --fanui-accent-grad-a: #06b6d4;
+  --fanui-accent-grad-b: #0891b2;
+  --fanui-accent-50: #ecfeff;
+  --fanui-accent-100: #cffafe;
+  --fanui-accent-200: #a5f3fc;
+  --fanui-accent-300: #67e8f9;
+  --fanui-accent-400: #22d3ee;
+  --fanui-accent-500: #06b6d4;
+  --fanui-accent-600: #0891b2;
+  --fanui-accent-700: #0e7490;
+  --fanui-accent-800: #155e75;
+  --fanui-accent-900: #164e63;
+  --fanui-accent-950: #083344;
+  --fanui-brand-grad-a: var(--fanui-primary-vivid);
+  --fanui-brand-grad-b: var(--fanui-accent-vivid);
+  --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+  --fanui-brand-grad-soft: linear-gradient(
+    120deg,
+    rgba(99, 102, 241, 0.16),
+    rgba(6, 182, 212, 0.14)
+  );
+  --fanui-brand-aura-a: rgba(99, 102, 241, 0.38);
+  --fanui-brand-aura-b: rgba(6, 182, 212, 0.3);
+  --fanui-brand-name: "indigo";
+}
+
+[data-fanui-accent=violet],
+.fanui-accent-violet {
+  --fanui-primary: #7c3aed;
+  --fanui-primary-fg: #ffffff;
+  --fanui-primary-hover: rgb(44.2509803922%, 20.6980392157%, 84.5764705882%);
+  --fanui-primary-active: rgb(40.3607843137%, 18.8784313725%, 77.1411764706%);
+  --fanui-primary-vivid: #8b5cf6;
+  --fanui-primary-vivid-2: #7c3aed;
+  --fanui-primary-soft: #f5f3ff;
+  --fanui-primary-soft-2: #ede9fe;
+  --fanui-primary-border: #ddd6fe;
+  --fanui-primary-ink: #5b21b6;
+  --fanui-primary-ring: rgba(139, 92, 246, 0.3);
+  --fanui-primary-glow: rgba(139, 92, 246, 0.42);
+  --fanui-primary-grad-a: #8b5cf6;
+  --fanui-primary-grad-b: #7c3aed;
+  --fanui-primary-50: #f5f3ff;
+  --fanui-primary-100: #ede9fe;
+  --fanui-primary-200: #ddd6fe;
+  --fanui-primary-300: #c4b5fd;
+  --fanui-primary-400: #a78bfa;
+  --fanui-primary-500: #8b5cf6;
+  --fanui-primary-600: #7c3aed;
+  --fanui-primary-700: #6d28d9;
+  --fanui-primary-800: #5b21b6;
+  --fanui-primary-900: #4c1d95;
+  --fanui-primary-950: #2e1065;
+  --fanui-accent: #0e7490;
+  --fanui-accent-fg: #ffffff;
+  --fanui-accent-hover: rgb(4.9960784314%, 41.3960784314%, 51.3882352941%);
+  --fanui-accent-active: rgb(4.5568627451%, 37.7568627451%, 46.8705882353%);
+  --fanui-accent-vivid: #06b6d4;
+  --fanui-accent-vivid-2: #0891b2;
+  --fanui-accent-soft: #ecfeff;
+  --fanui-accent-soft-2: #cffafe;
+  --fanui-accent-border: #a5f3fc;
+  --fanui-accent-ink: #155e75;
+  --fanui-accent-ring: rgba(6, 182, 212, 0.3);
+  --fanui-accent-glow: rgba(6, 182, 212, 0.42);
+  --fanui-accent-grad-a: #06b6d4;
+  --fanui-accent-grad-b: #0891b2;
+  --fanui-accent-50: #ecfeff;
+  --fanui-accent-100: #cffafe;
+  --fanui-accent-200: #a5f3fc;
+  --fanui-accent-300: #67e8f9;
+  --fanui-accent-400: #22d3ee;
+  --fanui-accent-500: #06b6d4;
+  --fanui-accent-600: #0891b2;
+  --fanui-accent-700: #0e7490;
+  --fanui-accent-800: #155e75;
+  --fanui-accent-900: #164e63;
+  --fanui-accent-950: #083344;
+  --fanui-brand-grad-a: var(--fanui-primary-vivid);
+  --fanui-brand-grad-b: var(--fanui-accent-vivid);
+  --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+  --fanui-brand-grad-soft: linear-gradient(
+    120deg,
+    rgba(139, 92, 246, 0.16),
+    rgba(6, 182, 212, 0.14)
+  );
+  --fanui-brand-aura-a: rgba(139, 92, 246, 0.38);
+  --fanui-brand-aura-b: rgba(6, 182, 212, 0.3);
+  --fanui-brand-name: "violet";
+}
+
+[data-fanui-accent=purple],
+.fanui-accent-purple {
+  --fanui-primary: #9333ea;
+  --fanui-primary-fg: #ffffff;
+  --fanui-primary-hover: rgb(52.4588235294%, 18.2%, 83.5058823529%);
+  --fanui-primary-active: rgb(47.8470588235%, 16.6%, 76.1647058824%);
+  --fanui-primary-vivid: #a855f7;
+  --fanui-primary-vivid-2: #9333ea;
+  --fanui-primary-soft: #faf5ff;
+  --fanui-primary-soft-2: #f3e8ff;
+  --fanui-primary-border: #e9d5ff;
+  --fanui-primary-ink: #6b21a8;
+  --fanui-primary-ring: rgba(168, 85, 247, 0.3);
+  --fanui-primary-glow: rgba(168, 85, 247, 0.42);
+  --fanui-primary-grad-a: #a855f7;
+  --fanui-primary-grad-b: #9333ea;
+  --fanui-primary-50: #faf5ff;
+  --fanui-primary-100: #f3e8ff;
+  --fanui-primary-200: #e9d5ff;
+  --fanui-primary-300: #d8b4fe;
+  --fanui-primary-400: #c084fc;
+  --fanui-primary-500: #a855f7;
+  --fanui-primary-600: #9333ea;
+  --fanui-primary-700: #7e22ce;
+  --fanui-primary-800: #6b21a8;
+  --fanui-primary-900: #581c87;
+  --fanui-primary-950: #3b0764;
+  --fanui-accent: #db2777;
+  --fanui-accent-fg: #ffffff;
+  --fanui-accent-hover: rgb(78.1529411765%, 13.9176470588%, 42.4666666667%);
+  --fanui-accent-active: rgb(71.2823529412%, 12.6941176471%, 38.7333333333%);
+  --fanui-accent-vivid: #ec4899;
+  --fanui-accent-vivid-2: #db2777;
+  --fanui-accent-soft: #fdf2f8;
+  --fanui-accent-soft-2: #fce7f3;
+  --fanui-accent-border: #fbcfe8;
+  --fanui-accent-ink: #9d174d;
+  --fanui-accent-ring: rgba(236, 72, 153, 0.3);
+  --fanui-accent-glow: rgba(236, 72, 153, 0.42);
+  --fanui-accent-grad-a: #ec4899;
+  --fanui-accent-grad-b: #db2777;
+  --fanui-accent-50: #fdf2f8;
+  --fanui-accent-100: #fce7f3;
+  --fanui-accent-200: #fbcfe8;
+  --fanui-accent-300: #f9a8d4;
+  --fanui-accent-400: #f472b6;
+  --fanui-accent-500: #ec4899;
+  --fanui-accent-600: #db2777;
+  --fanui-accent-700: #be185d;
+  --fanui-accent-800: #9d174d;
+  --fanui-accent-900: #831843;
+  --fanui-accent-950: #500724;
+  --fanui-brand-grad-a: var(--fanui-primary-vivid);
+  --fanui-brand-grad-b: var(--fanui-accent-vivid);
+  --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+  --fanui-brand-grad-soft: linear-gradient(
+    120deg,
+    rgba(168, 85, 247, 0.16),
+    rgba(236, 72, 153, 0.14)
+  );
+  --fanui-brand-aura-a: rgba(168, 85, 247, 0.38);
+  --fanui-brand-aura-b: rgba(236, 72, 153, 0.3);
+  --fanui-brand-name: "purple";
+}
+
+[data-fanui-accent=pink],
+.fanui-accent-pink {
+  --fanui-primary: #db2777;
+  --fanui-primary-fg: #ffffff;
+  --fanui-primary-hover: rgb(78.1529411765%, 13.9176470588%, 42.4666666667%);
+  --fanui-primary-active: rgb(71.2823529412%, 12.6941176471%, 38.7333333333%);
+  --fanui-primary-vivid: #ec4899;
+  --fanui-primary-vivid-2: #db2777;
+  --fanui-primary-soft: #fdf2f8;
+  --fanui-primary-soft-2: #fce7f3;
+  --fanui-primary-border: #fbcfe8;
+  --fanui-primary-ink: #9d174d;
+  --fanui-primary-ring: rgba(236, 72, 153, 0.3);
+  --fanui-primary-glow: rgba(236, 72, 153, 0.42);
+  --fanui-primary-grad-a: #ec4899;
+  --fanui-primary-grad-b: #db2777;
+  --fanui-primary-50: #fdf2f8;
+  --fanui-primary-100: #fce7f3;
+  --fanui-primary-200: #fbcfe8;
+  --fanui-primary-300: #f9a8d4;
+  --fanui-primary-400: #f472b6;
+  --fanui-primary-500: #ec4899;
+  --fanui-primary-600: #db2777;
+  --fanui-primary-700: #be185d;
+  --fanui-primary-800: #9d174d;
+  --fanui-primary-900: #831843;
+  --fanui-primary-950: #500724;
+  --fanui-accent: #7c3aed;
+  --fanui-accent-fg: #ffffff;
+  --fanui-accent-hover: rgb(44.2509803922%, 20.6980392157%, 84.5764705882%);
+  --fanui-accent-active: rgb(40.3607843137%, 18.8784313725%, 77.1411764706%);
+  --fanui-accent-vivid: #8b5cf6;
+  --fanui-accent-vivid-2: #7c3aed;
+  --fanui-accent-soft: #f5f3ff;
+  --fanui-accent-soft-2: #ede9fe;
+  --fanui-accent-border: #ddd6fe;
+  --fanui-accent-ink: #5b21b6;
+  --fanui-accent-ring: rgba(139, 92, 246, 0.3);
+  --fanui-accent-glow: rgba(139, 92, 246, 0.42);
+  --fanui-accent-grad-a: #8b5cf6;
+  --fanui-accent-grad-b: #7c3aed;
+  --fanui-accent-50: #f5f3ff;
+  --fanui-accent-100: #ede9fe;
+  --fanui-accent-200: #ddd6fe;
+  --fanui-accent-300: #c4b5fd;
+  --fanui-accent-400: #a78bfa;
+  --fanui-accent-500: #8b5cf6;
+  --fanui-accent-600: #7c3aed;
+  --fanui-accent-700: #6d28d9;
+  --fanui-accent-800: #5b21b6;
+  --fanui-accent-900: #4c1d95;
+  --fanui-accent-950: #2e1065;
+  --fanui-brand-grad-a: var(--fanui-primary-vivid);
+  --fanui-brand-grad-b: var(--fanui-accent-vivid);
+  --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+  --fanui-brand-grad-soft: linear-gradient(
+    120deg,
+    rgba(236, 72, 153, 0.16),
+    rgba(139, 92, 246, 0.14)
+  );
+  --fanui-brand-aura-a: rgba(236, 72, 153, 0.38);
+  --fanui-brand-aura-b: rgba(139, 92, 246, 0.3);
+  --fanui-brand-name: "pink";
+}
+
+[data-fanui-accent=rose],
+.fanui-accent-rose {
+  --fanui-primary: #e11d48;
+  --fanui-primary-fg: #ffffff;
+  --fanui-primary-hover: rgb(80.2941176471%, 10.3490196078%, 25.6941176471%);
+  --fanui-primary-active: rgb(73.2352941176%, 9.4392156863%, 23.4352941176%);
+  --fanui-primary-vivid: #f43f5e;
+  --fanui-primary-vivid-2: #e11d48;
+  --fanui-primary-soft: #fff1f2;
+  --fanui-primary-soft-2: #ffe4e6;
+  --fanui-primary-border: #fecdd3;
+  --fanui-primary-ink: #9f1239;
+  --fanui-primary-ring: rgba(244, 63, 94, 0.3);
+  --fanui-primary-glow: rgba(244, 63, 94, 0.42);
+  --fanui-primary-grad-a: #f43f5e;
+  --fanui-primary-grad-b: #e11d48;
+  --fanui-primary-50: #fff1f2;
+  --fanui-primary-100: #ffe4e6;
+  --fanui-primary-200: #fecdd3;
+  --fanui-primary-300: #fda4af;
+  --fanui-primary-400: #fb7185;
+  --fanui-primary-500: #f43f5e;
+  --fanui-primary-600: #e11d48;
+  --fanui-primary-700: #be123c;
+  --fanui-primary-800: #9f1239;
+  --fanui-primary-900: #881337;
+  --fanui-primary-950: #4c0519;
+  --fanui-accent: #c2410c;
+  --fanui-accent-fg: #ffffff;
+  --fanui-accent-hover: rgb(69.231372549%, 23.1960784314%, 4.2823529412%);
+  --fanui-accent-active: rgb(63.1450980392%, 21.1568627451%, 3.9058823529%);
+  --fanui-accent-vivid: #f97316;
+  --fanui-accent-vivid-2: #ea580c;
+  --fanui-accent-soft: #fff7ed;
+  --fanui-accent-soft-2: #ffedd5;
+  --fanui-accent-border: #fed7aa;
+  --fanui-accent-ink: #9a3412;
+  --fanui-accent-ring: rgba(249, 115, 22, 0.3);
+  --fanui-accent-glow: rgba(249, 115, 22, 0.42);
+  --fanui-accent-grad-a: #f97316;
+  --fanui-accent-grad-b: #ea580c;
+  --fanui-accent-50: #fff7ed;
+  --fanui-accent-100: #ffedd5;
+  --fanui-accent-200: #fed7aa;
+  --fanui-accent-300: #fdba74;
+  --fanui-accent-400: #fb923c;
+  --fanui-accent-500: #f97316;
+  --fanui-accent-600: #ea580c;
+  --fanui-accent-700: #c2410c;
+  --fanui-accent-800: #9a3412;
+  --fanui-accent-900: #7c2d12;
+  --fanui-accent-950: #431407;
+  --fanui-brand-grad-a: var(--fanui-primary-vivid);
+  --fanui-brand-grad-b: var(--fanui-accent-vivid);
+  --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+  --fanui-brand-grad-soft: linear-gradient(
+    120deg,
+    rgba(244, 63, 94, 0.16),
+    rgba(249, 115, 22, 0.14)
+  );
+  --fanui-brand-aura-a: rgba(244, 63, 94, 0.38);
+  --fanui-brand-aura-b: rgba(249, 115, 22, 0.3);
+  --fanui-brand-name: "rose";
+}
+
+[data-fanui-accent=red],
+.fanui-accent-red {
+  --fanui-primary: #dc2626;
+  --fanui-primary-fg: #ffffff;
+  --fanui-primary-hover: rgb(78.5098039216%, 13.5607843137%, 13.5607843137%);
+  --fanui-primary-active: rgb(71.6078431373%, 12.368627451%, 12.368627451%);
+  --fanui-primary-vivid: #ef4444;
+  --fanui-primary-vivid-2: #dc2626;
+  --fanui-primary-soft: #fef2f2;
+  --fanui-primary-soft-2: #fee2e2;
+  --fanui-primary-border: #fecaca;
+  --fanui-primary-ink: #991b1b;
+  --fanui-primary-ring: rgba(239, 68, 68, 0.3);
+  --fanui-primary-glow: rgba(239, 68, 68, 0.42);
+  --fanui-primary-grad-a: #ef4444;
+  --fanui-primary-grad-b: #dc2626;
+  --fanui-primary-50: #fef2f2;
+  --fanui-primary-100: #fee2e2;
+  --fanui-primary-200: #fecaca;
+  --fanui-primary-300: #fca5a5;
+  --fanui-primary-400: #f87171;
+  --fanui-primary-500: #ef4444;
+  --fanui-primary-600: #dc2626;
+  --fanui-primary-700: #b91c1c;
+  --fanui-primary-800: #991b1b;
+  --fanui-primary-900: #7f1d1d;
+  --fanui-primary-950: #450a0a;
+  --fanui-accent: #e11d48;
+  --fanui-accent-fg: #ffffff;
+  --fanui-accent-hover: rgb(80.2941176471%, 10.3490196078%, 25.6941176471%);
+  --fanui-accent-active: rgb(73.2352941176%, 9.4392156863%, 23.4352941176%);
+  --fanui-accent-vivid: #f43f5e;
+  --fanui-accent-vivid-2: #e11d48;
+  --fanui-accent-soft: #fff1f2;
+  --fanui-accent-soft-2: #ffe4e6;
+  --fanui-accent-border: #fecdd3;
+  --fanui-accent-ink: #9f1239;
+  --fanui-accent-ring: rgba(244, 63, 94, 0.3);
+  --fanui-accent-glow: rgba(244, 63, 94, 0.42);
+  --fanui-accent-grad-a: #f43f5e;
+  --fanui-accent-grad-b: #e11d48;
+  --fanui-accent-50: #fff1f2;
+  --fanui-accent-100: #ffe4e6;
+  --fanui-accent-200: #fecdd3;
+  --fanui-accent-300: #fda4af;
+  --fanui-accent-400: #fb7185;
+  --fanui-accent-500: #f43f5e;
+  --fanui-accent-600: #e11d48;
+  --fanui-accent-700: #be123c;
+  --fanui-accent-800: #9f1239;
+  --fanui-accent-900: #881337;
+  --fanui-accent-950: #4c0519;
+  --fanui-brand-grad-a: var(--fanui-primary-vivid);
+  --fanui-brand-grad-b: var(--fanui-accent-vivid);
+  --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+  --fanui-brand-grad-soft: linear-gradient(
+    120deg,
+    rgba(239, 68, 68, 0.16),
+    rgba(244, 63, 94, 0.14)
+  );
+  --fanui-brand-aura-a: rgba(239, 68, 68, 0.38);
+  --fanui-brand-aura-b: rgba(244, 63, 94, 0.3);
+  --fanui-brand-name: "red";
+}
+
+[data-fanui-accent=orange],
+.fanui-accent-orange {
+  --fanui-primary: #c2410c;
+  --fanui-primary-fg: #ffffff;
+  --fanui-primary-hover: rgb(69.231372549%, 23.1960784314%, 4.2823529412%);
+  --fanui-primary-active: rgb(63.1450980392%, 21.1568627451%, 3.9058823529%);
+  --fanui-primary-vivid: #f97316;
+  --fanui-primary-vivid-2: #ea580c;
+  --fanui-primary-soft: #fff7ed;
+  --fanui-primary-soft-2: #ffedd5;
+  --fanui-primary-border: #fed7aa;
+  --fanui-primary-ink: #9a3412;
+  --fanui-primary-ring: rgba(249, 115, 22, 0.3);
+  --fanui-primary-glow: rgba(249, 115, 22, 0.42);
+  --fanui-primary-grad-a: #f97316;
+  --fanui-primary-grad-b: #ea580c;
+  --fanui-primary-50: #fff7ed;
+  --fanui-primary-100: #ffedd5;
+  --fanui-primary-200: #fed7aa;
+  --fanui-primary-300: #fdba74;
+  --fanui-primary-400: #fb923c;
+  --fanui-primary-500: #f97316;
+  --fanui-primary-600: #ea580c;
+  --fanui-primary-700: #c2410c;
+  --fanui-primary-800: #9a3412;
+  --fanui-primary-900: #7c2d12;
+  --fanui-primary-950: #431407;
+  --fanui-accent: #db2777;
+  --fanui-accent-fg: #ffffff;
+  --fanui-accent-hover: rgb(78.1529411765%, 13.9176470588%, 42.4666666667%);
+  --fanui-accent-active: rgb(71.2823529412%, 12.6941176471%, 38.7333333333%);
+  --fanui-accent-vivid: #ec4899;
+  --fanui-accent-vivid-2: #db2777;
+  --fanui-accent-soft: #fdf2f8;
+  --fanui-accent-soft-2: #fce7f3;
+  --fanui-accent-border: #fbcfe8;
+  --fanui-accent-ink: #9d174d;
+  --fanui-accent-ring: rgba(236, 72, 153, 0.3);
+  --fanui-accent-glow: rgba(236, 72, 153, 0.42);
+  --fanui-accent-grad-a: #ec4899;
+  --fanui-accent-grad-b: #db2777;
+  --fanui-accent-50: #fdf2f8;
+  --fanui-accent-100: #fce7f3;
+  --fanui-accent-200: #fbcfe8;
+  --fanui-accent-300: #f9a8d4;
+  --fanui-accent-400: #f472b6;
+  --fanui-accent-500: #ec4899;
+  --fanui-accent-600: #db2777;
+  --fanui-accent-700: #be185d;
+  --fanui-accent-800: #9d174d;
+  --fanui-accent-900: #831843;
+  --fanui-accent-950: #500724;
+  --fanui-brand-grad-a: var(--fanui-primary-vivid);
+  --fanui-brand-grad-b: var(--fanui-accent-vivid);
+  --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+  --fanui-brand-grad-soft: linear-gradient(
+    120deg,
+    rgba(249, 115, 22, 0.16),
+    rgba(236, 72, 153, 0.14)
+  );
+  --fanui-brand-aura-a: rgba(249, 115, 22, 0.38);
+  --fanui-brand-aura-b: rgba(236, 72, 153, 0.3);
+  --fanui-brand-name: "orange";
+}
+
+[data-fanui-accent=emerald],
+.fanui-accent-emerald {
+  --fanui-primary: #047857;
+  --fanui-primary-fg: #ffffff;
+  --fanui-primary-hover: rgb(1.4274509804%, 42.8235294118%, 31.0470588235%);
+  --fanui-primary-active: rgb(1.3019607843%, 39.0588235294%, 28.3176470588%);
+  --fanui-primary-vivid: #10b981;
+  --fanui-primary-vivid-2: #059669;
+  --fanui-primary-soft: #ecfdf5;
+  --fanui-primary-soft-2: #d1fae5;
+  --fanui-primary-border: #a7f3d0;
+  --fanui-primary-ink: #065f46;
+  --fanui-primary-ring: rgba(16, 185, 129, 0.3);
+  --fanui-primary-glow: rgba(16, 185, 129, 0.42);
+  --fanui-primary-grad-a: #10b981;
+  --fanui-primary-grad-b: #059669;
+  --fanui-primary-50: #ecfdf5;
+  --fanui-primary-100: #d1fae5;
+  --fanui-primary-200: #a7f3d0;
+  --fanui-primary-300: #6ee7b7;
+  --fanui-primary-400: #34d399;
+  --fanui-primary-500: #10b981;
+  --fanui-primary-600: #059669;
+  --fanui-primary-700: #047857;
+  --fanui-primary-800: #065f46;
+  --fanui-primary-900: #064e3b;
+  --fanui-primary-950: #022c22;
+  --fanui-accent: #0e7490;
+  --fanui-accent-fg: #ffffff;
+  --fanui-accent-hover: rgb(4.9960784314%, 41.3960784314%, 51.3882352941%);
+  --fanui-accent-active: rgb(4.5568627451%, 37.7568627451%, 46.8705882353%);
+  --fanui-accent-vivid: #06b6d4;
+  --fanui-accent-vivid-2: #0891b2;
+  --fanui-accent-soft: #ecfeff;
+  --fanui-accent-soft-2: #cffafe;
+  --fanui-accent-border: #a5f3fc;
+  --fanui-accent-ink: #155e75;
+  --fanui-accent-ring: rgba(6, 182, 212, 0.3);
+  --fanui-accent-glow: rgba(6, 182, 212, 0.42);
+  --fanui-accent-grad-a: #06b6d4;
+  --fanui-accent-grad-b: #0891b2;
+  --fanui-accent-50: #ecfeff;
+  --fanui-accent-100: #cffafe;
+  --fanui-accent-200: #a5f3fc;
+  --fanui-accent-300: #67e8f9;
+  --fanui-accent-400: #22d3ee;
+  --fanui-accent-500: #06b6d4;
+  --fanui-accent-600: #0891b2;
+  --fanui-accent-700: #0e7490;
+  --fanui-accent-800: #155e75;
+  --fanui-accent-900: #164e63;
+  --fanui-accent-950: #083344;
+  --fanui-brand-grad-a: var(--fanui-primary-vivid);
+  --fanui-brand-grad-b: var(--fanui-accent-vivid);
+  --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+  --fanui-brand-grad-soft: linear-gradient(
+    120deg,
+    rgba(16, 185, 129, 0.16),
+    rgba(6, 182, 212, 0.14)
+  );
+  --fanui-brand-aura-a: rgba(16, 185, 129, 0.38);
+  --fanui-brand-aura-b: rgba(6, 182, 212, 0.3);
+  --fanui-brand-name: "emerald";
+}
+
+[data-fanui-accent=teal],
+.fanui-accent-teal {
+  --fanui-primary: #0f766e;
+  --fanui-primary-fg: #ffffff;
+  --fanui-primary-hover: rgb(5.3529411765%, 42.1098039216%, 39.2549019608%);
+  --fanui-primary-active: rgb(4.8823529412%, 38.4078431373%, 35.8039215686%);
+  --fanui-primary-vivid: #14b8a6;
+  --fanui-primary-vivid-2: #0d9488;
+  --fanui-primary-soft: #f0fdfa;
+  --fanui-primary-soft-2: #ccfbf1;
+  --fanui-primary-border: #99f6e4;
+  --fanui-primary-ink: #115e59;
+  --fanui-primary-ring: rgba(20, 184, 166, 0.3);
+  --fanui-primary-glow: rgba(20, 184, 166, 0.42);
+  --fanui-primary-grad-a: #14b8a6;
+  --fanui-primary-grad-b: #0d9488;
+  --fanui-primary-50: #f0fdfa;
+  --fanui-primary-100: #ccfbf1;
+  --fanui-primary-200: #99f6e4;
+  --fanui-primary-300: #5eead4;
+  --fanui-primary-400: #2dd4bf;
+  --fanui-primary-500: #14b8a6;
+  --fanui-primary-600: #0d9488;
+  --fanui-primary-700: #0f766e;
+  --fanui-primary-800: #115e59;
+  --fanui-primary-900: #134e4a;
+  --fanui-primary-950: #042f2e;
+  --fanui-accent: #047857;
+  --fanui-accent-fg: #ffffff;
+  --fanui-accent-hover: rgb(1.4274509804%, 42.8235294118%, 31.0470588235%);
+  --fanui-accent-active: rgb(1.3019607843%, 39.0588235294%, 28.3176470588%);
+  --fanui-accent-vivid: #10b981;
+  --fanui-accent-vivid-2: #059669;
+  --fanui-accent-soft: #ecfdf5;
+  --fanui-accent-soft-2: #d1fae5;
+  --fanui-accent-border: #a7f3d0;
+  --fanui-accent-ink: #065f46;
+  --fanui-accent-ring: rgba(16, 185, 129, 0.3);
+  --fanui-accent-glow: rgba(16, 185, 129, 0.42);
+  --fanui-accent-grad-a: #10b981;
+  --fanui-accent-grad-b: #059669;
+  --fanui-accent-50: #ecfdf5;
+  --fanui-accent-100: #d1fae5;
+  --fanui-accent-200: #a7f3d0;
+  --fanui-accent-300: #6ee7b7;
+  --fanui-accent-400: #34d399;
+  --fanui-accent-500: #10b981;
+  --fanui-accent-600: #059669;
+  --fanui-accent-700: #047857;
+  --fanui-accent-800: #065f46;
+  --fanui-accent-900: #064e3b;
+  --fanui-accent-950: #022c22;
+  --fanui-brand-grad-a: var(--fanui-primary-vivid);
+  --fanui-brand-grad-b: var(--fanui-accent-vivid);
+  --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+  --fanui-brand-grad-soft: linear-gradient(
+    120deg,
+    rgba(20, 184, 166, 0.16),
+    rgba(16, 185, 129, 0.14)
+  );
+  --fanui-brand-aura-a: rgba(20, 184, 166, 0.38);
+  --fanui-brand-aura-b: rgba(16, 185, 129, 0.3);
+  --fanui-brand-name: "teal";
+}
+
+[data-fanui-theme=dark],
+:root[data-fanui-theme=dark] {
+  --fanui-primary: #06b6d4;
+  --fanui-primary-fg: #0b1220;
+  --fanui-primary-hover: rgb(11.1411764706%, 73.9490196078%, 84.6549019608%);
+  --fanui-primary-active: rgb(18.9529411765%, 76.2392156863%, 86.0039215686%);
+  --fanui-primary-vivid: #22d3ee;
+  --fanui-primary-vivid-2: #67e8f9;
+  --fanui-primary-soft: rgba(34, 211, 238, 0.16);
+  --fanui-primary-soft-2: rgba(34, 211, 238, 0.26);
+  --fanui-primary-border: rgba(34, 211, 238, 0.38);
+  --fanui-primary-ink: #a5f3fc;
+  --fanui-primary-ring: rgba(34, 211, 238, 0.3);
+  --fanui-primary-glow: rgba(34, 211, 238, 0.42);
+  --fanui-primary-grad-a: #22d3ee;
+  --fanui-primary-grad-b: #67e8f9;
+  --fanui-primary-50: #ecfeff;
+  --fanui-primary-100: #cffafe;
+  --fanui-primary-200: #a5f3fc;
+  --fanui-primary-300: #67e8f9;
+  --fanui-primary-400: #22d3ee;
+  --fanui-primary-500: #06b6d4;
+  --fanui-primary-600: #0891b2;
+  --fanui-primary-700: #0e7490;
+  --fanui-primary-800: #155e75;
+  --fanui-primary-900: #164e63;
+  --fanui-primary-950: #083344;
+  --fanui-accent: #a78bfa;
+  --fanui-accent-fg: #0b1220;
+  --fanui-accent-hover: rgb(68.5960784314%, 58.6039215686%, 98.2156862745%);
+  --fanui-accent-active: rgb(71.3568627451%, 62.2431372549%, 98.3725490196%);
+  --fanui-accent-vivid: #a78bfa;
+  --fanui-accent-vivid-2: #c4b5fd;
+  --fanui-accent-soft: rgba(167, 139, 250, 0.16);
+  --fanui-accent-soft-2: rgba(167, 139, 250, 0.26);
+  --fanui-accent-border: rgba(167, 139, 250, 0.38);
+  --fanui-accent-ink: #ddd6fe;
+  --fanui-accent-ring: rgba(167, 139, 250, 0.3);
+  --fanui-accent-glow: rgba(167, 139, 250, 0.42);
+  --fanui-accent-grad-a: #a78bfa;
+  --fanui-accent-grad-b: #c4b5fd;
+  --fanui-accent-50: #f5f3ff;
+  --fanui-accent-100: #ede9fe;
+  --fanui-accent-200: #ddd6fe;
+  --fanui-accent-300: #c4b5fd;
+  --fanui-accent-400: #a78bfa;
+  --fanui-accent-500: #8b5cf6;
+  --fanui-accent-600: #7c3aed;
+  --fanui-accent-700: #6d28d9;
+  --fanui-accent-800: #5b21b6;
+  --fanui-accent-900: #4c1d95;
+  --fanui-accent-950: #2e1065;
+  --fanui-brand-grad-a: var(--fanui-primary-vivid);
+  --fanui-brand-grad-b: var(--fanui-accent-vivid);
+  --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+  --fanui-brand-grad-soft: linear-gradient(
+    120deg,
+    rgba(34, 211, 238, 0.16),
+    rgba(167, 139, 250, 0.14)
+  );
+  --fanui-brand-aura-a: rgba(34, 211, 238, 0.38);
+  --fanui-brand-aura-b: rgba(167, 139, 250, 0.3);
+  --fanui-brand-name: "cyan";
+}
+
+[data-fanui-theme=dark][data-fanui-accent=cyan],
+[data-fanui-theme=dark] [data-fanui-accent=cyan],
+[data-fanui-theme=dark] .fanui-accent-cyan {
+  --fanui-primary: #06b6d4;
+  --fanui-primary-fg: #0b1220;
+  --fanui-primary-hover: rgb(11.1411764706%, 73.9490196078%, 84.6549019608%);
+  --fanui-primary-active: rgb(18.9529411765%, 76.2392156863%, 86.0039215686%);
+  --fanui-primary-vivid: #22d3ee;
+  --fanui-primary-vivid-2: #67e8f9;
+  --fanui-primary-soft: rgba(34, 211, 238, 0.16);
+  --fanui-primary-soft-2: rgba(34, 211, 238, 0.26);
+  --fanui-primary-border: rgba(34, 211, 238, 0.38);
+  --fanui-primary-ink: #a5f3fc;
+  --fanui-primary-ring: rgba(34, 211, 238, 0.3);
+  --fanui-primary-glow: rgba(34, 211, 238, 0.42);
+  --fanui-primary-grad-a: #22d3ee;
+  --fanui-primary-grad-b: #67e8f9;
+  --fanui-primary-50: #ecfeff;
+  --fanui-primary-100: #cffafe;
+  --fanui-primary-200: #a5f3fc;
+  --fanui-primary-300: #67e8f9;
+  --fanui-primary-400: #22d3ee;
+  --fanui-primary-500: #06b6d4;
+  --fanui-primary-600: #0891b2;
+  --fanui-primary-700: #0e7490;
+  --fanui-primary-800: #155e75;
+  --fanui-primary-900: #164e63;
+  --fanui-primary-950: #083344;
+  --fanui-accent: #a78bfa;
+  --fanui-accent-fg: #0b1220;
+  --fanui-accent-hover: rgb(68.5960784314%, 58.6039215686%, 98.2156862745%);
+  --fanui-accent-active: rgb(71.3568627451%, 62.2431372549%, 98.3725490196%);
+  --fanui-accent-vivid: #a78bfa;
+  --fanui-accent-vivid-2: #c4b5fd;
+  --fanui-accent-soft: rgba(167, 139, 250, 0.16);
+  --fanui-accent-soft-2: rgba(167, 139, 250, 0.26);
+  --fanui-accent-border: rgba(167, 139, 250, 0.38);
+  --fanui-accent-ink: #ddd6fe;
+  --fanui-accent-ring: rgba(167, 139, 250, 0.3);
+  --fanui-accent-glow: rgba(167, 139, 250, 0.42);
+  --fanui-accent-grad-a: #a78bfa;
+  --fanui-accent-grad-b: #c4b5fd;
+  --fanui-accent-50: #f5f3ff;
+  --fanui-accent-100: #ede9fe;
+  --fanui-accent-200: #ddd6fe;
+  --fanui-accent-300: #c4b5fd;
+  --fanui-accent-400: #a78bfa;
+  --fanui-accent-500: #8b5cf6;
+  --fanui-accent-600: #7c3aed;
+  --fanui-accent-700: #6d28d9;
+  --fanui-accent-800: #5b21b6;
+  --fanui-accent-900: #4c1d95;
+  --fanui-accent-950: #2e1065;
+  --fanui-brand-grad-a: var(--fanui-primary-vivid);
+  --fanui-brand-grad-b: var(--fanui-accent-vivid);
+  --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+  --fanui-brand-grad-soft: linear-gradient(
+    120deg,
+    rgba(34, 211, 238, 0.16),
+    rgba(167, 139, 250, 0.14)
+  );
+  --fanui-brand-aura-a: rgba(34, 211, 238, 0.38);
+  --fanui-brand-aura-b: rgba(167, 139, 250, 0.3);
+  --fanui-brand-name: "cyan";
+}
+
+[data-fanui-theme=dark][data-fanui-accent=sky],
+[data-fanui-theme=dark] [data-fanui-accent=sky],
+[data-fanui-theme=dark] .fanui-accent-sky {
+  --fanui-primary: #0ea5e9;
+  --fanui-primary-fg: #0b1220;
+  --fanui-primary-hover: rgb(13.9960784314%, 67.8823529412%, 92.1490196078%);
+  --fanui-primary-active: rgb(21.5568627451%, 70.7058823529%, 92.8392156863%);
+  --fanui-primary-vivid: #38bdf8;
+  --fanui-primary-vivid-2: #7dd3fc;
+  --fanui-primary-soft: rgba(56, 189, 248, 0.16);
+  --fanui-primary-soft-2: rgba(56, 189, 248, 0.26);
+  --fanui-primary-border: rgba(56, 189, 248, 0.38);
+  --fanui-primary-ink: #bae6fd;
+  --fanui-primary-ring: rgba(56, 189, 248, 0.3);
+  --fanui-primary-glow: rgba(56, 189, 248, 0.42);
+  --fanui-primary-grad-a: #38bdf8;
+  --fanui-primary-grad-b: #7dd3fc;
+  --fanui-primary-50: #f0f9ff;
+  --fanui-primary-100: #e0f2fe;
+  --fanui-primary-200: #bae6fd;
+  --fanui-primary-300: #7dd3fc;
+  --fanui-primary-400: #38bdf8;
+  --fanui-primary-500: #0ea5e9;
+  --fanui-primary-600: #0284c7;
+  --fanui-primary-700: #0369a1;
+  --fanui-primary-800: #075985;
+  --fanui-primary-900: #0c4a6e;
+  --fanui-primary-950: #082f49;
+  --fanui-accent: #a78bfa;
+  --fanui-accent-fg: #0b1220;
+  --fanui-accent-hover: rgb(68.5960784314%, 58.6039215686%, 98.2156862745%);
+  --fanui-accent-active: rgb(71.3568627451%, 62.2431372549%, 98.3725490196%);
+  --fanui-accent-vivid: #a78bfa;
+  --fanui-accent-vivid-2: #c4b5fd;
+  --fanui-accent-soft: rgba(167, 139, 250, 0.16);
+  --fanui-accent-soft-2: rgba(167, 139, 250, 0.26);
+  --fanui-accent-border: rgba(167, 139, 250, 0.38);
+  --fanui-accent-ink: #ddd6fe;
+  --fanui-accent-ring: rgba(167, 139, 250, 0.3);
+  --fanui-accent-glow: rgba(167, 139, 250, 0.42);
+  --fanui-accent-grad-a: #a78bfa;
+  --fanui-accent-grad-b: #c4b5fd;
+  --fanui-accent-50: #f5f3ff;
+  --fanui-accent-100: #ede9fe;
+  --fanui-accent-200: #ddd6fe;
+  --fanui-accent-300: #c4b5fd;
+  --fanui-accent-400: #a78bfa;
+  --fanui-accent-500: #8b5cf6;
+  --fanui-accent-600: #7c3aed;
+  --fanui-accent-700: #6d28d9;
+  --fanui-accent-800: #5b21b6;
+  --fanui-accent-900: #4c1d95;
+  --fanui-accent-950: #2e1065;
+  --fanui-brand-grad-a: var(--fanui-primary-vivid);
+  --fanui-brand-grad-b: var(--fanui-accent-vivid);
+  --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+  --fanui-brand-grad-soft: linear-gradient(
+    120deg,
+    rgba(56, 189, 248, 0.16),
+    rgba(167, 139, 250, 0.14)
+  );
+  --fanui-brand-aura-a: rgba(56, 189, 248, 0.38);
+  --fanui-brand-aura-b: rgba(167, 139, 250, 0.3);
+  --fanui-brand-name: "sky";
+}
+
+[data-fanui-theme=dark][data-fanui-accent=blue],
+[data-fanui-theme=dark] [data-fanui-accent=blue],
+[data-fanui-theme=dark] .fanui-accent-blue {
+  --fanui-primary: #3b82f6;
+  --fanui-primary-fg: #0b1220;
+  --fanui-primary-hover: rgb(30.0549019608%, 55.3921568627%, 96.7882352941%);
+  --fanui-primary-active: rgb(36.2039215686%, 59.3137254902%, 97.0705882353%);
+  --fanui-primary-vivid: #60a5fa;
+  --fanui-primary-vivid-2: #93c5fd;
+  --fanui-primary-soft: rgba(96, 165, 250, 0.16);
+  --fanui-primary-soft-2: rgba(96, 165, 250, 0.26);
+  --fanui-primary-border: rgba(96, 165, 250, 0.38);
+  --fanui-primary-ink: #bfdbfe;
+  --fanui-primary-ring: rgba(96, 165, 250, 0.3);
+  --fanui-primary-glow: rgba(96, 165, 250, 0.42);
+  --fanui-primary-grad-a: #60a5fa;
+  --fanui-primary-grad-b: #93c5fd;
+  --fanui-primary-50: #eff6ff;
+  --fanui-primary-100: #dbeafe;
+  --fanui-primary-200: #bfdbfe;
+  --fanui-primary-300: #93c5fd;
+  --fanui-primary-400: #60a5fa;
+  --fanui-primary-500: #3b82f6;
+  --fanui-primary-600: #2563eb;
+  --fanui-primary-700: #1d4ed8;
+  --fanui-primary-800: #1e40af;
+  --fanui-primary-900: #1e3a8a;
+  --fanui-primary-950: #172554;
+  --fanui-accent: #06b6d4;
+  --fanui-accent-fg: #0b1220;
+  --fanui-accent-hover: rgb(11.1411764706%, 73.9490196078%, 84.6549019608%);
+  --fanui-accent-active: rgb(18.9529411765%, 76.2392156863%, 86.0039215686%);
+  --fanui-accent-vivid: #22d3ee;
+  --fanui-accent-vivid-2: #67e8f9;
+  --fanui-accent-soft: rgba(34, 211, 238, 0.16);
+  --fanui-accent-soft-2: rgba(34, 211, 238, 0.26);
+  --fanui-accent-border: rgba(34, 211, 238, 0.38);
+  --fanui-accent-ink: #a5f3fc;
+  --fanui-accent-ring: rgba(34, 211, 238, 0.3);
+  --fanui-accent-glow: rgba(34, 211, 238, 0.42);
+  --fanui-accent-grad-a: #22d3ee;
+  --fanui-accent-grad-b: #67e8f9;
+  --fanui-accent-50: #ecfeff;
+  --fanui-accent-100: #cffafe;
+  --fanui-accent-200: #a5f3fc;
+  --fanui-accent-300: #67e8f9;
+  --fanui-accent-400: #22d3ee;
+  --fanui-accent-500: #06b6d4;
+  --fanui-accent-600: #0891b2;
+  --fanui-accent-700: #0e7490;
+  --fanui-accent-800: #155e75;
+  --fanui-accent-900: #164e63;
+  --fanui-accent-950: #083344;
+  --fanui-brand-grad-a: var(--fanui-primary-vivid);
+  --fanui-brand-grad-b: var(--fanui-accent-vivid);
+  --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+  --fanui-brand-grad-soft: linear-gradient(
+    120deg,
+    rgba(96, 165, 250, 0.16),
+    rgba(34, 211, 238, 0.14)
+  );
+  --fanui-brand-aura-a: rgba(96, 165, 250, 0.38);
+  --fanui-brand-aura-b: rgba(34, 211, 238, 0.3);
+  --fanui-brand-name: "blue";
+}
+
+[data-fanui-theme=dark][data-fanui-accent=indigo],
+[data-fanui-theme=dark] [data-fanui-accent=indigo],
+[data-fanui-theme=dark] .fanui-accent-indigo {
+  --fanui-primary: #818cf8;
+  --fanui-primary-fg: #0b1220;
+  --fanui-primary-hover: rgb(55.0352941176%, 58.9607843137%, 97.5019607843%);
+  --fanui-primary-active: rgb(58.9882352941%, 62.568627451%, 97.7215686275%);
+  --fanui-primary-vivid: #818cf8;
+  --fanui-primary-vivid-2: #a5b4fc;
+  --fanui-primary-soft: rgba(129, 140, 248, 0.16);
+  --fanui-primary-soft-2: rgba(129, 140, 248, 0.26);
+  --fanui-primary-border: rgba(129, 140, 248, 0.38);
+  --fanui-primary-ink: #c7d2fe;
+  --fanui-primary-ring: rgba(129, 140, 248, 0.3);
+  --fanui-primary-glow: rgba(129, 140, 248, 0.42);
+  --fanui-primary-grad-a: #818cf8;
+  --fanui-primary-grad-b: #a5b4fc;
+  --fanui-primary-50: #eef2ff;
+  --fanui-primary-100: #e0e7ff;
+  --fanui-primary-200: #c7d2fe;
+  --fanui-primary-300: #a5b4fc;
+  --fanui-primary-400: #818cf8;
+  --fanui-primary-500: #6366f1;
+  --fanui-primary-600: #4f46e5;
+  --fanui-primary-700: #4338ca;
+  --fanui-primary-800: #3730a3;
+  --fanui-primary-900: #312e81;
+  --fanui-primary-950: #1e1b4b;
+  --fanui-accent: #06b6d4;
+  --fanui-accent-fg: #0b1220;
+  --fanui-accent-hover: rgb(11.1411764706%, 73.9490196078%, 84.6549019608%);
+  --fanui-accent-active: rgb(18.9529411765%, 76.2392156863%, 86.0039215686%);
+  --fanui-accent-vivid: #22d3ee;
+  --fanui-accent-vivid-2: #67e8f9;
+  --fanui-accent-soft: rgba(34, 211, 238, 0.16);
+  --fanui-accent-soft-2: rgba(34, 211, 238, 0.26);
+  --fanui-accent-border: rgba(34, 211, 238, 0.38);
+  --fanui-accent-ink: #a5f3fc;
+  --fanui-accent-ring: rgba(34, 211, 238, 0.3);
+  --fanui-accent-glow: rgba(34, 211, 238, 0.42);
+  --fanui-accent-grad-a: #22d3ee;
+  --fanui-accent-grad-b: #67e8f9;
+  --fanui-accent-50: #ecfeff;
+  --fanui-accent-100: #cffafe;
+  --fanui-accent-200: #a5f3fc;
+  --fanui-accent-300: #67e8f9;
+  --fanui-accent-400: #22d3ee;
+  --fanui-accent-500: #06b6d4;
+  --fanui-accent-600: #0891b2;
+  --fanui-accent-700: #0e7490;
+  --fanui-accent-800: #155e75;
+  --fanui-accent-900: #164e63;
+  --fanui-accent-950: #083344;
+  --fanui-brand-grad-a: var(--fanui-primary-vivid);
+  --fanui-brand-grad-b: var(--fanui-accent-vivid);
+  --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+  --fanui-brand-grad-soft: linear-gradient(
+    120deg,
+    rgba(129, 140, 248, 0.16),
+    rgba(34, 211, 238, 0.14)
+  );
+  --fanui-brand-aura-a: rgba(129, 140, 248, 0.38);
+  --fanui-brand-aura-b: rgba(34, 211, 238, 0.3);
+  --fanui-brand-name: "indigo";
+}
+
+[data-fanui-theme=dark][data-fanui-accent=violet],
+[data-fanui-theme=dark] [data-fanui-accent=violet],
+[data-fanui-theme=dark] .fanui-accent-violet {
+  --fanui-primary: #a78bfa;
+  --fanui-primary-fg: #0b1220;
+  --fanui-primary-hover: rgb(68.5960784314%, 58.6039215686%, 98.2156862745%);
+  --fanui-primary-active: rgb(71.3568627451%, 62.2431372549%, 98.3725490196%);
+  --fanui-primary-vivid: #a78bfa;
+  --fanui-primary-vivid-2: #c4b5fd;
+  --fanui-primary-soft: rgba(167, 139, 250, 0.16);
+  --fanui-primary-soft-2: rgba(167, 139, 250, 0.26);
+  --fanui-primary-border: rgba(167, 139, 250, 0.38);
+  --fanui-primary-ink: #ddd6fe;
+  --fanui-primary-ring: rgba(167, 139, 250, 0.3);
+  --fanui-primary-glow: rgba(167, 139, 250, 0.42);
+  --fanui-primary-grad-a: #a78bfa;
+  --fanui-primary-grad-b: #c4b5fd;
+  --fanui-primary-50: #f5f3ff;
+  --fanui-primary-100: #ede9fe;
+  --fanui-primary-200: #ddd6fe;
+  --fanui-primary-300: #c4b5fd;
+  --fanui-primary-400: #a78bfa;
+  --fanui-primary-500: #8b5cf6;
+  --fanui-primary-600: #7c3aed;
+  --fanui-primary-700: #6d28d9;
+  --fanui-primary-800: #5b21b6;
+  --fanui-primary-900: #4c1d95;
+  --fanui-primary-950: #2e1065;
+  --fanui-accent: #06b6d4;
+  --fanui-accent-fg: #0b1220;
+  --fanui-accent-hover: rgb(11.1411764706%, 73.9490196078%, 84.6549019608%);
+  --fanui-accent-active: rgb(18.9529411765%, 76.2392156863%, 86.0039215686%);
+  --fanui-accent-vivid: #22d3ee;
+  --fanui-accent-vivid-2: #67e8f9;
+  --fanui-accent-soft: rgba(34, 211, 238, 0.16);
+  --fanui-accent-soft-2: rgba(34, 211, 238, 0.26);
+  --fanui-accent-border: rgba(34, 211, 238, 0.38);
+  --fanui-accent-ink: #a5f3fc;
+  --fanui-accent-ring: rgba(34, 211, 238, 0.3);
+  --fanui-accent-glow: rgba(34, 211, 238, 0.42);
+  --fanui-accent-grad-a: #22d3ee;
+  --fanui-accent-grad-b: #67e8f9;
+  --fanui-accent-50: #ecfeff;
+  --fanui-accent-100: #cffafe;
+  --fanui-accent-200: #a5f3fc;
+  --fanui-accent-300: #67e8f9;
+  --fanui-accent-400: #22d3ee;
+  --fanui-accent-500: #06b6d4;
+  --fanui-accent-600: #0891b2;
+  --fanui-accent-700: #0e7490;
+  --fanui-accent-800: #155e75;
+  --fanui-accent-900: #164e63;
+  --fanui-accent-950: #083344;
+  --fanui-brand-grad-a: var(--fanui-primary-vivid);
+  --fanui-brand-grad-b: var(--fanui-accent-vivid);
+  --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+  --fanui-brand-grad-soft: linear-gradient(
+    120deg,
+    rgba(167, 139, 250, 0.16),
+    rgba(34, 211, 238, 0.14)
+  );
+  --fanui-brand-aura-a: rgba(167, 139, 250, 0.38);
+  --fanui-brand-aura-b: rgba(34, 211, 238, 0.3);
+  --fanui-brand-name: "violet";
+}
+
+[data-fanui-theme=dark][data-fanui-accent=purple],
+[data-fanui-theme=dark] [data-fanui-accent=purple],
+[data-fanui-theme=dark] .fanui-accent-purple {
+  --fanui-primary: #a855f7;
+  --fanui-primary-fg: #0b1220;
+  --fanui-primary-hover: rgb(68.9529411765%, 39.3333333333%, 97.1450980392%);
+  --fanui-primary-active: rgb(71.6823529412%, 44.6666666667%, 97.3960784314%);
+  --fanui-primary-vivid: #c084fc;
+  --fanui-primary-vivid-2: #d8b4fe;
+  --fanui-primary-soft: rgba(192, 132, 252, 0.16);
+  --fanui-primary-soft-2: rgba(192, 132, 252, 0.26);
+  --fanui-primary-border: rgba(192, 132, 252, 0.38);
+  --fanui-primary-ink: #e9d5ff;
+  --fanui-primary-ring: rgba(192, 132, 252, 0.3);
+  --fanui-primary-glow: rgba(192, 132, 252, 0.42);
+  --fanui-primary-grad-a: #c084fc;
+  --fanui-primary-grad-b: #d8b4fe;
+  --fanui-primary-50: #faf5ff;
+  --fanui-primary-100: #f3e8ff;
+  --fanui-primary-200: #e9d5ff;
+  --fanui-primary-300: #d8b4fe;
+  --fanui-primary-400: #c084fc;
+  --fanui-primary-500: #a855f7;
+  --fanui-primary-600: #9333ea;
+  --fanui-primary-700: #7e22ce;
+  --fanui-primary-800: #6b21a8;
+  --fanui-primary-900: #581c87;
+  --fanui-primary-950: #3b0764;
+  --fanui-accent: #ec4899;
+  --fanui-accent-fg: #0b1220;
+  --fanui-accent-hover: rgb(93.2196078431%, 34.6941176471%, 63.6%);
+  --fanui-accent-active: rgb(93.8156862745%, 40.4352941176%, 66.8%);
+  --fanui-accent-vivid: #f472b6;
+  --fanui-accent-vivid-2: #f9a8d4;
+  --fanui-accent-soft: rgba(244, 114, 182, 0.16);
+  --fanui-accent-soft-2: rgba(244, 114, 182, 0.26);
+  --fanui-accent-border: rgba(244, 114, 182, 0.38);
+  --fanui-accent-ink: #fbcfe8;
+  --fanui-accent-ring: rgba(244, 114, 182, 0.3);
+  --fanui-accent-glow: rgba(244, 114, 182, 0.42);
+  --fanui-accent-grad-a: #f472b6;
+  --fanui-accent-grad-b: #f9a8d4;
+  --fanui-accent-50: #fdf2f8;
+  --fanui-accent-100: #fce7f3;
+  --fanui-accent-200: #fbcfe8;
+  --fanui-accent-300: #f9a8d4;
+  --fanui-accent-400: #f472b6;
+  --fanui-accent-500: #ec4899;
+  --fanui-accent-600: #db2777;
+  --fanui-accent-700: #be185d;
+  --fanui-accent-800: #9d174d;
+  --fanui-accent-900: #831843;
+  --fanui-accent-950: #500724;
+  --fanui-brand-grad-a: var(--fanui-primary-vivid);
+  --fanui-brand-grad-b: var(--fanui-accent-vivid);
+  --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+  --fanui-brand-grad-soft: linear-gradient(
+    120deg,
+    rgba(192, 132, 252, 0.16),
+    rgba(244, 114, 182, 0.14)
+  );
+  --fanui-brand-aura-a: rgba(192, 132, 252, 0.38);
+  --fanui-brand-aura-b: rgba(244, 114, 182, 0.3);
+  --fanui-brand-name: "purple";
+}
+
+[data-fanui-theme=dark][data-fanui-accent=pink],
+[data-fanui-theme=dark] [data-fanui-accent=pink],
+[data-fanui-theme=dark] .fanui-accent-pink {
+  --fanui-primary: #ec4899;
+  --fanui-primary-fg: #0b1220;
+  --fanui-primary-hover: rgb(93.2196078431%, 34.6941176471%, 63.6%);
+  --fanui-primary-active: rgb(93.8156862745%, 40.4352941176%, 66.8%);
+  --fanui-primary-vivid: #f472b6;
+  --fanui-primary-vivid-2: #f9a8d4;
+  --fanui-primary-soft: rgba(244, 114, 182, 0.16);
+  --fanui-primary-soft-2: rgba(244, 114, 182, 0.26);
+  --fanui-primary-border: rgba(244, 114, 182, 0.38);
+  --fanui-primary-ink: #fbcfe8;
+  --fanui-primary-ring: rgba(244, 114, 182, 0.3);
+  --fanui-primary-glow: rgba(244, 114, 182, 0.42);
+  --fanui-primary-grad-a: #f472b6;
+  --fanui-primary-grad-b: #f9a8d4;
+  --fanui-primary-50: #fdf2f8;
+  --fanui-primary-100: #fce7f3;
+  --fanui-primary-200: #fbcfe8;
+  --fanui-primary-300: #f9a8d4;
+  --fanui-primary-400: #f472b6;
+  --fanui-primary-500: #ec4899;
+  --fanui-primary-600: #db2777;
+  --fanui-primary-700: #be185d;
+  --fanui-primary-800: #9d174d;
+  --fanui-primary-900: #831843;
+  --fanui-primary-950: #500724;
+  --fanui-accent: #a78bfa;
+  --fanui-accent-fg: #0b1220;
+  --fanui-accent-hover: rgb(68.5960784314%, 58.6039215686%, 98.2156862745%);
+  --fanui-accent-active: rgb(71.3568627451%, 62.2431372549%, 98.3725490196%);
+  --fanui-accent-vivid: #a78bfa;
+  --fanui-accent-vivid-2: #c4b5fd;
+  --fanui-accent-soft: rgba(167, 139, 250, 0.16);
+  --fanui-accent-soft-2: rgba(167, 139, 250, 0.26);
+  --fanui-accent-border: rgba(167, 139, 250, 0.38);
+  --fanui-accent-ink: #ddd6fe;
+  --fanui-accent-ring: rgba(167, 139, 250, 0.3);
+  --fanui-accent-glow: rgba(167, 139, 250, 0.42);
+  --fanui-accent-grad-a: #a78bfa;
+  --fanui-accent-grad-b: #c4b5fd;
+  --fanui-accent-50: #f5f3ff;
+  --fanui-accent-100: #ede9fe;
+  --fanui-accent-200: #ddd6fe;
+  --fanui-accent-300: #c4b5fd;
+  --fanui-accent-400: #a78bfa;
+  --fanui-accent-500: #8b5cf6;
+  --fanui-accent-600: #7c3aed;
+  --fanui-accent-700: #6d28d9;
+  --fanui-accent-800: #5b21b6;
+  --fanui-accent-900: #4c1d95;
+  --fanui-accent-950: #2e1065;
+  --fanui-brand-grad-a: var(--fanui-primary-vivid);
+  --fanui-brand-grad-b: var(--fanui-accent-vivid);
+  --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+  --fanui-brand-grad-soft: linear-gradient(
+    120deg,
+    rgba(244, 114, 182, 0.16),
+    rgba(167, 139, 250, 0.14)
+  );
+  --fanui-brand-aura-a: rgba(244, 114, 182, 0.38);
+  --fanui-brand-aura-b: rgba(167, 139, 250, 0.3);
+  --fanui-brand-name: "pink";
+}
+
+[data-fanui-theme=dark][data-fanui-accent=rose],
+[data-fanui-theme=dark] [data-fanui-accent=rose],
+[data-fanui-theme=dark] .fanui-accent-rose {
+  --fanui-primary: #f43f5e;
+  --fanui-primary-fg: #0b1220;
+  --fanui-primary-hover: rgb(96.0745098039%, 31.4823529412%, 42.5450980392%);
+  --fanui-primary-active: rgb(96.4196078431%, 37.5058823529%, 47.5960784314%);
+  --fanui-primary-vivid: #fb7185;
+  --fanui-primary-vivid-2: #fda4af;
+  --fanui-primary-soft: rgba(251, 113, 133, 0.16);
+  --fanui-primary-soft-2: rgba(251, 113, 133, 0.26);
+  --fanui-primary-border: rgba(251, 113, 133, 0.38);
+  --fanui-primary-ink: #fecdd3;
+  --fanui-primary-ring: rgba(251, 113, 133, 0.3);
+  --fanui-primary-glow: rgba(251, 113, 133, 0.42);
+  --fanui-primary-grad-a: #fb7185;
+  --fanui-primary-grad-b: #fda4af;
+  --fanui-primary-50: #fff1f2;
+  --fanui-primary-100: #ffe4e6;
+  --fanui-primary-200: #fecdd3;
+  --fanui-primary-300: #fda4af;
+  --fanui-primary-400: #fb7185;
+  --fanui-primary-500: #f43f5e;
+  --fanui-primary-600: #e11d48;
+  --fanui-primary-700: #be123c;
+  --fanui-primary-800: #9f1239;
+  --fanui-primary-900: #881337;
+  --fanui-primary-950: #4c0519;
+  --fanui-accent: #f97316;
+  --fanui-accent-fg: #0b1220;
+  --fanui-accent-hover: rgb(97.8588235294%, 50.0392156863%, 16.8509803922%);
+  --fanui-accent-active: rgb(98.0470588235%, 54.431372549%, 24.1607843137%);
+  --fanui-accent-vivid: #fb923c;
+  --fanui-accent-vivid-2: #fdba74;
+  --fanui-accent-soft: rgba(251, 146, 60, 0.16);
+  --fanui-accent-soft-2: rgba(251, 146, 60, 0.26);
+  --fanui-accent-border: rgba(251, 146, 60, 0.38);
+  --fanui-accent-ink: #fed7aa;
+  --fanui-accent-ring: rgba(251, 146, 60, 0.3);
+  --fanui-accent-glow: rgba(251, 146, 60, 0.42);
+  --fanui-accent-grad-a: #fb923c;
+  --fanui-accent-grad-b: #fdba74;
+  --fanui-accent-50: #fff7ed;
+  --fanui-accent-100: #ffedd5;
+  --fanui-accent-200: #fed7aa;
+  --fanui-accent-300: #fdba74;
+  --fanui-accent-400: #fb923c;
+  --fanui-accent-500: #f97316;
+  --fanui-accent-600: #ea580c;
+  --fanui-accent-700: #c2410c;
+  --fanui-accent-800: #9a3412;
+  --fanui-accent-900: #7c2d12;
+  --fanui-accent-950: #431407;
+  --fanui-brand-grad-a: var(--fanui-primary-vivid);
+  --fanui-brand-grad-b: var(--fanui-accent-vivid);
+  --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+  --fanui-brand-grad-soft: linear-gradient(
+    120deg,
+    rgba(251, 113, 133, 0.16),
+    rgba(251, 146, 60, 0.14)
+  );
+  --fanui-brand-aura-a: rgba(251, 113, 133, 0.38);
+  --fanui-brand-aura-b: rgba(251, 146, 60, 0.3);
+  --fanui-brand-name: "rose";
+}
+
+[data-fanui-theme=dark][data-fanui-accent=red],
+[data-fanui-theme=dark] [data-fanui-accent=red],
+[data-fanui-theme=dark] .fanui-accent-red {
+  --fanui-primary: #ef4444;
+  --fanui-primary-fg: #0b1220;
+  --fanui-primary-hover: rgb(94.2901960784%, 33.2666666667%, 33.2666666667%);
+  --fanui-primary-active: rgb(94.7921568627%, 39.1333333333%, 39.1333333333%);
+  --fanui-primary-vivid: #f87171;
+  --fanui-primary-vivid-2: #fca5a5;
+  --fanui-primary-soft: rgba(248, 113, 113, 0.16);
+  --fanui-primary-soft-2: rgba(248, 113, 113, 0.26);
+  --fanui-primary-border: rgba(248, 113, 113, 0.38);
+  --fanui-primary-ink: #fecaca;
+  --fanui-primary-ring: rgba(248, 113, 113, 0.3);
+  --fanui-primary-glow: rgba(248, 113, 113, 0.42);
+  --fanui-primary-grad-a: #f87171;
+  --fanui-primary-grad-b: #fca5a5;
+  --fanui-primary-50: #fef2f2;
+  --fanui-primary-100: #fee2e2;
+  --fanui-primary-200: #fecaca;
+  --fanui-primary-300: #fca5a5;
+  --fanui-primary-400: #f87171;
+  --fanui-primary-500: #ef4444;
+  --fanui-primary-600: #dc2626;
+  --fanui-primary-700: #b91c1c;
+  --fanui-primary-800: #991b1b;
+  --fanui-primary-900: #7f1d1d;
+  --fanui-primary-950: #450a0a;
+  --fanui-accent: #f43f5e;
+  --fanui-accent-fg: #0b1220;
+  --fanui-accent-hover: rgb(96.0745098039%, 31.4823529412%, 42.5450980392%);
+  --fanui-accent-active: rgb(96.4196078431%, 37.5058823529%, 47.5960784314%);
+  --fanui-accent-vivid: #fb7185;
+  --fanui-accent-vivid-2: #fda4af;
+  --fanui-accent-soft: rgba(251, 113, 133, 0.16);
+  --fanui-accent-soft-2: rgba(251, 113, 133, 0.26);
+  --fanui-accent-border: rgba(251, 113, 133, 0.38);
+  --fanui-accent-ink: #fecdd3;
+  --fanui-accent-ring: rgba(251, 113, 133, 0.3);
+  --fanui-accent-glow: rgba(251, 113, 133, 0.42);
+  --fanui-accent-grad-a: #fb7185;
+  --fanui-accent-grad-b: #fda4af;
+  --fanui-accent-50: #fff1f2;
+  --fanui-accent-100: #ffe4e6;
+  --fanui-accent-200: #fecdd3;
+  --fanui-accent-300: #fda4af;
+  --fanui-accent-400: #fb7185;
+  --fanui-accent-500: #f43f5e;
+  --fanui-accent-600: #e11d48;
+  --fanui-accent-700: #be123c;
+  --fanui-accent-800: #9f1239;
+  --fanui-accent-900: #881337;
+  --fanui-accent-950: #4c0519;
+  --fanui-brand-grad-a: var(--fanui-primary-vivid);
+  --fanui-brand-grad-b: var(--fanui-accent-vivid);
+  --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+  --fanui-brand-grad-soft: linear-gradient(
+    120deg,
+    rgba(248, 113, 113, 0.16),
+    rgba(251, 113, 133, 0.14)
+  );
+  --fanui-brand-aura-a: rgba(248, 113, 113, 0.38);
+  --fanui-brand-aura-b: rgba(251, 113, 133, 0.3);
+  --fanui-brand-name: "red";
+}
+
+[data-fanui-theme=dark][data-fanui-accent=orange],
+[data-fanui-theme=dark] [data-fanui-accent=orange],
+[data-fanui-theme=dark] .fanui-accent-orange {
+  --fanui-primary: #f97316;
+  --fanui-primary-fg: #0b1220;
+  --fanui-primary-hover: rgb(97.8588235294%, 50.0392156863%, 16.8509803922%);
+  --fanui-primary-active: rgb(98.0470588235%, 54.431372549%, 24.1607843137%);
+  --fanui-primary-vivid: #fb923c;
+  --fanui-primary-vivid-2: #fdba74;
+  --fanui-primary-soft: rgba(251, 146, 60, 0.16);
+  --fanui-primary-soft-2: rgba(251, 146, 60, 0.26);
+  --fanui-primary-border: rgba(251, 146, 60, 0.38);
+  --fanui-primary-ink: #fed7aa;
+  --fanui-primary-ring: rgba(251, 146, 60, 0.3);
+  --fanui-primary-glow: rgba(251, 146, 60, 0.42);
+  --fanui-primary-grad-a: #fb923c;
+  --fanui-primary-grad-b: #fdba74;
+  --fanui-primary-50: #fff7ed;
+  --fanui-primary-100: #ffedd5;
+  --fanui-primary-200: #fed7aa;
+  --fanui-primary-300: #fdba74;
+  --fanui-primary-400: #fb923c;
+  --fanui-primary-500: #f97316;
+  --fanui-primary-600: #ea580c;
+  --fanui-primary-700: #c2410c;
+  --fanui-primary-800: #9a3412;
+  --fanui-primary-900: #7c2d12;
+  --fanui-primary-950: #431407;
+  --fanui-accent: #ec4899;
+  --fanui-accent-fg: #0b1220;
+  --fanui-accent-hover: rgb(93.2196078431%, 34.6941176471%, 63.6%);
+  --fanui-accent-active: rgb(93.8156862745%, 40.4352941176%, 66.8%);
+  --fanui-accent-vivid: #f472b6;
+  --fanui-accent-vivid-2: #f9a8d4;
+  --fanui-accent-soft: rgba(244, 114, 182, 0.16);
+  --fanui-accent-soft-2: rgba(244, 114, 182, 0.26);
+  --fanui-accent-border: rgba(244, 114, 182, 0.38);
+  --fanui-accent-ink: #fbcfe8;
+  --fanui-accent-ring: rgba(244, 114, 182, 0.3);
+  --fanui-accent-glow: rgba(244, 114, 182, 0.42);
+  --fanui-accent-grad-a: #f472b6;
+  --fanui-accent-grad-b: #f9a8d4;
+  --fanui-accent-50: #fdf2f8;
+  --fanui-accent-100: #fce7f3;
+  --fanui-accent-200: #fbcfe8;
+  --fanui-accent-300: #f9a8d4;
+  --fanui-accent-400: #f472b6;
+  --fanui-accent-500: #ec4899;
+  --fanui-accent-600: #db2777;
+  --fanui-accent-700: #be185d;
+  --fanui-accent-800: #9d174d;
+  --fanui-accent-900: #831843;
+  --fanui-accent-950: #500724;
+  --fanui-brand-grad-a: var(--fanui-primary-vivid);
+  --fanui-brand-grad-b: var(--fanui-accent-vivid);
+  --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+  --fanui-brand-grad-soft: linear-gradient(
+    120deg,
+    rgba(251, 146, 60, 0.16),
+    rgba(244, 114, 182, 0.14)
+  );
+  --fanui-brand-aura-a: rgba(251, 146, 60, 0.38);
+  --fanui-brand-aura-b: rgba(244, 114, 182, 0.3);
+  --fanui-brand-name: "orange";
+}
+
+[data-fanui-theme=dark][data-fanui-accent=emerald],
+[data-fanui-theme=dark] [data-fanui-accent=emerald],
+[data-fanui-theme=dark] .fanui-accent-emerald {
+  --fanui-primary: #10b981;
+  --fanui-primary-fg: #0b1220;
+  --fanui-primary-hover: rgb(14.7098039216%, 75.0196078431%, 55.0352941176%);
+  --fanui-primary-active: rgb(22.2078431373%, 77.2156862745%, 58.9882352941%);
+  --fanui-primary-vivid: #34d399;
+  --fanui-primary-vivid-2: #6ee7b7;
+  --fanui-primary-soft: rgba(52, 211, 153, 0.16);
+  --fanui-primary-soft-2: rgba(52, 211, 153, 0.26);
+  --fanui-primary-border: rgba(52, 211, 153, 0.38);
+  --fanui-primary-ink: #a7f3d0;
+  --fanui-primary-ring: rgba(52, 211, 153, 0.3);
+  --fanui-primary-glow: rgba(52, 211, 153, 0.42);
+  --fanui-primary-grad-a: #34d399;
+  --fanui-primary-grad-b: #6ee7b7;
+  --fanui-primary-50: #ecfdf5;
+  --fanui-primary-100: #d1fae5;
+  --fanui-primary-200: #a7f3d0;
+  --fanui-primary-300: #6ee7b7;
+  --fanui-primary-400: #34d399;
+  --fanui-primary-500: #10b981;
+  --fanui-primary-600: #059669;
+  --fanui-primary-700: #047857;
+  --fanui-primary-800: #065f46;
+  --fanui-primary-900: #064e3b;
+  --fanui-primary-950: #022c22;
+  --fanui-accent: #06b6d4;
+  --fanui-accent-fg: #0b1220;
+  --fanui-accent-hover: rgb(11.1411764706%, 73.9490196078%, 84.6549019608%);
+  --fanui-accent-active: rgb(18.9529411765%, 76.2392156863%, 86.0039215686%);
+  --fanui-accent-vivid: #22d3ee;
+  --fanui-accent-vivid-2: #67e8f9;
+  --fanui-accent-soft: rgba(34, 211, 238, 0.16);
+  --fanui-accent-soft-2: rgba(34, 211, 238, 0.26);
+  --fanui-accent-border: rgba(34, 211, 238, 0.38);
+  --fanui-accent-ink: #a5f3fc;
+  --fanui-accent-ring: rgba(34, 211, 238, 0.3);
+  --fanui-accent-glow: rgba(34, 211, 238, 0.42);
+  --fanui-accent-grad-a: #22d3ee;
+  --fanui-accent-grad-b: #67e8f9;
+  --fanui-accent-50: #ecfeff;
+  --fanui-accent-100: #cffafe;
+  --fanui-accent-200: #a5f3fc;
+  --fanui-accent-300: #67e8f9;
+  --fanui-accent-400: #22d3ee;
+  --fanui-accent-500: #06b6d4;
+  --fanui-accent-600: #0891b2;
+  --fanui-accent-700: #0e7490;
+  --fanui-accent-800: #155e75;
+  --fanui-accent-900: #164e63;
+  --fanui-accent-950: #083344;
+  --fanui-brand-grad-a: var(--fanui-primary-vivid);
+  --fanui-brand-grad-b: var(--fanui-accent-vivid);
+  --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+  --fanui-brand-grad-soft: linear-gradient(
+    120deg,
+    rgba(52, 211, 153, 0.16),
+    rgba(34, 211, 238, 0.14)
+  );
+  --fanui-brand-aura-a: rgba(52, 211, 153, 0.38);
+  --fanui-brand-aura-b: rgba(34, 211, 238, 0.3);
+  --fanui-brand-name: "emerald";
+}
+
+[data-fanui-theme=dark][data-fanui-accent=teal],
+[data-fanui-theme=dark] [data-fanui-accent=teal],
+[data-fanui-theme=dark] .fanui-accent-teal {
+  --fanui-primary: #14b8a6;
+  --fanui-primary-fg: #0b1220;
+  --fanui-primary-hover: rgb(16.137254902%, 74.662745098%, 68.2392156863%);
+  --fanui-primary-active: rgb(23.5098039216%, 76.8901960784%, 71.031372549%);
+  --fanui-primary-vivid: #2dd4bf;
+  --fanui-primary-vivid-2: #5eead4;
+  --fanui-primary-soft: rgba(45, 212, 191, 0.16);
+  --fanui-primary-soft-2: rgba(45, 212, 191, 0.26);
+  --fanui-primary-border: rgba(45, 212, 191, 0.38);
+  --fanui-primary-ink: #99f6e4;
+  --fanui-primary-ring: rgba(45, 212, 191, 0.3);
+  --fanui-primary-glow: rgba(45, 212, 191, 0.42);
+  --fanui-primary-grad-a: #2dd4bf;
+  --fanui-primary-grad-b: #5eead4;
+  --fanui-primary-50: #f0fdfa;
+  --fanui-primary-100: #ccfbf1;
+  --fanui-primary-200: #99f6e4;
+  --fanui-primary-300: #5eead4;
+  --fanui-primary-400: #2dd4bf;
+  --fanui-primary-500: #14b8a6;
+  --fanui-primary-600: #0d9488;
+  --fanui-primary-700: #0f766e;
+  --fanui-primary-800: #115e59;
+  --fanui-primary-900: #134e4a;
+  --fanui-primary-950: #042f2e;
+  --fanui-accent: #10b981;
+  --fanui-accent-fg: #0b1220;
+  --fanui-accent-hover: rgb(14.7098039216%, 75.0196078431%, 55.0352941176%);
+  --fanui-accent-active: rgb(22.2078431373%, 77.2156862745%, 58.9882352941%);
+  --fanui-accent-vivid: #34d399;
+  --fanui-accent-vivid-2: #6ee7b7;
+  --fanui-accent-soft: rgba(52, 211, 153, 0.16);
+  --fanui-accent-soft-2: rgba(52, 211, 153, 0.26);
+  --fanui-accent-border: rgba(52, 211, 153, 0.38);
+  --fanui-accent-ink: #a7f3d0;
+  --fanui-accent-ring: rgba(52, 211, 153, 0.3);
+  --fanui-accent-glow: rgba(52, 211, 153, 0.42);
+  --fanui-accent-grad-a: #34d399;
+  --fanui-accent-grad-b: #6ee7b7;
+  --fanui-accent-50: #ecfdf5;
+  --fanui-accent-100: #d1fae5;
+  --fanui-accent-200: #a7f3d0;
+  --fanui-accent-300: #6ee7b7;
+  --fanui-accent-400: #34d399;
+  --fanui-accent-500: #10b981;
+  --fanui-accent-600: #059669;
+  --fanui-accent-700: #047857;
+  --fanui-accent-800: #065f46;
+  --fanui-accent-900: #064e3b;
+  --fanui-accent-950: #022c22;
+  --fanui-brand-grad-a: var(--fanui-primary-vivid);
+  --fanui-brand-grad-b: var(--fanui-accent-vivid);
+  --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+  --fanui-brand-grad-soft: linear-gradient(
+    120deg,
+    rgba(45, 212, 191, 0.16),
+    rgba(52, 211, 153, 0.14)
+  );
+  --fanui-brand-aura-a: rgba(45, 212, 191, 0.38);
+  --fanui-brand-aura-b: rgba(52, 211, 153, 0.3);
+  --fanui-brand-name: "teal";
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-fanui-theme=auto],
+  :root[data-fanui-theme=auto] {
+    --fanui-primary: #06b6d4;
+    --fanui-primary-fg: #0b1220;
+    --fanui-primary-hover: rgb(11.1411764706%, 73.9490196078%, 84.6549019608%);
+    --fanui-primary-active: rgb(18.9529411765%, 76.2392156863%, 86.0039215686%);
+    --fanui-primary-vivid: #22d3ee;
+    --fanui-primary-vivid-2: #67e8f9;
+    --fanui-primary-soft: rgba(34, 211, 238, 0.16);
+    --fanui-primary-soft-2: rgba(34, 211, 238, 0.26);
+    --fanui-primary-border: rgba(34, 211, 238, 0.38);
+    --fanui-primary-ink: #a5f3fc;
+    --fanui-primary-ring: rgba(34, 211, 238, 0.3);
+    --fanui-primary-glow: rgba(34, 211, 238, 0.42);
+    --fanui-primary-grad-a: #22d3ee;
+    --fanui-primary-grad-b: #67e8f9;
+    --fanui-primary-50: #ecfeff;
+    --fanui-primary-100: #cffafe;
+    --fanui-primary-200: #a5f3fc;
+    --fanui-primary-300: #67e8f9;
+    --fanui-primary-400: #22d3ee;
+    --fanui-primary-500: #06b6d4;
+    --fanui-primary-600: #0891b2;
+    --fanui-primary-700: #0e7490;
+    --fanui-primary-800: #155e75;
+    --fanui-primary-900: #164e63;
+    --fanui-primary-950: #083344;
+    --fanui-accent: #a78bfa;
+    --fanui-accent-fg: #0b1220;
+    --fanui-accent-hover: rgb(68.5960784314%, 58.6039215686%, 98.2156862745%);
+    --fanui-accent-active: rgb(71.3568627451%, 62.2431372549%, 98.3725490196%);
+    --fanui-accent-vivid: #a78bfa;
+    --fanui-accent-vivid-2: #c4b5fd;
+    --fanui-accent-soft: rgba(167, 139, 250, 0.16);
+    --fanui-accent-soft-2: rgba(167, 139, 250, 0.26);
+    --fanui-accent-border: rgba(167, 139, 250, 0.38);
+    --fanui-accent-ink: #ddd6fe;
+    --fanui-accent-ring: rgba(167, 139, 250, 0.3);
+    --fanui-accent-glow: rgba(167, 139, 250, 0.42);
+    --fanui-accent-grad-a: #a78bfa;
+    --fanui-accent-grad-b: #c4b5fd;
+    --fanui-accent-50: #f5f3ff;
+    --fanui-accent-100: #ede9fe;
+    --fanui-accent-200: #ddd6fe;
+    --fanui-accent-300: #c4b5fd;
+    --fanui-accent-400: #a78bfa;
+    --fanui-accent-500: #8b5cf6;
+    --fanui-accent-600: #7c3aed;
+    --fanui-accent-700: #6d28d9;
+    --fanui-accent-800: #5b21b6;
+    --fanui-accent-900: #4c1d95;
+    --fanui-accent-950: #2e1065;
+    --fanui-brand-grad-a: var(--fanui-primary-vivid);
+    --fanui-brand-grad-b: var(--fanui-accent-vivid);
+    --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+    --fanui-brand-grad-soft: linear-gradient(
+      120deg,
+      rgba(34, 211, 238, 0.16),
+      rgba(167, 139, 250, 0.14)
+    );
+    --fanui-brand-aura-a: rgba(34, 211, 238, 0.38);
+    --fanui-brand-aura-b: rgba(167, 139, 250, 0.3);
+    --fanui-brand-name: "cyan";
+  }
+  [data-fanui-theme=auto][data-fanui-accent=cyan],
+  [data-fanui-theme=auto] [data-fanui-accent=cyan],
+  [data-fanui-theme=auto] .fanui-accent-cyan {
+    --fanui-primary: #06b6d4;
+    --fanui-primary-fg: #0b1220;
+    --fanui-primary-hover: rgb(11.1411764706%, 73.9490196078%, 84.6549019608%);
+    --fanui-primary-active: rgb(18.9529411765%, 76.2392156863%, 86.0039215686%);
+    --fanui-primary-vivid: #22d3ee;
+    --fanui-primary-vivid-2: #67e8f9;
+    --fanui-primary-soft: rgba(34, 211, 238, 0.16);
+    --fanui-primary-soft-2: rgba(34, 211, 238, 0.26);
+    --fanui-primary-border: rgba(34, 211, 238, 0.38);
+    --fanui-primary-ink: #a5f3fc;
+    --fanui-primary-ring: rgba(34, 211, 238, 0.3);
+    --fanui-primary-glow: rgba(34, 211, 238, 0.42);
+    --fanui-primary-grad-a: #22d3ee;
+    --fanui-primary-grad-b: #67e8f9;
+    --fanui-primary-50: #ecfeff;
+    --fanui-primary-100: #cffafe;
+    --fanui-primary-200: #a5f3fc;
+    --fanui-primary-300: #67e8f9;
+    --fanui-primary-400: #22d3ee;
+    --fanui-primary-500: #06b6d4;
+    --fanui-primary-600: #0891b2;
+    --fanui-primary-700: #0e7490;
+    --fanui-primary-800: #155e75;
+    --fanui-primary-900: #164e63;
+    --fanui-primary-950: #083344;
+    --fanui-accent: #a78bfa;
+    --fanui-accent-fg: #0b1220;
+    --fanui-accent-hover: rgb(68.5960784314%, 58.6039215686%, 98.2156862745%);
+    --fanui-accent-active: rgb(71.3568627451%, 62.2431372549%, 98.3725490196%);
+    --fanui-accent-vivid: #a78bfa;
+    --fanui-accent-vivid-2: #c4b5fd;
+    --fanui-accent-soft: rgba(167, 139, 250, 0.16);
+    --fanui-accent-soft-2: rgba(167, 139, 250, 0.26);
+    --fanui-accent-border: rgba(167, 139, 250, 0.38);
+    --fanui-accent-ink: #ddd6fe;
+    --fanui-accent-ring: rgba(167, 139, 250, 0.3);
+    --fanui-accent-glow: rgba(167, 139, 250, 0.42);
+    --fanui-accent-grad-a: #a78bfa;
+    --fanui-accent-grad-b: #c4b5fd;
+    --fanui-accent-50: #f5f3ff;
+    --fanui-accent-100: #ede9fe;
+    --fanui-accent-200: #ddd6fe;
+    --fanui-accent-300: #c4b5fd;
+    --fanui-accent-400: #a78bfa;
+    --fanui-accent-500: #8b5cf6;
+    --fanui-accent-600: #7c3aed;
+    --fanui-accent-700: #6d28d9;
+    --fanui-accent-800: #5b21b6;
+    --fanui-accent-900: #4c1d95;
+    --fanui-accent-950: #2e1065;
+    --fanui-brand-grad-a: var(--fanui-primary-vivid);
+    --fanui-brand-grad-b: var(--fanui-accent-vivid);
+    --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+    --fanui-brand-grad-soft: linear-gradient(
+      120deg,
+      rgba(34, 211, 238, 0.16),
+      rgba(167, 139, 250, 0.14)
+    );
+    --fanui-brand-aura-a: rgba(34, 211, 238, 0.38);
+    --fanui-brand-aura-b: rgba(167, 139, 250, 0.3);
+    --fanui-brand-name: "cyan";
+  }
+  [data-fanui-theme=auto][data-fanui-accent=sky],
+  [data-fanui-theme=auto] [data-fanui-accent=sky],
+  [data-fanui-theme=auto] .fanui-accent-sky {
+    --fanui-primary: #0ea5e9;
+    --fanui-primary-fg: #0b1220;
+    --fanui-primary-hover: rgb(13.9960784314%, 67.8823529412%, 92.1490196078%);
+    --fanui-primary-active: rgb(21.5568627451%, 70.7058823529%, 92.8392156863%);
+    --fanui-primary-vivid: #38bdf8;
+    --fanui-primary-vivid-2: #7dd3fc;
+    --fanui-primary-soft: rgba(56, 189, 248, 0.16);
+    --fanui-primary-soft-2: rgba(56, 189, 248, 0.26);
+    --fanui-primary-border: rgba(56, 189, 248, 0.38);
+    --fanui-primary-ink: #bae6fd;
+    --fanui-primary-ring: rgba(56, 189, 248, 0.3);
+    --fanui-primary-glow: rgba(56, 189, 248, 0.42);
+    --fanui-primary-grad-a: #38bdf8;
+    --fanui-primary-grad-b: #7dd3fc;
+    --fanui-primary-50: #f0f9ff;
+    --fanui-primary-100: #e0f2fe;
+    --fanui-primary-200: #bae6fd;
+    --fanui-primary-300: #7dd3fc;
+    --fanui-primary-400: #38bdf8;
+    --fanui-primary-500: #0ea5e9;
+    --fanui-primary-600: #0284c7;
+    --fanui-primary-700: #0369a1;
+    --fanui-primary-800: #075985;
+    --fanui-primary-900: #0c4a6e;
+    --fanui-primary-950: #082f49;
+    --fanui-accent: #a78bfa;
+    --fanui-accent-fg: #0b1220;
+    --fanui-accent-hover: rgb(68.5960784314%, 58.6039215686%, 98.2156862745%);
+    --fanui-accent-active: rgb(71.3568627451%, 62.2431372549%, 98.3725490196%);
+    --fanui-accent-vivid: #a78bfa;
+    --fanui-accent-vivid-2: #c4b5fd;
+    --fanui-accent-soft: rgba(167, 139, 250, 0.16);
+    --fanui-accent-soft-2: rgba(167, 139, 250, 0.26);
+    --fanui-accent-border: rgba(167, 139, 250, 0.38);
+    --fanui-accent-ink: #ddd6fe;
+    --fanui-accent-ring: rgba(167, 139, 250, 0.3);
+    --fanui-accent-glow: rgba(167, 139, 250, 0.42);
+    --fanui-accent-grad-a: #a78bfa;
+    --fanui-accent-grad-b: #c4b5fd;
+    --fanui-accent-50: #f5f3ff;
+    --fanui-accent-100: #ede9fe;
+    --fanui-accent-200: #ddd6fe;
+    --fanui-accent-300: #c4b5fd;
+    --fanui-accent-400: #a78bfa;
+    --fanui-accent-500: #8b5cf6;
+    --fanui-accent-600: #7c3aed;
+    --fanui-accent-700: #6d28d9;
+    --fanui-accent-800: #5b21b6;
+    --fanui-accent-900: #4c1d95;
+    --fanui-accent-950: #2e1065;
+    --fanui-brand-grad-a: var(--fanui-primary-vivid);
+    --fanui-brand-grad-b: var(--fanui-accent-vivid);
+    --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+    --fanui-brand-grad-soft: linear-gradient(
+      120deg,
+      rgba(56, 189, 248, 0.16),
+      rgba(167, 139, 250, 0.14)
+    );
+    --fanui-brand-aura-a: rgba(56, 189, 248, 0.38);
+    --fanui-brand-aura-b: rgba(167, 139, 250, 0.3);
+    --fanui-brand-name: "sky";
+  }
+  [data-fanui-theme=auto][data-fanui-accent=blue],
+  [data-fanui-theme=auto] [data-fanui-accent=blue],
+  [data-fanui-theme=auto] .fanui-accent-blue {
+    --fanui-primary: #3b82f6;
+    --fanui-primary-fg: #0b1220;
+    --fanui-primary-hover: rgb(30.0549019608%, 55.3921568627%, 96.7882352941%);
+    --fanui-primary-active: rgb(36.2039215686%, 59.3137254902%, 97.0705882353%);
+    --fanui-primary-vivid: #60a5fa;
+    --fanui-primary-vivid-2: #93c5fd;
+    --fanui-primary-soft: rgba(96, 165, 250, 0.16);
+    --fanui-primary-soft-2: rgba(96, 165, 250, 0.26);
+    --fanui-primary-border: rgba(96, 165, 250, 0.38);
+    --fanui-primary-ink: #bfdbfe;
+    --fanui-primary-ring: rgba(96, 165, 250, 0.3);
+    --fanui-primary-glow: rgba(96, 165, 250, 0.42);
+    --fanui-primary-grad-a: #60a5fa;
+    --fanui-primary-grad-b: #93c5fd;
+    --fanui-primary-50: #eff6ff;
+    --fanui-primary-100: #dbeafe;
+    --fanui-primary-200: #bfdbfe;
+    --fanui-primary-300: #93c5fd;
+    --fanui-primary-400: #60a5fa;
+    --fanui-primary-500: #3b82f6;
+    --fanui-primary-600: #2563eb;
+    --fanui-primary-700: #1d4ed8;
+    --fanui-primary-800: #1e40af;
+    --fanui-primary-900: #1e3a8a;
+    --fanui-primary-950: #172554;
+    --fanui-accent: #06b6d4;
+    --fanui-accent-fg: #0b1220;
+    --fanui-accent-hover: rgb(11.1411764706%, 73.9490196078%, 84.6549019608%);
+    --fanui-accent-active: rgb(18.9529411765%, 76.2392156863%, 86.0039215686%);
+    --fanui-accent-vivid: #22d3ee;
+    --fanui-accent-vivid-2: #67e8f9;
+    --fanui-accent-soft: rgba(34, 211, 238, 0.16);
+    --fanui-accent-soft-2: rgba(34, 211, 238, 0.26);
+    --fanui-accent-border: rgba(34, 211, 238, 0.38);
+    --fanui-accent-ink: #a5f3fc;
+    --fanui-accent-ring: rgba(34, 211, 238, 0.3);
+    --fanui-accent-glow: rgba(34, 211, 238, 0.42);
+    --fanui-accent-grad-a: #22d3ee;
+    --fanui-accent-grad-b: #67e8f9;
+    --fanui-accent-50: #ecfeff;
+    --fanui-accent-100: #cffafe;
+    --fanui-accent-200: #a5f3fc;
+    --fanui-accent-300: #67e8f9;
+    --fanui-accent-400: #22d3ee;
+    --fanui-accent-500: #06b6d4;
+    --fanui-accent-600: #0891b2;
+    --fanui-accent-700: #0e7490;
+    --fanui-accent-800: #155e75;
+    --fanui-accent-900: #164e63;
+    --fanui-accent-950: #083344;
+    --fanui-brand-grad-a: var(--fanui-primary-vivid);
+    --fanui-brand-grad-b: var(--fanui-accent-vivid);
+    --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+    --fanui-brand-grad-soft: linear-gradient(
+      120deg,
+      rgba(96, 165, 250, 0.16),
+      rgba(34, 211, 238, 0.14)
+    );
+    --fanui-brand-aura-a: rgba(96, 165, 250, 0.38);
+    --fanui-brand-aura-b: rgba(34, 211, 238, 0.3);
+    --fanui-brand-name: "blue";
+  }
+  [data-fanui-theme=auto][data-fanui-accent=indigo],
+  [data-fanui-theme=auto] [data-fanui-accent=indigo],
+  [data-fanui-theme=auto] .fanui-accent-indigo {
+    --fanui-primary: #818cf8;
+    --fanui-primary-fg: #0b1220;
+    --fanui-primary-hover: rgb(55.0352941176%, 58.9607843137%, 97.5019607843%);
+    --fanui-primary-active: rgb(58.9882352941%, 62.568627451%, 97.7215686275%);
+    --fanui-primary-vivid: #818cf8;
+    --fanui-primary-vivid-2: #a5b4fc;
+    --fanui-primary-soft: rgba(129, 140, 248, 0.16);
+    --fanui-primary-soft-2: rgba(129, 140, 248, 0.26);
+    --fanui-primary-border: rgba(129, 140, 248, 0.38);
+    --fanui-primary-ink: #c7d2fe;
+    --fanui-primary-ring: rgba(129, 140, 248, 0.3);
+    --fanui-primary-glow: rgba(129, 140, 248, 0.42);
+    --fanui-primary-grad-a: #818cf8;
+    --fanui-primary-grad-b: #a5b4fc;
+    --fanui-primary-50: #eef2ff;
+    --fanui-primary-100: #e0e7ff;
+    --fanui-primary-200: #c7d2fe;
+    --fanui-primary-300: #a5b4fc;
+    --fanui-primary-400: #818cf8;
+    --fanui-primary-500: #6366f1;
+    --fanui-primary-600: #4f46e5;
+    --fanui-primary-700: #4338ca;
+    --fanui-primary-800: #3730a3;
+    --fanui-primary-900: #312e81;
+    --fanui-primary-950: #1e1b4b;
+    --fanui-accent: #06b6d4;
+    --fanui-accent-fg: #0b1220;
+    --fanui-accent-hover: rgb(11.1411764706%, 73.9490196078%, 84.6549019608%);
+    --fanui-accent-active: rgb(18.9529411765%, 76.2392156863%, 86.0039215686%);
+    --fanui-accent-vivid: #22d3ee;
+    --fanui-accent-vivid-2: #67e8f9;
+    --fanui-accent-soft: rgba(34, 211, 238, 0.16);
+    --fanui-accent-soft-2: rgba(34, 211, 238, 0.26);
+    --fanui-accent-border: rgba(34, 211, 238, 0.38);
+    --fanui-accent-ink: #a5f3fc;
+    --fanui-accent-ring: rgba(34, 211, 238, 0.3);
+    --fanui-accent-glow: rgba(34, 211, 238, 0.42);
+    --fanui-accent-grad-a: #22d3ee;
+    --fanui-accent-grad-b: #67e8f9;
+    --fanui-accent-50: #ecfeff;
+    --fanui-accent-100: #cffafe;
+    --fanui-accent-200: #a5f3fc;
+    --fanui-accent-300: #67e8f9;
+    --fanui-accent-400: #22d3ee;
+    --fanui-accent-500: #06b6d4;
+    --fanui-accent-600: #0891b2;
+    --fanui-accent-700: #0e7490;
+    --fanui-accent-800: #155e75;
+    --fanui-accent-900: #164e63;
+    --fanui-accent-950: #083344;
+    --fanui-brand-grad-a: var(--fanui-primary-vivid);
+    --fanui-brand-grad-b: var(--fanui-accent-vivid);
+    --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+    --fanui-brand-grad-soft: linear-gradient(
+      120deg,
+      rgba(129, 140, 248, 0.16),
+      rgba(34, 211, 238, 0.14)
+    );
+    --fanui-brand-aura-a: rgba(129, 140, 248, 0.38);
+    --fanui-brand-aura-b: rgba(34, 211, 238, 0.3);
+    --fanui-brand-name: "indigo";
+  }
+  [data-fanui-theme=auto][data-fanui-accent=violet],
+  [data-fanui-theme=auto] [data-fanui-accent=violet],
+  [data-fanui-theme=auto] .fanui-accent-violet {
+    --fanui-primary: #a78bfa;
+    --fanui-primary-fg: #0b1220;
+    --fanui-primary-hover: rgb(68.5960784314%, 58.6039215686%, 98.2156862745%);
+    --fanui-primary-active: rgb(71.3568627451%, 62.2431372549%, 98.3725490196%);
+    --fanui-primary-vivid: #a78bfa;
+    --fanui-primary-vivid-2: #c4b5fd;
+    --fanui-primary-soft: rgba(167, 139, 250, 0.16);
+    --fanui-primary-soft-2: rgba(167, 139, 250, 0.26);
+    --fanui-primary-border: rgba(167, 139, 250, 0.38);
+    --fanui-primary-ink: #ddd6fe;
+    --fanui-primary-ring: rgba(167, 139, 250, 0.3);
+    --fanui-primary-glow: rgba(167, 139, 250, 0.42);
+    --fanui-primary-grad-a: #a78bfa;
+    --fanui-primary-grad-b: #c4b5fd;
+    --fanui-primary-50: #f5f3ff;
+    --fanui-primary-100: #ede9fe;
+    --fanui-primary-200: #ddd6fe;
+    --fanui-primary-300: #c4b5fd;
+    --fanui-primary-400: #a78bfa;
+    --fanui-primary-500: #8b5cf6;
+    --fanui-primary-600: #7c3aed;
+    --fanui-primary-700: #6d28d9;
+    --fanui-primary-800: #5b21b6;
+    --fanui-primary-900: #4c1d95;
+    --fanui-primary-950: #2e1065;
+    --fanui-accent: #06b6d4;
+    --fanui-accent-fg: #0b1220;
+    --fanui-accent-hover: rgb(11.1411764706%, 73.9490196078%, 84.6549019608%);
+    --fanui-accent-active: rgb(18.9529411765%, 76.2392156863%, 86.0039215686%);
+    --fanui-accent-vivid: #22d3ee;
+    --fanui-accent-vivid-2: #67e8f9;
+    --fanui-accent-soft: rgba(34, 211, 238, 0.16);
+    --fanui-accent-soft-2: rgba(34, 211, 238, 0.26);
+    --fanui-accent-border: rgba(34, 211, 238, 0.38);
+    --fanui-accent-ink: #a5f3fc;
+    --fanui-accent-ring: rgba(34, 211, 238, 0.3);
+    --fanui-accent-glow: rgba(34, 211, 238, 0.42);
+    --fanui-accent-grad-a: #22d3ee;
+    --fanui-accent-grad-b: #67e8f9;
+    --fanui-accent-50: #ecfeff;
+    --fanui-accent-100: #cffafe;
+    --fanui-accent-200: #a5f3fc;
+    --fanui-accent-300: #67e8f9;
+    --fanui-accent-400: #22d3ee;
+    --fanui-accent-500: #06b6d4;
+    --fanui-accent-600: #0891b2;
+    --fanui-accent-700: #0e7490;
+    --fanui-accent-800: #155e75;
+    --fanui-accent-900: #164e63;
+    --fanui-accent-950: #083344;
+    --fanui-brand-grad-a: var(--fanui-primary-vivid);
+    --fanui-brand-grad-b: var(--fanui-accent-vivid);
+    --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+    --fanui-brand-grad-soft: linear-gradient(
+      120deg,
+      rgba(167, 139, 250, 0.16),
+      rgba(34, 211, 238, 0.14)
+    );
+    --fanui-brand-aura-a: rgba(167, 139, 250, 0.38);
+    --fanui-brand-aura-b: rgba(34, 211, 238, 0.3);
+    --fanui-brand-name: "violet";
+  }
+  [data-fanui-theme=auto][data-fanui-accent=purple],
+  [data-fanui-theme=auto] [data-fanui-accent=purple],
+  [data-fanui-theme=auto] .fanui-accent-purple {
+    --fanui-primary: #a855f7;
+    --fanui-primary-fg: #0b1220;
+    --fanui-primary-hover: rgb(68.9529411765%, 39.3333333333%, 97.1450980392%);
+    --fanui-primary-active: rgb(71.6823529412%, 44.6666666667%, 97.3960784314%);
+    --fanui-primary-vivid: #c084fc;
+    --fanui-primary-vivid-2: #d8b4fe;
+    --fanui-primary-soft: rgba(192, 132, 252, 0.16);
+    --fanui-primary-soft-2: rgba(192, 132, 252, 0.26);
+    --fanui-primary-border: rgba(192, 132, 252, 0.38);
+    --fanui-primary-ink: #e9d5ff;
+    --fanui-primary-ring: rgba(192, 132, 252, 0.3);
+    --fanui-primary-glow: rgba(192, 132, 252, 0.42);
+    --fanui-primary-grad-a: #c084fc;
+    --fanui-primary-grad-b: #d8b4fe;
+    --fanui-primary-50: #faf5ff;
+    --fanui-primary-100: #f3e8ff;
+    --fanui-primary-200: #e9d5ff;
+    --fanui-primary-300: #d8b4fe;
+    --fanui-primary-400: #c084fc;
+    --fanui-primary-500: #a855f7;
+    --fanui-primary-600: #9333ea;
+    --fanui-primary-700: #7e22ce;
+    --fanui-primary-800: #6b21a8;
+    --fanui-primary-900: #581c87;
+    --fanui-primary-950: #3b0764;
+    --fanui-accent: #ec4899;
+    --fanui-accent-fg: #0b1220;
+    --fanui-accent-hover: rgb(93.2196078431%, 34.6941176471%, 63.6%);
+    --fanui-accent-active: rgb(93.8156862745%, 40.4352941176%, 66.8%);
+    --fanui-accent-vivid: #f472b6;
+    --fanui-accent-vivid-2: #f9a8d4;
+    --fanui-accent-soft: rgba(244, 114, 182, 0.16);
+    --fanui-accent-soft-2: rgba(244, 114, 182, 0.26);
+    --fanui-accent-border: rgba(244, 114, 182, 0.38);
+    --fanui-accent-ink: #fbcfe8;
+    --fanui-accent-ring: rgba(244, 114, 182, 0.3);
+    --fanui-accent-glow: rgba(244, 114, 182, 0.42);
+    --fanui-accent-grad-a: #f472b6;
+    --fanui-accent-grad-b: #f9a8d4;
+    --fanui-accent-50: #fdf2f8;
+    --fanui-accent-100: #fce7f3;
+    --fanui-accent-200: #fbcfe8;
+    --fanui-accent-300: #f9a8d4;
+    --fanui-accent-400: #f472b6;
+    --fanui-accent-500: #ec4899;
+    --fanui-accent-600: #db2777;
+    --fanui-accent-700: #be185d;
+    --fanui-accent-800: #9d174d;
+    --fanui-accent-900: #831843;
+    --fanui-accent-950: #500724;
+    --fanui-brand-grad-a: var(--fanui-primary-vivid);
+    --fanui-brand-grad-b: var(--fanui-accent-vivid);
+    --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+    --fanui-brand-grad-soft: linear-gradient(
+      120deg,
+      rgba(192, 132, 252, 0.16),
+      rgba(244, 114, 182, 0.14)
+    );
+    --fanui-brand-aura-a: rgba(192, 132, 252, 0.38);
+    --fanui-brand-aura-b: rgba(244, 114, 182, 0.3);
+    --fanui-brand-name: "purple";
+  }
+  [data-fanui-theme=auto][data-fanui-accent=pink],
+  [data-fanui-theme=auto] [data-fanui-accent=pink],
+  [data-fanui-theme=auto] .fanui-accent-pink {
+    --fanui-primary: #ec4899;
+    --fanui-primary-fg: #0b1220;
+    --fanui-primary-hover: rgb(93.2196078431%, 34.6941176471%, 63.6%);
+    --fanui-primary-active: rgb(93.8156862745%, 40.4352941176%, 66.8%);
+    --fanui-primary-vivid: #f472b6;
+    --fanui-primary-vivid-2: #f9a8d4;
+    --fanui-primary-soft: rgba(244, 114, 182, 0.16);
+    --fanui-primary-soft-2: rgba(244, 114, 182, 0.26);
+    --fanui-primary-border: rgba(244, 114, 182, 0.38);
+    --fanui-primary-ink: #fbcfe8;
+    --fanui-primary-ring: rgba(244, 114, 182, 0.3);
+    --fanui-primary-glow: rgba(244, 114, 182, 0.42);
+    --fanui-primary-grad-a: #f472b6;
+    --fanui-primary-grad-b: #f9a8d4;
+    --fanui-primary-50: #fdf2f8;
+    --fanui-primary-100: #fce7f3;
+    --fanui-primary-200: #fbcfe8;
+    --fanui-primary-300: #f9a8d4;
+    --fanui-primary-400: #f472b6;
+    --fanui-primary-500: #ec4899;
+    --fanui-primary-600: #db2777;
+    --fanui-primary-700: #be185d;
+    --fanui-primary-800: #9d174d;
+    --fanui-primary-900: #831843;
+    --fanui-primary-950: #500724;
+    --fanui-accent: #a78bfa;
+    --fanui-accent-fg: #0b1220;
+    --fanui-accent-hover: rgb(68.5960784314%, 58.6039215686%, 98.2156862745%);
+    --fanui-accent-active: rgb(71.3568627451%, 62.2431372549%, 98.3725490196%);
+    --fanui-accent-vivid: #a78bfa;
+    --fanui-accent-vivid-2: #c4b5fd;
+    --fanui-accent-soft: rgba(167, 139, 250, 0.16);
+    --fanui-accent-soft-2: rgba(167, 139, 250, 0.26);
+    --fanui-accent-border: rgba(167, 139, 250, 0.38);
+    --fanui-accent-ink: #ddd6fe;
+    --fanui-accent-ring: rgba(167, 139, 250, 0.3);
+    --fanui-accent-glow: rgba(167, 139, 250, 0.42);
+    --fanui-accent-grad-a: #a78bfa;
+    --fanui-accent-grad-b: #c4b5fd;
+    --fanui-accent-50: #f5f3ff;
+    --fanui-accent-100: #ede9fe;
+    --fanui-accent-200: #ddd6fe;
+    --fanui-accent-300: #c4b5fd;
+    --fanui-accent-400: #a78bfa;
+    --fanui-accent-500: #8b5cf6;
+    --fanui-accent-600: #7c3aed;
+    --fanui-accent-700: #6d28d9;
+    --fanui-accent-800: #5b21b6;
+    --fanui-accent-900: #4c1d95;
+    --fanui-accent-950: #2e1065;
+    --fanui-brand-grad-a: var(--fanui-primary-vivid);
+    --fanui-brand-grad-b: var(--fanui-accent-vivid);
+    --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+    --fanui-brand-grad-soft: linear-gradient(
+      120deg,
+      rgba(244, 114, 182, 0.16),
+      rgba(167, 139, 250, 0.14)
+    );
+    --fanui-brand-aura-a: rgba(244, 114, 182, 0.38);
+    --fanui-brand-aura-b: rgba(167, 139, 250, 0.3);
+    --fanui-brand-name: "pink";
+  }
+  [data-fanui-theme=auto][data-fanui-accent=rose],
+  [data-fanui-theme=auto] [data-fanui-accent=rose],
+  [data-fanui-theme=auto] .fanui-accent-rose {
+    --fanui-primary: #f43f5e;
+    --fanui-primary-fg: #0b1220;
+    --fanui-primary-hover: rgb(96.0745098039%, 31.4823529412%, 42.5450980392%);
+    --fanui-primary-active: rgb(96.4196078431%, 37.5058823529%, 47.5960784314%);
+    --fanui-primary-vivid: #fb7185;
+    --fanui-primary-vivid-2: #fda4af;
+    --fanui-primary-soft: rgba(251, 113, 133, 0.16);
+    --fanui-primary-soft-2: rgba(251, 113, 133, 0.26);
+    --fanui-primary-border: rgba(251, 113, 133, 0.38);
+    --fanui-primary-ink: #fecdd3;
+    --fanui-primary-ring: rgba(251, 113, 133, 0.3);
+    --fanui-primary-glow: rgba(251, 113, 133, 0.42);
+    --fanui-primary-grad-a: #fb7185;
+    --fanui-primary-grad-b: #fda4af;
+    --fanui-primary-50: #fff1f2;
+    --fanui-primary-100: #ffe4e6;
+    --fanui-primary-200: #fecdd3;
+    --fanui-primary-300: #fda4af;
+    --fanui-primary-400: #fb7185;
+    --fanui-primary-500: #f43f5e;
+    --fanui-primary-600: #e11d48;
+    --fanui-primary-700: #be123c;
+    --fanui-primary-800: #9f1239;
+    --fanui-primary-900: #881337;
+    --fanui-primary-950: #4c0519;
+    --fanui-accent: #f97316;
+    --fanui-accent-fg: #0b1220;
+    --fanui-accent-hover: rgb(97.8588235294%, 50.0392156863%, 16.8509803922%);
+    --fanui-accent-active: rgb(98.0470588235%, 54.431372549%, 24.1607843137%);
+    --fanui-accent-vivid: #fb923c;
+    --fanui-accent-vivid-2: #fdba74;
+    --fanui-accent-soft: rgba(251, 146, 60, 0.16);
+    --fanui-accent-soft-2: rgba(251, 146, 60, 0.26);
+    --fanui-accent-border: rgba(251, 146, 60, 0.38);
+    --fanui-accent-ink: #fed7aa;
+    --fanui-accent-ring: rgba(251, 146, 60, 0.3);
+    --fanui-accent-glow: rgba(251, 146, 60, 0.42);
+    --fanui-accent-grad-a: #fb923c;
+    --fanui-accent-grad-b: #fdba74;
+    --fanui-accent-50: #fff7ed;
+    --fanui-accent-100: #ffedd5;
+    --fanui-accent-200: #fed7aa;
+    --fanui-accent-300: #fdba74;
+    --fanui-accent-400: #fb923c;
+    --fanui-accent-500: #f97316;
+    --fanui-accent-600: #ea580c;
+    --fanui-accent-700: #c2410c;
+    --fanui-accent-800: #9a3412;
+    --fanui-accent-900: #7c2d12;
+    --fanui-accent-950: #431407;
+    --fanui-brand-grad-a: var(--fanui-primary-vivid);
+    --fanui-brand-grad-b: var(--fanui-accent-vivid);
+    --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+    --fanui-brand-grad-soft: linear-gradient(
+      120deg,
+      rgba(251, 113, 133, 0.16),
+      rgba(251, 146, 60, 0.14)
+    );
+    --fanui-brand-aura-a: rgba(251, 113, 133, 0.38);
+    --fanui-brand-aura-b: rgba(251, 146, 60, 0.3);
+    --fanui-brand-name: "rose";
+  }
+  [data-fanui-theme=auto][data-fanui-accent=red],
+  [data-fanui-theme=auto] [data-fanui-accent=red],
+  [data-fanui-theme=auto] .fanui-accent-red {
+    --fanui-primary: #ef4444;
+    --fanui-primary-fg: #0b1220;
+    --fanui-primary-hover: rgb(94.2901960784%, 33.2666666667%, 33.2666666667%);
+    --fanui-primary-active: rgb(94.7921568627%, 39.1333333333%, 39.1333333333%);
+    --fanui-primary-vivid: #f87171;
+    --fanui-primary-vivid-2: #fca5a5;
+    --fanui-primary-soft: rgba(248, 113, 113, 0.16);
+    --fanui-primary-soft-2: rgba(248, 113, 113, 0.26);
+    --fanui-primary-border: rgba(248, 113, 113, 0.38);
+    --fanui-primary-ink: #fecaca;
+    --fanui-primary-ring: rgba(248, 113, 113, 0.3);
+    --fanui-primary-glow: rgba(248, 113, 113, 0.42);
+    --fanui-primary-grad-a: #f87171;
+    --fanui-primary-grad-b: #fca5a5;
+    --fanui-primary-50: #fef2f2;
+    --fanui-primary-100: #fee2e2;
+    --fanui-primary-200: #fecaca;
+    --fanui-primary-300: #fca5a5;
+    --fanui-primary-400: #f87171;
+    --fanui-primary-500: #ef4444;
+    --fanui-primary-600: #dc2626;
+    --fanui-primary-700: #b91c1c;
+    --fanui-primary-800: #991b1b;
+    --fanui-primary-900: #7f1d1d;
+    --fanui-primary-950: #450a0a;
+    --fanui-accent: #f43f5e;
+    --fanui-accent-fg: #0b1220;
+    --fanui-accent-hover: rgb(96.0745098039%, 31.4823529412%, 42.5450980392%);
+    --fanui-accent-active: rgb(96.4196078431%, 37.5058823529%, 47.5960784314%);
+    --fanui-accent-vivid: #fb7185;
+    --fanui-accent-vivid-2: #fda4af;
+    --fanui-accent-soft: rgba(251, 113, 133, 0.16);
+    --fanui-accent-soft-2: rgba(251, 113, 133, 0.26);
+    --fanui-accent-border: rgba(251, 113, 133, 0.38);
+    --fanui-accent-ink: #fecdd3;
+    --fanui-accent-ring: rgba(251, 113, 133, 0.3);
+    --fanui-accent-glow: rgba(251, 113, 133, 0.42);
+    --fanui-accent-grad-a: #fb7185;
+    --fanui-accent-grad-b: #fda4af;
+    --fanui-accent-50: #fff1f2;
+    --fanui-accent-100: #ffe4e6;
+    --fanui-accent-200: #fecdd3;
+    --fanui-accent-300: #fda4af;
+    --fanui-accent-400: #fb7185;
+    --fanui-accent-500: #f43f5e;
+    --fanui-accent-600: #e11d48;
+    --fanui-accent-700: #be123c;
+    --fanui-accent-800: #9f1239;
+    --fanui-accent-900: #881337;
+    --fanui-accent-950: #4c0519;
+    --fanui-brand-grad-a: var(--fanui-primary-vivid);
+    --fanui-brand-grad-b: var(--fanui-accent-vivid);
+    --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+    --fanui-brand-grad-soft: linear-gradient(
+      120deg,
+      rgba(248, 113, 113, 0.16),
+      rgba(251, 113, 133, 0.14)
+    );
+    --fanui-brand-aura-a: rgba(248, 113, 113, 0.38);
+    --fanui-brand-aura-b: rgba(251, 113, 133, 0.3);
+    --fanui-brand-name: "red";
+  }
+  [data-fanui-theme=auto][data-fanui-accent=orange],
+  [data-fanui-theme=auto] [data-fanui-accent=orange],
+  [data-fanui-theme=auto] .fanui-accent-orange {
+    --fanui-primary: #f97316;
+    --fanui-primary-fg: #0b1220;
+    --fanui-primary-hover: rgb(97.8588235294%, 50.0392156863%, 16.8509803922%);
+    --fanui-primary-active: rgb(98.0470588235%, 54.431372549%, 24.1607843137%);
+    --fanui-primary-vivid: #fb923c;
+    --fanui-primary-vivid-2: #fdba74;
+    --fanui-primary-soft: rgba(251, 146, 60, 0.16);
+    --fanui-primary-soft-2: rgba(251, 146, 60, 0.26);
+    --fanui-primary-border: rgba(251, 146, 60, 0.38);
+    --fanui-primary-ink: #fed7aa;
+    --fanui-primary-ring: rgba(251, 146, 60, 0.3);
+    --fanui-primary-glow: rgba(251, 146, 60, 0.42);
+    --fanui-primary-grad-a: #fb923c;
+    --fanui-primary-grad-b: #fdba74;
+    --fanui-primary-50: #fff7ed;
+    --fanui-primary-100: #ffedd5;
+    --fanui-primary-200: #fed7aa;
+    --fanui-primary-300: #fdba74;
+    --fanui-primary-400: #fb923c;
+    --fanui-primary-500: #f97316;
+    --fanui-primary-600: #ea580c;
+    --fanui-primary-700: #c2410c;
+    --fanui-primary-800: #9a3412;
+    --fanui-primary-900: #7c2d12;
+    --fanui-primary-950: #431407;
+    --fanui-accent: #ec4899;
+    --fanui-accent-fg: #0b1220;
+    --fanui-accent-hover: rgb(93.2196078431%, 34.6941176471%, 63.6%);
+    --fanui-accent-active: rgb(93.8156862745%, 40.4352941176%, 66.8%);
+    --fanui-accent-vivid: #f472b6;
+    --fanui-accent-vivid-2: #f9a8d4;
+    --fanui-accent-soft: rgba(244, 114, 182, 0.16);
+    --fanui-accent-soft-2: rgba(244, 114, 182, 0.26);
+    --fanui-accent-border: rgba(244, 114, 182, 0.38);
+    --fanui-accent-ink: #fbcfe8;
+    --fanui-accent-ring: rgba(244, 114, 182, 0.3);
+    --fanui-accent-glow: rgba(244, 114, 182, 0.42);
+    --fanui-accent-grad-a: #f472b6;
+    --fanui-accent-grad-b: #f9a8d4;
+    --fanui-accent-50: #fdf2f8;
+    --fanui-accent-100: #fce7f3;
+    --fanui-accent-200: #fbcfe8;
+    --fanui-accent-300: #f9a8d4;
+    --fanui-accent-400: #f472b6;
+    --fanui-accent-500: #ec4899;
+    --fanui-accent-600: #db2777;
+    --fanui-accent-700: #be185d;
+    --fanui-accent-800: #9d174d;
+    --fanui-accent-900: #831843;
+    --fanui-accent-950: #500724;
+    --fanui-brand-grad-a: var(--fanui-primary-vivid);
+    --fanui-brand-grad-b: var(--fanui-accent-vivid);
+    --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+    --fanui-brand-grad-soft: linear-gradient(
+      120deg,
+      rgba(251, 146, 60, 0.16),
+      rgba(244, 114, 182, 0.14)
+    );
+    --fanui-brand-aura-a: rgba(251, 146, 60, 0.38);
+    --fanui-brand-aura-b: rgba(244, 114, 182, 0.3);
+    --fanui-brand-name: "orange";
+  }
+  [data-fanui-theme=auto][data-fanui-accent=emerald],
+  [data-fanui-theme=auto] [data-fanui-accent=emerald],
+  [data-fanui-theme=auto] .fanui-accent-emerald {
+    --fanui-primary: #10b981;
+    --fanui-primary-fg: #0b1220;
+    --fanui-primary-hover: rgb(14.7098039216%, 75.0196078431%, 55.0352941176%);
+    --fanui-primary-active: rgb(22.2078431373%, 77.2156862745%, 58.9882352941%);
+    --fanui-primary-vivid: #34d399;
+    --fanui-primary-vivid-2: #6ee7b7;
+    --fanui-primary-soft: rgba(52, 211, 153, 0.16);
+    --fanui-primary-soft-2: rgba(52, 211, 153, 0.26);
+    --fanui-primary-border: rgba(52, 211, 153, 0.38);
+    --fanui-primary-ink: #a7f3d0;
+    --fanui-primary-ring: rgba(52, 211, 153, 0.3);
+    --fanui-primary-glow: rgba(52, 211, 153, 0.42);
+    --fanui-primary-grad-a: #34d399;
+    --fanui-primary-grad-b: #6ee7b7;
+    --fanui-primary-50: #ecfdf5;
+    --fanui-primary-100: #d1fae5;
+    --fanui-primary-200: #a7f3d0;
+    --fanui-primary-300: #6ee7b7;
+    --fanui-primary-400: #34d399;
+    --fanui-primary-500: #10b981;
+    --fanui-primary-600: #059669;
+    --fanui-primary-700: #047857;
+    --fanui-primary-800: #065f46;
+    --fanui-primary-900: #064e3b;
+    --fanui-primary-950: #022c22;
+    --fanui-accent: #06b6d4;
+    --fanui-accent-fg: #0b1220;
+    --fanui-accent-hover: rgb(11.1411764706%, 73.9490196078%, 84.6549019608%);
+    --fanui-accent-active: rgb(18.9529411765%, 76.2392156863%, 86.0039215686%);
+    --fanui-accent-vivid: #22d3ee;
+    --fanui-accent-vivid-2: #67e8f9;
+    --fanui-accent-soft: rgba(34, 211, 238, 0.16);
+    --fanui-accent-soft-2: rgba(34, 211, 238, 0.26);
+    --fanui-accent-border: rgba(34, 211, 238, 0.38);
+    --fanui-accent-ink: #a5f3fc;
+    --fanui-accent-ring: rgba(34, 211, 238, 0.3);
+    --fanui-accent-glow: rgba(34, 211, 238, 0.42);
+    --fanui-accent-grad-a: #22d3ee;
+    --fanui-accent-grad-b: #67e8f9;
+    --fanui-accent-50: #ecfeff;
+    --fanui-accent-100: #cffafe;
+    --fanui-accent-200: #a5f3fc;
+    --fanui-accent-300: #67e8f9;
+    --fanui-accent-400: #22d3ee;
+    --fanui-accent-500: #06b6d4;
+    --fanui-accent-600: #0891b2;
+    --fanui-accent-700: #0e7490;
+    --fanui-accent-800: #155e75;
+    --fanui-accent-900: #164e63;
+    --fanui-accent-950: #083344;
+    --fanui-brand-grad-a: var(--fanui-primary-vivid);
+    --fanui-brand-grad-b: var(--fanui-accent-vivid);
+    --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+    --fanui-brand-grad-soft: linear-gradient(
+      120deg,
+      rgba(52, 211, 153, 0.16),
+      rgba(34, 211, 238, 0.14)
+    );
+    --fanui-brand-aura-a: rgba(52, 211, 153, 0.38);
+    --fanui-brand-aura-b: rgba(34, 211, 238, 0.3);
+    --fanui-brand-name: "emerald";
+  }
+  [data-fanui-theme=auto][data-fanui-accent=teal],
+  [data-fanui-theme=auto] [data-fanui-accent=teal],
+  [data-fanui-theme=auto] .fanui-accent-teal {
+    --fanui-primary: #14b8a6;
+    --fanui-primary-fg: #0b1220;
+    --fanui-primary-hover: rgb(16.137254902%, 74.662745098%, 68.2392156863%);
+    --fanui-primary-active: rgb(23.5098039216%, 76.8901960784%, 71.031372549%);
+    --fanui-primary-vivid: #2dd4bf;
+    --fanui-primary-vivid-2: #5eead4;
+    --fanui-primary-soft: rgba(45, 212, 191, 0.16);
+    --fanui-primary-soft-2: rgba(45, 212, 191, 0.26);
+    --fanui-primary-border: rgba(45, 212, 191, 0.38);
+    --fanui-primary-ink: #99f6e4;
+    --fanui-primary-ring: rgba(45, 212, 191, 0.3);
+    --fanui-primary-glow: rgba(45, 212, 191, 0.42);
+    --fanui-primary-grad-a: #2dd4bf;
+    --fanui-primary-grad-b: #5eead4;
+    --fanui-primary-50: #f0fdfa;
+    --fanui-primary-100: #ccfbf1;
+    --fanui-primary-200: #99f6e4;
+    --fanui-primary-300: #5eead4;
+    --fanui-primary-400: #2dd4bf;
+    --fanui-primary-500: #14b8a6;
+    --fanui-primary-600: #0d9488;
+    --fanui-primary-700: #0f766e;
+    --fanui-primary-800: #115e59;
+    --fanui-primary-900: #134e4a;
+    --fanui-primary-950: #042f2e;
+    --fanui-accent: #10b981;
+    --fanui-accent-fg: #0b1220;
+    --fanui-accent-hover: rgb(14.7098039216%, 75.0196078431%, 55.0352941176%);
+    --fanui-accent-active: rgb(22.2078431373%, 77.2156862745%, 58.9882352941%);
+    --fanui-accent-vivid: #34d399;
+    --fanui-accent-vivid-2: #6ee7b7;
+    --fanui-accent-soft: rgba(52, 211, 153, 0.16);
+    --fanui-accent-soft-2: rgba(52, 211, 153, 0.26);
+    --fanui-accent-border: rgba(52, 211, 153, 0.38);
+    --fanui-accent-ink: #a7f3d0;
+    --fanui-accent-ring: rgba(52, 211, 153, 0.3);
+    --fanui-accent-glow: rgba(52, 211, 153, 0.42);
+    --fanui-accent-grad-a: #34d399;
+    --fanui-accent-grad-b: #6ee7b7;
+    --fanui-accent-50: #ecfdf5;
+    --fanui-accent-100: #d1fae5;
+    --fanui-accent-200: #a7f3d0;
+    --fanui-accent-300: #6ee7b7;
+    --fanui-accent-400: #34d399;
+    --fanui-accent-500: #10b981;
+    --fanui-accent-600: #059669;
+    --fanui-accent-700: #047857;
+    --fanui-accent-800: #065f46;
+    --fanui-accent-900: #064e3b;
+    --fanui-accent-950: #022c22;
+    --fanui-brand-grad-a: var(--fanui-primary-vivid);
+    --fanui-brand-grad-b: var(--fanui-accent-vivid);
+    --fanui-brand-grad: linear-gradient(120deg, var(--fanui-primary-vivid), var(--fanui-accent-vivid));
+    --fanui-brand-grad-soft: linear-gradient(
+      120deg,
+      rgba(45, 212, 191, 0.16),
+      rgba(52, 211, 153, 0.14)
+    );
+    --fanui-brand-aura-a: rgba(45, 212, 191, 0.38);
+    --fanui-brand-aura-b: rgba(52, 211, 153, 0.3);
+    --fanui-brand-name: "teal";
+  }
+}
+:root {
+  --fanui-success: #047857;
+  --fanui-success-fg: #ffffff;
+  --fanui-success-hover: rgb(1.4274509804%, 42.8235294118%, 31.0470588235%);
+  --fanui-success-active: rgb(1.3019607843%, 39.0588235294%, 28.3176470588%);
+  --fanui-success-vivid: #10b981;
+  --fanui-success-vivid-2: #059669;
+  --fanui-success-soft: #ecfdf5;
+  --fanui-success-soft-2: #d1fae5;
+  --fanui-success-border: #a7f3d0;
+  --fanui-success-ink: #065f46;
+  --fanui-success-ring: rgba(16, 185, 129, 0.3);
+  --fanui-success-glow: rgba(16, 185, 129, 0.42);
+  --fanui-success-grad-a: #10b981;
+  --fanui-success-grad-b: #059669;
+  --fanui-warning: #b45309;
+  --fanui-warning-fg: #ffffff;
+  --fanui-warning-hover: rgb(64.2352941176%, 29.6196078431%, 3.2117647059%);
+  --fanui-warning-active: rgb(58.5882352941%, 27.0156862745%, 2.9294117647%);
+  --fanui-warning-vivid: #f59e0b;
+  --fanui-warning-vivid-2: #d97706;
+  --fanui-warning-soft: #fffbeb;
+  --fanui-warning-soft-2: #fef3c7;
+  --fanui-warning-border: #fde68a;
+  --fanui-warning-ink: #92400e;
+  --fanui-warning-ring: rgba(245, 158, 11, 0.3);
+  --fanui-warning-glow: rgba(245, 158, 11, 0.42);
+  --fanui-warning-grad-a: #f59e0b;
+  --fanui-warning-grad-b: #d97706;
+  --fanui-danger: #b91c1c;
+  --fanui-danger-fg: #ffffff;
+  --fanui-danger-hover: rgb(66.0196078431%, 9.9921568627%, 9.9921568627%);
+  --fanui-danger-active: rgb(60.2156862745%, 9.1137254902%, 9.1137254902%);
+  --fanui-danger-vivid: #ef4444;
+  --fanui-danger-vivid-2: #dc2626;
+  --fanui-danger-soft: #fef2f2;
+  --fanui-danger-soft-2: #fee2e2;
+  --fanui-danger-border: #fecaca;
+  --fanui-danger-ink: #991b1b;
+  --fanui-danger-ring: rgba(239, 68, 68, 0.3);
+  --fanui-danger-glow: rgba(239, 68, 68, 0.42);
+  --fanui-danger-grad-a: #ef4444;
+  --fanui-danger-grad-b: #dc2626;
+  --fanui-info: #0369a1;
+  --fanui-info-fg: #ffffff;
+  --fanui-info-hover: rgb(1.0705882353%, 37.4705882353%, 57.4549019608%);
+  --fanui-info-active: rgb(0.9764705882%, 34.1764705882%, 52.4039215686%);
+  --fanui-info-vivid: #0ea5e9;
+  --fanui-info-vivid-2: #0284c7;
+  --fanui-info-soft: #f0f9ff;
+  --fanui-info-soft-2: #e0f2fe;
+  --fanui-info-border: #bae6fd;
+  --fanui-info-ink: #075985;
+  --fanui-info-ring: rgba(14, 165, 233, 0.3);
+  --fanui-info-glow: rgba(14, 165, 233, 0.42);
+  --fanui-info-grad-a: #0ea5e9;
+  --fanui-info-grad-b: #0284c7;
+}
+
+[data-fanui-theme=dark],
+:root[data-fanui-theme=dark] {
+  --fanui-success: #34d399;
+  --fanui-success-fg: #0b1220;
+  --fanui-success-hover: rgb(27.5568627451%, 84.2980392157%, 63.6%);
+  --fanui-success-active: rgb(33.9254901961%, 85.6784313725%, 66.8%);
+  --fanui-success-vivid: #34d399;
+  --fanui-success-vivid-2: #6ee7b7;
+  --fanui-success-soft: rgba(52, 211, 153, 0.16);
+  --fanui-success-soft-2: rgba(52, 211, 153, 0.26);
+  --fanui-success-border: rgba(52, 211, 153, 0.38);
+  --fanui-success-ink: #a7f3d0;
+  --fanui-success-ring: rgba(52, 211, 153, 0.3);
+  --fanui-success-glow: rgba(52, 211, 153, 0.42);
+  --fanui-success-grad-a: #34d399;
+  --fanui-success-grad-b: #6ee7b7;
+  --fanui-warning: #fbbf24;
+  --fanui-warning-fg: #0b1220;
+  --fanui-warning-hover: rgb(98.5725490196%, 77.1607843137%, 21.8470588235%);
+  --fanui-warning-active: rgb(98.6980392157%, 79.168627451%, 28.7176470588%);
+  --fanui-warning-vivid: #fbbf24;
+  --fanui-warning-vivid-2: #fcd34d;
+  --fanui-warning-soft: rgba(251, 191, 36, 0.16);
+  --fanui-warning-soft-2: rgba(251, 191, 36, 0.26);
+  --fanui-warning-border: rgba(251, 191, 36, 0.38);
+  --fanui-warning-ink: #fde68a;
+  --fanui-warning-ring: rgba(251, 191, 36, 0.3);
+  --fanui-warning-glow: rgba(251, 191, 36, 0.42);
+  --fanui-warning-grad-a: #fbbf24;
+  --fanui-warning-grad-b: #fcd34d;
+  --fanui-danger: #f87171;
+  --fanui-danger-fg: #0b1220;
+  --fanui-danger-hover: rgb(97.5019607843%, 49.3254901961%, 49.3254901961%);
+  --fanui-danger-active: rgb(97.7215686275%, 53.7803921569%, 53.7803921569%);
+  --fanui-danger-vivid: #f87171;
+  --fanui-danger-vivid-2: #fca5a5;
+  --fanui-danger-soft: rgba(248, 113, 113, 0.16);
+  --fanui-danger-soft-2: rgba(248, 113, 113, 0.26);
+  --fanui-danger-border: rgba(248, 113, 113, 0.38);
+  --fanui-danger-ink: #fecaca;
+  --fanui-danger-ring: rgba(248, 113, 113, 0.3);
+  --fanui-danger-glow: rgba(248, 113, 113, 0.42);
+  --fanui-danger-grad-a: #f87171;
+  --fanui-danger-grad-b: #fca5a5;
+  --fanui-info: #38bdf8;
+  --fanui-info-fg: #0b1220;
+  --fanui-info-hover: rgb(28.9843137255%, 76.4470588235%, 97.5019607843%);
+  --fanui-info-active: rgb(35.2274509804%, 78.5176470588%, 97.7215686275%);
+  --fanui-info-vivid: #38bdf8;
+  --fanui-info-vivid-2: #7dd3fc;
+  --fanui-info-soft: rgba(56, 189, 248, 0.16);
+  --fanui-info-soft-2: rgba(56, 189, 248, 0.26);
+  --fanui-info-border: rgba(56, 189, 248, 0.38);
+  --fanui-info-ink: #bae6fd;
+  --fanui-info-ring: rgba(56, 189, 248, 0.3);
+  --fanui-info-glow: rgba(56, 189, 248, 0.42);
+  --fanui-info-grad-a: #38bdf8;
+  --fanui-info-grad-b: #7dd3fc;
+}
+
+@media (prefers-color-scheme: dark) {
+  [data-fanui-theme=auto],
+  :root[data-fanui-theme=auto] {
+    --fanui-success: #34d399;
+    --fanui-success-fg: #0b1220;
+    --fanui-success-hover: rgb(27.5568627451%, 84.2980392157%, 63.6%);
+    --fanui-success-active: rgb(33.9254901961%, 85.6784313725%, 66.8%);
+    --fanui-success-vivid: #34d399;
+    --fanui-success-vivid-2: #6ee7b7;
+    --fanui-success-soft: rgba(52, 211, 153, 0.16);
+    --fanui-success-soft-2: rgba(52, 211, 153, 0.26);
+    --fanui-success-border: rgba(52, 211, 153, 0.38);
+    --fanui-success-ink: #a7f3d0;
+    --fanui-success-ring: rgba(52, 211, 153, 0.3);
+    --fanui-success-glow: rgba(52, 211, 153, 0.42);
+    --fanui-success-grad-a: #34d399;
+    --fanui-success-grad-b: #6ee7b7;
+    --fanui-warning: #fbbf24;
+    --fanui-warning-fg: #0b1220;
+    --fanui-warning-hover: rgb(98.5725490196%, 77.1607843137%, 21.8470588235%);
+    --fanui-warning-active: rgb(98.6980392157%, 79.168627451%, 28.7176470588%);
+    --fanui-warning-vivid: #fbbf24;
+    --fanui-warning-vivid-2: #fcd34d;
+    --fanui-warning-soft: rgba(251, 191, 36, 0.16);
+    --fanui-warning-soft-2: rgba(251, 191, 36, 0.26);
+    --fanui-warning-border: rgba(251, 191, 36, 0.38);
+    --fanui-warning-ink: #fde68a;
+    --fanui-warning-ring: rgba(251, 191, 36, 0.3);
+    --fanui-warning-glow: rgba(251, 191, 36, 0.42);
+    --fanui-warning-grad-a: #fbbf24;
+    --fanui-warning-grad-b: #fcd34d;
+    --fanui-danger: #f87171;
+    --fanui-danger-fg: #0b1220;
+    --fanui-danger-hover: rgb(97.5019607843%, 49.3254901961%, 49.3254901961%);
+    --fanui-danger-active: rgb(97.7215686275%, 53.7803921569%, 53.7803921569%);
+    --fanui-danger-vivid: #f87171;
+    --fanui-danger-vivid-2: #fca5a5;
+    --fanui-danger-soft: rgba(248, 113, 113, 0.16);
+    --fanui-danger-soft-2: rgba(248, 113, 113, 0.26);
+    --fanui-danger-border: rgba(248, 113, 113, 0.38);
+    --fanui-danger-ink: #fecaca;
+    --fanui-danger-ring: rgba(248, 113, 113, 0.3);
+    --fanui-danger-glow: rgba(248, 113, 113, 0.42);
+    --fanui-danger-grad-a: #f87171;
+    --fanui-danger-grad-b: #fca5a5;
+    --fanui-info: #38bdf8;
+    --fanui-info-fg: #0b1220;
+    --fanui-info-hover: rgb(28.9843137255%, 76.4470588235%, 97.5019607843%);
+    --fanui-info-active: rgb(35.2274509804%, 78.5176470588%, 97.7215686275%);
+    --fanui-info-vivid: #38bdf8;
+    --fanui-info-vivid-2: #7dd3fc;
+    --fanui-info-soft: rgba(56, 189, 248, 0.16);
+    --fanui-info-soft-2: rgba(56, 189, 248, 0.26);
+    --fanui-info-border: rgba(56, 189, 248, 0.38);
+    --fanui-info-ink: #bae6fd;
+    --fanui-info-ring: rgba(56, 189, 248, 0.3);
+    --fanui-info-glow: rgba(56, 189, 248, 0.42);
+    --fanui-info-grad-a: #38bdf8;
+    --fanui-info-grad-b: #7dd3fc;
+  }
+}