@wwtdev/bsds-css 2.29.0 → 3.0.0-rc.21

package/dist/wwt-bsds-wc-base.css

@@ -1,1129 +0,0 @@
-/* VARIABLES GENERATED WITH TAILWIND CONFIG.
-    Tokens location: ./tailwind.config.js */
-
-:root {
-  --bs-transparent: transparent;
-  --bs-inherit: inherit;
-  --bs-current: currentColor;
-  --bs-white: #ffffff;
-  --bs-white-10: rgba(255, 255, 255, 0.1);
-  --bs-black: #0a0b19;
-  --bs-blue-10: rgba(0, 134, 234, 0.1);
-  --bs-blue-100: #99cff7;
-  --bs-blue-200: #66b6f2;
-  --bs-blue-300: #339eee;
-  --bs-blue-400: #0086ea;
-  --bs-blue-500: #006dc7;
-  --bs-red-10: rgba(238, 40, 42, 0.1);
-  --bs-red-100: #f8a9aa;
-  --bs-red-200: #f57e7f;
-  --bs-red-300: #f15355;
-  --bs-red-400: #ee282a;
-  --bs-red-500: #d91214;
-  --bs-plum-10: rgba(28, 0, 135, 0.1);
-  --bs-plum-100: #a499cf;
-  --bs-plum-200: #7766b7;
-  --bs-plum-300: #49339f;
-  --bs-plum-400: #1c0087;
-  --bs-royal-10: rgba(22, 47, 180, 0.1);
-  --bs-royal-100: #c5cceb;
-  --bs-royal-200: #7585d1;
-  --bs-royal-300: #5365c4;
-  --bs-royal-400: #162fb4;
-  --bs-violet-100: #cbc0da;
-  --bs-violet-200: #9983b6;
-  --bs-violet-300: #634291;
-  --bs-violet-400: #330072;
-  --bs-navy-100: #c6c6d1;
-  --bs-navy-200: #8d8ea1;
-  --bs-navy-300: #555775;
-  --bs-navy-400: #1d1e48;
-  --bs-navy-500: #131431;
-  --bs-navy-600: #070822;
-  --bs-orange-10: rgba(250, 70, 22, 0.1);
-  --bs-orange-100: #f3c4a8;
-  --bs-orange-200: #f7a17b;
-  --bs-orange-300: #f97c4c;
-  --bs-orange-400: #fb550e;
-  --bs-orange-500: #c33d04;
-  --bs-pink-10: rgba(227, 28, 121, 0.1);
-  --bs-pink-100: #f6cbe0;
-  --bs-pink-200: #eb7eaf;
-  --bs-pink-300: #e45e9b;
-  --bs-pink-400: #e31c79;
-  --bs-pink-500: #d11a6f;
-  --bs-purple-10: rgba(130, 18, 196, 0.09);
-  --bs-purple-100: #e0c5ef;
-  --bs-purple-200: #bf8adf;
-  --bs-purple-300: #a154d0;
-  --bs-purple-400: #8212c4;
-  --bs-gray-50: #f7f7fc;
-  --bs-gray-100: #f0f0fa;
-  --bs-gray-150: #e4e4eb;
-  --bs-gray-200: #c9cad9;
-  --bs-gray-300: #a3a4b7;
-  --bs-gray-400: #4e4f5f;
-  --bs-gray-500: #292940;
-  --bs-slate-400: #22222e;
-  --bs-slate-500: #17171f;
-  --bs-slate-600: #0b0b10;
-  --bs-gradient-dark: linear-gradient(
-    90deg,
-    #1c0087 0%,
-    #ee282a 35%,
-    #ffffff 50%,
-    #0086ea 65%,
-    #1c0087 100%
-  );
-  --bs-gradient-light: linear-gradient(
-    90deg,
-    #1c0087 0%,
-    #ee282a 20%,
-    #ee282a 40%,
-    #1c0087 50%,
-    #0086ea 60%,
-    #0086ea 80%,
-    #1c0087 100%
-  );
-  --bs-gradient-line: linear-gradient(
-    90deg,
-    #ee282a 0%,
-    #1c0087 50%,
-    #0086ea 100%
-  );
-  --bs-space-0: 0px;
-  --bs-space-1: 0.25rem;
-  --bs-space-2: 0.5rem;
-  --bs-space-3: 0.75rem;
-  --bs-space-4: 1rem;
-  --bs-space-5: 1.25rem;
-  --bs-space-6: 1.5rem;
-  --bs-space-7: 1.75rem;
-  --bs-space-8: 2rem;
-  --bs-space-9: 2.25rem;
-  --bs-space-10: 2.5rem;
-  --bs-space-11: 2.75rem;
-  --bs-space-12: 3rem;
-  --bs-space-14: 3.5rem;
-  --bs-space-16: 4rem;
-  --bs-space-20: 5rem;
-  --bs-space-24: 6rem;
-  --bs-space-28: 7rem;
-  --bs-space-32: 8rem;
-  --bs-space-36: 9rem;
-  --bs-space-40: 10rem;
-  --bs-space-44: 11rem;
-  --bs-space-48: 12rem;
-  --bs-space-52: 13rem;
-  --bs-space-56: 14rem;
-  --bs-space-60: 15rem;
-  --bs-space-64: 16rem;
-  --bs-space-72: 18rem;
-  --bs-space-80: 20rem;
-  --bs-space-96: 24rem;
-  --bs-space-px: 1px;
-  --bs-space-0-half: 0.125rem;
-  --bs-space-1-half: 0.375rem;
-  --bs-space-2-half: 0.625rem;
-  --bs-space-3-half: 0.875rem;
-  --bs-space-f-1: clamp(0.25rem, calc(0.13rem + 0.5vw), 0.5rem);
-  --bs-space-f-2: clamp(0.5rem, calc(0.38rem + 0.5vw), 0.75rem);
-  --bs-space-f-3: clamp(0.75rem, calc(0.63rem + 0.5vw), 1rem);
-  --bs-space-f-4: clamp(1rem, calc(0.75rem + 1vw), 1.5rem);
-  --bs-space-f-6: clamp(1.5rem, calc(1.25rem + 1vw), 2rem);
-  --bs-space-f-8: clamp(2rem, calc(1.5rem + 2vw), 3rem);
-  --bs-space-f-12: clamp(4rem, calc(3rem + 4vw), 6rem);
-  --bs-space-f-16: clamp(4rem, calc(3rem + 4vw), 6rem);
-  --bs-space-f-24: clamp(6rem, calc(5rem + 4vw), 8rem);
-  --bs-space-f-4to8: clamp(1rem, calc(0.5rem + 2vw), 2rem);
-  --bs-space-f-6to12: clamp(1.5rem, calc(0.75rem + 3vw), 3rem);
-  --bs-space-f-12to24: clamp(3rem, calc(1.5rem + 6vw), 6rem);
-  --bs-text-xs: 0.75rem;
-  --bs-text-sm: 0.875rem;
-  --bs-text-base: 1rem;
-  --bs-text-md: 1.125rem;
-  --bs-text-lg: 1.25rem;
-  --bs-text-xl: 1.5rem;
-  --bs-text-2xl: 2rem;
-  --bs-text-3xl: 2.25rem;
-  --bs-text-4xl: 3rem;
-  --bs-text-f-xs: clamp(0.69rem, calc(0.84rem + -0.19vw), 0.79rem);
-  --bs-text-f-sm: clamp(0.83rem, calc(0.92rem + -0.11vw), 0.89rem);
-  --bs-text-f-base: clamp(1rem, calc(1rem + 0vw), 1rem);
-  --bs-text-f-md: clamp(1rem, calc(0.94rem + 0.25vw), 1.125rem);
-  --bs-text-f-lg: clamp(1.125rem, calc(1.06rem + 0.25vw), 1.25rem);
-  --bs-text-f-xl: clamp(1.25rem, calc(1.13rem + 0.5vw), 1.5rem);
-  --bs-text-f-2xl: clamp(1.5rem, calc(1.25rem + 1vw), 2rem);
-  --bs-text-f-3xl: clamp(2rem, calc(1.88rem + 0.5vw), 2.25rem);
-  --bs-text-f-4xl: clamp(2.25rem, calc(1.88rem + 1.5vw), 3rem);
-  --bs-leading-3: 0.75rem;
-  --bs-leading-4: 1rem;
-  --bs-leading-5: 1.25rem;
-  --bs-leading-6: 1.5rem;
-  --bs-leading-7: 1.75rem;
-  --bs-leading-8: 2rem;
-  --bs-leading-9: 2.25rem;
-  --bs-leading-10: 2.5rem;
-  --bs-leading-none: 1;
-  --bs-leading-tight: 1.25;
-  --bs-leading-snug: 1.375;
-  --bs-leading-normal: 1.5;
-  --bs-leading-relaxed: 1.625;
-  --bs-leading-loose: 2;
-  --bs-leading-sm: 115%;
-  --bs-leading-base: 150%;
-  --bs-leading-regular: 1.33;
-  --bs-shadow: -4px 4px 12px rgba(0, 0, 0, 0.06),
-    -8px 8px 16px rgba(28, 0, 135, 0.2);
-  --bs-shadow-contentLow: -4px 4px 12px rgba(0, 0, 0, 0.06),
-    -8px 8px 16px rgba(28, 0, 135, 0.2);
-  --bs-shadow-contentLowCenter: 0px 0px 12px rgba(0, 0, 0, 0.06),
-    0px 0px 16px rgba(28, 0, 135, 0.2);
-  --bs-shadow-contentMedium: -8px 8px 24px rgba(0, 0, 0, 0.06),
-    -16px 16px 32px rgba(28, 0, 135, 0.2);
-  --bs-shadow-contentHigh: 0px 16px 48px rgba(0, 0, 0, 0.06),
-    0px 32px 64px rgba(28, 0, 135, 0.2);
-  --bs-shadow-drawerLeft: -12px 12px 24px rgba(0, 0, 0, 0.06),
-    -16px 16px 32px rgba(28, 0, 135, 0.2);
-  --bs-shadow-drawerRight: -12px 12px 24px rgba(0, 0, 0, 0.06),
-    16px 16px 32px rgba(28, 0, 135, 0.2);
-  --bs-shadow-profilePhoto: inset 0px 0px 0.5em rgba(28, 0, 135, 0.25);
-}
-
-/*
-1. Prevent padding and border from affecting element width.
-2. Allow adding a border to an element by just adding a border-width. This fixes an issue
-   where Tailwind border classes no longer worked when using BS reset instead of TW's reset.
-   https://tailwindcss.com/docs/preflight#border-styles-are-reset-globally
-*/
-
-/* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
-
-*,
-*::before,
-*::after {
-  border-color: currentColor; /* 2 */
-  border-style: solid; /* 2 */
-  border-width: 0; /* 2 */
-  box-sizing: border-box; /* 1 */
-}
-
-/* Remove default margin */
-
-body,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-figure,
-blockquote,
-dl,
-dd {
-  margin: 0;
-}
-
-:where(ul, ol) {
-  list-style: none;
-  margin: unset;
-  margin-block: unset;
-  margin-inline: unset;
-  padding: unset;
-  padding-block: unset;
-  padding-inline: unset;
-}
-
-/* Set core root defaults */
-
-html:where(:focus-within) {
-  scroll-behavior: smooth;
-}
-
-/* Set core body defaults */
-
-body {
-  line-height: 1.5;
-  min-height: 100dvh;
-  text-rendering: optimizeSpeed;
-}
-
-/* Elements that don't have a class get default styles */
-
-a:where(:not([class])) {
-  -webkit-text-decoration-skip: ink;
-          text-decoration-skip-ink: auto;
-}
-
-/* Make images easier to work with */
-
-img,
-picture {
-  max-width: 100%;
-  display: block;
-}
-
-/* Inherit fonts for inputs */
-
-input,
-textarea,
-select {
-  font: inherit;
-}
-
-button {
-  background-color: inherit;
-  border-color: transparent;
-  color: inherit;
-  font-family: inherit;
-  font-size: var(--bs-text-base);
-  position: relative;
-  padding: var(--bs-space-0);
-  text-decoration: none;
-}
-
-/* Remove all animations and transitions for people that prefer not to see them */
-
-@media (prefers-reduced-motion: reduce) {
-  html:where(:focus-within) {
-    scroll-behavior: auto;
-  }
-
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
-    scroll-behavior: auto !important;
-    transition-duration: 0.01ms !important;
-  }
-}
-
-/* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
-
-:root,
-:host {
-  --bs-bg-base: var(--bs-white);
-  --bs-bg-base-to-light: var(--bs-white);
-  --bs-bg-base-to-medium: var(--bs-white);
-  --bs-bg-light: var(--bs-gray-50);
-  --bs-bg-light-to-base: var(--bs-gray-50);
-  --bs-bg-light-to-medium: var(--bs-gray-50);
-  --bs-bg-medium: var(--bs-gray-100);
-  --bs-bg-medium-to-light: var(--bs-gray-100);
-  --bs-bg-medium-to-base: var(--bs-gray-100);
-  --bs-bg-invert-to-light: var(--bs-slate-500);
-  --bs-bg-invert-to-base: var(--bs-slate-600);
-  --bs-bg-invert-to-medium: var(--bs-slate-400);
-  --bs-bg-disabled: var(--bs-gray-200);
-
-  --bs-hyperlink: var(--bs-purple-400);
-
-  --bs-ink-accent: var(--bs-plum-400);
-  --bs-ink-base: var(--bs-black);
-  --bs-ink-disabled: rgba(78, 79, 95, 0.6); /* --bs-gray-400 at .6 */
-  --bs-ink-light: var(--bs-gray-400);
-  --bs-ink-invert-base: var(--bs-gray-100);
-  --bs-ink-invert-to-medium: var(--bs-gray-200);
-  --bs-ink-invert-light: var(--bs-gray-300);
-  --bs-ink-medium: var(--bs-gray-500);
-
-  --bs-ink-blue: var(--bs-blue-500);
-  --bs-ink-orange: var(--bs-orange-500);
-  --bs-ink-pink: var(--bs-pink-500);
-  --bs-ink-plum: var(--bs-plum-400);
-  --bs-ink-purple: var(--bs-purple-400);
-  --bs-ink-red: var(--bs-red-500);
-  --bs-ink-royal: var(--bs-royal-400);
-  --bs-ink-violet: var(--bs-violet-400);
-  --bs-ink-white: var(--bs-white);
-
-  --bs-blue-base: var(--bs-blue-400);
-  --bs-blue-medium: var(--bs-blue-300);
-  --bs-blue-light: var(--bs-blue-200);
-  --bs-blue-lightest: var(--bs-blue-100);
-  --bs-plum-base: var(--bs-plum-400);
-  --bs-plum-medium: var(--bs-plum-300);
-  --bs-plum-light: var(--bs-plum-200);
-  --bs-plum-lightest: var(--bs-plum-100);
-  --bs-red-base: var(--bs-red-400);
-  --bs-red-medium: var(--bs-red-300);
-  --bs-red-light: var(--bs-red-200);
-  --bs-red-lightest: var(--bs-red-100);
-  --bs-royal-base: var(--bs-royal-400);
-  --bs-royal-medium: var(--bs-royal-300);
-  --bs-royal-light: var(--bs-royal-200);
-  --bs-royal-lightest: var(--bs-royal-100);
-  --bs-navy-base: var(--bs-navy-400);
-  --bs-navy-medium: var(--bs-navy-300);
-  --bs-navy-light: var(--bs-navy-200);
-  --bs-navy-lightest: var(--bs-navy-100);
-  --bs-pink-base: var(--bs-pink-400);
-  --bs-pink-medium: var(--bs-pink-300);
-  --bs-pink-light: var(--bs-pink-200);
-  --bs-pink-lightest: var(--bs-pink-100);
-  --bs-violet-base: var(--bs-violet-400);
-  --bs-violet-medium: var(--bs-violet-300);
-  --bs-violet-light: var(--bs-violet-200);
-  --bs-violet-lightest: var(--bs-violet-100);
-  --bs-orange-base: var(--bs-orange-400);
-  --bs-orange-medium: var(--bs-orange-300);
-  --bs-orange-light: var(--bs-orange-200);
-  --bs-orange-lightest: var(--bs-orange-100);
-  --bs-purple-base: var(--bs-purple-400);
-  --bs-purple-medium: var(--bs-purple-300);
-  --bs-purple-light: var(--bs-purple-200);
-  --bs-purple-lightest: var(--bs-purple-100);
-  --bs-gray-dark: var(--bs-gray-500);
-  --bs-gray-base: var(--bs-gray-400);
-  --bs-gray-medium: var(--bs-gray-300);
-  --bs-gray-light: var(--bs-gray-200);
-  --bs-gray-lightest: var(--bs-gray-100);
-
-  --bs-warning: var(--bs-orange-500);
-
-  --bs-border-dark: var(--bs-gray-400);
-  --bs-border-base: var(--bs-gray-200);
-  --bs-border-medium: var(--bs-gray-150);
-  --bs-border-medium-to-light: var(--bs-gray-150);
-  --bs-border-light: var(--bs-gray-100);
-  --bs-border-input: rgba(99, 66, 145, 0.75); /* --bs-violet-300 at .75 opacity */
-  --bs-border-active: var(--bs-blue-400);
-  --bs-border-error: var(--bs-red-500);
-
-  /* Spacing */
-  --bs-content-top: 4rem;
-  --bs-content-max-width: 72rem;
-
-  /* Type */
-  --bs-font-light: 300;
-  --bs-font-normal: 400;
-  --bs-font-bold: 600;
-
-  /* Special use cases */
-  --bs-bg-input-hover: rgba(201, 202, 217, 0.20);
-
-  /* deprecate / phase out.. */
-  --bs-bg-base-elevated: var(--bs-white); /* now --bs-bg-base-to-light */
-  --bs-bg-subtle: var(--bs-gray-100);
-  --bs-bg-invert: var(--bs-slate-500);
-  --bs-bg-invert-subtle: var(--bs-slate-400);
-  --bs-border: var(--bs-gray-200);
-  --bs-ink-invert: var(--bs-gray-100);
-  --bs-orange-warning: var(--bs-orange-500);
-  /* now --bs-warning. 👆 mapping to bs-warning directly doesn't autoconvert in dark mode for some reason.  Same for bg-base-to-light.*/
-
-  --bs-bg-atom-ai: conic-gradient(from 180deg at 50% 50%, rgba(22, 47, 180, 0.05) -96.8deg, rgba(227, 28, 121, 0.05) 74.2deg, rgba(0, 134, 234, 0.05) 98.8deg, rgba(251, 85, 14, 0.05) 259.6deg, rgba(22, 47, 180, 0.05) 283.2deg, rgba(227, 28, 121, 0.05) 414.4deg);
-  --bs-atom-ai: conic-gradient(from 180deg at 50% 50%, var(--bs-royal-400) -96.8deg, var(--bs-pink-400) 74.2deg, var(--bs-blue-400) 98.8deg, var(--bs-orange-400) 259.6deg, var(--bs-royal-400) 283.2deg, var(--bs-pink-400) 414.4deg);
-}
-
-.dark,
-.dark :where(:host) {
-  --bs-bg-base: var(--bs-slate-600);
-  --bs-bg-base-to-light: var(--bs-slate-500);
-  --bs-bg-base-to-medium: var(--bs-slate-400);
-  --bs-bg-light: var(--bs-slate-500);
-  --bs-bg-light-to-base: var(--bs-slate-600);
-  --bs-bg-light-to-medium: var(--bs-slate-400);
-  --bs-bg-medium: var(--bs-slate-400);
-  --bs-bg-medium-to-light: var(--bs-slate-500);
-  --bs-bg-medium-to-base: var(--bs-slate-600);
-  --bs-bg-invert-to-light: var(--bs-gray-50);
-  --bs-bg-invert-to-base: var(--bs-white);
-  --bs-bg-invert-to-medium: var(--bs-gray-100);
-  --bs-bg-disabled: rgba(78, 79, 95, 0.3); /* --bs-gray-400 at .3 opacity */
-
-  --bs-hyperlink: var(--bs-purple-200);
-
-  --bs-ink-accent: var(--bs-gray-100);
-  --bs-ink-base: var(--bs-white);
-  --bs-ink-disabled: rgba(163, 164, 183, 0.5); /* --bs-gray-300 at .5 opacity */
-  --bs-ink-invert-base: var(--bs-black);
-  --bs-ink-invert-medium: var(--bs-gray-500);
-  --bs-ink-invert-light: var(--bs-gray-400);
-  --bs-ink-light: var(--bs-gray-200);
-  --bs-ink-medium: var(--bs-gray-100);
-
-  --bs-ink-blue: var(--bs-blue-200);
-  --bs-ink-orange: var(--bs-orange-200);
-  --bs-ink-pink: var(--bs-pink-200);
-  --bs-ink-plum: var(--bs-plum-100);
-  --bs-ink-purple: var(--bs-purple-200);
-  --bs-ink-red: var(--bs-red-200);
-  --bs-ink-royal: var(--bs-royal-200);
-  --bs-ink-violet: var(--bs-violet-200);
-
-  --bs-blue-base: var(--bs-blue-300);
-  --bs-navy-base: var(--bs-navy-200);
-  --bs-orange-base: var(--bs-orange-300);
-  --bs-pink-base: var(--bs-pink-300);
-  --bs-plum-base: var(--bs-plum-300);
-  --bs-plum-medium: var(--bs-plum-200);
-  --bs-purple-base: var(--bs-purple-300);
-  --bs-red-base: var(--bs-red-300);
-  --bs-royal-base: var(--bs-royal-300);
-  --bs-royal-medium: var(--bs-royal-200);
-  --bs-violet-base: var(--bs-violet-300);
-
-  --bs-gray-dark: var(--bs-gray-100);
-  --bs-gray-base: var(--bs-gray-200);
-  --bs-gray-light: var(--bs-gray-400);
-  --bs-gray-lightest: var(--bs-gray-500);
-
-  --bs-warning: var(--bs-orange-400);
-
-  --bs-border-dark: var(--bs-gray-300);
-  --bs-border-base: rgba(163, 164, 183, 0.7); /* --bs-gray-300 at .7 opacity */
-  --bs-border-medium: var(--bs-gray-400);
-  --bs-border-medium-to-light: rgba(78, 79, 95, 0.5); /* --bs-gray-400 at .5 opacity */
-  --bs-border-light: rgba(78, 79, 95, 0.5); /* --bs-gray-400 at .5 opacity */
-  --bs-border-input: var(--bs-violet-200);
-  --bs-border-active: var(--bs-blue-400);
-  --bs-border-error: var(--bs-red-200);
-
-  --bs-shadow-base: rgba(0, 0, 0, 0.06);
-  --bs-shadow-invert: rgba(10, 11, 25, 0.60);
-  --bs-shadow: -4px 4px 12px var(--bs-shadow-base),
-    -8px 8px 16px var(--bs-shadow-invert);
-  --bs-shadow-contentLow: -4px 4px 12px var(--bs-shadow-base),
-    -8px 8px 16px var(--bs-shadow-invert);
-  --bs-shadow-contentLowCenter: 0px 0px 12px var(--bs-shadow-base),
-    0px 0px 16px var(--bs-shadow-invert);
-  --bs-shadow-contentMedium: -8px 8px 24px var(--bs-shadow-base),
-    -16px 16px 32px var(--bs-shadow-invert);
-  --bs-shadow-contentHigh: 0px 16px 48px var(--bs-shadow-base),
-    0px 32px 64px var(--bs-shadow-invert);
-  --bs-shadow-drawerLeft: -12px 12px 24px var(--bs-shadow-base),
-    -16px 16px 32px var(--bs-shadow-invert);
-  --bs-shadow-drawerRight: -12px 12px 24px var(--bs-shadow-base),
-    16px 16px 32px var(--bs-shadow-invert);
-
-  /* deprecate / phase out.. */
-  --bs-bg-base-elevated: var(--bs-slate-500); /* now --bs-bg-base-to-light. See notes above in light mode. */
-  --bs-bg-subtle: #2F2F51;
-  --bs-bg-invert: var(--bs-white);
-  --bs-bg-invert-subtle: var(--bs-gray-100);
-  --bs-border: var(--bs-gray-400);
-  --bs-ink-invert: var(--bs-black);
-  --bs-orange-warning: var(--bs-orange-400); /* now --bs-warning. See notes above in light mode. */
-
-  --bs-bg-atom-ai: conic-gradient(from 180deg at 50% 50%, rgba(83, 101, 196, 0.2) -96.8deg, rgba(228, 94, 155, 0.2) 74.2deg, rgba(51, 158, 238, 0.2) 98.8deg, rgba(249, 124, 76, 0.2) 259.6deg, rgba(83, 101, 196, 0.2) 283.2deg, rgba(228, 94, 155, 0.2) 414.4deg);
-  --bs-atom-ai: conic-gradient(from 180deg at 50% 50%, var(--bs-royal-300) -96.8deg, var(--bs-pink-300) 74.2deg, var(--bs-blue-300) 98.8deg, var(--bs-orange-300) 259.6deg, var(--bs-royal-300) 283.2deg, var(--bs-pink-300) 414.4deg);
-}
-
-body,
-:host {
-  background-color: var(--bs-bg-base);
-  color: var(--bs-ink-light);
-}
-
-:target {
-  scroll-margin-top: var(--bs-content-top);
-}
-
-::-moz-selection {
-  background-color: var(--bs-royal-400);
-  color: var(--bs-white);
-}
-
-::selection {
-  background-color: var(--bs-royal-400);
-  color: var(--bs-white);
-}
-
-[hidden] {
-  display: none;
-}
-
-hr {
-  background: var(--bs-border);
-  border: 0;
-  height: 1px;
-}
-
-/* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
-
-body {
-  font-family: 'Roobert', sans-serif;
-  font-size: var(--bs-text-base);
-  font-weight: 400;
-}
-
-/* Default Element/data-variant Styles */
-
-[data-variant^="heading-xl"] {
-  font-size: var(--bs-text-4xl);
-  font-weight: 400;
-  line-height: var(--bs-leading-sm);
-}
-
-h1,
-[data-variant^="heading-1"] {
-  font-size: var(--bs-text-3xl);
-  font-weight: 400;
-  line-height: var(--bs-leading-sm);
-}
-
-h2,
-[data-variant^="heading-2"] {
-  font-size: var(--bs-text-2xl);
-  font-weight: 600;
-  line-height: var(--bs-leading-sm);
-}
-
-h3,
-[data-variant^="heading-3"] {
-  font-size: var(--bs-text-xl);
-  font-weight: 600;
-  line-height: var(--bs-leading-sm);
-}
-
-h4,
-[data-variant^="heading-4"] {
-  font-size: var(--bs-text-lg);
-  font-weight: 600;
-}
-
-h5,
-[data-variant^="heading-5"] {
-  font-size: var(--bs-text-md);
-  font-weight: 600;
-}
-
-h6,
-[data-variant^="heading-6"] {
-  font-size: var(--bs-text-base);
-  font-weight: 600;
-}
-
-.prose {
-  font-size: var(--bs-text-md);
-  max-width: 70ch;
-}
-
-:where(.prose) :is(h1, h2, h3, h4, h5, h6):where(:not([data-color])) {
-  color: var(--bs-ink-base);
-}
-
-[data-variant^="default"] {
-  font-size: var(--bs-text-base);
-}
-
-.bs-meta,
-[data-variant^="meta"] {
-  font-size: var(--bs-text-xs);
-  font-weight: 600;
-}
-
-:where(.prose) blockquote {
-  border-left: 4px solid var(--bs-plum-200);
-  color: var(--bs-plum-200);
-  font-style: italic;
-  font-weight: 400;
-  padding-left: var(--bs-space-4);
-}
-
-.prose:where([data-width="wide"]) {
-  max-width: 90%;
-}
-
-.prose:where([data-width="wide"]) > :where(p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol) {
-  max-width: 48rem;
-}
-
-/* data-font-size Styles */
-
-[data-font-size^='4xl'] {
-  font-size: var(--bs-text-4xl);
-  line-height: var(--bs-leading-sm);
-}
-
-[data-font-size^='3xl'] {
-  font-size: var(--bs-text-3xl);
-  line-height: var(--bs-leading-sm);
-}
-
-[data-font-size^='2xl'] {
-  font-size: var(--bs-text-2xl);
-  line-height: var(--bs-leading-sm);
-}
-
-[data-font-size^='xl'] {
-  font-size: var(--bs-text-xl);
-  line-height: var(--bs-leading-sm);
-}
-
-[data-font-size^='lg'] {
-  font-size: var(--bs-text-lg);
-}
-
-[data-font-size^='md'] {
-  font-size: var(--bs-text-md);
-}
-
-[data-font-size^='base'] {
-  font-size: var(--bs-text-base);
-}
-
-[data-font-size^='sm'] {
-  font-size: var(--bs-text-sm);
-}
-
-[data-font-size^='xs'] {
-  font-size: var(--bs-text-xs);
-}
-
-/* data-color Styles */
-
-[data-color^='base'] {
-  color: var(--bs-ink-base);
-}
-
-[data-color^='medium'] {
-  color: var(--bs-ink-medium);
-}
-
-[data-color^='light'] {
-  color: var(--bs-ink-light);
-}
-
-[data-color^='accent'] {
-  color: var(--bs-ink-accent);
-}
-
-/* data-weight Styles */
-
-[data-weight^='normal'],
-[data-weight^='400'] {
-  font-weight: 400;
-}
-
-[data-weight^='light'],
-[data-weight^='300'] {
-  font-weight: 300;
-}
-
-[data-weight^='bold'],
-[data-weight^='600'] {
-  font-weight: 600;
-}
-
-/* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
-
-:where(body).fluid {
-  font-size: var(--bs-text-f-md);
-}
-
-/* Defaults & Variants */
-
-.fluid :where(h1),
-.fluid :where([data-variant^='heading-1']) {
-  font-size: var(--bs-text-f-3xl);
-}
-
-.fluid :where(h2),
-.fluid :where([data-variant^='heading-2']) {
-  font-size: var(--bs-text-f-2xl);
-}
-
-.fluid :where(h3),
-.fluid :where([data-variant^='heading-3']) {
-  font-size: var(--bs-text-f-xl);
-}
-
-.fluid :where(h4),
-.fluid :where([data-variant^='heading-4']) {
-  font-size: var(--bs-text-f-lg);
-}
-
-.fluid :where(h5),
-.fluid :where([data-variant^='heading-5']) {
-  font-size: var(--bs-text-f-md);
-}
-
-.fluid :where(h6),
-.fluid :where([data-variant^='heading-6']) {
-  font-size: var(--bs-text-f-sm);
-}
-
-.fluid:where(.prose),
-.fluid :where(.prose),
-.fluid :where([data-variant^='default']) {
-  font-size: var(--bs-text-f-md);
-}
-
-.fluid :where(.bs-meta),
-.fluid :where([data-variant^='meta']) {
-  font-size: var(--bs-text-f-xs);
-}
-
-/* Fluid data-font-size Styles */
-
-.fluid :where([data-font-size^='4xl']) {
-  font-size: var(--bs-text-f-4xl);
-}
-
-.fluid :where([data-font-size^='3xl']) {
-  font-size: var(--bs-text-f-3xl);
-}
-
-.fluid :where([data-font-size^='2xl']) {
-  font-size: var(--bs-text-f-2xl);
-}
-
-.fluid :where([data-font-size^='xl']) {
-  font-size: var(--bs-text-f-xl);
-  line-height: var(--bs-leading-sm);
-}
-
-.fluid :where([data-font-size^='lg']) {
-  font-size: var(--bs-text-f-lg);
-}
-
-.fluid :where([data-font-size^='md']) {
-  font-size: var(--bs-text-f-md);
-}
-
-.fluid :where([data-font-size^='base']) {
-  font-size: var(--bs-text-f-base);
-}
-
-.fluid :where([data-font-size^='sm']) {
-  font-size: var(--bs-text-f-sm);
-}
-
-.fluid :where([data-font-size^='xs']) {
-  font-size: var(--bs-text-f-xs);
-}
-
-/* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
-
-:where(a) {
-  color: inherit;
-  cursor: pointer;
-  text-decoration: none;
-}
-
-:where(.prose) a,
-a:where(.bs-link) {
-  border-radius: 0.25rem; /* gives outlines rounded corners in modern browsers */
-  -webkit-box-decoration-break: clone;
-          box-decoration-break: clone;
-  color: var(--bs-purple-400);
-  outline-color: var(--bs-blue-400);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  transition: all 0.15s ease-in-out;
-}
-
-:where(.prose) a:where(:hover),
-:where(.prose) a:where(:focus),
-:where(.prose) a:where(:focus-visible),
-a:where(.bs-link):where(:hover),
-a:where(.bs-link):where(:focus),
-a:where(.bs-link):where(:focus-visible) {
-  color: var(--bs-plum-400);
-  text-decoration-color: var(--bs-purple-400);
-}
-
-:where(.prose) a:where(:focus-visible),
-a:where(.bs-link):where(:focus-visible) {
-  outline-offset: var(--bs-space-1);
-  outline-style: solid;
-  outline-width: 2px;
-}
-
-:where(.prose) a:where(:focus:not(:focus-visible)),
-a:where(.bs-link):where(:focus:not(:focus-visible)) {
-  outline: none;
-}
-
-/* Dark mode styling */
-
-:where(.dark .prose) a,
-:where(.dark) a:where(.bs-link) {
-  color: var(--bs-purple-200);
-  outline-color: var(--bs-blue-300);
-}
-
-:where(.dark .prose) a:where(:hover),
-:where(.dark .prose) a:where(:focus),
-:where(.dark .prose) a:where(:focus-visible),
-:where(.dark) a:where(.bs-link):where(:hover),
-:where(.dark) a:where(.bs-link):where(:focus),
-:where(.dark) a:where(.bs-link):where(:focus-visible) {
-  color: var(--bs-pink-300);
-  text-decoration-color: var(--bs-purple-200);
-}
-
-/* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
-
-.box-shadow {
-  box-shadow: var(--bs-shadow);
-}
-
-.box-shadow:where([data-variant="center"]) {
-  box-shadow: var(--bs-shadow-contentLowCenter);
-}
-
-.box-shadow:where([data-variant="medium"]) {
-  box-shadow: var(--bs-shadow-contentMedium);
-}
-
-.box-shadow:where([data-variant="high"]) {
-  box-shadow: var(--bs-shadow-contentHigh);
-}
-
-.box-shadow:where([data-variant="left-panel"]) {
-  box-shadow: var(--bs-shadow-drawerLeft);
-}
-
-.box-shadow:where([data-variant="right-panel"]) {
-  box-shadow: var(--bs-shadow-drawerRight);
-}
-
-.box-shadow:where([data-variant="profile"]) {
-  box-shadow: var(--bs-shadow-profilePhoto);
-}
-
-:root {
-  /* get design sign off on these first
-  --bs-trans-color: color 100ms ease-in-out;
-  --bs-trans-outline-color: outline-color 100ms ease-in-out;
-  */
-
-  --bs-trans-rotate180: transform 200ms ease-in-out;
-}
-
-/* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
-
-.box {
-  background: var(--bg-color, var(--bs-bg-medium-to-light));
-  border-radius: 0.25rem;
-  padding: var(--box-space, var(--bs-space-6));
-}
-
-.box:where([data-invert]) {
-  --bg-color: var(--bs-bg-invert);
-  color: var(--bs-ink-invert);
-}
-
-:where(.fluid) .box {
-  padding: var(--box-space, var(--bs-space-f-6));
-}
-
-.cluster {
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--cluster-space, var(--bs-space-6));
-  justify-content: flex-start;
-}
-
-.cluster:where([data-variant^="brick"]) > * {
-  align-self: stretch;
-  flex-grow: 1;
-}
-
-.cluster:where([data-gap="tight"]) {
-  gap: var(--cluster-space, var(--bs-space-2));
-}
-
-:where(.fluid) .cluster {
-  gap: var(--cluster-space, var(--bs-space-f-6));
-}
-
-:where(.fluid) .cluster:where([data-gap="tight"]) {
-  gap: var(--cluster-space, var(--bs-space-f-2));
-}
-
-.flow > * + * {
-  margin-top: var(--flow-space, 1.25em);
-}
-
-.flow > :where(h1, h2, h3, h4, h5, h6) {
-  --flow-space: 2em;
-}
-
-.flow > :where(hr) + * {
-  --flow-space: 1.5em;
-}
-
-.flow > :where(h1, h2, h3, h4, h5, h6) + * {
-  --flow-space: 0.5em;
-}
-
-.flow > :where(ul, ol) > :where(li) {
-  margin-top: var(--flow-space, 0.625em);
-}
-
-.region {
-  padding-block: var(--region-space, var(--bs-space-6));
-}
-
-.region:where([data-space^='sm']) {
-  padding-block: var(--bs-space-3);
-}
-
-.region:where([data-space^='lg']) {
-  padding-block: var(--bs-space-12);
-}
-
-:where(.fluid) .region {
-  padding-block: var(--region-space, var(--bs-space-f-6));
-}
-
-:where(.fluid) .region:where([data-space^='sm']) {
-  padding-block: var(--bs-space-f-3);
-}
-
-:where(.fluid) .region:where([data-space^='lg']) {
-  padding-block: var(--bs-space-f-12);
-}
-
-.wrapper {
-  margin-inline: auto;
-  max-width: var(--max-width, 75rem);
-  min-width: 0;
-  padding-inline: var(--wrapper-space, var(--bs-space-6));
-  position: relative;
-  width: 100%;
-}
-
-:where(.fluid) .wrapper {
-  padding-inline: var(--wrapper-space, var(--bs-space-f-6));
-}
-
-.wrapper:where([data-flush]) {
-  padding-inline: 0;
-}
-
-/* Specificity should be either (0, 1, 0) (class-based) or (0, 0, 1) (element-based) for each selector */
-
-.visually-hidden {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: 0;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
-.measure-compact {
-  max-width: 40ch;
-}
-
-.measure-short {
-  max-width: 50ch;
-}
-
-.measure-long {
-  max-width: 70ch;
-}
-
-*:where([data-scroll="false"]) {
-  overflow: hidden;
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-  overflow-x: auto;
-  max-width: 100%;
-  width: 100%;
-}
-
-thead {
-  color: var(--bs-ink-base);
-  font-size: var(--bs-font-base);
-  font-weight: 600;
-}
-
-tbody {
-  color: var(--bs-ink-light);
-}
-
-th {
-  background: var(--bs-bg-base);
-}
-
-th, td {
-  border-bottom: 1px solid var(--bs-border);
-  min-width: -moz-fit-content;
-  min-width: fit-content;
-  padding: var(--bs-space-2);
-  text-align: left;
-}
-
-/* Table Borders */
-
-table[data-borders^="none"] {
-  border: 0;
-}
-
-table[data-borders^="all"] :where(th, td) {
-  border-left: 1px solid var(--bs-border);
-}
-
-table[data-borders^="all"] :where(th, td):last-child {
-  border-right: 1px solid var(--bs-border);
-}
-
-table[data-borders^="all"] th {
-  border-top: 1px solid var(--bs-border);
-}
-
-/* Table Rows */
-
-table:where([data-rows^="striped"]) tbody > tr:nth-child(even) {
-  background-color: var(--bs-bg-medium);
-}
-
-/* Table Cells */
-
-table[data-cells^="fixed"] {
-  table-layout: fixed;
-}
-
-table:where([data-cells^="height"]) td {
-  height: 4.5rem;
-  vertical-align: middle;
-}
-
-/* Sticky Header */
-
-table:where([data-sticky]) {
-  isolation: isolate;
-}
-
-table:where([data-sticky^="top"]) td {
-  z-index: 1;
-}
-
-table:where([data-sticky^="top"]) {
-  border-collapse: separate;
-  overflow-y: unset; /* Will break sticky headers if removed */
-  position: relative;
-}
-
-table:where([data-sticky^="left"]) {
-  border-collapse: separate;
-  overflow-x: unset; /* Will break sticky headers if removed */
-  position: relative;
-}
-
-table:where([data-sticky^="top"]) th {
-  position: sticky;
-  top: var(--bs-content-top);
-  z-index: 2;
-}
-
-table:where([data-sticky^="left"]) :is(td:first-child, th:first-child) {
-  position: sticky;
-  left: 0;
-  z-index: 2;
-}