@import 'tailwindcss';

@theme {
	--text-*: initial;
	--text-base-100: 10px;
	--text-base-100--line-height: 14px;
	--text-base-200: 12px;
	--text-base-200--line-height: 16px;
	--text-base-300: 14px;
	--text-base-300--line-height: 20px;
	--text-base-400: 16px;
	--text-base-400--line-height: 22px;
	--text-base-500: 20px;
	--text-base-500--line-height: 28px;
	--text-base-600: 24px;
	--text-base-600--line-height: 32px;
	--text-hero-700: 28px;
	--text-hero-700--line-height: 36px;
	--text-hero-800: 32px;
	--text-hero-800--line-height: 40px;
	--text-hero-900: 40px;
	--text-hero-900--line-height: 52px;
	--text-hero-1000: 68px;
	--text-hero-1000--line-height: 92px;
}

@theme inline {
	--color-*: initial;

	--color-background-overlay: var(--color-background-overlay);
	--color-brand-background: var(--color-brand-background);
	--color-brand-background-2: var(--color-brand-background-2);
	--color-brand-background-2-hover: var(--color-brand-background-2-hover);
	--color-brand-background-2-pressed: var(--color-brand-background-2-pressed);
	--color-brand-background-3-static: var(--color-brand-background-3-static);
	--color-brand-background-4-static: var(--color-brand-background-4-static);
	--color-brand-background-hover: var(--color-brand-background-hover);
	--color-brand-background-inverted: var(--color-brand-background-inverted);
	--color-brand-background-inverted-hover: var(--color-brand-background-inverted-hover);
	--color-brand-background-inverted-pressed: var(--color-brand-background-inverted-pressed);
	--color-brand-background-inverted-selected: var(--color-brand-background-inverted-selected);
	--color-brand-background-pressed: var(--color-brand-background-pressed);
	--color-brand-background-selected: var(--color-brand-background-selected);
	--color-brand-background-static: var(--color-brand-background-static);
	--color-brand-foreground-1: var(--color-brand-foreground-1);
	--color-brand-foreground-2: var(--color-brand-foreground-2);
	--color-brand-foreground-2-hover: var(--color-brand-foreground-2-hover);
	--color-brand-foreground-2-pressed: var(--color-brand-foreground-2-pressed);
	--color-brand-foreground-inverted: var(--color-brand-foreground-inverted);
	--color-brand-foreground-inverted-hover: var(--color-brand-foreground-inverted-hover);
	--color-brand-foreground-inverted-pressed: var(--color-brand-foreground-inverted-pressed);
	--color-brand-foreground-link: var(--color-brand-foreground-link);
	--color-brand-foreground-link-hover: var(--color-brand-foreground-link-hover);
	--color-brand-foreground-link-pressed: var(--color-brand-foreground-link-pressed);
	--color-brand-foreground-link-selected: var(--color-brand-foreground-link-selected);
	--color-brand-foreground-on-light: var(--color-brand-foreground-on-light);
	--color-brand-foreground-on-light-hover: var(--color-brand-foreground-on-light-hover);
	--color-brand-foreground-on-light-pressed: var(--color-brand-foreground-on-light-pressed);
	--color-brand-foreground-on-light-selected: var(--color-brand-foreground-on-light-selected);
	--color-brand-stroke-1: var(--color-brand-stroke-1);
	--color-brand-stroke-2: var(--color-brand-stroke-2);
	--color-brand-stroke-2-contrast: var(--color-brand-stroke-2-contrast);
	--color-brand-stroke-2-hover: var(--color-brand-stroke-2-hover);
	--color-brand-stroke-2-pressed: var(--color-brand-stroke-2-pressed);
	--color-compound-brand-background: var(--color-compound-brand-background);
	--color-compound-brand-background-hover: var(--color-compound-brand-background-hover);
	--color-compound-brand-background-pressed: var(--color-compound-brand-background-pressed);
	--color-compound-brand-foreground-1: var(--color-compound-brand-foreground-1);
	--color-compound-brand-foreground-1-hover: var(--color-compound-brand-foreground-1-hover);
	--color-compound-brand-foreground-1-pressed: var(--color-compound-brand-foreground-1-pressed);
	--color-compound-brand-stroke: var(--color-compound-brand-stroke);
	--color-compound-brand-stroke-hover: var(--color-compound-brand-stroke-hover);
	--color-compound-brand-stroke-pressed: var(--color-compound-brand-stroke-pressed);
	--color-neutral-background-1: var(--color-neutral-background-1);
	--color-neutral-background-1-hover: var(--color-neutral-background-1-hover);
	--color-neutral-background-1-pressed: var(--color-neutral-background-1-pressed);
	--color-neutral-background-1-selected: var(--color-neutral-background-1-selected);
	--color-neutral-background-2: var(--color-neutral-background-2);
	--color-neutral-background-2-hover: var(--color-neutral-background-2-hover);
	--color-neutral-background-2-pressed: var(--color-neutral-background-2-pressed);
	--color-neutral-background-2-selected: var(--color-neutral-background-2-selected);
	--color-neutral-background-3: var(--color-neutral-background-3);
	--color-neutral-background-3-hover: var(--color-neutral-background-3-hover);
	--color-neutral-background-3-pressed: var(--color-neutral-background-3-pressed);
	--color-neutral-background-3-selected: var(--color-neutral-background-3-selected);
	--color-neutral-background-4: var(--color-neutral-background-4);
	--color-neutral-background-4-hover: var(--color-neutral-background-4-hover);
	--color-neutral-background-4-pressed: var(--color-neutral-background-4-pressed);
	--color-neutral-background-4-selected: var(--color-neutral-background-4-selected);
	--color-neutral-background-5: var(--color-neutral-background-5);
	--color-neutral-background-5-hover: var(--color-neutral-background-5-hover);
	--color-neutral-background-5-pressed: var(--color-neutral-background-5-pressed);
	--color-neutral-background-5-selected: var(--color-neutral-background-5-selected);
	--color-neutral-background-6: var(--color-neutral-background-6);
	--color-neutral-background-alpha: var(--color-neutral-background-alpha);
	--color-neutral-background-alpha-2: var(--color-neutral-background-alpha-2);
	--color-neutral-background-disabled: var(--color-neutral-background-disabled);
	--color-neutral-background-inverted: var(--color-neutral-background-inverted);
	--color-neutral-background-inverted-hover: var(--color-neutral-background-inverted-hover);
	--color-neutral-background-inverted-pressed: var(--color-neutral-background-inverted-pressed);
	--color-neutral-background-inverted-selected: var(--color-neutral-background-inverted-selected);
	--color-neutral-background-static: var(--color-neutral-background-static);
	--color-neutral-foreground-1: var(--color-neutral-foreground-1);
	--color-neutral-foreground-1-hover: var(--color-neutral-foreground-1-hover);
	--color-neutral-foreground-1-pressed: var(--color-neutral-foreground-1-pressed);
	--color-neutral-foreground-1-selected: var(--color-neutral-foreground-1-selected);
	--color-neutral-foreground-1-static: var(--color-neutral-foreground-1-static);
	--color-neutral-foreground-2: var(--color-neutral-foreground-2);
	--color-neutral-foreground-2-brand-hover: var(--color-neutral-foreground-2-brand-hover);
	--color-neutral-foreground-2-brand-pressed: var(--color-neutral-foreground-2-brand-pressed);
	--color-neutral-foreground-2-brand-selected: var(--color-neutral-foreground-2-brand-selected);
	--color-neutral-foreground-2-hover: var(--color-neutral-foreground-2-hover);
	--color-neutral-foreground-2-pressed: var(--color-neutral-foreground-2-pressed);
	--color-neutral-foreground-2-selected: var(--color-neutral-foreground-2-selected);
	--color-neutral-foreground-3: var(--color-neutral-foreground-3);
	--color-neutral-foreground-3-hover: var(--color-neutral-foreground-3-hover);
	--color-neutral-foreground-3-pressed: var(--color-neutral-foreground-3-pressed);
	--color-neutral-foreground-3-selected: var(--color-neutral-foreground-3-selected);
	--color-neutral-foreground-4: var(--color-neutral-foreground-4);
	--color-neutral-foreground-5: var(--color-neutral-foreground-5);
	--color-neutral-foreground-5-hover: var(--color-neutral-foreground-5-hover);
	--color-neutral-foreground-5-pressed: var(--color-neutral-foreground-5-pressed);
	--color-neutral-foreground-5-selected: var(--color-neutral-foreground-5-selected);
	--color-neutral-foreground-disabled: var(--color-neutral-foreground-disabled);
	--color-neutral-foreground-inverted: var(--color-neutral-foreground-inverted);
	--color-neutral-foreground-inverted-2: var(--color-neutral-foreground-inverted-2);
	--color-neutral-foreground-inverted-hover: var(--color-neutral-foreground-inverted-hover);
	--color-neutral-foreground-inverted-pressed: var(--color-neutral-foreground-inverted-pressed);
	--color-neutral-foreground-inverted-selected: var(--color-neutral-foreground-inverted-selected);
	--color-neutral-foreground-on-brand: var(--color-neutral-foreground-on-brand);
	--color-neutral-foreground-static-inverted: var(--color-neutral-foreground-static-inverted);
	--color-neutral-shadow-ambient: var(--color-neutral-shadow-ambient);
	--color-neutral-shadow-ambient-darker: var(--color-neutral-shadow-ambient-darker);
	--color-neutral-shadow-ambient-lighter: var(--color-neutral-shadow-ambient-lighter);
	--color-neutral-shadow-key: var(--color-neutral-shadow-key);
	--color-neutral-shadow-key-darker: var(--color-neutral-shadow-key-darker);
	--color-neutral-shadow-key-lighter: var(--color-neutral-shadow-key-lighter);
	--color-neutral-stroke-1: var(--color-neutral-stroke-1);
	--color-neutral-stroke-1-hover: var(--color-neutral-stroke-1-hover);
	--color-neutral-stroke-1-pressed: var(--color-neutral-stroke-1-pressed);
	--color-neutral-stroke-1-selected: var(--color-neutral-stroke-1-selected);
	--color-neutral-stroke-2: var(--color-neutral-stroke-2);
	--color-neutral-stroke-3: var(--color-neutral-stroke-3);
	--color-neutral-stroke-accessible: var(--color-neutral-stroke-accessible);
	--color-neutral-stroke-accessible-hover: var(--color-neutral-stroke-accessible-hover);
	--color-neutral-stroke-accessible-pressed: var(--color-neutral-stroke-accessible-pressed);
	--color-neutral-stroke-accessible-selected: var(--color-neutral-stroke-accessible-selected);
	--color-neutral-stroke-alpha: var(--color-neutral-stroke-alpha);
	--color-neutral-stroke-alpha-2: var(--color-neutral-stroke-alpha-2);
	--color-neutral-stroke-disabled: var(--color-neutral-stroke-disabled);
	--color-neutral-stroke-inverted-disabled: var(--color-neutral-stroke-inverted-disabled);
	--color-neutral-stroke-on-brand: var(--color-neutral-stroke-on-brand);
	--color-neutral-stroke-on-brand-2: var(--color-neutral-stroke-on-brand-2);
	--color-neutral-stroke-on-brand-2-hover: var(--color-neutral-stroke-on-brand-2-hover);
	--color-neutral-stroke-on-brand-2-pressed: var(--color-neutral-stroke-on-brand-2-pressed);
	--color-neutral-stroke-on-brand-2-selected: var(--color-neutral-stroke-on-brand-2-selected);
	--color-neutral-stroke-subtle: var(--color-neutral-stroke-subtle);
	--color-scrollbar-overlay: var(--color-scrollbar-overlay);
	--color-status-danger-background-1: var(--color-status-danger-background-1);
	--color-status-danger-background-2: var(--color-status-danger-background-2);
	--color-status-danger-background-3: var(--color-status-danger-background-3);
	--color-status-danger-background-3-hover: var(--color-status-danger-background-3-hover);
	--color-status-danger-background-3-pressed: var(--color-status-danger-background-3-pressed);
	--color-status-danger-border-1: var(--color-status-danger-border-1);
	--color-status-danger-border-2: var(--color-status-danger-border-2);
	--color-status-danger-border-active: var(--color-status-danger-border-active);
	--color-status-danger-foreground-1: var(--color-status-danger-foreground-1);
	--color-status-danger-foreground-2: var(--color-status-danger-foreground-2);
	--color-status-danger-foreground-3: var(--color-status-danger-foreground-3);
	--color-status-danger-foreground-inverted: var(--color-status-danger-foreground-inverted);
	--color-status-success-background-1: var(--color-status-success-background-1);
	--color-status-success-background-2: var(--color-status-success-background-2);
	--color-status-success-background-3: var(--color-status-success-background-3);
	--color-status-success-border-1: var(--color-status-success-border-1);
	--color-status-success-border-2: var(--color-status-success-border-2);
	--color-status-success-border-active: var(--color-status-success-border-active);
	--color-status-success-foreground-1: var(--color-status-success-foreground-1);
	--color-status-success-foreground-2: var(--color-status-success-foreground-2);
	--color-status-success-foreground-3: var(--color-status-success-foreground-3);
	--color-status-success-foreground-inverted: var(--color-status-success-foreground-inverted);
	--color-status-warning-background-1: var(--color-status-warning-background-1);
	--color-status-warning-background-2: var(--color-status-warning-background-2);
	--color-status-warning-background-3: var(--color-status-warning-background-3);
	--color-status-warning-border-1: var(--color-status-warning-border-1);
	--color-status-warning-border-2: var(--color-status-warning-border-2);
	--color-status-warning-border-active: var(--color-status-warning-border-active);
	--color-status-warning-foreground-1: var(--color-status-warning-foreground-1);
	--color-status-warning-foreground-2: var(--color-status-warning-foreground-2);
	--color-status-warning-foreground-3: var(--color-status-warning-foreground-3);
	--color-status-warning-foreground-inverted: var(--color-status-warning-foreground-inverted);
	--color-stroke-focus-1: var(--color-stroke-focus-1);
	--color-stroke-focus-2: var(--color-stroke-focus-2);
	--color-subtle-background: var(--color-subtle-background);
	--color-subtle-background-hover: var(--color-subtle-background-hover);
	--color-subtle-background-inverted: var(--color-subtle-background-inverted);
	--color-subtle-background-inverted-hover: var(--color-subtle-background-inverted-hover);
	--color-subtle-background-inverted-pressed: var(--color-subtle-background-inverted-pressed);
	--color-subtle-background-inverted-selected: var(--color-subtle-background-inverted-selected);
	--color-subtle-background-light-alpha-hover: var(--color-subtle-background-light-alpha-hover);
	--color-subtle-background-light-alpha-pressed: var(--color-subtle-background-light-alpha-pressed);
	--color-subtle-background-light-alpha-selected: var(--color-subtle-background-light-alpha-selected);
	--color-subtle-background-pressed: var(--color-subtle-background-pressed);
	--color-subtle-background-selected: var(--color-subtle-background-selected);
	--color-transparent-background: var(--color-transparent-background);
	--color-transparent-background-hover: var(--color-transparent-background-hover);
	--color-transparent-background-pressed: var(--color-transparent-background-pressed);
	--color-transparent-background-selected: var(--color-transparent-background-selected);
	--color-transparent-stroke: var(--color-transparent-stroke);
	--color-transparent-stroke-disabled: var(--color-transparent-stroke-disabled);
	--color-transparent-stroke-interactive: var(--color-transparent-stroke-interactive);

	--ease-*: initial;
	--ease-fluent: cubic-bezier(0.33, 0, 0.67, 1);
	--ease-accelerate-min: cubic-bezier(0.8, 0, 0.78, 1);
	--ease-decelerate-mid: cubic-bezier(0, 0, 0, 1);

	--duration-*: initial;
	--duration-faster: 100ms;
	--duration-fast: 150ms;
	--duration-normal: 200ms;
	--duration-gentle: 250ms;
	--duration-slow: 300ms;
	--duration-slower: 400ms;

	--animate-*: initial;
	--animate-spin-linear: spin-linear 1.5s linear infinite;
	--animate-spin-swing: spin-swing 1.5s var(--ease-fluent) infinite;
	--animate-spin-start: spin-start 1.5s var(--ease-fluent) infinite;
	--animate-spin-end: spin-end 1.5s var(--ease-fluent) infinite;

	--radius-*: initial;
	--radius-none: 0;
	--radius-sm: 2px;
	--radius-md: 4px;
	--radius-lg: 6px;
	--radius-xl: 8px;
	--radius-full: 10000px;

	--shadow-*: initial;
	--shadow-2: var(--shadow-2);
	--shadow-4: var(--shadow-4);
	--shadow-8: var(--shadow-8);
	--shadow-16: var(--shadow-16);
	--shadow-28: var(--shadow-28);
	--shadow-64: var(--shadow-64);
}

