@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: var(--colors-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: '🐼';
}

  body {
    font-family: var(--fonts-body);
}

  *,::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) {
    --aspect-ratios-square: 1 / 1;
    --aspect-ratios-landscape: 4 / 3;
    --aspect-ratios-portrait: 3 / 4;
    --aspect-ratios-wide: 16 / 9;
    --aspect-ratios-ultrawide: 18 / 5;
    --aspect-ratios-golden: 1.618 / 1;
    --animations-spin: spin 1s linear infinite;
    --animations-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
    --animations-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    --animations-bounce: bounce 1s infinite;
    --blurs-none:  ;
    --blurs-sm: 4px;
    --blurs-md: 8px;
    --blurs-lg: 12px;
    --blurs-xl: 16px;
    --blurs-2xl: 24px;
    --blurs-3xl: 40px;
    --blurs-4xl: 64px;
    --borders-xs: 0.5px solid;
    --borders-sm: 1px solid;
    --borders-md: 2px solid;
    --borders-lg: 4px solid;
    --borders-xl: 8px solid;
    --colors-transparent: transparent;
    --colors-current: currentColor;
    --colors-black: #0A0D11;
    --colors-white: #FFFFFF;
    --colors-accent: #A4EB71;
    --colors-pro: #5848E5;
    --colors-black-alpha: rgba(19, 23, 28, 0.80);
    --colors-neutral-alpha: rgba(113, 117, 122, 0.64);
    --colors-clara-blue-50: #EEF4FF;
    --colors-clara-blue-100: #DBE9FE;
    --colors-clara-blue-200: #BCD6FE;
    --colors-clara-blue-300: #8DB9FC;
    --colors-clara-blue-400: #5C98F4;
    --colors-clara-blue-500: #0853B6;
    --colors-clara-blue-600: #00449D;
    --colors-clara-blue-700: #003580;
    --colors-clara-blue-800: #002761;
    --colors-clara-blue-900: #011A44;
    --colors-clara-blue-950: #000D24;
    --colors-deep-green-50: #ECF6F5;
    --colors-deep-green-100: #D7EDEB;
    --colors-deep-green-200: #B8DDD9;
    --colors-deep-green-300: #8FC3BE;
    --colors-deep-green-400: #63A7A0;
    --colors-deep-green-500: #076862;
    --colors-deep-green-600: #065651;
    --colors-deep-green-700: #014440;
    --colors-deep-green-800: #003330;
    --colors-deep-green-900: #002320;
    --colors-deep-green-950: #001513;
    --colors-navy-50: #E8EBF0;
    --colors-navy-100: #C4CAD6;
    --colors-navy-200: #9BA5B7;
    --colors-navy-300: #6A7A91;
    --colors-navy-400: #3D4F65;
    --colors-navy-500: #2A3D56;
    --colors-navy-600: #1E3048;
    --colors-navy-700: #152438;
    --colors-navy-800: #0C1825;
    --colors-navy-900: #060E16;
    --colors-navy-950: #020509;
    --colors-cyan-50: #E4F4FF;
    --colors-cyan-100: #CAEAFF;
    --colors-cyan-200: #BBDDF6;
    --colors-cyan-300: #A5CAE5;
    --colors-cyan-400: #86B1D0;
    --colors-cyan-500: #5689AC;
    --colors-cyan-600: #39749B;
    --colors-cyan-700: #004F77;
    --colors-cyan-800: #003E5F;
    --colors-cyan-900: #052E46;
    --colors-cyan-950: #021C2B;
    --colors-green-50: #E7F9E7;
    --colors-green-100: #CFF1CF;
    --colors-green-200: #BEE6BD;
    --colors-green-300: #A5D4A3;
    --colors-green-400: #7EBA7A;
    --colors-green-500: #2D831A;
    --colors-green-600: #22710F;
    --colors-green-700: #125800;
    --colors-green-800: #0B4500;
    --colors-green-900: #043400;
    --colors-green-950: #021E00;
    --colors-amber-50: #FFFCE8;
    --colors-amber-100: #FFF5D0;
    --colors-amber-200: #F6E8BA;
    --colors-amber-300: #E9D298;
    --colors-amber-400: #D6AE5E;
    --colors-amber-500: #BE8213;
    --colors-amber-600: #996000;
    --colors-amber-700: #6B3B00;
    --colors-amber-800: #562B00;
    --colors-amber-900: #3C1900;
    --colors-amber-950: #1E0C00;
    --colors-red-50: #FFF0F0;
    --colors-red-100: #FFDBDB;
    --colors-red-200: #FCCACA;
    --colors-red-300: #F5B0AF;
    --colors-red-400: #E88383;
    --colors-red-500: #C40326;
    --colors-red-600: #AC0521;
    --colors-red-700: #890619;
    --colors-red-800: #6D0613;
    --colors-red-900: #51050C;
    --colors-red-950: #2D0005;
    --colors-purple-50: #F5F0FF;
    --colors-purple-100: #EBE0FF;
    --colors-purple-200: #DBD3F9;
    --colors-purple-300: #C8BEEB;
    --colors-purple-400: #AEA1DA;
    --colors-purple-500: #8B78C0;
    --colors-purple-600: #7159AC;
    --colors-purple-700: #4E2F89;
    --colors-purple-800: #3D246D;
    --colors-purple-900: #2C1A4F;
    --colors-purple-950: #180B2E;
    --colors-neutral-50: #F9FAFC;
    --colors-neutral-100: #F3F5F8;
    --colors-neutral-200: #EDF0F5;
    --colors-neutral-300: #E6EAF0;
    --colors-neutral-400: #DDE0E4;
    --colors-neutral-500: #B9BCC1;
    --colors-neutral-600: #95989D;
    --colors-neutral-700: #71757A;
    --colors-neutral-800: #3E4349;
    --colors-neutral-900: #1E2329;
    --colors-neutral-950: #13171C;
    --durations-fastest: 50ms;
    --durations-faster: 100ms;
    --durations-fast: 150ms;
    --durations-moderate: 200ms;
    --durations-slow: 300ms;
    --durations-slower: 400ms;
    --durations-slowest: 500ms;
    --easings-ease-in: cubic-bezier(0.42, 0, 1, 1);
    --easings-ease-out: cubic-bezier(0, 0, 0.58, 1);
    --easings-ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
    --easings-ease-in-smooth: cubic-bezier(0.32, 0.72, 0, 1);
    --fonts-heading: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --fonts-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --fonts-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --font-sizes-2xs: 0.625rem;
    --font-sizes-xs: 0.75rem;
    --font-sizes-sm: 0.875rem;
    --font-sizes-md: 1rem;
    --font-sizes-lg: 1.125rem;
    --font-sizes-xl: 1.25rem;
    --font-sizes-2xl: 1.5rem;
    --font-sizes-3xl: 1.875rem;
    --font-sizes-4xl: 2.25rem;
    --font-sizes-5xl: 3rem;
    --font-sizes-6xl: 3.75rem;
    --font-sizes-7xl: 4.5rem;
    --font-sizes-8xl: 6rem;
    --font-sizes-9xl: 8rem;
    --font-weights-normal: 400;
    --font-weights-medium: 500;
    --font-weights-semibold: 600;
    --font-weights-bold: 700;
    --letter-spacings-tighter: -0.05em;
    --letter-spacings-tight: -0.025em;
    --letter-spacings-wide: 0.025em;
    --letter-spacings-wider: 0.05em;
    --letter-spacings-widest: 0.1em;
    --line-heights-shorter: 1.25;
    --line-heights-short: 1.375;
    --line-heights-moderate: 1.5;
    --line-heights-tall: 1.625;
    --line-heights-taller: 2;
    --radii-none: 0rem;
    --radii-sm: 0.25rem;
    --radii-md: 0.5rem;
    --radii-lg: 0.75rem;
    --radii-xl: 1rem;
    --radii-2xl: 1.5rem;
    --radii-full: 9999px;
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-7: 1.75rem;
    --spacing-8: 2rem;
    --spacing-9: 2.25rem;
    --spacing-10: 2.5rem;
    --spacing-11: 2.75rem;
    --spacing-12: 3rem;
    --spacing-14: 3.5rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    --spacing-24: 6rem;
    --spacing-28: 7rem;
    --spacing-32: 8rem;
    --spacing-36: 9rem;
    --spacing-40: 10rem;
    --spacing-44: 11rem;
    --spacing-48: 12rem;
    --spacing-52: 13rem;
    --spacing-56: 14rem;
    --spacing-60: 15rem;
    --spacing-64: 16rem;
    --spacing-72: 18rem;
    --spacing-80: 20rem;
    --spacing-96: 24rem;
    --spacing-0\.5: 0.125rem;
    --spacing-1\.5: 0.375rem;
    --spacing-2\.5: 0.625rem;
    --spacing-3\.5: 0.875rem;
    --spacing-4\.5: 1.125rem;
    --sizes-1: 0.25rem;
    --sizes-2: 0.5rem;
    --sizes-3: 0.75rem;
    --sizes-4: 1rem;
    --sizes-5: 1.25rem;
    --sizes-6: 1.5rem;
    --sizes-7: 1.75rem;
    --sizes-8: 2rem;
    --sizes-9: 2.25rem;
    --sizes-10: 2.5rem;
    --sizes-11: 2.75rem;
    --sizes-12: 3rem;
    --sizes-14: 3.5rem;
    --sizes-16: 4rem;
    --sizes-20: 5rem;
    --sizes-24: 6rem;
    --sizes-28: 7rem;
    --sizes-32: 8rem;
    --sizes-36: 9rem;
    --sizes-40: 10rem;
    --sizes-44: 11rem;
    --sizes-48: 12rem;
    --sizes-52: 13rem;
    --sizes-56: 14rem;
    --sizes-60: 15rem;
    --sizes-64: 16rem;
    --sizes-72: 18rem;
    --sizes-80: 20rem;
    --sizes-96: 24rem;
    --sizes-3xs: 14rem;
    --sizes-2xs: 16rem;
    --sizes-xs: 20rem;
    --sizes-sm: 24rem;
    --sizes-md: 28rem;
    --sizes-lg: 32rem;
    --sizes-xl: 36rem;
    --sizes-2xl: 42rem;
    --sizes-3xl: 48rem;
    --sizes-4xl: 56rem;
    --sizes-5xl: 64rem;
    --sizes-6xl: 72rem;
    --sizes-7xl: 80rem;
    --sizes-8xl: 90rem;
    --sizes-0\.5: 0.125rem;
    --sizes-1\.5: 0.375rem;
    --sizes-2\.5: 0.625rem;
    --sizes-3\.5: 0.875rem;
    --sizes-4\.5: 1.125rem;
    --sizes-1\/2: 50%;
    --sizes-1\/3: 33.333333%;
    --sizes-2\/3: 66.666667%;
    --sizes-1\/4: 25%;
    --sizes-3\/4: 75%;
    --sizes-1\/5: 20%;
    --sizes-2\/5: 40%;
    --sizes-3\/5: 60%;
    --sizes-4\/5: 80%;
    --sizes-1\/6: 16.666667%;
    --sizes-2\/6: 33.333333%;
    --sizes-3\/6: 50%;
    --sizes-4\/6: 66.666667%;
    --sizes-5\/6: 83.333333%;
    --sizes-1\/12: 8.333333%;
    --sizes-2\/12: 16.666667%;
    --sizes-3\/12: 25%;
    --sizes-4\/12: 33.333333%;
    --sizes-5\/12: 41.666667%;
    --sizes-6\/12: 50%;
    --sizes-7\/12: 58.333333%;
    --sizes-8\/12: 66.666667%;
    --sizes-9\/12: 75%;
    --sizes-10\/12: 83.333333%;
    --sizes-11\/12: 91.666667%;
    --sizes-max: max-content;
    --sizes-min: min-content;
    --sizes-fit: fit-content;
    --sizes-prose: 60ch;
    --sizes-full: 100%;
    --sizes-dvh: 100dvh;
    --sizes-svh: 100svh;
    --sizes-lvh: 100lvh;
    --sizes-dvw: 100dvw;
    --sizes-svw: 100svw;
    --sizes-lvw: 100lvw;
    --sizes-vw: 100vw;
    --sizes-vh: 100vh;
    --sizes-breakpoint-sm: 480px;
    --sizes-breakpoint-md: 768px;
    --sizes-breakpoint-lg: 1024px;
    --sizes-breakpoint-xl: 1280px;
    --sizes-breakpoint-2xl: 1536px;
    --z-index-hide: -1;
    --z-index-base: 0;
    --z-index-docked: 10;
    --z-index-dropdown: 1000;
    --z-index-sticky: 1100;
    --z-index-banner: 1200;
    --z-index-overlay: 1300;
    --z-index-modal: 1400;
    --z-index-popover: 1500;
    --z-index-skip-nav: 1600;
    --z-index-toast: 1700;
    --z-index-tooltip: 1800;
    --z-index-max: 2147483647;
    --cursor-button: pointer;
    --cursor-checkbox: default;
    --cursor-disabled: not-allowed;
    --cursor-menuitem: default;
    --cursor-option: default;
    --cursor-radio: default;
    --cursor-slider: default;
    --cursor-swittch: pointer;
    --opacity-0: 0;
    --opacity-4: 0.04;
    --opacity-8: 0.08;
    --opacity-16: 0.16;
    --opacity-24: 0.24;
    --opacity-40: 0.4;
    --opacity-64: 0.64;
    --opacity-80: 0.8;
    --opacity-100: 1;
    --breakpoints-sm: 480px;
    --breakpoints-md: 768px;
    --breakpoints-lg: 1024px;
    --breakpoints-xl: 1280px;
    --breakpoints-2xl: 1536px;
    --radii-l1: var(--radii-sm);
    --radii-l2: var(--radii-md);
    --radii-l3: var(--radii-xl);
    --shadows-sm: 0 4px 8px 0 color-mix(in srgb, var(--colors-neutral-900) 8%, transparent);
    --shadows-md: 0 8px 16px 0 color-mix(in srgb, var(--colors-neutral-900) 12%, transparent);
    --shadows-left: -8px 0 16px 0 color-mix(in srgb, var(--colors-neutral-900) 12%, transparent);
}

  :where(:root, .light) {
    --colors-bg-base: var(--colors-neutral-50);
    --colors-bg-surface: var(--colors-white);
    --colors-bg-highlight: var(--colors-neutral-100);
    --colors-bg-hover: var(--colors-neutral-200);
    --colors-bg-selected: var(--colors-clara-blue-50);
    --colors-bg-active: var(--colors-neutral-300);
    --colors-bg-disabled: var(--colors-neutral-100);
    --colors-bg-info: var(--colors-cyan-100);
    --colors-bg-info-hover: var(--colors-cyan-200);
    --colors-bg-success: var(--colors-green-100);
    --colors-bg-success-hover: var(--colors-green-200);
    --colors-bg-warning: var(--colors-amber-100);
    --colors-bg-warning-hover: var(--colors-amber-200);
    --colors-bg-critical: var(--colors-red-100);
    --colors-bg-critical-hover: var(--colors-red-200);
    --colors-bg-advice: var(--colors-purple-100);
    --colors-bg-advice-hover: var(--colors-purple-200);
    --colors-bg-pro: var(--colors-pro);
    --colors-bg-accent: var(--colors-accent);
    --colors-fg-high-emphasis: var(--colors-neutral-950);
    --colors-fg-medium-emphasis: var(--colors-neutral-800);
    --colors-fg-low-emphasis: var(--colors-neutral-700);
    --colors-fg-disabled: var(--colors-neutral-600);
    --colors-fg-link: var(--colors-clara-blue-500);
    --colors-fg-info: var(--colors-cyan-700);
    --colors-fg-success: var(--colors-green-700);
    --colors-fg-warning: var(--colors-amber-700);
    --colors-fg-critical: var(--colors-red-700);
    --colors-fg-advice: var(--colors-purple-700);
    --colors-fg-pro: var(--colors-white);
    --colors-fg-accent: var(--colors-neutral-950);
    --colors-fg-on-primary: var(--colors-white);
    --colors-fg-on-primary-low: var(--colors-neutral-400);
    --colors-fg-on-info: var(--colors-cyan-700);
    --colors-fg-on-success: var(--colors-green-700);
    --colors-fg-on-warning: var(--colors-amber-700);
    --colors-fg-on-critical: var(--colors-red-700);
    --colors-fg-on-advice: var(--colors-purple-700);
    --colors-border-base: var(--colors-neutral-400);
    --colors-border-control: var(--colors-neutral-500);
    --colors-border-interactive: var(--colors-neutral-500);
    --colors-border-hover: var(--colors-neutral-700);
    --colors-border-disabled: var(--colors-neutral-300);
    --colors-border-focus: var(--colors-clara-blue-600);
    --colors-border-info: var(--colors-cyan-500);
    --colors-border-critical: var(--colors-red-500);
    --colors-border-success: var(--colors-green-500);
    --colors-border-warning: var(--colors-amber-500);
    --colors-border-advice: var(--colors-purple-500);
    --colors-primary-base: var(--colors-clara-blue-500);
    --colors-primary-hover: var(--colors-clara-blue-600);
    --colors-primary-active: var(--colors-clara-blue-700);
    --colors-primary-disabled: var(--colors-neutral-300);
    --colors-primary-outline: var(--colors-clara-blue-300);
    --colors-nav-bg: var(--colors-navy-600);
    --colors-nav-fg: var(--colors-white);
    --colors-nav-fg-low: var(--colors-navy-200);
    --colors-nav-border: var(--colors-navy-500);
    --colors-nav-item-hover: var(--colors-navy-500);
    --colors-nav-item-active: var(--colors-navy-400);
    --colors-nav-item-active-accent: var(--colors-accent);
    --colors-secondary: var(--colors-deep-green-500);
    --colors-skeleton: var(--colors-neutral-200);
    --colors-overlay: var(--colors-neutral-alpha)
}

  .dark {
    --colors-bg-base: var(--colors-deep-green-950);
    --colors-bg-surface: var(--colors-neutral-900);
    --colors-bg-highlight: var(--colors-neutral-800);
    --colors-bg-hover: var(--colors-neutral-800);
    --colors-bg-selected: var(--colors-clara-blue-950);
    --colors-bg-active: var(--colors-neutral-800);
    --colors-bg-disabled: var(--colors-neutral-900);
    --colors-bg-info: var(--colors-cyan-400);
    --colors-bg-info-hover: var(--colors-cyan-300);
    --colors-bg-success: var(--colors-green-400);
    --colors-bg-success-hover: var(--colors-green-300);
    --colors-bg-warning: var(--colors-amber-400);
    --colors-bg-warning-hover: var(--colors-amber-300);
    --colors-bg-critical: var(--colors-red-400);
    --colors-bg-critical-hover: var(--colors-red-300);
    --colors-bg-advice: var(--colors-purple-400);
    --colors-bg-advice-hover: var(--colors-purple-300);
    --colors-bg-pro: var(--colors-pro);
    --colors-bg-accent: var(--colors-accent);
    --colors-fg-high-emphasis: var(--colors-white);
    --colors-fg-medium-emphasis: var(--colors-neutral-500);
    --colors-fg-low-emphasis: var(--colors-neutral-600);
    --colors-fg-disabled: var(--colors-neutral-700);
    --colors-fg-link: var(--colors-clara-blue-300);
    --colors-fg-info: var(--colors-cyan-400);
    --colors-fg-success: var(--colors-green-400);
    --colors-fg-warning: var(--colors-amber-400);
    --colors-fg-critical: var(--colors-red-400);
    --colors-fg-advice: var(--colors-purple-400);
    --colors-fg-pro: var(--colors-white);
    --colors-fg-accent: var(--colors-neutral-950);
    --colors-fg-on-primary: var(--colors-neutral-950);
    --colors-fg-on-primary-low: var(--colors-neutral-800);
    --colors-fg-on-info: var(--colors-cyan-950);
    --colors-fg-on-success: var(--colors-green-950);
    --colors-fg-on-warning: var(--colors-amber-950);
    --colors-fg-on-critical: var(--colors-red-950);
    --colors-fg-on-advice: var(--colors-purple-950);
    --colors-border-base: var(--colors-neutral-800);
    --colors-border-control: var(--colors-neutral-700);
    --colors-border-interactive: var(--colors-neutral-700);
    --colors-border-hover: var(--colors-neutral-500);
    --colors-border-disabled: var(--colors-neutral-800);
    --colors-border-focus: var(--colors-clara-blue-400);
    --colors-border-info: var(--colors-cyan-400);
    --colors-border-critical: var(--colors-red-400);
    --colors-border-success: var(--colors-green-400);
    --colors-border-warning: var(--colors-amber-400);
    --colors-border-advice: var(--colors-purple-400);
    --colors-primary-base: var(--colors-clara-blue-400);
    --colors-primary-hover: var(--colors-clara-blue-300);
    --colors-primary-active: var(--colors-clara-blue-200);
    --colors-primary-disabled: var(--colors-neutral-800);
    --colors-primary-outline: var(--colors-clara-blue-600);
    --colors-nav-bg: var(--colors-navy-800);
    --colors-nav-fg: var(--colors-white);
    --colors-nav-fg-low: var(--colors-navy-200);
    --colors-nav-border: var(--colors-navy-700);
    --colors-nav-item-hover: var(--colors-navy-700);
    --colors-nav-item-active: var(--colors-navy-600);
    --colors-nav-item-active-accent: var(--colors-accent);
    --colors-secondary: var(--colors-deep-green-400);
    --colors-skeleton: var(--colors-neutral-700);
    --colors-overlay: var(--colors-black-alpha)
}

  @keyframes spin {
    0% {
      transform: rotate(0deg);
}

    100% {
      transform: rotate(360deg);
}
}

  @keyframes pulse {
    50% {
      opacity: 0.5;
}
}

  @keyframes ping {
    75%,100% {
      transform: scale(2);
      opacity: var(--opacity-0);
}
}

  @keyframes bounce {
    0%,100% {
      transform: translateY(-25%);
      animation-timing-function: cubic-bezier(0.8,0,1,1);
}

    50% {
      transform: none;
      animation-timing-function: cubic-bezier(0,0,0.2,1);
}
}

  @keyframes bg-position {
    from {
      background-position: var(--animate-from, 1rem) 0;
}

    to {
      background-position: var(--animate-to, 0) 0;
}
}

  @keyframes position {
    from {
      inset-inline-start: var(--animate-from-x);
      inset-block-start: var(--animate-from-y);
}

    to {
      inset-inline-start: var(--animate-to-x);
      inset-block-start: var(--animate-to-y);
}
}

  @keyframes circular-progress {
    0% {
      stroke-dasharray: 1, 400;
      stroke-dashoffset: 0;
}

    50% {
      stroke-dasharray: 400, 400;
      stroke-dashoffset: -100%;
}

    100% {
      stroke-dasharray: 400, 400;
      stroke-dashoffset: -260%;
}
}

  @keyframes expand-height {
    from {
      height: var(--collapsed-height, 0);
}

    to {
      height: var(--height);
}
}

  @keyframes collapse-height {
    from {
      height: var(--height);
}

    to {
      height: var(--collapsed-height, 0);
}
}

  @keyframes expand-width {
    from {
      width: var(--collapsed-width, 0);
}

    to {
      width: var(--width);
}
}

  @keyframes collapse-width {
    from {
      height: var(--width);
}

    to {
      height: var(--collapsed-width, 0);
}
}

  @keyframes fade-in {
    from {
      opacity: var(--opacity-0);
}

    to {
      opacity: 1;
}
}

  @keyframes fade-out {
    from {
      opacity: 1;
}

    to {
      opacity: var(--opacity-0);
}
}

  @keyframes slide-from-left-full {
    from {
      translate: -100% 0;
}

    to {
      translate: 0 0;
}
}

  @keyframes slide-from-right-full {
    from {
      translate: 100% 0;
}

    to {
      translate: 0 0;
}
}

  @keyframes slide-from-top-full {
    from {
      translate: 0 -100%;
}

    to {
      translate: 0 0;
}
}

  @keyframes slide-from-bottom-full {
    from {
      translate: 0 100%;
}

    to {
      translate: 0 0;
}
}

  @keyframes slide-to-left-full {
    from {
      translate: 0 0;
}

    to {
      translate: -100% 0;
}
}

  @keyframes slide-to-right-full {
    from {
      translate: 0 0;
}

    to {
      translate: 100% 0;
}
}

  @keyframes slide-to-top-full {
    from {
      translate: 0 0;
}

    to {
      translate: 0 -100%;
}
}

  @keyframes slide-to-bottom-full {
    from {
      translate: 0 0;
}

    to {
      translate: 0 100%;
}
}

  @keyframes slide-from-top {
    0% {
      translate: 0 -0.5rem;
}

    to {
      translate: 0;
}
}

  @keyframes slide-from-bottom {
    0% {
      translate: 0 0.5rem;
}

    to {
      translate: 0;
}
}

  @keyframes slide-from-left {
    0% {
      translate: -0.5rem 0;
}

    to {
      translate: 0;
}
}

  @keyframes slide-from-right {
    0% {
      translate: 0.5rem 0;
}

    to {
      translate: 0;
}
}

  @keyframes slide-to-top {
    0% {
      translate: 0;
}

    to {
      translate: 0 -0.5rem;
}
}

  @keyframes slide-to-bottom {
    0% {
      translate: 0;
}

    to {
      translate: 0 0.5rem;
}
}

  @keyframes slide-to-left {
    0% {
      translate: 0;
}

    to {
      translate: -0.5rem 0;
}
}

  @keyframes slide-to-right {
    0% {
      translate: 0;
}

    to {
      translate: 0.5rem 0;
}
}

  @keyframes scale-in {
    from {
      scale: 0.95;
}

    to {
      scale: 1;
}
}

  @keyframes scale-out {
    from {
      scale: 1;
}

    to {
      scale: 0.95;
}
}
}

