@jongh/ui 1.6.5 → 2.20260902.1

package/dist/base.css

@@ -0,0 +1,1103 @@
+@layer reset, base, tokens, recipes, utilities;
+@layer reset {
+  html,:host {
+    --font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -moz-tab-size: 4;
+    tab-size: 4;
+    font-family: var(--global-font-body, var(--font-fallback));
+    -webkit-tap-highlight-color: transparent;
+}
+
+  *,::before,::after,::backdrop,::file-selector-button {
+    margin: 0px;
+    padding: 0px;
+    border-width: 0px;
+    border-style: solid;
+    border-color: var(--global-color-border, currentcolor);
+    box-sizing: border-box;
+}
+
+  hr {
+    color: inherit;
+    height: 0px;
+    border-top-width: 1px;
+}
+
+  body {
+    line-height: inherit;
+    height: 100%;
+}
+
+  img {
+    border-style: none;
+}
+
+  img,svg,video,canvas,audio,iframe,embed,object {
+    display: block;
+    vertical-align: middle;
+}
+
+  img,video {
+    max-width: 100%;
+    height: auto;
+}
+
+  h1,h2,h3,h4,h5,h6 {
+    text-wrap: balance;
+    font-size: inherit;
+    font-weight: inherit;
+}
+
+  p,h1,h2,h3,h4,h5,h6 {
+    overflow-wrap: break-word;
+}
+
+  ol,ul,menu {
+    list-style: none;
+}
+
+  button,input:where([type='button'], [type='reset'], [type='submit']),::file-selector-button {
+    appearance: button;
+    -webkit-appearance: button;
+}
+
+  button,input,optgroup,select,textarea,::file-selector-button {
+    font: inherit;
+    background: transparent;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+}
+
+  ::placeholder {
+    --placeholder-fallback: rgba(0, 0, 0, 0.5);
+    opacity: 1;
+    color: var(--global-color-placeholder, var(--placeholder-fallback));
+}
+
+  @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      --placeholder-fallback: color-mix(in oklab, currentcolor 50%, transparent);
+}
+}
+
+  ::selection {
+    background-color: var(--global-color-selection, rgba(0, 115, 255, 0.3));
+}
+
+  textarea {
+    resize: vertical;
+}
+
+  table {
+    border-color: inherit;
+    text-indent: 0px;
+    border-collapse: collapse;
+}
+
+  summary {
+    display: list-item;
+}
+
+  small {
+    font-size: 80%;
+}
+
+  sub,sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+  sub {
+    bottom: -0.25em;
+}
+
+  sup {
+    top: -0.5em;
+}
+
+  dialog {
+    padding: 0px;
+}
+
+  a {
+    text-decoration: inherit;
+    color: inherit;
+}
+
+  abbr:where([title]) {
+    text-decoration: underline dotted;
+}
+
+  b,strong {
+    font-weight: bolder;
+}
+
+  code,kbd,samp,pre {
+    --font-mono-fallback: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New';
+    font-family: var(--global-font-mono, var(--font-mono-fallback));
+    font-size: 1em;
+    font-feature-settings: normal;
+    font-variation-settings: normal;
+}
+
+  progress {
+    vertical-align: baseline;
+}
+
+  ::-webkit-search-decoration,::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+}
+
+  ::-webkit-inner-spin-button,::-webkit-outer-spin-button {
+    height: auto;
+}
+
+  :-moz-ui-invalid {
+    box-shadow: none;
+}
+
+  :-moz-focusring {
+    outline: auto;
+}
+
+  [hidden]:where(:not([hidden='until-found'])) {
+    display: none !important;
+}
+}
+@layer base {
+  :root {
+    --made-with-panda: '🐼';
+    --breakpoint-active: base;
+}
+
+  @media screen and (min-width: 480px) {
+    :root {
+      --breakpoint-active: sm;
+}
+}
+
+  @media screen and (min-width: 768px) {
+    :root {
+      --breakpoint-active: md;
+}
+}
+
+  @media screen and (min-width: 1280px) {
+    :root {
+      --breakpoint-active: lg;
+}
+}
+
+  @media screen and (min-width: 1440px) {
+    :root {
+      --breakpoint-active: xl;
+}
+}
+
+  @media (prefers-reduced-motion: reduce) {
+    *,*::before,*::after {
+      animation-duration: 0.01ms;
+      animation-iteration-count: 1;
+      --transition-duration: 0.01ms;
+      transition-duration: 0.01ms;
+}
+}
+
+  *,::before,::after,::backdrop {
+    --blur: /*-*/ /*-*/;
+    --brightness: /*-*/ /*-*/;
+    --contrast: /*-*/ /*-*/;
+    --grayscale: /*-*/ /*-*/;
+    --hue-rotate: /*-*/ /*-*/;
+    --invert: /*-*/ /*-*/;
+    --saturate: /*-*/ /*-*/;
+    --sepia: /*-*/ /*-*/;
+    --drop-shadow: /*-*/ /*-*/;
+    --backdrop-blur: /*-*/ /*-*/;
+    --backdrop-brightness: /*-*/ /*-*/;
+    --backdrop-contrast: /*-*/ /*-*/;
+    --backdrop-grayscale: /*-*/ /*-*/;
+    --backdrop-hue-rotate: /*-*/ /*-*/;
+    --backdrop-invert: /*-*/ /*-*/;
+    --backdrop-opacity: /*-*/ /*-*/;
+    --backdrop-saturate: /*-*/ /*-*/;
+    --backdrop-sepia: /*-*/ /*-*/;
+    --gradient-from-position: /*-*/ /*-*/;
+    --gradient-to-position: /*-*/ /*-*/;
+    --gradient-via-position: /*-*/ /*-*/;
+    --scroll-snap-strictness: proximity;
+    --border-spacing-x: 0;
+    --border-spacing-y: 0;
+    --translate-x: 0;
+    --translate-y: 0;
+    --rotate: 0;
+    --rotate-x: 0;
+    --rotate-y: 0;
+    --skew-x: 0;
+    --skew-y: 0;
+    --scale-x: 1;
+    --scale-y: 1;
+}
+}
+@layer tokens {
+  :where(:root, :host) {
+    --colors-palette-light-gray-100: #f7f8f9;
+    --colors-palette-light-gray-200: #f3f4f5;
+    --colors-palette-light-gray-300: #eeeff1;
+    --colors-palette-light-gray-400: #dcdee3;
+    --colors-palette-light-gray-500: #d1d3d8;
+    --colors-palette-light-gray-600: #b0b3ba;
+    --colors-palette-light-gray-700: #868b94;
+    --colors-palette-light-gray-800: #555d6d;
+    --colors-palette-light-gray-900: #2a3038;
+    --colors-palette-light-gray-1000: #1a1c20;
+    --colors-palette-light-gray-00: #ffffff;
+    --colors-palette-light-carrot-100: #fff2ec;
+    --colors-palette-light-carrot-200: #ffe8db;
+    --colors-palette-light-carrot-300: #ffd5c0;
+    --colors-palette-light-carrot-400: #ffb999;
+    --colors-palette-light-carrot-500: #ff9364;
+    --colors-palette-light-carrot-600: #ff6600;
+    --colors-palette-light-carrot-700: #e14d00;
+    --colors-palette-light-carrot-800: #b93901;
+    --colors-palette-light-carrot-900: #862b00;
+    --colors-palette-light-carrot-1000: #471601;
+    --colors-palette-light-blue-100: #eff6ff;
+    --colors-palette-light-blue-200: #e2edfc;
+    --colors-palette-light-blue-300: #cbdffa;
+    --colors-palette-light-blue-400: #aacefd;
+    --colors-palette-light-blue-500: #85b8fd;
+    --colors-palette-light-blue-600: #5e98fe;
+    --colors-palette-light-blue-700: #217cf9;
+    --colors-palette-light-blue-800: #135fcd;
+    --colors-palette-light-blue-900: #0b4596;
+    --colors-palette-light-blue-1000: #032451;
+    --colors-palette-light-red-100: #fdf0f0;
+    --colors-palette-light-red-200: #fde7e7;
+    --colors-palette-light-red-300: #fed4d2;
+    --colors-palette-light-red-400: #feb7b3;
+    --colors-palette-light-red-500: #fe928d;
+    --colors-palette-light-red-600: #fc6a66;
+    --colors-palette-light-red-700: #fa342c;
+    --colors-palette-light-red-800: #ca1d13;
+    --colors-palette-light-red-900: #921708;
+    --colors-palette-light-red-1000: #4a1209;
+    --colors-palette-light-green-100: #edfaf6;
+    --colors-palette-light-green-200: #d9f6e9;
+    --colors-palette-light-green-300: #b9e9d2;
+    --colors-palette-light-green-400: #7ddcb3;
+    --colors-palette-light-green-500: #42c593;
+    --colors-palette-light-green-600: #10ab7d;
+    --colors-palette-light-green-700: #079171;
+    --colors-palette-light-green-800: #00745f;
+    --colors-palette-light-green-900: #075445;
+    --colors-palette-light-green-1000: #0a2b24;
+    --colors-palette-light-yellow-100: #fff7de;
+    --colors-palette-light-yellow-200: #fdefb9;
+    --colors-palette-light-yellow-300: #fbdc65;
+    --colors-palette-light-yellow-400: #e9c647;
+    --colors-palette-light-yellow-500: #d4ab28;
+    --colors-palette-light-yellow-600: #c49725;
+    --colors-palette-light-yellow-700: #9b7821;
+    --colors-palette-light-yellow-800: #755b22;
+    --colors-palette-light-yellow-900: #4f3e1f;
+    --colors-palette-light-yellow-1000: #2c2512;
+    --colors-palette-light-purple-100: #f5f3fe;
+    --colors-palette-light-purple-200: #efeafe;
+    --colors-palette-light-purple-300: #e1d8ff;
+    --colors-palette-light-purple-400: #d0c0ff;
+    --colors-palette-light-purple-500: #b8a1ff;
+    --colors-palette-light-purple-600: #9f84fb;
+    --colors-palette-light-purple-700: #8969ea;
+    --colors-palette-light-purple-800: #6d50cb;
+    --colors-palette-light-purple-900: #50379b;
+    --colors-palette-light-purple-1000: #29175d;
+    --colors-palette-dark-gray-100: #16171b;
+    --colors-palette-dark-gray-200: #1d2025;
+    --colors-palette-dark-gray-300: #2b2e35;
+    --colors-palette-dark-gray-400: #393d46;
+    --colors-palette-dark-gray-500: #5b606a;
+    --colors-palette-dark-gray-600: #868b94;
+    --colors-palette-dark-gray-700: #b0b3ba;
+    --colors-palette-dark-gray-800: #dcdee3;
+    --colors-palette-dark-gray-900: #e9eaec;
+    --colors-palette-dark-gray-1000: #f3f4f5;
+    --colors-palette-dark-gray-00: #000000;
+    --colors-palette-dark-carrot-100: #31241f;
+    --colors-palette-dark-carrot-200: #4b291c;
+    --colors-palette-dark-carrot-300: #6b311c;
+    --colors-palette-dark-carrot-400: #923600;
+    --colors-palette-dark-carrot-500: #bd4201;
+    --colors-palette-dark-carrot-600: #e65200;
+    --colors-palette-dark-carrot-700: #ff6600;
+    --colors-palette-dark-carrot-800: #ff9e65;
+    --colors-palette-dark-carrot-900: #eecebc;
+    --colors-palette-dark-carrot-1000: #f4eeea;
+    --colors-palette-dark-blue-100: #202742;
+    --colors-palette-dark-blue-200: #1e3352;
+    --colors-palette-dark-blue-300: #1a4275;
+    --colors-palette-dark-blue-400: #0f559e;
+    --colors-palette-dark-blue-500: #1964d8;
+    --colors-palette-dark-blue-600: #1e82eb;
+    --colors-palette-dark-blue-700: #41a2f9;
+    --colors-palette-dark-blue-800: #83bcf9;
+    --colors-palette-dark-blue-900: #b9d7fb;
+    --colors-palette-dark-blue-1000: #e5f0fe;
+    --colors-palette-dark-red-100: #322323;
+    --colors-palette-dark-red-200: #4f2624;
+    --colors-palette-dark-red-300: #742826;
+    --colors-palette-dark-red-400: #a12621;
+    --colors-palette-dark-red-500: #ca2319;
+    --colors-palette-dark-red-600: #f73526;
+    --colors-palette-dark-red-700: #ff6e60;
+    --colors-palette-dark-red-800: #ffa299;
+    --colors-palette-dark-red-900: #f8c5c3;
+    --colors-palette-dark-red-1000: #fdf2f2;
+    --colors-palette-dark-green-100: #202926;
+    --colors-palette-dark-green-200: #20362e;
+    --colors-palette-dark-green-300: #20493b;
+    --colors-palette-dark-green-400: #19604c;
+    --colors-palette-dark-green-500: #117956;
+    --colors-palette-dark-green-600: #1b946d;
+    --colors-palette-dark-green-700: #22b27f;
+    --colors-palette-dark-green-800: #35ce9a;
+    --colors-palette-dark-green-900: #93e5c0;
+    --colors-palette-dark-green-1000: #d4f6ef;
+    --colors-palette-dark-yellow-100: #302819;
+    --colors-palette-dark-yellow-200: #413218;
+    --colors-palette-dark-yellow-300: #543e15;
+    --colors-palette-dark-yellow-400: #714e15;
+    --colors-palette-dark-yellow-500: #91601b;
+    --colors-palette-dark-yellow-600: #b6720d;
+    --colors-palette-dark-yellow-700: #ca901c;
+    --colors-palette-dark-yellow-800: #dab156;
+    --colors-palette-dark-yellow-900: #e5d49b;
+    --colors-palette-dark-yellow-1000: #f7f0cd;
+    --colors-palette-dark-purple-100: #28213b;
+    --colors-palette-dark-purple-200: #3b2873;
+    --colors-palette-dark-purple-300: #443081;
+    --colors-palette-dark-purple-400: #5a3bb1;
+    --colors-palette-dark-purple-500: #764fd9;
+    --colors-palette-dark-purple-600: #8e6bee;
+    --colors-palette-dark-purple-700: #a78df0;
+    --colors-palette-dark-purple-800: #beadf2;
+    --colors-palette-dark-purple-900: #d9cefa;
+    --colors-palette-dark-purple-1000: #f0edfc;
+    --colors-palette-static-black: #000000;
+    --colors-palette-static-black-alpha-100: #00000007;
+    --colors-palette-static-black-alpha-200: #0000000c;
+    --colors-palette-static-black-alpha-300: #00000010;
+    --colors-palette-static-black-alpha-400: #00000021;
+    --colors-palette-static-black-alpha-500: #0000002c;
+    --colors-palette-static-black-alpha-600: #0000004c;
+    --colors-palette-static-black-alpha-700: #00000074;
+    --colors-palette-static-black-alpha-800: #000000a2;
+    --colors-palette-static-black-alpha-900: #000000d0;
+    --colors-palette-static-black-alpha-1000: #000000e3;
+    --colors-palette-static-white: #ffffff;
+    --colors-palette-static-white-alpha-50: #ffffff0d;
+    --colors-palette-static-white-alpha-100: #ffffff17;
+    --colors-palette-static-white-alpha-200: #ffffff20;
+    --colors-palette-static-white-alpha-300: #ffffff2e;
+    --colors-palette-static-white-alpha-400: #ffffff3d;
+    --colors-palette-static-white-alpha-500: #ffffff60;
+    --colors-palette-static-white-alpha-600: #ffffff8b;
+    --colors-palette-static-white-alpha-700: #ffffffb3;
+    --colors-palette-static-white-alpha-800: #ffffffde;
+    --colors-palette-static-white-alpha-900: #ffffffea;
+    --colors-palette-static-white-alpha-1000: #fffffff4;
+    --colors-palette-static-transparent: #00000000;
+    --durations-d1: 50ms;
+    --durations-d2: 100ms;
+    --durations-d3: 150ms;
+    --durations-d4: 200ms;
+    --durations-d5: 250ms;
+    --durations-d6: 300ms;
+    --durations-color-transition: var(--durations-d3);
+    --durations-pressed-scale: var(--durations-d3);
+    --easings-linear: cubic-bezier(0, 0, 1, 1);
+    --easings-easing: cubic-bezier(0.35, 0, 0.35, 1);
+    --easings-enter: cubic-bezier(0, 0, 0.15, 1);
+    --easings-enter-expressive: cubic-bezier(0.03, 0.4, 0.1, 1);
+    --easings-exit: cubic-bezier(0.35, 0, 1, 1);
+    --easings-exit-expressive: cubic-bezier(0.35, 0, 0.95, 0.55);
+    --easings-pressed-scale: cubic-bezier(0, 0, 0.15, 1);
+    --font-sizes-t1: 0.6875rem;
+    --font-sizes-t1-static: 11px;
+    --font-sizes-t2: 0.75rem;
+    --font-sizes-t2-static: 12px;
+    --font-sizes-t3: 0.8125rem;
+    --font-sizes-t3-static: 13px;
+    --font-sizes-t4: 0.875rem;
+    --font-sizes-t4-static: 14px;
+    --font-sizes-t5: 1rem;
+    --font-sizes-t5-static: 16px;
+    --font-sizes-t6: 1.125rem;
+    --font-sizes-t6-static: 18px;
+    --font-sizes-t7: 1.25rem;
+    --font-sizes-t7-static: 20px;
+    --font-sizes-t8: 1.375rem;
+    --font-sizes-t8-static: 22px;
+    --font-sizes-t9: 1.5rem;
+    --font-sizes-t9-static: 24px;
+    --font-sizes-t10: 1.625rem;
+    --font-sizes-t10-static: 26px;
+    --font-sizes-t11: 1.75rem;
+    --font-sizes-t11-static: 28px;
+    --font-sizes-t12: 2rem;
+    --font-sizes-t12-static: 32px;
+    --font-sizes-t13: 2.5rem;
+    --font-sizes-t13-static: 40px;
+    --font-sizes-t14: 3rem;
+    --font-sizes-t14-static: 48px;
+    --font-weights-regular: 400;
+    --font-weights-medium: 500;
+    --font-weights-bold: 700;
+    --line-heights-t1: 0.9375rem;
+    --line-heights-t1-static: 15px;
+    --line-heights-t2: 1rem;
+    --line-heights-t2-static: 16px;
+    --line-heights-t3: 1.125rem;
+    --line-heights-t3-static: 18px;
+    --line-heights-t4: 1.1875rem;
+    --line-heights-t4-static: 19px;
+    --line-heights-t5: 1.375rem;
+    --line-heights-t5-static: 22px;
+    --line-heights-t6: 1.5rem;
+    --line-heights-t6-static: 24px;
+    --line-heights-t7: 1.6875rem;
+    --line-heights-t7-static: 27px;
+    --line-heights-t8: 1.875rem;
+    --line-heights-t8-static: 30px;
+    --line-heights-t9: 2rem;
+    --line-heights-t9-static: 32px;
+    --line-heights-t10: 2.1875rem;
+    --line-heights-t10-static: 35px;
+    --line-heights-t11: 2.375rem;
+    --line-heights-t11-static: 38px;
+    --line-heights-t12: 2.625rem;
+    --line-heights-t12-static: 42px;
+    --line-heights-t13: 3.25rem;
+    --line-heights-t13-static: 52px;
+    --line-heights-t14: 3.75rem;
+    --line-heights-t14-static: 60px;
+    --radii-r0_5: 2px;
+    --radii-r1: 4px;
+    --radii-r1_5: 6px;
+    --radii-r2: 8px;
+    --radii-r2_5: 10px;
+    --radii-r3: 12px;
+    --radii-r3_5: 14px;
+    --radii-r4: 16px;
+    --radii-r5: 20px;
+    --radii-r6: 24px;
+    --radii-full: 9999px;
+    --spacing-1: 4px;
+    --spacing-2: 8px;
+    --spacing-3: 12px;
+    --spacing-4: 16px;
+    --spacing-5: 20px;
+    --spacing-6: 24px;
+    --spacing-7: 28px;
+    --spacing-8: 32px;
+    --spacing-9: 36px;
+    --spacing-10: 40px;
+    --spacing-12: 48px;
+    --spacing-13: 52px;
+    --spacing-14: 56px;
+    --spacing-16: 64px;
+    --spacing-0\.5: 2px;
+    --spacing-1\.5: 6px;
+    --spacing-2\.5: 10px;
+    --spacing-3\.5: 14px;
+    --spacing-4\.5: 18px;
+    --colors-gray-100: var(--colors-palette-light-gray-100);
+    --colors-gray-200: var(--colors-palette-light-gray-200);
+    --colors-gray-300: var(--colors-palette-light-gray-300);
+    --colors-gray-400: var(--colors-palette-light-gray-400);
+    --colors-gray-500: var(--colors-palette-light-gray-500);
+    --colors-gray-600: var(--colors-palette-light-gray-600);
+    --colors-gray-700: var(--colors-palette-light-gray-700);
+    --colors-gray-800: var(--colors-palette-light-gray-800);
+    --colors-gray-900: var(--colors-palette-light-gray-900);
+    --colors-gray-1000: var(--colors-palette-light-gray-1000);
+    --colors-gray-00: var(--colors-palette-light-gray-00);
+    --colors-carrot-100: var(--colors-palette-light-carrot-100);
+    --colors-carrot-200: var(--colors-palette-light-carrot-200);
+    --colors-carrot-300: var(--colors-palette-light-carrot-300);
+    --colors-carrot-400: var(--colors-palette-light-carrot-400);
+    --colors-carrot-500: var(--colors-palette-light-carrot-500);
+    --colors-carrot-600: var(--colors-palette-light-carrot-600);
+    --colors-carrot-700: var(--colors-palette-light-carrot-700);
+    --colors-carrot-800: var(--colors-palette-light-carrot-800);
+    --colors-carrot-900: var(--colors-palette-light-carrot-900);
+    --colors-carrot-1000: var(--colors-palette-light-carrot-1000);
+    --colors-blue-100: var(--colors-palette-light-blue-100);
+    --colors-blue-200: var(--colors-palette-light-blue-200);
+    --colors-blue-300: var(--colors-palette-light-blue-300);
+    --colors-blue-400: var(--colors-palette-light-blue-400);
+    --colors-blue-500: var(--colors-palette-light-blue-500);
+    --colors-blue-600: var(--colors-palette-light-blue-600);
+    --colors-blue-700: var(--colors-palette-light-blue-700);
+    --colors-blue-800: var(--colors-palette-light-blue-800);
+    --colors-blue-900: var(--colors-palette-light-blue-900);
+    --colors-blue-1000: var(--colors-palette-light-blue-1000);
+    --colors-red-100: var(--colors-palette-light-red-100);
+    --colors-red-200: var(--colors-palette-light-red-200);
+    --colors-red-300: var(--colors-palette-light-red-300);
+    --colors-red-400: var(--colors-palette-light-red-400);
+    --colors-red-500: var(--colors-palette-light-red-500);
+    --colors-red-600: var(--colors-palette-light-red-600);
+    --colors-red-700: var(--colors-palette-light-red-700);
+    --colors-red-800: var(--colors-palette-light-red-800);
+    --colors-red-900: var(--colors-palette-light-red-900);
+    --colors-red-1000: var(--colors-palette-light-red-1000);
+    --colors-green-100: var(--colors-palette-light-green-100);
+    --colors-green-200: var(--colors-palette-light-green-200);
+    --colors-green-300: var(--colors-palette-light-green-300);
+    --colors-green-400: var(--colors-palette-light-green-400);
+    --colors-green-500: var(--colors-palette-light-green-500);
+    --colors-green-600: var(--colors-palette-light-green-600);
+    --colors-green-700: var(--colors-palette-light-green-700);
+    --colors-green-800: var(--colors-palette-light-green-800);
+    --colors-green-900: var(--colors-palette-light-green-900);
+    --colors-green-1000: var(--colors-palette-light-green-1000);
+    --colors-yellow-100: var(--colors-palette-light-yellow-100);
+    --colors-yellow-200: var(--colors-palette-light-yellow-200);
+    --colors-yellow-300: var(--colors-palette-light-yellow-300);
+    --colors-yellow-400: var(--colors-palette-light-yellow-400);
+    --colors-yellow-500: var(--colors-palette-light-yellow-500);
+    --colors-yellow-600: var(--colors-palette-light-yellow-600);
+    --colors-yellow-700: var(--colors-palette-light-yellow-700);
+    --colors-yellow-800: var(--colors-palette-light-yellow-800);
+    --colors-yellow-900: var(--colors-palette-light-yellow-900);
+    --colors-yellow-1000: var(--colors-palette-light-yellow-1000);
+    --colors-purple-100: var(--colors-palette-light-purple-100);
+    --colors-purple-200: var(--colors-palette-light-purple-200);
+    --colors-purple-300: var(--colors-palette-light-purple-300);
+    --colors-purple-400: var(--colors-palette-light-purple-400);
+    --colors-purple-500: var(--colors-palette-light-purple-500);
+    --colors-purple-600: var(--colors-palette-light-purple-600);
+    --colors-purple-700: var(--colors-palette-light-purple-700);
+    --colors-purple-800: var(--colors-palette-light-purple-800);
+    --colors-purple-900: var(--colors-palette-light-purple-900);
+    --colors-purple-1000: var(--colors-palette-light-purple-1000);
+    --colors-fg-brand: var(--colors-palette-light-carrot-600);
+    --colors-fg-brand-contrast: var(--colors-palette-light-carrot-700);
+    --colors-fg-critical: var(--colors-palette-light-red-700);
+    --colors-fg-critical-contrast: var(--colors-palette-light-red-900);
+    --colors-fg-disabled: var(--colors-palette-light-gray-500);
+    --colors-fg-informative: var(--colors-palette-light-blue-700);
+    --colors-fg-informative-contrast: var(--colors-palette-light-blue-900);
+    --colors-fg-neutral: var(--colors-palette-light-gray-1000);
+    --colors-fg-neutral-inverted: var(--colors-palette-light-gray-00);
+    --colors-fg-neutral-muted: var(--colors-palette-light-gray-800);
+    --colors-fg-neutral-subtle: var(--colors-palette-light-gray-700);
+    --colors-fg-placeholder: var(--colors-palette-light-gray-600);
+    --colors-fg-positive: var(--colors-palette-light-green-700);
+    --colors-fg-positive-contrast: var(--colors-palette-light-green-900);
+    --colors-fg-warning: var(--colors-palette-light-yellow-700);
+    --colors-fg-warning-contrast: var(--colors-palette-light-yellow-900);
+    --colors-bg-brand-solid: var(--colors-palette-light-carrot-600);
+    --colors-bg-brand-solid-pressed: var(--colors-palette-light-carrot-700);
+    --colors-bg-brand-weak: var(--colors-palette-light-carrot-100);
+    --colors-bg-brand-weak-pressed: var(--colors-palette-light-carrot-200);
+    --colors-bg-critical-solid: var(--colors-palette-light-red-700);
+    --colors-bg-critical-solid-pressed: var(--colors-palette-light-red-800);
+    --colors-bg-critical-weak: var(--colors-palette-light-red-100);
+    --colors-bg-critical-weak-pressed: var(--colors-palette-light-red-200);
+    --colors-bg-disabled: var(--colors-palette-light-gray-200);
+    --colors-bg-informative-solid: var(--colors-palette-light-blue-700);
+    --colors-bg-informative-solid-pressed: var(--colors-palette-light-blue-800);
+    --colors-bg-informative-weak: var(--colors-palette-light-blue-100);
+    --colors-bg-informative-weak-pressed: var(--colors-palette-light-blue-200);
+    --colors-bg-layer: var(--colors-palette-light-gray-00);
+    --colors-bg-layer-basement: var(--colors-palette-light-gray-200);
+    --colors-bg-layer-pressed: var(--colors-palette-light-gray-100);
+    --colors-bg-layer-floating: var(--colors-palette-light-gray-00);
+    --colors-bg-layer-floating-pressed: var(--colors-palette-light-gray-100);
+    --colors-bg-magic-weak: #f9f2ee;
+    --colors-bg-neutral-inverted: var(--colors-palette-light-gray-900);
+    --colors-bg-neutral-inverted-pressed: var(--colors-palette-light-gray-800);
+    --colors-bg-neutral-solid: var(--colors-palette-light-gray-1000);
+    --colors-bg-neutral-solid-muted: var(--colors-palette-light-gray-800);
+    --colors-bg-neutral-solid-muted-pressed: var(--colors-palette-light-gray-900);
+    --colors-bg-neutral-weak: var(--colors-palette-light-gray-200);
+    --colors-bg-neutral-weak-alpha: var(--colors-palette-static-black-alpha-200);
+    --colors-bg-neutral-weak-alpha-pressed: var(--colors-palette-static-black-alpha-300);
+    --colors-bg-neutral-weak-pressed: var(--colors-palette-light-gray-300);
+    --colors-bg-overlay: var(--colors-palette-static-black-alpha-700);
+    --colors-bg-overlay-muted: var(--colors-palette-static-black-alpha-500);
+    --colors-bg-positive-solid: var(--colors-palette-light-green-700);
+    --colors-bg-positive-solid-pressed: var(--colors-palette-light-green-800);
+    --colors-bg-positive-weak: var(--colors-palette-light-green-100);
+    --colors-bg-positive-weak-pressed: var(--colors-palette-light-green-200);
+    --colors-bg-transparent: #00000000;
+    --colors-bg-transparent-pressed: var(--colors-palette-static-black-alpha-100);
+    --colors-bg-transparent-selected: var(--colors-palette-static-black-alpha-200);
+    --colors-bg-transparent-selected-pressed: var(--colors-palette-static-black-alpha-300);
+    --colors-bg-warning-solid: var(--colors-palette-light-yellow-300);
+    --colors-bg-warning-solid-pressed: var(--colors-palette-light-yellow-400);
+    --colors-bg-warning-weak: var(--colors-palette-light-yellow-100);
+    --colors-bg-warning-weak-pressed: var(--colors-palette-light-yellow-200);
+    --colors-stroke-brand-solid: var(--colors-palette-light-carrot-700);
+    --colors-stroke-brand-weak: var(--colors-palette-light-carrot-300);
+    --colors-stroke-critical-solid: var(--colors-palette-light-red-700);
+    --colors-stroke-critical-weak: var(--colors-palette-light-red-300);
+    --colors-stroke-focus-ring: var(--colors-palette-light-blue-600);
+    --colors-stroke-informative-solid: var(--colors-palette-light-blue-700);
+    --colors-stroke-informative-weak: var(--colors-palette-light-blue-300);
+    --colors-stroke-neutral-contrast: var(--colors-palette-light-gray-1000);
+    --colors-stroke-neutral-muted: var(--colors-palette-static-black-alpha-300);
+    --colors-stroke-neutral-solid: var(--colors-palette-light-gray-800);
+    --colors-stroke-neutral-subtle: var(--colors-palette-static-black-alpha-200);
+    --colors-stroke-neutral-weak: var(--colors-palette-light-gray-400);
+    --colors-stroke-positive-solid: var(--colors-palette-light-green-700);
+    --colors-stroke-positive-weak: var(--colors-palette-light-green-300);
+    --colors-stroke-warning-solid: var(--colors-palette-light-yellow-700);
+    --colors-stroke-warning-weak: var(--colors-palette-light-yellow-300);
+    --gradients-glow-magic: linear-gradient(88deg, #fef6f7 0%, #fef0e7 80%, #f9f7f5 100%);
+    --gradients-glow-magic-pressed: linear-gradient(88deg, #fbf0f2 0%, #ffe8db 80%, #f5f2ef 100%);
+    --gradients-highlight-magic: linear-gradient(90deg, #ff6600 20%, #d25aca 100%);
+    --gradients-highlight-magic-pressed: linear-gradient(90deg, #e14f00 20%, #ae58bf 100%);
+    --gradients-shimmer-magic: linear-gradient(90deg, #fff9f500 0%, #fff9f5cc 46%, #fff9f5cc 54%, #fff9f500 100%);
+    --gradients-shimmer-neutral: linear-gradient(90deg, #ffffff00 0%, #ffffffab 46%, #ffffffab 54%, #ffffff00 100%);
+    --shadows-s1: 0px 1px 4px 0px #00000014;
+    --shadows-s2: 0px 2px 10px 0px #0000001a;
+    --shadows-s3: 0px 4px 16px 0px #0000001f;
+}
+
+  .dark {
+    --colors-gray-100: var(--colors-palette-dark-gray-100);
+    --colors-gray-200: var(--colors-palette-dark-gray-200);
+    --colors-gray-300: var(--colors-palette-dark-gray-300);
+    --colors-gray-400: var(--colors-palette-dark-gray-400);
+    --colors-gray-500: var(--colors-palette-dark-gray-500);
+    --colors-gray-600: var(--colors-palette-dark-gray-600);
+    --colors-gray-700: var(--colors-palette-dark-gray-700);
+    --colors-gray-800: var(--colors-palette-dark-gray-800);
+    --colors-gray-900: var(--colors-palette-dark-gray-900);
+    --colors-gray-1000: var(--colors-palette-dark-gray-1000);
+    --colors-gray-00: var(--colors-palette-dark-gray-00);
+    --colors-carrot-100: var(--colors-palette-dark-carrot-100);
+    --colors-carrot-200: var(--colors-palette-dark-carrot-200);
+    --colors-carrot-300: var(--colors-palette-dark-carrot-300);
+    --colors-carrot-400: var(--colors-palette-dark-carrot-400);
+    --colors-carrot-500: var(--colors-palette-dark-carrot-500);
+    --colors-carrot-600: var(--colors-palette-dark-carrot-600);
+    --colors-carrot-700: var(--colors-palette-dark-carrot-700);
+    --colors-carrot-800: var(--colors-palette-dark-carrot-800);
+    --colors-carrot-900: var(--colors-palette-dark-carrot-900);
+    --colors-carrot-1000: var(--colors-palette-dark-carrot-1000);
+    --colors-blue-100: var(--colors-palette-dark-blue-100);
+    --colors-blue-200: var(--colors-palette-dark-blue-200);
+    --colors-blue-300: var(--colors-palette-dark-blue-300);
+    --colors-blue-400: var(--colors-palette-dark-blue-400);
+    --colors-blue-500: var(--colors-palette-dark-blue-500);
+    --colors-blue-600: var(--colors-palette-dark-blue-600);
+    --colors-blue-700: var(--colors-palette-dark-blue-700);
+    --colors-blue-800: var(--colors-palette-dark-blue-800);
+    --colors-blue-900: var(--colors-palette-dark-blue-900);
+    --colors-blue-1000: var(--colors-palette-dark-blue-1000);
+    --colors-red-100: var(--colors-palette-dark-red-100);
+    --colors-red-200: var(--colors-palette-dark-red-200);
+    --colors-red-300: var(--colors-palette-dark-red-300);
+    --colors-red-400: var(--colors-palette-dark-red-400);
+    --colors-red-500: var(--colors-palette-dark-red-500);
+    --colors-red-600: var(--colors-palette-dark-red-600);
+    --colors-red-700: var(--colors-palette-dark-red-700);
+    --colors-red-800: var(--colors-palette-dark-red-800);
+    --colors-red-900: var(--colors-palette-dark-red-900);
+    --colors-red-1000: var(--colors-palette-dark-red-1000);
+    --colors-green-100: var(--colors-palette-dark-green-100);
+    --colors-green-200: var(--colors-palette-dark-green-200);
+    --colors-green-300: var(--colors-palette-dark-green-300);
+    --colors-green-400: var(--colors-palette-dark-green-400);
+    --colors-green-500: var(--colors-palette-dark-green-500);
+    --colors-green-600: var(--colors-palette-dark-green-600);
+    --colors-green-700: var(--colors-palette-dark-green-700);
+    --colors-green-800: var(--colors-palette-dark-green-800);
+    --colors-green-900: var(--colors-palette-dark-green-900);
+    --colors-green-1000: var(--colors-palette-dark-green-1000);
+    --colors-yellow-100: var(--colors-palette-dark-yellow-100);
+    --colors-yellow-200: var(--colors-palette-dark-yellow-200);
+    --colors-yellow-300: var(--colors-palette-dark-yellow-300);
+    --colors-yellow-400: var(--colors-palette-dark-yellow-400);
+    --colors-yellow-500: var(--colors-palette-dark-yellow-500);
+    --colors-yellow-600: var(--colors-palette-dark-yellow-600);
+    --colors-yellow-700: var(--colors-palette-dark-yellow-700);
+    --colors-yellow-800: var(--colors-palette-dark-yellow-800);
+    --colors-yellow-900: var(--colors-palette-dark-yellow-900);
+    --colors-yellow-1000: var(--colors-palette-dark-yellow-1000);
+    --colors-purple-100: var(--colors-palette-dark-purple-100);
+    --colors-purple-200: var(--colors-palette-dark-purple-200);
+    --colors-purple-300: var(--colors-palette-dark-purple-300);
+    --colors-purple-400: var(--colors-palette-dark-purple-400);
+    --colors-purple-500: var(--colors-palette-dark-purple-500);
+    --colors-purple-600: var(--colors-palette-dark-purple-600);
+    --colors-purple-700: var(--colors-palette-dark-purple-700);
+    --colors-purple-800: var(--colors-palette-dark-purple-800);
+    --colors-purple-900: var(--colors-palette-dark-purple-900);
+    --colors-purple-1000: var(--colors-palette-dark-purple-1000);
+    --colors-fg-brand: var(--colors-palette-dark-carrot-700);
+    --colors-fg-brand-contrast: var(--colors-palette-dark-carrot-700);
+    --colors-fg-critical: var(--colors-palette-dark-red-700);
+    --colors-fg-critical-contrast: var(--colors-palette-dark-red-900);
+    --colors-fg-disabled: var(--colors-palette-dark-gray-500);
+    --colors-fg-informative: var(--colors-palette-dark-blue-700);
+    --colors-fg-informative-contrast: var(--colors-palette-dark-blue-900);
+    --colors-fg-neutral: var(--colors-palette-dark-gray-1000);
+    --colors-fg-neutral-inverted: var(--colors-palette-dark-gray-100);
+    --colors-fg-neutral-muted: var(--colors-palette-dark-gray-800);
+    --colors-fg-neutral-subtle: var(--colors-palette-dark-gray-700);
+    --colors-fg-placeholder: var(--colors-palette-dark-gray-600);
+    --colors-fg-positive: var(--colors-palette-dark-green-700);
+    --colors-fg-positive-contrast: var(--colors-palette-dark-green-900);
+    --colors-fg-warning: var(--colors-palette-dark-yellow-700);
+    --colors-fg-warning-contrast: var(--colors-palette-dark-yellow-900);
+    --colors-bg-brand-solid: var(--colors-palette-dark-carrot-700);
+    --colors-bg-brand-solid-pressed: var(--colors-palette-dark-carrot-800);
+    --colors-bg-brand-weak: var(--colors-palette-dark-carrot-100);
+    --colors-bg-brand-weak-pressed: var(--colors-palette-dark-carrot-200);
+    --colors-bg-critical-solid: var(--colors-palette-dark-red-600);
+    --colors-bg-critical-solid-pressed: var(--colors-palette-dark-red-700);
+    --colors-bg-critical-weak: var(--colors-palette-dark-red-100);
+    --colors-bg-critical-weak-pressed: var(--colors-palette-dark-red-200);
+    --colors-bg-disabled: var(--colors-palette-dark-gray-300);
+    --colors-bg-informative-solid: var(--colors-palette-dark-blue-600);
+    --colors-bg-informative-solid-pressed: var(--colors-palette-dark-blue-700);
+    --colors-bg-informative-weak: var(--colors-palette-dark-blue-100);
+    --colors-bg-informative-weak-pressed: var(--colors-palette-dark-blue-200);
+    --colors-bg-layer: var(--colors-palette-dark-gray-100);
+    --colors-bg-layer-basement: var(--colors-palette-dark-gray-00);
+    --colors-bg-layer-pressed: var(--colors-palette-dark-gray-300);
+    --colors-bg-layer-floating: var(--colors-palette-dark-gray-200);
+    --colors-bg-layer-floating-pressed: var(--colors-palette-dark-gray-300);
+    --colors-bg-magic-weak: #201f1f;
+    --colors-bg-neutral-inverted: var(--colors-palette-dark-gray-1000);
+    --colors-bg-neutral-inverted-pressed: var(--colors-palette-dark-gray-800);
+    --colors-bg-neutral-solid: var(--colors-palette-dark-gray-300);
+    --colors-bg-neutral-solid-muted: var(--colors-palette-dark-gray-400);
+    --colors-bg-neutral-solid-muted-pressed: var(--colors-palette-dark-gray-500);
+    --colors-bg-neutral-weak: var(--colors-palette-dark-gray-300);
+    --colors-bg-neutral-weak-alpha: var(--colors-palette-static-white-alpha-200);
+    --colors-bg-neutral-weak-alpha-pressed: var(--colors-palette-static-white-alpha-300);
+    --colors-bg-neutral-weak-pressed: var(--colors-palette-dark-gray-400);
+    --colors-bg-overlay: var(--colors-palette-static-black-alpha-700);
+    --colors-bg-overlay-muted: var(--colors-palette-static-black-alpha-500);
+    --colors-bg-positive-solid: var(--colors-palette-dark-green-500);
+    --colors-bg-positive-solid-pressed: var(--colors-palette-dark-green-600);
+    --colors-bg-positive-weak: var(--colors-palette-dark-green-100);
+    --colors-bg-positive-weak-pressed: var(--colors-palette-dark-green-200);
+    --colors-bg-transparent: #ffffff00;
+    --colors-bg-transparent-pressed: var(--colors-palette-static-white-alpha-50);
+    --colors-bg-transparent-selected: var(--colors-palette-static-white-alpha-100);
+    --colors-bg-transparent-selected-pressed: var(--colors-palette-static-white-alpha-200);
+    --colors-bg-warning-solid: var(--colors-palette-dark-yellow-800);
+    --colors-bg-warning-solid-pressed: var(--colors-palette-dark-yellow-900);
+    --colors-bg-warning-weak: var(--colors-palette-dark-yellow-100);
+    --colors-bg-warning-weak-pressed: var(--colors-palette-dark-yellow-200);
+    --colors-stroke-brand-solid: var(--colors-palette-dark-carrot-700);
+    --colors-stroke-brand-weak: var(--colors-palette-dark-carrot-300);
+    --colors-stroke-critical-solid: var(--colors-palette-dark-red-700);
+    --colors-stroke-critical-weak: var(--colors-palette-dark-red-300);
+    --colors-stroke-focus-ring: var(--colors-palette-dark-blue-600);
+    --colors-stroke-informative-solid: var(--colors-palette-dark-blue-700);
+    --colors-stroke-informative-weak: var(--colors-palette-dark-blue-300);
+    --colors-stroke-neutral-contrast: var(--colors-palette-dark-gray-1000);
+    --colors-stroke-neutral-muted: var(--colors-palette-static-white-alpha-100);
+    --colors-stroke-neutral-solid: var(--colors-palette-dark-gray-800);
+    --colors-stroke-neutral-subtle: var(--colors-palette-static-white-alpha-50);
+    --colors-stroke-neutral-weak: var(--colors-palette-dark-gray-400);
+    --colors-stroke-positive-solid: var(--colors-palette-dark-green-700);
+    --colors-stroke-positive-weak: var(--colors-palette-dark-green-300);
+    --colors-stroke-warning-solid: var(--colors-palette-dark-yellow-700);
+    --colors-stroke-warning-weak: var(--colors-palette-dark-yellow-300);
+    --gradients-glow-magic: linear-gradient(88deg, #2d252d 0%, #3a312b 80%, #333232 100%);
+    --gradients-glow-magic-pressed: linear-gradient(88deg, #3e333e 0%, #51453e 80%, #434242 100%);
+    --gradients-highlight-magic: linear-gradient(90deg, #ff6600 20%, #d25aca 100%);
+    --gradients-highlight-magic-pressed: linear-gradient(90deg, #ff9e65 20%, #e89bee 100%);
+    --gradients-shimmer-magic: linear-gradient(90deg, #fff9f500 0%, #fff9f51a 46%, #fff9f51a 54%, #fff9f500 100%);
+    --gradients-shimmer-neutral: linear-gradient(90deg, #ffffff00 0%, #ffffff1a 46%, #ffffff1a 54%, #ffffff00 100%);
+    --shadows-s1: 0px 1px 4px 0px #00000080;
+    --shadows-s2: 0px 2px 10px 0px #000000ad;
+    --shadows-s3: 0px 4px 16px 0px #000000cc
+}
+
+  @keyframes accordion-down_radix {
+    from {
+      height: 0;
+}
+
+    to {
+      height: var(--radix-accordion-content-height);
+}
+}
+
+  @keyframes accordion-up_radix {
+    from {
+      height: var(--radix-accordion-content-height);
+}
+
+    to {
+      height: 0;
+}
+}
+
+  @keyframes contentShow {
+    0% {
+      opacity: 0;
+      transform: translate(-50%, -50%) scale(0.96);
+}
+
+    to {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+}
+}
+
+  @keyframes contentHide {
+    0% {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+}
+
+    to {
+      opacity: 0;
+      transform: translate(-50%, -50%) scale(0.96);
+}
+}
+
+  @keyframes selectContentShow {
+    0% {
+      opacity: 0;
+      transform: scale(0.97);
+}
+
+    to {
+      opacity: 1;
+      transform: scale(1);
+}
+}
+
+  @keyframes selectContentHide {
+    0% {
+      opacity: 1;
+      transform: scale(1);
+}
+
+    to {
+      opacity: 0;
+      transform: scale(0.99);
+}
+}
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+}
+
+    to {
+      opacity: 1;
+}
+}
+
+  @keyframes fadeOut {
+    0% {
+      opacity: 1;
+}
+
+    to {
+      opacity: 0;
+}
+}
+
+  @keyframes slideInDown {
+    0% {
+      transform: translate3d(0, -100%, 0);
+      visibility: visible;
+}
+
+    to {
+      transform: translateZ(0);
+}
+}
+}
+@layer utilities {
+
+  .anim_fadeUp {
+    animation: fadeUp;
+}
+
+  .anim_fadeDown {
+    animation: fadeDown;
+}
+
+  .anim_fadeLeft {
+    animation: fadeLeft;
+}
+
+  .anim_fadeRight {
+    animation: fadeRight;
+}
+
+  .bg_bg\.neutral\.weak {
+    background: var(--colors-bg-neutral-weak);
+}
+
+  .bg_bg\.brand\.weak {
+    background: var(--colors-bg-brand-weak);
+}
+
+  .bg_bg\.informative\.weak {
+    background: var(--colors-bg-informative-weak);
+}
+
+  .bg_bg\.positive\.weak {
+    background: var(--colors-bg-positive-weak);
+}
+
+  .bg_bg\.warning\.weak {
+    background: var(--colors-bg-warning-weak);
+}
+
+  .bg_bg\.critical\.weak {
+    background: var(--colors-bg-critical-weak);
+}
+
+  .gap_3 {
+    gap: var(--spacing-3);
+}
+
+  .gap_2 {
+    gap: var(--spacing-2);
+}
+
+  .gap_8px {
+    gap: 8px;
+}
+
+  .bd-c_stroke\.neutral\.muted {
+    border-color: var(--colors-stroke-neutral-muted);
+}
+
+  .bd-c_stroke\.brand\.weak {
+    border-color: var(--colors-stroke-brand-weak);
+}
+
+  .bd-c_stroke\.informative\.weak {
+    border-color: var(--colors-stroke-informative-weak);
+}
+
+  .bd-c_stroke\.positive\.weak {
+    border-color: var(--colors-stroke-positive-weak);
+}
+
+  .bd-c_stroke\.warning\.weak {
+    border-color: var(--colors-stroke-warning-weak);
+}
+
+  .bd-c_stroke\.critical\.weak {
+    border-color: var(--colors-stroke-critical-weak);
+}
+
+  .d_grid {
+    display: grid;
+}
+
+  .ai_center {
+    align-items: center;
+}
+
+  .d_flex {
+    display: flex;
+}
+
+  .jc_center {
+    justify-content: center;
+}
+
+  .jc_space-between {
+    justify-content: space-between;
+}
+
+  .md_4 {
+    md: 4px;
+}
+
+  .flex-d_column {
+    flex-direction: column;
+}
+
+  .flex-d_row {
+    flex-direction: row;
+}
+
+  .c_fg\.neutral\.muted {
+    color: var(--colors-fg-neutral-muted);
+}
+
+  .c_fg\.brand\.contrast {
+    color: var(--colors-fg-brand-contrast);
+}
+
+  .c_fg\.brand {
+    color: var(--colors-fg-brand);
+}
+
+  .c_fg\.informative\.contrast {
+    color: var(--colors-fg-informative-contrast);
+}
+
+  .c_fg\.informative {
+    color: var(--colors-fg-informative);
+}
+
+  .c_fg\.positive\.contrast {
+    color: var(--colors-fg-positive-contrast);
+}
+
+  .c_fg\.positive {
+    color: var(--colors-fg-positive);
+}
+
+  .c_fg\.warning\.contrast {
+    color: var(--colors-fg-warning-contrast);
+}
+
+  .c_fg\.warning {
+    color: var(--colors-fg-warning);
+}
+
+  .c_fg\.critical\.contrast {
+    color: var(--colors-fg-critical-contrast);
+}
+
+  .c_fg\.critical {
+    color: var(--colors-fg-critical);
+}
+
+  .sr_true {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+}
+
+  .pos_popper {
+    position: popper;
+}
+}