@vixcom/ui 1.3.0 → 1.5.0

package/dist/css/colors.css

@@ -0,0 +1,2651 @@
+/**
+* HSL Darken = level - n; Lighten = level + n.
+** Darken Color = hsl(var(--{color}-hs), calc(var(--{color}-l) - n%))
+** Lighten Color = hsl(var(--{color}-hs), calc(var(--{color}-l) + n%))
+* {color}-hs = The Hue and Saturation level of the color.
+* {color}-l = Lightness level of the color.
+* {color}-a = Alpha level of the color.
+* {color}-c = The corresponding Text color of the color, if it is used as a background.
+*/
+.text-default {
+  color: var(--default, #5b5b5b);
+}
+
+a.text-default:hover, button.text-default:hover, .link.text-default:hover {
+  color: hsla(var(--default-hs), calc(var(--default-l) - 10%), var(--default-a));
+}
+a.text-default:active, button.text-default:active, .link.text-default:active {
+  color: hsla(var(--default-hs), calc(var(--default-l) - 20%), var(--default-a));
+}
+
+.text-neon-default {
+  /* color: var(--white); */
+  text-shadow: 0 0 20px var(--default, #5b5b5b), 0 0 10px var(--white);
+}
+
+.bg-default {
+  background-color: hsla(var(--default-hs), var(--default-l), var(--default-a));
+  color: var(--default-c, #ffffff);
+  border-color: hsla(var(--default-hs), calc(var(--default-l) - 20%), var(--default-a));
+}
+.bg-default.is-blur {
+  background-color: hsla(var(--default-hs), var(--default-l), 0.5);
+}
+.bg-default.is-blur:hover {
+  background-color: hsla(var(--default-hs), var(--default-l), 0.75);
+}
+
+a.bg-default:hover, button.bg-default:hover, .link.bg-default:hover {
+  background-color: hsla(var(--default-hs), calc(var(--default-l) - 10%), var(--default-a));
+  border-color: hsla(var(--default-hs), var(--default-l), var(--default-a));
+  color: var(--default-c, #ffffff);
+}
+a.bg-default:active, button.bg-default:active, .link.bg-default:active {
+  background-color: hsla(var(--default-hs), calc(var(--default-l) - 20%), var(--default-a));
+}
+
+.bg-g-default {
+  background-image: linear-gradient(var(--default, #5b5b5b), hsla(var(--default-hs), calc(var(--default-l) - 20%), var(--default-a)));
+  color: var(--default-c, #ffffff);
+  border: none;
+}
+
+a.bg-g-default:hover, button.bg-g-default:hover, .link.bg-g-default:hover {
+  background-image: linear-gradient(hsla(var(--default-hs), calc(var(--default-l) + 20%), var(--default-a)), var(--default, #5b5b5b));
+  color: var(--default-c, #ffffff);
+}
+a.bg-g-default:active, button.bg-g-default:active, .link.bg-g-default:active {
+  background-image: linear-gradient(hsla(var(--default-hs), calc(var(--default-l) - 20%), var(--default-a)), var(--default, #5b5b5b));
+}
+
+.bg-outline-default {
+  background-color: transparent;
+  color: hsla(var(--default-hs), var(--default-l), var(--default-a));
+  border: thin solid;
+}
+.bg-outline-default.is-blur {
+  background-color: hsla(var(--default-hs), calc(var(--default-l) - 45%), 0.5);
+}
+
+a.bg-outline-default:hover, button.bg-outline-default:hover, .bg-outline-default.link:hover {
+  background-color: hsla(var(--default-hs), calc(var(--default-l) - 10%), var(--default-a));
+  color: var(--default-c, #ffffff);
+}
+a.bg-outline-default.active, a.bg-outline-default:active, button.bg-outline-default.active, button.bg-outline-default:active, .bg-outline-default.link.active, .bg-outline-default.link:active {
+  background-color: hsla(var(--default-hs), calc(var(--default-l) - 20%), var(--default-a));
+  color: var(--default-c, #ffffff);
+}
+
+.tabs-default > * {
+  color: currentColor;
+}
+.tabs-default > * :not(.active):hover {
+  background-color: hsla(var(--default-hs), var(--default-l), 0.075);
+}
+.tabs-default > * .active {
+  background-color: hsla(var(--default-hs), var(--default-l), 0.125);
+  color: hsla(var(--default-hs), calc(var(--default-l) - 10%), var(--default-a));
+}
+.tabs-default.fill > :hover, .tabs-default.prefill > :hover {
+  background-color: hsla(var(--default-hs), var(--default-l), 0.25);
+}
+.tabs-default.fill > .active, .tabs-default.prefill > .active {
+  background-color: hsla(var(--default-hs), var(--default-l), var(--default-a));
+  color: var(--default-c, #ffffff);
+}
+.tabs-default.prefill > * {
+  background-color: hsla(var(--default-hs), var(--default-l), 0.125);
+}
+
+.dots-default > * {
+  color: currentColor;
+}
+.dots-default > * :not(.active):hover {
+  background-color: hsla(var(--default-hs), var(--default-l), 0.075);
+}
+.dots-default > * .active {
+  background-color: hsla(var(--default-hs), var(--default-l), 0.125);
+  color: hsla(var(--default-hs), calc(var(--default-l) - 10%), var(--default-a));
+}
+.dots-default.fill > :hover, .dots-default.prefill > :hover {
+  background-color: hsla(var(--default-hs), var(--default-l), 0.25);
+}
+.dots-default.fill > .active, .dots-default.prefill > .active {
+  background-color: hsla(var(--default-hs), var(--default-l), var(--default-a));
+  color: var(--default-c, #ffffff);
+}
+.dots-default.prefill > * {
+  background-color: hsla(var(--default-hs), var(--default-l), 0.125);
+}
+
+.border-default {
+  border-color: #5b5b5b;
+}
+
+.text-accent {
+  color: var(--accent, #bfbfbf);
+}
+
+a.text-accent:hover, button.text-accent:hover, .link.text-accent:hover {
+  color: hsla(var(--accent-hs), calc(var(--accent-l) - 10%), var(--accent-a));
+}
+a.text-accent:active, button.text-accent:active, .link.text-accent:active {
+  color: hsla(var(--accent-hs), calc(var(--accent-l) - 20%), var(--accent-a));
+}
+
+.text-neon-accent {
+  /* color: var(--white); */
+  text-shadow: 0 0 20px var(--accent, #bfbfbf), 0 0 10px var(--white);
+}
+
+.bg-accent {
+  background-color: hsla(var(--accent-hs), var(--accent-l), var(--accent-a));
+  color: var(--accent-c, #4c4c4c);
+  border-color: hsla(var(--accent-hs), calc(var(--accent-l) - 20%), var(--accent-a));
+}
+.bg-accent.is-blur {
+  background-color: hsla(var(--accent-hs), var(--accent-l), 0.5);
+}
+.bg-accent.is-blur:hover {
+  background-color: hsla(var(--accent-hs), var(--accent-l), 0.75);
+}
+
+a.bg-accent:hover, button.bg-accent:hover, .link.bg-accent:hover {
+  background-color: hsla(var(--accent-hs), calc(var(--accent-l) - 10%), var(--accent-a));
+  border-color: hsla(var(--accent-hs), var(--accent-l), var(--accent-a));
+  color: var(--accent-c, #4c4c4c);
+}
+a.bg-accent:active, button.bg-accent:active, .link.bg-accent:active {
+  background-color: hsla(var(--accent-hs), calc(var(--accent-l) - 20%), var(--accent-a));
+}
+
+.bg-g-accent {
+  background-image: linear-gradient(var(--accent, #bfbfbf), hsla(var(--accent-hs), calc(var(--accent-l) - 20%), var(--accent-a)));
+  color: var(--accent-c, #4c4c4c);
+  border: none;
+}
+
+a.bg-g-accent:hover, button.bg-g-accent:hover, .link.bg-g-accent:hover {
+  background-image: linear-gradient(hsla(var(--accent-hs), calc(var(--accent-l) + 20%), var(--accent-a)), var(--accent, #bfbfbf));
+  color: var(--accent-c, #4c4c4c);
+}
+a.bg-g-accent:active, button.bg-g-accent:active, .link.bg-g-accent:active {
+  background-image: linear-gradient(hsla(var(--accent-hs), calc(var(--accent-l) - 20%), var(--accent-a)), var(--accent, #bfbfbf));
+}
+
+.bg-outline-accent {
+  background-color: transparent;
+  color: hsla(var(--accent-hs), var(--accent-l), var(--accent-a));
+  border: thin solid;
+}
+.bg-outline-accent.is-blur {
+  background-color: hsla(var(--accent-hs), calc(var(--accent-l) - 45%), 0.5);
+}
+
+a.bg-outline-accent:hover, button.bg-outline-accent:hover, .bg-outline-accent.link:hover {
+  background-color: hsla(var(--accent-hs), calc(var(--accent-l) - 10%), var(--accent-a));
+  color: var(--accent-c, #4c4c4c);
+}
+a.bg-outline-accent.active, a.bg-outline-accent:active, button.bg-outline-accent.active, button.bg-outline-accent:active, .bg-outline-accent.link.active, .bg-outline-accent.link:active {
+  background-color: hsla(var(--accent-hs), calc(var(--accent-l) - 20%), var(--accent-a));
+  color: var(--accent-c, #4c4c4c);
+}
+
+.tabs-accent > * {
+  color: currentColor;
+}
+.tabs-accent > * :not(.active):hover {
+  background-color: hsla(var(--accent-hs), var(--accent-l), 0.075);
+}
+.tabs-accent > * .active {
+  background-color: hsla(var(--accent-hs), var(--accent-l), 0.125);
+  color: hsla(var(--accent-hs), calc(var(--accent-l) - 10%), var(--accent-a));
+}
+.tabs-accent.fill > :hover, .tabs-accent.prefill > :hover {
+  background-color: hsla(var(--accent-hs), var(--accent-l), 0.25);
+}
+.tabs-accent.fill > .active, .tabs-accent.prefill > .active {
+  background-color: hsla(var(--accent-hs), var(--accent-l), var(--accent-a));
+  color: var(--accent-c, #4c4c4c);
+}
+.tabs-accent.prefill > * {
+  background-color: hsla(var(--accent-hs), var(--accent-l), 0.125);
+}
+
+.dots-accent > * {
+  color: currentColor;
+}
+.dots-accent > * :not(.active):hover {
+  background-color: hsla(var(--accent-hs), var(--accent-l), 0.075);
+}
+.dots-accent > * .active {
+  background-color: hsla(var(--accent-hs), var(--accent-l), 0.125);
+  color: hsla(var(--accent-hs), calc(var(--accent-l) - 10%), var(--accent-a));
+}
+.dots-accent.fill > :hover, .dots-accent.prefill > :hover {
+  background-color: hsla(var(--accent-hs), var(--accent-l), 0.25);
+}
+.dots-accent.fill > .active, .dots-accent.prefill > .active {
+  background-color: hsla(var(--accent-hs), var(--accent-l), var(--accent-a));
+  color: var(--accent-c, #4c4c4c);
+}
+.dots-accent.prefill > * {
+  background-color: hsla(var(--accent-hs), var(--accent-l), 0.125);
+}
+
+.border-accent {
+  border-color: #bfbfbf;
+}
+
+.text-primary {
+  color: var(--primary, #34a853);
+}
+
+a.text-primary:hover, button.text-primary:hover, .link.text-primary:hover {
+  color: hsla(var(--primary-hs), calc(var(--primary-l) - 10%), var(--primary-a));
+}
+a.text-primary:active, button.text-primary:active, .link.text-primary:active {
+  color: hsla(var(--primary-hs), calc(var(--primary-l) - 20%), var(--primary-a));
+}
+
+.text-neon-primary {
+  /* color: var(--white); */
+  text-shadow: 0 0 20px var(--primary, #34a853), 0 0 10px var(--white);
+}
+
+.bg-primary {
+  background-color: hsla(var(--primary-hs), var(--primary-l), var(--primary-a));
+  color: var(--primary-c, #ffffff);
+  border-color: hsla(var(--primary-hs), calc(var(--primary-l) - 20%), var(--primary-a));
+}
+.bg-primary.is-blur {
+  background-color: hsla(var(--primary-hs), var(--primary-l), 0.5);
+}
+.bg-primary.is-blur:hover {
+  background-color: hsla(var(--primary-hs), var(--primary-l), 0.75);
+}
+
+a.bg-primary:hover, button.bg-primary:hover, .link.bg-primary:hover {
+  background-color: hsla(var(--primary-hs), calc(var(--primary-l) - 10%), var(--primary-a));
+  border-color: hsla(var(--primary-hs), var(--primary-l), var(--primary-a));
+  color: var(--primary-c, #ffffff);
+}
+a.bg-primary:active, button.bg-primary:active, .link.bg-primary:active {
+  background-color: hsla(var(--primary-hs), calc(var(--primary-l) - 20%), var(--primary-a));
+}
+
+.bg-g-primary {
+  background-image: linear-gradient(var(--primary, #34a853), hsla(var(--primary-hs), calc(var(--primary-l) - 20%), var(--primary-a)));
+  color: var(--primary-c, #ffffff);
+  border: none;
+}
+
+a.bg-g-primary:hover, button.bg-g-primary:hover, .link.bg-g-primary:hover {
+  background-image: linear-gradient(hsla(var(--primary-hs), calc(var(--primary-l) + 20%), var(--primary-a)), var(--primary, #34a853));
+  color: var(--primary-c, #ffffff);
+}
+a.bg-g-primary:active, button.bg-g-primary:active, .link.bg-g-primary:active {
+  background-image: linear-gradient(hsla(var(--primary-hs), calc(var(--primary-l) - 20%), var(--primary-a)), var(--primary, #34a853));
+}
+
+.bg-outline-primary {
+  background-color: transparent;
+  color: hsla(var(--primary-hs), var(--primary-l), var(--primary-a));
+  border: thin solid;
+}
+.bg-outline-primary.is-blur {
+  background-color: hsla(var(--primary-hs), calc(var(--primary-l) - 45%), 0.5);
+}
+
+a.bg-outline-primary:hover, button.bg-outline-primary:hover, .bg-outline-primary.link:hover {
+  background-color: hsla(var(--primary-hs), calc(var(--primary-l) - 10%), var(--primary-a));
+  color: var(--primary-c, #ffffff);
+}
+a.bg-outline-primary.active, a.bg-outline-primary:active, button.bg-outline-primary.active, button.bg-outline-primary:active, .bg-outline-primary.link.active, .bg-outline-primary.link:active {
+  background-color: hsla(var(--primary-hs), calc(var(--primary-l) - 20%), var(--primary-a));
+  color: var(--primary-c, #ffffff);
+}
+
+.tabs-primary > * {
+  color: currentColor;
+}
+.tabs-primary > * :not(.active):hover {
+  background-color: hsla(var(--primary-hs), var(--primary-l), 0.075);
+}
+.tabs-primary > * .active {
+  background-color: hsla(var(--primary-hs), var(--primary-l), 0.125);
+  color: hsla(var(--primary-hs), calc(var(--primary-l) - 10%), var(--primary-a));
+}
+.tabs-primary.fill > :hover, .tabs-primary.prefill > :hover {
+  background-color: hsla(var(--primary-hs), var(--primary-l), 0.25);
+}
+.tabs-primary.fill > .active, .tabs-primary.prefill > .active {
+  background-color: hsla(var(--primary-hs), var(--primary-l), var(--primary-a));
+  color: var(--primary-c, #ffffff);
+}
+.tabs-primary.prefill > * {
+  background-color: hsla(var(--primary-hs), var(--primary-l), 0.125);
+}
+
+.dots-primary > * {
+  color: currentColor;
+}
+.dots-primary > * :not(.active):hover {
+  background-color: hsla(var(--primary-hs), var(--primary-l), 0.075);
+}
+.dots-primary > * .active {
+  background-color: hsla(var(--primary-hs), var(--primary-l), 0.125);
+  color: hsla(var(--primary-hs), calc(var(--primary-l) - 10%), var(--primary-a));
+}
+.dots-primary.fill > :hover, .dots-primary.prefill > :hover {
+  background-color: hsla(var(--primary-hs), var(--primary-l), 0.25);
+}
+.dots-primary.fill > .active, .dots-primary.prefill > .active {
+  background-color: hsla(var(--primary-hs), var(--primary-l), var(--primary-a));
+  color: var(--primary-c, #ffffff);
+}
+.dots-primary.prefill > * {
+  background-color: hsla(var(--primary-hs), var(--primary-l), 0.125);
+}
+
+.border-primary {
+  border-color: #34a853;
+}
+
+.text-secondary {
+  color: var(--secondary, #5c2b6d);
+}
+
+a.text-secondary:hover, button.text-secondary:hover, .link.text-secondary:hover {
+  color: hsla(var(--secondary-hs), calc(var(--secondary-l) - 10%), var(--secondary-a));
+}
+a.text-secondary:active, button.text-secondary:active, .link.text-secondary:active {
+  color: hsla(var(--secondary-hs), calc(var(--secondary-l) - 20%), var(--secondary-a));
+}
+
+.text-neon-secondary {
+  /* color: var(--white); */
+  text-shadow: 0 0 20px var(--secondary, #5c2b6d), 0 0 10px var(--white);
+}
+
+.bg-secondary {
+  background-color: hsla(var(--secondary-hs), var(--secondary-l), var(--secondary-a));
+  color: var(--secondary-c, #ffffff);
+  border-color: hsla(var(--secondary-hs), calc(var(--secondary-l) - 20%), var(--secondary-a));
+}
+.bg-secondary.is-blur {
+  background-color: hsla(var(--secondary-hs), var(--secondary-l), 0.5);
+}
+.bg-secondary.is-blur:hover {
+  background-color: hsla(var(--secondary-hs), var(--secondary-l), 0.75);
+}
+
+a.bg-secondary:hover, button.bg-secondary:hover, .link.bg-secondary:hover {
+  background-color: hsla(var(--secondary-hs), calc(var(--secondary-l) - 10%), var(--secondary-a));
+  border-color: hsla(var(--secondary-hs), var(--secondary-l), var(--secondary-a));
+  color: var(--secondary-c, #ffffff);
+}
+a.bg-secondary:active, button.bg-secondary:active, .link.bg-secondary:active {
+  background-color: hsla(var(--secondary-hs), calc(var(--secondary-l) - 20%), var(--secondary-a));
+}
+
+.bg-g-secondary {
+  background-image: linear-gradient(var(--secondary, #5c2b6d), hsla(var(--secondary-hs), calc(var(--secondary-l) - 20%), var(--secondary-a)));
+  color: var(--secondary-c, #ffffff);
+  border: none;
+}
+
+a.bg-g-secondary:hover, button.bg-g-secondary:hover, .link.bg-g-secondary:hover {
+  background-image: linear-gradient(hsla(var(--secondary-hs), calc(var(--secondary-l) + 20%), var(--secondary-a)), var(--secondary, #5c2b6d));
+  color: var(--secondary-c, #ffffff);
+}
+a.bg-g-secondary:active, button.bg-g-secondary:active, .link.bg-g-secondary:active {
+  background-image: linear-gradient(hsla(var(--secondary-hs), calc(var(--secondary-l) - 20%), var(--secondary-a)), var(--secondary, #5c2b6d));
+}
+
+.bg-outline-secondary {
+  background-color: transparent;
+  color: hsla(var(--secondary-hs), var(--secondary-l), var(--secondary-a));
+  border: thin solid;
+}
+.bg-outline-secondary.is-blur {
+  background-color: hsla(var(--secondary-hs), calc(var(--secondary-l) - 45%), 0.5);
+}
+
+a.bg-outline-secondary:hover, button.bg-outline-secondary:hover, .bg-outline-secondary.link:hover {
+  background-color: hsla(var(--secondary-hs), calc(var(--secondary-l) - 10%), var(--secondary-a));
+  color: var(--secondary-c, #ffffff);
+}
+a.bg-outline-secondary.active, a.bg-outline-secondary:active, button.bg-outline-secondary.active, button.bg-outline-secondary:active, .bg-outline-secondary.link.active, .bg-outline-secondary.link:active {
+  background-color: hsla(var(--secondary-hs), calc(var(--secondary-l) - 20%), var(--secondary-a));
+  color: var(--secondary-c, #ffffff);
+}
+
+.tabs-secondary > * {
+  color: currentColor;
+}
+.tabs-secondary > * :not(.active):hover {
+  background-color: hsla(var(--secondary-hs), var(--secondary-l), 0.075);
+}
+.tabs-secondary > * .active {
+  background-color: hsla(var(--secondary-hs), var(--secondary-l), 0.125);
+  color: hsla(var(--secondary-hs), calc(var(--secondary-l) - 10%), var(--secondary-a));
+}
+.tabs-secondary.fill > :hover, .tabs-secondary.prefill > :hover {
+  background-color: hsla(var(--secondary-hs), var(--secondary-l), 0.25);
+}
+.tabs-secondary.fill > .active, .tabs-secondary.prefill > .active {
+  background-color: hsla(var(--secondary-hs), var(--secondary-l), var(--secondary-a));
+  color: var(--secondary-c, #ffffff);
+}
+.tabs-secondary.prefill > * {
+  background-color: hsla(var(--secondary-hs), var(--secondary-l), 0.125);
+}
+
+.dots-secondary > * {
+  color: currentColor;
+}
+.dots-secondary > * :not(.active):hover {
+  background-color: hsla(var(--secondary-hs), var(--secondary-l), 0.075);
+}
+.dots-secondary > * .active {
+  background-color: hsla(var(--secondary-hs), var(--secondary-l), 0.125);
+  color: hsla(var(--secondary-hs), calc(var(--secondary-l) - 10%), var(--secondary-a));
+}
+.dots-secondary.fill > :hover, .dots-secondary.prefill > :hover {
+  background-color: hsla(var(--secondary-hs), var(--secondary-l), 0.25);
+}
+.dots-secondary.fill > .active, .dots-secondary.prefill > .active {
+  background-color: hsla(var(--secondary-hs), var(--secondary-l), var(--secondary-a));
+  color: var(--secondary-c, #ffffff);
+}
+.dots-secondary.prefill > * {
+  background-color: hsla(var(--secondary-hs), var(--secondary-l), 0.125);
+}
+
+.border-secondary {
+  border-color: #5c2b6d;
+}
+
+.text-white {
+  color: var(--white, #ffffff);
+}
+
+a.text-white:hover, button.text-white:hover, .link.text-white:hover {
+  color: hsla(var(--white-hs), calc(var(--white-l) - 10%), var(--white-a));
+}
+a.text-white:active, button.text-white:active, .link.text-white:active {
+  color: hsla(var(--white-hs), calc(var(--white-l) - 20%), var(--white-a));
+}
+
+.text-neon-white {
+  /* color: var(--white); */
+  text-shadow: 0 0 20px var(--white, #ffffff), 0 0 10px var(--white);
+}
+
+.bg-white {
+  background-color: hsla(var(--white-hs), var(--white-l), var(--white-a));
+  color: var(--white-c, #5b5b5b);
+  border-color: hsla(var(--white-hs), calc(var(--white-l) - 20%), var(--white-a));
+}
+.bg-white.is-blur {
+  background-color: hsla(var(--white-hs), var(--white-l), 0.5);
+}
+.bg-white.is-blur:hover {
+  background-color: hsla(var(--white-hs), var(--white-l), 0.75);
+}
+
+a.bg-white:hover, button.bg-white:hover, .link.bg-white:hover {
+  background-color: hsla(var(--white-hs), calc(var(--white-l) - 10%), var(--white-a));
+  border-color: hsla(var(--white-hs), var(--white-l), var(--white-a));
+  color: var(--white-c, #5b5b5b);
+}
+a.bg-white:active, button.bg-white:active, .link.bg-white:active {
+  background-color: hsla(var(--white-hs), calc(var(--white-l) - 20%), var(--white-a));
+}
+
+.bg-g-white {
+  background-image: linear-gradient(var(--white, #ffffff), hsla(var(--white-hs), calc(var(--white-l) - 20%), var(--white-a)));
+  color: var(--white-c, #5b5b5b);
+  border: none;
+}
+
+a.bg-g-white:hover, button.bg-g-white:hover, .link.bg-g-white:hover {
+  background-image: linear-gradient(hsla(var(--white-hs), calc(var(--white-l) + 20%), var(--white-a)), var(--white, #ffffff));
+  color: var(--white-c, #5b5b5b);
+}
+a.bg-g-white:active, button.bg-g-white:active, .link.bg-g-white:active {
+  background-image: linear-gradient(hsla(var(--white-hs), calc(var(--white-l) - 20%), var(--white-a)), var(--white, #ffffff));
+}
+
+.bg-outline-white {
+  background-color: transparent;
+  color: hsla(var(--white-hs), var(--white-l), var(--white-a));
+  border: thin solid;
+}
+.bg-outline-white.is-blur {
+  background-color: hsla(var(--white-hs), calc(var(--white-l) - 45%), 0.5);
+}
+
+a.bg-outline-white:hover, button.bg-outline-white:hover, .bg-outline-white.link:hover {
+  background-color: hsla(var(--white-hs), calc(var(--white-l) - 10%), var(--white-a));
+  color: var(--white-c, #5b5b5b);
+}
+a.bg-outline-white.active, a.bg-outline-white:active, button.bg-outline-white.active, button.bg-outline-white:active, .bg-outline-white.link.active, .bg-outline-white.link:active {
+  background-color: hsla(var(--white-hs), calc(var(--white-l) - 20%), var(--white-a));
+  color: var(--white-c, #5b5b5b);
+}
+
+.tabs-white > * {
+  color: currentColor;
+}
+.tabs-white > * :not(.active):hover {
+  background-color: hsla(var(--white-hs), var(--white-l), 0.075);
+}
+.tabs-white > * .active {
+  background-color: hsla(var(--white-hs), var(--white-l), 0.125);
+  color: hsla(var(--white-hs), calc(var(--white-l) - 10%), var(--white-a));
+}
+.tabs-white.fill > :hover, .tabs-white.prefill > :hover {
+  background-color: hsla(var(--white-hs), var(--white-l), 0.25);
+}
+.tabs-white.fill > .active, .tabs-white.prefill > .active {
+  background-color: hsla(var(--white-hs), var(--white-l), var(--white-a));
+  color: var(--white-c, #5b5b5b);
+}
+.tabs-white.prefill > * {
+  background-color: hsla(var(--white-hs), var(--white-l), 0.125);
+}
+
+.dots-white > * {
+  color: currentColor;
+}
+.dots-white > * :not(.active):hover {
+  background-color: hsla(var(--white-hs), var(--white-l), 0.075);
+}
+.dots-white > * .active {
+  background-color: hsla(var(--white-hs), var(--white-l), 0.125);
+  color: hsla(var(--white-hs), calc(var(--white-l) - 10%), var(--white-a));
+}
+.dots-white.fill > :hover, .dots-white.prefill > :hover {
+  background-color: hsla(var(--white-hs), var(--white-l), 0.25);
+}
+.dots-white.fill > .active, .dots-white.prefill > .active {
+  background-color: hsla(var(--white-hs), var(--white-l), var(--white-a));
+  color: var(--white-c, #5b5b5b);
+}
+.dots-white.prefill > * {
+  background-color: hsla(var(--white-hs), var(--white-l), 0.125);
+}
+
+.border-white {
+  border-color: #ffffff;
+}
+
+.text-light {
+  color: var(--light, #f8f9fa);
+}
+
+a.text-light:hover, button.text-light:hover, .link.text-light:hover {
+  color: hsla(var(--light-hs), calc(var(--light-l) - 10%), var(--light-a));
+}
+a.text-light:active, button.text-light:active, .link.text-light:active {
+  color: hsla(var(--light-hs), calc(var(--light-l) - 20%), var(--light-a));
+}
+
+.text-neon-light {
+  /* color: var(--white); */
+  text-shadow: 0 0 20px var(--light, #f8f9fa), 0 0 10px var(--white);
+}
+
+.bg-light {
+  background-color: hsla(var(--light-hs), var(--light-l), var(--light-a));
+  color: var(--light-c, #343a40);
+  border-color: hsla(var(--light-hs), calc(var(--light-l) - 20%), var(--light-a));
+}
+.bg-light.is-blur {
+  background-color: hsla(var(--light-hs), var(--light-l), 0.5);
+}
+.bg-light.is-blur:hover {
+  background-color: hsla(var(--light-hs), var(--light-l), 0.75);
+}
+
+a.bg-light:hover, button.bg-light:hover, .link.bg-light:hover {
+  background-color: hsla(var(--light-hs), calc(var(--light-l) - 10%), var(--light-a));
+  border-color: hsla(var(--light-hs), var(--light-l), var(--light-a));
+  color: var(--light-c, #343a40);
+}
+a.bg-light:active, button.bg-light:active, .link.bg-light:active {
+  background-color: hsla(var(--light-hs), calc(var(--light-l) - 20%), var(--light-a));
+}
+
+.bg-g-light {
+  background-image: linear-gradient(var(--light, #f8f9fa), hsla(var(--light-hs), calc(var(--light-l) - 20%), var(--light-a)));
+  color: var(--light-c, #343a40);
+  border: none;
+}
+
+a.bg-g-light:hover, button.bg-g-light:hover, .link.bg-g-light:hover {
+  background-image: linear-gradient(hsla(var(--light-hs), calc(var(--light-l) + 20%), var(--light-a)), var(--light, #f8f9fa));
+  color: var(--light-c, #343a40);
+}
+a.bg-g-light:active, button.bg-g-light:active, .link.bg-g-light:active {
+  background-image: linear-gradient(hsla(var(--light-hs), calc(var(--light-l) - 20%), var(--light-a)), var(--light, #f8f9fa));
+}
+
+.bg-outline-light {
+  background-color: transparent;
+  color: hsla(var(--light-hs), var(--light-l), var(--light-a));
+  border: thin solid;
+}
+.bg-outline-light.is-blur {
+  background-color: hsla(var(--light-hs), calc(var(--light-l) - 45%), 0.5);
+}
+
+a.bg-outline-light:hover, button.bg-outline-light:hover, .bg-outline-light.link:hover {
+  background-color: hsla(var(--light-hs), calc(var(--light-l) - 10%), var(--light-a));
+  color: var(--light-c, #343a40);
+}
+a.bg-outline-light.active, a.bg-outline-light:active, button.bg-outline-light.active, button.bg-outline-light:active, .bg-outline-light.link.active, .bg-outline-light.link:active {
+  background-color: hsla(var(--light-hs), calc(var(--light-l) - 20%), var(--light-a));
+  color: var(--light-c, #343a40);
+}
+
+.tabs-light > * {
+  color: currentColor;
+}
+.tabs-light > * :not(.active):hover {
+  background-color: hsla(var(--light-hs), var(--light-l), 0.075);
+}
+.tabs-light > * .active {
+  background-color: hsla(var(--light-hs), var(--light-l), 0.125);
+  color: hsla(var(--light-hs), calc(var(--light-l) - 10%), var(--light-a));
+}
+.tabs-light.fill > :hover, .tabs-light.prefill > :hover {
+  background-color: hsla(var(--light-hs), var(--light-l), 0.25);
+}
+.tabs-light.fill > .active, .tabs-light.prefill > .active {
+  background-color: hsla(var(--light-hs), var(--light-l), var(--light-a));
+  color: var(--light-c, #343a40);
+}
+.tabs-light.prefill > * {
+  background-color: hsla(var(--light-hs), var(--light-l), 0.125);
+}
+
+.dots-light > * {
+  color: currentColor;
+}
+.dots-light > * :not(.active):hover {
+  background-color: hsla(var(--light-hs), var(--light-l), 0.075);
+}
+.dots-light > * .active {
+  background-color: hsla(var(--light-hs), var(--light-l), 0.125);
+  color: hsla(var(--light-hs), calc(var(--light-l) - 10%), var(--light-a));
+}
+.dots-light.fill > :hover, .dots-light.prefill > :hover {
+  background-color: hsla(var(--light-hs), var(--light-l), 0.25);
+}
+.dots-light.fill > .active, .dots-light.prefill > .active {
+  background-color: hsla(var(--light-hs), var(--light-l), var(--light-a));
+  color: var(--light-c, #343a40);
+}
+.dots-light.prefill > * {
+  background-color: hsla(var(--light-hs), var(--light-l), 0.125);
+}
+
+.border-light {
+  border-color: #f8f9fa;
+}
+
+.text-black {
+  color: var(--black, #000000);
+}
+
+a.text-black:hover, button.text-black:hover, .link.text-black:hover {
+  color: hsla(var(--black-hs), calc(var(--black-l) - 10%), var(--black-a));
+}
+a.text-black:active, button.text-black:active, .link.text-black:active {
+  color: hsla(var(--black-hs), calc(var(--black-l) - 20%), var(--black-a));
+}
+
+.text-neon-black {
+  /* color: var(--white); */
+  text-shadow: 0 0 20px var(--black, #000000), 0 0 10px var(--white);
+}
+
+.bg-black {
+  background-color: hsla(var(--black-hs), var(--black-l), var(--black-a));
+  color: var(--black-c, #ffffff);
+  border-color: hsla(var(--black-hs), calc(var(--black-l) - 20%), var(--black-a));
+}
+.bg-black.is-blur {
+  background-color: hsla(var(--black-hs), var(--black-l), 0.5);
+}
+.bg-black.is-blur:hover {
+  background-color: hsla(var(--black-hs), var(--black-l), 0.75);
+}
+
+a.bg-black:hover, button.bg-black:hover, .link.bg-black:hover {
+  background-color: hsla(var(--black-hs), calc(var(--black-l) - 10%), var(--black-a));
+  border-color: hsla(var(--black-hs), var(--black-l), var(--black-a));
+  color: var(--black-c, #ffffff);
+}
+a.bg-black:active, button.bg-black:active, .link.bg-black:active {
+  background-color: hsla(var(--black-hs), calc(var(--black-l) - 20%), var(--black-a));
+}
+
+.bg-g-black {
+  background-image: linear-gradient(var(--black, #000000), hsla(var(--black-hs), calc(var(--black-l) - 20%), var(--black-a)));
+  color: var(--black-c, #ffffff);
+  border: none;
+}
+
+a.bg-g-black:hover, button.bg-g-black:hover, .link.bg-g-black:hover {
+  background-image: linear-gradient(hsla(var(--black-hs), calc(var(--black-l) + 20%), var(--black-a)), var(--black, #000000));
+  color: var(--black-c, #ffffff);
+}
+a.bg-g-black:active, button.bg-g-black:active, .link.bg-g-black:active {
+  background-image: linear-gradient(hsla(var(--black-hs), calc(var(--black-l) - 20%), var(--black-a)), var(--black, #000000));
+}
+
+.bg-outline-black {
+  background-color: transparent;
+  color: hsla(var(--black-hs), var(--black-l), var(--black-a));
+  border: thin solid;
+}
+.bg-outline-black.is-blur {
+  background-color: hsla(var(--black-hs), calc(var(--black-l) - 45%), 0.5);
+}
+
+a.bg-outline-black:hover, button.bg-outline-black:hover, .bg-outline-black.link:hover {
+  background-color: hsla(var(--black-hs), calc(var(--black-l) - 10%), var(--black-a));
+  color: var(--black-c, #ffffff);
+}
+a.bg-outline-black.active, a.bg-outline-black:active, button.bg-outline-black.active, button.bg-outline-black:active, .bg-outline-black.link.active, .bg-outline-black.link:active {
+  background-color: hsla(var(--black-hs), calc(var(--black-l) - 20%), var(--black-a));
+  color: var(--black-c, #ffffff);
+}
+
+.tabs-black > * {
+  color: currentColor;
+}
+.tabs-black > * :not(.active):hover {
+  background-color: hsla(var(--black-hs), var(--black-l), 0.075);
+}
+.tabs-black > * .active {
+  background-color: hsla(var(--black-hs), var(--black-l), 0.125);
+  color: hsla(var(--black-hs), calc(var(--black-l) - 10%), var(--black-a));
+}
+.tabs-black.fill > :hover, .tabs-black.prefill > :hover {
+  background-color: hsla(var(--black-hs), var(--black-l), 0.25);
+}
+.tabs-black.fill > .active, .tabs-black.prefill > .active {
+  background-color: hsla(var(--black-hs), var(--black-l), var(--black-a));
+  color: var(--black-c, #ffffff);
+}
+.tabs-black.prefill > * {
+  background-color: hsla(var(--black-hs), var(--black-l), 0.125);
+}
+
+.dots-black > * {
+  color: currentColor;
+}
+.dots-black > * :not(.active):hover {
+  background-color: hsla(var(--black-hs), var(--black-l), 0.075);
+}
+.dots-black > * .active {
+  background-color: hsla(var(--black-hs), var(--black-l), 0.125);
+  color: hsla(var(--black-hs), calc(var(--black-l) - 10%), var(--black-a));
+}
+.dots-black.fill > :hover, .dots-black.prefill > :hover {
+  background-color: hsla(var(--black-hs), var(--black-l), 0.25);
+}
+.dots-black.fill > .active, .dots-black.prefill > .active {
+  background-color: hsla(var(--black-hs), var(--black-l), var(--black-a));
+  color: var(--black-c, #ffffff);
+}
+.dots-black.prefill > * {
+  background-color: hsla(var(--black-hs), var(--black-l), 0.125);
+}
+
+.border-black {
+  border-color: #000000;
+}
+
+.text-dark {
+  color: var(--dark, #343a40);
+}
+
+a.text-dark:hover, button.text-dark:hover, .link.text-dark:hover {
+  color: hsla(var(--dark-hs), calc(var(--dark-l) - 10%), var(--dark-a));
+}
+a.text-dark:active, button.text-dark:active, .link.text-dark:active {
+  color: hsla(var(--dark-hs), calc(var(--dark-l) - 20%), var(--dark-a));
+}
+
+.text-neon-dark {
+  /* color: var(--white); */
+  text-shadow: 0 0 20px var(--dark, #343a40), 0 0 10px var(--white);
+}
+
+.bg-dark {
+  background-color: hsla(var(--dark-hs), var(--dark-l), var(--dark-a));
+  color: var(--dark-c, #f8f9fa);
+  border-color: hsla(var(--dark-hs), calc(var(--dark-l) - 20%), var(--dark-a));
+}
+.bg-dark.is-blur {
+  background-color: hsla(var(--dark-hs), var(--dark-l), 0.5);
+}
+.bg-dark.is-blur:hover {
+  background-color: hsla(var(--dark-hs), var(--dark-l), 0.75);
+}
+
+a.bg-dark:hover, button.bg-dark:hover, .link.bg-dark:hover {
+  background-color: hsla(var(--dark-hs), calc(var(--dark-l) - 10%), var(--dark-a));
+  border-color: hsla(var(--dark-hs), var(--dark-l), var(--dark-a));
+  color: var(--dark-c, #f8f9fa);
+}
+a.bg-dark:active, button.bg-dark:active, .link.bg-dark:active {
+  background-color: hsla(var(--dark-hs), calc(var(--dark-l) - 20%), var(--dark-a));
+}
+
+.bg-g-dark {
+  background-image: linear-gradient(var(--dark, #343a40), hsla(var(--dark-hs), calc(var(--dark-l) - 20%), var(--dark-a)));
+  color: var(--dark-c, #f8f9fa);
+  border: none;
+}
+
+a.bg-g-dark:hover, button.bg-g-dark:hover, .link.bg-g-dark:hover {
+  background-image: linear-gradient(hsla(var(--dark-hs), calc(var(--dark-l) + 20%), var(--dark-a)), var(--dark, #343a40));
+  color: var(--dark-c, #f8f9fa);
+}
+a.bg-g-dark:active, button.bg-g-dark:active, .link.bg-g-dark:active {
+  background-image: linear-gradient(hsla(var(--dark-hs), calc(var(--dark-l) - 20%), var(--dark-a)), var(--dark, #343a40));
+}
+
+.bg-outline-dark {
+  background-color: transparent;
+  color: hsla(var(--dark-hs), var(--dark-l), var(--dark-a));
+  border: thin solid;
+}
+.bg-outline-dark.is-blur {
+  background-color: hsla(var(--dark-hs), calc(var(--dark-l) - 45%), 0.5);
+}
+
+a.bg-outline-dark:hover, button.bg-outline-dark:hover, .bg-outline-dark.link:hover {
+  background-color: hsla(var(--dark-hs), calc(var(--dark-l) - 10%), var(--dark-a));
+  color: var(--dark-c, #f8f9fa);
+}
+a.bg-outline-dark.active, a.bg-outline-dark:active, button.bg-outline-dark.active, button.bg-outline-dark:active, .bg-outline-dark.link.active, .bg-outline-dark.link:active {
+  background-color: hsla(var(--dark-hs), calc(var(--dark-l) - 20%), var(--dark-a));
+  color: var(--dark-c, #f8f9fa);
+}
+
+.tabs-dark > * {
+  color: currentColor;
+}
+.tabs-dark > * :not(.active):hover {
+  background-color: hsla(var(--dark-hs), var(--dark-l), 0.075);
+}
+.tabs-dark > * .active {
+  background-color: hsla(var(--dark-hs), var(--dark-l), 0.125);
+  color: hsla(var(--dark-hs), calc(var(--dark-l) - 10%), var(--dark-a));
+}
+.tabs-dark.fill > :hover, .tabs-dark.prefill > :hover {
+  background-color: hsla(var(--dark-hs), var(--dark-l), 0.25);
+}
+.tabs-dark.fill > .active, .tabs-dark.prefill > .active {
+  background-color: hsla(var(--dark-hs), var(--dark-l), var(--dark-a));
+  color: var(--dark-c, #f8f9fa);
+}
+.tabs-dark.prefill > * {
+  background-color: hsla(var(--dark-hs), var(--dark-l), 0.125);
+}
+
+.dots-dark > * {
+  color: currentColor;
+}
+.dots-dark > * :not(.active):hover {
+  background-color: hsla(var(--dark-hs), var(--dark-l), 0.075);
+}
+.dots-dark > * .active {
+  background-color: hsla(var(--dark-hs), var(--dark-l), 0.125);
+  color: hsla(var(--dark-hs), calc(var(--dark-l) - 10%), var(--dark-a));
+}
+.dots-dark.fill > :hover, .dots-dark.prefill > :hover {
+  background-color: hsla(var(--dark-hs), var(--dark-l), 0.25);
+}
+.dots-dark.fill > .active, .dots-dark.prefill > .active {
+  background-color: hsla(var(--dark-hs), var(--dark-l), var(--dark-a));
+  color: var(--dark-c, #f8f9fa);
+}
+.dots-dark.prefill > * {
+  background-color: hsla(var(--dark-hs), var(--dark-l), 0.125);
+}
+
+.border-dark {
+  border-color: #343a40;
+}
+
+.text-silver {
+  color: var(--silver, #bfbfbf);
+}
+
+a.text-silver:hover, button.text-silver:hover, .link.text-silver:hover {
+  color: hsla(var(--silver-hs), calc(var(--silver-l) - 10%), var(--silver-a));
+}
+a.text-silver:active, button.text-silver:active, .link.text-silver:active {
+  color: hsla(var(--silver-hs), calc(var(--silver-l) - 20%), var(--silver-a));
+}
+
+.text-neon-silver {
+  /* color: var(--white); */
+  text-shadow: 0 0 20px var(--silver, #bfbfbf), 0 0 10px var(--white);
+}
+
+.bg-silver {
+  background-color: hsla(var(--silver-hs), var(--silver-l), var(--silver-a));
+  color: var(--silver-c, #ffffff);
+  border-color: hsla(var(--silver-hs), calc(var(--silver-l) - 20%), var(--silver-a));
+}
+.bg-silver.is-blur {
+  background-color: hsla(var(--silver-hs), var(--silver-l), 0.5);
+}
+.bg-silver.is-blur:hover {
+  background-color: hsla(var(--silver-hs), var(--silver-l), 0.75);
+}
+
+a.bg-silver:hover, button.bg-silver:hover, .link.bg-silver:hover {
+  background-color: hsla(var(--silver-hs), calc(var(--silver-l) - 10%), var(--silver-a));
+  border-color: hsla(var(--silver-hs), var(--silver-l), var(--silver-a));
+  color: var(--silver-c, #ffffff);
+}
+a.bg-silver:active, button.bg-silver:active, .link.bg-silver:active {
+  background-color: hsla(var(--silver-hs), calc(var(--silver-l) - 20%), var(--silver-a));
+}
+
+.bg-g-silver {
+  background-image: linear-gradient(var(--silver, #bfbfbf), hsla(var(--silver-hs), calc(var(--silver-l) - 20%), var(--silver-a)));
+  color: var(--silver-c, #ffffff);
+  border: none;
+}
+
+a.bg-g-silver:hover, button.bg-g-silver:hover, .link.bg-g-silver:hover {
+  background-image: linear-gradient(hsla(var(--silver-hs), calc(var(--silver-l) + 20%), var(--silver-a)), var(--silver, #bfbfbf));
+  color: var(--silver-c, #ffffff);
+}
+a.bg-g-silver:active, button.bg-g-silver:active, .link.bg-g-silver:active {
+  background-image: linear-gradient(hsla(var(--silver-hs), calc(var(--silver-l) - 20%), var(--silver-a)), var(--silver, #bfbfbf));
+}
+
+.bg-outline-silver {
+  background-color: transparent;
+  color: hsla(var(--silver-hs), var(--silver-l), var(--silver-a));
+  border: thin solid;
+}
+.bg-outline-silver.is-blur {
+  background-color: hsla(var(--silver-hs), calc(var(--silver-l) - 45%), 0.5);
+}
+
+a.bg-outline-silver:hover, button.bg-outline-silver:hover, .bg-outline-silver.link:hover {
+  background-color: hsla(var(--silver-hs), calc(var(--silver-l) - 10%), var(--silver-a));
+  color: var(--silver-c, #ffffff);
+}
+a.bg-outline-silver.active, a.bg-outline-silver:active, button.bg-outline-silver.active, button.bg-outline-silver:active, .bg-outline-silver.link.active, .bg-outline-silver.link:active {
+  background-color: hsla(var(--silver-hs), calc(var(--silver-l) - 20%), var(--silver-a));
+  color: var(--silver-c, #ffffff);
+}
+
+.tabs-silver > * {
+  color: currentColor;
+}
+.tabs-silver > * :not(.active):hover {
+  background-color: hsla(var(--silver-hs), var(--silver-l), 0.075);
+}
+.tabs-silver > * .active {
+  background-color: hsla(var(--silver-hs), var(--silver-l), 0.125);
+  color: hsla(var(--silver-hs), calc(var(--silver-l) - 10%), var(--silver-a));
+}
+.tabs-silver.fill > :hover, .tabs-silver.prefill > :hover {
+  background-color: hsla(var(--silver-hs), var(--silver-l), 0.25);
+}
+.tabs-silver.fill > .active, .tabs-silver.prefill > .active {
+  background-color: hsla(var(--silver-hs), var(--silver-l), var(--silver-a));
+  color: var(--silver-c, #ffffff);
+}
+.tabs-silver.prefill > * {
+  background-color: hsla(var(--silver-hs), var(--silver-l), 0.125);
+}
+
+.dots-silver > * {
+  color: currentColor;
+}
+.dots-silver > * :not(.active):hover {
+  background-color: hsla(var(--silver-hs), var(--silver-l), 0.075);
+}
+.dots-silver > * .active {
+  background-color: hsla(var(--silver-hs), var(--silver-l), 0.125);
+  color: hsla(var(--silver-hs), calc(var(--silver-l) - 10%), var(--silver-a));
+}
+.dots-silver.fill > :hover, .dots-silver.prefill > :hover {
+  background-color: hsla(var(--silver-hs), var(--silver-l), 0.25);
+}
+.dots-silver.fill > .active, .dots-silver.prefill > .active {
+  background-color: hsla(var(--silver-hs), var(--silver-l), var(--silver-a));
+  color: var(--silver-c, #ffffff);
+}
+.dots-silver.prefill > * {
+  background-color: hsla(var(--silver-hs), var(--silver-l), 0.125);
+}
+
+.border-silver {
+  border-color: #bfbfbf;
+}
+
+.text-gold {
+  color: var(--gold, #ffdf00);
+}
+
+a.text-gold:hover, button.text-gold:hover, .link.text-gold:hover {
+  color: hsla(var(--gold-hs), calc(var(--gold-l) - 10%), var(--gold-a));
+}
+a.text-gold:active, button.text-gold:active, .link.text-gold:active {
+  color: hsla(var(--gold-hs), calc(var(--gold-l) - 20%), var(--gold-a));
+}
+
+.text-neon-gold {
+  /* color: var(--white); */
+  text-shadow: 0 0 20px var(--gold, #ffdf00), 0 0 10px var(--white);
+}
+
+.bg-gold {
+  background-color: hsla(var(--gold-hs), var(--gold-l), var(--gold-a));
+  color: var(--gold-c, #ffffff);
+  border-color: hsla(var(--gold-hs), calc(var(--gold-l) - 20%), var(--gold-a));
+}
+.bg-gold.is-blur {
+  background-color: hsla(var(--gold-hs), var(--gold-l), 0.5);
+}
+.bg-gold.is-blur:hover {
+  background-color: hsla(var(--gold-hs), var(--gold-l), 0.75);
+}
+
+a.bg-gold:hover, button.bg-gold:hover, .link.bg-gold:hover {
+  background-color: hsla(var(--gold-hs), calc(var(--gold-l) - 10%), var(--gold-a));
+  border-color: hsla(var(--gold-hs), var(--gold-l), var(--gold-a));
+  color: var(--gold-c, #ffffff);
+}
+a.bg-gold:active, button.bg-gold:active, .link.bg-gold:active {
+  background-color: hsla(var(--gold-hs), calc(var(--gold-l) - 20%), var(--gold-a));
+}
+
+.bg-g-gold {
+  background-image: linear-gradient(var(--gold, #ffdf00), hsla(var(--gold-hs), calc(var(--gold-l) - 20%), var(--gold-a)));
+  color: var(--gold-c, #ffffff);
+  border: none;
+}
+
+a.bg-g-gold:hover, button.bg-g-gold:hover, .link.bg-g-gold:hover {
+  background-image: linear-gradient(hsla(var(--gold-hs), calc(var(--gold-l) + 20%), var(--gold-a)), var(--gold, #ffdf00));
+  color: var(--gold-c, #ffffff);
+}
+a.bg-g-gold:active, button.bg-g-gold:active, .link.bg-g-gold:active {
+  background-image: linear-gradient(hsla(var(--gold-hs), calc(var(--gold-l) - 20%), var(--gold-a)), var(--gold, #ffdf00));
+}
+
+.bg-outline-gold {
+  background-color: transparent;
+  color: hsla(var(--gold-hs), var(--gold-l), var(--gold-a));
+  border: thin solid;
+}
+.bg-outline-gold.is-blur {
+  background-color: hsla(var(--gold-hs), calc(var(--gold-l) - 45%), 0.5);
+}
+
+a.bg-outline-gold:hover, button.bg-outline-gold:hover, .bg-outline-gold.link:hover {
+  background-color: hsla(var(--gold-hs), calc(var(--gold-l) - 10%), var(--gold-a));
+  color: var(--gold-c, #ffffff);
+}
+a.bg-outline-gold.active, a.bg-outline-gold:active, button.bg-outline-gold.active, button.bg-outline-gold:active, .bg-outline-gold.link.active, .bg-outline-gold.link:active {
+  background-color: hsla(var(--gold-hs), calc(var(--gold-l) - 20%), var(--gold-a));
+  color: var(--gold-c, #ffffff);
+}
+
+.tabs-gold > * {
+  color: currentColor;
+}
+.tabs-gold > * :not(.active):hover {
+  background-color: hsla(var(--gold-hs), var(--gold-l), 0.075);
+}
+.tabs-gold > * .active {
+  background-color: hsla(var(--gold-hs), var(--gold-l), 0.125);
+  color: hsla(var(--gold-hs), calc(var(--gold-l) - 10%), var(--gold-a));
+}
+.tabs-gold.fill > :hover, .tabs-gold.prefill > :hover {
+  background-color: hsla(var(--gold-hs), var(--gold-l), 0.25);
+}
+.tabs-gold.fill > .active, .tabs-gold.prefill > .active {
+  background-color: hsla(var(--gold-hs), var(--gold-l), var(--gold-a));
+  color: var(--gold-c, #ffffff);
+}
+.tabs-gold.prefill > * {
+  background-color: hsla(var(--gold-hs), var(--gold-l), 0.125);
+}
+
+.dots-gold > * {
+  color: currentColor;
+}
+.dots-gold > * :not(.active):hover {
+  background-color: hsla(var(--gold-hs), var(--gold-l), 0.075);
+}
+.dots-gold > * .active {
+  background-color: hsla(var(--gold-hs), var(--gold-l), 0.125);
+  color: hsla(var(--gold-hs), calc(var(--gold-l) - 10%), var(--gold-a));
+}
+.dots-gold.fill > :hover, .dots-gold.prefill > :hover {
+  background-color: hsla(var(--gold-hs), var(--gold-l), 0.25);
+}
+.dots-gold.fill > .active, .dots-gold.prefill > .active {
+  background-color: hsla(var(--gold-hs), var(--gold-l), var(--gold-a));
+  color: var(--gold-c, #ffffff);
+}
+.dots-gold.prefill > * {
+  background-color: hsla(var(--gold-hs), var(--gold-l), 0.125);
+}
+
+.border-gold {
+  border-color: #ffdf00;
+}
+
+.text-info {
+  color: var(--info, #17a2b8);
+}
+
+a.text-info:hover, button.text-info:hover, .link.text-info:hover {
+  color: hsla(var(--info-hs), calc(var(--info-l) - 10%), var(--info-a));
+}
+a.text-info:active, button.text-info:active, .link.text-info:active {
+  color: hsla(var(--info-hs), calc(var(--info-l) - 20%), var(--info-a));
+}
+
+.text-neon-info {
+  /* color: var(--white); */
+  text-shadow: 0 0 20px var(--info, #17a2b8), 0 0 10px var(--white);
+}
+
+.bg-info {
+  background-color: hsla(var(--info-hs), var(--info-l), var(--info-a));
+  color: var(--info-c, #ffffff);
+  border-color: hsla(var(--info-hs), calc(var(--info-l) - 20%), var(--info-a));
+}
+.bg-info.is-blur {
+  background-color: hsla(var(--info-hs), var(--info-l), 0.5);
+}
+.bg-info.is-blur:hover {
+  background-color: hsla(var(--info-hs), var(--info-l), 0.75);
+}
+
+a.bg-info:hover, button.bg-info:hover, .link.bg-info:hover {
+  background-color: hsla(var(--info-hs), calc(var(--info-l) - 10%), var(--info-a));
+  border-color: hsla(var(--info-hs), var(--info-l), var(--info-a));
+  color: var(--info-c, #ffffff);
+}
+a.bg-info:active, button.bg-info:active, .link.bg-info:active {
+  background-color: hsla(var(--info-hs), calc(var(--info-l) - 20%), var(--info-a));
+}
+
+.bg-g-info {
+  background-image: linear-gradient(var(--info, #17a2b8), hsla(var(--info-hs), calc(var(--info-l) - 20%), var(--info-a)));
+  color: var(--info-c, #ffffff);
+  border: none;
+}
+
+a.bg-g-info:hover, button.bg-g-info:hover, .link.bg-g-info:hover {
+  background-image: linear-gradient(hsla(var(--info-hs), calc(var(--info-l) + 20%), var(--info-a)), var(--info, #17a2b8));
+  color: var(--info-c, #ffffff);
+}
+a.bg-g-info:active, button.bg-g-info:active, .link.bg-g-info:active {
+  background-image: linear-gradient(hsla(var(--info-hs), calc(var(--info-l) - 20%), var(--info-a)), var(--info, #17a2b8));
+}
+
+.bg-outline-info {
+  background-color: transparent;
+  color: hsla(var(--info-hs), var(--info-l), var(--info-a));
+  border: thin solid;
+}
+.bg-outline-info.is-blur {
+  background-color: hsla(var(--info-hs), calc(var(--info-l) - 45%), 0.5);
+}
+
+a.bg-outline-info:hover, button.bg-outline-info:hover, .bg-outline-info.link:hover {
+  background-color: hsla(var(--info-hs), calc(var(--info-l) - 10%), var(--info-a));
+  color: var(--info-c, #ffffff);
+}
+a.bg-outline-info.active, a.bg-outline-info:active, button.bg-outline-info.active, button.bg-outline-info:active, .bg-outline-info.link.active, .bg-outline-info.link:active {
+  background-color: hsla(var(--info-hs), calc(var(--info-l) - 20%), var(--info-a));
+  color: var(--info-c, #ffffff);
+}
+
+.tabs-info > * {
+  color: currentColor;
+}
+.tabs-info > * :not(.active):hover {
+  background-color: hsla(var(--info-hs), var(--info-l), 0.075);
+}
+.tabs-info > * .active {
+  background-color: hsla(var(--info-hs), var(--info-l), 0.125);
+  color: hsla(var(--info-hs), calc(var(--info-l) - 10%), var(--info-a));
+}
+.tabs-info.fill > :hover, .tabs-info.prefill > :hover {
+  background-color: hsla(var(--info-hs), var(--info-l), 0.25);
+}
+.tabs-info.fill > .active, .tabs-info.prefill > .active {
+  background-color: hsla(var(--info-hs), var(--info-l), var(--info-a));
+  color: var(--info-c, #ffffff);
+}
+.tabs-info.prefill > * {
+  background-color: hsla(var(--info-hs), var(--info-l), 0.125);
+}
+
+.dots-info > * {
+  color: currentColor;
+}
+.dots-info > * :not(.active):hover {
+  background-color: hsla(var(--info-hs), var(--info-l), 0.075);
+}
+.dots-info > * .active {
+  background-color: hsla(var(--info-hs), var(--info-l), 0.125);
+  color: hsla(var(--info-hs), calc(var(--info-l) - 10%), var(--info-a));
+}
+.dots-info.fill > :hover, .dots-info.prefill > :hover {
+  background-color: hsla(var(--info-hs), var(--info-l), 0.25);
+}
+.dots-info.fill > .active, .dots-info.prefill > .active {
+  background-color: hsla(var(--info-hs), var(--info-l), var(--info-a));
+  color: var(--info-c, #ffffff);
+}
+.dots-info.prefill > * {
+  background-color: hsla(var(--info-hs), var(--info-l), 0.125);
+}
+
+.border-info {
+  border-color: #17a2b8;
+}
+
+.text-error {
+  color: var(--error, #dc3545);
+}
+
+a.text-error:hover, button.text-error:hover, .link.text-error:hover {
+  color: hsla(var(--error-hs), calc(var(--error-l) - 10%), var(--error-a));
+}
+a.text-error:active, button.text-error:active, .link.text-error:active {
+  color: hsla(var(--error-hs), calc(var(--error-l) - 20%), var(--error-a));
+}
+
+.text-neon-error {
+  /* color: var(--white); */
+  text-shadow: 0 0 20px var(--error, #dc3545), 0 0 10px var(--white);
+}
+
+.bg-error {
+  background-color: hsla(var(--error-hs), var(--error-l), var(--error-a));
+  color: var(--error-c, #ffffff);
+  border-color: hsla(var(--error-hs), calc(var(--error-l) - 20%), var(--error-a));
+}
+.bg-error.is-blur {
+  background-color: hsla(var(--error-hs), var(--error-l), 0.5);
+}
+.bg-error.is-blur:hover {
+  background-color: hsla(var(--error-hs), var(--error-l), 0.75);
+}
+
+a.bg-error:hover, button.bg-error:hover, .link.bg-error:hover {
+  background-color: hsla(var(--error-hs), calc(var(--error-l) - 10%), var(--error-a));
+  border-color: hsla(var(--error-hs), var(--error-l), var(--error-a));
+  color: var(--error-c, #ffffff);
+}
+a.bg-error:active, button.bg-error:active, .link.bg-error:active {
+  background-color: hsla(var(--error-hs), calc(var(--error-l) - 20%), var(--error-a));
+}
+
+.bg-g-error {
+  background-image: linear-gradient(var(--error, #dc3545), hsla(var(--error-hs), calc(var(--error-l) - 20%), var(--error-a)));
+  color: var(--error-c, #ffffff);
+  border: none;
+}
+
+a.bg-g-error:hover, button.bg-g-error:hover, .link.bg-g-error:hover {
+  background-image: linear-gradient(hsla(var(--error-hs), calc(var(--error-l) + 20%), var(--error-a)), var(--error, #dc3545));
+  color: var(--error-c, #ffffff);
+}
+a.bg-g-error:active, button.bg-g-error:active, .link.bg-g-error:active {
+  background-image: linear-gradient(hsla(var(--error-hs), calc(var(--error-l) - 20%), var(--error-a)), var(--error, #dc3545));
+}
+
+.bg-outline-error {
+  background-color: transparent;
+  color: hsla(var(--error-hs), var(--error-l), var(--error-a));
+  border: thin solid;
+}
+.bg-outline-error.is-blur {
+  background-color: hsla(var(--error-hs), calc(var(--error-l) - 45%), 0.5);
+}
+
+a.bg-outline-error:hover, button.bg-outline-error:hover, .bg-outline-error.link:hover {
+  background-color: hsla(var(--error-hs), calc(var(--error-l) - 10%), var(--error-a));
+  color: var(--error-c, #ffffff);
+}
+a.bg-outline-error.active, a.bg-outline-error:active, button.bg-outline-error.active, button.bg-outline-error:active, .bg-outline-error.link.active, .bg-outline-error.link:active {
+  background-color: hsla(var(--error-hs), calc(var(--error-l) - 20%), var(--error-a));
+  color: var(--error-c, #ffffff);
+}
+
+.tabs-error > * {
+  color: currentColor;
+}
+.tabs-error > * :not(.active):hover {
+  background-color: hsla(var(--error-hs), var(--error-l), 0.075);
+}
+.tabs-error > * .active {
+  background-color: hsla(var(--error-hs), var(--error-l), 0.125);
+  color: hsla(var(--error-hs), calc(var(--error-l) - 10%), var(--error-a));
+}
+.tabs-error.fill > :hover, .tabs-error.prefill > :hover {
+  background-color: hsla(var(--error-hs), var(--error-l), 0.25);
+}
+.tabs-error.fill > .active, .tabs-error.prefill > .active {
+  background-color: hsla(var(--error-hs), var(--error-l), var(--error-a));
+  color: var(--error-c, #ffffff);
+}
+.tabs-error.prefill > * {
+  background-color: hsla(var(--error-hs), var(--error-l), 0.125);
+}
+
+.dots-error > * {
+  color: currentColor;
+}
+.dots-error > * :not(.active):hover {
+  background-color: hsla(var(--error-hs), var(--error-l), 0.075);
+}
+.dots-error > * .active {
+  background-color: hsla(var(--error-hs), var(--error-l), 0.125);
+  color: hsla(var(--error-hs), calc(var(--error-l) - 10%), var(--error-a));
+}
+.dots-error.fill > :hover, .dots-error.prefill > :hover {
+  background-color: hsla(var(--error-hs), var(--error-l), 0.25);
+}
+.dots-error.fill > .active, .dots-error.prefill > .active {
+  background-color: hsla(var(--error-hs), var(--error-l), var(--error-a));
+  color: var(--error-c, #ffffff);
+}
+.dots-error.prefill > * {
+  background-color: hsla(var(--error-hs), var(--error-l), 0.125);
+}
+
+.border-error {
+  border-color: #dc3545;
+}
+
+.text-success {
+  color: var(--success, #24b624);
+}
+
+a.text-success:hover, button.text-success:hover, .link.text-success:hover {
+  color: hsla(var(--success-hs), calc(var(--success-l) - 10%), var(--success-a));
+}
+a.text-success:active, button.text-success:active, .link.text-success:active {
+  color: hsla(var(--success-hs), calc(var(--success-l) - 20%), var(--success-a));
+}
+
+.text-neon-success {
+  /* color: var(--white); */
+  text-shadow: 0 0 20px var(--success, #24b624), 0 0 10px var(--white);
+}
+
+.bg-success {
+  background-color: hsla(var(--success-hs), var(--success-l), var(--success-a));
+  color: var(--success-c, #ffffff);
+  border-color: hsla(var(--success-hs), calc(var(--success-l) - 20%), var(--success-a));
+}
+.bg-success.is-blur {
+  background-color: hsla(var(--success-hs), var(--success-l), 0.5);
+}
+.bg-success.is-blur:hover {
+  background-color: hsla(var(--success-hs), var(--success-l), 0.75);
+}
+
+a.bg-success:hover, button.bg-success:hover, .link.bg-success:hover {
+  background-color: hsla(var(--success-hs), calc(var(--success-l) - 10%), var(--success-a));
+  border-color: hsla(var(--success-hs), var(--success-l), var(--success-a));
+  color: var(--success-c, #ffffff);
+}
+a.bg-success:active, button.bg-success:active, .link.bg-success:active {
+  background-color: hsla(var(--success-hs), calc(var(--success-l) - 20%), var(--success-a));
+}
+
+.bg-g-success {
+  background-image: linear-gradient(var(--success, #24b624), hsla(var(--success-hs), calc(var(--success-l) - 20%), var(--success-a)));
+  color: var(--success-c, #ffffff);
+  border: none;
+}
+
+a.bg-g-success:hover, button.bg-g-success:hover, .link.bg-g-success:hover {
+  background-image: linear-gradient(hsla(var(--success-hs), calc(var(--success-l) + 20%), var(--success-a)), var(--success, #24b624));
+  color: var(--success-c, #ffffff);
+}
+a.bg-g-success:active, button.bg-g-success:active, .link.bg-g-success:active {
+  background-image: linear-gradient(hsla(var(--success-hs), calc(var(--success-l) - 20%), var(--success-a)), var(--success, #24b624));
+}
+
+.bg-outline-success {
+  background-color: transparent;
+  color: hsla(var(--success-hs), var(--success-l), var(--success-a));
+  border: thin solid;
+}
+.bg-outline-success.is-blur {
+  background-color: hsla(var(--success-hs), calc(var(--success-l) - 45%), 0.5);
+}
+
+a.bg-outline-success:hover, button.bg-outline-success:hover, .bg-outline-success.link:hover {
+  background-color: hsla(var(--success-hs), calc(var(--success-l) - 10%), var(--success-a));
+  color: var(--success-c, #ffffff);
+}
+a.bg-outline-success.active, a.bg-outline-success:active, button.bg-outline-success.active, button.bg-outline-success:active, .bg-outline-success.link.active, .bg-outline-success.link:active {
+  background-color: hsla(var(--success-hs), calc(var(--success-l) - 20%), var(--success-a));
+  color: var(--success-c, #ffffff);
+}
+
+.tabs-success > * {
+  color: currentColor;
+}
+.tabs-success > * :not(.active):hover {
+  background-color: hsla(var(--success-hs), var(--success-l), 0.075);
+}
+.tabs-success > * .active {
+  background-color: hsla(var(--success-hs), var(--success-l), 0.125);
+  color: hsla(var(--success-hs), calc(var(--success-l) - 10%), var(--success-a));
+}
+.tabs-success.fill > :hover, .tabs-success.prefill > :hover {
+  background-color: hsla(var(--success-hs), var(--success-l), 0.25);
+}
+.tabs-success.fill > .active, .tabs-success.prefill > .active {
+  background-color: hsla(var(--success-hs), var(--success-l), var(--success-a));
+  color: var(--success-c, #ffffff);
+}
+.tabs-success.prefill > * {
+  background-color: hsla(var(--success-hs), var(--success-l), 0.125);
+}
+
+.dots-success > * {
+  color: currentColor;
+}
+.dots-success > * :not(.active):hover {
+  background-color: hsla(var(--success-hs), var(--success-l), 0.075);
+}
+.dots-success > * .active {
+  background-color: hsla(var(--success-hs), var(--success-l), 0.125);
+  color: hsla(var(--success-hs), calc(var(--success-l) - 10%), var(--success-a));
+}
+.dots-success.fill > :hover, .dots-success.prefill > :hover {
+  background-color: hsla(var(--success-hs), var(--success-l), 0.25);
+}
+.dots-success.fill > .active, .dots-success.prefill > .active {
+  background-color: hsla(var(--success-hs), var(--success-l), var(--success-a));
+  color: var(--success-c, #ffffff);
+}
+.dots-success.prefill > * {
+  background-color: hsla(var(--success-hs), var(--success-l), 0.125);
+}
+
+.border-success {
+  border-color: #24b624;
+}
+
+.text-warn {
+  color: var(--warn, #ffa500);
+}
+
+a.text-warn:hover, button.text-warn:hover, .link.text-warn:hover {
+  color: hsla(var(--warn-hs), calc(var(--warn-l) - 10%), var(--warn-a));
+}
+a.text-warn:active, button.text-warn:active, .link.text-warn:active {
+  color: hsla(var(--warn-hs), calc(var(--warn-l) - 20%), var(--warn-a));
+}
+
+.text-neon-warn {
+  /* color: var(--white); */
+  text-shadow: 0 0 20px var(--warn, #ffa500), 0 0 10px var(--white);
+}
+
+.bg-warn {
+  background-color: hsla(var(--warn-hs), var(--warn-l), var(--warn-a));
+  color: var(--warn-c, #000000);
+  border-color: hsla(var(--warn-hs), calc(var(--warn-l) - 20%), var(--warn-a));
+}
+.bg-warn.is-blur {
+  background-color: hsla(var(--warn-hs), var(--warn-l), 0.5);
+}
+.bg-warn.is-blur:hover {
+  background-color: hsla(var(--warn-hs), var(--warn-l), 0.75);
+}
+
+a.bg-warn:hover, button.bg-warn:hover, .link.bg-warn:hover {
+  background-color: hsla(var(--warn-hs), calc(var(--warn-l) - 10%), var(--warn-a));
+  border-color: hsla(var(--warn-hs), var(--warn-l), var(--warn-a));
+  color: var(--warn-c, #000000);
+}
+a.bg-warn:active, button.bg-warn:active, .link.bg-warn:active {
+  background-color: hsla(var(--warn-hs), calc(var(--warn-l) - 20%), var(--warn-a));
+}
+
+.bg-g-warn {
+  background-image: linear-gradient(var(--warn, #ffa500), hsla(var(--warn-hs), calc(var(--warn-l) - 20%), var(--warn-a)));
+  color: var(--warn-c, #000000);
+  border: none;
+}
+
+a.bg-g-warn:hover, button.bg-g-warn:hover, .link.bg-g-warn:hover {
+  background-image: linear-gradient(hsla(var(--warn-hs), calc(var(--warn-l) + 20%), var(--warn-a)), var(--warn, #ffa500));
+  color: var(--warn-c, #000000);
+}
+a.bg-g-warn:active, button.bg-g-warn:active, .link.bg-g-warn:active {
+  background-image: linear-gradient(hsla(var(--warn-hs), calc(var(--warn-l) - 20%), var(--warn-a)), var(--warn, #ffa500));
+}
+
+.bg-outline-warn {
+  background-color: transparent;
+  color: hsla(var(--warn-hs), var(--warn-l), var(--warn-a));
+  border: thin solid;
+}
+.bg-outline-warn.is-blur {
+  background-color: hsla(var(--warn-hs), calc(var(--warn-l) - 45%), 0.5);
+}
+
+a.bg-outline-warn:hover, button.bg-outline-warn:hover, .bg-outline-warn.link:hover {
+  background-color: hsla(var(--warn-hs), calc(var(--warn-l) - 10%), var(--warn-a));
+  color: var(--warn-c, #000000);
+}
+a.bg-outline-warn.active, a.bg-outline-warn:active, button.bg-outline-warn.active, button.bg-outline-warn:active, .bg-outline-warn.link.active, .bg-outline-warn.link:active {
+  background-color: hsla(var(--warn-hs), calc(var(--warn-l) - 20%), var(--warn-a));
+  color: var(--warn-c, #000000);
+}
+
+.tabs-warn > * {
+  color: currentColor;
+}
+.tabs-warn > * :not(.active):hover {
+  background-color: hsla(var(--warn-hs), var(--warn-l), 0.075);
+}
+.tabs-warn > * .active {
+  background-color: hsla(var(--warn-hs), var(--warn-l), 0.125);
+  color: hsla(var(--warn-hs), calc(var(--warn-l) - 10%), var(--warn-a));
+}
+.tabs-warn.fill > :hover, .tabs-warn.prefill > :hover {
+  background-color: hsla(var(--warn-hs), var(--warn-l), 0.25);
+}
+.tabs-warn.fill > .active, .tabs-warn.prefill > .active {
+  background-color: hsla(var(--warn-hs), var(--warn-l), var(--warn-a));
+  color: var(--warn-c, #000000);
+}
+.tabs-warn.prefill > * {
+  background-color: hsla(var(--warn-hs), var(--warn-l), 0.125);
+}
+
+.dots-warn > * {
+  color: currentColor;
+}
+.dots-warn > * :not(.active):hover {
+  background-color: hsla(var(--warn-hs), var(--warn-l), 0.075);
+}
+.dots-warn > * .active {
+  background-color: hsla(var(--warn-hs), var(--warn-l), 0.125);
+  color: hsla(var(--warn-hs), calc(var(--warn-l) - 10%), var(--warn-a));
+}
+.dots-warn.fill > :hover, .dots-warn.prefill > :hover {
+  background-color: hsla(var(--warn-hs), var(--warn-l), 0.25);
+}
+.dots-warn.fill > .active, .dots-warn.prefill > .active {
+  background-color: hsla(var(--warn-hs), var(--warn-l), var(--warn-a));
+  color: var(--warn-c, #000000);
+}
+.dots-warn.prefill > * {
+  background-color: hsla(var(--warn-hs), var(--warn-l), 0.125);
+}
+
+.border-warn {
+  border-color: #ffa500;
+}
+
+.text-red {
+  color: var(--red, #c54646);
+}
+
+a.text-red:hover, button.text-red:hover, .link.text-red:hover {
+  color: hsla(var(--red-hs), calc(var(--red-l) - 10%), var(--red-a));
+}
+a.text-red:active, button.text-red:active, .link.text-red:active {
+  color: hsla(var(--red-hs), calc(var(--red-l) - 20%), var(--red-a));
+}
+
+.text-neon-red {
+  /* color: var(--white); */
+  text-shadow: 0 0 20px var(--red, #c54646), 0 0 10px var(--white);
+}
+
+.bg-red {
+  background-color: hsla(var(--red-hs), var(--red-l), var(--red-a));
+  color: var(--red-c, #ffffff);
+  border-color: hsla(var(--red-hs), calc(var(--red-l) - 20%), var(--red-a));
+}
+.bg-red.is-blur {
+  background-color: hsla(var(--red-hs), var(--red-l), 0.5);
+}
+.bg-red.is-blur:hover {
+  background-color: hsla(var(--red-hs), var(--red-l), 0.75);
+}
+
+a.bg-red:hover, button.bg-red:hover, .link.bg-red:hover {
+  background-color: hsla(var(--red-hs), calc(var(--red-l) - 10%), var(--red-a));
+  border-color: hsla(var(--red-hs), var(--red-l), var(--red-a));
+  color: var(--red-c, #ffffff);
+}
+a.bg-red:active, button.bg-red:active, .link.bg-red:active {
+  background-color: hsla(var(--red-hs), calc(var(--red-l) - 20%), var(--red-a));
+}
+
+.bg-g-red {
+  background-image: linear-gradient(var(--red, #c54646), hsla(var(--red-hs), calc(var(--red-l) - 20%), var(--red-a)));
+  color: var(--red-c, #ffffff);
+  border: none;
+}
+
+a.bg-g-red:hover, button.bg-g-red:hover, .link.bg-g-red:hover {
+  background-image: linear-gradient(hsla(var(--red-hs), calc(var(--red-l) + 20%), var(--red-a)), var(--red, #c54646));
+  color: var(--red-c, #ffffff);
+}
+a.bg-g-red:active, button.bg-g-red:active, .link.bg-g-red:active {
+  background-image: linear-gradient(hsla(var(--red-hs), calc(var(--red-l) - 20%), var(--red-a)), var(--red, #c54646));
+}
+
+.bg-outline-red {
+  background-color: transparent;
+  color: hsla(var(--red-hs), var(--red-l), var(--red-a));
+  border: thin solid;
+}
+.bg-outline-red.is-blur {
+  background-color: hsla(var(--red-hs), calc(var(--red-l) - 45%), 0.5);
+}
+
+a.bg-outline-red:hover, button.bg-outline-red:hover, .bg-outline-red.link:hover {
+  background-color: hsla(var(--red-hs), calc(var(--red-l) - 10%), var(--red-a));
+  color: var(--red-c, #ffffff);
+}
+a.bg-outline-red.active, a.bg-outline-red:active, button.bg-outline-red.active, button.bg-outline-red:active, .bg-outline-red.link.active, .bg-outline-red.link:active {
+  background-color: hsla(var(--red-hs), calc(var(--red-l) - 20%), var(--red-a));
+  color: var(--red-c, #ffffff);
+}
+
+.tabs-red > * {
+  color: currentColor;
+}
+.tabs-red > * :not(.active):hover {
+  background-color: hsla(var(--red-hs), var(--red-l), 0.075);
+}
+.tabs-red > * .active {
+  background-color: hsla(var(--red-hs), var(--red-l), 0.125);
+  color: hsla(var(--red-hs), calc(var(--red-l) - 10%), var(--red-a));
+}
+.tabs-red.fill > :hover, .tabs-red.prefill > :hover {
+  background-color: hsla(var(--red-hs), var(--red-l), 0.25);
+}
+.tabs-red.fill > .active, .tabs-red.prefill > .active {
+  background-color: hsla(var(--red-hs), var(--red-l), var(--red-a));
+  color: var(--red-c, #ffffff);
+}
+.tabs-red.prefill > * {
+  background-color: hsla(var(--red-hs), var(--red-l), 0.125);
+}
+
+.dots-red > * {
+  color: currentColor;
+}
+.dots-red > * :not(.active):hover {
+  background-color: hsla(var(--red-hs), var(--red-l), 0.075);
+}
+.dots-red > * .active {
+  background-color: hsla(var(--red-hs), var(--red-l), 0.125);
+  color: hsla(var(--red-hs), calc(var(--red-l) - 10%), var(--red-a));
+}
+.dots-red.fill > :hover, .dots-red.prefill > :hover {
+  background-color: hsla(var(--red-hs), var(--red-l), 0.25);
+}
+.dots-red.fill > .active, .dots-red.prefill > .active {
+  background-color: hsla(var(--red-hs), var(--red-l), var(--red-a));
+  color: var(--red-c, #ffffff);
+}
+.dots-red.prefill > * {
+  background-color: hsla(var(--red-hs), var(--red-l), 0.125);
+}
+
+.border-red {
+  border-color: #c54646;
+}
+
+.text-orange {
+  color: var(--orange, #f58220);
+}
+
+a.text-orange:hover, button.text-orange:hover, .link.text-orange:hover {
+  color: hsla(var(--orange-hs), calc(var(--orange-l) - 10%), var(--orange-a));
+}
+a.text-orange:active, button.text-orange:active, .link.text-orange:active {
+  color: hsla(var(--orange-hs), calc(var(--orange-l) - 20%), var(--orange-a));
+}
+
+.text-neon-orange {
+  /* color: var(--white); */
+  text-shadow: 0 0 20px var(--orange, #f58220), 0 0 10px var(--white);
+}
+
+.bg-orange {
+  background-color: hsla(var(--orange-hs), var(--orange-l), var(--orange-a));
+  color: var(--orange-c, #000000);
+  border-color: hsla(var(--orange-hs), calc(var(--orange-l) - 20%), var(--orange-a));
+}
+.bg-orange.is-blur {
+  background-color: hsla(var(--orange-hs), var(--orange-l), 0.5);
+}
+.bg-orange.is-blur:hover {
+  background-color: hsla(var(--orange-hs), var(--orange-l), 0.75);
+}
+
+a.bg-orange:hover, button.bg-orange:hover, .link.bg-orange:hover {
+  background-color: hsla(var(--orange-hs), calc(var(--orange-l) - 10%), var(--orange-a));
+  border-color: hsla(var(--orange-hs), var(--orange-l), var(--orange-a));
+  color: var(--orange-c, #000000);
+}
+a.bg-orange:active, button.bg-orange:active, .link.bg-orange:active {
+  background-color: hsla(var(--orange-hs), calc(var(--orange-l) - 20%), var(--orange-a));
+}
+
+.bg-g-orange {
+  background-image: linear-gradient(var(--orange, #f58220), hsla(var(--orange-hs), calc(var(--orange-l) - 20%), var(--orange-a)));
+  color: var(--orange-c, #000000);
+  border: none;
+}
+
+a.bg-g-orange:hover, button.bg-g-orange:hover, .link.bg-g-orange:hover {
+  background-image: linear-gradient(hsla(var(--orange-hs), calc(var(--orange-l) + 20%), var(--orange-a)), var(--orange, #f58220));
+  color: var(--orange-c, #000000);
+}
+a.bg-g-orange:active, button.bg-g-orange:active, .link.bg-g-orange:active {
+  background-image: linear-gradient(hsla(var(--orange-hs), calc(var(--orange-l) - 20%), var(--orange-a)), var(--orange, #f58220));
+}
+
+.bg-outline-orange {
+  background-color: transparent;
+  color: hsla(var(--orange-hs), var(--orange-l), var(--orange-a));
+  border: thin solid;
+}
+.bg-outline-orange.is-blur {
+  background-color: hsla(var(--orange-hs), calc(var(--orange-l) - 45%), 0.5);
+}
+
+a.bg-outline-orange:hover, button.bg-outline-orange:hover, .bg-outline-orange.link:hover {
+  background-color: hsla(var(--orange-hs), calc(var(--orange-l) - 10%), var(--orange-a));
+  color: var(--orange-c, #000000);
+}
+a.bg-outline-orange.active, a.bg-outline-orange:active, button.bg-outline-orange.active, button.bg-outline-orange:active, .bg-outline-orange.link.active, .bg-outline-orange.link:active {
+  background-color: hsla(var(--orange-hs), calc(var(--orange-l) - 20%), var(--orange-a));
+  color: var(--orange-c, #000000);
+}
+
+.tabs-orange > * {
+  color: currentColor;
+}
+.tabs-orange > * :not(.active):hover {
+  background-color: hsla(var(--orange-hs), var(--orange-l), 0.075);
+}
+.tabs-orange > * .active {
+  background-color: hsla(var(--orange-hs), var(--orange-l), 0.125);
+  color: hsla(var(--orange-hs), calc(var(--orange-l) - 10%), var(--orange-a));
+}
+.tabs-orange.fill > :hover, .tabs-orange.prefill > :hover {
+  background-color: hsla(var(--orange-hs), var(--orange-l), 0.25);
+}
+.tabs-orange.fill > .active, .tabs-orange.prefill > .active {
+  background-color: hsla(var(--orange-hs), var(--orange-l), var(--orange-a));
+  color: var(--orange-c, #000000);
+}
+.tabs-orange.prefill > * {
+  background-color: hsla(var(--orange-hs), var(--orange-l), 0.125);
+}
+
+.dots-orange > * {
+  color: currentColor;
+}
+.dots-orange > * :not(.active):hover {
+  background-color: hsla(var(--orange-hs), var(--orange-l), 0.075);
+}
+.dots-orange > * .active {
+  background-color: hsla(var(--orange-hs), var(--orange-l), 0.125);
+  color: hsla(var(--orange-hs), calc(var(--orange-l) - 10%), var(--orange-a));
+}
+.dots-orange.fill > :hover, .dots-orange.prefill > :hover {
+  background-color: hsla(var(--orange-hs), var(--orange-l), 0.25);
+}
+.dots-orange.fill > .active, .dots-orange.prefill > .active {
+  background-color: hsla(var(--orange-hs), var(--orange-l), var(--orange-a));
+  color: var(--orange-c, #000000);
+}
+.dots-orange.prefill > * {
+  background-color: hsla(var(--orange-hs), var(--orange-l), 0.125);
+}
+
+.border-orange {
+  border-color: #f58220;
+}
+
+.text-yellow {
+  color: var(--yellow, #c4c400);
+}
+
+a.text-yellow:hover, button.text-yellow:hover, .link.text-yellow:hover {
+  color: hsla(var(--yellow-hs), calc(var(--yellow-l) - 10%), var(--yellow-a));
+}
+a.text-yellow:active, button.text-yellow:active, .link.text-yellow:active {
+  color: hsla(var(--yellow-hs), calc(var(--yellow-l) - 20%), var(--yellow-a));
+}
+
+.text-neon-yellow {
+  /* color: var(--white); */
+  text-shadow: 0 0 20px var(--yellow, #c4c400), 0 0 10px var(--white);
+}
+
+.bg-yellow {
+  background-color: hsla(var(--yellow-hs), var(--yellow-l), var(--yellow-a));
+  color: var(--yellow-c, #000000);
+  border-color: hsla(var(--yellow-hs), calc(var(--yellow-l) - 20%), var(--yellow-a));
+}
+.bg-yellow.is-blur {
+  background-color: hsla(var(--yellow-hs), var(--yellow-l), 0.5);
+}
+.bg-yellow.is-blur:hover {
+  background-color: hsla(var(--yellow-hs), var(--yellow-l), 0.75);
+}
+
+a.bg-yellow:hover, button.bg-yellow:hover, .link.bg-yellow:hover {
+  background-color: hsla(var(--yellow-hs), calc(var(--yellow-l) - 10%), var(--yellow-a));
+  border-color: hsla(var(--yellow-hs), var(--yellow-l), var(--yellow-a));
+  color: var(--yellow-c, #000000);
+}
+a.bg-yellow:active, button.bg-yellow:active, .link.bg-yellow:active {
+  background-color: hsla(var(--yellow-hs), calc(var(--yellow-l) - 20%), var(--yellow-a));
+}
+
+.bg-g-yellow {
+  background-image: linear-gradient(var(--yellow, #c4c400), hsla(var(--yellow-hs), calc(var(--yellow-l) - 20%), var(--yellow-a)));
+  color: var(--yellow-c, #000000);
+  border: none;
+}
+
+a.bg-g-yellow:hover, button.bg-g-yellow:hover, .link.bg-g-yellow:hover {
+  background-image: linear-gradient(hsla(var(--yellow-hs), calc(var(--yellow-l) + 20%), var(--yellow-a)), var(--yellow, #c4c400));
+  color: var(--yellow-c, #000000);
+}
+a.bg-g-yellow:active, button.bg-g-yellow:active, .link.bg-g-yellow:active {
+  background-image: linear-gradient(hsla(var(--yellow-hs), calc(var(--yellow-l) - 20%), var(--yellow-a)), var(--yellow, #c4c400));
+}
+
+.bg-outline-yellow {
+  background-color: transparent;
+  color: hsla(var(--yellow-hs), var(--yellow-l), var(--yellow-a));
+  border: thin solid;
+}
+.bg-outline-yellow.is-blur {
+  background-color: hsla(var(--yellow-hs), calc(var(--yellow-l) - 45%), 0.5);
+}
+
+a.bg-outline-yellow:hover, button.bg-outline-yellow:hover, .bg-outline-yellow.link:hover {
+  background-color: hsla(var(--yellow-hs), calc(var(--yellow-l) - 10%), var(--yellow-a));
+  color: var(--yellow-c, #000000);
+}
+a.bg-outline-yellow.active, a.bg-outline-yellow:active, button.bg-outline-yellow.active, button.bg-outline-yellow:active, .bg-outline-yellow.link.active, .bg-outline-yellow.link:active {
+  background-color: hsla(var(--yellow-hs), calc(var(--yellow-l) - 20%), var(--yellow-a));
+  color: var(--yellow-c, #000000);
+}
+
+.tabs-yellow > * {
+  color: currentColor;
+}
+.tabs-yellow > * :not(.active):hover {
+  background-color: hsla(var(--yellow-hs), var(--yellow-l), 0.075);
+}
+.tabs-yellow > * .active {
+  background-color: hsla(var(--yellow-hs), var(--yellow-l), 0.125);
+  color: hsla(var(--yellow-hs), calc(var(--yellow-l) - 10%), var(--yellow-a));
+}
+.tabs-yellow.fill > :hover, .tabs-yellow.prefill > :hover {
+  background-color: hsla(var(--yellow-hs), var(--yellow-l), 0.25);
+}
+.tabs-yellow.fill > .active, .tabs-yellow.prefill > .active {
+  background-color: hsla(var(--yellow-hs), var(--yellow-l), var(--yellow-a));
+  color: var(--yellow-c, #000000);
+}
+.tabs-yellow.prefill > * {
+  background-color: hsla(var(--yellow-hs), var(--yellow-l), 0.125);
+}
+
+.dots-yellow > * {
+  color: currentColor;
+}
+.dots-yellow > * :not(.active):hover {
+  background-color: hsla(var(--yellow-hs), var(--yellow-l), 0.075);
+}
+.dots-yellow > * .active {
+  background-color: hsla(var(--yellow-hs), var(--yellow-l), 0.125);
+  color: hsla(var(--yellow-hs), calc(var(--yellow-l) - 10%), var(--yellow-a));
+}
+.dots-yellow.fill > :hover, .dots-yellow.prefill > :hover {
+  background-color: hsla(var(--yellow-hs), var(--yellow-l), 0.25);
+}
+.dots-yellow.fill > .active, .dots-yellow.prefill > .active {
+  background-color: hsla(var(--yellow-hs), var(--yellow-l), var(--yellow-a));
+  color: var(--yellow-c, #000000);
+}
+.dots-yellow.prefill > * {
+  background-color: hsla(var(--yellow-hs), var(--yellow-l), 0.125);
+}
+
+.border-yellow {
+  border-color: #c4c400;
+}
+
+.text-green {
+  color: var(--green, #1d5c2e);
+}
+
+a.text-green:hover, button.text-green:hover, .link.text-green:hover {
+  color: hsla(var(--green-hs), calc(var(--green-l) - 10%), var(--green-a));
+}
+a.text-green:active, button.text-green:active, .link.text-green:active {
+  color: hsla(var(--green-hs), calc(var(--green-l) - 20%), var(--green-a));
+}
+
+.text-neon-green {
+  /* color: var(--white); */
+  text-shadow: 0 0 20px var(--green, #1d5c2e), 0 0 10px var(--white);
+}
+
+.bg-green {
+  background-color: hsla(var(--green-hs), var(--green-l), var(--green-a));
+  color: var(--green-c, #ffffff);
+  border-color: hsla(var(--green-hs), calc(var(--green-l) - 20%), var(--green-a));
+}
+.bg-green.is-blur {
+  background-color: hsla(var(--green-hs), var(--green-l), 0.5);
+}
+.bg-green.is-blur:hover {
+  background-color: hsla(var(--green-hs), var(--green-l), 0.75);
+}
+
+a.bg-green:hover, button.bg-green:hover, .link.bg-green:hover {
+  background-color: hsla(var(--green-hs), calc(var(--green-l) - 10%), var(--green-a));
+  border-color: hsla(var(--green-hs), var(--green-l), var(--green-a));
+  color: var(--green-c, #ffffff);
+}
+a.bg-green:active, button.bg-green:active, .link.bg-green:active {
+  background-color: hsla(var(--green-hs), calc(var(--green-l) - 20%), var(--green-a));
+}
+
+.bg-g-green {
+  background-image: linear-gradient(var(--green, #1d5c2e), hsla(var(--green-hs), calc(var(--green-l) - 20%), var(--green-a)));
+  color: var(--green-c, #ffffff);
+  border: none;
+}
+
+a.bg-g-green:hover, button.bg-g-green:hover, .link.bg-g-green:hover {
+  background-image: linear-gradient(hsla(var(--green-hs), calc(var(--green-l) + 20%), var(--green-a)), var(--green, #1d5c2e));
+  color: var(--green-c, #ffffff);
+}
+a.bg-g-green:active, button.bg-g-green:active, .link.bg-g-green:active {
+  background-image: linear-gradient(hsla(var(--green-hs), calc(var(--green-l) - 20%), var(--green-a)), var(--green, #1d5c2e));
+}
+
+.bg-outline-green {
+  background-color: transparent;
+  color: hsla(var(--green-hs), var(--green-l), var(--green-a));
+  border: thin solid;
+}
+.bg-outline-green.is-blur {
+  background-color: hsla(var(--green-hs), calc(var(--green-l) - 45%), 0.5);
+}
+
+a.bg-outline-green:hover, button.bg-outline-green:hover, .bg-outline-green.link:hover {
+  background-color: hsla(var(--green-hs), calc(var(--green-l) - 10%), var(--green-a));
+  color: var(--green-c, #ffffff);
+}
+a.bg-outline-green.active, a.bg-outline-green:active, button.bg-outline-green.active, button.bg-outline-green:active, .bg-outline-green.link.active, .bg-outline-green.link:active {
+  background-color: hsla(var(--green-hs), calc(var(--green-l) - 20%), var(--green-a));
+  color: var(--green-c, #ffffff);
+}
+
+.tabs-green > * {
+  color: currentColor;
+}
+.tabs-green > * :not(.active):hover {
+  background-color: hsla(var(--green-hs), var(--green-l), 0.075);
+}
+.tabs-green > * .active {
+  background-color: hsla(var(--green-hs), var(--green-l), 0.125);
+  color: hsla(var(--green-hs), calc(var(--green-l) - 10%), var(--green-a));
+}
+.tabs-green.fill > :hover, .tabs-green.prefill > :hover {
+  background-color: hsla(var(--green-hs), var(--green-l), 0.25);
+}
+.tabs-green.fill > .active, .tabs-green.prefill > .active {
+  background-color: hsla(var(--green-hs), var(--green-l), var(--green-a));
+  color: var(--green-c, #ffffff);
+}
+.tabs-green.prefill > * {
+  background-color: hsla(var(--green-hs), var(--green-l), 0.125);
+}
+
+.dots-green > * {
+  color: currentColor;
+}
+.dots-green > * :not(.active):hover {
+  background-color: hsla(var(--green-hs), var(--green-l), 0.075);
+}
+.dots-green > * .active {
+  background-color: hsla(var(--green-hs), var(--green-l), 0.125);
+  color: hsla(var(--green-hs), calc(var(--green-l) - 10%), var(--green-a));
+}
+.dots-green.fill > :hover, .dots-green.prefill > :hover {
+  background-color: hsla(var(--green-hs), var(--green-l), 0.25);
+}
+.dots-green.fill > .active, .dots-green.prefill > .active {
+  background-color: hsla(var(--green-hs), var(--green-l), var(--green-a));
+  color: var(--green-c, #ffffff);
+}
+.dots-green.prefill > * {
+  background-color: hsla(var(--green-hs), var(--green-l), 0.125);
+}
+
+.border-green {
+  border-color: #1d5c2e;
+}
+
+.text-blue {
+  color: var(--blue, #0365a3);
+}
+
+a.text-blue:hover, button.text-blue:hover, .link.text-blue:hover {
+  color: hsla(var(--blue-hs), calc(var(--blue-l) - 10%), var(--blue-a));
+}
+a.text-blue:active, button.text-blue:active, .link.text-blue:active {
+  color: hsla(var(--blue-hs), calc(var(--blue-l) - 20%), var(--blue-a));
+}
+
+.text-neon-blue {
+  /* color: var(--white); */
+  text-shadow: 0 0 20px var(--blue, #0365a3), 0 0 10px var(--white);
+}
+
+.bg-blue {
+  background-color: hsla(var(--blue-hs), var(--blue-l), var(--blue-a));
+  color: var(--blue-c, #ffffff);
+  border-color: hsla(var(--blue-hs), calc(var(--blue-l) - 20%), var(--blue-a));
+}
+.bg-blue.is-blur {
+  background-color: hsla(var(--blue-hs), var(--blue-l), 0.5);
+}
+.bg-blue.is-blur:hover {
+  background-color: hsla(var(--blue-hs), var(--blue-l), 0.75);
+}
+
+a.bg-blue:hover, button.bg-blue:hover, .link.bg-blue:hover {
+  background-color: hsla(var(--blue-hs), calc(var(--blue-l) - 10%), var(--blue-a));
+  border-color: hsla(var(--blue-hs), var(--blue-l), var(--blue-a));
+  color: var(--blue-c, #ffffff);
+}
+a.bg-blue:active, button.bg-blue:active, .link.bg-blue:active {
+  background-color: hsla(var(--blue-hs), calc(var(--blue-l) - 20%), var(--blue-a));
+}
+
+.bg-g-blue {
+  background-image: linear-gradient(var(--blue, #0365a3), hsla(var(--blue-hs), calc(var(--blue-l) - 20%), var(--blue-a)));
+  color: var(--blue-c, #ffffff);
+  border: none;
+}
+
+a.bg-g-blue:hover, button.bg-g-blue:hover, .link.bg-g-blue:hover {
+  background-image: linear-gradient(hsla(var(--blue-hs), calc(var(--blue-l) + 20%), var(--blue-a)), var(--blue, #0365a3));
+  color: var(--blue-c, #ffffff);
+}
+a.bg-g-blue:active, button.bg-g-blue:active, .link.bg-g-blue:active {
+  background-image: linear-gradient(hsla(var(--blue-hs), calc(var(--blue-l) - 20%), var(--blue-a)), var(--blue, #0365a3));
+}
+
+.bg-outline-blue {
+  background-color: transparent;
+  color: hsla(var(--blue-hs), var(--blue-l), var(--blue-a));
+  border: thin solid;
+}
+.bg-outline-blue.is-blur {
+  background-color: hsla(var(--blue-hs), calc(var(--blue-l) - 45%), 0.5);
+}
+
+a.bg-outline-blue:hover, button.bg-outline-blue:hover, .bg-outline-blue.link:hover {
+  background-color: hsla(var(--blue-hs), calc(var(--blue-l) - 10%), var(--blue-a));
+  color: var(--blue-c, #ffffff);
+}
+a.bg-outline-blue.active, a.bg-outline-blue:active, button.bg-outline-blue.active, button.bg-outline-blue:active, .bg-outline-blue.link.active, .bg-outline-blue.link:active {
+  background-color: hsla(var(--blue-hs), calc(var(--blue-l) - 20%), var(--blue-a));
+  color: var(--blue-c, #ffffff);
+}
+
+.tabs-blue > * {
+  color: currentColor;
+}
+.tabs-blue > * :not(.active):hover {
+  background-color: hsla(var(--blue-hs), var(--blue-l), 0.075);
+}
+.tabs-blue > * .active {
+  background-color: hsla(var(--blue-hs), var(--blue-l), 0.125);
+  color: hsla(var(--blue-hs), calc(var(--blue-l) - 10%), var(--blue-a));
+}
+.tabs-blue.fill > :hover, .tabs-blue.prefill > :hover {
+  background-color: hsla(var(--blue-hs), var(--blue-l), 0.25);
+}
+.tabs-blue.fill > .active, .tabs-blue.prefill > .active {
+  background-color: hsla(var(--blue-hs), var(--blue-l), var(--blue-a));
+  color: var(--blue-c, #ffffff);
+}
+.tabs-blue.prefill > * {
+  background-color: hsla(var(--blue-hs), var(--blue-l), 0.125);
+}
+
+.dots-blue > * {
+  color: currentColor;
+}
+.dots-blue > * :not(.active):hover {
+  background-color: hsla(var(--blue-hs), var(--blue-l), 0.075);
+}
+.dots-blue > * .active {
+  background-color: hsla(var(--blue-hs), var(--blue-l), 0.125);
+  color: hsla(var(--blue-hs), calc(var(--blue-l) - 10%), var(--blue-a));
+}
+.dots-blue.fill > :hover, .dots-blue.prefill > :hover {
+  background-color: hsla(var(--blue-hs), var(--blue-l), 0.25);
+}
+.dots-blue.fill > .active, .dots-blue.prefill > .active {
+  background-color: hsla(var(--blue-hs), var(--blue-l), var(--blue-a));
+  color: var(--blue-c, #ffffff);
+}
+.dots-blue.prefill > * {
+  background-color: hsla(var(--blue-hs), var(--blue-l), 0.125);
+}
+
+.border-blue {
+  border-color: #0365a3;
+}
+
+.text-cyan {
+  color: var(--cyan, #16f1d9);
+}
+
+a.text-cyan:hover, button.text-cyan:hover, .link.text-cyan:hover {
+  color: hsla(var(--cyan-hs), calc(var(--cyan-l) - 10%), var(--cyan-a));
+}
+a.text-cyan:active, button.text-cyan:active, .link.text-cyan:active {
+  color: hsla(var(--cyan-hs), calc(var(--cyan-l) - 20%), var(--cyan-a));
+}
+
+.text-neon-cyan {
+  /* color: var(--white); */
+  text-shadow: 0 0 20px var(--cyan, #16f1d9), 0 0 10px var(--white);
+}
+
+.bg-cyan {
+  background-color: hsla(var(--cyan-hs), var(--cyan-l), var(--cyan-a));
+  color: var(--cyan-c, #ffffff);
+  border-color: hsla(var(--cyan-hs), calc(var(--cyan-l) - 20%), var(--cyan-a));
+}
+.bg-cyan.is-blur {
+  background-color: hsla(var(--cyan-hs), var(--cyan-l), 0.5);
+}
+.bg-cyan.is-blur:hover {
+  background-color: hsla(var(--cyan-hs), var(--cyan-l), 0.75);
+}
+
+a.bg-cyan:hover, button.bg-cyan:hover, .link.bg-cyan:hover {
+  background-color: hsla(var(--cyan-hs), calc(var(--cyan-l) - 10%), var(--cyan-a));
+  border-color: hsla(var(--cyan-hs), var(--cyan-l), var(--cyan-a));
+  color: var(--cyan-c, #ffffff);
+}
+a.bg-cyan:active, button.bg-cyan:active, .link.bg-cyan:active {
+  background-color: hsla(var(--cyan-hs), calc(var(--cyan-l) - 20%), var(--cyan-a));
+}
+
+.bg-g-cyan {
+  background-image: linear-gradient(var(--cyan, #16f1d9), hsla(var(--cyan-hs), calc(var(--cyan-l) - 20%), var(--cyan-a)));
+  color: var(--cyan-c, #ffffff);
+  border: none;
+}
+
+a.bg-g-cyan:hover, button.bg-g-cyan:hover, .link.bg-g-cyan:hover {
+  background-image: linear-gradient(hsla(var(--cyan-hs), calc(var(--cyan-l) + 20%), var(--cyan-a)), var(--cyan, #16f1d9));
+  color: var(--cyan-c, #ffffff);
+}
+a.bg-g-cyan:active, button.bg-g-cyan:active, .link.bg-g-cyan:active {
+  background-image: linear-gradient(hsla(var(--cyan-hs), calc(var(--cyan-l) - 20%), var(--cyan-a)), var(--cyan, #16f1d9));
+}
+
+.bg-outline-cyan {
+  background-color: transparent;
+  color: hsla(var(--cyan-hs), var(--cyan-l), var(--cyan-a));
+  border: thin solid;
+}
+.bg-outline-cyan.is-blur {
+  background-color: hsla(var(--cyan-hs), calc(var(--cyan-l) - 45%), 0.5);
+}
+
+a.bg-outline-cyan:hover, button.bg-outline-cyan:hover, .bg-outline-cyan.link:hover {
+  background-color: hsla(var(--cyan-hs), calc(var(--cyan-l) - 10%), var(--cyan-a));
+  color: var(--cyan-c, #ffffff);
+}
+a.bg-outline-cyan.active, a.bg-outline-cyan:active, button.bg-outline-cyan.active, button.bg-outline-cyan:active, .bg-outline-cyan.link.active, .bg-outline-cyan.link:active {
+  background-color: hsla(var(--cyan-hs), calc(var(--cyan-l) - 20%), var(--cyan-a));
+  color: var(--cyan-c, #ffffff);
+}
+
+.tabs-cyan > * {
+  color: currentColor;
+}
+.tabs-cyan > * :not(.active):hover {
+  background-color: hsla(var(--cyan-hs), var(--cyan-l), 0.075);
+}
+.tabs-cyan > * .active {
+  background-color: hsla(var(--cyan-hs), var(--cyan-l), 0.125);
+  color: hsla(var(--cyan-hs), calc(var(--cyan-l) - 10%), var(--cyan-a));
+}
+.tabs-cyan.fill > :hover, .tabs-cyan.prefill > :hover {
+  background-color: hsla(var(--cyan-hs), var(--cyan-l), 0.25);
+}
+.tabs-cyan.fill > .active, .tabs-cyan.prefill > .active {
+  background-color: hsla(var(--cyan-hs), var(--cyan-l), var(--cyan-a));
+  color: var(--cyan-c, #ffffff);
+}
+.tabs-cyan.prefill > * {
+  background-color: hsla(var(--cyan-hs), var(--cyan-l), 0.125);
+}
+
+.dots-cyan > * {
+  color: currentColor;
+}
+.dots-cyan > * :not(.active):hover {
+  background-color: hsla(var(--cyan-hs), var(--cyan-l), 0.075);
+}
+.dots-cyan > * .active {
+  background-color: hsla(var(--cyan-hs), var(--cyan-l), 0.125);
+  color: hsla(var(--cyan-hs), calc(var(--cyan-l) - 10%), var(--cyan-a));
+}
+.dots-cyan.fill > :hover, .dots-cyan.prefill > :hover {
+  background-color: hsla(var(--cyan-hs), var(--cyan-l), 0.25);
+}
+.dots-cyan.fill > .active, .dots-cyan.prefill > .active {
+  background-color: hsla(var(--cyan-hs), var(--cyan-l), var(--cyan-a));
+  color: var(--cyan-c, #ffffff);
+}
+.dots-cyan.prefill > * {
+  background-color: hsla(var(--cyan-hs), var(--cyan-l), 0.125);
+}
+
+.border-cyan {
+  border-color: #16f1d9;
+}
+
+.text-purple {
+  color: var(--purple, #561843);
+}
+
+a.text-purple:hover, button.text-purple:hover, .link.text-purple:hover {
+  color: hsla(var(--purple-hs), calc(var(--purple-l) - 10%), var(--purple-a));
+}
+a.text-purple:active, button.text-purple:active, .link.text-purple:active {
+  color: hsla(var(--purple-hs), calc(var(--purple-l) - 20%), var(--purple-a));
+}
+
+.text-neon-purple {
+  /* color: var(--white); */
+  text-shadow: 0 0 20px var(--purple, #561843), 0 0 10px var(--white);
+}
+
+.bg-purple {
+  background-color: hsla(var(--purple-hs), var(--purple-l), var(--purple-a));
+  color: var(--purple-c, #ffffff);
+  border-color: hsla(var(--purple-hs), calc(var(--purple-l) - 20%), var(--purple-a));
+}
+.bg-purple.is-blur {
+  background-color: hsla(var(--purple-hs), var(--purple-l), 0.5);
+}
+.bg-purple.is-blur:hover {
+  background-color: hsla(var(--purple-hs), var(--purple-l), 0.75);
+}
+
+a.bg-purple:hover, button.bg-purple:hover, .link.bg-purple:hover {
+  background-color: hsla(var(--purple-hs), calc(var(--purple-l) - 10%), var(--purple-a));
+  border-color: hsla(var(--purple-hs), var(--purple-l), var(--purple-a));
+  color: var(--purple-c, #ffffff);
+}
+a.bg-purple:active, button.bg-purple:active, .link.bg-purple:active {
+  background-color: hsla(var(--purple-hs), calc(var(--purple-l) - 20%), var(--purple-a));
+}
+
+.bg-g-purple {
+  background-image: linear-gradient(var(--purple, #561843), hsla(var(--purple-hs), calc(var(--purple-l) - 20%), var(--purple-a)));
+  color: var(--purple-c, #ffffff);
+  border: none;
+}
+
+a.bg-g-purple:hover, button.bg-g-purple:hover, .link.bg-g-purple:hover {
+  background-image: linear-gradient(hsla(var(--purple-hs), calc(var(--purple-l) + 20%), var(--purple-a)), var(--purple, #561843));
+  color: var(--purple-c, #ffffff);
+}
+a.bg-g-purple:active, button.bg-g-purple:active, .link.bg-g-purple:active {
+  background-image: linear-gradient(hsla(var(--purple-hs), calc(var(--purple-l) - 20%), var(--purple-a)), var(--purple, #561843));
+}
+
+.bg-outline-purple {
+  background-color: transparent;
+  color: hsla(var(--purple-hs), var(--purple-l), var(--purple-a));
+  border: thin solid;
+}
+.bg-outline-purple.is-blur {
+  background-color: hsla(var(--purple-hs), calc(var(--purple-l) - 45%), 0.5);
+}
+
+a.bg-outline-purple:hover, button.bg-outline-purple:hover, .bg-outline-purple.link:hover {
+  background-color: hsla(var(--purple-hs), calc(var(--purple-l) - 10%), var(--purple-a));
+  color: var(--purple-c, #ffffff);
+}
+a.bg-outline-purple.active, a.bg-outline-purple:active, button.bg-outline-purple.active, button.bg-outline-purple:active, .bg-outline-purple.link.active, .bg-outline-purple.link:active {
+  background-color: hsla(var(--purple-hs), calc(var(--purple-l) - 20%), var(--purple-a));
+  color: var(--purple-c, #ffffff);
+}
+
+.tabs-purple > * {
+  color: currentColor;
+}
+.tabs-purple > * :not(.active):hover {
+  background-color: hsla(var(--purple-hs), var(--purple-l), 0.075);
+}
+.tabs-purple > * .active {
+  background-color: hsla(var(--purple-hs), var(--purple-l), 0.125);
+  color: hsla(var(--purple-hs), calc(var(--purple-l) - 10%), var(--purple-a));
+}
+.tabs-purple.fill > :hover, .tabs-purple.prefill > :hover {
+  background-color: hsla(var(--purple-hs), var(--purple-l), 0.25);
+}
+.tabs-purple.fill > .active, .tabs-purple.prefill > .active {
+  background-color: hsla(var(--purple-hs), var(--purple-l), var(--purple-a));
+  color: var(--purple-c, #ffffff);
+}
+.tabs-purple.prefill > * {
+  background-color: hsla(var(--purple-hs), var(--purple-l), 0.125);
+}
+
+.dots-purple > * {
+  color: currentColor;
+}
+.dots-purple > * :not(.active):hover {
+  background-color: hsla(var(--purple-hs), var(--purple-l), 0.075);
+}
+.dots-purple > * .active {
+  background-color: hsla(var(--purple-hs), var(--purple-l), 0.125);
+  color: hsla(var(--purple-hs), calc(var(--purple-l) - 10%), var(--purple-a));
+}
+.dots-purple.fill > :hover, .dots-purple.prefill > :hover {
+  background-color: hsla(var(--purple-hs), var(--purple-l), 0.25);
+}
+.dots-purple.fill > .active, .dots-purple.prefill > .active {
+  background-color: hsla(var(--purple-hs), var(--purple-l), var(--purple-a));
+  color: var(--purple-c, #ffffff);
+}
+.dots-purple.prefill > * {
+  background-color: hsla(var(--purple-hs), var(--purple-l), 0.125);
+}
+
+.border-purple {
+  border-color: #561843;
+}
+
+.text-muted {
+  color: var(--muted, #7d7d7d);
+}
+
+a.text-muted:hover, button.text-muted:hover, .link.text-muted:hover {
+  color: hsla(var(--muted-hs), calc(var(--muted-l) - 10%), var(--muted-a));
+}
+a.text-muted:active, button.text-muted:active, .link.text-muted:active {
+  color: hsla(var(--muted-hs), calc(var(--muted-l) - 20%), var(--muted-a));
+}
+
+.text-neon-muted {
+  /* color: var(--white); */
+  text-shadow: 0 0 20px var(--muted, #7d7d7d), 0 0 10px var(--white);
+}
+
+.bg-muted {
+  background-color: hsla(var(--muted-hs), var(--muted-l), var(--muted-a));
+  color: var(--muted-c, #ffffff);
+  border-color: hsla(var(--muted-hs), calc(var(--muted-l) - 20%), var(--muted-a));
+}
+.bg-muted.is-blur {
+  background-color: hsla(var(--muted-hs), var(--muted-l), 0.5);
+}
+.bg-muted.is-blur:hover {
+  background-color: hsla(var(--muted-hs), var(--muted-l), 0.75);
+}
+
+a.bg-muted:hover, button.bg-muted:hover, .link.bg-muted:hover {
+  background-color: hsla(var(--muted-hs), calc(var(--muted-l) - 10%), var(--muted-a));
+  border-color: hsla(var(--muted-hs), var(--muted-l), var(--muted-a));
+  color: var(--muted-c, #ffffff);
+}
+a.bg-muted:active, button.bg-muted:active, .link.bg-muted:active {
+  background-color: hsla(var(--muted-hs), calc(var(--muted-l) - 20%), var(--muted-a));
+}
+
+.bg-g-muted {
+  background-image: linear-gradient(var(--muted, #7d7d7d), hsla(var(--muted-hs), calc(var(--muted-l) - 20%), var(--muted-a)));
+  color: var(--muted-c, #ffffff);
+  border: none;
+}
+
+a.bg-g-muted:hover, button.bg-g-muted:hover, .link.bg-g-muted:hover {
+  background-image: linear-gradient(hsla(var(--muted-hs), calc(var(--muted-l) + 20%), var(--muted-a)), var(--muted, #7d7d7d));
+  color: var(--muted-c, #ffffff);
+}
+a.bg-g-muted:active, button.bg-g-muted:active, .link.bg-g-muted:active {
+  background-image: linear-gradient(hsla(var(--muted-hs), calc(var(--muted-l) - 20%), var(--muted-a)), var(--muted, #7d7d7d));
+}
+
+.bg-outline-muted {
+  background-color: transparent;
+  color: hsla(var(--muted-hs), var(--muted-l), var(--muted-a));
+  border: thin solid;
+}
+.bg-outline-muted.is-blur {
+  background-color: hsla(var(--muted-hs), calc(var(--muted-l) - 45%), 0.5);
+}
+
+a.bg-outline-muted:hover, button.bg-outline-muted:hover, .bg-outline-muted.link:hover {
+  background-color: hsla(var(--muted-hs), calc(var(--muted-l) - 10%), var(--muted-a));
+  color: var(--muted-c, #ffffff);
+}
+a.bg-outline-muted.active, a.bg-outline-muted:active, button.bg-outline-muted.active, button.bg-outline-muted:active, .bg-outline-muted.link.active, .bg-outline-muted.link:active {
+  background-color: hsla(var(--muted-hs), calc(var(--muted-l) - 20%), var(--muted-a));
+  color: var(--muted-c, #ffffff);
+}
+
+.tabs-muted > * {
+  color: currentColor;
+}
+.tabs-muted > * :not(.active):hover {
+  background-color: hsla(var(--muted-hs), var(--muted-l), 0.075);
+}
+.tabs-muted > * .active {
+  background-color: hsla(var(--muted-hs), var(--muted-l), 0.125);
+  color: hsla(var(--muted-hs), calc(var(--muted-l) - 10%), var(--muted-a));
+}
+.tabs-muted.fill > :hover, .tabs-muted.prefill > :hover {
+  background-color: hsla(var(--muted-hs), var(--muted-l), 0.25);
+}
+.tabs-muted.fill > .active, .tabs-muted.prefill > .active {
+  background-color: hsla(var(--muted-hs), var(--muted-l), var(--muted-a));
+  color: var(--muted-c, #ffffff);
+}
+.tabs-muted.prefill > * {
+  background-color: hsla(var(--muted-hs), var(--muted-l), 0.125);
+}
+
+.dots-muted > * {
+  color: currentColor;
+}
+.dots-muted > * :not(.active):hover {
+  background-color: hsla(var(--muted-hs), var(--muted-l), 0.075);
+}
+.dots-muted > * .active {
+  background-color: hsla(var(--muted-hs), var(--muted-l), 0.125);
+  color: hsla(var(--muted-hs), calc(var(--muted-l) - 10%), var(--muted-a));
+}
+.dots-muted.fill > :hover, .dots-muted.prefill > :hover {
+  background-color: hsla(var(--muted-hs), var(--muted-l), 0.25);
+}
+.dots-muted.fill > .active, .dots-muted.prefill > .active {
+  background-color: hsla(var(--muted-hs), var(--muted-l), var(--muted-a));
+  color: var(--muted-c, #ffffff);
+}
+.dots-muted.prefill > * {
+  background-color: hsla(var(--muted-hs), var(--muted-l), 0.125);
+}
+
+.border-muted {
+  border-color: #7d7d7d;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-25 {
+  opacity: 0.25;
+}
+
+.opacity-50 {
+  opacity: 0.5;
+}
+
+.opacity-75 {
+  opacity: 0.75;
+}
+
+.opacity-100 {
+  opacity: 1;
+}
+
+button.focus, button:focus-within, button:focus,
+input.focus,
+input:focus-within,
+input:focus {
+  outline: none;
+  box-shadow: none;
+}
+
+.bg-transparent,
+.btn-transparent,
+.tabs-transparent,
+.alert-transparent {
+  border: none;
+  background-color: transparent;
+  color: currentColor;
+}
+
+.bg-current,
+.btn-current,
+.tabs-current,
+.alert-current {
+  border: none;
+  background-color: currentColor;
+}
+
+.bg-inherit {
+  background-color: inherit;
+}
+
+.inactive {
+  color: #bcbccb;
+}
+
+.silhouette {
+  filter: saturate(0%) brightness(500%);
+}
+
+.shadow-1::before {
+  box-shadow: var(--black) 0 3px 9px -3px;
+}
+
+.shadow-inset-1::before {
+  box-shadow: inset var(--black) 0 3px 9px -3px;
+}
+
+[class*=shadow-] {
+  position: relative;
+  z-index: 1;
+}
+[class*=shadow-] > * {
+  position: relative;
+}
+[class*=shadow-] {
+  position: relative;
+}
+[class*=shadow-] > * {
+  /* position: relative; */
+  z-index: 1;
+}
+[class*=shadow-]::before {
+  content: "";
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  border-radius: inherit;
+  top: 0;
+  left: 0;
+  z-index: 0;
+}
+[class*=shadow-]::before:not(img::before, img::after) {
+  content: "";
+}
+
+input,
+input::placeholder,
+input::-webkit-input-placeholder {
+  color: currentColor;
+}
+
+.text-unset,
+.text-color-unset {
+  color: unset;
+}
+
+.text-current {
+  color: currentColor;
+}
+
+/*# sourceMappingURL=colors.css.map */