@layer recipes{
  @layer _base{

    .icon {
      color: currentcolor;
      display: inline-block;
      flex-shrink: 0;
      vertical-align: middle;
      line-height: 1em;
      width: 1em;
      height: 1em;
}

    .closeButton {
      --cb-color: var(--colors-fg-medium-emphasis);
      --cb-bg: transparent;
      --cb-bg-hover: var(--colors-bg-hover);
      --cb-bg-active: var(--colors-bg-active);
      border: none;
      background: var(--cb-bg);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      --transition-prop: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
      --transition-duration: var(--durations-moderate);
      transition-duration: var(--durations-moderate);
      --focus-ring-color: var(--colors-border-focus);
}

    .closeButton:is(:focus-visible, [data-focus-visible]) {
      outline-width: var(--focus-ring-width, 2px);
      outline-offset: var(--focus-ring-offset, 2px);
      outline-style: var(--focus-ring-style, solid);
      outline-color: var(--focus-ring-color);
}

    .closeButton {
      color: var(--cb-color);
}

    .closeButton:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
      cursor: not-allowed;
      color: var(--colors-fg-disabled);
}

    .closeButton:not(:disabled):not(:focus-visible):hover {
      background: var(--cb-bg-hover);
}

    .closeButton:not(:disabled):active {
      background: var(--cb-bg-active);
}

    .group {
      gap: var(--spacing-2);
      display: inline-flex;
      position: relative;
}

    .group > *:is(:focus-visible, [data-focus-visible]) {
      z-index: 1;
}

    .checkmark {
      border-width: 2px;
      border-color: var(--colors-fg-low-emphasis);
      border-radius: var(--radii-l1);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      cursor: pointer;
      color: var(--colors-white);
      --focus-ring-color: var(--colors-border-focus);
}

    .checkmark:is(:focus-visible, [data-focus-visible]) {
      outline-width: var(--focus-ring-width, 2px);
      outline-offset: var(--focus-ring-offset, 2px);
      outline-style: var(--focus-ring-style, solid);
      outline-color: var(--focus-ring-color);
}

    .checkmark:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]),.checkmark:is(:indeterminate, [data-indeterminate], [aria-checked=mixed], [data-state="indeterminate"]) {
      background: var(--colors-primary-base);
      border-color: var(--colors-primary-base);
      color: var(--colors-fg-on-primary);
}

    .checkmark[data-invalid]:is([data-state=checked], [data-state=indeterminate]) {
      background: var(--colors-fg-critical);
      border-color: var(--colors-fg-critical);
      color: var(--colors-white);
}

    .checkmark:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
      background: var(--colors-bg-disabled);
      border-color: var(--colors-border-interactive);
      cursor: not-allowed;
}

    .checkmark[data-disabled]:is([data-state=checked], [data-state=indeterminate]) {
      background: var(--colors-fg-disabled);
      border-color: var(--colors-fg-disabled);
      color: var(--colors-white);
}

    .checkmark:is(:invalid, [data-invalid], [aria-invalid=true]) {
      border-color: var(--colors-border-critical);
}

    .checkmark :where(svg) {
      width: var(--sizes-full);
      height: var(--sizes-full);
}

    .icon-button {
      --btn-color: inherit;
      --btn-bg: transparent;
      --btn-border: transparent;
      background: var(--btn-bg);
      outline: 0;
      border-radius: var(--radii-l2);
      border-width: var(--btn-border-width, 0px);
      border-color: var(--btn-border);
      display: inline-flex;
      position: relative;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      vertical-align: middle;
      appearance: none;
      -webkit-appearance: none;
      -webkit-user-select: none;
      user-select: none;
      cursor: var(--cursor-button);
      --focus-ring-color: var(--colors-border-focus);
}

    .icon-button:is(:focus-visible, [data-focus-visible]) {
      outline-width: var(--focus-ring-width, 2px);
      outline-offset: var(--focus-ring-offset, 2px);
      outline-style: var(--focus-ring-style, solid);
      outline-color: var(--focus-ring-color);
      background: var(--btn-bg-focus, var(--btn-bg));
      border-color: var(--btn-border-focus, var(--btn-border));
      color: var(--btn-color-focus, var(--btn-color));
}

    .icon-button {
      --transition-prop: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
      --transition-duration: var(--durations-moderate);
      transition-duration: var(--durations-moderate);
      color: var(--btn-color);
}

    .icon-button:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
      background: var(--btn-bg-disabled, var(--btn-bg));
      border-color: var(--btn-border-disabled, var(--btn-border));
      cursor: not-allowed;
      color: var(--btn-color-disabled, var(--btn-color));
}

    .icon-button :where(svg) {
      flex-shrink: 0;
}

    .icon-button:not(:disabled):not(:focus-visible):hover {
      background: var(--btn-bg-hover, var(--btn-bg));
      border-color: var(--btn-border-hover, var(--btn-border));
      color: var(--btn-color-hover, var(--btn-color));
}

    .icon-button:not(:disabled):active {
      background: var(--btn-bg-active, var(--btn-bg));
      border-color: var(--btn-border-active, var(--btn-border));
      color: var(--btn-color-active, var(--btn-color));
}

    .spinner {
      --spinner-track-color: transparent;
      animation: var(--animations-spin);
      border-color: currentColor;
      border-style: solid;
      border-width: 2px;
      border-radius: var(--radii-full);
      display: inline-block;
      animation-duration: var(--durations-slowest);
      border-inline-start-color: var(--spinner-track-color);
      width: var(--spinner-size);
      height: var(--spinner-size);
      border-bottom-color: var(--spinner-track-color);
}

    .absolute-center {
      position: absolute;
      justify-content: center;
}

    .absolute-center,.selectable {
      display: flex;
      align-items: center;
}

    .selectable {
      gap: var(--spacing-2);
      border-radius: var(--radii-l1);
      cursor: default;
      -webkit-user-select: none;
      user-select: none;
      color: var(--colors-fg-medium-emphasis);
      font-size: 0.875rem;
      line-height: 1.375rem;
      font-weight: var(--font-weights-normal);
      letter-spacing: -0.006em;
}

    .selectable[data-highlighted] {
      background: var(--colors-bg-hover);
      color: var(--colors-fg-high-emphasis);
}

    .selectable:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
      color: var(--colors-fg-disabled);
      pointer-events: none;
      cursor: not-allowed;
}

    .selectable[data-variant=destructive] {
      color: var(--colors-fg-critical);
}

    .selectable[data-variant=destructive][data-highlighted] {
      background: var(--colors-bg-critical);
      color: var(--colors-fg-on-critical);
}

    .selectable[data-variant=destructive]:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
      background: unset;
      color: var(--colors-fg-disabled);
}

    .selectable[data-variant=destructive]:is(:focus-visible, [data-focus-visible]) {
      color: var(--colors-fg-critical);
      outline-color: var(--colors-border-critical);
}

    .selectable:is(:focus-visible, [data-focus-visible]) {
      color: var(--colors-fg-medium-emphasis);
      outline-width: 2px;
      outline-style: solid;
      outline-color: var(--colors-border-focus);
      outline-offset: 0px;
}

    .button {
      --btn-color: inherit;
      --btn-bg: transparent;
      --btn-border: transparent;
      background: var(--btn-bg);
      outline: 0;
      border-radius: var(--radii-l2);
      border-width: var(--btn-border-width, 1px);
      border-color: var(--btn-border);
      display: inline-flex;
      position: relative;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      vertical-align: middle;
      appearance: none;
      -webkit-appearance: none;
      white-space: nowrap;
      line-height: 1.2;
      font-weight: var(--font-weights-medium);
      -webkit-user-select: none;
      user-select: none;
      cursor: pointer;
      --focus-ring-color: var(--colors-border-focus);
}

    .button:is(:focus-visible, [data-focus-visible]) {
      outline-width: var(--focus-ring-width, 2px);
      outline-offset: var(--focus-ring-offset, 2px);
      outline-style: var(--focus-ring-style, solid);
      outline-color: var(--focus-ring-color);
}

    .button {
      --transition-prop: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
      --transition-duration: var(--durations-moderate);
      transition-duration: var(--durations-moderate);
      color: var(--btn-color);
}

    .button:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
      background: var(--btn-bg-disabled, var(--btn-bg));
      border-color: var(--btn-border-disabled, var(--btn-border));
      cursor: not-allowed;
      color: var(--btn-color-disabled, var(--btn-color));
}

    .button :where(svg) {
      flex-shrink: 0;
}

    .button:not(:disabled):not(:focus-visible):hover {
      background: var(--btn-bg-hover, var(--btn-bg));
      border-color: var(--btn-border-hover, var(--btn-border));
      color: var(--btn-color-hover, var(--btn-color));
}

    .button:not(:disabled):active {
      background: var(--btn-bg-active, var(--btn-bg));
      border-color: var(--btn-border-active, var(--btn-border));
      color: var(--btn-color-active, var(--btn-color));
}

    .badge {
      --badge-bg: var(--colors-bg-highlight);
      --badge-color: var(--colors-fg-medium-emphasis);
      background: var(--badge-bg);
      border-radius: var(--radii-l3);
      padding-inline: var(--spacing-1);
      padding-block: 1.25px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 0.75rem;
      line-height: 1rem;
      font-weight: var(--font-weights-normal);
      letter-spacing: 0em;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      -webkit-user-select: none;
      user-select: none;
      color: var(--badge-color);
}

    .heading {
      color: var(--colors-fg-high-emphasis);
}

    .link {
      outline: 2px solid transparent;
      outline-offset: 2px;
      gap: var(--spacing-1\.5);
      border-radius: var(--radii-l1);
      display: inline-flex;
      align-items: center;
      cursor: pointer;
      --focus-ring-color: ;
}

    .link:is(:focus-visible, [data-focus-visible]) {
      outline-width: var(--focus-ring-width, 2px);
      outline-offset: var(--focus-ring-offset, 2px);
      outline-style: var(--focus-ring-style, solid);
      outline-color: var(--focus-ring-color);
}

    .text {
      color: var(--colors-fg-medium-emphasis);
}
}

  .icon--size_2xs {
    width: var(--sizes-3);
    height: var(--sizes-3);
}

  .icon--size_lg {
    width: var(--sizes-6);
    height: var(--sizes-6);
}

  .icon--size_xs {
    width: var(--sizes-3\.5);
    height: var(--sizes-3\.5);
}

  .icon--size_sm {
    width: var(--sizes-4);
    height: var(--sizes-4);
}

  .icon--size_md {
    width: var(--sizes-5);
    height: var(--sizes-5);
}

  .closeButton--size_xs {
    padding: var(--spacing-1);
    border-radius: var(--radii-l1);
    width: var(--sizes-6);
    height: var(--sizes-6);
}

  .closeButton--size_xs :where(svg) {
    width: var(--sizes-4);
    height: var(--sizes-4);
}

  .closeButton--variant_inverseGhost {
    --cb-color: var(--colors-nav-fg-low);
    --cb-bg-hover: var(--colors-nav-item-hover);
    --cb-bg-active: var(--colors-nav-item-active);
    --focus-ring-color: var(--colors-nav-fg);
}

  .closeButton--size_md {
    padding: var(--spacing-2);
    border-radius: var(--radii-l2);
    width: var(--sizes-10);
    height: var(--sizes-10);
}

  .closeButton--size_md :where(svg) {
    width: var(--sizes-6);
    height: var(--sizes-6);
}

  .closeButton--colorPalette_info {
    --cb-color: var(--colors-fg-on-info);
    --cb-bg-hover: var(--colors-bg-info-hover);
    --cb-bg-active: var(--colors-bg-info-hover);
    --focus-ring-color: var(--colors-fg-on-info);
}

  .closeButton--colorPalette_success {
    --cb-color: var(--colors-fg-on-success);
    --cb-bg-hover: var(--colors-bg-success-hover);
    --cb-bg-active: var(--colors-bg-success-hover);
    --focus-ring-color: var(--colors-fg-on-success);
}

  .closeButton--colorPalette_warning {
    --cb-color: var(--colors-fg-on-warning);
    --cb-bg-hover: var(--colors-bg-warning-hover);
    --cb-bg-active: var(--colors-bg-warning-hover);
    --focus-ring-color: var(--colors-fg-on-warning);
}

  .closeButton--colorPalette_critical {
    --cb-color: var(--colors-fg-on-critical);
    --cb-bg-hover: var(--colors-bg-critical-hover);
    --cb-bg-active: var(--colors-bg-critical-hover);
    --focus-ring-color: var(--colors-fg-on-critical);
}

  .closeButton--colorPalette_advice {
    --cb-color: var(--colors-fg-on-advice);
    --cb-bg-hover: var(--colors-bg-advice-hover);
    --cb-bg-active: var(--colors-bg-advice-hover);
    --focus-ring-color: var(--colors-fg-on-advice);
}

  .closeButton--size_sm {
    padding: var(--spacing-1\.5);
    border-radius: var(--radii-l1);
    width: var(--sizes-8);
    height: var(--sizes-8);
}

  .closeButton--size_sm :where(svg) {
    width: var(--sizes-4);
    height: var(--sizes-4);
}

  .closeButton--size_lg {
    padding: var(--spacing-3);
    border-radius: var(--radii-l2);
    width: var(--sizes-12);
    height: var(--sizes-12);
}

  .closeButton--size_lg :where(svg) {
    width: var(--sizes-6);
    height: var(--sizes-6);
}

  .group--orientation_horizontal {
    flex-direction: row;
}

  .group--attached_true {
    gap: 0;
}

  .group--grow_true {
    display: flex;
}

  .group--grow_true > * {
    flex: 1 1 0%;
}

  .group--orientation_vertical {
    flex-direction: column;
}

  .checkmark--size_md {
    width: var(--sizes-5);
    height: var(--sizes-5);
}

  .checkmark--filled_true {
    background: var(--colors-bg-surface);
}

  .checkmark--size_sm {
    width: var(--sizes-4);
    height: var(--sizes-4);
}

  .icon-button--size_sm {
    --btn-border-width: 1px;
    padding: var(--spacing-1\.5);
    border-radius: var(--radii-l1);
    width: var(--sizes-8);
    height: var(--sizes-8);
}

  .icon-button--size_sm :where(svg) {
    width: var(--sizes-4);
    height: var(--sizes-4);
}

  .icon-button--variant_ghost {
    --btn-color: var(--colors-primary-base);
    --btn-color-hover: var(--colors-primary-hover);
    --btn-bg-hover: var(--colors-bg-hover);
    --btn-color-active: var(--colors-primary-active);
    --btn-bg-active: var(--colors-bg-active);
    --btn-color-focus: var(--colors-fg-link);
    --btn-color-disabled: var(--colors-fg-disabled);
}

  .icon-button--variant_inverseGhost {
    --btn-color: var(--colors-nav-fg-low);
    --btn-bg-hover: var(--colors-nav-item-hover);
    --btn-bg-active: var(--colors-nav-item-active);
    --btn-color-disabled: var(--colors-fg-disabled);
    --focus-ring-color: var(--colors-nav-fg);
}

  .icon-button--size_xs {
    --btn-border-width: 1px;
    padding: var(--spacing-1);
    border-radius: var(--radii-l1);
    width: var(--sizes-6);
    height: var(--sizes-6);
}

  .icon-button--size_xs :where(svg) {
    width: var(--sizes-4);
    height: var(--sizes-4);
}

  .icon-button--size_md {
    padding: var(--spacing-2);
    width: var(--sizes-10);
    height: var(--sizes-10);
}

  .icon-button--size_md :where(svg) {
    width: var(--sizes-6);
    height: var(--sizes-6);
}

  .icon-button--variant_default {
    --btn-color: var(--colors-primary-base);
    --btn-border: var(--colors-primary-base);
    --btn-border-width: 1px;
    --btn-color-hover: var(--colors-primary-hover);
    --btn-bg-hover: var(--colors-bg-hover);
    --btn-border-hover: var(--colors-primary-hover);
    --btn-color-active: var(--colors-primary-active);
    --btn-bg-active: var(--colors-bg-active);
    --btn-border-active: var(--colors-primary-active);
    --btn-color-disabled: var(--colors-fg-disabled);
    --btn-bg-disabled: var(--colors-bg-surface);
    --btn-border-disabled: var(--colors-border-disabled);
}

  .icon-button--size_lg {
    padding: var(--spacing-3);
    width: var(--sizes-12);
    height: var(--sizes-12);
}

  .icon-button--size_lg :where(svg) {
    width: var(--sizes-6);
    height: var(--sizes-6);
}

  .icon-button--variant_rounded {
    --btn-color: var(--colors-fg-on-primary);
    --btn-bg: var(--colors-primary-base);
    --btn-bg-hover: var(--colors-primary-hover);
    --btn-bg-active: var(--colors-primary-active);
    --btn-bg-disabled: var(--colors-primary-disabled);
    --btn-color-disabled: var(--colors-fg-disabled);
    border-radius: var(--radii-full);
}

  .spinner--size_inherit {
    --spinner-size: 1em;
}

  .spinner--size_md {
    --spinner-size: var(--sizes-5);
}

  .spinner--size_xs {
    --spinner-size: var(--sizes-3);
}

  .spinner--size_sm {
    --spinner-size: var(--sizes-4);
}

  .spinner--size_lg {
    --spinner-size: var(--sizes-8);
}

  .spinner--size_xl {
    --spinner-size: var(--sizes-10);
}

  .absolute-center--axis_both {
    inset-inline-start: 50%;
    translate: -50% -50%;
    top: 50%;
}

  :where([dir=rtl], :dir(rtl)) .absolute-center--axis_both {
    translate: 50% -50%;
}

  .absolute-center--axis_horizontal {
    inset-inline-start: 50%;
    translate: -50%;
}

  :where([dir=rtl], :dir(rtl)) .absolute-center--axis_horizontal {
    translate: 50%;
}

  .absolute-center--axis_vertical {
    translate: 0 -50%;
    top: 50%;
}

  .selectable--size_md {
    padding-inline: var(--spacing-2);
    font-size: 0.875rem;
    line-height: 1.375rem;
    font-weight: var(--font-weights-normal);
    letter-spacing: -0.006em;
    min-height: var(--sizes-8);
}

  .selectable--variant_inverse {
    color: var(--colors-nav-fg);
}

  .selectable--variant_inverse[data-highlighted] {
    background: var(--colors-nav-item-hover);
    color: var(--colors-nav-fg);
}

  .selectable--variant_inverse:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
    color: var(--colors-fg-disabled);
}

  .selectable--variant_inverse:is(:focus-visible, [data-focus-visible]) {
    color: var(--colors-nav-fg);
    outline-color: var(--colors-nav-fg);
}

  .selectable--size_sm {
    padding-inline: var(--spacing-2);
    min-height: var(--sizes-7);
}

  .selectable--size_lg {
    padding-inline: var(--spacing-3);
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: var(--font-weights-normal);
    letter-spacing: -0.011em;
    min-height: var(--sizes-9);
}

  .skeleton--loading_true {
    background: var(--colors-skeleton);
    animation: var(--animations-pulse);
    animation-duration: var(--duration, 1.2s);
    box-shadow: none;
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
    cursor: default;
    color: var(--colors-transparent);
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    flex-shrink: 0;
}

  .skeleton--loading_true::before,.skeleton--loading_true::after,.skeleton--loading_true * {
    visibility: hidden;
}

  .skeleton--circle_true {
    flex: 0 0 auto;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
}

  .skeleton--loading_false {
    background: unset;
    animation: fade-in var(--fade-duration, 0.1s) ease-out !important;
}

  .button--size_md {
    --btn-border-width: 2px;
    padding-inline: var(--spacing-4);
    padding-block: var(--spacing-2);
    gap: var(--spacing-1);
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: var(--font-weights-medium);
    letter-spacing: -0.005em;
    height: var(--sizes-10);
}

  .button--size_md[data-icon] {
    padding-inline: var(--spacing-3);
}

  .button--size_md :where(svg) {
    width: var(--sizes-5);
    height: var(--sizes-5);
}

  .button--variant_primary {
    --btn-color: var(--colors-fg-on-primary);
    --btn-bg: var(--colors-primary-base);
    --btn-bg-hover: var(--colors-primary-hover);
    --btn-bg-active: var(--colors-primary-active);
    --btn-bg-disabled: var(--colors-primary-disabled);
    --btn-color-disabled: var(--colors-fg-disabled);
}

  .button--variant_inverse {
    --btn-color: var(--colors-nav-fg);
    --btn-border: var(--colors-nav-fg);
    --btn-border-width: 1px;
    --btn-bg-hover: var(--colors-nav-item-hover);
    --btn-bg-active: transparent;
    --btn-color-disabled: var(--colors-fg-disabled);
    --btn-border-disabled: var(--colors-border-disabled);
    --focus-ring-color: var(--colors-nav-fg);
}

  .button--variant_inverseGhost {
    --btn-color: var(--colors-nav-fg);
    --btn-border-width: 1px;
    --btn-bg-hover: var(--colors-nav-item-hover);
    --btn-bg-active: transparent;
    --btn-color-disabled: var(--colors-fg-disabled);
    --focus-ring-color: var(--colors-nav-fg);
}

  .button--size_sm {
    --btn-border-width: 1px;
    padding-inline: var(--spacing-2);
    padding-block: var(--spacing-2);
    gap: var(--spacing-1\.5);
    border-radius: var(--radii-l1);
    font-size: 0.875rem;
    line-height: 1.375rem;
    font-weight: var(--font-weights-medium);
    letter-spacing: 0em;
    height: var(--sizes-8);
}

  .button--size_sm :where(svg) {
    width: var(--sizes-4);
    height: var(--sizes-4);
}

  .button--size_lg {
    --btn-border-width: 2px;
    padding-inline: var(--spacing-4);
    padding-block: var(--spacing-2);
    gap: var(--spacing-1);
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: var(--font-weights-medium);
    letter-spacing: -0.01em;
    height: var(--sizes-12);
}

  .button--size_lg[data-icon] {
    padding-inline: var(--spacing-3);
}

  .button--size_lg :where(svg) {
    width: var(--sizes-6);
    height: var(--sizes-6);
}

  .button--variant_secondary {
    --btn-color: var(--colors-primary-base);
    --btn-border: var(--colors-primary-base);
    --btn-color-hover: var(--colors-primary-hover);
    --btn-bg-hover: var(--colors-bg-hover);
    --btn-border-hover: var(--colors-primary-hover);
    --btn-color-active: var(--colors-primary-active);
    --btn-bg-active: var(--colors-bg-active);
    --btn-border-active: var(--colors-primary-active);
    --btn-border-width: 1px;
    --btn-color-disabled: var(--colors-fg-disabled);
    --btn-bg-disabled: var(--colors-bg-surface);
    --btn-border-disabled: var(--colors-border-disabled);
}

  .button--variant_ghost {
    --btn-color: var(--colors-primary-base);
    --btn-color-hover: var(--colors-primary-hover);
    --btn-bg-hover: var(--colors-bg-hover);
    --btn-color-active: var(--colors-primary-active);
    --btn-bg-active: var(--colors-bg-active);
    --btn-color-focus: var(--colors-fg-link);
    --btn-color-disabled: var(--colors-fg-disabled);
}

  .button--variant_destructive {
    --btn-border-width: 1px;
    --btn-bg: var(--colors-bg-surface);
    --btn-border: var(--colors-border-critical);
    --btn-color: var(--colors-fg-critical);
    --btn-bg-hover: var(--colors-bg-critical);
    --btn-color-hover: var(--colors-fg-on-critical);
    --btn-bg-active: var(--colors-bg-critical);
    --btn-color-active: var(--colors-fg-on-critical);
    --btn-color-disabled: var(--colors-fg-disabled);
    --btn-border-disabled: var(--colors-border-disabled);
    --focus-ring-color: var(--colors-border-critical);
}

  .badge--size_md {
    gap: var(--spacing-1);
    height: var(--sizes-5);
    min-width: var(--sizes-5);
}

  .badge--size_md :where(svg) {
    width: var(--sizes-3);
    height: var(--sizes-3);
}

  .badge--status_info {
    --badge-bg: var(--colors-bg-info);
    --badge-color: var(--colors-fg-on-info);
}

  .badge--status_success {
    --badge-bg: var(--colors-bg-success);
    --badge-color: var(--colors-fg-on-success);
}

  .badge--status_warning {
    --badge-bg: var(--colors-bg-warning);
    --badge-color: var(--colors-fg-on-warning);
}

  .badge--status_critical {
    --badge-bg: var(--colors-bg-critical);
    --badge-color: var(--colors-fg-on-critical);
}

  .badge--status_advice {
    --badge-bg: var(--colors-bg-advice);
    --badge-color: var(--colors-fg-on-advice);
}

  .badge--status_pro {
    --badge-bg: var(--colors-bg-pro);
    --badge-color: var(--colors-fg-pro);
}

  .badge--status_accent {
    --badge-bg: var(--colors-bg-accent);
    --badge-color: var(--colors-fg-accent);
}

  .badge--size_sm {
    gap: var(--spacing-1);
    height: var(--sizes-4);
    min-width: var(--sizes-4);
}

  .badge--size_sm :where(svg) {
    width: var(--sizes-3);
    height: var(--sizes-3);
}

  .link--variant_plain {
    color: var(--colors-color-palette-fg);
}

  .link--variant_plain:not(:disabled):not(:focus-visible):hover,.link--variant_underline {
    text-decoration: underline;
    text-underline-offset: 3px;
    --mix-textDecorationColor: color-mix(in srgb, currentColor 20%, transparent);
    text-decoration-color: var(--mix-textDecorationColor, currentColor);
}

  .link--variant_underline {
    color: var(--colors-color-palette-fg);
}
}