@keyframes spin-linear {
	100% {
		transform: rotate(360deg);
	}
}

@keyframes spin-swing {
	0% {
		transform: rotate(-135deg);
	}
	50% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(225deg);
	}
}

@keyframes spin-start {
	0%,
	100% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(-80deg);
	}
}

@keyframes spin-end {
	0%,
	100% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(70deg);
	}
}

:root {
	& {
		--color-background-overlay: rgba(0, 0, 0, 0.4);
		--color-brand-background: #ad46ff;
		--color-brand-background-2: #fcf8ff;
		--color-brand-background-2-hover: #f2e2ff;
		--color-brand-background-2-pressed: #d8a8ff;
		--color-brand-background-3-static: #8335c7;
		--color-brand-background-4-static: #53227e;
		--color-brand-background-hover: #983ee6;
		--color-brand-background-inverted: #ffffff;
		--color-brand-background-inverted-hover: #fcf8ff;
		--color-brand-background-inverted-pressed: #e5c5ff;
		--color-brand-background-inverted-selected: #f2e2ff;
		--color-brand-background-pressed: #53227e;
		--color-brand-background-selected: #8335c7;
		--color-brand-background-static: #ad46ff;
		--color-brand-foreground-1: #ad46ff;
		--color-brand-foreground-2: #983ee6;
		--color-brand-foreground-2-hover: #8335c7;
		--color-brand-foreground-2-pressed: #34154f;
		--color-brand-foreground-inverted: #ba65ff;
		--color-brand-foreground-inverted-hover: #c47bff;
		--color-brand-foreground-inverted-pressed: #ba65ff;
		--color-brand-foreground-link: #983ee6;
		--color-brand-foreground-link-hover: #8335c7;
		--color-brand-foreground-link-pressed: #53227e;
		--color-brand-foreground-link-selected: #983ee6;
		--color-brand-foreground-on-light: #ad46ff;
		--color-brand-foreground-on-light-hover: #983ee6;
		--color-brand-foreground-on-light-pressed: #6f2da8;
		--color-brand-foreground-on-light-selected: #8335c7;
		--color-brand-stroke-1: #ad46ff;
		--color-brand-stroke-2: #e5c5ff;
		--color-brand-stroke-2-contrast: #e5c5ff;
		--color-brand-stroke-2-hover: #ce91ff;
		--color-brand-stroke-2-pressed: #ad46ff;
		--color-compound-brand-background: #ad46ff;
		--color-compound-brand-background-hover: #983ee6;
		--color-compound-brand-background-pressed: #8335c7;
		--color-compound-brand-foreground-1: #ad46ff;
		--color-compound-brand-foreground-1-hover: #983ee6;
		--color-compound-brand-foreground-1-pressed: #8335c7;
		--color-compound-brand-stroke: #ad46ff;
		--color-compound-brand-stroke-hover: #983ee6;
		--color-compound-brand-stroke-pressed: #8335c7;
		--color-neutral-background-1: #ffffff;
		--color-neutral-background-1-hover: #f5f5f5;
		--color-neutral-background-1-pressed: #e0e0e0;
		--color-neutral-background-1-selected: #ebebeb;
		--color-neutral-background-2: #fafafa;
		--color-neutral-background-2-hover: #f0f0f0;
		--color-neutral-background-2-pressed: #dbdbdb;
		--color-neutral-background-2-selected: #e6e6e6;
		--color-neutral-background-3: #f5f5f5;
		--color-neutral-background-3-hover: #ebebeb;
		--color-neutral-background-3-pressed: #d6d6d6;
		--color-neutral-background-3-selected: #e0e0e0;
		--color-neutral-background-4: #f0f0f0;
		--color-neutral-background-4-hover: #fafafa;
		--color-neutral-background-4-pressed: #f5f5f5;
		--color-neutral-background-4-selected: #ffffff;
		--color-neutral-background-5: #ebebeb;
		--color-neutral-background-5-hover: #f5f5f5;
		--color-neutral-background-5-pressed: #f0f0f0;
		--color-neutral-background-5-selected: #fafafa;
		--color-neutral-background-6: #e6e6e6;
		--color-neutral-background-alpha: rgba(255, 255, 255, 0.5);
		--color-neutral-background-alpha-2: rgba(255, 255, 255, 0.8);
		--color-neutral-background-disabled: #f0f0f0;
		--color-neutral-background-inverted: #292929;
		--color-neutral-background-inverted-hover: #3d3d3d;
		--color-neutral-background-inverted-pressed: #1f1f1f;
		--color-neutral-background-inverted-selected: #383838;
		--color-neutral-background-static: #333333;
		--color-neutral-foreground-1: #242424;
		--color-neutral-foreground-1-hover: #242424;
		--color-neutral-foreground-1-pressed: #242424;
		--color-neutral-foreground-1-selected: #242424;
		--color-neutral-foreground-1-static: #242424;
		--color-neutral-foreground-2: #424242;
		--color-neutral-foreground-2-brand-hover: #ad46ff;
		--color-neutral-foreground-2-brand-pressed: #983ee6;
		--color-neutral-foreground-2-brand-selected: #ad46ff;
		--color-neutral-foreground-2-hover: #242424;
		--color-neutral-foreground-2-pressed: #242424;
		--color-neutral-foreground-2-selected: #242424;
		--color-neutral-foreground-3: #616161;
		--color-neutral-foreground-3-hover: #424242;
		--color-neutral-foreground-3-pressed: #424242;
		--color-neutral-foreground-3-selected: #424242;
		--color-neutral-foreground-4: #707070;
		--color-neutral-foreground-5: #616161;
		--color-neutral-foreground-5-hover: #242424;
		--color-neutral-foreground-5-pressed: #242424;
		--color-neutral-foreground-5-selected: #242424;
		--color-neutral-foreground-disabled: #bdbdbd;
		--color-neutral-foreground-inverted: #ffffff;
		--color-neutral-foreground-inverted-2: #ffffff;
		--color-neutral-foreground-inverted-hover: #ffffff;
		--color-neutral-foreground-inverted-pressed: #ffffff;
		--color-neutral-foreground-inverted-selected: #ffffff;
		--color-neutral-foreground-on-brand: #ffffff;
		--color-neutral-foreground-static-inverted: #ffffff;
		--color-neutral-shadow-ambient: rgba(0, 0, 0, 0.12);
		--color-neutral-shadow-ambient-darker: rgba(0, 0, 0, 0.2);
		--color-neutral-shadow-ambient-lighter: rgba(0, 0, 0, 0.06);
		--color-neutral-shadow-key: rgba(0, 0, 0, 0.14);
		--color-neutral-shadow-key-darker: rgba(0, 0, 0, 0.24);
		--color-neutral-shadow-key-lighter: rgba(0, 0, 0, 0.07);
		--color-neutral-stroke-1: #d1d1d1;
		--color-neutral-stroke-1-hover: #c7c7c7;
		--color-neutral-stroke-1-pressed: #b3b3b3;
		--color-neutral-stroke-1-selected: #bdbdbd;
		--color-neutral-stroke-2: #e0e0e0;
		--color-neutral-stroke-3: #f0f0f0;
		--color-neutral-stroke-accessible: #616161;
		--color-neutral-stroke-accessible-hover: #575757;
		--color-neutral-stroke-accessible-pressed: #4d4d4d;
		--color-neutral-stroke-accessible-selected: #ad46ff;
		--color-neutral-stroke-alpha: rgba(0, 0, 0, 0.05);
		--color-neutral-stroke-alpha-2: rgba(255, 255, 255, 0.2);
		--color-neutral-stroke-disabled: #e0e0e0;
		--color-neutral-stroke-inverted-disabled: rgba(255, 255, 255, 0.4);
		--color-neutral-stroke-on-brand: #ffffff;
		--color-neutral-stroke-on-brand-2: #ffffff;
		--color-neutral-stroke-on-brand-2-hover: #ffffff;
		--color-neutral-stroke-on-brand-2-pressed: #ffffff;
		--color-neutral-stroke-on-brand-2-selected: #ffffff;
		--color-neutral-stroke-subtle: #e0e0e0;
		--color-scrollbar-overlay: rgba(0, 0, 0, 0.5);
		--color-status-danger-background-1: #fdf3f4;
		--color-status-danger-background-2: #eeacb2;
		--color-status-danger-background-3: #c50f1f;
		--color-status-danger-background-3-hover: #b10e1c;
		--color-status-danger-background-3-pressed: #960b18;
		--color-status-danger-border-1: #eeacb2;
		--color-status-danger-border-2: #c50f1f;
		--color-status-danger-border-active: #c50f1f;
		--color-status-danger-foreground-1: #6e0811;
		--color-status-danger-foreground-2: #b10e1c;
		--color-status-danger-foreground-3: #c50f1f;
		--color-status-danger-foreground-inverted: #dc626d;
		--color-status-success-background-1: #f1faf1;
		--color-status-success-background-2: #9fd89f;
		--color-status-success-background-3: #107c10;
		--color-status-success-border-1: #9fd89f;
		--color-status-success-border-2: #359b35;
		--color-status-success-border-active: #107c10;
		--color-status-success-foreground-1: #094509;
		--color-status-success-foreground-2: #0e700e;
		--color-status-success-foreground-3: #359b35;
		--color-status-success-foreground-inverted: #54b054;
		--color-status-warning-background-1: #fff9f5;
		--color-status-warning-background-2: #fdcfb5;
		--color-status-warning-background-3: #f7630c;
		--color-status-warning-border-1: #fdcfb5;
		--color-status-warning-border-2: #8a3707;
		--color-status-warning-border-active: #f7630c;
		--color-status-warning-foreground-1: #8a3707;
		--color-status-warning-foreground-2: #de590b;
		--color-status-warning-foreground-3: #8a3707;
		--color-status-warning-foreground-inverted: #faa06b;
		--color-stroke-focus-1: #ffffff;
		--color-stroke-focus-2: #000000;
		--color-subtle-background: transparent;
		--color-subtle-background-hover: #f5f5f5;
		--color-subtle-background-inverted: transparent;
		--color-subtle-background-inverted-hover: rgba(0, 0, 0, 0.1);
		--color-subtle-background-inverted-pressed: rgba(0, 0, 0, 0.3);
		--color-subtle-background-inverted-selected: rgba(0, 0, 0, 0.2);
		--color-subtle-background-light-alpha-hover: rgba(255, 255, 255, 0.7);
		--color-subtle-background-light-alpha-pressed: rgba(255, 255, 255, 0.5);
		--color-subtle-background-light-alpha-selected: transparent;
		--color-subtle-background-pressed: #e0e0e0;
		--color-subtle-background-selected: #ebebeb;
		--color-transparent-background: transparent;
		--color-transparent-background-hover: transparent;
		--color-transparent-background-pressed: transparent;
		--color-transparent-background-selected: transparent;
		--color-transparent-stroke: transparent;
		--color-transparent-stroke-disabled: transparent;
		--color-transparent-stroke-interactive: transparent;

		--shadow-2: 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14);
		--shadow-4: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
		--shadow-8: 0 0 2px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.14);
		--shadow-16: 0 0 2px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.14);
		--shadow-28: 0 0 8px rgba(0, 0, 0, 0.12), 0 14px 28px rgba(0, 0, 0, 0.14);
		--shadow-64: 0 0 8px rgba(0, 0, 0, 0.12), 0 32px 64px rgba(0, 0, 0, 0.14);
	}

	@media (prefers-color-scheme: dark) {
		--color-background-overlay: rgba(0, 0, 0, 0.5);
		--color-brand-background: #983ee6;
		--color-brand-background-2: #1c0b2a;
		--color-brand-background-2-hover: #53227e;
		--color-brand-background-2-pressed: #07030a;
		--color-brand-background-3-static: #8335c7;
		--color-brand-background-4-static: #53227e;
		--color-brand-background-hover: #ad46ff;
		--color-brand-background-inverted: #ffffff;
		--color-brand-background-inverted-hover: #fcf8ff;
		--color-brand-background-inverted-pressed: #e5c5ff;
		--color-brand-background-inverted-selected: #f2e2ff;
		--color-brand-background-pressed: #53227e;
		--color-brand-background-selected: #8335c7;
		--color-brand-background-static: #ad46ff;
		--color-brand-foreground-1: #ba65ff;
		--color-brand-foreground-2: #c47bff;
		--color-brand-foreground-2-hover: #d8a8ff;
		--color-brand-foreground-2-pressed: #fcf8ff;
		--color-brand-foreground-inverted: #ad46ff;
		--color-brand-foreground-inverted-hover: #983ee6;
		--color-brand-foreground-inverted-pressed: #8335c7;
		--color-brand-foreground-link: #ba65ff;
		--color-brand-foreground-link-hover: #c47bff;
		--color-brand-foreground-link-pressed: #b456ff;
		--color-brand-foreground-link-selected: #ba65ff;
		--color-brand-foreground-on-light: #ad46ff;
		--color-brand-foreground-on-light-hover: #983ee6;
		--color-brand-foreground-on-light-pressed: #6f2da8;
		--color-brand-foreground-on-light-selected: #8335c7;
		--color-brand-stroke-1: #ba65ff;
		--color-brand-stroke-2: #6f2da8;
		--color-brand-stroke-2-contrast: #6f2da8;
		--color-brand-stroke-2-hover: #6f2da8;
		--color-brand-stroke-2-pressed: #34154f;
		--color-compound-brand-background: #ba65ff;
		--color-compound-brand-background-hover: #c47bff;
		--color-compound-brand-background-pressed: #b456ff;
		--color-compound-brand-foreground-1: #ba65ff;
		--color-compound-brand-foreground-1-hover: #c47bff;
		--color-compound-brand-foreground-1-pressed: #b456ff;
		--color-compound-brand-stroke: #ba65ff;
		--color-compound-brand-stroke-hover: #c47bff;
		--color-compound-brand-stroke-pressed: #b456ff;
		--color-neutral-background-1: #292929;
		--color-neutral-background-1-hover: #3d3d3d;
		--color-neutral-background-1-pressed: #1f1f1f;
		--color-neutral-background-1-selected: #383838;
		--color-neutral-background-2: #1f1f1f;
		--color-neutral-background-2-hover: #333333;
		--color-neutral-background-2-pressed: #141414;
		--color-neutral-background-2-selected: #2e2e2e;
		--color-neutral-background-3: #141414;
		--color-neutral-background-3-hover: #292929;
		--color-neutral-background-3-pressed: #0a0a0a;
		--color-neutral-background-3-selected: #242424;
		--color-neutral-background-4: #0a0a0a;
		--color-neutral-background-4-hover: #1f1f1f;
		--color-neutral-background-4-pressed: #000000;
		--color-neutral-background-4-selected: #1a1a1a;
		--color-neutral-background-5: #000000;
		--color-neutral-background-5-hover: #141414;
		--color-neutral-background-5-pressed: #050505;
		--color-neutral-background-5-selected: #0f0f0f;
		--color-neutral-background-6: #333333;
		--color-neutral-background-alpha: rgba(26, 26, 26, 0.5);
		--color-neutral-background-alpha-2: rgba(26, 26, 26, 0.7);
		--color-neutral-background-disabled: #141414;
		--color-neutral-background-inverted: #ffffff;
		--color-neutral-background-inverted-hover: #f5f5f5;
		--color-neutral-background-inverted-pressed: #e0e0e0;
		--color-neutral-background-inverted-selected: #ebebeb;
		--color-neutral-background-static: #3d3d3d;
		--color-neutral-foreground-1: #ffffff;
		--color-neutral-foreground-1-hover: #ffffff;
		--color-neutral-foreground-1-pressed: #ffffff;
		--color-neutral-foreground-1-selected: #ffffff;
		--color-neutral-foreground-1-static: #242424;
		--color-neutral-foreground-2: #d6d6d6;
		--color-neutral-foreground-2-brand-hover: #ba65ff;
		--color-neutral-foreground-2-brand-pressed: #b456ff;
		--color-neutral-foreground-2-brand-selected: #ba65ff;
		--color-neutral-foreground-2-hover: #ffffff;
		--color-neutral-foreground-2-pressed: #ffffff;
		--color-neutral-foreground-2-selected: #ffffff;
		--color-neutral-foreground-3: #adadad;
		--color-neutral-foreground-3-hover: #d6d6d6;
		--color-neutral-foreground-3-pressed: #d6d6d6;
		--color-neutral-foreground-3-selected: #d6d6d6;
		--color-neutral-foreground-4: #999999;
		--color-neutral-foreground-5: #adadad;
		--color-neutral-foreground-5-hover: #ffffff;
		--color-neutral-foreground-5-pressed: #ffffff;
		--color-neutral-foreground-5-selected: #ffffff;
		--color-neutral-foreground-disabled: #5c5c5c;
		--color-neutral-foreground-inverted: #242424;
		--color-neutral-foreground-inverted-2: #242424;
		--color-neutral-foreground-inverted-hover: #242424;
		--color-neutral-foreground-inverted-pressed: #242424;
		--color-neutral-foreground-inverted-selected: #242424;
		--color-neutral-foreground-on-brand: #ffffff;
		--color-neutral-foreground-static-inverted: #ffffff;
		--color-neutral-shadow-ambient: rgba(0, 0, 0, 0.24);
		--color-neutral-shadow-ambient-darker: rgba(0, 0, 0, 0.4);
		--color-neutral-shadow-ambient-lighter: rgba(0, 0, 0, 0.12);
		--color-neutral-shadow-key: rgba(0, 0, 0, 0.28);
		--color-neutral-shadow-key-darker: rgba(0, 0, 0, 0.48);
		--color-neutral-shadow-key-lighter: rgba(0, 0, 0, 0.14);
		--color-neutral-stroke-1: #666666;
		--color-neutral-stroke-1-hover: #757575;
		--color-neutral-stroke-1-pressed: #6b6b6b;
		--color-neutral-stroke-1-selected: #707070;
		--color-neutral-stroke-2: #525252;
		--color-neutral-stroke-3: #3d3d3d;
		--color-neutral-stroke-accessible: #adadad;
		--color-neutral-stroke-accessible-hover: #bdbdbd;
		--color-neutral-stroke-accessible-pressed: #b3b3b3;
		--color-neutral-stroke-accessible-selected: #ba65ff;
		--color-neutral-stroke-alpha: rgba(255, 255, 255, 0.1);
		--color-neutral-stroke-alpha-2: rgba(255, 255, 255, 0.2);
		--color-neutral-stroke-disabled: #424242;
		--color-neutral-stroke-inverted-disabled: rgba(255, 255, 255, 0.4);
		--color-neutral-stroke-on-brand: #292929;
		--color-neutral-stroke-on-brand-2: #ffffff;
		--color-neutral-stroke-on-brand-2-hover: #ffffff;
		--color-neutral-stroke-on-brand-2-pressed: #ffffff;
		--color-neutral-stroke-on-brand-2-selected: #ffffff;
		--color-neutral-stroke-subtle: #0a0a0a;
		--color-scrollbar-overlay: rgba(255, 255, 255, 0.6);
		--color-status-danger-background-1: #3b0509;
		--color-status-danger-background-2: #6e0811;
		--color-status-danger-background-3: #c50f1f;
		--color-status-danger-background-3-hover: #b10e1c;
		--color-status-danger-background-3-pressed: #960b18;
		--color-status-danger-border-1: #c50f1f;
		--color-status-danger-border-2: #dc626d;
		--color-status-danger-border-active: #dc626d;
		--color-status-danger-foreground-1: #dc626d;
		--color-status-danger-foreground-2: #eeacb2;
		--color-status-danger-foreground-3: #eeacb2;
		--color-status-danger-foreground-inverted: #cc2635;
		--color-status-success-background-1: #052505;
		--color-status-success-background-2: #094509;
		--color-status-success-background-3: #107c10;
		--color-status-success-border-1: #107c10;
		--color-status-success-border-2: #359b35;
		--color-status-success-border-active: #54b054;
		--color-status-success-foreground-1: #54b054;
		--color-status-success-foreground-2: #9fd89f;
		--color-status-success-foreground-3: #359b35;
		--color-status-success-foreground-inverted: #0e700e;
		--color-status-warning-background-1: #4a1e04;
		--color-status-warning-background-2: #8a3707;
		--color-status-warning-background-3: #f7630c;
		--color-status-warning-border-1: #f7630c;
		--color-status-warning-border-2: #f98845;
		--color-status-warning-border-active: #faa06b;
		--color-status-warning-foreground-1: #faa06b;
		--color-status-warning-foreground-2: #fdcfb5;
		--color-status-warning-foreground-3: #fdcfb5;
		--color-status-warning-foreground-inverted: #8a3707;
		--color-stroke-focus-1: #000000;
		--color-stroke-focus-2: #ffffff;
		--color-subtle-background: transparent;
		--color-subtle-background-hover: #383838;
		--color-subtle-background-inverted: transparent;
		--color-subtle-background-inverted-hover: rgba(0, 0, 0, 0.1);
		--color-subtle-background-inverted-pressed: rgba(0, 0, 0, 0.3);
		--color-subtle-background-inverted-selected: rgba(0, 0, 0, 0.2);
		--color-subtle-background-light-alpha-hover: rgba(255, 255, 255, 0.1);
		--color-subtle-background-light-alpha-pressed: rgba(255, 255, 255, 0.05);
		--color-subtle-background-light-alpha-selected: transparent;
		--color-subtle-background-pressed: #2e2e2e;
		--color-subtle-background-selected: #333333;
		--color-transparent-background: transparent;
		--color-transparent-background-hover: transparent;
		--color-transparent-background-pressed: transparent;
		--color-transparent-background-selected: transparent;
		--color-transparent-stroke: transparent;
		--color-transparent-stroke-disabled: transparent;
		--color-transparent-stroke-interactive: transparent;

		--shadow-2: 0 0 2px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.28);
		--shadow-4: 0 0 2px rgba(0, 0, 0, 0.24), 0 2px 4px rgba(0, 0, 0, 0.28);
		--shadow-8: 0 0 2px rgba(0, 0, 0, 0.24), 0 4px 8px rgba(0, 0, 0, 0.28);
		--shadow-16: 0 0 2px rgba(0, 0, 0, 0.24), 0 8px 16px rgba(0, 0, 0, 0.28);
		--shadow-28: 0 0 8px rgba(0, 0, 0, 0.24), 0 14px 28px rgba(0, 0, 0, 0.28);
		--shadow-64: 0 0 8px rgba(0, 0, 0, 0.24), 0 32px 64px rgba(0, 0, 0, 0.28);
	}
}

