@layer utilities {
	.design-system {
		.bg-white {
			background-color: var(--white);
		}

		.box-white {
			gap: var(--spacing-md);
			border-radius: var(--radius-xl);
			border-style: solid;
			border-width: 1px;
			border-color: var(--gray-3);
			padding: var(--spacing-md);
			--tw-shadow:
				0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)),
				0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
			box-shadow:
				var(--tw-inset-shadow), var(--tw-inset-ring-shadow),
				var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
		}

		.sr-only {
			position: absolute;
			width: 1px;
			height: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
			border-width: 0;
		}

		.inset-0 {
			inset: calc(var(--spacing) * 0);
		}

		.inset-x-0 {
			inset-inline: calc(var(--spacing) * 0);
		}

		.top-0 {
			top: calc(var(--spacing) * 0);
		}

		.top-14 {
			top: calc(var(--spacing) * 14);
		}

		.top-\[3\.75rem\] {
			top: 3.75rem;
		}

		.right-0 {
			right: calc(var(--spacing) * 0);
		}

		.right-5 {
			right: calc(var(--spacing) * 5);
		}

		.isolate {
			isolation: isolate;
		}

		.m-auto {
			margin: auto;
		}

		.mx-3 {
			margin-inline: calc(var(--spacing) * 3);
		}

		.my-2 {
			margin-block: calc(var(--spacing) * 2);
		}

		.my-5 {
			margin-block: calc(var(--spacing) * 5);
		}

		.mt-5 {
			margin-top: calc(var(--spacing) * 5);
		}

		.mt-10 {
			margin-top: calc(var(--spacing) * 10);
		}

		.mr-3 {
			margin-right: calc(var(--spacing) * 3);
		}

		.mb-3 {
			margin-bottom: calc(var(--spacing) * 3);
		}

		.mb-5 {
			margin-bottom: calc(var(--spacing) * 5);
		}

		.h-56 {
			height: calc(var(--spacing) * 56);
		}

		.h-\[15rem\] {
			height: 15rem;
		}

		.h-\[40rem\] {
			height: 40rem;
		}

		.h-fit {
			height: fit-content;
		}

		.h-full {
			height: 100%;
		}

		.w-1\/2 {
			width: calc(1 / 2 * 100%);
		}

		.w-1\/4 {
			width: calc(1 / 4 * 100%);
		}

		.w-3\/6 {
			width: calc(3 / 6 * 100%);
		}

		.w-4\/5 {
			width: calc(4 / 5 * 100%);
		}

		.w-4\/6 {
			width: calc(4 / 6 * 100%);
		}

		.w-8 {
			width: calc(var(--spacing) * 8);
		}

		.w-\[13rem\] {
			width: 13rem;
		}

		.w-fit {
			width: fit-content;
		}

		/* .w-full {
		width: 100%;
	} */

		.w-max {
			width: max-content;
		}

		.max-w-\[42rem\] {
			max-width: 42rem;
		}

		.max-w-\[45rem\] {
			max-width: 45rem;
		}

		.max-w-\[50rem\] {
			max-width: 50rem;
		}

		.max-w-\[60rem\] {
			max-width: 60rem;
		}

		.basis-\[16\.5rem\] {
			flex-basis: 16.5rem;
		}

		.cursor-not-allowed {
			cursor: not-allowed;
		}

		.list-outside {
			list-style-position: outside;
		}

		.list-disc {
			list-style-type: disc;
		}

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

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

		.\!gap-sm {
			gap: var(--spacing-sm) !important;
		}

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

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

		.gap-10 {
			gap: calc(var(--spacing) * 10);
		}

		.gap-\[12px\] {
			gap: 12px;
		}

		.space-y-1 {
			:where(& > :not(:last-child)) {
				--tw-space-y-reverse: 0;
				margin-block-start: calc(
					calc(var(--spacing) * 1) * var(--tw-space-y-reverse)
				);
				margin-block-end: calc(
					calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse))
				);
			}
		}

		.gap-y-4 {
			row-gap: calc(var(--spacing) * 4);
		}

		.overflow-y-scroll {
			overflow-y: scroll;
		}

		.border-\[1\.5px\] {
			border-style: solid;
			border-width: 1.5px;
		}

		.border-b-4 {
			border-bottom-style: var(--tw-border-style);
			border-bottom-width: 4px;
		}

		.border-l-8 {
			border-left-style: var(--tw-border-style);
			border-left-width: 8px;
		}

		.border-gray-2 {
			border-color: var(--gray-2);
		}

		.border-gray-2a {
			border-color: var(--gray-2a);
		}

		.border-gray-3 {
			border-color: var(--gray-3);
		}

		.border-gray-10 {
			border-color: var(--gray-10);
		}

		.border-orange-7 {
			border-color: var(--orange-7);
		}

		.border-red-7 {
			border-color: var(--red-7);
		}

		.border-white\/10 {
			border-color: color-mix(in oklab, var(--white) 10%, transparent);
		}

		.border-white\/15 {
			border-color: color-mix(in oklab, var(--white) 15%, transparent);
		}

		.border-b-red {
			border-bottom-color: var(--red);
		}

		.border-l-brand-10 {
			border-left-color: var(--brand-10);
		}

		.\!bg-inherit {
			background-color: inherit !important;
		}

		.bg-\[\#25232f\] {
			background-color: #25232f;
		}

		.bg-\[\#33313e\] {
			background-color: #33313e;
		}

		.bg-gray-1a {
			background-color: var(--gray-1a);
		}

		.bg-gray-2 {
			background-color: var(--gray-2);
		}

		.bg-gray-2a {
			background-color: var(--gray-2a);
		}

		.bg-gray-3 {
			background-color: var(--gray-3);
		}

		.bg-gray-11 {
			background-color: var(--gray-11);
		}

		.bg-gray-12 {
			background-color: var(--gray-12);
		}

		.bg-inverted-10a {
			background-color: var(--inverted-10a);
		}

		.bg-red-1a {
			background-color: var(--red-1a);
		}

		.bg-transparent {
			background-color: transparent;
		}

		.bg-white\/5 {
			background-color: color-mix(in oklab, var(--white) 5%, transparent);
		}

		.p-2 {
			padding: calc(var(--spacing) * 2);
		}

		.p-3 {
			padding: calc(var(--spacing) * 3);
		}

		.px-3 {
			padding-inline: calc(var(--spacing) * 3);
		}

		.px-5 {
			padding-inline: calc(var(--spacing) * 5);
		}

		.px-\[15px\] {
			padding-inline: 15px;
		}

		.px-xs {
			padding-inline: var(--spacing-xs);
		}

		.py-2 {
			padding-block: calc(var(--spacing) * 2);
		}

		.py-\[10px\] {
			padding-block: 10px;
		}

		.py-lg {
			padding-block: var(--spacing-lg);
		}

		.pt-0 {
			padding-top: calc(var(--spacing) * 0);
		}

		.pt-\[0\.2rem\] {
			padding-top: 0.2rem;
		}

		.pt-lg {
			padding-top: var(--spacing-lg);
		}

		.pr-2 {
			padding-right: calc(var(--spacing) * 2);
		}

		.pb-2xl {
			padding-bottom: var(--spacing-2xl);
		}

		.pb-3 {
			padding-bottom: calc(var(--spacing) * 3);
		}

		.pb-md {
			padding-bottom: var(--spacing-md);
		}

		.pb-xl {
			padding-bottom: var(--spacing-xl);
		}

		.pl-1 {
			padding-left: calc(var(--spacing) * 1);
		}

		.pl-2 {
			padding-left: calc(var(--spacing) * 2);
		}

		.pl-3xl {
			padding-left: var(--spacing-3xl);
		}

		.pl-7 {
			padding-left: calc(var(--spacing) * 7);
		}

		.pl-md {
			padding-left: var(--spacing-md);
		}

		.text-amber-400 {
			color: var(--amber-400);
		}

		.text-brand-7 {
			color: var(--brand-7);
		}

		.text-brand-8 {
			color: var(--brand-8);
		}

		.text-emerald-400 {
			color: var(--emerald-400);
		}

		.text-gray-8 {
			color: var(--gray-8);
		}

		.text-gray-9 {
			color: var(--gray-9);
		}

		.text-red {
			color: var(--red);
		}

		.opacity-50 {
			opacity: 50%;
		}

		.shadow-black\/20 {
			--tw-shadow-color: color-mix(in oklab, var(--black) 20%, transparent);
		}

		.shadow-black\/30 {
			--tw-shadow-color: color-mix(in oklab, var(--black) 30%, transparent);
		}

		.default-transition {
			.default-transition,
			.default-transition * {
				transition-property: color, background-color, transform;
				transition-duration: 150ms;
			}
		}

		.duration-\[250ms\] {
			--tw-duration: 250ms;
			transition-duration: 250ms;
		}

		.\*\:mx-2 {
			:is(& > *) {
				margin-inline: calc(var(--spacing) * 2);
			}
		}

		.\*\:w-16 {
			:is(& > *) {
				width: calc(var(--spacing) * 16);
			}
		}

		.\*\:pr-1 {
			:is(& > *) {
				padding-right: calc(var(--spacing) * 1);
			}
		}

		.hover\:bg-gray-1 {
			&:hover {
				@media (hover: hover) {
					background-color: var(--gray-1);
				}
			}
		}

		.hover\:bg-gray-10 {
			&:hover {
				@media (hover: hover) {
					background-color: var(--gray-10);
				}
			}
		}

		.hover\:bg-gray-12 {
			&:hover {
				@media (hover: hover) {
					background-color: var(--gray-12);
				}
			}
		}

		.hover\:border-red-5 {
			&:hover {
				@media (hover: hover) {
					border-color: var(--red-5);
				}
			}
		}

		.hover\:border-transparent {
			&:hover {
				@media (hover: hover) {
					border-color: transparent;
				}
			}
		}

		.hover\:bg-inverted-1a {
			&:hover {
				@media (hover: hover) {
					background-color: var(--inverted-1a);
				}
			}
		}

		.hover\:bg-red-1 {
			&:hover {
				@media (hover: hover) {
					background-color: var(--red-1);
				}
			}
		}

		.hover\:bg-white\/5 {
			&:hover {
				@media (hover: hover) {
					background-color: color-mix(in oklab, var(--white) 5%, transparent);
				}
			}
		}

		.hover\:bg-white\/15 {
			&:hover {
				@media (hover: hover) {
					background-color: color-mix(in oklab, var(--white) 15%, transparent);
				}
			}
		}

		.hover\:opacity-100 {
			&:hover {
				@media (hover: hover) {
					opacity: 100%;
				}
			}
		}

		.focus\:outline-none {
			&:focus {
				--tw-outline-style: none;
				outline-style: none;
			}
		}

		.max-xl\:vt {
			@media (width < 80rem) {
				display: flex;
				flex-direction: column;
			}
		}

		.max-xl\:items-start {
			@media (width < 80rem) {
				align-items: flex-start;
			}
		}

		.max-xl\:peer-checked\:vt {
			@media (width < 80rem) {
				&:is(:where(.peer):checked ~ *) {
					display: flex;
					flex-direction: column;
				}
			}
		}

		.max-lg\:hidden {
			@media (width < 64rem) {
				display: none;
			}
		}

		.max-lg\:hidden {
			@media (width < 64rem) {
				display: none;
			}
		}

		.max-lg\:w-5\/6 {
			@media (width < 64rem) {
				width: calc(5 / 6 * 100%);
			}
		}

		.max-lg\:w-40 {
			@media (width < 64rem) {
				width: calc(var(--spacing) * 40);
			}
		}

		.sm\:hz {
			@media (width >= 40rem) {
				display: flex;
				flex-direction: row;
			}
		}

		.sm\:tag {
			@media (width >= 40rem) {
				display: flex;
				align-items: center;
				gap: var(--spacing-xs);
				border-radius: calc(infinity * 1px);
				border-style: solid;
				border-width: 2px;
				border-color: var(--brand-3a);
				background-color: var(--brand-2a);
				padding-inline: calc(var(--spacing) * 3);
				padding-block: calc(var(--spacing) * 1);
				color: var(--brand-8);
				transition-property:
					color,
					background-color,
					border-color,
					outline-color,
					text-decoration-color,
					fill,
					stroke,
					--tw-gradient-from,
					--tw-gradient-via,
					--tw-gradient-to,
					opacity,
					box-shadow,
					transform,
					translate,
					scale,
					rotate,
					filter,
					-webkit-backdrop-filter,
					backdrop-filter;
				transition-timing-function: var(
					--tw-ease,
					var(--default-transition-timing-function)
				);
				transition-duration: var(
					--tw-duration,
					var(--default-transition-duration)
				);
				inline-size: fit-content;
			}
		}

		.sm\:block {
			@media (width >= 40rem) {
				display: block;
			}
		}

		.sm\:inline {
			@media (width >= 40rem) {
				display: inline;
			}
		}

		.sm\:text-left {
			@media (width >= 40rem) {
				text-align: left;
			}
		}

		.md\:hz {
			@media (width >= 48rem) {
				display: flex;
				flex-direction: row;
			}
		}

		.md\:block {
			@media (width >= 48rem) {
				display: block;
			}
		}

		.md\:hidden {
			@media (width >= 48rem) {
				display: none;
			}
		}

		.md\:hidden {
			@media (width >= 48rem) {
				display: none;
			}
		}

		.md\:inline {
			@media (width >= 48rem) {
				display: inline;
			}
		}

		.md\:w-2\/3 {
			@media (width >= 48rem) {
				width: calc(2 / 3 * 100%);
			}
		}

		.md\:flex-initial {
			@media (width >= 48rem) {
				flex: 0 auto;
			}
		}

		.md\:grid-cols-2 {
			@media (width >= 48rem) {
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}
		}

		.md\:grid-cols-3 {
			@media (width >= 48rem) {
				grid-template-columns: repeat(3, minmax(0, 1fr));
			}
		}

		.md\:items-center {
			@media (width >= 48rem) {
				align-items: center;
			}
		}

		.md\:gap-2xl {
			@media (width >= 48rem) {
				gap: var(--spacing-2xl);
			}
		}

		.md\:rounded-lg {
			@media (width >= 48rem) {
				border-radius: var(--radius-lg);
			}
		}

		.md\:border {
			@media (width >= 48rem) {
				border-style: solid;
				border-width: 1px;
			}
		}

		.md\:border-gray-11 {
			@media (width >= 48rem) {
				border-color: var(--gray-11);
			}
		}

		.md\:p-2xl {
			@media (width >= 48rem) {
				padding: var(--spacing-2xl);
			}
		}

		.md\:p-xl {
			@media (width >= 48rem) {
				padding: var(--spacing-xl);
			}
		}

		.md\:pt-xl {
			@media (width >= 48rem) {
				padding-top: var(--spacing-xl);
			}
		}

		.md\:text-center {
			@media (width >= 48rem) {
				text-align: center;
			}
		}

		.lg\:hz {
			@media (width >= 64rem) {
				display: flex;
				flex-direction: row;
			}
		}

		.lg\:block {
			@media (width >= 64rem) {
				display: block;
			}
		}

		.lg\:hidden {
			@media (width >= 64rem) {
				display: none;
			}
		}

		.lg\:grid {
			@media (width >= 64rem) {
				display: grid;
			}
		}

		.lg\:table-cell {
			@media (width >= 64rem) {
				display: table-cell;
			}
		}

		.lg\:grid-cols-4 {
			@media (width >= 64rem) {
				grid-template-columns: repeat(4, minmax(0, 1fr));
			}
		}

		.lg\:gap-4xl {
			@media (width >= 64rem) {
				gap: var(--spacing-4xl);
			}
		}

		.lg\:text-left {
			@media (width >= 64rem) {
				text-align: left;
			}
		}

		.xl\:hz {
			@media (width >= 80rem) {
				display: flex;
				flex-direction: row;
			}
		}

		.xl\:block {
			@media (width >= 80rem) {
				display: block;
			}
		}

		.xl\:grid {
			@media (width >= 80rem) {
				display: grid;
			}
		}

		.xl\:hidden {
			@media (width >= 80rem) {
				display: none;
			}
		}

		.xl\:hidden {
			@media (width >= 80rem) {
				display: none;
			}
		}

		.xl\:grid-cols-3 {
			@media (width >= 80rem) {
				grid-template-columns: repeat(3, minmax(0, 1fr));
			}
		}

		.xl\:grid-cols-6 {
			@media (width >= 80rem) {
				grid-template-columns: repeat(6, minmax(0, 1fr));
			}
		}

		.xl\:pt-0 {
			@media (width >= 80rem) {
				padding-top: calc(var(--spacing) * 0);
			}
		}

		.xl\:pr-lg {
			@media (width >= 80rem) {
				padding-right: var(--spacing-lg);
			}
		}

		.xl\:pl-lg {
			@media (width >= 80rem) {
				padding-left: var(--spacing-lg);
			}
		}

		.xl\:max-2xl\:vt {
			@media (width >= 80rem) {
				@media (width < 96rem) {
					display: flex;
					flex-direction: column;
				}
			}
		}

		.xl\:max-2xl\:hidden {
			@media (width >= 80rem) {
				@media (width < 96rem) {
					display: none;
				}
			}
		}

		.xl\:max-2xl\:hidden {
			@media (width >= 80rem) {
				@media (width < 96rem) {
					display: none;
				}
			}
		}

		.\32 xl\:hz {
			@media (width >= 96rem) {
				display: flex;
				flex-direction: row;
			}
		}

		.\32 xl\:inline {
			@media (width >= 96rem) {
				display: inline;
			}
		}

		.\32 xl\:text-left {
			@media (width >= 96rem) {
				text-align: left;
			}
		}

		.dark\:border-2 {
			&:where(.dark-mode *) {
				border-style: solid;
				border-width: 2px;
			}
		}

		.dark\:border-gray-6 {
			&:where(.dark-mode *) {
				border-color: var(--gray-6);
			}
		}

		.dark\:border-gray-10 {
			&:where(.dark-mode *) {
				border-color: var(--gray-10);
			}
		}

		.dark\:border-gray-12 {
			&:where(.dark-mode *) {
				border-color: var(--gray-12);
			}
		}

		.dark\:border-inverted-3a {
			&:where(.dark-mode *) {
				border-color: var(--inverted-3a);
			}
		}

		.dark\:\!bg-gray-12 {
			&:where(.dark-mode *) {
				background-color: var(--gray-12) !important;
			}
		}

		.dark\:bg-gray-10 {
			&:where(.dark-mode *) {
				background-color: var(--gray-10);
			}
		}

		.dark\:bg-transparent {
			&:where(.dark-mode *) {
				background-color: transparent;
			}
		}

		.dark\:text-white {
			&:where(.dark-mode *) {
				color: var(--white);
			}
		}

		.dark\:hover\:bg-gray-12 {
			&:where(.dark-mode *) {
				&:hover {
					@media (hover: hover) {
						background-color: var(--gray-12);
					}
				}
			}
		}
	}
}