@layer recipes.slots{
  @layer _base{

    .field__root {
      flex-direction: column;
}

    .field__root,.field__errorText {
      gap: var(--spacing-1);
      display: flex;
}

    .field__errorText {
      color: var(--colors-fg-critical);
      align-items: center;
}

    .field__helperText {
      color: var(--colors-fg-low-emphasis);
      font-size: 0.75rem;
      line-height: 1rem;
      font-weight: var(--font-weights-normal);
      letter-spacing: 0em;
}

    .field__helperText:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
      color: var(--colors-fg-disabled);
}

    .field__label {
      gap: var(--spacing-0\.5);
      align-items: center;
      color: var(--colors-fg-medium-emphasis);
      display: flex;
      text-align: start;
      -webkit-user-select: none;
      user-select: none;
}

    .field__label:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
      color: var(--colors-fg-disabled);
}

    .field__label[data-status=error] {
      color: var(--colors-fg-critical);
}

    .field__label[data-status=warning] {
      color: var(--colors-fg-warning);
}

    .field__label[data-status=success] {
      color: var(--colors-fg-success);
}

    .field__requiredIndicator {
      color: var(--colors-fg-critical);
}

    .field__warningText {
      color: var(--colors-fg-warning);
}

    .field__warningText,.field__successText {
      gap: var(--spacing-1);
      display: flex;
      align-items: center;
}

    .field__successText {
      color: var(--colors-fg-success);
}

    .field__errorIcon {
      color: var(--colors-fg-critical);
      flex-shrink: 0;
}

    .field__warningIcon {
      color: var(--colors-fg-warning);
      flex-shrink: 0;
}

    .field__successIcon {
      color: var(--colors-fg-success);
      flex-shrink: 0;
}

    .popover__content {
      --popover-bg: var(--colors-bg-surface);
      --popover-padding: var(--spacing-1);
      background: var(--popover-bg);
      border-radius: var(--radii-md);
      outline: 0;
      box-shadow: var(--shadows-sm);
      display: flex;
      flex-direction: column;
      position: relative;
      transform-origin: var(--transform-origin);
      z-index: calc(var(--z-index-popover) + var(--layer-index, 0));
      max-height: var(--available-height);
      width: var(--sizes-xs);
}

    .popover__content:is([open], [data-open], [data-state="open"], :popover-open) {
      transform-origin: var(--transform-origin);
      animation-name: scale-in, fade-in;
      animation-duration: var(--durations-fast);
}

    .popover__content:is([closed], [data-closed], [data-state="closed"]) {
      transform-origin: var(--transform-origin);
      animation-name: scale-out, fade-out;
      animation-duration: var(--durations-faster);
}

    .popover__title {
      color: fg.default;
      font-weight: var(--font-weights-medium);
}

    .popover__description {
      color: fg.muted;
}

    .popover__closeTrigger {
      position: absolute;
      top: var(--spacing-1);
      right: var(--spacing-1);
}

    .popover__header {
      padding-inline: var(--popover-padding);
      display: flex;
      flex-direction: column;
      padding-top: var(--popover-padding);
}

    .popover__body {
      padding: var(--popover-padding);
      flex: 1 1 0%;
      display: flex;
      flex-direction: column;
}

    .popover__footer {
      gap: var(--spacing-3);
      padding-inline: var(--popover-padding);
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-bottom: var(--popover-padding);
}

    .collapsible__content {
      overflow: hidden;
}

    .collapsible__content:is([open], [data-open], [data-state="open"], :popover-open) {
      animation-name: expand-height, fade-in;
      animation-duration: var(--durations-moderate);
}

    .collapsible__content:is([closed], [data-closed], [data-state="closed"]) {
      animation-name: collapse-height, fade-out;
      animation-duration: var(--durations-moderate);
}

    .checkbox__root {
      gap: var(--spacing-2);
      display: inline-flex;
      align-items: center;
      vertical-align: top;
      position: relative;
      cursor: pointer;
}

    .checkbox__root:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
      cursor: not-allowed;
}

    .checkbox__label {
      font-weight: var(--font-weights-medium);
      -webkit-user-select: none;
      user-select: none;
      color: var(--colors-fg-medium-emphasis);
}

    .checkbox__label:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
      color: var(--colors-fg-disabled);
}

    .checkbox__control {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      color: var(--colors-fg-low-emphasis);
      --transition-prop: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
      --transition-duration: var(--durations-moderate);
      transition-duration: var(--durations-moderate);
}

    .checkbox__control:not([data-disabled]):hover {
      background: var(--colors-bg-hover);
}

    .checkbox__control:not([data-disabled]):hover .checkmark:not([data-state=checked]):not([data-state=indeterminate]) {
      border-color: var(--colors-fg-medium-emphasis);
}

    .action-bar__positioner {
      --action-bar-offset: var(--spacing-4);
      inset-inline: 0;
      position: fixed;
      display: flex;
      pointer-events: none;
}

    .action-bar__content {
      background: var(--colors-nav-bg);
      gap: var(--spacing-3);
      border-radius: var(--radii-l2);
      border-width: 1px;
      border-color: var(--colors-border-base);
      padding-block: var(--spacing-2);
      padding-inline: var(--spacing-4);
      color: var(--colors-nav-fg);
      box-shadow: var(--shadows-md);
      display: flex;
      align-items: center;
      pointer-events: auto;
      translate: calc(-1 * var(--scrollbar-width) / 2) 0px;
      height: var(--sizes-14);
      min-width: 12.5rem;
      max-width: 56.25rem;
}

    .action-bar__content[data-loading] {
      color: var(--colors-nav-fg-low);
}

    .action-bar__content:is([open], [data-open], [data-state="open"], :popover-open) {
      animation-name: slide-from-bottom, fade-in;
      animation-duration: var(--durations-moderate);
}

    .action-bar__content:is([closed], [data-closed], [data-state="closed"]) {
      animation-name: slide-to-bottom, fade-out;
      animation-duration: var(--durations-faster);
}

    .action-bar__separator {
      background: var(--colors-nav-border);
      align-self: stretch;
      width: 1px;
}

    .action-bar__selectionTrigger {
      gap: var(--spacing-2);
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      align-self: stretch;
      font-size: 1rem;
      line-height: 1.5rem;
      font-weight: var(--font-weights-normal);
      letter-spacing: -0.011em;
}

    .action-bar__closeTrigger {
      margin-inline-start: var(--spacing-1);
}

    .avatar__root {
      --avatar-bg: var(--colors-bg-highlight);
      --avatar-color: var(--colors-fg-medium-emphasis);
      background: var(--avatar-bg);
      border-radius: var(--radii-full);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: var(--font-weights-medium);
      position: relative;
      vertical-align: top;
      flex-shrink: 0;
      -webkit-user-select: none;
      user-select: none;
      font-size: var(--avatar-font-size);
      color: var(--avatar-color);
      width: var(--avatar-size);
      height: var(--avatar-size);
}

    [data-avatar-group] .avatar__root {
      border-width: 1px;
      border-color: var(--colors-white);
}

    .avatar__image {
      object-fit: cover;
      width: 100%;
      height: 100%;
}

    .avatar__image,.avatar__fallback {
      border-radius: var(--radii-full);
}

    .avatar__fallback {
      line-height: 1;
      text-transform: uppercase;
      font-weight: var(--font-weights-medium);
      font-size: var(--avatar-font-size);
}

    .dialog__backdrop {
      background: blackAlpha.500;
      position: fixed;
      z-index: var(--z-index);
      left: 0;
      top: 0;
      width: 100dvw;
      height: 100dvh;
}

    .dialog__backdrop:is([open], [data-open], [data-state="open"], :popover-open) {
      animation-name: fade-in;
      animation-duration: var(--durations-slow);
}

    .dialog__backdrop:is([closed], [data-closed], [data-state="closed"]) {
      animation-name: fade-out;
      animation-duration: var(--durations-moderate);
}

    .dialog__positioner {
      position: fixed;
      justify-content: center;
      width: 100dvw;
      height: 100dvh;
      left: 0;
      top: 0;
      overscroll-behavior-y: none;
}

    .dialog__positioner,.dialog__content {
      --dialog-z-index: var(--z-index-modal);
      display: flex;
      z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
}

    .dialog__content {
      background: bg.panel;
      outline: 0;
      border-radius: var(--radii-l3);
      margin-block: var(--dialog-margin, var(--dialog-base-margin));
      flex-direction: column;
      position: relative;
      box-shadow: lg;
      width: 100%;
}

    .dialog__content:is([open], [data-open], [data-state="open"], :popover-open) {
      animation-duration: var(--durations-moderate);
}

    .dialog__content:is([closed], [data-closed], [data-state="closed"]) {
      animation-duration: var(--durations-faster);
}

    .dialog__title {
      font-weight: var(--font-weights-semibold);
}

    .dialog__description {
      color: fg.muted;
}

    .dialog__closeTrigger {
      position: absolute;
      inset-inline-end: var(--spacing-2);
      top: var(--spacing-2);
}

    .dialog__header {
      gap: var(--spacing-2);
      flex: 0;
      padding-inline: var(--spacing-6);
      display: flex;
      padding-top: var(--spacing-6);
      padding-bottom: var(--spacing-4);
}

    .dialog__body {
      flex: 1 1 0%;
      padding-bottom: var(--spacing-6);
}

    .dialog__body,.dialog__footer {
      padding-inline: var(--spacing-6);
      padding-top: var(--spacing-2);
}

    .dialog__footer {
      gap: var(--spacing-3);
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-bottom: var(--spacing-4);
}

    .input__root {
      --input-start-element-width: calc(var(--input-height) - 2px);
      --input-end-element-width: calc(var(--input-height) - 2px);
      --input-ps: var(--input-px);
      --input-pe: var(--input-px);
      position: relative;
      width: 100%;
}

    .input__root[data-with-start-element] {
      --input-ps: var(--input-start-element-width);
}

    .input__root[data-with-end-element] {
      --input-pe: var(--input-end-element-width);
}

    .input__root:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
      cursor: not-allowed;
}

    .input__field {
      --input-bg: transparent;
      --input-border: transparent;
      background: var(--input-disabled-bg, var(--input-bg));
      border-radius: var(--radii-l2);
      border-width: 1px;
      outline: 0;
      border-color: var(--input-status-border, var(--input-disabled-border, var(--input-border)));
      appearance: none;
      -webkit-appearance: none;
      color: var(--input-disabled-color, fg.highEmphasis);
      --focus-ring-color: var(--colors-border-focus);
}

    .input__field:is(:focus-visible, [data-focus-visible]) {
      outline-offset: 0px;
      outline-width: var(--focus-ring-width, 1px);
      outline-color: var(--focus-ring-color);
      outline-style: var(--focus-ring-style, solid);
      border-color: var(--focus-ring-color);
}

    .input__field {
      position: relative;
      text-align: start;
      --transition-prop: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
      transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
      --transition-duration: var(--durations-moderate);
      transition-duration: var(--durations-moderate);
      padding-inline-start: var(--input-ps);
      padding-inline-end: var(--input-pe);
      height: var(--input-height);
      min-height: var(--input-height);
      width: 100%;
}

    .input__field:is(:invalid, [data-invalid], [aria-invalid=true]) {
      --input-status-border: var(--colors-border-critical);
      --focus-ring-color: var(--colors-border-critical);
}

    .input__field[data-status=warning] {
      --input-status-border: var(--colors-border-warning);
      --focus-ring-color: var(--colors-border-warning);
}

    .input__field[data-status=success] {
      --input-status-border: var(--colors-border-success);
      --focus-ring-color: var(--colors-border-success);
}

    .input__field:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
      --input-disabled-bg: var(--colors-bg-disabled);
      --input-disabled-border: var(--colors-border-disabled);
      --input-disabled-color: var(--colors-fg-disabled);
      cursor: not-allowed;
}

    .input__field::placeholder,.input__field[data-placeholder] {
      color: var(--colors-fg-disabled);
}

    .input__element {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--colors-fg-low-emphasis);
      z-index: 1;
      pointer-events: none;
      top: 1px;
      bottom: 1px;
      width: fit-content;
}

    .input__element[data-position=start] {
      padding-inline: var(--input-element-px);
      inset-inline-start: 1px;
      min-width: var(--input-start-element-width);
}

    .input__element[data-position=end] {
      padding-inline: var(--input-element-px);
      inset-inline-end: 1px;
      min-width: var(--input-end-element-width);
}

    [data-disabled] .input__element {
      color: var(--colors-fg-disabled);
}

    .input__element:has(button, a, [role=button]) {
      pointer-events: auto;
}

    .layout__root {
      overflow: hidden;
      display: flex;
      height: 100dvh;
      width: var(--sizes-full);
}

    .layout__sidebar {
      background: var(--colors-nav-bg);
      flex-direction: column;
      flex-shrink: 0;
      overflow-x: hidden;
}

    .layout__sidebar,.layout__body {
      display: flex;
      overflow-y: auto;
}

    .layout__body {
      background: var(--colors-bg-base);
      flex: 1 1 0%;
      flex-direction: column;
      min-height: 0;
      min-width: 0;
}

    .layout__header {
      background: var(--colors-bg-surface);
      padding-inline: var(--spacing-4);
      border-color: var(--colors-border-base);
      display: flex;
      align-items: center;
      flex-shrink: 0;
      color: var(--colors-fg-high-emphasis);
      width: var(--sizes-full);
      height: var(--sizes-14);
      border-bottom-width: 1px;
}

    .layout__main {
      flex: 1 1 0%;
      display: flex;
      flex-direction: column;
}

    .layout__footer {
      background: var(--colors-bg-surface);
      padding-inline: var(--spacing-6);
      padding-block: var(--spacing-4);
      border-color: var(--colors-border-base);
      display: flex;
      align-items: center;
      flex-shrink: 0;
      color: var(--colors-fg-medium-emphasis);
      width: var(--sizes-full);
      height: auto;
      border-top-width: 1px;
}

    .layout__backdrop {
      inset: 0;
      background: blackAlpha.600;
      position: fixed;
      z-index: 9;
      display: none;
}

    .menu__trigger:is([open], [data-open], [data-state="open"], :popover-open) {
      background: var(--btn-bg-active, var(--btn-bg));
      border-color: var(--btn-border-active, var(--btn-border));
      color: var(--btn-color-active, var(--btn-color));
}

    .menu__indicator {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      --transition-prop: transform;
      transition-property: transform;
      --transition-duration: var(--durations-moderate);
      transition-duration: var(--durations-moderate);
}

    [data-state=open] .menu__indicator {
      transform: rotate(180deg);
}

    .menu__positioner {
      z-index: var(--z-index-dropdown);
}

    .menu__content {
      background: var(--colors-bg-surface);
      padding: var(--spacing-1);
      border-width: 1px;
      border-color: var(--colors-border-base);
      border-radius: var(--radii-l2);
      gap: var(--spacing-0\.5);
      outline: 0;
      display: flex;
      flex-direction: column;
      box-shadow: var(--shadows-sm);
      min-width: var(--sizes-44);
}

    .menu__content:is([open], [data-open], [data-state="open"], :popover-open) {
      animation-name: fade-in;
      animation-duration: var(--durations-fast);
}

    .menu__content:is([closed], [data-closed], [data-state="closed"]) {
      animation-name: fade-out;
      animation-duration: var(--durations-faster);
}

    .menu__itemText {
      flex: 1 1 0%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
}

    .menu__itemIndicator {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
}

    .menu__itemGroup {
      gap: var(--spacing-0\.5);
      display: flex;
      flex-direction: column;
      align-self: stretch;
}

    .menu__itemGroup + .menu__itemGroup {
      margin-top: var(--spacing-1\.5);
}

    .menu__itemGroupLabel {
      padding-inline: var(--spacing-3);
      margin-inline: calc(var(--spacing-1) * -1);
      gap: var(--spacing-2);
      border-color: var(--colors-border-base);
      display: flex;
      align-items: center;
      color: var(--colors-fg-disabled);
      font-size: 0.75rem;
      line-height: 1rem;
      font-weight: var(--font-weights-semibold);
      letter-spacing: 0.042em;
      text-transform: uppercase;
      -webkit-user-select: none;
      user-select: none;
      height: var(--sizes-8);
      padding-top: var(--spacing-2);
      padding-bottom: var(--spacing-1);
      border-bottom-width: 1px;
}

    .menu__separator {
      border: none;
      background: var(--colors-border-base);
      height: 1px;
}

    .side-navigation__root {
      background: var(--colors-nav-bg);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      height: var(--sizes-full);
}

    .side-navigation__header {
      padding-block: var(--spacing-4);
      display: flex;
      align-items: center;
      flex-shrink: 0;
      color: var(--colors-nav-fg);
      padding-left: var(--spacing-3);
      padding-right: var(--spacing-2);
}

    [data-state=compressed] .side-navigation__header {
      padding: var(--spacing-4);
      gap: var(--spacing-3);
      flex-direction: column;
      justify-content: center;
}

    .side-navigation__content {
      flex: 1 1 0%;
      gap: var(--spacing-2);
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      overflow-x: hidden;
      min-height: 0;
}

    .side-navigation__footer {
      flex-shrink: 0;
      min-height: var(--sizes-14);
}

    .side-navigation__footer,.side-navigation__group {
      border-color: var(--colors-nav-border);
      display: flex;
      align-items: center;
      border-top-width: 1px;
}

    .side-navigation__group {
      padding-top: var(--spacing-4);
      padding-right: var(--spacing-3);
      padding-bottom: var(--spacing-1);
      padding-left: var(--spacing-3);
}

    [data-state=compressed] .side-navigation__group {
      height: var(--sizes-2);
      padding-top: 0;
      padding-bottom: 0;
}

    .side-navigation__groupText {
      font-size: 0.75rem;
      line-height: 1rem;
      font-weight: var(--font-weights-semibold);
      letter-spacing: 0.042em;
      text-transform: uppercase;
      color: var(--colors-nav-fg-low);
      -webkit-user-select: none;
      user-select: none;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
}

    [data-state=compressed] .side-navigation__groupText {
      display: none;
}

    .side-navigation__item {
      display: flex;
      flex-direction: column;
}

    .side-navigation__itemTrigger {
      background: var(--colors-nav-bg);
      outline: 0;
      padding-block: var(--spacing-1);
      gap: var(--spacing-2);
      display: flex;
      align-items: center;
      cursor: var(--cursor-button);
      -webkit-user-select: none;
      user-select: none;
      appearance: none;
      -webkit-appearance: none;
      font-size: 0.875rem;
      line-height: 1.375rem;
      font-weight: var(--font-weights-normal);
      letter-spacing: -0.006em;
      color: var(--colors-nav-fg);
      width: var(--sizes-full);
      height: var(--sizes-8);
      padding-left: var(--spacing-3);
      padding-right: var(--spacing-2);
}

    .side-navigation__itemTrigger[data-active] {
      background: var(--colors-nav-item-active);
      box-shadow: inset 2px 0 0 var(--colors-nav-item-active-accent);
      font-weight: 600;
}

    [data-state=compressed] .side-navigation__itemTrigger {
      padding-block: var(--spacing-1);
      padding-inline: var(--spacing-2);
      justify-content: center;
      height: var(--sizes-10);
}

    .side-navigation__itemTrigger svg {
      flex-shrink: 0;
      width: var(--sizes-5);
      height: var(--sizes-5);
}

    .side-navigation__itemTrigger:not(:disabled):not(:focus-visible):hover {
      background: var(--colors-nav-item-hover);
}

    .side-navigation__itemTrigger:not(:disabled):active {
      background: var(--colors-nav-item-active);
}

    .side-navigation__itemText {
      flex: 1 1 0%;
      text-align: start;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
}

    [data-state=compressed] .side-navigation__itemText {
      display: none;
}

    .side-navigation__itemIndicator {
      transition: transform moderate;
      display: flex;
      align-items: center;
      justify-content: center;
      width: var(--sizes-5);
      height: var(--sizes-5);
      flex-shrink: 0;
}

    [data-state=open] .side-navigation__itemIndicator {
      transform: rotate(180deg);
}

    .side-navigation__itemContent,.side-navigation__itemContentInner {
      display: flex;
      flex-direction: column;
}

    .side-navigation__subItem {
      background: var(--colors-nav-bg);
      outline: 0;
      padding-block: var(--spacing-1);
      gap: var(--spacing-2);
      display: flex;
      align-items: center;
      cursor: var(--cursor-button);
      -webkit-user-select: none;
      user-select: none;
      appearance: none;
      -webkit-appearance: none;
      font-size: 0.875rem;
      line-height: 1.375rem;
      font-weight: var(--font-weights-normal);
      letter-spacing: -0.006em;
      color: var(--colors-nav-fg);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: var(--sizes-full);
      height: var(--sizes-8);
      padding-right: var(--spacing-3);
      padding-left: var(--spacing-9);
}

    .side-navigation__subItem[data-active] {
      background: var(--colors-nav-item-active);
      box-shadow: inset 2px 0 0 var(--colors-nav-item-active-accent);
      font-weight: 600;
}

    [data-nav-context=popover] .side-navigation__subItem {
      border-radius: var(--radii-l1);
      padding-inline: var(--spacing-2);
}

    [data-nav-context=popover] .side-navigation__subItem[data-active] {
      box-shadow: none;
}

    .side-navigation__subItem:not(:disabled):not(:focus-visible):hover {
      background: var(--colors-nav-item-hover);
}

    .side-navigation__subItem:not(:disabled):active {
      background: var(--colors-nav-item-active);
}

    .sideSheet__backdrop {
      --sidesheet-z-index: var(--z-index-popover);
      background: var(--colors-overlay);
      position: fixed;
      inset-inline-start: 0;
      z-index: calc(var(--sidesheet-z-index) + var(--layer-index, 0) - 1);
      top: 0;
      width: 100vw;
      height: 100dvh;
}

    .sideSheet__backdrop:is([open], [data-open], [data-state="open"], :popover-open) {
      animation-name: fade-in;
      animation-timing-function: emphasized-in;
      animation-duration: var(--durations-slow);
}

    .sideSheet__backdrop:is([closed], [data-closed], [data-state="closed"]) {
      animation-name: fade-out;
      animation-timing-function: emphasized-out;
      animation-duration: normal;
}

    .sideSheet__positioner {
      justify-content: flex-end;
      align-items: stretch;
      position: fixed;
      inset-inline-start: 0;
      width: 100vw;
      height: 100dvh;
      top: 0;
      overscroll-behavior-y: none;
}

    .sideSheet__positioner,.sideSheet__content {
      --drawer-z-index: var(--z-index-popover);
      display: flex;
      z-index: calc(var(--drawer-z-index) + var(--layer-index, 0));
}

    .sideSheet__content {
      background: var(--colors-bg-surface);
      outline: 0;
      flex-direction: column;
      position: relative;
      color: inherit;
      box-shadow: lg;
      width: 100%;
      max-width: 480px;
      max-height: 100dvh;
}

    .sideSheet__content:is([open], [data-open], [data-state="open"], :popover-open) {
      animation-duration: var(--durations-slowest);
      animation-timing-function: var(--easings-ease-in-smooth);
      animation-name: slide-from-right-full, fade-in;
}

    :where([dir=rtl], :dir(rtl)) .sideSheet__content:is([open], [data-open], [data-state="open"], :popover-open) {
      animation-name: slide-from-left-full, fade-in;
}

    .sideSheet__content:is([closed], [data-closed], [data-state="closed"]) {
      animation-duration: var(--durations-slower);
      animation-timing-function: var(--easings-ease-in-smooth);
      animation-name: slide-to-right-full, fade-out;
}

    :where([dir=rtl], :dir(rtl)) .sideSheet__content:is([closed], [data-closed], [data-state="closed"]) {
      animation-name: slide-to-left-full, fade-out;
}

    .sideSheet__title {
      grid-column: 2;
      grid-row: 1;
      color: var(--colors-fg-high-emphasis);
      font-weight: var(--font-weights-semibold);
      font-size: 1.5rem;
      line-height: 2.25rem;
      letter-spacing: -0.017em;
      padding-inline-end: var(--spacing-4);
}

    .sideSheet__description {
      grid-column: 1 / 4;
      grid-row: 2;
      padding-inline-start: 0;
      color: var(--colors-fg-medium-emphasis);
      font-size: 1rem;
      line-height: 1.5rem;
      font-weight: var(--font-weights-normal);
      letter-spacing: -0.011em;
}

    .sideSheet__description[data-back-offset] {
      padding-left: var(--spacing-1);
}

    .sideSheet__closeTrigger {
      grid-column: 3;
      grid-row: 1;
      margin-inline-start: var(--spacing-1);
}

    .sideSheet__header {
      padding-inline: var(--spacing-5);
      display: grid;
      grid-template-columns: auto 1fr auto;
      grid-template-rows: auto auto;
      align-items: center;
      row-gap: var(--spacing-1);
      padding-top: var(--spacing-4);
      padding-bottom: var(--spacing-2);
}

    .sideSheet__body {
      padding: var(--spacing-6);
      flex: 1 1 0%;
      overflow: auto;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
}

    .sideSheet__footer {
      padding: var(--spacing-6);
      display: block;
}

    .sideSheet__backTrigger {
      grid-column: 1;
      grid-row: 1;
      margin-inline-end: var(--spacing-1);
}

    .table__root {
      display: block;
      border-collapse: collapse;
      width: var(--sizes-full);
      min-width: var(--table-min-width);
}

    .table__head {
      background: var(--colors-bg-highlight);
      display: block;
      position: sticky;
      z-index: 1;
      top: 0;
}

    .table__head[data-loading] [data-part="header"] {
      color: var(--colors-fg-disabled);
      cursor: not-allowed;
      pointer-events: none;
}

    .table__body {
      display: block;
      position: relative;
}

    .table__body > tr:last-child {
      border-bottom-width: 0;
}

    .table__foot {
      border-color: var(--colors-border-base);
      display: block;
      border-top-width: 1px;
}

    .table__row {
      border-color: var(--colors-border-base);
      display: grid;
      grid-auto-flow: column;
      justify-content: flex-start;
      grid-template-columns: var(--table-grid-template-columns, none);
      width: var(--sizes-full);
      border-bottom-width: 1px;
}

    .table__row[data-selected] {
      background: var(--colors-bg-active);
}

    .table__header {
      gap: var(--spacing-1);
      padding-inline: var(--spacing-4);
      display: flex;
      align-items: center;
      text-align: start;
      font-size: 0.75rem;
      line-height: 1rem;
      font-weight: var(--font-weights-semibold);
      letter-spacing: 0.042em;
      text-transform: uppercase;
      color: var(--colors-fg-low-emphasis);
      white-space: nowrap;
      -webkit-user-select: none;
      user-select: none;
      height: var(--sizes-10);
      min-width: var(--col-min-width, 0px);
}

    .table__header[data-align="end"] {
      justify-content: flex-end;
}

    .table__header[data-sorted] [data-part="sortIcon"] {
      opacity: 1;
}

    .table__cell {
      padding-inline: var(--spacing-4);
      display: flex;
      align-items: center;
      font-size: 0.875rem;
      line-height: 1.375rem;
      font-weight: var(--font-weights-normal);
      letter-spacing: -0.006em;
      color: var(--colors-fg-high-emphasis);
      height: var(--sizes-14);
      min-width: var(--col-min-width, 0px);
}

    [data-loading] .table__cell {
      grid-column: 1 / -1;
      min-width: 0;
}

    .table__cell[data-align="end"] {
      text-align: end;
      justify-content: flex-end;
}

    .table__checkboxCell {
      padding-inline: var(--spacing-2);
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-shrink: 0;
      width: var(--sizes-12);
}

    thead .table__checkboxCell {
      height: var(--sizes-10);
}

    tbody .table__checkboxCell {
      height: var(--sizes-14);
}

    .table__sortTrigger {
      padding: 0;
      background: var(--colors-transparent);
      font: inherit;
      gap: var(--spacing-1);
      border-width: 0;
      display: flex;
      align-items: center;
      letter-spacing: inherit;
      text-transform: inherit;
      color: inherit;
      cursor: pointer;
}

    .table__sortTrigger:is(:focus-visible, [data-focus-visible]) {
      border-radius: var(--radii-sm);
      outline-width: 2px;
      outline-style: solid;
      outline-color: var(--colors-border-focus);
      outline-offset: 2px;
}

    .table__sortTrigger:not(:disabled):not(:focus-visible):hover {
      color: var(--colors-fg-medium-emphasis);
}

    .table__sortTrigger:not(:disabled):not(:focus-visible):hover [data-part="sortIcon"] {
      opacity: 1;
}

    .table__sortIcon {
      opacity: var(--opacity-0);
      flex-shrink: 0;
      color: inherit;
}

    .table__sortIcon,.table__emptyState {
      display: flex;
      align-items: center;
}

    .table__emptyState {
      padding-block: var(--spacing-16);
      flex-direction: column;
      justify-content: center;
      color: var(--colors-fg-low-emphasis);
}

    .table__pagination {
      padding-inline: var(--spacing-4);
      padding-block: var(--spacing-3);
      border-color: var(--colors-border-base);
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 0.875rem;
      line-height: 1.375rem;
      font-weight: var(--font-weights-normal);
      letter-spacing: -0.006em;
      color: var(--colors-fg-medium-emphasis);
      border-top-width: 1px;
}

    .tabs__root {
      position: relative;
      display: block;
}

    .tabs__list {
      border-color: var(--colors-border-base);
      flex-direction: row;
      isolation: isolate;
      min-height: var(--tabs-height);
      border-bottom-width: 1px;
}

    .tabs__list,.tabs__trigger {
      display: flex;
      position: relative;
}

    .tabs__trigger {
      outline: 0;
      gap: var(--spacing-2);
      padding-inline: var(--spacing-2);
      align-items: center;
      font-weight: var(--font-weights-medium);
      cursor: var(--cursor-button);
      color: var(--colors-fg-low-emphasis);
      border-top-left-radius: var(--radii-sm);
      border-top-right-radius: var(--radii-sm);
      min-width: var(--tabs-height);
      height: var(--tabs-height);
}

    .tabs__trigger:is([aria-selected=true], [data-selected]) {
      --indicator-offset-y: -1px;
      --indicator-color: var(--colors-primary-base);
      color: var(--colors-primary-base);
      --indicator-color-fallback: colors.colorPalette.solid;
      position: relative;
}

    .tabs__trigger:is([aria-selected=true], [data-selected])::before {
      background: var(--indicator-color, var(--indicator-color-fallback));
      inset-inline: var(--indicator-offset-x, 0);
      content: "";
      position: absolute;
      bottom: var(--indicator-offset-y, 0);
      height: var(--indicator-thickness, 2px);
}

    .tabs__trigger:is([aria-selected=true], [data-selected]):not(:disabled):not(:focus-visible):hover {
      color: var(--colors-primary-base);
}

    .tabs__trigger:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
      cursor: not-allowed;
      color: var(--colors-fg-disabled);
}

    .tabs__trigger:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):not(:disabled):not(:focus-visible):hover {
      background: var(--colors-transparent);
      color: var(--colors-fg-disabled);
}

    .tabs__trigger:not(:disabled):not(:focus-visible):hover {
      background: var(--colors-bg-hover);
      color: var(--colors-fg-high-emphasis);
}

    .tabs__trigger:is(:focus-visible, [data-focus-visible]) {
      outline: 2px solid;
      z-index: 1;
      outline-color: colorPalette.focusRing;
}

    .tabs__content {
      --focus-ring-color: ;
}

    .tabs__content:is(:focus-visible, [data-focus-visible]) {
      outline-offset: 0px;
      outline-width: var(--focus-ring-width, 1px);
      outline-color: var(--focus-ring-color);
      outline-style: var(--focus-ring-style, solid);
      border-color: var(--focus-ring-color);
}

    .tabs__content {
      color: var(--colors-fg-medium-emphasis);
      width: 100%;
      padding-top: var(--tabs-content-padding);
}

    .tabs__indicator {
      display: none;
}

    .tag__root {
      --tag-bg: var(--colors-bg-highlight);
      --tag-color: var(--colors-fg-medium-emphasis);
      background: var(--tag-bg);
      border-radius: var(--radii-l3);
      padding-block: 1.25px;
      gap: var(--spacing-0\.5);
      display: inline-flex;
      align-items: center;
      vertical-align: top;
      -webkit-user-select: none;
      user-select: none;
      color: var(--tag-color);
      max-width: 100%;
}

    .tag__label {
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
}

    .tag__startElement {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
}

    .tag__startElement :where(svg) {
      width: var(--sizes-4);
      height: var(--sizes-4);
}

    @media screen and (min-width: 48rem) {
      .layout__footer {
        padding-block: var(--spacing-6);
        height: var(--sizes-14);
}
}

    @media screen and (max-width: 47.9975rem) {
      [data-sidebar=expanded] .layout__backdrop {
        display: block;
}
}
}

  .field__errorText--size_md,.field__helperText--size_md {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: var(--font-weights-normal);
    letter-spacing: 0em;
}

  .field__label--size_md {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: var(--font-weights-medium);
    letter-spacing: -0.005em;
}

  .field__warningText--size_md,.field__successText--size_md {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: var(--font-weights-normal);
    letter-spacing: 0em;
}

  .field__errorIcon--size_md,.field__warningIcon--size_md,.field__successIcon--size_md {
    width: var(--sizes-4);
    height: var(--sizes-4);
}

  .field__errorText--size_sm,.field__helperText--size_sm {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: var(--font-weights-normal);
    letter-spacing: 0em;
}

  .field__label--size_sm {
    font-size: 0.875rem;
    line-height: 1.375rem;
    font-weight: var(--font-weights-medium);
    letter-spacing: 0em;
}

  .field__warningText--size_sm,.field__successText--size_sm {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: var(--font-weights-normal);
    letter-spacing: 0em;
}

  .field__errorIcon--size_sm,.field__warningIcon--size_sm,.field__successIcon--size_sm {
    width: var(--sizes-3\.5);
    height: var(--sizes-3\.5);
}

  .field__errorText--size_lg,.field__helperText--size_lg {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: var(--font-weights-normal);
    letter-spacing: 0em;
}

  .field__label--size_lg {
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: var(--font-weights-medium);
    letter-spacing: -0.01em;
}

  .field__warningText--size_lg,.field__successText--size_lg {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: var(--font-weights-normal);
    letter-spacing: 0em;
}

  .field__errorIcon--size_lg,.field__warningIcon--size_lg,.field__successIcon--size_lg {
    width: var(--sizes-4\.5);
    height: var(--sizes-4\.5);
}

  .checkbox__root--size_sm {
    gap: var(--spacing-1);
}

  .checkbox__label--size_sm {
    font-size: 0.875rem;
    line-height: 1.375rem;
    font-weight: var(--font-weights-normal);
    letter-spacing: -0.006em;
}

  .checkbox__control--size_sm {
    border-radius: var(--radii-l1);
    width: var(--sizes-6);
    height: var(--sizes-6);
}

  .checkbox__control--size_sm :where(svg) {
    width: var(--sizes-4);
    height: var(--sizes-4);
}

  .checkbox__root--size_md {
    gap: var(--spacing-1);
}

  .checkbox__label--size_md {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: var(--font-weights-normal);
    letter-spacing: -0.011em;
}

  .checkbox__control--size_md {
    border-radius: var(--radii-l2);
    width: var(--sizes-8);
    height: var(--sizes-8);
}

  .checkbox__control--size_md :where(svg) {
    width: var(--sizes-5);
    height: var(--sizes-5);
}

  .action-bar__positioner--placement_bottom {
    justify-content: center;
    bottom: calc(env(safe-area-inset-bottom) + var(--action-bar-offset));
}

  .action-bar__positioner--placement_bottom-start {
    justify-content: flex-start;
    padding-inline-start: var(--action-bar-offset);
    bottom: calc(env(safe-area-inset-bottom) + var(--action-bar-offset));
}

  .action-bar__positioner--placement_bottom-end {
    justify-content: flex-end;
    padding-inline-end: var(--action-bar-offset);
    bottom: calc(env(safe-area-inset-bottom) + var(--action-bar-offset));
}

  .avatar__root--size_lg {
    --avatar-size: 3rem;
}

  .avatar__fallback--size_lg {
    font-size: 1.125rem;
    line-height: 1.625rem;
    font-weight: var(--font-weights-normal);
    letter-spacing: -0.012em;
}

  .avatar__fallback--size_lg :where(svg) {
    width: var(--sizes-6);
    height: var(--sizes-6);
}

  .avatar__root--size_md {
    --avatar-size: var(--sizes-8);
}

  .avatar__fallback--size_md {
    font-size: 0.875rem;
    line-height: 1.375rem;
    font-weight: var(--font-weights-normal);
    letter-spacing: -0.006em;
}

  .avatar__fallback--size_md :where(svg) {
    width: var(--sizes-5);
    height: var(--sizes-5);
}

  .avatar__root--colorPalette_blue {
    --avatar-bg: var(--colors-bg-info);
    --avatar-color: var(--colors-fg-on-info);
}

  .avatar__root--colorPalette_green {
    --avatar-bg: var(--colors-bg-success);
    --avatar-color: var(--colors-fg-on-success);
}

  .avatar__root--colorPalette_purple {
    --avatar-bg: var(--colors-bg-advice);
    --avatar-color: var(--colors-fg-on-advice);
}

  .avatar__root--colorPalette_yellow {
    --avatar-bg: var(--colors-bg-warning);
    --avatar-color: var(--colors-fg-on-warning);
}

  .avatar__root--colorPalette_red {
    --avatar-bg: var(--colors-bg-critical);
    --avatar-color: var(--colors-fg-on-critical);
}

  .avatar__root--size_sm {
    --avatar-size: var(--sizes-6);
}

  .avatar__fallback--size_sm {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: var(--font-weights-normal);
    letter-spacing: 0em;
}

  .avatar__fallback--size_sm :where(svg) {
    width: var(--sizes-4);
    height: var(--sizes-4);
}

  .avatar__root--size_xl {
    --avatar-size: 4.5rem;
}

  .avatar__fallback--size_xl {
    font-size: 1.75rem;
    line-height: 2.5rem;
    font-weight: var(--font-weights-semibold);
    letter-spacing: -0.02em;
}

  .avatar__fallback--size_xl :where(svg) {
    width: var(--sizes-8);
    height: var(--sizes-8);
}

  .dialog__content--size_md {
    max-width: var(--sizes-lg);
}

  .dialog__positioner--scrollBehavior_outside {
    overflow: auto;
    pointer-events: auto;
}

  .dialog__positioner--placement_center {
    align-items: center;
}

  .dialog__content--placement_center {
    --dialog-base-margin: auto;
    margin-inline: auto;
}

  .dialog__content--motionPreset_scale:is([open], [data-open], [data-state="open"], :popover-open) {
    animation-name: scale-in, fade-in;
}

  .dialog__content--motionPreset_scale:is([closed], [data-closed], [data-state="closed"]) {
    animation-name: scale-out, fade-out;
}

  .dialog__positioner--placement_top {
    align-items: flex-start;
}

  .dialog__content--placement_top {
    --dialog-base-margin: var(--spacing-16);
    margin-inline: auto;
}

  .dialog__positioner--placement_bottom {
    align-items: flex-end;
}

  .dialog__content--placement_bottom {
    --dialog-base-margin: var(--spacing-16);
    margin-inline: auto;
}

  .dialog__positioner--scrollBehavior_inside {
    overflow: hidden;
}

  .dialog__content--scrollBehavior_inside {
    max-height: calc(100% - 7.5rem);
}

  .dialog__body--scrollBehavior_inside {
    overflow: auto;
}

  .dialog__content--size_xs {
    max-width: var(--sizes-sm);
}

  .dialog__content--size_sm {
    max-width: var(--sizes-md);
}

  .dialog__content--size_lg {
    max-width: var(--sizes-2xl);
}

  .dialog__content--size_xl {
    max-width: var(--sizes-4xl);
}

  .dialog__positioner--size_cover {
    padding: var(--spacing-10);
}

  .dialog__content--size_cover {
    --dialog-margin: 0;
    width: 100%;
    height: 100%;
}

  .dialog__content--size_full {
    --dialog-margin: 0;
    border-radius: 0;
    max-width: 100dvw;
    min-height: 100dvh;
}

  .dialog__content--motionPreset_slide-in-bottom:is([open], [data-open], [data-state="open"], :popover-open) {
    animation-name: slide-from-bottom, fade-in;
}

  .dialog__content--motionPreset_slide-in-bottom:is([closed], [data-closed], [data-state="closed"]) {
    animation-name: slide-to-bottom, fade-out;
}

  .dialog__content--motionPreset_slide-in-top:is([open], [data-open], [data-state="open"], :popover-open) {
    animation-name: slide-from-top, fade-in;
}

  .dialog__content--motionPreset_slide-in-top:is([closed], [data-closed], [data-state="closed"]) {
    animation-name: slide-to-top, fade-out;
}

  .dialog__content--motionPreset_slide-in-left:is([open], [data-open], [data-state="open"], :popover-open) {
    animation-name: slide-from-left, fade-in;
}

  .dialog__content--motionPreset_slide-in-left:is([closed], [data-closed], [data-state="closed"]) {
    animation-name: slide-to-left, fade-out;
}

  .dialog__content--motionPreset_slide-in-right:is([open], [data-open], [data-state="open"], :popover-open) {
    animation-name: slide-from-right, fade-in;
}

  .dialog__content--motionPreset_slide-in-right:is([closed], [data-closed], [data-state="closed"]) {
    animation-name: slide-to-right, fade-out;
}

  .input__field--variant_default {
    --input-bg: var(--colors-bg-surface);
    --input-border: var(--colors-border-interactive);
}

  .input__field--variant_default:not(:disabled):not(:focus-visible):hover {
    --input-border: var(--colors-border-hover);
}

  .input__root--size_md {
    --input-height: var(--sizes-10);
    --input-px: var(--spacing-3);
    --input-element-px: var(--spacing-3);
}

  .input__field--size_md {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: var(--font-weights-normal);
    letter-spacing: -0.011em;
}

  .input__element--size_md :where(svg) {
    width: var(--sizes-5);
    height: var(--sizes-5);
}

  .input__root--size_sm {
    --input-height: var(--sizes-8);
    --input-px: var(--spacing-3);
    --input-element-px: var(--spacing-3);
}

  .input__field--size_sm {
    border-radius: var(--radii-l1);
    font-size: 0.875rem;
    line-height: 1.375rem;
    font-weight: var(--font-weights-normal);
    letter-spacing: -0.006em;
}

  .input__element--size_sm :where(svg) {
    width: var(--sizes-4);
    height: var(--sizes-4);
}

  .input__root--size_lg {
    --input-height: var(--sizes-12);
    --input-px: var(--spacing-3);
    --input-element-px: var(--spacing-3);
}

  .input__field--size_lg {
    font-size: 1.125rem;
    line-height: 1.625rem;
    font-weight: var(--font-weights-normal);
    letter-spacing: -0.012em;
}

  .input__element--size_lg :where(svg) {
    width: var(--sizes-6);
    height: var(--sizes-6);
}

  .input__field--variant_ghost {
    --input-bg: var(--colors-bg-surface);
    --input-border: transparent;
    border-radius: 0;
    border-width: 0;
    --focus-ring-color: ;
}

  .input__field--variant_ghost:is(:focus-visible, [data-focus-visible]) {
    outline: none;
}

  .layout__root--variant_app {
    --layout-sidebar-width: 200px;
    --layout-sidebar-compressed-width: 3.5rem;
    --layout-transition-duration: var(--durations-moderate);
}

  .layout__root--variant_app[data-resizing] {
    --layout-transition-duration: 0ms;
}

  .layout__root--variant_page {
    flex-direction: column;
}

  .menu__item--size_md {
    padding-inline: var(--spacing-2);
    font-size: 0.875rem;
    line-height: 1.375rem;
    font-weight: var(--font-weights-normal);
    letter-spacing: -0.006em;
    min-height: var(--sizes-8);
}

  .menu__content--variant_inverse {
    background: var(--colors-nav-bg);
    border-color: var(--colors-nav-border);
}

  .menu__itemGroupLabel--variant_inverse {
    color: var(--colors-nav-fg-low);
}

  .menu__separator--variant_inverse {
    background: var(--colors-nav-border);
}

  .menu__item--size_sm {
    padding-inline: var(--spacing-2);
    min-height: var(--sizes-7);
}

  .menu__item--size_lg {
    padding-inline: var(--spacing-3);
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: var(--font-weights-normal);
    letter-spacing: -0.011em;
    min-height: var(--sizes-9);
}

  tbody:not([data-loading]) .table__row--interactive_true {
    cursor: pointer;
}

  tbody:not([data-loading]) .table__row--interactive_true:not(:disabled):not(:focus-visible):hover {
    background: var(--colors-bg-hover);
}

  .tabs__root--size_md {
    --tabs-height: var(--sizes-12);
    --tabs-content-padding: var(--spacing-4);
}

  .tabs__trigger--size_md {
    padding-block: var(--spacing-2);
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: var(--font-weights-medium);
    letter-spacing: -0.005em;
}

  .tabs__list--fitted_true {
    display: flex;
}

  .tabs__trigger--fitted_true {
    flex: 1 1 0%;
    text-align: center;
    justify-content: center;
}

  .tabs__root--size_sm {
    --tabs-height: var(--sizes-10);
    --tabs-content-padding: var(--spacing-3);
}

  .tabs__trigger--size_sm {
    padding-block: var(--spacing-1);
    font-size: 0.875rem;
    line-height: 1.375rem;
    font-weight: var(--font-weights-medium);
    letter-spacing: 0em;
}

  .tag__root--size_md {
    padding-inline: var(--spacing-2);
    height: var(--sizes-6);
}

  .tag__label--size_md {
    padding-inline: var(--spacing-0\.5);
    font-size: 0.875rem;
    line-height: 1.375rem;
    font-weight: 500;
    letter-spacing: 0em;
}

  .tag__root--status_info {
    --tag-bg: var(--colors-bg-info);
    --tag-color: var(--colors-fg-on-info);
}

  .tag__root--status_success {
    --tag-bg: var(--colors-bg-success);
    --tag-color: var(--colors-fg-on-success);
}

  .tag__root--status_warning {
    --tag-bg: var(--colors-bg-warning);
    --tag-color: var(--colors-fg-on-warning);
}

  .tag__root--status_critical {
    --tag-bg: var(--colors-bg-critical);
    --tag-color: var(--colors-fg-on-critical);
}

  .tag__root--status_advice {
    --tag-bg: var(--colors-bg-advice);
    --tag-color: var(--colors-fg-on-advice);
}

  .tag__root--status_pro {
    --tag-bg: var(--colors-bg-pro);
    --tag-color: var(--colors-fg-pro);
}

  .tag__root--status_accent {
    --tag-bg: var(--colors-bg-accent);
    --tag-color: var(--colors-fg-accent);
}

  .tag__root--size_sm {
    padding-inline: var(--spacing-1);
    height: var(--sizes-4);
}

  .tag__label--size_sm {
    font-size: 0.75rem;
    line-height: 1rem;
    font-weight: 400;
    letter-spacing: 0em;
}

  .tag__root--size_lg {
    padding-inline: var(--spacing-3);
    height: var(--sizes-8);
}

  .tag__label--size_lg {
    padding-inline: var(--spacing-1);
    font-size: 0.875rem;
    line-height: 1.375rem;
    font-weight: 500;
    letter-spacing: 0em;
}

  @media screen and (min-width: 48rem) {
    .layout__sidebar--variant_app {
      --transition-prop: width;
      transition-property: width;
      --transition-duration: var(--layout-transition-duration);
      transition-duration: var(--layout-transition-duration);
      width: var(--layout-sidebar-width);
}

    [data-sidebar=closed] .layout__sidebar--variant_app {
      width: 0;
}

    [data-sidebar=compressed] .layout__sidebar--variant_app {
      width: var(--layout-sidebar-compressed-width);
}
}

  @media screen and (max-width: 47.9975rem) {
    .layout__sidebar--variant_app {
      position: fixed;
      inset-inline-start: 0;
      z-index: 10;
      transform: translateX(-100%);
      --transition-prop: transform;
      transition-property: transform;
      --transition-duration: var(--layout-transition-duration);
      transition-duration: var(--layout-transition-duration);
      top: 0;
      height: 100dvh;
      width: var(--sizes-full);
}

    [data-sidebar=expanded] .layout__sidebar--variant_app {
      transform: translateX(0);
}
}
}