@layer base {
	:where(body) {
		background: var(--color-neutral-background-2);
		color: var(--color-neutral-foreground-1);
		color-scheme: light dark;
	}

	/* prevent body scroll when modal dialog is open */
	:where(body:has(dialog:modal)) {
		overflow: hidden;
	}
}

/* #region anchor positioning */

/* anchor-name: set via --anchor CSS variable */
@utility anchor {
	anchor-name: var(--anchor);
}

/* position-anchor: attach to anchor via --anchor CSS variable */
@utility anchored {
	position-anchor: var(--anchor);
	:where(&) {
		position: absolute;
	}
}

/* position-area: position relative to anchor */
@utility anchored-top {
	position-area: top;
}
@utility anchored-top-center {
	position-area: top center;
}
@utility anchored-top-left {
	position-area: top left;
}
@utility anchored-top-right {
	position-area: top right;
}
@utility anchored-top-span-left {
	position-area: top span-left;
}
@utility anchored-top-span-right {
	position-area: top span-right;
}
@utility anchored-bottom {
	position-area: bottom;
}
@utility anchored-bottom-center {
	position-area: bottom center;
}
@utility anchored-bottom-left {
	position-area: bottom left;
}
@utility anchored-bottom-right {
	position-area: bottom right;
}
@utility anchored-bottom-span-left {
	position-area: bottom span-left;
}
@utility anchored-bottom-span-right {
	position-area: bottom span-right;
}
@utility anchored-left {
	position-area: left;
}
@utility anchored-left-center {
	position-area: left center;
}
@utility anchored-left-span-top {
	position-area: left span-top;
}
@utility anchored-left-span-bottom {
	position-area: left span-bottom;
}
@utility anchored-right {
	position-area: right;
}
@utility anchored-right-center {
	position-area: right center;
}
@utility anchored-right-span-top {
	position-area: right span-top;
}
@utility anchored-right-span-bottom {
	position-area: right span-bottom;
}

