:root {
    --shadow-2xs: 0 1px rgb(0 0 0 / 0.05);
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
    --shadow-none: 0 0 #0000;
}

.px-4 {
    padding-inline: 4px;
}

.px-8 {
    padding-inline: 8px;
}

.px-12 {
    padding-inline: 12px;
}

.px-16 {
    padding-inline: 16px;
}

.px-24 {
    padding-inline: 24px;
}

.px-32 {
    padding-inline: 32px;
}

.py-4 {
    padding-block: 4px;
}

.py-16 {
    padding-block: 16px;
}

.py-24 {
    padding-block: 24px;
}

.py-32 {
    padding-block: 32px;
}

.p-px {
    padding: 1px;
}

.p-4 {
    padding: 4px;
}

.p-8 {
    padding: 8px;
}

.p-12 {
    padding: 12px;
}

.p-16 {
    padding: 16px;
}

.p-24 {
    padding: 24px;
}

.p-40 {
    padding: 40px;
}

.pt-8 {
    padding-top: 8px;
}

.pt-12 {
    padding-top: 12px;
}

.pt-24 {
    padding-top: 24px;
}

.pb-16 {
    padding-bottom: 16px;
}

.mt-0 {
    margin-top: 0;
}

.mt-4 {
    margin-top: 4px;
}

.mt-8 {
    margin-top: 8px;
}

.mt-12 {
    margin-top: 12px;
}

.mt-16 {
    margin-top: 16px;
}

.mt-24 {
    margin-top: 24px;
}

.mt-36 {
    margin-top: 36px;
}

.mb-16 {
    margin-bottom: 16px;
}

.ml-auto {
    margin-left: auto;
}

.mr-auto {
    margin-right: auto;
}

.min-h-0 {
    min-height: 0;
}

.min-h-24 {
    min-height: 24px;
}

.flex {
    display: flex;
}

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

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

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

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

.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-responsive {
    grid-template-columns: repeat(var(--grid-track-size, auto-fill), minmax(min(var(--grid-col-min-w, auto), 100%), 1fr))
}

.col-span-full {
    grid-column: 1 / -1;
}

.grid-rows-0fr {
    grid-template-rows: 0fr;
}

.grid-rows-1fr {
    grid-template-rows: 1fr;
}

.gap-y-4 {
    row-gap: 4px;
}

.gap-y-16 {
    row-gap: 16px;
}

.gap-y-32 {
    row-gap: 32px;
}

.gap-x-16 {
    column-gap: 16px;
}

.gap-x-40 {
    column-gap: 40px;
}

.gap-2 {
    gap: 2px;
}

.gap-4 {
    gap: 4px;
}

.gap-6 {
    gap: 6px;
}

.gap-8 {
    gap: 8px;
}

.gap-12 {
    gap: 12px;
}

.gap-16 {
    gap: 16px;
}

.gap-24 {
    gap: 24px;
}

.gap-32 {
    gap: 32px;
}

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

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

.items-end {
    align-items: end;
}

.items-baseline {
    align-items: baseline;
}

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

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

.justify-end {
    justify-content: end;
}

.justify-start {
    justify-content: start;
}

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

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

.hover\:text-on-brand:hover {
    color: var(--color-text-on-brand);
}

.active\:text-on-brand:active {
    color: var(--color-text-on-brand);
}

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

.text-surface-950 {
    color: var(--color-surface-950);
}

.text-surface-900 {
    color: var(--color-surface-900);
}

.text-surface-800 {
    color: var(--color-surface-800);
}

.text-surface-700 {
    color: var(--color-surface-700);
}

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

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

.bg-surface-50 {
    background-color: var(--color-surface-50);
}

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

.rounded-2 {
    border-radius: 2px;
}

.rounded-4 {
    border-radius: 4px;
}

.border-t {
    border: 0 solid;
    border-top-width: 1px;
}

.border-b {
    border: 0 solid;
    border-bottom-width: 1px;
}

.border-surface-50 {
    border-color: var(--color-surface-50);
}

.border-surface-100 {
    border-color: var(--color-surface-100);
}

.border-surface-200 {
    border-color: var(--color-surface-200);
}

.font-bold {
    font-weight: 700;
}

.font-extrabold {
    font-weight: 800;
}

.tracking-4 {
    letter-spacing: 4%;
}

.uppercase {
    text-transform: uppercase;
}

.text-base {
    font-size: 16px;
}

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.leading-0 {
    line-height: 0;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.sticky {
    position: sticky;
}

.top-0 {
    top: 0;
}

.blur-5 {
    filter: blur(5px);
}

.text-10 {
    font-size: 10px;
}

.bottom-0 {
    bottom: 0;
}

.z-1 {
    z-index: 1;
}

.z-2 {
    z-index: 2;
}

.z-10 {
    z-index: 10;
}

.overflow-hidden {
    overflow: hidden;
}

.hidden {
    display: none !important;
}

.cursor-pointer {
    cursor: pointer;
}

.invisible {
    visibility: hidden;
}

.opacity-0 {
    opacity: 0;
}

.opacity-70 {
    opacity: 0.7;
}

.opacity-100 {
    opacity: 1;
}

/* Shadows */
.shadow-2xs {
    box-shadow: var(--shadow-2xs);
}

.shadow-xs {
    box-shadow: var(--shadow-xs);
}

.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-md {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

.shadow-xl {
    box-shadow: var(--shadow-xl);
}

.shadow-2xl {
    box-shadow: var(--shadow-2xl);
}

.shadow-inner {
    box-shadow: var(--shadow-inner);
}

.shadow-none {
    box-shadow: var(--shadow-none);
}

/* Transition defaults */
*, ::before, ::after {
    --tw-duration: 150ms;
    --tw-easing: cubic-bezier(0.4, 0, 0.2, 1);
    --tw-gradient-from: transparent;
    --tw-gradient-to: transparent;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

/* Transitions */
.transition {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter;
    transition-timing-function: var(--tw-easing);
    transition-duration: var(--tw-duration);
}

.transition-none {
    transition-property: none;
}

.transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-easing);
    transition-duration: var(--tw-duration);
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: var(--tw-easing);
    transition-duration: var(--tw-duration);
}

.transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-easing);
    transition-duration: var(--tw-duration);
}

.transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: var(--tw-easing);
    transition-duration: var(--tw-duration);
}

.transition-transform {
    transition-property: transform;
    transition-timing-function: var(--tw-easing);
    transition-duration: var(--tw-duration);
}

.transition-grid-rows {
    transition-property: grid-template-rows;
    transition-timing-function: var(--tw-easing);
    transition-duration: var(--tw-duration);
}

/* Duration */
.duration-75 {
    --tw-duration: 75ms;
}

.duration-100 {
    --tw-duration: 100ms;
}

.duration-150 {
    --tw-duration: 150ms;
}

.duration-200 {
    --tw-duration: 200ms;
}

.duration-300 {
    --tw-duration: 300ms;
}

.duration-500 {
    --tw-duration: 500ms;
}

/* Easing */
.ease-linear {
    --tw-easing: linear;
}

.ease-in {
    --tw-easing: cubic-bezier(0.4, 0, 1, 1);
}

.ease-out {
    --tw-easing: cubic-bezier(0, 0, 0.2, 1);
}

.ease-in-out {
    --tw-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Delay */
.delay-75 {
    transition-delay: 75ms;
}

.delay-100 {
    transition-delay: 100ms;
}

.delay-150 {
    transition-delay: 150ms;
}

.delay-200 {
    transition-delay: 200ms;
}

.delay-300 {
    transition-delay: 300ms;
}

.rotate-x-180 {
    transform: rotateX(180deg);
}

/*
    Breakpoints
    sm	40rem (640px)
    md	48rem (768px)
    lg	64rem (1024px)
    xl	80rem (1280px)
    2xl	96rem (1536px)
*/

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

    .sm\:gap-32 {
        gap: 32px;
    }

    .sm\:mt-8 {
        margin-top: 8px;
    }

    .sm\:p-8 {
        padding: 8px;
    }

    .sm\:px-16 {
        padding-inline: 16px;
    }

    .sm\:px-24 {
        padding-inline: 24px;
    }

    .sm\:p-16 {
        padding: 16px;
    }

    .sm\:p-24 {
        padding: 24px;
    }

    .sm\:bg-surface-50 {
        background-color: var(--color-surface-50)
    }

    .sm\:shadow-sm {
        box-shadow: var(--shadow-sm);
    }
}

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

    .max-sm\:w-full {
        width: 100%;
    }
}

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

    .md\:p-8 {
        padding: 8px;
    }

    .md\:px-12 {
        padding-inline: 12px;
    }

    .md\:px-32 {
        padding-inline: 32px;
    }

    .md\:py-24 {
        padding-block: 24px;
    }

    .md\:py-16 {
        padding-block: 16px;
    }

    .md\:bg-surface-50 {
        background-color: var(--color-surface-50)
    }

    .md\:shadow-sm {
        box-shadow: var(--shadow-sm);
    }
}

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

    .max-md\:border-none {
        border-style: none;
    }

    .max-md\:grid-rows-0fr {
        grid-template-rows: 0fr;
    }

    .max-md\:grid-rows-1fr {
        grid-template-rows: 1fr;
    }
}

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

    .lg\:gap-32 {
        gap: 32px;
    }

    .lg\:px-24 {
        padding-inline: 24px;
    }

    .lg\:px-32 {
        padding-inline: 32px;
    }

    .lg\:py-24 {
        padding-block: 24px;
    }

    .lg\:py-16 {
        padding-block: 16px;
    }
}

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

/* Container queries — Tailwind-style `@<bp>:` prefix.
   Add `.@container` to parent element to make it the size container.
   @3xs	16rem (256px)
   @2xs	18rem (288px)
   @xs	20rem (320px)
   @sm	24rem (384px)
   @md	28rem (448px)
   @lg	32rem (512px)
   @xl	36rem (576px)
   @2xl	42rem (672px)
   @3xl	48rem (768px)
   @4xl	56rem (896px)
   @5xl	64rem (1024px)
   @6xl	72rem (1152px)
   @7xl	80rem (1280px)
*/
.\@container {
    container-type: inline-size;
}

@container (width >= 42rem) {
    .\@2xl\:hidden {
        display: none;
    }

    .\@2xl\:bg-surface-50 {
        background-color: var(--color-surface-50);
    }

    .\@2xl\:p-4 {
        padding: 4px;
    }

    .\@2xl\:py-32 {
        padding-block: 32px;
    }

    .\@2xl\:px-24 {
        padding-inline: 24px;
    }

    .\@2xl\:gap-4 {
        gap: 4px;
    }
}