@layer utilities{
  @layer compositions{

    .textStyle_body\.md {
      font-size: 1rem;
      line-height: 1.5rem;
      letter-spacing: -0.011em;
}

    .textStyle_body\.md,.textStyle_body\.sm {
      font-weight: var(--font-weights-normal);
}

    .textStyle_body\.sm {
      font-size: 0.875rem;
      line-height: 1.375rem;
      letter-spacing: -0.006em;
}

    .textStyle_heading\.lg {
      font-size: 2.25rem;
      line-height: 3rem;
      font-weight: var(--font-weights-semibold);
      letter-spacing: -0.021em;
}

    .textStyle_heading\.md {
      font-size: 1.75rem;
      line-height: 2.5rem;
      font-weight: var(--font-weights-semibold);
      letter-spacing: -0.02em;
}

    .textStyle_heading\.sm {
      font-size: 1.5rem;
      line-height: 2.25rem;
      font-weight: var(--font-weights-semibold);
      letter-spacing: -0.017em;
}

    .textStyle_subheading\.lg {
      font-size: 1.375rem;
      line-height: 1.75rem;
}

    .textStyle_subheading\.lg,.textStyle_subheading\.md {
      font-weight: var(--font-weights-semibold);
      letter-spacing: -0.016em;
}

    .textStyle_subheading\.md {
      font-size: 1.25rem;
      line-height: 2rem;
}

    .textStyle_subheading\.sm {
      font-size: 1.125rem;
      line-height: 1.5rem;
      font-weight: var(--font-weights-bold);
      letter-spacing: -0.0025em;
}

    .textStyle_body\.lg {
      font-size: 1.125rem;
      line-height: 1.625rem;
      font-weight: var(--font-weights-normal);
      letter-spacing: -0.012em;
}

    .textStyle_label\.lg {
      font-size: 1.125rem;
      letter-spacing: -0.01em;
}

    .textStyle_label\.lg,.textStyle_label\.md {
      line-height: 1.5rem;
      font-weight: var(--font-weights-medium);
}

    .textStyle_label\.md {
      font-size: 1rem;
      letter-spacing: -0.005em;
}

    .textStyle_label\.sm {
      font-size: 0.875rem;
      line-height: 1.375rem;
      font-weight: var(--font-weights-medium);
      letter-spacing: 0em;
}

    .textStyle_caption\.lg {
      font-weight: var(--font-weights-semibold);
      letter-spacing: 0.042em;
      text-transform: uppercase;
}

    .textStyle_caption\.lg,.textStyle_caption\.md {
      font-size: 0.75rem;
      line-height: 1rem;
}

    .textStyle_caption\.md {
      font-weight: var(--font-weights-normal);
      letter-spacing: 0em;
}
}

  .\--btn-color_colors\.fg\.highEmphasis {
    --btn-color: var(--colors-fg-high-emphasis);
}

  .\--btn-color-hover_colors\.fg\.highEmphasis {
    --btn-color-hover: var(--colors-fg-high-emphasis);
}

  .\--btn-bg-hover_colors\.bg\.hover {
    --btn-bg-hover: var(--colors-bg-hover);
}

  .\--btn-color-active_colors\.fg\.highEmphasis {
    --btn-color-active: var(--colors-fg-high-emphasis);
}

  .\--btn-bg-active_colors\.bg\.active {
    --btn-bg-active: var(--colors-bg-active);
}

  .\--btn-color_colors\.fg\.mediumEmphasis {
    --btn-color: var(--colors-fg-medium-emphasis);
}

  .\--btn-bg_colors\.bg\.surface {
    --btn-bg: var(--colors-bg-surface);
}

  .\--btn-border_colors\.border\.interactive {
    --btn-border: var(--colors-border-interactive);
}

  .\--btn-border-hover_colors\.border\.hover {
    --btn-border-hover: var(--colors-border-hover);
}

  .\--btn-color-active_colors\.fg\.mediumEmphasis {
    --btn-color-active: var(--colors-fg-medium-emphasis);
}

  .\--btn-border-active_colors\.primary\.active {
    --btn-border-active: var(--colors-primary-active);
}

  .\--btn-color-disabled_colors\.fg\.disabled {
    --btn-color-disabled: var(--colors-fg-disabled);
}

  .\--btn-bg-disabled_colors\.bg\.surface {
    --btn-bg-disabled: var(--colors-bg-surface);
}

  .\--btn-border-disabled_colors\.border\.disabled {
    --btn-border-disabled: var(--colors-border-disabled);
}

  .\--popover-bg_var\(--colors-nav-bg\) {
    --popover-bg: var(--colors-nav-bg);
}

  .p_2 {
    padding: var(--spacing-2);
}

  .bg_nav\.bg {
    background: var(--colors-nav-bg);
}

  .p_6 {
    padding: var(--spacing-6);
}

  .p_3 {
    padding: var(--spacing-3);
}

  .bg_bg\.info {
    background: var(--colors-bg-info);
}

  .bg_bg\.success {
    background: var(--colors-bg-success);
}

  .bg_bg\.warning {
    background: var(--colors-bg-warning);
}

  .bg_bg\.critical {
    background: var(--colors-bg-critical);
}

  .bg_bg\.advice {
    background: var(--colors-bg-advice);
}

  .p_4 {
    padding: var(--spacing-4);
}

  .bg_bg\.surface {
    background: var(--colors-bg-surface);
}

  .px_1 {
    padding-inline: var(--spacing-1);
}

  .gap_1 {
    gap: var(--spacing-1);
}

  .gap_8px {
    gap: 8px;
}

  .flex_1 {
    flex: 1 1 0%;
}

  .gap_4 {
    gap: var(--spacing-4);
}

  .bd-c_border\.base {
    border-color: var(--colors-border-base);
}

  .gap_2 {
    gap: var(--spacing-2);
}

  .gap_0 {
    gap: 0;
}

  .gap_3 {
    gap: var(--spacing-3);
}

  .bdr_l2 {
    border-radius: var(--radii-l2);
}

  .gap_6 {
    gap: var(--spacing-6);
}

  .bd-w_1px {
    border-width: 1px;
}

  .bd-c_border\.interactive {
    border-color: var(--colors-border-interactive);
}

  .sx_-2\.5 > :not([hidden]) ~ :not([hidden]) {
    margin-inline-start: calc(var(--spacing-2\.5) * -1);
    margin-inline-end: 0px;
}

  .fill_none {
    fill: none;
}

  .stk_currentColor {
    stroke: currentColor;
}

  .stk-w_2\.5px {
    stroke-width: 2.5px;
}

  .stk-lc_round {
    stroke-linecap: round;
}

  .stk-lj_round {
    stroke-linejoin: round;
}

  .d_contents {
    display: contents;
}

  .vis_hidden {
    visibility: hidden;
}

  .d_inline-flex {
    display: inline-flex;
}

  .d_flex {
    display: flex;
}

  .flex-d_column {
    flex-direction: column;
}

  .ai_center {
    align-items: center;
}

  .c_fg\.mediumEmphasis {
    color: var(--colors-fg-medium-emphasis);
}

  .isolation_isolate {
    isolation: isolate;
}

  .pos_relative {
    position: relative;
}

  .flex-wrap_wrap {
    flex-wrap: wrap;
}

  .flex-d_row {
    flex-direction: row;
}

  .ai_flex-start {
    align-items: flex-start;
}

  .ps_6 {
    padding-inline-start: var(--spacing-6);
}

  .ai_stretch {
    align-items: stretch;
}

  .ai_start {
    align-items: start;
}

  .flex-sh_0 {
    flex-shrink: 0;
}

  .jc_space-between {
    justify-content: space-between;
}

  .c_nav\.fg {
    color: var(--colors-nav-fg);
}

  .d_grid {
    display: grid;
}

  .grid-tc_repeat\(3\,_1fr\) {
    grid-template-columns: repeat(3, 1fr);
}

  .ac_start {
    align-content: start;
}

  .c_fg\.lowEmphasis {
    color: var(--colors-fg-low-emphasis);
}

  .ta_center {
    text-align: center;
}

  .size_12 {
    width: var(--sizes-12);
    height: var(--sizes-12);
}

  .size_10 {
    width: var(--sizes-10);
    height: var(--sizes-10);
}

  .c_fg\.highEmphasis {
    color: var(--colors-fg-high-emphasis);
}

  .fw_normal {
    font-weight: var(--font-weights-normal);
}

  .fw_medium {
    font-weight: var(--font-weights-medium);
}

  .fw_semibold {
    font-weight: var(--font-weights-semibold);
}

  .fw_bold {
    font-weight: var(--font-weights-bold);
}

  .trunc_true {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

  .ai_end {
    align-items: end;
}

  .w_auto {
    width: auto;
}

  .min-w_56 {
    min-width: var(--sizes-56);
}

  .w_full {
    width: var(--sizes-full);
}

  .h_4 {
    height: var(--sizes-4);
}

  .h_6 {
    height: var(--sizes-6);
}

  .bd-t-w_1px {
    border-top-width: 1px;
}

  .min-w_0 {
    min-width: 0;
}

  .max-w_full {
    max-width: var(--sizes-full);
}

  .mt_3 {
    margin-top: var(--spacing-3);
}

  .h_32 {
    height: var(--sizes-32);
}

  .mb_4 {
    margin-bottom: var(--spacing-4);
}

  .h_5 {
    height: var(--sizes-5);
}

  .w_80\% {
    width: 80%;
}

  .h_200px {
    height: 200px;
}

  .lc_2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

  .max-w_320px {
    max-width: 320px;
}

  [data-state=compressed] .\[\[data-state\=compressed\]_\&\]\:p_4 {
    padding: var(--spacing-4);
}

  .\[\&_\>_\*\:not\(\:first-child\)\:not\(\:last-child\)\]\:bdr_0 > *:not(:first-child):not(:last-child) {
    border-radius: 0;
}

  [data-state=compressed] .\[\[data-state\=compressed\]_\&\]\:gap_3 {
    gap: var(--spacing-3);
}

  .\[\&_\>_\*\:first-child\]\:bdr-e_0 > *:first-child {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

  .\[\&_\>_\*\:first-child\]\:me_-1px > *:first-child {
    margin-inline-end: -1px;
}

  .\[\&_\>_\*\:last-child\]\:bdr-s_0 > *:last-child {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

  .\[\&_\>_\*\:not\(\:first-child\)\:not\(\:last-child\)\]\:me_-1px > *:not(:first-child):not(:last-child) {
    margin-inline-end: -1px;
}

  .\[\&_\>_\*\:first-child\]\:bdr-b_0 > *:first-child {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

  .\[\&_\>_\*\:last-child\]\:bdr-t_0 > *:last-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

  [data-state=compressed] .\[\[data-state\=compressed\]_\&\]\:flex-d_column {
    flex-direction: column;
}

  [data-state=compressed] .\[\[data-state\=compressed\]_\&\]\:jc_center {
    justify-content: center;
}

  .\[\&_\>_\*\:first-child\]\:mb_-1px > *:first-child,.\[\&_\>_\*\:not\(\:first-child\)\:not\(\:last-child\)\]\:mb_-1px > *:not(:first-child):not(:last-child) {
    margin-bottom: -1px;
}

  .last\:max-w_100\%:last-child {
    max-width: 100%;
}

  .last\:max-w_80\%:last-child {
    max-width: 80%;
}
}