/* position-try-fallbacks: fallback positions */
@utility try-none {
	position-try-fallbacks: none;
}
@utility try-flip-x {
	position-try-fallbacks: flip-inline;
}
@utility try-flip-y {
	position-try-fallbacks: flip-block;
}
@utility try-flip-all {
	position-try-fallbacks:
		flip-block,
		flip-inline,
		flip-block flip-inline;
}
@utility try-flip-start {
	position-try-fallbacks: flip-start;
}

/* position-try-order: fallback ordering */
@utility try-order-normal {
	position-try-order: normal;
}
@utility try-order-width {
	position-try-order: most-width;
}
@utility try-order-height {
	position-try-order: most-height;
}

/* position-visibility: conditional visibility */
@utility anchored-visible-always {
	position-visibility: always;
}
@utility anchored-visible-anchor {
	position-visibility: anchors-visible;
}
@utility anchored-visible-no-overflow {
	position-visibility: no-overflow;
}

/* #endregion */

/* #region dialog animations */

/*
 * dialog entry/exit animations using @starting-style
 * inspired by FluentUI's Dialog motion: scale + fade with decelerate/accelerate easing
 */

@utility dialog-animate {
	/* transition properties for both dialog surface and backdrop */
	transition-property: opacity, scale, overlay, display;
	transition-duration: var(--duration-faster);
	transition-timing-function: var(--ease-decelerate-mid);
	transition-behavior: allow-discrete;

	/* final open state */
	&[open] {
		opacity: 1;
		scale: 1;
	}

	/* exit state (dialog closing) */
	&:not([open]) {
		opacity: 0;
		scale: 0.95;
		transition-timing-function: var(--ease-accelerate-min);
	}

	/* entry starting state */
	@starting-style {
		&[open] {
			opacity: 0;
			scale: 0.95;
		}
	}
}

/* backdrop animation (fade only, no scale) */
@utility dialog-backdrop-animate {
	&::backdrop {
		transition-property: opacity, overlay, display;
		transition-duration: var(--duration-faster);
		transition-timing-function: var(--ease-decelerate-mid);
		transition-behavior: allow-discrete;
		opacity: 1;
	}

	&:not([open])::backdrop {
		opacity: 0;
		transition-timing-function: var(--ease-accelerate-min);
	}

	@starting-style {
		&[open]::backdrop {
			opacity: 0;
		}
	}
}

/* #endregion */

/* #region popover animations */

/*
 * popover entry/exit animations using @starting-style
 * inspired by FluentUI's Menu motion: slide + fade based on placement
 */

@utility popover-animate {
	--_slide-x: 0;
	--_slide-y: 8px;

	transition-property: opacity, translate, overlay, display;
	transition-duration: var(--duration-faster);
	transition-timing-function: var(--ease-decelerate-mid);
	transition-behavior: allow-discrete;

	/* final open state */
	&:popover-open {
		opacity: 1;
		translate: 0 0;
	}

	/* exit state */
	&:not(:popover-open) {
		opacity: 0;
		translate: var(--_slide-x) var(--_slide-y);
		transition-timing-function: var(--ease-accelerate-min);
	}

	/* entry starting state */
	@starting-style {
		&:popover-open {
			opacity: 0;
			translate: var(--_slide-x) var(--_slide-y);
		}
	}
}

/* slide direction variants based on anchor position */
@utility popover-slide-down {
	--_slide-x: 0;
	--_slide-y: -8px;
}
@utility popover-slide-up {
	--_slide-x: 0;
	--_slide-y: 8px;
}
@utility popover-slide-left {
	--_slide-x: 8px;
	--_slide-y: 0;
}
@utility popover-slide-right {
	--_slide-x: -8px;
	--_slide-y: 0;
}

/* #endregion */